/*
    Document   : style
    Created on : 03.04.2014, 10:51:45
    Author     : all4dk
    Description:
        Purpose of the stylesheet follows.
*/

html {height: 100%;}
body {margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden;}
html body h1 {font-family: Ubuntu, sans-serif;}
html body h2 {font-family: Ubuntu, sans-serif;}
html body h3 {font-family: Ubuntu, sans-serif;}
div#map {width: 100%; position: absolute; top: 0; bottom: 0px;}
div.clear {clear: both;}
div.infoCard {text-align: justify; height: 258px; overflow-y: auto; padding-right: 4px;}
div.infoCard h3 {text-align: center; margin-top: 0;}
div.infoCard div.photoContainer {position: relative; width: 200px;height: 150px;float: left;margin-right: 10px;margin-bottom: 10px; background-color: #fdfdfd; }
div.infoCard img {width: 200px; margin: 0; cursor: pointer;}
div.infoCard .photosCount {position: absolute;margin: 3px;color: white;background-color: black;border-radius: 3px;padding: 2px 4px;opacity: 0.5;}
div.header {display: block; position: absolute; top: 0px; left: 40px; z-index: 1000; background-color: rgba(255,255,255,0.7); padding: 5px 10px; border-radius: 0 0 5px 5px;}
div.header img {height: 89px;}
div.add {cursor: pointer;}
html body h4 {font-weight: bold;}
a.randomPointAImg {float: left; margin: 0 15px 0 0;}
div.excursionMarker {position: absolute; color: white; font-weight: bold; text-shadow: 1px 1px 2px black;}

.fotorama {display: inline-block;}
div.fotorama__caption {text-align: left;font-size: 9px;margin-bottom: 5px;opacity: 0.6;}
div.fotorama__caption div.fotorama__caption__wrap {padding: 0px 5px;}

#addPointModal .extraHeader .button {cursor: pointer; background-color: #eeeeee;}
#addPointModal .extraHeader .add:hover {background-color: #bff4c8;}

#addPointModal .extraImage .button {cursor: pointer; background-color: #eeeeee;}
#addPointModal .extraImage .remove:hover {background-color: #f4bfbf;}
#addPointModal .extraImage .add:hover {background-color: #bff4c8;}
#addPointModal .extraImage .type.button:hover {background-color: #ddd;}
#addPointModal .extraImage .input-group-addon.type.button {border-left: 0px;}

#addPointModal .extraParam .button {cursor: pointer; background-color: #eeeeee;}
#addPointModal .extraParam .remove:hover {background-color: #f4bfbf;}
#addPointModal .extraParam .add:hover {background-color: #bff4c8;}
#addPointModal .extraParam .input-group-addon.type.ico:hover {background-color: #ddd;cursor: move;}
#addPointModal .extraParam .input-group-addon.type.button {border-left: 0px;}
#addPointModal .extraParam input.form-control {width: 50%}

div.leaflet-popup-content div.control {margin-top: 7px;}
div.leaflet-popup-content div.control a {min-width: 150px; color: #333; font-size: 14px; font-weight: normal;}
div.leaflet-popup-content div.control a span.label {display: inline; font-size: 12px; font-weight: normal; color: #333;}
div.leaflet-popup-content div.control:hover a {min-width: 40px;}
div.leaflet-popup-content div.control:hover a span.label {display: none;}
div.leaflet-popup-content div.control:hover a:hover {min-width: 150px;}
div.leaflet-popup-content div.control:hover a:hover span.label {display: inline;}
div.leaflet-popup-content button span.label {display: none; font-size: 90%; font-weight: normal; color: #333;}
div.leaflet-popup-content button:hover {min-width: 150px;}
div.leaflet-popup-content button:hover span.label {display: inline;}

.form-group .error {display: none;}
.form-group.has-error .error {display: inline-block;}

#wayPoints {margin-bottom: 10px;}
#wayPoints .wayPoint {cursor: pointer; border: solid 1px #999; padding: 2px 5px; margin-bottom: 3px; background-color: #fff; color: #333;}
#wayPoints .wayPoint span.del {font-weight: bold; color: red;}

#routes {margin-bottom: 10px; height: 200px;}
#routes .route {cursor: pointer; border: solid 1px #999; padding: 2px 5px; margin-bottom: 3px;}
#routes .route span {font-weight: bold; color: red;}

/*Controls for BOX*/
div#control {width: 50px; position: absolute; top: 0; right: 0;bottom: 50px; color: white; font-size: 20px; padding-top: 60px;}
body.openBox div#control {right: 250px;}
div#control div {background-color: #333; border-radius: 8px 0 0 8px; width: auto; padding: 10px; margin-left: 10px; margin-bottom: 8px; cursor: pointer;}
div#control div:before {cursor: pointer;}
div#control div:hover {background-color: #000;}
div#control div.inProgress {animation: blink 3s 0s infinite; background-color: #333;}
div#control div.active {background-color: rgb(255, 162, 0)!important;}
div#control div.important {background-color: rgba(0, 145, 90, 0.8);}
div#control div.big {font-size: 22px; padding: 14px; margin-left: 0;}
div#control div._t {border-radius: 8px 0 0 0;border-bottom: solid 1px #666; margin-bottom: 0;}
div#control div._c {border-radius: 0; border-bottom: solid 1px #666; margin-bottom: 0;}
div#control div._b {border-radius: 0 0 0 8px;}
div#control div.space {height: 10px; background-color: transparent; padding: 0;}
div#control div._t2 {background-color: rgba(200, 200, 200, 0.65); border-radius: 8px 0 0 0;border-bottom: solid 1px #ddd; margin-bottom: 0;}
div#control div#notify {position: absolute; background-color: red;color: white;border-radius: 50%; width: 20px;height: 20px;margin: 0;padding: 0;padding-top: 2px;text-align: center;font-weight: bolder;font-size: 15px;vertical-align: middle;font-family: sans-serif;top: 18px;left: -7px;}
@keyframes blink {0 { background-color: #333; } 70% { background-color: #00a2ff; } 100% { background-color: #333;}}

/*nav.navbar.navbar-inverse.navbar-fixed-top {opacity: 0.9}
nav.navbar.navbar-inverse.navbar-fixed-top:hover {opacity: 1}*/
nav.navbar.navbar-inverse .navbar-nav>li>a {color: #ddd;}
nav.navbar.navbar-inverse a.bigGreen {background-image: -webkit-linear-gradient(top,#3cfc3c 0, #398739 100%);background-image: linear-gradient(to bottom,#3cfc3c 0, #398739 100%);background-repeat: repeat-x;margin: 3px 0 3px;padding: 12px 15px;border-radius: 5px;display: inline-block;color: white;font-weight: bold;text-decoration: none;}
nav.navbar.navbar-inverse a.bigGreen:hover {background-image: -webkit-linear-gradient(top,#3cfc3c 0, #398739 50%);background-image: linear-gradient(to bottom,#3cfc3c 0, #398739 80%);text-decoration: none;}
nav.navbar.navbar-inverse a.bigOrange {background-image: -webkit-linear-gradient(top,#fc8b3c 0, #ba6228 100%);background-image: linear-gradient(to bottom,#fc8b3c 0, #ba6228 100%);background-repeat: repeat-x;margin: 3px 0 3px;padding: 12px 15px;border-radius: 5px;display: inline-block;color: white;font-weight: bold;text-decoration: none;}
nav.navbar.navbar-inverse a.bigOrange:hover {background-image: -webkit-linear-gradient(top,#fc8b3c 0, #ba6228 50%);background-image: linear-gradient(to bottom,#fc8b3c 0, #ba6228 80%);text-decoration: none;}

span.notifications {font-weight: bolder; color: red;}
div.top5authors {width: 16.66666667%; float: left; display: inline-block; overflow: hidden;}

/*BOX*/
body.openBox div#box {display: block; z-index: 100; overflow-y: scroll;overflow-x: hidden;}
div#box {width: 250px; display: none; position: absolute; top: 0; right: 0;bottom: 0px; border-left: 1px solid #666; padding: 0px 7px 0 7px;}
div#box #boxClose {position: absolute; right: 10px; top: 5px; color: #999; font-size: 18px; font-weight: bolder; cursor: pointer;}
div#box div {display: none;}
div#box div div{display: block;}
div#box h3 {margin-top: 10px;}
div#box {background-color: #333; color: #FFF; margin-top: 51px;}
div#box a {color: #FFF;}
div#box a:hover {text-decoration: underline;}

.layers {cursor: pointer;}
.layers.selected {font-weight: bold;}
#boxLayers .dot{display: none; cursor: default;}
#boxLayers .dot.selected{display: inline;}

/*Leaflet FIX*/
.leaflet-popup-content-wrapper .leaflet-popup-scrolled {border-bottom: none;border-top: none;}

#suggestContainer {position: absolute;top: 40px;background-color: #fff; color: #333; padding-bottom: 8px; border-bottom: 1px solid #333; width: 100%; display: none;}
#suggestContainer div a {color: #333;}
#suggestContainer > div:hover {background-color: #333; color: #FFF;}
#suggestContainer > div.hover {background-color: #333; color: #FFF;}
#suggestContainer > div:hover a {color: #FFF;}
#suggestContainer > div.hover a {color: #FFF;}

/* ------------- PAGE --------------------*/
.coords-container {text-align: right; margin-bottom: 20px; color: #777;font-size: 0.9em;}
#pageSmoothBackground {z-index: -100; width: 106%; height: 106%; position: fixed; top: -3%; left: -3%; background-size: cover; -webkit-filter: blur(5px);}
.pagePoinsNearCards {display: inline-block; overflow: hidden; padding: 0 2px 4px 2px;width: 186px; height: 139px;}
.pagePoinsNearCardsImg {width: 186px; height: 139px;}

#photobank img {margin: 2px; border: solid 1px white;}
img.imageInArticle {border: solid 3px white;max-width: 100%;}

div.darkFooter {background-color: #333; color: #fff; margin-bottom: 0px; padding-bottom: 30px; padding-top: 10px;}
div.darkFooter a {color: #71b3ea;}
div.darkFooter a:hover {color: #63a6df;text-decoration: underline;}

/* -------------------------------------------*/
/* ------------- ADAPTIVE --------------------*/
/* -------------------------------------------*/

@media screen and (min-width:1200px) and (min-height:1080px) {
    #imageModal .modal-dialog {
        width: 1180px!important;
    }
}

/* Target landscape smartphones, portrait tablets, narrow desktops */
@media screen and (max-width:1000px) {
    .modal-dialog {
        width: 100%!important;
        margin-left: 0!important;
        margin-right: 0!important;
    }
    .modal-content {
        width: 100%!important;
    }
    .modal-header .close {
        font-size: 40px!important;
        position: absolute!important;
        z-index: 10!important;
        right: 10px!important;
        top: 0px!important;
    }
    .modal-body {
        padding: 3px!important;
        margin: 0!important;
    }
    div.top5authors {width: 33.33333334%;}
    h4.top5authors {text-align: center;}
}

@media screen and (max-width:815px) {
	.onlyBigScreen {display: none!important;}

    body {
        padding: 60px 0 0 0!important;
    }

    div.container{
        padding: 5px;
    }

    div.container.darkHeader{
        padding: 50px 5px;
    }

    div.header a img {
        width: 115px;
        height: 69px;
        margin-bottom: 10px;
    }
}

@media screen and (max-width:400px) {
	a.randomPointAImg {margin: 0 0 10px 0; display: block;width: 100%;text-align: center;}
	div.infoCard div.photoContainer {float: none; margin: 0 auto 10px auto;}
	div#box #boxClose {top: 0px; font-size: 45px;}

    div.container.feed div.row.elements div.element {width: 100%;}
    div.container.feed div.row.elements div.element a.imgContainer {margin: 0 0 10px 0; display: block; width: 100%;text-align: center;}
    div.container.feed div.row.elements div.element a img.elementImg {margin: 0; display: inline;max-width: 100%; float: none;}

    div.top5authors {width: 50%;}
}

@media print {
	.hideOnPrint {display: none!important};
}