<head>
<title>juplo - <t:getAsString name="title"/></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <base href="${pageContext.request.contextPath}/" />
- <link rel="stylesheet" type="text/css" href="css/base.css"/>
+ <base href="http://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/" />
+ <link rel="stylesheet" type="text/css" href="css/base.css" />
+ <style type="text/css">
+ @import 'css/screen.css' screen
+ </style>
</head>
<body>
<header id="header">
<css>/less/base/fonts.less</css>
<css>/less/base/util.less</css>
<css>/less/base/typo.less</css>
- <css>/less/base/layout.less</css>
- <css>/less/base/head.less</css>
- <css>/less/base/navigation.less</css>
<css>/less/base/content.less</css>
<css>/less/base/marginal.less</css>
- <css>/less/base/footer.less</css>
+ </group>
+
+ <group name="screen">
+ <css>/less/screen/layout.less</css>
+ <css>/less/screen/head.less</css>
+ <css>/less/screen/navigation.less</css>
+ <css>/less/screen/footer.less</css>
</group>
</groups>
+++ /dev/null
-@import '../variables.less';
-
-#footer
-{
- margin: 2em 0;
-}
-#footerlinks
-{
- font-family: 'BPreplay', Helvetica, Arial, sans-serif;
- font-weight: bold;
- position: relative;
- border-top: 1.25em solid @normal; /** 20px */
- margin: 0;
- padding: 0;
- list-style-type: none;
-}
-#footerlinks > li.f
-{
- font-size: 137.5%; /** 22 px */
- line-height: .6666666667em; /* 20px */
- display: inline-block;
- margin: .5em 1em 0 0;
- color: @normal;
- vertical-align: top;
-}
-#footerlinks > li#copyright
-{
- position: absolute;
- right: .625em;
- top: -1em; /** 30px */
- line-height: 1.4em; /* 42px */
- color: @hintergrund;
- margin: 0;
- font-size: 187.5%; /** 30px */
-}
-#footerlinks a.f
-{
- color: @normal;
- border-color: @normal;
-}
-#footerlinks a.f:hover
-{
- color: @dunkler;
- border-color: @dunkler;
- border-style: solid;
-}
+++ /dev/null
-@import '../variables.less';
-
-#header
-{
- font-family: 'BPreplay', Helvetica, Arial, sans-serif;
- font-weight: bold;
- margin-left: -4em;
-}
-#header > hr
-{
- display: none;
-}
-#logo
-{
- display: inline-block;
- font-size: 812.5%; /* 130px */
- line-height: 1em;
- padding: 0 0 0 .230769231em; /* 30px */
- color: @normal;
- text-shadow: .092307692em .046153846em 0 @hintergrund; /** 12px 6px */
- border: none;
- position: relative;
- z-index: 1;
-}
-#logo:hover
-{
- color: @dunkler;
-}
-#slogan
-{
- display: block;
- color: @hintergrund;
- background-color: @normal;
- font-size: 187.5%; /** 30px */
- line-height: .6666666667em; /* 20px */
- height: .6em; /* 18px */
- padding: .066666667em .066666667em 0 0; /** 2px 2px 0 0 */
- margin-left: 10em; /* 300px */
- position: relative;
- z-index: 0;
- top: -1.3em; /* 39px */
- text-align: right;
-}
-#slogan > strong{
- display: inline-block;
- position: relative;
- top: -.2em; /* -6px */
-}
+++ /dev/null
-@import '../variables.less';
-
-.content
-{
- position: relative;
-}
-.content.cols_2
-{
- padding: 0 27em 0 0;
- background-image: url('../../img/bg.gif');
- background-repeat: repeat-y;
- background-position: right top;
-}
-.content.cols_2 > .main
-{
- float: left;
- min-height: 1em;
- position: relative;
- width: 100%;
-}
-.content.cols_2 > .marginal
-{
- float: left;
- margin: 0 -27em 0 2.625em;
- padding: 0 2em 1.0625em 2em;
- position: relative;
- width: 20.375em;
- background-color: @heller;
-}
-.content #nav
-{
- position: absolute;
- top: 0;
- width: 100%;
-}
-.content.cols_2 #nav
-{
- position: relative;
- top: auto;
- right: auto;
- width: 22.375em; /** 358px = 326px + 32px*/
-}
-.content.cols_2 #nav > #menu
-{
- margin: 0 0 -2.125em 0; /** 0 0 -34px 0 */
-}
-.content.cols_1 #nav > #menu
-{
- position: absolute;
- top: -7em; /** 112px */
- right: 0;
- margin: 0;
-}
-
-/** Always display vertical scroll-bars */
-body { overflow-y: scroll; }
+++ /dev/null
-@import '../variables.less';
-
-#menu
-{
- position: relative;
- width: 200%;
- top: -7em;
- right: 100%;
- text-align: right;
- list-style-type: none;
- margin: 0;
- padding: 0;
-}
-#menu > li.m
-{
- display: inline-block;
- padding: 0 0 0 4em;
-}
-#menu > li.m > .m
-{
- font-family: 'BPreplay', Helvetica, Arial, sans-serif;
- font-weight: bold;
- font-size: 250%; /** 40px */
- color: @normal;
-}
-#menu > li.m > a.m
-{
- border-color: @normal;
-}
-#menu > li.m > a.m:hover
-{
- border-color: @dunkler;
-}
-#menu > li.m > a.m:hover,
-#menu > li.m > strong.m
-{
- border-style: solid;
-}
-#menu > li.m > a.m:hover
-{
- color: @dunkler;
-}
-#menu > li.m > a.m:hover:before,
-#menu > li.m > a.m.selected:before,
-#menu > li.m > strong.m:before
-{
- content: '> ';
- margin-left: -.92em;
-}
-
-#breadcrumb
-{
- position: absolute;
- top: 8.4em;
- left: 13.4em;
- z-index: 3;
- font-family: 'BPreplay', Helvetica, Arial, sans-serif;
- font-weight: bold;
- color: @normal;
-}
-#breadcrumb > strong.b
-{
- float: left;
-}
-#breadcrumb > ol.b
-{
- display: inline;
- margin: 0;
- padding: 0;
- list-style-type: none;
-}
-#breadcrumb > ol.b > li.b
-{
- float: left;
- margin: 0 .5em 0 0;
- padding: 0;
-}
-#breadcrumb > ol.b > li.b:before
-{
- content: '> ';
- margin-right: .25em;
-}
-#breadcrumb > ol.b > li.b:first-child:before
-{
- content: '';
- margin: 0 0 0 1em;
-}
-#breadcrumb > ol.b > li.b > strong.b
-{
- border-bottom: 1px solid @normal;
-}
-#breadcrumb > ol.b > li.b > a.b
-{
- color: @normal;
-}
-#breadcrumb > ol.b > li.b > a.b:hover,
-#breadcrumb > ol.b > li.b > a.b:focus,
-#breadcrumb > ol.b > li.b > a.b:active
-{
- color: @dunkler;
-}
-
-#nav > h1.nav,
-#nav > h2.nav.menu
-{
- display: none;
-}
-#nav > h2.nav.submenu
-{
- font-size: 125%; /** 20px */
- line-height: 1em; /** 20px */
- margin: 1.5em 0 .5em 0; /** 30px 0 10px 0 */
- padding: 0 0 0 1.65em; /** 0 0 0 33px */
-}
-#nav > h2.nav.submenu:before
-{
- content: 'V ';
- margin: 0 .75em 0 -1.7em; /** 0 15em 0 -34px */
-}
-#nav > h2.nav.submenu > span.s
-{
- display: none;
-}
-#nav > h2.nav.submenu > a.s
-{
- color: @hintergrund;
- border-style: dashed;
- border-color: @hintergrund;
-}
-#nav > h2.nav.submenu > a.s:hover,
-#nav > h2.nav.submenu > a.s:focus,
-#nav > h2.nav.submenu > a.s:active
-{
- border-style: solid;
-}
-
-#submenu
-{
- font-family: 'BPreplay', Helvetica, Arial, sans-serif;
- font-weight: bold;
- font-size: 125%; /** 20 px */
- list-style-type: none;
- margin: 1em 0 4em 0;
- padding: 0 0 0 1.65em; /** 0 0 0 33px */
-}
-#submenu ul.s
-{
- margin: 1em 0 0 0; /** 16px 0 0 0 */
- padding: 0;
- list-style-type: none;
-}
-#submenu li.s
-{
- margin: 0 0 .5em 0; /** 0 0 10px 0 */
- padding: 0;
-}
-#submenu li.s.off
-{
- display: none;
-}
-#submenu li.s > a.selected,
-#submenu li.s > strong.s
-{
- color: @hintergrund;
- border-color: @hintergrund;
-}
-#submenu li.s > strong.s
-{
- border-bottom: 1px solid @hintergrund;
-}
-#submenu li.s > a.s.selected:before,
-#submenu li.s > a.s:hover:before,
-#submenu li.s > a.s:focus:before,
-#submenu li.s > a.s:active:before,
-#submenu li.s > strong.s:before
-{
- content: '> ';
- margin: 0 .75em 0 -1.7em; /** 0 15px 0 -34px = Warum auch immer?!? */
-}
-#submenu li.s.sub > a.s.selected:before,
-#submenu li.s.sub > a.s:hover:before,
-#submenu li.s.sub > a.s:focus:before,
-#submenu li.s.sub > a.s:active:before,
-#submenu li.s.sub > strong.s:before
-{
- content: 'V ';
-}
--- /dev/null
+@import '../variables.less';
+
+#footer
+{
+ margin: 2em 0;
+}
+#footerlinks
+{
+ font-family: 'BPreplay', Helvetica, Arial, sans-serif;
+ font-weight: bold;
+ position: relative;
+ border-top: 1.25em solid @normal; /** 20px */
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+}
+#footerlinks > li.f
+{
+ font-size: 137.5%; /** 22 px */
+ line-height: .6666666667em; /* 20px */
+ display: inline-block;
+ margin: .5em 1em 0 0;
+ color: @normal;
+ vertical-align: top;
+}
+#footerlinks > li#copyright
+{
+ position: absolute;
+ right: .625em;
+ top: -1em; /** 30px */
+ line-height: 1.4em; /* 42px */
+ color: @hintergrund;
+ margin: 0;
+ font-size: 187.5%; /** 30px */
+}
+#footerlinks a.f
+{
+ color: @normal;
+ border-color: @normal;
+}
+#footerlinks a.f:hover
+{
+ color: @dunkler;
+ border-color: @dunkler;
+ border-style: solid;
+}
--- /dev/null
+@import '../variables.less';
+
+#header
+{
+ font-family: 'BPreplay', Helvetica, Arial, sans-serif;
+ font-weight: bold;
+ margin-left: -4em;
+}
+#header > hr
+{
+ display: none;
+}
+#logo
+{
+ display: inline-block;
+ font-size: 812.5%; /* 130px */
+ line-height: 1em;
+ padding: 0 0 0 .230769231em; /* 30px */
+ color: @normal;
+ text-shadow: .092307692em .046153846em 0 @hintergrund; /** 12px 6px */
+ border: none;
+ position: relative;
+ z-index: 1;
+}
+#logo:hover
+{
+ color: @dunkler;
+}
+#slogan
+{
+ display: block;
+ color: @hintergrund;
+ background-color: @normal;
+ font-size: 187.5%; /** 30px */
+ line-height: .6666666667em; /* 20px */
+ height: .6em; /* 18px */
+ padding: .066666667em .066666667em 0 0; /** 2px 2px 0 0 */
+ margin-left: 10em; /* 300px */
+ position: relative;
+ z-index: 0;
+ top: -1.3em; /* 39px */
+ text-align: right;
+}
+#slogan > strong{
+ display: inline-block;
+ position: relative;
+ top: -.2em; /* -6px */
+}
--- /dev/null
+@import '../variables.less';
+
+.content
+{
+ position: relative;
+}
+.content.cols_2
+{
+ padding: 0 27em 0 0;
+ background-image: url('../../img/bg.gif');
+ background-repeat: repeat-y;
+ background-position: right top;
+}
+.content.cols_2 > .main
+{
+ float: left;
+ min-height: 1em;
+ position: relative;
+ width: 100%;
+}
+.content.cols_2 > .marginal
+{
+ float: left;
+ margin: 0 -27em 0 2.625em;
+ padding: 0 2em 1.0625em 2em;
+ position: relative;
+ width: 20.375em;
+ background-color: @heller;
+}
+.content #nav
+{
+ position: absolute;
+ top: 0;
+ width: 100%;
+}
+.content.cols_2 #nav
+{
+ position: relative;
+ top: auto;
+ right: auto;
+ width: 22.375em; /** 358px = 326px + 32px*/
+}
+.content.cols_2 #nav > #menu
+{
+ margin: 0 0 -2.125em 0; /** 0 0 -34px 0 */
+}
+.content.cols_1 #nav > #menu
+{
+ position: absolute;
+ top: -7em; /** 112px */
+ right: 0;
+ margin: 0;
+}
+
+/** Always display vertical scroll-bars */
+body { overflow-y: scroll; }
--- /dev/null
+@import '../variables.less';
+
+#menu
+{
+ position: relative;
+ width: 200%;
+ top: -7em;
+ right: 100%;
+ text-align: right;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+#menu > li.m
+{
+ display: inline-block;
+ padding: 0 0 0 4em;
+}
+#menu > li.m > .m
+{
+ font-family: 'BPreplay', Helvetica, Arial, sans-serif;
+ font-weight: bold;
+ font-size: 250%; /** 40px */
+ color: @normal;
+}
+#menu > li.m > a.m
+{
+ border-color: @normal;
+}
+#menu > li.m > a.m:hover
+{
+ border-color: @dunkler;
+}
+#menu > li.m > a.m:hover,
+#menu > li.m > strong.m
+{
+ border-style: solid;
+}
+#menu > li.m > a.m:hover
+{
+ color: @dunkler;
+}
+#menu > li.m > a.m:hover:before,
+#menu > li.m > a.m.selected:before,
+#menu > li.m > strong.m:before
+{
+ content: '> ';
+ margin-left: -.92em;
+}
+
+#breadcrumb
+{
+ position: absolute;
+ top: 8.4em;
+ left: 13.4em;
+ z-index: 3;
+ font-family: 'BPreplay', Helvetica, Arial, sans-serif;
+ font-weight: bold;
+ color: @normal;
+}
+#breadcrumb > strong.b
+{
+ float: left;
+}
+#breadcrumb > ol.b
+{
+ display: inline;
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+}
+#breadcrumb > ol.b > li.b
+{
+ float: left;
+ margin: 0 .5em 0 0;
+ padding: 0;
+}
+#breadcrumb > ol.b > li.b:before
+{
+ content: '> ';
+ margin-right: .25em;
+}
+#breadcrumb > ol.b > li.b:first-child:before
+{
+ content: '';
+ margin: 0 0 0 1em;
+}
+#breadcrumb > ol.b > li.b > strong.b
+{
+ border-bottom: 1px solid @normal;
+}
+#breadcrumb > ol.b > li.b > a.b
+{
+ color: @normal;
+}
+#breadcrumb > ol.b > li.b > a.b:hover,
+#breadcrumb > ol.b > li.b > a.b:focus,
+#breadcrumb > ol.b > li.b > a.b:active
+{
+ color: @dunkler;
+}
+
+#nav > h1.nav,
+#nav > h2.nav.menu
+{
+ display: none;
+}
+#nav > h2.nav.submenu
+{
+ font-size: 125%; /** 20px */
+ line-height: 1em; /** 20px */
+ margin: 1.5em 0 .5em 0; /** 30px 0 10px 0 */
+ padding: 0 0 0 1.65em; /** 0 0 0 33px */
+}
+#nav > h2.nav.submenu:before
+{
+ content: 'V ';
+ margin: 0 .75em 0 -1.7em; /** 0 15em 0 -34px */
+}
+#nav > h2.nav.submenu > span.s
+{
+ display: none;
+}
+#nav > h2.nav.submenu > a.s
+{
+ color: @hintergrund;
+ border-style: dashed;
+ border-color: @hintergrund;
+}
+#nav > h2.nav.submenu > a.s:hover,
+#nav > h2.nav.submenu > a.s:focus,
+#nav > h2.nav.submenu > a.s:active
+{
+ border-style: solid;
+}
+
+#submenu
+{
+ font-family: 'BPreplay', Helvetica, Arial, sans-serif;
+ font-weight: bold;
+ font-size: 125%; /** 20 px */
+ list-style-type: none;
+ margin: 1em 0 4em 0;
+ padding: 0 0 0 1.65em; /** 0 0 0 33px */
+}
+#submenu ul.s
+{
+ margin: 1em 0 0 0; /** 16px 0 0 0 */
+ padding: 0;
+ list-style-type: none;
+}
+#submenu li.s
+{
+ margin: 0 0 .5em 0; /** 0 0 10px 0 */
+ padding: 0;
+}
+#submenu li.s.off
+{
+ display: none;
+}
+#submenu li.s > a.selected,
+#submenu li.s > strong.s
+{
+ color: @hintergrund;
+ border-color: @hintergrund;
+}
+#submenu li.s > strong.s
+{
+ border-bottom: 1px solid @hintergrund;
+}
+#submenu li.s > a.s.selected:before,
+#submenu li.s > a.s:hover:before,
+#submenu li.s > a.s:focus:before,
+#submenu li.s > a.s:active:before,
+#submenu li.s > strong.s:before
+{
+ content: '> ';
+ margin: 0 .75em 0 -1.7em; /** 0 15px 0 -34px = Warum auch immer?!? */
+}
+#submenu li.s.sub > a.s.selected:before,
+#submenu li.s.sub > a.s:hover:before,
+#submenu li.s.sub > a.s:focus:before,
+#submenu li.s.sub > a.s:active:before,
+#submenu li.s.sub > strong.s:before
+{
+ content: 'V ';
+}