/*
Tim Knight - 2011.04.01
This file contains all information used to construct the layout for the IRIS homepage and also everything on an inner page
CSS that is specific to the homepage is stored in the file homepage.css
Fixes for IE 6 + 7 are in ie7.css
Fixes for IE 6 are in ie6.css

It's probably best not to make changes to this file. Instead, just create a new CSS file and override anything defined in this file.
This layout is fairly complex. This is due to the design concept and also having to define extra classes for IE6 to properly target elements.
This is commented as much as possible, but do not hesitate to ask me if you have any questions.
*/


/* Global Reset 
Reset all elements to cut down on different default formatting between browsers 
This means that any elements used will need margins and padding set to look good.
These elements are set later in this file */
body, div, img, form, input, select, span, p, ul, li, h1, h2, h3, h4, h5, h6 {
margin: 0px;
padding: 0px;
font-family: arial, tahoma, helvetica, sans-serif;
font-size: 10pt;
color: #33332f;
}

body {
background: #D5D5D5;
}

/* --- Layout Formatting --- */

/* Contains all elements of the layout, used to overcome centering problem in IE */
#container {
width: 980px;
margin: auto;
}

/* The top most white portion of the layout */
#container #header {
background: url(images/layout/header.gif);
background-repeat: no-repeat;
height: 130px;
}

/* The following two items are for transparent gifs placed over the IRIS logo on the left of the header
This allows parts of the background of the header to link to locations such as the IRIS Homepage */
#container #header #irisLogoLink {
float: left;
margin: 10px 0px 10px 30px;
}

/* Position a clear gif over the IRIS Logo which is actually part of the background for #container #header
This lets us link the image to the IRIS homepage */
#container #header #irisLogoLink img {
width: 300px;
height: 110px;
border: 0px;
}

/* Column that holds everything in the right portion of the header*/
#container #header #links {
margin: 15px 20px 0px 0px;
float: right;
}

#container #header #links a {
font-size: 9pt;
text-decoration: none;
padding-left: 14px;
color: #656565;
}

#container #header #links a:hover {
text-decoration: underline;
}

/* Search Box */
#container #header #links form {
display: inline;
}

#container #header #links .box {
margin-left: 20px;
border: 1px solid #a1a1a1;
background: url(images/layout/searchLogo.gif) no-repeat;
padding: 1px 1px 1px 18px;
font-size: 10pt;
}

/* Search Button */
#container #header #links .search {
margin-right: 10px;
position: relative;
top: 5px;
}

/* The following two items work the same way as the IRIS logo above, but for the NSF logo */
#container #header #links #nsfLogoLink {
margin-top: 10px;
}

#container #header #links #nsfLogoLink img {
width: 420px;
height: 60px;
margin: 0px 0px 0px 0px;
border: 0px;
}

/* Top Navigation - Purple Buttons 
This menu is loosely based on the Suckerfish menu http://www.alistapart.com/articles/dropdowns/
Some javascript is needed for it to work in IE. It is included with conditional comments in the header
*/
#container #nav {
background: url(images/layout/nav.gif);
height: 37px;
padding: 9px 0px 0px 30px;
}

/* Used to identify a top level menu item with a purple rounded button */
#container #nav a.top {
display: block;
height: 37px;
}

/* Define background images for the purple buttons (first level items)
The ones that begin with "on" are when a purple button looks highlighted and is raised,
This signifies what section a user is currently in 
The reason that the li and a items both have a class applied and not just the li is to overcome
IE6 poor support for selectors
All of these rules below are redefined in ie6.css as well
*/
#container #nav li.home > a {background: url(images/layout/homeButton.gif) #eeeeee;width: 74px}
#container #nav li.onhome > a {background: url(images/layout/onhomeButton.gif) #eeeeee;width: 74px}
#container #nav li.about > a {background: url(images/layout/aboutButton.gif) #eeeeee;width: 98px}
#container #nav li.onabout > a {background: url(images/layout/onaboutButton.gif) #eeeeee;width: 98px}
#container #nav li.data > a {background: url(images/layout/dataButton.gif) #eeeeee;width: 68px}
#container #nav li.ondata > a {background: url(images/layout/ondataButton.gif) #eeeeee;width: 68px}
#container #nav li.software > a {background: url(images/layout/softwareButton.gif) #eeeeee;width: 86px}
#container #nav li.onsoftware > a {background: url(images/layout/onsoftwareButton.gif) #eeeeee;width: 86px}
#container #nav li.instrumentation > a {background: url(images/layout/instrumentationButton.gif) #eeeeee;width: 136px}
#container #nav li.oninstrumentation > a {background: url(images/layout/oninstrumentationButton.gif) #eeeeee;width: 136px}
#container #nav li.publications > a {background: url(images/layout/publicationsButton.gif) #eeeeee;width: 112px}
#container #nav li.onpublications > a {background: url(images/layout/onpublicationsButton.gif) #eeeeee;width: 112px}
#container #nav li.space > a {background: url(images/layout/space.gif) #eeeeee;width: 15px}
#container #nav li.aboutdmc > a {background: url(images/layout/aboutdmcButton.gif) #eeeeee;width: 98px}
#container #nav li.onaboutdmc > a {background: url(images/layout/onaboutdmcButton.gif) #eeeeee;width: 98px}
#container #nav li.services > a {background: url(images/layout/servicesButton.gif) #eeeeee;width: 98px}
#container #nav li.onservices > a {background: url(images/layout/onservicesButton.gif) #eeeeee;width: 98px}

/* Define the widths for the sub navigations
May need to be adjusted depending on menu items*/
#container #nav ul li.about ul li {width: 150px}
#container #nav ul li.onabout ul li {width: 150px}
#container #nav ul li.data ul li {width: 150px}
#container #nav ul li.ondata ul li {width: 150px}
#container #nav ul li.software ul li {width: 150px}
#container #nav ul li.onsoftware ul li {width: 150px}
#container #nav ul li.instrumentation ul li {width: 150px}
#container #nav ul li.oninstrumentation ul li {width: 150px}
#container #nav ul li.publications ul li {width: 150px}
#container #nav ul li.onpublications ul li {width: 150px}
#container #nav ul li.space ul li {width: 15px}
#container #nav ul li.aboutdmc ul li {width: 130px}
#container #nav ul li.onaboutdmc ul li {width: 130px}
#container #nav ul li.services ul li {width: 150px}
#container #nav ul li.onservices ul li {width: 150px}

/* Shift our background on hover to change the image for rollover effect */
#container #nav a.top:hover {
background-position: 0% 100%;
}

/* Define the structure of the navigation
Loosely based on the Suckerfish http://www.alistapart.com/articles/dropdowns/ */
#container #nav ul {
list-style: none;
}

#container #nav ul li {
	margin-left: 2px;
	position: relative;
	background: #959595;
}

#container #navdmc ul li {
	margin-left: 2px;
	position: relative;
	background: #9999cc;
}

/* Extra class to overcome problem in IE6
Applied to all top level (purple) nav elements */
#container #nav ul li.base {
float: left;
}

/* Second level nav elements */
#container #nav ul li ul {
display: none;
position: absolute;
border-top: 1px solid #818181;
}

/* Display our sub menus on hover, a second class (.over) is also defined here. This is so the class can be applied with javascript
for IE6 since it doesn't support :hover properly */ 
#container #nav ul li:hover ul, #container #nav ul li.over ul {
display: block;
padding: 0px;
}

#container #nav ul li ul li {
border-top: 1px solid #bcbcbc;
border-bottom: 1px solid #818181;
padding: 0px;
margin: 0px;
float: left;
border-left: 1px solid #818181;
border-right: 1px solid #818181;
}

/* Class applied to first menu item on the second level */
#container #nav ul li ul li.first {
border-top: 0px;
}

/* Class applied to a list item that has a sub items */
#container #nav ul li ul li.down {
background: url(images/layout/topNavArrow.gif) #959595 right center no-repeat;
}

#container #nav ul li ul li a {
color: #FFFFFF;
text-decoration: none;
font-size: 9pt;
margin: 0px;
padding: 5px;
display: block;
}

#container #nav ul li ul li a:hover {
background: #b4b4b4;
color: #660099;
}

/* Third Level of Dropdown Menus */
#container #nav ul li ul li ul {
left: -999em;
height: 0px;
}

#container #nav ul li ul li:hover ul, #container #nav ul li ul li.over ul {
left: 150px;
top: -2px;
}

/* Quick Links in Mid Left */
#container #main #leftCol #quickLinks {
border-top: 6px solid #6a9641;
border-bottom: 6px solid #6a9641;
background: #567b32;
width: 213px;
color: #FFFFFF;
font-size: 14pt;
padding: 8px 5px 12px 10px;
}

#container #main #leftCol #quickLinks select {
border: 1px solid #a9a999;
padding: 1px;
font-size: 10pt;
background: #FFFFFF;
}


/* Bar below top navigation */
#container #belowNav {
height: 14px;
background: url(images/layout/belowNav.gif);
}

/* Contains the main left and right columns
Used to properly stretch the layout vertically */
#container #main {
float: left;
background: url(images/layout/leftColBack.gif) repeat-y;
}


/* See homepage.css for anything specific to the homepage */

/* Footer */
#container #footer {
background: url(images/layout/footerBack.gif);
float: left;
}

#container #footer #top {
height: 1px;
background: #acacac;
margin: 0px 10px 0px 9px;
width: 960px;
}

#container #footer #leftHalf {
padding: 15px 25px;
float: left;
width: 780px;
}

#container #footer #leftHalf a {
font-size: 9pt;
text-decoration: none;
color: #5e5e5e;
}

#container #footer #leftHalf a:hover {
text-decoration: underline;
}

#container #footer #leftHalf img {
float: left;
margin-right: 10px;
}

#container #footer #leftHalf p {
margin-top: 15px;
color: #949493;
font-size: 9pt;
}

#container #footer #rightHalf {
padding-top: 10px;
padding-right: 20px;
float: left;
}

/* Link in the footer to request an update */
#container #footer a.requestUpdate {
line-height: 150%;
color: #660099 !important;
text-decoration: underline !important;
}

/* --- Formatting Used on Inner Pages --- */

/* --- Left Column --- */
#container #main #leftInner {
width: 236px;
float: left;
padding-left: 9px;
padding-bottom: 30px;
}

/* Left Menu */
#container #main #leftInner #menu {
list-style-type: none;
}

#container #main #leftInner #menu li {
margin: 0px;
padding: 0px;
}


/* First Level Menu Items */

/* Default menu item with no sub pages and not on the top or bottom of the list */
#container #main #leftInner #menu li a {
display: block;
height: 16px;
color: #3e5f1e;
text-decoration: none;
padding: 5px 5px 5px 32px;
background: url(images/leftMenu/leftMenu.gif);
}

/* All of these styles are in lowercase because the html may be automatically generated by the cms */

/* Style for a menu item that appears first */
#container #main #leftInner #menu li.top a {background: url(images/leftMenu/leftMenuTop.gif) #dcdcdc}
#container #main #leftInner #menu li.toparrow a {background: url(images/leftMenu/leftMenuTopArrow.gif) #dcdcdc}
#container #main #leftInner #menu li.topopen a {background: url(images/leftMenu/leftMenuTopOpen.gif) #dcdcdc}

/* Style for menu items in the middle */
#container #main #leftInner #menu li.arrow a {background: url(images/leftMenu/leftMenu.gif) #dcdcdc}
#container #main #leftInner #menu li.open a {background: url(images/leftMenu/leftMenuOpen.gif) #dcdcdc}

/* Style for menu items on the bottom */
#container #main #leftInner #menu li.bottom a {background: url(images/leftMenu/leftMenuBottom.gif) #dcdcdc}
#container #main #leftInner #menu li.bottomarrow a {background: url(images/leftMenu/leftMenuBottomArrow.gif) #dcdcdc}

#container #main #leftInner #menu li a:hover {
color: #9657b6;
background-position: 0% 100%;
}

/* Second Level of Menu Items */
#container #main #leftInner #menu li ul {
list-style-type: none;
}

#container #main #leftInner #menu li ul li a {
padding: 5px 5px 5px 44px;
background: url(images/leftMenu/leftMenu2.gif) !important;
font-size: 10pt;
}

/* Style for menu items in the middle */
#container #main #leftInner #menu li ul li.arrow a {background: url(images/leftMenu/leftMenu2Arrow.gif) #dcdcdc !important}
#container #main #leftInner #menu li ul li.open a {background: url(images/leftMenu/leftMenu2Open.gif) #dcdcdc !important}

/* Style for bottom menu item, this would be the absolute bottom, not just the bottom of the second level */
#container #main #leftInner #menu li ul li.bottom a {background: url(images/leftMenu/leftMenu2Bottom.gif) #dcdcdc !important}
#container #main #leftInner #menu li ul li.bottomarrow a {background: url(images/leftMenu/leftMenu2BottomArrow.gif) #dcdcdc !important}

#container #main #leftInner #menu li ul li a:hover, #container #main #leftInner #menu li ul li.arrow a:hover, #container #main #leftInner #menu li ul li.open a:hover {
color: #9657b6;
background-position: 0% 100% !important;
}

/* Third Level of Menu Items
Third level menu items must have a class applied to ul to overcome poor selector in IE */
#container #main #leftInner #menu li ul li ul.level3 {
list-style-type: none;
}

#container #main #leftInner #menu li ul li ul.level3 li a {
padding: 5px 5px 5px 56px;
background: url(images/leftMenu/leftMenu3.gif) !important;
font-size: 10pt;
font-size: 9pt;
color: #f6f6f6;
}

/* Fix problem with rollover not inheriting */
#container #main #leftInner #menu li ul li ul.level3 li.bottom a:hover {
background-position: 0% 100% !important;
}

/* Style for menu items on the bottom, absolute bottom of menu, not just bottom of 3rd level */
#container #main #leftInner #menu li ul li ul.level3 li.bottom a {
background: url(images/leftMenu/leftMenu3Bottom.gif) #dcdcdc !important;
}

/* Center Column of Inner Page */

#container #main #centerInner {
padding-top: 0px;
padding-left: 15px;
padding-right: 15px;
background: #FFFFFF;
float: center;
width: 950px;
background: url(images/layout/leftColBack.gif) repeat-y #FFFFFF;
background-position: 100% 0%;
padding-bottom: 0px;
}

/* Breadcrumbs */
#container #main #centerInner #breadCrumbs {
margin-top: 3px;
padding-left: 15px;
font-size: 10pt;
color: #7e7e7e;
margin-bottom: 10px;
}

#container #main #centerInner #breadCrumbs a {
font-size: 10pt;
text-decoration: none;
}

#container #main #centerInner #content {
padding-right: 15px;
}


/* Right Column of Inner Page */

#container #main #rightInner {
padding-top: 4px;
padding-left: 23px;
padding-right: 11px;
background: #FFFFFF;
float: left;
width: 701px;
background: url(images/layout/rightColBack.gif) repeat-y #FFFFFF;
background-position: 100% 0%;
padding-bottom: 5px;
}

/* Breadcrumbs */
#container #main #rightInner #breadCrumbs {
margin-top: 3px;
font-size: 10pt;
color: #7e7e7e;
margin-bottom: 10px;
}

#container #main #rightInner #breadCrumbs a {
font-size: 10pt;
text-decoration: none;
}

#container #main #rightInner #content {
padding-right: 15px;
}


/* --- General Styles --- */
a {
color: #660099;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

.clear {
clear: both;
}

/* Keep in mind that margins and padding on everything have been set to 0 and must be reset */

#container #main #rightInner h1 {
color: #660099;
font-size: 18pt;
border-bottom: 1px solid #d7d7d7;
font-weight: normal;
}

#container #main #rightInner h2 {
color: #467914;
font-size: 16pt;
font-weight: normal;
margin-bottom: 3px;
}

#container #main #rightInner h3 {
color: #943030;
font-size: 14pt;
font-weight: normal;
margin-bottom: 3px;
}

#container #main #rightInner h4 {
color: #000000;
font-size: 12pt;
font-weight: bold;
margin-bottom: 3px;
}

#container #main #rightInner h5 {
color: #33332f;
font-size: 11pt;
font-weight: bold;
font-style: italic;
margin-bottom: 3px;
}

#container #main #rightInner h6 {
color: #808080;
font-size: 10pt;
font-weight: normal;
margin-bottom: 3px;
}

#container #main #rightInner #content p {
margin: 0px 0px 10px 0px;
}

#container #main #rightInner #content a {
text-decoration: underline;
}

/* Class to add to a photo to make it look nice */
#container #main #rightInner #content .photo {
background: #efefef;
padding: 4px;
border: 1px solid #d7d7d7;
margin: 5px;
}

#container #main #rightInner #content ul {
margin-left: 30px;
list-style-type: square;
margin-bottom: 10px;
}

#container #main #rightInner #content ol {
margin-left: 37px;
margin-bottom: 20px;
}

#container #main #centerInner h1 {
color: #660099;
font-size: 18pt;
border-bottom: 1px solid #d7d7d7;
font-weight: normal;
}

#container #main #centerInner h2 {
color: #467914;
font-size: 16pt;
font-weight: normal;
margin-bottom: 3px;
}

#container #main #centerInner h3 {
color: #943030;
font-size: 14pt;
font-weight: normal;
margin-bottom: 3px;
}

#container #main #centerInner h4 {
color: #000000;
font-size: 12pt;
font-weight: bold;
margin-bottom: 3px;
}

#container #main #centerInner h5 {
color: #33332f;
font-size: 11pt;
font-weight: bold;
font-style: italic;
margin-bottom: 3px;
}

#container #main #centerInner h6 {
color: #808080;
font-size: 10pt;
font-weight: normal;
margin-bottom: 3px;
}

#container #main #centerInner #content p {
margin: 0px 0px 10px 0px;
}

#container #main #centerInner #content a {
text-decoration: underline;
}

/* Class to add to a photo to make it look nice */
#container #main #centerInner #content .photo {
background: #efefef;
padding: 4px;
border: 1px solid #d7d7d7;
margin: 5px;
}

#container #main #centerInner ul {
margin-left: 30px;
list-style-type: square;
margin-bottom: 10px;
}

#container #main #centerInner ol {
margin-left: 37px;
margin-bottom: 20px;
}

#contact p, label, legend { font: 1em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; }

#contact h1 { margin: 10px 0 10px; font-size: 24px; color: #333333; }
#contact hr { color: inherit; height: 0; margin: 6px 0 6px 0; padding: 0; border: 1px solid #d9d9d9; border-style: none none solid; }

#contact { display: block; width: 600px; padding: 25px; background-color: #FFF; -webkit-border-radius:5px;  }

/* Form style */

#contact label { display: inline-block; float: left; line-height: 15px; width: 155px; font-size: 0.85em; -webkit-border-radius:5px; }
#contact input, textarea, select { width: 280px; margin: 0; padding: 5px; color: #666; background: #f5f5f5; border: 1px solid #ccc; margin: 5px 0; font:1em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; webkit-border-radius:5px; }   
#contact input:focus, textarea:focus, select:focus { border: 1px solid #999; background-color: #fff; color:#333; }
#contact input.submit { width: 85px; cursor: pointer; border: 1px solid #222; background:#333; color:#fff; }
#contact input.submit:hover { background:#444; }
#contact input[type="submit"][disabled] { background:#888; }
#contact fieldset { padding:20px; border:1px solid #eee; -webkit-border-radius:5px; -moz-border-radius:5px; }
#contact legend { padding:7px 10px; font-weight:bold; color:#000; border:1px solid #eee; -webkit-border-radius:5px; -moz-border-radius:5px; margin-bottom:0 !important; margin-bottom:20px; }

#contact span.required{ font-size: 13px; color: #ff0000; } /* Select the colour of the * if the field is required. */

#message { margin: 10px 0; padding: 0; }

.error_message { display: block; height: 22px; line-height: 22px; background: #FBE3E4 url('../assets/error.gif') no-repeat 10px center; padding: 3px 10px 3px 35px; color:#8a1f11;border: 1px solid #FBC2C4; -webkit-border-radius:5px; }

.loader { padding: 0 10px; }

#contact #success_page h1 { background: url('../assets/success.gif') left no-repeat; padding-left:22px; }

acronym { border-bottom:1px dotted #ccc; }