/* CSS for sk8hx
 * version 3.1  February 2010
 * Copyright 2009-2010 Steven Lilley
 */
body {
	color: #000;
	background-color: #fff;
    margin: 1ex;
    font-size: medium;
    font-family: "Liberation Sans",Arial,sans-serif; 
}
/* Divisions */
div {
    margin: 0;
}
div.content {
    width: 66%;
}
div.narrow {
    margin-right: 32%;
}
div.menu {
    padding: 0;
    margin-bottom: 3ex;
    clear: both;
}
div.basement {
    display: block;
    position: fixed;
}
div.example {
    width: 80%;
    margin: 1ex auto;
    padding: 0.5ex 1ex;
    display: block;
    border: 1px solid #666;
    color: inherit;
    background-color: #ffd;
}
div.on_this_page {
    width: 80%;
    margin: 1ex auto;
    padding: 0.5ex 1ex;
    display: block;
    border: 1px solid #ccc;
    color: inherit;
    background-color: #eee;
    font-size: smaller;
}
div.controls {
    margin-top: 1ex;
    padding: 0.5ex;
    border: 1px dotted #666;
    border-width: 1px 0 0 0;
}
div.controls p {
    display: inline;
    color: #666;
    background-color: inherit;
}
div.sidebar {
    position: absolute;
    top: 18ex;
    right: 2ex;
    padding: 0;
    display: block;
    color: inherit;
    background-color: #fff8ff;
    float: right;
    width: 32%;
    border: 4px solid #f0f;
}    
div.popquiz {
    position: absolute;
    top: 6em;
    right: 2ex;
    padding: 1ex;
    display: block;
    color: inherit;
    background-color: #ffecff;
    border: dotted 4px #f0f;
    float: right;
    width: 20%;
}
/* Headings */
h1 {
    color: #f0f;
    background-color: #fff;
    text-align: center;
    vertical-align: bottom;
    margin: 0;
    padding-bottom: 0.2ex;
    font-style: italic;
}
h1 > img {
    margin: 0;
    float: none;
}
h2 {
    color: #000; background-color: #ff0; 
    font-size: xx-large;
    margin: 0.5ex 1ex 1ex 0.2ex; padding: 0.5ex 1ex;
}
h3 {
    color: #f0f; background-color: inherit;
    font-size: x-large; font-style: italic; font-weight: bold;
    letter-spacing: 0.12ex;
    margin: 4ex 2ex 0.5ex 0.6ex;
    clear: both;
}
h4 {
    color: inherit; background-color: #fcf;
    margin: 2ex 4.5ex 1ex 2.4ex; padding: 0.5ex 2ex 0.5ex 3ex;
}
/* Paragraphs */
p {
    margin: 0.5ex 0;
    padding: 0 4ex;
}
div.content p {
    font-size: 116%;
}
p.greeting {
    color: #ff0;
    background-color: #fcf;
    padding: 2px 1ex;
    border: #f0f 1px solid;
}
p.success {
    color: inherit;
    background-color: #6c0;
}
p.failure {
    color: inherit;
    background-color: #f30;
}
p.controls {
    display: inline;
    background-color: #eee;
    color: #333;
    font-size: smaller;
}
p.menuTitle {
    color: inherit; background-color: #f9f;
    font-size: 116%; font-weight: bold; letter-spacing: 0.2ex; text-transform: lowercase;
    margin: 0; padding: 0.5ex 1ex;
    border: 1px solid #f6f; border-width: 0 0 1px 0;
}
/* Lists */
ul,ol {
    margin-left: 4ex;
}
div.content ul li {
    padding-left: 2ex;
}
ul.menu {
    margin: 0;
    padding-left: 0;
}
ul.menu li {
    list-style: none;
    margin: 0;
    border: 1px solid #fcf;
    border-width: 0 0 1px 0;
}    
ul.menu li a {
    display:block;
    padding: 2px 1ex;
    margin: 0;
}
ul.menu li a:hover { 
	color: inherit;
	background-color: #ff0;
}

ol {
    padding-left: 2ex;
}
li {
    margin-left: 0;
    margin-bottom: 1ex;
    list-style: circle;
}
/* Tables */
th {
    color: inherit;
    background-color: #ccc;
    vertical-align: top;
    text-align: left;
    padding: 1px 2px;
    font-weight: normal;
}

/* Anchors */
a:link { 
	color: inherit;
	background-color: transparent;
}
a:visited {
	color: inherit;
	background-color: transparent;
}
a:hover { 
	color: inherit;
	background-color: #ff0;
}
a.name:hover {
    color: inherit;
    background-color: transparent;
}
a.menuTab:link, a.menuTab:visited {
    color: inherit;
    background-color: #fdf;
    text-decoration: none;
    padding-bottom: 2px;
}
a.selected {
    color: #000;
    background-color: #f0f;
    font-weight: bold;
    text-decoration: none;
    padding-bottom: 2px;
}
a.selected:link, a.selected:visited {
    color: #000;
    background-color: #f0f;
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid #f0f;
}
a.subMenuTab:link, a.subMenuTab:visited {
    color: #000;
    background-color: #fcf;
    text-decoration: none;
}
a.subSelected {
    color: #000;
    background-color: #fff;
    font-weight: bold;
    text-decoration: none;
}
a.subSelected:link, a.subSelected:visited {
    color: #000;
    background-color: #fff;
    text-decoration: none;
}
a.button {
    text-decoration: none;
    border: 1px solid #666;
    padding: 1px 4px;
}
a.button:link, a.button:visited {
    color: #000;
    background-color: #fcf;
    text-decoration: none;
}
/* Images */
img {
    border: none;
    margin: 0 4ex 1ex 1ex;
}
img.inTextNormal {
    float: left;
    margin: 1ex 2ex;
}
img.inTextRight {
    float: right;
    margin: 1ex 2ex;
}
img.external {
    vertical-align: top;
    margin: 1px 2px;
}
img.button {
    float: right;
    width: 88px;
    height: 31px;
    margin: 2px 1ex;
    padding: 0;
}
img.icon {
    width: 32px;
    height: 32px;
    border: 0;
    padding: 0;
    margin: 2px 6px;
    vertical-align: middle;
}
img.spot_the_diff {
    width: 380px;
    height: 260px;
    clear: right;
}

/* Forms and Controls */
form {
    display: inline;
    margin: 0 1ex;
}
input, select, button, textarea {
	font-family: "DejaVu LGC Sans",Arial,sans-serif;
	font-size: smaller;
	border: 1px #666 solid;
	padding: 1px;
	margin: 1px 2px 1px 0;
}
input.button {
    color: #000;
    background-color: #fcf;
}
input:hover {
    color: #000;
    background-color: #ff0;
}
input.button:hover {
    color: #000;
    background-color: #ff0;
}
input.reqd {
    color: inherit;
    background-color: #f9c;
}

/* Span and dot */
.spacer {
    color: #fff;
    background-color: #fff;
}
.subSpacer {
    color: #fcf;
    background-color: #fcf;
}
.todo {
    color: #999;
    background-color: inherit;
    font-style: italic;
}
.date {
    color: #c8c;
    background-color: inherit;
    font-size: smaller;
    font-style: italic;
}