/* Per CodingForums... It is often helpful to start the CSS with this code. It resets these to a standard zero as a stable starting point for the CSS. "*" (asterisk) is the universal selector.*/


/*
CONTAINER WIDTH SET AT:

   830px 
   + 2px left and right border width
   ----- 
   = 832px TOTAL WIDTH

*/
 
* {
		margin: 0;
		padding: 0;
		border: none;
}

body {
	margin: 0px;
	padding-top: 2px;
	font-family:  Georgia,Verdana, Arial, Sans-Serif;		
	font-size:  small;
/* background color only applies to the width of 755 (not the whole browser width) IF this is used in a div container id. If used in BODY like this, it will be used for the width of the ENTIRE BROWSER. */
	background-color: #ffffff;
	margin-left: auto;
	margin-right: auto;
	background-image:url(/images/back_gradient.jpg);
	background-repeat:repeat-x;
}

#container {
/*		background-image: url(images/backgd3_751px.gif);
	background-repeat: repeat-y;*/
	padding: 0px;
	width: 830px;
/* FIX #1:
added these lines per site http://www.ryanfait.com/sticky-footer/ article. the fix prevented my issue where the float and main were going about 10px below the footer in Firefox.*/	   
	margin: 0 auto -6px;
	min-height: 100%;
	height: 100%;
	border:1px solid #9b9b9b;
}

#atop {
	margin: 0px;
	padding: 0px;
	height: 220px;
		/* IE 6 bug where it puts the bottom margin several pixels under the actual
div height. Firefox worked ok, but had to - the margin bottom to make
the sidebar line up against the heading. Weird... */
	margin-bottom: 0px;
	border:3px solid #e1dfe1;
	border-bottom:4px solid #e1dfe1;
	background-color:#40b590;
	background-image:url(/images/topgrad18.jpg);	
	background-repeat:repeat-x;
}

/* IE hack: this override is needed so that the image in the atop id, pushes up against the container. otherwise, there will be a sliver of space. Firefox is ok w/out -"Code for Firefox. Hack with IE.*/
#atop img {
	display: block;
}

/******************************************
 TOP NAV
*******************************************/
#top_nav {
	padding-left:2px;
	float:left;
	width:828px;
	background:#3f3d3b url(/images/tabbg_underline.gif) repeat-x bottom left;
	background:transparent url(/images/tabbg_underline.gif) repeat-x bottom left;
	background:#fff url(/images/tabbg_underline_green.gif) repeat-x bottom left;	
}
	
#top_nav li {
	float:left;
	list-style-type:none;
	margin:0px 1px 0 0;
	font-weight:bold;
	border-top:1px solid #777677;
	border-right:1px solid #777677;
	border-left:1px solid #777677;	
	}
	
#top_nav li.current {
/*	border-top:1px solid #873284;
	border-right:1px solid #873284;
	border-left:1px solid #873284;*/	
	}	
	
#top_nav li a {
	display: block;
	padding:7px 32px; 
	color:#848384;
	text-decoration:none;
	background:#fff url(/images/tabbg_on_grey1.gif) repeat-x top left;	
	}
	
#top_nav li a:hover {
	color:#207a00;
	color:#873284; 
	background:#fff url(/images/tabbg_on_green2.gif) repeat-x top left;
	background:#fff url(/images/tabbg_on_grey1.gif) repeat-x top left;	
	text-decoration:none;
 	}
	
#top_nav li a.current { 
	color:#207a00; 
	background:#fff url(/images/tabbg_on_green2.gif) repeat-x top left;
	padding-bottom:8px;	
	}


#navigation li a.current:visited {
	text-decoration:none;
}

#navigation li a.current:hover {
	text-decoration:none;
	background-color:transparent;
	color:#ffffff;
	padding-right:10px;
}

#main {
/* if you use margin-left on the float right, it pushes the left sidebar down!*/
/* FIREFOX bug required me to use the background-color property. Guess it didn't like my shortcut */
	padding: 7px 0 8px 8px;
	margin: 0px;
	font-size:110%;
	background-color:#fff;
	clear:both;
	width:822px;
	font-family: Arial, Sans-Serif;	
}

#main #main-left{
	margin:0px;
	padding:0px 25px 10px 20px;
	background-color:#eff8e4;
	border:1px solid #8ab787;
	width:485px;
	font-size:90%;
}

/******************************************
SET NEW NEWS STYLES WITH BOX
*******************************************/
#main #main-left .newsbox {
	margin:10px 0 15px 0px;
}

#main #main-left .newsbox_date {
	width: 500px;
	padding:0px;
	margin:0px;
	border-bottom:1px solid #ccc;
}

#main #main-left .newsbox_date p{
	font-family: Arial, Sans-Serif;	
	font-size: 140%;
	color:#5a1878;
	padding:11px 0px 5px 5px;
}	
	
#main #main-left .newsbox_content {
	width:500px;
	padding:0px;
	margin:0px;
}

#main #main-left .newsbox_content p{
	padding:10px 0px 20px 5px;
	margin:0px;
}

#main #main-left .newsbox_content a.button:hover{
	text-decoration:none;
	background-color:transparent;
	
}

#main #main-left .header{
	font-family: Arial, Sans-Serif;	
	font-size: 140%;
	color:#5a1878;
	padding:0px 0px 5px 5px;
	border-bottom:1px solid #ccc;
	margin:21px 0 10px 0px;
}	

#main #main-left li{
	padding:0px 0px 5px 7px;
	margin:0px;
	list-style:none;
}

#main #main-left p {
	margin:0px;
	padding:0px 0px 10px 5px;
	line-height:140%;
}

#main #main-left #faq-list {
	margin-left: 7px;
	margin-right: 20px;
}

#main #main-left #faq-list li {
	padding: 0px 0px 15px 0px;
	list-style:none;
	line-height:140%;	
	}

#main #main-left #bigcdimg {
	width:455px;
	padding:0px 10px 15px 10px;
	float:left;
	margin:21px 0px 5px 6px;
	display:inline;
	background:#fff url(/images/tabbg_on_grey1.gif) repeat-x top left;
	border:1px solid #9b9b9b;
}

#main #main-left #bigcdimg ul {
	list-style-type:none;
	margin-left:37px;
}

#main #main-left #bigcdimg li {
	float:left;
	padding:0px;
}

#main #main-left #bigcdimg a {
	width:90px;
	height:91px;
	display:block;
	border:2px solid #c8c6c6;
	margin-right:40px;
}

#main #main-left #bigcdimg a:active{outline:none;}
#main #main-left #bigcdimg a:focus{-moz-outline-style: none;}

#main #main-left #bigcdimg a#gid {
	background: #fff url('/images/gid_small.gif') 50% 50% no-repeat;
	padding:2px;	
}

#main #main-left #bigcdimg a#gid.active {
	border:2px solid #fe9c02;	
}

#main #main-left #bigcdimg a#amoeba {
	background: #fff url('/images/dta_small2.gif') 50% 50% no-repeat;	
	padding:2px;
}

#main #main-left #bigcdimg a#amoeba.active {
	border:2px solid #fe9c02;	
}

#main #main-left #bigcdimg a#costumes {
	background: #fff url('/images/hc_small.gif') 50% 50% no-repeat;	
	padding:2px;
}

#main #main-left #bigcdimg a#costumes.active {
	border:2px solid #fe9c02;
}

#main #main-right{
	position:relative;
	margin:0 7px 0 0px;
	padding-bottom:5px;
	background-color:#ecebeb;
	border:1px solid #9b9b9b;
	width:273px;
	float:right;
	}
	
#main #main-right p{
	padding:5px;
	}	

#main #main-right #tabs{
	float:left;
	width:263px;
	font-size:90%;
	background:transparent url(/images/tabbg_underline.gif) repeat-x bottom left;
	margin:5px 0px 0px 5px;
	padding:0px;
	list-style:none;
}

#main #main-right #tabs li{
	float:left;	
	margin:0px 2px 0 0;
	padding:0px;	
}

#main #main-right #tabs li a{
	display:block;
	background-color:#b8741d;	
	padding:4px 4px 3px 4px;	
	text-decoration:none;
	border:1px solid #bababa;
	border-bottom:none;
	color:#fff;
}

/* only needed for firefox. */
#main #main-right #tabs li a:active{outline:none;}
#main #main-right #tabs li a:focus{-moz-outline-style: none;}

#main #main-right #tabs li a:hover{
	background-color:#f99c24;
	color:#fff;
}

/*
IMPORTANT: There MUST in the html file, be an LI with the id of CURRENT.
*/
#main #main-right #tabs li a.current_tab {
	background-color:#f99c24;	
	padding-bottom:4px;
	display:block;
	border:1px solid #bababa;
	border-bottom:none;
	color:#fff;	
}

#main #main-right #tabbody {
	background-color:#fff;	
	border:1px solid #b8741d;
	border-top:4px solid #f99c24;
	margin:0px 5px 0px 5px;
	padding-top:0px;
	clear:both;
	font-family:Arial, Helvetica, sans-serif;
	font-size:80%;
}

#main #main-right #tabbody table{
	width:100%;
}

#main #main-right #tabbody p{
	margin:5px;
	line-height:1.3em;
}

#main #main-right #tabbody table tr{
	background:#fFF url(/images/note_small3.gif) no-repeat 2px 7px;	
}

#main #main-right #tabbody table tr.alt{
	background:#fdf1de url(/images/note_small3.gif) no-repeat 2px 7px;
}

#main #main-right #tabbody table tr.noicon{
	background-color:#fFF;
	background-image:none;
}

#main #main-right #tabbody table tr.noicon td{
	padding:10px 3px 10px 5px;
}

#main #main-right #tabbody table tr.alt_noicon td{
	padding:10px 3px 10px 5px;
}

#main #main-right #tabbody table tr.alt_noicon{
	background-color:#fdf1de;
		background-image:none;
}

#main #main-right #tabbody table td{
	padding:10px 0 10px 17px;
}
	
/* for SCORING page dvd cover image*/
#main #imgleft {
	float: left;
	width:170px;
	margin:0px;
	border-color: black;
	border-width: 1px;
	border-style:ridge;
}

/* link style for body links */
#main a	{ 
	color:#26590b;
	padding:0px;
	text-decoration:underline;
/*	border-bottom:1px dotted #26590b;*/
}

#main a:hover	{ 	
	text-decoration:none;
	color:#ffffff;
	background-color:#000000;
}

#main #joeplot {
	margin-left:175px;
	margin-right:15px;
	padding:10px;
	background: #E2EDDC;
	font-style:italic;
	/*needed to add width, otherwise the use of italics pushed the entire main div below the sidenav! */
	width:60%;
}

#main .biotext {
	padding:0px;
	margin: 0px 25px 0px 0px;
}

#main .biotext p{
	margin: 0px 0px 10px 0px;
}

#main #imgpadlft {
	padding:3px;
	margin:3px 13px 0px 5px;
	float:left;
	width:200px;
	border:1px solid black;
	background-color:#fff;	
}

#main #imgpadrt {
	padding:3px;
	margin: 3px 8px 3px 8px;
	float:right;
	width:200px;
	border:1px solid black;
	background-color:#fff;
}


p { 
	margin: 0px;
	padding: 0px;
}
		
#main #paddedtext {
	padding-right: 45px;
	padding-left: 10px;
}				

#main #paddedtext p {
	margin-bottom: 0px;
}	


.thumbs{
	width:120px;
	padding:0 20px 10px 0px;
	float:left;
	text-align:center;
	margin:10px;
	margin-left:20px;
}

.thumbs img{
	border:1px black solid;
}

#userstatus {
	width:100px;
}

#cover {
	width:200px;
	padding:0 12px 5px 0px;
	float:left;
	margin:5px 0px 0px 6px;
}

#cover a{
	background-color:#ffffff;
	width:200px;
	height:200px;
	display:block;
	border:1px solid black;
}

#cover a.purchase{
width:100px;
height:100px;
}

#cover a.biggid{
	background: #fff url('/images/big_album_covers2.jpg') 0 -402px no-repeat;	
}

#cover a.bigamoeba{
	background: #fff url('/images/big_album_covers2.jpg') 0 -1px no-repeat;	
}

#cover a.bigcostumes{
	background: #fff url('/images/big_album_covers2.jpg') 0 -200px no-repeat;	
}

#main #bigcdimg a:hover { 	
	background-color:white;
}

#main #main-left .tracks{
	width:550px;
	padding:0 10px 0px 5px;
	float:left;
	text-align:left;
	margin-top:10px;
	margin-bottom:20px;
}

#main #main-left #trackbox {
/*	background-color: #fff;*/
	width:280px;
	padding:5px;
	float:left;
	font-size:90%;
}

.covertracks {
	margin-left:260px;
}

#main #main-left #buylinks{
	list-style:none;
	padding:0px;
	margin:0px;
	float:left;
	position:relative;
	left:-1px;
}

#main #main-left #buylinks img{
	padding:none;
	border:1px solid green;
}

#main #main-left #buylinks a{
	text-decoration:none;
	background-color:transparent;
}

#main #main-left #trackbox_top {
	background: url(/images/track_gradient_top1.gif) no-repeat top left;
	width: 272px;
	padding:0px;
	line-height:7px;
	height:7px;
	margin:0px;
	clear:both;
}
	
#main #main-left #trackbox_bottom {
	background: url(/images/track_gradient_bottom1.gif) no-repeat bottom left;
	width: 272px;
	padding:0px 0px 10px 0px;
	margin:0px;
}

#main #main-left #trackbox_bottom h1 {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:1.0em;
	padding:4px 8px 0px 15px;
	color:purple;
}

#main #main-left #trackbox_bottom ol {
	margin:0 0 0 10px;
	padding:10px 3px 3px 0px;
	line-height:1.3em;
}


#links_tovisit {
	top:-2px;
	left:-2px;
	position:relative;
	width:375px;
}

#links_tovisit ul{
	padding:8px 0 8px 30px;
	margin:0 0 0 0px;
	background-color:#eeeeed;
	border:1px solid black;	
}

#inline-list {
	margin:0px;
}

#inline-list li {
	padding: 0px 0px 5px 0px;
	list-style:none;
}


#growth {
	margin-left:7px;
	position:relative;
}

#growth p{
	padding:8px 20px 8px 30px;
	margin:0 0 0 0px;
}

#growth img{
	padding:1px;
	border:1px solid black;
	margin-right:7px;
}

#shadow_container {
	width:470px;
	margin:0 0 10px 0px;
	padding:0 0 0 8px;
}

#shadow_container_links {
	width:375px;
	margin:0 0 0 0px;
	padding:0 0 0 8px;
}

#shadow_container_faq {
	width:500px;
	margin:0 0 10px 0px;
	padding:0 0 0 8px;
}

#shadow {
	background-color:#474743;
}

#contact_div {
	top:-2px;
	left:-2px;
	position:relative;
}

#contact_div p{
	padding:26px 25px 32px 45px;
	border:1px solid black;
	background: #eeeeed url(/images/email_14.gif) 5% 50% no-repeat;
}

#faq_div {
	top:-2px;
	left:-2px;
	position:relative;
}

#faq_div ul{
	padding:15px 8px;
}

#copyright {
	text-align:center;
	margin-top:20px;
	padding-bottom:12px;
	color:#d98916
}		
				
#copyright a {
	text-decoration:none;
	color:#d98916;
	padding:2px;
}		
	
#copyright a:hover {
	text-decoration:none;
	background-color:#000000;
	color:#ffffff;
	padding:2px;
}

#footer {
		clear:both;
		/*background-color:#CC6633;*/
/* FIX #1:
added this line per site http://www.ryanfait.com/sticky-footer/ article. the fix prevented my issue where the float and main were going about 10px below the footer. Also see up top*/
		height: 1px; 
}

#w3c a {
	text-decoration:none;
}		
	
#w3c a:hover {
	text-decoration:none;
	background-color:transparent;
}		

#w3c img {
	border:none;
}		

#clrtest {
	height:280px;
}

#clrtest .banner1 {
	background: url(/images/home_page_banners_banners3-hq.jpg) no-repeat 0 0px;
	height:280px;
}

#clrtest .banner2 {
	background: url(/images/home_page_banners_banners3-hq.jpg) no-repeat 0 -280px;
	height:280px;
}

#clrtest .banner3 {
	background: url(/images/home_page_banners_banners3-hq.jpg) no-repeat 0 -560px;
	height:280px;
}

#tophalf {
	height:100px;
	width:100px;
}

#bottomhalf {
	height:50px;
	width:100px;
}

#tophalf a{
	border:1px solid blue;
	height:100px;
	line-height:100px;
	width:50px;
	top:10px;
	display:block;
}

#bottomhalf a{
	border:1px solid blue;
	height:50px;
	line-height:50px;
	width:50px;
	display:block;
}

.bold {font-weight:bold;}