/* Home
--------------------------------------------------------------------------------------------------------------------- */

body {
  color: rgba(0, 0, 0, 0.87);
  max-width: 1280px;
  margin: 0 auto;
  background-color: #FFFFF3;
  font-family: 'Source Sans Pro', sans-serif;
  padding: 0 40px 60px;
  font-size: 0;
}

a, a:hover, a:active { cursor: pointer !important; }
a:active {}

/*ul { list-style: none; }*/

header { 
  padding: 32px 10px;
  text-align: center;
  margin-top: 32px;
}

header h1 a { font-style: none; text-decoration: none; color: inherit; }
header h1 { 
  line-height: 1; 
  margin-top: 0.3em; 
  margin-bottom: 0.3em; 
  font-family: 'athena_rubyregular', sans-serif !important;
  text-decoration: none !important;
  font-style: normal !important;
  font-weight: normal !important;
  letter-spacing: -0.024em;
}

header h3 { 
  line-height: 1; 
  font-family: 'athena_rubyregular', sans-serif !important;
  text-decoration: none !important;
  font-style: normal !important;
  font-weight: normal !important;
  color: gray;
  letter-spacing: -0.024em;
}

header h4 { font-size: 1.5rem; line-height: 1.6; /*padding-bottom: 0.7em;*/} 
#nav      { height: 32px; line-height: 32px; border-bottom: 0.5px solid rgba(0,0,0,0.24); z-index:3;background: #FFFFF3;position:fixed; top: 0;left:0;right:0}
.nav      { font-size: 1.4rem; text-align: center; }
.nav a { padding: 0 4px;}
.nav a.twitter {
  display:block;
  position:absolute;
  top: 0;
  right: 32px;
  height: 32px;
  width: 32px;
  border-left: 0.5px solid rgba(0,0,0,0.2);
  background-image: url('/static/images/tw-icon.svg');
  background-size: 16px 16px;
  background-position: center;
  background-repeat: no-repeat;
}
.nav a.facebook {
  display:block;
  position:absolute;
  top: 0;
  right: 0px;
  height:32px;
  width: 32px;
  border-left: 0.5px solid rgba(0,0,0,0.2);
  background-image: url('/static/images/fb-icon.svg');
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
}
/* .nav a.twitter:hover, .nav a.facebook:hover { opacity: 0.8; } */

a.selected { color: inherit; text-decoration: none; pointer-events: none; }

#container { max-width: 600px; margin: 0 auto;}

h1,h2,h3,h4 { font-family: 'Bitter', serif !important; }
h1 { font-size: 5.4rem; font-weight: 700; }
h3 { font-size: 1.8rem; font-weight: 700; }
h4 { font-size: 1.8rem; font-weight: normal; }
/*h5 { font-size: 1.5rem; margin-top: 1.2em;}*/

p, li { font-size: 1.5rem; line-height: 1.6; }
p { padding-bottom: 0.4rem; }
p + ul { padding-top: 0.8rem }
p + p { padding-top: 1.8rem }
ul + p { padding-top: 1.2rem; }

p small, p small a { color: gray; }

footer {}

#scroll-top {
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 32px;
  position: fixed;
  bottom: 10px;
  right: 10px;
  background-color: #FFFFF3;
  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
  font-family: 'athena_rubyregular', sans-serif !important;
  font-weight: bold;
  opacity: 0;
  color: #666;
  cursor: pointer;
  border-radius: 2px;
  border: 0.5px solid rgba(0,0,0,0.24);
  z-index: 1;
  transition: opacity 0.15s linear;
}

#scroll-top:hover {
  color: black;
  box-shadow: 0 2px 3px rgba(0,0,0,0.2);
}

#scroll-top.appear {
  opacity: 1;
}


/* Map
--------------------------------------------------------------------------------------------------------------------- */

#map {
  text-align:center;
  font-size: 0;
  /*padding-bottom: 32px; only if showing legend below map */
  margin: 0 -40px;
  visibility: hidden;
  /* iOS delayed stickiness fix (because no js while finger down) */
/*  transform: translateZ(0);
  -moz-transform: translatez(0);
  -ms-transform: translatez(0);
  -o-transform: translatez(0);
  -webkit-transform: translateZ(0);*/
}

#map-canvas {
  height: calc(100vh - 200px);
  /*max-height: calc(100vh - 400px);*/
  max-height: calc(100vh/2.2);
  background-color: #b3dafb;
  /* background-image: url('/static/images/dolphins.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 40px; */
}

#map-canvas img {
  max-width: none !important;
}

/* CustomOverlay */ 

.overlay-label-water {
  width: 120px;
  font-size: 11px;
  color: #5782c1;
  font-style: italic;
  line-height: 1.6;
  transition: opacity 0.15 ease-in-out;
  font-family: 'Roboto',Arial,sans-serif;
}

/* [class^="overlay-"].hidden {
  opacity: 0;
} */

/* InfoWindow
/* Note: maxWidth of infoWindow set in js (infowindow.setOptions({maxWidth: 200});)
--------------------------------------------------------------------------------------------------------------------- */

/* background */
.gm-style .gm-style-iw-c {
  border-radius: 2px;
  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
  /* background: rgba(0,0,0,0.66); */
}

/* chevron */
.gm-style .gm-style-iw-t::after {
  /* background: linear-gradient(45deg,rgba(0,0,0,0.66) 50%,rgba(0,0,0,0) 51%,rgba(0,0,0,0) 100%);  */
}

/* text */
.gm-style-iw {
  padding: 12px 14px !important;
  color: rgba(0, 0, 0, 0.87);
}

.gm-style-iw .thumb {
  width: 160px;
  height: 160px;
  margin-bottom: 12px;
  margin-left: -14px;
  margin-top: -12px;
  background-position: center;
  background-size: cover;
  position: relative;
  display: none; /* hide it */
}

.gm-style-iw button { /* hides x-out */
  display: none !important;
}

/* .gm-style-iw .thumb::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 32px solid rgba(255,255,255,0.72);
  border-left: 32px solid transparent;
  display: none;
} */

.gm-style-iw h5 {
  font-family: 'Bitter', serif !important; 
  text-decoration: none !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-size: 12px !important;
  line-height: 1.6;
}

.gm-style-iw h5 + p { margin-top: 2px; }

.gm-style-iw p {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 12px !important;
  line-height: 1.4;
}

.gm-style-iw p a.street-view {
  padding-left: 9px;
  background-image: url('/static/images/pegman.png');
  background-repeat: no-repeat;
  background-size: 6px auto;
  background-position: left center;
}

/* Map infoWindow tooltip inner */
.gm-style-iw-d {
  overflow: visible !important;
}

.map-control { 
  background-color: rgba(255,255,255,1);
  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
  border-radius: 2px;
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  transition: all 0.2s ease-out;
}
.map-control:hover { background-color: rgba(255,255,255,1);  }

.map-legend {
  background-color: rgba(255,255,255,0.32);
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

#map.stuck {
  position: fixed !important;
  top: 32px;
  transition: left 1s linear, right 1s linear;
  left:0;
  right:0;
  padding: 0;
  z-index:2;
  margin: 0;
  /*border-bottom: 1px solid rgba(0,0,0,0.12);*/
  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
}

#status {
  margin-top: 16px;
  line-height: 1.6;
  text-align: center;
  visibility: hidden;
  color: gray;
}

/* #status:before{
  opacity:0.3;
  content:'';
  background-image: url('/static/images/three-dots-left.svg');
  background-size: 16px 16px;
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  display: inline-block;
  vertical-align:middle;
  background-position: center center; 
}

#status:after{
  opacity:0.3;
  content:'';
  background-image: url('/static/images/three-dots-right.svg');
  background-size: 16px 16px;
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  display: inline-block;
  vertical-align:middle;
  background-position: center center; 
} */


/* Section
--------------------------------------------------------------------------------------------------------------------- */

section { padding-bottom: 44px; }

section h4 { 
  /* text-transform: uppercase;  */
  padding: 10px 0;
  margin-bottom: 14px;
  /* font-family: 'athena_rubyregular', sans-serif !important; */
  font-style: normal !important;
  font-weight: normal !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* section h4::before, section h4::after { content: " — ";} */

section h4::before {
  content:'';
  /* background: rgba(0,0,0,0.24); */
  flex-grow: 1;
  height: 0;
  margin-right: 10px;
  border-bottom: 1px dotted #bbb; 
  /* background-image: url('/static/images/three-dots-left.svg');
  background-image: url("/static/images/four-dots-in-cross.svg");
  background-size: 16px 16px;
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  display: inline-block;
  vertical-align:middle;
  background-position: center center;  */
}

section h4::after{
  content:'';
  /* background: rgba(0,0,0,0.24); */
  flex-grow: 1;
  height: 0;
  margin-left: 10px;
  border-bottom: 1px dotted #bbb; 
  /* background-image: url('/static/images/three-dots-right.svg');
  background-image: url("/static/images/four-dots-in-cross.svg");
  background-size: 16px 16px;
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  display: inline-block;
  vertical-align:middle;
  background-position: center center;  */
}

ul li { 
  list-style: none; 
  list-style-position: outside; 
  background-repeat: no-repeat;
  background-size: 16px;
  background-image: url("/static/images/four-dots-in-cross.svg");
  line-height: 1.6; 
}

li[condition="good"]       { background-image: url("/static/images/icons/map/sharp-dot-green-24px.svg") !important; }
li[condition="poor"]       { background-image: url("/static/images/icons/map/sharp-dot-gold-24px.svg") !important; }
li[condition="symbolic"]   { background-image: url("/static/images/icons/map/sharp-dot-red-24px.svg") !important; }
li[condition="lost"]       { background-image: url("/static/images/icons/map/sharp-dot-gray-24px.svg") !important; color: gray; }

li[condition="good"][type="wall"],li[condition="good"][type="gate"] { background-image: url("/static/images/icons/map/sharp-dot-tower-green-24px.svg") !important; }
li[condition="poor"][type="wall"],li[condition="poor"][type="gate"] { background-image: url("/static/images/icons/map/sharp-dot-tower-gold-24px.svg") !important; }
li[condition="symbolic"][type="wall"],li[condition="symbolic"][type="gate"] { background-image: url("/static/images/icons/map/sharp-dot-tower-red-24px.svg") !important; }
li[condition="lost"][type="wall"],li[condition="lost"][type="gate"] { background-image: url("/static/images/icons/map/sharp-dot-tower-gray-24px.svg") !important; }

li[type="church"],li[type="monastery"] { background-size: 21.3333px; background-position: 5px 14px; }
li[condition="good"][type="church"],li[condition="good"][type="monastery"] { background-image: url("/static/images/icons/map/sharp-dot-cross-green-32px.svg") !important; }
li[condition="poor"][type="church"],li[condition="poor"][type="monastery"] { background-image: url("/static/images/icons/map/sharp-dot-cross-gold-32px.svg") !important; }
li[condition="symbolic"][type="church"],li[condition="symbolic"][type="monastery"] { background-image: url("/static/images/icons/map/sharp-dot-cross-red-32px.svg") !important; }
li[condition="lost"][type="church"],li[condition="lost"][type="monastery"] { background-image: url("/static/images/icons/map/sharp-dot-cross-gray-32px.svg") !important; }


section ul li { background-position: 7px 16px; padding-top: 12px; padding-bottom: 12px; padding-left: 28px; position: relative; overflow: auto; }
section ul li .thumb { float:right; width:80px; border: 0.5px solid rgba(0,0,0,0.24); margin-left: 10px; margin-bottom: 4px; }
.title { font-family: 'Bitter', serif !important; font-weight: normal; font-size: inherit; }

.name-turkish, .name-author { 
  text-transform: uppercase; 
  font-family: 'Source Sans Pro', sans-serif !important;
  font-weight: normal; 
  font-size: 1.2rem;
  color: gray;
  white-space: nowrap;
}
a.url { display:block; }
section ul li .description {  }

/* #features section ul { border: 0px solid rgba(0,0,0,0.24); background-color: #fffff8; } */
/* #features section ul { border: 0.5px solid rgba(0,0,0,0.24); background: white; box-shadow: 0 2px 3px rgba(0,0,0,0.1); } */
#features section ul li { cursor: pointer; padding-right: 10px;}
#features section ul li.selected, #features section ul li:hover { animation: featureSelect 0.2s forwards; }
#features section ul li .description a, a[goto], a.subtle { color: inherit; border-bottom: 1px dotted gray; text-decoration: none; }
#features section ul li .thumb { 
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

#features section ul li .thumb {
  /* border-radius: 50vw; */
}

#features section ul li.selected .thumb, #features section ul li:hover .thumb {
  -webkit-filter: none;
  filter: none;
}


#features section ul li a.street-view {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 13px !important;
  line-height: 1.4;
  white-space: nowrap;
  padding-left: 9px;
  margin-left: 2px;
  background-image: url('/static/images/pegman.png');
  background-repeat: no-repeat;
  background-size: 6px auto;
  background-position: left center;
  /* transition: opacity .15s ease-in-out;
  opacity: 1; */
}

/* #features section ul li.selected a.street-view, #features section ul li:hover a.street-view {
  opacity: 1;
} */

@keyframes featureSelect {
  from { background-color: none; }
  to { background-color: rgba(0,150,255,0.07);}
}

/* #legend {
  height:32px;
  margin-top:-32px;
  margin-bottom:22px;
  position:relative;
  text-align: center;
}

#legend ul li {
  background-position: 7px 8px; 
  background-image: none;
  display:inline-block; 
  height: 32px; 
  line-height: 32px;
  padding-left: 24px;
  font-size: 1.3rem;
}

#legend ul li:first-child { padding-left: 0; } */

.athena {
  font-family: 'athena_rubyregular', sans-serif !important;
  text-decoration: none !important;
  font-style: normal !important;
  font-weight: normal !important;
}


/* Page
--------------------------------------------------------------------------------------------------------------------- */

#page {
  font-size: 1.5rem;
  line-height: 1.6;
  position: relative;
}

#page img.large { width:280px; max-width: 100%; margin-bottom: 16px; }
#page p { padding: 12px 0 }

/* Breadcrumbs
--------------------------------------------------------------------------------------------------------------------- */

#breadcrumbs {
  text-transform: uppercase; 
  font-family: 'Source Sans Pro', sans-serif; 
  color: gray;
  padding-bottom: 16px;
}

#breadcrumbs ol li {
  display: inline-block;
  list-style: none;
  position: relative;
  font-size: 1.2rem;
  max-width: 33%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#breadcrumbs ol li:not(:last-child):after { content: "›"; padding: 0 3px; }
#breadcrumbs ol li:last-child:after { content: ""; }
#breadcrumbs ol li a { color: inherit; text-decoration: none; }


/* Media: Large Split Screen
--------------------------------------------------------------------------------------------------------------------- */

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

  /* we apply .split_screen to <html> in jinja, homepage/map only. */

  .split_screen body {
    margin: 0;
    max-width: none;
    padding: 0;
  }

  .split_screen header {
    padding-left: 20px; 
    padding-right: 20px; 
    max-width: 440px; 
  }

  .split_screen #container, .split_screen .nav { 
    max-width: 440px; 
    padding-left: 10px; 
    padding-right: 10px; 
  }

  .split_screen #container { margin: 0; }

  .split_screen #map { 
    position: fixed;
    top: 0;
    right: 0;
    width: calc(100vw - 440px);
    height: auto;
    bottom: 0;
    height: auto;
    max-height: none;
    margin: 0;
    border-left: 0.5px solid rgba(0,0,0,0.24);
  }

  .split_screen #map-canvas { 
    height: 100%;
    max-height: none;
  }

  .split_screen #status { margin-top: 0; }

  .split_screen h1 { /*font-size: 4.4rem;*/ }

  .split_screen #scroll-top { left: 10px; }

  .split_screen .gm-style-iw .thumb {
    display: block;
  }
}

/* Media: Tablet
--------------------------------------------------------------------------------------------------------------------- */

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

  /*#map-canvas { height: calc(80vw - 80px); }*//* rect: 80% viewport width minus body horizontal margins */
}


/* Media: Mobile
--------------------------------------------------------------------------------------------------------------------- */

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

  body { padding-left: 10px; padding-right:10px; }
  h1 { font-size: 4.2rem; }
  #map { margin: 0 -10px; }
  #map-canvas { height: calc(100vw - 0px); }/* rect: 80% viewport width minus body horizontal margins */
  /*#legend, section h4 { text-align: center; }*/

  #scroll-top {
    display: none;
  }
}

/* iPhone 4,5 */
@media screen and (max-width: 320px) {
  h1 { font-size: 3.8rem; }
}


/* Fonts
--------------------------------------------------------------------------------------------------------------------- */

@font-face {
  font-family: 'athena_rubyregular';
  src: url('/static/type/athenaruby_b018-webfont.woff2')  format('woff2'),
       url('/static/type/athenaruby_b018-webfont.woff')   format('woff'),
       url('/static/type/athenaruby_b018-webfont.ttf')    format('truetype');
  font-weight: normal;
  font-style: normal;
}