/*
  Formal.css
  Default Styles for Forms
*/

@import url('//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900,300italic,400italic,600italic,700italic,900italic');

input,
button,
selext,
textarea,
[contenteditable],
.input,
.button,
.submit {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: auto;
  font-size: 12pt;
  font-family: 'Source Sans Pro', 'Open Sans', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif;
  -webkit-transition: all .2s ease-in-out;
  transition: all .1s ease-in-out;
}

.input,
textarea,
[contenteditable],
input:not([type=submit]):not([type=button]) {
  display: inline-block;
  width: auto;
  margin: 0 auto;
  padding: .3em .5em .3em .5em;
  font-size: 12pt;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  background: white;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid #ccc;
  border-bottom-color: #aaa;
  box-shadow: inset rgba(0,0,0,.1) 0 -5px 15px, inset rgba(0,0,0,.05) 0 1px 1px, rgba(0,0,0,.15) 0px 1px 1px;
}

.input:hover,
.input:focus,
textarea:hover,
textarea:focus,
[contenteditable]:hover,
[contenteditable]:focus,
input:not([type=submit]):not([type=button]):hover,
input:not([type=submit]):not([type=button]):focus {
  border: 1px solid #00ccff;
  box-shadow: inset rgba(0,0,0,.05) 0 -5px 15px, inset rgba(0,0,0,.025) 0 1px 1px, rgba(0,0,0,.15) 0px 1px 1px;
}

.input:active,
textarea:active,
[contenteditable]:active,
input:not([type=submit]):not([type=button]):active {
  border: 1px solid #0077ff;
}

select {
  position: relative;
  padding: .3em .5em .3em .5em;
  font-size: 12pt;
  line-height: 1;
}

button,
.button,
.submit,
input[type=submit],
input[type=button] {
  display: inline-block;
  width: auto;
  margin: 0 auto;
  padding: .4em .6em .5em .6em;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  font-size: 12pt;
  line-height: 1;
  color: #fff;
  border-radius: 3px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  background: #00ccff;
  background: -moz-linear-gradient(top, #00ccff 0%, #0080ff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00ccff), color-stop(100%,#0080ff));
  background: -webkit-linear-gradient(top, #00ccff 0%,#0080ff 100%);
  background: -o-linear-gradient(top, #00ccff 0%,#0080ff 100%);
  background: -mr-linear-gradient(top, #00ccff 0%,#0080ff 100%);
  background: linear-gradient(to bottom, #00ccff 0%,#0080ff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ccff', endColorstr='#0080ff',GradientType=0 );
  text-shadow: #06e 1px 1px 0;
  border: 1px solid #07f;
  border-bottom-color: #02e;
  box-shadow: inset #0065ff 0 -5px 15px, inset #99ffff 0 1px 1px, rgba(0,0,0,.15) 0px 1px 1px;
}

button:hover,
button:focus,
.button:hover,
.button:focus,
input[type=button]:hover,
input[type=button]:focus {
  background: #7df;
  background: -moz-linear-gradient(top, #7df 0%, #07f 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7df), color-stop(100%,#07f));
  background: -webkit-linear-gradient(top, #7df 0%,#07f 100%);
  background: -o-linear-gradient(top, #7df 0%,#07f 100%);
  background: -mr-linear-gradient(top, #7df 0%,#07f 100%);
  background: linear-gradient(to bottom, #7df 0%,#07f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7df', endColorstr='#07f',GradientType=0 );
  box-shadow: inset #08f 0 -5px 15px, inset #cef 0 1px 1px, rgba(0,0,0,.15) 0px 1px 1px, rgba(0,200,255,.5) 0 0 10px;
}

button:active,
.button:active,
input[type=button]:active {
  background: #05f;
  background: -moz-linear-gradient(top, #05f 0%, #07f 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#05f), color-stop(100%,#07f));
  background: -webkit-linear-gradient(top, #05f 0%,#07f 100%);
  background: -o-linear-gradient(top, #05f 0%,#07f 100%);
  background: -mr-linear-gradient(top, #05f 0%,#07f 100%);
  background: linear-gradient(to bottom, #05f 0%,#07f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7df', endColorstr='#07f',GradientType=0 );
  border: 1px solid #00f;
  box-shadow: inset #04f 0 -5px 15px, inset #8ad2ff 0 1px 1px;
  border-bottom-color: #01d;
}

.submit,
input[type=submit] {
  background: #ff8900;
  background: -moz-linear-gradient(top, #ff8900 0%, #ff3d00 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8900), color-stop(100%,#ff3d00));
  background: -webkit-linear-gradient(top, #ff8900 0%,#ff3d00 100%);
  background: -o-linear-gradient(top, #ff8900 0%,#ff3d00 100%);
  background: -ms-linear-gradient(top, #ff8900 0%,#ff3d00 100%);
  background: linear-gradient(to bottom, #ff8900 0%,#ff3d00 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8900', endColorstr='#ff3d00',GradientType=0 );
  text-shadow: #e20 1px 1px 0;
  border: 1px solid #f60;
  border-bottom-color: #e20;
  box-shadow: inset #f20 0 -5px 15px, inset #fc6 0 1px 1px, rgba(0,0,0,.15) 0px 1px 1px;
}

.submit:hover,
.submit:focus,
input[type=submit]:hover,
input[type=submit]:focus {
  background: #fa3;
  background: -moz-linear-gradient(top, #fa3 0%, #f30 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fa3), color-stop(100%,#f30));
  background: -webkit-linear-gradient(top, #fa3 0%,#f30 100%);
  background: -o-linear-gradient(top, #fa3 0%,#f30 100%);
  background: -ms-linear-gradient(top, #fa3 0%,#f30 100%);
  background: linear-gradient(to bottom, #fa3 0%,#f30 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa3', endColorstr='#f30',GradientType=0 );
  box-shadow: inset #f40 0 -5px 15px, inset #ffd28a 0 1px 1px, rgba(0,0,0,.15) 0px 1px 1px, rgba(255,200,0,.5) 0 0 10px;
}

.submit:active,
input[type=submit] {
  background: #f50;
  border: 1px solid #f00;
  box-shadow: inset #f40 0 -5px 15px, inset #ffd28a 0 1px 1px;
  border-bottom-color: #d10;
}