/*
Accessify Forums Demos by Ben Millard
History: 2008-12-13 -> 2009-01-19 -> 2009-07-28 -> 2009-12-25

Text: 375198
Links: 39559f 375198 dd6900
Backgrounds: dbe1f2 efefef dee3e7 fdeedf
Borders: a9b6da

TODO:
Optimise
Make .area styles the defaults?
Integrate Nigel's blue (#) and gold (#) colouring.
*/

/* Base */
html, input, pre, textarea {
 font-size: 100%;
 font-family: Verdana, sans-serif;
}
html {
 margin: 0;
 padding: 0.333em 0.75em;
 color: #000;
 line-height: 1.5;
 background: #fff;
 overflow-y: scroll; /* Keep search box in same place */
}
body {
 margin: 0;
 padding: 0;
 font-size: 0.75em; /* 12px */
}
a {
 text-decoration: none;
 border-bottom: 1px solid;
}
code, code a { /* retrofit to "detectable inline code"? blog about this? */
 font-family: Consolas, monospace;
}
blockquote, dl, ol, ul, p, pre {
 margin: 0 0 1em 0;
}
blockquote, pre {
 background: #fff;
}
pre {
 white-space: pre-wrap;
 word-wrap: break-word;
}
sup {
 vertical-align: baseline;
}
/* - Forms */
form, fieldset, legend {
 margin: 0;
 padding: 0;
 border: 0;
}
label, input, select, textarea {
 vertical-align: middle;
}
/* - Headings */
h1, h2, h3, legend, label {
 margin: 0;
 color: #375198;
 font-weight: normal;
}
h1 {
 clear: left;
 padding: 0.75em 0 0 0;
 font-size: 1.5em; /* 18px */
}
h2, #nav {
 font-size: 1.25em; /* 15px */
 line-height: 1.4; /* 21px */
 background: #dbe1f2 url(cattitle.gif) repeat-x;
}
h2 {
 margin-bottom: 1px;
}
h3 {
 font-size: 1.083em; /* 13px */
}
caption, legend {
 font-size: 1em;
}
/* - Lists */
ul, ol {
 padding: 0 0 0 2.5em;
}
li {
 margin: 0;
 padding: 0;
}
ul ul, ol ol, dl ul, dl ol {
 margin: 0;
 padding: 0 0 0 2em;
}
ol {
 padding: 0 0 0 2.5em;
 list-style: decimal;
}
ol ol {
 list-style: lower-alpha;
}
ol ol ol {
 list-style: lower-latin;
}
ol ol ol ol {
 list-style: upper-latin;
}
dl, dt, dd {
 margin: 0;
 padding: 0;
}
dt {
 font-weight: bold;
}
dt:first-child {
 margin: 0; /* Keep with heading */
}
dd {
 padding: 0;
}
/* - Links */
a {
 color: #39559f;
}
a:visited {
 color: #003969;
 border-bottom-style: dotted;
 /* Pink color: #9f5198;
 */
}
a:hover, a:focus, a:active {
 color: #dd6900;
 border-bottom-style: solid;
}
/* - Fragment Link */
:target { /* Usually the <h2> for a message */
 font-weight: bold;
}


/* Header */
#logo, #logo a, #logo img {
 margin: 0;
 padding: 0;
 font-size: 1.5em;
 line-height: 1.333;
 border: 0;
}

/* Navigation */
#nav {
 float: left;
 margin: 0;
 padding: 0;
 width: 100%;
 list-style: none;
 background: #dbe1f2 url(cattitle.gif) repeat-x;
}
#nav li {
 float: left;
 display: inline;
}
#nav li + li + li + li + li + li {
 float: right; /* Your Profile, Members */
}
#nav a, #nav strong {
 display: block;
 padding: 0.133em 0.4em 0.266em 0.4em; /* #nav */
 font-weight: normal;
 border: 0;
}
#nav a strong { /* Current section */
 display: inline;
 padding: 0;
 color: #dd6900;
 font-size: 1em;
}

/* Main Content */
.area div, .topic div, .topic form#mod fieldset, #footer  {
 clear: left;
 float: left; /* float for member-edit */
 margin: 0;
 width: 68%;
}

/* Search */
#search {
 top: 0.5em;
 right: 1em;
 position: absolute;
 background: #fff;
}
#search label {
 display: inline;
 margin: 0;
}
#search div {
 float: none; /* Undo styling elsewhere */
 margin: 0;
 width: auto;
 background: transparent;
 border: 0;
}

/* Pagination */
.pages {
 float: left;
 width: 100%;
 margin: 1em 0;
 padding: 0;
 list-style: none;
}
.pages li {
 display: inline;
 float: left;
 padding: 0;
 background: #efefef;
 border-right: 1px solid #fff;
}
.pages li a, .pages li strong {
 display: block;
 width: 1.5em;
 padding: 0 0.167em;
 text-align: center;
 border: 0;
}
.pages li strong {
 font-weight: normal;
}
.area .pages li {
 padding: 0;
}

/* Member List */
.area .members {
 float: left;
 margin: 0;
 padding: 0;
 width: 100%;
 list-style: none;
}
.area .members li { /* 10 columns at 1024x768 */
 display: inline;
 float: left;
 margin: 0 1px 1px 0;
 width: 7em;
 overflow: hidden;
 white-space: nowrap;
}
.area ol.members li {
 padding: 0 0 0 0.25em;
}
.area ol.members li a {
 display: block;
 border: 0;
}
.members li {
 border-left: 0.25em solid #efefef;
}
/*
Status Colours Override .members.
.hot: Top 100 members for total messages.
.pin: Staff member.
.new: Joined since the "you last visited on" date.
      Joined during the most recent n days would give new members better recognition?
*/

/* Footer */
#footer {
 clear: both;
 margin: 0.75em 0 0 0;
 width: 68%;
}


/* Areas */
.area h2 {
 clear: left;
 } 
.area h2 a {
 display: block;
 padding: 0.133em 0.4em 0.266em 0.4em; /* #nav */
 text-decoration: underline;
 border: 0;
}
.area ol {
 margin: 0;
 padding: 0;
 list-style: none;
}
.area ol li {
 margin: 0 0 1px 0;
 padding: 0 0.75em 0.25em 0.75em;
 background: #efefef;
}
/* - Moderator */
.area.mod div fieldset {
 margin: 0 0 0.5em 0;
}
.area.mod div legend {
 display: inline; /* Hi. Does this work yet? */
}
.area.mod ol li {
 padding: 0 0.75em 0.25em 0; /* Contains controls */
}
.area.mod ol label {
 padding: 0 0 0.25em 0.75em; /* Fitt's Law */
 vertical-align: middle;
}
.area.mod ol input { /* Checkbox */
 margin: 0;
}
.area.mod li[class] label {
 padding-left: 0.5em; /* 0.25em for Status */
}
/* - Status */
.area li[class] {
 padding-left: 0.5em;
 border-left: 0.25em solid;
}
.area li.hot  {
 border-color: #a9b6da;
}
.area li.pin  {
 border-color: #375198;
 background: #efefef;
}
.area li.new  {
 border-color: #dd6900;
 background: #fdeedf;
}
.area li.lock {
 border-color: #000000;
 background: transparent;
}
.area li.move {
 border-color: transparent;
 background: transparent;
}
/* - Member Profile */
.area dt, .area dd {
 padding: 0 0.5em;
 background: #efefef;
}
.area dd {
 margin: 0 0 1px 0;
}


/* Topic */
.topic div {
 background: #efefef;
 border-bottom: 1px solid #fff;
}
.topic h2 {
 margin: 0;
 padding: 0.133em 0.4em 0.266em 0.4em; /* #nav */
 border-bottom: 1px solid #fff;
}
.sig { /* Signature text */
 font-size: 0.833em; /* 10px */
 line-height: 1.4; /* 14px */
}
/* - Message */
.topic div p {
 padding: 0 1em;
}
.topic div blockquote, .topic div pre {
 margin-left: 1em;
 margin-right: 1em;
}
.topic div blockquote address {
 font-weight: bold;
 font-style: normal;
 background: #efefef;
}
.topic div blockquote blockquote {
 background: #efefef;
}
.topic div blockquote blockquote address {
 background: #fff;
}
.topic div img {
 vertical-align: middle;
}
/* - Moderator */
.topic.mod h2 {
 float: left; /* Contain controls */
 padding: 0;
 width: 100%;
}
.topic.mod fieldset {
 clear: both;
}
.topic.mod h2 label {
 display: block;
 float: left;
 padding: 0.133em 0.4em 0.266em 0.4em; /* #nav + Fitt's Law */
}
.topic.mod h2 input { /* Buttons */
 float: right;
 margin: 0.25em 0.333em 0 0;
 font-size: 0.8em;
}
.topic.mod h2 label input {
 float: none; /* Don't float checkbox */
 margin: 0;
}


/* User Content Column (topics, messages & profile details) */
/* <http://www.w3.org/TR/CSS21/visuren.html#fixed-positioning> and <http://html5.lachy.id.au/beta/> */
#input legend {
 font-size: 1.5em; /* h1 */
}
#input label {
 display: block;
}
#input fieldset input, #input textarea {
 width: 100%;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
}
/* - Reply (including variations) */
#input.reply {
 margin-top: 58px;
 top: 4.083em;
 right: 1em;
 bottom: 0.5em;
 width: 30%;
 position: fixed;
}
#input.reply textarea {
 top: 2.25em;
 right: 0;
 bottom: 2.083em;
 position: absolute;
}
#input.reply #mode { /* 1st Button */
 margin-right: 18px;
 right: 3.5em;
}
#input.reply div input { /* Buttons */
 right: 0;
 bottom: 0;
 position: absolute;
}
#input.reply.login textarea {
 top: 10.083em; /* +6em */
}
#input.reply.topic textarea {
 top: 7.083em; /* +3em */
}
/* - Edit Profile */
#input.edit {
 float: right;
 width: 30.67%;
 margin: 0;
 top: -3em; /* h1 */
 position: relative;
 border: 0;
}
#input.edit legend {
 padding: 0.5em 0 0 0;
 font-size: 1.5em; /* h1 */
}
#input.edit div {
 float: none; /* Undo .area div */
 padding: 0.5em 0 0 0;
 width: 100%;
 text-align: right;
}