/* CSS Document */
/* CSS Document */

/* 	This document (global.css) serves two main functions:

	First, it builds the basic structure of every page. It does so by dividing the page into five main sections: Header (everything above the orange, horizontal navigation bar); Department (the orange, horizontal navigation bar); Left Menu (the vertical navigation area); Main Content (everything to the right of the Left Menu); and Footer (everything below the Main Content -- the orange, horizontal line and down).
	
	Second, it styles the Header, Department, and Footer sections.
	
	Note: Because this document controls the structure and appearance of the template, YOU SHOULD NOT NEED TO EDIT IT. In order to style and format your pages, edit your secondary style sheet. */
	
	
	


* {
	/* Turns off default padding and margins on ALL elements, including paragraphs (p) and headers (H1, H2, H3, etc.) */
	margin: 0;
	padding: 0;
	}
	
a, a:hover { 
	/* Turns off the automatically-generated line beneath every link.  To turn it back on, you will need to use the style "text-decoration: underline" or you can create a custom line using the "border-bottom" style */
	text-decoration: none;
	}

body {
	/* Styles the template's background colors and default fonts. */
	/* NOTE: "font-size" is set to 62.5% in order to change the default font from 16 pixels to 10 pixels (10 is 62.5% of 16).  In all of the secondary style sheets, you'll notice that font-size is determined by ems. So, for example, the main content is often displayed at 1.1em, which translates to 11 pixels (the default size, 10, multiplied by 1.1).  We use ems for a variety of reasons, the most important of which is that it allows font sizes to be customized by the user in Internet Explorer, thereby improving overall web accessibility */
	text-align: center;
	background: #cccccc url(../images/header-back.jpg) repeat-x top;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 62.5%;
	color: #333333;
	}
	
.skip {
	/* There is a "skip to main content" link in the template header that does not display in standard browsers. It is included for the benefit of seeing-impaired users who browse with text-reading devices */
	display: none;
	}

/* HEADER */

#header-outer {
	background: #999999;
	width: 100%;
}
#header-inner {
	/* Establishes the width of the header and styles it */
	width: 960px;
	height: 158px;
	margin: 0 auto;
	text-align: center;
	background: url(../images/header-inner-back_1.jpg) no-repeat center top;
	}
#header-inner h2 {
	/* The template includes several headings (H2s) that do not display in standard browsers.  They improve site accessibility by titling lists of links -- for example, the list of Frequently Used Tools in the header. NOTE: This expalins why there is not a standard H2 style.  Rather, H2 is styled for different purposes in different divs */
	display: none;
	}
.logo {
	/* In order to improve web accessibility, the header includes a simple text link (in addition to the clickable wordmark).  This style prevents it from displaying in standard web browsers */
	display: none;
	}

#header-menu {
	/* header-menu is the home of the Frequently Used Tools (Webmail, Tmail, Online@UT, and the A-Z index), which are organized as an unordered list in order to improve accessibility. */
	float: left;
	display: inline;
	width: 440px;
	padding-left: 20px;
	text-align: left;
	color: #888888;
	font-size: 1.1em;
	line-height: 25px;
	}
#header-menu ul li {
	/* Turns off the bullets that are typically found in an unordered list and displays the list horizontally rather than vertically (the default) */
	list-style: none;
	display: inline;
	}
#header-menu a {
	/* Styles the links in the Frequently Used Tools menu */
	color: #eeeeee;
	border-bottom: 1px solid #888888;
	padding-bottom: 1px;
	}
#header-menu a:hover {
	color: #ffffff;
	border-bottom: 1px solid #f77f00;
	padding-bottom: 1px;
	}
#header-search {
	/* header-search is the home of the UT search engine */
	float: right;
	display: inline;
	padding: 0px 10px 0px 0px;
	width: 230px;
	text-align: right;
	}
.searchbox {
	/* Styles the text field of the search engine */
	width: 111px;
	font-size: .9em;
	margin-top: 4px;
	padding: 1px 2px 0px 2px;
	}
.searchtext {
	/* Styles the drop-down menu of the search engine */
	width: 75px;
	font-size: .9em;
	}
.hide-search {
	/* Another hidden label included to improve web accessibility */
	display: none;
	}
	

/* CONTENT */

#content-outer {
	/* Establishes the width of the Content area and styles it */
	background: url(../images/main-back.jpg) repeat-y center;
	background-color: #ffffff;
	}
#content-inner {
	background-color: #ffffff;
	width: 960px;
	margin: 0 auto;
	text-align: center;
	}
	
	/* LEFT MENU */
	
#left-menu {
	/* Creates the Left Menu column */
	float: left;
	display: inline;
	}
#left-menu ul {
	list-style-type: none;
	}

	
	/* MAIN CONTENT AREA */
	
#main-content {
	/* main-content is everything to the right of the left menu. In all of the standard template designs, it is 720 pixels wide. */
	/* main-content can be used as a single, large content area or it can be sub-divided in two ways:
		 Two columns: main-twocol, main-right
		 Three columns: main-left, main-middle, main-right */
	float: right;
	display: inline;
	text-align: left;
	}
	
		/* COLUMN THAT MERGES MAIN LEFT AND MIDDLE COLUMNS */
		
#main-twocol {
	float: left;
	display: inline;
	}
	
		/* LEFT COLUMN */
	
#main-left {
	float: left;
	display: inline;
	}
	
		/* MIDDLE COLUMN */
	
#main-middle {
	float: left;
	display: inline;
	}
	
		/* RIGHT COLUMN */
		
#main-right {
	float: right;
	display: inline;
	}

	



/* FOOTER */

#footer-grey-outer {
	/* Extends the grey background across the full width of the browser */
	background: #ffffff url(../images/main-back.jpg) repeat-y center;
	width: 100%;
	}
#footer-grey-inner {
	/* Establishes the width of the grey footer and styles it */
	width: 930px;
	background: #005288;
	margin: 0 auto;
	color: #dddddd;
	line-height: 18px;
	font-size: 1.1em;
	text-align: left;
	padding: 15px 15px 45px 15px;
	}
#footer-grey-inner h2 {
	/* The template includes several headings (H2s) that do not display in standard browsers.  They improve site accessibility by titling lists of links -- for example, the list of Frequently Used Tools in the header. NOTE: This expalins why there is not a standard H2 style.  Rather, H2 is styled for different purposes in different divs */
	display: none;
	}
#footer-grey-inner ul li {
	/* Turns off the bullets that are typically found in an unordered list and displays the list horizontally rather than vertically (the default) */
	list-style: none;
	display: inline;
	margin-right: 10px;
	}
#footer-grey-inner a {
	/* Styles the links in the footer */
	color: #dddddd;
	border-bottom: 1px solid #999999;
	padding-bottom: 2px;
	}
#footer-grey-inner a:hover {
	color: #134343;
	border-bottom: 1px solid #134343;
	padding-bottom: 2px;
	}