/* CSS file for the updated version of the Solar Cartoon Archive written by Nicolina Chrysaphi, in Glasgow, UK.*/

/* for the entire page: */
body {
    padding: 0% 0% 1% 0%; /* top, right, bottom, left */
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    text-align: justify;
    text-align-last: initial;
    width: 95%;
    height: 100%;
    margin: auto;
}

/* if the window is large (bigger than 1200pt) fix the width at 1100pt: */
@media screen and (min-width: 1200pt) {
    body {
        width: 1100pt;
        margin: auto;
    }
}

/* define the space of the side-navigation bar */
.sidebar_div {
    float: left;
    margin: 0% 0% 0% 0%; /* top, right, bottom, left */
    width: 20%;
}

/* define the space of the title */
.title_div {
    float: right;
    width: 81%;
    margin: 0% 0% 0% 0%; /* top, right, bottom, left */
    padding: 0% 0% 0% 0%; /* top, right, bottom, left */
}

/* define the space of the main body */
.main_body_div {
    float: right;
    width: 81%;
    margin: 0.1% 0% 0% 0%; /* top, right, bottom, left */
}

/* for the side-navigation bar: */
.sidebar {
    height: 100%; /* Full height */
    width: 15%;
    position: fixed; /* Make it stick, even on scroll */
    background-color: rgba(197, 212, 253, 1.0);
    text-align: center; /* left; */
    padding: 5% 0% 0% 0%; /* top, right, bottom, left */
    margin-top: 0%;
    list-style: none;
    list-style-type: none;
    overflow: auto; /* Enable scrolling if the sidebar has too much content */
    overflow-x: auto;
}

/* for each item of the side-navigation bar list: */
.sidebar > li > a, span {
    display: block;
    padding: 8% 5% 8% 5%;
    margin: 3% 0% 3% 0%;
    color: black;
    background: rgb(206, 219, 255);
    text-decoration: none;
    letter-spacing: 0.5pt;
    font-size: 13pt;
    font-weight: bold;
}

/* add a hover effect for each item of the side-navigation bar list: */
.sidebar > li > a:hover, span:hover {
    color: rgb(61, 41, 151);
    text-decoration: underline rgb(61, 41, 151);
    border: none;
    transition: .05s;
    cursor: pointer;
    opacity: 1.0;
}


/**********************
***********************
***********************
**********************/

/* highlight the active page on the side-navigation bar: */
/*.sidebar .current*/ .nav_bar.active {
	color: red;
    /*text-decoration: underline rgb(61, 41, 151); */
}
/*.nav_bar { color: blue; } */

/* DOES NOT WORK -.-
/**********************
***********************
***********************
**********************/


/* for the area around the title: */
.header_div {
     margin: 0% 0% 0% 0%; /* top, right, bottom, left */
}

/* for the home page title: */
.title {
    color: black;
    text-align: center;
    padding: 3% 30% 2% 20%; /* top, right, bottom, left */
    font-size: 30pt;
    font-weight: bold;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    /* clear: both; */
}

/* for the logo: */
.logo {
	text-align: end;
    float: right;
    width: 12%;
    padding: 1% 1% 0% 0%; /* top, right, bottom, left */
}

/* for the update date: */
.update_date {
    text-align: end;
    padding: 0.5% 0.5% 0.1% 0%; /* top, right, bottom, left */
    font-size: 10pt;
    font-style: oblique;
}

/* Include a revision number in the generated files,
   so we can confirm which precise version is actually on the website. */
.revision_number {
    color: gray;
    font-size: x-small;
    margin: 2ex;
    padding: 2ex;
    text-align: right;
    border-top: solid gray 1px;
}

/* for the headers: */
.hdr {
    color: black;
    background-color:  rgba(197, 212, 253, 1.0);
    opacity: 1.0;
    padding: 0.3% 0% 0.3% 1%; /* top, right, bottom, left */
    margin: 0% 0% 0% 0%;
    font-size: 12pt;
}

/* for all sections: */
.sec {
    color: black;
    font-size: 12pt;
    font-family: Arial, Helvetica, sans-serif;
    display: block;
    float: inherit;
    padding: 0% 1% 0.3% 2%; /* top, right, bottom, left */
}

/* for the lists of cartoon entries: */
#toonlist {
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    padding: 0.5% 1% 0% 5%; /* top, right, bottom, left */
}

/* for the side notes (eg 'click on the image...') */
.sidenote { 
    text-align: right;
    font-size: 11pt;
    font-style: oblique;
    line-height: 120%;
}

/* The date/update is in a separate block, within which: */
div.dates {
    text-align: right;
    border-top: solid 1pt;
    padding-top: 4pt;
}

div.dates p {
    /* and bring the paragraphs closer together */
    margin-top: 0pt;
    margin-bottom: 0pt;
    font-size: 11pt;
    font-style: oblique;
    line-height: 120%;
}

/* Words marked class='clickthisword' should be styled so that it's
 * clear to the user that they may click the word for something to happen.
 */
 span.authordate { display: none; }
 span.dateauthor { display: none; }

 /* for the navigation bar: */
.nav_bar {
    background-color: rgba(197, 212, 253, 1.0);
    list-style: none;
    list-style-type: none;
    text-align: center;
    padding: 0% 0% 0% 0%; /* top, right, bottom, left */
    margin: 0% 0% 0% 0%; /* top, right, bottom, left */
}

/* for the navigation bar list: */
.nav_bar > li {
    display: inline;
    padding: 0% 0% 0% 0%; /* top, right, bottom, left */
}

/* for each item of the navigation bar list: */
.nav_bar > li > span{
    display: inline-block;
    color: black;
    text-decoration: none;
    letter-spacing: 0.5pt;
    font-size: 13pt;
    font-weight: bold;
    padding: 1.2% 1% 1.2% 1%; /* top, right, bottom, left */
    margin: 0% 3% 0% 3%; /* top, right, bottom, left */
    background: rgb(206, 219, 255);
}

/* add a hover effect for each item of the navigation bar list: */
.nav_bar > li > span:hover {
    color: rgb(61, 41, 151);
    text-decoration: underline rgb(61, 41, 151);
    border: none;
    transition: .05s;
    cursor: pointer;
    opacity: 1.0;
}

.random_toons {
    display: block;
}