/* 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;
clear:both;  }


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

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

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

#kalenteri {
	width: 160px; /* Width of Menu Items */
	margin: 0;
	padding: 0;
	height: auto;
 }

	/* 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;
    margin-left:2px;
    margin-right:2px;
    text-align: left;
    padding:0px;
    line-height:1.1em;
    font-family: Verdana,Helvetica,Arial,sans-serif;
	color: #036;
    }
    
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;
    font-size: 1.9em;
	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;
	background-color: #036;
    padding: 4px;
    padding-top: 1px;
    padding-bottom: 1px;
	margin: 1px; 
	margin-top: 10px; 
/*	border:1px solid #fff; */
	} 

#fixtaulukko p {
    font-family: Courier New,Courier,monospace;
    font-weight: bold;
	font-size: 0.7em;
	margin-left: 3px; 
    line-height: 1.2em;
	color: #ff3;
	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{
	padding-bottom:3px;
	margin:2px;
	margin-left:10px; }
   
.article h2{
	margin-top:0px;
	font-size: 1.4em;	 }

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

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

.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; }
	
.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 {
	margin-left: auto; 
	margin-right: auto;
    width:99%; }

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

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

#yhteys td, th{
	text-align: left;	
	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;    }

.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 */ }

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;    }

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;
    }
    
#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;    }

nav {
	width: 160px; /* Width of Menu Items */
}

/*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;
}


.oikeamenu  {
	list-style: none;
	}
	
.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 */