adding dates to pick from

style/_big_screen.scss

@@ -4,4 +4,8 @@
 		min-width: 40.5em;
 		margin: 0px auto;
 	}
+	
+	#ugc_dates {
+		display:none;
+	}
 }

style/_small_screen.scss

@@ -1,4 +1,13 @@
 @media (max-width: 40.5em) {
+
+	header #nav {
+		font-size:2.5em;
+	}
+	
+	#ugc_days {
+		display:none;
+	}
+	
 	#buffer {
 		width: 6em;
 		height: 6em;
@@ -6,4 +15,5 @@
 	#buffer .fa {
 		font-size:6em;
 	}
+
 }

style/ugc.scss

@@ -35,9 +35,26 @@ h2 {
 	font-size:1.7em;
 }
 
+select {
+	border:none;
+	background:transparent;
+	z-index:1;
+	color:#666;
+}
+
+select option {
+	padding-right:1.5em;
+}
+
+select + .fa-down {
+	margin-left:-1em;
+	z-index:-1;
+	color:#666;	
+}
+
 /* Common Classes */
 
-.fa-icon {
+.inline {
 	margin-right:0.5em;
 }
 
@@ -48,13 +65,21 @@ h2 {
 	border-radius:3px;
 	cursor: pointer;
 }
-.button:hover {
+.button:hover, .button.clicked {
 	background:#08288B;
 	color:white;
 }
 .button.square {
 	padding:0.2em;
 }
+.button.no_bg {
+	background:inherit;
+	color:#666;
+}
+.button.no_bg:hover, .button.no_bg.clicked {
+	background:inherit;
+	color:#08288B;
+}
 
 /* Font Awesome Classes */
 
@@ -64,6 +89,10 @@ h2 {
 .fa-trailer:before {
 	content: "\f144";
 }
+.fa-spinner {
+	color:#08288B;
+	font-size:2em;
+}
 .fa-spinner:before {
 	content: "\f110";	
 }
@@ -88,6 +117,9 @@ h2 {
 .fa-ok:before {
 	content: "\f00c";
 }
+.fa-down:before {
+	content: "\f0d7";
+}
 
 /* Sections */
 
@@ -95,13 +127,32 @@ h2 {
 
 header {
 	margin:0;
-	visibility:hidden;
 	text-align: center;
-	color:#08288B;
+}
+
+header #nav {
+	text-align:left;
 	position: relative;
+	margin-bottom: 0.7em;
+}
+
+/*
+header #nav .day:FIRST-CHILD {
+	padding-left: 0px;
+}
+*/
+
+header #nav #btn_settings {
+	font-size:1.5em;
+	margin: 0;
+	padding: 0 0.25em 0 0;
+	position: absolute;
+	right: 0;
+	top: 0;
 }
 
 header .title {
+	color:#08288B;
 	display:inline-block;
 	padding-left:113px;
 	background:url(../images/logo_ugc.png) 0 50% no-repeat;
@@ -113,19 +164,6 @@ header .title time {
 	padding:1.5em 0 1.5em 0.75em;
 }
 
-header #btn_settings {
-	position: absolute;
-	top:0;
-	right:0;
-	font-size:1.5em;
-	cursor: pointer;
-}
-header #btn_settings:hover {
-	font-size: 2em;
-	top:-0.1em;
-	right:-0.1em;
-}
-
 /* Section - Main */
 
 main {
@@ -142,11 +180,6 @@ main {
 	height: 2em;
 	margin: auto;
 	padding: 0px;
-	color:#08288B;
-}
-
-#buffer .fa {
-	font-size:2em;
 }
 
 /* Section - Film */
@@ -162,7 +195,7 @@ main {
 }
 
 .film:nth-child(even) {
-
+	
 }
 
 .film img.bg {
@@ -240,7 +273,6 @@ main {
 	padding:1em;
 	font-size:0.6em;
 	margin-bottom: 1em;
-	display:none;
 	color:#999;
 }
 
@@ -256,12 +288,23 @@ main {
 footer {
 	font-size: 0.8em;
 	margin: 1em 0 0 0;
-	display: none;
 	color:#08288B;
 }
 
 /* Section - Settings */
 
+.background {
+	display:none;
+	position:absolute;
+	top:0;
+	bottom:0;
+	left:0;
+	right:0;
+	z-index: 3;
+	background:white;
+	opacity:0.5;
+}
+
 #settings {
 	display:none;
 	position:absolute;
@@ -274,7 +317,7 @@ footer {
 	-webkit-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
 	-moz-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
 	box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
-	z-index: 3;
+	z-index: 4;
 }
 
 #settings h1 {
@@ -286,6 +329,11 @@ footer {
 	right:0;
 }
 
+#settings #buffer_settings {
+	text-align:center;
+	margin:2em auto;
+}
+
 #settings ul.cinemas {
 	-webkit-column-count: 2;
 	-moz-column-count: 2;
@@ -294,6 +342,7 @@ footer {
 	padding:0;
 	margin:0;
 }
+
 #settings ul.cinemas li {
 	cursor: pointer;
 }