/* description: General CSS styles for all MPLNET pages. */

/**
 *	MPLNET General CSS Rules
 *
 *	These rules are meant to apply for any MPLNET site page.
 *
 *	Compatibility Notes:
 *		Compatible with Firefox 30+, IE 8+, Safari 8+, and Chrome 40+.
 *		Other browsers are likely to work, but not guaranteed to.
 *		IE 6 and below will definitely have problems.
 *		Browsers must support the following:
 *			Multiple identical selectors: .x,.y{}.y{}
 *			Multiclass selectors: .x.y{}
 *		Vendor prefixes (-moz-, -webkit-) are included only if the browser(s) requiring them is < 5 years old.
 *		The -o- Opera prefix is not used.
 *		Perhaps these will be added back if we ever get a preprocessor.
 *
 *	IE8 regex: (:: *selection|:(not|target|empty|(nth-)?(first|last|only|nth)-(child|of-type)|root|disabled|enabled|invalid|optional|required|valid)|text-shadow|gradient)\b
 *	IE9 regex: (:(invalid|optional|required|valid)|text-shadow|gradient)\b
 *
 *	Supported browsers:
 *		Apple Safari 5.0+
 *		Google Chrome 5.0+
 *		Mozilla Firefox 3.6+
 *		Microsoft Internet Explorer 8.0+ (some rendering problems in IE8 & IE9)
 *		Other browsers may work to varying degrees.
 *
 *	Known bugs:
 *		No rounded corners in <=IE8.
 *		No text shadows in <=IE9.
 *		No block shadows in <=IE8.
 *		Some missing block shadows in IE9.
 *		Chrome may completely ignore tabs.
 *		IE will always use 8 instead of 4 character tab stops.
 *		Safari and Chrome may use 8 instead of 4 character tab stops.
 *		Text rendering in Chrome and Safari are missing ligatures and generally cruddy.
 *		<IE10 does not do animations.
 *
 *	Z-Index Ranges:
 *		  0 -  99 = Reserved for template UI. (#content is 99)
 *		100 - 800 = Content (Use for most content.)
 *		801 - 899 = Reserved for template UI.
 *		900 - 999 = Overlays (Use for modal dialogues, etc.)
 */

/* Clean up garbage. */
@import url(/css/reset.775.css);

/* Import Open Sans & Ubuntu Mono from Google Fonts. */
@import url(//fonts.googleapis.com/css?family=Open+Sans:400, 700|Ubuntu+Mono:400, 700);

/* Format Classes /////////////////////////////////////////////////////////// */

.sans {
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
.mono {
	font-family: "Ubuntu Mono", "Lucida Console", monospace;
}
.arial {
	font-family: Arial, sans-serif;
}
.centered {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.good {
	color: #040;
	text-shadow: 0 0.5px 1px #080;
}
.warn {
	color: #840;
}
.error, .red {
	color: #E02;
}
.update {
	color: #008;
	text-shadow: 0 0.5px 1px #00C;
}
.green {
	color: #092;
}
.nocolor {
	color: #000;
}
.icon {
	display: block;
	margin: auto;
}
.form-box {
	display: inline-block;
	padding-left: auto;
	padding-right: auto;
	border: 1px solid #000;
	border-radius: 3px;
	color: #EEE;
	background: #333;
	box-shadow: 2px 2px 5px #797979; /* <=IE9 no {:rgba()}, pre-calculate from body{background} == #F2F2F2 instead */
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* IE8 ignores, IE9 ignores unless {border-collapse:separate} */
	margin: 15px;
	padding: 5px 15px;
}
.spacer {
	width: 10px;
	display: inline-block;
}

/* Whole Page /////////////////////////////////////////////////////////////// */

html {
	height: 100%;
	width: 100%;
}
body {
	height: 100%;
	min-height: 100%;
	width: 100%;
	font-family: "Open Sans", Helvetica, Arial, sans-serif; /* .sans{font-family} */
	font-weight: normal; /* aka 400 */
	font-size: 13px;
	line-height: 16px;
	color: #000;
	background: #F2F2F2;
	-moz-tab-size: 4; /* FF>=4 */
	tab-size: 4; /* Chrome<21 ignores, Safari<6.1 ignores, FF>=? */
}
code,
samp,
pre,
tt {
	font-family: "Ubuntu Mono", "Lucida Console", monospace; /* .mono{font-family} */
}

/* Basic Elements /////////////////////////////////////////////////////////// */

/* headings */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
	margin: 0;
	padding: 12px 0 6px 0;
	text-align: center;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* <=IE9 ignores */
}
h1 {
	font-size: 24px;
}
h2 {
	font-size: 18px;
}
h3 {
	font-size: 16px;
}
h4 {
	font-size: 14px;
}
h5 {
	font-size: 13px;
	font-style: italic;
}
h6 {
	font-size: 12px;
	font-style: italic;
}
/* format tags */
b,
strong {
	font-weight: bold;
}
i,
em {
	font-style: italic;
}
u {
	text-decoration: underline;
}
small {
	font-size: 75%;
}
/* page elements */
hr {
	margin: 10px 15px;
	border: none;
	height: 1px;
	background: #9D9D9D; /* <=IE9 no {:rgba()}, pre-calculate from body{background} == #F2F2F2 instead */
	background: rgba(0, 0, 0, 0.35);
}
/* paragraphs */
p {
	margin: 7.5px 5px;
}
p.left {
	text-align: left;
	text-indent: 3em;
}
pre + p {
	text-indent: 0em;
}

/* Code ///////////////////////////////////////////////////////////////////// */

code {
	white-space: nowrap;
}
.box,
code,
samp,
pre {
	border-radius: 2px; /* <=IE8 ignores */
}
.box,
code,
samp {
	padding: 0 3px;
	border: none; /* <=IE9 no {:rgba()}, pre-calculate from body{background} == #F2F2F2 instead */
	background-color: #D9D9D9; /* <=IE9 no {:rgba()}, pre-calculate from body{background} == #F2F2F2 instead */
	background-color: rgba(0, 0, 0, 0.1);
	word-break: keep-all;
}
pre {
	margin: 0 5px 5px 5px;
	padding: 0 5px;
	border: 1px solid #737373; /* <=IE9 no {:rgba()}, pre-calculate from body{background} == #F2F2F2 instead */
	border: 1px solid rgba(0, 0, 0, 0.5);
	background-color: #E8E8E8; /* <=IE9 no {:rgba()}, pre-calculate from body{background} == #F2F2F2 instead */
	background-color: rgba(0, 0, 0, 0.04);
	text-align: left;
	white-space: pre-wrap;
	overflow:auto;
}
/* automatically line pre.lined */
pre.lined {
	counter-reset: linecounter;
	padding: 0;
}
pre .line {
	position: relative;
	display: block;
	padding: 0 5px;
	counter-increment: linecounter;
	padding-left: 6em;
	text-indent: -2em;
}
pre .line:nth-child(odd) {
	background: #E8E8E8; /* <=IE9 no {:rgba()}, pre-calculate from pre{background} == #E8E8E8 instead */
	background: rgba(0, 0, 0, 0);
}
pre .line:nth-child(even) {
	background: #DCDCDC; /* <=IE9 no {:rgba()}, pre-calculate from pre{background} == #E8E8E8 instead */
	background: rgba(0, 0, 0, 0.05);
}
pre .line:before {
	position: absolute;
	display: block;
	height: 100%;
	content: counter(linecounter);
	width: 1.5em;
	border-right: 2px solid #888;
	left: 1em;
	font-style: italic;
	color: #888;
}
pre .line.long:before {
	width: 1.5em;
	left: 2em;
}
/* code highlighting */
.command,
.keyword {
	color: #0000F0;
}
.keyword.builtin {
	font-weight: bold;
}
.keyword.operator {
	color: #02A;
	font-weight: normal;
}
.keyword.exec {
	color: #A00;
	font-weight: bold;
}
.function {
	color: #0000F0;
}
.string {
	color: #80D;
}
.comment {
	color: #278710;
	font-style: italic;
}
.comment.docstring,
.docstring {
	color: #65B0B0;
}
.comment.docblock,
.docblock {
	color: #278710;
}
.numeric {
	color: #476693;
}
.source.embeded {
	background-color: #CBCBEA; /* <=IE9 no {:rgba()}, pre-calculate from pre{background} == #E8E8E8 instead */
	background-color: rgba(0, 0, 255, 0.12);
}
.constant.language {
	color: #00695E;
}
.storage.type {
	color: #1180B8;
}
.meta.preprocessor,
.keyword.define {
	color: #9C0000;
}

/* Tables /////////////////////////////////////////////////////////////////// */

/* Data Tables, table.data */
table.data {
	border: 1px solid black;
	margin-left: auto;
	margin-right: auto;
}
table.data > tbody > tr {
	border-bottom: 1px solid black;
}
table.data > tbody > tr:last-child {
	border-bottom: none;
}
table.data > tbody > tr > th {
	padding: 1px 5px 1px;
	border-right: 1px solid black;
	vertical-align: middle;
	font-weight: bold;
}
table.data > tbody > tr > td {
	padding: 1px 5px 1px;
	border-right: 1px solid black;
	vertical-align: middle;
	line-height: 25px;
}
table.data > tbody > tr > th:last-child,
table.data > tbody > tr > td:last-child {
	border-right: none;
}
table.data .missing {
	color: red;
}

/* Lists //////////////////////////////////////////////////////////////////// */

/* ordered lists */
ol {
	list-style-type: none;
	counter-reset: ol-counter;
}
ol > li {
	position: relative;
	margin-left: 35px;
	margin-bottom: 6px;
}
ol > li:before {
	position: absolute;
	top: 0;
	left: -30px;
	content: counter(ol-counter)") ";
	counter-increment: ol-counter;
}

ul {
	list-style-position: inside;
}
ul > li {
	list-style-type: disc;
	margin-left: 15px;
}
dt {
	display: block;
	font-weight: bold;
}
dt:after {
	content: ": ";
}
dd {
	display: block;
	padding-left: 40px;
	margin-top: 5px;
	margin-bottom: 15px;
	background: #E5E5E5; /* <=IE9 no {:rgba()}, pre-calculate from body{background} == #F2F2F2 instead */
	background: rgba(0, 0, 0, 0.05);
}

/* Web Plots (Old) ////////////////////////////////////////////////////////// */

/*>> no work done to update web plot CSS, because web plots will be deprecated soon */
.webplot {
	position: relative;
	display: inline-block;
	line-heigth: 0;
	margin-bottom: 5px;
}
.webplot-plot {
	display: block;
	border: 1px solid black;
}
.webplot-controls {
	border-radius: 3px;
	border: 1px solid black;
	display: inline-block;
	background: #333;
	color: #EEE;
	margin: 5px;
	padding-left: 15px;
	padding-right: 15px;
}
.webplot-plot-controls {
	border-radius: 0 0 3px 3px;
	border: 1px solid black;
	display: none;
	background: #333;
	color: #EEE;
}
.webplot-edit-image {
	display: block;
	position: absolute;
	right: 2px;
	bottom: 5px;
}
.webplot-plot-controls > table,
.webplot-controls > form > table {
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
.webplot-plot-controls > table > tbody > tr > th,
.webplot-controls > form > table > tbody > tr > th {
	text-align: right;
}

/* Progress Bar ///////////////////////////////////////////////////////////// */

.progress-entry {
	margin: 3px 3px 2px 3px;
	padding: 0 5px 2px 5px;
	border: 1px solid #444;
	border-radius: 3px;
	background: #333;
	font-size: 13px;
	line-height: 14px;
	text-align: left;
	-webkit-animation-timing-function: linear; /* 43<Chrome, 4<Safari */
	-moz-animation-timing-function: linear; /* 5.0<=FF<16 */
	animation-timing-function: linear; /* 10<=IE, 16<=FF, 43<=Chrome */
	-webkit-animation: anim_progress_entry 5s; /* Chrome<43, 4<=Safari */
	-moz-animation: anim_progress_entry 5s; /* 5<=FF<16 */
	animation: anim_progress_entry 5s; /* 43<=Chrome, 16<=FF, 10<=IE, IE<10 ignores */
}
@-webkit-keyframes anim_progress_entry { /* Chrome, 4<=Safari */
	0% {
		background: #3877E0;
	}
	100% {
		background: #333333;
	}
}
@-moz-keyframes anim_progress_entry { /* 5<=FF<16 */
	0% {
		background: #3877E0;
	}
	100% {
		background: #333333;
	}
}
@keyframes anim_progress_entry { /* 16<=FF, 10<=IE, IE<10 ignores */
	0% {
		background: #3877E0;
	}
	100% {
		background: #333333;
	}
}
.progress-scroll {
	margin: 1px 0 0 0;
	padding: 0;
	overflow-y: scroll;
}
.progress-log {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}
.progress-label {
	position: absolute;
	z-index: 999;
	top: 0;
	text-align: center;
	color: #FFF;
	text-shadow: 1px 1px 2px #000, -1px -1px 2px #000;
	overflow: visible;
}
/* Full Page Layout ///////////////////////////////////////////////////////// */

/*	On use of <table> for layout:
 *		
 *		As I'm sure you've noticed, MPLNET's full-page layout uses a table instead of divs.
 *		I am aware that many web design aficionados consider layout using tables the "wrong" way.
 *		However, the section below works in all major browsers, and is less than 1/10th the size and complexity it was when it was still <div>s.
 */

/* root-level table */
#rl-table {
	table-layout: fixed;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	border: none;
	border-collapse: collapse;
	background: none;
}
/* dummy row to establish section widths */
#rl-_ {
	height: 0;
	background: #000;
	border: none;
}
/* width to left of sidebar: (expands to center page) */#rl-_left {
	height: 0;
	background: #000;
	border: none;
}
/* width of sidebar */#rl-_side {
	width: 185px;
	height: 0;
	background: #000;
	border: none;
}
/* width of body */#rl-_body {
	width: 994px;
	height: 0;
	background: #000;
	border: none;
}
/* width to right of body (expands to center page) */#rl-_right {
	height: 0;
	background: #000;
	border: none;
}
/* header banner row */#rl-top {
	height: 82px;
	width: 100%;
	color: #FFF;
	background: #000;
	x-index: 802;
	font-size: 10px;
	line-height: 1;
	/*>> check if font-size value works here */
}
/* center portion of banner */#rl-topcenter {
	position: relative;
	width: 1180px;
	max-width: 1180px;
	background-image: url(/img/layout/header-nrb.jpg);
}
/* top NASA logo (separated for IE) */
.rl-nasa-logo,
.rl-nasa-logo-bottom {
	position: absolute;
	display: block;
	height: 82px;
	/* different from .rl-nasa-logo-bottom */
	width: 96px;
	background-image: url(/img/layout/nasa-logo.png);
	background-repeat: no-repeat;
	background-position: right;
}
/* bottom NASA logo (separated for IE) */.rl-nasa-logo-bottom {
	position: absolute;
	display: block;
	height: 62px;
	/* different from .rl-nasa-logo-top */
	width: 96px;
	background-image: url(/img/layout/nasa-logo.png);
	background-repeat: no-repeat;
	background-position: right;
	background-size: 73px 62px;
}
.rl-nasa-link {
	display: block;
	position: absolute;
	text-align: left;
	left: 104px;
	top: 10px;
	color: white;
	font-weight: bold;
	font-size: 10px;
	text-decoration: none;
	line-height: 10px;
	text-shadow: 0px 0px 10px #000;
}
.rl-center-link {
	display: block;
	position: absolute;
	text-align: left;
	left: 104px;
	top: 35px;
	color: white;
	font-weight: normal;
	font-size: 10px;
	text-decoration: none;
	line-height: 10px;
	text-shadow: 0px 0px 10px #000;
}
.rl-title {
	display: block;
	position: absolute;
	left: 447px;
	top: 23px;
	color: white;
	font-weight: normal;
	font-size: 36px;
	text-decoration: none;
	line-height: 48px;
	text-shadow: 0px 0px 10px #000;
}
.rl-subtitle {
	display: block;
	position: absolute;
	left: 600px;
	top: 48px;
	color: white;
	font-weight: normal;
	font-size: 13.333px;
	text-decoration: none;
	line-height: 13.333px;
	text-shadow: 0px 0px 10px #000;
}
.rl-center-logo,
.rl-center-logo-bottom {
	display: block;
	position: absolute;
	height: 56px;
	width: 132px;
	right: 10px;
	top: 16px;
	background-image: url(/img/layout/gsfc-logo.png);
	_background-image: url(/img/layout/gsfc-logo.gif);
	/* IE6 */
	background-repeat: no-repeat;
	background-position: right;
}
.rl-center-logo-bottom {
	height: 36px;
	width: 85px;
	background-size: 85px 36px;
}
#rl-middle {
	background: none;
}
#rl-bottom {
	height: 62px;
	background: #000;
	color: white;
}
#rl-left {
	box-shadow: inset -5px 5px 5px -5px #000;
	background: #262626;
}
#rl-right {
	box-shadow: inset 5px 5px 5px -5px #000;
	background: #262626;
}
#rl-side {
	box-shadow: inset 0 5px 5px -5px #000;
	padding: 0;
	margin: 0;
	vertical-align: top;
	position: relative;
	background: #0F0F0F;
}
.rl-menu {
	margin: 8px;
	background: #2365AE;
	font-weight: normal;
	vertical-align: middle;
	line-height: 24px;
	color: white;
}
.rl-menu>a {
	color: white;
	text-decoration: none;
	text-align: left;
	display: inline-block;
	height: 24px;
	width: 100%;
	padding-left: 5px;
}
.rl-sub {
	background: #595959;
	box-shadow: inset 0 5px 5px -5px #000;
}
.rl-sub>a {
	color: white;
	text-decoration: none;
	text-align: left;
	display: block;
	line-height: 24px;
	vertical-align: middle;
	font-weight: normal;
	padding-left: 5px;
	position: relative;
}
.rl-subitem:first-child {
	padding-top: 5px;
}
.rl-subbutton {
	display: block;
	position: relative;
	float: left;
	height: 12px;
	width: 12px;
	left: 0px;
	margin: 0px 10px 1px 1px;
	padding: 0;
	bottom: 4px;
	left: 5px;
	position: absolute;
	background: none repeat scroll 0% 0% #0D0D0D;
}
.rl-subbutton:first-child {
	margin-top: 10px;
}
#body {
	box-shadow: inset 3px 5px 5px -5px #000;
	position: relative;
	padding: 5px 10px;
}
#rl-bottomcenter {
	position: relative;
	width: 1180px;
	max-width: 1180px;
}
.rl-org-links {
	display: block;
	position: absolute;
	text-align: center;
	top: 6px;
	left: 360px;
	color: white;
	text-decoration: none;
	font-weight: normal;
	font-size: 10px;
	line-height: 12px;
}
.rl-org-links>a {
	color: white;
	text-decoration: none;
}
.rl-contacts {
	display: block;
	position: absolute;
	text-align: left;
	top: 8px;
	left: 614px;
	line-height: 12px;
}
.rl-contact {
	display: inline-block;
	position: relative;
	width: 120px;
	text-align: right;
	color: white;
	text-decoration: none;
	font-weight: bold;
	font-size: 10px;
	line-height: 12px;
}
.rl-name {
	display: block;
	position: absolute;
	padding-left: 5px;
	width: 200px;
	text-align: left;
	top: 0;
	left: 124px;
	color: white;
	text-decoration: none;
	font-weight: normal;
	font-size: 10px;
	line-height: 12px;
}
.rl-privacy {
	display: block;
	position: absolute;
	left: 632px;
	top: 40px;
	width: 250px;
	text-align: center;
	color: white;
	text-decoration: none;
	font-weight: normal;
	font-size: 10px;
	line-height: 12px;
	font-style: italic;
}
.rl-quicklinks {
	display: block;
	position: absolute;
	left: 866px;
	top: 8px;
	width: 200px;
	text-align: right;
	color: white;
	text-decoration: none;
	font-weight: normal;
	font-size: 10px;
	line-height: 12px;
}
.rl-quicklinks>a {
	color: white;
	text-decoration: none;
}
.rl-name:hover,
.rl-quicklinks>a:hover,
.rl-org-links>a:hover,
.rl-nasa-link:hover,
.rl-center-link:hover,
.rl-privacy:hover {
	text-shadow: 0 0 5px white;
}