/*Things you might want to change*/
.maxwidthcenter { width: 100%; max-width: 1200px; margin: 0 auto;}
.outercontentbox {background: rgba(255,255,255,0.8)}}
@media screen and (max-width: 1200px) {
.maxwidthcenter { width: 94%; margin: 0 3%;}
}
.logo {position:absolute; top:-200px; left: 0%; width:20%; padding: 15px; max-width: 250px; background: rgba(255,255,255,0.8)}
.logo img {max-width: 100%;}
#mobilemenubox {background: rgba(255,255,255,0.5); box-shadow: 0px 3px 3px -4px rgba(0, 0, 0, 0.1); transition: background 1s, box-shadow 1s;}
.isscrolled #mobilemenubox {background: rgba(255,255,255,1); box-shadow: 0px 10px 10px -4px rgba(0, 0, 0, 0.3);}
#footerparallax {padding-top:30%;}
.bigfooter, .bigfooter a {background:#555; color:#fff ! important}
@media screen and (max-width: 480px) {
.logo {position:absolute; top:-100px; width:35%; }
#footerparallax {padding-top:80%;}
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Layout Basics
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body {
background: #fff;
margin: 0; padding: 0;
height:100%;
width:100%;
}
.wrapper { /* Alles vor topparallax, volle breite */
width: 100%;
max-width: 2500px;
margin: 0 auto 0 auto;
box-shadow: 0px 20px 40px -20px rgba(0, 0, 0, 0.4);
position: relative; top: 0;
z-index: 10;
overflow:hidden;
}
.wrappercontent {
/*background: url(img/body_bg.jpg) no-repeat fixed;
background-size: cover;*/
}
/*Parallax Image*/
#topparallax, #topparallax_spacer {width:100%; padding-top:25%;}
#topparallax {z-index:0; position:fixed; top: 0; background: #479cd4 url(img/parallaxdefault.jpg) no-repeat fixed; background-size: cover;}
#topparallax_spacer {position:relative;}
.frontpage #topparallax, .frontpage #topparallax_spacer {padding-top:30%;}
.hascontent10 #topparallax, .hascontent10 #topparallax_spacer {padding-top: 0% ! important;}
/*diverses*/
.logocontainer {height:0; position:relative;}
.outercontentbox {}
/*===========================================================
Contentbereich
*/
/*.contentbox {margin: 30px 4% 0 4%; }*/
.contentbox {margin: 0px 1% 0 1%; padding-top:30px;}
/*====================================================
Alles rechts neben left
ab hier: 1/3 grid
*/
.mainbox {}
.content { /* main content */
width: 73%;
float: left;
display:inline;
margin-left: 0;
}
.contentgrid2 .content.contentnarrow {width: 50%;}
.contentgrid3 .content.contentnarrow {width: 66%;}
.mainbox .contentwide {width:100%; margin:0 0 0 0;}
#rightbox { width: 25%; float: right; display:inline; border-left:1px #ddd solid; }
.contentgrid2 #rightbox {width: 48%;}
.contentgrid3 #rightbox {width: 30%;}
#rightbox .inner { margin: 0 3% 3px 3%; font-size:0.9em; line-height:135%}
#rightbox .inner img { max-width:100%; height:auto ! important;}
.clearcontent {height:60px; clear:both; }
.footerbox {min-height:80px; position:relative; font-size:13px; color: #999; width: 100%; }
.footerbox .left {width: 0%; position:absolute; left:0; top:0;}
.footerbox .center {width: 95%; margin: 10px 0 0 0; float:left; text-align:center;}
.bigfooter {clear:both; z-index:500}
#footerparallax {clear:both; z-index:500}
#gototopswitch {float:right; margin: 10px 10px 0 0}
#editthis {width: 0%;}
/* Top and Menu Box */
#topmenuboxwrapper, #topmenubox {height:46px; width: 100%; background:#eee; margin:0 0 0 0; }
.menu_on_top #topmenuboxwrapper {height:0;}
.m_inner {position:relative; height:100%; }
#XXcentermenubox .m_inner {height:100%; }
#topmenubox.visible, .menu_on_top #topmenubox {position:fixed; top:0; z-index:1100; }
#topmenubox .m_inner {border-bottom: none ! important;}
/* Search Box in header */
li.search_box_li a {border: none ! important;}
.menuebox {width: 75%; height:100%; float:left; position:relative;}
#openrightboxswitch, #closerightboxswitch, #mobilemenubox {display:none;}
/* nav: see below */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.breadcrumbs {
height:30px;
line-height:100%;
margin: 0 0 0 0;
padding: 3px 0 3px 0;
clear:both;
}
.innerbc {
font-size:14px;
margin:10px 0 0 25%;
}
.breadcrumbs .innerbc span {
background: transparent url(img/bclink.gif) no-repeat;
padding: 6px 2px 0px 12px; font-weight: normal; }
.breadcrumbs .innerbc a {
padding:1px;
border-bottom: 1px dotted #505567;
text-decoration: none;
}
.breadcrumbs .innerbc a:hover {border-bottom: 1px solid #505567;}
.breadcrumbs .innerbc .menu-current a{
color: #000000;
}
.frontpage .breadcrumbs {display:none;}
#aprevnext {display:block; width:90px; height:27px; float:right;}
#aprevnext a {display:block; width:40px; height:27px; float:right; opacity:0.5; border:none;}
#aprevnext a.aprev {background: url(img/prev.png) no-repeat center top; }
#aprevnext a.anext {background: url(img/next.png) no-repeat center top; }
#aprevnext a:hover {opacity:0.8}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#### Header Menu #####
#######################
Horizontal Drop-Down Menu based off :
http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Remove List Formattings
~~~~~~~~~~~~~~~~~~~~ */
#nav {
position: absolute;
bottom:0;
border: 0;
padding:0;
}
.menu_right #nav {right: 0; left:auto}
#nav ul, #nav2 ul {
list-style-type: none;
list-style-image: none;
margin: 0;
padding: 0;
width: auto;
position: relative;
z-index: 800;
}
#nav ul li, #nav2 ul li {
list-style-type: none;
list-style-image: none;
margin: 0;
padding: 0;
}
/* Root Level Link Formatting */
#nav ul li {float: left; display:inline; color: #aaa; text-align: left; font-weight: normal; list-style-type: none; list-style-image: none ;}
#nav ul li a {display: block; font-size: 16px; border-right:1px #ddd solid; color: #666; text-decoration: none; XXfont-weight: bold; background-repeat: no-repeat;}
#nav ul li a span {display:block; padding: 11px 12px 10px 12px; }
/* Root Level link hover */
#nav ul li a:hover, #nav li a:focus, #nav li a:active, #nav ul li a.active, #nav a.menu-current, #nav a.menu-parent { }
/*Current page Customisations*/
#nav a.menu-current {font-weight: bold;}
/* 2nd Child menu */
#nav li ul {position: absolute; right:10000px; width: 200px; opacity:0.0; text-transform: none; border:none; font-size: 13px; background-image: url(img/glitzi.png) no-repeat right 0px; box-shadow: 0px 10px 10px -4px rgba(0, 0, 0, 0.4);}
#nav li ul li {text-align: left; font-weight: normal; margin: 0; padding: 0; line-height: 1.2em; }
#nav li ul li a {width: 200px; text-align:left; height:auto; text-shadow: none; margin:0; padding: 0; border-top: 1px solid #fff; font-weight: normal; font-size: 14px; background: none;}
#nav li ul li a span {display:block; padding:8px; }
/* 2nd Child link hover */
#nav li ul a:hover, #nav li ul a.menu-current { text-shadow: 1px 2px 4px #000;}
#nav li ul a.menu-expand {background: transparent url(img/arr-right.png) no-repeat right 5px ; }
#nav li ul a.menu-parent {background: #cc0000 url(img/arr-right.png) no-repeat right 5px; }
/* Show and hide */
#nav li:hover ul, #nav li a:focus ul, #nav li.tabselected ul {left:-1px; opacity:1; transition:0.5s opacity;}
#nav li ul ul { margin-left: -10000px; opacity:0.0; transition:0.5s opacity;}
#nav li:hover ul ul, #nav li.subMenu ul ul { margin-left: -10000px; opacity:0.0; transition:0.5s opacity;}
#nav li:hover>ul, #nav li li:hover>ul { opacity:1; margin-left: 0; transition:0.5s opacity; z-index: 1000;}
#nav ul li ul li:hover>ul {left: 60%; opacity:0.9;}
/* 3rd Child Menu Appreances */
#nav li ul li ul { width: 180px; margin: 10px 0 0 -40%; z-index: 2000; }
#nav li ul li ul li {width: 100%;}
#nav li ul li ul li a { width: 100%;}
/* Positioning the Pop-out Drops */
#nav li {position: relative;}
#nav ul ul ul {
position: absolute;
top: 1px;
left: 100%;
}
/* Better: */
#nav li:hover {
z-index: 1000; /* ...and here. this makes sure active item is always above anything else in the menu */
white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}
.menu_right #nav li:hover ul, .menu_right #nav li a:focus ul, .menu_right #nav li.tabselected ul {left:-100px;}
.menu_right #nav ul li ul li:hover>ul {}
/* end menu */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#footer_menu {padding-bottom: 10px;}
#footer_menu a { display: inline-block; padding: 2px 10px; border-right: 1px solid #999;}
#footer_menu a:first-child {border-left: 1px solid #999;}
#footer_menu a.menu-current {font-weight:bold;}
/*Extra cookie_permission */
#cookie_permission {position:fixed; top:0; right:0; z-index:9950; width: 200px; padding:10px; background: #555; text-align:center; font-size: 0.9em; line-height:120%; border-radius: 0 0 0 25px; box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.2); }
#cookie_permission p , #cookie_permission a {color:#fff;}
#cookie_permission a.cookieaccepted {color:#000; background: #eeb300; display:block; padding:5px; border-radius: 15px; border: 1px solid #fff; font-weight:bold;}
#gototopswitch {float:right; margin:10px 0 0 0;}
/* Login Box */
#showlogin {display:block; float:left; position:relative; width:30px; text-align:right; margin:10px 6px 0 0; }
#login-box {position:absolute; width:250px; left:10px; top:-10px; padding:5px; font-size:11px; z-index:2000; background: #eee; box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.2);}
#login-box td {vertical-align: top; }
#login-box .loginsubmit {border:0;}
#login-box .inputfield {width:100px; border: 1px solid #c9e8f9; padding:1px; line-height: 1em;}
/*COuld bee visible on Desktop*/
#nav2 {width:250px; height: auto; position:absolute; left:-300px; }
.showonmobiles {display:none;}
a.footerblock {display: block; color:#000; width:30%; margin: 20px 3% 0 0%; height: 100%; float:left; background-size: 12% auto, auto; opacity:0.6; transition: 0.5s opacity;}
a.footerblock span {display:block; float:left; font-size:1em; line-height:120%; padding:10px 0 0 0; }
a.footerblock img {float:left; width:15%; margin: 0 2% 20px 0; }
a.footerblock:hover {opacity:0.8; transition: 0.9s opacity;}
/* ====================================================================================================================
Responsive:
*/
/*Smaller Screens */
@media screen and (max-width: 1024px) {
.container {padding-top: 2px;}
.mainbox .contentwide {width:96%; margin:0 0 0 2%;}
#rightbox { width: 33%;}
#rightbox .inner { margin: 0 5% 0 5%;}
#topmenuboxwrapper, #topmenubox, .logocontainer{ display:none;}
#mobilemenubox {display:block; position: fixed; top: 0; left: 0; width:100%; height:60px; z-index:1000;}
.toggleMobileMenu {position: absolute; top: 5px; right: 10px; display:block; width:37px; height:52px; background: url(img/menuswitch.png) no-repeat top right;}
.mobilelogo img {height:100%; margin-left: 4%;}
/*Nav*/
.breadcrumbs { height:560px; }
#nav2 {width:250px; height: auto; position:absolute; left:-300px; top:100px; z-index:2000; transition: left 1s; }
#nav2 {box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.4);}
#nav2 li {width:250px; padding: 0 0 0 0; }
#nav2 li a {display:block; padding: 12px 0 12px 20px; font-size:18px; text-decoration: none; border-bottom: 1px solid #fff;}
#nav2 li li a {padding: 10px 0 10px 30px; font-size:16px; }
#nav2 li li li a {padding: 8px 0 8px 40px; font-size:14px; }
#nav2 li li li li a {padding: 6px 0 6px 50px; font-size:13px; ;}
#nav2 li ul {display:none;}
#nav2 li.menu-parent > ul, #nav2 li.menu-current > ul {display:block;}
#nav2 li.is_opened > ul, #nav2 li.is_opened > ul {display:block;}
#nav2 li a.menu-expand {background: transparent url(img/arr-down.png) no-repeat left center ;}
#nav2 li a.menu-current { text-shadow: 1px 2px 4px #000;}
#nav2 ul li a.menu-expand.is_opened, #nav2 ul li a.menu-parent {font-weight:bold; background-image: url(img/arr-right.png) no-repeat 2px center ; }
#nav2close {display:none; z-index:1990; position:absolute; top:0; width:100%; height: 900px; background-image:none;}
.breadcrumbs { width: 100%; height: auto; }
.innerbc { margin: 2px 0 5px 2%; width: 96%; }
.innerbc span {display: block; float:left; padding: 2px 2px 2px 12px; margin: 0 0 5px 0;}
.innerbc b {display: none;}
.mobilemenuopen #nav2 {left:0; }
.mobilemenuopen #nav2close {display:block;}
.wrappercontent {
background-image: none;
}
h1 { font-size: 2.2em;}
h2 {font-size: 1.8em;}
h3 {font-size: 1.6em; }
}
/* ======================================================================
Smaller Screens */
@media screen and (max-width: 768px) {
.contentbox .mainbox .content, .contentbox .mainbox #rightbox {float: none; width:100%; border-left:none; display:block; padding: 0;}
.contentbox, .content {width:96%; margin:0%; float: none; padding: 30px 2%;}
#rightbox {border-top:10px solid #999; padding-top:20px;}
#rightbox .inner { margin: 0 0 0 0;}
.topheader {padding-bottom: 30%; background-size: 100% auto, auto; background-image: url(img/header-mobile.jpg);}
#topparallax, #topparallax_spacer {padding-top:35%;}
.frontpage #topparallax, .frontpage #topparallax_spacer {padding-top:45%;}
h1 { font-size: 2.0em;}
h2 {font-size: 1.6em;}
h3 {font-size: 1.4em; }
#topparallax p {line-height:120%;}
}
/* ======================================================================
Smaller Screens */
@media screen and (max-width: 480px) {
#topparallax, #topparallax_spacer {padding-top:55%;}
.frontpage #topparallax, .frontpage #topparallax_spacer {padding-top:65%;}
#topparallax .ptext {bottom:0; }
.topheader p { font-size:1.4em; }
h1 { font-size: 1.8em;}
h2 {font-size: 1.6em;}
h3 {font-size: 1.3em;}
}