/*
 * Web Fonts from fontspring.com
 *
 * All OpenType features and all extended glyphs have been removed.
 * Fully installable fonts can be purchased at http://www.fontspring.com
 *
 * The fonts included in this stylesheet are subject to the End User License you purchased
 * from Fontspring. The fonts are protected under domestic and international trademark and 
 * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
 * distributing this font software.
 *
 * (c) 2010-2012 Fontspring
 *
 *
 *
 *
 * The fonts included are copyrighted by the vendor listed below.
 *
 * Vendor:      exljbris
 * License URL: http://www.fontspring.com/fflicense/exljbris
 *
 *
 */

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

}

body {
	margin: 0 auto;
	background: #f6f3f1;
	border: 10px solid #f6f3f1;
	border-top-style: none;
	font-family: Helvetica, sans-serif;
	text-align: center;
	-webkit-text-size-adjust: none;
}

header {
	background: #fff;
	background-image: url('../images/responsiveappdesign.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

h1 {
	margin: 0 auto;
	padding: 15px 0 0;
	width: 95%;
	max-width: 960px;
	color: #000;
	font-family: 'Museo300Regular', Helvetica, sans-serif;
	font-size: 3.75em;
	text-decoration: none;
	text-align: center;
	transition: 0.5s ease;
	-webkit-transition: 0.5s ease;
}

h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:active {
	color: #000;
	text-decoration: none;
	border-bottom: none;
}

#home h1 a {
	cursor: default;
}

h5 {
	margin: 0 auto;
	padding: 10px 20px 15px;
	max-width: 840px;
	color: #d00;
	font-family: 'Museo300Regular', Helvetica, sans-serif;
	font-size: 1.5em;	
	transition: 0.5s ease;
	-webkit-transition: 0.5s ease;
}

h6 {
	margin: 0 auto;
	padding: 5px 20px 10px;
	max-width: 840px;
	color: #4e4e4e;
	font-size: 0.9em;
	line-height: 1.65em;
	font-weight: normal;
	text-align: right;
	transition: 0.5s ease;
	-webkit-transition: 0.5s ease;
}

h6 a {
	color: #36c;
}

nav ul {
	margin: 0;
	padding: 0;
	background: #f6f3f1;
	opacity: 0.75;
	list-style: none;
	text-align: right;
}

nav li,
footer li {
	display: inline-block;
	padding: 0;
	background: #f6f3f1;
	font-size: 1em;
	line-height: 20px;
	transition: 0.3s ease;
	-webkit-transition: 0.3s ease;
}

#home .homelink a,
#video .videolink a,
#links .linkslink a,
#about .aboutlink a {
	background: #fb8;
	font-weight: normal;
	cursor: default;
}

nav li a:link,
nav li a:visited,
nav li a:hover,
nav li a:active,
footer li a:link,
footer li a:visited,
footer li a:hover,
footer li a:active {
	display: inline-block;
	padding: 15px 25px;
	border-bottom: none;
	color: #333;
	font-weight: normal;
	text-decoration: none;
}

nav li:hover {
	background: #e6e6e6;
}

.content { 
	padding: 30px 0;
	background: #fff;
	transition: 0.5s ease;
	-webkit-transition: 0.5s ease;
}

.article {
	margin: 0 auto;
	padding: 0 2.5%;
	width: 95%;
	max-width: 700px;
	text-align: center;
}

iframe {
	margin: 20px auto 0;
	width: 100%;
	max-width: 700px;
	height: 450px;
	transition: 0.5s ease;
	-webkit-transition: 0.5s ease;
}

.caption {
	margin: 0 auto;
	padding: 20px 0;
	color: #3e3e3e;
	font-size: 0.9em;
	line-height: 1.375em;
	text-align: left;
}

a {
	font-weight: bold;
}

a:link,
a:visited {
	color: #23b;
	text-decoration: none;
}

a:hover,
a:active {
	color: #23b;
	text-decoration: underline;
}

h2 {
	margin: 0 auto;
	width: 100%;
	max-width: 700px;
	color: #a33;
	font-size: 1.125em;
	line-height: 1.5em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-align: left;
}

h3 {
	margin: 0 auto;
	padding: 20px 0 0;
	width: 100%;
	max-width: 700px;
	color: #096;	
	font-size: 1.375em;
	font-weight: normal;
	text-align: left;
}

h4 {
	margin: 0 auto;
	padding: 0 0 10px;
	width: 100%;
	max-width: 700px;
	color: #777;
	font-family: Georgia;
	font-size: 1.125em;
	font-weight: normal;
	font-style: italic;
	text-align: left;
}

p {
	margin: 0 auto;
	padding: 10px 0 15px;
	width: 100%;
	max-width: 700px;
	color: #333;
	font-size: 1.05em;
	line-height: 1.5em;
	text-align: left;
}

ul {
	margin: 0 auto;
	padding: 5px 50px;
	color: #333;
	font-size: 1.05em;
	line-height: 1.5em;
	text-align: left;	
}

.dateadded {
	margin-bottom: 30px;
	padding: 5px 0 10px;
	border-bottom: 1px solid #ddd;
	color: #777;
	font-size: 0.75em;
	font-weight: bold;
	text-align: right;	
	transition: 0.5s ease;
	-webkit-transition: 0.5s ease;
}

blockquote {
	margin: 20px 0;
	padding: 30px 7.5%;
	border: 1px solid #ddd;
	color: #222;
	font-weight: bold;
	text-align: left;
	transition: 0.5s ease;
	-webkit-transition: 0.5s ease;
}

blockquote em {
	color: #A33;
	font-family: Georgia;
	font-size: 1.25em;
	line-height: 1.5em;
	font-weight: normal;
	font-style: italic;
}

footer {
	background: #f6f3f1;
}

footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

footer li {
	font-size: 0.85em;
}

footer li:hover {
	background: none;
}

footer li a:link,
footer li a:visited,
footer li a:hover,
footer li a:active {
	padding: 12px;
}

footer li a:hover,
footer li a:active {	
	text-decoration: underline;
}

footer p {
	padding: 10px 0;
	color: #833;
	font-size: 0.75em;
	line-height: 1.25em;
	text-align: center;
}

footer p a:link,
footer p a:visited,
footer p a:hover,
footer p a:active {
	color: #833;
	font-weight: normal;
}


@media only screen
and (max-width : 768px)  {	

	header {
		background-image: url('../images/responsiveappdesign2.png');
	}

	h1 {
		font-size: 2.85em;
	}
	
	h5 {
		padding: 8px 20px 5px;
		font-size: 1.05em;
	}
}


@media only screen
and (max-width : 568px)  {	
	
	body {
		border-style: none;
	}

	h1 {
		font-size: 2.5em;
		line-height: 1.1em;
		text-align: left;
	}
	
	h5 {
		padding: 8px 5% 5px;
		text-align: left;	
	}
	
	h6 {
		padding: 10px 5% 18px;
		font-size: 0.8em;
		text-align: left;
	}
	
	nav ul {
		text-align: center;
	}
	
	nav li,
	footer li {
		font-size: 0.85em;
		line-height: 20px;
	}
	
	nav li a:link,
	nav li a:visited,
	nav li a:hover,
	nav li a:active,
	footer li a:link,
	footer li a:visited,
	footer li a:hover,
	footer li a:active {
		padding: 12px 18px;
	}

	.content {
		padding: 20px 0;	
	}
	
	iframe {
		margin: 10px auto 5px;
		min-width: 300px;
		width: 100%;
		max-width: 700px;
		height: 240px;
	}
	
	h1,
	.caption,
	h2,
	h3,
	h4,
	p,
	.dateadded {
		padding: auto 5%;
		width: 90%;
	}

	h3 {
		padding-top: 15px;
		font-size: 1.275em;
	}
	
	h4 {
		font-size: 1.025em;
	}
	
	.dateadded {
		margin: 0 auto 20px;
		padding-top: 0;
	}
	
	blockquote {
		margin: 15px 0 20px;
		padding: 20px 7.5%;
	}

}

@media only screen
and (max-width : 479px)  {	

	header {
		background-image: url('../images/responsiveappdesign3.png');
	}

}