Css Grid

/* GRID SYSTEM
----------------------------------------- */
/*
874px grid system ~ Core CSS.
12 columns ~ margin: 10px

Based on the golden grid system - http://code.google.com/p/the-golden-grid/
by Vladimir Carrer

Created by the Grid System Generator - v1.00
Learn more ~ http://www.gridsystemgenerator.com/
*/

/* =Containers
--------------------------------------------------------------------------------*/
.main
{
    margin-left: auto;
    margin-right: auto;
    width: 874px;
}

/* =Grid >> Global
--------------------------------------------------------------------------------*/
.g72, .g144, .g216, .g288, .g360, .g432, .g504, .g576, .g648, .g720, .g792, .g864 {
    display: inline;
    float: left;
    margin-left: 10px;
}

/* =Grid >> 12 Columns
--------------------------------------------------------------------------------*/
.g72{width:62px;}
.g144{width:134px;}
.g216{width:206px;}
.g288{width:278px;}
.g360{width:350px;}
.g432{width:422px;}
.g504{width:494px;}
.g576{width:566px;}
.g648{width:638px;}
.g720{width:710px;}
.g792{width:782px;}
.g864{width:854px;}

/* =Grid >> 12 Columns - no left margin
--------------------------------------------------------------------------------*/
.ml72{margin-left:82px;}
.ml144{margin-left:154px;}
.ml216{margin-left:226px;}
.ml288{margin-left:298px;}
.ml360{margin-left:370px;}
.ml432{margin-left:442px;}
.ml504{margin-left:514px;}
.ml576{margin-left:586px;}
.ml648{margin-left:658px;}
.ml720{margin-left:730px;}
.ml792{margin-left:802px;}
.ml864{margin-left:874px;}

.inside{margin-left:0;}
/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

.clearfix:after {
    clear: both;
    content:' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}

/* Fonts
--------------------------------------- */
@font-face {
    font-family: OGLGoudySt;
    src: url('http://www.w3prod.com/wikidot/OFLGoudyStMTT.ttf');
}

@font-face {
    font-family: LubalinGraphStd-Book;
    src: url('http://www.w3prod.com/wikidot/LubalinGraphStd-Book.otf');
}

@font-face {
    font-family: LubalinGraphStd-Demi;
    src: url('http://www.w3prod.com/wikidot/LubalinGraphStd-Demi.otf');
}

/* Basics  
--------------------------------------- */

BODY {
   font-family:georgia; times new roman, serif; color:#404040; 
   background:#e7e2e2;
   background-image: url('http://www.w3prod.com/wikidot/background-3.png');
   background-repeat:repeat-y;
   background-position:1010px 0px;
}

h1, h2, h3 {font-family:'LubalinGraphStd-Book', helvetica neue, helvetica, verdana;}

h2 {font-size:200%;}

h3 {font-weight:bold !important;}

h4, h5, h6 {font-family:georgia, times new roman, serif;}

h6 {margin:0.1em;}

p { line-height:1.5em; font-size:1.3em;}

ul li { line-height:1.4em; font-size:1.2em;font-family:helvetica neue, helvetica, verdana;}

ul li ul li { line-height:1.4em; font-size:1.2em;}

table { line-height:1.4em; font-size:1.2em;}

a {color:#cc0000; text-decoration:none;}

a.special-link {font-size:1.5em;}

a:hover {
text-decoration:underline;
}

/* Page structure  
--------------------------------------- */

#container-wrap-wrap {
position:relative;
border-top:12px solid #222;
}

#container {
margin:50px 50px -30px 70px; 
width:940px;
}

#page-content {margin-bottom:30px;}

.article-content P {margin-left:70px;}

#main-content {
margin-left:0em;
margin-right:3em;
padding:0 1em;
}

/* Header  
--------------------------------------- */

#header {
background-color:#e7e2e2;
margin-bottom:50px;
}

#header h1 a{
font-size:50px;
font-weight:normal;
color:#222;
padding:5px 5px 5px 5px;
font-family: 'LubalinGraphStd-Book', 'helvetica neue', helvetica, verdana;
}

#header h1 a:hover{
color:#cc0000;
text-decoration:none;
background:none !important;
}

#header h2{
font-size:16px;
font-weight:normal;
color:#666;
margin-left: -84px;
padding-left: 96px;
background-color: white;
}

/* Top bar elements
--------------------------------------- */

#login-status {
display:none;
}

#search-top-box {
height:40px;
position:absolute;
right:0px;
text-align:left;
top:-30px;
width:280px;
}

#search-top-box input.button, .search-box input[type="submit"]  {
-moz-border-radius:0.3em 0.3em 0.3em 0.3em;
background:-moz-linear-gradient(center top , #F7F7F7, #E6E6E6) repeat scroll 0 0 transparent;
border:0.1em solid #999;
font-size:90%;
height:2em;
text-shadow:0 0.1em 0 #F7F7F7;
color:#777;
margin-left:8px;
}

#search-top-box input.button, .search-box input[type="submit"]  {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F7F7F7), to(#E6E6E6));
border-bottom-left-radius: 0.3em 0.3em;
border-bottom-right-radius: 0.3em 0.3em;
border-top-left-radius: 0.3em 0.3em;
border-top-right-radius: 0.3em 0.3em;
}

#search-top-box input {padding:4px;}

#search-top-box-input {border-color:#ccc;}

#side-bar {
clear:left;
float:right;
margin:0 0 1em;
padding:1em;
width:14em;
}

#login-status {
bottom:auto;
left:auto;
overflow:visible;
right:0.7em;
top:-3em;
}

#top-bar {
left:0.7em; 
top:-6em;
height:40px;
}

#top-bar li {
margin:0;
padding:0;
background-color:none;
}

#top-bar li a {
background-color:transparent;
border:0 none;
color:#555;
margin:18px 1em 0 0;
padding:25px 1px 1px;
}

#top-bar li a:hover {
color:#fff;
background-color:#1EAFF0 !important;
text-decoration:none;
}

#top-bar li a:active {
color:#fff;
background-color:#2EBFF9 !important;
text-decoration:underline;
}

#top-bar li .current-link {
color:#fff;
background-color:#111 !important;
text-decoration:none;
}

.languageBox {
position:fixed; 
top:170px; 
left:10px; 
font-size:0.7em; 
z-index:100; 
width:55px;
text-align:right;
line-height:0.9em;
padding-right:2px;
}

/* Text elements
--------------------------------------- */

.feature-article, .featured {
-webkit-box-shadow: rgba(0, 0, 0, 0.292969) 0px 1px 3px;
-moz-border-radius:0.3em 0.3em 0.3em 0.3em;
border-bottom-left-radius: 0.3em 0.3em;
border-bottom-right-radius: 0.3em 0.3em;
border-top-left-radius: 0.3em 0.3em;
border-top-right-radius: 0.3em 0.3em;
font-size: 1.3em;
background:#fff;
}

.feature-article h3 {margin-top:0; margin-bottom:0;}

.feature-article h3 a{
/* font-family: helvetica neue, helvetica, verdana; */
font-size: 1.7em;
color:#111;
padding: 0.2em 0.1em 0.2em 0em;
}

.feature-article h3 a:hover{
background:#111 !important;
text-decoration:none !important;
color:#ddd;
}

.feature-article p{
margin-top:10px;
padding:0px 20px 10px 20px;
}

.lettrine {
float:left; 
margin:5px 10px 0 0; 
height:80px;
font-family: 'LubalinGraphStd-Book', georgia, times new roman, serif;
}

.lettrine p {
font-size:8.5em;
line-height:1em;
margin:0;
}

.legend {font-size:0.8em; font-family:helvetica neue, helvetica, verdana; font-style:italic;}

blockquote {
width: 300px;
float:left;
background:#111;
color:#aaa;
}

blockquote h3{
font-size:1.9em;
font-weight:100 !important;
letter-spacing:0.02em;
}

/* Page elements
--------------------------------------- */

/* -- title -- */

#page-title {
font-family: helvetica neue, helvetica, verdana;
font-size:4em;
margin:0;
padding-top:0;
border:none;
color:#111;
font-weight:100;
padding-bottom:0.5em;
line-height:1em;
}

/* -- list-box + list-pages + pages-list -- */

.listBox-item, .list-pages-item, .pages-list-item{
float:left;
border:1px solid #999;
padding:5px 5px 5px 20px;
width:253px;
height:150px;
margin:5px 5px 5px 5px;
-moz-border-radius:0.3em 0.3em 0.3em 0.3em;
border-bottom-left-radius: 0.3em 0.3em;
border-bottom-right-radius: 0.3em 0.3em;
border-top-left-radius: 0.3em 0.3em;
border-top-right-radius: 0.3em 0.3em;
}

.listBox-item P, .list-pages-item P, .pages-list-item P{
font-size:1em;
margin-left:0px;
line-height:1.3em;
font-size:1em;
font-family:helvetica neue,helvetica,arial, verdana;
}

.list-pages-item P, .pages-list-item P {
margin-top:3px;
margin-bottom:3px;
}

.listBox-item H4 {
margin-bottom:8px;
margin-top:5px;
font-size:1em;
}

.list-pages-item a, .pages-list-item a {
font-weight:bold;
display: block;
font-size: 1.3em;
line-height: 1.2em;
color: #333;
}

.listBox-item:hover, .list-pages-item:hover, .pages-list-item:hover {
background:#fff;
}

/*
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F7F7F7), to(#E6E6E6));
background:-moz-linear-gradient(center top , #F7F7F7, #E6E6E6) repeat scroll 0 0 transparent;
*/

/* -- toc -- */

#toc a {
color:#cc3333;
font-size:14px;
}

#toc .title {
margin:0.7em 0;
}

#toc #toc-action-bar {
display:none;
padding:2px;
}

#toc #toc-action-bar a {
color:#1EAFF0;
font-size:11px;
}

/* -- delicious -- */

A.delicious-link {
font-family:georgia, serif !important;
color:#333 !important;
font-size:1.1em;
}

.delicious-tag {color:#333;}

H2.delicious-banner {display:none;}

li.delicious-post {
float:left;
margin: 5px;
border: 1px solid #aaa;
padding: 10px;
height: 190px;
width:210px;
background-color: #f3f0f0;
font-family:geogia, serif;
font-size:1.1em;
}

/* Search elements 
--------------------------------------- */

.search-results .item, .pages-list-item  {
border:1px solid #2EBFF3;
padding:5px 5px 5px 20px;
height:110px;
margin:5px 5px 5px 5px;
}

.search-results .item:hover, .pages-list-item:hover {
border-left:6px solid #2EBFF3;
background-color:#f1f1f1;
padding:5px 5px 5px 15px;
}

/* Image elements 
--------------------------------------- */

.image-container.alignleft {
padding-left:0;
margin-right:7px;
text-align:left;
float:left;
}

/* Form elements
--------------------------------------- */

input[type=text] {border-color:999;}

input.button {
background-color:#ccc;
border:0px none;
}

input.button:hover{
background-color:#1EAFF0;
}

.search-box .query-area {text-align:left;}

.search-box INPUT {padding:4px;}

/* Contact Form elements
--------------------------------------- */

.mailform-box form {float:left;}

/* Comments elements
--------------------------------------- */

.comments-box {
padding:5px;
background-color:#fff;
margin-left: -83px;
margin-top:20px;
margin-bottom:20px;
width: 1000px;
border: none;
background-image: url('http://www.w3prod.com/wikidot/background-strip.png');
background-repeat:repeat-x;
background-position:0px 0px;
padding-top:19px;
}

.comments-box #thread-container {
margin-top: 1em;
margin-left: 80px;
}

.comments-box #new-post-button{
font-family:helvetica neue, helvetica, arial;
font-size:1.2em;
}

.comments-box .content {
font-size: 0.9em;
margin: 2em;
color: #666;
}

/* Footer elements
--------------------------------------- */

#footer {
clear:both;
margin-top:30px;
overflow:hidden;
padding:12px;
color:#777;
background-color:#111;
margin-left:0px;
}

#footer a { color:#1EAFF0; }

#footer .options { display:none !important; visibility:hidden !important; }

#footer-bar {display:none;}

.page-tags {margin-top:40px;}
.page-tags span {border-top:none;}

#page-info {
clear:both;
font-size:87%;
margin:2px;
text-align:left;
}

.page-watch-options {
font-size:95%;
text-align:left;
margin:10px 0;
}

.page-options-bottom {
line-height:150%;
margin:10px 0;
text-align:left;
font-size:14px;
background-color:none;
}

.page-options-bottom a {color:#1EAFF0;}

#license-area {display:none; font-size:0.5em; font-family:helvetica, arial, verdana;}

/* Site : Manage
--------------------------------------- */

#site-manager-menu ul li ul li a {
font-size: 87%;
padding-left: 2em;
}