/* general styling */
html, body { font-family: 'PT Sans', sans-serif; font-weight: normal; font-size: 1em; line-height: 1em; color: rgb(51,51,51); background: rgb(248,248,248); }
/* selecting/highlighting anything */
::-moz-selection { background: rgba(0,103,127,.99); color:#fff; text-shadow: none; }
::selection { background: rgba(0,103,127,.99); color:#fff; text-shadow: none; }
/* input placeholder */
::-webkit-input-placeholder { color: #c2c2c2; opacity: 1; }
:-moz-placeholder { color: #c2c2c2; opacity: 1; } /* Firefox 18- */
::-moz-placeholder { color: #c2c2c2; opacity: 1; } /* Firefox 19+ */
:-ms-input-placeholder { color: #c2c2c2; opacity: 1; } /* Internet Explorer 10+ */
/* self-clear floats */
.clear:before,
.clear:after { content: " "; display: table; }
.clear:after { clear: both; }

/*
3.375em
1.375em
1.250em
*/



/* header */
header[role="header"] { width: 100%; height: 160px; background: linear-gradient(rgb(0,103,127) 53.125%, rgb(248,248,248) 46.875%); }
header[role="header"] #header-inner { margin: 0 auto; padding: 0; max-width: 960px; }

#logo { float: left; margin: 0 10px; }
#logo img { max-width: 100%; height: auto; }
#aglogo { float: right; margin: 25px 10px; }
#aglogo img {  }

/* main */
main[role="main"] { position: relative; width: 100%; }
main[role="main"] #main-inner { position: relative; margin: 0 auto; padding: 25px 0; max-width: 960px; }
#container { position: relative; margin: 0 10px; }
td {text-align:center}
#main-inner-full{max-width:90%;position: relative;
  margin: 0 auto;
  padding: 25px 0;}
/* form specific styles */
form { position: relative; margin: 0 auto; padding: 0; width: 650px;
	-moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
}
form fieldset { /*position: absolute;*/ margin: 0; padding: 0; border: none; }
form fieldset:not(:first-of-type) { display: none; }
form h1 { margin: 0; padding: 0; font-size: 3.375em; font-weight: 400; line-height: normal; }
form div.fields-inputs,
form div.fields { position: relative; margin-top: 30px; padding: 20px; font-size: 1.375em; background: rgb(255,255,255); border: 1px solid #ccc;
	-moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
	box-sizing: border-box; 
}
form div.fields-inputs:after,
form div.fields-inputs:before,
form div.fields:after, 
form div.fields:before { bottom:100%; left: 40px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;}
form div.fields-inputs:after,
form div.fields:after {
	border-color: rgba(204, 0, 0, 0);
	border-bottom-color: #fff;
	border-width: 15px;
	margin-left: -20px;
}
form div.fields-inputs:before,
form div.fields:before {
	border-color: rgba(0, 0, 0, 0);
	border-bottom-color: #ccc;
	border-width: 16px;
	margin-left: -21px;
}
form div.fields-inputs span,
form div.fields span { display: block; line-height: 2em; }
form div.fields-inputs span label,
form div.fields span label { display: inline-block; cursor: pointer; position: relative; padding-left: 40px; margin-right: 0px; }
form div.fields-inputs span label:before,
form div.fields span label:before { content: ""; display: inline-block; width: 30px; height: 30px; margin-right: 20px; 
	position: absolute; 
	left: 0; 
	top: 7px;
	background-color: rgba(232,232,232, 1.0);
    -webkit-box-shadow: inset 0px 2px 3px 0px rgba(184,184,184, 1.0), 0px 1px 0px 0px rgba(216, 216, 216, 1.0);
	-moz-box-shadow: inset 0px 2px 3px 0px rgba(184,184,184, 1.0), 0px 1px 0px 0px rgba(216, 216, 216, 1.0);
	box-shadow: inset 0px 2px 3px 0px rgba(184,184,184, 1.0), 0px 1px 0px 0px rgba(216, 216, 216, 1.0);
	border-radius: 15px;
}

form div.fields-inputs span input[type=radio],
form div.fields span input[type=radio] { display: none; }

form div.fields-inputs span input[type=radio]:checked + label:before,
form div.fields span input[type=radio]:checked + label:before {
	content: "\2022";
	color: rgb(51,51,51);
	font-size: 70px;
	text-align: center;
	line-height: 22px;
}
form div.fields-inputs span input[type=radio] + label.reset:before,
form div.fields span input[type=radio] + label.reset:before { content: " "; }

form div.error { display: none; margin-bottom: 10px; color: #c00; }
form div.fields-inputs div { margin-bottom: 15px; }
form div.fields-inputs div label { display: inline-block; width: 12%; }
form div.fields-inputs div input { text-indent: 2%; width: 87%; }
form div.fields-inputs div input#firstname { margin-right: 10px; width: 41% }
form div.fields-inputs div input#lastname {margin-left: 10px; width: 42%; }

form textarea { resize: vertical; }

form .inputs { position: relative; margin-top: 20px; text-align: center; }
form .inputs input { border: none; }
form .inputs input.action-button { padding: 10px 40px; color: rgb(255,255,255); font-size: 1.250em; background: rgb(72,183,96);}
form .inputs input.action-button:active,
form .inputs input.action-button:hover { background: rgb(0,103,127); }
form .inputs input.previous { float: left; }
form .inputs input.reset { margin: auto; width: 130px; }
form .inputs input.submit,
form .inputs input.next { float: right; }



/* footer */
footer[role="footer"] { display: none; width: 100%; height: 55px; background: rgb(0,103,127); }
footer[role="footer"] #footer-inner { margin: 0 auto; padding: 0; max-width: 960px; }

#aglogo-footer { float: none; margin: 10px; text-align: center; }


@media only screen and (max-width: 620px) {

	#container { margin: 0 10px; width: auto; }
	form { padding: 10px; width: auto;  }
	
}

@media only screen and (max-width: 500px) {
	
	#logo { float: none; text-align: center; }
	#aglogo { display: none; }
	
	footer[role="footer"] { display: block; }
	
}

@media only screen and (max-width: 340px) {

	header[role="header"] { height: 130px;  }
	
}