@import url(../../font-awesome.min.css);
@import url(../../font.css);
#logo {
  background: url(images/logo.png) no-repeat; }

html, body {
  height: 100%; }

body {
  font-family: "open_sansregular", arial, helvetica, sans-serif;
  font-size: 1em;
  color: #444; }

.wrapper {
  padding: 15px; }

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none; }

/* --------------------------------------- */
/* HEADER 							   */
/* --------------------------------------- */
header {
  position: relative;
  background-size: cover;
  width: 100%;
  height: 125px;
  padding: 15px 0px 20px 0px;
  z-index: 1;
  display: block; }

header:after {
  background: #e2ebf2;
  position: absolute;
  content: "";
  height: 1px;
  right: 0;
  left: 0;
  bottom: 0; }

.branding {
  width: 925px;
  float: left;
  margin-left: 15px; }

#logo {
  background-size: 110px auto;
  border-right: 3px solid #e2ebf2;
  text-indent: -9999px;
  width: 130px;
  height: auto;
  float: left; }

#logo a {
  height: 85px;
  display: block; }

#payoff h1 {
  font-weight: 100;
  font-size: 1.8em;
  text-transform: uppercase;
  font-family: "open_sanssemibold", arial, helvetica, sans-serif; }

#payoff {
  margin-left: 150px; }

#payoff p {
  font-style: italic;
  color: #888; }

#nav {
  position: relative;
  background-color: white;
  display: block;
  z-index: 12;
  padding: 10px 20px; }

#nav ul.left-nav, #nav ul.right-nav {
  display: inline-block;
  text-transform: uppercase;
  color: #fff;
  padding-top: 5px; }

#nav ul.right-nav {
  float: right;
  max-width: 100%; }

#nav ul.left-nav li, #nav ul.right-nav li {
  float: left;
  margin-right: 30px; }

#nav ul.right-nav li:last-child {
  margin-right: 0px; }

#nav ul.left-nav li a, #nav ul.right-nav li a {
  color: blue;
  text-transform: uppercase;
  text-decoration: none;
  list-style: none; }

#nav ul.left-nav li.active a, #nav ul.left-nav li a:hover, #nav ul.right-nav li.active a, #nav ul.right-nav li a:hover {
  color: #01bbf4; }

/* --------------------------------------- */
/* ASIDE HORIZONTAL						   */
/* --------------------------------------- */
.aside-horizontal {
  width: 525px;
  left: 0;
  z-index: 90;
  position: absolute;
  right: 0px;
  top: 170px;
  bottom: 0px;
  display: block;
  transition: left 0.5s ease;
  overflow: auto; }

input#slide-sidebar[type=checkbox] {
  display: none; }

input#slide-sidebar:checked ~ .map {
  border-left: 0px !important; }

input#slide-sidebar:checked ~ .aside-horizontal {
  z-index: auto; }

input#slide-sidebar:checked ~ label.close-sidebar {
  left: 0; }

input#slide-sidebar:checked ~ label.close-sidebar::after {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg); }

label.close-sidebar {
  color: #fff;
  position: absolute;
  top: 280px;
  left: 524px;
  padding: 3px 10px 5px 8px;
  cursor: pointer;
  background: #e2ebf2;
  height: 45px;
  z-index: 2; }

label.close-sidebar span {
  text-indent: -9999px; }

label.close-sidebar::after {
  content: "\f100"; }

label.close-sidebar::after, input#slide-sidebar::after {
  content: "\f053";
  display: block;
  color: #000;
  font-size: 25px;
  font-family: fontAwesome;
  vertical-align: middle;
  margin-top: 8px; }

.aside-horizontal h2, .aside-horizontal h3, .aside-vertical h3 {
  text-transform: uppercase;
  color: #fff;
  background: blue;
  text-align: center;
  font-size: 1.1em;
  padding: 10px 0px;
  margin-top: 0px; }

.aside-horizontal h3, .aside-vertical h3 {
  background: #01bbf4;
  font-size: 1em; }

#freesearch {
  position: relative;
  width: 100%; }

#freesearch input[type="submit"] {
  text-indent: -9999px;
  padding: 0 8px;
  height: 24px;
  width: 24px;
  background: url(../../../images/search-icon.png);
  background-repeat: no-repeat;
  padding: 5px;
  background-size: 24px 24px;
  border: 0px;
  cursor: pointer;
  margin-top: 0px;
  left: 10px;
  top: 5px;
  position: absolute; }

#freesearch input[type=text] {
  border: 0px;
  font-size: 1em;
  height: 35px;
  float: left;
  padding: 0px 12px;
  padding-left: 40px;
  width: 100%;
  -webkit-appearance: none;
  border-bottom: 1px solid #ddd;
  background: none; }

/* padding around the layer list following the layer
title (h3) */
#add_Layer_chooser h3 ~ ul {
  padding: 15px; }

#add_Layer_add_server_button {
  background: none;
  border: none;
  font-family: "open_sanssemibold", arial, helvetica, sans-serif;
  cursor: pointer; }

#add_Layer_add_server_button:before {
  content: "\f067";
  display: inline-block;
  margin: 10px 15px 0px 8px;
  font-family: "fontawesome";
  font-size: 1.4em; }

#add_Layer_search_results li {
  padding-left: 30px;
  padding-top: 5px; }

#add_Layer_search_results a {
  color: #4071B1;
  text-decoration: none;
  font-weight: normal; }

.layer_loading {
  padding-top: 4em;
  text-align: center; }

#add_Layer_search_results li:before {
  content: "\f016";
  /* FontAwesome Unicode file */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.3em;
  /* same as padding-left set on li */
  width: 1.3em;
  /* same as padding-left set on li */ }

/* --------------------------------------- */
/* ASIDE VERTICAL						   */
/* --------------------------------------- */
.aside-vertical {
  width: 270px;
  left: 0;
  background: #F4F4F4;
  /* must be smaller than 100 (used for the jquery UI dialogs) */
  z-index: 90;
  position: absolute;
  right: 0px;
  top: 177px;
  bottom: 0px;
  display: block; }

fieldset {
  border: none; }

fieldset input[type=button], fieldset input[type=submit] {
  border: none;
  background: #fff;
  cursor: pointer;
  float: left;
  border: 1px solid #ddd;
  padding: 5px 10px;
  margin-top: 10px;
  color: #fff;
  transition: all 0.3s ease;
  background: blue;
  font-weight: bold; }

fieldset input[type=button]:hover {
  background: #fff;
  color: blue; }

.instruction {
  font-size: small;
  margin: 10px 0px; }

.depth {
  margin: 5px 0px; }

.depth input {
  min-width: 48%; }

/* --------------------------------------- */
/* Buttons								   */
/* --------------------------------------- */
.ui-dialog button span.ui-button-text:nth-child(1) {
  border: none;
  cursor: pointer;
  float: left;
  border: 1px solid #ddd;
  padding: 5px 10px;
  /*    margin-top:10px;*/
  color: #fff;
  transition: all 0.3s ease;
  background: blue;
  font-weight: bold;
  /* margin-left: 10px; */ }

.ui-dialog button.ui-state-hover span.ui-button-text:nth-child(1) {
  background: #fff;
  color: blue; }

.ui-dialog input[type=submit], input[type=reset], .ui-dialog input[type=button] {
  background: blue;
  color: #fff;
  font-weight: bold;
  border: none;
  margin: 5px;
  font-size: 0.8em;
  padding: 5px 10px;
  cursor: pointer;
  margin-top: 10px;
  transition: all 0.3s ease; }

.ui-dialog input[type=button]:hover, input[type=submit]:hover {
  background: #fff;
  color: blue; }

.ui-dialog button, button:hover, button.ui-state-hover {
  border: 0px;
  margin: 0px; }

.ui-dialog button span.ui-button-text:nth-child(1) {
  border: 0px;
  padding: 5px 10px;
  margin: 0px; }

.ui-dialog input[type=reset] {
  color: #000;
  background: blue; }

.ui-dialog .ui-dialog-buttonpane button {
  border: 0px;
  margin: 0;
  margin-left: 10px;
  cursor: pointer; }

/* Figure Properties */
.FigurePropertiesForm div label {
  margin-top: 6px;
  width: 60%;
  display: inline-block; }

.FigurePropertiesForm input[value=Done], .FigurePropertiesForm input[value="Reset to default"] {
  float: right; }

/* colorbar chooser */
.jlb_class {
  display: inline-block; }

/* Info Layer */
.ui-dialog {
  font-family: "open_sansregular", arial, helvetica, sans-serif; }

.ui-dialog table {
  border-collapse: collapse;
  border: 1px solid #f4f4f4; }

.ui-dialog h4 {
  color: white;
  margin-top: 10px;
  margin-bottom: 5px; }

.ui-dialog td {
  padding: 4px; }

.ui-dialog tr:nth-child(even) {
  background-color: #f4f4f4; }

/* Download layer */
.OceanBrowserDownloadDialog table tr:nth-child(1) input {
  width: 100%; }

.OceanBrowserDownloadDialog table input {
  width: 50%; }

#manage_section_button, #vertical_mode_choose_type {
  width: 100%; }

#vert_map_selection {
  /* border: 1px solid #ddd; */
  width: 270px;
  height: 200px;
  user-select: none; }

.ytickslabel {
  position: absolute;
  left: 0px;
  margin-top: -.5em;
  margin-left: -5em;
  width: 4em;
  text-align: right;
  font-size: small;
  vertical-align: middle; }

.yticks {
  position: absolute;
  left: 0px;
  margin-left: -7px;
  width: 7px;
  height: 0px;
  border: solid;
  border-width: 1px 0 0 0; }

.xticks {
  position: absolute;
  bottom: 0px;
  margin-bottom: -1em;
  width: 0px;
  height: 7px;
  border: 1px solid #777;
  font-size: 1px;
  border-width: 0 1px 0 0;
  /* ontop of map */
  z-index: 1000; }

.xtickslabel {
  position: absolute;
  right: 0px;
  bottom: 0px;
  margin-bottom: -2em;
  width: 4em;
  margin-left: -2em;
  /* border: 1px solid black; */
  text-align: center;
  font-size: small; }

.ylabel {
  position: absolute;
  bottom: 0px;
  left: 0px;
  margin-left: -2em;
  margin-bottom: -3em;
  font-style: italic;
  font-weight: bold; }

.xlabel {
  position: absolute;
  bottom: 0px;
  right: 0px;
  margin-bottom: -3em;
  font-style: italic;
  font-weight: bold; }

/* --------------------------------------- */
/* MAIN 							   */
/* --------------------------------------- */
#main {
  margin-left: 450px; }

.ui-widget-header {
  z-index: 1;
  position: relative; }

.map {
  position: absolute;
  background: #4f6baa;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-left: 525px solid #F4F4F4;
  border-top: 176px solid #F4F4F4;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 0;
  /*background: url(../../../images/bg-map.png) no-repeat; */
  background-size: cover; }

#map {
  position: absolute;
  right: 0px;
  bottom: 0px;
  left: 0px;
  top: 0px; }

div.olControlMousePosition {
  border: 1px solid #AAA;
  color: #222;
  background-color: white;
  padding: 3px;
  bottom: 0px;
  font-size: small;
  right: 3px;
  display: block; }

div.olControlZoom {
  position: absolute;
  top: 8px;
  left: 8px;
  background: none;
  border-radius: 0px;
  padding: 5px; }

div.olControlZoom a {
  background: rgba(1, 46, 88, 0.8);
  font-size: 1.4em;
  color: #fff;
  float: left;
  padding: 9px 0px;
  margin-right: 5px;
  font-weight: bold;
  height: 39px;
  width: 43px;
  border-radius: 0px;
  transition: all 0.3s ease; }

/* small zoom controls */
#vert_map_selection div.olControlZoom a {
  font-size: 1em;
  padding: 4px 0px;
  margin-right: 5px;
  width: 32px;
  height: 28px; }

div.olControlZoom a:hover {
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  opacity: 1;
  opacity: 1;
  -webkit-animation: flash 1.5s;
  animation: flash 1.5s; }

a.zoomlayers {
  background-image: url(../../../images/zoomalllayers-icon.png) !important;
  background-repeat: no-repeat  !important;
  background-position: center center !important; }

/* --------------------------------------- */
/* Colorbar 							   */
/* --------------------------------------- */
input#slide-colorbar[type=checkbox] {
  display: none; }

input#slide-colorbar:checked ~ .colorbar_container {
  display: none; }

input#slide-colorbar:checked ~ .mapcontrols {
  right: 25px; }

/* initially invisible */
input#slide-colorbar:checked ~ label.close-colorbar {
  display: none; }

input#slide-colorbar:checked ~ label.close-colorbar {
  right: 0; }

input#slide-colorbar:checked ~ label.close-colorbar::after {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg); }

label.close-colorbar {
  color: #444;
  position: absolute;
  top: 280px;
  right: 364px;
  padding: 3px 10px 5px 8px;
  cursor: pointer;
  background: #e2ebf2;
  height: 45px;
  z-index: 2; }

label.close-colorbar span {
  text-indent: -9999px; }

label.close-colorbar::after {
  content: "\f100"; }

label.close-colorbar::after, input#slide-sidebar::after {
  content: "\f054";
  display: block;
  color: #000;
  font-size: 25px;
  font-family: fontAwesome;
  vertical-align: middle;
  margin-top: 8px; }

.colorbar_container {
  overflow-y: auto;
  position: absolute;
  right: 0px;
  top: 177px;
  z-index: 100;
  bottom: 24px;
  /* max-width: 400px; */
  /* border: 1px solid black; */
  display: block;
  background: rgba(244, 244, 244, 0.9);
  padding: 10px;
  overflow-y: scroll; }

.layer_info {
  font-size: small;
  max-width: 330px;
  padding: 5px;
  pointer-events: auto;
  font-family: "open_sansbold", arial, helvetica, sans-serif;
  border-bottom: 1px solid #fff;
  padding-bottom: 5px;
  margin-bottom: 5px;
  overflow: hidden; }

.layer_info:last-child {
  border-bottom: 0px; }

.layer_info select {
  width: 100%;
  margin-bottom: 10px; }

.layer_info h3 {
  font-size: 1em;
  font-family: "open_sansbold", arial, helvetica, sans-serif;
  margin: 0px;
  color: #000; }

.layer_info input {
  width: 100%;
  margin-bottom: 5px; }

.colorbar2 {
  background-repeat: no-repeat; }

.layer_info input[type=button] {
  background: #D6E9F5;
  border: 1px solid #95989A;
  padding: 15px;
  float: left;
  text-indent: -9999px;
  width: 15px;
  height: 20px;
  display: block;
  cursor: pointer;
  margin-right: 7px;
  margin-bottom: 7px; }

.layer_info input:nth-child(9) {
  margin-right: 0px; }

.layer_info input.remove {
  background: url(../../../images/trashcan-icon.png) no-repeat #D6E9F5;
  background-size: 15px 20px;
  background-position: center center; }

.layer_info input.information {
  background: url(../../../images/information-icon.png) no-repeat #D6E9F5;
  background-size: 15px 20px;
  background-position: center center; }

.layer_info input.settings {
  background: url(../../../images/settings-icon.png) no-repeat #D6E9F5;
  background-size: 17px 17px;
  background-position: center center; }

.layer_info input.update {
  background: url(../../../images/update-icon.png) no-repeat #D6E9F5;
  background-size: 22px 22px;
  background-position: center center; }

.layer_info input.animate {
  background: url(../../../images/video-icon.png) no-repeat #D6E9F5;
  background-size: 22px 22px;
  background-position: center center; }

.layer_info input.download {
  background: url(../../../images/download-icon.png) no-repeat #D6E9F5;
  background-size: 22px 22px;
  background-position: center center; }

.layer_info input.remove:hover {
  background: url(../../../images/trashcan-icon.png) no-repeat #fff;
  background-size: 15px 20px;
  background-position: center center; }

.layer_info input.information:hover {
  background: url(../../../images/information-icon.png) no-repeat #fff;
  background-size: 15px 20px;
  background-position: center center; }

.layer_info input.settings:hover {
  background: url(../../../images/settings-icon.png) no-repeat #fff;
  background-size: 17px 17px;
  background-position: center center; }

.layer_info input.update:hover {
  background: url(../../../images/update-icon.png) no-repeat #fff;
  background-size: 22px 22px;
  background-position: center center; }

.layer_info input.animate:hover {
  background: url(../../../images/video-icon.png) no-repeat #fff;
  background-size: 22px 22px;
  background-position: center center; }

.layer_info input.download:hover {
  background: url(../../../images/download-icon.png) no-repeat #fff;
  background-size: 22px 22px;
  background-position: center center; }

/* --------------------------------------- */
/* VERT MAP 							   */
/* --------------------------------------- */
#vert_map {
  position: absolute;
  left: 330px;
  top: 191px;
  bottom: 50px;
  right: 230px;
  /* same color as ticks; they cannot be too ligth*/
  border: 1px solid #777; }

#yaxis {
  position: absolute;
  height: 100%; }

/* --------------------------------------- */
/* NEW LIGHTBOX STYLES 							   */
/* --------------------------------------- */
.ui-dialog {
  padding: 0em;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19); }

.ui-widget-content {
  border: 1px solid white;
  /* box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19); */ }

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
  border: 0px;
  background: none;
  font-weight: normal; }

.ui-widget-header .ui-state-default {
  border: 0px;
  background-image: none;
  background: white;
  color: white; }

.ui-widget-header .ui-state-hover {
  background: blue; }

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
  border-top-left-radius: 0px; }

.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
  border-top-right-radius: 0px; }

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
  border-bottom-left-radius: 0px; }

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
  border-bottom-right-radius: 0px; }

.ui-widget-header {
  background: white;
  color: blue;
  font-weight: bold;
  border-radius: 0px !important; }

.ui-dialog-titlebar {
  background: white;
  border-radius: 0px;
  border: 0px; }

/* --------------------------------------- */
/* NEW OPENLAYER STYLES 							   */
/* --------------------------------------- */
.olControlLayerSwitcher .layersDiv {
  background-color: white; }

/* --------------------------------------- */
/* END NEW STYLES 							   */
/* --------------------------------------- */
/* fix space for a tree with a single leave */
ul.cd-accordion-menu > li > a {
  padding-left: 20px; }

ul.cd-accordion-menu > li > a::after {
  left: 0px; }

/*# sourceMappingURL=main.css.map */