/*
* Copyright 2012 Research In Motion Limited.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

.take-photo-view{
	width:100%;
	height:702px;
	position: absolute;
}


#video {
	background:black;
	display:none;
	width:768px;
}

canvas#camera,canvas#moustaches{
	position:absolute;
	top:0;
	left:0;
	margin:auto;
}
canvas#camera{
	z-index:0;
}


#controls{	
	position:absolute;
	width:190px;
	background: #141414;
	border-radius: 70px 0px 0px 0px;
	box-shadow: 5px 5px 20px rgba(0,0,0,0.36);
	z-index:2;
	right:0px;
	bottom:0px;
}

#logo{
	color:white;
	text-align:center;
	background:#141414;
	width:100%;	
	height:80px;
	z-index:3;
	background:url("images/header.png");
	background-repeat: repeat-x;
	
}

#snap,#cancel{
	width: 128px;
	height: 128px;
	background-image: url(images/shutter.png);
	background-color: black;
	border-radius: 100px;
	padding: 10px;
	margin:20px;
	background-position: 0px 0px;
	background-repeat: no-repeat;
}

#cancel {
	background-image: url(images/cancel.png);
	display:none;
}


#display{
	position:relative;
	width:768px;
	height:702px;
	overflow:hidden;
	margin:auto;
	border-bottom:10px solid #0098f0;

}

@media 
screen and (device-height:720px) {
	.take-photo-view{
		width:100%;
		height: 620px;
	}
	#display{
		width: 550px;
		height: 550px;
		float:left;
		border:none;
	}	
	#video {
		background:black;
		display:none;
		width:720px;
	}
	#controls{	
		left:0px;
		right:auto;
		border-radius: 0px 70px 0px 0px;
	}	
	
}