/* Global Styles Reset */
html, body {margin:0; padding:0; font-family:'Open Sans'; font-size:13px;}
html {background: url('images/bg-image.jpg') no-repeat center center fixed; background-size: cover; height: 100%;}
img {max-width:100%;}
a {color:#74A1C7; text-decoration:none; -webkit-transition: all .4s; transition: all .4s;}
a:hover {color:#4178a4;}
hr {margin:20px 0px; border:none; height:1px; background-color:#69673E;}

.ui-tooltip-content {font-size:13px;}
/* Header Styling */
.logo {font-weight:300; color:white;}
.img-height-reset {line-height:0;}
.logo-header {max-width:900px; margin:auto; padding:25px 0px 20px 0px;}
.logo-header h1 {margin-bottom:0px; color:white; font-weight:400;}
.logo-header h3 {margin-top:0px;color:white; font-weight:400;}
#header-wrapper {padding:2px; background-color:white;}
#nav-wrapper {background-color:#74A1C7; padding:5px; margin-bottom:2px;}
#nav-list {margin:0; padding:0; list-style:none;}
#nav-list > li {float:left; width:16.6%; text-align:center; color:white; text-decoration:none; line-height:24px;}
#nav-list > li > a {color:white; text-decoration:none; font-size:14px;}
.nav-sub-list {list-style:none; margin:0; position: absolute; visibility:hidden; box-shadow: 0px 0px 2px 0px; padding:10px 0px; z-index:5; background-color:white; width:180px; color:black; text-align:left; -webkit-transition: all .4s; transition: all .4s; opacity:0;}
.nav-sub-list > li {padding:2px 10px;}
.nav-sub-list > li a {display:block; color:black; text-decoration:none; font-size:14px;}
.nav-sub-list > li:hover {background-color:#74A1C7;}
.nav-sub-list > li:hover a {color:white;}
#nav-list > li:hover > .nav-sub-list {visibility:visible; opacity:1;}
.down-arrow {display:inline-block; margin-left:5px; -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);}
#main-image-spacer {padding:8px; background-color:#74A1C7; margin:2px 0px;}

/* Content Styling */
#main-wrapper {max-width:972px; margin:auto;}
#content-wrapper {padding:20px 30px; background-color:white;}
.inner-form-box {max-width:450px; margin:auto;}
.login-form-box  {max-width:300px; margin:auto;}

.button {display:inline-block; padding:5px 20px; color:white; background-color:#74A1C7; border-radius:5px; border:1px solid #74A1C7; margin:5px 0px; cursor:pointer; -webkit-transition: all .4s; transition: all .4s;}
.button:hover {color:#74A1C7; background-color:white;}
.shadow {box-shadow:0 0 8px 0;}
.round-corners {border-radius:5px;}

.bold {font-weight:bold;}
.cf:after {content: ""; display: table; clear: both;}
.center {text-align:center;}
.extra-margin {margin:10px 5px;}
.red {color:red;}
.green {color:green;}
.dark-blue {color:#326691;}
.light-blue {color:#74A1C7;}
.bg-white {background-color:white; background-image:none;}

#footer {color:white; text-align:right; font-size:12px; padding:5px 0px; 
  background: -webkit-linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,0)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,0)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,0)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,0)); /* Standard syntax */}
#footer a {color:white;}

.home-map-area {position:relative;}
.home-map-area-text {position:absolute; width:100%; text-align:center; top:50%; left:0; font-size:38px; line-height:42px; margin-top:-42px; color:#4D7EA7; font-weight:600;}

#download-data-header {background-color:#4D7EA7; color:white; text-align:center; padding:5px 0px; font-size:14px;}
#real-time-header {background-color:#86955D; color:white; text-align:center; padding:5px 0px; font-size:14px;}
#from-cdmo-header {background-color:#9D9062; color:white; text-align:center; padding:5px 0px; font-size:14px;}

.overview-contact {display:inline-block; border-top:1px dashed black; padding-top:15px;}

.cols {margin:0; padding:0; list-style:none;}
.cols > li {float:left; margin:0px 1.5%;}
.halves > li {width:47%;}
.halves > li:nth-child(2n+1) {clear: left;}
.thirds > li {width:30%;}
.thirds > li.cols-2 {width:64%;}
.thirds > li:nth-child(3n+1) {clear: left;}
.fourths > li {width:22%;}
.fourths > li.cols-2 {width:47%;}
.fourths > li:nth-child(4n+1) {clear: left;}
.fifths > li {width:17%;}
.fifths > li:nth-child(5n+1) {clear: left;}

.split > .asset {float:left; margin-right:15px;}
.split > .asset-right {float:right; margin-left:15px;}
.split > .text {overflow:hidden;}
.split > .text > :first-child {margin-top:0px;}
.split-width .asset {width:120px;}

.function-header {display:inline-block; margin-top:0px; margin-bottom:0px; border-bottom:1px solid #69673E;}
.dropdown {display:none; padding-left:25px;}
.dropdown-header {cursor:pointer;}

.upload-file-box {color:white; border-radius:5px; box-shadow:0 0 5px 0 gray; padding:20px; margin:20px 0px;}
.upload-file-box > :first-child {margin-top:0px;}
.upload-file-box a {font-size:14px; margin-bottom:8px; color:white;}
.upload-file-box.bg-green {background-color:#86955D; opacity:.6;}
.upload-file-box.bg-tan {background-color:#9D9062; opacity:.6;}
.upload-file-box.bg-blue {background-color:#4D7EA7; opacity:.6;}

/* Parameter Page */
.inset {margin-left:15px;}
.flag-section-param {margin:0; padding:0; list-style:none;}
.flag-section-param li {margin-bottom:3px;}
.flag-section-param span {width:90px; display:inline-block;}

.split-flag .asset {float:left; width:90px;}
.split-flag .content {overflow:hidden;}


/* Active Users */
.interface-table {width:100%; padding:5px;}
.interface-header {color:#326691; text-align:center;}
.interface-sub-header{color:#74A1C7; text-align:center;}
.interface-table td {text-align:center;}
.row-border {border-bottom:1px dashed lightgray;}
.header-border {border-bottom:1px solid lightgray;}
.box-shadow {border-radius:5px; box-shadow: 0px 0px 5px 0px grey;}
.box-shadow-padding {border-radius:5px; box-shadow: 0px 0px 5px 0px grey; padding:5px 10px;}
/* QAQC Page */
.comment-section, .flag-section {margin:0; padding:0; list-style:none;}
.comment-section span {width:25px; display:inline-block;}
.flag-section span {width:45px; display:inline-block;}


/* Form Styling */
.form-item-large {padding-left:200px; margin: 0 0 15px;}
.form-item-large > label {float:left; width:200px; margin:5px 0 0 -200px; display:block; padding: 0 0 6px; line-height: 17px;}

.form-item {padding-left:150px; margin: 0 0 15px;}
.form-action {margin: 15px 0px;}
label {display:block; margin-bottom:15px;}
.form-item > label {float:left; width:150px; margin:5px 0 0 -150px; display:block; padding: 0 0 6px; line-height: 17px;}

.login-form-box .form-item {padding-left:80px; margin: 0 0 15px;}
.login-form-box .form-item > label {float:left; width:80px; margin:5px 0 0 -80px; display:block; padding: 0 0 6px; line-height: 17px;}

.full-width-margins {margin:auto 1.5%;}
input[type=text],input[type=password] {height:28px; padding: 5px 6px; width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 5px; border:1px solid lightgray;}
select {height:28px; padding: 3px 6px; width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 5px; border:1px solid lightgray;}
textarea {width:100%; padding: 5px 6px; border:1px solid lightgray; border-radius:5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.radio-group > label {display:inline-block; margin:0px 0px;}
input[type=submit] {font-family:'Open Sans'; cursor:pointer; padding:5px 20px; color:white; background-color:#74A1C7; border-radius:5px; border:1px solid #74A1C7; margin:5px 0px; cursor:pointer; -webkit-transition: all .4s; transition: all .4s;}
input[type=submit]:hover {color:#74A1C7; background-color:white;}
textarea {height:150px;}
input:focus, textarea:focus, select:focus {border-color:#326691; outline:0; -webkit-transition: all .4s; transition: all .4s;}
#error {display:none; color:red;}
.error {border:1px solid red!important;}

.tab-group {margin:15px 0px;}
.tab-group > .tab {color:white; background-color:#74A1C7; border:1px solid #74A1C7; display:inline; padding:5px 15px; margin:0px; cursor:pointer; -webkit-transition: all .4s; transition: all .4s;}
.tab-group > .tab:hover {background-color:white; color:#74A1C7;}
.tab-group > .tab.active {background-color:white; color:#74A1C7;}
.tab-group > .tab:first-child {border-top-left-radius:5px; border-bottom-left-radius:5px;}
.tab-group > .tab:last-child {border-top-right-radius:5px; border-bottom-right-radius:5px;}
.tab-layout > .tab-area {display:none;}
.tab-layout > .tab-area.active {display:block;}

.info-popup {position:absolute; top:0px; left:-30px; color:white; border-radius:50%; padding:1px 7px; font-weight:bold; cursor:pointer; background-color:#74a1c7; display:inline-block;}

.info-popup-inline {color:white; border-radius:50%; padding:1px 7px; font-weight:bold; cursor:pointer; background-color:#74a1c7; display:inline-block;}

#success-popup {display:none; position:fixed; width:600px; top:30%; left:30%; z-index:5; background-color:white; border-radius:5px; box-shadow: 0 0 5px 0;}

.popup-top {padding:5px 10px; border-bottom:1px solid grey;}
.popup-middle {padding:5px 10px;}
.popup-bottom {padding:5px 10px; border-top:1px solid grey; text-align:right;}


/* SOP Page */
.excerpt-select {color:#74A1C7; cursor:pointer;}
#success {display:none; color:green;}
.error-text {color:red;}
.popup {width:97%; background-color:white; margin:10px auto;}
.section-box {border-radius:5px; margin:0px 0px 10px 0px; padding:10px; box-shadow: 0px 0px 5px 0px grey;}
.section-box.last {margin-bottom:0px;}
.check-label {display:inline;}


/* Available Data */
.avail-data-loading-section {display:none;}
.avail-data-reserve-section {display:none;}
.avail-data-progress-wrapper {display:inline-block; width: 200px; background-color:#f2f2f2; color:white; border-radius:5px; box-shadow:0 0 5px 0 gray; border-radius:5px; text-align:center;}
.avail-data-progress {background-color:green; border-radius:5px; height:20px; width:0px; -webkit-transition: all .4s; transition: all .4s;}
.select-inline {display:inline-block; width:auto;}
/* Mobile Styling */
@media screen and (max-width: 667px)
{
	#nav-list > li {width:50%; text-align:left; margin-bottom:10px; line-height:20px;}	
	#nav-list > li:nth-child(2n+1) {clear: left;}
	.nav-sub-list {position:relative; display:none; box-shadow: 0px 0px 0px 0px; padding:0px; color:white; width:100%; background-color:#74A1C7; box-sizing:border-box; font-size:12px;}
	.nav-sub-list > li a {color:white; font-size:12px;}
	#nav-list > li:hover > .nav-sub-list {display:block;}
	#footer {text-align:left;}
	#content-wrapper {padding:10px;}
	
	.halves > li, .thirds > li, .thirds > li.cols-2, .fourths > li, .fourths > li.cols-2 {float:none; width:100%; margin:0px 0px 5px 0px;}
	
	.split > .asset, .split > .asset-right {float:none; margin:auto 0px;}
	
	#footer {padding:5px 10px;}
	
	.form-item, .form-item-large {padding-left:0px;}
	.form-item > label, .form-item-large > label {float:none; width:auto; margin:5px 0 0 0px;}
}