/* Brown + GrayscaleTheme */
body {background-color: #9A5F3A;}
a:hover, a:active, form input.submit:hover {color: #9A5F3A;}
a, form input.submit, .callout h2, .callout h2 a, a strong {color: #B3734D;}
h1 {color: #000000;}
h2 {color: #222222;}
h2 a {color: #222222;}
h3 {color: #111111;}
h3 a {color: #111111;}
h3 a:hover, h3 a:active {color: #B3734D;}

.hr {border-top-color: #DDDDDD;}
.whoa {color: #FF3300 !important; font-weight: bold !important;}
#header, #nav p {color: #FFFFFF;}
#container, form input.submit {background-color: #fafafa;}
#header span {color: #000000;}
#nav ul, .callout, .sample {background-color: #eeeded; border-color: #333333;}
#nav div {background: #ffffff; border-color: #333333;}

html {height: 100%;}
body {position: relative; padding: 0px 0px 0px 25%; margin: 0px; font: 12px/22px Arial, Helvetica, sans-serif; height: 100%; color: #111111;}
p {padding: 0px; margin: 0px 0px 20px 0px;}
h1, h2, h3, h4 {font-family: "Courier New", Courier, monospace;}
h1 {font-size: 25px; margin: 44px 0px 5px -9px; padding: 0px;}
h2 {font-size: 20px; margin: 22px 0px 5px -9px; padding: 0px;}
h2 a {text-decoration: none;}
h3 {font-size: 17px; margin: 18px 0px 5px 0px; padding: 0px;}
h3 a {text-decoration: none;}
h4 {font-size: 11px; font-weight: normal; margin: -5px 0px 2px 0px; padding: 0px; color: #AAAAAA;}
img.right {float: right; border: 1px solid #BBBBBB; padding: 7px; background-color: #FFFFFF; margin: 0px 0px 8px 12px;}
img.left {float: left; border: 1px solid #BBBBBB; padding: 7px; background-color: #FFFFFF; margin: 0px 12px 8px 0px;}
strong {color: #222222;}

form {font: bold 14px/23px "Courier New", Courier, monospace;}
form p.comment-notes {font: 12px/22px Arial, Helvetica, sans-serif;}
form span {font-weight: normal; font-size: 11px;}
form input {display: block; margin: 2px 0px 8px 2px; font: normal 14px/16px "Courier New", Courier, monospace;}
form textarea {display: block; margin: 2px 0px 8px 2px; font: normal 14px/16px "Courier New", Courier, monospace;}
form input.submit {font: bold 15px/15px "Courier New", Courier, monospace; text-decoration: underline; border: none; padding: 0px; text-align: left;}

.callout {float: right; width: 33%; font-size: 11px; line-height: 17px; text-align: center; margin: 5px 0px 12px 18px; padding: 0px 16px 0px 16px; border-width: 3px; border-style: dashed; clear: right;}
.callout h2 {color: #76492c !important; font-size: 22px !important; margin-left: 0px;}
.callout h3 {font-size: 17px !important;}
.callout h3 a {color: #B3734D; text-decoration: none;}
.callout h3 a:hover, .callout h3 a:active {text-decoration: underline;}
.callout h4 {font: bold 14px/14px "Courier New", Courier, monospace; margin-bottom: 15px; padding-top: 12px; border-top: 2px dashed #CCCCCC;}
.callout h4 a {color: #76492c; text-decoration: none;} 
.callout h4 a:hover, .callout h4 a:active {text-decoration: underline;}
.clear {clear: both;}
.hr {border-top-width: 2px; border-top-style: dashed; margin: 18px 0px 12px 0px;}
.caption {float: right; border: 1px solid #BBBBBB; padding: 7px; background-color: #FFFFFF; margin: 0px 0px 8px 12px; line-height: 12px; text-align: center; font-size: 10px; color: #666666;}
.caption img {margin-bottom: 2px;}
#content .column {float: left; width: 40%; margin-right: 4%; padding-top: 5px;}
#content .column li {margin-bottom: 10px; line-height: 17px;}
#content .samples li {font-weight: bold; font-size: 16px; margin-bottom: 11px;  font-family: "Courier New", Courier, monospace;}
#content .samples li a {text-decoration: none;}
#content .samples li span {display: block; font-size: 11px; line-height: 11px; font-style: italic; font-weight: normal; font-family: Arial, Helvetica, sans-serif;}
.sample {display: block; float: right; width: 60px; text-align: center; font-size: 11px; line-height: 11px; margin: -18px 0px 12px 12px; padding: 8px; border-width: 3px; border-style: dashed;}
.sample img {display: block; margin: 0px auto 2px auto; text-align: center; border: 0px;}

a#header {position: fixed; display: block; width: 25%; top: 50px; left: 0%; text-align: center; font-size: 30px; font-weight: bold; margin: 0px; padding: 0px; text-decoration: none;  font-family: "Courier New", Courier, monospace;}
a#header span {display: block;}
#container {width: 100%; margin: 0px; min-height: 101%;}
#content {margin: 0px; padding: 20px 20px 20px 29px;}
#content ul {padding: 0px 0px 0px 13px; margin: 0px 0px 22px 14px;}
#content ul li {margin-bottom: 13px; list-style-type: square; line-height: 20px;}
#content-left {width: 71%; float: left; margin-right: 4%;}
#content-right {width: 25%; float: right;}
#content-right ul#sidebar {padding: 12px 0px 4px 0px; margin: 0px;}
#content-right ul#sidebar li {list-style-type: none; padding: 0px; margin: 0px;}
#content-right ul#sidebar li ul {padding: 0px 0px 0px 16px; margin: 0px 0px 12px 0px;}
#content-right ul#sidebar li ul li {list-style-type: square;}
#content-right ul#sidebar select {width: 170px; height: 25px; display: block; margin: 2px 0px 8px 2px; font: normal 14px/16px "Courier New", Courier, monospace;}
#content-right ul#sidebar input {width: 167px; height: 20px;}
#content-right ul#sidebar input.submit {padding: 0px;}
#content-right ul#sidebar .hr {width: 90%;}
#content-right p.byline {font-size: 11px; line-height: 13px; margin: -2px 0px 14px 0px; text-align: left;}
#p-blog h4 {margin: 0px; font: bold 13px/14px "Courier New", Courier, monospace; color: #000000;} 
#p-blog h5 {font: italic bold 13px/14px "Courier New", Courier, monospace; margin: 0px 0px 18px 0px;}
#p-blog h5 a {text-decoration: none;}
#p-blog #content-right h4 {margin: 0px 0px 0px 14px;} 
#p-blog #content-right h5 {margin: 0px 0px 12px 14px;}
#p-blog div.archive-meta {margin-left: -9px; font-size: 11px; color: #333333; font-style: italic;}
#p-blog #content-left div.hr {margin: 20px 0px -15px -9px;}
#p-blog #content-left input#s {width: 230px;}
.post {margin: 44px 0px 0px 0px;}
.post .date {margin: -10px 0px -30px -9px; font-size: 15px; font-weight: bold; color: #888888; font-family: "Courier New", Courier, monospace;}
.post .edit a {font-size: 13px; color: #FF3300; font-weight: bold; text-transform: uppercase;}
.post .byline {font-size: 10px; margin: -1px 0px 22px 0px; font-weight: bold; color: #AAAAAA;}
.post .info {font-size: 11px; margin: -1px 0px 12px 0px; font-weight: bold; color: #AAAAAA;}
.post .posted-in {font-size: 10px; margin: 2px 0px 22px 0px; font-weight: bold; color: #AAAAAA;}
.post .posted-in-loop {font-size: 11px; margin: -6px 0px 22px 0px; font-weight: bold; color: #AAAAAA;}
.navigation {background-color: #eeeded; padding: 8px 17px 8px 17px; margin: 12px 0px 12px 0px; border: 2px dashed #DDDDDD; font-weight: bold; clear: both;  font-family: "Courier New", Courier, monospace;}
.comment-notes {font-size: 12px; line-height: 14px; font-weight: normal;}
.comment-allowed-tags {font: normal 12px/14px Arial, Helvetica, sans-serif; margin-top: -16px; color: #555555;}
#p-blog #content-left p.form-submit {margin-top: 12px;}
#commentform code {font: normal 12px/14px Arial, Helvetica, sans-serif;}
h3#comments-title {margin: 26px 0px 12px 0px;}
h3#reply-title {margin-top: 26px;}
ol.comment-list {margin: 0px; padding: 0px;}
ol.comment-list cite {font-style: normal;}
ol.comment-list div.comment-author {font-size: 13px; font-weight: bold; margin: 0px 0px 4px 0px;}
ol.comment-list p {margin: 0px 0px 6px 0px; font-size: 11px; line-height: 18px;}
ol.comment-list p.comment-bottom {color: #333333; font-size: 10px; font-weight: bold; margin-bottom: 18px;}
ol.comment-list li {list-style-type: none !important; padding-left: 59px; background: transparent url("/_images/comments-avatar.gif") 3px 3px no-repeat;}
ol.comment-list ul, ol.comment-list ol {margin: 0px !important; padding: 0px !important;}
div.listen p {font-size: 11px; line-height: 13px; margin: -2px 0px 0px 0px; text-align: left;}
div.listen h4 {margin: 12px 0px 0px 14px; font: bold 13px/14px "Courier New", Courier, monospace; color: #000000;} 
div.listen h5 {font: italic bold 13px/14px "Courier New", Courier, monospace; margin: 0px 0px 0px 14px;}
div.listen h5 a {text-decoration: none;}
#nav {position: fixed; width: 25%; top: 120px; left: 0%; font-family: "Courier New", Courier, monospace;}
#nav ul {width: 100%; padding: 12px 0px 12px 0px; margin: 0px; list-style-type: none; border-width: 3px; border-style: dashed; border-left: none; border-right: none;}
#nav ul li {text-align: center; padding: 5px 0px 5px 0px; font-size: 16px; font-weight: bold;}
#nav ul li.small {font-size: 11px; padding-top: 8px;}
#nav p {padding: 15px 0px 5px 0px; width: 70%; margin: 0px auto 0px auto; text-align: center; font-size: 11px; line-height: 16px;}
#nav div {margin: -5px auto -2px auto; font-size: 15px; font-weight: bold; text-align: center; width: 100%; padding: 10px 0px 12px 0px; border-bottom: 3px dashed #333333;}

#p-home #header {font-size: 56px; line-height: 56px; width: 100%; top: 65px;}
#p-home #nav {width: 42%; padding: 0% 28% 0% 28%; top: 135px;}
#p-home #nav ul li {font-size: 19px; padding-bottom: 8px;}

body#p-websites {padding: 0px; height: auto;}
#p-websites #header {font-size: 56px; line-height: 56px; width: 100%; top: 65px;}
#p-websites div.alt-content {position: relative; width: 42%; padding: 0%; margin: 135px auto -20px; border-top: 3px dashed #333333; background-color: #FFFFFF; text-align: center;}
#p-websites div.alt-content p {position: relative; padding: 0 5% 12px;}
#p-websites div.alt-content ul {margin: 0 auto 4px; padding: 0 12%;}
#p-websites div.alt-content li {text-align: left; margin: 0 0 12px;}
#p-websites #nav {position: relative; width: 42%; padding: 0%; top: 0px; margin: 0px auto;}
#p-websites #nav ul {position: relative; border-top: none; margin: 0px;}
#p-websites #nav ul li {font-size: 14px; padding-bottom: 8px;}

#p-music img.left {margin-right: 24px;}
#p-music #content ul {margin-left: 242px;}
#p-music #content h2 {font-size: 17px; margin: 18px 0px 5px 0px;}
#p-music #content .callout h2 {font-size: 20px !important;}
#p-music #content h3 {color: #B3734D; font-size: 19px;} 

#p-about h3 {clear: both;} 

#p-demos h3 {border-top: 3px dashed #EEEEEE; margin-top: 12px; padding-top: 12px;} 
#p-demos div.callout-container {float: right; margin-top: 0px; width: 234px; background-color: #fafafa;}
#p-demos div.callout-container div.callout {width: auto; float: right;}

#p-collab h3 {border-top: 3px dashed #EEEEEE; margin-top: 12px; padding-top: 12px;} 
#p-collab #content p {margin-bottom: 5px;}
#p-collab #content blockquote {margin: -3px 0px 0px 18px;}
#p-collab #content blockquote strong {color: #999999; font-weight: normal;}
#p-collab #content ul li {margin-bottom: 5px;}

#p-mandie ul.right-nav {float: right; width: 270px; text-align: center; margin: -5px 12px 12px 18px; padding: 14px 16px 10px 16px; border: 2px dashed #CCCCCC; background-color: #FFFFFF; clear: right;}
#p-mandie ul.right-nav li {font: bold 15px/17px "Courier New", Courier, monospace; list-style-type: none; padding-bottom: 4px;}
#p-mandie #content h2 {font-size: 22px; margin-top: 28px;}
#p-mandie #content h3 {margin: 20px 0px 4px 0px; font-size: 16px;} 
#p-mandie #content div.hr {margin-top: 11px; clear: both; border-color: #CCCCCC; margin-left: -9px;}
#p-mandie #content div.in-section {border-color: #FFFFFF;}
#p-mandie #content ul li {margin: 7px 0px; line-height: 15px;}
#p-mandie #content ul.column {padding: 0px 10px 11px 0px; margin: 0px 0px 4px;}
#p-mandie #content ul.column li {font: bold 16px/18px "Courier New", Courier, monospace; list-style-type: none; margin: 10px 0px;}
#p-mandie #content ul.column li span {font-size: 12px; color: #333333;}
#p-mandie #content p {margin: -5px 0px 0px; padding: 0px; font-size: 12px; line-height: 17px; color: #555555;}
#p-mandie #content p.orig-demo {font: bold 11px/11px Arial, Helvetica, sans-serif; margin-top: 4px; padding-left: 3%;}
#p-mandie #content table {width: 60%;}
#p-mandie #content table td {padding: 12px 5%; text-align: left; vertical-align: top; font: bold 15px/15px "Courier New", Courier, monospace; color: #999999;}
#p-mandie #content table td span {display: block; font: normal 11px/11px Arial, Helvetica, sans-serif; margin-top: 4px; color: #666666;}