* { padding: 0; margin: 0; }

body {
 font-family:  san-serif, Geneva, Arial, Helvetica;
 font-size: 13px;
 background-image:url('grafika/b.gif')
}

#wrapper { 
 margin: 0 auto;
 width: 950px;
}

#header {
 font-family:  san-serif, Geneva, Arial, Helvetica;
 font-size: 36px;
 color: #ffffff;
 margin: 2px 0px 0px 0px;
 width: 950px;
 float: LEFT;
 height: 90px;
 background: #BD9C8C;
 background-image:url('grafika/back1.gif')
}

#leftcolumn { 
 color: #333;
 background: #cc9933;
 height: 508px;
 width: 175px;
 float: left;
 background-image:url('grafika/back-left.gif')
}

#srednji { 
 color: #333;
 background: #cc9933;
 height: auto;
 width: 387px;
 float: left;
}

#desni { 
 color: #333;
 background: #cc9933;
 height: auto;
 width: 388px;
 float: left;
 text-align: center
}

#content { 
 font-family:  Geneva, san-serif, Arial, Helvetica;
 text-align: left;
 float: left;
 background: #ebebeb;
 background-image:url('grafika/back-right.gif');
 height: 508px;
 width: 775px;
 display: inline;
 overflow-y: scroll;
 scrollbar-arrow-color: blue;
 scrollbar-face-color: #e7e7e7;
 scrollbar-3dlight-color: #a0a0a0;
 scrollbar-darkshadow-color: #888888"
}


#scroll
{ width: 695px;
 height: 150px;
 overflow-y: scroll;
 scrollbar-arrow-color: blue;
 scrollbar-face-color: #e7e7e7;
 scrollbar-3dlight-color: #a0a0a0;
 scrollbar-darkshadow-color: #888888"
}


#leftcolumn {font-size:150%; color:#000; margin-left:0px;}
#leftcolumn .small {font-size:10px;}
#leftcolumn .bold {font-weight:bold;}
#leftcolumn .modra {color:#00c;}

#content {font-size:150%; color:#000; margin-left:0px;}
#content .big {font-size:25px;}
#content .small {font-size:15px;}
#content .naslov {font-size:40px;}
#content .rdeca {color:#c00;}
#content .silena {color:#15bb15;}
#content .rjava {color:#cc9933;}
#content .modra {color:#00c;}
#content .lila {color:#b500f7;}
#content .italic {font-style:italic;}
#content .bold {font-weight:bold;}
#content .vsebina {font-size:16px;}
#content .smaller {font-size:10px;}

#srednji  {font-size:150%; color:#000; margin-left:0px;}
#srednji .big {font-size:25px;}
#srednji .small {font-size:15px;}
#srednji .naslov {font-size:40px;}
#srednji .rdeca {color:#c00;}
#srednji .rjava {color:#cc9933;}
#srednji .modra {color:#00c;}
#srednji .lila {color:#b500f7;}
#srednji .italic {font-style:italic;}
#srednji .bold {font-weight:bold;}
#srednji .vsebina {font-size:16px;}


#meni a {
 display:block;
 width:144px;
 margin: 5px 0 0 10px;
 padding:5px 0 5px 0px;
 font: bold 14px/1 sans-serif;
 color: #ffffc0;
 text-decoration: none;
 background: url("grafika/button.gif") 0 0 no-repeat;
 }
#meni a:hover {	
 background-position: -144px 0;
 color: #ffff40;
 }
#meni a:active {
 background-position: -288px 0;
 color:red;
 }






/* style the outer div to give it width */
.menu {font-size:0.85em; padding:0 0 200px 15px; width:700px;}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding:0;margin:0;list-style-type:none; height:25px; background:transparent;}

/* float the top list items to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu ul li {float:left; height:25px; line-height:24px; display:block; margin-right:2px;}

/* style the sub level list items */
.menu ul ul li {display:block; width:150px; height:auto; line-height:1em;}
.menu ul ul li.last {padding-bottom:10px; background:url(grafika/sub_bottom.gif) bottom left no-repeat;}
.menu ul ul ul li.last {padding-bottom:10px; background:url(grafika/two_bottom.gif) bottom left no-repeat;}
.menu ul ul ul ul li.last {padding-bottom:10px; background:url(grafika/three_bottom.gif) bottom left no-repeat;}

/* style the links for the top level */
.menu a, .menu a:visited {display:block; float:left; height:24px; width:115px; font-size:15px; text-decoration:none; color:#000;  background:transparent url(grafika/top1.gif); padding:0 0 0 10px; text-align:left;border:0; border-bottom:1px solid #222;}
/* hack IE5.x to get the correct the faulty box model and get the width right */
* html .menu a, * html .menu a:visited {width:125px; w\idth:115px;}

/* style the sub level links */
.menu ul ul a, .menu ul ul a:visited {display:block;background:#699; color:#fff; width:128px; height:100%; line-height:1em; text-align: left; padding:5px 10px; border:1px solid #000; border-width:0 1px;}
* html .menu ul ul a, * html .menu ul ul a:visited  {width:150px; w\idth:128px;}


/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {border-collapse:collapse; padding:0; margin:-1px; width:0; height:0; font-size:1em; z-index:1;}


/* style the level hovers */
/* first */
* html .menu a:hover {color:#fff; border:0; height:25px; position:relative; z-index:100;}
.menu li:hover {position:relative;}

.menu :hover > a {color:#fff; border:0; height:25px;}
/* second */
* html .menu ul ul a:hover{color:#fff; background:#477; position:relative; z-index:110; height:100%; border:1px solid #000; border-width:0 1px;}

.menu ul ul li:hover {position:relative;}
.menu ul ul :hover > a {color:#fff;background:#7aa;background:#5bbfed; z-index:110; height:100%; border:1px solid #000; border-width:0 1px;}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:0; top:25px; left:0; width:150px;}


/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul {visibility:visible; height:auto; padding:15px 30px 30px 30px; background:transparent url(grafika/sub_top.gif) 30px 0 no-repeat; left:-30px;}
.menu ul :hover ul.left {visibility:visible; height:auto; padding:15px 30px 30px 30px; background:transparent url(tab/sub_top_left.gif) 30px 0 no-repeat; left:-55px;}


#gallery {width:686px; height:380px; padding:10px; border:1px solid #333; background: #888; position:relative; }
#gallery b.default {position:absolute; left:10px; top:10px; width:548px; height:380px; text-align:center;}
#gallery b.default img {display:block; margin:0 auto 10px auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}
#gallery b.default span {display:block; color:#fff; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0 auto;}

#gallery ul {list-style:none; padding:0; margin:0; width:180px; position:relative; float:right;}
#gallery ul li {display:inline; width:52px; height:52px; float:left; margin:0 0 5px 5px;}
#gallery ul li a {display:block; width:50px; height:50px; text-decoration:none; border:1px solid #000; border-color:#eee #555 #333 #ddd;}
#gallery ul li a span {display:none;}
#gallery ul li a img {display:block; width:50px; height:50px; border:0;}
#gallery ul li a:hover {white-space:normal; border-color:#555 #ddd #eee #333; background:#777;}
#gallery ul li a:hover b {position:absolute; left:-508px; top:0; width:508px; height:380px; text-align:center; background:#888; z-index:20;}
#gallery ul li a:hover span {display:block; color:#fff; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0 auto;}
#gallery ul li a:hover img {margin:0 auto 10px auto; width:auto; height:auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}

#gallery ul li a:active, #gallery ul li a:focus {white-space:normal; border-color:#555 #ddd #eee #333; background:#777;}
#gallery ul li a:active b, #gallery ul li a:focus b {position:absolute; left:-508px; top:0; width:508px; height:380px; text-align:center; background:#888; z-index:10;}
#gallery ul li a:active span, #gallery ul li a:focus span {display:block; color:#fff; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0 auto;}
#gallery ul li a:active img, #gallery ul li a:focus img{margin:0 auto 10px auto; width:auto; height:auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}