/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
body
{
    abackground-color: #5c87b2;
    background-color: #949384;
    lfont-size: .75em;
    font-family: Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #696969;
    /*Green HEX#7AC142, and Grey HEX#949384*/
}

form
{
	display:inline;
	margin:0px;
	padding:0px;
}

a:link
{
    color: #034af3;
    text-decoration: underline;
}
a:visited
{
    color: #505abc;
}
a:hover
{
    color: #1d60ff;
    text-decoration: none;
}
a:active
{
    color: #12eb87;
}

p, ul
{
    margin-bottom: 20px;
    line-height: 1.6em;
}

/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
}

h1
{
    font-size: 2em;
    padding-bottom: 0;
    margin-bottom: 0;
}
h2
{
    padding: 0 0 10px 0;
}
h3
{
    font-size: 1.2em;
}
h4
{
    font-size: 1.1em;
}
h5, h6
{
    font-size: 1em;
}

/* this rule styles <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
.page
{
	width: 980px;
	margin-left: auto;
	margin-right: auto;
	background-color: #DDDDDD;
}

#header
{
    position: relative;
    margin-bottom: 0px;
    color: #000;
    padding: 0 0px 0 0;
}

p#logo, h1#logo
{
    font-weight: bold;
    font-size: 24px !important;
    padding: 10px 0;
    margin: 0;
    color: #FFF;
    border: none;
    line-height: 2em;
    font-family: Arial, Helvetica, sans-serif;
}

#logo a
{
    color: #FFF;
    text-decoration: none;
    font-size: 32px !important;
}

#main
{
    background-color: #FFF;
    margin-bottom: 30px;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
}

#content
{
	padding : 30px 30px 15px 30px;
	min-height:500px;
}

#footer
{
    color: #999;
    padding: 5px;
    line-height: normal;
}

#footer p
{
    padding: 5px 0;
    margin: 0;
    font-size: .9em;
}

#copyright
{
	float:right;
}
/* TAB MENU   
----------------------------------------------------------*/
ul#menu
{
    border-bottom: 1px #5C87B2 solid;
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    text-align: right;
}

ul#menu li
{
    display: inline;
    list-style: none;
}

ul#menu li a
{
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    background-color: #e8eef4;
    color: #034af3;
}

ul#menu li a:hover
{
    background-color: #FFF;
    text-decoration: none;
}

ul#menu li a:active
{
    background-color: #a6e2a6;
    text-decoration: none;
}

ul#menu li.selected a
{
    background-color: #FFF;
    color: #000;
}

/* MISC  
----------------------------------------------------------*/
.clear
{
    clear: both;
}

.money 
{
	text-align : right;
}

form
{
	margin : 0px;
}

.QuestionTitle, table.Question th
{
	font-weight:700;
	margin-top:25px;
	text-align : left;
}

table.Question
{
	border-spacing:4px;
}



table.answer-list tr td, table.answer-list tr th
{
	padding-left:5px;
	padding-right:15px;
}

.RightNoPadding
{
	margin-right:-20px;
}
.LeftNoPadding
{
	margin-left:-20px;
}
.TopNoPadding
{
	margin-top:-20px;
}

div.pageTitle
{
	font-weight:700;
	font-size: 15px;
}

div.WizardSteps
{
    float:right;
}

div.WizardSteps div
{
    float:left;
    text-align:center;    
    vertical-align:middle;
	padding: 5px 5px 5px 5px;
	margin:5px;
    font-weight: bold;
    line-height: 1.2em;
    background-color: #e8eef4;
    color: #034af3;
    height:70px;
    width:70px;
}

div.WizardSteps div.selected
{
	background-color:Gray;
	color:White;
}
div.calcStepsTitle
{
	text-decoration:underline;
	margin-left:-10px;
	margin-bottom:5px;
}
div.calcSteps
{
	padding-top:10px;
	padding-bottom:15px;
}
div.calcSteps div
{
	padding-left:20px;
	padding-right:20px;
	line-height:23px;
}
div.calcSteps div.selected
{
	background-color:Maroon;
	color:White;
}

#siteLabel
{
	float:right;
	font-size:30pt;
	margin-right:10px;
	margin-top:10px;
	text-transform:uppercase;
	font-family: Calibri, Verdana ;
	font-weight:600;
}

table.Question td
{
	padding:1px;
}

input.input-validation-error, select.input-validation-error
{
   border: 1px solid #ff0000;
   background-color: #ffeeee; 	
} 
 
.field-validation-error
{
    color: #ff0000;
}

.validation-summary-errors
{
    /*font-weight: bold;*/
    color: #ff0000;
    font-size:10pt;
    padding-bottom:10px;
}

.validation-summary-errors li
{
	list-style-type:none;
}


.left2Columns { float:left; width: 687px; padding-right:10px; }
.right2Columns { float:right; width: 730px; padding-left:10px; }


.homepageContainer .splash .examImgRight { background-image: url( /img/home_image_borrower_232x312.jpg ); }
.homepageContainer .splash .personalImgRight { background-image: url( /img/home_image_232x312.jpg ); }
.homepageContainer .splash .schoolImgRight { background-image: url( /img/home_image_lender_232x312.jpg ); }

.pageHeaderIntro
{
	padding:15px;
	text-align:center;
}

.pageHeaderIntroSub
{
	font-size : .85em;
	font-style:italic;
	text-align:center;
	margin-bottom:10px;
}

.continueBtn
{
	background-color:#7AC142;
	color:white;
	border:1px solid black;
}

.standardBtn:hover, .continueBtn:hover
{
	color:blue;
	border: 1px solid maroon;
}

.standardBtn
{
	background-color:lightgrey;
	color:black;
	border:1px solid black;
}


.tip
{
	background-color:#ccc;
	padding-right:5px;
	padding-left : 5px;
	color:White;
	text-decoration:none;
}

.btn
{
	color:White;
}

.btn:hover
{
	text-decoration:underline;
	color:Blue;
}

label
{
	display : block;
}

label.inline
{
	display : inline;	
	padding-left:5px;
}

div.buttons
{
	padding-top:20px;
	padding-bottom:20px;
}

div.Question
{
	margin-left:20px;
	clear : left;
	padding-top : 5px;
	padding-bottom : 15px;
	line-height : 1.55em;
}

div.Question label:first-child
{
	font-weight:600;
}


select.standardWidth
{
	width:250px;
}

div.smallInstruction, span.smallInstruction
{
	font-size:.75em;
	color:Maroon;
}

h4.title, h2.title
{
	font-size:18pt;
	font-weight:500;
	font-family:Verdana;
	margin-bottom:10px;
}

div.titleLine
{
	width: 60%;
	border-bottom: dash 1px black;
	border-bottom-style: dotted;
	border-width: 1px;
	border-color: #000000;
	margin-bottom:10px;
}

div.titleLine100
{
	width: 100%;
	border-bottom: dash 1px black;
	border-bottom-style: dotted;
	border-width: 1px;
	border-color: #000000;
	margin-bottom:10px;
}

div.workTitle
{
	font-weight:600;
	font-family : Verdana;
}

div.HcsNumericStep
{
 	float:left;
 	width:18%;
 	color:#7AC142;
 	text-transform:uppercase;
 	font-size:11px;
}
 
div.HcsNumericStep span
{
	position:relative;
	top:-5px;
}

div.HcsStepBar img
{
	width:100%;
}

div.center
{
	margin-left:auto;
	margin-right:auto;
}
 
div.centerText
{
	text-align:center;
}
 
.number
{
	text-align:right;
}

dl.options dt
{
	margin-top:10px;
}

/******* Product Definitions Start ********************************/


/******* Product Definitions End **********************************/

div.padTop
{
	padding-top:25px;
}

#accordion 
{
}

#accordion div.commandPanel
{
	margin-bottom:15px;
}

#accordion h4
{
	margin-top:2px;
	background-color : #EEE;
	font-weight : 400;
	padding : 5px;
	border : solid 1px #CCC;	
	vertical-align : middle;
}

#accordion h4 a.head
{
	text-decoration: none;
	color: #7AC142;
}

#accordion a.command
{
	text-decoration: none;
	margin-left:15px;
	font-size : 10pt;
}

#accordion div.summary
{
	display:none;
	padding-left:20px;
	padding-right:5px;
	padding-top:5px;
	padding-bottom:15px;
	border-right:solid 1px #CCC;
	border-left:solid 1px #CCC;
	border-bottom : solid 1px #CCC;
}

div.SummaryGroup
{
	margin-top:10px;
}

.inline
{
	display:inline;	
}

/* Results */
#ResultsScores
{
	margin-left : auto;
	margin-right : auto;
	width: 350px;
}	
	
#ResultsProjections
{
	margin-left : auto;
	margin-right : auto;
	width: 100%;
}

table.Results
{
	width:100%;
}

table.Results td, table.Results th
{
	padding:5px;
	border : solid 1px black;
	text-align : center;
}

table.Results th
{
 	background-color:#7CC245;
 	color:White;
}

@media screen
{
	div.pageBreak
	{
		display : none;
	}
}
@media print
{
	div.pageBreak
	{
		text-align : center;
		font-size : smaller;
		display : block;
		page-break-after : always;
	}
	
	div.noprint
	{
		display:none;
	}
}
		
div.indent
{
	margin-left : 15px;
}
a.monthYear-calendarIcon { display: inline-block; background: #ffffff url( /Images/Icons/icon_calendar.gif ) no-repeat; background-position: right bottom; height: 15px; width: 18px; overflow: hidden; text-indent: -9999px;  }

.monthYear-control { z-index: 99; border: solid 1px #665B58; position: absolute; display: none; background-color: #fff; padding: 10px; }
.monthYear-control .monthYear-container { width: 164px; }
.monthYear-control .monthYear-currentYear { text-align: center; font-weight: bold; float: left; color: #665B58; }
.monthYear-control a.monthYear-yearIncrement { text-indent: -9999px; float: left; width: 4px; height: 7px; overflow: hidden; background-position: 50% 50%; background-repeat: no-repeat; padding: 4px 8px;  }
.monthYear-control a.monthYear-yearIncrementUp { background-image: url( /Images/Icons/icon-arrow_right.gif ); }
.monthYear-control a.monthYear-yearIncrementDown { background-image: url( /Images/Icons/icon-arrow_left.gif ); }
.monthYear-control a.monthYear-yearIncrement:hover { text-decoration: none; background-color: #fff; }
.monthYear-control a.monthYear-yearIncrement:active { border-color: #fff; color: #665B58;  }

/* .monthYear-control .monthYear-allMonths { width: 153px; margin: auto; padding: 4px 0; } */
.monthYear-control a.monthYear-month { text-transform: uppercase; font-size: 12px; font-weight: bold; width: 31px; padding: 4px; border: 1px solid #fff; float: left; text-align: center; color: #665B58; text-decoration : none; }
.monthYear-control a.monthYear-month:hover { text-decoration: none; color: #54A242; border: 1px solid #54A242; }

.monthYear-control .monthYear-year { font-size: 18px; text-align: center; background: url( Images/img-dotted_line.gif ) 0 100% repeat-x; padding: 0 0 10px 41px; margin-bottom: 7px; }

a.scenarioLink
{
	text-decoration:none;
	cursor:pointer;
}

/* the overlayed element */
@media screen
{ 
	div.overlay 
	{          
		/* growing background image */     
		background-image:url("/Images/overlay/white.png");          
		/* dimensions after the growing animation finishes  */     
		width:600px;     
		height:300px;                  
		/* initially overlay is hidden */     
		display:none;          
		/* some padding to layout nested elements nicely  */     
		padding:55px; 
	} 
}

@media print 
{
	div.overlay
	{
		display : block;
		padding-top : 20px;	
		padding-bottom : 20px;	
	}	
}

/* default close button positioned on upper right corner */ 
div.overlay div.close 
{     
	background-image:url("/Images/overlay/close.png");     
	position:absolute;     
	right:5px;     
	top:5px;     
	cursor:pointer;     
	height:35px;     
	width:35px; 
}  
/* black */ 
div.overlay.black 
{     
	background:url(/Images/overlay/transparent.png) no-repeat !important;     
	color:#fff; 
}  
	
/* petrol */ 
div.overlay.petrol 
{     
	background:url(/Images/overlay/petrol.png) no-repeat !important;     
	color:#fff; 
}  

div.black h2, div.petrol h2 
{     
	color:#ddd;         
}

div.chart
{
	float: left;
	width:50%;
}

p.resultActions
{
	clear : both;
	color:Red;
	padding-top : 20px;
}


table.grid td, table.grid th
{
	border : solid 1px #ddd;
	padding: 2px;
}

table.grid thead
{
	background-color : #7CC245;	
	color:White;
}

tbody.alt
{
	background-color : #fafafa;
}

div.rightColumnFloat 
{
	float : right;
	width : 250px;
}

div.rightColumnFloat label
{
	font-weight : 700;
}

div.rightColumnFloat p
{
	line-height : normal;
}

div.AdminMenu
{
	float : left;
	top : 5px;
	left : -5px;
	width : 170px;
	min-height : 350px;
	background-color: #fafafa;
	padding-left : 5px;
}

div.AdminContent
{
	margin-left:180px;
}

ul.menu
{
    padding: 0 0 2px 0;
    position: relative;
    margin: 0;
    text-align: left;
}

ul.menu li
{
    list-style: none;
}

ul.menu li a
{
    text-decoration: none;
    color: #034af3;
}

ul.menu li a:hover
{
    text-decoration: none;
    color: red;
}


ul.menu li a:active
{
    color: #a6e2a6;
}

ul.menu li.selected a
{
    color: #000;
}

a.normal
{
	font-weight : 400;
	font-size : 11pt;
}

div.PromotionDisplay
{
	color : #7AC142;
	margin-left:23px;
}