/* CSS Document 

First we have a containing div called #wrap.

Inside that go the header, the left sidebar and another containing div called #main which contains the content and the right sidebar. There's also an #inner-wrap div which contains the floats and makes space for the footer.

To make the columns look right, we use a background image. The image is 1px high and 780px wide. It goes in the #wrap div - repeat-y

The header obviously covers this at the top. Something else which might also be obvious is that the #wrap div is set to min-height:100% so that the page is, well, at least 100% high. The other bit after that is for IE, which is a bit stupid. IE doesn't understand 'min-height', but it treats 'height' in the same way as a good browser would treat 'min-height' so we're OK. When you tell the browser 'height:100%' though, it needs to know 100% of what? To make it clear, html and body are both set to 100% too.

The #inner-wrap div has 80px bottom padding so there's an 80px-high space at the bottom of the page. After all the rest of the content comes the footer.

The footer is 100% wide and absolutely-positioned at the bottom of the #wrap div in the space left by the inner-wrap.

The left column is 150px wide (the same as the coloured part of the background image) and float:left, while the #main div is position:relative with a 150px left-margin so we have two sections.

The #main div also needs to be split into two - the right sidebar, which is floated right, and the #content div which has a right-margin of 200px.

*/
html {height:99%;}
body {
margin:0;
padding:5px 0 0 0;
height:100%;
background:#666666;
font-family:arial, serif;
}
#wrap {
position:relative;
background: #FFFFFF top left repeat-y;
min-height:100%;
width:900px;
margin:auto;
}
* html #wrap {height:99%} 

#inner-wrap {
padding-left:2px;
padding-right:2px;
padding-top:2px;
padding-bottom:40px;
text-align:center;
}
#header {
padding-left:2px;
padding-right:2px;
padding-top:2px;
overflow:hidden;
height:80px;
text-align:center;
}
#header_tekst {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#CCCCCC;
}
#inner-wrap:after {
content:" ";
display:block;
clear:both;
}
#footer {
position: absolute;
bottom:0;
height:15px;
background-color: #333333;
width:100%;
text-align:center;
color:#CCCCCC;
} 

#left {
float:left;
width:200px;
text-align:center;
overflow:hidden;
padding-right:2px;
}
#left_tekst {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
font-stretch:wider;
color:#FFFFFF;
}
#main {
position:relative;
overflow:hidden;
} 

#right {
float:right;
width:200px;
text-align:center;
background:#FF0000;
}
#content {
text-align:left;
}
#footer_text {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bolder;
}

#tekst_naslov {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
color:#333333;
}

#tekst_unutar {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#333333;
}

#tekst_glavni {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#333333;
}

#boja_podaci {
background:#999999;
}

[if IE]>
<style type="text/css">
#content,
#main,
#inner-wrap,
#wrap {
zoom:1;
}
</style>
<![endif]