/*
    Variables, Mixins
*/
@-webkit-keyframes image-fadein {
  0% {
    opacity: 0.5;
    filter: 50; }
  100% {
    opacity: 1;
    filter: 100; } }
@-moz-keyframes image-fadein {
  0% {
    opacity: 0.5;
    filter: 50; }
  100% {
    opacity: 1;
    filter: 100; } }
@-o-keyframes image-fadein {
  0% {
    opacity: 0.5;
    filter: 50; }
  100% {
    opacity: 1;
    filter: 100; } }
@keyframes image-fadein {
  0% {
    opacity: 0.5;
    filter: 50; }
  100% {
    opacity: 1;
    filter: 100; } }
@-webkit-keyframes image-shining {
  0% {
    opacity: 0;
    filter: 0; }
  100% {
    opacity: 1;
    filter: 100; } }
@-moz-keyframes image-shining {
  0% {
    opacity: 0;
    filter: 0; }
  100% {
    opacity: 1;
    filter: 100; } }
@-o-keyframes image-shining {
  0% {
    opacity: 0;
    filter: 0; }
  100% {
    opacity: 1;
    filter: 100; } }
@keyframes image-shining {
  0% {
    opacity: 0;
    filter: 0; }
  100% {
    opacity: 1;
    filter: 100; } }
/*
    Helper Classes
*/
.contentclose, #welcomecontentclose, #popupcontentclose, #familytreecontentclose, #illustratorcontentclose, .site_footer-disclaimer_popup-close {
  position: absolute;
  right: 10px;
  top: 0;
  padding: 10px 4px 4px;
  background: none repeat scroll 0 0 #000;
  z-index: 10;
  -webkit-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out; }
  .contentclose a, #welcomecontentclose a, #popupcontentclose a, #familytreecontentclose a, #illustratorcontentclose a, .site_footer-disclaimer_popup-close a {
    cursor: pointer; }

.contentclose:hover, #welcomecontentclose:hover, #popupcontentclose:hover, #familytreecontentclose:hover, #illustratorcontentclose:hover, .site_footer-disclaimer_popup-close:hover {
  opacity: 0.5;
  filter: 50; }

/*
    Default
*/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html, body {
  overflow: hidden; }

body {
  margin: 0; }

tspan {
  white-space: pre; }

text {
  font-family: "nipcens"; }

text#names {
  font-family: "uncialantiqua"; }

h1 {
  margin: -5px;
  text-align: center; }

h2, h1, h3 {
  font-size: 50px;
  position: relative;
  color: #F9D276;
  font-weight: 100;
  font-family: "uncialantiqua", "Myriad Pro", sans-serif;
  text-align: center; }

h3 {
  margin: -5px; }

a {
  color: #F9D276;
  -webkit-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out; }

a:hover {
  color: #359AF4; }

input {
  color: #888;
  background-color: #555;
  border-color: #333;
  border-top-color: #888;
  border-left-color: #888; }

@font-face {
  font-family: nipcens;
  src: url("../font/NipCens%20Handwriting%20Light.ttf"); }
@font-face {
  font-family: coelac;
  src: url("../font/Coelac.otf"); }
@font-face {
  font-family: uncialantiqua;
  src: url("../font/UncialAntiqua-Regular.ttf"); }
.btn_arda {
  cursor: pointer;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
  overflow: hidden;
  display: inline-block;
  font-size: 12px;
  margin: 0;
  -webkit-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out; }

.btn_arda:hover {
  color: #222;
  background: #F9D276; }

.btn_arda-image {
  height: 36px;
  width: 36px; }

.btb_arda-small {
  padding: 5px;
  line-height: 0.8; }

.btn_arda-large {
  padding: 11px;
  line-height: 1.3;
  height: 36px; }

.btn-active {
  background-color: #eee;
  color: #222;
  border-width: 0; }

.is-unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none; }

.is-clickable {
  cursor: pointer; }

.is-clickable--map {
  cursor: url("../pics/ring.png") 10 8, auto; }

.is-not-clickable {
  cursor: default !important; }

.defaultcursor {
  cursor: default; }

.is-highlighted--element {
  color: #F9D276 !important; }

.is-focused {
  color: #359AF4;
  cursor: pointer; }

div.center {
  margin: 0 auto;
  width: 8em; }

#bottomButtons {
  bottom: 20px;
  left: 15px;
  height: 36px;
  position: absolute; }

header h1, h2, h1, h3 {
  padding: 15px 0; }

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.pace-inactive {
  display: none; }

.pace .pace-progress {
  background: #F9D276;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px; }

.fb-like {
  position: fixed;
  top: 20px;
  right: 90px; }

#donate {
  position: fixed;
  top: 20px;
  right: 8px; }
  #donate :hover {
    opacity: 0.8; }

/*
    Navigation
*/
nav {
  top: 15px;
  left: 15px;
  position: absolute;
  z-index: 20; }

nav ul.sdt_menu {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "uncialantiqua", "Myriad Pro", sans-serif;
  width: 510px; }

nav ul.sdt_menu a {
  text-decoration: none;
  outline: none; }

nav ul.sdt_menu li {
  float: left;
  width: 170px;
  height: 85px;
  position: relative;
  cursor: pointer; }

nav ul.sdt_menu li > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 170px;
  height: 85px;
  z-index: 15;
  background: transparent url(../pics/menu/overlay.png) no-repeat bottom right;
  -webkit-box-shadow: 0 0 2px #000;
  -moz-box-shadow: 0 0 2px #000;
  box-shadow: 0 0 2px #000; }

nav ul.sdt_menu li a img {
  border: none;
  position: absolute;
  width: 0;
  height: 0;
  bottom: 0;
  left: 85px;
  z-index: 100;
  -webkit-box-shadow: 0 0 4px #000;
  -moz-box-shadow: 0 0 4px #000;
  box-shadow: 0 0 4px #000; }

nav ul.sdt_menu li span.sdt_wrap {
  position: absolute;
  top: 25px;
  left: 0;
  width: 170px;
  height: 60px;
  z-index: 20; }

nav ul.sdt_menu li span.sdt_active {
  position: absolute;
  background: #111;
  top: 85px;
  width: 170px;
  height: 0;
  left: 0;
  z-index: 20;
  -webkit-box-shadow: 0 0 4px #000 inset;
  -moz-box-shadow: 0 0 4px #000 inset;
  box-shadow: 0 0 4px #000 inset; }

nav ul.sdt_menu li span span.sdt_link, nav ul.sdt_menu li span span.sdt_descr, nav ul.sdt_menu li div.sdt_box a {
  margin-left: 15px;
  text-transform: uppercase;
  text-shadow: 1px 1px 1px #000; }

nav a {
  -webkit-font-smoothing: antialiased; }

nav ul.sdt_menu li span span.sdt_link {
  color: #fff;
  font-size: 20px;
  float: left;
  clear: both; }

nav ul.sdt_menu li span span.sdt_descr {
  font-family: "coelac", "Myriad Pro", sans-serif;
  color: #F9D276;
  float: left;
  clear: both;
  width: 155px;
  font-size: 10px;
  letter-spacing: 1px; }

nav ul.sdt_menu li div.sdt_box {
  position: absolute;
  width: 170px;
  overflow: hidden;
  height: 170px;
  top: 85px;
  left: 0;
  display: none;
  background: #333; }

nav ul.sdt_menu li div.sdt_box a {
  font-family: "coelac", "Myriad Pro", sans-serif;
  float: left;
  clear: both;
  line-height: 30px;
  color: #ddd;
  font-size: 13px; }

nav ul.sdt_menu li div.sdt_box a:first-child {
  margin-top: 10px; }

nav ul.sdt_menu li div.sdt_box a:hover {
  color: #359AF4; }

/*
    Welcome
*/
#welcome {
  position: absolute;
  bottom: 65px;
  margin: auto;
  width: 80%;
  background: none repeat scroll 0 0 rgba(70, 70, 70, 0.9);
  -webkit-box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.8);
  -moz-box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.8);
  box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.8);
  z-index: 16;
  left: 0;
  right: 0;
  top: 115px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  border: 8px solid #111; }

.welcomecontentext {
  margin: 0 auto 30px;
  color: #eee;
  font-family: "coelac", "Myriad Pro", sans-serif;
  font-size: 18px;
  text-align: center; }

.welcomecontentext img {
  width: 15px;
  height: 15px; }
.welcomecontentext span {
  color: #F9D276;
  margin-right: 10px;
  margin-left: 10px;
  float: left;
  line-height: 5.6;
  font-size: 30px;
  text-shadow: -1px -1px 4px #000, 1px -1px 4px #000, -1px 1px 4px #000, 1px 1px 4px #000; }

.welcomeBrowser {
  display: inline; }

.welcomeBackgroundimage {
  background-size: 300px 170px;
  -webkit-box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.8);
  -moz-box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.8);
  box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.8);
  width: 300px;
  height: 170px; }

#threeages, #otherfunctionality {
  width: 1000px;
  height: 170px;
  margin: auto; }

#welcomeFirstage {
  background-image: url("/pics/welcome/firstage.png"); }

#welcomeSecondage {
  background-image: url("/pics/welcome/secondage.png"); }

#welcomeThirdage {
  background-image: url("/pics/welcome/thirdage.png"); }

#welcomeJourney {
  background-image: url("/pics/welcome/journey.png");
  opacity: 0.5;
  filter: 50; }

#welcomeTimeline {
  background-image: url("/pics/welcome/timeline.png");
  opacity: 0.5;
  filter: 50; }

#welcomeAncestry {
  background-image: url("/pics/welcome/ancestry.png");
  -webkit-box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.8);
  -moz-box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.8);
  box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.8); }

#welcomeFirstage:hover, #welcomeSecondage:hover, #welcomeThirdage:hover, #welcomeAncestry:hover {
  animation: image-fadein;
  animation-duration: 1s;
  animation-direction: alternate-reverse;
  animation-iteration-count: 30; }

/*
    Loading at first time
*/
#loadingprocess {
  position: absolute;
  top: 150px;
  left: 20%;
  width: 60%;
  bottom: 15%;
  background-image: url("../pics/preloader.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.8);
  -moz-box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.8);
  box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.8);
  z-index: 26;
  overflow-y: auto;
  overflow-x: hidden; }

.loadingprocesscontentheader {
  padding: 15px 0;
  text-align: center; }

.loadingprocesscontentext {
  margin: 10px;
  color: #eee;
  font-family: "coelac", "Myriad Pro", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 18px; }

.loadingprocesscontentext p {
  margin-left: 15px; }

#preloader, #zoomingLocation {
  position: absolute;
  margin-left: -115px;
  margin-bottom: -30px;
  left: 50%;
  bottom: 50%;
  width: 230px;
  height: 60px;
  text-align: center;
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.5);
  -moz-box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.5);
  box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.5); }

#preloadercontent, #zoomingLocationcontent {
  font-family: "coelac", "Myriad Pro", sans-serif;
  font-size: 24px;
  z-index: 22;
  color: #eee;
  height: 55px;
  width: 220px; }

/*
    Info
*/
#info {
  float: right; }

#infoinner {
  width: 0; }

#infocontent {
  z-index: 23;
  width: 350px;
  position: absolute;
  background: url("../pics/info-bg.png") #333333;
  -webkit-box-shadow: -1px 0 10px 0 rgba(10, 10, 10, 0.8);
  -moz-box-shadow: -1px 0 10px 0 rgba(10, 10, 10, 0.8);
  box-shadow: -1px 0 10px 0 rgba(10, 10, 10, 0.8);
  min-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  top: 0;
  bottom: 0; }
  #infocontent a {
    color: #21d; }
  #infocontent a:hover {
    color: #399; }

#infobuttons {
  position: absolute;
  font-weight: bold;
  height: 76px;
  bottom: 15px;
  margin-left: -76px; }
  #infobuttons ul {
    list-style-type: none;
    margin: 0;
    padding: 0; }

#infobutton, #timelinebutton {
  width: 76px;
  height: 36px; }

#infobutton {
  margin-top: -3px;
  position: absolute; }

#searchbutton {
  position: absolute;
  padding: 5px;
  width: 20px;
  height: 20px;
  z-index: 3;
  right: 10px;
  top: 45px; }
  #searchbutton img {
    margin-bottom: 2px; }

#infobutton {
  z-index: 2; }

#infoCreature, #infoLocation, #infoEvent {
  margin: 15px; }

#infoCreature .infoheader, #infoLocation .infoheader, #infoEvent .infoheader {
  color: #333;
  font-size: 26px;
  margin-top: -5px;
  text-align: center;
  font-family: "Playfair Display", serif;
  font-style: italic;
  min-height: 20px; }

#infoCreature .infosubname, #infoLocation .infosubname, #infoEvent .infosubname {
  text-align: center;
  margin-top: -3px;
  min-height: 10px;
  font-family: serif; }

.infoelement {
  margin-top: 10px; }

.infosubheader {
  font-size: 19px;
  color: #333;
  font-family: "uncialantiqua", "Myriad Pro", sans-serif;
  margin-left: -5px; }

.infosubtext {
  margin-left: 10px;
  font-family: serif; }

.infopicture img {
  width: 350px;
  height: 250px;
  background: none repeat scroll 0 0 #EEE;
  -webkit-box-shadow: 2px 2px 8px 1px rgba(10, 10, 10, 0.8);
  -moz-box-shadow: 2px 2px 8px 1px rgba(10, 10, 10, 0.8);
  box-shadow: 2px 2px 8px 1px rgba(10, 10, 10, 0.8); }

.infopicture {
  width: 350px;
  margin-left: -15px;
  cursor: pointer; }

.infopictureSource {
  margin: -26px -5px;
  position: absolute;
  color: white;
  font-family: "Open Sans", sans-serif;
  text-shadow: 0 0 7px #050505; }
  .infopictureSource a {
    text-decoration: none; }
  .infopictureSource span {
    cursor: pointer;
    color: white;
    font-size: 11px; }
  .infopictureSource span:hover {
    color: #F9D276; }

.infoothernames ul, .infolocation ul, .inforelations ul, .infoarea ul {
  margin-left: -40px;
  margin-top: 0;
  margin-bottom: 0;
  list-style-type: none; }

.infolink {
  position: relative;
  bottom: 2px;
  font-size: 11px;
  margin: 10px 0 -10px -5px;
  font-family: "Open Sans", sans-serif; }
  .infolink a {
    text-decoration: none; }

.infosex, .infoage, .infotype {
  position: absolute;
  right: 10px;
  margin-top: 10px; }

.infoage {
  right: 30px; }

#infoContentSearch {
  position: absolute;
  margin: 10px;
  color: #eee;
  font-family: "coelac", "Myriad Pro", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 18px;
  width: 330px;
  height: 21px;
  border: 1px solid #CCC;
  z-index: 20; }

#infoClosebutton {
  position: absolute;
  right: 4px;
  top: 7px;
  cursor: pointer; }

#infoClosebutton:hover {
  background-color: #bbb; }

#infoSearch {
  width: 330px; }

#infoSearchSuggestions {
  z-index: 2;
  position: absolute;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
  padding: 5px;
  background-color: #666;
  -webkit-box-shadow: 0 4px 15px -4px rgba(0, 0, 0, 0.61);
  -moz-box-shadow: 0 4px 15px -4px rgba(0, 0, 0, 0.61);
  box-shadow: 0 4px 15px -4px rgba(0, 0, 0, 0.61); }
  #infoSearchSuggestions ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    color: #000; }
  #infoSearchSuggestions span {
    margin-top: 10px; }
  #infoSearchSuggestions img {
    vertical-align: middle; }

.is-creature {
  background-color: #555; }

/*
    Timeline
*/
#timeline {
  float: left; }

#timeline:after {
  clear: left; }

#timelineinner {
  height: 0; }

#timelinecontent {
  z-index: 22;
  position: absolute;
  background: none repeat scroll 0 0 #666;
  -webkit-box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.8);
  -moz-box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.8);
  box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.8);
  height: 0;
  min-width: 100%; }

#timelinearea {
  height: 350px;
  width: 100%; }

span[class^="timelinelocation"] {
  color: #DA871D;
  cursor: pointer; }

span[class^="timelinecreature"] {
  color: #969520;
  cursor: pointer; }

/*
    Popup
*/
#popup {
  position: absolute;
  top: 150px;
  left: 20%;
  width: 60%;
  bottom: 15%;
  background: none repeat scroll 0 0 rgba(70, 70, 70, 0.9);
  -webkit-box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.8);
  -moz-box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.8);
  box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.8);
  z-index: 16;
  overflow-y: auto;
  overflow-x: hidden; }

.popupcontentext {
  margin: 10px;
  color: #eee;
  font-family: "coelac", "Myriad Pro", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 18px; }
  .popupcontentext img {
    float: right;
    margin-left: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 4px 15px -4px rgba(0, 0, 0, 0.61);
    -moz-box-shadow: 0 4px 15px -4px rgba(0, 0, 0, 0.61);
    box-shadow: 0 4px 15px -4px rgba(0, 0, 0, 0.61);
    width: 50%;
    height: 50%;
    max-width: 300px; }

#ccimage {
  width: 20%;
  height: 20%;
  max-width: 130px; }

/*
    Family Tree
*/
#familytree {
  position: absolute;
  left: 15px;
  right: 15px;
  top: 15px;
  bottom: 15px;
  background: none repeat scroll 0 0 rgba(70, 70, 70, 0.8);
  -webkit-box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.8);
  -moz-box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.8);
  box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.8);
  z-index: 21; }

#familytreecontentsvg {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 4; }

#familytreecontentheader {
  position: absolute;
  left: 10px;
  top: 25px; }
  #familytreecontentheader h2, #familytreecontentheader h1, #familytreecontentheader h3 {
    margin: 0;
    padding: 0; }

#familytreecontentraces, #familytreecontentsearch {
  position: fixed;
  bottom: 65px;
  margin: 10px;
  color: #eee;
  font-family: "coelac", "Myriad Pro", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 13px; }

#familytreecontentraces {
  bottom: 65px;
  font-size: 13px; }

#familytreecontentsearch {
  top: 125px;
  font-size: 18px;
  width: 300px;
  z-index: 5; }

#familytreesearchsuggestions {
  z-index: 2;
  position: absolute;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
  padding: 5px;
  background-color: #555;
  -webkit-box-shadow: 0 4px 15px -4px rgba(0, 0, 0, 0.61);
  -moz-box-shadow: 0 4px 15px -4px rgba(0, 0, 0, 0.61);
  box-shadow: 0 4px 15px -4px rgba(0, 0, 0, 0.61); }
  #familytreesearchsuggestions ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    color: #000; }
  #familytreesearchsuggestions img {
    vertical-align: middle; }
  #familytreesearchsuggestions span {
    vertical-align: middle; }

#familytreeShowallbutton {
  position: fixed;
  bottom: 25px;
  left: 25px;
  z-index: 5; }

#familytreeHideallbutton {
  position: fixed;
  bottom: 25px;
  left: 95px;
  z-index: 5; }

#familytreeUnfixallbutton {
  position: fixed;
  bottom: 25px;
  left: 165px;
  z-index: 5; }

#familytreecontentsvg .linkBEGETS {
  stroke: #ddd;
  stroke-width: 0.6px; }

#familytreecontentsvg .linkLOVES {
  stroke: #f66;
  stroke-width: 1.5px; }

#familytreecontentsvg .linkHASSIBLING {
  stroke: #66f;
  stroke-width: 1.5px; }

#familytreecontentsvg marker path {
  fill: #ddd; }

#familytreecontentsvg .node .bgcircle {
  stroke-width: 2.5px;
  cursor: pointer; }

#familytreecontentsvg .node .circle {
  cursor: pointer; }

#familytreecontentsvg .node .nodetext {
  fill: #bbb;
  font-size: 8px;
  pointer-events: none;
  font-family: "Arial"; }

#familytreecontentsvg .node .linkcountercircle {
  fill: #359AF4;
  stroke: white;
  stroke-width: 1.0px; }

#familytreecontentsvg .node .linkcountertext {
  font: 10px sans-serif;
  text-anchor: middle;
  fill: white;
  pointer-events: none; }

/*
    Illustrator
*/
#illustrator {
  position: absolute;
  top: 150px;
  left: 20%;
  width: 60%;
  bottom: 15%;
  background: none repeat scroll 0 0 rgba(70, 70, 70, 0.9);
  -webkit-box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.8);
  -moz-box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.8);
  box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.8);
  z-index: 19;
  overflow-y: auto;
  overflow-x: hidden; }

.illustratorcontentext {
  margin: 10px;
  color: #eee;
  font-family: 'coelac', "Open Sans", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 18px; }
  .illustratorcontentext img {
    margin-left: 10px;
    float: right;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 4px 15px -4px rgba(0, 0, 0, 0.61);
    -moz-box-shadow: 0 4px 15px -4px rgba(0, 0, 0, 0.61);
    box-shadow: 0 4px 15px -4px rgba(0, 0, 0, 0.61); }

.listplacing {
  margin-left: -15px; }

.illustratorcontentext a {
  color: #F9D276; }

#illustratorfooter {
  margin: 10px; }

#illustratorfooterHeader {
  text-align: center;
  color: #eee;
  font-family: "uncialantiqua", "Myriad Pro", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 25px; }

.illustratorfooterImagesHeader {
  color: #bbb;
  font-family: "coelac", "Myriad Pro", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 15px; }

#illustratorfooterCreatures a, #illustratorfooterCreaturesFamilytree a, #illustratorfooterLocations a, #illustratorfooterEvents a {
  text-decoration: none; }

#illustratorfooterCreatures img:hover, #illustratorfooterCreaturesFamilytree img:hover, #illustratorfooterLocations img:hover, #illustratorfooterEvents img:hover {
  animation: image-shining 1s; }

/*
    Mapping
*/
#arda-bg {
  position: relative;
  height: 36px;
  width: 36px;
  color: white;
  font-family: "Open Sans", sans-serif;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.1;
  display: inline-block;
  margin-top: 2px;
  -webkit-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out; }
  #arda-bg span {
    margin-top: 20px;
    position: absolute;
    margin-left: 5px; }

#arda-bg:hover {
  opacity: .5; }

#arda {
  background: url("../pics/map/bg.png");
  background-size: cover;
  height: 2000px; }

path {
  stroke-linejoin: round;
  stroke-miterlimit: 2;
  stroke-linecap: round; }

#outline path {
  fill: #eee;
  stroke: #eee;
  stroke-width: 0.5px; }

#ekkaia {
  fill: #0d529f; }

#forest path {
  fill: rgba(51, 153, 51, 0.69);
  fill-opacity: 0.7;
  stroke-width: 0.3px;
  stroke: rgba(51, 153, 51, 0.28); }

#names {
  fill: #630; }

.colorofperson {
  fill: #8018E1; }

.colorofregion {
  fill: #9B1818; }

.colorofwater {
  fill: #B2C6DB; }

.colorofareaspecial {
  fill: #9B1818; }

.colorofforgottenland {
  fill: rgba(220, 220, 220, 0.4) !important;
  stroke: rgba(220, 220, 220, 0.7) !important;
  stroke-dasharray: 3, 2;
  stroke-width: 4px;
  border-image-repeat: round; }

#mountainhigh path {
  fill: #888;
  brigthness: 50%;
  stroke-width: 0.3px;
  stroke: #625050; }

#mountainlow path {
  fill: #EAA019;
  fill-opacity: 0.9;
  stroke-width: 0.3px;
  stroke: #BA821A; }

#highland path {
  fill: rgba(249, 163, 6, 0.29);
  fill-opacity: 0.9;
  stroke-width: 0.3px;
  stroke: rgba(234, 191, 110, 0.47); }

#lake path {
  fill: #0d529f;
  stroke-width: 0.8px;
  stroke: #0d529f; }

#waypath path {
  fill: none;
  stroke: #333;
  stroke-width: 0.3px; }

#waypath .picture {
  stroke: #393 !important; }

#waypath .waypathtext {
  fill: #111;
  stroke: #888;
  stroke-width: 0.05px;
  font-size: 8px;
  pointer-events: none;
  font-family: "coelac"; }

#point_waypoint .waypointtext {
  fill: #111;
  stroke: #888;
  stroke-width: 0.05px;
  font-size: 7px;
  pointer-events: none;
  font-family: "Arial"; }

#river path {
  fill: none;
  stroke: #39F;
  cursor: pointer; }

#road path {
  fill: none;
  stroke: #999; }

#innerland path {
  fill: #eee;
  stroke-width: 0.8px;
  stroke: #eee; }

#moor path {
  fill: rgba(58, 132, 138, 0.77);
  stroke-width: 0.8px;
  stroke: rgba(17, 136, 136, 0.12); }

.map_is-highlighted--element {
  fill: #666;
  filter: brightness(125%);
  -webkit-filter: brightness(125%);
  -moz-filter: brightness(125%);
  -o-filter: brightness(125%);
  -ms-filter: brightness(125%); }

.riversmall {
  stroke-width: 0.15px; }

.rivermedium {
  stroke-width: 0.4px; }

.riverbig {
  stroke-width: 0.6px; }

.roadsmall {
  stroke-width: 0.15px; }

.roadmedium {
  stroke-width: 0.4px; }

.roadbig {
  stroke-width: 0.6px; }

#region path {
  fill: rgba(50, 147, 192, 0.67);
  stroke: none; }

#region-mesh path {
  fill: none;
  stroke-width: 1.2px;
  stroke: rgba(68, 50, 140, 0.74);
  stroke-dasharray: 3, 2;
  border-image-repeat: round; }

/*
    Bottom buttons
*/
#zoombuttoncontainer {
  width: 16px;
  height: 32px;
  display: inline-block;
  margin-right: -3px; }

#zoomplusbutton {
  margin-bottom: -4px; }

#zoomminusbutton {
  margin-bottom: 0px; }

.buttonzoom {
  position: relative;
  width: 16px;
  height: 18px;
  text-align: center; }

#zoomresetbutton {
  margin-right: -4px; }

#scalebar {
  position: relative;
  width: 180px;
  height: 36px;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
  overflow: hidden;
  font-size: 10px;
  line-height: 1.4;
  display: inline-block;
  margin-right: -3px; }

#scalebarheader {
  text-align: center; }

#scalebarsmooth {
  margin-left: 5px;
  margin-top: -14px;
  cursor: pointer; }

#scalebarsmooth:hover {
  color: #F9D276; }

#scalebarleft {
  position: absolute;
  text-align: left;
  left: 5px;
  bottom: 3px;
  font-size: 9px; }

#scalebarcenter {
  text-align: center;
  margin-top: -3px;
  font-size: 9px;
  bottom: 3px; }

#scalebarright {
  position: absolute;
  text-align: right;
  right: 5px;
  bottom: 2px;
  font-size: 9px; }

#scalebarslider .ui-slider, #scalebarslider .ui-slider-handle {
  height: 0.9em !important;
  width: 0.9em !important; }

#scalebarslider {
  border: 1px solid #666; }

#legendcontainer {
  position: relative;
  display: inline-block;
  margin-right: -1px; }

#legends {
  bottom: 42px;
  position: absolute;
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.5);
  -moz-box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.5);
  box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.5);
  z-index: 17;
  width: 160px; }

#legendinner {
  height: 0; }

#legendinnerinner table {
  color: #ddd;
  font-size: 11px;
  font-family: "Open Sans", sans-serif;
  border-collapse: collapse;
  border: 0; }
#legendinnerinner tr {
  line-height: 1.5; }
#legendinnerinner td {
  cursor: pointer; }
#legendinnerinner td:hover {
  color: #F9D276; }

#legendbutton {
  margin-right: -3px; }

.legendelements {
  list-style-type: none; }

.legendicon {
  float: left;
  height: 12px;
  width: 12px;
  margin-right: 2px; }

.legendtext {
  margin-left: 2px; }

.legendelementhidden {
  color: #333; }

#legendnames_EN, #legendnames_DE {
  position: absolute;
  top: 50px; }

#legendnames_EN {
  left: 87px; }

#legendnames_DE {
  left: 73px; }

#legendnames_EN:hover, #legendnames_DE:hover {
  filter: brightness(125%); }

.legendlanginactive {
  opacity: 0.4;
  filter: 40; }

section#journeycontainer {
  position: relative;
  display: inline-block; }

#journey {
  bottom: 42px;
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.5);
  -moz-box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.5);
  box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.5);
  z-index: 17;
  position: absolute;
  width: 220px; }

#journeyinner {
  height: 0; }

#journeyinnerinner table {
  color: #ddd;
  font-size: 11px;
  font-family: "Open Sans", sans-serif;
  height: 90%;
  border-collapse: collapse;
  border: 0;
  margin-top: 10px; }
#journeyinnerinner p {
  color: #ddd;
  font-size: 9px;
  font-family: "Open Sans", sans-serif;
  margin-left: 15px;
  margin-top: 0; }
#journeyinnerinner tr {
  line-height: 1.7; }
#journeyinnerinner td {
  cursor: pointer; }
#journeyinnerinner td:hover {
  color: #F9D276; }

#journeybutton {
  margin-right: -3px; }

.journeyelements {
  list-style-type: none; }

.journeyicon {
  float: left;
  height: 12px;
  width: 12px;
  margin-right: 2px; }

.journeytext {
  margin-left: 2px; }

.journeyelementactive {
  color: #F9D276; }

#regionbutton {
  margin-right: -4px; }

#regionbutton:hover {
  background: #F9D276; }

/*
    Footer
*/
.site_footer-copyright {
  left: 15px;
  bottom: 2px;
  color: white;
  font-size: 10px; }
.site_footer-tour {
  right: 188px; }
.site_footer-forum {
  right: 148px; }
.site_footer-disclaimer {
  right: 90px; }
.site_footer-reportissue {
  right: 7px; }
.site_footer-copyright, .site_footer-tour, .site_footer-forum, .site_footer-disclaimer, .site_footer-reportissue {
  text-shadow: -1px 1px 4px #000;
  position: fixed;
  font-family: "Open Sans", sans-serif;
  overflow: hidden; }
.site_footer-links {
  text-decoration: none;
  height: 14px;
  bottom: 1px;
  font-size: 11px;
  line-height: 1.1;
  vertical-align: bottom; }
.site_footer-links:hover {
  text-decoration: underline !important; }
.site_footer-disclaimer_popup {
  position: absolute;
  top: 150px;
  left: 20%;
  width: 60%;
  bottom: 15%;
  background: none repeat scroll 0 0 rgba(70, 70, 70, 0.9);
  -webkit-box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.8);
  -moz-box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.8);
  box-shadow: -3px 0 14px 0 rgba(10, 10, 10, 0.8);
  z-index: 16;
  overflow-y: auto;
  overflow-x: hidden; }
  .site_footer-disclaimer_popup-content-inner--text {
    margin: 10px;
    color: #eee;
    font-family: "coelac", "Myriad Pro", sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 18px; }
    .site_footer-disclaimer_popup-content-inner--text p {
      margin-left: 15px; }

/*# sourceMappingURL=arda-maps.css.map */