.hbox {
background: #fff;
float: left;
padding: 5px;
xwidth: 90%;
width: 240px;
xmin-width: 210px;
min-height: 300px;
}

.hbox-orange      { border: 1px solid #EE9C00;}
.hbox-blue        { border: 1px solid #489CF5;}
x%.hbox-blue        { border: 1px solid #48C8F5;}
.hbox-lightgreen  { border: 1px solid #A5D35A;}
.hbox-darkgreen   { border: 1px solid #6B925C;}
.hbox-lightred    { border: 1px solid #FF7542;}
.hbox-darkred     { border: 1px solid #E4524B;}
.hbox-yellow      { border: 1px solid #F7E04A;}

.hbox .inhalt p { padding: 0px 3px 3px 3px;}

.hbox-lo, .hbox-ro, 
.hbox-ru-orange, .hbox-lu-orange,
.hbox-ru-blue,   .hbox-lu-blue,
.hbox-ru-lightred, .hbox-lu-lightred,
.hbox-ru-darkred, .hbox-lu-darkred,
.hbox-ru-lightgreen, .hbox-lu-lightgreen,
.hbox-ru-darkgreen, .hbox-lu-darkgreen,
.hbox-ru-yellow, .hbox-lu-yellow {
width: 20px;
height: 20px;
}

.hbox .inhalt{
  text-align: center;
}

/*--- ICON zu Artikelnummern ---*/
span.articlenr {
  float: left;
  margin-left: 5px;
  padding: 4px 0 10px 25px;
  font-weight: 4;
}
.flocards span.articlenr{ background: transparent url("/img/submenu_products/wuerfel/darkred.gif") top left no-repeat;  }
.children span.articlenr{ background: transparent url("/img/submenu_products/wuerfel/orange.gif") top left no-repeat; }
.classics span.articlenr{ background: transparent url("/img/submenu_products/wuerfel/darkgreen.gif") top left no-repeat;  }
.education span.articlenr{ background: transparent url("/img/submenu_products/wuerfel/lightred.gif") top left no-repeat;  }
.magnetboxes span.articlenr{ background: transparent url("/img/submenu_products/wuerfel/lightgreen.gif") top left no-repeat; }
.magnetboards span.articlenr{background: transparent url("/img/submenu_products/wuerfel/blue.gif") top left no-repeat; }


.hbox span.link {
  background: transparent url(../../img/layout/doppelpfeil_r.gif) no-repeat;
  padding: 4px 0 10px 20px;
  float: right;
  margin-right: 20px;
  display: inline-block;
}


.hbox-orange      h1 {background-color: #EE9C00;}
.hbox-blue        h1 {background-color: #489CF5;}
.hbox-lightgreen  h1 {background-color: #A5D35A;}
.hbox-darkgreen   h1 {background-color: #6B925C;}
.hbox-lightred    h1 {background-color: #FF7542;}
.hbox-darkred     h1 {background-color: #E4524B;}
.hbox-yellow      h1 {background-color: #F7E04A;}

.hbox-orange      h2 {background-color: #EE9C00;}
.hbox-blue        h2 {background-color: #489CF5;}
.hbox-lightgreen  h2 {background-color: #A5D35A;}
.hbox-darkgreen   h2 {background-color: #6B925C;}
.hbox-lightred    h2 {background-color: #FF7542;}
.hbox-darkred     h2 {background-color: #E4524B;}
.hbox-yellow      h2 {background-color: #F7E04A;}

/*Header-Boxen Ecken*/
.hbox-ro { float: right; background:url(../../img/layout/headerbox/ro.gif) top right no-repeat; margin-top: -1px; margin-right:-1px;}
.hbox-lo { float: left;  background:url(../../img/layout/headerbox/lo.gif) top left no-repeat;	margin-top: -1px; margin-left:-1px;}

.hbox-ru-orange { background:url(../../img/layout/headerbox/ru-orange.gif) no-repeat; float: right; margin-right: -1px; margin-top: -19px;}
.hbox-lu-orange { background:url(../../img/layout/headerbox/lu-orange.gif) no-repeat;	float: left;  margin-left: -1px; margin-top: -19px;}

.hbox-ru-blue { background:url(../../img/layout/headerbox/ru-blue.gif) no-repeat; float: right; margin-right: -1px; margin-top: -19px;}
.hbox-lu-blue { background:url(../../img/layout/headerbox/lu-blue.gif) no-repeat;	float: left;  margin-left: -1px; margin-top: -19px;}

.hbox-ru-lightred { background:url(../../img/layout/headerbox/ru-lightred.gif) no-repeat; float: right; margin-right: -1px; margin-top: -19px;}
.hbox-lu-lightred { background:url(../../img/layout/headerbox/lu-lightred.gif) no-repeat;	float: left;  margin-left: -1px; margin-top: -19px;}

.hbox-ru-darkred { background:url(../../img/layout/headerbox/ru-darkred.gif) no-repeat; float: right; margin-right: -1px; margin-top: -19px;}
.hbox-lu-darkred { background:url(../../img/layout/headerbox/lu-darkred.gif) no-repeat;	float: left;  margin-left: -1px; margin-top: -19px;}

.hbox-ru-lightgreen { background:url(../../img/layout/headerbox/ru-lightgreen.gif) no-repeat; float: right; margin-right: -1px; margin-top: -19px;}
.hbox-lu-lightgreen { background:url(../../img/layout/headerbox/lu-lightgreen.gif) no-repeat;	float: left;  margin-left: -1px; margin-top: -19px;}

.hbox-ru-darkgreen { background:url(../../img/layout/headerbox/ru-darkgreen.gif) no-repeat; float: right; margin-right: -1px; margin-top: -19px;}
.hbox-lu-darkgreen { background:url(../../img/layout/headerbox/lu-darkgreen.gif) no-repeat;	float: left;  margin-left: -1px; margin-top: -19px;}

.hbox-ru-yellow { background:url(../../img/layout/headerbox/ru-yellow.gif) no-repeat; float: right; margin-right: -1px; margin-top: -19px;}
.hbox-lu-yellow { background:url(../../img/layout/headerbox/lu-yellow.gif) no-repeat;	float: left;  margin-left: -1px; margin-top: -19px;}


/*Überschrift für alle Boxen*/
.hbox .inhalt h1 {
  font-size: 1.3em;
  color: #fff;
  margin:0; 
  padding-left:20px; /*damit Überschrift von Eckgrafik wegbleibt */
  padding-bottom: 2px;
}

.hbox .inhalt h2 {
  display: block;
  font-size: 0.8em;
  color: #fff;
  margin:0; 
  padding: 0px 5px 2px 10px;
}


/*--- Icon zu H2 ---*/
  .flocards h2.category {display: block; padding: 10px 45px;  background: transparent url("../../img/submenu_products/icons/flocards.gif") top left no-repeat;  }
  .magnetboxes h2.category{display: block; padding: 10px 45px;  background: transparent url("../../img/submenu_products/icons/magnetboxes.gif") top left no-repeat;  }
  .magnetboards h2.category{display: block; padding: 10px 45px;  background: transparent url("../../img/submenu_products/icons/magnetboards.gif") top left no-repeat; }
  .children h2.category{display: block; padding: 10px 45px;  background: transparent url("../../img/submenu_products/icons/children.gif") center left no-repeat;  }
  .classics h2.category{display: block; padding: 10px 45px;  background: transparent url("../../img/submenu_products/icons/classics.gif") top left no-repeat;  }
  .education h2.category{display: block; padding: 10px 45px;  background: transparent url("../../img/submenu_products/icons/education.gif") top left no-repeat;  }