/*--@charset "utf-8";--*/
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background-image: url(Kuvat/taustakuvasininen2.jpg);
	margin: 30px auto;
	padding: 5px;
	clear: both;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { 
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	
	padding-right: 10px;
	padding-left: 20px; 
	text-align: left;
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}
img{
	max-width: 100%;
	height: auto;
}

/*~~ Älä muuta näiden järjestystä--*/
a:link {
	color: #42413C; /*harmaanmusta*/
	text-decoration: underline; 
}
a:visited {
	color: #6E6C64; /*vaaleampi harmaa*/
	text-decoration: underline;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
}
/* ~~ This fixed width container surrounds all other blocks ~~ */
.container {
	width: 960px;
	background-color: #FFFFFF; /*valkoinen*/
	margin: auto; /*--keskittää layoutin--*/
}
/* ~~ The header is not given a width. It will extend the full width of your layout. ~~ */
header {
	background-color: #FFFFFF; /*valkoinen*/
}
.sidebar1 {
	float: left;
	width: 140px;
	background-color: #FFFFFF; /*siniharmaa*/
	padding: 20px;
	margin: 15px 15px 15px 15px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	overflow: hidden;
	text-align: left;
}
.sidebar2 {
	float: right;
	width: 140px;
	background-color: #0099FF;
	padding: 20px;
	margin: 20px 20px 20px 20px;
		}
.sidebar3 { /*kuvaa varten palvelut- ja yhteystiedot -sivuille*/
	width: auto; /*oli 200px*/
	float: right;
	overflow: hidden;
	background-color: #FFFFFF; /*valkoinen*/
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	height: auto;
	border-right-width: 50px; /*tällä viimeisellä arvolla palkin saa irti oikeast reunasta*/
	font-style: italic;
	font-size: 14px;
	padding: 20px 20px 20px 20px;
	border-left-width: 5px;
	margin: 20px 20px 20px 20px;
	margin-top: 55px;
}
.content {
	padding: 0px;
	width: 650px;
	float: left;
	background-color: #99CCFF;
}
/* ~~ listat .content-alueella ~~ */
.content ul, .content ol {
	padding: 15px 15px 15px 20px;
}
ul.nav {
	list-style: none; 
	border-top: none; /* this creates the space between the navigation on the content below */
	margin: 15px auto;
}
ul.nav li {
	border: none;
}
ul.nav a, ul.nav a:visited { /*nämä ryhmään, niin jutut säilyy*/
	padding: 10px 0px 5px 20px;
	display: inline-block;
	width: 140px;  /*this width makes the entire button clickable for IE6*/
	text-decoration: none;
	background-color: #99CCFF; /*sininen*/
	float: left;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
	background-color: #CCCCCC;
	color: #000;
}
footer {
	padding: 15px;
	background-color: #0066FF;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both;
	width: auto;
}

/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
header, section, footer, aside, article, figure {
	display: block;
	text-align: center;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
	font-size: 14px;
}
/* MEDIA QUERIES, tähän alle kopsattu koko alkuperäinen css ensin respomuutoksia varten*//*min oli 150px*/
@media only screen and (min-width : 200px) and (max-width : 780px)
{
body {
	font: 70% "Trebuchet MS", Arial, Helvetica, sans-serif; /*oli 100%*/
	margin: auto;
	padding: 0;
	clear: both;
	width: 70%; /*lisäsin*/
}
ul, ol, dl { 
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	padding-right: 15px;
	padding-left: 25px;
	text-align: left;
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}
img{
	max-width: 100%;
	height: auto;
}
/* älä muuta näiden (a:) järjestystä */
a:link {
	color: #999999;
	text-decoration: underline;
}
a:visited {
	color: #6E6C64; 
	text-decoration: underline;
}
a:hover, a:active, a:focus {
	text-decoration: none;
	color: #F00; /*kirkkaanpunainen*/
	background-color: #D6D6D6; /*vaaleanharmaa*/
}
.container {
	width: 100%; /*oli 980px*/
	background-color: #FFFFFF; /*valkoinen*/ 
	/*margin: auto; layoutin keskittäminen*/
}

/* ~~ The header is not given a width. It will extend the full width of your layout. ~~ */
header {
	background-color: #FFFFFF; /*valkoinen*/ 
}
.sidebar1{ /*ylänavi, älä koske tähän enää*/
	width: 70%; /*oli 140px*/
	float: left;
	padding: 20px;
	margin: 15px auto;
	text-align: left;
	overflow: hidden;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	height: auto;	
}
.sidebar2 { /*ns. uutispalkki vasen*/
	width: 70%; /*oli 140px*/
	float: left;
	padding: 20px;
	text-align: inherit;
	overflow: hidden;
	background-color: #3399FF; /*perussininen*/
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	height: auto;
	border-left-width: 15px;
	}
.sidebar3 { /*kuvaa varten palvelut- ja yhteystiedot -sivuille*/
	width: 70%; /*oli 200px*/
	float: left;
	overflow: hidden;
	background-color: #CCCCCC; /*harmaa*/
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	height: auto;
	border-left-width: 5px; /*tällä viimeisellä arvolla palkin saa irti vasemmasta reunasta*/
	font-style: italic;
	font-size: 14px;
	padding: 15px 15px 15px 15px;
	border-left-width: 5px;
	margin: 10px 10px 75px 10px;
	margin-top: 75px;
}
.content {
	padding: 15px;
	width: 70%; /*oli 700px*/
	float: left;
	margin-top: 4%; /*lisätty*/
	margin-left: 10%; /*lisätty*/
	margin-bottom: 4%; /*lisätty*/
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
	background-color: #FFF;
	color: #000;
}	
.content ul, .content ol {
	padding: 15px 15px 15px 15px;
}

/* ~~ This grouped selector gives the lists in the .content area space ~~ */

/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
	list-style: none; 
	overflow: hidden;
	width: 90%; /*oli 700px*/
	float: right;
	text-align: left;
	overflow: hidden;
	margin: 2%; /* oli 5px 5px 5px 230px */
/* }
ul.nav li {
	border-bottom: 1px solid #666; /* this creates the button separation -- otinkin pois*/
}
ul.nav a, ul.nav a:visited {
	padding: 5px 5px 5px 5px; /*vimppa oli 20px*/
	display: block; /* koko alue klikkausalueena */
	width: 160px;  /*this width makes the entire button clickable for IE6, pitääkö laskea uudelleen respossa? ei*/
	text-decoration: none;
	background-color: #000000; /*musta*/
	float: left;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
	background-color: #0099FF;  /*sininen*/
	color: #000; /*valkoinen*/
}
footer {
	width: 70%; /*lisätty*/
	padding: 15px 15px 15px 15px;
	position: relative;
	clear: both;
	margin: 2%;
	margin-bottom: 10px;
	text-align: center;
}
}