/**
02/STRUCTURE, GRID, SPACING, MARGINS
=====================================================================**/
/** STRUCTURE **/
html        { overflow-y: scroll; }
.iframe     { overflow-y: auto; }
body        { text-align: center; }
#header     { height: 620px; }
    .body_view #header, .body_edit #header, .body_donate #header, .body_profile #header, .body_buy #header, .body_login #header,
    .body_404 #header, .body_403 #header, .body_500 #header, #body_info #header, .body_registration #header, .body_password_reset #header,
    .body_reset_password #header, .body_facebook_revoke #header
      { height: 470px; }

#video_container {  }

#content    { /*min-height: 400px;*/ position: relative; top: -25px; }
    .body_overview #content { top: 0; }
#footer     {  }


/** GRID **/
/* container */
.wrapper, .header_wrapper
                    { width: 100%; min-width: 980px; display: inline-block; text-align: center; }
    .header_wrapper { overflow: hidden; }
.container          { /*min-width: 600px; max-width: 1200px;*/ width: 960px; display: inline-block; text-align: left; padding-left: 11px; padding-right: 11px; margin: -.1em auto; position: relative; }
    .container_ext  { width: 982px; display: inline-block; text-align: center; }
.ie8 .container     { margin: -.05em auto; }

/* grid holder */
.g1, .g2, .g3, .g4, .g5, .g6, .g7, .g8, .g9, .g10, .g11, .g12
{ float: left; position: relative; margin-right: -0.000001em; padding-left: 10px; padding-right: 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
.go { padding-left: 0; padding-right: 0; }
    .ie7 .go { behavior: url(http://www.dobribuvljak.com/javascript/lib/boxsizing.htc); }

.g1         { width: 8.3333333%; }
.g2         { width: 16.6666667%; }
.g3         { width: 25%; }
.g4         { width: 33.3333333%; }
.g5         { width: 41.6666667%; }
.g6         { width: 50%; }
.g7         { width: 58.3333333%; }
.g8         { width: 66.6666667%; }
.g9         { width: 75%; }
.g10        { width: 83.3333333%; }
.g11        { width: 91.6666667%; }
.g12        { width: 100%; }

.g11 .g1    { width: 9.090909091%; }
.g11 .g2    { width: 18.18181818%; }
.g11 .g3    { width: 27.27272727%; }
.g11 .g4    { width: 36.36363636%; }
.g11 .g5    { width: 45.45454545%; }
.g11 .g6    { width: 54.54545455%; }
.g11 .g7    { width: 63.63636364%; }
.g11 .g8    { width: 72.72727273%; }
.g11 .g9    { width: 81.81818182%; }
.g11 .g10   { width: 90.90909091%; }
.g11 .g11   { width: 100%; }

.g10 .g1 { width: 10%; }
.g10 .g2 { width: 20%; }
.g10 .g3 { width: 30%; }
.g10 .g4 { width: 40%; }
.g10 .g5 { width: 50%; }
.g10 .g6 { width: 60%; }
.g10 .g7 { width: 70%; }
.g10 .g8 { width: 80%; }
.g10 .g9 { width: 90%; }
.g10 .g10 { width: 100%; }

.g9 .g1 { width: 11.11111111%; }
.g9 .g2 { width: 22.22222222%; }
.g9 .g3 { width: 33.33333333%; }
.g9 .g4 { width: 44.44444444%; }
.g9 .g5 { width: 55.55555556%; }
.g9 .g6 { width: 66.66666667%; }
.g9 .g7 { width: 77.77777778%; }
.g9 .g8 { width: 88.88888889%; }
.g9 .g9 { width: 100%; }

.g8 .g1 { width: 12.5%; }
.g8 .g2 { width: 25%; }
.g8 .g3 { width: 37.5%; }
.g8 .g4 { width: 50%; }
.g8 .g5 { width: 62.5%; }
.g8 .g6 { width: 75%; }
.g8 .g7 { width: 87.5%; }
.g8 .g8 { width: 100%; }

.g7 .g1 { width: 14.28571429%; }
.g7 .g2 { width: 28.57142857%; }
.g7 .g3 { width: 42.85714286%; }
.g7 .g4 { width: 57.14285714%; }
.g7 .g5 { width: 71.42857143%; }
.g7 .g6 { width: 85.71428571%; }
.g7 .g7 { width: 100%; }

.g6 .g1 { width: 16.66666667%; }
.g6 .g2 { width: 33.33333333%; }
.g6 .g3 { width: 50%; }
.g6 .g4 { width: 66.66666667%; }
.g6 .g5 { width: 83.33333333%; }
.g6 .g6 { width: 100%; }

.g5 .g1 { width: 20%; }
.g5 .g2 { width: 40%; }
.g5 .g3 { width: 60%; }
.g5 .g4 { width: 80%; }
.g5 .g5 { width: 100%; }

.g4 .g1 { width: 25%; }
.g4 .g2 { width: 50%; }
.g4 .g3 { width: 75%; }
.g4 .g4 { width: 100%; }

.g3 .g1 { width: 33.3333333%; }
.g3 .g2 { width: 66.6666667%; }
.g3 .g3 { width: 100%; }

.g2 .g1 { width: 50%; }
.g2 .g2 { width: 100%; }

.g1 .g1 { width: 100%; }



/** 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; }
.ph_xxl { padding-left: 60px; padding-right: 60px; }
/* top padding */
.pt_0   { padding-top: 0 !important; }
.pt_xxs { padding-top: 2px !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_xxs { margin-top: 2px !important; }
.mt_-xxs
        { margin-top: -2px !important; }
.mt_xs  { margin-top: 5px !important; }
.mt_-xs { margin-top: -5px !important; }
.mt_s   { margin-top: 10px !important; }
.mt_-s  { margin-top: -10px !important; }
.mt_m   { margin-top: 20px !important; }
.mt_-m  { margin-top: -20px !important; }
.mt_l   { margin-top: 30px !important; }
.mt_xl  { margin-top: 40px !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_-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_xxs { margin-left: 2px !important; }
.ml_xs  { margin-left: 5px !important; }
.ml_s   { margin-left: 10px !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_-s  { margin-right: -10px !important; }
.mr_m   { margin-right: 20px !important; }
.mr_l   { margin-right: 30px !important; }
.mr_xl  { margin-right: 40px !important; }