/*
 * Custom CSS for FistulaCare.org.
 *
 * Copyright 2008-2009 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(/pages/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(/pages/images/bkgd.jpg) center top;
	height: 620px;
}

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

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

em {
	font-style: italic;
}

strong {
	font-weight: bold;
}

/********************************************** 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 div.caratFloat {
	display: inline;
	clear: none;
	float: right;
}

div#cornerNav input#query {
	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(/pages/images/home/central-title.jpg) no-repeat left top;
}

body.frenchPage div#homeBannerTxt {
	background: url(/pages/images/home/central-title-french.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(/pages/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(/pages/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;
}

body.frenchPage div#homeRecentTxt, body.frenchPage div#homeRecentMore, body.frenchPage div#homeCountriesTxt {
	font-size: 92%;
}





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

div#subLayout {
	float: left;
	background: url(/pages/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;
}

body.subClickable div#subMain {
	width: 534px;
}

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

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

body.subClickable div#subMain div#subBreadcrumbs {
	margin-left: 14px;
}

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;
}

body.subClickable div#subMain div#subClickableMap {
	clear: left;
	padding: 11px 0 0 0;
	width: 549px;
	overflow: hidden;
}

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

body.subClickable div#subMain div#subBreadcrumbs, body.subClickable div#subMain div#subContent {
	margin-left: 14px;
}

body.subClickable div#subMain div#subContent {
	padding-top: 10px;
}

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

div#subMain div#subContent h2 {
	font-weight: bold;
	font-size: 108%;
	color: #a00054;
	padding: 30px 0 0 0;
}

div#subMain div#subContent h3 {
	font-weight: bold;
	font-style: italic;
	font-size: 100%;
	color: #000000;
	padding: 20px 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(/pages/images/menu-sub-lo.gif) repeat-y top left;
}

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

div#subMenu li.navHi {
	background: url(/pages/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;
}




#subContent ul, #subContent ul ul, #subContent ul ol, #subContent ul ul ul, #subContent ul ul ol, #subContent ul ol ol, #subContent ul ol ul, #subContent ol, #subContent ol ul, #subContent ol ol, #subContent ol ol ol, #subContent ol ol ul, #subContent ol ul ol {
	padding-top: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}

#subContent li {
	margin-top: 6px;
}

#subContent ul li, #subContent ul ul li {
	margin-left: 30px;
	list-style: disc outside none;
}

#subContent ol li, #subContent ol ul li {
	margin-left: 30px;
	padding-left: 0px;
	list-style: decimal outside none;
}

#subContent ol ol li, #subContent ul ol ol li {
	margin-left: 30px;
	list-style: lower-alpha outside none;
}

#subContent ol ol li {
	margin-left: -200px;
	padding-left: 0px;
}

#subContent ol ol ol li, #subContent ol ol ul li {
	margin-left: 30px;
	padding-left: 0px;
}

#subContent ol ol ul li {
	list-style: disc outside none;
}





/********************************************** 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(/pages/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(/pages/images/menu-vert.gif) no-repeat left top;
}

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


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

body.frenchPage .nav li a {
	padding: 0 6px 5px 6px;
}

.nav li li a, body.frenchPage .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(/pages/images/menu-vert.gif) no-repeat left top; */
}




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

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

.nav li.current {
/*	background:url(/pages/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:hover {
	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(/pages/images/bkgd-dropdown.jpg);
}

.nav li li.withSub a:focus, .nav li li.withSub a:hover, .nav li li.withSub a:focus {
	background-image:url(/pages/images/bkgd-dropdown-over.jpg);
}

.nav li li.withSub li a:focus, .nav li li.withSub li a:hover, .nav li li.withSub li a:focus {
	background-image:url(/pages/images/bkgd-dropdown-over.jpg);
}

.nav li li li {
	background-image:url(/pages/images/bkgd-dropdown.jpg);
}


.nav li li:hover ul, .nav li li.sfHover ul {
	left: 216px;
}

.nav li li:hover ul a, .nav li li.sfHover ul a {
	color: #000;
}

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




/************************************************ SEARCH */

span.url {
	font-style: italic;
	color: #777;
}

div#subContent a.title {
	font-weight: bold;
}