/*   
Theme Name: Supersound Guitars Responsive Theme
Theme URI: http://www.supersound.org.uk
Description: This is a responsive theme for Supersound Guitars
Author: Webfooted Designs
Author URI: http://www.webfooteddesigns.co.uk
Version: 1.0
*/

/* ------------------------------------------------------*\
CONTENTS
1. CSS Reset
2. Defaults
3. Body and Wrapper
4. Masthead
5. Main Content
6. Media Queries
\*------------------------------------------------------ */

/* ------------------------------------------------------*\
1. CSS RESET
Source: http://maxdesign.com.au/articles/css-reset/
Includes alterations
\*------------------------------------------------------ */

html, body, ul, ol, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p 
{
	margin: 0;
	padding: 0;
}

fieldset,img { border: 0; }

legend { color: #000; }

sup { vertical-align: text-top; }

sub { vertical-align: text-bottom; }

table
{
	border-collapse: collapse;
	border-spacing: 0;
}

caption, th, td
{
	text-align: left;
	vertical-align: top;
	font-weight: normal;
}

input, textarea, select
{
	font-size: 110%;
	line-height: 1.1;
}

abbr, acronym
{
	border-bottom: .1em dotted;
	cursor: help;
}

/* Added to make <main> work in IE */
main {
    display: block
}



/* ------------------------------------------------------*\
2. DEFAULTS
\*------------------------------------------------------ */


body {
	background-color: #eee;	
	color: #363636;
	}
	
h1, h2, h3, h4 {
	font-family: 'palatino linotype', 'book antiqua', georgia, 'times new roman', serif;
	}
	
h1 {
	margin-bottom: 15px;
	color: #6f2c33;
	border-bottom: 2px solid #028686;
	margin-bottom: 20px;
	padding-bottom: 3px;
	font-size: 1.6em;
	}

h2 {		
	margin-bottom: 15px;
	color: #6f2c33;
	padding-bottom: 3px;
	font-size: 1.4em;
	}
	
.mediah2 {
	font-size: 0.9em;
	border-bottom: none;
	margin-top: 20px;	
	}

h3 {
	font-size: 1.2em;
	margin-bottom: 10px;
	}

h4 {
	font-size: 1.0em;
	margin-bottom: 10px;
    clear: right;
	}

h5 {
	font-size: 0.9em;
	margin-bottom: 10px;
	}

h6 {
	font-size: 0.9em;
	margin-bottom: 10px;
	}

a {
	color: #028686;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}
		
a:hover {
	text-decoration: none;
	color: #6f2c33;		
	}

p, ul, ol, span, quote {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	line-height: 1.5em;
	margin-bottom: 20px;
	text-align: justify;
	}
	
quote {
	font-style: italic;
	margin-bottom: 20px;
}	
	
ul, ol {
	margin-left: 25px;
	}

ul > li > ul > li {
    font-size: 1.1em;
    }			
		
.parastart {
	color: #43ADF9;
	}
		
/* Images */

a img {
	border: none;
	}	

/* Making Images Responsive */

img,
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
#sidebar img,
.wp-caption {
	max-width: 100%; /* When images are too wide for containing element, force them to fit. */
	/*height: auto; /* Override height to match resized width for correct aspect ratio. */
	/* commented the above out as we need the height of the thumbnails in galleries to be consistent */
	}

img.aligncenter,
.wp-caption.aligncenter {
	display: block;
	margin: 0 auto 10px;
	max-width: 100%;
	height: auto;
	}

#content img {
    float: right;
}

/* Making Videos Responsive */	

.video-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */    
	padding-top: 25px;
	height: 0;
	}

.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
	
/* ------------------------------------------------------*\
3. BODY AND WRAPPER
\*------------------------------------------------------ */	
		
#wrapper {
	max-width: 970px;
	margin: 20px auto;	
	box-sizing: border-box;
	padding: 10px;
	}


/* ------------------------------------------------------*\
4. MASTHEAD
\*------------------------------------------------------ */
		
#masthead {
	min-height: 275px;
    margin-bottom: 20px;		
	}

#branding {
    float: left;    
}

#masthead #branding img {
	border: 3px solid #028686;	
	}

#navigation {
    float: right;	
	}

#masthead #navigation p {
	margin-bottom: 20px;		
	font-size: 2.0em;
	font-family: 'palatino linotype', 'book antiqua', georgia, 'times new roman', serif;
	font-weight: bold;	
	text-align: right;	
	}

#navigation a {
	text-decoration: none;
	display: block;
    font-weight: bold;
	}

#navigation ul {
	list-style: none;
	font-size: 1.0em;
	font-family: Verdana, Arial, Helvetica, sans-serif;	
	width: 90%;
	margin-left: 0;
    text-align: right;		
	}

#navigation li {
	margin-bottom: 5px;
	padding: 5px 0;	
	border-bottom: 2px solid #028686;		
	}
	
#navigation a:hover {
    color: #6f2c33;
	}
		
#navigation #current {
    color: #6f2c33;
	}
		
#strapline {
	font-size: 0.7em;		
	font-family: 'palatino linotype', 'book antiqua', georgia, 'times new roman', serif;
	}
	
	
/* ------------------------------------------------------*\
5. MAIN CONTENT
\*------------------------------------------------------ */	
	
#content {
	/*float: left;*/
	/*width: 66.666666%;*/
	width: 100%;
	/*border-bottom: 1px solid #43ADF9;*/
    margin: 20px 0 20px 0;	
	padding-bottom: 20px;		
    clear: both;	
	}
	
.section-nav {
	height: 30px;
	margin-bottom: 10px;
	}	
	
.next {
	float: right;		
	}

.previous {
	float: left;			
	}
	
#content img {
	border: 3px solid #028686;
	}
	
.img-caption {
	float: right;
	margin: 0 0 10px 20px;	
	}
	
.img-caption p, .gallery p {
	text-align: center;
	margin: 0;
	color: #363636;
	font-size: 0.8em;	
	}	
	
.fancybox-single-img {
	float: right;
	margin: 0 0 20px 20px;	
}	
	
.gallery {
	margin: 20px 0 20px 0;
	overflow: hidden;
	}	
		
.gallery a {
	float: left;
	width: 25%;
	margin: 0 auto 20px auto;
	min-height: 0;		
	text-align: center;
	}
	
#content .book-preview a {	
	width: 33%;	
}	

#content .legal-deposits-letters a {	
	width: 40%;
    margin: 0 5px 0 10px;
}	
	
#content .gallery a img {	
	
	}

#links-section {
	border-top: 2px solid #028686;
	padding-top: 20px;
}	
	
/* Two column gallery */		
	
#multi-col-gallery a {
	width: 50%;
	float: left;
	margin: 0 0 10px 0; 	
	}	

#wrapper .multi-col-gallery .gallery img {
	margin: 0;	
}	
	
/*.gallery p a span {
	position: absolute;
	text-align: center;
	width: 60%;	
	}	*/
	
/* Media Page */	
	
.mediaimg {
	float: right;
	margin: 0 0 10px 10px;
	}
	


/* ------------------------------------------------------*\
6. MEDIA QUERIES
\*------------------------------------------------------ */


/* INBETWEEN - THREE COLUMN --> TWO COLUMN GALLERY LAYOUT */	

@media only screen
and (min-width : 701px ) and (max-width : 950px) {
	
	/* Three column --> two column gallery */		

	.multi-col-gallery .gallery a {
	width: 33%;
	float: left;
	margin: 0 10% 10px 0; 	
	}
	
}	


/* TABLET = 501px - 800px */

@media only screen
and (min-width : 501px ) and (max-width : 800px) {
	
	/* Tablet 2. Defaults */

    h1, h2, h3, h4, h5, h6, p, ul, ol {
	text-align: center;	
	}
	
	h1, h2 {
	padding-bottom: 15px;	
	}

    h4 {
	clear: none;
	}
	
	ul, ol {
	margin: 10px;
	}
	
	/* Making Videos Responsive */	

	.video-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	}

	.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

    #content img {
    margin: 0 auto 10px auto;
    float: none;
    display: block;
    }

	/* Tablet 3. Body and Wrapper */
	
	#wrapper {
	max-width: 800px;	
	}
	
	/* Tablet 4. Masthead */
	
	#masthead p {
	margin-bottom: 20px;		
	float: none;
	text-align: center;	
	}
	
	#masthead a img {
	display: block;
	margin: 0 auto;	
	}

    #branding {
    float: none;    
    }

    #masthead #branding img {
	display: block;
	margin: 0 auto 20px auto;
	}

    #navigation {
    float: none;	
	}

    #masthead #navigation p {
	text-align: center;	
	}

    #navigation ul {
	width: 100%;
	text-align: center;		
	}	
	
	
	/* Tablet 5. Main Content - see below for smaller tablet sizes */	
	
}	


/* INBETWEEN - PAGE LAYOUT - UNFLOATING CONTENT */	

@media only screen
and (min-width : 501px ) and (max-width : 700px) {
	
	h1, h2, h3, h4, h5, h6, p {
	text-align: center;	
	}

	/* Main Content */
	
	#content {
	float: none;
	width: 100%;		
	}		
	
	.img-caption {
	float: none;
	margin: 10px 0;	
	}

	#gallery a {
	float: left;
	width: 33%;
	
	min-height: 0;		
	text-align: center;
	}
	
	#content #gallery a img {
	float: none;
	}
	
	.gallery br {
	display: none;	
	}

	/* Three column gallery */		
	
	.multi-col-gallery .gallery a {
	width: 100%;
	float: none;
	margin: 0 0 10px 0; 
	text-align: center;
	}

	#wrapper .multi-col-gallery .gallery img {
	display: block;
	margin: 10px auto;
	}		
	
	/* Media Page */		
	
	.mediaimg {
	float: none;
	display: block;
	margin: 0 auto;    
	}	
	
}


/* PHONE = 0px - 500px */

@media only screen
and (min-width : 0px ) and (max-width : 500px) {
	
	/* Phone 2. Defaults */
	
	h1, h2, h3, h4, h5, h6, p, ul, ol {
	text-align: center;	
	}
	
	h1, h2 {
	padding-bottom: 15px;	
	}

    h4 {
	clear: none;
	}
	
	ul, ol {
	margin: 10px;
	}
	
	/* Making Videos Responsive */	

	.video-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	}

	.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

    #content img {
    margin: 0 auto 10px auto;
    float: none;
    display: block;
    }

	/* Phone 3. Body and Wrapper */
	
	#wrapper {
	max-width: 500px;	
	}
	
	/* Phone 4. Masthead */
    
    #branding {
    float: none;    
    }

    #masthead #branding img {
	display: block;
	margin: 0 auto 20px auto;
	}

    #navigation {
    float: none;	
	}

    #masthead #navigation p {
	text-align: center;	
	}

    #navigation ul {
	width: 100%;
	text-align: center;		
	}	
	
	/* Phone 5. Main Content */
	
	#content {
	float: none;
	width: 100%;		
	}
	
	.img-caption {
	float: none;	
	display: block;
	margin: 10px auto;
	}	

	#gallery a {
	float: left;
	width: 50%;	
	min-height: 0;		
	text-align: center;
	}
	
	#content #gallery a img {
	float: none;	
	}
	
	.gallery br {
	display: none;	
	}

	/* Three column gallery */		
	
	.multi-col-gallery .gallery a {
	width: 100%;
	float: none;
	margin: 0 0 10px 0; 
	text-align: center;
	}

	#wrapper .multi-col-gallery .gallery img {
	display: block;
	margin: 10px auto;
	}		
	
	/* Media Page */		
	
	.mediaimg {
	float: none;
	display: block;
	margin: 0 auto;    
	}

/* INBETWEEN - GALLERY LAYOUT  */	

@media only screen
and (min-width : 0 ) and (max-width : 350px) {	
	
	#gallery a {
	float: left;
	width: 100%;	
	min-height: 0;		
	text-align: center;
	}
	
}