html {height: 100%; margin: 0; padding: 0;}
body { font-family: arial, helvetica, verdana, sans-serif; font-size: 12px; height: 100%; background: #3f3729 url(../images/new-bg.jpg) no-repeat scroll right top; text-align: left;}
* {padding: 0; margin: 0; text-align: left;}
#doc-custom {text-align: left; width: 950px}

a {outline: none;}
label {display: block;}
textarea {overflow: auto;}
.clearfix:after { content: ".";	display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
h1 {font-size: 55px; font-family: Nilland, Times; font-weight: normal; font-style: normal; letter-spacing: 0px; color: #f6e7c6; word-spacing: -5px;}
h2.tagline {font-size: 20px; font-family: AlexandriaFLF; font-weight: bold; font-style: normal; color: #746b55; line-height: 1.5em;}
h2 { line-height: 1.85em; font-size: 30px; font-family: AlexandriaFLF; font-weight: Bold; font-style: normal; color: #e3d3ae  }
h3 { line-height: 1.5em; border-bottom: 2px solid #362f23; font-size: 22px; font-family: AlexandriaFLF; font-weight: Bold; font-style: normal; color: #e3d3ae; margin: 2em 0 1em 0; }
h4 { line-height: 1.5em; border-bottom: 2px solid #362f23; font-size: 16px; font-family: AlexandriaFLF; font-weight: Bold; font-style: normal; color: #e3d3ae; margin: 2em 0 1em 0; }

#hd h1 {margin: 4px 0px 0;}
#hd h2 {margin: -7px 0px -5px;}
#hd #main-nav {position: absolute; top: 126px; margin: 0; list-style: none;}
#main-nav li {float: left; font-size: 15px; margin-right: 13px; position: relative;}
#main-nav li a {height: 29px; display: inline-block; line-height: 34px; padding: 8px 15px 0; overflow: hidden; text-decoration: none; color: #c10337; text-transform: uppercase; font-weight: bold; font-size: 14px;}
#main-nav li a.hover {background: #fe0d51; color: #fff;}
#main-nav li a:hover {background: #fe0d51; color: #fff;}
#main-nav li ul { display: none; position: absolute; top: 45px; left: 0; background: #fe0d51; margin: -10px 0 0; width: 200px; padding: 10px 0; z-index: 10000;}
#main-nav li:hover ul {display: block;}
#main-nav li ul li, #main-nav li ul li a {margin: 0; padding: 0; list-style: none; display: block; float: none;}
#main-nav li ul li a {padding: 0 8px; margin: 0 7px; color: #fff; text-transform: none; height: auto; line-height: 30px;}
#main-nav li ul li a:hover {background: #eb0a4a;}
#main-nav li ul li a:hover::before {content: "» ";}

#ft #foot-nav { margin: 0; list-style: none; display: block; clear: both; width: 100%; }
#foot-nav li {float: left; font-size: 15px; margin-right: 15px;}
#foot-nav li a {height: 1.5em; display: inline-block; line-height: 1.5em; padding: 8px 13px; overflow: hidden; text-decoration: none; color: #5d4835; text-transform: uppercase; font-weight: bold; font-size: 14px;}
#foot-nav li a:hover {background: #ff0f4e; color: #FFF;}
#foot-nav li a.twitter { padding: 0; margin: 0; background: transparent url(../images/btn-twitter.png) no-repeat 0 -85px; width: 96px; height: 85px; line-height: 200px; display: block; position: relative; margin-top: -84px; }
#foot-nav li a.twitter:hover { background: transparent url(../images/btn-twitter.png) no-repeat 0 1px;}
#bd {margin-top: 150px;}
#ft { background: #302a1c; padding: 1em; margin-top: 4em; height: 3em; }

/* Demonstration */
#demo-controls-top {height: 11px; width: 229px; background: transparent url(../images/round-sidebar-top2.png) no-repeat;}
#demo-controls-bottom {height: 13px; width: 229px; background: transparent url(../images/round-sidebar-bottom2.png) no-repeat;}

#demo-controls {width: 229px; padding-bottom: 10px; background: #362f23; }
#demo-controls ul {list-style: none; margin-left: 8px;}
#demo-controls ul li {float: left; margin: 8px 8px;}
#demo-controls ul li a {height: 55px; width: 55px; display: block; background: transparent none no-repeat scroll center;}

#demo-controls ul li a#change-font-btn {background-image: url(../images/btn-change-font.png);}
#demo-controls ul li a#change-font-btn:hover {background-image: url(../images/hover-change-font.png);}

#demo-controls ul li a#increase-font-btn {background-image: url(../images/btn-increase-font.png);}
#demo-controls ul li a#increase-font-btn:hover {background-image: url(../images/hover-increase-font.png);}

#demo-controls ul li a#see-how-btn {background-image: url(../images/btn-see-how.png);}
#demo-controls ul li a#see-how-btn:hover {background-image: url(../images/hover-see-how.png);}

#demo-controls ul li a#change-color-btn {background-image: url(../images/btn-change-color.png);}
#demo-controls ul li a#change-color-btn:hover {background-image: url(../images/hover-change-color.png);}

#demo-controls ul li a#decrease-font-btn {background-image: url(../images/btn-decrease-font.png);}
#demo-controls ul li a#decrease-font-btn:hover {background-image: url(../images/hover-decrease-font.png);}

#demo-controls ul li a#change-bg-btn {background-image: url(../images/btn-change-bg.png);}
#demo-controls ul li a#change-bg-btn:hover {background-image: url(../images/hover-change-bg.png);}

#demo-controls label {color: #ffba00; font-family: Nilland, Times; font-size: 18px; line-height: 56px; margin-left: 16px}
#demo-controls textarea { font-size: 12px; width: 171px; padding: 10px; color: #b2a17c; max-width: 195px; height: 168px; border: 2px solid #322b1f; border-right-color: #755e49; border-bottom-color: #755e49; background: #f6e7c6; line-height: 18px; margin-left: 16px;}

#demo {width: 652px; padding: 20px; float: right; margin-top: 2px; background: transparent none repeat scroll left top; font-size: 72px; font-family: Nilland, Times; color: #f6e7c6}
    
#change-font-form {height: 100%; width: 100%; position: absolute; top: 0; left: 0; display: none;}
#overlay-bg {position: absolute; width: 100%; height: 100%; background: #666; opacity: 0.3; top: 0; left: 0;}
#change-font-form #form {position: absolute; top: 50%; left: 50%; width: 850px; margin-left: -450px; height: 300px; margin-top: -175px; padding: 25px; background: #3f3729;}
#form h2 {width: 45%; float: left; color: #f6e7c6; font-family: Helvetica; font-weight: normal; font-size: 48px; margin-bottom: 30px;}
#form label {font-size: 18px; color: #f6e7c6; margin-bottom: 15px; margin-top: 20px;}
#form select {padding: 0 5px; margin-bottom: 25px;}
#form textarea {color: #b2a17c; width: 90%; height: 100px; padding: 10px; border: 2px solid #322b1f; border-right-color: #755e49; border-bottom-color: #755e49; background: #f6e7c6;}
#form #change-font-submit {margin: 20px 10px 0 0;}
#form #change-font-cancel {color: #9b8f75; text-decoration: underline;}
#form #change-font-cancel:hover {color: #f26d7d; text-decoration: none;}

#message {color: #f6e7c6; margin-top: 15px;}
#form .second{position: relative; z-index: 1000;}

p, li {
	color: #9b8f75;
	font-size: 116%;
	line-height: 2;
}
ol { list-style-position: inside;}
ol ul li { 
	font-size: 85%;
	margin: 0 0 0 1.5em;
}
ul {
	margin-left: 1.5em;
}
code {
	font-family: "courier new", courier, monospace;
	color: #8f8169;
	background: #362f23;
	padding: 1em;
	display: block;
	margin: 1em;
	line-height: 1.5em;
}
code span.text { color: #93d0a8; }
code span.tag { color: #928670;}
code span.param { color: #e7c585;}
code span.value { color: #d27075;}
code span.marks { color: #4e4637;}

.actions { margin-top: 2.5em; }
a { color: #f26d7d; }
a:hover { text-decoration: underline; }


a.button { color: #f6e7c6; margin: 0 .5em 0 0; background: #453d2e; border-top: 1px solid #574d3d; border-left: 1px solid #574d3d; border-bottom: 1px solid #2c2515; border-right: 1px solid #2c2515; padding: 1em;}
a.button:hover { color: #f6e7c6; background: #ff0f4e; border-bottom: 1px solid #574d3d; border-right: 1px solid #574d3d; border-top: 1px solid #2c2515; border-left: 1px solid #2c2515; padding: 1em;}

.engage  a { font-size: 85%; color: #9b8f75; text-decoration: underline;}
.engage  a:hover { color: #f26d7d; text-decoration: none;}
ul.promote, ul.promote li { list-style-type: none; }
ul.promote li { margin: 0; padding-left: 24px; }
.digg { background: transparent url(../graphics/digg-logo.png) no-repeat center left; }
.delicious { background: transparent url(../graphics/delicious-logo.png) no-repeat center left; }
.reddit { background: transparent url(../graphics/reddit-logo.png) no-repeat center left; }

p.signature { 
	font-size: 85%;
	border-top: 2px solid #362f23;
	margin-top: 2em; 
	padding-top: 1em;
}