Update CSS: Adding layout documentation and refine size (14px + 1.4 line-height) link buttons etc.

2 files changed, 85 insertions, 35 deletions

diff --git a/index.html b/index.html
index 9137b12..c65cdba 100644
--- a/index.html
+++ b/index.html
@@ -40,12 +40,12 @@
                     <ul>
                         <li>
                             <a href="http://www.cctintl.com/">
-                                <img src="images/CCT-logo-2019.png" border="0" vspace="0" height="52" alt="CCC/CCT"/>
+                                <img src="images/CCT-logo-2019.png" border="0" vspace="0" height="45" alt="CCC/CCT"/>
                             </a>
                         </li>
                         <li>
                             <a href="http://jausoft.com/">
-                                <img src="images/jaugsweklogo-hp-220x80.png" border="0" vspace="0" width="160" alt="Jausoft"/>
+                                <img src="images/jaugsweklogo-hp-220x80.png" border="0" vspace="0" height="45" alt="Jausoft"/>
                             </a>
                         </li>
                     </ul>
diff --git a/style.css b/style.css
index ae63153..7d88b2c 100755
--- a/style.css
+++ b/style.css
@@ -1,38 +1,99 @@
-
-body {padding:15px 20px; margin:0; background: #f5f5f5; font-family: "Trebuchet MS", arial, verdana, helvetica, sans-serif;}
-
-#container {/*background-color:#ffffff;*/ padding:0px; min-width:700px;}
-
-#header {height:90px; background-color:#ffffff;}
-#logo {font-size:40px; padding:25px 0 0 30px;}
-#logo a {color:#444444; text-decoration:none; }
+/**
+ * CSS for the following layout
+ *
+ * Body
+ * |
+ * + Container
+ *   |
+ *   + Header
+ *   | |
+ *   | + Logo
+ *   | |
+ *   | + Slogan
+ *   |
+ *   + Menu
+ *   | 
+ *   + Main
+ *     |
+ *     + Sidebar
+ *     |
+ *     + Text
+ *       |
+ *       + Column
+ *       |
+ *       + Clear
+ *
+ * 1. body
+ * 1.1 Container
+ * 1.1.1 Header
+ * 1.1.1.1 Logo
+ * 1.1.1.2 Slogan
+ * 1.1.2 Menu
+ * 1.1.3 Main
+ * 1.1.3.1 Sidebar
+ * 1.1.3.2 Text
+ * 1.1.3.2.1 Column
+ * 1.1.3.2.2 Clear
+ *
+ * Normal font size: 14px w/ line-height 1.4. Note: 16px=1em is browser/css default.
+ */
+body {padding:0; margin:0; color:#111111; background: #ffffff; font-family: arial, verdana, helvetica, sans-serif; font-size:14px; line-height:1.4;}
+
+a {color:#111111; border-style:none; padding: 2px; text-decoration: underline; text-decoration-style: dotted}
+a:hover {color:#000000; background-color: #c9e2ff; border-radius: 5px 10px; padding: 2px; }
+
+#container {padding:0; margin: 0; color:#111111; background: #ffffff; min-width:350px;}
+#container img { border-style:none; margin:0; padding:0; }
+
+/** allow slogan within header to overpaint the logo (abs position 80 - 18 = 62)
+#header {height:90px; min-width:800px; display:block; }
+#logo { height:80px; font-size:40px; padding:16px 0 0 16px; display:inline-block;}
+#logo a { text-decoration:none; }
 #logo img {  margin-top: -10px; border-style:none; }
-#slogan {float:right; font-size:18px; color:#444444; padding:65px 15px 0 0;}
+#slogan {float:right; font-size:18px; color:#444444; padding:0 8px 0 0; position: absolute; top:62px; right:0; display:inline-block; }
+*/
+/** Allow slogan to be invisible to the right space via min-width:560px */
+#header {height:90px; min-width:560px; display:block; }
+#logo { height:80px; font-size:40px; padding:16px 0 0 16px; display:inline-block;}
+#logo a { text-decoration:none; }
+#logo img {  margin-top: -10px; border-style:none; }
+#slogan {float:right; font-size:18px; color:#444444; padding:62px 8px 0 0; right:0; display:inline-block; }
 
 /*webside theme colors*/
-#menu, #menu li, #sidebar li a:hover, #footer {background-color:#c9e2ff;}
+#menu {background-color:#c9e2ff; background-image: linear-gradient(#f5f5f5, #c9e2ff, #f5f5f5);};
+#menu li, #footer {background-color:#c9e2ff;}
 #menu a, #footer a, #footer {color: #3b4d4f}
+#footer a:hover {background-color:#3b4d4f; color:#c9e2ff}
+#menu a:hover {color:#444444; background-color: #f5f5f5;}
 
 #menu {height:40px; margin-top:5px;}
 #menu ul {margin:0; padding:0;}
 #menu li {list-style:none; float:left;}
-#menu a {float:left; height:20px; padding:10px 20px; font-size:15px; font-weight:bold; text-decoration:none; font-family:Arial, Helvetica, sans-serif;}
-#menu a:hover {color:#444444; background-color: #ffffff;}
+#menu a {float:left; height:20px; padding:10px 20px; font-size:15px; font-weight:bold; text-decoration:none;}
 
-#main {float:left; width:100%; height:100%; margin:5px 0; background-color: #FFFFFF; font-size:13px; line-height:1.4;}
-#main a {color:#111111; border-style:none;}
-#main a:hover {color:#000000; background-color: #eeeeee;}
+#main {float:left; width:100%; height:100%; margin:0;}
 #main br {line-height:8px;}
-#main img { padding: 5px; border-style:none; }
-/* #main img:hover {background-color:white;} */
 
 .rss {background:url(images/feed-icon-10x10.png) no-repeat scroll 2px 50% !important; padding:0px 0px 0px 15px;}
 .fill {margin-right:0 !important;}
 .centered {margin-left: auto; margin-right: auto; text-align: center;}
-.clear {clear: both}
-.column {float: left; padding-left: 25px; padding-right: 50px}
+.clear {clear: both; padding: 16px 0 0 0}
+.column {float: left; padding: 0 16px 16px 8px; }
 .splash {margin-left: auto; margin-right: auto; font-size:22px; }
 
+#sidebar {font-size:13px; width:150px; height: auto; float: right; text-align: center; margin:16px 16px 16px 16px; padding: 0; }
+#sidebar h3 {font-size:13px; font-weight:bold; font-style:italic; margin:13px 0 5px 0;}
+#sidebar ul {margin:0; padding:0;}
+#sidebar li {list-style:none; padding:1px 0; margin:8px 0;}
+#sidebar li a {text-decoration:none; display:block; border: 1px dotted #3b4d4f; border-radius: 8px 18px; }
+
+#text {margin-right:225px; padding:10px 25px 25px 25px; min-width:350px; }
+#text img { padding: 5px; }
+#text h1 {font-size:22px; font-weight:normal; margin:20px 0 10px 0;}
+#text h2 {font-size:19px; font-weight:normal; margin:20px 0 10px 0;}
+#text h3 {font-size:16px; font-weight:normal; margin:18px 0 10px 0;}
+#text h4 {font-size:14px; font-weight:normal; margin:18px 0 10px 0;}
+
 #text ul { padding: 0.3em 0em 0.3em 1em; }
 #text ul li { background:url(images/bullet.gif) 0em 0.3em no-repeat; padding-left: 0.8em; list-style: none; }
 #text ul li { background-image:url(images/bullet_child.gif); }
@@ -50,22 +111,11 @@ body {padding:15px 20px; margin:0; background: #f5f5f5; font-family: "Trebuchet
 #text ul {padding: 0.3em 0em; }
 */
 
-#sidebar {width:160px; height: auto; float: right; padding:0 30px 30px 30px; }
-#sidebar h3 {font-size:17px; font-weight:normal; margin:20px 0 5px 0;}
-#sidebar ul {margin:0; padding:0; /*border-top:1px solid #e6e6ff;*/}
-#sidebar li {list-style:none; /*border-bottom:1px solid #e6e6ff;*/}
-#sidebar li a {color:#111111; text-decoration:none; padding:3px; display:block;}
-
-#text {margin-right:225px; padding:10px 30px 30px 30px; border-right: 5px solid #F5F5F5;}
-#text h1 {font-size:22px; font-weight:normal; margin:20px 0 10px 0;}
-#text h2 {font-size:19px; font-weight:normal; margin:20px 0 10px 0;}
-
-#footer {height:40px; font-size:11px; clear:both;}
-#footer a:hover {color:#444444;}
-#footer_left {float:left; padding:5px 0 0 5px;}
+#footer {height:40px; font-size:10px; clear:both;}
+#footer_left {float:left; padding: 4px 0 0 5px;}
 #footer_left img {float: left; margin-right: 5px;}
 
-#footer_right {float:right; padding:13px 30px 0 0;}
+#footer_right {float:right; padding:14px 30px 0 0;}
 
 td.streams_text { text-align: left; vertical-align: middle; }
 td.streams_thumbs { width:400px; }