@charset "UTF-8";
/* CSS Document */

/*
 *	Site:	James Sherman Krav Maga
 *	Author:	Noah Ottenstein
 *	Date:	January, 2011
 */
 
 @import url("reset.css");

/* Colors:
 *	
 *	page bg:	#111111		#111111
 *	content bg:	#e4e4e4		black
 *	Text:		#333333		white
 *	Red:		#cc0000		#900000
 *	Green:		#26873f		#26873f
 *	Blue:		#10548d		#3f6788
 *	Orange:		#ba5902		#ba5902
 *	
 */

body {
	background-color: #111111;
	margin: 0;
	padding: 0;
	-webkit-text-size-adjust: none;
	font: normal 100% "junction-1", "junction-2", Verdana, sans-serif;
	line-height: 1.25em;
}

.page {
	color: white;
	background-color: black;
	background: -moz-radial-gradient(50% 20% 0deg,ellipse contain, #666666, #000000);
	background: -webkit-gradient(radial, 50% 21%, 1, 50% 21%, 300, from(#666666), to(#000000));
	margin: 0 auto;
    padding: 20px;
    width: 95%;
	max-width: 920px;
	-moz-box-shadow: 0 0 20px -5px #CCC;
	-webkit-box-shadow: 0 0 30px -5px #CCC;
	box-shadow: 0 0 30px -5px #CCC;
	font-size: .85em;
	
	position: relative;
}

a {
	color: #900000;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

h1, h2, h3, h4, h5 {
	font-family: "chunk-1", "chunk-2", "Times New Roman Bold", "Georgia Bold", "Arial Black", serif;
	font-weight: normal;
	line-height: 1em;
	margin-bottom: .5em;
}

h1 {
	font-size: 4em;
}

h2 {
	font-size: 2.2em;
}

h3 {
	font-size: 1.75em;
}

h4 {
	font-size: 1.15em;
}

small {
	font-size: 0.85em;
}

/* color link and header classes */
.red, .red a {
	color: #900000;
}

.green, .green a {
	color: #26873f;
}

.blue, .blue a {
	color: #3f6788;
}
.orange, .orange a {
	color: #ba5902;
}

.white, .white a {
	color: white;
}
a.white:hover, .white a:hover {	
	color: #CCC;
}

/* base formatting classes */

.floatRight {
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
}

.floatLeft {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}

.rounded {
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

.clear {
	clear: both;
}

/* lists */
ul {
	padding-left: 2em;
	list-style: outside disc;
	margin: 1em;
}

ol {
	padding-left: 2em;
	list-style: outside decimal;
	margin: 1em;
}	

li {
	margin-bottom: .5em;
}


p {
	margin-bottom: 10px;
}

p:last-child {
	margin-bottom: 0;
}

blockquote {
	margin: 0 2em;
}


.content table {
	border-spacing: 2px;
	border-collapse: separate;
	margin-bottom: 1em;
}
.content td {
	background-color: #333;
	padding: .5em;
	margin: 1px;
}

.highlightBox,
.highlightBox.blue {
	background-color: #3f474d;
	background-color: rgba(63,103,136,.4);
	padding: 5px;
	margin: 10px 0;
	
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

/* color link and header classes */
.highlightBox.red {
	background-color: #402323;
	background-color: rgba(144,0,0,.4);
}
.highlightBox.red a {
	color: #3f6788;
}

.highlightBox.green {
	background-color: #10381a;
	background-color: rgba(38,135,63,.4);
}

.highlightBox.orange {
	background-color: #666666;
	background-color: rgba(255,255,255,.4);
}

.highlightBox.white {
	color: white;
}

/* HEADER ------------------------------------------- */

.header {
	text-align: center;
	position: relative;
}

.header h1 {
	font-size: 4em;
	margin: 0;
	line-height: 1em;
	text-shadow: 1px 1px 0px #000,  -1px -1px 0px #000,  1px -1px 0px #000,  -1px 1px 0px #000;
	position: relative;
	z-index: 10;
	padding-left: 40px;
	padding-top: 12px;
}

.header h1 a {
	color: #b29248;
	position: relative;
}

.header p {
	margin: 0 auto;
	width: 53%;
	position: relative;
	z-index: 10;
}

.header a {
	color: #cc0000;
}

#redBar {
	height: 8px;
	width: 100%;
	background-image: url(../images/template/redbar.png);
	background-repeat: repeat-x;
	background-position: center;
	position: absolute;
	top: 0px;
	z-index: 100;
}

.punch {
	position: absolute;
	z-index: 0;
	top: -5px; left: -10px;
	width: 211px;
}

p.classes-note {
	font-size: .9em;
	width: 70%;
	margin-top: 3px;
}

/* Main Navigation bar */
.topNav {
	width: auto;
	margin: 10px 0 20px;
	font-family: "chunk-1", "chunk-2", "Times New Roman Bold", "Georgia Bold", "Arial Black", serif;
	background-color: #d6dbe3; /* fallback */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(187,187,187,.45)), to(rgba(187,187,187,.45)), color-stop(.5,rgba(0,0,0,.45))), url(../images/template/light_blue_noise.png); /* for safari */
	background: -moz-linear-gradient(0% 100% 90deg, rgba(187,187,187,.45), rgba(0,0,0,.45), rgba(187,187,187,.45) 100%),  url(../images/template/light_blue_noise.png); /* for firefox */
	border: 1px solid #999;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-moz-box-shadow: inset 0 0 1px 1px #333;
	-webkit-box-shadow: inset 0 0 1px 1px #333;
	box-shadow: inset 0 0 1px 1px #333;
	text-shadow: 1px 1px 2px #fff;
	line-height: 1.2em;
	vertical-align: middle;
	position: relative;
	z-index: 10;
}

.topNav a {
	display: block;
	vertical-align: middle;
	padding: 10px 19px;
	min-width: 53px;
	max-width: 160px;
}

.topNav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	height: auto;
}

.topNav li {
	height: 48px;
	display: inline-block;
	vertical-align: middle;
	border-right: 1px solid #333;
	border-top: 1px solid #333;
	margin-bottom: 0;
}

.topNav li:last-child {
	border-right: none;
}

.topNav>ul {
	font-size: 1.4em;
}

.topNav>ul a {
	color: #555;
}

.topNav>ul>ul {
	font-size: .75em;
	display: inline;
}

.topNav>ul>ul a {
	color: #394a5f;
	max-width: 180px;
	min-width: 84px;
	padding: 8px 16px;
}
		
.topNav li:hover {
	background: -webkit-gradient(radial, 50% 50%, 1, 50% 50%, 50, from(rgba(16,84,141,.3)), to(rgba(16,84,141,0)));
	background: -moz-radial-gradient(50% 50% 0deg,ellipse contain, rgba(16,84,141,0.3), rgba(16,84,141,0.0));
}

/* Sub Navigation Bar */

.subNav {
	text-align: center;
	margin-bottom: 20px;
}

.subNav ul {
	display: inline;
	padding-left: 0;
}

.subNav li {
	display: inline;
	padding: 0 10px;
	border-right: 1px solid #333;
	vertical-align: top;
}

.subNav li:last-child {
	border-right: none;
}



/* FOOTER --------------------------------------------------------- */

.footer {
	margin-top: 20px;
	padding-top: 20px;
	border-top: dashed 1px #222;
	font-size: .9em;
	position: relative;
	clear: both;
}

.footer p:first-child {
	margin-top: 0px;
}

.footer .column {
	float: left;
	margin-right: 3%;
	padding-top: 32px;
	background-repeat: no-repeat;
}

.footer #contact	{	width: 18%;	background-image: url(../images/Footer_Titles/red/contact.png);
						background-position: top right;	min-width: 135px;	}
.footer #services	{	width: 38%;	background-image: url(../images/Footer_Titles/red/services.png);
						background-position: top left;	min-width: 240px;	}
.footer #navigate	{	width: 13%;	background-image: url(../images/Footer_Titles/red/navigate.png);
						background-position: top right;	min-width: 98px;	}
.footer #byline		{	width: 22%;	background-image: url(../images/Footer_Titles/red/byline.png);
						margin-right:0;	min-width: 139px;	}

.footer .column ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.footer .column li {
	margin: 0;
}

.footer #services>ul>li {
	float: left;
	margin-right: 1em;
}

.footer .column ul ul {
	color: #CCC;
	margin-bottom: .5em;
}

.footer .column ul ul li {
	display: inline;
}

.footer .column ul ul li:after {
	content: ', ';
}

.footer .column ul ul li:last-child:after {
	content: '';
}

.footer #services a, .footer #navigate a {
	color: #fff;
}

.blackLink {
	color: #fff;
	text-decoration: none;
}

.blackLink:hover {
	text-decoration: underline;
}
/* /end FOOTER */


/* Home page feature sections ------------------------------------- */

.largeFeatures {
	width: auto;
	margin: 20px;
	overflow: hidden;
	position: relative;
	white-space: nowrap;
	height: 90%;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

.largeFeatures a {
	margin-right: 10px;
	display: inline-block;
	position: relative;
	height: 100%;
	vertical-align: top;
	white-space: normal;
}

.largeFeatures a:last-child {
	margin-right: 0;
}

.largeFeatures a:first-child img {
	-webkit-border-radius: 8px 0 0 8px;
	-moz-border-radius: 8px 0 0 8px;
	border-radius: 8px 0 0 8px;
}

.largeFeatures a:last-child img {
	-webkit-border-radius: 0 8px 8px 0;
	-moz-border-radius: 0 8px 8px 0;
	border-radius: 0 8px 8px 0;
}

.largeFeatures a>h2, .largeFeatures a>h3, .largeFeatures a>p {
	position: absolute;
}

.largeFeatures a img {
	width: 100%;
	height: auto;
}

/*define relative widths here of images to 880px container*/
.largeFeatures #f1 { /* subtract 3% */
	/* width: 30.22%;	 272px */
	width: 32.7955%;
}
.largeFeatures #f2 {
	/* width: 67.95%;  612px */
	width: 65.7955%;
}
.largeFeatures h1,
.largeFeatures h2,
.largeFeatures h3 {
	margin-bottom: 0;
}


/* position link text */
.largeFeatures #f1 h2 {
	top: 10px;
	left: 10px;
	text-align: left;
	width: 75%;
	line-height: 1.25em;
	text-shadow: 1px 1px 4px #fff;
}

.largeFeatures #f2 h2 {
	top: 10px;
	right: 10px;
	text-align: right;
	line-height: 1.25em;
	text-shadow: 1px 1px 4px #fff;
}

.largeFeatures #f2 h3 {
	bottom: 10px;
	right: 10px;
	text-align: right;
	line-height: 1.25em;
	text-shadow: 1px 1px 4px #fff;
}


/* sub features ---------------------------------------------- */

.subFeatures {
	height: auto;
	color: white;
	font-size: .75em;
	line-height: 1.5em;
	clear: both;
	display: block;
	margin-bottom: 20px;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.subFeatures h3 {
	font-size: 1.5em;
}

/*
 * sub features need to be surrounded by two DIV elements which is used in combination
 * with box-sizing: border-box, padding on the outer div, to replicate margins, to make
 * sure each box only takes up exactly one third of the total page width.
 */
 
.subFeatures>div {
	padding-right: 5px;
	float: left;
	width: 33.3%;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.subFeatures>div:last-child {
	padding-right: 0;
}

.subFeatures>div>div {
	background-color: #161a1d;
	min-height: 128px; /* probably need to change this when updating images or text */
	padding: 10px;
	border: 1px solid #333;
	-moz-box-shadow: inset 0 0 1px 1px #000;
	-webkit-box-shadow: inset 0 0 1px 1px #000;
	box-shadow: inset 0 0 1px 1px #000;
	position: relative;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.subFeatures>div:last-child>div {
	-webkit-border-radius: 0 8px 8px 0;
	-moz-border-radius: 0 8px 8px 0;
	border-radius: 0 8px 8px 0;
}

.subFeatures>div:first-child>div {
	-webkit-border-radius: 8px 0 0 8px;
	-moz-border-radius: 8px 0 0 8px;
	border-radius: 8px 0 0 8px;
}

.subFeatures>div img {
	float: left;
	margin-right: 10px;
	height: 120px;
	width: auto;
}
	
/* small feature links and sections ---------------------------------------- */

.smallFeature {
	text-decoration: none;
	font-size: 1em;
	line-height: 1.75em;
	position: relative;
	display: inline-block;
	max-width: 207px;
	overflow: hidden;
}

.smallFeature img {
	border: none;
	width: 100%;
}

.smallFeature:hover {
	text-decoration: none;
}

.smallFeature>span {
	position: absolute;
}

.smallFeature>span span {
	display: block;
	white-space: nowrap;
}

.smallFeature>span span+span {
	font-family: "chunk-1", "chunk-2", "Times New Roman Bold", "Georgia Bold", "Arial Black", serif;
	font-size: 1.4em;
}

/* Article Aside */
.aside {
	width: 25%;
	min-height: 34em;
	height: 100%;
	float: right;
	border-left: dashed 1px #222;
	margin-left: 20px;
	margin-bottom: 20px;
	padding-left: 20px;
}

.aside h1, .aside h2, .aside h3 {
	text-align: center;
}











/* Individual page content layouts -------------------------------------- */

/* Homepage */

	/* header */
	#Home .punch { width: auto; }
	#Home .topNav { margin-top: 26px; }
	#Home .header h1 { padding-top: 50px; }
	
	#Home p.classes-note {
		margin-top: 33px;
	}
	
.sponsorLogos {
	border-top: dashed 1px #222;
	margin-top: 20px;
	padding-top: 20px;
	text-align: center;
	clear: both;
}

.sponsorLogos img {
	width: 10%;
	height: auto;
	margin: 0 2.1%;
	vertical-align: middle;
}

.sponsorLogos a {
	opacity: .85;
}

.sponsorLogos a:hover, .sponsorLogos a:focus {
	opacity: 1;
}

#CompleteBody {
	width: 120px;
	text-align: center;
	font-size: 10px;
	line-height: 12px;
}

#CompleteBody img {
	width: 120px;
}

#Home .events {
	float: left;
	border-right: dashed 1px #222;
	margin-right: 20px;
	margin-bottom: 20px;
	width: 50%;
}

.events .date {
	float: right;
	font-weight: bold;
}

/* Contact Page*/
#contact-area {
	width: 70%;
	margin-top: 25px;
}

#contact-area input, #contact-area textarea {
	padding: 5px;
	width: 70%;
	font-family: Helvetica, sans-serif;
	font-size: 1.4em;
	margin: 0px 0px 10px 0px;
	border: 2px solid #666;
	background-color: rgba(255,255,255,.85);
}

#contact-area input[name="realname"], #contact-area input[name="Phone"], #contact-area input[name="email"], #contact-area input[name="fullname"] {
	width: 50%;
	margin-right:20%;
}

#contact-area textarea {
	height: 90px;
}

#contact-area textarea:focus, #contact-area input:focus, #contact-area input.submit-button:hover {
	border: 2px solid #900000;
	outline: none;
	background: white;
}

#contact-area input.submit-button {
	width: 100px;
	float: right;
	margin-right: 10%;
	background-color: #d6dbe3; /* fallback */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(187,187,187,.15)), to(rgba(187,187,187,.15)), color-stop(.5,rgba(0,0,0,.15))), url(../images/template/light_blue_noise.png); /* for safari */
	background: -moz-linear-gradient(0% 100% 90deg, rgba(187,187,187,.15), rgba(0,0,0,.15), rgba(187,187,187,.15) 100%),  url(../images/template/light_blue_noise.png); /* for firefox */
	border: 2px solid #ccc;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-moz-box-shadow: inset 0 0 1px 1px #fff;
	-webkit-box-shadow: inset 0 0 1px 1px #fff;
	box-shadow: inset 0 0 1px 1px #fff;
	text-shadow: 1px 1px 2px #fff;
	line-height: 1.2em;
	vertical-align: middle;
}

label {
	float: left;
	text-align: right;
	margin-right: 15px;
	width: 100px;
	padding-top: 5px;
	font-size: 1.4em;
}

#human, .human {  
	visibility:hidden;  
	display:none;  
} 

/* References and Links */

#clientList li img {
	max-height: 140px;
	height: auto;
	max-width: 180px;
	width: auto;
	vertical-align: top;
	border: none;
}

#clientList li {
	position: relative;
	padding: 8px;
	min-height: 18px;
	vertical-align: middle;
	border-bottom: dashed 1px #222;
}

#clientList li:hover {
	border-bottom: dashed 1px #666;
}

#clientList li > span {
	position: absolute;
	left: 8px;
	width: 50%;
	text-align: left;
}

#clientList {
	text-align: right;
	list-style-type: none;
	padding-left: 0;
	
}

.comments {
	list-style: none;
	padding: 0;
}

.comments li {
	margin: 32px 0px;
	line-height: 32px;
}

.lQuote {
	font-size: 60px;
	line-height: 10px;
	color: #999;
	vertical-align: -26px;
}

/* Video Page */
a.vidThumb {
	width: 33.1%; /* TEMP */
	min-width: 200px;
	display: block;
	padding: 4px;
	text-align: center;
	float: left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.vidThumb.large {
	width: 61.9%;
}

.vidThumb img {
	width: 100%;
	padding-bottom: 4px;
	display: block;
}

.video {
	display: none;
}

#facebox .video {
	display: block;
}

.two-column {
	-moz-column-count: 2;
	-moz-column-gap: 1em;
	-webkit-column-count: 2;
	-webkit-column-gap: 1em;
	column-count: 2;
	column-gap: 1em;
}


/* schedules */
.week .class {
	background-color: #1B3946;
	margin: .2em -.4em;
	padding: 0 .4em;
}
	

/* /end Individual page content layouts */


/* getting started email only signup */
#contact-area.email-only {
	width: auto;
	margin-top: 0;
}

#contact-area.email-only input {
	font-size: 1em;
}

#contact-area.email-only input[name="email"] {
	width: 65%;
	margin-right: 0;
}

#contact-area.email-only input.submit-button {
	width: 4em;
	margin-right: 0;
}



/* Group classes and Semi Private Instruction pages alternative Header */

body.altHeader h1,
.altHeader .red,
.altHeader .classes-note {
	visibility: hidden;
}

.altHeader .topNav {
	margin: 25px 0 20px;
}

.JWS-header {
	position: absolute;
	left: 1em; right: 1em;
	top: 1em;
	z-index: 1000;
	
	font-size: .95em;
	line-height: 1.5em;
	text-align: center;
}
.JWS-header .logo {
	width: 34.105em;
	height: auto;
}
.JWS-header h4 {
	color: #900;
	display: inline;
}



/* new clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */



/*- MEDIA QUERY  layouts smaller than 750px and mobiles 
----------------------------------------------------------------------*/

@media screen and (max-device-width: 750px), screen and (max-width: 750px) {
	/* layouts smaller than 750px and mobiles */
}

/*- MEDIA QUERY  layouts smaller than 480px and mobiles 
----------------------------------------------------------------------*/

@media screen and (max-device-width: 480px), screen and (max-width: 480px) {
	/* layouts smaller than 480px and mobiles */
	
}