/*
THEME NAME: Ray of Hope
THEME URI: http://thewaterschool.org
DESCRIPTION: Site design for The Water School
VERSION: 1.0
AUTHOR: Images
AUTHOR URI: http://images.ca
TAGS: design
*/

@import url('library/css/reset.css');
@import url('library/css/type.css');
@import url('library/css/forms.css');
 
/* =Global Elements
-------------------------------------------------------------- */

body, html {height: 100%;}

body {
	background: #010101 url(images/ws-bg_logo.jpg) top center no-repeat;
	color: #F5F5F5;
	font: 62.5% Verdana, Arial, Sans-Serif;
	;
	line-height: 1.8em
}

	body.campaign {background-image:url(images/gcp_bg.jpg);}

p {margin-bottom: .45em; font-size: 1.2em}

a:link {color:#00688B; text-decoration:none;}

a:visited {color:#1da1ce; text-decoration:none;}

a:hover, a:focus {text-decoration: underline;}

em {font-style: italic;}

blockquote {margin: 0 20px; font-style: italic;}

blockquote em, blockquote cite, blockquote i {font-style:normal;}

input, textarea {font: Verdana, Arial,}

sup {height: 0; line-height: 1; vertical-align: baseline; position: relative; font-size: .65em; vertical-align: super; margin: 0 .4em;}

small {font-size: .825em;}

#wrapper {margin: 0 auto; width: 998px;}

.alignleft {padding: 0 20px 6px 48px; float: left;}

	.secondary .right-col .alignleft p {margin-left: 0;}
	
	.secondary .right-col .alignright p {margin-left: 0;}

.alignright {padding: 0 48px 20px 6px; float: right;}

.accordion a {color:#00688B;}

.accordion a:hover {color: #000;}

.secondary .right-col .nobullets li {list-style: none; margin-left: 0;}

/* =Headings
-------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {font-weight: normal; clear: both; margin: 1em 0; color: #F5F5F5;}

h1 {font-size: 2em;}

h2 {font-size: 1.2em; text-transform: uppercase}

.secondary .right-col .alignleft h1, .secondary .right-col .alignleft h2, .secondary .right-col .alignleft h3, .secondary .right-col .alignleft h4, .secondary .right-col .alignleft h5, .secondary .right-col .alignright h1, .secondary .right-col .alignright h2, .secondary .right-col .alignright h3, .secondary .right-col .alignright h4, .secondary .right-col .alignright h5 {margin-left: 0; padding-left: 0;}

/* =Header
-------------------------------------------------------------- */

#header {height: 134px; width: 923px; margin: 0 auto;}

	#header img {float: left;}
	
	#header a {color: #F5F5F5; text-shadow: 0 0 5px #000;}
	
		#header h1 {margin: 0; padding: 0; width: 100%; height: 100px;}
	
		#header h1 a {display: block; width: 310px; height: 100px;  text-indent: -9999px; float: left; margin: 0; padding: 0;}
	
	#header ul {font-size: 1.1em; list-style: none; float: right; margin: 12px 0 0 0; padding: 0; text-transform: uppercase; line-height: 1em;}
	
	#header ul li {float: left; padding: 0 20px 0 20px; border-left: 1px solid #00a8e8}
	
		.gcp #header ul li {border-color: #f3f270}
	
	#header ul li:first-child {border: 0;}
	
	#header ul li:last-child {padding-right: 0;}

/* =Content
-------------------------------------------------------------- */

#content {width: 998px; overflow: hidden;}

.left-col {float: left;}

#quotes {list-style: none; margin: 0; padding-left: 37px;}

	.gcp #quotes {margin-bottom: 24px;}

#current-campaign {padding: 0; margin-bottom: 12px;}

.video {padding-left: 37px; margin-bottom: 30px;}

	.secondary .right-col .video h3 {padding: 0;}

	.video object {border: 0px;margin-left:4px; -webkit-box-shadow: 0px 0px 5px #000; -moz-box-shadow: 0px 0px 5px #000;}
	
	.right-col .video object {-webkit-box-shadow: none; -moz-box-shadow: none; border: 0;}

.right-col {float: left; margin: 6px 0 0 6px}

.content-nav {width: 584px; list-style: none; padding: 0; margin: 0; -webkit-box-shadow: 0px 0px 5px #000; -moz-box-shadow: 0px 0px 5px #000;}

	.gcp .content-nav {-webkit-box-shadow: 0;}
	
	.content-nav .top {height: 299px;}
	
	.content-nav li a {display: block; height: 100%; width: 100%; text-indent: -9999px;}
	
	.content-nav li.learn a {background: url(images/tws_main_nav.jpg) no-repeat; height: 48px;}
	
		.content-nav li.learn a:hover {background-position: -584px 0;}
	
	.content-nav li.give a {background: url(images/tws_main_nav.jpg) 0 -48px no-repeat; height: 42px;}
	
		.content-nav li.give a:hover {background-position: -584px -48px;}
	
	.content-nav li.involved a {background: url(images/tws_main_nav.jpg) 0 -90px no-repeat; height: 68px;}
	
		.content-nav li.involved a:hover {background-position: -584px -90px;}
	
	.content-nav li.testimonies a {background: url(images/gcp_main_nav.jpg) no-repeat; height: 48px;}
	
		.content-nav li.testimonies a:hover {background-position: -617px 0;}
	
	.content-nav li.resources a {background: url(images/gcp_main_nav.jpg) 0 -48px no-repeat; height: 42px;}
		
		.content-nav li.resources a:hover {background-position: -617px -48px;}
	
	.content-nav li.how a {background: url(images/gcp_main_nav.jpg) 0 -90px no-repeat; height: 68px;}
	
		.content-nav li.how a:hover {background-position: -617px -90px;}

.social-media {margin-top: 12px; float: right; padding-left: 25px; margin-left: 25px; background: url(images/vertical_divide.png) top left no-repeat;}
	
	.social-media h2, .news h2 {margin-top: 8px;}
	
	.social-media ul {list-style: none; margin: 12px 0 0 0; overflow: hidden;}

		.social-media ul li {float: left; padding: 0 12px;}
	
		.social-media ul li:first-child {padding-left: 0;}
	
.news {width: 250px; float: left; text-shadow: 0 0 5px #000; margin-top: 12px; padding-left: 25px; background: url(images/vertical_divide.png) top left no-repeat;}

	.news a {color: #FFF; font-weight: bold;}
	
	.news a:hover {color: #00688B;}
		
.secondary #content {background: #FFF url(images/tws_secondary_bg.jpg) top left repeat-y; width: 923px; margin: 12px auto; border: 4px solid #323232; -webkit-box-shadow: 0px 0px 5px #000; -moz-box-shadow: 0px 0px 5px #000; padding-bottom: 48px;}

	.secondary .gcp #content {background-image: url(images/gcp_secondary_bg.jpg)!important;}

.secondary .left-col {width: 194px;}

	.secondary .left-col h1 {margin: 48px 0 0 24px; color: #F5F5F5; }
	
	.secondary .left-col p {margin: 0 0 1.8em 24px; color: #F5F5F5; }

	.secondary .gcp .left-col h1 {color: #3d3b09; }
	
	.secondary .gcp .left-col p {color: #3d3b09;}

.secondary .submenu {font: 1.4em Georgia, "Times New Roman", Serif;  margin: 0 0 24px 0; width: 194px; list-style: none; background: url(images/tws_horizontal_divider.jpg) top center no-repeat;}

	.secondary .gcp .submenu {color: #3d3b09; background-image: url(images/gcp_horizontal_divider.jpg);}
	
	.secondary .left-col a {color: #FFF;}
	
		.secondary .left-col a:hover {color: #000}
		
		.secondary .gcp .left-col a {color: #3d3b09;}
		
		.secondary .gcp .left-col a:hover {color: #FFF;}
		
	.secondary .submenu li {padding: 18px 0 18px 24px; background: url(images/tws_horizontal_divider.jpg) bottom center no-repeat;}

		.secondary .gcp .submenu li {background-image: url(images/gcp_horizontal_divider.jpg);}

.secondary .right-col ul li {list-style: disc; margin: 0 0 0 54px; font-size: 1.2em; line-height: 1.8em;}	

.secondary .right-col ol li {list-style: decimal; margin: 0 0 0 54px; font-size: 1.2em; line-height: 1.8em;}	

.secondary .right-col {color: #333; width: 705px; margin-top: 84px;}

	.secondary .right-col h3 {padding: 0 48px; color: #323232; margin: 0 0 .9em 0;}

	.secondary .right-col h4 {font-weight: bold; padding: 0 48px; color: #323232; margin: 0 0 .9em 0;}
	
	.secondary .right-col h5 {font-weight: bold; text-transform: uppercase; font-size: .75em; padding: 0 48px; color: #323232; margin: 0 0 .9em 0;}
	
	.secondary .right-col p {margin: 0 0 1.8em 48px; width: 80%;}
	
	.secondary .right-col table {margin: 0  48px 1.8em 18px; width: 600px;}
	
	.secondary .right-col table thead {background: #00577e; color: #FFF;}
	
	.secondary .right-col table .side {background: #c1dbe7}
	
.donate {width: 250px; border: 1px solid #00547b; background: #d6e9f2; padding: 12px;}

.donateinfo {width: 290px;}

.story {margin-bottom: 48px; overflow: hidden;}
	
.gcp_sidebar a {background: url(images/gcp_sidebar.jpg) top left no-repeat; display: block; width: 181px; height: 197px; text-indent: -9999px; margin-left: 6px; margin-top: 24px;}

	.gcp_sidebar a:hover {background-position: 0 -196px;}
	
.code {width: 200px; height: 150px; overflow: auto; margin: 0; padding: 0;}

.secondary .right-col #slider {width: 600px; margin: 0 auto 24px auto; position: relative;}

.secondary .right-col .scroll {height: 461px; width: 600px; overflow: auto; overflow-x: hidden; position: relative; clear: left;}

.secondary .right-col .scrollContainer div.panel {padding: 0; height: 461px; width: 600px;}

.secondary .right-col ul.navigation {list-style: none; height: 39px; margin: 0; padding: 0; background: #ddd746;}

.secondary .right-col ul.navigation li {list-style: none; float: left; margin: 0; width: 120px; height: 39px; text-align: center;}

.secondary .right-col ul.navigation a {color: #3d3b09; text-decoration: none; display: block; height: 27px; width: 100%; background: url(images/howitworks-nav.jpg) 0 0 no-repeat; padding-top: 12px;}

.secondary .right-col ul.navigation a:focus, .secondary .right-col ul.navigation a:hover {background-position: 0 -39px;}

.secondary .right-col ul.navigation a.selected {background-position: 0 -78px;}

.secondary .right-col .hide {display: none;}

#step1 {background: url(images/howitworks-step1.jpg) no-repeat; text-indent: -9999px;}

#step2 {background: url(images/howitworks-step2.jpg) no-repeat; text-indent: -9999px;}

#step3 {background: url(images/howitworks-step3.jpg) no-repeat; text-indent: -9999px;}

#step4 {background: url(images/howitworks-step4.jpg) no-repeat; text-indent: -9999px;}

#step5 {background: url(images/howitworks-step5.jpg) no-repeat; text-indent: -9999px;}

.gcp-donate {margin: 0 0 0 18px;}

/* =Footer
-------------------------------------------------------------- */

#footer {width: 923px; margin: 20px auto; text-align: right; font-size: .75em;}

	#footer a {color: #FFF;}

/* =Forms
-------------------------------------------------------------- */

form {width: 320px; margin-bottom: 8px}

.fmtext, .fmtextarea, input[type="text"] {width: 320px; padding: 6px; font: 1.2em verdana, arial, sans-serif; margin: 0 0 8px 0;}

#donatenow {position: relative; height: 48px;}

	#donatenow input.x_amount {position: absolute; top: 0; left: 0; padding-left: 15px; border:1px solid #bbb;}
	
	#donatenow .dollar {position: absolute; top: 3px; left: 5px;}
	
	#donatenow input.submit {position: absolute; top: 0px; left: 150px; width: 90px; height: 24px; background: #FFF url(images/submit.jpg) top left repeat-x; border:1px solid #bbb;}
	
	#donatenow input.submit:hover {background-position: 0 -24px;}
	
	#donatenow input.submit:active {background-position: 0 -48px;}

	#donatenow label.error {position: absolute; top: -32px; left: 64px; width: 70px; font-size: .8em; padding: 5px; line-height: 1.2em; border: 0;}

.x_amount {width: 120px!important; padding: 6px; font: 1.2em verdana, arial, sans-serif; margin: 0 0 8px 0; }

.secondary .right-col form p {margin-bottom: 8px}

.select {position: relative; height: 48px}

.select select {position: absolute; top: 0; left: 0; width: 85px}

.select input {position: absolute; top: 4px; left: 100px}

.urgent_news{
	background: url(images/urgent-news-bg.jpg) no-repeat;
	width:588px;
	height:223px;
	color:#6ba5cd;
	display:block;
}
.urgent_news_large{
	background: url(images/urgent-news-bg-large.jpg) no-repeat;
	width:914px;
	height:320px;
	color:#6ba5cd;
	display:block;
}
.urgent_news_content{
	width:550px;
	height:190px;
	padding-top:17px;
	margin-left:20px;
	font-weight:bold;
	font-family:arial;
	font-size:15px;
	line-height:16px;
}
.urgent_news_text{
	font-weight:bold;
	font-family:arial;
	font-size:15px;
	line-height:16px;
}
.urgent_link_marquee{
	background:url(images/haiti-tragedy-blank.jpg);
	width:320px;
	height:200px;
	color:#fff;
}

.urgent_link{
	background:url(images/haiti-tragedy.jpg);
	width:320px;
	height:200px;
	color:#fff;
}
.urgent_link:hover{
	color:yellow;	
}
.custom_marquee{
	color:#fff;	
	text-decoration:none;
	font-size:18px;
}
.custom_marquee:hover{
	color:yellow;
}
.monoLink:link, .monoLink:visited{
	display: block;
	color: #000;
	text-decoration: none;
	background-repeat:no-repeat;
	background-position:left top;
}
.monoLink:hover {
	/* background: #c00; */
	background-position: right top;
	color: #fff;
}
.left-manual{
	float:left;
	width:50%;
}
.link_special{
	font-size:17px;
	
}
.error_box{
	width:50%;
	margin-left:auto;
	margin-right:auto;
	color:#b92025;
	padding:10px;
}
.admin_box{
	width:50%;
	margin-left:auto;
	margin-right:auto;
	background-color:#257bae;
	border:1px solid #98c0da;
	padding:10px;
	color:#fff;
}
.admin_box .left_side{
	width:40%;
	overflow:hidden;
	clear:left;
	float:left;
	font-size:14px;
	line-height:28px;
	height:40px;
}
.admin_box .right_side{
	width:60%;
	overflow:hidden;
	clear:right;
	float:right;
	height:40px;
}
.admin_box .password_field{
width: 320px; padding: 6px; font: 1.2em verdana, arial, sans-serif; margin: 0 0 8px 0;
background-color:#FFFFFF;
border:1px solid #BBBBBB;
}

.admin_box:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}