@charset "utf-8";
/* CSS Document */
body,html{ margin:0; padding:0; height:100%; }
body{
 background-color:#eee4bf;
 font-family: 'Roboto Slab', serif;
 font-size:20px;	
 color:#545454;
 background-image:url(../images/keyboard.jpg);
 background-repeat:repeat-x;
 background-position:bottom;
}

#header{
 width:100%;
 height:450px;
 background-image:url(../images/header_bg.jpg);
 background-repeat:no-repeat;
 background-position:center;
 background-color:#000000;	
}
.fixedwidth{
 max-width:1000px;
 box-sizing:border-box;
 margin:0 auto; 	
 position:relative;
}
.padded{ padding:10px; }

#header .fixedwidth{ height:100%; }
#main-title{
 position:absolute;	
 bottom:25px;
 left:10px;
 display:block;
 text-decoration:none;
}
h1{ font-size:2.0em; margin:0; color:#FFFFFF; font-weight:700; line-height:1; }
h2{ font-size:1.0em; font-weight:400; margin:0; color:#fff6cf; }

.btn{ 
  display:inline-block; 
  padding:10px 15px;
  background-color:#574F2D;
  color:#FFFFFF;
  font-weight:700;
  text-decoration:none;
  -webkit-border-radius:20px;      
  -moz-border-radius:20px;      
  border-radius:20px;   
  border:none;   
}
.btn:hover{
 background-color:#6F6042;	
}

#content{
 background-color:#FFFFFF;	
 padding-bottom:20px;
}
#content h3{
 font-weight:400;
 font-size:1.6em;
 color:#605850;
}
#content h4{
 font-size:1.2em;
}
#music #content h4{  border-bottom:3px solid #45361C;	 }

blockquote{
 padding:20px 10px;
 background-color:#D3F5F8;	
 -webkit-border-radius:10px;      
 -moz-border-radius:10px;      
 border-radius:10px; 
 font-size:1.3em;     
 color:#639692;
 text-align:center;
}

#nav{
 background-color:#bfeaee; 
}
#nav-list{ margin:0; list-style:none; padding:0; font-weight:700; }
#nav-list li{ display:block; float:left; }
#nav-list li a{ display:block; color:#4c5e60; text-decoration:none; padding:10px; }
#nav-list li a:hover{ background-color:#9bc3c7; }
#nav-list li a.selected{ background-color:#ffffff;   }

#footer{
  padding-bottom:20px;	
}

#footer-list{ margin:0; list-style:none; padding:0; font-weight:400; text-align:center; font-size:.8em; }
#footer-list li{ display:inline-block; }
#footer-list li a{ display:block; color:#867D55; text-decoration:none; padding:10px; }
#footer-list li a:hover{ color:#978f6e; text-decoration:overline; }
#footer-list li a.selected{ color:#271D0B; text-decoration:overline; font-weight:700; }

.copyright{ text-align:center; font-size:.7em; color:#B5AD85; }

.right-large,.left-small,.rightcol,.leftcol{ float:left; padding:10px; box-sizing:border-box; }
.left-small{ width:30%; }
.right-large{ width:70%; padding-left:20px; }
.leftcol{ width:60%; font-size:.8em;  }
.fullcol { width:100%; padding:10px; font-size:.8em; box-sizing:border-box; }
.rightcol{ width:40%; padding-top:50px; padding-left:20px; }
.rightcol img{  box-sizing:border-box; max-width:340px; width:100%; height:auto; }
img.photo{ box-sizing:border-box; height:auto; width:100%; padding:6px; 
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.55);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.55);

}

.services-list { list-style:none; margin:0; padding:0; }
.services-list li{ padding-bottom:20px; magin-bottom:10px; }
.services-list li em{ display:block; padding:5px; font-style:normal; color:#676767;  }
.services-list li strong{
 color:#354E58;
 background-color:#E4F9FB;
 display:block;	
 text-align:left;
 padding:5px;
 margin-bottom:0px;
 -webkit-border-radius:4px;      
 -moz-border-radius:4px;      
 border-radius:4px; 
 
}

.formitem{
 padding-bottom:20px;	
}
label{
 display:block;;
 color:#676767;	
}
input[type=text],textarea{
 width:100%;	
 padding:5px;
 box-sizing:border-box;
}


#music-types{
 margin:0; padding:0;
 list-style:none;	
 font-size:.8em;
 margin-top:20px;
}
#music-types a{ 
 text-decoration:none; 
 background-color:#E4F9FB;
 display:block;
 padding:8px 4px;
 color:#4c5e60;
 border-bottom:#B8D7DB 1px solid;
}
#music-types a:hover{  background-color:#9bc3c7; }
#music-types .selected a{
 background-color:#FFFFFF;	
}

ul.music{ margin:0; padding:0; list-style:none;  }
ul.music li{ border-bottom:1px solid #dedede; padding:5px;}
ul.music li:last-child{ border-bottom:none; }
ul.music .songinfo{ font-size:.7em; }
ul.music .title{ font-style:italic; font-weight:bold; }
ul.music .voicing {  color:#aaaaaa; padding-right:10px; }
ul.music .publisher { font-weight:bold; color:#bbbbbb; }
ul.music li a{ color:#4C5E98; }
ul.music li a:hover{ color:#707EAC; }

#music-nav{ display:none; text-align:center; }
#vendors img{ width:80%; display:block; margin:0 auto; height:auto; }
.header-photo{ display:block; margin:0 auto; max-width:730px; width:100%; height:auto; }

/* START RESPONSIVE CODE #################################### */

@media only screen and (max-width : 700px) {
  .leftcol{ width:100%; float:none; }
  .rightcol{ width:100%; float:none; }
  .rightcol img{ display:block; margin:0 auto; }	
  
  #header{ height:320px; background-size:cover; }
}
@media only screen and (max-width : 500px) {
 #header{ height:220px; }	
 .btn{ display:block; width:60%; text-align:center; margin:0 auto; }
 .right-large{ float:none; width:100%; }
 .left-small { display:none; }
 #music-nav{ display:block; }
}
@media only screen and (max-width : 400px) {
 #nav { font-size:.8em; }	
 #content h3{ text-align:center; }
}