* {margin: 0; padding: 0; outline: 0;}
body {font-family: Arial, Helvetica, sans-serif; background-color: #fff; padding-bottom: 20px;}
img {border: 0;}

#container {width: 750px; margin: 0 auto; background: #dfd url('/images/background.png') repeat-y;}
#header, #content, #footer {width: 750px; color: #060;}
#header {width: 750px; height: 158px; font-size: 200%;}
#header h1, #header p {text-align: center;}
#header span {display: block; background: transparent url('/images/header.jpg') no-repeat; width: 750px; height: 158px; position: absolute; top: 0;}
#header a {text-decoration: none;}
#ads {text-align: center; padding-top: 10px;}
#menu, #content {text-align: justify;}
#inner {margin: 0 30px;}
#breadcrumbs {margin-bottom: 10px;}
#footer {background: #dfd url('/images/footer.png') bottom no-repeat; padding-bottom: 30px;}
#footer div {margin: 0 25px; padding-top: 30px; text-align: center; font-size: small;}

/* Expanding/Collapsing Menu */
#menu {width: 750px; padding-top: 10px;}
#showmenu, #hidemenu {text-align: center; font-size: small; display: block; width: 200px; height: 20px; line-height: 20px; float: right; margin-right: 25px; color: #fff !important; background-color: #000;}
#hidemenu {margin: 0 0 5px 0; float: none;}
#showmenu:before, #hidemenu:before {content:"";}
#menu .slide {margin-top: 0;}
#menu .slideclosed {display: none;}
#menucont {width: 200px; clear: both; position: absolute; margin-left: 520px; padding: 0 5px; background-color: #dfd; z-index: 20;}
#menucont li {list-style-type: none;}
#menucont li a {color: #ddd; background-color: #000; display: block; padding: 3px; line-height: 20px;}
#menucont li li a {color: #000; background-color: #ddd; padding-left: 15px;}
#menucont li li {border-top: #000 1px dashed;}
#menucont li li:first-child {border-top: 0;}
#nav {background-color: #ddd;}

#content li {margin: 5px 0;}
#content ul li {margin-left: 15px;}
#content ol li {margin-left: 20px;}

#content h1, h2, h3, h4 {border-top: none; border-right: none; border-bottom: 2px solid #060; border-left: 2px solid #dfd; text-align: right; clear: both; margin-bottom: 5px;}
#content h1 {font-size: 300%; border-width: 5px;}
h2 {font-size: 200%; border-width: 3px; line-height: normal;}
h3 {font-size: 150%; border-width: 2px; line-height: normal;}
h4 {font-size: 125%; border-width: 1px; line-height: normal;}

p {padding: 5px 0;}
pre {font-size: 13px;}
img {border: 0;}
#content code {text-align: left;}

div.outer {background: scroll #fff url(/javascript/dropshadow/dropshadow-green.gif) right bottom no-repeat; margin-top: 13px; margin-left: 13px;}
div.inner {overflow: auto; border: 1px solid #999; left: -13px; top: -13px; padding: 5px; position: relative; background-color: #fff;}

.exampleimg {float: left; margin: 5px 10px 5px 0;}
.examplelink {clear: left; text-align: right;}
.back {text-align: right;}

a {text-decoration: none; font-weight: bold; outline: none;}
a:hover {text-decoration: underline;}
a:active {text-decoration: overline;}
#content a, #footer a, #showmenu {color: #0b0;}

a#richardwinskill {text-decoration: none; font-weight: bold;}
a#richardwinskill span.logoblue {text-decoration: none; color: #0000ff;}
a#richardwinskill:hover span.logoblue {text-decoration: underline; color: #0000ff;}
a#richardwinskill:active span.logoblue {text-decoration: overline; color: #0000ff;}
a#richardwinskill span.logored {text-decoration: none; color: #ff0000;}
a#richardwinskill:hover span.logored {text-decoration: underline; color: #ff0000;}
a#richardwinskill:active span.logored {text-decoration: overline; color: #ff0000;}

.google {text-align: center;}

#content .error, #content .nopage, #menu .nopage {color: #f00}

hr {margin: 10px 0;}

/* All About You */
#cssstatus {display: none;}
#aboutyou > #cssstatus {display: list-item;}
#cssword:after {content:" enabled";}

/* Slide-In Text Box */
#content .slideopen {color: #600;}
#content .slideclosed {color: #006;}
a.slideopen:before {content:"Open ";}
a.slideclosed:before {content:"Close ";}
.slide {height: 0; overflow: hidden; margin-top: 5px;}
.slide div {text-align: justify;}
.slidegrp {border: 1px solid #666; padding: 5px 5px 0 5px; margin-bottom: 5px;}

/* Auto Cite Link */
blockquote {padding: 5px; border: 1px dashed #666; margin: 10px 20px; text-align: justify;}
blockquote p {margin-top: 0;}
blockquote .cite {font-size: small; text-align: right; margin: 0;}

/* Guestbook Form */

form {margin: auto;}
fieldset {border: 0;}
#contact fieldset {border: 1px solid #060; margin-top: 5px;}
#contact fieldset legend {margin-left: 5px;}
fieldset label {float: left; display: inline; width: 100px; line-height: 16px; margin: 4px 10px; text-align: center; font-size: 76%; background-color: #005500; color: #ddffdd;}
fieldset label.optional {color: #050; background-color: #dfd; border: 1px dashed #050;}
#contact fieldset p {margin-left: 10px;}
input,textarea, select {margin:3px 0 6px 0; border: 1px solid #005500; width: 250px;}
option {padding-left: 2px;}
input {height: 18px}
br {clear: left}
input#go {margin: 9px 0 10px 120px; border: 1px solid #005500; background: #CCC; width: auto; height: auto;}

/* Guestbook */

#gravatar {font-size: small; text-align: justify; margin-bottom: 20px;}
#guestbook {border-bottom: 1px dashed #666;}
#guestbook .guestbookentry {text-align: justify; padding-top: 10px; border-top: 1px dashed #666; clear: left;}
#guestbook .guestbookspam {font-size: small;}
.guestbookentry img {float: left; margin: 3px 3px 0 0; }
#guestbook .details {text-align: right; font-size: small;}
#guestbook .details br {clear: none;}

/* PayPal Form */

.paypal fieldset label {width: 150px;}
.paypal td, .paypal th {padding: 10px 0; text-align: left; border-bottom: 1px dashed #000;}
.paypal th {vertical-align: top;}
.paypal td {width: 100px;}
.paypal .last {border-bottom: 0;}
.paypal tr:first-child {border-top: 0;}
.paypal span {display: block; font-size: small; font-weight: normal;}

/* Power Consumption Form */

.power {border-collapse: collapse;}
.power th, .power td {text-align: right; padding: 2px 5px;}
.power .top {border-bottom: 1px solid #000;}
.power .side {border-right: 1px solid #000;}
.power .pence {border-right: 1px dashed #000;}

/* Web Design Guide Styles */

.guides .highlight {font-weight: bold; color: red;}
.blocklinks #wrong {width: 200px; border: 1px solid #000; padding: 5px;}
.blocklinks #wrong a {text-decoration: none; color: #000; height: 100%;}
.blocklinks #wrong a:hover {color: #fff; background-color: #000;}
.blocklinks #right {width: 200px; border: 1px solid #000;}
.blocklinks #right a {text-decoration: none; color: #000; padding: 5px; display: block; height: 100%;}
.blocklinks #right a:hover {color: #fff; background-color: #000;}