/* yangyutong: 2018-6-1
*  define the tab pages style
 * CSS: tab.css
 * JS: tab-init.js
 * HTML:
 *      <div class="tab">
        <ul class="tab-header clearfix">
            <li target="tabdata" class="tab-header-item tab-header-selected">
                数据视图
            </li>
        </ul>
        <div class="tab-content" >
            <div id="tabdata" class="tab-content-view">
                <a>this is 数据视图内容</a>
            </div>
        </div>
        </div>
*/

.tab {
	height: 100%;
	/* margin-bottom: 10px; */
	border: 1px solid #dddddd;
	overflow: auto;
}
.tab li	{
	list-style: none;
}
/* tab标签部分 */
.tab .tab-header {
	height: 30px;
	padding: 5px 0 0 2px;
	font-size: 12px;
	line-height: 30px;
	/* background-color: #f6f6f6; */
	border-bottom: 1px solid #dddddd;
}
.tab .tab-header-items {
	display: inline-block;
	height: 100%;
}
.tab .tab-header-item {
	position: relative;
	float: left;
	margin: 0 2px;
	padding: 0 20px 0 10px;
	border: 1px solid #dddddd;
	border-bottom: none;
	border-radius: 7px 7px 0 0;
	cursor: pointer;
}
.tab .tab-header-select {
	position: relative;
	float: right;
	display: inline-block;
	margin-top: 4px;
	width: 16px;
	height: 16px;
}

.tab-header-select:hover {
	opacity: 1;
	cursor: pointer;
}
/* .tab .tab-overflow-items {
	display: none;
} */

/* 标签选中样式 */
.tab .tab-header-item.tab-header-selected {
	background: #ffffff;
}


/* 内容面板样式 */
.tab .tab-content {
	overflow-y: auto;
	padding: 10px 10px;
	border-bottom: 1px solid transparent;
	margin-top: 5px !important;
}
.tab .tab-content .tab-content-view { 
	height: 100%;
	margin-top: 5px !important;
}
.tab .tab-content .tab-content-view.hide {
	display: none;
}