
@font-face {
  font-family:"foo";
  src:
    url("../res/font/foo.ttf") format("truetype");
  font-weight:normal;
  font-style:normal;
}

html,body{
	width : 100%;
	height : 600px;
}
* {
    -webkit-text-size-adjust:none;
}

body {
	background-color: #000;
	/*background-color: transparent;*/
}


#modal {
	position: absolute;
	top : 0px;
	left : 0px;
	z-index : 10000;
	width : 100%;
	height : 100%;
	display : none;
    -webkit-box-sizing : border-box;
    box-sizing : border-box;

}
#modal.mask {
	background-color: rgba(0,0,0,0.3);
}


.btn {
	-webkit-transition : -webkit-transform 80ms ;
}

.btn:hover {
	-webkit-transform : scale(1.1,1.1);
}

.btn:active {
	-webkit-transform : scale(0.85,0.85);
}



/* =================================== */
/* ========== components ============= */
/* =================================== */

.panel {
	position: absolute;
    width : 100%;
    height : 100%;
    /*border : 1px solid blue;*/

	display: box;
	display: -webkit-box;

	box-orient: vertical;
	-webkit-box-orient: vertical;

    box-sizing : border-box;
    -webkit-box-sizing : border-box;

    font-size : 32px;
}


.panel-head {
	background-color: #cc3300;
	color : #ffffff;
	text-align: center;
	height : 60px;
}

.panel-title {
	display: inline-block;
	font-family:"foo";
	font-size : 35px;
	line-height : 60px;
}

.head-left, .head-right {
	background-color: #336699;
	width : 100px;
	margin: 10px;
	height : 40px;
	line-height : 40px;
}

.head-left {
	float : left;
}

.head-right {
	float : right;
}

.panel-body {
	position: relative;
    text-align: left;
	box-flex: 1;
	-webkit-box-flex: 1;
	-webkit-box-sizing : border-box;
    box-sizing : border-box;
	background-color: #ffeedd;
}

.panel-foot {
	height : 50px;
	text-align: center;
	color : #ffffff;
	background-color: #cc3300;
}


.list-view {
    overflow: hidden;
}
.list-item {
}


.bar {
    position: absolute;
	border : 2px solid #000;
	border-radius: 3px;
	width : 160px;
    height : 16px;
    border-radius: 12px;		
	padding : 2px;
}
.bar .text {
    position: absolute;
	text-align: left;
	color : #fff;
	font-size: 14px;
	font-weight: bolder;
	top : 1px;
	left : 8px;
	text-shadow: 1px 1px #000000;
}
.bar .icon {
	position: absolute;
	top : -5px;
	right : -20px;
	width: 50px;
	height: 30px;
	background-size : 50px;
	background-repeat: no-repeat;
	background-position: center;
}

.bar-value {
	float : right;
	right : 2px;
	top :2px;
	width : 100%;
	height : 16px;
    border-radius: 10px;
	background-color : red;
		text-align: left;

}




/* ================== */
/* ================== */
/* ================== */

.scroll {
	display : inline-block;
	white-space:nowrap;
}

.clear-left {
	clear : left;
	border : 2px solid red;
	color : red;
}

.clear-right {
	clear : right;
	border : 2px solid red;
	color : green;
}

.border-box {
	-webkit-box-sizing : border-box;
			box-sizing : border-box;
}

.fullscreen {
	position: absolute;
	top : 0px;
	left : 0px;
	width : 100%;
	height : 100%;
	margin : 0px;

}

.slide {
  -webkit-transition: -webkit-transform ease-out 300ms;
}


