/* Fonts & colors */
body		{
    font-family: sans-serif;
    font-size: 12pt;
    background: white;
    color: #494e52;
    margin: 0.8em;
    animation: intro 0.5s both;
    animation-delay: 0.0s;
    transition: all 0.2s ease-in-out;
}

/* Max width */
html {
    padding: 20pt;
}

body {
    max-width: 60rem;
    margin: 0 auto !important;
    position: relative;
}

#brandheader {
    text-align: center;
    width: 100%;
    background: url('/header-center.png');
    background-position: bottom;
    background-size: contain;
    position: relative;
    height: 100px;
    display: block;
}

#brandleft {
    width: 100px;
    height: 100px;
    background: url('/header-left-bg.png');
    margin-left: 0;
    float: left;
}

#brandright {
    float: right;
}

.sidebox {
    /* position: sticky; */
    float: right;
    /* width: 12em; */
    top: 0.5em;
    /* right: calc(2 * 0.6rem); */
    background: white;
}

@media screen and (max-width: 768px) {
    html {
        padding: 20pt 5pt;
    }
    
    #brandheader {
        height: 50px;
    }
    
    #brandleft {
        /* display: none; */
        height: 50px;
        width: 50px;
        background-size: contain;
    }
    
    #brandright {
        display: none;
    }
}

a		{ text-decoration: none; font-weight: bold; }
/* a:link		{ color: #00853c; } */
a:link		{ color: #0c80c9; }
a:active	{ color: red; }
/* a:visited 	{ color: #00652e; } */
a:visited 	{ color: #527587; }

a:hover		{ text-decoration: underline; }

a.toc, ul.links li a			{ display: block; }
a.toc:hover, /* ul.links li a:hover, */ div.blog h2, div.miata-newlist hw, div#guikachu-map, .fileentry:hover	{ background: #f3f3f3; }

h1, h2, h3, th	{ font-weight: bold; }
h1.headline	{ font-size: 2.5em; text-align: center; margin: 0 0 1ex }
h1.subheadline	{ font-size: 1.6em; text-align: center; margin: 0 0 1ex }
h1		{ font-size: 1.6em; text-indent: -5pt; margin: 1ex 0 .5ex}
h2		{ font-size: 1.3em; }
h3		{ font-size: 1.2em; }
small		{ font-size: .8em; }

ul		{ margin-left: 0; }
ul li           { margin-bottom: 1.5ex }
dl		{ margin-left: 1em; }

dd pre		{ padding: 0; margin-top: 0.5em; margin-bottom: 0.5em; }

table.spaced    { border-collapse: collapse }
table.spaced td { padding-left: 1em; padding-right: 1em; }
table.spaced th { padding-left: 1em; padding-right: 1em; }

/* Document structure */
div.content, div.content2, div.contentbox {
    background: white;
    padding: 1ex .6rem 1ex .6rem;
    text-align: left;
}

/* div.content, div.content-ad	{ background: #f8f8f8; */
/* 				  /\* padding: 1ex .6em 1ex .8em; *\/ */
/*                                   /\* border: dashed 1px #d3d3d3; *\/ */
/* 				  /\* margin: 0; *\/ } */
div.content-ad, div.ad-content2	{ margin-right: 165px; }
div.adsense			{ position: absolute; width: 160px; right: 0;
				  padding: 0 5px 5px 0;
				  margin: 0 }
div.contentbox			{ padding-bottom: 0; margin-bottom: 1em;  }
div.contentbox h2		{ font-size: 1em; margin: 0 0 0.5ex}

p		{ text-align: justify; hyphens: auto }
li		{ text-align: justify }
ol > li         { text-align: left; }

hr		{ width: 100%;
		  border: none; border-bottom: solid 1px #d3d3d3; }
hr.sep          { border-bottom: solid 1px black; }
div.content > hr { margin-left: -5pt; }

.centered	{ margin-left: auto; margin-right: auto; text-align: center; }

ul		{ padding-left: 1.5em; }

hr.footer       { border: none; clear: both; }
#footer		{ text-align: center; margin-top: 1em; clear: both; }
#footer a	{ color: #0c80c9; }

/* Horizontal link bar */
#linkbarlist				{ list-style: none; padding: 0; margin: 0; }
#linkbarlist li				{ display: inline; padding: 0; margin: 0; }
#linkbarlist li:before			{ content: " | "; }
#linkbarlist li:first-child:before	{ content: ""; }
/* IE workaround */
* html #linkbarlist li			{ border-left: 1px solid black; border-right: 1px solid black;
					  padding-left: 10px; padding-right: 10px; margin-left: -1px }

/* Photo stuff */
ul li img	{ margin: 2px 0 0 0; border: none }

.blog img { max-width: 80% }

.iconlist	{ list-style-type: none;
		  margin: 0;
		  padding: 0; }

li.image, li.locked	{ background-repeat: no-repeat;
			  background-position: 0 50%;
			  padding: 0 0 0 20px;
			  margin: .4em 0; }
li.image		{ background-image: url(/icon/image.png) }
li.licked		{ background-image: url(/icon/locked.png) }

/*.iconlist a		{ display: block} */
/* .iconlist a:hover	{ background-color: #eeebe5; text-decoration: none} */

.code		{ background: #e0e0e0; }
div.code	{ margin-left: 0; margin-right: 0;
		  padding: 0 0.2em 0 0.2em; }
.code .sourcelink { text-align: right; display: block }
pre             { padding-top: 1ex; padding-bottom: 1ex; }

/* Thumbnail lists */
.thumbbox			{ float: left;
				  width: 175px;
		  		  /* padding-left: 10px; padding-right: 10px; padding-bottom: 10px; */
				  margin: 0 10px 10px; }

.thumbbox .imgbox		{ height: 180px;
				  position: relative; }
.thumbbox .imgbox .align  	{ text-align: center; width: 100%;
				  position: absolute; bottom: 0; }

.thumbbox .caption		{ text-align: center; height: 2em; display: block }

.caption			{ display: block; }
/*.thumbbox:hover			{ text-decoration: underline; border: #eeebe5 solid 2px;
				  margin: 0px 8px 8px;}*/
.thumbbox, .imgbox, .align	{ display: block; }

/* div.spacer			{ clear: both; } */

/* Thumbnail images */
img.thumbnail, .thumbbox img	{ border: none; }


/* filelist stuff */
table.filelist			{ border-spacing: 0 }
.fileentry a			{ display: block; text-decoration: none }
.fileentry .size		{ text-align: right }
.fileentry .time		{ text-align: center; padding-left: .1em }
.fileentry .description		{ text-align: left }
.fileentry .size a,
.fileentry .time a,
.fileentry .description a	{ color: black; font-weight: normal; text-decoration: none }


/* guikachu stuff */
div#guikachu-map	{ float: right; margin: .5em 0 0 1em; padding: 0.5em 0 0.5em 0.5em}
#guikachu-map ul	{ margin: 0; padding-left: 1em; padding-right: 0.5em}
#guikachu-map a		{ display: block; color: #0c80c9; }
#guikachu-map a:hover	{ background-color: #dedbd4; text-decoration: none }

table.guikachu-newslist	td { padding-bottom: 0.5em; }


/* miata stuff */
div.miata-newslist h2	{ font-style: italic; font-size: 1.1em; font-weight: bold; }
div.miata-newslist h3	{ font-size: 1em; }
div.miata-newslist img	{ border: none; }
/* div.miata-newslist + *	{ clear: both; } */

/* blog stuff */
div.blog h2 	{ display: block; color: black}
div.blog h2	{ font-style: italic; font-size: 1.5em; font-weight: bold;
		  margin-bottom: 0; }
/*div.blog h3	{ font-size: 1em; }*/
/* div.blog h3	{ font-style: italic; font-weight: bold; font-size: 1.2em } */
div.blog h3	{ font-weight: bold; font-size: 1.4em }
div.blog h4	{ font-weight: bold; font-size: 1.2em }
div.blog img	{ border: none; }

ul.bloglinks li a { font-size: 1.2em; font-style: italic; text-align: left}
ul.bloglinks li a small { font-weight: normal; color: black; font-style: normal }

ul.links
  { margin: 0 0 0.7ex 0; list-style: none; padding-left: 0em; }
ul.links li
  { display: inline-block;
    /* float: left; */
    margin: 0;
  }
ul.links li a
{ padding: 0; margin: 0; padding-left: 0.25em; padding-right: 0.25em; }
/* ul.links li a:hover */
/*   { text-decoration: none } */

.blogcomments		{ background-color: #f8f8f8}
.blogcomments h3 	{ margin-bottom: 2pt; margin-top: 0; background-color: #e0e0e0 }
.blogcomments small 	{ font-weight: normal; font-size: 0.6em }
.blogcomments div.comment { padding-bottom: 1.5em; }
.blogcomments div.special { padding-bottom: 1.5em; }
.blogcomments .special	{ background-color: #daeaf3;}


/* CV stuff */
.cv th		{ border-bottom: black 1px solid; padding-top: .3em}
.cv th		{ font-size: 1.6em; text-indent: -5pt; margin: 1ex 0 .5ex;}
.cv .title	{ text-align: right; font-style: italic }
.cv .value	{ }
.cv 		{ border-spacing: .5em 0}


/* Lightbox */
#lightbox{
	background-color:#eee;
	padding: 10px;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
	}
#lightboxDetails{
	font-size: 0.8em;
	padding-top: 0.4em;
	}	
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }

#lightbox img{ border: none; } 
#overlay img{ border: none; }

ol.custom {
  list-style: none;
}

ol.custom > li:before {
    content: attr(seq) ". ";
    margin-left: -1em;
}

.shadow {
    box-shadow: 5px 5px 12px rgb(0,0,0);
}

.img-left {
    float: left;
    margin-right: 1em;
    margin-bottom: 1em;
}

.img-right {
    float: right;
    margin-left: 1em;
    margin-bottom: 1em;
}

blockquote, div.code {
    margin-left: 0; margin-right: 0;
    padding-left: 1em; padding-right: 0; 
    /* border-left: 0.2em solid #0c80c9; */
}

blockquote {
    border-left: 0.2em solid #0c80c9;
}

div.code {
    overflow-x: scroll;
}

div.code::-webkit-scrollbar {
  height: 8px;
  background-color: #eff1f5;
}

div.code::-webkit-scrollbar-track{
  border-radius: 3px;
  background-color: transparent;
}

div.code::-webkit-scrollbar-thumb{
  border-radius:5px;
  background-color:#0c80c9;
  border:2px solid #eff1f5
}

.toggle_collapse + * > .collapsed {
    /* clip: rect(auto, auto, calc(1.3rem + 2 * 5pt - 10px), 40em); */
    clip: rect(auto, auto, 0, 40em);
    position: fixed;
    top: 0;
    right: 0;
    transition: clip .3s ease-in-out;
    /* transition: clip 2s cubic-bezier(0.68, -0.6, 0.32, 1.6); */

    width: calc(100vw - (2 * (0.6rem + 20pt)));
    max-width: 60rem;
    /* height: 10em; */
}

.sidebox {
    border-radius: 8px;
}

.sidebox h2 {
    margin: 5px;
    float: right;
}

.floatleft {
    float: left;
    margin-right: 1em;
    margin-bottom: 1em;
}

.floatright {
    float: right;
    margin-left: 1em;
    margin-bottom: 1em;
}

@media screen and (max-width: 768px) {
    .toggle_collapse + * > .collapsed {
        /* width: calc(100vw - (2 * (0.6rem + 5pt))); */
        width: calc(100vw - (2 * (0.6rem + 5pt)));
    }

    .sidebox h2 {
        font-size: 110%;
    }

    .floatleft {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    .floatright {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}

.toggle_collapse + * {
    filter: drop-shadow(5px 5px 6px rgba(0, 0, 0));
}

.toggle_collapse:checked + * > .collapsed {
    clip: rect(auto, auto, 15em, 0);
}


.maxheight {
    max-height: 10em;
    overflow-y: clip;
}

.maxheight:before {
    float: right;
    /* font-style: italic; */
    font-weight: bold;
    color: #0c80c9;
    content: 'Click to expand';
}

.maxheight:hover:before {
    text-decoration: underline;
}

.toggle_height:checked + * .maxheight {
    max-height: none;
    overflow-y: auto;
}

.images {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}


@keyframes intro {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}