﻿/*
    
    These are custom styles in addition to Bootstrap.css and bootstrap-override.css
    This .css file goes right after the bootstrap-override.css file
    Many of these classes were created spefically for the home page, though a few are for specific items in content pages.
    
    DEVELOPMENT NOTES:
    Some classes are copied from Bootstrap and altered to create a new class,
    but in no way should override the original Bootstrap class.

    The following property has been included in some classes in order add visual assistance in developing the layout:
    border: solid 0px red;
    Toggle on/off the setting the pixel size to 1/0


    colors:
    Primary Blue (Banner):  #0054A4
    Secondary Blue:         #4C71BC
    Blue-Gray (Tabs):       #3F4F5F
    Our Partners box (burnt orange): #BD4D25                                 
    Bright Orange (accent): #FF8200
    
    Footer background (light gray): #DDDDDD;
    Dark Gray (box header)          #333333;

*/


/* outlines for layout development */
/*
.row{
    outline:dotted 1px red;
}
*/
.a11y-hide {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

.visuallyhidden-skip {
	top: 1rem;
	left: -9999px;
	position: absolute;
	background:#fff;
}
.visuallyhidden-skip:focus,
.visuallyhidden-skip:focus-within,
.visuallyhidden-skip:target {
	left: 1rem;
padding: 1rem 0;
text-align: center;
}



.banner {
    background-color: #0054a4;
    color: #FFFFFF;
    padding: 5px 15px;
}
.banner[aria-label^="Banner"] {
    padding-top: 2rem;
}
.banner input {
    color: #000;
}




/* used primarily with main container class as border around entire page */
.outline {
    border: solid 1px #0054a4;
}


/* GRANULAR STYLING - Start */
/* for page content requiring alternate spacing, positioning, font properties, display modes, etc; 
    used primarily with .row .floatingBox-* 
*/
.rowMargins {
    padding-left: 30px;
    padding-right: 30px;
}

.marginVertical-5 {
    margin-top: 5px;
    margin-bottom: 5px;
}
.marginVertical-10 {
    margin-top: 10px;
    margin-bottom: 10px;
}
.marginVertical-20 {
    margin-top: 20px;
    margin-bottom: 20px;
}
.marginVertical-30 {
    margin-top: 30px;
    margin-bottom: 30px;
}
.marginVertical-40 {
    margin-top: 40px;
    margin-bottom: 40px;
}

.marginHorizontal-5 {
    margin-left: 5px;
    margin-right: 5px;
}
.marginHorizontal-10{
    margin-left:10px;
    margin-right:10px;
}
.marginHorizontal-20 {
    margin-left: 20px;
    margin-right: 20px;
}

.padding-horizontal-10 {
    padding-left: 10px;
    padding-right: 10px;
}
.padding-horizontal-20 {
    padding-left: 20px;
    padding-right: 20px;
}
.padding-horizontal-30 {
    padding-left: 30px;
    padding-right: 30px;
}
.padding-horizontal-40 {
    padding-left: 40px;
    padding-right: 40px;
}

.padding-vertical-10{
    padding-top:10px;
    padding-bottom:10px;
}
.padding-vertical-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}
.padding-vertical-30 {
    padding-top: 30px;
    padding-bottom: 30px;
}

.margin-top-minus-10 {
    margin-top: -10px;
}


/*---ADDED7/2/2018---*/
.margin-top-0 {
    margin-top: 0px;
}



.nopaddingLR{
    padding-left:0;
    padding-right:0;
}
.nopaddingTB{
    padding-top:0;
    padding-bottom:0;
}


.float-left{
    float:left;
}
.float-right{
    float:right;
}

/* 33% wide */
.width-33{
    width:33%;
}

/* special text formating */
.dblSpaced {
    line-height: 200%;
}
.extraSpaced{
    /* equals 1.5 line spacing */
    line-height:150%;
}
.font-italic{
    font-style:italic;
}



.font-blue-primary {
    color: #0054A4;
}
.font-blue-secondary {
    color: #4C71BC;
}
.font-orange {
    color: #FF8200;
}
.font-rust {
    color: #BD4D25;
}
.font-drk-gray {
    color: #333333;
}


.text-top{
    vertical-align:top;
}
.text-mid{
    vertical-align:middle;
}


.display-table{
    display:table;
}
.display-table-row{
    display:table-row;
}
.display-table-cell {
    display: table-cell;
}


/* GRANULAR STYLING - End */




/* Responsive image max sizing options */
.img-responsive-200 {
    max-width: 200px;
}
.img-responsive-300 {
    max-width: 300px;
}
.img-responsive-50 {
    max-width: 50%;
}



/* mouse-over image/icon */
.img-link {
    position: relative;
    top:0;
    left:0;
}
.img-link .img-top {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}
.img-link:hover .img-top {
    display: inline-block;
    z-index: 1000;
    position: absolute;
    top: 0;
    left: 0;
}



/* Javascript Browser Alert styles */
.browserWarning {
    background-color: #EEEEEE;
    color: #000000;
    padding: 15px;
    text-align: center;
    max-width: 1170px;
    margin-right: auto;
    margin-left: auto;
}



/* social media icons */
.imgSocial{
   background-color:#949494;
   padding:3px;
   width:26px;
   height:26px;
   margin-left:0;
   margin-right:0;
}



/* SEARCH BOX STYLES */
#search-form {
    display: none;
}

@media (max-width: 767px) {
    .dropdown-menu {
        position: absolute;
        top: 20px;
        left: -15px;
        z-index: 1000;
        display: none;
        float: right;
        min-width: 160px;
        padding: 0;
        margin: 5px 0 0;
        font-size: 1.4em;
        text-align: left;
        list-style: none;
        background-color: #DDD;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        border: 1px solid #ccc;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 4px;
        -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .7);
        box-shadow: 0 6px 12px rgba(0, 0, 0, .7);
        }
    }

    /* Add on and partial override to 2549 */
    .textbox-search {
        display: block;
        width: 100%;
        height: 35px;
        padding: 0px 2px;
        font-size: 1.4em;
        line-height: 1;
        color: #000;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    }

    .input-group-addon-search {
        padding: 4px 6px;
        font-size: 1.4em;
        font-weight: normal;
        line-height: 1;
        color: #000;
        text-align: left;
        background-color: transparent;
        border: 1px solid #ccc;
        border-radius: 4px;
    }









    /* Sub-section navigation; located below tabs; similar to breadcrumbs */
    .subNav {
        padding: 15px 30px 0 30px;
        margin-bottom: 0px;
        list-style: none;
        background-color: transparent;
        border-radius: 4px;
    }

        .subNav > li {
            display: inline-block;
        }

            .subNav > li + li:before {
                padding: 0 5px;
                color: #ccc;
                content: "|\00a0";
            }

        .subNav > .active {
            color: #DDDDDD;
        }







    /* interpage navigation: sidebar, "return to top" */
    .list-sidebar > li {
        margin-top: 3px;
        margin-bottom: 10px;
    }

    .list-sidebar-links a {
        text-decoration: none;
        color: #15458d;
        font-weight: 600;
    }

    .list-sidebar-links > li > a:hover,
    .list-sidebar-links > li > a:active {
        text-decoration: underline;
    }

    .toTop {
        float: right;
        text-decoration: underline;
        margin-bottom: 10px;
    }







    /* plain button with white background */
    .btn-plain {
        color: #000;
        background-color: #FFFFFF;
        border-color: #000;
        min-width: 150px;
        margin-top: 10px;
        padding: 4px 8px;
    }

    .btn-plain:focus,
    .btn-plain.focus {
        color: #fff;
        background-color: #000;
        border-color: #FFF;
    }

    .btn-plain:hover {
        color: #fff;
        background-color: #000;
        border-color: #FFF;
    }

    .btn-plain:active,
    .btn-plain.active,
    .open > .dropdown-toggle.btn-plain {
        color: #fff;
        background-color: #000;
        border-color: #FFF;
    }

	.btn-iconvid {
		background-image: url('../images/PlayButton.png');
		background-repeat: no-repeat;
		background-position: right; 
		text-align: right;
		padding-right: 40px;
	}


	.InfoBox-text-left {
		text-align: left;
		position: left;
		color: #fff;
	}
	.InfoBox-text-right {
		text-align: right;
		position: right;
		color: #fff;
	}

	.orgInfoBox img{
		padding: 0px 50px 0px 0px;
	}
	.orgDrkInfoBox img{
		padding: 0px 0px 0px 50px;
	}

    /* plain button with transparent background; in the carousel */
    .btn-transparent {
        color: #fff;
        background-color: transparent;
        border-color: #fff;
        /*height:35px;*/
    }

        .btn-transparent:focus,
        .btn-transparent.focus {
            color: #fff;
            background-color: #000;
            border-color: #FFF;
        }

        .btn-transparent:hover {
            color: #fff;
            background-color: #000;
            border-color: #FFF;
        }

        .btn-transparent:active,
        .btn-transparent.active,
        .open > .dropdown-toggle.btn-transparent {
            color: #fff;
            background-color: #000;
            border-color: #FFF;
        }




    /* Home page: CalHFA Services section */
    .servicesIcon {
        width: 80px;
        height: 80px;
        margin: 5px 10px 90px 0;
        float: left;
    }


    /* Home page: About CalHFA section */
    .aboutSectionBox {
        width: 260px;
        height: 240px;
        padding: 10px 20px 20px 20px;
        margin: 10px 20px 20px 20px;
        display: inline-block;
        float: inherit;
        vertical-align: top;
        background-color: #FFF;
        text-align: left;
        color: #000;
    }

    .aboutIcon {
        width: 40px;
        height: 40px;
        float: left;
        display: table-cell;
        margin-right: 10px;
    }

    .aboutSectionBoxWide {
        width: auto;
        height: auto;
        padding: 10px 20px 20px 20px;
        margin: 10px 50px 30px 50px;
        display: inline-block;
        float: inherit;
        vertical-align: top;
        background-color: #FFF;
        text-align: left;
        color: #000;
    }



/* Home page: CalHFA Impact section */
.impactNumbers {
    font-size: 48px;
    padding-right: 10px;
    float: left;
    border: solid 0px red;
	text-align: right;
}
.orange {
    color: #BD4D25;
}
.blue {
    color: #0055b7;
}
.darkRed {
    color: #802628;
}
.impactImg {
    margin-right: 10px;
    float: left;
    border: solid 0px red;
}
.impactText {
    font-size: 18px;
    line-height: 120%;
    font-weight: 600;
    color: #000;
    text-align: left;
    float: left;
    margin-bottom:10px;
}

a:focus, input:focus {
    outline: 1px solid #999cee !important;
    outline-offset: 4px;
    color: #000 !important;
}
.btn-primary:focus {
	color: #999cee !important;
	 background-color: rgba(50,50,50,.5) !important;
}

/* carousel content;  */
.startStop {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 200;
}

.carouselContent {
    color: #FFF;
    font-weight: 700;
    text-align: left;
    margin: 10px;
    padding: 0 20px 20px 20px;
    height: auto;
    background-color: rgba(0,84,164,0.6);
    float: left;
    width: 50%;
}

.carouselContent h1 {
    font-size: 30px;
    color: #FFFFFF;
    text-shadow: 2px 2px 2px #333;
	border: none;
}

.carouselContent p {
    color: #FFF;
    font-size: 18px;
    line-height: 150%;
    font-weight: 600;
    text-shadow: 2px 2px 2px #333;
}

.carouselContent a.btn-transparent {
    padding: 4px 30px;
    text-shadow: 1px 1px 1px #000;
}




/* Home page: Important Dates */
table.dates {
    border-collapse: separate;
    border-spacing: 15px;
    width: 100px;
}

td.descr {
    font-size: 18px;
    padding: 8px;
    width: 70%;
}

td.dateCell {
    color: #000;
    background-color: #FFF;
    text-align: center;
    width: 30%;
    padding: 8px;
}

.dateNumber {
    color: #000;
    font-size: 48px;
    line-height: 80%;
}




/* mission statement box */
.mission {
    background-color: #FFF;
    color: #000;
    text-align: center;
    padding: 10px 10px 15px 10px;
    border-top: 0;
}


/* Emphasis color box; burnt orange/rust */
.emphasis {
    background-color: #BD4D25;
    border-top: solid 6px #FF8200;
    color: #FFFFFF;
    width: 100%;
    float: left;
    margin-left: auto;
    margin-right: auto;
		margin-bottom: 20px;
		margin-top: 20px;
		padding: 18px;
}

div.emphasis.bluemph {
    background-color: #0054A4;
    border-top: solid 6px #4C71BC;
}

.emphasis h2 {
	font-size: 120%;
	font-weight: bold;
}
.emphasis a {
	color: #fff;
	text-decoration: underline;
}



#emailSignup {
    width: 70%;
    margin: 15px 10% 10px 10%;
    padding: 10px;
    text-align: center;
}



/* Boxed content */
.grayBox {
    background-color: #f0f0f0;
}

.blueBox {
    background-color: #0054a4;
    color: #FFF;
}

.orgBox {
    background-color: #D97C27;
    color: #FFF;
}

.ltgrayBox {
    background-color: #fafafa;
}

.orgDrkBox {
    background-color: #AB5725;
    color: #FFF;
}

.orgInfoBox {
    background-color: #BD4D25;
    color: #FFF;
}

.orgDrkInfoBox {
    background-color: #AB5725;
    color: #FFF;
}

.bluInfoBox {
    background-color: #0054A4;
    color: #FFF;
}

.bluLtInfoBox {
    background-color: #0076C0;
    color: #FFF;
}


/* Infographic boxed content */
#rcorners1 {
  border-radius: 25px;
  background-color: #0054a4;
  text-align: right;
  color: #FFF;
  padding: 20px; 
  width: 100%;
  height: 250px;
} 

#rcorners2 {
  border-radius: 25px;
  background-color: #BD4D25;
  text-align: right;
  color: #FFF;
  padding: 20px; 
  width: 100%;
  height: 250px;
} 

#rcorners3 {
  border-radius: 25px;
  background-color: #802628;
  text-align: right;
  color: #FFF;
  padding: 20px; 
  width: 100%;
  height: 250px;
} 

#rcorners4 {
  border-radius: 25px;
  background-color: #5b1a68;
  text-align: right;
  color: #FFF;
  padding: 20px; 
  width: 100%;
  height: 250px;
} 

#rcornersCircle {
  border-radius: 100%;
  background-color: #0054a4;
  text-align: center;
  color: #FFF;

} 

div.rcorner {
  font-size: 200%;
}


.card{
	position:relative;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-direction:column;
		flex-direction:column;
		min-width:0;
		word-wrap:break-word;
		background-color:#fafafa;
		background-clip:border-box;
		border:1px solid rgba(0,0,0,.125);
		border-radius:.25rem
}

.card>hr{
	margin-right:0;
	margin-left:0
}
.card>.list-group{
	border-top:inherit;
	border-bottom:inherit
}

.card>.list-group:first-child{
	border-top-width:0;
	border-top-left-radius:calc(.25rem - 1px);
	border-top-right-radius:calc(.25rem - 1px)
}

.card>.list-group:last-child{
	border-bottom-width:0;border-bottom-right-radius:calc(.25rem - 1px);
	border-bottom-left-radius:calc(.25rem - 1px)
}

.card>.card-header+.list-group,.card>.list-group+.card-footer{border-top:0}
.card-body{-ms-flex:1 1 auto;flex:1 1 auto;min-height:1px;padding:1.25rem}
.card-title{margin-bottom:.75rem}
.card-subtitle{margin-top:-.375rem;margin-bottom:0}
.card-text:last-child{margin-bottom:0}.card-link:hover{text-decoration:none}
.card-link+.card-link{margin-left:1.25rem}
.card-header{padding:.75rem 1.25rem;margin-bottom:0;background-color:rgba(0,0,0,.03);border-bottom:1px solid rgba(0,0,0,.125)}
.card-header:first-child{border-radius:calc(.25rem - 1px) calc(.25rem - 1px) 0 0}
.card-footer{padding:.75rem 1.25rem;background-color:rgba(0,0,0,.03);border-top:1px solid rgba(0,0,0,.125)}
.card-footer:last-child{border-radius:0 0 calc(.25rem - 1px) calc(.25rem - 1px)}
.card-header-tabs{margin-right:-.625rem;margin-bottom:-.75rem;margin-left:-.625rem;border-bottom:0}
.card-header-pills{margin-right:-.625rem;margin-left:-.625rem}
.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:1.25rem;border-radius:calc(.25rem - 1px)}
.card-img,.card-img-bottom,.card-img-top{-ms-flex-negative:0;flex-shrink:0;width:100%}
.card-img,.card-img-top{border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}
.card-img,.card-img-bottom{border-bottom-right-radius:calc(.25rem - 1px);border-bottom-left-radius:calc(.25rem - 1px)}
.card-deck .card{margin-bottom:15px}

@media (min-width:769px){
	.card-deck{
		display:-ms-flexbox;
		display:flex;
		-ms-flex-flow:row wrap;
		flex-flow:row wrap;
		margin-right:-15px;
		margin-left:-15px;
	}

	.card-deck .card{
		-ms-flex:1 0 0%;
		flex:1 0 0%;
		margin-right:15px;
		margin-bottom:0;
		margin-left:15px;
	}
}
.card-group>.card{margin-bottom:15px}

@media (min-width:769px){
	.card-group{
		display:-ms-flexbox;
		display:flex;
		-ms-flex-flow:row wrap;
		flex-flow:row wrap
	}
.card-group>.card{-ms-flex:1 0 0%;flex:1 0 0%;margin-bottom:0}

.card-group>.card+.card{margin-left:0;border-left:0}
.card-group>.card:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}
.card-group>.card:not(:last-child) 
.card-header,.card-group>.card:not(:last-child) 
.card-img-top{border-top-right-radius:0}
.card-group>.card:not(:last-child) 
.card-footer,.card-group>.card:not(:last-child) 
.card-img-bottom{border-bottom-right-radius:0}
.card-group>.card:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}
.card-group>.card:not(:first-child) 
.card-header,.card-group>.card:not(:first-child) 
.card-img-top{border-top-left-radius:0}
.card-group>.card:not(:first-child) 
.card-footer,.card-group>.card:not(:first-child) 
.card-img-bottom{border-bottom-left-radius:0}}

.card-columns .card{margin-bottom:.75rem}

@media (min-width:576px){
	.card-columns{
		-webkit-column-count:3;
		-moz-column-count:3;
		column-count:3;
		-webkit-column-gap:1.25rem;
		-moz-column-gap:1.25rem;
		column-gap:1.25rem;
		orphans:1;widows:1;
	}
	.card-columns .card{
		display:inline-block;
		width:100%;
	}
}

.accordion{
	overflow-anchor:none;
}
.accordion>.card{
	overflow:hidden;
}
.accordion>.card:not(:last-of-type){
	border-bottom:0;
	border-bottom-right-radius:0;
	border-bottom-left-radius:0;
}
.accordion>.card:not(:first-of-type){
	border-top-left-radius:0;
	border-top-right-radius:0;
}
.accordion>.card>.card-header{
	border-radius:0;
	margin-bottom:-1px;
}	
	
/* Home page: Latest News section */
.newsContainer {
    float: left;
    width: 100%;
    background-color: transparent;
    padding: 0 0 5px 0;
    border-bottom: solid 1px #666666;
    margin-bottom: 20px;
}

.newsCopy {
    /*float: left;*/
		overflow: hidden;
    margin-bottom: 10px;

}


.more {
    margin-left: 20px;
}

.newsDateFooter {
    float: left;
    text-align: left;
    margin-right: 40px;
}

.newsContributor {
    float: right;
    text-align: right;
    margin-left: 40px;
}


.twitterBox {
    height: 500px;
    width: 100%;
    overflow: scroll;
    float: left;
	margin-top: 20px;
}



/* Home page: Upcoming Events */
.events {
	text-align: center;
    background-color: #0054a4;
    color: #FFFFFF;
/*width: 180px;*/
	text-shadow:
    -1px -1px 0 #0054a4,
    1px -1px 0 #0054a4,
    -1px 1px 0 #0054a4,
    1px 1px 0 #0054a4;
}

.eventDay {
		font-size: 30px;
    font-weight: 600;
    line-height: 100%;
    padding: 15px 4px 15px 4px;
}

/*.eventMonth {
		font-size: 20px;
    line-height: 80%;
    padding: 0 20px 0 0;
    width: 150px;
}

.eventYear {
	font-size: 12px;
    line-height: 100%;
    padding: 0;
}*/

.eventSocial {
    background-color: #949494;
}

.eventDetails {
    float: left;
    margin-left: 20px;
}

.eventDateMobile {
    background-color: #0054a4;
    color: #FFFFFF;
    font-size: 22px;
    text-align: center;
    padding: 6px 15px;
    max-width: 400px;
}



/* Home page bottom: Our Partners section */
.partnerSeal {
    width: 55px;
    height: 55px;
    margin: 2px 15px 20px 0;
    float: left;
}




/*  handles blocks of elements (images and text) for responsiveness;
    used in stead of Bootstrap col-* in when column content is more complex;
*/
.floating-box-1 {
    display: inline-block;
    min-width: 1px;
    height: auto;
    float: inherit;
    margin: 0 auto;
    vertical-align: top;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    border: solid 0px red;
}

.floating-box-300 {
    display: inline-block;
    width: 300px;
    height: auto;
    float: inherit;
    vertical-align: top;
    border: solid 0px red;
}

.floating-box-780 {
    display: inline-block;
    width: 780px;
    height: auto;
    float: inherit;
    vertical-align: top;
    border: solid 0px red;
}

/* small grouped boxes on home page */
.small-box {
    padding: 10px 20px 20px 20px;
    margin: 10px 20px 20px 20px;
    min-height: 1px;
    border: 0;
    background-color: #FFF;
    text-align: initial;
    color: #000;
}

.medium-box {
    padding: 0px 10px 10px 10px;
    margin: 0px 0px 0px 0px;
    min-height: 1px;
    width: 49%;
    background-color: #FFF;
    text-align: initial;
    position: relative;
    border: solid 0px red;
}



/*  
    adjusts padding for display boxes for desktop to mobile;
    default settings for desktop; mobile response in media query max-width:769px
*/
    .flex-padding-H {
        padding-left: 40px;
        padding-right: 40px;
    }

    .flex-padding-V {
        padding-top: 20px;
        padding-bottom: 25px;
    }




/* About Us page: Staff styles  */
.staff {
    text-align: center;
    padding: 0 20px 30px 20px;
}

.img-staff-circle {
    border-radius: 50%;
    /*width: 125px;
    height: 125px;*/
		width: 115px;
    height: 115px;
    border: solid 1px #000;
    margin-bottom: 15px;
    margin-left: 0;
    margin-right: 0;
}

.name {
    font-size: 16px;
    margin-top: 2px;
    margin-bottom: 2px;
}

.title {
    font-size: 16px;
    font-weight: 300;
    margin-top: 2px;
    margin-bottom: 12px;
	text-align: center;
}






/* Boxed content with heading */
.panel-gray {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #333;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.panel-gray-body {
    padding: 5px 10px 12px 10px;
}

.panel-gray-heading {
    padding: 5px 10px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    background-color: #333;
}

.panel-gray-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: #FFF;
    line-height: 120%;
}

.panel-ltgray {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #d7d7d7;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.panel-ltgray-body {
    padding: 5px 10px 12px 10px;
}

.panel-ltgray-heading {
    padding: 5px 10px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    background-color: #d7d7d7;
}

.panel-ltgray-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
		font-weight: bold;
    color: #000;
    line-height: 120%;
}


.panel-dblu {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #004064;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.panel-dblu-body {
    padding: 5px 10px 12px 10px;
}

.panel-dblu-heading {
    padding: 5px 10px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    background-color: #004064;
}

.panel-dblu-title {
    margin-bottom: 0;
    font-size: 16px;
    color: #FFF;
    line-height: 120%;
}

/* COVID 19 NEWS AND UPDATES ADDED 4/1/2020 */
.panel-boran {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #BD4D25;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.panel-boran-body {
    padding: 5px 10px 12px 10px;
}

.panel-boran-heading {
    padding: 5px 10px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    background-color: #BD4D25;
}

.panel-boran-title {
    margin-bottom: 0;
    font-size: 16px;
    color: #FFF;
    line-height: 120%;
}

.panel-wht {
    margin-bottom: 20px;
    background-color: #fff;
/*    border: 1px solid #004064;*/
    border-radius: 0 0 12px 12px;
/*	display:inline-block;*/
    
}

/* sidebar table formatting; ex: see Lenders & Real Estate Agents page, File Review Status table */

.sidebar-table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}

.sidebar-table > thead > tr > th,
.sidebar-table > tbody > tr > th,
.sidebar-table > tfoot > tr > th,
.sidebar-table > thead > tr > td,
.sidebar-table > tbody > tr > td,
.sidebar-table > tfoot > tr > td {
    /*padding: 8px;*/
		padding: 4px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 0px solid #ddd;
}

.sidebar-table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 0px solid #000;
    background-color: #d7d7d7;
    color: #000;
    text-align: center;
}

.sidebar-table > tbody > tr > td {
    border-bottom: 1px solid #000;
}

h4.table-caption {
font-weight: 700;
margin-bottom: 0;
}

.table-update {
font-weight: 400;
font-style: italic;
}









/* custom footer */
.footerContact {
    background-color: #f0f0f0;
    color: #000000;
    font-size: 12px;
    padding-bottom: 15px;
	padding-top:15px;
}

.footerLegal {
    background-color: #F0F0F0;
    color: #050505;
    font-size: 12px;
    min-height: 40px;
    padding: 10px 0px;
}
.footerLegal a {
 	   color: #050505;
    text-decoration: underline;
}

.footerLegal-left {
    float: left;
    text-align: left;
    border: solid 0px red;
}

.footerLegal-right {
    float: right;
    text-align: right;
    border: solid 0px red;
}





/* adjust footer formatting for mobile */
@media (max-width: 768px) {
    .hidden-xs-footer {
        display: none !important;
    }

    .visible-xs-footer {
        display: block !important;
    }

    .footerLegal {
        background-color: #000000;
        color: #FFFFFF;
        font-size: 11px;
        text-align: left;
        min-height: 40px;
        padding: 10px 0;
    }
.footerLegal a {
    color: #FFFFFF;
    text-decoration: underline;
}

    .footerLegal-right {
        float: left;
        text-align: left;
        border: solid 0px red;
    }
}

/* footer formatting for all except mobile phones */
@media (min-width: 769px) {
    .visible-xs-footer {
        display: none !important;
    }

    .hidden-xs-footer {
        display: block !important;
    }
}




/* For home page responsive design */
@media (max-width: 769px) {

    .rowMargins {
        padding-left: 5px;
        padding-right: 5px;
    }

    .mission {
        background-color: #0054a4;
        color: #FFFFFF;
        text-align: center;
        padding: 0 15px 15px 10px;
        border-top: solid 1px #FFF;
    }

    .mission > h3 {
        font-size: 110%;
	    font-weight: 500;
    }

    .small-box {
        padding: 10px 20px 20px 20px;
        margin: 4px 10px 0px 10px;
        min-height: 1px;
        border: 0;
        background-color: #FFF;
        text-align: initial;
    }

    .aboutSectionBox {
        width: 260px;
        height: auto;
        padding: 10px 20px 20px 20px;
        margin: 1px 20px 2px 20px;
        display: inline-block;
        float: inherit;
        vertical-align: top;
        background-color: #FFF;
        text-align: left;
        color: #000;
    }


    #jobs {
        width: 260px;
        height: auto;
        margin-bottom: 20px;
        margin-top: 1px;
    }

    #calhfaImpact {
        display: none;
    }

    #calhfaUpdate {
        display: none;
    }

    #emailSignup {
        width: 100%;
        margin: 0;
        margin-left: auto;
        margin-right: auto;
    }

    .dblSpaced {
        line-height: 150%;
    }
	

	.orgInfoBox {
    	background-color: #D97C27;
   		color: #FFF;
		padding: 0% 5% 0% 5%;

	}

	.orgDrkInfoBox {
    	background-color: #AB5725;
    	color: #FFF;
		padding: 0% 5% 0% 5%;

	}
	.InfoBox-text-left {
		text-align: center;
		position: center;
		color: #fff;
	}
	.InfoBox-text-right {
		text-align: center;
		position: center;
		color: #fff;
	}
	
	.orgInfoBox img{
		padding: 0px 50px 0px 50px;
	}
	
	.orgDrkInfoBox img{
		padding: 0px 50px 0px 50px;
	}
}






/* position for Google Translation container */
.google-element {
    position: relative;
    top: 5px;
    padding-left: 15px;
}

/* styling for Google Translation dropdown */
li#google_translate_element div.goog-te-gadget-simple {
font-size: 1.4em;
}

/*li#google_translate_element div.goog-te-gadget-simple {
background-color: #0054a4;
}*/

li#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span {
color: #656565;
}

/*li#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span:hover {
    color: #fff;
    text-decoration: none;
}*/

li#google_translate_element div.goog-te-gadget-simple {
border: none;
}









/****** ADDED FROM 2018 WEBSITE STYLES ******/
.specialRightTab {
    position: fixed;
	bottom: 3px;
	 z-index: 1
}
.specialRightTab .progtab {
	border-radius:8px;
	color: #fff;
	background-color: #AC5500;
	padding:2px 12px 2px 12px;
	display:table-cell;
}



@font-face {
   font-family: 'NeoSans';
   src: url(../fonts/neosans-webfont.eot);
   src: url(../fonts/neosans-webfont.eot?#iefix) format('embedded-opentype'),
   		url(../fonts/neosans-webfont.woff) format('woff'),
		url(../fonts/neosans-webfont.ttf) format('truetype'),
		url(../fonts/neosans-webfont.svg#NeoSans) format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
   font-family: 'NeoSansBold';
   src: url(../fonts/neosans-bold-webfont.eot);
   src: url(../fonts/neosans-bold-webfont.eot?#iefix) format('embedded-opentype'),
   		url(../fonts/neosans-bold-webfont.woff) format('woff'),
		url(../fonts/neosans-bold-webfont.ttf) format('truetype'),
		url(../fonts/neosans-bold-webfont.svg#NeoSans) format('svg');
   	font-weight: bold;
	font-style: normal;
}
ul, ol {
	padding-left:20px;
}

ul ul, ol ol {
	padding-left:14px;
}

li.loc {
    display: block;
}

li.loc:before {
    /*Using a Bootstrap glyphicon as the bullet point*/
    content: "\e062";
    font-family: 'Glyphicons Halflings';
    font-size: inherit;
    float: left;
    margin-left: -17px;
    color: #0054a4;
}

.lined table, .lined td {
	  border: solid 1px #CCC;
		padding: 4px;
}
/*--TABLE HEADER STYLE --*/
.lined th {
	  /*background-color:#e2e2e2;
	  font-weight:bold;
	  text-align:center;
		padding: 4px 0;
	  vertical-align:middle;*/
		padding: 4px;
		vertical-align: bottom;
    border-bottom: 0px solid #ddd;
    background-color: #0054a4;
    color: #FFF;
}
.noth {
	padding: 4px;
		vertical-align:middle !important;
    border: solid 1px #CCC !important;
    background-color:#F6F8FF !important;
    color: #000 !important;
}
.lined > tbody > tr:nth-of-type(odd) {
    background-color: #e5edf5;
}

.subeverytwo table, .subeverytwo td {
	  border: solid 1px #CCC;
		padding: 2px;
	font-size: 9px;
	line-height: 12px;
}
/*--TABLE HEADER STYLE --*/
.subeverytwo th {
		padding: 4px;
		vertical-align: bottom;
    border-bottom: 0px solid #ddd;
    background-color: #0054a4;
    color: #FFF;
	font-size: 9px;
	line-height: 12px;
}
.subeverytwo > tbody > tr:nth-of-type(4n+0), .subeverytwo > tbody > tr:nth-of-type(4n+1) {
    background-color: #e5edf5;
}


.subinfo table, .subinfo td {
	  border: solid 1px #CCC;
		padding: 2px;
}
/*--TABLE HEADER STYLE --*/
.subinfo th {
		padding: 4px;
		vertical-align: bottom;
    border-bottom: 0px solid #ddd;
    background-color: #0054a4;
    color: #FFF;
}
.subinfo > tbody > tr:nth-of-type(odd) {
    background-color: #e5edf5;
}


.subinfo {
    font-size: 14px;
    line-height: 12px;
}
.subinfo-sidebar {
	font-size: 10px;
	line-height: 10px;
	color: #333;
}

.subinfosm table, .subinfosm td {
	  border: solid 1px #CCC;
		padding: 2px;
	font-size: 9px;
	line-height: 12px;
}
/*--TABLE HEADER STYLE --*/
.subinfosm th {
		padding: 4px;
		vertical-align: bottom;
    border-bottom: 0px solid #ddd;
    background-color: #0054a4;
    color: #FFF;
	font-size: 9px;
	line-height: 12px;
}
.subinfosm > tbody > tr:nth-of-type(odd) {
    background-color: #e5edf5;
}

.return a {
    color:#4E4E4E;
    font-weight:bold;
}

.return {
    padding-bottom:20px;
}
.textctr {
	text-align:center;
}

.smalltxt {
	font-size: small;
}
.smallishtxt {
	font-size: small;
}
.smallishtxt h2 {
	font-size: 150%;
	font-weight: bolder;
	line-height: 200%;
}

.sidebutton {
	color: #D0D8E2;
	border-radius: 0px 0px 12px 0px; 
-moz-border-radius: 0px 0px 12px 0px; 
-webkit-border-radius: 0px 0px 12px 0px; 
 background-color: #1A3C6E;
	padding: 4px 4px 4px 18px;
	margin-right: 18px;
	margin-bottom: 4px;
	line-height: 1.4em;
}

.sidebutton a {
	color: #D0D8E2 !important;
}

/* 2 column layout like table */
.lineh14 {
	line-height: 14px;
}
.colcell1 {
	width: 40%;
	float: left;
	padding-right:8px;
}
/*------------------*/
.col1 {
	width: 45%;
	float: left;
	padding-right: 10%;
}
.col2 {
	width: 45%;
	float: right;
}
.col3 {
	width: 216px;
	float: left;
	padding: 0px 4px 10px 0px;
}
.col4 {
	width: 20%;
	float: left;
	padding: 0px 4px 10px 0px;
}
.col5 {
	
	float: left;
	padding: 0px 10px 0px 0px;
}
.collft {
	width: 45%;
	padding-right:30px;
}
.collrt {
	width: 45%;
	padding-left:0px;
}
.nofloat {
	float:none;
}
.displayflex {
	display:flex;
}
.padbit {
	padding:10px 0;
}
.margbit {
	margin:10px 0;
}
.margbtm20 {
	margin-bottom: 20px;
}
.padlft {
	padding-left:10px;
}
.padrt {
	float: left;
	padding-right:10px;
}
	
.endcol {
	clear:both;
}

.tbcontent th {
	  background-color:#0054A4;
	  font-weight:bold;
	  text-align:center;
	color: #fff;
	padding:8px;
}
.tbcontent td {
	padding:8px;
	vertical-align: bottom;
}


.more {
	float: right;
	padding-top: 5px;
}
.fltrt {
	float: right;
}
.fltlft {
	float: left;
}
.textrt {
	text-align:right;
}
.alignrt {
	position:absolute;
	right: 0px;
}
.textlft {
	text-align:left;
}
.textlftpad {
	padding-left:12px;
}
.textrtpad {
	padding-right:12px;
	text-align: left;
}
.rtmarg {
	margin-right:12px;
	overflow: hidden;
}
.textnovertpad {
	padding-top:0;
	padding-bottom:0;
}
.textctr {
	text-align:center;
}

.nobreak {
	white-space: nowrap;
}
.nomarg {
	margin:0 !important;
}
.nowrap {
	overflow: hidden;
	margin-bottom:12px;
}

.borderblu {
	border-style: solid;
	border-color: #0054a4;
	border-width: 1px;
			border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
	}

.subbody {
	padding-left: 40px;
	padding-right: 40px;
}
.subbody li {
	margin-left: 40px;
	padding-right: 40px;
}
.sub-subbody {
	padding-left: 60px;
	padding-right: 40px;
}
.sub-subbody li {
	margin-left: 60px;
	padding-right: 40px;
}

/* Newsletter styles   **********/

.leftpic {
	float:left;
	margin:0px 20px 10px 0px;
	
}

.listdbl li {
	padding-bottom:10px;
}

.indent {
	margin-left: 20px;
	padding-top:12px;
}


ol.paren_list { 
	counter-reset: item; 
	list-style: none; 
	padding-top:12px;
} 
ol.paren_list li:before { 
	content: "(" counter(item,  decimal) ") "; 
	counter-increment: item; 
} 

h3.underline {
	border-bottom:#ef8200 solid 2px; 
	padding-bottom:8px; 
	margin-bottom:8px;
	line-height: 1.75em;
}
.h4lookalike {
	font-size: 16px;
  margin-top: 10px;
  margin-bottom: 10px;
	font-family: inherit;
  font-weight:400;
  line-height: 1.1;
  color: #0054A4;
}
.h3lookalike {
	font-size: 16px;
  margin-top: 10px;
  margin-bottom: 10px;
	font-family: inherit;
  font-weight:400;
  line-height: 1.1;
  color: #f8971D;
}
.h2lookalike {
	font-size: 170%;
  margin-top: 10px;
  margin-bottom: 10px;
	font-family: inherit;
  font-weight:bolder;
  line-height: 1.25;
  color: #0054A4;
}


.txt20px {
	font-size: 20px;
}

figure {
	float: left;
    position: relative;
	display: block;
	margin:0;
}

figcaption {
	color:#4F4E4E;
	font-family: Georgia, "Times New Roman", Times, serif;
	clear: left;
	margin: 0.75em 1.25em 0.75em 0em;
	font-style: italic;
	line-height: 1.5em;
	display: block;
	border-bottom: #BEBDBD solid 1px;
}
.icon{
	
	font-style: normal !important;
	font-size: 110%;
	text-align: center;
	border-bottom: none !important;
}

.newsletterhead {
	font-size: 35pt;
	font-family: Georgia, "Times New Roman", Times, serif !important;
	color: #6B6B6B;
	margin-bottom:10px !important;
	padding-bottom: 0px;
	font-weight: normal;
}
/* END Newsletter styles   **********/

.textNeoSans {
	font-family: 'NeoSans', Verdana, Geneva, sans-serif;
}
.textNeoSansBold {
	font-family: 'NeoSansBold', Verdana, Geneva, sans-serif;
}
h2.textNeoSansBold {
	font-size: 1.15em;
line-height: 1.25em;
}

/* --BUTTON STYLES --*/
	/* http://cssgradientbutton.com/?bg0=EF8200&bg1=FEF463&bg2=E07A00&bg3=fef030&r=10&p_top=10&p_right=10&p_bottom=10&p_left=10&w_auto=yes&w=150&text_c=000000&textshadow=no&textshadow_c=000000&shadow_bt=0&shadow_c=B4B5B5&border_s=1&border_c=b76300&border_c_hover=894b00&f_size_auto=no&f_s=12&font=verdana, sans-serif&bold=yes&inset=no&s_x=0&s_y=0&s_b=0&t_s_px=-1&b_top=1&b_right=1&b_bottom=1&b_left=1&bt_c=b76300&br_c=b76300&bb_c=b76300&bl_c=b76300&bhover_top=1&bhover_right=1&bhover_bottom=1&bhover_left=1&bhover_t_c=894b00&bhover_r_c=894b00&bhover_b_c=894b00&bhover_l_c=894b00&bh_top=1&br_top=3&br_right=3&br_bottom=3&br_left=3&h_s=-1&v_s=-1&b_s=0&o_s=0.3 */

.brightbut {
	border:1px solid #b76300; -webkit-border-radius: 10px; -moz-border-radius: 10px;border-radius: 10px;font-size:12px;font-family:verdana, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;font-weight:bold; color: #000000;
	 background-color: #EF8200; background-image: -webkit-gradient(linear, left top, left bottom, from(#EF8200), to(#FEF463));
	 background-image: -webkit-linear-gradient(top, #EF8200, #FEF463);
	 background-image: -moz-linear-gradient(top, #EF8200, #FEF463);
	 background-image: -ms-linear-gradient(top, #EF8200, #FEF463);
	 background-image: -o-linear-gradient(top, #EF8200, #FEF463);
	 background-image: linear-gradient(to bottom, #EF8200, #FEF463);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#EF8200, endColorstr=#FEF463);
	 cursor:pointer;
	}
	
	.brightbut:hover{
	 border:1px solid #894b00;
	 background-color: #fef030; background-image: -webkit-gradient(linear, left top, left bottom, from(#fef030), to(#E07A00));
	 background-image: -webkit-linear-gradient(top, #fef030, #E07A00);
	 background-image: -moz-linear-gradient(top, #fef030, #E07A00);
	 background-image: -ms-linear-gradient(top, #fef030, #E07A00);
	 background-image: -o-linear-gradient(top, #fef030, #E07A00);
	 background-image: linear-gradient(to bottom, #fef030, #E07A00);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#fef030, endColorstr=#E07A00);
	 
	}

/* --DISPLAY STYLES --*/
.bg-paper {
	background-image:url(../images/Background-paper.jpg);
	height:100%;
	width:100%;
}

/* --FROM http://cssarrowplease.com/ -- */
.arrow_box {
	position: relative;
	background-color: #0054a4;
	/*padding:8px 8px 8px 12px;*/
	padding:3px 3px 3px 6px;
	margin: 0 12px 8px 0;
	color:#fff;
}
.arrow_box:after {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(0, 84, 164, 0);
	border-left-color: #0054a4;
	/*border-width: 30px;
	margin-top: -30px;*/
	border-width: 20px;
	margin-top: -20px;
}





/* --FORMS AND DOCS PAGE STYLES -- */
.tabcentergray {
	border-top: 1px solid #5D5D5D;
	border-right: 1px solid #5D5D5D;
	border-left: 1px solid #5D5D5D;
	border-bottom: 0px #5D5D5D;
	border-top-left-radius:12px;
	border-top-right-radius:12px;
	background-color: #E4E4E4;
	color:#000;
	width:50%;
	text-align:center;
	padding:3px 3px 6px 3px;
	margin-left:auto;
	margin-right:auto;
	text-transform: uppercase;
	font-weight:bold;
}

.buttonlistorng ul {
	margin-bottom: 0;
}

.buttonlistorng ul li:first-child {
	background: url(../images/icon-circleorng.png) no-repeat 3px center;
	background-color:#f1f1f1;
	border:#999 solid 1px;
	border-radius:12px;
	
	padding: 6px 0 6px 28px;
	margin:6px 10px 6px -20px;
	}
.buttonlistorng ul li {
    list-style:none;
	margin:6px 10px 6px 0px;
	}
	
.buttonlistorng ul li li:first-child {
	background: none;
	border:none;
	margin:0 0 0 -6px;
	padding: 3px 0 3px 10px;
	}
.buttonlistorng ul li li {
	list-style: none;
	margin-left:-6px;
	padding: 0px 0 3px 10px;
	}
.buttonlistorng ul li li:before {
	  
  	content: '\2022';
  	display: block;
  	position: relative;
  	max-width: 0;
  	max-height: 0;
  	left: -23px;
  	top: 0;
  	color: gray;
}

.buttonlistnon ul li {
	content: '\2022';
  	
	position: relative;
	left: -6px;
	padding: 3px 0 3px 10px;
  	color: gray !important;
	}
.buttonlistnon,.blacktxt ul li {
  	color: black !important;
	}

.buttonlistnon {
	padding-left:30px;
}


.buttonlistblu ul {
	margin-bottom: 0;
}

.buttonlistblu ul li:first-child {
	background: url(../images/icon-circleblu.png) no-repeat 3px center;
	background-color:#f1f1f1;
	border:#999 solid 1px;
	border-radius:12px;
	padding: 6px 0 6px 28px;
	margin:6px 10px 6px -20px;
	}
.buttonlistblu ul li {
    list-style:none;
	margin:6px 10px 6px 0px;
	}
	
.buttonlistblu ul li li:first-child {
	background: none;
	border:none;
	margin:0 0 0 -6px;
	padding: 3px 0 3px 10px;
	}
.buttonlistblu ul li li {
	list-style: none;
	margin-left:-6px;
	
	padding: 0px 0 3px 10px;
	}
.buttonlistblu ul li li:before {
	
  	content: '\2022';
  	display: block;
  	position: relative;
  	max-width: 0;
  	max-height: 0;
  	left: -23px;
  	top: 0;
  	color: gray;
}




.buttonlistteal ul {
	margin-bottom: 0;
}

.buttonlistteal ul li:first-child {
	background: url(../images/icon-circleteal.png) no-repeat 3px center;
	background-color:#f1f1f1;
	border:#999 solid 1px;
	border-radius:12px;
	
	padding: 6px 0 6px 28px;
	margin:6px 10px 6px -20px;
	}
.buttonlistteal ul li {
    list-style:none;
	margin:6px 10px 6px 0px;
	}
	
.buttonlistteal ul li li:first-child {
	background: none;
	border:none;
	margin:0 0 0 -6px;
	padding: 3px 0 3px 10px;
	}
.buttonlistteal ul li li {
	list-style: none;
	margin-left:-6px;
	padding: 0px 0 3px 10px;
	}
.buttonlistteal ul li li:before {
	  
  	content: '\2022';
  	display: block;
  	position: relative;
  	max-width: 0;
  	max-height: 0;
  	left: -23px;
  	top: 0;
  	color: gray;
}
.rustHead
    {
		background-color:#BD4D25;
		color:#FFF;
		border-bottom:#000 solid 2px; 
		height:50px;
		vertical-align:middle !important;
		font-size:15px; 
		padding:10px;
		text-align:center;       
    }
.tealHead
    {
		background-color:#007059;
		color:#FFF;
		border-bottom:#000 solid 2px; 
		height:50px;
		vertical-align:middle !important;
		font-size:15px; 
		padding:10px;
		text-align:center;       
    }
.blueHead
    {
		background-color:#0054a4;
		color:#FFF;
		border-bottom:#000 solid 2px;
		height:50px;
		vertical-align:middle !important; 
		font-size:15px;  
		padding:10px; 
		text-align:center;    
    }

.colorRust {
	background-color:#BD4D25;
		color:#FFF;
}
.colorRustmed {
	background-color:#f8d9b0;
}
.colorRustlight {
	background-color:#FAE5CA;
}

.colorBlue {
	background-color:#0054A4;
		color:#FFF;
}
.colorBlue85 {
	background-color:#2F66AF;
		color:#FFF;
}
.colorBlue75 {
	background-color:#4C71B6;
		color:#FFF;
}
.colorBlue20 {
	background-color:#C6CDE8;
		color:#000;
}
.colorBlue15 {
	background-color:#D3D8ED;
		color:#000;
}
.colorBlue10 {
	background-color:#E0E4F2;
		color:#000;
}
.colorBlue05 {
	background-color:#F0F2F9;
		color:#000;
}

table.colorBlue th {
	background-color:#0054A4;
		color:#FFF;
}
.colorBlue tr:nth-child(odd) {
  background-color: #D3D8ED;
	color:#000;
}
.colorBlue tr:nth-child(even) {
  background-color: #fff;
	color:#000;
}

table.colorBlue75 th {
	background-color:#4C71B6;
		color:#FFF;
}
.colorBlue75 tr:nth-child(odd) {
  background-color: #E0E4F2;
	color:#000;
}
.colorBlue75 tr:nth-child(even) {
  background-color: #fff;
	color:#000;
}

table.colorRust th {
	background-color:#BD4D25;
		color:#FFF;
}
.colorRust tr:nth-child(odd) {
  background-color: #FAE5CA;
	color:#000;
}
.colorRust tr:nth-child(even) {
  background-color: #fff;
	color:#000;
}

/*END*/

.divider {
	margin-top: 30px;
    padding: 5px; 
	border-top: solid 1px #ee8a1d;
}
#leftcol .divider {
	margin-top: 30px;
    padding: 5px; 
	border-top: solid 2px #ee8a1d;
}
h1:after {
    content:' ';
    display:block;
    border: 1px solid #ef8200;
}
.hero-text h1:after {
    all:unset;
}
.sidebar {
	border: #4C71BC solid 1px;
	margin-top:16px;
}


/* -- TABLE LAYOUT FOR FORMS --*/
	.Table
    {
        display: table;
/*		margin-left: auto;
		margin-right: auto;*/
    }
.Table h3 {
  font-size: 110%;
	font-style: italic;
    }
    .Title
    {
        display: table-caption;
        text-align: center;
        font-weight: bold;
        font-size: larger;
    }
    .Heading
    {
        display: table-row;
        text-align: center;
		line-height: inherit;
    }
    .Row
    {
        display: table-row;
    }
	.hidden
    {
        display: none;
    }
    .Cell
    {
        display: table-cell;
    }
	.Cell p
    {
		padding-bottom: 0px;
		margin-bottom: 0px;
    }
	.progHead 
    {
		vertical-align:bottom;
		text-align:left;
		border-bottom:#000 solid 2px;
		font-size:15px; 
		font-weight: bold;
		width: 452px;       
    }
.retailHead
    {
		background-color:#BD4D25;
		color:#FFF;
		border-bottom:#000 solid 2px; 
		height:50px;
		vertical-align:middle;
		font-size:15px; 
		padding:10px;       
    }
@media (min-width: 974px) {
	.retailHead
    {
		width:18%;
    }
}
/*@media (min-width: 974px) {*/
	.retailHead-dbl
    {
		width:36%;
    }
/*}*/
.retailHead a {
	color:#FFFFFF !important;
}
	.brokerHead
    {
		background-color:#0054a4;
		color:#FFF;
		border-bottom:#000 solid 2px;
		height:50px;
		vertical-align:middle; 
		font-size:15px;  
		padding:10px;     
    }
	.headBlue100
    {
		background-color:#0054a4;
		color:#FFF;
		border-bottom:#000 solid 2px;
		height:50px;
		vertical-align:middle; 
		font-size:15px;  
		padding:10px;
		font-weight:100;     
    }
	.headBlue95
    {
		background-color:#085aa7;
		color:#FFF;
		border-bottom:#000 solid 2px;
		height:50px;
		vertical-align:middle; 
		font-size:15px;  
		padding:10px; 
		font-weight:100;     
    }
	.headBlue85
    {
		background-color:#2f66af;
		color:#FFF;
		border-bottom:#000 solid 2px;
		height:50px;
		vertical-align:middle; 
		font-size:15px;  
		padding:10px; 
		font-weight:100;     
    }
	.headBlue75
    {
		background-color:#4c71b6;
		color:#FFF;
		border-bottom:#000 solid 2px;
		height:50px;
		vertical-align:middle; 
		font-size:15px;  
		padding:10px; 
		font-weight:100;     
    }

	.cellBlue25
	{
		background-color:#bcc4e4;
		text-align:center;
		vertical-align:middle;
		padding:10px;
	}
	.cellBlue20
	{
		background-color:#c6cde8;
		text-align:center;
		vertical-align:middle;
		padding:10px;
	}
	.cellBlue15
	{
		background-color:#d3d8ed;
		text-align:center;
		vertical-align:middle;
		padding:10px;
	}
	.cellBlue10
	{
		background-color:#e0e4f2;
		text-align:center;
		vertical-align:middle;
		padding:10px;
	}
	.cellBlue05
	{
		background-color:#f0f2f9;
		text-align:center;
		vertical-align:middle;
		padding:10px;
	}
	
	.query 
    {
		text-align:left;
		width: 452px;       
    }
	
	.prog2 
    {
		text-align:left;
		border-bottom:#a7a9ac solid 2px;
		font-size:15px;
		font-style:italic;
		padding-left:12px; 
    }
	.prog3 
    {
		text-align:left;
		padding: 10px 10px 10px 24px; 
    }
	.prog4 
    {
		text-align:left;
		padding-left:12px;
		font-size:12px;
		line-height:14px;
		font-style:italic; 
    }
	.retaila
	{
		background-color:#F8D9B0;
		text-align:center;
		vertical-align:middle;
		padding:10px;
		font-weight:bold;
	}
	.retailb
	{
		background-color:#FAE5CA;
		text-align:center;
		vertical-align:middle;
		padding:10px;
		font-weight:bold;
	}
.retailbut {
border:1px solid #c76712; -webkit-border-radius: 10px; -moz-border-radius: 10px;border-radius: 10px;font-size:15px;font-family:verdana, sans-serif; padding: 10px 10px 10px 10px; margin: 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3); color: #FFFFFF;
 background-color: #EB8327; background-image: -webkit-gradient(linear, left top, left bottom, from(#EB8327), to(#9F4622));
 background-image: -webkit-linear-gradient(top, #EB8327, #9F4622);
 background-image: -moz-linear-gradient(top, #EB8327, #9F4622);
 background-image: -ms-linear-gradient(top, #EB8327, #9F4622);
 background-image: -o-linear-gradient(top, #EB8327, #9F4622);
 background-image: linear-gradient(to bottom, #EB8327, #9F4622);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#EB8327, endColorstr=#9F4622);
}

.retailbut:hover{
 border:1px solid #9d520f;
 background-color: #cc6a13; background-image: -webkit-gradient(linear, left top, left bottom, from(#cc6a13), to(#753419));
 background-image: -webkit-linear-gradient(top, #cc6a13, #753419);
 background-image: -moz-linear-gradient(top, #cc6a13, #753419);
 background-image: -ms-linear-gradient(top, #cc6a13, #753419);
 background-image: -o-linear-gradient(top, #cc6a13, #753419);
 background-image: linear-gradient(to bottom, #cc6a13, #753419);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#cc6a13, endColorstr=#753419);
}
	.brokera
	{
		background-color:#C4C9E5;
		text-align:center;
		vertical-align:middle;
		padding:10px;
		font-weight:bold;
	}
	.brokerb
	{
		background-color:#D1D5EB;
		text-align:center;
		vertical-align:middle;
		padding:10px;
		font-weight:bold;
	}
	
	.brokerbut{
border:1px solid #566ab4; -webkit-border-radius: 10px; -moz-border-radius: 10px;border-radius: 10px;font-size:15px;font-family:verdana, sans-serif; padding: 10px 10px 10px 10px; margin: 10px;text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3); color: #FFFFFF;
 background-color: #7D8CC5; background-image: -webkit-gradient(linear, left top, left bottom, from(#7D8CC5), to(#144184));
 background-image: -webkit-linear-gradient(top, #7D8CC5, #144184);
 background-image: -moz-linear-gradient(top, #7D8CC5, #144184);
 background-image: -ms-linear-gradient(top, #7D8CC5, #144184);
 background-image: -o-linear-gradient(top, #7D8CC5, #144184);
 background-image: linear-gradient(to bottom, #7D8CC5, #144184);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#7D8CC5, endColorstr=#144184);
}

.brokerbut:hover{
 border:1px solid #445598;
 background-color: #5a6db5; background-image: -webkit-gradient(linear, left top, left bottom, from(#5a6db5), to(#0d2b58));
 background-image: -webkit-linear-gradient(top, #5a6db5, #0d2b58);
 background-image: -moz-linear-gradient(top, #5a6db5, #0d2b58);
 background-image: -ms-linear-gradient(top, #5a6db5, #0d2b58);
 background-image: -o-linear-gradient(top, #5a6db5, #0d2b58);
 background-image: linear-gradient(to bottom, #5a6db5, #0d2b58);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#5a6db5, endColorstr=#0d2b58);
}

.lineda
	{
		background-color:#DEF5F8;
		text-align:center;
		vertical-align:middle;
	}
.linedb
	{
		background-color:#E6F8FA;
		text-align:center;
		vertical-align:middle;
	}
.sum {
	border-top:#000000 double;
	border-width: 3px;
}

	
/* -- END TABLE LAYOUT FOR FORMS --*/

/* -- BEGIN SCENARIO CALCULATOR STYLES --*/

.graybox {
	border: thin solid gray;
	padding: 8px;
}

.InputsDropDown {
	/*font-size: 32px;*/
	}

.InputsTextBox {
	/*font-size: 85%;*/
}

.InputTable{
    width:auto;
    position:relative;

    }
.InputCells{
    border-top:#89B1ED; 
    border-style:solid;   
    border-spacing:0px;
    border-width:thin;
    border-style:solid;
	}
.InputCellsError{ 
	border: 2px solid #BE0000 !important;
	}
.InputCellsLabel{
    background-color:#89B1ED;
    border-bottom:#89B1ED; 
    border-width:thin;
    font-weight:bold;	
    border-style:solid;
    border-spacing:0px;
	}
.OutputTable {
    width:auto;
    border-width:thin;
    border-color:black;
    border-style:solid;
    border-spacing:0px;
    border:1px;
    position:relative;
    }
.ResultsCells{
    border-left-style:none;
    border-width:thin;
    border-spacing:0px;
    border-bottom-style:solid;
    padding-top:4px;
    padding-bottom:4px;
    padding-left:10px;
    padding-right:10px;
	}
.ResultsLabel{
    border-left-style:none;
    border-width:thin;
    border-spacing:0px;
    border-bottom-style:solid;
    padding-top:4px;
    padding-bottom:4px;
    padding-left:10px;
    padding-right:10px;
	}
.RestultsContribution{
	border: #ef8200 solid 2px;
    border-spacing:5px;
	margin-bottom:10px;
    }
.RestultsContributionLabel {
    background-color:#FFA347;
    border:#FFA347;
    border-width:thin;
    font-weight:bold;	
    border-style:solid;
    border-spacing:0px;
    }
.RestultsContributionResults {
    background-color:#FFA347;
    border:#CCFFFF;
    border-width:thin;
    font-weight:bold;	
    border-style:solid;
    border-spacing:0px;
    font-size:150%;
    }

.OutputTableComparison {
    width:auto;
    position:relative;
    padding:0;
    margine:0;
    border-style:solid;
    border-width:thin;
    }

.OutputTableComparison colgroup col:nth-child(1) { background-color:white;}

.OutputTableComparison colgroup col:nth-child(2) { background-color:#E6E7E8;}

.OutputTableComparison colgroup col:nth-child(3) { background-color:#f1f2f2;}

.OutputTableComparison colgroup col:nth-child(4) { background-color:#E6E7E8;}


.disabledField{
	background-color: #515151 !important;
}

tr.toporange td {
  border-top: thick  solid #ffab30;
}

tr.bottomorange td {
  border-bottom: thick  solid #ffab30;
}

tr.roworange td:first-child {
  border-left: thick  solid #ffab30;
}

tr.roworange td:last-child {
  border-right: thick  solid #ffab30;
}
.un-legend{
	display: inherit;
	width: inherit;
/*	padding:0;
*/	margin-bottom:inherit;
	font-size:inherit;
	line-height:inherit;
	color: inherit;
	border:0;
	border-bottom: none;
	}

    
/* -- END SCENARIO CALCULATOR STYLES --*/

.smltxt75 {
	font-size: 75%;
}

.errline {
	color: #BE0000;
	display: inline;
}
.big {
	font-weight: bold; 
	font-size: large;
}

.note {
	font-style: italic;
	color: #666;
	text-align: left;
	margin: 1.5em;
}

/*------------------*/

.width45percent {
	width:45%;
}
.width50percent {
	width:50%;
}
.width80percent {
	width:80%;
}
.width90percent {
	width:90%;
}
.width95percent {
	width:95%;
}
.width100percent {
	width:100%;
}
.specialLeftTab {
	/*width:501px;*/
	color:#fff;
    position: relative;
	z-index:1;
	right:50px;
}
.specialLeftTab .tab {
	height:28px;
	/*background: #1A3C6E;*/
	background: #b74a23;
	border-bottom-right-radius:8px;
	/*width:501px;*/
	color:#fff;
	padding:4px 8px 4px 50px;
	margin-left:0;
	display:table-cell;
}
.specialLeftTab .tab a {
  	color:#fff;
}

@media (min-width: 974px) {
.specialLeftTab {
	/*width:501px;*/
	color:#fff;
    position: relative;
	z-index:1;
	right:50px;
	margin-bottom:12px;
}

}


/*------------------*/
/*--------page styles----------*/
.upmarg100px {
	margin-top: 100px;
}

.info { 
	text-align: left;
	font: 11px Verdana;
	font-variant:small-caps;
	line-height: 14px;
	color: #0a155b;
	margin-top:0pt;
	margin-bottom:40px;
}

/* This CSS includes a few ways of styling PDF files */

/*a[href$=".pdf"]:before {
  width:32px;
  height:32px;
 background:url('http://wwwimages.adobe.com/content/dam/acom/en/legal/images/badges/Adobe_PDF_file_icon_32x32.png');
  display:inline-block;
  content:' ';
}*/

/* Add " (PDF)" text after links that go to PDFs */
a[href$=".pdf"]:after { content: " (PDF)"; }

a[href$=".PDF"]:after { content: " (PDF)"; }

/* If file size specified as data attribute, use that too */
a[href$=".pdf"][data-size]:after { content: " (PDF, " attr(data-size) ")"; }

/* Add " (XLSX)" text after links that go to XLSXs */
a[href$=".xlsx"]:after { content: " (XLSX)"; }

a[href$=".XLSX"]:after { content: " (XLSX)"; }

/* Add " (XLSM)" text after links that go to XLSMs */
a[href$=".xlsm"]:after { content: " (XLSM)"; }

a[href$=".XLSM"]:after { content: " (XLSM)"; }
/* Add " (DOC)" text after links that go to DOCs */
a[href$=".doc"]:after { content: " (DOC)"; }

a[href$=".DOC"]:after { content: " (DOC)"; }
/* Add " (DOC)" text after links that go to DOCs */
a[href$=".doc"]:after { content: " (DOC)"; }

a[href$=".DOC"]:after { content: " (DOC)"; }

/* Add " (XLS)" text after links that go to XLSMs */
a[href$=".xls"]:after { content: " (XLS)"; }

a[href$=".XLS"]:after { content: " (XLS)"; }

/* Add " (DOC)" text after links that go to DOCs */
a[href$=".doc"]:after { content: " (DOC)"; }

a[href$=".DOC"]:after { content: " (DOC)"; }

/* Add " (DOCX)" text after links that go to DOCXs */
a[href$=".docx"]:after { content: " (DOCX)"; }

a[href$=".DOCX"]:after { content: " (DOCX)"; }


.boardviddim {
	width: 640px;
	height: 360px;
	border: none;
}
.mapdim {
	width: 640px;
	height: 600px;
	border: none;
}

.zztop {
	z-index: 1000;
}

.secondth {
	background-color: #e5edf5;
	text-align: center;
}






    /* hero image on homepage */
	.hero-image {
        background: 
			linear-gradient(135deg, rgba(0,58,111,1) 0%, rgba(0,58,111,0.5) 40%, rgba(0,58,111,0) 60%), url("/common/images/hero/june-50th-logo.png");
		background-blend-mode: multiply;
		background-position: right;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		min-height: 300px;
		padding: 2rem 5%;
		display: flex; justify-content: center;
    flex-direction: column;
    justify-content: space-between;
	}
	
    /* hero image vertical centering - change top percentage */	
	.hero-image .hero-text {
		top: 25%;
    	position: absolute;
	}

	.hero-image .hero-text h1{
		font-size: 36px;
		line-height: 1.25;
		font-weight: bolder;
		text-align: left;
		color: #fff;
		text-shadow: rgba(50,50,50,.5) 2px 2px 2px;
		width: 70%;
	}
/*
	.hero-image .hero-text h3{
		padding: 1rem 5% 2rem;
		margin:0;
		color: #fff;
		text-shadow: rgba(50,50,50,.8) 2px 2px 2px;
	}
*/
.hero-image .hero-btn-pod {
	padding: 2rem 5%;
	margin: 2rem 0 0;
	display: flex;
	flex-direction:column;
	gap: 2rem;
}
.hero-image .hero-btn-pod a {
	font-size: 16px;
	padding: 1rem;
	color: #fff;
	border: 1px solid #fff;
	border-radius: 4px;
	background: rgba(0,58,111,.8);
	text-decoration: none;
	text-shadow: rgba(50,50,50,.5) 1px 1px 1px;
	transition: all ease-out .5s;
	white-space: nowrap;
    display: block;
    margin-bottom: 1rem;
	max-width: 300px;
}
.hero-image .hero-btn-pod a:hover,
.hero-image .hero-btn-pod a:focus {
	background: rgba(0,0,0,.8);
	text-decoration: underline;
	color: #fff !important;
}

	@media (min-width: 500px) {
		.hero-image .hero-btn-pod {
    gap: 5%;
}
}
	@media (max-width: 769px) {
		.hero-image {
        background-image: 
			-webkit-linear-gradient(top left, rgba(0,58,111,1) 0%, rgba(0,58,111,0.5) 40%, rgba(0,58,111,0) 60%), url("/common/images/hero/june-50th-no-logo.png");
		min-height: 300px;
    	background-position: right 20%;
		background-repeat: no-repeat;
	}	

	}







/* &&& Modifed CARS hero*/
	
	@media (max-width: 767px) {

}
    /* hero image on car page */
	.hero-image-2 {
        background-image: linear-gradient(rgba(0, 84, 164, 0.3), rgba(0, 84, 164, 0.3)), url("/common/images/hero/hero_car.jpg");
		background-position: top right;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		min-height: 300px;
	}

	.hero-image-2 .hero-text {
		text-align: left;
		position: left;
		padding: 2% 5% 0% 5%;
		color: #fff;
	}

	.hero-image-2 .hero-text h1{
		font-size: 36px;
		font-weight: bolder;
		text-align: left;
		position: absolute;
		position: left;
		padding: inherit;
		color: #fff;
	}

	
	@media (min-width: 767px) {
		
		.hero-image-2 {
		background-position: top;
		min-height: 360px;
	}
		
		
	.hero-image-2 .hero-text {
	  text-align: center;
	  position: center;
	  padding: 2% 5% 0% 5%;
	  color: #fff; width:100%;
	}		
	.hero-image-2 .hero-text h1 {
	  font-size: 24px;
	  font-weight: bold;
	  text-align: center;
	  position: absolute;
	  position: center;
	  padding: inherit;
	  color: #fff;
	}
	
.dropdown a button {
    background-color: #eee !important;
    border-color: #eee !important;
}
	}

    
	

	