﻿/* #region GREY LAYOUT */
/* new */
/* old -- still in use! */
/* #endregion */
/* #region BRAND COLORS */
/* for reference: old colors are behind every value in comments */
/*#0A665A;*/
/*#4AA89B;*/
/*#92CBC3;*/
/*#C6E2DE;*/
/*#DBEEEB;*/
/*#EBF7F5;*/
/*#D46124;*/
/*#FB9860;*/
/*#FDC19F;*/
/*#FEEADF;*/
/*#004878;*/
/*#4086B6;*/
/*#8CB6D3;*/
/*#D9E7F1;*/
/*#0084BD;*/
/*#40B7EA;*/
/*#8CD4F2;*/
/*#D9F1FB;*/
/*#A82623;*/
/*#DA6260;*/
/*#E9A19F;*/
/*#F8E0DF;*/
/*#71A133;*/
/*#AAD56F;*/
/*#CCE6A8;*/
/*#EEF7E2;*/
/*#D99800;*/
/*#FFC740;*/
/*#FFDD8C;*/
/*#FFF4D9;*/
/*#7A407A;*/
/*#B97FB9;*/
/*#D5B2D5;*/
/*#F1E6F1;*/
/*#A10541;*/
/*#D4447D;*/
/*#E58FB1;*/
/*#F7DAE5;*/
/* #endregion */
/* #region OTHER BRAND'S COLORS */
/* #endregion */
/* SEARCH COLORS */
/* #region REGULAR BULLET LISTS */
ul,
ol {
  margin-left: 1.2em;
}
ul {
  list-style-type: square;
}
/* #endregion */
/* #region COLORED BULLET LISTS */
ul.color {
  margin-left: 1em !important;
}
ul.color li {
  list-style-type: none;
  text-indent: -14px;
}
ul.color li:before {
  content: '\25A0';
  font-size: 11px;
  line-height: 30px;
  padding-right: 7px;
  vertical-align: bottom;
}
ul.color.teal li:before {
  color: #0E8B7A;
}
ul.color.orange li:before {
  color: #FA752B;
}
ul.color.blue li:before {
  color: #009EE3;
}
ul.color.green li:before {
  color: #8DC73F;
}
ul.color.red li:before {
  color: #CE2E2B;
}
/* #endregion */
/* #region LINKLIST : list of hyperlinks with small arrows */
.linklist {
  list-style-type: none;
  margin-left: 0;
}
.linklist.orange li:before {
  color: #FA752B;
}
.linklist.teal li:before {
  color: #0E8B7A;
}
.linklist.blue li:before {
  color: #009EE3;
}
.linklist li {
  line-height: 2em;
}
.linklist li:before {
  font-family: 'icons';
}
/* #endregion */
/* #region CHECKLIST (custom bullet-icons) */
.checklist,
.checklist-membership {
  list-style-type: none;
  margin-left: 0 !important;
}
.checklist.teal li:before,
.checklist-membership.teal li:before {
  color: #0E8B7A;
}
.checklist.orange li:before,
.checklist-membership.orange li:before {
  color: #FA752B;
}
.checklist.blue li:before,
.checklist-membership.blue li:before {
  color: #009EE3;
}
.checklist.green li:before,
.checklist-membership.green li:before {
  color: #8DC73F;
}
.checklist.yellow li:before,
.checklist-membership.yellow li:before {
  color: #FFB400;
}
.checklist.purple li:before,
.checklist-membership.purple li:before {
  color: #A154A1;
}
.checklist.fuchsia li:before,
.checklist-membership.fuchsia li:before {
  color: #8DC73F;
}
.checklist li,
.checklist-membership li {
  padding-left: 1.5em;
  position: relative;
}
.checklist li:before,
.checklist-membership li:before {
  font-family: 'icons';
  left: 0;
  position: absolute;
  top: 0;
}
/* #endregion */
/* #region CONTENT LIST : used in theme overview */
.listing {
  border-bottom: 1px solid #009EE3;
  list-style-type: none;
  margin-left: 0;
  padding: 0;
}
.listing li {
  border-bottom: 1px solid #8cd3f2;
  overflow: hidden;
  padding: 1em 0;
}
.listing li:first-of-type {
  border-top: 1px solid #009EE3;
}
.listing li:last-of-type {
  border-bottom: none;
}
.listing li + a,
.listing li.clickable {
  -webkit-tap-highlight-color: #d9f0fb;
}
.listing li + a:active,
.listing li.clickable:active,
.listing li + a:hover,
.listing li.clickable:hover {
  background: #d9f0fb;
}
.listing li + a:active .linkbutton,
.listing li.clickable:active .linkbutton,
.listing li + a:hover .linkbutton,
.listing li.clickable:hover .linkbutton {
  background: #FFFFFF;
}
.listing li > a {
  display: block;
  text-decoration: none;
}
.listing li h2 {
  padding: 0 !important;
}
.listing li h2 > a {
  text-decoration: none;
}
.listing li:hover p {
  color: #333;
}
.listing li strong {
  display: block;
  font-size: 1.1em;
  padding: 1em 0 0;
  position: relative;
}
.listing p {
  display: block;
  float: left;
  max-width: 70%;
  padding: 0.2em 0;
  width: 70%;
}
.listing img,
.listing .thumb {
  float: right;
  max-width: 100px;
  /* size of current images in CMS.. */
  position: relative;
  overflow: hidden;
  width: 25%;
}
.listing .listitem-header {
  max-width: 70%;
}
.listing .listitem-header h2 {
  display: inline;
  margin: 0 0.4em 0 0;
}
.listing .label-header {
  background: #F2F2F2;
  border-radius: 3px;
  display: inline-block;
  line-height: 16px;
  padding: 5px;
}
.listing .label-header:before {
  color: #009EE3;
}
.listing .highlight-label {
  position: absolute;
  z-index: 4;
  width: 180px;
  height: 1.5em;
  top: 18px;
  right: auto;
  bottom: auto;
  left: -20px;
  text-align: center;
  background: #009EE3;
  color: #FFFFFF;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* #endregion */
/* MEDIUM SCREENS */
@media screen and (min-width: 650px) {
  /* horizontal aligned list shorthand large screens - TODO: USED ? CLEAN UP */
  ul.ltr,
  ol.ltr {
    list-style-type: none;
    overflow: hidden;
  }
  .ltr > li {
    float: left;
  }
  .ltr > li > a {
    display: block;
  }
  /* Listing block with links in double column layout
.linklist li { width: 46%; }
.linklist li a { line-height: 1.8; }*/
  /* #region CONTENT LIST */
  .listing p {
    max-width: 80%;
    width: 80%;
  }
  .listing img,
  .listing .thumb {
    width: 15%;
  }
  .listing .thumb img {
    width: 100%;
  }
  .listing .listitem-header {
    max-width: 85%;
  }
  /* #endregion */
  /* #region ColumnList */
  .columnlist {
    box-sizing: border-box;
    list-style-type: none;
    margin-right: 2%;
  }
  .columnlist:last-of-type {
    margin-right: 0;
  }
  /* #endregion */
}
/* LARGE SCREENS */
@media screen and (min-width: 900px) {
  /* blocklist */
  .blocklist li {
    padding: 0 !important;
  }
  .blocklist li > a > span {
    min-height: 2.8em;
    max-height: 2.8em;
  }
  .blocklist li:first-child > a > span {
    min-height: 11em;
    max-height: none;
    max-width: 60%;
  }
  .blocklist li > a > img {
    width: 18%;
  }
  .blocklist li.first > a > img {
    width: 36%;
  }
  /* .linklist li { width: 29.5%; }  Listing block with links in triple column layout  */
}