/**
 * @file
 * The CSS file for the age gate layer.
 *
 */


/*************
*  AGE GATE  *
*************/

#agegate {
  background: url(../img/white90pc.png);
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 800;
}

  #agegate .inner {
    margin: 10px auto 0;
    text-align: center;
    width: 450px;
  }

  @media all and (max-width: 460px) {
    #agegate .inner {
      margin: 10px auto 0;
      text-align: center;
      width: 100%;
    }
  }

    #agegate .tips {
      color: #01224D;
      letter-spacing: 0.1em;
      line-height: 160%;
      margin: 15px auto;
      width: 360px;
    }

    #agegate .separator {
      margin: 20px 0 5px;
    }

    #agegate .date {
    }

    #agegate .age-wrapper {
      margin: 0 auto;
      overflow: hidden;
      width: 245px;
    }

      #agegate .age-wrapper .form-item {
        float: left;
      }

      #agegate label {
        color: #01224D;
        display: block;
        font-family: "P22CezanneAltTwo";
        font-size: 32px;
        margin-top: 20px;
      }

      #agegate input {
        border: 1px solid #d3dfdb;
        color: #01224D;
        font-family: "Georgia",Times New Roman,Times,serif;
        font-size: 16px;
        line-height: 16px;
        padding: 10px 12px;
        text-align: center;
        width: 45px;
      }

      #agegate input.two {
        margin: 0 16px 0 0;
      }

      #agegate input.year {
        margin: 0;
      }

      #agegate input.red {
        border: 1px solid #bf0000;
      }

      .age-wrapper .placeholder {
        color: #01224D;
        font-family: "Georgia",Times New Roman,Times,serif;
        font-size: 0.8em;
        font-style: normal;
        font-weight: 100;
        letter-spacing: 0.1em;
        line-height: 150%;
        padding-left: 0;
      }

      /* Placeholder style for Firefox, Chrome, Safari, IE10+ */
      .age-wrapper input::-webkit-input-placeholder { color: #01224D; font-family: "Georgia",Times New Roman,Times,serif; font-size: 0.8em; font-style: normal; font-weight: 100; letter-spacing: 0.1em; line-height: 150%; padding-left: 0; }
      .age-wrapper input::-moz-placeholder { color: #01224D; font-family: "Georgia",Times New Roman,Times,serif; font-size: 0.8em; font-style: normal; font-weight: 100; letter-spacing: 0.1em; line-height: 150%; padding-left: 0; } /* firefox 19+ */
      .age-wrapper input:-ms-input-placeholder { color: #01224D; font-family: "Georgia",Times New Roman,Times,serif; font-size: 0.8em; font-style: normal; font-weight: 100; letter-spacing: 0.1em; line-height: 150%; padding-left: 0; } /* ie */
      .age-wrapper input:-moz-placeholder { color: #01224D; font-family: "Georgia",Times New Roman,Times,serif; font-size: 0.8em; font-style: normal; font-weight: 100; letter-spacing: 0.1em; line-height: 150%; padding-left: 0; }

      #agegate label.country {
        display: block;
        margin: 40px 0 0;
      }

      #agegate .country-wrapper {
        border: 1px solid #d3dfdb;
        margin: 0 auto;
        width: 380px;
      }

      #agegate .country-wrapper.red {
        border: 1px solid #bf0000;
      }

        #agegate select {
          background: transparent;
          border: 0 none;
          display: block;
          font-family: "Georgia",Times New Roman,Times,serif;
          font-size: 16px;
          letter-spacing: 0.2em;
          margin: 0 0 0 16px;
          padding: 15px 10px;
          text-transform: uppercase;
          width: 400px;
        }

        #agegate .sbOptions {
          border: 1px solid #d3dfdb;
          border-top: transparent;
          left: -1px;
          max-height: none !important;
          min-height: 0px;
          overflow-y: visible;
          top: 40px !important;
        }

        #agegate select:focus {
          outline: 0 none;
        }

      #agegate .confirm {
        color: #01224D;
        font-size: 0.8em;
        letter-spacing: 0.1em;
        line-height: 160%;
        margin: 15px auto;
        width: 380px;
      }

      #agegate .confirm a {
        color: #01224D;
        text-decoration: underline;
      }

      #agegate .confirm a:hover {
        color: #bf0000;
      }

      @media all and (max-width: 709px) {
        #agegate .confirm a {
          color: #bf0000;
        }
      }

      #agegate .error {
        background-color: transparent;
        color: #ce112e;
        font-size: 1.3em;
        font-style: italic;
        margin-bottom: 20px;
        margin-top: 20px;
        text-transform: uppercase;
      }

      #agegate input[type=submit] {
        background: #01224D;
        border: none;
        color: #EEE;
        cursor: pointer;
        font-family: "Georgia",Times New Roman,Times,serif;
        font-size: 1em;
        height: 40px;
        letter-spacing: 0.2em;
        text-align: center;
        text-transform: uppercase;
        width: 300px;
      }

      #agegate input[type=submit]:hover {
        background: #012B63;
      }

@media all and (max-width: 460px) {
  #agegate select {
    width: 105%;
  }

  #agegate .country-wrapper {
    width: 90%;
  }

  #agegate .confirm {
    width: 100%;
  }

  #agegate .separator {
    width: 90%;
    margin: auto;
    margin-top: 10px;
  }

    #agegate .separator img {
      height: auto;
      width: 100%;
    }

  #agegate .tips {
    width: 90%;
  }

  #agegate .sbHolder {
    width: 100%;
  }

  #agegate .sbSelector {
    width: auto;
  }

  #agegate .sbOptions {
    width: inherit;
  }

  #agegate input[type=submit] {
    width: 90%;
  }
}


@media all and (max-width: 270px) {
  #agegate .age-wrapper input {

  }
}

#agegate .footer {
  background: url(../img/f5f5f5.png) repeat;
  margin-top: 40px;
  width: 100%;
}

#agegate .footer .inner-f {
  border-top: 1px solid #DEDEDE;
  border-bottom: 1px solid #DEDEDE;
  padding: 8px 0px;
  text-align: center;
  width: 100%;
}

#agegate .footer .inner-f p {
  color: #01224d;
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.05em;
  margin: 10px auto;
  width: 800px;
}

@media all and (max-width: 800px) {
  #agegate .footer .inner-f p {
    width: 90%;
    text-align: justify;
  }
}