/* All screens. */

html, body { height: 100%; margin: 0; padding: 0; font-family: verdana, tahoma; background-color: #D0E0D0; }

.screen-content { position: absolute; left: 0px; top: 40px; right: 0px; bottom: 0px; overflow-y: auto; }

.screen-header { height: 40px; background: url( 'gradient-bar.png' ); color: white; }




/* The map screen. */

#map-border {}
#map-border .border-enabled { margin: 12px; }
#map { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow-y: auto; }

#map-toolbar { position: absolute; left: 0px; top: 0px; right: 0px; }
#map-toolbar .title { float: left; font-size: 24px; line-height: 40px; padding: 0px 10px; font-weight: bold; }
#map-toolbar .button { float: right; height: 40px; }
#map-toolbar .button .graphics { height: 100%; }
#map-toolbar #settingsButton { margin: 0 5px; width: 40px; background: url( 'icons/green/cog.png' ) no-repeat center center; }
#map-toolbar #end-manual-pan-button { width: 40px; background: url( 'icons/green/end-manual-pan.png' ) no-repeat center center; }
#map-toolbar #limbs-buttons { float: right; }
#map-toolbar #limbs-buttons .idle { background-position: -40px 0px; }
#map-toolbar #limbs-buttons .pending { background-position: -160px 0px; }
#map-toolbar #limbs-buttons .active { background-position: -120px 0px; }
#map-toolbar #limbs-buttons .error { background-position: -80px 0px; }
#map-toolbar #limbs-buttons .no-results { background-position: 0px 0px; }
#map-toolbar #limbs-buttons #parking-button { width: 40px; }
#map-toolbar #limbs-buttons #parking-button .graphics { background-image: url( 'icons/limbs/parking/button.png' ); background-repeat: no-repeat; }
#map-toolbar #limbs-buttons #filling-station-button { width: 40px; }
#map-toolbar #limbs-buttons #filling-station-button .graphics { background-image: url( 'icons/limbs/filling/button.png' ); background-repeat: no-repeat; }
#map-toolbar #limbs-buttons #train-button { width: 40px; }
#map-toolbar #limbs-buttons #train-button .graphics { background-image: url( 'icons/limbs/train/button.png' ); background-repeat: no-repeat; }
#map-toolbar #limbs-buttons #bus-button { width: 40px; }
#map-toolbar #limbs-buttons #bus-button .graphics { background-image: url( 'icons/limbs/bus/button.png' ); background-repeat: no-repeat; }
#map-toolbar #limbs-buttons #bar-button { width: 40px; }
#map-toolbar #limbs-buttons #bar-button .graphics { background-image: url( 'icons/limbs/bar/button.png' ); background-repeat: no-repeat; }
#map-toolbar #limbs-buttons #taxi-button { width: 40px; }
#map-toolbar #limbs-buttons #taxi-button .graphics { background-image: url( 'icons/limbs/taxi/button.png' ); background-repeat: no-repeat; }
#map-toolbar #limbs-buttons #atm-button { width: 40px; }
#map-toolbar #limbs-buttons #atm-button .graphics { background-image: url( 'icons/limbs/atm/button.png' ); background-repeat: no-repeat; }
#map-toolbar #limbs-buttons #shop-button { width: 40px; }
#map-toolbar #limbs-buttons #shop-button .graphics { background-image: url( 'icons/limbs/shop/button.png' ); background-repeat: no-repeat; }
#map-toolbar #limbs-buttons #eatery-button { width: 40px; }
#map-toolbar #limbs-buttons #eatery-button .graphics { background-image: url( 'icons/limbs/eat/button.png' ); background-repeat: no-repeat; }
#map-toolbar #travel-mode-icon { float: left; }
#map-toolbar #travel-mode-icon .drive { width: 40px; height: 40px; background: url( 'icons/green/transport/drive.png' ) no-repeat center center; }
#map-toolbar #travel-mode-icon .cycle { width: 40px; height: 40px; background: url( 'icons/green/transport/cycle.png' ) no-repeat center center; }
#map-toolbar #travel-mode-icon .foot { width: 40px; height: 40px; background: url( 'icons/green/transport/foot.png' ) no-repeat center center; }
#map-toolbar #travel-mode-icon .public { width: 40px; height: 40px; background: url( 'icons/green/transport/public.png' ) no-repeat center center; }
#map-toolbar .button .panmode { width: 40px; height: 40px; background: url( 'icons/green/arrow.png' ) no-repeat center center; }

.info-box { background-color: #FFFFFF; border: 2px solid #404040; padding: 2px; width: 200px; }
.info-box .custom-info-box { position: relative; top: -22px; margin-right: 16px; }
.info-box .custom-info-box .arrow { position: relative; left: 14px; width: 30px; height: 20px; background-image: url('callout.png'); background-repeat: no-repeat; }
.info-box .custom-info-box .content { padding: 4px; }
.info-box .custom-info-box .content .place-name { font-size: 0.9em; }
.info-box .custom-info-box .content .place-info { margin: 0.5em; font-size: 0.7em; color: #808080; }
.info-box .custom-info-box .content .place-info p { margin: 0.5em 0; }
.info-box .custom-info-box .content .set-as-destination { margin: 10px 0 0 0; font-size: 0.7em; }
.info-box .custom-info-box .content .set-as-destination .button { display: inline; padding: 3px 6px; border-radius: 5px; }
.info-box .custom-info-box .content .set-as-destination .enabled { border: 1px solid #A0A0A0; color: #404040; background-color: #F4F4F4; }
.info-box .custom-info-box .content .set-as-destination .disabled { border: 1px solid #E0E0E0; color: #A0A0A0; }




/* The settings screen. */

#settings { background-color: #D0E0D0; }
#settings .drive { background: url( 'icons/settings/transport/drive.png' ) no-repeat center center; }
#settings .cycle { background: url( 'icons/settings/transport/cycle.png' ) no-repeat center center; }
#settings .public { background: url( 'icons/settings/transport/public.png' ) no-repeat center center; }
#settings .foot { background: url( 'icons/settings/transport/foot.png' ) no-repeat center center; }

#main-settings {  }
#main-settings .set-destination { background: url( 'icons/settings/setdestination.png' ) no-repeat center center; }
#main-settings .remove-destination { background: url( 'icons/settings/removedestination.png' ) no-repeat center center; }
#main-settings .pan-and-zoom { background: url( 'icons/settings/panandzoom.png' ) no-repeat center center; }
#main-settings .directions { background: url( 'icons/settings/directions.png' ) no-repeat center center; }
#main-settings .save-settings { background: url( 'icons/settings/savesettings.png' ) no-repeat center center; }
#main-settings .troubleshooting { background: url( 'icons/settings/troubleshooting.png' ) no-repeat center center; }
#main-settings .about { background: url( 'icons/settings/about.png' ) no-repeat center center; }

#pan-settings {  }
#pan-settings .location { background: url( 'icons/settings/panandzoom/location.png' ) no-repeat center center; }
#pan-settings .turning { background: url( 'icons/settings/panandzoom/turning.png' ) no-repeat center center; }
#pan-settings .destination { background: url( 'icons/settings/panandzoom/destination.png' ) no-repeat center center; }
#pan-settings .autorefresh { background: url( 'icons/settings/panandzoom/autorefresh.png' ) no-repeat center center; }
#pan-settings .manualtimeout { background: url( 'icons/settings/panandzoom/customtimeout.png' ) no-repeat center center; }

#troubleshooting {  }
#troubleshooting .knownissues { background: url( 'icons/settings/troubleshooting/knownissues.png' ) no-repeat center center; }
#troubleshooting .location { background: url( 'icons/settings/troubleshooting/location.png' ) no-repeat center center; }

#troubleshooting-knownissues {  }
#troubleshooting-knownissues .operating-system { margin-bottom: 15px; background-color: #FFFFFF; border: 1px solid #C0C0C0; border-radius: 6px; padding: 6px; }
#troubleshooting-knownissues #android { height: 35px; background: url( 'icons/settings/troubleshooting/issues/android.png' ) no-repeat top center;  }
#troubleshooting-knownissues #ios { height: 35px; background: url( 'icons/settings/troubleshooting/issues/ios.png' ) no-repeat top center;  }
#troubleshooting-knownissues .browser { margin: 5px 0px 10px 0px; padding: 0px 8px; }
#troubleshooting-knownissues .browser .title { line-height: 26px; }
#troubleshooting-knownissues .browser .title .icon { float: left; width: 26px; height: 26px; margin: 0 9px 0 0; }
#troubleshooting-knownissues .browser .title .chromelite { background: url( 'icons/settings/troubleshooting/issues/browser.png' ) no-repeat center center; }
#troubleshooting-knownissues .browser .title .chrome { background: url( 'icons/settings/troubleshooting/issues/chrome.png' ) no-repeat center center; }
#troubleshooting-knownissues .browser .title .firefox { background: url( 'icons/settings/troubleshooting/issues/firefox.png' ) no-repeat center center; }
#troubleshooting-knownissues .browser .title .safari { background: url( 'icons/settings/troubleshooting/issues/safari.png' ) no-repeat center center; }
#troubleshooting-knownissues .browser .issues { padding: 5px 0px 0px 0px; font-size: 0.7em; line-height: 1.4em; font-weight: normal; }

#set-destination { font-size: 0.8em; }
#set-destination #set-destination-form { height: 50px; }
#set-destination #destination-input { border: 1px solid #404040; padding: 2px 4px; font-size: 1.2em; color: 404040; background-color: #F0F0F0; }
#set-destination #destination-input:focus { border: 1px solid #808080; color: #000000; background-color: #FFFFFF; }
#set-destination #set-destination-results { position: absolute; left: 0px; top: 50px; right: 0px; bottom: 0px; overflow-y: auto; padding: 8px; }
#set-destination #set-destination-results #destination-results-waiting { height: 100px; background: url( 'icons/green/spinner.gif' ) no-repeat center center; }
#set-destination #set-destination-results #destination-results-none {  }
#set-destination #set-destination-results #destination-results-list .result { height: auto; white-space: normal; }

#about .heading { height: 70px; background: url( 'logo.png' ) no-repeat top left; }




/* For making a web page look like a mobile app menu. */

.menu-screen { background-color: #D0E0D0; padding: 8px; font-family: verdana; font-weight: bold; font-size: 15px; }

.menu-screen .heading { color: #606060; margin: 10px 0px 4px 10px; }
.menu-screen .message { color: #606060; margin: 10px 0px 25px 0px; font-size: 12px; }
.menu-screen .message code { font-size: 14px; }
.menu-screen .footnote { margin: -10px 0px 20px 10px; }

.menu-screen .item { background-color: #F8F8F8; border: 1px solid #C0C0C0; border-top-width: 0px; height: 26px; padding: 6px; line-height: 26px; white-space: nowrap; overflow: hidden; }
.menu-screen .tickeditem { background: #F8F8F8 url( 'icons/settings/tick.png' ) no-repeat right center; }
.menu-screen .first-group-item { border-top-width: 1px; border-top-left-radius: 6px; border-top-right-radius: 6px; }
.menu-screen .last-group-item { margin-bottom: 15px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }

.menu-screen .item .icon { float: left; width: 26px; height: 26px; margin: 0 9px 0 0; }
.menu-screen .item .next-screen { float: right; width: 16px; height: 26px; margin: 0; background: url( 'icons/settings/nextscreen.png' ) no-repeat center center; }

.menu-toolbar { overflow: hidden; }
.menu-toolbar .done-button { z-index: 10; position: relative; float: right; margin: 10px 6px 0px 0px; border: 1px solid #A0A0A0; border-radius: 4px; padding: 3px 6px; background-color: #E8DDBD; color: #000000; font-weight: bold; font-size: 12px; }
.menu-toolbar .back-button { z-index: 10; position: relative; float: left; margin: 8px 0px 0px 6px; border: 1px solid #A0A0A0; border-top-left-radius: 40px; border-bottom-left-radius: 40px; padding: 4px 2px 4px 6px; background-color: #E0E0E0; color: #000000; font-weight: bold; font-size: 10px; }
.menu-toolbar .title { z-index: 0; position: absolute; left: 0; width: 100%; text-align: center; font-size: 20px; font-weight: bold; line-height: 40px; }