@charset "utf-8";
/* CSS Document */

body {
background:#E7EBEB url(images/Rapala_BG.jpg) repeat-x fixed left top;
/*background:#C2E0FC;*/
font-family: Verdana, Arial, sans-serif, Helvetica;
font-size: 10pt;
font-weight: normal;
text-align:justify;
color: #333333;
text-align: center;
margin: 0px;
padding: 20px 0px 20px 0px;
}
#wrapper {
width: 956px;
padding: 10px;
margin: 0px auto 0px auto;
height: auto;
text-align: left;
border: 1px solid #000099;
}
#header {
margin: 0px;
border: 3px solid white;
padding: 0px;
height: 175px;
width: auto;
}
#container {
padding: 0px;
margin: 10px 0px 0px 0px;
height: 1%;
width: auto;
}
#left {
margin: 0px;
width: 172px;
/*padding: 10px 20px 10px 20px;*/
float: left;
}

#browse {
	float: left;
	width: 172px;
	margin: 0;
	padding: 0;
	background: white;
	border-bottom: 2px solid white;
}

#browse dt {
	background: #c80000 url(images/dt_bg.gif) bottom repeat-x;
	color: #ffffff;
	margin: 2px 2px 1px 2px;
	padding: 6px 0;
	text-align: center;
	font-weight: bold;
}

#browse dd {
	background: #97B1CA;
	border-bottom: 1px solid #659db4;
	padding: 0;
	margin: 0 2px;
}

#browse dd a {
	color: white;
	font-weight: bold;
	font-size:10pt;
	text-decoration: none;
	display: block;
	padding: 3px 22px;
}

* html #browse dd {
	padding: 3px 22px;
	padd\ing: 0;
}

* html #browse dd a {
	display: inline;
	di\splay: block;
}

#browse dd a:hover {
	background: #bdddfb;
	color: #275D7F;
}

/********************************/

#center {
border:#FFFFFF 1px solid;
color:#003366;
height: auto;
width: 734px;
padding: 10px 20px 10px 20px;
float: left;
margin: 0px 0px 0px 6px;
line-height: 1.8em;
background-color: white;
}
#center p{
text-align:justify;
font-size: 10pt;
font-weight: normal;
}
#center img {
padding: 5px 15px 5px 5px;
margin: 0 0 0 0 ;
}
ol{
list-style-type:decimal;
list-style-position:outside;
background:none;}


h1 {
font-size: 14px;
margin: 0px;
padding: 0px;
}
#bottom_left {
/*border:#000000 1px solid;*/
padding: 0;
height: auto;
width: 172px;
float: left;
margin: 0;
background-color: white;
}

/*  prepisano */

.navitem ul 
{ list-style:none;
  margin:0 5px;
  padding:0;}

.navitem li
{ padding:0 4px 8px 10px;
  background: url(images/arw.gif) 0 3px  no-repeat;}

.navhead
{ width:162px;
  height:22px;
  padding: 3px 3px 3px 3px;
  /*border:#FFFFFF 2px solid;*/
  border-bottom:#FFFFFF 2px solid;
  border-left: #FFFFFF 2px solid;
  border-top:#FFFFFF 2px solid;
  text-align: center;
  font-size:10pt;
  font-weight:bold;
  background-color:#C80000;
  color:#FFFFFF;}

.navitem{
	width:162px;
	color:#003366;
	padding: 15px 3px 0 3px;
	font-size:10pt;
	font-weight: normal;
	text-align:left;
}
.navitem li a:link, .navitem a:visited, .navitem a:active {
color: #003366;
text-decoration: none;
}
.navitem li a:hover {
color: #FF0000;
text-decoration: underline;
}
  
/* ******************** */  
.clearer {
font-size: 0px;
line-height: 0px;
display: block;
margin: 0px;
padding: 0px;
clear: both;
height: 0px;
width: auto;
}
#footer {
margin: 10px 0px 0px 0px;
text-align: center;
padding: 15px 0px 15px 0px;
background-color: #97B1CA;
width:auto;
height:20px;
border:#FFFFFF 1px solid;
}
#footer p {
color: #000066;
margin: 0px auto 0px auto;
padding: 0px;
}
 
/*#footer a:link, #footer a:visited, #footer a:active {
color: #999;
text-decoration: none;
}
#footer a:hover {
color: #ccc;
text-decoration: none;
} */

/* Ok - so what actually has happened?

Our entire layout is "wrapped" in the outside div with id="wrapper"
The width of the wrapper is 956px plus it has 10px padding on each side.
I have also added a 1px border to create the outline of our div against white background of the body tag.

Next element is a div with id="header"
This is just a simple header with height of 100px.

Next element in the hierarchy is div with id="container".
Container has margin and padding equal 0 plus - to satisfy our Internet Explorer we had to add to it 1% height.
Without this, background image wouldn't be visible in this rather not very friendly browser.
Container also has a background image.
This image is repeated vertically so regardless of the height of any of the element inside of the container the background image will fill in the the entire space vertically and horizontally.

Inside container I have created four divs with ids: #left, #center, #right and a class .clearer.

All of them except .clearer have float=left to ensure they are in line.

center and right divs have also left margin of 6px to give a gap in between the columns.

.clearer has font-size, line-height, margin, padding and height equal 0 and clear equal both.
This way it seperates our divs from what's after .clearer.

Then it's just footer and some simple formatting - feel free to change copyright to anything you want.

I hope you'll enjoy this tutorial.
 */