Hi slicel,

Good work. Can you post your style.css (and other files) on the mailing list so that we can test it? In RC1, they have merged vanilla.css and style.css in one file style.css. But there seems to be some theming issues with the latest vanilla RC1 release (like those bullets on the sidepanel). That's one of the reasons we haven't improved the theme yet.

I am not a member of the mailing list.

I had hoped that the code-posting problem would have been fixed with the new vanilla.

If you do not want to do the color find-replace, I will try to think of a way to post the code in the forum.

vanilla.css

/*
Welcome to the Vanilla CSS File! Some things you should know:

1. There is a style.css file that is also included on every page of Vanilla. It
defines the common classes on all user-facing pages, including the user
profile page, activity page, and search results page.

2. This css file will be included on all Vanilla pages. Those pages are:
+ Discussions (All Discussions, Bookmarks, Your Discussions, etc)
+ Drafts
+ Categories
+ Comments
+ Start a New Discussion Form
+ Add a Comment Form

3. This file is broken down into the following sections:
+ Line 27: Panels / Sidebars
+ Line 59: Discussions
+ Line 164: Categories
+ Line 202: Comments
+ Line 430: Drafts
+ Line 471: Discussion & Comment Forms
*/



/* ======================================================== Panels / Sidebars */
#Panel a.Bookmark,
a.NewDiscussion {
padding: 6px 0;
display: block;
text-align: center;
font-size: 16px;
font-weight: bold;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
background: #6c0023 /* Banner Background Color */;
color: #fff /* Banner Font Color */;
text-decoration: none;
margin: 0 0 10px 0;
text-shadow: 0 1px 0 #242424;
}
a.NewDiscussion:hover {
background: #f0ba08 /* Menu Hover Background Color */;
color: #fff /* Menu Hover Font Color */;
text-shadow: 0 1px 0 #6c0023;
}
#Panel a.Bookmark {
background: #df8f06;
color: #fff;
}
#Panel a.Bookmark:hover {
background: #f0ba08;
color: #fff;
}
#Panel ul.Discussions {
border: 0;
}
ul.PanelDiscussions li {
text-align: left;
}
ul.PanelDiscussions li a {
float: none;
}
ul.PanelDiscussions li strong {
display: block;
}


/* ============================================================== Discussions */

/* Note: DataList is used in search results, vanilla discussions & drafts */
ul.DataList li {
margin: 0;
padding: 0 0 4px 0;
border-bottom: 1px solid #dbe3e6;
}
ul.DataList li li {
border: 0;
padding: 0;
}
ul.DataList,
ul.DataList li ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.DataList li ul li.Title {
float: left;
width: 560px;
}
ul.DataList li ul li.Meta {
clear: both;
}
ul.DataList li ul li.Title a {
border: 1px solid #eee;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
background: #fafafa;
margin: 4px 0;
padding: 2px 8px;
line-height: 130%;
color: #2b3033;
font-size: 105%;
display: block;
clear: left;
}
ul.DataList li ul li.Title strong {
display: block;
padding: 6px 0 0 6px;
margin: 0;
font-size: 110%;
font-weight: bold;
}
ul.DataList li ul li.Title strong a {
display: inline;
border: 0;
padding: 0;
margin: 0;
color: #522222 /* Body Link Font Color */;
background: none;
}
ul.DataList li ul li.Meta {
font-family: 'lucida grande','Lucida Sans Unicode', Tahoma, sans-serif;
margin-left: 5px;
font-size: 11px;
color: #80828c /* Meta Label Font Color */;
}
ul.DataList li ul li.Meta span,
ul.DataList li ul li.Meta span a,
ul.DataList li ul li.Meta strong {
margin-right: 12px;
}
ul.DataList li ul li.Meta strong {
background: #ff0;
padding: 2px 4px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
ul.DataList li ul li.Meta a {
color: #2b2d33 /* Meta Font Color */;
}
body.Discussions h1 {
margin: 0;
}
li.DiscussionRow ul.Discussion {
/* Fixes an IE7 Spacing issue */
display: inline !important;
}
ul.Announcements {
margin: 0 0 20px;
}
/* Note: The Vanilla Discussion List has the following classes applied to
individual list elements and can be styled:
+ Bookmarked: the user has bookmarked that topic
+ Announcement: the discussion has been announced
+ Mine: the user created the discussion
+ New: there are new comments since the last viewed the discussion
*/
.Mine { background: #f3eed6 /* Discussion My Background Color */; }
li.New { background: #ffd /* Discussion New Background Color */; }
ul.DataList li ul li.Meta a.Category {
background: #fafafa;
padding: 2px 4px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
ul.DataList li.Mine ul li.Meta a.Category {
background: #fafdcd;
}
ul.DataList li.New ul li.Meta a.Category {
background: #ffe;
}

/* =============================================================== Categories */
.Categories {
list-style: none;
margin: 0;
padding: 0;
}
body.Categories h1,
body.Categories #Content h2 {
margin: 0;
}
h1 span {
color: #555 /* Body Text Font Color */;
padding: 0 4px;
font-size: 70%;
}
body.Categories h1 a {
color: #000;
}
/* Note: This "More" style is custom to the categories page. It appears like
the MorePager listed above, but it is just a link to a different page. */
.More {
list-style: none;
margin: 1px 0 20px;
padding: 3px 6px;
text-align: right;
background: #d4d191;
}
.More a {
font-size: 13px;
font-weight: bold;
text-align: right;
}
.More a:hover {
color: #522222 !important;
text-decoration: underline;
}


/* ================================================================= Comments */
body.Discussion #Content {
margin-bottom: 20px;
}
body.Discussion #Content h2 {
font-size:140%;
font-weight:bold;
margin: 0;
color: #333;
padding: 6px 0;
line-height: 1.2;
}
body.Discussion #Content h2 span {
padding: 0 10px;
color: #777;
font-size: 12px;
}
.Preview,
.Preview li,
.Preview ul,
.Preview ul li,
#Discussion,
#Discussion li,
#Discussion ul,
#Discussion ul li {
list-style: none;
margin: 0;
padding: 0;
}
#Discussion {
margin-bottom: 1px;
}
#Discussion .Comment {
border-bottom: 1px solid #ddd;
}
/* Note: Fixes IE 7 Glitch */
*:first-child+html #Discussion .Comment {
overflow: hidden;
}
.Preview li ul.Info,
#Discussion li ul.Info {
font-family: 'lucida grande','Lucida Sans Unicode', Tahoma, sans-serif;
font-size: 11px;
color: #777 /* Meta Label Font Color */;
padding: 8px 0 0 8px;
}
.Preview li ul.Info {
padding: 0;
}
.Preview li ul.Info li.Author img,
#Discussion li ul.Info li.Author img {
height: 40px;
width: 40px;
border: 0;
margin: 0 10px 0 0;
float: left;
overflow: hidden;
background: #eee;
}
.Preview li ul.Info li,
#Discussion li ul.Info li {
display: inline;
line-height: 2.5;
}
.Preview li ul.Info li.Created,
#Discussion li ul.Info li.Created,
#Discussion li ul.Info li.Permalink {
padding-left: 10px;
}
.Preview li ul.Info li.Author a,
#Discussion li ul.Info li.Author a {
font-size: 15px;
font-weight: bold;
}
.Preview li .Body,
#Discussion li .Body {
clear: both;
padding: 1px 8px 2px;
line-height: 140%;
font-size: 100%;
}
.Body p {
font-family: 'lucida grande','Lucida Sans Unicode', Tahoma, sans-serif;
margin: 8px 0;
}
.Body blockquote {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;

padding: 4px 16px;
margin: 4px 0;
background: #ffc;
}
.Body code,
.Body pre {
display: block;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
background: #ff9;
padding: 4px 8px;
white-space: pre;
font-family: monospace;
overflow: auto;
}
.Body strong {
font-weight: bold;
}
.Body em {
font-style: oblique;
}
.Comment .Body ul,
.Comment .Body ol {
margin-left: 3em ! important;
}
.Comment .Body ol li {
list-style: decimal ! important;
}
.Comment .Body ul li {
list-style: disc ! important;
}
#Discussion fieldset,
#Discussion form {
margin: 0;
padding: 0;
}
div.Popup .Preview {
margin: 4px 10px 10px;
}
div.Popup .Preview h2 {
background: none;
border-bottom: 1px solid #bbb;
color: #000;
margin: 0 0 8px;
}
div.Popup ul.Preview li.Comment {
padding: 0;
}
div.Popup ul.Preview li.Comment div.Body {
min-height: 53px;
}
/* Note: CommentOption is presented to the user in place of the add comment form
when they don't have a valid session. */
.CommentOption {
margin: 1px 0 0;
padding: 3px 6px;
background: #d4d191;
color: #555 /* Body Text Font Color */;
}
/* Note: Back appears the same as MorePager... */
.Back {
margin: 1px 0 6px;
padding: 3px 6px;
background: #d4d191 /* Panel Background Color */;
text-align: left;
-moz-border-radius-bottomright: 2px;
-moz-border-radius-bottomleft: 2px;
-webkit-border-bottom-right-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
}
.Back a {
color: #522222 /* Panel Font Color */;
font-size: 12px;
font-weight: normal;
text-align: right;
}
.Back a:hover {
color: #522222 /* Panel Font Color */ !important;
text-decoration: underline;
}
/*
Note: Discussion & Comment Option (dropdown) Menu customizations. The layout
css for these is in /applications/garden/design/menu.css. Override them here.
*/
a.Bookmark,
a.Bookmarking {
float: right;
display: block;
background: url('star_light.png') center center no-repeat;
height: 22px;
width: 22px;
margin: 2px 2px 0 4px;
}
a.Bookmark span,
a.Bookmarking span {
display: none;
}
a.Bookmarked {
background: url('star_yellow.png') center center no-repeat;
}
a.Bookmarking {
background: url('star_blue.png') center center no-repeat;
}
ul.Discussion li.Options {
float: right;
height: 22px;
width: 120px;
}
ul.Options li.Parent strong {
display: block;
padding: 4px;
margin: 3px 4px 0 0;
font-family: 'lucida grande','Lucida Sans Unicode', Tahoma, sans-serif;
font-size: 10px;
font-weight: normal;
background: url('button_bg2.png') repeat-x center left #f8f8f8;
border: 1px solid #bbb;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
color: #555;
cursor: pointer;
line-height: 100%;
}
ul.Options li.Parent strong:hover {
color: #333;
border: 1px solid #888;
}
ul.Options li.Active strong:hover,
ul.Options li.Active strong {
color: #fff;
background: #9c9c9c !important;
border: 1px solid #9c9c9c;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
}
ul.Options li {
float: right;
}
ul.Options li.Active {
background: none;
}
ul.Options li.Active ul {
border: 1px solid #9c9c9c;
background: #fafafa;
-moz-border-radius-bottomleft: 2px;
-moz-border-radius-bottomright: 2px;
-webkit-border-bottom-left-radius: 2px;
-webkit-border-bottom-right-radius: 2px;
}
ul.Options li.Active ul li a {
background: none;
font-family: 'lucida grande','Lucida Sans Unicode', Tahoma, sans-serif;
}
ul.Options li.Active a {
background: #efefef;
color: #595959;
}
ul.Options li.Active a:hover {
background: #8d8d8d;
color: #fff;
}


/* =================================================================== Drafts */
body.Drafts h1 {
margin: 0;
}
ul.Drafts li ul {
display: inline;
}
ul.Drafts li ul li.Title {
float: none;
width: auto;
}
ul.Drafts li ul li.Title strong {
float: left;
margin: 0 0 2px;
}
ul.Drafts li ul li.Title a.DraftCommentLink {
clear: left;
display: block;
}
ul.Drafts li ul li.Title a.DeleteDraft {
float: right;
width: auto;
padding: 5px;
margin: 3px 1px 0 0;
font-size: 11px;
font-weight: normal;
color: #555;
cursor: pointer;
line-height: 100%;
}
ul.Drafts li ul li.Title a.DeleteDraft:hover {
color: #333;
background: url('button_bg2.png') repeat-x center left #f8f8f8;
border: 1px solid #888;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
padding: 4px;
text-decoration: none;
}

/* =============================================== Discussion & Comment Forms */
body.Discussion #CommentForm {
background: #d4d191 /* Panel Background Color */;
padding: 8px;
}
div.Popup #CommentForm {
background: none;
border: 0;
padding: 0;
}
#CommentForm h3 {
font-size: 115%;
color: #522222 /* Panel Font Color */;
font-weight: bold;
}
div.Popup #CommentForm h3 {
color: #000;
}
#CommentForm textarea {
width: 650px;
height: 100px;
min-height: 100px;
margin: 0 0 6px;
}
div.Popup #CommentForm textarea {
width: 470px;
max-height: 500px;
}
#CommentForm input.Button,
#DiscussionForm input.Button {
margin-right: 6px;
}
#DiscussionForm label {
font-size: 14px;
font-weight: bold;
color: #666;
}
body.Post #Panel {
display: none;
}
body.Post #Content {
width: auto;
}
body.Post #CommentForm h2,
#DiscussionForm h2 {
border: none;
color: #522222;
font-size: 140%;
font-weight: bold;
margin: 0;
padding: 6px;
}
body.Post #CommentForm form,
#DiscussionForm form {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
background: #d4d191 none repeat scroll 0 0;
border: 1px solid #bfb06b;
margin: 0;
padding: 20px;
}
body.Discussion #Content #CommentForm h2 {
font-size: 120%;
color: #522222;
border-bottom: 0;
line-height: 1;
padding: 0;
margin: 0 0 4px;
}
body.Discussion div.Popup #CommentForm textarea {
margin-top: 10px;
}
body.Post #CommentForm textarea,
#DiscussionForm textarea {
width: 930px;
height: 100px;
min-height: 100px;
max-height: 400px;
margin: 0 0 6px;
}
#DiscussionForm input.InputBox {
width: 930px;
margin-bottom: 10px;
}
#DiscussionForm div.Category {
padding: 0 0 10px;
}
#DiscussionForm div.Category label {
padding: 0 8px 0 0;
}
a.Cancel {
margin-left: 20px;
}
#DiscussionForm ul {
margin: 0 0 20px;
}
#DiscussionForm ul.PostOptions li {
display: inline;
padding: 0 8px 0 0;
}
#DiscussionForm ul.PostOptions label {
display: inline;
font-weight: normal;
font-size: 95%;
color: #555 /* Body Text Font Color */;
}

style.css

@import url('reset.css') /* NoFollow */;
/*
Welcome to the Generic Style CSS File! Some things you should know:

1. The reset.css file imported above breaks all elements down to a base style.

2. This file is included on all front-end/user-facing pages. Applications can
override this file in their own custom files (ie. vanilla.css or
conversations.css).

3. This file is broken down into the following sections:
+ General Styles & Typography
+ Header
+ Main Menu
+ Panels / Sidebars
+ Activities
+ Profile Page
+ Profile Tab Menu
+ Thumbnail Cropper
+ Footer
*/


/* ============================================== General Styles & Typography */
body {
color: #000;
font-family: 'lucida grande','Lucida Sans Unicode', tahoma, sans-serif;
font-size: 75%;
line-height: 1.7em;
background: #fff;
margin: 0;
padding: 0;
text-align: center;
font-size: small;
}
#Body {
width: 960px;
text-align: left;
margin: 0 auto;
}
#Body {
margin: 15px auto 0;
}
#Content {
float: left;
width: 680px;
margin: 0 0 40px;
}
.Hidden {
display: none;
}
.nowrap {
white-space: nowrap;
}
.Center {
text-align: center;
}
.Right {
text-align: right;
}
h1, h2, h3, h4, h5, h6 {
color: #000;
font-family: "Helvetica Neue",Helvetica,arial,sans-serif;
font-weight: normal;
margin: 0;
}
p {
margin: 0.5em 0 0 0;
line-height: 1.6em;
}
h1, h2 {
border-bottom:1px solid #bbb;
font-size:140%;
font-weight:bold;
margin-bottom:10px;
}
h3 {
font-size:140%;
}
h4 {
font-size: 120%;
color: #6C6C6C;
}
h5 {
font-size: 120%;
color: #6C6C6C;
}
a,
a:link,
a:visited,
a:active {
text-decoration: none;
color: #6c0023;
}
a:hover {
text-decoration: none;
color: #foba08;
}
input.DateBox,
input.InputBox,
input.SmallInput,
textarea {
font-family: 'lucida grande','Lucida Sans Unicode', tahoma, sans-serif;
color: #333;
font-size: 15px;
padding: 3px;
margin: 0;
width: 250px;
border: 1px solid #aaa;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
textarea.TextBox {
width: 500px;
height: 100px;
min-height: 100px;
}
#Popup textarea.TextBox {
width: 465px;
}
input.SmallInput,
input.InputBox {
padding: 6px 3px;
}
input.SmallInput:focus,
input.InputBox:focus,
textarea:focus {
background: #ffe;
}
textarea {
line-height: 128%;
}
select {
font-family: arial;
font-size: 14px;
color: #222;
margin: 0;
padding: 3px;
}
a.Button,
.Button {
cursor: pointer;
margin: 0;
font-size: 11px;
padding: 4px;
background: url('images/buttonbg.png') repeat-x center left #f8f8f8;
color: #522222;
text-shadow: 0 1px 0 #fff;
border: 1px solid #999;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 0px 0px 2px #999;
-moz-box-shadow: 0px 0px 2px #999;
-webkit-box-shadow: 0px 0px 2px #999;
}
input.Button {
font-size: 14px;
font-weight: bold;
}
.Button:hover {
color: #111;
border: 1px solid #666;
}
.Button:focus {
background: #eee;
}
.Loading {
height: 100px;
padding: 0 20px;
background: url('images/progress.gif') center center no-repeat;
}
.Progress {
padding: 10px 40px 10px 0;
background: url('images/progress.gif') center center no-repeat;
}
.TinyProgress {
padding: 10px 40px 10px 0;
background: url('images/progress_sm.gif') center center no-repeat;
}
/* Note: Messages are the yellow notices that appear at the top/center of the
page to notify users of things like drafts being saved, etc. */
div.Messages {
text-align: center !important;
position: fixed;
top: 0;
left: 0;
z-index: 200;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
font-size: 12px;
display: block;
width: 100%;
}
* html div.Messages {
position: absolute;
width: 100%;/*IE5.5*/
top: 0;
left: 0;
overflow: visible;
top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop);
}
div.Messages ul {
cursor: pointer;
width: auto !important;
border: 0 !important;
margin: 0 auto !important;
padding: 4px 8px !important;
-moz-border-radius-bottomleft: 2px;
-moz-border-radius-bottomright: 2px;
-webkit-border-bottom-left-radius: 2px;
-webkit-border-bottom-right-radius: 2px;
background: #ff9 !important;
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
box-shadow: 0px 0px 2px #333;
-moz-box-shadow: 0px 0px 2px #333;
-webkit-box-shadow: 0px 0px 2px #333;
}
div.Messages ul li {
text-align: left !important;
border: 0 !important;
color: #000 !important;
padding: 0 !important;
margin: 0 !important;
list-style-position: outside;
}
div.Errors ul {
background: #d50a0a !important;
}
div.Errors ul li {
color: #fff !important;
background: #d50a0a !important;
}
div.Deleted {
background: #f5f5f5;
border: 1px solid #dddddd;
margin: 10px 0 0;
padding: 6px 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
/* Note: Warning, Alert & Info are simple boxes that can be used to wrap message
strings & imply importance. */
.Warning {
background: #ffc;
border: 1px solid #ff9;
color: #000;
padding: 6px 8px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.Alert {
background: #d00;
border: 1px solid #b00;
color: #fff;
padding: 3px 6px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.Alert a {
color: #fff;
}
.Alert a:hover {
text-decoration: underline;
}
div.Info {
font-size: 13px;
background: #fafafa;
border: 1px solid #eee;
color: #888;
-moz-border-radius: 4px;
padding: 6px;
margin: 0 0 10px;
}
/* Note: The MessageModule (in /applications/dashboard/modules) wraps all messages
that it renders in a div with this DismissMessage class. */
div.DismissMessage {
margin: 6px 0 10px;
text-align: left;
}
div.DismissMessage p {
margin: 2px 0;
}
div.DismissMessage a.Dismiss {
font-family: arial;
float: right;
font-size: 22px;
font-weight: bold;
line-height: 120%;
color: #999;
}
div.DismissMessage a.Dismiss:hover {
color: #foba08;
}
/* Note: The close class is used on the "close" anchor in popups. */
a.Close {
color:#777;
font-family:arial;
font-size:20px;
font-weight:bold;
cursor:pointer;
padding: 0 2px;
}
a.Close:hover {
color: #333;
}
#PagerLess {
-moz-border-radius-topright: 2px;
-moz-border-radius-topleft: 2px;
-webkit-border-top-right-radius: 2px;
-webkit-border-top-left-radius: 2px;
margin-bottom: 1px;
text-align: left;
}
div.MorePager a.Loading {
border: 0 !important;
padding: 0 20px !important;
background: url('images/progress.gif') center center no-repeat !important;
}
#PagerMore {
margin-bottom: 1px;
}
.NumberedPager {
margin: 1px 0 0;
text-align: right;
font-weight: bold;
font-size: 16px;
}
#PagerBefore {
margin: 1px 0;
}
.NumberedPager a,
.NumberedPager span {
padding: 0 4px;
}
.NumberedPager span,
.NumberedPager a.Highlight {
color: #777;
}
.NumberedPager a.Next,
.NumberedPager span.Next,
.NumberedPager a.Previous,
.NumberedPager span.Previous {
font-size: 16px;
line-height: 10px;
}
.NumberedPager a.Next,
.NumberedPager span.Next {
margin-left: 6px;
}
.NumberedPager a.Previous,
.NumberedPager span.Previous {
margin-right: 6px;
}


/* =================================================================== Header */
#Head {
background: #bfb06b url(images/header.png) repeat-x top;
padding: 0;
text-align: right;
}
div#Search:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
body #Head h1 {
display: block;
font-weight: bold;
margin: 0;
padding: 21px 7px 0 0;
border: 0;
float: left;
line-height: 1;
}
#Head h1 a span {
font-size: 24px;
color:#f8efd1;
text-shadow:0 1px 0 #6c0023;
}
#Head h1 a:hover span {
color:#ffffff;
}
#Head form {
float: right;
width: 250px;
background: #fff;
padding: 0;
margin: 15px 0 0;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
#Head form input.InputBox {
width: 204px;
border: 0;
padding: 4px 2px 4px 0;
background: #fff;
margin: 0;
-moz-border-radius-topleft: 2px;
-moz-border-radius-bottomleft: 2px;
-webkit-border-top-left-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
color: #969696;
font-size: 13px;
}
#Head form input.Button {
border: 0;
width: 38px;
height: 26px;
background: #d4d191;
color: #6c0023;
padding: 3px 0 4px;
margin: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomright: 2px;
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-right-radius: 2px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
#Menu {
height: 28px;
padding: 0;
}
#Menu,
#Menu ul {
margin: 0;
padding: 0;
}
#Menu ul {
position: absolute;
visibility: hidden;
z-index: 100;
-moz-border-radius-bottomleft: 2px;
-moz-border-radius-bottomright: 2px;
-webkit-border-bottom-left-radius: 2px;
-webkit-border-bottom-right-radius: 2px;
}
#Menu li ul li.First {
margin-top: 2px;
}

#Menu li ul li.Last {
padding-bottom: 2px;
}
#Menu li {
line-height: 27px;
float: left;
position: relative;
display: block;
list-style: none;
padding: 0;
margin: 0 4px 0 0;
font-weight: bold;
text-align: left;
}
* html #Menu li {
display: inline;
}
* html #Menu ul {
left: 0;
top: 27px;
}
* html #Menu ul li {
display: block;
height: 1%;
width: 85px;
}
#Menu li
#Menu li a,
#Menu li a:hover,
#Menu li.Active,
#Menu li.Active a,
#Menu li.Active a:hover {
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
}
#Menu li ul li,
#Menu li ul li a,
#Menu li ul li a:hover,
#Menu li.Active ul li,
#Menu li.Active ul li a,
#Menu li.Active ul li a:hover {
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 0;
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
}
#Menu li ul li.Last a {
-moz-border-radius-bottomleft: 1px;
-moz-border-radius-bottomright: 1px;
-webkit-border-bottom-left-radius: 1px;
-webkit-border-bottom-right-radius: 1px;
}
#Menu li ul li {
margin: 0;
line-height: 22px;
font-weight: normal;
}
#Menu li ul li a {
height: auto;
}
#Menu a {
border: 0;
text-decoration: none;
position: relative;
display: block;
padding: 0 7px;
white-space: nowrap;
font-size: 11px;
height: 28px;
}
* html #Menu a {
display: inline;
padding: 6px 10px;
}
* html #Menu ul li a {
display: block;
padding: 3px 10px;
width: 85px;
}
#Menu ul li {
display: block;
float: none;
}
#Menu ul .Active .First {
padding-left: 1px;
}
#Menu li.NonTab,
#Menu li.NonTab a {
background: transparent;
border: 0;
font-weight: normal;
}
#Menu a span,
#Menu li.Active a span,
#Menu li.Highlight a:hover span {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
margin-left: 4px;
padding: 0 2px;
font-size: 9px;
line-height: 12px;
font-weight: normal;
}

/* Option (dropdown) Menus

Menu takes a z-index of 100
Option menu takes a z-index of 300

*/
ul.Options,
ul.Options ul {
margin: 0;
padding: 0;
display: none;
}
ul.Options {
z-index: 298;
}
ul.Options ul {
z-index: 300;
position: absolute;
}
ul.Options li {
float: right;
position: relative;
display: block;
list-style: none outside none;
padding: 0;
font-size: 11px;
line-height: 22px;
}
ul.Options h3 {
display: block;
cursor: pointer;
margin: 0;
padding: 0;
}
ul.Options li ul li {
float: none;
text-align: left;
margin: 0;
font-weight: normal;
}
ul.Options li ul li a {
width: 104px;
padding: 0 6px;
height: auto;
}
ul.Options a {
text-decoration: none;
display: block;
position: relative;
white-space: nowrap;
font-size: 11px;
}
ul.Options ul li {
display: block;
float: none;
}
ul.Options li.Parent strong {
display: block;
padding: 4px;
margin: 3px 4px 0 0;
font-size: 10px;
font-weight: normal;
background: url('images/buttonbg.png') repeat-x center left #f8f8f8;
border: 1px solid #bbb;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
color: #555;
cursor: pointer;
line-height: 100%;
}
ul.Options li.Parent strong:focus,
ul.Options li.Parent strong:hover {
color: #333;
border: 1px solid #888;
}
ul.Options li.Parent strong:focus {
background: #eee;
}
ul.Options li.Active strong:hover,
ul.Options li.Active strong {
color: #fff;
background: #9c9c9c !important;
border: 1px solid #9c9c9c;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
}
ul.Options li.Active {
background: none;
}
ul.Options li.Active ul {
border: 1px solid #9c9c9c;
background: #fafafa;
-moz-border-radius-bottomleft: 2px;
-moz-border-radius-bottomright: 2px;
-webkit-border-bottom-left-radius: 2px;
-webkit-border-bottom-right-radius: 2px;
}
ul.Options li.Active ul li a {
background: none;
}
ul.Options li.Active a {
background: #efefef;
color: #595959;
}
ul.Options li.Active a:hover {
background: #8d8d8d;
color: #fff;
}
ul.Options li.Parent strong:hover,
ul.Options li.Active strong:hover,
ul.Options li.Active strong,
ul.Options li.Active ul {
box-shadow: 0px 0px 2px #999;
-moz-box-shadow: 0 0 2px #999;
-webkit-box-shadow: 0px 0px 2px #999;
}
.Center {
text-align: center;
}


/* ================================================================ Main Menu */
div.Menu {
text-align: right;
width: 960px;
margin: 0 auto;
}
ul#Menu {
float: left;
margin: 0 auto;
padding: 22px 0 0 10px;
}
#Menu ul,
#Menu li.Active {
background: #df8f06;
}
#Menu a,
#Menu li.Active a {
color: #fff;
}
#Menu a:hover {
background: #f0ba08;
}
#Menu a:hover,
#Menu li.NonTab a:hover {
color: #fff !important;
}
/* Numbers next to menu items */
#Menu a span,
#Menu li.Active a span,
#Menu li.Highlight a:hover span {
background: #f0ba08;
color: #6c0023;
}


/* ======================================================== Panels / Sidebars */
#Panel {
width: 250px;
float: right;
}
div.Box {
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
background: #d4d191;
color: #888;
padding: 6px 10px;
margin: 0 0 10px;
box-shadow: 0px 0px 2px #999;
-moz-box-shadow: 0px 0px 2px #999;
-webkit-box-shadow: 0px 0px 2px #999;
}
div.Box h4 {
font-size: 110%;
color: #6c0023;
font-weight: bold;
margin: 0;
padding: 0 0 1px;
}
div.Box dl {
border-top: 1px solid #522222;
border-bottom: 1px solid #522222;
background: #df8f06;
padding: 3px;
overflow: hidden;
}
div.Box dl dt {
float: left;
width: 80px;
color: #555;
}
div.Box dl dd {
margin-left: 80px;
}
div.Box p {
font-size: 100%;
padding: 0 0 4px;
color: #555;
}
ul.PanelActivity {
border-top: 1px solid #522222;
border-bottom: 0;
}
ul.PanelActivity li {
background: #df8f06;
border-bottom: 1px solid #522222;
padding: 2px 4px;
color: #555;
}
ul.PanelActivity span {
padding: 0 4px;
}
ul.PanelActivity p {
padding: 0 4px;
display: inline;
font-size: 90%;
}
ul.PanelActivity li em {
padding-left: 5px;
color: #777;
font-size: 80%;
}
ul.PanelActivity li div.Story {
font-size: 85%;
}
ul.PanelInfo li {
background: #df8f06;
border-bottom: 1px solid #522222;
padding: 2px 4px;
text-align: right;
}
ul.PanelInfo {
border-top: 1px solid #522222;
border-bottom: 0;
}
ul.PanelInfo li strong {
font-weight: normal;
text-align: left;
font-weight: normal;
}
ul.PanelInfo li a {
float: left;
}
ul.PanelInfo div.Meta {
font-size: 11px;
}
ul.PanelInfo div.Meta span,
ul.PanelInfo div.Meta strong {
margin-right: 8px;
}
ul.PanelInfo div.Meta span a {
margin-left: 8px;
}
ul.PanelInfo div.Meta strong {
font-weight: normal;
display: inline;
padding: 1px 3px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
background: #FFFF00;
padding:2px 4px;
}
ul.PanelInfo li.Active {
background: #fff;
border-bottom: 1px solid #a3e6ff;
}
ul.PanelInfo li.Active a {
color: #6c0023;
}
ul.PanelActivity li.ShowAll,
ul.PanelInfo li.ShowAll {
font-weight: bold;
border: 0;
text-align: right;
background: none;
}
body.Profile ul.PanelInfo {
border-bottom: 1px solid #522222;
}
body.Profile ul.PanelInfo li {
border-bottom: 0;
text-align: left;
}
body.Profile ul.PanelInfo li a {
float: none;
}
a.BigButton {
text-align: center;
display: block;
cursor: pointer;
margin: 0 0 10px;
font-size: 15px;
font-weight: bold;
padding: 8px 0;
background: url('images/buttonbg.png') repeat-x center left #f8f8f8;
color: #522222;
text-shadow: 0 1px 0 #fff;
border: 1px solid #999;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 0px 0px 2px #999;
-moz-box-shadow: 0px 0px 2px #999;
-webkit-box-shadow: 0px 0px 2px #999;
}
a.BigButton:hover {
color: #111;
border: 1px solid #666;
box-shadow: 0px 0px 5px #aaa;
-moz-box-shadow: 0px 0px 5px #aaa;
-webkit-box-shadow: 0px 0px 5px #aaa;
}
a.BigButton:focus {
background: #eee;
box-shadow: 0px 0px 2px #999;
-moz-box-shadow: 0px 0px 2px #999;
-webkit-box-shadow: 0px 0px 2px #999;
}


/* ============================================================= Entry Screen */
body.Entry {
text-align: center;
}
body.Entry div.Panel {
display: none;
}
body.Entry #Content {
float: none;
margin: 0 auto;
width: 360px;
text-align: center;
}
body#dashboard_entry_handshake #Content {
width: 720px;
}
body#dashboard_entry_handshake ul.NewAccount {
float: left;
width: 330px;
margin-right: 29px;
border-right: 1px solid #522222;
}
body#dashboard_entry_handshake div.Info {

border: 1px solid #522222;
background: #d4d191;
color: #522222;
}
body.Entry #Content div.Box {
background: #6c0023;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border: 0;
margin: 0;
padding: 0;
}
body.Entry p {
text-align: left;
padding: 0 10px;
margin: 10px 0 10px;
}
body#dashboard_entry_leave p {
margin: 0;
padding: 20px 10px;
}
body#dashboard_entry_leave p.Leaving {
background: url('images/progress.gif') left center no-repeat;
margin: 0 0 0 14px;
padding: 20px 0 20px 50px;
}

body.Entry #Content h1 {
border: none;
color: #522222;
font-size:140%;
font-weight:bold;
padding: 6px;
margin: 0;
text-align: left;
}
body#dashboard_entry_handshake #Content h2 {
border: none;
color: #522222;
font-size:140%;
font-weight:bold;
padding: 6px 0;
margin: 0;
text-align: left;
}
body.Entry #Content form {
text-align: left;
padding: 10px 30px 20px;
}
body.Entry form ul li label {
font-size: 14px;
color: #474747;
font-weight: bold;
padding: 6px 0 0;
display: block;
}
body.Entry form ul li label.CheckBoxLabel,
body.Entry form ul li label.RadioLabel {
font-size: 12px;
font-weight: normal;
width: auto;
}
body.Entry input.DateBox,
body.Entry input.InputBox,
body.Entry textarea {
width: 290px;
}
body.Entry div.Popup input.DateBox,
body.Entry div.Popup input.InputBox,
body.Entry div.Popup textarea {
width: 250px;
}
span.Incorrect {
display: block;
color: red;
}
body.Entry input.Button {
margin: 10px 0 0;
}
#Form_User_SignIn li.Buttons span {
padding: 0 6px;
}
#Form_User_SignIn li.Buttons input.Button,
body.Entry li.Buttons input.Button {
margin: 10px 0;
}
#Form_User_Password,
body.Entry #Content #Form_User_Password {
padding-top: 0;
}
#dashboard_entry_index #Form_User_Password ul li label,
#dashboard_entry_signin #Form_User_Password ul li label {
padding: 0;
}

/* ================================================ DataList (Search Results) */
/* Note: DataList is used in search results, vanilla discussions & drafts */
div.Empty {
margin: 10px 0;
}
ul.DataList li.Item {
margin: 0;
padding: 4px 0;
border-bottom: 1px solid #bec8cc;
}
ul.DataList li.Item li.Item {
border-bottom: none;
}
ul.DataList li {
border: 0;
padding: 0;
}
ul.DataList div.Options {
width: 100px;
float: right;
}
ul.DataList div.OptionButton {
float: right;
*padding: 7px 0; /* IE 7 Fix */
}
ul.DataList a.Title {
display: block;
margin: 0;
font-size: 14px;
font-weight: bold;
}
ul.DataList div.Title {
display: block;
margin: 0;
}
ul.DataList div.Title a {
font-size: 120%;
font-weight: bold;
}
ul.DataList div.Meta {
font-size: 11px;
color: #70727c;
}
ul.DataList div.Excerpt {
font-size: 12px;
line-height: 1.4;
}
ul.DataList div.Excerpt a {
color: #333;
display: block;
}
ul.DataList div.Excerpt p {
display: inline;
padding: 0;
}
ul.DataList div.Meta span,
ul.DataList div.Meta span a,
ul.DataList div.Meta strong {
margin-right: 12px;
}
ul.DataList div.Meta strong {
background: #ffff00;
padding: 1px 4px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
ul.DataList div.Meta a {
color: #2b2d33;
}
ul.DataList a.Delete {
width: auto;
padding: 0 5px;
margin: 0 1px 0 0;
font-size: 11px;
font-weight: normal;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
color: #555;
cursor: pointer;
line-height: 1;
}
ul.DataList a.Delete:hover {
padding: 4px;
color: #333;
border: 1px solid #888;
background: url('images/buttonbg.png') repeat-x center left #f8f8f8;
}
ul.DataList a.Delete:focus {
background: #f8f8f8;
}
/* Condensed datalists make the main link & excerpt inline. */
ul.DataList div.Photo {
float: left;
padding: 0 10px 0 0;
}
ul.DataList div.Photo img {
display: block;
height: 43px;
width: 43px;
overflow: hidden;
}
ul.Condensed li,
li.Condensed {
clear: left;
}
ul.Condensed a.Title,
li.Condensed a.Title,
ul.Condensed div.Title,
li.Condensed div.Title {
display: inline;
padding: 0;
}
ul.Condensed div.Excerpt,
li.Condensed div.Excerpt,
ul.Condensed div.Excerpt a,
li.Condensed div.Excerpt a {
display: inline;
}

/* =============================================================== Activities */

body.Activity h1 {
margin: 0;
}
body.Profile ul.Activities {
margin-top: 10px;
border-top: 1px solid #ddd;
}
ul.Activities li.HasPhoto div.Title {
padding: 0;
}
ul.Activities a.Title,
ul.Activities div.Title,
ul.Activities div.Title a {
font-size: 14px;
}
ul.Activities div.Excerpt {
color: #80828C;
}
ul.Activities li.Condensed div.Excerpt {
color: #000;
font-size: 13px;
padding: 0 0 0 4px;
}
ul.Activities div.Excerpt a,
ul.Activities div.Meta a {
color: #6c0023;
}
ul.Activities div.Excerpt a:hover,
ul.Activities div.Meta a:hover {
color: #foba08;
}
ul.Activities div.Excerpt img {
padding: 2px;
border: 1px solid #999;
}
ul.Activities ul.DataList {
margin-left: 50px;
width: 400px;
}
ul.Activities div.ItemContent {
width: 631px;
}
ul.Activities li.HasPhoto div.ItemContent {
margin-left: 53px;
width: 578px;
}
ul.Activities li.Item li.HasPhoto div.ItemContent {
width: auto;
margin-left: 42px;
}
ul.Activities ul.DataList li {
background: #d4d191;
margin-bottom: 2px;
padding: 6px;
}
ul.Activities ul.DataList a.Title,
ul.Activities ul.DataList div.Title,
ul.Activities ul.DataList div.Title a,
ul.Activities ul.DataList div.Excerpt p {
font-size: 13px;
line-height: 1;
}
ul.HasPhoto div.Meta {
padding-left: 49px;
}
ul.Activities ul.DataList .HasPhoto div.Meta {
padding: 2px 0 0;
line-height: 1;
}
ul.Activities ul.DataList div.Photo img {
height: 32px;
width: 32px;
}
ul.Activities a.CommentLink,
ul.Activities a.CommentLink:hover {
font-size: 12px;
cursor: text;
background: #fff;
color: #bbb !important;
padding: 5px;
text-decoration: none;
border: 1px solid #aaa;
display: block;
line-height: 100%;
font-weight: normal;
}
ul.Activities li.CommentForm form div {
text-align: right;
}
ul.Activities li.CommentForm textarea.TextBox {
width: 380px;
min-height: 40px;
height: 40px;
margin-bottom: 2px;
font-size: 12px;
}
ul.Activities li.CommentForm input.Button {
font-size: 12px;
box-shadow: 0 0 1px #999;
-moz-box-shadow: 0 0 1px #999;
-webkit-box-shadow: 0 0 1px #999;
}


/* ============================================================== MessageList */
/* used for lists of message-based content (discussion comments, private
conversation messages, etc). */

ul.MessageList,
ul.MessageList li {
list-style: none;
margin: 0;
padding: 0;
}
ul.MessageList li.Item {
border-bottom: 1px solid #ddd;
padding: 10px 4px 4px 10px;
}
ul.MessageList div.Meta {
font-size: 11px;
color: #777;
}
ul.MessageList div.Meta span.Author img {
height: 40px;
width: 40px;
border: 0;
margin: 0 10px 0 0;
float: left;
overflow: hidden;
background: #eee;
}
ul.MessageList div.Meta span {
line-height: 2.5;
padding-left: 10px;
}
ul.MessageList div.Meta span.Author {
padding: 0;
}
ul.MessageList div.Meta span.Author a {
font-size: 15px;
font-weight: bold;
}
div.Preview {
text-align: left;
background: #df8f06;
padding: 1px 8px;
margin: 4px 0 8px;
}
div.Popup div.Preview {
margin: 0;
}
div.Preview div.Message,
ul.MessageList div.Message {
clear: both;
line-height: 140%;
font-size: 100%;
}
div.Preview div.Message p,
ul.MessageList div.Message p {
margin: 8px 0;
}
div.Preview div.Message blockquote,
ul.MessageList div.Message blockquote {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
padding: 4px 16px;
margin: 4px 0;
background: #ffc;
}
div.Preview div.Message code,
div.Preview div.Message pre,
ul.MessageList div.Message code,
ul.MessageList div.Message pre {
display: block;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
background: #ff9;
padding: 4px 8px;
white-space: pre;
font-family: monospace;
overflow: auto;
}
div.Preview div.Message strong,
ul.MessageList div.Message strong {
font-weight: bold;
}
div.Preview div.Message em,
ul.MessageList div.Message em {
font-style: oblique;
}
div.Preview div.Message ul,
div.Preview div.Message ol,
ul.MessageList div.Message ul,
ul.MessageList div.Message ol {
margin-left: 3em ! important;
}
div.Preview div.Message ol li,
ul.MessageList div.Message ol li {
list-style: decimal ! important;
}
div.Preview div.Message ul li,
ul.MessageList div.Message ul li {
list-style: disc ! important;
}

/* The "Foot" is at the bottom of the #Content section. Used for more results
links, sign in buttons, etc */
.Foot {
border-bottom: 1px solid #522222;
padding: 6px;
background: #d4d191;
text-align: right;
-moz-border-radius-bottomright: 2px;
-moz-border-radius-bottomleft: 2px;
-webkit-border-bottom-right-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
}
.Foot a.TabLink {
margin-left: 10px;
}
.Foot .Note {
line-height: 2.6;
float: left;
padding: 0 0 0 8px;
font-weight: bold;
}


/* ============================================================= Profile Page */
body.Profile #Content {
width: auto;
margin: 0 0 40px 20px;
width: 690px;
float: right;

}
body.Profile #Panel {
float: left;
width: 250px;
}
ul.SideMenu {
-moz-border-radius: 0;
-webkit-border-radius: 0;
background: none;
padding: 0;
margin: 0 0 10px;
}
ul.SideMenu li ul {
margin: 0;
padding: 0;
border: 0;
background: none;
}
ul.SideMenu li ul li {
border-bottom: 1px solid #bec8cc;
}
ul.SideMenu li ul li a {
padding: 0 8px;
display: block;
}
ul.SideMenu li ul li a:hover {
text-decoration: none;
background: #d4d191;
}
div.User {
line-height: 150%;
}
div.User,
div.User a {
text-decoration: none;
}
div.User h1 {
padding: 0 0 8px;
margin: 0;
line-height: 100%;
border: 0;
}
#Status {
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
background: #d4d191;
margin: 0;
padding: 8px 8px 0;
color: #999;
font-weight: normal;
line-height: 100%;
}
#Status p {
font-size: 120%;
color: #6c6c6c;
display: inline;
margin: 0;
padding: 0;
line-height: 1;
}
#Status a.Change {
text-transform: lowercase;
font-size: 11px;
text-decoration: none;
}
#Status a:hover {
text-decoration: underline;
}
div.User form {
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
background: #d4d191;
padding: 8px 8px 0;
}
div.User form input.InputBox {
width: 618px;
margin-right: 2px;
}
form.Activity {
display: block;
padding: 10px 10px 0 10px;
text-align: right;
}
form.Activity textarea {
width: 660px;
margin-bottom: 2px;
height: 60px;
min-height: 60px;
}
/* Invitations Form */
#Form_Invitation table {
width: 100%;
border-collapse: collapse;
margin: 10px 0;
background: #f8efd1;
border: 1px solid #df8f06;
}
#Form_Invitation table label {
font-size: 12px;
padding: 0px;
}
#Form_Invitation table tr.Last td,
#Form_Invitation table tr.Last th {
border-bottom: 0px;
}
#Form_Invitation table th,
#Form_Invitation table td {
font-weight: normal;
color: #555;
padding: 6px;
}
#Form_Invitation table thead th,
#Form_Invitation table thead td {
border-bottom: 1px solid #df8f06;
}
#Form_Invitation table tbody th {
font-weight: bold;
color: #000;
}
#Form_Invitation table tbody th,
#Form_Invitation table tbody td {
border-bottom: 1px solid #df8f06;
line-height: 150%;
}
#Form_Invitation table thead th {
font-weight: bold;
font-size: 13px;
color: #000;
}
#Form_Invitation table.AltRows tr.Alt th,
#Form_Invitation table.AltRows tr.Alt td,
#Form_Invitation table.AltColumns th.Alt,
#Form_Invitation table.AltColumns td.Alt {
background: #d4d191;
}
#Form_Invitation table.AltColumns tr.Alt {
background: none;
}
body.Profile ul.Notifications {
border-top: 0;
margin-top: 0;
}


/* ================================================================= Tab Menu */
div.MessageForm {
text-align: right;
}
div.MessageForm,
div.Tabs {
display: block;
border-bottom: 1px solid #522222;
padding: 5px 8px;
margin: 0;
background: #d4d191;
}
div.MessageForm div.Tabs {
padding: 0;
border: 0;
background: none;
text-align: left;
}
div.MessageForm div.Tabs ul {
display: inline;
}
div.Tabs li {
display: inline;
margin: 0;
}
div.MessageForm a.Cancel,
div.MessageForm a.Cancel:link,
div.MessageForm a.Cancel:hover,
div.MessageForm a.Cancel:active,
div.MessageForm a.Cancel:visited,
div.MorePager a,
div.MorePager a:link,
div.MorePager a:hover,
div.MorePager a:active,
div.MorePager a:visited,
a.TabLink,
a.TabLink:link,
a.TabLink:hover,
a.TabLink:active,
a.TabLink:visited,
div.Tabs li a,
div.Tabs li a:link,
div.Tabs li a:hover,
div.Tabs li a:active,
div.Tabs li a:visited {
margin: 0;
border: 1px solid #522222;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #d4d191;
display: inline;
font-weight: bold;
color: #6c0023;
text-decoration: none;
padding: 5px 10px;
line-height: 2.6;
}
div.MessageForm a.Cancel,
div.MessageForm a.Cancel:link,
div.MessageForm a.Cancel:hover,
div.MessageForm a.Cancel:active,
div.MessageForm a.Cancel:visited {
line-height: 1.2;
}
div.MessageForm a.Cancel:hover,
div.MorePager li a:hover,
a.TabLink:hover,
div.Tabs li a:hover {
background: #f0ba08;
}
a.Active,
div.Tabs li.Active a {
background: #fff;
color: #474747;
}
div.Tabs li a span {
line-height: 1;
font-size: 80%;
padding: 0 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
font-weight: normal;
background: #6c0023;
color: #f8efd1;
margin: 0 0 0 4px;
}
div.Tabs div.SubTab {
margin: 10px 0 0;
padding: 4px 8px;
background: #f0ba08;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
div.HeadingTabs {
padding: 8px 8px 8px 12px;
}
div.HeadingTabs ul {
display: inline;
float: right;
}
div.HeadingTabs div.SubTab {
font-size: 14px;
display: inline;
font-weight: bold;
background: none;
padding: 0;
line-height: 2.4;
}
div.SearchTabs input.InputBox {
width: 560px;
margin-right: 10px;
}


/* ======================================================== Thumbnail Cropper */
form.Thumbnail table {
width: 100%;
}
form.Thumbnail table td {
width: 50%;
}
form.Thumbnail table tr td {
vertical-align: top;
}
form.Thumbnail table tr th {
padding-right: 10px;
}
.jcropper-holder {
border: 1px black solid;
}
.jcrop-holder {
text-align: left;
}
.jcrop-vline, .jcrop-hline {
font-size: 0;
position: absolute;
background: white url('images/jcrop.gif') top left repeat;
}
.jcrop-vline { height: 100%; width: 1px !important; }
.jcrop-hline { width: 100%; height: 1px !important; }
.jcrop-handle {
font-size: 1px;
width: 7px !important;
height: 7px !important;
border: 1px #eee solid;
background-color: #333;
*width: 9px;
*height: 9px;
}
.jcrop-tracker {
*background-color: gray;
width: 100%; height: 100%;
}
.custom .jcrop-vline,
.custom .jcrop-hline {
background: yellow;
}
.custom .jcrop-handle {
border-color: black;
background-color: #6c0023;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
form.Thumbnail table {
width: 100%;
}
form.Thumbnail table td {
font-weight: normal;
}


/* =================================================================== Popups */
div.Popup div.Errors ul {
border: 1px solid #a00 !important;
}
div.Popup div.Messages {
text-align: left;
position: inherit;
top: auto;
left: auto;
z-index: auto;
margin: 10px 0 !important;
}
div.Popup div.Messages ul {
display: block;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
* html div.Popup div.Messages {
position: inherit;
width: auto;
top: auto;
left: auto;
overflow: auto;
}
div.Popup .Info {
margin-top: 10px;
}
div.Popup .Loading {
display: block;
}
div.Overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
div.Popup {
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 5000;
text-align: center;
}
div.Popup div.Body {
margin: 0px auto;
text-align: left;
position: relative;
padding: 0px;
background: #fff;
max-width: 500px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 8px solid #555;
box-shadow: 0px 0px 10px #333;
-moz-box-shadow: 0px 0px 10px #333;
-webkit-box-shadow: 0px 0px 10px #333;
}
div.Popup div.Body div.Body {
border: 0;
}
div.Popup div.Legal,
div.Popup .Content form {
max-height: 440px;
overflow: auto;
padding: 0 10px 10px;
}
div.Popup .Loading {
text-align: center;
}
div.Popup h1,
div.Popup h2 {
font-size:120%;
font-weight:bold;
margin-bottom: 0;
color: #fff;
background: #df8f06;
border-bottom: 1px solid #522222;
padding: 6px 9px 4px;
}
div.Popup .Footer {
background: #d4d191;
text-align: right;
padding: 2px 6px 0 0;
border-top:1px solid #522222;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
}
div.Popup h3 {
font-size: 120%;
font-weight: bold;
padding: 20px 0 10px;
}
div.Popup p {
padding: 6px 10px 10px;
}
div.Popup div.Legal p {
padding: 6px 0 10px;
}
div.Popup small {
font-size: 11px;
}
div.Popup form p {
padding: 0;
}
body.Profile #Form_Invitation ul li label,
body.Profile #Form_User ul li label,
div.Popup form ul li label {
color:#000;
display:block;
font-size:14px;
font-weight:bold;
margin: 10px 0 0;
}
body.Entry form ul li.Gender label.RadioLabel,
body.Profile #Form_User ul li.Gender label.RadioLabel,
div.Popup form ul li.Gender label.RadioLabel {
display: inline;
padding-right: 20px;
}
li.Gender {
margin-bottom: 10px;
}
body.Profile #Form_User ul li label.RadioLabel,
body.Profile #Form_User ul li label.CheckBoxLabel,
div.Popup form ul li label.RadioLabel,
div.Popup form ul li label.CheckBoxLabel {
font-weight: normal;

}
div.Profile #Form_User input.Button,
div.Popup input.Button {
margin: 4px 0 2px;
}
body.Entry div.Popup p {
color: #000;
}
div.Popup #Form_User div.Warning,
#dashboard_profile_picture #Form_User div.Warning {
margin: 6px 0;
}
div.SignInPopup div.Body {
max-width: 320px;
}
div.SignInPopup .Content form {
padding: 0 30px 10px;
}
div.SignInPopup div.Box {
margin: 0;
padding: 0;
background: none;
border: 0;
}
/* Serious Ajax Error Styles */
div.AjaxError {
white-space: pre;
overflow: auto;
padding: 10px;
}


/* ==================================================================== Legal */
div.Legal h3 {
padding: 0;
margin: 20px 0 0;
font-size: 120%;
font-weight: bold;
}
div.Legal ol {
list-style-position:outside;
list-style-type:decimal;
margin:0 30px 10px;
}
div.Legal ul {
list-style-position:outside;
list-style-type:disc;
margin:0 30px 10px;
}
div.Legal li {
padding: 5px 0;
}
div.Legal strong {
font-weight: bold;
}


/* =================================================================== Footer */
#Foot {
clear: both;
text-align: center;
margin: 2px 0;
padding: 4px 9px;
font-size: 13px;
color: #ddd;
line-height: 1;
}
#Foot a {
color: #ccc;
}
#Foot a:hover {
color: #aaa;
}
#Foot div {
width: 960px;
padding: 6px 0;
margin: 20px auto 0;
text-align: left;
}



/* ================================ Vanilla ================================= */

#Panel ul.Discussions {
border: 0;
}
ul.PanelDiscussions li {
text-align: left;
}
ul.PanelDiscussions li a {
float: none;
}
ul.PanelDiscussions li strong {
display: block;
line-height: 1.5;
}

/* ============================================================== Discussions */

/* Note: The Vanilla Discussion List has the following classes applied to
individual list elements and can be styled:
+ Bookmarked: the user has bookmarked that topic
+ Announcement: the discussion has been announced
+ Mine: the user created the discussion
+ New: there are new comments since the last viewed the discussion
*/
.Mine { background: #df8f06; }
/* li.New { background: #fffec1; } */
ul.DataList div.Meta a.Category {
background: #fafafa;
padding: 2px 4px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
ul.DataList li.Mine div.Meta a.Category {
background: #f8efd1;
}
/*
ul.DataList li.New div.Meta a.Category {
background: #fffed7;
}
*/
ul.DataList div.Meta span.Announcement {
background: #777777;
color: #ffffff;
padding: 1px 4px;
-moz-border-radius: 2px;
font-weight: bold;
}
ul.DataList div.Meta span.Closed {
background: #555555;
color: #ffffff;
font-weight: bold;
padding: 1px 4px;
-moz-border-radius: 2px;
}


/* ================================================================= Comments */
body.Discussion #Content {
margin-bottom: 20px;
}
ul.Discussion {
margin-bottom: 1px;
}
/*
Note: Discussion & Comment Option (dropdown) Menu customizations. The layout
css for these is in /applications/garden/design/menu.css. Override them here.
*/
a.Bookmark,
a.Bookmarking {
float: right;
display: block;
background: url('images/star_sprite.png') top center no-repeat;
height: 22px;
width: 22px;
margin: 2px 4px 0 4px;
}
a.Bookmark span,
a.Bookmarking span {
display: none;
}
a.Bookmarked {
background: url('images/star_sprite.png') center center no-repeat;
}
a.Bookmarking {
background: url('images/star_sprite.png') bottom center no-repeat;
}
body.Discussion a.Bookmark {
margin: 13px 8px;
}

/* =================================================================== Drafts */
ul.Discussions div.ItemContent,
ul.Drafts div.ItemContent {
margin: 0 0 0 9px;
}
ul.Drafts div.ItemContent a.Title,
ul.Discussions div.ItemContent a.Title {
max-width: 580px;
}

/* =============================================== Discussion & Comment Forms */
li.Editing {
background: #df8f06;
}
div.CommentForm textarea {
width: 656px;
height: 100px;
min-height: 100px;
margin: 0 0 6px;
}
div.Comment div.CommentForm {
background: none;
padding: 6px 4px;
border: 0;
clear: left;
}
#DiscussionForm label {
font-size: 14px;
font-weight: bold;
color: #666;
}
body.Post #Panel {
display: none;
}
body.Post #Content {
width: auto;
}
#DiscussionForm h2 {
border: none;
color: #522222;
font-size: 140%;
font-weight: bold;
margin: 0;
padding: 6px;
}
#DiscussionForm form {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
background: #6c0023 none repeat scroll 0 0;
border: 1px solid #7caccb;
margin: 0;
padding: 20px;
}
#DiscussionForm textarea {
width: 910px;
height: 100px;
min-height: 100px;
margin: 0 0 6px;
}
#DiscussionForm input.InputBox {
width: 910px;
margin-bottom: 10px;
}
#DiscussionForm div.Category {
padding: 0 0 10px;
}
#DiscussionForm div.Category label {
padding: 0 8px 0 0;
}
div.CommentForm a.Cancel {
float: left;
}
#DiscussionForm ul {
margin: 0 0 20px;
}
#DiscussionForm ul.PostOptions li {
display: inline;
padding: 0 8px 0 0;
}
#DiscussionForm ul.PostOptions label {
display: inline;
font-weight: normal;
font-size: 95%;
color: #555;
}

/* ============================== Conversations ============================= */
textarea.MultiComplete {
height: 20px;
padding: 3px 0;
width: 400px;
text-align: left;
}
.ac_results {
padding: 0;
border: 1px solid #bbb;
border-top: 0;
background-color: white;
overflow: hidden;
z-index: 99999;
}
.ac_results ul {
width: 100%;
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;
}
.ac_results li {
margin: 0;
padding: 5px;
cursor: default;
display: block;
/*
if width will be 100% horizontal scrollbar will apear
when scroll mode will be used
*/
/*width: 100%;*/
font-size: 12px;
/*
it is very important, if line-height not setted or setted
in relative units scroll will be broken in firefox
*/
line-height: 16px;
overflow: hidden;
border-bottom: 1px solid #bbb;
text-align: left;
}
.ac_lastitem {
border-bottom: 0 !important;
}
.ac_results strong {
font-weight: bold;
background: #daf4fd;
}
.ac_over strong {
font-weight: bold;
background: #df8f06;
}
.ac_over {
background: #f0ba08;
color: #fff;
}
div.AddPeople h4 {
border-bottom: 0px;
}
#Panel input.InputBox,
div.AddPeople textarea.MultiComplete {
width: 228px;
margin-bottom: 2px;
}
div.AddPeople form div {
text-align: right;
}


/* ============================================================ Conversations */
fieldset {
padding: 0px !important;
}
h2.NewConversation {
float: right;
}
h2.NewConversation a {
font-weight: bold;
}
body.Conversations h2 {
margin: 0;
}
ul.Conversations li.New {
background: #fffec1;
}
ul.Conversations li.Active {
cursor: pointer;
background: #ffe;
}
ul.Conversations li.HasPhoto {
padding: 4px 5px;
}
ul.Conversations div.ItemContent {
margin:0 0 0 5px;
}


/* ========================================================= Add Message Form */
#MessageForm {
background: #f8efd1;
padding: 4px 8px 8px;
margin: 1px 0 0;
-moz-border-radius-bottomleft: 2px;
-moz-border-radius-bottomright: 2px;
-webkit-border-bottom-left-radius: 2px;
-webkit-border-bottom-right-radius: 2px;
}
#MessageForm h2 {
font-size: 115%;
color: #df8f06;
font-weight: bold;
border: 0;
}
#MessageForm form div {
text-align: right;
}
#MessageForm textarea {
width: 655px;
height: 100px;
min-height: 100px;
margin-bottom: 2px;
}


/* ==================================================== New Conversation Form */
body.add #Panel {
display: none;
}
body.add #Content {
width: auto;
}
#ConversationForm form {
-moz-border-radius:2px 2px 2px 2px;
background:none repeat scroll 0 0 #6c0023;
border:1px solid #7caccb;
margin:0;
padding:20px;
text-align: right;
}
#ConversationForm h2 {
color:#522222;
font-size:140%;
font-weight:bold;
margin:0;
padding:6px;
text-align: left;
border: 0;
}
#ConversationForm label {
display: block;
text-align: left;
color:#666666;
font-size:14px;
font-weight:bold;
}
#ConversationForm textarea.MultiComplete {
width: 910px;
}
#ConversationForm .TextBox {
width: 910px;
height: 100px;
min-height: 100px;
margin: 8px 0 6px;
padding: 0;
}
body.Conversations a.Cancel {
margin-left: 20px;
}
div.Popup #ConversationForm form {
background: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
padding: 10px;
}
div.Popup #ConversationForm h2 {
color: #fff;
font-size: 120%;
font-weight: bold;
padding: 6px 9px 4px;
}
div.Popup #ConversationForm textarea.MultiComplete,
div.Popup #ConversationForm .TextBox {
width: 478px;
}

Anyone can test or preview the css by saving a "complete" forum page and deleting and replacing the css code in the folder's css files.

It would be easier to copy and paste the code if the vanilla forum handled code better.

Spam user has been deleted.

I posted a screen shot of slitaz css as my picture with a larger version on my user page.