sourceMapURL: 'base.css.map',
sourceMapFilename: 'dist/css/base.css.map'
},
- src: 'less/base.less',
+ src: 'dist/less/base.less',
dest: 'dist/css/base.css'
},
screen: {
sourceMapURL: 'screen.css.map',
sourceMapFilename: 'dist/css/screen.css.map'
},
- src: 'less/screen.less',
+ src: 'dist/less/screen.less',
dest: 'dist/css/screen.css'
},
print: {
sourceMapURL: 'print.css.map',
sourceMapFilename: 'dist/css/print.css.map'
},
- src: 'less/print.less',
+ src: 'dist/less/print.less',
dest: 'dist/css/print.css'
},
ie8: {
sourceMapURL: 'ie8.css.map',
sourceMapFilename: 'dist/css/ie8.css.map'
},
- src: 'less/ie8.less',
+ src: 'dist/less/ie8.less',
dest: 'dist/css/ie8.css'
},
tablet: {
sourceMapURL: 'tablet.css.map',
sourceMapFilename: 'dist/css/tablet.css.map'
},
- src: 'less/tablet.less',
+ src: 'dist/less/tablet.less',
dest: 'dist/css/tablet.css'
},
phone: {
sourceMapURL: 'phone.css.map',
sourceMapFilename: 'dist/css/phone.css.map'
},
- src: 'less/phone.less',
+ src: 'dist/less/phone.less',
dest: 'dist/css/phone.css'
},
tiny: {
sourceMapURL: 'tiny.css.map',
sourceMapFilename: 'dist/css/tiny.css.map'
},
- src: 'less/tiny.less',
+ src: 'dist/less/tiny.less',
dest: 'dist/css/tiny.css'
},
seitenaufteilung: {
sourceMapURL: 'seitenaufteilung.css.map',
sourceMapFilename: 'dist/css/seitenaufteilung.css.map'
},
- src: 'less/seitenaufteilung.less',
+ src: 'dist/less/seitenaufteilung.less',
dest: 'dist/css/seitenaufteilung.css'
},
seitenkopf: {
sourceMapURL: 'seitenkopf.css.map',
sourceMapFilename: 'dist/css/seitenkopf.css.map'
},
- src: 'less/seitenkopf.less',
+ src: 'dist/less/seitenkopf.less',
dest: 'dist/css/seitenkopf.css'
}
},
watch: {
css: {
- files: [ 'less/**/*.less' ],
+ files: [ 'dist/less/**/*.less' ],
tasks: 'css'
}
}
<title>About</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="css/base.min.css"/>
- <style type="text/css">
- @import 'css/screen.min.css' screen;
- @import 'css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="less/print.less" media="print"/>
+ <script src="js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<title>Allgemeine Geschäftsbedingungen (AGB)</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="css/base.min.css"/>
- <style type="text/css">
- @import 'css/screen.min.css' screen;
- @import 'css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="less/print.less" media="print"/>
+ <script src="js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<title>Blog</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="css/base.min.css"/>
- <style type="text/css">
- @import 'css/screen.min.css' screen;
- @import 'css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="less/print.less" media="print"/>
+ <script src="js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<title>juplo - blog - Combining jetty-maven-plugin and wro4j-maven-plugin for Dynamic Reloading of LESS-Resources</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="../css/base.min.css"/>
- <style type="text/css">
- @import '../css/screen.min.css' screen;
- @import '../css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../less/print.less" media="print"/>
+ <script src="../js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<p>You cannot do both, use the <a href="http://www.lesscss.org/#usage" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.lesscss.org']);" title="More about the client-side usage of LESS">Client-side mode</a> of LESS to ease development and use the <a href="https://github.com/marceloverdijk/lesscss-maven-plugin" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://github.com']);" title="Homepage of the official LESS CSS maven plugin">lesscss-maven-plugin</a> to automatically compile the LESS-sources into CSS for production. That does not work, because your stylesheets must be linked in different ways if you are switching between the client-side mode – which is best for development – and the pre-compiled mode – which is best for production. For the client-side mode you need something like:</p>
<pre class="prettyprint linenums">
<code class="html">
- <link rel="stylesheet" type="text/css" href="styles.less" />
+ <link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
</code>
</pre>
<p>While, for the pre-compiled mode, you want to link to your stylesheets as usual, with:</p>
<pre class="prettyprint linenums">
<code class="html">
- <link rel="stylesheet" type="text/css" href="styles.css" />
+ <link rel="stylesheet/less" type="text/css" href="styles.css" />
</code>
</pre>
<p>While looking for a solution to this dilemma, I stumbled accross <a href="https://code.google.com/p/wro4j/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://code.google.com']);" title="See the documentation of ths wounderfull tool">wro4j</a>. Originally intended, to speed up page-delivery by combining and minimizing multiple resources into one through the use of a servlet-filter, this tool also comes with a maven-plugin, that let you do the same offline, while compiling your webapp.</p>
<title>juplo - blog - hibernate4-maven-plugin</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="../css/base.min.css"/>
- <style type="text/css">
- @import '../css/screen.min.css' screen;
- @import '../css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../less/print.less" media="print"/>
+ <script src="../js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<title>Contact</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="css/base.min.css"/>
- <style type="text/css">
- @import 'css/screen.min.css' screen;
- @import 'css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="less/print.less" media="print"/>
+ <script src="js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<title>Datenschutz</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="css/base.min.css"/>
- <style type="text/css">
- @import 'css/screen.min.css' screen;
- @import 'css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="less/print.less" media="print"/>
+ <script src="js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
--- /dev/null
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Frameset to Bypass Same-Origin-Policy</title>
+ </head>
+ <frameset>
+ <frame src="templates/layout.html">
+ </frameset>
+</html>
<title>Expertise</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="css/base.min.css"/>
- <style type="text/css">
- @import 'css/screen.min.css' screen;
- @import 'css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="less/print.less" media="print"/>
+ <script src="js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<title>Google Analytics</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="css/base.min.css"/>
- <style type="text/css">
- @import 'css/screen.min.css' screen;
- @import 'css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="less/print.less" media="print"/>
+ <script src="js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<title>Haftung für Inhalte</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="css/base.min.css"/>
- <style type="text/css">
- @import 'css/screen.min.css' screen;
- @import 'css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="less/print.less" media="print"/>
+ <script src="js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<title>Haftung für Links</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="css/base.min.css"/>
- <style type="text/css">
- @import 'css/screen.min.css' screen;
- @import 'css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="less/print.less" media="print"/>
+ <script src="js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<title>Impressum</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="css/base.min.css"/>
- <style type="text/css">
- @import 'css/screen.min.css' screen;
- @import 'css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="less/print.less" media="print"/>
+ <script src="js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<title>Home</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="css/base.min.css"/>
- <style type="text/css">
- @import 'css/screen.min.css' screen;
- @import 'css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="less/print.less" media="print"/>
+ <script src="js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
--- /dev/null
+@import 'variables.less';
+@import 'base/browserreset.less';
+@import 'base/fonts.less';
+@import 'base/util.less';
+@import 'base/typo.less';
+@import 'base/head.less';
+@import 'base/navigation.less';
+@import 'base/content.less';
+@import 'base/prettify.less';
+@import 'base/marginal.less';
+@import 'base/footer.less';
+@import 'base/formulare.less';
+@import 'base/404.less';
--- /dev/null
+.withbackground .content > .marginal > #nav
+{
+ z-index: 2;
+}
+.withbackground .content > .main
+{
+ display: block;
+}
+.withbackground .content > .main > *
+{
+ position: relative;
+ z-index: 3;
+}
+#footer
+{
+ z-index: 3;
+}
+.withbackground .content > .main > .background
+{
+ .bpreplay;
+ display: block;
+ position: absolute;
+ z-index: 1;
+ line-height: .8em;
+ height: .8em;
+ overflow: hidden;
+}
+.withbackground .content > .main > .heller
+{
+ color: @heller;
+ z-index: 2;
+}
+.withbackground .content > .main > .sehrhell
+{
+ color: @sehrhell;
+ text-shadow: .02em .01em 0 @hintergrund;
+}
+#bs1
+{
+ font-size: 2000%;
+ top: 55%;
+ left: 11%;
+}
+#bs2
+{
+ font-size: 2600%;
+ top: 30%;
+ right: -1%;
+}
+#bs3
+{
+ font-size: 5000%;
+ top: -5%;
+ right: -5%;
+}
+#bs4
+{
+ font-size: 600%;
+ top: 0;
+ left: 50%;
+}
+#bs5
+{
+ font-size: 3600%;
+ top: 13%;
+ left: 35%;
+}
+#bs6
+{
+ font-size: 2000%;
+ top: 0%;
+ left: 23%;
+}
+#bs7
+{
+ font-size: 600%;
+ top: 72%;
+ left: 5%;
+}
+#bs8
+{
+ font-size: 2200%;
+ top: 10%;
+ right: 27%;
+}
+#bs9
+{
+ font-size: 1200%;
+ bottom: 26%;
+ left: 36%;
+}
--- /dev/null
+/** Browser-Reset *************************************************************/
+
+
+/** v1.0 | 20080212, s. http://meyerweb.com/eric/tools/css/reset/ */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ outline: 0;
+ font-size: 100%;
+ vertical-align: baseline;
+ background: transparent;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+
+/* remember to define focus styles! */
+:focus {
+ outline: 0;
+}
+
+/* remember to highlight inserts somehow! */
+ins {
+ text-decoration: none;
+}
+del {
+ text-decoration: line-through;
+}
+
+/* tables still need 'cellspacing="0"' in the markup */
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+
+/** Eigene Reset-Erweiterungen */
+
+a {
+ color: inherit;
+ text-decoration: none;
+}
+hr {
+ padding: 0;
+ margin: 0;
+}
--- /dev/null
+@font-face
+{
+ font-family: 'BPreplay';
+ src: url('../fonts/BPreplay-webfont.eot');
+ src: url('../fonts/BPreplay-webfont.eot?#iefix') format('embedded-opentype'),
+ url('../fonts/BPreplay-webfont.woff') format('woff'),
+ url('../fonts/BPreplay-webfont.ttf') format('truetype'),
+ url('../fonts/BPreplay-webfont.svg#BPreplayRegular') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face
+{
+ font-family: 'BPreplay';
+ src: url('../fonts/BPreplayItalics-webfont.eot');
+ src: url('../fonts/BPreplayItalics-webfont.eot?#iefix') format('embedded-opentype'),
+ url('../fonts/BPreplayItalics-webfont.woff') format('woff'),
+ url('../fonts/BPreplayItalics-webfont.ttf') format('truetype'),
+ url('../fonts/BPreplayItalics-webfont.svg#BPreplayItalic') format('svg');
+ font-weight: normal;
+ font-style: italic;
+}
+
+@font-face
+{
+ font-family: 'BPreplay';
+ src: url('../fonts/BPreplayBold-webfont.eot');
+ src: url('../fonts/BPreplayBold-webfont.eot?#iefix') format('embedded-opentype'),
+ url('../fonts/BPreplayBold-webfont.woff') format('woff'),
+ url('../fonts/BPreplayBold-webfont.ttf') format('truetype'),
+ url('../fonts/BPreplayBold-webfont.svg#BPreplayBold') format('svg');
+ font-weight: bold;
+ font-style: normal;
+}
+
+@font-face
+{
+ font-family: 'BPreplay';
+ src: url('../fonts/BPreplayBoldItalics-webfont.eot');
+ src: url('../fonts/BPreplayBoldItalics-webfont.eot?#iefix') format('embedded-opentype'),
+ url('../fonts/BPreplayBoldItalics-webfont.woff') format('woff'),
+ url('../fonts/BPreplayBoldItalics-webfont.ttf') format('truetype'),
+ url('../fonts/BPreplayBoldItalics-webfont.svg#BPreplayBoldItalic') format('svg');
+ font-weight: bold;
+ font-style: italic;
+}
+
+@font-face
+{
+ font-family: 'DroidSerif';
+ src: url('../fonts/DroidSerif-Regular-webfont.eot');
+ src: url('../fonts/DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
+ url('../fonts/DroidSerif-Regular-webfont.woff') format('woff'),
+ url('../fonts/DroidSerif-Regular-webfont.ttf') format('truetype'),
+ url('../fonts/DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
+ font-weight: normal;
+ font-style: normal;
+
+}
+
+@font-face
+{
+ font-family: 'DroidSerif';
+ src: url('../fonts/DroidSerif-Italic-webfont.eot');
+ src: url('../fonts/DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'),
+ url('../fonts/DroidSerif-Italic-webfont.woff') format('woff'),
+ url('../fonts/DroidSerif-Italic-webfont.ttf') format('truetype'),
+ url('../fonts/DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg');
+ font-weight: normal;
+ font-style: italic;
+
+}
+
+@font-face
+{
+ font-family: 'DroidSerif';
+ src: url('../fonts/DroidSerif-Bold-webfont.eot');
+ src: url('../fonts/DroidSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'),
+ url('../fonts/DroidSerif-Bold-webfont.woff') format('woff'),
+ url('../fonts/DroidSerif-Bold-webfont.ttf') format('truetype'),
+ url('../fonts/DroidSerif-Bold-webfont.svg#DroidSerifBold') format('svg');
+ font-weight: bold;
+ font-style: normal;
+
+}
+
+@font-face
+{
+ font-family: 'DroidSerif';
+ src: url('../fonts/DroidSerif-BoldItalic-webfont.eot');
+ src: url('../fonts/DroidSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
+ url('../fonts/DroidSerif-BoldItalic-webfont.woff') format('woff'),
+ url('../fonts/DroidSerif-BoldItalic-webfont.ttf') format('truetype'),
+ url('../fonts/DroidSerif-BoldItalic-webfont.svg#DroidSerifBoldItalic') format('svg');
+ font-weight: bold;
+ font-style: italic;
+
+}
+
+@font-face
+{
+ font-family: 'symbols';
+ src: url('../fonts/symbols.eot');
+ src: url('../fonts/symbols.eot?#iefix') format('embedded-opentype'),
+ url('../fonts/symbols.woff') format('woff'),
+ url('../fonts/symbols.ttf') format('truetype'),
+ url('../fonts/symbols.svg#symbols') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
--- /dev/null
+#footerlinks
+{
+ .bpreplay;
+ position: relative;
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+}
+#footerlinks li.f
+{
+ font-size: 137.5%; /** 22 px */
+ float: left;
+ margin: .5em 1em 0 0;
+}
+#footerlinks #copyright
+{
+ color: @schrift;
+ margin: 0;
+ width: 100%;
+}
+#footerlinks a.f
+{
+ color: @normal;
+ border-color: @normal;
+}
+#footerlinks a.f:hover
+{
+ color: @dunkler;
+ border-color: @dunkler;
+ border-style: solid;
+}
--- /dev/null
+/** Formulare *****************************************************************/
+
+.form {
+ position: relative;
+ width: 100%;
+ overflow: hidden;
+}
+
+/** Trennlinie */
+.form hr.f {
+ border-style: none;
+ border-top-style: dashed;
+ border-color: @normal;
+ border-width: .0625em;
+ margin: .625em 0; /** 10px 0 */
+ background-color: transparent;
+}
+
+/** Text im Formular */
+.form p.f {
+ color: @schrifthell;
+}
+.form p.f,
+.form .radiobutton > legend.f,
+.form .checkbox > legend.f,
+.form .textarea > label.f {
+ display: block;
+ font-size: 87.5%; /** 14px */
+ line-height: 1.5em; /** 21px */
+ color: @schrifthell;
+ margin: .428571429em 0; /** 6px 0 */
+}
+
+/** Aufzählungen im Formular */
+.form ul.f,
+.form ol.f {
+ color: @schrifthell;
+ margin: 1em 0;
+}
+
+/** Info-Text */
+.form p.f.info,
+.form .textarea > label.f.info,
+.form .radiobutton > legend.f.info,
+.form .checkbox > legend.f.info,
+.form .textarea > label.f.info {
+ display: block;
+ font-size: 81.25%; /** 13px */
+ line-height: 1.230769231em; /** 16px */
+ font-style: italic;
+ color: @schrifthell;
+ padding: 0 0 0 1.538461538em; /** 0 0 0 20px */
+ background-image: url(../img/em.png);
+ background-repeat: no-repeat;
+ background-position: 0 1px;
+ margin-top: .461538462em; /** 6px */
+ margin-bottom: .461538462em; /** 6px */
+}
+.form .info > a {
+ display: inline-block;
+}
+
+/** Überschriften */
+.form h1.f {
+ font-size: 137.5%; /** 22px */
+ letter-spacing: .0454545em; /** 1px */
+ line-height: 1em;
+ padding: 0 0 .454545455em; /** 0 0 10px */
+ border-bottom: .090909091em solid @normal; /** 2px */
+ margin: .272727273em 0 .909090909em 0; /** 6px 0 20px 0 */
+}
+.form h2.f {
+ font-size: 100%; /** 16px */
+ letter-spacing: .0625em; /** 1px */
+ text-transform: uppercase;
+ line-height: 1.625em; /** 26px */
+ padding: 0 0 0 .125em; /** 0 0 0 2px */
+ border-bottom: .0625em solid @normal; /** 1px */
+ margin: 1.875em 0 .25em 0; /** 30px 0 4px 0 */
+}
+.form h3.f {
+/** border-bottom: 1px dashed @normal; */
+}
+.form p.required {
+ text-indent: -999em;
+ margin: -1.785714286em 0 0 0; /** -25px 0 0 0 zu 14px */
+}
+.form p.required > strong.r {
+ display: block;
+ float: right;
+ position: relative;
+ right: -994em;
+ margin-right: 1em; /** 14px */
+ font-weight: normal;
+}
+.form p.required > strong.symbol {
+ font-size: 128.5714286%; /** 18px zu 14px */
+ margin-right: .555555em; /** 10px */
+ padding-top: .1666666em; /** 3px */
+ right: -773.11em; /** Anpassung wegen abweichender Schriftgröße nötig: 994em * 14px / 18px */
+ font-weight: 700;
+ color: @dunkel;
+}
+
+/** Fehler-Hinweise */
+.f.error {
+ color: @fehler;
+}
+span.f.error {
+ display: block;
+ position: relative;
+ font-size: 87.5%; /** 14px */
+ line-height: 1.214285714em; /** 17px */
+ padding: .571428571em; /** 8px */
+ color: @hintergrund;
+ background-color: @fehler;
+ margin: .857142857em 0 0 0; /** 12px 0 0 0 */
+}
+span.f.error > span.e {
+ display: block;
+ width: .857142857em; /** 12px */
+ height: .428571429em; /** 6px */
+ background-image: url(../img/arrow-red.gif);
+ text-indent: -9999em;
+ position: absolute;
+ top: -.428571429em; /** -6px */
+ left: 2.142857143em; /** 30px */
+}
+span.f.error > strong.e {
+ text-transform: uppercase;
+}
+
+/** Input, Select und Dateiupload mit Label */
+.form .text,
+.form .select,
+.form .file {
+ position: relative;
+ margin-bottom: .75em; /** 12px */
+}
+.form .text,
+.form .file {
+ margin-right: 10em; /** 160px */
+}
+.form .select {
+ margin-right: 9em; /** 144px */
+}
+h2.f + div.text,
+h2.f + div.select,
+h2.f + div.file,
+h2.f + div.captcha,
+p.f + div.text,
+p.f + div.select,
+p.f + div.file {
+ margin-top: 20px;
+}
+.form .text > label.f,
+.form .textarea > label.f,
+.form .select > label.f,
+.form .file > label.f,
+.form .captcha > span.f {
+ display: block;
+ position: relative;
+ font-size: 87.5%; /** 14px */
+ line-height: 1.214285714em; /** 17px */
+ padding: .571428571em 0 .571428571em 0; /** 8px 0 8px 0 */
+ color: @schrift;
+}
+.form .file > label.f {
+ padding-top: .285714286em; /** 4px */
+ padding-bottom: .285714286em; /** 4px */
+}
+.form .captcha > span.f {
+ position: absolute;
+}
+.form .required > label.f {
+ padding-left: 1em; /** 14px */
+}
+.form .required > label.f > .required {
+ display: block;
+ position: absolute;
+ font-size: 128.5714286%; /** 18px zu 14px */
+ font-weight: 700;
+ color: @dunkel;
+ top: .611111111em; /** 11px */
+ left: 0;
+}
+.form .file > label.f > .required {
+ top: .5em; /** 7px */
+}
+.form .text > input.f,
+.form .select > select.f,
+.form .file > input.f {
+ display: block;
+ width: 100%;
+ position: absolute;
+ top: 0;
+ font-size: 81.25%; /** 13px */
+ border: .076923077em solid @normal; /** 1px */
+ color: @schrift;
+ background-color: @sehrhell;
+}
+.form .text > input.f {
+ line-height: 1.307692308em; /** 17px */
+ padding: .538461538em; /** 7px */
+ right: -12.307692308em; /** -160px */
+}
+.form .select > select.f {
+ line-height: 1.230769231em; /** 16px */
+ padding: .461538462em .538461538em; /** 6px 7px */
+ right: -11.076923077em; /** -144px */
+}
+.form .file > input.f {
+ margin-left: 11.076923077em; /** 144px */
+}
+.form .captcha > img.f {
+ float: right;
+ margin-top: -.9375em; /** 15px */
+ width: 7.5em; /** 120px */
+ height: 3.75em; /** 60px */
+}
+.form .text > input.f:focus,
+.form .select > select.f:focus,
+.form .text > input.f:active,
+.form .select > select.f:active {
+ background-color: transparent;
+}
+.form .text > p.f.info,
+.form .select > p.f.info,
+.form .file > p.f.info {
+ position: relative;
+ left: 11.076923077em; /** 144px */
+}
+.form .text > span.f.error,
+.form .select > span.f.error,
+.form .file > span.f.error {
+ width: 100%;
+ margin: .857142857em 0 0 10.285714286em; /** 12px 0 0 144px zu 14(!)px*/
+}
+
+/** Textfelder */
+.form .textarea {
+ position: relative;
+ margin: 0 .6875em .75em .6875em; /** 0px 11px 12px 11px */
+}
+.form .textarea > label.f {
+ margin: .615384615em -.846153846em; /** 8px -11px */
+}
+.form .textarea > textarea.f,
+.form .textarea > div.textarea {
+ width: 100%;
+ border: .076923077em solid @normal; /** 1px */
+ color: @schrift;
+ background-color: @sehrhell;
+ padding: .769230769em; /** 10px */
+ position: relative;
+ left: -.846153846em; /** -11px */
+}
+.form .textarea > div.textarea {
+ margin: 0;
+ font-size: 87.5%; /** 14px */
+}
+.form .textarea > textarea.f:focus,
+.form .textarea > textarea.f:active {
+ background-color: transparent;
+}
+.form .textarea > span.f.error {
+ margin: .714285714em -.785714286em 0 -.785714286em; /** 10px -11px 0 -11px */
+}
+
+/** Radiobuttons und Checkboxen */
+.form .radiobutton > legend.f.info,
+.form .checkbox > legend.f.info {
+ padding: .230769231em 0 0 1.538461538em; /** 3px 0 0 20px zu 13px*/
+ background-position: 0 .230769231em; /** 0 3px */
+}
+.form .col2,
+.form .radiobutton > .col2,
+.form .checkbox > .col2 {
+ width: 48%;
+ float: left;
+}
+.form .col2.left,
+.form .radiobutton > .col2.left,
+.form .checkbox > .col2.left {
+ margin-right: 2%;
+}
+.form .col2.right,
+.form .radiobutton > .col2.right,
+.form .checkbox > .col2.right {
+ float: right;
+ margin-left: 2%;
+}
+.form div.checkbox,
+.form .radiobutton > .f,
+.form .checkbox > .f,
+.form .radiobutton > .col2 > .f,
+.form .checkbox > .col2 > .f {
+ position: relative;
+}
+.form div.checkbox > label.f,
+.form .radiobutton > .f > label.f,
+.form .checkbox > .f > label.f,
+.form .radiobutton > .col2 > .f > label.f,
+.form .checkbox > .col2 > .f > label.f {
+ display: block;
+ font-size: 87.5%; /** 14px */
+ line-height: 1.285714286em; /** 18px */
+ color: @schrift;
+ margin: .571428571em 0 .571428571em 1.428571429em; /** 8px 0 8px 20px */
+}
+.form div.checkbox > input.f,
+.form .radiobutton > .f > input.f,
+.form .checkbox > .f > input.f,
+.form .radiobutton > .col2 > .f > input.f,
+.form .checkbox > .col2 > .f > input.f {
+ position: absolute;
+ margin: .285714286em 0; /** 4px 0 */
+}
+.form div.checkbox > input.error,
+.form .radiobutton > .f > input.error,
+.form .checkbox > .f > input.error {
+ /** Wäre möglich -- konnte aber keine CSS-Eigenschaft finden, die sich rot färben ließ: der Firefox hat alles ignoriert! */
+}
+.form div.checkbox:hover > label.f,
+.form .radiobutton > .f:hover > label.f,
+.form .checkbox > .f:hover > label.f,
+.form div.checkbox:focus > label.f,
+.form .radiobutton > .f:focus > label.f,
+.form .checkbox > .f:focus > label.f,
+.form div.checkbox:active > label.f,
+.form .radiobutton > .f:active > label.f,
+.form .checkbox > .f:active > label.f,
+.form .radiobutton > .col2 > .f:hover > label.f,
+.form .checkbox > .col2 > .f:hover > label.f,
+.form .radiobutton > .col2 > .f:focus > label.f,
+.form .checkbox > .col2 > .f:focus > label.f,
+.form .radiobutton > .col2 > .f:active > label.f,
+.form .checkbox > .col2 > .f:active > label.f {
+ color: @schrift;
+}
+
+/** Sondereinstellungen für Fehler-Hervorhebungen */
+.form .text > input.error,
+.form .textarea > textarea.error,
+.form .select > select.error,
+.form .file > input.error {
+ color: @schrift;
+ font-weight: 700;
+ border-color: @fehler;
+ background-color: @fehlerhell;
+}
+
+
+/** Absende-Buttons */
+ul.buttons,
+ol.buttons {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ text-align: right;
+}
+ul.buttons > li.b,
+ol.buttons > li.b {
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+}
+.form .submit {
+ text-align: right;
+ margin-bottom: .75em; /** 12px */
+}
+.form .submit > input.f,
+.form .submit > a.f,
+a.ln.button {
+ display: inline-block;
+ font-family: 'PT Sans', Helvetica, Arial, sans-serif;
+ font-size: 81.25%; /** 13px */
+ letter-spacing: .076923077em; /** 1px */
+ line-height: 25px;
+ padding:0 6px;
+ height: 1.923076923em; /** 25px */
+ color: @hintergrund;
+ font-weight: 700;
+ background-color: @normal;
+ border-style: none;
+}
+.form .submit > input.f,
+.form .submit > a.f,
+ul.buttons > li.b,
+ol.buttons > li.b {
+ margin: 0 0 0 .615384615em; /** 0 0 0 8px */
+}
+a.ln.button:before {
+ content: none;
+}
+.form .submit > input.left,
+.form .submit > a.left,
+a.ln.button.left {
+ float: left;
+ margin: 0 .923076923em 0 0; /** 0 12px 0 0 */
+}
+.form .submit > input.right,
+.form .submit > a.right,
+a.ln.button.right {
+ float: right;
+ margin: 0 0 0 .923076923em; /** 0 0 0 12px */
+}
+.form .submit > input.f:hover,
+.form .submit > a.f:hover,
+a.ln.button:hover,
+.form .submit > input.f:focus,
+.form .submit > a.f:focus,
+a.ln.button:focus,
+.form .submit > a.f:active,
+.form .submit > input.f:active,
+a.ln.button:active {
+ background-color: @dunkel;
+ text-decoration: none;
+}
--- /dev/null
+#header
+{
+ .bpreplay;
+}
+#logo
+{
+ display: inline;
+ font-size: 400%;
+ line-height: 1.2em;
+ margin: 0;
+ padding: 0 0 0 .230769231em; /* 30px */
+ color: @normal;
+ border: none;
+ position: relative;
+ left: -.3em;
+}
+#logo a.l:hover
+{
+ color: @dunkler;
+ border-style: none;
+}
+#slogan
+{
+ display: block;
+ color: @normal;
+}
--- /dev/null
+.marginal h1
+{
+ font-size: 125%; /** 20 px */
+ line-height: 1em; /** 20px */
+ margin: 1.5em 0 .5em 0; /** 30px 0 10px 0 */
+ padding: 0;
+}
--- /dev/null
+h2.nav
+{
+}
+#menu,
+#submenu
+{
+ .bpreplay;
+ color: @normal;
+ margin: .5em 0 1.5em 0;
+ padding: 0.25em 0.25em 0.25em 1.5em;
+ border: 1px solid @normal;
+}
+#menu li.m,
+#submenu li.s
+{
+ padding: .2em;
+}
+#menu li.m a.m,
+#submenu li.s a.s
+{
+ color: @normal;
+}
+#menu li.m a.m:hover,
+#submenu li.s a.s:hover
+{
+ color: @nochdunkler;
+}
+#menu li.m strong.m,
+#menu li.m a.m.selected,
+#menu li.m a.m:focus,
+#menu li.m a.m:active,
+#submenu li.s strong.s,
+#submenu li.s a.s.selected,
+#submenu li.s a.s:focus,
+#submenu li.s a.s:active
+{
+ color: @dunkler;
+}
+
+#breadcrumb
+{
+ .bpreplay;
+ color: @normal;
+}
+#breadcrumb strong.b.title
+{
+ float: left;
+ margin: 0 0.5em 0 0;
+}
+#breadcrumb ol.b
+{
+ display: inline;
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+}
+#breadcrumb ol.b li.b
+{
+ float: left;
+ margin: 0 0 0.5em 0.5em;
+ padding: 0;
+}
+#breadcrumb ol.b li.b:before
+{
+ content: '> ';
+}
+#breadcrumb ol.b li.b:first-child:before
+{
+ content: '';
+}
+#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;
+}
+#breadcrumb a.hide
+{
+ position: static;
+}
+#breadcrumb a.hide:before
+{
+ content: "";
+ display: table;
+ clear: both;
+}
+#breadcrumb hr.b
+{
+ clear: both;
+}
+
--- /dev/null
+/* Pretty printing styles. Used with prettify.js. */
+/* Vim sunburst theme by David Leibovic */
+
+pre .str, code .str { color: #65B042; } /* string - green */
+pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
+pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
+pre .typ, code .typ { color: #89bdff; } /* type - light blue */
+pre .lit, code .lit { color: #3387CC; } /* literal - blue */
+pre .pun, code .pun { color: #fff; } /* punctuation - white */
+pre .pln, code .pln { color: #fff; } /* plaintext - white */
+pre .tag, code .tag { color: #89bdff; } /* html/xml tag - light blue */
+pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name - khaki */
+pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */
+pre .dec, code .dec { color: #3387CC; } /* decimal - blue */
+
+pre.prettyprint, code.prettyprint {
+ background-color: #000;
+ overflow-x: scroll;
+}
+
+pre.prettyprint {
+ width: 95%;
+ margin: 1em auto;
+ padding: 1em;
+ white-space: pre;
+}
+
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+ margin-top: 0;
+ margin-bottom: 0;
+ color: #AEAEAE;
+} /* IE indents via margin-left */
+
+li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9
+{
+ list-style-type: decimal;
+}
--- /dev/null
+/** Typografische Grundeinstellungen ******************************************/
+
+body
+{
+ .droid;
+ letter-spacing: 0;
+ line-height: 1.5em;
+ padding: .5em 1em 1em 1.5em;
+ background-color: @hintergrund;
+}
+h1, h2, h3, h4, h5, h6
+{
+ .bpreplay;
+ color: @schrifthell;
+ line-height: 1.25em;
+ margin: 1.125em 0 .25em 0; /** Margin Top für h1 auf Marginalspalte abgestimmt! */
+}
+h1
+{
+ font-size: 137.5%; /** 22 px */
+ color: @normal;
+ padding: 0 0 .25em 0; /** 0 0 5px 0 */
+}
+h2
+{
+ font-size: 125%; /** 20 px */
+}
+h3
+{
+ font-size: 112.5%; /** 18px */
+}
+h4
+{
+ /** font-size: 16px */
+}
+h1 a, h2 a, h3 a, h4 a
+{
+ color: @normal;
+ border-style: none;
+}
+h1 a:hover,
+h2 a:hover,
+h3 a:hover,
+h4 a:hover
+{
+ color: @dunkler;
+ border-bottom: 1px solid @dunkler;
+}
+h1 a:focus,
+h2 a:focus,
+h3 a:focus,
+h4 a:focus,
+h1 a:active,
+h2 a:active,
+h3 a:active,
+h4 a:active
+{
+ color: @dunkel;
+ border-bottom: 1px solid @dunkel;
+}
+p
+{
+ margin: .5em 0 .5em 0;
+}
+ul, ol
+{
+ margin: .25em 0 .25em 0; /** 4px 0 4px 0 */
+ padding: 0 0 0 1em; /** 0 0 0 16px */
+}
+ul
+{
+ list-style-type: square;
+}
+ol
+{
+ list-style-type: decimal;
+ padding-left: 1.1875em; /** 19px */
+}
+li
+{
+ padding-bottom: .25em; /** 2px */
+}
+table, th, td
+{
+ padding: .1em .2em;
+}
+th, td
+{
+ font-size: 87.5%; /** 14px */
+ line-height: 1.5em; /** 20px */
+ border: .071428571em solid #000; /** 1px */
+ padding: .214285714em .5em; /** 3px 7px */
+}
+pre
+{
+ line-height: 1.2em;
+}
+code
+{
+ font-size: 120%; /** Otherwise, the font-size will be 75%, though not specified so anywhere!! */
+ line-height: 1.2em;
+}
+hr
+{
+ border: none;
+ border-top: 2px solid @normal;
+ background-color: @normal;
+ height: 1px;
+ margin: 1em 0 1em 0;
+}
+a
+{
+ color: @dunkler;
+ border-bottom: 1px dashed @dunkler;
+}
+a:hover
+{
+ color: @nochdunkler;
+ border-bottom: 1px solid @nochdunkler;
+}
+a:focus,
+a:active
+{
+ color: @dunkler;
+ border-bottom: 1px solid @dunkler;
+}
+a:visited
+{
+ border-bottom: 1px dotted @nochdunkler;
+}
+
+h2 a,
+h3 a,
+h4 a
+{
+ color: @schrifthell;
+}
+h2 a:focus,
+h2 a:active,
+h3 a:focus,
+h3 a:active,
+h4 a:focus,
+h4 a:active
+{
+ color: @normal;
+ border-bottom: 1px solid @normal;
+}
+
+
+.logo
+{
+ .bpreplay;
+ color: @normal;
+}
--- /dev/null
+/** Allgemein nützliche Marker-Klassen */
+
+
+/** Micro Clearfix-Hack nach http://nicolasgallagher.com/micro-clearfix-hack/ */
+
+.cf:before,
+.cf:after {
+ content: "";
+ display: table;
+}
+.cf:after {
+ clear:both;
+}
+
+/** Hide helpful content in a way, that it is still accessible to screen-readers */
+.hide{
+ position: absolute;
+ left: -99999999em;
+}
+
+
+/** Symbol-Font für Vektor-Icons */
+
+.symbols
+{
+ font-family: 'symbols';
+}
+
+a.img
+{
+ border: none;
+}
--- /dev/null
+body {} /** cssmin fails with an empty file! */
--- /dev/null
+@import 'variables.less';
+@import 'screen/head.less';
+@import 'screen/menu.less';
+@import 'screen/footer-sticky.less';
+@import 'screen/wip.less';
+@import 'screen/packs.less';
+
+@import 'phone/typo.less';
+@import 'phone/layout.less';
+@import 'phone/head.less';
+@import 'phone/menu.less';
+@import 'phone/footer.less';
+@import 'phone/packs.less';
+@import 'phone/404.less';
--- /dev/null
+.withbackground .content
+{
+ position: relative;
+}
+.withbackground .content > .main
+{
+ z-index: 1;
+}
+.withbackground .content > .marginal
+{
+ position: relative;
+ z-index: 3;
+ border-top: .142857143em solid @hintergrund; /** 2px */
+}
+#bs1
+{
+ top: -3%;
+}
+#bs2
+{
+ font-size: 2000%;
+ top: 0%;
+ right: 3%;
+}
+#bs4
+{
+ top: 5%;
+ left: 57%;
+ @media (max-width: 410px)
+ {
+ display: none;
+ }
+}
+#bs6
+{
+ font-size: 1700%;
+ bottom: -10%;
+ left: 45%;
+}
+#bs7
+{
+ top: 20%;
+ left: 2%;
+ @media (max-width: 410px)
+ {
+ top: 34%;
+ left: 30%;
+ }
+}
+#bs5,
+#bs8
+{
+ display: none;
+}
+#bs9
+{
+ top: 20%;
+ @media (max-width: 410px)
+ {
+ display: none;
+ }
+}
--- /dev/null
+#footer > #footerlinks
+{
+ position: static;
+ border-style: none;
+}
+#footer > #footerlinks > li.about
+{
+ display: none;
+}
+#footer > #footerlinks > li.f
+{
+ color: @hintergrund;
+ line-height: 1em;
+ margin: 0 1em 0 0;
+ padding: 0 0 .5em 0;
+}
+#footer > #footerlinks > li.f > a.f
+{
+ color: @hintergrund;
+ border-color: @hintergrund;
+}
+#footer > #footerlinks > li#copyright
+{
+ position: static;
+ float: right;
+ width: auto;
+ font-size: 137.5%;
+ margin: 0;
+ @media (max-width: 229px)
+ {
+ color: @schrift;
+ flow: none;
+ width: 100%;
+ }
+}
--- /dev/null
+@media (max-width: 410px)
+{
+ #slogan
+ {
+ color: @normal;
+ }
+}
--- /dev/null
+/** Seite gesamt (Abmessungen, Aussenabstände etc.) */
+
+body
+{
+ font-size: 87.5%; /** 14px */
+ padding: 0;
+}
+#page
+{
+ position: relative;
+ overflow: hidden;
+}
+
+
+/** Seitenaufteilung mit/ohne Menü */
+
+.content > .main
+{
+ margin: 0 1em 0 2.5em;
+}
+.menu .content > .main
+{
+ border-top-style: none;
+}
+
+
+
+/** Seitenkopf positionieren */
+
+#header
+{
+ margin: .5em 1em 1em 1.25em;
+}
+#header > hr.h
+{
+ display: none;
+}
+
+
+/** Bereichsauswahl positionieren und stylen */
+
+#nav > hr.n
+{
+ display: none;
+}
+#menu
+{
+ border-style: none;
+ font-size: 125%;
+ line-height: 1.5em;
+}
+#menu
+{
+ font-size: 150%;
+ border-bottom: .125em solid @hintergrund;
+ margin-top: 0;
+ padding: .25em .25em 1em 1.5em;
+}
+#menu > li.m
+{
+ float: left;
+ @media (max-width: 359px)
+ {
+ float: none;
+ }
+ list-style-type: none;
+ padding: .25em 1em 0 0;
+}
+#menu > li.m > a.m
+{
+ color: @dunkel;
+}
+#menu > li.m > strong.m
+{
+ color: @hintergrund;
+ border-bottom: .0625em solid @hintergrund;
+}
+#menu > li.m > a.m:hover,
+#menu > li.m > a.m:focus,
+#menu > li.m > a.m:active
+{
+ color: @dunkler;
+ border-bottom: .0625em solid @dunkler;
+}
+#menu > li.m > a.m.selected
+{
+ color: @hintergrund;
+ border-bottom: .0625em dashed @hintergrund;
+}
+#menu > li.m > a.m.selected:hover,
+#menu > li.m > a.m.selected:focus,
+#menu > li.m > a.m.selected:active
+{
+ border-style: solid;
+}
+
+
+/** Navigations-Sprunglink reaktivieren und stylen */
+
+#breadcrumb
+{
+ position: absolute;
+ top: .8em;
+ right: 1.5em;
+}
+#breadcrumb > strong.b,
+#breadcrumb > ol.b,
+#breadcrumb > hr.b
+{
+ display: none;
+}
+#breadcrumb > a.hide
+{
+ display: block;
+ overflow: hidden;
+ width: 3.5em;
+ height: 3em;
+ line-height: 3em;
+ color: @normal;
+ border-style: none;
+}
+#breadcrumb > a.hide:before
+{
+ content: "";
+ font-family: 'symbols';
+ font-size: 378%; /** Vielfaches von 14px */
+ padding: 0 0 1em 0;
+ font-weight: normal;
+}
+#breadcrumb > a.hide:hover,
+#breadcrumb > a.hide:focus,
+#breadcrumb > a.hide:active
+{
+ color: @dunkler;
+}
+
+
+/** Inhalts-Sprunglink reaktivieren und stylen */
+
+#nav:target
+{
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ padding: .6em 1em 999em 2.5em;
+ margin-bottom: -993em;
+ z-index: 5;
+ background-color: @heller;
+ #menu
+ {
+ padding-top: 0;
+ padding-bottom: .75em;
+ }
+ > a.hide
+ {
+ position: absolute;
+ left: auto;
+ top: .8em;
+ right: 1.5em;
+ display: block;
+ overflow: hidden;
+ width: 3.5em;
+ height: 3em;
+ line-height: 3em;
+ color: @hintergrund;
+ border-style: none;
+ }
+ > a.hide:before
+ {
+ content: "";
+ font-family: 'symbols';
+ font-size: 378%; /** Vielfaches von 14px */
+ padding: 0 0 1em 0;
+ margin: 0 1em 0 0;
+ }
+ > a.hide:hover,
+ > a.hide:focus,
+ > a.hide:active
+ {
+ color: @dunkler;
+ }
+}
+
+
+/** Footer positionieren */
+
+#footer
+{
+ padding: 0 1em .5em 2.5em;
+ background-color: @heller;
+}
+#footer > hr.f
+{
+ border-color: @hintergrund;
+}
+
+
+/** Marginal-Inhalte anpassen... */
+
+.marginal h1,
+.marginal h2,
+.marginal h3,
+.marginal h4
+{
+ color: @hintergrund;
+}
+
+
+/** Faux-Column-Hack für Marginalinhalte */
+
+.marginal
+{
+ margin-top: 4em;
+ margin-bottom: -993em;
+ padding: 1em 1em 999em 2.5em;
+ background-color: @heller;
+}
--- /dev/null
+#submenu
+{
+ border-style: none;
+ font-size: 125%;
+ line-height: 1.5em;
+}
--- /dev/null
+.pack > .p.left,
+.pack > .p.right,
+.pack.bg > .p.left,
+.pack.bg > .p.right,
+.single,
+.single.bg
+{
+ width: auto;
+ padding-bottom: 1.5em;
+ margin: 0 0 1.5em 0;
+}
--- /dev/null
+h1
+{
+ font-size: 150%; /** 24 px */
+}
--- /dev/null
+@import 'variables.less';
+
+#breadcrumb
+{
+ .droid;
+ color: @schrift;
+ font-weight: normal;
+}
+#breadcrumb strong.b
+{
+ font-weight: normal;
+}
+#breadcrumb ol.b li.b a.b,
+#breadcrumb ol.b li.b strong.b
+{
+ color: @schrift;
+ border-style: none;
+}
+#breadcrumb a.hide
+{
+ display: none;
+}
+#breadcrumb hr.b
+{
+ display: none;
+}
+@import 'print/typo.less';
+@import 'print/layout.less';
+@import 'print/head.less';
+@import 'print/prettify.less';
--- /dev/null
+#logo
+{
+ padding-left: .0625em;
+}
+#slogan
+{
+ display: inline-block;
+}
--- /dev/null
+body
+{
+ font-size: 75%; /** 12px */
+}
+#header hr.h
+{
+ margin: .5em 0;
+}
+.content
+{
+ clear: both;
+}
+.marginal
+{
+ display: none;
+}
+#breadcrumb
+{
+ .droid;
+ color: @schrift;
+ font-weight: normal;
+}
+#breadcrumb strong.b
+{
+ font-weight: normal;
+}
+#breadcrumb ol.b li.b a.b,
+#breadcrumb ol.b li.b strong.b
+{
+ color: @schrift;
+ border-style: none;
+}
+#breadcrumb a.hide
+{
+ display: none;
+}
+#breadcrumb hr.b
+{
+ display: none;
+}
+#nav
+{
+ display: none;
+}
+#footerlinks li.f
+{
+ display: none;
+}
+#footerlinks li#copyright
+{
+ .droid;
+ font-size: 100%;
+ display: block;
+}
--- /dev/null
+/* Pretty printing styles. Used with prettify.js. */
+pre .str, code .str { color: #060; }
+pre .kwd, code .kwd { color: #006; font-weight: bold; }
+pre .com, code .com { color: #600; font-style: italic; }
+pre .typ, code .typ { color: #404; font-weight: bold; }
+pre .lit, code .lit { color: #044; }
+pre .pun, code .pun { color: #440; }
+pre .pln, code .pln { color: #000; }
+pre .tag, code .tag { color: #006; font-weight: bold; }
+pre .atn, code .atn { color: #404; }
+pre .atv, code .atv { color: #060; }
--- /dev/null
+a
+{
+ color: @schrift;
+ border-style: none;
+}
--- /dev/null
+@import 'variables.less';
+@import 'screen/head.less';
+@import 'screen/menu.less';
+@import 'screen/footer-sticky.less';
+@import 'screen/wip.less';
+@import 'screen/packs.less';
+
+@media (min-width: (@minscreen))
+{
+ @import 'screen/layout.less';
+ @import 'screen/footer.less';
+ @media (max-width: (@maxtablet))
+ {
+ @import 'tablet/typo.less';
+ @import 'tablet/layout.less';
+ @import 'tablet/menu.less';
+ @import 'tablet/marginal.less';
+ @import 'tablet/footer.less';
+ }
+}
+@media (min-width: (@mindesktop))
+{
+ @import 'screen/faux-column.less';
+ @import 'screen/marginal.less';
+ @import 'screen/content.less';
+ @media (max-width: 1079px)
+ {
+ @import 'screen/onecolumn.less';
+ }
+}
+
+@media (max-width: (@maxtablet))
+{
+ @import 'tablet/head.less';
+ @import 'tablet/404.less';
+}
+
+@media (max-width: (@maxphone))
+{
+ @import 'phone/typo.less';
+ @import 'phone/layout.less';
+ @import 'phone/head.less';
+ @import 'phone/menu.less';
+ @import 'phone/footer.less';
+ @import 'phone/packs.less';
+ @import 'phone/404.less';
+}
+
+@media (max-width: (@maxtiny))
+{
+ @import 'tiny/layout.less';
+ @import 'tiny/404.less';
+}
--- /dev/null
+.mcontent
+{
+ position: relative;
+ padding: 0 24.375em 0 0;
+}
+.mcontent > .mmain
+{
+ float: left;
+ min-height: 1em;
+ position: relative;
+ width: 100%;
+ border-right: .125em solid @normal;
+}
+.mcontent > .mmarginal
+{
+ float: left;
+ margin: 0 -27em 0 -.125em;
+ padding: 0 2em 1.0625em 2em;
+ position: relative;
+ width: 20.375em;
+ border-left: .125em solid @normal;
+}
+.mcontent > .mmain > *
+{
+ margin-right: 5%;
+}
--- /dev/null
+/** Faux-Column-Hack-Eigengewächs für die Marginalspalte */
+
+.menu #page,
+.nomenu #page
+{
+ max-width: 38em; /** 608px + 390px (Marginalspalte) = ca. 1000px */
+ border-right: 24.375em solid @heller;
+}
+.nomenu #page
+{
+ border-right-color: @sehrhell;
+}
+.menu .content,
+.nomenu .content
+{
+ margin-right: -24.375em;
+}
+.menu #header,
+.nomenu #header
+{
+ margin-right: -24.375em;
+ background-color: @hintergrund;
+}
+.menu #breadcrumb,
+.nomenu #breadcrumb
+{
+ right: -24.375em; /** Weil der Breadcrumb sonst an der Faux-Column umbricht! */
+}
+.menu #footer,
+.nomenu #footer
+{
+ margin-right: -24.375em;
+ background-color: @hintergrund;
+}
--- /dev/null
+/** Make the footer sticky */
+html, body
+{
+ height: 100%;
+}
+#page
+{
+ position: relative;
+ min-height: 100%;
+}
+#footer
+{
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
--- /dev/null
+#footerlinks
+{
+ border-top: 1.25em solid @normal; /** 20px */
+}
+#footerlinks > li.f
+{
+ line-height: .6666666667em; /* 20px */
+ display: inline-block;
+ float: none;
+ margin: .5em 1em 0 0;
+ color: @normal;
+ vertical-align: top;
+}
+#footerlinks > li#copyright
+{
+ position: absolute;
+ float: none;
+ width: auto;
+ 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
+#logo
+{
+ display: inline-block;
+ font-size: 812.5%; /* 130px */
+ padding: 0;
+ line-height: 1em;
+ text-shadow: .092307692em .046153846em 0 @hintergrund; /** 12px 6px */
+ z-index: 3;
+ left: auto;
+}
+#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: 9em; /* 270px */
+ position: relative;
+ z-index: 2;
+ top: -1.3em; /* 39px */
+ text-align: right;
+ overflow: hidden;
+}
+#slogan > strong{
+ display: inline-block;
+ position: relative;
+ top: -.2em; /* -6px */
+}
--- /dev/null
+/** Seite gesamt (Abmessungen, Aussenabstände etc.) */
+
+body
+{
+ padding: 0;
+ overflow-y: scroll; /** Die vertikale Scroll-Leiste stets anzeigen */
+}
+#page
+{
+ margin: 0 auto; /** Seiteninhalte zentrieren, wenn max-width des Inhalts (s.u.) erreicht ist */
+ max-width: 62.375em; /** 608px + 390px (Marginalspalte) = ca. 1000px (muss zu Wergen in faux-columns.less passen!!) */
+}
+
+/** Seitenaufteilung mit Menü (Zweispaltig) */
+
+body
+{
+ padding: 0 3em 0 5em;
+}
+.content
+{
+ position: relative;
+ padding: 0 0 7.1875em 0; /** Unten: 115px (gemessene Gesamthöhe des Footers - mit Abstand und Margin) */
+}
+.menu .content,
+.nomenu .content
+{
+ padding-right: 27em;
+}
+.content > .main
+{
+ min-height: 1em;
+ position: relative;
+ width: 100%;
+}
+.menu .content > .main,
+.nomenu .content > .main
+{
+ float: left;
+}
+.content > .marginal
+{
+ position: relative;
+ background-color: @heller;
+}
+.menu .content > .marginal,
+.nomenu .content > .marginal
+{
+ float: left;
+ margin: 0 -27em 0 2.625em;
+ padding: 0 2em 1.0625em 2em;
+ width: 20.375em;
+}
+
+/** Anpassungen für Seiten ohne Menü */
+
+.nomenu .content > .marginal
+{
+ background-color: @sehrhell;
+}
+
+/** Anpassungen für einspaltige Seiten */
+
+.onecolumn .content > .marginal
+{
+ margin-top: 4em;
+ background-color: transparent;
+}
+
+/** Seitenkopf positionieren */
+
+#header
+{
+ margin-left: -2.125em;
+ padding: 1em 0;
+}
+#header > hr.h
+{
+ display: none;
+}
+
+
+/** Bereichsauswahl positionieren und stylen */
+
+.onecolumn #nav
+{
+ position: absolute;
+ top: 0;
+ right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */
+ width: 100%;
+}
+
+#nav > hr.n
+{
+ display: none;
+}
+#nav
+{
+ position: relative;
+ top: auto;
+ right: auto;
+ width: 22.375em; /** 358px = 326px + 32px*/
+}
+#menu
+{
+ position: relative;
+ width: 200%;
+ top: -8em; /** 136px */
+ right: 100%;
+ text-align: right;
+ list-style-type: none;
+ margin: 0 0 -2.125em 0; /** 0 0 -34px 0 */
+ padding: 0;
+ border-style: none;
+}
+.onecolumn #menu
+{
+ top: -15.5625em; /** -249px -- warum auch immer... */
+}
+#menu > li.m
+{
+ display: inline-block;
+ padding: 0 0 0 4em;
+}
+#menu > li.m > .m
+{
+ 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.selected
+{
+ color: @normal;
+}
+#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;
+}
+
+
+/** Breadcrump positionieren */
+
+#breadcrumb
+{
+ position: absolute;
+ top: 8.375em;
+ left: 6.9em;
+ z-index: 3;
+}
+#breadcrumb > a.hide
+{
+ position: absolute;
+}
+#breadcrumb > hr.b
+{
+ display: none;
+}
+
+
+/** Footer positionieren */
+
+#footer
+{
+ padding: 2em 0;
+}
+.onecolumn #footer
+{
+ background-color: @hintergrund;
+}
+#footer > hr.f
+{
+ display: none;
+}
--- /dev/null
+.menu .content > .marginal h1,
+.menu .content > .marginal h2,
+.menu .content > .marginal h3,
+.menu .content > .marginal h4
+{
+ color: @hintergrund;
+}
--- /dev/null
+#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 */
+ border: none;
+}
+#nav > h2.nav.submenu:before
+{
+ content: 'V ';
+ color: @hintergrund;
+ 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-size: 125%; /** 20 px */
+ list-style-type: none;
+ margin: 1em 0 4em 0;
+ padding: 0 0 0 1.65em; /** 0 0 0 33px */
+ border-style: none;
+}
+#submenu ul.s
+{
+ margin: 1.5em 0 0 0; /** 24px 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.s
+{
+ color: @dunkler;
+}
+#submenu li.s > a.s.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
+.pack > .p.left,
+.pack > .p.right,
+.pack.bg > .p.left,
+.pack.bg > .p.right,
+.single,
+.single.bg
+{
+ width: auto;
+ padding-bottom: 1.5em;
+ margin: 0 0 1.5em 0;
+}
--- /dev/null
+.pack
+{
+ overflow: hidden;
+}
+.pack > .p.left,
+.pack > .p.right
+{
+ width: 42%;
+ padding: 0 3% 999em 3%;
+ margin: 0 0 -998em 0;
+}
+.pack.bg > .p.left,
+.pack.bg > .p.right
+{
+ background-color: @sehrhell;
+}
+.pack > .p.left
+{
+ float: left;
+}
+.pack > .p.right
+{
+ float: right;
+}
+.pack > .p img.p
+{
+ width: 91.9118%;
+}
+.single
+{
+ padding: 0 3% 1em 3%;
+ margin: 3% 0;
+}
+.single.bg
+{
+ background-color: @sehrhell;
+}
--- /dev/null
+/** Pages under construction... */
+.wip,
+.wip h1,
+.wip h2,
+.wip h3,
+.wip h4,
+.wip h5,
+.wip h6,
+.wip a
+{
+ color: rgba(128, 128, 128, 0);
+ text-decoration: none;
+ border-color: rgba(128, 128, 128, 0);
+ text-shadow: 0 0 6px #404040;
+}
+.wip
+{
+ position: relative;
+}
+.wip img.w
+{
+ margin-top: 30%;
+ position: absolute;
+ width: 100%;
+}
--- /dev/null
+@import 'variables.less';
+
+@import 'screen/layout.less';
+@import 'screen/content.less';
--- /dev/null
+@import 'variables.less';
+@import 'screen/head.less';
+@import 'screen/menu.less';
+
+@import 'screen/layout.less';
--- /dev/null
+@import 'variables.less';
+@import 'screen/head.less';
+@import 'screen/menu.less';
+@import 'screen/footer-sticky.less';
+@import 'screen/wip.less';
+@import 'screen/packs.less';
+
+ @import 'screen/layout.less';
+ @import 'screen/footer.less';
+ @import 'tablet/typo.less';
+ @import 'tablet/layout.less';
+ @import 'tablet/menu.less';
+ @import 'tablet/marginal.less';
+ @import 'tablet/footer.less';
+ @import 'screen/onecolumn.less';
+ @import 'tablet/head.less';
+ @import 'tablet/404.less';
--- /dev/null
+.withbackground .content
+{
+ position: relative;
+ top: auto;
+ bottom: auto;
+ left: auto;
+ rigth: auto;
+}
+#bs3
+{
+ display: none;
+}
+#bs5
+{
+ left: auto;
+ right: 13%;
+}
+#bs7
+{
+ bottom: 21%;
+}
+#bs8
+{
+ display: none;
+}
--- /dev/null
+.menu #footer > #footerlinks
+{
+ position: static;
+ border-style: none;
+ margin: 3.75em 0 0 2em;
+}
+.menu #footer > #footerlinks > li.f
+{
+ line-height: 1em;
+ display: block;
+ margin: 0 0 .25em 0;
+ color: @hintergrund;
+}
+.menu #footer > #footerlinks > li#copyright
+{
+ line-height: 1em;
+ font-size: 137.5%;
+ top: auto;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 0 2.18181818em 1.5em; /* ? 3*16px ? */
+ @media (max-width: (@maxsmalltablet))
+ {
+ padding-right: 1.45454545em;
+ padding-bottom: 1em;
+ }
+ @media (max-width: (@maxsmallertablet))
+ {
+ padding-right: .72727272em;
+ padding-bottom: .5em;
+ }
+ background-color: @heller;
+ text-align: right;
+}
+.menu #footer > #footerlinks a.f
+{
+ color: @hintergrund;
+ border-color: @hintergrund;
+}
+.menu #footer > #footerlinks a.f:hover
+{
+ color: @hintergrund;
+ border-color: @hintergrund;
+ border-style: solid;
+}
+
+
+.nomenu #footer > #footerlinks,
+.onecolumn #footer > #footerlinks
+{
+ position: static;
+ margin: -.125em;
+ padding-top: 1.5em;
+ @media (max-width: (@maxsmalltablet))
+ {
+ padding-top: 1em;
+ }
+ @media (max-width: (@maxsmallertablet))
+ {
+ padding-top: .5em;
+ }
+ border-top: .125em solid @hintergrund;
+ > li.f
+ {
+ line-height: 1em;
+ margin: 0 1em 0 0;
+ padding: 0;
+ }
+ li.f > a.f
+ {
+ color: @hintergrund;
+ border-color: @hintergrund;
+ }
+ li#copyright
+ {
+ position: static;
+ float: right;
+ font-size: 137.5%;
+ margin: 0;
+ }
+}
--- /dev/null
+@media (max-width: (@maxsmalltablet))
+{
+ #logo
+ {
+ font-size: 650%; /* 104px */
+ }
+ #slogan
+ {
+ font-size: 150%; /** 24px */
+ }
+}
+
+@media (max-width: (@maxsmallertablet))
+{
+ #logo
+ {
+ font-size: 487.5%; /* 78px */
+ }
+ #slogan
+ {
+ font-size: 112.5%; /** 18px */
+ }
+}
+
--- /dev/null
+/** Seite gesamt (Abmessungen, Aussenabstände etc.) */
+
+body
+{
+ padding: 0;
+}
+#page
+{
+ overflow: hidden;
+}
+.nomenu #page
+{
+ padding: 0;
+}
+
+
+/** Seitenaufteilung mit/ohne Menü für Tablets optimieren */
+
+.menu .content
+{
+ padding: 0;
+}
+.nomenu .content
+{
+ padding: 0 0 5em 0;
+ @media (max-width: (@maxsmalltablet))
+ {
+ padding-bottom: 4em;
+ }
+ @media (max-width: (@maxsmallertablet))
+ {
+ padding-bottom: 3.25em;
+ }
+}
+.content.cf:before,
+.content.cf:after
+{
+ clear: none;
+ content: none;
+ display: inline;
+}
+.menu .content > .main,
+.nomenu .content > .main,
+.onecolumn .content > .main
+{
+ float: none;
+ width: auto;
+ padding: 0 3em 0 5em;
+ @media (max-width: (@maxsmalltablet))
+ {
+ padding: 0 2em 0 3em;
+ }
+ @media (max-width: (@maxsmallertablet))
+ {
+ padding: 0 1em 0 2.5em;
+ }
+ /** Die 1px-Rahmen triggern, dass das erste Margin den Footer aufschiebt.
+ Bei einem Wert von 0 ragt dieses Margin dann einfach aus dem Footer
+ heraus... */
+ border-top: 1px solid @hintergrund;
+ border-bottom: 1px solid @hintergrund;
+}
+.menu .content > .marginal,
+.nomenu .content > .marginal,
+.onecolumn .content > .marginal
+{
+ position: static;
+ width: 100%;
+}
+.menu .content > .marginal
+{
+ margin: 3em 0 -994em -15em;
+ padding: 2em 0 999em 0;
+}
+.nomenu .content > .marginal
+{
+ margin: 3em 0 -994em 0;
+ padding: 0 0 999em 0;
+ background-color: transparent;
+}
+.onecolumn .content > .marginal
+{
+ margin: 6.5em 0 -1001.175em 0;
+ padding: 0 0 999em 0;
+ background-color: transparent;
+}
+
+
+/** Seitenkopf positionieren */
+
+#header
+{
+ padding: 1em 3em 2em 5em;
+ @media (max-width: (@maxsmalltablet))
+ {
+ margin-left: -1.5em;
+ padding: .5em 2em 2em 3em;
+ }
+ @media (max-width: (@maxsmallertablet))
+ {
+ margin-left: -1.2em;
+ padding: 1em 1em 2em 2.5em;
+ }
+}
+
+
+/** Bereichsauswahl positionieren */
+
+.menu #nav
+{
+ position: static;
+ border-right: .125em solid @hintergrund;
+ margin-left: 20em;
+ @media (max-width: (@maxsmalltablet))
+ {
+ margin-left: 18.5em;
+ }
+ @media (max-width: (@maxsmallertablet))
+ {
+ margin-left: 17.5em;
+ #menu > li.about
+ {
+ display: inline-block;
+ }
+ }
+ width: auto;
+}
+.nomenu #nav
+{
+ position: absolute;
+ top: 0;
+ right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */
+ width: 100%;
+}
+
+.menu #menu,
+.nomenu #menu,
+.onecolumn #menu
+{
+ position: absolute;
+ width: auto;
+ top: -9em;
+ right: 3em;
+ @media (max-width: (@maxsmalltablet))
+ {
+ top: -7.7em;
+ right: 2em;
+ }
+ @media (max-width: (@maxsmallertablet))
+ {
+ top: -6.5em;
+ right: 1em;
+ }
+}
+#menu > li.about
+{
+ display: none;
+}
+#menu > li.m
+{
+ @media (max-width: (@maxsmalltablet))
+ {
+ padding: 0 0 0 3em;
+ }
+ @media (max-width: (@maxsmallertablet))
+ {
+ padding: 0 0 0 2em;
+ }
+}
+#menu > li.m > .m
+{
+ @media (max-width: (@maxsmalltablet))
+ {
+ font-size: 200%; /* 32px */
+ }
+ @media (max-width: (@maxsmallertablet))
+ {
+ font-size: 150%; /* 24px */
+ }
+}
+#menu > li.m > a.m:hover:before,
+#menu > li.m > a.m.selected:before,
+#menu > li.m > strong.m:before
+{
+ @media (max-width: (@maxsmalltablet))
+ {
+ content: '> ';
+ margin-left: -.95em;
+ }
+ @media (max-width: (@maxsmallertablet))
+ {
+ }
+}
+
+
+/** Footer positionieren */
+
+.menu #footer
+{
+ position: static;
+ float: right;
+ margin: 3em 0 -999em -15em;
+ padding: 0 0 999em 0;
+ width: 15em;
+ background-color: @heller;
+}
+.nomenu #footer,
+.onecolumn #footer
+{
+ padding: 0 3em 1.5em 5em;
+ @media (max-width: (@maxsmalltablet))
+ {
+ padding: 0 2em 1em 3em;
+ }
+ @media (max-width: (@maxsmallertablet))
+ {
+ padding: 0 1em .75em 2.5em;
+ }
+ background-color: @heller;
+ border-style: none;
+}
+
+
+/** Breadcrump positionieren */
+
+.menu #breadcrumb,
+.nomenu #breadcrumb,
+.onecolumn #breadcrumb
+{
+ left: 11.9em;
+ right: 3em;
+ @media (max-width: (@maxsmalltablet))
+ {
+ font-size: 87.5%; /* 14px */
+ top: 7.2em;
+ left: 9.8em;
+ }
+ @media (max-width: (@maxsmallertablet))
+ {
+ top: 5.8em;
+ left: 7em;
+ }
+}
+
+
+/** Faux-Column-Hack für Marginalinhalte */
+
+.nomenu .content > .marginal aside.m,
+.onecolumn .content > .marginal aside.m
+{
+ margin: 3.5em 0 -999em 0;
+ padding: 2em 3em 995em 5em;
+ background-color: @heller;
+ position: relative;
+ top: -4.5em;
+ @media (max-width: (@maxsmalltablet))
+ {
+ padding-left: 3em;
+ padding-right: 2em;
+ }
+ @media (max-width: (@maxsmallertablet))
+ {
+ padding-left: 2.5em;
+ padding-right: 1em;
+ }
+}
+.menu .content > .marginal > aside.m
+{
+ margin: 0 -12em 1em 20em;
+ @media (max-width: (@maxsmalltablet))
+ {
+ margin-left: 18.5em;
+ margin-right: -13em;
+ }
+ @media (max-width: (@maxsmallertablet))
+ {
+ margin-left: 17.5em;
+ margin-right: -14em;
+ }
+}
--- /dev/null
+.nomenu .content > .marginal h1,
+.onecolumn .content > .marginal h1,
+.nomenu .content > .marginal h2,
+.onecolumn .content > .marginal h2,
+.nomenu .content > .marginal h3,
+.onecolumn .content > .marginal h3,
+.nomenu .content > .marginal h4,
+.onecolumn .content > .marginal h4
+{
+ color: @hintergrund;
+}
--- /dev/null
+#submenu
+{
+ padding-right: 1em;
+}
--- /dev/null
+@media (max-width: (@maxsmalltablet))
+{
+ h1
+ {
+ font-size: 150%; /** 24 px */
+ }
+}
+
--- /dev/null
+@import 'variables.less';
+@import 'screen/head.less';
+@import 'screen/menu.less';
+@import 'screen/footer-sticky.less';
+@import 'screen/wip.less';
+@import 'screen/packs.less';
+
+@import 'tiny/layout.less';
+@import 'tiny/404.less';
--- /dev/null
+.withbackground .content > .marginal
+{
+ border-top: .166666666666em solid @hintergrund; /** 2px */
+}
+#bs1
+{
+ top: -2%;
+ left: 57%;
+}
+#bs2,
+#bs6
+{
+ display: none;
+}
+#bs7
+{
+ top: 32%;
+ left: 46%;
+}
--- /dev/null
+body
+{
+ font-size: 75%; /** 12px */
+}
+#header
+{
+ margin: .25em .5em 1em 1em;
+}
+#nav:target
+{
+ padding-left: 0.5em;
+ padding-right: 0.5em;
+}
+#breadcrumb,
+#nav:target > a.hide
+{
+ top: .5em;
+ right: .5em;
+}
+.content > .main,
+#footer
+{
+ margin: 0;
+ padding: 0 .5em;
+}
+.content > .marginal
+{
+ padding: 1em .5em 999em .5em;
+ margin-bottom: -991em;
+}
+
+@media (max-width: 210px)
+{
+ #header
+ {
+ font-size: 75%;
+ }
+ #nav:target
+ {
+ padding-top: 0;
+ }
+ #breadcrumb,
+ #nav:target > a.hide
+ {
+ top: .1em;
+ right: .3em;
+ }
+ #breadcrumb > a.hide:before,
+ #nav:target > a.hide:before
+ {
+ font-size: 300%; /** Vielfaches von 12px */
+ }
+}
+@media (max-width: 150px)
+{
+ #header
+ {
+ font-size: 50%;
+ }
+ #header > hr.h
+ {
+ display: block;
+ }
+ #slogan
+ {
+ display: none;
+ }
+ #breadcrumb,
+ #nav:target > a.hide
+ {
+ top: .2em;
+ }
+ #breadcrumb > a.hide:before,
+ #nav:target > a.hide:before
+ {
+ font-size: 264%; /** Vielfaches von 12px */
+ }
+}
--- /dev/null
+/** Farb-Thema */
+
+@normal: #0ACF00;
+@dunkel: #2D9B27;
+@dunkler: #078600;
+@nochdunkler: #077600;
+@hell: #42E73A;
+@heller: #6EE768;
+@sehrhell: #CEF7C8;
+
+@schrift: #000;
+@schrifthell: tint(@schrift, 45%);
+
+@hintergrund: #FFF;
+
+@fehler: #e60000;
+@fehlerhell: tint(@fehler, 70%);
+
+
+/** Bildschirmbreiten für Media-Query */
+
+@minscreen: 580px;
+@mindesktop: 940px;
+@maxtablet: @mindesktop - 1;
+@maxsmalltablet: 800px;
+@maxsmallertablet: 700px;
+@maxphone: 579px;
+@minphone: 300px;
+@maxtiny: 299px;
+
+/** Schriften */
+
+.droid ()
+{
+ font-family: 'DroidSerif', 'Times New Roman', 'Palatino Linotype' , serif;
+}
+
+.bpreplay ()
+{
+ font-family: 'BPreplay', Helvetica, Arial, sans-serif;
+ font-weight: bold;
+}
<title>Projects</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="css/base.min.css"/>
- <style type="text/css">
- @import 'css/screen.min.css' screen;
- @import 'css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="less/print.less" media="print"/>
+ <script src="js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<title>Fix SWF</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="../css/base.min.css"/>
- <style type="text/css">
- @import '../css/screen.min.css' screen;
- @import '../css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../less/print.less" media="print"/>
+ <script src="../js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<title>Fix SWF - Getting Started</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="../../css/base.min.css"/>
- <style type="text/css">
- @import '../../css/screen.min.css' screen;
- @import '../../css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+ <script src="../../js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fix SWF - Overview</title>
- <link rel="stylesheet" type="text/css" href="../../css/base.min.css"/>
- <style type="text/css">
- @import '../../css/screen.min.css' screen;
- @import '../../css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+ <script src="../../js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<title>HTML-Experimente</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="../css/base.min.css"/>
- <style type="text/css">
- @import '../css/screen.min.css' screen;
- @import '../css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../less/print.less" media="print"/>
+ <script src="../js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<head layout:fragment="head">
<title>HTML-Experimente - Basis-Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
- <link rel="stylesheet" type="text/css" href="../../css/base.min.css" th:href="@{/css/base.min.css}"/>
+ <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../less/base.less" th:href="@{/css/base.min.css}"/>
<script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
</head>
<body>
<title>HTML-Experimente - Langer Breadcrumb</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="../../css/base.min.css"/>
- <style type="text/css">
- @import '../../css/screen.min.css' screen;
- @import '../../css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+ <script src="../../js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<head layout:fragment="head">
<title>HTML-Experimente - Druck-Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
- <link rel="stylesheet" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
- <link rel="stylesheet" th:rel="stylesheet" type="text/css" href="../../css/print.css" th:href="@{/css/print.css}"/>
+ <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
+ <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/print.css" th:href="@{/css/print.css}"/>
<script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
</head>
<body>
<head>
<title>This Page Will Raise An Error</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
- <link rel="stylesheet" type="text/css" href="css/base.min.css"/>
- <style type="text/css">
- @import 'css/screen.min.css' screen;
- @import 'css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="less/print.less" media="print"/>
</head>
<body>
</body>
<title>HTML-Experimente - Fast leere einspaltige Seite mit Marginalinhalt</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="../../css/base.min.css"/>
- <style type="text/css">
- @import '../../css/screen.min.css' screen;
- @import '../../css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+ <script src="../../js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<title>HTML-Experimente - Fast leere einspaltige Seite</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="../../css/base.min.css"/>
- <style type="text/css">
- @import '../../css/screen.min.css' screen;
- @import '../../css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+ <script src="../../js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<title>HTML-Experimente - Fast leere Seite ohne Menü aber mit Marginalspalte</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="../../css/base.min.css"/>
- <style type="text/css">
- @import '../../css/screen.min.css' screen;
- @import '../../css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+ <script src="../../js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<title>HTML-Experimente - Fast leere Seite ohne Menü</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="../../css/base.min.css"/>
- <style type="text/css">
- @import '../../css/screen.min.css' screen;
- @import '../../css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+ <script src="../../js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<title>HTML-Experimente - Fast leere Seite mit Menü und Marginalinhalt</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="../../css/base.min.css"/>
- <style type="text/css">
- @import '../../css/screen.min.css' screen;
- @import '../../css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+ <script src="../../js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<title>HTML-Experimente - Fast leere Seite mit Menü</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="../../css/base.min.css"/>
- <style type="text/css">
- @import '../../css/screen.min.css' screen;
- @import '../../css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+ <script src="../../js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<title>HTML-Experimente - Formulare</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="../../css/base.min.css"/>
- <style type="text/css">
- @import '../../css/screen.min.css' screen;
- @import '../../css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+ <script src="../../js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<head layout:fragment="head">
<title>HTML-Experimente - Layout PHONE</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
- <link rel="stylesheet" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
- <link rel="stylesheet" th:rel="stylesheet" type="text/css" href="../../css/phone.css" th:href="@{/css/phone.css}"/>
+ <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
+ <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/phone.css" th:href="@{/css/phone.css}"/>
<script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
</head>
<body>
<head layout:fragment="head">
<title>HTML-Experimente - Basis-Layout & Seitenaufteilung</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
- <link rel="stylesheet" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
- <link rel="stylesheet" th:rel="stylesheet" type="text/css" href="../../css/seitenaufteilung.css" th:href="@{/css/seitenaufteilung.css}"/>
+ <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
+ <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/seitenaufteilung.css" th:href="@{/css/seitenaufteilung.css}"/>
<script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
</head>
<body>
<head layout:fragment="head">
<title>HTML-Experimente - Basis-Layout & Seitenkopf</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
- <link rel="stylesheet" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
- <link rel="stylesheet" th:rel="stylesheet" type="text/css" href="../../css/seitenkopf.css" th:href="@{/css/seitenkopf.css}"/>
+ <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
+ <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/seitenkopf.css" th:href="@{/css/seitenkopf.css}"/>
<script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
</head>
<body>
<title>HTML-Experimente - Symbol-Font</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="../../css/base.min.css"/>
- <style type="text/css">
- @import '../../css/screen.min.css' screen;
- @import '../../css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+ <script src="../../js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<head layout:fragment="head">
<title>HTML-Experimente - Layout TABLET</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
- <link rel="stylesheet" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
- <link rel="stylesheet" th:rel="stylesheet" type="text/css" href="../../css/tablet.css" th:href="@{/css/tablet.css}"/>
+ <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
+ <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/tablet.css" th:href="@{/css/tablet.css}"/>
<script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
</head>
<body>
<title>HTML-Experimente - Media-Query-Test: BEISPIEL</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="../../css/base.min.css"/>
- <style type="text/css">
- @import '../../css/screen.min.css' screen;
- @import '../../css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+ <script src="../../js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<head layout:fragment="head">
<title>HTML-Experimente - Layout TINY</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
- <link rel="stylesheet" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
- <link rel="stylesheet" th:rel="stylesheet" type="text/css" href="../../css/tiny.css" th:href="@{/css/tiny.css}"/>
+ <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
+ <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/tiny.css" th:href="@{/css/tiny.css}"/>
<script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
</head>
<body>
<title>Typography</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="../css/base.min.css"/>
- <style type="text/css">
- @import '../css/screen.min.css' screen;
- @import '../css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../less/print.less" media="print"/>
<script src="../js/prettify.js" th:src="@{/js/prettify.js}"></script>
+ <script src="../js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body onload="prettyPrint()">
<title>References</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="css/base.min.css"/>
- <style type="text/css">
- @import 'css/screen.min.css' screen;
- @import 'css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="less/print.less" media="print"/>
+ <script src="js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<title>404: Page Not Found!</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="../css/base.min.css"/>
- <style type="text/css">
- @import '../css/screen.min.css' screen;
- @import '../css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../less/print.less" media="print"/>
+ <script src="../js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<title>An Unexpected Error Occured!</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="../css/base.min.css"/>
- <style type="text/css">
- @import '../css/screen.min.css' screen;
- @import '../css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../less/print.less" media="print"/>
+ <script src="../js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
<head>
<title>Fragments</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
- <link rel="stylesheet" type="text/css" href="../css/base.min.css"/>
- <style type="text/css">
- @import '../css/screen.min.css' screen;
- @import '../css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../less/print.less" media="print"/>
+ <script src="../js/less-1.7.0.min.js"></script>
</head>
<body>
<h1>Explanation fo the german word "Impressum"</h1>
<title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE" th:text="'juplo'">juplo - BASISTEMPLATE</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
- <link rel="stylesheet" type="text/css" href="../css/base.min.css" th:href="@{/css/base.min.css}"/>
- <style type="text/css" th:remove="all">
- @import '../css/screen.min.css' screen;
- @import '../css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../less/base.less" th:href="@{/css/base.min.css}"/>
+ <link rel="stylesheet/less" type="text/css" href="../less/screen.less" media="screen" th:remove="all"/>
+ <link rel="stylesheet/less" type="text/css" href="../less/print.less" media="print" th:remove="all"/>
<style type="text/css" th:inline="text">
@import '[[@{/css/screen.min.css}]]' screen;
@import '[[@{/css/print.min.css}]]' print;
<script src="../js/html5shiv.js" th:src="@{/js/html5shiv.js}"></script>
<![endif]-->
<!--[if IE 8]>
- <link rel="stylesheet" type="text/css" href="../css/ie8.min.css" th:href="@{/css/ie8.min.css}"/>
+ <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../less/ie8.less" th:href="@{/css/ie8.min.css}"/>
<![endif]-->
+ <script src="../js/less-1.7.0.min.js" th:remove="all"></script>
</head>
<body
th:with="crumbs=${crumbs.get(uri)}"
<a class="b" href="../projects.html" th:href="@{${crumb.uri}}" th:text="${crumb.name}">Projects</a>
</li>
<!--/*-->
- <li class="b"><strong class="b" th:text="${title}"">Fix SWF</strong></li>
+ <li class="b"><strong class="b" th:text="${title}">Fix SWF</strong></li>
<!--*/-->
</ol>
<a class="hide" href="#nav" title="Show navigation menu">Jump to navigation</a>
<title>Urheberrecht</title>
<!--/*-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="css/base.min.css"/>
- <style type="text/css">
- @import 'css/screen.min.css' screen;
- @import 'css/print.min.css' print;
- </style>
+ <link rel="stylesheet/less" type="text/css" href="less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="less/print.less" media="print"/>
+ <script src="js/less-1.7.0.min.js"></script>
<!--*/-->
</head>
<body>
+++ /dev/null
-@import 'variables.less';
-@import 'base/browserreset.less';
-@import 'base/fonts.less';
-@import 'base/util.less';
-@import 'base/typo.less';
-@import 'base/head.less';
-@import 'base/navigation.less';
-@import 'base/content.less';
-@import 'base/prettify.less';
-@import 'base/marginal.less';
-@import 'base/footer.less';
-@import 'base/formulare.less';
-@import 'base/404.less';
+++ /dev/null
-.withbackground .content > .marginal > #nav
-{
- z-index: 2;
-}
-.withbackground .content > .main
-{
- display: block;
-}
-.withbackground .content > .main > *
-{
- position: relative;
- z-index: 3;
-}
-#footer
-{
- z-index: 3;
-}
-.withbackground .content > .main > .background
-{
- .bpreplay;
- display: block;
- position: absolute;
- z-index: 1;
- line-height: .8em;
- height: .8em;
- overflow: hidden;
-}
-.withbackground .content > .main > .heller
-{
- color: @heller;
- z-index: 2;
-}
-.withbackground .content > .main > .sehrhell
-{
- color: @sehrhell;
- text-shadow: .02em .01em 0 @hintergrund;
-}
-#bs1
-{
- font-size: 2000%;
- top: 55%;
- left: 11%;
-}
-#bs2
-{
- font-size: 2600%;
- top: 30%;
- right: -1%;
-}
-#bs3
-{
- font-size: 5000%;
- top: -5%;
- right: -5%;
-}
-#bs4
-{
- font-size: 600%;
- top: 0;
- left: 50%;
-}
-#bs5
-{
- font-size: 3600%;
- top: 13%;
- left: 35%;
-}
-#bs6
-{
- font-size: 2000%;
- top: 0%;
- left: 23%;
-}
-#bs7
-{
- font-size: 600%;
- top: 72%;
- left: 5%;
-}
-#bs8
-{
- font-size: 2200%;
- top: 10%;
- right: 27%;
-}
-#bs9
-{
- font-size: 1200%;
- bottom: 26%;
- left: 36%;
-}
+++ /dev/null
-/** Browser-Reset *************************************************************/
-
-
-/** v1.0 | 20080212, s. http://meyerweb.com/eric/tools/css/reset/ */
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, font, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td {
- margin: 0;
- padding: 0;
- border: 0;
- outline: 0;
- font-size: 100%;
- vertical-align: baseline;
- background: transparent;
-}
-body {
- line-height: 1;
-}
-ol, ul {
- list-style: none;
-}
-blockquote, q {
- quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
- content: '';
- content: none;
-}
-
-/* remember to define focus styles! */
-:focus {
- outline: 0;
-}
-
-/* remember to highlight inserts somehow! */
-ins {
- text-decoration: none;
-}
-del {
- text-decoration: line-through;
-}
-
-/* tables still need 'cellspacing="0"' in the markup */
-table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-
-
-/** Eigene Reset-Erweiterungen */
-
-a {
- color: inherit;
- text-decoration: none;
-}
-hr {
- padding: 0;
- margin: 0;
-}
+++ /dev/null
-@font-face
-{
- font-family: 'BPreplay';
- src: url('../fonts/BPreplay-webfont.eot');
- src: url('../fonts/BPreplay-webfont.eot?#iefix') format('embedded-opentype'),
- url('../fonts/BPreplay-webfont.woff') format('woff'),
- url('../fonts/BPreplay-webfont.ttf') format('truetype'),
- url('../fonts/BPreplay-webfont.svg#BPreplayRegular') format('svg');
- font-weight: normal;
- font-style: normal;
-}
-
-@font-face
-{
- font-family: 'BPreplay';
- src: url('../fonts/BPreplayItalics-webfont.eot');
- src: url('../fonts/BPreplayItalics-webfont.eot?#iefix') format('embedded-opentype'),
- url('../fonts/BPreplayItalics-webfont.woff') format('woff'),
- url('../fonts/BPreplayItalics-webfont.ttf') format('truetype'),
- url('../fonts/BPreplayItalics-webfont.svg#BPreplayItalic') format('svg');
- font-weight: normal;
- font-style: italic;
-}
-
-@font-face
-{
- font-family: 'BPreplay';
- src: url('../fonts/BPreplayBold-webfont.eot');
- src: url('../fonts/BPreplayBold-webfont.eot?#iefix') format('embedded-opentype'),
- url('../fonts/BPreplayBold-webfont.woff') format('woff'),
- url('../fonts/BPreplayBold-webfont.ttf') format('truetype'),
- url('../fonts/BPreplayBold-webfont.svg#BPreplayBold') format('svg');
- font-weight: bold;
- font-style: normal;
-}
-
-@font-face
-{
- font-family: 'BPreplay';
- src: url('../fonts/BPreplayBoldItalics-webfont.eot');
- src: url('../fonts/BPreplayBoldItalics-webfont.eot?#iefix') format('embedded-opentype'),
- url('../fonts/BPreplayBoldItalics-webfont.woff') format('woff'),
- url('../fonts/BPreplayBoldItalics-webfont.ttf') format('truetype'),
- url('../fonts/BPreplayBoldItalics-webfont.svg#BPreplayBoldItalic') format('svg');
- font-weight: bold;
- font-style: italic;
-}
-
-@font-face
-{
- font-family: 'DroidSerif';
- src: url('../fonts/DroidSerif-Regular-webfont.eot');
- src: url('../fonts/DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
- url('../fonts/DroidSerif-Regular-webfont.woff') format('woff'),
- url('../fonts/DroidSerif-Regular-webfont.ttf') format('truetype'),
- url('../fonts/DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
- font-weight: normal;
- font-style: normal;
-
-}
-
-@font-face
-{
- font-family: 'DroidSerif';
- src: url('../fonts/DroidSerif-Italic-webfont.eot');
- src: url('../fonts/DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'),
- url('../fonts/DroidSerif-Italic-webfont.woff') format('woff'),
- url('../fonts/DroidSerif-Italic-webfont.ttf') format('truetype'),
- url('../fonts/DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg');
- font-weight: normal;
- font-style: italic;
-
-}
-
-@font-face
-{
- font-family: 'DroidSerif';
- src: url('../fonts/DroidSerif-Bold-webfont.eot');
- src: url('../fonts/DroidSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'),
- url('../fonts/DroidSerif-Bold-webfont.woff') format('woff'),
- url('../fonts/DroidSerif-Bold-webfont.ttf') format('truetype'),
- url('../fonts/DroidSerif-Bold-webfont.svg#DroidSerifBold') format('svg');
- font-weight: bold;
- font-style: normal;
-
-}
-
-@font-face
-{
- font-family: 'DroidSerif';
- src: url('../fonts/DroidSerif-BoldItalic-webfont.eot');
- src: url('../fonts/DroidSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
- url('../fonts/DroidSerif-BoldItalic-webfont.woff') format('woff'),
- url('../fonts/DroidSerif-BoldItalic-webfont.ttf') format('truetype'),
- url('../fonts/DroidSerif-BoldItalic-webfont.svg#DroidSerifBoldItalic') format('svg');
- font-weight: bold;
- font-style: italic;
-
-}
-
-@font-face
-{
- font-family: 'symbols';
- src: url('../fonts/symbols.eot');
- src: url('../fonts/symbols.eot?#iefix') format('embedded-opentype'),
- url('../fonts/symbols.woff') format('woff'),
- url('../fonts/symbols.ttf') format('truetype'),
- url('../fonts/symbols.svg#symbols') format('svg');
- font-weight: normal;
- font-style: normal;
-}
-
+++ /dev/null
-#footerlinks
-{
- .bpreplay;
- position: relative;
- margin: 0;
- padding: 0;
- list-style-type: none;
-}
-#footerlinks li.f
-{
- font-size: 137.5%; /** 22 px */
- float: left;
- margin: .5em 1em 0 0;
-}
-#footerlinks #copyright
-{
- color: @schrift;
- margin: 0;
- width: 100%;
-}
-#footerlinks a.f
-{
- color: @normal;
- border-color: @normal;
-}
-#footerlinks a.f:hover
-{
- color: @dunkler;
- border-color: @dunkler;
- border-style: solid;
-}
+++ /dev/null
-/** Formulare *****************************************************************/
-
-.form {
- position: relative;
- width: 100%;
- overflow: hidden;
-}
-
-/** Trennlinie */
-.form hr.f {
- border-style: none;
- border-top-style: dashed;
- border-color: @normal;
- border-width: .0625em;
- margin: .625em 0; /** 10px 0 */
- background-color: transparent;
-}
-
-/** Text im Formular */
-.form p.f {
- color: @schrifthell;
-}
-.form p.f,
-.form .radiobutton > legend.f,
-.form .checkbox > legend.f,
-.form .textarea > label.f {
- display: block;
- font-size: 87.5%; /** 14px */
- line-height: 1.5em; /** 21px */
- color: @schrifthell;
- margin: .428571429em 0; /** 6px 0 */
-}
-
-/** Aufzählungen im Formular */
-.form ul.f,
-.form ol.f {
- color: @schrifthell;
- margin: 1em 0;
-}
-
-/** Info-Text */
-.form p.f.info,
-.form .textarea > label.f.info,
-.form .radiobutton > legend.f.info,
-.form .checkbox > legend.f.info,
-.form .textarea > label.f.info {
- display: block;
- font-size: 81.25%; /** 13px */
- line-height: 1.230769231em; /** 16px */
- font-style: italic;
- color: @schrifthell;
- padding: 0 0 0 1.538461538em; /** 0 0 0 20px */
- background-image: url(../img/em.png);
- background-repeat: no-repeat;
- background-position: 0 1px;
- margin-top: .461538462em; /** 6px */
- margin-bottom: .461538462em; /** 6px */
-}
-.form .info > a {
- display: inline-block;
-}
-
-/** Überschriften */
-.form h1.f {
- font-size: 137.5%; /** 22px */
- letter-spacing: .0454545em; /** 1px */
- line-height: 1em;
- padding: 0 0 .454545455em; /** 0 0 10px */
- border-bottom: .090909091em solid @normal; /** 2px */
- margin: .272727273em 0 .909090909em 0; /** 6px 0 20px 0 */
-}
-.form h2.f {
- font-size: 100%; /** 16px */
- letter-spacing: .0625em; /** 1px */
- text-transform: uppercase;
- line-height: 1.625em; /** 26px */
- padding: 0 0 0 .125em; /** 0 0 0 2px */
- border-bottom: .0625em solid @normal; /** 1px */
- margin: 1.875em 0 .25em 0; /** 30px 0 4px 0 */
-}
-.form h3.f {
-/** border-bottom: 1px dashed @normal; */
-}
-.form p.required {
- text-indent: -999em;
- margin: -1.785714286em 0 0 0; /** -25px 0 0 0 zu 14px */
-}
-.form p.required > strong.r {
- display: block;
- float: right;
- position: relative;
- right: -994em;
- margin-right: 1em; /** 14px */
- font-weight: normal;
-}
-.form p.required > strong.symbol {
- font-size: 128.5714286%; /** 18px zu 14px */
- margin-right: .555555em; /** 10px */
- padding-top: .1666666em; /** 3px */
- right: -773.11em; /** Anpassung wegen abweichender Schriftgröße nötig: 994em * 14px / 18px */
- font-weight: 700;
- color: @dunkel;
-}
-
-/** Fehler-Hinweise */
-.f.error {
- color: @fehler;
-}
-span.f.error {
- display: block;
- position: relative;
- font-size: 87.5%; /** 14px */
- line-height: 1.214285714em; /** 17px */
- padding: .571428571em; /** 8px */
- color: @hintergrund;
- background-color: @fehler;
- margin: .857142857em 0 0 0; /** 12px 0 0 0 */
-}
-span.f.error > span.e {
- display: block;
- width: .857142857em; /** 12px */
- height: .428571429em; /** 6px */
- background-image: url(../img/arrow-red.gif);
- text-indent: -9999em;
- position: absolute;
- top: -.428571429em; /** -6px */
- left: 2.142857143em; /** 30px */
-}
-span.f.error > strong.e {
- text-transform: uppercase;
-}
-
-/** Input, Select und Dateiupload mit Label */
-.form .text,
-.form .select,
-.form .file {
- position: relative;
- margin-bottom: .75em; /** 12px */
-}
-.form .text,
-.form .file {
- margin-right: 10em; /** 160px */
-}
-.form .select {
- margin-right: 9em; /** 144px */
-}
-h2.f + div.text,
-h2.f + div.select,
-h2.f + div.file,
-h2.f + div.captcha,
-p.f + div.text,
-p.f + div.select,
-p.f + div.file {
- margin-top: 20px;
-}
-.form .text > label.f,
-.form .textarea > label.f,
-.form .select > label.f,
-.form .file > label.f,
-.form .captcha > span.f {
- display: block;
- position: relative;
- font-size: 87.5%; /** 14px */
- line-height: 1.214285714em; /** 17px */
- padding: .571428571em 0 .571428571em 0; /** 8px 0 8px 0 */
- color: @schrift;
-}
-.form .file > label.f {
- padding-top: .285714286em; /** 4px */
- padding-bottom: .285714286em; /** 4px */
-}
-.form .captcha > span.f {
- position: absolute;
-}
-.form .required > label.f {
- padding-left: 1em; /** 14px */
-}
-.form .required > label.f > .required {
- display: block;
- position: absolute;
- font-size: 128.5714286%; /** 18px zu 14px */
- font-weight: 700;
- color: @dunkel;
- top: .611111111em; /** 11px */
- left: 0;
-}
-.form .file > label.f > .required {
- top: .5em; /** 7px */
-}
-.form .text > input.f,
-.form .select > select.f,
-.form .file > input.f {
- display: block;
- width: 100%;
- position: absolute;
- top: 0;
- font-size: 81.25%; /** 13px */
- border: .076923077em solid @normal; /** 1px */
- color: @schrift;
- background-color: @sehrhell;
-}
-.form .text > input.f {
- line-height: 1.307692308em; /** 17px */
- padding: .538461538em; /** 7px */
- right: -12.307692308em; /** -160px */
-}
-.form .select > select.f {
- line-height: 1.230769231em; /** 16px */
- padding: .461538462em .538461538em; /** 6px 7px */
- right: -11.076923077em; /** -144px */
-}
-.form .file > input.f {
- margin-left: 11.076923077em; /** 144px */
-}
-.form .captcha > img.f {
- float: right;
- margin-top: -.9375em; /** 15px */
- width: 7.5em; /** 120px */
- height: 3.75em; /** 60px */
-}
-.form .text > input.f:focus,
-.form .select > select.f:focus,
-.form .text > input.f:active,
-.form .select > select.f:active {
- background-color: transparent;
-}
-.form .text > p.f.info,
-.form .select > p.f.info,
-.form .file > p.f.info {
- position: relative;
- left: 11.076923077em; /** 144px */
-}
-.form .text > span.f.error,
-.form .select > span.f.error,
-.form .file > span.f.error {
- width: 100%;
- margin: .857142857em 0 0 10.285714286em; /** 12px 0 0 144px zu 14(!)px*/
-}
-
-/** Textfelder */
-.form .textarea {
- position: relative;
- margin: 0 .6875em .75em .6875em; /** 0px 11px 12px 11px */
-}
-.form .textarea > label.f {
- margin: .615384615em -.846153846em; /** 8px -11px */
-}
-.form .textarea > textarea.f,
-.form .textarea > div.textarea {
- width: 100%;
- border: .076923077em solid @normal; /** 1px */
- color: @schrift;
- background-color: @sehrhell;
- padding: .769230769em; /** 10px */
- position: relative;
- left: -.846153846em; /** -11px */
-}
-.form .textarea > div.textarea {
- margin: 0;
- font-size: 87.5%; /** 14px */
-}
-.form .textarea > textarea.f:focus,
-.form .textarea > textarea.f:active {
- background-color: transparent;
-}
-.form .textarea > span.f.error {
- margin: .714285714em -.785714286em 0 -.785714286em; /** 10px -11px 0 -11px */
-}
-
-/** Radiobuttons und Checkboxen */
-.form .radiobutton > legend.f.info,
-.form .checkbox > legend.f.info {
- padding: .230769231em 0 0 1.538461538em; /** 3px 0 0 20px zu 13px*/
- background-position: 0 .230769231em; /** 0 3px */
-}
-.form .col2,
-.form .radiobutton > .col2,
-.form .checkbox > .col2 {
- width: 48%;
- float: left;
-}
-.form .col2.left,
-.form .radiobutton > .col2.left,
-.form .checkbox > .col2.left {
- margin-right: 2%;
-}
-.form .col2.right,
-.form .radiobutton > .col2.right,
-.form .checkbox > .col2.right {
- float: right;
- margin-left: 2%;
-}
-.form div.checkbox,
-.form .radiobutton > .f,
-.form .checkbox > .f,
-.form .radiobutton > .col2 > .f,
-.form .checkbox > .col2 > .f {
- position: relative;
-}
-.form div.checkbox > label.f,
-.form .radiobutton > .f > label.f,
-.form .checkbox > .f > label.f,
-.form .radiobutton > .col2 > .f > label.f,
-.form .checkbox > .col2 > .f > label.f {
- display: block;
- font-size: 87.5%; /** 14px */
- line-height: 1.285714286em; /** 18px */
- color: @schrift;
- margin: .571428571em 0 .571428571em 1.428571429em; /** 8px 0 8px 20px */
-}
-.form div.checkbox > input.f,
-.form .radiobutton > .f > input.f,
-.form .checkbox > .f > input.f,
-.form .radiobutton > .col2 > .f > input.f,
-.form .checkbox > .col2 > .f > input.f {
- position: absolute;
- margin: .285714286em 0; /** 4px 0 */
-}
-.form div.checkbox > input.error,
-.form .radiobutton > .f > input.error,
-.form .checkbox > .f > input.error {
- /** Wäre möglich -- konnte aber keine CSS-Eigenschaft finden, die sich rot färben ließ: der Firefox hat alles ignoriert! */
-}
-.form div.checkbox:hover > label.f,
-.form .radiobutton > .f:hover > label.f,
-.form .checkbox > .f:hover > label.f,
-.form div.checkbox:focus > label.f,
-.form .radiobutton > .f:focus > label.f,
-.form .checkbox > .f:focus > label.f,
-.form div.checkbox:active > label.f,
-.form .radiobutton > .f:active > label.f,
-.form .checkbox > .f:active > label.f,
-.form .radiobutton > .col2 > .f:hover > label.f,
-.form .checkbox > .col2 > .f:hover > label.f,
-.form .radiobutton > .col2 > .f:focus > label.f,
-.form .checkbox > .col2 > .f:focus > label.f,
-.form .radiobutton > .col2 > .f:active > label.f,
-.form .checkbox > .col2 > .f:active > label.f {
- color: @schrift;
-}
-
-/** Sondereinstellungen für Fehler-Hervorhebungen */
-.form .text > input.error,
-.form .textarea > textarea.error,
-.form .select > select.error,
-.form .file > input.error {
- color: @schrift;
- font-weight: 700;
- border-color: @fehler;
- background-color: @fehlerhell;
-}
-
-
-/** Absende-Buttons */
-ul.buttons,
-ol.buttons {
- margin: 0;
- padding: 0;
- list-style-type: none;
- text-align: right;
-}
-ul.buttons > li.b,
-ol.buttons > li.b {
- display: inline-block;
- margin: 0;
- padding: 0;
-}
-.form .submit {
- text-align: right;
- margin-bottom: .75em; /** 12px */
-}
-.form .submit > input.f,
-.form .submit > a.f,
-a.ln.button {
- display: inline-block;
- font-family: 'PT Sans', Helvetica, Arial, sans-serif;
- font-size: 81.25%; /** 13px */
- letter-spacing: .076923077em; /** 1px */
- line-height: 25px;
- padding:0 6px;
- height: 1.923076923em; /** 25px */
- color: @hintergrund;
- font-weight: 700;
- background-color: @normal;
- border-style: none;
-}
-.form .submit > input.f,
-.form .submit > a.f,
-ul.buttons > li.b,
-ol.buttons > li.b {
- margin: 0 0 0 .615384615em; /** 0 0 0 8px */
-}
-a.ln.button:before {
- content: none;
-}
-.form .submit > input.left,
-.form .submit > a.left,
-a.ln.button.left {
- float: left;
- margin: 0 .923076923em 0 0; /** 0 12px 0 0 */
-}
-.form .submit > input.right,
-.form .submit > a.right,
-a.ln.button.right {
- float: right;
- margin: 0 0 0 .923076923em; /** 0 0 0 12px */
-}
-.form .submit > input.f:hover,
-.form .submit > a.f:hover,
-a.ln.button:hover,
-.form .submit > input.f:focus,
-.form .submit > a.f:focus,
-a.ln.button:focus,
-.form .submit > a.f:active,
-.form .submit > input.f:active,
-a.ln.button:active {
- background-color: @dunkel;
- text-decoration: none;
-}
+++ /dev/null
-#header
-{
- .bpreplay;
-}
-#logo
-{
- display: inline;
- font-size: 400%;
- line-height: 1.2em;
- margin: 0;
- padding: 0 0 0 .230769231em; /* 30px */
- color: @normal;
- border: none;
- position: relative;
- left: -.3em;
-}
-#logo a.l:hover
-{
- color: @dunkler;
- border-style: none;
-}
-#slogan
-{
- display: block;
- color: @normal;
-}
+++ /dev/null
-.marginal h1
-{
- font-size: 125%; /** 20 px */
- line-height: 1em; /** 20px */
- margin: 1.5em 0 .5em 0; /** 30px 0 10px 0 */
- padding: 0;
-}
+++ /dev/null
-h2.nav
-{
-}
-#menu,
-#submenu
-{
- .bpreplay;
- color: @normal;
- margin: .5em 0 1.5em 0;
- padding: 0.25em 0.25em 0.25em 1.5em;
- border: 1px solid @normal;
-}
-#menu li.m,
-#submenu li.s
-{
- padding: .2em;
-}
-#menu li.m a.m,
-#submenu li.s a.s
-{
- color: @normal;
-}
-#menu li.m a.m:hover,
-#submenu li.s a.s:hover
-{
- color: @nochdunkler;
-}
-#menu li.m strong.m,
-#menu li.m a.m.selected,
-#menu li.m a.m:focus,
-#menu li.m a.m:active,
-#submenu li.s strong.s,
-#submenu li.s a.s.selected,
-#submenu li.s a.s:focus,
-#submenu li.s a.s:active
-{
- color: @dunkler;
-}
-
-#breadcrumb
-{
- .bpreplay;
- color: @normal;
-}
-#breadcrumb strong.b.title
-{
- float: left;
- margin: 0 0.5em 0 0;
-}
-#breadcrumb ol.b
-{
- display: inline;
- margin: 0;
- padding: 0;
- list-style-type: none;
-}
-#breadcrumb ol.b li.b
-{
- float: left;
- margin: 0 0 0.5em 0.5em;
- padding: 0;
-}
-#breadcrumb ol.b li.b:before
-{
- content: '> ';
-}
-#breadcrumb ol.b li.b:first-child:before
-{
- content: '';
-}
-#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;
-}
-#breadcrumb a.hide
-{
- position: static;
-}
-#breadcrumb a.hide:before
-{
- content: "";
- display: table;
- clear: both;
-}
-#breadcrumb hr.b
-{
- clear: both;
-}
-
+++ /dev/null
-/* Pretty printing styles. Used with prettify.js. */
-/* Vim sunburst theme by David Leibovic */
-
-pre .str, code .str { color: #65B042; } /* string - green */
-pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
-pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
-pre .typ, code .typ { color: #89bdff; } /* type - light blue */
-pre .lit, code .lit { color: #3387CC; } /* literal - blue */
-pre .pun, code .pun { color: #fff; } /* punctuation - white */
-pre .pln, code .pln { color: #fff; } /* plaintext - white */
-pre .tag, code .tag { color: #89bdff; } /* html/xml tag - light blue */
-pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name - khaki */
-pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */
-pre .dec, code .dec { color: #3387CC; } /* decimal - blue */
-
-pre.prettyprint, code.prettyprint {
- background-color: #000;
- overflow-x: scroll;
-}
-
-pre.prettyprint {
- width: 95%;
- margin: 1em auto;
- padding: 1em;
- white-space: pre;
-}
-
-
-/* Specify class=linenums on a pre to get line numbering */
-ol.linenums {
- margin-top: 0;
- margin-bottom: 0;
- color: #AEAEAE;
-} /* IE indents via margin-left */
-
-li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9
-{
- list-style-type: decimal;
-}
+++ /dev/null
-/** Typografische Grundeinstellungen ******************************************/
-
-body
-{
- .droid;
- letter-spacing: 0;
- line-height: 1.5em;
- padding: .5em 1em 1em 1.5em;
- background-color: @hintergrund;
-}
-h1, h2, h3, h4, h5, h6
-{
- .bpreplay;
- color: @schrifthell;
- line-height: 1.25em;
- margin: 1.125em 0 .25em 0; /** Margin Top für h1 auf Marginalspalte abgestimmt! */
-}
-h1
-{
- font-size: 137.5%; /** 22 px */
- color: @normal;
- padding: 0 0 .25em 0; /** 0 0 5px 0 */
-}
-h2
-{
- font-size: 125%; /** 20 px */
-}
-h3
-{
- font-size: 112.5%; /** 18px */
-}
-h4
-{
- /** font-size: 16px */
-}
-h1 a, h2 a, h3 a, h4 a
-{
- color: @normal;
- border-style: none;
-}
-h1 a:hover,
-h2 a:hover,
-h3 a:hover,
-h4 a:hover
-{
- color: @dunkler;
- border-bottom: 1px solid @dunkler;
-}
-h1 a:focus,
-h2 a:focus,
-h3 a:focus,
-h4 a:focus,
-h1 a:active,
-h2 a:active,
-h3 a:active,
-h4 a:active
-{
- color: @dunkel;
- border-bottom: 1px solid @dunkel;
-}
-p
-{
- margin: .5em 0 .5em 0;
-}
-ul, ol
-{
- margin: .25em 0 .25em 0; /** 4px 0 4px 0 */
- padding: 0 0 0 1em; /** 0 0 0 16px */
-}
-ul
-{
- list-style-type: square;
-}
-ol
-{
- list-style-type: decimal;
- padding-left: 1.1875em; /** 19px */
-}
-li
-{
- padding-bottom: .25em; /** 2px */
-}
-table, th, td
-{
- padding: .1em .2em;
-}
-th, td
-{
- font-size: 87.5%; /** 14px */
- line-height: 1.5em; /** 20px */
- border: .071428571em solid #000; /** 1px */
- padding: .214285714em .5em; /** 3px 7px */
-}
-pre
-{
- line-height: 1.2em;
-}
-code
-{
- font-size: 120%; /** Otherwise, the font-size will be 75%, though not specified so anywhere!! */
- line-height: 1.2em;
-}
-hr
-{
- border: none;
- border-top: 2px solid @normal;
- background-color: @normal;
- height: 1px;
- margin: 1em 0 1em 0;
-}
-a
-{
- color: @dunkler;
- border-bottom: 1px dashed @dunkler;
-}
-a:hover
-{
- color: @nochdunkler;
- border-bottom: 1px solid @nochdunkler;
-}
-a:focus,
-a:active
-{
- color: @dunkler;
- border-bottom: 1px solid @dunkler;
-}
-a:visited
-{
- border-bottom: 1px dotted @nochdunkler;
-}
-
-h2 a,
-h3 a,
-h4 a
-{
- color: @schrifthell;
-}
-h2 a:focus,
-h2 a:active,
-h3 a:focus,
-h3 a:active,
-h4 a:focus,
-h4 a:active
-{
- color: @normal;
- border-bottom: 1px solid @normal;
-}
-
-
-.logo
-{
- .bpreplay;
- color: @normal;
-}
+++ /dev/null
-/** Allgemein nützliche Marker-Klassen */
-
-
-/** Micro Clearfix-Hack nach http://nicolasgallagher.com/micro-clearfix-hack/ */
-
-.cf:before,
-.cf:after {
- content: "";
- display: table;
-}
-.cf:after {
- clear:both;
-}
-
-/** Hide helpful content in a way, that it is still accessible to screen-readers */
-.hide{
- position: absolute;
- left: -99999999em;
-}
-
-
-/** Symbol-Font für Vektor-Icons */
-
-.symbols
-{
- font-family: 'symbols';
-}
-
-a.img
-{
- border: none;
-}
+++ /dev/null
-body {} /** cssmin fails with an empty file! */
+++ /dev/null
-@import 'variables.less';
-@import 'screen/head.less';
-@import 'screen/menu.less';
-@import 'screen/footer-sticky.less';
-@import 'screen/wip.less';
-@import 'screen/packs.less';
-
-@import 'phone/typo.less';
-@import 'phone/layout.less';
-@import 'phone/head.less';
-@import 'phone/menu.less';
-@import 'phone/footer.less';
-@import 'phone/packs.less';
-@import 'phone/404.less';
+++ /dev/null
-.withbackground .content
-{
- position: relative;
-}
-.withbackground .content > .main
-{
- z-index: 1;
-}
-.withbackground .content > .marginal
-{
- position: relative;
- z-index: 3;
- border-top: .142857143em solid @hintergrund; /** 2px */
-}
-#bs1
-{
- top: -3%;
-}
-#bs2
-{
- font-size: 2000%;
- top: 0%;
- right: 3%;
-}
-#bs4
-{
- top: 5%;
- left: 57%;
- @media (max-width: 410px)
- {
- display: none;
- }
-}
-#bs6
-{
- font-size: 1700%;
- bottom: -10%;
- left: 45%;
-}
-#bs7
-{
- top: 20%;
- left: 2%;
- @media (max-width: 410px)
- {
- top: 34%;
- left: 30%;
- }
-}
-#bs5,
-#bs8
-{
- display: none;
-}
-#bs9
-{
- top: 20%;
- @media (max-width: 410px)
- {
- display: none;
- }
-}
+++ /dev/null
-#footer > #footerlinks
-{
- position: static;
- border-style: none;
-}
-#footer > #footerlinks > li.about
-{
- display: none;
-}
-#footer > #footerlinks > li.f
-{
- color: @hintergrund;
- line-height: 1em;
- margin: 0 1em 0 0;
- padding: 0 0 .5em 0;
-}
-#footer > #footerlinks > li.f > a.f
-{
- color: @hintergrund;
- border-color: @hintergrund;
-}
-#footer > #footerlinks > li#copyright
-{
- position: static;
- float: right;
- width: auto;
- font-size: 137.5%;
- margin: 0;
- @media (max-width: 229px)
- {
- color: @schrift;
- flow: none;
- width: 100%;
- }
-}
+++ /dev/null
-@media (max-width: 410px)
-{
- #slogan
- {
- color: @normal;
- }
-}
+++ /dev/null
-/** Seite gesamt (Abmessungen, Aussenabstände etc.) */
-
-body
-{
- font-size: 87.5%; /** 14px */
- padding: 0;
-}
-#page
-{
- position: relative;
- overflow: hidden;
-}
-
-
-/** Seitenaufteilung mit/ohne Menü */
-
-.content > .main
-{
- margin: 0 1em 0 2.5em;
-}
-.menu .content > .main
-{
- border-top-style: none;
-}
-
-
-
-/** Seitenkopf positionieren */
-
-#header
-{
- margin: .5em 1em 1em 1.25em;
-}
-#header > hr.h
-{
- display: none;
-}
-
-
-/** Bereichsauswahl positionieren und stylen */
-
-#nav > hr.n
-{
- display: none;
-}
-#menu
-{
- border-style: none;
- font-size: 125%;
- line-height: 1.5em;
-}
-#menu
-{
- font-size: 150%;
- border-bottom: .125em solid @hintergrund;
- margin-top: 0;
- padding: .25em .25em 1em 1.5em;
-}
-#menu > li.m
-{
- float: left;
- @media (max-width: 359px)
- {
- float: none;
- }
- list-style-type: none;
- padding: .25em 1em 0 0;
-}
-#menu > li.m > a.m
-{
- color: @dunkel;
-}
-#menu > li.m > strong.m
-{
- color: @hintergrund;
- border-bottom: .0625em solid @hintergrund;
-}
-#menu > li.m > a.m:hover,
-#menu > li.m > a.m:focus,
-#menu > li.m > a.m:active
-{
- color: @dunkler;
- border-bottom: .0625em solid @dunkler;
-}
-#menu > li.m > a.m.selected
-{
- color: @hintergrund;
- border-bottom: .0625em dashed @hintergrund;
-}
-#menu > li.m > a.m.selected:hover,
-#menu > li.m > a.m.selected:focus,
-#menu > li.m > a.m.selected:active
-{
- border-style: solid;
-}
-
-
-/** Navigations-Sprunglink reaktivieren und stylen */
-
-#breadcrumb
-{
- position: absolute;
- top: .8em;
- right: 1.5em;
-}
-#breadcrumb > strong.b,
-#breadcrumb > ol.b,
-#breadcrumb > hr.b
-{
- display: none;
-}
-#breadcrumb > a.hide
-{
- display: block;
- overflow: hidden;
- width: 3.5em;
- height: 3em;
- line-height: 3em;
- color: @normal;
- border-style: none;
-}
-#breadcrumb > a.hide:before
-{
- content: "";
- font-family: 'symbols';
- font-size: 378%; /** Vielfaches von 14px */
- padding: 0 0 1em 0;
- font-weight: normal;
-}
-#breadcrumb > a.hide:hover,
-#breadcrumb > a.hide:focus,
-#breadcrumb > a.hide:active
-{
- color: @dunkler;
-}
-
-
-/** Inhalts-Sprunglink reaktivieren und stylen */
-
-#nav:target
-{
- position: absolute;
- top: 0;
- right: 0;
- left: 0;
- padding: .6em 1em 999em 2.5em;
- margin-bottom: -993em;
- z-index: 5;
- background-color: @heller;
- #menu
- {
- padding-top: 0;
- padding-bottom: .75em;
- }
- > a.hide
- {
- position: absolute;
- left: auto;
- top: .8em;
- right: 1.5em;
- display: block;
- overflow: hidden;
- width: 3.5em;
- height: 3em;
- line-height: 3em;
- color: @hintergrund;
- border-style: none;
- }
- > a.hide:before
- {
- content: "";
- font-family: 'symbols';
- font-size: 378%; /** Vielfaches von 14px */
- padding: 0 0 1em 0;
- margin: 0 1em 0 0;
- }
- > a.hide:hover,
- > a.hide:focus,
- > a.hide:active
- {
- color: @dunkler;
- }
-}
-
-
-/** Footer positionieren */
-
-#footer
-{
- padding: 0 1em .5em 2.5em;
- background-color: @heller;
-}
-#footer > hr.f
-{
- border-color: @hintergrund;
-}
-
-
-/** Marginal-Inhalte anpassen... */
-
-.marginal h1,
-.marginal h2,
-.marginal h3,
-.marginal h4
-{
- color: @hintergrund;
-}
-
-
-/** Faux-Column-Hack für Marginalinhalte */
-
-.marginal
-{
- margin-top: 4em;
- margin-bottom: -993em;
- padding: 1em 1em 999em 2.5em;
- background-color: @heller;
-}
+++ /dev/null
-#submenu
-{
- border-style: none;
- font-size: 125%;
- line-height: 1.5em;
-}
+++ /dev/null
-.pack > .p.left,
-.pack > .p.right,
-.pack.bg > .p.left,
-.pack.bg > .p.right,
-.single,
-.single.bg
-{
- width: auto;
- padding-bottom: 1.5em;
- margin: 0 0 1.5em 0;
-}
+++ /dev/null
-h1
-{
- font-size: 150%; /** 24 px */
-}
+++ /dev/null
-@import 'variables.less';
-
-#breadcrumb
-{
- .droid;
- color: @schrift;
- font-weight: normal;
-}
-#breadcrumb strong.b
-{
- font-weight: normal;
-}
-#breadcrumb ol.b li.b a.b,
-#breadcrumb ol.b li.b strong.b
-{
- color: @schrift;
- border-style: none;
-}
-#breadcrumb a.hide
-{
- display: none;
-}
-#breadcrumb hr.b
-{
- display: none;
-}
-@import 'print/typo.less';
-@import 'print/layout.less';
-@import 'print/head.less';
-@import 'print/prettify.less';
+++ /dev/null
-#logo
-{
- padding-left: .0625em;
-}
-#slogan
-{
- display: inline-block;
-}
+++ /dev/null
-body
-{
- font-size: 75%; /** 12px */
-}
-#header hr.h
-{
- margin: .5em 0;
-}
-.content
-{
- clear: both;
-}
-.marginal
-{
- display: none;
-}
-#breadcrumb
-{
- .droid;
- color: @schrift;
- font-weight: normal;
-}
-#breadcrumb strong.b
-{
- font-weight: normal;
-}
-#breadcrumb ol.b li.b a.b,
-#breadcrumb ol.b li.b strong.b
-{
- color: @schrift;
- border-style: none;
-}
-#breadcrumb a.hide
-{
- display: none;
-}
-#breadcrumb hr.b
-{
- display: none;
-}
-#nav
-{
- display: none;
-}
-#footerlinks li.f
-{
- display: none;
-}
-#footerlinks li#copyright
-{
- .droid;
- font-size: 100%;
- display: block;
-}
+++ /dev/null
-/* Pretty printing styles. Used with prettify.js. */
-pre .str, code .str { color: #060; }
-pre .kwd, code .kwd { color: #006; font-weight: bold; }
-pre .com, code .com { color: #600; font-style: italic; }
-pre .typ, code .typ { color: #404; font-weight: bold; }
-pre .lit, code .lit { color: #044; }
-pre .pun, code .pun { color: #440; }
-pre .pln, code .pln { color: #000; }
-pre .tag, code .tag { color: #006; font-weight: bold; }
-pre .atn, code .atn { color: #404; }
-pre .atv, code .atv { color: #060; }
+++ /dev/null
-a
-{
- color: @schrift;
- border-style: none;
-}
+++ /dev/null
-@import 'variables.less';
-@import 'screen/head.less';
-@import 'screen/menu.less';
-@import 'screen/footer-sticky.less';
-@import 'screen/wip.less';
-@import 'screen/packs.less';
-
-@media (min-width: (@minscreen))
-{
- @import 'screen/layout.less';
- @import 'screen/footer.less';
- @media (max-width: (@maxtablet))
- {
- @import 'tablet/typo.less';
- @import 'tablet/layout.less';
- @import 'tablet/menu.less';
- @import 'tablet/marginal.less';
- @import 'tablet/footer.less';
- }
-}
-@media (min-width: (@mindesktop))
-{
- @import 'screen/faux-column.less';
- @import 'screen/marginal.less';
- @import 'screen/content.less';
- @media (max-width: 1079px)
- {
- @import 'screen/onecolumn.less';
- }
-}
-
-@media (max-width: (@maxtablet))
-{
- @import 'tablet/head.less';
- @import 'tablet/404.less';
-}
-
-@media (max-width: (@maxphone))
-{
- @import 'phone/typo.less';
- @import 'phone/layout.less';
- @import 'phone/head.less';
- @import 'phone/menu.less';
- @import 'phone/footer.less';
- @import 'phone/packs.less';
- @import 'phone/404.less';
-}
-
-@media (max-width: (@maxtiny))
-{
- @import 'tiny/layout.less';
- @import 'tiny/404.less';
-}
+++ /dev/null
-.mcontent
-{
- position: relative;
- padding: 0 24.375em 0 0;
-}
-.mcontent > .mmain
-{
- float: left;
- min-height: 1em;
- position: relative;
- width: 100%;
- border-right: .125em solid @normal;
-}
-.mcontent > .mmarginal
-{
- float: left;
- margin: 0 -27em 0 -.125em;
- padding: 0 2em 1.0625em 2em;
- position: relative;
- width: 20.375em;
- border-left: .125em solid @normal;
-}
-.mcontent > .mmain > *
-{
- margin-right: 5%;
-}
+++ /dev/null
-/** Faux-Column-Hack-Eigengewächs für die Marginalspalte */
-
-.menu #page,
-.nomenu #page
-{
- max-width: 38em; /** 608px + 390px (Marginalspalte) = ca. 1000px */
- border-right: 24.375em solid @heller;
-}
-.nomenu #page
-{
- border-right-color: @sehrhell;
-}
-.menu .content,
-.nomenu .content
-{
- margin-right: -24.375em;
-}
-.menu #header,
-.nomenu #header
-{
- margin-right: -24.375em;
- background-color: @hintergrund;
-}
-.menu #breadcrumb,
-.nomenu #breadcrumb
-{
- right: -24.375em; /** Weil der Breadcrumb sonst an der Faux-Column umbricht! */
-}
-.menu #footer,
-.nomenu #footer
-{
- margin-right: -24.375em;
- background-color: @hintergrund;
-}
+++ /dev/null
-/** Make the footer sticky */
-html, body
-{
- height: 100%;
-}
-#page
-{
- position: relative;
- min-height: 100%;
-}
-#footer
-{
- position: absolute;
- left: 0;
- right: 0;
- bottom: 0;
-}
+++ /dev/null
-#footerlinks
-{
- border-top: 1.25em solid @normal; /** 20px */
-}
-#footerlinks > li.f
-{
- line-height: .6666666667em; /* 20px */
- display: inline-block;
- float: none;
- margin: .5em 1em 0 0;
- color: @normal;
- vertical-align: top;
-}
-#footerlinks > li#copyright
-{
- position: absolute;
- float: none;
- width: auto;
- 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
-#logo
-{
- display: inline-block;
- font-size: 812.5%; /* 130px */
- padding: 0;
- line-height: 1em;
- text-shadow: .092307692em .046153846em 0 @hintergrund; /** 12px 6px */
- z-index: 3;
- left: auto;
-}
-#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: 9em; /* 270px */
- position: relative;
- z-index: 2;
- top: -1.3em; /* 39px */
- text-align: right;
- overflow: hidden;
-}
-#slogan > strong{
- display: inline-block;
- position: relative;
- top: -.2em; /* -6px */
-}
+++ /dev/null
-/** Seite gesamt (Abmessungen, Aussenabstände etc.) */
-
-body
-{
- padding: 0;
- overflow-y: scroll; /** Die vertikale Scroll-Leiste stets anzeigen */
-}
-#page
-{
- margin: 0 auto; /** Seiteninhalte zentrieren, wenn max-width des Inhalts (s.u.) erreicht ist */
- max-width: 62.375em; /** 608px + 390px (Marginalspalte) = ca. 1000px (muss zu Wergen in faux-columns.less passen!!) */
-}
-
-/** Seitenaufteilung mit Menü (Zweispaltig) */
-
-body
-{
- padding: 0 3em 0 5em;
-}
-.content
-{
- position: relative;
- padding: 0 0 7.1875em 0; /** Unten: 115px (gemessene Gesamthöhe des Footers - mit Abstand und Margin) */
-}
-.menu .content,
-.nomenu .content
-{
- padding-right: 27em;
-}
-.content > .main
-{
- min-height: 1em;
- position: relative;
- width: 100%;
-}
-.menu .content > .main,
-.nomenu .content > .main
-{
- float: left;
-}
-.content > .marginal
-{
- position: relative;
- background-color: @heller;
-}
-.menu .content > .marginal,
-.nomenu .content > .marginal
-{
- float: left;
- margin: 0 -27em 0 2.625em;
- padding: 0 2em 1.0625em 2em;
- width: 20.375em;
-}
-
-/** Anpassungen für Seiten ohne Menü */
-
-.nomenu .content > .marginal
-{
- background-color: @sehrhell;
-}
-
-/** Anpassungen für einspaltige Seiten */
-
-.onecolumn .content > .marginal
-{
- margin-top: 4em;
- background-color: transparent;
-}
-
-/** Seitenkopf positionieren */
-
-#header
-{
- margin-left: -2.125em;
- padding: 1em 0;
-}
-#header > hr.h
-{
- display: none;
-}
-
-
-/** Bereichsauswahl positionieren und stylen */
-
-.onecolumn #nav
-{
- position: absolute;
- top: 0;
- right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */
- width: 100%;
-}
-
-#nav > hr.n
-{
- display: none;
-}
-#nav
-{
- position: relative;
- top: auto;
- right: auto;
- width: 22.375em; /** 358px = 326px + 32px*/
-}
-#menu
-{
- position: relative;
- width: 200%;
- top: -8em; /** 136px */
- right: 100%;
- text-align: right;
- list-style-type: none;
- margin: 0 0 -2.125em 0; /** 0 0 -34px 0 */
- padding: 0;
- border-style: none;
-}
-.onecolumn #menu
-{
- top: -15.5625em; /** -249px -- warum auch immer... */
-}
-#menu > li.m
-{
- display: inline-block;
- padding: 0 0 0 4em;
-}
-#menu > li.m > .m
-{
- 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.selected
-{
- color: @normal;
-}
-#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;
-}
-
-
-/** Breadcrump positionieren */
-
-#breadcrumb
-{
- position: absolute;
- top: 8.375em;
- left: 6.9em;
- z-index: 3;
-}
-#breadcrumb > a.hide
-{
- position: absolute;
-}
-#breadcrumb > hr.b
-{
- display: none;
-}
-
-
-/** Footer positionieren */
-
-#footer
-{
- padding: 2em 0;
-}
-.onecolumn #footer
-{
- background-color: @hintergrund;
-}
-#footer > hr.f
-{
- display: none;
-}
+++ /dev/null
-.menu .content > .marginal h1,
-.menu .content > .marginal h2,
-.menu .content > .marginal h3,
-.menu .content > .marginal h4
-{
- color: @hintergrund;
-}
+++ /dev/null
-#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 */
- border: none;
-}
-#nav > h2.nav.submenu:before
-{
- content: 'V ';
- color: @hintergrund;
- 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-size: 125%; /** 20 px */
- list-style-type: none;
- margin: 1em 0 4em 0;
- padding: 0 0 0 1.65em; /** 0 0 0 33px */
- border-style: none;
-}
-#submenu ul.s
-{
- margin: 1.5em 0 0 0; /** 24px 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.s
-{
- color: @dunkler;
-}
-#submenu li.s > a.s.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
-.pack > .p.left,
-.pack > .p.right,
-.pack.bg > .p.left,
-.pack.bg > .p.right,
-.single,
-.single.bg
-{
- width: auto;
- padding-bottom: 1.5em;
- margin: 0 0 1.5em 0;
-}
+++ /dev/null
-.pack
-{
- overflow: hidden;
-}
-.pack > .p.left,
-.pack > .p.right
-{
- width: 42%;
- padding: 0 3% 999em 3%;
- margin: 0 0 -998em 0;
-}
-.pack.bg > .p.left,
-.pack.bg > .p.right
-{
- background-color: @sehrhell;
-}
-.pack > .p.left
-{
- float: left;
-}
-.pack > .p.right
-{
- float: right;
-}
-.pack > .p img.p
-{
- width: 91.9118%;
-}
-.single
-{
- padding: 0 3% 1em 3%;
- margin: 3% 0;
-}
-.single.bg
-{
- background-color: @sehrhell;
-}
+++ /dev/null
-/** Pages under construction... */
-.wip,
-.wip h1,
-.wip h2,
-.wip h3,
-.wip h4,
-.wip h5,
-.wip h6,
-.wip a
-{
- color: rgba(128, 128, 128, 0);
- text-decoration: none;
- border-color: rgba(128, 128, 128, 0);
- text-shadow: 0 0 6px #404040;
-}
-.wip
-{
- position: relative;
-}
-.wip img.w
-{
- margin-top: 30%;
- position: absolute;
- width: 100%;
-}
+++ /dev/null
-@import 'variables.less';
-
-@import 'screen/layout.less';
-@import 'screen/content.less';
+++ /dev/null
-@import 'variables.less';
-@import 'screen/head.less';
-@import 'screen/menu.less';
-
-@import 'screen/layout.less';
+++ /dev/null
-@import 'variables.less';
-@import 'screen/head.less';
-@import 'screen/menu.less';
-@import 'screen/footer-sticky.less';
-@import 'screen/wip.less';
-@import 'screen/packs.less';
-
- @import 'screen/layout.less';
- @import 'screen/footer.less';
- @import 'tablet/typo.less';
- @import 'tablet/layout.less';
- @import 'tablet/menu.less';
- @import 'tablet/marginal.less';
- @import 'tablet/footer.less';
- @import 'screen/onecolumn.less';
- @import 'tablet/head.less';
- @import 'tablet/404.less';
+++ /dev/null
-.withbackground .content
-{
- position: relative;
- top: auto;
- bottom: auto;
- left: auto;
- rigth: auto;
-}
-#bs3
-{
- display: none;
-}
-#bs5
-{
- left: auto;
- right: 13%;
-}
-#bs7
-{
- bottom: 21%;
-}
-#bs8
-{
- display: none;
-}
+++ /dev/null
-.menu #footer > #footerlinks
-{
- position: static;
- border-style: none;
- margin: 3.75em 0 0 2em;
-}
-.menu #footer > #footerlinks > li.f
-{
- line-height: 1em;
- display: block;
- margin: 0 0 .25em 0;
- color: @hintergrund;
-}
-.menu #footer > #footerlinks > li#copyright
-{
- line-height: 1em;
- font-size: 137.5%;
- top: auto;
- bottom: 0;
- left: 0;
- right: 0;
- padding: 0 2.18181818em 1.5em; /* ? 3*16px ? */
- @media (max-width: (@maxsmalltablet))
- {
- padding-right: 1.45454545em;
- padding-bottom: 1em;
- }
- @media (max-width: (@maxsmallertablet))
- {
- padding-right: .72727272em;
- padding-bottom: .5em;
- }
- background-color: @heller;
- text-align: right;
-}
-.menu #footer > #footerlinks a.f
-{
- color: @hintergrund;
- border-color: @hintergrund;
-}
-.menu #footer > #footerlinks a.f:hover
-{
- color: @hintergrund;
- border-color: @hintergrund;
- border-style: solid;
-}
-
-
-.nomenu #footer > #footerlinks,
-.onecolumn #footer > #footerlinks
-{
- position: static;
- margin: -.125em;
- padding-top: 1.5em;
- @media (max-width: (@maxsmalltablet))
- {
- padding-top: 1em;
- }
- @media (max-width: (@maxsmallertablet))
- {
- padding-top: .5em;
- }
- border-top: .125em solid @hintergrund;
- > li.f
- {
- line-height: 1em;
- margin: 0 1em 0 0;
- padding: 0;
- }
- li.f > a.f
- {
- color: @hintergrund;
- border-color: @hintergrund;
- }
- li#copyright
- {
- position: static;
- float: right;
- font-size: 137.5%;
- margin: 0;
- }
-}
+++ /dev/null
-@media (max-width: (@maxsmalltablet))
-{
- #logo
- {
- font-size: 650%; /* 104px */
- }
- #slogan
- {
- font-size: 150%; /** 24px */
- }
-}
-
-@media (max-width: (@maxsmallertablet))
-{
- #logo
- {
- font-size: 487.5%; /* 78px */
- }
- #slogan
- {
- font-size: 112.5%; /** 18px */
- }
-}
-
+++ /dev/null
-/** Seite gesamt (Abmessungen, Aussenabstände etc.) */
-
-body
-{
- padding: 0;
-}
-#page
-{
- overflow: hidden;
-}
-.nomenu #page
-{
- padding: 0;
-}
-
-
-/** Seitenaufteilung mit/ohne Menü für Tablets optimieren */
-
-.menu .content
-{
- padding: 0;
-}
-.nomenu .content
-{
- padding: 0 0 5em 0;
- @media (max-width: (@maxsmalltablet))
- {
- padding-bottom: 4em;
- }
- @media (max-width: (@maxsmallertablet))
- {
- padding-bottom: 3.25em;
- }
-}
-.content.cf:before,
-.content.cf:after
-{
- clear: none;
- content: none;
- display: inline;
-}
-.menu .content > .main,
-.nomenu .content > .main,
-.onecolumn .content > .main
-{
- float: none;
- width: auto;
- padding: 0 3em 0 5em;
- @media (max-width: (@maxsmalltablet))
- {
- padding: 0 2em 0 3em;
- }
- @media (max-width: (@maxsmallertablet))
- {
- padding: 0 1em 0 2.5em;
- }
- /** Die 1px-Rahmen triggern, dass das erste Margin den Footer aufschiebt.
- Bei einem Wert von 0 ragt dieses Margin dann einfach aus dem Footer
- heraus... */
- border-top: 1px solid @hintergrund;
- border-bottom: 1px solid @hintergrund;
-}
-.menu .content > .marginal,
-.nomenu .content > .marginal,
-.onecolumn .content > .marginal
-{
- position: static;
- width: 100%;
-}
-.menu .content > .marginal
-{
- margin: 3em 0 -994em -15em;
- padding: 2em 0 999em 0;
-}
-.nomenu .content > .marginal
-{
- margin: 3em 0 -994em 0;
- padding: 0 0 999em 0;
- background-color: transparent;
-}
-.onecolumn .content > .marginal
-{
- margin: 6.5em 0 -1001.175em 0;
- padding: 0 0 999em 0;
- background-color: transparent;
-}
-
-
-/** Seitenkopf positionieren */
-
-#header
-{
- padding: 1em 3em 2em 5em;
- @media (max-width: (@maxsmalltablet))
- {
- margin-left: -1.5em;
- padding: .5em 2em 2em 3em;
- }
- @media (max-width: (@maxsmallertablet))
- {
- margin-left: -1.2em;
- padding: 1em 1em 2em 2.5em;
- }
-}
-
-
-/** Bereichsauswahl positionieren */
-
-.menu #nav
-{
- position: static;
- border-right: .125em solid @hintergrund;
- margin-left: 20em;
- @media (max-width: (@maxsmalltablet))
- {
- margin-left: 18.5em;
- }
- @media (max-width: (@maxsmallertablet))
- {
- margin-left: 17.5em;
- #menu > li.about
- {
- display: inline-block;
- }
- }
- width: auto;
-}
-.nomenu #nav
-{
- position: absolute;
- top: 0;
- right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */
- width: 100%;
-}
-
-.menu #menu,
-.nomenu #menu,
-.onecolumn #menu
-{
- position: absolute;
- width: auto;
- top: -9em;
- right: 3em;
- @media (max-width: (@maxsmalltablet))
- {
- top: -7.7em;
- right: 2em;
- }
- @media (max-width: (@maxsmallertablet))
- {
- top: -6.5em;
- right: 1em;
- }
-}
-#menu > li.about
-{
- display: none;
-}
-#menu > li.m
-{
- @media (max-width: (@maxsmalltablet))
- {
- padding: 0 0 0 3em;
- }
- @media (max-width: (@maxsmallertablet))
- {
- padding: 0 0 0 2em;
- }
-}
-#menu > li.m > .m
-{
- @media (max-width: (@maxsmalltablet))
- {
- font-size: 200%; /* 32px */
- }
- @media (max-width: (@maxsmallertablet))
- {
- font-size: 150%; /* 24px */
- }
-}
-#menu > li.m > a.m:hover:before,
-#menu > li.m > a.m.selected:before,
-#menu > li.m > strong.m:before
-{
- @media (max-width: (@maxsmalltablet))
- {
- content: '> ';
- margin-left: -.95em;
- }
- @media (max-width: (@maxsmallertablet))
- {
- }
-}
-
-
-/** Footer positionieren */
-
-.menu #footer
-{
- position: static;
- float: right;
- margin: 3em 0 -999em -15em;
- padding: 0 0 999em 0;
- width: 15em;
- background-color: @heller;
-}
-.nomenu #footer,
-.onecolumn #footer
-{
- padding: 0 3em 1.5em 5em;
- @media (max-width: (@maxsmalltablet))
- {
- padding: 0 2em 1em 3em;
- }
- @media (max-width: (@maxsmallertablet))
- {
- padding: 0 1em .75em 2.5em;
- }
- background-color: @heller;
- border-style: none;
-}
-
-
-/** Breadcrump positionieren */
-
-.menu #breadcrumb,
-.nomenu #breadcrumb,
-.onecolumn #breadcrumb
-{
- left: 11.9em;
- right: 3em;
- @media (max-width: (@maxsmalltablet))
- {
- font-size: 87.5%; /* 14px */
- top: 7.2em;
- left: 9.8em;
- }
- @media (max-width: (@maxsmallertablet))
- {
- top: 5.8em;
- left: 7em;
- }
-}
-
-
-/** Faux-Column-Hack für Marginalinhalte */
-
-.nomenu .content > .marginal aside.m,
-.onecolumn .content > .marginal aside.m
-{
- margin: 3.5em 0 -999em 0;
- padding: 2em 3em 995em 5em;
- background-color: @heller;
- position: relative;
- top: -4.5em;
- @media (max-width: (@maxsmalltablet))
- {
- padding-left: 3em;
- padding-right: 2em;
- }
- @media (max-width: (@maxsmallertablet))
- {
- padding-left: 2.5em;
- padding-right: 1em;
- }
-}
-.menu .content > .marginal > aside.m
-{
- margin: 0 -12em 1em 20em;
- @media (max-width: (@maxsmalltablet))
- {
- margin-left: 18.5em;
- margin-right: -13em;
- }
- @media (max-width: (@maxsmallertablet))
- {
- margin-left: 17.5em;
- margin-right: -14em;
- }
-}
+++ /dev/null
-.nomenu .content > .marginal h1,
-.onecolumn .content > .marginal h1,
-.nomenu .content > .marginal h2,
-.onecolumn .content > .marginal h2,
-.nomenu .content > .marginal h3,
-.onecolumn .content > .marginal h3,
-.nomenu .content > .marginal h4,
-.onecolumn .content > .marginal h4
-{
- color: @hintergrund;
-}
+++ /dev/null
-#submenu
-{
- padding-right: 1em;
-}
+++ /dev/null
-@media (max-width: (@maxsmalltablet))
-{
- h1
- {
- font-size: 150%; /** 24 px */
- }
-}
-
+++ /dev/null
-@import 'variables.less';
-@import 'screen/head.less';
-@import 'screen/menu.less';
-@import 'screen/footer-sticky.less';
-@import 'screen/wip.less';
-@import 'screen/packs.less';
-
-@import 'tiny/layout.less';
-@import 'tiny/404.less';
+++ /dev/null
-.withbackground .content > .marginal
-{
- border-top: .166666666666em solid @hintergrund; /** 2px */
-}
-#bs1
-{
- top: -2%;
- left: 57%;
-}
-#bs2,
-#bs6
-{
- display: none;
-}
-#bs7
-{
- top: 32%;
- left: 46%;
-}
+++ /dev/null
-body
-{
- font-size: 75%; /** 12px */
-}
-#header
-{
- margin: .25em .5em 1em 1em;
-}
-#nav:target
-{
- padding-left: 0.5em;
- padding-right: 0.5em;
-}
-#breadcrumb,
-#nav:target > a.hide
-{
- top: .5em;
- right: .5em;
-}
-.content > .main,
-#footer
-{
- margin: 0;
- padding: 0 .5em;
-}
-.content > .marginal
-{
- padding: 1em .5em 999em .5em;
- margin-bottom: -991em;
-}
-
-@media (max-width: 210px)
-{
- #header
- {
- font-size: 75%;
- }
- #nav:target
- {
- padding-top: 0;
- }
- #breadcrumb,
- #nav:target > a.hide
- {
- top: .1em;
- right: .3em;
- }
- #breadcrumb > a.hide:before,
- #nav:target > a.hide:before
- {
- font-size: 300%; /** Vielfaches von 12px */
- }
-}
-@media (max-width: 150px)
-{
- #header
- {
- font-size: 50%;
- }
- #header > hr.h
- {
- display: block;
- }
- #slogan
- {
- display: none;
- }
- #breadcrumb,
- #nav:target > a.hide
- {
- top: .2em;
- }
- #breadcrumb > a.hide:before,
- #nav:target > a.hide:before
- {
- font-size: 264%; /** Vielfaches von 12px */
- }
-}
+++ /dev/null
-/** Farb-Thema */
-
-@normal: #0ACF00;
-@dunkel: #2D9B27;
-@dunkler: #078600;
-@nochdunkler: #077600;
-@hell: #42E73A;
-@heller: #6EE768;
-@sehrhell: #CEF7C8;
-
-@schrift: #000;
-@schrifthell: tint(@schrift, 45%);
-
-@hintergrund: #FFF;
-
-@fehler: #e60000;
-@fehlerhell: tint(@fehler, 70%);
-
-
-/** Bildschirmbreiten für Media-Query */
-
-@minscreen: 580px;
-@mindesktop: 940px;
-@maxtablet: @mindesktop - 1;
-@maxsmalltablet: 800px;
-@maxsmallertablet: 700px;
-@maxphone: 579px;
-@minphone: 300px;
-@maxtiny: 299px;
-
-/** Schriften */
-
-.droid ()
-{
- font-family: 'DroidSerif', 'Times New Roman', 'Palatino Linotype' , serif;
-}
-
-.bpreplay ()
-{
- font-family: 'BPreplay', Helvetica, Arial, sans-serif;
- font-weight: bold;
-}
projects / website / commitdiff