/*
California Cryobank Main Stylesheet
By Will Moore, Petra Gregorova - ISITE Design
Date: December 30, 2009 

* html {anything} addresses IE < 6 only
*+html {anything} addresses IE 7 only
body:nth-of-type(1) {anything} addresses Chrome and Safari 3.1
*/


/*The Big Reset.  */
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt, blockquote, fieldset, legend, label {
    margin: 0; padding: 0; border: 0; list-style:none;
}

h1, h2, h3, h4, h5, h6, p { margin: 0 0 .7em 0; }

h1{font-size: 200%;}
h2{font-size: 170%;}
h3{font-size: 140%; clear:left;}
h4{font-size: 120%;}
h5{font-size: 100%;}
h6{font-size: 90%;}
a{color:#C47660; overflow: hidden; }
#maincontent a {text-transform: none;}
a:hover{color:#CC3333;}

ul.navigationlist{    list-style-type: none;}

#maincontent ul, #maincontent ol {margin:10px 0 10px 1.5em;}
#maincontent ul li {list-style-type: disc; margin: .2em 0 0 0;}
#home #maincontent ul li{list-style-type: none;}

body {
    font: 80%/130% Arial, Helvetica, sans-serif;
}


/*--------------------------------------------------------------------------------*/
/*-----------------------------    Structure    ----------------------------------*/
/*--------------------------------------------------------------------------------*/

#container{
  margin: 0em auto;
	width: 771px;
}

#header{
	height: 93px;
	background: #95b1d4 url(../images/bg_header.gif) 0 0 no-repeat;
	position: relative;
}

#navigation{
    height: 46px;

}
#content{
	float:left;
	}

#maincontent{
    width: 750px;/*533*/
	float: left;
	padding-left: 20px;
	}

#content li{color:#666;}


                    /*
          --=.._/(        Primary Nav       )\_..=--
              	  */


#navigationwrap{
  position: relative;
	top: 0;
	right: 0;
	height:28px;
	z-index: 100;
	}

          /*
--=.._/(        type and general images       )\_..=--
    	  */

#maincontent h1{font-size:140%; margin: 10px 0; font-weight: normal;}
#maincontent h2{font-size:130%; margin: 10px 0;}
#maincontent h6 {clear:both; color:#666; float:left; margin-top:20px;}
#maincontent p{margin-top:15px; color:#666; margin:2px 0 10px 0;clear:left;}
#maincontent p small {line-height:100%;}
#maincontent, #maincontent img {margin-right:0;padding-right:0;}
#maincontent img {float: right; margin-left: 10px; border:1px solid #CCCCCC;}
#maincontent img.no-border {border:0;}

                    /*
          --=.._/(        ITEMS in the HEADER      )\_..=--
              	  */

#logo{ text-indent: -9999em;}/*off screen*/
#logo a { /*logo home link*/
	width: 171px;
	height: 67px;
	display: block;
	position: relative;
	top: -20px;
	left: 27px;
	}
#header h1.shiftleft {
	text-indent: -9999em;
}
#accessibility{ position: absolute;	left: -9999em;}/*off screen*/

/*utility nav in header top right*/
#utmenuwrap{
    position: absolute;
	top: 0;
	right: 0;
	height:28px;
	/*width:414px;*/
}
#header ul {
	float:right;
	height:28px;
}
#header ul li{
	float: left;
}
#header ul li a{
	display: block;
	float: left;
	height:28px;
	background: transparent url(../images/btn_ut_menu.png) 0 0 no-repeat;
	text-indent: -9999em;
}

/** html #header ul li a{	background: transparent url(../images/btn_ut_menu.gif) 2px 0 no-repeat;}*/

#header ul li .login-ut-menu{background-position:0 0; width:245px;}
#header ul li .donors-ut-menu{background-position:-245px 0;width:115px;}
#header ul li .index-ut-menu{background-position:-360px 0;width:53px;}

#header ul li .login-ut-menu:hover{background-position:0 -28px; width:245px;}
#header ul li .logout-ut-menu:hover{background-position:-135px -28px; width:110px;}
#header ul li .donors-ut-menu:hover{background-position:-245px -28px;width:115px;}
#header ul li .index-ut-menu:hover{background-position:-360px -28px;width:53px;}

#header ul li .logout-ut-menu{background-position:-135px 0; width:110px; background-image: url(../images/btn_ut_lo_menu.png);}/* appears conditionally via CF. */
* html #header ul li .logout-ut-menu{background-position:-135px 0; width:110px; background-image: url(../images/btn_ut_lo_menu.gif);}/* appears conditionally via CF. */

#header #contact {/*Have a question?*/
	text-align:center;
	line-height:15px;
	font-weight:bold;
    color: #36526A;
	position: absolute;
	left: 450px;
	top: 40px;
	}
#header #contact a {
    color: #ffffff;
	text-transform: uppercase;
	text-decoration:underline;
	}

a#requestInfoPacket{
	text-indent: -9999em;
	background: url(../images/btn_logintomyaccount.gif) 0 -27px no-repeat;
	display: block;
	width: 138px;
	height: 27px;
	}
a#requestInfoPacket:hover{
    background-position: 0 0;
	}
#header a#requestInfoPacket {
	position: absolute;
	right: 10px;
	bottom: 13px;
	}

            	  
                    /*
          --=.._/(        Footer      )\_..=--
              	  */


#footer{
	clear: left;
	color: #b8b8b8;
	font-size:85%;
	padding-top: 15px;
	position:relative; /*foils IE6 display bug - footer quotes appearing twice*/
	width:771px;
}
#footer a{    color: #666666;}
#footer a:hover{    color: #999999;}

#footer ul#footerlist1, #footer ul#footerlist2{	margin:0  0 5px 0; width: 460px; float: left;}

#footer  li{
	display: inline;
	margin:0  3px 5px 0;
}
#footer p{
	color: #384F62;
	float: right;
	font-weight:bold;
	text-align: right;
  width: 280px;
}
#links ul#standards{
	float:left;
	list-style-type: none;
	overflow:hidden;
	width:40%;
}
#links ul#standards li a, #links ul#widgets li a{
  display: block;
	float: left;
	width: 100px;
	text-indent: -9999em;
}
#links ul#standards li a.aatb{
	background: url(../images/AATBlogo.jpg) no-repeat;
	width:125px;
	height:62px;
}
#links ul#standards li a.fda{
	width: 75px;
	height: 50px;
	background: url(../images/fda_temp.gif) no-repeat 0 14px;
}
#links ul#widgets li a.bbb {
	height:52px;
	width:135px;
}
#links ul#widgets li a img {border:0;}


/*------------------------------------extras-------------------------------------*/
.edit {font-size: .9em;}

.hidden {text-indent:-9999em;}

.subhead{
	margin-top: 20px;
	color:#C47660;
}

.footnote{
	font-size:70%;
	line-height:105%;
	padding:5px;
	margin:0 ;
}
#maincontent div.overflow {
    height: 300px;
	overflow: auto;
	margin: 5px;
}

.infolisting{
  float: left;
	clear: left;
}

.infolisting dt, .infolisting dd{
  float: left;
	width: auto;
	margin: .5em 10px 0 0;
	width: 7.5em;
}
.infolisting dt {
  clear: left;
	font-weight: bold ;
}

/*---------------------------------------Reusables------------------------------*/  /*Some utility/dirty hack styles*/
.clear{clear:both;}
.clearleft{clear:left;}
.clearright{clear:right;}
.left {float: left; margin-right: 5px;}
.right {float: right; margin-left: 5px;}
.hide {display: block; display: none; }
.hide2 { visibility: hidden; }
.accessibility{    position: absolute; left: -9999em; height: 1px; line-height: 1px; margin:0; padding: 0;}
legend.accessibility{    text-indent:-9999em;}
.warning, #maincontent p.alert {color: #B01F1F;}
.caption { color: gray; font-size: 0.8em; }
.seebelow { color: #f00; padding:0 .1em; } /*as for a "see below" astrisk*/
.bottom15 {margin-bottom: 15px;}
img.form-img:hover {cursor: pointer;}

/*these next two are set with more specificity to ensure they'll override other styles.  */
body #container #wrapper .noborderplease {border:none;}
body #container #wrapper .borderplease {border-width: 1px; border-style: solid;}

/* design_pattern styles - non-semantic but ocasionally neccessary. */
body #container #wrapper label.dp_container {overflow:hidden;} /* if a label needs to contain a floated element, say, a tooltip, wrap the label text in a span - it will be floated automatically and everyone will rejoice. */
	body #container #wrapper label.dp_container span {float:left; padding-right:.3em;}

/* for the pricing table - sub item pricing.*/
.pricingtable td.subitem {padding-left:21px;}

#primary table.footer td.small h1 {clear:both;margin:0; padding:0 !important;}

/* 
Special List Styles - 
	.dp_prelist has reduced bottom margin
	.dp_insidelist has negative top margin (to remove margin from preceeding paragraph) and reduced bottom margin
	.dp_postlist has negative top margin
	.dp_doublespace adds extra space between li's.
	applied to ol, all of these produce numbered lists (default ol is unnumbered)
	to apply ONLY numbering to one an ol, use ol.dp_numbered.
	*************************************
	usage.  keep in mind that a paragraph cannot contain a list.  so some semantic considerations need to be taken:
		prelist:
			<ul class="dp_prelist"> ... </ul>
			<p> ... <p>
		insidelist:
			<p> ... <p>
			<ul class="dp_insidelist"> ... </ul>
			<p> ... <p>
		postlist:
			<p> ... <p>
			<ul class="dp_postlist"> ... </ul>
			
		double-space between list items:
			<ul class="dp_doublespace"> ... </ul>
*/

#maincontent ol.dp_prelist li, #maincontent ol.dp_insidelist li, #maincontent ol.dp_postlist li, #maincontent ol.dp_numbered li { list-style:decimal; }
/*reset to disc for nested uls */
#maincontent ol.dp_prelist li ul li, #maincontent ol.dp_insidelist li ul li, #maincontent ol.dp_postlist li ul li, #maincontent ol.dp_numbered li ul li { list-style:disc; }
#maincontent ol.dp_prelist, #maincontent ul.dp_prelist { margin-bottom:.2em; }
#maincontent ol.dp_insidelist, #maincontent ul.dp_insidelist { margin-top:-8px; margin-bottom:.2em; }
#maincontent ol.dp_postlist, #maincontent ul.dp_postlist { margin-top:.2em; }
#maincontent ol.dp_doublespace li, #maincontent ul.dp_doublespace li { margin-bottom: .5em;}
#container #wrapper #content form input[type="hidden"]
{display: none; background-color: #FF0000;} /* make sure ff doesn't add borders to hidden inputs */



/* Safari 3 only fixes.  These changes may also get picked up by Opera. */
@media screen and (-webkit-min-device-pixel-ratio:0){
	form#donorsearchform div.musthave,
	form#donorsearchform fieldset.pushpull div.musthave { right:4px; top: -10px; }
	form#donorsearchform label input.checkbox { margin-bottom:3px; }
}

/* -------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
-------------------------------------1024 SStylesheet---------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
*/

#container, #footer, #links { width: 969px;}
#footer {border-bottom:1px solid; margin-bottom:15px; overflow:hidden;}
#footer ul#bookmark {bottom:0; left:450px;position:absolute;}
/*#footer {position:relative;}
#links ul#widgets {position:absolute; bottom:0; right:0;}*/
#links ul#widgets {float:right; text-align:right; width:60%;}
#links ul#widgets li {float:right; width:auto; }

#header {
	background: #95b1d4 url(../images/bg_header_1024.gif) 0 0 no-repeat;
	}
	#header #contact { 
		font: normal 1.8em/100% Arial, Helvetica, sans-serif; 
		left: 250px; 
		position:absolute; 
		text-align:right; 
		top: 25px;
	}
	* html #header #contact {left:200px;width:280px; }
	*+html #header #contact {left:200px;width:280px; }
	
	#header #contact ul {color:#FFFFFF;float:right;font-size:0.45em;font-weight:bold;}
	#header #contact li {clear:both;line-height:120%;}
	#header #searchform { top: 49px; }
	#header a#requestInfoPacket { bottom: 23px; right: 160px; }
	

		
/* 1024 Nav */
ul#navigation{
	position:absolute; top:0; left:0;
	height: 27px;
	margin: 1px 0 0 3px;
	overflow: visible;
	width:963px;
	}
	
ul#navigation li {float:left;}

ul#navigation a{
	display: block;
	float: left;
	margin:0 ;
	height: 23px;
	background: #C9D7E4 url(../images/bg_nav_1024.gif) 0 0 no-repeat;
	text-indent: -9999em;
	overflow: hidden;
	}

ul#navigation .home-menu 			{background-position:0 0; width:99px;}
ul#navigation .services-menu 		{background-position:-99px 0; width:121px;}
ul#navigation .whyuseus-menu 		{background-position:-220px 0; width:136px;}
ul#navigation .howitworks-menu 		{background-position:-356px 0; width:153px;}
ul#navigation .donorsearch-menu 	{background-position:-509px 0; width:157px;}
ul#navigation .aboutus-menu 		{background-position:-666px 0; width:122px;}
ul#navigation .learningcenter-menu 	{background-position:-788px 0; width:175px;}
* html ul#navigation .learningcenter-menu 	{width:172px;}

ul#navigation .home-menu:hover {background-position:0 -23px; }
ul#navigation .services-menu:hover {background-position:-99px -23px; }
ul#navigation .whyuseus-menu:hover {background-position:-220px -23px;}
ul#navigation .howitworks-menu:hover {background-position:-356px -23px;}
ul#navigation .donorsearch-menu:hover {background-position:-509px -23px;}
/* there are two body class in the donor search area - one for regular content, one for search forms/results*/
ul#navigation .aboutus-menu:hover {background-position:-666px -23px; }
ul#navigation .learningcenter-menu:hover {background-position:-788px -23px; }

#content {background:url(../images/bg_sidebar.gif) repeat-y 100% 0; margin:-2px 0 0 2px;}
* html #content {width:960px;}	


/* for chrome */
body:first-of-type #content {width:965px; }


#home #content {background:0; margin:0;}

#sidebar {	
	float:left;
	margin:0 0 0 23px;
	padding-top:20px;
	text-align:center;
	width:170px;
}
* html #sidebar {width:145px;}

#sidebar a img, #sidebar a:link img, #sidebar a:active img, #sidebar a:visited img {border: 1px solid #939aa0; margin-bottom:10px;}
#sidebar a:hover img {border:1px solid #C47660;}