/* 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: #e74300 url("../images/bg.jpg"); margin: auto; }
div.clear                                       { clear: both; height: 0; }
img                                             { border: 0; }
a                                               { text-decoration: none; transition: color .3s; color: #e74300; }
a:hover                                         { color: #555; }

/* header */
header                                          { max-width: 547px; margin: 6rem auto; padding: 0 8px; text-align: center; }
header h1                                       { color: #efefef; font-size: 64px; font-weight: 300; text-shadow: 0 0 8px rgba(0,0,0,.35); text-transform: uppercase; }
header h1 strong                                { font-size: 64px; font-weight: 800; }

/* 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-shadow: 0 0 0 8px rgba(0,0,0,0.05); box-sizing: border-box; }
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: 45px; 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: #e74300; color: #fff; border: 0; font-weight: 600; transition: background-color .2s, color .2s; }
div.box div.content button:hover                { background: #bfc3c5; color: #555; cursor: pointer; }

/* footer */
footer                                          { max-width: 986px; margin: -10px auto 0; text-align: right; font-size: 10px; color: rgba(255,255,255,.3); box-sizing: border-box; padding: 0 8px; }
footer a                                        { color: rgba(255,255,255,.6); font-size: 12px; margin: 0 5px; }
footer a:last-of-type                           { margin-right: 0; }
footer a:hover                                  { color: #fff; }

/* control box */
div.control                                     { height: 25px; position: relative; }
div.control label                               { margin-left: 10px; cursor: pointer; }

/* checkbox replacement */
div.checkbox_replace                            { width: 22px; height: 22px; background: transparent url("../images/checkbox.png") no-repeat; z-index: 1000; position: relative; float: left; }
div.checkbox_replace:hover                      { cursor: pointer; }
div.checkbox_replace.active                     { background-position: left -22px; }

/* edit */
div.box.edit div.left                           { width: 50%; box-sizing: border-box; float: left; border-right: 10px #fff solid; }
div.box.edit div.right                          { width: 50%; box-sizing: border-box; float: left; border-left: 10px #fff solid; }
div.box.edit label                              { font-weight: 600; }
div.box.edit div.description                    { margin: 0 0 20px 32px; }