html, body {
	height: 100%;
}

.pageView {
	overflow: hidden;
	width: 100%;
	height: 100%;
	position: relative;
}


.pannel {
	background: rgba(0, 123, 255, 0.8);
	width: 100%;
	position: absolute;
	left: 0;
	top: -1000px;
	z-index: 999;
	// border-bottom: #ccc 1px solid;
	-webkit-box-shadow: 0 1px 1px -1px #666;

	@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
	    & {
	        border:0;
	        -webkit-box-shadow: 0 1px 1px -1px #666;
	    }

	}

	dl {
		line-height: 1.8em;
		margin: 1em;
		font-size: 1em;
	}

	dt {
		display: inline-block;
		margin: 0 1em 0 0;
		color: #ccc;
	}

	dd {
		display: inline-block;
		margin: 0 1em 0 0;
	}

	a {
		display: block;
		height: 1.8em;
		color: #fff;

		&.selected {
			color: #ffcc00;
		}
	}
}

.loading-page {
	position: absolute;
	padding: 1.5em;
	border-radius: 0.75em;
	background: rgba(0,0,0,0.75);
	top: 50%;
	left: 50%;
	margin-top: -2.5em;
	margin-left: -2.5em;
	z-index: 100;
}

.cardView {
	height: 100%;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	overflow-x: hidden;
	// overflow-y: auto;
	box-shadow: 0 2px 4px rgba(0,0,0,0.3);
	// background-color: #f8f8f8;
	// background-color: #fff;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	pointer-events: none;


	.message {
		padding: 40px 10% 0;
		margin-top: 20%;
		text-align: center;
		color: #b3b3b3;
		background: url('img/error.png?v=3') top center no-repeat;
		background-size: 37px auto;
		font-size: 0.9em;
	}

	.search {
		height: 29px;
		border-bottom: #ccc 1px solid;
		padding: 10px;
		position: relative;
		z-index: 101;
		margin-top: -50px;
		background: #fff;

		input {
			width: 94%;
			height: 29px;
			line-height: 29px;
			background: rgba(0, 0, 0, 0.2);
			color: #fff;
			border-width: 0;
			border-radius: 5px;
			padding: 0 3%;
		}
	}
}


.segmentControl {
	height: 29px;
	width: 60%;
	line-height: 29px;
	margin: 0 auto;
	text-align: center;
	display: table;

	.segment-item {
		height: 27px;
		border: #808080 solid;
		background: #fff;
		border-width: 1px 1px 1px 0;
		color: #666666;
		display: table-cell;

		&.active {
			background: #808080;
			color: #fff;
		}

		&:first-child {
			border-radius: 5px 0 0 5px;
			border-width: 1px;
		}

		&:last-child {
			border-radius: 0 5px 5px 0;
			border-width: 1px 1px 1px 0;
		}
	}
}


.navigationBar {
	height: 64px;
	width: 100%;
	overflow: hidden;
	border-bottom: #ccc 1px solid;
	background: #f8f8f8;
	text-align: center;
	position: fixed;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	z-index: 1000;
	padding-top: 20px;

	.searchBar {
		margin: 7px 15px;
		height: 29px;
		position: relative;

		input {
			position: absolute;
			left: 0;
			width: 94%;
			height: 29px;
			line-height: 29px;
			// background: #ddd;
			color: #333;
			border-width: 0;
			// border-radius: 4px;
			padding: 0 3%;
		}
	}

	.goBack {
		display: inline-block;
		height: 43px;
		line-height: 45px;
		padding: 0 15px 0 25px;
		.retina('img/back.png', 20px, auto, left, center, no-repeat);
		position: absolute;
		left: 0;
		top: 20;
		color: #ff3b30;
		font-size: 1.2em;
	}

	.rightButton {
		display: inline-block;
		height: 43px;
		line-height: 45px;
		padding: 0 10px;
		position: absolute;
		right: 0;
		top: 20;
		color: #ff3b30;
		font-size: 1.2em;	
	}

	.segmentControl {
		margin-top: 7px;
	}

	.title {
		max-width: 58%;
		overflow: hidden;
		white-space: pre;
		text-overflow: ellipsis;
		font-size: 1.3em;
		color: #000;
		line-height: 43px;
		display: block;
		margin: 0 auto;
	}
}