@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
 *
 ******************************/
 
 /********* Structure **********
 *
 *	body
 *
 *		container
 *
 *			header
 *
 *			leftcol
 *
 *			mainContent
 *				sub-banner
 *				mainContent2
 *				rightcol
 *
 *			footer
 *
 ******************************/
 
/*************************************
*
*   STRUCTURE
*
*************************************/

/* basic 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;
}

#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 230px; /* the left margin on this div element creates the column down the left side of the page */
	padding: 0; 
}
 
#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: 5px 5px 5px 0;
	padding: 0;
}

#mainContent .rightcol {  /* this is the nested right-side column inside the mainContent div.  It is specified as a class rather than as an ID, so there can be more than one on a page */
	float: right; /* 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: 0 5px;
}

#mainContent .mainContent2 {  /* this is the nested content space inside the mainContent div.  It is specified as a class rather than as an ID, so there can be more than one on a page */
	margin: 0 230px 0 0; /* the right margin on this div element creates the column down the right side of the page */
	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 .rightcol {
	background: #005327; /* the background color will be displayed for the length of the content in the column, but no further */
}

#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:1em;
	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;
}

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

.rightcol-item {
	padding: 7px;
	border: 1px solid #00A84F;
	margin: 7px 0 7px 0;
	font-size: 0.9em;
}

#rightcol1 a {
	color: #8ADBAE;
}

#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;
}

#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-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: 0px;
}

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

.emphasis-box-gray {
	background: #DDD;
	padding: 5px;
	border: 1px solid #9C9C9C;
}

.emphasis-box-red {
	background: #E8CCCC;
	padding: 5px;
	border: 1px solid #CC9797;
	color: #000;
}

.emphasis-box p, .emphasis-box-red p {
	margin: 0.4em 3px;
}

.emphasis-box.banner {
	background: #D9E8E0 url(/projects/vortex2/images/redbanner-new.gif) no-repeat left top;
	padding-left: 24px;
}

.emphasis-box-red.banner {
	background: #E8CCCC url(/projects/vortex2/images/redbanner-new.gif) no-repeat left top;
	padding-left: 24px;
}

.emphasis-box a:link, .emphasis-box a:visited {
	font-weight: bold;
	color: #009345;
	text-decoration: none;
}

.emphasis-box a:hover, .emphasis-box a:active {
	font-weight: bold;
	color: #009345;
	text-decoration: underline;
}

.emphasis-box-red a:link, .emphasis-box-red a:visited {
	font-weight: bold;
	color: #C00;
	text-decoration: none;
}

.emphasis-box-red a:hover, .emphasis-box-red a:active {
	font-weight: bold;
	color: #C00;
	text-decoration: underline;
}

.nav {
	font-size: 0.9em;
}

.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;
}

.rightcol-item p, .newsitem p {
	margin: 0.75em 0;
	padding: 0px;
}

#rightcol1 #countdown p {
	text-align: center;
}

#leftcol #xkcd {
	text-align: center;
}

#leftcol #xkcd p {
	text-align: left;
}

/* 2016 VORTEX BANNER */

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

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