/* 
Project: Toxic Shock Syndrome
Filename: screen.css
Date: May 07
*/



/* ---------------- global styles ---------------- */


body {
    margin: 0;
    padding: 0;
    font-size: 0.75em;
    text-align: center;
    color: #333333;
    font-family: arial, verdana, sans-serif;
    }


body a img {
    border: none;
}


h1 {
   font-size: 1.7em;
   margin: 0;
   padding: 0;
}


h2 {
   font-size: 1.2em;
   margin: 0;
   padding: 0;
}

h3 {
   font-size: 1.1em;
   margin: 0;
   padding-top: 15px;
}


p {
   font-size: 1em;
   margin: 0;
   padding: 0;
}

.disguise {
	position: absolute;
	left: -10000px;
	}


/* ---------------- global classes ---------------- */


.bold{
   font-weight: bold;
}



/* ---------------- wrap ---------------- */


#wrap {
	text-align: left;
	margin: 0px auto;
	padding: 0px;
	width: 790px;
}

#wrap .gutter{
	margin: 20px 20px 10px 20px;
	}



/* ---------------- header ---------------- */


#header{
	float: left;
	width: 750px;
}


#header.home{
	background: url(images/header_bkg.jpg) no-repeat left top;
	height: 159px;
}

#header.content{
	height: 111px;
}
	


#header.home h1{
	background: url(images/tss_logo.gif) no-repeat left top;
	width: 259px;
	height: 71px;
	text-indent: -9999px;
}


#header.content h1{
	background: url(images/tss_logo_other.gif) no-repeat left top;
	width: 270px;
	height: 82px;
	text-indent: -9999px;
}



/* ---------------- nav ---------------- */


#nav{
	float: left;
	width: 750px;
	background: #3A7135;
	border-bottom: 20px solid #fff;
	font-size: 90%;
}


#nav ul{
	float: left;
	margin: 0;
	padding: 0;
	list-style: none;
}

#nav li{
	float: left;	
	border-right: 1px solid #fff;
}

#nav li a{
	display: block;
	background: #3A7135 url(images/arrow_off.gif) no-repeat right;
	padding: 7px 15px 7px 7px;
	margin: 0;
	color: #fff;
	text-decoration: none;
}


#nav li a:hover,
#nav ul .here a{
	background: #A2C59E url(images/arrow_on.gif) no-repeat right;
}



#nav form{
	float: left;
	margin: 2px 0 0 10px;
        width: 175px;
	padding: 0 0 0 0;
}

#nav form label{
	color: #fff;
	vertical-align: middle;

}

#nav form .field{
	width: 80px;
	height: 12px;
}




/* ---------------- content ---------------- */


#content{
	float: left;
	width: 750px;
}
	
#contentleft{
	float: left;
	width: 559px;
	background: url(images/fade_bkg.jpg) repeat-x top left;
	margin-bottom: 20px;
	font-size: 90%;
}


#contentleft2{
	float: left;
	width: 559px;
	background: url(images/fade_bkg2.jpg) no-repeat top left;
	margin-bottom: 20px;
	font-size: 90%;
}

#contentleft3{
	float: left;
	width: 750px;
	background: url(images/fade_bkg3.jpg) no-repeat top left;
	margin-bottom: 20px;
	font-size: 90%;
}


#contentleft .largeblock{
	font-size: 110%;
	border-bottom: 10px solid #fff;
	padding: 20px 10px 0px 10px;
}


#contentleft .largeblock p{
	padding-bottom: 15px;
}



#leftblocks{
	float: left;
	width: 275px;
	border-right: 10px solid #fff;
}	


#leftblocks p,
#rightblocks p{
	padding: 0 10px 10px 10px;
}


#leftblocks h2,
#rightblocks h2{
	padding: 10px 10px 0px 10px;
}



#leftblocks .smallblockleft{
	
        height: 80px;
	border-bottom: 10px solid #fff;
}


.smallblockleft a,
.smallblockright a{	
	font-weight: bold;
	color: #333333;
	text-decoration: none;
	padding-right: 10px;
        background: url(images/arrow_leftbar.gif) no-repeat right;
}
/*
#contentleft .smallblockleft a span,
#contentleft .smallblockright a span{
	width: 18px;
	height: 9px;
	padding-right: 8px;
	text-indent: -9999px;
	background: url(images/arrow_leftbar.gif) no-repeat right;
}
*/


#contentleft .smallblockleft a:hover,
#contentleft .smallblockright a:hover{
	text-decoration: underline;
}


#rightblocks{
	float: right;
	width: 274px;
}

#rightblocks .smallblockright{
	height: 80px;
	border-bottom: 10px solid #fff;
}




/* ---------------- subnav ---------------- */

#subnav{
	float: left;
	width: 126px;
	margin: 0;
	padding: 0;
	list-style: none;
}


#subnav li{
	display: inline;
	margin: 0;
	padding: 0;
}


#subnav li a{
	display: block;
	padding: 3px 10px;
	margin: 0;
	border-bottom: 1px solid #fff;
	color: #333333;
	text-decoration: none;
}






#subnav li a:hover
{
	background: #88B084 url(images/arrow_leftbar.gif) no-repeat 107px 6px;
	color: #fff;
	font-weight: normal;
}

#subnav .here a{
	background: #88B084 url(images/arrow_leftbar.gif) no-repeat 107px 6px;
	color: #fff;
	font-weight: normal;
}


#subnav li a span{
	width: 9px;
	height: 9px;
	padding-right: 4px;
	text-indent: -9999px;
	background: url(images/audio.gif) no-repeat right;
}



/* ---------------- maincontent ---------------- */
#maincontent{
	float: right;
	width: 419px;
}


#maincontent2 {
        float: right;
	width: 610px;    
}

#maincontent .gutter, #maincontent2 .gutter{
	border: 20px;
}


#maincontent p, #maincontent2 p, #maincontent p.next{
	padding-top: 15px;
}

#maincontent p.next {
        text-align: right;
        padding-right: 10px;
        padding-bottom: 15px;
        background: url(images/arrow_leftbar.gif) no-repeat right center;
        }

#maincontent p.back {
        padding-left: 10px;
        padding-bottom: 15px;
        background: url(images/arrow_rightbar.gif) no-repeat left center;
        }

#maincontent p a, #maincontent2 p a, #maincontent p.next a, #maincontent p.back a {
        color: #000;
        text-decoration: underline;
        font-weight: bold;
        }

#maincontent ul li a, #maincontent2 ul li a {
        color: #000;
        text-decoration: underline;
        }

#maincontent p a:hover, #maincontent2 p a:hover, #maincontent p.next a:hover, #maincontent p.back a:hover {
        text-decoration: none;
        font-weight: bold;
        }

#maincontent ul li a:hover, #maincontent2 ul li a:hover {
        text-decoration: none;
        } 

#maincontent .controls{
	padding-top: 45px;
	color: #999999;
} 


#maincontent .controls a{
	color: #333333;
	text-decoration: none;
}

#maincontent .controls a:hover{
	text-decoration: underline;
}


#maincontent ul, #maincontent2 ul, #maincontent ol {
        padding: 0 0 0 15px;
        margin: 8px 0 0 15px;
       		      
}

#maincontent ul li, #maincontent2 ul li {
        padding-top: 4px;
        padding-left: 5px;
        list-style-type: square; 
        font-weight: normal;       

}

#maincontent ol li, #maincontent2 ol li {
        padding-top: 4px;
        padding-left: 0;
        list-style-type: none; 
        font-weight: normal;       

}

#maincontent img.imgPosLeft, 
#maincontent2 img.imgPosLeft {
	padding: 0 8px 4px 0 !important;
	}
	
#maincontent img.imgPosRight,
#maincontent2 img.imgPosRight {
	padding: 0 0 4px 8px !important;
	}


.tablebg {
         margin-top: 10px;
         background-color: #d4ded5;
         padding-bottom: 15px;
         border: 1px solid #bebdc1;
         
}
 
.tablebg ul {
        padding: 0 25px 0 25px !important;
        margin: 8px 0 0 10px !important;
       		      
}

.tablebg p {
       padding: 15px 0 0 10px;
    }   

/* ---------------- contentright ---------------- */

#contentright{
	float: right;
	width: 177px;
	margin-bottom: 40px;
}

#contentright3{
	float: right;
	width: 177px;
	margin-bottom: 40px;
}

#contentright2{
	float: right;
	width: 177px;
	height: 351px;
	margin-bottom: 40px;
}



#contentright p, #contentright3 p {
	margin-bottom: 15px;
}

#contentright2 p{
	margin-bottom: 15px;
        font-size: 80%;
 
}

#contentright img, #contentright2 img, #contentright3 img {
        padding-bottom: 15px;
}


#contentright2 a{
        display: block;
	background: #d4ded5 url(images/audio.gif) no-repeat 112px 23px;
	padding: 7px 0 7px 7px;
	margin: 0;
	color: #000;
	text-decoration: none;
        width: 170px;
        font-size: 1.2em !important;
}

#contentright2 a:hover {
       background: #88B084 url(images/audio.gif) no-repeat 112px 23px; 
       }

#contentright a, #contentright3 a { 
       color: #333;
       font-weight: bold;
}

#contentright a:hover, #contentright3 a:hover {
       text-decoration: none;
}

#contentright2 a span{
	width: 18px;
	height: 9px;
	padding-right: 8px;
	text-indent: -9999px;
	background: url(images/arrow_leftbar.gif) no-repeat right;
}


/* ---------------- footer ---------------- */


#footer{
	float: left;
	width: 750px;
	margin: 0;
	padding: 0 0 10px 0;
	list-style: none;
	font-size: 90%;
	color: #666666;
}


#footer li{
	float: left;
}


#footer li a{
	color: #666666;
	text-decoration: none;
	margin: 0 10px;
}


#footer .first a{
	margin: 0 10px 0 0;
}


#footer li a:hover{
	text-decoration: underline;
}

/* ---------------- search ---------------- */

 div.resultsControls {
  	padding: 9px 0 6px 0;
  	margin-bottom: 6px;
  	font-weight: bold;
 	}
 
 div.resultsControls p {
      font-size: 1em;
      font-weight: bold;
      }
      
 div.resultsControls p.pagination a { 
      font-size: 1em !important;
      }
 
 p.pagination {
 	float: right;
 	display: inline;
 	padding-bottom: 3px;
 	
 	}
 
 p.pagination .greyedOut {
 	color: #ccc;
 	}

 .searchResult {
        margin: 0;
 	padding-bottom: 15px !important;
 	}
	
 .searchResult h3 {
 	margin-left: 0px !important;
 	margin-right: 0px !important;
 	margin-bottom: 0px !important;
 	padding-bottom: 0px;
 	padding-top: 0px;
 	font-size: 1.0em;
 	
 }
 
 .searchResult p {
 	vertical-align: top !important;;
 	font-size: 1em;
 	
 	
 	}
 	
 p.highlight {
      font-size: 1.0em;
      font-weight: bold;
      margin-top: 10px;
 	}
 	
 p.highlight span.divider {
        color: #000;
        font-weight: normal;
        }
 	
 p.highlight a {
 	font-size: 100% !important;
 	color: #a0a0a0;
 	}
 	
 p.highlight a.activeNext {
 	font-size: 100% ;
 	text-decoration: none !important;
     color: #000 ;
     font-weight: bold !important;
 	}	
 	
 p.highlight a.activePrevious {
 	font-size: 100% ;
 	text-decoration: none !important;
     color: #000 ;
     font-weight: bold !important;
 	}	
 	
 p.highlight  a:hover {
        color: #e85a5b !important;
        }
 	
 p.highlight .greyedOutNext {
 	color: #a0a0a0;
 	}
 	
 p.highlight .greyedOutPrevious {
 	color: #a0a0a0;
 	}
 	
 
 .searchResult h3 a {
        font-size: 1.0em;
 	font-weight: bold;
 	color: #000;
 	text-decoration: underline;
 	margin-left: 0px !important;
	 	margin-right: 0px !important;
	 	margin-bottom: 0px !important;
	 	padding-bottom: 0px !important;
	 	padding-top: 0px !important;
 	        background: url(images/arrow_leftbar.gif) no-repeat right center;
 	        padding-right: 12px;
 	}
 
  .searchResult h3 a:hover {
        color: #e85a5b;
        }


/* ---------------- form ---------------- */
	
        #maincontent2 label{
	float: left;
	width: 120px;
	font-weight: bold;
	}
	

	
#maincontent2 input, textarea{
	width: auto;
	margin-bottom: 5px;
	}
	
	textarea{
	width: 250px;
	height: 150px;
	}
	
	.boxes{
	width: 1em;
	}
	
	
#submitbutton{
	margin-left: 120px;
	margin-top: 5px;
	width: 90px;
}

/* ----------------- scroller ---------------- */

#scrlContainer { 
    float: left;
	width: 559px;
	visibility:hidden;
	background: #cfdbcf;
	position:relative;
	overflow:hidden;
	height: 30px;
	margin-bottom: 10px; 
	}
	


#scrlContent{
	position:absolute;
	left:0;
	top:0;
	padding-top: 6px;
	white-space:nowrap;
	font-size: 1.2em;
	font-weight: bold;
	color: #006240;
}

#messageContent {
color:#3A7135;
font-weight:bold;
margin:0;
padding:0;
}

.video {
    margin: 20px;
	}