/* CSS Document */



* {
	/* 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: #333333;
	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;
	}
h1 {
	/* Styles the main heading.  NOTE: Each page should have only one H1 */
	color: #666699;
	font-family: "trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 2em;
	line-height: .9em;
	/*border-bottom: 1px solid #aaaaaa;*/
	margin: 1em 0em 0.5em 0em;
	font-weight: lighter;
	}
	h11 {
	/* Styles the main heading.  NOTE: Each page should have only one H1 */
	color: #666699;
	font-family: "trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 2em;
	line-height: .9em;
	/*border-bottom: 1px solid #aaaaaa;*/
	margin: 1em 0em 0.5em 0em;
	font-weight: lighter;
	}
	
.border-photo {
	/* Adds a shaded margin and border */
	background-color: #f8f8ee;
	padding: 5px;
	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: #f8f8ee;
	padding: 3px;
	padding-bottom: 3px;
	border: 1px solid #d5d5bf;
	float: right;
	margin: 0px 0px 15px 15px;
	}
.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: #f8f8ee;
	padding: 3px;
	border: 1px solid #d5d5bf;
	float: left;
	margin: 0px 15px 15px 0px;
	}
.sectionicon { 
	float: right; 
	padding-left: 15px;
}
.sectiontitle {
	border-bottom: 1px solid #fb7115;
}
	

	
/* HEADER */

#header-inner {
	/* Establishes the width of the header and styles it */
	width: 800px;
	margin: 0 auto;
	text-align: right;
	background: #ffffff;
	}
#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 to utk.edu (in addition to the clickable UTK wordmark).  This style prevents it from displaying in standard web browsers */
	display: none;
	}



/* CONTENT */

#content-outer {
	/* Establishes the width of the Content area and styles it */
	background:  #333333;
	}
#content-inner {
	background-color: #ffffff;
	width: 800px;
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
	}
	
	/* LEFT MENU */
	
#left-menu {
	/* Creates the Left Menu column */
	float: left;
	display: inline;
	width: 200px;
	text-align: left;
	font-size: 1.1em;
	background: #ffffff url(../images/Skis.jpg) repeat-y top right;
	}
#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 {
	list-style-type: 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: #000000;
	display: block;
	width: 180px;
	padding: .8em 20px;
	border-bottom: #8aa4c9 1px solid; 
	}
#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: #ffffff; 
	display: block;
	width: 180px;
	background-color: #666666;
	}
#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: #000000;
	display: block;
	width: 180px;
/*	background-color: #8aa4c9; 
	border-bottom: #37475d 1px solid; */
	}
#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: #ffffff; 
	display: block;
	width: 180px;
	background-color: #333333;
	}
#left-menu p a {
	/* Styles all links in the main content area.  NOTE: The line beneath the link is being controlled by the "bottom-border style" */
	color: #003366;
	border-bottom: 0px;
	padding-bottom: 0px;
	}
#left-menu p a:hover {
	color: #bf4d02;
	border-bottom: 0px;
	padding-bottom: 0px;
	}
	
	/* 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;
	padding: 1em 20px 3em 0px;
	width: 525px;
	background: url(../images/greylogobg.gif) no-repeat bottom right;
	}
#main-content p {
	/* Styles everything within p tags <p> . . . </p> */
	font-size: 1.1em;
	line-height: 1.636em;
	margin: 1.0em 0em;
	}
#main-content h2 {
	/* Styles all Heading 2s in the main content area. Use H2 for the main subheads in your content */
	font-size: 1.5em;
	line-height: 1.5em;
	margin: 1.6em 0em 0em 0em;
	color: #4c617e;
	font-weight: lighter;
	}
#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.1em;
	line-height: 1.636em;
	margin: 2.5em 0em 0em 0em;
	color: #707a87;
	}
#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: #4c617e;
	border-bottom: 1px solid #4c617e;
	padding-bottom: 1px;
	}
.main-content-title {
	color: #4c617e;
}
#main-content img {
	border-bottom: 0px;
	padding-bottom: 0px;
	}
#main-content a:hover {
	color: #bf4d02;
	border-bottom: 1px solid #bf4d02;
	padding-bottom: 1px;
	}
#main-content ul {
	/* Styles all unordered lists in the main content area */
	padding-left: 10px;
	margin-left: 10px;
	text-align: left;
	}
#main-content ul li {
	list-style-type: square;
	font-size: 1.1em;
	line-height: 1.4em;
	padding: 2px;
	}
#main-content ul ul {
	border-bottom: 2px
	}	
#main-content ul ul li {
	list-style-type: circle;
	font-size: 1.0em;
	line-height: 1.4em;
	padding: 2px;
	}	
#main-content ul li p {
	font-size: 1.0em;
	line-height: 1.0em;
	}	
#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.1em;
	line-height: 1.4em;
	padding: 2px;
	}

#main-content ol ol li {
	font-size: 0.9em;
	line-height: 1.0em;
	}
#table {
	width: 240px;
	text-align: left;
	font-size: 1.3em;
	background-color: #e8eef5;
	}
.quote {
	font-style: italic;
	padding-left: 30px;
	}
.highlight {
	background-color: #FFFFCC;
	padding: 15px;
	border: 1px dotted #666666;
	width: inherit;
	}
.highlightmin {
	background-color: #FFFFCC;
	padding: 15px;
	border: 1px dotted #666666;
	width: auto;
	}
.pullquote {
	color:darkgreen;
	float:right;
	width:175px;
	height:200px; 
	background:white;
	filter:alpha(opacity=25);
	opacity:.25;
	width:175px;
	height:200px;
	margin-top:10px;
	margin-bottom:10px;
	margin-right:10px;
	margin-left:10px;
	font-family:Verdana, Arial, Helvetica,Georgia;
	font-size: 28px;
	line-height:26px;
	text-align:right;
	padding-bottom:20px;
	}
.spotphoto {
	float:left; 
	border:1px solid #ccc;
	margin-right:10px;
	margin-left:10px;
	margin-bottom:10px;
	padding:.5em;
	}

/* FORM FORMATTING */

#form-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;
	padding: .5em 5px .5em 0px;
	width: 510px;
	background: url(../images/greylogobg.gif) no-repeat bottom right;
	}
#form-content p {
	/* Styles everything within p tags <p> . . . </p> */
	font-size: 1.1em;
	line-height: 1.636em;
	margin: 1.0em 0em;
	}
#form-content h2 {
	/* Styles all Heading 2s in the main content area. Use H2 for the main subheads in your content */
	font-size: 1.5em;
	line-height: 1.5em;
	margin: 1.6em 0em 0em 0em;
	color: #4c617e;
	font-weight: lighter;
	}
#form-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.1em;
	line-height: 1.636em;
	margin: 2.5em 0em 0em 0em;
	color: #707a87;
	}
#form-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: #4c617e;
	border-bottom: 1px solid #4c617e;
	padding-bottom: 1px;
	}
#form-content img {
	border-bottom: 0px;
	padding-bottom: 0px;
	}
#form-content a:hover {
	color: #bf4d02;
	border-bottom: 1px solid #bf4d02;
	padding-bottom: 1px;
	}
#form-content ul {
	/* Styles all unordered lists in the main content area */
	padding-left: 10px;
	margin-left: 10px;
	}
#form-content ul li {
	list-style-type: square;
	font-size: 1.1em;
	line-height: 1.4em;
	padding: 2px;
	}
#form-content ul ul {
	border-bottom: 2px
	}	
#form-content ul ul li {
	list-style-type: circle;
	font-size: 1.0em;
	line-height: 1.4em;
	padding: 2px;
	}	
#form-content ul li p {
	font-size: 1.0em;
	line-height: 1.0em;
	}	
#form-content ol {
	/* Styles all ordered lists in the main content area */
	padding-left: 15px;
	margin-left: 15px;
	}
#form-content ol li {
	font-size: 1.1em;
	line-height: 1.4em;
	padding: 2px;
	}

#form-content ol ol li {
	font-size: 0.9em;
	line-height: 1.0em;
	}
.form-text {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
	color: #000;
	
}

/* FOOTER */

#footer-blue-outer {
	/* Extends the orange line across the full width of the browser */
	background-color:  #000033;
	width: 100%;
	}
#footer-blue-inner {
	/* Establishes the width of the orange line and styles it */
	width: 800px;
	background-color:  #000033;
	margin: 0 auto;
	text-align: center;
	height: 3px;
	}
#footer-grey-outer {
	/* Extends the grey background across the full width of the browser */
	background-color: #666666;
	width: 100%;
	}
#footer-grey-inner {
	/* Establishes the width of the grey footer and styles it */
	width: 800px;
	margin: 0 auto;
	color: #dddddd;
	line-height: 6px;
	font-size: 1em;
	text-align: left;
	padding: 15px 15px 15px 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: #ffffff;
	border-bottom: 1px solid #333333;
	padding-bottom: 2px;
	}
.pay-box {
	margin: 5px;
	padding: 5px;
	float: left;
	width: 250px;
	border: 1px dashed #003;
}
#main-content p img {
	text-align: center;
	margin-bottom: 10px;
	margin-top: 25px;
}
#feature {
	font-family: Verdana, Geneva, sans-serif;
	color: #000;
	text-align: center;
	background-color: #FFC;
	margin: 10px;
	padding: 10px;
	clear: both;
	width: 500px;
	border: 1px dashed #F00;
	font-size: 10pt;
}
.indextitletext {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 28px;
	font-style: italic;
	font-weight: bold;
	color: #669;
}