@font-face {
  font-family: "Droid Sans";
  src: url("../font/droidsans.ttf");
}

html, body {
  font-family: 'Droid Sans', sans-serif;
  font-size: 14px;
  background-color: #f2eadf;
  color: #635f5c;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  padding: 0;
  overflow:hidden;
}
/* Layout */
#header {
  position: absolute;
  top:0;
  left:0;
  right:0;
  padding-left: 10px;
  padding-right: 20px;
  height:80px;
  background-color: #fbf7eb;
  color: #454545;
}
#toolbar {
  position: absolute;
  top:16px;
  left:170px;
  right:335px;
  height:30px;
  background-color: transparent;
}
#header h1 {display: none;}
#logo{
  display: block;
  width: 157px;
  height: 80px;
  float: left;
  text-indent: -9999px;
  background: url('../img/oldmapsonline-logo-head.png') no-repeat;
  background-size: 157px 80px;
}
#title{
  position: absolute;
  top: 125px;
  z-index: 10;
  display: block;
  right: 335px;
  padding: 15px;
  color: white;
  background-color: #3e3431;
}
#navigation{
  position: absolute;
  top: 80px;
  left: 0;
  height: 25px;
  width: 200%;
  background-color: #2f2725;
  z-index: 30;
}
#navigation ul{
  margin: 0;
  padding: 0;
}
#navigation li, #header #navigation li a {
  float: left;
  display: block;
  height:25px;
  line-height:25px;
  padding:1px 10px 0 10px;
}
#navigation li:first-child {padding-left:10px;}
#navigation li a, #getinvolved a {
  font-family: 'Droid Sans', sans-serif;
  color: #ffffff;
  text-decoration: none;
  padding:1px 10px 0 5px;
  margin: 0;
  font-size: 14px;
}
#navigation li a:hover, #navigation li.active a, #getinvolved a:hover{color: #d59a0b;}
#getinvolved{position: absolute; right: 340px; top: 85px; transition: right 0.6s ease; z-index: 35;}
.has_welcome #getinvolved{right: 5px;}
#footer {
  position: absolute;
  bottom:0;
  left:0;
  height:30px;
  right:335px;
}
#results_header{
  position: absolute;
  right: 0;
  top:0;
  height:105px;
  background: #fafafa;
  color:#333;
  width: 315px;
  box-shadow: #999 0 0 5px;
  z-index:70;
  font-size:14px;
  padding-left:20px;
}
#results_header p {
  font-size:18px;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}
#results_header_area {font-size:21px;}
#results_header .social {display:inline-block !important;vertical-align:middle;}
#results {
  position:absolute;
  z-index:68;
  top:105px;
  bottom:0px;
  right:0px;
  width:335px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: #999 0 0 5px;
  background: #f2eadf;
}
#results:empty::before {
  content:'No results found';
  text-align:center;
  display:block;
  padding:20px;
}
#results_header, #results {transition:right .6s ease;}
body.has_welcome #results_header, body.has_welcome #results {right:-335px;}
#map {
  position:absolute;
  top:105px;
  left:-335px;
  right:0;
  bottom:0;
}
#overview_map {
  position:absolute;
  bottom:0;
  left:0;
  width:195px;
  height:150px;
  z-index:2;
  border: 1px solid #666;
  box-shadow: #666 0 0 2px;
}
#map_attribution {
  position:absolute;
  left:195px;
  bottom:0;
  padding:1px 6px;
  background:#f2eadf;
  opacity:0.7;
  font-size:10px;
  line-height:12px;
}
body.has_welcome #map_attribution {left:0;}
#map, #overview_map {background:rgb(198, 209, 210) !important;}
body.has_welcome #overview_map {left:-200px}
#overview_map, #map_attribution, .mapcontrol, #button_help, #footer_area, #area {transition:left .8s ease;}
body.has_welcome .mapcontrol, body.has_welcome #button_help, body.has_welcome #footer_area {left:-30px}
.mapbounds_fill, .mapbounds_stroke, .selection_stroke {transition:opacity .8s ease .8s;}
.selection_stroke {transition-delay:0s;}
body.has_welcome .mapbounds_fill, body.has_welcome .mapbounds_stroke, body.has_welcome .selection_stroke {opacity:0 !important;}
#area {
  position: absolute;
  left:0;
  top:105px;
  width: 335px;
  bottom: 0;
  background-color: rgb(242, 234, 223);
  /*background-image: url('../img/tex/omo-header-bg.png');*/
  z-index: 10;
}
#area a{color: #ae1600;text-decoration: none;}
#area a:hover{text-decoration: underline;}
#area h3{margin: 20px 0 2px 0;}
#area ul{list-style-type: none; margin: 0; padding-left: 0; line-height: 1.5em;}
#area_parents{margin-bottom: 30px;}
#area_content{
  position: relative;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
}
#area h2:first-child{font-size: 24px;}
#area.slider {
  overflow-y: hidden;
  width: 335px;
}
#area.slider.closed {left: -335px;}
#footer_area{
  position: absolute;
  left: 335px; bottom: 205px;
  width:30px; height:30px;
  background-color: #ae1600;
  color:#fff;
  text-decoration: none;
  cursor: pointer;
  text-align:center;
  line-height:30px;
  font-family:"omo";
}
#footer_area:before{content:'\e61e'; font-size: 20px;}
#footer_area.closed{left: 0;}
#sidebar {
  border-left: 1px solid #ccc;
  background-color: #ececef;
  z-index: 90;
}
#content {padding:10px;}
fieldset { border: none; }
/*Toolbar buttons*/
.defaultValuesOnly{display: none;}
#button_date, #button_attributes{
  position: absolute;
  top: 0;
  width: 130px;
  padding: 10px 5px 14px 5px;
  line-height: 30px;
  font-size: 14px !important;
  color: #635f5c;
  text-shadow: 0 1px #fff;
  text-align: center !important;
  text-decoration: none;
  vertical-align: middle !important;
  background-color: transparent;
  box-shadow: none;
  border: 1px solid transparent;
  z-index: 60 !important;
  transition: width .5s linear, left .5s linear;
}
#button_date.opened, #button_attributes.opened{
  color: #ae1600; background-color: #fff;
  border: 1px solid #c8c4bb;
  border-bottom: transparent;
}
#button_date.somethingSet, #button_attributes.somethingSet {color: #ae1600;}
#button_date.somethingSet:hover, #button_attributes.somethingSet:hover,
#button_date.opened:hover, #button_attributes.opened:hover{color: #ae1600;}
#button_date {left:365px;}
#button_date:hover, #button_attributes:hover {color: #A39A8C;}
#button_attributes {left: 506px;}
#button_date::before, #button_attributes::before{
  font-size: 30px;
  font-family: 'omo';
  top: 6px !important;
  vertical-align: bottom;
  letter-spacing: 4px;
}
#button_date::before {content: "\e612";}
#button_attributes::before {content: "\e613";}
#button_date_x, #button_attributes_x{
  position: absolute;
  top: 106px;
  min-width:100px;
  min-height: 14px;
  line-height: 14px;
  padding: 5px 5px 5px 7px;
  background-color: rgba(255, 255, 255, 0.8);
  z-index:15;
  color: #000;
  text-decoration: none;
  vertical-align: middle;
  transition: left .5s linear;
  box-shadow: #999 0 0 5px;
}
#button_date_x::before, #button_attributes_x::before{
  font-family: "omo";
  font-size: 18px;
  line-height: 14px;
  letter-spacing: 4px;
  content: "\e60c";
  top: 6px;
  vertical-align: top;
  color: #ae1600;
}
#button_date_x:hover::before, #button_attributes_x:hover::before{opacity: 0.6;}
#button_date_x {left:540px;}
#button_attributes_x {left:685px;}
#toolbar_date, #toolbar_attributes {
  position: absolute;
  display: block;
  top: 70px;
  z-index: 50;
  background-color: #ffffff;
  color: #454545;
  display: none;
  border: 1px solid #c8c4bb;
  transition: left .5s linear;
}
#toolbar_date {
  padding: 25px 30px;
  left:165px;
  width:450px;
  height:75px;
  text-align: center;
}
#toolbar_attributes {
  padding: 20px;
  left: 476px;
  width:300px;
  height:200px;
}
#toolbar_attributes input{
  width: 290px;
  padding: 4px;
  margin-bottom: 10px;
}
#toolbar_attributes select{
  margin-top: 20px;
}
#toolbar_background {
  display:none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height:100%;
  z-index:10;
}
/* Toolbar Search */
#geocoderform {
  display:block;
  position:absolute;
  top:0px;
  left:0px;
  width: 250px;
  height:30px;
}
#geocoder {
  position: absolute;
  top:8px;
  left:10px;
  bottom:0;
  right:0;
  width:270px;
  height: 30px;
  padding:0 10px;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  transition: width .5s linear;
}
#geocoder:focus{border: 1px solid #ae1600;}
input, select {font-size: 9pt;border: 1px solid #cfcbbf;outline: none;}
input[type="submit"]{
  margin-top: 8px;
  font-family: "omo";
  font-size: 24px;
  vertical-align: middle;
  line-height: 24px;
  cursor: pointer;
  margin-left: 302px;
  height: 32px;
  width: 50px;
  padding: 4px;
  color: #fff;
  background-color: #ae1600;
  border: 1px solid  #ae1600;
  transition: margin-left .5s linear;
}
input[type="submit"]:hover{background-color: #ae1600;}

@media(max-width: 1110px){
  #button_attributes span, #button_date span{
    display: none;
  }
  #button_date{
    width: 50px;
    left: 300px;
  }
  #button_attributes{
    width: 50px;
    left: 360px;
  }
  #toolbar_attributes {
    left: 250px;
  }
  #toolbar_date {
    left: 20px;
  }
  #geocoder{
    width: 200px;
  }
  input[type=submit]{
    margin-left: 232px;
  }
  #button_date_x {
    left: 200px;
  }
  #button_attributes_x {
    left: 330px;
  }
}

h1, h2, h3, h4{
  letter-spacing: 0.03em;
  font-weight: bold;
  font-size: 12px;
  white-space:nowrap;
}
h1 {margin:0;}
h2 {font-size: 16px; margin:0; padding-top: 0;}
h3 {margin:0; overflow:hidden !important; text-overflow: ellipsis; margin: 3px 0 5px 0;  font-size: 14px;}
.tooltip { vertical-align: text-bottom; }
.goog-tooltip {
  background: infobackground;
  color: infotext;
  border: 1px solid infotext;
  padding: 1px;
  font: menu;
  max-width: 400px;
  z-index:1500;
}
#textsearch {display: block;}
#textsearch div { padding-left: 25px; }
#textsearch label { padding-right: 5px; }
#textsearch input { width: 350px; }
/*Results content*/
.item {
  padding:7px;
  border-bottom: 1px solid #fff;
  background-color: #f2eadf;
  color: #635f5c;
  overflow: hidden;
  display:block;
  text-decoration:none !important;
  clear:both;
}
.item:hover, .item.active {
  background-color: #ae1600;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ae1600), to(#810012));
  background-image: -webkit-linear-gradient(top, #ae1600, #810012);
  background-image: -moz-linear-gradient(top, #ae1600, #810012);
  background-image: -ms-linear-gradient(top, #ae1600, #810012);
  background-image: -o-linear-gradient(top, #ae1600, #810012);
  background-image: linear-gradient(to bottom, #ae1600, #810012);
  color: #fff;
  display:block;
  text-decoration:none !important;
  cursor: pointer !important;
}
.item_wrapper{
  padding-left: 4px;
  width: 221px;
  float: right;
  font-size: 12px;
  line-height: 1.4;
  max-height: 80px;
}
.item_wrapper h3{
  margin:3px 0 0 0;
}
.item .title {
  font-size:110%;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.item .author {padding-left: 5px;}
.serie_record {
  width:40px;
  float:left;
  clear:none;
  padding: 5px 0px 5px 10px;
}
.label-input-label {color: GrayText;}
.mapcontrol {
  background-color: rgba(255,255,255,0.7);
  font-family: "omo";
  color: #000;
  position: absolute;
  width:30px; height:30px;
  left:0;
  top:120px;
  text-decoration: none !important;
  font-size: 30px;
  color:#000;
  text-align: center;
}
.mapcontrol:hover {background-color: rgba(255,255,255,0.9);}
#map_minus {top:155px;}
#map_select {
  top:190px;
  padding-top: 4px;
  height: 26px;
  font-size: 20px;
}
/* Autocomplete */
.ac-renderer {
  font-size: 12px;
  position: absolute;
  width: 350px;
  background-color: #fff;
  border: 1px solid #666;
  -moz-box-shadow: 2px 2px 2px rgba(102, 102, 102, .4);
  -webkit-box-shadow: 2px 2px 2px rgba(102, 102, 102, .4);
  z-index: 100;
}
.ac-row {position: relative; padding: .4em; cursor: pointer;}
.ac-highlighted {font-weight: bold;}
.ac-active {background-color: #f7f1ea;}
.ac-type {
  background-color: #990033;
  color: #FFFFFF;
  display: block;
  margin: 2px;
  padding: 2px;
  font-style: italic;
  float: right;
}
/* Timeline */
#toolbar_date select, #toolbar_date label{display: none;}
#timeline {
  position: absolute; width: 430px;
  top: 62px; left: 35px; outline: none;
  height: 20px;
  background-image: url('../img/era-background.png');
  background-repeat: no-repeat;
  background-position: center 0;
}
#timeline .goog-twothumbslider-rangehighlight{
  position: absolute;
  top: 6px;
  width: 100%;
  height: 0;
  border-top: 4px solid #b00000;
  overflow: hidden;
}
#timeline .goog-twothumbslider-value-thumb,
#timeline .goog-twothumbslider-extent-thumb {
  position: absolute;
  overflow: visible;
  top: 0px;
  width: 7px;
  height: 7px;
  background: #fff;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  border: 4px solid #b00000;
  margin-left: -4px;
  z-index: 10;
  cursor: pointer;
}
#timeline .goog-twothumbslider-value-thumb span,
#timeline .goog-twothumbslider-extent-thumb span {
  position: absolute;
  top: -20px;
  left: -19px;
  width: 44px;
  height: 20px;
  text-align: center;
  cursor: pointer;
  color: #ae1600;
}
#timeline .slider_marker {
  width: 50px; margin-left:-22px;
  text-align: center; position: absolute;
  top: 17px; color: #aca7a4; z-index: -1; }
#timeline .slider_marker div {
  float: left; position: relative;
  width: 1px; height: 17px;
  left: 25px; top: -17px;
  background-color: #635f5c; }
.clear, .cleaner {clear: both;}
/* Welcome */
#welcome_background {position:absolute;top:105px;left:0;right:0;bottom:0;z-index:20;
                     background:rgba(251,247,235,0.7);
                     background:linear-gradient(rgba(251,247,235,0.8),rgba(251,247,235,0));}
#welcome {
  position:absolute;
  top:105px;
  left:0;
  right:0;
  bottom: 0;
  margin-top:60px;
  z-index:20;
  font-size:12px;
  text-align:center;
  color:#52482f;
}
#welcome p {
  font-family: "Droid Serif", "Serif", "IM Fell English", Helvetica, Arial, Tahoma, Verdana;
  font-size: 13px;
  line-height: 1.3;
  margin: 5px 0 10px 0;
}
.welcome_content {}
#welcome a:hover, #help a:hover {text-decoration: underline;}
.welcome_content h1, #mobile h1{
  font-size:28px;
  font-weight:normal;
  font-family: "Droid Serif", "Serif", "IM Fell English", Helvetica, Arial, Tahoma, Verdana;
  color:#a50c00;
  text-shadow:#6d0019 0px 1px 1px;
  margin:-8px 0 8px 0;
}
#welcome p.share{margin: 25px 0 10px 0;}
.welcome_content .social a{
  background-color: #fff;
  border-radius: 3px;
}
.mobile-min{
  position: absolute;
  bottom: 10px;
  left: 50%;
  margin-left: -97px;
}
.mobile-min .store-logo{ width: 95px; height: 33px;}
@media(max-height: 620px){
  .mobile-min{
    display: none;
  }
}
.welcome_logo {height:170px;}
#welcome_search_input {width:300px;margin:35px 4px 0 0;padding:11px;font-size:13px;border-radius:5px;border:1px solid #dbcec1;vertical-align:middle;}
#welcome_search, #welcome_start {width:140px;margin:35px 8px 0 0;white-space:nowrap;overflow:hidden;text-align:center;vertical-align:middle;}
#welcome_search_input, #welcome_start {transition:width .8s, padding .8s, opacity .8s;}
#welcome_search_input.hidden, #welcome_start.hidden {padding-left:0;padding-right:0;width:0;border:0;opacity:0;}
#button_help{
  position: absolute; left: 0; bottom:170px;
  width: 30px; height: 30px;
  background-color: #ae1600; color: #fff;
  text-decoration: none;
  font-family:"omo";
  font-size:24px;
  text-align:center;
  cursor: pointer;
  line-height:30px;
}
/* popup */
#popup_background {
  top:105px;
  right:335px;
  bottom:0;
  left:0;
  width:auto;
  height:auto;
  opacity:1;
}
#popup_background.hidden {opacity:0;}
#popup_wrap {transition:right .5s ease-out;}
#popup_wrap.hidden {right:-500px;}
#popup_next, #popup_prev, #popup_close {
  cursor: pointer; font-family: "omo"; text-decoration: none !important;
}
#popup_close {
  right: 10px;
  display: block;
  font-size: 30px;
  color: #ae1600 !important;
  position: absolute;
  top: 10px;
  z-index: 40;
}
#popup_next, #popup_prev {
  left:50%;
  width:60px;
  height:30px;
  margin-left:-30px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff !important;
  position: absolute;
  line-height: 30px;
  vertical-align: middle;
  text-align:center;
  font-size:30px;
  z-index: 200;
}
#popup_next {
  top:0;
  border-radius:0 0 5px 5px;
}
#popup_prev {
  bottom:0;
  border-radius:5px 5px 0 0;
}
iframe {background:#fbf7ec !important;}
.plovr-error-report { z-index: 64000; position: absolute; top:0; left:0; }


/* TOUR */
.tour-veil{
  position:absolute;z-index:100;background:#000;top:0;left:0;right:0;bottom:0;padding-top:1px;
  transition:top .5s linear,left .5s linear,width .5s linear,height .5s linear;
}
.tour-veil-under{background:transparent;opacity:0.4;}
.tour-card{position:absolute;z-index:100;background:#fcfcfc;padding:10px 15px;color:#000;box-shadow:#333 0 0 10px;margin:2px;width:220px;font-size:12px;}
.tour-card{opacity:0;transition:opacity .2s;}
.tour-card.direction-none{margin-left:-130px;margin-top:-60px;}
.tour-card:before{content:" ";position:absolute;border:10px solid transparent;}
.tour-card.anchor-top:before{top:8px;}
.tour-card.anchor-right:before{right:8px;}
.tour-card.anchor-bottom:before{bottom:8px;}
.tour-card.anchor-left:before{left:8px;}
.tour-card.direction-top:before{border-bottom-color:#fcfcfc;top:-20px;}
.tour-card.direction-right:before{border-left-color:#fcfcfc;right:-20px;}
.tour-card.direction-bottom:before{border-top-color:#fcfcfc;bottom:-20px;}
.tour-card.direction-left:before{border-right-color:#fcfcfc;left:-20px;}
.tour-card-content{text-align:justify;padding-bottom:15px;}
.tour-card-close{position:absolute;right:8px;top:8px;font-family:"omo";text-decoration:none !important;font-size:0;color:#333;}
.tour-card-close:before{content:"\E60C";font-size:24px;}
.tour-card-skipper{width:10px;height:10px;border-radius:5px;margin:2px;background:#ccc;display:inline-block;}
.tour-card-skipper:hover{background:#999;}
.tour-card-skipper.active{background:#666;}
.tour-card-next{
  position:absolute;right:10px;bottom:10px;
  width:39px;height:30px;border-radius:4px;background:#fff;
  box-shadow:0 1px 1px rgba(0,0,0,.62);border:solid 1px #cac7b6;background-image:linear-gradient(to top, #eee, #fff);
  color:#333;text-decoration:none;line-height:32px;text-align:center;font-size:0}
.tour-card-next:before {font-family:"omo";content:"\E60E";font-size:28px;}