/* BASE CSS for Xylem Handmade Basses and Guitars */

* {
	margin:0;
	padding:0;
}


body {
	width: 100%;
	background-color: #000000;
	color: #ffffff;
	margin: 0 auto;
	padding:0 ;
	text-align: center;		
	font: normal 100% Helvetica, Arial, sans-serif;
	line-height: 1.5;
	
}



#page-2 {
	width:100%;
	max-width: 1400px;
	margin: 5px auto;
	padding:0;
	text-align: left;
	background: #000000;
	font-size: 1em;
	
}

img {
	
	display: block;
	margin:0 auto;
	max-width: 100%;
	border: none;
}

iframe {
	max-width: 100%;
	margin:0;
	padding: 0;
	z-index:1;

}

/* Fonts Section */

h1, h2, h3, h4 {
	font-family: "helvetica", "arial", sans-serif; 

}

p {
	font-size: 1em;
	padding: 2.5%;
	margin:0 auto;

}

p.textcenter {
	text-align: center;
	margin:0 auto;
}

p.extra-line-hgt {
	line-height: 170%
}

p.italic {
	font-style:italic;
}

h2 {
	font-size:1.5em;
	max-width: 100%;
	margin: 0 0 0.15% 0;
	padding: 0 0 0.1% 0;
	color: #ffffff;
	text-align: center;
	
}


h3 {
	font-size:1.25em;
	padding: 1% 4.5% 2.5% 4.5%;
}

h4 {
	font-size:1em;
	padding: 0 0 1% 0;
	text-align:center;

}



/* End font section*/


#logo-2 {

		max-width: 87%;
		margin:1%;
		
}

#logo-2 h1 {
		max-width: 100%;		
		margin: 0 1% -1% 1%;
		padding: 0 0 0 2.5%;


}

#logo-2 h1 img {
		display: block;
		max-width: 100%;
		margin: 0;
		
} 
	

#menu {		
		float:right;
		position: fixed;
		top:0;
		right:0;
		display: none;
		max-width: 15%;
		margin: 0 7px -1% 0;
		padding: 0 2px 11px 0; 
		background:#000000;
		z-index: 99;

}

span.hamburger {
		display: block;
		width: 50px;
		height:1px;
		padding:5px 0;
		border-bottom: #ffffff solid 2px;
}


#pg-title h2 {
	display: block;	
	font-size: 1.5em;
	max-width: 100%;
	padding: 0;
	margin:0;
	background: transparent url(bass-nav-grad.png) bottom center no-repeat;
}



#pg-title p {
	margin:0 auto;
	padding: 0;
	text-align: center;
}

	
	#navigation {

		height: 100%;
		margin:0;
		text-align:right;
		background-color: #202020;
		z-index: 500;
			
	}	

	#navigation.closed {
		position: fixed;
 		top:0;		
 		right:0;
		margin: 0;
	}

	#navigation p {
		max-width: 100%;
		display:block;
		padding: 10px 0 9px 0;
		font-size: 1.5em;
		line-height: 140%;
		margin:0;

	}


	#navigation a {
		padding: 11px;		
		
		font-weight:bold;
		

	}	

	
	#navigation p.back {		
		border-top: #124514 solid 1px;
		margin-top: 6%;
		
	}

	

	#navigation a:link, #navigation a:visited {

		color: #ffffff;
	}

	#navigation a:hover, #navigation a:active {
		color: #999999;
	}

	img.home-image {
		clear:both;
		border: #202020 solid 1px;
		max-width: 100%;
	}

	#slide-controller {
		font-size:2em;
		letter-spacing: 0.4em;
		margin:0 auto;
		padding:10px 0;
		line-height:100%;
	}

	#slide-controller a {
		padding: 0px 9px;
	}

	#slide-controller a:link, #slide-controller a:visited {

		color: #999999;
	}

	#slide-controller a:hover, #slide-controller a:active {
		color: #999999;
	}

	#slide-controller a.active {
		color:#ffffff;
	}




	#home-float {
		max-width: 100%;
	}

	#home-float div {
		float:left;
		display: inline;
		max-width: 49%;
		padding:1% 0.5%;
		margin:0;
		
	}

	#home-float iframe {
		max-width: 100%;
	}

	div.vid-clear {
		clear:left;
	}

	
	#home-float p {
		max-width: 100%;
		padding: 0;
		margin: 0;		
		text-align: center;
		
	}

	#home-float img {
		display: inline;
		max-width:100%;
		margin:0;
		padding:0;
		
	}

	
	#home-spiel {
		clear: both;
		padding-top:2%;

	}

	div.home-row {
		clear:left;
	}

	#new-guitars p {
		text-align: center;
		padding: 0;
		margin:0 auto;
	}

	#new-guitars img {
		display: inline;
		max-width: 31%;
		padding: 0;
		border: #af8b58 solid 1px;
	}

	#news div {
		border-bottom: #af8b58 solid 1px;
	}

	#news h3 {
		padding: 2.5%;
		margin:0 auto;
		background: transparent url(bass-nav-grad.png) -120px bottom no-repeat;
	}
	
	#content-2  {
		margin: 1%;
		max-width:87%;
		max-height:100%;
		background-color: #000000;
		
	}


	
	#nav-2 h3 {
		font-size:1.25em;
		text-align: center;
		padding: 0 1% 1% 1%;
	} 

	#guitar-gallery div, #bass-gallery div {
		display: inline;
		max-width: 0;
		margin: 0;
		padding: 0;
		
	}
	
	#guitar-gallery li, #bass-gallery li {
		float: left;
		display: block;
		list-style-type: none;
		max-width: 20%;
		margin: 0 2%;
		padding:0;
		font-size: 1.2em;
		text-align: center;
		
	}


	#guitar-gallery li.first, #bass-gallery li.first {
		clear:left;
	}

	#guitar-gallery li.last, #bass-gallery li.last {
		clear:left;
	}

	#guitar-gallery img, #bass-gallery img {
		display: block;		
		max-width: 100%;
		margin: 0;
		padding:0 0 4% 0;
	}


	#guitar-gallery a, #bass-gallery a {
		margin: 0;
		padding:0;

	}

	h2.buy {
		padding: 0 0 0.75% 0;
		margin: 5% 5% 0% 5%;
		/*border-bottom: #af8b58 solid 1px;*/
		clear: both;
		background: transparent url(bass-nav-grad.png) bottom center no-repeat;
	}

	ul.learn {
		text-align: left;
		font-size:1.25em;
		padding:2% 2% 2% 10%;
		line-height: 2em;
		list-style-type: disc;
	}

	li.text {
		list-style-type: none;
		font-size: 1em;
	}

	h3.order {
		text-align: center;
		background: transparent url(bass-nav-grad.png) bottom center no-repeat;
	}

	#standard-instruments ul {
	display: block;
	margin:0 15px;

	}

	div.preimg-buy {
		max-width: 100%;		
		margin: 0 0 20px 0;
		font-size: 1.125em;
	
	}

	img.buy {
		max-width:90%;	
		display: block;
		margin: 0 auto;
		padding:0;
		
	} 

	div.sale-form {
		max-width:100%;		
		margin:0 auto;
		padding:0;
		
	} 

	div.sale-form form {		
		max-width:100%;
		
	} 

	div.sale-form label {
		display: block;
		text-align: center;
	} 

	div.sale-form input {
		
		max-width:100%;
		
	} 
	
	div.sale-form input.image {
		display: block;
		max-width: 100%;
		padding:9px 0 15px 0;
		margin:0 auto;
		
	}

	div.sale {
		
		max-width: 100%;
		margin:0;
	
	}


	div.sale p {
		max-width: 100%;
		text-align: center;
		margin:0;
		padding:0;
	}

	
	div.return-text {
		max-width: 100%;
		margin:30px 0 30px 0;
		padding: 0;
		text-align: center;
		border-top: #af8b58 solid 1px;
		
	}


	div.paypal-seal {
		max-width: 100%;
			
	}

	a.paypal-seal {
		display:block;
		max-width:20%;
		margin: 0 auto;
		padding:0;
		text-align: center;
		
	}

	div.paypal-seal img {
		max-width: 90%;
		max-height: 90%;
		margin:0 auto;
		
	}	

	#info-sale input {
		padding:25px 0 0 0;
		
	}

	
	span.price {
		font-size: 1.25em;

	}
	span.store-buy {
		font-size:1em;

	}

	#video-page p {
		margin: 0 auto;
		padding: 0;
	}

	#video-page img {
		display: inline;
		max-width:100%;
		margin: 1.5% auto;
		padding: 0;
	}
	

	#artist-page ul {
		margin:0 auto;
		max-width: 100%;
		padding: 0;

	}

	#artist-page li {
		float:left;
		clear:none;
		display: block;
		padding:0;
		list-style-type:none;
		text-align: center;
		max-width: 20%;
		margin:0 2.5%;
		
		
	}
	
	

#article-list a {
	display:block;
	margin: 1em 0.5em;
	padding: 0;
	font-weight:bold;
	text-align: left;
	
}

#article-list p {
	padding: 0;
}

#repair-table {
	
}


table {
	border-collapse: collapse;
	max-width: 100%;
	display: table;
	margin: 0 auto; 	
	text-align: center;
	
}

caption {
	margin: 0 0 10px 0;
	text-align:center;
}

table.repairs tr  {
	max-width: 100%;
	margin: 0 auto; 
	padding: 0;
	text-align: center;
	
}

table.repairs th, table.repairs td {
	
	max-width: 33%;
	margin: 0 auto; 
	padding: 5px 3px;
	border: #af8b58 solid 1px;
	text-align: center;
	
}

table.repairs a  {
	color: #ffffff;
	
}



#footer  {
	max-width:100%;
	margin: 3% 0 0 0;
	padding:6% 0 7% 0;
	clear:both;
	border-top: #af8b58 solid 1px;
}

#bass-nav {
	margin: 2% 0 1% 0;
	background: transparent url(bass-nav-grad.png) top center repeat-y;

}



#bass-nav p {
	text-align: center;
	padding: 0;
	margin:0 auto;


}

#bass-nav a {
	display: inline;
	padding: 17px 4px 17px 3px; 
}

#bass-nav a.highlight {
	text-decoration: underline;
	color:#ffffff;
}

#load-note {
	text-align: center;
	max-width: 100%;
}

#load-note.closed {
	display: none;
}

#load-note.open {
	display: block;
	position: absolute;
}

#full-img img {
	max-width: 100%;
	margin:0 auto;
}

#thumbnails p {
	margin:0 auto 1% auto;
	padding: 0;
	line-height: 170%;
}

#thumbnails img {
	display: inline;
	padding: 0;
	margin:2% 1% 0 1%;
	max-width: 50px;
	max-height: 50px;
	border: #af8b58 solid 1px;
	font-size: 1px;
	line-height: 100%
}

#thumbnails a {
	display: inline;
	padding: 0% 2%;
	margin:0 1%;
	font-size: 3em;
}

#thumbnails img.viewing {
	border: red solid 1px;
}



p.photocredit {
	text-align: center;
	padding: 2% 0 2% 0;	
	font-size: 1em;
	
}


#alts, #b-alts {

display: none;
}


#const-gal img {
	max-width: 45%;
	padding: 1% 2.5%;
	margin: 0 auto;
	display: inline;
	float: left;
}

#const-gal img.design {
	max-width: 100%;
	padding: 1% 2.5%;
	margin: 0 auto;
	display: inline;
	float: left;
}

#sounds {
	max-width: 100%;
	
}

#sounds img {
	display: block;
	max-width: 100%;
	
}


div.sound-container p {
	padding: 6% 4.5% 3% 4.5%;
}

p.sound-note {
	margin:1% auto 1% auto;
	font-style: italic;
	font-size: 1em;
	
}

p.vid-container {
	padding: 0;
	margin: 0 auto;
	max-width: 100%;
	text-align: center;

} 


#vid-gal iframe {
	padding: 0;
	margin: 0;
	max-width: 100%;
		
} 

#vid-gal h3 {
	padding: 2.5% 4.5% 1.5% 4.5%;
}

div.vid-gal iframe {
	padding: 0;
	margin: 0;
	max-width: 100%;
		
} 



#specs {
	max-width: 100%;
	padding: 0 0 2% 0;
	
}

#specs img {
	display: block;
	max-width: 100%;
	
}

#spec-desc {
	
	max-width: 100%;
	margin:0 0 0 0;
	
}

#spec-desc p {
	padding: 0.85em 1em;
	font-weight: bold;
	color:#999999;

}

p.hidden, p.revealed {
	
	background: transparent url(bass-nav-grad.png) -120px bottom no-repeat;
	
}

p.revealed span, p.hidden span {	
	display: block;
	font-weight: normal;
	margin: 0 0 0 0%;
	color:#ffffff;
	
	
}

p.revealed span.drop-down, p.hidden span.drop-down {	
	display: none;
	float: right;
	margin: 0 70% 0 0;
	font-weight: bold;
	
}

#artist img {
	max-width: 100%;
	margin: 0 auto;
}

#artist-image img {
	max-width: 50%;
	float:left;
	margin: 2.5% 3% 1% 10%;
	
}

#artist-desc p {
	padding: 2.5%;
	
}


p.gallery-back {
	padding: 3% 0 2% 0;
	text-align: center;
	margin:0 auto;
}

#online-article h3 {
	text-align: center;
	padding: 1.5% 4.5% 0% 4.5%;

}

p.article-nav {
	text-align: center;
	font-weight: bold;
}

p.article-back {
	padding: 0 0 2% 0;
	margin: 0 auto;
	text-align: center;
	font-style: normal;
}

#testimonials img {
	max-width: 100%;
}

#testimonials p {
	font-style: italic;
}

table.first-guitar {
	padding:0;
	margin:0 auto;
	text-align: center;
}

table.first-guitar tr {
	max-width: 96%;
	margin: 0 4%;
	padding: 0;
	
}

table.first-guitar th, table.first-guitar td {
	max-width: 31%;
	margin:0;
	padding: 1% 4%;
	border: #af8b58 solid 2px;
}

div.divider {
	border-bottom: #af8b58 solid 1px;
	display: block;
}

div.newsletter-form {
		max-width: 100%;
		max-height: 100%;
		margin:5% auto 0 auto;
		
	}

	div.newsletter-form-home {
		max-width: 100%;
		max-height: 100%;
		margin:2% auto 5% auto;
		
	}

	legend {
		color:#ffffff;
	}

	form.news-letter {
		max-width: 100%;
		max-height: 100%;
		text-align: center;

	}

	fieldset.news-letter {
		max-width:100%;
		max-height: 100%;		
		border: #af8b58 solid 1px;
		
	}

	input.news-letter {
		width: 55%;		
		padding: 10px 0 10px 0;
		color:#000000;
	}


	input.news-letter-button {
		max-width: 44%;
		font-size: 1.1em;
		padding:12px 0 12px 0;
	}



a {
	text-decoration: none;
	
}

a:link, a:visited  {
	color:#999999; 
	font-weight: bold;

}

a:hover, a:active {
	color:#ffffff;
}


/*End of link display */


.green {
	color:#32892c;
}

.normal {
	font-size: 1em;
}

.small {
	font-size: .75em;
}

.medium {
	font-size: 1.125em;
}

.big {
	font-size:1.25em;
}

.big-center {
	font-size:1.25em;
	text-align: center;
}

.medium-center {
	text-align:center;
	font-size: 1.125em;

}

.big-underline {
	text-align:center;
	border-bottom: #af8b58 solid 2px;
	
}

.bold {
	font-weight:bold;
}

.textcenter {
	text-align:center;
}

.red {
	color: red;
}

.underline {
	text-decoration:underline;
}

ul {
	padding: 0 0 0 1.5em;
}

blockquote {
	font-style: italic;
}

cite {
	font-style: normal;
}

#artist-page li.last {
		
		clear:left;
		
	}

/* End Base CSS for Xylem */


/*Responsive Styles for Xylem Basses & Guitars */

@media screen and (max-aspect-ratio: 1/1) {

	#full-img img {
		max-width: 100%;
		margin:0 auto;
	}

}

@media screen and (min-aspect-ratio: 1/1) and (min-height: 300px) {

	#full-img img {
		max-width: 95%;
		margin:0 auto;
	}

	h2.buy img {
		max-width: 60%;
	}

}

@media screen and (min-aspect-ratio: 1/1) and (min-height: 500px) {

	#full-img img {
		max-width: 65%;
		margin:0 auto;
	}

	h2.buy img {
		max-width: 100%;
	}
}

@media screen and (min-aspect-ratio: 1/1) and (min-height: 700px) {

	#full-img img {
		max-width: 90%;
		margin:0 auto;
	}

}




@media screen and (max-height:599px) {

	p.hidden span {
		display: none;

	}

	p.revealed span.drop-down {
		display:none;
	}

	p.hidden span.drop-down {
		display: inline;
	}

}

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

	#thumbnails img.hidden {
		display: none;
	}

}

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

	#slide-controller {
		
		letter-spacing: -0.1em;
		
	}

	#slide-controller a {
		
		padding: 9px 17px 9px 17px;
		
	}

}

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

	#logo-2 h1 {
		
		padding: 0;
	}

	#pg-title h2 {
		font-size: 1.1em;
	}

	h2 {
		font-size:1.25em;
	}

	#home-float p.vid-container {
		position: relative;
		padding: 1% 0 56.25% 0;
		margin: 0 0 4em 0;
		border-top: #202020 solid 1px;
	
	}

	#home-float iframe {
		position: absolute;
		top:3em;
		left:0;
		width: 100%;
		height: 100%;
	} 

	#home-float div {
		float:none;
		display: block;
		max-width: 100%;
		padding:0;
		margin:0;
	

	}

	#new-guitars img {
		display: inline;
		max-width: 45%;
		padding: 0 1.5%;
	}

	#artist-page li {
		max-width: 45%;
		margin:0 2.5%;	
	}
	 
	#vid-gal p.vid-container {
		position: relative;
		padding: 1% 0 56.25% 0;
		margin:0 0 5% 0;
		
	}

	#vid-gal iframe {
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
	} 

	#online-article h3 {
		font-size: 1em;
		padding: 2.5% 4.5% 1% 4.5%;
	}



	

}

@media screen and (min-width: 540px) and (max-width: 1019px) {

	

	#guitar-gallery li, #bass-gallery li {
		max-width: 30%;
		margin: 0 1%;
		
	}

	#artist-page li {
		max-width: 30%;
		margin:0 1.6666667%;	
	}

	#artist-page li.last {
		
		clear:left;
		
	}

}


@media screen and (min-width: 0px) and (max-width:749px) {

	#logo-2, #content-2 {
		max-width: 100%;
		
	}

	#logo-2 h1 {
		max-width: 79%;		
		
	}	

	#menu {
		display: inline;
		
	}

	#navigation {
		background: transparent url(nav-bg.png) top right repeat-y;
	}

	#navigation.closed {
		width: 150px;
 		position: absolute;
 		top: 0px;
 		left: -155px;
	}

	#navigation.open {
		width: 100%;
		display:block;
 		position: fixed;
 		top: 0;
 		right: 0;
		margin: 0 1% 0 0;
		padding: 0 0 80% 0;
		z-index: 500;
	}

	#pg-title {
		clear:both;
	}

	

	#nav-2 h3 {
		font-size:1.1em;

		
	} 

	#nav-2 a {
		padding: 0 0% 0 0%;
		line-height: 250%;
	}

	#guitar-gallery li, #bass-gallery li {
		
		max-width: 40%;
		margin: 0 4%;
		font-size: 1em;
		
	}

	p.mobile-center {
		
	}

	a.mobile-center {
		text-align: center;
		display: block;
		padding: 12px 0;
	}
	

	#article-list ul {
		padding: 0 0 0 5%;
	}

	#vid-gal h3 {
		font-size: 1em;
	
	}

	#const-gal img {
		max-width: 100%;
		float:none;
		padding: 1% 0;
	
		
	}
	
	p.revealed span.drop-down, p.hidden span.drop-down {	
	
		margin: 0 45% 0 0;
	
	}

	#artist-image img {
		margin: 2.5% 3% 1% 5%;
	
	}

		table.repairs th, table.repairs td {
	
	max-width: 100%;
	text-align: center;
	display:block;
}


}

@media screen and (min-width: 750px) {

	#logo-2 h1 {
		
		max-width: 60%;


	}	

	#logo-2 h2 {
		max-width:100%;
		clear:both;
	}
	
	#menu {
		display: none;
	}

	#navigation.closed, #navigation.open {
		max-height: 100%;
		display:block;
 		
		
	}

	


	#standard-instruments ul {
		margin:0 10% 0 10%;

	}

	#video-page img {
		
		max-width:45%;
		
	}

	p.revealed span, p.hidden span {	
	
	margin: 0 0 0 0%;
	
	
	}
	
	table.first-guitar th, table.first-guitar td {
		max-width: 31%;
		padding: 1% 4%;
		
	}

	#footer  {	
		margin: 3% 0 0 0;
		padding:3% 0 7% 0;	
	}

	
	
}

@media screen and (min-width: 750px) and (max-width: 1019px) {

	#logo-2, #content-2  {
		max-width:83%;
		
	}

	#navigation.closed, #navigation.open {
		width: 13.5%;
		padding: 0 1% 0 0;
		
	}

	#pg-title {
		clear:both;
	}	
	

	table.first-guitar th, table.first-guitar td {
		max-width: 31%;
		margin:0;
		padding: 1% 6%;
		
	}


}


@media screen and (min-width: 1020px) and (max-width: 1399px) {

	p, #news h3 {
		max-width:87%;	
		padding: 2%;
	}

	#logo-2, #content-2  {
		max-width:87%;
		
	}

	#content-2 {
		clear:both;
	}


	#navigation.closed, #navigation.open {
		width: 10%;
		padding: 0 1% 0 0;
 		
		
	}
	
	

	#guitar-gallery li, #bass-gallery li {
		
		max-width: 20%;
		margin: 0 2%;
		
	}	

	#artist-page li {
		max-width: 20%;
		margin:0 2.5%;	
	}



	#online-article p, #online-article ul {
		max-width:85%;
		margin:0 auto;
	}

	table.first-guitar {
		margin: 0 0 0 10%;
		
	}

	table.first-guitar th, table.first-guitar td {
		max-width: 31%;
		padding: 1% 5%;
		
	}

	
}

@media screen and (min-width: 1400px) {

	p, #news h3 {
		max-width:75%;
		padding:1.5%;
	}

	#logo-2, #content-2  {
		max-width:90%;
		
	}

	#logo-2 h1 {
		padding: 0 0 0 2%;
	}

	
	#pg-title h2 {
		font-size: 1.75em;	}

	#content-2 {
		clear:both;
	}

	#navigation.closed, #navigation.open {
		width: 8%;
 		padding: 0 0.5% 0 0;
 		
		
	}

	

	#guitar-gallery li, #bass-gallery li {
		
		max-width: 20%;
		margin: 0 2.5%;
		
	}	

	#standard-instruments ul {
	margin:0 10% 0 20%;

	}

	#video-page img {
		
		max-width:32%;
		
	}

	#artist-page li {
		max-width: 20%;
		margin:0 2.5%;	
	}

	

	
	#online-article p, #online-article ul {
		max-width:75%;
		margin:0 auto;
	}

	table.first-guitar {
		margin:0 0 0 13.5%;
	}

	table.first-guitar th, table.first-guitar td {
		max-width: 31%;
		padding: 1% 11%;
		
	}
	 
	
}

@media screen and (max-height:449px){

	#logo-2 h1 {
		max-width: 55%;		
		
	}

	#pg-title h2 {
		font-size: 1.25em;
	}

	#guitar-gallery li, #bass-gallery li {
		max-width: 40%;
		margin: 0 4%;
		
	}

	img.buy {
		max-width:70%;	
		
		
	} 
	
	#artist-page li {
		max-width: 30%;
		margin:0 1.666666666%;	
	}

	#artist-page li.last {
		
		clear:left;
		
	}



	
}	

/* End Responsive Styles */