* {
	box-sizing: border-box;
}

:root
{
  --button-shadow-color--top: rgba(0, 0, 0, 0.1);
	--button-shadow-color--bottom: hsla(0, 0%, 100%, 0.5);
	--button-shadow-width: 3px;
	--button-shadow-width--: -3px;
	--body-bg: #F8F8F8;
	--button-bg: #F3F3F3;
	--button-radius: 30px; 
	--ced-red: #E90707;
	--ced-green: #10D000;
}

html
{
	height: 100%;
}

body
{
	background-color: var(--body-bg);
	color: Black;
	font-family: Plain, Arial, sans-serif;
	margin: 0px;
	min-width: 780px;

}

a
{
	color: var(--ced-red);
	text-decoration: none;
}

a:hover
{
	text-decoration: underline;
}

#topmenu
{
	display: flex;
	gap: 1rem;
	padding: 0;
	margin-top: 1rem;
	margin-left: 1rem;
	margin-right: 1rem;
	margin-bottom: 2rem;
	font-size: 0.9rem;
	justify-content: center;
}

#topmenu li
{
	display: block;
	flex-grow: 1;
	max-width: 20em;
}

#topmenu li a
{
	display: block;
	line-height: 2.6rem;
	border-radius: var(--button-radius);
	text-align: center;
	text-decoration: none;
	color: Black;
	padding-left: 2em;
	padding-right: 2em;
	background-color:var(--button-bg);
	box-shadow: 0 var(--button-shadow-width--) 0 0 var(--button-shadow-color--bottom), 0 var(--button-shadow-width) 0 0 var(--button-shadow-color--top);
}

#topmenu li a:hover, #topmenu li a.actived
{
	--button-shadow-width: -3px;
	--button-shadow-width--: 3px;
}

#topmenu li#logomenu
{
	flex-grow: 0;
}

#topmenu li#logomenu a
{
	border-radius: 0;
	background-color: transparent;
	box-shadow: 0 0 0;
	background-image: url('images/ced-laa.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	width: 250px;
}

#topmenu li#logomenu a:hover
{
	background-image: url('images/ced-laa-act.svg');
}

#topmenu li#menupad
{
	flex-grow: 0;
	width: 100px;
}

.contents
{
	max-width: 810px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1em;
	padding-right: 1em;
}

.contents_pad
{
	margin-top: 4rem;
}

.contents_pad2
{
	margin-top: 3rem;
	margin-bottom: 4rem;
}

.contents_bottom
{
	padding-bottom: 4rem;
}

.contents_center
{
	text-align: center;
}

.header
{
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2rem;
}

#intro p, .contents_justify p
{
	text-align: justify;
}

#intro
{
	margin-top: 3rem;
	margin-bottom: 2rem;
}
/* search */
.search
{
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2rem;
}

#search_form
{
	display: flex;
	gap: 1em;
}

#search_form input#query
{
	display: block;
	line-height: 2.6rem;
	border-radius: var(--button-radius);
	text-align: left;
	padding-left: 2em;
	text-decoration: none;
	color: Black;
	background-color: White;
	box-shadow: 0 var(--button-shadow-width--) 0 0 var(--button-shadow-color--bottom), 0 var(--button-shadow-width) 0 0 var(--button-shadow-color--top);
	border: 1px solid Silver;
	flex-grow: 1;
}

#search_form input#query:focus
{
	outline: none;
	border: 1px solid #87CEFA;
}

#search_form input#sbutton
{
	display: block;
	line-height: 2.6rem;
	border-radius: var(--button-radius);
	text-align: center;
	text-decoration: none;
	color: Black;
	background-color:var(--button-bg);
	box-shadow: 0 var(--button-shadow-width--) 0 0 var(--button-shadow-color--bottom), 0 var(--button-shadow-width) 0 0 var(--button-shadow-color--top);
	border: 0;
	cursor: pointer;
	width: 180px;
	flex-grow: 0;
	font-family: Plain, Arial, sans-serif;
	font-size: 1rem;
}

#search_form input#sbutton:hover
{
	--button-shadow-width: -3px;
	--button-shadow-width--: 3px;
}

/* buttons */
.navbuttons
{
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
	padding: 0;
	margin-top: 1rem;
	margin-left: 1rem;
	margin-right: 1rem;
	margin-bottom: 2rem;
	justify-content: center;
}

.navbuttons li
{
	display: block;
	flex-grow: 0;
}

.navbuttons li a
{
	display: block;
	line-height: 2.6rem;
	border-radius: var(--button-radius);
	text-align: center;
	text-decoration: none;
	color: Black;
	background-color: #fef628;
	box-shadow: 0 var(--button-shadow-width--) 0 0 var(--button-shadow-color--bottom), 0 var(--button-shadow-width) 0 0 var(--button-shadow-color--top);
	padding-left: 2em;
	padding-right: 2em;
	word-break: keep-all;
	min-width: 12em;
}

.navbuttons li a:hover
{
	--button-shadow-width: -3px;
	--button-shadow-width--: 3px;
}

.navbuttons_gray li a
{
	background-color: var(--button-bg);	
}

h2
{
	text-align: center;
	font-size: 2rem;
	color: #b1b1b1;
	font-weight: normal;
}

h1
{
	text-align: center;
	font-size: 3rem;
	color: Black;
	font-weight: normal;
}

.pitem
{
	display: block;
	border-radius: var(--button-radius);
	text-align: left;
	text-decoration: none;
	color: Black;
	background-color:var(--button-bg);
	box-shadow: 0 var(--button-shadow-width--) 0 0 var(--button-shadow-color--bottom), 0 var(--button-shadow-width) 0 0 var(--button-shadow-color--top);
	padding-left: 2em;
	padding-right: 2em;
	padding-top: 1em;
	padding-bottom: 1em;
	margin-bottom: 1em;
	display: flex;
	gap: 1em;
}

.author
{
	color: var(--ced-green);
}

.pimg
{
	width: 5em;
	height: 5em;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	flex-grow: 0;
	flex-shrink: 0;
}

.ptxt
{
	flex-grow: 1;
	flex-shrink: 1;
}

.lazy_load
{
	max-width: 10px;
	max-height: 10px;
	position: absolute;
	right: 10px;
	bottom: 10px;
}

.coversplit
{
	display: flex;
	gap: 1em;
}

.coversplit .coverimg
{
	width: 300px;
}

.coversplit .coverimg img
{
	max-width: 280px;
}

.coversplit .coverctx
{
	flex-grow: 1;
}

.soupis
{
	white-space: pre-wrap;
}

.itemtype
{
	color: var(--ced-red);
}

.bottom
{
	background-color: var(--button-bg);
	width: 100%;
	height: 200px;
}

.binside
{
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	gap: 2rem;
	font-size: 0.8rem;
}

.blogo
{
	height: 120px;
	background-repeat: no-repeat;
	flex-grow: 1;
	background-position: center center;
	background-size: contain;
}

.btext
{
	flex-grow: 1;
}

.btext p
{
	margin-top: 0;
}

#xmlsource
{
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2rem;
	white-space: pre-wrap;
	font-family: monospace;
	border: 2px solid var(--ced-red);
	border-radius: 1rem;
	padding: 1rem;
	display: none;
}

.search_stats
{
	font-weight: bold;
	padding-bottom: 2em;
	text-align: right;
}

#float_return
{
	display: block;
	position: fixed;
	right: 1rem;
	top: 0.4rem;
	text-align: center;
	color: black;
}

#float_return .logo
{
	background-image: url('images/cedwide.svg');
	background-size: contain;
	background-repeat: no-repeat;
	width: 100px;
	height: 50px;
	filter: grayscale(100%) contrast(150%);
}

#float_return:hover
{
	color: var(--ced-red);
	text-decoration: none;
}

#float_return:hover .logo
{
	filter: none;
}

.adv_input
{
	border-radius: 1rem;
	border: 1px solid Black;
	padding: 0.5rem;
	width: 15em;
}

.adv_input2
{
	border-radius: 1rem;
	border: 1px solid Black;
	padding: 0.5rem;
	width: 40em;
}

.roundbutton
{
	display: block;
	line-height: 2.6rem;
	border-radius: var(--button-radius);
	text-align: center;
	text-decoration: none;
	color: Black;
	background-color:var(--button-bg);
	box-shadow: 0 var(--button-shadow-width--) 0 0 var(--button-shadow-color--bottom), 0 var(--button-shadow-width) 0 0 var(--button-shadow-color--top);
	border: 0;
	cursor: pointer;
	width: 180px;
	flex-grow: 0;
	font-family: Plain, Arial, sans-serif;
	font-size: 1rem;
}

.roundbutton:hover
{
	--button-shadow-width: -3px;
	--button-shadow-width--: 3px;
}

.logobar
{
	display: flex;
	gap: 3em;
}

.logobar a
{
	display: block;
}

.logobar a img
{
	width: 100%;
	filter: grayscale(100%) contrast(200%);
}

.logobar a:hover img
{
	width: 100%;
	filter: none;
}

@media only screen and (max-width: 950px)
{
	#float_return
	{
		display: none;
	}
}