settings: cinemas picker

style/ugc.scss

@@ -26,7 +26,13 @@ a:hover {
 }
 
 h1 {
-	margin:0 0 1em 0; 
+	color:#08288B;
+	margin:0 0 0.8em 0;
+}
+
+h2 {
+	margin:0 0 1em 0;
+	font-size:1.7em;
 }
 
 /* Common Classes */
@@ -35,6 +41,21 @@ h1 {
 	margin-right:0.5em;
 }
 
+.button {
+	background:#666;
+	color:white;
+	padding:0.1em 0.4em;
+	border-radius:3px;
+	cursor: pointer;
+}
+.button:hover {
+	background:#08288B;
+	color:white;
+}
+.button.square {
+	padding:0.2em;
+}
+
 /* Font Awesome Classes */
 
 .fa-film:before {
@@ -61,6 +82,12 @@ h1 {
 .fa-feedback:before {
 	content: "\f0b0";	
 }
+.fa-settings:before {
+	content: "\f013";
+}
+.fa-ok:before {
+	content: "\f00c";
+}
 
 /* Sections */
 
@@ -70,6 +97,8 @@ header {
 	margin:0;
 	visibility:hidden;
 	text-align: center;
+	color:#08288B;
+	position: relative;
 }
 
 header .title {
@@ -81,10 +110,22 @@ header .title {
 header .title time {
 	display:inline-block;
 	font-size: 2em;
-	color:#08288B;
 	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 {
@@ -132,7 +173,7 @@ main {
 	right:0;
 	bottom:0;
 	width:calc(100% - 152px);
-	opacity:0.25;
+	opacity:0.2;
 }
 
 .film img.poster {
@@ -192,16 +233,6 @@ main {
 	margin-right:0.5em;
 }
 
-.film .timetable .time {
-	background:#666;
-	color:white;
-	padding:0.1em 0.4em;
-	border-radius:3px;
-}
-.film .timetable .time:hover {
-	background:#08288B;
-}
-
 /* Section - Feeback */
 
 #feedback {
@@ -229,6 +260,47 @@ footer {
 	color:#08288B;
 }
 
+/* Section - Settings */
+
+#settings {
+	display:none;
+	position:absolute;
+	top:0;
+	left:0;
+	right:0;
+	margin:1em;
+	padding:1em;
+	background:white;
+	-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;
+}
+
+#settings h1 {
+	position:relative;
+}
+
+#settings h1 .button {
+	position:absolute;
+	right:0;
+}
+
+#settings ul.cinemas {
+	-webkit-column-count: 2;
+	-moz-column-count: 2;
+	column-count: 2;
+	list-style: none;
+	padding:0;
+	margin:0;
+}
+#settings ul.cinemas li {
+	cursor: pointer;
+}
+#settings ul.cinemas li.include {
+	font-weight: bold;
+}
+
 /* Mobile Support */
 
 @import 'small_screen';