@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,700,700italic);
body {font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 300;
	color: #555555;
	margin: 0;
	padding: 0 }
h1 { font-size:2.8em; font-weight:700 }
h2 {  font-size:1.6em; font-weight:700 }
h3 { font-size:1.3em; font-weight:700 }
h4 {  font-size:1em; font-weight:700 }
p { margin:0 0 1em 0; }
a { color: #777 }
a:hover { color: #000 }
a:visited { color: #777 }
#wrapper { margin:auto; max-width:1200px }
header { height:430px; background: url(images/banner_1200.gif) no-repeat center bottom; position:relative }
nav { height:40px; width:100%; background-color: rgba(108,13,19,1.00); padding: 50px 0 0 0; }
nav ul {
	list-style: none;
	margin: 0;
	padding: 0px;
	padding-left: 250px;
	min-width: 420px
	}
	nav ul li { display:inline; }
nav ul li a  {  color: #fff; padding: 10px 20px; text-decoration:none }
nav ul li a:visited { color:white }
nav ul li a:hover {  background-color:#D8ACAF }
#logo { position:absolute; top:15px; left:20px; width:200px; height:100px; display: block }
#logo h1 { display:inline; margin-top: 20px }
article { overflow:auto }
.featured { width:33%; text-align:center; float:left; padding:10px; box-sizing:border-box; }
aside { background-color:rgba(204,102,51,0.70); color:white; padding: 30px; overflow:auto }
aside img { float:left; padding-right: 30px }
.btn { color:white; font-size:1.2em; text-decoration:none; border: solid white 1px; padding: 4px 15px }
.btn:hover { background-color:rgba(0,0,0,.30)}
#handbook { background-color:#eee9d9; position: relative; overflow:auto; padding: 30px }
#tutorial { width:25%; float:left }
#handbook a { color:#c63; display:inline-block; font-weight:700 }
#handbook blockquote { margin:0; width:35%; color:#444; background-color:#fff; position:absolute; bottom: 0; right: 4% }
#handbook blockquote p { margin: 30px 30px 20px 50px }
#handbook blockquote p.quote { font-style:italic; font-size: 1.2em }
#handbook blockquote p.credit { color: #777; font-size:.9em; margin-top: 0; padding-left: 20px; line-height: 1.3em; 		position:relative }
#handbook blockquote::before { content: '\201c'; color:#d2bd65; position:absolute; top:10px; left: 8px; font-size:5em; 		font-family:serif; }
#handbook blockquote p.quote::after { content: '\201d'; font-family:serif; } 
#handbook blockquote p.credit::before { content: '\2014'; position:absolute; top: -1px; left: 0 }
footer { font-size:.8em; margin: 40px; color:#999 }
footer a { margin-left:30px }
/*page 2*/
	#handbook-history { height:75px; background-color: #eee9d9; }
	.img_history {float:left; padding-right: 10px;  }
	.exCode {width:50%; background-color:#C9C8C8; padding:10px; font-family:Consolas, 	"Andale Mono", "Lucida 		Console", "Lucida Sans Typewriter", Monaco, "Courier New", 		monospace }
	fieldset { width:90%; padding: 10px; margin: 10px auto 10px auto }
	
	/*end page 2*/
@media only screen and (max-width: 768px) {
aside { text-align:center; }
aside img { float:none; }
blockquote { display:none }
.tutorial {width:50% }
}
@media only screen and (max-width: 480px) {
header { background:none; height:auto } 
nav { height:auto; width:100%; text-align:center; background-color:rgba(108,13,19,1.00) }
#logo { position:static; margin-top:15px; margin:auto; width:160px; height:66px; display:block; background-color:rgba(108,13,19,1.00) }
.featured { float:none; text-align:center; padding:10px; width:100% }
nav ul { margin-top:10px; padding-left:0; min-width:0 }
nav ul li { display: block; }
nav ul li a { display: block;
	font-size: 2em;

	border-bottom: solid 1px #fff;
	color: #fff;
	width:100%;
	padding: 10px 0px;
	text-decoration: none; }
#tutorial {width:100% }
.img_history { width:100%; height:auto }	
}