/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
body { 
	font-family:Georgia, cursive; 
	font-size:62.5%;
	color:#484438;
	color:#524C42;
}
ul { 
	padding:0;
}
ol { 
	xpadding:1em;
	font-size: 2em;
}
	ol li {
		line-height:0.6em;
		padding-bottom:0.6em;
	}
	ol li span {
		font-size: 0.5em;
	}

.touch-nav:after {
	content:" \25BD";
}			
.to-top:after {
	content:" \25B3";
}			
.touch-nav {
	display:inline-block;
	padding: 4px 14px;
	font-style:italic;
	font-size:1.5em;
	text-decoration:none;
	color:#fff;
	background:#524C42;
}
	.touch-nav:hover {
		color:#524C42;
		background:#b8e600;
	}
/*lighter B2AFA5*/
/*darker 524C42*/
/*hover b8e600*/
header {
	border-top: 10px solid #B2AFA5;
	margin-bottom:10px;
	padding:0 10px 10px 18px;
	overflow:hidden;
}
	header h1 a {
		font-family:'Prata', Georgia, serif;
		font-style:italic;
		font-weight:normal;
		font-size:3em;
		line-height:1em;
		text-decoration:none;
		text-transform:lowercase;
		color:#B2AFA5;	
	}
	header .intro {
		margin-top:1.8em;
	}
		header .intro p {
			float:left;
			font-size:1.9em;
			color:#B2AFA5;
		}
			
	header .menu { 
		padding-top:1em;
	}
		header .menu ul li {
			list-style:none;
			font-size:1.9em;
			color:#B2AFA5;
		}	
			header .menu ul li a {
				padding:0 4px 2px;
				text-decoration:none;
				color:#fff;
				font-style:italic;
				background-color:#B2AFA5;
			}	
				header .menu ul li a:hover {
					background-color:#b8e600;
				}	
				
footer {
	background:#B2AFA5;
}
	footer p {
		margin:0;
		padding:0.8em 10px 0.8em 18px;
		font-size:1.3em;
		color:#fff;
	}
		footer p a {
			color:#fff;
		}
			footer p a:hover {
				color:#b8e600;
			}
			
	footer .touch-nav {
		display:block;
		padding-left:18px;
	}
			
/* main page content */
#main-content {
	clear:both;
	overflow:hidden;
	padding:0 10px 30px;
}
#now, #then {
	padding-top: 4em;
	border-top: 1px solid #B2AFA5;
}
#make, #share, #show {
	margin-top:2em;
	border-top:1px solid #B2AFA5;
}

#main-content h2 {
	margin:0 0 1.1em;
	font-family:'Prata', Georgia, cursive;
	font-weight:bold;
	font-size:2.4em;
	line-height:1.2;
	text-transform:uppercase;
}
	#main-content #now h2, 
	#main-content #then h2 {
		margin-bottom:1em;
		padding-left:14px;
	}
	#main-content #make h2, 
	#main-content #show h2, 
	#main-content #share h2 {
		margin-top:1em;
		padding-bottom:1em;
		padding-left:14px;
		border-bottom:1px solid #B2AFA5;
	}
	#main-content #make h2 {
		margin-bottom:0;
	}
		#main-content h2 a {
			font-size:1em;
			text-decoration:none;
			color:#524C42;
		}
			#main-content h2 a:hover {
				color:#b8e600;
			}
		#main-content h2 a span:after {
			content:" \00BB";
		}
			#main-content h2 a span {
				margin-left:10px;
				text-transform:lowercase;
				font-style:italic;
				font-weight:normal;
				font-size:0.7em;
			}
	
#make label.date, 
#share label.date, 
#show label.date {
	display: inline-block;
	margin: 14px;
	font-size: 2em;
}
	
#main-content p a, 
#main-content li a {
	color:#524C42;
}	
	#main-content p a:hover, 
	#main-content li a:hover {
		color:#b8e600;
	}
	
ul.breadcrumbs {
	width:100%;
	overflow:hidden;
	padding:0;
	margin-left:14px;
	list-style:none;
}
	ul.breadcrumbs li {
		float:left;
		padding-right:0.5em;
		margin-bottom:10px;
		font-size:1.5em;
		color:#B2AFA5;
	}
		ul.breadcrumbs li a {
			color:#B2AFA5;
		}
			ul.breadcrumbs li a:hover {
				color:#b8e600;
			}
	
div.item {
	margin:0 14px;
}
		
#main-content div.item h1 {
	margin:0 0 0.4em;
	font-size:6em;
	line-height:1.2;
}

#main-content div.item h2 {
	margin:1.2em 0 0.8em;
	text-transform:none;
}
div.item h3 {
	margin:0.8em 0 0;
	font-size:1.5em;
}
div.item p, 
div.item li {
	margin-top:0;
	font-size:1.5em;
}
	div.item label.date, 
	#main-content div.item h3.divider {
		display:block;
		margin:2.4em 0 0;
		padding:0.4em 0 0.6em;
		color:#B2AFA5;
		border-top:1px solid #B2AFA5;
	}
	div.item label.date {
		font-size:1.3em;
	}

	div.item li strong, 
	div.item p strong {
		font-weight:bold;
	}
	div.item li em, 
	div.item p em {
		font-style:italic;
	}
		div.item li a {
			text-decoration:underline;
		}
			div.item li a:hover {
				color:#000;
			}
		
	div.item img {
		border:1px solid #B2AFA5;
	}
	div.item ul {
		list-style:square;
		margin-bottom:2em;
		padding-left:20px;
	}
		div.item ul.image-list {
			width:100%;
			overflow:hidden;
			margin:0;
			padding:0 0 21px;
			list-style:none;
		}
			div.item ul.image-list li {
				display:inline;
				float:left;
				margin-right:-1px;
				margin-bottom:-1px;
				background:#B2AFA5;
			}
				div.item ul.image-list li img {
					display:block;
				}
				div.item ul.image-list li strong { 
					display:inline-block;
					float:left;
					min-height:22px;
					padding:8px 14px 6px;
					font-weight:normal;
					font-style:italic;
					letter-spacing:1px;
					xline-height:1.2;
					color:#fff;
				}

/* table styles - agenda/planning */
table {
	margin-bottom:2em;
	font-size:1.3em;
	line-height:1.4;
}
	table tr { text-align:left; }
		table tr th, 
		table tr td {
			padding:5px;
			border:1px solid #B2AFA5;
		}
		table tr th {
			font-weight:bold;
		}
		/*table tr td {
			padding:5px 0;
		}*/
			table thead tr th {
				background:#B2AFA5;
				color:#fff;				
			}
			table tr.workshop th, 
			table tr.workshop td {
				background:#f66 url(../img/dia.gif);
			}
			table tr.this-week th, 
			table tr.this-week td {
				background-color:#ad4;
			}
			table tr.last-week th, 
			table tr.last-week td {
				background:#daa;
				color:#fff;
			}
				#main-content table td ul {
					margin:0;
					width:85%;
					font-size:0.85em;				
				}
					table tr.workshop td ul li {
						background:#fff;
					}
			table tr td a {
				text-decoration:underline;
				color:#524C42;
			}
				table tr td a:hover {
					color:#b8e600;
				}
		span.done {
			text-decoration:line-through;
		}
	
/* jQuery lightBox plugin - Gallery style */
#gallery {
	width:100%;
	overflow:hidden;
	padding-bottom:2px;
	margin-bottom:1em;
}
	#gallery ul { 
		width:100%;
		list-style:none; 
		padding:0 0 0 1px;
	}
		#gallery ul li { 
			height:150px;
			display:inline; 
			float:left;
			margin:0 0 0 -1px;
		}
			#gallery ul a:hover {
				opacity:0.7;
			}

	
/* list on homepages */
ul.items { 
	margin:0;
}
	ul.items li {
		width:100%;
		overflow:hidden;
		padding-bottom:2em;
	}
	#now ul.items li,
	#then ul.items li {
		width:100%;
		max-width:300px;
		padding-bottom:6em;
	}
		ul.items li img {
			float:left;
			margin:0 8px 3px 0;
			border-left:8px solid #26241f;
		}
			ul.items li a:hover img {
				border-left-color:#b8e600;
			}
			/* see below for js-enabled hover */
			
		#now ul.items li img, 
		#then ul.items li img {
			width:100%;
			margin:0 0 14px;
		}

		ul.items li div.panel {
			display:inline-block;
			width:100%;
		}
			ul.items li div.more-info {
			}
				ul.items li div.more-info h3 {		
					display:block;
					margin:0 0 0.5em 14px;
					font-style:italic;
					font-size:1.6em;
					line-height:1;
					letter-spacing:0.04em;
				}
					#main-content ul.items li div.more-info h3 a {
						text-decoration:none;
						color:#524C42;
					}	
						#main-content ul.items li div.more-info h3 a:hover {
							color:#b8e600;
						}
					#now ul.items li div.more-info h3, 
					#then ul.items li div.more-info h3 {	
						clear:left;
						padding: 0.4em 0 0.2em;	
						font-size:2em;
						letter-spacing:0.06em;
					}
				ul.items li div.more-info p {
					margin:0 0 0 14px;
					font-size:1.3em;
				}
						#now ul.items li div.more-info p, 
						#then ul.items li div.more-info p {
							margin-bottom:1em;
							font-size:1.5em;
						}
				
					#main-content ul.items li div.more-info li {
						display:inline;
						width:auto;
						margin:0;
						border:none;
					}
						ul.items li div.more-info a.more:after {
							content:" \00BB";
						}
						ul.items li div.more-info a.more {
							display:inline-block;
							padding: 4px 14px;
							font-family:'Prata', Georgia, cursive;
							font-style:italic;
							font-size:1.3em;
							color:#524C42;
						}
							ul.items li div.more-info a.more:hover {
								color:#b8e600;
								background:#524C42;
							}


/* lists on sub-pages*/
#make {
	margin-bottom:8em;
}
#share, #show {
	margin-bottom:8em;
	border-bottom:0;
}

#make ul.items,
#share ul.items, 
#show ul.items {
		border-bottom:1px solid #B2AFA5;
}
	#share ul.items li, 
	#show ul.items li {
		width: 100%; 	
		margin-bottom:2.6em;
		padding-bottom: 2.6em; 
		border-bottom:1px solid #B2AFA5;
	}
		#make ul.items li h3 {
			clear: left;
		}
		#share li img, 
		#show ul.items li img {
			width: 100px;
		}
		#make ul.items li img {
			margin-bottom: 1em;
		}
		#share ul.items li a, 
		#show ul.items li a { }

			
a.see-more:after {
	content:" \00BB";
}
a.see-more {
	clear:both;
	display:block;
	width:94%;
	margin-bottom: 1em;
	padding: 4px 6px;
	font-style:italic;
	font-size:1.5em;
	text-decoration:none;
	color:#fff;
	background:#999;
}
	a.see-more:hover {
		color:#524C42;
		background:#b8e600;
	}
/** end list on homepage **/


.twitter-timeline {
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

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

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 45em) {
	/* was 35em */
    /* Style adjustments for viewports that meet the condition */

.touch-nav {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

body { 
	position:relative; 
}
footer {
	width:72%;
	position:absolute;
	bottom:0;
	padding:0 14%;
}
	.home footer {
		position:static;
	}

footer p {
	margin-left: 14px;
	padding:0.8em 3%;
}

header {
	padding:0 16% 10px 16%;
}
	header h1 a {
		float:left;
		margin-left: 14px;
		font-size:5em;
	}
	header .intro {
		float:left;
		width:50%;
	}
		header .intro p {
			margin-left: 14px;
		}
		header .intro p span.one-word {
			white-space:nowrap;
		}
		
	header .menu {
		float:right;
	}	
		header .menu ul {
		}	
			header .menu ul li {
				text-align:right;
			}	
		

#main-content {
	padding:0 16% 40px 16%;
}

div.item {
	width:68%;
	min-width:46%;
}

/* two sections */
#now, #then {
	width:100%;
	overflow:hidden;
}
	#now ul.items, 
	#then ul.items {
		width:100%;
		overflow:hidden;
		padding-bottom:1.2em;
	}
		#now ul.items li, 
		#then ul.items li {
			width:47%;
			max-width:100%;
			float:left;
			margin: 0 2% 0 0;
			border:none;
		}

	#make ul.items, 
	#share ul.items, 
	#show ul.items {
	}
		#make ul.items li, 
		#share ul.items li, 
		#show ul.items li {
			display: inline-block;
			vertical-align: top;
			width:44.5%;
			margin-right:5%;
			margin-top:0;
			border:none;
		}
		#share ul.items li, 
		#show ul.items li {
			display: inline-block;
			vertical-align: top;
			width:48.5%;
			margin-right:1%;
			margin-top:0;
			border:none;
		}
			#make ul.items li img {
				margin-bottom: 1em;
			}

}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}