/* Common Layout */

html { overflow-y: scroll; }
html, body { margin: 0; padding: 0; height: 100%; background: none; text-align: center;  }
body * { text-align: left;}

.center-body { width:980px; margin:0 auto; text-align:left; }
.center-div { margin: auto; }
#site-hd { text-align: center; }
#hd { 
	position: relative; height: 68px; z-index: 9000; line-height: 1em; 
	display: flex;
	flex-direction: row;
	flex-flow: row nowrap;
	flex-wrap: nowrap;
	align-items: center;
	box-sizing: border-box;
}
#site-nav { margin: 10px auto; position: relative; z-index: 8000; }
#site-bc { margin: 10px auto; display: none; }
#bd { margin: 10px auto; width: 980px; position: relative; }
#site-widget { margin: 10px auto; width: 980px; }
#ft { margin-top: 40px; }

.grid1col, .grid2col, .grid3col, .grid4col, .gridsidebar, .tabs { margin: 0 auto 10px; }
.grid1col, .grid2col, .grid3col, .grid4col, .gridsidebar { width: 100%; display: inline-block; }
.gridsidebar:after, .grid1col:after, .grid2col:after, .grid3col:after, .grid4col:after, .section:after, .content:after, .carousel:after, #bd:after, #site-widget:after, #site-bc:after, .inner-box:after, .nav-menu:after, .menu-row:after, .clearfix:after  { content: "."; display: block; height: 0; clear: both; visibility: hidden; }


.main { width: 980px; }
.gridsidebar > .main { width: 740px; float: left; }
.sidebar { width: 220px; float: right; }
.column, .column-first { float: left; position: relative; }
.column-last { float: right !important; }
.section { margin: 0 auto 1.5em }

.content { padding: 35px 40px 40px; margin: 0 auto 20px; position: relative; }
.focal { width: 100%; height: 225px; margin: 0 auto 15px; }
.carousel { margin: 20px auto; width:  980px; }
.ticker { margin: 20px auto; width: 980px; }

.grid1col .column { float: none; }
.grid2col .column, .grid2col .column-first, .grid2col .column-last { width: 50%; }
.grid3col .column, .grid3col .column-first, .grid3col .column-last { width: 33.3%; }
.grid4col .column, .grid4col .column-first, .grid4col .column-last { width: 25%; }

.column > .content, .column-first > .content, .column-last > .content { margin: 0 10px 10px; padding: 25px 30px 30px; }
.column-first > .content { margin-left: 0; }
.column-last > .content { margin-right: 0; }
.sidebar > .content { padding: 10px 20px 30px; }
.footnote > .content { padding: 10px 30px 20px; }

/* content */
.main > .content { width: 900px; }
.gridsidebar > .main > .content { width: 658px; }
#bd > .content { width: 900px; }

.content .grid2col .column, .content .grid2col .column-first, .content .grid2col .column-last { width: 47.9%; }
.content .grid3col .column, .content .grid3col .column-first, .content .grid3col .column-last { width: 30.6%; }
.content .grid4col .column, .content .grid4col .column-first, .content .grid4col .column-last { width: 21.9%; }

.content .column { padding: 0 2%; }
.content .grid1col > .column { padding: 0; }

.content .column-first { padding-right: 2%; padding-left: 0 !important; }
.content .column-last { padding-left: 2%; padding-right: 0 !important; }

.content .grid-row { margin-bottom: 1.7em; }

.fixed-height { position: relative;  }
.fixed-height .column { height: 100%; position: relative;  }
.fixed-height .column .content {  position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

.clearfix { clear: both; float: none; height: auto; }

/* Temp: for trasition process */
.prod-content, .body-content { padding: 35px 40px 40px; margin: 0 auto 20px; }

.prod-content .grid2col .column, .prod-content .grid2col .column-first, .prod-content .grid2col .column-last { width: 47.9%; }
.body-content .grid2col .column, .body-content .grid2col .column-first, .body-content .grid2col .column-last { width: 47.9%; }
.prod-content .grid3col .column, .prod-content .grid3col .column-first, .prod-content .grid3col .column-last { width: 30.6%; }
.body-content .grid3col .column, .body-content .grid3col .column-first, .body-content .grid3col .column-last { width: 30.6%; }
.prod-content .grid4col  .column, .prod-content .grid4col .column-first, .prod-content .grid4col .column-last { width: 21.9%; }
.body-content .grid4col  .column, .body-content .grid4col .column-first, .body-content .grid4col .column-last { width: 21.9%; }

.prod-content .column, .body-content .column { padding: 0 2%; }
.prod-content .grid1col > .column, .body-content .grid1col > .column { padding: 0; }

.prod-content .column-first, .body-content .column-first { padding-right: 2%; padding-left: 0 !important; }
.prod-content .column-last, .body-content .column-last { padding-left: 2%; padding-right: 0 !important; }

.prod-content .grid-row, .body-content .grid-row { margin-bottom: 1.7em; }

.gridsidebar > .main > .prod-content, .gridsidebar > .main > .body-content  { width: 658px; }

.cat-sidebar { width: 220px; float: right; }
.sidebar-content { padding: 10px 20px 30px; }