/*
 * default stylesheets used on SPLoTCH
 * width: 936px, 4 columns of 234px;
 * line-height basis: 18px;
 * - - - - - - - - - - - - - - - - - - - */
/* body { background:url("http://24ways.org/examples/compose-to-a-vertical-rhythm/underline.gif"); } */

/* reset everything */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
q:before,q:after{content:'';}

body { 
font-size: 14px;
line-height: 18px; }

h1, h2, h3, h4 { 
font-family: georgia, serif;
font-weight: bold;
vertical-align: middle;
padding: 18px 0 0; }

h1 { font-size: 36px; line-height: 52px; }
h2 { font-size: 24px; line-height: 36px; }
h3 { font-size: 18px; line-height: 36px; }
h4 { font-size: 16px; line-height: 18px; }

sup, sub {
font-size: smaller;
vertical-align: baseline;
position: relative; }

sup { bottom: 0.33em; }
sub { bottom: -0.25em; }

a { color: #06D; text-decoration: none; }
a:visited { color: #037; }
a:hover { text-decoration: underline; color: #f50; }

hr { display: none; }

em {
font-style: italic; }

/* layout */
#quickbar {
position: absolute;
background: transparent url(http://orangesplotch.com/media/images/site/gradientBlue.png) bottom left repeat-x;
padding: 0;
top: 0; left: 0;
width: 100%;
height: 50px; }

#quickbar li {
display: inline; }

#quickbar li a,
#quickbar li a:link,
#quickbar li a:visited {
padding: 10px;
color: #006;
text-decoration: none;
padding: 1em;
line-height: 36px; }
#quickbar li a:hover {
color: #fff;
background: #f50 url(http://orangesplotch.com/media/images/site/gradientOrange.jpg) 0 -100px repeat-x; }

#quickbar .site-links { float: left; }
#quickbar .user-links { float: right; }

h1 a {
display: block;
height: 108px;
text-indent: -2000px;
overflow: hidden;
background: transparent url(http://orangesplotch.com/media/images/logo/logo100.png) 0 8px no-repeat; }

p.tagline {
font-size: 18px;
line-height: 36px;
text-align: right;
color: #333; }

#page-body {
padding: 18px 0;
background: #333 url(http://orangesplotch.com/media/images/site/gradientBlack.jpg) top left repeat-x;
color: #fff; }

#siteoptions li a {
display: block;
font-size: 18px;
line-height: 36px;
padding: 9px 18px; }

#page-foot {
clear: both;
padding-top: 18px;
font-size: 12px;
line-height: 18px;
padding-bottom: 54px;
text-align: right;
background: #000;
color: #ddd; }

/* add some padding */
.level p,
.level dl,
.level ul,
.level ol,
.level h2,
.level h3,
.level h4 {
padding-left: 9px;
padding-right: 9px; }

#page-head {
margin-top: 36px; }

#page-body a,
#page-body a:link,
#page-body a:visited {
color: #6af; }

#page-body ol {
padding: 18px;
counter-reset: item; }

#page-body ol sup {
padding-left: 5px; }

#page-body ol li:before {
content: counter(item) ". ";
counter-increment: item;
text-align: right;
padding-right: 0.5em; }

#sidebar a {
display: block;
padding-left: 0.5em; }

#sidebar a:hover {
background: #f50;
color: #fff;
text-decoration: none; }


dt {
float: left;
line-height: 12px; }

dd {
margin-left: 2em; }

dl.footnote {
font-size: 12px;
line-height: 18px;
font-style: italic; }

form {
margin: 18px 0; }

form label {
position: absolute;
font-size: 16px;
line-height: 18px;
font-weight: bold; }

form .block input {
margin: 0;
padding: 2px;
border: 1px solid;
font-size: 14px;
height: 16px;
vertical-align: middle; }

form .block {
padding: 7px; }

form .block input {
width: 234px;
margin-left: 120px; }

#contact .block input {
margin-right: 1em; }

form textarea {
margin: 17px 0;
padding: 2px 2px 2px 0.5em;
border: 1px solid;
width: 100%;
height: 264px; /* I don't know why this works */ }

#page-body sup,
.footnote dt {
font-weight: bold;
color: #f90; }

.instr {
color: #e60; }

#site-nav h2 {
display: none; }

#siteoptions a:hover {
background: url(http://orangesplotch.com/media/images/site/redhalftone.png) top left no-repeat;
color: #fff; }

.hfeed,
.hfeed .navigation {
width: 720px;
position: relative;
float: right; }

#page-body .navigation {
text-align: right; }

#sidebar .searchform {
text-align: center;
display: block;
padding: 5px 0;
background: #444;
margin: 0; }

.searchform input {
display: inline;
font-size: 14px;
line-height: 16px;
padding: 2px; }

#sidebar .s {
width: 120px; }

#sidebar h3 {
padding: 0; }

.hfeed a.entry-title {
display: block;
border-bottom: 1px solid #000;
line-height: 35px;
text-decoration: none;
margin: 0; }




/* changing the layout */
div.level {
clear: both;
position: relative;
float: left;
width: 100%;bac }

div.floor {
clear: both;
position: relative;
width: 934px;
margin: 0 auto; }

.column {
float: left;
position: relative;
width: 234px; }

.double-wide { width: 468px; }
.triple-wide { width: 700px; }

.alertlog,
.errorlog {
border: 2px solid;
padding: 16px;
margin: -36px 5%;
min-height: 36px;
position: relative;
z-index: 10;
font-weight: bold;
padding-left: 98px;
font-size: 16px; }

.alertlog {
background: #cfa url(http://orangesplotch.com/media/images/iconbuffet/manhattan_symbol/heart_32.png) 36px 18px no-repeat;
border-color: #f00; }
.errorlog {
background: #ffc url(http://orangesplotch.com/media/images/iconbuffet/manhattan_symbol/radioactive_32.png) 36px 18px no-repeat;
border-color: #f60; }

input[type="text"]:focus,
input[type="text"]:hover,
textarea:focus,
textarea:hover {
background: #e9f6ff;
border-color: #009; }

button {
background: transparent url('http://orangesplotch.com/imgs/button.png') no-repeat;
color: #444;
display: inline;
border: 0;
font: bold 14px arial, sans-serif;
height: 36px;
width: 200px;
margin-right: 18px;
text-align: center; }

button:hover { background-position: right -36px; cursor: pointer; }

button:active,
button:active span {
outline: none; }

.tinted {
background: #eee; }

.column h3 {
padding: 9px;
line-height: 36px;
font-size: 24px; }

.webdesign .column h3 {
padding-left: 32px;
padding-bottom: 18px;
margin-bottom: -18px;
background: url(http://orangesplotch.com/media/images/logo/spiderPixel.png) 0 -10px no-repeat; }

.flash .column h3 {
padding-left: 32px;
background: url(http://orangesplotch.com/media/images/iconbuffet/manhattan_symbol/electric_32.png) 0 9px no-repeat; }

.brick {
width: 231px;
float: left;
margin-bottom: 18px; }

.brick:hover {
background: url(http://orangesplotch.com/media/images/logo/splotch100.png) 10px -5px no-repeat; }

.brick h4 {
color: #444; /* #e30; */
padding: 9px 5px;
font-family: helvetica, verdana, arial, sans-serif;
font-weight: bolder; }

.brick img {
margin: 5px auto;
padding: 3px;
background: #e9f6ff;
border: 1px solid #999;
display: block; }

.tinted .brick img {
background: #ccc;
border: 1px solid #777;
padding: 3px; }

.page-head {
background: #000; }

#page-secondary {
background: url(http://orangesplotch.com/media/images/site/gradientWhite.jpg) top left repeat-x; }

.no-padding {
padding: 0  !important; }

.align-center {
text-align: center; }

img.bordered {
padding: 1px;
background: #e9f6ff;
border: 4px solid #222; }

.hfeed {
padding-bottom: 18px; }

.hfeed h2 {
padding-left: 13px; }

.hfeed h4 {
padding: 0 13px; }

.hfeed h4 a {
padding: 0 5px; }

.hfeed h4 a:hover {
background: #f30;
color: #fff; }

.hfeed .published {
color: #aa9;
padding: 0 18px;
font-size: 11px;
line-height: 18px;
display: block; }

.hfeed .entry-summary {
padding: 9px 18px; }

#latest {
background: url(http://orangesplotch.com/media/images/site/blockleftfade.png) top left no-repeat; }

img#folio-main {
margin: 7px 0 16px;
padding: 1px;
border: 1px solid #555; }

div.pad-top {
padding: 9px 0; }

.info-column h3 {
margin-bottom: 18px; }

.info-column p {
color: #555; }