body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9em;
	max-width: 1147px;
	margin: 0 auto;
}

header {
	text-align: center;
  padding: 15px;
  color: black;
  background-color: white;
	
	margin-bottom: 10px;
}

h1{
font-size: 1.9em;
}


h2{
    float: left;
		font-size: 1.25em;
    width: 100%;
	  background-color: #3870bc;
		color:white;
		padding: 7px 0px 7px 0px;  
	  margin-top:0px;
	  text-transform:uppercase;
		text-align: left;
}

h3 {
  color: black;
	font-size: 1.2em;
	text-align: left;
}

.logo {
    float: left;

}

section {
    overflow:auto;
}

.column_one {
    float: left;
    width: 630px;
		margin-top: 5px;
	  background-color: white;
    border-style: solid;
    border-width: 1px;
		margin-right: 5px;
}
.column_two {
    float: left;
    width: 340px;
		margin-top: 5px;
	  background-color: white;
    border-style: solid;
    border-width: 1px;
		margin-right: 5px;
}

.column_three {
    float: left;
    width: 160px;
		margin-top: 5px;
		border-style: solid;
    border-width: 1px;
}

.head{
    text-align: left;
    float: left;
    width: 100%;
	  background-color: #3870bc;
}
.vsebina{

    width: 100%;

}

        .btn_link {
          border: none;
          color: white;
          padding: 10px 10px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 20px;
          margin: 2px 2px;
          cursor: pointer;
          background-color: #008CBA;
        }

  /* SEARCH BAR: */

        .search-container {
            position: relative;
            width: 100%;
			font-size: 22px;
        }
        .search-input {
            width: calc(100% - 130px);
            padding: 10px;
            box-sizing: border-box;
			font-size: 22px;
        }
        .suggestions {
            position: absolute;
            border: 1px solid #ccc;
            border-top: none;
            z-index: 1000;
            background: #fff;
            width: 100%;
            max-height: 250px;
            overflow-y: auto;
        }
        .suggestion {
            padding: 10px;
            cursor: pointer;
        }
        .suggestion:hover {
            background-color: #f0f0f0;
        }
        .search-button {
            padding: 10px 15px;
            cursor: pointer;
			font-size: 22px;
        }


article {

    margin: 5px;
    padding: 10px;
    background-color: white;

}

aside {
    margin: 5px;
    padding: 10px;
    background-color: white;
}

	.search_box {
     float: left;
     width: 100%;
	   padding-top: 7px;
		 padding-bottom: 7px;
	   margin-bottom: 5px;
	   color: #ffffff;
	   background-color:#4d90eb;
	   font-family: Arial, Helvetica, sans-serif;
	   font-size: 20px;
	}

	#search {
	  font-size: 0.9em;
	  width: 160px;
	}
	.img_kamera {
	  height: auto;
	  width: 100%;
	}
	
	
/* SLOVENIJA ZEMLJEVID PO REGIJAH */
.content_box_slo {
		  width: 100%;
		  height: 500px;
		  float: left;
		  background-image:url(image/slo.png);
		  background-repeat:no-repeat;
		  margin-bottom: 10px;
		} 
		
.content_box_jadran {
		  width: 100%;
		  height: 500px;
		  float: left;
		  background-image:url(image/jadran.png);
		  background-repeat:no-repeat;
		  margin-bottom: 10px;
		} 

.map_pomurska  {
       position:relative;
       left:520px;
       top:20px;
	   width: 48px;
	   height: 40px;
	   font-weight:bold;
    }
	  
.map_koroska  {
       position:relative;
       left:300px;
       top:70px;
	   width: 48px;
	   height: 40px;
	   font-weight:bold;
    }  
	
.map_podravska  {
       position:relative;
       left:420px;
       top:60px;
	   width: 48px;
	   height: 40px;
	   font-weight:bold;
    } 
	
.map_gorenjska  {
       position:relative;
       left:80px;
       top:20px;
	   width: 48px;
	   height: 40px;
	   font-weight:bold;
    } 
	
.map_savinjska  {
       position:relative;
       left:320px;
       top:40px;
	   width: 48px;
	   height: 40px;
	   font-weight:bold;
    }
	
.map_osrednja  {
       position:relative;
       left:200px;
       top:20px;
	   width: 48px;
	   height: 40px;
	   font-weight:bold;
    }
	
.map_posavje  {
       position:relative;
       left:380px;
       top:-10px;
	   width: 48px;
	   height: 40px;
	   font-weight:bold;
    }
	
	
.map_gorisko  {
       position:relative;
       left:50px;
       top:0px;
	   width: 48px;
	   height: 40px;
	   font-weight:bold;
    }
	
.map_notranjska  {
       position:relative;
       left:140px;
       top:-20px;
	   width: 48px;
	   height: 40px;
	   font-weight:bold;
    }
	
	
.map_dolenjska  {
       position:relative;
       left:300px;
       top:-40px;
	   width: 48px;
	   height: 40px;
	   font-weight:bold;
    }
	
.map_primorska  {
       position:relative;
       left:50px;
       top:-20px;
	   width: 48px;
	   height: 40px;
	   font-weight:bold;
    }
	
.map_temp  {
	   text-align:center;
	   width: 50px;
	   height:21px;
	   font-size: 12px;
	   color: #ffffff;
	   background:url(image/temp_map.png);
    } 

.map_koper  {
       position:relative;
       left:120px;
       top:-5px;
	   width: 48px;
	   height: 40px;
	   font-weight:bold;
    }
.map_venice  {
       position:relative;
       left:10px;
       top:-15px;
	   width: 48px;
	   height: 40px;
	   font-weight:bold;
    }	

.map_rijeka  {
       position:relative;
       left:170px;
       top:-40px;
	   width: 48px;
	   height: 40px;
	   font-weight:bold;
    }	
	
.map_rovinj {
       position:relative;
       left:90px;
       top:-65px;
	   width: 48px;
	   height: 40px;
	   font-weight:bold;
    }		
	
.map_pula {
       position:relative;
       left:120px;
       top:-50px;
	   width: 48px;
	   height: 40px;
	   font-weight:bold;
    }	
	
.map_senj {
       position:relative;
       left:220px;
       top:-110px;
	   width: 48px;
	   height: 40px;
	   font-weight:bold;
    }	
	
.map_mlosinj {
       position:relative;
       left:175px;
       top:-110px;
	   width: 48px;
	   height: 40px;
	   font-weight:bold;
    }	
	
.map_cervia {
       position:relative;
       left:10px;
       top:-110px;
	   width: 48px;
	   height: 40px;
	   font-weight:bold;
    }
	
.map_zadar {
       position:relative;
       left:215px;
       top:-150px;
	   width: 48px;
	   height: 40px;
	   font-weight:bold;
    }	
	
.map_sibenik {
       position:relative;
       left:270px;
       top:-145px;
	   width: 48px;
	   height: 40px;
	   font-weight:bold;
    }	
	
.map_split {
       position:relative;
       left:325px;
       top:-165px;
	   width: 48px;
	   height: 40px;
	   font-weight:bold;
    }	

.map_makarska {
       position:relative;
       left:380px;
       top:-170px;
	   width: 48px;
	   height: 40px;
	   font-weight:bold;
    }	
	
.map_pascara {
       position:relative;
       left:140px;
       top:-140px;
	   width: 48px;
	   height: 40px;
	   font-weight:bold;
    }	
	
.map_dubrovnik {
       position:relative;
       left:470px;
       top:-180px;
	   width: 48px;
	   height: 40px;
	   font-weight:bold;
    }		
	
.map_bar {
       position:relative;
       left:540px;
       top:-175px;
	   width: 48px;
	   height: 40px;
	   font-weight:bold;
    }				
		
		
		
a.tip {
	position: relative;
}

a.tip span {
	display: none;
	position: absolute;
	top: 50px;
	left: -50px;
	width: 175px;
	padding: 5px;
	z-index: 100;
	background: #3c3c3c;
	color: #fff;
	border-radius: 5px;
	-moz-border-radius: 5px; /* this works only in camino/firefox */
	-webkit-border-radius: 5px; /* this is just for Safari */
}

a:hover.tip {
	font-size: 99%; /* this is just for IE */
}

a:hover.tip span {
	display: block;
}		
		
/* 5 dnevna napoved */
		
.vreme_5_dni  {
    width: 100%;
		text-align: center;
	    } 		
.vreme_meni  {
    width: 19.3%;
		float: left;
		margin:0.1em;
		padding-bottom:2px;
		padding-top:4px;
		background-color:#4d90eb;
		color: white;
		border-radius: 7px;
   -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
	    } 

.vreme_meni_teden  {
    font-size: 1.4em;
	    }
			
.vreme_meni_dan  {
    font-size: 1.2em;
	    }
	
.vreme_meni_temperature  {
    font-size: 1.6em;
	    }
	
.vreme_meni_veter_hitrost {
    font-size: 0.8em;
	    }	

.vreme_meni_image {
    margin: 0.3em;
	    }
			
.vreme_meni_veter_icon {
    margin: 0.3em;
	    }
			
.vir  {
    width: 100%;
		float: left;
		margin:2px;
		text-align: left;
	    }
	
.vreme_radar_kamera  {
    max-width: 300px;
		float: left;
		text-align: center;
		margin:2px;
		padding: 1px;
	    }

.content_box {
	  float: left;
	  margin-bottom: 10px;
		width: 100%;
	}	
.vreme_meni_danes {
	   text-align:center;
	   float: left;
     height: auto;
     width: 100%;
	   color: #ffffff;
	   background-color:#4d90eb;
	   font-size: 16px;
    }	

.vreme_meni_danes_ura_tekst {
     font-size: 12px;
	   font-weight: bold;
	   height: 15px;
     width: 100%;
	   padding-top: 3px;
     border-top-style:solid;
     border-width:1px;
	  }
	
    .vreme_table_ura_tekst {
	    float: left;
	    width: 11%;
		height: 14px;
		border-right-style:dotted;
        border-width:1px;

	}
	
	.vreme_table_napoved_tekst {
	    float: left;
	    width: 14%;
		height: 14px;
		border-right-style:dotted;
        border-width:1px;
	}
	
	.vreme_table_temperatura_tekst {
	    float: left;
	    width: 19%;
		height: 14px;
		border-right-style:dotted;
        border-width:1px;
	}
	
	.vreme_table_padavine_tekst {
	    float: left;
	    width: 14%;
		height: 14px;
		border-right-style:dotted;
        border-width:1px;
	}	


	.vreme_table_veter_tekst{
	    float: left;
	    width: 19%;
		height: 14px;
		border-right-style:dotted;
        border-width:1px;
	}	

	.vreme_table_tlak_tekst {
	    float: left;
	    width: 18%;
	}
	
	.vreme_table_ura {
	    float: left;
	    width: 11%;
		height: 40px;
		font-size: 16px;
		border-right-style:dotted;
        border-width:1px;
	}
	
	.vreme_table_napoved {
	    float: left;
	    width: 14%;
		height: 40px;
		border-right-style:dotted;
        border-width:1px;
	}
	
	.vreme_table_temperatura {
	    float: left;
	    width: 19%;
		height: 40px;
		border-right-style:dotted;
        border-width:1px;
	}
	
	.vreme_table_padavine {
	    float: left;
	    width: 14%;
		height: 40px;
		border-right-style:dotted;
        border-width:1px;
	}	

	.vreme_table_veter_icon {
	    float: left;
	    width: 5%;
	}	

	.vreme_table_veter{
	    float: left;
	    width: 14%;
		height: 42px;
		border-right-style:dotted;
        border-width:1px;

	}	

	.vreme_table_tlak {
	    float: left;
	    width: 18%;
	}
	
	
.vreme_meni_danes_ura {
       height: 42px;
       width: 100%;
	   font-size: 20px;
	   padding-top: 3px;
       border-top-style:solid;
       border-width:1px;

    } 	
	
/* MENU */

nav { 
	margin:0;
	padding: 0;
	background-color: #254441;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #3870bc;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 17px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 8px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #84a7d7;
  color: white;
}

.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}

.dropdown:hover .dropdown-content {
    display: block;
}

@media screen and (max-width: 1000px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

/* FOOTER */
footer {
	text-align: center;
    padding: 5px;
    color: white;
    background-color: #3870bc;
}


/* MOBILE */

@media screen and (max-width: 1160px) {
body {
	max-width: 980px;
	  font-size: 1.2em;
}
.column_three {	
display:none;
}
.column_two {
		margin-right: 0px;
}
}	

@media screen and (max-width: 1000px) {
body {
	max-width: 642px;
}
header {
	font-size: 2.8vmin;
	padding:0px;
}
.logo {
    float: none;

}
.column_two {
    width:100%;
		margin: 0px;
}
.column_one {
    width:100%;
		margin-right: 0px;
		font-size: 2.9vmin;
}	
.content_box_slo {	
display: none !important;
}

.search_box {
   font-size: 4vmin;
}

section {
    padding:2px;
}
  .vreme_meni_teden  {
    font-size: 3.5vmin;
  }
  .vreme_meni_danes_ura_tekst {
    font-size: 2vmin;
  }
	
  .vreme_table_ura_tekst {
    font-size: 2vmin;
  }

  .vreme_table_napoved_tekst {
    font-size: 2vmin;
  }
	
  .vreme_table_temperatura_tekst {
    font-size: 2vmin;
  }
	
  .vreme_table_padavine_tekst {
    font-size: 2vmin;
  }	


  .vreme_table_veter_tekst{
    font-size: 2vmin;
  }	

  .vreme_table_tlak_tekst {
    font-size: 2vmin;
  }

	
	.vreme_meni_danes_ura{
	height: 3vmax;
	
	}
	.vreme_table_ura {
   font-size: 1.7vmin;
	 height:100%;
	}
	
	.vreme_table_napoved {
		height: 100%;		
	}	
	
	.vreme_table_temperatura {
	 font-size: 2.8vmin;
	 height:100%;
	}
	
	.vreme_table_padavine {
	 font-size: 2.4vmin;
	 height:100%;
	}	

	.vreme_table_veter{
	  font-size: 2.4vmin;
		height:100%;

	}	

	.vreme_table_tlak {
	  font-size: 2.4vmin;
		height:100%;
	}
	
	.img_day_wind {
	  width:80%;
    height:auto;
	}

	.img_day_weather {
	  width:auto;
    height:100%;
	}	
	
}