/* -----------------------------------------
Stylesheet for Byrne Jazz - byrnejazz.com
Author: cdeVision.com
Copyright: (c)2008 cdeVision
Created: 18 June 2008
-------------------------------------------- */

body {background:#000005; margin:0; font-family:helvetica,arial,sans-serif; font-size:13px; line-height:20px; color:#959595; text-align:center;}

h1, h2, h3, h4 {padding:0; margin:0;} 
h2 {font-size:16px; font-weight:normal; padding:0 0 12px 0; line-height:20px; color:#BEBEBE;} /* headlines */
h3 {font-size:16px; font-weight:normal; padding:15px 0 12px 0; line-height:20px; color:#BEBEBE;} /* headlines */

p {margin:0; padding:0 0 12px 0; line-height:20px;}
ul {margin:0 0 0 15px; padding:0 0 15px 0;}
ol {margin:0 0 0 20px; padding:0 0 15px 0;}
li {line-height:20px; padding:0 0 4px 0;}

img {border:0;}
.clearfloats {clear:both; line-height:0px; height:0px; font-size:0px;}
.skiplink {display:none;}

div#printlogo {display:none;}

/* ---- links ----------------------------------------- */
a {color:#5EB5FF; text-decoration:underline;}  
a:visited {color:#5EB5FF;}
a:hover {color:#5EB5FF; text-decoration:none;}
a:active {color:#5EB5FF;}
a:active, a:focus {outline:none;}

a.small_link { font-size:10px;}
/* links with icons */
a.rss {background:url(error.html) no-repeat; padding-left:20px;}
a.pdf {background:url(error.html) 100% 0 no-repeat; padding-right:22px;}
#musicicon { text-indent:-4000px;background:url(images/icon_music.gif) 0 0 no-repeat; width:25px; height:20px;}
#musicicon:hover{background:url(images/icon_music.gif) 0 -20px no-repeat;}
#mp3icon {padding:0 0 2px 25px;background:url(images/icon_music.gif) 0 0 no-repeat; width:25px; height:20px;}
#mp3icon:hover{background:url(images/icon_music.gif) 0 -20px no-repeat;}

td { vertical-align:top;}

/* ---- ids & classes ----------------------------------------- */
#frame {width:1024px; margin:0 auto; padding:0; background-color:#212121; text-align:left;}
#pad {width:892px; padding:0 0 30px 66px;}

#header { position:relative; width:892px; height:116px; margin-bottom:37px;}
	#logo { position:absolute; top:94px; left:0px; float:left; width:115px; height:20px; background:url(images/logo.gif) no-repeat;}
		#logo h1 { text-indent:-4000px;}
		#logo a {display:block; width:115px; height:20px;}

	#navmenu { position:absolute; top:94px; left:155px;}
		#navmenu ul {margin:0; padding:0; overflow:auto;}
		#navmenu ul li {display:block; float:left; list-style:none; padding:0; margin:0;font-size:16px; line-height:20px;}
		#navmenu a {font-family:arial,helvetica,sans-serif; color:#BEBEBE; font-size:16px; line-height:20px; text-decoration:none; display:block; float:left; padding:0 10px; height:20px;}
		#navmenu a.on {color:#FFF;}
		#navmenu a:hover {color:#FFF;}

@media (max-width: 600px) {
    
    #header #navmenu {
        display: none;
    }
    #navmenu {
        position: static;
    }

    #navmenu ul {
        margin: 50px 30px 30px 30px;
        padding: 0;
        overflow: auto;
    }

    #navmenu ul li {
        display: block;
        float: none;
        list-style: none;
        text-align: left;
        padding: 0;
        margin: 0 0 6px 0;
        font-size: 24px;
        line-height: 34px;
    }

    #navmenu a {
        color: #FFF;
        font-size: 24px;
        line-height: 34px;
        text-decoration: none;
        display: block;
        float: none;
        padding: 0;
        height: auto;
    }

    #navmenu a.on {
        color: #FFF;
    }

    #navmenu a:hover {
        color: #FFF;
    }
}
		

	#utilitymenu {margin:42px 0 0 0;}
		#utilitymenu ul {margin:0; padding:0; overflow:auto;}
		#utilitymenu ul li {display:block; float:left; list-style:none; padding:0; margin:0; font-size:12px; line-height:20px;}
		#utilitymenu a {font-family:arial,helvetica,sans-serif; color:#BEBEBE; font-size:12px; line-height:20px; text-decoration:none; display:block; float:left; padding:0 10px; height:20px;}
		#utilitymenu a.on {color:#FFF;}
		#utilitymenu a:hover {color:#FFF;}

@media (max-width: 600px) {
    
    #header #utilitymenu {
        display: none;
    }

}


/*	--------------------------------------------------
   	Menu Mobile
	-------------------------------------------------- */


.mobile-hamburger {
    display: none;
    width: 30px;
    height: 30px;
    position: fixed;
    right: 10px;
    top: 10px;
    z-index: 999999;
}

.mobile-hamburger__link {
    background: #444 url(images/mob.png) 0 0 no-repeat !important;
    display: block;
    width: 30px;
    height: 30px;
    padding: 0;
    padding: 0;
    text-indent: -4000px;
}

.mobile-hamburger__link.open {
    background: #444 url(images/mob.png) 0 -30px no-repeat !important;
}

.mobile-menu-cover {
    display: none;
    background: #444;
    color: #FFF;
    padding: 0;
    clear: both;
    margin: 0 auto;
    position: fixed;
    top: 0;
    right: 0;
    height: 150%;
    max-width: 100%;
    min-width: 100%;
    overflow: auto;
    z-index: 99999;
}

.mob-nav-container {
	margin:0;
	padding:0;
    display: none;
}
.mob-nav-menu {
	margin:40px 30px 0 30px;
	padding: 0;
}
	
.mob-nav-menu .menu-item {
	display: block;
	padding: 0;
	margin: 0;
    list-style: none;
}

.mob-nav-menu .menu-item a {
	font-size: 24px;
	line-height: 30px;
	padding: 10px 0;
	display: block;
	text-decoration: none;
	color: #FFF;
	margin:0;
	font-weight:400;
	font-style: normal;
    transition-duration: 0.25s;
}

.mob-nav-menu .menu-item a:hover {
	color:  $secondary-color;
}

.mob-nav-menu .sub-menu {
	display: none;
	margin: 0 0 10px 0;
	padding: 0;
	z-index: 99999;
	padding: 0;
}
.mob-nav-menu .sub-menu  .menu-item a {
	font-size: 16px;
	line-height: 24px;
	padding: 8px 0;
	display: block;
	text-decoration: none;
	color: #444;
	margin:0;
	font-weight: 400;
	font-style: normal;
}
.mob-nav-menu .sub-menu  .menu-item:first-child a {
	padding-top: 4px;
}
.mob-nav-menu .sub-menu  .menu-item:last-child a {
	padding-bottom: 10px;
}
	


@media (max-width: 600px) {
.mobile-hamburger {
    display: block;
    top: 10px;
    right: 10px;
}
.mobile-menu-cover {
    max-width: 100%;
    min-width: 100%;
}
}





		
	#player { position:absolute; top:54px; right:0; margin:0;}
		
.banner {width:892px;}
	.smallbanner {float:left;}
	.back {float:left; margin:20px 0 0 22px;}
	.cartproduct {float:right; margin:20px 22px 0 0;}
	.cart {float:right; margin:38px 22px 0 0;}
	.cart a, .cartproduct a {padding:0 0 10px 30px; background:url(images/icon_cart.gif) no-repeat; color:#6F6F6F;}

#content {width:848px; margin:45px 0 37px 22px;}
	#content .leftcol {width:515px; float:left;}
	#content .rightcol {width:296px; float:right;}
	
	#content .col1 {width:250px; mergin-right:15px; margin-top:20px; float:left;}
	#content .col2 {width:250px; margin-top:20px; float:left;}
	
	p.quote { font-size:16px; line-height:20px; padding:20px 0 8px 45px; background:url(images/icon_quote.gif) 0 22px no-repeat;}
	p.by {font-size:11px; line-height:14px; padding:0 0 20px 45px; }
	
	#dashed {height:2px; background:url(images/back_dashed.gif) repeat-x; margin:20px 0 20px 0;}
	
	.moreinfo {padding-left:80px; float:left; margin-right:22px; width:185px;}
		.moreinfo h3 {padding-top:0;}
		.moreinfo p { font-size:12px; line-height:16px;}
		.more1 {background:url(images/icon_more1.gif) no-repeat;}
		.more2 {background:url(images/icon_more2.gif) no-repeat;}
		.more3 {background:url(images/icon_more3.gif) no-repeat;}
	
	.sidebar {margin-bottom:18px; font-size:12px; line-height:16px; color:#959595;}
		.sidebar_top {width:296px; height:8px; background:url(images/sidebar_top.gif) no-repeat;}
		.sidebar_bottom {width:296px; height:8px; background:url(images/sidebar_bottom.gif) no-repeat;}
		.sidebar_content {padding:14px 22px 0 22px; background:#282828;}
		.sidebar_content h3 {font-size:11px; font-weight:bold; line-height:16px; padding:0 0 12px 0; color:#BEBEBE;}
		.sidebar P {font-size:12px; line-height:16px; color:#959595;}
		.sidebar .info_email { background:url(images/icon_email.gif) no-repeat;}
		
		.small_form {margin:0;padding:0 0 12px 0;}
		.small_form .label {width:65px; text-align:right; padding:0 24px 6px 0;}
		.small_form .field {width:187px; padding:0 0 6px 0;}
		.small_form .small_field {width:150px;}
		.small_form .submit a {display:block; width:66px; height:20px; text-indent:-4000px; background:url(images/button_submit.gif) no-repeat;}
		.small_form .submit a:hover { background:url(images/button_submit.gif) 0 -20px no-repeat;}
		
		#featured_products {}
			#featured_products a {display:block; height:90px; text-decoration:none; color:#BEBEBE; font-weight:bold;}
			#featured_products a:hover {display:block; background-color:#212121; color:#FFF; height:90px; cursor:hand;}
			#featured_products .thumb {float:left; width:70px; padding:8px; text-align:center;}
			#featured_products .desc {float:left; width:184px;}
			#featured_products .desc p {padding-top:12px;color:#BEBEBE;}
			
	.productlisting {width:160px; float:left; margin:0 68px 60px 0;}
		.productlisting h3 { font-size:13px; line-height:18px; font-weight:bold; margin:24px 0 20px 0; padding:0;}
		.productlisting .thumb { width:160px; height:210px; text-align:center;}
		.productlisting .desc { font-size:12px; line-height:16px; margin-bottom:20px;}
		.productlisting .desc p { font-size:12px; line-height:16px; padding:0;}
		.productlisting .price {display:block;float:left; font-size:13px; width:80px; font-weight:bold;}
		.productlisting a.more {display:block; float:right; width:78px; height:20px; background:url(images/button_moreinfo.gif) no-repeat; text-indent:-4000px;}
		.productlisting a.more:hover {background:url(images/button_moreinfo.gif) 0 -20px no-repeat;}
		
	#product {}
		#product img {display:block; float:left;}
		#product .info {float:right; width:500px;}
		#product h2 { font-size:18px; line-height:24px; font-weight:bold;}
		
		#buyform {margin:0;padding:0;}
			#buyform .price {float:left; margin-right:20px;font-size:18px; font-weight:bold;}
			#buyform .sel {display:block; float:left; margin:0 20px 0 0; height:20px; line-height:20px; border:none; padding:0;}
			#buyform a.add {display:block; float:left; width:88px; height:20px; background:url(images/button_add.gif) no-repeat; text-indent:-4000px;}
			#buyform a.add:hover {background:url(images/button_add.gif) 0 -20px no-repeat;}
			 
		
#footer {width:1024px; margin:0 auto; padding:0; text-align:left;}
	#footer_content {padding:55px 66px 25px 66px;}
	#footer_content p {padding:0 0 12px 0; font-size:10px; color:#838588;}
	#footer_content p.students {padding:0 0 12px 30px; background:url(images/icon_students.gif) no-repeat;}



@media (max-width: 600px) {
    
    img {
        max-width: 100%;
        height: auto;
    }
    
    #frame,
    #pad,
    #header,
    .banner,
    #content,
    #content .leftcol,
    #content .rightcol,
    #footer,
    #footer_content {
        width: 100%;
        float: none;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
    
    #content .leftcol {
        margin-bottom: 30px;
    }
    
    
    
}
	
	
#adminmenu {
	font:normal 10px Arial, Verdana, Helvetica, sans-serif;
	width:150px;
	clear:both;
	font-size:11px;
	position:absolute;
	right:0;
	top:0;
	}
	#adminmenu table { text-align:left; background-color:#FFFFFF;width:150px;height:80px;}
	#adminmenu a {text-decoration:none; color:#000000;}
	


@media (max-width: 600px) {
    
    

    body,
    p,
    li {
        font-size: 18px;
        line-height: 26px;
    }
    h2 {
        font-size: 24px;
        line-height: 32px;
    }
    h3 {
        font-size: 20px;
        line-height: 28px;
    }

    #adminmenu {
        display: none;
    }
    
    img {
        max-width: 100%;
        height: auto;
    }
    
    #frame,
    #pad,
    #header,
    .banner,
    #content,
    #content .leftcol,
    #content .rightcol,
    #product .info,
    #footer,
    #footer_content {
        width: 100%;
        float: none;
        box-sizing: border-box;
        padding: 0;
    }
    
    #header {
        height: 50px;
    }
    #logo {
        position: absolute;
        top: 0;
        left: 0;
        float: none;
    }
    
    #pad {
        padding: 20px;
    }
    
    .banner {
        margin: 20px 0;
    }
    
    #content .leftcol {
        margin-bottom: 30px;
    }
    
    .sidebar {
        max-width: 296px;
        margin: 0 auto;
    }
    .sidebar_bottom {
        margin-bottom: 20px;
    }
    .sidebar P {
        font-size: 18px;
        line-height: 26px;
    }
    .sidebar_content h3 {
        font-size: 18px;
        line-height: 26px;
    }
    
    .productlisting {
        width: 100%;
        float: none;
        margin: 0 0 20px 0;
        padding-bottom: 20px;
        border-bottom: 1px solid #000;
    }
    .productlisting h3 {
        font-size: 18px;
        line-height: 26px;
    }
    .productlisting .desc p {
        font-size: 18px;
        line-height: 26px;
    }
    .productlisting .price {
        font-size: 18px;
        line-height: 26px;
    }
    #product img {
        display: block;
        float: none;
        max-width: 100%;
        height: auto;
        margin-bottom: 30px;
    }
    
    a.small_link {
        font-size: 16px;
    }
    
    
    #footer_content {
        padding: 20px;
    }
    
}