@charset "utf-8";
/* CSS Document */

main > h2 {display: none;}
dl {margin: 0;}
dt {font-family: var(--defaultBookFontFamily); color: #630; font-size: large; font-weight: bold;}
dd {margin: 0 0 1em;}
.alphabet a:link, .alphabet a:visited {text-decoration: none; color: #993333}
.alphabet a:hover, .alphabet a:active, .alphabet a:focus {text-decoration: underline;}
#freedictionary > p {margin-top: 1em;}

#dictionarybox {border: 1px #006600 solid; margin-bottom: 1em; border-radius: 5px; display: grid; grid-template-areas: 'title title title' 'word mode submit';
	position: relative;}

#dictionarybox .externalLink {grid-area: title; background-color: var(--borderYellow); border-bottom: 1px #006600 solid; padding: 0.25rem 0.5rem; 
	text-decoration:none; display: block;}
#span1 {font-size: 12pt; font-weight: bold;}
#span2 {font-size: 8pt;}

.dictionaryLine2 {margin: 0.25rem;}
#dictionaryWord {grid-area: word;}
#dictionaryMode {grid-area: mode;}
#submit  {grid-area: submit;}

#dictionaryWord input {font-size: 10pt; width: calc(100% - 6rem);}
#dictionarybox select {font-size: 10pt;}
#dictionarybox .btnExternal {position: absolute; top: 0; right: 0;}

@media only screen and (max-width: 750px)
{
	/*dt {padding: 60px 0 0;}
	dd {margin: 0 0 calc(-60px + 1em);}
	dt, dd {transform: translateY(-60px);}*/
}
@media only screen and (max-width: 520px)
{
	/*.alphabet {display: none; transform: none;}
	.alphabet:last-of-type {display: block; position: sticky; bottom: 0;}*/
	/*main h2 {padding: 60px 0 0;}
	main h2:last-of-type {padding: 0;}*/
	#dictionarybox { grid-template-areas: 'title title' 'word word' 'mode submit';}
	#mode {margin-left: 1em;}
}