Released: 01 Jan 2012 06:00
Version: 1.03.140527

The WebBrand Series is the second major set of Wikidot themes that I had made, but the first set to utilize the powers of CSS3 which allows for the easy addition of rounded corners, basic animations, shadow effects, and more. Amalgamating my prior experience with this new tool has manifested itself into an elegant, yet soft, theme meant for blogs, corporations, and educational sites.

WebBrand Series
Logo

The WebBrand Series features a set of 11 variations based on elements in nature:

Import

You can use this theme by including the below code:

@import url('http://publicvar.wikidot.com/csstheme:webbrand-series/code_');

Source Code

/** WebBrand CSS Theme
 *  Author: Timothy Foster (publicvar.wikidot.com)
 *  Version: 1.03.140527
 *  Licensed under CC BY 4.0
 * ********************************************************/
 
/* Imports
=============================*/
@import url(http://snippets.wdfiles.com/local--code/sp-css-import);
 
/* Global
=============================*/
p{    line-height: 1.4em; }
a{
    color: #658515;
    text-decoration: none;
    background: none;
}
a:hover{
    text-decoration: underline;
    background: none;
}
a.newpage{    color: #AAA; }
a.newpage:hover{    color: #A2A2A2; }
div.buttons input, input.button,
button, a.button,
.pager span.target a,
.owindow .button-bar a,
.new-post a{
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding: 6px 12px;
    background-color: #CCDE9A;
    background-image: -moz-linear-gradient(top,#CCDE9A,#BFD683);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#CCDE9A), to(#BFD683));
    box-shadow: 0 0 4px -2px #888;
    -moz-box-shadow: 0 0 4px -2px #888;
    -webkit-box-shadow: 0 0 4px -2px #888;
    transition: all 250ms;
    -moz-transition: all 250ms;
    -webkit-transition: all 250ms;
    -o-transition: all 250ms;
}
div.buttons input:hover, input.button:hover,
button:hover, a.button:hover,
.pager span.target a:hover,
.owindow .button-bar a:hover,
.new-post a:hover{
    background-color: #F5F5F5;
    background-image: -moz-linear-gradient(top,#FAFAFA,#F3F3F3);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#F3F3F3));
    text-shadow: 0 0 1px #999;
    text-decoration: none;
}
div.buttons input:active, input.button:active,
button:active, a.button:active,
.pager span.target a:active,
.owindow .button-bar a:active,
.new-post a:active{
    background-color: #F0F0F0;
    background-image: -moz-linear-gradient(top,#F5F5F5,#EDEDED);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#F5F5F5), to(#EDEDED));
}
input.text, input[type=text], textarea{
    border: 1px solid #CCC;
    padding: 3px 6px;
    background-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
input.text:focus, input[type=text]:focus, textarea:focus{
    border: 1px solid #658515;
}
 
/* Outer Frame
=============================*/
body{
    background-image: url(http://themes.wikidot.com/local--files/webbrand/brand_back.png);
    font-family: Arial, Helvetica, sans-serif;
}
#container-wrap{
    width: 950px;
    margin: auto;
}
 
/* Header
=============================*/
#header{
    height: 150px;
    padding-left: 18px;
}
#header h1, #header h2{    font-family: Georgia, serif; }
#header h1{
    font-size: 40px;
    font-weight: normal;
    letter-spacing: 1px;
    margin: 0;
    padding: 4px 0 0 0;
    text-shadow: 1px 1px 2px rgba(90, 90, 90, 0.4);
    word-spacing: -6px;
}
#header h2{
    color: #40331F;
    font-size: 10px;
    font-weight: normal;
    letter-spacing: 2px;
    margin: 0;
    padding: 4px 0 0 80px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
#header h1 a{
    transition: color 500ms;
    -moz-transition: color 500ms;
    -webkit-transition: color 500ms;
    -o-transition: color 500ms;
}
#header h1 a:hover{
    text-decoration: none;
    color: #40331F
}
 
/* Account Options
=============================*/
#login-status{
    font-size: 80%;
    color: #696969;
}
#login-status .printuser a{    visibility: hidden; }
#login-status a{
    color: #727272;
    transition: color 250ms;
    -moz-transition: color 250ms;
    -webkit-transition: color 250ms;
    -o-transition: color 250ms;
}
#login-status a:hover{
    color: #444;
    text-decoration: none;
}
#account-topbutton{
    background-color: #CCC;
    border: none;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
#account-options{
    border: 1px solid #AAA;
    box-shadow: 0 0 5px -2px #777;
    -moz-box-shadow: 0 0 5px -2px #777;
    -webkit-box-shadow: 0 0 5px -2px #777;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    text-align: center;
    background-color: #F5F5F5;
    background-image: -moz-linear-gradient(top,#FAFAFA,#F3F3F3);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#F3F3F3));
    width: 130px;
}
#account-options li:nth-child(1),
#account-options li:nth-child(2),
#account-options li:nth-child(3),
#account-options li:nth-child(5){    display: none; }
 
/* Search Box
=============================*/
#search-top-box{
    width: 250px;
    right: 10px; top: 80px;
    height: 22px;
    border: 1px solid #AAA;
    background-color: #FAFAFA;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
#search-top-box input.text{
    border: none;
    background: none;
    height: 20px;
    width: 212px;
    color: #555;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    padding: 1px 5px;
}
#search-top-box input.text.empty{
    color: #AAA;
    font-style: italic;
}
#search-top-box input.button{
    text-indent: -9999px;
    border: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 1px 0;
    background-color: transparent;
    background-image: url(http://themes.wikidot.com/local--files/webbrand/brand_searchIcon.png);
    background-repeat: no-repeat;
    background-position: center center;
    transition: background-color 500ms;
    -moz-transition: background-color 500ms;
    -webkit-transition: background-color 500ms;
    -o-transition: background-color 500ms;
}
#search-top-box input.button:hover{    background-color: #EAEAEA; }
 
/* Top Bar
=============================*/
#top-bar{
    display: block;
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    background-image: url(http://themes.wikidot.com/local--files/webbrand/brand_webTop.png);
    background-repeat: repeat-x;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    height: 40px;
    box-shadow: 0 0 5px -2px #777;
    -moz-box-shadow: 0 0 5px -2px #777;
    -webkit-box-shadow: 0 0 5px -2px #777;
    border: 1px solid #AAA;
}
#top-bar > ul{
    float: left;
    padding: 0;
    height: 40px;
}
#top-bar ul li a{
    color: #222A19;
    height: 24px;
    margin: 3px 0;
    padding: 8px 10px 0;
    background: none;
    font-size: 11pt;
    font-weight: bold;
    text-shadow: 0 0 1px #999;
    box-shadow: inset 0 0 4px rgba(195,195,195,0.0);
    -moz-box-shadow: inset 0 0 4px rgba(195,195,195,0.0);
    -webkit-box-shadow: inset 0 0 4px rgba(195,195,195,0.0);
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border: 1px solid;
    border-color: transparent;
    transition: color 400ms, background 400ms, box-shadow 400ms, border-color 400ms;
    -moz-transition: color 400ms, background 400ms, box-shadow 400ms, border-color 400ms;
    -webkit-transition: color 400ms, background 400ms, box-shadow 400ms, border-color 400ms;
    -o-transition: color 400ms, background 400ms, box-shadow 400ms, border-color 400ms;
}
#top-bar ul li a:hover{
    color: #525A69;
    border-color: rgba(156,156,156,1.0);
    text-decoration: none;
    background: rgba(240,240,240,0.1);
    box-shadow: inset 0 0 2px rgba(175,175,175,0.9);
    -moz-box-shadow: inset 0 0 2px rgba(175,175,175,0.9);
    -webkit-box-shadow: inset 0 0 2px rgba(175,175,175,0.9);
}
 
#top-bar li ul{
    width: 200px;
    opacity: 0;
    margin-left: 75px;
    background-color: #F5F5F5;
    background-image: -moz-linear-gradient(top,#FAFAFA,#F3F3F3);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#F3F3F3));
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: 0 0 5px -2px #777;
    -moz-box-shadow: 0 0 5px -2px #777;
    -webkit-box-shadow: 0 0 5px -2px #777;
    border: 1px solid #AAA;
    transition: all 1s;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
}
#top-bar li:hover ul{
    opacity: 1;
    margin-left: 0;
}
#top-bar li ul li a{
    font-size: 10pt;
    background: none;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    height: 20px;
}
#top-bar li ul li a:hover{
    box-shadow: inset 0 0 4px rgba(195,195,195,0.0);
    -moz-box-shadow: inset 0 0 4px rgba(195,195,195,0.0);
    -webkit-box-shadow: inset 0 0 4px rgba(195,195,195,0.0);
    border-color: rgba(156,156,156,0.0);
    background: rgba(240,240,240,0.0);
    color: #658515;
}
#top-bar li li ul{    display: none !important; }
 
/* Main Content
=============================*/
#content-wrap{
    background: #FFF;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: 0 0 3px #777;
    -moz-box-shadow: 0 0 3px #777;
    -webkit-box-shadow: 0 0 3px #777;
    margin: 2px 10px;
    padding-bottom: 6px;
}
#main-content{    margin: 10px 250px 0 1em; }
#page-title{
    font-size: 24pt;
    border-bottom: none;
}
#main-content h1{    font-size: 20pt; }
#main-content h2{    font-size: 18pt; }
#main-content h3{    font-size: 16pt; }
#main-content h4{    font-size: 14pt; }
#main-content h5{    font-size: 13pt; }
#main-content h6{    font-size: 12pt; }
#main-content h4,
#main-content h5,
#main-content h6{    font-style: italic; }
div.code{
    border-left: 2px solid #B1D493;
    border-right: 1px solid #B1D493;
    border-top: none;
    border-bottom: none;
    background-color: #F6FFED;
    padding-left: 4px;
}
div.code pre{
    border-left: 1px dashed #B1D493;
    padding: 5px .6em;
}
#toc{
    border: 1px solid #AAA;
    box-shadow: 0 0 4px -2px #777;
    -moz-box-shadow: 0 0 4px -2px #777;
    -webkit-box-shadow: 0 0 4px -2px #777;
    background-color: #F5F5F5;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
#toc-action-bar{    display: none; }
#page-options-bottom-2{    font-size: 80%; }
#breadcrumbs{
    border: 1px solid #AAA;
    box-shadow: 0 0 4px -2px #777;
    -moz-box-shadow: 0 0 4px -2px #777;
    -webkit-box-shadow: 0 0 4px -2px #777;
    background-color: #F5F5F5;
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    padding: 4px 10px;
    font-size: 80%;
    text-transform: uppercase;
    letter-spacing: 1pt;
    margin-bottom: 4px;
}
.error-block{    text-align: center; }
.pager span.target a{
    padding: 3px 5px;
    color: #333;
}
.pager .pager-no{    display: none; }
.pager .current{
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    color: #222;
    border: 1px solid #AAA;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding: 4px 6px;
    box-shadow: 0 0 4px -2px #888;
    -moz-box-shadow: 0 0 4px -2px #888;
    -webkit-box-shadow: 0 0 4px -2px #888;
    background-color: #F5F5F5;
    background-image: -moz-linear-gradient(top,#FAFAFA,#F3F3F3);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#F3F3F3));
    text-shadow: 0 0 1px #999;
}
.optionstd a{
    color: #555;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-color: #AAA;
}
#page-version-info{    display: none; }
 
/* Side Bar
=============================*/
#side-bar{
    float: right;
    width: 200px;
    margin: 10px 0 0 1em;
}
#side-bar h1, #side-bar h2,
#side-bar h3, #side-bar h4{
    margin: 4px 0;
    font-family: Georgia, serif;
    color: #658515;
    letter-spacing: 1px;
    font-weight: bold;
}
#side-bar h1{    font-size: 14pt; }
#side-bar h2{    font-size: 12pt; }
#side-bar h3{    font-size: 11pt; }
#side-bar h4{    font-size: 10pt; }
#side-bar p{
    font-size: 90%;
    color: #444;
}
#side-bar ul{
    list-style: none;
    padding-left: 1em;
}
#side-bar li a{
    display: block;
    padding: 0 0 5px 0;
    font-size: 110%;
    border-right: 2px solid #EEE;
    transition: 600ms border-color;
    -moz-transition: border-color 600ms linear, padding-left 300ms linear;
    -webkit-transition: border-color 600ms linear, padding-left 300ms linear;
    -o-transition: border-color 600ms linear, padding-left 300ms linear;
}
#side-bar li a:hover{
    text-decoration: none;
    border-color: #BED272;
    padding-left: 6px;
}
 
/* Footer and License
=============================*/
#footer,
#license-area{    font-size: 80%; }
 
/* Forum
=============================*/
blockquote{
    border: none;
    border-top: 2px solid #658515;
    border-bottom: 1px solid #658515;
    color: #555;
    font-style: italic;
    background-color: #F8F8F8;
    background-image: -moz-linear-gradient(top,#F2F2F2,#FAFAFA);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#F2F2F2), to(#FAFAFA));
}
 
/* All In-Built Hovertips
=============================*/
.hovertip{
    border: 1px solid #777 !important;
    background-color: rgba(50,50,50,0.9) !important;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0 0 4px -2px #777;
    -moz-box-shadow: 0 0 4px -2px #777;
    -webkit-box-shadow: 0 0 4px -2px #777;
    max-width: 600px;
}
.hovertip .content{
    margin: 3px;
    font-size: 80%;
    color: #F5F5F5;
    text-shadow: 1px 1px 1px -1px #EEE;
}
 
/* Wikidot Tables
=============================*/
table.wiki-content-table{
    border-collapse: separate;
    border-spacing: 2px;
    border: none;
    min-width: 300px;
}
table.wiki-content-table th{
    color: #222;
    border: none;
    background-color: #BCCE8A;
    text-align: left;
    font-weight: bold;
    padding: 1px 3px 1px 4px;
}
table.wiki-content-table td{
    border: none;
    color: #444;
    font-size: 90%;
    background: #F2F2F2;
    padding: 1px 3px 1px 4px;
}
 
/* Action Area
=============================*/
/* Editor Panel thanks to leiger */
#np-editor-panel,
#wd-editor-toolbar-panel,
#post-edit-panel{
    height: 30px;
    position: relative;
    overflow: hidden;
    -webkit-transition: height 450ms ease-in-out;
    -moz-transition: height 450ms ease-in-out;
    -o-transition: height 450ms ease-in-out;
    -ms-transition: height 450ms ease-in-out;
    transition: height 450ms ease-in-out;
}
#np-editor-panel:hover,
#wd-editor-toolbar-panel:hover,
#post-edit-panel:hover{    height: 90px; }
div.change-textarea-size{    visibility: hidden; }
.edit-page-bottomtable{    width: 100%; }
 
/* New Wikidot Editor Buttons
By Matt Gentile at Icondeposit.com 
.wd-editor-toolbar-panel a{
    margin: 0;
    border: none;
    background-color: transparent !important;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -o-border-radius: 3px;
        box-shadow: 0px 1px 3px rgba(0,0,0,0.18);
        -webkit-shadow: 0px 1px 3px rgba(0,0,0,0.18);
        -moz-shadow: 0px 1px 3px rgba(0,0,0,0.18);
        -o-shadow: 0px 1px 3px rgba(0,0,0,0.18);
}
.wd-editor-toolbar-panel a:hover{
    border: none;
}
.wd-editor-toolbar-panel a:active {
        box-shadow: none;
        -webkit-shadow: none;
        -moz-shadow: none;
        -o-shadow: none;
}
.wd-editor-toolbar-panel a {
    background-image: url(http://icondeposit.wdfiles.com/local--files/design%3A4/wdb.png);
}
.wd-editor-toolbar-panel a:hover {
    background-image: url(http://icondeposit.wdfiles.com/local--files/design%3A4/wdbhover.png);
}
.wd-editor-toolbar-panel a:active {
    background-image: url(http://icondeposit.wdfiles.com/local--files/design%3A4/wdbactive.png);
}
/* */
 
/* OWindow
=============================*/
.owindow{
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background: #CCDE9A;
    background: rgba(204,222,154,0.8);
    padding: 0 10px 10px 10px;
    border: 1px solid #333;
    box-shadow: 0 0 5px -1px #FFF;
    -moz-box-shadow: 0 0 5px -1px #FFF;
    -webkit-box-shadow: 0 0 5px -1px #FFF;
    color: #555;
}
.owindow div.title{
    background: none;
    padding: 7px 0 5px 6px;
    color: #333;
    font-size: 14pt;
    text-transform: capitalize;
    letter-spacing: 1px;
}
.owindow div.content{
    background-color: #F5F5F5;
    background-image: -moz-linear-gradient(top,#FAFAFA,#F3F3F3);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#F3F3F3));
    margin: 0;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
.owindow div.content h1{    font-size: 18pt; }
.owindow.error div.content h1{    font-style: italic; }
.owindow div.button-bar{
    position: absolute;
    top: 7px; right: 12px;
    padding: 0;
    margin: 0;
    height: 20px;
}
.owindow div.button-bar a{
    position: static;
    display: inline-block;
    text-indent: -9999px;
    font-size: 0pt;
    padding: 0;
    margin-left: 5px;
    height: 20px;
    width: 20px;
    background: none;
    background-image: url(http://themes.wikidot.com/local--files/webbrand/brand_close.png);
    border: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    opacity: 0.25;
}
.owindow div.button-bar a[class~='button-yes,-revert'],
.owindow div.button-bar a[class~='button-yes,-delete'],
.owindow div.button-bar a.button-rename,
.owindow div.button-bar a.button-move,
.owindow div.button-bar a.button-edit-draft{
    background-image: url(http://themes.wikidot.com/local--files/webbrand/brand_confirm.png);
}
.owindow div.button-bar a:hover{
    background: none;
    background-image: url(http://themes.wikidot.com/local--files/webbrand/brand_close.png);
    opacity: 0.7;
}
.owindow div.button-bar a[class~='button-yes,-revert']:hover,
.owindow div.button-bar a[class~='button-yes,-delete']:hover,
.owindow div.button-bar a.button-rename:hover,
.owindow div.button-bar a.button-move:hover,
.owindow div.button-bar a.button-edit-draft{
    background-image: url(http://themes.wikidot.com/local--files/webbrand/brand_confirm.png);
}
.owindow .content div.button-bar{    position: static; }
.owindow .content div.button-bar a:first-child{
    position: absolute;
    top: 7px; right: 12px;
}
.owindow .content div.button-bar a:last-child,
#edit-recheck-lock{
    font-size: 12pt;
    background: none;
    text-indent: 0;
    width: auto;
    opacity: 0.7;
    margin-left: 10px;
}
.owindow .content div.button-bar a:last-child:hover,
#edit-recheck-lock:hover{
    background: none;
    opacity: 1;
}
.owindow.owait, .owindow.osuccess{
    width: 175px;
    height: 36px;
    padding: 10px;
}
.owindow.owait .content,
.owindow.osuccess .content{
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    margin: auto;
    width: 155px;
    height: 16px;
    background-image: none;
}
 
/* Timothy's Image Box
=============================*/
.image-box{
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-color: #AAA;
    margin: 5px;
}
.image-box-heading{
    border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    background-color: #BCCE8A;
    text-shadow: 1px 0 2px -1px #777;
}
.image-box-caption{    color: #777; }
 
/* James Kanjo's Hover Tips
=============================*/
.hover{
    text-decoration: underline;
    border-bottom: 1px solid;
    color: #658515;
}
.hover:hover{
    text-decoration: none;
    border-bottom: none;
}
.hover span{    
    visibility: hidden;
    position: absolute;
    opacity: 0;
    transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -webkit-transition: opacity 500ms;
    -o-transition: opacity 500ms;
}
.hover:hover span{
    visibility: visible;
    position: absolute;
    display: inline;
    opacity: 1;
    color: #444;
    font-size: 80%;
    margin: 15px -20px;
    height: auto;
    background: #F9F9F9;
    border: 1px solid #BED272;
    width: 300px;
    padding: 1em;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 0 2px 4px rgba(100,100,100,0.3);
    -moz-box-shadow: 0 2px 4px rgba(100,100,100,0.3);
    -webkit-box-shadow: 0 2px 4px rgba(100,100,100,0.3);
}
.hover:hover span span{
    position: relative;
    margin: auto;
    height: auto;
    width: auto;
    border: none;
    padding: 0;
}
 
/* Calendar App
=============================*/
.calendar{
    border:1px solid #888;
    font-size: 85%;
}
.calendar a{    text-decoration: none; }
.calendar p{    margin:0px; }
.calendar .grid a,
.MINI.calendar span.calenhover span a{
    color: #000;
    text-decoration: none;
}
.calendar a:hover{    background-color: transparent; }
.calendar .date a{    color: #5D8600; }
.calendar .heading{
    background-color: #BCCE8A;
    font-size: 110%;
    color: #222;
}
.calendar .heading,
.calendar .weekday{
    font-weight: bold;
    text-align: center;
}
.calendar .weekday,
.calendar .day{
    border:1px solid #AAA;
    background-color: #FFF;
    vertical-align: top;
    padding: 0 5px;
}
.MINI.calendar .day{    padding: 0; }
.calendar .day:hover{    background-color: #CBD6B1;}
.calendar .day .max-height{
    overflow: hidden;
    height: 60px;
}
.MINI.calendar .day .max-height{
    height: auto;
    text-align: center;
}
.calendar .day:hover .max-height{    height: auto; }
/* IE FIX */
* html .calendar .day .max-height{    height: auto; }
* + html .calendar .day .max-height{    height: auto; }
.calendar .event{
    height: 1.25em;
    display: inline-block;
    overflow: hidden;
    padding: 1px 5px 2px;
    margin:1px 2px 1px;
    background-color: #ABB691;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    font-size: 90%;
}
.calendar .calenhover span{
    position: absolute;
    visibility: hidden;
    opacity: 0.0;
    margin: 10px -90px;
    margin-top: 75px;
    width: 250px;
    border: 1px solid #AAA;
    padding: .5em;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background-color: #F5F5F5;
    background-image: -moz-linear-gradient(top,#FAFAFA,#F3F3F3);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#F3F3F3));
    font-style: italic;
    transition: all 1ms;
    -moz-transition: all 750ms;
    -webkit-transition: all 750ms;
    -o-transition: all 750ms;
}
.calendar .calenhover span a{    font-style: normal; }
.MINI.calendar .calenhover span{    margin-top: -5px; }
.calendar .calenhover:hover span{
    display: table-cell;
    visibility: visible;
    text-align: left;
    opacity: 1.0;
    margin-top: 18px;
}
.calendar .date a,
.calendar .calenhover span a{
    font-weight: bold;
    text-decoration: none;
}
.MINI.calendar .day span a{
    font-weight: bold;
    color: #ABB691;
}
.MINI.calendar span.calenhover a{    color: #5D8600; }
 
.iframe .weekday{
    text-align: right;
    width: 130px;
    font-size: 100%;
}
.iframe .month-day{
    width: 60px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    background-color: #6D9610;
}
.iframe .month{
    color: #FFF;
    font-size: 100%;
    padding-top: 2px;
    text-align: center;
}
.iframe .day{
    background-color: #CBD6B1;
    color: #000;
    font-size: 100%;
    -moz-border-radius: 0 0 10px 10px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    text-align: center;
}
.iframe .year{
    text-align: left;
    width: 100px;
    font-size: 100%;
}
.gobacklink a{    color: #5D8600; }
.gobacklink a:hover{
    background-color:transparent;
    text-decoration:none;
}
.calendar .calenhover.date span{    display: none !important; }
.calendar .calenhover.date:hover span{    display: none !important; }
 
/* Tabview
=============================*/
.yui-navset .yui-nav{    border-bottom: 3px solid #BFD683; }
.yui-navset .yui-nav .selected a{
    background-color: #CCDE9A;
    background: -moz-linear-gradient(top,#CCDE9A,#BFD683);
    background: -webkit-gradient(linear, left top, left bottom, from(#CCDE9A), to(#BFD683));
    color: #222;
    font-weight: bold;
    border: 1px solid #999;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    font-size: 90%;
}
.yui-navset .yui-nav a{
    background-color: #F5F5F5;
    background: -moz-linear-gradient(top,#FAFAFA,#F3F3F3);
    background: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#F3F3F3));
    border: 1px solid #AAA;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    font-size: 90%;
}
.yui-navset .yui-nav a em{    border: none; }
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:active,
.yui-navset .yui-nav a:focus{
    background-color: #F0F0F0;
    background: -moz-linear-gradient(top,#F5F5F5,#EEE);
    background: -webkit-gradient(linear, left top, left bottom, from(#F5F5F5), to(#EEE));
}
.yui-navset .yui-nav .selected a:hover,
.yui-navset .yui-nav .selected a:active,
.yui-navset .yui-nav .selected a:focus{
    background-color: #CCDE9A;
    background: -moz-linear-gradient(top,#CCDE9A,#BFD683);
    background: -webkit-gradient(linear, left top, left bottom, from(#CCDE9A), to(#BFD683));
    padding-bottom: 0;
    color: #222;
}
.yui-navset .yui-content{
    background: #F8F8F8;
    border: 1px solid #999;
    padding: 0 1em 1px 1em;
    color: #444;
    font-size: 90%;
}
 
/* Quick Comments
=============================*/
#np-editor-title, #np-title,
#np-editor-panel,
#np-cancel, #np-preview,
#new-post-form br{    display: none; }
#np-text{
    width: 85% !important;
    height: 200px !important;
}
.signature{    display: none; }
span.printuser.avatarhover a:first-child{    display: none; }
#thread-container .head .options{    display: none; }
#thread-container .post{
    border: 1px solid #AAA;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background: #F9F9F9;
    margin: 14px 0;
    padding: 5px 10px;
    color: #777;
    font-size: 80%;
}
#thread-container .head .odate{    float: right; }
#thread-container .head{    background: none; }
 
/* Rate Widget
=============================*/
.page-rate-widget-box{
    border: 1px solid #AAA;
    background-color: #F5F5F5;
    background-image: -moz-linear-gradient(top,#FAFAFA,#F3F3F3);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#F3F3F3));
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 0 1px 2px rgba(100,100,100,0.3);
    -moz-box-shadow: 0 1px 2px rgba(100,100,100,0.3);
    -webkit-box-shadow: 0 1px 2px rgba(100,100,100,0.3);
    width: 140px;
    height: 20px;
    line-height: 20px;
}
.page-rate-widget-box .rate-points{
    background: none;
    color: #666;
    font-weight: normal;
    text-transform: capitalize;
    display: inline-block;
    width: 65px;
    padding-right: 0;
}
.page-rate-widget-box .rate-points .number{
    color: #444;
    font-weight: bold;
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a,
.page-rate-widget-box .cancel a{
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background: none;
    font-size: 110%;
    font-weight: bold;
    margin-right: 2px;
    transition:  background-color 200ms linear;
    -moz-transition: background-color 200ms linear;
    -webkit-transition: background-color 200ms linear;
    -o-transition: background-color 200ms linear;
}
.page-rate-widget-box .rateup a{    background-color: #CDC; }
.page-rate-widget-box .ratedown a{    background-color: #DCC; }
.page-rate-widget-box .cancel a{    background-color: #CCC; }
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover,
.page-rate-widget-box .cancel a:hover{    text-decoration: none; }
.page-rate-widget-box .rateup a:hover{    background-color: #CEC; }
.page-rate-widget-box .ratedown a:hover{    background-color: #ECC; }
.page-rate-widget-box .cancel a:hover{    background-color: #DDD; }
 
/* Admin Panel
=============================*/
#site-manager{
    margin: 0 auto;
    padding-top: 1em;
}
#site-manager h1{    margin: 0 0 1em 0; }
 
/* Print
=============================*/
body.print-body{
    background-image: none !important;
    background-color: #FFF !important;
}
.print-body #content-wrap{
    border: none !important;
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
}
.print-body .quickCom{    display: none !important; }

Notes

Import the following URLS for the scheme of your choice:

  • MagmaBrandhttp://publicvar.wdfiles.com/csstheme:magmabrand/code_
  • FireBrandhttp://publicvar.wdfiles.com/csstheme:firebrand/code_
  • ThunderBrandhttp://publicvar.wdfiles.com/csstheme:thunderbrand/code_
  • WindBrandhttp://publicvar.wdfiles.com/csstheme:windbrand/code_
  • IceBrandhttp://publicvar.wdfiles.com/csstheme:icebrand/code_
  • WaterBrandhttp://publicvar.wdfiles.com/csstheme:waterbrand/code_
  • AetherBrandhttp://publicvar.wdfiles.com/csstheme:aetherbrand/code_
  • EarthBrandhttp://publicvar.wdfiles.com/csstheme:earthbrand/code_
  • MetalBrandhttp://publicvar.wdfiles.com/csstheme:metalbrand/code_
  • DarkBrandhttp://publicvar.wdfiles.com/csstheme:darkbrand/code_
  • LightBrandhttp://publicvar.wdfiles.com/csstheme:lightbrand/code_