/*Global Stylesheet*/
/*Import all the Stylesheets*/


body {
    background: #000000;
    font-family: Arial,Helvetica,sans-serif;
    font-size:15px;
    line-height:20px;
    color:#333333;
    width:100%;
    text-align:center;
}
#centercontent {
    width:94%;
    max-width:800px;
    overflow:hidden;
    background-color: #FFFFFF;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    padding:2%;
    text-align:left;
    font-family: Arial,Helvetica,sans-serif;
}
#centercontent * {
    font-family: Arial,Helvetica,sans-serif;
    padding:0;
    margin:0;
    border:0;
    box-sizing: border-box;      /*Außenmaße von padding unabhängig*/
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -ms-box-sizing:border-box;
}

#headerpanel {
    width:100%;
}
#headerpanel .leftcolumn {
    float:left;
    width:33%;
    min-width:90px;
    max-width:300px;
}
#headerpanel .rightcolumn {
    float:right;
    width:65%;
    min-width:190px;
    max-width:650px;
}
#contentpanel {
    width:100%;
    max-width:700px;
    padding-top: 17px;
    padding-bottom: 17px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFFFFF;
    overflow:hidden;
}
#contentpanel .butt {
    margin:30px auto;
    padding:5px;
    font-size:18px;
    font-weight:bold;
    background-color: #FFFF00;
    color:#444488;
    border:1px solid #AA8800;
    border-radius:5px;
    -moz-box-shadow: 0 0 5px #A6A6A6;
    -webkit-box-shadow: 0 0 5px #A6A6A6;
    box-shadow: 0 0 5px #A6A6A6;
}
#contentpanel .butt:hover {
    color:#AAFF00;
    background-color: #FFFF00;
    border:1px solid #0000AA;
}
#contentpanel #formdiv{
    width:100%;
    max-width:250px;
    margin-top: 17px;
    margin-left: auto;
    margin-right: auto;
    background-color: #F0F0F0;
    padding:10px;
    border-radius:5px;
    -moz-box-shadow: 0 0 5px #999999;
    -webkit-box-shadow: 0 0 5px #999999;
    box-shadow: 0 0 5px #999999;
}
#contentpanel #formdiv .inputlabel{
    padding-top:15px;
    padding-bottom:5px;
    font-size:16px;
    font-weight:bold;
    background-color: transparent;
    color:#53565B;
}
#contentpanel #formdiv .inputdiv{
    background-color: transparent;
    width:100%;
}
#contentpanel #formdiv .captcha{
    display:none;
    background-color: transparent;
    width:0px;
    height:0px;
}
#contentpanel #formdiv .forminput {
    margin-left:1%;
    width:99%;
    padding:5px;
    font-size:16px;
    background-color: #E0E0E0;
    color:#444444;
    border:1px solid #666666;
    -moz-box-shadow: 0 0 5px #A6A6A6;
    -webkit-box-shadow: 0 0 5px #A6A6A6;
    box-shadow: 0 0 5px #A6A6A6;
}
#contentpanel #formdiv .fileinput {
    float:left;
    margin-left:1%;
    width:48%;
    min-width:170px;
    font-size:13px;
    background-color: #E0E0E0;
    color:#444444;
    border:1px solid #666666;
    padding:1px,5px;
    -moz-box-shadow: 0 0 5px #A6A6A6;
    -webkit-box-shadow: 0 0 5px #A6A6A6;
    box-shadow: 0 0 5px #A6A6A6;
}
#contentpanel #formdiv .formbutton {
    margin-left:1%;
    width:99%;
    padding:5px;
    font-size:16px;
    font-weight:bold;
    background-color: #F0F0F0;
    color:#444444;
    border:1px solid #666666;
    border-radius:5px;
    -moz-box-shadow: 0 0 5px #A6A6A6;
    -webkit-box-shadow: 0 0 5px #A6A6A6;
    box-shadow: 0 0 5px #A6A6A6;
}
#contentpanel #formdiv .forminput:hover {
    background-color: #FFFFFF;
}
#contentpanel #formdiv .forminput:focus {
    background-color: #FFFFFF;
}
#contentpanel #formdiv .fileinput:hover {
    background-color: #FFFFFF;
}
#contentpanel #formdiv .fileinput:focus {
    background-color: #FFFFFF;
}
#contentpanel #formdiv .formbutton:hover {
    color: #00AA00;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
#footerpanel {
    margin-top:50px;
    background: -webkit-linear-gradient(top, #EFFFEF , #E0E0FF);
    background: -o-linear-gradient(bottom, #EFFFEF, #E0E0FF);
    background: -moz-linear-gradient(bottom, #EFFFEF, #E0E0FF);
    background: linear-gradient(to bottom, #EFFFEF , #E0E0FF);
}


/*Der Inseratbereich bekommt eigene CSS Regeln*/
  #inserat{
    box-sizing: border-box;      /*Außenmaße von padding unabhängig*/
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -ms-box-sizing:border-box;
    width:100%;
    max-width:700px;    /*wegen border-box*/
    margin:15px auto;
    border:1px solid #666666;
    text-align:left;
    background-color:#FFFFFF;
    -moz-box-shadow: 0 0 16px #666;
    -webkit-box-shadow: 0 0 16px #666;
    box-shadow: 0 0 16px #666;
    /*
    font-family:Times New Roman, serif;
    background-image:url('images/htmlanzeige/xxx_Bg.jpg');
    background-repeat:no-repeat;
    background-repeat:repeat-x;
    background-position:bottom;
    background-size: 100% auto;
    background-size:5px;
    letter-spacing:0.002em;
    word-spacing:0.04em;
    transform: rotate(-6deg);  dreht ein div mit dem Text darin
      background: #0474b4;  For browsers that do not support gradients
      background: -webkit-linear-gradient(left, #0474b4 , #9bc7e0);  For Safari 5.1 to 6.0
      background: -o-linear-gradient(right, #0474b4, #9bc7e0);  For Opera 11.1 to 12.0
      background: -moz-linear-gradient(right, #0474b4, #9bc7e0);  For Firefox 3.6 to 15
      background: linear-gradient(to right, #0474b4 , #9bc7e0);  Standard syntax (must be last)
    */
   }
  #inserat * {
    box-sizing: border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -ms-box-sizing:border-box;
    margin:0;
    padding:0;
    border:0;
    line-height:1.2em;
    font-family:Arial,Helvetica,sans-serif;
    font-style:normal;     /* italic;*/
    font-size:inherit;
    font-weight:normal;    /* lighter normal bold bolder 100-900 */
    color:#000000;         /* inherit */
   }
  #inserat a {
    text-decoration:none;
    color:#000000;
   }
  #inserat a:hover {
    text-decoration: underline;
   }
  #inserat .nobreak {
    white-space:nowrap;
   }
  #inserat .clearing {
    clear:both;
    height:0;
   }
  #inserat .textschatten {
    text-shadow:#999999 3px 2px 4px;
   }
  #inserat h1 {
    padding:0px;
    font-family:Arial,Helvetica,sans-serif;
    font-size:26px;
    font-weight:bold;
    color:#000000;
    text-align:center;
    margin-bottom:0px;
    /*font-variant:small-caps;*/
   }
  #inserat h3 {
    padding:0px;
    font-family:Arial,Helvetica,sans-serif;
    font-size:14px;
    font-weight:bold;
    color:#000000;
    text-align:left;
    margin-bottom:0px;
   }
  #inserat p {
    padding:0px;
    line-height:17px;
    font-family:Arial,Helvetica,sans-serif;
    font-size:13px;
    font-weight:normal;
    color:#000000;
    text-align:left;
    margin-bottom:0px;
    /*white-space:pre;   Zeilenumbruch predefined*/
    /*white-space:nowrap;*/
   }
  #inserat ul {
    list-style-type:disc;   /*disc circle square none decimal(ol) oder Nummerierung*/
    /*list-style-image:url('images/htmlanzeige/minuszeichen_bullet.jpg');*/
    margin-left:20px;
    padding-left:14px;
    margin-bottom:0px;
   }
  #inserat li {
    padding-left:4px;
    line-height:17px;
    text-align:left;
    font-family:Arial,Helvetica,sans-serif;
    font-size:13px;
    font-weight:normal;
    color:#000000;
   }
  /*
  #inserat li:before {
    display: inline-block;
    content: "-";
    width: 1em;
    margin-left: -1em;
   }
  */

  /*Spalten nebeneinander, in enger Anzeige untereinander*/
  #inserat #leftcolumn {
    float:left;
    width:49%;
    min-width:190px;
    max-width:350px;
    padding-right:0%;
  }
  #inserat #rightcolumn {
    float:right;
    width:49%;
    min-width:190px;
    max-width:350px;
    padding-left:0%;
  }

  #inserat .flex-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    max-width: 700px;
    min-height: 50px;
    background-color:transparent;
    -webkit-justify-content: space-between;  /* space-around; center; flex-end; (flex-start) */
    justify-content: space-between;
    /* default: stretch the items to full height
    -webkit-align-items: stretch;
    align-items: stretch;
     if flex-items should wrap
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    */
  }
  #inserat .flex-item {
    background-color:transparent;
    margin: 5px;
    padding:5px;
    min-width:170px;
    border:1px solid #000000;
    /* each item gets the same space instead of content dependent width
    -webkit-flex: 1;
    flex: 1;
    */
  }
  #inserat #flex-item-left {
    -webkit-flex: 71%;
    flex: 71%;
  }
  #inserat #flex-item-right {
    -webkit-flex: 28%;
    flex: 28%;
    background-color:#00529E;
  }


@media screen and (max-width: 500px) {
  #inserat .flex-container {
    display:block;
  }
  #inserat .flex-item,
  #inserat #leftcolumn,
  #inserat #rightcolumn {
    float: none;
    width: auto;
    padding:1%;
  }
  #inserat ul {
    margin-left:0px;
  }
  #inserat {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
  }
  #inserat h1 {
    overflow-wrap:break-word;
  }
}


@media screen and (max-width: 600px) {
  #headerpanel .leftcolumn,
  #headerpanel .rightcolumn {
    float: none;
    width: auto;
    padding:1%;
  }
  #contentpanel #formdiv .fileinput {
    width:95%;
  }
}