html, body{
	width: 100%;
	margin: 0;
	padding: 0;
	}

body{
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
	color: #000;
	background: #fff;
	}


/* general */

a{
	color: #316896;
	text-decoration: none;
	}

a img{
	border: none;
	}


a:hover{
	color: indianred;
	text-decoration: underline;
	}

acronym, abbr{
	border-bottom: 1px dashed #333;
	letter-spacing: .07em;
	cursor: help;
	}

.caps{
	font-variant: small-caps;
	font-size: 0.8em;
	letter-spacing: 0.1em;
	}


h1{
	font-weight: normal;
	line-height: 1.5em;
	font-size: 3em;
	}

h2{
	border-bottom: 2px solid #ccc;
	font: 1.6em "Times New Roman", Times, serif;
	margin: 0.2em 0 1em 0;
	color: #316896;
	}

h2 a{
	color: #316896;
	}

h3{
	margin-top: 0;
	font-size: 1em;
	padding: 0.3em;

	font-family: "Times New Roman", Times, serif;
	font-weight: normal;
	border-bottom: dotted 1px #ddd;
	background:  #fcfcfc;
	}

ol li, ul li{
	margin-top: 1em;
	}


/* content */

#whole_content{
	width: 100%;
	margin: 0;
	padding-top: 13.33em;

	font-size: 0.9em;
	line-height: 1.75em;
	}

#head_box{	
	padding: 1em;	
	border-top: 15px silver solid;
	border-bottom: 15px silver solid;
	background: white;
	line-height: 2em;
	text-align: center;
	}

#head_box .desc{
	max-width: 45em;
	margin-right: auto;
	margin-left: auto;
	}

.the_table{
	width: 60em;
	max-width: 90%;
	font-size: 0.8em;
	padding: 1em;
	margin: 3em auto 1em auto;
	text-align: left;
	
	line-height: 1.6em;

	border: 1px gray solid;
	border-radius: 3px;
	}

.one_entry {
	margin: 0;
	padding: 2em 1em;
	text-align: center;
	border-bottom: 1px silver solid;
}

.one_entry:last-child {
    border-bottom: none; /* Removes border from the last item */
}

.courswrapper {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping to new lines if necessary */
    justify-content: center; /* Centers items horizontally */
    gap: 10px; /* Adds some spacing between items */
}

.thumbdiv {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the content inside */
    text-align: center;
    padding: 10px;
    max-width: 150px; /* Adjust width as needed */
}



.titlediv{
	font-size: 1.3em;
	padding: 1em 0;
	}

.version:before{
	content: "v";
	}

.description{
	font-style: italic;
	max-width: 40em;
	margin: 0 auto;
	}

.one_entry:hover{
	background: #fcfcfc;
	}

.thumbdiv img{
	border: 1px gray solid;
	}

.thumbdiv a img{
	-moz-box-shadow: silver 0 0 7px;
	-webkit-box-shadow: silver 0 0 7px;
	box-shadow: silver 0 0 7px;
	}

.thumbdiv a:hover img{
	-moz-box-shadow: gray 0 0 16px;
	-webkit-box-shadow: gray 0 0 16px;
	box-shadow: gray 0 0 16px;
	}

#license_box, .contact_box{
	margin: 3em auto 2em auto;
	padding: 1em;

	color: gray;
	background: #fafafa;
	border: 1px solid #ccc;

	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow: #f0f0f0 0 0 8px;
	-webkit-box-shadow: #f0f0f0 0 0 8px;
	box-shadow: #f0f0f0 0 0 8px;
}

.contact_box{
	font-size: 1.2em;
	width: 39.333em; /* (60+2)*(0.8/1.2) - 2*/
	max-width: calc(100% - 2.4em);
	margin: 3em auto 1em auto;
	
	text-align: center;
}

.contact_box div a{
	display: block;
	padding: 1em;
	margin: 0 2em;
}

.contact_box div a:hover{
	-moz-box-shadow: gray 0 0 3px;
	-webkit-box-shadow: gray 0 0 3px;
	box-shadow: gray 0 0 3px;
	text-decoration: none;
}

.contact_box .log_link span{
	padding-left: 30px;
	background: url(icons/flag_blue.png) center left no-repeat; 
	/* awsome icons CC-by Mark James, famfamfam.com */
}

.contact_box .contact_link span{
	padding-left: 30px;
	background: url(icons/email.png) center left no-repeat; 
	/* awsome icons CC-by Mark James, famfamfam.com */
}

.contact_box .feed_link span{
	padding-left: 25px;
	background: url(icons/feed.png) center left no-repeat;
}

.contact_box .other, .contact_box .note{
	font-size: 0.85em;
	width: 33em;
	max-width: calc(100% - 1em);
	margin: 1.5em auto 0 auto;
	padding: 0.5em;
}


#license_box{
	width: 25em;
	max-width: calc(100% - 2em);
}

#license_box img{
	margin: 10px 3px 3px 3px;
	}

#license_box a{
	border: none;
	}

#license_box a img{
	-moz-box-shadow: gray 0 0 8px;
	-webkit-box-shadow: gray 0 0 8px;
	box-shadow: gray 0 0 8px;
	}

#license_box a:hover img{
	-moz-box-shadow: gray 0 0 16px;
	-webkit-box-shadow: gray 0 0 16px;
	box-shadow: gray 0 0 16px;
	}


/*  footer  */


.credit{
	clear: both;
	font-size: 0.7em;
	margin: 8em 0 1em 0;
	padding: 0.5em 2em 0.2em 2em;

	color: #333333;
	text-align: center;
	border-top: solid 2px whitesmoke;
	opacity: 1;
	}

.credit a, .credit a:hover{
	color: black;
	text-decoration: none;
	}
	
.credit a:hover{
	border-bottom: 1px silver solid;
	}


/* if screen becomes very narrow */

@media all and (max-width: 600px){
	.contact_box{
	padding: 0;
	}
	.contact_box div a{
	margin: 0 1em;
	padding: 1em 0.5em;
	}
}

/* Dark Mode Support */

@media (prefers-color-scheme: dark) {
    body {
        color: #ddd;
  			background: #181818;
    }

    #sidebar_plus_content {
        background: #1e1e1e;
    }

    #whole_content {
        background: #181818;
        color: #e0e0e0;
    }
	
	.main_links a img{
		filter: invert(0.9);
	}
	
	.main_links a:hover{
	  background-color: #333333;
	}
	
	.main_links a:hover img{
		filter: invert(0.85);
	}
	
    .post {
        background: #222;
        color: #f0f0f0;
    }

    .credit {
        color: #bbb;
			
        border-top: solid 2px #444;
    }

    .credit a, .credit a:hover {
        color: #f0f0f0;
    }

    a {
        color: #89CFF0;
    }

    a:hover {
        color: #ff6f61;
    }

    h2 {
        border-bottom: 2px solid #666;
        color: #89CFF0;
    }

    h3 {
        border-bottom: dotted 1px #555;
        background: #222;
        color: #ddd;
    }

    #head_box {
        background: #1a1a1a;
        border-top: 15px #444 solid;
        border-bottom: 15px #444 solid;
        color: #f0f0f0;
    }

    .the_table {
        background: #222;
        border: 1px #555 solid;
    }

    .the_table tr {
        border: 4px #333 solid;
    }

    .the_table tr:hover {
        background: #333;
    }

    .the_table td {
        color: #ddd;
    }
    
    .one_entry:hover{
	      background: none;
	  }

    #license_box, .contact_box {
        background: #1e1e1e;
        color: #bbb;
        border: 1px solid #444;
    }
}