body{ padding: 0; margin: 0; border: 0; font-family: Helvetica; background: #000000; -webkit-text-size-adjust: none; } a, img, div{ -webkit-tap-highlight-color: rgba(0,0,0,0.0); } p{ color: #ffffff; font-size: 12px; padding: 5px; margin: 10px; } p a{ color: #4337dd; } #container{ position: absolute; left: 0; top: 0px; margin: 0; padding: 0; border: 0; text-align: center; height: 460px; width: 320px; } #aboutThisApp{ position: absolute; left: 0; top: 411px; height: 460px; width: 320px; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 300ms; -webkit-transition-timing-function: linear; -webkit-transition-delay: 0; } #aboutDetails{ position: absolute; top: 49px; width: 100%; height: 361px; background: #000000; color: #000000; } #roadwayDetails{ position: absolute; left: 0; top: 0; height: 460px; width: 640px; } #level2Layer{ position: absolute; left: 0px; top: 0; height: 460px; width: 320px; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 300ms; -webkit-transition-timing-function: linear; -webkit-transition-delay: 0; } #cameraDetails, #trafficDetails, #weatherDetails{ position: relative; } #cameraDetails h4, #trafficDetails h4, #weatherDetails h4, #alertDetails h4, #aboutDetails h4{ font-size: 14px; line-height: 18px; font-weight: bold; margin: 0; padding: 0; text-align: center; color: #ffffff; } #cameraDetails h5, #trafficDetails h5, #weatherDetails h5{ font-size: 12px; line-height: 18px; font-weight: bold; margin: 0 0 10px 0; padding: 0; text-align: center; color: #ffffff; } #cameraImage{ width: 300px; height: 300px; margin: 0 auto; padding: 0; text-align: center; -webkit-transform-style: preserve-3d; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -webkit-transition-timing-function: linear; -webkit-transition-delay: 0; } #cameraImage.flipped{ -webkit-transform: rotateY(180deg); } #cameraImageFront{ position: absolute; background: #ffffff; width: 300px; height: 300px; -webkit-border-radius: 10px; -webkit-backface-visibility: hidden; } #cameraImageFront img{ padding: 5px; max-width: 290px; max-height: 290px; } #cameraImageBack{ background: #ffffff; text-align: center; width: 300px; height: 300px; -webkit-border-radius: 10px; -webkit-transform: rotateY(180deg); -webkit-backface-visibility: hidden; } #cameraImageBack .cameraBackButton{ float: left; margin: 0; padding: 0; width: 145px; height: 300px; } #cameraImageBack .cameraBackButton a{ color: #000000; font-size: 11px; font-weight: bold; border: 0; text-decoration: none; } #cameraImageBack .cameraBackButton img{ margin: 75px 0 0 0; border: 0; } #trafficDetailsNest, #weatherDetailsNest{ -webkit-border-radius: 10px; width: 300px; height: 300px; margin: 0 auto; background: #ffffff; padding: 10px 0; } #trafficInfo, #weatherInfo{ font-size: 11px; font-weight: bold; border: 1px solid #000000; text-align: left; padding: 5px; margin: 0 auto; width: 95%; } #trafficInfo td, #weatherInfo td{ width: 50%; padding: 2px 5px; border: 1px dotted black; } #trafficInfo td:first-child, #weatherInfo td:first-child{ background: #dedede; } #trafficInfo td:last-child, #weatherInfo td:last-child{ text-align: center; } #trafficDetails p, #weatherDetails p{ margin-top: 30px; font-size: 11px; font-style: italic; color: #000000; } #alertList{ display: block; margin: 0px; padding: 5px; list-style: none; } #alertList li{ display: block; margin: 10px; padding: 5px 5px 5px 50px; border: 1px solid #ababab; background: #ffffff url(data:image/png;base64,) no-repeat left center; -webkit-border-radius: 10px; min-height: 35px; font-size: 12px; text-align: left; } #alertList li p{ color: #000000; font-size: 11px; margin: 0; padding: 0; line-height: 13px; font-weight: normal; } #alertList li p:first-child{ font-weight: bold; } #alertList li p:last-child{ font-style: italic; } /***************** Classes *********************/ .front h1{ margin: 0; padding: 10px 0; font-size: 18px; color: #ffffff; line-height: 24px; } .front .button{ width: 100px; border: 1px solid #ffffff; margin: auto; background: #454545; -webkit-border-radius: 10px; } /**********************Header**********************/ .header{ position: relative; height: 46px; text-align: center; padding: 0; margin: 0; background: url(data:image/gif;base64,) repeat-x; } .header h5{ margin: 0; padding: 0; line-height: 38px; text-decoration: center; font-size: 20px; font-weight: bold; color: #ffffff; } .button { display: block; line-height: 30px; font-size: 14px; font-weight: bold; font-family: Helvetica, sans-serif; color: #fff; text-decoration: none; text-align: center; } .rightButton{ position: absolute; right: 0; top: 0; margin: 6px 6px 0 6px; border-width: 0px 12px 0px 5px; color: #fff; text-shadow: #000 0px 1px 1px; -webkit-border-image: url(data:image/png;base64,) 0 12 0 5; } .leftButton{ position: absolute; left: 0; top: 0; margin: 6px 6px 0 6px; color: #fff; text-shadow: #000 0px 1px 1px; border-width: 0px 5px 0px 12px; -webkit-border-image: url(data:image/png;base64,) 0 5 0 12; } /*************Main Body************************/ .mainBody{ height: 366px; background: #000000; } .level2Screen{ position: absolute; left: 0; top: 0; width: 320px; height: 460px; } .level2Page2{ position: absolute; top: 0; left: 320px; width: 320px; } .level3Screen{ position: absolute; left: 0; top: 0; width: 320px; height: 460px; } /*********************List ************************/ .list{ height: 366px; overflow: hidden; background: #ffffff; } .list ul{ margin: 0; padding: 0; } .list ul li{ display: block; line-height: 44px; border-bottom: 1px solid #e1e1e1; margin: 0; padding: 0 0 0 11px; font-size: 16px; font-weight: bold; text-align: left; } .list ul li.active{ color: #ffffff; background: #437ee6; } .list ul li.long:after{ content: "..."; } .list .favButton, .list .delButton{ float: right; margin: 0; padding: 9px; } /*************Lower Nav************************/ .lowerNav{ position: absolute; top: 411px; height: 49px; margin: 0; overflow: hidden; z-index: 1; background: url(data:image/gif;base64,) repeat-x top left; } .lowerNavNest{ padding: 0; margin: 0; } .lowerNav ul{ display: block; list-style: none; margin: 0; padding: 0; } .lowerNav li{ position: relative; float: left; height: 44px; margin: 0 2px; padding: 0; vertical-align: middle; color: #dedede; } .lowerNav li img{ position: relative; top: 0; margin: 0; padding: 0; width: 25px; height: 49px; background: url(data:image/gif;base64,) repeat-x top left; } .lowerNav li p{ position: absolute; margin: 0; padding: 0; top: 33px; width: 100%; color: #7d7d7d; font-size: 10px; font-weight: bold; } .lowerNav li h3{ width: 100%; color: #7d7d7d; font-size: 18px; line-height: 49px; font-weight: bold; color: #ffffff; margin: 0; padding: 0; } .lowerNav li.level2Active p, .lowerNav li.level3Active p{ color: #ffffff; } .lowerNav li.level2Active img, .lowerNav li.level3Active img{ background: url(data:image/gif;base64,) repeat-x top left; } .lowerNav li a{ border: 0; } .lowerNav li img{ border: 0; } .button1 ul li{ width: 316px; } .button2 ul li{ width: 156px; } .button4 li{ width: 76px; } .button5 li{ width: 60px; }