body {
  font-family: "Helvetica",arial, sans-serif; }

.explanation {
  color: #888;
  font-size: 12px; }

.first {
  margin-top: 100px; }

p {
  margin-bottom: 0;
  margin-top: 1.5em; }

/*************************************************************/
/* 										   					*/
/* 										   					*/
/* 				You want from here down :) 					*/
/* 										   					*/
/* 										   					*/
/*************************************************************/
/* Mixins */
/* $duration = duration in seconds eg. ".2s" */
/* Buttons */
a.button-save, a.button-cancel, a.button-save:hover {
  color: #fff; }

.button, a.button {
  background-image: linear-gradient(top, #eeeeee, #dcdcdc);
  background-image: -webkit-gradient(linear, center top, center bottom, from(#eeeeee), to(#dcdcdc));
  background-image: -moz-linear-gradient(top, #eeeeee, #dcdcdc);
  background-image: -o-linear-gradient(top, #eeeeee, #dcdcdc);
  background-image: -ms-linear-gradient(top, #eeeeee 0%, #dcdcdc 100%);
  /*
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#{$top}", endColorstr="#{$bottom}");
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="\"#{$top}\"", endColorstr="\"#{$bottom}\"")";
  */
  background-color: #dcdcdc;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
  text-shadow: 0 -1px 0 #d9d9d9;
  border: 1px solid #cfcfcf;
  margin: 5px;
  box-shadow: inset 0 1px 0 white;
  text-shadow: none;
  color: #4b4b4b; }
  .button:hover, a.button:hover {
    background-image: linear-gradient(top, #e1e1e1, #cfcfcf);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#e1e1e1), to(#cfcfcf));
    background-image: -moz-linear-gradient(top, #e1e1e1, #cfcfcf);
    background-image: -o-linear-gradient(top, #e1e1e1, #cfcfcf);
    background-image: -ms-linear-gradient(top, #e1e1e1 0%, #cfcfcf 100%);
    /*
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#{$top}", endColorstr="#{$bottom}");
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="\"#{$top}\"", endColorstr="\"#{$bottom}\"")";
    */
    background-color: #cfcfcf;
    text-shadow: 0 -1px 0 #c3c3c3;
    cursor: pointer; }
  .button:active, a.button:active {
    box-shadow: inset 0 0 20px #cfcfcf;
    border: 1px solid #c3c3c3; }
  .button:hover, a.button:hover {
    color: #111;
    text-shadow: none; }

.button-save, a.button-save {
  background-image: linear-gradient(top, #9abf26, #698d07);
  background-image: -webkit-gradient(linear, center top, center bottom, from(#9abf26), to(#698d07));
  background-image: -moz-linear-gradient(top, #9abf26, #698d07);
  background-image: -o-linear-gradient(top, #9abf26, #698d07);
  background-image: -ms-linear-gradient(top, #9abf26 0%, #698d07 100%);
  /*
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#{$top}", endColorstr="#{$bottom}");
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="\"#{$top}\"", endColorstr="\"#{$bottom}\"")";
  */
  background-color: #698d07;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
  text-shadow: 0 -1px 0 #658807;
  border: 1px solid #577506;
  margin: 5px;
  box-shadow: inset 0 1px 0 #b4d93f;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
  color: #fff; }
  .button-save:hover, a.button-save:hover {
    background-image: linear-gradient(top, #89aa22, #577506);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#89aa22), to(#577506));
    background-image: -moz-linear-gradient(top, #89aa22, #577506);
    background-image: -o-linear-gradient(top, #89aa22, #577506);
    background-image: -ms-linear-gradient(top, #89aa22 0%, #577506 100%);
    /*
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#{$top}", endColorstr="#{$bottom}");
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="\"#{$top}\"", endColorstr="\"#{$bottom}\"")";
    */
    background-color: #577506;
    text-shadow: 0 -1px 0 #455c05;
    cursor: pointer; }
  .button-save:active, a.button-save:active {
    box-shadow: inset 0 0 20px #577506;
    border: 1px solid #455c05; }

.button-cancel, a.button-cancel {
  background-image: linear-gradient(top, #c0622d, #a0410d);
  background-image: -webkit-gradient(linear, center top, center bottom, from(#c0622d), to(#a0410d));
  background-image: -moz-linear-gradient(top, #c0622d, #a0410d);
  background-image: -o-linear-gradient(top, #c0622d, #a0410d);
  background-image: -ms-linear-gradient(top, #c0622d 0%, #a0410d 100%);
  /*
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#{$top}", endColorstr="#{$bottom}");
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="\"#{$top}\"", endColorstr="\"#{$bottom}\"")";
  */
  background-color: #a0410d;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
  text-shadow: 0 -1px 0 #9b3f0d;
  border: 1px solid #88370b;
  margin: 5px;
  box-shadow: inset 0 1px 0 #d57d4b;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
  color: #fff; }
  .button-cancel:hover, a.button-cancel:hover {
    background-image: linear-gradient(top, #ab5728, #88370b);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#ab5728), to(#88370b));
    background-image: -moz-linear-gradient(top, #ab5728, #88370b);
    background-image: -o-linear-gradient(top, #ab5728, #88370b);
    background-image: -ms-linear-gradient(top, #ab5728 0%, #88370b 100%);
    /*
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#{$top}", endColorstr="#{$bottom}");
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="\"#{$top}\"", endColorstr="\"#{$bottom}\"")";
    */
    background-color: #88370b;
    text-shadow: 0 -1px 0 #712e09;
    cursor: pointer; }
  .button-cancel:active, a.button-cancel:active {
    box-shadow: inset 0 0 20px #88370b;
    border: 1px solid #712e09; }

.small {
  padding: .4em 12px;
  font-size: 11px;
  text-shadow: none;
  font-weight: 600; }

.medium {
  padding: .4em 12px;
  font-size: 16px; }

.large {
  padding: .4em 12px;
  font-size: 20px; }

/* Inputs */
input[type="text"], textarea {
  -moz-box-shadow: inset 0 0 5px #eeeeee;
  -webkit-box-shadow: inset 0 0 5px #eeeeee;
  -o-box-shadow: inset 0 0 5px #eeeeee;
  box-shadow: inset 0 0 5px #eeeeee;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
  -moz-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  padding: .625em;
  border: 1px solid #ccc;
  color: #ccc;
  width: 96%;
  font-size: 18px; }
  input[type="text"]:focus, input[type="text"]:hover, textarea:focus, textarea:hover {
    outline: none;
    color: #111;
    border: 1px solid #4b4b4b; }

p.error {
  color: #a0410d; }

input.error {
  border: 1px solid #d7946f;
  -moz-box-shadow: 0 0 5px #c0622d;
  -webkit-box-shadow: 0 0 5px #c0622d;
  -o-box-shadow: 0 0 5px #c0622d;
  box-shadow: 0 0 5px #c0622d;
  color: #a0410d; }
  input.error:focus, input.error:hover {
    background: #fff;
    color: #111;
    border: 1px solid #a0410d; }