html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
html {height: 100%;} /* this is set to 100% so that the child elements: nine-sixy and shadow can be 100% high */ 

body {
	line-height: 1;
	color: black;
	background: #f8ae00 url(../i/bg.jpg) repeat-y center;
/*	height: 100%; */
}

body#welcome { height: 500px; }
body#couples { height: 650px; }
body#couples-two { height: 900px; }
body#women { height: 980px; }
body#women-two { height: 750px; }
body#men { height: 950px; }
body#men-two { height: 1100px; }
body#young-people { height: 730px; }
body#young-people-two { height: 440px; }
body#grandparents-in-waiting { height: 790px; }
body#grandparents-in-waiting-two { height: 1320px; }
body#facts { height: 895px; }
body#information-and-brochures { height: 500px; }
body#contact-us { height: 500px; }
body#sponsors { height: 700px; }
body#sitemap { height: 500px; }
body#about-the-project { height: 650px; }
body#bpw { height: 500px; }
body#links { height: 700px; }
body#bpw { height:  700px; }

ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

body#splash {
	background-color: #ffffff;
	background-image: none;
}

.splash-hero {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 1056px;
	height: 913px;
}

#shadow {
	display: block;
	width: 1152px;
	margin-left: auto;
	margin-right: auto;
	height: 100%; /* works only if parent container is assigned a height value */
}

#nine-sixty {
	display: block;
	width: 960px;
	background-color: #ffffff;
	margin-left: auto;
	margin-right: auto;
	height: 100%; 	
}

#nav {
	display: block;
	width: 960px;
	height: 45px;
	margin-left: auto;
	margin-right: auto;
}

ul.navigation li {
	list-style-type: none;
	padding-right: 15px;
	float: left;
	height: 30px;
	background: url(../i/nav-sprite-think-fertility.jpg) no-repeat;
	text-indent: -9999px;
	display: block;
	margin-top: 8px;
}

/*              X-across Y-up&down                 */

ul.navigation li:hover { cursor: pointer;}

ul.navigation li.welcome { background-position: 0 0; width: 54px; margin-left:40px;}
ul.navigation li.welcome:hover { background-position: 0 -31px; }

ul.navigation li.couples { background-position: -70px 0; width: 58px;}
ul.navigation li.couples:hover { background-position: -70px -31px; }

ul.navigation li.women { background-position: -140px 0; width: 50px;}
ul.navigation li.women:hover { background-position: -140px -31px; }

ul.navigation li.men { background-position: -205px 0; width: 40px;}
ul.navigation li.men:hover { background-position: -205px -31px; }

ul.navigation li.young-people { background-position: -260px 0; width: 91px;}
ul.navigation li.young-people:hover { background-position: -260px -31px; }

ul.navigation li.grandparents-in-waiting { background-position: -365px 0; width: 165px;}
ul.navigation li.grandparents-in-waiting:hover { background-position: -365px -31px; }

ul.navigation li.facts { background-position: -543px 0; width: 40px;}
ul.navigation li.facts:hover { background-position: -543px -31px; }

ul.navigation li.information-and-brochures { background-position: -595px 0; width: 175px; display: none;} /* !!!!!!!!!!!!! */
ul.navigation li.information-and-brochures:hover { background-position: -595px -31px; }

ul.navigation li.contact-us { background-position: -780px 0; width: 80px;}
ul.navigation li.contact-us:hover { background-position: -780px -31px; }

ul.navigation li a {
	display: block;
    padding: 30px 0 0 0;
	overflow: hidden;
	height: 0px !important;
	height /**/:30px /*   http://stackoverflow.com/questions/490795/css-text-replace-with-image-need-hyperlink    */
}

.hero { display: block; height: 379px; }

.welcome { background: url(../i/hero-welcome.jpg); }
.couples { background: url(../i/hero-couples.jpg); }
.women { background: url(../i/hero-women.jpg); }
.men { background: url(../i/hero-men.jpg); }
.young-people { background: url(../i/hero-young-people.jpg); }
.grandparents-in-waiting { background: url(../i/hero-grandparents-in-waiting.jpg); }
.facts { background: url(../i/hero-facts.jpg); }
.information-and-brochures { background: url(../i/hero-information-and-brochures.jpg); }
.contact-us { background: url(../i/hero-contact-us.jpg); }

.bodycopy { 
	background-color: white; 
	display: block; 
	width: 960px; 
	position: absolute; 

	}

p {
	font: 12px/15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #696969;
	padding-bottom: 15px;
}

p a {
	font: 13px/16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #f9c533;
}

li a {
	font: 13px/16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #f9c533;
}

h1 { text-indent: -9999px; margin-top: 40px; margin-left: 50px; display: block; }

h1.welcome {background: url(../i/h1-welcome.jpg) no-repeat; height: 44px; width: 178px; }
h1.couples {background: url(../i/h1-couples.jpg) no-repeat; height: 58px; width: 178px; }
h1.women {background: url(../i/h1-women.jpg) no-repeat; height: 44px; width: 178px; }
h1.men {background: url(../i/h1-men.jpg) no-repeat; height: 44px; width: 178px; }
h1.young-people {background: url(../i/h1-young-people.jpg) no-repeat; height: 90px; width: 132px; }
h1.grandparents-in-waiting {background: url(../i/h1-grandparents-in-waiting.jpg) no-repeat; height: 104px; width: 258px; }
h1.facts {background: url(../i/h1-facts.jpg) no-repeat; height: 44px; width: 178px; }
h1.information-and-brochures {background: url(../i/h1-information-and-brochures.jpg) no-repeat; height: 93px; width: 226px; }
h1.contact-us {background: url(../i/h1-contact-us.jpg) no-repeat; height: 44px; width: 198px; }

h1.links {background: url(../i/h1-links.jpg) no-repeat; height: 40px; width: 75px; }
h1.bpw {background: url(../i/h1-bpw.jpg) no-repeat; height: 53px; width: 82px; }
h1.about-the-project {background: url(../i/h1-about-the-project.jpg) no-repeat; height: 104px; width: 169px; }
h1.sponsors {background: url(../i/h1-sponsors.jpg) no-repeat; height: 53px; width: 155px; }
h1.sitemap {background: url(../i/h1-sitemap.jpg) no-repeat; height: 53px; width: 138px; }


.bodycopy-welcome {margin-top: 0;}
.bodycopy-couples {margin-top: -14px}
.bodycopy-women {margin-top: 0}
.bodycopy-men {margin-top: 0}
.bodycopy-young-people { margin-top: -46px}
.bodycopy-grandparents-in-waiting {margin-top: -60px }
.bodycopy-facts {margin-top: 0}
.bodycopy-information-and-brochures {margin-top: -49px;}
.bodycopy-contact-us { margin-top: 0 }

.bodycopy-links { margin-top: 0 }
.bodycopy-bpw { margin-top: 0 }
.bodycopy-about-the-project { margin-top: -61px; }
.bodycopy-sponsors { margin-top: -10px; }
.bodycopy-sitemap { margin-top: -10px }


.col-one { 
	margin-left: 290px;
	_margin-left: 150px;
}

.col-one, .col-two, .col-three {
/*	display: block; */
	float: left;
	width: 260px;
	margin-top: -30px;
	_margin-top: 0px;
	padding-left: 40px;
	z-index: 10;
}

.contact-over-two-cols	 { 
	margin-left: 290px;
	_margin-left: 150px;
	margin-top: -25px;
	padding-left:25px;
	width:350px;
}

/*.bodycopy ul li {
	padding-bottom: 15px;
	
}*/

ul.body-bullets {
	font: 13px/16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #696969;
	padding-bottom: 15px;
}

ul.body-bullets li {
	list-style-type: disc;
	list-style-position: outside;
/*	padding-left:10px;    */
	list-style-image: url(../i/bullet.gif);
}

h2 {
	font: bold 15px/17px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #696969;
	padding-bottom: 15px;
}

h3 {
	font: 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #F8AE0B;
	padding-bottom: 15px;
}

h4 {
	font: bold 12px/15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #696969; 
}

blockquote {
	display: block;
	padding-left: 52px;
	padding-top: 15px;
	color: #bdc0bf;
	font: 19px/24px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	position: absolute;
	width: 220px;
}

blockquote strong {
	color: #696969;
	font-weight: normal;
	font-style: normal;
}

ul.bullets-inside-bullets li {
	list-style-type: disc;
	list-style-position: inside;
	list-style-image: url(../i/bullets.gif);
	padding-left: 10px;
}


/* * {margin:0;padding:0;} */

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 50px;}  /* must be same height as the footer */

#footer {position: relative;
	margin-top: -50px; /* negative value of footer height */
	height: 50px;
	clear:both;
	background-color: #747477;} 

/* CLEAR FIX*/
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

#footer ul li {
	list-style-type: none;
	padding-right: 10px;
	float: right;
	height: 30px;
	text-transform: uppercase;
	color: #fff;
	padding-top: 15px;
	font: 13px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

#footer ul li a {
	text-decoration: none;
	color: #fff;
}

.external:hover { background: url(../i/external.png) center right no-repeat; padding-right: 14px; }

body.links p a {
	font: 13px/16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #f9c533;
	width: 150px;
	height: auto;
}	

p em { font-style: italic; }
p strong { font-weight: bold; }

img.graph {
	padding-top: 15px;
}

img.graph:hover {
	cursor: pointer;
}

.question, .highlight {
	background-color: magenta;
}

span.underline {
	text-decoration: underline;
}

body#sponsors img {
	padding-top: 10px;
	padding-bottom: 10px;
	display: block;
}

	body#sponsors p.new-line {
	display: block;
	}

	p.new-line a {
		padding-right: 10px;
	}

img.side-by-side {
	float: left;
	display: block;
	padding-right: 25px;
}