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

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

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

#main-contents {

}
#main-contents h2{
	padding:4px;
	color:#fff;
	background-color: #5C0024;
}
#main-contents .main-image {
	/*text-align:center;*/
}

#main-contents .description {
	padding:5px 5px;
	background-color: #ffe;
	border:1px solid #5C0024;
}



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

#materials .lists ul{
	list-style: none;
	/*width: 880px;*/
	width: 780px;
	/*border:1px solid #f00;**/
}

#materials .lists ul:after{
	display: block;
	clear: both;
	content: "";
}

#materials .lists ul li{
	float: left;
	width: 200px;
	/*margin-right: 20px;*/
	margin-right: 60px;
	margin-bottom: 20px;
}
#materials .lists ul li span{
	display:block;
}

#materials .lists ol li{
	padding-bottom:4px;
}


#materials .others {
	margin:20px 50px;
}
#materials .others span{
	
}

#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{
	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:100px;
}


#materials #detail .description{
	float:left;
	width:270px;
	/*padding:20px 60px;*/
	border:1px solid #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;
}
#materials .item {
	float: left;
	/*width:120px;
	height:90px;*/
	padding-right:15px;
}

#materials .item 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;
}

#materials .backtolist{
	text-align: right;
	padding:5px 20px;
}



/*---------------------------------------
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 */