/* --------------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------------- */
h1 {
    width: 100%;
    padding-top: 2px;
    border-bottom: 1px solid #ccc;
    font-family: 'Pristyne';
    font-weight: bold;
    color: #ce2629;
    text-shadow: 1px 1px 2px #333;
    text-align: center;
}
h2, h3, h4, h5, legend {
    font-family: 'Harabara', Tahoma;
    font-weight: 700;
}
h2 {
    font-size: 1.8rem;
    color: #fff;
    text-shadow: 1px 1px 2px #333;
}
h3 {
    color: #ce2629;
    text-shadow: 1px 1px 2px #333;
}
p, label {
    font-weight: 700;
}
pre {
    padding: 0.5rem;
    border: 1px solid #666;
    border-radius: 5px;
    background-color: #ccc;
}
.help-block {
    font-size: 0.8rem;
    font-weight: bold;
    color: #a00;
    text-align: right;
}
a {
    color: #a00;
}
@media only screen and (min-width: 920px) {
    h1 {
        font-size: 4rem;
    }
    h2 {
        font-size: 2rem;
    }
    p {
        font-weight: 400;
    }
}

/* --------------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------------- */
html, body {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
    background-color: #ccc;
    background-attachment: fixed;
}
@media only screen and (max-width: 360px) {
    html {
        background-image: url('/images/grey-3d-bg-xs.jpg');
        background-position-x: -250px;
    }
}
@media only screen and (min-width: 361px) and (max-width: 414px) {
    html {
        background-image: url('/images/grey-3d-bg-sm.jpg');
        background-position-x: -250px;
    }
}
@media only screen and (min-width: 415px) and (max-width: 1024px) {
    html {
        background-image: url('/images/grey-3d-bg-md.jpg');
        background-position-x: center;
    }
}
@media only screen and (min-width: 1025px) {
    html {
        background-image: url('/images/grey-3d-bg-lg.jpg');
        background-position-x: center;
    }
}
@media only screen and (max-height: 414px) {
    html {
        background-position-y: -100px;
    }
}

body {
    min-height: 100%;
    background-color: rgba(255, 255, 255, 0.75);
}
div.main {
    padding: 0 1rem 56px 1rem;
}
@media only screen and (min-width: 667px) {
    div.main, footer .nav {
        width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
}
div.main p.error {
    text-align: center;
}

/* --------------------------------------------------------------------------------
   Homepage
   -------------------------------------------------------------------------------- */
img {
    padding: 2px;
    border: 1px solid #ccc;
}
.home p img {
    float: left;
    margin-right: 5px;
}
.home p:nth-of-type(3) img {
    float: right;
    margin-leftt: 5px;
}

/* --------------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------------- */
fieldset {
    margin-top: 0.5rem;
}
legend {
    margin: 0;
    padding: 0;
    font-size: 1.3rem;
}
label {
    margin-bottom: 0;
}
.form-group {
    margin-bottom: 0.3rem;
}
.btn-primary {
    background-color: #a00;
    border-color: #a00;
}
.btn-primary:hover {
    background-color: #c00;
    border-color: #c00;
}
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: #e00;
    border-color: #e00;
}
@media only screen and (min-width: 920px) {
    legend {
        font-size: 1.5rem;
    }
}

/* --------------------------------------------------------------------------------
   Team Display
   -------------------------------------------------------------------------------- */
.list-group>li.list-group-item {
    padding: 0.5rem;
}
.list-group>li.list-group-item .position {
    display: inline-block;
    width: 50%;
}
.list-group>li.list-group-item .position.initial {
    width: 20%;
}
.list-group>li.list-group-item .name {
    display: inline-block;
    width: 70%;
}
.list-group>li.list-group-item .name.highlight {
    color: #a00;
}
.table thead th, .table tbody th, .table tbody td {
    padding: 0.25rem;
    border-top: none;
    border-bottom: none;
    font-weight: normal;
}
.table tr.rank td {
    border-top: 1px solid #ccc;
}
.table tbody th.top, .table tr td.top {
    font-weight: bold;
}
th#votes, td[headers='votes'] {
    text-align: center;
}

/* --------------------------------------------------------------------------------
   League Table
   -------------------------------------------------------------------------------- */
table#league {
    width: 100%;
    margin-bottom: 0.5rem;
    border: 2px solid #000;
    border-collapse: separate;
    border-radius: 10px;
    background-color: #fff;
}
th#pos, th#played, th#won, th#drawn, th#lost, th#for, th#against, th#points, th#goaldiff {
    width: 10%;
}
th#pos, td[headers=pos] {
    padding-left: 0.25rem;
}

/* --------------------------------------------------------------------------------
   Footer / Nav Links
   -------------------------------------------------------------------------------- */
footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 999;
    border-top: 1px solid #a00;
    background: rgb(169,3,41);
    background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); 
    background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
    background: linear-gradient(to bottom, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
}
footer nav {
    width: 100%;
    height: 40px;
    padding: 3px;
}
footer nav>a.nav-link {
    width: calc((100% - 96px)/3);
    padding: 0;
    text-align: center;
}
footer nav>a.nav-link:first-of-type {
    width: 64px;
    margin: 0 16px;
    text-align: left;
}
footer nav>a>span {
    display: none;
}
footer nav>a.home>img {
    position: absolute;
    bottom: 4px;
}
footer img {
    border: none;
}

/* --------------------------------------------------------------------------------
   Cookies Modal
   -------------------------------------------------------------------------------- */
#cookies {
    color: #fff;
}
#cookies.show {
    display: block;
}
#cookies .modal-header {
    padding: 0.5rem;
}
#cookies .modal-content {
    background-image: url('/images/red-3d-bg.jpg');
    background-position-x: center;
    background-repeat: no-repeat;
    background-color: #9c071a;
}
#cookies .modal-body {
    padding: 0.5rem;
    padding-top: 210px;
}
#cookies p {
    margin-bottom: 0;
    font-size: 0.8rem;
    font-weight: 400;
}
#cookies .modal-footer {
    padding: 0.5rem;
    border-top: none;
}