/************************* RESPONSIVE *******************/
@media only screen and (max-width: 959px)
{	
	#container{width: 100%}
	#nav{display: table; background: #272BE5; background-image: none}
	#nav LI.nav{ float: left; display: table-cell; background: url(../graphics/bg-divider.png) no-repeat right top}
	#nav LI.nav SPAN{display: block}
	
	#nav A.behandelbare, #nav DIV.eav, #nav DIV.uber, #nav A.terminvereinbarung, #nav A.adresse, #nav A.index{color: #fff; font-size: 14px; line-height: 14px; text-decoration: none; width: auto; height: 27px; margin: 0px; padding: 14px 23px 0px 23px}

	#nav A.behandelbare-active, #nav A.behandelbare:hover,
	#nav DIV.eav-active, #nav DIV.eav:hover,
	#nav DIV.uber-active, #nav DIV.uber:hover,
	#nav A.terminvereinbarung-active, #nav A.terminvereinbarung:hover,
	#nav A.adresse:hover, #nav A.adresse-active,
	#nav A.index:hover, #nav A.index-active{background: #0d11b0}	
	
	#nav DIV .dd{margin: 14px 0px 0px -38px}
	
	/************************* HOME PAGE *******************/
	#home-right{width: 54%}
	
	/************************* DESIGN ELEMENTS *******************/
	DIV.left{width: 30%}
	DIV.right{width: 60%}	
	
	/************************* POPUP *******************/
	#popup{width: 90%; position: absolute; left: 5%; top: -5000px; margin: 0px; border: solid 2px #fff; background: #000 url(../graphics/throbber.gif) no-repeat center center}
}

@media only screen and (max-width: 859px)
{	
	#nav A.behandelbare, #nav DIV.eav, #nav DIV.uber, #nav A.terminvereinbarung, #nav A.adresse, #nav A.index{padding-left: 15px; padding-right: 15px}
	#nav DIV .dd{margin: 14px 0px 0px -32px}	
	
	/************************* HOME PAGE *******************/
	#home-right{padding-top: 20px}
	H2.home{width: auto; height: auto; margin-bottom: 15px; background: none}
	H2.home SPAN{display: block}
}

@media only screen and (max-width: 768px)
{
	#container{background-position: 0px -41px}
	H1{width: 466px; height: 61px; background: url(../graphics/bg-header-small.png) no-repeat 0px 0px}
	#logo{width: 466px; height: 61px}
	
	#icon-menu{margin: 0px 0px 0px -30px; position: absolute; left: 100%; top: 35px; display: block}
	#nav-wrapper{width: 100%; overflow: hidden; position: absolute; left: 0px; top: 108px; z-index: 30; transition: height .3s ease-in-out; -moz-transition: height .3s ease-in-out; -webkit-transition: height .3s ease-in-out}	
	DIV.main-nav{height: 0px}
	DIV.main-nav-slide{height: 500px; overflow: visible; background: transparent}	
	
	#nav{width: 60%; height: auto; border: solid 1px #b8b8b8; border-bottom: none; -webkit-box-shadow: 2px 2px 2px 0px rgba(50,50,50,1); -moz-box-shadow: 2px 2px 2px 0px rgba(50,50,50,1); box-shadow: 2px 2px 2px 0px rgba(50,50,50,1); background: #f8f8ff}
	#nav LI.nav{width: 100%; padding: 0px; display: block; border-bottom: solid 1px #b8b8b8; background: transparent}
	#nav A.top-nav, #nav DIV.top-nav{color: #011b6f; width: auto; height: auto; margin: 0px; padding: 10px 10px 10px 10px; float: none; display: block; background: url(../graphics/icon-arrow.png) no-repeat right 10px}
	#nav A.top-nav:hover, #nav DIV.top-nav:hover{color: #011b6f; background-position: none; background: #e0e0ff url(../graphics/icon-arrow.png) no-repeat right 10px}		
	
	/************************* DROPDOWNS *******************/
	#nav DIV .dd{width: 97%; height: auto; margin: 10px 5px 5px 5px; padding: 0px; cursor: text; position: relative; z-index: 100; display: none; border-bottom: solid 1px #b8b8b8; background: #fff}
	#nav DIV .dd-inner{width: 100%; height: auto; margin: 0px; padding: 0px; border-top: none; background: #fff}

	#nav DIV .dd-inner A{font-size: 12px; line-height: 12px; text-decoration: none; width: auto; height: auto; float: none; margin: 0px; padding: 8px 10px 8px 10px; display: block; border: solid 1px #b8b8b8; border-bottom: none; background: #fff}
	#nav DIV .dd-inner A:hover{color: #fff; text-decoration: none; background: #011b6f}
	
	/************************* DESIGN ELEMENTS *******************/
	DIV.left{width: 40%}
	DIV.right{width: 48%}	
	
	DIV.book-div{padding-left: 0px}
	DIV.book-div IMG{width: 40%; height: auto; margin: 0px 15px 10px 0px; position: relative; left: 0px; top: 0px; float: left}

	/************************* POPUP *******************/
	#popup #button-close{width: 40px; height: 40px; margin: -20px 0px 0px -20px}
}

@media only screen and (max-width: 599px)
{
	#container{padding-top: 90px; background-position: 0px -60px}
	H1{width: 308px; height: 22px; background: url(../graphics/bg-header-very-small.png) no-repeat 0px 0px}
	#logo{width: 308px; height: 22px}	
	H1, #logo{left: 15px; top: 33px}
	
	#nav-wrapper{margin-top: -18px}
	#sub-nav{display: none}
	
	#footer{display: none}
	P.misc{padding-left: 20px; border-top: solid 1px #3858d8}
	
	/************************* HOME PAGE *******************/
	#home-right, #home-left{width: 100%; padding: 20px 0px 0px 0px; float: none}
	#home-right{border-bottom: solid 1px #3858d8}
	#home-left{margin-bottom: -15px; padding: 0px; border: none}
	#home-left IMG.home-body-shadow{display: none}
	
	/************************* DESIGN ELEMENTS *******************/
	DIV.left, DIV.right{width: auto; padding-left: 15px; padding-right: 15px; float: none}
	DIV.left{padding-top: 0px}
	DIV.left-top{padding-top: 20px}
	H2.top, H2, H3{text-align: left}
	
	DIV.inner-image{float: none}
	DIV.inner-image IMG{width: 99%; margin-bottom: 12px}
	
	P.capture{margin-top: -5px; padding: 0px 5px 10px 0px}	
	
	/************************* POPUP *******************/
	DIV.popup-div{margin: -10px 15px 25px 0px; clear: none; float: left}
}

@media only screen and (max-width: 480px)
{
	#nav{width: 100%; -webkit-box-shadow: 0px 0px 0px 0px rgba(50,50,50,1); -moz-box-shadow: 0px 0px 0px 0px rgba(50,50,50,1); box-shadow: 0px 0px 0px 0px rgba(50,50,50,1)}
	
	/************************* HOME PAGE *******************/
	#home-left{padding-top: 5px}
	
	/************************* POPUP *******************/
	#popup #button-close{width: 28px; height: 28px; margin: -14px 0px 0px -14px}
}

@media only screen and (max-width: 400px)
{
	H1{width: 210px; height: 48px; background: url(../graphics/bg-header-mini.png) no-repeat 0px 0px}
	#logo{width: 210px; height: 48px}	
	H1, #logo{top: 22px}
	
	/************************* HOME PAGE *******************/
	#home-left{padding-top: 10px}
}