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

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

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

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

		#header h1 {
			color:#FFF;
			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:#000;
		border-right: 1px solid #FFF;
	}

		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:#FFF;
			text-decoration:none;
		}
		
		ul.menu li a:hover {
			color:#808080;
			text-decoration:none;
		}

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

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

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

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

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

		#content a:hover {
			color:#BDBDBD;
			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;
		}

			#content table.stripes{
				border-top:#CCC 1px solid;
				border-left:#CCC 1px solid;
				border-right:#CCC 1px solid;
			}

			#content table.stripes td{
				border-bottom:#CCC 1px solid;
				background-color:#444;
				padding:10px;
			}
			
			#content table.stripes tr.alt td{
				background-color:#333;
			}

			#content table.stripes tr.over td{
				background-color:#222;
		}
				
		#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:#FFF;
			text-align: left;
		}

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

		#footer a:hover {
			color:#BDBDBD;
			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;
}

#toTop {
	width:100px;
	border:1px solid #CCC;
    background:#000;
    text-align:center;
    padding:5px;
    position:fixed; /* this is the magic */
    bottom:10px; /* together with this to put the div at the bottom*/
    right:10px;
    cursor:pointer;
    display:none;
    color:#CCC;
    font-size:11px;
}

/* 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 #FFF;
}
	
	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 #FFF;
}

}