/*
Name: NudeGrid
Description: Simple css-grid for easy wireframing 
Version: 0.1
Author: Nikolai Selders
Author URI: http://www.th3design.de
How to: see the Readme file and the example.html;
*/

/**
* NueGrid is al simple lightweight grid with no content styling within.
* you can use it in these way way. 1st wrap it with a .row class
* then you can ues a 16+ colum grid called like .c1, .c2, ....c16
* special widths are .half, .fifth , .quarter, .third and .full 
*

  .c1
  #--#--#--#--#--#--#--#--#--#--#--#--#--#--#--#--#
  #  #  #  #  #  #  #  #  #  #  #  #  #  #  #  #  #
  #--#--#--#--#--#--#--#--#--#--#--#--#--#--#--#--#

  .half
  #-----------------------#-----------------------#
  #                       #                       #
  #-----------------------#-----------------------#

  .third
  #---------------#---------------#---------------#
  #               #               #               #
  #---------------#---------------#---------------#

  ecetera....

  */


  
*{
  margin:0;
  padding:0;
  border:0;
}

div{
  /*border: 1px solid #ff00ff;*/
  
}

html {
    font-family: sans-serif; 
    -ms-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%; 
    height: 100%;
}


body {
  background: white;
  color: #000;
  padding: 0;
  margin: 0;
  font-family: Arial, sans-serif;
  -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
  -moz-osx-font-smoothing: grayscale;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  position: relative;
  cursor: default; 
      height: 100%;

}


.clearfix, .row {
  *zoom: 1; 
}
.clearfix:before, .clearfix:after, .row:before, .row:after {
  content: " ";
  display: table; 
}
.clearfix:after, .row:after {
  clear: both; 
}


img {
  -ms-interpolation-mode: bicubic; 
  /*width: 100%;*/
  
}


table {
    border-collapse: collapse;
    border-spacing: 0;
}



.row {
  width: 980px;
  margin: 0 auto;
  /*max-width: 62.5em;*/
  max-width: 980px;
  *zoom: 1; 
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}



.row-full-width {
  width: 100%;
  margin: 0 auto;
  max-width: 100%;
  *zoom: 1; 
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}


.row:before, .row:after,
.row-full-width:before, .row-full-width:after {
  content: " ";
  display: table; 
}

.row .row, .row-full-width .row{
  width: auto;
}



.column,
.columns,
.c1, .c2, .c3, .c4, .quarter, .c5, .c6, .c7, .c8, .half, .fifth, .c9, .c10, .c11, .c12, .c13, .c14, .c15, .c16, .third {
  position: relative;
  /*padding:2%;*/
  width: 100%;
  float: left; 
  display: block;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}



/* 16 x Grid */

.c1{ position: relative; width: 6.25%; }
.c2{ position: relative; width: 12.5%; }
.c3{ position: relative; width: 18.75%; }
.fifth{ position: relative; width: 20%; }
.c4, .quarter{ position: relative; width: 25%; }
.c5{ position: relative; width: 31.25%; }
.c6{ position: relative; width: 37.5%; }
.c7{ position: relative; width: 43.75%; }
.c8, .half{ position: relative; width: 50%; }
.c9{ position: relative; width: 56.25%; }
.c10{ position: relative; width: 62.5%; }
.c11{ position: relative; width: 68.75%; }
.c12{ position: relative; width: 75%; }
.c13{ position: relative; width: 81.25%; }
.c14{ position: relative; width: 87.5%; }
.c15{ position: relative; width: 93.75%; }
.c16, .full{ position: relative; width: 100%; }
.third{ position: relative; width: 33.3332%; }



/*  16 x Spacer*/

.sl05{left : 3.125%;}
.sl1{left : 6.25%;}
.sl2{left : 12.5%;}
.sl3{left : 18.75%;}
.sl4{left : 25%;}
.sl5{left : 31.25%;}
.sl6{left : 37.5%;}
.sl7{left : 43.75%;}
.sl8{left : 50%;}
.sl9{left : 56.25%;}
.sl10{left: 62.5%;}
.sl11{left: 68.75%;}
.sl12{left: 75%;}
.sl13{left: 81.25%;}
.sl14{left: 87.5%;}
.sl15{left: 93.75%;}
.sl16{left: 100%;}

.sr05{right : 3.125%;}
.sr1{right : 6.25%;}
.sr2{right : 12.5%;}
.sr3{right : 18.75%;}
.sr4{right : 25%;}
.sr5{right : 31.25%;}
.sr6{right : 37.5%;}
.sr7{right : 43.75%;}
.sr8{right : 50%;}
.sr9{right : 56.25%;}
.sr10{right: 62.5%;}
.sr11{right: 68.75%;}
.sr12{right: 75%;}
.sr13{right: 81.25%;}
.sr14{right: 87.5%;}
.sr15{right: 93.75%;}
.sr16{right: 100%;}


.st05{
  margin-top:3.125%;
}


.center{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  float: none !important; 
}



.text-center{
  text-align: center;
}

.twoColumn{
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    column-width: 50%;
    column-gap: 10px;
}


.floatLeft{
  float: left;
}


.floatRight{
  float: right;
}




/*########## Responsiv part ################### */

/*Ipad Landscape & Portrait*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {


}