/*	Default Layout
	92px columns, 24 px gutters, 72 px margins, 1234px total (extra space for scrollbars)
	-------------------------------------------------------------------------------
cols    1    2     3     4     5     6     7     8     9     10     11     12     13
px      68   160   252   344   436   528   620   712   804   896	988    1050   1142 */
/*---------Header Styles---------*/
.header {
        position: relative;
    }
.alert {
  background-color: #7ebe42; 
  color: white;
  margin-bottom: 15px;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    z-index: 1;
}
    .alert a {
        color: #fff;
        border-bottom: 2px solid #fff;
    }
    .alert p {
        text-align: center;
        margin:0;
        padding: 10px 0;
    }

/* The close button */
.closebtn {
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
    position: absolute;
    top: 10px;
    right: 10px;
}

/* When moving the mouse over the close button */
.closebtn:hover {
  color: black;
}

#header {	
	width: 100%;
    margin: 0 auto;
	position: relative;
	height: 80px;
	padding-top: 75px;
	background-image: url(/images/header/uen_noe.png);
	background-repeat: no-repeat;
	background-position: 100px 55px;
}
.title {
	font-family: 'TeXGyreAdventorRegular';
	font-size: 28px;
	color: #591479;
	letter-spacing: 1px;
	margin-left: 250px;
}
.title-mobile {display: none;}
a:hover.title {color: #591479;}
#logo-mark {
	position: absolute;
	top: 62px;
	left: 147px;
}
#logo:hover #logo-mark {transform: rotate(360deg) scale(1.3);}
#search {
	position:absolute;
	right:50px;
	top:45px;
	width:300px;
    margin: 20px auto 0;
	text-align: right;
	border: thin #DBDBDB solid;
	background: #fff;
	padding: 5px;
}
.gsc-search-button {
	width: 25px !important; 
	height: 25px!important;
	min-width: 25px!important; 
	text-indent: -9999px!important;
    background-image: url(/images/icons/search.png);
	background-repeat: no-repeat!important;
	z-index: 9999;
	position: relative;
    top: 5px;
}
.gsc-search-button-v2, .gsc-clear-button, .gsc-branding {display: none!important;}
.gsc-input {
	margin-right: 10px !important;
	background-image: none!important;
	box-shadow: none!important;
	border: none!important;
}
input.gsc-input, .gsc-input-box-focus, .gsc-input-box-hover {
	margin-top: 0!important;
	border: none!important;
	box-shadow: none!important;
	padding: 1px;
}
.search-az {
	position: absolute;
	top: 0;
	right: 50px;
	background: rgba(89,20,121,1);
	padding: 5px 20px;
	margin-bottom: 20px;
}
.search-az a {color: #fff;}
.search-az:hover {background: rgb(204,204,204);}

.chat {
	position: fixed;
	bottom: 0;
	right: 20px;
	background: rgba(89,20,121,1);
	padding: 5px 20px;
	margin-bottom: 20px;
	color: #fff;
	font-weight: bold;
	z-index: 200;
	text-align: center;
	border: solid thin #fff;
	line-height: 16px;
	font-size: 14px;
}
.chat a {
	color: #fff;
	text-decoration: underline;
	font-size: 14px;
}
.chat a:hover {color: rgb(204,204,204);}


/*---------Menu Styles---------*/
#menu-bar {
	width: 100%;
	height: 43px;
	background-color: rgba(89,20,121,1)
}
#menu {
	list-style: none;
	width: 100%;
    margin: 0 auto;
	position:relative;
	z-index: 100;
	font-size: 15px;
}
.menu_box {
	width: 1212px;
    margin: 0 auto;
	position:relative;
	z-index: 100;
}
.menu_box ul li {line-height: 15px;}
.k12 #k12, .higher #higher, .career-ed #career-ed, /*.general #general,*/ .profdev #profdev, .tv #tv, .distance #distance, .network #network, .about #about {
	color: #fff;
	border-bottom: 3px solid #d7bbf6;
}
.mobile {display: none; /* This is for the mobile menu, this keeps it hidden in the bigger versions */}
#menu ul {
	margin: 0;
	padding: 0;
}
#menu li {
	float:left;
	display:block;
	text-align: center;
	padding: 6px 6px 4px; /* 4px 11px 4px 11px; Ellen changeded on Aug 6*/
    margin: 7px 3px 0;
	border:none;	
}
#menu li:hover {
	background: #f7f7f7;
	border-radius: 5px 5px 0 0;	
}
#menu li a {
   	font-family: 'TeXGyreAdventorRegular';
	font-size: 15px;
	color: #EEE;
	text-decoration: none;
	font-weight: normal;
	text-transform: uppercase;
}
/*Ellen added on Aug 6*/
.lower {text-transform:none;}
#menu li:hover a {color:#591479;}
#menu .dropdown_full {
	width: 100%;
	margin:4px auto;
	float:left;
	position:absolute;
	left:-999em; /* Hides the drop down */
	text-align:left;
	padding:10px 5px;
	border-top:1px solid #f7f7f7;
    border-left: 1px solid #bbb;
    border-right: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
	background: #f7f7f7;
	border-radius: 5px;
}
#menu h3 {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 1px;
	padding-bottom: 5px;
	background-color: #f7f7f7;
	color: #006635;
	border-bottom: 1px solid #006635;
	font-family: 'TeXGyreAdventorRegular';
	margin: 2px 0 5px -2px;
	overflow: hidden; 
}
#menu li:hover .dropdown_full {
	left:-10px;
	top: auto;
	overflow: hidden;	
}
/* delay */
#menu li, #menu li a, #menu .dropdown_full{
/*transition*/
    transition:all 0s ease;
	font-weight: 100;
}
#menu li:hover, #menu li:hover a, #menu li:hover .dropdown_full{transition-delay:.25s;}
.padding { /* This adds padding to the menu links when needed */
	padding-left: 3px;	
	padding-right: 3px;	
}
.dropdown_full .img_middle, #footer .img_middle {margin: 0;}
.col_1, .col_2, .col_3, .col_4, .col_no {
	float: left;
	position: relative;
    margin: 0 5px -400px;
    padding: 0 0 400px 20px;
	border-left: solid #C5C5C5 1px;
}
.col_1:first-child, .col_2:first-child, .col_3:first-child, .col_4:first-child, .col_no:first-child {border: none;}
.col_1 {width:269px;}
.col_2 {width:317px;}
.col_3 {width:875px;}
.col_4 {width:1098px;}
.imgtext {
	width: 210px;
	color: #333;
	margin-top: 5px;
}
#menu .menu_right {
	float: right;
	margin-right: 0;
}
#menu li .align_right {border-radius: 5px 0 5px 5px;}
#menu li:hover .align_right {
	left: auto;
	right: -1px;
	top: auto;
}
#menu p {
	line-height:18px;
	margin: 15px 0 15px 5px;
}
#menu li:hover div a {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 15px;
	color: #346abd;
	letter-spacing: normal;
	text-shadow: none;
	text-transform: none;
	transition: padding .5s linear;
	font-weight: 100;
}
#menu li:hover div a:hover {color: #6689cc;}
#menu li ul {
	list-style-type: none;
	list-style-image: none;
	padding:0;
	margin:0 0 12px;
}
#menu li ul li {
	line-height:24px;
	position:relative;
	padding: 2px;
	margin:0;
	float:none;
	text-align:left;
	list-style-type: none;
	list-style-image: none;
}
#menu li ul li:hover {
	padding: 2px;
	border: 0;
 	background: none;
}
#menu li ul li a:hover {padding-left: 10px;}
#menu li .greybox li {
	background: #F4F4F4;
	border: 1px solid #bbb;
	margin: 10px 0;
	padding: 4px 6px;
	width: 170px;
    border-radius: 5px;
}
#menu li .greybox li:hover, #menu .more:hover{
	background: #fff;
	border: 1px solid #aaa;
	margin: 10px 0;
	padding: 4px 6px;
}
#menu li .greybox li a:hover, .more {padding-left:0;}
#menu .more {
	background: #F4F4F4;
	border: 1px solid #bbb;
	border-radius: 5px;
	margin: 0 0 10px;
	padding: 4px 6px;
}
#menu .more a, .greybox a {
	font-weight: 600 !important;
	font-size: 13px !important;
}
#menu li ul.instructors {
	padding: 0;
	overflow: hidden;
	margin: 0;
}
#menu li ul.instructors li {
	margin: 0 5px;
	padding: 3px;
	list-style-type: none;
	list-style-image: none;
	text-align: center;
	float: left;
}
#menu li ul.instructors li.last {margin-right: 0;}
#menu li ul.instructors img {
	display: block;
	margin: 0 0 3px;
}
#menu li ul.instructors a:hover {padding-left: 0;}
#menu .contact_col {
	padding: 5px;
	width: 145px;
	margin-right: 5px;
	float: left;
}
/*---------Footer---------*/
#footer-wrapper {
	width: 100%;
	background-color: #693883;
	color: #fff;
	margin-top: 0;
}
#footer {
	width: 1170px;
	position: relative;
    margin: 0 auto;
}
.footer-bottom {
	background-color: rgba(89,20,121,1);
    padding: 20px 0;
	font-weight: 100;
	font-size: 13px;
	line-height: 20px;
}
.footer-bottom a {
	color: #CCA9D1;
	font-weight: 100;
}
.footer-bottom a:hover {color: #fff;}
.footer-col {
	width: 29%;
	float: left;
	margin: 20px 12px;
	padding-left: 20px;
	border-left: thin #fff solid;
}
.no-border {border-left: none;}
.footer-col p {line-height: 12px;}
#footer h2 {
	color: #fff;
	border-bottom-color: #fff;
}
.top {
	float: right;
    margin: -15px 25px 0 0;
}
.close {
	position: absolute;
	right: 5px;
	top: 5px;	
}
.footer-msg {	
    float: left;
	position: relative;
    margin: 0 5px;
	padding-left: 20px;
	width: 350px;
}
#footer #field_result {
	text-align:center;
	font-weight: bold;
	color: #FF0004;
}
#footer a {
	color: #D7BFDB;
	font-weight: 100;
}
#footer a:hover {color: #fff;}
#footer img:hover {transform:scale(1.1);}
.footer-img {
	width: 56px;
	margin-bottom: 5px;
}
#contact .contact, #myuen .myuen {
    position: absolute;
    display: none;
    bottom: 85px;
    z-index: 100;
    background-color: #fff;
    border: 1px solid #777;
	padding: 9px;
	background: rgb(220,220,220); /* Old browsers */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
	border-radius: 5px;
}
#contact .contact {
	right: 25px;
	text-align: left;
}
.col {
	float: left;
	position: relative;
    margin: 0 5px;
    border-left: solid 1px #c5c5c5;
	padding-left: 20px; 
}
.col:first-child {border: none;}
#myuen .myuen {
	left: 25px;
	text-align: left;
}
.contact a, .myuen a {
	color: #6689cc !important;
	text-decoration: none;
	font-family:Helvetica, Arial, sans-serif !important;	
}
.contact a:hover, .myuen a:hover {color:#004BBC!important;}
#contact:hover .contact, #myuen:hover .myuen {display: block;}
#myuen:hover .myuen {width: 250px;}
#contact:hover .contact{
	width: 700px;
	overflow: hidden;	
}
.myuen input[type="text"], .myuen input[type="password"]{width: 155px;}
.contact input[type="text"], .contact input[type="password"], textarea {width: 250px;}
#footer label {
	float:left;
	width:80px;
	font-weight: 100;
}
#footer input {padding: 3px;}
#footer input[type="text"], input[type="password"] {width: 170px;}
#recaptcha-box-footer {position: relative;}
#recaptcha-box-footer input {width: 75px;}
#recaptcha-box-footer #protectwebform_image {
	width: 20%;
	margin-right:5px;	
}
#recaptcha-box-footer img:hover{transform:none;}
#recaptcha-box-footer #protectwebform_reload_block {
	position: absolute;
	top: 0;
	right: 80px;	
}
#recaptcha-box-footer #protectwebform_link_audio {
	position: absolute;
	top: 0;
	right: 55px;	
}
.footer-resource a {color: #fff !important;}
.footer-resource a:hover {color: #D7BFDB !important;}
.footer-resource img {
	height: 32px;
    padding: 0 20px 0 0;
}
/*		10 Column Layout: 992px. 
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */
@media only screen and (min-width: 992px) and (max-width: 1221px) {
/*---------Header Styles---------*/
.title {
	font-size: 25px;
	margin-left: 250px;
}
/*---------Menu Styles---------*/
#menu .dropdown_full {
	width: 943px;
	margin-left: 5px;
}
#menu li {
	padding: 4px; 
	margin-left: 1px;
}
#menu li a {
	font-size: 12px;
	letter-spacing: normal;
}
#menu li:hover div a {
	font-size: 12px;
	font-weight: bold;
}
#menu .imgshadow { /* Better style on light background */
	width: 175px;
	margin-left: 10px;
}
.col_1 {width:211px;}
.col_2 {width:256px;}
.col_1, .col_2, .col_no {
    margin: 0 5px -400px;
	padding-left: 10px;
}
#menu li .greybox li {width: 160px;}
#menu li .greybox img {
	width: 28px;
	height: 28px;
}
#menu li ul.instructors img {width: 60px;}
#menu .contact_col {
	padding: 5px;
	width: 115px;
	margin-right: 5px;
}
.more img {
	height: 20px;
	width: 20px;	
}
.menu_box {width: 991px;}
/*---------Footer---------*/
#footer {width: 950px;}
.footer-col {
	width: 28.5%;
	margin: 20px 12px;
	padding-left: 15px;
}
}
/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */
@media only screen and (min-width: 768px) and (max-width: 991px) {
/*---------Header Styles---------*/
#header {background-position: 20px 55px;}
.title {
	font-size: 19px;
	margin-left: 170px;
}
#logo-mark {left: 67px;}	
#search {
	width:250px;
	right: 20px;
}
.search-az {right: 20px;}
/*---------Menu Styles---------*/
#menu {width: 768px;}
.menu_box {
	width: 768px;
	margin-left: auto;
	margin-right: auto;
	position:relative;
	z-index: 100;
}
#menu li {
	padding: 3px 0;
	margin-left: 5px; 
}
#menu li:last-child {padding-right: 0;}
#menu li a {
	font-size: 9px;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
}
#menu li:hover div a {font-size: 10px;}
#menu .dropdown_full {
	width: 750px;
	margin-top: -1px;
	margin-left: 11px;
}
#menu li:first-child .dropdown_full {border-left: none;}
#menu h3 {font-size: 13px;}
.col_1 {width:173px;}
.col_2 {width:183px;}
.col_1, .col_2, .col_no {
	margin-left: 3px;
	margin-right: 3px;
	padding-left: 5px;
}
#menu li .greybox li {width: 150px;}
#menu li .greybox img {
	width: 24px;
	height: 24px;
}
#menu .more a, .greybox a {
	font-weight: 600 !important;
	font-size: 11px !important;
}
#menu li ul.instructors img {width: 50px;}
.more img {
	height: 18px;
	width: 18px;	
}
#menu .imgshadow {
	width: 145px;
	margin-left: 5px;
}
.imgtext {
	width: 170px;
	font-size: 11px;	
}
.padding {padding-top: 2px;}
/*---------Footer---------*/
#footer {width: 768px;}
.footer-col {	
	width: 30%;
	margin-left: 5px;
	margin-right: 5px;
	padding-left: 10px;
}
#footer .paddingTop {padding: 0;}
.footer-img {width: 50px;}
#footer input[type="text"], input[type="password"] {margin-top: 5px;}
}
/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */
@media only screen and (max-width: 479px) {
/*---------Header Styles---------*/
#header {
	height: 50px;
	background-image: none;
	padding: 8px 0;
}
.title, #logo, #logo-mark {display: none;}
.title-mobile {
	display: block;
	font-size: 15px;
	position: absolute;
	top: 5px;
	left: 2px;
	margin-left: 10px;
	font-family: 'TeXGyreAdventorRegular';
	color: #6d28aa;
	letter-spacing: 1px;
}
a:hover.title {color: #6d28aa;}
.logo {
    margin-top: 10px;
	width: 80px;
}
.gsc-clear-button {padding-left: 3px !important;}
.gsc-input {
    margin-right: 0 !important;
    text-indent: 5px!important;    
}
.gsc-input-box {padding:0!important;}
.gsib_a {padding: 0!important;}
#search {
	width:230px;
	height: 22px;
	top: 51px;
	right:5px;
}
.search-az {display: none;}
/*---------Menu Styles---------*/
#menu {
	width: 97%;
	margin-left: 0;
}
#menu-bar {height: 45px;}
.menu_box {
	width: 97%;
	margin-left: 0;
}
.mobile {display: block;}
.menu-hidden {display: none;}
.menu-unhidden {display: block;}
#menu li {
	text-align: left;
	width: 100%;
	padding: 10px;
	margin: 0;
	background: #E4E4E4;
	border-bottom: thin #909090 solid;
}
#menu li a {
	color: #6689cc;
	text-shadow: none;
}
#menu li:hover {
	background: #fff;
	border-radius: 0;	
}
#menu .dropdown_full {display: none;}
.k12 #k12, .higher #higher, .general #general, .profdev #profdev, .tv #tv, .distance #distance, .network #network, .about #about {
	color: #6689cc;
	border: none;
}
.padding {
	padding-left: 0;
	padding-right: 0;	
}
/*---------Footer---------*/
#footer {
	width: 100%; 
	margin: 5px auto 15px;
}
.footer-col {
	width: 90%;
	height: auto;
	float: left;
    margin: 20px 0 10px;
	padding-left: 15px;
	border-left: none;
}
.no-border {border-left: none;}
.footer-col p {line-height: 12px;}
#footer ul {
	width: 315px;
	padding-left: 0;
}
#footer li {
	width: 48px;
	padding-left: 3px;
	padding-right: 3px;
	margin: 0 4px;
}
.footer-msg {
    margin-left: 5px;
	margin-right: 5px;
	padding-left: 5px;
	width: 275px;
}
#contact .contact {
	right: 0;
	text-align: left;
	bottom: 55px;
}
#contact-left {display: none;}
#contact:hover .contact{width: 280px;}
.contact input[type="text"], .contact input[type="password"], textarea {width: 270px;}
.col {
	padding-left: 0;
	border: none; 
}
}
/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436   */
@media only screen and (min-width: 480px) and (max-width: 767px) {
/*---------Header Styles---------*/
#header {
	height: 52px;
	background-image: none;
}
.title, #logo, #logo-mark {display: none;}
.title-mobile {
	display: block;
	position: absolute;
	font-size: 22px;
	letter-spacing: 1px;
	top: 40px;
	margin-left: 20px;
	font-family: 'TeXGyreAdventorRegular';
	color: #6d28aa;
}
.logo {width: 120px;}
#search {
	top:112px;
	right: 5px;
	width:300px;
	padding: 0;
}
.search-az {right: 0;}
.gsc-search-button {top: 5px;}    
.gsc-input {
    margin-right: 0 !important;
    text-indent: 5px!important;    
}
.gsc-input-box {padding:4px 0!important;}
.gsib_a {padding: 0!important;}
/*---------Menu Styles---------*/
#menu {
	width: 98%;
	margin-left: 0;
}
#menu-bar {height: 45px;}
.menu_box {
	width: 98%;
	margin-left: 0;
}
.mobile {display: block;}
.menu-hidden {display: none;}
.menu-unhidden {display: block;}
#menu li {
	text-align: left;
	width: 100%;
	padding: 10px;
	margin: 0;
	background: #E4E4E4;
	border-bottom: thin #909090 solid;	
}
#menu li a {
	color: #6689cc;
	text-shadow: none;
}
#menu li:hover {
	background: #fff;
	border-radius: 0;	
}
#menu .dropdown_full {display: none;}
.k12 #k12, .higher #higher, .general #general, .profdev #profdev, .tv #tv, .distance #distance, .network #network, .about #about {
	color: #6689cc;
	border: none;
}
.padding {
	padding-left: 0;
	padding-right: 0;	
}
/*---------Footer---------*/
#footer {
	width: 100%;
	margin: 5px auto 15px;
}
.footer-col {
	width: 30%;
	margin: 20px 0 25px;
    padding-left: 15px;
}
#footer .paddingTop {padding: 0;}
#footer ul {
	width: 480px;
	padding-left: 0;
}
#footer li {
	width: 73px;
	padding-left: 5px;
	padding-right: 5px;
	margin: 0 5px;
}
.footer-text {text-indent: -9999px;}
.footer-img {width: 50px;}
.footer-msg {
    margin-left: 5px;
	margin-right: 5px;
	padding-left: 5px;
	width: 425px;
}
#contact .contact, #myuen .myuen {bottom: 75px;}
#contact .contact {
	right: 5px;
	text-align: left;
}
#contact-left {display: none;}
#contact:hover .contact{width: 460px;}
.contact input[type="text"], .contact input[type="password"], textarea {width: 425px;}
.col {
	padding-left: 0;
	border: none; 
}
.footer-resource img {
	height: 33px;
	padding-right: 8px;
}
#footer input[type="text"], input[type="password"] {
	width: 150px;
	height: 22px;
	margin-top: 5px;
}
}