Typo3 Example Sites

From TechWiki

Contents

j-node

Link: j-node.homeip.net.

TypoScript

Constants:

styles.content.loginform.pid = 14
plugin.meta >
plugin.meta {
description =
keywords =
robots =
copyright =
email =
author =
language =
distribution =
rating =
revisit =
includeGlobal = 0
}
plugin.tx_drwiki_pi1.color3 = green

Setup:

# Default PAGE object:

plugin.meta.global.description = 
plugin.meta.global.keywords =
plugin.meta.global.author = 
plugin.meta.global.robots = index,follow
plugin.meta.global.revisit = 1
plugin.meta.global.language = en, de

plugin.meta.flags.useSecondaryDescKey = 0
plugin.meta.flags.alwaysGlobalDescription = 1
plugin.meta.flags.alwaysGlobalKeywords = 1
plugin.meta.flags.DC = 0

config.simulateStaticDocuments = 0
config.baseURL = http://j-node.homeip.net/
config.tx_realurl_enable = 1
config.uniqueLinkVars = 1
config.prefixLocalAnchors = all

config.admPanel = 1
config.doctype = xhtml_trans
config.xhtml_cleaning = all
config.compensateFieldWidth = 0.3

config.linkVars = L
config.sys_language_uid = 0
config.language = en

[globalVar = GP:L = 1]
config.sys_language_uid = 1
config.language = de
[global]

body = TEXT
body.field = uid
body.wrap = <body bgcolor="#000000"  class="body_|">  
page.bodyTagCObject < body

# tt_content.login.20.layout =  ###LABEL### ###FIELD###
# tt_content.login.20.labelWrap.wrap = 
tt_content.login.20.dataArray.10.label.data >
tt_content.login.20.dataArray.20.label.data >
tt_content.login.20.dataArray.10.label = User
tt_content.login.20.dataArray.20.label = Password 

tt_content.login.20.commentWrap.wrap =
tt_content.login.20.REQ.labelWrap.wrap =
tt_content.login.20.COMMENT >
tt_content.login.20.COMMENT.layout = <span></span>


page = PAGE
page.typeNum = 0
page.shortcutIcon = fileadmin/design/favicon.ico
page.stylesheet = fileadmin/design/j-node.css
page.headerData.999 < plugin.meta
page.headerData.1000 = TEXT
page.headerData.1000.value =  <script language="javascript" type="text/javascript" src="fileadmin/scripts/mailer.js"> </script>
page.config.index_enable = 1
page.includeLibs.gmenu_layers = media/scripts/tmenu_layers.php 

page.10 = TEMPLATE
page.10 {
    template = FILE
    template.file = fileadmin/design/j-node.html
    workOnSubpart = DOKUMENT

    marks.CONT < styles.content.get

#LEFT
    marks.LEFT = HMENU
    marks.LEFT.entryLevel = 0
    marks.LEFT.1 = TMENU
    marks.LEFT.1.begin = 9
    marks.LEFT.1 {
        NO {
            allWrap = <div class="navi">  | </div>
            ATagParams=class="navi"
            beforeImg = fileadmin/design/item_default.gif
        }
        ACT = 1
        ACT {
            allWrap = <div class="navi_active">  | </div>
            ATagParams=class="navi_active"
            beforeImg = fileadmin/design/item_blue_gray.gif
        }
    }
    marks.LEFT.2 = TMENU
    marks.LEFT.2 {
        NO {
            allWrap = <div class="navi" id="level1"> | </div>
            ATagParams=class="navi"
            beforeImg = fileadmin/design/item_default.gif
        }
        ACT = 1
        ACT {
            allWrap = <div class="navi_active" id="level1"> | </div>
            ATagParams=class="navi_active"
            beforeImg = fileadmin/design/item_green_gray.gif
        }
    }
    marks.LEFT.3 = TMENU
    marks.LEFT.3 {
        NO {
            allWrap = <div class="navi" id="level2">| </div>
            ATagParams=class="navi"
            beforeImg = fileadmin/design/item_default.gif
        }
        ACT = 1
        ACT {
            allWrap = <div class="navi_active" id="level2"> | </div>
            ATagParams=class="navi_active"
            beforeImg = fileadmin/design/item_green_gray2.gif
        }
    }

#PATH
    marks.PATH = HMENU
    marks.PATH.entryLevel = 0
    marks.PATH.special = rootline
    marks.PATH.1 = TMENU
    marks.PATH.1.begin = 2
    marks.PATH.1.NO.allWrap = | / |*||*| |

#TABS
    marks.TOOLS = HMENU
    marks.TOOLS.special = list
    marks.TOOLS.special.value = 5
    marks.TOOLS {
            1 = TMENU_LAYERS
            1 {
                  layerStyle =position:absolute;VISIBILITY:hidden;
                  xPosOffset=11
                  yPosOffset=-125
                  lockPosition = y  
                  hideMenuWhenNotOver = 20
                  hideMenuTimer = 100
                  expAll = 1
                  NO {	
                     allWrap = <li class="plain"> | </li>
                 }
                 ACT = 1
                 ACT {
                     allWrap = <li class="selected"> | </li>
                 }
             }
             2 = TMENU
             2 {
                 wrap = <div class="wrapper"> | </div>   
                 NO {
                    allWrap = | 
                 }
           }
    }

    marks.DATASTORE = HMENU
    marks.DATASTORE.special = list
    marks.DATASTORE.special.value = 28
    marks.DATASTORE.1 = TMENU
    marks.DATASTORE.1{
        NO{
            allWrap =  <li class="plain"> | </li>
        }
        ACT = 1
        ACT {
            allWrap =  <li class="selected"> | </li>
        }
     }

    marks.THINKBANK = HMENU
    marks.THINKBANK.special = list
    marks.THINKBANK.special.value = 57
    marks.THINKBANK.1 = TMENU
    marks.THINKBANK.1{
        NO{
            allWrap =  <li class="plain"> | </li>
        }
        ACT = 1
        ACT {
            allWrap =  <li class="selected"> | </li>
        }
     }

    marks.TECHWIKI = HMENU
    marks.TECHWIKI.special = list
    marks.TECHWIKI.special.value = 56
    marks.TECHWIKI.1 = TMENU
    marks.TECHWIKI.1{
        NO{
            allWrap =  <li class="plain"> | </li>
        }
        ACT = 1
        ACT {
            allWrap =  <li class="selected"> | </li>
        }
     }

    marks.FOTOBASE = HMENU
    marks.FOTOBASE.special = list
    marks.FOTOBASE.special.value = 30
    marks.FOTOBASE.1 = TMENU
    marks.FOTOBASE.1{
        NO{
            allWrap =  <li class="plain"> | </li>
        }
        ACT = 1
        ACT {
            allWrap =  <li class="selected"> | </li>
        }
     }

#LANG
    marks.LANGUAGES = PHP_SCRIPT
    marks.LANGUAGES {
        file = fileadmin/scripts/lang.php
        NO{
            allWrap =  <li class="plain"> | </li>
        }
        ACT = 1
        ACT {
            allWrap =  <li class="selected"> | </li>
        }
    }

#FOOT
    marks.FOOT = HMENU
    marks.FOOT.special = list
    marks.FOOT.special.value = 11, 2
    marks.FOOT.1 = TMENU
    marks.FOOT.1 {
        NO{
           allWrap =  <li class="footer"> | </li>
        }
        ACT = 1
        ACT {
            allWrap =  <li class="selected"> | </li>
        }
   }
}

page.20 = EDITPANEL
page.20 {
 label = Neuer Seiteninhalt einfügen
 line = 5
 newRecordFromTable = tt_content
}

styles.content.get = CONTENT
styles.content.get {
    table = tt_content
    select.orderBy = sorting
    select.where = colPos=0

    select.languageField = sys_language_uid
}


page.10.marks.LOGIN < tt_content.login.20

HTML Template

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>j-node - Home</title>
<meta name="keywords" content="...">
<meta name="description" content="...">
<meta name="author" content="root">
<meta name="DC.Title" content="...">
<meta name="DC.Creator" content="...">
<meta name="DC.Subject" content="...">
<meta name="DC.Description" content="...">
<meta name="DC.Identifier" content="http://j-node.homeip.net/">
<meta name="DC.Rights" content="...">
<meta name="revisit-after" content="2 days">
<meta name="robots" content="index,follow">
<meta name="generator" content="Bluefish 1.0.4">
<meta content="Heavily under construction..." name="description">
<meta content=", , " name="keywords">
<meta content="Heavily under construction..." name="DC.description">
<meta content=", , " name="DC.subject">
<meta content=", " name="DC.contributors">
<meta content="2005-01-31 15:35:39" name="DC.date.created">
<meta content="2005-02-10 19:25:08" name="DC.date.modified">
<meta content="Document" name="DC.type">
<meta content="text/plain" name="DC.format">
    
<!-- Basic crude style for Netscape4.x - This can be removed
 if you don't want the special NS4 look - it will still work,
 just be plain text instead. Column layout for Netscape4.x included -->
<link rel="Stylesheet" type="text/css" href="ploneNS4.css">

<!-- Column style sheet. -->
 <style type="text/css" media="all">@import url(ploneColumns.css);</style>
 
 <!-- Main style sheets for CSS2 capable browsers -->

<style type="text/css" media="screen"> @import url(plone.css);</style>
    
<link rel="alternate stylesheet" type="text/css" media="screen" href="j-node_files/ploneTextSmall.css" title="Small Text">
<link rel="alternate stylesheet" type="text/css" media="screen" href="j-node_files/ploneTextLarge.css" title="Large Text"><!-- Custom style sheet if available -->
  
<style type="text/css" media="all">@import url(ploneCustom.css);</style>
    
<!-- Style sheet used for printing -->
<link rel="stylesheet" type="text/css" media="print" href="j-node_files/plonePrint.css">
    
<!-- Style sheet used for presentations (Opera is the only browser supporting this at the moment) -->
<link rel="stylesheet" type="text/css" media="projection" href="j-node_files/plonePresentation.css">
    
<!-- Internet Explorer CSS Fixes --><!--[if IE]>
<style type="text/css" media="all">@import url(http://j-node.homeip.net/ploneIEFixes.css);</style>
<![endif]-->

<link rel="shortcut icon" href="http://j-node.homeip.net/favicon.ico" type="image/x-icon">

<link rel="search" href="http://j-node.homeip.net/search_form" title="Search this site">
    
<link rel="up" href="#" title="Up one level">
<link rel="copyright" href="http://j-node.homeip.net/copyright" title="Copyright information">
<link rel="author" href="http://j-node.homeip.net/author" title="Author information"><!-- Disable IE6 image toolbar -->
    
<meta http-equiv="imagetoolbar" content="no">
    
<!-- A slot where you can insert CSS in the header from a template --><!-- min-width support for IE via Javascript, required for tableless --><!--[if IE]>
<script type="text/javascript"
src="http://j-node.homeip.net/plone_minwidth.js"></script>
<![endif]--><!-- A slot where you can insert elements in the header from a template --><!-- A slot where you can insert javascript in the header from a template --><!-- Common Plone ECMAScripts --><!-- Pull-down ECMAScript menu, only active if logged in --><!-- Define dynamic server-side variables for javascripts in this one  -->
  
<script type="text/javascript" src="fileadmin/design/plone_javascript_variables.js">
</script>

<script type="text/javascript" src="fileadmin/design/j-node_files/plone_javascripts.js">
</script><!-- Old JS from Plone 1.0, remove tal:condition="nothing" if you need to use the old pop-ups.
   Will be removed in Plone 2.1 -->
           
</head>


<body>

	<!-- Alles oberhalb wird von Typo3 ignoriert -->
    
	<!--###DOKUMENT### start -->

	<div id="visual-portal-wrapper">

		<div id="portal-top">

			<h1 id="portal-logo">
			
				<a href="http://j-node.homeip.net/">j-node</a>

			</h1>

		<div id="portal-searchbox">

			<form name="searchform" action="http://j-node.homeip.net/index.php?id=21&tx_indexedsearch[sword]" method="post">
				<label for="searchGadget" class="hiddenStructure">Search</label>
				<input id="searchGadget" name="tx_indexedsearch[sword]" size="20" alt="Search" title="Search" accesskey="accesskeys-search" class="visibility:visible" tabindex="30001" type="text">
				<input class="searchButton" value="Search" accesskey="accesskeys-search" tabindex="30002" type="submit">
			</form>
		
		</div>

		<h5 class="hiddenStructure">Sections</h5>

		<ul id="portal-globalnav">

			###TOOLS###
			###DATASTORE###
			###THINKBANK###
			###TECHWIKI###
			###FOTOBASE###

		</ul>

		<h5 class="hiddenStructure">Personal tools</h5>

		<ul id="portal-personaltools">
 
			<li>

     			###LANGUAGES###

			</li>

		</ul>

		<div id="portal-breadcrumbs">

			<div align="left">

			   <span id="here">you are here:</span> <span id="here2">###PATH###</span>

			</div>
    
		</div>

	</div>

	<!-- The wrapper div. It contains the three columns. -->
	<div id="portal-columns" class="visualColumnHideNone">

		<!-- start of the main and left columns -->
		<div id="visual-column-wrapper">

			<!-- start of main content block -->
			<div id="portal-column-content">

				<div id="content" class="">            

					<div class="documentContent" id="region-content">

						<a name="documentContent"></a>
	
						<div class="documentDescription">
					
							<div class="documentText">

								###CONT###

							</div>

						</div>
    
						<div align="right">

							<a href="javascript:this.print();">
            				<img src="fileadmin/design/print_icon.gif" alt="Print this page" title="Print this page" height="16" width="16">
							</a>

						</div>
                    
					</div>

				</div>

			</div>
			<!-- end of main content block -->

			<!-- start of the left (by default at least) column -->
			<div id="portal-column-one">
			
				<div class="visualPadding">
                       
					<div class="portlet" id="portlet-navigation-tree">

						<div>
						
							<h5>Navigation</h5>
							
							<div class="portletBody">
							
								<div class="portletContent odd">
	
									###LEFT###
 
								</div>

							</div>

						</div>

					</div>

					<div class="portlet" id="portlet-login">

						<h5>Log in</h5>

						<div class="portletBody">

							<div class="portletContent odd">

								###LOGIN###

							</div>

							<div class="portletContent even">
							
								<a href="..." accesskey="accesskeys-login">
									<img src="fileadmin/design/linkTransparent.gif" alt="" title="" longdesc="" height="11" width="6">
									admin log in
								</a>

							</div>

						</div>

					</div>

				</div>

			</div>
			<!-- end of the left (by default at least) column -->

		</div>
		<!-- end of the main and left columns -->
		
		<div class="visualClear"> </div>
		
	</div>
	<!-- end column wrapper -->

	<hr class="netscape4">

	<div id="portal-footer">
<ul id="footer_wrap">
		###FOOT###
	</ul>
	</div>

	<div id="portal-colophon">

		<p class="discreet">
			Powered by
		</p>

		<a href="http://www.typo3.org/">
			<img border="1" src="fileadmin/design/typo3.gif" alt="Powered by Typo3" title="This site was built using the Typo3 Content Management System. Click for more information.">
		</a>
		
		<br>

		<a href="http://www.kubuntu.org/">
			<img src="fileadmin/design/kubuntu-banner.png" alt="Powered by Kubuntu" title="Using Kubuntu GNU/Linux.">
		</a>
		
		<br><br>

		<p class="discreet">
			This site should conform to the following standards:
		</p>

		<ul>
		
			<li>
			
				<a href="http://www.section508.gov/">
					<img src="fileadmin/design/colophon_sec508.gif" alt="Section 508" title="This site conforms to the US Government Section 508 Accessibility Guidelines." height="15" width="80">
				</a>

			</li>

			<li>

				<a href="http://www.w3.org/WAI/WCAG1AA-Conformance" title="Explanation of WCAG Conformance">
					<img src="fileadmin/design/colophon_wai-aa.gif" alt="WCAG" title="This site conforms to the W3C-WAI Web Content Accessibility Guidelines." height="15" width="80">
				</a>

			</li>

			<li>

				<a href="http://validator.w3.org/check/referer">
					<img src="fileadmin/design/colophon_xhtml.png" alt="Valid XHTML" title="This site is valid XHTML." height="15" width="80">
				</a>

			</li>

			<li>

				<a href="http://jigsaw.w3.org/css-validator/check/referer">
					<img src="fileadmin/design/colophon_css.png" alt="Valid CSS" title="This site was built with valid CSS." height="15" width="80">
				</a>

			</li>

			<li>

				<a href="http://j-node.homeip.net/index.php?id=12">
					<img src="fileadmin/design/colophon_anybrowser.png" alt="Usable in any browser" title="This site is usable in any web browser." height="15" width="80">
				</a>
				
			</li>

		</ul>

	</div>

</div>

<!--###DOKUMENT### stop -->

</body>

</html>


CSS:

/* j-node.homeip.net*/

#level1 { 
    padding-left: 1.5em;
  background-color: #cde2a7;
 }

#level1 a { 
    color:#578308;
 }

#level1 a:hover { 
    color:#3D3D3D;
 }

#level1 .navi_active { 
    color:#000000;
 }

#level2 { 
    padding-left: 3.0em;
 }

.navi { 
   /* margin: 0.5em 0 0.5em 0;*/
    padding-top: 0.3em;
    padding-bottom: 0.3em;
}

.navi:hover { 
  color:#3D3D3D; 
}

.navi_active { 
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    color:#000000; 
}

.navi_active:hover { 
  color:#000000; 
}

#portal-breadcrumbs a:hover {
  color:#000000; 
}

.even a:hover {
  color:#000000; 
}

.lang {
  color:Black; 
  font-style: normal; 
  font-weight: normal; 
  font-size: 100%;  
  line-height: 1.75em; 
  margin: 0em -1em 0em 0.3em;
}

.lang:hover { 
  color:#333;
}

.footer {
}

.footer a:hover { 
  color:#000000;
}

.footer .selected li, a { 
  color:#000000;
}

#footer_wrap li {
  display: inline;
}

#footer_wrap li a {
  /* The normal, unselected tabs. They are all links */
  background-color: transparent;
  border-color: #74ae0b;
  color:#578308;
  margin-right: 0.5em;
  padding: 0em 6em;
  text-decoration: none;
  text-transform: none;
}

#footer_wrap li.selected a {
  color:#000000;
}

#footer_wrap a:hover {
  color:#000000;
}

.wrapper {
  border: 1px solid #74ae0b;  
  background-color: #ffffff;
  width:auto;
}

.wrapper a {
  display:block;
  padding: 0.2em 2.0em 0.21em 2.0em;
}

.wrapper a:hover {
  padding: 0.2em 2.0em 0.21em 2.0em;
  background-color: #cde2a7;
}

#here {
  font-size:80%;
 }

#here2 {
  font-size:90%;
 }

#id_tab {
  padding-bottom: 0.5em;
 }



/* plone.css
** Plone style sheet for CSS2-capable browsers.
**
** Copyright Alexander Limi - http://www.plonesolutions.com
**
** Additional Plone 2 work:
** Joe Geldart & Tom Croucher - http://www.netalleynetworks.com
** Michael Zeltner - http://niij.org
** Geir Bækholt - http://www.plonesolutions.com
**
** All you guys rock :)
**
** Style sheet documentation can be found at http://plone.org/documentation
**
** You should preferrably use ploneCustom.css to add your own CSS classes and to
** customize your portal, as these are the base fundaments of Plone, and will
** change and be refined in newer versions. Keeping your changes in
** ploneCustom.css will make it easier to upgrade.
**
** Feel free to use whole or parts of this for your own designs, but give credit
** where credit is due.
**
*/

/*  (do not remove this :) */
/*  (not this either :) */

/* The basic elements: */
body {
    font: 69% "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
    background-color: White;
    color: Black;
    margin: 0;
    padding: 0;
    min-width: 70em;
}

table {
    font-size: 100%;
}

a {
    text-decoration: none;
    color: #578308;
    background-color: transparent;
}
img {
    border: none;
    vertical-align: middle;
}
p {
    margin: 0.5em 0em 1em 0em;
    line-height: 1.5em;
}
p a {
    text-decoration: underline;
}
p a:visited {
    color: #436976;
    background-color: transparent;
}
p a:active {
    color: Red;
    background-color: transparent;
}
p img {
    border: 0;
    margin: 0;
}

hr {
    height: 1px;
    color: #74ae0b;
    background-color: transparent;
}


h1 {
    color: Black;
    background-color: transparent;
    font-family: "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
    font-weight: bold;
    margin: 0.5em 0 0.5em 0;
    padding-top: 0.5em;
    padding-bottom: 0.2em;
    border-bottom: 1px solid #74ae0b;
}

h2, h3, h4, h5, h6 {
    color: Black;
    background-color: transparent;
    font-family: "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
    font-size: 100%;
    font-weight: normal;
    margin: 0 0 0 0;
    padding-top: 0.5em;
    padding-bottom: 0.2em;
    border-bottom: 1px solid #74ae0b;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: Black ! important; 
}

h1 {
    font-size: 135%;
}

h2 {
    font-size: 130%;
}

h3 {
    font-size: 120%;
    border-bottom: none;
    font-weight: bold;
}

h4 {
    font-size: 110%;
    border-bottom: none;
    font-weight: bold;
}

h5 {
    font-size: 100%;
    border-bottom: none;
    font-weight: bold;
}

h6 {
    font-size: 85%;
    border-bottom: none;
    font-weight: bold;
}


ul { 
    line-height: 1.5em;
    list-style-type: square;
    margin: 0.5em 0 0 1.5em;
    padding: 0;
    list-style-image: url(http://j-node.homeip.net/fileadmin/design/linkTransparent.gif);
}

ol {
    line-height: 1.5em;
    margin: 0.5em 0 0 1.5em;
    padding: 0;
}
ul a, ol a {
    text-decoration: underline;
}
ul a:visited {
    color: #436976;
}
li {
    margin-bottom: 1em;
}
dt {
    font-weight: bold;    
}
dt a {
    text-decoration: underline;
}

dd {
    line-height: 1.5em;
    margin-bottom: 1em;
}
dd a {
    text-decoration: underline;
}

dd.link a {
    text-decoration: none;
    color: Black;
}

fieldset {
    border: 1px solid #74ae0b;
    margin: 1em 0em 1em 0em;
    padding: 0em 1em 1em 1em;
    line-height: 1.5em;
    width: auto;
}
legend {
    background: White;
    padding: 0.5em;
    font-size: 90%;
}

form {
    border: none;
    margin: 0;
}
textarea {
    font: 110% "Courier New", Courier, monospace; 
    border: 1px solid #74ae0b;  
    color: Black;
    background-color: white;
    width: 100%;
}
input {
    font-family: "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
    visibility: visible;
    border: 1px solid #74ae0b;  
    color: Black;
    background-color: white;
    vertical-align: middle;
}
select {
    border: 1px solid #74ae0b;  
    color: Black;
    vertical-align: top;
}
abbr, acronym, .explain {
    border-bottom: 1px dotted Black;
    color: Black;
    background-color: transparent;
    cursor: help;
}
q {
    font-family: Times, "Times New Roman", serif;
    font-style: italic;
    font-size: 120%;
}
blockquote {
    font-family: Times, "Times New Roman", serif;
    font-style: italic;
    font-size: 120%;
}
code {
    font-size: 120%;
    color: Black;
    background-color: #cde2a7;
    border: 1px dashed #74ae0b;
    padding: 0 0.1em;
}
pre {
    font-size: 120%;
    padding: 1em;
    border: 1px dashed #74ae0b;
    color: Black;
    background-color: #cde2a7;
    overflow: auto;
}
.pre a {
    text-decoration: underline;
}

ins {
    color: green;
    text-decoration: none;
}

del {
    color: red;
    text-decoration: line-through;
}

.netscape4 {
    display: none;
}





/*
** Structural Elements
*/

#visual-portal-wrapper {
    margin: 0;
    padding: 0;
}


/* Logo properties */
 
#portal-logo {
    background: url(logo.jpg) no-repeat;
    border: 0;
    margin: 0.75em 0em 0.75em 1.5em;
    padding: 0;
}
#portal-logo a {
    display: block;
    text-decoration: none;
    overflow: hidden;
    border: 0;
    margin: 0;
    padding: 0;
    padding-top: 86px;
    height: 0px !important;
    height /**/: 86px;
    width: 509px;
    cursor: pointer;
}

#portal-skinswitcher {
    /* The skin switcher at the top, only shows up if you have multiple skins available */

}

#portal-skinswitcher a {
    display: block;
    float: left;
}

#portal-top {
    /* Top section */
    margin: 0;
    padding: 0;
}
#portal-siteactions {
    position: absolute;
    top: 11px;
    right: 16px;
    width: 54px;
    margin: 0;
    padding: 0;
    z-index: 2;
}

#portal-siteactions a {
    display: block;
    float: left;
    padding: 18px 0 0 0;
    width: 18px;
    height: 0px !important;
    height /**/: 18px;
    overflow: hidden;
}

/* searchbox style and positioning */
#portal-searchbox {
    position: absolute;
    top: 45px;
    right: 1.5em;
    background-color: transparent;
    margin: 0;
    padding: 0;
    text-align: right;
    text-transform: lowercase;
    width: 50%;
    white-space: nowrap;
    z-index: 2;
}
#portal-globalnav {
    /* Navigational Plone Tabs(tm), implemented by customizing the a tag - they are surprisingly elegant. The power of CSS runs strong in these :) */
    background-color: transparent;
    border-collapse: collapse;
    padding: 0em 0em 0em 2em;
    /*padding: 0.1em 2.0em 0.1em 2.0em; */
    white-space: nowrap;
    list-style: none;
    margin: 0;
    height: auto;
    line-height: normal;
}
#portal-globalnav li {
    display: inline;
}
#portal-globalnav li a {
    /* The normal, unselected tabs. They are all links */
    background-color: transparent;
    border-color: #74ae0b;
    border-width: 1px; 
    border-style: solid solid none solid;
    color: #578308;
    height: auto;
    margin-right: 0.5em;
    padding: 0em 2em;
     /*padding: 0.1em 2.0em 0.1em 2.0em;*/
    text-decoration: none;
       /* text-transform: lowercase;*/
}
#portal-globalnav li.selected a {
    /* The selected tab. There's only one of this */
    background-color: #cde2a7;
    border: 1px solid #74ae0b;
    border-bottom: #cde2a7 1px solid;
    color: #578308;
}
#portal-globalnav li a:hover {
    background-color: #cde2a7;
    border-color: #74ae0b;
    border-bottom-color: #cde2a7;
    color: #578308;
}
#portal-personaltools {
    /* Bar with personalized menu (user preferences, favorites etc) */
    background-color: #cde2a7;
    border-top-color: #74ae0b;
    border-top-style: solid;
    border-top-width: 1px;
    border-bottom-color: #74ae0b;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    line-height: 1.3em;
    color: Black;
    padding: 0em 3em 0em 3em;
    margin: 0;
    text-align: right;
    text-transform: lowercase;
    list-style: none;
}
#portal-personaltools .portalUser {
    /* background: transparent url(http://j-node.homeip.net/user.gif) center left no-repeat; */
    padding-left: 15px;
}

#portal-personaltools .portalNotLoggedIn {
    color: Black;
    padding: 0;
    background: transparent;
    background-image: none;
} /* Used on all descriptions relevant to those not logged in */
 
#portal-personaltools li {
/*    background: transparent url(http://j-node.homeip.net/linkOpaque.gif) center left no-repeat; */
    padding-left: 8px;
    color: #578308; 
    margin-left: 1em;
    display: inline;
}
#portal-personaltools li a {
    text-decoration: none;
    color: #578308;
}
.visualCaseSensitive {
    text-transform: none;
}
#portal-breadcrumbs {
    /* The path bar, including breadcrumbs and add to favorites */
    border-bottom-color: #74ae0b;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    padding-left: 2em;
    padding-right: 2em;
    text-transform: lowercase;
}
.addFavorite {
    vertical-align: bottom;
}
.contentViews {
    background-color: transparent;
    border-collapse: collapse;
    padding-left: 1em;
    line-height: normal;
    margin-top: 1em;
    margin-left: 0;
    /* white-space: nowrap; */
    list-style: none;
    border: 1px solid #8cacbb;
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
}
.contentViews li {
    display: inline;
}
.contentViews li a {
    background-color: transparent;
    border: 1px solid #8cacbb;
    border-style: solid;
    color: #436976;
    height: auto;
    margin-right: 0.5em;
    padding: 0em 2em;
    line-height: normal;
    text-decoration: none;
    text-transform: lowercase;
    z-index: 1;
}
.contentViews .selected a {
    background-color: #dee7ec;
    border-bottom: #dee7ec 1px solid;
    color: #436976;
}
.contentViews li a:hover {
    background-color: #dee7ec;
    color: #436976;
}

/*
** begin ECMAScript Content Action Menus
*/

.contentActions {
    border-collapse: collapse;
    background-color: #dee7ec;
    border-left: 1px solid #8cacbb;
    border-right: 1px solid #8cacbb;
    color: #436976;
    text-align: right;
    text-transform: lowercase;
    padding: 0 0 0 1em;
    z-index: 2;
    height: 1.2em;
}

.contentActions ul,
.contentActions li {
    margin: 0;
    list-style: none;
    list-style-image: none;
    display: inline;
    color: Black;
    text-align: left;
}

.contentActions ul {
    line-height: 1.2em;
    height: 1.2em;
    padding: 0;
    margin: 0;
}
.contentActions li {
    float: right;
/*    background-image: url(http://j-node.homeip.net/arrowDownAlternative.gif); */
    background-repeat: no-repeat;
    background-position: center right;
    z-index: 4;
    border-left: 1px solid #8cacbb;
    padding: 0 0 0 1em;
    margin: 0 1em 0 0;
}

.menuPosition {
    /*  The spec says we can't put this on an element with a float (although 
        Opera is the only one that cares) and we need it in order to catch 
        the position:absolute bubbling up */
    position: relative;
    }

.actionSingular {
    background-image: none !important;
}

.actionItems li {
    background-image: none;
}

.contentActions a {
    text-decoration: none;
    color: #436976;
    padding: 0 1em 0 0;
}

.contentActions .actionMenu {
    visibility: hidden;
    z-index: 5;
    position: absolute;
    top: 0;
    right: -1px;
    background: #dee7ec;
    overflow: hidden;
    height: auto;
    padding: 0;
    margin: 1.2em 0 0 0;
    border: 1px #8cacbb;
    border-style: none solid solid solid;
}

.actionMenu li {
    float: none;
    background: none;
    display: inline;
    padding: 0;
    margin: 0;
    border: 0;
}

.actionMenu li a {
    display: block;
    white-space: nowrap;
    padding: 0 0.5em;
    margin: 0.2em 0;
}

.actionMenu li a:hover {
    background-color: #8cacbb;
    color: White;
}

.actionMenu .actionSeperator a {
    margin-top: 0.2em;
    padding-top: 0.2em;
    border-top: 1px solid #8cacbb;
}

/*
** end ECMAScript Content Action Menus
*/

.configlet .contentViews {
    font-size: 90%;
}
 
#content {
    padding: 0 1em;
    margin: 0em 0em 2em 0em;
}

#content-news h1 {
    margin-bottom: 1em;
}

.newsItem {
    margin-bottom: 1em;
    border-bottom: 1px solid #74ae0b;
}

.newsContent {
    padding: 0 1em 1em 1em;
}

.newsContent ul,
.newsContent li {
    display: block; 
    list-style: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
}

.newsAbout {
    display: block;
    color: #76797c;
    font-size: 85%;
    padding: 0;
    margin-top: 0;
    list-style: none;
    list-style-image: none;
    float: right;
    text-align: right;
}

.newsAbout li {
    display: inline;
}

.newsFooter {
    
}

.newsFooter li {
    display: inline;
    margin: 0 1em 0 0;
}

#content {
    padding-top: 1em !important;
}

.documentEditable {
    padding: 0em 2em 1em 2em !important;
}

.configlet .documentEditable {
    padding: 0em !important;
}

.documentContent {
    font-size: 110%;
    padding: 0em 1em 2em 1em !important;
    background: White;
}

.documentEditable .documentContent {
    border: 1px solid #8cacbb;
    padding: 0;
}
.documentActions {
    float: right;
    margin: -1.5em 0 0 0;
}

.documentActions ul,
.documentActions li {
    display: inline;
    list-style: none;
    list-style-image: none;
}
.documentActions a {
    border: 0;
    text-decoration: none;
}

.portalMessage,
.system-message,  /* These two last ones are reST error indicators */
#error-handling {
    background-color: #ffce7b;
    border: 1px solid #ffa500;
    color: Black;
    font-size: 85%;
    font-weight: bold;
    margin: 2em 0em 1em 0em;
    padding: 0.5em 1em;
    vertical-align: middle;
}
.portalMessage a {
    color: Black;
    text-decoration: underline;
}

.documentDescription {
    /* The summary text describing the document */
    font-weight: bold;
    display: block;
    margin: 1em 0em;
    line-height: 1.5em;
    border: 1px solid #74ae0b;
}

.documentText {
    margin: 2em 1.5em 2em 1.5em;
    font-weight: normal;
}

.documentByLine {
    text-align: right;
    font-size: 85%;
    clear: both;
    font-weight: normal;
    color: #76797c;
}
.documentByLine a {
    text-decoration: underline;
}

.productCredits {
    text-align: right;
    font-size: 85%;
    clear: both;
    font-weight: normal;
    color: #76797c;
}

.productCredits a {
    text-decoration: underline;
}

#portal-footer {
    background-color: #cde2a7;
    border-top: 1px solid #74ae0b;
    border-bottom: 1px solid #74ae0b;
    float: none;
    margin: 2em 0em 1em 0em;
    padding: 0.5em 0em 1em 0em;
    text-align: center;
}

#portal-colophon {
    float: none;
    margin: 0em 0em 2em 0em;
    padding: 0.5em 0em 1em 0em;
    text-align: center;
}

#portal-colophon ul,
#portal-colophon ul li,
#portal-colophon ul li a {
    list-style: none;
    display: inline;
    text-decoration: none;
    color: Black;
}

#portal-colophon ul li {
    font-size: 85%;
    margin: 0 0.25em;
    padding: 0.1em 0.2em;
}


/*
** Widgets
*/

.standalone,
.documentEditable * .standalone {
/*    background: #cde2a7 url(http://j-node.homeip.net/linkOpaque.gif) 9px 1px no-repeat; */
    cursor: pointer;
    font-size: 85%;
    margin-bottom: 1em;
    padding: 1px 1px 1px 15px;
    text-transform: lowercase;
}
.context,
.documentEditable * .context {
    background: transparent url(http://j-node.homeip.net/fileadmin/design/linkTransparent.gif) 9px 1px no-repeat;
    cursor: pointer;
    font-size: 85%;
    margin-bottom: 1em;
    padding: 1px 1px 1px 15px;
    text-transform: lowercase;
}
.destructive,
.documentEditable * .destructive {
    background: #ffce7b url(http://j-node.homeip.net/fileadmin/design/linkTransparent.gif) 9px 1px no-repeat;
    border: 1px solid #ffa500;  
    cursor: pointer;
    font-size: 85%;
    margin-bottom: 1em;
    padding: 1px 1px 1px 15px;
    text-transform: lowercase;
}
input.searchButton {
    font-size: 100%;
    margin-bottom: 1px ! important;
   /* background: White url(http://j-node.homeip.net/search_icon.gif) 2px 1px no-repeat; */
    cursor: pointer;
    padding: 1px 1px 1px 15px;
    text-transform: lowercase;

}
.noborder,
.documentEditable * .noborder {
    border: none;
    margin: 0;
    background-color: transparent;
}
.add,
.documentEditable * .add {
}
.quickSearch {
}
.notify,
.documentEditable * .notify {
    border: 1px solid #ffa500;  
}

/* The new form elements */

.field {
    top: 0;
    left: 0;
    margin: 0 1em 1em 0;    
}

.field .field {
    margin: 1em 0 0 0;
}

.field label {
    font-size: 100%;
    font-weight: bold;
}

.fieldRequired {
/*    background: url(http://j-node.homeip.net/required.gif) center left no-repeat; */
    padding: 0 0 0 8px;
    color: White;
} 

.formHelp {
    font-size: 90%;
    color: #76797c;
    margin: 0 0 0.2em 0;
}

.formHelp a {
    text-decoration: underline;
}

.formHelp:hover {
    color: Black;
    cursor: default;
}

.formControls {
   margin: 1em 0 0 0; 
}

.error {
    /* Class for error indication in forms */
    background-color: #ffce7b;
    border: 1px solid #ffa500;
    padding: 1em;
    margin: 0 0 1em 0;
    width: 68% !important;
}

.error .fieldRequired {
   color: #ffce7b;
} 

.card {
    background-color: #cde2a7;
    border-color: #74ae0b;
    border-width: 1px;
    border-style: solid;
    float: left;
    margin: 1em;
    text-align: center;
    width: 110px;
    padding: 1em 0;
}

.portrait {
    background-color: #cde2a7;
    border-color: #74ae0b;
    border-width: 1px;
    border-style: solid;
    font-size: 85%;
    margin: 0.5em;
    padding: 1em 0 0.5em 0;
    text-align: center;
    width: 100px;
}

.portraitPhoto {
    border: 1px solid black;
}

.listing,
.stx table {
    /* The default table for document listings. Contains name, document types, modification times etc in a file-browser-like fashion */
    border-collapse: collapse;
    border-left: 1px solid #74ae0b;
    border-bottom: 1px solid #74ae0b;
    font-size: 85%;
    margin: 1em 0em 1em 0em;
}
.listing th,
.stx table th {
    background: #cde2a7;
    border-top: 1px solid #74ae0b;
    border-bottom: 1px solid #74ae0b;
    border-right: 1px solid #74ae0b;
    font-weight: normal;
    padding: 0em 1em 0em 1em;
    text-transform: lowercase;
}
.listing .top {
    border-left: 1px solid White;
    border-top: 1px solid White ! important;
    border-right: 1px solid White ! important;
    text-align: right ! important;
    padding: 0em 0em 1em 0em;
}
.listing .odd {
    /*every second line should be shaded */
    background-color: transparent;
}
.listing .even {
    background-color: #f7f9fa;
}
.listing .listingCheckbox {
    text-align: center;
}
.listing td,
.stx table td {
    border-right: 1px solid #74ae0b;
    padding: 0em 1em;
    text-align: left;
}
.listing a:hover {
    text-decoration: underline;
}
.listing img {
    vertical-align: middle;
}

ul.configlets {
    margin: 1em;
    list-style-image: none;
    list-style: none;
}

ul.configlets li {
    margin-bottom: 1em;
}

ul.configlets li a {
	text-decoration: none;
}

ul.configlets li label {
    font-weight: bold;
}

ul.configletDetails {
    margin: 0em 1em 1em 4em;
    list-style-image: none;
    list-style: none;
}

ul.configletDetails li {
    margin-bottom: 1em;
    display: inline;
}

ul.configletDetails li a {
	text-decoration: none;
}

ul.configletDetails li label {
    font-weight: bold;
}

/* List classes without markers */

ul.visualNoMarker, 
ol.visualNoMarker { 
    list-style-type: none;
    list-style-image: none;
    margin: 0.5em 0 0 0;
}



/* Additional STX workaround classes */
.stx table p /* stupid STX table workaround */
{
    margin: 0;
    padding: 0;
}
.stx table  /* stupid STX table workaround */
{
    border: 1px solid #74ae0b ! important;
}
.stx table td {
    border-bottom: 1px solid #74ae0b;
}

.portlet {
    border: none;
    margin-bottom: 1em;
    padding: 0;
}

/* Compensation when rendering portlets in the content area */
#region-content .portlet {
    font-size: 94%;
}

.portlet h4 {
    font-size: 1em;
    font-weight: normal;
    white-space: nowrap;
}
.portlet h5 { 
    background: #cde2a7;
    border: 1px solid #74ae0b;
    border-style: solid solid none solid;
    padding: 0em 1em 0em 1em;
    text-transform: lowercase;
    display: inline;
    font-size: 1em;
    height: 1em;
    font-weight: normal;
    white-space: nowrap;
}
.portlet h6 { 
    background: #cde2a7;
    border: 1px solid #74ae0b;
    border-style: solid solid none solid;
    padding: 0em 1em 0em 1em;
    text-transform: lowercase;
    display: block;
    font-size: 1em;
    height: 1.2em;
    font-weight: normal;
    white-space: nowrap;
}

.portletBody {
    background: transparent;
    border-collapse: collapse;
    border: 1px solid #74ae0b;
}
.portletDetails {
    text-align: right;
}

.portletMore {
    display: block;
    text-align: right;
}

.portletContent {
    padding: 1em 1em 1em 0.5em;
}

.portletClose {
    float: right;
    text-transform: none;
    border-left: 1px solid #74ae0b;
    padding: 0em 0.2em;
}
.portlet h1, 
.portlet h2, 
.portlet h3, 
.portlet h4 {
    margin: 0;
    padding: 0;
}
.portlet .even {
    background-color: #f0f0f0;
}
.portlet .odd {
    background-color: transparent;
}
.portlet input {
    font-size: 100%;
}

.portlet ul,
.portlet li {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-image: none;
    line-height: 1em;
}

.comment {
    background: #f7f9fa; 
    border: 1px dashed #74ae0b; 
    padding: 0 1em 0.5em 1em;
    margin-bottom: 1em;
}

.comment h1,
.comment h2,
.comment h3,
.comment h4, 
.comment h5,
.comment h6 {
    border-bottom: 1px dashed #76797c;
    font-weight: normal;
}

.commentBody {
    margin: 0 1em 1em 1em;
}

.spacer {
	margin: 1em;
}
.currentNavItem {
    color: Black;
    font-weight: bold;
}
.state-private {
    color: Black;
}
.state-published {
    color: #74AE0B;
}
.state-pending {
    color: #ffa500;
}
.state-expired {
    color: Red;
}
.syndicated {
    color: #008000;
}
.role-Member {
    
}
.role-Reviewer {
    
}
.role-Manager {
    
}
.role-Translator {
    
}
.location-frontpage {
    
}
.location-news {
    
}
.location-members {
    
}
.even {
    background-color: #f7f9fa;
}
.odd {
    background-color: transparent;
}
.visualHighlight {
    background-color: #f7f9fa;
}

.discreet {
    color: #76797c;
    font-size: 85%;
    font-weight: normal;
}

.listingBar {
    background-color: #cde2a7;
    border-color: #74ae0b;
    border-style: solid;
    border-width: 1px;
    padding: 0em 1em;
    text-align: center;
    text-transform: lowercase;
    vertical-align: top;
    margin: 1em 0em;
    font-size: 94%;
    clear: both;
}
.listingBar span.previous,
.listingPrevious {
    text-align: left;
    float: left;
    margin-right: 1em;
}
.listingBar span.next,
.listingNext {
    text-align: right;
    float: right;
    margin-left: 1em;
}
.listingBar img {
	vertical-align: middle;
}

/*
** Accessibility and visual enhancement elements 
*/

.link-plain {
    background-image: none;
    padding: 0;
}

.link-parent {
    display: block;
/*    background: transparent url(http://j-node.homeip.net/arrowUp.gif) 4px 5px no-repeat; */
    padding: 1px 0px 1px 16px;
    font-size: 85%;
}

.link-user {
/*    background: transparent url(http://j-node.homeip.net/user.gif) 0 1px no-repeat; */
    padding: 1px 0px 1px 16px;
}

.link-external {
  /*  background: transparent url(http://j-node.homeip.net/link_icon.gif) 0px 1px no-repeat; */
    padding: 1px 0px 1px 16px;
}

.link-https {
/*    background: transparent url(http://j-node.homeip.net/lock_icon.gif) 0px 1px no-repeat; */
    padding: 1px 0px 1px 16px;
}

.link-mailto {
  /*  background: transparent url(http://j-node.homeip.net/fileadmin/design/mail_icon.gif) 0px 1px no-repeat; */
    padding: 1px 0px 1px 16px;
}

.link-news {
 /*   background: transparent url(http://j-node.homeip.net/topic_icon.gif) 0px 1px no-repeat; */
    padding: 1px 0px 1px 16px;
}

.link-ftp {
 /*   background: transparent url(http://j-node.homeip.net/file_icon.gif) 0px 1px no-repeat; */
    padding: 1px 0px 1px 16px;
}

.link-irc {
 /*   background: transparent url(http://j-node.homeip.net/discussionitem_icon.gif) 0px 1px no-repeat; */
    padding: 1px 0px 1px 16px;
}

.link-callto {
 /*   background: transparent url(http://j-node.homeip.net/phone_icon.gif) 0px 1px no-repeat; */
    padding: 1px 0px 1px 16px;
}

.link-comment {
  /*  background: transparent url(http://j-node.homeip.net/discussionitem_icon.gif) center left no-repeat; */
    padding: 1px 0px 1px 16px !important;
}

.hiddenStructure {
    display: block;
    background: transparent;
    background-image: none; /* safari bug */
    border: none;
    height: 1px;
    overflow: hidden;
    padding: 0;
    margin: -1px 0 0 -1px;
    width: 1px;i
}

.contentViews .hiddenStructure,
.contentActions .hiddenStructure {
    position: absolute;
    top: -200px;
    left: -200px;
}

.visualClear {
    display: block;
    clear: both;
}
.hiddenLabel {
    display: block;
    background: transparent;
    background-image: none; /* safari bug */
    border: none;
    height: 1px;
    overflow: hidden;
    padding: 0;
    margin: -1px 0 0 -1px;
    width: 1px;
}
.label {
    font-weight: bold;
    display: inline;
    padding-right: 0.5em;
}

.optionsToggle {
    border: 1px solid #74ae0b;
    color: Black;
    background-color: #cde2a7;
    font-weight: normal !important;
    font-size: 85%;
}

.portalNotLoggedIn {} /* Used on all descriptions relevant to those not logged in */

#portal-column-content fieldset > * input:focus,
#portal-column-content fieldset > * textarea:focus {
    border-color: #ffa500; 
    border-width: 1px;
}

.visualOverflow {
    overflow: auto;
    margin: 0 0 1em 0;
}

.visualOverflow pre,
.visualOverflow table,
.visualOverflow img {
    margin: 0;
}

.visualFontSizeCorrection { /* Correction for WYSIWYG editors */
    font-size: 75%;
}

/*
** Calendar elements - used in the calendar rendering 
*/

.dayPopup {
    background-color: #ffffe1;
    border: 1px solid Black;
    padding: 0.2em;
    position: absolute;
    visibility: hidden;
    width: 12em;
    z-index: 2;
}
.date {
    font-weight: bold;
}

.ploneCalendar {
    border: 1px solid #74ae0b;
    margin: 1em 0em;
}
.ploneCalendar a {
    text-decoration: none;
}
.ploneCalendar a:hover {
    text-decoration: none;
}
.ploneCalendar th {
    background-color: #cde2a7;
    font-weight: bold;
    text-align: center;
    padding: 2px;
}
.ploneCalendar td {
    background-color: transparent;
    width: 1.5em;
    text-align: right;
    padding: 2px;
}
.ploneCalendar .weekdays td {
    background-color: #cde2a7;
    border: 1px solid #74ae0b;
    border-style: solid none;
    text-align: center;
    padding: 2px;
}
.ploneCalendar .event {
    background-color: #cde2a7;
    font-weight: bold;
}
.ploneCalendar .todayevent {
    background-color: #cde2a7;
    border: 2px solid #ffa500;
    font-weight: bold;
}
.ploneCalendar .todaynoevent {
    border-collapse: collapse;
    border: 2px solid #ffa500;
}

/* for highlighting of search terms */

.highlightedSearchTerm {
   background-color: #feff82;
}

/*  */


/* ploneColumns.css
** Tableless Column Layout for CSS2 capable Browsers
** Based on http://www.positioniseverything.net/ordered-floats.html by Big John.
** Fixed width modifications by Tonico Strasser (http://www.webproducer.at) and
** Michael Zeltner (http://niij.org).
*/

/*  */

#portal-columns {
    width: auto;
    margin: 0;
}
#visual-column-wrapper {
    float: left;
    width: 100%;
    margin-right: -16em;
}
#portal-column-content {
    width: 100%;
    float: right;
    margin-left: -16em;
}

#portal-column-content #content {
    margin: 1em 0 0 16em;
}

#portal-column-one {
    float: left;
    width: 16em;
    overflow: hidden;
}

#portal-column-two {
    float: right;
    width: 16em;
    overflow: hidden;
}

/* padding - thanks to the w3c box model :P */

#portal-column-content .visualPadding {
    padding: 1em 2em 1em 2em;
}
#portal-column-one .visualPadding {
    padding: 2em 0em 1em 2em;
}
#portal-column-two .visualPadding {
    padding: 2em 2em 1em 0em;
}

/* hide columns */

.visualColumnHideOneTwo #portal-column-content #content {
    margin: 0;
}

.visualColumnHideOne #portal-column-content #content {
    margin: 0 16em 0 0;
}

.visualColumnHideTwo #portal-column-content #content {
    margin: 0 0 0 16em;
}


noon

TypoScript

Constants:

plugin.tx_gooffotoboek_pi1.watermark = 0
plugin.tx_gooffotoboek_pi1.default_thumb = 1
plugin.tx_gooffotoboek_pi1.icons = 1
plugin.tx_gooffotoboek_pi1.slideshow = 1
plugin.tx_gooffotoboek_pi1.no_full = 1

Setup:

plugin.meta.global.language = en, de

config.simulateStaticDocuments = 0
config.tx_realurl_enable = 1
config.uniqueLinkVars = 1
#config.linkVars = L
config.prefixLocalAnchors = all

config.admPanel = 1

config.linkVars = L
config.sys_language_uid = 0
config.language = en

body = TEXT
body.wrap = <body bgcolor=black text=white link=white vlink=white alink=white>  
page.bodyTagCObject < body

page = PAGE
page.typeNum = 0
page.shortcutIcon = fileadmin/design/favicon.ico
page.stylesheet = fileadmin/design/noon.css

page.10 = TEMPLATE
page.10 {
    template = FILE
    template.file = fileadmin/design/noon.html
    workOnSubpart = DOKUMENT
    
    # Title
    marks.TITLE = TEXT
    marks.TITLE {
    	value = Direct Support against Poverty in India
    	wrap = <div class="haupttitel"><b> | </b></div>
    }
    
    # Donate online button
    marks.BTN = TEXT
    marks.BTN {
    	value =
    	wrap = <a id="btn_e" href="index.php?id=20"> | </a>
    }
    
    # Content
    marks.CONT < styles.content.get
    
    # Path
    marks.PTXT = TEXT
    marks.PTXT.value = <div id="ptxt">you are here:  
    marks.PATH = HMENU
    marks.PATH.entryLevel = 0
    marks.PATH.special = rootline
    marks.PATH.1 = TMENU
    marks.PATH.1.begin = 2
    marks.PATH.1.NO.allWrap = | / |*||*| | </div>
    
    # Left Navigation
    marks.LEFT-NAVI = HMENU
    marks.LEFT-NAVI.entryLevel = 0
    marks.LEFT-NAVI.1 = TMENU
    marks.LEFT-NAVI.1.begin = 1
    marks.LEFT-NAVI.1 {
        NO {
            allWrap = <div class="linksf">  | </div>
            ATagParams=class="linksf"
            beforeImg = fileadmin/design/item_default.gif
        }
        ACT = 1
        ACT {
            allWrap = <div class="linksf_active">  | </div>
            ATagParams=class="linksf_active"
            beforeImg = fileadmin/design/item_blue_gray.gif
        }
    }
    marks.LEFT-NAVI.2 = TMENU
    marks.LEFT-NAVI.2 {
        NO {
            allWrap = <div class="links" id="level1"> | </div>
            ATagParams=class="links"
            beforeImg = fileadmin/design/item_default.gif
        }
        ACT = 1
        ACT {
            allWrap = <div class="links_active" id="level1"> | </div>
            ATagParams=class="links_active"
            beforeImg = fileadmin/design/item_green_gray.gif
        }
    }
      
    # Languages
    marks.LANG = PHP_SCRIPT
    marks.LANG {
        file = fileadmin/scripts/lang.php
    }
    
    # Spendenstand
    marks.STXT = TEXT
    marks.STXT.value = <a href="index.php?id=20&L=0">Donations 2007 CHF:<b>
    marks.STAND = PHP_SCRIPT_EXT
        marks.STAND {
        file = fileadmin/scripts/stand.php
    }
    marks.TAG = TEXT
    marks.TAG.value = </b> <br /> noon: 100% efficient and transparent</a>
    
    # Counter
    marks.VISITORS = PHP_SCRIPT_EXT
        marks.VISITORS {
        file = fileadmin/scripts/counter.php
    }
}

styles.content.get = CONTENT
styles.content.get {
    table = tt_content
    select.orderBy = sorting
    select.where = colPos=0
    select.languageField = sys_language_uid
}

[globalVar = GP:L = 1]
config.sys_language_uid = 1
config.language = de
page.10.marks.TITLE {
    	value = Direkte Hilfe gegen Armut in Indien
    	wrap = <div class="haupttitel"><b> | </b></div>
    }
page.10.marks.BTN {
    	value =
    	wrap = <a  id="btn" href="index.php?id=20&L=1"> | </a>
    }
page.10.marks.STXT.value = <a href="index.php?id=20&L=1">Spenden 2007 CHF:<b>
page.10.marks.TAG.value = </b> <br /> noon: 100% in Effizienz und Transparenz</a>
page.10.marks.PTXT.value = <div id="ptxt"> navigation:  
[global]

### Frontend editing
page.20 = EDITPANEL
page.20 {
 label = Neuer Seiteninhalt einfügen
 line = 5
 newRecordFromTable = tt_content
 languageField = sys_language_uid
}

page.30 = EDITPANEL
page.30 {
 allow = new
 label = Seite:<B>%s</B><br> Neue Unterseite zu dieser Seite
 line = 5
}

#### new contact form
plugin.tx_spbettercontact_pi1 {
      mailto = ...
      mailfrom = ...
      mailerror = ...
      webaddress = ...
      signature = noon
  ###  templateFile = fileadmin/design/tx_sp_bettercontact.html
      color_positive = #00CC00
      color_negative = #FF0000
      regex_name = /^[a-zäüöÄÜÖa-ýA-Ýß0-9\-\[\]\(\)\s\.]{3,}$/i
      regex_tel = /^[0-9\-\(\)\/\+\s]*$/
      regex_fax = /^[0-9\-\(\)\/\+\s]*$/
      regex_mail = /^[\w-]+(?:\.[\w-]+)*@(?:[\w-]+\.)+[a-zA-Z]{2,7}/
      regex_inquiry = /^[[:print:][:space:]ßäüöÄÜÖa-ýA-Ý\n]{10,}$/
}

tt_content.mailform.20.target = _self

tt_content.mailform.20 {
  accessibility = 1
  noWrapAttr=1
  formName = mailform
  dontMd5FieldNames = 1
  REQ = 1
  layout = <div>###LABEL### ###FIELD###</div>
  COMMENT.layout = <div>###LABEL###</div>
   
  ### doppeltes LABEL
  // RADIO.layout = <div>###LABEL### ###FIELD###</div>
  RADIO.layout = <div class="radiolayout">###FIELD###</div>
   
  LABEL.layout = <div>###LABEL### ###FIELD###</div>
   
  ### Möglichkeit die Input Felder nebeneinander sauber
  ### darzustellen
  //labelWrap.wrap = <div style="width:100px; float:left;">|</div>
  labelWrap.wrap = <div style="width:350px;">|</div>
   
  commentWrap.wrap = |
   
  ### nach jeden Optionsfeld ein Umbruch, lässt man den weg, sind
  ### die Optionsfelder nacheinander
  radioWrap.wrap = |<br />
   
  ### Das selbe gilt für benötigte Felder in Formularen
  REQ.labelWrap.wrap = <div style="width:350px;">|</div>
  stdWrap.wrap =  <div class="formu">|</div>
}

### Formular CSS zuweisen
### Die CSS müssen natürlich eingebunden werden
### Seitendefinition

page = PAGE
page.includeCSS {
  file1 = fileadmin/design/noon.css
}

### Des weiteren habe ich für die einzelnen durch CSS definierten
### Input, Select, etc. Klassen, ebenfalls im Setup von TYPO3

tt_content.mailform.20 {
  params >
  params.input = class="mf-input"
  params.password = class="mf-pass"
  params.textarea = class="mf-text"
  params.check = class="mf-check"
  params.radio = class="mf-radio"
  params.select = class="mf-select"
  params.file = class="mf-file"
  params.reset = class="mf-reset"
  params.submit = class="mf-submit"
}

    [globalVar = TSFE : beUserLogin > 0]
      page.10.marks.LOGOUT = TEXT
      page.10.marks.LOGOUT.value = <a href="logout.php?redirect=../index.php&ATBE=1&sendLogoutSignal=1">Logout</a>
      [else]
      page.10.marks.LOGOUT = TEXT
      page.10.marks.LOGOUT.value =
      [global] 

HTML Template

<html>

<head>
	<title>noon</title>

	<link href="style.css" rel="stylesheet" type="text/css">
	<link REL="SHORTCUT ICON" HREF="favicon.ico">

</head>

<body bgcolor=black text=white link=white vlink=white alink=white>

<!-- Alles oberhalb wird von Typo3 ignoriert -->
    
<!--###DOKUMENT### start -->

<table border = 0 CELLPADDING=13>
	<tr>
	
		<td>
			<a href="http://www.my.site/">

<img src="noon-logo-black-tiny.jpg" width=120 style="border:none;" ></a>
		</td>

		<td align=right width=750 >
			###TITLE###
			<hr size='3' color=#ffcc00>
		    ###PTXT### ###PATH###
			<br />
			###LOGOUT###
		</td>

		<td>
		</td>
		
	</tr>


	<tr valign=top>
	
		<td width=85>
	
			<table border = 0 width=100>

				<tr align=right>
					<td>
						###LEFT-NAVI###
					</td>
				</tr>

			</table>

   	</td>

		<td width=750>
		  <div class="text">
			###CONT###
		  </div>
		</td>
	
		<td>
	
			<table border=0>
		
    			<tr align=left>
    				<td>
    					###LANG###
    					<br />
       					
    					
    				</td>
    			</tr>

				<tr>
					<td>
					</td>
				</tr>
		
			</table>
		
		</td>

	</tr>

		<table border=0>
		
			<tr>
				<td  width=125 align=right>
				</td>
				<td width=676 align=center>
				
					<div class="feedback">
					###STXT### ###STAND###
					###TAG###
					<br />
					<br />
					<br />
					</div>
					###BTN###
				</td>

			<td align=right valign=bottom width=100>

				<table cellpadding='2' cellspacing='0' summary='' style='width:100px;height:60px;;font-family:Arial;'>

					<tr>
					
						<td>
							
							<table width='100%' summary=''>
  
  								<tr>
    							
    								<td style='font-size:8pt' align=right>
    									<br /><br /> ###VISITORS###
    								</td>
    								
    							</tr>

							</table>
						
						</td>
					
					</tr>
			
				</table>
 
			</td>
   </tr>

</table>

<!--###DOKUMENT### stop -->

</body>

</html>


CSS:

hr.yhr {height: 3px; background-color: #ffcc00; border:solid #000000 1px}

a {background-color:black; text-decoration:none; font-family:Arial; color:#ffcc00; font-size:12px;}
a:hover {background-color:#ffcc00; color:black; font-family:Arial; text-decoration: none; font-size:12px;}

.linksf{background-color: transparent; text-decoration: none; font-family: Arial; color:white; font-size: 14px; font-weight: bold; }
.linksf a { display: block; background-color: transparent; text-decoration: none; font-family: Arial; color: #ffcc00; font-size: 14px; font-weight: bold; }
.linksf a:hover { background-color: #ffcc00; text-decoration: none; color: black; font-family: Arial; font-size: 14px; font-weight: bold; }
.linksf a span { display: none; background-color: transparent; text-decoration: none; font-family: Arial; color: white; font-size: 14px; font-weight: bold; }
.linksf a:hover span { padding: 5px; background: black; display: block; position: absolute; top: 120px; left: 182px; width: 400px; color: #ffcc00;  font-family: Arial; font-style: normal; font-variant: normal; font-weight: normal; font-size: 20px; line-height: normal; font-size-adjust: none; font-stretch: normal; text-align: left; }

.linksf_active{background-color: transparent; text-decoration: none; font-family: Arial; color:white; font-size: 14px; font-weight: bold; }
.linksf_active a { display: block; background-color: transparent; text-decoration: none; font-family: Arial; color: white; font-size: 14px; font-weight: bold; }
.linksf_active a:hover { background-color: #ffcc00; text-decoration: none; color: white; font-family: Arial; font-size: 14px; font-weight: bold; }
.linksf_active a span { display: none; background-color: transparent; text-decoration: none; font-family: Arial; color: white; font-size: 14px; font-weight: bold; }
.linksf_active a:hover span { padding: 5px; background: black; display: block; position: absolute; top: 120px; left: 182px; width: 400px; color: white;  font-family: Arial; font-style: normal; font-variant: normal; font-weight: normal; font-size: 20px; line-height: normal; font-size-adjust: none; font-stretch: normal; text-align: left; }

.linkslang{background-color: transparent; text-decoration: none; font-family: Arial; color: #ffcc00; font-size: 12px; font-weight: bold; }
.linkslang a { display: block; background-color: transparent; text-decoration: none; font-family: Arial; color: #ffcc00; font-size: 12px; font-weight: bold; }

.linksf1 {background-color: transparent; text-decoration: none; font-family: Arial; color:white; font-size: 14px; font-weight: bold; }
.linksf1 a { display: block; background-color: #ffcc00; text-decoration: none; font-family: Arial; color: black; font-size: 14px; font-weight: bold; }
.linksf1 a:hover { background-color: #ffcc00; text-decoration: none; color: black; font-family: Arial; font-size: 14px; font-weight: bold; }
.linksf1 a span { display: none; background-color: transparent; text-decoration: none; font-family: Arial; color: white; font-size: 14px; font-weight: bold; }
.linksf1 a:hover span { padding: 5px; background: black; display: block; position: absolute; top: 120px; left: 182px; width: 400px; color: #ffcc00;  font-family: Arial; font-style: normal; font-variant: normal; font-weight: normal; font-size: 20px; line-height: normal; font-size-adjust: none; font-stretch: normal; text-align: left; }

.notfat A:link {background-color:black; text-decoration:none; font-family:Arial; color:white; font-size:12px;}
.notfat A:hover {background-color:white; color:black; font-family:Arial; text-decoration: none; font-size:12px;}
.notfat a span {display: none; background-color:black; text-decoration:none; font-family:Arial; color:black; font-size:12px; font-weight:bold;}
.notfat a:hover span {display: block; position: absolute; top: 195px; left: 300; width: 400px; decoration:none; color: black; background: transparent; font: 20px Arial; text-align: right;}

.notfat-b A:link {background-color:black; text-decoration:none; font-family:Arial; color:#3399ff; font-size:12px;}
.notfat-b A:visited {background-color:black; text-decoration:none; font-family:Arial; color:#3399ff; font-size:12px;}
.notfat-b A:hover {background-color:black; color:#3399ff; font-family:Arial; text-decoration: underline overline; font-size:12px;}

.big A:link {background-color:transparent; text-decoration:none; font-family:Arial; color:white; font-size:20px;}
.big A:visited {background-color:transparent; text-decoration:none; font-family:Arial; color:white; font-size:20px;}
.big A:hover {background-color:black; color:white; font-family:Arial; font-size:20px;}
.big  A span {display: none; background-color:transparent; text-decoration:none; font-family:Arial; color:white; font-size:14px; font-weight:bold;}
.big a:hover span {display: block; position: absolute; top: 200px; left: 300; width: 400px;  padding: 5px;  color: black; background: transparent; font: 20px Arial; text-align: right;}


.back, .back TD, .back TH{ background-image:url('fileadmin/photos/rotate_home/rotate.php'); background-color: transparent;  background-repeat: no-repeat;
  background-position: center;}
.x, .x TD, .x TH{background-image:url('');background-color:transparent;}

.haupttitel{background-color:transparent; text-decoration:none; font-family:Arial; color:white; font-size:30px;}
.untertitel{background-color:transparent; text-decoration:none; font-family:Arial; color:white; font-size:20px;}
.location{background-color:transparent; text-decoration:none; font-family:Arial; color:white; font-size:12px;}
.spendenstand{background-color:transparent; text-decoration:none; font-family:Arial; color:white; font-size:20px;}
.feedback {background-color:transparent; text-decoration:none; font-family:Arial; color:#ffcc00; font-size:12px;}
.feedback a{background-color:transparent; text-decoration:none; font-family:Arial; color:#ffcc00; font-size:12px;}
.feedback a:hover{background-color:#ffcc00;  text-decoration:none; font-family:Arial; color:black; font-size:12px;}


.t{background-color:transparent; text-decoration:none; font-family:Arial; color:white; font-size:20px; font-weight:bold;}
.t1{background-color:transparent; text-decoration:none; font-family:Arial; color:white; font-size:18px;}
.t2{background-color:transparent; text-decoration:none; font-family:Arial; color:white; font-size:16px;}
.text{background-color:transparent; text-decoration:none; font-family:Arial; color:#F0F0F0; font-size:14px;}

.links A:link {background-color:black; text-decoration:none; font-family:Arial; color:#ffcc00; font-size:12px;}
.links A:visited {background-color:black; text-decoration:none; font-family:Arial; color:#ffcc00; font-size:12px;}
.links A:hover {background-color:#ffcc00; color:black; font-family:Arial; text-decoration: none; font-size:12px;}
.links_active {background-color:black; color:white; font-family:Arial; text-decoration: none; font-size:12px;}



.linksmain A:link {display: block; background-color:black; text-decoration:none; font-family:Arial; color:#ffcc00; font-size:12px;}
.linksmain A:visited {background-color:black; text-decoration:none; font-family:Arial; color:#ffcc00; font-size:12px;}
.linksmain A:hover {background-color:#ffcc00; color:black; font-family:Arial; text-decoration: none; font-size:12px;}

.links2 A:link {background-color:black; text-decoration:none; font-family:Arial; color:#ffcc00; font-size:16px;}
.links2 A:visited {background-color:black; text-decoration:none; font-family:Arial; color:#ffcc00; font-size:16px;}
.links2 A:hover {background-color:#ffcc00; color:black; font-family:Arial; text-decoration: underline overline; font-size:16px;}


.bild A:link {background-color:transparent; text-decoration:none; font-family:Arial; color:white; font-size:20px;}
.bild A:visited {background-color:transparent; text-decoration:none; font-family:Arial; color:white; font-size:20px;}
.bild A:hover {background-color:black; color:white; font-family:Arial; font-size:20px;}
.bild  A span {display: none; background-color:transparent; text-decoration:none; font-family:Arial; color:white; font-size:14px; font-weight:bold;}
.bild a:hover span {display: block; position: absolute; top: 400px; left: 495px; width: 300px;  padding: 5px;  color:#ffcc00; background: transparent; font: 16px Arial; text-align: right;}

.xmas1{ padding:0; text-decoration: none; font-family: Arial; color:#ffcc00; font-size: 15px;}

.xmas{ padding:5; text-decoration: none; font-family: Arial; color:#ffcc00; font-size: 15px; font-weight: bold;}
.xmas a {background-color: transparent;  text-decoration: none; color: #ffcc00;  font-family: Arial; font-style: normal; font-variant: normal; font-weight: normal; font-size: 15px; line-height: normal; font-size-adjust: none; font-stretch: normal; text-align: left; font-weight: bold;}
.xmas a:hover {background-color: black ;text-decoration: none;  font-weight: bold; color:#ffcc00;}
.xmas a span { display: none; background-color: black; }
.xmas a:hover span { background-color: black; display: inline; position: relative; color: white;  font-family: Arial; font-style: normal; font-variant: normal; font-weight: bold; font-size: 15px; line-height: normal; font-size-adjust: none; font-stretch: normal; text-align: left; }

#ptxt {font-family:Arial;font-size:12px;}

a#btn {
    display: block;
    background-image: url(fileadmin/design/btn_d.gif);
    width: 139px;
    height: 28px;
}

a#btn:hover {
    background-image: url(fileadmin/design/btn_d_ro.gif);
    width: 139px;
    height: 28px;
}

a#btn_e {
    display: block;
    background-image: url(fileadmin/design/btn_e.gif);
    width: 124px;
    height: 28px;
}

a#btn_e:hover {
    background-image: url(fileadmin/design/btn_e_ro.gif);
    width: 124px;
    height: 28px;
}

legend {
padding-left:10px;
padding-right:10px;
border: 0px;
}

fieldset {
border:0px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
border: 1px solid #C0C0C0;
}

.radiolayout {
width:60%;
padding-top:15px;
padding-bottom:15px;
}

.formu {
width:80%;
padding-top:10px;
padding-bottom:10px;
padding-left:10px;
border: 0px solid #C0C0C0;
}

.mf-radio {
border:0px;
}

.mf-text {
color: #000000;
border: 1px solid #C0C0C0;
margin-bottom: 5px;
}

.mf-check {
border: 0px;
}
.mf-select {
border:0px;
}

.mf-input {
border: 1px solid #C0C0C0;
margin-bottom: 5px;
}


.csc-mailform { border: none; }
.csc-mailform input,  .csc-mailform textarea { padding: 1px; }
.csc-mailform-field label { width: 100px; display:block; float: left; font-size:13px;  }
.csc-mailform-field { padding-bottom: 10px; }

olsen

TypoScript

### Templates

page = PAGE
page.typeNum = 0
page.shortcutIcon = fileadmin/design/templates/favicon.ico
page.stylesheet = fileadmin/design/templates/olsen.css

config.doctype = xhtml_trans
config.xhtml_cleaning = all

### Body Tag Wrap

body = TEXT
body.wrap = <body class="nav">  
page.bodyTagCObject < body

### Main

page.10 = TEMPLATE
page.10 {
   # Templates
   template = FILE
   template.file = fileadmin/design/templates/olsen.html
   workOnSubpart = DOKUMENT
   
   # Content
   marks.CONT = CONTENT
   marks.CONT {
   table=tt_content
   select.where=colPos=0
  }
  
  # Right Content
   marks.RIGHTCONT = CONTENT
   marks.RIGHTCONT {
    table=tt_content
    select.where=colPos=2
    stdWrap.required = 1
    stdWrap.wrap = <div id="modul_right"> | </div>
  }
   
   # Logo
   marks.LOGO = FILE
   marks.LOGO {
    	file = fileadmin/design/images/logo.gif
    }

   # Left Navigation
   marks.LEFTNAV = HMENU
   marks.LEFTNAV.1 = TMENU
   marks.LEFTNAV.entryLevel=1
   marks.LEFTNAV.1 {
        NO {
            allWrap = <div class="left"> | </div>
            ATagParams=class="left"
        }
        ACT = 1
        ACT {
            allWrap = <div class="left_active"> | </div>
            ATagParams=class="active"
       }
   }
   marks.LEFTNAV.2 = TMENU
   marks.LEFTNAV.2 {
        NO {
            allWrap = <div class="left" id="level1">      | </div>
            ATagParams=class="left"
            beforeImg = fileadmin/design/item_default.gif   
        }
        ACT = 1
        ACT {
            allWrap = <div class="active1" id="level1">      | </div>
            ATagParams=class="active1"
            beforeImg = fileadmin/design/item_green_gray.gif
        }
    }
    
    # Top Navigation
    marks.TOPNAV = HMENU
    marks.TOPNAV.special = list
    ### Page Ids ###
    marks.TOPNAV.special.value = 7, 8, 9, 10, 11, 12
    ###
    marks.TOPNAV.1 = TMENU
    marks.TOPNAV.1 {
        NO{
           allWrap =  <span class="topnav"> | </span>
        }
        ACT = 1
        ACT {
            allWrap =  <span class="topnav-selected"> | </span>
        }
   }

   # Main Navigation
   marks.MAINNAV = HMENU
   marks.MAINNAV.entryLevel = 0
   ### Start level ###
   marks.MAINNAV.begin = 7
   ###
   marks.MAINNAV.1 = TMENU
   marks.MAINNAV.1 {
        NO{
           allWrap =  | 
        }
        ACT = 1
        ACT {
            allWrap =  <span class="active"> | </span>
            ATagParams=class="active"
        }
   }
}

HTML Template

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="olsen.css" />
		<style type="text/css" media="screen"><!----></style>
	</head>

	<body class="nav">
	
	<!--Everything above is ignored by Typo3 -->
	<!--###DOKUMENT### start -->
	
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tr height="22">
				<td align="center" height="22">
					<div id="meta">
						###TOPNAV###
					</div>
				</td>
			</tr>
			<tr>
				<td align="center">
					<table width="976" border="0" cellspacing="0" cellpadding="0" background="fileadmin/design/images/player.gif" height="258">
						<tr>
							<td valign="top" class="playerstage"><div id="playerstage">###LOGO###</div></td>
						</tr>
						<tr height="40">
							<td height="40">
								<div id="mainnav">
									###MAINNAV###
								</div>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td align="center">
					<div id="container">
						<div id="modul_left">
							###LEFTNAV###
						</div>
						<div id="modul_middle">
							###CONT###
						</div>
						
							###RIGHTCONT###
						
					</div>
					<div id="footer"></div>
				</td>
			</tr>
		</table>
		
	<!--###DOKUMENT### stop -->		

	</body>

</html>

CSS:

/*<agl.folder "body">*/
	body { font-family: "Lucida Grande", Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 13px; color: #333333; background-color: #fff; background-repeat: no-repeat; background-attachment: fixed; background-position: center top; margin: 0; padding: 0; }
	body.nav {
		background-image: url(bg.gif);
		background-repeat: repeat-x;
		margin: 0;
		padding: 0;
		}
	body.content {
		margin: 0;
		padding: 0;
		}
		
	.bold { font-weight: bold; }
	.einzug { position: relative; left: 13px; }
	
	h1 {
		color: #3871c1;
		font-size: 15px;
		font-weight: bold;
		margin: 0 0 15px;
		padding: 0;
		}

	#modul_right h1 {
		color: #333333;
		font-size: 11px;
		background-color: #a8c5e7;
		padding:5px 10px;
		margin:0 0 10px;
	}

/*</agl.folder>*/
/*<agl.folder "header">*/
	#meta {
		font-size: 10px;
		margin: 0 auto 0;
		padding: 0;
		text-align: right;
		width: 940px;
		}

	#meta a {
		margin-left: 5px;
		}

	#mainnav a {
		color: #444;
		font-size: 16px;
		margin-left: 20px;
		}





/*</agl.folder>*/
/*<agl.folder "links">*/

a:link, a:visited  {
	text-decoration:none;
	color: #3871c1;
}
a:hover { 
	text-decoration:underline;
	color: #444; 
}

#modul_middle a:link, #modul_middle a:visited  {
	text-decoration:underline;
	color: #3871c1;
}
a:hover { 
	text-decoration:underline;
	color: #444; 
}

a:visited.active, a:link.active {
		color: #444;
		font-weight: bold;
		}

/*</agl.folder>*/
/*<agl.folder "content">*/
	#container {
		width: 940px;
		clear: both;
		margin: 15px auto 0;
		padding: 0;
		}
	#modul_left {
		width:165px;
		text-align:left;
		list-style-type: none;
		float: left;
		background: #ffffff;
		clear: both;
		}
	#modul_middle {
		width: 470px;
		text-align: left;
		float: left;
		padding-right: 30px;
		background: #ffffff;
		clear: right;
		}
		

	#modul_right {
		font-size: 11px;
		background-color: transparent;
		background-repeat: repeat-x;
		background-attachment: scroll;
		background-position: 0 0;
		text-align: left;
		position: relative;
		float: left;
		width: 270px;
		padding: 0 0 0 0;
		border: solid 1px #a8c5e7;
		}
	#footer {
		width: 940px;
		height: 15px;
		clear: both;
		margin-right: auto;
		margin-left: auto;
		}



/*</agl.folder>*/
#id {
	}
#modul_right p {
	margin: 0;
	padding: 0 10px 10px;
	}

p {
	margin: 0 0 10px;
	padding: 0;
	}
/*<agl.folder "new">*/
	.button {
	background: url(fileadmin/design/images/button.gif)url(fileadmin/design/images/button.gif) no-repeat;
	width: 155px;
	height: 27px;
	text-align: center;
	font-size: larger;
	font-weight: bolder;
}
	.blue_bg {
	background: #cee0f3;	
}
	#modul_report {
	font-size: 10px;
}
	#modul_report th {
	background: #cee0f3;
	font-size: larger;
	padding: 5px 5px 5px 0;
}
	#modul_accountOverview {
	font-size: 10px;
}
	#modul_accountOverview th{
	background: #cee0f3;
	font-size: larger;
	text-align: left;
	padding: 5px;
}
	.table_result {
	margin: 0;
	line-height: 20px;
}
/*</agl.folder>*/
/*<agl.folder "imported">*/
	.reporttable {
  width: 100%;
	border-spacing: 0;
}
	.reporttable td {
	padding: 5px;
}
	.borderBottom {
    background-color: #cee0f3;
	font-weight: bolder;
	font-size: larger;
}
	.doctableRowDark {
    background-color: #cee0f3;
}
/*</agl.folder>*/
#playerstage {
	margin: 0;
	padding: 30px 30px 10px;
	}
	
/* Left Navigation */

.left { 
    padding-top: 1.0em;
}

.left_active { 
    padding-top: 1.0em;
    color: #444;
    font-weight: bold;
}

#level1 {
  font-size:10px;
  padding-top: 0.1em;
 }

#level1 a { 
  font-size:10px;
 }

#level1 a:hover {
  font-size:10px;
 }

#level1 .active1 {
  font-size:10px;
  font-weight: bold;
  color: #444444;
 }

imkeller

Link: imkeller.ath.cx

TypoScript

Constants:

styles.content.loginform.pid = 23
plugin.meta >
plugin.meta {
description =
keywords =
robots =
copyright =
email =
author =
language =
distribution =
rating =
revisit =
includeGlobal = 0
}
plugin.tx_gooffotoboek_pi1.default_thumb = 1
plugin.tx_wssitemap_pi1.rootPageName = hom
plugin.tx_wssitemap_pi1.menuSpecialValue = 37,54,39
plugin.tx_wssitemap_pi1.menuExcludeUidList = 
plugin.tx_wssitemap_pi1.rootPagePID = 36
plugin.feadmin.dmailsubscription.pid = 74
plugin.feadmin.dmailsubscription.color1 = #CCCCCC
plugin.feadmin.dmailsubscription.file.templateFile = EXT:direct_mail_subscription/pi/fe_admin_dmailsubscrip.tmpl
plugin.feadmin.dmailsubscription.wrap2 = <font face="verdana" size=1 color=#ff6600> | </font>
plugin.feadmin.dmailsubscription.wrap1 = <font face="verdana" size=2 color=#ff6600> | </font>

Setup:

# Default PAGE object:

plugin.meta.global.description =  
plugin.meta.global.keywords = 
plugin.meta.global.author = jbg
plugin.meta.global.robots = follow
plugin.meta.global.revisit = 14

plugin.meta.flags.useSecondaryDescKey = 0
plugin.meta.flags.alwaysGlobalDescription = 1
plugin.meta.flags.alwaysGlobalKeywords = 1
plugin.meta.flags.DC = 0

config.admPanel = 1
config.doctype = xhtml_trans
config.xhtml_cleaning = all

body = TEXT
body.field = uid
body.wrap = <body bgcolor="#000000" margin="0" marginheight="0" marginwidth="0" class="body_|">  
page.bodyTagCObject < body

page = PAGE
page.typeNum = 0
page.shortcutIcon = fileadmin/template/favicon.ico
page.stylesheet = fileadmin/template/keller.css
page.headerData.999 < plugin.meta
page.10 = TEMPLATE
page.10 {
    template = FILE
    template.file = fileadmin/template/keller.html
    workOnSubpart = DOKUMENT

    marks.CONT < styles.content.get

    marks.LEFT = HMENU
    marks.LEFT.entryLevel = 0
    marks.LEFT.1 = TMENU
    marks.LEFT.1.begin = 6
    marks.LEFT.1 {
        NO {
            allWrap = <div class="navi">  | </div>
            ATagParams=class="navi"
        }
        ACT = 1
        ACT {
            allWrap = <div class="navi_active">  | </div>
            ATagParams=class="navi_active"
        }
    }
    marks.LEFT.2 = TMENU
    marks.LEFT.2 {
        NO {
            allWrap = <div class="navi" id="level1">     | </div>
            ATagParams=class="navi"
        }
        ACT = 1
        ACT {
            allWrap = <div class="navi_active" id="level1">     | </div>
            ATagParams=class="navi_active"
        }
    }

    marks.PATH = HMENU
    marks.PATH.special = rootline
    marks.PATH.1 = TMENU
    marks.PATH.1.NO.allWrap =  -> |

    marks.LOGIN = HMENU
    marks.LOGIN.special = list
    marks.LOGIN.special.value = 58
    marks.LOGIN.1 = TMENU
    marks.LOGIN.1 {
        NO{
           allWrap =  <td class="top"> | </td>
            ATagParams=class="top_a"
        }
        ACT = 1
        ACT {
            allWrap =  <td class="top_active"> | </td>
            ATagParams=class="top_active_a"
        }
     }

    marks.TOOLS = HMENU
    marks.TOOLS.special = list
    marks.TOOLS.special.value = 59
    marks.TOOLS.1 = TMENU
    marks.TOOLS.1{
        NO{
            allWrap =  <td class="top"> | </td>
            ATagParams=class="top_a"
        }
        ACT = 1
        ACT {
            allWrap =  <td class="top_active"> | </td>
            ATagParams=class="top_active_a"
        }
     }

    marks.LANGUAGES= HMENU
    marks.LANGUAGES.special = list
    marks.LANGUAGES.special.value = 60
    marks.LANGUAGES.1 = TMENU
    marks.LANGUAGES.1 {
        NO{
            allWrap =  <td class="top"> | </td>
            ATagParams=class="top_a"
        }
        ACT = 1
        ACT {
            allWrap =  <td class="top_active"> | </td>
            ATagParams=class="top_active_a"
        }
     }

    marks.FOOT = HTML
    marks.FOOT.value = <div align="center" class="footer"><A href="http://imkeller.ath.cx/index.php?id=82">webStatistics</A>          <A href="http://imkeller.ath.cx/index.php?id=81">techStuff</A></div> 
}

page.20 = EDITPANEL
page.20 {
 label = Neuer Seiteninhalt einfügen
 line = 5
 newRecordFromTable = tt_content
}

styles.content.get = CONTENT
styles.content.get {
    table = tt_content
    select.orderBy = sorting
    select.where = colPos=0
    select.languageField = sys_language_uid
}


HTML Template


<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Template2</title>
    
  </head>
  
  <body bgcolor="#EDFFD3" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
    
    <!-- Alles oberhalb wird von Typo3 ignoriert -->
    
    <!--###DOKUMENT### start -->


    <!-- Logos -->
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td>
          <img src="fileadmin/template/logo2.jpg" align="left" vspace="5" hspace="20" border="0">
        </td>
        <td>
          <img src="fileadmin/template/keller_logo.jpg"  hspace="110" align="left" border="0" class="border">
        </td>
      </tr>
    </table>
<br>

    <!-- Main Block -->
    <table class="background" width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <!-- left seperator -->
        <td width="1%" height="100%"> </td>
        <!-- navigation box -->
        <td width="150" height="100%" valign="top">
          <!-- top seperator -->
          <table id="nav_space" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td> </td>
            </tr>
          </table>
          <!-- tab -->
          <table border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td id="nav_tab">navigation</td>
            </tr>
          </table>
          <!-- left menu -->
          <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>    
              <td id="nav_cont">###LEFT###</td>
            </tr>
          </table>
        </td>
        <!-- middle seperator -->
        <td width="1%" height="100%"> </td>
        <!-- content table -->
        <td>
          <!-- top menu -->
          <table class="white" border="0" cellpadding="0" cellspacing="0">
            <tr>
              ###LOGIN###  
              <td class="background"">  </td>
              ###TOOLS###
              <td class="background">   </td>
              ###LANGUAGES###
            </tr>
          </table>
          <!-- the content -->
          <table class="ccolor" border="0" width="100%"  cellpadding="0" cellspacing="0" >
            <tr>
              <td height="280" class="ccont" id="cont">
                ###CONT###
              </td>
            </tr>
          </table>
        </td>
        <td width="1%" height="100%"> </td>
      </tr>
    </table>
    <!-- path -->
    <table border="0" width="100%" cellpadding="0" cellspacing="0">
      <tr>
        <td id="path">
          ###PATH###
        </td>
      </tr>
    </table>
    
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td height="40"> </td>
      </tr>
    </table>
    
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td id="foot">
          ###FOOT###
        </td>
      </tr>
      <tr>
        <td height="45">
           
        </td>
      </tr>
      <tr>
        <td align="center">
          <a href="http://typo3.com/"
            title="Powerde by Typo3 CMS">
            <img border="0" src="fileadmin/template/typo3.png"
              alt="Typo3"
              title="Powerde by Typo3 CMS" />
          </a>
        </td>
      </tr>
      <tr>
        <td height="7">
           
        </td>
      </tr>
      <tr>
        <td align="center">
          <a href="http://www.w3.org/WAI/WCAG1AA-Conformance"
            title="Explanation of WCAG Conformance"><img border="0"
              src="fileadmin/template/w3c-aa.gif"
              height="15" width="80" alt="WCAG"
              title="This site conforms to the
              W3C-WAI Web Content Accessibility Guidelines."></a>
          <a href="http://validator.w3.org/check/referer"><img border="0"
              src="fileadmin/template/w3c_xhtml.png"
              height="15" width="80" alt="Valid XHTML"
              title="This site is valid XHTML."></a>
          
          <a href="http://jigsaw.w3.org/css-validator/check/referer"><img border="0"
              src="fileadmin/template/w3c_css.png"
              height="15" width="80" alt="Valid CSS"
              title="This site was built with valid CSS."></a>
          
          <a href="http://imkeller.ath.cx/index.php?id=90"><img border="0"
              src="fileadmin/template/anybrowser.png"
              height="15" width="80" alt="Usable in any browser"
              title="This site is usable in any web browser"></a>      
        </td>
      </tr>
    </table>
    
    <!--###DOKUMENT### stop -->
    
  </body>
</html>


CSS:

/*Genral Settings*/

table { border-collapse: collapse; color:#ff6600}

input, textarea {
	font-family:arial,sans;
	color:#000000;
	background:#FFFFFF;
	border:solid 1px #FF6600;
	font-size:12px;
	padding:2px;
}
input:active,
input:focus,
textarea:active,
textarea:focus {
	border-color: #FF6600;
	background: #FFCC00;
}

.background { background-color:#000000; }

.white { background-color:#606060; }

.ccolor { background-color:#303030; }

.border { border:solid 1px #FF6600; }


/* Content */

body { margin:0; marginheight:0; marginwidth:0 ;font-family: sans-serif;}
ul { font-family: sans-serif; font-size:12px; }
h1{font-weight: bold; font-size: 15px;i}
.bodytext { font-size: 13px;}
.bodytext a:link { color:#CC0000; text-decoration: none; }
.bodytext a:visited { color:#FF6600; text-decoration: none; }
.bodytext a:hover { color:#FF6600; text-decoration: underline; }


/*Left Menu*/

.navi a:link { color:#000000; font-size: 12px; text-decoration: none; }
.navi a:visited { color:#000000; font-size: 12px; text-decoration: none; }
.navi a:hover { color:#FFcc00; font-size: 12px; text-decoration: none; }
.navi_active { color:#FFCC00; font-size: 12px; text-decoration: none; }

#level1 {background-color: #707070;}

#nav_tab { background-color: #FFCC00; font-size: 12px; text-decoration: none; border-top: 1px solid #FF6600;
 border-left: 1px solid #FF6600; border-right: 1px solid #FF6600; padding: 2px 5px;}
#nav_cont { background-color: #505050; font-size: 12px; text-decoration: none;  border: 1px solid #FF6600; padding: 5px 5px; }
#nav_space { height: 60px; }


/*Top Menu*/

.top { border-top: 1px solid #FF6600; border-left: 1px solid #FF6600; border-right: 1px solid #FF6600; padding: 2px 16px;}
.top a:hover { color: #FFCC00; font-size: 12px; text-decoration: none; }
.top_a { color: #000000;  font-size: 12px; text-decoration: none; }

.top_active{ border-top: 1px solid #FF6600; border-left: 1px solid #FF6600; border-right: 1px solid #FF6600; padding: 2px 16px; 
background-color:#FFCC00;}
.top_active_a { color:#000000; font-size: 12px; text-decoration: none; }


/*Content*/

#cont { border:1px solid #FF6600; padding: 10px 15px; vertical-align: top; font-size: 13px}

.ccont { font-family: sans-serif; font-size: 13px;  color:#FF6600; }
.ccont a:link { color:#ee1144; text-decoration: none; }
.ccont a:visited { color:#cc0000; text-decoration: none; }
.ccont a:hover { color:#cc0000; text-decoration: underline; }


/*Footer Text*/

.footer { font-family: sans-serif; font-size: 13px;}
.footer a:link { color:#AA0000; text-decoration: none; }
.footer a:visited { color:#AA0000; text-decoration: none; }
.footer a:hover { color:#FF6600; text-decoration: none; }


/*Misc*/

#path { font-size: 12px; text-decoration: none; color:#FF6600; text-align: right; padding-right: 2px;}
#path a { font-size: 12px; text-decoration: none; font-weight: bold; font-variant: small-caps; color:#FF6600; text-align: right;}

#foot { border-top: 1px solid #FF6600; border-bottom: 1px solid  #FF6600;  background-color: #FFCC00;}


/*Photo Book*/

.body_52 .ccont a:link { color:#ee1144; text-decoration: none; }
.body_52 .ccont a:visited { color:#ee1144; text-decoration: none; }
.body_52 .ccont a:hover { color:#ee1144; text-decoration: none; }

.body_76 .ccont a:link { color:#ee1144; text-decoration: none; }
.body_76 .ccont a:visited { color:#ee1144; text-decoration: none; }
.body_76 .ccont a:hover { color:#ee1144; text-decoration: none; }


/*Wiki*/

.body_80 .ccolor { background-color:#ffffff; }
.body_80 .ccont { color: #000000; }