@import 'reset.css';

/**!
* Waterwall
*
* Main stylesheet for waterwall.org. Combines layout/color/typography in one
* stylesheet. See iefix.css for IE (6/7) specific styles.
*
* @project		waterwall.org
* @version		1.0 ( 04-09 )
* @package		Main Stylesheet
* @author		Tony Dewan ( info{at}waterwall.org )
* @media		Screen
* @copyright	2009 Chris Basham, Tony Dewan
*
* @colordef		#3285b4; Dark Blue (bg)
* @colordef		#b0daff; Light Blue
*
*/

/* ---( globals )------------------------------- */ /** @section Globals */

body {
	background: #3285b4 url('images/bg.jpg') top left repeat-x;
	background: #0b1a23 url('images/bg.png') top left repeat-x;
	background: #0b1a23 url('images/bg.png') 0 -9em repeat-x;
	font: 1.0em/1.4 Helvetica, Arial, sans-serif;
	color: #91a2ac;}

#container{
	padding: 2em 1em;}

h1{
	margin: 4em 0 6em;
	font: 0.95em/1.0 "Gotham", Helvetica, Arial, sans-serif;
	text-decoration: none;
	text-align: center;}
	
h1 span{
	margin: -12px 0 0 12px;}

/*	
h1 a{
	font-size: 3.75em;
	text-decoration: none;
	color: #3285b4;
	font-weight: bold;}
	
h1 a{
	display: block;
	margin: 0 auto;
	background: transparent url('images/logo.gif') top right no-repeat;
	text-indent: -999em;
	width: 358px;
	height: 84px;}


h1 a:hover{
	opacity: 0.5;}
*/

h1 span{
	color: #daf0fd;
	text-transform: uppercase;
	display: block;
	font: 1.0em/1.0 "Helvetica", "Arial", Sans-Serif;
	font-weight: bold;}
	
div.alert{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1.9em;
	padding: 0.75em 0 0;
	color: #91a2ac;
	background: #273d49;}

div.alert a{	
	color: #bed4e1;}
	
div.alert div.vevent{
	width: 64em;
	font-size: 0.875em;
	margin: 0 auto;}

div.vevent p{
	float: left;
	font-size: 1.125em;
	font-weight: bold;}

div.vevent a.summary{
	margin-left: 5em;}

h2{
	text-transform: uppercase;
	font-weight: bold;
	font: 1.125em/1.0 "Gotham", "Helvetica", "Arial", Sans-Serif;
	color: #daf0fd;
	margin-bottom: 0.625em;}

em{
	font-style: italic;}
	
a.ics{
	display: block;
	margin-left: 64em;
	background: transparent url('images/icon.cal.png') top left no-repeat;
	width: 16px;
	height: 16px;
	margin-top: -1.25em;
	text-indent: -999em;}
	

/* ---( content )------------------------------- */ /** @section Content */

#content{
	width: 60em;
	margin: 2em auto;}
	
#content a{
	color: #e73333;
	font-weight: bold;}

#content a:hover{
	opacity: 0.5;}


#content p{
	font-size: 0.75em;
	line-height: 1.8;
	margin-bottom: 1em;}

#content p.caption{
	font-size: 0.6em;
	font-style: italic;
	text-align: center;
	z-index: 100;}


p#intro{
	width: 35em;
	margin: 0 auto 4em;
	text-align: center;
	color: #daf0fd;
	font-size: 1.2em;}

div.section{
	margin: 0 3em 3em 0;
	width: 27em;
	float: left;}
	
#description{
	margin-top: 5em;}

#diagram{
	height: 26em;
	margin: 0 0 3em 0;}
	
#statement{
	margin-top: -4.5em;}

#diagram img{
	position: absolute;
	margin-top: 0;
	margin-left: 0;}

#diagram img.over{
	display: none;}
	
#diagram p.caption{
	margin-top: 42em;}
	
#contact{
	margin-top: -14em;}
	
#contact div.email{
	width: 60%;
	margin: 0 auto;
	padding: 0.25em 0;
	text-align: center;
	background-color: #3b5664;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;}

#contact form{
	text-align: left;
	display: none;
	margin: 1.5em 0 0 2em;}

#contact form legend{
	display: none;}

#contact form li{
	clear: both;}
	
#contact form button{
	margin-left: 24em;}

label{
	font-size: 0.8em;
	color: #0b1a23;
	display: block;
	float: left;
	width: 7em;
	text-transform: uppercase;
	font-weight: bold;}

input, textarea{
	color: #daf0fd;
	background-color: #0b1a23;
	font: 1.0em/1.1 Helvetica, Arial, sans-serif;
	width: 14em;
	border: 0;
	padding: 0.25em;
	margin: 0 0 0.75em;}

textarea{
	overflow: hidden;}

input.error{
	color: #e73333;
	background-color: #ffc8c8;}

#content div.email a{
	display: block;
	color: #0b1a23;
	text-decoration: none;}
	
#content div.email a span{
	display: block;}
	
.vid{
	margin: 0 auto 3em auto;
	width: 40em;}

/* ---( footer )------------------------------- */ /** @section Footer */

#footer{
	padding-top: 2em;
	clear: both;
	text-align: center;
	color: #91a2ac;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 0.75em;}

#footer a{
	color: #e73333;}

#footer a:hover{
	opacity: 0.5;}

/* ---( aural styles )------------------------- */ /** @section Aural Styling */

acronym 		{speak : normal;}
abbr.initialism	{speak : spell-out;}
abbr.truncation	{ speak : normal;}