@charset "utf-8";
/* CSS Document */

/* LAYOUT FOR CENTRAL */

body {
    margin:0;
    padding:0;
    background-color:#FFF;
	font-size:0.9em;
	font-family:Arial, Helvetica, sans-serif;
}

#container {
    width:90%;
    margin:0 auto;
    padding:0;
	max-width:960px;
}

	#header {
		margin:0;
		padding:3% 0 1% 0;
	}

		#header h1 {
			color:#000;
			margin:0;
			padding:0;
			font-weight:normal;
			font-size:250%;
			font-family:Arial, Helvetica, sans-serif;
			text-align:center;
		}

	#menu {
		margin:0;
		padding:2% 0;
		background-color:#FFF;
		font-size:130%;
		border-bottom: 1px solid #000;
		text-align:center;
	}
	
		ul.menu{
			margin:0;
			padding:0;
		}
		
			ul.menu li{
				margin:0 1.5%;
				padding:0;
				list-style-type:none;
				display:inline;
				text-align:center;
				line-height:1.5em;
			}
		
				ul.menu li a:link, ul.menu li a:visited {
					color:#999;
					text-decoration:none;
				}
				
				ul.menu li a:hover {
					color:#000;
					text-decoration:none;
				}
		
				ul.menu li a.active:link, ul.menu li a.active:visited {
					color:#000;
					text-decoration:none;
				}
				
				ul.menu li a.active:hover {
					color:#999;
					text-decoration:none;
				}

	#content {
		margin:0;
		padding:3% 0;
		background-color:#FFF;
	}

		#content .hero {
			padding:0;
			width:100%;
		}

		#content h1 {
			color:#000;
			margin:0;
			padding:0 0 15px 0;
			font-size:130%;
			font-weight:normal;
		}

			#content h1 a:link, #content h1 a:visited {
				color:#999;
			}

			#content h1 a:hover {
				color:#000;
			}
		
		#content h2 {
			color:#000;
			margin:0;
			padding:5px 0 10px 0;
			font-size:120%;
			font-weight:normal;
		}
		
		#content p, #content td {
			margin:0;
			padding:0px 0px 5px 0px;
			color:#000;
		}
		
		#content a:link, #content a:visited {
			color:#999;
			text-decoration:none;
		}
		
		#content a:hover {
			color:#000;
			text-decoration:none;
		}
		
		#content ul {
			color:#000;
			margin:0 0 0 15px;
			padding:0 0 5px 0;
			list-style-position:inside;
			list-style:disc;
		}
		
		#content ol {
			color:#000;
			margin:0 0 0 20px;
			padding:0 0 5px 0;
			list-style-position:inside;
			list-style:decimal;
		}
			
			#content ul li, #content ol li {
				padding:0 0 5px 0;
			}
		
		abbr, acronym, cite {
			color:#78475A;
			border-bottom:1px dashed #78475A;
			cursor:help;
		}

		.image {
			margin:0;
			padding:0;
			border:none;
			outline:none;
		}

		/* DETAIL w-detail.php, e-detail.php */

		#detail {
			position:relative;
			padding:0;
			margin:0;
		}

			#detail-image {
				float:left;
				width:40%;
				padding:0;
				margin:0;
			}
	
			#detail-text {
				float:right;
				width:57%;
				padding:0;
				margin:0;
			}
	
		/* ITEM w.php, e.php, w-detail.php, e-detail.php */
		
		#items {
			position:relative;
			width:102%;
			padding:0;
			top:0;
			left:-2%;
		}

			#item {
				vertical-align:top;
				display:inline-block;
				width:23%;
				padding:0;
				margin:0 -4px 0 2%;  /* -4px addresses inline-block bug*/
			}
	
				#image {
					float:left;
					width:100%;
					padding:0;
					margin:0;
				}
	
					.image {
						margin:0;
						padding:0;
						border:none;
						outline:none;
						width:100%;
					}
	
				#text {
					float:left;
					width:100%;
					padding:20px 0;
					text-align:left;
					margin:0;
				}	
					
		/* INFO page.php */
		
		#info {
			margin:0;
			padding:0 0 15px 0;
		}
			
	#footer {
		margin:0;
		padding:20px 0;
		border-top: 1px solid #000;
		text-align:center;
	}
	
		#footer p {
			margin:0;
			padding:0;
			color:#000;
		}

		#footer a:link, #footer a:visited {
			color:#999;
			text-decoration:none;
		}
		
		#footer a:hover {
			color:#000;
			text-decoration:none;
		}

#clear{
	clear:both;
}		

/* Mobile and Tablet Styles */

@media only screen 
and (min-width : 0px) 
and (max-width : 450px) {

body {
	font-size:0.8em;
}

		#items {
			width:100%;
			left:0;
		}

			#item {
				width:100%;
				margin:0 -4px 0 0;  /* -4px addresses inline-block bug*/
			}

			#detail-image {
				width:100%;
			}

			#detail-text {
				width:100%;
				padding:5% 0 0 0;
			}

}

@media only screen 
and (min-width : 451px) 
and (max-width : 800px) {

body {
	font-size:0.8em;
}

		#item {
			width:31.333333%;
		}

}