/* Google Web Fonts */
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700);
@import url(http://fonts.googleapis.com/css?family=Cabin+Condensed:400,700);

*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html, body { min-height: 100%; background: #626364; background: linear-gradient(to bottom, #121314 0%, #626364 100%); }

/* HTML 5 */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section { display: block; }
audio,canvas,video { display: inline-block;	}

body { }

body, table, input, select {
	font-family: roboto,'trebuchet MS',sans-serif; font-size: 14px; line-height: 1.6; color: #111;
	}

a { color: #111; }
a:hover { color: darkred; }
button { cursor: pointer; }
h1, h2, h3, h4, h5, h6 { line-height: 1.2; }
hr { clear: both; border: 0; color: #bbb; background-color: #bbb; height: 1px; }
img { border: 0 none; max-width: 100%; vertical-align: middle; }
img.full { width: 100%; }
img.fullWidth { width: 100%; }
table { border: 0 none; border-collapse: collapse; }
table td { vertical-align: top; }

/* helpers */
.clr { clear: both; }
.clear { clear: both; }
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.justify { text-align: justify; }
.nav-horizontal, .nav-horizontal li, .nav-vertical, .nav-vertical li { margin: 0; padding: 0; list-style: none; }
.nav-horizontal li { display: inline; }
.top-margin { margin-top: 30px; }
.bottom-margin { margin-bottom: 30px; }


/* Themes */
	
#mainwrapper {
	margin: 0 auto; max-width: 1260px; border: 10px solid #555; background: #f3f3f3; box-shadow: 0px 0px 64px #000;
	}
	
#head {
	position: relative;
	margin: 1% 1% 0 1%; height: 205px; background: #b00 url('head-bg-rounded.jpg') center bottom no-repeat;
	color: #fff;
	}
	#head a { color: #fff; text-decoration: none; }
	
	#head h1 { position: absolute; top: 55px; left: 300px; font-size: 300%; font-weight: normal; font-family: 'trebuchet MS','Cabin Condensed',sans-serif; }
	#head h1 a { text-decoration: none; }
	#head h1 a:hover { color: #fff; text-decoration: none; }
	
	#mainnav { position: absolute; right: 10px; line-height: 2.5; }
	#mainnav li { margin-left: 20px; }
	
	
	#logo { position: absolute; top: -5px; left: 3px; width: 298px; height: 205px; background: url(musical-shop-andrew-claude.png) no-repeat; }
	#slogan { position: absolute; top: 116px; left: 300px; line-height: 1.3; }
	
	#searchbox { position: absolute; width: 40%; top: 90px; right: 10px; }
	#searchbox_txt { border: 1px solid #ddd; background: #fff; border-radius: 6px; width: 90%; padding: 8px; font-size: 16px; vertical-align: middle; }
	#searchbox_sbm { vertical-align: middle; }
	
	#menu-hamburger { display: none; }
	#menu-hamburger button { margin: 0 2px; width: 48px; border: 1px solid #666; border-radius: 6px; background: #ddd; padding: 6px 0; color: #666; text-align: center; }
	#menu-hamburger button:hover { cursor: pointer; border: 1px solid #333; color: #333; }

#mainmenu { margin: 0 1% 1% 1%; width: 98%; display: table; }
#mainmenu li { position: relative; width: 10%; display: table-cell; text-align: center; overflow: hidden; }
#mainmenu a { background: #ccc; display: block; line-height: 40px; border-left: 1px solid #aaa; text-decoration: none; }
#mainmenu a.first { border-left: 0 none; }
#mainmenu a:hover { color: #fff; background: #666; }

	
#wrapper {}

.colsLR { overflow: hidden; }
	.colL { width: 24%; padding: 0 1% 1% 1%; float: left; }
		.colL-i {}
	.colR { width: 76%; padding: 0 1% 1% 1%; float: right; }
		.colR-i {}
		
.cols123 { overflow: hidden; }
	.col1 { width: 24%; padding: 0 1% 1% 1%; float: left; }
		.col1-i {}
	.col2 { width: 76%; padding: 0 1% 1% 1%; float: right; }
		.col2-i {}
	.col3 { width: 76%; padding: 0 1% 1% 1%; float: right; }
		.col3-i {}
		
/* sidebar */

#sidebarL section { margin-bottom: 30px; }
#sidebarL h2 { margin: 0; padding: 3%; font-size: 110%; }
#sidebarL h2.grey { background: #ddd; border: 1px solid #bbb; }
#sidebarL h2.red { background: #dca08a; border: 1px solid #bbb; }

#menu {	}
#menu li { border-bottom: 1px dotted #ccc; }
#menu a { padding: 3% 0 3% 12%; text-decoration: none; display: block; border-radius: 6px; transition: 0.5s; }
#menu a:hover { background: #b00; color: #fff; }
#menu a.active { background: #ddd; }

	#menu li ul { margin: 0; padding: 0; }
	#menu li ul a { padding: 2% 0 2% 17%; background: #eee; color: #444; font-size: 14px; font-weight: normal; }
	#menu li ul a:hover { background: #ddd; color: #111; }
	
#showindex { border: 1px solid #bbb; background: #eee; }
#showindex li { border-bottom: 1px dotted #ccc; }
#showindex a { padding: 2% 0 2% 12%; text-decoration: none; display: block; }
#showindex a:hover { background: #ddd; color: #111; }

#specials { border: 1px solid #bbb; background: #eee; font-size: 90%; line-height: 1.3; }
#specials li { padding: 4%; border-bottom: 1px dotted #ccc; }
#specials a img { width: 64px; float: left; }
#specials div { margin-left: 80px; }
#specials strong { font-size: 100%; color: #b00; }
#specials li.last { padding: 0; font-size: 110%; }
#specials li.last a { padding: 4% 0 4% 10%; text-decoration: none; display: block; }
#specials li.last a:hover { background: #777; color: #fff; }



/* main */

#main h1 { font-size: 300%; font-weight: normal; }

.mLinks { margin-bottom: 40px; }
.mLinks a { border: 1px solid #b9b9b9; padding: 10px 16px; background: #ccc; text-decoration: none; margin-right: 6px; }
.mLinks a:hover { border: 1px solid #898989; background: #999; color: #fff; }

.pages { margin-bottom: 24px; }
.pages a { display: inline-block; border: 1px solid #bbb; border-radius: 2px; padding: 6px 12px; background: #ddd; text-decoration: none; margin-right: 4px;margin-bottom: 4px; }
.pages a:hover { border: 1px solid #999; background: #ccc; color: #fff; }
.pages a.active { background: #b00; color: #fff; }

h1.musical { color: #b00; font-weight: normal; margin-bottom: 0; }
h3.musical { margin-top: 5px; margin-bottom: 20px; font-weight: normal; line-height: 1.5; }

/* prodlist */

.prodlist { margin: 0; padding: 0; list-style: none; overflow: hidden; }
.prodlist li { border: 1px solid #ddd; list-style: none; width: 20%; float: left; padding: 2%; min-height: 380px; }
.prodlist li:hover { background: #e7e7e7; }

.prodlist .prodL {}
.prodlist .prodR {}

	.prodlist .prPic { height: 146px; text-align: center; overflow: hidden; }
				.Nrm { }
				.Pre {}
				.Clips {}
				.PreClips {}
	.prodlist .prPic img { width: 100%; }
				
	.prodlist .prBew { text-align: center; }
	.prodlist .prBew img { width: auto; height: 22px; }
	
	.prodlist .prTitle { font-size: 90%; line-height: 1.3; text-align: center; height: 54px; overflow: hidden; }
	.prodlist .prTitle a { text-decoration: none; }
	
	.prodlist .prPrice { margin-top: 8px; font-size: 120%; text-align: center; }
	.prodlist .prPrice strong { color: #b00; }
	
	.prodlist .prStatus { text-align: center; color: #777; font-size: 80%; }
	
	.prodlist .prButton { text-align: center; }
	.prodlist .prButton button { font-size: 90%; display: inline-block; background: orange; border: 1px solid darkorange; border-radius: 4px; padding: 8px 10px; text-decoration: none; color: #fff; transition: background 0.3s; }
	.prodlist .prButton button:hover { background: darkorange; }
	
/* details */

.producttitle { font-size: 30px; }
#prTLeft { width: 33%; float: left; }
	#prTLeft .cover { min-width: 250px; border: 1px solid #ddd; box-shadow: 0px 0px 15px #999;}
#prTRight { width: 64%; float: right; }
#prPrice { margin-top: 30px; }
#prPrice button.button-addToCart { display: inline-block; background: orange; border: 1px solid darkorange; border-radius: 4px; padding: 15px 30px; text-decoration: none; color: #fff; font-size: 120%; margin-bottom: 12px; transition: background 0.3s; }
#prPrice button.button-addToCart:hover { background: darkorange; }
#prTClear { clear: both; }

#social-media { margin-top: 20px; }

#prSongs {}

#prSeries table { font-size: 80%; width: 100%; }
#prSeries table td { border: 1px solid #ddd; padding: 2%; text-align: center; }
#prSeries table td:hover { background: #ddd; }
#prSeries table td img { width: 70px; height: 70px; margin-bottom: 10px; }

#boxRev { border: 4px solid #ccc; background: #ddd; margin: 1.5% 0; padding: 1.5%; }
#boxRev table { width: 100%; }
#boxRev td { width: 20%; text-align: center; }

#prReviews { border: 1px dotted #aaa; padding: 2%; }
#prReviews div { font-size: 90%; margin: 3px 0; border: 1px dotted #aaa; padding: 1% 7% 1% 7%; }
#prReviews div:nth-child(even) { background: #f4f4f4; }
#prReviews div:nth-child(odd) { background: #f1f1f1; }
#prReviews blockquote { }

.box { margin: 0; padding: 0; overflow: hidden; list-style: none; }
.box li { width: 10%; margin: 0; float: left; text-align: center; list-style: none; }
.box li a img { margin: 6px; width: auto; height: 76px; }


	
/* showindex */

#showindex-az { margin: 0 1%; width: 98%; background: #333; }
#showindex-az td { vertical-align: middle; text-align: center; width: 3.84615%; }
#showindex-az a { text-decoration: none; color: #eee; }

#showindex-list { margin-left: 2%; }
#showindex-list li { margin: 1%; }
#showindex-list a { text-decoration: none; }

#showindex-selection { overflow: hidden; }
#showindex-selection li { margin: 1%; float: left; width: 82px; text-align: center; }
#showindex-selection a { display: block; border: 1px solid #ccc; border-radius: 4px; background: #eee; font-size: 28px; padding: 18px 0; text-decoration: none; }
#showindex-selection a:hover { background: #b00; color: #fff; }

h1.musical-author { font-size: 42px; }
.mixed-light { }
.mixed-light tr:nth-child(odd) { background: #f1f1f1; }
.mixed-light tr:nth-child(even) { background: #f7f7f7; }
.musicals { font-size: 14px; margin-bottom: 64px; width: 100%; }
.musicals th { padding: 4px 12px; font-size: 12px; text-align: left; font-weight: bold; }
.musicals a { text-decoration: none; }
.musicals a:hover { text-decoration: underline; }
.musicals td { padding: 4px 12px; }
h3.musicals-german { line-height: 1.3; padding-bottom: 12px; border-bottom: 1px solid #666; }
.musicals-german { margin-bottom: 32px; width: 100%; font-size: 14px; }
.musicals-german td { padding: 3px 10px; }
.musicals-german a { text-decoration: none; }
.musicals-german a:hover { text-decoration: underline; }
		
	

/* footer */

footer {
	clear: both; padding: 2% 0 1% 0; text-align: center;
	background: #d2d2d2;
	}
	footer a { display: inline-block; border: 1px solid #888; border-radius: 12px; margin: 8px; padding: 8px 16px; text-align: center; text-decoration: none; transition: 0.5s; }
	footer a:hover { background: #eee; color: #000; }

#bottomMenu {
		display: none; overflow: hidden; background: #666; 
		}
		#bottomMenu ul { list-style: none; overflow: hidden; font-size: 14px; font-weight: bold; width: 100%; margin: 0; padding: 0; }
		#bottomMenu li { list-style: none; width: 33.333%; float: left; }
		#bottomMenu a { display: block; background: #666; color: #eee; padding: 12px 20px; text-align: left; overflow:hidden }
		#bottomMenu a:hover, #bottomMenu a:active { background: #999; color: #444; }

/* dl, dd */

/* dd */

dl { margin: 0; padding: 0; }
dd { margin: 0; padding: 0; float: left; }

/* mobile, tablet, etc. */

@media all and (min-width: 1024px) and (max-width: 1279px) {
		#searchbox { width: 28%; }
		#searchbox_txt { width: 70%; }
		.box li { width: 12.5%; }
}
@media all and (min-width: 1024px) and (max-width: 1067px) {
		#searchbox { width: 28%; }
		#searchbox_txt { width: 70%; }
}
@media all and (min-width: 960px) and (max-width: 1024px) {
		#head { height: 160px; }
		#head h1 { top: 35px; left: 240px; font-size: 250%; }
		#mainnav { font-size: 13px; }
		#logo { top: -10px; left: -15px; width: 250px; height: 170px; background-size: 100%; }
		#slogan { top: 90px; left: 240px; font-size: 12px; }
		#searchbox { width: 30%; top: 70px; right: 10px; }
		#searchbox_txt { width: 80%; padding: 10px; font-size: 16px; vertical-align: middle; }
		.prodlist li { width: 25%; min-height: 380px; }
		.producttitle { font-size: 26px; }
		#prTLeft { width: 34%; }
		#prTLeft .cover { min-width: 160px; }
		#prTRight { width: 62%; }		
		.box li { width: 14.28571%; }
	}
@media all and (min-width: 480px) and (max-width: 960px) {
		img.fullWidth.special-teaser { max-width: 50%; }		
		
		#head { height: 146px; }
		#head h1 { top: 10px; left: 195px; font-size: 265%; }		
		#logo { top: -10px; left: -32px; width: 210px; height: 150px; background-size: 100%; }
		#slogan { top: 66px; left: 195px; font-size: 12px; }
		#searchbox { width: 30%; top: 50px; right: 0; }
		#searchbox_txt { width: 70%; padding: 10px; font-size: 14px; vertical-align: middle; }
		#menu-hamburger { display: block; position: absolute; width: 100%; top: -22px; text-align: center; }
		.colL { width: 100%; padding: 0 2% 2% 2%; float: none; }
		.colR { width: 100%; padding: 0 2% 2% 2%; float: none; }
		.prodlist li { width: 25%; min-height: 370px; }
		.col1 { width: 100%; padding: 0 2% 2% 2%; float: none; }
		.col2 { width: 100%; padding: 0 2% 2% 2%; float: none; }
		.col3 { width: 100%; padding: 0 2% 2% 2%; float: none; }
		.producttitle { font-size: 30px; }
		#prTLeft { width: 45%; }
		#prTLeft .cover { min-width: 256px; }
		#prTRight { width: 54%; }
		.box li { width: 12.5%; }
		.box li a img { margin: 3px; width: auto; height: 84px; }		
		footer { padding: 3%; }
		footer a { margin: 1%; padding: 1% 2%; border: 1px solid #eee; border-radius: 8px; text-decoration: none; transition: 0.5s; }
		footer a:hover { background: #eee; color: #000; }
		
		.hide-mobile, .toggle-mobile { display: none; }
	}
@media all and (max-width: 600px) {		
		
		#slogan { font-size: 11px; }
		#searchbox { width: 50%; top: 120px; right: -10px; }
		#searchbox_txt { width: 70%; padding: 10px; }
		#main h1, h1.musical { font-size: 222%; }
		h3.musical { font-size: 100%; }
		.prodlist li { width: 33.333333%; min-height: 370px; }
		.prodlist .prPic { height: 154px; }
		.producttitle { font-size: 133%; text-align: center; }
		#prTLeft { width: 100%; text-align: center; }
		#prTLeft .cover { width: 180px; height: auto; }
		#prTRight { width: 100%; text-align: center; padding-bottom: 32px; border-bottom: 1px solid #ccc; }
		.box li { width: 14.28571%; }
		.box li a img { margin: 2px; width: auto; height: 70px; }
		#prAddInfo, #prAuthors, #prKuenstler, #prSongs, #prAddBox, #prDVD, #prDescription { margin-left: 12px; margin-right: 12px; }
		#boxRev { border: 5px solid #ccc; background: #ddd; margin: 6px 0 12px 0; padding: 6px; }
		#boxRev h2 { font-size: 18px; }
		#boxRev table { width: 100%; }
		#boxRev td { width: 20%; text-align: center; }
		#prReviews blockquote { margin:0; padding:0; }
		
		#bottomMenu { display: block; }
	}
@media all and (min-width: 240px) and (max-width: 480px) {

		#head { }
		#head h1 { top: 38px; left: 0; font-size: 220%; width: 100%; text-align: center; }		
		#logo { top: -16px; left: -6px; width: 110px; height: 80px; background-size: 100%; }
		#slogan { top: 86px; left: 0; font-size: 11px; width: 100%; text-align:center; }
		#searchbox { width: 100%; top: 138px; left: 0; text-align: center; }
		#searchbox_txt { width: 60%; padding: 10px; font-size: 14px; vertical-align: middle; }
		#menu-hamburger { display: block; position: absolute; top: -16px; right: 2px; }
		.colL { width: 100%; padding: 0 2% 2% 2%; float: none; }
		.colR { width: 100%; padding: 0 2% 2% 2%; float: none; }
		.mLinks li { display: block; line-height: 42px; }
		.prodlist li { width: 50%; padding: 3%; min-height: 326px; }
		.prodlist .prPic { height: 140px; }
		.prodlist .prTitle { height: 64px; }
		.prodlist .prPrice { font-size: 110%; }
		.col1 { width: 100%; padding: 0 2% 2% 2%; float: none; }
		.col2 { width: 100%; padding: 0 2% 2% 2%; float: none; }
		.col3 { width: 100%; padding: 0 2% 2% 2%; float: none; }
		.box li { width: 16.66666%; }
		.box li a img { margin: 2px; width: auto; height: 68px; }
		footer { padding: 3%; }
		footer a { margin: 1%; padding: 1% 2%; border: 1px solid #eee; border-radius: 8px; text-decoration: none; transition: 0.5s; }
		footer a:hover { background: #eee; color: #000; }
		
		.hide-mobile, .toggle-mobile { display: none; }
		#bottomMenu { display: block; }
	}
@media all and (max-width: 320px) {		
		#main h1, h1.musical { font-size: 150%; }
		.prodlist .prPic { height: 120px; }
		.box li { width: 20%; }
		.box li a img { margin: 2px; width: auto; height: 52px; }
		#bottomMenu li { width: 50%; }
	}
@media all and (max-width: 240px) {				
		.mLinks li { display: block; line-height: 42px; }
		.prodlist li { width: 100%; padding: 3%; min-height: 370px; }
		.box li { width: 25%; }
		.hide-mobile, .toggle-mobile { display: none; }
		#bottomMenu li { width: 50%; }
	}