﻿/* Set base values on the body for a variety of properties. */
body {
	margin: 0; /* Gets rid of default margin on body that most browsers add. */
	padding: 0; /* Gets rid of default padding on body that Opera adds. */
	background: #f1f4f6;
	color: #1C306B; /* Sets default color of text. */
	font-family: Verdana, Arial, Helvetica, sans-serif; /* Sets default font family options. */
	font-size: 100.01%; /* Sets default font size. This odd value compensates for several browser bugs. First, setting a default font size in percent (instead of em) eliminates an WinIE problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. Current "best" suggestion is to use the 100.01% value for this property. */
	}



#header {
	position: relative; /* This makes #mainnav base its position off #header because absolutely positioned elements base their position off their nearest postiioned ancestor. */
	width: 100%; /* WinIE needs this to show the border. */
	
	}

/* Needed to hold link to main content in compliance with Section 508, rule o. */
#skipnav {
	position: absolute; /* Sets the div to be positioned in a precise spot in relation to its nearest postioned ancestor, #header. Also removes it from the flow, so it will not make the header expand. */
	top: 0; /* Places the div at the top of #header. */
	left: 0; /* Places the div at the left side of #header. */
	margin-left: -1000px; /* Moves the div off the left side of the screen, making it invisible to those using visual browsers but accessible to those using screen readers and other user agents. */
	}

#logo {
	width: 16%; /* Sets width of div logo */
	text-align: center; /* Makes the logo image within the div centered horizontally. */
	}

/* Applied directly to ul element to create the main nav bar. */
#mainnav {
	border-bottom: 1px solid #1C306B;
	position: absolute;
	bottom: 0;
	right: -16px;
	margin: 0 0 0 0;
	width: 86%;
	padding: .5em 0;
	border-top: 1px solid #1C306B;
	border-left: 1px solid #1C306B;
	background: url("../page_elements/mainnav_bg.jpg") repeat-x #abd3e9;
	list-style: none;
	font-size: 0.9em;
	top: 1px;
	height: 15px;
}

#mainnav li {
	display: inline;
	border-right: 1px solid #1C306B;
	padding: .5em .5em;
	white-space:nowrap;
	}


#mainnav a {
	color: #1C306B;
	text-decoration: none;
	font-weight: bold;
	}

#mainnav a:hover {
	color: #8ea48e;
	}


#wrapper-inner {
	
	position: relative; 
	width: 100%; 
	margin-top: 0; /*5px  */
	padding-bottom: 0; /*150px  */
	}


#floatwrapper {
	float: left;
	width: 82%;
	position: relative;
	z-index: 100;
	max-width: 1370px;
	
}


#contentwrapper {
	float: right; 
	width: 85%; /*must be sized with secnav and left tab with total less than 100%*/
	position: relative; 
	z-index: 100; 
	}

#toptab {
	margin: 0;
	padding:0;
}	
	
#toptab li {
	background-position: bottom;
	list-style: none;
	float: left;
	margin: 0;
	width: 113px;
	background-image: url('../page_elements/tab.gif');
	white-space: nowrap;
	font-size: 14px;
	line-height: 24px;
	background-repeat: no-repeat;
	text-align:center;
}

#toptab a {
	background-position: left;
	text-decoration: none;
	background-image: url('../page_elements/back_tab.gif');
	display: block;
	
}

#toptab a:hover {
	color: #8ea48e;
}

#con-back
{
	float: left;
	background-color: #dedfe2;
	width: 100%;
	z-index: 100;
	margin-top: 0px;/*  */
	border: none;
}

#con-ur {
	background-image:  url("../page_elements/ur-cor.gif");
	background-position: right top;
	background-repeat: no-repeat;
	background-color: transparent;
	border: none; 
}

#con-lr
{
	background-image:  url("../page_elements/lr-cor.gif");
	background-position: right bottom;
	background-repeat: no-repeat;
	background-color: transparent;
	border: none; 
}

#con-lr-h20{
	background-image:  url("../page_elements/lr-h20.gif");
	background-position: right bottom;
	background-repeat: no-repeat;
	background-color: transparent;
	border: none; 
}

#con-box 
{
	background-image: url("../page_elements/ll-cor.gif");
	background-position: left bottom;
	background-repeat: no-repeat;
	background-color: transparent;
	border: none;
	padding-top: 0;
}
#image01 
{
	background-image: url("../photos/Abstracts/rainbow.jpg");
	background-position: left bottom;
	background-repeat: no-repeat;
	background-color: transparent;
	border: none;
	padding-top: 0;
}

#ll-rk25{
	background-image: url('../mech_drawings/ll-rk25.gif');
	background-position: left bottom; background-repeat: no-repeat;	background-color: transparent;	padding-bottom: 80px;}

#ll-rk3{
	background-image: url('../mech_drawings/ll-rk3.gif');
	background-position: left bottom; background-repeat: no-repeat; background-color: transparent; padding-bottom: 80px;}
	
#ll-rk35{
	background-image: url('../mech_drawings/ll-rk35.gif');
	background-position: left bottom; background-repeat: no-repeat; background-color: transparent; padding-bottom: 80px;}

#ll-rk4{
	background-image: url('../mech_drawings/ll-rk4.gif');
	background-position: left bottom; background-repeat: no-repeat; background-color: transparent; padding-bottom: 80px;}

#ll-rk45{
	background-image: url('../mech_drawings/ll-rk45.gif');
	background-position: left bottom; background-repeat: no-repeat; background-color: transparent; padding-bottom: 80px;}

#ll-rk5{
	background-image: url('../mech_drawings/ll-rk5.gif');
	background-position: left bottom; background-repeat: no-repeat; background-color: transparent; padding-bottom: 80px;}

#ll-rk55{
	background-image: url('../mech_drawings/ll-rk55.gif');
	background-position: left bottom; background-repeat: no-repeat; background-color: transparent; padding-bottom: 80px;}

#ll-rk6{
	background-image: url('../mech_drawings/ll-rk6.gif');
	background-position: left bottom; background-repeat: no-repeat; background-color: transparent; padding-bottom: 80px;}

#ll-sk25{
	background-image: url('../mech_drawings/ll-sk25.gif');
	background-position: left bottom; background-repeat: no-repeat;	background-color: transparent;	padding-bottom: 80px;}

#ll-sk3{
	background-image: url('../mech_drawings/ll-sk3.gif');
	background-position: left bottom; background-repeat: no-repeat; background-color: transparent; padding-bottom: 80px;}
	
#ll-sk35{
	background-image: url('../mech_drawings/ll-sk35.gif');
	background-position: left bottom; background-repeat: no-repeat; background-color: transparent; padding-bottom: 80px;}

#ll-sk4{
	background-image: url('../mech_drawings/ll-sk4.gif');
	background-position: left bottom; background-repeat: no-repeat; background-color: transparent; padding-bottom: 80px;}

#ll-sk45{
	background-image: url('../mech_drawings/ll-sk45.gif');
	background-position: left bottom; background-repeat: no-repeat; background-color: transparent; padding-bottom: 80px;}

#ll-sk5{
	background-image: url('../mech_drawings/ll-sk5.gif');
	background-position: left bottom; background-repeat: no-repeat; background-color: transparent; padding-bottom: 80px;}

#ll-sk55{
	background-image: url('../mech_drawings/ll-sk55.gif');
	background-position: left bottom; background-repeat: no-repeat; background-color: transparent; padding-bottom: 80px;}

#ll-sk6{
	background-image: url('../mech_drawings/ll-sk6.gif');
	background-position: left bottom; background-repeat: no-repeat; background-color: transparent; padding-bottom: 80px;}

#ll-sk35x{
	background-image: url('../mech_drawings/ll-sk35x.gif');
	background-position: left bottom; background-repeat: no-repeat; background-color: transparent; padding-bottom: 80px;}

#ll-sk4x{
	background-image: url('../mech_drawings/ll-sk4x.gif');
	background-position: left bottom; background-repeat: no-repeat; background-color: transparent; padding-bottom: 80px;}

#ll-sk45x{
	background-image: url('../mech_drawings/ll-sk45x.gif');
	background-position: left bottom; background-repeat: no-repeat; background-color: transparent; padding-bottom: 80px;}

#ll-sk5x{
	background-image: url('../mech_drawings/ll-sk5x.gif');
	background-position: left bottom; background-repeat: no-repeat; background-color: transparent; padding-bottom: 80px;}

#ll-sk55x{
	background-image: url('../mech_drawings/ll-sk55x.gif');
	background-position: left bottom; background-repeat: no-repeat; background-color: transparent; padding-bottom: 80px;}

#ll-sk6x{
	background-image: url('../mech_drawings/ll-sk6x.gif');
	background-position: left bottom; background-repeat: no-repeat; background-color: transparent; padding-bottom: 80px;}




#content {
	 /* Sets space between edge of center column content and surrounding divs. */
	}

/* Left column for the secondary navigation. */
#secnav {
	float: right; /* Moves column to the left of #contentwrapper. */
	width: 14%; /* Sets width to 25 percent of #floatwrapper, which equates to 20 percent of the window, because .25 x .8 = .2 */
	padding-top: 1.5em; /*  */
	font-size: 0.9em; /* Sets font smaller than default body size. */
	position: relative; /* Because of MacIE's faulty positioning and float models, all floated objects will overlap the background and borders of the fixed footer. Adding position: relative and a smaller z-index than the footer to all the floats fixes this. */
	z-index: 100; /* See note above. */
	}

#secnav ul {
	margin: 0; /* Removes default margin. */
	padding: 0; /* Removes default padding. */
	list-style: none; /* Removes list markers. */
	text-align: right; /* Sets text to align to right side of column. */
	}

#secnav li {
	display: inline; /* Keeps WinIE5 from adding extra space between list items. */
	}

#secnav a {
	display: block; /* Makes anchor fill up entire list item so that list items will not display horizontally, as they would otherwise because of the display: inline set above. */
	margin-bottom: 0.8em; /* Sets space between list items. */
	padding-right: 15px; /* Moves text over from the right so that image that shows on roll over has room to display. */
	color: #1C306B; /* Sets color of link text to navy blue. */
	text-decoration: none; /* Removes underline on links. */
	font-weight: bold; /* Makes links bold. */
	}

#secnav a:hover {
	color: #8ea48e;
	}

/* Left column for the secondary navigation. */
#lefttab {
	float: right; /* Moves column to the left of #contentwrapper. */;
	width: 14%; /* Sets width to 25 percent of #floatwrapper, which equates to 20 percent of the window, because .25 x .8 = .2 */;
	padding-top: 50px; /* Sets space between top of div and where text starts displaying. */;
	font-size: 0.9em; /* Sets font smaller than default body size. */;
	position: relative; /* Because of MacIE's faulty positioning and float models, all floated objects will overlap the background and borders of the fixed footer. Adding position: relative and a smaller z-index than the footer to all the floats fixes this. */;
	z-index: 100;
	min-width: 40px;
}

#lefttab ul {
	margin: 0; /* Removes default margin. */
	padding: 0; /* Removes default padding. */
	list-style: none; /* Removes list markers. */
	text-align: right; /* Sets text to align to right side of column. */
	}

#lefttab li {
	display: block; /* Keeps WinIE5 from adding extra space between list items. */
		
	}

#lefttab a {
	display: block; /* Makes anchor fill up entire list item so that list items will not display horizontally, as they would otherwise because of the display: inline set above. */
	margin-bottom: 0.8em; /* Sets space between list items. */
	padding-right: 15px; /* Moves text over from the right so that image that shows on roll over has room to display. */
	color: #1C306B; /* Sets color of link text to navy blue. */
	text-decoration: none; /* Removes underline on links. */
	font-weight: bold; /* Makes links bold. */
	
	}
	
	

#lefttab a:hover {
	color: #8ea48e;
	}




/* Right column for feature items, news, etc. */
#news {
	float: right; /* Moves column to right side of window across from #floatwrapper. */
	width: 16%; /* Set to 16 percent instead of 20 left over after the 80 percent taken by #floatwrapper to give browsers extra room for rounding errors, etc. Setting this to a larger value causes WinIE to drop the right column at smaller window sizes. */
	margin-top: 0; /* Sets gap between top border of #wrapper-inner and top of column. */
	border-left: 1px solid #dedfe2; /* Sets left border. */
	border-bottom: 5px solid #dedfe2; /* Sets bottom border. */
	font-size: 0.8em; /* Sets font size smaller than default. */
	position: relative;
	z-index: 100; /* See note above. */
	}

#news h2 {
	margin: 0 0 0.5em 0; /* Sets space beneath header text. */
	padding: 4px; /* Sets space between header text and edge of background. */
	background: url("../page_elements/mainnav_bg.jpg") repeat-x #abd3e9;
	font-size: 1.1em; /* Sets font size larger than default. */
	text-align:center;
	}

* html #news h2 {
	width: 100%; /* WinIE wants a dimension in order to show the background. Hidden from non-IE browsers because it causes a persistant horizontal scroll in them. */
	}

/* Used to group each feature item in the column. */
#news div {
	margin: 0 0 1em 0; /* Spaces each box in features column out from one another */
	}

#news p {
	margin: 0.5em 0.5em 0 0.5em; /* Spaces paragraphs away from the sides of the column and the headers. */
	padding-bottom: 1em;
    
}

/* Creates footer that is fixed at the bottom of the window in standard compliant browsers and pinned to the bottom of the page in WinIE. */
#footer {
	font-size:.5em;
	position: fixed; /* Fixes footer in relation to the window so it always appears on screen and other content scrolls behind it */
	bottom: 0; /* Sets footer to appear at bottom of screen. */
	left: 0; /* Sets footer to appear at left side of screen. Needed for WinIE to position correctly. */
	width: 100%;
	background: #fff; /* Sets background color to white. */
	color: #92a274; /* Sets color of text to green. Since the only text in the current design are the pipes between the links, this makes the navy blue links stand out. */
	z-index: 100000000; /* Because of MacIE's faulty positioning and float models, all floated objects will overlap the background and borders of the fixed footer. Adding a really high z-index to the footer, plus lower z-index and position: relative to all the floats, fixes this. */
	}

/* The following selector sets the footer to absolute instead of fixed in WinIE because WinIE does not support position: fixed. Setting it to absolute means it will display at the bottom of the page instead of the bottom of the window. */
/* The margin rule below gets rid of a one pixel gap below footer in WinIE. */
/* Hide from MacIE. Only WinIE sees this. \*/
* html #footer {
	position: absolute;
	margin-bottom: -1px;
	}
/* End hide from MacIE. */

/* Image is placed outside of footer div to avoid a gap it creates beneath the footer in WinIE. */
#footerimage {
	position: fixed; /* Opera does not display the image if set to position: absolute, so fixed is used instead. This rule is hidden from WinIE because it does not support fixed positioning, and thus needs the absolute to pin the image correctly. */
	bottom: 0; /* Makes the image stick to the bottom of the page, no matter what the font size. */
	left: 0; /* Makes the image stick to the left of the footer. */
	margin-top: -190px; /* Moves the top of the image outside the top edge of its container, #footer. */
	z-index: 1000000000; /* Sets z-index to exceed #footer to ensure that it displays on top of the footer bar, since it is before #footer in the source. */
	}

/* The following selector sets the footer to absolute instead of fixed in WinIE because WinIE does not support position: fixed. Setting it to absolute means it will display at the bottom of the page instead of the bottom of the window. */
/* Hide from MacIE. Only WinIE sees this. \*/
* html #footerimage {
	position: absolute;
	}
/* End hide from MacIE. */

#footer ul {
	margin: 0; /* Sets space between thin top border on list and thick top border on footer as a whole. */
	padding: 0; /* Sets spacing between top and bottom edges of footer and the list; padding is used instead of margin because padding cannot escape out of divs like margins can. Also moves the list over from the left to make room for the trees image; padding is used instead of margin so that the content within the list will move over, not the list itself, so that the border will show in the gap between the trees. */
	border-top: 1px solid #1C306B; /* Sets top border. */
	}

#footer li {
	display: inline; /* Makes list items display horizontally */
	}

#footer a {
	margin: 0 0.2em; /* Sets spacing between links and pipe separators */
	font-size: 0.8em; /* Sets font size smaller for the links so the pipes are larger in comparison, making the separators more apparent. */
	}


/* CLEARING FLOATS -------------------------------------------------------------------------------------------------------------- */
/* The following selectors keep floats from overflowing out of their parent elements. This is done by generating a character within the parent but after the float, so that the parent must expand to hold the generated character, appearing to contain the floats in the process. */
.clearfix:after {
	content: "."; /* This dot is the actual content that will be appended to the end any div this class is applied to. */
	clear: both; /* Makes the generated content appear after the floats. */
	height: 0; /* Sets its height to zero so it doesn't show. */
	visibility: hidden; /* Sets its visibility to hidden so it doesn't show. */
	display: block; /* Overwrites the default inline display of the generated content. Needed because only blocks can have clear set on them. */
}
 
.clearfix {
	display: inline-block; /* Makes it work in MacIE. MacIE does not support generated content but will automatically contain a float if the container has this display property. */
	}

/* The first selector below makes it work in WinIE. WinIE does not support generated content, but will automatically contain a float if the container has a width or height assigned. "height: 1%" can be used because WinIE will not honor this height and will expand the div to whatever height necessary to show the content. */
/* The second selector below overwrites the inline-block display used to help MacIE. */
/* Hides from MacIE \*/
* html .clearfix {
	height: 1%;
	}
.clearfix {
	display: block;
	}
/* End hide from MacIE */


/* HEADINGS --------------------------------------------------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-family: Georgia, "Times New Roman", Times, serif; 
	
	}

h1 {
	text-align:center;
	margin: 0; /* Sets spacing between heading text and text above or below */
	font-size: 1.4em; /* Sets font size larger than default */
	margin-top: 0px;
	padding-top: 15px;
	}

h2 {
	padding-left: 15px;
	margin: .5em 0 1em 0; /* Sets spacing between heading text and text above or below */
	font-size: 1.2em; /* Sets font size larger than default */
	}

h3 {
	margin: 1.2em 0 0.5em 0; /* Sets spacing between heading text and text above or below */
	font-size: 1.1em; /* Sets font size larger than default */
	}

h4 {
	margin: 0; /* Sets spacing between heading text and text above or below */
	font-size: 1em; /* Sets font size at same size as default */
	}

h5 {
	text-align:center;
	margin: 0; /* Sets spacing between heading text and text above or below */
	font-family: Arial, Helvetica, sans-serif; /* Sets font family options */
	font-size: 1em; /* Sets font size at same size as default */
	}

h6 {
	margin: 0; /* Sets spacing between heading text and text above or below */
	font-family: Arial, Helvetica, sans-serif; /* Sets font family options */
	font-size: 0.9em; /* Sets font size smaller than default */
	}

p {
	margin: 0 3em 1em 2em;
}
	


/* LINKS ------------------------------------------------------------------------------------------------------------------------ */
a:link {
	color: #1C306B; /* Sets default link color */
	}
a:visited {
	color: #333333; /* Sets default link color on visited links */
	}
a:hover {
	color: #8ea48e; /* Sets default link color while rolling over links */
	}
a:active {
	color: red; /* Sets default link color when links are active */
	}
a img {
	border: none; /* Removes border that appears around an image when it is nested inside an anchor, such as the logo image */
	}


/* IMAGES IN CONTENT DIV */
.left {
	float: left; 
	
	margin: 0 ;
	padding: 25px ;
	position: relative; 
	z-index: 200; 
	}

.right
{
	float: right;
	margin: 0 ;
	padding: 20px;
	position: relative;
	z-index: 200;
}

