/* CSS Document for Teichprofi Griesheim */




/* BROWSER RESET
----------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
  margin:0;
  padding:0;
}
fieldset,img { 
  border:0;
}
ol,ul {
  list-style:none;
}
h1,h2,h3,h4,h5,h6 {
  font-size:100%;
  font-weight:normal;
}
a, a:link, a:active, a:visited, a:hover {
  color:#453526;
  text-decoration:underline;
  font-style:normal; font-weight:normal;
}
a:hover { text-decoration:underline; color:#b84263; }
a img { border:none; }

/* -------------------------------------------------------------------------+
|
|                COLOUR and FONTS
|
+---------------------------------------------------------------------------+

Magenta
#b84263;

Blue
#005da8;

Beige Background
#005da8;

Text
#005da8; (blue headlines in main content)
#453526; (brownish text on beige; menu colour)
#f4f1e2; (light text on dark bg)
#ffffff; (light text in magenta box)


/* -------------------------------------------------------------------------+
|
|                MAIN STRUCTURE
|
+--------------------------------------------------------------------------*/

html, body {
  font-family: Trebuchet, Trebuchet MS, Helvetica, sans-serif;
  font-size:13px;
  font-weight:normal;
  color:#453526;
  line-height:normal;
  background-color:#005da8;
}
html { overflow:scroll; }

#heading-panel, #topbar, #content, #bottom, #mainteaser, #maindivider {
  width:1200px;
  margin:0 auto;
}

#heading-panel {
  height:141px;
  background:url(/real/user/images/gradient_top.gif) left top;
}

#topbar {
  height:24px;
  background:url(/real/user/images/gradient-bar_top.gif) left top;
  border-top:#BCB89F 3px solid;
}

#content {
  width:999px;
  padding:50px 99px 75px 102px;
  background:url(/real/user/images/border-content_bottom.gif) bottom repeat-x;
  background-color:#F4F1E2;
}

#bottom {
  width:999px; /* height:302px; */
  padding:0px 99px 0 102px;
  background-color:#746556;
  background:url(/real/user/images/gradient_bottom.gif) left top;
}

#footer {
  width:1200px; height:27px;
  margin:0 auto;
  background:url(/real/user/images/bg_footer.gif) repeat-x;
}


/* -------------------------------------------------------------------------+
|
|                TEASER AND MENU
|
+--------------------------------------------------------------------------*/

#mainteaser {
  height:323px;
}
/* teaser pix -- */
.pebbles { background:url(/real/user/images/header-pebbles.jpg) top left no-repeat; }


#menu-frame {
  height:230px;
  width:555px;
  position:relative; /*z-index:99;*/
  top:58px;
  left:482px;
  margin:0px 0px 0px 21px;
}

.mainmenu {
  width:151px; height:228px;
  float:left;
  margin:1px 0 0 1px;
  font-size:15px; font-weight:bold;
  background:url(/real/user/images/menu-transp1.png);
}

.submenu {
  width:400px; height:228px;
  float:left;
  margin:1px 0 0 1px;
  font-size:13px; color:#FFF;
  background:url(/real/user/images/menu-transp2.png);
}

/* ----> menu new -- */
.menu_1 {
  width:152px; height:228px;
  float:left;
  margin:1px 0 0 1px;
  font-size:15px; font-weight:bold;
  background:url(/real/user/images/menu-transp1.png);
}

.menu_2 {
  width:400px; height:228px;
  float:left;
  margin:1px 0 0 1px;
  font-size:13px; color:#FFF;
  background:url(/real/user/images/menu-transp2.png);
}
/* -- */





/* -------------------------------------------------------------------------+
|
|                BOXES
|
+--------------------------------------------------------------------------*/


#magenta-box .top, #magenta-box .bottom {
  width:316px; height:22px;
}
#magenta-box .bottomimg {
  width:316px;
}

#magenta-box .top { background:url(/real/user/images/magenta-box_top.gif) no-repeat; }
#magenta-box .bottom { background:url(/real/user/images/magenta-box_bottom.gif) no-repeat; margin-top:15px; }

#magenta-box {
  width:316px;
  float:left;
  /*padding:37px 30px 50px 30px;*/
  color:#FFF;
  /*border:1px solid #b84263;*/
  background:#b84263;
  /* CSS3 -moz-border-radius:15px;
  -khtml-border-radius:10px;*/
}

#magenta-box p {
  margin:0 30px 10px 30px;
}
#magenta-box h4 {
  margin:15px 30px 25px 30px;
}

#magenta-box ul {
  display:block;
  list-style:disc;
  margin:5px 35px 10px 30px;
}
#magenta-box ul li {
  margin:0 0 5px 15px;
}




/* -------------------------------------------------------------------------+
|
|                CONTENTS
|
+--------------------------------------------------------------------------*/

.maincontent { 
  width:560px;
  float:right;
  margin:0 0 50px 0;
}


#bottom .left {
  width:438px;
  float:left;
  height:302px;
  margin-top:37px;
}


#bottom .right {
  width:500px;
  float:right;
  font-size:11px;
  line-height:15px;
  color:#f4f1e2;
  height:302px;
  margin-top:29px;
  margin-left:50px;
}



/* PROJECTS at BOTTOM --- */


#bottom .right .project {
  margin:0 0 3px 0;
  padding-bottom:10px;
  background:url(/real/user/images/border-project.gif) bottom repeat-x;
}

#bottom .left .project {
  width:113px; height:113px;
  float:left;
  margin:0 10px 20px 10px;
}

#bottom .left .project a {
  display:block;
  width:113px; height:113px;
  text-decoration:none;
}







/* -------------------------------------------------------------------------+
|
|                TYPOGRAPHY
|
+--------------------------------------------------------------------------*/


/* headlines -- */

h2 {
  font-weight:bold;
  font-style:italic;
  font-size:22px;
  color:#005da8;
  margin-bottom:35px;
}

h3 {
  font-weight:bold;
  font-style:italic;
  font-size:15px;
  margin-bottom:10px;
}

h4 {
  font-weight:bold;
  font-style:italic;
  font-size:20px;
  margin-bottom:40px;
}

h5 {
  font-weight:bold;
  font-size:22px;
  color:#f4f1e2;
  margin:0 0 30px 0;
}


/* paragraphs -- */

p { 
  display:block;
  padding:0;
  margin:0;
}

.maincontent p {
  margin-bottom:15px;
  line-height:19px;
}

#magenta-box p {
  margin-bottom:12px;
  font-size:13px;
  line-height:17px;
}

.project p {
  display:block; width:400px; float:left;
}

.small { font-size:9px; }
span.magenta { color:#b84263; }

#footer p {
  float:right;
  padding:7px 15px 0 0;
  font-size:10px;
  
}



/* links -- */

.mainmenu a, .mainmenu a:link, .mainmenu a:active, .mainmenu a:visited {
  text-decoration:none;
  font-weight:bold; display:block;
}
.mainmenu a:hover {
  text-decoration:none;
}

.submenu a, .submenu a:link, .submenu a:active, .submenu a:visited {
  text-decoration:none;
  font-weight:normal;
  color:#252525; display:block; height:8px; padding:4px 0 11px 15px;
}
.submenu a:hover {
  text-decoration:none;
  color:#FFF;
  background-color:#b84263;
}
.submenu a.active {
  display:block; height:8px; padding:4px 0 11px 15px; background-color:#b84263;
}

/* links in magenta-box */
#magenta-box a, #magenta-box a:link, #magenta-box a:active, #magenta-box a:visited {
  text-decoration:none;
  font-weight:normal;
  color:#f4f1e2; display:block; height:15px; margin:5px 0px 10px 0px; padding:0px 0px 0px 25px;
  background:url(/real/user/images/link-magentabox.gif) left 0px no-repeat;
}
#magenta-box a:hover {
  text-decoration:none;
  color:#fff;
  background:url(/real/user/images/link-magentabox.gif) left -17px no-repeat;
}
#magenta-box a.active {
  display:block; height:15px; margin:5px 0px 10px 0px; padding:0px 0px 0px 25px;
  font-weight:bold; color:#fff;
  background:url(/real/user/images/link-magentabox.gif) left -17px no-repeat;
}

#magenta-box a.magentaimglink, #magenta-box a:link.magentaimglink, #magenta-box a:active.magentaimglink, #magenta-box a:visited.magentaimglink
{ background:none; margin:0; padding:0; }

/* -- */


/* ----> menu new -- */
.menu_1 a, .menu_1 a:link, .menu_1 a:active, .menu_1 a:visited {
  text-decoration:none;
  font-weight:bold; display:block;
}
.menu_1 a:hover {
  text-decoration:none;
}

.menu_2 a, .menu_2 a:link, .menu_2 a:active, .menu_2 a:visited {
  text-decoration:none;
  font-weight:normal;
  color:#252525; display:block; height:8px; padding:4px 0 11px 15px;
}
.menu_2 a:hover {
  text-decoration:none;
  color:#FFF;
  background-color:#b84263;
}
.menu_2 a.active {
  display:block; height:8px; padding:4px 0 11px 15px; background-color:#b84263;
}
/* -- */



.maincontent a.forward {
  padding-left:16px;
  text-decoration:none;
  background:url(/real/user/images/link.gif) left 0px no-repeat;
}
.maincontent a.forward:hover {
  background:url(/real/user/images/link.gif) left -14px no-repeat;
}

#footer p a, #footer p a:hover {
  text-decoration:none; color:#453526;
}



/* -------------------------------------------------------------------------+
|
|                IMAGES
|
+--------------------------------------------------------------------------*/

#heading-panel img.left { float:left; margin-left:50px; }
#heading-panel img.right { float:right; margin-right:50px; }


/* menu pix -- */

.menu-frog { background:url(/real/user/images/menu-frog.jpg) left top no-repeat; }


/* standards -- */

.maincontent img { border:10px solid #fff; margin:5px 0 25px 0; }
.maincontent img.scribble { border:none; float:left; margin:15px 30px 25px 0; }
.maincontent img.noborder { border:none; margin:10px 30px 25px 30px; }
.maincontent img.left { float:left; margin:15px 30px 25px 0; }
.maincontent img.right { float:right; margin:15px 0 25px 30px; }

.thumbrow {
  width:560px; height:120px;
  margin:-15px 0 15px 0; padding:0;
  overflow:hidden;
}

.thumbrow img {
  width:85px; height:85px;
  padding:0;
  overflow:hidden;
}

#thumb1, #thumb2, #thumb3, #thumb4 {
    margin:0 9px 0 0;
}

#thumb5 {
  margin:0 -1px 0 0;
}

/* Projekt-Thumbs */

.projectthumb {
  cursor: pointer;
}

.projectactive, .projectactiveright, .projectactivearticle {
  float:right;
}



/* -------------------------------------------------------------------------+
|
|                LIST and DROPDOWN
|
+--------------------------------------------------------------------------*/


.mainmenu ul { margin:30px 0 0 25px; }
.mainmenu ul li { margin-bottom:14px; }

.submenu ul { margin:25px 0 0 0; }
.submenu ul li { /*margin:6px 0 6px 0;*/ }

/* ----> menu new -- */
.menu_1 ul { margin:30px 0 0 25px; }
.menu_1 ul li { margin-bottom:14px; }

.menu_2 ul { margin:25px 0 0 0; }
.menu_2 ul li { /*margin:6px 0 6px 0;*/ }
/* -- */


div.maincontent ul {
 margin:25px 80px 25px 20px;
}

div.maincontent ul li {
  margin:5px 0 15px 0;
  font-size:12px;
  font-weight:bold;
  line-height:17px;
}

/* downloads & checklisten */

div.maincontent ul.downloads {
 margin:25px 80px 25px 0px;
}
div.maincontent ul.downloads li {
  margin:5px 0 10px 0px;
  padding-left:25px;
  font-size:12px;
  background:url(/real/user/images/doc_pdf.png) left top no-repeat;
}
div.maincontent ul.downloads li a {
  font-weight:normal;
  text-decoration:none;
}


div.maincontent ul.checklist {
 margin:25px 80px 25px 0px;
}
div.maincontent ul.checklist li {
  margin:5px 0 10px 0px;
  padding-left:25px;
  font-size:12px;
  background:url(/real/user/images/doc_checklist.png) left top no-repeat;
}
div.maincontent ul.checklist li a {
  font-weight:normal;
  text-decoration:none;
}





/* project dropdown jquery */


dl { width:450px; }
dd {
  width:300px;
  margin:0 0 3px 0;
  padding-bottom:10px;
}
dl { margin:10px 0 0 0; }

#bottom .right dt { display:block; width:450px; height:14px; padding:8px 0 0 0; margin:5px 0 10px 0; background:url(/real/user/images/border-project.gif) top repeat-x; }

#bottom .right dt a { display:block; width:450px; height:17px; color:#f4f1e2; font-weight:bold; font-size:11px; text-decoration:none; font-style:italic; background:url(/real/user/images/dropdown.gif) 433px 0px no-repeat; }

#bottom .right dt a:hover { color:#fff; background:url(/real/user/images/dropdown.gif) 433px -17px no-repeat; }
dd a { color: #000; }

#bottom .right dd a { color:#cbc8ae; text-decoration:none; }
#bottom .right dd a:hover { color:#f5f2e3; text-decoration:underline; }




/* -------------------------------------------------------------------------+
|
|                FORMS
|
+--------------------------------------------------------------------------*/

/* checkliste üfr die private nutzung */

.checklist, #form1, #form2, #form3, #form4, #form5, #form6, #form7, #form8 {
  width:560px;
}



.checklistdescription{
  font-size:13px;
  padding-bottom:10px;
 }

.checklistinputsmall {
  background:url(/real/user/images/bg_input.gif) left repeat-x #fff;
  border: 1px solid #746456;
  width:25px;
  height:18px;
  margin:0 10px 0 40px;
  padding:2px 0 0 5px;
  display:block;
}

.checklistinputlarge  {
  background:url(/real/user/images/bg_input.gif) left repeat-x #fff;
  border: 1px solid #746456;
  width:97px;
  height:18px;
  margin:0 15px 0 35px;
  padding:2px 0 0 5px;
  display:block;
}

.checklisttable, .checklistinputcontainer {
  font-size:13px;
}

a.checklistnext, a.checklistprevious {
  visibility:hidden;
  font-style:italic;
  margin-top:30px;
  text-decoration:none;
  cursor:pointer;
}
  
a.checklistnext {
  font-weight:bold;
  font-size:15px;
  float:right;
  background:url(/real/user/images/checklist_next.jpg) no-repeat 153px 0;
  width:170px;
  height:17px;
}

a.checklistnext:hover {
  background-position:153px -17px;
}

a.checklistprevious {
  font-size:12px;
  float:left;
  background:url(/real/user/images/checklist_previous.jpg) no-repeat 0 0px;
  width:144px;
  padding-left:26px;
  padding-top:2px;
  height:15px;
}

a.checklistprevious:hover {
  background-position:0 -17px;
}

input.checklistbutton {
  height:28px;
  background:url(/real/user/images/bg_button.gif) bottom repeat-x;
  color:#FFF; cursor:pointer; font-size:11px;
  margin:21px 35px 0 0; padding:0;
  float:right;
}
  

#checklisthelpcontainer {
  background:url(/real/user/images/checklisthelp.jpg) no-repeat #B84263 25px 3px;
}

#checklisthelpcontainer  p {
  padding-left:50px;
  width:200px;
}

.hiddenerror {
  visibility:hidden;
  font-weight:bold;
  font-style:italic;
  color:#B84263;
}

.hiddennojava {
  visibility:visible;
}

.checklisttableheader {
  width:156px;
text-align:right;
}

/* kontaktformular */

form  {
  display:block;
  width:455px;
  margin:0; padding:0;
  }

span.legend {
  font-size: 13px;
  font-weight: bold; font-style:italic;
  color:#453526;;
  padding: 8px 8px 20px 0;
  display: block;
  margin-top: 20px;
}

div.checklist span.legend {
  margin-top:48px;
}

label {
  display:block;
  overflow: hidden;
  float: left;
  width: 60px;
  margin-left: 10px;
  font-size: 10px;
  color: #666;
  margin: 10px 0 0 0; padding:0;
  }

input {
  height:16px; width:140px;
  float:left;
  border: 1px solid #746456;
  margin:3px 20px 8px 0; padding:2px 0 0 5px;
  font-size:11px;
  background:url(/real/user/images/bg_input.gif) left repeat-x #fff;
}

.nobginput {
  background-image:none;
  background-color:#F4F1E2;
  border:none;
  height:auto;
  width:auto;
  margin-top:3px;
}

.kontaktinput {
  height:18px; width:140px;
  float:left;
  border: 1px solid #746456;
  margin:3px 20px 8px 0; padding:2px 0 0 5px;
  font-size:11px;
  background:url(/real/user/images/bg_input.gif) left repeat-x #fff;
}

textarea {
  width: 410px;
  border: 1px solid #746456;
  height: 160px;
  background:url(/real/user/images/bg_input.gif) top repeat-x #fff;
  padding:10px 10px 15px 5px; margin:0;
}
  
select {  
  height: 21px; width:120px;
  background:url(/real/user/images/bg_select.gif) left repeat-x;
  border: 1px solid #746456;
  font-size: 11px; color: #000;
}

input.button {
  height:28px;
  background:url(/real/user/images/bg_button.gif) bottom repeat-x;
  color:#FFF; cursor:pointer; font-size:11px;
  margin:15px 0 0 290px; padding:0;
}


.Kontaktformular_error, .Check_PrivateNutzung_error, .Check_OertlicheGegebenheiten_error, .Kontaktformular_neu_error, .Checkliste_Gesamt_error {
  border:1px solid #b84263;
  /*background-color: #F1D078;*/
  background:url(/real/user/images/bg_input-error.gif) top repeat-x #fff;
}

/* bildwechsler */


#loadpic {
    position:relative;
    height:503px;
}

#loadpic IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

#loadpic IMG.active {
    z-index:10;
}

#loadpic IMG.last-active {
    z-index:9;
}


/* slideshow */

#slideshow {
  width:560px;
  height:315px;
  overflow:hidden;
}