/*  COLUMN TITLE  and  ICONS at the TOP of the PAGE column */
/*  use method 2-column's  designing                                                  */

.marg-vertical  {
  margin:              0px;
  padding:            10px 0px;
  font-size:           0px;
}
.column-title,
.column-title1,
.column-titlex2,
.column-titlex3,
.column-titlex4  {
  padding:                          0px 262px 0px 0px;
}
.column-title1,
.column-title1 .column,
.column-title1 .title-text .title-text-text {
  height:                              30px;
}
.column-title,
.column-title .column,
.column-title .title-text .title-text-text {
  height:                              50px;   /*  !!!! */
}
.column-titlex2,
.column-titlex2 .column,
.column-titlex2 .title-text .title-text-text {
  height:                              64px;
}
.column-titlex3,
.column-titlex3 .column,
.column-titlex3 .title-text .title-text-text {
  height:                              88px;
}
.column-titlex4,
.column-titlex4 .column,
.column-titlex4 .title-text .title-text-text {
  height:                              112px;
}

.column-title .column,
.column-title1 .column,
.column-titlex2 .column,
.column-titlex3 .column,
.column-titlex4 .column {
  position:                          relative;
  z-index:                          9999;
  float:                              left;
  padding:                         0px;
  font-size:                        0px;
  border:                           0px;
  border-style:                   none;
  outline-style:                   none;
}
.column-title .title-text,
.column-title1 .title-text,
.column-titlex2 .title-text,
.column-titlex3 .title-text,
.column-titlex4 .title-text {
  width:                                100%;
  background:                   transparent;
}
.column-title .title-text .title-text-text,
.column-title1 .title-text .title-text-text,
.column-titlex2 .title-text .title-text-text,
.column-titlex3 .title-text .title-text-text,
.column-titlex4 .title-text .title-text-text  {
  float:                   left;
  margin:               0px;
  margin-left:         20px;
  color:                 #A5A5A5;
  font-size:            20px;
  font-weight:       bold;
  text-align:          left;
}
.column-title1 .title-text .title-text-text  {
  line-height:          20px;                                  /*  !!!! */
}
.column-title .title-text .title-text-text  {
  line-height:          22px;                                  /*  !!!! */
}
.column-titlex2 .title-text .title-text-text {
  line-height:          22px;
}
.column-titlex3 .title-text .title-text-text,
.column-titlex4 .title-text .title-text-text {
  line-height:          22px;
}

.column-title .icons,
.column-title1 .icons,
.column-titlex2 .icons,
.column-titlex3 .icons,
.column-titlex4 .icons {
  width:                            262px;
  margin-right:                 -100%;
  background:                   transparent;
}
.column-title .icons .icon,
.column-title1 .icons .icon,
.column-titlex2 .icons .icon,
.column-titlex3 .icons .icon,
.column-titlex4 .icons .icon  {
  display:                     inline;
  float:                          right;
  margin:                     0px 0px 0px 5px;
  padding:                   0px;
  height:                       20px;
  width:                        21px;
}
.column-title .icons .icon-wide,
.column-title1 .icons .icon-wide,
.column-titlex2 .icons .icon-wide,
.column-titlex3 .icons .icon-wide,
.column-titlex4 .icons .icon-wide,
.icons .icon-wide  .icon-direkt-box,
.icons .icon-wide .icon-hint-container {
  width:                       222px;
}
.column-title .icons .icon-wide,
.column-title1 .icons .icon-wide,
.column-titlex2 .icons .icon-wide,
.column-titlex3 .icons .icon-wide,
.column-titlex4 .icons .icon-wide  {
  display:                     inline;
  float:                         left;
  margin:                     0px 5px;
  padding:                   0px;
  height:                      40px;
  cursor:                      pointer;
}
.icons .icon-wide  .icon-direkt-box {
  display:                     inline;
  float:                         left;
  margin:                     0px;
  padding:                   0px;
  height:                      40px;
}
.icon-direkt-box .icon-direkt  {
  position:                    relative;
  left:                           -10px;
  z-index:                    999;
  display:                     inline;
  float:                         left;
  margin:                     -14px 0px 0px 0px;
  padding:                    0px;
  height:                      46px;
  width:                       48px;
  background:              transparent url(../../images/direkt.png) no-repeat scroll 0 0;
  cursor:                      pointer;
}
.icon-direkt-box .text-direkt {
  position:                    relative;
  left:                           -10px;
  z-index:                    999;
  margin:                     0px 0px 0px 52px;
  padding:                    0px;
  color:                        #007050;
  font-size:                  13px;
  font-weight:              bold;
  text-align:                 left;
  height:                      40px;
  background:              transparent url(../../images/triangle.png) no-repeat scroll right 2%;
  cursor:                      pointer;
}
.hidden_hint {
  display:                     none;
}
.icon-puzzle  {
  background:          transparent url(../../images/puzzle.png) no-repeat scroll 0 0;
}
.icon-printer  {
  background:          transparent url(../../images/printer.png) no-repeat scroll 0 0;
}
.icon-letter  {
  background:          transparent url(../../images/letter.png) no-repeat scroll 0 0;
}
.column-title .icons .icon a,
.column-title1 .icons .icon a,
.column-titlex2 .icons .icon a,
.column-titlex3 .icons .icon a,
.column-titlex4 .icons .icon a,
.column-title .icons .icon a:hover,
.column-title1 .icons .icon a:hover,
.column-titlex2 .icons .icon a:hover,
.column-titlex3 .icons .icon a:hover,
.column-titlex4 .icons .icon a:hover  {
  display:                 block;
  margin:                 0px;
  padding:               10px;
  text-decoration:    none;
  font-size:              0px;
  text-align:             center;
}

.icons .icon-wide .icon-hint-container {
  position:                absolute;
  z-index:                999;
  left:                      10px;
  top:                      0px;
  margin:                 0px;
  padding:                0px;
  height:                  40px;
  background-color:  transparent;
  cursor:                  pointer;
}
.icon-hint-container .hint-direkt-box {
  position:                absolute;
  z-index:                9999;
  left:                       -4px;
  top:                       32px;
  margin:                 0px;
  padding:                0px;
  width:                   264px;
  background-color:  transparent;
  cursor:                  pointer;
}
.icon-hint-container .hint-direkt-box .hint-direkt-center,
.icon-hint-container .hint-direkt-box .hint-direkt-top,
.icon-hint-container .hint-direkt-box .hint-direkt-bottom {
  line-height:                  0px;
  font-size:                    0px;
  position:                      relative;
  z-index:                      999;
  cursor:                        pointer;
}
.icon-hint-container .hint-direkt-box .hint-direkt-center {
  background:                transparent url(../../images/hint_direkt-center.png) repeat-y scroll center center;
}
.icon-hint-container .hint-direkt-box .hint-direkt-top {
  height:                       10px;
  background:                transparent url(../../images/hint_direkt-top_left.png) repeat-y scroll center center;
}
.icon-hint-container .hint-direkt-box .hint-direkt-bottom {
  height:                       10px;
  background:                transparent url(../../images/hint_direkt-bottom.png) repeat-y scroll center center;
}

.icon-hint-container .hint-direkt-box .hint-direkt-center  ul {
  margin:                    0px 10px 0px 30px;
  padding:                   5px 0px;
  line-height:               normal;
}
.icon-hint-container .hint-direkt-box .hint-direkt-center  ul li {
  display:                    list-item;
  margin:                    0px;
  padding:                   0px;
  line-height:               18px;
  color:                       #4C4C4C;
  font-size:                 11px;
  font-family:              Arial, Helvetica,Verdana;
  font-weight:             normal;
  text-decoration:       none;
  text-align:                left;
  list-style-image:        url(../../images/point_green_9x9.png);
  list-style-position:     outside;
  list-style-type:          none;
}
.hint-direkt-box .hint-direkt-center  .hint_button_box {
  position:                   relative;
  margin:                    0px;
  padding:                   0px;
  line-height:               0px;
  font-size:                 0px;
}
.hint-direkt-box .hint-direkt-center  .hint_button_box .hint_button {
  margin:                    0px;
  padding:                   0px;
  line-height:               normal;
  font-size:                 0px;
  position:                   relative;
  right:                       -150px;
  width:                      108px;
}
.hint-direkt-box .hint-direkt-center  .hint_button_box .hint_button a {
  display:                    block;
  margin:                    0px;
  padding:                   0px;
  line-height:               22px;
  font-size:                 12px;
  font-weight:             bold;
  text-align:                center;
  text-decoration:       none;
  color:                       #FFFFFF;
  width:                      108px;
  height:                     23px;
  background:             transparent url(../../images/hint-button.png) no-repeat scroll center center;
}

div.bx-context-toolbar-empty-area div.column-title {
  display:                        none;
}



@-ms-viewport {
        width: device-width;
}

@viewport {
        width: device-width;
}
/**
 * >= 320px 
 */

@media screen and (min-width: 20em) {
 
 .column-title,
 .column-title1,
 .column-titlex2,
 .column-titlex3,
 .column-titlex4{
  padding: 0;
 }
 
 .column-title .icons,
 .column-title1 .icons,
 .column-titlex2 .icons,
 .column-titlex3 .icons,
 .column-titlex4 .icons{
  display: none;
 }
}
/**
 *  >= 783px
 */

@media screen and (min-width: 48.9375em) {
 
 .column-title,
 .column-title1,
 .column-titlex2,
 .column-titlex3,
 .column-titlex4{
  padding: 0 262px 0 0;
 }
 
 .column-title .icons,
 .column-title1 .icons,
 .column-titlex2 .icons,
 .column-titlex3 .icons,
 .column-titlex4 .icons{
  display: block;
 }
 
}