@font-face { font-family: Montserrat-SemiBold; src: url('/Montserrat-SemiBold.ttf'); } 
 @font-face { font-family: Montserrat-Regular; src: url('/Montserrat-Regular.ttf'); } 
 @font-face { font-family: Montserrat-Medium; src: url('/Montserrat-Medium.ttf'); } 

body {
  padding: 32px;
  padding-top: 5px;
  padding-right: 0px;
  font: 14px Montserrat-Medium, "Lucida Grande", Helvetica, Arial, sans-serif;
  background: #FFF6DA;
  /*background:  #DFB798;*/
  color:  #264653;
}

a {
  /*color: #00B7FF;*/
  color:  #264653;
}

h1 {
  margin: 0px;
  margin-left: -20px;
  font: 32px Montserrat-SemiBold, "Lucida Grande", Helvetica, Arial, sans-serif;
}

h2 {
  line-height: 1.1;
  margin-bottom: 12px;
}

p {
  margin: 2px;
  margin-top:4px;
}
/*
.h1-text {
  margin-bottom: 10px;
}*/

.h1-img {
  margin-bottom: -15px;
  /* logo color:  #264653 */
}

.h2-text {
  font-size: 24px;
  font-style: italic;
}

.error {
  color: red;
  font-size:  18px;
}

.success {
  color: green;
  font-size:  18px;
}

.btn {
  /*background: #f80;*/
  /*background: #FFBF00;*/
  background-color: #DAE3FF;
  /*color: #fff;*/
  border: 1px solid #eee;
  border-radius: 6px;
  box-shadow: 5px 5px 5px #eee;
  text-shadow: none;
  /*width: 120px;
  height: 40px;*/
  font-size: 14px;
  padding: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.btn:hover {
  /*background: #970;*/
  background: #A7BCFF;
}

#text_input {
  width: 660px;
}

.nav-btn {
  /*background: #FFBF00;*/
  background-color: #DAE3FF;
  /*background-color: lightblue;*/
  padding-left: 10px;
  padding-right:  10px;
}

.nav-btn:hover {
  /*background-color: blue;*/
  background: #A7BCFF;
}

.login-box {
  font-size: 14px;
}

.profile-box {
  font-size: 14px;
}

.register-box {
  padding-top: 10px;
}


/* Render Loader   */
@keyframes spinning {
/*  from { transform: rotate(0deg) }
  to { transform: rotate(360deg) }*/

  /*not sure how to get it to spin in the middle*/

  0% { 
      transform: rotate(0deg);
      /*transform: translate(0px);*/
      }
  40% { 
        transform: rotate(360deg);
        /*transform: translate(0px);*/
      }

  100% {
        transform: rotate(360deg);
        transform: translate(480px);
       }
}
.loader {
  animation-name: spinning;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  /* linear | ease | ease-in | ease-out | ease-in-out */
  animation-timing-function: linear;
}


meter {
  width: 400px;
}

#player {
/*  width: 1280;
  height: 720;*/
}

li {
  padding: 5px;
}

/* blog  */
.column-left {
  float: left;
  width: 170px;
}

.column-right {
  float: left;
  width: 440px;
}

/*.sidebar {
  width: 120px; 
  font: 14px Montserrat-Medium, "Lucida Grande", Helvetica, Arial, sans-serif;
  line-height: 1.35em;
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  padding: 5px;
  padding-bottom: 20px;
  margin-left: 10px;
}*/

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

section {
  width:  680px;
}

h3 {
  margin-top: 20px;
  margin-bottom: 8px;
}

h4 {
  margin-top: 20px;
  margin-bottom: 4px;
}

h5 {
  margin: 2px;
}


article {
  font: 14px Montserrat-Medium, "Lucida Grande", Helvetica, Arial, sans-serif;
  line-height: 1.35em;
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  padding: 5px;
  padding-bottom: 12px;
  margin-bottom: 18px;
}

article p {
  margin: 2px;
  margin-bottom: 18px;
}

article table {
  font: 14px Montserrat-Medium, "Lucida Grande", Helvetica, Arial, sans-serif;
  border: 1px solid #ccc;
  border-collapse: collapse;
}

article th, article td{
  padding: 2px;
  padding-left: 10px;
  padding-right: 10px;
  /*border: 10px solid black;*/
}

/*
article tr:nth-child(2) {
  border: solid thin;
}
*/

article tr {
  border: 1px solid #ccc;
}


.screenshot {
  border: 1px solid #ccc;
  margin: 10px;
  max-width: 640px;
}

/* code listing style */
pre {
  font-size: 12.5px;
  border: 1px solid #ccc;
  padding: 5px;
  background-color: #FFEAA7;
}


/* tabs */
.tool-tabs {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  width:  680px;
}

.tool-tabs button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 12px;
  transition: 0.2s;
}

.tool-tabs button:hover {
  background-color: #ddd;
}

.tool-tabs button.active {
  background-color: #ccc;
}

#tool-desc {
  width:  674px;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  padding: 2px;
  padding-left: 4px;
  margin: 0px;
  margin-bottom: 12px;
}

.tool-step {
  /*border: 1px solid #ccc;*/
  /*border-left-width: 10px;*/
  border-top: 6px solid #ccc;
  background-color: inherit;
  margin-top: 10px;
}

.tab-content {
  /*display: none;*/
  width:  680px;
  padding: /*6px 12px;
  border: 1px solid #ccc;
  border-to*/p: none;
} 

.asin-status-label {
  margin-left: 10px;
  background-color: #DAE3FF;
  font-size: 12.2px; /* really want it to fit on one line for now */
}


/* mobile  */
@media screen and (max-width: 680px) {
  body {
    padding: 0.5vw;
    /*font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;*/
    font-size: 14px;
    margin: 0px;
  }

  #text_input {
    width: 86vw;
  }

  h2 {
   /*font: 20px "Lucida Grande", Helvetica, Arial, sans-serif; */
   font-size: 18px;
  }

  .h2-text {
    font-size: 20px;
    font-style: italic;
    padding-left: 20px;
  }

  .nav-btn {
    padding-left: 3px;
    padding-right: 3px;
  }

  pre {
    font-size: 9.0px;
    padding: 2px;
  }

  .screenshot {
    border: 1px solid #ccc;
    margin: 1px;
    max-width: 90vw;
  }

  #player {
    width: 92vw;
  }

  .profile-box {
    /*font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;*/
    float: left;
    width: 100%;
    padding-bottom: 2vw;
  }

  meter {
    width: 92vw;
  }

  .tool-tabs {
    width:  92vw;
  }

  .tab-content {
    width: 92vw;
  }

  .column-right {
    float: left;
    width: auto;
  }

  section {
    width:  92vw;
  }
/*
  .column {
    float: left;
    width: 540px;
  }
*/
}