/* CSS Document */

/* 	This document began as one of the standard design templates created by UT's Office of Creative Services and has since been customized by the ITC for MTAS. 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.  If you have any questions, please contact: webteam@utk.edu */


body {background: #666 url(main-back.gif) repeat-x top;}


/* HEADER */


#header-outer {
	/* header-outer-back sits behind the UT and main MTAS banner and creates the shadow effect on either side */
	background: transparent url(header-outer-back.gif) no-repeat center top;
	}
	


/* HOME PAGE - NEWS AND EVENTS */

#main-content #news { 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #555;
	font-size: 1.1em;
	line-height: 1.5em;
	padding: .8em 0;
	letter-spacing:.02em;
	margin:0px;
}	


#main-content #news .resources { 
	background: url(news_resources.gif) no-repeat 0px 0px;
	margin: 0px 0px 0px 0px;
    padding: 0px 24px 10px 66px;
}

#main-content #news .services { 
	background: url(news_services.gif) no-repeat 0px 0px;
	margin: 0px 0px 0px 0px;
    padding: 0px 24px 10px 66px;
}

#main-content #news .training { 
	background: url(news_training.gif) no-repeat 0px 0px;
	margin: 0px 0px 0px 0px;
    padding: 0px 24px 10px 66px;
}

#main-content #news .directors { 
	background: url(news_directors.jpg) no-repeat 0px 0px;
	margin: 0px 0px 0px 0px;
    padding: 0px 24px 10px 66px;
}

#main-content #news .events { 
	background: url(news_events.gif) no-repeat 0px 0px;
	margin: 0px 0px 0px 0px;
    padding: 0px 24px 10px 66px;
}

#main-content #news p strong {
	color: #555;
	font-size: 1.2em;
	line-height: 1.4em;
	padding-top: 1.5em;
	font-weight:bold;
}	
	
/* PHOTO BORDERS */	
	
.border-photo {
	/* Adds a shaded margin and border */
	border: 1px solid #d5d5bf;
	}
.right-float-photo {
	/* Adds the hairline border, and also floats the image to the right with a bit of padding so that text does not butt up directly beside it */
	border: 1px solid #d5d5bf;
	float: right;
	margin: 5px 5px 5px 15px;
	}
.left-float-photo {
	/* Adds a hairline border, and also floats the image to the left with a bit of padding so that text does not butt up directly beside it */
	border: 1px solid #d5d5bf;
	float: left;
	margin: 8px 15px 15px 0px;
	}

/* INSIDE BANNER  */

#inside-banner {	
	width: 960px;
	height: 43px;
	text-align: left;
	margin: 0px 0px -12px 0px;
	padding:0px;
}
	
/* MAIN CONTENT AREA */


#content-outer {
	/* Establishes the width of the Content area and styles it. side-fade is a background image that creates the drop-shadow on either side of the main area */
	background:  #fff url(side-fade.gif) repeat-y center top;

	}
	
#content-inner {
	background:  none;
	overflow: hidden;
	}
	

h1 {
	/* Styles the main heading.  NOTE: Each page should have only one H1 */
	color:#444;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 24px;
	line-height: 24px;
	font-weight: lighter;
	border-bottom: 1px #196C84;
	padding: 14px 0px 0px 0px;
	}

.resources h1 {
	color:#196C84;
}

.services h1 {
	color:#3A9826;
}

.training h1 {
	color:#ba4b26;
}

.about h1 {
	color: #ef9a19;
}


#main-content {
	/* Establishes the width of the main content area.  */
	background: #fff;
	padding-top: 1em;
	padding-bottom: 2000px;
	padding-left:20px;
	padding-right:20px;
	margin-bottom: -2000px;
	margin-top:0px;
	width: 680px;
	float:left;
	font-size: 11px;
	line-height: 17px;
	color: #666666;

	}
#main-content p {
	/* Styles everything within p tags <p> . . . </p> */
	font-size: 11px;
	line-height: 17px;
	padding: .3em 0 .4em 0px;
	margin:0px;
	color: #666666;
	font-weight:lighter;
	}
#main-content h2 {
	/* Styles all Heading 2s in the main content area. Use H2 for the main subheads in your content */
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 17px;
	line-height: 17px;
	margin: 10px 0px 0px 0px;
	padding:0px;
	color:#ef9a19;
	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-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 17px;
	line-height: 17px;
	margin: 10px 0px 0px 0px;
	padding:0px;
	color: #666;
	font-weight: bold;
	}
	
#main-content h4 {
    /* Styles all Heading 4s in the main content area. Use H4 for breaking up text already divided by H2s or H3s.            For example, use H4 to title a small ordered list that is found under a main subhead (H2) */
    font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 14px;
    margin: 6px 0px 0px 0px;
    padding:0px;
    color: #555;
    }
	
#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:#5F5F5F;
	border-bottom: 1px dotted #E68735;
	font-weight:normal;
	}
#main-content a:hover {
	color:#5F5F5F;
	font-weight:normal;
	border-bottom:none;
	}
	
#main-content #list ul {
	/* Styles all unordered lists in the main content area */
	padding-left: 0px;
	margin-left: 0px;
	list-style:none;
	}
	
#main-content #list ul li {
	list-style:none;
	}
#main-content #list ul li a {
	list-style:none;
	color:#0C6C8B;
	padding-left: 0px;
	margin-left: 0px;
	font-weight: normal;
	
	}

#main-content ul {
	/* Styles all unordered lists in the main content area */
	padding-left: 15px;
	margin-left: 15px;
	}
#main-content ul li {
	list-style: disc url(bullet.gif) #555;
	}
#main-content ol {
	/* Styles all ordered lists in the main content area */
	padding-left: 15px;
	margin-left: 22px;
	}
#main-content #highlight {
	padding:12px 20px 16px 20px;
	background:#FDF1C3;
	background-color:#FDF1C3;
	margin: 0px 0px 12px 0px;
}

#main-content blockquote {
	padding-left: 20px;
	
}


    /*  TABLES  */

table {
	text-align:left;
	border:none;
	margin:0px;
	/* width:90%; */
	border-collapse: collapse;
}

table.border  {
	text-align: left;
	border:1px;
	margin:0px;
	padding:0px;
	width:90%;	
}

table.border th {
	border-right: 1px solid #DDD;
	border-left: 1px solid #DDD;
	border-top:1px solid #DDD;
	background:#CCCCCC;
}

table.border td {
	border: 1px solid #CCC;
}

table.line td {
	border-bottom: 1px solid #DDD;
	border-right:none;
	border-left:none;
}

table.line th {
	border-top: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	padding:4px 6px;
	margin:0px;
	vertical-align: baseline;
	font-weight:normal;
}

table .odd td, table .odd th, table .border .odd, table .line .odd {
	background-color:#e6e6e6;
	background:#e6e6e6;
	border-right: 1px solid #DDD;
	border-left: 1px solid #DDD;
}
table th {
	padding:4px 6px;
	margin:0px;
	font-weight:normal;
	background-color:#CCCCCC;
	background:#CCCCCC;
	vertical-align:top;
}

td {
	padding:4px 6px;
	margin:0px;	
	vertical-align:top;
}



	/* LEFT MENU */
	
#left-menu {
	/* left-menu styles the main menu column, including the font size */
	width: 240px;
	padding-bottom: 40000px;
	margin-bottom: -40000px;
	text-align: left;
	font-size: 1.1em;
	/* different-menu-back.gif is a background image that is being repeated horizontally.  It creates the effect of a semi-transparent menu */
	background:#EAEBEE; /*url(http://www.utk.edu/cs/templates/images/different-menu-back.gif) repeat-x center top*/
	}
#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 strong {
	color: #3c424e;
	font-weight: bold;
}

#left-menu-resources {
	color:#fff;
	font-weight: bold;
	font-size: 1.4em;
	list-style: none;
	padding: 0 5px 0 19px;
	margin: 0 5px;
	line-height: 24px;
	display: block;
	width: 206px;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	background:#196C84;
	border-bottom: 1px dotted #d2dfe0;
}

#left-menu-services {
	color:#fff;
	font-weight: bold;
	font-size: 1.4em;
	list-style: none;
	padding: 0 5px 0 19px;
	margin: 0 5px;
	line-height: 24px;
	display: block;
	width: 206px;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	background:#3A9826;
	border-bottom: 1px dotted #d2dfe0;
}

#left-menu-training {
	color:#fff;
	font-weight: bold;
	font-size: 1.4em;
	list-style: none;
	padding: 0 5px 0 19px;
	margin: 0 5px;
	line-height: 24px;
	display: block;
	width: 206px;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	background:#ba4b26;
	border-bottom: 1px dotted #d2dfe0;
}


#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" */
	font-size: 1.4em;
	list-style: none;
	color: #3c424e;
	padding: 0 15px;
	line-height: 30px;
	display: block;
	width: 210px;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	background:#D5D3D3;
/*	border-bottom: 1px solid #d2dfe0;  */
	}
#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;
	display: block;
	width: 210px;
	text-decoration: none;
	background: #3d4656;
	}

#left-menu ul li ul li a {
	/* Styles the MINOR 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" */
	color:#222;
	list-style: none;
	font-size:1.2em;
	padding: 0 5px 0 25px;
	margin: 0 5px;
	line-height:20px;
	display: block;
	width: 190px;
	background:#EAEBEE;
	}
#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;
	display: block;
	width: 190px;
	background:#C3C3C3;
	}
	
#left-menu ul li ul li ul li a {
	/* Styles the MINOR 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" */
	color:#666;
	list-style: none;
	font-size:1.1em;
	padding: 2px 5px 2px 35px;
	margin: 0 5px;
	line-height:1.1em;
	display: block;
	width: 195px;
	background:#EAEBEE;
	}
#left-menu ul li 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;
	display: block;
	width: 195px;
	background:#C3C3C3;
	}



/*ROUNDED CORNER BOX*/

#xsnazzy h1, #xsnazzy p {font-family: Arial, Helvetica, sans-serif; padding-bottom:4px; padding-top:4px; padding-left:4px; margin:0 14px;}
#xsnazzy h1 {font-size: 15px; color: #ef9a19; font-weight: bold; padding-top:12px; border-bottom: 1px dotted #333; line-height:18px;}
#xsnazzy strong {  }
#xsnazzy h2 {font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#ef9a19; font-weight: bold; padding-bottom:2px; padding-top:12px; padding-left:4px; margin:0 14px;}
#xsnazzy a {color:#4F4F4F;}
#xsnazzy a:visited {color:#4F4F4F;}
#xsnazzy a:hover {color:#4F4F4F;}
#xsnazzy p {
	font-size: 11px; 
	line-height: 16px; 
	color:#555E67;
/*	border-bottom:1px dotted #658DAE;*/
	/*background: url(bullet3.gif) no-repeat 0 9px;*/
	}
/*#xsnazzy h2 {padding-top:0.5em;}*/
#xsnazzy {
	background: transparent; 
	margin:0px; 
	font-size: 11px; 
	line-height: 16px; 
	color:#555E67;}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background: #EBECE6; border-left:1px solid #ccc; border-right:1px solid #ccc;}
.xb1 {margin:0 5px; background:#ccc;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; background:#EBECE6; border:0 solid #ccc; border-width:0 1px;}

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

	/* MAIN LEFT COLUMN */
	
#main-left {
	/* Establishes the width of main-left */
	text-align: left;
	width: 400px;
	}
	
#main-leftfull {
	/* Establishes the width of main-left */
	text-align: left;
	width: 600px;
	}

	/* MAIN RIGHT COLUMN */
	
#main-right {
	/* Establishes the width of main-right */
	text-align: left;
	width: 220px;
	float:right;
	/*padding-top: 161px
	padding-bottom: 2000px;
	margin-bottom: -2000px;*/
	}
	
	
/* Unused colors:

#943e0a  burnt orange 
#A97400  brownish orange
#ef9a19  golden yellow
#E3EEFA  super-light blue
#1c3f6b	 deep but energetic blue
#10769A	 deep + vivid blue
#895509  brown
#8B8472  gray tan

*/