/* 
SITE STYLES FOR MEDICAL PREDICT
-------------------------------
*/

/* General CSS Reset Styles */

body {
	background: #e7eef9 url('../images/bg_body.png') repeat-x;
	color: #285ea6;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;	
	line-height: 18px;
	margin: 0;
	padding: 0;	
}

form {
	padding: 0;
	margin: 0;
}

img {
	border: 0;
}

input, select, textarea {
	color: #262626;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

/* used to fix bug in browser rendering images within hyperlinks */
a img {
	margin: 0;
	padding: 0;
	vertical-align: bottom;
}
	
h1, h2, h3, p {
	margin-top: 0;
}

.ulFormat {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dlFormat {
	margin: 0;
	padding: 0;
}

	.dlFormat dt {
		font-weight: bold;
	}

	.dlFormat dd {
		margin-top: 0;
		padding-top: 0;
	}

.clearBoth {
	clear: both;
}

hr {
        clear: both;
        height: 1px;
        color: #e7e7e7;
        background-color: #e7e7e7;
        padding: 0;
        border: 0;
}

.clearFix {
	clear: both;
}

/* Site Content Styles */
h1 {					
	color: #d28209;
        font-family: Palatino, serif;
        font-size: 16px;
        font-weight: bold;   
	line-height: 18px;           	
	margin-bottom: 5px;
}

h2 {					
	color: #285ea6;
	font-size: 14px;
	font-style: italic;
	font-weight: bold;					
	font-family: Palatino, serif;					
	line-height: 16px;	
}

h2 span {					
	font-size: 13px;
	font-style: normal;
	font-weight: normal;					
}

h3 {
	background: #285ea6 url('../images/bg_subheading.gif') no-repeat;
	color: #fff;	
	font-family: Palatino, serif;	
	font-size:  16px;	
	font-weight: normal;
	line-height: 26px;
	margin: 18px 0 10px 0;
	text-align: center;
}

p {
	color: #285ea6;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;	
	line-height: 18px;
	padding-top: 0;
}

.blackHighlight 
{
    color: Black;
}

.blueHighlight 
{
    color: Blue;
}

.greenHighlight 
{
    color: Green;
}

.redHighlight 
{
    color: Red;
}

.leftAlign 
{
    text-align: left;
}

.centerAlign 
{
    text-align: center;
}

.rightAlign 
{
    text-align: right;
}

blockquote {
	color: #285ea6;      
	font-family: Palatino, serif;
        font-size: 18px;
        font-style: italic;
	font-weight: bold;
        line-height: 20px;			
	padding-left: 36px;
	padding-right: 36px;
	margin: 0 0 18px 0;
}

a { 
	color: #d9680d;
	text-decoration: none;
}

	a:hover, a:active {
		text-decoration: underline;
	}

/* removes Firefox "dashed" border around links */
a:active, a:focus, input {	
	outline: none;
}

.noBorder {
	border: none;
}

/* Site Layout Styles */
#siteWrapper {
	background: url('../images/bg_content.png') repeat-y;
	margin: 0 auto;
	width: 908px;
}

	#contentContainer {
		background-color: #FFF;
		margin: 0 auto;
		width: 900px;
	}

		#siteLogo {
			padding: 3px 3px 3px 7px;
		}			

		/*mega menus*/
		#siteNavigation {				
			height: 24px;				
			width: 900px;
		}
			
			ul#mainNav {									
				float:left;				
				height: 24px;
				line-height: 24px;
				list-style: none;										
				margin: 0; 
				padding: 0;
			}

				ul#mainNav li.navItem {
					border-right: 1px solid #FFF;
					float: left;
					height: 24px;
					line-height: 24px;
					margin: 0; 
					padding: 0;
					position: relative; /*--Important--*/
					width: 224px;
				}

				ul#mainNav li.last {
					border: none;	
					width: 225px;
				}	

					ul#mainNav a.btnHome {
						background: url('../images/bg_navbutton.jpg') no-repeat;						
						color: #FFF;
						display: block;
						font-size: 13px;
						font-weight: bold;
						height: 24px;
						line-height: 24px;
						text-align: center;
						width: 224px;
					}

					ul#mainNav a.btnPrediction {
						background: url('../images/bg_navbutton.jpg') no-repeat;
						color: #FFF;
						display: block;
						font-size: 13px;
						font-weight: bold;
						height: 24px;
						line-height: 24px;
						text-align: center;
						width: 224px;
					}

					ul#mainNav a.btnCancerDictionary {
						background: url('../images/bg_navbutton.jpg') no-repeat;							
						color: #FFF;
						display: block;
						font-size: 13px;
						font-weight: bold;
						height: 24px;
						line-height: 24px;
						text-align: center;
						width: 224px;
					}

					ul#mainNav a.btnAboutUs {
						background: url('../images/bg_navbutton.jpg') no-repeat;
						color: #FFF;
						display: block;
						font-size: 13px;
						font-weight: bold;
						height: 24px;
						line-height: 24px;
						text-align: center;
						width: 225px;
					}					

						/*--Hover State--*/
						ul#mainNav li.navItem:hover a, ul#mainNav li.navItem a:hover, ul#mainNav li.navItem:active a, ul#mainNav li.navItem a:active { 							
							background-position: 0 -24px; 							
							text-decoration: none;
						} 

						/*--Active State--*/
						ul#mainNav li.navItem.active a {							
							background-position: 0 -24px; 						
							color: #ffc000;
							text-decoration: none;
						} 

						ul#mainNav li.navItem .sub {
							background-color: #285ea6;
							color: #fff;
							font-size: 11px;
							/*display: none;*/
							height: 24px;
							line-height: 24px;
							padding: 0 54px;
							/*text-align: center;
							width: 828px;*/
							width: 792px;
							position: absolute; /*--Important--*/
							top: 24px; 
							left: 0;								
						}
				
							ul#mainNav li.navItem .mega1 {								
								z-index: 99999;
							}

							ul#mainNav li.navItem .mega2 {
								left: -225px;
								z-index: 99998;
							}

							ul#mainNav li.navItem .mega3 {
								left: -450px;
								z-index: 99997;
							}

							ul#mainNav li.navItem .mega4 {
								left: -675px;									
								z-index: 99996;
							}


							.sub a, ul#mainNav li.navItem.active .sub a {
								color: #fff;
								font-size: 11px;
								line-height: 24px;
								padding: 0 5px;
								text-decoration: none;
							}

								.sub a:hover, .sub a:active, ul#mainNav li.navItem.active .sub a:hover, ul#mainNav li.navItem.active .sub a:active {
									color: #ffc000;
									font-size: 11px;
									line-height: 24px;
									padding: 0 5px;
									text-decoration: none;
								}

							.sub span {
								font-weight: bold;
								padding: 0 5px 0 0;
							}
							
							ul#mainNav li.navItem.active .sub a.active {
							    color: #ffc000;
							    text-decoration: none;
						    } 


			#breadCrumb {
				color: #a7a7a7;
				font-size: 11px;
				line-height: 30px;
				margin-top: 24px;
				padding-left: 54px;				
			}
		
				#breadCrumb a {
					color: #a7a7a7;
					font-size: 11px;
					font-weight: bold;
					text-transform: none;
				}
	
				#breadCrumb a:hover, #breadCrumb a:active {
					color: #a7a7a7;
					font-size: 11px;				
					font-weight: bold;
					text-decoration: underline;
				}

				#breadCrumb span {
					color: #d28209;
					font-weight: bold;		 
				}

		#siteBody {
			background-color: #FFF;
			padding-top: 18px;
		}		

			#siteContent {				
				float: left;						
				padding: 0 36px 36px 18px;
				width: 560px;
			}
				
				.contentBigTabContainer {
					background: #fffefe url('../images/bg_content_big_repeat.gif') repeat-y;					
					clear: both;					
					margin-top: 18px;
				}

					.contentTabBig {
						background: transparent url('../images/bg_content_big_top.gif') no-repeat;
						min-height: 550px;
						height: auto !important;
						height: 550px;						
					}

						.contentTabBigInterior {							
							padding: 0 18px;
						}
						
                    #alphabetNavigation 
                    {
                        margin-left: auto;
                        margin-right: auto;
                        padding-left: 0;
                        padding-right: 0;
                    }
                    #alphabetNavigation li 
                    {
                        border-left: 1px solid #333;
                        display: inline;
                        padding-left: 4px;
                        margin-left: 4px;
                    }
                    #alphabetNavigation li.first 
                    {
                        border: none;
                        margin-left: 0;
                    }
                    #alphabetNavigation li.active a 
                    {
                        color: #285EA6;
                        font-weight: bold;
                    }
                    #tabs dd 
                    {
                        margin-bottom: 10px;
                    }

					#steps 
					{
					    font-family: Arial, Helvetica, sans-serif;
						float: left;
						margin-top: 18px;
						border-bottom: 3px solid #ffc000;
						margin-bottom: 10px;
					}


						#steps li {
							float: left;							
						}
	
							#steps li a {
								color: #fff;
								display: block;
								font-family: Arial, Helvetica, sans-serif;
								line-height: 24px;
								font-size: 11px;
								font-weight: bold;
								height: 24px;
								text-align: center;							
								width: 140px;
							}

								#steps li a.step1 {
									background-image:url('../images/btn_step1.gif');
								}
								
								#steps li a.step2 {
									background-image:url('../images/btn_step2.gif');
								}
								
								#steps li a.step3 {
									background-image:url('../images/btn_step3.gif');
								}
								
								#steps li a.step4 {
									background-image:url('../images/btn_step4.gif');
								}

								#steps li a:hover, .steps li a:active {
									color: #ffc000;
									text-decoration: none;
								}

								#steps li a.active {
									background-position: 0 24px;
									color: #285EA6;
									text-decoration: none;
								}

									#steps li a.active:hover, #steps li a.active:active {
										color: #fff;
									}

				.contentBigContainer {
					background: #fffefe url('../images/bg_content_big_repeat.gif') repeat-y;					
					clear: both;
					margin-top: 18px;
				}

					.contentBig {
						background: transparent url('../images/bg_content_big_top.gif') no-repeat;
						min-height: 550px;
						height: auto !important;
						height: 550px;
						padding: 10px 18px 0 18px;
					}
				
				.contentSmallContainer {
					background: #fffefe url('../images/bg_content_small_repeat.gif') repeat-y;					
					clear: both;
					margin-top: 18px;
				}
				
				.noTopMargin 
				{   
				    margin-top: 0;
				}
		
					.contentSmall {
						background: transparent url('../images/bg_content_small_top.gif') no-repeat;
						min-height: 119px;
						height: auto !important;
						height: 119px;
						padding: 10px 18px 0 18px;
					}

						/* calculator styles */
						#calcForm {
							border-collapse: collapse;
							margin: 0 50px;
							padding: 0;
							
						}

							#calcForm td {
								padding: 4px 6px;
								font-size: 11px;
								position: relative;		
								vertical-align: top;								
							}

							#calcForm th {
								padding: 4px 6px;
								text-align: left;
								position: relative;	
								vertical-align: top;
							}

								#calcForm th span {
									font-size: 11px;
									font-weight: normal;															
								}

							#calcForm input {
								color: #285ea6;
								border: 1px solid #285ea6;
								font-size: 11px;
								margin: 0;
								padding-left: 0;
								padding-right: 0;
								width: 130px;
							}

							#calcForm select { 
								color: #285ea6;
								border: 1px solid #285ea6;
								font-size: 11px;
								margin: 0;
								padding-left: 0;
								padding-right: 0;
								width: 150px;
							}

								#calcForm input.orangeButton {
									background-color: #facca7;
									border: 2px solid #fbc97d;
									color: #285ea6;					
									font-family: Times, serif;
									font-size: 14px;
									font-weight: bold;					
									padding: 4px 6px;								
								}
				

				.contentContainer {					
					clear: both;					
				}

					.content {
						padding: 0 18px;
					}

				.calloutContainer {
					background: #fed34f url('../images/bg_chart_top.gif') no-repeat;					
					clear: both;
				}

					.callout {
						margin-top: 18px;
						padding: 0 10px;
					}	

					.calloutContainer h2 {					
						color: #285ea6;
						line-height: 26px;
						margin: 0;
						padding: 0 8px;					
					}

					.calloutCaption {
						margin: 0;
						padding: 10px 0 0 0;
						text-align: center;
					}

					/* prediction table */
					#predictionTable {
						background-color: #fff;											
						border-collapse: collapse;
						padding: 10px;
						width: 100%;
					}

						#predictionTable th {
							border-bottom: 1px solid #666666;
							color: #285ea6;
							font-size: 11px;
							line-height: 13px;
							margin: 0;
							padding: 4px 0;
							vertical-align: bottom;
						}
	
							#predictionTable th.heading {							
								border-bottom: 0;
								font-size: 12px;
								line-height: 16px;								
							}
	
						#predictionTable td {
							border-bottom: 1px solid #ccc;
							color: #285ea6;
							text-align: center;
						}
	
							#predictionTable .year {
								border-right: 1px solid #ccc;
							}

						#predictionTable .altRow {
							background-color: #fef5ed;
						}

				#siteContent p, #siteContent ul, #siteContent ol {
					font-family: Times, serif;
					font-size: 14px;
					line-height: 18px;
				}
				
				#siteContent .footNote {
				    font-family: Times, serif;
					font-size: 11px;
					line-height: 17px;
				}
				
				input.inputButton {
				    width: 75px !important;
				}
				
				.shortButton {
				    width: 125px;
				}
				
				.wideButton {
				    width: 200px;
				}

				.blueButton {					
					background-color: #c8d6e6;
					border: 2px solid #96afcf;
					color: #285ea6;					
					cursor: pointer;
					font-family: Times, serif;
					font-size: 14px;
					font-weight: bold;					
					padding: 4px 6px;					
				}
				
				    .blueButton:hover, .blueButton:active {
				        border: 2px solid #073A7D;
				        color: #073A7D;
				    }

				.orangeButton {					
					background-color: #facca7;
					border: 2px solid #fbc97d;
					color: #285ea6;	
					cursor: pointer;				
					font-family: Times, serif;
					font-size: 14px;
					font-weight: bold;					
					padding: 4px 6px;					
				}
				
				    .orangeButton:hover, .orangeButton:active {
				        border: 2px solid #073A7D;
				        color: #073A7D;
				    }
				    
				    input[disabled='disabled'], .disabled {
                        background-color: #999999;
                        border: 2px solid #666666;
	                    color: #666666;
                    }				
				
				/*form validation*/
				.validationBox {
                    background-color: pink;
                    border: 1px solid red;
                    margin: 20px;
                }
                        
                #calcForm label 
                {
                    cursor: help;
                }  
                        
                    #calcForm label.noToolTip 
                {
                    cursor: auto;
                }
                           
                                                
                .orangeBoxHelp 
                {
                    background-color: #facca7;
					border: 2px solid #fbc97d;
					color: #285ea6;					
					cursor: help;
					display: none;
					font-family: Times, serif;
					font-size: 14px;
					font-weight: bold;					
					padding: 0 6px;
					position: relative;
					z-index: 9998;
                }    
                        
                .orangeBoxHelpCaption
                {
                    background-color: pink;
                    border: 1px solid red;
                    display: none;    
                    font-weight: normal;
                    left: auto;
                    padding: 4px;  
                    position: absolute;                                       
                    width: 200px;
                    top: auto;
                    z-index: 9999;
                }       
		
			#siteSideBar {				
				float: left;										
				/*margin: 18px 0;*/
				position: relative;
				width: 286px;		
			}

				.featureContainer {
					background: #ffffcc url('../images/bg_sidebar_feature_repeat.gif') repeat-y;
					margin: 0 0 18px 18px;
					width: 250px;				
				}
			
					.featureContent {
						background: transparent url('../images/bg_sidebar_feature_top.gif') no-repeat;
						padding: 10px 10px 0 10px;
						text-align:center;
					}
						.featureContent a {
							color: #285ea6;
							font-family: Palatino, serif;
							font-size: 18px;
							font-weight: bold;							
							line-height: 22px;
						}	

				#advertisementContainer {
					background: #f2f2f2 url('../images/bg_rightcolumn_top.gif') no-repeat 0 0;							
					padding: 0 18px;					
				}

					#advertisementContainer .advertisement {
						padding: 6px 0;					
						text-align: right;					
					}
	
					#advertisementContainer .sideAd {
						padding: 0 0 20px 0;
					}
					
					#advertisementContainer .footerRound {
						bottom: 0;
						left: 0;
						position: absolute;
					}

				#loginContainer 
				{
				    display: none;
					background: #f2f2f2 url('../images/bg_login_repeat.gif') repeat-y;
					margin: 0 18px 18px 18px;
					width: 250px;
				}

					#login {
						background: transparent url('../images/bg_login_top.gif') no-repeat;						
						width: 250px;
					}

						#loginContainer table {
							border-collapse: collapse;
							font-family: Times, serif;
							padding-top: 10px;
							margin-left: 10px;
							width: 230px;
						}

							#loginContainer td label, #loginContainer td {
								color: #8ca7cc;
								font-size: 11px;
								font-family: Times, serif;
								text-align: right;
							}

							#loginContainer input {
								border: 1px solid #8ca7cc;
								color:#285ea6;
								font-size: 11px;
								padding-left: 0;
								padding-right: 0;
								width: 75px;
							}

							#loginContainer h4 {
								color: #285ea6;
								font-family: Palation, serif;
								font-size: 13px;	
								font-weight: bold;
								margin: 10px 0 0 0;
								padding: 0;
								text-align: left;
							}

							#loginContainer .joinButton {
								background-image: url('../images/bg_signup.gif');
								color: #285ea6;
								display: block;
								font-size:12px;
								font-style: italic;																		
								font-family: Times, serif;
								height: 90px;
								line-height: 16px;
								margin: 10px 7px 0 7px;
								text-align: center;
								width: 95px;
							}

								#loginContainer .joinButton span {
									font-style: normal;
									font-weight: bold;
								}
	
							#loginContainer input.blueButton {

							}

		#siteFooter {									
			clear: both;
			padding-top: 15px;		
		}

			#siteFooter table {
				border-collapse: collapse;
				background-color: #285ea6;					
				margin: 0;
				width: 900px;				
			}
		
				#siteFooter table td {
					color: #fff;
					font-size: 12px;
					line-height: 24px;
					margin: 0;
					padding: 0 15px;
				}

					#siteFooter table td.alignRight {
						text-align: right;
					}

					#siteFooter table td a {
						color: #fff;
						font-size: 12px;
						line-height: 24px;
						text-decoration: none;
					}

						#siteFooter table td a:hover, #siteFooter table td a:active {
							color: #fff;
							text-decoration: underline;
						}