/*
Theme Name: Umfahrung Wattwil
Theme URI: http://www.umfahrungwattwil.ch
Description: Template Umfahrung Wattwil
Author: Stadelmann Software Solutions
Author URI: http://www.stasoso.ch
*/

@charset "utf-8";

/* 1.0 Reset (eigene Datei; reset.css) */
/* 2.0 Preloader */
/* 3.0 Alignments (Ausrichtung) */
/* 4.0 Clearings */
/* 5.0 Typography (Allgemeine Einstellungen) */
/* 6.0 Forms (Formular) */
/* 7.0 Formatting (Strich; hr) */
/* 8.0 Lists (Liste) */
/* 9.0 Tables (Tabelle) */
/* 10.0 Links */
/* 11.0 Featured Image Hover (Vorzeigebilder) */
/* 12.0 Navigation */
/* 13.0 Layout */
	/* 13.1 Tools */
	/* 13.2 Allgemeines */
	/* 13.3 Header */
	/* 13.4 Front Page */
	/* 13.5 Regular Content */
	/* 13.6 Posts */
	/* 13.7 Pages */
		/* 13.7.1 Frontpage */
	/* 13.8 Footer */
/* 14.0 Media (Medien) */
	/* 14.1 Galleries (Galerie) */
/* 15.0 Media Queries */
/* 16.0 Print */

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}
/* IE 7 does not support max-width so default to width 100% */
/*.ie8 img {
	width:100%;
}*/

/*--------------------------------------------------------------
2.0 Preloader
--------------------------------------------------------------*/

/*--------------------------------------------------------------
3.0 Alignments
--------------------------------------------------------------*/

/*--------------------------------------------------------------
4.0 Clearings
--------------------------------------------------------------*/

/*--------------------------------------------------------------
5.0 Typography
--------------------------------------------------------------*/

/*--------------------------------------------------------------
6.0 Forms (Formular)
--------------------------------------------------------------*/
.h2-bemerkung {
	float: left;
	width: 20%;
}
.p-bemerkung {
	float: left;
	font-size: 1em;
	margin-top: 5px;
}

.nf-form-cont {
	margin-top: 60px;
}
.contact-element, .contact-content-more {
	display: -webkit-flex;
	display: flex;					/* wie float: alles nebeneinander */
	-webkit-flex-direction: row;
	flex-direction: row;			/* row oder column (kann für responsiv genutzt werden) */
	-webkit-align-items: stretch;
	align-items: stretch;			/* alles hat gleiche Höhe */
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;				/* bei zu vielen Elementen wird automatisch auf die nächste Zeile umgebrochen */
	margin-bottom: 10px;
}
.contact-element-more, .contact-content-more {
	margin-bottom: 0px;
}
.contact-more-name {
	display: -webkit-flex;
	display: flex;					/* wie float: alles nebeneinander */
	-webkit-flex-direction: column;
	flex-direction: column;			/* row oder column (kann für responsiv genutzt werden) */
	width: 50%;
}
.contact-more-plz {
	display: -webkit-flex;
	display: flex;					/* wie float: alles nebeneinander */
	-webkit-flex-direction: column;
	flex-direction: column;			/* row oder column (kann für responsiv genutzt werden) */
	width: 20%;
}
.contact-more-ort {
	display: -webkit-flex;
	display: flex;					/* wie float: alles nebeneinander */
	-webkit-flex-direction: column;
	flex-direction: column;			/* row oder column (kann für responsiv genutzt werden) */
	width: 80%;
}

.contact-element .contact-label {
	-webkit-flex-basis: 20%;
	flex-basis: 20%;
}
.contact-label label {
	clear: left;
	float: left;
	font-size: 1em;
	min-height: 15px;
	padding: 8px 0 4px 0px;
	vertical-align: middle;
}
.contact-label span {
	float: left;
	color: red;
	margin-left: 5px;
	padding-top: 8px;
}
.contact-element .contact-special {
	-webkit-flex-basis: 80%;
	flex-basis: 80%;
}
.contact-element .contact-content {
	-webkit-flex-basis: 80%;
	flex-basis: 80%;
	display: -webkit-flex;
	display: flex;
}
input[type="text"], input[type="email"], textarea {
	height: 40px;
	margin: 6px 0;
	padding: 0 5px;
	display: block;
	border: thin solid #B7B7B7;
	background: #F8F8F8;
	-webkit-flex-basis: 100%;
	flex-basis: 100%;
	
}
textarea {
	padding-top: 5px;
}
input[name="vorname"], input[name="nachname"] {
	-webkit-flex-basis: 45%;
	flex-basis: 45%;
}
input[name="vorname"], input[name="plz"] {
	margin-right: 10px;
}
input[name="vorname"], input[name="nachname"], input[name="plz"], input[name="ort"] {
	min-height: 40px;
}
input[name="plz"]{
	-webkit-flex-basis: 20%;
	flex-basis: 20%;
}
textarea[name="mitteilung"] {
	height: 150px;
}

.contact-content-more span {
	font-size: 10px;
	color: #8A8A8A;
}
input:focus, textarea:focus {
	box-shadow: 0 0 12px #3bb2de;
}
/*input:invalid, textarea:invalid {
	background-color: #ffffff;
	border: thin solid #333333;
}*/
#captcha-bild {
	float: left;
	margin-right: 3%;
	border: 1px solid #B4B1B1;
	height: 30px;
}
#captcha-eingabe {
	width: 70%;
}
input[type=submit], .g-recaptcha {
	float: left;
	width: 25%;
	height: 40px;
	text-align: center;
	margin-top: 30px;
	margin-left: 24.5%;
	margin-bottom: 50px;
	background: #3bb2de;
	color: #fff;
	font-weight: bold;
	font-size: 1.2em;
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
	border-image: none;
	border-style: solid;
	border-width: 0 0 1px;
	cursor: pointer;
	border-radius: 5px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
input[type=submit]:hover, .g-recaptcha:hover {
	color: #333333;
}
/*span.wpcf7-not-valid-tip {
	float: left;
	display: block;
	padding-left: 20px;
}*/

/*--------------------------------------------------------------
7.0 Formatting
--------------------------------------------------------------*/

/*--------------------------------------------------------------
8.0 Lists
--------------------------------------------------------------*/

/*--------------------------------------------------------------
9.0 Tables
--------------------------------------------------------------*/

/*--------------------------------------------------------------
10.0 Links
--------------------------------------------------------------*/

/*--------------------------------------------------------------
11.0 Featured Image Hover (Vorzeigebilder)
--------------------------------------------------------------*/

/*--------------------------------------------------------------
12.0 Navigation
--------------------------------------------------------------*/
.balken_oben {
	position: relative;
	width: 100%;
	float: left;
	border-bottom: 2px solid #3bb2de;
	margin-top: 30px;
	z-index: 10;
	height: 35px;
	/*background-image: url(http://www.umfahrungwattwil.ch/wp-content/themes/umfahrung/images/balken_oben.jpg);
	background-repeat:repeat-x repeat-y;*/
}
#suchen {
	/*width: 30%;*/
	float: right;
	padding: 0px 0px 0px 0px;
	margin: 10px 0 0 0;
}
#suchen form {
	width: 200px;
}
#suchen input.search-field{
	padding: 0;
	margin: 0;
}
#suchen input.search-field {
	width: 200px;
	font-size: 14px;
	border: thin solid #000;
	border-radius: 3px;
	float: right;
	padding-left: 5px;
	padding-right: 5px;
	height: 25px;
	margin-top: -10px;
}
#suchen input:focus {
	background: white;
}
#suchen input.search-submit {
	position: relative;
	right: -180px;
	top: -22px;
	padding: 0px;
	margin: 0px;
}
.entry-header, .page-header {
	margin-left: 0.65%;
}
.entry-content, .post {
	margin-top: 20px;
	margin-left: 0.65%;
}

/*--------------------------------------------------------------
13.0 Layout
--------------------------------------------------------------*/
/*--------------------------------------------------------------
13.1 Tools
--------------------------------------------------------------*/
/* Newsticker Tag der offenen Baustelle*/
.ticker {
 height: 25px;	
 background: #db052b;
 width: 100%;
 overflow: hidden;
 position: relative;
}
.ticker h3 {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 25px;
 text-align: left;
 color: #ffffff;
 font-size: 14px;
 /* Apply animation to this element */	
 -moz-animation: ticker 15s linear infinite alternate;
 -webkit-animation: ticker 15s linear infinite alternate;
 animation: ticker 15s linear infinite alternate;
}
/* Move it (define the animation) */
@-moz-keyframes ticker {
 0%   { -moz-transform: translateX(70%); }
 100% { -moz-transform: translateX(0%); }
}
@-webkit-keyframes ticker {
 0%   { -webkit-transform: translateX(70%); }
 100% { -webkit-transform: translateX(0%); }
}
@keyframes ticker {
 0%   { 
 -moz-transform: translateX(70%); /* Firefox bug fix */
 -webkit-transform: translateX(70%); /* Firefox bug fix */
 transform: translateX(70%); 		
 }
 100% { 
 -moz-transform: translateX(0%); /* Firefox bug fix */
 -webkit-transform: translateX(0%); /* Firefox bug fix */
 transform: translateX(0%); 
 }
}

/*--------------------------------------------------------------
13.2 Allgemeines
--------------------------------------------------------------*/
body {
	background-color: white;
	font-family: Arial, Helvetica, serif;
}
#outer {
	width: 88.5%;
	max-width: 1232px;
	height: 100%;
	padding-left: 0.75%;
	padding-right: 0.75%;
	margin: auto;
	clear: none;
	float: none;
	vertical-align: top;
}

div.tabelle {
	clear:both;
}
div.text {
	clear:both;
}

/*--------------------------------------------------------------
13.3 Header
--------------------------------------------------------------*/
header {
	height: 182px;
}
#ktsg {
	width: 19.33%;
	margin-top: 4%;
	margin-left: 0.65%;
	float: left;
}
#ktsg a {
	text-decoration: none;
}
#ktsg p {
	font-size: 12px;
	font-weight: bold;
	color: black;
	line-height: 1.0;
}
#Haupttitel {
	width: 60%;
	float: left;
	text-align: center;
	background-image: url(http://www.umfahrungwattwil.ch/wp-content/themes/umfahrung/css/www.umfahrungwattwil.ch/wp-content/themes/umfahrung/images/logo.gif);
	background-size: 200px auto;
	background-repeat: no-repeat;
}
#wappen {
	float: left; 
	width: 20%;
	margin-top: 4%;
	cursor: pointer;
	text-align: right;
	}

/*--------------------------------------------------------------
13.5 Regular Content
--------------------------------------------------------------*/
#content {
	width: 100%;
	float: left;
	background: white;
	padding-top: 30px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 60px;
	margin-left: 0px;
	overflow: auto;
  	z-index: 0;
}
#content-gesamt {
	width: 98.7%;
	padding-left: 0.65%;
	padding-right: 0.65%;
	float: left;
}
#content-gesamt h2 { padding-bottom: 20px; }
#content-gesamt h3 { padding-bottom: 15px; }
#content-left {
	width: 77.6%;
	min-height: 400px;
	padding-left: 0.65%;
	padding-right: 1.62%;
	float: left;
	border-right: thin solid #3bb2de;
}
#content-left h2 { padding-bottom: 20px; }
#content-left h3 { padding-bottom: 15px; }


#content-right {
	width: 17.69%;
	float: left;
	padding-left: 1.62%;
	padding-right: 0.65%;
	text-align: left;
}
.news { padding-top: 10px; }
.news li {
	background: url(/wp-content/themes/umfahrung/images/pfeil.png) 0 14px no-repeat;
	padding: 4px 0 0 25px;
	line-height: 2.1em;
	list-style-type: none;
}
.news li a {
	font-size: 0.75em;
}
#content-right #pfeil {
	float: left;
	padding: 5px 5px 0 0;
}
#content-right #text {
	float: left;
	padding-top: 10px;
	padding-left: 1.62%;
	text-align: left;
	font-size: 0.75em;
}

/*--------------------------------------------------------------
13.6 Pages
--------------------------------------------------------------*/
/*--------------------------------------------------------------
13.7.6 Front Page
--------------------------------------------------------------*/
#startseite-links {
	margin-top: 50px;
}
#startseite-titel {
	width: 430px;
	float: left;
	margin-left: 20px;
	font-size: 2.2em;
	font-weight: bold;
	text-align: center;
	line-height: 1em;
}
#startseite-titel-gesamt {
	width: 100%;
	float: left;
	font-size: 2.2em;
	font-weight: bold;
	text-align: center;
	line-height: 1em;
	margin-bottom: 10px;
}
#startseite-Umfahrung {
	width: 100%;
	float: left;
	text-align: center;
}
#karte_uebersicht {
	margin: 20px 0px 0px 0px;
	padding: 0px;
	border: thin solid #6c6c6c;
	float: left;
	text-align: center;
	width: 100%;
	background-color:#FBFBFB;
}
#karte1 {width:7.2240%; float:left;}
#karte2 {width:10.1461%; float:left;}
#karte3 {width:4.0584%; float:left;}
#karte4 {width:8.7662%; float:left;} /*8.7805*/
#karte5 {width:4.9513%; float:left;}
#karte6 {width:3.0032%; float:left;}
#karte7 {width:3.8149%; float:left;}
#karte8 {width:1.3799%; float:left;}
#karte9 {width:6.5747%; float:left;}
#karte10 {width:9.2532%; float:left;}
#karte11 {width:12.5812%; float:left;}
#karte12 {width:1.6234%; float:left;}
#karte13 {width:8.5227%; float:left;}
#karte14 {width:0.9740%; float:left;}
#karte15 {width:2.0292%; float:left;}
#karte16 {width:8.4416%; float:left;}
#karte17 {width:1.8669%; float:left;}
#karte18 {width:4.7078%; float:left;}

#karte_uebersicht img {
	max-width: 100%;
	height: auto;
}
.uebersicht {
	float:left;
}

/*--------------------------------------------------------------
13.7.2 Gesamtprojekt
--------------------------------------------------------------*/
.geologielaengenprofil { margin-top: 80px; }

/*--------------------------------------------------------------
13.7.3 Teilprojekt
--------------------------------------------------------------*/
#projektleiter {
	border: thin solid #3bb2de;
	padding: 10px;
	margin-left: 70px;
	margin-top: 20px;
	float: left;
}

/*--------------------------------------------------------------
13.7.4 Information
--------------------------------------------------------------*/
.content-link {
	margin-bottom: 20px;
}
/*--------------------------------------------------------------
13.7.5 Bildergalerie
--------------------------------------------------------------*/

/*--------------------------------------------------------------
13.7.6 Webcam
--------------------------------------------------------------*/
#webcam {
	width: 70%;
	padding-right: 3%;
	float: left;
}
#webcam_bild1 {
	padding-bottom: 50px;
}
#titel_webcam1 {
	width: 50%;
	float: left;
}
#datum_webcam1 {
	width: 44%;
	text-align: right;
	float: left;
}
#webcam_bild2 {
	padding-bottom: 50px;
}
#titel_webcam2 {
	width: 50%;
	float: left;
}
#datum_webcam2 {
	width: 44%;
	text-align: right;
	float: left;
}
#webcam_bild3 {
	padding-bottom: 50px;
}
#titel_webcam3 {
	width: 50%;
	float: left;
}
#datum_webcam3 {
	width: 44%;
	text-align: right;
	float: left;
}
#webcam_bild4 {
	padding-bottom: 50px;
}
#titel_webcam4 {
	width: 50%;
	float: left;
}
#datum_webcam4 {
	width: 44%;
	text-align: right;
	float: left;
}
#webcam_uebersicht {
	position: relative;
	width: 27%;
	float: left;
}
#webcam_uebersicht_bild img {
	width: 100%;
	background-color: #fbfbfb;
	border: thin solid #6c6c6c;
	z-index: 0;
}

#webcam1-1 {
	position: absolute;
	width: 12%;
	top: 89%;
	left: 57%;
	z-index: 1;
}
#webcam1-1 img {
	width: 100%;
}
#webcam2-1 {
	position: absolute;
	width: 12%;
	top: 85%;
	left: 63%;
	z-index: 2;
}
#webcam2-1 img {
	width: 100%;
}
#webcam3-1 {
	position: absolute;
	width: 33%;
	top: 4%;
	left: 47%;
	z-index: 2;
}
#webcam3-1 img {
	width: 100%;
}
#webcam4-1 {
	position: absolute;
	width: 30%;
	top: 81%;
	left: 11%;
	z-index: 2;
}
#webcam4-1 img {
	width: 100%;
}

/*--------------------------------------------------------------
13.7.7 Sitemap
--------------------------------------------------------------*/
.sitemap li {
	background: url(/wp-content/themes/umfahrung/images/pfeil.png) 0 5px no-repeat;
	line-height: 1.3em;
	list-style-type: none;
}
.sitemap li a {
	padding-left: 25px;
	font-size: 0.75em;
	color:#000;
}
.sitemap li li {
		background: url(/wp-content/themes/umfahrung/images/pfeil.png) 25px 5px no-repeat;
	line-height: 1.3em;
	list-style-type: none;
}
.sitemap li li a {
	padding-left: 50px;
	font-size: 0.75em;
	color:#000;
}
.sitemap li li li {
		background: url(/wp-content/themes/umfahrung/images/pfeil.png) 50px 5px no-repeat;
	line-height: 1.3em;
	list-style-type: none;
}
.sitemap li li li a {
	padding-left: 75px;
	font-size: 0.75em;
	color:#000;
}

/*--------------------------------------------------------------
13.8 Footer
--------------------------------------------------------------*/
#footer {
	border-top: 2px solid #3bb2de;
	vertical-align: bottom;
	height: 25px;
	float: left;
	width: 88.5%;
	max-width: 1232px;
	position: fixed;
	bottom: 0px;
	margin-top: 20px;
	padding-bottom: 5px;
	background-color: #ffffff;
}

#nav-unten {
	float: left;
	width: 32.63%;
	text-align: left;
	margin: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 0.65%;
}
#mail {
	float: left;
	width: 33.44%;
	font-size: 1.0em;
	text-align: center;
	margin: 0;
	padding-top: 8px;
	padding-bottom: 5px;
}
#mail p a {
	margin: 0;
	padding: 0;
}
#copy {
	float: left;
	width: 32.63%;
	font-size: 0.8em;
	text-align: right;
	margin: 0px;
	padding-top: 10px;
	padding-bottom: 5px;
	padding-right: 0.65%;
}
#copy p {
	margin: 0;
	padding: 0;
}

/*--------------------------------------------------------------
13.7.6 Datenschutz
--------------------------------------------------------------*/
.page-datenschutz p {
	padding-bottom: 10px;
}
.page-datenschutz h3 {
	padding-top: 30px;
}
.page-datenschutz h4 {
	font-size: 0.9em;
	padding-bottom: 10px;
}
.page-datenschutz ul {
	padding-bottom: 10px;
}
.page-datenschutz li {
	font-size: 0.75em;
	list-style-type:disc;
	list-style-position: inside;
	padding-bottom: 10px;
	padding-left: 30px;
	text-indent: -10px;
	display: list-item;
	text-align: -webkit-match-parent;
}
/*--------------------------------------------------------------
14.0 Media
--------------------------------------------------------------*/
img, object, embed, video {
	max-width: 100%;
}
.wp-image-595 {
	border: thin solid #585858;
	margin-bottom: 20px;
}

/*--------------------------------------------------------------
14.1 Galleries
--------------------------------------------------------------*/
.gallery-1 {
	margin: auto;
}
.gallery {
    clear: both;
	display: block !important;
	margin-top: 10px;
	overflow: hidden;
	width: 100%x;
}
 
.gallery dl {
	float: left;
}
.gallery dl dt {
	float: left;
	text-align: center;
	font-size: 0.7em;
}
.gallery dl dt img {
	background-color: #FFFFFF;
	border: 1px solid #A9A9A9;
	display: block;
	margin: 4px 0 4px 4px;
	padding: 4px;
	width: 100%;
	max-width: 100px;
	height: auto;
}
.gallery dl dt img:hover {
	background-color: #A9A9A9;
}
.gallery dl dd {
	display: none;
}
.gallery-uebersicht {
	display: block !important;
	margin-top: 10px;
	/*overflow: hidden;*/
	/*width: 100%x;*/
}
 
.gallery-uebersicht dl {
	float: left;
	margin-right: 20px;
}
.gallery-uebersicht dl dt {
	float: left;
	text-align: center;
	font-size: 0.7em;
}
.gallery-uebersicht dl dt img {
	background-color: #FFFFFF;
	border: 1px solid #A9A9A9;
	display: block;
	margin: 4px 0 4px 4px;
	padding: 4px;
	width: 100px;
	height: 100px;
}
.gallery-uebersicht dl dt img:hover {
	background-color: #A9A9A9;
}

.attachement-thumbnail {
	width: 100%;
	max-width: 100px;
	height: auto;
}
#fancybox-title-over {
	text-align: center;
}
.zeit-abstand {
	margin-top: 30px;
}

/*--------------------------------------------------------------
14.2 Zeitraffer
--------------------------------------------------------------*/
.n2-section-smartslider {
	border: 2px solid #cfcfcf;
	padding: 4px;
}
/*--------------------------------------------------------------
15.0 Media Queries
--------------------------------------------------------------*/

/* Tablet Layout: 861px to 1024px. Inherits styles from: Mobile Layout. */
@media only screen and (max-width: 1024px) {

#outer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
}
.zeroMargin_tablet {
    margin-left: 0;
}
.hide_tablet {
    display: none;
}


/* Startseite */
#startseite-titel {
	width: 100%;
	margin-left: 0px;
}

#startseite-Umfahrung {
	width: 100%;
	text-align: center;
	margin-top: 20px;
	float: none;
}
	
#footer {
	width: 90.675%;
}

}

/* Layout: 481px to 860px. */
@media only screen and (max-width: 860px) {
#outer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
}
.zeroMargin_tablet {
    margin-left: 0;
}
.hide_tablet {
    display: none;
}

/* Header */
#suchen {
	margin-top: -60px;
}

/* Startseite */
#startseite-titel {
	width: 100%;
	margin-left: 0px;
}

#startseite-Umfahrung {
	width: 100%;
	text-align: center;
	margin-top: 20px;
	float: none;
}

#footer {
	width: 90.675%;
}
#nav-unten {
	width: 56.07%;
}
#mail {
	display:none;
}
#copy {
	width: 42.63%;
}
	
}
/* Mobile Layout: 480px and below. */
@media only screen and (max-width: 690px) {
  
#outer {
	width: 86.45%;
	padding-left: 2.275%;
	padding-right: 2.275%;
}
.hide_mobile {
    display: none;
}

/* Startseite */
#startseite-titel {
	line-height: 2.5em;
	margin-left: 0px;
}
#startseite-Umfahrung {
	width: 100%;
	float: none;
}

	#suchen {
		margin-right: 40px;
		margin-top: -40px;
	}
	.balken_oben {
		height: 40px;
	}
/* Header */
#ktsg {
	width: 39.33%;
}

#Haupttitel {
	text-align: right;
}

#wappen {
	display: none;
}

#suchen form {
	top: -20px;
}

/* Content */
#content-left {
	width: 98.7%;
	min-height: 400px;
	padding-left: 0.65%;
	padding-right: 0.65%;
	padding-bottom: 8px;
	margin-bottom: 20px;
	float: left;
	border-right: none;
	border-bottom: thin solid #3bb2de;
}
#content-right {
	width: 98.7%;
	float: none;
	padding-left: 0.65%;
	padding-right: 0.65%;
	text-align: left;
}
#wpcf7-captchac {
	float: none;
}
/* Footer */
#footer {
	width: 86.45%;
}
#nav-unten {
	width: 96.7%;
}
#mail {
	display: none;
}
#copy {
	display: none;
}

}

/*--------------------------------------------------------------
16.0 Print
--------------------------------------------------------------*/