/*
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 { font-family: Consolas, monospace; } /* retrofit to "detectable inline code"? blog about this? */
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; line-height: 1.4; background: #dbe1f2 url(cattitle.gif) repeat-x; } /* 15px/21px */
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 { font-weight: bold; } /* Usually the <h2> for a message */


/* 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; font-weight: normal; border: 0; } /* #nav */
#nav a strong { display: inline; padding: 0; color: #dd6900; font-size: 1em; } /* Current section */

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

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

/* 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 { display: inline; float: left; margin: 0 1px 1px 0; width: 7em; overflow: hidden; white-space: nowrap; } /* 10 columns at 1024x768 */
.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; text-decoration: underline; border: 0; } /* #nav */
.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; vertical-align: middle; } /* Fitt's Law */
.area.mod ol input { margin: 0; } /* Checkbox */
.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; border-bottom: 1px solid #fff; } /* #nav */
.sig { font-size: 0.833em; line-height: 1.4; } /* 10px/14px for signature text */
/* - 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; padding: 0; width: 100%; } /* Contain controls */
.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 { float: right; margin: 0.25em 0.333em 0 0; font-size: 0.8em; } /* Buttons */
.topic.mod h2 label input { float: none; margin: 0; } /* Don't float checkbox */


/* 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 { margin-right: 18px; right: 3.5em; } /* 1st Button */
#input.reply div input { right: 0; bottom: 0; position: absolute; } /* Buttons */
#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; position: relative; border: 0; } /* h1 */
#input.edit legend { padding: 0.5em 0 0 0; font-size: 1.5em } /* h1 */
#input.edit div { float: none; padding: 0.5em 0 0 0; width: 100%; text-align: right; } /* Undo .area div */