* { margin: 0; padding: 0; }
html { min-height: 100%; }

/* Layout */
body.spring {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://source.unsplash.com/daily?spring');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
}

body.summer {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://source.unsplash.com/daily?summer');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
}

body.autumn {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://source.unsplash.com/daily?autumn');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
}

body.winter {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://source.unsplash.com/daily?winter');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
}

body.december {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://source.unsplash.com/daily?december');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
}

body {
    font: 14px/20px sans-serif;
    text-shadow: 1px 0 2px #000;
    text-align: center;
    transition: all 0.5s ease;
    width: 85%;
    padding: 15px;
    margin: 0 auto;
    color: #eeeeee;
}

header {
    /*border-bottom: 1px solid #cccccc;*/
    border-bottom: 1px solid transparent;
    margin: auto auto 1.2em auto;
}

footer {
    border-top: 1px solid #cccccc;
    font-size: 13px;
    position: fixed;
    bottom: 6px;
    z-index: 1;
    width: inherit;
    height: 1.1em;
    padding: .2em;
}

main {
    margin: 25px auto;
    max-width:100%
}

.middle-center {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

ul li {
    list-style: initial;
    padding-left: 20px;
    margin-bottom: 0.2em;
}

/* Typography */
a { color: #eeeeee; text-decoration: none; }
a:hover, a:focus { color: #41B1FF; text-decoration: none; }
a:active { color: #105CB6; }

h1 { font-size: 30px; line-height: 20px; margin-bottom: 10px; }
h2 { font-size: 24px; line-height: 20px; margin-bottom: 8px; }
h3 { font-size: 20px; line-height: 20px; margin-bottom: 8px; }
h4 { font-size: 16px; line-height: 20px; }
h5 { font-size: 14px; line-height: 20px; }
h6 { font-size: 12px; line-height: 20px; }
h1,h2,h3,h4,h5,h6 { color:#eee; }

.float-left     { float: left; margin:auto;}
.float-right    { float: right; margin:auto;}
.float-center   { margin: auto; }
img.float-left  { float: left; margin: 0 20px 20px 0; }
img.float-right { float: right; margin: 0 0 20px 20px; }
img.center 		{ margin: 0 auto; display: block; }
span.float-right { margin-left: 5px; margin-right: 5px;}
span.text-left { margin-left: 5px; }

.text-left 	  { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-justify { text-align: justify; }
.big { font-size: 1.5em;}

/* Misc */
hr { background-color: #cccccc; border: 0; color: #cccccc; height: 1px; margin-bottom: 20px; }

/* List */
ul { margin-bottom: 20px; list-style-type: none; margin-left: 30px; }
ol { margin-bottom: 20px; list-style-position: inside; }
ul ul, ol ol { margin-bottom:0; }

.searchbar input[type=text] {
    padding: 4px;
    width: 50%;
}

.sourcelist { bottom: 3px; position: relative; }

select { padding:2px; min-width: 30px; }

/* Table */
table {width: 100%; margin-bottom: 20px;}
th { font-weight: bold; }
tr { width: 100%; }
td { text-align: left; padding: 0 10px 0 10px;}
tfoot { font-style: italic; }
tr:hover { background: #cccccc; text-shadow: none; }
tr:hover a { color: #111111; }
tbody:hover tr { color: #111111; }
td a { display: block; }

/* to show posters */
.ca-menu { padding: 0; margin: 0; }

.ca-menu li{
    display: inline-block;
    width: 185px;
    margin: 20px auto;
}

.ca-menu li img{
    width: 110px;
    height: 146px;
    transition: all 0.5s ease;
}

.progressbar {
    width: 100%;
    max-width:100%;
    min-width: 400px;
}

.progressbar progress {
    width: inherit;
    max-width: 100%;
    height: 42px;
    text-align: center;
    margin-bottom: 20px;
    background: linear-gradient(rgba(9, 9, 9, 0.4), rgba(9, 9, 9, 0.4));
    border: 1px solid #cccccc;
}

div.show-image {
    position: relative;
    margin: 10px auto;
    transition: all 0.5s ease;
}

div.show-image:hover img {
    opacity:0.75;
    transition: all 0.5s ease;
}

div.show-image:hover a.delete {
    display: block;
}

div.show-image a.delete {
    position: absolute;
    display: none;
    top: 0;
    right: 0;
    margin-right: 25px;
}

#scroll { 
    position: relative;
    padding-right: 8px; 
    height:342px;
}

div.row div p { margin-bottom: 0.5em; }

aside.bottom {
    position: relative;
    bottom: 0;
    margin: 0 auto;
}

.plot {
    margin: 20px auto;
    padding: 10px;
    border: 1px #ccc solid;
    box-shadow: 3px 1px 3px #000;
}

nav {
    margin: 10px auto;
    line-height:1.1em;

}

.plotposter {
    height: 300px; 
    float: left; 
    margin-right: 25px;
    border: 1px #ccc solid;
    box-shadow: 3px 1px 3px #000;
}

.toupgradealert {
    background-color:rgba(30,30,30,0.5);
    color:#fff;
    position:fixed;
    top:22px;
    right:1px;
    padding: 5px 5px 5px 5px;
    transform: rotate(30deg);
    z-index:1;
    max-width:110px;
    border-radius:25px;
    font-family:monospace;

}
