﻿/*****************************************/
/*              Setup                    */
/*****************************************/

body, a, p, ul, li, ol, h1, h2, h3, h4, h5, h6, div, blockquote, input, select {
	padding:0; margin:0; font-weight: normal; font-family: "Trebuchet MS", Arial, Sans-Serif;
	}

/*****************************************/
/*              Structure			     */
/*****************************************/

html { height: 100%; }

body {
	height: 100%;
	font-family: "Trebuchet MS", Arial, sans-serif;
	background-color: #6588ad;
	background-image:url('../img/bg-wall.jpg');
	background-repeat:repeat-x;
}

#frame {
	display:block;
	margin: 0px auto 0px auto;
	width: 760px;
	background-image:url('../img/frame-and-shadow.png');
	background-repeat:repeat-y;
}

#internal-frame {
	display:block;
	width:740px;
	margin: 0px auto 0px auto;
}

#header {
	display:block;
	width: 100%;
}

#header a#banner {
	text-decoration: none;
	margin: -1px 0px 0px -1px;
	display:block;
	background-image:url('../img/banner.png');
	height:125px;
	width: 740px;
}

#menu {
	display:block;
	width:739px;
	height:50px;
	background-image:url('../img/menu-bg.png');
}

#main {
	display:block;
	width:738px;
	background-image:url('../img/bg-main-trans-blackwhite.png');
	background-repeat:repeat-y;
}

#sidebar {
	display:block;
	width: 215px;
	float:left;	
}

#content {
	display:block;
	width:523px;
	float:left;
	text-align:center;
}

	#content-text {
		display: block;
		text-align: left;
	}

#footer {
	display:block;
	width:100%;
	text-align:center;
	clear:both;
	overflow:hidden;
	padding: 10px 0px 10px 0px;
}

.clear 			{ clear:both; height:1px; font-size:1px; line-height:1px; overflow:hidden; display:block; } /* Thanks to http://piratemesa.net/ */

/*****************************************/
/*                Menu                   */
/*****************************************/
#menu-buttons {
	display:block;
	width:100%;	
	height:50px;
	overflow:hidden;
	margin-top:-1px;
}

#menu-buttons a 				{ display:block; height:50px; float: left; }
#menu-buttons a:hover			{ background-position: 0px -50px; }
#menu-buttons a.current 		{ background-position: 0px -100px; }
#menu-buttons a.current:hover	{ background-position: 0px -100px; }


a#home							{ background-image:url('../img/menu/home.png'); background-repeat:no-repeat; 
									width: 79px; background-position: 0px 0px; }
									
a#about							{ background-image:url('../img/menu/aboutus.png'); background-repeat:no-repeat; 
									width: 111px; background-position: 0px 0px; }

a#news							{ background-image:url('../img/menu/news.png'); background-repeat:no-repeat; 
									width: 91px; background-position: 0px 0px; }

a#events						{ background-image:url('../img/menu/events.png'); background-repeat:no-repeat; 
									width: 90px; background-position: 0px 0px; }

a#candidates					{ background-image:url('../img/menu/candidates.png'); background-repeat:no-repeat; 
									width: 128px; background-position: 0px 0px; }

a#electeds						{ background-image:url('../img/menu/electedofficials.png'); background-repeat:no-repeat; 
									width: 157px; background-position: 0px 0px; }

a#links							{ background-image:url('../img/menu/links.png'); background-repeat:no-repeat; 
									width: 80px; background-position: 0px 0px; }

/*****************************************/
/*              Action Bar               */
/*****************************************/
#action-bar {
	display:block;
	overflow:hidden;
	width: 200px;
	margin:5px auto 0px auto;	
}

#action-bar a 				{ display:block; height:41px; float: left; margin: 0px auto 0px auto;}
#action-bar a:hover			{ background-position: -201px 0px; }

a#contribute				{ background-image:url('../img/sidebar/side-buttons_01.png'); background-repeat:no-repeat; 
									width: 199px; background-position: 0px 0px; }
																		
a#volunteer					{ background-image:url('../img/sidebar/side-buttons_02.png'); background-repeat:no-repeat; 
									width: 199px; background-position: 0px 0px; }

a#register					{ background-image:url('../img/sidebar/side-buttons_03.png'); background-repeat:no-repeat; 
									width: 199px; background-position: 0px 0px; }

a#findpolling 				{ background-image:url('../img/sidebar/side-buttons_04.png'); background-repeat:no-repeat; 
									width: 199px; background-position: 0px 0px; }

a#becomeleader				{ background-image:url('../img/sidebar/side-buttons_05.png'); background-repeat:no-repeat; 
									width: 199px; background-position: 0px 0px; }

/*****************************************/
/*              Sidebar                  */
/*****************************************/

#email-form 				{ width: 200px; height: 60px; margin: 20px auto 20px auto; }	
#email-form #txtEmail 		{ width: 180px; float:left; margin: 0px 0px 0px 3px; }
#email-form #ddlArea 		{ width: 95px; font-size: 10px; float: left; margin: 5px 0px 0px 3px; height: 22px;}
#email-form #signup-button	{ display: block; float: left; height:29px; width:89px; margin: 2px 0px 0px 5px;
								background-image:url('../img/sign-up-button.png'); background-repeat:no-repeat;}
								
#recent-news				{ display:block; width: 200px; margin: 20px auto 0px 10px; }
#recent-news #title			{ display:block; float: left; height: 16px; width: 190px; border-bottom: 1px #cccccc dotted;
								padding: 0px 0px 5px 0px;
								background-image:url('../img/text-img/recent-news.png'); background-repeat:no-repeat; }
								
#recent-news ul				{ display: block; margin:0px 0px 0px 15px; padding: 5px 0px 0px 0px; clear:both; }
#recent-news li				{ list-style-position: inside; list-style-type:square; color: #cccccc; font-size: 12px; padding: 0px 0px 5px 0px; }
#recent-news li a			{ color: #cccccc; text-decoration:none; }
#recent-news li a:hover		{ color: #ffffff; }

#upcoming-events			{ display:block; width: 200px; margin: 20px auto 0px 10px; padding:0px 0px 20px 0px; }
#upcoming-events #title		{ display:block; float: left; height: 20px; width: 190px; border-bottom: 1px #cccccc dotted;
								padding: 0px 0px 5px 0px; margin-bottom:5px;
								background-image:url('../img/text-img/upcoming-events.png'); background-repeat:no-repeat; }

#upcoming-events .event		{ display: block; width: 190px; clear:both; padding: 5px 0px 15px 0px;}
#upcoming-events .date		{ display: block; float:left; text-align:center; width: 55px; 
								background-color:#333333; color: #cccccc; font-size: 14px; padding: 2px 3px 2px 3px; 
								font-weight:bold; }
#upcoming-events .text		{ display:block; width: 120px; padding:0; margin: 0px 0px 0px 70px; color: #eeeeee; 
								font-size: 11px; font-weight:normal;}			
								
#upcoming-events a			{ text-decoration: none; color: #eeeeee; }													
#upcoming-events a:hover	{ text-decoration: underline; }								
	
/*****************************************/
/*                Forms                  */
/*****************************************/

.textbox { 
	height: 18px;
	font-size: 12px;
	color: #666666;
	background-color:#eeeeee;
	border: 1px #666666 solid;
	padding: 2px 3px 2px 4px;
}


/*****************************************/
/*              Content                  */
/*****************************************/

.feature-photo {
	border: 4px #333333 solid;
	margin-top: 7px;
}

.feature-photo-narrow {
	border: 5px #333333 solid;
	margin-top: 7px;
}

.polling-place-map {
	width: 400px; 
	height: 300px;
	border: 3px solid #666666;
	text-align:center;
	margin: 10px auto 10px auto;
}

/*****************************************/
/*                Events                 */
/*****************************************/

.event-block {
	display:block;
	padding: 5px 0px 5px 0px;
	margin: 5px auto 5px auto;
	width:430px;
	border-bottom: 1px #bbbbbb solid;
}

.event-block .title {
	display:block;
	width: 350px;
	font-size:16px;
	font-weight:bold;
	margin: 0px 10px 0px 40px;
	color: #333333;
}

.event-block .date {
	display:block;
	float: left;
	width: 50px;
	background-color: #333333;
	color: #dddddd;
	padding: 2px 4px 2px 4px;
	margin: 0px 10px 0px 0px;
}

.event-block .description {
	display:block;
	padding: 15px 0px 0px 0px;
}

.event-block p {
	font-size: 12px;
	padding: 0px 30px 10px 30px;
}

/*****************************************/
/*           Profile Blocks              */
/*****************************************/

.profile {
	display: block;
	width: 490px;
	margin: 8px auto 8px auto;
	padding: 5px;
	height: 145px;
}

.picture {
	width: 117px;
	height:146px;
	border: 1px solid #666666;
	padding: 2px;
}

.picture-wide {
	width: 200px;
	height:150px;
	border: 1px solid #666666;
	padding: 2px;
  margin-right: 10px;
}

.blank {
  float:left;
  border:0;
}

.profile p {
	display:block;
	margin: 5px 5px 5px 140px;
	padding:0;
	font-size: 12px;
}

/*****************************************/
/*                News                   */
/*****************************************/

.news-item {
	display: block;
	width: 450px;
	border-bottom: 1px solid #999999;
	padding: 15px 20px 15px 20px;
	margin: 0px auto 0px auto;
}

.news-item .title {
	display:block;
	font-size: 18px;
	font-weight:bold;
	color: #666666;
}

/*****************************************/
/*                Text                   */
/*****************************************/

#footer p {
	font-size: 10px;
	color:#333333;
	padding: 0px 0px 5px 0px;
	text-align:center;
}

h1 						{ font-size: 26px; color: #333333; padding:10px 10px 10px 10px; text-align: left;}
h2 						{ font-size: 20px; color: #555555; padding:15px 10px 10px 10px; text-align: left;}
h4						{ font-size: 15px; font-weight: bold; color: #666666; padding: 5px 10px 5px 10px; text-align:left; }
h6 						{ font-size: 13px; color: #333333; padding:5px 10px 10px 10px; text-align: left;
							line-height: 28px;}
						
p						{ font-size: 13px; color: #111111; padding: 7px 10px 7px 10px; text-align: left; }

p.name					{ font-size: 16px; color: #333333; padding-bottom: 5px; text-align: left; font-weight:bold;}
p.signup				{ font-size: 13px; font-weight: bold; color:#eeeeee; padding: 15px 10px 0px 10px; }
p.alert					{ font-size: 14px; color:#CC3300; }
p.right					{ text-align: right; }
.centered-feature		{ text-align:center; padding: 5px 0px 5px 0px;}
p.small					{ font-size: 11px; }

#content-text a			{ color: #171c5d; text-decoration: none; }
#content-text a:hover	{ background-color: #CCCCCC; }
#content-text p.legal	{ font-size: 11px; }
#content-text li		{ font-size: 13px; list-style-type: square; color: #333333; padding: 2px 0px 2px 0px; }
#content-text ul		{ margin: 5px 10px 5px 40px; }


table					{ width: 500px; margin: 0px auto 0px auto;  }
td 						{ font-size: 11px; color:#333333; white-space:nowrap; padding: 2px 0px 2px 0px; border-bottom: 1px solid #cccccc;}
td b					{ color: #444444; }

/*****************************************/
/*                Form                   */
/*****************************************/

.field-form				{ display: block; padding: 5px 40px 5px 40px; }
.field-row				{ display:block; height: 20px; width: inherit; padding: 5px 0px 5px 0px; }
.label					{ display:block; float:left; font-size: 13px; color:#333333; width: 85px; height: 20px;}
.button-row				{ text-align: center; padding: 15px 0px 10px 0px; }
.txtbox					{ display: block; float:left; margin: 0px 0px 0px 60px; height: 18px; }
.dropdown				{ height: auto; }

.short					{ width: 100px; }
.medium					{ width: 150px; }
.long					{ width: 200px; }

.tall					{ height: 60px; }

.explanation			{ font-size: 11px; line-height: 13px; }