body {
  padding:0;
  margin: 0;
  background-color: #666;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.3em;
  font-size: 11pt;
  color: #404040;
  width: 100%;
  height: 100%;
}

.nav ul {
  list-style: none;
  background-color: #d9e6f2;
  text-align: center;
  padding: 0;
  margin: 3px;
}
.nav li {
    font-size: 86%;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  display: inline-block;
  padding: 0px;
  margin: 0px;
  vertical-align: middle;
}

.nav a {
    border: 1px solid #aaa;
    border-radius: 5px;
  text-decoration: none;
  color: #333;
  display: block;
  padding: 2px 5px;
  transition: .3s background-color;
  heightx: 30px;
  background: #ebebeb;
}

.nav a:hover {
    background-color: #f8f8f8;
    color: #404040;
}

.nav a.activetab {
    background-color: #3887be;
    color: #ffffff;
    cursor: default;
}

#container {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    max-width: 1200px;
    height: 100%;
    position:relative;
    background-color: #ffffff;
    border-left: 2px solid #444;
    border-right: 2px solid #444;
}
#banner{
    margin: 20px 0;
    font-size: 120%;
    font-weight: 600;
    line-height: 1.2em;
    text-align: left;
}
#drag {
    position: absolute;
    top: 50vh;
    top: calc(var(--vh, 1vh) * 50 - 4px);
    left: 0;
    bottom: 0;
    height: 4px;
    width: 100%;
    cursor: ns-resize;
    background: #444;
}

#map {
    background-color: lightgrey;
    height: 50vh;
    height: calc(var(--vh, 1vh) * 50);
    width: 100%;
    position:absolute;
}
#detailmain {
    height: 50vh;
    height: calc(var(--vh, 1vh) * 50);
    width: 100%;
    position:absolute;
    bottom: 0px;
    color: #333;
    background-color: #ffffff;
    overflow-y: scroll;
}

#detail {
    position:relative;
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
}

.blurb {
    padding: 5px;
    margin: 20px;
    border:0px solid #eee;
    border-radius: 5px;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}
.blurbtitle {
    font-size: 110%;
    font-weight: bold;
    margin-bottom: 25px;
}

#timeinfo {
    height: auto;
    background-color: rgba(255,255,255,0.6);
    color: #444;
    text-align: center;
    borderx: 1px solid #ccc;
    border-radiusx: 3px;
    padding: 2px;
    widthx:248px;
    position:absolute;
    top: 30px;
    left: 2px;
    z-index: 3;
    font-size: 75%;
}

.bird {
    content: ' ';
    display: block;
    z-index: 1;
    opacity: 0.65;
    background: url(/static/images/bird.png) no-repeat center center;
    width: 110px;
    height: 110px;
    background-size: cover;
    position: absolute;
    right: 30px;
    top: 0;
}
@media screen and (max-width: 600px) {
    .bird{
        width: 50px;
        height: 50px;
    }
}
.legend table{
    min-width: 300px;
    max-width: 600px;
}
.tpdropdown {
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 280px;
    border-radius: 3px;
    width: auto;
    padding: 3px 6px;
    margin:0;
    border: 1px solid #ccc;
    font-family: 'Open Sans', sans-serif;
    display: inline-block;
    font-size: 12px;
    background-color: #fff;
}

#menu {
    background: #fff;
    position: absolute;
    z-index: 1;
    top: 2px;
    left: 2px;
    border-radius: 3px;
    width: 330px;
    padding: 3px 0;
    margin:0;
    border: 1px solid #ccc;
    font-family: 'Open Sans', sans-serif;
    display: inline-block;
    font-size: 12px;
}
#menu span, #menu input {
    width:auto;
    background-color: #fff;
    padding:6px;
}
#menu input {
     margin-left: 6px;
 }

#menu a {
    font-size: 12px;
    background-color: #fff;
    position: relative;
    color: #404040;
    margin: 0;
    padding: 6px;
    width: 70px;
    text-decoration: none;
    border-right: 1px solid rgba(0,0,0,0.25);
    text-align: center;
}

#menu a:last-child {
    border: none;
}

#menu a:hover {
    background-color: #f8f8f8;
    color: #404040;
}

#menu a.active {
background-color: #3887be;
color: #ffffff;
}

#menu a.active:hover {
    background: #3074a4;
}

#fmode {
    background: transparent;
    padding: 2px;
    text-align: center;
}
#fmode div {
    text-align: center;
    display: inline-block;
}
#fmode a {
    font-size: 12px;
    background-color: #ddd;
    position: relative;
    color: #404040;
    margin: 2px;
    padding: 4px;
    width: 150px;
    text-decoration: none;
    border: 1px solid rgba(0,0,0,0.25);
    text-align: center;
    display: block;
}
#fmode a:hover {
    background-color: #f8f8f8;
    color: #404040;
}
#fmode a.active {
    background-color: #3887be;
    color: #ffffff;
}
.marker {
    background-color: #cc3300;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid white;
    cursor: pointer;
}
.routemarker {
    background-color: #fff;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 3px solid #ccc;
    cursor: pointer;
}

.tinfo {
    font-weight: 500;
    font-size: 110%
}

.box {
    display: inline-block;
    padding: 5px;
    margin: 2px;
}

.tp {
    padding: 10px;
    margin: 10px;
    text-align: center;
}
.legend {
    font-size: 75%;
    color: #888;
    border: 0px solid #ddd;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
    line-height: 1.0;
    text-align: center;

}
.legend img{
    width:16px;
    height:16px;
}
.legend table {
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    border-collapse: collapse;
}
.legend table td {
    text-align: left;
    margin: 0;
    border:1px solid #ddd;
    border-collapse: collapse;
    padding :5px;
    vertical-align: middle;

}
.t-temps{
    font-size: 70%;
    margin:0;
    border-spacing: 0px;
    border-collapse: collapse;
    background: #ffffff;
    min-width: 400px;
    max-width: 800px;
    width: 100%;
    line-height: 1.3em;
}
table.t-temps {
     border: 10px solid transparent;
}
.t-temps td {
    margin:0;
    padding:0px;
    text-align: center;
    border: 1px solid #bbb;
    white-space: nowrap;
    position: relative;
}

td.ytable, td.xtable{
    font-weight: bold;
    text-align: right;
    width: 10px;
    white-space: nowrap;
}
td.xtable {
    border-top: 1px solid #333;
}
td.ytable {
    border-right: 1px solid #333;
}
.t-temps td.curhour {
    border-left: 3px solid #333;
    border-right: 3px solid #333;
}
.t-temps td.hihour {
    background-color: #ffff99
}
.ttitle {
    font-size: 110%;
    font-weight: bold;
    text-align: center;
    padding:5px;
}
.cloud {
    border: 1px solid red;
}
#minelev, #maxelev, #tpname {
    font-weight: bold;
    font-size: 110%;
}

#stemps, #rh, #mslp, #lift {
    position:relative;
    width: 100%;
    margin-top: 5px;
}
.hide {
    visibility: hidden;
    display: none;
    position: absolute;
}
.ylabel {
    visibility: hidden;
    width: 250px;
    height: 20px;
    line-height: 20px;
    font-size: 85%;
    font-weight: 400;
    floatx:left;
    position: absolute;
    left:-80px;
    top: 10px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.panel {

}
table.tpanel {
    border: 0px;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
}
table.tpanel td{
    vertical-align: top;
}
td.tplot {
    vertical-align: top;
}
tr.hh td {
    text-align: center;
}
.tplot table {
    text-align: center;
    margin: auto;
}

.loading {
    text-align: center;
    font-size: 150%;
}

#bar{
    height: 1px;
    line-height: 1px;
    background: 333;
    border: 1px solid #999;
    background: #999;
    margin: 10px 0;
}
.note {
    font-size: 80%;
    text-align: center;
}
#forecasttimedisplay {
    background: #ffffff;
    color: #444;
    font-weight: bold;
    padding: 2px;
    display: block;
    border: 0px solid #ccc;
    border-radius: 5px;
}
#settings {
    position:absolute;
    left: 10px;
    top: 8px;
}

#settings a {
    text-decoration: none;
    color: #444;
}

#days {

}
#ftimes {
    margin: 2px 0;
    position: relative;
    width:100%;
    height:auto;
    font-size: 80%;
    border-bottom: 1px solid #ddd;
    text-align: center;
    vertical-align: middle;
    z-index: 3;
    background-color: #fff;
}
#ftimes div {
    display: inline-block;
    margin-top: 3px;
}
#ftimes span a{
  border: 1px solid #999;
  border-radius: 5px;
  text-decoration: none;
  color: #333;
  background-color: #ebebeb;
  padding: 3px;
  transition: .3s background-color;
}

#ftimes a:hover {
    background-color: #f8f8f8;
    color: #404040;
}

#ftimes a.activetime {
    background-color: #ffff99;
    color: #444;
    cursor: default;
}

#fhours {
    vertical-align: top;
    padding: 0px;
    margin: 2px;
    margin-bottom: 0px;
    text-align: center;
    font-size: 85%;
    display: inline-block;
}
.fhours-sp span {
    font-size: 90%;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding:2px;
    margin: 1px;
    background: #d9e6f2;
}
.fhours-sp span:hover {
    background-color: #ccc;
    cursor:grab;
}
.fhours-sp span.activehour {
    border: 1px solid #999;
    background: #ffff99;
    color: #333;
}
.suninfo {
    font-weight: bold;
    font-size: 90%;
    margin-right: 20px;
}

.arrow {
	background: url(/static/mages/arrow24.png) no-repeat;
	width:24px; height:24px;
}
.arr {
    width: 10px;
    height: 10px;
    opacity: 0.6;
}
.tabtitle {
    text-align: center;
    font-size: 110%;
}
#intro {
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
    text-align: center;
    padding: 0 40px;
}
div.#intro{
    text-align: center;
}

#intro p {
    padding: 0 5px;
    text-align: left;
}

#routeblurb {
    position: relative;
}

#routelegend {
    font-size: 90%;
    text-align: center;
}
#routelegend svg{
    margin-left: 20px;
}
#routeplotinner {
    position: relative;
    height: 250px;
    text-align: center;
    margin: auto;
    width: 100%
}
#routeplot {
    display: inline-block;
    position: static;
    width:800px;
    max-width: 900px;
    min-width: 500px;
    text-align: center;
}

.close {
    border:1px solid #ccc;
    padding: 6px;
    text-align: center;
    width: 20px;
    height: 20px;
    position:absolute;
    top: 0px;
    right: 0px;
}
.msg {
    position: absolute;
    top: 30vh;
    left: 40vw;
    width: 300px;
    border: 2px solid #666;
    border-radius: 5px;
    background: #ebebeb;
    color: #666;
}
#units {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 90%;
    border: 1px solid #666;
    border-radius: 5px;
    background: #fff;
    color: #444;
    z-index: 4;
}
.unithead {
    border-bottom: 0px solid #999;
    font-size: 90%;
    font-weight: bold;
}
#layers {
    z-index: 2;
    padding: 0px;
    text-align: center;
    border: 1px solid #999;
    position: absolute;
    top: 57px;
    left: 2px;
    background-color: white;
    padding: 0;
    margin:0;
    height:auto;
    width:auto;
}
#layers a i {
    padding: 0;
    margin: 0;
    text-decoration: none;
    width: 32px;
    height: 32px;
    line-height: 32px;
    vertical-align: middle;
    color: #777;
}
#layerspanel {
    z-index: 1;
    position: absolute;
    top: 57px;
    left: 3px;
    background-color: transparent;
    padding-left: 30px;
    margin:0;
    height:auto;
    width:auto;
}

#layerspanel ul {
  list-style: none;
  background-color: #ffffff;
  text-align: left;
  padding: 0;
  margin: 0;
}
#layerspanel li {
  font-family: 'Open Sans', sans-serif;
  font-size: 80%;
  display: block;
  padding: 0px;
  margin: 0px;
  vertical-align: middle;
}

#layerspanel a {
border-collapse: collapse;
  border: 1px solid #999;
  text-decoration: none;
  color: #333;
  display: block;
  padding: 5px;
  transition: .3s background-color;
  heightx: 40px;
}

#layerspanel a:hover {
    background-color: #f8f8f8;
    color: #404040;
}

#layerspanel a.activelay {
    background-color: #3887be;
    color: #ffffff;
    cursor: default;
}
#layeropacity {
    background: white;
    padding:5px;
}
.opcontrol {
    border:1px solid #bbb;
    padding: 0 4px;
    content: ' ';
    background-color: #999;
    margin: 1px;
    line-height: 0.5em;
    font-size: 80%;
}
.opcontrol:hover {
    cursor: grab;
}
.opsel {
    border: 2px solid #000;
}
i.dp {
    position: absolute;
    left: 8px;
    opacity: 0.6;
    width: 16px;
    height: 16px;
    color: #444;
}
.n-arrow {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    width: 16px;
    height: 16px;
    opacity: 0.5;
}
.e-arrow {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    width: 16px;
    height: 16px;
    opacity: 0.5;
}
.s-arrow {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    width: 16px;
    height: 16px;
    opacity: 0.5;
}
.w-arrow {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    width: 16px;
    height: 16px;
    opacity: 0.5;
}
#mapcolorbar {
    position:absolute;
    right: 4px;
    top: 110px;
}
#foot {
    padding: 50px;
    text-align: center;
}
#foot a {
    text-decoration: none;
    color: #444;
}
/*Cookie Consent Begin*/
#cookieConsent {
    background-color: rgba(20,20,20,0.8);
    min-height: 26px;
    font-size: 14px;
    color: #ccc;
    line-height: 26px;
    padding: 8px 0 8px 30px;
    font-family: "Trebuchet MS",Helvetica,sans-serif;
    position: absolute;
    bottom: 10vh;
    left: 0;
    right: 0;
    display: none;
    visibility:hidden;
    z-index: 9999;
}
#cookieConsent a {
    color: #4B8EE7;
    text-decoration: none;
}
#closeCookieConsent {
    float: right;
    display: inline-block;
    cursor: pointer;
    height: 20px;
    width: 20px;
    margin: -15px 0 0 0;
    font-weight: bold;
}
#closeCookieConsent:hover {
    color: #FFF;
}
#cookieConsent a.cookieConsentOK {
    background-color: #F1D600;
    color: #000;
    display: inline-block;
    border-radius: 5px;
    padding: 0 20px;
    cursor: pointer;
    float: right;
    margin: 0 60px 0 10px;
}
#cookieConsent a.cookieConsentOK:hover {
    background-color: #E0C91F;
}
/*Cookie Consent End*/