/* info
--------------------------------------------------------
	Start:	16.03.2009.
	Author:	BozooArt, www.bozooart.com
	Name: 	Zvono d.o.o. - www.zvono.net
*/

/* Colors
----------------------------------------------- 
#00a5d5 = blue
#fa8f12 = orange
#525455 = dark gray
----------------------------------------------- */

/* Normalize
----------------------------------------------- */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; margin: 0; font-weight: normal; }
ol, ul { list-style: none; }
address, caption, cite, code, dfn, th, var { font-style: normal; font-weight: normal; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
caption, th { text-align: left; }
q:before, q:after { content:''; }
hr { display: none; }
legend { display: none; }
input, textarea,  select { font: 1em  Arial, Helvetica, serif;  color: #494627;  }
img { margin: 0; padding: 0; }

/* General
----------------------------------------------- */
body 	{ font: 62.5%/1.4  "Trebuchet Ms", Arial, Helvetica, sans-serif; background: #00a5d5 url(img/body-bg.gif) repeat-x; text-align: center; color: #443817; }
a 		{ text-decoration: none; color: #00aeef; }
a:hover { text-decoration: underline; }
a:focus,
* :focus { outline: 0; }

blockquote { margin: 0 0 30px 50px; }
.clr { clear: both; }
.left { float: left; }
.center { text-align: center; }

/* Body
----------------------------------------------- */
#container { width: 871px; font-size: 1.1em; color: #333333; text-align: left; margin: 0 auto; }
#content { margin-top: -10px }
#header {  background: url(img/header.gif) no-repeat 0 0; margin-left: -50px; width: 526px; height: 239px; padding-left: 50px  }
h1 a {  background: url(img/logo.png) no-repeat; width: 260px; height: 96px; display: block; margin: 0 0 20px 80px; } 
/*h1 a {  background: url(img/logo2.png) no-repeat; width: 260px; height: 96px; display: block; margin: 0 0 20px 70px; } */

h1 span { display: none;}
#headline { padding: 20px 20px 20px 80px; color: #fff; font-size: 1.5em; width: 480px; }

/* Left Colum
----------------------------------------------- */
#leftCol { width: 590px; float: left;   }
#leftCol .box { background: #fff; margin-bottom: 20px; padding: 45px 20px 45px 168px; line-height: 1.7em; }
#leftCol .box .title { position: relative; margin-left: -175px; font-size: 1.2em; font-weight: bold; background: #00aeef; color: #fff; text-align: right; padding: 5px 10px 5px 0; text-transform: uppercase; width: 120px; position: absolute;  }
#leftCol ul.list li { background: url(img/bullet.gif) no-repeat 0 55%; padding-left: 10px; }

.nav { margin: -131px 0 0 42px; padding: 60px 0 71px; }
.nav li { display: inline; font-size: 1.2em; }
.nav li a { color: #000; background: url(img/nav.gif) no-repeat; display: block; float: left; height: 11px; text-indent: -9999em; margin-right: 42px; }

  .nav li.onama a { width: 54px; background-position: 0 0 }
  .nav li.djelatnosti a { width: 85px; background-position: -95px 0 }
  .nav li.klijenti a { width: 54px; background-position: -221px 0 }
  .nav li.gdje-smo a { width: 66px; background-position: -317px 0 }
  .nav li.kontakt a { width: 62px; background-position: -425px 0 }
    
    .nav li.onama a:hover, .nav li.onama.active a { width: 54px; background-position: 0 100% }
    .nav li.djelatnosti a:hover, .nav li.djelatnosti.active a { width: 85px; background-position: -95px 100% }
    .nav li.klijenti a:hover, .nav li.klijenti.active a { width: 54px; background-position: -221px 100% }
    .nav li.gdje-smo a:hover, .nav li.gdje-smo.active a { width: 66px; background-position: -317px 100% }
    .nav li.kontakt a:hover, .nav li.kontakt.active a { width: 62px; background-position: -425px 100% } 
  
.paper-top { width: 580px; background: url(img/paper-top.png) no-repeat; height: 131px;  }
.paper-top a { visibility: hidden; }
.paper { background: url(img/paper-bg.gif) repeat-y; width: 390px; padding: 20px 20px 20px 170px; line-height: 1.6em; font-size: 1.2em; color: #818181; }
.paper p { margin-bottom: 20px; }
.paper-bottom { background: url(img/paper-bottom.gif) no-repeat; width: 574px; height: 25px;}
.paper.reset { padding: 0 40px 40px 40px !important; width: 501px; margin-top: -23px; }
.paper .summary { font-weight: bold; }

.paper-bottom.separator { margin-bottom: 1000px; }
.paper-bottom.indent {  margin-bottom: 150px;  }
.pen { background: url(img/pen.gif) no-repeat; width: 437px; height: 42px; margin: -28px 0 0 120px; clear: both; position: absolute; }
.paper-bottom a { display: block; width: 18px; height: 18px; background: url(img/top.gif) no-repeat; position: absolute; margin: -20px 0 0 545px; text-indent: -9999em; }
.back a { display: block; width: 18px; height: 18px; background: url(img/left.gif) no-repeat; margin: 3px 0 0 0; position: absolute; text-indent: -9999em; cursor: pointer; z-index: 2 }



  #location-icon { background: url(img/location.png) no-repeat; width: 118px; height: 117px; margin: -28px 0 0 33px; clear: both; position: absolute; }
  #mail-icon { background: url(img/mail.png) no-repeat; width: 118px; height: 117px; margin: -28px 0 0 33px; clear: both; position: absolute; }
  #comment-icon { background: url(img/comment.png) no-repeat; width: 118px; height: 117px; margin: -89px 0 0 380px; clear: both; position: absolute; }
  #works { background: url(img/works.png) no-repeat; width: 118px; height: 117px; margin: -28px 0 0 33px; clear: both; position: absolute; }
  #clients-icon { background: url(img/clients.png) no-repeat; width: 118px; height: 117px; margin: -28px 0 0 33px; clear: both; position: absolute; }
  #works-icon { background: url(img/works.png) no-repeat; width: 118px; height: 117px; margin: -28px 0 0 33px; clear: both; position: absolute; }


#map { margin: 0 0 20px -130px; border: 1px solid #ccc; width: 500px; height: 300px }

.article-title { margin: 20px 0 20px 0px; font-size: 30px; color: #fba838 }
.category-title { margin: 40px 0 0 0px; font-size: 30px; color: #fba838 }
.paper .date { margin: 0; padding: 0; font-size: .9em; }
.paper .date.article { margin: 0; padding: 0; text-align: right; position: absolute; width: 492px;  }

dl.client-list { margin-bottom: 50px; }
dl.client-list dt { margin-left: 0px; text-transform: uppercase; margin-bottom: 10px; border-bottom: 2px solid #f1f1f1  }
dl.client-list dd { border-bottom: 1px solid #f1f1f1; padding: 5px 10px;  }

/* Right Column
----------------------------------------------- */
#rightCol a.selected_style { background: #fba838; color: #fff; padding: 0 2px; }
#rightCol a.selected_style:hover { cursor: default; text-decoration: none }

.box-top { background: url(img/news-top.png) no-repeat; width: 287px; height: 13px; margin-top: -15px !important; }
.box-bottom { background: url(img/news-bottom.gif) no-repeat; width: 287px; height: 11px;}
#phone-bridge { background: url(img/phone-bridge.gif) repeat-x; height: 33px; position: relative; width: 260px; margin: -13px 0 0 17px; }
.bridge { background: url(img/bridge.gif) repeat-x;  height: 33px; position: relative; width: 260px; margin: -13px 0 0 17px;  }

.box { background: url(img/news-bg.gif) repeat-y; width: 247px; padding: 20px 20px 0; color: #d9d9d9; font-size: 1.1em; }
.box a { font-weight: bold;  color: #fba838; margin-bottom: 5px; }

#banner-box p { padding: 10px 0; }
#banner-box img { border: 3px solid #fff; }


#footer { margin: 10px 0 10px 0; text-align: right; color: #fff; }
#footer span { margin: 0 10px; }
#footer a { color: #fff; }

#banner { background: #d8d5cd; padding: 20px; }
#banner h3 { font-weight: bold; color: #666666; margin-bottom: 10px; }
#banner .image { float: left; margin-right: 20px; }
#banner .banner-text { float: left; width:  }

ul.line-list { margin-bottom: 20px; }
ul.line-list li { margin: 0 0 5px -10px; border-bottom: 1px solid #f1f1f1; margin-right: 10px; padding: 1px 0 4px 10px; }

ol.list { padding: 10px 0 40px 10px; list-style: decimal; margin-left: 30px; }
ol.list li { padding: 3px 0;  }

#rightCol { width: 262px; float: left;  }
#rightCol #phone { width: 287px; height: 228px; background: url(img/phone.png) no-repeat; }
#rightCol .archive { padding: 0 0 20px; text-align: right; font-size: .9em }
#rightCol .archive a { color: #fff; }
#col1 { width: 131px; float: left; }

.lead { padding-bottom: 20px; }
h2#news a { background: url(img/news.gif) no-repeat 0 0; height: 75px; width: 233px; display: block; margin: -15px 0 10px -10px; text-indent: -9999em;  }
h2#laws a { background: url(img/laws.gif) no-repeat 0 0; height: 75px; width: 233px; display: block; margin: -15px 0 10px -10px; text-indent: -9999em;  }


/* Form
----------------------------------------------- */
form { margin: 0 0 20px -140px; width: 520px; }
form  fieldset { background: #f1f1f1; padding: 20px 20px 0;  }
form  fieldset textarea { width: 250px; height: 94px; margin-bottom: 20px; border: 2px solid #ccc; padding: 4px;  }
form .left { width: 217px; float: left }
form label { display: block; font-weight: bold;  }
form .right { width: 200px; float: left }
form  fieldset .input-text { border: 2px solid #ccc; margin-bottom: 30px; width: 150px; padding: 4px 2px;     }
.input-text:focus, textarea:focus { border: 2px solid #0daad7; }
.error { display: none; font-weight: bold; width: 225px; margin-top: 30px; background: #fa8f12; color: #fff; margin-left: -140px; width: 499px; padding: 5px 0 5px 20px; border-left: 1px solid #ccc;  }

form#send-comment { margin: 0; border: 0; }
form#send-comment .input-text { margin-bottom: 10px; }
form#send-comment textarea { width: 445px; }
#comment-list { margin: 0 0 30px; }
#comment-list li { border-top: 1px solid #f1f1f1; padding: 10px;  }
#comment-list li strong { color: #1a86b7; }
#comment { margin-top: 50px; }
form input.button { width: 79px; height: 27px; text-align: center; font-weight: bold; background: url(img/button.gif) no-repeat;  color: #f3f1eb; border: none; cursor: pointer; text-indent: -9999em; }
form input.button:hover { background-position: right; }
.error.article { margin: 30px 0 0 0 !important; }

/* sifr */

@media screen {  
  .sIFR-flash {  visibility: visible !important;  margin: 0;  padding: 0;  }  
  .sIFR-replaced, .sIFR-ignore {  visibility: visible !important;  }  
  .sIFR-alternate {  position: absolute;  left: 0;  top: 0;  width: 0;  height: 0;  display: block;  overflow: hidden;  }  
  .sIFR-replaced div.sIFR-fixfocus {  margin: 0pt;  padding: 0pt;  overflow: auto;  letter-spacing: 0px;  float: none;  } 
} 
@media print {  
  .sIFR-flash {  display: none !important;  height: 0;  width: 0;  position: absolute;  overflow: hidden;  }  
  .sIFR-alternate {  visibility : visible !important;  display    : block   !important;  position   : static  !important;  left       : auto    !important;  top        : auto    !important;  width      : auto    !important;  height     : auto    !important;  } 
  } /* Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active so they only apply if sIFR is active. Make sure to limit the CSS to the screen media type, in order not to have the printed text come out weird. */ 
@media screen {  /* Example:  .sIFR-active h1 {  font-family: Verdana;  visibility: hidden;  }  */ }