Commits

alan...@13c2ddb8-3aa7-4284-800b-8db07c650eef  committed c5b8c0e

Redesign of site using Compass and Blueprint CSS

  • Participants
  • Parent commits 7f5b892
  • Branches site-redesign-using-compass

Comments (0)

Files changed (10)

+# Require any additional compass plugins here.
+project_type = :stand_alone
+css_dir = "src"
+sass_dir = "src/sass"
+images_dir = "src/images"
+output_style = :compressed
+# To enable relative image paths using the images_url() function:
+# http_images_path = :relative
+http_images_path = "images"

File lib/news.wml

 <define-tag perl_begin_news_boxes>
-<div class="sidebarbox-border bg-green01">
-<div class="sidebarbox-title-shading bg-green02">Testimonials</div>
+<div class="testimonials">
+<h2>Testimonials</h2>
 
 <p>
-<q>We went live on budget, to specification and on time</q>
+<q>"We went live on budget, to specification and on time"</q>
 -- <a href="$(ROOT)/learn/who-is-using/#testimonial-ajt">ajt</a>
 </p>
 
 <p>
-<q>Perl saved my vacation!</q>
+<q>"Perl saved my vacation!"</q>
 -- <a href="$(ROOT)/learn/who-is-using/#testimonial-saved-my-vacation">Tom
 Moertel</a>
 </p>
 </p>
 </div>
 
-<div class="sidebarbox-border news-box">
-<div class="sidebarbox-title-shading news-box-title"><a href="$(ROOT)/news/">News</a></div>
+<div class="news-box">
+<h2><a href="$(ROOT)/news/">News</a></h2>
 <ul>
 <li>
 03-August-09: <a href="$(ROOT)/news/#news_03_August_2009">More Updates</a>

File src/images/grid.png

Added
New image

File src/js/position_divs.js

+function position_divs() {
+    var width = document.body.clientWidth - 780;
+    document.getElementById("js-site-name").style.left   = width / 2 + 20 + "px";
+    document.getElementById("js-site-slogan").style.left = width / 2 + 20 + "px";
+    document.getElementById("js-nav-global").style.right = width / 2 - 20 + "px";
+    if ( document.getElementById("right-sidebar") == null ) {
+        document.getElementById("content").style.width = document.body.clientWidth - 250 + "px";
+    }
+    else {
+        document.getElementById("content").style.width = document.body.clientWidth - 410 + "px";
+    }
+}
+
+$(document).ready( function() {
+        position_divs();
+} );
+
+$(window).resize( function() {
+        position_divs();
+} );

File src/print.css

-.navbar { display: none;}
+body{line-height:1.5;font-family:Helvetica Neue, Arial, Helvetica, sans-serif;color:#000;background:none;font-size:10pt}.container{background:none}hr{background:#ccc;color:#ccc;width:100%;height:2px;margin:2em 0;padding:0;border:none}hr.space{background:#fff;color:#fff}h1,h2,h3,h4,h5,h6{font-family:Helvetica Neue, Arial, Helvetica, sans-serif}code{font-size:.9em;font-family:'andale mono', 'lucida console', monospace}img{display:inline;float:left;margin:1.5em 1.5em 1.5em 0}a img{border:none}a:link,a:visited{background:transparent;font-weight:700;text-decoration:underline}p img.top{margin-top:0}blockquote{margin:1.5em;padding:1em;font-style:italic;font-size:.9em}.small{font-size:.9em}.large{font-size:1.1em}.quiet{color:#999}.hide{display:none}

File src/sass/print.sass

+@import blueprint.sass
+
++blueprint-print

File src/sass/style.sass

+@import blueprint.sass
+@import blueprint/modules/scaffolding.sass
+@import compass/reset.sass
+@import compass/utilities.sass
+
++blueprint-typography
++blueprint-debug
+
+#page-container
+  +container
+  :width 100%
+  :color #000
+
+.hide
+  :display none
+
+a
+  :color blue
+
+a:hover
+  :color red
+
+a:active
+  :color green
+
+a:visited
+  :color #006400
+
+a:visited:hover
+  :color red
+
+h1, h2, h3
+  :font-family arial,verdana,sans-serif !important
+  :font-weight bold
+
+#header
+  :position relative
+  :background-color #6a9850
+  :background-image url('./images/header.jpg')
+  :background-repeat no-repeat
+  :background-position center center
+  :height 110px
+
+  .site-name
+    :position absolute
+    :top 20px
+
+    h1
+      :margin 0px
+
+      a
+        :background-color #008000
+        :color #fff
+        :text-decoration none
+        :font-weight bold
+
+  .site-slogan
+    :position absolute
+    :top 70px
+    :background-color #008000
+    :color #e1e1e1
+    :font-weight bold
+    :font-size 1.3em
+
+  .nav-global
+    :position absolute
+    :top 2px
+    +horizontal-list
+
+    ul
+      :display block
+      :margin-left 100px
+
+      li
+        a
+          :font-size 1.2em
+          :text-transform uppercase
+          :color #969696
+          :text-decoration none
+          :border-left 1px solid
+          :padding-left 5px
+
+        a:hover
+          :color #000
+
+.nav-main
+  :border 1px solid #7d7d7d
+  :border 1px 0px
+  :background-color #bebebe
+  :padding-left 50px
+
+  a
+    :color #fff
+    :text-decoration none
+    :font-size 1.3em
+
+  a:hover
+    :color #6e6e6e
+
+#left-sidebar
+  +column(5)
+  :border-top 5px solid #000
+  :background-color #cce0ff
+  :padding-top 20px
+  :padding-left 5px
+  :font-size 1.2em
+  :margin 10px
+
+  h2
+    :font-size 1.4em
+    :font-weight bold
+
+#content
+  :width 500px
+  :float left
+  :padding-right 20px
+  :font-size 1.3em
+  :margin-top 20px
+
+  .full_width_notice
+    :font-size 1.2em
+    :background-color #ccccff
+    :text-align center
+    :border 1px solid #000
+    :width 400px
+    :margin 50px auto
+
+  .full_width_notice:hover
+    :background-color #eeeeff
+
+  .toggle_nav_control
+    :margin-top 20px
+
+  h1
+    :font-size 1.7em
+
+  h2
+    :font-size 1.5em
+
+  pre
+    :font-family monospace
+
+#right-sidebar
+  +column(4)
+  +last
+  :font-size 1.3em
+  :padding-top 20px
+  :padding-left 5px
+  :margin 10px
+  :color #6e6e6e
+
+  h2
+    :font-size 1.2em
+    :font-weight bold
+    :text-align center
+
+  .testimonials
+    :background-color #edf6e5
+    :border 1px solid #c8c8c8
+    :padding 5px
+
+    h2
+      :color #6e6e6e
+      :background-color #dceecc
+
+  .news-box
+    :margin-top 20px
+    :border 1px solid #c8c8c8
+    :padding 5px
+
+    h2
+      :background-color #e1e1e1
+
+      a
+        :color #008800
+
+#footer
+  :border-top 1px solid #7d7d7d
+  :text-align center
+  :font-size 1.2em
+  :margin-bottom 10px

File src/screen.css

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+html,body{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,pre,a,abbr,acronym,address,code,del,dfn,em,img,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,tbody,tfoot,thead,tr{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}blockquote,q{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;quotes:"" ""}blockquote:before,q:before,blockquote:after,q:after{content:""}th,td,caption{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;text-align:left;font-weight:normal;vertical-align:middle}table{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;border-collapse:separate;border-spacing:0;vertical-align:middle}a img{border:none}
+body{line-height:1.5;font-family:Helvetica Neue, Arial, Helvetica, sans-serif;color:#333333;font-size:75%}h1{font-weight:normal;color:#222222;font-size:3em;line-height:1;margin-bottom:0.5em}h1 img{margin:0}h2{font-weight:normal;color:#222222;font-size:2em;margin-bottom:0.75em}h3{font-weight:normal;color:#222222;font-size:1.5em;line-height:1;margin-bottom:1em}h4{font-weight:normal;color:#222222;font-size:1.2em;line-height:1.25;margin-bottom:1.25em}h5{font-weight:normal;color:#222222;font-size:1em;font-weight:bold;margin-bottom:1.5em}h6{font-weight:normal;color:#222222;font-size:1em;font-weight:bold}h2 img,h3 img,h4 img,h5 img,h6 img{margin:0}p{margin:0 0 1.5em}p img.left{display:inline;float:left;margin:1.5em 1.5em 1.5em 0;padding:0}p img.right{display:inline;float:right;margin:1.5em 0 1.5em 1.5em;padding:0}a{text-decoration:underline;color:#000099}a:visited{color:#000066}a:focus{color:black}a:hover{color:black}a:active{color:#cc0099}blockquote{margin:1.5em;color:#666;font-style:italic}strong{font-weight:bold}em{font-style:italic}dfn{font-style:italic;font-weight:bold}sup,sub{line-height:0}abbr,acronym{border-bottom:1px dotted #666}address{margin:0 0 1.5em;font-style:italic}del{color:#666}pre{margin:1.5em 0;white-space:pre}pre,code,tt{font:1em 'andale mono', 'lucida console', monospace;line-height:1.5}li ul,li ol{margin:0 1.5em}ul{margin:0 1.5em 1.5em 1.5em;list-style-type:disc}ol{margin:0 1.5em 1.5em 1.5em;list-style-type:decimal}dl{margin:0 0 1.5em 0}dl dt{font-weight:bold}dd{margin-left:1.5em}table{margin-bottom:1.4em;width:100%}th{font-weight:bold}thead th{background:#c3d9ff}th,td,caption{padding:4px 10px 4px 5px}tr.even td{background:#e5ecf9}tfoot{font-style:italic}caption{background:#eee}.quiet{color:#666666}.loud{color:#111111}.clear{clear:both}.nowrap{white-space:nowrap}.clearfix{overflow:hidden;display:inline-block}.clearfix{display:block}.small{font-size:.8em;margin-bottom:1.875em;line-height:1.875em}.large{font-size:1.2em;line-height:2.5em;margin-bottom:1.25em}.first{margin-left:0;padding-left:0}.last{margin-right:0;padding-right:0}.top{margin-top:0;padding-top:0}.bottom{margin-bottom:0;padding-bottom:0}.container{width:950px;margin:0 auto;overflow:hidden;display:inline-block}.container{display:block}.column,div.span-1,div.span-2,div.span-3,div.span-4,div.span-5,div.span-6,div.span-7,div.span-8,div.span-9,div.span-10,div.span-11,div.span-12,div.span-13,div.span-14,div.span-15,div.span-16,div.span-17,div.span-18,div.span-19,div.span-20,div.span-21,div.span-22,div.span-23,div.span-24{display:inline;float:left;margin-right:10px}* html .column,* html div.span-1,* html div.span-2,* html div.span-3,* html div.span-4,* html div.span-5,* html div.span-6,* html div.span-7,* html div.span-8,* html div.span-9,* html div.span-10,* html div.span-11,* html div.span-12,* html div.span-13,* html div.span-14,* html div.span-15,* html div.span-16,* html div.span-17,* html div.span-18,* html div.span-19,* html div.span-20,* html div.span-21,* html div.span-22,* html div.span-23,* html div.span-24{overflow-x:hidden}.last,div.last{margin-right:0}.span-1{width:30px}.span-2{width:70px}.span-3{width:110px}.span-4{width:150px}.span-5{width:190px}.span-6{width:230px}.span-7{width:270px}.span-8{width:310px}.span-9{width:350px}.span-10{width:390px}.span-11{width:430px}.span-12{width:470px}.span-13{width:510px}.span-14{width:550px}.span-15{width:590px}.span-16{width:630px}.span-17{width:670px}.span-18{width:710px}.span-19{width:750px}.span-20{width:790px}.span-21{width:830px}.span-22{width:870px}.span-23{width:910px}.span-24,div.span-24{width:950px;margin:0}input.span-1,textarea.span-1,select.span-1{width:30px !important}input.span-2,textarea.span-2,select.span-2{width:70px !important}input.span-3,textarea.span-3,select.span-3{width:110px !important}input.span-4,textarea.span-4,select.span-4{width:150px !important}input.span-5,textarea.span-5,select.span-5{width:190px !important}input.span-6,textarea.span-6,select.span-6{width:230px !important}input.span-7,textarea.span-7,select.span-7{width:270px !important}input.span-8,textarea.span-8,select.span-8{width:310px !important}input.span-9,textarea.span-9,select.span-9{width:350px !important}input.span-10,textarea.span-10,select.span-10{width:390px !important}input.span-11,textarea.span-11,select.span-11{width:430px !important}input.span-12,textarea.span-12,select.span-12{width:470px !important}input.span-13,textarea.span-13,select.span-13{width:510px !important}input.span-14,textarea.span-14,select.span-14{width:550px !important}input.span-15,textarea.span-15,select.span-15{width:590px !important}input.span-16,textarea.span-16,select.span-16{width:630px !important}input.span-17,textarea.span-17,select.span-17{width:670px !important}input.span-18,textarea.span-18,select.span-18{width:710px !important}input.span-19,textarea.span-19,select.span-19{width:750px !important}input.span-20,textarea.span-20,select.span-20{width:790px !important}input.span-21,textarea.span-21,select.span-21{width:830px !important}input.span-22,textarea.span-22,select.span-22{width:870px !important}input.span-23,textarea.span-23,select.span-23{width:910px !important}input.span-24,textarea.span-24,select.span-24{width:950px !important}.append-1{padding-right:40px}.append-2{padding-right:80px}.append-3{padding-right:120px}.append-4{padding-right:160px}.append-5{padding-right:200px}.append-6{padding-right:240px}.append-7{padding-right:280px}.append-8{padding-right:320px}.append-9{padding-right:360px}.append-10{padding-right:400px}.append-11{padding-right:440px}.append-12{padding-right:480px}.append-13{padding-right:520px}.append-14{padding-right:560px}.append-15{padding-right:600px}.append-16{padding-right:640px}.append-17{padding-right:680px}.append-18{padding-right:720px}.append-19{padding-right:760px}.append-20{padding-right:800px}.append-21{padding-right:840px}.append-22{padding-right:880px}.append-23{padding-right:920px}.prepend-1{padding-left:40px}.prepend-2{padding-left:80px}.prepend-3{padding-left:120px}.prepend-4{padding-left:160px}.prepend-5{padding-left:200px}.prepend-6{padding-left:240px}.prepend-7{padding-left:280px}.prepend-8{padding-left:320px}.prepend-9{padding-left:360px}.prepend-10{padding-left:400px}.prepend-11{padding-left:440px}.prepend-12{padding-left:480px}.prepend-13{padding-left:520px}.prepend-14{padding-left:560px}.prepend-15{padding-left:600px}.prepend-16{padding-left:640px}.prepend-17{padding-left:680px}.prepend-18{padding-left:720px}.prepend-19{padding-left:760px}.prepend-20{padding-left:800px}.prepend-21{padding-left:840px}.prepend-22{padding-left:880px}.prepend-23{padding-left:920px}.pull-1,.pull-2,.pull-3,.pull-4,.pull-5,.pull-6,.pull-7,.pull-8,.pull-9,.pull-10,.pull-11,.pull-12,.pull-13,.pull-14,.pull-15,.pull-16,.pull-17,.pull-18,.pull-19,.pull-20,.pull-21,.pull-22,.pull-23,.pull-24{display:inline;float:left;position:relative}.pull-1{margin-left:-40px}.pull-2{margin-left:-80px}.pull-3{margin-left:-120px}.pull-4{margin-left:-160px}.pull-5{margin-left:-200px}.pull-6{margin-left:-240px}.pull-7{margin-left:-280px}.pull-8{margin-left:-320px}.pull-9{margin-left:-360px}.pull-10{margin-left:-400px}.pull-11{margin-left:-440px}.pull-12{margin-left:-480px}.pull-13{margin-left:-520px}.pull-14{margin-left:-560px}.pull-15{margin-left:-600px}.pull-16{margin-left:-640px}.pull-17{margin-left:-680px}.pull-18{margin-left:-720px}.pull-19{margin-left:-760px}.pull-20{margin-left:-800px}.pull-21{margin-left:-840px}.pull-22{margin-left:-880px}.pull-23{margin-left:-920px}.pull-24{margin-left:-960px}.push-1,.push-2,.push-3,.push-4,.push-5,.push-6,.push-7,.push-8,.push-9,.push-10,.push-11,.push-12,.push-13,.push-14,.push-15,.push-16,.push-17,.push-18,.push-19,.push-20,.push-21,.push-22,.push-23,.push-24{display:inline;float:right;position:relative}.push-1{margin:0 -40px 1.5em 40px}.push-2{margin:0 -80px 1.5em 80px}.push-3{margin:0 -120px 1.5em 120px}.push-4{margin:0 -160px 1.5em 160px}.push-5{margin:0 -200px 1.5em 200px}.push-6{margin:0 -240px 1.5em 240px}.push-7{margin:0 -280px 1.5em 280px}.push-8{margin:0 -320px 1.5em 320px}.push-9{margin:0 -360px 1.5em 360px}.push-10{margin:0 -400px 1.5em 400px}.push-11{margin:0 -440px 1.5em 440px}.push-12{margin:0 -480px 1.5em 480px}.push-13{margin:0 -520px 1.5em 520px}.push-14{margin:0 -560px 1.5em 560px}.push-15{margin:0 -600px 1.5em 600px}.push-16{margin:0 -640px 1.5em 640px}.push-17{margin:0 -680px 1.5em 680px}.push-18{margin:0 -720px 1.5em 720px}.push-19{margin:0 -760px 1.5em 760px}.push-20{margin:0 -800px 1.5em 800px}.push-21{margin:0 -840px 1.5em 840px}.push-22{margin:0 -880px 1.5em 880px}.push-23{margin:0 -920px 1.5em 920px}.push-24{margin:0 -960px 1.5em 960px}.showgrid{background:url(/images/grid.png)}.error{padding:.8em;margin-bottom:1em;border:2px solid #dddddd;background:#fbe3e4;color:#8a1f11;border-color:#fbc2c4}.error a{color:#8a1f11}.notice{padding:.8em;margin-bottom:1em;border:2px solid #dddddd;background:#fff6bf;color:#514721;border-color:#ffd324}.notice a{color:#514721}.success{padding:.8em;margin-bottom:1em;border:2px solid #dddddd;background:#e6efc2;color:#264409;border-color:#c6d880}.success a{color:#264409}.hide{display:none}.highlight{background:yellow}.added{background:#006600;color:white}.removed{background:#990000;color:white}label{font-weight:bold}fieldset{padding:1.4em;margin:0 0 1.5em 0;border:1px solid #ccc}legend{font-weight:bold;font-size:1.2em}input.text{margin:0.5em 0;border:1px solid #bbb;width:300px;padding:5px}input.text:focus{border:1px solid #666}input.title{font-size:1.5em}input.title{margin:0.5em 0;border:1px solid #bbb;width:300px;padding:5px}input.title:focus{border:1px solid #666}textarea{margin:0.5em 0;border:1px solid #bbb}textarea:focus{border:1px solid #666}select{margin:0.5em 0;border:1px solid #bbb}select:focus{border:1px solid #666}textarea{width:390px;height:250px;padding:5px}body{margin:1.5em 0}.box{padding:1.5em;margin-bottom:1.5em;background:#E5ECF9}div.border{padding-right:4px;margin-right:5px;border-right:1px solid #eee}div.colborder{padding-right:24px;margin-right:25px;border-right:1px solid #eee}hr{background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:.1em;margin:0 0 1.45em;border:none}hr.space{background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:.1em;margin:0 0 1.45em;border:none;background:#fff;color:#fff}

File src/style.css

-/*****************************************************/
-/*   Design:  GoFlexiblePro                          */
-/*            Stylesheet for screen rendering        */
-/*---------------------------------------------------*/
-/*   Author:  G. Wolfgang                            */
-/*   Email:   gw@actamail.com                        */
-/*   Date:    April 14, 2006                         */
-/*---------------------------------------------------*/
-/*   You can use this stylesheet freely under the    */
-/*   condition of giving proper author credits.      */
-/*---------------------------------------------------*/
-/*   Check out my favorite website: www.sda.org      */
-/*****************************************************/
-
-/*-----------------------------------------------------------------------*/
-/* REMARK: FONT-SIZE DEFINITIONS                                         */
-/*-----------------------------------------------------------------------*/
-/* Relative font-sizes in "em" are used where necessary. To make the     */
-/* "em"-units normed, the incoming font sizes are set to 1.0 em. The     */
-/* font-size variations throughout the webpage are then expressed in     */
-/* percentage values respective to the incoming font-size. To make       */
-/* calculations easier, the font definition in "body" is such that       */
-/* 1.0em = 10px. This makes life a real breeze!                          */
-/*-----------------------------------------------------------------------*/
-
-/*************************/
-/* SECTION 1 - MAIN BODY */
-/*************************/
-
-/*-------------------------------*/
-/* Section 1.1 - Page definition */
-/*-------------------------------*/
-
-body {
-	margin: 0em auto; 
-    padding: 0em;
-    font-family: arial, verdana, sans-serif;
-}
-
-#page-container {
-	width: 780px; margin: 0px auto; padding: 0px; border-left: solid 1px rgb(150,150,150); border-right: solid 1px rgb(150,150,150); 
-    /* Adding per http://stackoverflow.com/questions/74570/css-bad-gray-line-to-the-side-of-the-navigation-bar-on-httpperl-beginorg :
-     * The background is transparent.*/
-    background-color: white;
-}
-
-/**********************/
-/* SECTION 2 - HEADER */
-/**********************/
-
-/*--------------------------------------*/
-/* Section 2.1 - Global navigation menu */
-/*--------------------------------------*/
-
-.nav-global-container {
-	float: left; position: absolute; z-index: 3; width: 780px; top: 5px; background-color: transparent;
-}
-
-.nav-global ul {	
-	float: right; margin: 0px; padding: 0px; list-style: none;
-}	
-
-.nav-global li {
-	float: left; white-space: nowrap; text-transform: uppercase;
-}
-
-.nav-global li a {
-	display: block; margin: 0px; padding: 0px 5px 0px 5px; border-left: solid 1px rgb(150,150,150); background-color: rgb(255,255,255); color: rgb(150,150,150); text-decoration: none; font-size: 100%;
-}
-
-.nav-global a:hover {
-	background-color: rgb(255,255,255); color: rgb(0,0,0); text-decoration: underline;
-}
-
-.img-flag {
-	display: block; height: 1.2em; margin: 0px; padding: 0px; border: solid 1px rgb(0,0,0);
-}
-
-/*-----------------------------------*/
-/* Section 2.2 - Sitename and Banner */
-/*-----------------------------------*/
-
-.site-name
-{
-	clear: both;
-    float: left;
-    position: absolute;
-    z-index: 1;
-    width: 700px;
-    top: 20px;
-    margin: 0px; 
-    padding-left: 14px;
-    background-color: transparent;
-    color: rgb(225,225,225);
-    font-weight: bold;
-    font-size: 24px;
-}
-
-.site-slogan
-{
-	float: left;
-    position: absolute;
-    z-index: 2;
-    width: 20em;
-    top: 3em;
-    margin: 0px;
-    padding: 0px 3px 1px 10pt;
-    background-color: #080;
-    color: rgb(225,225,225);
-    font-weight: bold;
-    font-size: 14px;
-}
-
-.site-name h1 {
-    font-size: xx-large;
-    padding: 0;
-    margin: 0;
-    color: white; 
-    width: auto;
-    background-color:green;
-    display: inline;
-    padding-left: 5pt;
-    padding-right: 5pt;
-}
-
-.img-header {
-	clear: both; float: left; width: 780px; height: 110px; margin: 0px; padding: 0px;
-}
-
-/*------------------------------------*/
-/* Section 2.3 - Main navigation menu */
-/*------------------------------------*/
-
-.nav-main
-{
-	clear: both;
-    float: left;
-    width: 780px;
-    margin: 0px;
-    padding: 0px;
-    border-top: solid 1px rgb(125,125,125);
-    border-bottom: solid 1px rgb(125,125,125);
-    background-color: rgb(190,190,190);
-}
-
-.nav-main ul
-{	
-	list-style: none;
-    margin: 0px;
-    padding: 0px;
-    font-weight: bold;
-}	
-
-.nav-main li
-{
-	float: left;
-    display: block;
-    white-space: nowrap;
-    background-color: inherit;
-}
-
-.nav-main a
-{
-	color: rgb(255,255,255);
-    margin: 0px;
-    padding: 0px 10px 0px 10px;
-    text-decoration: none;
-}
-
-.nav-main a:hover, .nav-main a.selected
-{
-	background-color: inherit;
-    color: rgb(110,110,110);
-    text-decoration: none;
-}
-
-/*************************************/
-/* SECTION 3 - FRONT-PAGE SIDEBANNER */
-/*************************************/
-
-.sidebanner-frontpage {
-	clear: both;
-    float: left;
-    width: 209px;
-    margin: 0px;
-    padding: 0px;
-}
-
-.navbar-sidebanner {
-	width: 160px; 
-    margin: 20pt 20pt 20pt 5pt; 
-    padding-right: 1em;
-    padding-bottom: 3em;
-    padding-top: 1.5em;
-    background-color: #CCE0FF;
-    border-top: thick solid black;
-}
-
-.navbar-sidebanner ul {
-    padding-left:0;
-    margin-left:20pt;
-}
-
-.navbar-sidebanner h2 {
-     font-size: 110%;
-     margin-left: 7pt;
-}
-
-.navbar-sidebanner a:hover {
-    color: red; text-decoration: none;
-}
-
-.navbar-sidebanner h2 a {
-    text-decoration: none;
-}
-
-/******************************/
-/* SECTION 4 - SUB-NAVIGATION */
-/******************************/
-
-/*--------------------*/
-/* Section 4.1 - Size */
-/*--------------------*/
-
-.nav-sub {
-	clear: both; min-height: 400px; float: left; width: 160px; margin: 0px; padding: 0px; color: rgb(110,110,110);
-}
-
-/* IE6-hack for min-height. Also works for IE7-Beta2 */
-* html .nav-sub {
-	height: 400px;
-} 
-/* End IE-Hack */
-
-/*--------------------*/
-/* Section 4.2 - Menu */
-/*--------------------*/
-
-.nav-sub ul {	
-	float: left; list-style: none; width: 160px; margin: 0px; padding: 0px; border-bottom: solid 1px rgb(200,200,200);
-}	
-
-.nav-sub li {
-	margin: 0px; padding: 0px;
-}
-
-.nav-sub li.title {
-	vertical-align: top; margin: 0px; padding: 10px 7px 10px 14px; text-transform: uppercase; color: rgb(175,175,175); font-weight: bold; font-size: 140%;
-}
-
-.nav-sub li.group a {
-	display: block; min-height: 1.5em; margin: 0px; padding: 3px 7px 2px 10px; border-top: solid 1px rgb(200,200,200); border-left: solid 5px rgb(235,235,235); text-decoration: none; text-transform: uppercase; font-weight: bold; font-size: 120%;
-}
-
-/* IE6-hack for min-height. Also works for IE7-Beta2 */
-* html .nav-sub li.group a {
-	height: 1.5em;
-}
-/* End IE-Hack */
-	
-.nav-sub li a {
-	display: block; min-height: 1.5em; margin: 0px; padding: 3px 7px 2px 10px; border-left: solid 5px rgb(235,235,235); color: rgb(110,110,110); text-decoration: none; font-size: 120%;
-}
-
-/* IE6-hack for min-height. Also works for IE7-Beta2 */
-* html .nav-sub li a {
-	height: 1.5em;
-}
-/* End IE-Hack */
-
-.nav-sub li.group a:hover, .nav-sub li.group .selected {
-	border-left: solid 5px rgb(175,175,175); background-color: rgb(225,225,225); text-decoration: none;
-}
-
-.nav-sub a:hover, .nav-sub .selected {
-	border-left: solid 5px rgb(175,175,175); background-color: rgb(225,225,225); text-decoration: none;
-}
-
-.nav-sub-align {
-	text-align: left;
-}
-
-/*******************************************************************/
-/* SECTION 5 -  Extend left column height to footer                */
-/*-----------------------------------------------------------------*/
-/* TRICK: To nest the right two columns (content and sidebar) and  */
-/* give them a minimum height and white background. Then let the   */
-/* left column have transparent background so the light-grey color */
-/* from the global page definition comes through. However, nesting  */
-/* floats inside each other with identical widths may activate the */
-/* IE character duplicating bug, where the last characters of the  */
-/* last float statement are duplicated outside the float. The      */
-/* correction for this is to reduce the sidebar float so that the  */
-/* sum of the content and sidebar floats are 6px less than the     */
-/* container holding them. See Section 7.1, where this is done.    */
-/* ----------------------------------------------------------------*/
-/* RESTRICTION: For situations where the left navigation menu is   */
-/* expanding over the minimum 600px height, it must remain smaller */
-/* than the right columns. Otherwise the global page grey back-    */
-/* will shine through after the end of the content and sidebar     */
-/* columns. This situation may arise when you have very long left  */
-/* navigation menus, and short content and sidebars. If this is    */
-/* your situation, then simply increase the minimum height of the  */
-/* left column, as well as the container defined in this section.  */
-/*******************************************************************/
-
-/* Contain both right columns (content and sidebar) in one         */
-/* container and extended to a minimum height of 600 px            */
-/* The "!important" statement is for Firefox so that the           */
-/* "height" statement still allows the container to grow and       */
-/* not remain fixed size. Necessary because IE cannot render       */
-/* the "min-height" property                                       */
-
-.container-content-sidebar
-{
-   float: left;
-   width: 550px;
-   min-height: 1200px;
-   margin: 0px;
-   padding: 0px;
-   background-color: rgb(255,255,255);
-}
-
-/* IE6-hack for min-height. Also works for IE7-Beta2 */
-* html .container-content-sidebar {
-	height: 1200px;
-} 
-/* End IE-Hack */
-
-/* Put a buffer between sub-navigation column and      */
-/* main-navigation so that the global page background  */
-/* color does not come through in this place           */
-
-.buffer {
- 	float: left; width: 160px; height: 20px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);	
-}
-
-/***********************/
-/* SECTION 6 - CONTENT */
-/***********************/
-
-/*--------------------*/
-/* Section 6.1 - Size */
-/*--------------------*/
-
-.content
-{
-	float: left;
-    width: 370px;
-    margin: 0px;
-    padding: 30px 20px 0px 10px;
-    background-color: rgb(255,255,255);	
-}
-
-.no-news .content
-{
-    width: 540px;
-}
-
-/*-------------------------*/
-/* Section 6.2 - Pagetitle */
-/*-------------------------*/
-
-.content-pagetitle {
-	width: 390px; margin: 0px 0px 10px 0px; padding: 0px;
-}
-
-.content-pagetitle p {
-	padding: 0px; margin: 0px; font-weight: bold; font-size: 140%;
-}
-
-/*----------------------------------*/
-/* Section 6.3 - Extra container    */
-/*----------------------------------*/
-/* To ensure that no problems arise */
-/* with right and left floatings    */
-/* and make the implementation      */
-/* robuster.                        */
-/*----------------------------------*/
-
-.contentbox-container-full {
-	 float: left; width: 425px; margin: 0px 0px 1.5em 0px; padding: 0px;
-}
-
-.contentbox-container-left {
-	float: left; width: 205px; margin: 0px 0px 1.5em 0px; padding: 0px;
-}
-
-.contentbox-container-right {
-	float: right; width: 205px; margin: 0px 0px 1.5em 0px; padding: 0px;
-}
-
-/*-----------------------------*/
-/* Section 6.4 - Content title */
-/*-----------------------------*/
-
-.contentbox-title-noshading-noline {
-	display: block; margin: 0px; padding: 0px; background-color: transparent; text-transform: none; font-weight: bold; font-size: 150%;
-}
-
-.contentbox-title-noshading-line {
-	display: block; margin: 0px 0px 0.2em 0px; padding: 0px; border-bottom: solid 2px rgb(135,135,135); background-color: transparent; text-transform: none; font-weight: bold; font-size: 150%;
-}
-
-.contentbox-title-shading {
-  	margin: 0px; padding: 1px 0px 2px 3px; background-color: rgb(225,225,225); font-weight: bold; font-size: 150%;	
-}
-
-/*--------------------------------*/
-/* Section 6.5 - Contentbox size  */
-/*--------------------------------*/
-
-/* No shading */
-.contentbox-noshading {
-	margin: 0px; padding: 0.7em 0px 0px 0px; background-color: transparent;
-}
-
-/* Shading */
-.contentbox-shading {
-	margin: 0px; padding: 7px 10px 5px 10px; background-color: transparent;
-}
-
-/*-------------------------------*/
-/* Section 6.6 - Contentbox text */
-/*-------------------------------*/
-
-/* Heading */
-h1 
-{
-	clear: left;
-    margin: 1.0em 0px 1.0em 0px;
-    font-weight: bold;
-    font-size: 160%;
-}
-
-h2
-{
-	clear: left;
-    margin: 1.5em 0px 1.0em 0px;
-    font-weight: bold;
-    font-size: 145%;
-}
-
-h3
-{
-	clear: left;
-    margin: 1.0em 0px 0.6em 0px;
-    font-weight: bold;
-    font-size: 130%;
-}
-
-h4
-{
-	clear: left;
-    margin: 0.5em 0px 0.5em 0px;
-    font-weight: bold;
-    font-style: italic;
-    font-size: 115%;
-}
-
-h1, h2, h3, h4
-{
-    color: black;
-}
-/* Paragraph text */
-p {
-   clear: left; margin: 0em 0px 0.5em 0px; padding: 0px;
-}
-
-/* Quote */
-p.quote {
-   clear: left; margin: 0em 30px 0.6em 30px;	line-height: 120%; font-size: 120%;
-}
-
-/* Embedded */
-.embed {
-   float: left; width: 120px; margin: 2px 7px 2px 0px; padding: 5px 5px 5px 5px; background-color: rgb(225,225,225); font-style: italic; font-weight: bold;  line-height: 1.2em; font-size: 180%;
-}
-
-.embed-caption {
-   float: left; margin: 5px 0px 0px 0px; padding: 0px; font-style: italic; font-weight: normal; line-height: 1.2em; font-size: 50%;
-}
-
-/* Unordered list */
-.content ul
-{
-	list-style-type: disc;
-    list-style-position: outside;
-}
-
-/* Ordered List */
-.content ol
-{
-	list-style-type: decimal; 
-    list-style-position: outside;
-}
-
-.content ol li
-{
-    margin-bottom: 1em;
-}
-/*--------------------------*/
-/* Section 6.7 - Datatables */
-/*--------------------------*/
-
-.tabledata {
-	clear: left; margin: 0.5em 0px 0.2em 30px; border: solid 1px rgb(150,150,150); empty-cells: show; border-collapse: collapse; background-color: rgb(225,225,225);
-}
-
-.tabledata tr {
-	margin: 0px; padding: 0px;
-}
-
-.tabledata td {
-	padding: 2px 7px 2px 7px; border: solid 1px rgb(150,150,150); text-align: left; font-size: 120%;
-}
-
-.tabledata th {
-	margin: 0px; padding: 2px 7px 2px 7px; border: solid 1px rgb(150,150,150); empty-cells: show; text-align: left; font-size: 120%; 	
-}
-
-p.tabledata-caption {
-	margin: 0em 0px 10px 30px; padding: 0px; clear: both; text-align: left; font-size: 120%;
-}
-
-/*----------------------*/
-/* Section 6.8 - Images */
-/*----------------------*/
-
-/* No border */
-.img-left-noborder {
-	float: left; margin: 0.3em 7px 3px 0px;
-}
-
-.img-right-noborder {
-	float: right; margin: 0.3em 0px 3px 7px;
-}
-
-/* Border */
-.img-left-border {
-	float: left; margin: 0.3em 7px 3px 0px; border: solid 1px rgb(150,150,150);
-}
-
-.img-right-border {
-	float: right; margin: 0.3em 0px 3px 7px; border: solid 1px rgb(150,150,150);	
-}
-
-/***********************/
-/* SECTION 7 - SIDEBAR */
-/***********************/
-
-/*-----------------------------------------------*/
-/* Section 7.1 - Size                            */
-/*-----------------------------------------------*/
-/* Because of IE float-rendering bug, the width  */
-/* must be reduced by 6px, otherwise it will     */
-/* duplicate characters after the last float     */
-/* Reason: IE may not alwys allow nested floats  */
-/* have identical widths, but inside float must  */
-/* be smaller than outside float. This IE-bug is */
-/* somewhat unpredictable. See Section 5 header  */
-/* for more details on this topic.               */
-/*-----------------------------------------------*/
-
-.sidebar {
-	 float: right;
-     width: 144px;
-     margin: 0px;
-     padding: 57px 5px 0px 0px;
-     background-color: rgb(255,255,255);
-}
-
-/*-----------------------*/
-/* Section 7.2 - Textbox */
-/*-----------------------*/
-
-.sidebarbox-noborder {
-	width: 140px; margin: 0em 0px 1.0em 0px; padding: 0px;
-}
-
-.sidebarbox-border {
-	width: 130px; margin: 0px 0px 1.0em 0px; padding: 4px 4px 4px 4px; border: solid 1px rgb(200,200,200);
-}
-
-.sidebarbox-border ul
-{
-    padding-left: 1.5em;
-}
-/*-----------------------------*/
-/* Section 7.3 - Textbox title */
-/*-----------------------------*/
-
-.sidebarbox-title-noshading-noline {
-	 display: block; margin: 0px 0px 0.5em 0px; padding: 1px 0px 1px 0px;font-weight: bold; font-size: 120%;
-}
-
-.sidebarbox-title-noshading-line {
-	display: block; margin: 0px 0px 0.5em 0px; padding: 1px 0px 1px 0px; border-bottom: solid 1px rgb(135,135,135); background-color: transparent; font-weight: bold; font-size: 120%;
-}
-
-.sidebarbox-title-shading {
-	display: block; margin: 0px 0px 0.5em 0px; padding: 2px 5px 5px 5px; background-color: rgb(225,225,225); font-weight: bold; font-size: 120%; text-align: center;
-}
-
-/*------------------------------*/
-/* Section 7.4 - Paragraph text */
-/*------------------------------*/
-
-.sidebarbox-noborder p {
-	margin: 0px 4px 0.4em 4px; padding: 0px; background-color: transparent; font-size: 110%;
-}
-
-.sidebarbox-border p {
-	margin: 0px 0px 0.4em 0px; padding: 0px; background-color: transparent; font-size: 110%;
-}
-
-/**********************/
-/* SECTION 8 - FOOTER */
-/**********************/
-
-/* Somehow not possible to use percentage values to scale the font-size here. */
-/* Therefore the is the font-size definition given in the generic CSS-class   */
-/* "footer-font", even though those generic font classes should all have a    */
-/* normed size of 1.0em. But making footer an exception will not hurt us.     */
-
-.footer {
-	clear: both; width: 780px; margin: 0em 0px 0px 0px; padding: 5px 0px 5px 0px; border-top: solid 1px rgb(200,200,200); border-bottom: solid 1px rgb(200,200,200); background-color: rgb(255,255,255); text-align: center;	
-}
-
-/***************************************************/
-/* SECTION 9 - HYPERLINKS FOR NON-NAVIGATION TEXTS */
-/***************************************************/
-
-.content a, .sidebar a {
-	color: blue; text-decoration: underline;
-}
-
-.content a:visited, .sidebar a:visited {
-	color: #080; 
-}
-
-.content a:hover, .sidebar a:hover {
-	color: red; text-decoration: none;
-}
-
-.footer a {
-	text-decoration: underline;
-}
-
-.footer a:hover {
-	text-decoration: none;
-    color: red;
-}
-
-/********************************/
-/* SECTION 10 - GENERIC CLASSES */
-/********************************/
-
-/*------------------------------------------*/
-/* Section 10.1 - Global default fonts      */
-/*------------------------------------------*/
-/* Only applied to the main div-statements  */
-/* for the basic page regions.              */
-/*------------------------------------------*/
-
-.nav-global-font {
-	font-size: 1.0em;
-}
-
-.nav-main-font {
-	font-size: 1.0em;
-}
-
-.nav-sub-font {
-	font-size: 1.0em;
-}
-
-.content-font {
-	font-size: 1.0em; line-height: 1.7em; 
-}
-
-.sidebar-font {
-	font-size: 1.0em; line-height: 1.4em; color: rgb(110,110,110);
-}
-
-/* Percentage value does not work in "footer", so we     */
-/* cannot give the normed size of "1.0em" here and scale */
-/* it up inside the "footer". Thus we define the final   */
-/* font-size here the way it will appear on screen.      */
-.footer-font {
-	font-size: 1.1em; color: black;
-}
-
-/*--------------------------------------*/
-/* Section 10.2 - Horizontal alignments */
-/*--------------------------------------*/
-
-.align-left {
-	text-align: left;
-}
-
-.align-right {
-	text-align: right;
-}
-
-.float-left {
-	float: left;
-}
-
-.float-right {
-	float: right;
-}
-
-/*-------------------------------------*/
-/* Section 10.3 - Title decoration box */
-/*-------------------------------------*/
-
-.box-on {
-	float: left; width: 1.0em; margin-right: 0.2em; padding-left: 0.3em;
-}
-
-.box-off {
-	display: none;
-}
-
-/*---------------------------*/
-/* Section 10.4  Text colors */
-/*---------------------------*/
-
-/* Basic Colors */
-.txt-white {
-	color: rgb(255,255,255);
-}
-
-.txt-black {
-	color: rgb(0,0,0);
-}
-
-/* Grey */
-.txt-grey01 {
-	color: rgb(242,242,242);
-}
-
-.txt-grey02 {
-	color: rgb(230,230,230);
-}
-
-.txt-grey03 {
-	color: rgb(217,217,217);
-}
-
-.txt-grey04 {
-	color: rgb(204,204,204);
-}
-
-.txt-grey05 {
-	color: rgb(191,191,191);
-}
-
-.txt-grey06 {
-	color: rgb(178,178,178);
-}
-
-.txt-grey07 {
-	color: rgb(153,153,153);
-}
-
-.txt-grey08 {
-	color: rgb(127,127,127);
-}
-
-.txt-grey09 {
-	color: rgb(89,89,89);
-}
-
-.txt-grey10 {
-	color: rgb(51,51,51);
-}
-
-/* Yellow */
-.txt-yellow01 {
-	color: rgb(254,252,232);
-}
-
-.txt-yellow02 {
-	color: rgb(253,249,201);
-}
-
-.txt-yellow03 {
-	color: rgb(253,246,185);
-}
-
-.txt-yellow04 {
-	color: rgb(252,243,162);
-}
-
-.txt-yellow05 {
-	color: rgb(251,239,139);
-}
-
-.txt-yellow06 {
-	color: rgb(250,236,116);
-}
-
-.txt-yellow07 {
-	color: rgb(249,233,93);
-}
-
-.txt-yellow08 {
-	color: rgb(249,230,69);
-}
-
-.txt-yellow09 {
-	color: rgb(248,227,46);
-}
-
-.txt-yellow10 {
-	color: rgb(247,224,23);
-}
-
-/* Blue */
-.txt-blue01 {
-	color: rgb(238,237,249);
-}
-
-.txt-blue02 {
-	color: rgb(222,220,242);
-}
-
-.txt-blue03 {
-	color: rgb(205,202,236);
-}
-
-.txt-blue04 {
-	color: rgb(189,185,229);
-}
-
-.txt-blue05 {
-	color: rgb(172,167,223);
-}
-
-.txt-blue06 {
-	color: rgb(155,149,217);
-}
-
-.txt-blue07 {
-	color: rgb(139,132,210);
-}
-
-.txt-blue08 {
-	color: rgb(122,114,204);
-}
-
-.txt-blue09 {
-	color: rgb(106,97,197);
-}
-
-.txt-blue10 {
-	color: rgb(89,79,191);
-}
-
-/* Green */
-.txt-green01 {
-	color: rgb(237,246,229);
-}
-
-.txt-green02 {
-	color: rgb(220,238,204);
-}
-
-.txt-green03 {
-	color: rgb(202,229,178);
-}
-
-.txt-green04 {
-	color: rgb(185,220,153);
-}
-
-.txt-green05 {
-	color: rgb(167,211,127);
-}
-
-.txt-green06 {
-	color: rgb(149,203,102);
-}
-
-.txt-green07 {
-	color: rgb(132,194,76);
-}
-
-.txt-green08 {
-	color: rgb(114,185,51);
-}
-
-.txt-green09 {
-	color: rgb(97,177,25);
-}
-
-.txt-green10 {
-	color: rgb(79,168,0);
-}
-
-/* Red */
-.txt-red01 {
-	color: rgb(252,235,233);
-}
-
-.txt-red02 {
-	color: rgb(248,216,211);
-}
-
-.txt-red03 {
-	color: rgb(245,196,188);
-}
-
-.txt-red04 {
-	color: rgb(242,177,166);
-}
-
-.txt-red05 {
-	color: rgb(238,157,144);
-}
-
-.txt-red06 {
-	color: rgb(235,137,122);
-}
-
-.txt-red07 {
-	color: rgb(232,118,100);
-}
-
-.txt-red08 {
-	color: rgb(229,98,77);
-}
-
-.txt-red09 {
-	color: rgb(225,79,55);
-}
-
-.txt-red10 {
-	color: rgb(222,59,33);
-}
-
-/*----------------------------------*/
-/* Section 10.5 - Background colors */
-/*----------------------------------*/
-
-/* Basic Colors */
-.bg-white {
-	background-color: rgb(255,255,255);
-}
-
-.bg-black {
-	background-color: rgb(0,0,0);
-}
-
-/* Grey */
-.bg-grey01 {
-	background-color: rgb(242,242,242);
-}
-
-.bg-grey02 {
-	background-color: rgb(230,230,230);
-}
-
-.bg-grey03 {
-	background-color: rgb(217,217,217);
-}
-
-.bg-grey04 {
-	background-color: rgb(204,204,204);
-}
-
-.bg-grey05 {
-	background-color: rgb(191,191,191);
-}
-
-.bg-grey06 {
-	background-color: rgb(178,178,178);
-}
-
-.bg-grey07 {
-	background-color: rgb(153,153,153);
-}
-
-.bg-grey08 {
-	background-color: rgb(127,127,127);
-}
-
-.bg-grey09 {
-	background-color: rgb(89,89,89);
-}
-
-.bg-grey10 {
-	background-color: rgb(51,51,51);
-}
-
-/* Yellow */
-.bg-yellow01 {
-	background-color: rgb(254,252,232);
-}
-
-.bg-yellow02 {
-	background-color: rgb(253,249,201);
-}
-
-.bg-yellow03 {
-	background-color: rgb(253,246,185);
-}
-
-.bg-yellow04 {
-	background-color: rgb(252,243,162);
-}
-
-.bg-yellow05 {
-	background-color: rgb(251,239,139);
-}
-
-.bg-yellow06 {
-	background-color: rgb(250,236,116);
-}
-
-.bg-yellow07 {
-	background-color: rgb(249,233,93);
-}
-
-.bg-yellow08 {
-	background-color: rgb(249,230,69);
-}
-
-.bg-yellow09 {
-	background-color: rgb(248,227,46);
-}
-
-.bg-yellow10 {
-	background-color: rgb(247,224,23);
-}
-
-/* Blue */
-.bg-blue01 {
-	background-color: rgb(238,237,249);
-}
-
-.bg-blue02 {
-	background-color: rgb(222,220,242);
-}
-
-.bg-blue03 {
-	background-color: rgb(205,202,236);
-}
-
-.bg-blue04 {
-	background-color: rgb(189,185,229);
-}
-
-.bg-blue05 {
-	background-color: rgb(172,167,223);
-}
-
-.bg-blue06 {
-	background-color: rgb(155,149,217);
-}
-
-.bg-blue07 {
-	background-color: rgb(139,132,210);
-}
-
-.bg-blue08 {
-	background-color: rgb(122,114,204);
-}
-
-.bg-blue09 {
-	background-color: rgb(106,97,197);
-}
-
-.bg-blue10 {
-	background-color: rgb(89,79,191);
-}
-
-/* Green */
-.bg-green01 {
-	background-color: rgb(237,246,229);
-}
-
-.bg-green02 {
-	background-color: rgb(220,238,204);
-}
-
-.bg-green03 {
-	background-color: rgb(202,229,178);
-}
-
-.bg-green04 {
-	background-color: rgb(185,220,153);
-}
-
-.bg-green05 {
-	background-color: rgb(167,211,127);
-}
-
-.bg-green06 {
-	background-color: rgb(149,203,102);
-}
-
-.bg-green07 {
-	background-color: rgb(132,194,76);
-}
-
-.bg-green08 {
-	background-color: rgb(114,185,51);
-}
-
-.bg-green09 {
-	background-color: rgb(97,177,25);
-}
-
-.bg-green10 {
-	background-color: rgb(79,168,0);
-}
-
-/* Red */
-.bg-red01 {
-	background-color: rgb(252,235,233);
-}
-
-.bg-red02 {
-	background-color: rgb(248,216,211);
-}
-
-.bg-red03 {
-	background-color: rgb(245,196,188);
-}
-
-.bg-red04 {
-	background-color: rgb(242,177,166);
-}
-
-.bg-red05 {
-	background-color: rgb(238,157,144);
-}
-
-.bg-red06 {
-	background-color: rgb(235,137,122);
-}
-
-.bg-red07 {
-	background-color: rgb(232,118,100);
-}
-
-.bg-red08 {
-	background-color: rgb(229,98,77);
-}
-
-.bg-red09 {
-	background-color: rgb(225,79,55);
-}
-
-.bg-red10 {
-	background-color: rgb(222,59,33);
-}
-
-/******************************/
-/* SECTION 11 - MISCELLANEOUS */
-/******************************/
-
-/* Horizontal line */
-hr {
-	clear: both; width: 425px; height: 1px; border: none;
-}
-
-/* HTML-code examples */
-.showcode {
-  font-family: monospace; font-weight: bold; font-size: 13px; color: rgb(255,0,0);
-}
-
-/* Hide HTML-tags. Good when no pagestyle supported by browser */
-.hide {
-	display: none;
-}
-
-br {
-	clear: both;
-}
-
-.navbarmain {
-    clear:left;
-}
-
-/* Added by Shlomi Fish for the Perl Beginners' Site */
-
-div.bookinfo h3
-{
-    border : none;
-    margin-top : 0em;
-    color : green;
-    padding-left : 0em;
-    background-color : transparent;
-}
-
-div.bookinfo 
-{ 
-    border-style : dotted;
-    border-width : thin;
-    /* LightYellow */
-    background-color : #FFFFE0;
-    margin-left : 1em;
-    margin-right : 1em;
-    margin-bottom: 1.5em;
-    padding-left : 1em;
-    padding-bottom : 0.3em;
-    padding-top : 0.3em;
-}
-
-.footer b
-{
-    color: black;
-}
-
-.bless
-{
-    border: none;
-    margin-bottom: 0.5em;
-    margin-left: 0.5em;
-}
-
-.full_width_notice
-{
-    border: black thin solid;
-    background-color: #CCCCFF;
-    font-size: 120%;
-    padding: 0.5em;
-    margin-bottom: 0.5em;
-}
-
-.full_width_notice:hover
-{
-    background-color: #EEEEFF;
-}
-
-.full_width_notice p
-{
-    margin-left: auto;
-    margin-right: auto;
-    text-align: center;
-    margin-top: 0;
-    margin-bottom: 0;
-}
-
-.quotation
-{
-    border: black thin solid;
-    background-color: #ffa;
-    padding: 0.7em;
-    margin-bottom: 1em;
-}
-
-.quotation .q
-{
-    font-weight: bold;
-}
-
-.further_reading
-{
-    float: right;
-    border: #99b double medium;
-    padding: 0.5em;
-    margin: 0.5em;
-    width: 130px;
-    background-color: #ddf;
-}
-
-.further_reading ul
-{
-    padding-left: 1.5em;
-
-}
-
-.site-name h1 a {
-    color: white;
-    text-decoration: none;
-}
-
-pre
-{
-    line-height:1.4em;
-}
-
-h2 strong
-{
-    color: #F00;
-}
-
-.screenshot
-{
-    float: right;
-    border: black double 3pt;
-    padding: 0.5em;
-    margin: 0.5em;
-}
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}*:focus{outline:0}body{line-height:1em;color:black;background:#fff}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0;vertical-align:middle}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}q,blockquote{quotes:"" ""}q:before,q:after,blockquote:before,blockquote:after{content:""}img a{border:none}body{line-height:1.5;font-family:Helvetica Neue, Arial, Helvetica, sans-serif;color:#333333;font-size:75%}h1{font-weight:normal;color:#222222;font-size:3em;line-height:1;margin-bottom:0.5em}h1 img{margin:0}h2{font-weight:normal;color:#222222;font-size:2em;margin-bottom:0.75em}h3{font-weight:normal;color:#222222;font-size:1.5em;line-height:1;margin-bottom:1em}h4{font-weight:normal;color:#222222;font-size:1.2em;line-height:1.25;margin-bottom:1.25em}h5{font-weight:normal;color:#222222;font-size:1em;font-weight:bold;margin-bottom:1.5em}h6{font-weight:normal;color:#222222;font-size:1em;font-weight:bold}h2 img,h3 img,h4 img,h5 img,h6 img{margin:0}p{margin:0 0 1.5em}p img.left{display:inline;float:left;margin:1.5em 1.5em 1.5em 0;padding:0}p img.right{display:inline;float:right;margin:1.5em 0 1.5em 1.5em;padding:0}a{text-decoration:underline;color:#000099}a:visited{color:#000066}a:focus{color:black}a:hover{color:black}a:active{color:#cc0099}blockquote{margin:1.5em;color:#666;font-style:italic}strong{font-weight:bold}em{font-style:italic}dfn{font-style:italic;font-weight:bold}sup,sub{line-height:0}abbr,acronym{border-bottom:1px dotted #666}address{margin:0 0 1.5em;font-style:italic}del{color:#666}pre{margin:1.5em 0;white-space:pre}pre,code,tt{font:1em 'andale mono', 'lucida console', monospace;line-height:1.5}li ul,li ol{margin:0 1.5em}ul{margin:0 1.5em 1.5em 1.5em;list-style-type:disc}ol{margin:0 1.5em 1.5em 1.5em;list-style-type:decimal}dl{margin:0 0 1.5em 0}dl dt{font-weight:bold}dd{margin-left:1.5em}table{margin-bottom:1.4em;width:100%}th{font-weight:bold}thead th{background:#c3d9ff}th,td,caption{padding:4px 10px 4px 5px}tr.even td{background:#e5ecf9}tfoot{font-style:italic}caption{background:#eee}.quiet{color:#666666}.loud{color:#111111}.showgrid{background:url('images/grid.png?1251081007')}#page-container{width:950px;margin:0 auto;overflow:hidden;display:inline-block;width:100%;color:#000}#page-container{display:block}.hide{display:none}a{color:blue}a:hover{color:red}a:active{color:green}a:visited{color:#006400}a:visited:hover{color:red}h1,h2,h3{font-family:arial,verdana,sans-serif !important;font-weight:bold}#header{position:relative;background-color:#6a9850;background-image:url('./images/header.jpg');background-repeat:no-repeat;background-position:center center;height:110px}#header .site-name{position:absolute;top:20px}#header .site-name h1{margin:0px}#header .site-name h1 a{background-color:#008000;color:#fff;text-decoration:none;font-weight:bold}#header .site-slogan{position:absolute;top:70px;background-color:#008000;color:#e1e1e1;font-weight:bold;font-size:1.3em}#header .nav-global{position:absolute;top:2px;margin:0;padding:0;border:0;outline:0;overflow:hidden;display:inline-block}#header .nav-global{display:block}#header .nav-global li{list-style-type:none;margin-left:0px;white-space:nowrap;display:inline;float:left;padding-left:4px;padding-right:4px}#header .nav-global li.first{padding-left:0px}#header .nav-global li.last{padding-right:0px}#header .nav-global ul{display:block;margin-left:100px}#header .nav-global ul li a{font-size:1.2em;text-transform:uppercase;color:#969696;text-decoration:none;border-left:1px solid;padding-left:5px}#header .nav-global ul li a:hover{color:#000}.nav-main{border:1px solid #7d7d7d;border:1px 0px;background-color:#bebebe;padding-left:50px}.nav-main a{color:#fff;text-decoration:none;font-size:1.3em}.nav-main a:hover{color:#6e6e6e}#left-sidebar{display:inline;float:left;margin-right:10px;width:190px;border-top:5px solid #000;background-color:#cce0ff;padding-top:20px;padding-left:5px;font-size:1.2em;margin:10px}* html #left-sidebar{overflow-x:hidden}#left-sidebar h2{font-size:1.4em;font-weight:bold}#content{width:500px;float:left;padding-right:20px;font-size:1.3em;margin-top:20px}#content .full_width_notice{font-size:1.2em;background-color:#ccccff;text-align:center;border:1px solid #000;width:400px;margin:50px auto}#content .full_width_notice:hover{background-color:#eeeeff}#content .toggle_nav_control{margin-top:20px}#content h1{font-size:1.7em}#content h2{font-size:1.5em}#content pre{font-family:monospace}#right-sidebar{display:inline;float:left;margin-right:10px;width:150px;margin-right:0;font-size:1.3em;padding-top:20px;padding-left:5px;margin:10px;color:#6e6e6e}* html #right-sidebar{overflow-x:hidden}#right-sidebar h2{font-size:1.2em;font-weight:bold;text-align:center}#right-sidebar .testimonials{background-color:#edf6e5;border:1px solid #c8c8c8;padding:5px}#right-sidebar .testimonials h2{color:#6e6e6e;background-color:#dceecc}#right-sidebar .news-box{margin-top:20px;border:1px solid #c8c8c8;padding:5px}#right-sidebar .news-box h2{background-color:#e1e1e1}#right-sidebar .news-box h2 a{color:#008800}#footer{border-top:1px solid #7d7d7d;text-align:center;font-size:1.2em;margin-bottom:10px}

File template.wml

 
 <latemp_before_body>
 <div class="full_width_notice">
-<p>
-<b>Learn Perl Now!</b> <a href="$(ROOT)/learn/">More…</a> 
+<b><a href="$(ROOT)/learn/">Learn Perl Now!</a></b><br />
 And <a href="$(ROOT)/learn/get-a-job/">get a job</a> doing 
 Perl.
-</p>
 </div>
 </latemp_before_body>
 
 <perl_begin_sidebar>
     <!-- SIDEBAR -->
     <h3 class="hide">Sidebar</h3>    
-    <div class="sidebar sidebar-font">
+    <div id="right-sidebar">
 
       {#PERL_BEGIN_NEWS#}
 
 
 <latemp_extra_head_elements>
 <script type="text/javascript" src="$(ROOT)/js/jq.js"></script>
+<script type="text/javascript" src="$(ROOT)/js/position_divs.js"></script>
 {#PAGE_EXTRA_HEAD_ELEMENTS#}
 </latemp_extra_head_elements>
 
 </define-tag>
 
 <latemp_license>
-<p>
 <!-- Creative Commons License -->
 This work is <b>licensed</b> under the <a rel="license" 
 href="http://creativecommons.org/licenses/by/2.0/">Creative Commons 
-Attribution License version 2.0</a> (or at your option any later version).
+Attribution License version 2.0</a> (or at your option any later version).<br />
 <!-- /Creative Commons License -->
-</p>
 
 <!--
 
 </latemp_license>
 
 <latemp_webmaster>
-<p>
 <b>Webmaster:</b> <a href="http://www.shlomifish.org/">Shlomi Fish</a> (<a href=
-"mailto:shlomif@iglu.org.il">Email - shlomif@iglu.org.il</a>)
-</p>
-<p>
+"mailto:shlomif@iglu.org.il">Email - shlomif@iglu.org.il</a>)<br />
 <b>Original Design:</b> <a href="http://www.oswd.org/design/preview/id/2933">GoFlexiblePro</a>
 | Author: <a href="mailto:gw@actamail.com">G. Wolfgang</a>
 |  <a href="http://validator.w3.org/check?uri=referer" title="Validate code as W3C XHTML 1.1 Strict Compliant">W3C XHTML 1.1</a>
 | <a href="http://jigsaw.w3.org/css-validator/" title="Validate Style Sheet as W3C CSS 2.0 Compliant">W3C CSS 2.0</a>
-</p>
-<p>
+<br />
 <b>Hosted by:</b> <a href="http://hexten.net/">Hexten.net</a>.
-</p>
 <script type="text/javascript" src="$(ROOT)/js/selfl.js"></script>
 </latemp_webmaster>
 
 
     <!-- HEADER -->
     <!-- Global Navigation -->
-    <h3 class="hide">Global Navigation</h3>
-    <div class="nav-global-container">
-      <div class="nav-global nav-global-font">
+    <div id='header'>
+
+<!-- Sitename and Banner -->
+      <div class="site-name" id="js-site-name">
+        <h1><a href="$(ROOT)/">Perl Beginners' Site</a></h1>
+      </div>
+      <div class="site-slogan" id="js-site-slogan">
+          Perl - because programming should be fun.
+      </div>                 
+      <!--<div><img class="img-header" src="$(ROOT)/images/header.jpg" alt=""/></div>-->
+      
+      <h3 class="hide">Global Navigation</h3>
+      <div class="nav-global" id="js-nav-global">
         <ul>
           <li><a href="$(ROOT)/about.html">About Us</a></li>
           <li><a href="$(ROOT)/contact/">Contact</a></li>
         </ul>
       </div>
-    </div>        
-
-    <!-- Sitename and Banner -->
-    <div class="site-name">
-      <h1><a href="$(ROOT)/">Perl Beginners' Site</a></h1>
-      <div class="site-slogan">
-        Perl - because programming should be fun.
-      </div>
-    </div>                 
-    <div><img class="img-header" src="$(ROOT)/images/header.jpg" alt=""/></div>
+    </div>
     
     <!-- Main navigation -->                    
     <h3 class="hide">Breadcrumbs Trail</h3>    
-    <div class="nav-main nav-main-font">
+    <div class="nav-main">
       <latemp_get_breadcrumbs_trail />
     </div>
     
-    <!-- FRONT PAGE SIDEBANNER -->
     <h3 class="hide">Main Navigation</h3>
-    <div class="sidebanner-frontpage">
-    <div class="buffer"></div>
-      <div class="navbar-sidebanner">
-        <latemp_get_nav_menu_html />
-        <latemp_affiliations_buttons_text />
-      </div>
+    <div id="left-sidebar">
+      <latemp_get_nav_menu_html />
+      <latemp_affiliations_buttons_text />
     </div>
 
-    <!-- WRAP CONTENT AND SIDEBAR -->
-    <div class="container-content-sidebar">            
-
     <!--   CONTENT -->
     <h3 class="hide">Content</h3>
-    <div class="content content-font">
-
-      <!-- Page title -->    
-      <latemp_default_h1_tag />
+    <div id='content'>
+        <!-- Page title -->   
+        <latemp_default_h1_tag />
       
-;;;      <div class="contentbox-container-left">
-;;;        <div class="contentbox-noshading">
-
-{#LATEMP_BEFORE_BODY#}
-{#LATEMP_BODY#}
-<share_this_button />
-;;;        </div>
-;;;      </div>
+        {#LATEMP_BEFORE_BODY#}
+        {#LATEMP_BODY#}
+        #<share_this_button />
     </div>
     
     {#PERL_BEGIN_SIDEBAR#}
     
     <!-- FOOTER -->
     <h3 class="hide">Footer</h3>
-    <div class="footer footer-font">
+    <div id="footer">
         <latemp_license_text />
         <latemp_webmaster_text />
     </div>