@charset "utf-8";
body,html  {
	font-family: Verdana;
	font-size:12px;
	background: #ffffff;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	width:1000px;
	text-decoration: none;
}
img {vertical-align: middle}

#container{
margin: 0 auto;}

.clearboth {clear:both;}

.fonts { font-family:Arial;	font-weight:bold;color:#3381a5; font-size:12px; margin-left:5px;}
.fontsyoutube { font-family:Arial;	font-weight:bold;color:#3381a5; font-size:12px; margin-left:20px;}
#youtube {margin:10px 100px;}

.drop_cap {background:url(../images/old_paper.jpg) no-repeat; width:290px; height:248px;padding:5px 20px;}
.drop_cap  .in{ width:290px; height:248px; text-align:left;font-style:italic;  font-size:11px;}

.t {
	font:70px/50px Georgia, "Times New Roman", Times, serif;
	color: white;
	background: #dcca9a;
	border: 1px solid #BDB76B;
	padding: 5px 5px 2px 4px;
	margin-right: 5px;
	margin-top: 18px;
	float: left;
}
.naslov-text{
	float:left;
	color:#646464; 
	margin:5px 0px 0px 18px;
	font-family:Arial;
	font-weight:bold;
}

.naslov-text img{
	margin:0px 5px 0px 18px;
	vertical-align: middle;
}
.ram-text {
	float:left;
	color:#646464; 
	margin:3px 0px 0px 18px;
	font-family:Arial;
	font-weight:bold;
}
.ram-slika {
	background:url(../images/ram.jpg) left top no-repeat; 
	width:234px; 
	height:165px; 
	padding-top:13px; 
	float:left;
	border-width:0px;
}
.ram-slika a img{border-style:none; border-width:0px;}
.ram-slika a:hover img{border-style:none; border-width:0px;}
.ram-slika a:visited img{border-style:none; border-width:0px;}

.dropshadow{
	float:left;
	background: url(../images/shadow.gif) no-repeat bottom right;
	margin: 10px 0 10px 10px !important;
	margin: 10px 0 10px 5px;
}
.dropshadow p{
	position:relative;
	bottom:8px;
	right: 8px;
	border: 1px solid #e6e6e6;
	padding:8px;
	font-size:12px;
	margin: 6px;
	text-align: justify;
	font-family:Verdana;
	font-size:11px;
	color:#646464;
}
.dropshadow p img {vertical-align: middle}
.dropshadow p a{color:#b71616; text-decoration:none;font-weight:bold;}
.dropshadow p a:hover{color:#646464;text-decoration:underline;font-weight:bold;}
.dropshadow p a:visited{color:#b71616;text-decoration:none;font-weight:bold;}

#header {
	color:#6f0f0f;
	font-weight:bold;
	margin:0% 20%;
}
/*TABELA HEADER*/
#table_header { background:#ffffff;}
#table_header tr {
background-color:#ffffff;
color:#000000;
}
#table_header tr:hover td{
background-color:#ffffff;
color:#000000;
}
#table_header tr:hover {
background-color:#ffffff;
color:#000000;
}

#mainContent {
	width:1000px;
	margin:0% 15%;
}

#sidebar1 {
	float:left;
	width:35%;
	background:url(../images/krst.jpg) 50% 2% no-repeat;
	margin-bottom:0px;
}
/* slika na uglu  gore levo */
#gore_levo {position:relative;
left:0px;
top:0px;
z-index:0;
float:left;}
img.gore_levo
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
/* slika na uglu  dole levo */
#dole_levo {position:relative;
left:0px;
bottom:150px;
z-index:0;
float:left;}
/*#######################################################################################*/
#sidebar2 {
	float:right;
	width:64%;
	margin-top:-230px;
	margin-bottom:0px;
}
/* slika na uglu  gore desno */
#gore_desno {position:relative; 
top:0px; 
right:0px; 
float:right;
z-index:0}
/* slika na uglu  dole desno */
#dole_desno {position:relative; 
bottom:150px;
right:0px; 
float:right;
z-index:0}

/*ovaj deo koda se odnosi na POPUP prozore*/
.demoPopup {
 border: solid 1px #333;
 font-family: Tahoma;
 font-size: 12px;
 display: none;
 position: absolute;
 width: 600px;
 z-index: 60;
 background: #ddd;
}

.demoPopuptitle {
 background: #999999;
 color: white;
 font-weight: bold;
 height: 15px;
 padding: 5px;
 border-bottom: solid 1px #333;
}

.demoPopupbody {
 background: #ddd url(papir.jpg) 50% 50% no-repeat;
 padding: 5px;
 text-align: justify;
 width:590px;
 height:auto;
 height:500px !important;
 overflow: auto;
 margin:0px auto;
}
.title {float:left; margin:0px; padding:0px;  width:550px;}
.close{float:right; margin:-5px 0px 0px 0px; padding:0px;  width:20px}
#demoPopup1 {
 top: 100px;
 left: 50px;
}

#demoPopup2 {
 top: 100px;
 left: 400px;
}

.i {
font:70px/50px Georgia, "Times New Roman", Times, serif;
color: #ffffff;
background: #942525;
border: 1px solid #003300;
padding: 5px 5px 2px 4px;
margin-right: 5px;
margin-top: 2px;
float: left;
}
.p {
font:70px/50px Georgia, "Times New Roman", Times, serif;
color: #ffffff;
background: #942525;
border: 1px solid #003300;
padding: 5px 5px 2px 4px;
margin-right: 5px;
margin-top: 2px;
float: left;
}
/*VIDEO ZAPIS*/
table {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}
td {
padding:2px 10px 2px 10px;
}
tr:hover td{
background-color:#999999;
color:#ffffff;
}
tr:hover td a.video{color:#000000; text-decoration:none;font-weight:bold;}
tr:hover td a.video:hover {color:#ffffff;text-decoration:none;font-weight:bold;}
tr:hover td a.video:visited {color:#000000;text-decoration:none;font-weight:bold;}

/*Animacija slike MAPA GODOVIKA*/
.thumbnail{
position: relative;
z-index: 100;
}

.thumbnail:hover{
background-color: transparent;
z-index: 100;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
display:block;
background-color: lightyellow;
padding: 5px;
border: 1px solid gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
border-style:none;
}

.thumbnail:hover span  { /*CSS for enlarged image on hover*/
visibility: visible;
display: block;
top: -50px;
left: 40px; /*position where enlarged image should offset horizontally */
}
.thumbnail:hover span  { /*CSS for enlarged image on hover*/
visibility: visible;
display: block;
top: -50px;
left: 40px; /*position where enlarged image should offset horizontally */
}

.mapa {
border-width: 0;
border-style:none;
}


/*#######################################################################################*/
#footer {width:100%; margin:0% 15%}
#autor{background:url(../images/autor.jpg) no-repeat; }
#telefon{background:url(../images/telefon.jpg) no-repeat; }