ihk24/templates/source/sass/partials/components/_content.scss

@charset "UTF-8";
// defaults
/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.fieldset_ie{
	border: 0;
	margin: 1px;
  	padding: 1px;
}

.list_item_ie{
	 list-style-type: none;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers:
 * http://juicystudio.com/article/screen-readers-display-none.php
 */

.hidden {
  display: none !important;
  visibility: hidden;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  @include font-family(korbregular);
  color: $cGlobalHover;
  font-weight: normal;
}

h1 {
  font-size: 3.375em; // 56px
  margin: 0;
  padding: 5px 0 0 0;
  line-height: 1em;
}

h2 {
  font-size: 2.25em; // 36px
  line-height: 42px;
  padding-top : 48px;
  margin: 0px 0 28px;
  &.subline {
    line-height: 42px;
    margin: 0 0 28px;
  }
}

h3, .intro {
  @include font-family(source_sans_proregular);
  font-size: 1.5em; // 24px
  line-height: 30px;
}

h1 + .intro {
  margin: 38px 0 0;
}

blockquote {
  margin: 22px 0;
  padding: 0 0 0 15px;
  position: relative;
  &:before {
    background: $secondary-color;
    content: "";
    display: block;
    width: 8px;
    height: calc(100% - 18px);
    left: 0;
    position: absolute;
    top: 8px;
  }
}

figcaption {
  @include font-family(source_sans_prosemibold);
  color: $cGlobalText;
  font-style: normal;
  font-size: 16px;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: $cWhite;
  border: 1px solid $cIconBg;
  border-radius: 0;
  height: 42px;
  padding: 0 0 0 15px;
  width: 100%;
  &::-ms-expand {
    display: none;
  }
}



select.ui-datepicker-month {
	height: 25px;
  	line-height: 14px;
	color:$cGlobalText;
    &:focus {
      outline: 1px dotted $primary-color;
    }
      background: url("../../../img/select-arrows.png") no-repeat, $cWhite;
      background-position: 95% -30%;
      background-size: 15px 50px;
	  &:focus::-ms-value {
		  background-color: transparent;
	  }

}

select.ui-datepicker-year {

    height: 25px;
  	line-height: 14px;
	color:$cGlobalText;
    &:focus {
      outline: 1px dotted $primary-color;
    }

      background: url("../../../img/select-arrows.png") no-repeat, $cWhite;
      background-position: 95% -30%;
      background-size: 15px 50px;
	  &:focus::-ms-value {
		  background-color: transparent;
	  }

}


.strong {
  background: $secondary-color-trans;
  color: $cGlobalText;
  margin: 25px 0;
  padding: 20px;
}

.container-fluid {
  padding: 0;
}

.row {
  article {
    padding: 0 15px;
  }
}

.richtext {
  .row article {
    padding: 0 15px;
  }
  article {
    padding: 0;
  }
}

.video-wrapper {
  display: none;
}

.video {
  display: block;
  position: relative;
  &:after {
    background-color: $secondary-color;
    content: "";
    display: block;
    height: 60px;
    width: 90px;
    position: absolute;
    top: calc(50% - 30px);

    left: calc(50% - 45px);
    z-index: 1;
  }
  .poster-wrapper {
    position: relative;
    &:after {
      @include icons2();
      @include backgroundpositionheightweight(play);
      content: "";
      display: block;


      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -20px;
      margin-left: -14px;
      z-index: 2;
    }
  }
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: none;
}

// jump teaser
.jp-teaser {
  ul {
    margin: 0;
    padding: 20px 0;
  }
  li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

// iframe teaser
.if-teaser {
  iframe {
    border: none;
    width: 100%;
  }
}

// utility styles
ol {
  list-style: decimal;
}

ul {
  list-style: disc;
}

label {
  display: inline;
}

.col-xs-12,
.col-sm-4,
.col-sm-6,
.col-sm-8 {
  margin: 0;
  padding: 0;
}

.kicker {
  color: $cGlobalText;
  font-family: "source_sans_proregular", "Helvetica", "Arial", "sans-serif";
  font-size: 1.125em; // 18px
  line-height: 1em; // 18px
  a {
    color: $cGlobalText;
    text-decoration: none;
    &:hover {
      text-decoration: none;
    }
  }
}

.title {
  @include font-family(korbregular);
  color: $cGlobalHover;
  font-size: 2em; // 32px
  line-height: 1em; // 32px
  a {
    color: $cGlobalHover;
    text-decoration: none;
    &:hover {
      color: $cGlobalHover;
      text-decoration: none;
    }
  }
}

@media (max-width: 400px) {
	.title {
		font-size:1.5em;
	}
}

.text {
  font-family: "source_sans_proregular", "Helvetica", "Arial", "sans-serif";
  /* msc: #IHK-2258 font-size: 1.4em; // 22.5px */
  line-height: 1.5;
  margin: 0 0 1em 0;
  a {
    color: $cGlobalText;
    line-height: 1.5;
    text-decoration: none;
    &:hover {
      text-decoration: none;
    }
  }
}

.page-wrapper {
  @include make-grid-columns;
  margin: 0 15px;
}

.container-fluid {
  max-width: 960px;
}

.content-media-left {
  float: left;
}

.content-media-right {
  float: right;
}

.teaser-content {
  @include clearfix();
  border-top: 2px solid $primary-color-light;
  padding: 20px 0 0 0;
}

.extern,
.download {
  .teaser-content {
    border: 2px solid $primary-color-light;
    padding: 20px 0 12px 15px;
  }
}

.extern,
.download {
  .kicker {
    clear: both;
    a {
      display: block;
      position: relative;
      &:after {


        @include icons2();
         @include backgroundpositionheightweight(icon_linkDownload_default);

        content: "";
        display: inline-block;



        position: absolute;
        right: 7px;
        top: -16px;

        z-index: 0;
      }
    }
  }
}

.extern {
  .kicker a:after {
     @include backgroundpositionheightweight(icon_linkExternal_default);
  }
}

.richtext {
  line-height: 1.5;
  .kicker {
    padding: 0 0 5px 0;
    & > :first-child {
      padding: 0;
    }
  }
  h1 + article {
    margin: 38px 0;
  }
  .dl-teaser {
    padding: 0;
  }
  .back {
    font-size: 1.6875em; // 27px
  }
}

.lead {
  margin: 20px 0 0;
}

// placeholder
%teaser {
  margin: 45px 0 0 0;
  h3 {
    margin: 0;
  }
  .kicker {
    padding: 0;
  }
}

// accordion
.acc-header {
  display: block;
  transition: all linear .15s;
  &:focus {
	  outline:none;
  }
}

.acc-content {
  display: none;
  padding: 15px;
}

// datepicker
.ui-widget-content,
.ui-widget-header {
  @include font-family(source_sans_proregular);
  background: $cWhite;
  border: 2px solid $cIconBg;
  border-radius: 0;
  color: $cGlobalText;

  &:after {
    border-style: solid;
    border-width: 0 30px 0 30px;
    border-color: transparent transparent $cWhite transparent;
    content: "";
    height: 0;
    left: 50%;
    position: absolute;
    top: -20px;
    width: 0;
  }
}

.ui-widget-header {
  border: none;
  .ui-icon {
    background: url("../../../img/jquery-ui/ui-icons_228ef1_256x240.png") no-repeat;
  }
  .ui-state-hover {
    background: rgba(45, 118, 178, .2);
    border: 1px solid $primary-color;
  }
  .ui-datepicker-title {
    select {
      height: 25px;
    }
  }
}

.ui-datepicker-prev .ui-icon {
  background-position: -96px -15px;
}

.ui-datepicker-next .ui-icon {
  background-position: -32px -15px;
}

.ui-widget-content {
  .ui-state-default {
    background: rgba(234, 234, 234, .6);
    border: none;
    color: $cGlobalText;
    text-align: center;
  }
}

.shop-icon {
  @include font-family(korbregular);
  background-color: $cIconGray;
  border-top: 8px solid $cIconBg;
  color: $cGlobalText;
  height: 60px;
  position: relative;
  text-align: center;
  width: 56px;
  &:after {
    @include icons2();
     @include backgroundpositionheightweight(icon_shop);
    content: "";
    display: inline-block;

    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

  }
}

.a-z-icon {
  @include font-family(korbregular);
  background-color: $cIconGray;
  border-top: 8px solid $cIconBg;
  color: $cGlobalText;
  height: 60px;
  position: relative;
  text-align: center;
  width: 56px;
  &:after {
    @include icons2();
    @include backgroundpositionheightweight(icon_A-Z);
    content: "";
    display: inline-block;

    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

  }
}

.highlight {
  font-weight: bold;
}

.richtext .img-content-wrapper {
  @include clearfix();
  position: relative;
  .img-copyright {
    bottom: 15px;
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
    position: absolute;
    right: 5px;
    text-shadow: 1px 0px 1px rgba(0, 0, 0, 1);
  }
  img {
    width: 100%;
  }

}

.img-wrapper,
.image-wrapper {
  position: relative;
  .inner-figure {
	  position:relative;
  }
  .img-copyright {
    bottom: 2px;
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
    position: absolute;
    right: 5px;
    text-shadow: 1px 0px 1px rgba(0, 0, 0, 1);
  }
  .img-video-copyright {
    bottom: 20px;
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
    position: absolute;
    right: 5px;
    text-shadow: 1px 0px 1px rgba(0, 0, 0, 1);
  }
}

.phone {
  &.desktop {
    display: none;
  }
}

@media (min-width: $screen-sm-min),
print {
  // placeholder
  %teaser {
    margin: 60px 0 0 0;
    h3 {
      margin: 0;
    }
    .kicker {
      padding: 0;
    }
  }
  h1 {
    font-size: 3em; // 48px
    margin: 0;
    padding: 5px 0 0 0;
    line-height: 1em;
  }

  h2 {
    font-size: 2em; // 32px
    line-height: 36px;
    padding-top : 55px;
    margin: 0px 0 15px 0;
    &.subline {
      margin: 20px 0 15px 0;
    }
    &.title {
      padding-top: 0px;
    }
  }

  h3, .intro {
    @include font-family(source_sans_proregular);
    font-size: 1.25em; // 20px
    line-height: 26px;
  }

  h1 + .intro {
    margin: 15px 0 0;
  }

  blockquote {
    margin: 30px 0;
    padding: 0 0 0 15px;
    &:before {
      height: calc(100% - 10px);
      top: 4px;
      width: 4px;
    }
  }

  figcaption {
    font-size: 14px;
    line-height: 18px;
  }

  .strong {
    font-size: 17px;
    margin: 15px 0;
  }

  .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    float: left;
  }

  // utility styles
  .teaser-content {
    @include clearfix();
    border-top: 2px solid $primary-color-light;
    padding: 20px 0 0 0;
  }
  .richtext {
    margin: 0;
    .back {
      display: inline-block;
      font-size: 17px;
      margin: 5px 0 0;
    }
    h2.subline {
      line-height: 37px;
      margin: 15px 0 8px;
    }
    .img-content-wrapper {
      page-break-inside : avoid;
      .img-copyright {
        bottom: 8.5px;
      }
    }
    h1 + article {
      margin: 50px 0;
    }
    h1 {
      margin-bottom: 25px;
    }

  }
  .kicker {
    font-size: .9375em; // 15px
  }
  .extern,
  .download {
    .kicker a {
      &:after {
        height: 14px;
        right: 0;
        top: 0;
      }
    }
    .teaser-content {
      border: 2px solid $primary-color-light;
      padding: 20px 15px 12px;
    }
  }

  .download {
    .kicker a:after {



      @include backgroundpositionheightweight(icon_linkDownload_default);

    }
    .kicker a:hover:after {
      @include backgroundpositionheightweight(icon_linkDownload_over);
    }
  }
  .extern {
    .kicker a:after {
      @include backgroundpositionheightweight(icon_linkExternal_default);
    }
    .kicker a:hover:after {
      @include backgroundpositionheightweight(icon_linkExternal_over);
    }
  }
  .title {
    font-size: 1.75em; // 28px
  }
  .text {
    font-size: 1.0625em; // 17px
  }
  .lead {
    margin: 15px 0 0;
  }
  .page-wrapper {
    margin: 0 auto 0; //msc: IHK-3331
    max-width: 960px;
    padding: 0;
    position: relative;
  }
  .main-content-wrapper,
  .sub-content-wrapper {
    @include clearfix();
    max-width: 940px;
    margin: 0 15px;
  }
  .content-wrapper {
    @include clearfix();
    max-width: 960px;
    margin: 0 auto;
    padding: 10px 0;
  }
  .sidebar {
    .container-fluid {
      article:first-of-type {
        margin: 0;
      }
      article {
        padding: 0;
      }
    }
  }
  .video {
    .poster-wrapper {
    position: relative;
      &:after {
        @include icons2();
        @include backgroundpositionheightweight(play);
		content: "";
		display: block;


      	position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -20px;
      	margin-left: -14px;
        z-index: 2;
      }
    }
  }
  .shop-icon {
    height: 53px;
    width: 50px;
    min-width: 50px;
    &:after {
      @include backgroundpositionheightweight(icon_shop);
    }
  }
  .a-z-icon {
    height: 53px;
    width: 50px;
    min-width: 50px;
    &:after {
     @include backgroundpositionheightweight(icon_A-Z);
    }
  }
  .phone {
    &.mobile {
      display: none !important;
    }
    &.desktop {
      display: block !important;
    }
  }
}

@media print {
	.header .search-wrapper,
	.ev-search-filter,
	.search-filter-form,
	.nav.main {
		display:none !important;
	}
	.header .middle-wrapper .info-wrapper {
		float:none !important;
		clear:both !important;
		padding-top:20px;
	}
	.page-wrapper .col-xs-1, .page-wrapper .col-sm-1, .page-wrapper .col-md-1, .page-wrapper .col-lg-1, .page-wrapper .col-xs-2, .page-wrapper .col-sm-2, .page-wrapper .col-md-2, .page-wrapper .col-lg-2, .page-wrapper .col-xs-3, .page-wrapper .col-sm-3, .page-wrapper .col-md-3, .page-wrapper .col-lg-3, .page-wrapper .col-xs-4, .page-wrapper .col-sm-4, .page-wrapper .col-md-4, .page-wrapper .col-lg-4, .page-wrapper .col-xs-5, .page-wrapper .col-sm-5, .page-wrapper .col-md-5, .page-wrapper .col-lg-5, .page-wrapper .col-xs-6, .page-wrapper .col-sm-6, .page-wrapper .col-md-6, .page-wrapper .col-lg-6, .page-wrapper .col-xs-7, .page-wrapper .col-sm-7, .page-wrapper .col-md-7, .page-wrapper .col-lg-7, .page-wrapper .col-xs-8, .page-wrapper .col-sm-8, .page-wrapper .col-md-8, .page-wrapper .col-lg-8, .page-wrapper .col-xs-9, .page-wrapper .col-sm-9, .page-wrapper .col-md-9, .page-wrapper .col-lg-9, .page-wrapper .col-xs-10, .page-wrapper .col-sm-10, .page-wrapper .col-md-10, .page-wrapper .col-lg-10, .page-wrapper .col-xs-11, .page-wrapper .col-sm-11, .page-wrapper .col-md-11, .page-wrapper .col-lg-11, .page-wrapper .col-xs-12, .page-wrapper .col-sm-12, .page-wrapper .col-md-12, .page-wrapper .col-lg-12 {
		float:none;
		width:100%;
	}
	.teaser-content {
		height:auto !important;
	}
	.image-wrapper {
		width:50%;margin-right:50%;
	}
}

@media (max-width: 380px) {
  h1 {
    font-size: 2em;
  }
}

/************ Print only  ***************/
.printonly {
  display: none;
}



@media print {
  .noprint {
    display: none !important;
  }
  .printonly {
    display: block;
    padding-top: 5px;
    word-break: break-all;
  }
}
/************ Print only  ***************/