.metro .carousel {
display: block;
position: relative;
padding: 0;
margin: 0 auto;
overflow: hidden;
}
.metro .carousel img{
border-radius: 0;
}
.metro .carousel .slide {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
padding: 0;
}
.metro .carousel .slide div.subslide {
z-index: 2;
position: absolute;
top: 10px;
left: 10px;
}
.metro .carousel .slide img.cover {
width: 100%;
min-height: 100%;
z-index: 1;
position: absolute;
top: 0 !important;
left: 0 !important;
}
.metro .carousel .slide:first-child {
display: block;
}
.metro .carousel .controls {
display: block;
position: absolute;
top: 50%;
left: 15px;
min-width: 40px;
min-height: 40px;
width: auto;
height: auto;
margin-top: -20px;
font-size: 48pt;
font-weight: 100;
line-height: 30px;
color: #fff;
text-align: center;
cursor: pointer;
opacity: .75;
z-index: 100;
}
.metro .carousel .controls.right {
left: auto;
right: 15px;
}
.metro .carousel .controls:hover {
opacity: 1;
}
.metro .carousel .markers {
z-index: 100;
margin: 0;
padding: 0;
display: block;
position: absolute;
bottom: 10px;
left: 10px;
}
.metro .carousel .markers > ul {
margin: 0;
padding: 0; margin-left: 8px;
list-style: none;
}
.metro .carousel .markers > ul li ul,
.metro .carousel .markers > ul li ol {
list-style: none;
padding-left: 25px;
}
.metro .carousel .markers li {
display: block;
float: left;
margin: 0;
padding: 0;
margin-right: 5px;
}
.metro .carousel .markers li a {
background-color: #ffffff;
display: block;
float: left;
border: 1px #ffffff solid;
}
.metro .carousel .markers li.active a {
background-color: #f0a30a;
}
.metro .carousel.fg-lime .markers li.active a {
background-color: #a4c400;
}
.metro .carousel.fg-green .markers li.active a {
background-color: #60a917;
}
.metro .carousel.fg-blue .markers li.active a {
background-color: #00aff0;
}
.metro .carousel.fg-pink .markers li.active a {
background-color: #dc4fad;
}
.metro .carousel.fg-red .markers li.active a {
background-color: #e51400;
}
.metro .carousel.fg-lighterBlue .markers li.active a {
background-color: #00ccff;
}
.metro .carousel.fg-lightTeal .markers li.active a {
background-color: #45fffd;
}
.metro .carousel.fg-lightOlive .markers li.active a {
background-color: #78aa1c;
}
.metro .carousel.fg-lightOrange .markers li.active a {
background-color: #c29008;
}
.metro .carousel.fg-lightPink .markers li.active a {
background-color: #f472d0;
}
.metro .carousel.fg-lightRed .markers li.active a {
background-color: #ff2d19;
}
.metro .carousel.fg-lightGreen .markers li.active a {
background-color: #7ad61d;
}
.metro .carousel .markers.default > ul > li > a {
width: 32px;
height: 6px;
}
.metro .carousel .markers.cycle > ul > li > a {
width: 24px;
height: 24px;
border-radius: 50%;
}
.metro .carousel .markers.square > ul > li > a {
width: 24px;
height: 24px;
}
.metro .tile {
position: relative;
overflow: hidden;
display: block;
float: left;
margin: 0 10px 10px 0;
padding: 0;  box-shadow: inset 0px 0px 1px #FFFFCC;
outline: 0;
}
.metro .tile img{
border-radius: 0;
}
.metro .tile:hover { }
.metro .tile:active {
outline: 0;
}
.metro .tile.no-outline {
outline-color: transparent;
}
.metro .tile {  width: 100%;
height: 300px;
margin: 0 10px 10px 0;
}
.metro .tile.half {
width: 55px;
height: 55px;
}
.metro .tile.double {
width: 250px;
}
.metro .tile.double-vertical {
height: 250px;
}
.metro .tile.triple {
width: 380px;
}
.metro .tile.triple-vertical {
height: 380px;
}
.metro .tile.quadro {
width: 510px;
}
.metro .tile.quadro-vertical {
height: 510px;
}
.metro .tile.selected {
border: 4px #4390df solid;
}
.metro .tile.selected:after {
position: absolute;
display: block;
border-top: 28px solid #4390df;
border-left: 28px solid transparent;
right: 0;
content: "";
top: 0;
z-index: 101;
}
.metro .tile.selected:before {
position: absolute;
display: block;
content: "\e003";
color: #fff;
right: 0;
font-family: 'metroSysIcons';
font-size: 9pt;
font-weight: normal;
z-index: 102;
top: 0;
}
.metro .tile .tile-content {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
display: block;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
.metro .tile .tile-content.padded {
padding: 10px;
}
.metro .tile .tile-content.image {
width: 100%;
min-height: 100%;
max-height: 100%;
}
.metro .tile .tile-content.icon [class*="icon-"],
.metro .tile .tile-content.icon img {
line-height: 56px;
height: 56px;
width: 56px;
font-size: 48px;
color: #ffffff;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
margin-top: -28px;
margin-left: -28px;
}
.metro .tile .tile-content.image-set img {
margin: 0;
padding: 0;
width: 25% !important;
height: 50%;
float: left;
border: 1px #1e1e1e solid;
}
.metro .tile .tile-content.image-set img:first-child {
width: 50% !important;
float: left;
height: 100%;
}
.metro .tile .tile-content {
display: none;
}
.metro .tile .tile-content:first-child {
display: block;
}
.metro .tile .brand,
.metro .tile .tile-status {
position: absolute;
bottom: 0;
left: 0;
right: 0;
min-height: 29px;
margin: 0;
}
.metro .tile .brand:before,
.metro .tile .tile-status:before,
.metro .tile .brand:after,
.metro .tile .tile-status:after {
display: table;
content: "";
}
.metro .tile .brand:after,
.metro .tile .tile-status:after {
clear: both;
}
.metro .tile .brand.opacity,
.metro .tile .tile-status.opacity {
opacity: .8;
}
.metro .tile .brand .name,
.metro .tile .tile-status .name,
.metro .tile .brand .label,
.metro .tile .tile-status .label,
.metro .tile .brand .text,
.metro .tile .tile-status .text {
display: block;
font-size: 10pt;
margin: 5px 20px 2px 5px;
background: transparent;
color: #ffffff;
}
.metro .tile .brand .text,
.metro .tile .tile-status .text {
margin: 8px 5px;
font-size: 8pt;
line-height: 10pt;
}
.metro .tile.parts > ul {
margin: 0;
padding: 0;
list-style: none;
}
.metro .tile.parts > ul > li {
display: block;
float: left;
height: 60px;
width: 60px;
margin: 0;
}
.metro .tile.parts > .part {
display: block;
float: left;
height: 60px;
width: 60px;
margin: 0;
}
.metro .tile.half .tile-content.icon [class*="icon-"],
.metro .tile.half .tile-content.icon img {
line-height: 37.33333333px;
height: 37.33333333px;
width: 37.33333333px;
font-size: 32px;
color: #ffffff;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
margin-top: -18.66666667px;
margin-left: -18.66666667px;
}
.metro .tile {
font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
}
.metro .tile * {
font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
}
.metro .tile.scale {
-webkit-transform: scale(0.98);
-moz-transform: scale(0.98);
-ms-transform: scale(0.98);
-o-transform: scale(0.98);
transform: scale(0.98);
}
.metro [draggable] {
cursor: default;
}
.metro .tile .tile-content.email {
color: #ffffff;
padding: 10px;
}
.metro .tile .tile-content.email .email-image {
width: 64px;
height: 64px;
float: left;
}
.metro .tile .tile-content.email .email-image img {
width: 100%;
height: 100%;
}
.metro .tile .tile-content.email .email-data {
display: block;
color: inherit;
margin-left: 70px;
width: auto;
overflow: hidden;
}
.metro .tile .tile-content.email .email-data .email-data-title,
.metro .tile .tile-content.email .email-data .email-data-subtitle,
.metro .tile .tile-content.email .email-data .email-data-text {
color: inherit;
display: block;
}
.metro .tile .tile-content.email .email-data .email-data-title {
font-size: 14pt;
}
.metro .tile .tile-content.email .email-data .email-data-subtitle {
font-size: 11pt;
}
.metro .tile .tile-content.email .email-data .email-data-text {
font-size: 10pt;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.metro .bg-dark {
background-color: #333333 !important;
}
.metro .bg-darker {
background-color: #222222 !important;
}
.metro .opacity {
opacity: .9;
}
.metro .half-opacity {
opacity: .5;
}
.metro .hi-opacity {
opacity: .2;
}