/*styles for OML website version 2.1
10/2/2015
*/

@font-face {
	font-family: 'EB_garamond_12';
	src: url('fonts/ebgaramond12-regular-webfont.eot');
	src: local('☺'), url('fonts/ebgaramond12-regular-webfont.woff') format('woff'), url('fonts/ebgaramond12-regular-webfont.ttf') format('truetype'), url('fonts/ebgaramond12-regular-webfont.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

/*basic styles applied to all layouts*/
.error{color: red; font-weight: bold;}
.highlight_text{font-weight: bold; font-style: italic;}
.centered_text{text-align: center;}
a:link, a:visited{color: #424242;}
a:hover{color: #d7b016;}

/*low resolution: 480px and below*/
@media screen and (max-width: 480px){
   body{background-color: #EBEBEB; margin: 0; padding: 0; font-family: sans-serif;}

   #wrapper{ width: 95%;background: #fff; margin: 0 auto;border: 1px solid #aeaeae; }
   
   header{background-color: #000; height: 60px;}
		header img{height: 50px; float: left; margin-top: 5px; margin-left: 5px;}
		div#banner_text{
            color: #d7b016;
            font-size: 18px;
            text-align: right;
            margin-right: 5px;
            padding-top: 5px;
            visibility: hidden;
        }
   
   nav {background: #000; text-align: center; padding: 10px 0; margin-bottom: 20px; }
   nav ul{margin-bottom: 0; padding-left: 0;}
      nav li {display: inline; margin-left: 10px; }
         nav li a:link, nav li a:visited {color: #fff; text-decoration: none;}
         nav li a:hover {color:#d7b016; text-decoration: none;}
         
   #main_content{padding: 0 10px 010px;}
      #main_content h1{margin-top: 10px; margin-bottom: 0; font-size: 1.5em;}
      #main_content h2{margin-top: 0; margin-bottom: 0; color: #b6344a; font-style: italic;font-size: 1.1em;}

   /*images & css buttons*/
   img.icon {height: 20px;}
   input.flat_submit_btn{border: none; background-color: #b6344a; color: white; padding: 3px 10px 3px 10px;-moz-border-radius: 5px;-webkit-border-radius:5px; border-radius:5px;font-weight: bold;}

   /*forms styles*/
   form.OML_form{background-color: #EBEBEB;  -moz-border-radius: 5px;  -webkit-border-radius: 5px;border-radius: 5px;  color: #787878;  padding: 10px;}
      form.OML_form label{float: left;  width: 215px;  font-weight: bold;  clear: left;}
      form.OML_form input[type=text], form.OML_form select {width: 80%; margin-bottom: 5px; border: 1px solid white;background-color: white;font-size: 1em;}
      form.OML_form textarea{width: 85%;}
      form.OML_form input[type=submit]{display: block; margin: auto;}

    form.OML_form label.radio{
        float: none;}

    section#musician_type_radios, section#interest_checkboxes{
        margin-top: 15px;
        padding-top: 5px;
        padding-left: 5px;
    }
    form.OML_form label.radio, form.OML_form label.checkbox{
        float: none; display: block;}

   #site_description{margin-top: 25px;}
    #action_buttons{font-size: 100%; margin-top: 10px;margin-bottom: 15px;}
   #news h3{color: #b6344a; margin-top: 0;}
   #news h3.news_title{color: #787878; font-size: .9em;}
   #news div.news_item{background-color: #EBEBEB; padding: 10px; margin-bottom: 15px; border: 1px solid #787878;}
      #news div.news_item p {font-size: 95%;}
   #news div.news_thumb{float: left; margin-right: 10px;}
      #news div.news_thumb img {height: 100px;}
   #news div.news_link {text-align: right;}
      #news div.news_link a:link, #news div.news_link a:visited {color: #b6344a; text-decoration: none;}
      #news div.news_link a:hover{color: #d7b016;text-decoration: none;}
   
   #form_confirmed {width: 80%; margin-top: 10px; margin-left: auto; margin-right: auto; border: 1px solid #787878; padding: 5px;  color: #b6344a; text-align: center; background-color: #EBEBEB;}
   
   #product_sublist {margin-left: 10px;}
   #product_sublist div.product_level2 {margin-left: 10px;}
   img.product_details_thumb{max-width: 100px; margin-right: 10px;}
   
   footer{width: 95%; margin: 0 auto;}
      footer a:link, footer a:visited{color:#b6344a;}
      footer a:hover{color: #d7b016;}
		footer nav {margin-bottom: 0; font-size: 85%; padding-top: 5px;}
      footer div#social{float: right; margin-top: 5px;}
			footer div#social div.social_icon{float: right;margin-left: 10px;}
		footer div#copyright{margin-top: 5px; text-align: center;font-size: 80%;color: #787878;}
}

/*medium resolution: 481px to 1023px*/
@media only screen and (min-width: 481px){
    body{
        background-color: #EBEBEB;
        margin: 0;
        padding: 0;
        /*font-family: EB_garamond_12;}*/
        font-family: Arial, Helvetica, sans-serif;
    }
   nav ul{padding-left: 0;}
   
   #wrapper{ width: 95%;background: #fff; margin: 0 auto;border: 1px solid #aeaeae; }
   
   header{background-color: #000; height: 75px;}
		header img{height: 75px; float: left; margin-top: 5px; margin-left: 5px;}
		div#banner_text{
            color: #d7b016;
            font-size: 22px;
            text-align: right;
            line-height: 75px;
            margin-right: 5px;
            visibility: hidden;
        }
   
   nav {height: 35px; background: #000; text-align: center; padding: 10px 0; margin-bottom: 20px; }
      nav li {display: inline; margin-left: 10px; }
         nav li a:link, nav li a:visited {color: #fff; text-decoration: none;}
         nav li a:hover {color:#d7b016; text-decoration: none;}
   
   #main_content{padding: 0 10px 010px;}
      #main_content h1{margin-top: 10px; margin-bottom: 0;}
      #main_content h2{margin-top: 0; margin-bottom: 0; color: #b6344a; font-style: italic;}
      #menubar h2 {display: none;}

   /*images & css buttons*/
   img.icon {height: 20px;}
   input.flat_submit_btn{border: none; background-color: #b6344a; color: white; padding: 3px 10px 3px 10px;-moz-border-radius: 5px;-webkit-border-radius:5px; border-radius:5px;font-weight: bold;}

   /*forms styles*/
   form.OML_form{background-color: #EBEBEB;  -moz-border-radius: 5px;  -webkit-border-radius: 5px;border-radius: 5px;  color: #787878;  padding: 10px; margin-left: 40px; width: 80%;}
      form.OML_form label{float: left;  width: 215px;  font-weight: bold;  clear: left;}
      form.OML_form input[type=text], form.OML_form select {width: 50%; margin-bottom: 5px; border: 1px solid white;background-color: white;font-size: 1em;}
      form.OML_form textarea{width: 85%;}

      form.OML_form input[type=submit]{display: block; margin: auto; clear: left;}
      form.OML_form label.radio{
          float: none;}

    section#musician_type_radios, section#interest_checkboxes{
        margin-top: 15px;
        padding-top: 5px;
        padding-left: 5px;
        }
    form.OML_form label.radio, form.OML_form label.checkbox{
        float: none; display: block;}

   #site_description{margin-top: 25px;}
   
   #news, #tech_support_area, #contact_form_area,#mailinglist_form_area{border: 1px solid #787878; padding: 5px; background-color: #EBEBEB;}
   #news h3{color: #b6344a; margin-top: 0;}
   #news h3.news_title{color: #787878;}
   #news p{margin-left: 10px;}
   #news div.news_item{background-color: #fff; padding: 10px; margin-bottom: 15px; border: 1px solid #787878;}
   #news div.news_thumb{float: left; margin-right: 10px;}
      #news div.news_thumb img {height: 125px;}
   #news div.news_item p{margin: 10px auto 10px 100px; }
   #news div.news_link {text-align: right;}
      #news div.news_link a:link, #news div.news_link a:visited {color: #b6344a; text-decoration: none;}
      #news div.news_link a:hover{color: #d7b016;text-decoration: none;}

    /*homepage styles*/
    #action_buttons{font-size: 125%; margin-top: 25px;margin-bottom: 25px;text-align: center;}
    a.action{margin-right: 15px;}

   /*product pages styles*/
   #product_sublist{background-color: #EBEBEB; border: 1px solid #787878;padding: 15px; margin-left: 20px;}
   h2.volume_head{color: #b6344a; font-size: 125%;}
   #product_sublist div.product_level2{background-color: #fff; padding: 10px; margin-bottom: 15px; border: 1px solid #787878;}
   img.product_details_thumb{max-width: 150px; margin-right: 15px;}
    
   #form_confirmed {width: 80%; margin-top: 10px; margin-left: auto; margin-right: auto; border: 1px solid #787878; padding: 10px; font-size: 1.25em; color: #b6344a; text-align: center; background-color: #EBEBEB;}
   
   footer{width: 95%; margin: 0 auto;}
      footer a:link, footer a:visited{color:#b6344a;}
      footer a:hover{color: #d7b016;}
		footer nav {margin-bottom: 0; font-size: 85%; padding-top: 5px;}
      footer div#social{float: right; margin-top: 5px;}
			footer div#social div.social_icon{float: right;margin-left: 10px;}
		footer div#copyright{margin-top: 5px; text-align: center;font-size: 80%;color: #787878;}
   
} /*end medium res styles*/

/*high resolution: 1023px and above*/
@media only screen and (min-width: 1024px){
   body{
       background-color: #EBEBEB;
       margin: 0;
       padding: 0;
       /*font-family: EB_garamond_12;*/
       font-family:Arial, Helvetica, sans-serif;
   }
   
   #wrapper{background: #fff;width: 960px; margin: 0 auto;border: 1px solid #aeaeae;}
   
   header{background-color: #000; height: 100px;}
		header img{height: 100px; float: left; margin-top: 10px; margin-left: 10px;}
		div#banner_text{
            color: #d7b016;
            font-size: 36px;
            text-align: right;
            line-height: 100px;
            margin-right: 10px;
            visibility: hidden;
        }
   
   nav {width: 960px; height: 35px; background: #000; text-align: center; padding: 10px 0; margin-bottom: 20px;}
      nav li {display: inline; margin-left: 10px; font-size: 105%;}
         nav li a:link, nav li a:visited{color: #fff; text-decoration: none;}
         nav li a:hover {color:#d7b016; text-decoration: none;}
   
   #main_content{padding: 0 10px 010px;}
      #main_content h1{margin-top: 10px; margin-bottom: 0;}
      #main_content h2{margin-top: 0; margin-bottom: 0; color: #b6344a; font-style: italic;}
      #menubar h2 {display: none;}
   
   /*images & css buttons*/
   img.icon {height: 20px;}

   input.flat_submit_btn{border: none; background-color: #b6344a; color: white; padding: 3px 10px 3px 10px;-moz-border-radius: 5px;-webkit-border-radius:5px; border-radius:5px;font-weight: bold;}
   span.flat_css_button a:link, span.flat_css_button a:visited {background-color: #b6344a; color: white;padding: 3px 15px 3px 15px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;text-decoration: none; display: inline-block;}
   span.flat_css_button a:hover{background-color: #d7b016;}

   form.OML_form{width: 500px;}

  /*specific page style*/
   #site_description{margin-top: 25px;}

   #news, #tech_support_area, #contact_form_area,#mailinglist_form_area{border: 1px solid #787878; padding: 5px; background-color: #EBEBEB;}
    #news h3{color: #b6344a; margin-top: 0;}
    #news h3.news_title{color: #787878;}
    #news p{margin-left: 10px;}
    #news div.news_item{background-color: #fff; padding: 10px; margin-bottom: 15px; border: 1px solid #787878;}
    #news div.news_thumb{float: left; margin-right: 10px;}
    #news div.news_thumb img {height: 125px;}
    #news div.news_item p{margin: 10px auto 10px 100px; }
    #news div.news_link {text-align: right;}
    #news div.news_link a:link, #news div.news_link a:visited {color: #b6344a; text-decoration: none;}
    #news div.news_link a:hover{color: #d7b016;text-decoration: none;}
  
   /*product pages styles*/
   #product_sublist{background-color: #EBEBEB; border: 1px solid #787878;padding: 15px; margin-left: 20px;}
   h2.volume_head{color: #b6344a; font-size: 125%;}
   #product_sublist div.product_level2{background-color: #fff; padding: 10px; margin-bottom: 15px; border: 1px solid #787878;}
   img.product_details_thumb{max-width: 150px; margin-right: 15px;}

   /*support page styles*/
   #tech_support_area form{margin-bottom: 10px;}
   
   #answer_area {margin-right: 15px;border: solid 1px #993333;padding: 5px;background-color: #fff; }
      #answer_area h4 {color: #993333;}
   
   #form_confirmed {width: 80%; margin-top: 10px; margin-left: auto; margin-right: auto; border: 1px solid #787878; padding: 10px; font-size: 1.25em; color: #b6344a; text-align: center; background-color: #EBEBEB;}


   footer{width: 960px; margin: 0 auto;}
      footer a:link, footer a:visited{color:#b6344a;}
      footer a:hover{color: #d7b016;}
		footer nav {margin-bottom: 0; font-size: 85%; padding-top: 5px;}
      footer div#social{float: right; margin-top: 5px;}
			footer div#social div.social_icon{float: right;margin-left: 10px;}
		footer div#copyright{margin-top: 5px; text-align: center;font-size: 80%;color: #787878;}
      
}

/*************************** END MEDIA QUERIES ***************************/
/*styles that apply to all views*/

a.flat_button{
   color: #fff;
   padding: 5px 10px 5px 10px;
   border-radius: 7px;
   -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
   text-decoration: none;
}
a.flat_button:hover{
   background-color: #d7b016;
}
.med_blue{
   background-color: #024d84;
}
.maroon{
    background-color: #b6344a;
}