/* CSS - SITE WIDE */

@import url('https://fonts.googleapis.com/css?family=Montserrat:500');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');

h1.mainHeader{
	color: #666;
	font-size: 2rem;
}

h1.subHeaderContent{
	color: #333;
	font-size: 1.5rem;
	font-weight: 700;
	margin-top: 75px;
}

h1.subHeader{
	color: #333;
	font-size: 1.25rem;
	font-weight: 700;	
}

body {
    margin:0px;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    background-color: #000e2f;
}

div.content{
    width: 100%;
    background-color: #fff;
}

div.content_container{
    width: 950px;
    padding: 50px 0;
    margin: 0 auto;
    overflow: auto;
}

div.content_container a{
    text-decoration: none;
    color: #2d70c0;
}

div.dynamicContent{
	overflow: auto;
	clear: both;
    margin-bottom: 50px;
}

div.dynamicContent p{
    line-height: 1.6;
    padding:0;
    margin:0;
}


div.dynamicContent ul{
	margin:0;
}

div.dynamicContent ul li{
	padding:5px 0;
	font-size:1rem;
	line-height:1.6;
}


div.dynamicContent a{
	text-decoration: none;
	color: #2d70c0;
}


/* 2-COLUMN */

div.left{
    width:22%;
    overflow: auto;
    float:left;
}

div.right{
    width:72%;
    overflow: auto;
    float:right;
}

ul.leftColumn{
    margin: 0;
    padding: 0;
}

ul.leftColumn li{
    list-style: none;
    padding:10px 5px;
    border-bottom:1px solid #eaeaea;
}

ul.leftColumn li a{
    text-decoration: none;
    color:#2d70c0;
    font-size: 1rem;
}

div.right h1.mainHeader{
    margin:0;
    padding:0 0 20px 0;
}

div.right p.areaDesc{
    margin:0 0 50px 0;
}

.material-icons.md-34 {
    padding-right:10px; 
    vertical-align: bottom;
}

div.areaURL{
    margin:15px 0;
    overflow: auto;
}


/* NAV and HEADER */
div.header{
    overflow: auto;
    width:950px;
    margin:0 auto;
}

div.nav{
    width: 100%;
    background-color:#ececec;
    overflow: auto;
    background-image: url(images/nav_bg.png);
    background-repeat: repeat-x;
    background-position: top let;
    background-size: contain;
}

ul.dtNav{
    width:950px;
    margin:15px auto 5px auto;
    padding:0;
    overflow: auto;
}

ul.dtNav li{ 
    list-style: none;
    padding: 5px 25px 5px 0;
    float: left;
}

ul.dtNav li a{  
    text-decoration: none;
    color:#222;
	font-size:1rem;
}


h1.program_header{
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    color: #182a60;
}


/* BODY - BANNER */
.jssorb21 {
	position: absolute; 
}

.jssorb21 div, .jssorb21 div:hover, .jssorb21 .av {
	position: absolute;
	width: 19px;
	height: 19px;
	text-align: center;
	line-height: 19px;
	color: white;
	font-size: 12px;
	background: url(images/b21.png) no-repeat;
	overflow: hidden;
	cursor: pointer;
 
}
.jssorb21 div { background-position: -5px -5px; }
.jssorb21 div:hover, .jssorb21 .av:hover { background-position: -35px -5px; }
.jssorb21 .av { background-position: -65px -5px; }
.jssorb21 .dn, .jssorb21 .dn:hover { background-position: -95px -5px; }

.jssora21l, .jssora21r {
	display: block;
	position: absolute;
	width: 55px;
	height: 55px;
	cursor: pointer;
	background: url(images/a11.png) center center no-repeat;
	overflow: hidden;
}
.jssora21l { background-position: -3px -33px; }
.jssora21r { background-position: -63px -33px; }
.jssora21l:hover { background-position: -123px -33px; }
.jssora21r:hover { background-position: -183px -33px; }
.jssora21l.jssora21ldn { background-position: -243px -33px; }
.jssora21r.jssora21rdn { background-position: -303px -33px; }	

/* FOOTER */


div.footer{
    width:100%;
    padding: 25px 0;
    overflow: auto;
    color:#eaeaea;
}

ul.footer_links{
    width: 950px;
    margin: 0 auto;
    padding: 0;
    overflow: auto;
}

ul.footer_links li{ 
    float: left;
    list-style: none;
    padding:5px 25px 5px 0;
    font-size: .75rem;
    width: 30%;
}

ul.footer_links li a{
    font-size: .75rem;
    text-decoration: none;
    color:#eaeaea;
}





/* ################### MOBILE ################### */




@media only screen and (max-device-width: 500px){

    body {
        font-size: 18px;
    }

	div.content_container{
		width: 96%;
		margin:0 auto;
		padding: 5% 2%;
		overflow: auto;
	}
	
	h1.mainHeader{
		font-size: 2rem;
	}
	
	h1.subHeader{
		font-size: 1.5rem;
	}


    /* HEADER AND NAV */

    div.nav{
        background-image:none;
    }
    


    div.nav{
        width:300%;
        margin:0;
        padding:0;
    }

    h1.program_header{
        font-size: 1rem;
        color: #fff;
        margin:2% 0;
    }

    div.mNav{
		display: block;
		padding:0;
		background-color:#000E2F;
		width: 100%;
		margin: 0 auto;
		background-image: none;
		overflow: auto;
	}
	
	
	#mMenu{
		width: 30px;
        margin: 10px 10px 10px 20px;
	}
	
	
	ul.mMenu{
		display: none;
		padding:10px 5px;
		position: absolute;
		left: 0;
		z-index: 100;
		background-color: #F4F4F4;
	}
	
	ul.mMenu li{
		list-style: none;
		padding: 10px 20px;
		border-bottom: 1px solid #ccc;
		
	}
	
	ul.mMenu li span{
		font-size: 1rem;
		color: #000;
	
	}
	
	ul.mMenu li:last-child{
		border-bottom: none;
	}
	
	ul.mMenu li a{
		font-size: 1rem;
		color: #000;
		text-decoration: none;
	}

	ul.mMenu li.mHide{
		display: none;
		padding:0;
		border: none;
	}
	
	ul.mSubMenu{
		margin: 0;
		padding: 15px 0;
		background-color: #fff;
		border-bottom: 1px solid #ccc;
	}

	ul.mSubMenu li{
		list-style: none;
		padding: 5px 20px;
		border: none;
	}
	
	ul.mSubMenu li a{
		font-size: 1rem;
		color: #000;
		text-decoration: none;
	}
	
	ul.mSubMenu li strong.menuSideSubTitle{
		font-size: 1rem;
		color: #369;
		padding-left: 20px;
	}
	

    div.left{
        display:none;
    }
    
    div.right{
        width:100%;
        overflow: auto;
        float:none;
    }




	/* FOOTER */
	
	div.footer{
		width:100%;
		margin: 0 auto;
	}

	
	ul.footer_links{
		margin:10px auto;
        width: 95%;
	}


    ul.footer_links li{
        float: none;
		font-size: 1rem;
        text-align: center;
        width:100%;
        padding: 20px 0;
    }   
        
		
	ul.footer_links li a{
		text-decoration:none;
		color:#b1dffd;
		font-size: 1rem;
	}

}
/* end */