body
{
  /* set up page background color */
  margin: 0;
  background-color: #b1bac1;

  /* basic font styles */
  font-family: 'Helvetica Neue Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 13px;
  color: #586064;
}

.login-container
{
  /* center it on the page */
  margin: 5% auto 0 auto;

  /* margin-left/right: auto only works to center fixed-width elements */
  width: 350px;

  /* add some padding so content's not jammed against the edges */
  padding: 25px;

  /* it's an off white box with a shadow */
  background-color: #e9e9e9;

  -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.4);
     -moz-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.4);
          box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.4);

  /* round the corners */
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

.logo-container
{
  /* center */
  width: 250px;
  margin: 0 auto 10px auto;
}

/* we are going to prefix our input selectors with a parent class
/* as a rough way to namespace them, so they're easier to add into
/* global CSS without weird conflicts */
.login-container input
{
  /* copy some attributes from existing SF page */
  height: 28px;
  padding: 8px 16px;
  font-size: 12px;

  /* should fit the entire column width, minus padding and border */
  /* container = 350 = 316 + 16*2 + 1*2 */
  width: 316px;

  /* reset margin and border */
  margin: 0;
  border: 1px solid #ccc;
}

.login-container input.login-input-username
{
  /* no space after the first one */
  border-bottom: none;

  /* round top corners */
  -webkit-border-top-left-radius: 3px;
     -moz-border-top-left-radius: 3px;
          border-top-left-radius: 3px;

  -webkit-border-top-right-radius: 3px;
     -moz-border-top-right-radius: 3px;
          border-top-right-radius: 3px;

  /* inset box shadow to look 3d-ish */
  -webkit-box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
          box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
}

.login-container input.login-input-password
{
  /* add space after the second one */
  margin-bottom: 10px;

  /* round bottom corners */
  -webkit-border-bottom-left-radius: 3px;
     -moz-border-bottom-left-radius: 3px;
          border-bottom-left-radius: 3px;

  -webkit-border-bottom-right-radius: 3px;
     -moz-border-bottom-right-radius: 3px;
          border-bottom-right-radius: 3px;
}

.login-forgot-password
{
  text-align: center;
}

.login-container input.login-button
{
  /* full width of column */
  width: 100%;

  /* no border; this removes some native browser styling */
  border: none;

  /* salesforce styles */
  background-image: linear-gradient(to top, #28458a 0%, #28538a 100%);
  color: #fff;
  font-family: 'Helvetica Neue Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 300;
  height: 38px;

  /* spacing afterwards */
  margin: 0 0 20px 0;

  /* round the corners */
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;

  /* on hover, change cursor to the hand */
  cursor: pointer;

  /* we want to animate our hover state properties if the browser can do it */
  -webkit-transiton: all 0.5s;
         transition: all 0.5s;
}

.login-container button:hover
{
  /* make the button look pressable */
  /* with just a little added fancy */
  background-color: #0686b0;

  -webkit-box-shadow: inset 0px 2px 1px 0px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: inset 0px 2px 1px 0px rgba(0, 0, 0, 0.2);
          box-shadow: inset 0px 2px 1px 0px rgba(0, 0, 0, 0.2);
}

.login-container a
{
  /* change link color */
  color: #015ba7;

  /* don't underline links */
  text-decoration: none;
}

/* underline links on hover, though */
.login-container a:hover
{
  text-decoration: underline;
}

/* make copyright centered and small */
.copyright
{
  /* use text-align instead of margin: auto because width isn't fixed */
  text-align: center;
  margin: 10px 0 0 0;
  font-size: 11px;
}