/**
*= require client/jamServer
*= require client/jamServer
*= require dialogs/banner
*/

$base-font-family: 'arial', sans-serif;

$large-font-size: 1.5rem;
$standard-font-size: 1rem;
$smaller-font-size: .8rem;
$small-font-size: .7rem;
$input-font-size: 1.0rem;
$amazon-btn-line-height:160%;
$submit-button-width:9rem;
$checkbox-label-width:14rem;
$create-account-width:10rem;
$start-promo-btn-width:13rem;
html,
body {
 min-height: 100%;
  overflow:auto;
}

body {
  min-height: 100%;
  margin: 0;
  padding: 0;

  font-size: 16px;
  line-height: 1.2;
}


#basic-container {
  width: 100%;
  min-height: 100%;
}

.wrapper {
  width: 100%;
  min-height: 100%;
}

html {
  font-size: 100%;
}

@media (min-width:1px) and (max-width: 1199px) {
  html {
    font-size: 100%;
  }
  .code-input {
    max-width:$submit-button-width;
  }
  .code-input input {
    font-size: $standard-font-size;
  }
  .code-instructions {
    width:$submit-button-width;
  }

  .text-input input {
    width:$create-account-width;
  }
  .select-input select{
    width:$create-account-width;
  }

  .instructions.create-account {
    margin-top:1rem;
    text-align:justify;
  }
  .success-msg {
    margin-top: 1rem;
  }
  .logo-holder.create-account {
    margin-top:2rem;
  }
  .code-form.create-account {
    margin-top:1rem;
  }
  .powered-by.create-account {
    margin-top:0.5rem;
  }
}

@media (min-width: 1200px) {
  html {
    font-size: 100%;
  }
  .code-input {
    max-width:$submit-button-width;
  }
  .code-input input {
    font-size: $standard-font-size;
  }
  .code-instructions {
    width: 35%;
  }

  .text-input input {
    width:$create-account-width;
  }
  .select-input select {
    width:$create-account-width;
  }
  .success-msg {
    margin-top: 2rem;
  }
  .instructions.create-account {
    text-align:justify;
  }
}

body {
  font-family: $base-font-family;
}

p {
  margin:.5rem 0;
}
p:first-child {
  margin-top:0;
}
p.last-child {
  margin-bottom:0;
}
#root {
  min-height: 100%;

  align-items: center;
  //justify-content: center;
  min-width: 50%;
  display: flex;
  flex-direction: column;
}

div.root {
  flex-grow: 1;
  overflow: auto;
}

.logo-holder {
  margin-top:3rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 50%;
  max-width: 300px;
  min-width:0;
  min-height:0;
  img {
    width: 100%;
  }

}

.steps {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 35%;
  max-width: 200px;
  img {
    width: 100%;
  }
}

.instructions {
  font-size: $standard-font-size;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 90%;
  max-width: 400px;
  text-align: center;

  &.second {
    margin-top:1rem;
  }
}

.header {
  font-size: $large-font-size;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 90%;
  max-width: 700px;
  text-align: center;
}

.splash {
  width:33%;
  position:absolute;
  top:0;
  right:1rem;

  display:flex;
  align-items:center;
  height:100%;
  flex-direction:row;
  img {
    width:100%;
  }
}

.code-form {
  font-size: $standard-font-size;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  max-width: 1200px;
  text-align: center;
}

.code-prompt {
  position: absolute;
  text-align: right;
  font-size: $smaller-font-size;
  height:$standard-font-size * 2;
  line-height:$standard-font-size * 2;
}

label.promo-code {
  width: 6rem;
  margin-left:-6.5rem;
}

.code-input {

  width: 100%;
  position:relative;

  input {
    font-size: $input-font-size;
    text-transform: uppercase;
    padding: 6px 3px;
    box-sizing: border-box;
    text-align: center;
    border-radius:3px;
    border-width:2px;
    min-width:$submit-button-width;
    color:#555;
    font-weight:bold;
    width:100%;
  }
}

.code-hint-row {
  font-size: $standard-font-size;
  margin-top: .1rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  max-width: 1200px;
  text-align: center;
}

.code-instructions {
  font-size: $small-font-size;
}

.submit-row {
  font-size: $standard-font-size;

  margin-top: 2rem;
  display: flex;
  align-items: center;
  flex-direction: column;

  width: 100%;
  max-width: 1200px;
  text-align: center;

  &.create-account {
    margin-top:1rem;
  }

  &.second {
    margin-bottom:2rem;
  }
}


.summary-row {
  font-size: $standard-font-size;

  margin-top: 1rem;

  width: 100%;
  max-width: 1200px;
  padding:.5rem 2rem 0;
  display:flex;
  align-items: center;
  flex-direction: column;
}

.jamkazam-summary {
  position:relative;
  max-width:700px;
  ul {
    width:50%;
    margin:0;
    padding:0 0 0 2rem;
  }
  li {
    margin-bottom:.5rem;
  }
  img {
    float:right;
    width:33%;
    margin-right:1rem;
    margin-left:1rem;
  }
}

.submit {
  color: #111;
  text-decoration: none;
  background-color: transparent;
  border: 0;
  display: block;
  font-size: $standard-font-size;
  line-height: $amazon-btn-line-height;
  outline: 0;
  text-align: center;
  white-space: nowrap;

  &.promo-start {
    width:$start-promo-btn-width;
  }
  &.submit-code {
    width:$submit-button-width;
  }
  &.create-account {
    width: $create-account-width;
  }
}

.amazon-a-button-text {
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: 0;
  display: block;
  font-size: $standard-font-size;
  line-height: $amazon-btn-line-height;
  margin: 0;
  outline: 0;
  padding: 0 10px 0 11px;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
  text-decoration: none;
  &:visited, &:link, &:active {
    color:black;
  }
}

.amazon-button-stack {

}

.amazon-button {
  width: 100%;
  background: #f0c14b;
  border-color: #a88734 #9c7e31 #846a29;
  color: #111;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  cursor: pointer;
  display: inline-block;
  padding: 0;
  text-align: center;
  text-decoration: none !important;
  vertical-align: middle;
  box-sizing: border-box;;
  &:hover {
    border-color: darken(#a88734, 10%) darken(#9c7e31, 10%) darken(#846a29, 10%) ;
  }
  &:active {
    border-color: #e77600;
    box-shadow: 0 0 3px 2px rgba(2281, 121, 17, .5);
  }
}

.amazon-button-inner {
  display: block;
  position: relative;
  overflow: hidden;
  height: $amazon-btn-line-height;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset;
  border-radius: 2px;
  background: linear-gradient(to bottom, #f7dfa5, #f0c14b);

  &:hover {
    background: linear-gradient(to bottom, darken(#f7dfa5, 7%), #f0c14b);
  }

  &:active {
    background: #f0c14b;
  }
}

.learn-more {
  font-size: $standard-font-size;
  margin-top: 1.0rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 90%;
  max-width: 400px;
  text-align: left;

  h2 {
    margin:0;
    text-align:left;
    width:100%;
  }
}

h2.second-ready {
  margin-top:1rem;
}
.powered-by {
  font-size: $smaller-font-size;
  margin-top: 1.0rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  max-width: 1200px;
  text-align: center;

  .code-prompt {
    width:24%;
  }
  p {
    width: 55%;
    max-width: 600px;
  }

  img {
    width: 6rem;
    margin-left: 1px;
    vertical-align: middle;

  }
}


/** step 2 */

.success-msg {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 85%;
  font-weight:bold;
  white-space: nowrap;
  text-align:center;
}

.email-row {
  font-size: $standard-font-size;

  margin-top: 1rem;
  display: flex;
  align-items: center;
  flex-direction: column;

  width: 100%;
  max-width: 1200px;
  text-align: center;
}

.password-row {
  font-size: $standard-font-size;

  margin-top: 1rem;
  display: flex;
  align-items: center;
  flex-direction: column;

  width: 100%;
  max-width: 1200px;
  text-align: center;
}

.instrument-row {
  font-size: $standard-font-size;

  margin-top: 1rem;
  display: flex;
  align-items: center;
  flex-direction: column;

  width: 100%;
  max-width: 1200px;
  text-align: center;
}


.terms-row, .under13-row {
  font-size: $standard-font-size;

  margin-top: 1rem;
  display: flex;
  align-items: center;
  flex-direction: column;

  width: 100%;
  max-width: 1200px;
  text-align: center;
}

.under13-row {
  margin-top:.5rem;
}

.text-input {
  width:$create-account-width;
  max-width: 400px;
  position:relative;


  input {

    font-size: $input-font-size;
    padding: 6px 3px;
    box-sizing: border-box;
    text-align: left;
    border-radius:3px;
    border-width:2px;
  }

}

.select-input {
  width:$create-account-width;
  max-width: 400px;
  position:relative;


  select {

    font-size: $input-font-size;
    padding: 6px 3px;
    box-sizing: border-box;
    text-align: left;
    border-radius:3px;
    border-width:2px;
  }

}

input[type=submit] {
  display:none;
}

.checkbox-input {
  font-size:$small-font-size;
  width:$create-account-width;
  /**display:flex;
  align-items: flex-start;
  flex-direction: row;
  */
  input {
    float:left;
    margin-bottom:1rem;
  }
  label {
    min-width:$checkbox-label-width;
    display:block;
    text-align:left;
     a{
       white-space: nowrap;
     }
  }
}


label.first {
  width:6rem;
  margin-left:-6.5rem;
}


label.email {
  width:6rem;
  margin-left:-6.5rem;
}

label.password {
  width:8rem;
  margin-left:-8.5rem;
}

label.instrument-select {
  width:8rem;
  margin-left:-8.5rem;
}

.error {
  color:red;
  //text-transform: uppercase;
  width:100%;
  position:absolute;
  margin-top:-$standard-font-size * 1.2;
  white-space: nowrap;
}

.press-release {
  max-width:780px;
  margin: auto;
  padding:2rem;
  h1 {
    text-align:center;
    font-size:1.25rem;
    margin-bottom:1.5rem;
  }
  h1.subline {
    text-align:center;
    font-weight:normal;
    font-style:italic;
  }

  .line {

  }
  
  .basic-header {
    display:grid;
    grid-template-columns: 50% 50%;
    margin-bottom:2rem;
    box-sizing:border-box;

    .column.left {
      justify-self:start;
      padding-left:2rem;

    }
    .column {

    }
    .column.right {
      justify-self:end;
      padding-right:2rem;

    }

    .column {

    }
  }

  p {
    margin-bottom:2rem;
  }

  .immediate-release {
    font-weight:bold;
  }

  .bye {
    text-align:center;
  }


  @media (max-width: 700px) {
    .basic-header {
      grid-template-columns: auto;
    }
    .column.left {
      margin-bottom:1rem !important;
      padding-left:1rem !important;
    }
    .column.right {
      padding-left:2rem !important;
      padding-right:0 !important;
      justify-self:start !important ;
    }


    a {

      /* These are technically the same, but use both */
      overflow-wrap: break-word;
      word-wrap: break-word;

      -ms-word-break: break-all;
      /* This is the dangerous one in WebKit, as it breaks things wherever */
      word-break: break-all;
      /* Instead use this non-standard one: */
      word-break: break-word;

      /* Adds a hyphen where the word breaks, if supported (No Blink) */
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto;

    }
  }

}