body {
	 margin: 0px 0px 0px 0px;
	 font-family: Arial, Helvetica, sans-serif; 
	 font-size: 16px;
 	 text-align:left;


 }
input {
 font-family: Arial, Helvetica, sans-serif; 
	 font-size: 20px;
 	 text-align:left;
}
a, a:visited {
	/*color:white;*/
	text-decoration:none;
  }	
a:hover {
	color:blue;
  }	

img {
	border:0px;
	border-style:none;
}	
p {
	 margin-top: 0px;	  
	 margin-bottom: 0px;
	 font-family: Arial, Helvetica, sans-serif; 
	 /*font-size: 14px;*/
}

h1 {
	font-family:  Arial,Helvetica, sans-serif;
	font-size:17px; 
	font-weight:bold;
	margin:10px 0px 10px 0px;
	padding:0px;
	color: blue;
	/*font-style:italic;*/
	}

h2 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:normal;
	padding:0;
	color: blue;
}
h3 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	margin-top:0px;
	margin-bottom:0px;
	margin-left:0px;
	margin-right:0px;
	}
hr {
	color:#ff8400;
	}


.CSSTableGenerator {
	margin:0px;padding:0px;
	width:100%;
	box-shadow: 10px 10px 5px #888888;
	border:1px solid #000000;
	
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
	
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
	
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
	
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}.CSSTableGenerator table{
    border-collapse: collapse;
        border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
}
.CSSTableGenerator table tr:first-child td:first-child {
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}
.CSSTableGenerator table tr:first-child td:last-child {
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
}.CSSTableGenerator tr:last-child td:first-child{
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
}.CSSTableGenerator tr:hover td{
	
}
.CSSTableGenerator tr:nth-child(odd){ background-color:#def4f7; }
.CSSTableGenerator tr:nth-child(even)    { background-color:#ffffff; }.CSSTableGenerator td{
	vertical-align:middle;
	
	
	border:1px solid #000000;
	border-width:0px 1px 1px 0px;
	text-align:right;
	padding:5px;
	font-size:14px;
	font-family:Arial;
	font-weight:normal;
	color:#000000;
}.CSSTableGenerator tr:last-child td{
	border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
	border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
		background:-o-linear-gradient(bottom, #005fbf 5%, #003f7f 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #005fbf), color-stop(1, #003f7f) );
	background:-moz-linear-gradient( center top, #005fbf 5%, #003f7f 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#005fbf", endColorstr="#003f7f");	background: -o-linear-gradient(top,#005fbf,003f7f);

	background-color:#005fbf;
	border:0px solid #000000;
	text-align:center;
	border-width:0px 0px 1px 1px;
	font-size:14px;
	font-family:Arial;
	font-weight:bold;
	color:#ffffff;
}
.CSSTableGenerator tr:first-child:hover td{
	background:-o-linear-gradient(bottom, #005fbf 5%, #003f7f 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #005fbf), color-stop(1, #003f7f) );
	background:-moz-linear-gradient( center top, #005fbf 5%, #003f7f 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#005fbf", endColorstr="#003f7f");	background: -o-linear-gradient(top,#005fbf,003f7f);

	background-color:#005fbf;
}
.CSSTableGenerator tr:first-child td:first-child{
	border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
	border-width:0px 0px 1px 1px;
}


div.okvir2{
width:100%; 
padding:10px 20px 10px 20px;
}

#wrapper {margin-top:50px; padding:0px 10px 0px 10px;}
#tblRez {width:600px;}




input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]{
    width:40px;
}
div.unos {
   padding:0px 10px 0px 10px; width:auto;
}


input:hover {  background-color:light-blue;}
span.spanRuka {border:1px solid white;}

/*Monitor*/
@media (min-width: 769px) {
    div.header { width:100%;  height:70px;  margin:auto; 
        background:url(images/tlak.jpg) top center no-repeat;
         background-size: 200px 75px; padding-top:50px;
    }
   #okvir{ width:100%; text-align:center; margin:auto; background-color:white; border:1px solid black;}
   #prozor{ width:100%; max-width:600px;text-align:center; margin:auto; padding-top:30px;padding-bottom:30px;}
    body { font-size: 26px;}
    input {font-size: 20px;}
    select {font-size: 20px;}
    button {font-size: 20px;}
   .tblRez {width:100%;  color:white;}
   
   .kolona {width:380px;  display: inline-block;  height: auto;}
   .kolonaRuka {width:380px; display: inline-block;  height: auto;}
   
   .kolonaNapomena {width:380px;  display: inline-block;  height: auto;}

   .redNaziv{width:140px; text-align:right; float:left;}
   .redUnos{width:140px;float:left;padding-left:20px;text-align:left;}
   .redNazivRuka{float:left;width:140px;text-align:right;}
   .redUnosRuka{float:left;text-align: left;padding-left:20px; width:220px;}
   .redNazivNapomena{float:left;width:140px;text-align:right;}
   .redUnosNapomena{float:left;padding-left:20px;text-align: left;}
   #napomena {width:100%; max-width:200px;}
   span.spanRuka:hover {border:1px solid red;}
   span.title {font-weight:bold; padding: 10px;}
   div.tool {padding:  5px 0px 5px 0px ;}
   div.unos { padding:  20px 0px 20px 0px; border: 1px solid gray;
       -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
        box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
   }
}
div.clear{clear:both;}


/*Portrait Tablet*/
@media (min-width: 481px) and (max-width: 768px) {
   div.header { width:100%;  height:75px;  background-color:blue; margin:auto;}
    body { font-size: 26px;}
    input {font-size: 20px;}
    select {font-size: 20px;}
    button {font-size: 20px;}
   #okvir{ width:480px; text-align:center;}
   div.unos { padding:40px 10px 20px 10px; width:auto;}
   .tblRez {width:480px; color:blue;}
   .kolona {width:150px;  display: inline-block;  height: auto;}
   .kolonaRuka {width:280px;  display: inline-block; height: auto;}
   .kolonaNapomena {width:320px; height: 50px; display: inline-block; }

   .redNaziv{width:60px;float:left; display:block;}
   .redUnos{width:45px;float:right;padding-right:10px; display:inline-block; height: auto;}
   .redNazivRuka{width:70px;float:left; display:block;}
   .redUnosRuka{width:200px;float:left; display:block;}
   .redNazivNapomena{width:60px; display:block;}
   .redUnosNapomena{width:320px; display:block; }
    #napomena{width:270px;}

   div.gumbi { padding:20px 10px 20px 10px; width:auto;}
   input:hover {  background-color:#F0F8FF; border-color:red;}
   span.spanRuka:hover {border:1px solid red;}
   div.logo {display:none;}
   div.datumvrijeme {display:none;}


}
/*Landscape smart phone 
@media (min-width: 321px) and (max-width: 480px) {
   div.header { width:100%;  height:75px;  background-color:green; margin:auto;}
    body { font-size: 26px;}
    input {font-size: 20px;}
    select {font-size: 20px;}
    button {font-size: 20px;}
   #okvir{ width:480px; text-align:center;}
   div.unos { padding:40px 10px 20px 10px; width:auto;}
   .tblRez {width:480px; color:blue;}
   .kolona {width:150px;  display: inline-block;  height: auto;}
   .kolonaRuka {width:280px;  display: inline-block; height: auto;}
   .kolonaNapomena {width:320px; height: 50px; display: inline-block; }

   .redNaziv{width:60px;float:left; display:block;}
   .redUnos{width:45px;float:right;padding-right:10px; display:inline-block; height: auto;}
   .redNazivRuka{width:70px;float:left; display:block;}
   .redUnosRuka{width:200px;float:left; display:block;}
   .redNazivNapomena{width:60px; display:block;}
   .redUnosNapomena{width:320px; display:block; }
    #napomena{width:270px;}

   div.gumbi { padding:20px 10px 20px 10px; width:auto;}
   input:hover {  background-color:#F0F8FF; border-color:red;}
   span.spanRuka:hover {border:1px solid red;}
    div.logo {display:none;}
    div.datumvrijeme {display:none;}
}
*/


/*Portrait smart phone*/
/*@media (max-width: 320px) {*/
@media (max-width: 480px) {
    div.header { width:100%; vertical-align:center; color:white; height:75px;  background-color:green; margin:auto;}
    body { font-size: 26px;}
    input {font-size: 20px;}
    select {font-size: 20px;}
    button {font-size: 20px;}
   #okvir{ width:320px; text-align:center;}
   div.unos { padding:40px 10px 20px 10px; width:auto;}
   .tblRez {width:320px; color:blue;}
   .kolona {width:150px;  display: inline-block;  height: auto;}
   .kolonaRuka {width:280px;  display: inline-block; height: auto;}
   .kolonaNapomena {width:320px; height: 50px; display: inline-block; }

   .redNaziv{width:60px;float:left; display:block;}
   .redUnos{width:45px;float:right;padding-right:10px; display:inline-block; height: auto;}
   .redNazivRuka{width:70px;float:left; display:block;}
   .redUnosRuka{width:200px;float:left; display:block;}
   .redNazivNapomena{width:60px; display:block;}
   .redUnosNapomena{width:320px; display:block; }
    #napomena{width:270px;}

   div.gumbi { padding:20px 10px 20px 10px; width:auto;}
   input:hover {  background-color:#F0F8FF; border-color:red;}
   span.spanRuka:hover {border:1px solid red;}
 div.logo {display:none;}
    div.datumvrijeme {display:none;}

}