@charset "UTF-8";

/*
14px    :font size of medium text
13px    :good for reading text
12px    :font size of small text (and in tables) 
1.75    :line-height basically
1.5     :line-height tight
24.5px  :1.75x height - medium text
*/

img { -ms-interpolation-mode: bicubic; }
.clearfix:after { content: " "; display: block; height: 0; visibility: hidden; clear: both; }

/*---------------- fine tuning class ----------------*/

.width_max { width: 100% !important; }
.width_five_sixths { width: 83.33% !important; }
.width_two_thirds { width: 66.66% !important; }
.width_half { width: 50% !important; }
.width_one_third { width: 33.33% !important; }
.width_one_sixth { width: 16.66% !important; }

html.mobile .on_desktop_tablet { display: none; }
html.desktop_tablet .on_mobile { display: none; }
/* for mobile demo on pc and tablet */ html.desktop_tablet .mobile .on_desktop_tablet { display: none; }
/* for mobile demo on pc and tablet */ html.desktop_tablet .mobile .on_mobile { display: block; }

.display_none { display: none !important; }
.display_block { display: block !important; }
.display_inline { display: inline !important; }

.text_nowrap { white-space: nowrap; }
.word_break_keep_all { word-break: keep-all; }
.word_wrap_break_word { word-wrap: break-word; }

.text_right { text-align: right !important; }
.text_center { text-align: center !important; }
.text_left { text-align: left !important; }

.text_justify_distribute {
	text-align: justify;
	-moz-text-align: justify;  /* but does not work perfect */
	/* -webkit-text-align: justify;  not implemented yet */
	text-align: justify; /* IE */
	text-justify: distribute;
}

.text_justify_distribute_all_lines {
	text-align: justify;
	-moz-text-align-last: justify;  /* but does not work perfect */
	/* -webkit-text-align-last: justify;  not implemented yet */
	text-align-last: justify; /* IE */
	text-justify: distribute;
}

.float_right { float: right !important; }
.float_left { float: left !important; }

.clear_right { clear: right !important; }
.clear_left { clear: left !important; }
.clear_both { clear: both !important; }

.letter_standard { letter-spacing: 0 !important; }
.letter_tight { letter-spacing: -0.05em !important; }
.letter_mono_tight { font-family: monospace; letter-spacing: -0.25em !important; }
.letter_wide { letter-spacing: 0.125em !important; }

.line_lowest { line-height: 1.2 !important; }
.line_lower { line-height: 1.5 !important; }
.line_medium { line-height: 1.75 !important; }
.line_higher { line-height: 2 !important; }
.line_highest { line-height: 2.5 !important; }
.line_twice { line-height: 3.5 !important; }

.single_image_wrapper { line-height: 1 !important; }
.single_image_wrapper img { vertical-align: bottom !important; } 

.v_top { vertical-align: top !important; }
.v_middle { vertical-align: middle !important; }
.v_bottom { vertical-align: bottom !important; }

.margin_top_none { margin-top: 0 !important; }
.margin_top_little { margin-top: 0.21em !important; }
.margin_top_half { margin-top: 0.86em !important; }
.margin_top_single { margin-top: 1.75em !important; }
.margin_top_double { margin-top: 3.5em !important; }

.margin_right_none { margin-right: 0 !important; }
.margin_right_little { margin-right: 0.12em !important; }
.margin_right_half { margin-right:0.5em !important; }
.margin_right_single { margin-right: 1em !important; }
.margin_right_double { margin-right: 2em !important; }

.margin_bottom_none { margin-bottom: 0 !important; }
.margin_bottom_little { margin-bottom: 0.21em !important; }
.margin_bottom_half { margin-bottom: 0.86em !important; }
.margin_bottom_single { margin-bottom: 1.75em !important; }
.margin_bottom_double { margin-bottom: 3.5em !important; }

.margin_left_none { margin-left: 0 !important; }
.margin_left_little { margin-left: 0.12em !important; }
.margin_left_half { margin-left: 0.5em !important; }
.margin_left_single { margin-left: 1em !important; }
.margin_left_double { margin-left: 2em !important; }

.margin_vside_none { margin-top: 0 !important; margin-bottom: 0 !important; }
.margin_vside_little { margin-top: 0.21em !important; margin-bottom: 0.21em !important; }
.margin_vside_half { margin-top: 0.86em !important; margin-bottom: 0.86em !important; }
.margin_vside_single { margin-top: 1.75em !important; margin-bottom: 1.75em !important; }
.margin_vside_double { margin-top: 3.5em !important; margin-bottom: 3.5em !important; }

.margin_hside_auto { margin-right: auto; margin-left: auto; }
.margin_hside_none { margin-left: 0 !important; margin-right: 0 !important; }
.margin_hside_little { margin-left: 0.12em !important; margin-right: 0.21em !important; }
.margin_hside_half { margin-left: 0.5em !important; margin-right: 0.5em !important; }
.margin_hside_single { margin-left: 1em !important; margin-right: 1em !important; }
.margin_hside_double { margin-left: 2em !important; margin-right: 2em !important; }


ol.indent_none>li,
ul.indent_none>li { margin-left: 0; }
dl.indent_none>dd { margin-left: 0; }

ol.indent_tight>li,
ul.indent_tight>li { margin-left: 1.4em; }
dl.indent_tight>dd { margin-left: 1.4em; }

ol.style_none,
ul.style_none { list-style: none; }
ol.disc,
ul.disc { list-style-type: disc; }
ol.circle,
ul.circle { list-style-type: circle; }
ol.square,
ul.square { list-style-type: square; }
ol.lower_roman,
ul.lower_roman { list-style-type: lower-roman; }
ol.upper_roman,
ul.upper_roman { list-style-type: upper-roman; }
ol.lower_greek,
ul.lower_greek { list-style-type: lower-greek; }
ol.upper_greek,
ul.upper_greek { list-style-type: upper-greek; }
ol.lower_alpha,
ul.lower_alpha { list-style-type: lower-alpha; }
ol.upper_alpha,
ul.upper_alpha { list-style-type: upper-alpha; }
ol.decimal,
ul.decimal { list-style-type: decimal; }
ol.decimal_leading_zero,
ul.decimal_leading_zero { list-style-type: decimal-leading-zero; }
ol.bullet_outside,
ul.bullet_outside { list-style-position: outside; }
ol.bullet_inside,
ul.bullet_inside { list-style-position: inside; }

table.standard { caption-side: top; border-collapse: collapse; border: solid 1px #898989; }
table.standard th { padding: 12px; background: #e6e6e6; border-top: solid 1px #b5b5b5; border-left: solid 1px #b5b5b5; }
table.standard td { padding: 12px; border-top: solid 1px #c0c0c0; border-left: solid 1px #c0c0c0; }
table.standard th:first-child,
table.standard td:first-child { border-left-style: none; }
table.standard tbody tr:first-child th,
table.standard tbody tr:first-child td,
table.standard tbody tr.first-child th.heading,
table.standard thead th { border-top-style: none; }
table.standard thead+tbody tr:first-child th,
table.standard thead+tbody tr:first-child td,
table.standard thead+tbody tr.first-child th.heading,
table.standard thead+thead th { border-top-style: solid; }
table.standard thead th,
table.standard th.heading { background: #dfdfdf; }

.uppercase { text-transform: uppercase; }

pre code { display: block; overflow: auto; margin: 1.75em 0; padding: .5em 1em; white-space: pre; line-height: 1.2; font-family: "Courier New",monospace; background: #e5e5e5;
    border: 1px solid #ffffff;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/*------------------------------ mini Parts ------------------------------*/

.note { color: #009938; }
.notice { color: #f27163; }
.info { color: #0099e7; }
.recommend { color: #ed6b00; }

ol.row,ul.row {}
    .row li { float: left; margin-bottom: 0.86em; white-space: nowrap; }

ol.inline,ul.inline { list-style: none; padding: 0; }
    .inline li { margin: 0; display: inline; white-space: nowrap; }
*:first-child+html .inline li { white-space: normal; }


ol.text_right li,
ul.text_right li { clear: right; float: right; }


/*------------------------------ Box or Opening Closing Box ------------------------------*/

.box,
.oc_box { border: 1px solid #c0c0c0; margin-bottom: 24.5px; }

.box { padding: 12px; background: #ffffff; }
.oc_box { padding: 12px 12px 0 12px; }

.box>.heading,
.oc_box>.heading { margin: -12px -12px 0 -12px; padding: 12px; background: #f7f7f7; color: #6a6b75; }
.oc_box>.oc_button {
	cursor: pointer;
	padding: 6px 24px 6px 12px;
	border-top: 1px solid #ffffff;
	background: url(images/more_side_right.png) 100% 13px no-repeat, -moz-linear-gradient(top, #f7f7f7, #d3d3d3);
	background: url(images/more_side_right.png) 100% 13px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #f7f7f7), color-stop(1.0, #d3d3d3));
	background: url(images/more_side_right.png) 100% 13px no-repeat, -o-linear-gradient(top, #f7f7f7, #d3d3d3);
	background: url(images/more_side_right.png) 100% 13px no-repeat, -ms-linear-gradient(top, #f7f7f7, #d3d3d3);
	background: url(images/more_side_right.png) 100% 13px no-repeat, linear-gradient(top, #f7f7f7, #d3d3d3);
	-pie-background: url(images/more_side_right.png) 100% 13px no-repeat,  linear-gradient(top, #f7f7f7, #d3d3d3);
	behavior: url(/css/PIE.htc);
}
.oc_box>.selected {
	cursor: pointer;
	padding: 6px 24px 6px 12px;
	border-top: 1px solid #ffffff;
	background: url(images/more_side_right.png) 100% -390px no-repeat, -moz-linear-gradient(top, #f7f7f7, #d3d3d3);
	background: url(images/more_side_right.png) 100% -390px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #f7f7f7), color-stop(1.0, #d3d3d3));
	background: url(images/more_side_right.png) 100% -390px no-repeat, -o-linear-gradient(top, #f7f7f7, #d3d3d3);
	background: url(images/more_side_right.png) 100% -390px no-repeat, -ms-linear-gradient(top, #f7f7f7, #d3d3d3);
	background: url(images/more_side_right.png) 100% -390px no-repeat, linear-gradient(top, #f7f7f7, #d3d3d3);
	-pie-background: url(images/more_side_right.png) 100% -390px no-repeat,  linear-gradient(top, #f7f7f7, #d3d3d3);
	behavior: url(/css/PIE.htc);
}

.box_rounded { border: 1px solid #c0c0c0; padding: 12px; margin-bottom: 24.5px;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
    behavior: url(/css/PIE.htc);
}
.box_rounded>.heading { margin: -13px -13px 0 -13px; padding: 6px 13px;
    -webkit-border-top-left-radius: 9px;
    -webkit-border-top-right-radius: 9px;
    -moz-border-radius-topleft: 9px;
    -moz-border-radius-topright: 9px;
    border-radius: 9px 9px 0px 0px;
    behavior: url(/css/PIE.htc);
}

.box .box_body,
.oc_box .box_body,
.box_rounded .box_body { margin-top: 12px; }
*:first-child+html .box_rounded { zoom: 1; }

.desktop_tablet .overflow_hidden .box_body { overflow: hidden; }
.desktop_tablet .height_restricted .box_body { margin: 0 -12px; padding: 12px; max-height: 400px; overflow: auto; }


/*------------------------------ List with label ------------------------------*/
.desktop_tablet dl.list_with_label { position: relative; }
.desktop_tablet dl.list_with_label>dt { position: absolute; top: 0; left: 0; width: 9em; white-space: nowrap; }
.desktop_tablet dl.list_with_label>dd { clear: both; margin: 0px; padding-left: 10em; border-bottom: solid 1px #e5e5e5; }


/*------------------------------ Grid ------------------------------*/

.desktop_tablet .colgrid_12,
html.mobile .desktop_tablet .colgrid_12 { margin-left: -2.1em; }
*:first-child+html .desktop_tablet .colgrid_12,
*:first-child+html.mobile .desktop_tablet .colgrid_12 { zoom: 1; }

.desktop_tablet .colgrid_12 .col_gutter,
html.mobile .desktop_tablet .colgrid_12 .col_gutter { margin-left: 2.1em; }
.desktop_tablet .colgrid_12 .colspan_1,
html.mobile .desktop_tablet .colgrid_12 .colspan_1 { float: left; padding: 0; margin-left: 0; margin-right: 0; width: 8.33%; }
.desktop_tablet .colgrid_12 .colspan_2,
html.mobile .desktop_tablet .colgrid_12 .colspan_2 { float: left; padding: 0; margin-left: 0; margin-right: 0; width: 16.66%; }
.desktop_tablet .colgrid_12 .colspan_3,
html.mobile .desktop_tablet .colgrid_12 .colspan_3 { float: left; padding: 0; margin-left: 0; margin-right: 0; width: 25%; }
.desktop_tablet .colgrid_12 .colspan_4,
html.mobile .desktop_tablet .colgrid_12 .colspan_4 { float: left; padding: 0; margin-left: 0; margin-right: 0; width: 33.33%; }
*:first-child+html .desktop_tablet .colgrid_12 .colspan_4,
*:first-child+html.mobile .desktop_tablet .colgrid_12 .colspan_4 { width: 33.29%; }
.desktop_tablet .colgrid_12 .colspan_5,
html.mobile .desktop_tablet .colgrid_12 .colspan_5 { float: left; padding: 0; margin-left: 0; margin-right: 0; width: 41.66%; }
.desktop_tablet .colgrid_12 .colspan_6,
html.mobile .desktop_tablet .colgrid_12 .colspan_6 { float: left; padding: 0; margin-left: 0; margin-right: 0; width: 50%; }
*:first-child+html .desktop_tablet .colgrid_12 .colspan_6,
*:first-child+html.mobile .desktop_tablet .colgrid_12 .colspan_6 { width: 49.9%; }
.desktop_tablet .colgrid_12 .colspan_7,
html.mobile .desktop_tablet .colgrid_12 .colspan_7 { float: left; padding: 0; margin-left: 0; margin-right: 0; width: 58.33%; }
.desktop_tablet .colgrid_12 .colspan_8,
html.mobile .desktop_tablet .colgrid_12 .colspan_8 { float: left; padding: 0; margin-left: 0; margin-right: 0; width: 66.66%; }
.desktop_tablet .colgrid_12 .colspan_9,
html.mobile .desktop_tablet .colgrid_12 .colspan_9 { float: left; padding: 0; margin-left: 0; margin-right: 0; width: 75%; }
*:first-child+html .desktop_tablet .colgrid_12 .colspan_9,
*:first-child+html.mobile .desktop_tablet .colgrid_12 .colspan_9 { width: 74.9%; }
.desktop_tablet .colgrid_12 .colspan_10,
html.mobile .desktop_tablet .colgrid_12 .colspan_10 { float: left; padding: 0; margin-left: 0; margin-right: 0; width: 83.33%; }
.desktop_tablet .colgrid_12 .colspan_11,
html.mobile .desktop_tablet .colgrid_12 .colspan_11 { float: left; padding: 0; margin-left: 0; margin-right: 0; width: 91.66%; }


.mobile .colgrid_12 { margin-left: 0; }
.mobile .colgrid_12 .col_gutter { margin-left: 0; padding: 0; }
.mobile .colgrid_12 .colspan_1 { float: none; width: auto; }
.mobile .colgrid_12 .colspan_2 { float: none; width: auto; }
.mobile .colgrid_12 .colspan_3 { float: none; width: auto; }
.mobile .colgrid_12 .colspan_4 { float: none; width: auto; }
*:first-child+html .mobile .colgrid_12 .colspan_4 { width: auto; }
.mobile .colgrid_12 .colspan_5 { float: none; width: auto; }
.mobile .colgrid_12 .colspan_6 { float: none; width: auto; }
*:first-child+html .mobile .colgrid_12 .colspan_6 { width: auto; }
.mobile .colgrid_12 .colspan_7 { float: none; width: auto; }
.mobile .colgrid_12 .colspan_8 { float: none; width: auto; }
.mobile .colgrid_12 .colspan_9 { float: none; width: auto; }
*:first-child+html .mobile .colgrid_12 .colspan_9 { width: auto; }
.mobile .colgrid_12 .colspan_10 { float: none; width: auto; }
.mobile .colgrid_12 .colspan_11 { float: none; width: auto; }



/*------------------------------ Table ------------------------------*/

/*---------- Customizable styles ----------*/

/* cell padding */
.table .cell { padding: 12px; }
.table .heading { padding: 6px 12px; }

/* border-color 1 (basic data cell border) */
.table .col_group>ul>.cell,
.table .row_group>dl>dt,
.table .row_group>dl>dd { border-top-color: #dadada; border-left-color: #dadada; }
.mobile>.table .row_group>dl:first-of-type>dd { border-top-color: #dadada; border-left-color: #dadada; }

/* border-color 2 (strong) */
.table .col_group>.heading,
.table .row_group>.col_header .cell { border-left-color: #c0c0c0; }
.desktop_tablet>.table .row_group>dl:first-of-type>dt,
.desktop_tablet>.table .row_group>dl:first-of-type>dd,
.mobile>.table .row_group>dl>dt { border-top-color: #c0c0c0; }

/* border-color 3 (stronger) */
.table .row_group>.col_header .cell,
.table .heading { border-top-color: #b5b5b5; }

/* border-color 4 (strongest) */
.table { border-color: #898989; }

/* background-color 1 (data cell background) */
.table .col_group>ul>.cell,
.table .row_group>dl>dd { background-color: #ffffff; }

/* background-color 2 (strong) */
.table .row_group>dl>dt,
.table .col_group>.heading,
.table .row_group>.col_header .cell { background-color: #f0f0f0; }

/* background-color 3 (stronger) */
.table .heading { background-color: #e6e6e6; }

/* background-color 4 (strongest) */
.table>.heading { background-color: #dadada; }


/*---------- Default styles ----------*/

*:first-child+html .table div { zoom: 1; }

.table { border-width: 1px; border-style: solid; }

.table>*:first-child { border-top-width: 0 !important; }
.table>.row_group:first-child>.heading:first-child,
.desktop_tablet>.table>.row_group:first-child>.col_header .cell  { border-top-width: 0; }

.table .colgrid_12 { margin: 0; padding: 0; list-style: none; }
.table .colgrid_12 .col_gutter { margin-left: 0; }

.table .colspan_1,
.table .colspan_2,
.table .colspan_3,
.table .colspan_4,
.table .colspan_5,
.table .colspan_6,
.table .colspan_7,
.table .colspan_8,
.table .colspan_9,
.table .colspan_10,
.table .colspan_11 { margin-left: 0 !important; }

.table .cell,
.table .row_group>dl>dt,
.table .row_group>dl>dd {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.desktop_tablet>.table .row_group:first-child>dl:first-child>dt,
.desktop_tablet>.table .row_group:first-child>dl:first-child>dd { border-top-width: 0 !important; }

.table .heading,
.table .row_group .col_header .cell { margin: 0; }

.table .col_group>ul { list-style: none; margin: 0; padding: 0; }
.table .col_group>ul>li { margin: 0; }

.table .row_group {}


.table .heading { border-style: solid; border-width: 1px 0 0 0; border-style: solid; }

.table .cell ol.cell_v_divider { margin: 0; padding: 0; list-style-position: inside; }
.table .cell ol.cell_v_divider>li { margin-left: 0; border-top: solid 1px #dadada; }
.table .cell ol.cell_v_divider>li:first-child { border-top-style: none; }

.desktop_tablet>.table .col_group>.heading { border-width: 1px 0 0 1px; border-style: solid; }
    .desktop_tablet>.table .row_group>.col_group:first-of-type>.heading { border-left-width: 0; border-style: solid; }
.mobile>.table .col_group>.heading { border-width: 1px 0 0 0; border-style: solid; }

.desktop_tablet>.table ul>.cell { border-width: 1px 0 0 1px; border-style: solid; }
    .desktop_tablet>.table  .row_group>.col_group:first-of-type>ul>.cell { border-left-width: 0; border-style: solid; }
.mobile>.table ul>.cell { border-width: 1px 0 0 0; border-style: solid; }

.desktop_tablet>.table .col_header .cell { border-width: 1px 0 0 1px; border-style: solid; }
    .desktop_tablet>.table .col_header>div:first-child>.cell { border-left-width: 0; }
.mobile>.table .col_header .cell { border-width: 1px 0 0 0; border-style: solid; }

.table .row_group>dl>dt { border-width: 1px 0 0 0; border-style: solid; }
.desktop_tablet>.table .row_group>dl>dd { border-width: 1px 0 0 1px; border-style: solid; }
.mobile>.table .row_group>dl>dd { border-width: 1px 0 0 0; border-style: solid; }


*:first-child+html .desktop_tablet>.table .colspan_1, *:first-child+html.mobile .desktop_tablet>.table .colspan_1 { width: 8.30%; }
*:first-child+html .desktop_tablet>.table .colspan_2, *:first-child+html.mobile .desktop_tablet>.table .colspan_2 { width: 16.60%; }
*:first-child+html .desktop_tablet>.table .colspan_3, *:first-child+html.mobile .desktop_tablet>.table .colspan_3 { width: 24.90%; }
*:first-child+html .desktop_tablet>.table .colspan_4, *:first-child+html.mobile .desktop_tablet>.table .colspan_4 { width: 33.30%; }
*:first-child+html .desktop_tablet>.table .colspan_5, *:first-child+html.mobile .desktop_tablet>.table .colspan_5 { width: 41.60%; }
*:first-child+html .desktop_tablet>.table .colspan_6, *:first-child+html.mobile .desktop_tablet>.table .colspan_6 { width: 49.90%; }
*:first-child+html .desktop_tablet>.table .colspan_7, *:first-child+html.mobile .desktop_tablet>.table .colspan_7 { width: 58.20%; }
*:first-child+html .desktop_tablet>.table .colspan_8, *:first-child+html.mobile .desktop_tablet>.table .colspan_8 { width: 66.60%; }
*:first-child+html .desktop_tablet>.table .colspan_9, *:first-child+html.mobile .desktop_tablet>.table .colspan_9 { width: 74.90%; }
*:first-child+html .desktop_tablet>.table .colspan_10, *:first-child+html.mobile .desktop_tablet>.table .colspan_10 { width: 83.20%; }
*:first-child+html .desktop_tablet>.table .colspan_11, *:first-child+html.mobile .desktop_tablet>.table .colspan_11 { width: 91.50%; }
*:first-child+html .mobile>.table .colspan_1,
*:first-child+html .mobile>.table .colspan_2,
*:first-child+html .mobile>.table .colspan_3,
*:first-child+html .mobile>.table .colspan_4,
*:first-child+html .mobile>.table .colspan_5,
*:first-child+html .mobile>.table .colspan_6,
*:first-child+html .mobile>.table .colspan_7,
*:first-child+html .mobile>.table .colspan_8,
*:first-child+html .mobile>.table .colspan_9,
*:first-child+html .mobile>.table .colspan_10,
*:first-child+html .mobile>.table .colspan_11 { width: auto; }



/*------------------------------ Column - Fix Side Width ------------------------------*/

.desktop_tablet .colframe_side_fixed,
html.mobile .desktop_tablet .colframe_side_fixed { position: relative; z-index: auto; zoom: 1; }
.desktop_tablet .colframe_side_fixed>.col_fixed,
html.mobile .desktop_tablet .colframe_side_fixed>.col_fixed,
.desktop_tablet .colframe_side_fixed>.col_outer,
html.mobile .desktop_tablet .colframe_side_fixed>.col_outer { float: left; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
*:first-child+html .desktop_tablet .colframe_side_fixed,
*:first-child+html.mobile .desktop_tablet .colframe_side_fixed,
*:first-child+html .desktop_tablet .colframe_side_fixed>.col_fixed,
*:first-child+html.mobile .desktop_tablet .colframe_side_fixed>.col_fixed { zoom: 1; }
*:first-child+html .desktop_tablet .colframe_side_fixed>.col_outer,
*:first-child+html.mobile .desktop_tablet .colframe_side_fixed>.col_outer,
*:first-child+html .desktop_tablet .colframe_side_fixed>.col_outer>.col_liquid,
*:first-child+html.mobile .desktop_tablet .colframe_side_fixed>.col_outer>.col_liquid { margin-bottom: 1px; zoom: 1; }


.desktop_tablet .left_fixed_before>.col_fixed,
html.mobile .desktop_tablet .left_fixed_before>.col_fixed { position: relative; z-index: 2; }
.desktop_tablet .left_fixed_before>.col_outer,
html.mobile .desktop_tablet .left_fixed_before>.col_outer { width: 100%; }
.desktop_tablet .left_fixed_before>.col_outer>.col_liquid,
html.mobile .desktop_tablet .left_fixed_before>.col_outer>.col_liquid { /* Sample setting ----- margin-left: 200px; padding-left: 16px;*/ }

.desktop_tablet .left_fixed_after>.col_outer,
html.mobile .desktop_tablet .left_fixed_after>.col_outer { float: right; width: 100%; /* Sample setting ----- margin-left: -200px;*/ }
.desktop_tablet .left_fixed_after>.col_outer>.col_liquid,
html.mobile .desktop_tablet .left_fixed_after>.col_outer>.col_liquid { /* Sample setting ----- margin-left: 200px; padding-left: 16px;*/ }
.desktop_tablet .left_fixed_after>.col_fixed,
html.mobile .desktop_tablet .left_fixed_after>.col_fixed { float: left; /* Sample setting ----- width: 200px;*/ }

.desktop_tablet .right_fixed_before>.col_fixed,
html.mobile .desktop_tablet .right_fixed_before>.col_fixed { position: relative; z-index: 2; float: right; /* Sample setting ----- width: 200px;*/ }
.desktop_tablet .right_fixed_before>.col_outer,
html.mobile .desktop_tablet .right_fixed_before>.col_outer { width: 100%; /* Sample setting ----- margin-right: -200px;*/ }
.desktop_tablet .right_fixed_before>.col_outer>.col_liquid,
html.mobile .desktop_tablet .right_fixed_before>.col_outer>.col_liquid { /* Sample setting ----- margin-right: 200px; padding-right: 16px;*/ }

.desktop_tablet .right_fixed_after>.col_outer,
html.mobile .desktop_tablet .right_fixed_after>.col_outer { float: left; width: 100%; /* Sample setting ----- margin-right: -200px;*/ }
.desktop_tablet .right_fixed_after>.col_outer>.col_liquid,
html.mobile .desktop_tablet .right_fixed_after>.col_outer>.col_liquid { /* Sample setting ----- margin-right: 200px; padding-right: 16px;*/ }
.desktop_tablet .right_fixed_after>.col_fixed,
html.mobile .desktop_tablet .right_fixed_after>.col_fixed { /* Sample setting ----- width: 200px;*/ }


/* default setting for PC & Tablet */

.desktop_tablet .fixed_width { width: 150px; }
.desktop_tablet .fixed_margin_right { margin-right: 150px; }
.desktop_tablet .fixed_margin_left { margin-left: 150px; }
.desktop_tablet .fixed_negative_margin_right { margin-right: -150px; }
.desktop_tablet .fixed_negative_margin_left { margin-left: -150px; }
.desktop_tablet .gutter_right { padding-right: 16px; }
.desktop_tablet .gutter_left { padding-left: 16px; }


/* example of your setting

.desktop_tablet .your_classname .fixed_width { width: 240px; }
.desktop_tablet .your_classname .fixed_margin_right { margin-right: 240px; }
.desktop_tablet .your_classname .fixed_margin_left { margin-left: 240px; }
.desktop_tablet .your_classname .fixed_negative_margin_right { margin-right: -240px; }
.desktop_tablet .your_classname .fixed_negative_margin_left { margin-left: -240px; }
.desktop_tablet .your_classname .gutter_right { padding-right: 24px; }
.desktop_tablet .your_classname .gutter_left { padding-left: 24px; }
*/


/* Resetting for demo 'mobile' mode on PC & Tablet */

html.desktop_tablet .mobile { position: static; }
html.desktop_tablet .mobile .colframe_side_fixed>.col_fixed,
html.desktop_tablet .mobile .colframe_side_fixed>.col_outer { float: none; margin-right: 0; margin-left: 0; width: 100%; }
html.desktop_tablet .mobile .left_fixed_before>.col_outer>.col_liquid,
html.desktop_tablet .mobile .left_fixed_after>.col_outer>.col_liquid,
html.desktop_tablet .mobile .right_fixed_before>.col_outer>.col_liquid,
html.desktop_tablet .mobile .right_fixed_after>.col_outer>.col_liquid { margin: 0; padding: 0; }

html.desktop_tablet .mobile>.colframe_side_fixed .fixed_width { width: 100%; }
html.desktop_tablet .mobile>.colframe_side_fixed .fixed_margin_right { margin-right: 0; }
html.desktop_tablet .mobile>.colframe_side_fixed .fixed_margin_left { margin-left: 0; }
html.desktop_tablet .mobile>.colframe_side_fixed .fixed_negative_margin_right { margin-right: 0; }
html.desktop_tablet .mobile>.colframe_side_fixed .fixed_negative_margin_left { margin-left: 0; }
html.desktop_tablet .mobile>.colframe_side_fixed .gutter_right { padding-right: 0; }
html.desktop_tablet .mobile>.colframe_side_fixed .gutter_left { padding-left: 0; }