/*  
 * Copyright 2009 Palm, Inc.  All rights reserved.
 */

img {
    border: none;
}

.palm-scene {
    height: 100%;
    width: 100%;
}

/* View Finder */

.view-finder {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
    background: url(../images/view-finder.png) top center no-repeat;
    width: 100px;
    height: 100px;
}

/* Rotate message */

.rotate-container {
    display: none;
    position: absolute;
    margin-top: -13px;
    top: 50%;
    left: -40px;
    -webkit-transform: rotate(90deg);
}

.camcorder .rotate-container {
    display: block;
}

.rotate-message {
    margin: 0px;
    padding: 0px;
    -webkit-border-image: url(../images/timer-background.png) 0 10 0 10 / 0 10px 0 10px stretch stretch;
    height: 27px;
    line-height: 27px;
    font-weight: bold;
    color: #FFF;
    
    -webkit-transition-property: opacity, color;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-delay: .5s;
}

.recording .rotate-message,
.left .rotate-message {
    opacity: 0;
    color: rgba(255,255,255,0);
}

/* Camera Menu and Controls */

.camera-controls {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 100px;
}

.capture-thumbnail,
.capture-thumbnail-overlay,
.view-finder,
.camera-controls {
    -webkit-transition: opacity 0.5s;
    opacity: 1;
}

.preview-off .rotate-message,
.preview-off .view-finder,
.preview-off .camera-controls {
    -webkit-transition-delay: 0;
    opacity: 0;
    color: rgba(255,255,255,0);
}

.camera.recording .camera-controls,
.camera.recording .view-finder {
    display: none;
}

.capture-thumbnail-overlay {
	height:84px;
	width:84px;
    margin: 8px 0px 0px 18px;
    position: absolute;
	z-index:1000;
    background: url(../images/menu-preview.png) left top no-repeat;
}

.capture-thumbnail {
    float: left;
    margin: 15px 0px 15px 25px;
    background: url(../images/blank-thumbnail.png) left top no-repeat;
}

.recording .capture-thumbnail { display: none; }
.recording .capture-thumbnail-overlay { display: none; }

.center-controls {
    background: url(../images/menu-bezel-camcorder.png) 50% 50% no-repeat;
    background: url(../images/menu-bezel-camera.png) 66% 50% no-repeat;
    pointer-events: none;
    position: relative;
    height: 100%;
}

.camcorder .center-controls {
    background: url(../images/menu-bezel-camcorder.png) 50% 50% no-repeat;
}

.capture-time {
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    color: #FFF;
    float: right;
    margin: 35px 0px;
    width: 60px;
    height: 30px;
    line-height: 30px;
    background: url(../images/timer-background.png) center center no-repeat;
    display: none; 
}

.camcorder.recording .capture-time { display: block; }

.toggle-button {
    float: right;
    margin: 25px 10px 25px 0px;
    width: 50px;
    height: 50px;
    background: url(../images/toggle-buttons.png) left top no-repeat;
}

.camcorder.recording .toggle-button { display: none; }
.toggle-button.selected { background-position: 0px -50px; }
.camcorder .toggle-button { background-position: 0px -100px; }
.camcorder .toggle-button.selected { background-position: 0px -150px; }

.capture-button {
    top: 50%;
    left: 50%;
    margin-top: -40px;
    margin-left: -40px;
    width: 80px;
    height: 80px;
    position: absolute;
    pointer-events: auto;
    
    background: url(../images/capture-buttons.png) 0px 0px no-repeat;
}

.capture-button.selected { background-position: 0px -80px; }
.camcorder .capture-button { background-position: 0px -160px; }
.camcorder .capture-button.selected { background-position: 0px -240px; }
.camcorder.recording .capture-button { background-position: 0px -320px; }
.camcorder.recording .capture-button.selected { background-position: 0px -400px; }

.flash-button {
    width: 50px;
    height: 50px;
    left: 50%;
    top: 50%;
    margin-top: -25px;
    margin-left: 45px;
    position: absolute;
    pointer-events: auto;
    
    background: url(../images/flash-buttons.png) 0px 0px no-repeat;
}

.camcorder .flash-button { visibility: hidden; }

.flash-button.selected { background-position: 0px -50px; }
.flash-button.flash-on { background-position: 0px -100px; }
.flash-button.flash-on.selected { background-position: 0px -150px; }
.flash-button.flash-auto { background-position: 0px -200px; }
.flash-button.flash-auto.selected { background-position: 0px -250px; }

/* Photo Roll */

.photo-roll {
    position: absolute;
    width: 84px;
    height: 84px;
    bottom: 0px;
    left: 10px;
}

.photo-roll-button {
    width: 84px;
    height: 84px;
    background: url(../images/menu-preview.png) top left no-repeat;
}

.photo-roll-stack {
    width: 70px;
    height: 70px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -35px;
    margin-left: -35px;
}

.preview {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: black;
}

/* Card view and not ready modes */

.camera-icon {
    position: fixed;
    top: 50%;
    left: 0;
    width: 320px;
    height: 320px;
    margin: -160px 0 0 0;
    background: url(../images/camera-icon.png) center center no-repeat;
    display: none;
}

/* Orientation */
.capture-thumbnail-overlay,
.capture-thumbnail,
.toggle-button,
.capture-time,
.capture-button,
.flash-button,
.view-finder,
.camera-icon {
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 0.4s;
}

.down .capture-thumbnail-overlay,
.down .capture-thumbnail,
.down .toggle-button,
.down .capture-time,
.down .capture-button,
.down .flash-button,
.down .view-finder,
.down .camera-icon {
    -webkit-transform: rotate(180deg);
}

.right .capture-thumbnail-overlay,
.right .capture-thumbnail,
.right .toggle-button,
.right .capture-time,
.right .capture-button,
.right .flash-button,
.right .view-finder,
.right .camera-icon {
    -webkit-transform: rotate(-90deg);
}

.camcorder .capture-thumbnail-overlay,
.camcorder .capture-thumbnail,
.camcorder .toggle-button,
.camcorder .capture-time,
.camcorder .capture-button,
.camcorder .flash-button,
.camcorder .view-finder,
.left .capture-thumbnail-overlay,
.left .capture-thumbnail,
.left .toggle-button,
.left .capture-time,
.left .capture-button,
.left .flash-button,
.left .view-finder,
.left .camera-icon {
    -webkit-transform: rotate(90deg);
}

.gpsMeter {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 90px;
    height: 20px;
    background-color: #a0a0a0;
}

#camera-palm-scrim {
    display: none;
}

.preview-off #camera-palm-scrim {
    display: block;
}
