/**********************************************************************************************

	CSS on Sails
	Title: FOC Recess
	Author: XHTMLized (http://www.xhtmlized.com/)
	Date: August 2009

***********************************************************************************************

	1. BASE
			1.1 Reset
			1.2 Accessibility Navigation & Hide
			1.3 Clearfix
			1.4 Default Styles

	2. LAYOUT
			2.1 Structure
			2.2 Header
			2.3 Navigation
			2.4 Content
			2.5 Sidebar
			2.6 Footer

***********************************************************************************************/


/* 1. BASE
-----------------------------------------------------------------------------------------------
===============================================================================================*/


/* 1.1 Reset
-----------------------------------------------------------------------------------------------*/

	html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, samp, small, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
	q { quotes: none; }
	q:before, q:after { content: ""; content: none; }
	a, ins, del { text-decoration: none; }
	table { border-collapse: collapse; border-spacing: 0; }
	th, td { vertical-align: top; }
	th { text-align: left; }

/* 1.2 Accessibility Navigation & Hide
-----------------------------------------------------------------------------------------------*/

	ol#accessibility-nav, 
	.hide 
	{ position: absolute; top: -999em; left: -999em; height: 1px; width: 1px; }


/* 1.3 Clearfix
-----------------------------------------------------------------------------------------------*/

	.town-hall-intro ul:after,
	.comment p:after,
	.discussion-board:after,
	#navigation ul:after,
	#footer li:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }


/* 1.4 Default Styles
-----------------------------------------------------------------------------------------------*/

	body { background: #fff; color: #333; font: 62.5%/1.3 Georgia, "Times New Roman", Times, serif; text-align: center; padding-top: 20px; }
	hr { display: none; }
	strong { font-weight: bold; }
	em { font-style: italic; }
	del { text-decoration: line-through; }
	th { font-weight: normal; }
	address, cite, dfn { font-style: normal; }
	li { list-style: none; }
	abbr, acronym { border-bottom: 1px dotted #999; cursor: help; }
	input, textarea, select { font-family: "Arial", "Helvetica", sans-serif; }
	a, a:visited { color: #2e72a8; text-decoration: none; }
	a:hover, a:active { color: #2e72a8; text-decoration: underline; }
	

/* 2. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/


/* 2.1 Structure
-----------------------------------------------------------------------------------------------*/

	.container { width: 1012px; position: relative; margin: 0 auto; padding: 0 0 10px 0; text-align: left; font-size: 1.2em; color: #003366; }
	
	#header { width: 992px; height: 101px; margin: 0 0 20px 0; padding: 15px 0 0 20px; background: #2f73a8 url(images/ui_layout.png) no-repeat; color: #fff; }
	#content { margin: 5px 0 0 0; width: 944px; position: relative; overflow: hidden; padding: 33px 36px 10px 30px; background: url(images/bg_content.png) repeat-y;  }
	#footer { width: 1012px; overflow: hidden; padding: 20px 0 0; background: url(images/ui_layout.png) no-repeat 0 -156px; }
	
	
/* 2.2 Header
-----------------------------------------------------------------------------------------------*/

	/* logo */
	#header .site-name,
	#header .site-name span { display: block; overflow: hidden; width: 344px; height: 82px; }
	#header .site-name { position: relative;  }
	#header .site-name span { background: url(images/ui_layout.png) no-repeat -20px -15px; position: absolute; top: 0; left: 0; z-index: 10; }
	#header a.site-name span { cursor: pointer; }
	

/* 2.3 Navigation
-----------------------------------------------------------------------------------------------*/


	#navigation { position: absolute; top: 35px; right: 85px; z-index: 999; font-size: 1.4em; }
	
/*
DROPDOWN IS INCLUDED IN dropdown.css
*/

/* 2.4 Content
-----------------------------------------------------------------------------------------------*/
	
	#content h1 { position: relative; z-index: 999; }
	#content .tc { position: absolute; left: 0; top: 0; z-index: 1; width: 1012px; height: 40px; background: url(images/ui_layout.png) no-repeat 0 -116px; }

	.primary-content,
	.secondary-content { position: relative; z-index: 998; }
	.primary-content { float: left; width: 640px; }
	.single-column { width:923px;}
	.secondary-content { float: right; width: 300px; }
	
	.secondary-content li {
		margin-left:20px;
		list-style-type:disc;
	}
	
	/* town hall intro */
	.town-hall-intro { width: 640px; margin-bottom: 10px; }
	.town-hall-intro h2 { margin: 0 0 20px 0; padding: 12px 32px; font-size: 1.3em; font-weight: normal; background: url(images/bg_town-hall-intro.png) repeat-x 0 100%; }
	
	/* inside content */
	.inside { margin: 0 0 20px 0; padding: 12px 15px 12px 15px; font-size: 1.3em; font-weight: normal; /* background: url(images/bg_town-hall-intro.png) repeat-x 0 100%; */ color:#000000; }
	.inside h1, .inside .hed3, .inside .hed  {font-size:2em; margin: 0 0 5px 0; color:#2e72a8;}
	.inside .hed4 {font-size:1.7em; margin: 0 0 5px 0; color:#005696;}
	.inside p {margin:0 0 10px 0;}
	.inside ul, .inside ol {padding:10px 0px 10px 15px;margin-left:20px; }
	.inside ul li {list-style-type:disc;}
	.inside ol li {list-style-type:decimal;}
	
	.body {margin:10px 0 10px 0;}
	.body td {padding-bottom:10px;}
	
	/* town hall intro: states*/
	.states { width: 608px; margin: 0 0 0 32px; }
	.states li { display: inline; float: left; border-left: 1px solid #2e72a8; margin: 0 6px 8px 0; padding: 0 0 0 6px; }
	.states .row { margin-left: 0; clear: left; border-left: none; }
	
	/* discussion board */
	.discussion-board { margin: 0 5px 0 25px; }
	.discussion-board 	h2 { width: 565px; margin: 0 0 16px 0; padding: 3px 8px 3px 42px; font-size: 1.8em; font-weight: normal; color: #fff; background: #003366 url(images/ico_discussion-board.png) no-repeat 8px 50%; }
	.discussion-board a.view-all { display: inline; float: right; margin-right: 12px; color: #ff2c00; font-size: .85em; text-transform: uppercase; text-decoration: underline; }
	.discussion-board a.view-all:hover { text-decoration: none; }
	
	.question, 
	.discussion { margin: 0 0 0 20px; }
	
	.question { width: 450px; margin-bottom: 10px; }
	.question h3 {font-size: 1.45em; }
	.question p { font-size: 1.25em; }
	
	/* discussion board: discussion */
	.discussion { margin-bottom: 2px; }
	.discussion li { width: 540px; margin: 0 12px 0 0; padding: 8px 12px 8px 26px; border-top: 1px solid #003366; font-family: Arial, Helvetica, sans-serif; background: url(images/bullet_discussion.png) no-repeat 8px 12px; }
	.discussion .first { border: none; }
	.discussion .metadata { margin-left: 4px; font-size: .9em; }
	
	/* discussion board: submit entry */
	.comment { /*add by JCL to fix spacing issue */position:relative;top:-25px;/*end add by jcl */margin: 0 12px 16px 25px; padding: 16px 12px 12px; background-color: #003366; color: #fff; }
	.comment h3 { margin: 0 0 18px 20px; font-weight: normal; font-size: 1.8em; font-style: italic; }
	.comment p { width: 532px; padding: 8px; background-color: #fff; }
	.comment textarea { display: block; width: 530px; height: 138px; margin: 0 0 10px 0; padding: 0; border: none; font-size: 1.2em; background-color: #fff; }
	.comment .button { float: right; border: none; padding: 4px 8px; font-family: Georgia, "Times New Roman", Times, serif; color: #fff; background: #0a3b6c; cursor: pointer; }
	.comment .white-button { position:relative;left:20px;border: none; padding: 4px 8px; font-family: Georgia, "Times New Roman", Times, serif; color: #0a3b6c; background: #fff; cursor: pointer; }
	
	/* video */
	.video { width: 300px; margin-bottom: 6px; }
	.video .callout { margin-bottom: 12px; border: 5px solid #003366; color: #fff; background: #08396b url(images/bg_video-callout.png) repeat-x 0 0; }
	.video .callout a { display: block; padding: 2px 12px; font-size: 1.3em; text-align: right; text-transform: uppercase; text-decoration: underline; color: #fff; background: #7c96b0 url(images/bg_video-callout-link.png) repeat-x 0 100%; }
	.video .callout a:hover { text-decoration: none; }
	
	/* video: callout */
	.video .callout h2,
	.video .callout h2 span { display: block; overflow: hidden; width: 278px; height: 54px; }
	.video .callout h2 { position: relative; left: 7px; top: 9px; margin-bottom: 9px; }
	.video .callout h2 span { background: url(images/text_video-callout.jpg) no-repeat; position: absolute; top: 0; left: 0; z-index: 10; }
	.video .callout p { margin: 0 10px 0 28px; padding-bottom: 8px; font: .85em Arial, Helvetica, sans-serif; }
	
	/* callouts */
	.callout li { margin-top: 6px; text-align: center; }
	.callout li img { vertical-align: bottom; }
	
	/* take action call out */
	.takeaction {
		float: left;
		display: inline;
		width: 300px;
		background: #fff url(/includes/css/images/menu-bg.gif) repeat-x 0 bottom;
	}
	
	.takeaction h2 {
		background: url(/includes/css/images/menu-h2.gif) repeat-x 0 0;
		height: 44px;
		line-height: 44px;
		font-size: 23px;
		font-weight: bold;
		text-transform: uppercase;
		color: #fff;
		text-align: center;	
	}
	
	.takeaction ul { list-style: none outside; }
	.takeaction li { border-bottom: 1px solid #929192; }
	
	.takeaction li a {
		display: block;
		font-size: 17px;
		line-height: 20px;
		color: #123d66;
		text-transform: capitalize;
		text-decoration: none;
		height: 46px;
		background-repeat: no-repeat;
		background-position: 0 0;
		padding-left: 90px;
		padding-top: 6px;
	}
	
	.takeaction li a:hover, .takeaction .nav-active { background-position: 0 bottom; color: #a22838; }
	
	.takeaction li a span { color: #627483; }
	
	.takeaction .join { background-image:  url(/includes/css/images/join-bg.png); }
	.takeaction .sign { background-image: url(/includes/css/images/sign-bg.png); }
	.takeaction .survey { background-image: url(/includes/css/images/survey-bg.png); }
	.takeaction .spread { background-image: url(/includes/css/images/spread-bg.png); }
	.takeaction .contact { background-image: url(/includes/css/images/contact-bg.png); }
	.takeaction .share { background-image: url(/includes/css/images/share-bg.png); }
	
	.menu-last { border: 0 !important; }

	

/* 2.5 Sidebar
-----------------------------------------------------------------------------------------------*/


/* 2.6 Footer
-----------------------------------------------------------------------------------------------*/

	.navigation { display: inline; clear: both; float: left; width: 908px; margin: 0 10px; padding: 0 0 39px 0; text-align: center; background: url(images/ui_layout.png) no-repeat -1012px 100%; }
	.navigation ul { float: left; position: relative; left: 50%; margin: 0 auto; padding: 0; font: .85em Arial, Helvetica, sans-serif; color: #545454; }
	.navigation li { float: left; position: relative; right: 50%; padding: 0 3px 0 5px; background: url(images/bullet_footerlinks.png) no-repeat 0 50%; }
	#footer a,
	#footer .copyright { float: left; padding: 8px 0 8px 0; color: #545454; background-image: none; }
	#footer .facebook { position: absolute; right: 80px; font: 1em Georgia, "Times New Roman", Times, serif; background: url(/images/Socialicons_01.jpg) no-repeat 100% 50%; }
	#footer .facebook a { display: block; margin: 0; padding: 8px 75px 8px 0; color: #4b6ea8;  }
	#footer .twitter { position: absolute; right: 80px; font: 1em Georgia, "Times New Roman", Times, serif; background: url(/images/Socialicons_02.jpg) no-repeat 100% 50%; }
	#footer .twitter a { display: block; margin: 0; padding: 8px 75px 8px 0; color: #4b6ea8;  }

	#footer a.fb {background: url(/images/Socialicons_02.jpg) no-repeat 0 0; width: 44px; height: 37px; display: block; margin-left: 0px; margin-top: -5px;font-size: 0; line-height: 0; text-indent: -4000px; float:left}
	#footer a.tw {background: url(/images/Socialicons_01.jpg) no-repeat 0 0; width: 44px; height: 37px; display: block; margin-left: 0px; margin-top: -5px;font-size: 0; line-height: 0; text-indent: -4000px;float:left}


#townhall_listing table {font-size: 14px; font-weight: normal; color:#000000;}
#townhall_listing h3 {font-size: 16px; line-height:normal; padding-bottom:5px; font-weight: bold; color:#2e72a8;}
#townhall_listing li {padding-bottom:10px;font-size: 14px; font-weight: normal; color:#000000;}

#townhall_listing table td {width:50%;}

/* New Footer */
.footer-img {position:absolute;background: url(/images/focFooter_bg.jpg) no-repeat 0 0; width: 1056px; height: 156px;left:-23px;}

p.copy {font-size: 10px; color: #545454;padding-top: 18px;}
.social-network-menu {margin-top:45px;margin-left:320px;}
.bottom-menu {font-family: arial, sans-serif; padding-top: 0px;margin-left:300px;}
.bottom-menu ul {list-style-type: none; padding-top: 15px;}
.bottom-menu ul li {float: left; display: inline;}
.bottom-menu ul li a {color: #545454; font-size: 10px;}
.bottom-menu ul li span {padding-left: 2px; padding-right: 2px; position: relative; bottom: 3px;}
a.fb {background: url(/images/Socialicons_02.jpg) no-repeat 0 0; width: 44px; height: 37px; display: block; margin-left: 0px; margin-top: -10px;}
a.tw {background: url(/images/Socialicons_01.jpg) no-repeat 0 0; width: 44px; height: 37px; display: block; margin-left: 0px; margin-top: -10px;}
/* End New Footer */



.single-column-inside {
	margin: 0;
	padding: 20px;
	width: 900px;
}

.single-column-inside h1, .single-column-inside .hed3 {
	margin: 0;
	padding: 0;
	font-size: 30px;
	font-weight: normal;
	font-family: Georgia;
	color: #2f73a8;
}

.single-column-inside h2, .single-column-inside .hed4 {
	margin: 5px 0;
	padding: 0;
	font-size: 18px;
	font-weight: bold;
	font-family: Georgia;
	color: #000;
}

.single-left {
	margin: 10px 20px 0 20px;
	padding: 0;
	width: 420px;
	float: left;
	display:inline;
	text-align: center;
}

.single-left form {
	margin: 0 auto;
	width: 360px;
}

.single-left input.election {
	margin: 5px 0;
	padding: 0 0 0 10px;
	width: 345px;
	height: 36px;
	border: 1px solid #e4e4e4;
	background: #cccccc;
	float: left;
	display: inline;
	font-family: Georgia;
	font-size: 22px;
	line-height: 36px;
	color: #000;
}

.single-left input.election-go {
	margin: 5px 0;
	padding: 0;
	float: right;
	display: block;
	width: 101px;
	height: 36px;
	background: url("/images/go-btn.png") top left no-repeat;
	border: none;
	cursor: pointer;
}

.single-right {
	margin: 10px 0 0 0;
	padding: 0;
	width: 420px;
	float: left;
	display:inline;
	text-align: center;
	border-left: #CCC 1px solid;
}

.election-countdown {
	margin: 10px auto;
	padding: 0;
	display: block;
	width: 420px;
	height: 111px;
	background: url("/images/countdown-election.png") top left no-repeat;
	position: relative;
	color: #333;
	font-size: 55px;
	font-weight: bold;
	font-family: Arial;
	letter-spacing: 12px;
}

.election-countdown .days {
	margin: 0;
	padding: 0;
	position: absolute;
	left: 50px;
	top: 30px;
}

.election-countdown .hours {
	margin: 0;
	padding: 0;
	position: absolute;
	left: 202px;
	top: 30px;
}

.election-countdown .minutes {
	margin: 0;
	padding: 0;
	position: absolute;
	left: 313px;
	top: 30px;
}

.cleaner { clear: both; }