app.scss

$text: #313131;
$benign: #A7D100;
$malignant: #F13709;
$flag: #FFA400;
$skip: #D3FFFF;
$background: #FFFFE5;
$halfButtonWidth: 15em;
$buttonProtrusion: 5em;
$size: 32pt;

.fa-ambulance{
  color: $malignant;
}

html, body{
  height: 100%;
}

body {
  // prevent iOS from resizing font.
  -webkit-text-size-adjust: 100%;

  color: $text;
  font-size: $size;
  background-color: white;
  font-family: 'Oswald', sans-serif; 
  #container {
    margin-left: auto;
    margin-right: auto;
    text-align: center;

    h1{
      margin-left: 10%;
      margin-top: 0em; 
      span{
        color: $benign;
        font-family: 'Gloria Hallelujah', cursive;
        transition: 1s;
        &:hover{
          color: $malignant;
          transition: color 1s;
        }
      }
    }

    // User Controls
    .buttonText{
      font-style: normal;
      color: $text;
      text-decoration: none;
      &:hover{
        text-decoration: underline;
      }
    }
    span.benign{
      color: $benign;
    }
    span.malignant{
      color: $malignant;
    }

    .malignant.button {
      float: right;
      margin-top: 2.5em; //2.7 is in line w benign.
      span.icon{
        display: block;
        padding-bottom: .5em;
      }
    }
    .benign.button {
      float: left;
      span.icon{
        margin-top: 0.4em;
        display: block;
      }
    }
    // Nav
    // nav.button{
    //   border: thin dotted orange; 
    // }
    .button.add{
      color: $benign;
      text-decoration: none;      
      float: left;
      a{
        color: $text;
        text-decoration: none; 
      }
    }
    .button.tweet{
      margin-right: 10%;
      color: #55ACEE;
      text-decoration: none;     
    }
    .button.flag {
      margin-right: 6%;
      display: inline;
      i{
        color: $flag;
      }
    }
    .button.skip {
      display: inline;
      float: right;
      margin-top: 0.3em; 
    }


    // Lump
    .lump{
      .picContainer{
        margin-top: -1em; 
        .pic{ 
          height: 400px; 
          width: 400px; 
          overflow: hidden;
          box-shadow: 0 0 10px 1px black; 
          display: inline;
        }
      }
      .description{
        .patient{
          display: inline; 
        }
        p.symptoms{
          display: inline;
        }
        .diagnoses{
          text-align: center;
          .diagnosis{
            display: inline-block;
            margin-left: 2em;
            span{
              margin-top: 6px;
            } 
          }
        }
      }
    }

    nav{
      position: relative;
      bottom: 0px;
      margin: 1em;
    }

    .create{
      padding: 2em;
      margin-top: -4em;
      margin-left: auto;
      margin-right: auto;
      div{
        border-radius: 5px; 
        text-align: left;
        padding-left: 1em; 
        padding-right: 1em; 
        background-color: #DDD;
        box-shadow: 0 0 10px 1px black;
        margin: 1em;
        &:hover{
          opacity: .9;
        }
        input[type="text"]{
          // margin: 1em;
          // width: 95%;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          width: 100%;
        }
        input{ 
          height: 3em;
          position: relative;
          top: -1.1em;
        }
      }
      div:nth-child(2n-1){
        background-color: $benign;
      }
      div:nth-child(2n){
        background-color: $flag;
      }

      a.cancel{
        color: black;
        text-decoration: none;
      }
    }
  }
}

/*# sourceMappingURL=app.css.map */