﻿body {font-family:"Segoe UI","Segoe WP",Segoe,"Helvetica Neue",Candara,Calibri,"Roboto-Regular",sans-serif; color:#333; font-size:9px; padding:0; margin:0 auto; height:100%; width:100%; max-width:1140px; overflow-y:scroll;}
.reverse {unicode-bidi:bidi-override; direction:rtl;}

h1 {font-weight:500; font-size:3.2em; margin-top:0; padding-top:200px; padding-left:.3em; white-space:nowrap; color:#FFF; border-bottom:1px solid #FFF; text-shadow:0 -1px 0 rgba(0, 0, 0, .08);}  
h2 {font-weight:400; font-size:2.6em; margin:0 .2em; padding:.2em 0;}
h3 {font-weight:400; font-size:2.2em; margin:1em .2em 0 .2em; color: #09C; }
h4 {font-weight:600; font-size:1.8em; margin:1em .2em; color:#09C; text-align:center;}

.pageI { clear: both; padding-top: 20px; margin-bottom: 1em; }
.page { margin-top: 1em; margin-bottom: 1em; }
p { text-align: justify; padding: 0 .3em; margin-top: 0; }
/*.slikica p { margin-top: 0; }*/
p,li {font-size:1.8em; line-height:1.6em; }
strong{font-weight:600;}
sub {vertical-align:text-bottom; font-size:.6em;}
sup {vertical-align:text-top; font-size:.6em;}

a:link, a:visited, a:active {text-decoration:none; font-style:oblique; color:#09C;}
a:hover {color:#4283B9;}

ul { list-style-type:disc; margin-top:0;}
ul li {text-indent:.5em; text-indent:0;}
ul li ul{list-style-type:none;}
ul li ul li {font-size:1em; line-height:1.6em; text-indent:0; font-style:oblique;}

.podnozje {font-size:1.1em; background:linear-gradient(#F1F1F1,#FFF); border-top:1px solid #DDD; margin-top:0; color:#666; padding:5px 0 10px 0; text-align:center; opacity:.75;}
.podnozje:hover{transition:all .2s ease; text-shadow:0 0 10px #AAA;}

.linkovi {float:left; width:100%; border-top:1px solid #EEE; background-color:#F1F1F1; font-size:1.4em; font-weight:100; text-transform:uppercase; }
.linkovi .grupa {padding:.4em 0;}
.linkovi a {color:#555; border-left:1px solid #CCC; margin-bottom:6px; padding:0 8px; white-space:nowrap; clear:both;}
.linkovi a:hover {color:#09C;}
.linkovi .naslov {font-weight:600; border-left:none;}



.slikica { text-align: center; background-color: #F9F9F9; border-top: 1px solid #EEE; margin-top: 18px;}
.slikica img {max-width:100%; height:auto; vertical-align:middle;}
.slikica p {text-align:left; font-size:1.6em; line-height:1.4em; font-style:oblique; color:#666; background-color:#FFF; border-top:1px solid #EEE;}

.kontakt {margin:0 .2em; padding:3px; font-size:2.6em; font-weight:100; transition:all .3s ease-in;}
.kontakt .n{font-weight:400; }
.kontakt .k{float:right;}
.kontakt:hover {text-shadow: 0 0 8px #CCC; transition:all .2s ease;}

.kategorija {font-size:70%; margin-left:1em; padding:0 5px; color:#666; border-left: 1px solid #FC3; background-color:#FFE;}

.tiles {clear:both; margin-top:8px;} /* display:block;  position:absolute; bottom:0; left:0;  */
.tile {position:relative; float:left; opacity:.75; box-shadow:#888 0px 2px 5px; transition:all .3s ease-in; cursor:pointer; text-align:center; font-size:2.2em; font-weight:100; margin:5px; padding-top:5px; width:calc(20% - 10px); height:105px;}
.tile:hover {opacity:1; box-shadow:#b7b7b7 0px 2px 5px; transition:all .2s ease;}
a.tile {text-decoration:none; font-style:normal; color:#FFF;}
a.txBojaC {text-decoration:none; font-style:normal; color:#222; font-weight:400;}

.tile img {opacity:0; display:block; border: 0 none; margin-left:auto; margin-right:auto; height:auto; max-width:100%; margin-top:20px; transition:all .3s ease-in;}
.tile:hover img {opacity:.8; transition:all .2s ease;}
.tile .nemaSlike {display:none;}
.tile:hover .nemaSlike {display:block; margin-top:20px;}

#google_translate_element {position:absolute; right:1em; top:1em;}
#google_translate_element:before {content:"Translate:";}

/*ul.listmenu {margin:0; padding:0;}
.listmenu li { margin: 0; background: url(slike/icon_arrow_right.png) no-repeat 99% 50%; border-top: 1px solid #ccc; display: table; border-collapse: collapse; width: 100%; margin-right: 1%; }
.listmenu li:hover {background-color:#FFE;}
.listmenu li .inner {display:table-row; overflow:hidden; padding-right:1em;}
.listmenu li .li-img {display:table-cell; vertical-align:top; width:30%; padding-right:.5em;}
.listmenu li .li-img img {display:block; width:100%; height:auto;}
.listmenu li .li-text {display:table-cell; vertical-align:middle; width:70%; text-decoration:none; font-style:normal; padding-right:1em;}
.listmenu li .li-summary {display:none; margin:0;}
.listmenu li .li-action {margin:0;}
.listmenu li .li-text h3 {font-size:1.33em;}
.listmenu li .li-text p {font-size:1em; color:#333;}
.listmenu a {text-decoration:none; text-indent:0em;}
*/
.post {border-top:2px solid #FF0; margin-top:2em; margin-bottom:3em;}
.post:hover {background-color:#FFE;}
.post .ime {background-color:#FFFFC8; font-weight:600; line-height:2.5em;}
.post .odgovor {border-top:2px dotted #dcdcdc; padding:1em 0 1em 4em; font-style:oblique; color:#666;}
.datumDesno {float:right; line-height:2.5em;}

#ss-form {margin-bottom:3em; padding:0 .3em;}
#ss-form .lbl, #ss-form .txt, #ss-form .btn  {font-family:"Segoe UI","Segoe WP",Segoe,"Helvetica Neue",RobotoRegular,"Roboto",Candara,Calibri,sans-serif; color:#333; font-size:1.8em; line-height:1.6em;}
#ss-form .area {width:98%;}
#ss-form .btn {margin-top:1em; height:2.8em;}

table#sazetak {width:100%; font-size:1.8em; margin-bottom:1em;}
table#sazetak td {padding:.5em .3em; white-space:nowrap;}
table#sazetak td.polje {font-style:oblique; background-color:#FFFFC8;}
table#sazetak td.tekst .razmak {margin-left:.5em; padding-left:.5em; border-left:1px solid #CCC;}
table#sazetak tbody tr:hover {background-color:#FFE;}

table#down {border-collapse: collapse; width:100%; font-size:1.8em; margin-bottom:.5em;}
table#down thead tr { background-color: #FFFFC8; border-top: 2px solid #FF0; }
table#down tbody tr:hover {background-color:#FFE;}
table#down th, table#down td {padding:.5em; text-align:left;}
table#down th .desc { display: block; font-weight: normal; }
table#down tr { border-bottom: 1px dotted #d8d8d8; vertical-align: top; }
table#down tr td a span {display:table-cell; white-space:nowrap;}
table#down tr td a span:first-child {min-width:75px;}
table#down tr td a span:nth-child(2) {width:100%;}
table#down tr td a span:last-child {width:auto;}
table#down tr td a.file:hover {background-color:#FFFFC8;}
table#down td a.file { padding: 5px 35px 5px 5px; border: 1px solid #dcdcdc; border-radius: 2px; display: block; margin-bottom: 2px; }
table#down td a.file.old {color:grey;}
table#down td a.file[href$=".exe"] {background:url("slike/icon-down-setup-exe.png") no-repeat scroll right center transparent;}
table#down td a.file[href$=".zip"], table#down td a.file[href$=".rar"] {background:url("slike/icon-down-archive.png") no-repeat scroll right center transparent;}
table#down td a.file[href$="-etics.html"],table#down td a.file[href*="http://"],table#down td a.file[href*="https://"] {background:url("slike/icon-down-webpage.png") no-repeat scroll right center transparent;}

table.formula {width:100%; margin-bottom:2em;}
table.formula th, table.formula td {padding:.5em; text-align:left;}
table.formula thead tr {font-size:1.8em;background-color:#FFFFC8;}
table.formula tbody tr {font-size:1.6em;background-color:#FFE;}
table.formula tbody tr:hover {background-color:#FFFFC8;}

table#nadmorske {margin-bottom:2em;}
table#nadmorske th, table#nadmorske td {font-size:1.8em; padding:.5em; text-align:left;}
table#nadmorske td:nth-child(2) {text-align:right;}
table#nadmorske tbody tr:hover {background-color:#FFFFC8;}

table.povijest {width:100%; margin-bottom:2em; font-size:1.8em;}
table.povijest th, table.povijest td {padding:.5em; text-align:left;}
table.povijest tbody tr.verzija td {background-color:#FFFFC8; font-weight:700; border-top:2px solid #FF0;}
table.povijest tbody tr:hover {background-color:#FFE;}






.siva {background-color:#D4D4D4;}
.siva2 {background-color:#8C8C8C;}
.siva3 { background-color: #A9A9A9; }
.plava {background-color:#09C;}
.plavaT {background-color:#1240AB;}
.plava2 {background-color:#00ADEf;}
.plava3 {background-color:#39F;}
.plava4 {background-color:#119EF6;}
.plava5 {background-color:#4173C9;}
.plavaL { background-color: #5d9ddd }
.narancasta { background-color: #ff4500; }
.narancasta2 {background-color:#F60;}
.narancasta3 {background-color:#F09609;}
.narancasta4 {background-color:#FFBA73;}
.narancasta5 { background-color: #FF7C14; }
.zelenaL { background-color: #8CBF26; }
.zelenaL2 {background-color:#98D305;}
.zelenaL3 {background-color:#A2C139;}
.zelenaL4 {background-color:#9C0;}
.zelena {background-color:#393;}
.zelena2 {background-color:#06CF19;}
.zelena3 {background-color:#33C36B;}
.zelenaPastel { background-color: #40d0b4 }
.ljubicasta {background-color:#D80073;}
.ljubicastaPastel { background-color: #8543f4 }
.roza {background-color:#E671B8;}
.rozaPastel { background-color: #fbabe6 }
.purpurna {background-color:#A200FF;}
.purpurna2 {background-color:#ff00dd;}
.crvena {background-color:#E51400;}
.crvena2 {background-color:#F30;}
.crvena3 {background-color:#DE4206;}
.crvena4 {background-color:#b22222;}
.crvenaPastel { background-color: #f8636a }
.zuta {background-color:#F3D240;}
.zuta2 {background-color:#FFC20F;}
.zuta3 {background-color:#F1B705;}
.tirkiz {background-color:#00ABA9;}
.tirkiz2 {background-color:#099;}
.smeda { background-color: #ce892a }
.smeda2 { background-color: #A05000; }
.smeda3 { background-color: #eea559; }



.zaglavlje { height: 250px; }
.zaglavlje.narancasto { background: linear-gradient(#FFF, #FF7C14); }
.zaglavlje.crveno { background: linear-gradient(#FFF, #E51400); }
.zaglavlje.bordo { background: linear-gradient(#FFF, #b22222); }
.zaglavlje.plavo { background: linear-gradient(#FFF, #09C); }
.zaglavlje.plavoT { background: linear-gradient(#FFF, #4283B9); }
.zaglavlje.zuto { background: linear-gradient(#FFF, #FFB200); }
.zaglavlje.zeleno { background: linear-gradient(#FFF, #339933); }
.zaglavlje.ljubicasto { background: linear-gradient(#FFF, #D80073); }
.zaglavlje.tirkizno { background: linear-gradient(#FFF, #00ABA9); }
.zaglavlje.smede { background: linear-gradient(#FFF, #A05000); }
.zaglavlje.purpurno { background: linear-gradient(#FFF, #A200FF); }
.zaglavlje.sivo { background: linear-gradient(#FFF, #D4D4D4); }


.txBojaP{color:#09C;}
.txBojaC{color:#222;font-weight:400;}
.txHighlight{color:#09C;}
.txBojaNaglasak{color:#F00;}

.new { position: absolute; right: .25em; bottom: .1em; text-shadow: 1px 1px 5px #FFF; font-weight: 500; }

.clear {clear:both;}

table.preis { width: 100%; border-collapse: collapse; text-align: center; margin: 1em .2em; border: 1px solid #09C; border-width: 1px 0; font-size: 1.8em; line-height: 1.6em; }
table.preis thead th { color: #09C; font-weight: 600; background-color: #FFFFC8; }
table.preis tbody { border: 1px dotted #09C; border-width: 1px 0; }
table.preis tbody td:first-child { color: #09C; }
table.preis th:first-child, table.preis td:first-child { text-align: left; }
table.preis tr { vertical-align: top; }
table.preis tr:hover { background-color: #FFE; }
table.preis td span.wert { font-weight: bold; }







.podijeli ul { list-style-type: none; margin: 0; padding: 0; }
.podijeli ul li { display: inline-block; padding-right: 5px; }
.podijeli .sLink { display: inline-block; height: 38px; width: 38px; background-color: Silver !important; background: no-repeat center url('../slike/share-sprite.png'); }
.podijeli .sfb { background-position: 3px 3px; }
.podijeli .stw { background-position: -61px 3px; }
.podijeli .sli { background-position: -349px 3px; }
.podijeli a .sfb:hover { background-color: #3e5b98 !important; }
.podijeli a .stw:hover { background-color: #4da7de !important; }
.podijeli a .sli:hover { background-color: #3371b7 !important; }






@media screen and (max-width:1139px) {
	.zaglavlje { max-height: 225px; }
	.tile { width: calc(25% - 10px); }
	.podnozje { padding: 1px 0 3px 0; }
	h1 { padding-top: 175px; }
}
@media screen and (max-width:840px) {
	.pageI { padding-top: 10px; }
	.tile { width: calc(33.33% - 10px); }
	.zaglavlje { max-height: 200px; }
	.podnozje { padding: 0; }
	h1 { padding-top: 150px; }
	table#down th.no { display: none; }
	table#down td.no.s { display: none; }
}
@media screen and (max-width:680px) {
	.pageI { padding-top: 0; }
	.tile { width: calc(50% - 10px); margin: 0 0 7px 7px; /*2kolone: optimal=220 kroz stranicaOpt640minusMargineLjeve20 = 40%*/ }
	.zaglavlje { max-height: 175px; }
	h1 { padding-top: 120px; }
	table#down thead { position: absolute; clip: rect(1px, 1px, 1px, 1px); }
	table#down tr:before { background: #F5F5F5; content: attr(data-label); display: block; font-weight: bold; margin-top: 1em; padding: .5em; }
	table#down tr:hover:before { background-color: #FFFFC8; }
	table#down td { display: block; padding: .4em; }
	table#down td:first-child { display: none; }
	table#down td.no.v:before { content: "v."; }
	table#down td.no.l:before { content: "Language: "; }
	table#down td.no.s:before { content: "Status: "; }
	table#down td.no.r:before { content: "Released: "; }
	table#down td.no.k:before { content: "Size: "; }
	.razmak { display: block; }
	table.povijest tr .datum, table.povijest tr .tip { display: none; }
	table.preis { font-size: 1.4em; }
	table.preis tr { border-top: 1px dotted #d8d8d8; }
}
@media screen and (max-width:441px) {
	.tile { width: calc(100% - 10px); height: 75px; margin: 0 5px 5px 5px; }
	.tile img { margin-top: 0; }
	.podnozje { margin-top: 0; }
	.podnozje .design { display: none; }
	#google_translate_element { top: 80px; overflow: hidden; }
	.linkovi .grupa { display: block; float: left; white-space: nowrap; }
	.linkovi a { display: block; border: none; }
	table#sazetak td { float: left; width: 90%; }
	table#sazetak td.tekst { padding-left: 1em; }
	#ss-form .tekst { width: 98%; }
}
@media screen and (max-width:260px) {
	.tile { width: 100%; margin: 0 0 5px 0; height: 35px; }
	.tile img { display: none; }
	.zaglavlje { max-height: 150px; }
	#google_translate_element { top: 45px; }
	h1 { padding-top: 75px; }
	.linkovi a { display: block; border: none; }
	table#down td { display: block; padding: .3em; }
	table#down td.no { display: none; }
	table#sazetak td { float: left; width: 87%; }
	table#sazetak td.tekst { padding-left: .7em; }
	table.povijest tr .datum, table.povijest tr .tip { display: none; }
}

@media (prefers-color-scheme:dark) {
	body { background-color: #1e1e1e; color: #e7e7e7; }
	.page { background-color: #414141; }
	.slikica, .slikica p { background-color: #2a2a2a; color: #e7e7e7; }
	.podnozje, .linkovi { background: unset; }
	a:link, a:visited, a:active { color: #c8fff3; }
	a:hover { border-bottom-color: #74efdd; color: #74efdd; }
	a.txBojaC { color: #000; }
	.tile { box-shadow: unset;  }
	table#sazetak td.polje { background-color: #2a2a2a; }
	table#sazetak tbody tr:hover { background-color: #787878; }
	table.povijest tbody tr.verzija td { background-color: #2a2a2a; }
	table.povijest tbody tr:hover { background-color: #787878; }
	table.formula thead tr { background-color: #2a2a2a; }
	table.formula tbody tr { background-color: #2a2a2a; }
	table.formula tbody tr:hover { background-color: #787878; }
	.postovi .post .ime { background-color: #2a2a2a; }
	.postovi .post, .postovi .post .odgovor { background-color: #787878; color: #e7e7e7; }
	table#down thead tr { background-color: #2a2a2a; }
	table#down tbody tr:hover { background-color: #787878; }
	table#down tr::before { background: #2a2a2a; }
	table#down tr:hover:before { background-color: #2a2a2a; }
}