/* Color Legend */





/* Reset */

html,body {margin:0; padding:0; border:0; background: transparent; font-size:10px; }

div, span, article, aside, footer, header, nav, sectiom,
h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, li,
table, tr, th, td, tbody, tfoot, thead {
	margin:0;
	padding:0;
	border:0;
	vertical-align: baseline;
	background:transparent;
     }
img { margin:0; padding:0; border:0 }

table, tr, th, td, tbody, tfoot, thead {
	margin:0; padding:0; border:0;
	vertical-align:baseline;
	background: transparent;
    }
	
table {border-collapse:collapse; border-spacing: o; }

input, select,textarea, form, fieldset {
	margin:0; padding:0; border:0;
     }

article, aside, dialog, figure, footer, header, hgroup, nav, section {
	display:block;}	
	
h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike {
	font-family:Arial, Helvetica, sans-serif;
	font-size:100% ;
	font-weight: normal;
	font-style: normal;
	line-height: 100%;
	text-indent: 0;
	text-decoration: none;
	text-align: left;
	color: #000;
           }
		   
ol, ul { list-style:none;}

/* Global */

html {}
body { background-color:#999;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;   }



/* Headings */

h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #000; }

h1 { font-size:24px; padding:15px 0; border-bottom:1px solid #000;
	margin-bottom:15px; color:#009;}

h2 { font-size:20px;}

h3 { font-size:16px; margin-bottom:5px;}

h4 { font-size:12px; padding:5px 0; border-bottom:1px solid #000;
	margin-bottom:15px; color:#F00; text-align:center;}

h5 { font-size:14px;}	

h6 { font-size:24px; padding:5px; text-align:center; border-bottom:1px solid #000;
	margin-bottom:15px; color:#009; text-align:center;}
	
h7 { }


h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin:0;} 

/* Text Elements */

p         { color:#000; font-size:12px; line-height:150%; margin:15px 0;}
p.left    { margin: 1.5em 1.5em 1.5em 0; padding: 0;}
p.right   { margin: 1.5em 1.5em 1.5em 0; padding: 0;}

a               {       }
a:link          { color: #00F; }
a:visited       { color: #00F; }
a:active        { color: #00F; }
a:focus         { color: #FF0; }
a:hover         { color: #f00; }

blockquote      { color: #000;; font-size:12px; }

strong           { font-weight: bold;}
em               { font-style:italic;}

/* Images */

.image-frame { padding:8px; border:1px #666 solid; margin:10px 8px;}

.image-frame-icon { padding-right:6px; padding-left:6px; margin-left:5px; float:right;}



.image-frame-zaštitabilja { padding:8px; border:1px #666 solid; margin:10px 10px;}

.image-frameKrpan { padding:8px; border:1px #666 solid; margin:10px 35px;}

.slika-onama { border:1px #000 solid;}



.slika-onama-s {border:2px solid #006;  border-radius:5px;}


.slika-baner{ border-top:5px #000 solid; border-bottom:5px #000 solid;}

.slika-centar { border:#000 solid 1px; margin:20px 20px;}

.slika-malilogo { border:#000 1px solid; margin:5px 5px;.slika... }

.slika-proizvod  { border:#000 1px solid; margin: 10px 10px; }

.slika-BCS-modalPopUp  { padding:8px; border:1px #666 solid; margin-left:20px;}

.slika-sip-modalPopUp  { padding:8px; border:1px #666 solid; margin-left:20px; float left}

.slika-krpan-modalPopUp  { padding:8px; border:1px #666 solid; margin-left:20px; float:right;}

.image-frameBerac { padding:8px; border:1px #666 solid; margin:5px 5px;}

.slika-krpan-prednosti  {float:right;}



/* Lists */
.table-ul            { font-size:12px; margin:10px;}
ul            { }
ol            { list-style-type:decimal;}

ul li         { color: #000; font-size:12px; }
ol li         { color: #000; font-size:12px; }

dl            {}
dt            {}
dd            {}


/* Tables */

.roundcorners { border:2px solid #FFF; -webkit-border-radius:30px; -moz-border-radius:30px; -ms-border-radius:30px; border-radius:30px;}



#tableO td{border:#FFF solid 1px; }/* kada hoćeš da bude obojano ako radiš hoover nad redom */
#tableO td:hover {border:#06F solid 2px; }/* kada hoćeš da bude obojano ako radiš hoover nad redom */

#tableX { border-collapse: collapse; float:left; background-image:url(../images/metal.jpg); margin-bottom:10px;  }
#tableX th {  border: 1px #CCC solid; font-size:14px; background-color:#666; text-align:center; color:#FFF;  vertical-align:middle; }
#tableX th p  { font-size:16px; font-style:oblique; color:#FFF; text-align:center; }
#tableX thead { background:#CAFF95; }


#tableX td  {   font-size:14px; vertical-align:bottom; }
#tableX td p  {font-size:14px; }
#tableX td h7  {font-size:12px; }


#table-footer {  }
#table-footer th { padding: .3em; border: 1px #CCC solid; font-size:14px; background-color:#666; text-align:center; color:#FFF;  vertical-align:middle; }
#table-footer th p  { font-size:12px; font-style:oblique; color:#FFF; text-align:center; }

#table-footer a:link          { color: #FFF; }
#table-footer a:visited       { color: #FFF; }
#table-footer a:active        { color: #FFF; }
#table-footer a:focus         { color: #FFF; }
#table-footer a:hover         { color: #0FF; }


#table-footer td  {   font-size:12px; text-align:left; vertical-align:middle; color:#FFF; padding: .5em; font-style:italic; }


#table-rightside { border-collapse: collapse; background-color:#333;   }
#table-rightside th {  border: 1px #CCC solid; font-size:14px; background-color:#666; text-align:center; color:#FFF;  vertical-align:middle; }
#table-rightside th p { font-size:16px; font-style:oblique; color:#FFF; text-align:center; }

#table-rightside a:link          { color: #FF0; }
#table-rightside a:visited       { color: #FF0; }
#table-rightside a:active        { color: #FF0; }
#table-rightside a:focus         { color: #FF0; }
#table-rightside a:hover         { color: #0FF; }

#table-rightside td  {   font-size:14px; vertical-align:bottom; border: 3px #FFF solid; text-align:center; padding: .2em; }
#table-rightside td p  {font-size:14px; color:#FFF; }
#table-rightside td h3  {font-size:14px; text-align:center; }

#table-rightside td h7 {font-size:12px; }



#table3 {  }
#table3 th {  border: 3px #FFF solid; font-size:18px; font-weight:normal; background-color:#FFFF80; text-align:center; }





.table-VITLA { margin-left:3PX; margin-bottom:5px;  }
.table-proizvod { }
table           { }

tr              { width:50%; }
.odd            { background-color:#eee;}
.ever           { background-color:#ccc;}

th              { font-weight:bold;}
thead, th       { background: #ccc;}

tbody           {}

th,td,caption   {}
caption         { }

tfoot           {}
.tfooter        { background-color:#ccc; text-align:center; font-stretch:italic; }

caption         { background: #efefef;}

/* Misc classes
-------------------------------------------------------------- */

.small     { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.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; }




/* Containers */ 

#outer               {  width:905px; margin:0 auto; background-color:#333; border-left:#000 2px solid; border-right:#000 2px solid; border-bottom:#000 2px solid;  }

#wrapper             {  width:900px; margin:0 auto; background-color:#FFF;   }

#logo                {
	margin:20px 0;
	float:left;
	left: 144px;
	top: -17px;
}

#social-media-icons         { float:right; margin-top:30px;	}
#social-media-icons ul li   { display:inline	}
#social-media-icons ul      { margin-top:40px;	}




#topnav12             { clear:both; width:900px; }

#topnav              { clear:both; width:900px;}

#locationnav             { clear:both; width:800px; float:left; padding-left: 15px; height: 40px; }


.menu li  { padding:0px 0; margin:0px 10; list-style-type:none; float:left; margin-right:2px; margin-left:15px;  margin-bottom:5px; }

.menu li a:link, .menu li a:visited  { display:block; height:55px;}



.home { background-image:url(../images/navigation_bar/uvod-hover.png); width:160px; }
.home a { background-image:url(../images/navigation_bar/uvod.png);}

.about { background-image:url(../images/navigation_bar/o-nama-hover.png); width:160px;  }
.about a { background-image:url(../images/navigation_bar/o-nama.png);}

.products { background-image:url(../images/navigation_bar/ponuda-hover.png);  width:160px; }
.products a { background-image:url(../images/navigation_bar/ponuda.png);}

.news { background-image:url(../images/navigation_bar/novosti-hover.png);  width:160px; }
.news a { background-image:url(../images/navigation_bar/novosti.png);}

.contact { background-image:url(../images/navigation_bar/kontak-hover.png);  width:160px; }
.contact a { background-image:url(../images/navigation_bar/kontakt.png);}

.menu li a:hover      { background:none;}

.menu li a span  { display:none;}






 li a:hover { background-image:none;}  
 li a span  { display:none;}

#topnav a:link          { color: #000; }
#topnav a:visited       { color: #000; }
#topnav a:active        { color: #000; }
#topnav a:focus         { color: #000; }
#topnav a:hover         { color: #000; }







#banner				 { margin-bottom:30px;		}

#slider              { margin-bottom:-30px;     }

#content			 { width:705px; float:left; margin-top:-10px; padding-left:8px; 		}



#content-fullwidth-s  {  width:896; float:left; padding-left:8px; margin-top:-10px;}



#content-fullwidth-daske   { width:900px; margin:0px 8px;}

#zastupstva { margin-bottom:0px; margin-top:10px; padding:5px 54px;                }


#rightside			 {  width:180px; float:right; margin-right:3px; padding-left:3px; background-color:#F7F7F7; margin-bottom:10px;		}

#rightside-brands			 { margin-left:10px; margin-bottom:10px; width:auto; float:left; margin-top:20px; padding-left:5px; border:#999 1px solid;		}

#rightside-zastita-bilja			 { width:400px; float:right; margin-top:10px; padding-left:10px;  		}

#rightside-prikolice			 { width:350px; float:right; margin-top:10px; padding-left:10px;  		}

#rightside-gramip			 { width:300px; float:right; margin-top:10px; padding-left:10px; border-left:#999 1px solid; 		}

#footer				 { clear:both; padding-bottom:30px; padding-top:10px;  border-top:1px #000 solid; background-image:url(../images/metal.jpg); }








#box1 { float:left; width:900px; display:inline-block; margin:10px 0px; border-top:25px #F00 solid; background-image:url(../images/Box1Bckg900x1100.jpg); border-left:#000 1PX SOLID; border-right:#000 1px solid; border-bottom:#000 1px solid; 	}

#box1-end { float:left; width:900px; display:inline-block; margin:10px 0px; border-top:25px #F00 solid;  	}


#box2 {	 width:800px; float:left; margin:10px 45px; border-top:25px #F00 solid; background-image:url(../images/Box1Bckg900x1100.jpg); border-left:#000 1PX SOLID; border-right:#000 1px solid; border-bottom:#000 1PX SOLID;		}

#box3 {	 width:800px; float:left; margin:10px 45px; border-top:25px #F00 solid; background-image:url(../images/Box1Bckg900x1100.jpg); border-left:#000 1PX SOLID; border-right:#000 1px solid ; border-bottom:#000 1PX SOLID;		}

#box1 h3,#box2 h3,#box3 h3 { margin: 10px 10px 10px 10px; text-align:center; color:#F00;}
#box1 p,#box2 p,#box3 p { padding:5px  }

#box4 {	width:170px; float:left; margin:10px 3px; border-top:5px #900 solid; background-image:url(../images/box%204%20ikona.jpg); border-left:#000 1PX SOLID; border-right:#000 1px solid; height:80PX;	}
#box4 h3{ margin: 10px 10px 10px 10px; text-align:center; color:#FFF; }
#box4 p { padding:5px   }

#box5 { margin-right:15px;	}

#box6 { float:left; width:50%; margin:15px; margin-right:5px;	}

#box7  { width:200px; float:left; margin:10px 10px; height:102PX;}

#box8  { width:298px; float:left; border:#000 1px solid; background-image:url(../images/298x800bckg-blueimageBoxes.jpg); border-top:#F00 solid 10px; }

#box9  { width:298px; float:left; border:#000 1px solid; background-image:url(../images/298x800bckgimageBoxes.jpg); border-top:#F00 solid 10px; }

#box10  { width:298px; float:left; border:#000 1px solid; background-image:url(../images/298x800bckg-imageBoxes.jpg); border-top:#F00 solid 10px; }

#box11 { width:298px; float:left; border:#000 1px solid; background-image:url(../images/298x800bckg-blueimageBoxes.jpg); margin:2px 65px; margin-left:80px; }

#box12 { width:298px; float:left; border:#000 1px solid; background-image:url(../images/298x800bckgimageBoxes.jpg); margin:2px 65px; }



#boxBCS { float:left; width:890px; display:inline-block; margin:20px 0px; border-top:25px solid #06F; background-color:#FFF; 	}

#boxBCS h3 { margin: 10px 10px 10px 10px; text-align:center; color:#06F; font-style:italic;}
#boxBCS p { padding:2px;}




#boxBCS-PANNELS { float:left; width:900px; display:inline-block; margin:10px 0px; border-top:25px solid #06F; background-color:#FFF; 	}
#boxBCS-PANNELS h3 { margin: 10px 10px 10px 10px; text-align:center; color:#06F; font-style:italic;}
#boxBCS-PANNELS p { padding:2px; font-size:14px;}
#boxBCS-PANNELS h5 {  text-align:center; color:#06F; font-style:italic;}
#boxBCS-PANNELS h2 {  text-align:left; color:#000; font-style:italic; font-size:14px;}



#box-krpan-PANNELS { float:left; width:900px; display:inline-block; margin:10px 0px; border-top:25px solid #F00; background-color:#FFF; 	}
#box-krpan-PANNELS h3 { margin: 10px 10px 10px 10px; text-align:center; color:#F00; font-style:italic;}
#box-krpan-PANNELS p { padding:2px; font-size:14px;}
#box-krpan-PANNELS h5 {  text-align:center; color:#F00; font-style:italic;}
#box-krpan-PANNELS h2 {  text-align:left; color:#000; font-style:italic; font-size:14px;}


#box-krpan-icons { float:right; width:200px; display:block; margin-right:20px; 	}





#boxGRAMIP-invisible { float:left; width:100%; }  /* služi da zaustavlja izmicanje boxova kada radiš hoover nad ikonom koja se tada oboji */ 

#box-left-invisible { float:left; width:200px; }  /* služi za spry vertical menu bar */ 


#box-right-invisible { float:right; width:650px; margin-right:5px; }  /* služi za stvari desno od spry vertical menu bar */ 











#boxGRAMIP { float:left; width:100%; margin:20px 0px; border-top:25px solid #0C0; background-color:#FFF; 	}

#boxGRAMIP h3 { margin: 10px 10px 10px 10px; text-align:center; color:#0C0; font-style:italic;}
#boxGRAMIP p { padding:2px;}


#boxGRAMIP-end { float:left; width:100%; margin:5px 0px; border-top:25px solid #0C0; background-color:#FFF; 	}





#boxSIP { float:left; width:100%; margin:20px 0px; border-top:25px solid #FF0600; background-color:#FFF; 	}

#boxSIP h3 { margin: 10px 10px 10px 10px; text-align:center; color:#FF0600; font-style:italic; font-size:16px}



#boxSIP p { padding:1px;}



#box-sip { width:280px; float:left; border: #000 1px solid; margin-left:10px; background-color:#FFF; margin-bottom:5px; padding-bottom:3px; }



#box-sip h3 { margin: 10px 10px 10px 10px; text-align:center; color:#F00; font-style:italic; border-bottom:#000 1 px solid; }

#rightside-sip	{ width:350px; float:right; border-left:#F60 1px solid; padding-left:2px;}

#sip-slova  { font-size:14px; color:#F00; font-weight:bold; text-align:left;}

#box-berac   { height: 160 px; width:125px; float:left; margin:1px;}

#box-berac:hover   { height: 158 px; width:123px; float:left; border:#F00 solid 2px;}



#box-berac-osovina   { height: 180 px; width:220px; float:left; margin:1px;}

#box-berac-osovina:hover   { height: 180 px; width:220px; float:left; margin:1px; border:#F00 solid 2px;}




#box-krpan-prednosti  { height:65px; }

#box-krpan-navigation bar { width:auto; padding:3 px; }




#box-s-ponude { width:200px; float:left; margin:10px 10px; height:300; border-top: #006 10px solid; background-image:url(../images/drvo.png); border-left:#000 1px solid; border-right:#000 1px solid; border-bottom:#000 1px solid;}


#box-s-ponude:hover { border: 4px solid #F00;}




#box-s-ponude p { text-align:center; font-size:12px; ;}

#box-s-ponude h5 { text-align:center; font-size:20px; border-bottom:#000 1px solid;}

#box-s-ponude a:link { color:#FFF; text-align:center; font-size:20px; }

#box-s-ponude a:hover {  color:#FF0; font-size:20px; ;}

#box-s-ponude a:visited {  color:#FFF; font-size:20px; ;}


#box-drvo { clear:both; float:left;}


#table-podaci { padding:10px; text-align:center; font-size:14px; color:#FFF; border:#000 1px solid; background-color:#484848; }

#table-unosi { text-align:center; font-size:14px; border:#000 1px solid;}

#table-podaci-vitla { padding:10px; text-align:center; font-size:11px; color:#FFF; border:#000 1px solid; background-color:#484848; }

#table-unosi-vitla { text-align:center; font-size:11px; border:#000 1px solid; background-color:#FFF;}

#table-slike-BCS {  border:1px solid #000; margin:2px 2px;      }

#table-BCS-naslovi {  background-color:#333; text-align:center; border:1px #000 solid;
 }

#table-BCS-naslovi h3 { color:#FFF; font-size:9px;}

#table-GRAMIP-naslovi {  background-color:#333; text-align:center; border:1px #000 solid; margin-left:15px;
 }

#gramip-slova { color:#FFF; font-size:12px; font-style:oblique;}

#table-slike-gramip {  border:5px solid #B90000; margin:2px 2px;      }


#bijela-slova  { font-size:12px; color:#FFF;}


#slikica { float:right;}

#slikica-sip { padding: 10px ; border:#06F solid 1px; }

#rightside-text	{ width:350px; float:right; border-left:#F60 1px solid; padding-left:2px;}

#rightside-text-no-line	{ width:420px; float:right; }


#box-novosti { float:left; width:700px; display:inline-block; margin:20px 0px; border-top:25px solid #06F; background-color:#FFF; 	}


#box-novosti-fullwidth { width:900px; display:inline-block; margin:20px 0px; border-top:25px solid #06F; background-color:#FFF; 	}

/* Layout Extra */


/* Navigation Extra */

/* Forms */

form ol { list-style-type:none;}

form { text-align:left; margin:20px;}
	 
label { 
       float: left; width: 150px;
	   margin-top:5px;
	   text-align:right; display:block; background:none;
	   font-weight:bold;
	  
	  }

submit  { background:none;}

input { width: 280px; margin:0 0 16px 10px; border:1px #bbb solid; padding:5px;
        background:none ; }

input:focus, textarea:focus { background-color:#80FFFF; }
		
text area {
	width: 380px; height:150px;
	margin:0 0 16px 10px;
	border:1px #bbb solid; padding:5px; background:none;
	margin-bottom:16px;}
	
select   { margin-bottom:20px;    }

.month { margin-left:155px;}

.submit { width:90px; height:25px; margin-left:170px; font-size:12px; }

br     { clear:left;}

.clear { clear:both;}	


/* Miscellaneous */	

.copyright-text  { font-size:80%; font-style:italic; color:#333; }
.copyright-text  { font-size:80%; font-style:italic; color:#333; }

.date          { font-weight:bold; color:#F60; margin-bottom:3px;}
.footer-text   { font-size:100%; font-style:normal; color:#FFF; text-align:center;}

.title         { font-size:80%; font-style:italic; color:#333; }
.subtitle      { font-size:80%; font-style:italic; color:#333; }

.artist        { font-size:80%; font-style:italic; color:#333; }
.author        { font-size:80%; font-style:italic; color:#333; }
.editor        { font-size:80%; font-style:italic; color:#333; }

.pub-date      { font-size:80%; font-style:italic; color:#333; }
.article-date  { font-size:80%; font-style:italic; color:#333; }
.location      { font-size:80%; font-style:italic; color:#333; }

.float-right      { float:right; }
.float-left       { float:left; }
.clear            { clear:both; }

.hide             { diplay:none; }
.block            { diplay:block; }
.inline           { diplay:inline; }

.added            {  background:#D7D7EF; }
.removed          {  background:#FFCECE; color:f00;}
.changed          { background:#FFB; }




/* Success, info, notice and error/alert boxes
-------------------------------------------------------------- */

.error,alert,notice,success,info { padding: 0.8em; margin-bottom: 1em; border: 2px solid #ddd; }

.error, .alert { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; }

.notice        { background: #fff6bf; color: #514721; border-color: #ffd324; }

.success       { background: #e6efc2; color: #264409; border-color: #c6d880; }

.info          { background: #d5edf8; color: #205791; border-color: #92cae4; }

.error a{ color: #8a1f11; } 
.alert a { color: #8a1f11; }


.notice a          { color: #514721; }
.success a         { color: #264409; }
.info a            { color: #205791; }