/*
 *	Use the section codes below to Ctrl+F jump to their respective sections.
 *
 *	CODE	SECTION
 *	=================================
 *	MODLC	Modular layout classes
 *	GLOBL	Globals
 *	RGTRL	Right rail
 *	CUCLS	Custom classes
 *	SEC01	Landing Page
 *	SEC02	Confirmation Page
 *	SEC03	Contact Us
 *
 */



@import url('reset.css');

#__asptrace { display: none; }


/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}


body {
	background: #FAF4E6 url(../img/bg-img.jpg) no-repeat center top;
}

/* Modular layout classes [MODLC]
   ============================================================================================== */

.one-column {
	clear: both;
	margin-bottom: 25px;
	width: 100%;
}
.two-columns, .three-columns, .column-rail, aside {
	float: left;
	margin: 0 30px 25px 0;
}
.column-rail, aside {
	margin-right: 0;
}
.two-columns {
	width: 610px;
}
	.two-columns.equal-width {
		width: 455px;
	}
	.two-columns.equal-width.with-border, .two-columns.equal-width.with-border:first-child {
		width: 52%;
	}
	.two-columns.with-border:first-child {
		border-right: 1px solid #fff;
		margin: 0 0 25px;
		padding: 20px 21px 0 0;
		width: 60%;
	}
	.two-columns.with-border.column-rail {
		border: 0;
		border-left: 4px solid #a21d2a;
		padding: 20px 0 0 14px;
	}
	
	#Confirmation .two-columns.with-border.column-rail {
		padding: 20px 0 0 21px;
	}
	
.three-columns {
	width: 290px;
}
.column-rail, aside {
	width: 40%; /* duplicated to cascade - do not move */
}
.content-top {
	margin: 0 0 20px;
}
.content-bottom {
	clear: both;
	margin: 20px 0 0;
}



/* Globals [GLOBL]
   ============================================================================================== */

/* Form elements */

fieldset div {
	clear: both;
	margin: 5px 0;
}
label {
	color: #174560;
	font-weight: bold;
	line-height: 2em;
}
input[type="text"], select, textarea {
	background: #fff;
	border: 1px solid #adadad;
	padding: 5px;
	resize: vertical;
	color: #595959;
}
input[type="text"]:focus, select:focus, textarea:focus {
	border-color: #3c7a9f;
}
input[type="submit"] {
	background:url(../img/global-btn.png) no-repeat;
	height:44px;
	width:auto;
	cursor: pointer;
	color: #fff;
	font-family: 'Roboto Slab', serif;
	text-transform:uppercase;
	font-size:1.2em;
	border:0;
}
select {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
}

/* List elements */

/* List elements */

/* 
 * removing the list-style-image - because alignment of that image
 * is NOT cross-browser compatible.
 * Instead, allowing the marker to be the same color as the text content
 * and setting the marker to square
 */
ul {
    list-style: square outside; 
    margin-left: 17px;
}
ol {
	list-style: decimal outside none;
	margin-left: 17px;
}

/* Structural elements */

#PageWrapper {
}
	
	/* Header elements */
	
	header {
		position: relative; /* required for z-index to work */
		z-index: 200;
	}
		#HotBar, #Identity, nav ul {
			margin: 0 auto;
			width: 803px;
		}
		#HotBar {
			height: 37px;
			
			color: #90d1f7;
			font-size: 10.5px;
			text-transform: uppercase;
		}
			#HotBar p {
				float: right;
				margin: 12px 0 0;
			}
			#HotBar p:first-child {
				float: left;
			}
			#HotBar a {
				color: #fa8537;
				font-weight: bold;
			}
				#HotBar span a img {
					margin: 0 0 0 4px;
					vertical-align: middle;
				}
					#HotBar span:hover a img {
						filter: alpha(opacity=50);
						opacity: 0.5;
					}
					#HotBar span:hover a:hover img {
						filter: alpha(opacity=100);
						opacity: 1;
					}
		#Identity {
			height: 116px;
			position: relative;
			background:#384640;
			
			box-shadow: 10px 0px 0 0 #888888;
		}
			#Identity a {
				background: url(../img/img-identity.png) no-repeat;
				height: 162px;
				width: 780px;
				display: block;
				position: absolute;
				top: 6px;
				left: 11px;
				text-indent: -9999px;
			}
		nav {
			background: #174560 url(../img/bg-nav-bevel.png) repeat-x center 28px;
			height: 55px;
		}
			nav ul {
				list-style: none;
				overflow: hidden; /* uses this instead of clearfix because we're using Menu tag control */
			}
				nav ul li {
					border-right: 1px solid #3e647b;
					float: left;
				}
				nav > ul > li:first-child {
					border-left: 1px solid #133950;
				}
				nav ul li:hover {
					background-color: #c2dbe7;
				}
					nav ul li a {
						border-right: 1px solid #133950;
						display: block;
						
						color: #fff;
						font-size: 14px;
						font-weight: normal;
						line-height: 55px;
					}
					nav ul li a:hover {
						text-decoration: none;
					}
					nav > ul > li:first-child > a {
						border-left: 1px solid #3e647b;
					}
					nav ul li:hover a {
						color: #174560;
					}
					nav ul li ul {
						background: #c2dbe7 url(../img/bg-grad-nav-hover.png) repeat-x top;
						height: auto;
						left: -9999em;
						position: absolute;
					}
					nav ul li:hover ul {
						left: auto;
					}
						nav ul li ul li {
							border: 0;
						}
							nav ul li ul li a {
								border: 0;
							}
	
	/* Body elememnts */
	
	#BodyWrapper {
		margin: 0 auto;
		padding: 61px 0 0 2.1%;
		position: relative; /* required for z-index to work */
		max-width: 803px;
		width: 100%;
		z-index: 100;
		background:#ffffff;
		
		box-shadow: 10px 0px 0 0 #888888;
		
		opacity:0.92;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=92)";
	}

/* Footer elements */

#FooterWrapper {
	clear: both;
	background:#384640;
	font-size: 10.5px;
	text-transform: uppercase;
	margin: 0 auto 2%;
    width: 803px;
	
	box-shadow: 9px -1px 0 1px #888888;
}
	footer {
		margin: 20px auto 40px;
		width: 803px;
		color:#fff;
		box-shadow: 10px 50px 0 0 #888888;
	}
		#Copyright {
			float: left;
			margin-left:5%;
		}
		#MoreLinks {
			float: right;
			margin-right:5%;
		}
		#MoreLinks a {
			color:#fff;
		}
			#MoreLinks ul {
				list-style: none;
				margin: 0;
			}
				#MoreLinks ul li {
					border-left: 1px solid #999;
					float: left;
					padding: 0 5px;
					
					line-height: normal;
				}
				#MoreLinks ul li:first-child {
					border: 0;
				}
					#MoreLinks ul li a {
						font-weight: normal;
					}



/* Right rail [RGTRL]
   ============================================================================================== */

aside > ul {
	list-style: none;
	margin: 0;
}
	aside ul li {
		border-top: 1px solid #c8c8c8;
		padding: 10px 0;
	}
	aside ul li:first-child {
		border: 0;
		padding-top: 0;
	}
aside p {
	margin: 7px 0 5px 0;
}
aside img {
	border: 6px solid #d4d8de;
	margin-top: 7px;
}



/* Custom classes [CUCLS]
   ============================================================================================== */

.dotted-border {
	border-top: 1px dotted #ccc;
}
.dotted-border:first-child {
	border: 0;
}
.form-step {
	background-color: #1a6691;
	border: 3px solid #9db9c9;
	-moz-border-radius: 15px;
	border-radius: 15px;
	display: block;
	float: left;
	width: 23px;
	
	color: #fff;
	text-align: center;
	
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
}
	.form-step + h4 {
		float: left;
		margin: 4px 0 10px 8px;
	}
		.form-step + h4 + * {
			clear: both;
		}
.hot-topic {
	color: #fa8537;
	font-size: 14px;
	font-weight: bold;
}
	.hot-topic span {
		border: 3px solid #fa8537;
		-moz-border-radius: 15px;
		border-radius: 15px;
		cursor: default;
		display: block;
		float: left;
		margin: 0 7px 0 0;
		width: 23px;
		text-align: center;
		
		font-family: Arial, Helvetica, sans-serif;
		font-size:24px;
		font-weight:700;
	}
.loading-bar {
	background: url(../img/ani-loading-bar.gif) no-repeat center;
	height: 13px;
}
.more-arrow-blue {
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 8px solid #143d55;
	float: right;
	height: 0;
	margin: 3px 0 0 3px;
	width: 0;
}



/* Section 1 - Landing Page [SEC01]
   ============================================================================================== */

#Home fieldset div {
	position: relative;
}
	#Home fieldset div label {
		width: 85px;
	}
	#Home fieldset div label.placeholder {
		left: 92px !important;
	}
	#Home fieldset div label.error {
		clear: both;
		float: none !important;																		/* override float styles in jqtransform.css */
		margin-left: 85px;
		width: auto;
	}
	#Home fieldset div input[type="text"] {
		float: left;
		font-size: 0.7em;
		height: 24px;
		width: 182px;
	}
	#Home fieldset div input[type="submit"] {
		margin: 11px 0 0 60px;
	}
	#Home fieldset div select {
		float: left;
		font-size: 0.7em;
		height: 24px;
		width: 182px;
		padding:0;
	}
	
	#Home fieldset h3, #Home fieldset p {
		width: 92%;
	}
	
	#Home .letter-section {
		margin: 15px 0 20px;
		padding: 0 0 18px;
	}
		#Home .letter {
			background-color: #fff;
			margin: 15px auto 0;
			/*width: 930px;*/
		}
			#Home .letter-tophalf {
			}
				#Home .letter-top {
					margin: 0 0 30px;
				}
				#Home textarea {
					border: 1px solid #ababaa;
					background: none;
					width: 99%;
					resize:none;
					
					min-height: 530px;
					
					font-family:Arial, Helvetica, sans-serif;
					font-style:italic;
					font-size:12px;
					color:#0050a2;
					
					margin:10px 0 10px 0;
					
					padding:20px;
				}
			#Home .letter-bottomhalf {
			}

.social-media {
	margin-left: 60px;
	margin-top: 16px;
	width: 100%;
}
.social-media a:first-child {
	margin-right:10px;
}
.below-submit {
	margin-top:56px;
}
.below-submit p {
	margin: 0 0 10px 0; 
	line-height: 1.5em; 
}
.below-submit ul {
	margin-left:71px;
	list-style:disc;
	color: #29abe2;
    font-size: 8px;
}
.below-submit ul li a {
	font-family:Arial, Helvetica, sans-serif;
	color:#29abe2;
	font-size:12px;
	text-decoration:underline; 
}
section#cb {
	margin-left:39px;
	margin-top:30px;
	margin-bottom:30px;
}
label[for="checkbx"] {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:400;
	color:#384640;
	margin-left:20px;
	width:70%!important;
	line-height:15px;
}

img.hatt {
	float:right;
}

/* Section 2 - Confirmation Page [SEC02]
   ============================================================================================== */

#Confirmation label {
	display: block;
	margin-top: 3px;
}
#Confirmation label:first-child {
	margin: 0;
}
#Confirmation label.error {
	clear: both;
	margin: 0;
}
#Confirmation input[type="text"] {
	float: left;
	margin: 0 5px 0 0;
	width: 130px;
	height:21px;
	padding:0;
}
#Confirmation #YourName, #Confirmation #YourEmail, #Confirmation #Subject {
	clear: both;
	width: 320px;
	padding:0;
}
#Confirmation textarea {
	height: 96px;
	width: 320px;
	resize:none;
}
#Confirmation input[type="submit"] {
	margin: 15px 0 0;
}
#Confirmation ul {
	margin: 15px 0 25px 17px;
}



/* THANK YOU
   ============================================================================================== */
   .one-column {
		min-height: 500px;
	}
   
   
   
   
/* Section 3 - Contact Us [SEC03]
   ============================================================================================== */

#ContactUs fieldset label {
	float: left;
	width: 80px;
}
#ContactUs label.error {
	margin-left: 80px;
	width: 58%;
}
#ContactUs fieldset input[type="text"], #ContactUs fieldset textarea {
	float: left;
	width: 200px;
}
#ContactUs fieldset #Subject, #ContactUs fieldset textarea {
	width: 320px;
}
#ContactUs fieldset textarea {
	height: 200px;
}



/* Clearfix - http://css-tricks.com/snippets/css/clear-fix/
   ============================================================================================== */

.group:before, .group:after {
	content: "";
	display: table;
}
.group:after {
	clear: both;
}
.group {
	zoom: 1;																						/* for IE 6/7 (trigger hasLayout) */
}



/* Placeholder plugin
   ============================================================================================== */

.placeholder, :-moz-placeholder {
	cursor: text;
	
	color: #999 !important;
	font-style: italic !important;
	font-weight: normal !important;
}



/* Validation plugin
   ============================================================================================== */

.error {
	display: block;
}
label.error, p.error {
	color: #f00;
}
label.error {
	font-weight: normal;																			/* override bold weight when used on labels */
}



/* Modal plugin
   ============================================================================================== */

#simplemodal-overlay {
	background: #000;
}
#simplemodal-container {
	background: #fff;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding: 20px;
}
	.modalCloseImg {
		background: url(../img/btn-modal-close.png) no-repeat;
		cursor: pointer;
		display: inline;
		height: 29px;
		position: absolute;
		right: -12px;
		top: -12px;
		width: 25px;
		z-index: 2000;
	}



/* Additional Information Component
   ============================================================================================== */
	 
#AdditionalInfo .GeneralInformationContainer, #AdditionalInfo .LegislatorPanel {
    margin: 0 0 30px;
}
#AdditionalInfo .FormRowContainer {
    margin: 5px 0;
    overflow: hidden;
}
#AdditionalInfo .jqTransformCheckboxWrapper {
    margin-right: 6px;
}
#AdditionalInfo .LabelAndRadioButtonContainer {
    display: block;
    overflow: hidden;
}
#AdditionalInfo .Label_X_RequiredMark {
    display: block;
    overflow: hidden;
}
#AdditionalInfo .Label_X_RequiredMark .RequiredMark {
    display: none;
}
#AdditionalInfo #AdditionalInfo_GeneralInformationContainer .Label_X_RequiredMark {
    float: left;
    width: 85px;
}
#AdditionalInfo .RequiredValidationWarningSpan {
	color: red;
	clear: both !important;
}
#AdditionalInfo input + .RequiredValidationWarningSpan {
	margin-left: 10px;
}

/* Recaptcha Customization */
#recaptcha_response_field_placeholder {
    top: 3px !important;
}







/* RESPONSIVE
   ============================================================================================== */

@media only screen and (max-width:768px) {
	#BodyWrapper {
		box-shadow:none;
	}
	
	#Identity {
		box-shadow:none;
		width: 100%;
	}
	
	#Identity a {
		background: url("../img/img-identity-tablet.png") no-repeat;
		width: 700px;
		height: 146px;
	}
	
	#FooterWrapper {
		box-shadow:none;
		margin: 0 auto 0%;
		width:100%;
	}
	
	footer {
		box-shadow:none;
		width:100%;
	}
	
	.social-media {
		width:auto;
	}

}
   
@media only screen and (max-width:744px) {
	#BodyWrapper {
		padding:61px 2.1% 0 2.1%;
	}
	
	/*HOME*/
	.two-columns.with-border:first-child {
		width:100%;
		min-height:100%!important;
	}
	
	#Home fieldset div select {
		width:99%;
	}

	#Home fieldset div input[type="text"] {
		width:99%;
	}
	
	.two-columns.with-border:first-child, .two-columns.with-border.column-rail {
		padding:0;
	}
	
	/*CONFIRMATION*/
	
	.two-columns.equal-width.with-border, .two-columns.equal-width.with-border:first-child {
		width:100%;
		min-height:100%!important;
	}
	
	#Confirmation .two-columns.with-border.column-rail {
		padding:0;
	}
	
	.two-columns.with-border.column-rail {
		border-width:0;
	}
	
	.column-rail, aside {
		width:100%;
	}
	
	#Confirmation input[type="text"] {
		width:49%;
	}
	
	#Confirmation #YourName, #Confirmation #YourEmail, #Confirmation #Subject {
		width:99%;
	}
	
	#Confirmation textarea {
		width:99%;
	}
	
	#Identity {
		height:255px;
		width: 100%;
	}
	
	#Identity a {
		background: url("../img/img-identity-mobile.png") no-repeat;
		width: 320px;
		height: 258px;
		margin: 0 auto;
		left: 0;
		top: 0;
		position: relative;
	}
	
	/*CONTACT US*/
	#ContactUs fieldset #Subject, #ContactUs fieldset textarea {
		width: 100%;
	}

}

@media only screen and (max-width:480px) {
	#BodyWrapper {
		padding: 20px 2.1% 0;
	}
	
	#Confirmation input[type="text"] {
		margin-bottom:4%;
		width:100%;
	}
	
	#Home textarea {
		min-height:242px;
		width:100%;
	}
	
	#Home fieldset div label.error {
		margin-left: 0;
		width: 100%;
	}
	
	.one-column {
		min-height: 500px;
	}
	
	
	#Copyright {
		clear: both;
		float: none;
		text-align: center;
	}
	
	#MoreLinks {
		float: none;
		text-align: center;
		width: 100%;
		margin-top:5%;
	}

}