/* -------------------------------------------------------------- 

   == STRUCTURE: ========================
    * Page width:            980 px
    * Number of columns:     50 columus
    * Column width:          0
    * Margin width:          20 px
   ======================================

   author   : whb
   date     : 2013
   version  : 1.0.1
-------------------------------------------------------------- */

/* A g-container should group all your columns. */
.g-container {
  width: 980px;
  margin: 0 auto;
}

/* Use this class on any div.span / g-container to see the grid. */
.g-showgrid { 
  background: url(src/grid.png); 
}

/* Columns
-------------------------------------------------------------- */

/* Sets up basic grid floating and margin. */
div.g-c-1, div.g-c-2, div.g-c-3, div.g-c-4, div.g-c-5, div.g-c-6, div.g-c-7, div.g-c-8, div.g-c-9, div.g-c-10, div.g-c-11, div.g-c-12, div.g-c-13, div.g-c-14, div.g-c-15, div.g-c-16, div.g-c-17, div.g-c-18, div.g-c-19, div.g-c-20, div.g-c-21, div.g-c-22, div.g-c-23, div.g-c-24, div.g-c-25, div.g-c-26, div.g-c-27, div.g-c-28, div.g-c-29, div.g-c-30, div.g-c-31, div.g-c-32, div.g-c-33, div.g-c-34, div.g-c-35, div.g-c-36, div.g-c-37, div.g-c-38, div.g-c-39, div.g-c-40, div.g-c-41, div.g-c-42, div.g-c-43, div.g-c-44, div.g-c-45, div.g-c-46, div.g-c-47, div.g-c-48, div.g-c-49 {display:inline; float:left; margin-right:20px;}

/* The last column in a row needs this class. */
div.g-c-last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.g-c-2  { width: 20px;}
.g-c-3  { width: 40px;}
.g-c-4  { width: 60px;}
.g-c-5  { width: 80px;}
.g-c-6  { width: 100px;}
.g-c-7  { width: 120px;}
.g-c-8  { width: 140px;}
.g-c-9  { width: 160px;}
.g-c-10  { width: 180px;}
.g-c-11 { width: 200px;}
.g-c-12 { width: 220px;}
.g-c-13 { width: 240px;}
.g-c-14 { width: 260px;}
.g-c-15 { width: 280px;}
.g-c-16 { width: 300px;}
.g-c-17 { width: 320px;}
.g-c-18 { width: 340px;}
.g-c-19 { width: 360px;}
.g-c-20 { width: 380px;}
.g-c-21 { width: 400px;}
.g-c-22 { width: 420px;}
.g-c-23 { width: 440px;}
.g-c-24 { width: 460px;}
.g-c-25 { width: 480px;}
.g-c-26 { width: 500px;}
.g-c-27 { width: 520px;}
.g-c-28 { width: 540px;}
.g-c-29 { width: 560px;}
.g-c-30 { width: 580px;}
.g-c-31 { width: 600px;}
.g-c-32 { width: 620px;}
.g-c-33 { width: 640px;}
.g-c-34 { width: 660px;}
.g-c-35 { width: 680px;}
.g-c-36 { width: 700px;}
.g-c-37 { width: 720px;}
.g-c-38 { width: 740px;}
.g-c-39 { width: 760px;}
.g-c-40 { width: 780px;}
.g-c-41 { width: 800px;}
.g-c-42 { width: 820px;}
.g-c-43 { width: 840px;}
.g-c-44 { width: 860px;}
.g-c-45 { width: 880px;}
.g-c-46 { width: 900px;}
.g-c-47 { width: 920px;}
.g-c-48 { width: 940px;}
.g-c-49 { width: 960px;}
.g-c-50, div.g-c-50 { width: 980px; margin-right: 0; }

/* fluid layout */
.fluid .g-c-1,.fluid .g-c-2,.fluid .g-c-3,.fluid .g-c-4,.fluid .g-c-5,.fluid .g-c-6,.fluid .g-c-7,.fluid .g-c-8,.fluid .g-c-9,.fluid .g-c-10,.fluid .g-c-11,.fluid .g-c-12,.fluid .g-c-13,.fluid .g-c-14,.fluid .g-c-15,.fluid .g-c-16,.fluid .g-c-17,.fluid .g-c-18,.fluid .g-c-19,.fluid .g-c-20,.fluid .g-c-21,.fluid .g-c-22,.fluid .g-c-23,.fluid .g-c-24,.fluid .g-c-25,.fluid .g-c-26,.fluid .g-c-27,.fluid .g-c-28,.fluid .g-c-29,.fluid .g-c-30,.fluid .g-c-31,.fluid .g-c-32,.fluid .g-c-33,.fluid .g-c-34,.fluid .g-c-35,.fluid .g-c-36,.fluid .g-c-37,.fluid .g-c-38,.fluid .g-c-39,.fluid .g-c-40,.fluid .g-c-41,.fluid .g-c-42,.fluid .g-c-43,.fluid .g-c-44,.fluid .g-c-45,.fluid .g-c-46,.fluid .g-c-47,.fluid .g-c-48,.fluid .g-c-49,.fluid .g-c-50{display:inline; float:left; margin-right:2%}
.fluid .g-c-last {margin-right:0;}
.fluid .g-c-1 {width:0.04%}
.fluid .g-c-2 {width:2.08%}
.fluid .g-c-3 {width:4.12%}
.fluid .g-c-4 {width:6.16%}
.fluid .g-c-5 {width:8.2%}
.fluid .g-c-6 {width:10.24%}
.fluid .g-c-7 {width:12.28%}
.fluid .g-c-8 {width:14.32%}
.fluid .g-c-9 {width:16.36%}
.fluid .g-c-10 {width:18.4%}
.fluid .g-c-11 {width:20.44%}
.fluid .g-c-12 {width:22.48%}
.fluid .g-c-13 {width:24.52%}
.fluid .g-c-14 {width:26.56%}
.fluid .g-c-15 {width:28.6%}
.fluid .g-c-16 {width:30.64%}
.fluid .g-c-17 {width:32.68%}
.fluid .g-c-18 {width:34.72%}
.fluid .g-c-19 {width:36.76%}
.fluid .g-c-20 {width:38.8%}
.fluid .g-c-21 {width:40.84%}
.fluid .g-c-22 {width:42.88%}
.fluid .g-c-23 {width:44.92%}
.fluid .g-c-24 {width:46.96%}
.fluid .g-c-25 {width:49%}
.fluid .g-c-26 {width:51.04%}
.fluid .g-c-27 {width:53.08%}
.fluid .g-c-28 {width:55.12%}
.fluid .g-c-29 {width:57.16%}
.fluid .g-c-30 {width:59.2%}
.fluid .g-c-31 {width:61.24%}
.fluid .g-c-32 {width:63.28%}
.fluid .g-c-33 {width:65.32%}
.fluid .g-c-34 {width:67.36%}
.fluid .g-c-35 {width:69.4%}
.fluid .g-c-36 {width:71.44%}
.fluid .g-c-37 {width:73.48%}
.fluid .g-c-38 {width:75.52%}
.fluid .g-c-39 {width:77.56%}
.fluid .g-c-40 {width:79.6%}
.fluid .g-c-41 {width:81.64%}
.fluid .g-c-42 {width:83.68%}
.fluid .g-c-43 {width:85.72%}
.fluid .g-c-44 {width:87.76%}
.fluid .g-c-45 {width:89.8%}
.fluid .g-c-46 {width:91.84%}
.fluid .g-c-47 {width:93.88%}
.fluid .g-c-48 {width:95.92%}
.fluid .g-c-49 {width:97.96%}
.fluid .g-c-50 {width:100%;margin-right:0;}


/* Add these to a column to append empty cols. */
.g-pr-2  { padding-right: 20px;}
.g-pr-3  { padding-right: 40px;}
.g-pr-4  { padding-right: 60px;}
.g-pr-5  { padding-right: 80px;}
.g-pr-6  { padding-right: 100px;}
.g-pr-7  { padding-right: 120px;}
.g-pr-8  { padding-right: 140px;}
.g-pr-9  { padding-right: 160px;}
.g-pr-10 { padding-right: 180px;}
.g-pr-11 { padding-right: 200px;}
.g-pr-12 { padding-right: 220px;}
.g-pr-13 { padding-right: 240px;}
.g-pr-14 { padding-right: 260px;}
.g-pr-15 { padding-right: 280px;}
.g-pr-16 { padding-right: 300px;}
.g-pr-17 { padding-right: 320px;}
.g-pr-18 { padding-right: 340px;}
.g-pr-19 { padding-right: 360px;}
.g-pr-20 { padding-right: 380px;}
.g-pr-21 { padding-right: 400px;}
.g-pr-22 { padding-right: 420px;}
.g-pr-23 { padding-right: 440px;}
.g-pr-24 { padding-right: 460px;}
.g-pr-25 { padding-right: 480px;}
.g-pr-26 { padding-right: 500px;}
.g-pr-27 { padding-right: 520px;}
.g-pr-28 { padding-right: 540px;}
.g-pr-29 { padding-right: 560px;}
.g-pr-30 { padding-right: 580px;}
.g-pr-31 { padding-right: 600px;}
.g-pr-32 { padding-right: 620px;}
.g-pr-33 { padding-right: 640px;}
.g-pr-34 { padding-right: 660px;}
.g-pr-35 { padding-right: 680px;}
.g-pr-36 { padding-right: 700px;}
.g-pr-37 { padding-right: 720px;}
.g-pr-38 { padding-right: 740px;}
.g-pr-39 { padding-right: 760px;}
.g-pr-40 { padding-right: 780px;}
.g-pr-41 { padding-right: 800px;}
.g-pr-42 { padding-right: 820px;}
.g-pr-43 { padding-right: 840px;}
.g-pr-44 { padding-right: 860px;}
.g-pr-45 { padding-right: 880px;}
.g-pr-46 { padding-right: 900px;}
.g-pr-47 { padding-right: 920px;}
.g-pr-48 { padding-right: 940px;}
.g-pr-49 { padding-right: 960px;}


/* Add these to a column to prepend empty cols. */
.g-pl-2  { padding-left: 20px;}
.g-pl-3  { padding-left: 40px;}
.g-pl-4  { padding-left: 60px;}
.g-pl-5  { padding-left: 80px;}
.g-pl-6  { padding-left: 100px;}
.g-pl-7  { padding-left: 120px;}
.g-pl-8  { padding-left: 140px;}
.g-pl-9  { padding-left: 160px;}
.g-pl-10  { padding-left: 180px;}
.g-pl-11 { padding-left: 200px;}
.g-pl-12 { padding-left: 220px;}
.g-pl-13 { padding-left: 240px;}
.g-pl-14 { padding-left: 260px;}
.g-pl-15 { padding-left: 280px;}
.g-pl-16 { padding-left: 300px;}
.g-pl-17 { padding-left: 320px;}
.g-pl-18 { padding-left: 340px;}
.g-pl-19 { padding-left: 360px;}
.g-pl-20 { padding-left: 380px;}
.g-pl-21 { padding-left: 400px;}
.g-pl-22 { padding-left: 420px;}
.g-pl-23 { padding-left: 440px;}
.g-pl-24 { padding-left: 460px;}
.g-pl-25 { padding-left: 480px;}
.g-pl-26 { padding-left: 500px;}
.g-pl-27 { padding-left: 520px;}
.g-pl-28 { padding-left: 540px;}
.g-pl-29 { padding-left: 560px;}
.g-pl-30 { padding-left: 580px;}
.g-pl-31 { padding-left: 600px;}
.g-pl-32 { padding-left: 620px;}
.g-pl-33 { padding-left: 640px;}
.g-pl-34 { padding-left: 660px;}
.g-pl-35 { padding-left: 680px;}
.g-pl-36 { padding-left: 700px;}
.g-pl-37 { padding-left: 720px;}
.g-pl-38 { padding-left: 740px;}
.g-pl-39 { padding-left: 760px;}
.g-pl-40 { padding-left: 780px;}
.g-pl-41 { padding-left: 800px;}
.g-pl-42 { padding-left: 820px;}
.g-pl-43 { padding-left: 840px;}
.g-pl-44 { padding-left: 860px;}
.g-pl-45 { padding-left: 880px;}
.g-pl-46 { padding-left: 900px;}
.g-pl-47 { padding-left: 920px;}
.g-pl-48 { padding-left: 940px;}
.g-pl-49 { padding-left: 960px;}


/* Use these classes on an element to push it into the 
   next column, or to pull it into the previous column.  */

.g-ml-1 { margin-left: -20px;}
.g-ml-2 { margin-left: -40px;}
.g-ml-3 { margin-left: -60px;}
.g-ml-4 { margin-left: -80px;}
.g-ml-5 { margin-left: -100px;}
.g-ml-6 { margin-left: -120px;}
.g-ml-7 { margin-left: -140px;}
.g-ml-8 { margin-left: -160px;}
.g-ml-9 { margin-left: -180px;}
.g-ml-10 { margin-left: -200px;}
.g-ml-11 { margin-left: -220px;}
.g-ml-12 { margin-left: -240px;}
.g-ml-13 { margin-left: -260px;}
.g-ml-14 { margin-left: -280px;}
.g-ml-15 { margin-left: -300px;}
.g-ml-16 { margin-left: -320px;}
.g-ml-17 { margin-left: -340px;}
.g-ml-18 { margin-left: -360px;}
.g-ml-19 { margin-left: -380px;}
.g-ml-20 { margin-left: -400px;}
.g-ml-21 { margin-left: -420px;}
.g-ml-22 { margin-left: -440px;}
.g-ml-23 { margin-left: -460px;}
.g-ml-24 { margin-left: -480px;}
.g-ml-25 { margin-left: -500px;}
.g-ml-26 { margin-left: -520px;}
.g-ml-27 { margin-left: -540px;}
.g-ml-28 { margin-left: -560px;}
.g-ml-29 { margin-left: -580px;}
.g-ml-30 { margin-left: -600px;}
.g-ml-31 { margin-left: -620px;}
.g-ml-32 { margin-left: -640px;}
.g-ml-33 { margin-left: -660px;}
.g-ml-34 { margin-left: -680px;}
.g-ml-35 { margin-left: -700px;}
.g-ml-36 { margin-left: -720px;}
.g-ml-37 { margin-left: -740px;}
.g-ml-38 { margin-left: -760px;}
.g-ml-39 { margin-left: -780px;}
.g-ml-40 { margin-left: -800px;}
.g-ml-41 { margin-left: -820px;}
.g-ml-42 { margin-left: -840px;}
.g-ml-43 { margin-left: -860px;}
.g-ml-44 { margin-left: -880px;}
.g-ml-45 { margin-left: -900px;}
.g-ml-46 { margin-left: -920px;}
.g-ml-47 { margin-left: -940px;}
.g-ml-48 { margin-left: -960px;}
.g-ml-49 { margin-left: -980px;}

.g-ml-1, .g-ml-2, .g-ml-3, .g-ml-4, .g-ml-5, .g-ml-6, .g-ml-7, .g-ml-8, .g-ml-9, .g-ml-10, .g-ml-11, .g-ml-12, .g-ml-13, .g-ml-14, .g-ml-15, .g-ml-16, .g-ml-17, .g-ml-18, .g-ml-19, .g-ml-20, .g-ml-21, .g-ml-22, .g-ml-23, .g-ml-24, .g-ml-25, .g-ml-26, .g-ml-27, .g-ml-28, .g-ml-29, .g-ml-30, .g-ml-31, .g-ml-32, .g-ml-33, .g-ml-34, .g-ml-35, .g-ml-36, .g-ml-37, .g-ml-38, .g-ml-39, .g-ml-40, .g-ml-41, .g-ml-42, .g-ml-43, .g-ml-44, .g-ml-45, .g-ml-46, .g-ml-47, .g-ml-48, .g-ml-49 {float:left;position:relative;}


.g-push-1 { margin: 0 -20px 0 20px;}
.g-push-2 { margin: 0 -40px 0 40px;}
.g-push-3 { margin: 0 -60px 0 60px;}
.g-push-4 { margin: 0 -80px 0 80px;}
.g-push-5 { margin: 0 -100px 0 100px;}
.g-push-6 { margin: 0 -120px 0 120px;}
.g-push-7 { margin: 0 -140px 0 140px;}
.g-push-8 { margin: 0 -160px 0 160px;}
.g-push-9 { margin: 0 -180px 0 180px;}
.g-push-10 { margin: 0 -200px 0 200px;}
.g-push-11 { margin: 0 -220px 0 220px;}
.g-push-12 { margin: 0 -240px 0 240px;}
.g-push-13 { margin: 0 -260px 0 260px;}
.g-push-14 { margin: 0 -280px 0 280px;}
.g-push-15 { margin: 0 -300px 0 300px;}
.g-push-16 { margin: 0 -320px 0 320px;}
.g-push-17 { margin: 0 -340px 0 340px;}
.g-push-18 { margin: 0 -360px 0 360px;}
.g-push-19 { margin: 0 -380px 0 380px;}
.g-push-20 { margin: 0 -400px 0 400px;}
.g-push-21 { margin: 0 -420px 0 420px;}
.g-push-22 { margin: 0 -440px 0 440px;}
.g-push-23 { margin: 0 -460px 0 460px;}
.g-push-24 { margin: 0 -480px 0 480px;}
.g-push-25 { margin: 0 -500px 0 500px;}
.g-push-26 { margin: 0 -520px 0 520px;}
.g-push-27 { margin: 0 -540px 0 540px;}
.g-push-28 { margin: 0 -560px 0 560px;}
.g-push-29 { margin: 0 -580px 0 580px;}
.g-push-30 { margin: 0 -600px 0 600px;}
.g-push-31 { margin: 0 -620px 0 620px;}
.g-push-32 { margin: 0 -640px 0 640px;}
.g-push-33 { margin: 0 -660px 0 660px;}
.g-push-34 { margin: 0 -680px 0 680px;}
.g-push-35 { margin: 0 -700px 0 700px;}
.g-push-36 { margin: 0 -720px 0 720px;}
.g-push-37 { margin: 0 -740px 0 740px;}
.g-push-38 { margin: 0 -760px 0 760px;}
.g-push-39 { margin: 0 -780px 0 780px;}
.g-push-40 { margin: 0 -800px 0 800px;}
.g-push-41 { margin: 0 -820px 0 820px;}
.g-push-42 { margin: 0 -840px 0 840px;}
.g-push-43 { margin: 0 -860px 0 860px;}
.g-push-44 { margin: 0 -880px 0 880px;}
.g-push-45 { margin: 0 -900px 0 900px;}
.g-push-46 { margin: 0 -920px 0 920px;}
.g-push-47 { margin: 0 -940px 0 940px;}
.g-push-48 { margin: 0 -960px 0 960px;}
.g-push-49 { margin: 0 -980px 0 980px;}

.g-push-1, .g-push-2, .g-push-3, .g-push-4, .g-push-5, .g-push-6, .g-push-7, .g-push-8, .g-push-9, .g-push-10, .g-push-11, .g-push-12, .g-push-13, .g-push-14, .g-push-15, .g-push-16, .g-push-17, .g-push-18, .g-push-19, .g-push-20, .g-push-21, .g-push-22, .g-push-23, .g-push-24, .g-push-25, .g-push-26, .g-push-27, .g-push-28, .g-push-29, .g-push-30, .g-push-31, .g-push-32, .g-push-33, .g-push-34, .g-push-35, .g-push-36, .g-push-37, .g-push-38, .g-push-39, .g-push-40, .g-push-41, .g-push-42, .g-push-43, .g-push-44, .g-push-45, .g-push-46, .g-push-47, .g-push-48, .g-push-49 {float:right;position:relative;}



/* Misc classes and elements
-------------------------------------------------------------- */

/* Use this to create a horizontal ruler across a column. */
hr {
  background: #ddd; 
  color: #ddd;
  clear: both; 
  float: none; 
  width: 100%; 
  height: .1em;
  margin: 0 0 1.45em;
  border: none; 
}
hr.space {
  background: #fff;
  color: #fff;
}


/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .g-container:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix, .g-container {display: inline-block;}
* html .clearfix,
* html .g-container {height: 1%;}
.clearfix, .g-container {display: block;}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }