/* ----- MAG HOME PAGE ----- */

/* FIXED TOP ----- */
.fixedTop {
  overflow: hidden;
  background-color: white;
  position: fixed; /* Set to fixed position */
  top: 0; /* Position at the top of the page - Inic: 0 */
  width: 100%; /* Full width */
}
.glavni-dio {
  margin-top: 30px; /* Add a top margin to avoid content overlay */
}
/* ----- FIXED TOP */


.container {
	margin: 0px auto 0px auto;
	padding: 10px 10px 10px 10px;
  position: relative; /* inic. relative */
  width: 97%; /*inic. 50% */
}

.overlay {
  position: absolute;
	bottom: 0; /* inic: 0 */
  color: #f1f1f1; 
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

.container:hover .overlay {
  opacity: 1;
}


/* ----- TOP PAGE BUTTON ----- */

#PageUpBtn {
  display: none;
  position: fixed;
  bottom: 50px;
  right: 50px;
  z-index: 99;
  font-size: 12px;
	border-style: solid;
	border-width: 0px; /* inic 1 px */
	border-color: green;
  outline: none;
  background-color: yellow;
	background-image: url("slike/to-top-page.jpg");
  color: red;
  cursor: pointer;
  padding: 25px;
  border-radius: 10px;
}
#PageUpBtn:hover {
  background-color: lime;
	background-image: url("slike/to-top-page.jpg");
}

/* ----- NAPOMENE WEB DESIGNERA ----- */

p.novo {
	color: red;
}
p.napomena {
	color: magenta;
}
.asterix {
	color: red;
	font-style:oblique;
	
}
input {
	text-align:center;
	font-size: 14px;
}
textarea {
	font-family: "Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
	font-size: 14px;
}
legend {
	font-size: 12px;
}

/* ----- POSEBNI FONTOVI ----- */

.mali-font {
	font-size: 11px;
}
	
/* ----- LINKOVI ----- */

a:link {
 	font-family: "Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
 	font-size: 11pt; /* inic. 11pt */
 	font-weight: bold;
	color: darkblue; /*orig. darkblue */
 	text-decoration: none;
}
a:visited {
  color: dimgray;
 	text-decoration: none;
 	font-family: "Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
 	font-size: 11pt; /* inic. 11pt */
 	font-weight: bold;
}
a:hover {
 	color: darkblue; /* orig. blue */
 	text-decoration: underline;
 	font-family: "Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
 	font-size: 11pt; /* inic. 11pt */
 	font-weight: bold;
}
a:active {
  color: orange; /* orig. orange */
}

/* ----- TIJELO ----- */

body {
	margin: 0px;
	padding: 0px;
	text-align: center; /* iskljucivo radi centriranoga prikaza u IE! */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 11pt;
	font-weight: normal;
}

#svirac-index {
	margin: 0px 0px 0px 0px;
	background-color: #000; /* inic. #3FF */
	height: 20px; /* inic. 20px; bez zadanog parametra inic. 40px) */
	width: 280px; /* min. 270px - da bi se vidjela i audio kontrola glasnoce! */
	border-radius: 10px;
}

#svirac {
	margin: 0px 0px 0px 0px;
	background-color: #3FF; /* inic. #3FF */
	height: 20px; /* inic. 20px; bez zadanog parametra inic. 40px) */
	width: 280px; /* min. 270px - da bi se vidjela i audio kontrola glasnoce! */
	border-radius: 10px;

}

/* ----- OMOTAC ----- */

#omotac {
  width: 100%; /* inic. 963px */
  margin: 0px;
  padding: 0px;
  margin-left: auto;
  margin-right: auto;
}

/* ----- ZAGLAVLJE (BANER) ----- */

#zaglavlje {
	width: 100%;
	margin: 0px;
	padding: 0px;
	background: white;
}
/* ----- IZBORNIK ----- */

#izbornik {
	width: 100%;
	height: 20px; /* inic. 20px */
  margin: 0px;
  padding: 2px;
}
#izbornik ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
  overflow: hidden; /* pridodano iz primjera */
	border-radius: 10px;
}
#izbornik li {
	float: left;
	background-color: lightblue;
	border: 0px solid #555;
	border-radius: 10px;
}
#izbornik li a {
	display: block;
	width: 105px; /* inic. 126px */
	text-align: center;
	padding: 1px;
	text-decoration: none;
	color: darkblue; /*orig. darkblue */
}

#izbornik li a:hover:not(.active) {
	border: 0px solid #555;
	border-radius: 10px;
  background-color: yellow; /* mozda bolje #D7FFFF ? */
}
#izbornik a:active {
	color: orange; /* inic. orange */
}
.active {
	border: 0px solid #555;
	border-top: 1px solid red;
	border-bottom: 1px solid red;
	border-radius: 5px;
  background-color: white; /* orig. prange */
}
.active-span {
	color: red;
}

/* ----- IZBOR ----- */

#izbor {
	height: 24px; /* inic. 20px */
  margin: 0px;
  padding: 0px;
 	font-family: "Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
 	font-size: 11pt;
	font-weight: bold;
	color: black; /* inic. black */
	background-color: white; /* inic. white */
  border: 1px solid skyblue; /* inic. 2px solid skyblue */
}
table.izbor {
  width: 150px;
	padding: 0px 0px 0px 0px;
	margin: 0px auto 0px auto;
 	border-collapse: separate; /* inic. separate */
}
td.izbor {
	padding: 0px 0px 0px 0px;
	text-align: center;
	vertical-align: top; /* inic. vertical-align: top; */
	/*border: 1px solid skyblue; /* inic: 1px solid skyblue */
	border-radius: 10px; /* inic. 10px */
	color: black; /* inic. black */
	background-color: orange; /* inic. orange */
}

/* ----- SADRZAJ ----- */

#okvir-podkategorija {
	width: auto;
	margin: 0px 0px 0px 0px;
	border: 2px solid orange; /* inic: 1px solid lightblue */
	border-radius: 15px 15px 15px 15px; /* inic: 15px 15px 0px 0px */
}

p.centrirano {
	text-align: center;
}


#sadrzaj-home {
  width: 100%;
	margin: 0px auto 0px auto;
	padding: 10px 0px 10px 0px;
	background: black;
}

#sadrzaj {
  width: 100%;
	margin: 0px auto 0px auto;
	padding: 10px 0px 10px 0px;
	background: white;
}

div.news {
	width: 96%;
  height: 90px;
	margin: 2px 0px 0px 0px;
 	padding: 7px 0px 0px 0px;
	background: url(slike/SvjetlosnaAura-Yumeiho_index.jpg);
	text-align: center;
	vertical-align: inherit;
	border: 3px solid lightblue; /* inic: 2px solid lightblue */
	border-radius: 20px; /* inic: 5px */
  overflow: auto;
}

#opis-djela {
	margin: 10px 20px 2px 20px; /* inic: 0px 0px 0px 0px */
 	padding: 5px 5px 5px 5px; /* inic: 5px 5px 5px 5px */
	text-align: left;
	font-size: 18px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	vertical-align: top;
	width: auto;
	border: 2px solid lightblue; /* inic: 1px solid lightblue */
	border-radius: 15px 15px 0px 0px; /* inic: 5px */
  overflow: auto;
}

#opis-djela a:link {
 	font-family: "Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
 	font-size: 18px; /* inic. 11pt */
 	font-weight: bold;
	color: darkblue; /*orig. darkblue */
 	text-decoration: none;
}
#opis-djela a:visited {
  color: darkred; /* init. dimgray */
 	text-decoration: none;
 	font-family: "Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
 	font-size: 18px; /* inic. 11pt */
 	font-weight: bold;
}
#opis-djela a:hover {
 	color: red; /* orig. darkblue */
 	text-decoration: underline;
 	font-family: "Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
 	font-size: 18px; /* inic. 11pt */
 	font-weight: bold;
}
#opis-djela a:active {
  color: orange; /* orig. orange */
}






p.naslov {
	text-align: center;
	font-weight: bold;
	font-size: 22px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

p.tehnika {
	text-align: center;
	font-weight: bold;
	font-size: 14px;
	padding: 10px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

p.projekt-naslov {
	text-align: center;
	font-weight: bold;
	font-size: 26px;
	border: 2px solid orange;
	border-radius: 15px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

img.slika-lijevo {
	float: left;
	margin: 10px 10px;
	border: 1px solid silver;
	border-radius: 10px;
}
img.slika-desno {
	float: right;
	margin: 5px 5px 5px 5px; /* inic: 10px 10px */
	border: 1px solid silver;
	border-radius: 10px;
}
img.slika-centar {
  display: block;
  margin-left: auto;
  margin-right: auto;
	border: 1px solid silver;
	border-radius: 10px;
}	
	float: inherit;  /* inic. float: none; */
	margin: 2px 2px; /* inic. 2px 2px */
	border: 1px solid silver;
	border-radius: 10px;
}
table.index {
  width: 100%;
	padding: 0px 10px 0px 10px; /* inic: 0px 10px 0px 10px */
	margin: 0px auto 0px auto;
 	border-collapse: separate;
}
td.index {
	padding: 0px 5px 0px 5px;
	text-align: left;
	vertical-align: top;
	border: 1px solid orange; /* inic: 1px solid lightblue */
	border-radius: 10px;
}
td.index1 {
	padding: 0px; /* inic: 0px 0px 5px 15px */
	text-align: center; /* inic: left */
	vertical-align: top; /* inic: top */
	border: 0px solid lightblue; /* inic: 2px solid lightblue */
	border-radius: 10px; /* inic: 30px */
}
td.index2 {
	padding: 0px 5px 0px 5px; /* inic: 0px 5px 0px 5px */
	text-align: left;
	vertical-align: top;
	border: 0px solid orange; /* inic: 0px solid lightblue */
	border-radius: 10px;
}
td.index-centrirano {
	padding: 0px 5px 0px 5px;
	text-align: center;
	vertical-align: top;
	border: 2px solid orange; /* inic: 1px solid lightblue */
	border-radius: 10px;
}
td.index-novo-centrirano {
	padding: 0px 5px 0px 5px;
	text-align: center;
	vertical-align: middle;
	border: 1px solid orange;
	border-radius: 10px;
}
table.kontakt-data {
	width:50%;
	margin: 5px auto 5px auto;
	border-collapse: separate;
	border: 2px solid lightblue; /* inic: 1px solid lightblue */
	border-radius: 10px;
}
td.kontakt-icons {
	text-align: center;
	vertical-align: central;
	border-bottom: 1px none black
}
td.kontakt-adresa {
	width: 85%;
	text-align: center;
	vertical-align: central;
	border-bottom: 1px none black
}

/* ----- PODNOZJE ----- */

#podnozje {
	padding: 0px;
	margin: 0px;
 	font-family: "Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
 	font-size: 11pt;
	font-weight: normal;
	color: #666; /* orig. black */
	background-color: lightblue; /* inic: lightblue */
  border: 1px solid skyblue; /* inic: 0px solid skyblue */
	border-radius: 10px;
}

/* ----- PRIČA ----- */

div.prica {
	margin: 1px 1px 1px 1px; /* inic: 2px */
 	padding: 5px 5px 5px 5px; /* inic: 2px */
 	font-family: "Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
 	font-size: 14pt;
	font-weight: normal;
	text-align: left;
	vertical-align: top;
	border: 1px solid lightblue; /* inic: 2px solid lightblue */
	border-radius: 5px; /* inic: 5px */
  overflow: auto;
}
div.prica a:link {
 	font-family: "Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
 	font-size: 14pt;
	font-weight: normal;
	color: gray; /*orig. darkblue */
 	text-decoration: none;
	cursor: zoom-in;
}

div.prica a:visited {
 	font-size: 14pt;
	font-weight: normal;
  color: gray;
 	text-decoration: none;
}
div.prica a:hover {
 	font-size: 14pt;
	font-weight: normal;
 	color: red; /* orig. blue */
 	text-decoration: none;
}
div.prica a:active {
 	font-size: 14pt;
	font-weight: normal;
  color: orange; /* orig. orange */
}