/*
	Theme Name: Foresters Theme
	Revised specifically for Foresters App on Node 1
	Version: 0.1
	
*/

/***** SHELL MODS *****/

body {
		background: #fff;
}

#contentWrapper {
	box-shadow: none;																			
	-moz-box-shadow: none;																			
  	-webkit-box-shadow: none;																			
	border-radius: 0;																						
	-moz-border-radius: 0;																			
	background: #602144;  											
}	

#topLogo { 
	background: url('images-foresters/foresters-logo.gif') no-repeat top left;
	margin-top: 5px;
    margin-bottom: 8px;
}

#topLogo:lang(fr) {
	background: url('images-foresters/foresters-logo-fr.gif') no-repeat top left;
}

#topLogo #topLogoNavigation {
	font-family: Verdana, Geneva, sans-serif;
	color: #602144;
	font-size: 12px;
	padding-top: 25px;
	padding-right: 20px;
}

#topLogo #topLogoNavigation a {
	text-decoration:none;
	color: #602144;
}

#pageHeaderTableCenter{
	width: 945px;
	text-align: right;
	background: #602144;
}

#pageContentLogin{
	text-align: center;
	margin: 0;
	padding: 0;
	width: 984px;
	background: #fff;
	padding:15px;
	border: solid 1px #e0e0e0;
}

/***** CONTENT MODS *****/

body {	
	font-family:Verdana,"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
	color: #535353;
}

.plain {
	line-height: 1.5;
	font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight:400;
	font-size:18px;
}

.plain li a, .plain li a:visited, .plain li a:active {
	text-decoration:none;
	color: #00827d;
}

.plain li a:hover {
	color: #C1C1C1;
}

.buttonGreen {
	border: 1px solid #00827d !important;
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif !important;
    width: auto !important;
    height: auto !important;
    -moz-border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
    font-size: 16px !important;
    color: #fff !important;
    background: #00827d !important;
    box-shadow: none !important;
    padding: 10px 15px !important;
    text-transform: capitalize !important;
    font-weight: 400 !important;
    text-align: center;
    vertical-align: middle;
	white-space: normal;
}

.buttonGreen:hover {
	background: #C1C1C1 !important;
	border: 1px solid #C1C1C1 !important;
}

.submit {
		margin-top:50px;
}

#application p label {
    line-height: 2.5em;
}

input[type=text], textarea, select {
	border: solid 1px #bcbec0;
    padding: 5px 10px;
    margin-left: 5px;
	color: #535353;
    font-family: Verdana,"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 16px;
    font-weight: 400;
	line-height:1.5;
}

input[type=text], select {
	height: 36px;
}	

	
input[type=text]:-internal-autofill-previewed, input[type=text]:-internal-autofill-selected, textarea:-internal-autofill-previewed, textarea:-internal-autofill-selected, select:-internal-autofill-previewed, select:-internal-autofill-selected {
    background-color: #F1F2F2 !important;
    background-image: none !important;
    color: #808285 !important;
}

input[type=text]:hover, select:hover {
	background-color: #F1ECEE;
	color:#000;	  
}


/*** FANCY CHECKBOXES ***/

	/* Customize the checkbox label */
	.fancyCheck {
		display: block;
		position: relative;
		padding-left: 25px;
		/* margin-bottom: 12px; */
		cursor: pointer;
		font-size: 18px;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		border-width: 1px;
		padding-bottom: 10px;
		border-bottom: 1px dotted #4A847D;
		border-color: rgba(9, 130, 125, 0.25);
	}

	/* Hide the browser's default checkbox */
	.fancyCheck input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
	}

	/* Create a custom checkbox */
	.checkmark {
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 20px;
	  width: 20px;
	  background-color: #fff;
	  border:1px solid #00827d;
	}

	/* On mouse-over, add a grey background color */
	.fancyCheck:hover input ~ .checkmark {
	  background-color: #F1ECEE;
	}

	/* When the checkbox is checked, add a blue background */
	.fancyCheck input:checked ~ .checkmark {
	  background-color: #00827d;
	  background: url('images-foresters/checkMark.gif') no-repeat center center;
	}



h3 {
	font-family: "Times New Roman", Times, serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 1.2em;
    color: #00827d;
    margin-bottom: 20px;
}

/***** SECOND SWEEP - adding responsiveness and generally better appeal *****/

h3 {
    margin-bottom: 10px;
    border-bottom: 1px solid #4A847D;
    border-color: rgba(9, 130, 125, 0.25);
    padding-bottom: 5px;
}
	
#activePageDisplay, #pageHeaderTable, #pageContentLogin {
	width: 100%;
}

#activePageDisplay {
	box-sizing: border-box;
    border: solid 1px #e0e0e0; /*This gives a 'bounding box' around the entire app, for when it's placed inside other web pages */
}

#topLogo {
	margin-left: 10px;
}

#pageContentLogin {
	border: none;
}
	
#pageHeaderTableCenter {
	width: 100%;
	max-width:728px;
}

.plain {
	text-align:center;
	max-width: 1024px;
}

.plain li {
	display: inline-block;
}

.plain li a, .plain li a:visited, .plain li a:active {
    display: inline-block;
	/*
	width: 200px;
	overflow: hidden;
	*/
	white-space: nowrap;
    text-align: center;
	text-decoration: none;
    color: #00827d;
    border: 1px solid #00827d;
    border-color: rgba(0,130,125,.5);
    background: #fff;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 15px;
	margin: 5px 10px;
}

.plain li a:hover {
    border-color: #00827d;
    background: #00827d;
	color: #fff;
}

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

	#topLogo {
		background: url('images-foresters/foresters-logo.gif') no-repeat top center;
		margin-top: 10px;
		margin-bottom: 15px;
		margin-left: 0;
	}
	
	#topLogo:lang(fr) {
		background: url('images-foresters/foresters-logo-fr.gif') no-repeat top center;
		margin-top: 10px;
		margin-bottom: 15px;
		margin-left: 0;
	}

	#pageHeaderTable {
		/* height:2px; */
	}

	#pageHeaderTableCenter {
		/* display:none; */
	}	

}

#application {
		max-width:500px; /* formerly 1024px; */
		margin:auto;
}

#application p {
    display: inline-block;	
    vertical-align: top;
    width: 100%;
    text-align: left;
	margin-right:5px;
	margin-left: 5px;
}

#application p.rider {
	width:100%
}

#application p.rider {
	width:100%
}

#application p label {
	font-size: 13px;
    color: #602144;
}

#application p label select, #application p label input {
	display:block;
	box-sizing: border-box;
}

#application p label input[type='checkbox']{
	box-sizing: content-box;
}


#application p label input {
	width: 100%;    
	padding-left: 10px;
	margin-left:0;
}

#application p label input.date {
	width: 100%;    
	padding-left: 10px;
	margin-left:0;
}

#application p label input[type='checkbox'] {
	width: 20px;
	height:25px;
    float: left;
    /* margin-top: 10px; */
}


#application p label select {
	width: 100%;   
    margin-left: 0;
}

@media screen and (min-width: 768px) {

	#application {
			max-width:670px; /* formerly 1024px; */
	}

		#application p {
			display: inline-block;
			width: 320px;
			text-align: left
		}

}

#application .submit p {
	width: 100%;
    text-align: center;
}


/***** PREMIUM OUTPUT *****/

#quote_output {
	text-align:center;
}

#quote_output p {
	border: 1px solid #00827d;
    border-color: rgba(0,130,125,.5);
    font-size: 24px;
	text-align:center;
}

#quote_output p label {
	display: block;
    	background: rgba(0,130,125,.5);
    	text-align: center;
    	font-size: 13px;
		text-transform:uppercase;
    	font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif !important;
    	color: #fff;
}

/***** RIDERS *****/

.riderCheck {
	display:block;
}

.riderCheck label {
	color: #00827d;
}

/***** DATE PICKER *****/

.ui-widget-header {
    color: #535353;
    background: #fff;
}

.ui-datepicker-calendar .ui-state-default {
    background: #F1F2F2;
    border: 1px solid #bcbec0;
    color: #535353;
}

.ui-datepicker-calendar .ui-state-hover {
    background: #FFF3CB;
    border: 1px solid #FACC15;
    color: #000000;
}

.ui-widget-header .ui-state-hover {
    background: #FFF3CB;
    border: 1px solid #FACC15;
    color: #000000;
}