﻿

#top_nav {
    z-index: 3;
}

#top_nav_targets {
    position: relative;
    height: auto;
    background: none;
}

#main_top_container {
    background-image: url('/assets/images/upromise_images/home/slider_nav_bg.gif');
    background-repeat: repeat-x;
    background-position: left bottom;
    margin: 0;
    max-width: 100%;
}

#main_top .multicolumn_row {
    background-image: url('/assets/images/upromise_images/home/home-save-hero-banner-large.jpg')
}

#right_rail {
    display: none;
}

#main_content_right_rail_unit.right_rail_divider {
    background: none;
}

#main_content {
    width: 100%;
    padding-bottom: 20px;
}

#main_content_container .multicolumn_column_container {
    margin-left: 30px;
    margin-right: 30px;   
}

#main_content_container .multicolumn_column:first-child .multicolumn_column_container {
    margin-left: 0;
}

#main_content_container .multicolumn_column.width_last > .multicolumn_column_container {
    margin-right: 0;
}

.multicolumn_row_separator {
    margin: 3em 20px 4em;
}

.horizontal img {
    padding-left: 30px;
}

@media only screen and (max-width:960px) 
{        
    .responsive #right_rail {
        display: block;
        width: 40%;
        float: left;
        background: none;
    }  
    .responsive #main_content {
        width: 60%;
        float: left;
    }   
    .responsive #main_content .multicolumn_row .multicolumn_column {
        float: none;
        width:auto;
        border-top: 1px #CCCCCC solid;
        margin-top: 20px;
        padding-top: 20px;
    }   
    .responsive #main_content .multicolumn_row .multicolumn_column:first-child {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }  
    .responsive #main_content .multicolumn_column .horizontal .alignment_wide {
        width: auto;
    }  
    .responsive #main_content_container .multicolumn_column_container {
        margin-left: 0;   
        margin-right:0;     
    }    
}

@media only screen and (max-width:850px) {
    .responsive #main_content {
        padding-top: 20px;
    }    
}

@media only screen and (max-width:640px) 
{        
    .responsive #right_rail {
        display: none;
    }         
    .responsive #main_content, .responsive #right_rail, #left_rail ~ #main_right_unit #main_content.yes_right_rail, #left_rail ~ #main_right_unit #right_rail {
        float: none;
        width: 100%;
    }  
    .responsive #main_content {
        padding-top: 0;
    } 
    .responsive #main_content .multicolumn_row .multicolumn_column:first-child {
        padding-top: 20px;        
    }     
}


/* Main Top Banner */

#main_top h1.sp-layer {
    line-height: 0.8em;
    font-size: 5.4em; 
    top: 20px !important;     
}

#main_top h4.sp-layer {
    font-size: 2em;  
    top: 180px !important;  
}

#main_top ul.sp-layer, #main_top p.sp-layer {
    color: #fff;
    top: 200px !important; 
} 

#main_top ul {
    color: #fff;
    margin-top: 20px;
}

#main_top li {
    font-size: 1.6em;
    padding-top: 0;
}

#main_top a[href] {
    font-family: "Source Sans Regular";
}

#main_top .multicolumn_row {
    padding-bottom: 0;
}

#main_top .multicolumn_column.width_75, #main_top .multicolumn_column.width_25 {
    display: table;
    margin: 0;
    padding: 0;    
}

#main_top .multicolumn_column.width_75 .multicolumn_column_container {
    display: table-cell;
    height: 350px;
    margin-right: 0;    
    vertical-align: middle;
    margin: 0;
    padding-bottom: 20px;
}

#main_top .multicolumn_column.width_25 .multicolumn_column_container {
    display: table-cell;
    height: 370px;
    margin-right: 0;    
    vertical-align: middle;
    margin: 0;
    padding: 0;
}

@media only screen and (max-width:1149px) {
    .responsive #main_top {
        background: #444444;
    }
}  

@media only screen and (max-width:1100px) 
{     
    .responsive #main_top h1.sp-layer {        
        top: 0 !important;        
    }   
    .responsive #main_top h4.sp-layer {
        font-size: 1.8em;  
        top: 160px !important;
        width: 40%;        
    }
    .responsive #main_top ul.sp-layer, .responsive #main_top p.sp-layer {
        top: 180px !important; 
    }    
}

@media only screen and (max-width:960px) 
{      
    .responsive #main_top h1.sp-layer {
        font-size: 4.8em;
    }    
    .responsive #main_top h4.sp-layer {
        top: 140px !important;              
    }
    .responsive #main_top ul.sp-layer, .responsive #main_top p.sp-layer {
        font-size: .9em;
        top: 160px !important; 
    }    
}

@media only screen and (max-width: 850px) {
	.responsive #main_top h1.sp-layer {
        top: 20px !important; 
        width: 50%;        
    }
    .responsive #main_top h4.sp-layer {
        font-size: 1.8em;  
        top: 160px !important; 
        width: 50%;              
    }
    .responsive #main_top ul.sp-layer, .responsive #main_top p.sp-layer {
        top: 180px !important; 
        width: 40%;           
    }         
}

@media only screen and (max-width: 700px) {
	
    .responsive #main_top h1.sp-layer {
        font-size: 4.2em;
        top: 0 !important;  
    } 
     .responsive #main_top h4.sp-layer {
        font-size: 1.6em; 
        top: 120px !important;        
    }
    .responsive #main_top ul.sp-layer, .responsive #main_top p.sp-layer {
        top: 130px !important;        
    }      
}

@media only screen and (max-width:640px) 
{        
    .responsive #main_top {
        background: #555555;
    }    
    .responsive #main_top .multicolumn_row {
        background:none;
        padding: 0;   
    }
    #main_top .multicolumn_column.width_40 .multicolumn_column_container, #main_top .multicolumn_column.width_60 .multicolumn_column_container {       
        margin: 0;
        padding: 0 20px 20px;   
    }
    .responsive #main_top .multicolumn_column.width_60 .multicolumn_column_container {        
        background-image: url('/assets/images/upromise_images/home/home-save-hero-banner-large.jpg');
        background-size: auto 300px;
        background-position: 60% center;
        background-repeat: no-repeat;
        height: 210px; 
    }       
    .responsive #main_top .multicolumn_column.width_40 .multicolumn_column_container {
        height: auto;
        display: block;              
    }  
    .responsive #main_top h1 {
        margin-top: 10px;
        font-size: 4em;
    }     
    .responsive #main_top h1, .responsive #main_top h4, .responsive #main_top ul, .responsive #main_top p {
        width:100%;
    }       
}

@media only screen and (max-width:512px) 
{        
    .responsive #main_top .multicolumn_column.width_60 .multicolumn_column_container {
        background-size: auto 250px;      
    }
}

@media only screen and (max-width:480px) {
    .responsive #main_top h1 {
        font-size: 3.6em;                
    }    
    .responsive #main_top .multicolumn_column.width_60 .multicolumn_column_container {        
        height: 140px; 
        background-size: auto 200px;
    }
}
@media only screen and (max-width:320px) {     
    .responsive #main_top .multicolumn_column.width_60 .multicolumn_column_container {
        background-image: url('/assets/images/upromise_images/home/home-save-hero-banner-small.jpg');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;         
    }   
}


/* Slideshow */


.sp-thumbnail {
	width: 100%;
    height: 42px;
	padding: 8px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.sp-thumbnail-title {
	margin-bottom: 5px;	
	color: #fff;
    font-size: 1.6em;
    text-align: center;
}

.sp-selected-thumbnail .sp-thumbnail {
	background-color: #fdc544;
}

.sp-selected-thumbnail .sp-thumbnail-title {
	color: #333;
}

.sp-grab {
	cursor:default;
}

.sp-grabbing {
	cursor:default;
}

.sp-thumbnail {
    cursor:pointer;
}

.sp-slides-container {
    background: url('/assets/images/upromise_images/core/backgrounds/main_banner_gradient_bg_55555_ECE4E2.jpg') repeat-y center top; /* Old browsers */
	background: -moz-linear-gradient(left, #555555 30%, #ece4e2 70%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(30%, #555555), color-stop(70%, #ece4e2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #555555 30%, #ece4e2 70%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #555555 30%, #ece4e2 70%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #555555 30%, #ece4e2 70%); /* IE10+ */
	background: linear-gradient(to right, #555555 30%, #ece4e2 70%); /* W3C */
	padding-bottom:0px;
}

#main_top .sp-hotspot {
    position: absolute;
    left: 0px;
    top: 0px;    
    z-index: 1;
    width: 100%;
    height: 85%;
}

#main_top .sp-hotspot a {
    width: 100%;
    height: 100%;
    display: block;
}

@media only screen and (max-width:1149px) 
{        
    #main_top h1.sp-layer, #main_top h4.sp-layer, #main_top ul.sp-layer, #main_top p.sp-layer {
        margin-left: 20px;        
    }  

    .slider-pro img.sp-image {
        margin-left: 0 !important;    
    }
}

@media only screen and (max-width:960px) 
{        
    .slider-pro img.sp-image {
        margin-left: 50px !important;    
    }
}

@media only screen and (max-width: 850px) {
	.hide-medium-screen {
		display: none;
	} 
    .slider-pro img.sp-image {
        margin-left: 0 !important;    
    }
    .sp-thumbnail {
        display: table;
        height: 62px;    
    }  
    .sp-thumbnail-title {        
        display: table-cell;
        font-size: 1.6em;         
        vertical-align: middle;
    }
    .sp-thumbnail-container {
        height: 75px !important;
        width: 140px !important;
    }    
}

@media only screen and (max-width:700px) 
{        
    .slider-pro img.sp-image {
        margin-left: 20px !important;    
    }
}

@media (max-width: 640px) {
	.sp-layer {
		font-size: 12px;
	}

	.hide-small-screen {
		display: none;
	}
}

@media (max-width: 500px) {
	.sp-thumbnail {
		text-align: center;
	}

	.sp-thumbnail-title {
		font-size: 12px;
		text-transform: uppercase;
	}

	.sp-thumbnail-description {
		display: none;
	}
}


/* Short Enrollment Form */

.enroll_form {
    padding: 20px 20px 30px;
}

.enroll_form > form {
    padding-right: 20px;
}

.enroll_form a.bg_yellow {
    cursor: pointer !important;
}

.enroll_form p {
    width: auto;
}

.enroll_form h2 {
    margin-top: 0px;
}

.enroll_form input {
    margin-top: 10px;
}

.enroll_form input[type*="text"] {
    max-width: 100% !important;
    width: 100%;
    height: 20px;
    color: #999999;   
    border: none; 
    outline: none;
    line-height: 1.5em;
    padding: 5px 10px\0;
    font-family: Source Sans Regular;
    font-size: 1.6em;
}

#main_content .enroll_form {
    display: none;
}  

#main_top .enroll_form {
    position: absolute;
    right: 0px;
    top: 30px;
    width: 20%;
    z-index: 2;
}

#main_top .enroll_form p {
    width: auto;
}

@media only screen and (max-width:1149px) 
{        
    #main_top .enroll_form {
        right: 20px;        
    }  
}

@media only screen and (max-width:1100px) 
{        
    #main_top .enroll_form {
        top: 20px; 
        padding: 5px 20px 20px;       
    }  
    #main_top .enroll_form h2 {
        font-size: 2.8em;
    }
}

@media only screen and (max-width:960px) 
{        
    .responsive #main_top .enroll_form {
        display: none;
    }
    .responsive #right_rail .enroll_form {
        margin-right: 20px;
    } 
    .responsive #right_rail .enroll_form h2 {
        margin-top: 0;
    }     
}

@media only screen and (max-width:640px) 
{        
    .responsive #main_content .enroll_form {
        display: block;
        margin: 20px;
    }        
     
}