/**
 * Main styles - to be included from site files.
 *
 * Structure and styles for Fast Action sites.
 *
 * @project Fast Action Template
 * @version 0.5
 * @author Democracy Data & Communications
 * @copyright 2009
 */

/**
 * 
 * Reset
 *
 * @section reset
 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;	
	vertical-align: baseline;
}

/** @note remember to define focus styles! */

:focus {
	outline: 0;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

/** @note tables still need 'cellspacing="0"' in the markup */

table {
	border-collapse: separate;
	border-spacing: 0;
}

caption, th, td {
	font-weight: normal;
	text-align: left;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}

/**
 * Structure
 *
 * @section structure
 */



/*/// Background and colors ///*/
html {	background: #007A94; }

body {
	margin: 0 auto;
	position: relative;
	width: 949px;
}
/* Background for header area */
#Header {	background-color: #fff; 
	height: 276px; }
/* Background for menu area.  Suggested that this matches #Header background-color. */
#Menu { background: #000; }
	/* Specify a style for each element in the menu.  Default style is a border on the right side. */
	#Menu ul li { border-left: #6c6c6c 1px solid; }
	/* Remove the left-border for the first item. */
	#Menu #ddcGeneratedMenuListItem1 { border-left:none; }

/* Text color and background for the main content area */
#ContentContainer { color: #000; background: #fff; } 
	/* Text color for content in the left column */
	#LeftColumn { color: #000; }
	/* Text color and background for 'rightrail' area */
	#RightColumn { color: #000; } 
	/* Background for area that the letter is displayed in */
	.Letter { background: #ececec; }

/* Text color and background for footer */
#Footer { color: #000; background: #007A94; } 




#Header {
	width: 949px;
}

	#HeaderText {
		width: 949px;
		background-color: #FFFFFF;		
	}
	
#Menu {
	padding: 10px 20px;
	width: 909px;
}

#ContentContainer {
	position: relative;
	width: 949px;
}

	#LeftColumn {
		
		float: left;
		min-height: 500px;
		padding: 20px;
		position: relative;
		width: 590px;
	}
	
	#RightColumn {
		float: right;
		padding: 20px;
		position: relative;
		width: 270px;
		background-color:#d4d8e1;
	}
	
	#SingleColumn {
		margin: 0 auto;
		width: 900px;
		padding: 20px;
	}

#Footer {
	clear: both;
	padding: 20px;
	width: 900px;
}

/**
 * Menu
 *
 * @section Menu styles
 */

#Menu ul li {
	display: inline;
	font-size: 0.75em; /** @note 16 x .75 = 12 */
	margin-right: 20px;
	padding-right: 20px;
}

#Menu a:hover {
	text-decoration: none;
}

/**
 * Left Column
 *
 * @section left column styles
 */
 
#LeftColumn img {
	margin: 3px 0 10px;
}
 
/**
 * Right Column
 *
 * @section right column styles
 */

.btn-share {
	background: #fff url(../images/bg-btn-share.gif) repeat-x;
	border: #ccc 1px solid;
	display: block;
	padding-top: 16px;
	height: 30px;
	margin-bottom: 10px;
	text-align: center;
	width: 268px;
}
	
	.btn-share:hover {
		background-image: url(../images/bg-btn-share-hov.gif);
		cursor: pointer;
	}
	.btn-share img { vertical-align: top; margin-top:-16px; }

/**
 * Footer
 *
 * @section footer styles
 */
 
#Footer img {
	display: inline;
	float: left;
	margin-right: 10px;
}
#Footer div.left { width: 550px;}

/**
 * Global Styles
 *
 * @section global styles
 */
 
hr {
	background-color: #d1d1d1;
	border: 0;
	color: #d1d1d1;
	height: 1px;
}
 
.left {
	float: left;
}

.right {
	float: right;
}

.center {
	margin: 0 auto;
	text-align: center;
}

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

.clearfix {
	display: inline-block;
}

.btn-submit {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
			border-radius: 5px;
	background: #ce772a url(../images/bg-btn-orange.gif) repeat-x;
	border: #ce772a 1px solid;
	border-radius: 10px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 1em;
	font-weight: bold;
	height: 38px;
	padding: 0 20px;
	vertical-align: middle;
	width: auto;
}

	.btn-submit:hover {
		background-color:#fbb97e;
	}
	
	a.btn-submit {
		line-height: 38px;
		height: 37px;
	}
	
	a.btn-submit:hover {
		text-decoration: none;
	}

ol {
	margin: 20px 0;
}

	 ol li {
		margin: 5px 0;
	}

ul.bullet, ol.number {
	font-size: 0.875em; /** @note 16 x .875 = 14 */
	margin: 10px;
}

	ul.bullet li, ol.number li {
		margin-bottom: 5px;
	}
	
ul.bullet {
	list-style: disc inside;
}

ol.number {
	list-style: decimal inside;
}

.Letter { 
	margin: 20px 0 10px;
	padding: 10px;
}

/**
 * Text Styles
 *
 * @section text styles
 */

p {  }

	#Footer p, #Footer ul {
		font-size: 0.6875em; /** @note 16 x .6875 = 11 */
		line-height: 1.5em;
	}
	#Footer li {
		padding: 0px 10px;
		border-left: 1px solid #000;
	}
	#Footer #ddcGeneratedMenuListItem1 { border-left:none; }
	
	.Letter p {
		margin: 10px 0 0 10px;
	}
	
	p.inline {
		display: inline-block;
	}
	
a {
	text-decoration: none;
}

	a:hover {
		text-decoration: underline;
	}

h1, h2, h3, h4 {
	margin-bottom: 20px;
}
 
h1 {
	font-size: 1.375em; /** @note 16 x 1.375 = 22 */
}
 
h1.home {
	font-size: 35px; /** @note 16 x 1.375 = 22 */
}

h2 {
	font-size: 1.25em; /** @note 16 x 1.25 = 20 */
}

h3 {
	font-size: 1.125em; /** @note 16 x 1.125 = 18 */
}
 
h4 {
	font-size: 1em;
}

.subtext {
	font-size: 0.6875em; /** @note 16 x .6875 = 11 */
}
 
/**
 * Form Styles
 *
 * @section form styles
 */
 
input[type=text] {
	background: #fff url(../images/bg-input.gif) top left repeat-x;
	border: #ccc 1px solid;
	padding: 5px;
	width: 168px;
 }
 
#TellAFriend #Subject { width: 358px; }
 
#LeftColumn input {
	margin: 0 10px 10px 0;
}
#TellAFriend input { width: 358px; }
#TellAFriend #btnSubmit { width: 168px; }

input:focus, textarea:focus {
	background-image: none;
	border-color: #00b0d9;
}
	
input.method, input.method-first {
	vertical-align: baseline;
}
	
input.method {
	margin-left: 20px;
}
	
input#TAFEmailSubject {
	width: 358px;
}


/*/// Form Labels ///*/
label { color: #666; }
	label em { color: #F00; }

 
label {
	display: inline-block;
	font-size: 0.75em;
	font-weight: bold;
	margin-right: 10px;
	position: relative;
	width: 80px;
}
	
	#forChooseLetter { float: left; margin-top: 5px; }
	
	#LeftColumn label, #SingleColumn label {
		margin-bottom: 10px;
		width: auto;
	}
	
	#LeftColumn label {
		display: inline-block;
	}
	
	#SingleColumn label {
		display: inline-block;
	}
	
	#TellAFriend label { 
		width: 65px; text-align: right;
	}
	
	label#PersonalMessage { 
		width: auto;
	}
	
	label.long {
		margin-top: 20px;
		width: 270px;
	}

	label em {  
		font-size: 1.25em;
		position: absolute;  
		left: 80px;  
		top: 1px;
	}
	
	label.long em {
		display: inline-block;
		position: relative;
		left: auto;
		margin: 3px 5px 0 0;
		top: auto;
		vertical-align: middle;
	}

#RightColumn select {
	margin: 3px 0;
	width: 60px;
}

#LeftColumn textarea, #SingleColumn textarea {
	border: #ccc 1px solid;
	font-family: inherit;
	font-size: 0.875em; /** @note 16 x .875 = 14 */
	height: 180px;
	padding-left: 10px;
}
	
	#LeftColumn textarea {
		width: 558px;
	}
	
	#SingleColumn textarea {
		width: 868px;
	}

	#LeftColumn textarea#message, #SingleColumn textarea#message {
		height: 120px;
		width: 588px;
	}
	


/*/// Fieldset & Legend ///*/
legend {
	font-size: 12px;
	font-weight: bold;
	margin: 0 10px;
}
fieldset {
	border: 1px dotted #888;
}

.cm li {
	list-style: disc;
	margin-left: 20px; }
.nodisc li {
	list-style: none;
	margin-left: 0; }