/* layout.css */

/******************************************************************************
* UAVSAR GENERAL DEFAULTS
******************************************************************************/
body, table, input, textarea, li {
	font-family: Arial; font-size: 15px; color: #333333;
}

a, a:link, a:visited { color: #365492; text-decoration: none; cursor: pointer;}
a:hover { text-decoration: underline; color: #2e8da6; }

h1, h2, h3, h4 {
	font-family: Lucida Sans Unicode, Arial; color: #333333;
	padding: 0;	margin: 0;
	font-weight: normal;
}
h1 { font-size: 50px; }
h2 { font-size: 30px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }

label { cursor: pointer; }
small {	font-size: 13px; color: #777777; }
ul { margin: 0; padding: 5px 0 0 20px; }

.linespace { line-height: 0.7; }
.red-text { color: #d70000; }
.grey-text { color: #777; }
.green-text { color: #2f714d; }
.black-text { color: #333; }
.center { text-align: center; }

.float-left { float: left; }
.float-right { float: right; }

.small-text { font-size: 13px; }

.scroll-box { overflow: auto; }
.clear { clear: both; }

.no-select {
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
}


/******************************************************************************
* MAIN LAYOUT
******************************************************************************/
body { 
	margin: 0; 
	background: #082743 url("/images/background_gradient.jpg") repeat-x; 
}
.layout { position: relative; width: 990px; margin: 0 auto; }
.maximize { width: 100%; min-width: 990px; }


/******************************************************************************
* JPL HEADER & FOOTER
******************************************************************************/
.header-footer { position: relative; color: #e0f2f7; background-color:#164450;}
.header-footer a { color: #e0f2f7; text-decoration: none; }
.header-footer a:hover { color: white; }

.jpl-header { top: 0; left: 0; height: 60px; }
.jpl-header a {
	position: absolute;	font-family: Helvetica, Arial; font-size: 19px; 
}
.nasa-logo { top: 7px; left: 8px; }
.nasa-logo img { width: 55px; height: 45px; border-style: none; }
.link-JPL { top: 12px; left: 68px; width: 250px; }
.jpl-header .linkCaltech { 
	top: 37px; left: 68px; width: 250px; font-size: 14px; 
}
.jpl-links {
	position: absolute; top: 7px; right: 0; padding: 0; margin: 0;
	width: 505px; height: 20px;
	display: inline; list-style: none;
}
.jpl-links li {	display: inline; margin-left: 12px; }
.jpl-links a { position: relative; font-size: 11px; color:#84a6be; }
.jpl-header .link-home { top: 33px; right: 15px; font-size: 16px; }

.footer { top: 150px; height: 28px; font-size: 12px; }
.no-banner .footer { top: 0px; }
.maximize .footer { top: 0; }
.footer-date { position: absolute; top: 8px; left: 10px; width: 250px; }
.footer-links { 
	position: absolute;	top: 8px; left: 0; width: 100%; text-align: center; 
}
.clearance-num { position: absolute; top: 8px; right: 10px; }


/******************************************************************************
* MY ACCOUNT NAVIGATION
******************************************************************************/
.account-nav {
	position: relative; width: 100%; height: 20px; padding: 7px 0;
	line-height: 20px; 
	background-color: #9dc8d4;
}
.account-nav .left { position: absolute; top:7px; left:10px; z-index:5; }
.account-nav .right { position:absolute; top:7px; right:10px; z-index:5;}
.account-nav .right b { color: #666; }
.account-nav .center { 
	position: absolute; top: 7px; left: 0; width: 100%; 
	text-align: center; 
	z-index: 1; 
}


/******************************************************************************
* CONTENT
******************************************************************************/
.content {
	position: relative; top: 150px; padding: 20px 25px; width: 938px; 
	line-height: 1.5;
	overflow: hidden;
	background: url("/images/background_mainContent.png");
	border: 1px solid white;
}
.no-banner .content { top: 0; padding-top: 10px; }
.maximize .content { 
	top: 0; width: 100%; padding: 0; 
	border-left: none; border-right: none; 
}

h2 { margin-bottom: 7px; color: #2a8c86; }
.maximize h2 { margin: 10px 0 10px 20px; }
h3 { margin-bottom: 5px; color: #776324; }

.right-link { float: right; margin: 15px 20px 0 0; }

p { margin-bottom: 20px; }
a img { border: none; }

.rounded-5 { 
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
	border-radius: 5px;
}
.rounded-10 { 
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
	border-radius: 10px;
}
.rounded-15 { 
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
	border-radius: 15px;
}
.rounded-20 { 
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
	border-radius: 20px;
}

th { 
	padding: 3px 10px 0 10px; font-weight: bold; font-size: 16px; color: #555;
}
td { padding: 4px 10px; border: 1px solid #aaa; }

hr { border: none; border-top: 1px solid #aaa; }

.align-right { text-align: right; }
.align-left { text-align: left; }
.align-center { text-align: center; }
.auto-width { width: auto; }

.v-align {
	top: 50%; 
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.color-row { background-color: #dae9ee; }
.table-small-text th { font-size: 15px; }
.table-small-text td { font-size: 14px; }

.error-box { 
  	padding: 10px;
	color: #c70000; font-weight: bold; 
	background-color: #fff1ba;
	border: 3px double #c70000;
}
.error-message { 	
	float: left; width: 900px; height: 600px; padding: 10px; 
	font-size: 18px; color: red; line-height: 1.5;
}

.no-bullets { list-style-type: none; padding-left: 0; }

.hide { display: none; }

/* Help icons */
.help a {
	display: block;
	width: 20px; height: 20px;
	background: url('/images/iconHelp.png') 0 0 no-repeat;
}
.help a:hover {	background-position: -20px 0; }


/******************************************************************************
* TABS
******************************************************************************/
.tabs { margin: 15px 0 0 0; padding: 0; height: 36px; }
.tabs li {
	float: left; padding: 10px 15px 5px 15px; margin: 0;
	list-style-type: none; 
	font-size: 16px; color: #666;
	background-color: #b5c5c9;
	border: 1px solid white;
    -webkit-border-top-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topright: 10px;
	border-top-right-radius: 10px;
}
.tabs li:hover { background-color: #c3d4d9; cursor: pointer; }
.tabs .selected, .tabs .selected:hover {
	color: #333; font-weight: bold; 
	background: url("/images/background_mainContent.png");
}
.tab { display: none; }
.tab-content { padding: 10px 20px 25px 10px; overflow: auto; }


/******************************************************************************
* BUTTONS
******************************************************************************/
.button, .gray-button, .action-button {
    position: relative; width: 100px; height: 30px; line-height: 30px; 
	font-family: Lucida Sans Unicode, Arial; font-size: 16px;
    text-decoration: none; text-align: center; color: white;
    display: block;
    
    /* Background gradients */
    background-color: #339cb8;
    background: -moz-linear-gradient(top, #74b3c4, #5ea6ba 50%, #2e8da6 51%, #2a7d94);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #74b3c4), color-stop(0.5, #5ea6ba), color-stop(0.51, #2e8da6), to(#2a7d94));

    /* Border radius */
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;

    border: 1px solid #339cb8;
    border-top: 1px solid #d8efee;

    /* Text shadow */
    text-shadow: -1px -1px 0 #339cb8, 2px 2px 0 #164450; 

    /* Box shadow */
    -moz-box-shadow: 0 1px 3px black;
    -webkit-box-shadow: 0 1px 3px black;
    box-shadow: 0 1px 3px black;

	/* Don't let user select text in button */
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;
}
a.button {
	color: white;
}
.button:hover, .gray-button:hover, .action-button:hover {
	color: white; text-decoration: none;
}
.button:active, .gray-button:active, .action-button:active {
	color: white;
    -moz-box-shadow: 0 2px 6px black;
    -webkit-box-shadow: 0 2px 6px black;
    box-shadow: 0 2px 6px black;
}
.button:visited, .gray-button:visited, .action-button:visited { color:white; }

.button:hover {
    background-color: #36a4c2;
    background: -moz-linear-gradient(top, #79bacc, #63afc4 50%, #3195b0 51%, #2d869e);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #79bacc), color-stop(0.5, #63afc4), color-stop(0.51, #3195b0), to(#2d869e));
}

.gray-button {
    /* Background gradients */
    background-color: #999999;
    background: -moz-linear-gradient(top, #b4b4b4, #a3a3a3 50%, #8a8a8a 51%, #7b7b7b);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #b4b4b4), color-stop(0.5, #a3a3a3), color-stop(0.51, #8a8a8a), to(#7b7b7b));

    border: 1px solid #595959;
    border-top: 1px solid #d5d5d5;

    /* Text shadow */
    text-shadow: -1px -1px 0 #7b7b7b, 2px 2px 0 #595959;
}

.gray-button:hover {
    background-color: #a2a2a2;
    background: -moz-linear-gradient(top, #bdbdbd, #acacac 50%, #929292 51%, #848484);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #bdbdbd), color-stop(0.5, #acacac), color-stop(0.51, #929292), to(#848484));
}

/* Gold */
.action-button {
    /* Background gradients */
    background-color: #ab9b5d;
    background: -moz-linear-gradient(top, #c7b675, #b8a55c 50%, #a68d2e 51%, #947e2a);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c7b675), color-stop(0.5, #b8a55c), color-stop(0.51, #a68d2e), to(#947e2a));

    border: 1px solid #ab9b5d;
    border-top: 1px solid #ebd78a;

    /* Text shadow */
    text-shadow: -1px -1px 0 #ab9b5d, 2px 2px 0 #6b5b1e; 
}

.action-button:hover {
    background-color: #b5a462;
    background: -moz-linear-gradient(top, #d1bf7b, #c2ae61 50%, #b09531 51%, #9e872d);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d1bf7b), color-stop(0.5, #c2ae61), color-stop(0.51, #b09531), to(#9e872d));
}

/* Simple buttons */
.button-simple {
    display: block;
    float: left; margin: 0;
	background-color: #fafafa; 
    border: 2px solid #7d7d7d;
    border-top: 2px solid #aeaeae;
    border-left: 2px solid #aeaeae;

    font-family: Arial, Helvetica; font-size: 100%;
    line-height: 130%; text-decoration: none; font-weight: bold;
    color: #333333;
    cursor: pointer;
    padding: 3px 10px 4px 10px; 

	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
.button-simple:hover {
    background-color: #ebebeb; color: #4f4f4f;
	border: 2px solid #7d7d7d;
}
.button-simple:active {
    background-color: #7d7d7d; color: #f0f0f0;
    border: 2px solid #7d7d7d;
}

.small-button { width: 60px; height: 20px; line-height: 20px; font-size: 13px;}
.large-button { height: 40px; line-height: 40px; }
.short-button { width: 75px; }
.long-button { width: 200px; }

.hide-button { display: none; }

/******************************************************************************
* DIALOG BOXES
******************************************************************************/
.dialog {
	position: fixed; left: 0; top: 0; 
	background-image: url(/images/overlay.png);
	width: 100%; height: 100%;
	z-index: 10;
	display: none; 
}

/* 
  How to calculate margin-left & top:
    margin-left: -(width + right & left padding + left & right border) / 2
    margin-top: -(height + top & bottom padding + top & bottom border) / 2
*/
.dialog-box, .dialog-box-small, .dialog-box-medium, .dialog-box-medium-tall,
.dialog-box-large {
	position: absolute; left: 50%; top: 50%; 
	margin-left: -178px; margin-top: -118px; padding: 15px;
	width: 320px; height: 200px; 
	font-size: 16px; line-height: 1.5;
	background-color: white;
	border: 3px solid #777;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
	border-radius: 20px;
}
.dialog-header-content { padding-top: 50px; margin-top: -135px; }
.dialog-box-small {
	margin-left: -82px; margin-top: -48px; padding: 10px; 
	width: 140px; height: 70px; line-height: 1;
}
.dialog-box-medium {
	margin-left: -268px; margin-top: -158px;
	width: 500px; height: 250px;
}
.dialog-box-medium-tall {
	margin-left: -268px; margin-top: -258px;
	width: 500px; height: 450px;
}
.dialog-box-large {
	width: 670px; margin-left: -353px;
}

.dialog-title {
	position: absolute; left: 0px; right: 0px; top: 0px; padding: 5px 10px;
	color: white;
	background-color: #999; 
    border-bottom: 1px solid #777;
    -webkit-border-top-left-radius: 15px;
    -moz-border-radius-topleft: 15px;
	border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topright: 15px;
	border-top-right-radius: 15px;
}

.dialog-title--error {
    background: #a60000;
}

.dialog-300h { height: 300px; margin-top: -185px; }

.progress-gif {
	float: left; padding: 5px 10px 5px 0; margin-top: 5px;
	width: 131px; height: 23px;
}

.dialog .button { position: absolute; left: 15px; bottom: 15px; }
.dialog .action-button { position: absolute; right: 15px; bottom: 15px; }

.dialog table { margin: 0 auto; }
.dialog td { border: none; }

.dialog .scroll-box { display: block; height: 190px; border: 1px solid #ccc; }


/******************************************************************************
* LEGENDS
******************************************************************************/
.legend {
	display: block; padding: 5px 10px;
	background-color: #eee; 
	border: 1px solid #aaa;
}
.legend th { text-align: left; padding: 0 0 7px 0; border-bottom: none; }
.color-block {
	display: block; 
	width: 5px; height: 17px; 
	background-color: white;
}
.legend .color-block { border: 1px solid #777; }