@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

@viewport{
    zoom: 1.0;
    width: extend-to-zoom;
}

@-ms-viewport{
    width: extend-to-zoom;
    zoom: 1.0;
}

* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	color: #505050;
}

h1, h2, h3, h4, h5, h6 {
	color: #505050;
}

a {
	color: #35a4e9;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

input, select, textarea {
	font-family: Arial, Helvetica, sans-serif;
	padding: 5px;
}

input:focus,
select:focus,
textarea:focus {
	box-shadow: 0px 0px 2px #35a4e9;
} 

input:disabled,
select:disabled,
textarea:disabled {
	border-color: #ddd;
}

#clear,
input[type=submit],
input[type=button] {
	color: #fff;
	background-color: #35a4e9;
	border: none;
	border-radius: 4px;
	font-size: 16px;
	transition: all 0.2s;
	cursor:pointer;
	line-height: 20px;
}

#clear {
	font-size: 14px;
	letter-spacing: 0.3px;
}

#clear:hover,
input[type=submit]:hover,
input [type=button]:hover {
	box-shadow: 0px 0px 5px #808285;
}

.btnSave {padding: 10px 20px; }

/* hides save & New button. */
.btnSave:nth-child(2) { 
	display: none;
}

/****************
 *** Wrappers ***
 ****************/

#aspnetForm { /* allows force footer to bottom of shorter pages */
	position: relative;
	min-height: 100%;
	padding-bottom: 60px;	/* space for footer */
	background: #d2d2d2; /* fallback */
	background: -webkit-linear-gradient(#fcfcfc, #d2d2d2) no-repeat; /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#fcfcfc, #d2d2d2) no-repeat; /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#fcfcfc, #d2d2d2) no-repeat; /* For Firefox 3.6 to 15 */
	background: linear-gradient(#fcfcfc, #d2d2d2) no-repeat; /* Standard syntax */
}


#nav,
#sectSurvey,
#sectSurveyComplete
{
	margin-left: auto;
	margin-right: auto;
	max-width: 980px;
}


/**************
 *** Header ***
 **************/

#nav {

}

#menuHeader {
	height: 100px;
}

#menubackground {
	width: 100%;
	height: 100px;
}

#menubackground #logoLeft {
	float: left;
}

#menubackground #logoRight {
	display: none;
	float: right;
}

#menubackground h1 {
	float: right;
	margin: 30px 20px;
	font-size: 32px;
	line-height: 42px;
}

/**************
 *** Footer ***
 **************/

#footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: auto;
	padding: 15px 3%;
	background-color: #333;
}

.footer {
	font-size: small;
	text-align: center;
	color: #fff;
}


/***************
 *** CONTENT ***
 ***************/

#sectSurvey, #sectSurveyComplete {
	margin-top: 10px;
	background-color: white;
	border: 1px solid #cccccc;
	padding: 30px;
	box-shadow: 1px 1px 3px 0px #aaa;
}


/*********************/
/*** Surveys Blurb ***/


#sectSurvey div {
	display: inline-block;
	vertical-align: top;
}

#sectSurvey div {
	width: 55%;
}

#sectSurvey div#availableSurveys {
	width: 35%;
	margin-left: 5%;
	float: right;
}

#sectSurvey p {
	font-size: 18px;
	text-align: justify;
}

#sectSurvey::after {
	display: block;
	content: ' ';
	clear: both;
}

/******************************/
/*** Available Surveys List ***/


#availableSurveys h2 {
	font-weight: normal;
}

#availableSurveys ul {
	margin: 5px 0px;
	padding: 0px 20px;
}

#availableSurveys ul li {
	line-height: 120%;
	margin-bottom: 10px;
}


/*********************/
/*** Survey styles ***/

.tblHeading,
.tblSection,
.tblTestimonial {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 10px;
	margin-bottom: 30px;
}

/*** Heading section styling 
 *******************************/

.tblHeading > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(2),
.tblHeading .field {
	width: 100%;
}

#ctl00_mainContent_txtDate {width: auto;}


/*** Headings
 ****************/

.tblHeading .heading {
	font-size: 30px;
	padding-bottom: 30px;
	text-align: center;
	 	margin-top: 40px;
}

.tblSection .heading,
.tblTestimonial .heading {
	font-size: 24px;
}

/*** Labels
 **************/

.tblHeading .label {
	text-align: right;
	padding-right: 5px;
}

.labelabove,
.labelleft {
	background-color: #e6edf2;
	padding: 10px 2%;
	text-align: left;
}


.labelabove::before { /* adds spacing */
	content: '';
	display: block;
	background: white;
	width: 106%;
	height: 20px;
	position: relative;
	top: -10px;
	left: -3%;
}

.tblSection .labelleft {
	vertical-align: baseline;
	width: 45%;
}


/*** fields
 **************/

.tblSection .field,
.tblSection .fieldddl {
	width: 96%;
	margin: 0 2%;
}

.tblSection table.field {
	width: 98%;
	margin: 0 1%;
}


/*** Testimonial styles
 **************************/

.tblTestimonial #sig {
	width: 100%;
	border: 1px solid #808285;
	height: 200px;
}

.tblTestimonial #sigText {
	color: #CCC;
}


/***************
 *** Special ***
 ***************/

.txt0 {font-size: 10pt;}

.rqd {
	font-size: 14px;
	font-weight: bold;
	color: Red;
}

.txtError {
	color: Red;
	font-size: 10pt;
}

#divError {
	position: absolute;
	left: 250px;
	top: 15px;
	width: auto;
	height: auto;
}

.divError {
	border: 1px solid black;
	background-color: Red;
	font-size: 12pt;
	padding: 5px;
}


/******************
 *** Responsive ***
 ******************/

@media (max-width: 1024px) {

	#nav,
	#sectSurvey,
	#sectSurveyComplete {
		width: 94%;
	}

}


@media (max-width: 640px) {

	#aspnetForm {
		background: #fff; /* removes bg gradient */
	}

	#menuHeader,
	#menubackground {height: auto;}
	#menubackground {text-align: center;}

	#menubackground #logoLeft {
		display: block;
		float:none;
		margin: 0 auto;
	}
	#menubackground #logoRight,
	#menubackground h1 {
		float:none;
	}

	#sectSurvey {
		border:none;
		box-shadow: none;
		padding: 15px;
	}
	.tblHeading .label {width: auto;}
	.tblSection input[type="radio"] + label {font-size: 12px; padding-right: 15px}

}

/****************
 *** Printing ***
 ****************/

@media print {

	#aspnetForm {
		background: #fff; /* removes bg gradient */
		padding-bottom: 0;
	}

	#sectSurvey {
		border:none;
		box-shadow: none;
		padding: 0;
	}

	.btnSave, #clear {
		display: none;
	}

	#footer {
		display: none;
	}

}