* { position: relative; margin: 0; padding: 0; outline: none; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
body { background: #ccc; color: #444; text-align: left; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 300; padding: 54px 10px 10px; }
header { position: fixed; z-index: 5; top: 0; left: 0; width: 100%; background: #222; padding: 10px; }
header:after { content: ''; display: block; clear: both; }
header .logo { display: block; float: left; color: aqua; font-size: 18px; font-weight: bold; margin-right: 30px; text-decoration: none; }
header h3 { font-size: 14px; font-weight: normal; line-height: 24px; float: left; color: #fff; }
header small { float: right; line-height: 24px; color: #bbb; }
table { width: 100%; }
h4 { font-size: 20px; font-weight: normal; margin-bottom: 10px; }
h4 .button { float: right; display: block; background: #6845bd; color: #fff; font-size: 14px; font-weight: normal; line-height: 27px; padding: 0 10px; text-decoration: none; }
table { width: 100%; margin-bottom: 20px; border-spacing: 0; border-collapse: collapse; border: 1px solid #e2e2e2; border-bottom: none; background: #f9f9f9; }
table td { padding: 10px 10px; vertical-align: top; border-bottom: 1px solid #e2e2e2; }
table td.right { text-align: right; }
table thead td { background: #efefef; }

span.red { background: #d63f38; color: #fff; padding: 1px 3px; border-radius: 4px; }
span.green { background: #1aaa1d; color: #fff; padding: 1px 3px; border-radius: 4px; }

/* forms */
fieldset { background: #f9f9f9; border: 1px solid #e2e2e2; margin-bottom: 20px; }
fieldset .legend { color: #888; font-size: 14px; padding: 20px; border-bottom: 1px dashed #e2e2e2; }
fieldset .legend .fa { margin-right: 5px; }

dl { display: block; margin-bottom: 20px; }
fieldset dl { padding: 20px; }
dl:after { content: ''; display: block; clear: both; }
dl dt { display: block; margin-bottom: 10px; line-height: 1.5; word-wrap: break-word; }
dl dd { display: block; margin-bottom: 20px; line-height: 1.5; }
dl.inline dt { float: left; width: 30%; padding-right: 20px; text-align: right; }
dl.inline dd { float: left; width: 70%; }
input[type=text], input[type=color], input[type=date], input[type=datetime], input[type=email], input[type=file], input[type=number], input[type=password], input[type=tel], input[type=time], input[type=url], textarea, select { display: inline-block; width: 300px; height: 35px; max-width: 100%; margin: 0 5px 5px 0; padding: 5px 10px; background: #fcfcfc; border: 1px solid #e2e2e2; color: #555; font-family: inherit; font-weight: inherit; font-size: inherit; line-height: 25px; vertical-align: top; box-shadow: inset 1px 1px 1px #eee; -webkit-box-shadow: inset 1px 1px 1px #eee; -moz-box-shadow: inset 1px 1px 1px #eee; transition: border linear .1s; -webkit-transition: border linear .1s; -moz-transition: border linear .1s; -o-transition: border linear .1s; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; }
input.one-per-line { display: block; margin-right: auto; }
input.full, select.full { width: 100%; }
input.large, select.large { width: 400px; }
input.medium, select.medium { width: 200px; }
input.small, select.small { width: 100px; }
input.xsmall, select.xsmall { width: 70px; }
input.xxsmall, select.xxsmall { width: 40px; }
textarea { width: 100%; height: 150px; }
textarea.medium { width: 75%; height: 100px; }
textarea.small { width: 50%; height: 75px; }

/* buttons */
.button { display: inline-block; padding: 10px 20px; background: #1b63b5; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; color: #fff; font-size: 15px; font-weight: normal; text-decoration: none; text-align: center; line-height: 1; cursor: pointer; transition: All linear .1s; -webkit-transition: All linear .1s; -moz-transition: All linear .1s; -o-transition: All linear .1s;}
.button:hover { text-decoration: none; }
.button:before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: transparent; transition: All linear .1s; -webkit-transition: All linear .1s; -moz-transition: All linear .1s; -o-transition: All linear .1s; }
.button:hover:before, .button:focus:before { background-color: rgba(255, 255, 255, .2); }
.button:disabled { opacity: .3; filter: alpha(opacity=30); cursor: default; }
.button:disabled:before { display: none; }
.button .fa { margin-right: 5px; }

.button.full { width: 100%; padding-left: 0; padding-right: 0; }
.button.big { font-size: 120%; padding: 15px 30px; }
.button.small { font-size: 80%; padding: 4px 10px; }
.button.right { float: right; margin-left: 20px; }

.button.red { background-color: #e94f4f; color: #fff; }
.button.orange { background-color: #f1a00f; color: #fff; }
.button.yellow { background-color: #f1c40f; color: #fff; }
.button.green { background-color: #2ecc71; color: #fff; }
.button.blue { background-color: #4e89e7; color: #fff; }
.button.violet { background-color: #c339c1; color: #fff; }
.button.gray { background-color: #dedede; color: #333; }