body {
margin: 0;
padding: 0;
text-align: center;
font: .8em normal arial, helvetica, verdana, geneva, sans-serif;
background: #333;
}

* {
    box-sizing: border-box;
}


a {color: #069;}

p {
padding: 4px 24px 4px 0;
}

h1,h2,h3,h4 {
color: #333;
}

h1 {
font-size: 1.5em;
margin: 0;
}

h1 span {
display: block;
font-size: .8em;
margin-bottom: 20px
}

h2 {
font-size: 1.4em;
margin: 0;
}

h3 {
font-size: 1.1em;
margin: 0;
}

main {
max-width: 500px; 
margin: 0 auto 10px;
padding-top: 0;
text-align: left;
border: 8px solid #444;
background: #333;
-moz-box-shadow: 0 0 50px 1px #111;
-webkit-box-shadow: 0 0 50px 1px#111;
box-shadow: 0 0 50px 1px #111;
display: block;
}

main { 
-moz-border-radius: 8px 5px; 
border-radius: 8px 5px; 
}

#maincontainer { 
background: #ccc;
}

#content { 
padding: 12px 14px 20px;
}

#content ul.margin {
margin-left: 20px;
padding: 0;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;} /*left*/
.col-4 {width: 33.33%;} /*right*/
.col-5 {width: 41.66%;}
.col-6 {width: 50%;} /*centre*/
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
float: left;
}

.row::after {
content: "";
clear: both;
display: table;
}

/* UTILITY */
.clearleft {clear:left}
.clearright {clear:right}
.clearboth {clear:left; clear:right}


.margintop20, div.margintop20 {
margin-top: 20px;
}

.margintop30 {
margin-top: 30px;
}

.marginleft {
margin-left: 16.66%
}

.floatleft {float: left}
.floatright {float: right}

#footer p.cent {text-align: center;}

.cent {text-align: center;}