/* 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;
	vertical-align: baseline;
	
 }

/*focus styles */

:focus {
	outline: 0;
 }

body {
	line-height: 1;
	color: #000000;
 }
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: #666666;
  	text-decoration: none;
 }

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

a:hover {
	curser: pointer;
	color: #666666;
  	text-decoration: underline;
 }
li a.active {
	color: #0066ff;
  	text-decoration: underline;
 }
a.active {
	color: #0066ff;
  	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;
  }
 /*Photoswipe---------------------------------*/
 
.my-gallery {
  width: 70%;
  float: left;
}
.my-gallery img {
  width: 100%;
  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;
  }
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 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;
	}
	/* Navigation---------------------*/
	
	/*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 {
	cursor: pointer;
	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 {
	cursor: pointer;
	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;
}

/*------------------------------------------*/

#content {
	background: #ffffff;
	clear: both;
  	float: left;
  	display: inline;
  	width: 75%;
  	max-width: 75%;
	min-height: 100%;
	padding: 10px 0 20px 10px;
  }
 
	#sidebar{
  	float: right;
  	display: inline;
  	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;
  }
  #verlauf {
  background: url('./images/background.gif') top left repeat;
  padding: 10px;
  margin: 10px 0;
  }
    
#navigation2{
	font: 0.9em/0.8em Arial, Tahoma, Verdana, sans-serif;
	font-weight: bold;
	background: #ffffff;
	line-height: 1.5;
  	float: left;
  	display: inline;
  	width: 15%;
  	max-width: 15%;
	min-height: 100%;
	padding: 45px 20px 20px 0;
	}
.navi2 li {
	padding: 5px 5px 10px 0px;
	}
 .subnavi li {
	padding: 0px 3px 3px 10px;
	}
	.subsubnavi li {
	padding: 0px 3px 3px 20px;
	}
.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: 75%;
  	max-width: 75%;
	padding-bottom: 3em;
	padding: 10px 10px 10px 0;
	}
	#hauptinhalt ul li {
	overflow: hidden;
	padding: 10px 0;
	}
	#hauptinhalt p{
	overflow: hidden;
	}
	#hauptinhalt aricle {
	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);
	}	

#hauptinhalt2{
	background: #ffffff;
  	float: left;
  	display: inline;
  	width: 100%;
	min-height: 100%;
	padding-bottom: 3em;
	padding: 10px 10px 10px 0px;
	}

#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;
	}
.panorama 
p.descripton {
	margin: 2px 0;
	}
p.price {
	float: right;
	text-align: right;
	}
p.netprice {
	float: right;
	font: 0.8em/3.5em Arial, Tahoma, Verdana, sans-serif;
	}

#footer {
	bottom: 0;
	margin-left: 5px;
	height:3em;
	clear: both;
	background: #ffffff;
	}
 #footer li{
  float: left;
  padding: 10px;
  font: 0.9em/1.1em 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;
	}
	.photo3{
	display: none;
	}
.panorama {
	display: none;
	}
}
 
/* Kann maximal 568px darstellen. */
@media only screen and (max-width : 568px) {
  #zupfgeige-info {
display: none;
	}
	.photo3{
	display: none;
	}
.panorama {
	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;
}
.photo3{
	display: none;
	}
.panorama {
	display: none;
	}
}
/* 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;
	}
.panorama {
	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;
}
}
#figure {
    width: 20%;
    height: auto;
    float: left;

    padding: 1em 1em 1em 1em;
    border: 1px solid silver;
    margin: 0 2em 2em 2em;    
    box-shadow: 10px 0px 25px #555;
    transform: rotate(-1deg);
}  
#figure img {
    width: 100%;
    height: auto;
}   
#figcaption {
    padding-top: 1em;
    line-height: 1.2em;
    text-align: center;
}  
#figure2 {
    width: 20%;
    height: auto;
    float: left;

    padding: 1em 1em 1em 1em;
    border: 1px solid silver;
    margin: 0 2em 2em 2em;    
    box-shadow: 10px 0px 25px #555;
 }  
#figure2 img {
    width: 100%;
    height: auto;
}   
#figcaption2 {
    padding-top: 1em;
    line-height: 1.2em;
    text-align: center;
} 
#figure3 {
    width: 20%;
    height: auto;
    float: right;
	

    padding: 1em 1em 1em 1em;
    border: 1px solid silver;
    margin: 0 2em 2em 2em;    
    box-shadow: 10px 0px 25px #555;
    transform: rotate(1deg);
}    
#figure3 img {
    width: 100%;
    height: auto;
}   

#figcaption3 {
    padding-top: 1em;
    line-height: 1.2em;
    text-align: center;
}
#figure4 {
    width: 85%;
    height: auto;
    float: left;
	
    padding: 1em 1em 1em 1em;
    border: 1px solid silver;
    margin: 0 2em 2em 0;    
    box-shadow: 10px 0px 25px #555;
 }  
#figure4 img {
    width: 100%;
    height: auto;
}   
#figcaption4 {
    padding-top: 1em;
    line-height: 1.2em;
    text-align: center;
} 

/*

@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;
  }
}
*/