/* RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;text-decoration: none;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}a{color:inherit;} a:hover{color:inherit;}img{max-width:100%; float:left;} button {background: none; border:none; margin: 0px; padding: 0px; float: left;}

/* LAYOUT */
html {font-size: 62.5%;}

body {
	width: 100%;
	height: 100%;
	background: #ecf0f1;
	font-family: "museo-sans",sans-serif; /* 100, 300, 500, 900 */
	font-size: 1.2em; /* = 12px */
	color: #37474F;
	font-weight: 300;
	letter-spacing: .06rem;

	margin: 0px;
	padding: 44px 0px 0px 0px;
}

nav {width: 100%; float: left; background: #fff; position: fixed; top: 0px; left: 0px; border-top: solid 4px #ffd500; box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.1); z-index: 999999;}
nav ul {float: right;}
nav li {float: left; margin: 0px; padding: 0px 8px; color: #757575; font-size: 1rem; font-weight: 500; text-transform: lowercase; display: inline; line-height: 40px;}
.active {color: #2196F3;}

section {width: 100%; background: #fff; float: left;}

aside {display: none; visibility: hidden;}

footer {width: 94%; background: #37474F; font-weight: 100; float: left; margin: 0px; padding: 3%;}
footer p {width: 100%; float: left; color: #78909C; margin-top: 40px;}
footer ul {width: 100%; float: left; font-size: 1.4rem; color: #fff; font-weight: 100; line-height: 3.2rem;}
footer li {}
footer h3 {font-size: 1.4rem; text-transform: uppercase; font-weight: 300; margin-bottom: 20px;}

button {width: 94%; background: #ffd500; color: #444; font-family: "museo-sans",sans-serif; font-size: 1.4rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1rem; float: left; margin: 3%; padding: 16px 0%; border-radius: 0px; cursor: pointer;}
.button {width: 100%; background: #ffd500; color: #444; font-family: "museo-sans",sans-serif; font-size: 1.4rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1rem; float: left; margin: 3%; padding: 16px 0%; border-radius: 0px; }
.peek-book-button-flat {color: #fff;}

/* TYPOGRAPHY */
header {width: 92%; float: left; font-size: 1.6rem; color: #2196F3; text-align: center; padding: 4%; border-bottom: solid 1px #ecf0f1;}

h1, h2, h3, h4 {font-weight: 500;}
h1 {font-size: 1.8rem;}
h2 {font-size: 1.6rem;}
h3 {font-size: 1.4rem;}
h4 {font-size: 1rem;}

p {width: 100%; line-height: 1.8rem; float: left;}
p a {color: #2196F3; text-decoration: underline;}

ol {
	float: left;
	display: block;
	margin: 0px;
	padding: 0px;
	list-style-type: decimal;
}

ol li {margin-left: 20px; padding: 0px;}
hr {width: 100%; height: 2px; background: #CFD8DC; float: left; margin: 20px 0px; padding: 0px; border:none;}

strong {font-weight: 500;}

img {width: 100%;}

.caps {text-transform: uppercase;}

/* IDS */
#logo {width: 40px; height: 40px; float: left; margin-left: 3%; background-image: url("../img/logo-mobile.png"); background-size: contain; background-position: left; box-shadow: 0px 2px 0px #E5C000;}

/* Slideshow */
.caption {width: auto; height: 40px; background: #263238; background: #ffd500; color: #263238; line-height: 40px; float: left; margin: -25px 0px 0px 3%; padding: 0px;}
span.price {width: 40px; height: 40px; float: left; text-align: center; background: #E5C000; font-weight: 500;}
span.event {width: auto; height: 40px; float: left; text-align: center; padding: 0px 20px;}

/* Event List */
.event {width: 100%; float: left; border-bottom: solid 1px #ecf0f1;}
.event img {width: 19%; float: left; padding: 3% 0% 3% 3%;}
.event .details {width: 71%; float: left; padding: 3%;}
.event h3 {color: #455A64; margin: 0px;}
.event h4 {color: #90A4AE;}
.event p {font-size: 1rem; line-height: 1.2rem;}

/* Event Page */
.event-description {width: 94%; background: #fff; float: left; margin: 0px; padding: 3%; border-bottom: solid 1px #ecf0f1;}
.event-price {width: 38%; float: left; color: #2196F3; text-align: center; padding: 6%;}
.event-button {width: 44%; float: left; padding: 3%;}
.event-reservation {width: 100%; background: #CFD8DC; text-align: center; float: left; padding-top: 4%;}

/* Reservation Page */
.status {display: none; visibility: hidden;}
.status ol li {width: 100%; float: left; color: #BDBDBD; line-height: 2.8rem;}
ol li.active {color: #212121; font-weight: 500;}

.form {width: 100%; float: left; padding: 0%; border: none;}
.form h1 {width: 94%; padding: 3%;}

.progress-bar {width: 100%; float: left; margin-bottom: 20px;}
.progress-bar li {display: inline; width: 25%; background: #CFD8DC; float: left; color: transparent; font-size: 1rem; text-align: center; line-height: 4px;}
.progress-bar li.active {background: #2196F3;}

/* General Styles */
.center {text-align: center;}
.caps {text-transform: uppercase;}
.list {line-height: 2rem;}

.alt {background: #f2f2f2;}
.grey {background: #CFD8DC;}
.green {background: #009688;}
.white {background: #fff;}

.col2 {width: 94%; float: left; padding: 3%;}
.col5 {width: 90%; float: left; padding: 5%;}
.col10 {width: 94%; float: left; padding: 3%;}

table {width: 100%; float: left; border-bottom: solid 1px #ecf0f1;}
td {width: 43%; float: left; padding: 3%;}
td:first-child {text-align: right; font-weight: 500; border-right: solid 1px #ecf0f1;}

form {width: 94%; float: left; padding: 3%;}
label {width: 100%; font-size: 1.2rem; color: #616161; float: left; margin-bottom: 4px; padding: 0px;}
input, select, textarea {width: 92%; height: 40px; background: none #fff; font-size: 1.4rem; font-family: "museo-sans",sans-serif; float: left; margin-bottom: 12px; padding: 0% 4%; outline: solid 1px #CFD8DC; border:none; border-radius: 0px; -webkit-appearance:none;}
select {width: 100%;}
textarea {height: auto; padding: 4%;}

form button {width: 100%; margin: 0px; padding: auto 0px;}
input:focus, select:focus, textarea:focus {outline: none; outline: solid 1px #2196F3;}
.half {width: 50%; float: left;}

/* ADMIN */
section.admin {width: 100%; margin: 0px; padding: 0px; overflow: scroll;}

table.admin {font-size: 1.0rem; border:none;}
table.admin th {background: #607D8B; color: #fff; padding: 10px; text-align: left;}
table.admin td {width: auto; float: none; padding: 10px;}
table.admin td:first-child {text-align: left; font-weight: 300; border: none;}
table.admin tr:nth-child(odd) {background: #f9f9f9;}
table.admin tr:hover {background: #80D8FF; cursor: pointer;}


/* DESKTOP SETTINGS */
@media screen and (min-width: 40em) {

	body {font-size: 1.4em; padding: 0px;}

	nav {position: relative; margin-bottom: 20px;}
	nav li {font-size: 1.4rem; font-weight: 300; line-height: 56px;}

	section {width: 75%;}
	
	header {width: 94%; height: 60px; font-size: 1.8rem; font-weight: 300; color: #757575; text-align: left; line-height: 60px; padding: 0px 3%;}
	
	aside {display: block; visibility: visible;  width: 23%; float: right; margin-left: 2%; padding: 0%;}
	aside h4 {font-size: 1.2rem; color: #90A4AE;}
	
	article {width: 90%; background: #fff; float: left; padding: 5%; margin-top: 5%; border-bottom: solid 2px #CFD8DC;}
	article:hover {border-bottom: solid 2px #2196F3;}
	
	footer {width: 100%; background: #37474F; font-weight: 100; float: left; margin-top: 80px; padding: 40px 0px;}
	footer p {width: 100%; float: left; color: #78909C; margin-top: 40px;}
	footer ul {width: 25%; float: left; font-size: 1.4rem; color: #fff; font-weight: 100; line-height: 3.2rem;}
	footer li {}
	footer h3 {font-size: 1.4rem; text-transform: uppercase; font-weight: 300; margin-bottom: 20px;}

	.copyright {}

	/* TYPOGRAPHY */
	h1, h2, h3, h4 {margin: 0px; padding: 0px;}
	h1 {font-size: 2.4rem; font-weight: 900;}
	h2 {font-size: 1.8rem;}
	h3 {font-size: 1.4rem;}
	h4 {font-size: 1.2rem; font-weight: 300; margin-bottom: 4px;}

	p {width: 100%; font-size: 1.4rem; line-height: 2rem; float: left;}

	form {width: 100%; float: left; margin: 0%; margin-top: 3%; padding: 0%;}
	input, select, textarea {font-size: 1.4rem;}

	/*
	table {width: 100%; float: left; border: none;}
	td {width: 43%; float: left; padding: 3%;}
	td:first-child {text-align: right; font-weight: 500;}
	td a {color: #2196F3; text-decoration: underline;}
	*/



	table {width: 100%; float: left; border-bottom: solid 1px #ecf0f1;}
	td {width: 43%; float: left; padding: 3%;}
	td:first-child {text-align: right; font-weight: 500; border-right: solid 1px #ecf0f1;}




	/* ADMIN */
	table.admin {font-size: 1.2rem; border:none;}

	
	/* IDS */
	#logo {width: 60px; height: 60px; background-image: url("../img/logo.png"); margin: 0%;}
	
	
	/* CLASSES */
	.wrapper {width: 100%; max-width: 1000px; margin: 0px auto;}

	/* Slideshow */
	.caption {width: auto; height: 50px; background: #263238; background: #ffd500; color: #263238; font-size: 1.6rem; line-height: 50px; float: left; margin: -25px 0px 0px 3%; padding: 0px;}
	span.price {width: 50px; height: 50px;}
	span.event {width: auto; height: 50px; float: left; text-align: center; padding: 0px 20px;}

	
	/* Event List */
	.event {width: 27.333333%; float: left; padding: 3%; border-bottom: none;}
	.event img {width: 100%; margin-bottom: 20px; padding: 0%;}
	.event .details {width: 100%; padding: 0%;}
	.event h3 {color: #455A64; margin: 2px 0px 6px;}
	.event h4 {color: #90A4AE;}
	.event p {font-size: 1rem; line-height: 1.2rem;}
	.event:hover {background: #F5F5F5;}

	.col2 {width: 12%; float: left; padding: 4%;}
	.col5 {width: 34%; float: left; padding: 8%;}


	/* Event Page */
	.event-name {width: 50%; height: 60px; font-size: 1.4rem; color: #2196F3; background: #fff; float: left; padding: 0px; line-height: 60px;}
	.event-date {width: 50%; height: 60px; font-size: 1.4rem; float: left; padding: 0px; text-align: center; line-height: 60px;}
	.event-description {width: 44%; text-align: left; margin: 0%; padding: 3%; border:none;}
	.event-details {width: 50%; float: left; margin: 0%; padding: 0%;}
	.event-price {width: 38%; float: left; color: #2196F3; text-align: center; padding: 6%; border-top: solid 1px #ecf0f1}
	.event-button {width: 44%; float: left; padding: 3%; border-top: solid 1px #ecf0f1}
	.event-reservation {width: 100%; background: #CFD8DC; text-align: center; float: left; padding-top: 4%;}

	
	/* Reservation Page */
	.status {display: block; visibility: visible; width: 29%; float: left; padding: 3%;}
	.status ol li {width: 100%; float: left; color: #BDBDBD; line-height: 2.8rem;}
	ol li.active {color: #212121; font-weight: 500;}

	.form {width: 58%; float: left; padding: 3%; border-left: solid 1px #ecf0f1;}

}