/* ----------------------------------------------------------------------------- *
 *             Styles der Basisversion     Zahnarztpraxis Rudolph und Bruch      *
 * ----------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------- *
 * Änderung des default-Box-Modells aller Elemente auf "border-box"
 * http://www.paulirish.com/2012/box-sizing-border-box-ftw/
 * << apply a natural box layout model to all elements >>
 * ----------------------------------------------------------------------------- */
*, *:before, *:after {
    -webkit-box-sizing: border-box; /* Safari/Chrome, andere WebKit-Browser */
    -moz-box-sizing: border-box; /* Firefox, andere Gecko-Browser */
    box-sizing: border-box; /* Opera/IE 8+ */
}

/* ----------------------------------------------------------------------------- */
.page-wrapper {
    margin: 0px;
}

header {
    width: 100%;
	padding: 10px 0px 0px 0px;
	text-align: center;
}

header img {
	max-width: 100%;
	height: auto;
	padding: 0px;
}

footer {
	z-index: 1;
	width: 100%;
    padding: 0.05em 10px;
	font-size: 0.8em; /* 12px */
	position: relative;
	bottom: 0;
}

footer .select {
	color: #0f4b7c;
	font-weight: normal;
}

footer a:link {
	color: #ffffff;
	text-decoration: none;
	font-weight: normal;
}

footer a:visited {
	color: #ffffff;
	text-decoration: none;
}

footer a:hover {
	color: #e6e6e6;
}

.cols {
	width: 60%;
	margin: 0px auto; 
}

.cols p {
   margin: 0px;
   padding: 10px;
   color: #ffffff;
}

p {
   margin: 0px;
   padding: 10px 0px;
}

section {
    padding: 0px 10px;
}

section img {
	max-width: 100%;
	height: auto;
	border: 0px;
}

section a img { border: 0; }

.mainContent {
    width: 100%;
	text-align: left;
}

article {
	margin: 0px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.hideOnMobile {
	display: none;
}

@media print {
	 .hideOnMobile {
	display: table-cell; }
}


@media screen and (max-width: 45em)
{
	nav .navbselect a:hover {
	background-color: #009dd5;
	color: #ffffff;
	}
	
	nav .navbselect {
	background-color: #009dd5;
	color: #ffffff;
	}
	
}

/* ----------------------------------------------------------------------------- *
 *                             Textauszeichnungen                                *
 * ----------------------------------------------------------------------------- */
h1 {
    margin: 0.6em 0px;
	padding: 0px 10px;
}

h2 {
    margin: 0.6em 0px;
}

h3 {
    margin: 0.6em 0px;
	font-size: 1.0em;
}

.box.teaser p {
	padding: 0px;
	margin: 0 0 0.8em 0;
}

ul {
    padding: 0;
    margin: 0 0 0.625em 20px;
}

ul li {
	padding: 0px 0px 0px 0px;
}

ol {
    padding: 0;
    margin: 0 0 0.625em 0px;
}

ol li {
	padding: 0px 0px 5px 0px;
}

/* ----------------------------------------------------------------------------- *
 *                                  Navigation                                   *
 * ----------------------------------------------------------------------------- */
nav ul {
    margin: 0;
}

nav ul > li {
    margin-left: 0;
    border-bottom: 1px solid rgba(250, 250, 250, 0.6);
	background-color: #0f4b7c;
}

/*nav ul > li > a, nav ul > li > strong {
    padding: 0.3em 20px;
    display: block;
}*/

nav ul a:link {
    text-decoration: none;
	color: #ffffff;
}

nav ul a:visited {
    text-decoration: none;
	color: #ffffff;
}

nav ul ul a:link {
    text-decoration: none;
	color: #0f4b7c;
}

nav ul ul a:visited {
    text-decoration: none;
	color: #0f4b7c;
}

nav .navselect {
	background-color: #ffffff;
	color: #009dd5;
}


	

/* ----------------------------------------------------------------------------- *
 *                                  Kopfbild                                     *
 * ----------------------------------------------------------------------------- */

.headimage {
    border: 0px;
	margin: 0px;
	padding: 0px;
	border-bottom: 0px;
	background-color: #ffffff;
	height: auto; 
	overflow: hidden;
}

.headimage img {
	max-width: 140%; 
	height: auto; 
	margin: 0px -20%;
}


/* ----------------------------------------------------------------------------- *
 *                           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 */
        }
		
		.box.teaser {
		float: left;
		margin: 0 0 0.5em 0;
		width: 100%;
		}
		
		.box.teaser figure {
		width: 30%;
 		height: 30%;
 		float: left;
 		margin: 0 2% 2% 0;
		}
	}
	
    .page-wrapper {
        margin: 0 auto;
        max-width: 80%;
    }
	
    .main {
        /* clearing für die floatenden gleichlangen Spalten (.mainContent und .aside) */
        overflow: hidden;
    }
	
    .mainContent {
        width: 100%;
    	padding: 0px;
        border-top: none;
    }
	
	footer {
        padding: 0.1em 20px;
    }

	h1 {
		padding: 0px;
	}

    section {
        padding: 0px;
    }
			

	.hideOnMobile {
		display: table-cell;
	}
	
	header {
		position: relative;
		z-index: 5;
		}

	.headimage {
    	border: 0px;
		margin: 0px;
		padding: 0px;
		border-bottom: 0px;
		background-color: #ffffff;
		height: auto; 
		overflow: hidden;
	}

	.headimage img {
		max-width: 120%; 
		height: auto; 
		margin: 0px -10%;
	}
	
	.cols {
		-moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
        -moz-column-gap: 2em;
        -webkit-column-gap: 2em;
        column-gap: 2em;
        -moz-column-rule: 0px;
        -webkit-column-rule: 0px;
        column-rule: 0px;
	 }
	            
	 .cols h1, .cols h2 {
	     -moz-column-span: all;
	     -webkit-column-span: all;
	     column-span: all;
	 }

			
    /* ----------------------------------------------------------------------------- *
     *                                  Navigation                                   *
     * ----------------------------------------------------------------------------- */
    nav {
        /* clearing für die floatenden LIs */
        margin: 0px;
		overflow: hidden;
        font-size: 1.0em; /* 16px */
		padding: 0px 10% 0px 10%;
    }
	
    nav ul {
        margin: 0px;
    }

    nav ul li {
        float: left;
        border: none;
        width: auto;
		background-color: #ffffff;
		color: #0f4b7c;
    }
		
    nav ul > li > a:link, a:visited {
        padding: 0px;
        display: inline-block;
		text-align: center;
		background-color: #ffffff;
		color: #0f4b7c;
    }
	
	nav ul .navselect {
		margin: 0px;
		padding: 0px; 
		display: block;
		text-align: center;
		background-color: #ffffff;
		color: #009dd5;
	} 
		
	nav ul li .navselect a {
		background-color: #ffffff;
		color: #009dd5;
	}

	nav ul .navbselect {
		margin: 0px;
		padding: 0px; 
		display: block;
		text-align: center;
		background-color: #ffffff;
		color: #707173;
	} 
	
	nav ul .navuselect {
		margin: 0px;
		padding: 0px; 
		display: block;
		text-align: center;
	} */
	
		
}


/* ----------------------------------------------------------------------------- *
 *                          Styles für kleine Desktops                           *
 *                           1024px / 16px/em = 64em                             *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 64em) {
    .page-wrapper {
        margin: 0 auto;
        max-width: 60%;
    }


    nav {
         box-shadow: none;
		 padding: 0px 20% 0px 20%;
    }

	nav ul .navselect {
		margin: 0px;
		padding: 0px; /*Ausrichtung des Textes und des weißen Blocks */
		display: block;
		text-align: center
	}

	nav ul li .navselect a {
		background-color: #ffffff;
		color: #009dd5;
	}

	nav ul .navbselect {
		margin: 0px;
		padding: 0px; /*Ausrichtung des Textes und des weißen Blocks */
		display: block;
		text-align: center
	}

	nav ul .navuselect {
		margin: 0px;
		padding: 0px; /*Ausrichtung des Textes und des weißen Blocks */
		display: block;
		text-align: center
	}

	.main {
        /* clearing für die floatenden gleichlangen Spalten (.mainContent und .aside) */
    	overflow: hidden;
    }

    .mainContent {
        width: 100%;
        float: left;
    	padding: 0px;
        border-top: none;
    }
		
	.headimage {
    	border: 0px;
		margin: 0px;
		padding: 0px;
		border-bottom: 0px;
		background-color: #ffffff;
		height: auto; 
		overflow: hidden;
	}

	.headimage img {
		width: 100%; 
		height: auto; 
		margin: 0px;
	}
		
	a:link, a:visited {
		font-weight: normal;
		color: #0f4b7c;
	}

	a:hover, a:focus, a:active {
		font-weight: normal;
		color: #009dd5;
	}
	
		
/* ----------------------------------------------------------------------------- * 
 *                  Teaserboxen mit Bild und Text .box.teaser                    *
 * ----------------------------------------------------------------------------- */

.teaser {
    margin-top: 1.5em;
    padding: 0px;
}

.box.teaser {
    float: left;
    margin-right: 3%;
    width: 30%;
    overflow: auto;
}

.teaser p {
	margin: 0px;
    font-size: 0.8em; /* 12 px */
}

}


/* ----------------------------------------------------------------------------- *
 *                          Styles für große Desktops                            *
 *                           1248px / 16px/em = 78em                             *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 78em) {
	  
    /* Größenanpassungen */
    .mainContent {
	    width: 100%;
    	padding: 0px 0px 20px 0px;
    }

    .page-wrapper {
        margin: 0 auto;
        max-width: 40%;
    }
	
	footer {
        padding: 0.1em 50px;
    }
	
	h1 {
		margin: 1.125em 0px;
	}

    section {
    	padding: 0px;
    }
	
	.headimage {
    	border: 0px;
		margin: 0px;
		padding: 0px;
		border-bottom: 0px;
		background-color: #ffffff;
		height: auto; 
		overflow: hidden;
	}

	.headimage img {
		max-width: 100%; 
		height: auto; 
		margin: 0px;
	}
		
	.logo {
		max-width: 100%;
		height: auto;
		padding: 0px;
		position: relative;
		background-color: #e5f5fb;
		text-align: center;
	}
	
	/* ----------------------------------------------------------------------------- *
     *                                  Navigation                                   *
     * ----------------------------------------------------------------------------- */
    nav {
        /* clearing für die floatenden LIs */
		padding: 0px 30% 0px 30%;
        overflow: hidden;
        font-size: 1.0em; /* 16px */
		max-width: 100%;
    }

    nav ul {
        margin: 0px;
    }

    nav ul li {
        float: left;
        border: none;
        width: auto;
		background-color: #ffffff;
		color: #0f4b7c;
    }

    nav ul > li > a {
        padding: 0px;
        display: inline-block;
		text-align: center;
		background-color: #ffffff;
		color: #0f4b7c;
    }
	
	nav .link {
		padding: 0px;
	}

	nav .link:hover {
		padding: 0px;
	}
	
	nav ul .navselect {
		margin: 0px;
		padding: 0px; /*Ausrichtung des Textes und des weißen Blocks */
		display: block;
		text-align: center
	}

	nav ul .navbselect {
		margin: 0px;
		padding: 0px; /*Ausrichtung des Textes und des weißen Blocks */
		display: block;
		text-align: center
	}

	nav ul .navuselect {
		margin: 0px;
		padding: 0px; /*Ausrichtung des Textes und des weißen Blocks */
		display: block;
		text-align: center
	}
	
}


/* ----------------------------------------------------------------------------- * 
 *                          Styles für Multi-Toggle-Nav                          *
 * ----------------------------------------------------------------------------- */

header {
    position: relative;
}

/* 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: 1.0em;
    text-decoration: none;
    -webkit-border-radius: 0.4em;
    -moz-border-radius: 0.4em;
    border-radius: 0.4em;
    cursor: pointer;
    padding: 0.6em 0.9em;
    color: #009dd5;
    background: #ffffff;
    border: 2px solid #0f4b7c;
	z-index: 10;
}

a.toggle-nav:hover {
    border: 2px solid #009dd5;
    background: #ffffff;
    color: #009dd5;
}

/* NEU */
/* ----------------------------------------------------------------------------- *
 *                      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%;
}

/* ----------------------------------------------------------------------------- *
 *                          Multi-Level-Menü im Basis-Layout                     *
 * ----------------------------------------------------------------------------- */
/* Positionierung der Navigation "auf" dem Hauptinhalt, damit die zweite Menüebenen nicht verdeckt wird. */
nav {
    overflow: inherit;
    position: relative;
    z-index: 10;
    width: 100%;
}

.main {
    z-index: 5;
}

/* Layout und Positionierung der 2. Menüebene */
nav ul ul {
    z-index: 20;
    display: none;
}

nav ul .openmenu ul {
    display: block;
}

nav ul li {
    position: relative;
}

nav ul li li {
	font-size: 14px;
    float: none;
}

nav li.act {
	padding: 0px;
}

nav ul > li > a, nav ul > li > b, nav ul > li > strong {
	padding: 0.6em 20px;
    display: block;
    font-weight: normal;
}

nav .link {
	padding: 0px 20px;
}

nav .link:hover {
	padding: 0px 20px;
}

nav .navselect {
	margin: 0px;
	padding: 0.6em 40px;
	display: block;
	color: #009dd5;
}

nav ul li .navselect a {
	background-color: #ffffff;
	color: #009dd5;
}

nav .navbselect {
	margin: 0px;
	padding: 0.6em 40px;
	display: block;
}

nav .navuselect {
	margin: 0px;
	padding: 0.6em 40px;
	display: block;
}

#navMain {
    display: none;
}

/* Einblenden des Untermenüs onHover für alle Ebenen */
nav ul li:hover ul {
    display: block;
}


/* ----------------------------------------------------------------------------- *
 *                      Styles für Menü ab Tabletversion                         *
 *                          750px / 16px/em = 46.875em                           *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 46.875em) {

    nav > ul > li {
        height: 2.0em;  /* wenn diese Zahl verändert wird, auch im Folgenden TOP verändern */
        width: 20%;
    }

    /* Layout und Positionierung der 2. Menüebene */
    nav ul ul {
        top: 2.0em;
        position: absolute;
        width: auto;
        margin: 0;
        min-width: 100%;
    }
	
	nav ul li a:visited {
		color: #0f4b7c;
	}

	nav ul li a:hover {
		color: #009dd5;
	}

   	nav ul > li > a, nav ul > li > b, nav ul > li > strong {
        padding: 0px;
        display: block;
	}
	
	nav ul li ul li {
		font-size: 1.0em;
		padding: 8px 0px;
	}

    #navMain {
        display: block;
    }
		
	nav .link {
		padding: 10px 0px;
	}

	nav .link:hover {
		padding: 10px 0px;
	}


    /* Menü-Link verstecken in großen Viewports */
    a.toggle-nav {
        display: none;
    }
	
}


/* ----------------------------------------------------------------------------- *
 *                     Styles für große Desktops                            *
 *                           1248px / 16px/em = 78em                                   *
 * ----------------------------------------------------------------------------- */

@media only screen and (min-width: 103em) {

    nav > ul > li {
        height: 2.0em;  /* wenn diese Zahl verändert wird, auch im Folgenden TOP verändern */
        width: 20%;
		text-align: center;
    }

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

   	nav ul > li > a, nav ul > li > b, nav ul > li > strong {
        padding: 0px 10px;
        display: block;
    }
	
	nav ul li ul li {
		font-size: 0.9em;
		padding: 10px 0px;
	}
	
	nav ul .navselect {
		margin: 0px;
		padding: 0px 10px; /*Ausrichtung des Textes und des weißen Blocks */
		display: block;
		text-align: center;
	}
	
	nav ul .navbselect {
		margin: 0px;
		padding: 0px 10px; /*Ausrichtung des Textes und des weißen Blocks */
		display: block;
		text-align: center;
	}
	
	nav ul .navuselect {
		margin: 0px;
		padding: 0px 10px; /*Ausrichtung des Textes und des weißen Blocks */
		display: block;
		text-align: center;
	}
	
}