/*-------------------------------------------------
GLOBALS CLASSES
-------------------------------------------------*/
*{margin:0; padding:0;}
body{ font-family: 'Open Sans', sans-serif; font-size:13px; background:#455268;}
img{border:0;}
h1{font-family: 'Oswald', sans-serif; font-weight:normal;}
h2{font-family: 'Oswald', sans-serif; font-weight:normal; font-size:22px; color:#ffffff;}
h3{font-family: 'Open Sans', sans-serif; font-weight:normal; font-size:14px; color:#fff; }
p{font-family: 'Open Sans', sans-serif; font-size:13px; padding-bottom:10px;}
a{color:#9cff00; text-decoration:none;}
a:hover{ color:#91a3c2;}
/*--------------------------------------- 
GENERAL CLASS
----------------------------------------*/
.marRight30{margin-right:30px;}
.martop{margin-top:30px;}
.marbottom30{ margin-bottom:30px;}
.padding-bottom{padding-bottom:10px;}
.floatRight{float:right;}
.floatLeft{float:left;}
.clear{clear:both;}
.row{ width:970px; margin:0 auto; overflow:hidden; }
/*.page{width:970px; background:#1c263c; margin:0 auto;}*/
.selectpage{background:url(../images/banner-bg.jpg) no-repeat center; margin:0 auto; width:970px;}
.infopage {width:970px; background:#1c263c; margin:0 auto;} /* background:#e6e9ee; */
.wrapper{background:#1c263c; margin:0 auto; width:970px;}
.panel{ overflow:hidden;}
.controller{}
.title{}
.content{}
.buttons{ width:80px; height:30px;}
.form{}
.text-field{ background:#91a3c2; width:200px; height:16px; padding:10px; border:none; font-family: 'Open Sans', sans-serif; font-size:13px; color:#fff;}
.textarea{background:#91a3c2; width:200px; height:106px; padding:10px; border:none; font-family: 'Open Sans', sans-serif; font-size:13px; color:#fff; overflow:auto;}
/*-------------------------------------------------
WEB LOGO
-------------------------------------------------*/
.weblogo {background:#1c263c; height:55px; padding-top:15px;}
.weblogo .logo {width:auto; float:right; padding-right:20px;}
/*-------------------------------------------------
MENU  CLASSES
-------------------------------------------------*/
.header{background:#313c53; height:60px; padding-top:20px; padding-bottom:20px; overflow:hidden;}
.costal {float:left; width:auto; padding-left:20px;}
.costal h1 a{ font-size:45px; color:#e2b600;}
.menu{float:right; width:auto; padding-top:20px; }
.menu ul li{ width:auto; float:left; list-style:none; }
.menu ul li a{float:left; text-decoration:none; color:#e2b600; font-size:14px; display:block; height:45px; line-height:45px; padding: 0px 15px 0px 15px;}
.menu ul li a:hover{ font-weight: bold; color:#e2b600;}
.menu ul li a.active{ font-weight: bold; color:#313c53; background:#e2b600;}

/*-------------------------------------------------
CONTENT CLASSES
-------------------------------------------------*/
.content_wrap{margin:0 auto; padding:30px 30px 0px 30px;}
/*-------------------------------------------------
SELECT
-------------------------------------------------*/
#select { overflow:hidden; width:900px; margin:0 auto;}
/*#select h2{ color:#e2b600; padding-bottom:10px; padding-top:10px;} */
#select h2{ color:#1c263c; padding-bottom:10px; padding-top:10px;}
#select .box { padding-right: 40px; float: left; text-align: left;}
#select .arrowL { padding:58px 10px 0px 0px; float:left; cursor:pointer;}
#select .arrowR { padding:58px 0px 0px 0px; float:left; cursor:pointer;}
#timeList .ui-selecting { background: #69758f; }
#timeList .ui-selected { background:#20409a; color: white; }
#timeList { list-style-type: none; font-family:'Open Sans', sans-serif; font-size:12px; margin: 0; padding: 0; width: auto; }
#timeList li {color:#313c53; background: #d1d8e2; cursor: pointer; margin: 2px; padding: 1px; float: left; width: 20px; height: 20px; text-align: center; }
#timeList .disabled {background: #54657b; cursor:not-allowed;}

#select .button{float:left; width:100px; height:32px; color:#eff3f9; background:#455268;
                font-family:'Open Sans', sans-serif; font-size:15px; text-align:center;
                margin:50px 0px 0px 30px; padding-bottom:2px; border-radius: 5px 5px 5px 5px;}
#select .button:hover{ background:#e2b600; color:#455268;}
#select .button a{background:#e2b600; color:#455268; text-decoration:none;}
#select .button a:hover{color:#455268;}

/*-------------------------------------------------
RESULTS  CLASSES
-------------------------------------------------*/
/*#results {width:970px; margin:0 auto; min-height:800px; background:url(../images/banner-bg_big.jpg) no-repeat center;}*/
#results {width:970px; overflow:hidden; margin:0 auto; background:#e6e9ee;}
#results .panel{float:left; min-height:500px; padding-top:10px;}
#results .panel h1{ color:#1c263c; font-size:20px; padding:20px 0px 10px 250px;}
#results .panel h2{ color:#1c263c; font-size:15px; padding:0px 0px 10px 170px;}
#results .panel .img{padding:10px 10px 10px 10px;}
#results .panel .img2{padding:0px 10px 0px 30px;}
#results .panel .map{padding:20px 10px 15px 130px;}
#results .panel .img3{padding:10px 10px 20px 140px;}
#results .panel .img4{padding:0px 10px 10px 134px;}
#results .panel .map2{padding:5px 0px 15px 0px; float:left;}
#results .panel .map2 .image{float:left; display:inline-block; padding:10px 10px 0px 10px;}
/*-------------------------------------------------
MAP  CLASSES
-------------------------------------------------*/
#map_canvas { width: 965px; height: 750px; border: solid 2px #c6cad0;}
/*-------------------------------------------------
INFO CLASSES
-------------------------------------------------*/
.info h1 {color:#54657b; font-size:20px; padding-bottom:10px;} /*color:#1c263c; */
.info p {font-size:14px; color:#adb5c8} /*color:#54657b;} */
.info a {color:#e2b600; font-weight:normal;}
.info .t1 {color:#fff;}
.infoHelp { padding:18px 85px 0px 0px; float:right; cursor: pointer;}
/*-------------------------------------------------
MODAL CLASSES
-------------------------------------------------*/
.modal {display:none; z-index: 1; position: fixed; padding-top: 70px;
        left: 0; top: 0; width: 100%; height: 100%; 
        overflow: auto;  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */}
.modal .content {border: 1px solid #888; background-color: #1C263C; width: 70%; margin: auto; padding: 10px;}
.modal .close {color: #aaaaaa; float: right; font-size: 28px; font-weight: bold;}
.modal .close:hover,.close:focus {color: #54657b; text-decoration: none; cursor: pointer;}
.modal .content h1 {color:#fff; font-size:20px; padding-bottom:10px;}
.modal .content p {font-size:14px; color:#adb5c8}
/*-------------------------------------------------
FOOTER CLASSES
-------------------------------------------------*/
.footer-wrapper{ background:#313c53; margin-top:40px;}
.footer{ width:970px;margin:0 auto;} 
.footer .panel{border-right:#38445a solid 1px;float:left; width:290px; padding-left:30px; padding-top:30px;padding-bottom:30px; background:none;} 
.footer .panel.title{background:none;}
.footer h1{ font-size:22px;font-weight:normal;color:#e2b600}
.footer h3{ font-size:22px;font-weight:normal; color:#fff;}
.footer .panel.title h2{ font-size:16px; color:#9cff00; padding-top:15px;}
.footer .panel .content{padding-top:10px;}
.footer .panel .content p{ color:#909cb6;line-height:20px; padding-bottom:0px;}
.footer .panel .content p a{ color:#909cb6; text-decoration:none;}
.footer .panel .content p a:hover{ color:#e2b600}
.footer .panel .content p a.active{ color:#ffffff;}
.footer .panel .content p h2{font-size:25px; color:#ffffff;}
.footer .panel.border-right{border-right:none;}

/*-------------------------------------------------
UI SELECTMENU
-------------------------------------------------*/
#select .ui-selectmenu-menu {font-family: 'Open Sans', sans-serif; font-size:13px; line-height: 15px;}
#select .ui-selectmenu-button {font-family: 'Open Sans', sans-serif; font-size:13px; }
#select .ui-selectmenu-button span.ui-selectmenu-text {line-height: 15px;}
#select .ui-corner-all {border-radius: 2px 2px 2px 2px;}

/*-------------------------------------------------
TABS
-------------------------------------------------*/
#tabs {	
	background: transparent;
	width: 905px;
	border: none;
	padding-left: 160px;
}

#tabs .ui-widget-header {
	background: transparent;
	border: none;
	z-index:1; 
}

#tabs img {
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
/*    border: 1px solid #c3cad2; */
}

#tabs .ui-tabs-panel { position: relative; }

#tabs .ui-tabs-nav { /* postavke lijevih tabova*/
	position: absolute;
	float: left;
	left: 10px;
	top: 120px;
	width: 165px;
	height: 40px;
}

#tabs .ui-tabs-nav li {
	width: 100%;
	font-family: 'Oswald', sans-serif; font-size:14px;
	text-align: left;
        height: 38px;
}

#tabs .ui-tabs-nav li a {
	float: left;	
	width: 92%;
        padding:10px 0px 11px 14px;
        color: #ffffff; //#b6c0d2;
}

#tabs ul li a span {
    padding-left: 65px;
    font-size: 15px;
    line-height: 38px;
}

#tabs .ui-state-default {
	background: transparent url(../images/vm.off.g.png) no-repeat right;
        border: none;
}

#tabs .ui-state-active {
	background: transparent url(../images/vm.on.gy.png) no-repeat right;
	border: none;
}

#tabs .ui-state-hover a {
	background: transparent url(../images/vm.over.y.png) no-repeat right;
	border: none;
        color: #000000;
}

#tabs .ui-tabs-selected.ui-state-hover a {
	background: transparent url(../images/vm.on.gy.png) no-repeat right;
	border: none;
}	

#tabs ul li:first-child {
    -webkit-border-radius: 15px 0px 0px 0px;
    -moz-border-radius: 15px 0px 0px 0px;
    border-radius: 15px 0px 0px 0px;
}

#tabs ul li:last-child {
    -webkit-border-radius: 0px 0px 0px 15px;
    -moz-border-radius: 0px 0px 0px 15px;
    border-radius: 0px 0px 0px 15px;
}

/* ==========================================================================
    Leaflet Map Styling
   ========================================================================== */

.map-container { margin: 30px 0px 10px 50px; }
#map-canvas { position: relative; width: 870px; height: 700px; border: solid 2px #c6cad0; border-radius: 10px; z-index: 1;}

.map-content {
  padding-top: 20px;
  margin-top: 10px;
  text-align: justify;
}

.row2 {
  margin-right: -15px;
  margin-left: -15px;
  width: 1100px;
}

.col-xs, .col-md {
  position: relative;
  min-height: 1px;
  float: left;
  /*padding-right: 20px; */
}

.col-xs { width: 25% }
.col-md { width: 75% }

/* ==========================================================================
    Info Window Styling
   ========================================================================== */
#infowindowframe {
    width: 200px;
    padding-bottom: 0px;
    border: solid;
    border-width: 0px;
}
#infowindowtitle {
    text-align: center;
    font-size: 12px;
    color: white;
    font-weight: bold;
    padding: 5px;
}

.legend {
    line-height: 18px;
    color: #555;
}
.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.9;
}