* {
	margin:0;
	padding:0;
	font-family: Verdana, Geneva, sans-serif;
	text-decoration: none;
}
body {
	background: #666666;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
a {color: #000;} 
b {font-weight: bold;}

/*****************************/
#wrapper {
	width: 1024px;
	background: #858585;
	padding: 10px;
	/*****************************/
	box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2), 2px 2px 20px 0 rgba(0, 0, 0, 0.19); 
}
#main, #info, #menu {
	border: 4px solid;
	border-color: black;
	border-style: double;
	border-image: url(border.gif) 4;
}
#aside, #main {display: table-cell;}
/*****************************/
#aside {width: 370px;}
#info {
	height: 216px;
	margin:  0 6px 6px 0;
	background: #bdbdbd;
}
#banner p {
	font-size: 16px;
	line-height: 24px;
	transform: translate(0, 5px);
	padding-top: 0px;
}
#banner a {
	text-decoration: underline;
	color: blue;
}
#banner b {
	font-size: 20px;
	line-height: 38px;
}
#banner hr {
	border-top: 1px solid rgba(0,0,0,0.4);
	border-bottom: 1px solid rgba(255,255,255, 0.8);
	margin-inline-start: 10px;
    margin-inline-end: 10px;
}
#banner {
	margin: 8px;
	transform: translate(0, 2px);
	text-align: center;
	height: 134px;
	background-image: url("images/ceramic.png");
	background-repeat: no-repeat;
	background-position: -16px -10px;
}
#member a {color: blue;}
#member a:hover	{color: white;}
#member {
	margin: 0 0 0 11px;
	font-size: 14px;
	line-height: 19px;
}
#menu {
	height: 750px;
	margin-right: 6px;
	position: relative;
	background: #bdbdbd;
	overflow: auto;
}
#menu li {
	display: block;
	line-height:30px;
	text-align: left;
}
#menu img {
	width: 120px;
	transform: translate(10px, 5px);
}
#menu span {
	padding: 16px;
	vertical-align: top;
	line-height: 26px;
}
ul li {
	list-style-position:inside;
	list-style-type: none;
	border-bottom: 1px dotted #333333;
	
}
ul li:hover {
	background-color: #ababab;
	color: white;
	cursor: pointer;
}
ul li:hover span {color: white;}

/*****************************/
#main {
	width: 650px;
	position: relative;
}
#main p {
	font-size: 16px;
	line-height: 30px;
}
#main div {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 10px;
}
.main {width: 600px;}
.small {width: 500px;}

/************************************************************/
@media only screen and (max-height: 660px) {
	body {
		top: 0;
		transform: translate(-50%, 0);
	}
}
@media only screen and (max-width: 800px) {
	body {
		top: 0;
		left: 0;
		transform: translate(0, 0);
	}
}

@media only screen and (max-width: 1024px), screen and (max-height: 1024px) {
	#wrapper {width: 800px;}
	#aside {width: 270px;}
	#info {height: 174px;}
	#banner {height: 100px;}
	#menu {height: 600px;}
	#menu span {font-size: 14px;}
	#menu img {
		width: 75px;
		transform: translate(10px, 5px);
	}
	#banner {
		background-position: -16px 0px;
		background-size: 320px 125px;
	}
	#banner p {
		font-size: 12px;
		line-height: 17px;
	}
	#banner a {font-size: 12px;}
	#banner b {
	  font-size: 16px;
	  line-height: 30px;
	}
	#member {
		margin-left: 10px;
		font-size: 12px;
		line-height: 17px;	
	}
	#main {
		width: 520px;
		position: relative;
	}
	#main p {
		padding-top: 0;
		font-size: 14px;
		line-height: 26px;
	}
	.main {width: 500px;}
	.small {width: 400px;}
}
@media only screen and (max-width: 800px), screen and (max-height: 800px) {
	#wrapper {width: 600px;}
	#aside {width: 210px;}
	#info {height: 136px;}
	#banner {height: 80px;}
	#menu {height: 500px;}
	#menu span {font-size: 10px;}
	#menu img {
		width: 50px;
		transform: translate(10px, 5px);
	}
	#banner {
		margin-top: 4px;
		background-position: -16px 0px;
		background-size: 320px 100px;
	}
	#banner p {
		padding-top: 0;
		font-size: 9px;
		line-height: 14px;
	}
	#banner hr {margin-top: 4px;}
	#banner a  {font-size: 10px;}
	#banner b {
		font-size: 12px;
		line-height: 14px;
	}
	#member {
		margin-left: 8px;
		font-size: 10px;
		line-height: 13px;	
	}
	#main p {
		font-size: 13px;
		line-height: 24px;
	}
	#main {
		width: 380px;
		position: relative;
	}
	.main {width: 360px;}
	.small {width: 320px;}
}