body { color: #000;
	margin:0 0.625em;  /*10px margin outside container */
	padding: 0;
	background: #4f4f4f;
	font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
	font-size: 1.000em;  /*base font 16px*/	  }
 			
H1 { color: #000; 
	margin:0;
	padding: 20px 0 15px 15px;
	font-weight: bold;
	background-color: transparent;
	font-size:140% ;
	font-family: "Monotype Corsiva", "Apple Chancery", "URW Chancery L", serif; 
	vertical-align:middle;   }
		
H2 { color: #000;
	font-size:120%;
	font-weight: bold; 
	font-family:  "Monotype Corsiva", "Apple Chancery", "URW Chancery L", serif; 	}


#container {width:100%; 
	max-width:62.500em; /*1000px*/
	position:relative;
	margin:10px auto;
	background:#d9dcdc;   }  /*dk gray*/
	
#header {width:100%;
  	height:75px;
	background:#D2D2CA;
	border-bottom:5px #ff4400 solid; } 
	
.banner  img  {  /*piano img*/
	display:block;
	border-bottom:5px #ff4400 solid;  }

#content { width:100%;
	padding: 0 8%;
	border-bottom:5px solid #ff4400;   }

#footer { width:100%;
	color: #000;
	background:#D2D2CA;
	margin: 0 auto;
	padding:10px;
	font-family: Arial, Helvetica, sans-serif;
	border:1px solid #000; }
	

/*----------FONTS --------------*/


.exsmallfont {font-size:11px;}
.smallfont {font-size:12px;}
.medfont {font-size:14px;}
.largefont {font-size:16px; }
.exlargefont {font-size:18px; }
.exexlargefont {font-size:20px; }

.textbottom {vertical-align:text-bottom;}
.textmiddle {vertical-align:middle;}
.texttop {vertical-align:top;}
.textbaseline {vertical-align:baseline;}

.caption { text-align:center;
	font-size:95%;
	font-weight:bold;
	font-family:  "Monotype Corsiva", "Apple Chancery", "URW Chancery L", serif; }

/* ----------POSITIONING --------*/

.left {text-align:left;} 
.center {text-align:center;}
.right {text-align:right;}

.clearboth {clear:both;}
.clearleft {clear:left;}
.clearright {clear:right;}

.textbottom {vertical-align:text-bottom;}
.textmiddle {vertical-align:middle;}
.texttop {vertical-align:top;}
.textbaseline {vertical-align:baseline;}

.indent { margin-left:3em;
   margin-right: 3em; }


/*-------PADDING MARGINS -----------*/

.pad5 {padding:5px; }
.pad8 {padding:8px; }
.pad8lrb {padding:0 8px 8px 8px;}

.pad10 {padding:10px; }

.pad12l {padding-left:12px; }
.pad12r {padding-right:12px; }
.pad12t {padding-top:12px; }
.pad12b {padding-bottom:12px; }

.mar12 {margin:12px; }
.mar12l {margin-left:12px; }
.mar12r {margin-right:12px; }
.marb12 {margin-bottom:12px; }
.mart12 {margin-top:12px; }

.mar8 {margin:8px; }
.mar8l {margin-left:8px; }
.mar8r {margin-right:8px; }
.marb8 {margin-bottom:8px; }
.mart8 {margin-top:8px; }

.mar20l {margin-left:20px; }
.mar20r {margin-right:20px; }
.marb20 {margin-bottom:20px; }


	 /* ---------STYLING ------------*/

.bullet { font-size: 25px; font-weight: bold; }

.indent { margin-left:1.5em;
   margin-right: 1.5em; }

img {border:0;
	max-width:100%; 
	height:auto;    /*preserves aspect ratio*/    } 

.border {border:1px solid #000;}

.hrline {width:70%;
	border-bottom:2px #006699 solid;
    margin-left:auto;
    margin-right:auto; 
	padding-top:5px;}
	
.block {display:block; }

* {box-sizing:border-box; }/*to keep border padding inside of boxes*/	

UL  { margin:1px;
	list-style-type: disc; 
	font-size: 100%; 
	font-family: arial,Helvetica,sans-serif; }
	

	 /* put in outer div - use only for size smaller than orig */
.video-wrapper { 
	float:right;
	width: 280px;
	max-width:100%; 
	margin: 0 0 15px 12px; }
	
		/* fix for responsive video - add box600 to div as it expands to boundary */
.video {position:relative;
	width:280px;
	padding-bottom:56.25%;
	padding-top:30px; 
	height:0;
	overflow: hidden;   }
.video iframe,
.video object,
.video embed {position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;  } 
	

/*-------------SPECIAL FEATURES --------*/

 .gallery {     /* needs no media queries */
    text-align: center;  }
.galleryitem {
		margin:8px 0;
    display: inline-block;
    text-align: center; 
    vertical-align: top; }
    
   /* ---------BOXES --------- */ 

.box900  {width:900px;
    margin:0 auto; }

.box800  {width:800px;
    margin:0 auto; }

.box700 {width:700px;
    margin:0 auto; }
    
.box650 {width:650px;
    margin:0 auto; }

.box600 {width:600px;
    margin:0 auto; }

.box500 {width:500px;
    margin:0 auto; }

.box400 {width:400px;
    margin:0 auto; }

.box300 {width:300px;
    margin:0 auto; }

.box200 {width:200px;
    margin:0 auto; }
    
   	/* -----FLOATS --must be in pixels - imgs need width------  */ 
    
.floatleft {	float:left; }
.floatright {float:right; }
 	
.floatleft200 {
	width:200px;
	float: left; }

.floatright300 {
	width: 300px;
	float: right; }

.floatleft300 {
	width: 300px;
	float: left; }
	
   	/* --- Reg Links ---same need to be listed in nav-- keep above other links----*/
/*  do not need :link after a . visited inherits a color etc  */

a {color: #066086;
	font-weight: normal;
	background: transparent;
	text-decoration: underline;
	font-size:100%;
	line-height:1.2; }
a:hover {color: #ff0000; }
	
	 
#menu { width:100%;
	height:38px;
	margin: 0 auto;
	padding:5px 0 8px 0;
	text-align:center;
	background-color:#D2D2CA; 
	font-size:110%;
	border-bottom:5px solid #ff4400; }

#menu a {color: #000;
	font-weight: normal;
	background: transparent;
	text-decoration: none;
	padding:0 1%;
	font-size:110%; 
	line-height:1.2;  }
#menu a:hover {color: #ff4400; }


/*========================MEDIA======================================*/


	/* max 320 Smartphones portrait */
@media only screen and (max-width:320px) { 
body {font-size:100%;}
.floatleft130 {width:5%;}
ul li {margin-left:0; font-size:100%; }
.box700,.box600,.box500,.box450,.box400,.box350 {width:95%;}
.floatright {float:none; text-align:center; width:100%; }
.floatleft {float:none; text-align:center;  width:100%; }
	}         

	/* min320 x max480 Gen Smartphones/Nexus S portrait and landscape */
		/* leave 'device" out to be able to view on computer */
@media only screen and (min-width:320px) and (max-width:480px) {
body {font-size:100%;}
.floatleft130 {width:5%;}
ul li {margin-left:0; font-size:100% } 
.box700,.box600,.box500,.box450,.box400,.box350 {width:95%;}	
.floatright {float:none; text-align:center; width:100%; }
.floatleft {float:none; text-align:center;  width:100%; }
}

	/* min 481 x max 767  TABLET  */
@media only screen and (min-width:481px) and (max-width: 767px) {
body {font-size:100%;}
.floatright {float:none; margin:0 auto; width:100%; }
.floatleft  {float:none; margin:0 auto; width:100%; }
.box700,.box600,.box500 {width:95%; }
   }

	/* min 768 to max 1000 iPads (portrait)  */
  @media only screen and (min-width : 768px) and (max-width : 1000px) 
and (orientation : portrait) { 
#container {width:98%;  }
#content  {width:97%; }   
	 }