/*---------------------------------------
common setting
---------------------------------------*/
@import url("reset.css");

body {
	margin-top:20px;
	text-align: center;
	background-color: #000;
	font-size:90%;
}
/*---------------------------------------
basic layout
---------------------------------------*/
#contents{
	margin: 0 auto;
	width: 800px;
	text-align: left;
	background-color: #fff;
	border:1px solid #5C0024;
}

#header {
	height:100px;
	margin-bottom:5px;
	background:#5C0024  url(../images/header.gif) top left no-repeat;
	border-bottom:1px solid #5C0024;
}
/*---------------------------------------
footer
---------------------------------------*/
#footer {
	height:20px;
	background-color:#5C0024;
}

/*---------------------------------------
main contents basic layout
---------------------------------------*/
#main {
	width: 720px;
	margin:10px auto;
	/*border:1px solid #f00;*/
}

#main-contents {

}
#main-contents h1{

}

/*---------------------------------------
materials 
list
---------------------------------------*/
#materials  h1{
	/*margin:10px 20px;*/
	padding:4px 10px;
	/*margin-bottom:15px;*/
	font-size:120%;
	color:#fff;
	background:#5C0024;
}
#materials .lists {
	width:720px;
	margin:0 auto;
	
}
#materials .lists h3{
	margin-bottom:8px;
}
#materials .lists h3 span{
	margin-left:8px;
}
#materials .lists h3 img{
	vertical-align:middle;
}

 .lists table{
	width:100%;
	border-collapse: collapse;
	background:#222;
	/*width:40%;*/
	/*margin:0 auto;*/
	/**/
	/*font-size:110%;*/
}
 .lists th,   .lists td {
 	width:240px;
	 height:240px;
	/*padding:5px 20px;*/
	/*padding:2px;*/
	text-align:center;
	border:1px solid #fff;
}

 .lists th {
	font-weight:normal;
}
 .lists img {
 	vertical-align:middle;
}
 .lists span {
 	display:block;
	 padding-top:5px;
	 color:#fff;
}

/*---------------------------------------
other classification
---------------------------------------*/
#materials .others {
	padding:5px 0;
	margin-bottom:10px;
	background-color: #ffe;
	text-align:right;
	border:1px solid #5C0024;
}
#materials .others span{
	padding-left:1em;
}

#materials .others ul{
	display:inline;
	list-style: none;
	margin:0;
	padding:0 0 0 1em;
}

#materials .others li{
	display:inline;
	padding-right:1em;
}

#materials .others li a{
	font-weight:bold;
	text-decoration:none;
	color:#888;
}
#materials .others li a:hover{
	color:#333;
}

/*---------------------------------------
materials 
detail
---------------------------------------*/
#materials #detail{
	/*padding:10px 15px;*/
	/*color:#fff;
	background-color: #064738;*/
}
#detail .title h2{
	margin:6px 5px;
	font-size:120%;
	font-weight:bold;
	color:#5C0024;
}
#detail .title table{
	border-bottom:1px solid #5C0024;
}
#detail .title th
,#detail .title td{
	padding:5px 20px 2px 5px;
}
#detail .title th{
	font-weight:bold;
}

#materials .data {
	margin:10px 0;
	/*text-align: center;*/
	/**/
	
}


#materials #detail .main-image{
	float:left;
	/*padding-right:25px;*/
	/*width:460px;*/
	/*text-align: center;*/
	/**/
}

.landscape {
	padding-right:25px;
}

.portrait {
	padding-right:50px;
}


#materials #detail .description{
	float:left;
	width:270px;
	/*padding:20px 60px;*/
	/*border:1px solid #5C0024;*/
}

#materials #detail .description h3{
	font-size:110%;
	font-weight:bold;
	color:#5C0024;
	border-bottom:1px dashed #5C0024;
}



#materials .thumbnails {
	
	float:left;
	width:250px;
	margin-top:30px;
	/*margin:20px auto 5px;*/
	/*padding:15px;
	border: 1px solid #fff;*/
	/*clear:both;*/
	/*border:1px solid #5C0024;*/
}
 .thumbnails .thumbnail {
	float: left;
	/*width:120px;
	height:90px;*/
	padding-right:15px;
}

.thumbnails .thumbnail span{
	display:block;
	padding-top:3px;
	font-size:90%;
}

#materials .zoom{
	width:550px;
	margin:0 auto;
}

#materials .zoom img{
	vertical-align:middle;
}




#materials #same-classifications{
	width:634px;
	margin:10px auto;
}
#same-classifications h3{
	padding-left:50px;
}
#same-classifications h3 span{
	font-weight:bold;
	padding-right:1em;
}

#materials .backtolist{
/*	text-align: right;
	padding:5px 20px;*/
	padding:5px 0;
	margin:10px 0;
	background-color: #ffe;
	text-align:right;
	border:1px solid #666;

}
#materials .backtolist a{
	padding-right:2em;
	font-weight:bold;
	text-decoration:none;
	color:#888;
}
#materials .backtolist a:hover{
	color:#333;
}



/*---------------------------------------
min-height 
---------------------------------------*/
.minheight{
	min-height:700px;
	height: auto !important;
	height: 700px;
}
/*---------------------------------------
Univaersal Selector
---------------------------------------*/
/*float clear*/
.clear-both {
	clear:both;
}


/*---------------------------------------
clearfix

sample
<div id="somebox" class="clearfix">

---------------------------------------*/
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.clearfix { display: inline-block; }
/* exlude MacIE5 \*/
* html .clearfix { height: 1% }
.clearfix {display:block;}
/* end MacIE5 */