/* =========================================================
trautmann-bauunternehmen.de - Stylesheet für Trautmann
Datei: design.css
Media: screen
Datum Erstellung: 05. Mai 2008
Datum Änderung: 05. Mai 2008
Autor: Ulf Mayer
Mail: mayer@navigate.de

	Gelb: #f5ca20
========================================================== */

/* ===============================
   = Undo-CSS
=============================== */

:link,:visited { text-decoration:none }

ul,ol { list-style:none }

h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }

h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input { margin:0; padding:0 }

a img,:link img,:visited img { border:none }

address { font-style:normal }

dl {margin: 0 0 0 .8em;}
dl dt {margin: 0 0 .5em 0;}
dl dd+dt {margin-top: 1.5em;}
dl dd {margin: 0 0 1em 2em;}
ol {list-style: decimal;}

ol li {margin: 0 0 1em 2.5em;}
ol li ol {margin: 1em 0 1em 1em;}
ol li ul {margin: 1em 0 1em 1em;}

p {margin-bottom: 1em;}
ul {list-style: circle;}
ul li {margin: 0 0 0 2em;}
ul li ul {margin: 1em 0 1em 1em; list-style: square;}
ul li ol {margin: 1em 0 1em 1em;}

/* ===============================
   = General Styling
=============================== */

*{
font-size: 1em; /* don't edit! */
}

html {
font-size: 62.51%; /* don't edit */
}

body {
	font-family: Arial, Verdana, Tahoma, sans-serif;
	text-align: left;
	font-size: 1.2em; /* edit here to change font size globaly 1em = 10px */
	background: #fff url(../images/beton.jpg);
	color: #000;
}

div {font-size: 1em;}

fieldset {border: 0; margin: 0; padding: 0;}
fieldset legend {display: none;}

input,
button,
textarea {font: inherit;}

p {margin: 0; padding: 0 0 25px 0;}

.contentmiddle a {font-weight: bold;}
a {color: #000;}
a:hover {text-decoration: underline;}

.clear {clear: both;}

label {cursor: pointer;}

.hidden {display: none;}

.firstcol {float: left;}
.secondcol {float: left;}

#user_um_trautmannref {
	position: relative;
}

span.navigate a{font-weight:normal;}
span.navigate a:hover{font-weight:normal; text-decoration:none;}
/* ===============================
   = Structure
=============================== */

div#container {
	color: #000;
	width: 884px;
	margin: 60px auto;
	position: relative;
}

div#sidebar {
	width: 250px;
	float: left;
}

#content {width: 604px; float: right; margin: 62px 0 25px 0;}
#content .contenttop {width: 604px; height: 32px; background: url(../images/top-content.png) repeat-y;}
#content .contentmiddle {width: 544px; background: url(../images/bg-shadow.png) repeat-y; padding: 0 30px 30px 30px; line-height: 18px; float: none;}
#content .contentbottom {width: 604px; height: 10px; background: url(../images/bottom-bg.png) repeat-y;}

h1#logo a {display: block; background: url(../images/trautmann-bauunternehmen.png) 0 0 no-repeat; width: 254px; height: 160px;}
h1#logo span {display: none;}

#content h2 {display: block; text-align: center; font-size: 22px; margin: 0 0 20px 0; padding: 10px 0 0 0;}

#keyvisual {background: url(../images/keyvisual-bg.png) no-repeat; width: 604px; height: 205px; position: absolute; left: 280px; top: 0;}
#defaultkv {background: url(../images/trans.gif) no-repeat; width: 600px; height: 200px; display: block; }

#header address {position: absolute; top: 85px; left: 10px; font-size: 11px; line-height: 15px;}

#search {background: url(../images/suche.png) 0 0 no-repeat; width: 254px; height: 30px; margin: 15px 0 0 0; position: relative;}
#search button span {display: none;}
#search button {cursor:pointer; display: block; background: none; border: 0; width: 60px; height: 25px; position: absolute; top: 0; right: 4px;}
#search input {padding: 5px; border: 0; background: none; width: 185px;}

#footer { clear: both; width: 604px; height: 45px; background: url(../images/to-top-bg.png) 0 0 no-repeat; margin: 0 0 20px 280px;}

/* ===============================
   = Contentelements
=============================== */

/* Homepage */
.teaser {position: relative; float: left; margin: 0 30px 0 0;}
	.last {margin: 0;}
.teaser h3 a {position: absolute; top: 61px; left: -5px; display: block; width: 141px; height: 29px; background: url(../images/start-normal.png) no-repeat; font-size: 16px; padding: 4px 0 0 25px;}
.teaser h3 a:hover {text-decoration: none; background: url(../images/start-active.png) no-repeat;}

/* Gallery */
.gallery { float: none;}
p.floatbox,
.gallery div.floatbox {float: left; margin: 0 17px 10px -3px; }
p.nomargin,
.gallery div.nomargin {margin-right: 0;}
p.floatbox img,
.gallery img {border: 3px solid; border-color: transparent;}
p.floatbox a img,
.gallery a img {border: 3px solid; border-color: transparent;}
p.floatbox a:hover img,
.gallery a:hover img {border: 3px solid; border-color: #f5ca20;}

.gallery .desc {display: block; font-size: .9em; width: 120px; line-height: normal; margin: 0 0 10px 0;}
.gallery .desc a {color: #dbb11e; font-weight: bold; }

.mouseposition {position: absolute; top: 0px; left: 0px; z-index: 1000; background: url(../images/hover-bg.png) no-repeat; width: 184px; height: 105px; font-size: 11px; padding: 10px;}

/* Selectorbox for Images */
#selector { background: url(../images/bg-gray.png); padding: 10px; line-height: 22px;}
.formelement {width: 50%; float: left;}
.formelement input {margin: 0 5px 0 0;}
#selector .updatestatus {font-weight: bold;}

/* Pager */

#pager {clear: both; text-align: center; margin: 30px 0 0 0;}
#pager ul {list-style: none; margin: 0; padding: 0; display: inline; text-align: center;}
#pager ul li {display: inline; margin: 0; padding: 0;}
#pager ul li a,
#pager ul li input { border: none; padding: 3px 9px 6px 7px; background: url(../images/yellow-box.png) no-repeat; font-weight: bold;}
#pager ul li.active input,
#pager ul li input:hover,
#pager ul li.active a,
#pager ul li a:hover {text-decoration: none; background: url(../images/gray-box.png) no-repeat;}
#pager ul li a span {display: none;}
#pager ul li.back input:hover,
#pager ul li.back input,
#pager ul li.back a:hover,
#pager ul li.back a {background: url(../images/left.png) no-repeat; padding: 3px 7px 6px 7px; margin: 0 6px 0 0;}
#pager ul li.forward input:hover,
#pager ul li.forward input,
#pager ul li.forward a:hover,
#pager ul li.forward a {background: url(../images/right.png) no-repeat; padding: 3px 7px 6px 7px; margin: 0 0 0 6px;}

/*Tables*/

table.contenttable { border-collapse: collapse; border: 1px solid #ADAEAD; background: none; empty-cells: hide;}
table.contenttable td {border: 1px solid #ADAEAD; background: none; padding: 10px;}
table.contenttable tr.tr-even td {background: #fff;}
table.contenttable-3 tr.tr-even td {background: none;}
table.contenttable-3 tr td.td-1,
table.contenttable-3 tr td.td-3,
table.contenttable-3 tr td.td-5,
table.contenttable-3 tr td.td-7 {background: #fff;}

table.contenttable tr.tr-0 td {background: #F7CB18;}
table.contenttable-1 tr.tr-0 td,
table.contenttable-3 tr.tr-0 td {background: #F7CB18; border: 0px!important; font-weight: bold; color: #000;}
table.contenttable-2 tr.tr-0 td {background: #fff;}

/*Sitemap*/
div.csc-sitemap ul {list-style: none; margin: 0; padding: 0;}
div.csc-sitemap ul li a {display: block; padding: 5px; font-weight: bold; border: 1px solid #ADAEAD; margin: 0 0 10px 0; width: 200px;}
div.csc-sitemap ul li a:hover {text-decoration: none; background: #fff;}

div.csc-sitemap ul li ul {
  margin: 0 0 0 20px;
  padding: 0;
  background: url(../images/line.gif) 0 0 repeat-y;
}

div.csc-sitemap ul li ul li{
  background: url(../images/sitemaplink.gif);
  background-repeat: no-repeat;
  background-position: 0 0;
  padding: 5px 0 0 9px;
  display: block;
  margin: 0;
}

/*Listen*/
.contentmiddle ul {list-style: square; margin: 0; padding: 0;}
.contentmiddle ul li {margin-bottom: 10px;}

/* ===============================
   = Navigation
=============================== */

ul#nav {
	display: block;
	border-top: 3px solid #f5ca20;
	margin: 95px 0 0 0;
	padding: 0;
	list-style: none;
}

	ul#nav li {display: block; border-bottom: 3px solid #f5ca20; text-align: right; margin: 0; padding: 0;}
	ul#nav li a {display: block; font: 800 16px Arial; padding: 4px 12px 4px 0;}
	ul#nav li a.active,
	ul#nav li a:hover {text-decoration: none; background: url(../images/bg-menu.png);}

	ul#nav li ul {margin: 0; padding: 0; background: url(../images/bg-menu.png); border-top: 3px solid #f5ca20;}
	ul#nav li ul li {margin: 0; border: 0; margin: 0; padding: 0;}
	ul#nav li ul li a {width: 237px; padding: 5px 20px 5px 0; font-size: 12px; background: none;}
	ul#nav li ul li a.active,
	ul#nav li ul li a:hover {background: url(../images/pfeil-sub.png) right 3px no-repeat;}


ul#metanav { width: 604px; height: 35px; list-style: none; display: block; margin: 0; padding: 7px 0 0 0; position: absolute; top: -60px; right: 0; background: url(../images/top-bg.png) 0 0 no-repeat; text-align: center;}
ul#metanav li {display: inline; margin: 0; padding: 0;}
ul#metanav li a {font-weight: bold; padding: 0 7px 0 7px;}
ul#metanav li a:hover,
ul#metanav li a.active {text-decoration: underline;}

#footer ul {list-style: none; text-align: center; margin: 0; padding: 7px 0 0 0;}
#footer ul li {display: inline; margin: 0; padding: 0 20px 0 20px;}
#footer ul li a {font-weight: bold;}

/* ===============================
   = Contact-Form
=============================== */

.csc-mailform{
	margin: 0 10px 0 0;
	color:#000;
}

.csc-mailform-field {
	margin:10px auto;
	clear:both;
}
.csc-mailform-field label {
	float:left;
	width:100px;
	margin-bottom:10px;
	font-weight: bold;
}

.csc-mailform-field input {
	float:left;
	width:200px;
	background-color:#fff;
	border:0;
	padding:3px;
	margin-bottom:10px;
}
.csc-mailform-field .csc-mailform-check {
	width:20px;
}

.csc-mailform-field textarea {
	float:left;
	width:200px;
	background:#fff;
	border:0;
	padding:3px;
	margin-bottom:10px;
}
.csc-mailform-field select {
	float:left;
	width:200px;
	background-color:#fff;
	border:0;
	padding:2px;
}
.csc-mailform-field .csc-mailform-submit {
	width:150px;
	text-align:center;
	font-weight:bold;
	margin: 0 0 0 100px;
	cursor: pointer;
}


/* ===============================
   = sIFR
=============================== */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash h2 {
	visibility: hidden;
	font-size: 22px;
}

.galleryItem {
float: left;
    position: relative;
    width: 130px;

}

#content h2 {
	font-size: 1.6em;
	width: 100%;
}

#content .contenttop {
    background: url("../images/top-content.png") repeat-y scroll 50% 0 transparent;
    height: 32px;
    width: 100%;
}