/*  =========================================================
DOMAIN
Datei: default.css
Media: screen, projection

Datum: 22. Oktober 2008
Autor: Stefan Schulz-Lauterbach
Mail:  ssl@clickpress.de
Web:   http://clickpress.de


1. Allgemeine Selektoren
   - Block-Elemente
   - Inline-Elemente
   - Allgemeine Klassen
   - Non-Layout IDs

2. Layoutbereiche
   - Wrapper
   - Kopfbereich
   - Navibereich
   - Textbereich
   - Fussbereich

3. Spezielle Seiten
   - Kontaktformular

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

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

   =1. Allgemeine Selektoren

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

/*
	This is a set of reset styles by Eric Meyer.
	
	The goal of reset styles is to make the default rendering more
	consistent accross web browsers, and to get rid of some annoying
	default styles. Only problem is you will have to create new styles
	for everything in your website, and won't be able to rely on default
	styles as a solution for things you didn't think of.
	
	Source: http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	padding: 30px 0;
	text-align: center;
	line-height: 1;
	background: #dcdedf url('../tl_files/grafik/bg_body.gif') repeat-x;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ===============================
   =Block-Elemente
=============================== */

h1 {
    font-size: 150%;
}

h2 {
    font-size: 130%;
    margin-bottom: 1em;
}

p, ul, ol {
    margin: 0 0 1em 0;
}

ol, ul {
    list-style: none;
}


/* Tabellen brauchen immernoch 'cellspacing="0"' im HTML! */
table {
	border-collapse: separate;
	border-spacing: 0;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
}

blockquote, q {
	quotes: "" "";
}

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
    	content: "";
    }


/* ===============================
   =Inline-Elemente
=============================== */

a {
	color: #22275e;
	text-decoration: underline;
}
	a:hover{ color: #22275e; }

/* ===============================
   =Classes allgemeiner Art
=============================== */
.center {
    text-align: center;
}
.left {
    text-align: left;
}
.right {
    text-align: right;
}

.kleinschrift {
    font-size: 10px;
}

.accessibility {
    display: none;
}

.floatl {
    float:left;
    padding: 3px;
    /*border: 5px solid #ccc;*/
    margin-right: 10px;
    margin-bottom: 10px;
}

.floatr {
    float:right;
    padding: 3px;
    /*border: 5px solid #ccc;*/
    margin-bottom: 10px;
    margin-left: 10px;
}
.fl {float:left;}
.fr {float:right;}

.clearer {
    clear: both;
}


.error {
    color: #D8000C;
}

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

  =2. LAYOUTBEREICHE

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

#wrapper {
	font-family: Arial, Helvetica, sans-serif;
	color: #22275e;
	font-size: 12px;
    background: #fff;
    text-align: left;
    clear: both;
	padding: 20px;
	overflow: hidden;
}

	#wrapper .inner {
		background: #96b7dc url('../tl_files/grafik/bg_wrapper.gif') no-repeat;	
	}


/* ===============================
   =KOPFBEREICH
=============================== */

#header { width: 626px;}
#header .inside {
	padding: 0px;
}

	#header #logo {
		float: right;
		display: block;
	}


/* ===============================
   =NAVIBEREICH
=============================== */

#header .mod_navigation {
	padding: 15px 5px 40px 20px;
	width: 607px;
	
}
	#header .mod_navigation ul{
		border: 1px solid #d9e5f1;
		overflow: hidden;
		margin-bottom: 0px;

	}
		#header .mod_navigation ul li{
			float: left;
		}
			#header .mod_navigation ul li a{
				display: block;
				width: 100px;
				height: 44px;
				background: url('../tl_files/grafik/navi_sprite.gif') no-repeat;
			}
				#header .mod_navigation ul li a span{
					display: none;
				}
				#header .mod_navigation ul li a:hover{
	
				}
			
			#header .mod_navigation a.ueber-uns 	{ width: 99px; background-position: 0 0;}			
				#header .mod_navigation a.ueber-uns:hover,
				#header .mod_navigation li.active a.ueber-uns 	{ background-position: 0 -44px; }			
			#header .mod_navigation a.produkte	{ width: 100px; background-position: -99px 0;}
				#header .mod_navigation a.produkte:hover,
				#header .mod_navigation li.active a.produkte{ background-position: -99px -44px;}
			#header .mod_navigation a.unsere-maschinen 	{ width: 167px; background-position: -199px 0;}
				#header .mod_navigation a.unsere-maschinen:hover,
				#header .mod_navigation li.active a.unsere-maschinen{ background-position: -199px -44px; }
			#header .mod_navigation a.unsere-kunden { width: 144px; background-position: -366px 0;}
				#header .mod_navigation a.unsere-kunden:hover,
				#header .mod_navigation li.active a.unsere-kunden{ background-position: -366px -44px;}		
			#header .mod_navigation a.kontakt  {width: 95px; background-position: -510px 0;}
				#header .mod_navigation a.kontakt:hover,
				#header .mod_navigation li.active a.kontakt{background-position: -510px -44px;}

/* META-NAVIGATION */
#header .mod_customnav {padding-top: 23px;}
#header .mod_customnav ul {margin-left: 432px}
#header .mod_customnav li {float: left; border-right: 1px solid #5fa4d7;}
#header .mod_customnav li.last {border: none;}
#header .mod_customnav li a 			{font-size: 11px;color: #5fa4d7; text-decoration: none;display:block;padding: 0 6px 0 17px; margin-left: 5px;}
#header .mod_customnav li a:hover,
#header .mod_customnav li a.active{color: #22275e; }
#header .mod_customnav li a.home 		{background: url('../tl_files/grafik/icon_home.gif') no-repeat;}
#header .mod_customnav li a.impressum 	{background: url('../tl_files/grafik/icon_impressum.gif') no-repeat;}
#header .mod_customnav li a.agb			{background: url('../tl_files/grafik/icon_agb.gif') no-repeat;}

/* ===============================
   =TEXTBEREICH
=============================== */

#container {
	clear: both;
	padding: 0 0 20px 20px;
}

	a.hyperlink_txt{
		display: block;
		padding-left: 19px;
		background: #fff url('../tl_files/grafik/bullet.gif') no-repeat 5px;
		text-decoration: none;
		font-weight: bold;
		width: auto;
	}
	

/* GRID */
.gr1 {}
.gr2 { width: 250px;}
.gr3 {}
.gr4 {}




#main {
	position: relative;
	background: url('../tl_files/grafik/bg_main.png');
	width: 606px;	
	line-height: 16px;
}
/* CSS-Hack für IE6 und kleiner */
* html #main{ background-image: none; background-color: #fff; }

	#main .inside {
		padding: 20px;
	}
	
	#main h1 {
		font-size: 28px;
		font-family: Calibri, Arial, Helvetica, sans-serif;
		font-style: normal;
		font-weight: normal;
		line-height: 1.2em;
		margin-bottom: 15px;
		text-transform: uppercase;
	}
	#main h2 {
		font-size: 28px;
		font-family: Calibri, Arial, Helvetica, sans-serif;
		font-style: normal;
		font-weight: normal;
		color: #60a3d7;
		line-height: 1.2em;
		margin-bottom: 0;
	}
	#main h3 {
		font-size: 12px;
		color: #60a3d7;
		line-height: 1.2em;
		margin-bottom: 0;
	}
		#kontakt h3 { margin-bottom: 10px; color: #22275e; }
		
		
	#main p { margin-bottom: 0px; }
	#main strong, #main b { font-weight: bold; color:#60a3d7;}
	
	#main ul { padding-left: 20px;}
	#main li { list-style: circle; margin: 0 0 0 0;}
	
	#home .image_container { margin: 0 0 0 0; }
	

	#main .mod_article {
		padding: 0px 10px 10px 20px;
	}
	

	#startseite {
		padding: 0!important;
	}
	
		#startseite .start_zertifizierung { margin-left: 20px; }
			#startseite .image_container img { margin: 15px 0 0 94px; }
			
			

/* MODULE */
.mod_dlh_googlemaps {
	margin-top: -44px;
	border: 1px solid #5fa3d7;
	padding: 5px;
	background: #fff;
	overflow: hidden;
}

	#main div.horiz_linie {
		clear: both;
		height: 1%;
		overflow: hidden;
		border-bottom: 1px solid grey;
		margin-bottom: 20px;
		padding-top: 20px;
	}
	#right div.horiz_linie {
		clear: both;
		height: 1%;
		overflow: hidden;
		border-bottom: 1px solid #dde0e7;
	}


.orange,
.orange a {color:#da6100;}
.orange a:hover {color: #22275e;}


.image_wrapper {
	padding: 5px;
	background-color: #fff;
	vertical-align:bottom;
	line-height: 5px;
	float: left;
	overflow: hidden;
	-moz-box-shadow: #848f9d 0 2px 4px 0;
	-webkit-box-shadow: #848f9d 0 2px 4px 0;
	box-shadow: #848f9d 0 2px 4px 0;
}
.image_container{
	padding: 4px;
	overflow: hidden;
}


.image_wrapper img {  }
.contact_pic { width: 162px; }
.image_wrapper .caption { padding: 10px 0 5px 0; line-height: 13px; }

/* SPALTE RECHTS */
#right {
	padding-top: 104px;
	font-size: 11px;
	line-height: 16px;
}

.startseite-home #rechte-spalte { margin-top: -27px; }
.startseite-home #right #logo { margin-top: -214px;}

#right h3 {
	margin-bottom: 15px;
}

#right .inside {
	padding: 0 30px 0 8px;
}

#right p {margin-bottom: 0px;}
#right #logo{
	position: absolute;
	margin-top: -241px;
	right: 0;
}
#right table {padding: 0;}
#right td {padding: 2px 0; vertical-align:top;}
#right .notice_fff span,
#right .notice_fff p {
	display: inline;
	font-weight: bold;	
	background-color: #ffffff;
	color: #db6100;
	padding: 2px 0;
	line-height: 20px;
}


/* ===============================
   =FUSSBEREICH
=============================== */
#footer {
	clear: both;
	padding: 0 20px 20px 20px;
	margin: 0 auto;
	font-family: Arial, Helvetica, sans-serif;
	color: #6f777c;
	font-size: 10px;
}

#footer .inside {
	padding: 5px 0px;
	text-align: center;
}

#footer .ce_image {margin: 0 6px;}

#footer .teaser_doosan {
	text-align: left;
	background: #fff url('../tl_files/bilder/teaser_doosan.jpg') no-repeat;
	padding: 12px 10px 10px 200px;
	line-height: 1.2;

}

	#footer .teaser_doosan h3{color: #22275e;}
	#footer .teaser_doosan strong{color:#60a3d7;}

/* ===============================
   =sIFR-Formatierungen
=============================== */


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

   =3. Spezielle Seiten

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

#startseite h1 {font-size:22px;}


/* ===============================
   Kontaktformular
=============================== */

form {
    /* margin: 30px; */
}

    label {
        padding-right: 1em;
    }


    input,
    select,
    textarea { /* Alle Labels UND Formularelemente auswählen */
        width: 180px; /* Breite.*/
        border:  	 1px solid #5fa3d7;
		font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
    }
		#right input,
		#right textarea {
			width: 133px;
			margin: 0;
			margin-bottom: 4px; 
		}
		#main input,#main textarea {
			margin-bottom: 4px;
		}
		#right label { display: block; width: 75px; float: left; padding-right: 10px}
		#main label { display: block; width: 50px; float: left; padding-right: 10px}
		#main .submit_container {padding-left: 60px;}
		#right .submit_container {padding-left: 85px;}
		#right textarea {height: 55px;}
		
		input.error { background-color: #f7c8ca; }

    textarea {
        height: 80px;
    }


        input.submit,
		input.inputbutton{ /* den Submit-Button */
            width: auto;
			border: none;
			background-color: #5fa3d7;
			color: #fff;
        }


    form br { /* Alle Zeilenumbrüche in Formularen auswählen */
      clear: both; /* das floating der labels und inputs aufheben */
    }

/* EoF */