
<style type="text/css">
		  
		  
/*CSS Style*/

.cursor {
	cursor: pointer;
	}


iframe {
position:static;
width:850px;
height:750px;
z-index: 5;
}
	
		
 td a:hover {
	text-decoration: underline !important;
}
	
dt {
color: blue;
font-size: 20px;
}

  
#amblem {
	padding-top: 10px;
	padding-left: 17px ;
	padding-right: 17px;
	padding-bottom: 25px;
	text-align: center ;
	}
   
    #amblem a:link, a:visited {
	text-decoration: none ;	
    }


.o_trnju {
	font-size: 1.2em;
	font-family: impact, arial ;
	background-color: none;
	text-decoration: none;
	margin-bottom: -5px;
	}
 	   
  .o_trnju a:active, a:focus {
	background-color:  #ffcccc;
    } 
  
    .o_trnju_on {
	background-color: #F0F0F0;
	border-color: #696969;
	}
	
    .o_trnju_out {
    text-decoration: none;
   }
  
  
.trnje_uvod  { 
	position: absolute; 
	top: 16px !important;
	top: 24px;
	margin-left: -4px ;
	z-index: 2; 
	border: none;
   }
  
.srednji {
	text-align: justify;
	padding-left: 15px;
	padding-right: 15px ; 
	padding-top: 25px ;
	border: 1px #cccccc solid ;
	
	}

   
	.srednji img {
	border: none; 
	}
	
	.srednji p a:link {
	text-decoration: none;
	color: #6495ED !important;
	}
	
	.srednji a {
	color: #6495ED;
	}
	
	.srednji p a:hover{
	text-decoration: underline !important;
	font-weight: bold;
	color: #6495ED; 
	}

.srednjisx {
position: static;
}

.srednjisx a:link {
text-decoration: none;
}

.srednjisx a:hover {
text-decoration: underline !important;
	font-weight: bold;
	color: #6495ED; 
}


.sx {
margin: 0px 5px 10px 5px;
padding: 10px 12px;
height: auto;
width: 270px;
border: none;
background-color: #F0F0F0;
}
	
	
ul {
	font: 0.8em arial;
	line-height: 1.5em;
	}
	
	ul a:link {
	color: #6495ED ;
	text-decoration: none !important;
	}
	
	ul a:hover {
	font-weight: bold;
	color: #6495ED;
	text-decoration: underline !important;
	}


h3, h3 a {
	font: 500 1.2em arial;
	margin-bottom: 7px;
	color: #6495ED ;
	padding-top: 3px;
	padding-left: 5px;
	line-height: 1.3em;
	}
	
	h3 a:link {
	text-decoration: none;
	}
	
	h3 a:hover {
	text-decoration: underline;
	font-weight: bold ;
	}

 h2, h2 a {
	font: arial;
	color: #6495ED;
	margin-bottom: 7px;
	}

	h3 a:link {
	text-decoration: none;
	}
	
	h3 a:hover {
	text-decoration: underline;
	font-weight: bold ;
	}

	
#arhiva {
color: #6495ED;
font-weight: bold;
margin-right: 475px;
}

	
.arhiv {
color: #6495ED;
font-weight: bold;
margin-right: 475px;
margin-top: 2%;
}

	
 .lijevi {
    text-align: center ;
	padding-left: 5px ;
	padding-top: 7px;
	padding-bottom: 7px ; 
	border-right: 1px #E8E8E8 solid;
	border-bottom: 2px solid #E8E8E8;
	}
		
   .lijevi a:link {
   text-decoration: none;
	}
	
	.lijevi a:hover {
	border-color: #696969;
	text-decoration: underline ;
	}
    .lijevi a:visited {
	text-decoration: none;
	}
 
   .lijevi a:active, a:focus {
	background-color: #ffcccc ;
	padding: auto;
	}
 
 .back {
    background-color: #F0F0F0;
	font-weight: bold;
	letter-spacing: 0.05em ;
	padding-left: 5px ;
	padding-top: 7px;
	padding-bottom: 7px ; 
	border-bottom: 2px solid;
	border-right: 1px #E8E8E8 solid;
	border-color: #696969;
	text-align: center;
	}
 
.lijevi_zadnji {
	position: static ;
	border: 0px ;
	visibility: hidden ;
	} 

 
.desni {
    position: static;
    width: 156px !important;
	text-align: center;
	border-right: 1px ;
	border-left: 2px #E8E8E8 solid;
	border-bottom: 2px  #E8E8E8 solid;
	padding-top: 7px;
	padding-bottom: 9px ;
	}
	
	.desni a:link {
   text-decoration: none;
	}
	.desni a:hover {
	border-color: #696969;
	text-decoration: underline ;
	}
    .desni a:visited {
	text-decoration: none;
	}
   .desni a:active, a:focus {
	background-color: #ffcccc ;
	padding: auto;	
	}
 
 
.back2 {
    width: 155px !important;
	background-color: #F0F0F0;
	font-weight: bold;
	padding-top: 7px;
	padding-bottom: 9px ;
	border-bottom: 2px solid;
	border-left: 2px gray solid;
	border-color: #696969;
	text-align: center;	
	text-decoration: underline !important;
	text-decoration: underline;
	}
 
 
.back3 {
    background-color: #FFC1C1;
	padding-left: 5px ;
	padding-top: 7px;
	padding-bottom: 7px ; 
	border-bottom: 2px solid;
	border-right: 1px #E8E8E8 solid;
	border-color: #696969;
	text-align: center;
	}
	
#desni_kontakt  a:link, a:visited {
	text-decoration: none;
	}
  
    #desni_kontakt a:hover {
	background-color: #ccccff;
	font-weight: bold;
	letter-spacing: 0.05em ;
	}
 
    #desni_kontakt a:active, a:focus {
	background-color: none;
	background: #ffcccc ;
}
	 
.prazni  {
   	border-top: 0px;
	border-bottom: 0px;
	border-left: 0px;
	border-right: 0px;
	border-color: white;
    }
  
	
	


/* MENI*//*MENI*//*MENI*//*MENI*//*MENI*/

#meni {
font-size: 15px;
margin:10px -5px 5px -3px; 

}

#meni ul {
			margin: 0; 
			padding: 0;			
			list-style: none; 
			position: relative; width: 150px; 
			background:#F0F8FF;
					    
		}
		
		/* secondary menu color */
		#meni ul ul { background: #dde; }
		
		/* tertiary menu color */
		#meni ul ul ul { background: #ffe; }
		
		
		/* make  LI and A block so fill width 100% */
		#meni ul li, #meni ul a { display: block; } 
		
		/* Just put border on LI to make grid */
		#meni ul li { border: 1px solid #888; }
		
		#meni a { text-decoration: none; padding: 2px; }
		
		/* hide the nested menus just push out of sight to hide */
		#meni li ul {
			position: absolute;
			left: -999em;
			margin-left: 140px;
			margin-top: -1.6em;
		}
		
		#meni li ul ul {
			left: -999em;
		}
		
		#meni li:hover, 
		#meni li.sfhover {
			background: #dde;;
		}
		
		#meni li a:link,
		#meni li a:visited {
			display: block;	
			width: 140px;
			color: cornflowerblue;
			background-color: transparent !important;	
		}
		
		#meni li a:hover,
		#meni li a.sfhover,
		#meni li a:active {
			color: cornflowerblue; 	/* current link glow */	
						}
		
		#meni li:hover ul ul, 
		#meni li:hover ul ul ul, 
		#meni li.sfhover ul ul, 
		#meni li.sfhover ul ul ul {
			left: -999em;	/* drop sibling's childs back */ 
			background-color:#F0F8FF;
		}
		
		#meni li:hover ul, 
		#meni li li:hover ul, 
		#meni li li li:hover ul, 
		#meni li.sfhover ul, 
		#meni li li.sfhover ul, 
		#meni li li li.sfhover ul {
			left: auto; /* lists nested under hovered list items */	
		    background-color:#F0F8FF;
		}
  
	
	

    
.foo {
	 background-color: #F0F5F0;
	 border-color: #696969;
	 border-bottom: 2px solid;
     font-weight: bold;	 
	 	 }
   
    .foo a:link { 
     text-decoration: none ;
	 color: #6495ED !important;
	}
	
	    
.footer {
	color: #6495ED !important;
	text-decoration: none ;
	}

	.footer a:link {
	 text-decoration: none;
	 color: #6495ED;
	}
	
.arhfoot {
    text-decoration: none ;
	position: absolute;
	bottom: 0;
	left: 500px;
	
	}

	.arhfoot a:link {
	text-decoration: none;
	 color: #6495ED;
	
	}

	
  
#kvartovi{
position: absolute; 
margin-top: 20px;
}

#kvartoviposition {
position: relative; 
margin-left: 10px;
}

#kvartovilinks {
margin-top: -10px;
margin-left: -15px;

}

#kvartovilinks a {
color: #6495ED;
}
#kvartovilinks a:hover {
font-weight: normal;
}


  
 .crveni {
	border: 3px outset red;
	width: auto;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 7px;
	padding-bottom: 7px;
	font: 1em arial;
	line-height: 1.5em;
	}  


	
.tekst {
	font: 14px arial, verdana ;
	line-height: 1.5em;
}

   .tekst a {
	color: #6495ED;
	}

   .tekst a:link {
	text-decoration: none;
	color: #6495ED !important;
	}
	
   .tekst a:hover{
	text-decoration: underline !important;
	font-weight: bold;
	color: #6495ED; 
	}
	
	
.iscrt {
cursor: help; 
border-bottom: 1px dotted blue;
}  

.iscrtdash {
border-style: none none dashed none;
border-width: thin; 
padding-bottom: 3px; 
border-color: silver;
}


.imgtipiz:hover {  position: relative;  }
.imgtipiz:hover .imgtip {
  position: absolute;
  left: 0;
  top: 2.2em;
  width: 150px;
  height: 126px;
  background: url(http://i247.photobucket.com/albums/gg135/Trnje/Dogadjaji-aktivnosti-programi/zaszdrv.jpg); }
* { line-height: 1.2; }

.imgtipiz:hover .imgtip2 {
  position: absolute;
  left: 0;
  top: 1.2em;
  width: 200px;
  height: 126px;
  background: url(http://i247.photobucket.com/albums/gg135/Trnje/kartice/bicikl.jpg); }
* { line-height: 1.2; }

.imgtipiz:hover .imgtip3 {
  position: absolute;
  left: 0;
  top: 1.2em;
  width: 170px;
  height: 200px;
  background: url(http://i247.photobucket.com/albums/gg135/Trnje/arhiva/danvode.jpg); }
* { line-height: 1.2; }

.imgtipiz:hover .imgtip4 {
  position: absolute;
  left: 0;
  top: 1.2em;
  width: 200px;
  height: 140px;
  background: url(http://i247.photobucket.com/albums/gg135/Trnje/Danas/P1000480.jpg); }
* { line-height: 1.2; }

.imgtipiz:hover .imgtip5 {
  position: absolute;
  left: 0;
  top: 1.2em;
  width: 200px;
  height: 100px;
  background: url(http://i247.photobucket.com/albums/gg135/Trnje/arhiva/srce.jpg); }
* { line-height: 1.2; }

.imgtipiz:hover .imgtip6 {
  position: absolute;
  left: 0;
  top: 1.2em;
  width: 250px;
  height: 200px;
  background: url(http://i247.photobucket.com/albums/gg135/Trnje/Kultura/clanci/knjiznica.jpg); }
* { line-height: 1.2; }

.imgtipiz:hover .imgtip7 {
  position: absolute;
  left: 0;
  top: 1.2em;
  width: 200px;
  height: 140px;
  background: url(http://i247.photobucket.com/albums/gg135/Trnje/Dogadjaji-aktivnosti-programi/braniteljizagreba.jpg); }
* { line-height: 1.2; }

.imgtipiz:hover .imgtip8{
  position: absolute;
  left: 0;
  top: 1.2em;
  width: 200px;
  height: 75px;
  background: url(http://i247.photobucket.com/albums/gg135/Trnje/Dogadjaji-aktivnosti-programi/daniZagreba.jpg); }
* { line-height: 1.2; }

.imgtipiz:hover .imgtip9{
  position: absolute;
  left: 0;
  top: 1.2em;
  width: 55px;
  height: 75px;
  background: url(http://i247.photobucket.com/albums/gg135/Trnje/Danas/milan.jpg); }
* { line-height: 1.2; }

.imgtipiz:hover .imgtip10{
  position: absolute;
  left: 0;
  top: 1.2em;
  width:85px;
  height: 120px;
  background: url(http://i247.photobucket.com/albums/gg135/Trnje/Danas/amiko.jpg); }
* { line-height: 1.2; }

.imgtipiz:hover .imgtip11{
  position: absolute;
  left: 0;
  top: 1.2em;
  width:950px;
  height: 650px;
  background: url(http://i247.photobucket.com/albums/gg135/Trnje/Danas/pianoman.jpg); }
* { line-height: 1.2; }

.imgtipiz:hover .imgtip12{
  position: absolute;
  left: 0;
  top: 1.2em;
  width:650px ;
  height: 500px;
  background: url(http://i247.photobucket.com/albums/gg135/Trnje/Danas/zvijezdarepatica.jpg); }
* { line-height: 1.2; }

.imgtipiz:hover .imgtip13{
  position: absolute;
  left: 0;
  top: 1.2em;
  width: 125px ;
  height: 125px;
  background: url(http://i247.photobucket.com/albums/gg135/Trnje/Danas/Europe_mini.jpg); 
  background-repeat: no-repeat; }
* { line-height: 1.2; }


  
  <br /><br />



#imgchuchu1 { float: left; } 
#imgchuchu1 img{ display: block; padding-bottom: 15px;} 
#imgchuchu2i3 { float: center; } 
#imgchuchu2i3 img{ display: block; padding-left: 5px;}


.corn{
color: #6495ED;
line-height: 1.7em;
}

#hr1 {
padding-bottom: -35px; 
margin-top: -55px;
}
.hr2 {
padding-bottom: -35px; 
margin-top: -54px;
}

.hr3 { /*Ovaj koristim na ARHIVA stranicama u naslovima*/
padding-bottom: -35px; 
padding-left: 85px;
margin-top: -54px;

}

	
.vijest {
	position: static;
	padding-bottom: 0px;
	margin-top: -10px;
	color: white;
	background-color: #6495ED;

}
		

 /*STR.BR.2 KONTAKT STRANICA */
 /*LINK NA NASLOVNA */
 .naslovna {
	border:1px solid #ccccff ;
	width: 105px ;
	margin-top: -20px;
	font: 0.7em impact,monospace,arial,impact ;
	vertical-align: middle !important;
			}
    
	.naslovna a {
	position: relative; 
	  display: block; 
	  color: #6495ED;
	}
	.naslovna img {
	vertical-align: middle;
	}
	
	.naslovna a:link {
      text-decoration: none !important;  
	}
	
    .naslovna a:hover {
	background-color: #F0F0F0;
	text-decoration: none !important;
	color: blue;
	}

   .naslovna a:active {
	background-color: #ffcccc;
	}
	
.natrag {
	border:1px solid #ccccff ;
	width: 50px ;
	margin-top: -49px;
	margin-left: 110px;
	font: 0.7em impact,monospace,arial,impact ;
	vertical-align: texttop !important;
  
	}	

 .natrag a {
	position: relative; 
	  display: block; 
	  color: #6495ED;
	}
	.natrag img {

	padding-top: 8px;
	padding-left: 14px;
	padding-bottom: 5px;
	}
	
	.natrag a:link {
      text-decoration: none !important;  
	}
	
    .natrag	a:hover {
	background-color: #F0F0F0;
	text-decoration: none !important;
	color: blue;
	}

   .natrag a:active {
	background-color: #ffcccc;
	}

.natrag2 {
	border:1px solid #ccccff ;
	width: 50px ;
	margin: -15px 10px;
	font: 0.7em impact,monospace,arial,impact ;
	vertical-align: texttop !important;
	
	}	

 .natrag2 a {
 	position: relative; 
	  display: block; 
	  color: #6495ED;
	}
	.natrag2 img {

	padding-top: 8px;
	padding-left: 14px;
	padding-bottom: 5px;
	}
	
	.natrag2 a:link {
      text-decoration: none !important;  
	}
	
    .natrag2 a:hover {
	background-color: #F0F0F0;
	text-decoration: none !important;
	}

   .natrag2 a:active {
	background-color: #ffcccc;
	}
	
	
.gore {
	border:1px solid #ccccff ;
	width: 50px ;
	margin-top: -49px;
	margin-left: 110px;
	font: 0.7em impact,monospace,arial,impact ;
	vertical-align: texttop !important;
	}	

 .gore a {
	position: relative; 
	  display: block; 
	  color: #6495ED;
	}
	.gore img {

	padding-top: 16px;
	padding-left: 14px;
	padding-bottom: 10px;
	}
	
	.gore a:link {
      text-decoration: none !important;  
	}
	
    .gore	a:hover {
	background-color: #F0F0F0;
	text-decoration: none !important;
	color: blue;
	}

   .gore a:active {
	background-color: #ffcccc;
	}
	
.naslarh {

padding-left: 75px;

}
	
.ntr {
padding-left: 9px; 
font: #6495ED;
}	

/* KONTAKT FORMA*/
 
 form {
	font-size: 1.3em;
	width: 25em;
	}


/* fieldset styling */
fieldset {
  margin: 1em 0; /*  space out the fieldsets a little*/
  padding: 1em;
  border : 1px solid #ccc;
     }

/* legend styling */
legend {
 font-size: 1.3em;
  font-weight: bolder;
 
}

#comments_form {
	margin-left: 55px ;
	margin-top: -35px;
	text-align: center;
	}

	
/* style for  labels */
label {
  display: block;
  text-align: center !important;
 	}

/* style for required labels */
label .required {
  font-size: 0.75em;
  color:#760000;
  
	}

.optional {
	font-size: 0.75em;
	color: #cccccc ;
	}

input {
  width: 200px;
  }

input.radio, input.submit {
  width: auto;
}

/* style form elements on focus */
input:focus, textarea:focus {
  background: #ffc;
}

input.radio {
  float: left;
  margin-right: 1em;
}

textarea {
  width: 300px;
  height: 150px;
}

/* Hack to make sure the floated radio buttons
   sit next to the labels correctly in IE/Mac*/

/* This is the style I want IE/Mac to see */
input.radio + label {
  text-indent: 2em;
}

/* Using the commented backslash filter, I'm resetting
   the above rule for everything other than IE5/Mac \*/
input.radio + label {
  text-indent: 0;
}

/* End the hack */


/* lightbox formacija */

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }



  

  
	</style>