/* =========================
taichikimkc.com

Author: Tim White
Copyright: 2013 (March)
Ver: 1

Preliminary styles for tai chi website

============================*/

/*=======================

1.ROOT
2.HEADINGS
3.TYPOGRAPHY
4.LINKS
5.FIGURES & IMAGES
6.TABLES
7.FORMS (See css/mylibs/forms.css)
8.BANNER header[role="banner"]
9.NAVIGATION nav[role="navigation"]
10.CONTENT
11.MAIN div[role="main"]
12.COMPLIMENTARY div[role="complementary"]
13.CONTENTINFO footer[role="contentinfo"]
14.GLOBAL OBJECTS
15.VENDOR-SPECIFIC
16.TEMPLATE SPECIFICS
17.MODERNIZR



3:17pm
John Boissy
CSS3 inner-shadow: #e5d2c4
body background color: #f5f5f5

Red: #4A1200

========================*/

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 17, 2013 08:59:12 PM America/New_York */

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

@scroll-timeline parallax {
	scroll-offsets: 0, 100vh;
}

/* 1. ROOT */
html {
	scroll-behavior: smooth;
}

body {
	font: 100%/1.6 helvetica, arial;
	color: #4f4f4f;
	background-color: #491200;
    /* background-image: linear-gradient(to bottom, rgba(74,19,0,0), rgba(255,255,255,.1)),url('../images/bkg-taichipatt-clr.gif'); */
	background: #491200 url('../images/bkg-taichipatt-clr.gif') left 0vh fixed;
	margin: 0;
	padding: 0 1rem;
	animation: 1s scroll-bg linear;
	animation-timeline: parallax;
	}

@supports (animation-timeline: works) {
	@keyframes scroll-bg {
		to {
			background-position: left -100vh;
		}
	}
}

/* 2. HEADINGS */
h1,
h2,
h3,
h4 {
	margin: 0;
	line-height: 1.2;
	font: bold 1rem/1.2 ChantelliAntiquaRegular;
	}


h1#top {
	font-size: 1.375rem;
	line-height: 1.5;
}

h1, .h1 {
	font-size: 1.375rem;
	line-height: 1.4;
	}

h2, .h2 {
	font-size: 1.25rem;
}

h1 + *,
h2 + *,
h3 + * {
	margin-block-start: .5em;
}

h1 + h2,
h2 + h3 {
	margin-block-start: 1em;
}

/* 3. TYPOGRAPHY */
p, dt, dd {max-width: 50em;}
ul {
	margin: 1em 0 1em 1.25em;
	padding: 0;
	}

ul + *,
h1 + *,
h2 + * {margin-block-start: .25rem}

dt {
	font-weight: bold;
}
dd {
	margin: 0 0 .5rem 0;
}

/* 4. LINKS */
a:link,
a:visited {
	color: #4A1200;
}

a:hover,
a:active,
a:focus {
	color: #888;
}

.return:before {content: "["}
.return:after {content: "]"}

/* 9. NAV */
nav {text-align: left; margin: 1em 0}

nav li{
	display: inline-block;
	margin: 0 1em 10px 0;
	}

/* 10. CONTENT */

section#content {
	background: #fff url('../images/content-background.jpg') left top repeat-x;
	padding: 0 18px;
	}

#content article:first-of-type {margin-block-start: 0; }

/* 11. MAIN [role="main"] */
[role="main"]{
	max-width: 960px;
	margin: 1em auto;
	background-image:
		url('../images/top-tearstrip.png') left top repeat-x,
		url('../images/btm-tearstrip.png') left bottom repeat-x,
		url('../images/content-background.jpg') left 18px repeat-x;
}


[role="main"] > header {
	background:
			url('../images/top-tearstrip.png') left top repeat-x,
			url('../images/content-background.jpg') left 18px repeat-x;
	overflow: auto;
	padding: 18px 10px 0;
	border-block-end: 1px solid #4A1200;
}

[role="main"] > footer {
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 95%,rgba(255,255,255,0) 100%), url('../images/btm-tearstrip.png'); /* W3C */
	background-repeat: repeat-x;
	background-position: left bottom;
	min-height: 2em;
	margin-block-start: -4em;
	padding: 18px 10px;
}

article {
	margin: 1em 0;
	padding: 1em 0 3em;
	border: solid #4A1200;
	border-width: 0 0 1px;
	overflow: auto;
}


/* Location Styles */

.location {
	box-sizing: border-box;
	margin-block-end: 1em;
	padding-block-start: 10px;
	border-block-start: 1px solid #ddd;
}


.location__name,
.location__address,
.location__phone,
.location__web,
.location__email {
	display: block;
}

/* 14. GLOBAL OBJECTS */

/* Hide visually */
.visuallyhidden {
position : absolute;
clip : rect(0 0 0 0);
overflow : hidden;
margin: -1px;
padding : 0;
height : 1px;
width : 1px;
border : 0; }

/* Allow an element to be focusable via keyboard  */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
position : static;
clip : auto;
overflow : visible;
height : auto;
margin : 0;
width : auto; }


/*
	TODO : Organize the following
*/
#schedule {
	/*border: 1px solid #888;
	padding: 10px;*/
}



table {
	border-collapse: collapse;
	margin: 1em 0 1.5em;
}

th {
	text-align: left;
	vertical-align: top;
	font-size: .95rem;
	padding: 10px 2px;
}
td {
	vertical-align: top;
	padding: 10px 2px;
	font-size: .9rem;
	border-block-end: 1px dotted #666;
}

tr:hover td {
	background: #ccc;
	color: #222;
}

thead {
	background: #ccc;
}

thead th:first-of-type {background: transparent;}
thead th {
	border: solid #fff;
	border-width: 0 1px;
	padding: 0 5px;
}


tbody {border: 1px solid #ddd; border-width: 1px 0;}

caption {text-align: left;}
.scheduleTable caption {
	font-weight: bold;
	font-family: ChantelliAntiquaRegular;
	font-size: 1.1rem;
}

.scheduleTable td:nth-child(2) {font-weight: bold;}
.scheduleTable th[colspan] {padding: 1rem 0 .25rem;}

.scheduleTable th, .scheduleTable td {
	display: block;
	border: none;
	/*padding: 2px;*/
}
.scheduleTable thead tr {display: none;}
col.day, col.time, col.class, col.description {
	width: auto;
}
.clean {margin: 0; padding: 0; list-style: none;}

@media only screen and (max-width: 480px) {
	.container_12 .grid_6 {
		float: none;
		display: block;
		width: 100%;
	}
}
@media only screen and (min-width: 481px) {
	body {line-height: 1.4;}

	h1#top {
		font-size: 1.25rem;
		line-height: 1.5;
	}

	h1, .h1 {
		font-size: 1.25rem;
		line-height: 1.4;
		}

	h2, .h2 {
		font-size: 1.125rem;
	}

	td {
		padding: 15px;
		border-block-end: 1px dotted #666;
	}

	.scheduleTable th, .scheduleTable td {
		display: table-cell;
		border: none;
		/*padding: 2px;*/
	}
	.scheduleTable thead tr {display: table-row;}
	col.day {width: 10%;}
	col.time {width: 20%;}
	col.class {width: 25%;}
	col.description {width: 45%;}
}

@media only screen and (min-width: 600px) {
	body {line-height: 1.5;}
	nav a:link, nav a:visited {
		color: #F5F5F5;
		text-decoration: none;
		letter-spacing: 1px;
		display: block;
		padding: 5px 10px;
		background: #621800;
		border-radius: 20px 3px;
		transition: all .25s ease-in-out;
		}

	nav a:hover {
		text-decoration: underline;
		border-radius: 3px;
	}


}

@media only screen and (min-width: 768px) {
	body {line-height: 1.6;}
	h1#top {
		font-size: 2rem;
		margin: .5em 0;
		color: #4A1200;
		}

	h1, .h1 {
		font-size: 1.5rem;
		line-height: 1;
		}

	h2, .h2 {
		font-size: 1.25rem;
	}

}


/*
	Variable Grid System (Fluid Version).
	Learn more ~ http://www.spry-soft.com/grids/
	Based on 960 Grid System - http://960.gs/ & 960 Fluid - http://www.designinfluences.com/

	Licensed under GPL and MIT.
*/


/* Containers
----------------------------------------------------------------------------------------------------*/
.container_12 {
	width: 92%;
	margin-left: 4%;
	margin-right: 4%;
}

/* Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 1%;
	margin-right: 1%;
}

/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
	margin-left: 0;
}

.omega {
	margin-right: 0;
}

/* Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/


.container_12 .grid_1 {
	width:6.333%;
}

.container_12 .grid_2 {
	width:14.667%;
}

.container_12 .grid_3 {
	width:23.0%;
}

.container_12 .grid_4 {
	width:31.333%;
}

.container_12 .grid_5 {
	width:39.667%;
}

.container_12 .grid_6 {
	width:48.0%;
}

.container_12 .grid_7 {
	width:56.333%;
}

.container_12 .grid_8 {
	width:64.667%;
}

.container_12 .grid_9 {
	width:73.0%;
}

.container_12 .grid_10 {
	width:81.333%;
}

.container_12 .grid_11 {
	width:89.667%;
}

.container_12 .grid_12 {
	width:98.0%;
}



/* Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/


.container_12 .prefix_1 {
	padding-left:8.333%;
}

.container_12 .prefix_2 {
	padding-left:16.667%;
}

.container_12 .prefix_3 {
	padding-left:25.0%;
}

.container_12 .prefix_4 {
	padding-left:33.333%;
}

.container_12 .prefix_5 {
	padding-left:41.667%;
}

.container_12 .prefix_6 {
	padding-left:50.0%;
}

.container_12 .prefix_7 {
	padding-left:58.333%;
}

.container_12 .prefix_8 {
	padding-left:66.667%;
}

.container_12 .prefix_9 {
	padding-left:75.0%;
}

.container_12 .prefix_10 {
	padding-left:83.333%;
}

.container_12 .prefix_11 {
	padding-left:91.667%;
}



/* Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/


.container_12 .suffix_1 {
	padding-right:8.333%;
}

.container_12 .suffix_2 {
	padding-right:16.667%;
}

.container_12 .suffix_3 {
	padding-right:25.0%;
}

.container_12 .suffix_4 {
	padding-right:33.333%;
}

.container_12 .suffix_5 {
	padding-right:41.667%;
}

.container_12 .suffix_6 {
	padding-right:50.0%;
}

.container_12 .suffix_7 {
	padding-right:58.333%;
}

.container_12 .suffix_8 {
	padding-right:66.667%;
}

.container_12 .suffix_9 {
	padding-right:75.0%;
}

.container_12 .suffix_10 {
	padding-right:83.333%;
}

.container_12 .suffix_11 {
	padding-right:91.667%;
}



/* Push Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/


.container_12 .push_1 {
	left:8.333%;
}

.container_12 .push_2 {
	left:16.667%;
}

.container_12 .push_3 {
	left:25.0%;
}

.container_12 .push_4 {
	left:33.333%;
}

.container_12 .push_5 {
	left:41.667%;
}

.container_12 .push_6 {
	left:50.0%;
}

.container_12 .push_7 {
	left:58.333%;
}

.container_12 .push_8 {
	left:66.667%;
}

.container_12 .push_9 {
	left:75.0%;
}

.container_12 .push_10 {
	left:83.333%;
}

.container_12 .push_11 {
	left:91.667%;
}



/* Pull Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/


.container_12 .pull_1 {
	left:-8.333%;
}

.container_12 .pull_2 {
	left:-16.667%;
}

.container_12 .pull_3 {
	left:-25.0%;
}

.container_12 .pull_4 {
	left:-33.333%;
}

.container_12 .pull_5 {
	left:-41.667%;
}

.container_12 .pull_6 {
	left:-50.0%;
}

.container_12 .pull_7 {
	left:-58.333%;
}

.container_12 .pull_8 {
	left:-66.667%;
}

.container_12 .pull_9 {
	left:-75.0%;
}

.container_12 .pull_10 {
	left:-83.333%;
}

.container_12 .pull_11 {
	left:-91.667%;
}




/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}