/*
Theme Name:     Hela Montagebau
Theme URI:      http://www.hela-montagebau.de
Description:    Template, basierend auf Roots
Author:         wagnergraphics - Torsten Wagner
Author URI:     http://www.wagnergraphics.de
License:        wagnergraphics
License URI:    http://www.wagnergraphics.de
Template:       roots
Version:        1.0
*/


/* latin */
@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Droid Sans Regular'), local('DroidSans-Regular'), url(
fonts/DroidSans-webfont.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Droid Sans Bold'), local('DroidSans-Bold'), url(fonts/DroidSans-Bold-webfont.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}





/* ==========================================================================
   Barrierefreiheit / WCAG Helfer-Klassen
   ========================================================================== */

/* Text, der nur für Screenreader gedacht ist, visuell verstecken */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* Der Skip-Link wird sichtbar, wenn er den Tastatur-Fokus erhält */
.skip-link:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #333; /* Farbe an dein Theme anpassen */
	display: block;
	font-size: 1.1em;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 20px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Muss über dem fixierten Header liegen */
}


/* =============================================================================
   Body und allgemeine Auszeichnungen 
   ========================================================================== */

body { 
	padding-top: 0px;
	background-color: #fff;
	font-size: 15px !important;
	line-height: 24px !important;
	font-family:'Droid Sans', sans-serif;
	font-weight: normal;
	color: #222; 
	background: url(images/lkw.jpg) no-repeat center center fixed;
	background-size: cover;
	font-smoothing: antialiased;	
}
p {
	font-size: 1em;
	line-height: 1.4em;
	font-family:'Droid Sans', sans-serif;
	margin: 0 0 0.8em 0;
 }

a, a:visited { color: #000; font-weight: bold;}
a:hover { text-decoration:none; color: #FC0; }


h1 { font-size: 28px; font-weight:700; margin-top: 5px; line-height: 40px !important;}
h2 { font-size: 20px; margin-top: 55px; margin-bottom: 15px; line-height: 24px; }
h3 { font-size: 18px; margin-top: 20px; margin-bottom: 10px; }
h2:first-child, h3:first-child { margin-top: 0px;}
.multicolumn h3 { 
	break-before: column; 
	margin-top: 2em;
}

hr {
    height: 1px;
	margin: 4em 0;
	border-color: #000;
	border-style: 1px solid;
    border-left: 0 none;
    border-right: 0 none; 
	border-top: 0 none;
}


#main {
    border-bottom: none;
    padding: 40px 0;
}

::selection { background: #FC0 !important; color: #000; text-shadow: none; }
::-moz-selection  { background: #FC0 !important; color: #000; text-shadow: none; }







/* =============================================================================
   Zitate
   ========================================================================== */
blockquote {
	background: #FC0;
    margin: 0 0 1.5em 0em;
	border: 1px #000 dashed; 
    padding: 20px;
	font-size: 1.4em;
	line-height: 1.8em;
	font-style: italic;
}







/* =============================================================================
   Listen
   ========================================================================== */
#main ul {
	margin: 20px 0 20px 0.5em;
	padding: 0 0 0 30px;	
	list-style: outside;
}
#main li {
	padding-left: 0px;
	margin-bottom: 10px;
	font-size: 1em;
	line-height: 1.4em !important;
}






/* =============================================================================
   Bilder, etc.
   ========================================================================== */
img { max-width: 99%; }
#main img { border: 1px solid #000 !important; }
#logo-wrap img { min-width: 100%; }







/* =============================================================================
   Header
   ========================================================================== */
   
#bloginfo {
	font-size: 1.2em;
	line-height: 1.6em;
	font-style: italic;
	color: #FFF;
	padding: 20px;
	margin-top: 5px;
}

#seitentitel {
	background-color: #FC0;
	box-shadow: inset 0px 3px 2px 0px rgba(0, 0, 0, 0.4); 
}
   
   


/* =============================================================================
   Hauptnavigation
   ========================================================================== */

.navbar-inner {
    background-color: #2C2C2C;
    background-image: linear-gradient(center top , #333333, #222222);
    background-repeat: repeat-x;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 -1px 0 rgba(0, 0, 0, 0.1) inset;
}

#nav-main {
	position: absolute;
	bottom: 50px;
	right: 0;
	overflow: hidden;
}
.lt-ie9 #nav-main {		
	position: relative\9; /* nur für den IE7 und IE8 */
	top: 20px\9;   /* nur für den IE7 und IE8 */
}


.navbar-fixed-top {
    left: 0;
    position: relative;
    right: 0;
    top: 0;
    z-index: 1030;
}

#nav-main ul {
	position: relative;
	list-style: none;
	margin: 0px 0 0px 10px;
	bottom: 0;
	padding: 0;
}

#nav-main ul li { 
	position: relative;
	padding: 0; 
	margin: 0 10px 0 0; 
}

.navbar {
    margin-bottom:0;
    overflow: visible;
}

.navbar .nav > li > a {
    color: #FC0;
    float: none;
    line-height: normal;
    text-decoration: none;
    text-shadow: 0 0px 0 rgba(0, 0, 0, 0.25);
	font-weight: bold;
	font-size: 1.5em;
	
	font-size/*\**/: 1.3em\9;   /* nur für den IE7 und IE8 */	
}   


.navbar .nav .active > a, .navbar .nav .active > a:hover {
    background-color: transparent;
    color: #FFF;
}
.navbar .nav > li > a:hover,
.navbar .dropdown-menu a:hover {
    background-color: #000;
	border-radius: 6px;
}
  
 











/* =============================================================================
   Inhalte
   ========================================================================== */
#wrap { 
	background-color: #fff;
	background-color: rgba(255, 255, 255, 0.95);
	margin: 0;
	padding: 20px 0 40px 0;
}

.teaserimage_startseite { 
	width: 100%;
	height: 150px;
	background: url(images/lkw.jpg) no-repeat center center fixed;
	background-size: cover;
}









/* =============================================================================
   Footer
   ========================================================================== */

#footer { 
	background-color: #000;
	color: #FC0;
	padding: 20px;
	background-color: #2C2C2C;
    background-image: linear-gradient(center top , #333, #111);
	font-size: 15px; 
}

#footer p, #footer a  { font-size: 13px; }
#footer a { color: #FC0; font-weight: normal; }
#footer a:hover { color: #FFF; }

#footer h3 { 
	color: #FC0;
	font-size: 16px; 
	margin-top: 0px;
}

#footer hr {
	border-color: #FC0;
	margin: 1em 0;
}


#menu-footer-navigation {}
#footer ul.menu, #footer ul { 
	padding: 0 0 0 0px; 
	list-style-type: none; 
	list-style-position: inside;
}
#footer ul.menu li, #footer ul li { margin: 12px 0 12px 0;}
#footer ul.menu li a, #footer ul li a  { text-decoration:none; }
#footer ul.menu li a:hover, #footer ul li a:hover  { background-color: transparent; }

/* AddThis */
.addthis {
	width: 95%;
	margin-bottom: 2rem;
	border-radius: 2px;
	padding-bottom: 2em;
	border-bottom: 1px solid rgba(255, 205, 0, 0.1);
}

.widget_nav_menu {	
	padding-bottom: 0em;
	margin-bottom: 0em;	
	border-bottom: none;
}

p small {
    color: #fc0;
}

#footer .nav { margin-bottom: 0px; }








/* =============================================================================
   Forms
   ========================================================================== */
input, textarea { 
	box-sizing: border-box;
	width: 100%;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3) inset;
	border: 1px solid rgba(0, 0, 0, 0.5); 
	border-radius: 0px;
	margin-bottom: 4px;
	font-family: 'Droid Sans', sans-serif;
	font-size: 1.1em;
	color: #000;
	padding: 8px;
}
input:focus, textarea:focus {
	color: #000; 
	background: rgba(255, 255, 255, 1.0);
	border-color:rgba(255, 205, 0, 0.8);
	box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.5),0 0 8px rgba(255, 205, 0, 0.6);
	outline:0;
	outline:thin dotted \9;
}






/* Suchfeld */
#searchform:after { content:attr(<br>) }
#searchform #searchform {	text-align: left; float: none; }
#searchform #placeholder { text-indent: 60px; color: #000;}
#searchform #searchform div { margin: 0; }
#searchform #s {
	float: left;
	height: auto;
	width: 25%;
	transition-duration: 400ms;
	transition-property: width, background;
	transition-timing-function: ease;
	padding: 4px 10px 4px 28px;
	background: url(images/search.png) no-repeat 5px 6px rgba(255, 255, 255, 0.5);
	color: #222;
	border-radius: 0px;
}
#searchform #s:focus { 
	width: 100%; 
	background: url(images/search.png) no-repeat 5px 6px rgba(255, 255, 255, 0.95);
}
#searchform #searchsubmit { display: none; }
#searchform .only-search #searchform { top: 5px; z-index: 1; }
#searchform .only-search #s {}
#searchform .only-search #s,
#searchform .only-search #s:focus { width: 100%; }
#searchform .only-search #s:focus { background-color: #000; }
#searchform .with-image #searchform {	top: auto;	bottom: -27px; max-width: 195px; }
#searchform .only-search + #access div { padding-right: 205px; }
input#searchsubmit { display: none; }









/* =============================================================================
   Artikel
   ========================================================================== */
#main article { margin-bottom: 60px; }

article footer { 
	margin-top: 20px;
	text-align: right;
} 


.multicolumn {	   
	column-count: 2;
	column-gap: 120px;
    column-rule: solid 1px #777;
}





.shariff-main {
    margin-bottom: 1em;
}








/* =============================================================================
   Animationen und optische Ergaenzungen
   ========================================================================== */

#logo, #nav-main a, a, input, textareas {
	transition-duration: 300ms;
	transition-property: All;
	transition-timing-function: ease;
}

.alert p { color: #000; }









/* =============================================================================
   Media Queries
   ========================================================================== */

@media (max-width:1200px) {
	
	#nav-main { bottom: 5px !important; }	
	#nav-main ul li { 
		font-size: 0.9em;
		padding: 0;
		float: left;
		margin: 0 5px 0 5px;		
		line-height: none;
	}
	.navbar .nav > li > a { padding: 2px 6px; }	
	
}



@media (max-width:979px) {	

	p, #main li	{ font-size: 0.9em; }

	.navbar-fixed-top .navbar-inner { padding: 0; }		
	#logo-wrap img { margin-left: 10px; }
	
	#nav-main { bottom: 2px !important; }	
	#nav-main ul { margin: 0 0 0 -10px; }	
	#nav-main ul li { 
		font-size: 18px;
		padding: 0;
		float: left;
		margin: 0 5px 0 5px;		
		line-height: none;
	}
	.navbar .nav > li > a { padding: 2px 6px; font-size: 1em; }	

}


@media (min-width:768px) and (max-width:979px) {

	.navbar-inner .span8 { width: 65%; float: right; }
	#bloginfo {	padding: 0; margin-bottom: 20px; }
	
}

@media (max-width:768px) { 	
	p, #main li {
		font-size: 0.8em;	
		line-height: 1.1em;
		margin-bottom: 5px;
 	}
}
	
@media (max-width:767px) {
	
	body {
		padding-left: 0px;
		padding-right: 0px;
	}
	
	#logo-wrap img { margin-left: 0px; }
	#logo-wrap { margin: 0 60px 0 60px; }
	
	#bloginfo { padding: 30px 60px 10px 60px; font-size: 1.4em; line-height: 1.6em; }
	
	.navbar-fixed-top {
		margin-left: 0px;
		margin-right: 0px;
	}
	
	#seitentitel {
		padding-left: 10px;
	}
	
	#main {	padding: 40px 10px;	}	
	#nav-main {	position: relative; margin-bottom: 20px; }
	#nav-main ul {	margin: 5px 0 !important;}
	#nav-main  ul li {	margin: 0 auto; width: 50%;	text-align: center;	}
	#nav-main ul li a {  padding: 15px;	font-size: 1.3em; }

	.widget-first, .addthis { 
		padding-bottom: 2em;
		margin-bottom: 2em;	
		border-bottom: 1px solid rgba(255, 205, 0, 0.1);
	}
	
	h2, h2:first-child { margin-top: 40px; }
	
	.multicolumn { column-count: 1; }
	
}



@media handheld, only screen and (max-width: 480px){
	
	#bloginfo { font-style: normal; }
	
	#nav-main ul li {width: 100% !important; }
	
	#bloginfo { padding: 30px 60px 10px 60px; font-size: 1em; line-height: 1.6em; }
		
}