/*

  - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
                                    #
     ###                            #
    #       ###  ###  ###  ###   ####
    # ###   #    #    #    #    #   #
    #   #   #    #    #    #    #   #
     ###    #    #    #    #     ###

  - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
  R E S O L U T I O N - R E S P O N S I V E  
  M O B I L E   F I R S T
  C S S - F R A M E W O R K
  - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
  
  Version 0.2 ( very BETA! )
  HATSUMATSU 2011

  - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

  hatsumatsu.de
  
  - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  Common device resolutions:

                                   Landscape       Portait

  iPhone 3:      320 x 480              M             M

  iPhone 4:      640 x 960              T             M

  iPad:          768 x 1024             D             T


  Grid sizes

  D:     988   =   12 x 64   +  11 x 20

  T:     748        6 x 108  +  5  x 20

  M:     92%        1 x 92%


*/

/* ### all resolutions ### */

body {
  overflow: auto;
}

  .grid-container {
    width: 92%;
    padding-left: 0px;
}
  .grid-1,
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5,
  .grid-6,
  .grid-7,
  .grid-8,
  .grid-9,
  .grid-10,
  .grid-11,
  .grid-12,
  .grid-full,
  
  .grid-1-t,
  .grid-2-t,
  .grid-3-t,
  .grid-4-t,
  .grid-5-t,
  .grid-6-t,
  .grid-full-t {
    width: 100%;
    margin: 0px 0px 10px 0px;
  }
  
  .grid-inner {
    margin: 10px;
  }

  .hide-d {
    display: block;
  }
  
  .hide-t {
    display: block;
  }
  
  .hide-m {
    display: none;
  }


/* ### tablet ### */

@media screen and (min-width: 768px) {

  .grid-container {
    width: 768px;
    /* overflow-y: hidden; */
    padding-left: 20px;
}

.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12,
.grid-full,

.grid-1-t,
.grid-2-t,
.grid-3-t,
.grid-4-t,
.grid-5-t,
.grid-6-t {
  float: left;
  margin: 0px 20px 18px 0px;
}


  .grid-1,
  .grid-2 {
    width: 108px;
  }
  .grid-3,
  .grid-4 {
    width: 236px;
  }
  .grid-5,
  .grid-6 {
    width: 364px;
  }
  .grid-7,
  .grid-8 {
    width: 492px;
  }
  .grid-9,
  .grid-10 {
    width: 620px;
  }
  .grid-11,
  .grid-12 {
    width: 748px;
  }
  .grid-full {
    width: 768px;
  }

  .grid-1-t {
    width: 108px;
  }
  .grid-2-t {
    width: 236px;
  }
  .grid-3-t {
    width: 364px;
  }
  .grid-4-t {
    width: 492px;
  }
  .grid-5-t {
    width: 620px;
  }
  .grid-6-t {
    width: 748px;
  }
  .grid-full-t {
    width: 768px;
  }


  .contains-grid.grid-1,
  .contains-grid.grid-2,
  .contains-grid.grid-3,
  .contains-grid.grid-4,
  .contains-grid.grid-5,
  .contains-grid.grid-6,
  .contains-grid.grid-7,
  .contains-grid.grid-8,
  .contains-grid.grid-9,
  .contains-grid.grid-10,
  .contains-grid.grid-11,
  .contains-grid.grid-12 {
    position: relative;
    margin: 0px;  
}

  .contains-grid.grid-1-t,  
  .contains-grid.grid-1,
  .contains-grid.grid-2 {
    width: 128px;
  }
  .contains-grid.grid-2-t,
  .contains-grid.grid-3,
  .contains-grid.grid-4 {
    width: 256px;
  }
  .contains-grid.grid-3-t,
  .contains-grid.grid-5,
  .contains-grid.grid-6 {
    width: 384px;
  }
  .contains-grid.grid-4-t
  .contains-grid.grid-7,
  .contains-grid.grid-8 {
    width: 512px;
  }
  .contains-grid.grid-5-t,
  .contains-grid.grid-9,
  .contains-grid.grid-10 {
    width: 640px;
  }
  .contains-grid.grid-6-t,
  .contains-grid.grid-11,
  .contains-grid.grid-12 {
    width: 768px;
  }
  .contains-grid.grid-full {
    width: 768px;
  }

  .grid-start,
  .grid-start-t {
    clear: left;
  }
  
  .grid-start-d {
    clear: none;
  }
  


  .indent-1,
  .indent-0-t {
    margin-left: 0px;
  }
  .indent-2,
  .indent-3,
  .indent-1-t {
    margin-left: 128px;
  }
  .indent-4,
  .indent-5,
  .indent-2-t {
    margin-left: 256px;
  }
  .indent-6,
  .indent-7,
  .indent-3-t {
    margin-left: 384px;
  }
  .indent-8,
  .indent-9,
  .indent-4-t {
    margin-left: 512px;
  }
  .indent-10,
  .indent-11,
  .indent-5-t {
    margin-left: 640px;
  }

  .hide-d {
    display: block;
  }

  .hide-t {
    display: none;
  }

  .hide-m {
    display: block;
  }



} /* end min-width 768px */

/* ### desktop ### */

@media screen and (min-width: 1008px) {

.grid-container {
  width: 1008px;
}

.grid-1 {
  width: 64px;
}
.grid-2 {
  width: 148px;
}
.grid-3 {
  width: 232px;
}
.grid-4 {
  width: 316px;
}
.grid-5 {
  width: 400px;
}
.grid-6 {
  width: 484px;
}
.grid-7 {
  width: 568px;
}
.grid-8 {
  width: 652px;
}
.grid-9 {
  width: 736px;
}
.grid-10 {
  width: 820px;
}
.grid-11 {
  width: 904px;
}
.grid-12 {
  width: 988px;
}
.grid-full {
  width: 1008px;
}


.contains-grid.grid-1 {
  width: 84px;
}
.contains-grid.grid-2 {
  width: 168px;
}
.contains-grid.grid-3 {
  width: 252px;
}
.contains-grid.grid-4 {
  width: 336px;
}
.contains-grid.grid-5 {
  width: 420px;
}
.contains-grid.grid-6 {
  width: 504px;
}
.contains-grid.grid-7 {
  width: 588px;
}
.contains-grid.grid-8 {
  width: 672px;
}
.contains-grid.grid-9 {
  width: 756px;
}
.contains-grid.grid-10 {
  width: 840px;
}
.contains-grid.grid-11 {
  width: 924px;
}
.contains-grid.grid-12 {
  width: 1008px;
}


.indent-1 {
  margin-left: 84px;
}
.indent-2 {
  margin-left: 168px;
}
.indent-3 {
  margin-left: 252px;
}
.indent-4 {
  margin-left: 336px;
}
.indent-5 {
  margin-left: 420px;
}
.indent-6 {
  margin-left: 504px;
}
.indent-7 {
  margin-left: 588px;
}
.indent-8 {
  margin-left: 672px;
}
.indent-9 {
  margin-left: 756px;
}
.indent-10 {
  margin-left: 840px;
}
.indent-11 {
  margin-left: 924px;
}

.hide-d {
  display: none;
}

.hide-t {
  display: block;
}

.hide-m {
  display: block;
}

} /* end min-width 1008px */