/**
02/STRUCTURE, GRID, SPACING, MARGINS
=====================================================================**/
/** STRUCTURE **/
html     { overflow-y: scroll; }
body     { text-align: center; }
header   {  }
#content {  }
footer   {  }


/** GRID **/
/* container */
.container { width: 960px; padding-left: 5px; padding-right: 5px; margin: -.15em auto; display: inline-block; text-align: left; }

/* grid holder */
.g_h_1, .g_h_2, .g_h_3, .g_h_4, .g_h_5, .g_h_6, .g_h_7, .g_h_8, .g_h_9, .g_h_10, .g_h_11, .g_h_12, .g_h_13, .g_h_14, .g_h_15, .g_h_16
{ display: inline; float: left; position: relative; }
.g_h_1,  .c_1  { width: 60px; }
.g_h_2,  .c_2  { width: 120px; }
.g_h_3,  .c_3  { width: 180px; }
.g_h_4,  .c_4  { width: 240px; }
.g_h_5,  .c_5  { width: 300px; }
.g_h_6,  .c_6  { width: 360px; }
.g_h_7,  .c_7  { width: 420px; }
.g_h_8,  .c_8  { width: 480px; }
.g_h_9,  .c_9  { width: 540px; }
.g_h_10, .c_10 { width: 600px; }
.g_h_11, .c_11 { width: 660px; }
.g_h_12, .c_12 { width: 720px; }
.g_h_13, .c_13 { width: 780px; }
.g_h_14, .c_14 { width: 840px; }
.g_h_15, .c_15 { width: 900px; }
.g_h_16, .c_16 { width: 960px; }

/* grid - inner columns */
.g_05, .g_1, .g_2, .g_3, .g_4, .g_5, .g_6, .g_7, .g_8, .g_9, .g_10, .g_11, .g_12, .g_13, .g_14, .g_15, .g_16
{ display: inline; float: left; position: relative; padding-left: 5px; padding-right: 5px; }
.w_05, .w_1, .w_2, .w_3, .w_4, .w_5, .w_6, .w_7, .w_8, .w_9, .w_10, .w_11, .w_12, .w_13, .w_14, .w_15, .w_16
{ position: relative; padding-left: 5px; padding-right: 5px; }
.g_1,  .w_1  { width: 50px; }
    .g_05,  .w_05  { width: 25px; }
.g_2,  .w_2  { width: 110px; }
.g_3,  .w_3  { width: 170px; }
.g_4,  .w_4  { width: 230px; }
.g_5,  .w_5  { width: 290px; }
.g_6,  .w_6  { width: 350px; }
.g_7,  .w_7  { width: 410px; }
.g_8,  .w_8  { width: 470px; }
.g_9,  .w_9  { width: 530px; }
.g_10, .w_10 { width: 590px; }
.g_11, .w_11 { width: 650px; }
.g_12, .w_12 { width: 710px; }
.g_13, .w_13 { width: 770px; }
.g_14, .w_14 { width: 830px; }
.g_15, .w_15 { width: 890px; }
.g_16, .w_16 { width: 950px; }
.g_right     { float: right; }

    /* additional */
    .wp_10  { width: 10%; }
    .wp_20  { width: 20%; }
    .wp_30  { width: 30%; }
    .wp_40  { width: 40%; }
    .wp_50  { width: 50%; }
    .wp_60  { width: 60%; }
    .wp_70  { width: 70%; }
    .wp_80  { width: 80%; }
    .wp_90  { width: 90%; }
    .wp_100 { width: 100%; }

/* push me... */
.g_push_l_1 { margin-left: 60px; }
.g_push_l_2 { margin-left: 120px; }
.g_push_l_3 { margin-left: 180px; }
.g_push_l_4 { margin-left: 240px; }

/* ...pull me */
.g_pull_l_1 { margin-left: -60px; }
.g_pull_l_2 { margin-left: -120px; }
.g_pull_l_3 { margin-left: -180px; }
.g_pull_l_4 { margin-left: -240px; }


/** SPACING **/
/* padding */
.p_0    { padding: 0; }
.p_xs   { padding: 5px; }
.p_s    { padding: 10px; }
.p_m    { padding: 20px; }
.p_l    { padding: 30px; }
.p_xl   { padding: 40px; }
/* vertical padding */
.pv_0   { padding-top: 0; padding-bottom: 0; }
.pv_xs  { padding-top: 5px; padding-bottom: 5px; }
.pv_s   { padding-top: 10px; padding-bottom: 10px; }
.pv_m   { padding-top: 20px; padding-bottom: 20px; }
.pv_l   { padding-top: 30px; padding-bottom: 30px; }
.pv_xl  { padding-top: 40px; padding-bottom: 40px; }
/* horizontal padding */
.ph_0   { padding-left: 0; padding-right: 0; }
.ph_xs  { padding-left: 5px; padding-right: 5px; }
.ph_s   { padding-left: 10px; padding-right: 10px; }
.ph_m   { padding-left: 20px; padding-right: 20px; }
.ph_l   { padding-left: 30px; padding-right: 30px; }
.ph_xl  { padding-left: 40px; padding-right: 40px; }
/* top padding */
.pt_0   { padding-top: 0 !important; }
.pt_xs  { padding-top: 5px !important; }
.pt_s   { padding-top: 10px !important; }
.pt_m   { padding-top: 20px !important; }
.pt_l   { padding-top: 30px !important; }
.pt_xl  { padding-top: 40px !important; }
/* bottom padding */
.pb_0   { padding-bottom: 0 !important; }
.pb_xs  { padding-bottom: 5px !important; }
.pb_s   { padding-bottom: 10px !important; }
.pb_m   { padding-bottom: 20px !important; }
.pb_l   { padding-bottom: 30px !important; }
.pb_xl  { padding-bottom: 40px !important; }
/* left padding */
.pl_0   { padding-left: 0 !important; }
.pl_xs  { padding-left: 5px !important; }
.pl_s   { padding-left: 10px !important; }
.pl_m   { padding-left: 20px !important; }
.pl_l   { padding-left: 30px !important; }
.pl_xl  { padding-left: 40px !important; }
/* right padding */
.pr_0   { padding-right: 0 !important; }
.pr_xs  { padding-right: 5px !important; }
.pr_s   { padding-right: 10px !important; }
.pr_m   { padding-right: 20px !important; }
.pr_l   { padding-right: 30px !important; }
.pr_xl  { padding-right: 40px !important; }


/** MARGINS **/
/* margin */
.m_0    { margin: 0; }
.m_xs   { margin: 5px; }
.m_s    { margin: 10px; }
.m_m    { margin: 20px; }
.m_l    { margin: 30px; }
.m_xl   { margin: 40px; }
/* vertical margin */
.mv_0   { margin-top: 0; margin-bottom: 0; }
.mv_xs  { margin-top: 5px; margin-bottom: 5px; }
.mv_s   { margin-top: 10px; margin-bottom: 10px; }
.mv_m   { margin-top: 20px; margin-bottom: 20px; }
.mv_l   { margin-top: 30px; margin-bottom: 30px; }
.mv_xl  { margin-top: 40px; margin-bottom: 40px; }
/* horizontal margin */
.mh_0   { margin-left: 0; margin-right: 0; }
.mh_xs  { margin-left: 5px; margin-right: 5px; }
.mh_s   { margin-left: 10px; margin-right: 10px; }
.mh_m   { margin-left: 20px; margin-right: 20px; }
.mh_l   { margin-left: 30px; margin-right: 30px; }
.mh_xl  { margin-left: 40px; margin-right: 40px; }
/* top margin */
.mt_0   { margin-top: 0 !important; }
.mt_xs  { margin-top: 5px !important; }
.mt_s   { margin-top: 10px !important; }
.mt_m   { margin-top: 20px !important; }
.mt_l   { margin-top: 30px !important; }
.mt_xl  { margin-top: 40px !important; }
/* bottom margin */
.mb_0   { margin-bottom: 0 !important; }
.mb_xs  { margin-bottom: 5px !important; }
.mb_s   { margin-bottom: 10px !important; }
.mb_m   { margin-bottom: 20px !important; }
.mb_l   { margin-bottom: 30px !important; }
.mb_xl  { margin-bottom: 40px !important; }
/* left margin */
.ml_0   { margin-left: 0 !important; }
.ml_xs  { margin-left: 5px !important; }
.ml_s   { margin-left: 10px !important; }
.ml_m   { margin-left: 20px !important; }
.ml_l   { margin-left: 30px !important; }
.ml_xl  { margin-left: 40px !important; }
/* right margin */
.mr_0   { margin-right: 0 !important; }
.mr_xs  { margin-right: 5px !important; }
.mr_s   { margin-right: 10px !important; }
.mr_m   { margin-right: 20px !important; }
.mr_l   { margin-right: 30px !important; }
.mr_xl  { margin-right: 40px !important; }