/* may start with a bunch of separate selectors then consolidate later */

body  {
	margin-left: 1em;
	margin-right: 1em;
	margin-bottom: 1em;
	margin-top: 1em;
	border-width: 0px; /* we want most everything about 80% of normal size. Be careful with font-size inheritance  */
	font-size: .8em;
	font-family: Verdana, sans-serif;
	color: #FFFF99;
	background-color: black; 
	background-image: url("/graphics/background.jpg");
}

/* use the mainbody div to surround everything in the body */ 
#mainbody	{
	/* nothing different yet */	
}

table, td  {
	font-family : Verdana, sans-serif;
	font-size: 1em; /* "inherit" doesn't work. leaving this out doesn't work */
}

th	{
	background: Aqua none;
	color: #660000;
}

td {
	padding-left: 1em;
	padding-right: 1em;
}

td.song-ref	{
	padding-left: 0;
	padding-right: 0;
	font-size : .8em;	
} 

li	{
	margin-bottom: 2ex;
}

img {
	border-width: 0px;
}

pre	{
	font-family: Verdana, sans-serif;
	font-size: 1em;
}

a.inline	{
	padding-right: 1em;
}

a:link	{
color : lime;
}

a:visited	{
color : white;
}

a:active	{
color : #ccffff;
}

/* Various headers 
TopHead - for Logo and Logo text
PageTitle - for Page Title
SmallHead - for various section headings
LeftHead - for various section Headings
*/
.TopHead, .PageTitle, .SmallHead, .LeftHead, .SmallHead2 {
	color : aqua;
	font-family : Times New Roman, Verdana, sans-serif;
	width : 100%;
}
.TopHead, .PageTitle, .SmallHead, .SmallHead2	{
	text-align: center;
}
.TopHead	{
	font-size: 3em; /* careful with nesting */
}
.PageTitle	{
	font-size: 2em; /* careful with nesting */
	padding-bottom: .5ex;
}
.SmallHead, .LeftHead, .SmallHead2	{
	font-size : 1.4em; /* careful with nesting */
}
.LeftHead	{
	text-align : left;
}
.SmallHead, .SmallHead2	{
   clear: both;
	border: 2px solid #ccccff;
	margin-top: 1ex;
	background-color: #cccccc;
	color: #003333;
	padding-bottom: .5ex;
	padding-top: .5ex;
}

.SmallHead2	{
  color: Red;
}

.SampleSubHead	{
	color: aqua;
	padding-bottom: 5px;
}

p.FlashWarning	{
	font-size: 0.85em;
	color: Red;
	background-color: Silver;
	margin-top: 0px;
	margin-bottom: 0px;
}

p.SampleApology	{
	font-size: 0.85em;
}

td.SampleCell	{
	width: 50%;
	vertical-align: top;
}

a.LeftColumn:LINK  {
	color : #FFFFFF;
}

a.LeftColumn:VISITED  {
	color : #FFFFC4;
}

a.LeftColumn.ACTIVE  {
	color : #FFFF00;
}


.LeftColumn  {
	background-color : #700070;
}

a.LeftColumn:LINK  {
	color : #FFFFFF;
}

a.LeftColumn:VISITED  {
	color : #FFFFC4;
}

a.LeftColumn.ACTIVE  {
	color : #FFFF00;
}

.RightColumn  {
	font-size : .75em;
	background-color : #FFFFF9;
}

/* Headers */
hr, h1, h2, h3, h4  {
	color : aqua;
}
h1, h2, h3, h4  {
	font-family : Times New Roman, Verdana, sans-serif;
	text-align : center;
}
hr  {
	/* margin-top: 2ex; */
}

.indent  {
	/*	text-indent : 20px; */
	margin-left: 1em;
}

.pad50  {
	margin-right : 50px;
}

.pstart  {
	font-size : medium;
	color : #700070;
}

.std-links	{
	text-align: right;
	width: 100%;
}

.toc-links	{
	text-align : center;
	width : 100%;
}

td.vbar	{
	background-color: Aqua;
	background-image: none;
	padding-left: 2px;
	padding-right: 0px;
}

/* slightly more annoying text for "not-to-be-missed" instructions */
.instructions	{
	text-align: center; 
	color:#ffcc99; 
	font-size: 1.5em
}

#nojs	{
	color: #ffcc99;
}

#refineForm, #refineButton, #listswap, #currentplaylist	{
	display: none; 
}

#refineForm	{
	background-color: Teal;
	background-image: none;
	border-color: Aqua;
	border-width: 2px;
	border-style: solid;
}

#currentFilter	{
	background: Teal;
}

.filterparams	{
	color: White;
}

ul.kwAvailList, ul.kwSelectedList	{
	margin: 0;
	padding: 0;
}


ul.kwAvailList	{
	height : 15em;
}

#keyword-search {
	margin-right : 1em;
}

ul.kwAvailList li {
  background: white;
  color: black;
  cursor: pointer;
/*   display: none; */
/*  font-size: 11px; */
/*  line-height: 1em; */
  list-style: none;
  margin: 0;
  padding: 1px 0.5em;
/*  width: 276px; */
}

ul.kwSelectedList li {
  background: aqua;
  color: black;
  cursor: pointer;
  list-style: none;
  margin: 0;
  padding: 1px 0.5em;
}

.tightlist {
/*	border: thin solid Fuchsia; */
	color: Aqua;
	font-size: 0.85em;
	margin-top: 0;
	margin-left: 1em;
}

div.tightlist ul, div.tightlist li	{
/*	border: thin solid Lime; */
	margin: 0 0 0 0;
}

table.calendar	{
	width: 100%;
	
}

/*
table.calendar td	{
	background-color: White;
	background-image: none;
	width: 14.3%;
	height: 10ex;
	color: Black; 
	text-align: left;
	vertical-align: top;
	padding-left: 0.2em;
	padding-right: 0.2em;
}
*/

td.sq-noday, td.sq-day, td.sq-event	{
	background-image: none;
	width: 14.3%;
	height: 11ex;
	color: Black; 
	text-align: left;
	vertical-align: top;
	padding-left: 0.2em;
	padding-right: 0.2em;
}

td.sq-noday	{
	background-color: #cccccc;
}

td.sq-day	{
	background-color: White;
}

td.sq-event	{
	background-color: Aqua;
}

.event	{
	padding-top: .8ex;
	font-size: .8em;
}

span.tentative	{
	color: Red;
}

a.eventlink	{
	color: Red;
}
a.eventlink:link	{
	color: Blue;
}
a.eventlink:visited	{
	color: Purple;
}
a.eventlink:hover	{
	color: Black;
	background-color: #cccccc;
	text-decoration: none;
}
a.eventlink:active	{
	color: Blue;	
}

a.calnav	{
	color: Red;
}
a.calnav:link	{
	color: Blue;
}
a.calnav:visited	{
	color: Purple;
}
a.calnav:hover	{
	color: Black;
	background-color: Aqua;
	text-decoration: none;
}
a.calnav:active	{
	color: Blue;	
}

tr.cal-header	{
	background-color: #cccccc;
	color: Black;
}

tr.cal-header td	{
	text-align : center;
}

div.event-block	{
	background-color: White;
	background-image: none;
	text-align: center;
	color: Black;
	width: 60%;
	margin: 0px auto 0px auto;
}

div.event-minor-header	{
	font-size: 1.4em;
	color: #3300ff;
	margin-bottom: 1ex;
	margin-top: 1ex;
}

div.center	{
	text-align: center;
}

table.rating	{
	font-size: .7em;
	white-space: nowrap;
	margin: 0;
	padding: 0;
}

table.rating tr td {
	border: 0px;
	margin: 0px;
	padding: 0px;
}

td.rating-label	{
	width: 8em;
	height: .7ex;
}

div.dot-red, div.dot-yellow, div.dot-green	{
	line-height: .1ex;
	height: 0.8ex;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
}

div.dot-red	{
	background-color: Red;
}

div.dot-yellow	{
	background-color: Yellow;
}

div.dot-green	{
	background-color: Lime;
}

tr.res-item	{
	height: 5ex;
	vertical-align: top;
}
tr.res-subhead	{
	font-size: 1.2em;
	color: Aqua;
	height: 5ex;
	text-align: center;
	vertical-align: top;
}

div.jukebox	{
	width: 350px;
	background-color: #000033;
	background-image: none;
	border-color: Aqua;
	border-width: 1px;
	border-style: solid;
}

div.singlesongplayer	{
	width: 350px;
	color: Black;
	background-color: #ddddff;
	background-image: none;
	border-color: Silver;
	border-width: 1px;
	border-style: solid;
}

div.vid480box	{
	width: 480px;
	background-color: #000033;
	background-image: none;
	border-color: Aqua;
	border-width: 1px;
	border-style: solid;
}

div.vid640box	{
	width: 640px;
	background-color: #000033;
	background-image: none;
	border-color: Aqua;
	border-width: 1px;
	border-style: solid;
}

div.vid720box	{
	width: 720px;
	background-color: #000033;
	background-image: none;
	border-color: Aqua;
	border-width: 1px;
	border-style: solid;
}

td.videocell      {
    vertical-align: top;              
}


div.nowplaying	{
	/* background-color: #660099; */
	padding-left: 5px;
	padding-right: 5px;
}

.jb_header	 {
	color: Aqua;
	margin-top: 5px;
	margin-bottom: 2px;
}

div.thumbframe	{
	float: left;
	width: 160px;
	padding-top: 10px;
	padding-right: 10px; 
}

div.thumbframe p 	{
	margin: 0 0 0 0;
	text-align: left;
	width: 160px;
	height: 10ex;
	border-left: 1px solid #66ffff; 
	border-bottom: 1px solid #66ffff; 
	padding-left: 5px; 
/*	border: thin solid Red; */
}


div.thumb	{
	position: relative;
	width: 160px;
	height: 150px; 
	padding-left: 5px; 
	border-left: 1px solid #66ffff; 
	/*	border: thin solid Yellow; */
}

div.thumb a	{
	position: absolute;
	bottom: 0;
/*	border: thin solid Lime; */
}

table.cdthumbs td	{
	padding-right: 50px;
}

table.actresheader td	{
	padding-left: 0px;
/*	border: thin solid Lime; */
}

ol.samplelist {
	list-style-type: decimal;
}

ol.samplelist span {
	color: Fuchsia;
}

div.maintag	{
	/* border: thin solid white; */
	position: relative;
}

div.mainphoto	{
   /*	border: thin solid lime; */
	margin-left: 10px;
	position: relative;
	float: left;
	width: 120px; 
}

div.mainblurb	{
	/* border: thin solid yellow; */
	position: relative;
}

div.mainblurb h2	{
	/* border: thin solid aqua; */
   text-align: center;
	color: #FF0099;
	margin-top: 0;
	margin-bottom: 0.5em;
	margin-left: 120px;
	margin-right: 20px;
	font-size: 2em;
}

div.mainexplain	{
	/* border: thin solid red; */
	position: relative;
}

div.mainexplain p	{
	/* border: thin solid silver; */
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 140px;
	position: relative;
}

.cdbaby-button-container, .cdbaby-button-container-mp3     {
    position: relative; 
    float:left; 
    width: 122px; 
    height: 181px; 
    margin-left: 1em; 
	 margin-right: 1em;
    padding: 0; 
    border: 0; 
    background-image: url(http://cdbaby.com/gif/buttons/buy_thumb/Black-Buy_CD_100px_cover.gif);
}

.cdbaby-button-container	{
    background-image: url(http://cdbaby.com/gif/buttons/buy_thumb/Black-Buy_CD_100px_cover.gif);
}

.cdbaby-button-container-mp3	{
    background-image: url(http://cdbaby.com/gif/buttons/buy_thumb/Black-Buy_CDmp3_100px_cover.gif);
}

.cdbaby-button-container a, .cdbaby-button-container-mp3 a	{
  display: block; padding: 44px 11px 35px; margin: 0; border: 0;	
}

.cdbaby-button-container img, .cdbaby-button-container-mp3 img	{
  border: 0; margin: 0; padding: 0;
}

.songlist {
   margin-top: 1ex;
	margin-left: 1em;
}

.songrow	{
	clear: both;
}

.songname {
/*	border: thin solid silver; */
	margin-top: 0.5ex;
	float: left;	
	width: 20em;
}

.songcredit {
	/*	border: thin solid aqua; */
   color: Aqua;
	font-size: smaller;
	float: left;
}

.cd-photo	{
	position: relative;
	float: left;
	margin-left: 1em;
	margin-right: 1em;
}

div.hspacer	{
	clear: both;
	margin-bottom: 1ex;
}

div.faqdef dt, a, a:visited	{
	color: Aqua;
	text-decoration: none;
}

div.faqdef span	{
	cursor:pointer; 
}

div.faqdef dd	{
	display: none; 
}

/* making the inline image placement work with CSS was a 
   dirty stinking m****F****. Tweak this carefully, if at all. */
.awardframe {
	display: block;
	text-align: center;
/*	border: thin solid Yellow; */
}
.awardtext {
	display: inline-block;
	text-align: center;
	height: 30px;
	vertical-align: -5px;
	color: #CCCC99;
/*	border: thin solid Green; */
}

.laurel-left, .laurel-right	{
	display: inline-block;
	width: 20px;
   height: 30px; 
/*   border: thin solid Aqua; */
}
.laurel-left	{
	background: url(/graphics/laurel-l30.png) right bottom no-repeat;
}
.laurel-right	{
	background: url(/graphics/laurel-r30.png) left bottom no-repeat;
}