@charset "UTF-8";
/* CSS für die website ruefugium.de - enthält:
		a) ru_normalize.css
		b) ru_atmosphere.css
		c) ru_layout.css */ 

/* CSS-Files einlesen */
@import url(/fileadmin/site_ruefugium/Resources/Public/Css/ru_normalize.css);
@import url(/fileadmin/site_ruefugium/Resources/Public/Css/ru_atmosphere.css);
@import url(/fileadmin/site_ruefugium/Resources/Public/Css/ru_layout.css);

/*! normalize.css v2.1.2 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined in IE 8/9.
 */

article,
aside,
details,
figcaption,
figure,
footer,
page-header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */

audio,
canvas,
video {
    display: inline-block;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */

[hidden],
template {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/**
 * Remove default margin.
 */

body {
    margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
    background: transparent;
}

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */

b,
strong {
    font-weight: bold;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */

dfn {
    font-style: italic;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
    background: #ff0;
    color: #000;
}

/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre-wrap;
}

/**
 * Set consistent quote types.
 */

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
    font-size: 80%;
}
smaller {
    font-size: 60%;
}
/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9.
 */

img {
    border: 0;
}

/**
 * Correct overflow displayed oddly in IE 9.
 */

svg:not(:root) {
    overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari 5.
 */

figure {
    margin: 0;
}
figcaption .image-caption {
	font-size: smaller;
}
/* ==========================================================================
   Forms
   ========================================================================== */

/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
    border: 0; /* 1 */
    padding: 0; /* 2 */
}


/* ==========================================================================
   Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* ----------------------------------------------------------------------------- * 
 *                      Atmosphäre: Farben und Schriften                         *
 *          Alle weiteren Styles stecken in der jeweiligen layout.css            *
 * ----------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------- * 
 * Verwendete Farben
 * Blue Colors:
 * #3a73ba; dunkles blau  für h1, h2, h3, h4 und menue (active, hover)
 * #30395C - middle dark blue
 * #2E2E2E (schwarz ca. 80%) für menue 
 * #0080FF - middle light blue
 * #C2D2E5 - light blue
 * ----------------------------------------------------------------------------- */


page-header {
/*    color: #efefef; */
/*    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.5) inset; */
	z-index: 10;
	}
/*
	.logo {
	font-family: 'Kaushan Script', cursive;
	font-size: 3.250em;	
	}
*/
	
.page-wrapper {
	background-color: #ffffff;
	}
#colright {
	border:1px solid #C0C0C0;
	background:#ffffff;
  }

.main {
	background:#ffffff;
  }
.frame {
	border-top: 1px solid #C0C0C0;
	border-right: 1px solid #C0C0C0;
	border-bottom: 1px solid #C0C0C0;
	border-left: 1px solid #C0C0C0;	
	}
.nachoben {
	text-align: right;
	}
.nachoben a:link {
	color:#8DA194; 
	text-decoration: none; 
	font-size: 9px;
	}
#rufooter {
/*	background:#F2F2F2; */
	border:1px solid #C0C0C0;
  }
.rufooterContent {
	text-align:center;
	font-size:90%;
	}

#footer a:hover {
	text-decoration:none;
	font-weight:bold !important;
	color:#0080FF; /* old: #3a73ba */	
	}
.framefooter {
	border-top: 1px solid #C0C0C0;
	border-right: 1px solid #C0C0C0;
	border-left: 1px solid #C0C0C0;
	border-bottom: 1px solid #C0C0C0;
	}

/* image handling */
#colcenter .startimg {
    border: 1px solid #C0C0C0;
    }
IMG.imgshow {
    border: 1px solid #C0C0C0;
    }		
#imgrow {
	background:#ffffff; 
	}
#imgrow .imgbar {
	border:1px solid #C0C0C0;
	}	

/* img und img Untertitel */
.ce-center .ce-outer {
    position: relative;
    float: right;
	font-size: smaller;
}

.ce-center .ce-inner {
    position: relative;
    float: right;
/*    right: -47%; */
}
figcaption .image-caption {
	font-size: smaller;
}
/* ----------------------------------------------------------------------------- * 
 *                             Textauszeichnungen                                *
 * ----------------------------------------------------------------------------- */
 h1 {
    color: #3a73ba; /* dunkles blau */
    font-size: 1.5em;
	}
h1, h2, h3, h4, h5, h6 {
    font-family: Raleway,sans-serif;
    font-weight: 300 !important;
    text-decoration: none;
	}

h2 {font-size:1.25em;}
h3 {font-size:1.0em;}

p {
	font-size:100%;
	line-height:1.5em;
	}
p.teasertext {
    color: #30395C; /* middle dark blue */
    font-family: "Trebuchet MS",Helvetica,Arial;
    font-size: 1.188em; /* 19px */
    line-height: 1.368em; /* 26px */
	}
a:link {
	text-decoration:none;
	color:#2E2E2E;
	}
a:visited {
	text-decoration:none;
	color:#2E2E2E;
	}
a:hover {
	text-decoration:none;
	color:#3a73ba;
	}
.mainContent h1 h2 h3 {
	font-weight: 300 !important;
	}
.mainContent h1 {
	font-size:20px;
	}
.mainContent h2 {
	font-size:18px;
	}
.mainContent h3 {
	font-size:14px;
	}
.mainContent a {
	font-size:100%;
	}
.mainContent p {
	font-size:110%;
	}
.mainContent figcaption.csc-textpic-caption {
	font-size:9px;
	}


	/* table-layout fuer typo3 vers 8.x.x  Layout 
.mainContent table.ce-table thead th {
	border-bottom: 0px solid #dadada; 
}
.mainContent table.ce-table th, .ce-table td {
	border-top: 0px solid #dadada; 
}
.mainContent table.ce-table th {
    padding: 0.5em 0.15em;
    vertical-align: top;
}
.mainContent table.ce-table td, .ce-table th {
    vertical-align: top;
}
*/
/* layout-Changes der Extension MyFlat */
.tx-myflat .tableMultiRow td.vacantWeekend {
    background-color: #FFFFFF;
	}

	
/* <=== table-layout */ 
/*
table {
	border-collapse: separate;
	border-spacing:0.2em;
	border-color:gray;
	border: 0px solid #E6E6E6;
	} */
table thead {
/*	background: #F2F2F2 no-repeat left top; */
	font-family: Raleway,sans-serif;
	font-size:1.20em;
	color: #3a73ba;
	vertical-align: left;
	}
table .td-0 {
/*    font-weight: bold; */
    color: #3a73ba; /* new: #0080FF (helles blau) */
    text-align: left;
}
table .td-1 {
    text-align: left;
}
table .tr-even {
    background-color: #F2F2F2;
}

/* <=== table-layout */	

/* ----------------------------------------------------------------------------- * 
 *                                    Navigation                                 *
 * ----------------------------------------------------------------------------- */ 
navcol {
	box-shadow: none;
    }
	
.framenav {
	border-top: 1px solid #C0C0C0;
	border-right: 1px solid #C0C0C0;
	border-bottom: 1px solid #C0C0C0;
	border-left: 1px solid #C0C0C0;
	font-family: "trebuchet MS", verdana, arial, sans-serif;	
	}
navcol ul li a {
	text-decoration:none; 
	background-color:#fff; 	
	font-size:110%;
	font-weight:bold;
	border-bottom:1px solid #C0C0C0; 
	}
navcol ul li.active {
  border-bottom:3px solid #3a73ba; 
  background-color:#58ACFA;   
  }
navcol ul li.active a {
  color:#3a73ba !important; 
  }
navcol ul li.selected  {
	border-bottom:3px solid #3a73ba; 
	}
navcol ul li.selected a {
	color:#3a73ba;
	border-bottom:3px solid #3a73ba; 
	}
	
/* FORM-Layout */
div.csc-mailform fieldset {
    background: none repeat scroll 0 0 #F2F2F2;
    border: 1px solid #CFCECF;
}

/* Login Data */
div.secondaryContentSection {
	background:#f2f2f2;
	border:1px solid #cfcecf;
	font-size:90%;
	}
div.secondaryContentSection .csc-header h1, div.secondaryContentSection .csc-header h2, div.secondaryContentSection .csc-header h3 {
	color:#fff;
	background:#494949;
	}
	
.page-wrapper {
	margin: 0 auto;
	}
page-header {
	padding: 0.5em 5px;
	}
page-header {
/*	overflow: hidden; */
	width: 100%; 
	z-index: 10;
	}
aside, footer {
    padding: 0.6em 20px;
}	
section {
    padding: 0 20px;
	}

.main {
	margin:0.0em 0.2em 1.0em 0.5em;
}

.mainContent {
	width: 100%;
	padding:0 10px 10px 10px;
}
aside {
    width: 100%;
    margin-left: 0;
	}
.t3mainContent {
	width: 100%;
	margin-top: 5px;
}
.t3rightContent {
	width: 20%;
	float: left;
	display: block;
	margin-left: auto;
	margin-right: auto 
}
.csc-textpic {
	display: block;
	margin-left: auto; /* 1.5em; */
	margin-right: auto 
}

.ce-image {
    overflow: hidden; 
	height: auto; /*300px; */
	width: 100%;
}

.framelogo {
	padding-top: 20px;
	margin-left: 5px;
}

/* ---------------------------------------------------------------------------*
 * geänderte CSS Angaben von verwendeten plugIns                              *
 * -------------------------------------------------------------------------- */
h1 a:link, h1 a:visited {
	color: #fff;
	text-decoration: none;
}

h1 a:hover, h1 a:active, h1 a:focus {
	color: darkorange;
}

.mainContent h1 h2 h3 {
	margin:0; 
	padding:10px 0;
}
.mainContent a {
	margin:0;
	padding:10px 0;
}
.mainContent figcaption.csc-textpic-caption {
	margin-left:7em;
	padding:5px 0;
}
.mainContent .csc-textpic-imagerow {
	width:110%;
}
.mainContent {
	padding-left: 13px;
}

/* ===>   table-layout */
/* table-layout Link-Steuerung */
/* für typo3 vers 7.x.x Tabelle
.mainContent table.contenttable {
	display:table;
	border-collapse:separate;
}
*/
/* für typo3 vers 8.x.x Tabelle */
.mainContent table.ce-table {
	display:table;
	border-collapse:separate;
}

/* table-layout-Changes für Belegungsplantabelle */
.mainContent table.listYear {
	
}
.mainContent .listYearTitle {
	margin: 0.6em 0;
}

.mainContent table.listYear {
	border-collapse: separate;
	margin-top:0.6em;
	width: 100%;
	height: 100%;
}
table.listYear {
	margin-top:0.6em;
	width: 100%;
}
.mainContent .theYears td {
	margin: auto;
	padding: 0.3em;
}

footer {
	clear: left;
	margin: 0.5em;
}
/*
#colcenter .startimg {
    display: block;
    margin-bottom: 5%;   
    margin-right: auto;
    width: 760px;
    height: 410px;
    }
*/	
image.t3rightContent {
    display: block;
    margin-left: auto;
    margin-right: auto; 
    width: auto;
    }
image.imgshow {
    display: block;
    margin-left: auto;
    margin-right: auto; 
    width: auto;
    height: 455px;
    }
image.logo {
	position: relative;
	width: 95%;
    margin-top: 0.5em;
    margin-left: 0.1em;
    margin-right: auto;
    margin-bottom: 0.5em;	
    }
image.headerimg {
	float:right;
    display: block;
	width: 76%;
    margin-top: 0.5em;
    margin-left: 0;
/*    margin-right: auto; */
    margin-bottom: 0.5em;	
    }		
#imgrow {
	clear: both;
	padding:10px;    
	}
#imgrow .imgbar {
  width: 250px;
  height: 200px;
  margin-right: 70px;
  margin-left:10px;
	}  
/* <=== colCenter */

/* Login Data */
div#secondary {
	margin-top:48px;
	}
div.secondaryContentSection {
	width:155px;
	border-top:none;
	padding: 0 10px 10px 10px;
	margin:0 0 2.4em 10px;
	overflow:hidden;
	}
div.secondaryContentSection .csc-header h1, div.secondaryContentSection .csc-header h2, div.secondaryContentSection .csc-header h3 {
	padding: 6px 10px;
	margin:0 0 1em -11px;
	width:157px;
	}
/* <-- end CSS Änderungen von PlugIns */

/* footer */
#rufooter {
	float: left;
	width: 100%;
  }
#rufooter .rufooterContent table tr td {
	padding:5px;
	}
.rufooterContent table tr td {
	padding:5px;
	}
.rufooterContent {
	padding:5px;
	}

 
/* ----------------------------------------------------------------------------- *
 *                             Textauszeichnungen                                *
 * ----------------------------------------------------------------------------- */			
	h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.6em;
	}

p {
	margin:0;
	padding:5px 0;
	}
ul, ol {
    padding: 0;
    margin: 0 0 0.625em 20px;
}

/* ----------------------------------------------------------------------------- *
 *                                  Navigation                                   *
 * ----------------------------------------------------------------------------- */

/* ==> start left-Menue */
navcol {
	float: left;
	width: 174px;
	margin-bottom: 50px;
    }
navcol {
	background-image: url("rLogo4-2.png");
    background-repeat: no-repeat;
	background-position: 1% 5%;
	}
ul {
/*    margin-left: 5px; */
    padding-left: 0px;
}

navcol ul {
	overflow: hidden;
  	list-style-type: none;
  	padding-left:5px;
	margin-top: 250px;
	}
navcol ul li {
	display:block;
	margin-left:0;
	}
navcol ul li a {
	display:block;
	padding:1.0em;
	}
navcol ul li.active {
  text-align:right; 
  }
navcol ul li.selected  {
	text-align:right;
	}
/* <== Menue-left -END */

/* ----------------------------------------------------------------------------- *
 * ==>Styles der Mobilephone 320px Versionen 320px/16px/em=22.5em                *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 19.5em) {
    /* Schriftverkleinerung wird für große Screens wieder aufgehoben */
    @media only screen and (max-width: 78em) {
        body {
            font-size: 0.938em; /* 15px */
        }
		.main {
            padding-left: 0.8em;
        }
	}
	page-header {
		position: relative;
		display: block;
		height: 7em;
	}
	page-header {
		background-image: url("rLogo4-2.png");
		background-repeat: no-repeat;
		background-position: 5% 100%;		
	}

	#navMain {
		display: none;
	}

	/* ==> start left-Menue */
	navcol {
		float: left;
		width: 174px;
		margin-bottom: 50px;
    }
	navcol {
		background-image: none;
	}
	navcol ul {
		margin-top: 0px;
	}
	.framenav {
		border: 0px;
	}
	/* <== Menue-left -END */

	.main {
		float: left;
		width: 98%;
	}		
    .mainContent {
		margin: 0 auto;
        width: 98%;
        float: left; 
        padding: 0.3em;
    }
	.t3rightContent {
		width: 98%;
		visibility: visible;
	}
    aside {
		width: 98%;		
        visibility: visible;
		}
	.tx-powermail .powermail_fieldset .powermail_legend {
/*		float: left; */
		margin: 3px 0 10px 0;
		font-size: 1.5em;
		white-space: normal;
	}
	.tx-powermail .powermail_fieldset .powermail_field {
		width: 95%;
	}
	img {
/*		width: 100%; */
		height: auto;
	}
	div.csc-textpic-border div.csc-textpic-imagewrap img {
		border: 1px solid black;
		padding: 0px 0px;
		width: 100%; 
		height: auto;		
	}
}
/* <==end Mobilephone 320px */

/* ----------------------------------------------------------------------------- *
 * ==>Styles der Mobilephone 670px Versionen 670px/16px/em=41.875em              *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 41.875em) {

    /* Schriftverkleinerung wird für große Screens wieder aufgehoben */
    @media only screen and (max-width: 78em) {
        body {
            font-size: 0.938em; /* 15px */
        }
	}
	page-header {
		position: relative;
		display: block;
	}
	#navMain {
		display: none;
	}
	
	.main {
		float: left;
		width: 98%;
		margin-top: 5px;
	}

	.mainContent {
		width: 98%;
		float: left;
		padding: 0.3em;
	}
	.t3rightContent {
		width: 98%;
		visibility: visible;
	}
	aside {
		width: 95%;
		visibility: visible;
	}
}
/* <==end Mobilephone 670px */


/* ----------------------------------------------------------------------------- *
 * ==>Styles der Tabletversion 750px/16px/em=46.875em                               *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 46.875em) {
    /* Schriftverkleinerung wird für große Screens wieder aufgehoben */
	@media only screen and (max-width: 78em) {
		body {
			font-size: 0.938em; /* 15px */
		}
	} 
	page-header {
		height: 3em;
	}
	page-header {
		background-image: none;
	}
	navcol {
		background-image: url("rLogo4-2.png");
	}
    .main {
        /* clearing für die floatenden gleichlangen Spalten (.mainContent und .aside) */
/*        overflow: hidden; */
    }

    .mainContent {
		width: 70%;
        float: left;
        padding: 0.8em 0.3em;
    }
	.t3rightContent {
		width: 30%;
		visibility: visible;
	}
	aside {
		width: 30%;
		margin-left: 70%;
		/* Trick für gleichlange Spalten  - dazu gehört ein overflow: hidden für den umgeb. Container */
		margin-bottom: -99999px !important;
		padding-bottom: 99999px !important;
	}

	aside, footer {
		padding: 0.8em 3px;
	}

	section {
		padding: 0;
	} 
    /* ----------------------------------------------------------------------------- *
     *                             Textauszeichnungen                                *
     * ----------------------------------------------------------------------------- */
    h2 {
        font-size: 2.1875em; /* 35px */
        line-height: 1.2em;
        margin: 0.3em 0 0;
    }

    p.teasertext {
        margin: 0.8em 0;
    }

    /* ----------------------------------------------------------------------------- *
     *                                  Navigation                                   *
     * ----------------------------------------------------------------------------- */
    navcol {
        /* clearing für die floatenden LIs */
        overflow: hidden;
        font-size: 1.0em; 
    }
	navcol {
		width: 98%;
		margin-bottom: 10px;
		margin-left: 0.5em;
		height: 150px;
}

    navcol ul {
        margin: 6em 0em;
    }

    navcol ul li {
        float: left;
        border: none;
        width: 100%;
    }

    navcol ul > li > a {
        padding: 0.7em 10px 0.7em 10px;
        display: inline-block;
    }
} 
/* <== end der tablet-Version 750px/16px/em=46.875em  *          
 * -------------------------------------------------- */ 

 /* ----------------------------------------------------------------------------- *
 * ==>Styles für kleine Desktops 1024px/16px/em=64em                           *
 * ----------------------------------------------------------------------------- */ 
@media only screen and (min-width: 64em) {
    /* Navigation wird links neben dem Inhalt angeordnet */
	page-header {
/*		display: none; */
	}
	navcol {
		float: left;
		width: 174px;
		margin-bottom: 50px;
		}
	navcol {
		background-image: url("rLogo4-2.png");
		background-repeat: no-repeat;
		background-position: 2px 5%;
		}
	navcol ul {
		overflow: hidden;
		list-style-type: none;
		padding-left:10px;
		margin-top: 250px;
		}
	navcol ul li {
		display:block;
		margin-left:0;
		}
	navcol ul li a {
		display:block;
		padding:1.0em;
		}
	navcol ul li.active {
		text-align:right; 
		}
	navcol ul li.selected  {
		text-align:right;
		}

    /* .main macht Platz für .nav */
    .main {
        width: 78%;
        float: left;
    }

    /* Größenanpassungen */
	.mainContent {
		margin: 0 auto;
		width: 61%;
		padding:10px;
	}
	.t3rightContent {
		width: 20%;
		visibility: visible;
	}
	aside {
		width: 20%;
		margin-left: 80%;
	}

	footer {
		clear: left;
	}
} 
/* <== end kleine Desktops 1024px/16px/em=64em        *
 * -------------------------------------------------- */ 
 
/* ----------------------------------------------------------------------------- *
 * ==>Styles für große Desktops 1248px/16px/em=78em                              *
 * ----------------------------------------------------------------------------- */ 
@media only screen and (min-width: 78em) {
	.page-wrapper {
		margin: 0 auto;
		max-width: 78em;
	}
}
/* <== end große Desktops 1248px/16px/em=78em         *          
 * -------------------------------------------------- */ 
 
/* ----------------------------------------------------------------------------- * 
 * ==>Styles für Multi-Toggle-Nav                          *
 * ----------------------------------------------------------------------------- */ 

/* Menü-Link im Header zum Ein-und Ausblenden des Menüs */
a.toggle-nav {
    display: inline-block;
    position: absolute;
    right: 5%;
    /*top: 1.3em;*/
    top: 1em;
    text-decoration: none;
    -webkit-border-radius: 0.4em;
/*    -moz-border-radius: 0.4em; */
    border-radius: 0.4em;
    cursor: pointer;
    padding: 0.357em;
    color: #D0E4F2;
    background: #0080FF;
    border: 1px solid #0080FF;
}

a.toggle-nav:hover {
    border: 1px solid #D0E4F2;
    background: #D0E4F2;
    color: #1A1F2B;
} 
/* <== end Multi-Toggle-Nav                           *          
 * -------------------------------------------------- */ 
 
/* ----------------------------------------------------------------------------- *
 * ==>Beispiel Multi-Level-Menü im Basis-Layout                                  *
 * ----------------------------------------------------------------------------- */ 
/* Clearing von nav, nav.ul, .main mit .clearfix statt mit overflow:hidden;
 * sonst wird die zweite menüebene abgeschnitten! */  
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
	}

.clearfix {
    display: block;
	}

html[xmlns] .clearfix {
    display: block;
	}

* html .clearfix {
    height: 1%;
	}
/* <== end Multi-Level-Menü im Basis-Layout           *          
 * -------------------------------------------------- */ 
	
/* ----------------------------------------------------------------------------- *
 * ==>Styles für Menü ab Tabletversion 750px/16px/em=46.875em                    *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 46.875em) {
	navcol > ul > li {
		float: left;
        height: 3.4em;
        width: auto;
    }

    /* Layout und Positionierung der 2. Menüebene */
    navcol ul ul {
        top: 2.8em;
        position: absolute;
        width: auto;
        margin: 0;       
        min-width: 100%;
    }

    navcol ul > li > a, navcol ul > li > b, navcol ul > li > strong {
        padding: 0.8em 10px;
        display: block;
    }
/* Buchungsform Kategorien */
	.form-horizontal .control-label {
		font-size: 0.9em;
		padding-left: 5px;
	}
}
/* <==end für Menü ab Tabletversion 750px/16px/em=46.875em *          
 * ------------------------------------------------------- */ 

/* ----------------------------------------------------------------------------- *
 * ==>Styles für Menü ab Desktopversion 1024px/16px/em=64em                      *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 64em) {
    /* 100% Navigation wird hier wieder überschrieben */
    navcol {
		float: left;
		width: 180px;
		margin-bottom: 50px;
		height: 100%;
    }
	navcol {
		background-image: url("rLogo4-2.png");
		background-repeat: no-repeat;
		background-position: 2px 5%;
	}
    navcol ul {
		overflow: hidden;
		list-style-type: none;
		padding-left:10px;
		margin-top: 250px;
    }

    navcol ul ul {
        position: absolute;
        top: 0;
		left: 100%;
    }

    navcol ul li.act ul {
        /*kl display: block; */
    }

    navcol > ul > li {
        height: auto;
        width: auto;
    }

    navcol ul > li > a, navcol ul > li > b, navcol ul > li > strong {
        padding: 0.6em 20px;
    }
    navcol ul ul > li > a, navcol ul ul > li > b, navcol ul ul > li > strong {
        padding: 0.7em 20px;
    }	
	
    navcol ul li {
        float: none;
    }
}

#navMain {
    display: none;
}

@media only screen and (min-width: 46.875em) {
    /* aus in 4.3.1: */
    #navMain {
        display: block;
    }

    /* Menü-Link verstecken in großen Viewports */
    a.toggle-nav {
        display: none;
    }
}
@media only screen and (min-width: 46.875em) and (max-width: 64em) {
    /* Einblenden der zweiten Menüebene on li:hover */
    navcol ul li:hover ul {
        display: block;
    }
}