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

@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700|Open+Sans+Condensed:300,700|Six+Caps);

/*Minified Eric Meyer CSS Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;  font: inherit; 	vertical-align: baseline;} /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;} body {	line-height: 1; } ol, ul { 	list-style: none; }blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}

/* default styling (smartphones) */

body, input, textarea{
	/* background: red; */
	font-family: 'PT Sans', sans-serif;
	font-weight: 300;
	line-height: 1.25;
	font-size: 16px;
}

body{
	padding: 20px 20px;		
}

h1, 
h2, 
h3, 
#main-menu li a{
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: 700;
	text-transform:uppercase;	

}


h1{ font-size: 200% }
h2{ font-size: 150%; }
h3{ font-size: 125%; }

h1, h2, h3, p, nav{
	margin-bottom: 20px;	
}

img.img1{
	max-width: 100%;	
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
	display: block;
}

img.img2{
	max-width: 100%;	
	float: none;
	margin-right: 20px;
	margin-bottom: 20px;
	display: block;
}

p.error{
	background: rgba(255,0,0,0.1);
	color: red;
	padding: 4px 8px;	
}

header h1 a:before{
	font-family: 'Six Caps', sans-serif;
	font-weight: 300;
	content: '01';
	display: block;
	font-size: 300px;
	line-height: 380px;
	letter-spacing: 40px;
	border-top: solid 2px black;	
}

.variables header h1 a:before{
	content: '02';
}

.arrays header h1 a:before{
	content: '03';
}

.conditionals header h1 a:before{
	content: '04';	
}

.loops header h1 a:before{
	content: '05';	
}

.email header h1 a:before{
	content: '06';
}
.sucess header h1 a:before{
	content: '00'; 
}

.php-function header h1 a:before{
	content: '07'; 
}

header h1 a{
	color: black;
	text-decoration: none;
	text-align: left;
	border-bottom: solid 2px black;
	display:block;
}

header h1{
	position: relative;
	padding-bottom: 22px;
}

header h1 a:after{
	content:'';
	display: block;
	height: 20px;
	max-width: 100%;
	width: 400px;
	background:url(../images/stripes.png) repeat-x;
	
	position: absolute;
	left: 0;
	bottom: 0;
}

#main-menu{
	position: fixed;
	
	top: 0;
	right: 0;
	
	
}

#main-menu:target{
		bottom: 0;
		left: 0;
		
		background: #fff;
		
}

	#main-menu ul{
		display: none;
		margin: 20px;
	}
	
	#main-menu:target ul{
		display: block;	
		
		position: relative;
		-webkit-animation: show-menu 2s 1;
		-o-animation: show-menu 2s 1;
		-moz-animation: show-menu 2s 1;
		animation: show-menu 2s 1;
	}
	
	#main-menu li{
		border-bottom: solid 2px black;
	}
	
	#main-menu li:last-child{
		border-bottom: none;
	}
	
	/* regular nav links */
	#main-menu li a{
		display: block;
		text-align: center;
		color: black;
		text-decoration: none;
		font-size: 150%;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	
	/* Show/hide menu link */
	#main-menu > a{
		background:url(../images/icons.png);
		display: block;
		width: 40px;
		height: 40px;
		border: solid 2px black;
		margin-top: 40px;
		margin-left: 20px;
		margin-right: 20px;
	}
	
	#main-menu > a span{
		display: none;	
	}
	
	/* show menu link (when menu is hidden)*/
	#main-menu > a[href="#main-menu"]{
		display: block;
	}
	
	/* hide menu link (when menu is hidden)*/
	#main-menu > a[href="#"]{
		display: none;
	}
	
	/* show menu link (when menu is visible)*/
	#main-menu:target > a[href="#main-menu"]{
		display: none !important;
	}
	
	/* hide menu link (when menu is visible)*/
	#main-menu:target > a[href="#"]{
		display: block;
	}
	
	form{
		width: 440px;
		max-width: 100%;
	}
	
	form ol{
		
	}
	
	form ol li{
		margin-bottom: 10px;
	}
	
	form label{
		display: inline-block;
		width: 100px;	
	}
	
	form input,
	form textarea{
		max-width: 98%%;	
		background: white;
		border: solid 2px black;
		margin: 0;
		padding: 4px 8px;
	}
	
	form input[type=submit]{
		background: white;
		border: solid 2px black;
		padding: 6px 12px;
		float: right;	
	}

/* tablet styling */
@media only screen and (min-width: 600px){
	body{
		/* font-size: 18px; - if you want your tablet size to have a larger font */		
	}
	
	article{
		
		-o-column-count: 1;
		-moz-column-count: 1;
		-webkit-column-count: 1;
		column-count: 1;
		
		-moz-column-gap: 20px;
		-o-column-gap: 20px;
		-webkit-column-gap: 20px;
		column-gap: 20px;
	}
	
	h2{
		-moz-column-span: all;
		-webkit-column-span: all;
		-o-column-span: all;
		column-span: all;	
	}
	
	h2, h3{
		clear: both;	
	}
}

/* widescreen styling */

@media only screen and (min-width: 978px){
	body{
		font-size: 16px;
	}
	
	article{
		clear: both;
		
		-o-column-count: 1;
		-moz-column-count: 1;
		-webkit-column-count: 1;
		column-count: 1;
		
		-moz-column-gap: 20px;
		-o-column-gap: 20px;
		-webkit-column-gap: 20px;
		column-gap: 20px;
	}
	
	#main-menu{
		position: relative;
		float: left;	
		border-bottom: solid 2px black;
		width: 100%;
	}
	
	#main-menu ul{
		display: block;
		float: left;	
		margin: 0;
	}
	
	#main-menu ul li{
		float: left;	
		border: none !important;
	}
	
	#main-menu ul li a{
		display: block;
		padding: 4px 10px 2px 10px;	
	}
	
	#main-menu > a{
		display: none !important;	
	}
	
	.wrapper{
		width: 978px;
		margin: 0 auto;	
	}
}

/* specific execptions (disable columns for certain pages */
.arrays article, 
.variables article,
.email article,
.success{
	-moz-column-count: 1 !important;
	-o-column-count: 1 !important;
	-webkit-column-count: 1 !important;
	column-count: 1 !important;
	
}

/* CSS3 menu animation */
@-moz-keyframes show-menu{
	0%{
		opacity: 0;	
		-webkit-transform: translate3d(3000px, 0px, -1000px) rotateY(-66deg);
		-moz-transform: translate3d(3000px, 0px, -1000px) rotateY(-66deg);
		-o-transform: translate3d(3000px, 0px, -1000px) rotateY(-66deg);
		-ms-transform: translate3d(3000px, 0px, -1000px) rotateY(-66deg);
		transform: translate3d(3000px, 0px, -1000px) rotateY(-66deg);
		
	}
	
	66%{
		opacity: 0;	
		-webkit-transform: translate3d(0px, 0px, -1000px) rotateY(-66deg);
		-moz-transform: translate3d(0px, 0px, -1000px) rotateY(-66deg);
		-o-transform: translate3d(0px, 0px, -1000px) rotateY(-66deg);
		-ms-transform: translate3d(0px, 0px, -1000px) rotateY(-66deg);
		transform: translate3d(0px, 0px, -1000px) rotateY(-66deg);
		
	}
	100%{
		opacity: 1;
		opacity: 0;	
		-webkit-transform: translate3d(0px, 0px, 0px);
		-moz-transform: translate3d(0px, 0px, 0px);
		-o-transform: translate3d(0px, 0px, 0px); 
		-ms-transform: translate3d(0px, 0px, 0px); 
		transform: translate3d(0px, 0px, 0px); 
	}

}

@-moz-keyframes show-menu-items{
	0%{
		border-color: transparent;
	}
	50%{
		border-color: transparent;
	}
	100%{
		border-color: black;
	}
}

@-webkit-keyframes show-menu{
	0%{
		display: block;
		opacity: 0;
		-webkit-transform: translate3d(3000px, 0px, -1000px) rotateY(-66deg);
		-moz-transform: translate3d(3000px, 0px, -1000px) rotateY(-66deg);
		-o-transform: translate3d(3000px, 0px, -1000px) rotateY(-66deg);
		-ms-transform: translate3d(3000px, 0px, -1000px) rotateY(-66deg);
		transform: translate3d(3000px, 0px, -1000px) rotateY(-66deg);
	}
	66%{
		display: block;
		opacity: 1;
		-webkit-transform: translate3d(0px, 0px, -1000px) rotateY(-66deg);
		-moz-transform: translate3d(0px, 0px, -1000px) rotateY(-66deg);
		-o-transform: translate3d(0px, 0px, -1000px) rotateY(-66deg);
		-ms-transform: translate3d(0px, 0px, -1000px) rotateY(-66deg);
		transform: translate3d(0px, 0px, -1000px) rotateY(-66deg);

	}
	100%{
		opacity: 1;
		display: block;
		-webkit-transform: translate3d(0px, 0px, 0px);
		-moz-transform: translate3d(0px, 0px, 0px);
		-o-transform: translate3d(0px, 0px, 0px); 
		-ms-transform: translate3d(0px, 0px, 0px); 
		transform: translate3d(0px, 0px, 0px);

	}
}

@-webkit-keyframes show-menu-items{
	0%{
		border-color: transparent;
	}
	50%{
		border-color: transparent;
	}
	100%{
		border-color: black;
	}
}

@keyframes show-menu{
	0%{
		opacity: 0;
		-webkit-transform: translate3d(3000px, 0px, -1000px) rotateY(-66deg);
		-moz-transform: translate3d(3000px, 0px, -1000px) rotateY(-66deg);
		-o-transform: translate3d(3000px, 0px, -1000px) rotateY(-66deg);
		-ms-transform: translate3d(3000px, 0px, -1000px) rotateY(-66deg);
		transform: translate3d(3000px, 0px, -1000px) rotateY(-66deg);
	}
	66%{
		opacity: 1;
		-webkit-transform: translate3d(0px, 0px, -1000px) rotateY(-66deg);
		-moz-transform: translate3d(0px, 0px, -1000px) rotateY(-66deg);
		-o-transform: translate3d(0px, 0px, -1000px) rotateY(-66deg);
		-ms-transform: translate3d(0px, 0px, -1000px) rotateY(-66deg);
		transform: translate3d(0px, 0px, -1000px) rotateY(-66deg);
	}
	100%{
		opacity: 1;
		-webkit-transform: translate3d(0px, 0px, 0px);
		-moz-transform: translate3d(0px, 0px, 0px);
		-o-transform: translate3d(0px, 0px, 0px);
		-ms-transform: translate3d(0px, 0px, 0px);
		transform: translate3d(0px, 0px, 0px);
	}
}

@keyframes show-menu-items{
	0%{
		border-color: transparent;
	}
	50%{
		border-color: transparent;
	}
	100%{
		border-color: black;
	}
}