swchoi727/LEP

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require jquery-ui
 *= require_self
 *= require_tree .
 */

$white: #fff;
$black: #000;
$berkblue: #003262;
$calgold: #FDB515;
$lightblue: #1F87E0;
$grey: #d3d3d3;
$unit: 10px;
$width: 800px;

html,
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  color: $black;
  font-family: 'Open Sans', 'Helvetica', sans-serif;
}

#main {
  margin: 0 auto;
  font-size: 1em;
  max-width: $width;

}
a {
  background: transparent;
  color: $berkblue;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

#header {
  font-size: 2.5em;
  font-weight: 500;
  font-family: serif;
  color: $calgold;
  padding: 20px;
  max-width: $width;
  margin: 0 auto;

  .berkeley {
    color: $berkblue;
  }

}
nav {
  max-width: 100%;
  background-color: $lightblue;
  color: $white;
  padding: $unit 0;

  ul {
    max-width: $width;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;

    li {
      display: inline-block;
      margin-right: 2*$unit;

      &.logout {
        float: right;
      }
    }

    a {
      color: $white;
    }
  }
}


h1 {
  font-size: 1.5em;
  color: $berkblue;
}

form {
  .question {
    margin-bottom: 2*$unit;

    textarea {
      border: 1px solid #D3D3D3;
    }

  }

  label {
    font-style: bold;
    margin-bottom: $unit;
    display: block;
  }

  input {
    border: 1px solid $grey;
    padding: $unit/2;

    &[type=submit] {
      border: none;
      padding: $unit $unit*2;
      color: $white;
      border-radius: 10px;
      background-color: $berkblue;
    }
  }


  select {
    border: 1px solid $grey;
    border-radius: 0;
    height: 3*$unit;
    padding: $unit/2;
    background: transparent;


  }

  select[multiple] {
    height: auto;
  }

}


.row {
  clear: both;
}

.info {
  width: 50%;
  float: left;
  margin-bottom: $unit*4;
  h3 {
    margin-bottom: $unit;
  }
}

.btn {
  padding: $unit $unit*2;
  color: $white;
  border-radius: 10px;
  background-color: $berkblue;
}

.edit-prof {
  display: block;
  float: right;
  margin-top: 20px;
}

.deadline {
  float: right;

}

h4 {
  margin-bottom: $unit;
}

p {
  margin-top: 0;
}

.field_with_errors {
  padding: 2px;
  background-color: red;
  display: table;
}