body  {width:100%; height:100%; background-image:url('images/background.jpeg'); background-repeat:no-repeat; background-position:right top; background-attachment:fixed; background-size:100% 100%; margin:0px; border:0px; padding:0px; overflow:auto; font-family:sans-serif;}

img {border:0;}

#heder  {width:100%; position:fixed; text-align:center; font-size:25px; padding:20px 0px 20px 0px;}
#heder img {display:none;}
#hederdesktop {font-size:25px;}
#hederportrait {display:none;}
#hederlandscape {display:none;}
.menihedera {display:none;}

#meni  {width:250px; position:fixed; top:70px; left:0px; bottom:30px; overflow:auto;}
#meni p {text-align:center;}

#okvir  {width:180px; height:auto; padding:5px 15px 0px 15px; margin:0px 0px 0px 15px; border-style:double; }
#okvir img {width:150px; height:auto;}

#sadrzaj {position:fixed; overflow:auto; top:70px; left:250px; right:0px; bottom:30px; padding:0px 50px 0px 0px;}
#sadrzaj p {text-align:justify;}


a:link     {color:#0000b0; text-decoration:none;}  /* unvisited link  */
a:visited  {color:#0000b0; text-decoration:none;}  /* visited link    */
a:hover    {color:#00f0ff; text-decoration:none;}  /* mouse over link */
a:active   {color:#ffffff; text-decoration:none;}  /* selected link   */ 

#welcome  {width:100%; height:100%; position:absolute;}
#welcome table {width:100%; height:100%; }
#welcome td {text-align:center; vertical-align:middle;}
#welcome img {width:350px; height:auto;}
#welcome table {border:0;}

#wlcm { text-align:center; margin-bottom:25px; font-size:30px; font-weight:bold; }
#mvhp { text-align:center; margin-bottom:25px; font-size:35px; font-weight:bold; }
#prsnl { display:inline-table; }
#prfsnl { display:inline-table; }
#razmaci { display:inline-table; }

ul li { padding-bottom: 6px; }
ol li { padding-bottom: 6px; }

h1 { margin-top:0px; margin-bottom:0px; font-size:25px; }
h2 { margin-top:0px; margin-bottom:0px; font-size:20px; text-align:center; }

.tema {position:static; display:inline-table; width:350px; margin: 0px 15px 15px 15px;}
.naslov {text-align:center; max-width:inherit; margin: 0px 0px 5px 0px; font-size:16px;}
.opis {text-align:justify; font-size:12px; max-width:inherit; }

/* SETTINGS FOR SCREENS --- LESS THAN 2280px ;-)   */

@media screen and (min-width: 1951px) and (max-width: 2280px) {

.tema {position:static; display:inline-table; width:17%; margin: 0px 1% 15px 1%;}
.naslov {text-align:center; max-width:inherit; margin: 0px 0px 5px 0px; font-size:16px;}
.opis {text-align:justify; font-size:12px; max-width:inherit; }

}

/* SETTINGS FOR SCREENS --- LESS THAN 1950px ;-)   */

@media screen and (min-width: 1621px) and (max-width: 1950px) {

.tema {position:static; display:inline-table; width:22%; margin: 0px 1% 15px 1%;}
.naslov {text-align:center; max-width:inherit; margin: 0px 0px 5px 0px; font-size:16px;}
.opis {text-align:justify; font-size:12px; max-width:inherit; }

}

/* SETTINGS FOR SCREENS --- LESS THAN 1620px ;-)   */

@media screen and (min-width: 1291px) and (max-width: 1620px) {

.tema {position:static; display:inline-table; width:30%; margin: 0px 1% 15px 1%;}
.naslov {text-align:center; max-width:inherit; margin: 0px 0px 5px 0px; font-size:16px;}
.opis {text-align:justify; font-size:12px; max-width:inherit; }

}


/* SETTINGS FOR SCREENS --- LESS THAN 1290px ;-)   */

@media screen and (min-width: 961px) and (max-width: 1290px) {

.tema {position:static; display:inline-table; width:45%; margin: 0px 1% 15px 1%;}
.naslov {text-align:center; max-width:inherit; margin: 0px 0px 5px 0px; font-size:16px;}
.opis {text-align:justify; font-size:12px; max-width:inherit; }

}


/* SETTINGS FOR SCREENS --- LESS THAN 960px ;-)   */

@media screen and (min-width: 701px) and (max-width: 960px) {

.tema {position:static; display:inline-table; width:95%; margin: 0px 1% 15px 1%;}
.naslov {text-align:center; max-width:inherit; margin: 0px 0px 5px 0px; font-size:16px;}
.opis {text-align:justify; font-size:12px; max-width:inherit; }

}


/* SETTINGS FOR MOBILE DEVICES --- PORTRAIT-ORIENTED ;-)   */

@media screen and (max-device-width: 700px) and (orientation: portrait) {

h1 { text-align:center; }

#welcome img {width:500px; height:auto;}

#heder  {font-size:15px; z-index:5; }
#heder img {display:inline; width:auto; height:70px; position:fixed; top:0px; left:0px;}
#hederdesktop {display:none;}
#hederportrait {display:inline; position:fixed; top:20px; left:55px; right:0px; font-size:15px; text-align:center; }
#hederlandscape {display:none;}
.menihedera {display:inline; color:#0000b0; font-size:12px; text-align:center;}

#meni  {width:auto; height:0px; top:0px; left:70px; right:0px; border-top:solid 70px transparent; z-index: 100;}

#meni:hover,
#meni:focus{height:auto; top:0px; left:70px; bottom:0px; right:0px; z-index: 100; }

#okvir  {width:auto; height:auto; padding:5px 15px 0px 15px; margin:15px 15px 15px 15px; border-style:double; background-color: #cccccc; }
#okvir img {display:none;}

#welcome img {width:150px; height:auto;}
#wlcm { text-align:center; margin-bottom:10px; font-size:16px; font-weight:bold; }
#mvhp { text-align:center; margin-bottom:12px; font-size:16px; font-weight:bold; }
#prsnl { display:block; }
#prfsnl { display:block; }
#razmaci { display:block; }


#sadrzaj { top:75px; left:0px; right:0px; bottom:15px; padding:0px 15px 0px 15px;}
#sadrzaj p {text-align:justify; font-size:12px; }
#sadrzaj ul li { font-size:12px; }
#sadrzaj ol li { font-size:12px; }

.tema {position:static; display:inline-table; width:auto; margin: 0px 15px 15px 15px;}
.naslov {text-align:center; max-width:inherit; margin: 0px 0px 5px 0px; font-size:16px; }
.opis {text-align:justify; font-size:12px; max-width:inherit; }

}

/* SETTINGS FOR MOBILE DEVICES --- LANDSCAPE-ORIENTED ;-)   */


@media screen and (max-device-width: 700px) and (orientation: landscape) {

h1 { text-align:center; }

#welcome img {width:300px; height:auto;}

#heder  {font-size:15px; z-index:5; }
#heder img {display:inline; width:auto; height:70px; position:fixed; top:0px; right:0px;}
#hederdesktop {display:none;}
#hederportrait {display:none;}
#hederlandscape {display:inline; position:fixed; top:0px; left:0px; right:55px; font-size:15px; text-align:center; }
.menihedera {display:inline; position:fixed; top:70px; right:0px; width:70px; bottom:0px; color:#0000b0; font-size:12px; text-align:center;}

#meni  {width:0px; height:auto; top:70px; left:auto; right:0px; bottom:0px; border-right:solid 70px transparent; z-index: 100;}

#meni:hover,
#meni:focus{height:auto; width:auto; top:0px; left:auto; bottom:0px; right:0px; z-index: 100; }

#okvir  {width:auto; height:auto; padding:5px 15px 0px 15px; margin:15px 15px 15px 15px; border-style:double; background-color: #cccccc; }
#okvir img {display:none;}

#welcome img {width:150px; height:auto;}
#wlcm { text-align:center; margin-bottom:10px; font-size:16px; font-weight:bold; }
#mvhp { text-align:center; margin-bottom:12px; font-size:16px; font-weight:bold; }

#sadrzaj { top:20px; left:0px; right:55px; bottom:15px; padding:0px 15px 0px 15px;}
#sadrzaj p {text-align:justify; font-size:12px; }
#sadrzaj ul li { font-size:12px; }
#sadrzaj ol li { font-size:12px; }

.tema {position:static; display:inline-table; width:auto; margin: 0px 15px 15px 15px;}
.naslov {text-align:center; max-width:inherit; margin: 0px 0px 5px 0px; font-size:16px; }
.opis {text-align:justify; font-size:12px; max-width:inherit; }

}