html {
	-webkit-text-size-adjust: 100%
}

body {
	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
		sans-serif;
	font-size: 16px;
	margin: 0;
}

.container {
	margin: 0 auto;
	max-width: 50em;
}

.breadcrumbs {
	margin: 0 2em;
}

.breadcrumbs a {
	text-decoration: none;
	color: inherit;
	font-weight: bold;
}

.block {
	margin: 1em;
	background: #eee;
	border-radius: 1ex;
	padding: 1em;
	border: 2px solid #fff;
}

.locker_area {
	display: block;
	margin-top: 1em;
	text-decoration: none;
	color: #222;
	clear: both;
}

.locker_area:hover {
	color: #000;
}

.locker_area:hover .thermometer {
	background: #fff;
	border-color: #222;
}

.locker_area h4 {
	font-size: 120%;
	margin: 0;
}

.locker_area .cost {
	float: right;
	margin-top: -2.5ex;
}

.thermometer {
	position: relative;
	border: 2px solid #ccc;
	margin: 0.5ex 0;
	height: 2em;
}

.thermometer .text {
	margin: 1ex;
	text-align: center;
	position: absolute;
	width: 100%;
}

.thermometer .mercury {
	height: 100%;
	float: left;
	max-width: 100%;
}

.thermometer .paid {
	background: #ccc;
}


.building_photo {
	display: block;
	margin: 1ex auto;
	max-width: 100%;
}

.reserve {
	text-align: center;
}

h2 {
	font-size: 200%;
	text-align: center;
}

h3 {
	text-align: center;
	border-bottom: 2px solid #000;
	margin: 0;
	padding-bottom: 1ex;
	font-size: 150%;
}

h3 a {

	text-decoration: none;
	color: inherit;
}

input.text {
	font-size: 100%;
	margin: 0;
	vertical-align: baseline;
	*vertical-align: middle;
	color: black;
	background-color: #fff;
	background-repeat: repeat-x;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	border-color: #0064CD #0064CD #003F81;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	border-radius: 0.5ex;
	border-width: 1px;
	padding: 1ex;
}

textarea {
	color: black;
	background-color: #fff;
	background-repeat: repeat-x;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	border-color: #0064CD #0064CD #003F81;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	border-radius: 0.5ex;
	border-width: 1px;
	width: 100%;
	min-height: 8em;
}


input[type="submit"],
.submit {
	font-size: 100%;
	margin: 0;
	vertical-align: baseline;
	*vertical-align: middle;
	color: white;
	background-color: #0064CD;
	background-repeat: repeat-x;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	border-color: #0064CD #0064CD #003F81;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	border-radius: 0.5ex;
	border-width: 1px;
	padding: 1ex 2ex;
	min-width: 20em;
}

table {
	border-collapse: collapse;
	width: 100%;
	margin: 1ex 0;
	font-size: 100%;
}

table td {
	padding: 1ex 2ex;
	border-bottom: 1px solid #999;
}

table th {
	padding: 1ex 2ex;
	text-align: left;
	border-bottom: 2px solid #999;
}

table td:nth-child(odd) {
	background-color: #ddd;
}

table.hours td,
table.hours th {
	padding: 0.5ex;
	text-align: center;
}

table.hours {
	table-layout: fixed;
}

table.hours td.full {
	background: #cec;
}

table.hours td.partial {
	background: #eec;
}

table.hours td.closed {
	background: #ecc;
}

.lockercontainer {
	overflow: auto;
	-webkit-overflow-scrolling: touch
}

table.lockerlayout {
	border: 4px solid #666;
	margin: 0;
	margin-top: 2em;
}

table.lockerlayout td {
	border: 1px solid #336;
	padding: 0;
	text-align: center;
	background: #fff;
	font-size: 80%;
	letter-spacing: 0.2ex;
	white-space: nowrap;
	min-width: 3em;
}

table.lockerlayout td a {
	display: block;
	padding: 1.5ex 0.5ex;
	text-decoration: none;
	color: #000;
}

table.lockerlayout td a.available {
	background: #6f4;
	color: #030;
}

table.lockerlayout td a.available:hover {
	text-decoration: underline;
	background: #3f2;
	color: #000;
}

table.lockerlayout td a.reserved {
	background: #eed;
	color: #996;
}

table.lockerlayout td a.reserved:hover {
	background: #ffd;
}

table.lockerlayout td a.occupied {
	background: #edd;
	color: #966;
}

table.lockerlayout td a.occupied:hover {
	background: #fdd;
}

table.lockerlayout td.corner {
	background: #666;
	min-width: 0.5ex;
}

table.lockerlayout td.broken {
	background: #888;
	color: #666;
}


table.lockerlayout td.column {
	background: #444;
	min-width: 2em;
}

table.lockerlayout td.door {
	background: #888;
	min-width: 2em;
}

table.lockerlayout td.other {
	border: none;
	background: none;
}

#header {}

#header h1 {
	font-size: 250%;
	margin: 0;
	padding: 1em;
}

#footer {
	text-align: center;
	font-size: 90%;
	padding: 1ex;
}

#footer a {
	color: inherit;
	text-decoration: none;
}

div.block.admin {
	background: #eee;
}

div.block.failure,
li.block.failure {
	background: #fee;
	border-color: #f44;
}

div.block.success,
li.block.success {
	background: #efe;
}

.dataTables_wrapper {
	clear: both;
	margin-top: 1ex;
	margin-bottom: 3ex;
}

.dataTables_paginate a {
	margin-left: 2em;
}

.paginate_disabled_previous,
.paginate_disabled_next {
	color: #999;
}

.dataTables_length,
.dataTables_info {
	float: left;
}

.dataTables_paginate,
.dataTables_filter {
	float: right;
}

@media only screen and (max-width: 640px) {
	body {
		font-size: 14px;
	}

	#header h1 {
		font-size: 175%;
		line-height: 2ex;
		vertical-align: middle;
	}

	.block {
		margin: 1ex;
		padding: 1ex;
	}
}





/* Accordeon styles */
.area {
	position: relative;
	overflow: hidden;
}

.area input {
	display: none;
}

.area label {
	position: relative;
	display: block;
}

.area .lockercontainer {
	max-height: 0;
	overflow-y: hidden;
	position: relative;
}

.area input[type=radio]+label h4::before {
	content: "\2303\FE0E";
	/* Second character required to avoid emoji */
	width: 1.2em;
	font-size: 0.75em;
	display: block;
	float: left;
	color: #666;
	transform: rotate(180deg);
	margin-top: 2px;
	margin-left: -2px;
}


.area label:hover h4::before {
	color: #000 !important;
}

.area input[type=radio]:checked+label .thermometer {
	height: auto;
}

.area input[type=radio]:checked+label .thermometer .mercury {
	opacity: 0;
}

.area input[type=radio]:checked+label .thermometer .text::after {
	content: " lockers marked in green. Scroll horizontally to see all lockers.";
}

.area input[type=radio]:checked+label h4::before {
	content: "\2303\FE0E";
	transform: rotate(0deg);
	margin-top: 5px;
}

/* :checked */
.area input:checked+label .lockercontainer {
	max-height: 20em;
}


p.radio {
	display: block;
	position: relative;
	margin: 0;
}

p input[type="radio"] {
	position: absolute;
	top: 1.5ex;
	left: 1.5ex;

}


p input[type="radio"]+label {
	display: block;
	*vertical-align: middle;
	border-radius: 0.5ex;
	border-width: 1px;
	display: block;
	width: 20em;
	font-size: 100%;
	margin: 0;
	min-width: 20em;
	padding: 1ex 2ex;
	padding-left: 4ex;

}

p input[type="radio"]:checked+label {
	background: #fff;
}



label.terms input:checked {
	background: #f00;
}

#payment-element {
	margin-bottom: 2em;
}


form ul li {
	list-style: none;
}

form ul {
	padding: 0;
}