/* Awful hackery for the 'What is DJ' page, to get the effect of text flowing
   in curves around circles. The actual photos are placed as backgrounds, and
   invisible divs of calculated widths are used to approximate a circle and
   squish the text around the outside of where the picture is. */

#sml {
  background: url(whatis-newcircle1.jpg) no-repeat;
  min-height: 235px;
}
#sml-01,#sml-02,#sml-03,#sml-04,#sml-05,#sml-06,#sml-07,#sml-08,#sml-09,#sml-10,#sml-11,#sml-12,#sml-13,#sml-14,#sml-15,#sml-16,#sml-17,#sml-18,#sml-19,#sml-20 { padding: 0; margin: 0; float: left; clear: left; height: 24px; }
#sml-01 { width: 202px; }
#sml-03 { width: 222px; }
#sml-05 { width: 234px; }
#sml-07 { width: 239px; }
#sml-09 { width: 244px; }
#sml-11 { width: 244px; }
#sml-13 { width: 239px; }
#sml-15 { width: 224px; }
#sml-17 { width: 202px; }
#sml-19 { width: 180px; height: 12px; }

#tr-00 { width: 10px; }
#tr-03 { width: 20px; }
#tr-05 { width: 30px; }
#tr-07 { width: 40px; }
#tr-09 { width: 50px; }
#tr-11 { width: 60px; }
#tr-13 { width: 70px; }
#tr-15 { width: 80px; }
#tr-17 { width: 90px; }
#tr-19 { width: 100px; }
#tr-21 { width: 110px; }
#tr-00,#tr-03,#tr-05,#tr-07,#tr-09,#tr-11,#tr-13,#tr-15,#tr-17,#tr-19,#tr-21 {
  height: 24px; float: right; clear: right; }