html {
font-family: Myriad Pro, sans-serif;
} body {
margin: 0;
} tr {
text-align: center;
} td {
padding: 2px;
} dl {
-webkit-margin-before: 0;
} dd {
-webkit-margin-start: 0;
} h1 {
margin: 16px; font-weight: normal; font-size: 24px;
} h1 .time {
margin-left: 10px; opacity: 0.5;
} h3 {
margin: 0 0 6px 4px; font-size: 24px; width: 763px; padding: 0; float: left; text-shadow: 1px 1px 1px white;
} .indicators {
font-size: 12px; width: 92px; float: left; margin: 5px 28px 5px 0; -webkit-transition: all 0.1s ease-in-out;
} .indicators div {
border-radius: 8px; padding: 3px 8px; margin-right: 5px; float: right; color: #FFF; opacity: 0.8; height: 11px; line-height: 11px; font-weight: bold;
} .indicators div:hover {
-webkit-transition:opacity 0.3s ease-in-out;
} .indicators .passed {
background: #65C400;
} .indicators .failed {
background: #C20000;
} .indicators .pending {
background: #F9E934; color: #000;
} .feature {
padding: 10px 9px 4px 9px; border-radius: 5px; width: 1012px; margin: 15px 15px 24px 15px; box-shadow: 0 0 4px rgba(0,0,0,0.2);
} .ci .feature {
display: none;
} .ci .first.feature {
display: block;
} .buttons {
float: left; width: 125px; display: block;
} .ci .buttons {
display: none;
} .buttons a {
text-align: center; width: 70px; color: #484848; text-decoration: none; text-shadow: 0 1px 0 white; font: bold 12px Helvetica, Arial, sans-serif; margin-bottom: 6px; line-height: 26px; height: 25px; display: block; float: left; padding: 0 5px; background: -webkit-linear-gradient(top, #F4F4F4, #ECECEC); border: solid 1px #D4D4D4; border-radius: 5px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); -webkit-transition: border-color .218s; cursor: pointer;
} .buttons a.left {
border-radius: 5px 0 0 5px; width: 50px; float: left; margin: 0;
} .buttons a.right {
border-radius: 0 5px 5px 0; width: 50px; float: left; position: relative; left: -1px; margin: 0;
} .buttons a:hover {
border: solid 1px #7f7f7f; color: #282828; background: -webkit-linear-gradient(top, #ffffff, #dfdfdf);
} .buttons a:active {
border: solid 1px #7f7f7f; background: #d0d0d0; background: -webkit-gradient(linear, left top, left bottom, from(#a8a8a8), color-stop(0.15, #c6c6c6), to(#d8d8d8)); background: -webkit-linear-gradient(top, #a8a8a8, #c6c6c6 15%, #d8d8d8);
}
.screen {
-webkit-transition:all 0.2s ease-in-out; width: 990px; height: 15px; padding: 5px 0 5px 9px; margin-bottom: 6px; border-radius: 5px; cursor: pointer; overflow: hidden;
} .screen.passed {
color: #65C400; background-color: #DBFFB4; border: 1px #65C400 solid; border-left: 10px #65C400 solid;
} .screen.passed img {
box-shadow: 0px 0px 4px #65C400;
} .screen.failed {
color: #C20000; background-color: #FFD6D6; border: 1px #C20000 solid; border-left: 10px #C20000 solid;
} .screen.failed img {
box-shadow: 0px 0px 4px #C20000;
} .screen.pending {
color: #F2CF32; background-color: #FFFDBC; border: 1px solid #F9E934; border-left: 10px solid #F9E934;
} .screen.pending img {
box-shadow: 0px 0px 4px #F9E934;
} .screen dt {
color: #000; font-size: 13px; line-height: 17px; margin: 0; font-weight: normal;
} .ci .screen dt {
position: relative; z-index: 2;
} .screen dd {
float: left; margin: 0 10px 0 0; -webkit-transition:all 0.3s ease-in-out; opacity: 0; position: relative; top: -30px;
} .screen dd.hidden {
visibility: hidden;
} .screen.expanded, .ci .screen {
-webkit-transition:all 0.2s ease-in-out; height: 510px;
} .screen.expanded dd, .ci .screen dd {
opacity: 1.0; -webkit-transition:all 0.3s ease-in-out;
} .screen p {
margin-bottom: -3px; padding: 5px; font-size: 13px; text-align: center; font-weight: bold; background-color: rgba(255, 255, 255, 0.5);; border-radius: 5px; opacity: 0.0; position: relative; z-index: 0;
} .screen dd:hover p {
opacity: 1.0;
} .ci .screen dd p {
opacity: 1.0; background: transparent;
} .screen img {
width: 320px; position: relative;
} .viewport {
clear: both;
} .ci .viewport {
width: 1018px; height: 530px; overflow: scroll;
} .ci .surface {
height: 530px; width: 100000px; position: relative;
} .ci .surface .screen {
float: left; margin-right: 10px; position: relative;
}