* {margin:0;padding:0;} 

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

body {
	background:#69d1e6 url(slike/sunandclouds.png) top center no-repeat; /* slika je 200px visine */
	font-family:"Trebuchet MS", Arial, sans-serif;
	font-size: 81.3%; 
	color: #222; 
	}

#wrap {
	width:960px;
	margin:0 auto;
	padding:0;
}

#main {
	width:960px;
	margin:0 auto;
	border:0;
	padding-bottom: 310px; /* must be same height as the footer */
	}  


/* HEADER */

.header {
	width:100%;
	height:170px;
	margin:0;
	padding:0;
	/*background:#CC6600;*/
}

/* LOGO */
#logo {
	float:left;
	width:390px;
	height:65px;
	margin:35px 0 0 90px;
	padding:0;
	background:#666666;
}


/* NAVIGACIJA */

.rBox {
   background: #1c7ad0;
   float:right;
   margin:5px 0 0 266px; /* IE7 fix - glupavi IE*/
   padding:0;
   }
.rTop div {
   background: url(slike/meni_gl.png) no-repeat top left;
}
.rTop {
   background: url(slike/meni_gd.png) no-repeat top right;
}
.rBottom div {
   background: url(slike/meni_dl.png) no-repeat bottom left;
}
.rBottom {
   background: url(slike/meni_dd.png) no-repeat bottom right;
}

.rTop div, .rTop, 
.rBottom div, .rBottom {
   width: 714px;
   /*width:694px;*/
   height: 14px;
   font-size: 1px;
}
.rHolder { margin: 0 14px; height:15px;}

#nav {
	float: right;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	/*height:30px;*/
}
#nav li {
	float: left;
	font-family:"Trebuchet MS", Arial, sans-serif;
	font-size:14px;
	font-weight:bolder;
	text-transform:uppercase;
	margin: 0;
	padding: 0 4px 0 4px;
}
#nav a {
	color:#FFFFFF;
	display: block;
	float: left;
	margin: 0;
	padding: 0 12px;
	text-decoration: none;
}
#nav a:hover, #nav a.current {
	color: #69d1e6;
	background: #1c7ad0;
	/*text-decoration:underline;*/
	}

/* SIDEBAR MENU */


#sub ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	border: none;
}

#sub li {
	list-style:none;
	margin: 0px;
	padding: 0px;
}

#sub li a {
	font-family:"Trebuchet MS", Arial, sans-serif;
	font-size: 14px;
	display: block;
	border-bottom: 1px dashed #C39C4E;
	padding: 5px 0px 2px 4px;
	text-decoration: none;
	color: #ffffff;
	width:140px;
}

#sub li a:hover, #sub li a.current, #sub li a:focus {
	color: #ffffff;
	font-style:italic;
}

#subnav ul {margin:0 0 0 15px;}

/* CONTENT */

.contentwrap {
	margin:40px 0 0 0;
	padding:0;
	width:960px;
}

#sidebarLeft {
	float: left;
	width: 220px;
}

#sidebarRight {
	float: right;
	width: 220px;
}

#content { 
	float: left;
	width:500px;
	margin:0 0 0 10px;
	background:url(slike/sadrzaj.gif) top no-repeat;
}

/* FOOTER */
#footer {
	position: relative;
	margin-top: -310px; /* negative value of footer height */
	height: 310px;
	clear:both;
	background:#69d1e6 url(slike/footerbackground.png) bottom center no-repeat;
	} 

#footerWrap {
	width:960px;
	height:310px;
	margin:0 auto;
	padding:0;
}

#putokaz {
	float:right;
	margin:170px 50px 0 0;
	padding:0;
}


/* BOXES */

.sadrzaj {
	margin:0;
	padding:10px 20px;
	min-height:200px;
}

.sadrzaj h3, .sadrzaj h2 {
	color:#1c7ad0;
}

.sadrzaj p {
	padding:0 10px;
	text-align:justify;
}

p.info {
	font-style:italic;
        font-size:0.9em;
}

.sadrzaj a:link {
	color:#222;
	font-style:italic;
	font-weight:bold;
	border-bottom:#222 1px dotted;
}

.sadrzaj a:focus, .sadrzaj a:hover {
	background:#69c2e6;
	border-bottom:#222 1px dotted;
}

.sadrzaj ul, sadrzaj li {
        list-style:none;
        padding:0 10px;
        line-height:2em;
}





/* YELLOW BOX */

.yBox {
   background: #efc635;
}
.yTop div {
   background: url(slike/yellow_gl.png) no-repeat top left;
}
.yTop {
   background: url(slike/yellow_gd.png) no-repeat top right;
}
.yBottom div {
   background: url(slike/yellow_dl.png) no-repeat bottom left;
}
.yBottom {
   background: url(slike/yellow_dd.png) no-repeat bottom right;
}

.yTop div, .yTop, 
.yBottom div, .yBottom {
   width: 100%;
   height: 15px;
   font-size: 1px;
}
.yHolder { margin: 0 15px; }


/* GREEN BOX */

.gBox {
   background: #39b44a;
   margin:0 0 20px 0;
   padding:0;
}
.gTop div {
   background: url(slike/green_gl.png) no-repeat top left;
}
.gTop {
   background: url(slike/green_gd.png) no-repeat top right;
}
.gBottom div {
   background: url(slike/green_dl.png) no-repeat bottom left;
}
.gBottom {
   background: url(slike/green_dd.png) no-repeat bottom right;
}

.gTop div, .gTop, 
.gBottom div, .gBottom {
   width: 100%;
   height: 15px;
   font-size: 1px;
}
.gHolder { margin: 0 15px; }

.gHolder h3 {
	color:#efc635;
	padding:0 0 10px 0;
	text-align:center;
	text-transform:uppercase;
}

.gHolder p {
	color:#fff;
}

.gHolder a:link, gHolder a:visited, gHolder a:active {
	color:#ffffff;
	border-bottom:#ffffff 1px dotted;
}

.gHolder a:hover {
       font-style:italic;
}

.gHolder ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	border: none;
}

.gHolder ol {margin:0; padding:0 0 10px 0; border:none;}
.gHolder ol li {list-style:decimal; padding:0;}

.gHolder li {
	list-style:none;
	margin: 2px 0;
	padding: 0 20px;
}


/* WHITE BOX */

.wBox {
	margin:0 0 20px 0;
	padding:0;
	background:url(slike/white_box.gif) top no-repeat;
	width:220px;
	min-height:150px;
}

.wBox h3 {
	padding:10px 0;
	color:#666666;
	text-align:center;
	text-transform:uppercase;
}

.wBox p {
	padding:0 15px;
}


/* BLUE BOX */

.bBox {
   background: #1c7ad0;
   margin:0 0 20px 0;
   padding:0;
}
.bTop div {
   background: url(slike/blue_gl.png) no-repeat top left;
}
.bTop {
   background: url(slike/blue_gd.png) no-repeat top right;
}
.bBottom div {
   background: url(slike/blue_dl.png) no-repeat bottom left;
}
.bBottom {
   background: url(slike/blue_dd.png) no-repeat bottom right;
}

.bTop div, .bTop, 
.bBottom div, .bBottom {
   width: 100%;
   height: 15px;
   font-size: 1px;
}
.bHolder { margin: 0 15px; }

.bHolder h3 {
	padding:0 0 10px 0;
	color:#FFFFFF;
	text-align:center;
	text-transform:uppercase;
}






/* HEADING */ 


h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; } 
h2 { font-size: 2em; margin-bottom: 0.75em; } 
h3 { font-size: 1.5em; line-height: 1; /*margin-bottom: 1em;*/ } 
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; } 
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; } 
h6 { font-size: 1em; font-weight: bold; } 
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; } 

/* TEKST */ 
p { margin: 0 0 1.5em; } 
p img.left { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; } 
p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; } 
a:focus, a:hover { color: #000; } 
a { color: #009; text-decoration:none; } 
blockquote { 
  margin: 1.5em; 
  color: #000; 
  font-style: italic; 
  background:#69c2e6;
} 
strong { font-weight: bold; } 
em,dfn { font-style: italic; } 
dfn { font-weight: bold; } 
sup, sub { line-height: 0; } 
abbr, acronym { border-bottom: 1px dotted #666; } 
address { margin: 0 0 1.5em; font-style: italic; } 
del { color:#666; } 
pre { margin: 1.5em 0; white-space: pre; } 
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; } 

/* LISTE */ 

li ul, li ol { margin:0 1.5em; } 
ul, ol { margin: 0 1.5em 1.5em 1.5em; } 
ul { list-style-type: disc; } 
ol { list-style-type: decimal; } 
dl { margin: 0 0 1.5em 0; } 
dl dt { font-weight: bold; } 
dd { margin-left: 1.5em;} 

/* TABLICE */ 

table { margin-bottom: 1.4em; width:100%; } 
th { font-weight: bold; } 
thead th { background: #c3d9ff; } 
th,td,caption { padding: 4px 10px 4px 5px; } 
tr.even td { background: #e5ecf9; } 
tfoot { font-style: italic; } 
caption { background: #eee; } 

/* Misc classes -------------------------------------------------------------- */ 
 
.large { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; } 
.hide { display: none; } 
.quiet { color: #666; } 
.loud { color: #000; } 
.highlight { background:#ff0; } 
.added { background:#060; color: #fff; } 
.removed { background:#900; color: #fff; } 
.first { margin-left:0; padding-left:0; } 
.last { margin-right:0; padding-right:0; } 
.top { margin-top:0; padding-top:0; } 
.bottom { margin-bottom:0; padding-bottom:0; }

/* Fancy Image Gallery
 * Class for the "fancy_parent" function 
 * It gives a thick 3px grey border around image
*/

.link img { 
	border: 3px solid #999; 
	outline:none;
	padding:0;
	margin:5px;
}

.link img:hover {
	border:3px solid #ccc;
}

/* Class for single image listing (fancy function) 
 * It gives a grey 1px border around image
*/
a.photo { 
	padding: 5px; 
	margin: 5px; 
	border: 1px solid #999; 
	display: block; 
	float: left; 
}

a.photo:hover	{ border-color: white; }





/* CLEAR FIX  */
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* EXTRA */
.clear { clear:both; } /*blok*/
.small { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; } /*mini*/