diff options
| -rw-r--r-- | index.html | 4 | ||||
| -rwxr-xr-x | style.css | 116 |
2 files changed, 85 insertions, 35 deletions
@@ -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> @@ -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; } |