@charset "UTF-8";
/* CSS Document for the forms on the hep site*/


input,textarea {
	margin: 0;
	padding: 0;
	border: none;
	background:none;
}
/**************************
 * END RESETTING STYLES
 *************************/
#contentHEP {
    padding: 0 0 7px 0;
}
div.contentHEP {
    width: 520px;
    padding: 25px 40px 0;
}
#title {
    overflow: hidden;
    padding: 20px 40px 22px;
    border-bottom: 1px solid #eceae6;
}
#title a {
    font: 8pt Arial,sans-serif;
    line-height: 9pt;
    margin-top: 24px;
    float: right;
}
#title h1 {
    float: left;
}
h1 a {
    border: none;
}
#mainHEP {
    color:#403b2c;
}
/*h2 {
    color:#89826d;
    font: 19pt "Myriad Pro", Tahoma, Arial, Sans-Serif;
    line-height: 19pt;
    padding-bottom: 13pt;
}*/
#mainHEP p {
    font: 11pt Arial, Sans-Serif;
    line-height: 14pt;
    padding-bottom: 18pt;
}
span.optional {
    color:#bbb6a9;
}

/**
 * BUTTONS
 */
button.button, a.button , button.low-button , a.low-button {
    font-size: 12pt;
    text-indent: -10000px;
    display:block;
    height: 43px;
    border: none;
    text-align: left;
	cursor:pointer;
	cursor: hand; /* for IE 5.x */
}
.button:hover {
    background-position: 0px -43px;
    cursor: pointer;
}
a.low-button,button.low-button {
    height: 40px;
}
.low-button:hover {
    background-position: 0px -40px;
    cursor: pointer;
}
.get-started {
    width: 162px;
    background:url(../im/get-started.png);
}
.next-step {
	width: 125px;
	background-image: url(../im/btnnext-step.png);
}
.next-stepinput {
	width: 125px;
	background: url(../im/btnnext-step_input.png);
	color:#fff;
	padding: 11px 10px 10px 10px;
	border:none;
	height:40px;
	cursor:pointer;
}
.create-account {
	width: 125px;
	background-image: url(../im/btncreate-account.png);
}
.login {
    width: 125px;
    background: url(../im/btnlogin.png);
}
.calculate {
    width: 125px;
    background: url(../im/btncalculate.png);
	cursor:pointer;
}
.calculateinput {
    width: 125px;
    background: url(../im/btncalculate_input.png);
	color:#fff;
	padding: 11px 10px 10px 10px;
	border:none;
	height:40px;
	cursor:pointer;
}
.submitapp {
    width: 160px;
    background: url(../im/btnsubmitapp.png);
}
p.buttons {
    text-align: right;
    width: 520px;
    overflow: hidden;
    margin-top: 5px;
}
p.buttons .button,p.buttons .low-button {
    float: right;
}
/**
 * PROGRESS
 */
#progress,#complete {
    width: 520px;
    margin: 1px 0 19px;
    height: 32px;
    background:url(/img/backgrounds/progress.png);
    position:relative;
}
#complete {
    background-position: 0px 57px;
    margin-top: 0;
}
#complete #marker {
    position: absolute;
    top: 0;
    right: -26px;
    background:url(/img/backgrounds/markers.png);
    width: 26px;
    height: 32px;
}
#progress .s1 {
    width: 19px;
}
#progress .s2 {
    width:111px;
}
#progress .s3 {
    width:203px;
}
#progress .s4 {
    width:295px;
}
#progress .s5 {
    width:386px;
}
#progress .s6 {
    width:478px;
}
#progress .s2 #marker {
    background-position: -26px 0;
}
#progress .s3 #marker {
    background-position: -52px 0;
}
#progress .s4 #marker {
    background-position: -78px 0;
}
#progress .s5 #marker {
    background-position: -104px 0;
}
#progress .s6 #marker {
    background-position: -130px 0;
}
/**
 * FORM
 */
#mainHEP fieldset p {
    padding-bottom: 11.5pt;
	
}
fieldset.one-col {
    width: 545px;
    /*overflow: hidden;*/
	border: 0 none;
}
fieldset.two-col {
    width: 570px;
    /*overflow: hidden;*/
	border: 0 none;
}
div.fieldsetsub fieldset.two-col {
    width: 560px;
    /*overflow: hidden;*/
	border: 0 none;
}
div.fieldsetsub fieldset.two-col p {
    float: left;
    width: 250px;
}
fieldset.two-col p {
    float: left;
    width: 270px;
}
fieldset.two-col p.left {
    margin-right: 20px;
}
fieldset.two-col input {
    width: 258px;
}
fieldset.two-col select {
    width: 260px;
}
div.fieldsetsub fieldset.two-col select {
    width: 220px;
}
fieldset.one-col input {
    width: 528px;
}
fieldset.one-col textarea {
    width: 528px;
    /*height: 135px;*/
}
form label {
    /* display:block; */
    font: 9pt Arial, sans-serif;
    line-height: 15pt;
    /*padding-bottom: 4px;commented out on 02/04/10 check in ie*/
}
input, textarea, select {
    font: 9pt Arial, sans-serif;
    color: #7c7972;
    border: 1px solid #e2e0d8;
    background:#f6f5f1;
    line-height: 1;
    padding: 9px 5px 10px;
}
#important {
    display:none;
    visibility:hidden;
}
/*HINTS*/
/* The hint to Hide and Show */
.hint {
	color: #ffffff;
	display: none;
	/*right: -50px;
	position: absolute;*/
	width: 248px;
	background-color: #336699;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	font-size: 1em;
	height:35px;
	z-index:99999;
	
}

.hint_instruct {
	color: #ffffff;
	display: block;
	position: relative;
	right: -10px;
	width: 415px;
	margin-top: 0px;
	/*border: 1px solid #ffffff;*/
	padding: 10px 12px;
	/* to fix IE6, I can't just declare a background-color,
    I must do a bg image, too!  So I'm duplicating the pointer.gif
    image, and positioning it so that it doesn't show up
    within the box */
    background: #be1e2d url(../im/pointer.gif) no-repeat -10px 5px;
	clear: left;
}

.usernametaken {
	color: #ef3d24;
	text-align: left;
	/*display: block;*/
	margin-bottom: 0px;
	margin-left:300px;
	background-color: #FFF;
	padding: 0px;
	margin-top:5px;
	font-weight: bold;
	font-size: 1em;
}
.usernameok {
	color: #060;
	text-align: left;
	/*display: block;*/
	margin-bottom: 0px;
	margin-left:300px;
	background-color: #FFF;
	padding: 0px;
	margin-top:0px;
	font-weight: bold;
	font-size: 1em;
}
/*spry validation fields*/
/* These are the classes applied on the error messages
 * which prevent them from being displayed by default.
 */ 
.confirmRequiredMsg, 
.confirmInvalidMsg, 
.confirmValidMsg,
.passwordRequiredMsg, 
.passwordInvalidStrengthMsg, 
.passwordMinCharsMsg,
.passwordMaxCharsMsg,
.passwordCustomMsg,
.passwordValidMsg,
.textfieldRequiredMsg, 
.textfieldInvalidFormatMsg, 
.textfieldMinValueMsg,
.textfieldMaxValueMsg,
.textfieldMinCharsMsg,
.textfieldMaxCharsMsg,
.textfieldValidMsg
{
	display: none;
}

/* These selectors change the way messages look when the widget is in one of the error states.
 * These classes set a default red border and color for the error text.
 * The state class (e.g. .confirmRequiredState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.confirmRequiredState .confirmRequiredMsg,
.confirmInvalidState .confirmInvalidMsg,
.passwordRequiredState .passwordRequiredMsg,
.passwordMinCharsState .passwordMinCharsMsg,
.passwordMaxCharsState .passwordMaxCharsMsg,
.passwordInvalidStrengthState .passwordInvalidStrengthMsg,
.passwordCustomState .passwordCustomMsg,
.textfieldRequiredState .textfieldRequiredMsg, 
.textfieldInvalidFormatState .textfieldInvalidFormatMsg, 
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg,
.error
{
	color: #ef3d24;
	font: 9pt Arial, sans-serif;
	font-weight: bold;
	display:block;
    line-height: 15pt;
    padding-bottom: 4px;
}
/* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: * focus, required , invalid , valid 
 * There are two selectors for each state, to cover the two main usecases for the widget:
 * - the widget id is placed on the top level container for the INPUT
 * - the widget id is placed on the INPUT element itself (there are no error messages)
 */

 /* When the widget is in the valid state the INPUT has a green background applied on it. */
.confirmValidState input, input.confirmValidState,
.passwordValidState input, input.passwordValidState,
.textfieldValidState input, input.textfieldValidState {
	background-color: #B8F5B1;
}
/* When the widget is in an invalid state the INPUT has a red background applied on it.
input.confirmRequiredState, .confirmRequiredState input, 
input.confirmInvalidState, .confirmInvalidState input,
input.passwordRequiredState, .passwordRequiredState input, 
input.passwordInvalidStrengthState, .passwordInvalidStrengthState input, 
input.passwordMinCharsState, .passwordMinCharsState input, 
input.passwordCustomState, .passwordCustomState input, 
input.passwordMaxCharsState, .passwordMaxCharsState input,
input.textfieldRequiredState, .textfieldRequiredState input, 
input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, 
input.textfieldMinValueState, .textfieldMinValueState input, 
input.textfieldMaxValueState, .textfieldMaxValueState input, 
input.textfieldMinCharsState, .textfieldMinCharsState input, 
input.textfieldMaxCharsState, .textfieldMaxCharsState input {
	color: #ef3d24;
} */

/* When the widget has received focus, the INPUT has a yellow background applied on it. */
.confirmFocusState input, input.confirmFocusState,
.passwordFocusState input, input.passwordFocusState,
.textfieldFocusState input, input.textfieldFocusState {
	background-color: #FFFFCC;
}
/***extras****/
/* This class applies only for a short period of time and changes the way the text in the textbox looks like.
 * It applies only when the widget has character masking enabled and the user tries to type in an invalid character.
 */
.textfieldFlashText input, input.textfieldFlashText {
	color: red !important;
}

/* When the widget has the hint message on, the hint text can be styled differently than the user typed text. */
.textfieldHintState input, input.textfieldHintState {
	/*color: red !important;*/
}
/*end spry validation*/
.sectstop {
	background-image: url(../im/messagebox_warning.png);
	background-repeat: no-repeat;
	display: block;
	background-color: #FF9;
	font-size: 1.5em;
	font-weight: bold;
	font-family: "Arial Black", Gadget, sans-serif;
	line-height: 2em;
	background-position: 5px 5px;
	text-indent: 50px;
	padding: 10px;
}
.sectnamesumdk {
	background-image: url(../im/check.png);
	background-repeat: no-repeat;
	display: block;
	font-size: 1.5em;
	font-weight: bold;
	font-family: "Arial Black", Gadget, sans-serif;
	line-height: 2.5em;
	background-position: 5px 5px;
	text-indent: 50px;
	padding: 10px;
}
#allfiles ul, #addfiles ul {
	margin:0;
	padding:0;
	list-style:none;
	border-bottom:1px solid #ccc;
	border-right:1px solid #ccc;
	border-left:1px solid #eee;
}
#allfiles ul li, #addfiles ul li {padding:8px 5px;border-bottom:1px solid #ccc;}
#allfiles .odd, #addfiles .odd {background:#f9f9f9;}
#allfiles a:hover, #addfiles a:hover {background-color:none;}
.delete_progpref {
	background: url(../im/icon-delete.gif) top left no-repeat;
	list-style:none;
	margin:0;
	float: right;
	line-height:18px;
	width: 20px;
}
.add_progpref {
	list-style:none;
	margin:0;
	float: right;
	line-height:18px;
	background-image: url(../im/add_btn16.png);
	background-repeat: no-repeat;
	background-position: left top;
	width:20px;
}
.delete_progpref a, .add_progpref a {
	text-decoration:none;
	background-color:none;
}

/*----------------------------------------
				2.2.3.5) Response Messages
				----------------------------------------*/
				.message {
					border:1px solid;
					margin:0 10px 20px 0;
					}
					
				.message p{
					padding:20px 20px 20px 52px;	
					}	
				
				
				.success{
					background:#E6EFC2 url(../im/highlight_line.gif) repeat-x scroll 0 0;
					border-color:#C6D881;
					}
					
				.success p{
					background:transparent url(../im/24_tick.png) no-repeat scroll 15px 16px;
					}
				
				.warning{
					background:#FFF6BF url(../im/highlight_line.gif) repeat-x scroll 0 0;
					border-color:#FDD845;
					}
					
				.warning p{
					background:transparent url(../im/24_alert.png) no-repeat scroll 15px 17px;
					}
				
				.error{
					background:#FBE3E4;/* url(../im/highlight_line.gif) repeat-x scroll 0 0
					border-color:#FBC7C9;*/
					}
				
				.error a, .error a:visited { text-decoration:none; }
					
				.error p{
					background:transparent url(../im/24_x_false.png) no-repeat scroll 15px 17px;
					}
				
				.tip{
					background:#A8B2C5 url(../im/highlight_line.gif) repeat-x scroll 0 0;
					border-color:#8497BF;
					}
					
				.tip p{
					background:transparent url(../im/24_information.png) no-repeat scroll 15px 17px;
					}