* {
	margin: 0px;
	padding: 0px;
	border: 0px;
	box-sizing: border-box;
}

body {
	font-family: Verdana, Arial, sans-serif;
	background: #eeeeee;
}

a {
	color: #0000ff;
	text-decoration: underline;
}
a:hover {
	color: #990000;
	text-decoration: none;
}


.main {
	margin: 10px auto;
	max-width: 1100px;
	display: flex;
	flex-wrap: wrap;
}


.header {
	margin: 5px;
	border: 1px solid #999999;
	border-radius: 7px;
	box-shadow: 0px 0px 4px 4px #dddddd;
	background: #333333;
	display: flex; /* FLEX */
	justify-content: space-between;
	align-items: center;
	width: calc(100% - 10px);
}
.hleft {
	width: 470px;
}
.hleft h1 {
	padding: 5px 0px 0px 10px;
}
.hleft h1 a {
	color: #cccccc;
	text-decoration: none;
}
.hleft p {
	padding: 0px 0px 5px 10px;
	color: #ffffff;
	font-size: 0.7em;
}
.hright {
	padding: 10px;
}


.nav {
	margin: 5px;
	padding: 10px;
	border: 1px solid #999999;
	border-radius: 7px;
	box-shadow: 0px 0px 4px 4px #dddddd;
	background: #ffffff;
	display: flex; /* FLEX */
	justify-content: space-between;
	align-items: center;
	width: calc(100% - 10px);
}
.nav .pages {
	padding: 0px 0px 0px 10px;
	color: #cccccc;
	font-size: 1.2em;
}
.nav .pages a {
	text-decoration: none;
}
.nav .search {
	color: #cccccc;
	font-size: 1.2em;
	display: flex;
	align-items: center;
	gap: 5px;
}
.searchfield {
	width: 150px;
	font-size: 1.0em;
	border: 1px solid #999999;
}
.clickbutton {
	width: 25px;
	height: 25px;
	color: #ffffff;
	font-size: 1.0em;
	font-weight: bold;
	border: 1px solid #333333;
	border-radius: 25px;
	background: #666666;
	cursor: pointer;
}


.blk2 {
	margin: 5px;
	padding: 0px 0px 10px 0px;
	border: 1px solid #999999;
	border-radius: 7px;
	box-shadow: 0px 0px 4px 4px #dddddd;
	background: #ffffff;
	width: calc(100% - 10px);
}
.blk2 h3 {
	padding: 5px 5px 5px 10px;
	font-weight: normal;
	white-space: nowrap;
	border-bottom: 1px solid #999999;
	border-radius: 7px 7px 0px 0px;
	background: #fafafa;
}
.blk2 ul {
	margin: 10px;
	display: flex;
	flex-wrap: wrap;
	list-style: none;
}
.blk2 li {
	flex: 0 0 25%;
	font-size: 0.8em;
}
.blk2 a {
	text-decoration: none;
}
.blk2 a:hover {
	text-decoration: underline;
}


.blk {
	margin: 5px;
	width: 265px;
	height: 285px;
	overflow: hidden;
	border: 1px solid #999999;
	border-radius: 7px;
	box-shadow: 0px 0px 4px 4px #dddddd;
	background: #ffffff;
}
.blk h3 {
	padding: 5px 5px 5px 10px;
	font-size: 1.1em;
	font-weight: normal;
	white-space: nowrap;
	border-bottom: 1px solid #999999;
	border-radius: 7px 7px 0px 0px;
	background: #fafafa;
}
.blk .thumb img {
	margin: 10px 10px;
	width: 240px;
	height: 180px;
	object-fit: cover;
}
.blk .prem {
	padding: 0px 0px 5px 10px;
	font-style: italic;
	font-weight: bold;
	font-size: 0.9em;
}
.desc {
	padding: 0px 0px 5px 10px;
	font-size: 0.7em;
}


.content {
	margin: 5px;
	width: calc(100% - 10px);
	border: 1px solid #999999;
	border-radius: 7px;
	box-shadow: 0px 0px 4px 4px #dddddd;
	background: #ffffff;
}
.content h3 {
	padding: 5px 5px 5px 10px;
	font-size: 1.1em;
	font-weight: normal;
	white-space: nowrap;
	border-bottom: 1px solid #999999;
	border-radius: 7px 7px 0px 0px;
	background: #fafafa;
}
.content p {
	text-align: center;
}
.video {
	margin: 20px;
}
.content .prem {
	padding: 0px 0px 5px 10px;
	font-weight: bold;
	font-size: 1.6em;
}
.tags {
	padding: 3px 5px;
	font-size: 0.7em;
	font-style: italic;
}

.bookmarks {
	padding: 20px;
	text-align: center;
}


.footer {
	margin: 5px;
	border: 1px solid #999999;
	border-radius: 7px;
	box-shadow: 0px 0px 4px 4px #dddddd;
	background: #333333;
	display: flex; /* FLEX */
	justify-content: space-between;
	align-items: center;
	width: calc(100% - 10px);
}
.fleft {
	width: 470px;
}
.fleft p {
	padding: 10px;
	color: #ffffff;
	font-size: 0.7em;
}
.fright {
	padding: 10px;
	color: #cccccc;
	font-size: 0.7em;
}
.fright a {
	color: #cccccc;
}

.clear {
	display: none;
}