/*==============================================================================
    file:           grid.css
    description:    Basic grid for layouts
    author:         Harri Liimatta (harri@liimatta.net)
    version:        1.0
    lisence:        free
==============================================================================*/


.content { 
    position: relative; width: 960px; height: auto; margin: 0 auto; text-align: 
    left; clear: both; 
}

.content_full{
    position: relative; width: 100%; height: auto; margin: 0 auto; text-align: 
    left; clear: both; 
}

/*  Columns
==============================================================================*/

.col-12{
    position: relative; float: left; width: 940px; padding: 0 10px;
}

.col-11{
    position: relative; float: left; width: 860px; padding: 0 10px;
}

.col-10{
    position: relative; float: left; width: 780px; padding: 0 10px;
}

.col-9{
    position: relative; float: left; width: 700px; padding: 0 10px;
}

.col-8{
    position: relative; float: left; width: 620px; padding: 0 10px; 
}

.col-7{
    position: relative; float: left; width: 540px; padding: 0 10px;
}

.col-6{
    position: relative; float: left; width: 460px; padding: 0 10px;
}

.col-5{
    position: relative; float: left; width: 380px; padding: 0 10px;
}

.col-4{
    position: relative; float: left; width: 300px; padding: 0 10px;
}

.col-3{
    position: relative; float: left; width: 220px; padding: 0 10px;
}

.col-2{
    position: relative; float: left; width: 140px; padding: 0 10px; 
}

.col-1{
    position: relative; float: left; width: 60px; padding: 0 10px;
}

.col{
    position: relative; float: left; padding: 0 10px;
}

/* wrappers
==============================================================================*/
.wrapper-2, .wrapper-3, .wrapper-4, .wrapper-5, .wrapper-6, .wrapper-7, 
.wrapper-8, .wrapper-9, .wrapper-10, .wrapper-11, .wrapper-12, .wrapper { 
    position: relative; float: left; padding: 0;
}

.wrapper-12{
    width:960px;
}
.wrapper-11{
    width:880px;
}
.wrapper-10{
    width:800px;
}
.wrapper-9{
    width:720px;
}
.wrapper-8{
    width:640px;
}
.wrapper-7{
    width:560px;
}
.wrapper-6{
    width:480px;
}
.wrapper-5{
    width:400px;
}
.wrapper-4 {
    width:320px;
}
.wrapper-3{
    width:240px;
}
.wrapper-2{
    width:160px;
}

/*  pre
==============================================================================*/
.pre-11{
    margin-left:880px;
}
.pre-10{
    margin-left:800px;
}
.pre-9{
    margin-left:720px;
}
.pre-8{
    margin-left:640px;
}
.pre-7{
    margin-left:560px;
}
.pre-6{
    margin-left:480px;
}
.pre-5{
    margin-left:400px;
}
.pre-4 {
    margin-left:320px;
}
.pre-3{
    margin-left:240px;
}
.pre-2{
    margin-left:160px;
}
.pre-1{
    margin-left:80px;
}
/*
    CSS Clearfix

    http://www.webtoolkit.info/css-clearfix.html
*/
.clearfix:after {
	content: ".";display: block;clear: both;visibility: hidden;
	line-height: 0;	height: 0;
}

.clearfix {
	display: inline-block;
}

html[xmlns] .clearfix {
	display: block;
}

* html .clearfix {
	height: 1%;
}

/*  debug
==============================================================================*/

.borders{
 border: 1px solid #f00; padding: 0 9px;