/* ==================================================================
	File:     root/static/css/main.css
	Project:  Get A Vote
	Purpose:  CSS file for public-facing pages
	
	If you change the name of this file, you will also need to update 
	the configuration for CKEditor in root/static/ckeditor/config.js
	
	Author:   Helen Lambert <helen@shinyideas.co.uk>
	Copyright (c) 2009-2010 Shiny Ideas - www.shinyideas.co.uk
   ================================================================== */


/* =========== ( General ) ========== */


body {
	color:				#000000;
	background:			url('/static/images/paper-bg.gif') center top repeat;
	font-family:		Arial, Helvetica, sans-serif;
	font-size:			16px;
	width:				100%;
	height:				100%;
	padding:			0;
	margin:				0;
}

#container {
	width:				998px;
	margin:				0 auto;
	font-size:			0.9em;
	position:			relative;
	padding:			0;
}

p {
	text-align:			justify;
}

a {
	color:				#f22488;
	text-decoration:	none;
}

a:hover {	
	text-decoration:	underline;
}

a:visited {	
	color:				#555555;
	text-decoration:	underline;
}

a:active {	
	color:				#a8e1f2;
	text-decoration:	none;
}

.clear {
	clear:				both;
}


/* =========== ( Header ) ========== */


#header {
	height:				135px;
	width:				998px;
	margin:				0;
	padding:			0;
}

h1#logo {
	background:			url('/static/images/get-a-vote-trans.png') left top no-repeat;
	margin:				0;
	float:				left;
	overflow:			hidden;
	height:				0px;
	width:				451px;
	padding:			83px 0 0 0;
}

h2#strapline {
	font-size:			48px;
	color:				#959595;
	float:				left;
	font-weight:		normal;
	padding:			0;	
	margin:				0;
	position:			relative;
	top:				28px;
	left:				45px;
}


/* =========== ( Menu ) ========== */

#menu {
	width:				998px;
	background:			#000000;
	margin:				0;
	padding:			0;
	position:			relative;
	top:				10px;
	clear:				both;
}

#menu ul {
	padding:			0 0 0 10px;
	height:				30px;
	margin:				0;
}

#menu li {
	display: 			block;
	float: 				left;
	height:				31px;
	width:				104px;
	padding:			11px 0 0 0px;
	margin:				0 20px 0 0;
	color:				#f1f1f1;
	text-transform:		uppercase;
	position:			relative;
	top:				-5px;
	text-align:			center;
	font-weight:		bold;
	font-size:			1.2em;
}

#menu li:hover, #menu li:hover a {
	color:				#a8e1f2;
}

#menu a {
	color:				#f1f1f1;
	text-decoration:	none;
}

#menu li.current {
	background:			url('/static/images/menu-current-trans.png') left top no-repeat;
	color:				#000000;
}

#menu li.current a {
	color:				#000000;
}

#menu p {
	margin:				0;
	padding:			0;
}


/* =========== ( Search ) ========== */

#search {
	width:				245px;
	height:				30px;
	float:				right;
	margin:				0;
	padding:			0;
	z-index:			100;
}

.searchbox {
	background:			url('/static/images/searchbox.png') left top no-repeat;
	width:				192px;
	height:				29px;
	padding:			1px 0 0 8px;
	margin:				0;
	border:				0;
}

.submit {
	height:				17px;
	width:				31px;
	padding:			0;
	margin:				0;
	position:			relative;
	top:				4px;
}


/* =========== ( Homepage ) ========== */

.message {
	color:				#000000;
	background:			#88dd88;
	padding:			5px;
}

.error {
	color:				#000000;
	background:			#dd8888;
	padding:			5px;
}

img {
	border:				0;
}


/* =========== ( Direct Democracy ) ========== */

#direct-democracy {
	width:				960px;
	height:				410px;
	margin:				0 auto;
	padding:			5px 0 0 0;
}

#direct-democracy p {
	width:				440px;
	margin:				0;
	padding:			0 0 10px 0;
	float:				left;
	font-size:			1em;
	text-align:			justify;
	line-height:		1.5em;
}

h3.pink40 {
	font-size:			2.8em;
	color:				#f22488;
	font-weight:		normal;
}

#what-is-direct-democracy {
	float:				left;
	margin:				0;
	padding:			15px 0 0 0;
	background:			url('/static/images/pink-line-trans.png') top left no-repeat;
	height:				55px;
}

#direct-democracy h4 {
	float:				left;
	width:				460px;
	font-size:			1.8em;
	color:				#555555;
	font-weight:		normal;
	margin:				0;
	padding:			0;
	line-height:		1.5em;
}

#clark-vote1 {
	width:				480px;
	height:				410px;
	float:				right;
	margin:				0 0 0 20px;
	padding:			0;
}



/* =========== ( How Will It Work ) ========== */

#how-will-it-work {
	clear:				both;
	width:				998px;
	height:				142px;
	margin:				15px auto 0 auto;
	padding:			0;	
	background:			url('/static/images/how-will-it-work-bg-trans.png') top left no-repeat;	
}

#how-will-it-work h3 {
	width:				199px;
	height:				0px;
	padding:			93px 0 0 0;
	margin:				23px 0 0 30px;
	overflow:			hidden;	
	background:			url('/static/images/how-will-it-work.png') top left no-repeat;	
	float:				left;
}

#how-will-it-work p {
	float:				left;
	width:				710px;
	margin:				23px 0 0 30px;
	font-size:			1.2em;
}

#how-will-it-work h4 {
	float:				left;
	color:				#f22488;
	font-size:			1.5em;
	font-weight:		normal;
	margin:				7px 0 0 30px;
}
	

/* =========== ( Exceptions ) ========== */


#exceptions-and-social-media {
	clear:				both;
	width:				978px;
	height:				250px;
	margin:				15px auto 20px auto;
	padding:			0;	
}


#exceptions {
	width:				715px;
	height:				230px;
	padding:			10px;
	float:				left;
	overflow:			hidden;
	background:			url('/static/images/translucent-trans.png') top left no-repeat;
	color:				#ffffff;
}

#exceptions h2 {
	text-transform:		uppercase;
	font-size:			2.3em;
	font-weight:		normal;
	margin:				0;
	padding:			0;
	width:				225px;
	float:				left;
}

#exceptions p.top {
	float:				left;
	width:				475px;
	font-size:			0.9em;
	padding:			4px 0 0 15px;
	margin:				0;
}

#exceptions ul {
	list-style:			none;
	clear:				left;
	margin:				0;
	padding:			12px 0 0 0;
}

#exceptions li {
	display:			block;
	width:				225px;
	height:				135px;
	float:				left;
	padding:			6px 0 0 0;
	font-size:			0.9em;
}

#one {
	background:			url('/static/images/exception1-trans.png') top left no-repeat;
	margin:				0 15px 0 0;
} 

#two {
	background:			url('/static/images/exception2-trans.png') top left no-repeat;
	margin:				0 15px 0 0;
} 

#three {
	background:			url('/static/images/exception3-trans.png') top left no-repeat;
	margin:				0;
}

.blue-digit {
	font-size:			2em;
	color:				#afe3f3;
}

.exception-heading {
	font-size:			1.1em;
	font-weight:		bold;
	color:				#000000;
	margin:				0;
	padding:			0;
}

#exceptions p {
	font-size:			0.9em;
	margin:				0;
	padding:			10px 0 0 0;
	line-height:		1.4em;
}

#exceptions p.bottom {
	color:				#afe3f3;
	font-size:			1.1em;
	line-height:		1.2em;
	padding:			0;
	margin:				0;
}


/* =========== ( Social Media ) ========== */


#social-media {
	width:				220px;
	height:				235px;
	padding:			0 0 0 20px;
	float:				left;
	overflow:			hidden;
}

#social-media h2 {
	width:				140px;
	font-size:			1.5em;
	line-height:		1em;
	color:				#464646;
	text-decoration:	none;
	font-weight:		normal;
}

#social-media a {
	color:				#464646;
	text-decoration:	none;
}

#social-media a:hover {
	color:				#464646;
	text-decoration:	underline;
}

#social-media h2 .bigger {
	font-size:			1.5em;
	position:			relative;
	top:				1px;
}

#facebook {
	width:				225px;
	height:				80px;
	padding:			10px 0 0 85px;
	background: 		url('/static/images/facebook-trans.png') left top no-repeat;
}

#facebook a {
	display:			block;
}

#twitter {
	width:				225px;
	height:				90px;
	padding:			10px 0 0 85px;
	background: 		url('/static/images/twitter-trans.png') left top no-repeat;
}

#twitter a {
	display:			block;
}


/* =========== ( Subpages ) ========== */

.content {
	padding:			10px;
	min-height:			400px;
}

h3#pinkheading {
	font-size:			2.8em;
	color:				#f22488;
	font-weight:		normal;
	float:				left;
	margin:				0 0 0 10px;
	padding:			15px 0 5px 0;
	background:			url('/static/images/pink-line-trans.png') top left no-repeat;
	overflow:			hidden;
}

.vote-image {
	float:				right;
	width:				240px;
	padding:			0 0 20px 20px;
}


/* =========== ( Footer ) ========== */


#footer {
	background:			url('/static/images/footer-trans.png') center top no-repeat;
	width:				990px;
	margin:				0 auto;
	padding:   			10px 0 10px 0;
}

#logo-footer {
	float:				left;
	width:				256px;
	height:				0px;
	padding:			57px 0 0 0;
	background:			url('/static/images/get-a-vote-small-trans.png') left top no-repeat;
	overflow:			hidden;
	margin:				0;
}

#footer p {
	color:				#555555;
	font-size:			0.9em;
	clear:				left;
	float:				left;
/*	width:				235px;		uncomment when more than one link in footer menu */
	margin:				0;
	padding:			8px 0 20px 10px;
}

#footer ul {
	list-style:			none;
	font-size:			0.9em;
	color:				#555555;
	float:				left;
	margin:				0;
	padding:			8px 0 0 0;
}

#footer li {
	display:			block;
	float:				left;
	margin:				0;
	height:				1.2em;
	padding:			0 15px 0 15px;
	border-right:		1px dashed #555555;
}

#footer li.no-border {
	border:				0;
}

#footer li a {
	color:				#000000;
	text-decoration:	none;
}

#footer li a:hover {
	text-decoration:	underline;
}

#footer li a:visited {
	color:				#555555;
	text-decoration:	underline;
}

#donate {
	float:				right;
	margin:				0;
	padding:			0;
	width:				255px;
	color:				#f22488;
	font-size:			1.1em;
	position:			relative;
	top:				-70px;
}

#donate-form {
	margin:				0;
	padding:			0 7px 0 0;
	float:				left;
	width:				116px;
	height:				150px;
}

#donate p {
	margin:				0;
	padding:			0;
}

#donate h2 {
	font-size:			1.2em;
	line-height:		1.2em;
	color:				#000000;
	float:				left;
	width:				130px;
	font-weight:		normal;
	margin:				0;
	padding:			20px 0 10px 0;
}

#donate h2 a {
	color:				#000000;
	text-decoration:	none;
}