/*
 * #01 - Columns
 * #02 - Sections
 * #03 - Lists
 * #04 - Forms
 * #05 - Tables
 * #06 - Other
 */

/* #01 - COLUMNS **************************************************************/

/* MAIN */

#wrapper .col-a,
#wrapper .col-a-half,
#wrapper .col-a-wide {
	float: left;
	width: 372px;
	margin-left: 108px;
}
#wrapper .col-a-half { width: 345px; }
#wrapper .col-a-wide { width: 426px; }

#wrapper .col-b,
#wrapper .col-b-half,
#wrapper .col-b-narrow {
	float: right;
	width: 318px;
	margin-right: 108px;
}
#wrapper .col-b-half { width: 345px; }
#wrapper .col-b-narrow { width: 264px; }

#wrapper .contentbox-wide .col-l { float: left; width: 324px; }
#wrapper .contentbox-wide .col-r { float: right; width: 324px; }

#wrapper .contentbox-wide .col-a { float: left; width: 224px; margin-left: 0; }
#wrapper .contentbox-wide .col-bc { float: right; width: 448px; }
#wrapper .contentbox-wide .col-b { float: left; width: 224px; margin-right: 0; /* overriding another style */ }
#wrapper .contentbox-wide .col-c { float: right;  width: 224px; }

/* PAGE NAV + SOCIAL ICONS */

div.wrapper-top { margin-bottom: 60px; overflow: hidden; /* contain floats */ }
body#index div.wrapper-top,
body#possibilities div.wrapper-top,
body#studio div.wrapper-top,
body#contact div.wrapper-top,
body#thanks div.wrapper-top { margin-bottom: 0 }

.wrapper-top .wrapper-top-r {
	float: right;
	width: 885px;
	overflow: hidden; /* contain floats */
}

div.wrapper-top .fb-col,
div.wrapper-top .twitter-col {
	float: left;
	width: 75px;
	height: 75px;
}
div.wrapper-top .twitter-col { float: right; }

/* FOOTER */

#inner-footer-bottom .col-a {
	float: left;
	width: 307px;
	margin-left: 12px;
	text-align: left;
}
#inner-footer-bottom .col-bc {
	float: right;
	width: 640px;
}
#inner-footer-bottom .col-b {
	float: left;
	width: 320px;
}
#inner-footer-bottom .col-c {
	float: right;
	width: 308px;
	text-align: right;
	margin-right: 12px;
}

/* #02 - SECTIONS *************************************************************/

/* PAGE NAV */

div#page-nav {
	float: left;
	width: 680px; /* typically overwritten below */
	margin: 36px 0 0 0; /* margin-left will be set per group, below */
	overflow: hidden; /* contain floats */
}
div#page-nav a {
	display: block;
	float: left;
	width: 173px; /* default */
	height: 40px;
	text-indent: -9999px;
	overflow: hidden;
	background: transparent url('//www.kifitness.ca/images/layout/page-nav2.gif') 0 0 no-repeat;
}
/* Override .wrapper-top positioning for the large page-nav pages */
body#index div#page-nav,
body#possibilities div#page-nav { float: none; margin-left: auto; margin-right: auto; }

/****/ body.grp-about div#page-nav { width: 519px; margin-left: 145px; } /* margin-left is to effectively center page-nav */

div#page-nav a#pn-discovering { background-position: 0 0; }
body#discovering div#page-nav a#pn-discovering { background-position: 0 -40px; cursor: default; }
div#page-nav a#pn-discovering:hover { background-position: 0 -40px; }

div#page-nav a#pn-concepts { background-position: 0 -80px; }
body#concepts div#page-nav a#pn-concepts { background-position: 0 -120px; cursor: default; }
div#page-nav a#pn-concepts:hover { background-position: 0 -120px; }

div#page-nav a#pn-image { background-position: 0 -160px; }
body#image div#page-nav a#pn-image { background-position: 0 -200px; cursor: default; }
div#page-nav a#pn-image:hover { background-position: 0 -200px; }

/****/body.grp-services div#page-nav { width: 718px; margin-left: 46px; } /* margin-left is to effectively center page-nav */

div#page-nav a#pn-possibilities { background-position: 0 -240px; }
body#possibilities div#page-nav a#pn-possibilities { background-position: 0 -280px; cursor: default; }
div#page-nav a#pn-possibilities:hover { background-position: 0 -280px; }

div#page-nav a#pn-training { background-position: 0 -320px; }
body#training div#page-nav a#pn-training { background-position: 0 -360px; cursor: default; }
div#page-nav a#pn-training:hover { background-position: 0 -360px; }

div#page-nav a#pn-yoga { width: 199px; background-position: 0 -400px; }
body#yoga div#page-nav a#pn-yoga { background-position: 0 -440px; cursor: default; }
div#page-nav a#pn-yoga:hover { background-position: 0 -440px; }

div#page-nav a#pn-martial-arts { background-position: 0 -480px; }
body#martial-arts div#page-nav a#pn-martial-arts { background-position: 0 -520px; cursor: default; }
div#page-nav a#pn-martial-arts:hover { background-position: 0 -520px; }

/****/body.grp-rental div#page-nav { width: 545px; margin-left: 132px; } /* margin-left is to effectively center page-nav */

div#page-nav a#pn-sharing { background-position: 0 -560px; }
body#sharing div#page-nav a#pn-sharing { background-position: 0 -600px; cursor: default; }
div#page-nav a#pn-sharing:hover { background-position: 0 -600px; }

div#page-nav a#pn-nishi { background-position: 0 -640px; }
body#nishi div#page-nav a#pn-nishi { background-position: 0 -680px; cursor: default; }
div#page-nav a#pn-nishi:hover { background-position: 0 -680px; }

div#page-nav a#pn-higashi { width: 199px; background-position: 0 -720px; }
body#higashi div#page-nav a#pn-higashi { background-position: 0 -760px; cursor: default; }
div#page-nav a#pn-higashi:hover { background-position: 0 -760px; }

/****/body.grp-community div#page-nav { width: 519px; margin-left: 145px; } /* margin-left is to effectively center page-nav */

div#page-nav a#pn-people { background-position: 0 -800px; }
body#people div#page-nav a#pn-people { background-position: 0 -840px; cursor: default; }
div#page-nav a#pn-people:hover { background-position: 0 -840px; }

div#page-nav a#pn-collective { background-position: 0 -880px; }
body#collective div#page-nav a#pn-collective { background-position: 0 -920px; cursor: default; }
div#page-nav a#pn-collective:hover { background-position: 0 -920px; }

div#page-nav a#pn-friends { background-position: 0 -960px; }
body#friends div#page-nav a#pn-friends { background-position: 0 -1000px; cursor: default; }
div#page-nav a#pn-friends:hover { background-position: 0 -1000px; }

/* PAGE-NAV - INDEX */

/* If this big nav is used anywhere other than these two pages, name it #page-nav-big and change
   the CSS so fewer page-specific rules are required */
body#index div#page-nav, body#possibilities div#page-nav {
	width: 636px;
	margin: 0 auto 60px;
	overflow: hidden; /* contain floats */
}
body#index div#page-nav a, body#possibilities div#page-nav a {
	display: block;
	float: left;
	width: 212px;
	text-indent: 0;
	padding-top: 150px;
	background: transparent url('//www.kifitness.ca/images/layout/page-nav.gif') 0 0 no-repeat;
	text-align: center;
}
body#index div#page-nav a#pn-training:hover,
body#possibilities div#page-nav a#pn-training:hover  { background-position: -212px 0; }
body#index div#page-nav a#pn-yoga,
body#possibilities div#page-nav a#pn-yoga { background-position: -424px 0; }
body#index div#page-nav a#pn-yoga:hover,
body#possibilities div#page-nav a#pn-yoga:hover { background-position: -636px 0; }
body#index div#page-nav a#pn-martial,
body#possibilities div#page-nav a#pn-martial { background-position: -848px 0; }
body#index div#page-nav a#pn-martial:hover,
body#possibilities div#page-nav a#pn-martial:hover { background-position: -1060px 0; }

/* OTHER */

/*
body#index #header-intro { margin-top: 125px; }
#header-intro { margin-top: 154px; }
*/
#header-intro { margin-top: 125px; }

#header-intro p { margin-bottom: 0; }

div.sideline {
	/* browser support for rgba():
	http://css-tricks.com/rgba-browser-support */
	border-left: 12px solid rgb(223,217,202); /* fallback for IE and others */
	border-left: 12px solid rgba(116,94,107,0.1);
	padding-left: 16px;
}
div.sideline-long { padding-bottom: 16px; }

.contentbox {
	/* browser support for rgba():
	http://css-tricks.com/rgba-browser-support */
	background: rgb(223,217,202); /* fallback. IE will use conditional CSS. */
	background: rgba(116,94,107,0.1);
	padding: 18px 32px 12px 32px;
	margin-bottom: 24px;
}
.contentbox-wide { width: 680px; margin-left: 108px; overflow: hidden; /* contain floats, if necessary */ }
.contentbox.photobox { padding: 12px; line-height: 0; }
.arrowbox-left {
	float: left;
	width: 304px;
	height: 90px;
	padding-right: 0;
}
.arrowbox-right {
	float: right;
	/* browser support for rgba():
	http://css-tricks.com/rgba-browser-support */
	border-color: transparent transparent transparent rgb(223,217,202); /* fallback. IE will use conditional CSS. */;
	border-color: transparent transparent transparent rgba(116, 94, 107, 0.1);
	border-style: solid;
	border-width: 60px 0 60px 36px;
	height: 0;
	width: 0;
}

#TB_window div.schema-person { margin-bottom: 24px; }
#TB_window div.person-links { line-height: 2.2em; }

div.links-group { margin-bottom: 64px; }

/* EXPANDED BOX */
div.expanded-box {
	margin: 24px 0 0 0;
	width: 372px; /* col-a */
}

/* FOOTER */

#inner-footer p {
	line-height: 1.3em;
	margin-bottom: 0;
}
#inner-footer p#footer-links {
	line-height: 1.4em;
	margin-bottom: 24px;
}

/* #03 - LISTS ****************************************************************/

#wrapper ul { list-style: none; margin-left: 24px; margin-bottom: 32px; }
#wrapper ul li, #wrapper ul li li {
	background: transparent url('//www.kifitness.ca/images/layout/bullet.png') no-repeat 0 8px;
	padding-left: 20px;
	font-size: 1.1em;
	line-height: 1.8em;
	margin-bottom: 12px;
}
#wrapper ul ul { margin-top: 8px; }
#wrapper div.sideline ul, #wrapper ul.at-left { margin-left: 0; }
#wrapper ul.end-zero { margin-bottom: 0; } /* needs its own specificity */
#wrapper ul li li { font-size: 1.0em; background-image: url('//www.kifitness.ca/images/layout/bullet2.png'); }

#wrapper ul.no-list { margin-left: 0; }
#wrapper ul.no-list li { padding-left: 0; background: none; }

#wrapper div.links-group ul {
	margin-left: 0;
	margin-bottom: 0; 
}
#wrapper div.links-group ul li {
	padding-left: 0;
	background: none;
	margin-bottom: 36px;
}
#wrapper div.links-group ul li.last { margin-bottom: 12px; }

/* #04 - FORMS ****************************************************************/

label {
	display: block;
}

.input-select {
	width: 240px;
	border: none;
	/* browser support for rgba():
	http://css-tricks.com/rgba-browser-support */
	background: rgb(223,217,202); /* fallback. IE will use conditional CSS. */
	background: rgba(116,94,107,0.1);
	height: 25px;
}

.input-text, textarea {
	width: 240px;
	border: none;
	/* browser support for rgba():
	http://css-tricks.com/rgba-browser-support */
	background: rgb(223,217,202); /* fallback. IE will use conditional CSS. */
	background: rgba(116,94,107,0.1);
	height: 25px;
}
textarea { height: 108px; }

.invalid-field, .invalid-select {
	/* browser support for rgba():
	http://css-tricks.com/rgba-browser-support */
	background: rgb(200,179,168); /* fallback. IE will use conditional CSS. */
	background: rgba(137,71,73,0.2);
}

.invalid-select {
	border: 1px solid #733438;
	color: #733438;
}

.errorbox {
	/* browser support for rgba():
	http://css-tricks.com/rgba-browser-support */
	background: rgb(200,179,168); /* fallback. IE will use conditional CSS. */
	background: rgba(137,71,73,0.2);
	width: 216px;
	padding: 6px 12px;
	margin: 12px 0;
	color: #733438;
}

/* #05 - TABLES ***************************************************************/

/* #06 - THICKBOX *************************************************************/

/* STANDARD RULES */

#TB_overlay {
  position: fixed;
  z-index:100;
  top: 0px;
  left: 0px;
  height:100%;
  width:100%;
}
.TB_overlayMacFFBGHack {background: url('//www.kifitness.ca/images/layout/thickbox-mac-ff-bg.png') repeat;}
.TB_overlayBG {
  background-color:#000;
  filter:alpha(opacity=75);
  -moz-opacity: 0.75;
  opacity: 0.75;
}
* html #TB_overlay { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
#TB_window {
  position: fixed;
  background: transparent url('//www.kifitness.ca/images/layout/nonfooter-bg.jpg') 50% 0 repeat-y;
  z-index: 102;
  display:none;
  border: 4px solid #745e6b;
  text-align:left;
  top:50%;
  left:50%;
}
* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#TB_window img#TB_Image {
  display:block;
  margin: 15px 0 0 15px;
  border-right: 1px solid #745e6b;
  border-bottom: 1px solid #745e6b;
  border-top: 1px solid #745e6b;
  border-left: 1px solid #745e6b;
}
#TB_caption{
  height:25px;
  padding:7px 30px 10px 25px;
  float:left;
}
#TB_closeWindow{
  height:25px;
  padding:11px 25px 10px 0;
  float:right;
}
#TB_closeAjaxWindow{
  padding:7px 10px 5px 0;
  margin-bottom:1px;
  text-align:right;
  float:right;
}
#TB_ajaxWindowTitle{
  float:left;
  padding:7px 0 5px 10px;
  margin-bottom:1px;
}
#TB_title{
  background: transparent;
  height: 32px;
}
#TB_ajaxContent{
  clear:both;
  padding:2px 15px 15px 15px;
  overflow: auto;
  text-align:left;
  line-height:1.4em;
}
#TB_ajaxContent.TB_modal{
  padding:15px;
}
#TB_ajaxContent p{
  padding:5px 0px 5px 0px;
}
#TB_load{
  position: fixed;
  display:none;
  height:13px;
  width:208px;
  z-index:103;
  top: 50%;
  left: 50%;
  margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}
* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#TB_HideSelect{
  z-index:99;
  position:fixed;
  top: 0;
  left: 0;
  background-color:#fff;
  border:none;
  filter:alpha(opacity=0);
  -moz-opacity: 0;
  opacity: 0;
  height:100%;
  width:100%;
}
* html #TB_HideSelect { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
#TB_iframeContent{
  clear:both;
  border:none;
  margin-bottom:-1px;
  margin-top:1px;
  _margin-bottom:1px;
}


/* #07 - OTHER ****************************************************************/

a img, a.img-link { border: none; }

.align-l { text-align: left; }
.align-c { text-align: center; }
.align-r { text-align: right; }

.float-l { float: left; }
.float-r { float: right; }
.center { display: block; margin-left: auto; margin-right: auto; }
.section { overflow: hidden; /* contain floats */ clear: both; }

.clear-left { clear: left; }
.clear-both { clear: both; }
.relative { position: relative; } /* sometimes needed for hiding overflow in jquery slide */

.top-zero { margin-top: 0; }
.top-sm { margin-top: 6px; }
.top-med { margin-top: 12px; }
.top-lg { margin-top: 18px; }
.top-xl { margin-top: 24px; }
.top-xxl { margin-top: 36px; }
.top-xxxl { margin-top: 48px; }
.top-xxxxl { margin-top: 60px; }
.top-xxxxxl { margin-top: 72px; }

.end-zero { margin-bottom: 0; }
.end-sm { margin-bottom: 6px; }
.end-med { margin-bottom: 12px; }
.end-lg { margin-bottom: 18px; }
.end-xl { margin-bottom: 24px; }
.end-xxl { margin-bottom: 36px; }
.end-xxxl { margin-bottom: 48px; }
.end-xxxxl { margin-bottom: 60px; }
.end-xxxxxl { margin-bottom: 72px; }

.left-zero { margin-left: 0; }
.left-sm { margin-left: 6px; }
.left-med { margin-left: 12px; }
.left-lg { margin-left: 18px; }
.left-xl { margin-left: 24px; }

.right-zero { margin-right: 0; }
.right-sm { margin-right: 6px; }
.right-med { margin-right: 12px; }
.right-lg { margin-right: 18px; }
.right-xl { margin-right: 24px; }