/* radio utd color-indepent styles - luke@theclockspot.com, 2007-02-26 */
/* luke, 2007-09-22 */

body { margin: 0; padding: 0; font-size: 12px; font-family: Verdana, sans-serif; text-align: center; }
/* the text-align center centers the divs on the page in Windows MSIE */

.reg { font-size: 12px; font-family: Verdana, sans-serif; }

a:hover, a:visited:hover	{ color: #f64; text-decoration: underline; }
a:active, a:visited:active  { color: #ffffff; text-decoration: underline; }

img a { text-decoration: none; }

hr { width: auto; clear: both; }

@media screen
	{
	#content { 
		margin: 20px auto 20px; 
		padding: 0; 
		text-align: left; 
		width: 680px;
	}
	.leftcolumn { float: left; width: 170px; }
	.rightcolumn { float: right; width: 490px;}
	.unicolumn { margin: 0 0 20px; padding: 0; }
	.box { width: auto; margin: 0 auto 20px; padding: 10px; padding-bottom: 0px; } /* or: padding: 10px 10px 0; */
	.clear { clear: both; }
	}

   /**************************************************************************/
  /*stay colors - 'black' means black box on white text; 'white' vice versa */
 /**************************************************************************/
.stayblack { color: #fff; background: #111 }
.stayblack h1, .stayblack h2, .stayblack h3, .stayblack h4 { color: #fff; }
.stayblack h1 a, .stayblack h2 a, .stayblack h3 a, .stayblack h4 a { color: #fff; }
.stayblack a { color: #fff; }
.staywhite { color: #111; background: #eee }
.staywhite h1, .staywhite h2, .staywhite h3, .staywhite h4 { color: #111111; }
.staywhite h1 a, .staywhite h2 a, .staywhite h3 a, .staywhite h4 a { color: #111111; }
.staywhite a { color: #661a00; }
.stayblack a:hover, .staywhite a:hover { color: #f64; }

h1 { text-align: left; margin: 0px 0 6px; font-size: 30px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; }
h2 { text-align: left; margin: 0px 0 10px; font-size: 24px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; }
.styleh2 { font-size: 24px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; }
h3 { text-align: left; margin: 0px 0 9px; font-size: 20px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; }
h4 { text-align: left; margin: 0px 0 8px; font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; }
.invertedh { padding: 3px; }
.underscore { border-bottom: 1px dotted #888; } /* sneaky both color */
.overscore { border-top: 1px dotted #888; } /* sneaky both color */

.marginbottom15px { margin-bottom: 15px; }
.marginbottom0px { margin-bottom: 0px; }

p { text-align: left; margin: 0px 0 10px; line-height: 1.5 }
.indent { padding-left: 15px; }
ul { text-align: left; line-height: 1.5; padding-left: 15px; }
ul li { margin-bottom: 8px; }
table { margin: 0px auto 10px; font-size: 11px; vertical-align: top; z-index: 1; }

p.boxfoot { text-align: right; font-size: 9px; margin-bottom: 0px; }

/* images are 678x220 (radio is 172 high) */
/*margin bottom 50px; background: url(bannerphotos/tallynstu.jpg) top left no-repeat; */
/*.bannerbox { height: 220px; padding: 0px; }
.bannerboxblack { position: relative; left: 12px; top: 185px; }
.bannerboxwhite { position: absolute; left: -2px; top: -2px; }
.bannerboxblack h1 { display: inline; color: #000; font-size: 30px; font-weight: bold; }
.bannerboxblack p { margin-left: 10px; display: inline; color: #000; text-decoration: none; }
.bannerboxblack a, .bannerboxblack a.visited, .bannerboxblack a.hover { color: #000; text-decoration: none; }
.bannerboxwhite h1 { display: inline; color: #fff; font-size: 30px; font-weight: bold; text-decoration: none; }
.bannerboxwhite p { margin-left: 10px; display: inline; color: #fff; text-decoration: none;}
.bannerboxwhite a, .bannerboxwhite a.visited, .bannerboxwhite a.hover { color: #fff; text-decoration: none; }
.bannerboxt { position: relative; left: 1px; top: 1px; color: #fff; }
.bannerboxtshadow { position: absolute; left: -1px; top: -1px; color: #000;} */

.bannerbox { height: 220px; padding: 0px; width: auto; position: relative; }
/* .bannerbox img{ width: 100%; } */
#bannerphoto { background: #888888; }
.bannerboxblack { float: left; position: relative; left: 12px; top: 185px; z-index: 1000; }
.bannerboxwhite { float: left; position: absolute; left: -2px; top: -2px; z-index: 1001; }
.bannerboxblack h1 { display: inline; color: #000; font-size: 30px; font-weight: bold; }
.bannerboxblack p { margin-left: 10px; display: inline; color: #000; text-decoration: none; }
.bannerboxwhite h1 { display: inline; color: #fff; font-size: 30px; font-weight: bold; text-decoration: none; }
.bannerboxwhite p { margin-left: 10px; display: inline; color: #fff; text-decoration: none;}
.bannerboxt { position: relative; left: 1px; top: 1px; color: #fff; }
.bannerboxtshadow { position: absolute; left: -1px; top: -1px; color: #000;}

/*shadows*/
/*for internet explorer*/
.shadow { height: 1em; filter: Shadow(Color=#666666, Direction=135, Strength=5); }
/*for gecko*/
.shadow { line-height: 2em; white-space: nowrap; }
/*for mozilla and safari and anything else that knows :before*/
/*note: safari knows text-shadow but most everything else doesn't*/
.shadow:before {
  display: block;
  margin: 0 0 -2.12em 0.15em;
  padding: 0;
  color: #666666; 
}

#shadow_header:before { content: 'In shadow'; }

#header { position: relative; clear: both; margin: 0 auto 20px; width: auto; vertical-align: top; }
#radio { position: relative; clear: both; margin: 0 auto; width: 780px; height: 350px; }
#clock { position: absolute; top: 22px; left: 60px; width: 231px; height: 116px; }

/* display divs - doesn't work right now because the text is not always vertically where we want it, depending on browser - need vertical centering -->
/*.radiodisp { position: absolute; left: 192px; width: 400px; height: 20px; background-color: #033; color: #8ff; font-family: Helvetica, Arial, sans-serif; text-align: center; font-weight: normal; font-size: 14px; overflow: hidden; white-space: nowrap; }
#radiodisp1 { top: 183px; }
#radiodisp2 { top: 216px; }
#radiodispline { top: 202px; height: 7px; background-image: url(fmdial.gif); } */

/* display table */
.radiodisp { display: block; position: absolute; left: 192px; top: 180px; color: #8ff; font-family: Helvetica, Arial, sans-serif; text-align: center; vertical-align: center; font-weight: normal; font-size: 14px; overflow: hidden; white-space: nowrap; }
.radiodisptext { height: 22px; vertical-align: center; width: 400px; }
.radiodisptextdiv { width: 400px; text-align: center; overflow: hidden; white-space: nowrap; }
.radiodispline { height: 10px; background: url(fmdial.gif) top no-repeat; width: 100%; width: 400px; }

.radiodispsmall { font-weight: bold; font-size: 11px; margin-right: 10px; }
.radiodisp a { text-decoration: none; color: #8ff; }
.radiodisp a:visited { text-decoration: none; color: #8ff; }
.radiodisp a:hover { text-decoration: underline; color: #fff; }
.radiodisp a:active { text-decoration: underline; color: #fff; }

/* buttons */
.buttoncont { width: 75px; height: 40px; } /* page selector button container; also b1 etc */
.buttonstate { position: absolute; top: 0px; left: 20px; width: 37px; height: 44px; } /* state image container; three of these inside each button container; also b1o etc */
.buttonlabel { position: absolute; left: 0px; top: 36px; width: 100%; font-family: Helvetica, Arial, sans-serif; text-align: center; font-size: 14px; color: #444; overflow: hidden; white-space: nowrap; }
.b1 { position: absolute; left: 138px; top: 250px; } /* button container - there are seven such buttons, with different lefts */
.b2 { position: absolute; left: 210px; top: 250px; }
.b3 { position: absolute; left: 282px; top: 250px; }
.b4 { position: absolute; left: 354px; top: 250px; }
.b5 { position: absolute; left: 426px; top: 250px; }
.b6 { position: absolute; left: 498px; top: 250px; }
.b7 { position: absolute; left: 570px; top: 250px; }
.b1o { background-image: url(buttons/b1o.jpg); } /* out, or mouseover, state image */
.b1i { background-image: url(buttons/b1i.jpg); } /* in, or mousedown, state image */
.b1r { background-image: url(buttons/b1r.jpg); } /* regular, or mouseout, state image */
.b2o { background-image: url(buttons/b2o.jpg); }
.b2i { background-image: url(buttons/b2i.jpg); }
.b2r { background-image: url(buttons/b2r.jpg); }
.b3o { background-image: url(buttons/b3o.jpg); }
.b3i { background-image: url(buttons/b3i.jpg); }
.b3r { background-image: url(buttons/b3r.jpg); }
.b4o { background-image: url(buttons/b4o.jpg); }
.b4i { background-image: url(buttons/b4i.jpg); }
.b4r { background-image: url(buttons/b4r.jpg); }
.b5o { background-image: url(buttons/b5o.jpg); }
.b5i { background-image: url(buttons/b5i.jpg); }
.b5r { background-image: url(buttons/b5r.jpg); }
.b6o { background-image: url(buttons/b6o.jpg); }
.b6i { background-image: url(buttons/b6i.jpg); }
.b6r { background-image: url(buttons/b6r.jpg); }
.b7o { background-image: url(buttons/b7o.jpg); }
.b7i { background-image: url(buttons/b7i.jpg); }
.b7r { background-image: url(buttons/b7r.jpg); }

.colorbuttoncont { width: 22px; height: 26px; } /* also bb, bw */
.colorbuttonstate { position: absolute; left: 0px; top: 0px; width: 22px; height: 26px; } /* also bbo, etc */
.colorbuttonlabel { position: absolute; left: 90px; top: 288px; width: 42px; height: 16px; font-family: Helvetica, Arial, sans-serif; text-align: center; font-size: 11px; color: #444; overflow: hidden; white-space: nowrap; }
.bb { position: absolute; left: 90px; top: 265px; }
.bw { position: absolute; left: 111px; top: 265px; }
.bbo { background-image: url(buttons/bbo.jpg); } /* out, or mouseover, state image */
.bbi { background-image: url(buttons/bbi.jpg); } /* in, or mousedown, state image */
.bbr { background-image: url(buttons/bbr.jpg); } /* regular, or mouseout, state image */
.bwo { background-image: url(buttons/bwo.jpg); }
.bwi { background-image: url(buttons/bwi.jpg); }
.bwr { background-image: url(buttons/bwr.jpg); }

.bigbuttoncont { width: 48px; height: 53px; } /* also b0, b8 */
.bigbuttonstate { position: absolute; left: 0px; top: 0px; width: 48px; height: 53px; } /*also b0o, etc */
.bigbuttontunelabel { position: absolute; left: 100px; top: 219px; width: 80px; height: 16px; font-family: Helvetica, Arial, sans-serif; text-align: center; font-size: 14px; font-weight: bold; color: #f64; overflow: hidden; white-space: nowrap; }
.bigbuttonplaylabel { position: absolute; left: 602px; top: 219px; width: 80px; height: 16px; font-family: Helvetica, Arial, sans-serif; text-align: center; font-size: 14px; color: #ddd; overflow: hidden; white-space: nowrap; }
.b0 { position: absolute; left: 116px; top: 180px; }
.b8 { position: absolute; left: 618px; top: 180px; }
.b0o { background-image: url(buttons/b0o.jpg); } /* out, or mouseover, state image */
.b0i { background-image: url(buttons/b0i.jpg); } /* in, or mousedown, state image */
.b0r { background-image: url(buttons/b0r.jpg); } /* regular, or mouseout, state image */
.b8o { background-image: url(buttons/b8o.jpg); }
.b8i { background-image: url(buttons/b8i.jpg); }
.b8r { background-image: url(buttons/b8r.jpg); }

/*#tunein { position: absolute; width: 90px; height: 44px; left: 555px; top: 182px; background: #a43; border: 1px solid #e88; overflow: hidden; white-space: nowrap; margin: 0px; padding: 0px; }
#tunein .title { color: #fff; text-align: center; font-weight: bold; color: #fff; text-shadow: #532 2px 2px 0px; margin: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 16px; }
#tunein .link { text-align: center; margin: -2px; font-size: 12px; }
#tunein .link a { color: #fff; }
#tunein .link a:hover { color: #fcc; }

#meter { position: absolute; width: 79px; height: 44px; left: 105px; top: 182px; background: #6bb; border: 1px solid #8ee; overflow: hidden; white-space: nowrap; margin: 0px; padding: 0px; }
#meter .title { color: #fff; text-align: center; font-weight: bold; color: #fff; text-shadow: #256 2px 2px 0px; margin: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 16px; }
#meter .link { text-align: center; margin: -2px; font-size: 12px; }
#meter .link a { color: #fff; }
#meter .link a:hover { color: #aff; }*/

/*programs page */
/*ALAS to get the showscrolleritems in a row, I have to generate a table around them in programs.js.
/*the horizontal scroller will be a 'box' as well*/
#showscroller { height: 180px; padding: 0; } /*overflow-x: hidden; overflow-y: hidden; white-space: nowrap;*/
/*.ssc { height: 180px;  } showscrollercontainer*/
.ssi { padding: 5px; height: 170px; border: none; border-right: 1px dotted #888888; font-size: 10px; overflow: hidden; } /*showscrolleritem*/ /*width128px overflow-x: hidden; overflow-y: hidden; */
.sst { float: right; font-size: 12px; } /*showscrollertime - width keeps it on the right*/
.ssd { float: left; font-size: 14px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; }
.ssa { margin: 18px 0 3px; padding: 0; width: 128px; height: 128px; } /*showscrollerart*/
#showarea { }
/* end programs page */

.first { margin-top: 0 }
.comments { text-align: right; }
.last { margin-bottom: 0 }

.center { text-align: center; margin: 0px auto; }
.right { text-align: right; margin: 0px auto; }

/*#showartholder { float: right; width: 128px; margin: 0; padding: 0; }*/
.showart { margin: 0; padding: 0; border: 1px solid #666666; background-color: #333; width: 128px; height: 128px; } /*position: relative; z-index: 10;*/
/* #showart { position: relative; top: 10px; right: 10px; margin: 0; padding: 0; border: 1px solid #666666; background-color: #333; width: 128px; height: 128px; } */

.last5songs { text-transform: capitalize; }

#footer { clear: both; margin: 20px auto 0; width: auto; font-size: 10px; color: #AAAAAA; text-align: center; vertical-align: bottom; position: relative; }
#footer p { text-align: center; }

#turntable { clear: both; margin: 0 auto; width: 780px; height: 200px; position: relative; }

#rotatey { background: url(rotatey.gif); width: 136px; height: 15px; position: absolute; left: 254px; top: 59px; }
/*#rotatey { background: url(rotatey.gif) 254px 59px no-repeat; width: 390px; height: 74px; margin: 0; float: left; } */

/*.preload { visibility: hidden; width: 0px; height: 0px;}*/
.footerblurbs { position: absolute; top: 175px; left: 0px; width: 100%; text-align: center; padding: 0; margin: 0; }
/* border: 1px solid #335577; border: 1px solid #339955; */
/* table.footerblurbs td { vertical-align: middle; } */
#sitemeterbox { position: relative; top: 3px; } /* moves it 5px down from where it would normally be */

.floatleft { float: left; margin-right: 10px; margin-bottom: 5px; }
.floatright { float: right; margin-left: 10px; margin-bottom: 5px; }