/* CSS Document */

/* 	This document (simple.css) is one of the standard design templates created by UT's Office of Creative Services. It is a secondary style sheet and is intended to work in combination with global.css.

	NOTE: In order to customize this style sheet, you will need to save a copy onto your own web space.  */





/* HEADER */

h1 {
	/* Styles the main heading.  NOTE: Each page should have only one H1 */
	color: #436868;
	font-family: "trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 2.2em;
	line-height: 1em;
	margin: 1em 0em 0.5em 0em;
	font-weight: bold;
	border-bottom: 1px solid #a4b6b6
	}
	
.border-photo {
	/* Adds a shaded margin and border */
	background-color: #fef7bc;
	padding: 3px;
	border: 1px solid #d5d5bf;
	}
.right-float-photo {
	/* Adds the shaded margin and border, and also floats the image to the right with a bit of padding so that text does not butt up directly beside it */
	background-color: #ffffff;
	padding: 3px;
	border: 1px solid #436868;
	float: right;
	margin: 10px 0px 5px 10px;
	}
.left-float-photo {
	/* Adds the shaded margin and border, and also floats the image to the left with a bit of padding so that text does not butt up directly beside it */
	background-color: #fef7bc;
	padding: 3px;
	border: 1px solid #d5d5bf;
	float: left;
	margin: 0px 15px 15px 0px;
	}
	
.footer-logo {
	background:#005288;
	float: right;
	margin: 5px;
}
	

	
/* MAIN CONTENT AREA */

#main-content {
	/* Establishes the width of the main content area and defines a default font.  The div is 700 pixels wide because there is 20 pixels of margin on the left (20 + 700 = 720).  simple-main-back is a background image that creates the right drop-shadow on the main menu. */
	font-family: Arial, Helvetica, sans-serif;
	padding: 1em 20px 3em 20px;
	width: 700px;
	font-family: Arial, Helvetica, sans-serif;
	}
#main-content p {
	/* Styles everything within p tags <p> . . . </p> */
	font-size: 1.2em;
	line-height: 1.667em;
	margin: 1.667em 0;
	}
#main-content h2 {
	/* Styles all Heading 2s in the main content area. Use H2 for the main subheads in your content */
	font-size: 1.7em;
	line-height: 1.333em;
	margin: 1.666em 0em -0.333em 0em;
	color: #436868;
	font-weight: bold;
	}
	
#main-content h3 {
	/* Styles all Heading 3s in the main content area. Use H3 for the sub-subheads in your content. For example, use H3 to title a small ordered list that is found under a main subhead (H2) */
	font-size: 1.2em;
	line-height: 1.667em;
	margin: 2.334em 0em 1em 0em;
	color: #134343;
	}

#main-content a {
	/* Styles all links in the main content area.  NOTE: The line beneath the link is being controlled by the "bottom-border style" */
	color: #003333;
	border-bottom: 1px solid #003333;
	padding-bottom: 0.5px;
	}
#main-content a:hover {
	color: #526d2a;
	border-bottom: 1px solid #526d2a;
	padding-bottom: 1px;
	}
#main-content ul {
	/* Styles all unordered lists in the main content area */
	padding-left: 15px;
	margin-left: 15px;
	line-height: 2em;
	}
#main-content ul li {
	list-style-type: square;
	font-size: 1.2em;
	line-height: 2em;
	}
#main-content ol {
	/* Styles all ordered lists in the main content area */
	padding-left: 15px;
	margin-left: 15px;
	}
#main-content ol li {
	font-size: 1.2em;
	line-height: 1.667em;
	}

#main-content-list {
	padding-left: 20px;
	width: 615px;
}


	/* LEFT MENU */
	
#left-menu {
	/* left-menu styles the main menu column */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	width: 210px;
	text-align: left;
	padding-top: 20px;
	border-right: dotted #cccccc 2px;
	margin-top: 10px;
	}
	
#left-menu 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;
	}
	
#left-menu ul li a {
	/* Styles the Major Link Buttons.  NOTE: This is where you would adjust the STATIC color of the MAJOR Link button.  To do so, simply change the hexadecimal value of "background-color" */
	list-style: none;
	color: #003333;
	display: block;
	width: 185px;
	padding: 0.5em 15px;
	font-size: 1.3em;
	font-weight: bold;
	}
	
#left-menu ul li a:hover {
	/* Styles the Major Link Buttons.  NOTE: This is where you would adjust the HOVER color of the MAJOR Link button.  To do so, simply change the hexadecimal value of "background-color" */
	list-style: none;
	color: #005288;
	display: block;
	width: 185px;
	text-decoration: underline;
	}
	
#left-menu ul li ul li a {
	/* Styles the Major Link Buttons.  NOTE: This is where you would adjust the STATIC color of the MINOR Link button.  To do so, simply change the hexadecimal value of "background-color" */
	list-style: none;
	color: #003333;
	display: block;
	width: 185px;
	font-size: 1.1em;
	padding: 0.5em 0px 0.4em 25px;
	}
#left-menu ul li ul li a:hover {
	/* Styles the Major Link Buttons.  NOTE: This is where you would adjust the HOVER color of the MINOR Link button.  To do so, simply change the hexadecimal value of "background-color" */
	list-style: none;
	color: #005288;
	display: block;
	width: 185px;	
	}

#top-menu-nav {
	font-size: 94%;
	text-align: center;
	font-weight: bold;
}

#top-menu-nav ul {
	list-style: none;
	margin: 15px 5px;
	padding: 0;
	padding-top: 1em;
}

#top-menu-nav li {
	display: inline;
}

#top-menu-nav li a:link, #top-menu-nav li a:visited {
	color: #ffffff;
	text-decoration: none;
	background-color:#436868;
	padding: 0.4em 1.1em 0.4em 1.1em;
	border: 1px solid #003333;

}

#top-menu-nav li a:hover {
	color: #ffffff;
	background-color: #003333;
}

#top-menu-nav li a.active {
	background-color: #A4B6B6;
	color: #003333;
}

	
	/* COLUMN THAT MERGES MAIN LEFT AND MIDDLE COLUMNS */
	
#main-twocol {
	/* Establishes the width of main-twocol */
	width: 460px;
	}
	

	/* MAIN LEFT COLUMN */
	
#main-left {
	/* Establishes the width of main-left */
	text-align: left;
	width: 230px;	
	}
	
	
	/* MAIN MIDDLE COLUMN */
	
#main-middle {
	/* Establishes the width of main-middle */
	text-align: left;
	width: 500px;
	padding-left: 20px;
	padding-right: 30px;
	}
	
	
	/* MAIN RIGHT COLUMN */
	
#main-right {
	/* Establishes the width of main-right */
	text-align: left;
	padding-left: 10px;
	width: 200px;
	border-left: dotted #cccccc 2px;
}


#quicklinks {
	border: solid;
	border-width: 0.1pt;
	padding: 3px 5px 3px 5px;
	border-color: #4c617e;
	background-color: #e8eef5;
	font-weight: normal;
	line-height: 1em;
	width: 190px;
	float: right;
	margin-right: 5px;
	margin-top: 25px;
	margin-bottom: 20px;
}

#nextquicklink {
	border: solid;
	border-width: 0.1pt;
	padding: 3px 5px 3px 5px;
	border-color: #4c617e;
	background-color: #e8eef5;
	font-weight: normal;
	line-height: 1em;
	width: 190px;
	float: right;
	margin-right: 5px;
	margin-top: 10px;
	margin-bottom: 20px;
}

#quicklinks h3 {
	background-color: #436868;
	padding: 5px;
	margin:  -3px -5px -3px -5px;
	display: block;
	line-height: 2em;
	font-size: 1.3em;
	font-weight: bold;
	text-align: center;
	border-bottom: solid #e7d989 0.1pt;
	color: #ffffff;
}


#nextquicklink h3 {
	background-color: #436868;
	padding: 5px;
	margin:  -3px -5px -3px -5px;
	display: block;
	line-height: 2em;
	font-size: 1.3em;
	font-weight: bold;
	text-align: center;
	border-bottom: solid #e7d989 0.1pt;
	color: #ffffff;
}


#quicklinks p {
	font-size: 1.1em;
	line-height: 1.4em;
	color: #333333;
	padding: 10px 5px 5px 3px;
	text-align: left;
	margin: 1px 0 5px 10px;
}


#nextquicklink p {
	font-size: 1.1em;
	line-height: 1.4em;
	color: #333333;
	padding: 10px 5px 5px 3px;
	text-align: left;
	margin: 1px 0 5px 10px;
}
	
	
#quicklinks ul li a {
	margin: 1px 0 5px 0px;
	line-height: 2.5em;
	padding: 5px 0px 0px 0px;
	color:#4c617e;
	border-bottom: 1px solid #333333;
	padding-bottom: 1px;
	text-decoration: none;
}

#quicklinks a:hover {
	color: #134343;
	border-bottom: 1px solid #134343;
	padding-bottom: 1px;
}

img.projlogo {
	margin: 10px 22px;
}