@charset "utf-8";
/* CSS Document */
/* Author: Aaron M. Souza 2013 */

*
{
margin: 0;
padding: 0;
}

body
{
width: 100%;
margin: 0;
padding: 0;
font-family: arial, sans-serif;
font-size: large;
color: #222222;
background: #5d7c89;
}

#true-top
	{
	width: 100%;
	height: 20px;
	}

/* Common Elements */

a
	{
	outline: none;
	}

a:link, a:visited, a:active
	{
	text-decoration: none;
	color: #115fb2;
	}

a:hover, a:focus
	{
	text-decoration: underline;
	color: #115fb2;
	}

a[href^=tel]
	{
    color: inherit;
    text-decoration: none;
	}

img
	{
	width: 100%;
	max-width: 100%; /* IE */
	}

img.no-border
	{
	border: 0;
	}

br.clear-all
	{
	clear: both;
	}

ul
	{
	list-style: none;
	}

/* End Common Elements */

#wrapper
	{
	width: 960px;
	margin: 0 auto 20px auto;
	text-align: center;
	background: white;
	box-shadow: 0px 2px 8px 0px #444444;
	-moz-box-shadow: 0px 2px 8px 0px #444444;
	-webkit-box-shadow: 0px 2px 8px 0px #444444;
	}
	
/* Header */

#header
		{
		width: 100%;
		}

#logo-holder
			{
			float: left;
			width: 158px;
			margin: 12px 0 12px 2%;
			}

#shop-info
			{
			float: right;
			margin: 40px 3% 12px 0;
			font-family: "OpenSansCondensedBold", arial;
			font-weight: normal;
			font-style: normal;
			font-size: 16px;
			line-height: 20px;
			color: #b79536;
			text-align: right;
			}

/* End Header */

#sub-wrapper
		{
		width: 100%;
		text-align: left;
		background: #eeeeee;
		}

/* Left Column */

#left-column
			{
			width: 21%;
			float: left;
			margin: 0;
			}

#menu-button-stripe
				{
				display: none;
				}

/* Social Media */

.social-section
				{
				border-bottom: 1px solid #cfcfcf;
				background: #eeeeee;
				}

.social-link
					{
					width: 61px;
					float: left;
					margin: 12px 12px 9px 12px;
					}

.social-button
					{
					position: relative;
					z-index: 30;
					width: 55px;
					float: left;
					margin: 12px 0 9px 0;
					}

/* End Social Media */

/* End Left Column */

/* Content */

#content-holder
			{
			position: relative;
			z-index: 20;
			width: 79%;
			float: right;
			margin: 0;
			padding: 0;
			background: white;
			box-shadow: -2px 0 2px -2px #555555;
			-moz-box-shadow: -2px 0 2px -2px #555555;
			-webkit-box-shadow: -2px 0 2px -2px #555555;
			}

#content
				{
				width: 94%;
				float: left;
				margin: 0;
				padding: 0 0 20px 3%;
				}

h1
					{
					clear: left;
					margin: 0 0 18px 0;
					padding: 10px 10px 8px 10px;
					font-family: "OpenSansCondensedBold", arial;
					font-weight: normal;
					font-style: normal;
					font-size: 26px;
					color: #30566a;
					background: #eeeeee;
					}

h3
					{
					clear: left;
					margin: 0 0 18px 0;
					padding: 8px 10px 6px 10px;
					font-family: "OpenSansCondensedBold", arial;
					font-weight: normal;
					font-style: normal;
					font-size: 18px;
					color: #222222;
					background: #eeeeee;
					}

p
					{
					clear: left;
					margin: 0 10px 18px 10px;
					font-size: 13px;
					line-height: 18px;
					}

p.caption
					{
					margin: 0 0 18px 0;
					font-weight: bold;
					font-size: 11px;
					line-height: 16px;
					color: #666666;
					text-align: center;
					}

p.caption-right
					{
					display: inline;
					width: 48%;
					float: right;
					clear: right;
					margin: 0 0 18px 4%;
					font-weight: bold;
					font-size: 10px;
					line-height: 16px;
					color: #666666;
					text-align: right;
					}

p.instructor
					{
					margin-bottom: 8px;
					font-size: 13px;
					font-weight: bold;
					color: #1c6f91;
					}

ul.normal-list
					{
					clear: left;
					margin: 0 20px 12px 20px;
					padding: 0;
					font-size: 13px;
					line-height: 18px;
					}

ul.normal-list li
						{
						margin: 0 0 6px 0;
						padding: 0 0 0 13px;
						background: url('../images/normal-list-li-bg.jpg') no-repeat left 5px;
						}

ul.normal-list li.no-bg
						{
						background: none;
						}

.presentation
					{
					width: 400px;
					float: left;
					margin: 0 0 30px 20px;
					}

input.normal-input
						{
						width: 66%;
						float: left;
						margin: 0 4% 4px 0;
						border: 1px solid #999999;
						border-radius: 0;
						-moz-border-radius: 0;
						-webkit-border-radius: 0;
						padding: 5px 4px;
						font-weight: bold;
						color: #222222;
						-moz-appearance: none;
						-webkit-appearance: none;
						}

input.normal-form-button
						{
						width: 22%;
						float: left;
						margin: 0;
						border: 0;
						border-radius: 0;
						-moz-border-radius: 0;
						-webkit-border-radius: 0;
						padding: 6px 10px;
						font-weight: bold;
						color: white;
						cursor: pointer;
						background: #b79536;
						-moz-appearance: none;
						-webkit-appearance: none;
						}

input.normal-form-button:hover, input.normal-form-button:focus
						{
						background: #5496b8;
						}

#safe-subscribe
						{
						width: 160px;
						float: left;
						clear: left;
						}

#sjo-logo-holder
					{
					width: 180px;
					float: right;
					margin: 0 20px 20px 20px;
					}

img.normal-img-left
					{
					width: 48%;
					float: left;
					}

img.normal-img-right
					{
					width: 48%;
					float: right;
					}

img.jazz-jam
					{
					float: right;
					clear: right;
					width: 18%;
					margin: 0 0 18px 4%;
					}

#google-map-holder
					{
    				position: relative;
					height: 0;
					margin: 0 0 18px 0;
    				padding-top: 30px;
    				padding-bottom: 56.25%;
    				overflow: hidden;
					}

#google-map-holder iframe, #google-map-holder object, #google-map-holder embed
						{
    					position: absolute;
    					top: 0;
    					left: 0;
    					width: 100%;
    					height: 100%;
						}

#fb-root
						{
    					display: none;
						}

.fb-like-box
						{
						margin: 0 0 20px 0;
						}

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style]
						{
    					width: 100% !important;
						}

/* Request Form */

.form-holder
					{
					width: 100%;
					margin: 0 0 18px 0;
					padding: 4% 0;
					background: #ebf7ff;
					}

form#request-form
						{
						margin: 0;
						padding: 0;
						}

p.required-form
							{
							margin: 0 4% 2% 4%;
							font-size: 10px;
							color: #333333;
							}

p.form-category
							{
							margin: 0 4% 1% 4%;
							font-size: 11px;
							font-weight: bold;
							}

input.normal-form-input, textarea.normal-form-textarea, .captcha-holder
							{
							box-shadow: 0 0 1px 0 #444444;
							-moz-box-shadow: 0 0 1px 0 #444444;
							-webkit-box-shadow: 0 0 1px 0 #444444;
							}

input.normal-form-input
							{
							width: 90%;
							float: left;
							margin: 0 0 3% 4%;
							border: 0;
							border-radius: 0;
							-moz-border-radius: 0;
							-webkit-border-radius: 0;
							padding: 1%;
							font-family: arial;
							font-size: 12px;
							color: #222222;
							}

textarea.normal-form-textarea
							{
							width: 90%;
							height: 60px;
							float: left;
							margin: 0 0 3% 4%;
							border: 0;
							border-radius: 0;
							-moz-border-radius: 0;
							-webkit-border-radius: 0;
							padding: 1%;
							font-family: arial;
							font-size: 12px;
							color: #222222;
							resize: none;
							}

.captcha-holder
							{
							width: 90%;
							float: left;
							margin: 0 0 3% 4%;
							padding: 1% 0 1% 2%;
							background: white;
							}

.captcha-holder img
								{
								width: auto;
								}

input.form-submit
							{
							width: 92%;
							float: left;
							margin: 1% 0 2% 4%;
							border: 0;
							border-radius: 0;
							-moz-border-radius: 0;
							-webkit-border-radius: 0;
							padding: 12px 0;
							font-size: 12px;
							color: white;
							background: #1c6f91;
							-moz-appearance: none;
							-webkit-appearance: none;
							}

input.form-submit:hover, input.form-submit:focus
							{
							background: #18607d;
							cursor: pointer;
							}

input.form-reset
							{
							width: 92%;
							float: left;
							margin: 0 0 0 4%;
							border: 0;
							border-radius: 0;
							-moz-border-radius: 0;
							-webkit-border-radius: 0;
							padding: 12px 0;
							font-size: 12px;
							color: white;
							background: #5496b8;
							-moz-appearance: none;
							-webkit-appearance: none;
							}

input.form-reset:hover, input.form-reset:focus
							{
							background: #4983a0;
							cursor: pointer;
							}

/* End Request Form */

/* End Content */

/* Footer */

#footer
			{
			width: 100%;
			margin: 0;
			border-top: 1px solid #cfcfcf;
			padding: 0;
			font-size: 11px;
			line-height: 17px;
			background: white;
			}

ul.footer-nav
				{
				display: none;
				}

a.f-n-act:link, a.f-n-act:visited, a.f-n-act:active, a.f-n-act:hover, a.f-n-act:focus
					{
					color: #222222;
					}

ul.footer-ul
				{
				float: left;
				clear: left;
				margin: 20px 0 14px 20px;
				padding: 0;
				}

ul.footer-ul li
					{
					margin: 0 0 6px 0;
					}

/* End Footer */

/* Fonts */

@font-face
{
font-family: 'OpenSansCondensedBold';
src: url('../fonts/OpenSans-CondBold-webfont.eot');
src: url('../fonts/OpenSans-CondBold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/OpenSans-CondBold-webfont.woff') format('woff'),
url('../fonts/OpenSans-CondBold-webfont.ttf') format('truetype'),
url('../fonts/OpenSans-CondBold-webfont.svg#OpenSansCondensedBold') format('svg');
font-weight: normal;
font-style: normal;
}

/* End Fonts */

@media(max-width: 1023px){

body
{
background: white;
}

#true-top
{
display: none;
}

#wrapper
{
width: 100%;
margin: 0;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}

#logo-holder
{
width: 140px;
}

#shop-info
{
margin: 34px 3% 12px 0;
}

#left-column
{
width: 26%;
}

.social-link
{
margin: 12px 12px 8px 12px;
}

.social-button
{
margin: 12px 0 8px 0;
}

#content-holder
{
width: 74%;
}

p.caption, p.caption-right
{
font-size: 9px;
line-height: 15px;
}

.bx-wrapper
{
margin: 0 0 66px 0;
}

.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto
{
bottom: -40px;
}

.bx-wrapper .bx-pager.bx-default-pager a
{
width: 20px;
height: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.presentation
{
width: 86%;
}

#safe-subscribe
{
width: 120px;
}

#sjo-logo-holder
{
width: 134px;
}

img.jazz-jam
{
width: 20%;
}

input.normal-form-input, textarea.normal-form-textarea, .captcha-holder, input.form-submit, input.form-reset
{
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}

input.form-submit
{
margin: 1% 0 4% 4%;
}

}

@media(max-width: 640px){

#logo-holder
{
width: 120px;
margin: 12px 0 12px 3%;
}

#shop-info
{
margin: 24px 3% 12px 0;
}

#left-column
{
width: 100%;
}

#menu-button-stripe
{
display: block;
width: 100%;
margin: 0;
background: #eeeeee;
}

ul.nav
{
font-size: 16px;
}

.active
{
display: block;
}

ul.nav li.phone-only
{
display: block;
}

ul.nav a:link, ul.nav a:visited, ul.nav a:active
{
padding: 10px 12px 6px 12px;
}

ul.nav a:hover, ul.nav a:focus
{
padding: 10px 12px 6px 12px;
}

.social-section
{
display: none;
}

#content-holder
{
width: 100%;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}

#content
{
width: 94%;
clear: left;
margin: 12px 0 2px 3%;
border: 0;
padding: 0;
}

h1
{
margin: 0 0 12px 0;
line-height: 32px;
}

h3
{
margin: 0 0 12px 0;
font-size: 14px;
line-height: 16px;
}

p, ul.normal-list
{
font-size: 11px;
line-height: 15px;
}

ul.normal-list li
{
background-position: left 8px;
}

p.caption, p.caption-right
{
font-size: 9px;
line-height: 14px;
-webkit-text-size-adjust: none;
}

p.instructor
{
line-height: 18px;
}

input.normal-input
{
width: 54%;
}

input.normal-form-button
{
width: 34%;
}

#sjo-logo-holder
{
width: 100px;
}

img.jazz-jam
{
width: 25%;
}

p.required-form
{
margin: 0 4% 3% 4%;
}

input.normal-form-input
{
margin: 0 0 5% 4%;
padding: 2% 1%;
}

textarea.normal-form-textarea
{
margin: 0 0 5% 4%;
}

.captcha-holder
{
width: 89%;
margin: 0 0 5% 4%;
padding: 2% 0 2% 3%;
}

#footer
{
font-size: 9px;
line-height: 15px;
}

ul.footer-ul
{
margin: 10px 0 14px 20px;
}

ul.footer-nav
{
display: inline;
float: left;
font-size: 16px;
margin: 20px 0 0 20px;
padding: 0;
}

ul.footer-nav li
{
margin: 0 0 10px 0;
}

}

@media(max-width: 320px){

#shop-info
{
margin: 26px 4% 12px 0;
font-size: 12px;
line-height: 16px;
}

ul.nav
{
font-size: 18px;
}

ul.nav a:link, ul.nav a:visited, ul.nav a:active
{
padding: 10px 12px 8px 12px;
}

ul.nav a:hover, ul.nav a:focus
{
padding: 10px 12px 8px 12px;
}

p, ul.normal-list
{
font-size: 11px;
line-height: 17px;
}

ul.normal-list li
{
background-position: left 5px;
}

h1
{
padding: 8px 10px 6px 10px;
font-size: 20px;
line-height: 24px;
}

h3
{
font-size: 16px;
line-height: 20px;
}

input.normal-input
{
width: 50%;
}

input.normal-form-button
{
width: 38%;
}

#sjo-logo-holder
{
width: 70px;
}

#footer
{
font-size: 11px;
line-height: 17px;
}

}