# HG changeset patch
# User Matti Hamalainen <ccr@tnsp.org>
# Date 1380861004 -10800
# Node ID fd87dc1c64d7b4d5ff4fdc2dd1998a4a199236de
# Parent  8c3d425c0560ce557f43989a07ffd91113ca904a
Work on design.

diff -r 8c3d425c0560 -r fd87dc1c64d7 fap.css
--- a/fap.css	Fri Oct 04 07:29:40 2013 +0300
+++ b/fap.css	Fri Oct 04 07:30:04 2013 +0300
@@ -1,14 +1,21 @@
+/*
+	http://colorschemedesigner.com/#0351ZuJm6iKUB
+*/
+
 html {
 	-webkit-backface-visibility: hidden;
 }
 
 body {
+/*
 	font-family: Verdana, Arial, helvetica, sans-serif;
+*/
+	font-family: monospace;
 	font-size: 12pt;
-	color: white;
+	color: black;
 	margin: 0px;
 	padding: 0px;
-	background: #999F73 url(img/kulli.png) no-repeat -3em 100% fixed;
+	background: black url(img/grid.jpg);
 }
 
 img {
@@ -36,17 +43,6 @@
 	position: absolute;
 	width: 100%;
 	height: 100%;
-	background: url(img/runkkari2.png) no-repeat 101% 102%;
-}
-
-#headerbox {
-	position: fixed;
-	top: 2em;
-	left: 0px;
-	right: 0px;
-	height: 10em;
-	padding: 0px;
-	margin: 0px;
 }
 
 #header h1 {
@@ -54,17 +50,23 @@
 }
 
 #header {
-	border-top: 3pt solid rgba(255,255,255,0.25);
-	border-bottom: 3pt solid #595F23;
+	position: fixed;
+	top: 0em;
+	left: 0em;
+	right: 0em;
+	height: 4em;
 	margin: 0px;
+	padding: 0.25em;
+
+	color: white;
+
 	font-family: Impact;
 	font-size: 20pt;
-	background: rgba(0,0,0,0.45);
-	padding: 0.25em;
 	text-align: center;
-	background: #7D8A2D url(img/runkkari.png) no-repeat 1em 2em;
 	text-shadow: 2px 2px 1px rgba(0,0,0,0.4);
-	box-shadow: 0px 4px 4px rgba(0,0,0,0.7);
+
+	border-radius: 5pt;
+	border: 5pt dashed rgba(0,0,0,0.2);
 }
 
 .logo {
@@ -72,25 +74,53 @@
 }
 
 #menu {
-	font-family: Impact;
+	position: fixed;
+	top: 10em;
+	left: 0.5em;
+	right: 1em;
+	height: 10em;
 	margin: 0px;
-	margin-left: 2em;
 	padding: 5pt;
+	width: 8em;
+
+	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: 15pt;
+
+	border-radius: 5pt;
+	box-shadow: 2px 4px 4px rgba(0,0,0,0.7);
 }
 
 #menu a {
 	text-decoration: none;
 	padding: 5pt;
 	margin: 5pt;
-	background: #595F23;
-	text-shadow: 2px 2px 1px rgba(0,0,0,0.4);
-	box-shadow: 4px 4px 4px rgba(0,0,0,0.7);
+	background: rgba(0,50,0,0.7);
+	color: #0d0;
+
+	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: 5pt;
 	border-bottom-left-radius: 5pt;
-	border-bottom-right-radius: 5pt;
+	display: block;
 }
 
 #menu a:hover {
-	background: #C8D286;
+	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;
 }
 
 #date {
@@ -99,21 +129,37 @@
 	position: absolute;
 	right: 0.5em;
 	top: 0.5em;
+	
+	padding: 5pt;
+
+	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: 2px 4px 4px rgba(0,0,0,0.7);
 }
 
 #maincontent {
 	position: fixed;
-	left: 10%;
-	right: 10%;
-	top: 13em;
-	bottom: 2em;
-	padding: 5pt;
+	left: 13em;
+	right: 1em;
+	top: 12em;
+	bottom: 1em;
+	padding: 1em;
 	margin: 0px;
-	background: rgba(0,0,0,0.15);
+	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: 5pt solid rgba(0,0,0,0.15);
 	-moz-border-radius: 8pt;
 	border-radius: 8pt;
+	color: white;
 }
 
 #maincontent > div {
@@ -127,8 +173,8 @@
 	margin-top: 1em;
 	padding: 2pt;
 	padding-left: 1em;
-	background: rgba(0,0,0,0.35);
-	border-bottom: 2px solid rgba(0,0,0,0.55);
+	background: rgba(0,255,0,0.3);
+	border-bottom: 2px solid rgba(0,0,0,0.2);
 	-moz-border-radius: 8pt;
 	border-radius: 8pt;
 }
@@ -204,6 +250,11 @@
 	font-size: 15pt;
 }
 
+.quote {
+	font-size: 20pt;
+	color: #0f0;
+	text-shadow: 2px 2px 3px #0f0;
+}
 
 .overbooked {
 	color: red;
diff -r 8c3d425c0560 -r fd87dc1c64d7 img/fap.png
Binary file img/fap.png has changed
diff -r 8c3d425c0560 -r fd87dc1c64d7 img/fapsm.png
Binary file img/fapsm.png has changed