@charset "utf-8";
/* CSS Document *//* MAIN CONTENT FIXES -- REMOVE AFTER COMPLETE REPLACE */
.main-content {
	/* float: none;  utia change  issue with calendar item view*/ 
	overflow: hidden;
}
.ut-content {
	max-width: 1260px;
	margin: 0 auto
}
/** HOW DOES THIS FLEX GRID THING WORK?? ---
-- ...glad you asked!  :)  ...
This is set up like a a twelve column table.
____________________________
|1|2|3|4|5|6|7|8|9|10|11|12| <table><tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td>
____________________________</tr></table>

And, just like a table, you can combine rows if you need.
____________________________
|1  |3  |5 6 7 8|9|10 11 12|
____________________________
<td colspan="2">1</td><td colspan="2">3</td><td colspan="4">5 6 7 8</td><td>9</td><td colspan="3">10 11 12</td>

However, we would now do it like this:
<div class="ut-gridRow">   (this is equivalent to <table style="width:100%;"><tr>...)
    <div class="ut-col ut-span#-12"> ... content ...</div> 
	...where # is the column width* [Ranges from 1 to 12]> -- these are like <td colspan="#">	
	...The grid is set up to where you can have 12 equally spaced columns
</div>( and this would be like the closing of the table row and table </tr></table>)
Just remember that the colmun span totals cannot exceed 12..ie:
	<div class="ut-col ut-span4-12">...</div>
	<div class="ut-col ut-span4-12">...</div>
	<div class="ut-col ut-span4-12">...</div>
			....4+4+4 = 12	
	<div class="ut-col ut-span6-12">...</div>
	<div class="ut-col ut-span6-12">...</div>
			....6+6 = 12 ....etc.

This also takes care of the mobile styling.  When the screen is below a certain width, everything (almost) 
goes to 100% width and wraps the next content to the next line.  There are some exceptions:
3x3x3x3 goes to 6x6 and then to 100% (3<br/>3<br/>3<br/>3<br/>)
2x2x2x2x2x2 goes to 3x3x3<br/>3x3x3 and finally to 6x6<br/>6x6</br>6x6

To make a layout with 1full column at the top, 6 columns under it, and 3 columns under that, you would do this...
<div class="ut-gridRow">
	<div class="ut-col ut-span12-12">...</div>
</div>
<div class="ut-gridRow">
	<div class="ut-col ut-span2-12">...</div>
	<div class="ut-col ut-span2-12">...</div>
	<div class="ut-col ut-span2-12">...</div>
	<div class="ut-col ut-span2-12">...</div>
	<div class="ut-col ut-span2-12">...</div>
	<div class="ut-col ut-span2-12">...</div>
</div>
<div class="ut-gridRow">
	<div class="ut-col ut-span4-12">...</div>
	<div class="ut-col ut-span4-12">...</div>
	<div class="ut-col ut-span4-12">...</div>
</div>
.. 
The "break" points could be modified to different sizes depending on the needs and also the mobile set up.

To display content for mobile only you could add this to the end of any class:  class="... ut-mobileOnly" 
*/

/* ==== These are styles of flex grids === */
.ut-cf {
	content: "";
	display: table;
	clear: both
}
.ut-desktopOnly {
	display: none;
}
.ut-mobileOnly {
	display: block;
}
.ut-tabletOnly{
	display:none;
}
.ut-gridRow {
	margin: 0 0 1.6%;
	padding: 0;
	clear: both;
	box-sizing: border-box;
	overflow: hidden;
}
.ut-gridRow:after, .ut-gridRow:before {
	content: "";
	display: table
}
.ut-gridRow:after {
	clear: both
}
.ut-col, .ut-colFirst {
	display: block;
	float: none;
	margin: 1% 0;
	box-sizing: border-box
}
.ut-span1-12, .ut-span10-12, .ut-span11-12, .ut-span12-12, .ut-span2-12, .ut-span3-12,.ut-span3-12w, .ut-span4-12, .ut-span5-12, .ut-span6-12, .ut-span7-12, .ut-span8-12, .ut-span9-12, .ut-span1-5 {
	width: 100%;
	margin: 0;
	padding: 0;
	float: none;
	box-sizing: border-box;
	overflow: hidden
}
.ut-span2-12w {
	width: 49%;
	float: left;
	margin-right: 1%;
	margin-bottom: 1%
}

.ut-span1-5w {
		width: 48%;
		margin: 0 1% 1% 0;
		padding: 0;
		float: left;

	}


	.ut-span1-12w {
		width: 23.8%;
		margin: 0 1% 1% 0;
		padding: 0;
		float: left;
	}

@media (min-width:551px) {
	.ut-mobileOnly{
		display: none;
	}
	.ut-span2-12w {
		width: 32.33%;
		margin: 0 1% 1% 0;
		padding: 0;
		float: left;
	}
	.ut-span3-12w {
		width: 48%;
		margin: 0 1% 1% 0;
		padding: 0;
		float: left;
	}
	
	.ut-span1-12w {
		width: 15.33%;
		margin: 0 1% 1% 0;
		padding: 0;
		float: left;
	}	

	.ut-tabletOnly{
		display:block;
	}
	
}

@media (min-width:750px) {
	.ut-DesktopOnly {
		display: block
	}
	.ut-gridRow {
		margin-bottom: 0
	}
	.ut-col, .ut-colFirst {
		display: block;
		float: left;
		margin: 1% 0 1% 1.6%
	}
	.ut-col:first-of-type, .ut-colFirst {
		margin-left: 0
	}
	.ut-span12-12 {
		width: 100%
	}
	.ut-span11-12 {
		width: 91.53%
	}
	.ut-span10-12 {
		width: 83.06%
	}
	.ut-span9-12 {
		width: 74.6%
	}
	.ut-span8-12 {
		width: 66.13%
	}
	.ut-span7-12 {
		width: 57.66%
	}
	.ut-span6-12 {
		width: 49.2%
	}
	.ut-span5-12 {
		width: 40.73%
	}
	.ut-span4-12, .ut-span4-12w {
		width: 32.26%
	}
	.ut-span3-12, .ut-span3-12w {
		width: 23.8%
	}
	.ut-span2-12, .ut-span2-12w,  .ut-span1-12w {
		width: 15.33%
	}
	.ut-span1-12, .ut-span1-12w {
		width: 6.866%
	}
	.ut-span1-5, .ut-span1-5w{
		width:18.72%;
	}
	

}

/* =========================   Mobile adjustments for layout =============================*/
/* defaults */
/*  top main menu mobile settings */
		.ut-mobileMainMenu{
			display:none;
			margin:0;
			padding:0;
			width:100%;
			background-color:#ff7f00;
			height:36px;
			
		}
		.ut-mobileMainMenu a{
			line-height:2.6em;
			float:left;
		}
		
		#ut-mobileMainLink {
			color:#fff;
			font-size:14px;	
			padding-right:10px;
			line-height:2.6em;
		}
		
		#ut-mobileMainLink:hover{
			text-decoration:none;
			background:#517C96;
		}
		
		img.subMenuIcon{
			display:inline-block;
			vertical-align:middle;
			padding-top:4px;
			height:30px;
		}
		
		.ut-navbar-checkbox,.ut-menubar-checkbox{
			display:none;
		}
		.ut-topLinksButton label{
			cursor:pointer;
		}
		/*override any other labe styles if needed*/
		label.ut-mobileMainLink.ut-menulabel{
			cursor:pointer;		
			display:block;
			height:36px;
			width:32px;	
		}
		.ut-arrowUp{
			color:#fff;
			display:none;
			position:absolute;
			right:0;
			top:10px;
		}
		.ut-arrowDown{
			color:#fff;
			position:absolute;
			right:0;
			top:10px;
		}
		
.sitenametext{
	float:none; /*remove utiav2.css:221    */
}

/*... Header .... //logo, top links   */
/* Portrait tablet to landscape and desktop */
@media only screen and (min-width: 781px) and (max-width: 1023px) {
	.desktop{
	display:inherit;
	}
	.tablet{
	display:none;
	}
	.mobile{
	display:none;
	}

	.ut-topLinks{
	width:62%;
	}	
}
/**   ------   end of 781 - 979 media query ----------     **/

/* __ THIS IS JUST FOR THE MOBILE TOP LINKS ___ */
@media only screen and (max-width:780px){
	/*  font sizes all need to be changed to % and not fixed  */
	.s4-wpTopTable
	{
	max-width:750px!important;	
	} 

	.sitename{
		height: auto;
		font-size:1.7em;
		clear:both;
	}
	.sitenametext{
		padding:4px;
	}
	h1,h1#mainPageTitle{
		font-size:1.5em;
		line-height:normal;
	}
	/* ...  alert fonts */
	.ut-Alerts h2{
	font-size:1em;
	}
	/*turn alerts off */
	.ut-Alerts{
		display:none;
	}
	.ut-siteLogo {
	  width: 240px;
	  margin-left: 0;
	}

	/*restyle top links */
	ul#ut-toolbox, ul#ut-toolbox2 {
		background: #3C3C3C;
		width: 100%;
		border-radius:0;
	}
	ul#ut-toolbox li.n1,ul#ut-toolbox li.n2,ul#ut-toolbox li.n3,
	ul#ut-toolbox2 li.n1,ul#ut-toolbox2 li.n2,ul#ut-toolbox2 li.n3,
	ul#ut-toolbox li,ul#ut-toolbox2 li{
		padding:8px 0;
		margin:0 auto;
		border-left:none;
		border-right:none;
		border-bottom:1px solid #555;
		width:50%;
		display:inline-block;
		height:19px;
	}
	ul#ut-toolbox2 li:last-child{
		border-bottom:none;
	}
	ul#ut-toolbox li a, ul#ut-toolbox2 li a{
		color:#fff;
		font-size:100%;
		width:100%;
		margin:0;
		padding:0;
		float:none;
	}
	ul#ut-toolbox li:hover,ul#ut-toolbox2 li:hover{
		background:#517c96;
	}
	ul#ut-toolbox2 li:last-child:hover{
		border-radius:0 0 0 10px;
	}

	/*  top right links */
	ul#ut-toolbox, ul#ut-toolbox2{
		display:none;
	}
	#ut-topLinks{
		/*height:48px;*/
		float:right;
		z-index:200;
	}
		
	#ut-mobTopLinks{
		padding:0px;
		margin:0px;
		margin-top:6px;
		display:block;
		float:right;
		width:150px;
		text-align:right;
		display:block;
		border-radius:0 0 8px 8px;
		
	}
	.ut-topLinksButton label{
		margin:0px;
		background:#3C3C3C;/*#4C4D4F;*/
		text-decoration:none;
		color:#fff;
		padding:4px 14px 6px 0;
	}

	/* search Area */
	.nightandday #s4-searcharea	{	
		top:12px;
	}
	/* styles to open mobile top links and change look*/
	.ut-navbar-checkbox:checked ~ .ut-topLinks #ut-mobTopLinks{
		border-radius:0;
	}
	.ut-navbar-checkbox:checked ~ .ut-topLinks ul#ut-toolbox2{
		border-radius:0 0 10px 10px;
	}
	.ut-navbar-checkbox:checked ~ .ut-topLinks ul#ut-toolbox2 {
		display:block;
	}
	.ut-navbar-checkbox:checked ~ .ut-topLinks ul#ut-toolbox {
		display:block;
	}

	
	.ut-navbar-checkbox:checked ~ .ut-topLinks span.ut-arrowDown{
		display:none;
	}	
	.ut-navbar-checkbox:checked ~ .ut-topLinks span.ut-arrowUp{
		display:block;
	}

	/* search modification */
	#s4-searcharea{
	padding:0;
	right:0;
	top:4em;
	position:absolute;
	}
	
	/*  utia change */
	.nightandday #s4-searcharea{
		width:230px;
		margin:0;
		
		right:0;
		font-size:1.1em;
	}	
		#s4-searcharea td{
	float:right;
	}
	/* stop utia change */
	
	.nightandday .s4-search .ms-sbtable{
	width:100%;
	}


	/*hide search box if top links clicked*/
	.ut-navbar-checkbox:checked ~ .ut-topLinks #s4-searcharea{
		display:none;
	}	

	/* Styles to open top menu if clicked */
	#ut-menubar-checkbox:checked + ul#ut-topGlobalMenu {
		display:block;
	}
	
	/*footer */
	.ut-footerImage img{
	  float: none;
	  width: 100%;
	  max-width: 280px;
	  padding-left: 0;	
	  
  }
  .ut-footerText p{
	text-align:center;
	padding:0 6px;
	}
 
	/*main menu */
	/*hide regular menu */
	.nightandday-menu{
		display:none;
	}
	 .menu-horizontal ul.static{
		display:none;
	}
	
	/*resize menu space */
	#menu{
  		background: url("images/bg-nav1.png") repeat-x scroll 0 0 #F77F00;
  }
	.ut-mobileMainMenu{
		display:block;
	}
 /* restyle main drop down menu */
	.menu-horizontal ul.static{
		padding:0;
	}
	.menu-horizontal li.static,.menu-horizontal li.static.selected{
		box-sizing:border-box;
		float:left;
		width:50%;
		border-bottom:1px solid #C1C2C4;
		padding:0;
		border-right:1px solid #C1C2C4;
		min-height:6em;
	}
	.menu-horizontal li.static{
		background:#D4D2C4;
	}
 	.menu-horizontal li.static.selected{
		background:#626B74;
	}
	.menu-horizontal a.static, .menu-horizontal span.static{
		color:#222;
		font-size:14px;
		box-sizing:border-box;
		width:100%;
	}
	.menu-horizontal a.static.selected{
		color:#eee;
	}
	.menu-horizontal li.static:hover{
		background-color:#517C96;
	}
	.menu-horizontal li.static:hover a{
		color:#fff;
	}
	
	/* hide sub menus for now */
	li.static ul.dynamic{
	background:#517c96;
	/*	display:none; */
	}
	/* styles to open mobile main menu*/
	
	#ut-menubar-checkbox:checked + #menu .nightandday-menu ,	
	#ut-menubar-checkbox:checked + #menu .menu-horizontal ul.static{
		display:block;
	}

	.menu-horizontal{
		background:#444;
	}
}
/*---------------- */

@media only screen and (max-width: 550px) {
	.s4-wpTopTable
	{
	max-width:450px!important;	
	} 

	.container{
		width:100%;
	}
	.sitename{
		height: 50px; /* utia change */
		font-size:1.4em;
		border-radius:0; /* remove rounding */
	}
	
	/* hide breadcrumb */
	.breadcrumb {
		display:none;
	}
	#ut-mobTopLinks {	
		margin:0px;
		padding:0px;
		height:48px;
		overflow:hidden;
		background:none;
		width:54px;
		text-align:center;
	}
	.ut-topLinksButton label{
		padding:0;
	}

	#header{
	height:50px;
	}
	.ut-topLinksButton{
		margin:0px;
		padding:0px;
		background:none;
		height:34px;
		margin-top:12px;
	}
	.ut-topLinksButton a{
		background:none;
		padding:0px;
		margin:0px;
	}
	#ut-toolbox,#ut-toolbox2{
	display:none;
	}
	.ut-topLinks{
		z-index:120;
		width:auto;
		right:0;
		height:44px;
	}
	.ut-mobileMainMenu{
		height:48px;
	}
		
	/* restyle search box */
	.s4-search input.ms-sbplain {
		 background: none;
		border-radius: 14px 0 0 14px!important; 
		-moz-border-radius: 14px 0 0 14px; 
		-webkit-border-radius: 14px 0 0 14px; 	 
		box-shadow:none;
		 width:200px!important;	
		 border:0;
		 height:24px;
		 padding-left:4px;
	}
	#s4-searcharea .s4-search select.ms-sbscopes{
		background-color:#ff8200;
		color:#eee;
	}
	
	.s4-search .srch-gosearchimg {

		height:24px;
	}	
	/* for search area */
	.nightandday #s4-searcharea{
		width:230px;
		margin:0;
		top:41px; /* utia change */
		right:0;
		font-size:1.1em;
	}	
	#s4-searcharea td{
	float:right;
	}
	.nightandday .s4-search .ms-sbtable{
	width:100%;
	}
	
	/* resize logo */
	.ut-siteLogo {
	  width: 160px;
	  margin-left:4px;
	  position:absolute;
	  z-index:140;
	}
	/*  mobile version of logo */
	.ut-siteLogo a{
		width:150px;
		background:url('images/logos/logoM.png') no-repeat 0 0 transparent;
		height:34px;
		margin-top:3px;
		display:block;		
	}
	
	/* corner T */
	label.ut-mobQuickMenu {
		background:url('images/logos/utM.png') no-repeat 0 transparent;	
		height:32px;
		/*width:32px;*/
	}
	/*  make body wider 100% */
	body #s4-bodyContainer{
	width:100%;
	}	

	/* burgermenu resize */
		img.subMenuIcon{
		height:38px;
		}	
	/* drop down to single line menus */
	.menu-horizontal li.static,.menu-horizontal li.static.selected{
		box-sizing:border-box;
		width:50%;
		width:100%;
		float:none;
		border-bottom:1px solid #333;
	}
	
}

/*   THIS IS FOR FIXED MENU STYLING ONLY  **************** */


/*
position: absolute;
top: 209px;
right: 0;
width: 32.26%;
display: block;
*/
@media only screen and (max-width: 1050px) {
	#ut-topGlobalMenu > li > a{
	font-size:14px;
	}

	#ut-topGlobalMenu ul li a{
		font-size:90%;
	}
}

@media only screen and (max-width: 800px) {
   #ut-topGlobalMenu{
		display:none;
	}	
}

.ut-left {
float:left;
}
.ut-right {
float:right;
}
.ut-center {
text-align:center;
}