/*  
*
*		MSM Grid framework
*              Based on 960 Grid
*		File type: CSS2
*		Media type: screen
*		License : GPL
*   
---------------------------------------- 
       Stylesheet structure
----------------------------------------
*/

/* # 0 -- Debug -- */

/*.debug12{background: url(../images/grid/grid12Debug.gif) repeat-y top center;}*/
.debug16{background: url(../images/grid/grid16Debug.gif) repeat-y top center;}

/* # 1 -- Default body -- */

body {
  min-width: 960px;
}

/* # 2 -- Grid containers-- */

.container12,
.container16 {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}

/* # 3 -- Grid boxes -- */

.gridBox1,
.gridBox2,
.gridBox3,
.gridBox4,
.gridBox5,
.gridBox6,
.gridBox7,
.gridBox8,
.gridBox9,
.gridBox10,
.gridBox11,
.gridBox12,
.gridBox13,
.gridBox14,
.gridBox15,
.gridBox16 {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

.pushBoxL1, .pullBoxL1,
.pushBoxL2, .pullBoxL2,
.pushBoxL3, .pullBoxL3,
.pushBoxL4, .pullBoxL4,
.pushBoxL5, .pullBoxL5,
.pushBoxL6, .pullBoxL6,
.pushBoxL7, .pullBoxL7,
.pushBoxL8, .pullBoxL8,
.pushBoxL9, .pullBoxL9,
.pushBoxL10, .pullBoxL10,
.pushBoxL11, .pullBoxL11,
.pushBoxL12, .pullBoxL12,
.pushBoxL13, .pullBoxL13,
.pushBoxL14, .pullBoxL14,
.pushBoxL15, .pullBoxL15 {
  position: relative;
}

.container12 .gridBox3,
.container16 .gridBox4 {
  width: 220px;
}

.container12 .gridBox6,
.container16 .gridBox8 {
  width: 460px;
}

.container12 .gridBox9,
.container16 .gridBox12 {
  width: 700px;
}

.container12 .gridBox12,
.container16 .gridBox16 {
  width: 940px;
}

/* # 4 -- Grid default items -- */

.firstItem  {margin-left: 0;}
.lastItem   {margin-right: 0;}

/* # 5 -- 12 column grid -- */

.container12 .gridBox1   {width: 60px;}
.container12 .gridBox2   {width: 140px;}
.container12 .gridBox4   {width: 300px;}
.container12 .gridBox5   {width: 380px;}
.container12 .gridBox7   {width: 540px;}
.container12 .gridBox8   {width: 620px;}
.container12 .gridBox10 {width: 780px;}
.container12 .gridBox11 {width: 860px;}

/* # 6 -- 16 column grid -- */

.container16 .gridBox1   {width: 40px;}
.container16 .gridBox2   {width: 100px;}
.container16 .gridBox3   {width: 160px;}
.container16 .gridBox5   {width: 280px;}
.container16 .gridBox6   {width: 340px;}
.container16 .gridBox7   {width: 400px;}
.container16 .gridBox9   {width: 520px;}
.container16 .gridBox10 {width: 580px;}
.container16 .gridBox11 {width: 640px;}
.container16 .gridBox13 {width: 760px;}
.container16 .gridBox14 {width: 820px;}
.container16 .gridBox15 {width: 880px;}

/* # 7 -- Global left grid spaces -- */

.container12 .padBoxL3,
.container16 .padBoxL4 {
  padding-left: 240px;
}

.container12 .padBoxL6,
.container16 .padBoxL8 {
  padding-left: 480px;
}

.container12 .padBoxL9,
.container16 .padBoxL12 {
  padding-left: 720px;
}

/* # 8 -- 12 column left grid spaces -- */

.container12 .padBoxL1   {padding-left: 80px;}
.container12 .padBoxL2   {padding-left: 160px;}
.container12 .padBoxL4   {padding-left: 320px;}
.container12 .padBoxL5   {padding-left: 400px;}
.container12 .padBoxL7   {padding-left: 560px;}
.container12 .padBoxL8   {padding-left: 640px;}
.container12 .padBoxL10 {padding-left: 800px;}
.container12 .padBoxL11 {padding-left: 880px;}

/* # 9 -- 16 column left grid spaces -- */

.container16 .padBoxL1   {padding-left: 60px;}
.container16 .padBoxL2   {padding-left: 120px;}
.container16 .padBoxL3   {padding-left: 180px;}
.container16 .padBoxL5   {padding-left: 300px;}
.container16 .padBoxL6   {padding-left: 360px;}
.container16 .padBoxL7   {padding-left: 420px;}
.container16 .padBoxL9   {padding-left: 540px;}
.container16 .padBoxL10 {padding-left: 600px;}
.container16 .padBoxL11 {padding-left: 660px;}
.container16 .padBoxL13 {padding-left: 780px;}
.container16 .padBoxL14 {padding-left: 840px;}
.container16 .padBoxL15 {padding-left: 900px;}

/* # 10 -- Global right grid spaces -- */

.container12 .padBoxR3,
.container16 .padBoxR4 {
  padding-right: 240px;
}

.container12 .padBoxR6,
.container16 .padBoxR8 {
  padding-right: 480px;
}

.container12 .padBoxR9,
.container16 .padBoxR12 {
  padding-right: 720px;
}

/* # 11 -- 12 column right grid spaces -- */

.container12 .padBoxR1  {padding-right: 80px;}
.container12 .padBoxR2  {padding-right: 160px;}
.container12 .padBoxR4  {padding-right: 320px;}
.container12 .padBoxR5  {padding-right: 400px;}
.container12 .padBoxR7  {padding-right: 560px;}
.container12 .padBoxR8  {padding-right: 640px;}
.container12 .padBoxR10{padding-right: 800px;}
.container12 .padBoxR11{padding-right: 880px;}

/* # 12 -- 16 column right grid spaces -- */

.container16 .padBoxR1   {padding-right: 60px;}
.container16 .padBoxR2   {padding-right: 120px;}
.container16 .padBoxR3   {padding-right: 180px;}
.container16 .padBoxR5   {padding-right: 300px;}
.container16 .padBoxR6   {padding-right: 360px;}
.container16 .padBoxR7   {padding-right: 420px;}
.container16 .padBoxR9   {padding-right: 540px;}
.container16 .padBoxR10 {padding-right: 600px;}
.container16 .padBoxR11 {padding-right: 660px;}
.container16 .padBoxR13 {padding-right: 780px;}
.container16 .padBoxR14 {padding-right: 840px;}
.container16 .padBoxR15 {padding-right: 900px;}

/* # 13 -- Push space global -- */

.container12 .pushBoxL3,
.container16 .pushBoxL4 {
  left: 240px;
}

.container12 .pushBoxL6,
.container16 .pushBoxL8 {
  left: 480px;
}

.container12 .pushBoxL9,
.container16 .pushBoxL12 {
  left: 720px;
}

/* # 14 -- Push space (12 column) -- */

.container12 .pushBoxL1   {left: 80px;}
.container12 .pushBoxL2   {left: 160px;}
.container12 .pushBoxL4   {left: 320px;}
.container12 .pushBoxL5   {left: 400px;}
.container12 .pushBoxL7   {left: 560px;}
.container12 .pushBoxL8   {left: 640px;}
.container12 .pushBoxL10 {left: 800px;}
.container12 .pushBoxL11 {left: 880px;}

/* # 15 -- Push space (16 column) -- */

.container16 .pushBoxL1   {left: 60px;}
.container16 .pushBoxL2   {left: 120px;}
.container16 .pushBoxL3   {left: 180px;}
.container16 .pushBoxL5   {left: 300px;}
.container16 .pushBoxL6   {left: 360px;}
.container16 .pushBoxL7   {left: 420px;}
.container16 .pushBoxL9   {left: 540px;}
.container16 .pushBoxL10 {left: 600px;}
.container16 .pushBoxL11 {left: 660px;}
.container16 .pushBoxL13 {left: 780px;}
.container16 .pushBoxL14 {left: 840px;}
.container16 .pushBoxL15 {left: 900px;}

/* # 16 -- Pull space global -- */

.container12 .pullBoxL3,
.container16 .pullBoxL4 {
  left: -240px;
}

.container12 .pullBoxL6,
.container16 .pullBoxL8 {
  left: -480px;
}

.container12 .pullBoxL9,
.container16 .pullBoxL12 {
  left: -720px;
}

/* # 17 -- Pull space (12 column) -- */

.container12 .pullBoxL1   {left: -80px;}
.container12 .pullBoxL2   {left: -160px;}
.container12 .pullBoxL4   {left: -320px;}
.container12 .pullBoxL5   {left: -400px;}
.container12 .pullBoxL7   {left: -560px;}
.container12 .pullBoxL8   {left: -640px;}
.container12 .pullBoxL10 {left: -800px;}
.container12 .pullBoxL11 {left: -880px;}

/* # 18 -- Pull space (16 column) -- */

.container16 .pullBoxL1   {left: -60px;}
.container16 .pullBoxL2   {left: -120px;}
.container16 .pullBoxL3   {left: -180px;}
.container16 .pullBoxL5   {left: -300px;}
.container16 .pullBoxL6   {left: -360px;}
.container16 .pullBoxL7   {left: -420px;}
.container16 .pullBoxL9   {left: -540px;}
.container16 .pullBoxL10 {left: -600px;}
.container16 .pullBoxL11 {left: -660px;}
.container16 .pullBoxL13 {left: -780px;}
.container16 .pullBoxL14 {left: -840px;}
.container16 .pullBoxL15 {left: -900px;}

/* # 19 -- Grid cleaner -- */

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

.clearfix:before,
.clearfix:after,
.container12:before,
.container12:after,
.container16:before,
.container16:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

.clearfix:after,
.container12:after,
.container16:after {
  clear: both;
}

.clearfix,
.container12,
.container16 {
  zoom: 1;
}