/* font faces */
@font-face /* open-sans-300-light */            { font-family: "Open Sans"; font-style: normal; font-weight: 300; src: url("../fonts/open-sans-v13-latin-300.eot"); src: local("Open Sans Light"), local("OpenSans-Light"), url("../fonts/open-sans-v13-latin-300.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans-v13-latin-300.woff2") format("woff2"), url("../fonts/open-sans-v13-latin-300.woff") format("woff"), url("../fonts/open-sans-v13-latin-300.ttf") format("truetype"), url("../fonts/open-sans-v13-latin-300.svg#OpenSans") format("svg"); }
@font-face /* open-sans-400-regular */          { font-family: "Open Sans"; font-style: normal; font-weight: 400; src: url("../fonts/open-sans-v13-latin-regular.eot"); src: local("Open Sans"), local("OpenSans"), url("../fonts/open-sans-v13-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans-v13-latin-regular.woff2") format("woff2"), url("../fonts/open-sans-v13-latin-regular.woff") format("woff"), url("../fonts/open-sans-v13-latin-regular.ttf") format("truetype"), url("../fonts/open-sans-v13-latin-regular.svg#OpenSans") format("svg"); }
@font-face /* open-sans-400-regular-italic */   { font-family: "Open Sans"; font-style: italic; font-weight: 400; src: url("../fonts/open-sans-v13-latin-italic.eot"); src: local("Open Sans Italic"), local("OpenSans-Italic"), url("../fonts/open-sans-v13-latin-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans-v13-latin-italic.woff2") format("woff2"), url("../fonts/open-sans-v13-latin-italic.woff") format("woff"), url("../fonts/open-sans-v13-latin-italic.ttf") format("truetype"), url("../fonts/open-sans-v13-latin-italic.svg#OpenSans") format("svg"); }
@font-face /* open-sans-600-semi-bold */        { font-family: "Open Sans"; font-style: normal; font-weight: 600; src: url("../fonts/open-sans-v13-latin-600.eot"); src: local("Open Sans Semibold"), local("OpenSans-Semibold"), url("../fonts/open-sans-v13-latin-600.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans-v13-latin-600.woff2") format("woff2"), url("../fonts/open-sans-v13-latin-600.woff") format("woff"), url("../fonts/open-sans-v13-latin-600.ttf") format("truetype"), url("../fonts/open-sans-v13-latin-600.svg#OpenSans") format("svg"); }

/* default */
*, html                                         { font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 14px; margin: 0; padding: 0; outline: none; }
body                                            { width: 100%; background: #fff; margin: auto; }
div.clear                                       { clear: both; height: 0; }
img                                             { border: 0; }
a                                               { text-decoration: none; transition: color .3s; color: #008fc2; }
a:hover                                         { color: #6ec800; }

/* header */
header                                          { max-width: 300px; margin: 6rem auto; padding: 0 8px; text-align: center; }

/* messages */
div#messages                                    { padding: 0 8px; }
div#messages ul                                 { max-width: 970px; margin: 0 auto 48px; list-style: none; }
div#messages li                                 { line-height: 45px; font-size: 15px; font-weight: 700; padding-left: 24px; margin-bottom: 20px; box-shadow: 0 0 0 8px rgba(0,0,0,0.05); }
div#messages li.success                         { background: #61bd57; color: #fff; text-shadow: 1px 1px 0 #2b5c26; border: 1px solid #3e7838; }
div#messages li.error                           { background: #e70000; color: #fff; text-shadow: 1px 1px 0 #760000; border: 1px solid #ae0000; }

/* content */
section                                         { padding: 0 8px; }
div.box                                         { max-width: 970px; margin: 0 auto 24px; background: #fff; box-sizing: border-box; border: 1px solid #bfc3c5; }
div.box div.header                              { height: 45px; background: #efefef; border-bottom: 1px solid #bfc3c5; padding-left: 24px; }
div.box div.header h2                           { font-size: 16px; float: left; line-height: 46px; font-weight: 700; text-shadow: 1px 1px 0 #fff; color: #555; }
div.box div.content                             { padding: 24px; }
div.box div.content > strong                    { font-size: 15px; font-weight: 600; display: block; margin-bottom: 5px; color: #333; }
div.box div.content p                           { line-height: 1.5; color: #444; margin-bottom: 15px; }
div.box div.content p > strong                  { font-weight: 600; }
div.box div.content p:last-of-type              { margin-bottom: 0; }
div.box div.content button                      { padding: 10px 20px; background: #008fc2; color: #fff; border: 0; font-weight: 600; transition: background-color .2s, color .2s; }
div.box div.content button:hover                { background: #6ec800; cursor: pointer; }

/* edit */
div.box.edit label                              { display: block; font-weight: bold; }
div.box.edit div.row select                     { width: 426px; margin-bottom: 24px; border: 1px solid rgba(52,58,64,.4); padding: 12px; }
div.box.edit div.row input                      { width: 400px; margin-bottom: 24px; border: 1px solid rgba(52,58,64,.4); padding: 12px; }
div.box.edit div.row                            { clear: both; }
div.box.edit div.row > div                      { width: 50%; box-sizing: border-box; float: left; }

/* footer */
footer                                          { max-width: 986px; margin: -10px auto 0; text-align: right; font-size: 10px; color: #aaa; box-sizing: border-box; padding: 0 8px; }
footer a                                        { color: #ccc; font-size: 12px; margin: 0 5px; }
footer a:last-of-type                           { margin-right: 0; }
footer a:hover                                  { color: #008fc2; }