body{
 /* background: url(../images/bg.jpg); */
}

a {
color: white;
font-weight: bold;
text-decoration:none;
letter-spacing: 2px;}


/* 
#containerframeright {
background: url('../images/rightbg.jpg') repeat-y right top;}
#containerframeleft {
background: url('../images/leftbg.jpg') repeat-y left top;}
#containerframebottom {
background: url('../images/bgbottom.jpg') repeat-x bottom bottom;}
*/
/* this would provide a lovely liquid design box for all the contents 
but doesn't fit for this design at the moment as index page too wide... */
/* #container
{
margin-top: 10px;
margin-left: 15%;
margin-right: 15%;
padding: 10px;
background-color: #FFF;
font: 11px Arial, sans-serif;
color: #4499d1;
}*/

#container{
background:white;
font: 11px Arial, sans-serif;

width:730px;
height:300px;
margin: 0px auto 0px auto; 
/*padding-bottom:22px;  height of the bottom image */
/* padding-right:50px;  width of the right hand side image */
}

#headercontainer{ /* for both header & menu */
height:300px;
width:100%;
margin: 0px;
background: url('../images/header.jpg') no-repeat center top;} 

 #header{;
height:210px;
/* background: url('../images/logo.gif') no-repeat center top;*/
} 


 #aboutbutton{
margin-right:15px;
margin-top:0;
float:right;} 


#menucontainer{
height:80px;
width:100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding-bottom:10px;
}

#menucontainer li {
	float: left;
	padding-right: 4px;
list-style: none;
text-align: center;
vertical-align: middle;}

#menucontainer li a {
	width: 80px;
	height: 80px;
	display: block;
}
#menucontainer li a:hover {
	margin-top: 8px;
	padding-bottom: 6px;
}

#submenucontainer{
height:15px;
width:90%;
margin-left: auto;
margin-right: auto;
}
#submenu{
margin-left: 20px;
color: #3982b0;
text-decoration: none;}

/* submenu items' alignment*/
.rightalign {text-align: right;}
.centeralign {text-align: center;}
.leftalign{text-align: left;}

/* background painting */
#contentframe {
height:430px;
width:100%;
margin-left:0px;
margin-top:10px;
background: white url(../images/contentbg.jpg) no-repeat top left; 
}

#content { 
margin-top:0;
padding-top:20px;
margin-left: 20px;
font-family: Arial, sans-serif;
color: #2a62ac;
padding-left:10px;
/* overflow: auto; */
height: 410px;
}

.standard li {
list-style-image: url(../images/rondcyan.png);

list-style-type: circle;}

#linkslower a{
text-transform: none;
color:white;
text-decoration: none;}

.scroll {
overflow-x: hidden; 
overflow-y: auto; 
height: 350px;
padding-bottom:20px;
width:680px;
padding-right:20px;
}

.white { color: white; 	font-weight: bold; }
.notice, .notice a{
	text-transform: uppercase;
	margin: 0 0 2px 0;
	font-weight: bolder;
	letter-spacing: 2px;
}

h3 {
	font-size: 85%;
	text-transform: uppercase;
	margin: 0 0 2px 0;
	font-weight: bolder;
	letter-spacing: 0.15em;
	font-family:Arial, sans-serif;
}

.3plusphoto{
float:right;
margin:5px;
clear: right;  /* next image starts after the other */
}


.mainpoint {
font: bold 130%;}
#piano {  list-style: square url(images/piano.gif);}
#notes {
  list-style: square url(images/notes.gif);}
#note {
  list-style: square url(images/note.gif);}
#rednote {
  list-style: square url(images/rednote.gif);}
  
h2 {
  color: white;
font-family: Arial, sans-serif;}

/*********************************************************/


#wrapper-intro {
	width: 100%;
	margin: 0em 10px 0em 0px;
	height:400px;
}
.noticeboard {
padding: 0px;margin:0;
/* background: url(../images/noticeboardbg.jpg) no-repeat left top; */
line-height: 16px;
}

.noticeboard td {
border-top: 1px #ffffff solid; border-left: 1px #ffffff solid;
border-bottom: 1px #7d7d7d solid; border-right: 1px #7d7d7d solid;
padding-left:3px; padding-right:3px;}

.noticeboard ul {
list-style-type: none; 
 padding-left: 0; 
 margin-left: 0; 
 }

.normal {
text-transform: none;
font: 11px Arial, sans-serif;
color: #2a62ac;
font-weight:normal;	
letter-spacing:0px;
}
.noticeboard li {list-style: none;}

#introsection {
float: left;
width: 510px;
margin:0;
clear: none;
word-spacing: 1px;}


/* menunappien tekstin sijoittelu */		
#introsection ul {
	padding: 0;
	margin-top:0;
	list-style: none;
	float: left:}

#introsection li{
	display: inline;
	float: left;
	width:220px;
	padding-bottom: 3px;
	padding-left: 3px;
	padding-top:5px;}

#introsection a {
	float: left;
	display: block;
	padding-left: 3px;}
	
	/* noticeboard table simulation */
	
.table { display: table; }
.tablerow { display: table-row; }
.tablecell { display: table-cell; }

#test {
color: #bae6f8;
}

/* contact us page table settings */

.headerrow{background-color: #a8a8cd;}
.headercol{background-color: #7bcf76;}

.headerrow, .headercol {
font-weight:bold;
font-size: 105%;
text-transform: uppercase;
padding:2px;
letter-spacing: 2px;
color:white;}

.termdates{text-transform: lowercase; font-size:9px;}

.cell, .headerrow, .headercol, .addresses, .headeraddresses {
border-top: 1px #ffffff solid; border-left: 1px #ffffff solid;
border-bottom: 1px #7d7d7d solid; border-right: 1px #7d7d7d solid;
}

td .cell {width:85px; height:30px; text-align: center;}

/* addresses table */

.addresses, .headeraddresses {
padding-top:3px; padding-bottom:3px;
}

.headeraddresses{font-weight:bold;}

.smallprint {font-size: 9px;font-weight:normal;}
.smallprint a {text-transform: lowercase;color: #c7380c;}

#review { width:90%;}

#review ul {
width:100%;
height: 100%;
margin:0;list-style-type: none;}

#review ul li a img { 
display:block;
width:70px;
height:70px;
text-decoration:none;
}
#review a img {width:70px; height:70px; border:0;}

#footer{
			border-top: 1px #fcfcfc solid;
			border-bottom: 1px #fcfcfc solid;
			float: left;
			width: 94%;
			text-align: right;
			color: #5385bf;
			margin: 2px 10px 5px 0px
}

 
/* This class variable will make your text blink */
.blinkytext {     text-decoration: blink; }
/* this works in mozilla firefox, e.g., but not in internet explorer */