/*
 * Custom CSS for FistulaCare.org.
 *
 * Copyright 2008 EngenderHealth.
 *
 * Programmed by Tor de Vries, Web Producer for EngenderHealth
 *
 * That purple color? #a00054
 * Light pink? #fef0f9
 *
 */

/*
Lines marked 'reset.css' and 'fonts.css' are copyright (c) 2007, Yahoo! Inc. All rights reserved.
Yahoo code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt
Version: 2.3.1
Slightly customized by TDV
*/
/* reset.css */ body{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup,sub{line-height:-1px;vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
/* fonts.css */ body{font:13px/1.22 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:99%;}
/* font note: 10px = 77%, 11px = 85%, 12px = 93%, 13px = 100%, 14px = 108%, 18px = 138.5%, 24px = 182% */


/********************************************** GENERAL LAYOUT */

html { height: 100%; }

body {
	min-height: 100.02%; 
	text-align: center;
	background: url(images/bkgd.jpg) repeat-y center top;
	background-color: #2F0200;	
}

div { overflow: visible; }

a, a:active, a:link { text-decoration: none; color: #a00054; }
a:hover { text-decoration: underline; color: #f3901d; }

div#pageContainer {
	position: relative;
	margin: 0 auto;
	text-align: left;
	width: 770px;
	top: 0px;
	z-index: 10;
	background-color: #fef0f9;
	background: url(images/bkgd.jpg) center top;
	height: 620px;
}

div#footer {
	font-size: 77%;
	clear: right;
	width: 750px;
	height: 24px;
	padding: 72px 0 0 0;
	text-align: center;
	z-index: 800;
}

div#footer p {
	padding: 0 24px 12px 20px;
}

/********************************************** RIBBON DECORATION */

div#ribbon {
	float: left;
	z-index: 1px;
}

div#ribbon, div#ribbon img {
	width: 770px;
	height: 18px;
}


/********************************************** LOGO STRIP */

div#logoStrip {
	float: left;
	padding: 4px 0 7px 8px;
	z-index: 10;
}

div#logoStrip, div#logoStrip img {
	width: 446px;
	height: 68px;
}

/********************************************** TOP RIGHT SEARCH & LINKS */

div#cornerNav {
	float: right;
	padding: 8px 13px 0 0;
	width: 226px;
	text-align: right;
	font-size: 11px;
	z-index: 20px;
}

div#cornerNav div#dottedLine {
	float: right;
	width: 226px;
	height: 2px;
	padding: 4px 0 3px 0;
}

div#cornerNav a, div#cornerNav a:active, div#cornerNav a:link { text-decoration: none; color: #000000;}
div#cornerNav a:hover { text-decoration: underline; color: #a00054; }

div#cornerNav a.caratFloat {
	float:right;
}

div#cornerNav input#searchInput {
	border-color: #ccc;
	border-style: solid;
	border-width: 1px;
	background-color: #fff;
	height: 13px;
	width: 110px;
	font-size: 12px;
}


/********************************************** HOME PAGE LAYOUT ITEMS */

div#homeBannerTxt {
	float: left;
	text-align: center;
	height: 228px;
	width: 264px;
	margin: 12px 0 0 11px;
	z-index: 66;
	background: url(images/home/central-title.jpg) no-repeat left top;
}

div#homeBannerTxt p {
	padding-top: 170px;
}

div#homeBannerPhoto {
	float: left;
	margin: 12px 0 0 0;
	z-index: 65;
}


div#homeRecentTxt {
	float: left;
	margin: 12px 0 0 11px;
	width: 252px;
	height: 214px;
	z-index: 76;
	overflow: hidden;
	background: url(images/home/recent-bkgd.jpg) no-repeat left top;
}

div#homeRecentTxt h1 {
	padding: 20px 0 0 20px;
}

div#homeRecentTxt li {
	padding: 10px 20px 0 20px;
}

div#homeRecentMore {
	position: absolute;
	width: 212px;
	height: 20px;
	top: 560px;
	left: 30px;
	text-align: right;
	z-index: 77;
}

div#homeRecentTxt li a, div#homeRecentTxt li a:active, div#homeRecentTxt li a:link, div#homeRecentMore a, div#homeRecentMore a:active, div#homeRecentMore a:link {
	color: #000;
}

div#homeRecentTxt a:hover, div#homeRecentMore a:hover {
	color: #a00054;
}

div#homeCountriesTxt {
	float: right;
	margin: 12px 0 0 0;
/*
	width: 500px;
	height: 190px;
*/
	width: 494px;
	height: 214px;

	z-index: 86;
	overflow: hidden;
	background: url(images/home/countries-bkgd.jpg) no-repeat left top;
}

div#homeRecentTxt h1, div#homeCountriesTxt h1 {
	padding: 20px 0 0 20px;
	font-weight: bold;
	color: #a00054;
}

div#homeRecentTxt h1 a, div#homeCountriesTxt h1 a {
	color: #a00054;
}


div#homeCountriesTxt p {
	padding: 10px 0 10px 20px;
	width: 444px;
}

div#homeCountriesTxt ul {
	padding: 0 0 0 20px;
	width: 120px;
	font-style: italic;
	float: left;
	padding-right: 20px;
}

div#homeCountriesTxt li {
	padding-left: 15px;
	text-indent: -15px;
	padding-bottom: 5px;
}

div#homeCountriesTxt li a {
	line-height: 5px;
	letter-spacing: -0.1em;
text-decoration: underline;
}





/********************************************** SUBPAGE LAYOUT ITEMS */

div#subLayout {
	float: left;
	background: url(images/bkgd-sub-banner.jpg) no-repeat top left;
	width: 746px;
	margin: 0 0 0 12px;
}

div#subMain {
	float: right;
	width: 520px;
	padding: 11px 15px 0 0;
}

div#subMain div#subActions {
	float: right;
}

div#subMain div#subBreadcrumbs {
	float: left;
}

div#subMain div#subActions, div#subMain div#subBreadcrumbs {
	font-size: 85%;
	color: #a00054;
}

div#subMain div#subActions a, div#subMain div#subBreadcrumbs a {
	color: #000;
}

div#subMain div#subContent {
	clear: left;
	width: 520px;
	padding: 25px 0 0 0;
	line-height: 138.5%;
}

div#subMain div#subContent h1 {
	font-weight: bold;
	font-size: 138.5%;
	color: #a00054;
	padding: 4px 0 0 0;
}

div#subMain div#subContent p {
	margin: 14px 0 0 0;
}

div#subMenu {
	float: left;
	width: 196px;
	margin: 30px 0 0 0;
	background: url(images/menu-sub-lo.gif) repeat-y top left;
}

div#subMenu li {
	padding: 8px 0 7px 12px;
}

div#subMenu li.navHi {
	background: url(images/menu-sub-hi.gif) repeat-y top left;
	font-weight: bold;
}


div#subMenu li a {
	color: #000;
}

div#subMenu li a:hover { 
	text-decoration: underline;
	color: #a00054;
}

div#subMenu img {
	clear: left;
	padding: 0;
	margin: 0;
}





/********************************************** MAIN NAVIGATION */
/****************** many thanks to suckerfish for this approach */

div#mainMenu {
	clear: left;
	width: 770px;
	height: 33px;
	z-index: 950;
	font-weight: bold;
	background: url(images/bkgd-menu.jpg) no-repeat left top;
}

div#menuBkgdOverlay {
	position: absolute;
	top: 97px;
	left: 0px;
	width: 15px;
	height: 33px;
	overflow: hidden;
	z-index: 1001;
}

.nav, .nav *, .nav li li {
	margin:0;
	padding:0;
	overflow: visible;
}

.nav {
	padding-top: 2px;
	margin: 0 0 0 12px;
	position: relative;
	left: 0px;
	top: 0px;
	line-height:18px;
	z-Index: 980;
}

.nav li {
	position:relative;
	float:left;
	z-index:995;
	padding: 6px 18px 0 18px;
	background: url(images/menu-vert.gif) no-repeat left top;
}

.nav li.current {
	background: url(images/menu-vert-hi.jpg) no-repeat left top;
	
}


.nav li a {
	color: #000;
	display:block;
	padding: 0 9px 5px 9px;
	text-decoration:none;
}

.nav li li a {
	padding: 10px 9px 7px 12px;
	color: #000;
}

.nav li ul {
	float:none;
	position:absolute;
	left:-999em;
	z-index:996;
}

.nav li:hover, .nav li.sfHover {
/*	background: url(images/menu-vert.gif) no-repeat left top; */
}




.nav li li, .nav li li:hover, .nav li li.sfHover {
	background-color: #fef0f9;
	background: url(images/bkgd-dropdown.jpg);
	font-weight: normal;
}

.nav li li:hover, .nav li li.sfHover {
	background: none;
	background-color: #a00054;
	background: url(images/bkgd-dropdown-over.jpg) left top;
}

.nav li.current {
/*	background:url(images/nav/main-bkgd-on.gif) left top; */ 
}

.nav a:focus, .nav a:hover, .nav a:active {
	color: #000;
	text-decoration: underline;
}

.nav li li:hover a {
	color: #fff;
}

.nav li:hover ul, .nav li.sfHover ul {
	left: -1px;
	top: 28px; /* distance from main nav -- see line-height above */
}

.nav li li:hover ul, .nav li li.sfHover ul {
	left:185px;
	top: 0px;	
}

.nav li:hover li ul, .nav li.sfHover li ul {
	z-index:997;
	left:-999em;
}

.nav li li {
	float:none;
	z-index:998;
}

.nav li li, .nav li li:hover ul, .nav li li.sfHover ul {
	width:217px;
}

.nav li li a {
	width:200px;
}

.nav li li.withSub {
	background-image:url(images/nav/dropdown-sub.png);
}

.nav li li.withSub a:focus, .nav li li.withSub a:hover, .nav li li.withSub a:focus {
	background-image:url(images/nav/dropdown-sub-hi.png);
}

.nav li li.withSub li a:focus, .nav li li.withSub li a:hover, .nav li li.withSub li a:focus {
	background-image:url(images/nav/dropdown-hi.png);
}

.nav li li li {
	background-image:url(images/nav/dropdown-second.png);
}