@charset 'UTF-8';


/*********************************************************************************/
/* Basic                                                                         */
/*********************************************************************************/


@-ms-viewport{
  width: device-width;
}

	html {
		height: 100%;
		width: 100%;
		margin: 0px;
	}

	body {
		font-family: 'Source Sans Pro', sans-serif;
		background: #fff;
		height: 100%;
		padding-top: 0;
		padding-left: 0px;
		padding-right: 0px;
		margin: 0;
		background: 
		url(http://www.berde.de/2015/templates/EyeCandy/backgrounds/washi.png) repeat;



	}

		body.is-loading *,
		body.is-resizing *
		{
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-o-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-o-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
		}




.container {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    background-image: url('../images/bottom-image2.png');
    height:170px;
}

.container div {
    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;         /* OLD - Firefox 19- */
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.column_center {
    -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
    -ms-flex-order: 2;              /* TWEENER - IE 10 */
    -webkit-order: 2;               /* NEW - Chrome */
    order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}




#header {
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;

    height:auto;
    width:20%;
    float:left;
    padding:10px; 
}
#section {
    width:70%;
    height:60%;
    float:left;
    padding:10px; 
    overflow-y: hidden;
    overflow-x: hidden;
    padding-top: 10px;
    padding-bottom: 5px;

}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}

#footernew {


    color:white;
    clear:both;
    text-align:center;
    padding:0px; 
    height:170px;
    width:1284px;
    margin:0px;
    vertical-align:top;
    
}


#popupimage {

    color:white;
    clear:both;
    text-align:center;
    padding:0px; 
    width:600px;
    height:293px;
    margin:0px;
    vertical-align:top;
    
}

h1 {
   font-family: 'Raleway', sans-serif;
   color:#6d6d6d; 
   letter-spacing:1px;
   font-size:1.5em;

}

.whitetitle {
   font-family: 'Raleway', sans-serif;
   color:#ffffff; 
   letter-spacing:1px;
   font-size:1em;

}

.greytitle {
   font-family: 'Raleway', sans-serif;
   color:#6d6d6d; 
   letter-spacing:1px;
   font-size:1.2em;
   font-weight:bold;
   text-align:center;
   padding-bottom:10px;

}




.scrollbar{
width:100%;
height:750px;
background-color:transparent;
margin:10px 10px 10px 10px;
overflow-y:scroll;
float:left;
padding: 0px;
border: 0px solid #c5c5c5;
}
.content{
height:100%;
}

#css_version::-webkit-scrollbar {
    width: 11px;
}

#css_version::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 11px;
    border-radius: 11px;
}

#css_version::-webkit-scrollbar-thumb {
    -webkit-border-radius: 11px;
    border-radius: 11px;
    background: rgba(230,230,230,0.8);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
#css_version::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(156,178,197,0.4);
}



/** tooltip styles
  * based on http://www.flatypo.net/tutorials/how-to-create-animated-tooltips-css3-hiperlink/ 
 **/
a.tooltip{
  position: relative;
  display: inline;
}
a.tooltip:after{
  display: block;
  visibility: hidden;
  position: absolute;
  bottom: 0;
  left: 20%;
  opacity: 0;
  content: attr(data-tool); /* might also use attr(title) */
  height: auto;
  min-width: 100px;
  padding: 5px 8px;
  z-index: 999;
  color: #fff;
  text-decoration: none;
  text-align: center;
  background: rgba(0,0,0,0.85);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

a.tooltip:before {
  position: absolute;
  visibility: hidden;
  width: 0;
  height: 0;
  left: 50%;
  bottom: 0px;
  opacity: 0;
  content: "";
  border-style: solid;
  border-width: 6px 6px 0 6px;
  border-color: rgba(0,0,0,0.85) transparent transparent transparent;
}
a.tooltip:hover:after{ visibility: visible; opacity: 1; bottom: 20px; }
a.tooltip:hover:before{ visibility: visible; opacity: 1; bottom: 14px; }

a.tooltip.animate:after, a.tooltip.animate:before {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}


/* tips on bottom */
a.tooltip.bottom:after { bottom: auto; top: 0; }
a.tooltip.bottom:hover:after { top: 28px; }
a.tooltip.bottom:before {
  border-width: 0 5px 8.7px 5px;
  border-color: transparent transparent rgba(0,0,0,0.85) transparent;
  top: 0px
}
a.tooltip.bottom:hover:before { top: 20px; }


/* tips on the right */
a.tooltip.right:after { left: 100%; bottom: -45%; }
a.tooltip.right:hover:after { left: 110%; bottom: -45%; }
a.tooltip.right:before {
  border-width: 5px 10px 5px 0;
  border-color: transparent rgba(0,0,0,0.85) transparent transparent;
  left: 90%;
  bottom: 2%;
}
a.tooltip.right:hover:before { left: 100%; bottom: 2%; }


/* tips on the left */
a.tooltip.left:after { left: auto; right: 100%; bottom: -45%; }
a.tooltip.left:hover:after { right: 110%; bottom: -45%; }
a.tooltip.left:before {
  border-width: 5px 0 5px 10px;
  border-color: transparent transparent transparent rgba(0,0,0,0.85);
  left: auto;
  right: 90%;
  bottom: 2%;
}
a.tooltip.left:hover:before { right: 100%; bottom: 2%; }


/* tooltip colors (add your own!) */
a.tooltip.blue:after { background:#5f87c2; }
a.tooltip.blue:before { border-color: #5f87c2 transparent transparent transparent; }
a.tooltip.bottom.blue:before{ border-color: transparent transparent #5f87c2 transparent; }
a.tooltip.right.blue:before { border-color: transparent #5f87c2 transparent transparent; }
a.tooltip.left.blue:before { border-color: transparent transparent transparent #5f87c2; }



/* input field tooltips */
input + .fieldtip {
  visibility: hidden;
  position: relative;
  bottom: 0;
  left: 15px;
  opacity: 0;
  content: attr(data-tool);
  height: auto;
  min-width: 100px;
  padding: 5px 8px;
  z-index: 9999;
  color: #fff;
  font-size: 1.2em;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  background: rgba(0,0,0,0.85);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

input + .fieldtip:after {
  display: block;
  position: absolute;
  visibility: hidden;
  content:'';
  width: 0;
  height: 0;
  top: 8px;
  left: -8px;
  border-style: solid;
  border-width: 4px 8px 4px 0;
  border-color: transparent rgba(0,0,0,0.75) transparent transparent;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

input:focus + .fieldtip, input:focus + .fieldtip:after {
  visibility: visible;
  opacity: 1;
}


/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }


.blackout {
background-color:#000;
opacity:.7;
filter:alpha(opacity=70);
height:100%;
width:100%;
position:fixed;
top:0;
left:0;
z-index:100;
display:none;
cursor:pointer;
}

.closeBox {
color:#FFFFFF;
padding:8px;
float:right;
border-radius:0px;
cursor:pointer;
text-transform:uppercase;

}




#menu {
  position: fixed;
  left: 3%;
  top: 6%;
  width:210px;
  margin-top: -1.5em;
  background: url(http://www.berde.de/2015/templates/EyeCandy/backgrounds/washi.png) repeat;
  background-color: rgba(255,255,255,0.8);
  border:0px solid #9cb2c5;
  box-shadow: 2px 2px 20px 0px #888888;
  z-index:1000;
  padding:0px;

}

#top {
    background:url(http://www.berde.de/2015/images/logo-b.png) no-repeat no-repeat;
    background-color: #9cb2c5;
    width:100%;
    height:80px;
    padding:0px;
    color:white;
    vertical-align: middle;
    text-align:center;
    line-height:40px;
    letter-spacing: 3px;
}

#greyline {
    background-color: #6d6d6d;
    width:100%;
    height:3px;
    padding:0px;

}



#menu ul {
	list-style-type: none;
	padding:10px;
	letter-spacing: 1px;

}

#menu li{
     display: table-row;
}

#menu ul li a {
	text-decoration:none;
	color:#6d6d6d;

}


#menu ul li a:hover {
	font-weight:bold;

}

#menu li:before{
     content: "•";
     color: #9cb2c5;
     vertical-align: top;
     width: 15px;
     display: table-cell;
}



#productlink {
 	font-weight: bold;
 	letter-spacing: 1px;
 	text-decoration: none;
}

#productlink a:link {
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
}
#productlink a:visited {
	color: #ffffff;
	text-decoration: none;
}
#productlink a:hover {
	color: #000000;
	text-decoration: none;
}
#productlink a:active {
	color: #ffffff;
	text-decoration: none;
}

.arrow-up {
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	
	border-bottom: 5px solid black;
}

.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	
	border-top: 20px solid #f00;
}

.arrow-right {
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	
	border-left: 10px solid #9cb2c5;
	position: absolute;
	right: 0;
	width: 100px;
}

.arrow-left {
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	
	border-left: 10px solid #9cb2c5;
	position: absolute;
	left: 0;
	width: 100px;
}

#rectangle {
	width: 200px;
	height: 30px;
	background: #9cb2c5;
	display: table-cell;
	vertical-align:middle;
	text-align:left;
	border-left: 0px solid #6d6d6d;
	border-right: 0px solid #6d6d6d;
	border-bottom: 3px solid #6d6d6d;
	border-top: 0px solid #6d6d6d;
	padding-left: 10px;
	box-shadow: 2px 2px 20px 0px #888888;
}


#menu i {
	text-decoration:none;
	color:#6d6d6d;
	font-size: 0.2em;

}