/* Verkkokurssi -sivuston CSS-tyylitiedosto */
/* Padding ja margin kohtiin ei kannata tehdä muutoksia sillä, jos ei tiedä mitä on tekemässä niin se 
voi "hajottaa" sivuston rakenteen.
Fonttien, taustakuvat, värit voidaan vaihtaa halutessa. Huomioi fonttien koko, sen muuttaminen 
saattaa vaikuttaa rakenteeseen.
Suosittelen käyttämään Notepad++ tai jotain vastaavaa tekstieditoria. Perus Win-Notepad on 
aika tuskallinen käyttää tällaisten massakoodien kanssa. */

/* Sivuston tausta */
body {
	background: #494949 url(bg.jpg) repeat-x top;
	padding: 0px;
	margin: 0px;
}

/* Ylävalikko */
#ylavalikko {
	width: 100%;
	height: 30px;
	background: #404040 url(bg_ylavalikko.jpg) repeat-x top;
	text-align: center;
	color: #fff;
	font-family: 'Molengo', Verdana, Arial;
	text-transform:uppercase;
	font-size: 20px;
}
/* Menuvalikko */
#ylavalikko ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	text-align: center;
}

/* Ylävalikon listaustapa */

#ylavalikko li {
	display: inline;
}

/* Ylävalikon linkit */
#ylavalikko a {
	padding: 5px 15px;
	text-decoration: none;
	font-size: 15px;
	color: #fff;
}

#ylavalikko a:hover {
	color: #539eff;
}

/* Pääotsikko */
h1 {
	font-family: 'Molengo', Verdana, Arial;
	font-size: 18px;
	color: #000;
	font-weight: bold;
	text-transform:uppercase;
	padding: 0px;
	margin-bottom: 10px 
}

/* Alaotsikko */
h2 {
	font-family: 'Molengo', Verdana, Arial;
	font-size: 16px;
	color: #020202;
	font-weight: bold;
	text-decoration: none;
	padding: 0px;
	margin-right: 10px;
}

/* Vertikaalimenun otsikko */
h3 {
	font-family: 'Molengo', Verdana, Arial;
	font-size: 16px;
	color: #020202;
	font-weight: bold;
	text-decoration: none;
	padding: 0px;
	margin-left: 10px;
	margin-right: 10px;
}

/* Tehtävälistan otsikko */
h4 {
	font-family: 'Molengo', Verdana, Arial;
	font-size: 16px;
	color: #888;
	font-weight: bold;
	padding: 0px 0px 30px 0px;
	margin: 0px;
}

/* Runko */
#runko {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px;
	height: 100%;
	background: #fff;
	overflow:hidden;
	/* Alla oleva koodipätkä on rungon reunoissa näkyvä varjostus.*/
	/* Tämä ei välttämättä toimi kaikilla selaimilla, mutta ei vaikuta ulkoasuun lainkaan muuten kuin, että varjot eivät näy. */
	-webkit-box-shadow: 0px 0px 25px 1px #444;
	-moz-box-shadow: 0px 0px 25px 1px #444;
	box-shadow: 0px 0px 25px 1px #444;
	/* Tämä koodi pyöristää rungon alakulmat. */
	border-bottom-right-radius:10px; /* CSS3 */
	border-bottom-left-radius:10px; /* CSS3 */
	-moz-border-radius-bottomright:10px; /* Firefox */
	-moz-border-radius-bottomleft:10px; /* Firefox */
	-webkit-border-radius-bottomright: 10px; /* Safari, Chrome */
	-webkit-border-radius-bottomleft: 10px; /* Safari, Chrome */
}

/* Banneri */
#banneri {
	height:200px;
	text-align: center;
	background: url('headerkuva_grey2.jpg') no-repeat center;
	background-color: #fff;
	padding: 0px;
	margin: 0px;
}

/* Vertikaalimenun kehys */
#vasen {
	float: left;
	width: 200px;
	margin: 0px;
	padding: 0px;
	background: #fff;
	height: 90%;
}

/* Vertikaalimenu ja listaus ja linkit */
.vertikaalimenu ul{
	list-style:none;
	padding: 0px 0px 0px 10px;
	margin: 0px;
}

.vertikaalimenu ul li ul.alavalikko li a {
	background:none transparent;
}

.vertikaalimenu ul li ul.alavalikko li a:hover {
	font-weight:bold;
}

.vertikaalimenu a:link, .vertikaalimenu a:visited, .menulinkit a:link, .menulinkit a:visited {
	font-family: 'Molengo', Verdana, Arial;
	font-size: 16px;
	color: #000;
	text-align: left;
	background: url('urlbg1.jpg') no-repeat;
	text-decoration: none;
	margin-bottom: 6px;
	width: 200px;
	height: 26px;
 }
.vertikaalimenu a, .vertikaalimenu a:link, .vertikaalimenu a:visited {
	display:block;
}

.vertikaalimenu a:hover {
   font-weight: bold;
 }

/* Oikeanpuolinen alue - Sisältö */
#oikea {
	font-family: Verdana, Arial;
	font-size: 14px;
	color: #000;
	float: left;
	width: 730px;
	background: #fff;
	padding: 0px;
	margin-left: 20px;
	margin-right: 10px;
}

/* #oikea divin minimikorkeus */
div#oikea { 
	min-height:200px;
}

/* Tämä määrittää <p>tekstiä</p> tyylin ja linkityksien näyttötapaa */
p {
	width: 700px;
	padding: 0px;
	margin-bottom: 10px;
	font-family: Verdana, Arial;
	font-size: 14px;
	color: #000;
}

div.pmuotoilu {
	padding-bottom: 10px;
}

p.pmuotoilu a, .pmuotoilu a:link, .pmuotoilu a:visited, .pmuotoilu a:hover {
	color: #09152f;
	text-decoration: underline;
}

div.pmuotoilu a, .pmuotoilu a:link, .pmuotoilu a:visited, .pmuotoilu a:hover {
	color: #09152f;
	text-decoration: underline;
}

/* p-divin taulukkomuotoilu */
.pmuotoilu .ttaulukko td a {
	color:#ffffff;
	text-decoration:none;
	font-weight:normal;
}
/* <p></p> -muotoilu päättyy */

/* Tässä muotoillaan taulukon sisällä olevia <p></p> -määreitä */
.ptaulukko {
	width: 500px;
	padding-left: 50px;
	color: #fff;
}

/* Tässä muotoillaan <table>:n ulkonäköä */
.ttaulukko {
	display:block;
	width: 650px;
	margin-bottom: 30px;
	padding-top: 10px;
	padding-bottom: 10px; 	
	background: #333;
	color: #fff;
	/* Alla oleva koodipätkä on tablen reunoissa näkyvä varjostus.*/
	/* Tämä ei välttämättä toimi kaikilla selaimilla, mutta ei vaikuta ulkoasuun lainkaan muuten kuin, että varjot eivät näy. */
	-webkit-box-shadow: 0px 0px 25px 1px #555;
	-moz-box-shadow: 0px 0px 25px 1px #555;
	box-shadow: 0px 0px 25px 1px #555;
	/* Tämä koodi pyöristää rungon alakulmat. */
	-webkit-border-radius: 10px;/* Safari, Chrome */
	-moz-border-radius: 10px;/* Firefox */
	border-radius: 10px;/* CSS3 */
}

/* Muotoillaan taulukkotehtava ulkonäköä */
div#taulukkotehtavalista {
	display:block;
	background: #333;
	margin-right: 30px;
	/* Alla oleva koodipätkä on tablen reunoissa näkyvä varjostus.*/
	/* Tämä ei välttämättä toimi kaikilla selaimilla, mutta ei vaikuta ulkoasuun lainkaan muuten kuin, että varjot eivät näy. */
	-webkit-box-shadow: 0px 0px 25px 1px #555;
	-moz-box-shadow: 0px 0px 25px 1px #555;
	box-shadow: 0px 0px 25px 1px #555;
	/* Tämä koodi pyöristää rungon alakulmat. */
	-webkit-border-radius: 10px;/* Safari, Chrome */
	-moz-border-radius: 10px;/* Firefox */
	border-radius: 10px;/* CSS3 */
}

.taulukkotehtavalista {
	color: #fff;
	font-weight:bold;	
}

ul.taulukkotehtavalista {
	list-style:none;
	padding: 20px 20px 0px 20px;
	margin: 0px;
}

ul.taulukkotehtavalista li {
	padding: 0px 0px 20px 0px;
}

/* Muotoillaan arviointilistan ulkonäköä */
div#arviointilista {
	display:block;
	background: #333;
	margin-right: 30px;
	/* Alla oleva koodipätkä on tablen reunoissa näkyvä varjostus.*/
	/* Tämä ei välttämättä toimi kaikilla selaimilla, mutta ei vaikuta ulkoasuun lainkaan muuten kuin, että varjot eivät näy. */
	-webkit-box-shadow: 0px 0px 25px 1px #555;
	-moz-box-shadow: 0px 0px 25px 1px #555;
	box-shadow: 0px 0px 25px 1px #555;
	/* Tämä koodi pyöristää rungon alakulmat. */
	-webkit-border-radius: 10px;/* Safari, Chrome */
	-moz-border-radius: 10px;/* Firefox */
	border-radius: 10px;/* CSS3 */
}

.arviointilista {
	color: #fff;
	font-weight:bold;	
}

ul.arviointilista {
	list-style:none;
	padding: 20px 20px 0px 20px;
	margin: 0px;
}

ul.arviointilista li {
	padding: 0px 0px 20px 0px;
}

/* Footer eli alaosa */
#footer {
	clear: both;
	width: 960px;
	height: 20px;
	padding-top: 4px;
	background: #fff;
	font-family: Verdana, Arial;
	font-size: 11px;
	color: #000;
	text-align: center;
}

/* Footerin linkkimuotoilu */
#footer a {
	text-decoration: none;
	background:#fff;
	font-family: Verdana, Arial;
	font-size: 11px;
	color: #333;	
}