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

body {
    margin:0;
    padding:0;
    background-color:#FFF;
	color:#000;
}

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

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

		#header h1 {
			color:#000;
			margin:0;
			padding:0;
			text-align:left;
		}

	#menu {
		float:left;
		margin:0;
		padding:0 2% 0 0;
		width:17.5%;
		text-align:right;
		background-color:#FFF;
		border-right: 1px solid #000;
	}

		ul.menu{
			margin:0;
			padding:0;
		}
		
		ul.menu li{
			margin:0 0 10% 0;
			padding:0;
			display:block;
			list-style-type:none;
		}
		
		ul.menu li a:link, ul.menu li a:visited {
			color:#000;
			text-decoration:none;
		}
		
		ul.menu li a:hover {
			color:#BDBDBD;
			text-decoration:none;
		}

		ul.menu li a.active:link, ul.menu li a.active:visited {
			color:#BDBDBD;
			text-decoration:none;
		}
		
		ul.menu li a.active:hover {
			color:#808080;
			text-decoration:none;
		}
		
	#content {
		float:right;
		width:77.5%;
		padding:0 0 0 2%;
		margin:0;
		background-color:#FFF;
	}

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

		#content h1 {
			color:#000;
			margin:0;
			padding:0 0 15px 0;
		}

			#content h1 a:link, #content h1 a:visited {
				color:#BDBDBD;
				text-decoration: none;
			}

			#content h1 a:hover {
				color:#808080;
				text-decoration: none;
			}
		
		#content p, #content td {
			margin:0;
			padding:0 0 5px 0;
		}
		
		#content a:link, #content a:visited {
			color:#BDBDBD;
			text-decoration:none;
		}

		#content a:hover {
			color:#808080;
			text-decoration:underline;
		}
		
		#content ul {
			margin:0 0 0 15px;
			padding:0 0 5px 0;
			list-style-position:inside;
			list-style:disc;
		}
		
		#content ol {
			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;
		}
		
		#detail {
			position:relative;
			padding:0;
			margin:0;
		}

			#detail-image {
				float:left;
				width:400px;
				padding:0;
				margin:0;
			}
	
			#detail-text {
				padding:0 0 0 3%;
				margin:0;
				overflow:hidden; /* Triggers Block Formatting Context */
			}

		#item {
			margin:0;
			padding:0 0 3% 0;
		}

			#image {
				float:left;
				width:275px;
				padding:0;
				margin:0;
			}

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

			#text {
				overflow:hidden; /* Triggers Block Formatting Context */
				padding:0 0 0 3%;
				text-align:left;
				margin:0;
		}			

		#info {
			margin:0;
			padding:0 0 3% 0;
		}

	#footer {
		clear:both;
		padding:3% 0 3% 22.5%;
	}
	
		#footer p {
			margin:0;
			padding:0;
			color:#000;
			text-align: left;
		}

		#footer a:link, #footer a:visited {
			color:#BDBDBD;
			text-decoration:none;
		}

		#footer a:hover {
			color:#808080;
			text-decoration:none;
		}

#clear{
	clear:both;
}	

.icon {
	float:left;
	padding:2% 3px 2% 0;
	margin:0;
	outline:0;
	border:0;
	opacity:0.5;
    filter:alpha(opacity=50);
    text-decoration: none;
}

/* Mobile and Tablet Styles */
									
@media only screen
and (min-width : 0px) 
and (max-width : 800px) {

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

#menu {
	float:left;
	margin:0 0 0 3%;
	padding:0 0 2% 0;
	width:97%;
	text-align:left;
	border-right: none;
	border-bottom: 1px solid #000;
}
	
	ul.menu li{
		margin:0 3% 0 0;
		display:inline-block;
		line-height:1.5em;
	}

#content {
	float:left;
	width:97%;
	padding:3% 0;
	margin:0 0 0 3%;
}

	#detail-image {
		width:100%;
		max-width:400px;
	}

	#detail-text {
		clear:left;
		padding:3% 0;
	}

	#item {
		margin:0;
		padding:0;
	}

		#image {
			width:100%;
			max-width:400px;
		}

		#text {
			clear:left;
			padding:3% 0;
		}					

#footer {
	float:left;
	width:97%;
	margin:0 0 3% 3%;
	padding:5% 0;
	border-top: 1px solid #000;
}

}