/*  Instructions to set caching headers. Inside comments area to play nicer with CSS editors.
** ** 
** 
** 
** 

*/

@import "http://www.uutiskynnys.fi/css/sisalto.css";
@import "http://www.uutiskynnys.fi/css/silva.css";

body {
background: url(tausta.gif) repeat;
font:normal 13px Verdana, Arial, Helvetica, sans-serif, "MS sans serif";
}

* {
margin:0;
padding:0;
}

#mainoswrap {
margin: 0px auto;
width: 768px;
/*background: #fff;*/
margin-top: 5px;
}

#allwrap {
margin: 0px auto;
margin-bottom: 5px;
padding: 0;
width: 768px;
margin-top: 5px;
background: #fff url(viivakoodi.gif);
background-repeat: no-repeat;
background-position: 702px 17px;
}

/**************************
3-COLUMN LAYOUT CONTENT FIRST

width: 738 + 2*15 border = 768
left: 159+1px border
right: 159+1px border
content: 418

sum:418+2*160=738

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

.clear { clear: both; }

#mainContainer {
width: 738px;

/*
border-left: 15px solid #fff;
border-right: 15px solid #fff;
*/
border-bottom:1px solid black;

/*margin-left: 6px;*/
margin: 0px auto;
/*margin-top: 5px;*/
}

* html #mainContainer {
height: 400px;
}

/**************************
CONTENT AND COLUMNS
**************************/
.outer {
margin: 0 0 0 0;
padding-left: 159px;
padding-right: 159px;
}
* html .outer {
width: 420px;
}
.inner {
width: 579px; /*** This width is for non-IE browsers. Mozilla makes this necessary. ***/
}
* html .inner {
width: 100%;
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid 
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout. It blows 
my mind that all this hacking is being caused by the mighty Gecko engine! (shakes head ruefully)
***/

.float-wrap {
float: left;
width: 578px;
margin-left: -159px;       /*** Same length as left column width ***/
}

/**************************
CENTER CONTENT
**************************/

#content {
float: right;
width: 417px;
min-height: 400px;
background-color: #fff;
}

* html #content {
height: 400px;
position: relative;
}

/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left, 
div.left is carried over into the proper position. 
***/

/**************************
LEFT COLUMN
**************************/
#left {
background-color: #fff;
float: left;
width: 159px;
min-height:400px;
border-right: 1px solid #7b7d7b;
padding-top:9px;
margin-bottom:9px;

/*
background-image:url(./painovarit.gif);
background-repeat: no-repeat;
background-position: left bottom;
background-attachment: absolute;
*/
}

* html #left {
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
height: 400px;
}

/*************************
RIGHT COLUMN
**************************/
#right {
background-color: #fff;
float: right; 
width: 159px;
min-height:400px;
border-left: 1px solid #7b7d7b;
padding-top:9px;
/*overflow:hidden;*/
overflow:visible;
}

* html #right {
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
margin: 0px -159px 0 0; /*** IE gets this margin. ***/
height: 400px;
}

/**************************
FOOTER
**************************/
#footer {
/*width: 762px;*/
width: 738px;
background-color: white;
margin-bottom: 1em;
/*margin-left: 6px;*/
margin: 0px auto;
margin-bottom: 10px;
padding-bottom: 0.5em;
}