Css

Subscribe to our RSS feed

Follow us on twitter

Watch this site via email

@import url(http://static.wikidot.com/v--16/common--theme/base/css/style.css);
 
/* BMC Theme by BMC WebDesign. © 2010, All rights reserved. 
No Reproduction without the express written consent of BMC WebDesign. v0.8 */
 
@font-face {
    font-family: 'Qlassik';
    src: url(/local--files/fonts/Qlassik_TB-webfont.eot);
    src: local('☺'), url(/local--files/fonts/Qlassik_TB-webfont.woff) format('woff'), url(/local--files/fonts/Qlassik_TB-webfont.ttf) format('truetype'), url(/local--files/fonts/Qlassik_TB-webfont.svg#webfont) format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'QlassikBold';
    src: url('QlassikBold_TB-webfont.eot');
    src: local('☺'), url('QlassikBold_TB-webfont.woff') format('woff'), url('file://localhost/Users/brycecameron/Desktop/QlassikBold_TB-webfont.ttf') format('truetype'), url('QlassikBold_TB-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
html, body {
    margin: 0;
    padding: 0;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.95em;
    background: #e1e4e4 url(http://bmcenterprises.wdfiles.com/local--files/css3:files/css3-newbg-21.png) repeat-x left top;
}
#container {
    position: relative;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0 auto;
    width: 1000px;
}
 
/* Font Settings */
a {
    color: #39c;
    text-decoration: none;
}
a:hover, a:focus {
    color: #39c;
    text-decoration: underline;
    background-color: transparent;
}
h1 {
    font-family: 'Qlassik', Helvetica;
    color: #212121;
    font-size: 250%;
    margin: 10px 5px;
}
h2 {
    color: #3f3f3f;
}
h3 {
    color: #39c;
    font-size: 140%;
}
h4 {
    color: #3f3f3f;
}
h5 {
    color: #212121;
    margin: 5px 0;
}
h6 {
    color: #3f3f3f;
    margin: 2px 0;
}
tt {
    font-size: 1em;
}
 
/* Buttons & Ratings */
 
div.buttons input, input.button, button, file, a.button, .button-bar a.button.button-close-message, .owindow .button-bar a, .page-rate-widget-box .rate-points, .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a, .page-rate-widget-box .cancel a {
    background-color: #3fc1ff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.2)));
    background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.2));
    background-position: center bottom;
    color: #fff !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #2a88b8;
    text-align: center;
    line-height: 7px;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    text-shadow: #227ead 0 1px 0;
    padding: 0.45em 0.3em;
    outline-style: none;
}
 
div.buttons input:hover, input.button:hover, button:hover, file:hover, a.button:hover, .button-bar a.button.button-close-message:hover, .owindow .button-bar a:hover, .page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover, .page-rate-widget-box .cancel a:hover  {
    background-color: #3fc1ff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.1)));
    background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
    color: #fff;
    text-decoration: none;
}
div.buttons input:active, input.button:active, button:active, file:active, a.button:active, .button-bar a.button.button-close-message:active, .owindow .button-bar a:active, .page-rate-widget-box .rateup a:active, .page-rate-widget-box .ratedown a:active, .page-rate-widget-box .cancel a:active {
    position: relative;
    top: 1px;
    left: 1px;
    -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
    box-shadow:  0px 0px 2px rgba(0,0,0,0.3);
}
 
.page-rate-widget-box, .page-rate-widget-box .rate-points, .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a, .page-rate-widget-box .cancel a {
    height: 30px;
    padding: 2px 5px;
}
.page-rate-widget-box .cancel a {
    display: none;
}
 
/* Header */
#header{
    height: 95px;
    width: 1000px;
    margin-top: 0px;
    padding: 0;
    z-index: 0;
}
#header h1 {
    position: relative;
    z-index: 20;
    width: 110px;
    top: 46px;
    left: 5px;
    padding: 0;
    margin: 0;
    height: 51px;
    background: url(http://bmcenterprises.wdfiles.com/local--files/css3:files/css3-new-h1-sprite4.png) no-repeat -116px 0;
}
#header h2 {
    display: none;
}
#header h1 a {
    display: block;
    position: relative;
    top: 0px;
    height: 51px;
    width: 111px;
    background: url(http://bmcenterprises.wdfiles.com/local--files/css3:files/css3-new-h1-sprite4.png) no-repeat 0px 0;
    filter: alpha(opacity=100);
    opacity: 1;
    margin-top: 0px;
    -webkit-transition: opacity 350ms ease;
    -moz-transition: opacity 350ms ease;
}
#header h1 a:hover {
    background: url(http://bmcenterprises.wdfiles.com/local--files/css3:files/css3-new-h1-sprite4.png) no-repeat 0px 0;
    opacity: 0;
    filter: alpha(opacity=0);
}
#header h1 a span {
    display: none;
}
#header h1 a:hover {
    border: none;
}
.social {
    position: absolute;
    top: 64px;
    height: 32px;
    width: 32px;
    z-index: 99;
    -webkit-transition: opacity 150ms ease-out;
    -moz-transition: opacity 150ms ease-out;
    opacity: 0.75;
}
.social.rss {
    right: 251px;
}
.social.twitter {
    right: 213px;
}
.social.watch {
    right: 175px;
}
.social.rss:hover, .social.twitter:hover, .social.watch:hover {
    opacity: 1;
}
.social span {
    visibility: hidden;
    display: inline-block;
    font-size: 11px;
    font-family: Verdana;
    text-shadow: 1px 0 0px #000;
    background-color: rgba(17,17,17,0.5); /*Need to define a fallback colour*/
    color: #fff;
    width: auto;
    white-space: nowrap;
    padding: 0 8px;
    height: 20px;
    text-align: center;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    position: absolute;
    top: -25px;
    left: -100%;
    opacity: 0;
    -webkit-transition: opacity 500ms ease;
    -moz-transition: opacity 500ms ease;
}
.social.rss:hover span, .social.twitter:hover span, .social.watch:hover span {
    visibility: visible;
    opacity: 1;
}
.social.overlay {
    display: none;
}
#search-top-box {
    position: absolute;
    top: 42px;
    left: 824px;
    margin-top: 22px;
    margin-right: -35px;
    float: right;
    height: 25px;
    padding-top: 0px;
    width: 200px;
    text-align: right;
    background: none;        
}
#search-top-box-form {
    width: 200px;
}
#search-top-box-input {
    height: 32px;
    width: 140px;
    margin: 0 auto;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: none;
    padding: 0 5px;
    color: #444;
    background: #fff;
    z-index: 30;
    opacity: 0.75;
    -webkit-transition: opacity 150ms ease-out;
    -moz-transition: opacity 150ms ease-out;
}
#search-top-box-input:focus, #search-top-box-input:active  {
    border: none;
    outline-style: none;
    background: rgba(255,255,255,1);/*Fallback colour needed */
    color: #424242;
    opacity: 1;
}
#search-top-box-input.text {
    position: relative;
    z-index: 30;
    padding-right: 24px;
}
#search-top-box-input.text.empty {
    color: #aaa;
}
#search-top-box-form input.button {
    position: relative;
    width: 20px;
    height: 20px;
    text-indent: -9999px;
    background: transparent url(http://css3.wdfiles.com/local--files/site:files/css3-search-icon.png) no-repeat -1px 1px;
    border: none;
    top: -2px;
    right: 26px;
    z-index: 100;
    padding: 0;
    color: transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
#search-top-box-form input.button:hover {
    cursor: pointer;
}
 
#login-status {
    position: absolute;
    top: 2px;
    left: 700px;
    width: 300px;
    text-align: right;
    color: #37abe5;
    text-decoration: none;
    background: none;
    font-size: 0.9em;
}
#login-status a {
    color: #fff;
    text-decoration: none;
    background: none;
    font-variant: small-caps;
}
#login-status .printuser a {
    display: none;
}
#login-status a:hover, #login-status a:focus {
    color: white;
    background: none;
    text-decoration: underline;    
}
 
#account-topbutton {
    border: none;
}
#account-options {
    width: auto;
    background-color: rgba(60,185,248,0.8);/*fallback colour needed */
    text-align: center;
    border: 1px solid white;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
#account-options ul li a {
    padding: 0 10px;
    border-bottom: none;
    text-shadow: none;
    font-size: 1.1em;
}
#account-options ul li a:hover, #account-options ul li a:focus {
    color: #39c;
    text-decoration: none;
    background: #fff;
    border-bottom: none;
 
}
 
/***** TopBar *****/
#top-bar {
    position: absolute;
    padding: 0;
    font-size: 28px;
    font-family: 'Qlassik', Helvetica, sans-serif;
    display: block;
    width: 550px;
    height: 45px;
    line-height: 33px;
    z-index: 20;
    bottom: -9px;
    margin: 0 285px 0 0;
    vertical-align: baseline;
}
 
#top-bar:active {
    overflow: visible;
}
#top-bar a {
    background: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
    text-shadow: #3c3b2f -1px -1px 0;
    border: none;
    -webkit-transition: color 200ms linear;
    -moz-transition: color 200ms linear;
}
#top-bar a:hover {
    background: none;
    text-decoration: none;
    color: #37abe5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: none;
}
#top-bar ul {
    float: left;
    white-space: nowrap;
}
#top-bar ul li {
    float: left;
    padding: 0;
}
#top-bar ul li a {
    margin-top: 0;
    background-color: transparent; /*should probably be background:none */
    color: #fff;
    font-size: 1.2em;
    height: 37px;
    z-index: 0;
    float: left;
    padding: 8px 10px 0 10px;
}
#top-bar ul li a.current-link {
    color: #37abe5;
    text-shadow: #073044 -1px -1px 0;
}
#top-bar ul li a.current-link:hover {
    cursor: default;
}
 
#top-bar ul li ul {
    display: none;
}
 
#side-bar {
    display: none;
    position: absolute;
    float: left;
    background: none;
    width: 170px;
    margin: 60px 10px 10px 80px;
    color: #222;
    z-index: 20;
    font-size: 1.3em;
    font-family: 'Qlassik', Helvetica;
    line-height: 1.3em;
    padding: 5px;
}
#side-bar h5 {
    margin: 0;
    font-family: 'Qlassik', Helvetica;
    font-size: 1.3em;
}
#side-bar ul {
    list-style-type: none;
    padding-left: 10px;
}
#side-bar ul li {
    width: 90%;
}
#side-bar ul li a {
    display: block;
    padding-left: 5px;
    -webkit-transition: color 120ms ease-out;
    color: #666;
}
#side-bar ul li:hover a {
    text-decoration: none;
    color: #39c;
}
#side-bar a.current-link {
    color: #39c;
}
 
/* Content */
#content-wrap {
    height: 100%;
    width: 100%;
    margin-top: 50px;
}
#main-content {
    margin: 0;
    color: #242525;
    line-height: 1.4em;
    font-size: 1.03em;
    padding: 0;
    margin: 0 auto;
    width: 850px;
}
#page-title {
    font-family: 'Qlassik';
    font-size: 260%;
    text-shadow: #2987b6 0 1px 0;
    position: relative;
    width: 820px;
    left: -5px;
    padding: 10px 20px 8px 20px;
    background-color: #3bb7f5;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#3bb7f5), to(#39c));
    background-image: -moz-linear-gradient(top, #3bb7f5, #39c);    
    color: #fff;
    -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.4);
    box-shadow: 0px 0px 4px rgba(0,0,0,0.4);
    border: none;
    margin-bottom: -5px;
    line-height: 25px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    z-index: 15;
}
#breadcrumbs {
    display: none;    
}
#page-content {
    margin-bottom: 35px;    
    background-color: #fff;
    padding: 40px 10px 10px 10px;
    -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.4);
    box-shadow: 0px 0px 4px rgba(0,0,0,0.4);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 5px solid #ddd;
    z-index: 10;
    margin-top: -30px;
}
 
/* Wiki Elements */
#page-content .code {
    font-size: 105%;
    width: 96%;
    border: 1px solid #ddd;
    background-color: #f3f8f3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
/* Code Block Colouring */
.code .hl-main pre .hl-identifier {
    color: #0088bf;
}
.code .hl-main pre .hl-special {
    color: #0088bf;
    font-weight: bold;
}
.code .hl-main pre .hl-reserved {
    color: #bc251c;
}
.code .hl-main pre .hl-string {
    color: #509b22;
}
.code .hl-main pre .hl-number {
    color: #3e7f1a;
}
.code-colours-ids .code .hl-main pre .hl-identifier {
    color: #d2c428;
}
/* Code Block Tabs */
.code-tabs .yui-navset {
    width: 100%;
}
.code-tabs .yui-nav {
    border-width: 0 !important;
}
.code-tabs .yui-nav li {
    border: 1px solid #ddd !important;
    border-bottom: none !important;
    padding: 0 !important;
    text-align: center;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    font-family: 'Qlassik', Helvetica;
    font-size: 1.2em;
}
.code-tabs .yui-nav li a  {
    background: none !important;
    border: none !important;
    margin: 0 !important;
    overflow: hidden;
    width: 90px;
}
.code-tabs .yui-nav li.selected, .code-tabs .yui-nav li.selected a {
    background-color: #f3f8f3;
    color: #333 !important;
}
.code-tabs .yui-nav li a:hover {
    background-color: #f3f8f3;
    text-decoration: underline;
    color: #39c;
}
.code-tabs .yui-nav li.selected:hover, .code-tabs .yui-nav li.selected a:hover {
    cursor: default !important;
    text-decoration: none;
}
.code-tabs .yui-nav li a em {
    border: none !important;
}
.code-tabs .yui-content {
    height: auto !important;
    padding: 0 !important;
    padding-top: 0px !important;
    border: none !important;
    background: none !important;
    background-image: none !important;
}
.code-tabs .yui-content .code {
    margin: 0;
    -webkit-border-top-left-radius: 0 !important;
}
blockquote {
    color: #fff;
    border: 1px solid #555;
    padding: 5px 5px 5px 35px;
    margin-top: 20px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background: #424242 url(http://css3.wdfiles.com/local--files/site:files/css3-blockquote-top-bg.png) no-repeat left top;
}
blockquote p {
    margin: 0;
    background: #424242 url(http://css3.wdfiles.com/local--files/site:files/css3-blockquote-bottom-bg.png) no-repeat right bottom;
    padding-right: 30px;
    min-height: 30px;
}
blockquote p + p {    
    padding-top: 0;    
    background-image: none;
}
 
/* Pagination */
 
.pager {
    display: inline-block;
    width: auto;
    height: 28px;
    padding: 12px 30px 0 30px;
    margin: 0 auto;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
.pager .pager-no {
    background-color: #464646;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6a6b6b), to(#424242));
    background-image: -moz-linear-gradient(top, #6a6b6b, #424242);
    color: #fff;
    border: none;
    padding: 5px 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-right: 2px;
}
.pager .current {
    background-color: #85c91a;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#9ded20), to(#85c91a));
    background-image: -moz-linear-gradient(top, #9ded20, #85c91a);
    color: #464646;
    border: none;
    padding: 5px 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.pager .target a {
    background-color: #2e9ee9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#2e9ee9), to(#2688c9));
    background-image: -moz-linear-gradient(top, #2e9ee9, #2688c9);
    color: #fff;
    border: none;
    padding: 5px 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.pager .target a:hover, .pager .target a:focus {
    border: none;
    text-decoration: none;    
    background-color: #85c91a;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#9ded20), to(#85c91a));
    background-image: -moz-linear-gradient(top, #9ded20, #85c91a);
}
 
/* Image Frames - .blog-image */
.image-container img.blog-image {
    max-width: 650px !important;
    padding: 5px;
    border: 1px solid #bbb;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
    -webkit-transition: -webkit-box-shadow 400ms ease-out;
    -moz-transition: -moz-box-shadow 400ms ease-out;
}
.image-container img.blog-image:hover {
    -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 8px rgba(0,0,0,0.3));
} 
.image-container img.blog-image.full {
    width: 90%;
}
 
/* Mailform */
 
.mailform-box .form tbody tr td {
    font-family: 'Qlassik', Helvetica;
    font-size: 1.5em;
    text-align: right;
    line-height: 30px;
    padding-right: 0;
}
.mailform-box input.text {
    font-size: 0.6em;
    width: 280px;
    text-align: left;
    height: 15px;
    line-height: 15px;
    padding: 7px 5px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    border: 3px solid #39c;
    outline-style: none;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eaeaea), color-stop(0.3, #fff), color-stop(1, #fff));
    background-image: -moz-linear-gradient(top, #eaeaea, #fff 30%, #fff);
}
.mailform-box input.text:focus, .mailform-box input.text:hover, .mailform-box textarea:hover, .mailform-box textarea:focus, .mailform-box .form tbody tr.invalid-value-row input.text:focus, .mailform-box .form tbody tr.invalid-value-row textarea:focus {
    border: 3px solid #7ab916 !important;
    outline-style: none;
    padding: 7px 5px;
}
.mailform-box textarea {
    font-size: 0.6em;
    text-align: left;
    padding: 7px 5px;
    width: 300px;
    height: 130px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    border: 3px solid #39c;
    outline-style: none;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eaeaea), color-stop(0.15, #fff), color-stop(1, #fff));
    background-image: -moz-linear-gradient(top, #eaeaea, #fff 15%, #fff);
    resize: vertical;
    min-height: 130px;
}
.mailform-box input.checkbox, .mailform-box select.select {
    margin-top: 8px;
    width: 280px;
    outline-style: none;
    font-size: 0.6em;
    padding: 0;
}
.mailform-box .buttons {
    position: relative;
    width: 210px;
    margin: 0 0 0 330px;
}
.mailform-box .buttons input {
    text-align: center;
    font-size: 1.4em;
    width: 200px;
    height: 40px;
}
.mailform-box .form tbody tr.invalid-value-row td {
    background: none;
}
.mailform-box .form tbody tr.invalid-value-row input.text, .mailform-box .form tbody tr.invalid-value-row textarea  {
    border: 3px solid red;
}
.mailform-box .form tbody tr.invalid-value-row input.text:hover, .mailform-box .form tbody tr.invalid-value-row textarea:hover {
    border-color: #39c;
}
.mailform-box .form tbody tr.invalid-value-row .select {
    border-color: red;
}
.mailform-box .form tbody tr.invalid-value-row .select:hover, .mailform-box .form tbody tr.invalid-value-row .select:focus {
    border-color: inherit;
}
.mailform-box .form tbody tr.invalid-value-row td .field-error-message {
    display: none;
    font-size: 0.9em;
    color: black;
}
/** Comments Module **/
.comments-box {
    width: 95%;
    margin: 0 auto;
}
.comments-box #new-post-button {
    margin: 20px 15px;
    padding: 10px;
    text-align: center;
    display: block;
    width: 200px;
    background-color: #3bb7f5;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#3bb7f5), to(#39c));
    background-image: -moz-linear-gradient(top, #3bb7f5, #39c);    
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius: 4px;
    -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.7);
    -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.7);
    box-shadow: 1px 1px 3px rgba(0,0,0,0.7);
    border:1px solid #2883b1;
    color:#fff;
    font-size:1.3em;
    font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
    text-decoration:none;
    text-shadow: #2883b1 -1px -1px 0;
}
.comments-box #new-post-button:hover {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#b2e033), to(#77a436));
    background-image: -moz-linear-gradient(top, #b2e033, #77a436);
    border: 1px solid #72931f;
    color:#fff;
    text-shadow: #72931f -1px -1px 0;
}
.comments-box #new-post-button:active {
    position: relative;    
    top: 1px;
    left: 1px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.7);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,0.7);
    box-shadow: 0 0 3px rgba(0,0,0,0.7);
}
.comments-box .post-container {
    margin: 20px 10px;
}
.comments-box .post {
    border: 1px solid #ccc;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 5px;
    background-color: #e9f2f7;
    background-image: -webkit-gradient(linear, 100% 0%, 100% 100%, from(#fff), to(#e9f2f7));
    background-image: -moz-linear-gradient(top,#fff,#e9f2f7);    
}
 
.comments-box .title, .comments-box .head .options, .comments-box .post .signature, .comments-box .head .info .printuser .small, .comments-box .post .changes, .comments-box .post .long .changes {
    display: none;
}
.comments-box .post .head {
    background: transparent;
}
 
.comments-box .head .info .printuser  {
    font-size: 1.5em;
    color: #7cc019;
    font-family: 'Qlassik', Helvetica;
}
.comments-box .head .info .printuser a {
    font-weight: bold;
}
.comments-box .head .info .odate {
    color: #7c7e7e;
    float: right;
    font-size: 0.8em;
}
.comments-box .post .options {
    font-size: 0.8em;
}
.comments-box .post .options a {
    color: #3198dd;
}
.comments-box #new-post-form table tbody tr td {
    border: none;
}
 
.comments-box input.text {
    background: #fff;
    background-image: -webkit-gradient(linear, 100% 0%, 100% 100%, from(#fff), to(#fafafa));
    background-image: -moz-linear-gradient(top,#fff,#fafafa);
}
.comments-box #new-post-form #np-editor-panel, .comments-box #new-post-form #np-title {
    display: none;
}
.comments-box #new-post-form #np-editor-title {
    display: block;
    position: relative;
    margin-bottom: -50px;
    font-family: 'Qlassik', Helvetica;
    font-size: 1.8em;    
    white-space: nowrap;
    overflow: hidden;
    color: #333;
}
#np-editor-title:before {
    content: 'Leave a comment...';
    margin-right: 1000px;
}
.comments-box  textarea#np-text {
    background-color: #e9f2f7;
    background-image: -webkit-gradient(linear, 100% 0%, 100% 100%, from(#fff), to(#e9f2f7));
    background-image: -moz-linear-gradient(top,#fff,#e9f2f7);
    width: 100%;
    margin: 0;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-left: 10px;
    padding: 5px;
    border: 1px solid #aaa;    
    font-family: Helvetica;
    color: #212121;
}
.comments-box textarea#np-text:focus {
    outline-style: none;
    border: 1px solid #39c;
}
.comments-box .edit-help-34 {
    margin-right: 20px;
    font-size: 0.9em;
    color: #aaa;
    text-align: right;
}
.comments-box .change-textarea-size a {
    display: none;
}
 
/* Wikidot Error & Popup Messages */
 
#odialog-container .button {
    outline-style: none;
}
.odialog-shader {
    background-color: #01131e;
}
 
.owindow {
    border: none;
    border-top: 1px solid #fcffff;
    background-color: #eef1f1;
    -webkit-box-shadow: 2px 2px 10px rgba(0,0,0,0.8);
    -moz-box-shadow: 2px 2px 10px rgba(0,0,0,0.8);
    box-shadow: 2px 2px 10px rgba(0,0,0,0.8);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.owindow .title {
    background-color: #424242;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6a6b6b), to(#424242));
    background-image: -moz-linear-gradient(top, #6a6b6b, #424242);
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #eee;
    font-weight: normal;
    font-size: 180%;
    font-family: 'Qlassik', Helvetica;
}
 
.owindow .content, .owindow .button-bar {
    background: none;
    border: none;
    color: #333;
}
 
.owindow .content h1 {
    font-family: 'QlassikBold', Helvetica;
    margin: 0;
    padding: 3px 5px;
    color: #36aae4;
    text-shadow: #1a5c80 1px 1px 0;
    font-size: 250%;
}
.owindow .button-bar {
    height: 30px;
    padding: 0;
    background: none;
}
.owindow .owait {
    background: red;
}
 
/* Inbuilt Hovertips */
 
.hovertip {
    border: 1px solid #fff !important;
    -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
    -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
    box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    max-width: 250px;
}
.hovertip .content {
    background-color: #35b5f3;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#3bb7f5), to(#39c));
    background-image: -moz-linear-gradient(top, #3bb7f5, #39c);    
    color: #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 4px;
}
.hovertip .content span {
    display: none;
}
.hovertip .content div {
    display: inline;
    font-size: 12px;
}
 
/* Footer Elements */
 
.page-tags, #page-info {
    display: none;
}
.page-watch-options, #page-options-bottom, #page-options-bottom-2 {
    position: relative;
    background: #fff;
    color: #222;
    margin: 0;
    font-size: 85%;
    width: 96.5%;
    border: 5px solid #ddd;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.4);
    box-shadow: 0px 0px 4px rgba(0,0,0,0.4);
    padding: 5px 10px;
}
.page-watch-options {
    margin: 0 0 -10px 0;
}
#page-options-bottom {
    margin: 0 0 -6px 0;
    border-top: none;
    -webkit-border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
 
    padding: 2px 10px;
}
#page-options-bottom-2 {
    margin: -4px 0 0 0;
    border-top: none;
    -webkit-border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 2px 10px;
}
#footer, #license-area {
    background: #424242;
    color: white;
    border-left: 5px solid #ddd;
    border-right: 5px solid #ddd;
    -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.4);
    box-shadow: 0px 0px 4px rgba(0,0,0,0.4);
    font-size: 90%;
    padding: 4px 5px;
    width: 990px;
}
#footer {
    border-top: 5px solid #ddd;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin-top: 20px;
}
#license-area {
    border-bottom: 5px solid #ddd;
    -webkit-border-bottom-left-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-bottomright: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;    
}
 
/* Action Area / Wikidot Editor */
 
#action-area {
    position: relative;
    width: 100%;
    margin: 0;
    margin-top: 5px;
    padding: 10px;
    background: #fff;
    border: 5px solid #ddd;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.4);
    box-shadow: 0px 0px 4px rgba(0,0,0,0.4);
}
#action-area h1 {
    width: 100%;
    margin: -20px 0 0 -25px;
    padding: 8px 25px;
    background-color: #3bb7f5;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#3bb7f5), to(#39c));
    background-image: -moz-linear-gradient(top, #3bb7f5, #39c);    
    color: #fff;
    -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.4);
    box-shadow: 0px 0px 4px rgba(0,0,0,0.4);
    border: none;
    margin-bottom: -5px;
    line-height: 25px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
 
}
#action-area a.action-area-close {
    margin-top: 20px;
}
#action-area a.action-area-close:hover {
    background: none;
}
#lock-info {
    width: 350px;
}

Discussion

Add a new comment