/* andreas07 - an open source xhtml/css website layout by Andreas Viklund - http://andreasviklund.com . Free to use for any purpose as long as the proper credits are given for the original design work.

Version: 1.1, November 28, 2005  / Modified by Jan Stoltz April 19, 2007*/



/**************** setup for responsive layout / flexible column width ****************/

* {
  box-sizing: border-box;
}
.col-sidebar {width: 12.5%; min-height:80px;}
.col-content {width: 87.5%; max-width: 720px;}
.col-topleft {width: 45%;
	min-width:240px;
	font-family:'Trebuchet MS', sans-serif;
	font-size:12px;
	letter-spacing:+6px;
	color:#c1c1c1;
	background: url(img/title_logo_de_bg.jpg) top left;
	}
.col-topright {width: 55%;
	text-align:right;
	margin-top:8px;
	font-family:'Trebuchet MS', sans-serif;
	font-size:14px;
	letter-spacing:+4px;
	color:#c1c1c1;
	}
.col-25 {width: 25%;
	min-width: 170px;
	font-size:1.3em;
	font-weight:bold;
	margin-top:6px;
	margin-bottom:6px;
	}
.col-img {width: 15%; min-width: 120px; margin-right:12px; text-align: center;}
.col-team {width: 80%;}
.col-100 {width: 100%;}
.col-80 {width: 80%;}
.col-70 {width: 70%;}
.col-60 {width: 60%;}
.col-50 {width: 50%;}
.col-40 {width: 40%; min-width: 200px;}
.col-30 {width: 30%; min-width: 200px;}
.col-20 {width: 20%;}

[class*="col-"] {
	float: left;
	padding: 0;
	border: 0;
}



/**************** Page and tag styles ****************/

body
{margin:0; padding:0; color:#ffffff; background:#282828; font:76% Helvetica,Arial,sans-serif;}

a
{color:#ffffff; font-weight:bold; text-decoration:none;}

a:hover
{text-decoration:none;}

hr
{border-color:#b4b4b4;}




/****************title style ****************/

#title
{top:0; background:#282828 url(img/title_bg.jpg) top left; text-align:left; z-index:2;}

body > #title
{position:fixed;}



/**************** Sidebar area styles ****************/

#sidebar
{position:absolute; top:0px; left:0; height:100%; min-height:100%; overflow:hidden; background:#464646 url(img/menu_bg.gif) top right repeat-y; text-align:right; z-index:3;}

body > #sidebar
{position:fixed;}

#sidebar a
{margin:0 10px 0 0; color:#aaaaaa; font-weight:normal; font-size:12px;}

#sidebar a:hover
{color:#ffffff;}



/**************** Navigation sidemenu styles ****************/

#sidemenu
{text-align:right; padding:30px 0px;}

#sidemenu a
{display:block; width:100%; padding:6px 8px 6px 0; color:#b4b4b4; font-size:1.2em; font-weight:normal; text-decoration:none; letter-spacing:+2px;}

#sidemenu a:hover 
{color:#ffffff;}

#sidemenu a.active
{color:#ffffff; padding:5px 8px 5px 0; background:#282828; border-top:1px solid #b4b4b4; border-bottom:1px solid #b4b4b4; font-weight:bold;}



/**************** Topbar area styles ****************/

#topbar
{width:100%; overflow:hidden; margin:0 0 0 0; display:none; background: url(img/menu_bg.gif) bottom left repeat-x; text-align:left;}

#topbar a
{margin:0 0 0 0; color:#aaaaaa; font-weight:normal;}

#topbar a:hover
{color:#ffffff;}




/**************** Navigation topmenu styles ****************/

#topmenu
{text-align:left; display:inline; padding:0px 0px 0px 16px;}

#topmenu a
{display:inline-block; padding:2px 6px 2px 6px; color:#b4b4b4; font-size:1.2em; font-weight:normal; text-decoration:none; letter-spacing:+2px;}

#topmenu a:hover 
{color:#ffffff;}

#topmenu a.active
{color:#ffffff; padding:2px 5px 2px 5px; background:#282828; border-top:1px solid #b4b4b4; border-left:1px solid #b4b4b4; border-right:1px solid #b4b4b4; font-weight:bold;}



/**************** Content area styles ****************/

#content
{width:100%; margin:80px 0 0 0; padding:6px 16px 6px 16px; background:#282828; z-index:1;}

body > #content
{position:relative;}

#content p
{margin:0 10px 20px 0; color:#ffffff; line-height:1.5em; text-align: left}

#content p1
{margin:0 10px 20px 0; color:#ffdd66; font-weight:bold; line-height:1.5em; text-align: left}

#content p2
{margin:0 10px 20px 0; color:#aaaaaa; font-weight:bold; line-height:1.5em; text-align: left}


#content p i
{font-size:76%;}


#content h1
{margin:0 0 10px 0; letter-spacing:+1px; font-weight:bold; font-size:1em; text-align:left;}


#content h2
{margin:0 10px 0px 0; color:#ffffff; letter-spacing:+2px; font-weight:bold; font-size: 1.9em; text-align:left;}


#content h3
{margin:0 0px 10px 0; color:#ffffff; letter-spacing:+1px; font-weight:bold; font-size:1.3em; text-align:left;}


#content h3 a
{color:#0000aa; font-weight:normal;}
#content table
{margin:0 0 0 0; border-spacing: 0px; text-align: left;}



#content td b
{font-weight:bold;}


#content td i
{font-weight:bold;}


#content td i a
{color:#0000cc;}

#content td.ref{color:#b4b4b4; background:#464646; border:1px solid #b4b4b4;}
#content img
{margin:0 0px 10px 0;}
#content hr{margin:18px 0 18px 0;}

#ref
{color:#b4b4b4; background:#464646; border:1px solid #b4b4b4;}



/**************** image blender ****************/

.fader { position: relative; display: inline-block; }
.fader img { vertical-align: top; width: 100%;}
.fader img.next { position: absolute; top: 0; left: 0; }


/**************** burger menu setup ****************/

nav ul{
	list-style: none;
	float: left;
	display: none;
	font-size: 1.2em;
	letter-spacing:+2px;
}
.burgericon {
	width: 26px;
	height: 26px;
	display: none;
	margin-left: 16px;
	margin-top: -9px;
	margin-bottom: 6px;
	cursor: pointer;
}
.burgericon div {
	width: 100%;
	margin: 5px 5%;
	height: 4px;
	background-color: #ffffff;
}

#navigation {
	opacity: 0;
	height: 0px;
}
#navigation:checked ~ ul {
	display: block;
}
#navigation:checked ~ .popupmenu {
	display: block;
}
#navigation:checked ~ label .burgericon {
	margin-top: 0px;
	margin-bottom: -16px;
}
#navigation:checked ~ label .burgericon div:first-of-type{
	rotate: 45deg;
}
#navigation:checked ~ label .burgericon div:last-child{
	rotate: -45deg;
	margin-top: -10px;
}
#navigation:checked ~ label .burgericon div:nth-child(2){
	display: none;
}




/**************** adapt layout to window size ****************/

@media (max-width: 800px) {
	.col-sidebar {
		display: none;
	}
	.col-content {
		width: 100%;
	}
	#topbar {
		display: inline-block;
	}
	#content {
		margin: 116px 0 0 0;
		}
}

@media (max-width: 610px) {
	.col-topright {
		display: none;
	}
	.col-60 {
		width: 100%;
	}
	.col-70 {
		width: 100%;
	}
	.col-team {
		width: 100%;
	}
}

@media (max-width: 480px) {
	#content {
		margin: 128px 0 0 0;
		}
	#topmenu {
		display:none;
	}
	.burgericon {
		display: block;
	}
}


/**************** expandable lists for service page ****************/

#expList ul, li {
    list-style: none;
    margin:0;
    padding:0;
    cursor: pointer;
}
#expList p {
    margin:0;
    display:block;
}
#expList li {
    line-height:120%;
    text-indent:0px;
    background-position: 1px 4px;
    padding-left: 0px;
    background-repeat: no-repeat;
}
/* Collapsed state for list element */
#expList .collapsed {
    background-image: url(img/collapsed.png);
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
    background-image: url(img/expanded.png);
}