html, body {height: 100%; background: #008aa4}

body {}

.backwrapper {
	position:fixed; top:0; left:28%; height:100%; width:72%;
	background: #008aa4 url(bgs/bgstart.jpg) no-repeat center center;   
 	background-size: cover;
}

.forewrapper {position:absolute; top:0; left:0; width:100%; min-height:100%;}


.mainbox {
	width: 46%;
	position: absolute; top:0; left: 28%;
	min-height:100%;
			
}


.maincontent {position:absolute; top:240px; left:0; right:0; bottom:0;}
.contentbg {width:100%; float:left; background: rgba(255,255,255,0.7) /*url(img/contentbg.png)*/; min-height:100%; border-radius: 0 40px 0 0; transition: 2s background;}
.contentbg:hover {background: rgba(255,255,255,0.95);}


.leftbox {position: absolute; top:0; left: 0; width:28%; background: #008aa4; min-height:100%;
	background: transparent url(img/glitzi.png) no-repeat right 240px;   
	background-size: 100% auto, auto;

}
.navbox {width:220px; float:right; margin-right:20px; opacity:0.4; transition: 1s opacity;}
.leftbox:hover .navbox {opacity:1; }

.topspace {height:240px; }
.logobox {background: #fff;}
.logobox img {float:right; max-width:100%; max-height:100%;}

footer {position:fixed; float:none; left:0;  bottom:0; width:100%; margin:0; padding:0 0 3px 0; font-size: 0.8em; line-height:1; background: #ddd;}
.footerleft {float:left; width:28%;} 
.footercenter {float:left; width:46%; padding-top:3px; text-align:center;} 
.footerright {float:left; width:25%; padding-top:3px;}
#gototopswitch {position:absolute; right:0; top:0;}

.hide {display:none;}

	
.content {
	margin:30px 4% 30px 4%;
}

.content.contentnarrow {
	margin-right:15%;
}

.sidebar {position: absolute; top: -40px; right: -30%; width:40%; background: #fff; border-radius: 10px; box-shadow: 0px 10px 100px 0px rgba(0, 0, 0, 0.2);}
.sidebar .innerdiv {margin: 10px 5%;}

.frm-field_table {width:355px ! important;}




	
.show-nav {
	display:none;
}

.nav {
	float:left;
	margin-left:15px;
	padding-left:30px;
	padding-bottom:10px;
	padding-top:32px;
}

.nav ul, .nav li {
		margin: 0px;
		padding: 0px;
		list-style-type: none;
}

.nav ul {
	padding:0 0 5px 0;
}
.nav li {
	padding-top:10px;
}
.nav a  {
		padding: 10px 0px 5px 0px;
		margin-left:0px;		
		color:#fff;
		display: block;
		text-decoration: none;
		text-transform:uppercase;
		font-weight:bold;
}
.nav a:hover {
		color:#cbecf2;
		text-decoration: none;
		font-weight: 400;
		list-style-type:disc;
}
.nav li.menu-current{
	color:#fff;
	list-style-type:disc;
}

.nav ul li ul li{
	padding-top:0px;
}
menu-expand, menu-parent ul {
	padding-top:-10px;
}

.nav ul li  {font-size:1.15em; ;}
.nav ul li ul li {font-size:0.9em ;}

.nav li ul a {
    padding: 0px 0px 3px 0px;
	font-weight:normal;
}

	
.footermenu {
	float:right;
	padding: 3px 10px 0 0;
	text-align:right;

}

.footermenu  a {
	display:inline-block;
	text-decoration:none;
	padding:0 10px;
	border-left: 1px solid #000;
}
.footermenu a.menu-first { border-left: none; }

	

.mobilenav {display:none;}


/* Login Box */

#showlogin {display:block;  position:absolute; top:0; left:0; width:20px; text-align:right; margin:3px 6px 0 0; }
#login-box {position:absolute; width:200px; left:30px; top:-60px; padding:5px; font-size:11px; z-index:2000; background: #eee; box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.2);}
#login-box .loginsubmit {border:0;}
#login-box .inputfield {width:80px; border: 1px solid #c9e8f9; padding:1px;}

a.template_edit_link {width:16px; height:16px; position:absolute; top:0; left:0; background:url(img/edit.gif) no-repeat; z-index:5000}


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





/*Extra Colorpicker */
#colorpickericon {display:block; width:24px; height:24px; background: url(img/colorpicker.png) no-repeat; z-index:5000; position: absolute; top:100px; right:0; cursor:pointer;}
#colorpicker {display:none; width:90px; background: #ddd; position: absolute; top:100px; right:0; z-index:5000; font-size:12px;line-height:100%; box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.1);}
.pickerfield {width:100%; height:40px; float:left;}

.pickerfield input[type="color"] {width:100%; height:20px; padding:0; border:0; cursor:pointer;}
.pickerfield input[type="text"] {width:90%; height:20px; padding:1px 3%; border: 1px solid #999;; cursor:text;}


a.colpick-button {display:block; clear:both; width:80%; margin:10px auto; padding:3px; background: rgba(255,255,255,0.2); text-align:center; border: 1px solid #666; border-radius: 15px;  cursor:pointer;}
#colorpicker-info {display:none; position: absolute; width:160px; padding:10px; top:0; left:-180px; background: #eee; box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.1);}






/*==================================================================*/
/* ================================================================================================= */
/* Smaller Screens */
@media screen and (max-width: 1300px) {
	.backwrapper {left:20%; width:80%;}
	.topspace {height:160px; }
	.mainbox {width: 65%; left: 20%;}
	.maincontent {top:160px;}
	.leftbox {width:20%; background: transparent url(img/glitzi.png) no-repeat right 160px;  }
	.navbox {width:100%;margin-right:0}
	.nav {padding-left: 10px;}
	
	.content.contentnarrow { margin-right:20%; }
	.sidebar {top: -40px; right: -20%; width:35%; }
	
	
	.footerleft {width:20%;} 
	.footercenter {width:65%;} 
	.footerright { display:none;}

}


@media screen and (max-width:1024px ) {
	.topspace {height:160px; }
	.mainbox {width: 75%;}
	
	.content.contentnarrow { margin-right:30%; }
	.sidebar {top: -40px; right: -5%; width:30%;}

	.content.contentnarrow { margin-right:2%; }
	.sidebar {position:static; width:100%; float:left;}
	.sidebar .inner {margin:30px 30px 30px 20px;}
	

}

@media screen and (max-width: 770px) {
	.backwrapper, .topspace {display:none;}
	
	.mainbox {width: 100%; left: 0; transition: 1s left;}
	.maincontent {top:50px;}
	.contentbg {background: rgba(255,255,255,1);  border-radius: 0 0 0 0;}
	.leftbox {position:fixed; width: 200px; z-index:600; left:-200px; top:0; bottom:0; overflow:auto; transition: 0.5s left; background-image: none; }
	
	
	
	
	.mobilenav {position:fixed; top:0; left: 0; display:block; background:#fff; width: 100%; height:50px;   transition: 1s left;  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1);}
	
	a.toggleMenu { float:left; width:15px; height:50px; background: url(img/menuswitch.png) no-repeat top right; margin:10px 30px 0 0;}
	.mobilenav a img {max-height:95%; float:left:}
	
	.navopen .leftbox  {left: 0; z-index:600; XXposition:fixed;}
	.navopen .mainbox,  .navopen .mobilenav {left: 200px;}
	.navopen .leftbox .navbox {opacity:1 ! important; }
	
	footer {height: auto; padding: 0 0 5px 0; line-height:1 ! important;}
	.footerleft {width:100%; text-align:center; padding:0;} 
	.footermenu, .footermenu ul {  float: none; text-align:center ! important;}
	.footermenu ul.menu-top li {display:inline-block;  float: none; }
	.footermenu li a { padding:0 5px; }
	
	.footercenter {width:100%; text-align:center; padding:0;} 

}



/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

{


@media print
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}