/* Farbschema--------------------------------------------------------------------- */

/*
  Farbton (body, Zupfgeige-blau, Hintergrund): #0099FF
  Farbton (dunkleres blau): #0066FF
  Farbton (helles grau): #CCCCCC
  Farbton (dunkelgrau): #666666
  Farbton (mittelgrau): #999999
  Farbton (blaugrau): #006699
  Farbton (Hintergund, weiss): #FFFFFF
  Farbton (Text, schwarz): #000000
*/

html, body, div, span, applet, ibject, iframe,
ha, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, 
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {

	padding: 0;
  	margin: 0;
  	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
	vertical-align: baseline;
	background-repeat: no-repeat;
 }

/*focus styles */

:focus {
	outline: 0;
 }

body {
	line-height: 1;
	font-size: 100%;
	color: #000000;
	background: #FFFFFF;
 }
ol, ul {
	list-style: none;
 }
table {
	border-collapse: separate;
	border-spacing: 0;
 }
caption, th, td {
	text-align: left;
	font-weight: normal;
 }
blockquote:before, blockquote.after, q:before, q:after {
	content: "";
 }
blockquote, q {
	quotes: "" "";
 }

/* Globals und Typo----------------------------------------------------------------- */

html {
/* 	Wahlweise Grid-Hintergrund
  	Rasterhintergrund, der die Breite bis 100 Pixel und eine H�he bis 950 Pixel anzeigt. Die Breite von 960 	Pixel ist markiert. Der Hintergrund ist transparent, muss also nicht nur mit #fff verwendet werden. Es wird eine Schriftgr�sse von 75% oder 12px festgelegt.
	background: #fff url(bilder/grid.png) top left no-repeat;
  	*/ 
	min-height: 100%;
  	background: #FFFFFF;
  	font-size: 75%;
 }
body {
/* 	Wahlweise Linienhintergrund
  	Linienhintergrund abgestimmt auf eine Schriftgr��e von 12px. 
  	background: transparent url(bilder/line-height.gif) top left;
  	*/ 
  
	background: #FFFFFF;
  	}

html>body {
	min-height: 100%;
  	font-size: 12px;
 }

a:link {
  	color: #999999;
  	text-decoration: none;
 }

a:visited {
  	color: #666666;
  	text-decoration: none;
 }

a:hover {
	color: #cccccc;
  	text-decoration: underline;
 }
li a.active {
	color: #0099ff;
  	text-decoration: underline;
 }

/* Vertikaler Rhythmus basierend auf 12px Basisgr�sse f�r den Flie�text------ */
p {
  	font: 1em/1.5em Arial, Tahoma, Verdana, sans-serif;
	margin-top: 0.5em;
  	margin-bottom: 1em;
	margin-left: 5px;
  }
h1 {
	padding: 20px 0 10px 5px;
	margin: 0;
  }
h1 span {
	display: none;
  }
h2 {
  	font: 1.5em/1.3em Arial, Tahoma, Verdana, sans-serif;
  	margin-top: 25px;
  	margin-bottom: 0.7em;
	padding: 5px;
  }
h2 span {
	font: 0.6em/0.4em Arial, Tahoma, Verdana, sans-serif;
	margin-top: 0.3em;
  	margin-bottom: 0.3em;
	margin-left: 0px;
	}
h3 {
 	font: 1.33em/1.23em Arial, Tahoma, Verdana, sans-serif;
  	margin-bottom: 0.7em;
	margin-left: 5px;
  }
h3 span {
	font: 0.6em/0.4em Arial, Tahoma, Verdana, sans-serif;
	line-height: 0.3em;
	padding: 0 0 0 5px;
	}
h4 {
 	font: 1.29em/1.17em Arial, Tahoma, Verdana, sans-serif;
  	margin-bottom: 1em;
	margin-left: 5px;
	
  }
h5 {
 	font: 1.1em/1em Arial, Tahoma, Verdana, sans-serif;
  	margin-top: 1em;
  	margin-bottom: 1em;
	margin-left: 5px;
  }
/* Bilder und verlinkte Bilder ohne Rahmen ------------------------------- */

img, a img {
  	border: 0;
  }

/* Links- bzw. Rechtsausrichtung f�r Elemente----------------------------- */

.my-gallery {
  width: 75%;
  float: left;
}
.my-gallery img {
  width: 85%;
  height: auto;
}
.my-gallery img {
	border: 0;
	-moz-box-shadow:1px -1px 4px 4x rgba(190, 190, 190, 0.9);
	-webkit-box-shadow:1px -1px 4px 4px rgba(190, 190, 190, 0.9);
	box-shadow:1px -1px 4px 4px rgba(190, 190, 190, 1);
	}
.my-gallery a:hover img {
	-moz-box-shadow:1px -1px 8px 8px rgba(190, 190, 190, 0.9);
	-webkit-box-shadow:1px -1px 8px 8px rgba(190, 190, 190, 0.9);
	box-shadow:1px -1px 8px 8px rgba(190, 190, 190, 1);
	}	
.my-gallery figure {
  display: block;
  float: left;
  margin: 0 20px 3px 0;
  width: 100px;
}
.my-gallery figcaption {
  display: none;
}

.my-gallery1 {
  width: 70%;
  float: left;
}
.my-gallery1 img {
  width: 100%;
  height: auto;
}
.my-gallery1 img {
	border: 0;
	-moz-box-shadow:1px -1px 4px 4x rgba(190, 190, 190, 0.9);
	-webkit-box-shadow:1px -1px 4px 4px rgba(190, 190, 190, 0.9);
	box-shadow:1px -1px 4px 4px rgba(190, 190, 190, 1);
	}
.my-gallery1 a:hover img {
	-moz-box-shadow:1px -1px 8px 8px rgba(190, 190, 190, 0.9);
	-webkit-box-shadow:1px -1px 8px 8px rgba(190, 190, 190, 0.9);
	box-shadow:1px -1px 8px 8px rgba(190, 190, 190, 1);
	}	
.my-gallery1 figure {
  display: block;
  float: left;
  margin: 0 20px 3px 0;
  width: 320px;
}
.my-gallery1 figcaption {
  display: none;
}

.gitarren {
  width: 100%;
  float: left;
}
.gitarren img {
  width: 100%;
  height: auto;
}
.gitarren figure {
  display: block;
  float: left;
  margin: 0 30px 12px 0;
  width: 120px;
}
.gitarren figcaption {
  
}
.rosetten {
  width: 130%;
  float: left;
}
.rosetten img {
  width: 100%;
  height: auto;
}
.rosetten figure {
  display: block;
  float: left;
  margin: 0 30px 12px 0;
  width: 120px;
}
.rosetten figcaption {
  
}
.galerie {
  width: 100%;
  float: left;
}
.galerie img {
  width: 150%;
  height: auto;
}
.galerie figure {
  display: block;
  float: left;
  margin: 0 130px 12px 0;
  width: 150px;
}
.galerie figcaption {
  
}
.box {
	float: left;
	height: 320px;
	
}
.box2 {
	float: left;
	height: 335px;
	
}
.box3 {
	float: left;
	height: 205px;
}
.links {
  	float: left;
  	margin: 0 0.5em 0.5em 0;
	padding: 5px;
  }
.rechts {
  	float: right;
 	 margin: 0 0 0.5em 0.5em;
	 padding: 5px;
  }

/* Layoutelemente: overflow: hidden; um n�tige Floats aufzul�sen.---------- */

#wrapper {
	background: #ffffff; 
  	margin: 0 auto;
  	width: 100%;
  	max-width: 1024px;
	min-height: 100%;
  }
 #header {
	background: #ffffff;
  	margin: 0 auto;
  	width: 100%;
  	max-width: 1024px;
	}
#zupfgeige-info {
	background: transparent url('./images/zupfgeige_info.jpg') top left no-repeat;
	margin: 0 3em 0 0;
	width: 138px;
	height: 180px;
	position: absolute;
	top: 0px;
	left: 70%;
	z-index: 999;
  }
  #metainformation {
	background: #ffffff url('./images/background.gif') top left repeat;
	overflow: hidden;
	position: relative;
	}
/*Strip the ul of padding and list styling*/
#menu ul {
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
}

/*Create a horizontal list with spacing*/
#menu li {
	display:inline-block;
	float: left;
	margin-right: 1px;
}

/*Style for menu links*/
#menu li a {
	display:block;
	min-width:120px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-weight: bold;
	color: #666666;
	background: #ffffff url('./images/navi.jpg')bottom left repeat-x;
	text-decoration: none;
}

/*Hover state for top level links*/
#menu li:hover a {
	background: #ffffff url('./images/navi_hover.jpg')bottom left repeat-x;
}
#menu li a.active {
	color: #0066ff;
  	text-decoration: underline;
}
.language {
  	float: right;
  }
/*Style for dropdown links*/
#menu li:hover ul a {
	background: #f1f1f1;
	color: #666666;
	height: 30px;
	line-height: 30px;
}

/*Hover state for dropdown links*/
#menu li:hover ul a:hover {
	background: #ffffff url('./images/navi_hover.jpg')bottom left repeat-x;
	color: #0066ff;
}

/*Hide dropdown links until they are needed*/
 li ul {
	display: none;
}

/*Make dropdown links vertical*/
#menu li ul li {
	display: block;
	float: none;
}

/*Prevent text wrapping*/
#menu li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0 20px;
}

/*Display the dropdown on hover*/
 ul li a:hover + .hidden, .hidden:hover {
	display: block;
	z-index: 999;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #fff;
	background: #19c589;
	text-align: center;
	padding: 10px 0;
	display: none;
}

/*Hide checkbox*/
 input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
 input[type=checkbox]:checked ~ #menu{
    display: block;
}
/*#navigation {
	font: 1em/1.5em Arial, Tahoma, Verdana, sans-serif;
	font-weight: bold;
	background: url('./images/navi.jpg')bottom left repeat-x;
	float: left;
	padding: 0 20px;
	width: 100%;
	}
#navigation li {
	float: left;
	list-style-type: none;
	}
	
#navigation li a, #navigation li a:visited {
	background: #ffffff url('./images/navi.jpg') bottom left repeat-x;
	color: #666666;
	float: left;
	margin: 0;
	padding: 10px 10px;
	text-align: center;
	text-transform: uppercase;
	border-right: 1px solid #cccccc;
	}
	
#navigation li a:hover {
	background: #ffffff url('./images/navi_hover.jpg')bottom left repeat-x;
	text-decoration: underline;
	}
#navigation li a.active {
	background: #ffffff url('./images/navi_active.jpg')bottom left repeat-x;
	color: #0099ff;
	margin: 0;
	padding: 10px 10px;
	text-decoration: underline;
	}
	*/
#content {
	background: #ffffff;
	clear: both;
  	float: left;
  	display: inline;
  	width: 100%;
  	max-width: 100%;
	min-height: 100%;
	padding: 10px 0 20px 10px;
  }
 #content2 {
	background: #ffffff;
	clear: both;
  	float: left;
  	display: inline;
  	width: 100%;
  	max-width: 100%;
	min-height: 100%;
}
/*
  #navigation_content {
	font: 1em/1.5em Arial, Tahoma, Verdana, sans-serif;
	font-weight: bold;
	background: #ffffff;
	float: left;
	padding: 10px 10px 10px 0;
	}
#navigation_content li {
	float: left;
	list-style-type: none;
	}
	
#navigation_content li a, #navigation_content li a:visited {
	background: #ffffff;
	color: #666666;
	float: left;
	padding: 10px 10px 10px 0;
	text-align: center;
	}
	
#navigation_content li a:hover {
	background: #ffffff; 
	text-decoration: underline;
	}
#navigation_content li a.active {
	background: #ffffff url('./images/navi_active.jpg')bottom left repeat-x;
	color: #0099ff;
	padding: 10px 10px 10px 0;
	text-decoration: underline;
	}
 */ 
  #sidebar{
  	float: right;
  	display: none;
  	width: 18%;
  	max-width: 18%;
	min-height: 100%;
	margin: 10px;
	padding: 30px 10px 10px 10px;
  	
  }
  #runde-ecken {
  background: url('./images/background.gif') top left repeat;
  border-radius: 15px;
  border: 1px solid #cccccc;
  padding: 10px;
  margin: 10px 0;
  }
   #runde-ecken2{
  background: #ffffff;
  border-radius: 15px;
  border: 1px solid #cccccc;
  padding: 10px;
  margin: 10px 0;
  }
  
  
#navigation2{
	display: none;
	font: 0.9em/0.8em Arial, Tahoma, Verdana, sans-serif;
	font-weight: bold;
	background: #ffffff;
	line-height: 1.5;
  	float: left;
  	width: 15%;
  	max-width: 15%;
	padding: 45px 20px 20px 0;
	}
.navi2 li {
	padding: 5px 5px 10px 0px;
	}
 .subnavi li {
	padding: 0px 3px 3px 10px;
	}
.breadcrump {
	font: 0.9em/0.8em Arial, Tahoma, Verdana, sans-serif;
	list-style-type: none;
	overflow: hidden;
	padding: 0;
	margin: 0;
	}
 .breadcrump li {
	float: left;
	padding: 0;
	margin: 0;
	}
#hauptinhalt{
	background: #ffffff;
  	float: left;
  	display: inline;
  	width: 100%;
  	max-width: 100%;
	padding: 10px 10px 10px 0;
	}
	#hauptinhalt ul li {
	overflow: hidden;
	padding: 10px 0;
	}
	#hauptinhalt p{
	overflow: hidden;
	}
#hauptinhalt img {
	border: 0;
	-moz-box-shadow:1px -1px 4px 4x rgba(190, 190, 190, 0.9);
	-webkit-box-shadow:1px -1px 4px 4px rgba(190, 190, 190, 0.9);
	box-shadow:1px -1px 4px 4px rgba(190, 190, 190, 1);
	}
	#hauptinhalt a:hover img {
	-moz-box-shadow:1px -1px 8px 8px rgba(190, 190, 190, 0.9);
	-webkit-box-shadow:1px -1px 8px 8px rgba(190, 190, 190, 0.9);
	box-shadow:1px -1px 8px 8px rgba(190, 190, 190, 1);
	}	
/*#start_info {
	text-align: left;
	padding: 15px;
	max-width: 120px;
	}
	.start_info {
	text-align: left;
	padding: 15px;
	max-width: 120px;
	height: 100px
	}*/
#hauptinhalt2{
	background: #ffffff;
  	float: left;
  	display: inline;
  	width: 100%;
  	max-width: 100%;
	padding: 10px 10px 10px 0;
	}

#hauptinhalt2 img {
	border: 0;
	-moz-box-shadow:1px -1px 4px 4x rgba(190, 190, 190, 0.9);
	-webkit-box-shadow:1px -1px 4px 4px rgba(190, 190, 190, 0.9);
	box-shadow:1px -1px 4px 4px rgba(190, 190, 190, 1);
	}
	#hauptinhalt2 a:hover img {
	-moz-box-shadow:1px -1px 8px 8px rgba(190, 190, 190, 0.9);
	-webkit-box-shadow:1px -1px 8px 8px rgba(190, 190, 190, 0.9);
	box-shadow:1px -1px 8px 8px rgba(190, 190, 190, 1);
	}	

	
.photo {
	float: left;
	margin-right: 12px;
	margin-bottom: 5px;
	margin-left:5px;
	}
.photo1 {
	float: left;
	margin-right: 12px;
	margin-bottom: 5px;
	margin-left:5px;
	}
.photo3 {
	float: left;
	margin-right: 12px;
	margin-bottom: 5px;
	margin-left:0px;
	}
	}
.photo2{
	float: left;
	margin-top: 0px;
	margin-right: 20px;
	margin-bottom: 5px;
	}
.photo4{
	float: left;
	margin-top: 0px;
	margin-right: 20px;
	margin-bottom: 5px;
	display: none;
	}
.photo5{
	float: left;
	margin-top: 0px;
	margin-right: 20px;
	margin-bottom: 5px;
	display: none;
	}
.photo6{
	float: left;
	margin-top: 0px;
	margin-right: 20px;
	margin-bottom: 5px;
	display: none;
	}
p.descripton {
	margin: 2px 0;
	}
p.price {
	float: right;
	}
p.netprice {
	float: right;
	font: 0.8em/3.5em Arial, Tahoma, Verdana, sans-serif;
	}	
#footer {
  clear: both;
  background: #ffffff;
  }
 #footer li{
  float: left;
  padding: 10px;
  font: 0.9em/0.8em Arial, Tahoma, Verdana, sans-serif;
  text-transform: uppercase;
  border-left: 1px solid #663333;
  border-right: 1px solid #cccccc;
  }
 
 /* Kann maximal 1280px darstellen. */
@media only screen and (max-width : 1280px) {

}
 
/* Kann maximal 1024px darstellen. */
@media only screen and (max-width : 1024px) {
  #zupfgeige-info {
	background: transparent url('./images/zupfgeige_info.jpg') top left no-repeat;
	margin: 0 3em 0 0;
	width: 138px;
	height: 180px;
	position: absolute;
	top: 0px;
	left: 75%;
	z-index: 999;
  }
}
 
/* Kann maximal 800px darstellen. */
@media only screen and (max-width : 800px) {
#zupfgeige-info {
display: none;
}
  /*Make dropdown links appear inline*/
  #menu li a {
	display:block;
	min-width:110px;
	}
	menu ul {
		position: static;
		display: none;
	}
	/*Create vertical spacing*/
	menu li {
		margin-bottom: 1px;
	}
	/*Make all menu links full width*/
	menu ul li, li a {
		width: 100%;
	}
	/*Display 'show menu' link*/
	.show-menu {
		display:block;
	}
}
 
/* Kann maximal 568px darstellen. */
@media only screen and (max-width : 568px) {
  #zupfgeige-info {
display: none;
	}
}
/* Kann maximal 480px darstellen. Smartphones (landscape) */
@media only screen and (max-width : 480px) {
  html>body {
	min-height: 100%;
  	font-size: 14px;
 }
#zupfgeige-info {
display: none;
}
#navigation2{
display: none;
}
#hauptinhalt{
  	width: 100%;
  	max-width: 100%;
	}
#sidebar {
float: left;
width: 90%;
max-width: 90%;
	}
 #menu li a {
	display:block;
	min-width:100px;
	height: 30px;
	line-height: 30px;
	}
.box {
	float: left;
	height: 400px;
	}
.box {
	float: left;
	height: 420px;
	}
.my-gallery {
  width: 100%;
  float: left;
}
}
/* Kann maximal 320px darstellen. Smartphones (portrait) */
@media only screen and (max-width : 320px) {
  html>body {
	min-height: 100%;
  	font-size: 14px;
 }
#zupfgeige-info {
display: none;
}
#navigation2{
display: none;
}
#hauptinhalt{
  	width: 100%;
  	max-width: 100%;
	}
.box {
	float: left;
	height: 400px;
	}
.box {
	float: left;
	height: 420px;
	}
.photo3 {
	display: none;
	}
.photo2{
	display: none;
	}
#sidebar {
float: left;
width: 90%;
max-width: 90%;
	}
menu ul li, li a {
		width: 60%;
	}
#menu li a {
	display:block;
	min-width:120px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-weight: bold;
	color: #666666;
	background: #ffffff url('./images/navi.jpg')bottom left repeat-x;
	text-decoration: none;
}
}


/*

@media screen and (max-width: 700px) {

  .row--nav {
    font-size: 18px;
    line-height: 26px; 
  }

  .demo-gallery {
    max-width: 500px;
  }
  .demo-gallery a {
    width: 120px;
    margin: 0 4px 4px 0;
  }
  a.demo-gallery__img--main {
    width: 164px;
  }
  .section--head p {
    font-size: 18px;
    line-height: 24px;
  }
}

@media screen and (max-width: 490px) {
  .demo-gallery a {
    width: 100px;
    margin: 0 4px 4px 0;
  }
  a.demo-gallery__img--main {
    width: 137px;
  }
}



@media screen and (max-width: 450px) {
  .demo-gallery a {
    width: 95px;
    margin: 0 1px 1px 0;
  }
  a.demo-gallery__img--main {
    width: 127px;
  }
}


@media screen and (max-width: 350px) {
  .demo-gallery a {
    width: 81px;
margin: 0 1px 1px 0;
  }
  a.demo-gallery__img--main {
    width: 109px;
  }
}
*/