/* tyylit.css */

/* Voidaan kske muuttamaan esim. kaikki <h1>- ja <p>-tagit. */

body
{
	background-color: #0033CC;
}

h1,h2,h3,h4,h5,h6
{	
	color: #FF6600;
	text-align: center;
}

.oikea
{
	text-align: right;
}

.vasen
{
	text-align: left;
}

.nelio2
{
	background-color: silver; */
	background-image: url("kuvat/smile.html"); */
	border: 1px dotted black;
	
	/* nelj eri tapaa tehd teksti valkoiseksi */
	color: white; 
	color: #ffffff; 
	color: rgb(255, 255, 255); 
	color: rgb(100%, 100%, 100%);
		
	float: left;
	font-family: verdana, arial;
	font-size: 200%;
	font-weight: bold;	
	
	height: 100px;
	/* left: 100px; */
	padding: 10px;
				
	text-align: center;
	/* text-align: right; */
	/* text-align: left; */
	
	top: 100px; 
	width: 100px;
	z-index: 2;
}

p.vasen
{
	margin-left: 0%;
}

p
{	
	color: #FFCC00; /* keltainen */
	margin-left: 20%;
	margin-right: 20%;	
}

dt
{
	color: #FF6600;	
	margin-left: 20%;
	margin-right: 20%;
}

dd
{
	color: #FFCC00;	
	margin-left: 20%;
	margin-right: 20%;
}

a:link
{
	color: white;
}

a:visited
{
	color: white;
}

a:active
{
	color: white;
}

a:hover
{
	color: white;
}

.reunus
{
	border: 2px solid #000000;
}

.marginaali
{
	margin: 5px;
}

.keskita
{
	text-align: center;
}
 
.kapea
{
	margin-left: 20%;
	margin-right: 20%;
}

.oranssi
{
	color: #FF6600;
}

.keltainen
{
	color: #FFCC00;
}

.valkoinen
{
	color: #FFFFFF;
}	

.reunat
{
	border: 1px solid #ffffff;
}

.iso
{
	font-size: 200%;
}

.abs
{
	position: absolute;
	top: 80%;
	left: 80%;
	height: 10%
	width: 10%;
	background-color: rgb(0, 255, 0);
}

.nelio 
{
 	position: absolute;
 	top: 100px; /* em on fontin korkeus */
 	left: 100px;
 	width: 100px;
 	height: 100px;
 	background-color: rgb(255, 0, 0);
}

.absoluuttinen
{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 200px;
	height: 200px;
	background-color: red;
}

.absoluuttinen2
{
	position: absolute;
	top: 0px;
	left: 200px;
	width: 42%;
	height: 200px;
	background-color: orange;
	color: black;
}

.absoluuttinen3
{
	position: absolute;
	top: 200px;
	left: 0px;
	width: 200px;
	height: 200px;
	background-image: url("arrow_r2.html");
	background-repeat: no-repeat;
	color: red;
}

.suhteellinen
{
	position: relative;
	top: 12px;
	left: 22px;
}

#columns 
{
 position: relative;
 top: 0;
 right: 0;
 padding-right: 20em;
}

#right 
{
 position: absolute;
 top: 0;
 right: 0;
 width: 20em;
}

td.valkoinen
{
	color: white;
	background-color: white;	
}

td.musta
{
	color: black;
	background-color: white;
}


p#sininen
{
	background-color: blue;
}

div#page2
{
	position: relative;
	top: 100px;
	left: 100px;
}

/* valikko */

/* #navi h2 { display: none; } */

#navi ul 
{
    margin: 30px 25px;
    padding: 0;
    list-style: none;
    border-top: 1px solid #ccc;
}

#navi li 
{
    border-bottom: 1px solid red;
}

#navi li.active 
{
    background-color: red;
}

#navi a 
{
    display: block;
    width: 175px;
    padding: 5px 10px 5px 25px;
    background: transparent url(arrow_r.html) 5px 50% no-repeat;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 125%;
    text-decoration: none;
    color: orange;
}

#navi a:hover
{
    background: #eaeaea url(arrow_r2.html) 5px 50% no-repeat;
    color: #333;
}

#navi ul.submenu
{
    margin: 0 0 5px 22px;
    border: 0;
}

#navi ul.submenu li
{
    border: 0;
}

#navi ul.submenu a
{
    background: transparent url(submenu_arrow.html) 5px 50% no-repeat;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    padding: 0 0 0 15px;
    width: 173px;
}

#navi ul.submenu a:hover
{
    background: transparent url(submenu_arrow2.html) 5px 50% no-repeat;
    text-decoration: underline;
}