Released: 08 Apr 2010 05:00
Version: 1.00.100408

Corner Game features a graphic top-left corner meant to add edge to the website. While the corner causes the top navigation bar to be incompatible, the content and side navigation are exemplified. I attribute much of the development of my CSS proficiency to this theme, for it was with the Corner Game that I experimented with complex images, positioning, and gradients.

Corner Game

Import

You can use this theme by including the below code:

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

Source Code

/** Corner Game CSS Theme
 *  Author: Timothy Foster
 *  Version: 1.00.100408
 *  Licensed under CC BY 4.0
 * *****************************************************/
 
/* Global
=====================*/
html, body{
    min-height:101%;
}
body{
    background-color: #A7CB8C;
    background-image: url(http://themes.wikidot.com/local--files/a-corner-game/ischool_back.png);
    background-repeat: repeat-x;
}
#container-wrap{
    margin:2px auto 0 auto;
    width: 1020px;
    background-image: url(http://themes.wikidot.com/local--files/a-corner-game/ischool_corner2.png);
    background-repeat: no-repeat;
    background-position: 0 51px;
}
input.text, textarea{
    border: 1px solid #476B2C;
}
div.buttons input, input.button, button, file, a.button{
    background-image: url(http://themes.wikidot.com/local--files/a-corner-game/ischool_button.png);
    background-repeat: repeat-x;
    height:20px;
    border: 1px solid #A7CB8C;
}
div.buttons input:hover, input.button:hover, button:hover, file:hover, a.button:hover{
    background-image: url(http://themes.wikidot.com/local--files/a-corner-game/ischool_buttonhover2.png);
    background-repeat: repeat-x;
    height:20px;
    border: 1px solid #A7CB8C;
}
 
/* Top Bar
=====================*/
#top-bar{    display:none }
 
/* Side Bar
=====================*/
#side-bar{
    margin: 30px 10px 0 0;
    padding-top: 0;
    border-left: 1px solid #777;
    float:right;
    width: 198px;
}
#side-bar ul{
    list-style:none;
}
#side-bar li a{
    display: block;
    min-height: 20px;
    background-image: url(http://themes.wikidot.com/local--files/a-corner-game/ischool_side3.png);
    background-repeat: no-repeat;
    background-position: 5px 0;
    color: #111;
    text-decoration: none;
    padding-left: 5px;
}
#side-bar li a:hover{
    background-color: transparent;
    text-decoration: none;
}
#side-bar li a:hover:before{
    content:">";
    color:#375B1C;
    font-weight:bold;
    margin-left: -14px;
    padding-right: 3px;
}
* html #side-bar li a:hover{
    background: none;
}
* + html #side-bar li a:hover{
    background: none;
}
#side-bar h1{
    font-size: 18px;
    color: #375B1C;
    font-weight: normal;
    letter-spacing:1px;
}
#side-bar h1:after{
    padding-left: 5px;
    color: #333;
    content:">";
}
 
/* Header
=====================*/
#header h1{
    padding: 15px 0 0 78px;
    float: left;
}
#header h1:after{
    padding-left: 10px;
    color:#666;
    content:">";
}
#header h1 a{
    font-family:"Franklin Gothic Book", Arial, "Trebuchet MS", Trebuchet, sans-serif;
    color: #444;
    font-size: 30px;
    font-weight: bold;
}
#header h1 a:hover{
    text-decoration:underline;
    background:transparent;
}
#header h2{
    padding: 26px 0 0 0;
    font-size: 13px;
    color: #DDD;
    letter-spacing: 1px;
    text-transform:uppercase;
}
#header h2 span{
    padding-left: 10px;
}
#search-top-box{
    position: absolute;
    top: 68px;
    right: -29px;
}
#search-top-box .button{
    visibility: hidden;
}
#search-top-box .text{
    width:233px;
    background-color: #E0E9D9;
    border: 1px solid #798273;
}
#login-status{
    padding-right:31px;
    color:#444;
}
#login-status a{
    color: #DDD;
    text-decoration:none;
}
#login-status a:hover{
    color: #D9D9D9;
    background:transparent;
    text-decoration:underline;
}
#account-options li a{
    color:#779B5C;
    background:#EEE;
}
#login-status #account-topbutton, #account-options li a:hover, .change-textarea-size a {
    background: #97BB7C;
    color: #DDD;
}
#login-status #account-topbutton:hover, .change-textarea-size a:hover {
    background: #A7CB8C;
}
 
/* Main Content
=====================*/
#content-wrap{
    width: 932px;
    margin: 0 auto;
    border:3px solid #555;
    background-image: url(http://themes.wikidot.com/local--files/a-corner-game/ischool_content.png);
    background-repeat:repeat-x;
    background-color:#FFF;
    min-height: 600px;
}
#main-content{
    margin: 0 250px 0 10px;
}
#main-content a{
    color: #476B2C;
    text-decoration: none;
}
#main-content a:hover{
    color:#4C7031;
    text-decoration:underline;
    background: transparent;
}
#page-title{
    color:#333;
}
#main-content h1, #main-content h2, #main-content h3{
    color:#375B1C;
}
#main-content h1{
    border-bottom:1px dotted #777;
}
#page-info{
    border-top:1px dotted #444;
}
#page-options-bottom-2{
    font-size: 80%;
}
 
/* Footer
=====================*/
#container-wrap-wrap{
    background-image: url(http://themes.wikidot.com/local--files/a-corner-game/ischool_footer.png);
    background-repeat: repeat-x;
    background-position: bottom;
}
#footer{
    color:#444;
    width: 932px;
    margin:auto;
}
#footer a, #license-area a{
    color:#DDD;
    text-decoration:none;
}
#footer a:hover, #license-area a:hover{
    color:#D9D9D9;
    text-decoration:underline;
    background:transparent;
}
#license-area{
    font-size:80%;
    color:#111;
}
 
/* Other IDs and Classes
=====================*/
#toc{
    border:1px solid #476B2C;
}
blockquote{
    border-left: 5px solid #476B2C;
    border-bottom: 1px solid #476B2C;
    border-top: 1px solid #476B2C;
    border-right: 1px solid #476B2C;
    background: #E2FFD5;
    padding: 0px 6px 0px 4px;
    margin: 5px 0 5px 0;
}
blockquote p{   margin: 4px 0 4px 0; }
.code{
    border-left: 5px solid #2C476B;
    border-bottom: 1px dashed #2C476B;
    border-top: 1px dashed #2C476B;
    border-right: 1px dashed #2C476B;
    background: #D5E2FF;
    padding: 0px 6px 0px 4px;
    margin: 5px 0 5px 0;
}
.code p{   margin: 4px 0 4px 0; }

Notes

This old theme does not utilize current CSS3 features, and I do not intend to implement them.