/* Dotjay Lab, 21 Dec 2006, 8 Oct 2009, 7 Apr 2021, 27 Jul 2021
*/



/* undo some default styles
*/

*{
margin:0;
padding:0;
}

:link img,
:visited img,
fieldset{
border:0;
}



/* main styles
*/

html{
font-size:100.01%;
}

body{
background:#fff;
color:#333;
/*font:1em/1.5 'lucida grande','bitstream vera sans',verdana,sans-serif;*/;
font:400 16px/1.4 "Helvetica Neue","Liberation Sans",Arial,Verdana,Helvetica,FreeSans,sans-serif;
margin:1em 5% 2em;
/*width:45em;*/
}
header,
main,
footer{
width: 600px;
margin:0 auto;
}
footer p{
border-top:20px solid #943739;
color:#444;
margin:0 -.5em;
padding:20px .5em;
background:#F7F7F7;
font:1.625em/1.231 courier,monospace;
letter-spacing:-0.039em;
}


/* logo
*/

#logo {
 margin:2em 0 1em -4px
}
#logo a:link,
#logo a:visited {
 font:1.714em courier,monospace;
 text-decoration:none;
 padding:4px
}
#logo a:hover {
 background: #FFF;
 color: #C00;
}
#logo a:focus,
#logo a:active {
 border: 2px solid #C00;
 padding: 2px;
 background: #EEE;
 color: #C00;
 outline: 0;
}


/* main menu
*/

#top-nav {
 text-transform:none
}
#top-nav li {
 font-size:1.6em;
 line-height:1;
 margin:0;
 padding: 0;
 letter-spacing:.025em
}
#top-nav li:first-child {
 margin-left:-10px
}
#top-nav .nav a {
 font-size:1.125em;
 padding:.5em .667em
}
#top-nav .nav li:hover>a,
#top-nav .nav a:hover {
 background-color: #FFF;
 color: #C00;
}
#top-nav .nav a:focus {
 background-color: #EEE;
 color: #C00;
 outline: 0;
}
#menu-main-navigation {
 width:100%
}
#menu-item-333,
#menu-item-337 {
 float:right
}
#menu-item-333 a:link,
#menu-item-333 a:focus,
#menu-item-337 a:link,
#menu-item-337 a:focus {
 background-image:url(https://ui.dotjay.com/svg/lab.svg);
 background-position:0 50%;
 background-repeat:no-repeat;
 background-size:1.111em;
 padding-left:1.278em;
 margin-left:.667em
}
#menu-item-333 a:link,
#menu-item-333 a:focus {
 background-image:url(https://ui.dotjay.com/svg/blog.svg)
}

.nav {
 list-style: none;
 font-size: 10px;
 display:inline-block;
 line-height:100%;
 margin:0;
 padding: 5px 0
}
.nav a {
 color:##00C;
 display:block;
 margin:0;
 padding:8px 10px;
 text-decoration:none
}
.nav a:hover {
 background:#666;
 color:#fff
}
.nav .current a,
.nav li:hover>a {
 background:#666;
 color:#fff
}
.nav li {
 float:left;
 margin:0 5px;
 padding:0 0 8px;
 position:relative
}
.nav li:hover>ul {
 display:block;
 z-index:9999
}
.nav ul {
 background:#fff;
 border:1px solid #b4b4b4;
 display:none;
 left:0;
 margin:0;
 padding:0;
 position:absolute;
 top:25px;
 width:185px
}
.nav ul a {
 font-weight:normal
}
.nav ul a:hover {
 background:#666!important;
 color:#fff!important
}
.nav ul ul {
 left:185px;
 top:-1px
}
.nav ul li {
 float:none;
 margin:0;
 padding:0
}
.nav ul li:hover a,
.nav li:hover li a {
 background:0;
 border:0;
 color:#666
}


/* location bar
*/

#location{
line-height:2.462;
}

#location img{
float:left;
margin:.5em .5em 0 0;
}

#location > a:first-child{
padding:0;
}



/* content styles
*/

h1,
h2{
background:#F7F7F7;
font:1.625em/1.231 courier,monospace;
letter-spacing:-0.039em;
margin:1.25em -0.5em 0.75em;
padding:0.125em 0.5em;
}

h1{
border-top:20px solid #943739;
color:#444;
margin:0 -0.5em;
padding:20px 0.5em;
}

h1 span{
display:block;
font-size:0.75em;
}

h2{
color:#943739;
}

h2[id^=""]:hover:after{
content:" (#" attr(id) ")";
font-size:0.75em;
}

h3{
border-top:2px solid #F7F7F7;
margin:1.25em 0 0.75em;
}

h4{
margin:1.75em 0 0.75em;
}

p{
margin:1em 0;
}

dl,
ol,
ul{
margin:1em 0 1em 2em;
}

dl.key dt{
background:#F5F5F5;
float:left;
margin-right:1em;
text-align:center;
width:2em;
}

ul.block-strong li strong,
ol.block-strong li strong{
display:block;
}

ol.alpha{
list-style:lower-alpha;
}

ol.disc{
list-style:disc;
}

li{
margin-bottom:0.75em;
}

blockquote{
font:1em/1.5 Georgia,'Times New Roman',Times,serif;
font-style:italic;
margin:1em 0 1.5em 2em;
}

a,
a:link,
a code{
color:#00F;
padding:1px;
text-decoration:underline;
}

a:focus,
a:hover,
a:active{
transition: color .3s ease;
}

a:focus,
a:focus code{
background:#00F;
color:#FFF;
}

a:hover,
a:hover code,
* html a:active{
background:#00F;
color:#F7F7F7;
}

em{
background:#EEE;
font-style:italic;
padding:1px;
}

em.stress{
background:none;
font-style:italic;
font-weight:bold;
}

a:focus em{
background:#00F;
}

a:hover em,
* html a:active em{
background:#00F;
}

a.footnote{
font-size:0.75em;
vertical-align:super;
}

a.footnote span{
position:absolute;left:-9999px;
}

strong{
font-weight:bold;
}

del{
text-decoration:line-through;
}

ins{
text-decoration:none;
}

code,
kbd{
background:#F0F0F0;
font-size:1.25em;
}

p code,
li code{
font-size:1em;
}

a:focus code,
a:focus kbd{
background:#00F;
}

a:hover code,
a:hover kbd,
* html a:active code,
* html a:active kbd{
background:#00F;
}

pre{
display:block;
overflow:auto;
width:100%;

background:#F0F0F0;
margin:0.5em 0;
padding:1em 10px;
}

pre code{
background:none;
}

span.sup{
font-size:0.75em;
vertical-align:super;
}

img.figure-float{
float:right;
border:1px solid #E0E0E0;
padding:1px;
margin:1em 0 1em 1em;
}



/* forms
*/

fieldset{
margin-top:1.5em;
padding:1em;
}

legend{
font-weight:bold;
}

label{
display:block;

margin-bottom:1em;
}

input,
textarea{
display:block;

font:1em Verdana,sans-serif;
margin-bottom:1em;
padding:0.1em;

width:35em;
}

input.button{
width:auto;
}



/* tables
*/

table{
font-size:1em;
line-height:1.5;
text-align:left;
width:100%;
}

td,
th{
background:#F5F5F5;
border:1px solid #E0E0E0;
border-width:0 1px 1px 0;
padding:0.75em 1em;
text-align:left;
vertical-align:top;
}

th{
background:#E0E0E0;
font-size:1.5em;
line-height:1;
}

td h3{
font-size:1em;
margin:0;
padding:0;
}

td.agent{
width:9.5em;
}

td.result{
width:30%;
}

/*
table{
border-collapse:collapse;
border: 0.188em double #ddd;
margin:1em 0;
}
thead{
background:#f0f6f6;
}
th{
letter-spacing:-0.042em;
text-align:left;
padding:0.5em;
color:#943739;
border-right:0.042em solid #ddd;
}
td{
line-height:1.5em;
padding:0.75em;
border-top:0.063em solid #ddd;
border-right:0.063em solid #ddd;
}
th.end,td.end{border-right:0;} 
*/



/* additional
*/

.to-do{
color:#F00;
}

div.test{
position:relative;
}

div.test div.content{
margin-right:20em;
}

div.test div.listen{
position:absolute;
top:0;
right:0;
width:17em;
}


/* responsive
*/

@media all and (max-width: 980px) {

header,
main,
footer{
width:90%;
padding:0 5%;
}

}

/* dark theme
*/
@media (prefers-color-scheme: dark) {

body{
background:#000;
color:#CCC;
}

h1,h2,footer p{
background:#222;
color:#BBB;
}

a:link,
a:visited,
a code{
color:#88F;
}

code,
em,
kbd,
th{
background:#222;
}

}