Commits

shl...@13c2ddb8-3aa7-4284-800b-8db07c650eef  committed dc68962

The new design is integrated, but most of the navigation aids have
disappeared. Still need to work on it.

  • Participants
  • Parent commits 0e1ebfb
  • Branches site-redesign-take-2

Comments (0)

Files changed (8)

File src/images/background.gif

Added
New image

File src/images/header.jpg

Added
New image

File src/images/image.jpg

Added
New image

File src/images/sidebanner.jpg

Added
New image

File src/style-old.css.ttml

+body { font-family : sans-serif }
+[% SET navbar_width = "20%" %]
+[% PROCESS "shlomif/navbar.ttml" %]
+/* 
+This is to make sure the visited links look clear in Konqueror or other
+browsers where they are magenta by default.
+*/
+:visited
+{
+    color: #800080; /* Purple */
+}
+:link:hover, :visited:hover, img.highlight:hover 
+{ 
+    /* A Yellow Greenish Color */
+    background-color : #EEFF40; 
+}
+.navbar :link:hover, .navbar :visited:hover, .navbar img.highlight:hover 
+{ 
+    /* LightGreen */
+    background-color :  #90EE90;
+}
+.navbar 
+{ 
+    /* Moccasin: FFE4B5 */
+    background-color: #FFE4B5;
+    border-color : black;
+    border-width : thick;
+    border-style : double;
+}
+.main 
+{
+    padding-left : 10pt;
+    margin-left : 24%;
+}
+/*
+Tweaks to make the margins and paddings of the elements inside the
+main content better.
+*/
+.main > p, .main > ul, .main > ol, .main > dl
+{
+    margin-left: 14pt;
+    margin-right: 14pt;    
+}
+.main > ul, .main > ol, .main > dl
+{
+    padding-left: 14pt;
+}
+.main > ul > li > p
+{
+    padding-left: 6pt;
+}
+h1, h2, h3
+{
+    font-family : serif;
+    border-style : solid ; 
+    border-width : thin;
+    padding-left: 4pt;
+    padding-right: 4pt;
+}
+h1
+{
+    /* A colour like MediumOrchid only lighter and with less 
+       saturation.
+       */
+    background-color : #e187f7;
+}
+h2
+{
+    background-color : #ccffdd;
+    margin-right : 1.5em;
+}
+h2 :link:hover, h2 :visited:hover
+{
+    background-color : #ff4f8a ;
+}
+/* Override for the navbar so it won't be highligted as red there */
+.navbar h2 :link:hover, .navbar h2 :visited:hover
+{ 
+    /* LightGreen */
+    background-color : #90EE90; 
+}
+
+h3
+{
+    /* LemonChiffon */
+    background-color : #FFFACD;
+    margin-right : 3em;
+}
+
+.navbar h2 { color: black ; border : none ; font-size : large ; margin-left : 0.5em ; background-color : transparent }
+p.desc { margin-left : 3em }
+ul.navbarmain { font-size : 90%}
+
+h3.newsitem { text-indent: 3em }
+p.newsitem { margin-left : 6em }
+div.indent { margin-left : 3em }
+p.indent { margin-left : 3em  }
+div.rightalign { text-align : right }
+
+h2.plain
+{ 
+    color : black ; 
+    border : none ; 
+    font-family : serif; 
+    background: transparent;
+}
+    
+/* Make sure it is not underlined when inside a boxed heading */
+h2 a,h3 a
+{
+    text-decoration : none
+}
+
+h1 a, h2 a, h3 a 
+{
+    font-family : sans-serif;
+}
+
+
+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;
+    padding-left : 1em;
+    padding-bottom : 0.3em;
+    padding-top : 0.3em;
+}
+tt { color : #8A2BE2 /* The BlueViolet Color */ }
+.news
+{
+    /* LightYellow */
+    background-color : #FFFFE0;
+    float : right;
+    width : 20%;
+    margin-left : 0.5em;
+    margin-bottom : 1em;
+    border-color : black;
+    border-width : thick;
+    border-style : double;
+}
+.bless
+{
+    border : none;
+}
+.footer
+{
+    clear : both;
+    margin-right : 30px;
+    padding-top: 0.5em;
+}
+/* Workaround to get the <hr /> element at the bottom to properly display 
+   with Konqueror 3.3.x
+   */
+.footer hr
+{
+    width:100%;
+    clear:both;
+}
+.banner
+{
+    text-align: center;
+    margin-bottom: 4pt;
+}
+[% PROCESS "shlomif/common_defs.ttml" %]

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 {
+	font-size: 62.5%; margin: 0em auto; padding: 0em; background: url(./images/background.gif) top center repeat-y; font-family: "trebuchet ms", verdana, arial, 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); background-color: rgb(237,237,237);
+}
+
+/**********************/
+/* 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: 11.7em; top: 1.9em; left: 16px; margin: 0px; padding: 0px 3px 1px 3px; background-color: rgb(150,150,150);	color: rgb(225,225,225); font-weight: bold; font-size: 14px;
+}
+
+.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 li a {
+	color: rgb(255,255,255); margin: 0px; padding: 0px 10px 0px 10px; border-right: solid 1px rgb(255,255,255); text-decoration: none; font-size: 130%;		
+}
+
+.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: 160px; margin: 0px; padding: 0px;
+}
+
+.img-sidebanner {
+	width: 160px; margin: 0px; padding: 0px; border: 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: 620px; min-height: 400px; 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: 400px;
+} 
+/* 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: 425px; margin: 0px; padding: 30px 20px 0px 20px; background-color: rgb(255,255,255);	
+}
+
+/*-------------------------*/
+/* 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: 150%;
+}
+
+h2 {
+	clear: left; margin: 1.5em 0px 1.0em 0px; font-weight: bold; font-size: 140%;
+}
+
+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: 130%;
+}
+
+/* Paragraph text */
+p {
+   clear: left; margin: 0em 0px 0.5em 0px; padding: 0px; font-size: 130%;
+}
+
+/* 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 {
+	margin: 0px 10px 0px 10px; padding: 0px 0px 0px 30px; list-style-type: disc; list-style-position: outside; font-size: 130%;
+}
+
+/* Ordered List */
+.content ol {
+	margin: 0px 10px 0px 17px; padding: 0px 0px 0px 30px; list-style-type: decimal; list-style-position: outside; font-size: 130%;
+}
+
+/*--------------------------*/
+/* 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);
+}
+
+/*-----------------------------*/
+/* 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 2px 5px; background-color: rgb(225,225,225); font-weight: bold; font-size: 120%;
+}
+
+/*------------------------------*/
+/* 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: rgb(0,0,0); text-decoration: underline;
+}
+
+.content a:hover, .sidebar a:hover {
+	color: rgb(110,110,110); text-decoration: none;
+}
+
+.content a:visited, .sidebar a:visited {
+	color: rgb(110,110,110);
+}
+
+.footer a {
+	color: rgb(150,150,150); text-decoration: underline;
+}
+
+.footer a:hover {
+	color: rgb(0,0,0); text-decoration: none;
+}
+
+/********************************/
+/* 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; color: rgb(110,110,110);
+}
+
+.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: rgb(150,150,150);
+}
+
+/*--------------------------------------*/
+/* 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;
+}

File src/style.css.ttml

-body { font-family : sans-serif }
-[% SET navbar_width = "20%" %]
-[% PROCESS "shlomif/navbar.ttml" %]
-/* 
-This is to make sure the visited links look clear in Konqueror or other
-browsers where they are magenta by default.
-*/
-:visited
-{
-    color: #800080; /* Purple */
-}
-:link:hover, :visited:hover, img.highlight:hover 
-{ 
-    /* A Yellow Greenish Color */
-    background-color : #EEFF40; 
-}
-.navbar :link:hover, .navbar :visited:hover, .navbar img.highlight:hover 
-{ 
-    /* LightGreen */
-    background-color :  #90EE90;
-}
-.navbar 
-{ 
-    /* Moccasin: FFE4B5 */
-    background-color: #FFE4B5;
-    border-color : black;
-    border-width : thick;
-    border-style : double;
-}
-.main 
-{
-    padding-left : 10pt;
-    margin-left : 24%;
-}
-/*
-Tweaks to make the margins and paddings of the elements inside the
-main content better.
-*/
-.main > p, .main > ul, .main > ol, .main > dl
-{
-    margin-left: 14pt;
-    margin-right: 14pt;    
-}
-.main > ul, .main > ol, .main > dl
-{
-    padding-left: 14pt;
-}
-.main > ul > li > p
-{
-    padding-left: 6pt;
-}
-h1, h2, h3
-{
-    font-family : serif;
-    border-style : solid ; 
-    border-width : thin;
-    padding-left: 4pt;
-    padding-right: 4pt;
-}
-h1
-{
-    /* A colour like MediumOrchid only lighter and with less 
-       saturation.
-       */
-    background-color : #e187f7;
-}
-h2
-{
-    background-color : #ccffdd;
-    margin-right : 1.5em;
-}
-h2 :link:hover, h2 :visited:hover
-{
-    background-color : #ff4f8a ;
-}
-/* Override for the navbar so it won't be highligted as red there */
-.navbar h2 :link:hover, .navbar h2 :visited:hover
-{ 
-    /* LightGreen */
-    background-color : #90EE90; 
-}
-
-h3
-{
-    /* LemonChiffon */
-    background-color : #FFFACD;
-    margin-right : 3em;
-}
-
-.navbar h2 { color: black ; border : none ; font-size : large ; margin-left : 0.5em ; background-color : transparent }
-p.desc { margin-left : 3em }
-ul.navbarmain { font-size : 90%}
-
-h3.newsitem { text-indent: 3em }
-p.newsitem { margin-left : 6em }
-div.indent { margin-left : 3em }
-p.indent { margin-left : 3em  }
-div.rightalign { text-align : right }
-
-h2.plain
-{ 
-    color : black ; 
-    border : none ; 
-    font-family : serif; 
-    background: transparent;
-}
-    
-/* Make sure it is not underlined when inside a boxed heading */
-h2 a,h3 a
-{
-    text-decoration : none
-}
-
-h1 a, h2 a, h3 a 
-{
-    font-family : sans-serif;
-}
-
-
-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;
-    padding-left : 1em;
-    padding-bottom : 0.3em;
-    padding-top : 0.3em;
-}
-tt { color : #8A2BE2 /* The BlueViolet Color */ }
-.news
-{
-    /* LightYellow */
-    background-color : #FFFFE0;
-    float : right;
-    width : 20%;
-    margin-left : 0.5em;
-    margin-bottom : 1em;
-    border-color : black;
-    border-width : thick;
-    border-style : double;
-}
-.bless
-{
-    border : none;
-}
-.footer
-{
-    clear : both;
-    margin-right : 30px;
-    padding-top: 0.5em;
-}
-/* Workaround to get the <hr /> element at the bottom to properly display 
-   with Konqueror 3.3.x
-   */
-.footer hr
-{
-    width:100%;
-    clear:both;
-}
-.banner
-{
-    text-align: center;
-    margin-bottom: 4pt;
-}
-[% PROCESS "shlomif/common_defs.ttml" %]

File template.wml

-<set-var latemp_navmenu_object_class="HTML::Widgets::NavMenu::HeaderRole" />
-<set-var latemp_with_xml_declaration="1" />
-<set-var latemp_html_standard="xhtml1.1" />
-<set-var latemp_with_head_meta_tags="1" />
-<set-var latemp_with_favicon="1" />
+#include "latemp/latemp-prelude.wml"
+<latemp_init_h_w_navmenu />
 
-#include "latemp/latemp-main.wml"
-#include "shlomif/affiliations.wml"
+<latemp_html_header />
+<latemp_html_head_tag />
 
-<latemp_lang "en-US" />
-<latemp_encoding "iso-8859-1" />
-<latemp_author "Shlomi Fish" />
-<latemp_common_keywords "Perl, perl, beginners, newbies, learn, web design, Berlios, system administration, Unix, unix, UNIX, Linux, Shlomi Fish" />
-<latemp_meta_desc "Perl Beginners' Site - a Portal for Perl Beginners" />
-<latemp_affiliations_buttons>
-<affil_collection_berlios />
-</latemp_affiliations_buttons>
-<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>
-</latemp_webmaster>
+<define-tag nav_global_flags>
+          <li><a href="#"><img class="img-flag" src="./img/flag_uk.gif" title="Website in English" alt=""/></a></li>
+          <li><a href="#"><img class="img-flag" src="./img/flag_spain.gif" title="Website en Espanol" alt=""/></a></li>
+          <li><a href="#"><img class="img-flag" src="./img/flag_france.gif" title ="Website en Francais" alt=""/></a></li>
+          <li><a href="#"><img class="img-flag" src="./img/flag_germany.gif" title ="Website auf Deutsch" alt=""/></a></li>
+</define-tag>
+<body>
 
-<latemp_license>
-<p>
-<!-- Creative Commons License -->
-<a rel="license" href="http://creativecommons.org/licenses/by/2.0/"><img 
-alt="Creative Commons License"
-src="$(ROOT)/images/somerights20.png" class="bless" /></a><br />
-This work is licensed under a <a rel="license" 
-href="http://creativecommons.org/licenses/by/2.0/">Creative Commons 
-License</a>.
-<!-- /Creative Commons License -->
-</p>
+  <div id="page-container">
 
-<!--
+    <!-- HEADER -->
+    <!-- Global Navigation -->
+    <h3 class="hide">Global Navigation</h3>
+    <div class="nav-global-container">
+      <div class="nav-global nav-global-font">
+        <ul>
+          <li><a href="#">About Us</a></li>
+          <li><a href="#">Contact</a></li>
+          <li><a href="#">Impressum</a></li>
+        </ul>
+      </div>
+    </div>        
 
-<rdf:RDF xmlns="http://web.resource.org/cc/"
-    xmlns:dc="http://purl.org/dc/elements/1.1/"
-    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
-<Work rdf:about="">
-   <dc:title>Better SCM Site Contents</dc:title>
-   <dc:date>2004</dc:date>
-   <dc:description>A Version Control Systems Information and Advocacy carrying site</dc:description>
-   <dc:creator><Agent>
-      <dc:title>Shlomi Fish</dc:title>
-   </Agent></dc:creator>
-   <dc:rights><Agent>
-      <dc:title>Shlomi Fish</dc:title>
-   </Agent></dc:rights>
-   <dc:type rdf:resource="http://purl.org/dc/dcmitype/Text" />
-   <license rdf:resource="http://creativecommons.org/licenses/by/2.0/" />
-</Work>
+    <!-- Sitename and Banner -->
+    <div class="site-name">
+      Your Sitename.
+      <div class="site-slogan">
+        Your slogan.
+      </div>
+    </div>                 
+    <div><img class="img-header" src="$(ROOT)/images/header.jpg" alt=""/></div>
+    
+    <!-- Main navigation -->                    
+    <h3 class="hide">Main Navigation</h3>    
+    <div class="nav-main nav-main-font">      
+      <ul>
+        <li><a href="index.html" class="selected">Front Page</a></li>
+        <li><a href="content.html">Content Page</a></li>
+        <li><a href="options.html">Options</a></li>        
+      </ul>
+    </div>
+    
+    <!-- FRONT PAGE SIDEBANNER -->
+    <h3 class="hide">Sub-Navigation</h3>
+    <div class="sidebanner-frontpage">
+    <div class="buffer"></div>
+      <img class="img-sidebanner" src="$(ROOT)/images/sidebanner.jpg" alt=""/>
+    </div>
 
-<License rdf:about="http://creativecommons.org/licenses/by/2.0/">
-   <permits rdf:resource="http://web.resource.org/cc/Reproduction" />
-   <permits rdf:resource="http://web.resource.org/cc/Distribution" />
-   <requires rdf:resource="http://web.resource.org/cc/Notice" />
-   <requires rdf:resource="http://web.resource.org/cc/Attribution" />
-   <permits rdf:resource="http://web.resource.org/cc/DerivativeWorks" />
-</License>
+    <!-- WRAP CONTENT AND SIDEBAR -->
+    <div class="container-content-sidebar">            
 
-</rdf:RDF>
+    <!--   CONTENT -->
+    <h3 class="hide">Content</h3>
+    <div class="content content-font">
 
--->
-</latemp_license>
+      <!-- Page title -->    
+      <div class="content-pagetitle"><p>WELCOME -- GoFlexiblePro</p></div>
+      
+;;;      <div class="contentbox-container-left">
+;;;        <div class="contentbox-noshading">
 
+{#LATEMP_BODY#}
+;;;        </div>
+;;;      </div>
+    </div>
+    <!-- SIDEBAR -->
+    <h3 class="hide">Sidebar</h3>    
+    <div class="sidebar sidebar-font">
 
+      <div class="sidebarbox-border bg-yellow03">
+        <div class="sidebarbox-title-shading bg-yellow07">News and Links</div>
+        <p>Use this column for news, events, links, ad banners, or other things.</p>              
+        <p><a href="#">Link A</a></p>
+        <p><a href="#">Link B</a></p>    
+      </div>                        
 
-<define-tag email:link>
-<a href="mailto:%0">%0</a>
-</define-tag>
+      <div class="sidebarbox-border bg-blue02">
+        <div class="sidebarbox-title-shading bg-blue05 txt-white">Check out options!</div>
+        <p>This page shows only the basics of <b>GoFlexiblePro</b>. More options for  layout, picture, color and text, are found under <a href="options.html">Options</a>.</p>
+      </div>                        
+    
+      <div class="sidebarbox-border bg-green02">
+        <div class="sidebarbox-title-shading bg-green05 txt-white">It's free of charge</div>
+        <p>Enjoy the template at no cost. Feel free to retain my name as designer in the footer as a sign of your appreciation.</p>                 
+      </div>      
+  
+      <div class="sidebarbox-border bg-red02">
+        <div class="sidebarbox-title-shading bg-red05 txt-white">Any questions?</div>
+        <p>I am Gerhard, feel free to check one of my <a href="http://www.sda.org">favorite websites</a>. If you have any questions, simply mail me at <a href="mailto:gw@actamail.com">gw@actamail.com</a>.</p>                 
+      </div>      
+    </div>
+    
+    <!-- END WRAP CONTENT AND SIDEBAR -->
+    </div>    
+    
+    <!-- FOOTER -->
+    <h3 class="hide">Footer</h3>
+    <div class="footer footer-font">
+       Copyright &copy; 2006 Your Company | All Rights Reserved<br />Design: Made in Austria | 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>
+    </div>
+  </div>
+</body>
+</html>
 
-<define-tag rellink whitespace="delete">
-<preserve url />
-<set-var %attributes />
-$(ROOT)/<get-var url />
-<restore url />
-</define-tag>
-
-<define-tag site:link whitespace="delete">
-<preserve url />
-<set-var %attributes />
-http://perl-begin.berlios.de/<get-var url />
-<restore url />
-</define-tag>
-
-<define-tag wiki:link whitespace="delete">
-<preserve url />
-<set-var %attributes />
-<ifeq "<get-var url />" "" 
-    "<set-var url="Main_Page" />" 
-    "<set-var url="<get-var url />" />" 
-    />
-<site:link url="Wiki/mediawiki/index.php/" /><get-var url />
-<restore url />
-</define-tag>
-
-<define-tag mailing:list:link whitespace="delete">
-https://lists.berlios.de/mailman/listinfo/perl-begin-help
-</define-tag>
-
-<define-tag web:forum:link whitespace="delete">
-http://developer.berlios.de/forum/forum.php?forum_id=2341
-</define-tag>
-
-<define-tag nothing></define-tag>
+#   per default we are in body
+{#LATEMP_BODY#: