* {
	margin:0;
	padding:0;
	}

html{
	height:100%;
	}

body {	
	margin: 0;
	font-size: 16px;
	letter-spacing: 0.2px;	 
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
	}
	
	
	
										/* navigacija */
		.topnav {
		  width:100%; 
		  overflow: hidden;
		  background-color: #fff;
		  box-shadow:0 0 25px #888;
		  z-index:2;
		}

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

		.topnav a:hover {
		  background-color: #0066aa;
		  color: #fff;
		}

		.topnav .icon {
		  display: none;
		}

		@media screen and (max-width: 600px) {
		  .topnav a:not(:first-child) {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;
		  }
		}

/* okvir diva sadržaj */

#sadrzaj_index{
	min-height:600px;
	padding:60px 5%;
}

#sadrzaj_index h3{
	color:#0066ff;
	text-align:center;
	font-weight:900;
}

#sadrzaj_sql{
	min-height:600px;
	padding:80px 20px 20px 0;	
}

.sadrzaj_right {
  float:right;
  width: 74%;
  padding: 0 3%;
}

						/* lijevi meni */

						.vertical-menu {
						  position:fixed;
						  float:left;
						  width: 20%;
						}

						.vertical-menu a {
						  background-color: #0066aa;
						  color: white;
						  display: block;
						  padding: 12px;
						  margin:2px 0;
						  text-decoration: none;
						}

						.vertical-menu a:hover {
						  background-color: #000033;
						  color:white;
						}
						

.naslov{
	width:40%;
	font-size:30px;
	float:left;
	color:#0066ff;
	font-weight:900;
}

.button_dalje{
	width:200px;	
	float:right;
    padding: 10px 10px;	
	background-color: #00dd00; 
	font-weight:800;	
	color:#fff;
	border:1px solid #999;
	border-radius:4px;
    box-shadow:5px 5px 20px #222; 	
}

.button_dalje:hover{
	background:#008800;
    box-shadow:0 0 5px #222; 		
}

.button_uredi{
	width:200px;
	float:right;
    padding: 10px 10px;	
	background-color:orange; 
	font-weight:800;
	color:#fff;
	border:1px solid #999;
	border-radius:4px;
    box-shadow:5px 5px 20px #222; 	
}

.button_uredi:hover{
	background:#880000;
	border:1px solid #999;
	border-radius:8px;	
    box-shadow:0 0 5px #222; 		
}

.button_odustani{
	width:200px;
	float:right;
    padding: 10px 10px;	
	background-color:red; 
	font-weight:800;
	color:#fff;
	border:1px solid #999;
	border-radius:4px;
    box-shadow:5px 5px 20px #222; 	
}

.button_odustani:hover{
	background:#880000;
	border:1px solid #999;
	border-radius:8px;	
    box-shadow:0 0 5px #222; 		
}
	

h1{
	text-align:center;
}

footer{
	background:#000030;
	color:white;
	padding:10px;
}

footer h2{
	text-align:center;
	font-size:30px;
}

.respon_33{
	width:33.3%;
	float:left;
}

@media only screen and (max-width: 900px) {
  .respon_33 {
    width:100%;
  }
}

.unutarnji{
	text-align:center;
	width:300px;
	min-height:280px;
	margin:25px auto;
	padding:10px;
}

@media only screen and (max-width: 900px) {
  .unutarnji {
    width:90%;
	min-height:250px;	
  }
}


.button_unutarnji {
  background-color: #000030; 
  border:1px solid #666;
  color: white;
  padding: 8px 20px;
  text-align: center;
  font-size: 16px;
  font-weight:900;
  box-shadow:0 2px 5px #666; 
  border-radius:8px;  
  
}
.button_unutarnji:hover{
	background-color: #800000; 
	color:#fff;
    box-shadow:5px 5px 20px #222; 	
}




table {
  border-collapse: collapse;
  width: 100%;
  margin:20px auto;
}

td, th {
  border: 1px solid #dddddd;
  text-align: center;
  padding: 8px;
}
th{
	background:#000044;
	color:#fff;
}

tr:nth-child(even){
	background-color: #f2f2f2;
	}

tr:hover {
	background-color:#99ccff;
}

form{
	width:60%;
	background:#eeeeee;
	border:1px solid #999;
	border-radius:10px;
	box-shadow:5px 5px 25px #666;
	margin:20px auto;
	padding:30px;
}

label{
	*padding-top:50px;
}

input{
	padding:5px;
	width:96%;	
	margin-bottom:10px;
}

input[type=submit]{
	background:#3388ff;
	color:#fff;
	padding:8px;
	border-radius:5px;
	font-weight:700;
    box-shadow:5px 5px 20px #222; 	
}

input[type=submit]:hover{
	background:#0044ff;
	color:#fff;
	padding:8px;
	border-radius:5px;
	font-weight:700;
    box-shadow: 0 0 5px #222; 	
}

select{
	padding:5px;
	width:100%;
	margin-bottom:10px;
}

		/* div koji glumi polje input u obrazcu prkaz */

		.div_input{
			width:96%;
			min-height:20px;
			background:#ffffdd;
			padding:5px;
			margin-bottom:10px;
			border:1px solid #666;
			border-radius:4px;
		}
		
.respon_50{
	width:47%;
	margin-right:2%;
	float:left;
}

@media only screen and (max-width: 900px) {
  .respon_50 {
    width:100%;
  }
}	


/* kartica index */	

					.card {
					  float:left;
					  width: 23%;
					  min-height:290px;
					  margin:1%;
					  text-align: center;
					  padding-bottom:10px;
					  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); 
					  opacity:1;  
					}

					.card h2{
						color:#555;
						font-size:16px;
						font-weight:800;
						margin:2px 5px;
					}

					.card p{
						color:#555;    
						font-size:13px;
						margin:5px;
					}


					.card:hover {	
					  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
					  opacity:0.6;
					}

					@media screen and (max-width: 800px) {
					  .card{
						width: 94%;
						margin:0 3% 20px 3%;
					  }
					}

					.respon_50{
					  float:left;
					  width:48%;
					  margin:10px 1%;
					}	

					@media screen and (max-width: 800px) {
					  .respon_50 {
						width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
					  }
					}	
	
	
	#clanak{
		color:#666;
		margin:5px 5px;
	}
	
	#clanak span {
		font-size:16px;		
	}
	
	#clanak p {
		font-size:16px;		
	}
	
	
	
/*	Članak glavna slika članka */
	
			.container {
				position: relative;
				margin: 0 auto;  
				z-index: -1;
			}
			
			.container_naslov {
				text-decoration: none;		
				color:#666;
				font-size:14pt;
				margin:0;
				padding:10px;
				font-weight:300;    
				vertical-align: middle;	
				background-color: #f9f6fe; 
			}			

			.container img{
				width:100%;
			}
			
			.container .content {
			  position: absolute;
			  bottom:4px;
			  background: rgb(0, 0, 0); /* Fallback color */
			  background: rgba(0, 10, 10, 0.5); /* Black background with 0.5 opacity */
			  color: #ddd;
			  width: 100%;
			  font-size:18px;
			  padding: 10px 20px;
			}
			
			.container .content h1, h2, h3,h4,h5{
				color:#999;
			}	

				.container .content h1{
					color:#fff;
					font-weight:100;
				}

					@media screen and (max-width: 800px) {
					  .container .content h1{
					   font-size:4vw;
						margin-bottom:5px;
					  }
					}	
					

							.sadrzaj{
								padding:10px;
							}
					
								.sadrzaj table {
								  border-collapse: collapse;
								  width: 100%;
								}

								.sadrzaj td, .sadrzaj th {
								  border: 1px solid #999;
								  padding:10px;
								}

								.sadrzaj tr:hover {background-color: #ddd;}

								.sadrzaj th {
								  padding-top: 12px;
								  padding-bottom: 12px;
								  text-align: left;
								  background-color: #4CAF50;
								  color: white;
								}

	
				/* index okviri u stupcima članci i novosti  */	
	
				div.gallery {                  
					min-height:10px;
					margin:1% 0;
					padding:2px 10px;  
				}

					div.gallery:hover {
						box-shadow: 0 0 10px #ccc;
					}					

					div.gallery img {
						max-width: 100%;						
						height:auto;					
						box-shadow: 8px -2px 13px -8px #aaa;
					}					
					
					div.index_img_clanak {
						float:left;
						max-width: 20%;						
						height:auto;					
						box-shadow: 8px -2px 13px -8px #aaa;
					}										

					div.desc_clanak {       
						float:left;
						max-width: 76%;	
						padding:0 1% 0 3%;
						vertical-align: middle;	
					}

					div.desc_clanak h4{
							text-decoration: none;		
							color:#666;
							font-size:11pt;
							margin:0; 
							font-weight:200;
							vertical-align: middle;	
						}
						
					div.index_img_vijest {
						float:left;
						max-width: 35%;						
						height:auto;					
						box-shadow: 8px -2px 13px -8px #aaa;
					}						

					div.desc_vijesti {
						float:left;
						max-width: 65%;	
						padding:0 1% 0 3%;
						vertical-align: middle;	
						font-size:10pt;
						
					}
					
					div.desc_vijesti_desno {
						float:right;
						max-width: 65%;	
						padding:0 1% 0 3%;
						vertical-align: middle;	
						font-size:10pt;
						
					}					
					
					.desc_vijesti p{
						font-weight:900;
						color:#111;	
					}					
						
					div.desc_vijesti h4{
							text-decoration: none;		
							color:#666;
							font-size:9pt;
							margin:0; 	
							font-weight:200;
						}