body
{
	background: #FFF url('../images/bgBlueGrooveTall.gif') repeat-x scroll 0 245px;
	font-family: Arial;
	margin: 0;
	padding: 0;
	font: 12px Arial;
}

img
{
	border: none;
}

a
{
	text-decoration: none;
	color: #2B9CBE;
}

a:hover
{
	text-decoration: underline;
}



form
{
	padding: 0;
	margin: 0;
}

div.clear
{
	clear:both;
}

div.AdSuperBanner
{
	margin: 15px auto;
	width: 728px;
	height: 90px;
}

div#Segmenter
{
	background: #FFF;
	border: solid 2px #CCC;
	margin: 0 auto;
	padding: 0;
	width: 950px;
	/*overflow: auto; /* For debugging. Remove or change to hidden when moving to test/production */
	overflow: hidden;
}

div#SliderWrapper
{
	margin: 0 0 10px 0;
	text-align: center;
}

div#ChannelHeader
{
	margin: 15px 15px 0 15px;
}

div#ChannelHeader h1
{
	font: 30px Georgia;
	color: #DB1E7B;
	float: left;
	margin: 0;
	padding: 0;
}

div#ChannelHeader h1 img
{
	vertical-align: bottom;
}


div#ChannelHeader div.channelBlurb
{
	font: Bold 14px Arial;
	float: right;
	margin: 15px 0 0 0;
}

div#ContentBox
{
	width: 615px;
	overflow: auto;
	float: left;
	padding: 0 0 0 15px;
	margin: 0;
}

div#Sidebar
{
	width: 300px;
	overflow: hidden;
	float: left;
	margin: 0 0 0 15px;
	display: inline; /* fixes IE6 float margin bug */
}

#ContentBox #QuestionIntro
{
	height: 170px;
	background: url('../images/Fertility/QuestionIntroBG.jpg') no-repeat;
	margin: 0 0 0 10px;
	padding: 30px 20px
}

#ContentBox #QuestionIntro h2
{
	margin: 0;
	font: 40px Georgia;
	color: #FFF;
	width: 400px;
}

#ContentBox #QuestionIntro p
{
	margin: 10px 0 0 0;
	font: 18px Arial;
	color: #BCEEFE;
	width: 400px;
}

#ContentBox .QuestionBox
{
	border: dotted 1px #969696;
	padding: 20px 15px;
	margin: 0 0 15px 10px;
	width: 573px;
	color: #7B7B7B;
}

#ContentBox .qaTitle
{
	border: dotted 1px #969696;
	padding: 20px 15px;
	margin: 0 0 15px 10px;
	width: 573px;
	color: #666;
	background: #DEF6FF;
	/*background: #E5ECF7;*/
}

#ContentBox .qaTitle h3
{
	font: bold 14px Arial;
	margin: 0 0 10px 0;
	color: #DB1E7B;
}

#ContentBox .QuestionBox .QuestionText
{
	font: bold 16px Arial;
	color: #2B9CBE;
	margin: 0;
	padding: 0;
}

#ContentBox .QuestionBox ul
{
	font: 13px Arial;
	color: #7B7B7B;
	padding: 0;
	margin: 10px 0 0 0;
	list-style-type: none;
}

#ContentBox .SubmitButton
{
	padding: 10px;
	font: bold 11px Arial;
	margin: 0 0 100px 10px;
	border: none;
	background-color: #C02B74;
	color: #FFF;
	width: auto;
	overflow: visible;
}

#ContentBox .DefaultErrMsg
{
	font: bold 12px Arial;
	color: #DB1E7B;
	display: block;
}

/*** Portal Header styles ***/

#PortalHeader .Logo
{
	float: left;
}

#PortalHeader #PortalNavBar
{
	background-color: #7B7B7B;
	padding: 8px 0;
}

#PortalHeader #PortalNavBar ul
{
	list-style: none;
	margin: 0;
	padding: 0;
}

#PortalHeader #PortalNavBar ul li
{
	display: inline;
	font: 14px Georgia;
	color: #B4B4B4;
	margin: 0 25px;
	padding: 0;
}

#PortalHeader #PortalNavBar ul li a
{
	color: #B4B4B4;
	font: 12px Arial;
	text-decoration: none;
}

#PortalHeader #PortalNavBar ul li a:hover
{
	color: #FFF;	
}

#PortalHeader #SearchBox
{
	width: 270px;
	height: 50px;
	float: right;
	padding: 20px
}

#PortalHeader #SearchBox .input
{
	margin: 0;
	padding: 0;
}

#PortalHeader #SearchBox .SearchText
{
	width: 200px;
	border: solid 2px #CCC;
	padding: 5px;
	font: 12px Arial;
}

#PortalHeader #SearchBox .SearchButton
{
	margin: 0;
	padding: 5px;
	width: auto;
	overflow: visible;
	background-color: #E9273F;
	font: bold 12px Arial;
	color: #FFF;
	border: solid 2px #CCC;
	border-left: none;
	text-decoration: none;
}

#PortalHeader #SearchBox .options
{
	margin: 5px 0 0 0;
	padding: 0;
	font: 12px Arial;
}

#PortalHeader #SearchBox .options input
{
	margin: 3px 0 0 0;
	padding: 0;
}

/***************************/

#ContentBox a
{
	text-decoration: none;
}

#ContentBox a:hover
{
	text-decoration: underline;
}

#ContentBox #MainContent
{
	background-color: #FFF;
	font: 12px Arial;
	margin: 15px 0;
}

#ContentBox #MainContent .expandable
{
	display: none;
}

/*
#ContentBox #MainContent .GraphIntro
{
	background: url('../images/bgBlueGroove.gif') repeat;
	padding: 15px;
}

#ContentBox #MainContent .GraphIntro .GraphIntroText
{
	width: 360px;
	float: left;
	display: inline;
	margin: 0;
	padding: 0;
	font: bold 16px Arial;
	color: #BCEEFE;
}

#ContentBox #MainContent .GraphIntro .GraphIntroText p
{
	margin: 10px 0;
}

#ContentBox #MainContent .GraphIntro .GraphIntroImage
{
	width: 180px;
	float: right;
	margin: 5px 0 0 0;
	display: inline;
	padding: 10px;
	text-align: center;
	background-color: #FFF;
}

#ContentBox #MainContent .GraphIntro .GraphIntroImage img
{
	margin: 15px 0;
}

#ContentBox #MainContent .GraphIntro .GraphIntroImage a
{
	font: bold 12px Arial;
	color: #7B7B7B;
}

#ContentBox #MainContent .GraphIntro h2
{
	font: 38px Georgia;
	color: #FFF;
	margin: 0 0 10px 0;
}
*/

#ContentBox #MainContent h2
{
	font: 20px Arial;
	color: #2B9CBE;
}

#ContentBox #MainContent h3, #ContentBox #MainContent h3 a
{
	font: bold 14px Arial;
	color: #2B9CBE;
	margin: 10px 0;
}

#ContentBox #MainContent hr
{
	margin: 20px 0 0 0;
	color: #CCC;
	border: solid 1px #CCC;
}

#ContentBox #MainContent .ArticleWrapper
{
	color: #444;
}

#ContentBox #MainContent .SectionRelatedBox
{
	float: right;	
	width: 210px;
	background-color: #F2F2F2;
	margin: 0 0 20px 20px;
}

#ContentBox #MainContent .SectionRelatedBox ul
{
	margin: 10px;
	padding: 0;
	list-style: none;
}

#ContentBox #MainContent .SectionRelatedBox ul li
{
	margin: 10px 0;
}

#ContentBox #MainContent .SectionRelatedBox ul li a
{
	font: bold 12px Arial;
	color: #2B9CBE;
}

#ContentBox #MainContent .SectionRelatedBox .SRintro
{
	background-color: #C0D946;
	font: bold 20px Georgia;
	color: #FFF;
	padding: 10px;
}

#ContentBox #MainContent .SectionRelatedBox .moreLink
{
	float: right;
	font: 11px Arial;
	color: #2B9CBE;
	margin: 10px;
}

/** Article figure styles **/
#ContentBox #MainContent .large
{
	width: 280px;
}

#ContentBox #MainContent .figure
{
	background-color: #FFF;
	border: solid 1px #9B9C9E;
	float: left;
	margin: 0 10px 10px 0;
	overflow: hidden;
	text-align: center;
	clear: left;
}

#ContentBox #MainContent .figure h3
{
	background-color:#9B9C9E;
	color: #FFF;
	font: bold 12px Arial;
	padding: 5px;
	margin: 0;
	text-align: left;
}

#ContentBox #MainContent .figure p
{
	color: #666;
	margin: 5px;
	font: 11px Arial;
	text-align: left;
}

/*************************/

#ContentBox .RRTitle
{
	margin: 5px;
	font: 30px Georgia;
	color: #99B734;
}

#ContentBox .ResponseRelatedWrapper .ArticleRow
{
	margin: 0 0 15px 0;
	background-color: #F2F2F2;
	padding: 15px;
	width: 580px;
	border: dotted 1px #666;
}

#ContentBox .ResponseRelatedWrapper .ArticleRow h4
{
	font: 16px Arial;
	margin: 0 0 10px 0;
	color: #555;
}

#ContentBox .ResponseRelatedWrapper .ArticleRow .ArticleLinks
{
	width: 320px;
	float: left;
	margin: 0 0 0 15px;
}

#ContentBox .ResponseRelatedWrapper .ArticleRow .ArticleLinks ul
{
	list-style-type: none;
	padding: 0;
	margin: 0;
	height: 100px;
	overflow: hidden;
}

#ContentBox .ResponseRelatedWrapper .ArticleRow .ArticleLinks ul li
{
	font: 12px Arial;
	padding: 9px 0;
	border-top: dotted 1px #CCC;
}

#ContentBox .ResponseRelatedWrapper .ArticleRow .ArticleLinks ul li a
{
	color: #2B9CBE;
}

#ContentBox .ResponseRelatedWrapper .ArticleRow .ArticleLinks .pagination
{
	font: bold 10px Arial;
	margin: 0;
	border-top: dotted 1px #CCC;
}

#ContentBox .ResponseRelatedWrapper .ArticleRow .ArticleLinks .pagination span.pageLinks a
{
	font: bold 10px Arial;
	color: #2B9CBE;
	text-decoration: underline;
}

#ContentBox .ResponseRelatedWrapper .ArticleRow .ArticleLinks .pagination span.pageLinks a.rrPageCurrent
{
	font: bold 12px Arial;
	color: #E07;
	text-decoration: none;
}

#ContentBox .ResponseRelatedWrapper .ArticleRow .GraphBox
{
	height: 100px;
	margin: 0;
	border-bottom: dotted 1px #CCC;
	float: left;
}

#ContentBox .ResponseRelatedWrapper .ArticleRow .GraphBox .GraphComments
{
	float: left;
	font: 12px Arial;
	color: #666;
	margin: 30px 0 0 10px;
	width: 145px;
}

#ContentBox .ResponseRelatedWrapper .ArticleRow .GraphBox .GraphComments span.PercentValue
{
	font: bold 16px Arial;
	color: #E30472;
}

#ContentBox .ResponseRelatedWrapper .ArticleRow .GraphBox .BarGraphWrapper
{
	width: 90px;
	height: 100px;
	margin: 0;
	padding: 0;
	float: left;
	
	position: relative;
}

#ContentBox .ResponseRelatedWrapper .ArticleRow .GraphBox .BarGraphWrapper .BarBackground
{
	width: 35px;
	margin: 0 10px 0 0;
	float: left;
	position: relative;
	display: inline;
}

#ContentBox .ResponseRelatedWrapper .ArticleRow .GraphBox .BarGraphWrapper .BarBackground .PercentValue
{
	font: bold 12px Arial;
	color: #FFF;
	position: absolute;
	bottom: 0;
	text-align: center;
	width: 35px;
	padding: 3px 0;
}

#ContentBox .ResponseRelatedWrapper .ArticleRow .GraphBox .BarGraphWrapper .BarOther
{
	background-color: #AAA;
}

#ContentBox .ResponseRelatedWrapper .ArticleRow .GraphBox .BarGraphWrapper .BarChosen
{
	background-color: #E07;
}


/* SYZ 20090716: Moved from Search.aspx */
/*** Search Page ***/
#SearchPage {font-size:12px;}
#SearchPage a{color:#2B9CBE;font-weight:bold;}

#SearchPage #SearchBox {float:right;margin:40px 0 0 0;width:275px;}
#SearchPage #SearchBox #SearchBoxTitle {color:#2B9CBE;font-weight:bold;font-size:12px;margin-bottom:5px;}

#SearchPage #SearchBox .SearchText{width:190px;border: solid 2px #CCC;padding: 5px;font: 12px Arial;}
#SearchPage #SearchBox .SearchButton{margin: 0;padding: 5px;background-color: #E9273F;font: bold 12px Arial;color: #FFF;border: solid 2px #CCC;border-left: none;text-decoration: none;}
#SearchPage #SearchBox .options {margin: 5px 0 0 0;padding: 0;font: 12px Arial;}
#SearchPage #SearchBox .options table {width: 240px;}
#SearchPage #SearchBox .options input{margin: 3px 0 0 0;padding: 0;}


#SearchPage #SearchHeader {background:url('../images/search_header.jpg') no-repeat;width:615px;height:153px;margin-bottom:20px; padding: 1px 0 0 0;}
#SearchPage #SearchHeader .title {font-size:38px;font-family:Georgia;color:#ffffff; margin: 30px 0 0 30px;}
#SearchPage #SearchHeader .description {font-size:16px;color:#BCEEFE;font-weight:bold; margin: 15px 0 0 30px; width: 250px;}

#SearchPage ul#SearchResults {list-style-type:none;margin:0 0 0 0px;padding:0;border-top:dotted 1px #CCC; width: 600px;}
#SearchPage ul#SearchResults li {border-bottom:dotted 1px #CCC;}

#SearchPage ul#SearchResults li div.link {margin:5px 0 5px 0;}
#SearchPage ul#SearchResults li div.description {margin-bottom:5px;}

#SearchPage #Paging {margin: 20px 0; width: 600px;}


/*** Sidebar Styles ***/

#Sidebar .ClinicLocatorBox
{
	height: 125px;
	background: url('../images/Fertility/cliniclocator.jpg') no-repeat;
	margin: 0;
	position: relative;
}

#Sidebar .ClinicLocatorBox p
{
	width: 140px;
	position: absolute;
	top: 10px;
	left: 15px;
	font: 20px Arial;
	color: #3C798C;
	margin: 0;
}

#Sidebar .ClinicLocatorBox input
{
	width: 120px;
	border: solid 2px #78BAB3;
	font: 10px Arial;
	color: #666;
	padding: 3px;
	position: absolute;
	bottom: 15px;
	left: 15px;
}

#Sidebar .ClinicLocatorBox a
{
	font: bold 10px Arial;
	color: #FFF;
	padding: 3px 3px 4px 3px;
	background-color: #FB830F;
	position: absolute;
	border: solid 2px #78BAB3;
	bottom: 15px;
	left: 137px;
	text-decoration: none;
}


#Sidebar .FertilityAAE
{
	margin: 10px auto;
	width: 240px;
}

#Sidebar .Newsletter
{
	padding: 0 0 0 75px;
	margin: 15px 0;
	background: url('../images/letter.gif') no-repeat;
	height: 50px;
	font: bold 16px Arial;
	color: #555;
}

#Sidebar .Newsletter input
{
	font: 12px Arial;
	color: #888;
	width: 150px;
	padding: 3px;
	margin: 3px 0 0 0;
}

#Sidebar .Newsletter a
{
	font: bold 12px Arial;
	color: #777;
	text-decoration: none;
}

#Sidebar .Gap
{
	margin: 10px 0;
}

#Sidebar .DDG
{
	background-color: #EEE;
	overflow: hidden;
	padding: 0 0 5px 0;
	margin: 10px 0;
}

#Sidebar .DDG h3
{
	font: 20px Georgia;
	color: #7DB427;
	background-color: #FFF;
	margin: 0;
	padding: 5px 10px;
}

#Sidebar .DDG p
{
	font: 13px Arial;
	color: #555;
	margin: 10px 15px;
	clear: both;
}

#Sidebar .DDG a
{
	float: right;
	font: bold 12px Arial;
	color: #444;
	margin: 0 15px 0 0;
	padding: 0;
	text-decoration: none;
}

#Sidebar .FertilityResources
{
	background-color: #E5ECF7;
	margin: 12px 0;
	overflow: hidden;
}

#Sidebar .FertilityResources h3
{
	background-color: #7B7B7B;
	color: #FFF;
	font: bold 16px Arial;
	margin: 0;
	padding: 5px 0;
	text-align: center;
}

#Sidebar .FertilityResources img
{
	border: solid 3px #FFF;
	margin: 10px;
	float: left;
	display: inline;
}

#Sidebar .FertilityResources ul
{
	margin: 12px 0;
	padding: 0;
	float: left;
	display: inline;
	font: 12px Arial;
	color: #2B9CBE;
}

#Sidebar .FertilityResources ul li
{
	list-style: none;
	margin: 4px 0;
	padding: 0;
}

#Sidebar .FertilityResources ul li a
{
	text-decoration: none;
	color: #666;
}

#Sidebar .FertilityResources ul li a:hover
{
	text-decoration: underline;
}


/*********************/


/* 
	root element for the scrollable. 
	when scrolling occurs this element stays still. 
*/
div.scrollable {
	
	/* required settings */
	position:relative;
	overflow:hidden;	 	
	width: 905px;	
	height:163px;	
	
	
	/* custom decorations */
	padding:0px 0;	
	border-top:2px solid #EBEBEB;
	border-bottom:2px solid #EBEBEB;
					
}

/* 
	root element for scrollable items. Must be absolutely positioned
	and it should have a super large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
div.scrollable div.items {	
	/* this cannot be too large */
	width:20000em;	
	position:absolute;
	clear:both;		
	
	/* decoration */
	
}

/* single scrollable item */
div.scrollable div.items div {
	float:left;
	
	/* custom decoration */
	text-align:center;
	width:175px;
	height: 163px;
	font-size:30px;
	font-family: 'bitstream vera sans';
	border-left:3px solid #fff;
	border-right:3px solid #fff;

	background-color: #C5EEFC;
	background-image: url(../images/slide/arrow_blue.png);
	
	background-repeat: no-repeat;
	background-position: 50% 30%;
	
	
}

div.scrollable div.items div p a
{
    font-size: 14px;
    font-family: arial;
    color: #5B737A;
    padding: 75px 3px 0 3px;
    display: block;
    text-decoration: none;
    
}

/* active item */
div.scrollable div.items div.active {
	border:3px solid #fff;
	background-image: url(../images/slide/arrow_green.png);
	background-repeat: no-repeat;
	background-position: 50% 20%;
	background-color: #fff;
}
div.scrollable div.items div.active p a
{
    font-weight: bold;
    color: #368DA6;
}





/* this makes it possible to add next button beside scrollable */
div.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	display:block;
	width:15px;
	height:55px;
	background:url(../images/slide/arrow_pink_l.png) no-repeat;
	
	float:left;
	margin:30px 2px;
	cursor:pointer;
	font-size:1px;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	
}

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}

/* next button uses another background image */
a.next, a.nextPage {
	background-image:url(../images/slide/arrow_pink_r.png);
	clear:right;	
}



/*** Section Home Page teaser box style ***/
#ContentBox #MainContent .HomePage .TeaserBox
{
	border: dotted 1px #666;
	background-color: #F2F2F2;
	padding: 15px;
	width: 580px;
}

#ContentBox #MainContent .HomePage .TeaserBox .intro
{
	font: 30px Georgia;
	color: #DB1E7B;
	clear: both;
	margin: 0 0 15px 0;
}

#ContentBox #MainContent .HomePage .TeaserBox img
{
	float: left;
	border: solid #CCC;
	width: 133px;
	height: 92px;
}

#ContentBox #MainContent .HomePage .TeaserBox .TeaserArticle
{
	float: left;
	margin: 0 0 0 20px;
	
	width: 410px;
}

#ContentBox #MainContent .HomePage .TeaserBox h3
{
	margin: 0 0 15px 0;
}

#ContentBox #MainContent .HomePage .TeaserBox .TeaserText
{
	clear: right;
	margin: 0 0 15px 0;
}

#ContentBox #MainContent .HomePage .TeaserBox .TeaserMore
{
	color: #2B9CBE;
}


/*** Health Tool Page ***/

#HealthToolPage .ToolBox
{
	border: dotted 1px #666;
	background-color: #F2F2F2;
	padding: 15px;
	margin: 0 0 20px 0;
	width: 580px;
	color: #555;
}

#HealthToolPage .ToolBox select
{
	color: #555;
	margin: 10px;
}

#HealthToolPage .ToolBox .genderIcon
{
	float: left;
	width: 60px;
	text-decoration: none;
	text-align: center;
	margin: 10px;
}

#HealthToolPage .ToolBox h3
{
	color: #2B9CBE;
	margin: 10px 0 15px 0;
}

#HealthToolPage .ToolBox #ovulResult
{
	display: none;
}

#HealthToolPage .ToolBox #ovulResult span
{
	font-weight: bold;
}