/* Classes in this file are for the elements in the template. */
/* This includes footers, ankles, primary nav, secondary nav, search, and headers. */

@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
*/

.fluid {
	clear: both;
	margin-left: 0;
	width: 100%;
	float: left;
	display: block;
	background: white;
}
.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;        
}

#skip a, #skip a:hover, #skip a:visited {
	position:absolute; 
	left:0px; 
	top:-500px; 
	width:1px; 
	height:1px; 
	overflow:hidden;
}
#skip a:active, #skip a:focus {
	position:static; 
	width:auto; 
	height:auto;
}





/* Mobile Layout: 660px and below. */



/* ********* Sliding nav -- for phone sizes only ********* */
/* The menu is fixed, with width of none until someone clicks the hamburger. jQuery adds the active class. */
#primary_nav {
	display: none;
}
#button_container {
	display: none;
}
#body_wrapper {
	float: left;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#body_wrapper.active {
	float: none;
	position: fixed;
	left: -250px;
	height: 100vh;
	overflow: hidden;
}
#hamburger {
	display: block;
	height: 50px;
	width: 50px;
	cursor: pointer;
	position: absolute;
	top: 10px;
	right: 0px;
	z-index: 150;
	background: url('../images/icon-hamburger.png') no-repeat center center;
	background-color: rgba(35,35,35,0.0);
}
#sidebar_menu {
	font-family: Verdana,Geneva,sans-serif;
	-webkit-transition-property: all;
	-moz-transition-property: all;
	-o-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	transition-duration: 0.5s;
	display: none;
	float: left;
	background: #222222;
	height: 100%;
	width: 0;
	overflow-y: scroll;
}
#sidebar_menu.active {
	display: block;
	float: none;
	position: fixed;
	right: 0;
	z-index: 100;
	width: 250px;
	overflow-y: scroll;
}
#sidebar_menu ul {
	margin: 0;
	padding: 0;
	list-style-image: none;
	list-style-type: none;
}
#sidebar_menu li {
	margin-bottom: 1px;
	background: #202020;
	line-height: 1.4em;
	padding: 15px 0;
}
#sidebar_menu a {
	color: white;
	display: block;
	width: 250px;
	height: 100%;
	padding: 0 20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#sidebar_menu a:link {
	text-decoration: none;
}
form.gsc-search-box {
	margin-top: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 4px !important;
	margin-left: 10px !important;
	width: 75% !important;
	float: left !important;
}
/* these two eliminate a weird border situation that came cascading down from the responsive tables td */
#sidebar_menu form.gsc-search-box tr td:first-child {
	background-color: #606060 !important;
}
#searchbar form.gsc-search-box tr td:first-child {
	background-color: none !important;
}
/* --------------------- */
#sidebar_menu form.gsc-search-box tr td {
    border: none !important;
}
#sidebar_menu div.gsst_b {
    padding: 0;
}
input.gsc-input {
	font-size: 18px !important;
	color: white !important;
	background: #606060 !important;
	border: none !important;
	height: 32px !important;
	padding: 1px 8px !important;
	margin: 0  !important;
	width: 99% !important;
	border-color: #D9D9D9 !important;
}
.gsc-input-box {
    border: none !important;
}
.gsc-search-button {
	display: none;
}
.gsc-clear-button {
	display: none;
}
.gsc-search-button-ae {
	width: 25px;
	height: 25px;
	margin: 5px 0 0 8px;
	background: url('../images/icon-search.png') no-repeat center center;
	border: none;
	padding: 5px;
}
/* Google changed their search box. Here are some tweaks. */
table.gsc-search-box td.gsc-input, table.gsc-search-box td.gsib_a {
 padding-right: 10px;
}
.gsc-search-box-tools .gsc-search-box .gsc-input {
	padding-right: 10px;
}
.gsib_a {
	padding: 0 !important;
}
td.gsib_b {
	display: none;
}
/* ********* end of Sliding nav ********* */




/*header*/
.gridContainer {
	margin: auto;
	width: 91%;
	/*padding: 5px;*/
	background: white;
	position: relative;
}
#UObar {
	width: 100%;
	background-color: #154733;
	height: 72px;
	background-image:url('../images/background-header.png');
	position: absolute;
}
#UOLogo_container {
	width: 91%;
	margin: auto;
	position: relative;
}
#UOLogo {
	width: 200px;
	padding-top: 15px;
	float:left;
}
/*this class holds the search bar and program name and controls their left and right allignment with the rest of the elements, it's margin top pushes it down out of the menu bar otherwise it would overlap*/
#namebar {
	margin: auto;
	width: 91%;
	position: relative;
	margin-top:16px;
	background-color:#006241;
}
/*this container brings the green background all the way across the screen*/
#namebar_container {
	width: 100%;
	background: #006241;
	overflow: hidden;
}
#name {
	/*text-align: center;*/
	padding-top: 30px;
	font-size:2em;
	color: #ffd200;
	letter-spacing: 1px;
	font-family: 'Quadon-Light', 'Zilla Slab', serif;
}
#name_sub {
	color: #fff;
	letter-spacing: 1px;
	padding-bottom: 5px;
	text-align: center;	
}
#footer_bar1_container {
	width: 100%;
	background-color: #000;
	height:auto;
}
#footer_bar1 {
	width: 91%;
	margin:auto;
	color: #bbbbbb;
	padding-top: 30px;
	padding-bottom: 30px;
	/*background-image: url('../images/footer-logo-hires.png');*/
	background-repeat: no-repeat;
	background-size: 53px 44px;
	background-position: right bottom;
}
#footer_bar1 a {
	color: #bbbbbb;
	text-decoration: none;
}
#footer_bar1 a:hover {
	color: #ffd200;
}
.footer_txt {
	padding-top:10px;
	padding-bottom:10px;
	text-transform:uppercase;
}
.copyright {
	padding-top:10px;
	padding-bottom:10px;
}
#footer_bar2_container {
	width: 100%;
	background-color: #222222;
	padding-top: 50px;
	padding-bottom:20px;
}
#footer_bar2 {
	width: 91%;
	margin:auto;
	color: #fff;
}
#footer_bar2 a {
	color: #bbbbbb;
	text-decoration: none;
}
#footer_bar2 a:hover {
	color: #ffd200;
}
.sitemap_txt, .sitemap_copyright {
	padding-top:10px;
	padding-bottom:10px;
}
.sitemap_hd {
	padding-top:10px;
	padding-bottom:10px;
	text-transform:uppercase;
}
.zeroMargin_mobile {
	margin-left: 0;
}
.hide_mobile {
	display: none;
}






/*new sub menu*/
.menu_block {
	margin-top:32px;
	background: #F2F5DD;
	padding:25px;
}
.menu_block_hd a {
	text-decoration:none;
	text-transform:uppercase;
	font-size:.9em;
	padding-top:0px;
	font-weight:bold;
}
menu_block_hd a :hover {
	text-decoration:underline;
}
.menu_block ul {
	padding:0; 
	list-style-type:none; 
	width:100%;
}
.menu_block li {
	position:relative; 
	height:auto;
	padding-bottom:10px;
	padding-top:10px;
	border-bottom: 1px dotted #c0c0c0;
}
.menu_block li a {
	text-decoration:none;
}
.menu_block li:last-child {
	border-bottom: 1px dotted #c0c0c0;
}
.menu_block li :hover {
	text-decoration:underline;
}



















/*calendar block*/
.cal_block {
	margin-top:32px;
	margin-bottom:32px;
	padding-bottom:8px;
	background: #F2F5DD;
}
.cal_hd_container {
	width:100%;
	background-color:#006241;
}
.cal_block_hd {
	text-transform:uppercase;
	font-family: 'Quadon-Regular', 'Zilla Slab', serif;
	font-size:1.1em;
	/*font-weight:bold;*/
	color:#fff;
	padding-top:13px;
	padding-bottom:13px;
	padding-left:8px;
	padding-right:8px;
}
.cal_block_content {
	padding-top:8px;
	padding-left:8px;
	padding-right:8px;	
}





/*side block*/
.side_block {
	margin-top:32px;
	margin-bottom:32px;
	padding-bottom:8px;
	background: #F2F5DD;
}
.side_hd_container {
	width:100%;
	background-color:#006241;
}
.side_block_hd {
	text-transform:uppercase;
	font-size:.9em;
	font-weight:bold;
	color:#fff;
	padding-top:13px;
	padding-bottom:13px;
	padding-left:8px;
	padding-right:8px;
}
.side_block_content {
	padding-top:8px;
	padding-left:8px;
	padding-right:8px;	
}











/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

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

/* we don't use the sliding menu in sizes above phone */
#primary_nav {
	display: block;
}
#sidebar_menu {
	display: none;
}
#hamburger {
	display: none;
}
/**/
/* the color in this class controls the background color of the search box */ 
input.gsc-input{
	color: #fff !important;
	background: #154733 !important;
	height: 30px;
	/*margin-top: 5px;*/
}
.gsc-search-button-ae {
	width: 15px;
	height: 15px;
	margin: 10px 0 0 5px;
	background: url('../images/icon-search-small.png') no-repeat center center;
	border: none;
	padding: 5px;
}

.gridContainer {
	width: 96%;
	/*margin-top:3px;*/
}
#UOLogo_container {
	width: 96%;
}
/*this class controls the left and right alignment with the rest of the elements*/
#namebar {
	width: 96%;
}
#searchbar {
	position:absolute;
	top: 10px;
	right:-35px;
	width:45%;
}
/*the padding on this class will control how close the name of the program is to the logo bar, it's needed here to push the text down from the top of the namebar container as well as control text attributes*/
#name {
	text-align: left;
	padding-top:50px;
	font-size:2.3em;
}
#name_sub {
	text-align: left;	
}







/*primary navigation, tablet*/
/*this container brings the background all the way across the screen*/
#primary_nav_container {
	width: 100%;
	background: #F2F5DD;
	overflow: hidden;
}
/*this class correctly positions the primary nav relative to other elements on the page*/
#primary_nav {
	width: 96%;
	margin: auto;
	font-size: .95em;
	font-family: verdana;
}
#primary_nav ul {
	margin: 0;
	padding: 0;
	list-style-image: none;
	list-style-type: none;
}
.menu_item {
	line-height:50px;
	float: left;
	text-align: center;
	border-right:1px #d8dac6 solid;
}
/*used to get a left rule on the first menu item*/
.menu_item_first {
	border-left:1px #d8dac6 solid;
}
.menu_item a {
	text-decoration: none;
	color: #006241;
	padding: 14px 20px 14px;
}
.menu_item a:hover {
	background-color: #fff;
	text-decoration: underline;
}








/*footer*/
#footer_bar1 {
	width: 96%;
	padding-top: 15px;
	padding-bottom: 15px;
	background-position: right center;
}
.footer_txt {
	display:inline;
	padding-right: 25px;
}
#footer_bar2 {
	width: 96%;
}
.footer_left {
	width:30%;
	float: left;
	margin-right:20px;
}
.footer_center {
	width:30%;
	float:left;
	margin-right:20px;
}
.footer_right {
	width:25%;
	float:right;
}
.zeroMargin_tablet {
	margin-left: 0;
}
.hide_tablet {
	display: none;
}
.show_tablet {
	display: inline;
}

#left_tablet	{
	width: 47%;
	float: left;
}
#right_tablet	{
	width: 49%;
	float: right;
}
/*These classes are used on the sub pages. */

#subpg_leftcol {
	width: 30%;
	float: left;
}
#subpg_body {
	width: 67%;
	float: right;
}



}








/* Desktop 2 column Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

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



.gridContainer {
	/*margin-top:15px;*/
}
#UOLogo_nav a {
	float: right;
	text-transform: uppercase;
	padding-top: 20px;
	text-decoration: none;
	color:white;
	padding-right:20px;
}
#searchbar {
	width:30%;
}
#name {
	letter-spacing:.05em;
	font-size:2.5em;
}


/*primary navigation*/
/*there is zero padding-left inline on the template to allow the home menu item to align on the left with other page elements*/
.menu_item a {
	/*text-decoration: none;*/
	/*color: black;*/
	/*padding: 14px 1.1em 14px;*/
}





.copyright {
	display:inline;
}
#footer_bar1 {
	padding-top: 23px;
	padding-bottom: 23px;
}
.sitemap_txt {
	padding-top:3px;
	padding-bottom:3px;
}
.sitemap_hd {
	padding-top:12px;
	padding-bottom:3px;
}
.zeroMargin_desktop {
	margin-left: 0;
}
.hide_desktop {
	display: none;
}
.show_desktop {
	display: inline;
}

/* FOUNDATION TAGS */
a[href^='tel:']:link, a[href^='tel:']:visited {
	color: #54565b;
	font-weight: normal;
	text-decoration: none;
}
a[href^='tel:']:hover, a[href^='tel:']:active {
	color: #54565b;
	text-decoration: none;
}

/*These classes are used on the sub pages. They include sub menus, FAQs, staff and book images, etc.*/



/* ------------------ */




}









/* Large 3 column Desktop Layout: 1400px to a max of 1800px.  Inherits styles from: Mobile Layout and Tablet Layout. */

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

.gridContainer {
	max-width: 1500px;
}
#UOLogo_container {
	max-width: 1500px;
}
#searchbar {
	width:25%; 
}
#namebar {
	max-width: 1500px;	
}
#name {
	max-width: 1500px;
}
#primary_nav {
	max-width: 1500px;
}
#footer_bar1 {
	max-width: 1500px;
}
#footer_bar2 {
	max-width: 1500px;
}
.hide_desktop3 {
	display: none;
}
.show_desktop3 {
	display: inline;
}
/*These classes are used in the home page layout.*/
#left_desktop3 {
	width: 25%;
	float: left;
	margin-right:10px;
}
#center_desktop3 {
	width: 48%;
	float: left;
	margin-right:10px;
}
#right_desktop3 {
	width: 25%;
	float: right;
}
#left_desktop {
	width: 30%;
	float: left;
}
#right_desktop {
	width: 68%;
	float: right;
}
}