@charset "UTF-8";

/*********COLOR Code **********
 *
 * #009345  Medium green text and links on light background
 * #21CD6E  Green text and links on dark background, green subheader text
 * #00A84F  Right column bright green borders
 * #0C4D2A	Right column dark green background
 * #004721  Right column green gradient background (may not be seen)
 * #252525  Dark gray left col gradient background (may not be seen)
 * #363636  Dark medium gray container background
 * #464646  Light medium gray header section borders
 * #111     Dark gray header background, left column text background
 * #CDCDCD  MainContent2 background
 * #EBEBEB  MainContent2 text background
 * #A1A1A1  MainContent2 text background border
 * #6F6F6F  Medium gray for "credit" text
 *
 ******************************/
 
 /********* Structure **********
 *
 *	body
 *
 *		container
 *
 *			header
 *
 *			leftcol
 *
 *			mainContent
 *
 *			footer
 *
 ******************************/
 
/*************************************
*
*   STRUCTURE
*
*************************************/

body  {
	margin: 0; /* zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* center the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
}

#container {
	width: 942px;  
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	padding: 0;
} 

#header {
	padding: 0;  /* this padding should match the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, zero the padding. */
	margin: 0;
} 

#header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}

#header img#header-logo {
	float:left;
	margin:0;
	padding:0;
}

#header ul#navbuttons {
	margin: 0px;
	padding: 0px;
}

#header ul#navbuttons li {
	display: inline;
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
}

#header #navtext {
	margin: 0px;
	display: block;
	padding: 10px;
	font-size: 1.2em;
	line-height: 1em;
}

#leftcol {
	float: left; /* since this element is floated, a width must be given */
	width: 210px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	padding: 5px;
	margin: 5px;
}

#mainContent {
	margin: 0 0 0 225px; /* the left margin on this div element creates the column down the left side of the page */
	padding: 5px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
} 

#mainContent .sub-banner { /* this is the banner inside the mainContent div, above the mainContent2 and rightcol divs. It is specified as a class rather than an ID, so there can be more than one on a page. */
	clear: right;
	margin: 0 0 5px 0;
	padding: 0;
}

#mainContent .mainContent2 {
	margin: 0; 
	padding: 5px;
} 

#footer {
	padding: 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	text-align: right;
} 

#footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 24px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

/* utility styles */

.fltrt { 
	float: right;
	margin-left: 8px;
}

.fltlft { 
	float: left;
	margin-right: 8px;
}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

.clear-right {
	font-size: 1px;
	line-height: 0px;
	clear: right;
}

.clear-left {
	font-size: 1px;
	line-height: 0px;
	clear: left;
}

/*************************************
*
*   COLORS, BGS AND IMAGES
*
*************************************/

*:focus {
	outline: none;
}

img {
	border: none;
}

body  {
	background: #000;
	color: #FFF;
}

#container {
	background: #363636;
} 

#header {
	background: #111 url(/projects/vortex2/images/logo-banner-2000.jpg) repeat-x left top;
} 

#leftcol {
	background: #111; /* if javascript is using to equalize the length of this div with the mainContent div, the color will go the length of the container div */
}

#mainContent .sub-banner {
	color: #FFF;
	background: #000 url(/projects/vortex2/images/sub-banner.jpg) no-repeat right top;
}

#mainContent .mainContent2 {
	background: #CDCDCD;
	color: #000;
} 

#footer {
	background:#000;
} 

#header ul#navbuttons li {
	border-left: 1px solid #464646;
	border-bottom: 1px solid #464646;
}

#header ul#navbuttons > li:first-child {
	border-left: none;
}
#header ul#navbuttons li.current, #header ul#navbuttons li:hover {
	border-bottom: none;
}

#header ul#navbuttons li.notcurrent { /* used for mouseover effects */
	border-bottom: 1px solid #464646;
}

#header ul#navbuttons li#HOME {
	background: url(/projects/vortex2/images/v2-buttons-bg-948-rev3-trans.gif) no-repeat 0px 2px;
}

#header ul#navbuttons li#BACKGROUND {
	background: url(/projects/vortex2/images/v2-buttons-bg-948-rev3-trans.gif) no-repeat -109px 2px;
}

#header ul#navbuttons li#TEAM {
	background: url(/projects/vortex2/images/v2-buttons-bg-948-rev3-trans.gif) no-repeat -218px 2px;
}

#header ul#navbuttons li#INSTRUMENTS {
	background: url(/projects/vortex2/images/v2-buttons-bg-948-rev3-trans.gif) no-repeat -327px 2px;
}

#header ul#navbuttons li#SCIENCE {
	background: url(/projects/vortex2/images/v2-buttons-bg-948-rev3-trans.gif) no-repeat -436px 2px;
}

#header ul#navbuttons li#MEDIA {
	background: url(/projects/vortex2/images/v2-buttons-bg-948-rev3-trans.gif) no-repeat -545px 2px;
}

#header ul#navbuttons li#LEARN {
	background: url(/projects/vortex2/images/v2-buttons-bg-948-rev3-trans.gif) no-repeat -654px 2px;
}

#header ul#navbuttons li#HOME:hover {
	background: url(/projects/vortex2/images/v2-buttons-bg-948-rev3-trans.gif) no-repeat 0px -65px;
}

#header ul#navbuttons li#BACKGROUND:hover {
	background: url(/projects/vortex2/images/v2-buttons-bg-948-rev3-trans.gif) no-repeat -109px -65px;
}

#header ul#navbuttons li#TEAM:hover {
	background: url(/projects/vortex2/images/v2-buttons-bg-948-rev3-trans.gif) no-repeat -218px -65px;
}

#header ul#navbuttons li#INSTRUMENTS:hover {
	background: url(/projects/vortex2/images/v2-buttons-bg-948-rev3-trans.gif) no-repeat -327px -65px;
}

#header ul#navbuttons li#SCIENCE:hover {
	background: url(/projects/vortex2/images/v2-buttons-bg-948-rev3-trans.gif) no-repeat -436px -65px;
}

#header ul#navbuttons li#MEDIA:hover {
	background: url(/projects/vortex2/images/v2-buttons-bg-948-rev3-trans.gif) no-repeat -545px -65px;
}

#header ul#navbuttons li#LEARN:hover {
	background: url(/projects/vortex2/images/v2-buttons-bg-948-rev3-trans.gif) no-repeat -654px -65px;
}

#header ul#navbuttons li#HOME.current:hover {
	background: url(/projects/vortex2/images/v2-buttons-bg-948-rev3-trans.gif) no-repeat 0px 2px;
}

#header ul#navbuttons li#BACKGROUND.current:hover {
	background: url(/projects/vortex2/images/v2-buttons-bg-948-rev3-trans.gif) no-repeat -109px 2px;
}

#header ul#navbuttons li#TEAM.current:hover {
	background: url(/projects/vortex2/images/v2-buttons-bg-948-rev3-trans.gif) no-repeat -218px 2px;
}

#header ul#navbuttons li#INSTRUMENTS.current:hover {
	background: url(/projects/vortex2/images/v2-buttons-bg-948-rev3-trans.gif) no-repeat -327px 2px;
}

#header ul#navbuttons li#SCIENCE.current:hover {
	background: url(/projects/vortex2/images/v2-buttons-bg-948-rev3-trans.gif) no-repeat -436px 2px;
}

#header ul#navbuttons li#MEDIA.current:hover {
	background: url(/projects/vortex2/images/v2-buttons-bg-948-rev3-trans.gif) no-repeat -545px 2px;
}

#header ul#navbuttons li#LEARN.current:hover {
	background: url(/projects/vortex2/images/v2-buttons-bg-948-rev3-trans.gif) no-repeat -654px 2px;
}

/*************************************
*
*   TYPOGRAPHY
*
*************************************/

html {
	font-size: 100.1%;
	font-weight: normal;
	font-style:normal;
}

body {
	font: 0.625em Verdana, Arial, Helvetica, sans-serif;  /* base font size 10px makes for easy calculations */
}

h1, h2, h3 {
	font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
}

h4, th, dt {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
}

h5 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-style: italic;
}

h1 {
	font-size:2.4em;  
	line-height:1em;
	margin:0.5em 0;
}

h2 {
	font-size:2em;
	line-height:1em;
	margin:0.5em 0;
}

h3 {
	font-size:1.6em;  
	line-height:1em;
	margin:0.5em 0;
}

h4, h5 {
	font-size:1.3em;
	line-height:1.5em;
	margin:0.5em 0;
}

th, dt {
	font-size:1.2em;
	line-height:1.5em;
	margin:0 0 1em 0;
}

p, td {
	font-size: 1.2em;
	line-height: 1.5em;
	margin:0 0 1em 0;
}

li, dd, blockquote {
	font-size: 1.2em;
	line-height: 1.5em;
	margin-top: 0;
	margin-bottom: 1em;
}

ul, ol, dl {
	margin-top: 2em;
	margin-bottom: 2em;
	padding-top: 0px;
	padding-bottom: 0px;
}

ul ul {
	margin-top: 1em;
	margin-bottom: 1.5em;
	padding-top: 0;
	padding-bottom: 0;
}
ul ul li {
	font-size: 1em;
}

a:link, a:visited {
	color: #21CD6E;
	text-decoration: none;
}

a:hover, a:active {
	color: #21CD6E;
	text-decoration: underline;
}

/*************************************
*
*   SPECIAL STUFF
*
*************************************/

#skipnav {
	font-size: 1px;
	line-height: 0px;
	visibility: hidden;
	text-indent: -9999px;
}

#header #breadcrumbs {
	font-size: 1.2em;
	line-height: 1.5em;
	clear: both;
	padding: 6px 10px;
	border-bottom: 1px solid #464646;
	border-top: 1px solid #464646;
}

#header #navigation {
	float: right;
	border-left: solid 1px #464646;
}

#header #navtext {
	font-size: 1.2em;
	line-height: 1em;
}

#header #nav-subhead {
	margin: 0px;
	padding: 0px;
}

#header .mousetext {
	color: #21CD6E;
}

#header .curtext {
	color: #FFF;
} 

#header #contact {
	float: right;
	font-size: 0.9em;
}

#header #contact img {
	padding-left: 3px;
	vertical-align: -3px;
}

#leftcol h3 {
	background: #252525 url(/projects/vortex2/images/graygrad-bg.jpg) repeat-x top;
	padding: 7px;
	margin: 0;
}

#leftcol .news-text {
	padding: 7px;
}

#leftcol .news-text .newsitem {
	padding: 7px;
	margin: 7px 0 2px 0;
	border: 1px solid #464646;
	font-size: 0.9em;
}

#mainContent .sub-banner h2 {
	font-size: 1.6em;
	color: #21CD6E;
	line-height: 1.1em;
	margin-top: 1.4em;
	font-weight: normal;
}

#mainContent .main-text {
	background-color: #EBEBEB;
	border: 1px solid #A1A1A1;
	padding: 5px;
	margin-bottom: 5px;
}

#mainContent .main-text + h2 {
	margin-top: 1.0em;
}

.main-text a:link, .main-text a:visited {
	color: #009345;
	font-weight: bold;
	text-decoration:none;
}
.main-text a:hover, .main-text a:active {
	color: #009345;
	text-decoration:underline;
}

.main-text ul li {
	margin-top: 0px;
	margin-bottom: 5px;
	padding-top: 0px;
	padding-bottom: 0px;
}

#mainContent #maintext-team {
	background-position-x: right top;
	background: #EBEBEB url(/projects/vortex2/images/logos.gif) no-repeat 585px 27px;
	padding-right: 144px;
}

#footer a:link, #footer a:visited {
	color: #FFF;
	text-decoration: none;
}

#footer a:hover, #footer a:active {
	color: #FFF;
	text-decoration: underline;
}

#footer #footerlogos {
	padding: 0;
	margin: 0;
	float: left;
}
#footer #footerlogos img {
	padding-right: 24px;
}

.frame-gray {
	border: 1px solid #464646;
}

.frame-gray-padded {
	border: 1px solid #464646;
	padding: 5px;
}

.frame-white-padded {
	border: 1px solid #464646;
	padding: 5px;
	background-color:#EBEBEB;
}

.frame-gray-padded2 {
	border: 1px solid #464646;
	padding: 5px;
	background-color:#CDCDCD;
}

.frame-green {
	border: 1px solid #00A84F;
}

.green-heading {
	border-left: 10px solid #009345;
	padding-left: 5px;
}

.indent {  /* makes text even with header text from .green-heading */
	margin-left: 15px;
}

.margin-top {  /* for when a symmetric margin doesn't work */
	margin-top: 1em;
	margin-bottom: 0;
}

.margin-big {  
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}

.emphasis-box {
	background: #D9E8E0;
	padding: 5px;
	border: 1px solid #96CBAF;
}

.newsitem ul {
	margin: 0.75em 0;
}

.newsitem ul li {
	margin: 0.75em 0 0.75em -1.5em;
	list-style: square;
}

.newsitem ul.nobullet li {
	margin: 0.75em 0 0.75em -2.5em;
	list-style: none;
}

#web2 {  /* "online" box */
	font-size: 1.1em;
	padding: 0.5em 0 0 1.5em;
	margin-bottom: 8px;
}

.newsitem p {
	margin: 0.75em 0;
	padding: 0px;
}

/* start organizing here */

table {
	border-collapse: collapse;
	margin: 1em 0 3em 0;
}

th {
	text-align: left;
	vertical-align: baseline;
	padding: 7px;
	margin: 0;
	background: #A2E0BE;
	border-bottom: 2px solid #009345;
}

td {
	text-align: left;
	vertical-align: top;
	padding: 7px;
	margin: 0;
	border-bottom: 1px solid #A1A1A1;
	background: #FFF;
}

tr.sub-row > td {
	padding-left: 21px;	
}

.margin-bottom {  /* for when a symmetric margin doesn't work */
	margin-top: 1em;
	margin-bottom: 1em;
}

.indent2 {  /* makes text even with header text from .green-heading */
	margin-left: 30px;
}

.credit {
	font-size: 0.9em;
	margin: 0px;
	padding: 0px;
	text-align: right;
	line-height: 1em;
	font-weight: normal;
	font-style: italic;
	color: #6F6F6F;
}

.duration {
	font-size: 1em;
	line-height: 1.2em;
	font-weight: normal;
	font-style: italic;
	color: #464646;
}

.list-none {
	list-style: none;
}

.indent-dl dt {
	margin-left: 15px;
}

.picture-right {
	background: #FFF;
	margin: 0 0 5px 7px;
	padding: 5px;
	border: 1px solid #D5D5D5;
	float: right;
	text-align: center;
}

.picture-right2 {
	margin: 0 0 5px 7px;
	padding: 0px;
	float: right;
	text-align: center;
}

.caption {
	font-size: 1em;
	margin-top: 5px;
	margin-bottom: 0px;
	text-align: left;
	margin-left: 5px;
}

dd ul, dd ol {
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

dd p, dd ul li, dd ol li {
	font-size: 1em;
}

ul ul {
	margin-bottom: 0px;
	padding-bottom: 0px;
}

.note {
	font-size: 95%;
}

.note2 {
	font-size: 110%;
}

.image-centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.emphasis-red {
	font-weight: bold;
	color: #F03;
}
.main-text .space-list li {
	margin-top: 2em;
	list-style: none;
}

.emphasis-black {
	font-weight: bold;
}


/* 2016 VORTEX BANNER */

.vortex-banner {
	border: 5px solid #464646;
}

.vortex-banner img {
	width: 100%;
	height: auto;
}