body{background: #ffffff}
.grid-gradient {

    z-index: 100000;
max-width: 1000px;
    margin: 0 auto;
    background:
            linear-gradient(
                    rgba(0,0,0,.2), transparent 1px
            ),
            linear-gradient(
                    90deg,
                    rgba(0,0,0,.2), transparent 1px
            );
    background-size: 4px 4px;
    background-position: center center;
    display: inline-block;
    /*position: relative;*/
    width: 100%;
    height: 100%;
    /*overflow: hidden;*/
    /*padding: 4px;*/
    box-sizing: border-box;
    vertical-align: top;

    position: fixed;
    top:0;
    bottom: 0;
    right: 0;
    left: 0;
    /*display: none;*/
}
.inner-grid{
    background:
            repeating-linear-gradient(
                    90deg,
                    rgba(208,240,251,1),
                    rgba(208,240,251,1) 20px,
                    rgba(255,255,255,1) 20px,
                    rgba(255,255,255,1) 40px
            );

    width: 100%;
    height: 100%;
    opacity: .5;
}

.guideline .grid_nav{    position: fixed;     z-index: 100;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    display: block;
    overflow: scroll;
    width: 280px;
    height: 100vh;
    max-width: 280px;
    float: left;
    background-color: white;
    color: #333;
    border-right: 1px solid rgba(0,0,0,.08);}

.guideline .grid_nav ul{padding: 0; margin: 16px 0}
.guideline .grid_nav li a{display: block; padding: 8px 0 8px 40px;    color: #333;
    font-size: 13px;
    line-height: 20px;
    border-bottom: 1px solid rgba(0,0,0,.08);}
.guideline .grid_nav .logo{margin: 16px 0 0 40px; float: none}
.guideline .main_area{    display: block;  max-width: 1280px;  min-width: 900px;  height: 100%;  margin-left: 320px;  padding-right: 40px;  padding-bottom: 60px;  float: none;}
.guideline .main_area h1{font-size: 2rem; margin-left: 0}
.guideline .main_area .section {    margin-top: 36px;  padding-top: 36px;  border-top: 1px solid rgba(0, 0, 0, .12);}
.guideline .main_area .section .helpers-block {  display: inline-block;  margin: 12px;}
.var-table-block_helper {
    background: #168de2;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px; }
.var-table-block_helper-x025 {
    width: 1px;
    height: 1px; }
.var-table-block_helper-x05 {
    width: 2px;
    height: 2px; }
.var-table-block_helper-x1 {
    width: 4px;
    height: 4px; }
.var-table-block_helper-x2 {
    width: 8px;
    height: 8px; }
.var-table-block_helper-x3 {
    width: 12px;
    height: 12px; }
.var-table-block_helper-x4 {
    width: 16px;
    height: 16px; }
.var-table-block_helper-x5 {
    width: 20px;
    height: 20px; }
.var-table-block_helper-x6 {
    width: 24px;
    height: 24px;
    margin-top: 24px; }
.var-table-block_helper-x8 {
    width: 32px;
    height: 32px;
    margin-top: 24px; }
.var-table-block_helper-x10 {
    width: 40px;
    height: 40px;
    margin-top: 24px; }
.var-table-block_helper-x12 {
    width: 48px;
    height: 48px;
    margin-top: 24px; }
.var-table-block_helper-x15 {
    width: 60px;
    height: 60px;
    margin-top: 24px; }
.var-table-block_helper-x20 {
    width: 80px;
    height: 80px;
    margin-top: 24px; }

.guideline .gray-block{background: #f0f0f0; padding: 24px; margin: 16px 0}
.guideline .specTable {
    margin-top: 32px;
    display: table;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    width: 100%;
    border-collapse: inherit;
}
.guideline .specTable-column {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    border-right: 1px solid rgba(0, 0, 0, 0.12);
    padding: 16px;
    vertical-align: middle;
    text-align: left;
}
.guideline .specTable-text-secondaryText_bold {
    font-family: 'Courer', monospace;
    color: #999999;
    font-size: 13px;
    font-weight: bold;
}
.guideline .specTable-text-secondaryText {
    font-family: 'Courer', monospace;
    color: #999999;
    font-size: 13px;
}
.guideline .typo-table {
    display: block;
    margin-bottom: 12px;
}
.guideline .specTable-row:last-child .specTable-column{border-bottom: 0}
.guideline .specTable .specTable-row {  display: table-row;  vertical-align: middle;  height: 55px;  }
.guideline .typo-table_productivity_h1{font-size: 64px; line-height: 80px; font-weight: bold; margin-bottom: 24px}
.guideline .typo-table_productivity_h2{font-size: 36px; line-height: 48px; font-weight: 300; margin-bottom: 16px}
.guideline .typo-table_productivity_h3{font-size: 28px; line-height: 36px; font-weight: regular; margin-bottom: 12px}
.guideline .typo-table_productivity_h4{ font-size: 16px; line-height: 20px; font-weight: bold; margin-bottom: 8px}
.guideline .typo-table_promoSites_bodyText{ font-size: 15px; line-height: 20px; font-weight: normal}
.guideline .typo-table_promoSites_common_btns{font-size: 18px; line-height: 20px; font-weight: normal }
.guideline .typo-table_promoSites_btns{font-size: 15px; line-height: 20px; font-weight: normal }
.guideline .typo-table_accordion_title{font-size: 20px; line-height: 22px; font-weight: bold; }
.guideline .typo-table_accordion_properties{font-size: 17px; line-height: 24px; font-weight: bold }
.guideline .typo-table_accordion_properties_title{font-size: 17px; line-height: 24px; font-weight: normal; font-style: italic }
.guideline .typo-table_top_menu{ font-size: 17px; font-weight: bold; }
.guideline .typo-table_bot_menu_title{font-size: 17px; font-weight: bold; margin-bottom: 16px}
.guideline .typo-table_bot_menu{font-size: 15px; font-weight: normal; margin-bottom: 20px}
.guideline .typo-table_copyright{ font-size: 14px; font-weight: normal;font-style: italic; margin-bottom: 24px }
.guideline .ex-wr{margin-bottom: 16px}
.guideline input[type=text]{height: 43px;
    margin: 0px;
    padding: 0px 12px;
    font-size: 15px;
    line-height: 27px;
    font-weight: normal;
    border: 1px #cfcfcf solid;
    color: #222;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-resize: none;
    -webkit-resize: none;
    resize: none;
    vertical-align: top;
    border-color: #cbcbcb;
}