/* For eveything concerning the body, this is the stylesheet. Had to debug lots of stuff to get here, so have a BACKUP of this file BEFORE you take the surgeon's scappel :D */
body {
	margin: 0 auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	background-color: #006599;

}

h1 {
	font: 160%/1.5 "Lucida Grande","Trebuchet MS","Tahoma","Helvetica","Arial",sans-serif;
	margin: 0;
	padding: 0;
	color: #e00201;
}

h1 {
	font: 130%/1.5 "Lucida Grande","Trebuchet MS","Tahoma","Helvetica","Arial",sans-serif;
	margin: 0;
	padding: 0;
	color: #e00201;
}

h3 {
	font: 100%/1.5 "Lucida Grande","Trebuchet MS","Tahoma","Helvetica","Arial",sans-serif;
	margin: 0;
	padding: 0;
	color: #e00201;
	font-weight: bold;
}

a:link, a:visited {
	color: #227ba7;
}

a:hover, a:active {
	color: #e00201;
}

p#donation-plea {
	width: 90%;
	text-align: center;
}

ul.news-list li {
	margin: 0 0 10px 0;
}

#maincol {
	width: 974px;
	overflow: auto;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-image:url(/images/container-bg-y2.jpg);
	/* Rather than have 2 strips for both side i used the usual background strip to be repeated vertically */
}
#maincol #right {
	float: right;
	width: 50px;
	/* This is the "packing" for the right hand side. No text, just an image that would
	serve as the pattern to fade image - that's "right-side-bg.jpg" */
}
#maincol #center {
	width: 874px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	float: left;
	/* center div which houses the two divs that will hold content */
}
#maincol #left {
	float: left;
	width: 50px;
	/* This is the "packing" for the right hand side. No text, just an image that would
	serve as the pattern to fade image - that's "left-side-bg.jpg" */
}
#maincol #center #left-column {
	float: left;
	width: 250px;
	/* This is where your vertical navigation, adverts and other text/stuff go */
}
#maincol #center #right-column {
	float: right;
	width: 600px;
	padding-top:10px;
	font: 130%/1.5 "Lucida Grande","Trebuchet MS","Tahoma","Helvetica","Arial",sans-serif;
}

p.intro {
	margin: 0 10px 10px 0;
}

span.intro-header {
	font-weight: bold;
	font-size: 120%;
}

span.face-first-letters {
	color: #e00201;
}

p {
	margin: 0 0 10px 0;
}

p.nicole-story {
	font-style: italic;
}

#footer {
	margin: 0px auto;
	background-image: url(/images/new-footer.jpg);
	background-repeat: no-repeat;
	height: 43px;
	width: 974px;
	padding-top:60px;
	text-align:center;
	color:#fff;
}

div#footer a:link, div#footer a:visited, div#footer a:hover, div#footer a:active {
	color: #fff;
}

#pattern #maincol #center #left-column #extrainfo {
	width: 250px;
	padding: 5px 0 10px 0;
}

.s-maincol {
	width: 599px;
}
.sub-sections {
	float: left;
	width: 195px;
	margin: 0 4px 0 0;
}

.video-sub-sections {
	float: left;
	width: 390px;
	margin: 0 4px 0 0;
}

img.sub-section-images {
	width: 190px;
	height: 67px;
	border: 0;
}

.sub-sections p {
	margin: 0 0 10px 8px;
}

.clear	{
	clear:both;
}

div.content-ad {
	margin: 0 0 15px 25px;
}

#header {
	height: 80px;
	width: 80%;
	background-image: url(/images/header-bg-x.jpg);
	background-repeat: repeat-x;
	padding: 0 10%;
}
#horizontalbar	{
	background-image: url(/images/nav-bg-x.jpg);
	background-repeat: repeat-x;
	height:40px;
}
#header #left-section {
	float: left;
	width: 565px;
}
#header #right-section {
	float: right;
	width: 200px;
	height: 80px;
	text-align:center;
}
#pattern {
	background-image: url(/images/pattern-bg-x.jpg);
	background-repeat: repeat-x;
	height: 700px;
	width: 100%;
}

img.donate {
	margin: 20px 0 0 0;
}

span.definition {
	font-weight: bold;
	color: #e00201;
}

/* Styling for the accordion menu*/
.arrowlistmenu{
width: 180px; /*width of accordion menu*/
padding-left:40px;
}

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
	background-color:#fff;
	color: #e00201;
	text-decoration: none;
	display: block;
	width: 150px;
	font-size: 14px;
	font-weight:bold;
	background-repeat: no-repeat;
	padding: 5px 3px 5px 35px;
	font-family:"Century Gothic";
	height:20px;
	cursor: hand;
	cursor: pointer;
	border-bottom-width: 1px;
				border-bottom-style: solid;
				border-bottom-color: #feb4b3;
}
.arrowlistmenu .menuheader:hover	{
				color: #e00201;
				text-decoration:underline;
				background:url(/images/bullet.jpg) no-repeat #fff 0 -1px;
}
.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
				color: #e00201;
				text-decoration:underline;
				background:url(/images/bullet.jpg) no-repeat #fff 0 -1px;
}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/

}

.arrowlistmenu ul li a{
color: #A70303;
background: url(/images/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #feb4b3;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #a70303;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #a70303;
background-color:#fcf;
}
/* End of styling */

/* BEGIN: Navigation */


			.navpop ul {
				list-style: none;
				width: 125px;
			}

			.navpop ul a {
	background-color:#fff;
	color: #e00201;
	text-decoration: none;
	display: block;
	width: 150px;
	font-size: 14px;
	font-weight:bold;
	background-repeat: no-repeat;
	padding: 5px 3px 5px 35px;
	font-family:"Century Gothic";
	height:20px;
			}
			
			.navpop ul a:hover {
				color: #e00201;
				text-decoration:underline;
				background:url(/images/bullet.jpg) no-repeat #fff 0 -1px;
			}
			
			.navpop ul li {
				margin-bottom: 1px;
				float: left;
				position: relative;
				border-bottom-width: 1px;
				border-bottom-style: solid;
				border-bottom-color: #feb4b3;
			}
			
			.navpop ul li ul {
				list-style: none;
				position: absolute;
				left: 140px;
				top: 0;
				display: none;
				width: 125px;
				border-left: 1px solid #fff;
			}
			
			.navpop ul li:hover ul {
			border:#fff solid 1px;
			display: block;
			margin-left:30px;
			width:150px;/*Determines how "easy" it is to access the child links when they appear. More is better*/
			}
ul.categoryitems {
width: 153px;
margin: 0 0 0 35px;
}

ul.categoryitems li {
margin: 5px 0;
font-size: 110%;
}

/* END: Navigation */

/*Horizontal Nav: Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.mattblacktabs{
	width: 100%;
	overflow: hidden;
	height:40px;
	background:url(/images/nav-bg-x.jpg) repeat-x;
	width:80%;
	padding-left:10%;
	padding-right:10%;
	position: relative;
}

div#search {
	position: absolute;
	top: 8px;
	right: 5px;
}

div#search-bread-crumbs {
	font-size: 80%;
}

.mattblacktabs ul {
	margin: 0;
	padding: 0;
	padding-left: 5px; /*offset of tabs relative to browser left edge*/
	font: bold 10px Verdana;
	list-style-type: none;
	padding-bottom:8px;
}

.mattblacktabs li {
display: inline;
margin: 0;
}

.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 14px 8px; /*padding inside each tab*/

color: white;
}

.mattblacktabs li a:visited{
color: white;
}

.mattblacktabs li a:hover, .mattblacktabs li.selected a{
color:#f00;
background:url(/images/nav-hover.jpg) repeat-x; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}

/*Horizontal Nav: Credits: Dynamic Drive CSS Library */

#right-column fieldset#contact-info { width: 540px; background: #fff; padding:5px 20px 5px; margin:10px 0; }
#right-column fieldset#contact-info legend {  background: #227ba7; color: #fff; padding:10px 5px; margin:0; }
#right-column fieldset#contact-info label { width:15em; display:block; float:left; }
#right-column fieldset#contact-info br { clear:both; }
#right-column input:focus { border-top:2px solid #227ba7; border-right:2px solid #227ba7; border-bottom:2px solid #227ba7; border-left:2px solid #227ba7;}
#right-column input, select { margin-bottom: .5em; }

#right-column fieldset { background: #ffffe6; border:1px solid #227ba7; padding-bottom: 5px;}
#right-column fieldset span { padding-left: 10px; }
html>body #right-column fieldset span { padding-left: 0; }
#right-column legend { background: #ffffe6; padding: 0.2em 0.5em; border:1px solid #227ba7; text-align:right; font-weight: bold; }

#right-column fieldset#confirm-info { width: 540px; background: #fff; padding:5px 20px 5px; margin:10px 0; }
#right-column fieldset#confirm-info legend {  background: #227ba7; color: #fff; padding:10px 5px; margin:0; }
#right-column fieldset#confirm-info label { width:21em; display:block; float:left; }
#right-column fieldset#confirm-info br { clear:both; }

table#donations-table {
	width: 535px;
	border: 0;
	padding: 0;
}

table#donations-table td.fields {
	width: 255px;
	vertical-align: top;
	font-weight: bold;
	padding: 10px 0 0 0;
}

table#donations-table td.data {
	width: 280px;
	vertical-align: top;
	padding: 10px 0 0 0;
}

 #face-address {
            font-weight: bold;
        }

.asterix { color:#f00; font-family:Verdana, sans-serif; font-size:14pt; font-weight:bold; }

form#contact label { width:10em; display:block; float:left; }
form#contact input, form#contact select { margin-bottom: .5em; }

img.content-photos {
	float: left;
	margin: 0 8px 8px 0;
	width: 190px;
	height: 129px;
	border: 0;
}

img.page-photos {
	float: left; 
	margin: 0 10px 7px 0;
	 width: 113px;
	 height: 112px;
}

/* BEGIN: Links table */

table#links-table {
	width: 90%;
	padding: 0;
}

table#links-table td {
	padding: 0 0 10px 10px;
}

table#links-table td.numbers {
	width: 5%;
}

table#links-table td.links {
	width: 95%;
}

table#links-table th {
    text-align: left;
	background-color: #ccc;
	padding: 0 0 0 10px;
}

table#links-table tr:hover, table#links-table tr.even {
	background-color: #eee;
}

/* END: Links table */

ul.bio-list {
	margin: 0 0 0 15px;
	padding: 0 0 0 15px;
	list-style-type: none;
	float: left;
}

ul.bio-list li {
	margin: 0 0 8px 15px;
	padding: 0 0 0 30px;
	background: #fff url('/images/sickles/sickle-bullet.jpg') no-repeat 0 60%;
}

ul#intra-link-list {
	margin: 0 0 0 15px;
	padding: 0 0 0 15px;
	list-style-type: none;
}

ul#intra-link-list li {
	margin: 0 0 8px 10px;
	padding: 0 0 0 130px;
	background: #fff url('/images/sickles/sickle-bullet.jpg') no-repeat 100px 60%;

}

div#subscription {
  border: 1px dotted #454001;
  background-color: #fafad2;
  padding: 5px;
	width: 90%;
	margin: 10px auto;
}

/* BEGIN: Modal */

.dhtmlwindow{
position: absolute;
border: 2px solid black;
visibility: hidden;
background-color: white;
}

.drag-handle{ /*CSS for Drag Handle*/
padding: 1px;
text-indent: 3px;
font: bold 14px Arial;
background-color: #CA0000;
color: white;
cursor: move;
overflow: hidden;
width: auto;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

.drag-handle .drag-controls{ /*CSS for controls (min, close etc) within Drag Handle*/
position: absolute;
right: 1px;
top: 2px;
cursor: hand;
cursor: pointer;
}

* html .drag-handle{ /*IE6 and below CSS hack. Width must be set to 100% in order for opaque title bar to render*/
width: 100%;
}


.drag-contentarea{ /*CSS for Content Display Area div*/
border-top: 1px solid brown;
background-color: white;
color: black;
height: 150px;
padding: 2px;
overflow: auto;
}

.drag-statusarea{ /*CSS for Status Bar div (includes resizearea)*/
border-top: 1px solid gray;
background-color: #F8F8F8;
height: 13px; /*height of resize image*/
}


.drag-resizearea{ /*CSS for Resize Area itself*/
float: right;
width: 13px; /*width of resize image*/
height: 13px; /*height of resize image*/
cursor: nw-resize;
font-size: 0;
}

.drag-handle{ /*Overwrite default drag handle bar background color with below*/
background-color: #03277C;
}

#interVeil{ /*CSS for veil that covers entire page while modal window is visible*/
position: absolute;
background: black url(/images/modal/blackdot.gif);
width: 10px;
left: 0;
top: 0;
z-index: 5;
visibility: hidden;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=80);
opacity: 0.8;
}

/* END: Modal */