@import url('https://fonts.googleapis.com/css?family=Amatic+SC:700|Oswald:400,700|Open+Sans');

body.ui-mobile-viewport div.ui-page {
	min-width : 240px;
	max-width : 800px;
	position : relative;
}

body.ui-mobile-viewport div.ui-page .error-icon {
	font-size : 4em;
}

@media screen and (min-width: 800px) {
	body.ui-mobile-viewport div.ui-page {
		width : 50%;
		margin : 0 auto;
		font-size : 1em;
	}
}

@media screen and (max-width: 800px) {
	body.ui-mobile-viewport div.ui-page {
		width : 100%;
		margin : 0;
	}
}

@media screen and (max-width:600px) {
	body.ui-mobile-viewport div.ui-page {
		font-size : 0.8em;
	}
}

@media screen and (max-width:400px) {
	body.ui-mobile-viewport div.ui-page {
		font-size : 0.6em;
	}
}

div.ui-page div.ui-header {
	background-color : #5C4944;
	color : #fff;
	border-width : 0;
}

div.ui-page div.ui-footer {
	background-color : #24AAE1;
	border-bottom : 10px solid #5C4944;
	height : 52px;
}

div.ui-header h1.ui-title {
	font-family : 'Amatic SC', Cursive;
	font-size : 2.5em;
	font-weight : 700;
	text-shadow : 0 0 0 #fff;
	margin : 0;
	padding : 0.5em;
}

div.ui-header h2.ui-title {
	color : #fff;
	background-color : #24AAE1;
	text-shadow : 0 0 0 #fff;
	margin : 0;
	padding : 0.2em;
	font-size : 1.5em;
	font-family: 'Oswald', sans-serif;
	font-weight : 400;
}

div.ui-content {
	text-align : center;
	font-family: 'Open Sans', sans-serif;
	text-shadow : 0 0 0 #fff;	
}

div.ui-footer a.bottom-toolbar {
	color : #fff;
	font-size : 2.5em;
	margin : 0;
	padding : 0.1em;
	text-shadow : 0 0 0 #fff;
}

div.ui-footer a.bottom-toolbar:hover {
	text-shadow : 3px 3px 5px #000;
}

#video-player img {
	max-width : 100%;
}

/* Log page styles */
#babycamlan-applog-log li {
	text-align : left;
}

/* Cams list styles */
ul#cams-list-view {
	margin : 10px 0;
	padding : 0;
}

#cams-list-view li {
	list-style-type : none;
	font-family: 'Oswald', sans-serif;
	font-size : 1.2em;
	margin : 10px 0;	
}

#cams-list-view li a {
	text-decoration : none;
}

#cams-list-view li a.cam {
	display : block;
	border : 1px #999 solid;
	-moz-border-radius: 10px;
	border-radius: 10px;
	text-decoration : none;
	padding : 10px;
	height : 50px;
	line-height : 50px;	
}

#cams-list-view li a.cam.active {
	background-color : #F0F0F0;
	box-shadow: -1px 2px 10px 0px rgba(0, 0, 0, 0.3) inset;	
}

#cams-list-view li a.cam.inactive {
	opacity : 0.5;
}

#cams-list-view li a.cam.active:hover {
	cursor : pointer;
	color : #fff;
	background-color : #24AAE1;
}

#cams-list-view li img.cam-icon {
	display : inline-block;
	height : 50px;
	float : left;
	padding : 0 0.5em;
}

#cams-list-view li img.cam-loader {
	float : right;	
}

div.ui-footer {
	position : relative;
}

.ui-footer a i {
	display:inline-block;
	vertical-align:middle;
	margin : 10px 5px 0 5px;
	text-shadow:none;
	color:#fff;	
}

p.red {
	background-color : #600;
	color : white;
}

p.boxed {
	padding : 1em;
}

/* POPUP styles */
div.ui-popup {
	background-color : #fff;
	text-align : center;
	border : 1px solid #666 !important;
	border-radius : 5px;
}

div.popup-header {
	font-size : 1.3em;
	color : #fff;
	background-color : #24AAE1;
	font-weight : bold;
	text-align : center;
	padding : 0.5em 1em;
	text-shadow:none !important;
}

.ui-mobile label {
	font-weight:bold;
	font-size : 0.9em;
}

/*Form */
form {
	margin: 1em 0 3em 0;
}

.time-selector {
	display: inline-block;
	width: 3em;
	text-align: center;
	padding: 5px;
	border: #ccc solid 1px;
	margin-left: 1em;
	border-radius : 5px;
}