/*
* Copyright 2003 - 2005 Mark O'Sullivan
* This file is part of Vanilla.
* Vanilla is free software; you can redistribute it and/or modify it under the terms of the
* GNU General Public License as published by the Free Software Foundation; either version 2
* of the License, or (at your option) any later version. Vanilla is distributed in the hope
* that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
* for more details. You should have received a copy of the GNU General Public License along
* with Vanilla; if not, write to:
*
*   the Free Software Foundation, Inc.,
*   59 Temple Place, Suite 330,
*   Boston, MA  02111-1307  USA
*
* The latest source code for Vanilla is available at www.lussumo.com Contact Mark O'Sullivan
* at mark [at] lussumo [dot] com
*
* Description: Default cascading stylesheet for Vanilla
*/

* {
  margin: 0;
  padding: 0;
}

img { border: none; }

html, body {
  font-family: 'Trebuchet MS', Trebuchet, Verdana, Tahoma, Arial, Helvetica, sans-serif;
  background-color: #eed;
}

/* BEGIN GLOBAL DEFINITIONS (common to all pages) */

body { margin: 16px 20px 0; }

body,
div,
table,
td {
  font-family: 'Trebuchet MS', Trebuchet, Verdana, Tahoma, Arial, Helvetica, sans-serif;
  font-size: 12px; /* hmm... */
  color: #062971;
}

select,
textarea {
  background-color: #fff;
  font-size: 13px;
  color: #000;
}

input {
  text-align: left;
  padding: 2px;
}

textarea {
  white-space: pre;
  text-align: left;
  padding: 4px 0 4px 4px;
}

a,
a:link,
a:visited {
  color: #3354aa;
  text-decoration: none;
}

a:hover {
  color: #4b6db7;
  text-decoration: underline;
}

form { display: inline; }

.ErrorContainer {
  border: 1px solid #ffc2ca;
  background: #ffedef;
  padding: 8px;
}

.ErrorTitle {
  font-size: 16px;
  font-weight: bold;
  color: #c00;
  border-bottom: 2px dotted #ffc2ca;
  margin-bottom: 4px;
}

.Error {
  font-size: 12px;
  color: #c00; 
}

/* Autocomplete results style */

.AutoCompleteContainer { border: 1px solid #000; }

/* ListOptionOn/ListOptionOff: Used on the autocomplete feature to highlighting
   when navigating through the faux-autocomplete results. */

.ListOptionOn,
.ListOptionOn:link,
.ListOptionOn:visited,
.ListOptionOn:hover {
  display: block;
  font-family: arial, verdana, sans-serif;
  font-size: 12px;
  background-color: #0a246a;
  color: #fff;
  text-decoration: none;
  width: 100%;
}

.ListOptionOff,
.ListOptionOff:link,
.ListOptionOff:visited,
.ListOptionOff:hover {
  display: block;
  font-family: arial, verdana, sans-serif;
  font-size: 12px;
  background-color: #fff;
  color: #000;
  text-decoration: none;
  width: 100%;
}

/* NAMED ELEMENTS COMMON TO EVERY PAGE */

/* LoadStatus: A tiny window that becomes visible when an AJAX action is performed */

#LoadStatus {
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  border-right: 1px solid #c7d3ea;
  border-bottom: 1px solid #c7D3ea;
  background-color: #fff;
  padding-top: 4px 8px;
  color: #062971;
  font-size: 11px;
}
  
/* InlineSelect: A small-font style of select meant to go inline with paragraph
   text. Currently used on the "settings > application gsettings" form. */

.InlineSelect { font-size: 10px; }
  
/* Session: The message about who you are signed in as w/ option to sign out. */

.Session {
  position: absolute;
  font-size: 11px;
  color: #7182AC;
  right: 38px;
  top: 82px;
}

.Session a,
.Session a:link,
.Session a:visited {
  text-decoration: none;
  color: #919ebe;
}

.Session a:hover {
  text-decoration: underline;
  color: #000;
}
  
/* SiteContainer: A div that encloses the entire application,
   allowing for borders and special padding.

.SiteContainer {
  margin-top: 16px;
  padding-bottom: 20px;
}                   see the body element at top of stylesheet */
  
/* Head: The masthead and tab menu */

.Head {
  background: #e5eaf6 url(blue_waves.jpg) repeat-x;
  border: 1px solid #c7d3ea;
  border-bottom: none;
  margin: 0 18px;
}
  
/* Logo: A container for the logo above the menu. */

.Logo {
  font-size: 21px;
  font-weight: bold;
  text-align: left;
  margin-left: 25px;
  padding: 8px 0;
  color: #3354aa;
}

.Logo a,
.Logo a:link,
.Logo a:visited,
.Logo a:hover {
  color: #3354aa;
  text-decoration: none;
}

.Logo strong,
.Logo strong a,
.Logo strong a:link,
.Logo strong a:visited,
.Logo strong a:hover {
  font-weight: normal;
  font-style: italic;
  color: #499722;
  text-decoration: none;
}
  
/* MenuForum: The main menu, an unordered-list, contained within the Head class. */

#MenuForum {
  list-style: none; 
  text-align: left;
  margin-left: 216px;
}

#MenuForum li {
  display: inline;
  margin: 0 1px;
}
  
/* TabOn/TabOff: The tabs in the main menu, which can appear different
   if they are identified as the current tab (TabOn). */

.TabOn,
.TabOn:link,
.TabOn:visited,
.TabOn:hover,
.TabOff,
.TabOff:link,
.TabOff:visited,
.TabOff:hover {
  position: relative;
  padding: 2px 6px 6px;
  font-size: 11px;
  text-align: center;
  text-decoration: none;
}

.TabOn,
.TabOn:link,
.TabOn:visited,
.TabOn:hover {
  padding-bottom: 2px;
  border: 1px solid #c7d3ea;
  border-bottom: none;
  font-weight: bold;
  background: #fff;
  color: #000;
}

.TabOff,
.TabOff:link,
.TabOff:visited {
  padding-bottom: 1px;
  background-color: #919ebe;
  color: #fff;
}

.TabOff:hover {
  background-color: #9ba8c7;
  padding-bottom: 1px;
  color: #fff;
}
  
/* Body: The element containing everything below the Head (panel and page content). */

.Body {
  background-color: #fefefd;
  border: 1px solid #c7d3ea;
  border-right-color: #ccc;
  border-bottom-color: #ccc;
  border-left-color: #ccc;
  float: left;
  width: 100%;
  padding: 20px 0;
}

/* END GLOBAL DEFINITIONS */

/* BEGIN PANEL */

.Panel {
  display: inline;
  float: left;
  margin-left: 18px;
  padding-right: 18px;
  border-right: 1px solid #ddd;
}

/* PanelTitle: Only used for the "welcome, guest" text when unauthenticated users
   are allowed to browse the forum. */

.PanelTitle {
  width: 180px;
  text-indent: 4px;
  font-size: 11px;
  font-weight: bold;
  color: #000;
}

/* PanelButton: The "Start a New Discussion" button. */

.PanelButton {
  width: 180px;
  display: block;
  margin-bottom: 10px;
}

.PanelButton,
.PanelButton:link,
.PanelButton:visited {
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  color: #a00;
}

.PanelButton:hover {
  font-size: 14px;
  font-weight: bold;
  text-decoration: underline;
  color: #b00;
}

.Panel h2 {
  width: 180px;
  border-bottom: 1px solid #ddd;
  font-size: 11px;
  font-weight: bold;
  color: #000;
}

.Panel p {
  padding-left: 4px;
  padding-bottom: 12px;
}

.PanelInformation {
  background-color: #eed;
  border-top: 1px solid #c7d3ea;
  border-bottom: 1px solid #c7d3ea;
  margin-bottom: 20px;
  display: block;
  width: 180px;
}

.PanelInformation p { padding: 4px; }

/* SPECIAL PANEL ELEMENTS */

/* CategoryJumper: An extension that allows the categories to be navigated
   by a select list in the panel. */

.CategoryJumper { margin: 4px 0 8px 2px; }

.CategoryJumper select {
  width: 170px;
  font-size: 11px;
}
  
/* LinkedList: Used for discussion lists & searches in the panel */

.LinkedList {
  width: 180px;
  margin-bottom: 10px;
  list-style: none;
}

.LinkedList li {
  font-size: 10px;
  color: #444;
}

.LinkedList li small {
  font-size: 10px;
  padding: 0 5px;
  color: #666;
}

.LinkedList strong {
  font-weight: normal;
  color: #a00;
}

.LinkedListFootNote {
  text-align: right;
  font-size: 11px;
}
  
/* PanelLink: A special class sometimes applied to LinkedList items for special formatting. */

.PanelLink {
  display: block;
  padding: 3px 0 3px 4px;
  font-weight: bold;
  border: 1px solid #fefefd;  /* sneaky */
}

.PanelLink,
.PanelLink:link,
.PanelLink:visited {
  text-decoration: none;
  font-size: 11px;
}

.PanelLink:hover {
  background: #fffec7;
  border-top-color: #ddd;     /* complete the sneak */
  border-bottom-color: #ddd;
  color: #666;
}

.SavedSearchContainer .PanelLink { display: inline; }
  
/* Appendix: Used to display color co-ordination appendices on various pages */

.Appendix { width: 180px; }

.Appendix li {
  text-indent: 6px;
  font-size: 11px;
  border-bottom: 1px solid #ddd;
}

/* TextMode: Text-Only mode switches */

.TextModeOFF {
  border-top: 1px solid #84bc62;
  border-bottom: 1px solid #84bc62;
  background-color: #e1ecd6;
  color: #5a5f43;
}

.TextModeON a,
.TextModeON a:link,
.TextModeON a:visited,
.TextModeOFF a,
.TextModeOFF a:link,
.TextModeOFF a:visited {
  display: inline;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
}

.TextModeON a:hover,
.TextModeOFF a:hover {
  display: inline;
  text-decoration: underline;
  background: none;
  border: none;
}

.TextModeOFF a,
.TextModeOFF a:link,
.TextModeOFF a:visited,
.TextModeOFF a:hover {
  color: #686e4d;
}

.TextModeON,
.TextModeOFF {
  margin-top: 20px;
  text-indent: 4px;
  padding: 3px 0;
}

/* END PANEL */
  
/* BEGIN PAGEBODY (All content within the body that is not in the panel) */

.PageBody {
  border-left: 1px solid #ddd;
  margin-left: 216px;
  padding-right: 18px;
  padding-left: 18px;
}

/* PAGEBODY ELEMENTS */

/* Title: used to write the page title (heading on each page). */

.Title a,
.Title a:link,
.Title a:visited {
  text-decoration: none;
}

.Title a:hover { text-decoration: underline; }

/* DataItem & MetaItem: common classes used to identify themes among the discussion
   list, category list, and search results. */

.DataItem { overflow: hidden; }

.DataItem,
.DataItem a,
.DataItem a:link,
.DataItem a:visited,
.DataItem a:hover {
  font-weight: bold;
  font-size: 14px;
}

.DataItemLabel { display: none; }

.MetaItemLabel,
.MetaItem {
  font-size: 10px;
  display: inline;
}

.MetaItemLabel {
  color: #666;
  padding-right: 2px;
}

.MetaItem {
  padding-right: 7px;
  color: #444;
}

.MetaItem a,
.MetaItem a:link,
.MetaItem a:visited {
  text-decoration: none;
  font-weight: normal;
  color: #444;
}

.MetaItemLabel a,
.MetaItemLabel a:link,
.MetaItemLabel a:visited {
  text-decoration: none;
  font-weight: normal;
  color: #444;
}

.NewCommentsPresent a,
.NewCommentsPresent a:link,
.NewCommentsPresent a:visited,
.MetaItemLabel a:hover,
.MetaItem a:hover {
  color: #a00;
}

.ExtendedMetaItemLabel { display: none; }

/* Discussion: Container for a discussion on the discussion index page. */

.Discussion {
  border-bottom: 1px solid #ddd;
  padding-bottom: 8px;
  padding-left: 8px;
}

.DiscussionTopic { padding: 8px 8px 0 0; }

.Bookmarked .DataItem {
  background: url(ico.bookmark.2.gif) top right no-repeat;
}

.NewComments   { background-color: #fffec7; }
.NoNewComments { background-color: #fffeec; }


/* Category: Container for a category on the category page. */

.Category {
  border-bottom: 1px solid #ddd;
  padding: 8px;
}

.CategoryDescription {
  display: block;
  padding: 4px;
}

.UnblockedCategory { background: #f5f9ff; }

/* Comment: Container for a comment on the comment page. */

.Comment {
  padding: 8px 8px 2px 8px;
  border-bottom: 1px solid #dededf;
}

.Comment ul,
.Comment ol {
  margin: 10px 0 10px 30px;
}

.Comment ol { margin-left: 32px; }
.Comment ul li { padding-left: 2px; }
.Comment ol li { padding-left: 0; }
.Comment p { margin: 10px 0; }

/* Some special formatting for comments */

.Comment code {
  display: block;
  font-family: 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Monaco, Courier, monospace;
  font-size: small;
  line-height: 1.4em;
  border-left: 6px solid #ffa;
  background-color: #ffe;
  padding: 8px;
  padding-left: 16px;
}

.WhisperTo { background: #fffeec; }
.WhisperFrom { background: #fefceb; }

.CommentAuthor,
.CommentWhisper,
.CommentTime {
  color: #666;
  float: left;
}

.CommentTime em {
  font-style: normal;
  color: #444;
  padding-left: 4px;
}

.CommentAuthor {
  font-size: 13px;
  font-weight: bold;
  margin: 5px 8px 0 0;
}

.CommentAuthor a,
.CommentAuthor a:link,
.CommentAuthor a:visited,
.CommentAuthor a:hover {
  text-decoration: none;
}

.CommentWhisper,
.CommentTime {
  margin-top: 7px;
  font-size: 11px;
}

.CommentWhisper { margin-right: 4px; }
.CommentNotice  { margin-top: 24px; }

.CommentBody {
  font-size: 12px;
  padding: 0 8px 8px;
  margin-top: 24px;
  color: #333;
}

.CommentHidden { margin-bottom: 4px; }
.Highlight { background: #ff9; }

.CommentOptions,
.WhisperBack {
  font-size: 10px;
  text-align: right;
}

.WhisperBack a,
.WhisperBack a:link,
.WhisperBack a:visited,
.CommentOptions div a,
.CommentOptions div a:link,
.CommentOptions div a:visited {
  color: #999;
  text-decoration: none;
}

.CommentOptions { height: 15px; }

.WhisperBack a:hover,
.CommentOptions div a:hover {
  text-decoration: underline;
  color: #3354aa;
}

.CommentIp,
.CommentEdit,
.CommentHide,
.CommentBlockUser,
.CommentBlockComment {
  display: inline;
  font-size: 10px;
  color: #aaa;
}

.CommentIp {
  padding-right: 4px;
  border-right: 1px solid #eee;
  margin-right: 4px;
}

.CommentHide,
.CommentBlockUser,
.CommentBlockComment {
  margin-left: 4px;
  border-left: 1px solid #eee;
  padding-left: 4px;
}

.CommentAuthorWithIcon {
  position: relative;
  padding-left: 40px;
}
  
.CommentIcon {
  position: absolute;
  top: 50%;
  margin: -10px 0 0 -40px;
  display: block;
  height: 32px;
  width: 32px;
  background: #fff center no-repeat;
}

/* Page Navigation (above and below discussions, categories, and searches) */

.PageNav,
.PageJump,
.PageDetails,
.Title {
  padding-top: 3px;
  padding-bottom: 3px;
  font-weight: bold;
  font-size: 14px;
  border-bottom: 1px solid #ddd;
  overflow: hidden;
  color: #000;
}

/* Sticky, Closed, Bookmark */

.Flags {
  font-style: normal;
  font-weight: normal;
  font-size: 80%;
  background: #4a4a6b url(flag-back.gif) repeat-x;
  color: #fff;
  vertical-align: top;
  padding: 0 4px 1px;
  border: 1px solid #eee;
  border-right-color: #666;
  border-bottom-color: #000;
  border-left-color: #ccc;
}

dl.Sticky    { background-color: #fffec7; }
dl.Whispered { background-color: #e1ecd6; }
dl.Closed,
dl.Unread {
  background-color: #f5f6fc;
}

.PageList {
  padding: 3px;
  font-weight: bold;
  font-size: 14px;
  border-bottom: 1px solid #ddd;
  overflow: hidden;
  color: #000;
  list-style: none;
}

.PageList li { display: inline; }

.PageList a, .PageList a:link, .PageList a:visited, .PageList a:hover {
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
}

.SettingsTitle { border-bottom: 0px; }
.PageDetails { color: #aaa; }

.PageDetails strong {
  font-weight: bold;
  color: #d0d0d0;
}

.PageDetailsBottom { clear: left; }

.PageNav {
  display: block;
  width: 160px;
  border-bottom: 0px;
}

.PageJump {
  padding-left: 10px;
  border: 0;
}

.AllDiscussions,
.Bottom {
  border-bottom: 1px solid #ddd;
}

.PageJump,
.PageList {
  background: none;
  color: #999;
  float: right;
  z-index: 10;
}

.PageNav,
.PageNav:link,
.PageNav:visited,
.PageJump,
.PageJump:link,
.PageJump:visited {
  text-decoration: none;
  color: #aaa;
}

.PageNav:hover,
.PageJump:hover {
  text-decoration: none;
  color: #3354aa;
}

/* Basic Search Results Definitions */

.Search .Title {
  display: block;
  border-top: 1px solid #c7d3ea;
  /* border-bottom: none; */
  background: #f2f3ff;
  text-indent: 4px;
}

.SearchErrors,
.SearchComment {
  margin-top: 30px;
}

.Search .PageDetails {
  background: #f9faff;
  text-indent: 4px;
  color: #aaa;
}

.Search .PageList { background: #f9faff; }

.Search .PageList,
.Search .PageJump {
  padding-right: 4px;
}
  
/* SearchLabelForm: The tiny form above search results that allows you to save the search. */

.SearchLabelForm {
  position: relative;
  top: 25px;
  z-index: 10;
  height: 22px;
  padding-top: 2px;
  padding-right: 3px;
  text-align: right;
}

.SearchLabelInput,
.SearchLabelButton {
  font-size: 10px;
}

.SearchLabelInput {
  border: 1px solid #666;
  border-color-bottom: #ddd;
  border-color-right: #ddd;
  width: 100px;
  text-indent: 2px;
}

/*
.SearchLabelButton {
  border: 1px solid #ddd;
  border-color-bottom: #666;
  border-color-right: #666;
  cursor: pointer;
  width: 76px;
}
*/

/* User Search Results */

.UserAlternate { background: #f6f6f6; }
.User, .UserAlternate {
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 5px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ddd;
}

.SearchUser {
  line-height: 28px;
  font-size: 11px;
  margin-bottom: 5px;
  font-weight: normal;
  color: #999;
}

.SearchUserWithIcon {
  position: relative;
  padding-left: 40px;
  padding-bottom: 4px;
}

.SearchIcon {
  position: absolute;
  margin: 0 0 0 -40px;
  display: block;
  height: 32px;
  width: 32px;
  background: #fff center center no-repeat;
}

/* Comment Search Results */

.SearchComment {
  padding-bottom: 6px;
  border-bottom: 1px solid #DEDEDF;
}

.SearchCommentTopic { padding-left: 8px; }

.SearchCommentBody a,
.SearchCommentBody a:link,
.SearchCommentBody a:visited,
.SearchCommentBody a:hover {
  display: block;
  text-decoration: none;
  padding: 4px 8px;
  margin: 4px 0;
  color: #000;
}

.SearchCommentBody a:hover { background: #ffc; }
.SearchCommentInformationLabel { padding-left: 8px; }

/* [Administrative] Settings Page Layout */

/* SettingsBody: Really only used on the "instruction" page when you first click the settings tab. */

.SettingsBody h1 {
  font-size: 14px;
  margin-bottom: 6px;
  color: #062971;
}

.SettingsBody {
  color: #222;
  padding: 4px;
  margin-top: 10px;
}

.SettingsBody p {
  padding: 0 10px;
  margin-bottom: 10px;
}

/* Account Page Layout */

.AccountPanel {
  display: inline;
  border-right: 1px solid #ddd;
}

.Account {
  float: left;
  padding-right: 19px;
  border-right: 1px solid #ddd;
}

.Account h1 {
  color: #000;
  font-size: 14px;
}

.AccountWithIcon {
  position: relative;
  left: 40px;
}

.AccountIcon {
  position: absolute;
  margin: -7px 0 0 -40px;
  display: block;
  height: 32px;
  width: 32px;
  background: #fff center no-repeat;
}

.Account small {
  display: block;
  text-align: right;
  position: relative;
  margin-top: -17px;
  font-size: 11px;
  padding-left: 10px;
  color: #444;
}

.AccountBody {
  margin-top: 8px;
  clear: left;
  width: 281px;
  overflow: hidden;
}

/* AccountBody blockquote & CommentNotice: If a role has an alert associated with it,
   it will be encompassed by these classes on the account page and the comment list. */

.AccountBody blockquote,
.CommentNotice {
  border: 1px solid #ffc2ca;
  background-color: #ffedef;
  padding: 8px;
  font-size: 12px;
  color: #c00; 
}

.AccountBody blockquote { margin: 10px 0 4px 0; }

/* .Account .Picture: A bug cropped up where the dl's below the account picture would
   partially slide up the page if the picture didn't load for some reason. This fixed
   height repairs that bug. */

.Account .Picture { height: 218px; }

.Account .Picture img {
  margin: 8px 0 10px;
  height: 200px;
  width: 280px;
}

.AccountBody dl { margin-top: 10px; }

.AccountBody dt {
  position: absolute;
  font-weight: bold;
  width: 120px;
  overflow: hidden;
}

.AccountBody dd { padding: 0 0 2px 126px; }
  
/* .Discovery & .IpHistory are only visible to user-adminning roles, but should be
   styled almost exactly like the Role History. */

.Discovery,
.IpHistory,
.RoleHistory {
  border-left: 1px solid #ddd;
  margin-left: 300px;
  padding-left: 18px;
}

.RoleAlternate,
.Role {
  border-top: 1px solid #dededf;
  padding: 8px;
}

.Discovery h1,
.IpHistory h1, 
.RoleHistory h1 {
  border-bottom: 1px solid #ddd;
  font-size: 14px;
  font-weight: bold;
  color: #000;
  padding-bottom: 4px;
}

.Discovery,
.IpHistory {
  padding-top: 20px;
}

.Discovery blockquote,
.IpHistory blockquote,
.RoleHistory blockquote {
  padding: 6px;
  border-bottom: 1px solid #ddd;
}

.RoleHistory blockquote { color: #666; }

.RoleDetails {
  font-size: 11px;
  color: #999;
}

.RoleDetails blockquote {
  padding: 4px;
  margin-top: 2px;
  font-style: italic;
  background: #f9f9f9;
  color: #999;
}

.Discovery h2,
.RoleHistory h2,
.IpHistory h2 {
  font-size: 11px;
  color: #666;
  font-weight: bold;
  display: inline;
}

.Discovery small,
.RoleHistory small,
.IpHistory small {
  font-size: 11px;
  color: #999;
}

.Discovery h3,
.RoleHistory h3,
.IpHistory h3 {
  font-size: 11px;
  color: #444;
  font-weight: normal;
  margin-top: 2px;
}

.Discovery p,
.RoleHistory p,
.IpHistory p {
  font-style: italic;
  margin-bottom: 5px;
  padding: 3px 6px;
  border-bottom: 1px solid #efefef;
  background: #f9f9f9;
}

/* Generic styling for Forms */

.Form,
.ExtensionsForm {
  background: #FEF9E9;
  border: 1px solid #FFEDAE;
  padding: 8px;
  padding-bottom: 0px;
  width: 400px;
}

.Form dl {
  margin: 4px 0 2px 0;
  padding-left: 6px;
}

.Form .InputLabel,
.Form dt,
.Form dd {
  color: #a99861;
}

.Form .InputLabel,
.Form dt {
  font-weight: bold;
  position: absolute;
  width: 160px;
  overflow: hidden;
}

.Form dd { padding-left: 170px; }

.Form h2 {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: bold;
  color: #84733D;
  background: #FFFDF2;
  padding: 3px;
}

.InputNote {
  padding: 6px;
  margin-bottom: 10px;
  color: #A99861;
  background: #FFFDF2;
  text-align: left;
}

.InputBlock { margin-bottom: 12px; }

.InputBlock .Radio,
.InputBlock .CheckBox {
  padding-left: 4px;
  color: #84733d;
}

.InputNote .CheckBox,
.InputNote .Radio {
  padding-top: 4px;
  color: #84733D;
}

.CheckBox {
  text-align: left;
  line-height: 200%;
}

.Button {
  cursor: pointer;
  font-weight: bold;
  font-size: 12px;
  color: #960;
  border: 1px solid #ffedae;
  background: #fef2c9;
  padding: 4px;
}

.SmallInput { width: 138px; }

.LargeTextbox {
  width: 218px;
  height: 100px;
}

.CancelButton,
.CancelButton:link,
.CancelButton:visited,
.CancelButton:hover {
  position: relative;
  top: -10px;
  margin-left: 40px;
  text-decoration: underline;
}

.CancelButton,
.CancelButton:link,
.CancelButton:visited {
  color: #f60;
}

.CancelButton:hover { color: #000; }
  
/* .GlobalsForm: Elements specific to the "Settings > Application Settings" form. */

.GlobalsForm dt {
  margin-top: 5px;
  width: 230px;
}

.GlobalsForm dd {
  padding-top: 6px;
  padding-left: 230px;
}

/* ExtensionsForm: Elements specific to the "Settings > Manage Extensions" form. */

.ExtensionsForm dl { margin: 4px 0 2px 0; }

.ExtensionsForm dt,
.ExtensionsForm dd {
  color: #a99861;
}

.ExtensionsForm dt {
  font-weight: bold;
  position: absolute;
  width: 90px;
  overflow: hidden;
}

.ExtensionsForm dd { padding-left: 100px; }

.ExtensionsForm h2 {
  font-size: 14px;
  color: #000;
  padding: 0 4px 4px;
}

.ExtensionsForm .InputBlock {
  background: #FFFDF2;
  padding: 6px;
  margin-bottom: 20px;
}

.DisableExtension,
.EnableExtension {
  text-align: right;
  margin: 10px;
  margin: 15px 0 5px 0;
}

.EnableExtension a, .EnableExtension a:link, .EnableExtension a:visited {
  color: #FF6600;
}

.DisableExtension a, .DisableExtension a:link, .DisableExtension a:visited {
  color: #aaa;
}

.EnableExtension a:hover,
.DisableExtension a:hover {
  color: #000;
}
  
/* SearchForm: Elements specific to the Search page. */

.SearchForm {
  margin: 10px;
}

.SearchInput {
  color: #333;
  width: 300px;
}

.SearchTypeLabel { margin-left: 12px; }
.SearchTypeLabel,
.SearchType {
  margin-right: 16px;
  float: left;
}

.SearchType {
  margin: 0 10px 10px 0;
  text-transform: lowercase;
}

.SearchType a, .SearchType a:link, .SearchType a:visited, .SearchType a:hover {
  text-decoration: none;
  color: #000;
}

.SearchType input { vertical-align: text-top; }
.SearchButton { cursor: pointer; }

.SearchSelect { width: 160px; }

#AdvancedSearchButton {
  font-size: 10px;
  margin-left: 10px;
}
  
/* SearchTitle: Appears above the different search types on the advanced search form.*/

.SearchTitle {
  font-weight: bold;
  font-size: 14px;
  padding: 4px;
  padding-top: 10px;
}

.SearchLabels td {
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 6px;
  background: #f3f3f3;
}

.SearchInputs td {
  padding: 0 4px 8px;
  background-color: #f3f3f3;
}

.AdvancedUserInput { width: 140px; }
.AdvancedSearchInput { width: 200px; }

/* Autocomplete containers on the advanced search form. */

#SearchTopicsACContainer, #SearchCommentsACContainer {
  position: absolute;
  width: 140px;
}

/* Discussion & Comment forms */

.DiscussionForm { padding-top: 10px; }

.DiscussionForm,
.CommentForm {
  background-color: #fef9e9;
  border: 1px solid #ffedae;
  border-right: none;
  border-left: none;
  padding: 0 0 12px 12px;
  color: #834300;
}

.DiscussionForm dt,
.CommentForm dt {
  font-weight: bold;
}

.DiscussionForm dt small,
.CommentForm dt small {
  font-weight: normal;
  font-size: 10px;
  color: #a6730d;
}

.DiscussionForm dd,
.CommentForm dd {
  margin-left: 2px;
}

.AddCommentsTitle { border-bottom: 0px; }

.CommentForm .ErrorContainer,
.DiscussionForm .ErrorContainer {
  margin: 5px 0 10px;
  width: 444px;
}

.CategorySelect { width: 250px; }

.TopicInput,
.CategoryInput,
.WhisperInput,
.DiscussionInput {
  margin-bottom: 12px;
}

.SubmitButton { margin-bottom: 10px; }

/* DiscussionBox: The discussion title input. */

.DiscussionBox { width: 460px; }
  
/* CommentBoxController: The switch between viewing the comment box as a large or small input. */

#CommentBoxController {
  border: 1px solid #ffedae;
  border-bottom: none;
  background: #fff;
  padding: 2px 4px 3px;
  font-weight: normal;
  margin-left: 260px;
}

#CommentBoxController,
#CommentBoxController:link,
#CommentBoxController:visited {
  color: #a99861;
  text-decoration: none;
  cursor: pointer;
}

#CommentBoxController:hover {
  color: #630;
  cursor: pointer;
}

.SmallCommentBox,
.LargeCommentBox {
  width: 460px;
  font-size: 12px;
}

.SmallCommentBox { height: 130px; }
.LargeCommentBox { height: 400px; }
  
/* FormatType: A radio list of the various comment formatting options. */

.FormatType {
  padding-top: 4px;
  font-size: 11px;
  font-weight: bold;
  color: #960;
}

.FormatTypeRadio {
  font-weight: normal;
  color: #960;
  display: inline;
  padding-left: 16px;
}

.FormatTypeRadio input { vertical-align: text-top; }

.FormatTypeRadio a,
.FormatTypeRadio a:link,
.FormatTypeRadio a:visited,
.FormatTypeRadio a:hover {
  text-decoration: none;
  color: #960;
}

/* Live Preview */

#Preview { 
  margin-top: -6px;
  margin-left: 4px;
}

#Preview strong { color: #834300; }

#TextDisplay {
  width: 96%;
  margin-left: -2px;
  padding: 8px 4px;
  border: 1px solid #ccc;
  background-color: #fefefd;
  color: #333;
}
  
/* Whisper & Clipboard elements */

.WhisperBox,
.ClipboardSelect,
#WhisperACContainer {
  width: 200px;
}

/* WhisperACContainer: The whisper autocomplete container. */

#WhisperACContainer {
  z-index: 3;
  position: absolute;
}

.CategoryInputLabel,
.CommentInputLabel,
.WhisperInputLabel {
  margin: 10px 0 0;
}

.ClipboardInput { margin-bottom: -12px; }

.CommentButtons,
.DiscussionButtons {
  margin: 10px 0 6px;
}

/* Settings & Account forms & buttons */

/* SettingsForm h1, AccountForm h1: Generic styles for headings on the settings & account pages. */

.SettingsForm h1,
.AccountForm h1 {
  margin: 0px;
  padding-bottom: 3px;
  font-weight: bold;
  font-size: 14px;
  overflow: hidden;
  color: #000;
}

/* InputCustom & DefinitionHeading: The custom, user-defined account properties. */

.Form .InputCustom dt,
.Form .InputCustom dd {
  font-weight: normal;
}

.Form .InputCustom .DefinitionHeading { font-weight: bold; }

/* AppearanceForm: The form in "Settings > Forum Appearance". */

.AppearanceForm { padding-bottom: 16px; }
  
/* RoleAbilities .InputLabel: Fixes a glitch on the "Settings > Role Management > Edit Role"
   form && the "Settings > Category Management > Edit Category" form. */

#CategoryRoles .InputLabel,
#RoleAbilities .InputLabel {
  position: relative;
  padding: 4px 0;
}
  
.AccountPersonal .FormButtons { margin-top: 30px; }
  
/* StyleAuthorACContainer: Autocomplete definition for the style gextension. */

#StyleAuthorACContainer {
  position: absolute;
  width: 138px;
  margin-top: 21px;
}
  
.FormLink { margin: 10px; }

.FormLink a,
.FormLink a:link,
.FormLink a:visited {
  color: #f60;
  text-decoration: underline;
}

.FormLink a:hover {
  color: brown;
  text-decoration: underline;
}

/* Style Preview Form */

.Preview {
  background: #fffdf2;
  padding-bottom: 4px;
  margin-bottom: 8px;
}

.PreviewTitle {
  font-size: 14px;
  font-weight: bold;
  color: #84733D;
  padding: 3px;
}

.PreviewImage,
.PreviewImage:link,
.PreviewImage:visited,
.PreviewImage:hover {
  display: block;
  text-align: center;
  margin: 6px;
}

.PreviewEmpty,
.PreviewEmpty:link,
.PreviewEmpty:visited,
.PreviewEmpty:hover {
  text-decoration: none;
  display: block;
  margin: 6px;
  text-align: center;
  line-height: 400%;
  background: #fffef6;
}

.PreviewEmpty,
.PreviewEmpty:link,
.PreviewEmpty:visited {
  color: #D4C080;
  border: 1px solid #f7eed1;
}

.PreviewEmpty:hover {
  color: #b49d55;
  border: 1px solid #ede2c0;
}

/* Footer */

.Links { float: right; }
.Copyright { clear: left; }

.Copyright,
.Links {
  color: #7b97ce;
  line-height: 200%;
  margin-bottom: 20px;
}

.Foot a,
.Foot a:link,
.Foot a:visited {
  text-decoration: none;
  color: #7b97ce;
}

.Foot a:hover {
  text-decoration: underline;
  color: #062971;
}

/* SortList: Styles for the "sortable list" on the category form */

.SortList,
.SortList ul {
  list-style: none;
}

.SortList a,
.SortList a:link,
.SortList a:visited {
  text-decoration: none;
  color: #84733D;
}

.SortList a:hover {
  text-decoration: none;
  color: #000;
}

.SortListItem {
  border-bottom: 1px solid #ffedae;
  padding-bottom: 3px;
  margin-bottom: 3px;
}

.SortOption img,
.SortRemove img {
  margin-bottom: -2px;
}

.SortItem { display: inline; }
.SortBottom { margin-right: 10px; }

.SortRemove {
  position: absolute;
  text-align: right;
  margin-left: 370px;
}

/* Timer Extension */

.Timer {
  position: absolute;
  top: 22px;
  left: 36px;
  color: #c7d3ea;
}
  
/* END PAGE BODY */

/* BEGIN DEBUG OPTIONS */

.DebugBar {
  clear: both;
  display: block;
  padding: 4px;
  background: #ff;
  border: 1px solid #c7d3ea;
  text-align: left;
  margin-bottom: 20px;
}

.Sql {
  border-top: 2px dashed #efefef;
  margin-top: 4px;
  padding-top: 2px;
  color: #ca0971;
}

/* END DEBUG OPTIONS */

/* vanilla/global.css */