/* lib/css/generic.css -- WebLayout 1.13, (C) 2010-10-15 caugustin.de */




/* ******************************

   Basics

   ****************************** */


/* Basic cleanup ... */

*, table, th, td { margin: 0; padding: 0; font-size: 100%; text-align: left; }
table { border-collapse: collapse; }
td, th { vertical-align: top; }
img, object, table, th, td { border: none; background: transparent; }
@media screen { pre { overflow: auto; } }



/* Body settings ... */

html { height: 100%; margin-bottom: 1px; }
body { overflow-y: scroll;} /* Force right scrollbar */



/* Paged media settings ... */

h1, h2, h3, h4, h5, h6, dt, thead {
	page-break-inside: avoid;
	page-break-after: avoid;
}
.legend, .figcaption, dd {
	page-break-inside: avoid;
	page-break-before: avoid;
}
li, tr, th, td, address, .figure {
	page-break-inside: avoid;
}
hr, div.hr, div.divider, div.space, tfoot {
	page-break-before: avoid;
}




/* ******************************

   Content elements

   ****************************** */

/* Headlines and dividers ... */
h1, h2, h3, h4, h5, h6 { position: relative; }

hr, .hr {
	border: none;
	background: none;
	height: 1em;        /* Change this in custom css! */
	overflow: hidden;
	text-align: center; /* Change this in custom css! */
	line-height: 0px;
	position: relative;
	top: 0.5em;         /* Change this in custom css! */
}
hr:before, .hr:before { content: url(../../custom/media/hr.png); }
hr.break:before,
.hr.break:before    { content: url(../../custom/media/hr.break.png); }
hr.space:before,
.hr.space:before      { content: ''; }

/* Legacy ... */
hr.divider:before,
.hr.divider:before    { content: url(../../custom/media/hr.divider.png); }

/* Lists ... */
ul, ol, li, dl { position: relative; }
dt { font-weight: bold; }

/* List indentations ... */
li { margin-left: 2em; padding-left: 0; }
li.ulChild { margin-left: 16px; } /* MSIE 6 */      /* Change in custom css! */
ul>li      { margin-left: 16px; }                   /* Change in custom css! */

ol>/**/li      { margin-left: 1.5em; }              /* Change in custom css! */

li.olLongChild { margin-left: 2.5em; } /* MSIE 6 */ /* Change in custom css! */
ol.long>li     { margin-left: 2.5em; } /* MSIE 7 */ /* Change in custom css! */
ol.long>/**/li { margin-left: 2em; }                /* Change in custom css! */

ol ol ol li.olChild { margin-left: 3em; } /* MSIE 6 */
ol ol ol>li         { margin-left: 3em; } /* MSIE 7 */
ol ol ol>/**/li     { margin-left: 2.5em; }

/* List-style image settings ... */
li.msieLiActive { list-style-type: none; }
ul>/**/li       { list-style-type: none; }
img.msieLiBefore {
	position: absolute;
	width: auto;  /* Silly MSIE 6! */
	height: auto; /* Silly MSIE 6! */
	left: -16px;        /* Change this in custom css! */
	margin-top: 0.54em; /* Change this in custom css! */
	top: -3px;          /* Change this in custom css! */
}
ul>/**/li:before {
	position: absolute;
	left: -16px;        /* Change this in custom css! */
	margin-top: 0.54em; /* Change this in custom css! */
	top: -3px;          /* Change this in custom css! */
}

/* Pre Gecko 1.9.1/FF 3.5: No :before/:after content positioning ... */
.noBeforeAfterPos ul>/**/li:before { vertical-align: middle; margin-top: 0; }
.noBeforeAfterPos ol>/**/li { text-indent: 0; }
.noBeforeAfterPos ul>/**/li {
	text-indent: -16px; /* Change this in custom css! */
}
.no-contentposition ul>/**/li:before { vertical-align: middle; margin-top: 0; }
.no-contentposition ol>/**/li { text-indent: 0; }
.no-contentposition ul>/**/li {
	text-indent: -16px; /* Change this in custom css! */
}


/* List-style settings ... */
ul>/**/li:before { content: url(../../custom/media/ul.li.1.png); }
ul ul>/**/li:before { content: url(../../custom/media/ul.li.2.png); }
ul ul ul>/**/li:before { content: url(../../custom/media/ul.li.3.png); }
ul ul ul ul>/**/li:before { content: url(../../custom/media/ul.li.4.png); }
ul.linklist>/**/li:before,
ul.links>/**/li:before { content: url(../../custom/media/ul.li.links.png); }
ul.downloads>/**/li:before {
	content: url(../../custom/media/ul.li.downloads.png);
}

ol ol { list-style-type: lower-alpha; }
ol ol ol { list-style-type: upper-roman; }
ol ol ol ol { list-style-type: lower-roman; }
ol.decimal     { list-style-type: decimal !important; }
ol.leadingZero { list-style-type: decimal-leading-zero !important; }
ol.alpha       { list-style-type: upper-alpha !important; }
ol.lowerAlpha  { list-style-type: lower-alpha !important; }
ol.roman       { list-style-type: upper-roman !important; }
ol.lowerRoman  { list-style-type: lower-roman !important; }

/* Nested lists and paragraphs margin and padding reset ... */
ul ul, ul ol, ul dl, ul p,
ol ol, ol ul, ol dl, ol p,
dl ul, dl ol, dl dl, dl p,
ul.wide, ol.wide, dl.wide,
.wide ul li, .wide ul p, .wide ul ul, .wide ul ol, .wide ul dl,
.wide ol li, .wide ol p, .wide ol ul, .wide ol ol, .wide ol dl,
.wide dl dt, .wide dl p, .wide dl ul, .wide dl ol, .wide dl dl {
	margin-top: 0;
	padding-top: 0;
}




/* ******************************

   Media elements

   ****************************** */


img, object { vertical-align: bottom; }
.dummy, .missing { width: 100%; }
img.dummy   { background-color: gray; }
img.missing { background-color: fuchsia; }

.figure p, p.legend, p.figcaption {
	position: relative;
	margin-top: 0;
	padding-top: 0;
}




/* ******************************

   Tables

   ****************************** */


.table { position: relative; }
.table table { width: 100%; }




/* ******************************

   Links

   ****************************** */


a               { color: gray; text-decoration: none; }
a:link          { color: blue; }
a:visited       { color: purple; }
a:link:hover,
a:visited:hover { color: red; }
a:active        { color: orange; }



/* ******************************

   Text markup

   ****************************** */


b, strong  { font-weight: bold; }
i, em, var { font-style: italic; }
.formula   { word-spacing: -0.2em; }
sub {
	font-size: 0.8em;
	line-height: 0;
	vertical-align: -0.225em;
}
sup {
	font-size: 0.8em;
	line-height: 0;
	vertical-align: 0.45em;
}
abbr, acronym {
	font-weight: inherit;
	font-style: inherit;
	text-decoration: inherit;
	text-transform: inherit;
	border-bottom: inherit;
}
abbr, acronym, .num {
	white-space: nowrap;
	word-spacing: -0.2em;
}
.mark, .mark * { background-color: yellow; }
.weak, .weak * { color: gray; }




/* ******************************

   Generic modifiers

   ****************************** */


.nobr      { white-space:   nowrap !important; }
.narrow    { word-spacing: -0.2em  !important; }
.breakable { word-spacing: -0.33em !important; }
.seamless, .seamless * {
	margin: 0 !important;
	padding: 0 !important;
	vertical-align: bottom !important;
}

.near       { padding-top: 0; margin-top: 0 }

.l, .left   { text-align: left !important; }
.c, .center { text-align: center !important; }
.r, .right  { text-align: right !important; }

.t, .top    { vertical-align: top !important; }
.m, .middle { vertical-align: middle !important; }
.b, .bottom { vertical-align: bottom !important; }

.lf, .leftFloat  { float: left !important; }  /* legacy pre 1.08 */
.rf, .rightFloat { float: right !important; } /* legacy pre 1.08 */
.fl, .floatLeft  { float: left !important; }
.fr, .floatRight { float: right !important; }
.cf, .clearFloat { clear: both !important; }
.cl, .clearLeft  { clear: left !important; }
.cr, .clearRight { clear: right !important; }

.scale, .hScale     { width: 100% !important; height: auto !important; }
.vScale             { width: auto !important; height: 100% !important; }
.stretch, .hStretch { width: 100% !important; }
.vStretch           { height: 100% !important; }

.shade  { background-color: #E8E8E8; }
.border { border: 1px solid black; }

.invisible     { visibility: hidden !important; }
.hidden, .hide { display: none !important; }
@media screen  { .print, .hideOnScreen { display: none !important; } }
@media print   { .screen, .hideInPrint  { display: none !important; } }

.avoidPageBreakInside { page-break-inside: avoid !important; }
.avoidPageBreakBefore { page-break-before: avoid !important; }
.avoidPageBreakAfter  { page-break-after: avoid !important; }
.pageBreakBefore      { page-break-before: always !important; }
.pageBreakAfter       { page-break-after: always !important; }





/* ******************************

   Layout elements

   ****************************** */


.aside {
	float: right;
	width: 28%;
	margin-right: -31%;
}
.block, .full, .cols { clear: both; position: relative; }
.block:before, .block:after,
.full:before, .full:after,
.cols:before, .cols:after {
	content: "."; display: block; height: 0; visibility: hidden; clear: both;
}
.full {
	width: 134.6%;
	margin-right: -34.6%;
}
.cols { margin-right: -6%; }
.col, .mainCol, .marginCol {
	float: left;
	position: relative;
	margin-right: 4%;
}
.full .mainCol, .full .marginCol {
	margin-right: 2.9%;
}

.colLayout td.leftmost,
.colLayout th.leftmost  { padding-left: 0; }




/* ******************************

   Column modifiers

   ****************************** */


/*
	TODO:
	Special relative widths for WebKit - it thends to render columns to small.
	Widths for floats (have to be different, because the context differs).
*/

.col, .half, .six, .wHalf, .fullHalf                      { width: 45.18%; }
.third, .four, .margin, .marginCol, .wThird, .fullThird   { width: 28.79%; }
.twoThirds, .eight, .mainCol, .wTwoThirds, .fullTwoThirds { width: 61.58%; }
.fourth { width: 20.59%; }
.threeFourths { width: 69.78%; }

.full .marginCol { width: 21.35%; }
.full .mainCol   { width: 70.09%; }

.w0  { width:         0 !important; }
.wg  { width:         4%; }
.l0  { margin-left:   0 !important; }
.lg  { margin-left:   4%; }
.l-g { margin-left:  -4%; }
.r0  { margin-right:  0 !important; }
.rg  { margin-right:  4%; }
.r-g { margin-right: -4%; }




/* ******************************

   Content modules

   ****************************** */


.box { clear: both; position: relative; background-color: silver; }
.box:before, .box:after {
	content: "."; display: block; height: 0; visibility: hidden; clear: both;
}





/* ******************************

   Components

   ****************************** */


/* Layout control and testing support ... */

body.showLayout     {
	background-image: url(../media/showLayout.grid.10x10.gif);
}
.showLayout img,
.showLayout object  {
	background-image: url(../media/showLayout.checker.png) !important;
}
.showLayout div     { background-image: url(../media/showLayout.div.1.gif); }
.showLayout div div { background-image: url(../media/showLayout.div.2.gif); }
.showLayout div div div {
	background-image: url(../media/showLayout.div.3.gif);
}
.showLayout div div div div {
	background-image: url(../media/showLayout.div.4.gif);
}
.showLayout div div div div div {
	background-image: url(../media/showLayout.div.1.gif);
}
.showLayout div div div div div div {
	background-image: url(../media/showLayout.div.2.gif);
}
.showLayout div div div div div div div {
	background-image: url(../media/showLayout.div.3.gif);
}
.showLayout div div div div div div div div {
	background-image: url(../media/showLayout.div.4.gif);
}
.showLayout div div div div div div div div div {
	background-image: url(../media/showLayout.div.1.gif);
}
.showLayout div div div div div div div div div div {
	background-image: url(../media/showLayout.div.2.gif);
}
.showLayout div div div div div div div div div div div {
	background-image: url(../media/showLayout.div.3.gif);
}
.showLayout div div div div div div div div div div div div {
	background-image: url(../media/showLayout.div.4.gif);
}

.testpages                { display: none; }
.showLayout div.testpages,
.testpage div.testpages,
.showLayout li.testpages,
.testpage li.testpages    { display: block; }
.showLayout span.testpages,
.testpage span.testpages,
.showLayout a.testpages,
.testpage a.testpages     { display: inline; }




/* Outline ... */

.outline ul, .outline li {
	/* position: relative; */ /* Already given in basic settings ... */
}
ul.outline li {
	margin-left: 0;
	text-indent: 0 !important;
}
ul.outline li:before,
ul.outline img.msieLiBefore,
.outline .branchClosed ul {
	display: none;
}





/* ******************************

   Forms

   ****************************** */






/* ******************************

   Annotations

   ****************************** */


del, del *                 { text-decoration: line-through; color: gray; }
ins, ins *                 { text-decoration: underline; color: green; }
.annotation, .annotation * { color: red; }
.highlight, .highlight *   { background-color: yellow; }
.dim, .dim *               { color: gray; }

.hideAnnotations del          { display: none; }
.hideAnnotations ins,
.hideAnnotations ins *        { text-decoration: inherit; color: inherit; }
.hideAnnotations .annotation  { display: none; }
.hideAnnotations .highlight,
.hideAnnotations .highlight * { background-color: inherit; }
.hideAnnotations .dim         { display: none; }





/* ******************************

   Page framework

   ****************************** */


#Page { 
	position: relative;
	text-align: left;     /* Undo occasional "text-align: center" from body */
}
#Header {
	position: relative;
	float: none;
	clear: both;
}
#Header:after {
	content: "."; display: block; height: 0; visibility: hidden; clear: both;
}
#Logo {
	position: relative;
	float: left;
}
@media print {
	#Logo img.print { display: inline !important; }
}
#HeaderTitle {
	position: relative;
	float: left;
}
#MetaNavigation {
	position: relative;
	float: right;
}
#Main {
	position: relative;
	clear: both;
}
#Main:before, #Main:after {
	content: "."; display: block; height: 0; visibility: hidden; clear: both;
}
#AreaNavigation {
	position: relative;
	clear: both;
}
#AreaNavigation ul {
	position: relative;
	clear: both;
}
#AreaNavigation ul:before, #AreaNavigation ul:after {
	content: "."; display: block; height: 0; visibility: hidden; clear: both;
}
#AreaNavigation ul li {
	position: relative;
	float: left;
}
#Menu {
	position: relative;
}
#Breadcrumb {
	position: relative;
}
#Navigation {
	position: relative;
	float: left;
	width: 20%;
	padding-bottom: 1em; /* Force #Navigation to occupy space */
}
#Content {
	position: relative;
	float: left;
	width: 55%;
	padding-bottom: 1em; /* Force #Content to occupy space */
}
#Sidebar {
	position: relative;
	float: right;
	width: 20%;
	padding-bottom: 1em; /* Force #Sidebar to occupy space */
}
#Footer {
	position: relative;
	float: none;
	clear: both;
}