/* metro layout */

@media screen and (min-width: 2000px) {

.metro-layout { width: 100%; height: 800px;  margin: auto; }
.metro-layout .header { height: 30%; position: relative; }
.metro-layout .header h1 { position: absolute; top: 50%; margin-top: -0.6em; left: 20px; padding-left: 0.1em; font-size: 3em; line-height: 1em; }
.metro-layout .header .controls { }
.metro-layout .header .controlsleft { position: absolute; top: 50%; height: 48px; margin-top: 324px; right: 20px; }
.metro-layout .header .controls span { float: right; width: 48px; height: 475px; margin-left: 5px; opacity: 0.80; 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; position: absolute; top: 50%;  margin-top: 324px; left: 20px;  z-index:100000000;}
.metro-layout .header .controls span.next { background-position: -90px 0; position: absolute; top: 50%;  margin-top: 324px; right: 20px;  z-index:100000000; }
.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; z-index:10000000;}
.metro-layout .content { height: 650px; overflow: hidden; }
.metro-layout .content .items { padding: 0 0px; position: relative; overflow: hidden; }
.horizontal .content .items { height: 450px; z-index:10000; }
.vertical .content .items { padding-bottom: 10px; }
.metro-layout .box { float: left; position: relative;    width: 200px; height: 145px;  text-decoration: none; cursor: pointer; overflow: hidden; color: #fff; background: #00a8ec; z-index: 9; border: 1px solid; border-left: 0; border-top: 0; border-image: url(../5.png) 1 round round; }
.metro-layout .box:hover { opacity: 1; filter: alpha(opacity=1); }
.metro-layout .box span { position: absolute; left: 0.5em; bottom: 0.5em; font-size: 1em; font-weight: normal;}
.metro-layout .box img.icon { position: absolute; left: 50%; top: 50%;  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: 32em; }
.metro-layout .width3 { width: 49em; }
.metro-layout .width4 { width: 66em; }
.metro-layout .height2 { height: 18em; }
.metro-layout .height3 { height: 28em; }
.metro-layout .height4 { height: 38em; }



::selection { background: #158ca0; color: #fff; }
::-moz-selection { background: #158ca0; color: #fff; }

/* mobile support */
@media handheld, only screen and (max-width: 1024px){
	.metro-layout .header h1 { font-size: 2.2em; margin-top: -0.5em; }
}
/* mobile support */
@media handheld, only screen and (max-width: 480px){
	.metro-layout .header { position: relative; text-align: center; }
	.metro-layout .header h1 { left: 5px; font-size: 1.5em; margin-top: -0.5em; }
	.metro-layout .header .controls { position: static; width: 100%; height: auto; margin-top: 0; }
	.metro-layout .header .controls span { display: none !important; }
	.metro-layout .content .items { padding: 0 5px; }
	.vertical .content .items { padding-bottom: 0; }
}


}


@media screen and (min-width:1500px) and (max-width:1999px)  {

.metro-layout { width: 100%; height: 350px;  }
.metro-layout { width: 100%; height: 800px;  margin: auto; }
.metro-layout .header { height: 30%; position: relative; }
.metro-layout .header h1 { position: absolute; top: 40%; margin-top: -0.6em; left: 20px; padding-left: 0.1em; font-size: 3em; line-height: 1em; }
.metro-layout .header .controls { }
.metro-layout .header .controlsleft { position: absolute; top: 40%; height: 48px; margin-top: 324px; right: 20px; }
.metro-layout .header .controls span { float: right; width: 48px; height: 475px; margin-left: 5px; opacity: 0.80; 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; position: absolute; top: 15%;  margin-top: 324px; left: 20px;  z-index:100000000;}
.metro-layout .header .controls span.next { background-position: -90px 0; position: absolute; top: 15%;  margin-top: 324px; right: 20px;  z-index:100000000; }
.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; z-index:10000000;}
.metro-layout .content { height: 650px; overflow: hidden; }
.metro-layout .content .items { padding: 0 0px; position: relative; overflow: hidden; }
.horizontal .content .items { height: 350px; z-index:10000; }
.vertical .content .items { padding-bottom: 10px; }
.metro-layout .box { float: left; position: relative;    width: 150px; height: 109px;  text-decoration: none; cursor: pointer; overflow: hidden; color: #fff; background: #00a8ec; z-index: 9; border: 1px solid; border-left: 0; border-top: 0; border-image: url(../5.png) 1 round round; }
.metro-layout .box:hover { opacity: 1; filter: alpha(opacity=1); }
.metro-layout .box span { position: absolute; left: 0.5em; bottom: 0.5em; font-size: 1em; font-weight: normal;}
.metro-layout .box img.icon { position: absolute; left: 50%; top: 50%;  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: 32em; }
.metro-layout .width3 { width: 49em; }
.metro-layout .width4 { width: 66em; }
.metro-layout .height2 { height: 18em; }
.metro-layout .height3 { height: 28em; }
.metro-layout .height4 { height: 38em; }



::selection { background: #158ca0; color: #fff; }
::-moz-selection { background: #158ca0; color: #fff; }

/* mobile support */
@media handheld, only screen and (max-width: 1024px){
	.metro-layout .header h1 { font-size: 2.2em; margin-top: -0.5em; }
}
/* mobile support */
@media handheld, only screen and (max-width: 480px){
	.metro-layout .header { position: relative; text-align: center; }
	.metro-layout .header h1 { left: 5px; font-size: 1.5em; margin-top: -0.5em; }
	.metro-layout .header .controls { position: static; width: 100%; height: auto; margin-top: 0; }
	.metro-layout .header .controls span { display: none !important; }
	.metro-layout .content .items { padding: 0 5px; }
	.vertical .content .items { padding-bottom: 0; }

}

}

@media screen and (max-width: 1499px) {

.metro-layout { width: 100%; height: 350px;  }
.metro-layout { width: 100%; height: 800px;  margin: auto; }

.metro-layout .header { height: 20%; position: relative; }
.metro-layout .header h1 { position: absolute; top: 40%; margin-top: -0.6em; left: 20px; padding-left: 0.1em; font-size: 3em; line-height: 1em; }
.metro-layout .header .controls { }
.metro-layout .header .controlsleft { position: absolute; top: 40%; height: 48px; margin-top: 324px; right: 20px; }
.metro-layout .header .controls span { float: right; width: 48px; height: 475px; margin-left: 5px; opacity: 0.80; 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; position: absolute; top: -5%;  margin-top: 250px; left: 20px;  z-index:100000000;}
.metro-layout .header .controls span.next { background-position: -90px 0; position: absolute; top: -5%;  margin-top: 250px; right: 20px;  z-index:100000000; }
.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; z-index:10000000;}
.metro-layout .content { height: 650px; overflow: hidden; }
.metro-layout .content .items { padding: 0 0px; position: relative; overflow: hidden; }
.horizontal .content .items { height: 300px; z-index:10000; }
.vertical .content .items { padding-bottom: 10px; }
.metro-layout .box { float: left; position: relative;    width: 110px; height: 80px;  text-decoration: none; cursor: pointer; overflow: hidden; color: #fff; background: #00a8ec; z-index: 9; border: 1px solid; border-left: 0; border-top: 0; border-image: url(../5.png) 1 round round; }


.metro-layout .box:hover { opacity: 1; filter: alpha(opacity=1); }
.metro-layout .box span { position: absolute; left: 0.5em; bottom: 0.5em; font-size: 1em; font-weight: normal;}
.metro-layout .box img.icon { position: absolute; left: 50%; top: 50%;  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: 32em; }
.metro-layout .width3 { width: 49em; }
.metro-layout .width4 { width: 66em; }
.metro-layout .height2 { height: 18em; }
.metro-layout .height3 { height: 28em; }
.metro-layout .height4 { height: 38em; }



::selection { background: #158ca0; color: #fff; }
::-moz-selection { background: #158ca0; color: #fff; }

/* mobile support */
@media handheld, only screen and (max-width: 1024px){
	.metro-layout .header h1 { font-size: 2.2em; margin-top: -0.5em; }
}
/* mobile support */
@media handheld, only screen and (max-width: 480px){
	.metro-layout .header { position: relative; text-align: center; }
	.metro-layout .header h1 { left: 5px; font-size: 1.5em; margin-top: -0.5em; }
	.metro-layout .header .controls { position: static; width: 100%; height: auto; margin-top: 0; }
	.metro-layout .header .controls span { display: none !important; }
	.metro-layout .content .items { padding: 0 5px; }
	.vertical .content .items { padding-bottom: 0; }

}

}