dannyighsu/ucb-senior-map

// Place all the styles related to the Index controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

$body-bg: #FF9966;
$form-bg: rgba(32, 32, 32, .8);
$white: #ffffff;
$black: #000000;

$main: #FF9966;
$main-light: lighten($main,5%);
$main-dark: darken($main,5%);

$gray-light: #a0b3b0;
$gray: #ddd;

$thin: 300;
$normal: 400;
$bold: 600;
$br: 4px;

div#infoheader {
    color: #000000;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 46px;
    font-weight: 150;
    line-height: 50px;
    letter-spacing: 1px;
    padding: 0 0 20px;
    border-bottom: 1px dashed #000010;
    margin-top: 2cm;
}

div#info {
    color: #000000;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 100;
    line-height: 50px;
    padding: 0 0 40px;
}

.content {
    margin-left: 1cm;
}

body {
    margin-top: 4cm;
}

#home {
    
    .button {
      border:0;
      margin-left:35%;
      width:30%;
      outline:none;
      border-radius:0;
      line-height:50px;
      font-size:2rem;
      font-weight:$bold;
      text-transform:uppercase;
      letter-spacing:.1em;
      background:#3399FF;
      color:#3399FF;
      transition:all.5s ease;
      -webkit-appearance: none;
      border-radius: 4px;
      :hover {
        background:darken(#3399FF, 10%);
        color:rgba($white, 1);
        border:0;
        outline:none;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
      }
      &:hover, &:focus {
        background:darken(#3399FF, 10%);
        color:rgba($white, .8);
        border:0;
        outline:none;
      }
    }
    
    #button {
        border-radius: 4px;
        line-height:50px;
        border:none;
        margin-bottom:15px;
    }
    
    .form {
      background:rgba($form-bg,.9);
      padding: 40px;
      max-width:600px;
      margin:40px auto;
      border-radius:$br;
      box-shadow:0 4px 10px 4px rgba($form-bg,.3);
    }
    
    input, textarea {
      font-size:22px;
      display:block;
      width:100%;
      height:100%;
      padding:5px 10px;
      background:none;
      background-image:none;
      border:1px solid #3399FF;
      color:rgba($black,.7);
      border-radius:0;
      transition:border-color .25s ease, box-shadow .5s ease, color .5s ease;
      &:focus {
            outline:0;
            border-color:$main;
      }
    }
    
    textarea {
      border:2px solid #3399FF;
      resize: vertical;
    }
    
    #whats-this {
        text-align: center;
        margin-left: 45.5%;
    }
    
    #email {
        width: calc(45% - 22px);
        text-align: center;
        margin-left: 27.5%;
    }
    
    #flash {
        text-align: center;
    }   
}