/* CSS Document */

	*, *::before, *::after
	{
	    box-sizing: border-box;
	}
	
	.gridContainer {
		padding-bottom:60px;
	}
	
	.lightGray {
		color:#555;
	}

	.lighterGray {
		color:#777;
	}
	
	.errormsg {
		width:100%;
		text-align:center;
		color:#930;
		font-weight:bold;
	}
	
	.clear {
		clear:both;
	}
	
	.fixedwidth {
		font-family:"Courier New", Courier, monospace;
	}
/* skip navigate styles	*/

#skiptocontent a {
	padding:6px;
	position: absolute;
	top:-40px;
	left:0px;
	color:white;
	border-right:1px solid white;
	border-bottom:1px solid white;
	border-bottom-right-radius:8px;
	background:transparent;
	-webkit-transition: top 1s ease-out, background 1s linear;
    transition: top 1s ease-out, background 1s linear;
    z-index: 100;
}

#skiptocontent a:focus {
	position:absolute;
	left:0px;
	top:0px;
/*	background:#BF1722; */
	background:#b21010;
	outline:0;	
	-webkit-transition: top .1s ease-in, background .5s linear;
    transition: top .1s ease-in, background .5s linear;
}
	
/* Formats for tables */
.formatting_table {
	width:100%;
	border:none;
	table-layout:auto; 
	margin-bottom:15px;
}

.formatting_table td {
	padding-right:5px;
}

.formatting_table .collapsecol {
    width: 0px;
}

.formatting_table .titleRow {
	font-weight:bold;
	font-size:1.1em;
	padding:5px 0px 5px 0px;
	background-color:#ACC1B9;
}
.formatting_table tr, .formatting_table th{
	height:	20px;
}
	
/* debugging */
/*
div {
	border: dotted 1px #00FFCC;
}
*/

/* initial body styles */

	body {
		font-family:Arial, Helvetica, sans-serif;
/*        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; */
	}
	
	#header_area{
		background-color:#000;
		color:#fff;
		background-image:url(/assets_uc2016/headerbg.jpg);
		background-repeat:repeat-x;
/*		margin-bottom:14px; */
		margin-bottom:40px;
	}
	
	#uofglogo {
		padding-left:8%;
	}
	
	#uofg_logo_link	a {
		text-decoration:none;
	}


/* show and hide elements. Works with P7_SwapClass from PVII ============================ */

	.showit {
		visibility:visible;
		position:relative;
		left:0px;
		height:auto;
		width:auto;
	}
	
	.hideit {
		visibility:hidden;  
		position:absolute;
		left:-1000px;
		height:0px;
		width:0px;
	}
	
	#skip-link {
		visibility:hidden;
		height:0px;
	}
	
/* Screen reader only text ============================================================== */

	.sr-only{
		position:absolute; 
		width:1px;
		height:1px;
		padding:0;
		margin:-1px;
		overflow:hidden;
		clip:rect(0,0,0,0);
		border:0}
		
/* Android style menu selector/collapsor ================================================ */
	#expand_upper_menus	{
		float:right;
		padding:20px 20px 20px 20px;
	}
	
	#upper_menus_and_search_panel{
	}
	
	
/* Wrapper around the UofG Logo and upper area menus and search ========================= */

	#upper_logo_menus_and_search_panel {
		height:auto;
	}
	
/* Wrapper around ONLY the upper area menus and search ========================= */
	#upper_menu_and_search_panel {
		float:left;
		width:100%;
		padding-top:0px;
	}
	
/* Upper Main Navigation ================================================================ */

	#upper_right_navbar {
		font-size: 1.2em;
		background-color:#444;
	    color:#FFF;
	}
	
	#upper_right_navbar a:link, #upper_right_navbar a:visited {
	  color:#FFF;
  	  text-decoration: none;
	  padding: 4px 10px 4px 0px;
	}
	
	#upper_right_navbar a:hover, #upper_right_navbar a:active {
	  width:100%;
	  background-color:#990100;
	  color:#FFF;
	  outline-width: thin;
	  outline-style: dotted;	  
	  padding: 4px 10px 4px 0px;
	}	
	
	#upper_right_navbar {
		margin:0px 0px 0px 0px;
		padding:0px 0px 0px 60px;
	}

	#upper_right_navbar > li
    {
		display:block;
		padding: 12px 10px 12px 25px;
		color:#FFF;
        position: relative;
        display: block;
		background-repeat:no-repeat;
		background-position:left;
     }
	 
	 #mail_glyph {
		 background-image:url(/assets_uc2016/email_glyph.gif);
	 }
	 #courselink_glyph {
		 background-image:url(/assets_uc2016/courselink_glyph.gif);
	 }
	 #directory_glyph {
		 background-image:url(/assets_uc2016/directory_glyph.gif);
	 }
	 #library_glyph {
		 background-image:url(/assets_uc2016/library_glyph.gif);
	 }
	 #map_glyph {
		 background-image:url(/assets_uc2016/map_glyph.gif);
	 }
	 #webadvisor_glyph {
		 background-image:url(/assets_uc2016/webadvisor_glyph.gif);
	 }
	 #weather_glyph {
		 background-image:url(/assets_uc2016/weather_glyph.gif);
	 }
	

/* Search function */	 
	.search_function {
		clear:both;
		float:left;
		width:100%;
		padding:10px 45px 10px 45px;
		margin-bottom:15px;
		font-size: 0.95em;
		border-top:solid 1px #000000;
		border-bottom:solid 1px #000000;
	}
	
	#searchtext {
		float:left;
		padding:0px 10px 0px 10px;
		background-color:#FFF;
		border-style:solid;
		border-color:#cccccc;
		border-width:1px;
		border-radius:4px 0px 0px 4px;
		-moz-border-radius:4px 0px 0px 4px; 
		-webkit-border-radius:4px 0px 0px 4px; 
		height:34px;
		width:80%;
	}
	
	#searchsubmit{
		margin:0px 0px 0px -3px ;
		padding:0px 10px 0px 10px;
		background-color:#FFF;
		border-style:solid;
		border-color:#cccccc;
		border-width:1px;
		border-radius:0px 4px 4px 0px;
		-moz-border-radius:0px 4px 4px 0px;
		-webkit-border-radius:0px 4px 4px 0px;
		height:34px;
		vertical-align: top;
	}
	
/* Middle Navigation */
	 
	#middle_navbar {
		background-color:#444;
		clear:right;
		margin:0px 0px;
		font-size: 1.2em;
	}
	
	#middle_navbar > li {
		display:block;
		padding: 15px 5px 10px 5px;
		color:#FFF;
		position: relative;
	}

	#middle_navbar a:link, #middle_navbar a:visited {
	  color:#FFF;
  	  text-decoration: none;
	  padding: 10px 15px 6px 15px; 
	}
	
	#middle_navbar a:hover, #middle_navbar a:active {
	  background-color:#b30100;
	  outline-width: thin;
	  outline-style: dotted;
	  padding: 10px 15px 6px 15px; 
	}
	
/* Edit menu */
	#edit_menu {
		background-color:transparent;
		position:absolute;
		top:95px;
		right:0px;
		font-size: 1.1em;
	}
	
	#edit_menu > li {
		display:block;
		padding: 10px 5px 10px 5px;
		color:#FFF;
		position: relative;
		float:left;
	}

	#edit_menu a:link, #edit_menu a:visited {
	  color:#FFF;
  	  text-decoration: none;
	  padding: 10px 15px 6px 15px; 
	}
	
	#edit_menu a:hover, #edit_menu a:active {
	  background-color:#b30100;
	  outline-width: thin;
	  outline-style: dotted;
	  padding: 10px 15px 6px 15px; 
	}

	
/* User navigation menu */

	#user_navbar {
		width:100%;
		clear:right;
		background-color:#444;
		font-size: 1.1em;
		color:#FFF;
		margin:0px 0px 0px 0px;
	}
	
	#user_navbar > li {
  	  list-style:none;
 	  padding: 12px 10px 12px 20px;
	}
	
	#user_navbar a:link, #user_navbar a:visited {
	  color:#FFF;
  	  text-decoration: none;
	}
	
	#user_navbar a:hover, #user_navbar a:active {
	  color:#FFF;
  	  text-decoration: none;
	  outline-width: thin;
	  outline-style: dotted;
	}	

/* Chemistry Department Link ============================================================ */	

	#chemistry {
	  background-color:#000;
	  font-weight:normal;
	  font-size: 1.1em;
	  margin:0px 0px 0px 0px;
	  padding:1px 0px 1px 15px;
	}
	
	#chemistry a:link, #chemistry a:visited {
	  color:#FFF;
  	  text-decoration: none;
	}
	
	#chemistry a:hover, #chemistry a:active {
	  width:100%;
	  color: #999999;
	  outline-width: thin;
	  outline-style: dotted;	  
	}	
	
/* Footer elements ====================================================================== */	
	#footer {
		position:fixed;
   		left:0px;
   		bottom:0px;
		padding:7px 0px 7px 0px;
	    width:100%;
		background-color:#000;
		color:#FFF;
		padding:10px;
		font-size:1.1em;
	}
	
	#footer .copyright {
		float:right;
		padding-right:20px;
	}
	
	#footer a {
		color:#FFF;
		padding-right:20px;
	}
	
	#footer a:link, #footer a:visited {
		text-decoration:none;
	}
	
	#footer a:hover, #footer a:active {
		text-decoration:none;
	}
	
	.clearfix {
		overflow: auto;
	}
	
	#skip {
		visibility:hidden;
		height:0px;
	}
	
	#footer_navbar {
		list-style:none;
		clear:right; 
		font-size: 1.1em;
		color:#FFF;
		margin:0px 0px 0px 0px;
	}
	
	#footer_navbar .blockwrapper
	{
	   float: left;
	}	
	
	#footer_navbar > li {
		float:left;
		display:block;
		padding: 5px 5px 5px 5px;
		position: relative;
	}
	
	#footer .flushright {
		float:right;
	}
	
	#footer_navbar a:link, #footer_navbar a:visited {
	  color:#FFF;
  	  text-decoration: none;
 	  padding: 2px 2px 2px 2px;
	}
	
	#footer_navbar a:hover, #footer_navbar a:active {
  	  text-decoration: none;
	  outline-width: thin;
	  outline-style: dotted;
 	  padding: 2px 2px 2px 2px;
	}
	
/*======================================================================================= */	
@media only screen and (min-width: 481px) {
/*======================================================================================= */	
	/* tablet */	
}

/*======================================================================================= */	
@media only screen and (min-width: 769px) {
/*======================================================================================= */	
	/* desktop */	

/* Wrapper to reposition entire panel of menus and search bar =========================== */
/* reposition items to sit between region containing UofG logo, and region showing Chemistry */

	#uofglogo {
		padding-left:5%;
	}

/* Hide Android style menu selector/collapsor ================================================ */
	#expand_upper_menus	{
		visibility:hidden;
		float:right;
		padding:0px 0px 0px 0px;
	}
	
	#upper_menus_and_search_panel{
		visibility:visible;
		position:relative;
		left:0px;
		height:auto;
		width:auto;
	}

/* Upper Main Navigation ================================================================ */

	#upper_right_navbar {
		position:absolute;
		top:-165px;
		right:5px;
		background-color:transparent;
		font-size: 1.1em;
	}
	
	#upper_right_navbar a:link, #upper_right_navbar a:visited {
	  color:#FFF;
  	  text-decoration: none;
	  padding: 10px 10px 10px 0px;
	}
	
	#upper_right_navbar a:hover, #upper_right_navbar a:active {
	  width:100%;
	  background-color:#990100;
	  color:#FFF;
	  outline-width: thin;
	  outline-style: dotted;	  
	  padding: 10px 10px 10px 0px;
	}	
	
	#upper_right_navbar > li
    {
		display:block;
		padding: 20px 10px 20px 17px;
		color:#FFF;
        position: relative;
        display: block;
        float: left;
		background-repeat:no-repeat;
		background-position:left;
     }
	 
	 #mail_glyph {
		 background-image:url(/assets_uc2016/email_glyph.gif);
	 }
	 #courselink_glyph {
		 background-image:url(/assets_uc2016/courselink_glyph.gif);
	 }
	 #directory_glyph {
		 background-image:url(/assets_uc2016/directory_glyph.gif);
	 }
	 #library_glyph {
		 background-image:url(/assets_uc2016/library_glyph.gif);
	 }
	 #map_glyph {
		 background-image:url(/assets_uc2016/map_glyph.gif);
	 }
	 #webadvisor_glyph {
		 background-image:url(/assets_uc2016/webadvisor_glyph.gif);
	 }
	 #weather_glyph {
		 background-image:url(/assets_uc2016/weather_glyph.gif);
	 }

/* Search function */	 
	.search_function {
		position:absolute;
		top:-127px;
		right:-45px;
		background-color:transparent;
		width:400px;
		font-size: 0.95em;
		border-top:none;
		border-bottom:none;
	}
	
	#searchtext {
		float:left;
		padding:0px 10px 0px 10px;
		background-color:#FFF;
		border-style:solid;
		border-color:#cccccc;
		border-width:1px;
		border-radius:4px 0px 0px 4px;
		-moz-border-radius:4px 0px 0px 4px; 
		-webkit-border-radius:4px 0px 0px 4px; 
		height:32px;
		width:80%;
	}
	
	#searchsubmit{
		margin:0px 0px 0px -3px ;
		padding:0px 10px 0px 10px;
		background-color:#FFF;
		border-style:solid;
		border-color:#cccccc;
		border-width:1px;
		border-radius:0px 4px 4px 0px;
		-moz-border-radius:0px 4px 4px 0px;
		-webkit-border-radius:0px 4px 4px 0px;
		height:32px;
		vertical-align: top;
	}
	
/* Middle Navigation */
	 
	#middle_navbar {
		background-color:transparent;
		position:absolute;
		top:-88px;
		right:0px;
		font-size: 1.1em;
	}
	
	#middle_navbar > li {
		display:block;
		float: left;
		padding: 14px 5px 10px 5px;
		color:#FFF;
		position: relative;
	}

	#middle_navbar a:link, #middle_navbar a:visited {
	  color:#FFF;
  	  text-decoration: none;
	  padding: 10px 15px 6px 15px; 
	}
	
	#middle_navbar a:hover, #middle_navbar a:active {
	  background-color:#b30100;
	  outline-width: thin;
	  outline-style: dotted;
	  padding: 10px 15px 6px 15px; 
	}	
	 
/* User navigation menu */





	#user_navbar {
		width:80%;
		color:#FFF;
		position:absolute;
		background-color:transparent;
		top:190px;
		right:10px;
	}
	
	#user_navbar > li {
		display:block;
		float: right;
		padding: 5px 10px 5px 10px;
		color:#FFF;
		position: relative;
	}
	
	
	#user_navbar a:link, #user_navbar a:visited {
	  color:#FFF;
  	  text-decoration: none;
	  padding:10px 5px 14px 5px;
	}
	
	#user_navbar a:hover, #user_navbar a:active {
	  background-color:#333333;
  	  text-decoration: none;
	  outline-width: thin;
	  outline-style: dotted;
	  padding:10px 5px 14px 5px;
	}

	.dropdown-content {
  		display: none;
 		position: absolute;
  		z-index: 1;	
	}

	.dropbtn:hover .dropdown-content {
  		display: block;
	}
	
}