/*---------------------------------------------------
----  CSS Dokument für Hawle Suisse  --------------------

Autor: Kajetan Som
Firma: alnovo creative solutions

Datum: 11.06.2013

-----------------------------------------------------*/

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

body {
	background-image: url('../images/layout/bg.jpg');
	background-size: cover;
}

#wrapper {
	max-width: 1200px;
	background-image: url('../images/layout/white_transparent.png');
	background-repeat: repeat-x repeat-y;
	margin: 0 auto;
	padding: 0px;
	margin-top: 100px;
}

:focus {
	outline: 0;
}

a { 
	text-decoration: none;
	color: #000;
}

a:hover {
	text-decoration: underline;
}

a.link {
	display: block;
	padding-left: 15px;
	background-image: url('../images/layout/pfeil.png');
	background-repeat: no-repeat;
	background-position: 0px center;
}

a.link:hover {
	background-image: url('../images/layout/pfeil_hover.png');
}

p {
	margin-bottom: 20px;
}

/* überschriften */
h1 {
	font-size: 22px;
	margin-bottom: 20px;
}

h2 {
	font-size: 18px;
	margin-bottom: 10px;
}

.mod_newslist h1 {
	font-size: 18px;
	margin-bottom: 10px;
}

/* ul / listen */
#container ul li {
	margin-left: 15px;
}

#container ul {
	margin-bottom: 20px;
}

/* Tabellen */
table {
	color: #fff;
	border-collapse:collapse;
}

table tr td {
	padding: 3px 0px 3px 0px;
	border-bottom: 1px solid #fff;
}

table tr td.col_1 {
	width: 300px;
}

table tr td.col_2 {
	width: 100px;
}

table tr td.col_3 {
	width: 100px;
	text-align: right;
}

/* KOPF BEREICH ---------------------------------------------------------------*/
#header .header-logo {
	padding-top: 60px;
	margin-left: 46px;
	margin-bottom: 163px;
}

#header .header-logo img.schrift {
	/* width: 31.44%; layout */
	width: 32.44%;
	float: left;
	/* margin-right: 1.366%; layout */
	margin-right: 1.566%;
}

#header .header-logo img.logo {
	/* width: 27.44%; layout */
	width: 29.44%;
	float: left;
}

/* Navigation */
.mod_navigation ul li {
	float: left;
	list-style-type: none;
}

.mod_navigation ul li a, .mod_navigation ul li span {
	white-space:nowrap;  /*kein Zeilenumbruch*/
	display: block;
	height: 20px;
	text-transform: uppercase;
	font-size: 16px;
	color: #fff;
}

.mod_navigation ul li.first a, .mod_navigation ul li.first span {
	
}

.mod_navigation ul li a:hover, .mod_navigation ul li span {
	text-decoration: underline;
}

/* CONTENT BEREICH ------------------------------------------------------------*/
/* Holy Grayl -------------------------- */
#main {
	float: none;
	padding-bottom: 50px;
}

#main .mod_article {
	margin-left: 2.5%;
	overflow: visible;
}

#main .ce_text {
	overflow: visible;
}

#main a {
	width: 18.4%;
	float: left;
	display: block;
	vertical-align: top;
	margin-right: 1.35%;
}

#main .mod_article {
	overflow: visible;
}

/* FORMULARE -------------------------------------------------------------------*/
/*Breite ca. 980px | Vorname, Name, E-Mail, Telefon */
.form_row {
    overflow:auto;
    margin-bottom:7px;
}

form div.vorname,
form div.email {
    width:240px;
    float:left;
}

form div.name,
form div.telefon {
    width:210px;
}

label {
    display:block;
    margin-bottom:2px;
}

input.text,
input.captcha,
textarea,
input.submit {
    width:200px;
    padding:3px;
    border:1px solid #AAABAD;
}

textarea {
    width:440px;
    height:100px;
}

input.submit {
    width:auto;
    margin-top:3px;
    font-size:18px;
    color:#000;
	cursor: pointer;
}

input.submit:hover {
    background-image:url("files/images/button_bg_hover.jpg");
    text-decoration:underline;
}

p.error {
    font-size:11px;
    color:#f00;
}

/* FUSSBEREICH -----------------------------------------------------------------*/
#footer {
	margin-top: 50px;
	font-family: Verdana;
	font-size: 10px;
	height: 1px;
}

#footer .copyright {
	float: left;
}

#footer .impressum {
	float: right;
}

/* Graue Fläche im Hintergrund */
.grau-top, .grau-middle, .grau-bottom {
	z-index: 1;
	position: absolute;
	background-image: url('../images/layout/grau_transparent.png');
	background-repeat: repeat-x repeat-y;
}

@media screen and (max-width: 1200px) {
	#wrapper {
		width: 90%;
		left: 5%;
		right: 5%;
	}
}

@media screen and (max-width: 350px) {	
	#main a {
		width: 80%;
		float: none;
		display: block;
		margin: 0 10%;
		vertical-align: center;
		margin-right: 0px;
		margin-bottom: 50px;
	}
	
	#header .header-logo img.logo, #header .header-logo img.schrift {
		width: 80%;
		margin: 0 auto;
		margin-bottom: 30px;
	}
	
	#header .header-logo img.schrift {
		margin-bottom: 15px;
	}
}