/*  =========================================================
akademie.de - Artikel - CSS: Styleguide f�r Stylesheets
Datei: styleguide.css
Media: screen, projection

Datum: 15. Juli 2006
Autor: Peter M�ller
Mail:  akademie@infotekten.de
Web:   http://akademie.de/programmierung-administration/html-und-css/


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

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

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, tt, var,
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-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
	vertical-align: baseline;
}

html { /* In Firefox Rollbalken erzwingen, Little Boxes S. 77 */
    height: 101%;
}

body {
    line-height: 1;
    color: #1C1C1C;
    background: #fff url(../grafik/page_bg.jpg) repeat-x;
    text-align: center; /* Zentrierung f�r den <IE 5.x */
}

:focus {
	outline: 0;
}

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

h1 {
    font-size: 150%;
    line-height:76px;
    font-weight:bold;
    color:#fff;
}

h2 {
    margin-bottom: 1em;
    font-weight:bold;
    color:#4A6D83;
    font-size:80%;
    padding:10px 20px 0 20px;
    line-height:1.5;
}

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

ol, ul {
    list-style-type: 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
=============================== */
strong {
  color: #1C1C1C; font-weight: bold;
}

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

    a:hover {
        text-decoration:underline;
    }



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

.kleinschrift {
    font-size: 10px;
}

.accessibility {
    display: none;
}

.floatl {
    float:left;
    padding: 3px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.floatr {
    float:right;
    padding: 3px;
    margin-bottom: 10px;
    margin-left: 10px;
}

.clear,#clear {
    height:0.1px;
    font-size:0.1px;
    line-height:0.1px;
    clear:both;
}

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

  =2. LAYOUTBEREICHE

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

#pagewrapper {
    background: url(../grafik/main_bg.png) repeat-y center;
    width: 960px;
    margin: 0 auto;  /* Zentrierung */
    text-align: left;
}

#content {
    background: url(../grafik/top_bg.jpg) no-repeat top center;
    padding:0 9px 0 30px;
}

#content {
    	/**/*/ float:left; /* */
}

/* ===============================
   =KOPFBEREICH
=============================== */
#head {
    background: url(../grafik/head_bg.jpg) no-repeat center;
    height: 94px;
}

#menu-abschluss {
    display:block;
    height: 94px;
    width:  45px;
    float:left;
}

/* ===============================
   =NAVIBEREICH
=============================== */
#left {
    width: 192px;
    border-right: 1px dotted #4A6D83;
    margin-top:85px;
    float:left;
}

#left ul{
    margin: 0;
}

#left ul li{
    font-size:80%;
    line-height:1.8;
}

#left ul li ul li{
    font-size:100%;
    margin-left:20px;
}

#left ul li a{
    display:inlineblock;
    background: url(../grafik/submenu_closed.jpg) no-repeat left center;
    padding-left:20px;
    font-weight:bold;
    color:#1C1C1C;
    text-decoration:none;
}

#left ul li a.active.submenu,#left ul li a.trail.submenu{
    background: url(../grafik/submenu_open.jpg) no-repeat left center;
}


#left ul li ul li a{
    background: none;
    padding-left:0;
    font-weight:normal;
    color:#1C1C1C;
    text-decoration:none;
}

#left ul li a:hover,#left ul li a.active{
    background: url(../grafik/submenu_closed_hover.jpg) no-repeat left center;
}

#left ul li ul li a:hover, #left ul li ul li a.active{
    background: none;
    color: #990014;
}

#menue {
    float:left;
}

#menue ul li {
    float:left;
    display:inline;
}

#menue ul li a {
    display:block;
    width:94px;
    line-height:94px;
    background: url(../grafik/menu_item_normal.jpg) no-repeat center;
    text-align:center;
    color:#fff;
    font-size:80%;
    text-decoration:none;
}

#menue ul li a:hover {
    background: url(../grafik/menu_item_hover.jpg) no-repeat center;
    color:#005466;
}

#menue ul li a.active,
#menue ul li a.trail {
    background: url(../grafik/menu_item_active.jpg) no-repeat center;
    color:#000;
}
/* ===============================
   =TEXTBEREICH
=============================== */
#main {
    width:400px;
    float:left;
}

#main #gross {
    width:720px;
    float:left;
}

#main-referenzen {
    width: 921px;
    float:left;
}

#main .home h1 {
    padding-left:20px;
    white-space: nowrap;
    position:absolute;
}

#main .home h2 {
    padding-top:86px;
}

#main-referenzen .referenzen h1 {
height:70px;
padding-left:20px;
position:relative;
white-space:nowrap;
}


#main .ce_text,
#main-referenzen .ce_text {
    margin-top:10px;
    font-size:80%;
    padding:0 20px 0 20px;
    line-height:1.5;
}


*html #main .ce_text div {
   margin-bottom: 8px;
}

#main .ce_download {
    margin-top:10px;
    font-size:80%;
    padding:0 20px 0 20px;
}

#main .ce_download img {
    vertical-align:text-top;
}

#main .ce_accordion {
    font-size:80%;
    margin:10px 20px 0 20px;
    line-height:1.5;
    border-bottom:1px solid #ccc;
}

#main .ce_accordion .ce_text {
    background: none;
    padding: 10px 0 0 0;
    width: 340px;
    margin: 0;
    font-size: 100%;
}

#main .ce_text ul li,
#main-referenzen .ce_text ul li {
    list-style-type: disc;
    margin-top: 0px;
    margin-left: 19px;
}

#main .ce_text ul li ul li,
#main-referenzen .ce_text ul li ul li {
    list-style-type: circle;
}

#main .ce_text ol li,
#main-referenzen .ce_text ol li {
    list-style-type: decimal;
    margin-left: 19px;
}

#main .ce_accordion .ce_text.technik,
#main .ce_text.technik,
#main-referenzen .ce_text.technik {
    float: left;
    width: 212px;
    display: block;
    padding: 5px;
    margin: 20px 0 20px 10px;
}

*html #main .ce_accordion .ce_text.technik,
*html #main .ce_text.technik {
    float: left;
    width: 200px;
    display: block;
    padding: 5px 3px 5px 3px;
    margin: 20px 0 20px 10px;
}


*html #main-referenzen .ce_text.technik {
    float: left;
    width: 218px;
    display: block;
    padding: 5px 3px 5px 3px;
    margin: 20px 0 20px 10px;
}

#main .ce_text.technik p {
    float: left;
    padding: 0 0 5px 0;
}

#main .ce_text.technik .image_container {
    float: none;
    text-align: center;
}

#main .ce_text.technik-klein  {
    float: left;
    width: 220px;
    display: block;
    padding-right: 10px;
}

#main .ce_text.technik-klein p {
    float: left;
    width: 210px;
    padding: 5px;
    background-color: #CCC;
}

#main .ce_text.technik-klein .image_container {
    float: none;
    text-align: center;
    width: 208px;
    border: 1px solid #CCC;
}

#main h3 {
    color:#fff;
    font-weight:bold;
    line-height:40px;
    background: #4A6D83;
    border-top:3px double #FFF;
    margin: 10px 20px 0 20px;
    width: 350px;
    padding-left:10px;
}

#main .ce_gallery {
    padding:10px;
    width: 340px;
    margin: 0 0 0 20px;
}

#main .fenstertechnik .ce_gallery {
    background: none;
    padding:10px;
    width: 310px;
    margin: 10px 0 0 20px;
    border: 1px solid #CCC;
    display:inline;
}

#main .fenstertechnik .ce_text {
    background: #ccc;
    padding:10px;
    width: 312px;
    margin: 0 0 0 20px;
    display:inline;
}

#main .ce_text.schiebetuertechnik  {
    float: left;
    width: 330px;
    display: block;
    padding-right: 10px;
}

#main .ce_text.schiebetuertechnik p {
    float: left;
    width: 320px;
    padding: 5px;
}

#main .ce_text.schiebetuertechnik .image_container {
    float: none;
    text-align: center;
    width: 320px;
}

#main .ce_text.schiebetuertechnik.links .image_container img {
    float: left;
    padding: 0 0 0 20px;
}


#main .ce_accordion .ce_gallery {
    background: none;
    padding: 10px 0 0 0;
    width: 340px;
    margin: 0;
    display:inline;
}

#main .ce_accordion .ce_gallery table img {
    padding: 0 5px 0 5px;
}

*html #main .ce_gallery,
*html #main .ce_accordion .ce_gallery {
    padding:5px;
    width: 350px;
}

#main .galerie table .image_container {
    padding-right: 10px;
    border: 0px;
}


#main .mod_sitemap .ce_text {padding-left: 0px;}

*html #main .mod_sitemap.ce_text {
    padding-left: 20px;
}

*html .mod_sitemap ul li {
    line-height: 1;
}

*html .mod_sitemap ul li ul  {padding-top: 10px;}

*html .mod_sitemap ul li ul li ul li {
    padding-top: 0px;
    line-height: 10px;
}

.mod_sitemap ul li ul li {
    font-size:100%;
    margin-left:20px;
}

.mod_sitemap ul li a {
    display: block;
    background: url(../grafik/submenu_closed.jpg) no-repeat left center;
    padding-left:20px;
    font-weight:bold;
    color:#1C1C1C;
    text-decoration:none;
}

.mod_sitemap li ul li a {
    background: none;
    padding-left:0;
    font-weight:normal;
    color:#1C1C1C;
    text-decoration:none;
}

.mod_sitemap ul li a:hover {
    background: url(../grafik/submenu_closed_hover.jpg) no-repeat left center;
}

.mod_sitemap ul li ul li a:hover {
    background: none;
    color: #990014;
}


#right {
    float:right;
}

#right .ce_text {
    margin-top:10px;
    font-size:80%;
    padding:0 20px;
    line-height:1.5;
}

#right .mod_article {
    width:320px;
}

#right .home {
    width:auto;
}

#right .image_container {
    margin:30px 0 0 0px;
    width:320px;
    background: url(../grafik/image_bg.png) repeat-x top center;
}

#right .ral .image_container {
    margin:30px 0 0 0px;
    width:300px;
    background: none;
}


#right .solo {
    width:auto;
    float:left;
    padding-right:10px;
}

#right .solo .image_container {
    margin:30px 0 0 0px;
    width:auto;
    background: none;
}

#right .ce_image.solo .image_container img {
    padding: 0 0 0 0;
    width: auto;
    background: none;
}

#right .image_container img {
    padding:10px;
    width:300px;
    background: url(../grafik/image_bg.png) repeat-x bottom center;
}

#right .ce_image.ral .image_container img {
    padding: 0 0 0 0;
    width: 100px;
    float: left;
    background: none;
}

#right .galerie .image_container img {
    padding: 0px;
    width:auto;
    background: none;
}

#right .galerie table .image_container {
    width: 72px;
    border: 0px;
}

#right .home .image_container {
    margin:46px 0 0 0px;
    width:auto;
    background: none;
}

#right .home .image_container img {
    padding:0 0 20px 20px;
    width:500px;
}

#right h3 {
    color:#fff;
    font-weight:bold;
    line-height:40px;
    background: #4A6D83;
    border-top:3px double #FFF;
    margin-top:10px;
    padding-left:10px;
}

#right .ce_gallery {
    background: #E2E2E2;
    padding:10px;
}

/*#right .ce_gallery {
    background: #E2E2E2;
    padding:10px;
    height:140px;
    overflow: hidden;
}  */

.toggler{
    background: url(../grafik/submenu_closed_hover.jpg) no-repeat right center;
    padding-right:20px;
    font-weight:bold;
    text-decoration:none;
    cursor: pointer;
}

.noborder img {
  border:0;padding:0;
}


/* ===============================
   =FUSSBEREICH
=============================== */

#foot {
    background: url(../grafik/foot.jpg) no-repeat bottom center;
    height: 120px;
    margin-top:10px;
    clear:both;
}

#foot .home {padding: 75px 0 0 760px; color: #FFF;}

#foot .mod_customnav {padding: 75px 0 0 735px;}
#foot .mod_customnav ul li {display: inline;}
#foot .mod_customnav ul li a {color: #FFF; font-size: 80%; font-weight: bold; padding-left: 2px; padding-right: 7px; border-right: 1px solid #FFF;}
#foot .mod_customnav ul li a.last {border-right: none;}

/* ===============================
   =SUCHE
=============================== */

#suche {
  float:right;
  margin:33px 15px 0 0;
}

  #suche form {
    margin:0px;
  }

    #suche form .formbody {
      background:transparent url(../grafik/search_field_bg.gif) no-repeat scroll left center;
      height:25px;
      width:200px;
    }

      #suche form .formbody input {
        background:transparent none repeat scroll 0 0;
        border:0 none;
        margin:0;
        color:#1C1C1C;
        padding:4px 0 0 10px;
        width:155px;
      }

        #suche form .formbody input.submit {
          color:#cccccc;
          display:inline;
          height:20px;
          width:30px;
        }

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

   =3. Spezielle Seiten

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

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

form {
    margin: 20px 0 0 20px;
}

    label {
        display: block;
        width: 370px;
        float: left;
        margin-top: 10px;
        padding-right: 1em;
        font-size:80%;
    }

    p.error {
       color: #FF0000;
       font-size: 80%;
       margin-bottom: 0px;
    }

    input,
    select,
    textarea {
        width: 350px;
        border: 1px solid #999;
        margin-top: 10px;
        color: #1C1C1C;
        font-size:80%;
    }

    .checkbox_container  {
        width: 350px;
    }

    div.checkbox_container span  {
        display: block;
    }

    div.checkbox_container input {
        width: 30px;
        border: none;
        float: left;
        clear: both;

    }

    div.checkbox_container label {
        width: 250px;
    }

    *html div.checkbox_container label {
        padding-top: 5px;
    }

    *+html div.checkbox_container label {
        padding-top: 5px;
    }

    input.submit {
            width: auto;
        }

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

    .submit_container input {
        border: 0px;
    }

/* ===============================
   Suche
=============================== */

#main .mod_search               {margin-left: 20px;}
#main .mod_search form          {margin: 0 0 15px 0;}
#main .mod_search .header,
#main .mod_search p             {font-size: 80%;}

#main .mod_search h3 {
    font-size: 80%;
    font-weight:bold;
    line-height:40px;
    background: none;
    border-top: 0px;
    margin: 0 0 10px 0;
    padding: 0;
    line-height: normal;
}

#main .mod_search a             {color:#4A6D83;}
#main .mod_search .relevance    {color: #717879;font-weight:normal;}
#main .mod_search .highlight    {font-weight: bold;}

#main .mod_search div.even{
    padding:8px 8px 3px 8px;
    margin:5px 0;
    border-bottom:1px solid #D3D3D3;
    background-color:#eee;
}

#main .mod_search div.odd       {padding:8px 8px 3px 8px;}
#main .mod_search div.pagination {padding:8px 8px 3px 8px;}
#main .mod_search input.submit  {border: none; width: 113px; height: 24px; color: #FFF; font-weight: bold; font-size: 75%; padding-bottom:3px; background: url(../grafik/suchen.jpg) no-repeat left center;}

#main .mod_search div .url      {font-style: italic;}
#main .mod_search div .context  {line-height: 1.5;}


#main .mod_search .pagination   {border-top:1px solid #D3D3D3;}

#main .mod_search .pagination p {
    float:left;
    margin-right:25px;
    font-weight:bold;
}

#main .mod_search .pagination ul li {
    float:left;
    display:inline;
    border-right: 1px solid #C3C3C3;
    margin-right:5px;
    padding-right:8px;
    font-size: 80%;
}

#main .mod_search .pagination ul li.last {
    border-right:0;
    margin-right:0;
    padding-right:0;
}

/* ===============================
   Google-Anfahrt
=============================== */

#map                        {width: 250px; font-size:80%; margin: 0px 0 10px 23px;}
#map form                   {margin: 0px;}
p.anfahrt                   {font-size:80%; padding: 0 20px; line-height:1.5;}
#map input                  {font-size:100%; width: 220px; margin-top:5px; border: 1px solid #999; font-family: Arial, Verdana, Helvetica, sans-serif;}
#map input.button           {border: 1px solid #999;}
#directions                 {margin: 5px 0 10px 19px; font-size:80%; width: 690px; line-height:1.5;}
#map a,
#directions a               {color: #990014;}
.gmnoprint                  {color:#717879;}



/* EoF */