/* HTML 5 compatibility for older browsers */
header, section, footer, aside, nav, main, article, figure {
    display: block
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, "Lucida Sans Unicode", "Lucida Grande",  sans-serif;
    background: #cbebb3;
}

a { text-decoration: none; }
a:link { text-decoration: none; }
a:visited {text-decoration: none;}
a img {border: none; }

footer, h1 {text-align: center;}

article {
    padding: 1cm
    }

footer {
    margin: 2cm
}

nav {
    padding: 8px;
    font-size: x-small;
    float: left;
}

nav ul li {
    list-style-type: none;
}

nav ul {
    margin: 0;
    padding: 2px;
    position: absolute;
    font-size: medium;
    z-index: 1;
}

nav ul li {
    display:none; /* hide */
}

nav ul:hover li {  /* show menu items on hover */
    display: block;
}

nav ul li a {
    display: block;
    text-align: center;
    padding: 6px 10px;
    background-color: #72ab27;
}

nav ul li a:hover {
    background-color: #555;
    color: #fffbff;
}


aside {
    float: left;
    font-size: 80%;
    margin: 32px;
    clear: left;
}

aside h4 {
     margin: 6px;
}

aside ul {
    margin-top: 0.25em;
    list-style: circle;
}

aside a {
    display: inline-block;
    padding: 2px;
}

#Valid {
    position: fixed;
    padding: 5px;
    bottom: 5px;
    right: 5px;
}

#Logo_container {
    float: right;
    margin: 20px;
    width: 280px;
}
#Logo_text {
    color: goldenrod;
    font-size: 2.4em;
}

#Logo {
    width: 50%;
    padding: 6px;
    float: left;
    }

/* Classes */

.display {
    display: block;
}

.hidden {
    display: none
}

.right {
    float: right;
    margin-left: 8px;
    margin-bottom: 8px;
}

.left {
    float: left;
    margin-right: 8px;
    margin-bottom: 8px;
}

.clear {
    clear: both;
}

.center {
    display: block;
    margin: auto;
    text-align: center;
    margin-bottom: 16px;
}

.fullwidth {
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.valign-middle {
    vertical-align: middle;
}

.smaller {
    font-size: 85%
}

.italic {
    font-style: italic;
}

.indent {
    padding: 1em
}

.box {
    border: 1px solid grey;
}
.round {
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

.highlight {
    background-color: #f9f9f9;
}

.active {
    background-color: #72AB28;
    color: goldenrod;
}

.shadow {
    box-shadow: 2px 2px 4px grey;
    -moz-box-shadow: 2px 2px 4px grey;
    -webkit-box-shadow: 2px 2px 4px grey;
    filter: drop-shadow(4px 4px 4px grey);
    -webkit-filter: drop-shadow(4px 4px 4px grey);
}

.sold-out {
    color: red;
    font-variant: small-caps;
}

.container {
    overflow: auto;
}

/* Blog classes */

.post{
    padding: 10px 0 15px 0;
    border-bottom: 1px solid goldenrod;
//
    max-width: 60%;
}

.post .date{
    font: bold 12px 'Open Sans Condensed', sans-serif;
    text-transform: uppercase;
    color: #a7a7a7;
    margin: 24px;
    position: relative;
}

/* The calendar icon is set as a data url */

.post .date:before{
    width:18px;
    height:18px;
    position:absolute;
    content:'';
    left: -22px;
    top: -1px;
    background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoyNjZDQjA1OTM1ODZFMjExQUUwM0IwQzQwMjlEOTczMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpENjYzQjI4QjhCNDYxMUUyQjNENkFGQ0NCRUExRDM1NSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpENjYzQjI4QThCNDYxMUUyQjNENkFGQ0NCRUExRDM1NSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4NjA1NUJCNzUzOEFFMjExQUUwM0IwQzQwMjlEOTczMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyNjZDQjA1OTM1ODZFMjExQUUwM0IwQzQwMjlEOTczMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhTXJRoAAADXSURBVHjaYvz//z8DNQDL7t27sYmDTGfEoQdDztXVlYEJyg4B4rdA/AGLJhjGJgfS4wfiwAyaCcRCQMwGxMxQMTY0jdjkQHqmwQzihwqAACcQ50CdXoRmEC45aXAYYQmDCVDMQIocskGMZEbYB+QwQokBEAaCzch8dDF0wMRAJcC4a9cufqjzYF7bTKReX5jXgC4UYMHiNbACYEJ9AaQkkL2BLIaekIeA15AUbEZiM+ARo67XQAZ9BOJ3eFxGSOwFcspOBOLnoBgh0SEgQ+LAgU2tgg0gwACqTkAIjemp4gAAAABJRU5ErkJggg==')
}

div.post p { 
    clear: both;
}

img.valign-middle {
    padding-right: 8px;
}

.pagination {
    padding: 5px 0;
    border-bottom: none;
}

.pagination-arrow {
    padding: 0 5px;
    font-size: x-large;
}

.disabled {
    color: grey;
}

.plaintext {
    color: black;
}

.read_more {
    font-size: small;
    font-style: italic;
    color: grey;
}

.debug {
    border: 1px solid orange;
}