/* Imports */
@import url('reset.css');
/* General */
:root {
    --primary-color: #dedede;
    --print-primary-color: #900;
    --print-primary-color-hover: #C00;
    --print-font-color: #fff;
    --print-border-color: #000;

    --notice-bg-color: #C00;
    --notice-text-color: #fff;

    --primary-padding: 10px;
    --border-radius: 8px;
    --border-radius-button: 4px;
}

* { box-sizing: border-box; }
h1 { font-size: 160%; }
h2 { font-size: 140%; margin: 8px 0; }
body { font-size: 14px; font-family: Verdana, sans-serif; background-color: #333; line-height: 1.3em; }
ul { list-style: disc inside; }
/* IDs */
#wrapper { width: 100%; }

#wrapper header, #wrapper footer { text-align: center; }
#wrapper header, #container, #wrapper footer { background-color: var(--primary-color); padding: var(--primary-padding); }

/* Classes */
[class*="col-"] { display: block; width: 100%; padding: 6px; }
@media (min-width: 768px) {
#wrapper { max-width: 1540px; margin: 10px auto; }
#wrapper header { border-top-right-radius: var(--border-radius); border-top-left-radius: var(--border-radius); }
#wrapper footer { border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); }
/* Classes */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
[class*="col-"] { float: left; }
.row:before, .row:after { content: ""; clear: both; display: table; }
.print { background: var(--print-primary-color); color: var(--print-font-color); border: var(--print-border-color) 1px solid; padding: 5px 15px; cursor: pointer; border-radius: 4px; outline: none; transition: background-color .3s ease-in-out; }
.print:hover { background: var(--print-primary-color-hover); }
.notice { background-color: var(--notice-bg-color); color: var(--notice-text-color); font-weight: bold; text-align: center; padding: 10px 0; }
}
@media print {
.print { display: none; }
}