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