@import url(https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,600); @import url(http://weloveiconfonts.com/api/?family=brandico|entypo);
/* entypo */ [class*="entypo-"]:before { font-family: 'entypo', sans-serif;  padding-right: 10px;}
body {font-family: 'Open Sans', sans-serif;  font-size: 100%;  background: #829292;}
*, *:before, *:after { margin: 0;  padding: 0;  box-sizing: border-box;  border: 0;} ul {list-style: none;} a {color: white; text-decoration: none;}

#browser {  margin: 10px auto;  color: white;  width: 80%;  -webkit-box-shadow: 2px 5px 15px rgba(0, 0, 0, 0.5);  -moz-box-shadow: 2px 5px 15px rgba(0, 0, 0, 0.5);  box-shadow: 2px 5px 15px rgba(0, 0, 0, 0.5);}
#browser-bar {  background: #394141;  width: 100%;  padding: 8px;  margin: 0 auto;  font-weight: 300;  font-size: 0.9em;  position: relative;}
#browser-bar p {  text-align: center;}  #browser-bar .circles { border-radius: 10px;  height: 13px;  width: 13px;  background: #ff3434;  float: left;  margin-left: 7px;  margin-top: 3px;}
#browser-bar .circles:nth-of-type(2) {background: #ffdd33;} #browser-bar .circles:nth-of-type(3) {background: #67b678;} .arrow {position: absolute;  right: 3px;  top: 6px; font-size: 1.2em;  color: #8e9699;}

#content {  background: #454f4f;} #content:after {  content: "";  display: table;  clear: both;} #content #left, #content #right {  height: 100%;} #content #left {  float: left;  width: 75%;  background: #7BC087;}
@media all and (max-width: 780px) { #content #left {    width: 100%;  }}
#content #left #map {  height: 388px;  position: relative;  background-image: url("../img/maps/IS.png");  background-size: cover;}
#content #left #map p {  text-transform: uppercase;  padding-top: 20px;  padding-left: 30px;  font-size: 0.9em;  font-weight: 600;}
#content #left #map .zoom {  position: absolute;  right: 25px;  top: 25px;  width: 2px;  height: 70px;  background: white;}
#content #left #map .zoom:before, #content #left #map .zoom:after {  text-align: center;  font-weight: 600;  position: absolute;  color: #7BC087;  background: white;  width: 20px;}
#content #left #map .zoom:before {  content: '+';  top: -10px;  right: -8px;} #content #left #map .zoom:after {  content: '-';  bottom: -10px;  right: -8px;}
#content #left #map .map-locator {  position: absolute;  top: 35%;  left: 10%;  border-radius: 15px;  height: 30px;  width: 30px;  background: rgba(0, 0, 0, 0.4);  border: solid 2px white;}
#content #left #map .map-locator:before {  content: '';  position: absolute;  top: 9px;  left: 9px;  width: 8px;  height: 8px;  background: white;  border-radius: 5px;}
#content #left #map .map-locator .tooltip { position: absolute;  color: #394141;  left: 50px;  top: -10px;  background: white;  font-size: 0.8em;  font-weight: 600;  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);}
#content #left #map .map-locator .tooltip:before {  content: '';  position: absolute;  left: -10px;  top: 14px;  border-right: solid white 10px;  border-top: solid transparent 8px;  border-bottom: solid transparent 8px;}
#content #left #map .map-locator .tooltip [class*="entypo-"] {  min-width: 25px;  display: inline-block;  text-align: center;  border-right: solid thin #CCC;  margin-right: 5px;}
#content #left #map .map-locator .tooltip li {  border-bottom: solid thin #CCC;  padding: 10px;  white-space: nowrap;} #content #left #map .map-locator .tooltip li a {  color: #51B2D6;}
#content #left #map .map-locator .tooltip li:hover [class*="entypo-"] {  color: #51B2D6;}
#content #left ul#location-bar {  width: 100%;  text-align: center;  display: table;} #content #left ul#location-bar li {  display: table-cell;  padding: 15px;  background: #5FA269;  border-right: solid thin #7fb587;}
#content #left ul#location-bar li:last-of-type {  border-right: 0;} #content #left ul#location-bar li:hover {  background: #4c8254;} #content #left ul#location-bar .active {  background: #4c8254;}
#content #right {  float: left;  width: 25%;  background: #454f4f;  font-size: 0.75em;  padding: 15px;} @media all and (max-width: 780px) {  #content #right {    width: 100%;  }}
#content #right p {  margin-bottom: 10px;  text-transform: uppercase;} #content #right a:hover {  color: #51B2D6;} #content #right #social {  display: table;  width: 100%;}
#content #right .social {  display: table-cell;  text-align: center;} #content #right form {  border-top: solid thin #8e9699;  border-bottom: solid thin #8e9699;  margin: 20px 0;  padding: 20px 0;}
#content #right form input,#content #right form textarea {  background: #394141;  padding: 8px;  margin-bottom: 8px;  width: 100%;  color: white;}
#content #right form input:last-of-type, #content #right form textarea:last-of-type {  margin-bottom: 0;}
#content #right form input[type='submit'], #content #right form textarea[type='submit'] {  text-transform: uppercase;  background: #7BC087;  width: 50%;  color: white;  margin-top: 5px;}
#content #right form input[type='submit']:hover, #content #right form textarea[type='submit']:hover {  background: #58b068;  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);}
#content #right form input[type='textarea'], #content #right form textarea[type='textarea'] {  min-height: 75px;  vertical-align: text-top;}
#content #right p.other {  font-size: 0.7;  margin-bottom: 5px;  text-transform: lowercase;  font-weight: 100;} #content #right p.other, #content #right p.other a {  color: #8e9699;}