[Performous-commit] Lasse Karkkainen : WIP new theme (bluestyle)

[Lasse Kärkkäi. <tr...@us...>]

Module: web
Branch: master
Commit: fe0b15c61f8a3454894c786b7fe0a8fba443ea80

Author: Lasse Karkkainen <tro...@tr...>
Date:   Sun Dec  5 01:59:34 2010 +0100

WIP new theme (bluestyle)

---

 htdocs-binary/style.css |  189 ++++++++++++++++++++++++++---------------------
 htdocs-source/Model.htm |   21 +++--
 2 files changed, 116 insertions(+), 94 deletions(-)

diff --git a/htdocs-binary/style.css b/htdocs-binary/style.css
index 3ce1b8a..edcced3 100644
--- a/htdocs-binary/style.css
+++ b/htdocs-binary/style.css
@@ -2,9 +2,90 @@ body {
     background: #448;
     font-family: Verdana, Sans-Serif, sans;
     font-size: 13px;
-    line-height: 150%;
+    line-height: 140%;
+    overflow: scroll;
+    overflow-x: hidden;
+    color: #ddd;
 }
 
+/* banner */
+#title {
+    height: 80px;
+    padding-left: 65px;
+}
+#sitebox {
+    width: 850px;
+    margin: 40px auto 40px auto;
+    margin: 0 auto;
+    border: 0;
+    padding: 0;
+}
+/* page */
+#page {
+	min-height: 600px;
+    background-color: rgba(255,255,255,0.3);
+    box-shadow: 5px 20px 50px rgba(0, 0, 0, 0.4);
+    -webkit-box-shadow: 5px 20px 50px rgba(0, 0, 0, 0.4);
+    -moz-box-shadow: 5px 20px 50px rgba(0, 0, 0, 0.4);
+    padding: 10px;
+    border-radius: 10px;
+}
+/* main column */
+#main {
+	position: relative;
+    border-radius: 10px;
+    background: #448;
+    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.4);
+    -webkit-box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.4);
+    -moz-box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.4);
+    margin: 20px;
+    margin-left: 145px;
+    margin-top: 60px;
+    padding: 10px;
+}
+#content {
+	width: 640px;
+}
+
+
+#menu {
+    width: 135px;
+    float: left;
+    padding: 5px;
+    margin-top: -10px;
+}
+
+#menu h2 {
+    padding-top: 10px;
+    margin:0;
+    font-size: 12px;
+}
+
+#menu ul {
+    margin: 0;
+    padding: 0;
+}
+
+#menu li {
+    font-weight: bold;
+    text-decoration: none;
+    list-style-type: none;
+    margin-bottom: 3px;
+}
+#menu li a {
+    margin-left: 7px;
+}
+/*
+#menu li a:hover {
+    text-decoration: underline;
+}
+*/
+#menu li.selected {
+    background-color: #448;
+    width: 150px;
+}
+
+
 .picmargin {
     margin-left: 250px;
 }
@@ -13,38 +94,44 @@ body {
 	text-align: center;
 }
 
-img {
-   border: 1px solid black;
-}
-
 a:link {
     font-weight: bold;
     text-decoration: none;
-    color: #114477;
+    color: #aaf;
 }
 a:visited {
     font-weight: bold;
     text-decoration: none;
-    color: #114477;
+    color: #aaf;
 }
 a:hover, a:active {
     text-decoration: underline;
-    color: #81d000;
-}
-h1 {
-    font-size: 22px;
-    text-align: center;
-}
-h2 {
-    font-size: 17px;
+    text-shadow: 0 0 3px #000;
+    color: #aaf;
+}
+#content h1 {
+	position: absolute;
+	top: -60px;
+    font-size: 40px;
+    color: #448;
+    text-shadow: 0 0 5px #000;
+}
+#content h2 {
+	display: block;
+	margin: 0;
+	margin-left: -10px;
+	padding: 10px;
+	width: 645px;
+	background: #336;
+    font-size: 20px;
     text-align: left;
     /*text-decoration: underline;*/
 }
 
-h3 {
+#content h3 {
     font-size: 13px;
     text-align: left;
-    color: #444;
+    color: #fff;
 }
 
 .preface {
@@ -71,71 +158,3 @@ h3 {
     padding-right: 5px;	
 }*/
 
-/* page */
-#sitebox {
-    width: 800px;
-    margin: 40px auto 40px auto;
-    border: 0;
-    padding: 0;
-    background: #f0f0f0;
-    box-shadow: 5px 20px 50px rgba(0, 0, 0, 0.4);
-    -webkit-box-shadow: 5px 20px 50px rgba(0, 0, 0, 0.4);
-    -moz-box-shadow: 5px 20px 50px rgba(0, 0, 0, 0.4);
-}
-/* banner */
-#title {
-    height: 80px;
-    padding-left: 65px;
-    /*background-image: url("./imgs/title.png");
-    background-repeat:no-repeat;
-    background-position: center;
-    background: #81d000;*/
-    border-bottom: 3px solid black;
-}
-
-#menu {
-    width: 135px;
-    float: left;
-    padding: 5px;
-    margin-top: -10px;
-}
-
-#menu h2 {
-    padding-top: 10px;
-    margin:0;
-    font-size: 12px;
-}
-
-#menu ul {
-    margin: 0;
-    padding: 0;
-}
-
-#menu li {
-    font-weight: bold;
-    text-decoration: none;
-    color: #777;
-    list-style-type: none;
-    margin-bottom: 3px;
-}
-#menu li a {
-    margin-left: 7px;
-}
-/*
-#menu li a:hover {
-    text-decoration: underline;
-}
-*/
-#menu li.selected a { 
-    color: black;
-    text-decoration: underline;
-}
-
-#main {
-    margin-left: 145px;
-    min-height:400px;
-    margin-bottom: 0px;
-    padding: 5px;
-    border-left: 3px solid #000;
-    background: #fff url("imgs/intro.png") no-repeat right bottom;
-}
diff --git a/htdocs-source/Model.htm b/htdocs-source/Model.htm
index 33cd294..11307e0 100644
--- a/htdocs-source/Model.htm
+++ b/htdocs-source/Model.htm
@@ -12,15 +12,18 @@
     <div id="sitebox">
       <div id="title"><img src="imgs/title.png" style="border-style: none;" alt="Performous"/></div>
 
-      <div id="menu">
-        <ul>
-          <+MENU+>
-        </ul>
-      </div>
-
-      <div id="main">
-        <h1><+TITLE+></h1>
-        <+BODY+>
+      <div id="page">
+        <div id="menu">
+          <ul>
+            <+MENU+>
+          </ul>
+        </div>
+        <div id="main">
+          <div id="content">
+            <h1><+TITLE+></h1>
+            <+BODY+>
+          </div>
+        </div>
       </div>
 
     </div>