/* -- buttons --------------------------- */

.abtn, .abtn:visited, .abtn:hover, .abtn:active {
  /*background: #000 url(../img/abtn-overlay.png) bottom left repeat-x;*/
  background-size: contain;
  border: 0;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,1.0),
              0 1px 6px rgba(0,0,0,0.35);
  -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,1.0),
              0 1px 6px rgba(0,0,0,0.35);
  box-shadow: 0 0 1px 1px rgba(255,255,255,1.0),
              0 1px 6px rgba(0,0,0,0.35);
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  padding: 5px 10px 6px;
  position: relative;
  text-decoration: none;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}

.ie7 .abtn {
  overflow: visible;
  padding: 3px 9px;
  width: auto;
}

.abtn-blue, .abtn-blue:visited, .abtn-blue:hover, .abtn-blue:visited {
  background-color: #0072a7;
}

.abtn-blue:hover {
  background-color: #034f72;
}

.abtn-green, .abtn-green:visited, .abtn-green:hover, .abtn-green:visited {
  background-color: #388128;
}

.abtn-green:hover {
  background-color: #1C690B;
}

.abtn-red, .abtn-red:visited, .abtn-red:hover, .abtn-red:visited {
  background-color: #bc1717;
}

.abtn-red:hover {
  background-color: #7f0c0c;
}

.abtn-yellow, .abtn-yellow:visited, .abtn-yellow:hover, .abtn-yellow:visited {
  background-color: #e9ad0c;
}

.abtn-yellow:hover {
  background-color: #b98802;
}

.abtn-wrw-pink, .abtn-wrw-pink:visited, .abtn-wrw-pink:hover, .abtn-wrw-pink:visited {
  background-color: #ea3d76;
}

.abtn-wrw-pink:hover {
  background-color: #b32e5a;
}

.abtn-wrw-purple, .abtn-wrw-purple:visited, .abtn-wrw-purple:hover, .abtn-wrw-purple:visited {
  background-color: #9662B5;
}

.abtn-wrw-purple:hover {
  background-color: #643782;
}

.abtn-inactive, .abtn-inactive:visited, .abtn-inactive:hover, .abtn-inactive:visited {
  background-color: #aaa;
}

.abtn-symbol {
  font-size: 90%;
}

.abtn-download-small{
	background: url(//www.gfamedia.org/images/980/download-icon-small.png) no-repeat;
  display: inline-block;
  height: 12px;
  margin-right: 3px;
  position: relative;
  top: 3px;
  width: 12px;
}

.abtn-download-normal{
  background: url(//www.gfamedia.org/images/980/download-icon-normal.png) no-repeat;
  display: inline-block;
  height: 12px;
  margin-right: 6px;
  position: relative;
  top: 1px;
  width: 12px;
}

.abtn-download-large{
  background: url(//www.gfamedia.org/images/980/download-icon-large.png) no-repeat;
  display: inline-block;
  height: 15px;
  margin-right: 7px;
  position: relative;
  top: 2px;
  width: 15px;
}

.abtn-icon {
  margin-left: 5px;
  display: inline-block;
  *display: inline; /* ie7 */
  zoom: 1;
}

.abtn-icon-cart {
  background: url(//www.gfamedia.org/images/glyphicon-cart-19x20.png) top left no-repeat;
  height: 20px;
  margin-bottom: -4px;
  width: 19px;
}


/* -- btn-app --------------------------- */

.btn-app,
.btn-app:visited,
.btn-app:hover,
.btn-app:active {
  background: #ececec;
  border: none;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
       -o-border-radius: 4px;
          border-radius: 4px;
  color: #3c3c3d;
  cursor: pointer;
  display: inline-block;
  font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
  padding: 5px 8px;
  position: relative;
  text-decoration: none;
  text-shadow: 1px 1px 0 #fff;

  *display: inline;
  zoom: 1;
}

.ie7 .btn-app {
  padding: 4px 6px;
}

.btn-app:hover {
  background: #333;
  color: #fff;
  text-shadow: none;
}

.btn-app-left,
.btn-app-left:visited,
.btn-app-left:hover,
.btn-app-left:active {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-app-right,
.btn-app-right:visited,
.btn-app-right:hover,
.btn-app-right:active {
  border-right: 1px solid #cacaca;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-app-blue,
.btn-app-blue:visited {
  background-color: #458cab;
  color: #fff;
  text-shadow: none;
}

.btn-app-blue:hover {
  background: #333;
}

.btn-app-grey,
.btn-app-grey:visited {
  background-color: #868686;
  color: #fff;
  text-shadow: none;
}

.btn-app-grey:hover {
  background: #333;
}

.btn-app-red,
.btn-app-red:visited {
  background: #95180b;
  color: #fff;
  text-shadow: none;
}

.btn-app-red:hover {
  background: #580f08;
}

.btn-app-green,
.btn-app-green:visited {
  background: #72974e;
  color:#fff;
  text-shadow:none;
}

.btn-app-green:hover {
  background: #333;
}

.btn-app-inactive {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  opacity: 0.7;
}

.btn-app-inactive:hover {
  background: #ececec;
  color: #3c3c3d;
  text-shadow: 1px 1px 0 #fff;
}

.btn-app-outline {
  -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.3);
  -moz-box-shadow: 0 0 1px rgba(0,0,0,0.3);
  box-shadow: 0 0 1px rgba(0,0,0,0.3);
}


/* -- btn-radio --------------------------- */

.btn-group-horizontal .btn {
  display: inline-block;
  *display: inline;
}

.btn-radio {
  background: none;
  border: 0;
  border-color: transparent;
  cursor: pointer;
  font-family: "Trebuchet MS", sans-serif;
  font-weight: bold;
  font-size: 18px;
  padding: 8px 10px;
  text-align: left;
}

.btn-radio span {
  background: url(../img/btn-radio.png) no-repeat;
  display: inline-block;
  height: 17px;
  margin-right: 10px;
  position: relative;
  top: 3px;
  width: 17px;
}

.ie7 .btn-radio span {
  display: inline;
  top: -3px;
  zoom: 1;
}

.btn-radio.active {
  border: 1px solid #e7e7e7;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background: #f6f4ee;
  padding: 7px 9px;
}

.btn-radio.active span {
  background-position: 0 -17px;
}

.input-rounded {
  border: 1px solid #e7e7e7;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background: #fff;
  font-size: 14px;
  padding: 5px 7px;
}

@media (max-width: 999px) {
  .input-rounded {
    font-size: 18px;
  }
}


/* -- btn-removex --------------------------- */

.btn-updatex,
.btn-removex {
  border: 0;
  background: transparent url(//www.gfamedia.org/images/fc2012-btn-remove.png) top left no-repeat;
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
  cursor: pointer;
  display: inline-block;
  height: 1px;
  overflow: hidden;
  padding-top: 16px;
  position: relative;
  top: 2px;
  width: 16px;

  *display: inline;
  zoom: 1;
}

.btn-updatex {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.ie7 button.btn-updatex,
.ie7 button.btn-removex {
  height: 16px;
  top: 0;
}

.btn-updatex:hover,
.btn-removex:hover {
  background-position: 0 -27px;
}


/* -- colors --------------------------*/

.color-black {
  color: #111;
}

.color-blue {
  color: #1481ae;
}

.color-brown {
  color: #9c805c;
}

.color-darkblue {
  color: #03305a;
}

.color-darkgreen {
  color: #205755;
}

.color-darkbrown {
  color: #362a13;
}

.color-grey {
  color: #484848;
}

.color-lightgrey {
  color: #868686;
}

.color-gold {
  color: #d18809;
}

.color-red {
  color: #95180b;
}

.color-white {
  color: #fff;
}

.color-inherit,
.color-inherit:hover,
.color-inherit:visited,
.color-inherit:active {
  color: inherit;
}

.bg-black {
  background-color: #111;
}

.bg-blue {
  background-color: #1481ae;
}

.bg-brown {
  background-color: #9c805c;
}

.bg-darkblue {
  background-color: #03305a;
}

.bg-darkgreen {
  background-color: #205755;
}

.bg-darkbrown {
  background-color: #362a13;
}

.bg-grey {
  background-color: #484848;
}

.bg-lightgrey {
  background-color: #868686;
}

.bg-gold {
  background-color: #d18809;
}

.bg-red {
  background-color: #95180b;
}

.bg-white {
  background-color: #fff;
}

/* -- wrw colors -- */

.color-wrw-blue {
  color: #3662a4;
}

.color-wrw-gold {
  color: #d18809;
}

.color-wrw-green {
  color: #205755;
}

.color-wrw-grey {
  color: #515151;
}

.color-wrw-pink {
  color: #ea3d76;
}

.color-wrw-tan {
  color: #f6f5f0;
}

.bg-wrw-blue {
  background-color: #3662a4;
}

.bg-wrw-gold {
  background-color: #d18809;
}

.bg-wrw-green {
  background-color: #205755;
}

.bg-wrw-grey {
  background-color: #515151;
}

.bg-wrw-pink {
  background-color: #ea3d76;
}

.bg-wrw-tan {
  background-color: #f6f5f0;
}


/* -- typography --------------------------*/

.gfafonts {
  color: #111;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.3;
}

h1, h2, h3 {
  color: #000;
  font-size: 30px;
  font-weight: normal;
  line-height: 1.2;
  margin-top: 0;
}

.heading {
  font-family: Palatino, "Palatino Linotype", Times, serif;
}

.h1, .heading-h1 {
  font-size: 30px;
  line-height: 36px;
}

.h2, .heading-h2 {
  font-size: 26px;
  line-height: 34px;
}

.h3, .heading-h3 {
  font-size: 18px;
  line-height: 24px;
}


.text-60 { font-size: 60px; }
.text-52 { font-size: 52px; }
.text-48 { font-size: 48px; }
.text-40 { font-size: 40px; }
.text-36 { font-size: 36px; }
.text-34 { font-size: 34px; }
.text-32 { font-size: 32px; }
.text-30 { font-size: 30px; }
.text-24 { font-size: 24px; }
.text-22 { font-size: 22px; }
.text-20 { font-size: 20px; }
.text-18 { font-size: 18px; }
.text-17 { font-size: 17px; }
.text-16 { font-size: 16px; }
.text-15 { font-size: 15px; }
.text-14 { font-size: 14px; }
.text-13 { font-size: 13px; }
.text-12 { font-size: 12px; }
.text-11 { font-size: 11px; }
.text-10 { font-size: 10px; }

@media (min-width: 768px) and (max-width: 999px) {
  .tablet-text-60 { font-size: 60px; }
  .tablet-text-52 { font-size: 52px; }
  .tablet-text-48 { font-size: 48px; }
  .tablet-text-40 { font-size: 40px; }
  .tablet-text-36 { font-size: 36px; }
  .tablet-text-34 { font-size: 34px; }
  .tablet-text-32 { font-size: 32px; }
  .tablet-text-30 { font-size: 30px; }
  .tablet-text-24 { font-size: 24px; }
  .tablet-text-22 { font-size: 22px; }
  .tablet-text-20 { font-size: 20px; }
  .tablet-text-18 { font-size: 18px; }
  .tablet-text-17 { font-size: 17px; }
  .tablet-text-16 { font-size: 16px; }
  .tablet-text-15 { font-size: 15px; }
  .tablet-text-14 { font-size: 14px; }
  .tablet-text-13 { font-size: 13px; }
  .tablet-text-12 { font-size: 12px; }
  .tablet-text-11 { font-size: 11px; }
  .tablet-text-10 { font-size: 10px; }
}

@media (max-width: 767px) {
  .mobile-text-60 { font-size: 60px; }
  .mobile-text-52 { font-size: 52px; }
  .mobile-text-48 { font-size: 48px; }
  .mobile-text-40 { font-size: 40px; }
  .mobile-text-36 { font-size: 36px; }
  .mobile-text-34 { font-size: 34px; }
  .mobile-text-32 { font-size: 32px; }
  .mobile-text-30 { font-size: 30px; }
  .mobile-text-24 { font-size: 24px; }
  .mobile-text-22 { font-size: 22px; }
  .mobile-text-20 { font-size: 20px; }
  .mobile-text-18 { font-size: 18px; }
  .mobile-text-17 { font-size: 17px; }
  .mobile-text-16 { font-size: 16px; }
  .mobile-text-15 { font-size: 15px; }
  .mobile-text-14 { font-size: 14px; }
  .mobile-text-13 { font-size: 13px; }
  .mobile-text-12 { font-size: 12px; }
  .mobile-text-11 { font-size: 11px; }
  .mobile-text-10 { font-size: 10px; }
}

.text-center,
.text-centered {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-bold {
  font-weight: bold;
}

.text-light {
  font-weight: 300;
}

.text-semibold {
  font-weight: 600;
}

.text-italic {
  font-style: italic;
}

.text-smallcaps {
  font-variant: small-caps;
}

.text-indent p {
  margin-bottom: 0;
  text-indent: 20px;
}

.tk-myriad-pro.text-large {
  line-height: 1.34;
}

.tk-myriad-pro strong {
  font-weight: 600;
}

.text-palatino {
  font-family: Palatino, "Palatino Linotype", Georgia, Times, serif;
}

.unlink, .unlink:visited, .unlink:hover, .unlink:active {
  color: inherit;
  text-decoration: none;
}

.ie7 .unlink, .ie7 .unlink:visited, .ie7 .unlink:hover, .ie7 .unlink:active {
  color: #000;
}

.float-right {
  float: right;
}


/* -- wells ----------------------------- */

.awell {
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  padding: 20px;
}

.awell-tan {
  background: #eeeee7;
  -moz-box-shadow: inset 0 0 12px rgba(100,100,100,0.30);
  -webkit-box-shadow: inset 0 0 12px rgba(100,100,100,0.30);
  box-shadow: inset 0 0 12px rgba(100,100,100,0.30);
}

a:hover .awell-tan {
  background-color: #dfdbd6;
}

.awell-light {
  background: #fbfbfb;
  -moz-box-shadow: inset 0 0 12px rgba(100,100,100,0.30);
  -webkit-box-shadow: inset 0 0 12px rgba(100,100,100,0.30);
  box-shadow: inset 0 0 12px rgba(100,100,100,0.30);
}

a:hover .awell-light {
  background-color: #dfdbd6;
}

.ie7 .awell-light,
.ie8 .awell-light {
  background: #eee;
}

.awell-wrw {
  background: #faf8f5;
  -moz-box-shadow: inset 0 0 6px rgba(100,100,100,0.30);
  -webkit-box-shadow: inset 0 0 6px rgba(100,100,100,0.30);
  box-shadow: inset 0 0 6px rgba(100,100,100,0.30);
}

a:hover .awell-wrw{
  background-hover: #dfdbd6;
}

.awell-flat {
  background: #fbfbfb;
}


/* -- lists ----------------------------- */

.list-dot {
  list-style-type: disc;
  margin: 0;
  padding: 0;
}

.list-pad li,
.list-padding li {
  margin-bottom: 20px;
}

.list-pad div,
.list-padding div {
  margin-left: 10px;
}


/* -- html elements ----------------------------- */

fieldset {
  padding: 0;
}

hr {
  border: 0;
  border-top: 1px solid #ccc;
  display: block;
  height: 1px;
  margin: 10px 0;
  padding: 0;
  text-align: left;
}

.hr {
  border: 0;
}

.hr-fade {
  background: url(../img/hr-fade.png) repeat-x;
  height: 6px;
  margin: 10px;
}

.hr-grey {
  background-color: #999999;
  border-color: #999999;
  color: #999999;
}

.hr-orange {
  background-color: #daa03a;
  border-color: #daa03a;
  color: #daa03a;
}

.icon-play-blue {
  background: url(../img/icon-play-blue.png) no-repeat;
  display: inline-block;
  height: 42px;
  width: 42px;

  *display: inline;
  zoom: 1;
}

.icon-play-blue:hover {
  background-position: -42px 0;
  cursor: pointer;
}

pre {
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-family: Consolas, Menlo, "Liberation Mono", Courier, monospace;
  font-size: 13px;
  line-height: 19px;
  overflow: auto;
  margin: 20px 0;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
}

pre code {
  display: block;
  padding: 6px 10px;
}

.bullet-pinkdot {
  background: url(//www.gfamedia.org/images/bullet-pinkdot.png) no-repeat;
  color: #fff;
  display: inline-block;
  height: 49px;
  line-height: 49px;
  text-align: center;
  width: 49px;
}

.box-darkgrey-subtle {
  background: url(../img/bg-grey-subtle.png);
  color: #fff;
  padding: 10px;
}

.order-receipt-350 {
  background: #fafafa url(//www.gfamedia.org/images/wrw-receipt-top.jpg) top left no-repeat;
}

.order-receipt-350-inner {
  background: url(//www.gfamedia.org/images/wrw-receipt-bottom.jpg) bottom left no-repeat;
  padding: 30px 20px 20px 35px;
}

.hashlink-hidden {
  display: none;
}

.hashlink-hidden:target {
  display: block;
}


/* -- nav sitesection ----------------*/

.nav-centered {
  float: left;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.nav-centered ul {
  float: left;
  position: relative;
  left: 50%;
  text-align: center;
}

.nav-centered li {
  display: block;
  float: left;
  position: relative;
  right: 50%;
}

.nav-sitesection {
  margin: 0;
  position: relative;
  z-index: 100;
}

.nav-sitesection > ul {
  margin: 0;
  padding: 0;
}

.nav-sitesection > li {
  margin: 0;
  padding: 0;
}

.nav-lefty > ul > li {
  display: block;
  float: left;
  min-height: 25px;
}

.nav-sitesection .right {
  float: right;
}

.nav-sitesection-link {
  display: block;
  padding: 0 15px;
}

.nav-sitesection-link,
.nav-sitesection-link:visited,
.nav-sitesection-link:hover,
.nav-sitesection-link:active {
  color: #a79271;
  font-size: 18px;
  text-decoration: none;
}

.nav-sitesection-link:hover {
  background: #f9f9f6;
  color: #233d4a;
}

.active .nav-sitesection-link {
  background: #f9f9f6;
  border-bottom: 1px solid #233d4a;
  color: #233d4a;
}

.nav-sitesection-divider {
  background: url(../img/nav-sitesection-divider-bg.png) left top repeat-x;
  height: 6px;
}

.nav { position: relative; }
.nav:before, .nav:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.nav:after { clear: both; }
.nav { zoom: 1; }

.nav-sitesection-dropdown {
  margin-top: -10px;
}

.nav-sitesection-link-mobile {
  display: none;
}


/* -- form defaults ----------------*/

input {
  font-size: inherit;
}

textarea {
  font-size: inherit;
  height: 150px;
  overflow: auto;
  vertical-align: top;
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  height: auto;
  padding: 0;
  margin: 3px 5px 3px 0;
  *margin-top: 0; /* IE7 */
  line-height: normal;
  cursor: pointer;
  /*background-color: transparent;*/
  border: 0 \9; /* IE9 and down */
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}


/* -- focus states -- */

.form input,
.form textarea {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
      -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
       -o-transition: border linear 0.2s, box-shadow linear 0.2s;
          transition: border linear 0.2s, box-shadow linear 0.2s;
}

.form input:focus,
.form textarea:focus {
  outline: 0;
  outline: thin dotted \9; /* IE6-9 */
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}


/* -- form ----------------*/

.form input,
.form textarea {
  background: #f7f7f7;
  color: #454545;
  border: 1px solid #dadada;
  -webkit-box-shadow: inset 0 0 4px rgba(218, 218, 218, 1.0);
     -moz-box-shadow: inset 0 0 4px rgba(218, 218, 218, 1.0);
       -o-box-shadow: inset 0 0 4px rgba(218, 218, 218, 1.0);
          box-shadow: inset 0 0 4px rgba(218, 218, 218, 1.0);
  -webkit-border-radius: 4px;
      moz-border-radius: 4px;
       -o-border-radius: 4px;
          border-radius: 4px;
  padding: 5px 5px 4px;
  font-family: "Myriad Pro", Arial, sans-serif;
  font-size: 16px;
}

.form input:focus,
.form textarea:focus {
  outline: 0;
  outline: thin dotted \9; /* IE6-9 */
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

.form input:focus,
.form textarea:focus {
  background: #fff;
  border-color: #aaa;
}

.form label {
  padding: 3px 0;
}

.form select {
  border: 1px solid #dadada;
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 4px 0;
  position: relative;
  vertical-align: middle;
}

.ie7 .form select {
  position: relative;
  top: 6px;
}

.ie8 .form select {
  height: auto;
  line-height: inherit;
}

.form-error {
  color: #95180b;
}

.form-formerror {
  border: 1px solid #e7b0b0;
  background: #f6f6f6;
  padding: 10px;
}

.form-rowerror input,
.form-rowerror textarea {
  border: 1px solid #e99595;
  -webkit-box-shadow: 0 0 4px rgba(233, 149, 149, 1.0),
                inset 0 0 4px rgba(218, 218, 218, 1.0);
     -moz-box-shadow: 0 0 4px rgba(233, 149, 149, 1.0),
                inset 0 0 4px rgba(218, 218, 218, 1.0);
          box-shadow: 0 0 4px rgba(233, 149, 149, 1.0),
                inset 0 0 4px rgba(218, 218, 218, 1.0);
}


/* -- form-sidehat ----------------*/

.form-sidehat input[type=text],
.form-sidehat textarea {
  border: 1px solid #ccc;
  padding: 5px 5px 4px;
  margin: 0;
  font-family: "Myriad Pro", Arial, sans-serif;
  font-size: 90%;
}

.form-sidehat input:focus,
.form-sidehat textarea:focus {
  border-color: #aaa;
}

.form-sidehat label {
  display: block;
  float: left;
  padding: 5px 10px 0 0;
  text-align: right;
}

.form-sidehat .row-input {
  float: left;
}

.form-sidehat .row-input-error {
  background: url(//www.gfamedia.org/images/formicon-x.png) right center no-repeat;
  padding-right: 33px;
}

.form-sidehat-rowerror input,
.form-sidehat-rowerror textarea {
  border: 1px solid #e99595;
}

.form-sidehat .row-error-message {
  color: #b40707;
  margin-bottom: 5px;
  margin-top: 20px;
}


/* -- inputs ----------------*/

.input-darkborder {
  background: #fff;
  border: 1px solid #000;
  padding: 3px 2px;
}

.input-pretty {
  border: 1px solid #c9c9c9;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: inset 0 0 9px 1px rgba(0,0,0,0.15);
  -o-box-shadow: inset 0 0 9px 1px rgba(0,0,0,0.15);
  -webkit-box-shadow: inset 0 0 9px 1px rgba(0,0,0,0.15);
  box-shadow: inset 0 0 9px 1px rgba(0,0,0,0.15);
  font-size: 18px;
  padding: 3px 6px;
}

.form .row-input-radio ul {
  margin: 0;
  padding: 0;
}

.form .row-input-radio input {
  margin: 0;
  margin-left: 10px;
  margin-top: -3px;
  vertical-align: middle;
}

.form .row-input-radio-inline li {
  display: inline-block;
}

.form .row-input-radio-inline ul label {
  font-size: 0.8em;
  width: auto;
}


/* -- nav-clickdown --------------------- */

.nav-clickdown {
  position: relative;
  z-index: 9999;
  zoom: 1;
}

.nav-clickdown-sectionlink,
.nav-clickdown-sectionlink:visited,
.nav-clickdown-sectionlink:hover,
.nav-clickdown-sectionlink:focus {
  color: #2c353c;
  display: block;
  font-family: Verdana, sans-serif;
  font-size: 13px;
  padding-bottom: 6px;
  padding-top: 6px;
  text-align: center;
  text-decoration: none;
}

.nav-clickdown-sectionlink::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  border-color: #9ba9c8 transparent transparent transparent;
  position: relative;
  top: 12px;
  left: 3px;
}

.nav-clickdown-sectionlink.no-dropdown::after {
  display: none;
}

@media (max-width: 767px) {
  .nav-clickdown-sectionlink::after {
    top: 14px;
  }
}

.nav-clickdown-sectionlink:hover {
  text-decoration: underline;
}

.nav-clickdown-sectionlink.unlink:hover {
  text-decoration: none;
}

.no-js .nav-clickdown-section:hover .nav-clickdown-linkblock {
  display: block;
}

.nav-clickdown-linkblock {
  background: #f1f3f5;
  border: 2px solid #fff;
  display: none;
  zoom: 1;
}

.ie7 .nav-clickdown-linkblock,
.ie8 .nav-clickdown-linkblock {
  border: 2px solid #ccc;
}

.nav-clickdown-section:target .nav-clickdown-sectionlink,
.nav-clickdown-section.active .nav-clickdown-sectionlink {
  text-decoration: underline;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.25);
}

.nav-clickdown-section:target .nav-clickdown-linkblock,
.nav-clickdown-section.active .nav-clickdown-linkblock,
.nav-clickdown-section:hover .nav-clickdown-linkblock {
  display: block;
}

.ie8 .nav-clickdown-section.active .nav-clickdown-linkblock {
  display: block; /* cries */
}

.nav-clickdown-linklist {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.nav-clickdown-link,
.nav-clickdown-link:visited,
.nav-clickdown-link:hover,
.nav-clickdown-link:active,
.nav-clickdown-linklist a,
.nav-clickdown-linklist a:visited,
.nav-clickdown-linklist a:hover,
.nav-clickdown-linklist a:active {
  color: #434343;
  display: block;
  font-family: Arial;
  font-size: 13px;
  padding: 1px 0;
  text-decoration: none;
  text-shadow: 1px 1px 1px rgba(200,200,200,0.15);
}

.nav-clickdown-link:hover,
.nav-clickdown-linklist a:hover {
  text-decoration: underline;
}

.nav-clickdown-subheader {
  color: #333b3f;
  font-family: Georgia, Times, "Times New Roman", serif;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 6px;
}

.nav-clickdown-shadowstrip {
  background: url(../img/nav-clickdown-shadowstrip.png) center center no-repeat;
  background-size: contain;
  height: 8px;
}

.nav-clickdown-mobile {
  display: none;
}

.nav-clickdown-linkblock {
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;

  -moz-box-shadow:
    0 0 3px 1px rgba(0,0,0,0.15),
    0 3px 16px 3px rgba(0,0,0,0.25);
  -webkit-box-shadow:
    0 0 3px 1px rgba(0,0,0,0.15),
    0 3px 16px 3px rgba(0,0,0,0.25);
  -o-box-shadow:
    0 0 3px 1px rgba(0,0,0,0.15),
    0 3px 16px 3px rgba(0,0,0,0.25);
  box-shadow:
    0 0 3px 1px rgba(0,0,0,0.15),
    0 3px 16px 3px rgba(0,0,0,0.25);

  margin-top: 0px;
  padding: 10px 15px;
}

.nav-clickdown-arrow {
  background: transparent url(../img/nav-clickdown-arrow.png);
  height: 15px;
  width: 18px;
  position: absolute;
  top: -15px;
}

.ie7 .nav-clickdown-arrow {
  display: none;
}

.nav-clickdown-linkblock {
  position: absolute;
}

.nav-clickdown-section {
  float: left;
  position: relative;
}


/* -- btn-clickdown --------------------- */

.btn-clickdown {
  position: relative;
}

.no-js .btn-clickdown:hover .btn-clickdown-list {
  display: block;
}

.btn-clickdown.active .btn-clickdown-list {
  display: block;
}

.btn-clickdown-link,
.btn-clickdown-link:visited,
.btn-clickdown-link:hover,
.btn-clickdown-link:active,
.btn-clickdown-link:focus {
  border-radius: 6px;
  color: #fff;
  display: block;
  margin-bottom: -5px;
  padding: 10px 15px;
  position: relative;
  text-align: center;
  text-decoration: none;
  z-index: 2;
}

.btn-clickdown-link span {
  background: url(../img/btn-clickdown-arrow.png) top left no-repeat;
  display: inline-block;
  height: 10px;
  margin-left: 3px;
  position: relative;
  top: -1px;
  width: 13px;
}

.ie7 .btn-clickdown-link span {
  display: inline;
  zoom: 1;
  top: -5px;
}

.btn-clickdown-list {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  display: none;
  margin: 0 auto;
  padding: 10px 0;
  position: absolute;
  z-index: 1;
  width: 100%;
}

.btn-clickdown-list li {
  margin: 0;
  padding: 0;
}

.btn-clickdown-list a,
.btn-clickdown-list a:visited
.btn-clickdown-list a:hover
.btn-clickdown-list a:active {
  color: #fff;
  display: block;
  margin: 3px 5px;
  text-decoration: none;
}

.btn-clickdown-list span {
  border-radius: 3px;
  display: inline-block;
  padding: 3px 5px;

  *display: inline; /* ie7 */
  zoom: 1;
}

.btn-clickdown-blue .btn-clickdown-list a:hover span,
.btn-clickdown-blue .btn-clickdown-list a:active span,
.btn-clickdown-blue .btn-clickdown-list a:focus span,
.btn-clickdown-blue .active span {
  background: #464e52;
}


.btn-clickdown-blue .btn-clickdown-link {
  background: #8697a6 url(../img/btn-clickdown-blue-bg.png) top left repeat-x;
  background-size: contain;
  font-size: 18px;
}

.btn-clickdown-blue .btn-clickdown-list {
  background-color: #728596;
}


/* -- positioning -- */

.position-right {
  float: right;
}

/* -- animation -------------- */
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
    opacity: 0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
 
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}

.ie9 .fade-in {
  opacity: 1;
}

.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}
 
.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
}
 
.fade-in.three {
-webkit-animation-delay: 2.0s;
-moz-animation-delay: 2.0s;
animation-delay: 2.0s;
}

/* -- brightcove responsive -- */

.brightcove-responsive-wrapper {
  height: 0;
  position: relative;
}

.brightcove-responsive-wrapper div,
.brightcove-responsive-wrapper embed, 
.brightcove-responsive-wrapper object,
.brightcove-responsive-wrapper .BrightcoveExperience {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.brightcove-ratio-widescreen {
  padding-bottom: 56.25%;
}

.brightcove-ratio-4-3 {
  padding-bottom: 75%;
}

.ie7 .brightcove-responsive-wrapper {
  height: auto;
  padding-bottom: 0;
}

.ie7 .brightcove-responsive-wrapper object,
.ie7 .brightcove-responsive-wrapper .BrightcoveExperience {
  height: 100%;
  position: relative;
  width: 100%;
}


/* -- no js visibility -- */

.visible-no-js { display: none; }
.no-js .visible-no-js { display: inherit; }


/* -- dif block feature items -- */

.dif-item {
  margin-bottom: 20px;
}

.dif-item:hover img {
  border: 4px solid #fff;
}

.ie7 .dif-item:hover img {
  border: none;
}

.dif-label {
  background: #000; /* ie */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);

  background: rgba(0,0,0,0.6);
  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -moz-border-top-right-radius: 4px;
  -moz-border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  color: #fff;
  font-family: "Myriad Pro", Arial, sans-serif;
  font-size: 22px;
  line-height: 1.15;
  margin-top: 20px;
  padding: 5px 10px 2px 15px;
  position: absolute;
}

.dif-label-small {
  font-size: 18px;
}

a:hover .dif-label {
  background: #000;
}

a:hover .dif-icon {
  color: #fff;
}

.dif-icon {
  color: #ddd;
  font-size: 13px;
  position: relative;
  top: -2px;
}

@media (max-width: 767px) {
  .dif-item {
    margin: 0 auto;
    padding-bottom: 10px;
  }
}


/* -- international -- */

.show-ca { display: none; }
.site-ca .hide-ca { display: none; }
.site-ca .show-ca { display: inherit; }

.show-gb { display: none; }
.site-gb .hide-gb { display: none; }
.site-gb .show-gb { display: inherit; }

.show-us { display: none; }
.site-us .hide-us { display: none; }
.site-us .show-us { display: inherit; }

.show-za { display: none; }
.site-za .hide-za { display: none; }
.site-za .show-za { display: inherit; }


/* -- checkout -- */

.checkout-nav-international ul {
  margin: 0;
  padding: 0;
}

.checkout-nav-international li {
  list-style-type: none;
  padding: 5px 10px;
}

.checkout-nav-international a {
  text-decoration: none;
}

.checkout-nav-international a:hover {
  text-decoration: underline;
}

.checkout-nav-international img {
  margin-right: 5px;
}

/* -- shadows -- */

#nav-cover {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: none;
  background-color: #000;
  opacity: 0.6;
  transform: translate3d(0px, 0px, 0px);
  z-index: 1000;
}

.bg-shadow-light {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.2);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
    background-size: cover;
}

.bg-shadow {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.4);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
    background-size: cover;
}

.bg-shadow-medium {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.65);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

.bg-shadow-dark {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.8);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}