body {
	padding: 0;
	margin: 0;
	background: transparent url(slike/pagebckg.gif) repeat-x fixed;
	font-family: Verdana, sans-serif;
	font-size: 0.84em;
}
html {
	padding: 0;
	margin: 0;
}
form 
{
	margin: 0;
	padding: 0;
}
h2 {
	font-size: 1.3em;
	padding: 0;
	color: #281a7b;
}
h3 {
	font-size: 1.2em;
	padding: 0;
	color: #281a7b;
	text-transform: uppercase;	
}
h4 {
	font-size: 1.3em;
	padding: 0;
	color: #281a7b;
}
h1.skriveniNaslovi, h2.skriveniNaslovi {
	overflow: hidden;
	height: 0 !important;
	margin: 0;
	padding: 0;
}
p, li {
	color: #333333;
}
  /***********/
 /*body id's*/
/***********/
/* pocetna */
body#pocetna #banner {
	background-image: url(slike/pocetna.jpg);
	height: 278px; /* velicina slike - varira od grupe proizvoda i mora se naznaciti zbog okolnih elemenata da se pravilno uklope (logo-iznad i navigacija-ispod */
}	
/* onama */
body#onama #banner {
	background-image: url(slike/o-nama.jpg);
	height: 266px;
}
/* usluge */
body#usluge #banner {
	background-image: url(slike/usluge.jpg);
	height: 272px;
}
/* zaposlenje */
body#zaposlenje #banner {
	background-image: url(slike/zaposlenje.jpg);
	height: 264px;
}
/* kontakt */
body#kontakt #banner {
	background-image: url(slike/kontakt.jpg);
	height: 266px;
}
/* akcije */
body#akcije #banner {
	background-image: url(slike/akcija.jpg);
	height: 297px;
}
/* pitanja */
body#pitanja #banner {
	background-image: url(slike/pitanja.jpg);
	height: 350px;
}
body#pocetna #drzacSadrzaja, body#onama #drzacSadrzaja, body#usluge #drzacSadrzaja, body#zaposlenje #drzacSadrzaja, body#kontakt #drzacSadrzaja, body#voda #drzacSadrzaja, body#akcije #drzacSadrzaja, body#pitanja #drzacSadrzaja {
	background-image: url(slike/navvoda.gif);
}
body#struja #drzacSadrzaja {
	background-image: url(slike/navstruja.gif);
}
body#grijanje #drzacSadrzaja {
	background-image: url(slike/navgrijanje.gif);
}
body#tehnika #drzacSadrzaja {
	background-image: url(slike/navtehnika.gif);
}
body#alati #drzacSadrzaja {
	background-image: url(slike/navalati.gif);
}
body#pocetna a.pocetna, body#onama a.onama, body#usluge a.usluge, body#zaposlenje a.zaposlenje, body#kontakt a.kontakt {
	border-bottom: 3px solid #ff750b;
}
/* body id's u bocnoj navigaciji */
body#voda #banner {
	background-image: url(slike/vodomaterijal.jpg);
	height: 308px;
}
body#struja #banner {
	background-image: url(slike/struja.jpg);
	height: 273px;
}
body#grijanje #banner {
	background: url(slike/grijanje.jpg);
	height: 300px;
}
body#tehnika #banner {
	background-image: url(slike/tehnika.jpg);
	height: 261px;
}
body#alati #banner {
	background-image: url(slike/alati.jpg);
	height: 266px;
}
body#voda li.voda, body#struja li.struja,  body#grijanje li.grijanje, body#tehnika li.tehnika, body#alati li.alati {
	padding-left: 5px;
}
body#voda li.voda a:hover, body#struja li.struja a:hover, body#grijanje li.grijanje a:hover, body#tehnika li.tehnika a:hover, body#alati li.alati a:hover {
	padding-left: 0;
}
/* body id's - dodatni */
body#usluge ul {
  color: #64615a;
  list-style-type: disc;
  }
body#usluge table {
  	margin: 0 auto;
	border: none;
}
body#usluge td {
	border-bottom: 1px dotted #ccc;
	padding: 8px;
	vertical-align: top;
}
body#usluge td.c {
	text-align:center;
}
body#usluge th {
	border-bottom: 1px dotted #ccc;
}
/*drzac cijelog sajta - prazan*/
#drzac {
	width: 791px;
	margin: 0 auto;
}
/* opet drzac - ovaj put sa pozadinom za navigaciju i borderima sajta */
#drzacStranice {
	background: #FFFFFF url(slike/pagebg.gif) repeat-y;
	min-height: 200px;
}
/* vrh stranice - sadrzi zaobljeni vrh navigacije i top border sajta */
#vrhStranice {
	height: 10px;
	background: url(slike/pagebgvrh.gif) no-repeat;
}
/* prazan div koji na svakoj strani dobija klasu (u vidu slike) odredjene vrste proizvoda */
#banner {
	padding-top: 13px;
	background-position: bottom;
}
/* dno stranice - sadrzi zaobljeno dno navigacije i bottom border sajta */
#dnoStranice {
	height: 10px;
	background: url(slike/pagebgdno.gif) no-repeat;
}
/* ovde su svi elementi u vrhu stranice pomjereni za 9 px dole - zbog #vrhStranice */
#drzacBannera {
	width: 723px;
	margin-left: 9px;
}
/* banner Loga otkinut za 7px zbog ... vec cega */
#bannerLogo {
	background-image: url(slike/glavnavtop.gif);
	height: 100px;
	background-position: top;
	margin-top: -13px;  /*da se uklopi sa top-paddingom #bannera */
}
/* drzac unutrasnjeg dijela sajta, sadrzi sve osim bocne navigacije */
#drzacSadrzaja {
	width: 757px;
	float: left;
	background-position: right;
	background-repeat: repeat-y;
	margin-top: -10px;
	padding-top: 10px;
	margin-bottom: -10px;
	padding-bottom: 10px;
}
#slogan {
	width: 285px;
	float: left;
	margin: 1em;
}
#downloadKataloga {
	width: 49%;
	float: left;
}
#downloadKataloga p {
	font-size: 0.9em;
	line-height: 0.1em;
	margin-left: 72px;
	margin-bottom: 15px;
}
#downloadKataloga img {
	display: inline;
	float: left;
}
/******* pocetak glavne navigacije *********/
#bannerNavigacija {
	background-image: url(slike/glavnavbot.gif);
	height: 38px;
	margin-top: -20px;
	padding: 0;
}
#bannerNavigacija ul {
	margin: 0;
	padding: 0;
}
#bannerNavigacija li {
	margin: 11px 5px 0 5px;
	padding-left: 5px;
	float: left;
    list-style-type: none;
}
#bannerNavigacija li a {
	display: block;
	text-align: center;
	text-decoration: none;
	font-size: 0.84em;
	font-weight: 900;
	color: #434463;
}
#bannerNavigacija li a:active {
	color: #ff750b;
}
#bannerNavigacija li a:hover {
	border-bottom: 3px solid #ff750b;
}
/******* kraj glavne navigacije *******/
#naslovKategorije {
	margin: -50px 0 0 350px;
	font-style:italic;
	text-align: right;
}
/*******************************************/
/******* Bocna vertikalna navigacija *******/
/*******************************************/
#drzacBocneNavigacije {
	width: 34px;
	float: right;
	padding-top: 60px;
}
#vertikalnaNavigacija {
  	padding: 0;
 	margin: 0;
  	list-style-type: none; 
 	font-size: 0.80em;
  	font-weight: 900;
  	font-family: Verdana, sans-serif;
}
#vertikalnaNavigacija li {
	float: left;
	margin: 0;
}
#vertikalnaNavigacija li a {
  	text-decoration: none; 
  	color: #FFFFFF;
  	display: block;
	width: 26px;
	height: 108px;
	margin-left: -5px;
}
#vertikalnaNavigacija li a span {
  	font-style: normal; 
  	display: block; 
  	text-align: center;
	text-transform: uppercase;
}
#vertikalnaNavigacija li a:hover {
	padding-left: 5px;
	background-position: right; /* ovo cini da se tabovi pravilno pomjeraju prema desno */
}
#vertikalnaNavigacija li a:active {
	color: #990000;
}
/* klasa za aktivnu stranicu (da tab ostane izvucen) */
#vertikalnaNavigacija li.aktivnaStranica {
	padding-left: 5px;
}
#vertikalnaNavigacija li.aktivnaStranica a:hover {
	padding-left: 0;
}
/******* tabovi u bocnoj navigaciji *******/
.tabVoda { 
	background-image: url(slike/tabvoda.gif);
}
.tabStruja { 
	background-image: url(slike/tabstruja.gif);
}
.tabGrijanje { 
	background-image: url(slike/tabgrijanje.gif);
}
.tabTehnika { 
	background-image: url(slike/tabtehnika.gif);
}
.tabAlati { 
	background-image: url(slike/tabalati.gif);
}
/* pocetak sadrzaja */
#sadrzaj {
	padding: 40px 45px 20px 30px;
}
/* specijalna ponuda */
#specijalnaPonuda, #radnoVrijeme {
	width: 49%;
	float: right;
}
#specijalnaPonuda a {
	text-decoration: none;
	display: block;
}
/* round corners */
.t {background: url(slike/t.gif) 0 0 repeat-x;}
.b {background: url(slike/b.gif) 0 100% repeat-x;}
.l {background: url(slike/l.gif) 0 0 repeat-y;}
.r {background: url(slike/r.gif) 100% 0 repeat-y;}
.bl {background: url(slike/bl.gif) 0 100% no-repeat;}
.br {background: url(slike/br.gif) 100% 100% no-repeat;}
.tl {background: url(slike/tl.gif) 0 0 no-repeat;}
.tr {background: url(slike/tr.gif) 100% 0 no-repeat; padding:14px;}
.clear {font-size: 1px; height: 1px} /*IE hack - dodaje se zadnjem div-u*/
/* kraj specijalne ponude */

#akcija img {
	margin-left: 100px;
	width: 218px;
	height: 218px;
	margin-top: -150px;
}
.podaci {
	width: 49%;
	float: left;
	padding-top: 18px;
}
/******************/
/* spanky corners */
/*******************/
/* all curved boxes get the bottom-left corner */
.rounded, .roundedPitanje {
  	background: #e5ecf6 url(slike/bl_13_e5ecf6_ffffff.gif) no-repeat bottom left;
}
.rounded2 {
	background: #f6ece2 url(slike/bl_13_f6ece2_ffffff.gif) no-repeat bottom left;
}
.rounded, .rounded2, .roundedPitanje {
	float: left;
  	position: relative;
 	padding-top: 0;
 	padding-bottom: 13px;
    margin: 1% 0.5%;
 	height: 100%;
}
.roundedPitanje {
	width: 99%;
}
.rounded, .rounded2 {
	float: left;
	width: 49%;
}
.rounded img, .rounded2 img {
	float: left;
	margin: -20px 10px 0 0;
	border: 1px solid #fff;
	position: relative;
}
/* all elements in 'div.rounded' gets the B-R corner */
.rounded *, .roundedPitanje * {
	background: #e5ecf6 url(slike/br_13_e5ecf6_ffffff.gif) no-repeat bottom right;
}
.rounded2 * {
	background: #f6ece2 url(slike/br_13_f6ece2_ffffff.gif) no-repeat bottom right;
}
.rounded *, .rounded2 *, .roundedPitanje * {
	color: #333333;
	padding: 1em 2em 13px 0;
	margin: 0 0 -13px 13px;
	height: 100%;
}
/* Scrub that B-R corner from all elements *2+* levels deep*/
.rounded * *, .rounded2 * *, .roundedPitanje * * {
  padding: 0;
  margin: 0;
  background: none;
  color: #333333;
  height: auto;
}
/* Set up some H's as 'box heads' with the T-R and T-L corners */
.rounded h4, .roundedPitanje h4 {
  color: #281a7b;
  background: #e5ecf6 url(slike/tr_13_e5ecf6_ffffff.gif) no-repeat top right;
  display: list-item;
  list-style-image: url(slike/tlc_13_e5ecf6_ffffff.gif);
  list-style-position: inside;
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.rounded2 h4 {
  color: #281a7b;
  background: #f6ece2 url(slike/tr_13_f6ece2_ffffff.gif) no-repeat top right;
  display: list-item;
  list-style-image: url(slike/tlc_13_f6ece2_ffffff.gif);
  list-style-position: inside;
  list-style-type:none;
  padding: 0;
  margin: 0;
  position: relative;
}
.rounded h4, .rounded2 h4 {
  font-size: 0.9em;
  line-height: normal;
}
.rounded h4:first-letter {
	padding-left: 10.5em;
}
.rounded2 h4:first-letter {
	padding-left: 10.5em;
}
.roundedPitanje h4 {
	font-size: 0.9em;
	line-height: normal;
}
.rounded p, .rounded2 p, .roundedPitanje p {
  font-size: 0.77em;
  line-height: normal;
  color: #333333;
}
  /*******************/
 /* forma strucnjak */
/*******************/
#strucnjak {
	background: #e5ecf6; 
	width: 600px; 
	padding: 5px;
	margin: 0 auto;
	border: 1px solid #fff;
}
#strucnjak fieldset {
	width: 280px; 
	display: block; 
	border: 1px solid #fff;
	padding: 5px; 
	font-family: Verdana, sans-serif; 
	margin: 0 auto;	
	background: url(slike/strucnjak.jpg) no-repeat top right;
}
#strucnjak label {
	clear: left; 
	display: block; 
	float: left; 
	width: 95px; 
	text-align: right; 
	color: #888;
	padding-top: 3px;
/*	margin-bottom: 4px;*/
	font-size: 0.7em;
}
#strucnjak input {
	color: #888;
	width: 150px;
	border: 1px solid #fff; 
	background: #fff url(slike/form.gif) repeat-x top left; 
	padding-left: 0.5em; 
	margin-bottom: 4px;
}
#strucnjak textarea {
	color: #888;
	width: 300px; 
	height: 100px; 
	border: 1px solid #fff; 
	font-family: Verdana, sans-serif; 
	font-size: 0.7em; 
	overflow: auto;
/*	margin: 5px auto 0 auto;*/
	background: #fff url(slike/form.gif) repeat-x bottom left;
}
.btnPosalji, #strucnjak #dugmeResetuj {
	color: #c00; 
	cursor: pointer; 
	width: 125px;
	margin: 4px 0 0 375px;
}
.btnPosalji:hover, #strucnjak #dugmeResetuj:hover {
	background-position: center left; 
	color: #000;
}
/* lightbox */
#lightbox{
	position: absolute;
	top: 40px;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#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: transparent url(../images/blank.gif) no-repeat; /* 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;
	}

#imageData{
	padding:0 10px;
	}
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold; color: #555555; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	}
	

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}

* html>body .clearfix {
	display: inline-block; 
	width: 100%;
	}

* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
	}
/* kraj lightboxa */
#footer {
	float: left;
	width: 100%;
	text-align: center;
	font-size: 0.7em;
	border-top: 2px dotted #e5ecf6;
	margin-top: 10px;
	margin-bottom: -5px;
	padding: 0;
}
.pedesetposto {
	width: 49%;
	float: left;
}
#kontaktForma {
	width: 99%;
	float: left; 
	margin: 50px auto;
	border: none;
}
#kontaktForma fieldset { 
	display: block; 
	border: none; 
	font-family: Verdana, sans-serif;
	padding: 20px;	
}
/*#kontaktForma legend {
	font-family: Verdana, sans-serif; 
	font-size: 0.7em; 
	font-weight: bold;
	text-transform: uppercase;
	border: 3px solid #fff;  
	padding: 3px; 
	width: 154px;
	background: #fff url(slike/form.gif) repeat-x center left;
}*/
#kontaktForma label {
	clear: left; 
	display: block; 
	float: left; 
	width: 90px; 
	text-align: right; 
	color: #333333;
	padding-top: 3px;
	font-size: 0.7em;
}
#kontaktForma input {
	color: #333333;
	width: 190px;
	border: 1px solid #333333; 
	background: #fff url(slike/form.gif) repeat-x top left; 
	padding-left: 0.5em; 
	margin-bottom: 4px;
}
#kontaktForma select {
	color: #333333;
	width: 190px;
	border: 1px solid #333333; 
	margin-bottom: 4px;
}
#kontaktForma textarea {
	color: #333333;
	width: 100%; 
	height: 250px; 
	border: 1px solid #333333;
	font-family: Verdana, sans-serif; 
	font-size: 0.7em; 
	overflow: auto;
	background: #fff url(slike/form.gif) repeat-x bottom left;
	margin-top: 10px;
}
#kontaktForma #dugmePosalji, #kontaktForma #dugmeResetuj {
	color: #c00; 
	cursor: pointer; 
	width: 125px;
	margin: 4px 0 0 375px;
}
#kontaktForma #dugmePosalji:hover, #kontaktForma #dugmeResetuj:hover {
	background-position: center left; 
	color: #000;
}
.pitanjeTekst
{
	border: dotted 1px #660000;
	color: #660000;
	background-color: #ffffcc;
	padding: 5px;
	margin: 10px 20px;
}