@charset "utf-8";
/* CSS Document */
body,html{ margin:0; padding:0; }
body{
 color:#555555;	
 font-size:18px;
 background-color:#266cb4;
 font-family: 'Lato', sans-serif;
}
h1,h2,h3{ font-family: 'Lato',sans-serif;  font-weight:300; }

#mobile_menu { display:none; }
#mobile_nav{ display:none; }
#mobile_bar{
 width:100%;
 background-color:#266cb4;
 position:fixed;
 z-index:110;	
}

.fixedwidth{ 
 width:100%;
 max-width:960px;
 margin:0 auto;
 padding:0;
 position:relative;
   
}
#main-nav{
 width:100%;
 background-color:#FFFFFF;
 border-bottom:5px solid #94c2ff;
}
.horiz{
 margin:0; padding:0;
 list-style:none; 
}
#main-nav ul{
 margin-left:200px;	
 position:relative;
}
.horiz li{
 display:inline-block;	
 *display:inline;
 *zoom:1;  
 position:relative;
 padding:0;
}
#main-nav ul li{ position:relative; }
#main-nav ul li a{
 display:block;
 padding:30px 40px 30px 0px;	
 font-size:25px;
 font-family: 'Lato', sans-serif;
 text-decoration:none;
 color:#266cb4;
}
#main-nav ul li a.selected,#main-nav ul li a:hover{
 color:#c4b38f;	
}
#main-nav ul li ul{
 margin:0;
 width:250px;
 border:6px solid #94c2ff;
 border-top:none;
 visibility: hidden;
 position:absolute;
 left:-10px;
 top:70px;
 padding:0;
 padding-start:0;
 -moz-padding-start: 0px;
 -webkit-padding-start: 0px;
 -webkit-border-bottom-right-radius: 20px;
 -webkit-border-bottom-left-radius: 20px;
 -moz-border-radius-bottomright: 20px;
 -moz-border-radius-bottomleft: 20px;
 border-bottom-right-radius: 20px;
 border-bottom-left-radius: 20px; 
 overflow:hidden;
 opacity:0; 
 z-index:20;
 -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;

}
#main-nav ul li:hover > ul{
 top:90px;
 visibility:visible;
 opacity:1;
}
#main-nav ul li ul li{
 display:block;	
 margin:0;padding:0; 
}
#main-nav ul li ul li a{
 display:block;
 width:100%;
 margin:0;
 padding:10px 15px;
 font-size:16px;
 background-color:#ffffff;
}
#main-nav ul li ul li a:hover{
 color:#266cb4;
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 border-radius: 0; 
 background-color:#94c2ff; 	
}
#main-nav ul li ul li a.selected{
 background-color:#d6e8ff;
 color:#266cb4;
}


#top-strip{ width:100%; height:17px; background-color:#266cb4;}

#main-nav .logo{
 display:block;
 overflow:hidden; text-indent:-1000px;
 width:145px;
 height:67px;	
 position:absolute;
 background-image:url(../images/jwp_logo_nav.gif);
 background-repeat:no-repeat;
 top:12px; left:5px;
}

#header{ 
 background-color:#555555;
 height:270px;
 width:100%;
 background-image:url(../images/header_bg2.jpg);
 background-repeat:no-repeat;
 background-position:top center;
 border-bottom:6px solid #ffffff;
}
#header #large-logo{
 width:418px;
 height:auto;
 position:relative;
 top:45px; left:20px;
}

#header h2{
 margin:0; padding:0;
 color:#FFFFFF;	
 position:absolute;
 font-size:40px;
 top:120px;
 left:560px;
}
#sub #header h2{ display:none; }
#sub #header #large-logo { display:none; }
#sub #header{ height:90px; }


#content{ background-color:#ffffff; min-height:200px;  border-top:11px solid #c4b38f;	 }
#sub #content{ padding-bottom:30px; }
.home-col{
 -moz-box-sizing:border-box;
 box-sizing: border-box;
 max-width:470px;
 width:50%;
 padding:30px 10px;
 float:left;	
 font-size:16px;
}
#home-legacy { font-size:16px; }
#home-legacy img{ float:left; padding-right:20px; width:40%; max-width:196px; height:auto;}
h3{ color:#266cb4; font-size:26px; margin:0; }
.button-link{ 
  display:block; 
  color:#ffffff;
  background-color:#266cb4;
  float:right;
  font-size:16px;
  text-align:center;
  padding:5px 15px;
  text-decoration:none;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;  
}
.button-link:hover{ background-color:#c4b38f; }
#footer{ padding-bottom:20px; }
#footer-info{
 padding:20px;
 float:right;	
 color:#94c2ff;
 font-size:12px;
 
}
#footer-info img{
 display:block;
 padding-bottom:10px;	
}
#footer-credits{
 margin:0 auto;	
 padding-top:50px;
 text-align:center;
 color:#ffffff;
 text-decoration:none;
 font-size:14px;
}
#footer-credits ul{ padding-bottom:20px }
#footer-credits ul li a{
 text-decoration:none;
 color:#ffffff;	
 padding:0px 10px;
}
#footer-credits ul li a.selected{
 color: #94c2ff;
}

.copyright{ font-size:12px; color:#94c2ff;}
.copyright a{ color:#3c85cf; text-decoration:none; }
#footer-credits a:hover{ color:#94c2ff; }

#sub h1{
 color:#266cb4;
 font-size:30px;
 font-weight:normal;	
}
#sub h2{
 font-size:24px;
 font-weight:normal;
 color:#c4b38f;	
}
#jwp_photo{
 display:block;
 float:left; padding:10px 20px 10px 10px;
}
#jwp_photo2{
 display:block;
 float:right; padding:10px 20px 10px 10px;
}
.photo_right{ display:block; float:right; padding:20px; }
.photo_left{ display:block; float:left; padding:20px; }

#sub-content{ padding:20px; }
blockquote{
  display:block;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;   	
  background-color:#c4b38f;
  width:220px;
  padding:20px;
  float:right;
  color:#FFFFFF;
  font-size:20px;
  font-style:italic;
}
blockquote cite{
 padding-top:10px;
 display:block;
 font-size:18px;
 font-style:normal;
 text-align:right;	
}

.legacy-content{
 background-image:url(/images/legacy_bg.jpg);
 background-repeat:no-repeat;
 background-position:top left; 	
 min-height:400px;
 color:#555555;
}
#cdcover{ border:3px solid #ffffff; margin:0px 20px 10px 0px; float:left; display:block; }
#cdpurchase{ float:right; }

.audiojs{ 
 margin-bottom:20px; margin-top:10px;
 width:100%;
 max-width:430px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;  
}
.audiojs .scrubber{ width:60%;}


#track-listing{
 margin:0; padding:0; list-style:none;
}
#track-listing li{
 border-top:1px dotted #888888; padding:6px;	
}
.narrow-column{ float:left; padding-right:20px;}
.narrow-column ul{ margin:0; padding-left:20px; }

#alpha_list{
 margin:0 auto; padding:0; list-style:none;	 text-align:center;
}
#alpha_list li{ padding:0px 6px;  color:#cccccc;  font-weight:bold; }
#alpha_list li a { color:#266cb4; text-decoration:none; }
#alpha_list li a:hover { text-decoration:underline; }
#song-list{ margin:0; padding:0; list-style:none; }
#song-list li{ padding-bottom:5px; }
#song-list .letter-line{
 background-color:#c4b38f;
 font-size:20px; color:#ffffff;	
 padding:7px 10px;
 margin:20px 0px;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px; 
}
#song-list .backtotop{
 display:block; float:right;	
 text-decoration:none;
 font-size:15px;
 color:#ffffff;
}
#song-list .backtotop:hover{color:#e8d7b3; }
.solotracks-list{
 float:left;	
}
#partners-list{
 margin:0; padding:0; list-style:none;	
}
#partners-list li{ padding:10px; overflow:hidden; border-top:1px dotted #AAAAAA; }
#partners-list li a{
 display:block;
 float:left;
 width:250px;
 text-align:center;
 padding-right:20px; 
}
#partners-list li span{
 display:block;
 float:left;
 padding-top:5px;
}
#searchform{
 font-size:18px;
 color:#266cb4;;
 padding-top:20px;	
}
#search_results{
 padding:20px;
 text-align:center;
 color:rgba(204,0,0,1); 	
}
#search_results ul{
 padding-top:20px;
 text-align:left;
 width:80%;
 max-width:450px;
 margin:0 auto;	
}
#clear_btn{ color:#858585; }

hr{ border:none; background-color:#ffffff; border-top:1px dotted #c4b38f; }
/* ############################################# CONTACT PAGE ###################################################### */

#contact_info ul{
 margin:0; padding:0; list-style:none;	
 color:#ff8a00;
}
#contact_info ul li{
 padding-bottom:6px;
 padding-top:6px;
 border-bottom:dotted 1px #cccccc;	
}
#contact_info ul li:last-child{ border-bottom:none;}
#contact_info ul li strong{
 display:block; color:#ba3155;
 padding-bottom:4px;	
 font-weight:normal;
 font-size:13px;
}
.formitem{
 padding-top:5px;	
}
label{
 display:block;
 color:	#266cb4;
 padding-bottom:3px;
 font-size:17px;
}
.as_field{ display:none; }

#errors{
 color:#C00;	
}
#contact_thankyou{
 text-align:center;
 font-size:20px;
 color:#999;
 padding:50px 0px;	
}
/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
  html {zoom:0.8;}
}
@media only screen and (max-width : 890px) {
 #header h2{ font-size:28px; }	
}
@media only screen and (max-width : 767px) {
 .fixedwidth{ width:100%; max-width:767px; padding:0; }	
 #header h2{ display:none; }
 #header{ margin-top:30px; }
 #header #large-logo{ display:block; max-width:418px; width:90%; height:auto; position:relative; margin:0 auto; top:0; left:0;  }
 #sub #header #large-logo{ display:block; position:relative; margin:0 auto; top:0; left:0; max-height:100px; width:auto; }
 #sub #header{ height:auto; }
 #main-nav  ul{ display:none; }
 #main-nav .logo{ display:none; }
 #cdcover { float:none; margin:0 auto; }
 #cdpurchase{ float:none; text-align:center; }
 #content{ padding-bottom:20px; }
 #top-strip{ display:none; }
 .home-col{ width:90%; margin:0 auto; float:none; }
 #header{ height:auto; padding:20px 0px; }
 #home-legacy img{ display:block; float:none; margin:0 auto; }
 h1,h2,h3{ text-align:center; }
 .button-link{ float:none; display:block; margin:0 auto; }
 blockquote{ max-width:400px; float:none; margin:20px auto; width:80%; }
 #smessage{ width:90%; }
 #footer-credits ul{ display:none; }
 #footer-info{ float:none; padding:10px; margin:0 auto; width:90%;  text-align:center; }
 #footer-info img{ margin:0 auto; }
 #jwp_photo2,#jwp_photo{ float:none; display:block; margin:0 auto; }
 #mobile_menu{ display:block; width:100%; padding:6px; background-color:#266cb4; box-sizing: border-box; }
 #main-nav #mobile_nav li{ display:block;	}
 #main-nav ul{	margin:0; padding:0; list-style:none; }
 #main-nav ul{ background-color:#266cb4; }
 #main-nav ul li a { padding:8px 10px; background-color:#266cb4; color:#FFFFFF; border-bottom:1px solid #1e5a98; border-top:1px solid #2977c7; }
 #main-nav ul li a:hover{ background-color:#1e5a98; }
 #searchform{ text-align:center; }
 #partners-list li span{  float:none; text-align:center; }
 #partners-list li a{ float:none; margin:0 auto; padding:0; width:100%;  }
 #partners-list li a img{ display:block; width:80%; max-width:200px; padding:0; margin:0 auto; }
}