php/www/webapp/common/css/common.css

/**
 * desc: webapp通用样式
 * author: justin
 * date: 2015-05-14
 */
.box {
	display: -webkit-box;
	display: -moz-box;
	display: -o-box;
	display: -ms-box;
	display: box;
}

.box-align-start {
	-webkit-box-align: start;
	-moz-box-align: start;
	-o-box-align: start;
	-ms-box-align: start;
	box-align: start;
}

.box-align-center {
	-webkit-box-align: center;
	-moz-box-align: center;
	-o-box-align: center;
	-ms-box-align: center;
	box-align: center;
}

.box-align-end {
	-webkit-box-align: end;
	-moz-box-align: end;
	-o-box-align: end;
	-ms-box-align: end;
	box-align: end;
}

.box-pack-center {
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-o-box-pack: center;
	-ms-box-pack: center;
	box-pack: center;
}

.box-pack-start {
	-webkit-box-pack: start;
	-moz-box-pack: start;
	-o-box-pack: start;
	-ms-box-pack: start;
	box-pack: start;
}

.box-pack-end {
	-webkit-box-pack: end;
	-moz-box-pack: end;
	-o-box-pack: end;
	-ms-box-pack: end;
	box-pack: end;
}

.box-vertical {
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-o-box-orient: vertical;
	-ms-box-orient: vertical;
	box-orient: vertical;
}

.box-flex-1 {
	-moz-box-flex: 1.0;
	-webkit-box-flex: 1.0;
	-o-box-flex: 1.0;
	-ms-box-flex: 1.0;
	box-flex: 1.0;
}

.box-flex-2 {
	-moz-box-flex: 2.0;
	-webkit-box-flex: 2.0;
	-o-box-flex: 2.0;
	-ms-box-flex: 2.0;
	box-flex: 2.0;
}

.box-flex-3 {
	-moz-box-flex: 3.0;
	-webkit-box-flex: 3.0;
	-o-box-flex: 3.0;
	-ms-box-flex: 3.0;
	box-flex: 3.0;
}

.box-flex-4 {
	-moz-box-flex: 4.0;
	-webkit-box-flex: 4.0;
	-o-box-flex: 4.0;
	-ms-box-flex: 4.0;
	box-flex: 4.0;
}

.box-flex-5 {
	-moz-box-flex: 5.0;
	-webkit-box-flex: 5.0;
	-o-box-flex: 5.0;
	-ms-box-flex: 5.0;
	box-flex: 5.0;
}

.box-center {
	display: -webkit-box;
	display: -moz-box;
	display: -o-box;
	display: -ms-box;
	display: box;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-o-box-pack: center;
	-ms-box-pack: center;
	box-pack: center;
	-webkit-box-align: center;
	-moz-box-align: center;
	-o-box-align: center;
	-ms-box-align: center;
	box-align: center;
}

.box-container {
	width: 100%;
	height: 100%;
	/*background: #fff;*/
}

.scroll-container {
	overflow: hidden;
	position: relative;
}

.hide {
	display: none;
}

.clear-float {
	clear: both;
}

.width-percent-50 {
	width: 50%;
}

.width-percent-40 {
	width: 40%;
}

.width-percent-25 {
	width: 25%;
}

.width-percent-60 {
	width: 60%;
}

.width-percent-33 {
	width: 33.33%;
}

.width-percent-100 {
	width: 100%;
}

.height-percent-50 {
	height: 50%;
}

.height-percent-40 {
	height: 40%;
}

.height-percent-60 {
	height: 60%;
}

.height-percent-100 {
	height: 100%;
}

/*底部导航栏*/

.prevent-scroll {
	width: 100%;
	position: fixed;
	bottom: 0;
	background-color: #2a2400;
}

.prevent-scroll .width-percent-33 .title-container-square {
	padding: 20%;
	position: relative;
	text-align: center;
}

.prevent-scroll .width-percent-33 .title-container-square a {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.prevent-scroll .width-percent-33 .title-container-square a .logo {
	background-size: 65% 65%;
	background-position: center center;
	padding: 10%;
	margin-top: 5px;
	display: inline-block;
	border-radius: 50%;
}

.prevent-scroll .width-percent-33 .title-container-square a .name {
	display: block;
	margin-top: -5px;
	font-size: 12px;
}

.prevent-scroll .width-percent-33:nth-child(1) a:active .logo {
	border-radius: inherit;
	background: url("http://odulvej8l.bkt.clouddn.com/tab_home.png") no-repeat;
	background-size: 100%;
	background-position: center center;
}

.prevent-scroll .width-percent-33:nth-child(1) a:active .name {
	color: #fff;
}

.prevent-scroll .width-percent-33:nth-child(1) a .logo {
	border-radius: inherit;
	background: url("http://odulvej8l.bkt.clouddn.com/tab_home_pre.png") no-repeat;
	background-size: 100%;
	background-position: center center;
}

.prevent-scroll .width-percent-33:nth-child(1) a .name {
	color: #fffefa;
}

.prevent-scroll .width-percent-33:nth-child(2) a .logo {
	border-radius: 50%;
	display: inline-block;
	padding: 25%;
	background-size: 100%;
	margin-top: -15px;
	background:url(http://odulvej8l.bkt.clouddn.com/tab_butler.png) 0 0 no-repeat #2a2400;
	background-size: 75% 75%;
	background-position: center;
}

.prevent-scroll .width-percent-33:nth-child(3) a .logo {
	border-radius: inherit;
	background: url("http://odulvej8l.bkt.clouddn.com/tab_me_pre.png");
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center center;
}

.prevent-scroll .width-percent-33:nth-child(3) a .name {
	color: #fffefa;
}

.prevent-scroll .width-percent-33:nth-child(3) a:active .logo {
	border-radius: inherit;
	background: url("http://odulvej8l.bkt.clouddn.com/tab_me.png");
	background-repeat: no-repeat;
	background-size: 90%;
	background-position: center center;
}

.prevent-scroll .width-percent-33:nth-child(3) a:active .name {
	color: #fff;
}