/*  
Site Name: AA Forms
Site URI: ---
Description: CSS Base for AA Forms projects
Version: 1.0

UPDATE INFO ---------------------------------------

Revision number: 1.0
Last updated: 
Last update made by: 

CONVENTIONS ---------------------------------------

hyphenate class / id names - #my-id-name, .my-class-name
class / id names to start with lower case letter (ID's reserved for .net use will start with Upper case letter)

CONTENTS ------------------------------------------

*01: Reset
*02: Util classes & Phrase Elements
*03: Default Styles (Typography, colour)
*04: Structure (layout, size, positioning)
*05: Core form styles
*06: Buttons
*07: Mobile

*/

/* *01: Reset -----------------------------------------------------------------------------------------------------------------*/

body {color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
img{display:block;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:"'";}
abbr,acronym {border:0;font-variant:normal;}
sup,sub {line-height:-1px;vertical-align: text-top;}
sub {vertical-align:text-bottom;}
input, textarea, select{font-family:inherit;font-size:inherit;font-weight:inherit;}

/* *02: Util Classes ----------------------------------------------------------------------------------------------------------*/

.center 					{ text-align: center; }
.right 						{ text-align: right !important; }
.left 						{ text-align: left !important; }
.small 						{ font-size: 9px !important;}
#ie6 .small, #ie7 .small	{ font-size: 10px !important;}
.float-right 				{ float: right; }
.float-left 				{ float: left;}
.clear 						{ clear: both; }
.uppercase 					{ text-transform: uppercase; }
.nowrap 					{ white-space: nowrap; }
.offscreen					{ position: absolute; left: -9999px; top: -9999px; }
.hidden						{ display: none; }
.self-clear 				{ zoom: 1; }
.self-clear:after 			{ content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.no-right-margin			{ margin-right: 0 !important; }
.no-left-margin				{ margin-left: 0 !important; }
.no-top-margin				{ margin-top: 0 !important; }
.no-bottom-margin			{ margin-bottom: 0 !important; }
.hot						{ cursor:pointer; }

/* *02a: Phrase Elements -------------------- */
strong, .bold 				{ font-weight: bold !important; /*letter-spacing:1px;*/ }
em, .italic					{ font-style: italic; }
code						{ font-family: Courier, serif; color: #999; font-size: 0.5em; }
cite						{ font-style: italic; }
abbr, acronym				{ border-bottom: 1px dotted; cursor: help; }
q							{ color: #fff; }
blockquote					{ color: #fff; font-size: 1.1em; margin: 0 0 0.5em 0; }

/* *03: Default Styles --------------------------------------------------------------------------------------------------------*/

body {
	font: 62.5%/1.6 Arial, Helvetica, sans-serif; /* set font size to 10px (a nice round number) - 1.4 line height */
	background: #fff;
	color: #333;
}

img { behavior: url(../scripts/iepngfix.htc) }

h1, h2, h3, h4, h5, h6 { font-family: Arial, Helvetica, sans-serif; letter-spacing: 0px; margin-bottom: 0; color: #333; font-weight: bold; }

h1 					{ font-size: 2.4em; margin: 34px 0 38px 0; background: url(../Images/bg-aa-logo.gif) no-repeat; height: 42px; padding-left: 80px; }
h2 					{ font-size: 1.8em; margin: 0 0 0 0; }
#aa-form h2 		{ padding: 0 30px 20px 30px; }
#aa-form h2.raised	{ margin-top: -10px; }
#ie7 #aa-form h2.raised,
#ie6 #aa-form h2.raised	{ margin-top: 0; }
h3 					{ font-size: 1.4em; margin: 0 0 0 0; }
.copy h3			{ padding: 20px 0 10px 30px; }

p { font-size: 12px; line-height: 1.4em; margin: 15px 0 0 0; }

a 					{ color: #003399; text-decoration: none; }
a:hover, a:active 	{ text-decoration: underline; color: #000; }
a:visited			{ color: #4671c7; }

ul li 								{ list-style-type: none; }
ol li 								{ list-style-type: decimal; }

/* *04: Structure -------------------------------------------------------------------------------------------------------------*/

/* step nav =============== */
form {
	width: 960px;
	margin: auto auto;
}

#form-nav { 
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

#form-nav li { 
	float: left; 
	list-style-type: none; 
	font-size: 1.5em; font-weight: bold; text-shadow: rgba(255, 255, 255, 0.8) 1px 1px 0px; line-height: 1.2em; 
	height: 56px; 
	padding: 19px 0px 0px 25px;
	position: relative;
	border-left: 1px solid #d7d7d7; border-right: 1px solid #fff; border-bottom: 1px solid #d7d7d7;
	background: #f3f3f3; color: #919191;
}
#form-nav li span	{ font-size: 0.8em; font-weight: normal; display: block; margin-top: 0px; }

#form-nav li.first 			{ border-left: none; -webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; border-top-left-radius: 5px; }
#form-nav li.last 			{ border-right: none; -webkit-border-top-right-radius: 5px; -moz-border-radius-topright: 5px; border-top-right-radius: 5px; }
#form-nav li.pre-current	{ border-right: 1px solid #f0efef; }
#form-nav li.post-current	{ border-left: 1px solid #f0efef; }
#form-nav li.current		{ 
	background: url(../Images/bg-nav-current.png) no-repeat top left;
	height: 70px; border: 0;
	color: #303030;
	z-index: 99;
	text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px;
}

#form-nav li.current span.drop 			{ display: block; width: 5px; height: 84px; background: url(../Images/bg-edge-drop.png) no-repeat; position: absolute; top: 0; }
#ie6 #form-nav li.current span.drop		{ display: none; }
#form-nav li.current span.l				{ left: -5px; }
#form-nav li.current span.r				{ right: -5px; background-position: -15px 0; }

#form-nav li.complete			{ background: #f3f3f3 url(../Images/bg-completed-step.png) no-repeat 20px 24px; padding-left: 60px; color: #303030; }
#form-nav li.complete a:hover	{ color: #919191; text-shadow: rgba(255, 255, 255, 0.8) 1px 1px 0px; }

#form-nav li a 					{ color: #303030; text-decoration: none; }
#form-nav li a:hover			{ color: #303030; }


/* page summary =========== */
#page-summary				{ border-bottom: 1px solid #d7d7d7; padding: 0px 30px 30px 30px; margin: 30px 0px 0px 0px; color: #333; overflow: hidden; }
#page-summary.no-border		{ border: none; padding-bottom: 0; }
#page-summary ul 			{ margin-top: 5px; }
#page-summary li 			{ list-style-type: disc; margin-left: 15px; font-size: 1.3em; line-height: 1.4em; }


/* *05: Core form styles ----------------------------------------------------------------------------------------*/

fieldset									{ padding-top: 35px; }
#aa-form {}
#aa-form li 								{ position: relative; margin-bottom: 20px; zoom: 1; }
#aa-form li.short							{ margin-bottom: 0px; }
#aa-form li:after 							{ content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#aa-form label 								{ width: 300px; float: left; margin-right: 30px; text-align: right; font-size: 14px; font-weight: bold; padding: 5px 0 0 10px; line-height: 1.2em; }
/*#aa-form .ind-mandatory						{ color: #666666; font-size: 2.5em; line-height: 0.8em; position: relative; top: 8px; float: left; margin: 0 0 0 5px; }*/
#aa-form .ind-mandatory						{ color: #666666; font-size: 2.5em; line-height: 0.8em; position: absolute; top: 8px; left: 630px; }
#aa-form li.invalid	.ind-mandatory			{ top: 27px; }
#aa-form li.invalid							{ background: #ffed9f url(../Images/bg-invalid-item.gif) repeat-y top right; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 20px 0px 20px 0px; }
#aa-form .validation-message				{ display: none; float: right; padding: 5px 12px 0px 12px; font-size: 14px; font-weight: bold; line-height: 1.2em; width: 294px; }
#aa-form li.invalid .validation-message		{ display: block; }
#aa-form li.form-error,
#aa-form li.form-informational				{ background: #ffd520; padding: 20px 30px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
#aa-form li.form-error p,
#aa-form li.form-informational p 			{ margin-top: 0; }
#aa-form li.form-informational				{ background: #e4e4e4; }
#aa-form li.rqd-fields-msg					{ color: #666; font-size: 11px; padding-left: 340px; }
#aa-form li.calculation 					{ background: #fff7cd; padding: 20px 30px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
#aa-form li.calculation label				{ width: 270px; }
#aa-form li.calculation span,

#aa-form input,
#aa-form select,
#aa-form textarea							{ 
	border: 1px solid #ABA798;
	background: #ffed9f;
	font-size: 13px;
	padding: 4px 3px;
	-moz-border-radius: 5px; -webkit-border-radius: 5px;
	width: 272px;
	float: left;
}
#aa-form select								{ width: 280px; }
#aa-form textarea							{  }
#aa-form input[type=text]:focus,
#aa-form select:focus,
#aa-form textarea:focus						{ background: #fff; -moz-box-shadow: 0px 0px 5px rgba(0,0,0, 0.2); -webkit-box-shadow: 0px 0px 5px rgba(0,0,0, 0.2); }

#aa-form .default-value						{ color: #666; }
#aa-form .completed							{ background: #fff; }

#aa-form li.invalid input,
#aa-form li.invalid select,
#aa-form li.invalid textarea				{ background: #fff; }

#aa-form .radio-checkbox .item-holder					{ float: left; }
#aa-form .radio-checkbox .item-holder label 			{ width: auto; float: none; padding: 0 0 0 5px; margin: 0 20px 0 0; font-size: 12px; }
#aa-form .radio-checkbox .item-holder input				{ width: auto; float: none; border: none; background: none; margin: 3px 0 0 0; padding: 0; position: relative; top: 3px; }
#ie6 #aa-form .radio-checkbox .item-holder input,
#ie7 #aa-form .radio-checkbox .item-holder input		{ margin: 5px 0 0 0; }

#aa-form .membership-no input				{ width: 57px; margin-right: 7px; text-align: center; }
#aa-form .membership-no input.done			{ background: #fff; }

#aa-form .date select						{ width: 89px; margin-right: 7px; }
#aa-form .date select.done					{ background: #fff; }

#aa-form .phone select						{ width: 70px; margin-right: 7px; }
#aa-form .phone input 						{ width: 196px; }

#aa-form .radio-group ul 					{ float: left; width: 280px; }
#aa-form .radio-group li 					{ margin: 0; padding: 5px; }
#aa-form .radio-group li input				{ width: auto; border: none; background: none; padding: 0; cursor: pointer; }
#aa-form .radio-group li label 				{ width: auto; padding: 0 0 0 10px; cursor: pointer; font-size: 12px; font-weight: normal; }
#aa-form .radio-group li.active				{ 
	background: #e4e4e4; 
	-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
}

#aa-form .in-form-search input				{ }
#aa-form .in-form-search .search			{ 
	background: url(../Images/btn-in-form-search.png) no-repeat;
	width: 28px; height: 26px;
	position: absolute; top: 0; right: 340px;
	border: none;
	cursor: pointer;
	-moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px;
}
#aa-form .in-form-search .search:hover,
#aa-form .in-form-search .search-hover		{ background-position: 0 -27px; }

#aa-form .form-footer						{ background: #f3f3f3; border-top: 1px solid #d7d7d7; padding: 30px; margin: 40px 0 30px 0; 
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}

.form-details									{ background: #fff7cd; overflow: hidden; }
.form-details dt, .form-details dd				{ float: left; font-size: 14px; border-top: 1px solid #fff; line-height: 1.2em; }
.form-details dt								{ padding: 10px 0px 10px 30px; width: 280px; font-weight: bold; }
.form-details dt p								{ font-weight: normal; }
.form-details dd								{ padding: 10px 30px 10px 30px; width: 590px; }
.form-details dt.first, .form-details dd.first	{ padding-top: 20px; }
.form-details dt.last, .form-details dd.last	{ padding-bottom: 15px; }
.form-details .alt								{ background: #fffbe4; }

#aa-form.invoice 								{ background: #fff7cd; overflow: hidden; }
#aa-form.invoice li 							{ border-top: 1px solid #fff; font-size: 12px; margin: 0; padding: 15px 30px 15px 30px; }
#aa-form.invoice li.alt							{ background: #fffbe4; }
#aa-form.invoice label							{ padding: 0; margin: 0; width: 700px; text-align: left; }
#aa-form.invoice label span						{ display: block; font-weight: normal; font-size: 11px; padding-top: 5px; }

#aa-form.invoice .on-right						{ width: 100px; float: right; display: block; line-height: 12px; margin: 0; position: relative; }
#aa-form.invoice .credit						{ font-size: 11px; color: #666; padding-left: 5px; }
#aa-form .radio-checkbox .on-right label 		{ font-weight: normal; margin: 0; line-height: 12px; top: -3px; position: relative; }
#aa-form .radio-checkbox .on-right label .credit { display: inline; }
#aa-form .radio-checkbox .on-right input		{ margin: 0; top: 0; }
#aa-form.invoice .radio-checkbox .item-holder	{ position: relative; left: -24px; }
#aa-form.invoice .subtotal,
#aa-form.invoice .total							{ border-top: 1px solid #d7d7d7; }
#aa-form.invoice .subtotal label,
#aa-form.invoice .total label 					{ text-align: right; }
#aa-form.invoice .subtotal span,
#aa-form.invoice .total span 					{ font-weight: bold; font-size: 14px; }
#aa-form.invoice li.total 						{ background: #ffef9b; }
#aa-form.invoice .total label,
#aa-form.invoice .total span					{ font-size: 18px; line-height: 18px; }

.invoice-informational 							{ border-top: 1px solid #d7d7d7; padding: 15px 30px 0px 30px; margin-top: 40px; }
.invoice-informational h3						{ font-size: 18px; margin-bottom: 10px; }

/*span.informational								{ display: block; font-size: 11px; color: #666; clear: both; margin-left: 340px; line-height: 1.2em; padding-top: 10px; width: 272px; }*/
#aa-form span.informational						{ display: block; float: right; font-size: 11px; color: #666; line-height: 1.2em; width: 310px; }
#aa-form li.invalid span.informational			{ display: none; }
#aa-form li p 									{ margin: 0; padding-top: 5px; float: left; }
#aa-form li.copy p 								{ margin: 0px 30px 0 30px;}
#aa-form li.copy h2 							{ margin-bottom: 10px; padding-bottom: 0; }

.no-nav-head 	{ background: #f3f3f3; padding: 30px; border-bottom: 1px solid #d7d7d7; font-size: 21px; }

.reference 		{ float: right; background: #ffe459; font-size: 15px; margin: 0 0 20px 20px; padding: 10px 20px; line-height: 30px; text-align: center; }
.reference em 	{ font-size: 24px; display: block; font-style: normal; }


/* *06: buttons -------------------------------------------------------------------------------------------------*/
#aa-form .btn								{ 
	width: 114px; height: 29px; padding-bottom: 9px; margin-right: 30px;
	background: url(../Images/spr-buttons.png) no-repeat;
	font-size: 13px; color: #262626; text-align: center; font-weight: bold; text-shadow: rgba(255, 255, 255, 0.6) 1px 1px 0px;
	border: none;
	cursor: pointer;
}
#ie6 #aa-form .btn, #ie7 #aa-form .btn		{ padding-bottom: 5px; }
#aa-form .btn:hover							{ background-position: 0 -29px; }

#aa-form .secondary-btn						{ background-position: -114px 0; }
#aa-form .secondary-btn:hover				{ background-position: -114px -29px; }

#aa-form .long-btn							{ width: 172px; background-position: -456px 0; }
#aa-form .long-btn:hover					{ background-position: -456px -29px; }

#aa-form .huge-btn							{ width: 212px; background-position: -800px 0; }
#aa-form .huge-btn:hover					{ background-position: -800px -29px; }

#aa-form .arrow-btn							{ background-position: -228px 0; text-align: left; padding-left: 15px; }
#aa-form .arrow-btn:hover					{ background-position: -228px -29px; }

#aa-form .secondary-arrow-btn				{ background-position: -342px 0; text-align: right; padding-right: 15px; }
#aa-form .secondary-arrow-btn:hover			{ background-position: -342px -29px; }

#aa-form .in-form-btn						{ margin: 20px 0 0 30px; }

#aa-form .on-right							{ float: right; margin-right: 0; margin-left: 30px; }

/* *07: -----------------------------------------------------------------------------------------------------------------*/

/*@media screen and (max-device-width: 480px) {*/
@media screen and (max-device-width: 800px) {
	
	html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
	
	html, body 									{ width: 100%; }
	form 										{ width: 100%; }
	
	a { text-decoration: underline; }
	
	h1 											{ padding: 8px 0 0 60px; margin: 10px; font-size: 16px; height: 36px; }
	.no-nav-head 								{ padding: 5px 10px; margin: 0 10px; }
	
	#form-nav 									{ 
		margin: 0 10px 20px 10px; overflow: hidden; border-top: 1px solid #efefef; border-bottom: 1px solid #efefef;
		-moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px;
		padding: 10px 0;
	}
	#form-nav li, #form-nav li a				{ width: auto !important; margin: 0 !important; padding: 0 !important; height: auto !important; background: none !important; border: none !important; }
	#form-nav .drop								{ display: none !important; }
	#form-nav li 								{ font-size: 13px; text-indent: -9999px; color: #fff; letter-spacing: -10px; padding-right: 20px !important; }
	#form-nav li span 							{ 
		display: block; width: 10px; height: 10px; background: #ccc;
		-webkit-border-radius: 20px; border-radius: 20px;
		position: relative; top: 10px; z-index: 10;
	}
	#form-nav li.complete span					{ background: #ffd520; }
	#form-nav li.complete a 					{ color: #fff; }
	#form-nav li.current,
	#form-nav li.current span					{ text-indent: 0; letter-spacing: 0px; }
	#form-nav li.current span					{ width: auto; height: auto; background: none; top: 0; }
	
	#page-summary 								{ width: auto; margin: 0 10px; padding: 0 0 20px 0; }
	#page-summary p 							{ font-size: 13px;}
	#aa-form li.rqd-fields-msg 					{ padding: 0; }
	
	fieldset { padding-top: 20px; }
	#aa-form li									{ margin: 0 10px 20px 10px; }
	#aa-form li.invalid							{ padding: 10px; background: #ffd520; }
	#aa-form span.informational 				{ float: none; width: auto; padding-top: 10px; clear: both; }
	
	#aa-form li.form-error, 
	#aa-form li.form-informational,
	#aa-form li.calculation 					{ padding: 10px; }
	
	#aa-form label 								{ width: auto; display: block; float: none; text-align: left; margin: 0 0 5px 0; padding: 0; }
	
	#aa-form input, 
	#aa-form select, 
	#aa-form textarea 							{ float: none; width: 97%; line-height: 20px; }
	#aa-form select 							{ height: 30px; width: 100%; }
	
	#aa-form .validation-message 				{ width: auto; float: none; padding: 5px 0 0 0; color: #e32e04; text-shadow: rgba(255,255,255,0.4) 0px 1px 0px; }
	#aa-form .validation-message:before 		{ content: '- '; }
	
	#aa-form .ind-mandatory						{ left: auto; top: 4px; right: 0; }
	#aa-form li.invalid .ind-mandatory 			{ top: 14px; right: 10px; }
	
	#aa-form .radio-checkbox .item-holder		{ width: 100%; }
	#aa-form .invalid .item-holder				{ padding-bottom: 10px; }
	#aa-form .radio-checkbox .item-holder label { display: inline; position: relative; top: 0px; }
	#aa-form .radio-checkbox .item-holder input { font-size: 18px; background: #999; display: inline; }
	#aa-form .radio-group li input 				{ font-size: 18px; background: #999; }
	
	#aa-form .radio-group li label				{ display: inline; position: relative; top: -2px; }
	
	#aa-form .form-details						{ background: none; }
	#aa-form .form-details dt,
	#aa-form .form-details dd { display: block; background: none; height: auto !important; padding: 0; margin: 0; width: 100% !important; }
	#aa-form .form-details dt { border-top: 1px solid #efefef; margin-bottom: 5px !important; padding-top: 10px; }
	#aa-form .form-details dd { margin-bottom: 10px !important; }
	
	#aa-form .form-footer						{ padding: 20px 0; background: none; margin: 0 10px; }
	
	#aa-form .in-form-search input				{ height: 16px !important; }
	#aa-form .in-form-search .search 			{ right: 0px; top: 21px; height: 26px !important; }
	
	#aa-form li.short 							{ margin-bottom: 20px; }
	#aa-form .print-btn							{ display: none; }
	
	#aa-form h2	{ padding: 0 0 10px 0; }
	
}

@media screen and (max-width: 320px) {
	/* iPhone portrait */
}

@media screen and (min-width: 321px) and (max-width: 480px) {
	/* iPhone landscape */
}