/*-------------------------------------------------------------------------*/
/*	Columns
/*-------------------------------------------------------------------------*/
.clear {
	clear: both
}
.cover {
	position: relative;
}
.one_half {
	width: 48%;
}
.one_third {
	width: 30.5%;
}
.one_fourth {
	width: 22%;
}
.one_fifth {
	width: 16.8%;
}
.one_sixth {
	width: 13.33%;
}
.two_fifth {
	width: 37.6%;
}
.two_third {
	width: 65.33%;
}
.three_fifth {
	width: 58.4%;
}
.three_fourth {
	width: 74%;
}
.four_fifth {
	width: 67.2%;
}
.five_sixth {
	width: 82.67%;
}
.one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth {
	position: relative;
	margin-right: 4%;
	margin-bottom: 20px;
	float: left;
}
.column-last {
	margin-right: 0!important;
	clear: right;
}
/*-------------------------------------------------------------------------*/
/*	Panel
/*-------------------------------------------------------------------------*/

.panel, .panelcollapsed {
	background-color: #eee;
	margin: 5px;
	padding: 0px 0px 5px;
	width: 100%;
	border: 1px solid #999;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}
/* panel heading */
.panel h2, .panelcollapsed h2 {
	font-size: 18px;
	font-weight: normal;
	margin: 0px;
	padding: 4px;
	background: #CCC url(inc/js/panel/arrow-up.gif) no-repeat center right;
	border-bottom: 1px solid #999;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-top: 1px solid #FFF;
	border-right: 1px solid #FFF;
	border-left: 1px solid #FFF;
	color: #333333;
}
/* panel heading on rollover */
.panel h2:hover, .panelcollapsed h2:hover {
	background-color: #666666;
	color: #FFFFFF;
}
/* heading of a collapsed panel */
.panelcollapsed h2 {
	background-color: #CCC;
	background-image: url(inc/js/panel/arrow-dn.gif);
	background-repeat: no-repeat;
	background-position: center right;
	border-color: #CCC;
}
/* panel content - do not set borders or paddings */
.panelcontent {
	padding: 4px 10px 10px 10px;
	background-color: #EEE;
	overflow: hidden;
}
/* collapsed panel content */
.panelcollapsed .panelcontent {
	display: none;
}


/*-------------------------------------------------------------------------*/
/*	Tabs
/*-------------------------------------------------------------------------*/

div.simpleTabs { padding:0px; }
ul.simpleTabsNavigation { margin:0 10px; padding:0; text-align:left; }
ul.simpleTabsNavigation li { list-style:none; display:inline; margin:0; padding:0; }
ul.simpleTabsNavigation li a { border:1px solid #E0E0E0; padding:3px 6px; background:#F0F0F0; font-size:14px; text-decoration:none;  }
ul.simpleTabsNavigation li a:hover { background-color:#F6F6F6; }
ul.simpleTabsNavigation li a.current { background:#fff; color:#222; border-bottom:1px solid #fff; }
div.simpleTabsContent { border:1px solid #E0E0E0; padding:5px 15px 15px; margin-top:3px; display:none; }
div.simpleTabsContent.currentTab { display:block; }



/*-------------------------------------------------------------------------*/
/*	ToolTip
/*-------------------------------------------------------------------------*/

#tooltip{
	position: absolute;
	border: 1px solid #333;
	background-color: #CCCCCC;
	padding: 2px 5px;
	color: #666;
	display: none;
	}	
	
	
/*-------------------------------------------------------------------------*/
/*	blockquote
/*-------------------------------------------------------------------------*/


blockquote {
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: 0px top;
	padding-left: 45px;
	font-style: italic;
	font-size: 16px;
	font-family: Georgia,"Times New Roman",Times,serif;
	background-image: url(inc/js/web_element/quotes.png);
	
}

/*-------------------------------------------------------------------------*/
/*	 Callout Boxes
/*-------------------------------------------------------------------------*/
.product_callout {
border-radius:10px 10px 10px 10px;
padding:20px 35px 35px 35px;
position:relative;
}

.callout_light{
background: url(inc/js/web_element/callout-bg-light.png) left bottom repeat-x;
border:1px solid #EEE;
}

.callout_dark{
background: #555555 url(inc/js/web_element/callout-bg-dark.png) left bottom repeat-x;
border:1px solid #555;
}

.callout_red{
background: #b51423 url(inc/js/web_element/callout-bg-red.png) left bottom repeat-x;
border:1px solid #6a1119;
}

.callout_red h3, .callout_red p{
color:#FFF;
}

.callout_dark h3, .callout_dark p{
color:#FFF;
}

/*-------------------------------------------------------------------------*/
/*	 toTop jQuery Plugin
/*-------------------------------------------------------------------------*/

#toTop { z-index:9999; display:none; text-decoration:none; position:fixed; bottom:10px; right:10px; overflow:hidden; width:35px; height:35px; border:none; text-indent:100%; background:url(web_element/ui.totop.png) no-repeat left top; }
#toTopHover { background:url(web_element/ui.totop.png) no-repeat left -35px; width:35px; height:35px; display:block; overflow:hidden; float:left; opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0); }
#toTop:active, #toTop:focus { outline:none; }



/*-------------------------------------------------------------------------*/
/*	 responsive Youtube Modul
/*-------------------------------------------------------------------------*/


/* =============================== Responsive Youtube Video 

<div class="video-container">
         <iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
</div>


==============================================*/

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ===========================================

ICON CODES 

==============================================*/
.icon_64 {
	display: inline-block;
	height: 64px;
	margin: 6px;
	text-indent: 20px;
	vertical-align: middle;
	width: 64px
}
.icon_64:hover {
	opacity: 0.9
}
.icon_48 {
	display: inline-block;
	height: 48px;
	margin: 6px;
	text-indent: 20px;
	vertical-align: middle;
	width: 48px
}
.icon_48:hover {
	opacity: 0.9
}
.icon_32 {
	display: inline-block;
	height: 32px;
	margin: 6px;
	text-indent: 20px;
	vertical-align: middle;
	width: 32px
}
.icon_32:hover {
	opacity: 0.9
}
.icon_24 {
	display: inline-block;
	height: 24px;
	margin: 6px;
	text-indent: 20px;
	vertical-align: middle;
	width: 24px
}
.icon_24:hover {
	opacity: 0.9
}
.icon_16 {
	display: inline-block;
	height: 16px;
	margin: 2px;
	text-indent: 20px;
	vertical-align: middle;
	width: 16px
}
.icon_16:hover {
	opacity: 0.9
}

.phone {
	background: url(images/phone2.png) no-repeat;
	background-size: 100% 100%
}

.mail {
	background: url(images/mail2.png) no-repeat;
	background-size: 100% 100%
}

.mobile {
	background: url(images/mobile2.png) no-repeat;
	background-size: 100% 100%
}

.mobile2 {
	background: url(images/mobile3.png) no-repeat;
	background-size: 100% 100%
}


.map {
	background: url(images/map.png) no-repeat;
	background-size: 100% 100%
}

.map2 {
	background: url(images/map2.png) no-repeat;
	background-size: 100% 100%
}

.fax {
	background: url(images/fax2.png) no-repeat;
	background-size: 100% 100%
}


/* ===========================================

IMG ROUND CORNERS AND SHADOW 

==============================================*/
.schatten {border-radius: 0px;
  -webkit-box-shadow: 0px 0px 3px grey;
-moz-box-shadow: 0px 0px 3px grey;
box-shadow: 0px 0px 3px grey;
  	background-color: #FFFFFF;
	border: 0px solid #dddddd;
	padding: 2px;
	max-width: 97%;
 	 height: auto;
 	 width: auto;}
	 
	 





/*-------------------------------------------------------------------------*/
/*	 Responsive scrollabele Table
/*-------------------------------------------------------------------------*/
/* Basic table styling */
	table {
		/*width:100%;*/
		border-spacing:0;
		border-collapse:collapse;
	}
	table,
	th,
	td {
		border:0px solid #ccc;
	}
	th,
	td {
		padding:6px 8px;
		vertical-align:top;
	}
	caption,
	th {
		font-weight:bold;
		text-align:left;
	}
	thead th {
		background:#f3f3f3;
		white-space:nowrap;
	}

	/* Scrollable table styling */
	.scrollable.has-scroll {
		position:relative;
		overflow:hidden; /* Clips the shadow created with the pseudo-element in the next rule. Not necessary for the actual scrolling. */
	}
	.scrollable.has-scroll:after {
		position:absolute;
		top:0;
		left:100%;
		width:50px;
		height:100%;
		border-radius:10px 0 0 10px / 50% 0 0 50%;
		box-shadow:-5px 0 10px rgba(0, 0, 0, 0.25);
		content:'';
	}

	/* This is the element whose content will be scrolled if necessary */
	.scrollable.has-scroll > div {
		overflow-x:auto;
	}

	/* Style the scrollbar to make it visible in iOS, Android and OS X WebKit browsers (where user preferences can make scrollbars invisible until you actually scroll) */
	.scrollable > div::-webkit-scrollbar {
		height:12px;
	}
	.scrollable > div::-webkit-scrollbar-track {
		box-shadow:0 0 2px rgba(0,0,0,0.15) inset;
		background:#f0f0f0;
	}
	.scrollable > div::-webkit-scrollbar-thumb {
		border-radius:6px;
		background:#ccc;
	}
	
.table td {
		border:1px solid #ccc;
	}  
	
	
	/*-------------------------------------------------------------------------*/
/*	 Social Switch Buttons
/*-------------------------------------------------------------------------*/
	
	
	.dc_social_switch32 {
	display: inline-block;
	height: 32px;
	margin: 2px;
	text-decoration: none;
	text-indent: -999em;
	vertical-align: middle;
	width: 32px;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out
}
.dc_social_switch32:hover {
	background-position: 0 -42px
}
.facebook_switch {
	background: url(images/switch_facebook.png) no-repeat
}

.flickr_switch {
	background: url(images/switch_flickr.png) no-repeat
}

.googleplus_switch {
	background: url(images/switch_googleplus.png) no-repeat
}
.linkedin_switch {
	background: url(images/switch_linkedin.png) no-repeat
}

.pinterest_switch {
	background: url(images/switch_pinterest.png) no-repeat
}
.skype_switch {
	background: url(images/switch_skype.png) no-repeat
}
.twitter_switch {
	background: url(images/switch_twitter.png) no-repeat
}
.twitter2_switch {
	background: url(images/switch_twitter2.png) no-repeat
}

.vimeo_switch {
	background: url(images/switch_vimeo.png) no-repeat
}
.youtube_switch {
	background: url(images/switch_youtube.png) no-repeat
}
.xing_switch {
	background: url(images/switch_xing.png) no-repeat
}