@charset "utf-8";
/* CSS Document */

body { 
    	max-width: 1000px;
	height: auto;
	margin-top: 0px;
	margin-left: 7px; 
	position: absolute;
	left: 20%;
	/*background-image:url('pictures/pegasoscontainerbg.jpg');
	background-image: no-repeat;*/
	background-color: #E7E7E6; /*#C0C0C0;*/
	font-family: Verdana, Geneva, sans-serif;
  	/*display: inline-block;*/
	}

	.headerBox1 {
	width: 420px;
	height: 245px;
	background-image:url('pictures/pegasostoppictleft.jpg');
	float: left;
	}
	
	.headerBox2 {
	width: 410px;
	height: 245px;
	background-image:url('pictures/pikart_top_pict_right.jpg');
	float: left;
	}
	
	.headerBox3{
	width: 420px;
	height: 245px;
	background-image:url('pictures/pirkka_artist_pict_right.jpg');
	float: left;
	}
	
	.headerBox4{
	width: 420px;
	height: 245px;
	background-image:url('pictures/pirkka_artist_pict_left.jpg');
	float: left;
	}
	
	.headerBox5{
	width: 420px;
	height: 245px;
	background-image:url('pictures/pirkka_work_pict_left.jpg');
	float: left;
	}
	
	.headerBox6{
	width: 420px;
	height: 245px;
	background-image:url('pictures/pirkka_work_pict_right.jpg');
	float: left;
	}
	
		.headerBox7{
	width: 420px;
	height: 245px;
	background-image:url('pictures/kaisa_work_pict_left.jpg');
	float: left;
	}
	
		.headerBox8 {
	width: 420px;
	height: 245px;
	background-image:url('pictures/kaisa_work_pict_right.jpg');
	float: left;
	}
	
	
	.headerBox9 {
	width: 420px;
	height: 245px;
	background-image:url('pictures/pikart_cource_pict_right.jpg');
	float: left;
	}
	
	/*.headerboxLow {
	width: 420px;
	height: 80px;
	background-image:url('pictures/pikart_top_low.jpg');
	float: left;
	}*/
	
	
	
.topnav {
	max-width: 843px;
	height: auto;
  background-color: #333;
  overflow: hidden;
  float: left;
	}
	
	

/* Style the links inside the navigation bar */
.topnav a {

  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 6px 14px;
  text-decoration: none;
  font-size: 11px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #717171;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/*@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* RESPONSIIVISUUTTA MENUUN

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>*/

	.itemBox {
	width: 380px;
	height: 410px;
	padding: 15px 15px 15px 15px;
	background-color: white; /*#E1E1E1;*/
	float: left;
	display: block:
	} 
	
	.itemboxHeader {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11pt;
	color: #F14E0E; /*gray;*/
	font-style: bold;
	background-color: white; /*#E1E1E1;*/

	} 
	
	.itemboxText {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 9pt;
	line-height: -9pt;
	background-color: white; /*#E1E1E1;*/
	} 
	

		.itemboxHigh {
	width: 380px;
	height: 600px;
	padding: 15px 15px 15px 15px;
	background-color: #E1E1E1;
	float: left;
	display: inline-block;
	} 
	
	.itemboxheaderHigh {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14pt;
	color: gray;
	font-style: bold;
	background-color: white; /*#E1E1E1;*/

	} 
	
	.itemboxtextHigh {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 9pt;
	background-color: white; /*#E1E1E1;*/
	} 
	
	
		.itemboxHigh2 {
	width: 380px;
	height: 600px;
	padding: 15px 15px 15px 15px;
	background-color: reds; /*#E1E1E1;*/
	float: left;
	display: block;
	} 
	
	.itemboxheaderHigh2 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14pt;
	color: gray;
	font-style: bold;
	background-color: white; /*#E1E1E1;*/

	} 
	
	.itemboxtextHigh2 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 9pt;
	background-color: white; /*#E1E1E1;*/
	} 
	
	
	.itemBox2 {
	width: 380px;
	height: 410px;
	padding: 15px 15px 15px 15px;
	background-color: white; /*#E1E1E1;*/
	float: left;
	display: inline-block;
	} 
	
	.itemboxHeader2 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11pt;
	color: #F14E0E; /*gray;*/
	font-style: bold;
	background-color: white; /*#E1E1E1;*/
	} 
	
		.itemboxText2 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 9pt;
	background-color: white; /*#E1E1E1;*/
	float: left;
	display: inline-block;
	} 
	
	.itemBox3 {
	width: 380px;
	height: 410px;
	padding: 15px 15px 15px 15px;
	background-color: white; /*#E1E1E1;*/
	float: left;
	display: inline-block;
	} 
	
	.itemboxHeader3 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11pt;
	color: #F14E0E; /*gray;*/
	font-style: bold;
	background-color: white; /*#E1E1E1;*/
	} 
	
		.itemboxText3 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 9pt;
	background-color: white; /*#E1E1E1;*/
	float: left;
	display: inline-block;
	}
	
	
			.itemBox4 {
	width: 380px;
	height: 410px;
	padding: 15px 15px 15px 15px;
	background-color: white; /*#E1E1E1;*/
	float: left;
	display: inline-block;
	} 
	
	.itemboxHeader4 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11pt;
	color: #F14E0E; /*gray;*/
	font-style: bold;
	background-color: white; /*#E1E1E1;*/
	} 
	
		.itemboxText4 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 9pt;
	background-color: white; /*#E1E1E1;*/
	float: left;
	display: inline-block;
	}
	
	
	.itemBox5 {
	width: 380px;
	height: 410px;
	padding: 15px 15px 15px 15px;
	background-color: white; /*#E1E1E1;*/
	float: left;
	display: inline-block;
	} 
	
	.itemboxHeader5 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11pt;
	color: #F14E0E; /*gray;*/
	font-style: bold;
	background-color: white; /*#E1E1E1;*/
	} 
	
		.itemboxText5 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 9pt;
	background-color: white; /*#E1E1E1;*/
	float: left;
	display: inline-block;
	}
	
	
	.itemBox6 {
	width: 380px;
	height: 410px;
	padding: 15px 15px 15px 15px;
	background-color: white; /*#E1E1E1;*/
	float: left;
	display: inline-block;
	} 
	
	.itemboxHeader6 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11pt;
	color: #F14E0E; /*gray;*/
	font-style: bold;
	background-color: white; /*#E1E1E1;*/
	} 
	
		.itemboxText6 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 9pt;
	background-color: white; /*#E1E1E1;*/
	float: left;
	display: inline-block;
	}
	
	.footerBox1 {
	width: 380px;
	height: 15px;
	padding: 10px 15px 15px 15px;
	background-color: #4A4C4B;
	float: left;
	display: block;
	} 
	
	.footerboxText1 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 8pt;
	color: white;
	} 
	
	.footerBox2 {
	width: 380px;
	height: 15px;
	padding: 10px 15px 15px 15px;
	background-color: #4A4C4B;
	float: left;
	} 
	
	.footerboxText2 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 8pt;
	color: white;
	}