Themes Administration

The following code block defines the default CSS theme for this site:

/******************************
    WebBrand Themes
    By Timothy Foster
    Copyright 2011
******************************/
 
/* 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
#search-top-box
{
    width: 0px;
    right: 0px; top: 0px;
    height: 0px;
    border: 0px solid #AAA;
    background-color: none;
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
}
#search-top-box input.text{
    border: none;
    background: none;
    height: 0px;
    width: 0px;
    color: none;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    padding: 0px 0px;
}
#search-top-box input.text.empty{
    color: #AAA;
    font-style: italic;
}
#search-top-box input.button{
    position: absolute;
    top: 64px;
    right: -10px;
    text-indent: -1000px;
    border: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    width: 50px;
    height: 50px;
    padding: 0;
    margin: 1px 0;
    background-color: transparent;
    background-image: url(http://themes.wdfiles.com/local--files/pink-flower/flower-searchButton.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: 190px;
    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; }
 
/* Global
=============================*/
a{    color: #963335; }
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{
    background-color: #D6777A;
    background-image: -moz-linear-gradient(top,#D6777A,#C96566);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#D6777A), to(#C96566));
}
input.text:focus, input[type=text]:focus, textarea:focus{
    border: 1px solid #963335;
}
 
/* Top Bar
=============================*/
#top-bar{
    background-image: url(http://themes.wikidot.com/local--files/webbrand/brand_magmaTop.png);
    background-repeat: repeat-x;
}
#top-bar ul li a{    color: #222A19; }
#top-bar ul li a:hover{
    color: #525A69;
    border-color: rgba(160,115,117,1.0);
    box-shadow: inset 0 0 2px rgba(182,145,145,0.9);
    -moz-box-shadow: inset 0 0 2px rgba(182,145,145,0.9);
    -webkit-box-shadow: inset 0 0 2px rgba(182,145,145,0.9);
}
#top-bar li ul li a:hover{    color: #963335;  }
 
/* Side Bar
=============================*/
#side-bar h1, #side-bar h2,
#side-bar h3, #side-bar h4{    color: #963335; }
#side-bar li a:hover{    border-color: #C96566; }
 
/* Forum
=============================*/
blockquote{    border-color: #963335; }
 
/* Wikidot Tables
=============================*/
table.wiki-content-table th{    background-color: #C96566; }
 
/* Timothy's Image Box
=============================*/
.image-box-heading{    background-color: #C96566; }
 
/* James Kanjo's Hover Tips
=============================*/
.hover{    color: #963335; }
.hover:hover span{    border: 1px solid #C96566; }
 
/* Calendar App
=============================*/
.calendar .date a{    color: #963335; }
.calendar .heading{    background-color: #C96566; }
.calendar .day:hover{    background-color: #EBB;}
.calendar .event{    background-color: #C96566; }
.MINI.calendar .day span a{    color: #C96566; }
.MINI.calendar span.calenhover a{    color: #963335; }
 
.iframe .month-day{    background-color: #963335; }
.iframe .day{    background-color: #C96566; }
.gobacklink a{    color: #963335; }
 
/* Tabview
=============================*/
.yui-navset .yui-nav{    border-bottom: 3px solid #C96566; }
.yui-navset .yui-nav .selected a{
    background-color: #D6777A;
    background: -moz-linear-gradient(top,#D6777A,#C96566);
    background: -webkit-gradient(linear, left top, left bottom, from(#D6777A), to(#C96566));
}
.yui-navset .yui-nav .selected a:hover,
.yui-navset .yui-nav .selected a:active,
.yui-navset .yui-nav .selected a:focus{
    background-color: #D6777A;
    background: -moz-linear-gradient(top,#D6777A,#C96566);
    background: -webkit-gradient(linear, left top, left bottom, from(#D6777A), to(#C96566));
}
 
/* OWindow
=============================*/
.owindow{
    background: #D6777A;
    background: rgba(214,119,122,0.8);
}
 
#top-bar {
    width:100%;
}
#side-bar { width:190px; } 
#side-bar { margin-top:-10px; }
#np-editor-panel{  display: block; }
#container-wrap { width: 92.5%; }
#main-content { font-size:115%; }
#page-title { margin-top:-5px; }
#page-content { margin-top:-10px; }
a[name="pages"] + h2 {
  display: none;
}
.page-tags { display:none; }
#content-wrap
 {
    background:#F7F7F7; }

When you edit the above code block, it takes effect immediately. Press Shift-Reload to get the new theme. Only site admins can edit this page.

This theme exists in different colors. To choose a different color, right-click on Narrow or Wide below, and "Copy link address". Then edit this page and paste the copied link address into the code block above, @import url(here);.

You can customize this theme in several other ways:

  • Select a different external theme
  • Add your own CSS code after the @import in the above theme.
Late Harvest
zoom.jpg
» Narrow | Wide
Orange Juice
zoom.jpg
» Narrow | Wide
Cherry Red
zoom.jpg
» Narrow | Wide
Pretty Pink
zoom.jpg
» Narrow | Wide
Royal Purple
zoom.jpg
» Narrow | Wide
Deep Blue
zoom.jpg
» Narrow | Wide
Sky Blue
zoom.jpg
» Narrow | Wide
Tropical Seas
zoom.jpg
» Narrow | Wide
Green Grass
zoom.jpg
» Narrow | Wide
Midnight Coal
zoom.jpg
» Narrow | Wide
Silent Silver
zoom.jpg
» Narrow | Wide
Pale Snow
zoom.jpg
» Narrow | Wide
The content of this website is licensed under Creative Commons Attribution 4.0 International (CC BY 4.0) License