/** STURCTURE **/
html                { min-height: 100%; }
body                { height: auto; }
/* grid elements */
.wrapper            { width: 100%; text-align: center; }
.container          { width: 960px; text-align: left; margin: 0px auto; display: inline-block; position: relative; }
.content            { padding-bottom: 270px; }
.homepage           { padding: 100px 0; }
.footer .upper      { /*height: 90px;*/ padding-top: 20px; padding-bottom: 20px; }

.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
{ display: inline; float: left; position: relative; zoom: 1; }
.g_h_1      { width: 80px; }
.g_h_2      { width: 160px; }
.g_h_3      { width: 240px; }
.g_h_4      { width: 320px; }
.g_h_5      { width: 400px; }
.g_h_6      { width: 480px; }
.g_h_7      { width: 560px; }
.g_h_8      { width: 640px; }
.g_h_9      { width: 720px; }
.g_h_10     { width: 800px; }
.g_h_11     { width: 880px; }
.g_h_12     { width: 960px; }

.g_1, .g_2, .g_3, .g_4, .g_5, .g_6, .g_7, .g_8, .g_9, .g_10, .g_11, .g_12
{ display: inline; float: left; position: relative; padding-left: 10px; padding-right: 10px; zoom: 1; }
.g_1        { width: 60px; }
.g_2        { width: 140px; }
.g_3        { width: 220px; }
.g_4        { width: 300px; }
.g_5        { width: 380px; }
.g_6        { width: 460px; }
.g_7        { width: 540px; }
.g_8        { width: 620px; }
.g_9        { width: 700px; }
.g_10       { width: 780px; }
.g_11       { width: 860px; }
.g_12       { width: 940px; }

/* push me... */
.g_push_l_1  { margin-left: 80px; }
.g_push_l_2  { margin-left: 160px; }
.g_push_l_3  { margin-left: 240px; }
.g_push_l_4  { margin-left: 320px; }
.g_push_l_5  { margin-left: 400px; }
.g_push_l_6  { margin-left: 480px; }
.g_push_l_7  { margin-left: 560px; }
.g_push_l_8  { margin-left: 640px; }
.g_push_l_9  { margin-left: 720px; }
.g_push_l_10 { margin-left: 800px; }
.g_push_l_11 { margin-left: 880px; }
.g_push_l_12 { margin-left: 960px; }

/* ...pull me */
.g_pull_l_1  { margin-left: -80px; }
.g_pull_l_2  { margin-left: -160px; }
.g_pull_l_3  { margin-left: -240px; }
.g_pull_l_4  { margin-left: -320px; }
.g_pull_l_5  { margin-left: -400px; }
.g_pull_l_6  { margin-left: -480px; }
.g_pull_l_7  { margin-left: -560px; }
.g_pull_l_8  { margin-left: -640px; }
.g_pull_l_9  { margin-left: -720px; }
.g_pull_l_10 { margin-left: -800px; }
.g_pull_l_11 { margin-left: -880px; }
.g_pull_l_12 { margin-left: -960px; }

/** SPACING **/
/* padding */
.p_0    { padding: 0 !important; }
.p_xs   { padding: 5px !important; }
.p_s    { padding: 10px !important; }
.p_m    { padding: 20px !important; }
.p_l    { padding: 30px !important; }
.p_xl   { padding: 40px !important; }
/* 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 !important; }
.m_xs   { margin: 5px !important; }
.m_s    { margin: 10px !important; }
.m_m    { margin: 20px !important; }
.m_l    { margin: 30px !important; }
.m_xl   { margin: 40px !important; }
/* 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_-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; }

/** HTML5 blocks **/
header, section, footer, aside, nav    { display: block; }