@font-face {
    font-family: 'gasparregular';
    src: url('../../fonts/Gaspar Regular-webfont.eot');
    src: url('../../fonts/Gaspar Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/Gaspar Regular-webfont.woff') format('woff'),
         url('../../fonts/Gaspar Regular-webfont.ttf') format('truetype'),
         url('../../fonts/Gaspar Regular-webfont.svg#gasparregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'gasparitalic';
    src: url('../../fonts/Gaspar Regular Italic-webfont.eot');
    src: url('../../fonts/Gaspar Regular Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/Gaspar Regular Italic-webfont.woff') format('woff'),
         url('../../fonts/Gaspar Regular Italic-webfont.ttf') format('truetype'),
         url('../../fonts/Gaspar Regular Italic-webfont.svg#gasparitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'gasparbold';
    src: url('../../fonts/Gaspar Bold-webfont.eot');
    src: url('../../fonts/Gaspar Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/Gaspar Bold-webfont.woff') format('woff'),
         url('../../fonts/Gaspar Bold-webfont.ttf') format('truetype'),
         url('../../fonts/Gaspar Bold-webfont.svg#gasparbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'gasparbold_italic';
    src: url('../../fonts/Gaspar Bold Italic-webfont.eot');
    src: url('../../fonts/Gaspar Bold Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/Gaspar Bold Italic-webfont.woff') format('woff'),
         url('../../fonts/Gaspar Bold Italic-webfont.ttf') format('truetype'),
         url('../../fonts/Gaspar Bold Italic-webfont.svg#gasparbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
	font-family: 'gasparregular', arial, verdana, sans-serif;
    background: #fff;
	color: rgb(53, 53, 53);
	margin: 0;
	padding: 0;
	line-height: 150%;
	font-size: 17px;
}

/* CSS für die Firmensuche von Gersdorf */

*{
	padding: 0px;
	margin: 0px;
}

/* Div, das die Liste mit dem Alphabet beinhaltet */
#searchfunctions{
	width: 100%;
	margin: 40px auto;
	display: inline-block;
	box-sizing: border-box;
}

/* div, das das Alphabet enthält */
#alphabet{
    display: inline-block;
}

	#alphabet ul{
		float: none;
		padding: 20px;
		background-color: rgba(0,181,238,0.2);
		box-sizing: border-box;
		display: inline-block;
		width: 100%;
	}

		#alphabet ul li {
			padding: 0px 10px;
			margin:0;
			font-size: 15px!important;
			text-decoration: none;
			display: block;
			float: left;
			list-style-type: none;
			border-bottom:none!important;
		}

			#alphabet ul li a{
				text-decoration: underline;
				font-size: 15px!important;
			}
			
			/* aktiver Buchstabe bei der Buchstabensuche */
			#alphabet ul li a.letterOn{
				font-weight: bold;
			}
		

/* Div, das das Suchformular für die Volltextsuche beinhaltet */
#searchform {
	padding:20px 0;
}

	#searchform form{
		float: right;
	}
	
		#searchform form input{
			padding: 10px 2%;
			width: 100%;
			border: none;
			background: rgba(0,0,0,0.1);
			box-sizing: border-box;
		}
		
		#searchform form input.submit{
			color: #fff;
			background: rgb(0, 162, 229);
			font-size: 17px;
			width: auto;
			border: none;
			padding: 10px 15px;
			-webkit-appearance: none;
			font-family: 'gasparbold', arial, verdana, sans-serif;
			text-transform: uppercase;
			font-weight: normal;
			display: inline-block;
			margin: 10px 0 0 0;
		}

		
/* Div, das alle Suchergebnisse enthält */
#searchresults{
}	

	/* hier kann z.B. die Breite für die erste Spalte festgelegt werden */
	#searchresults table .ResultsCol1{
		width:50%;
	}

	/* hier kann z.B. die Breite für die zweite Spalte festgelegt werden */
	#searchresults table .ResultsCol2{
		width:50%;
	}
	
		#searchresults table tr td{
			vertical-align: top;
			padding: 10px;
		}	

			/* jede zweite Ergebniszeile kann zur besseren Übersicht z.B. coloriert werden */	
			.resultColoredRow{
				background-color: #eeeeee;
			}
			
			/* Firmenname in dem Ergebnis */
			.companyname{
				font-weight: bold;
				font-size:20px;
			}
			
			/* Das Wort "Tätigkeiten" in dem Ergebnis */
			.begriffTaetigkeiten{
				font-weight: bold;
			}
		
		
/* die Klasse beendet das Umfließen von Elementen */
.clear{
	clear: both;
}
@media only screen and (max-width: 769px) { 
	#searchresults table .ResultsCol1, 	#searchresults table .ResultsCol2 {
		width:100%;
		float:none;
	}
	#searchresults table {
		width:100%;
		float:none;
	}
	#searchresults table tr td {
		width:90%;
		padding: 20px 5% 0;
		float:none;
		display:block;
	}
	#searchresults table tr > td:first-child {
		border-bottom:none!important;
	}
	#searchresults table tr > td:nth-child(2) {
		padding: 0 5% 20px;
	}
}