/*
 * Copyright (c) 2003-2019 GameDuell GmbH, All Rights Reserved
 * This document is strictly confidential and sole property of GameDuell GmbH, Berlin, Germany
 */
/**
 * @legacy this file is legacy - please use the mixins inside the tt.less
 */
/*
 tooltip ( classic only! )

 DESC: use tooltip from @gd/common-style/dist/tooltip instead

 markup:
 <div class="tt-sample">
  <p>This is the GD generic tooltip</p>
 </div>

 CSS:
   @import '~@npm/@gd/tooltip-styles/style/tt';
   .tt-sample{
     .tt();
     // use the mixin variant you need:
     .tt-bottom-center();
     min-width: 200px;
     display: inline-block;
   }

 styleguide tooltip
*/
/*
 icon-sprite

 DESC: Example layout for tooltips sporting icons on the left hand side. See markup tab for corresponding html-code.

 CSS:
  @import '~@npm/tooltip-styles-lib/style/tt';
  .tt-icon-sprite-demo{
    .tt();
    .tt-bottom-center();
    .tt-icon-sprite();
  }

 Markup: ../demo/tt-icon-sprite-demo.html

 Markup-style: grid

 styleguide tooltip-icon
*/
/*
 Error content

 DESC: Text content stylized for error messages

 All css-classes describing the arrow positions (see above) apply to this as well

 CSS:
   .tt-error();

 Markup: ../demo/tooltip-demo.html

 Markup-style: grid

 default: none

 .tooltip-instance.error.left-top - &nbsp;

 styleguide tooltip-error
*/
/*
 Image or video content

 DESC: Layout for tooltips showing image or video content

 CSS:
  @import '~@npm/tooltip-styles-lib/style/tt';
  .tt-video-demo{
    .tt();
    .tt-bottom-center();
    .tt-video();
    display: inline-block;
  }

 Markup: ../demo/tt-video-demo.html

 styleguide tooltip-video
*/
/*
  Top

  DESC: Arrows placed on top of the tooltip

  CSS:
   ...
    // arrow top
    .tt-top-right();
    // arrow center
    .tt-top-center();
    // arrow bottom
    .tt-top-left();
   ...

  Markup: ../demo/tooltip-demo.html

  Markup-style: grid

  default: none

  .tooltip-instance.top-left - &nbsp;
  .tooltip-instance.top-center - &nbsp;
  .tooltip-instance.top-right - &nbsp;

  styleguide tooltip.top
*/
/*
 Right

 DESC: Arrows placed on the right side of the tooltip

 CSS:
  ...
    // arrow top
    .tt-right-top();
    // arrow center
    .tt-right-center();
    // arrow bottom
    .tt-right-bottom();
  ...

 Markup: ../demo/tooltip-demo.html

 Markup-style: grid

 default: none

 .tooltip-instance.right-top - &nbsp;
 .tooltip-instance.right-center - &nbsp;
 .tooltip-instance.right-bottom - &nbsp;

 styleguide tooltip.right
*/
/*
 Bottom

 DESC: Arrows placed at the bottom of the tooltip

 CSS:
  ...
    // arrow right
    .tt-bottom-right();
    // arrow center
    .tt-bottom-center();
    // arrow left
    .tt-bottom-left();
  ...

 Markup: ../demo/tooltip-demo.html

 Markup-style: grid

 default: none

 .tooltip-instance.bottom-left - &nbsp;
 .tooltip-instance.bottom-center - &nbsp;
 .tooltip-instance.bottom-right - &nbsp;

 styleguide tooltip.bottom
*/
/*
 Left

 DESC: Arrows attached to the left side of the tooltip

 CSS:
  ...
    // arrow top
    .tt-left-top();
    // arrow center
    .tt-left-center();
    // arrow bottom
    .tt-left-bottom();
  ...

 Markup: ../demo/tooltip-demo.html

 Markup-style: grid

 default: none

 .tooltip-instance.left-top - &nbsp;
 .tooltip-instance.left-center - &nbsp;
 .tooltip-instance.left-bottom - &nbsp;

 styleguide tooltip.left
*/
.base-common .absoluteCentered {
  left: 50%;
  -webkit-transform: translate(-50%);
  -moz-transform: translate(-50%);
  -ms-transform: translate(-50%);
  -o-transform: translate(-50%);
  transform: translate(-50%);
}
.base-common.tooltip-instance {
  position: relative;
  box-sizing: border-box;
  border: 1px solid #6a7378;
  border-radius: 10px;
  padding: 15px 20px;
  max-width: 350px;
  font-size: 12px;
  color: #313a3f;
  line-height: 17px;
  background-color: #fff;
  box-shadow: 0 0 6px rgba(51, 51, 51, 0.4);
}
.base-common.tooltip-instance h1,
.base-common.tooltip-instance h2,
.base-common.tooltip-instance h3,
.base-common.tooltip-instance h4,
.base-common.tooltip-instance h5,
.base-common.tooltip-instance h6 {
  font-weight: bold;
}
.base-common.tooltip-instance:before {
  position: absolute;
  content: " ";
  width: 15px;
  height: 15px;
  transform: translateY(46%) rotateZ(45deg);
  background: white;
  z-index: 0;
}
.base-common.tooltip-instance:before {
  border-top: 1px solid #6a7378;
  border-left: 1px solid #6a7378;
}
.base-common.tooltip-instance .icon_sprite {
  display: inline-block;
  margin-left: -5px;
  margin-right: 0;
  vertical-align: middle;
}
.base-common.tooltip-instance .icon_sprite + h1,
.base-common.tooltip-instance .icon_sprite + h2,
.base-common.tooltip-instance .icon_sprite + h3,
.base-common.tooltip-instance .icon_sprite + h4,
.base-common.tooltip-instance .icon_sprite + h5,
.base-common.tooltip-instance .icon_sprite + h6,
.base-common.tooltip-instance .icon_sprite + p,
.base-common.tooltip-instance .icon_sprite + div {
  display: inline-block;
  max-width: 274px;
  vertical-align: middle;
}
.base-common.tooltip-instance.top-right:before {
  right: 40px;
  bottom: 100%;
}
.base-common.tooltip-instance.top-center:before {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(46%) rotateZ(45deg);
}
.base-common.tooltip-instance.top-left:before {
  bottom: 100%;
  left: 40px;
}
.base-common.tooltip-instance.right-top:before {
  top: 20px;
  left: 100%;
  transform: translateX(-46%) rotateZ(135deg);
}
.base-common.tooltip-instance.right-center:before {
  top: 50%;
  left: 100%;
  transform: translateX(-46%) translateY(-50%) rotateZ(135deg);
}
.base-common.tooltip-instance.right-bottom:before {
  bottom: 20px;
  left: 100%;
  transform: translateX(-46%) rotateZ(135deg);
}
.base-common.tooltip-instance.bottom-right:before {
  top: 100%;
  right: 40px;
  transform: translateY(-46%) rotateZ(225deg);
}
.base-common.tooltip-instance.bottom-center:before {
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-46%) rotateZ(225deg);
}
.base-common.tooltip-instance.bottom-left:before {
  top: 100%;
  left: 40px;
  transform: translateY(-46%) rotateZ(225deg);
}
.base-common.tooltip-instance.left-top:before {
  top: 20px;
  left: 0;
  transform: translateX(-54%) rotateZ(-45deg);
}
.base-common.tooltip-instance.left-center:before {
  top: 50%;
  left: 0;
  transform: translateX(-54%) translateY(-50%) rotateZ(-45deg);
}
.base-common.tooltip-instance.left-bottom:before {
  bottom: 20px;
  left: 0;
  transform: translateX(-54%) rotateZ(-45deg);
}
.base-common.tooltip-instance.error {
  color: #ce2830;
}
.base-common.tooltip-instance.video {
  padding: 10px;
}
.base-common.tooltip-instance.video .imageFrame {
  display: block;
  top: 0;
  left: 0;
}
.base-common.gr-c2a-to-c3c {
  background: #faf1d4;
  background: linear-gradient(#faf1d4, #f2a59e);
}
.base-common.gr-c2a-to-c2b {
  background: #faf1d4;
  background: linear-gradient(#faf1d4, #ffd37c);
}
.base-common.gr-c3i-to-c3j {
  background: #700f1c;
  background: linear-gradient(#700f1c, #510a13);
}
.base-common.gr-c4c-to-c4g {
  background: #cfbdf4;
  background: linear-gradient(#cfbdf4, #614aa5);
}
.base-common.gr-c4a-to-c2a {
  background: #efe8fc;
  background: linear-gradient(#efe8fc, #faf1d4);
}
.base-common.gr-c4a-to-c4c {
  background: #efe8fc;
  background: linear-gradient(#efe8fc, #cfbdf4);
}
.base-common.gr-c5b-to-c2a {
  background: #bce4f7;
  background: linear-gradient(#bce4f7, #faf1d4);
}
.base-common.gr-c5j-to-c3j {
  background: #011b2d;
  background: linear-gradient(#011b2d, #510a13);
}
.base-common.gr-c2a-to-c2c {
  background: #faf1d4;
  background: linear-gradient(#faf1d4, #ffba5a);
}
.base-common.gr-c3a-to-c3c {
  background: #f9e6e4;
  background: linear-gradient(#f9e6e4, #f2a59e);
}
.base-common.gr-c2e-to-c1i {
  background: #f7911b;
  background: linear-gradient(#f7911b, #d46c04);
}
.base-common.gr-c3c-to-c3d {
  background: #f2a59e;
  background: linear-gradient(#f2a59e, #ed6868);
}
.base-common.gr-c5e-to-c5h {
  background: #3f88d1;
  background: linear-gradient(#3f88d1, #03407c);
}
.base-common.gr-c2h-to-c1e {
  background: #c95004;
  background: linear-gradient(#c95004, #ffc60b);
}
.base-common.gr-c7i-to-c7d {
  background: #00605d;
  background: linear-gradient(#00605d, #68ede0);
}
.base-common.gr-c4f-to-c4d {
  background: #7963ba;
  background: linear-gradient(#7963ba, #af96fa);
}
.base-common.textGlow-c4-i {
  text-shadow: #2c2163 1px 1px 1px, #2c2163 1px -1px 1px, #2c2163 -1px 1px 1px, #2c2163 -1px -1px 1px;
}
.base-common.footerWithStripes-c0,
.base-common.footerWithStripes-gray {
  border: 1px solid #bec7cc;
  height: 95px;
  background: -webkit-linear-gradient(#f5fafc, #bec7cc);
  background: -moz-linear-gradient(#f5fafc, #bec7cc);
  background: -ms-linear-gradient(#f5fafc, #bec7cc);
  background: -o-linear-gradient(#f5fafc, #bec7cc);
  background: linear-gradient(#f5fafc, #bec7cc);
  position: relative;
  border-top: 1px solid #B9C0C6;
}
.base-common.footerWithStripes-c0:before,
.base-common.footerWithStripes-gray:before {
  position: absolute;
  top: 0;
  width: 100%;
  height: 95px;
  content: ' ';
  background: url('../images/gd_footer_stripes.png') center top no-repeat;
  left: 0;
}
.base-common.headerWithSwoosh-c0,
.base-common.headerWithSwoosh-gray {
  max-width: 940px;
  border-bottom: 1px solid #bec7cc;
  width: 100%;
  height: 95px;
  background: -webkit-linear-gradient(#9da6ab, #bec7cc);
  background: -moz-linear-gradient(#9da6ab, #bec7cc);
  background: -ms-linear-gradient(#9da6ab, #bec7cc);
  background: -o-linear-gradient(#9da6ab, #bec7cc);
  background: linear-gradient(#9da6ab, #bec7cc);
  -webkit-border-radius: 10px 10px 0 0;
  -khtml-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -ms-border-radius: 10px 10px 0 0;
  -o-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  position: relative;
}
.base-common.headerWithSwoosh-c0::after,
.base-common.headerWithSwoosh-gray::after {
  position: absolute;
  width: 100%;
  height: 5px;
  bottom: -1px;
  content: " ";
  left: 0;
  -webkit-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  border-bottom: 1px solid #fff;
}
.base-common.headerWithSwoosh-c0::before,
.base-common.headerWithSwoosh-gray::before {
  position: absolute;
  top: 0;
  width: 100%;
  height: 95px;
  content: ' ';
  background: url('../images/gd_header_swoosh.png') center top no-repeat;
  border-radius: 10px 10px 0 0;
}
.base-common.headerWithSwoosh-c0 .decorator1,
.base-common.headerWithSwoosh-gray .decorator1,
.base-common.headerWithSwoosh-c0 .decorator2,
.base-common.headerWithSwoosh-gray .decorator2 {
  position: absolute;
  top: -5px;
  width: 100%;
  height: 122px;
  background-position: top right;
  background-repeat: no-repeat;
}
.base-common.headerWithSwoosh-c0 .decorator2,
.base-common.headerWithSwoosh-gray .decorator2 {
  z-index: 1;
  background-position: top left;
}
.base-common.gradientPanel-c0,
.base-common.gradientPanel-gray {
  background: -webkit-linear-gradient(#f5fafc, #cbd4d9);
  background: -moz-linear-gradient(#f5fafc, #cbd4d9);
  background: -ms-linear-gradient(#f5fafc, #cbd4d9);
  background: -o-linear-gradient(#f5fafc, #cbd4d9);
  background: linear-gradient(#f5fafc, #cbd4d9);
  border-top: 1px solid #B9C0C6;
  position: relative;
}
.base-common.gradientPanel-c0::after,
.base-common.gradientPanel-gray::after {
  position: absolute;
  width: 100%;
  height: 5px;
  bottom: -1px;
  content: " ";
  left: 0;
  -webkit-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  border-bottom: 1px solid #fff;
}
.base-common.gradientPanel-c0:before,
.base-common.gradientPanel-gray:before {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: white;
  top: 0;
  content: "";
  left: 0;
}
.base-common.footerWithStripes-c1,
.base-common.footerWithStripes-yellow {
  border: 1px solid #bec7cc;
  height: 95px;
  background: -webkit-linear-gradient(#fcf9cd, #ffd522);
  background: -moz-linear-gradient(#fcf9cd, #ffd522);
  background: -ms-linear-gradient(#fcf9cd, #ffd522);
  background: -o-linear-gradient(#fcf9cd, #ffd522);
  background: linear-gradient(#fcf9cd, #ffd522);
  position: relative;
  border-top: 1px solid #B9C0C6;
}
.base-common.footerWithStripes-c1:before,
.base-common.footerWithStripes-yellow:before {
  position: absolute;
  top: 0;
  width: 100%;
  height: 95px;
  content: ' ';
  background: url('../images/gd_footer_stripes.png') center top no-repeat;
  left: 0;
}
.base-common.headerWithSwoosh-c1,
.base-common.headerWithSwoosh-yellow {
  max-width: 940px;
  border-bottom: 1px solid #bec7cc;
  width: 100%;
  height: 95px;
  background: -webkit-linear-gradient(#ffaf02, #ffd522);
  background: -moz-linear-gradient(#ffaf02, #ffd522);
  background: -ms-linear-gradient(#ffaf02, #ffd522);
  background: -o-linear-gradient(#ffaf02, #ffd522);
  background: linear-gradient(#ffaf02, #ffd522);
  -webkit-border-radius: 10px 10px 0 0;
  -khtml-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -ms-border-radius: 10px 10px 0 0;
  -o-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  position: relative;
}
.base-common.headerWithSwoosh-c1::after,
.base-common.headerWithSwoosh-yellow::after {
  position: absolute;
  width: 100%;
  height: 5px;
  bottom: -1px;
  content: " ";
  left: 0;
  -webkit-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  border-bottom: 1px solid #fff;
}
.base-common.headerWithSwoosh-c1::before,
.base-common.headerWithSwoosh-yellow::before {
  position: absolute;
  top: 0;
  width: 100%;
  height: 95px;
  content: ' ';
  background: url('../images/gd_header_swoosh.png') center top no-repeat;
  border-radius: 10px 10px 0 0;
}
.base-common.headerWithSwoosh-c1 .decorator1,
.base-common.headerWithSwoosh-yellow .decorator1,
.base-common.headerWithSwoosh-c1 .decorator2,
.base-common.headerWithSwoosh-yellow .decorator2 {
  position: absolute;
  top: -5px;
  width: 100%;
  height: 122px;
  background-position: top right;
  background-repeat: no-repeat;
}
.base-common.headerWithSwoosh-c1 .decorator2,
.base-common.headerWithSwoosh-yellow .decorator2 {
  z-index: 1;
  background-position: top left;
}
.base-common.gradientPanel-c1,
.base-common.gradientPanel-yellow {
  background: -webkit-linear-gradient(#fcf9cd, #ffea55);
  background: -moz-linear-gradient(#fcf9cd, #ffea55);
  background: -ms-linear-gradient(#fcf9cd, #ffea55);
  background: -o-linear-gradient(#fcf9cd, #ffea55);
  background: linear-gradient(#fcf9cd, #ffea55);
  border-top: 1px solid #B9C0C6;
  position: relative;
}
.base-common.gradientPanel-c1::after,
.base-common.gradientPanel-yellow::after {
  position: absolute;
  width: 100%;
  height: 5px;
  bottom: -1px;
  content: " ";
  left: 0;
  -webkit-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  border-bottom: 1px solid #fff;
}
.base-common.gradientPanel-c1:before,
.base-common.gradientPanel-yellow:before {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: white;
  top: 0;
  content: "";
  left: 0;
}
.base-common.footerWithStripes-c2,
.base-common.footerWithStripes-orange {
  border: 1px solid #bec7cc;
  height: 95px;
  background: -webkit-linear-gradient(#faf1d4, #faa125);
  background: -moz-linear-gradient(#faf1d4, #faa125);
  background: -ms-linear-gradient(#faf1d4, #faa125);
  background: -o-linear-gradient(#faf1d4, #faa125);
  background: linear-gradient(#faf1d4, #faa125);
  position: relative;
  border-top: 1px solid #B9C0C6;
}
.base-common.footerWithStripes-c2:before,
.base-common.footerWithStripes-orange:before {
  position: absolute;
  top: 0;
  width: 100%;
  height: 95px;
  content: ' ';
  background: url('../images/gd_footer_stripes.png') center top no-repeat;
  left: 0;
}
.base-common.headerWithSwoosh-c2,
.base-common.headerWithSwoosh-orange {
  max-width: 940px;
  border-bottom: 1px solid #bec7cc;
  width: 100%;
  height: 95px;
  background: -webkit-linear-gradient(#ed7600, #faa125);
  background: -moz-linear-gradient(#ed7600, #faa125);
  background: -ms-linear-gradient(#ed7600, #faa125);
  background: -o-linear-gradient(#ed7600, #faa125);
  background: linear-gradient(#ed7600, #faa125);
  -webkit-border-radius: 10px 10px 0 0;
  -khtml-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -ms-border-radius: 10px 10px 0 0;
  -o-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  position: relative;
}
.base-common.headerWithSwoosh-c2::after,
.base-common.headerWithSwoosh-orange::after {
  position: absolute;
  width: 100%;
  height: 5px;
  bottom: -1px;
  content: " ";
  left: 0;
  -webkit-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  border-bottom: 1px solid #fff;
}
.base-common.headerWithSwoosh-c2::before,
.base-common.headerWithSwoosh-orange::before {
  position: absolute;
  top: 0;
  width: 100%;
  height: 95px;
  content: ' ';
  background: url('../images/gd_header_swoosh.png') center top no-repeat;
  border-radius: 10px 10px 0 0;
}
.base-common.headerWithSwoosh-c2 .decorator1,
.base-common.headerWithSwoosh-orange .decorator1,
.base-common.headerWithSwoosh-c2 .decorator2,
.base-common.headerWithSwoosh-orange .decorator2 {
  position: absolute;
  top: -5px;
  width: 100%;
  height: 122px;
  background-position: top right;
  background-repeat: no-repeat;
}
.base-common.headerWithSwoosh-c2 .decorator2,
.base-common.headerWithSwoosh-orange .decorator2 {
  z-index: 1;
  background-position: top left;
}
.base-common.gradientPanel-c2,
.base-common.gradientPanel-orange {
  background: -webkit-linear-gradient(#faf1d4, #ffba5a);
  background: -moz-linear-gradient(#faf1d4, #ffba5a);
  background: -ms-linear-gradient(#faf1d4, #ffba5a);
  background: -o-linear-gradient(#faf1d4, #ffba5a);
  background: linear-gradient(#faf1d4, #ffba5a);
  border-top: 1px solid #B9C0C6;
  position: relative;
}
.base-common.gradientPanel-c2::after,
.base-common.gradientPanel-orange::after {
  position: absolute;
  width: 100%;
  height: 5px;
  bottom: -1px;
  content: " ";
  left: 0;
  -webkit-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  border-bottom: 1px solid #fff;
}
.base-common.gradientPanel-c2:before,
.base-common.gradientPanel-orange:before {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: white;
  top: 0;
  content: "";
  left: 0;
}
.base-common.footerWithStripes-c3,
.base-common.footerWithStripes-red {
  border: 1px solid #bec7cc;
  height: 95px;
  background: -webkit-linear-gradient(#f9e6e4, #ed6868);
  background: -moz-linear-gradient(#f9e6e4, #ed6868);
  background: -ms-linear-gradient(#f9e6e4, #ed6868);
  background: -o-linear-gradient(#f9e6e4, #ed6868);
  background: linear-gradient(#f9e6e4, #ed6868);
  position: relative;
  border-top: 1px solid #B9C0C6;
}
.base-common.footerWithStripes-c3:before,
.base-common.footerWithStripes-red:before {
  position: absolute;
  top: 0;
  width: 100%;
  height: 95px;
  content: ' ';
  background: url('../images/gd_footer_stripes.png') center top no-repeat;
  left: 0;
}
.base-common.headerWithSwoosh-c3,
.base-common.headerWithSwoosh-red {
  max-width: 940px;
  border-bottom: 1px solid #bec7cc;
  width: 100%;
  height: 95px;
  background: -webkit-linear-gradient(#ce2830, #ed6868);
  background: -moz-linear-gradient(#ce2830, #ed6868);
  background: -ms-linear-gradient(#ce2830, #ed6868);
  background: -o-linear-gradient(#ce2830, #ed6868);
  background: linear-gradient(#ce2830, #ed6868);
  -webkit-border-radius: 10px 10px 0 0;
  -khtml-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -ms-border-radius: 10px 10px 0 0;
  -o-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  position: relative;
}
.base-common.headerWithSwoosh-c3::after,
.base-common.headerWithSwoosh-red::after {
  position: absolute;
  width: 100%;
  height: 5px;
  bottom: -1px;
  content: " ";
  left: 0;
  -webkit-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  border-bottom: 1px solid #fff;
}
.base-common.headerWithSwoosh-c3::before,
.base-common.headerWithSwoosh-red::before {
  position: absolute;
  top: 0;
  width: 100%;
  height: 95px;
  content: ' ';
  background: url('../images/gd_header_swoosh.png') center top no-repeat;
  border-radius: 10px 10px 0 0;
}
.base-common.headerWithSwoosh-c3 .decorator1,
.base-common.headerWithSwoosh-red .decorator1,
.base-common.headerWithSwoosh-c3 .decorator2,
.base-common.headerWithSwoosh-red .decorator2 {
  position: absolute;
  top: -5px;
  width: 100%;
  height: 122px;
  background-position: top right;
  background-repeat: no-repeat;
}
.base-common.headerWithSwoosh-c3 .decorator2,
.base-common.headerWithSwoosh-red .decorator2 {
  z-index: 1;
  background-position: top left;
}
.base-common.gradientPanel-c3,
.base-common.gradientPanel-red {
  background: -webkit-linear-gradient(#f9e6e4, #f2a59e);
  background: -moz-linear-gradient(#f9e6e4, #f2a59e);
  background: -ms-linear-gradient(#f9e6e4, #f2a59e);
  background: -o-linear-gradient(#f9e6e4, #f2a59e);
  background: linear-gradient(#f9e6e4, #f2a59e);
  border-top: 1px solid #B9C0C6;
  position: relative;
}
.base-common.gradientPanel-c3::after,
.base-common.gradientPanel-red::after {
  position: absolute;
  width: 100%;
  height: 5px;
  bottom: -1px;
  content: " ";
  left: 0;
  -webkit-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  border-bottom: 1px solid #fff;
}
.base-common.gradientPanel-c3:before,
.base-common.gradientPanel-red:before {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: white;
  top: 0;
  content: "";
  left: 0;
}
.base-common.footerWithStripes-c4,
.base-common.footerWithStripes-purple {
  border: 1px solid #bec7cc;
  height: 95px;
  background: -webkit-linear-gradient(#efe8fc, #af96fa);
  background: -moz-linear-gradient(#efe8fc, #af96fa);
  background: -ms-linear-gradient(#efe8fc, #af96fa);
  background: -o-linear-gradient(#efe8fc, #af96fa);
  background: linear-gradient(#efe8fc, #af96fa);
  position: relative;
  border-top: 1px solid #B9C0C6;
}
.base-common.footerWithStripes-c4:before,
.base-common.footerWithStripes-purple:before {
  position: absolute;
  top: 0;
  width: 100%;
  height: 95px;
  content: ' ';
  background: url('../images/gd_footer_stripes.png') center top no-repeat;
  left: 0;
}
.base-common.headerWithSwoosh-c4,
.base-common.headerWithSwoosh-purple {
  max-width: 940px;
  border-bottom: 1px solid #bec7cc;
  width: 100%;
  height: 95px;
  background: -webkit-linear-gradient(#7963ba, #af96fa);
  background: -moz-linear-gradient(#7963ba, #af96fa);
  background: -ms-linear-gradient(#7963ba, #af96fa);
  background: -o-linear-gradient(#7963ba, #af96fa);
  background: linear-gradient(#7963ba, #af96fa);
  -webkit-border-radius: 10px 10px 0 0;
  -khtml-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -ms-border-radius: 10px 10px 0 0;
  -o-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  position: relative;
}
.base-common.headerWithSwoosh-c4::after,
.base-common.headerWithSwoosh-purple::after {
  position: absolute;
  width: 100%;
  height: 5px;
  bottom: -1px;
  content: " ";
  left: 0;
  -webkit-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  border-bottom: 1px solid #fff;
}
.base-common.headerWithSwoosh-c4::before,
.base-common.headerWithSwoosh-purple::before {
  position: absolute;
  top: 0;
  width: 100%;
  height: 95px;
  content: ' ';
  background: url('../images/gd_header_swoosh.png') center top no-repeat;
  border-radius: 10px 10px 0 0;
}
.base-common.headerWithSwoosh-c4 .decorator1,
.base-common.headerWithSwoosh-purple .decorator1,
.base-common.headerWithSwoosh-c4 .decorator2,
.base-common.headerWithSwoosh-purple .decorator2 {
  position: absolute;
  top: -5px;
  width: 100%;
  height: 122px;
  background-position: top right;
  background-repeat: no-repeat;
}
.base-common.headerWithSwoosh-c4 .decorator2,
.base-common.headerWithSwoosh-purple .decorator2 {
  z-index: 1;
  background-position: top left;
}
.base-common.gradientPanel-c4,
.base-common.gradientPanel-purple {
  background: -webkit-linear-gradient(#efe8fc, #cfbdf4);
  background: -moz-linear-gradient(#efe8fc, #cfbdf4);
  background: -ms-linear-gradient(#efe8fc, #cfbdf4);
  background: -o-linear-gradient(#efe8fc, #cfbdf4);
  background: linear-gradient(#efe8fc, #cfbdf4);
  border-top: 1px solid #B9C0C6;
  position: relative;
}
.base-common.gradientPanel-c4::after,
.base-common.gradientPanel-purple::after {
  position: absolute;
  width: 100%;
  height: 5px;
  bottom: -1px;
  content: " ";
  left: 0;
  -webkit-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  border-bottom: 1px solid #fff;
}
.base-common.gradientPanel-c4:before,
.base-common.gradientPanel-purple:before {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: white;
  top: 0;
  content: "";
  left: 0;
}
.base-common.footerWithStripes-c5,
.base-common.footerWithStripes-midBlue {
  border: 1px solid #bec7cc;
  height: 95px;
  background: -webkit-linear-gradient(#edf5f9, #61a4d4);
  background: -moz-linear-gradient(#edf5f9, #61a4d4);
  background: -ms-linear-gradient(#edf5f9, #61a4d4);
  background: -o-linear-gradient(#edf5f9, #61a4d4);
  background: linear-gradient(#edf5f9, #61a4d4);
  position: relative;
  border-top: 1px solid #B9C0C6;
}
.base-common.footerWithStripes-c5:before,
.base-common.footerWithStripes-midBlue:before {
  position: absolute;
  top: 0;
  width: 100%;
  height: 95px;
  content: ' ';
  background: url('../images/gd_footer_stripes.png') center top no-repeat;
  left: 0;
}
.base-common.headerWithSwoosh-c5,
.base-common.headerWithSwoosh-midBlue {
  max-width: 940px;
  border-bottom: 1px solid #bec7cc;
  width: 100%;
  height: 95px;
  background: -webkit-linear-gradient(#246db5, #61a4d4);
  background: -moz-linear-gradient(#246db5, #61a4d4);
  background: -ms-linear-gradient(#246db5, #61a4d4);
  background: -o-linear-gradient(#246db5, #61a4d4);
  background: linear-gradient(#246db5, #61a4d4);
  -webkit-border-radius: 10px 10px 0 0;
  -khtml-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -ms-border-radius: 10px 10px 0 0;
  -o-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  position: relative;
}
.base-common.headerWithSwoosh-c5::after,
.base-common.headerWithSwoosh-midBlue::after {
  position: absolute;
  width: 100%;
  height: 5px;
  bottom: -1px;
  content: " ";
  left: 0;
  -webkit-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  border-bottom: 1px solid #fff;
}
.base-common.headerWithSwoosh-c5::before,
.base-common.headerWithSwoosh-midBlue::before {
  position: absolute;
  top: 0;
  width: 100%;
  height: 95px;
  content: ' ';
  background: url('../images/gd_header_swoosh.png') center top no-repeat;
  border-radius: 10px 10px 0 0;
}
.base-common.headerWithSwoosh-c5 .decorator1,
.base-common.headerWithSwoosh-midBlue .decorator1,
.base-common.headerWithSwoosh-c5 .decorator2,
.base-common.headerWithSwoosh-midBlue .decorator2 {
  position: absolute;
  top: -5px;
  width: 100%;
  height: 122px;
  background-position: top right;
  background-repeat: no-repeat;
}
.base-common.headerWithSwoosh-c5 .decorator2,
.base-common.headerWithSwoosh-midBlue .decorator2 {
  z-index: 1;
  background-position: top left;
}
.base-common.gradientPanel-c5,
.base-common.gradientPanel-midBlue {
  background: -webkit-linear-gradient(#edf5f9, #89c3e0);
  background: -moz-linear-gradient(#edf5f9, #89c3e0);
  background: -ms-linear-gradient(#edf5f9, #89c3e0);
  background: -o-linear-gradient(#edf5f9, #89c3e0);
  background: linear-gradient(#edf5f9, #89c3e0);
  border-top: 1px solid #B9C0C6;
  position: relative;
}
.base-common.gradientPanel-c5::after,
.base-common.gradientPanel-midBlue::after {
  position: absolute;
  width: 100%;
  height: 5px;
  bottom: -1px;
  content: " ";
  left: 0;
  -webkit-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  border-bottom: 1px solid #fff;
}
.base-common.gradientPanel-c5:before,
.base-common.gradientPanel-midBlue:before {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: white;
  top: 0;
  content: "";
  left: 0;
}
.base-common.footerWithStripes-c6,
.base-common.footerWithStripes-lightBlue {
  border: 1px solid #bec7cc;
  height: 95px;
  background: -webkit-linear-gradient(#e8f7fc, #78d2f5);
  background: -moz-linear-gradient(#e8f7fc, #78d2f5);
  background: -ms-linear-gradient(#e8f7fc, #78d2f5);
  background: -o-linear-gradient(#e8f7fc, #78d2f5);
  background: linear-gradient(#e8f7fc, #78d2f5);
  position: relative;
  border-top: 1px solid #B9C0C6;
}
.base-common.footerWithStripes-c6:before,
.base-common.footerWithStripes-lightBlue:before {
  position: absolute;
  top: 0;
  width: 100%;
  height: 95px;
  content: ' ';
  background: url('../images/gd_footer_stripes.png') center top no-repeat;
  left: 0;
}
.base-common.headerWithSwoosh-c6,
.base-common.headerWithSwoosh-lightBlue {
  max-width: 940px;
  border-bottom: 1px solid #bec7cc;
  width: 100%;
  height: 95px;
  background: -webkit-linear-gradient(#0999e1, #78d2f5);
  background: -moz-linear-gradient(#0999e1, #78d2f5);
  background: -ms-linear-gradient(#0999e1, #78d2f5);
  background: -o-linear-gradient(#0999e1, #78d2f5);
  background: linear-gradient(#0999e1, #78d2f5);
  -webkit-border-radius: 10px 10px 0 0;
  -khtml-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -ms-border-radius: 10px 10px 0 0;
  -o-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  position: relative;
}
.base-common.headerWithSwoosh-c6::after,
.base-common.headerWithSwoosh-lightBlue::after {
  position: absolute;
  width: 100%;
  height: 5px;
  bottom: -1px;
  content: " ";
  left: 0;
  -webkit-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  border-bottom: 1px solid #fff;
}
.base-common.headerWithSwoosh-c6::before,
.base-common.headerWithSwoosh-lightBlue::before {
  position: absolute;
  top: 0;
  width: 100%;
  height: 95px;
  content: ' ';
  background: url('../images/gd_header_swoosh.png') center top no-repeat;
  border-radius: 10px 10px 0 0;
}
.base-common.headerWithSwoosh-c6 .decorator1,
.base-common.headerWithSwoosh-lightBlue .decorator1,
.base-common.headerWithSwoosh-c6 .decorator2,
.base-common.headerWithSwoosh-lightBlue .decorator2 {
  position: absolute;
  top: -5px;
  width: 100%;
  height: 122px;
  background-position: top right;
  background-repeat: no-repeat;
}
.base-common.headerWithSwoosh-c6 .decorator2,
.base-common.headerWithSwoosh-lightBlue .decorator2 {
  z-index: 1;
  background-position: top left;
}
.base-common.gradientPanel-c6,
.base-common.gradientPanel-lightBlue {
  background: -webkit-linear-gradient(#e8f7fc, #9ee1f7);
  background: -moz-linear-gradient(#e8f7fc, #9ee1f7);
  background: -ms-linear-gradient(#e8f7fc, #9ee1f7);
  background: -o-linear-gradient(#e8f7fc, #9ee1f7);
  background: linear-gradient(#e8f7fc, #9ee1f7);
  border-top: 1px solid #B9C0C6;
  position: relative;
}
.base-common.gradientPanel-c6::after,
.base-common.gradientPanel-lightBlue::after {
  position: absolute;
  width: 100%;
  height: 5px;
  bottom: -1px;
  content: " ";
  left: 0;
  -webkit-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  border-bottom: 1px solid #fff;
}
.base-common.gradientPanel-c6:before,
.base-common.gradientPanel-lightBlue:before {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: white;
  top: 0;
  content: "";
  left: 0;
}
.base-common.footerWithStripes-c7,
.base-common.footerWithStripes-turquoise {
  border: 1px solid #bec7cc;
  height: 95px;
  background: -webkit-linear-gradient(#e1faf7, #68ede0);
  background: -moz-linear-gradient(#e1faf7, #68ede0);
  background: -ms-linear-gradient(#e1faf7, #68ede0);
  background: -o-linear-gradient(#e1faf7, #68ede0);
  background: linear-gradient(#e1faf7, #68ede0);
  position: relative;
  border-top: 1px solid #B9C0C6;
}
.base-common.footerWithStripes-c7:before,
.base-common.footerWithStripes-turquoise:before {
  position: absolute;
  top: 0;
  width: 100%;
  height: 95px;
  content: ' ';
  background: url('../images/gd_footer_stripes.png') center top no-repeat;
  left: 0;
}
.base-common.headerWithSwoosh-c7,
.base-common.headerWithSwoosh-turquoise {
  max-width: 940px;
  border-bottom: 1px solid #bec7cc;
  width: 100%;
  height: 95px;
  background: -webkit-linear-gradient(#08ccc5, #68ede0);
  background: -moz-linear-gradient(#08ccc5, #68ede0);
  background: -ms-linear-gradient(#08ccc5, #68ede0);
  background: -o-linear-gradient(#08ccc5, #68ede0);
  background: linear-gradient(#08ccc5, #68ede0);
  -webkit-border-radius: 10px 10px 0 0;
  -khtml-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -ms-border-radius: 10px 10px 0 0;
  -o-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  position: relative;
}
.base-common.headerWithSwoosh-c7::after,
.base-common.headerWithSwoosh-turquoise::after {
  position: absolute;
  width: 100%;
  height: 5px;
  bottom: -1px;
  content: " ";
  left: 0;
  -webkit-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  border-bottom: 1px solid #fff;
}
.base-common.headerWithSwoosh-c7::before,
.base-common.headerWithSwoosh-turquoise::before {
  position: absolute;
  top: 0;
  width: 100%;
  height: 95px;
  content: ' ';
  background: url('../images/gd_header_swoosh.png') center top no-repeat;
  border-radius: 10px 10px 0 0;
}
.base-common.headerWithSwoosh-c7 .decorator1,
.base-common.headerWithSwoosh-turquoise .decorator1,
.base-common.headerWithSwoosh-c7 .decorator2,
.base-common.headerWithSwoosh-turquoise .decorator2 {
  position: absolute;
  top: -5px;
  width: 100%;
  height: 122px;
  background-position: top right;
  background-repeat: no-repeat;
}
.base-common.headerWithSwoosh-c7 .decorator2,
.base-common.headerWithSwoosh-turquoise .decorator2 {
  z-index: 1;
  background-position: top left;
}
.base-common.gradientPanel-c7,
.base-common.gradientPanel-turquoise {
  background: -webkit-linear-gradient(#e1faf7, #99f7ee);
  background: -moz-linear-gradient(#e1faf7, #99f7ee);
  background: -ms-linear-gradient(#e1faf7, #99f7ee);
  background: -o-linear-gradient(#e1faf7, #99f7ee);
  background: linear-gradient(#e1faf7, #99f7ee);
  border-top: 1px solid #B9C0C6;
  position: relative;
}
.base-common.gradientPanel-c7::after,
.base-common.gradientPanel-turquoise::after {
  position: absolute;
  width: 100%;
  height: 5px;
  bottom: -1px;
  content: " ";
  left: 0;
  -webkit-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  border-bottom: 1px solid #fff;
}
.base-common.gradientPanel-c7:before,
.base-common.gradientPanel-turquoise:before {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: white;
  top: 0;
  content: "";
  left: 0;
}
.base-common.footerWithStripes-c8,
.base-common.footerWithStripes-midGreen {
  border: 1px solid #bec7cc;
  height: 95px;
  background: -webkit-linear-gradient(#e2f2d4, #85db60);
  background: -moz-linear-gradient(#e2f2d4, #85db60);
  background: -ms-linear-gradient(#e2f2d4, #85db60);
  background: -o-linear-gradient(#e2f2d4, #85db60);
  background: linear-gradient(#e2f2d4, #85db60);
  position: relative;
  border-top: 1px solid #B9C0C6;
}
.base-common.footerWithStripes-c8:before,
.base-common.footerWithStripes-midGreen:before {
  position: absolute;
  top: 0;
  width: 100%;
  height: 95px;
  content: ' ';
  background: url('../images/gd_footer_stripes.png') center top no-repeat;
  left: 0;
}
.base-common.headerWithSwoosh-c8,
.base-common.headerWithSwoosh-midGreen {
  max-width: 940px;
  border-bottom: 1px solid #bec7cc;
  width: 100%;
  height: 95px;
  background: -webkit-linear-gradient(#46b324, #85db60);
  background: -moz-linear-gradient(#46b324, #85db60);
  background: -ms-linear-gradient(#46b324, #85db60);
  background: -o-linear-gradient(#46b324, #85db60);
  background: linear-gradient(#46b324, #85db60);
  -webkit-border-radius: 10px 10px 0 0;
  -khtml-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -ms-border-radius: 10px 10px 0 0;
  -o-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  position: relative;
}
.base-common.headerWithSwoosh-c8::after,
.base-common.headerWithSwoosh-midGreen::after {
  position: absolute;
  width: 100%;
  height: 5px;
  bottom: -1px;
  content: " ";
  left: 0;
  -webkit-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  border-bottom: 1px solid #fff;
}
.base-common.headerWithSwoosh-c8::before,
.base-common.headerWithSwoosh-midGreen::before {
  position: absolute;
  top: 0;
  width: 100%;
  height: 95px;
  content: ' ';
  background: url('../images/gd_header_swoosh.png') center top no-repeat;
  border-radius: 10px 10px 0 0;
}
.base-common.headerWithSwoosh-c8 .decorator1,
.base-common.headerWithSwoosh-midGreen .decorator1,
.base-common.headerWithSwoosh-c8 .decorator2,
.base-common.headerWithSwoosh-midGreen .decorator2 {
  position: absolute;
  top: -5px;
  width: 100%;
  height: 122px;
  background-position: top right;
  background-repeat: no-repeat;
}
.base-common.headerWithSwoosh-c8 .decorator2,
.base-common.headerWithSwoosh-midGreen .decorator2 {
  z-index: 1;
  background-position: top left;
}
.base-common.gradientPanel-c8,
.base-common.gradientPanel-midGreen {
  background: -webkit-linear-gradient(#e2f2d4, #c6f5a9);
  background: -moz-linear-gradient(#e2f2d4, #c6f5a9);
  background: -ms-linear-gradient(#e2f2d4, #c6f5a9);
  background: -o-linear-gradient(#e2f2d4, #c6f5a9);
  background: linear-gradient(#e2f2d4, #c6f5a9);
  border-top: 1px solid #B9C0C6;
  position: relative;
}
.base-common.gradientPanel-c8::after,
.base-common.gradientPanel-midGreen::after {
  position: absolute;
  width: 100%;
  height: 5px;
  bottom: -1px;
  content: " ";
  left: 0;
  -webkit-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  border-bottom: 1px solid #fff;
}
.base-common.gradientPanel-c8:before,
.base-common.gradientPanel-midGreen:before {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: white;
  top: 0;
  content: "";
  left: 0;
}
.base-common.footerWithStripes-c9,
.base-common.footerWithStripes-lightGreen {
  border: 1px solid #bec7cc;
  height: 95px;
  background: -webkit-linear-gradient(#ecf5d5, #bfeb52);
  background: -moz-linear-gradient(#ecf5d5, #bfeb52);
  background: -ms-linear-gradient(#ecf5d5, #bfeb52);
  background: -o-linear-gradient(#ecf5d5, #bfeb52);
  background: linear-gradient(#ecf5d5, #bfeb52);
  position: relative;
  border-top: 1px solid #B9C0C6;
}
.base-common.footerWithStripes-c9:before,
.base-common.footerWithStripes-lightGreen:before {
  position: absolute;
  top: 0;
  width: 100%;
  height: 95px;
  content: ' ';
  background: url('../images/gd_footer_stripes.png') center top no-repeat;
  left: 0;
}
.base-common.headerWithSwoosh-c9,
.base-common.headerWithSwoosh-lightGreen {
  max-width: 940px;
  border-bottom: 1px solid #bec7cc;
  width: 100%;
  height: 95px;
  background: -webkit-linear-gradient(#92c219, #bfeb52);
  background: -moz-linear-gradient(#92c219, #bfeb52);
  background: -ms-linear-gradient(#92c219, #bfeb52);
  background: -o-linear-gradient(#92c219, #bfeb52);
  background: linear-gradient(#92c219, #bfeb52);
  -webkit-border-radius: 10px 10px 0 0;
  -khtml-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -ms-border-radius: 10px 10px 0 0;
  -o-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  position: relative;
}
.base-common.headerWithSwoosh-c9::after,
.base-common.headerWithSwoosh-lightGreen::after {
  position: absolute;
  width: 100%;
  height: 5px;
  bottom: -1px;
  content: " ";
  left: 0;
  -webkit-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  border-bottom: 1px solid #fff;
}
.base-common.headerWithSwoosh-c9::before,
.base-common.headerWithSwoosh-lightGreen::before {
  position: absolute;
  top: 0;
  width: 100%;
  height: 95px;
  content: ' ';
  background: url('../images/gd_header_swoosh.png') center top no-repeat;
  border-radius: 10px 10px 0 0;
}
.base-common.headerWithSwoosh-c9 .decorator1,
.base-common.headerWithSwoosh-lightGreen .decorator1,
.base-common.headerWithSwoosh-c9 .decorator2,
.base-common.headerWithSwoosh-lightGreen .decorator2 {
  position: absolute;
  top: -5px;
  width: 100%;
  height: 122px;
  background-position: top right;
  background-repeat: no-repeat;
}
.base-common.headerWithSwoosh-c9 .decorator2,
.base-common.headerWithSwoosh-lightGreen .decorator2 {
  z-index: 1;
  background-position: top left;
}
.base-common.gradientPanel-c9,
.base-common.gradientPanel-lightGreen {
  background: -webkit-linear-gradient(#ecf5d5, #d0f272);
  background: -moz-linear-gradient(#ecf5d5, #d0f272);
  background: -ms-linear-gradient(#ecf5d5, #d0f272);
  background: -o-linear-gradient(#ecf5d5, #d0f272);
  background: linear-gradient(#ecf5d5, #d0f272);
  border-top: 1px solid #B9C0C6;
  position: relative;
}
.base-common.gradientPanel-c9::after,
.base-common.gradientPanel-lightGreen::after {
  position: absolute;
  width: 100%;
  height: 5px;
  bottom: -1px;
  content: " ";
  left: 0;
  -webkit-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  border-bottom: 1px solid #fff;
}
.base-common.gradientPanel-c9:before,
.base-common.gradientPanel-lightGreen:before {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: white;
  top: 0;
  content: "";
  left: 0;
}
.base-common.footerWithStripes-c10,
.base-common.footerWithStripes-blueGreen {
  border: 1px solid #bec7cc;
  height: 95px;
  background: -webkit-linear-gradient(#e1f0e9, #76d6a8);
  background: -moz-linear-gradient(#e1f0e9, #76d6a8);
  background: -ms-linear-gradient(#e1f0e9, #76d6a8);
  background: -o-linear-gradient(#e1f0e9, #76d6a8);
  background: linear-gradient(#e1f0e9, #76d6a8);
  position: relative;
  border-top: 1px solid #B9C0C6;
}
.base-common.footerWithStripes-c10:before,
.base-common.footerWithStripes-blueGreen:before {
  position: absolute;
  top: 0;
  width: 100%;
  height: 95px;
  content: ' ';
  background: url('../images/gd_footer_stripes.png') center top no-repeat;
  left: 0;
}
.base-common.headerWithSwoosh-c10,
.base-common.headerWithSwoosh-blueGreen {
  max-width: 940px;
  border-bottom: 1px solid #bec7cc;
  width: 100%;
  height: 95px;
  background: -webkit-linear-gradient(#2cb070, #76d6a8);
  background: -moz-linear-gradient(#2cb070, #76d6a8);
  background: -ms-linear-gradient(#2cb070, #76d6a8);
  background: -o-linear-gradient(#2cb070, #76d6a8);
  background: linear-gradient(#2cb070, #76d6a8);
  -webkit-border-radius: 10px 10px 0 0;
  -khtml-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -ms-border-radius: 10px 10px 0 0;
  -o-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  position: relative;
}
.base-common.headerWithSwoosh-c10::after,
.base-common.headerWithSwoosh-blueGreen::after {
  position: absolute;
  width: 100%;
  height: 5px;
  bottom: -1px;
  content: " ";
  left: 0;
  -webkit-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  border-bottom: 1px solid #fff;
}
.base-common.headerWithSwoosh-c10::before,
.base-common.headerWithSwoosh-blueGreen::before {
  position: absolute;
  top: 0;
  width: 100%;
  height: 95px;
  content: ' ';
  background: url('../images/gd_header_swoosh.png') center top no-repeat;
  border-radius: 10px 10px 0 0;
}
.base-common.headerWithSwoosh-c10 .decorator1,
.base-common.headerWithSwoosh-blueGreen .decorator1,
.base-common.headerWithSwoosh-c10 .decorator2,
.base-common.headerWithSwoosh-blueGreen .decorator2 {
  position: absolute;
  top: -5px;
  width: 100%;
  height: 122px;
  background-position: top right;
  background-repeat: no-repeat;
}
.base-common.headerWithSwoosh-c10 .decorator2,
.base-common.headerWithSwoosh-blueGreen .decorator2 {
  z-index: 1;
  background-position: top left;
}
.base-common.gradientPanel-c10,
.base-common.gradientPanel-blueGreen {
  background: -webkit-linear-gradient(#e1f0e9, #96e3be);
  background: -moz-linear-gradient(#e1f0e9, #96e3be);
  background: -ms-linear-gradient(#e1f0e9, #96e3be);
  background: -o-linear-gradient(#e1f0e9, #96e3be);
  background: linear-gradient(#e1f0e9, #96e3be);
  border-top: 1px solid #B9C0C6;
  position: relative;
}
.base-common.gradientPanel-c10::after,
.base-common.gradientPanel-blueGreen::after {
  position: absolute;
  width: 100%;
  height: 5px;
  bottom: -1px;
  content: " ";
  left: 0;
  -webkit-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0 -3px 3px -2px rgba(0, 0, 0, 0.2) inset;
  border-bottom: 1px solid #fff;
}
.base-common.gradientPanel-c10:before,
.base-common.gradientPanel-blueGreen:before {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: white;
  top: 0;
  content: "";
  left: 0;
}
.base-common.topOnly {
  border-left: none;
  border-right: none;
  border-bottom: none;
}
.base-common.panelFrame {
  border: 2px solid #fff;
  background-color: #f5fafc;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}
.base-common.panelFrame-hover {
  border: 2px solid #fff;
  background-color: #f5fafc;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  cursor: pointer;
}
.base-common.panelFrame-hover:hover {
  border-color: #adb6bb;
  background-color: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
.base-common.panelFrame-select {
  border: 2px solid #fff;
  background-color: #f5fafc;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  cursor: pointer;
}
.base-common.panelFrame-select:hover {
  border-color: #9da6ab;
  background-color: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
.base-common.panelFrame-select:active {
  border-color: #9da6ab;
  background-color: #f5fafc;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3) inset;
}
.base-common.panelFrame-select.selected {
  border-color: #848d92;
  background-color: #fff;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
}
.base-common.smallSwoosh {
  height: 70px;
}
.base-common.smallSwoosh::before {
  height: 70px;
}
.base-common.smallSwoosh .decorator1,
.base-common.smallSwoosh .decorator2 {
  height: 75px;
}
.base-common.withoutShadowLine.withoutShadowLine {
  border-bottom: none;
}
.base-common.withoutShadowLine.withoutShadowLine::after {
  content: none;
}
.base-common.withoutShadowLine.withoutShadowLine .decorator2 {
  z-index: 0;
}