#player_container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#webcamimg {
position: relative;
width: 100%;
height: 100%;
}
#webcamimg .pic {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
#webcamimg .nsw_images img {
position: absolute;
-moz-backface-visibility: hidden;
box-shadow: #000 0em 0em 0em;
}
#webcamtop {
position: absolute;
top: 0;
left: 0;
width: 96%;
color: #ffffff;
background: #173962;
padding: 2%;
}
#webcamtop h2, #webcamtop h3 {
padding: 0;
margin: 0;
}
#webcamtop h2 {
font-family: "museo-slab-n5","museo-slab",serif;
font-style: normal;
font-weight: 500;
font-size: 150%;
}
#webcamtop h3 {
font-size: 87.5%;
font-weight: normal;
}
#webcamtop h2 img {
vertical-align: middle;
}
#temperature {
color: #a2bedb;
font-size: 62.5%;
}
#wind {
color: #a2bedb;
font-size: 62.5%;
}
#webcamcapture {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #ffffff;
background: transparent url('../img/bg_capture.png') repeat center center;
display: none;
}
#webcamcapturearea {
font-size: 100%;
text-align: center;
padding: 0 0 0 0;
}
#webcamcapturearea h2, #webcamcapturearea h3 {
color: #ffffff;
background: transparent;
padding: 0;
margin: 0;
}
#webcamcapturearea h2 {
font-family: "museo-slab-n5","museo-slab",serif;
font-style: normal;
font-weight: 500;
font-size: 100%;
}
#webcamcapturearea h3 {
font-size: 100%;
}
#webcamcapturedownload {
display: block;
width: 70%;
color: #ffffff;
background: #173962;
text-decoration: none;
text-transform: uppercase;
line-height: 2;
-webkit-box-shadow:  0px 1px 2px 0px rgba(0, 0, 0, .5);
box-shadow:  0px 1px 2px 0px rgba(0, 0, 0, .5);
margin: 10px auto 0px auto;
}
#webcamcaptureimg {
width: 100%;
}
#webcamcapturearea input {
width: 55%;
height: 23px;
font-size: 87.5%;
color: #333333;
background: #ffffff;
vertical-align: middle;
padding: 0.15em;
border: none;
}
#webcamcapturearea label {
width: 22%;
height: 23px;
line-height: 23px;
font-size: 75%;
text-align: right;
color: #cccccc;
background: #222222;
vertical-align: middle;
padding: 0.15em;
padding-right: 1%;
display: inline-block;
}
#webcamships {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #222222 url('/img/bg_ships.png') 50% 50% no-repeat;
display: none;
}
#ships-canvas {
width: 100%;
height: 88%;
}
#webcamlocation {
position: absolute;
left: 0;
bottom: 44px;
width: 100%;
display: none;
}
#locationmap {
width: 0%;
/*
border-right: 1px solid #173962;
border-left: 1px solid #173962;
*/
-webkit-box-shadow: 2px -2px 4px 0px rgba(0,0,0,0.6);
box-shadow: 2px -2px 4px 0px rgba(0,0,0,0.6);
display: none;
}
#locationmap h2 {
color: #ffffff;
background: #173962;
font-size: 100%;
padding: 0.5em;
margin: 0;
}
#locationmapwrap {
position: relative;
}
#locationmapimg {
width: 100%;
}
#locationmarker {
position: absolute;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
}
#locationnearby {
//position: absolute;
//right: 0;
bottom: 0;
width: 100%;
background: rgba(255,255,255,0.8);
//-webkit-box-shadow: 0px -2px 2px 0px rgba(0,0,0,0.6);
//box-shadow: 0px -2px 2px 0px rgba(0,0,0,0.6);
}
#locationnearby h2 {
color: #ffffff;
background: #173962;
font-size: 100%;
padding: 0.5em;
margin: 0;
}
#locationnearbystrip {
padding: 13px 0px 6px 0px;
}
#nearbyleft, #nearbyright {
width: 3%;
text-align: center;
display: inline-block;
}
#nearbyleft img, #nearbyright img {
vertical-align: baseline;
}
#locationnearbyimgs {
position: relative;
width: 93%;
display: inline-block;
overflow: hidden;
}
#locationnearbyslider {
width: 10000px;
}
#locationnearbyslider .nearbyimg {
position: relative;
width: 118px;
border: 1px solid #173962;
margin: 0px 1px 0px 1px;
display: inline-block;
}
#locationnearbyslider .nearbyimg:hover {
text-decoration: none;
}
#locationnearbyslider .nearbyimg h3 {
/*
position: absolute;
top: 0;
left: 0;
width: 100%;
*/
font-size: 62.5%;
color: #ffffff;
background: #173962;
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
padding: 5px 5px 5px 5px;
margin: 0;
overflow: hidden;
}
#locationnearbyslider .nearbyimg h4 {
position: absolute;
right: 0;
bottom: 0;
font-size: 62.5%;
color: #ffffff;
background: #222222;
text-align: right;
padding: 0px 5px 0px 5px;
margin: 0;
}
#locationnearbyslider .nearbyimg img {
width: 100%;
}
#webcambottom {
position: absolute;
bottom: 0;
left: 0;
width: 97%;
height: 44px;
font-size: 12px;
font-weight: bold;
color: #ffffff;
background: #173962;
padding: 0px 1% 0px 2%;
}
#webcambottom img {
vertical-align: middle;
}
#webcambottom a, #webcambottom a:visited, #webcambottom a:hover {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
}
#webcambottom .left a {
display: inline-block;
margin-top: 10px;
}
#webcambottom .right a {
display: inline-block;
margin-top: 10px;
margin-left: 15px;
}
#webcamplay {
display: none;
}
#timestamp {
color: #a2bedb;
font-size: 87.5%;
margin-left: 5px;
}
#slider-container {
position: relative;
padding-left: 20px;
padding-right: 25px;
height: 43px;
overflow: hidden;
}
#webcamhistoryslider {
position: relative;
margin-top: 17px;
cursor: pointer;
}
#historytooltip {
position: absolute;
top: 0px;
left: 0px;
line-height: 17px;
color: #111111;
background: #ffffff;
padding: 0px 4px 0px 4px;
display: none;
}
#webcamhistorymarkers {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 24px;
}
#cycleleft, #cycleright {
position: absolute;
top: 50%;
color: #ffffff;
background: #173962;
text-decoration: none;
margin-top: -38px;
display: none;
z-index: 99;
}
#cycleleft {
left: 10px;
text-align: left;
padding: 10px 10px 10px 40px;
}
#cycleright {
right: 10px;
text-align: right;
padding: 10px 40px 10px 10px;
}
#cyclearrowleft, #cyclearrowright {
position: absolute;
top: 50%;
vertical-align: middle;
margin: 0;
display: inline-block;
margin-top: -50px;
z-index: 100;
}
#cyclearrowleft {
left: 10px;
}
#cyclearrowright {
right: 10px;
}
#cycleleft img.cycleimg, #cycleright img.cycleimg {
width: 90px;
vertical-align: middle;
display: inline-block;
}
#cycleleft img.cycleimg {
margin: 0 10px 0 0;
}
#cycleright img.cycleimg {
margin: 0 0 0 10px;
}
.cycletext {
font-size: 87.5%;
vertical-align: middle;
display: inline-block;
}


@media only screen and (max-width: 767px) {

#webcamtop, #webcambottom {
font-size: 75%;
/*background: rgba(23, 57, 98, 0.7);*/
}
#webcamtop h2 {
font-size: 125%;
}
#webcamtop h3 {
font-size: 75%;
}
#mobile_capture {
padding: 8px 8px 8px 8px;
display: block;
}
#desktop_capture {
display: none;
}
#webcamcapture {
position: fixed;
}
#webcamships {
position: fixed;
}
#locationmap {
display: none;
}
#locationnearby {
width: 100%;
display:none;
}
#map {
display: block;
}

}


@media only screen and (min-width: 768px) {

#mobile_capture {
display: none;
}
#desktop_capture {
display: block;
}
#map {
display: none !important;
}

}