CSC CSS v1 and white logo
authorJennifer Yeelam Wong <jy2wong@corn-syrupcorn-syrup.(none)>
Wed, 22 Feb 2012 03:09:04 +0000 (22:09 -0500)
committerJennifer Yeelam Wong <jy2wong@corn-syrupcorn-syrup.(none)>
Wed, 22 Feb 2012 03:09:04 +0000 (22:09 -0500)
pub/style/logo.png [new symlink]
pub/style/logo_white.png [new file with mode: 0644]
pub/style/style.css

diff --git a/pub/style/logo.png b/pub/style/logo.png
new file mode 120000 (symlink)
index 0000000..eae109f
--- /dev/null
@@ -0,0 +1 @@
+logo_white.png
\ No newline at end of file
diff --git a/pub/style/logo_white.png b/pub/style/logo_white.png
new file mode 100644 (file)
index 0000000..a6c2892
Binary files /dev/null and b/pub/style/logo_white.png differ
index e0e60f7..47ef00b 100644 (file)
@@ -1,9 +1,16 @@
 /* General style guidelines:\r
     - All font-size at least 14px (recommended 16px)\r
     - Line-height: 1.5 for paragraph body, 1.1 for header\r
+\r
+accent colour:\r
+  #E2AA00\r
+dark blue:\r
+  #2724AE\r
 */\r
 \r
 body {\r
+  background-image:url('background.png');\r
+  text-align: center;\r
   color: black;\r
   background-color: white;\r
   font-family: Helvetica, Verdana, Arial, 'Liberation Sans', FreeSans, sans-serif;\r
@@ -14,22 +21,27 @@ body {
 \r
 #container {\r
   position: relative;\r
-  margin: 20px auto;\r
-  width: 900px;\r
+  margin: 0 auto;\r
+  max-width: 70em;\r
   text-align: left;\r
 }\r
 \r
+#logo {\r
+  height: 1em;\r
+  vertical-align: middle;\r
+}\r
+\r
 /* # Header # */\r
 .superHeader {\r
-  color: white;\r
-  background-color: rgb(100,135,220);\r
+  color: #777;\r
+  background-color: #fff;\r
   height: 1.6em;\r
 }\r
 \r
 .superHeader img { vertical-align: bottom; }\r
 \r
 .superHeader a {\r
-  color: white;\r
+  color: #777;\r
   background-color: transparent;\r
   font-size: 91%;\r
   margin: 0;\r
@@ -48,27 +60,36 @@ a:hover { text-decoration: underline; }
 .superHeader .right { right: 0.4em; }\r
 \r
 .midHeader {\r
-  color: rgb(39,78,144);\r
-  background-color: rgb(140,170,230);\r
-  background-color: #ff6d06;\r
-  border: solid 0 black;\r
-  border-width: 2px 0;\r
+  color: #fff;\r
+  background-color: #2724AE;\r
+  border-bottom: solid 2px #E2AA00;\r
+}\r
+\r
+.midHeader img {\r
+  border: none;\r
 }\r
 \r
 .headerTitle {\r
-  color: black;\r
+  color: #fff;\r
   font-size: 233%;\r
-  font-weight: normal;\r
+  font-weight: bold;\r
   margin: 0 0 0 4mm;\r
   padding: 0.25ex 0;\r
 }\r
 #headerSubTitle {\r
+/*\r
+  color: #D2D1FA;\r
+*/\r
+\r
+  color: #fff;\r
   font-size: 50%;\r
+/*\r
   font-style: italic;\r
-  margin-left: 1em;\r
+*/\r
+  vertical-align: middle;\r
 }\r
 \r
-.headerTitle a { color: black; }\r
+.headerTitle a { color: #fff; }\r
 .headerTitle a:hover { text-decoration: none; }\r
 \r
 .subHeader {\r
@@ -94,25 +115,31 @@ a:hover { text-decoration: underline; }
 \r
 /* # Horiz-side # */\r
 #horiz-side-bar {\r
-  width:100%;\r
-  float left;\r
-  clear: both;\r
-  border: 0;\r
   margin: 0;\r
   padding: 0;\r
 }\r
 \r
 #horiz-side-bar ul {\r
-  margin: 0;\r
-  padding: 0.3em;\r
   list-style-type: none;\r
-  list-style-image: none;\r
-  background: #eeeeee;\r
-  border: 0;\r
+  list-style-position: outside;\r
+  padding: 0;\r
+  margin-top: 0;\r
+  margin-bottom: 0;\r
+  background-color: #ddd;\r
+  border-top: 2px solid #ddd;\r
 }\r
 \r
 #horiz-side-bar ul:nth-child(even) { \r
-  background-color: #dddddd;\r
+  background-color: #ccc;\r
+  border-top: 2px solid #ccc;\r
+}\r
+\r
+#horiz-side-bar ul:first-child {\r
+  background-color: transparent;\r
+  margin-top: 1em;\r
+  margin-bottom: 1em;\r
+  border-top: none;\r
+  padding-left: 0;\r
 }\r
 \r
 #horiz-side-bar li {\r
@@ -121,24 +148,68 @@ a:hover { text-decoration: underline; }
   line-height: 1.6em;\r
 }\r
 \r
-#horiz-side-bar li.thisPage a {\r
-  color: black!important;\r
-  font-weight: bold;\r
-}\r
 #horiz-side-bar ul li a {\r
-  margin: 0;\r
-  padding: 0.1em 1ex 0.1em 1ex;\r
-  color: #336699;\r
-  background-color: transparent;\r
   text-decoration: none;\r
-  font-size: 1em;\r
-  border: 0;\r
+  color: #333;\r
+  padding: 0.2em 1ex 0.3em;\r
+  margin-right: 0.5em;\r
+  font-weight: bold;\r
 }\r
 \r
 #horiz-side-bar ul li a:hover {\r
   color: black;\r
+  background-color: #ccc;\r
+}\r
+#horiz-side-bar ul:nth-child(even) li a:hover {\r
+  background-color: #ddd;\r
+}\r
+\r
+#horiz-side-bar ul:first-child li a {\r
+/*\r
+  color: #fff;\r
+  background-color: #7584E4;\r
+*/\r
+\r
+  border-left: 0.5em solid #ccc;\r
+\r
   text-decoration: none;\r
-  text-transform: none;\r
+  font-weight: bold!important;\r
+  font-size: 102%;\r
+  padding: 0.25em 1ex 0.25em 2mm;\r
+  padding-left: 0.2em;\r
+  margin-right: 1em;\r
+}\r
+\r
+#horiz-side-bar ul:first-child li a:hover {\r
+/*\r
+  background-color: #2724AE;\r
+*/\r
+\r
+  background-color: #eee;\r
+  border-left: 0.5em solid #E2AA00;\r
+}\r
+  \r
+\r
+#horiz-side-bar ul li.thisPage a {\r
+  color: #222;\r
+  background-color: #ccc;\r
+}\r
+\r
+#horiz-side-bar ul:nth-child(even) li.thisPage a {\r
+  background-color: #ddd;\r
+}\r
+\r
+#horiz-side-bar ul:last-child li.thisPage a {\r
+  background-color: #f5f5f5;\r
+}\r
+\r
+#horiz-side-bar ul:first-child li.thisPage a {\r
+/*\r
+  color: #fff;\r
+  background-color: #2724AE;\r
+*/\r
+  border-left: 0.5em solid #2724AE;\r
+  background-color: #eee;\r
 }\r
 \r
 \r
@@ -176,7 +247,7 @@ li ul {
 }\r
 \r
 #side-bar a {\r
-  color: rgb(0,102,204);\r
+  color: #43547e;\r
   background-color: transparent;\r
   margin: 0;\r
   padding: 0.25em 1ex 0.25em 2mm;\r
@@ -214,7 +285,7 @@ li ul {
 }\r
 \r
 #side-bar .sideBarText a:hover {\r
-  color: rgb(0,102,204);\r
+  color: #43547e;\r
   background-color: transparent;\r
   text-decoration: none;\r
 }\r
@@ -222,11 +293,15 @@ li ul {
 \r
 /* # Main Copy # */\r
 #main-copy {\r
-  padding: 0.5mm 5mm 5mm 5mm;\r
+/*\r
+ # border: 1px dotted gray;\r
+*/\r
+  padding: 0.5em 1em;\r
   color: black;\r
-  background-color: transparent;\r
+  background-color: #f5f5f5;\r
   text-align: justify;\r
-  line-height: 1.5em;\r
+  line-height: 1.6em;\r
+  max-width: 68em;\r
   word-wrap: break-word;\r
 }\r
 \r
@@ -248,31 +323,51 @@ li ul {
 }\r
 \r
 #main-copy a {\r
-  color: rgb(0,102,204);\r
+  font-weight: bold;\r
+\r
+  color: #2724AE;\r
+  color: #E2AA00;\r
+  color:  rgb(100,135,220);\r
+  border-bottom: 2px solid rgb(100,135,220);\r
+  \r
   background-color: transparent;\r
+  text-decoration: none;\r
 }\r
 \r
 #main-copy a:hover {\r
-  color:  rgb(100,135,220);\r
+  background-color: #eee;\r
+  color: #E2AA00;\r
+  border-bottom: 2px solid #E2AA00;\r
 }\r
 \r
 #main-copy h1, #main-copy h2 {\r
-  color: rgb(0,102,204);\r
-  background-color: transparent;\r
   font-size: 145.5%;\r
   font-weight: bold;\r
   margin: 2em 0 0 0;\r
   padding: 0.5ex 0 0.5ex 0.6ex;\r
-  border-bottom: 2px solid rgb(0,102,204);\r
+  border-bottom: 2px solid #E2AA00;\r
 }\r
 \r
 #main-copy h2 {\r
   font-size: 115.5%;\r
-  border-bottom: 1px solid rgb(0,102,204);\r
+}\r
+\r
+#main-copy h3 {\r
+  font-size: 90%;\r
+  color: #333;\r
+  padding-left: 0.6ex;\r
+}\r
+\r
+#main-copy ul {\r
+  list-style-type: disc;\r
+  list-style-position: inside;\r
+}\r
+\r
+#main-copy ol {\r
 }\r
 \r
 #main-copy .topOfPage {\r
-  color: rgb(0,102,204);\r
+  color: #43547e;\r
   background-color: transparent;\r
   font-size: 91%;\r
   font-weight: bold;\r
@@ -302,13 +397,15 @@ dd {
 /* # Footer # */\r
 #footer {\r
   color: white;\r
-  background-color: rgb(100,135,220);\r
-  padding: 1em;\r
+  background-color: #2724AE;\r
+  padding: 0.25ex;\r
   clear: both;\r
+  border-top: solid 2px #E2AA00;\r
 }\r
 \r
 #footer .left {\r
   text-align: left;\r
+  margin-left: 0.4em;\r
   line-height: 1.55em;\r
   float: left;\r
   clear: left;\r