/*****   IMPORTANT NOTE: The basics are here, the canvas, images, colors, coding.
Still may want or need to recode some of it, to fit your own technique.  Due to cross-
browser compatibility issues with liquid designs; which are somewhat different to work
wit, I use no left or right pad/margin, at all, on outer divs, but instead nest two divs,
like sticking a 3 inch box into a 4 inch box, to give you a 1/2 inch margin.  The outer
at nearly full width, leave a few percent for play, style content centered, "margin:0 auto; and
text-align:center;" and then insert an inner div, at 90 percent width (100 if needed),
centered or floated, and a little pad to the inner div, if needed, .  The inner gets all
styles, border, color, whatever.  This provides a fake or faux left/right pad/margin, as
needed, by adjusting width percentage. You could also float the outer left, and the inner
right, to give you the same outcome, as I did in my A12 template's left column.  *******/



/***** CSS Document ******/

/** CSS REFERENCE CARD
http://www.w3schools.com/css/css_reference.asp  ***/


/**  The main trick to doing liquid width layouts,
is that you cannot have pad/margin/border on 100%
wide divs.  They must be on width:auto divs.  To do
this, must 100% it's outer, and style the inner.  **/

/***********  default font-size:12px, use 100% for that  ********/
/*****  90%=11px, 80% in forms, 85% otherwise roughs 10 to 10.5px, a minimum  *****/
/******  NOTEs: DW wont view all docs properly, try browsers first, before modification  *******/
/****  divs must float left for dw to view border, most pages must be 100% wide to view proper ********/
/*********  to center page is confusing, when float left is necessary  ************/
/**** trick for "center with float left" is float left 100% wide w/body margin sides 5% or more *****/
/**** Above not a 100% fix for dw view, borders still flakey *****/
/*****  another trick to keep position going, is only float what needs floating  *********/
/*****  try add or remove <br> in end of empty divs, or remove float, make dw view properly *******/
/*****  NOTE: The <strong> tag &/or no clear float at base, made link repeat at base of page  *****/
/**** The trick hack to stop hover jumpy links, is to put every section into a div, classed seperate  ****/
/******  any div that has a specified margin/pad can't have links without containers  *****/
/******  another hack, is to classify all links, so that they don't margin/pad jumpy  *****/
/*****  the divs containing links can't have set width and margin/pad alterations, or theyll be jumpy  *******/
/**** Hack: Removed width to stop jumpy hover-links, setting pad-margin made it width:auto  *****/
/**** Jumpy Links solved with px instead of % on pad/margin  ****/
/****  Rows of divs must be in wrappers, to wrap correctly, so they don't hang when wrapping"  ***/

/***  Height to "li a" works to allow full width
         links when width:100% is not an option;
                 and seems to force divs to hold contents,
                 when float is not an option.  Height needs
                 accuracy, or problematic with Firefox ****/
/****  FLOAT:LEFT WAS NEVER USED IN MANY HORIZONTAL ULs  *****/

/********  Not Blocked/Floated  **********/
/****  Appears that inner divs go against prior divs, but which ones?  *********/
/****  Deleting all unnecessary div borders resolved doublewide dw blowout  *****/
/*****  divs out of order, caused absolute columns to vanish  ******/
/***  absolute positioning, use left (never right dimension) fixes layering problem ******/
/**** bodycontainer floated left caused doublewide blowout  ******/


/****   VERY IMPORTANT NOTE  ****/
/****
   KEEP ALL ABSOLUTE POSITIONED DIVS INSIDE OF THE CANVAS_WRAP DIV, TO
   KEEP ALL ABSOLUTE POSITIONED WORK BOXES VISIBLE IN Nvu and Dreamweaver
   Editors.  IT's JUST A Z-INDEX RELATED FIX FOR WYSIWYG HTML EDITORS.
   VERY IMPORTANT NOTE  ****/

/* Angaben in em in folgenden Zeilen:
   76, 139, 470, 480, 491, 506, 520, 587, 638
*/
body {
/* margin:4px 0px; */
padding:0;
background: /* transparent url("media/gradient_tan.jpg") repeat-x left top*/ white;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;

color:#000000;
}

p {margin:0 6px 6px 0px;padding:0;}
td {margin:2px; text-align:center;}

/*a:link {color:  #ff5700;}*/
a:hover {color: #ff894c; }
/* The background-image's for the .wrap below are for preloading
all the page's images, just add your own images to the pattern */
/***  Preload media  ***/
/*.wrap {
        background-image: url(media/osp_smallsolid.jpg);
        background-image: url(media/duo-arrowdown-navy.gif);
        background-image: url(media/duo-octarrowright-purple.gif);
        background-image: url(media/gradient_tan.jpg);
        background-image: url(media/gradient_beige.jpg);
        background-image: url(media/stucco-bigtran.gif);
        background-image: url(media/tiger65.gif);
        background-repeat: no-repeat;
        background-position: -5000px -5000px;}    */
/**** end preload images ****/

.wrap {
display:block;
margin: /*0 auto*/ 0.5% ;
padding: 0;
width:99%;
background: /* transparent url("media/gradient_beige.jpg") repeat-x left top; */ white;
border: 1px solid #000000;
text-align:center;

}

.headrow_one {
display:block;
float:left;
margin:0;
padding:0;
width:100%;
background:white;
/*height:100px;*/
/*background: transparent url("media/osp_smallsolid.jpg") repeat-x left top;  */
}

.rowone_left {
float:left;
margin:0;
padding:0;
width:69.5%;
height:92px;
/* background: transparent url("media/vamos1.gif") no-repeat left top;   */
text-align:left;
}


.rowone_right {
float:right;
margin:0;
padding: 0;
width:30%;
/*height:99px; */
/*background: transparent url("media/stucco-bigtran.gif") no-repeat 95% 100%;*/
text-align:right;
        color: #000000;

font-weight:bold;
      /* filter:dropshadow(color=#000000, offx=1, offy=1, positive=true*/);
}

.headrow_two {
display:block;
float:left;
margin:0;
padding:0;
width:100%;
background-color: /* #2B2B4C*/ #FF5700;
/* border-top:1px solid black;
border-bottom:1px solid black;        */
}

.rowtwo_left {
float:left;
margin:0;
padding:0;
width:22%;
text-align:center;}

.rowtwo_mid {
float:left;
margin:0;
padding:0;
width:54%;
text-align:center;}

.rowtwo_right {
float:right;
margin:0;
padding:0;
width:23.99%;
text-align:center;}

.mainbody {
margin:0;
padding:0;

}

.left {
float:left;
margin:0 /*auto*/;
padding:0;
width:22%;
/* height:476px;       */

/*border-right:1px solid black; */
text-align:center;

}

.left_content {
margin:0 ;
padding:0;
width:90%;
text-align:center;
}


.center {
float:left;
margin:0 ;
padding: 0px;
width:54.9%;
text-align:center;


}


.center_content {
float:right;
margin:0;
padding:0;
width: 98%;
/*width:300px;  */
background-color:transparent;
text-align:left;
}


.right {
/* overflow:auto; */
float:right;
margin:0px;
padding:0px;
width:22%;
text-align:left;
/* border-left:1px solid black;
border-bottom: 1px solid black;  */
background-color                : #ffccb2;
clear:right;
}

.left2 {
/* overflow:auto; */
float:left;
margin:0px;
padding:0px;
width: 99.8%;
text-align:left;
/* border-left:1px solid black;
border-bottom: 1px solid black;  */
background-color                : #ffccb2;

}

.footer_top {display:block;clear:both;margin:0px;padding:0px 0 0px 0;
width:100%;background-color: #ff5700;
text-align:center;color: white; font-weight: bold;
}

.footer_bottom {
display:block;clear:both;margin:0 ;padding:0px; width:100%;
background-color:  black ;
border-bottom:1px solid black;*/text-align:center;color:#e5b7a0;
font-weight: bold;}

/***  BEGIN FORMS STYLING  ***/

form {
margin:0 /*auto*/;
padding:0;
text-align:center;
}

/***  This is for the Google language translation box  ***/

.pullmenus {
padding:0;
margin:0;
background-color: #ffffff;
text-align: left;
color: #000000;
width:95%;
font-size: 10px;
}

/***   Google Search Box  ****/
/**  searchbox_wrap used for margin-top
fix for table margin-top prob , and
problem that 100% width does not work,
borders break layout  **/

.searchbox_wrap {
margin:0;
margin-top:0px;
padding:0px;
border:0;
width:95%;
float:left;
}

.searchbox_wrap2 {
margin:0;
margin-top:0px;
padding:0px;
border:0;
width:95%;
float:right;
margin-bottom:6px;
}
.searchbox_wrap2a {
margin:0;
margin-top:0px;
padding:0px;
border:0;
width:95%;
float:right;
background-color:/*#FFFF00*/ white;
margin-bottom:6px;
}

.searchbox_wrap3 {
margin:0;
margin-top:0px;
padding:0px;
border:0;
width:98%;
float:left;
}
.searchbox_wrap4 {
margin:0;
margin-top:0px;
padding:0px;
border:0;
width:98%;
float:right;
margin-bottom:6px;
}

.searchtable {
margin:0 /*auto*/;
padding:0;
border:0;
text-align:center;
/*** keeps boxes open  ****/
width:99%;
}

.searchbox1 {
margin:0;
padding:0;
background-color: #D5DDE8;
text-align: left;
color: #000000;
width:auto;
font-size:10px;
text-align:left;}

.searchbox2 {
margin:0;
padding:0;
background-color: #D5DDE8;
text-align: left;
color: #000000;
width:auto;
font-size:10px;
}

.searchbutton {
margin:0;
padding:0;
width:auto;
font-size:11px;
border:1px ridge #ffcc33;
background-color:#333366;
color: #ffffff;
}

/****  "center_content"  ****/
.center_content {}
/****  "center_content" link styles   ****/
/*.center_content a:link, .center_content a:visited {color: /*#cc9966*/ /*#ff5700 ;text-decoration:/*none*/ /*underline; /*border-bottom:1px  dashed  solid #000000 #ff5700;*//*}
.center_content a:hover, .center_content a:active  {color:#000000;background-color: /*#eaeaea*/ /*#ffccb2;/*border-bottom:1px dashed #333366 solid black;*//* text-decoration: underline;} */


/****  Featured Services Vertical  ****/
.featuredservices_container {
display:block;margin:0 /*auto*/; margin-top:15px; margin-bottom:15px;padding: 0;
padding-bottom:5px;width:auto; text-align:center;}

/***  featuredservices_nav LIST STYLES  ***/
.featuredservices_nav {
display:block;clear:both;margin:0 /*auto*/;padding:0;width:95%;text-align:center;text-indent:0px;}

.featuredservices_nav ul {
display:block;clear:both;margin:0; padding:0; text-align:left;text-indent:0px;}

.featuredservices_nav ul li {
display:block; width:100%; margin:0; margin:4px 0px;padding:0;list-style: none; border-bottom: 0px solid #7f7f7f; text-indent:14px; line-height:13px;/*** <<height of image  **/
}

/****  featuredservices_nav LINK STYLES  ****/
.featuredservices_nav ul li a:link,
.featuredservices_nav ul li a:visited {
display:block; width:100%;
background: url("media/duo-octarrowright-purple.gif") no-repeat left bottom;
font-size:10px;font-weight:bold;font-family:verdana;text-decoration:none;
color:#000000;
}

.featuredservices_nav ul li a:hover,
.featuredservices_nav ul li a:active {
display:block; width:100%;
background: url("media/duo-octarrowright-purple.gif") no-repeat left top;
font-size:10px;font-weight:bold;font-family:verdana;
text-decoration:underline;color:#333366;
}
/* the following 3 rules are for a featuredservices_nav indented submenu
in case you decide to add later. See free template called "a bit modern".
  ***/
.featuredservices_nav ul ul li {
line-height: 10px;        border-bottom: none}
.featuredservices_nav ul ul li a:link,
.featuredservices_nav ul ul li a:visited {
color:#cccccc; text-indent:10px;}
.featuredservices_nav ul ul li a:hover,
.featuredservices_nav ul ul li a:active {
color:#cccccc; text-indent:10px;}


/****  RELATED LINKS Vertical  ****/
.relatedlinks_container {display:block;margin:0; margin-top:5px; padding: 0;
padding-bottom:5px;width:auto;text-align:left;}
.relatedlinks_nav {
display:block;clear:both;margin:0 /*auto*/;padding:0;width:95%;
text-align:center;text-indent:0px;}
.relatedlinks_nav ul {
display:block;clear:both;margin:0; padding:0; text-align:left;text-indent:0px;}
.relatedlinks_nav ul li {
display:block; width:100%; margin:4px 0px; padding:0;list-style: none;
border-bottom: 0px solid #7f7f7f; text-indent:14px;
line-height:12px; /*** <<height of image  **/}
/****   RELATED LINKS LINK STYLES  ****/
.relatedlinks_nav ul li a:link,
.relatedlinks_nav ul li a:visited {
display:block;width:100%;
background: url("media/duo-arrowdown-navy.gif") no-repeat left bottom;
font-size:10px;font-weight:bold;font-family:verdana;text-decoration:none;
color:#000000;}
.relatedlinks_nav ul li a:hover,
.relatedlinks_nav ul li a:active {
display:block;width:100%;
background: url("media/duo-arrowdown-navy.gif") no-repeat left top;
font-size:10px;font-weight:bold;font-family:verdana;
text-decoration:underline;color:#333366;}


/****  "basemenu" HORIZONTAL   ****/
/*.footer_top {padding-bottom:4px;}*/
.footer_top .basemenu {display:block; margin:0 /*auto*/;  padding:0; width:auto; text-align:center;}
.footer_top ul.basemenu {display:block; margin:0; padding:0; padding-bottom:2px; list-style: none inside; text-align: center;}
.footer_top ul.basemenu li {margin:0; padding:0; display:inline ;/*color:#cc9966;*/}
/****  "basemenu" menu link styles   ****/
.footer_top ul.basemenu li a:link, .footer_top ul.basemenu li a:visited {
color:#ffffff;text-decoration:none; /*border-bottom:1px dashed #cc9966;*/}
.footer_top ul.basemenu li a:hover, .footer_top ul.basemenu li a:active  {
color:/*#cc9966*/ black;background-color: /*#333366;border-bottom:1px dashed #ffffff;*/#ffccb2;}

/****  "basemenu" menu link styles   ****/
.footer_bottom {padding-bottom:2px}
.footer_bottom a:link, .footer_bottom a:visited {color:#ffffff;text-decoration:none; border-bottom:1px dashed #cc9966;}
.footer_bottom a:hover, footer_bottom a:active  {color:#cc9966;border-bottom:1px dashed #ffffff;}


/*** ntfly-menu from -Home- container below  ****/
/*** ntfly-menu_container to center and pad the menu  ****/
.ntmenu_container {
margin:0 /*auto*/;
padding:0;
padding-top:15px;
text-align:center;
width:136px;
}




/************  BODY AND HEAD  **********/

h1 {
        margin:0 0 6px 0;
        padding:0;
        padding-top:10px;
        text-align: left;
        font-weight: bold;
        color: #000000;
     /*   width:100%;    */
       /* filter:dropshadow(color=#000000, offx=1, offy=1, positive=true);
        text-indent:100px;*/}

.h1b {
        margin:0;
        padding:0;

        font-weight: bold;
        color: #cc9966;
    /*    width:100%;    */
        filter:dropshadow(color=#000000, offx=1, offy=1, positive=true);
        text-indent:100px;}
h2 {
        margin:0 0 6px 0;
        padding:0;
        padding-top:5px;
        padding-bottom:5px;
        text-align: left;
        font-weight: bold;
        color: #000000;
     /*   width:100%;      */
/*filter:dropshadow(color=#C2BBAF, offx=2, offy=2, positive=true); */
}

h3,h5 {
        margin:0 0 6px 0;
        padding:0;
        padding-top:5px;
        padding-bottom:5px;
        text-align: left;
        font-weight: bold;
        color: #000000;
     /*   width:100%;    */
}
h4 {
        margin:6px 2px 6px 0px;
        padding:6px;
        background-color: #ffab7f;
        /*border-top: 2px solid #333366;
        border-left: 10px solid #cc9966;
        border-bottom: 2px ridge #333366;   */
        width:auto;
        color:black;

        font-weight:bold;
        text-align:left;

}

.img {margin-right:5px}
/*************  end  *******************/

#navigation {
        float: left;
        margin: 0;
        border: 0;
        width: 100%;
        font-size                        : 12px;
        padding                                : 0px;
        text-align: left;
      /*  border-bottom:1px solid black;         */
        padding-top: 5px;
        padding-bottom: 5px;
        z-index : 2;
}
#inhalt {
    float: left;
        padding: 0;
        margin: 0;
        border: 0;
      /*  background-color                      : #ffd000;       */
        width: 100%;
}
#rechts {
        float: right;
         padding: 0;
        margin: 0;
         border: 0;
        background-color                        : #FFbc99;
         width: 20%;

}
#navigation   li {
    list-style: none;
    margin-top: 0; padding: 0 ;

  }


  .c1 {
    margin-left: 0.5em;
  }
  .c2 {
    margin-left: 1.5em;
  }
  .c3 {
    margin-left: 2.5em;
  }
 .c4 {
    margin-left: 3.5em;
  }
  .c5 {
    margin-left: 4.5em;
  }
  .c6 {
    margin-left: 5.5em;
  }
 #navigation   a {
    display: block;
    padding: 0.2em;
    border: 1px solid  #ff5700;
    margin-bottom: 4px;
   background: #ffccb2;
    font-weight: bold;
    text-decoration:none;
  }
 #navigation   a:link {
    color: black;
  }
 #navigation   a:visited {
    color: /*#666*/ black;
  }
 #navigation   a:hover {
    color: black; background-color: white;
  }
 #navigation   a:active {
    color: black;
  }
  .gerade {
    background-color:lightgreen;
     margin: 0;
    padding:0.2em;
     font-size: 12px;
 }
 .ungerade {
    background-color:yellowgreen;
    margin: 0;
    padding: 0.2em;
    font-size:12px;
    }
.gerade h2 {
   font-size: 18px;
    margin: 0;
    padding: 0;
   }

.ungerade h2 {
   font-size:18px;
    margin: 0;
    padding: 0;
   }
 .gerade h3 {
   font-size: 14px;
    margin: 0;
    padding: 0;
   }

.ungerade h3 {
   font-size: 14px;
    margin: 0;
    padding: 0;
   }

 #important {
    /* clear: both; */

    margin: 0em; padding: 0 ;
    text-align: right;
    background-color:  #ff5700;
    border: none;
  }
 #important ul{
   padding: 0.2em;
   margin: 0;
   list-style-type: none;
  }
 #important ul li {
   display: inline;
     margin: 0.1em 0 0em 0;
 }
 #important ul li a {
    margin: 0 0 0em 0 ;
    font-weight: bold;
    text-decoration:none;
    color: white;
  }
  #important ul li a:link {
    color: white;
  }
  #important ul li a:visited {
    color: white;
  }
  #important ul li a:hover {
    color: black; background-color: #ffccb2;
  }
 #important ul li a:active {
    color: black;
  }
 #important a.gross {
  background-color:yellow; /*yellowgreen */
  font-size:1.5em;
  color:black;
  padding-top:0;
  text-align:left; }
 #important a.gross:link, #important a.gross:visited {color:black;}
 #important p {text-align:center; font-weight:bold; color:white; margin-top:0.3em;}
.boxL {float:left;
     /*  border:1px solid black;  */
        margin:5px 10px 5px 0;
      /* background:#FF0000;

       padding:6px;*/}

.boxC {float:left;
      /* border:1px solid black; */
        margin:6px;
        }

.boxR {float:right;
     /*  border:1px solid black;  */
        margin:6px 0px 6px 6px;

}


.box_left {
        float:left;
      /*   background:#00FFDF;   */
       /* width: 106px; */
       margin: 0;
        }

.box_left p {
       clear:left;
     /*  font-style:italic; */ font-weight: bold; color: #FF5700;
       margin: /*2px*/ 2px 0 2px 0;
       padding: 2px;
       }
/* .box_left h4 {color:#AF00FF;
       clear:left;
       margin:2px;
       padding: 2px;

           }
 */
.box_right {
        float:right;
 /*        background:#00FFDF;     */
       /* width: 106px;*/
   /*     margin: 5px;       */
       }

.box_right p {
       clear:right;
     /*  font-style:italic; */ font-weight: bold; color: #FF5700;
       margin:2px;
       padding: 2px;

       }
#zugriff {
	text-align:right;
         font-size:x-small;
         }
.clrboth {clear:both;}
hr {background-color: #ff5700;}
.shoptext1 {background-color:  #ff5700; margin-left: 3em;}
.gold1 {/*background:#FFAB7F;*/}
.gold2 {/*background:#FFD5BF;*/}
.shopsubmit {
     background: #ffccb2;
     border-bottom: #ff5700 solid 1px;
     border-right: #ff5700 solid 1px;
     border-left: #FFD5BF solid 1px;
     border-top: #FFD5BF solid 1px;
     margin: 3px; font-weight:bold;
     padding: 3px 0 3px 0;
     cursor:crosshair;
 }
/*table {border: 1px solid #ff5700;}
td  {border: 1px solid #ff5700 collapse;}       */
.tabe {background-color: #ff5700;}
.tabe td {background-color:white;}
/* ul {margin-left: 50px;
    padding-left:50px;}     */


#telefon p{text-align:left;
        margin:6px 2px 6px 20px;   }
#telefon h2
      {background-color: #FFD5BF;
        margin:6px 2px 6px 0px;
        padding:6px;
        width: auto;
      }