@charset "UTF-8";
/* CSS Document */


@import url("navigation.css");

@import url("fonts.css");


/* 
     
	| London Sperm Bank
	| 
	|
	| Base
	|
*/



/* General
----------------------------------------------- */


* {
	margin: 0;
}
	
html, body {
	height: 100%;
}

body {
	background: url(../images/gen/body_bg.gif) repeat-x #a8b7bf fixed;
	font-family:Arial, Helvetica, sans-serif;
	color: #fff;
}
	
a {
	text-decoration: none;
}	

	
a:focus, img {
	outline: none;
	border: none;
	}	
	
img {
	border: none;
}		

.mainWrap {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	/* margin: 0 auto; */
    margin: 0 auto -119px; /* the bottom margin is the negative value of the footer's height */
	width: 900px;
	background: url(../images/gen/wrap_top.gif) no-repeat #2d3337 ;
}

.footer, .push {
	height: 120px; /* .push must be the same height as .footer */
	margin: 0 auto;
}
	
.push {
	clear: both;
}	

.footer {
	width: 900px;
	color: #fff;
	background: url(../images/gen/footer_bottom.gif) no-repeat 0 bottom;
}
	
	
	
/* Layout
----------------------------------------------- */


.header {
	width: 880px;
	height: 150px;
	margin-left: 20px;
	padding-top: 26px;
}
	
.headerCol {
	width: 150px;
	height: 150px;
	margin-right: 15px;
	float: left;
}
	
.subNavCol {
	width: 152px;
	height: 150px;
	float: left;
}	
	
.headerColCentre {
	width: 506px;
	padding: 8px 0 0 0;
	height: 130px;
	float: left;
}
	
.telCol {
	width: 150px;
	height: 132px;
	padding-top: 6px;
	float: left;
}	
	
#subNav {
	padding-top: 8px;
	height: 130px;
}
			
#headerColLeft {
	margin-right: 48px;
	height: 158px;
	/*border-bottom: 1px solid #fff;*/
}
	
.mainCont {
	width: 880px;
	margin: 20px 0 40px 20px;
}
	
.mainColLeft {
	width: 154px;
	margin-right: 40px;
	float: left;
} 
	
.mainColCentre {
	width: 492px;
	margin: 0 20px 30px 0;
	float: left;
}
	
.mainColRight {
	width: 154px;
	float: left;
}	 		
	
 #homeCol {
	width: 662px;
}
	
.flashMov {
	padding: 0 0 30px 0;
	border-bottom: 1px #92a1a9 solid;
	margin-bottom: 20px;
}	
	
.credit {
	float: right;
}
	
.topImage {
	height: 260px;
	width: 492px;
	margin-bottom: 20px;
}
	
.topImage#oneTen {
	background:url(../images/donors/1_in_10.gif) no-repeat;
}
	
.topImage#donorShortage {
	background:url(../images/gen/big_group.gif) no-repeat;
}
	
.topImage#spermScreening {
	background: url(../images/donors/sperm_screening.gif) no-repeat;
}	
	
	
.footerCont {
	margin: 0 20px 0 214px;
	padding-top: 20px;
}


#colRightMargin {
	padding-top: 210px;
}
	
	
.notEligible {
	padding: 8px;
	border: 1px solid #92a1a9;
	}
 	
	
.moreInfo {
	padding: 8px;
	background: #d3dadd;
	}	

/*
LIGHT GREY : #d3dadd

MID GREY : #92a1a9

/* Lists
----------------------------------------------- 	*/

.mainColCentre ul {
	font-size: 14px;
	line-height: 20px;
	margin-bottom: 10px;
	margin-left: 12px;
	padding-left: 0;
	color: #333;
}


.mainColCentre li {
	color: #333;
}
	
	
/* Form
----------------------------------------------- */	

form {
	background: #aedee4;
	padding: 10px 10px 0 10px;
}
	
form.contactForm {
	background: #92a1a9;
	padding: 1px 10px 0 10px;
}	
	
	
.contactButton {
	padding: 10px 0;
}
	
.qWrap{
	width: 472px;
	clear:both;
	float: left;
}


.qWrapbottomRule {
	width: 472px;
	clear:both;
	float: left;
	border-bottom: 1px #fff solid;
	margin-bottom: 6px;
}
	
.qWrapLeft {
     width: 30px;
	float: left;
	padding-top: 8px;
}
	
.qWrapRight {
	width: 442px;
	float: left;
	padding-top: 8px;
}
	
.fieldWrap {
	width: 472px;
	height: 30px;
	clear:both;
}
	
.fieldLeft {
     width: 200px;
	float: left;
	height: 30px;
}
	
.fieldRight {
	width: 272px;
	float: left;
	height: 30px;
}
	
.fieldRight input {
	width: 262px;
	border: 0;
	padding: 4px;
	background: #dff2f4;
}


.fieldWrap#textarea, #textarea .fieldRight  {
	height: 80px;
	}
	
textarea {
	width: 262px;
	border: 0;
	padding: 4px;
	background: #e9ecee;
	}	


#eligibility input {
	margin-right: 3px;
}

.contactForm .fieldRight input {
	background: #e9ecee;
	border: 0;
	padding: 4px;
}

.contactButton input.submitButton {
	background: url(../images/gen/button.gif) no-repeat -4px -61px;
	border: 0;
	width: 140px;
	height: 44px;
}

input.submitButton:hover {
	background: url(../images/gen/button.gif) no-repeat  -4px 0;
	cursor: pointer;
}

#eligibility form {
	float: left;
}
	
#eligibility  #layer2, #eligibility  #layer3, #eligibility  #layer4 {
	width: 476px;
	float: left;
}

#eligibility ul {
	margin: 0;
	padding: 0 0 10px 0;
	height: 22px;
	width: 472px;
	background:url(../images/gen/apply_steps.gif) no-repeat;
}

#eligibility li {
	float: left;
	list-style: none;
	padding: 0 0 0 0;
	
}

.qWrap#nextButton {
	margin-top: 10px;
}



.qWrap#applyButton {
	margin-top: 10px;
}

#applyButton input.applyButton {
	background: url(../images/gen/next_button.gif) no-repeat -4px -61px;
	border: 0;
	width: 140px;
	height: 54px;
}

#applyButton input.applyButton:hover {
	background: url(../images/gen/next_button.gif) no-repeat  -4px 0;
	cursor: pointer;
}

.results {
	background: #aedee4;
	width: 472px;
	padding: 0 10px 0 10px;
	}
	
.rejectPara {
	padding-bottom: 20px;
}
	
#sendButton input.sendButton {
	background: url(../images/gen/apply_button.gif) no-repeat -4px -61px;
	border: 0;
	width: 140px;
	height: 54px;
}

#sendButton input.sendButton:hover {
	background: url(../images/gen/apply_button.gif) no-repeat  -4px 0;
	cursor: pointer;
}	
	
.process {
	margin-bottom: 18px;
	}


	
/* Layers
----------------------------------------------- */	
	
	
#layer2, layer10 {
	display:visible;
	padding-bottom: 10px;
}

#layer1, #layer3, #layer4, #layer5, #layer6, #layer7, #layer8, #layer9, #layer11, #layer12, #layer13, #layer14, #layer15, #layer16, #layer17, #layer18    {
	display:none;
	padding-bottom: 10px;
}
	
	
/* Orange variation
----------------------------------------------- */	

#orange .headerColCentre, #orange .subNavCol, #orange .telCol {
	border-bottom: 4px solid #f99d1c;
}



#orange .mainWrap {
	background: url(../images/gen/wrap_top_w.gif) no-repeat #fff;
}
	
#orange .footerCont {
	border-top: 4px solid #f99d1c;
}	

/* Orange on white background variation
----------------------------------------------- */	

#orangeWhite .headerColCentre, #orangeWhite .subNavCol, #orangeWhite .telCol {
	border-bottom: 4px solid #f99d1c;
}
	
#orangeWhite .footerCont {
	border-top: 4px solid #f99d1c;
}	

#orangeWhite .mainWrap {
	background: url(../images/gen/wrap_top_w.gif) no-repeat #fff;
}
	
#orangeWhite .footer {
	background: url(../images/gen/footer_bottom_w.gif) no-repeat 0 bottom;
	color: #3a4044;
}

.canHelp {
	text-align: right;
	padding-left: 50px;
}

#orangeWhite .mainColCentre li a {
	color: #000;
	font-weight: bold;
	}
	
#orangeWhite .mainColCentre li a:hover {
	color: #f99d1c;
	}	


	
/* Grey bg variation
----------------------------------------------- */	

#greybg {
	color: #3a4044;
}

#greybg .mainWrap {
    background: url(../images/gen/wrap_top_g.gif) no-repeat #d9d9de;
}
	
#greybg .footer {
	background: url(../images/gen/footer_bottom_g.gif)no-repeat 0 bottom;
	color: #3a4044;
}

#greybg .headerColCentre, #greybg  .subNavCol, #greybg .telCol  {
	border-bottom: 4px solid #f99d1c;
}					
	
#greybg .quote {
	background:url(../images/gen/apost_left.gif) no-repeat;
}
		
	
/* Blue variation
----------------------------------------------- */	


/*  layout  */

#blue .mainWrap {
	background: url(../images/gen/wrap_top_w.gif) no-repeat #fff;
}
	
#blue .footer {
	background: url(../images/gen/footer_bottom_w.gif) no-repeat 0 bottom;
	color: #3a4044;
}
	
#blue .headerColCentre, #blue  .subNavCol, #blue .telCol  {
	border-bottom: 4px solid #00bce4;
}				
	
#blue .footerCont {
	border-top: 4px solid #00bce4;
}		
		
#blue cite {
	font-style:normal;
	color: #92a1a9;
	font-size: 90%;
}	
	
#blue li {
	color: #3a4044;
}

#layer3 li, #layer5 li {
	color: #3a4044;
}	


/* Sperm donors
----------------------------------------------- */	

.spermDonors {
	width: 492px;
	height: 150px;
	margin-bottom: 10px;
	background: url(../images/donors/meet_sperm_donors.gif) no-repeat 0 0;
}

.spermDonors ul {
	margin: 0;
	padding: 0;
}
	
.spermDonors li {
	list-style: none;
	float: left;
	height: 150px;
	width: 78px;
}
	
li.mark {
	width: 180px;
}

li.alan {
	width: 170px;
}

li.tom { 
	width: 142px;
}
	
li.mark:hover {
	background: url(../images/donors/meet_sperm_donors.gif) no-repeat 0 -400px;
	cursor: pointer;
}

li.alan:hover {
	background: url(../images/donors/meet_sperm_donors.gif) no-repeat -180px -400px;
	cursor: pointer;
}

li.tom:hover { 
	background: url(../images/donors/meet_sperm_donors.gif) no-repeat -350px -400px;
	cursor: pointer;
}

#layer3 li.mark {
	background: url(../images/donors/meet_sperm_donors.gif) no-repeat 0 -200px;
}

#layer4 li.alan {
	background: url(../images/donors/meet_sperm_donors.gif) no-repeat -180px -200px;
}

#layer5 li.tom { 
	background: url(../images/donors/meet_sperm_donors.gif) no-repeat -350px -200px;
}
	
	
/* Pink variation
----------------------------------------------- */	


#pink {
	color:#3a4044;
}	

#pink .mainWrap {
	background: url(../images/gen/wrap_top_w.gif) no-repeat #fff;
}
	
#pink .footer {
	background: url(../images/gen/footer_bottom_w.gif) no-repeat 0 bottom;
	color: #3a4044;
}	
	
#pink .headerColCentre, #pink .subNavCol, #pink .telCol  {
	border-bottom: 4px solid #ee2375;
}
	
#pink .footerCont {
	border-top: 4px solid #ee2375;
}



	
/* Home variation
----------------------------------------------- */	


#home {
	color:#3a4044;
}

#home .mainWrap {
	background: url(../images/gen/wrap_top_w.gif) no-repeat #fff;
}
	
#home .footer {
	background: url(../images/gen/footer_bottom_w.gif) no-repeat 0 bottom;
	color: #3a4044;
}

#home .footerCont {
	border-top: 4px solid #f99d1c;
}	
	
#home .headerColCentre, #home .subNavCol, #home .telCol {
	border-bottom: 4px solid #f99d1c;
}

#home .mainColLeft {
	width: 174px;
	margin-right: 20px;
	float: left;
}
	
li.tel {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #f99d1c;
	font-size: 90%;
}

li.tel strong {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #f99d1c;
	font-size: 130%;
}


#blue li.tel, #blue li.tel strong {
	color: #00bce4;
}

#pink li.tel, #pink li.tel strong {
	color: #ee2375;
}

#home .mainImage {
	margin-left: 3px;
	}


/* Colours
-----------------------------------------------



MAIN BLUE : #00bce4

PALE BLUE : #aedee4

ORANGE : #f99d1c

LIGHT GREY : #d3dadd

MID GREY : #92a1a9

DARK GREY : #3a4044


*/