/* stylesheet for demo and examples */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);

body{ 
	font-size: 1em; 
	line-height: 1.6em; 
	font-family: 'Open Sans', sans-serif;
	background: #fafafa; 
	color: #555;
	padding: 20px 0; 
	margin: 0; 
}

header, #demo, footer{ 
	position: relative; 
	margin: 0 auto; 
	width: 80%; 
	max-width: 1024px;
}

h1, h2{ line-height: 1.3em; }

h1{ 
	font-size: 3em; 
	font-weight: 300;
}

h1 > span{
	white-space: nowrap;
}

h1 sup{
	font-size: 30%;
	font-weight: 400;
}

h2{
	font-size: 1.6em; 
	color: #444;
	font-weight: 400;
}

p{ margin-bottom: 30px; }

a{ transition: all .3s; }

a.button{ 
	display: inline-block;
	padding: 2px 8px;
	text-decoration: none;
	border: 2px solid #097AB5; 
}

h1, a{ color: #097AB5; }

a:hover{
	color: #d74006;
	border-color: #d74006;
	text-decoration: none;
}

a.button, .imgs > a{ 
	display: inline-block; 
	margin: 5px; 
}

#examples > section{
	padding: 5px 30px;
	margin: 15px 0;
	background-color: transparent;
}

#examples > section:nth-child(odd){ background-color: #EAEAEA; }

a.button.toggle.active{
	background-color: #097AB5;
	border-color: #097AB5;
	color: #fff;
}

#styles > a{
	display: inline-block;
	margin: 5px;
	border: 1px dotted #097AB5;
	padding: 0 10px;
	font-size: 80%;
	text-decoration: none;
}

#styles > a.active{
	border-color: transparent;
	background-color: #097AB5;
	color: #fff;
}

footer{ 
	color: #777; 
	border-top: 1px solid #ddd;
}