/*
	CSS for DQ-Explorer Styles
	
	History:
		- June 2011 Tri Noensie tnnoensie@gmail.com
*/



/* 
	Reset.css
	http://meyerweb.com/eric/tools/css/reset/
	v1.0 | 20080212
--------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q { quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;}
:focus {outline: 0;}					/* remember to define focus styles! */
ins {text-decoration: none;}			/* remember to highlight inserts somehow! */
del {text-decoration: line-through; }
table {border-collapse: collapse; border-spacing: 0;}	/* tables still need 'cellspacing="0"' in the markup */


/* Base
--------------------------------------------------*/
.no-display {display:none;}
.no-visibility {visibility:hidden;}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

:link, :visited {
	text-decoration:none;
	color:#1B76B6;
}


/* Page Structure
--------------------------------------------------*/
.modal-box {
  display: none;
  position: absolute;
  z-index: 1000;
  width: 98%;
  background: white;
  border-bottom: 1px solid #aaa;
  border-radius: 4px;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-clip: padding-box;
}

.modal-box header,
.modal-box .modal-header {
  padding: 1.25em 1.5em;
  border-bottom: 1px solid #ddd;
}

.modal-box header h3,
.modal-box header h4,
.modal-box .modal-header h3,
.modal-box .modal-header h4 { margin: 0; }

.modal-box .modal-body { padding: 2em 1.5em; }

.modal-box footer,
.modal-box .modal-footer {
  padding: 1em;
  border-top: 1px solid #ddd;
  background: rgba(0, 0, 0, 0.02);
  text-align: right;
}

.modal-overlay {
  opacity: 0;
  filter: alpha(opacity=0);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3) !important;
}

a.close {
  line-height: 1;
  font-size: 1.5em;
  position: absolute;
  top: 5%;
  right: 2%;
  text-decoration: none;
  color: #bbb;
}

a.close:hover {
  color: #222;
  -webkit-transition: color 1s ease;
  -moz-transition: color 1s ease;
  transition: color 1s ease;
}

@media (min-width: 32em) {
  .modal-box { width: 50%; }
}

.style-1 input[type="text"] {
  padding: 10px;
  border: solid 1px #dcdcdc;
  transition: box-shadow 0.3s, border 0.3s;
  width:130px;
}
.style-1 input[type="text"]:focus,
.style-1 input[type="text"].focus {
  border: solid 1px #707070;
  box-shadow: 0 0 5px 1px #969696;
}
.btn {
    position: relative;
    display: inline-block;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: bold;
    line-height: 20px;
    color: #333;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-color: #eee;
    background-image: linear-gradient(#fcfcfc,#eee);
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-appearance: none;
}

body {text-align:center; font-family:sans-serif;}

#main-wrapper{
	max-width:1280px; min-width: 960px;
	margin:0 auto;
	padding:10px 55px 25px;
	text-align:left;
}

#header a {font-size:32px; color:#000;}
#header span {font-size:20px;}
#header, #nav {padding:5px 10px; border-bottom:1px dotted black;}
#nav li { display: inline; padding-right:12px; color: #1B76B6; font-size:14px; cursor:pointer;	}
#nav li:hover {text-decoration:underline;}
#nav.fixed {
	position: fixed; width: 100%; z-index: 1000;
	background: #efefef; border: 0; border-bottom: 1px solid #BCBCBC;
	top: 0; right: 0; left: 0;
	-webkit-box-shadow: 0 2px 3px rgba(0,0,0, .25);
	-moz-box-shadow: 	0 2px 3px rgba(0,0,0, .25);
	box-shadow: 		0 2px 3px rgba(0,0,0, .25);
}

#nav li.trailing { position: absolute; cursor: default; overflow:inherit; padding:0px 10px;}
#nav li.trailing:hover { text-decoration:none }

#content {margin:25px 0 40px; text-align: center;}

#footer { clear:both; padding:10px 5px; border-top:1px dotted black; text-align:right; font-size:.70em; }
#footer a:hover {text-decoration:underline;}




/* Page- Home
--------------------------------------------------*/
#submit-loading-gif {display:none; position:fixed; top:50%; left:48%;}




/* Page- Metrics
--------------------------------------------------*/


#tooltip_ul li{
	list-style-type: disc;
	list-style-position: inside;
	text-indent: -1em;
    padding-left: 1em;
}

.tooltip {
  font-size:12px;
  max-width: 200px;
  text-align: left;
  top:25px;
  left:8px;
  background-color:rgba(0, 0, 0, 1);
  color:white;
  border-radius:4px;
  padding:5px;
  position:absolute;
  z-index: 9999;
}

#tooltip_container > div {
    display: none
}
#tooltip_container > div:first-child {
    display: block
}
#tooltip_container:hover > div {
    display: block
}

#floating-summary {position:absolute; text-align:left}
#request-loader-sequence {margin:20px auto 0; display:none;}
span.ui-icon-hover:hover {background-color:#e5e5e5; cursor:pointer;}
#window-metrics-load-counter {
	position: absolute; top: 90%; left: 15%; 
	min-width: 350; padding: 7px 15px; margin: -12px 0 0 -107px; 
	text-align:left;
	z-index:1;
}


/* Request Items */
#request-list {text-align:left;}
#request-list > li {margin-top:30px; padding:10px; border-style:solid; border-width:3px;}
#request-list > li:first-child {margin:0;}
	.uncalled-requests {display:none;}
	/* valid request */
	.request-item {border-color:black;}
	/* Invalid Request */
	.request-invalid {text-align:center; border-color:#f77; position:relative;}
	.request-invalid .invalid-message {font-weight:bold; color:#f77; margin-right: 5px;}
	.request-invalid .delete-block {position:absolute; top:9px; right:8px;}
	/* Missing Metrics */
	.metrics-missing {border-color:#f77;}


/* Request Header */
.request-header {margin-bottom:10px; padding:7px 0; border:1px solid black; position:relative; text-align:center;}
.request-header .delete-block {position:absolute; top:6px; right:8px;}

.header_input_datastream_version { 	position: relative;
									display: inline;
							  		cursor: pointer;
							  		font-size:.9em;
							  		color: blue; }


/* Request Content */
div.metrics-content {width:80%; float:left; font-size:12px;}
	p.metrics-missing {padding:20px; font-weight:bold; color:#f77; font-size:20px; text-align: center; border: 1px solid #f77}
	table.metrics-table {width:100%; border:1px solid black;}
	table.metrics-table > tbody > tr > th {padding:2px; border:1px solid black; font-weight:normal;}
	tr.range-header, tr.range-steps {text-align:center;}
	tr.range-header {font-size:15px;}
	tr.range-header th:first-child {vertical-align:top; min-width:160px;}
	tr.field-data > th {text-align:left;}
	th.field-page {color: #1B76B6; cursor:pointer;}
	th.field-page:hover {text-decoration:underline;}
	td.assessment {padding:2px; border:1px dotted black; text-align:center; cursor:default;}
	td.assessment > div {position:relative; height:0;}
	td.assessment span.step {visibility:hidden;}
	td.assessment:hover span.step {visibility:visible;}
	td.sticky {border-style:solid;}
	
	div.assessment-toggle-shell {position:relative;}
	div.assessment-toggle-menu {
		position:absolute; top:6px; left:50%;
		padding:3px 8px; margin-left:-75px;
		font-size: 13px; color:white; font-weight:bold; text-align:left;
		background-color: #43a1e3; 
		border-bottom: 1px solid rgba(0, 0, 0, 0.25);
		text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
	}
	div.assessment-toggle-menu:hover > div {display:block;}
	div.assessment-toggle-menu > div { display:none; margin-top:5px; line-height:20px;}
	div.assessment-toggle-menu label, div.assessment-toggle-menu input {cursor:pointer;}



/* Request Navigation */
.request-nav {width:20%; float:left; font-size:.9em;}
.request-nav>.inner {margin-left:13px; padding-left:13px; padding-right:5px; border-left:1px solid black;}
.request-nav li {display:block; position:relative; padding-bottom:4px; margin-bottom:4px; border-bottom:1px dotted black; color: #1B76B6; cursor:pointer;}
/*.request-nav li:hover {border-bottom:1px solid #1B76B6; border-right:1px solid #1B76B6;}*/
.request-nav li ul { margin-top:5px; font-size:.9em;}
/*.request-nav li:hover ul {display:block;}*/
.request-nav li.input-datastreams {border-bottom:0; padding-top:10px; color: black; cursor:default;}
.request-nav li li {text-decoration:none;}
.request-nav li li:hover {border-right:0;}
.multiple-windows {position:absolute; right:5px; bottom:4px;}

.nav_input_datastreams_info { 	
	/*position: absolute;
	right: 20px;
	bottom: 4px; */
	display: inline;
	color: blue;
	cursor: pointer;							 
}

.dqa_report_start_date {
	padding-top: 5px;
	padding-left: 10px;
	color: black;
	cursor: default;
}

.dqa_report_end_date {
	padding-top: 5px;
	padding-left: 10px;
	color: black;
	cursor: default;
}

/* assessment popup */
ul.hour-info {
	position:absolute; top:80%; left:80%;
	width:230px;
	border:3px solid #444;
	font-size:14px; text-align: left;
	cursor:default;
}
ul.hour-info > li {padding:5px; border-top:1px solid #444; }
ul.hour-info > li:first-child { border:0; }
	/* header */
	ul.hour-info div.header {text-align:center; font-weight:bold;}
	ul.hour-info div.header p {float:left; width:80%;}
	ul.hour-info div.test.header {font-size:13px; font-weight:normal;}
	ul.hour-info div.test.header p {text-align:left; font-weight:bold;}
	/* individual qc-tests */
	ul.qc-tests > li {margin-top:5px; font-size:12px;}	
	td.assessment ul.hour-info p {display:block;}
		ul.hour-info p.name-long, ul.hour-info p.time {display:none; width:80%; margin:3px 0 0 5px; font-size:12px;}
		ul.hour-info p.time label {font-weight:bold;}

/* Update requests table */
#update-request-shell {
	display: none;	
	position: fixed; top: 0%; left: 50%;
	margin-top: 100px; padding: 10px;
        z-index:-1000; opacity: 0.01; 
        background-color:white; border:0px solid #c4c4c4; color: #565656;
}

#update-request-shell-close {
	position: absolute; right:13px; top:13px;
	display: inline-block;
	cursor: pointer;
}

#update-requests-add {
	position: absolute; left: 40px; 
}

#update-request-sorted-checkbox {
	padding: 5px 10px;
	text-align: left;
}

.modify-request-header {
	text-align:left;
	font-weight:bold;
	padding: 5px 10px;
	border:0px;
	display: inline-block;
}

.modify-request-row {
	text-align:left;	
	padding:0px;
	border:0px;
}

.modify-request-cell {
	text-align:left;	
	padding:5px 10px;
	display:inline-block;
}

#update-request-hidden-display {
	display: block;
	visibility: hidden; 
	color: red;
	font-weight: bold;
	padding: 5px 10px;
}

/* Add request Menu */
#component-menu-shell {
        width: 1080px; height: 385px;
        position:fixed; top:50%; left:50%;
        margin-left:-540px; margin-top:-230px; padding:7px;
        display:none; z-index:1002;
        background-color:white; border:1px solid #c4c4c4; color: #565656;
}

#component-menu-header {
        font-size: 20px;
        position: relative;
        border: 1px solid #C4C4C4;
        margin-bottom: 15px;
        padding: 6px;
        background-color: #F7F7F7;
}
#component-menu-close {position:absolute; right:11px; top:9px;}

/* Page- Field
--------------------------------------------------*/
#field-header {position:relative; font-size:25px; text-align:left;}
#field-source {position:absolute; right:0;}
#field-source a {font-size:70%; color:#60b0e7;}
#field-source a:hover {color:#1B76B6;}

#field-data {margin:7px auto 20px; width:100%; border:1px solid #C4C4C4; background-color:#eee; font-size:14px; color:#4D4D4D;}
#field-data th, #field-data td { padding:2px; border:1px solid #C4C4C4; }
#field-data td {border-style: dotted;} 
	#field-data tr.test-data > th				{border-left:5px solid black; text-align:left;}
	#field-data td span.test-step {visibility:hidden;}
	#field-data td:hover span.test-step {visibility:visible;}

#field-attributes {width:40%; margin:0 auto; padding:5px; border:1px solid #c4c4c4; background-color:#eee; color:#4d4d4d;}
#field-attributes h3 {margin-bottom:5px; padding-bottom:5px; border-bottom:1px solid #c4c4c4; font-size:18px;}
#field-attributes dl {text-align:left; font-size:14px;}
#field-attributes dt {margin:10px 0 3px;}
#field-attributes dt:first-child {margin-top:0;}
#field-attributes dd {margin-left:15px; color:#808080;}

#field-request-error {border:2px solid #f77; padding:7px;}
#field-request-error span {font-weight:bold; color:#f77;}



/* Page- Plots
--------------------------------------------------*/
body.plot-page {background-color:#f7f7f7; color:#343434;}

/* Header */
h1.plot-source {font-size:24px; padding:20px; background-color: #E6E6E6;}
h1.plot-source span {color:#4d4d4d; border-bottom: 1px dotted #4d4d4d;}

/* Navigation */
#plot-nav {border:solid #A2A2A2; border-width:1px 0; z-index:100; background:#f7f7f7; font-size:14px;}
#plot-nav.fixed {position:fixed; top:0; left:0; z-index:100; border-top:0; border-right-width:1px;}
#plot-nav > li {position:relative; float:left; z-index:100;}
#plot-nav a {display:block; padding:5px; background:#f7f7f7;}
#plot-nav li:hover > a {background-color:#d5d5d5;}
#plot-nav li ul {display:none; position:absolute; top:100%; left:0; max-height:400px; overflow-y:auto;}
#plot-nav li:hover ul {display: block;}
#plot-nav li li a {border:1px solid #A2A2A2; border-top:0; text-align:left;}
#plot-nav li li:first-child a {border-top: 1px solid #A2A2A2;}
#plot-nav a.header {border-bottom:0; text-align:center; font-weight:bold; text-decoration:underline;}
/* vertical-clip bug hack for plot links is fixed using javascript; refer to resource/plots.js */



/* Plots */
div.plot-type {margin: 0 0 15px; background-color: #e6e6e6;}
div.plot-type h2 {padding:15px 0; font-size:20px; text-decoration:underline;}
div.plot-shell {padding:8px 0;}
div.plot-shell h3 {margin-bottom:5px; font-size:18px;}
div.plot-shell:hover div.skip-step {display:block;}
div.skip-step {display:none; margin-top:5px; padding:3px; font-size:14px; background:#D5D5D5; }
div.skip-step button {font-size:15px; cursor:pointer;}
p.plot-not-found {color:red; margin:20px;}
div.plot-shell video {
	-webkit-box-shadow: none;
	-moz-box-shadow: 	none;
	box-shadow: 		none;
}
div.plot-shell video.focus {
	-webkit-box-shadow: 0 0 15px #1B76B6;
	-moz-box-shadow: 	0 0 15px #1B76B6;
	box-shadow: 		0 0 15px #1B76B6;
}

.interactive_plots {
	width: 994px;
	height: 400px;
	margin: 0 auto;
	border: 15px solid #FFFFFF;
	background-color: #FFFFFF;
	-webkit-box-shadow: 0 0 5px rgba(0,0,0, .3);
	-moz-box-shadow: 	0 0 5px rgba(0,0,0, .3);
}
.interactive_plots-highlight {
	width: 994px;
	height: 400px;
	margin: 0 auto;
	border: 15px solid #FFFFFF;
	background-color: #FFFFFF;
	-webkit-box-shadow: 0 0 5px rgba(0,0,0, .3);
	-moz-box-shadow: 	0 0 5px rgba(0,0,0, .3);
}

.interactive_plots-highlight  .dygraph-legend > span { display: none; }

.interactive_plots-highlight  .dygraph-legend > span.highlight { display: inline; }

/* Page- DQA
--------------------------------------------------*/
#dqa-report-shell {
	height:335px; width:280px;
	padding:5px; font-size: 15px; margin-left: -146px; margin-top: -155px;
	position:fixed; top:50%; left:50%;
	background-color:white; border:1px solid #c4c4c4; color: #565656;
}
#dqa-report-header {
	text-align: left;
	margin-bottom: 10px;
	border: 1px solid #C4C4C4; background-color: #F7F7F7; color: #565656;
	padding: 7px;
}
#dqa-report-notification {padding:3px; font-size:13px; margin-bottom:10px; width:97%;}
#dqa-report-form {text-align:left; width:98%; margin:0 auto;}
#dqa-report-form input {width:97%; margin: 3px 0 10px; padding:3px; height:13px;}
#dqa-report-submit {border-top: 1px solid #C4C4C4; padding-top: 10px; text-align:right;}

#dqa-report-remember-me-checkbox {max-width:5%;}

/* Page- Error
--------------------------------------------------*/
#error-message {font-size:30px;}
#error-path {font-size:20px; margin-top: 10px;}




/* Partial- Menu
--------------------------------------------------*/
/* Menu - Base */
.ui-widget {font-size:1em;}
#request-menu {width:100%; text-align:left; min-width:1080px;}
.request-menu-shell {float:left; width: 50%; min-width:50%;}
.request-menu-shell h3 {margin:0 10px; font-size:1.1em;}
.request-content-shell {
      height:268px; margin:5px; padding:5px 0; overflow:auto;
      border-top:1px solid black; border-bottom:1px solid black;
}
.request-submit-shell {margin:0 10px; text-align:right; min-width:90%;}
.request-submit-shell p {
      float:left; padding:3px 10px;
      text-align:center; font-size:.95em;
      background-color: #f0f3f3;
}
.request-submit-shell button, input{ font-size:11px;}
		
/* Request Selection */
#request-selection>.inner {width:95%;}
#request-selection th, #request-selection td {padding:10px 5px; text-align:left;}
#request-selection td {padding-left: 25px; height:24px;}
#request-selection input.date-selector {width:110px; height:13px;}
#date-start-selector button {visibility:hidden;}

/* Added Request List */
#request-queue-shell .request-content-shell {position:relative;}
#empty-request-queue-alert {
	position: absolute; top: 50%; left: 50%; 
	width: 215px; padding: 7px 15px; margin: -12px 0 0 -107px; 
	text-align:right;
	z-index:1;
}
#empty-request-queue-alert span {position: absolute; left:10px;}
#request-queue li {position:relative; margin-bottom:5px; padding: 3px 40px; cursor:move;}
#request-queue li.ui-state-highlight {height: 1.5em; line-height: 1.2em;}
#request-queue li span {position:absolute; top:6px; right:12px; cursor:pointer;}

#request-queue li img { visibility:visible; 
			position:absolute; 
			top:4px; 
			left:10px; 
			width:20px; 
			height:20px; 
			cursor:default; }

#request-queue table {width:100%; font-size: 16px; text-align:center;}
#request-queue td {padding:3px 0px 3px 0px; width:50%;}
#request-queue td {border-right:1px #2779AA dotted; width:60%;}

.no_data{
    background-color: #e6e6e6;
    border-color:#e6e6e6;	
    background-image: url('frameworks/cupertino/images/ui-bg_diagonals-thick_75_e6e6e6_40x40.png');
    color: gray;
}

/* Partial- Legend
--------------------------------------------------*/
#legend {position:relative; cursor:default;}
#legend:hover div {display:block;}
#legend > div {
	width: 100%; z-index:1; margin-top:6px;
	display: none;  
	position: absolute; left: 0; right: 0;
	text-align: center;
}
#legend table {border-collapse:separate; border-spacing:10px; }
#legend table th { padding:10px; }


/* Misc
-----------------------------------------*/
.shadows-light-00 {
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .25);
	-moz-box-shadow: 	0 1px 3px rgba(0,0,0, .25);
	box-shadow: 		0 1px 3px rgba(0,0,0, .25);
}
.shadows-light-01 {
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .25);
	-moz-box-shadow: 	0 1px 1px rgba(0,0,0, .25);
	box-shadow: 		0 1px 1px rgba(0,0,0, .25);
}
.shadows-00 {
	-webkit-box-shadow: 3px 3px 5px rgba(0,0,0, .5);
	-moz-box-shadow: 	3px 3px 5px rgba(0,0,0, .5);
	box-shadow: 		3px 3px 5px rgba(0,0,0, .5);
}
.shadows-01 {
	-webkit-box-shadow: 0 0 5px rgba(0,0,0, .3);
	-moz-box-shadow: 	0 0 5px rgba(0,0,0, .3);
	box-shadow: 		0 0 5px rgba(0,0,0, .3);
	max-width:  100%;
}