/* reset */
body, div, p, h1, h2, a, span, img, ul, li { margin: 0; padding: 0; }
ul { list-style: none; }

/* general */
html, body { width: 100%; height: 100%; }
html { background:url(data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAGklEQVR42mMQhAEJCQkGOAtIMsBZIA6cBQQAW5wDhYzvi1MAAAAASUVORK5CYII%3D); color: #fff; }
body { font-size: 100%; font-family: '微软雅黑', sans-serif; line-height: 20px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
a, a img { border: none; }
img, object, embed { max-width: 100%; height: auto; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
.content{overflow:hidden;}
/* metro layout */
.metro-layout { width: 100%; height: 100%; }
.metro-layout .header { height:120px; position: relative; }
.metro-layout .header h1 { position: absolute; top: 40px; margin-top: -10px; left: 50px; padding-left: 0.1em; font-size:30px;
line-height: 48px;height: 48px;  }
.metro-layout .header h2 { position: absolute; top: 75px;height: 28px;line-height:28px;font-size:14px;left: 50px; padding-left: 0.1em; }
.metro-layout .header .controls { position: absolute; top: 50%; height: 48px; margin-top: -24px; padding-left:400px;}
.metro-layout .header .controls span { float: left; width: 48px; height: 48px; margin-left: 5px; opacity: 0.25; 
	filter: alpha(opacity=25); cursor: pointer; background: url(../images/sprite.png) no-repeat -999px 0; }
.metro-layout .header .controls span:hover { opacity: 1; filter: none; }
.metro-layout .header .controls span.prev { background-position: 0 0; }
.metro-layout .header .controls span.next { background-position: -48px 0; }
.horizontal .header .controls span.toggle-view { background-position: -96px 0; }
.vertical .header .controls span.toggle-view { background-position: -144px 0; }
.metro-layout .header .controls span.up { background-position: -192px 0; }
.metro-layout .header .controls span.down { background-position: -240px 0; }
.horizontal .header .controls span.up, .horizontal .header .controls span.down, .vertical .header .controls span.prev, .vertical .header .controls span.next { display: none; }
.metro-layout .content { height: 85%; overflow: hidden; width:100%;}
.metro-layout .content .items { padding: 0 50px; position: relative; overflow: hidden;}
.horizontal .content .items { height: 400px; }
.vertical .content .items { padding-bottom: 50px; }
.metro-layout .box { float: left; position: relative; margin: 5px;   background: #555; width: 206px; height: 100px; text-decoration: none; cursor: pointer; overflow: hidden; color: #fff; background: #00a8ec; z-index: 9; }
.metro-layout .box:hover { opacity: 0.85; filter: alpha(opacity=85); }
.metro-layout .box span { position: absolute; left: 5px; bottom:5px; font-size: 14px;font-family: '微软雅黑'; font-weight: 600; z-index: 8; }
.metro-layout .box img.icon { position: absolute; left: 50%; top: 50%; margin-left: -32px; margin-top: -32px; z-index: 7; }
.metro-layout .box img.big { margin-left: -64px; margin-top: -64px; }
.metro-layout .box img.cover { position: absolute; left: 0; top: 0; width: 100%; z-index: 6; }
.metro-layout .width2 { width: 98px; }
.metro-layout .width3 { width: 206px; }
.metro-layout .width4 { width: 304px; }
.metro-layout .height2 { height: 100px; }
.metro-layout .height3 { height: 210px; }
.metro-layout .height4 { height: 430px; }
#gui{color:#FFFFFF;width:314px;height:210px;text-align:center;font-size:12px;font-weight:normal;background:url('../skin/tbg1.png') repeat;} 
#gui table{width:314px;height:210px;}
#gui th{font-size:12px;text-align:left;border-bottom:#0F2B7E 1px solid;} 
#gui td{text-align:left;height:18px;line-height:18px;;}
#gui .t0{width:100px;padding-left:5px;}
#gui .t1{width:52px;}
#gui .t2{width:52px;}
#gui .t3{width:52px;} 