/* rakenne pohjautuu tähän: http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm  */
/* General styles */
  
  body {
        margin: 0px;
        font-family: Verdana,Helvetica,Arial,sans-serif;
        padding: 0px;
        border: 0px;			/* This removes the border around the viewport in old versions of IE */
        width: 100%;
        background: #fff;
        min-width: 600px;    /* Minimum width of layout - remove line if not required */
							/* The min-width property does not work in old versions of Internet Explorer */
    }

	/* Header styles */
 
#header {
text-align: center;
height: 159px;
margin-bottom: 6px;
background: white url(../kuvat/njs_bannerinpohja_1800.jpg) left no-repeat;
}


#otsikkopalkki {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 159px; }


 div#vasenbanneri {
  position:absolute;
  top: 0px;
	}

 div#oikeabanneri {
  top: -50px;
  float:right;
	}

	/* column container */
	.colmask {
		position:relative;		/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
	    clear:both;
	    float:left;
        width:100%;				/* width of whole page */
		overflow:hidden;		/* This chops off any overhanging divs */
	}
	/* holy grail 3 column settings */
	.holygrail {
/*	    background:#ff9;  */   	/* Right column background colour */
	}
    .holygrail .colmid {
        float:left;
        width: 200%;
        margin-left:-170px; 	/* Width of right column;  oli -200px*/
        position:relative;
        right:100%;
        background:#fff;    	/* Centre column background colour */
    }
    .holygrail .colleft {
        float:left;
        width:100%;
        margin-left:-50%;
        position:relative;
        left:340px;         	/* Left column width (colmid: margin-left:) + right column width (col1wrap:right:); oli 400px */
/*        background:#FFD8B7;   */ 	/* Left column background colour */
    }
    .holygrail .col1wrap {
        float:left;
	    width:50%;
	    position:relative;
	    right:170px;        	/* Width of left column;  oli 200px */
	    padding-bottom:1em; 	/* Centre column bottom padding. Leave it out if it's zero */
	}
	.holygrail .col1 {
        margin: 0 185px;     	/* Centre column side padding:
                            	Left padding = left column width (col2:right:) + centre column left padding width 
                            	Right padding = right column width (col1wrap:right:) + centre column right padding width
                            	oli :0 215px*/
        position:relative;
	    left: 200%;
	    overflow:hidden;
	}

.holygrail .col2 {
        float:left;
        float:right;			/* This overrides the float:left above */
        width:160px;        	/* Width of left column content (left column width minus left and right padding) oli 170px */
        position:relative;
        right:5px;         	/* Width of the left-had side padding on the left column; oli 15px; jos lisäät arvoa, vasemman palstan vasen marginaali kapenee!! 25 px = muutama pikseli reunasta */
    }

.holygrail .col3 {
        float: left;
        float: right;			/* This overrides the float:left above */
        width: 160px;        	/* Width of right column content (right column width minus left and right padding)  oli 170px */
        margin-right: 10px;  	/* Width of right column right-hand padding + left column left and right padding oli 45px */
        position: relative;
        left: 50%;
    }

p { 
	font-size: 0.8em;
    font-family: Verdana,Helvetica,Arial,sans-serif;
    color: #000;
    margin-left: 2px;
    margin-right: 2px;
    text-align: left;
    padding: 0px;
    line-height: 1.1em;
    }
    
h1 { font-size: 1.8em;
    text-align: center;
	color: #036;
	background-color: #ddd;
    font-family: Verdana,Helvetica,Arial,sans-serif;
    font-weight: bold;
    }

h2 { font-size: 1.5em;
    text-align: center;
	color: #036;
	background-color: #ddd;
    font-family: Verdana,Helvetica,Arial,sans-serif;
    font-weight: bold;
    }

h3 { font-size: 1.2em;
    text-align: center;
	color: #036;
    font-family: Verdana,Helvetica,Arial,sans-serif;
    font-weight: bold;
    }

h4 { font-size: 1.0em;
    text-align: left;
	color: #036;
    font-family: Verdana,Helvetica,Arial,sans-serif;
    font-weight: bold;
    }
    
h5 { font-size: 0.6em;
    text-align: left;
	margin-left:5px;
	color: #036;
    font-family: Verdana,Helvetica,Arial,sans-serif;
    font-weight: bold;
    }

#menu {
	list-style-type:none;
	border:1px solid #fff;
	margin:5px;
	padding:5px;
}

#oikeamenu {
	list-style-type:none;
	border:1px solid #fff;
	margin:5px;
	padding:5px;
}

.col2 p {
    text-align: center;
    font-family: Verdana,Helvetica,Arial,sans-serif;
	color:#036;
	margin:1px;
    font-size: 0.9em;
    font-weight: bold;
/*	padding:2px;*/
}

.col2 h2 {
	background-color:#fff; /*oli:#c33 */;
}

#fixtaulukko {
	width: 154px;
	margin: 1px; 
	background-color: #036;
    padding: 4px;
    margin-top: 10px;
/*	border:1px solid #fff; */
	} 

.oikeatasaus {
	font-size: 0.6em;
	color: #036;
    font-family: Verdana,Helvetica,Arial,sans-serif;
    font-weight: bold;
	text-align: right;	 }

.fixtaulukko p {
    font-family: Courier New,Courier,monospace;
    font-weight: bold;
	color: #ff3;
	font-size: 0.6em;
	text-align: left;	 }

 #rightRail h2 {
    text-align: center;
    color: #fff;    
	background-color: #fff;
	margin:0px;
	padding:0px;
}

#rightRail a {
    text-align: center;
    color: #fff;    
}

#rightRail h3 {
    text-align: center;
    color: #036;    
	margin:3px;
	padding:2px;
}

#rightRail h4 {
    text-align: center;
    color: #ff3;
	margin:3px;
	padding:2px;
}

#rightRail h5 {
    text-align: center;
    color: #ff3;    
	margin:3px;
	padding:0px;
}

.article_ei_reunaa {
	overflow:hidden;
} /*jotta pääartikkeli olisi reunaton */
* html .article_ei_reunaa {
	height:1%; /* So IE plays nice */
}

.article {
	border:1px solid #036;
	margin-bottom:10px;
	overflow:hidden;
} /*normaali artikkeli, johon halutaan reuna */
* html .article {
	height:1%; /* So IE plays nice */
}

.article p {
    color: #036;    
    line-height:1.3em;
	padding-bottom:5px;
	margin:2px;
	margin-left:10px;
}

.article ul li {
	font-size: 0.8em;
    font-family: Verdana,Helvetica,Arial,sans-serif;
    color: #036;    
    line-height:1.3em;
	padding-bottom:5px;
	margin:2px;
	margin-left:10px;
}
.article pre {
    font-family: Courier New, Courier, monospace;
    color: #c03;    
    line-height: 1.3em;
	margin: 2px;
	margin-left: 20px;
}
   
.article h2 {
	margin-top: 0px;
	font-size: 1.4em;	
}

.article h3 {
	margin-top: 0px;
	font-size: 1.5em;	
}

.article h4 {
font-size: 1.0em;
margin-left: 14px;
}

.oikea_pieni {
	font-size: 0.5em;
    text-align: right;
    line-height: 1.1em;
	margin-bottom: 12px;
}

p.oikea_pieni {
    font-style: italic;
	margin-right: 5px;
} /*tämä käy mm. oikelle tulevien kuvaajien ja kirjoittajien nimiin sekä sisäisiin linkkeihin */

.otsikkopalkki {
	border: 1px solid #036;
	overflow: hidden;
	margin-bottom: 10px;
}
* html .otsikkopalkki {
	height:1%; /* So IE plays nice */
}

.otsikkopalkki h2 {
	margin-top: 0px;
	font-size: 1.6em;	
	margin-bottom: 0px;
}

.oikealle {
	padding:2px;
	padding-top:2px;
	padding-left:4px;
	overflow: hidden; /*IE6 ylivirtabugi hoitoon*/
	float:right;
	}

.vasemmalle {
	padding:2px;
	padding-top:2px;
	padding-right:4px;
	overflow: hidden; /*IE6 ylivirtabugi hoitoon*/
	float:left;
	}

#joukkue {
	border:2px solid #fff;
	float: left;} /*tällä joukkuekuva asetaan taulukon vasemmalle puolelle */

#table { 
	margin-left: auto; 
	margin-right: auto;
	border:1px solid #fff;
	font-size: 0.9em;
	color: #ff3;
    font-family: Verdana,Helvetica,Arial,sans-serif;
	text-align: center;	}

#pelaajaluettelo td, th {
    text-align: center;
    font-size: 1.0em;
    font-family: Verdana,Helvetica,Arial,sans-serif;
    font-weight: bold;
    color: #036;    
	padding:7px;
}

#tukijaluettelo td, th {
    text-align: center;
    font-size: 0.8em;
    font-family: Verdana,Helvetica,Arial,sans-serif;
    font-weight: bold;
    color: #036;    
	padding:5px;
}

#yhteys {
	margin-left: auto; 
	margin-right: auto;
    width:100%;
	}

#yhteys td, th {
	text-align: left;	
	vertical-align: top;
	font-size: 0.9em;
    font-family: Verdana,Helvetica,Arial,sans-serif;
 /*   font-weight: bold; */
    color: #036;    
    padding: 7px;
	border:1px dotted #036; 
}

#pelitaulukko td, th {
	text-align: left;	
	vertical-align: top;
	font-size: 0.8em;
    font-family: Verdana,Helvetica,Arial,sans-serif;
 /*   font-weight: bold; */
    color: #036;    
    padding: 7px;
	border:1px dotted #036; 
}

#pelitauluotsikko { 
	font-size: 1.2em;
    color: #036;    
    font-family: Verdana,Helvetica,Arial,sans-serif;
    font-weight: bold;
	text-align: center;	}

.pilkkutaulukko {
	margin-left: auto; 
	margin-right: auto;
    width:100%;
	}

.pilkkutaulukko td, th {
	text-align: left;	
	vertical-align: top;
	font-size: 0.9em;
    font-family: Verdana,Helvetica,Arial,sans-serif;
 /*   font-weight: bold; */
    color: #036;    
    padding: 7px;
	border:1px dotted #036; 
}

	/* Footer styles */
#footer {
 	background-color:#036;
       clear:both;
        float:left;
        width:100%;
    }

 #footer p {
    text-align: center;
    font-size: 0.8em;
    font-family: Verdana,Helvetica,Arial,sans-serif;
    font-weight: bold;
    color: #ff3;    
}

.footer a, .footer a:visited {
	color: #ff3;
    }   

#footer a, #footer a:visited {
	color: #ff3;
    } 

.infoboksi {
    width: 152px; 
    height: auto; 
	margin: 2px;
    margin-top: 6px;
	padding: 2px;
	background-color: #036;
/*    border: 1px solid #000; vain havainnollisuuden vuoksi */ }

.tukijaboksi {
    width: 320px; 
    height: auto; 
	margin: 2px;
    margin-top: 0px;
    margin-bottom: 6px;
	padding: 2px;
	background-color: #fff;
    border: 1px solid #000; /*vain havainnollisuuden vuoksi */ }

p.infoboksi {
	font-size: 0.7em;
    line-height: 1.1em;
    font-family: Verdana,Helvetica,Arial,sans-serif;
    font-weight: normal;
    padding: 0px;
    padding-top: 6px;
    text-align: left;
/*    line-height: 0.8em;*/
	color: #ff3;
    }   

h4.infoboksi { 
	font-size: 0.7em;
    font-family: Verdana,Helvetica,Arial,sans-serif;
    text-align: left;
    line-height: 1.2em;
    padding: 0px;
    font-weight: bold;
	color: #ff3;
    }

h4.joukkue { 
	font-size: 0.7em;
    font-family: Verdana,Helvetica,Arial,sans-serif;
    text-align: center;
    line-height: 1.2em;
    font-weight: bold;
	color: #036;
    }

#laskuri {
    width: 152px; 
	font-size: 0.7em;
    font-family: Verdana,Helvetica,Arial,sans-serif;
    text-align: center;
/*    line-height: 0.8em;*/
	color: #036;
    }  

#laskuri h4 { 
    text-align: center;
    }

/*tästä alkaa listan kesytys valikoksi */
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/flyout2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any  way to fit your requirements.
=================================================================== */
.menu {
z-index:1000;
font-family: Verdana,Helvetica,Arial,sans-serif;
font-weight: bold;
font-size: 0.7em; /*tällä valikkojen pistekoko */
margin:0px; 
margin-left:2px; /*tällä valikko irti vasemmalta */
}

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

/* hack for IE5.5 */
* html .menu ul {margin-left:-16px; ma\rgin-left:0;}
/* position relative so that you can position the sub levels */

.menu li {
position:relative;
background:#036;  /* IE6 Bug */
height:23px;
}

/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

/* style the links */
.menu a, .menu a:visited {
display:block; 
text-decoration:none;
height:22px;
line-height:22px;
width:159px; /* Set 1px less than menu width */
color: #ff3;
font-weight: bold;
text-indent:5px;
border:1px solid #fff;
border-width:0 1px 1px 0;
}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {background:#036; width:160px; w\idth:159px;}
/* style the link hover */
* html .menu a:hover {color:#fff; background:#000;}

.menu :hover > a {
color:#fff; 
background:#000;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
top:0;
left:160px; 
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul {
visibility:visible;
}

/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul {
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul {
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul { 
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul { 
visibility:visible;
}

disc {
width: 100%;
margin-left:15px;
}

.disc li {
	font-size: 0.8em;
	list-style-type: disc;
    font-family: Verdana,Helvetica,Arial,sans-serif;
    text-align: left;
    line-height:1.3em;
    color: #036;
    background: #fff;
    margin-left:15px;
	border:0px;
}

/*a.disc {
	font-size: 0.8em;
	width:99%;
	display: inline;
    font-family: Verdana,Helvetica,Arial,sans-serif;
    text-align: left;
    padding:0px;
    line-height:1.3em;
    background: #fff;
    color: #036;    
	margin:0px;
	border: 0px;
}
*/
dl {
	font-size: 0.8em;
	width: 100%;
    font-family: Verdana,Helvetica,Arial,sans-serif;
    text-align: left;
    padding: 0px;
    color: #036;    
    line-height: 1.3em;
	margin: 2px;
	border: 0px;
}

ul.decimal {
	font-size: 0.8em;
	list-style-type: decimal;
	display: inline;
	width: 100%;
    font-family: Verdana,Helvetica,Arial,sans-serif;
    text-align: left;
    padding: 0px;
    color: #036;    
    line-height: 1.3em;
	margin: 0px;
	border: 0px;
}

li.decimal {
	margin-left:35px;
	}
	
ul.lalpha {
	margin-left:20px;
	border: 0px;
	list-style-type: lower-alpha
}

.sisempi {
	margin-left:60px;
}

.oikeamenu ul {
    font-family: Verdana,Helvetica,Arial,sans-serif;
	width: 160px; /* Width of Menu Items */
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid #ccc;
	}
	
.oikeamenu ul li {
	position: relative;
	}
	
.oikeamenu li ul {
	position: absolute;
	left: 159px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	}

/* Styles for Menu Items */
.oikeamenu ul li a {
	display: block;
	text-decoration: none;
    font-weight: bold;
    text-align:left;
    font-size: 0.7em; /*tällä valikkojen pistekoko */
	color: #ff3;
	background: #036; /* IE6 Bug */
	padding: 5px;
	border: 1px solid #ccc; /* IE6 Bug */
	border-bottom: 0;
	}
	
/* Holly Hack. IE Requirement \*/
* html .oikeamenu ul li { float: left; height: 1%; }
* html .oikeamenu ul li a { height: 1%; }
/* End */

.oikeamenu ul li a:hover { 
color: #fff; background: #000; } /* Hover Styles */

.oikeamenu li ul li a { padding: 5px 5px; }  /* Sub Menu Styles */

.oikeamenu li:hover ul, li.over ul { display: block; } /* The magic */

/*  menujen peruste: http://www.alistapart.com/articles/horizdropdowns */