Mercurial > hg > fapweb

changeset 829:c2839190ca54

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Update example CSS files.
author Matti Hamalainen <ccr@tnsp.org>
date Tue, 25 Nov 2014 09:56:03 +0200
parents d9cd51966dcf
children 2708f7715a1c
files examples/css/admin.css examples/css/desktop.css examples/css/main.css examples/css/mobile.css examples/css/show.css
diffstat 5 files changed, 716 insertions(+), 462 deletions(-) [+]
line wrap: on
line diff
--- a/examples/css/admin.css	Tue Nov 25 09:55:43 2014 +0200
+++ b/examples/css/admin.css	Tue Nov 25 09:56:03 2014 +0200
@@ -26,35 +26,56 @@
 	outline: none;
 }
 
+
+/*
+ * Message and image preview boxes
+ */
 #messageBox {
 	position: absolute;
-	top: 0px;
-	bottom: 0px;
-	left: 0px;
-	right: 0px;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
 	z-index: 60;
 	display: none;
 }
 
-#messageBox div.messageBoxInner {
-	position: absolute;
-	top: 25%;
-	left: 10%;
-	height: auto;
-	min-width: 50%;
-	max-width: 80%;
-	z-index: 62;
-	background: black;
-	border: 2px solid green;
-	padding: 1.5em;
-	border-radius: 0.5em;
-}
-
 #messageBox div.messageBoxControls {
 	text-align: right;
 }
 
+#messageBox > div {
+	position: absolute;
+	z-index: 62;
+	padding: 0.5em;
+	border-radius: 0.5em;
+}
 
+#messageBox div.messageBoxInner {
+	top: 2em;
+	left: 2em;
+	min-width: 50%;
+	height: auto;
+	background: #080;
+	border: 2px solid black;
+	color: white;
+}
+
+#messageBox div.imageBoxInner {
+	top: 2em;
+	left: 2em;
+	background: #444;
+	border: 2px solid black;
+}
+
+#messageBox div.imageBoxInner img {
+	position: relative;
+}
+
+
+/*
+ * Administration popup box
+ */
 #adminPopup {
 	position: absolute;
 	top: 0px;
@@ -81,13 +102,15 @@
 }
 
 
-
+/*
+ * Page tabs / tab headers
+ */
 #tabHeadersCC {
 	position: relative;
 	top: 0.5em;
 	left: 0;
 	right: 0;
-	height: 2em;
+	height: 3em;
 	
 	z-index: 10;
 	margin: 0;
@@ -100,17 +123,23 @@
 	line-height: 2.7em;
 }
 
-div.tabHeadersSub a, #ctrlModeControls a {
+div.tabHeadersSub a, div.ctrlModeControls a {
 	z-index: 15;
 	text-decoration: none;
-	padding: 0.25em;
+	padding-left: 0.25em;
+	padding-right: 0.25em;
 	background: #060;
 	text-shadow: 2px 2px 1px rgba(0,0,0,0.4);
-	border-radius: 5pt;
+	border-radius: 0.2em;
+
+	display: inline-block;
+	margin-bottom: 0.2em;
+	min-width: 6em;
 }
 
 #tabHeadersCC a {
 	position: relative;
+	display: inline-block;
 	z-index: 15;
 	padding: 0.5em;
 	text-decoration: none;
@@ -120,7 +149,7 @@
 	border-top-right-radius: 0.2em;
 }
 
-#tabHeadersCC a:hover, div.tabHeadersSub a:hover, #ctrlModeControls a:hover {
+#tabHeadersCC a:hover, div.tabHeadersSub a:hover, div.ctrlModeControls a:hover {
 	background: #C8D286;
 }
 
@@ -190,12 +219,14 @@
 }
 
 
-
-#ctrlModeControls input[type="radio"] {
+/*
+ * Compo/infoscreen controls
+ */
+div.ctrlModeControls input[type="radio"] {
 	display: none;
 }
 
-#ctrlModeControls input[type="radio"] + label:before {
+div.ctrlModeControls input[type="radio"] + label:before {
 	content: "O";
 	display: inline-block;
 	color: green;
@@ -203,7 +234,7 @@
 	margin-right: 0.15em;
 }
 
-#ctrlModeControls input[type="radio"]:checked + label:before {
+div.ctrlModeControls input[type="radio"]:checked + label:before {
 	content: "X";
 	display: inline-block;
 	color: red;
@@ -211,13 +242,13 @@
 	font-size: 1.5em;
 }
 
-#ctrlModeControls input[type="radio"]:checked + label {
+div.ctrlModeControls input[type="radio"]:checked + label {
 	color: white;
 	font-weight: bold;
 }
 
 
-#ctrlModeControls, #ctrlSystemControls {
+div.ctrlModeControls, #ctrlSystemControls {
 	border: 2px solid green;
 	padding: 0.5em;
 	border-radius: 0.5em;
@@ -348,8 +379,7 @@
 	color: red;
 }
 
-
-table.attendees,table.entries,table.vote {
+table.attendees,table.vote {
 	width: 100%;
 }
 
@@ -380,7 +410,6 @@
 
 tr.rodd td {
 	background: #010;
-	border-radius: 2pt;
 }
 
 tr.reven td {
@@ -400,7 +429,7 @@
 	background: red;
 }
 
-div.compoInfo {
+div.compoItem, div.newsItem {
 	margin: 0;
 	padding: 1em;
 	border-top: 1px solid #0f0;
@@ -414,3 +443,82 @@
 tr.active td {
 	background: green;
 }
+
+
+
+/*
+ * Entries
+ */
+div.rodd {
+	background: #020;
+}
+
+div.reven {
+	background: #030;
+}
+
+div.active {
+	border: 1px solid #0f0;
+}
+
+div.deleteWarning {
+	background: red;
+}
+
+
+div.entryRow {
+	position: relative;
+	margin-top: 1em;
+	margin-bottom: 1em;
+	padding: 0.5em;
+	vertical-align: top;
+	border-radius: 0.2em;
+}
+
+div.entryCell {
+	display: inline-block;
+	vertical-align: top;
+	min-width: 15em;
+}
+
+
+/*
+ * Individual edit controls
+ */
+div.editControl {
+	vertical-align: top;
+	padding: 0.2em;
+}
+
+span.editControlTitle {
+	background: black;
+	display: block;
+	text-align: center;
+}
+
+
+/*
+ * Specific entry items
+ */
+div.entryShowID {
+	background: #800;
+ 	width: 2em;
+	min-width: 2em;
+	text-align: center;
+}
+
+div.entryActions {
+	position: absolute;
+	right: 0.2em;
+	bottom: 0.2em;
+
+	min-width: 1em;
+	width: auto;
+
+	vertical-align: bottom;	
+	text-align: right;
+
+	padding: 0.2em;
+	background: #050;
+	border-radius: 0.4em;
+}
--- a/examples/css/desktop.css	Tue Nov 25 09:55:43 2014 +0200
+++ b/examples/css/desktop.css	Tue Nov 25 09:56:03 2014 +0200
@@ -1,173 +1,143 @@
 body {
-	background: black url(../img/grid.png);
+	font-size: 16px;
 }
 
-div.logo, div.logo2 {
+div.logo {
 	background: url(../img/fap.png) no-repeat center;
-	height: 13em;
+	height: 300px;
 	display: block;
 }
 
 
 #header {
-	position: fixed;
-	top: 0em;
-	left: 0em;
-	right: 0em;
-	height: 4em;
-	margin: 0em;
-	padding: 0.25em;
-}
-
-
-#sponsors {
-	position: fixed;
-	top: auto;
-	bottom: 1em;
-	left: 0.5em;
-	right: 1em;
-	margin: 0em;
-	width: 8em;
-
-	text-align: center;
-}
-
+	font-size: 1.25em;
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	margin: 0;
+	padding: 0;
+	height: 4.2em;
 
-#menu {
-	position: fixed;
-	top: 12em;
-	left: 0.5em;
-	right: 1em;
-	min-height: 10em;
-	margin: 0em;
-	padding: 0.25em;
-	width: 8em;
-
+	background: black;
+	border-bottom: 4px dashed #ea0;
 	color: #0f0;
-	text-shadow: 0px 0px 3px #0f0;
-
-	background: rgba(0,0,0,0.6);
-	border-top: 2pt solid #0f0;
-	border-left: 2pt solid #0f0;
-	border-right: 2pt solid #060;
-	border-bottom: 2pt solid #060;
-
-	font-family: Impact;
-	font-size: 1.25em;
-
-	border-radius: 5pt;
-	box-shadow: 8px 8px 16px #000;
 }
 
 
-#menu div {
-	text-align: center;
-	font-size: 1.25em;
+#extra {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	margin: 0;
+	height: 3.5em;
+
+	background: black;
+	border-top: 4px dashed #ea0;
 }
 
-#menu a {
-	text-decoration: none;
-	padding: 5pt;
-	margin: 5pt;
-	background: rgba(0,50,0,0.7);
-
-	color: #0d0;
-	text-shadow: 0px 0px 3px #0f0;
-
-	border-top: 2pt solid #0f0;
-	border-left: 2pt solid #0f0;
-	border-right: 2pt solid #060;
-	border-bottom: 2pt solid #060;
-
-	text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
-
-	box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
-	border-top-right-radius: 10pt;
-	border-bottom-left-radius: 10pt;
-	display: block;
-
-	transition: all 0.3s;
+#extra > div {
+	margin: 0;
+	padding: 0.5em;
+	padding-bottom: 0em;
 }
 
-#menu a:hover {
-	background: rgba(0,50,0,0.4);
-	color: #fff;
-	box-shadow: 2px 2px 4px rgba(0,255,0,0.5) inset, -2px -2px 4px rgba(0,255,0,0.5) inset;
-	margin-left: 1pt;
-	margin-right: 1pt;
+#extra div.scenesat {
+	display: inline-block;
+	background: url(../img/scenesat.png) no-repeat center;
+	width: 180px;
+	height: 40px;
 }
 
 #infobox {
-	position: fixed;
-	top: 9.5em;
-	left: 11em;
-	min-width: 10em;
+	position: absolute;
+	top: 3em;
+	right: 3em;
+	min-width: 8em;
 
-	margin: 0em;
-	padding: 5pt;
+	margin: 0;
+	padding: 0.25em;
+	padding-left: 0.5em;
+	padding-right: 0.5em;
 
-	z-index: 15;
+	z-index: 10;
 
-	font-family: Impact;
-	font-size: 1.3em;
-	text-align: center;
+	font-size: 1.5em;
 	color: #0f0;
 	text-shadow: 0px 0px 3px #0f0;
 
-	background: rgba(0,0,0,0.6);
-	border-top: 2pt solid #0f0;
-	border-left: 2pt solid #0f0;
-	border-right: 2pt solid #060;
-	border-bottom: 2pt solid #060;
+	background: black;
+
+	border-bottom-right-radius: 0.3em;
+	border-bottom-left-radius: 0.3em;
 
-	border-radius: 5pt;
-	box-shadow: 8px 8px 16px #000;
+	text-align: left;
+	text-transform: uppercase;
+
+	transform: skewX(-10deg);
 }
 
-#date {
+#header div.date {
 	position: absolute;
-	right: 0.5em;
-	top: 1.5em;
-	
-	padding: 5pt;
+	top: 0;
+	right: 0;
+	width: 20em;
+	height: 4em;
 
-	background: rgba(0,0,0,0.6);
-	border-top: 2pt solid #0f0;
-	border-left: 2pt solid #0f0;
-	border-right: 2pt solid #060;
-	border-bottom: 2pt solid #060;
-
-	border-radius: 5pt;
-	box-shadow: 8px 8px 16px #000;
+	margin: 0.5em;
 
 	text-align: right;
 	color: white;
-	font-size: 1.2em;
-	font-family: Impact;
+	font-size: 0.75em;
 	text-shadow: 2px 2px 1px rgba(0,0,0,0.4);
 }
 
+#header div.date span {
+	margin: 0.5em;
+}
+
+#mainContent * div.date {
+	display: none;
+}
+
 #mainContent {
-	position: fixed;
-	left: 13em;
-	right: 1em;
-	top: 14em;
-	bottom: 1em;
-	padding: 1em;
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 3em;
+	bottom: 3.5em;
+	padding: 0em;
 	margin: 0em;
-	background: rgba(0,0,0,0.8);
 
-	border: 1pt solid #0f0;
-
-	box-shadow: 4px 4px 4px rgba(0,255,0,0.7), -4px -4px 4px rgba(0,255,0,0.7), 8px 8px 32px rgba(0,255,0,0.4) inset;
-
-	text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
-	border-radius: 8pt;
-	color: white;
+	color: black;
 }
 
-#mainContent > div, div.tabContents > div {
-	width: 100%;
-	height: 100%;
-	overflow-y: auto;
+#mainContentInner {
+	position: absolute;
+	left: 2em;
+	right: 2em;
+	top: 0em;
+	bottom: 0em;
+	border-left: 1px dashed black;
+	border-right: 1px dashed black;
 }
+
+#mainContentWrap, #tabContentsCC > div {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 2.5em;
+	bottom: 0.5em;
+	overflow-y: scroll;
+}
+
+
+div.compolist {
+	text-align: center;
+}
+
+div.compolist .compo {
+	white-space: nowrap;
+}
+
--- a/examples/css/main.css	Tue Nov 25 09:55:43 2014 +0200
+++ b/examples/css/main.css	Tue Nov 25 09:56:03 2014 +0200
@@ -1,13 +1,23 @@
+@font-face {
+	font-family: 'Oswald';
+	font-style: normal;
+	font-weight: 300;
+	src: local('Oswald Light'), local('Oswald-Light'), url(oswald.ttf) format('truetype');
+}
+
 html {
 	-webkit-backface-visibility: hidden;
 }
 
 body {
-	font-family: "Courier New", Courier, monospace;
-	font-size: 16px;
-	color: #0d0;
-	margin: 0em;
-	padding: 0em;
+	font-family: 'Oswald', sans-serif;
+	background: #ea0;
+	margin: 0;
+	padding: 0;
+}
+
+li {
+	margin-top: 0.5em;
 }
 
 img {
@@ -16,71 +26,73 @@
 
 a:hover {
 	text-decoration: underline;
+	text-shadow: 2px 2px 3px black;
 }
 
-a:active {
+a:active, a:focus {
 	outline: none;
 }
 
-a:focus {
-	outline-style: none;
-}
-
 a, a:visited, a:active {
 	text-decoration: underline;
+	text-shadow: 1px 1px 1px black;
 	color: white;
 }
 
-#contents {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-}
-
-#header h1 {
-	margin: 0em;
-}
-
 #mainContent h1, #mainContent h2 {
 	margin: 0em;
 	margin-top: 1em;
-	padding: 2pt;
+	padding: 0.1em;
 	padding-left: 1em;
-	background: rgba(0,255,0,0.3);
-	border-bottom: 2px solid rgba(0,0,0,0.2);
-	border-radius: 8pt;
+	background: #d90;
+	border-top: 2px solid #a70;
+	border-bottom: 2px solid #fda;
 }
 
 
 #mainContent h1 {
 	margin: 0em;
+	background: #505;
+	color: white;
 }
 
 
-div.newsitem {
+/*
+ * News
+ */
+div.newsItem {
 }
 
 
-div.newsitem div.text {
+div.newsText {
 	margin-top: 0.5em;
 	margin-left: 1.5em;
 	margin-right: 1.5em;
-	padding-bottom: 1em;
-	border-bottom: 1px dotted white;
+	margin-bottom: 0.25em;
+	border-bottom: 1px dotted black;
 }
 
-div.newsitem div.sig {
-	padding: 5pt;
-	font-family: Impact;
+div.newsAuthor {
+	padding-left: 0.5em;
+	padding-right: 0.5em;
 	text-align: right;
 }
 
+span.newsSig {
+	display: none;
+}
+
+span.newsDate {
+	margin-left: 1em;
+}
+
 
 
-
-table.attendees,table.misc,table.vote {
+/*
+ * Attendees
+ */
+table.attendees, table.vote {
 	width: 100%;
-	font-size: 1em;
 }
 
 table td, table th {
@@ -89,7 +101,7 @@
 }
 
 table th {
-	background: rgba(0,255,0,0.25);
+	background: #a04;
 }
 
 table.attendees .regtime {
@@ -108,37 +120,308 @@
 	width: 15%;
 }
 
+table.attendees th.rname {
+	width: 15%;
+}
+
 tr.rodd td {
-	background: rgba(0,255,0,0.05);
+	background: #d70;
 	border-radius: 2pt;
 }
 
 tr.reven td {
-	background: rgba(0,255,0,0.15);
+	background: #c60;
+}
+
+
+/*
+ * Voting
+ */
+div.voteControls {
+	text-align: center;
+	padding: 1em;
 }
 
-table.misc, table.vote {
+div.voteLogin {
+	padding: 1em;
+}
+
+table.vote th {
+	color: white;
+	text-shadow: 2px 2px 1px black;
+	font-size: 1.1em;
+}
+
+table.vote {
 	padding-top: 1em;
 }
 
-table.misc tr:hover td, table.vote tr:hover td {
+table.vote tr:hover td {
+	border: 2px dashed black;
+	transition: all 0.3s;
+}
+
+table.vote tr td {
+	border: 2px solid rgba(0,0,0,0);
+	transition: all 0.3s;
+}
+
+table.vote th.vvalue {
+	width: 1%;
+	min-width: 2.5em;
+}
+
+table.vote td.vvalue {
+	text-align: center;
+}
+
+table.vote td.vshown {
+	text-align: center;
+	width: 3em;
+}
+
+table.vote th.vcompo {
+	font-size: 1.25em;
+}
+
+table.vote td.ventry {
+	font-size: 1.1em;
+	padding: 0.2em;
+}
+
+div.vpreview {
+	display: inline-block;
+	vertical-align: middle;
+}
+
+div.vinfo {
+	padding-left: 1em;
+	padding-right: 1em;
+}
+
+img.imagePreview {
+	border: 2px solid black;
+}
+
+
+div.vinfo {
+	display: inline-block;
+}
+
+div.vinfo span.vtitle, div.vinfo span.vauthor {
+	font-size: 1.1em;
+	font-weight: bold;
+}
+
+div.vinfo span.vby {
+	margin-left: 1em;
+	margin-right: 1em;
+}
+
+
+table.vote * input[type="radio"] {
+	display: none;
+}
+
+table.vote * input[type="radio"] + label:before {
+	content: "\0000a0";
+	display: inline-block;
+	color: black;
+	font-size: 2em;
+	background: black;
+	width: 100%;
+}
+
+table.vote * input[type="radio"]:checked + label:before {
+	content: "X";
+	display: inline-block;
+	color: #0f0;
+	font-weight: bold;
+	font-size: 2em;
+}
+
+
+/*
+ * Generic controls
+ */
+input[type="submit"] {
+	background: #ec0;
+	border: 1px solid #fe0;
+
+	margin: 0.5em;
+	padding: 0.5em;
+	border-radius: 0.3em;
+	box-shadow: 0px 0px 6px #000;
+}
+
+input[type="submit"]:hover {
+	background: #0c0;
+	border: 1px solid #0f0;
+}
+
+
+/*
+ * Main menu
+ */
+#menu {
+	z-index: 15;
+	position: absolute;
+	top: 0;
+	left: 0.5em;
+	right: 15em;
+
+	transform: skewX(-10deg);
+	vertical-align: top;
+}
+
+#menuLogo {
+	position: relative;
+	display: inline-block;
+	font-size: 2.3em;
+	padding-left: 0.5em;
+	padding-right: 0.5em;
+	text-align: center;
+	background: #040;
+
+	text-shadow: 0px 0px 6px #0f0, -1px -1px 6px #0f0, 1px 1px 6px #0f0;
+
+	border-bottom-right-radius: 0.2em;
+	border-bottom-left-radius: 0.2em;
+}
+
+
+#menuInner {
+	position: absolute;
+	display: inline-block;
+	top: 0;
+	left: 9em;
+	right: 0;
+	height: auto;
+	
+	vertical-align: top;
+
+	font-size: 1.15em;
+	text-shadow: 0px 0px 3px #0f0;
+}
+
+#menuInner a {
+	display: inline-block;
+	vertical-align: top;
+	width: 4em;
+	margin: 0;
+	padding: 0.1em;
+
+	text-decoration: none;
+	background: #960C85;
+	color: #fff;
+
+	text-shadow: 0px 0px 1px #ccc;
+	border-bottom: 2px solid #760C55;
+	border-right: 2px solid #760C55;
+	border-left: 1px solid #760C55;
+
+	border-bottom-right-radius: 0.2em;
+	border-bottom-left-radius: 0.2em;
+
+	transition: all 0.2s;
+}
+
+#menuInner a:hover {
+	background: #5F004F;
+	color: #fff;
+	text-shadow: 0px 0px 3px #fff;
+	border-bottom: 2px solid #460C25;
+	border-right: 2px solid #460C25;
+	border-left: 1px solid #460C25;
+}
+
+#menuInner a.active {
+	background: #f6850C;
+	border-bottom: 2px solid #d6650c;
+	border-right: 2px solid #d6650c;
+	border-left: 1px solid #d6650c;
+}
+
+#menuInner a.active:hover {
+	background: #b6450c;
+	color: #fff;
+	text-shadow: 0px 0px 3px #fff;
+	border-bottom: 2px solid #460C25;
+	border-right: 2px solid #460C25;
+	border-left: 1px solid #460C25;
+}
+
+
+/*
+ * Message and image preview boxes
+ */
+#messageBox {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 60;
+	display: none;
+}
+
+#messageBox div.messageBoxControls {
+	text-align: right;
+}
+
+#messageBox > div {
+	position: absolute;
+	z-index: 62;
+	padding: 0.5em;
+	border-radius: 0.5em;
+}
+
+#messageBox div.messageBoxInner {
+	top: 2em;
+	left: 2em;
+	min-width: 50%;
+	height: auto;
+	background: #080;
+	border: 2px solid black;
 	color: white;
 }
 
+#messageBox div.imageBoxInner {
+	top: 2em;
+	left: 2em;
+	background: #444;
+	border: 2px solid black;
+}
+
+#messageBox div.imageBoxInner img {
+	position: relative;
+}
+
+
+/*
+ * Miscellaneous
+ */
 div.reglink {
 	text-align: center;
 	padding: 0.5em;
 	font-size: 1.25em;
 	color: red;
-	border: 2pt solid rgba(0,0,0,0.35);
-	margin: 5pt;
-	border-radius: 8pt;
+	border: 0.2em solid black;
+	background: #fc0;
+	margin: 0.5em;
+	border-radius: 0.5em;
+	text-shadow: 1px 1px 1px black;
 }
 
 .notice {
 	color: red;
+	text-shadow: 1px 1px 1px #000;
+	font-size: 1.25em;
+}
+
+div.notice {
 	text-align: center;
-	font-size: 1.25em;
+	padding: 1em;
 }
 
 .quote {
@@ -151,79 +434,8 @@
 	color: red;
 }
 
-table.vote th.vvalue {
-	width: 1%;
-	min-width: 2.5em;
-}
-
-table.vote td.vvalue {
-	text-align: center;
-}
-
-table.attendees th.rname {
-	width: 15%;
-}
-
-
-div.votectrl {
+div.moreNews {
 	padding: 1em;
-}
-
-
-.mblink {
-	animation: mblink 1s steps(5, start) infinite;
-}
-
-@keyframes mblink {
-	to {
-		visibility: hidden;
-	}
-}
-
-
-table.vote * input[type="radio"] {
-	display: none;
-}
-
-table.vote * input[type="radio"] + label:before {
-	content: "O";
-	display: inline-block;
-	color: green;
-	font-size: 2em;
-}
-
-table.vote * input[type="radio"]:checked + label:before {
-	content: "X";
-	display: inline-block;
-	color: red;
-	font-weight: bold;
-	font-size: 2em;
-}
-
-#messageBox {
-	position: absolute;
-	top: 0px;
-	bottom: 0px;
-	left: 0px;
-	right: 0px;
-	z-index: 60;
-	display: none;
-}
-
-#messageBox div.messageBoxInner {
-	position: absolute;
-	top: 25%;
-	left: 10%;
-	height: auto;
-	min-width: 50%;
-	max-width: 80%;
-	z-index: 62;
-	background: black;
-	border: 1px solid green;
-	padding: 1.5em;
-	border-radius: 1em;
-}
-
-#messageBox div.messageBoxControls {
+	font-size: 1.5em;
 	text-align: right;
 }
--- a/examples/css/mobile.css	Tue Nov 25 09:55:43 2014 +0200
+++ b/examples/css/mobile.css	Tue Nov 25 09:56:03 2014 +0200
@@ -1,197 +1,110 @@
 body {
-	background: black url(../img/gridsm.png);
 	font-size: 12px;
+	background: black;
+}
+
+#contents {
+	background: #ea0;
 }
 
 div.logo {
-	display: none;
-}
-
-div.logo2 {
 	background: url(../img/fapsm.png) no-repeat center;
-	height: 10em;
+	height: 112px;
 	display: block;
 }
 
 
 #header {
-	display: none;
-}
-
-#menu {
-	color: #0f0;
-	text-shadow: 0px 0px 3px #0f0;
-
-	background: rgba(0,0,0,0.6);
-	border-top: 2pt solid #0f0;
-	border-left: 2pt solid #0f0;
-	border-right: 2pt solid #060;
-	border-bottom: 2pt solid #060;
+	position: relative;
+	top: 0;
+	left: 0;
+	right: 0;
+	margin: 0;
+	padding: 0;
+	height: 4em;
 
-	font-family: Impact;
-	font-size: 0.75em;
-
-	border-radius: 5pt;
-	box-shadow: 8px 8px 16px #000;
-
-	text-align: center;
-}
-
-
-#menu div {
-	display: none;
+	background: black;
+	border-bottom: 4px dashed #ea0;
+	color: #0f0;
+	z-index: 10;
 }
 
 
-#menu a {
-	float: none;
-	display: inline;
-	text-decoration: none;
-	padding: 5pt;
-	
-	background: rgba(0,50,0,0.7);
-
-	color: #0d0;
-	text-shadow: 0px 0px 3px #0f0;
-
-	border-top: 2pt solid #0f0;
-	border-left: 2pt solid #0f0;
-	border-right: 2pt solid #060;
-	border-bottom: 2pt solid #060;
-
-	text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
-
-	box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
-	border-top-right-radius: 10pt;
-	border-bottom-left-radius: 10pt;
-
-	transition: all 0.3s;
+#menu {
+	top: 0;
+	left: 0.5em;
+	right: 0.5em;
 }
 
-#menu a:hover {
-	background: rgba(0,50,0,0.4);
-	color: #fff;
-	box-shadow: 2px 2px 4px rgba(0,255,0,0.5) inset, -2px -2px 4px rgba(0,255,0,0.5) inset;
+#extra {
+	height: 2.5em;
+	background: black;
+
+	border-top: 4px dashed #ea0;
+}
+
+#extra > div {
+	margin: 0;
+	padding: 0.5em;
+	padding-bottom: 0em;
+}
+
+#extra div.scenesat {
+	display: inline-block;
+	background: url(../img/scenesatsm.png) no-repeat center;
+	width: 80px;
+	height: 20px;
 }
 
 #infobox {
-	position: fixed;
-	z-index: 15;
-
-	margin: 0em;
-	padding: 3pt;
-	min-width: 10em;
+	display: none;
+}
 
-	font-family: Impact;
-	font-size: 1em;
-	text-align: center;
-	color: #0f0;
-	text-shadow: 0px 0px 3px #0f0;
-
-	background: rgba(0,0,0,0.6);
-	border-top: 2pt solid #0f0;
-	border-left: 2pt solid #0f0;
-	border-right: 2pt solid #060;
-	border-bottom: 2pt solid #060;
-
-	border-radius: 5pt;
-	box-shadow: 8px 8px 16px #000;
+#header div.date {
+	display: none;
 }
 
 #mainContent {
-	background: rgba(0,0,0,0.8);
-
-	border: 1pt solid #0f0;
+	z-index: 0;
+	color: black;
+}
 
-	box-shadow: 4px 4px 4px rgba(0,255,0,0.7), -4px -4px 4px rgba(0,255,0,0.7), 8px 8px 16px rgba(0,255,0,0.4) inset;
-
-	text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
-	border-radius: 8pt;
-	color: white;
+#mainContentWrap {
+	padding-top: 1em;
 }
 
+#mainContent * div.date {
+	padding-top: 0.5em;
+	padding-bottom: 0.5em;
+	color: white;
+	background: #606;
+	text-align: center;
+}
+
+#mainContent * div.date span {
+	margin: 0.5em;
+}
 
 @media only screen and (orientation: landscape), only screen and (min-width: 640px), only screen and (min-device-width: 640px) {
-	#menu {
-		top: 0em;
-		min-width: 25em;
-
-		margin-left:auto;
-		margin-right:auto;
-		padding: 0.25em;
-
-		line-height: 3.2em;
+	#header {
+		height: 4.5em;
 	}
-
-	#infobox {
-		top: 4em;
-		right: 3em;
-	}
-
-	#date {
-		display: none;
-	}
-
-	#mainContent {
-		position: absolute;
-		top: 5em;
-		left: 1em;
-		right: 1em;
-		bottom: 1em;
-		padding: 1em;
+	#menuInner {
+		font-size: 1.2em;
 	}
 }
 
 
 @media only screen and (orientation: portrait) {
-	#menu {
-		top: 0em;
-		height: 6.5em;
-		min-width: 25em;
-		max-width: 25em;
-
-		margin-left:auto;
-		margin-right:auto;
-		padding: 0.25em;
-
-		line-height: 3.2em;
-	}
-
-	#infobox {
-		top: 8em;
-		right: 3em;
+	#menuLogo {
+		font-size: 1.8em;
 	}
-
-	#date {
-		display: none;
+	#menuInner {
+		left: 8.5em;
+		font-size: 1.1em;
 	}
-
-	#mainContent {
-		position: absolute;
-		top: 9em;
-		left: 1em;
-		right: 1em;
-		bottom: 1em;
-		padding: 1em;
-	}
-}
-
-#mainContent > div {
-	width: 100%;
-	height: 100%;
-	overflow-y: auto;
 }
 
 table.attendees .regtime {
 	display: none;
 }
-
-
-table.register, table.register input {
-	font-size: 0.4em;
-}
-
-
-#sponsors {
-	display: none;
-}
--- a/examples/css/show.css	Tue Nov 25 09:55:43 2014 +0200
+++ b/examples/css/show.css	Tue Nov 25 09:56:03 2014 +0200
@@ -1,40 +1,80 @@
-div.showView {
-	position: absolute;
-	top: 2em;
-	bottom: 2em;
-	left: 2em;
-	right: 2em;
-	
-	background: rgba(0,0,0,0.5);
-	border-radius: 2em;
-	border: 5pt dashed rgba(0,255,0,0.7);
+@font-face {
+	font-family: 'Oswald';
+	font-style: normal;
+	font-weight: 300;
+	src: local('Oswald Light'), local('Oswald-Light'), url(oswald.ttf) format('truetype');
 }
 
-div.showHeader, div.compoHeader {
-	padding: 1em;
-	z-index: 0;
-	text-align: center;
-	color: #0f0;
+html {
+	-webkit-backface-visibility: hidden;
 }
 
-div.showHeader .compoTitle, div.compoHeader .compoTitle {
-	font-size: 3em;
-}
-
-div.showText {
-	z-index: 5;
-	color: #0f0;
-	font-size: 2.5em;
-	text-align: center;
+body {
+	font-family: 'Oswald', sans-serif;
+	font-size: 12px;
+	background: #ea0;
+	color: #000;
+	margin: 0;
+	padding: 0;
 }
 
 h1 {
 	font-size: 1.5em;
 	color: white;
+	text-shadow: 2px 2px 4px #000;
 }
 
 h2 {
-	font-size: 1em;
+	font-size: 1.15em;
+	color: white;
+	text-shadow: 2px 2px 4px #000;
+}
+
+
+/*
+ *
+ */
+div.showView {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+}
+
+div.showHeader, div.compoHeader {
+	padding-top: 1em;
+	padding-bottom: 1em;
+	z-index: 0;
+	text-align: center;
+	color: white;
+	background: black;
+}
+
+div.showHeader {
+	background: url(../img/fapsm.png) no-repeat center black;
+	height: 112px;
+	display: block;
+}
+
+div.compoHeaderDiv {
+	background: url(../img/fapsm.png) no-repeat center;
+	height: 112px;
+	display: block;
+}
+
+div.showText {
+	z-index: 5;
+	font-size: 2.5em;
+	text-align: center;
+}
+
+
+/*
+ * Compo mode
+ */
+div.showHeader .compoTitle, div.compoHeader .compoTitle {
+	font-size: 3em;
 }
 
 div.compoNext {
@@ -100,11 +140,11 @@
 	min-width: 30%;
 	max-width: 50%;
 	color: #0f0;
-	font-size: 16pt;
+	font-size: 1em;
 	font-weight: bold;
 
-	padding: 10pt;
-	border-radius: 10pt;
+	padding: 0.2em;
+	border-radius: 0.2em;
 	box-shadow: 2px 2px 4px rgba(0,255,0,0.5) inset, -2px -2px 4px rgba(0,255,0,0.5) inset;
 
 	background: black;
@@ -117,7 +157,18 @@
 	text-align: left;
 }
 
+div.compoStarting {
+	text-align: center;
+	vertical-align: middle;
+	font-size: 5em;
+	color: white;
+	text-shadow: 2px 2px 4px black;
+}
 
+
+/*
+ * Misc, error states
+ */
 div.guru {
 	margin: 2em;
 	padding: 2em;