/* open source - use this code as you please */
/* open graphics and photos - contact me if you want the originals */
html {
}
body {
	font: 75%/150% "Trebuchet MS", Helvetica, sans-serif;
	text-align: center;
	background-color: #000;
	color: #fff;
}

h1 { font-size: 120%; }
h2 { font-size: 110%; }
h3 { font-size: 100%; }
h4 { font-size: 90%; }

body {
	margin: 0;
	padding: 0;
}
a {
	text-decoration: none;
	color: #c00;
}
img {
	display: block;  /*--for IE in strict mode--*/
	border-style: none;  /*--gets rid of border at onclick --*/
}
/*--structure--*/
.container {
	margin: 3em auto;
	width: 800px;
	height: 600px;
	text-align: left;
	background: 0 0 url("../media/bg_braid.jpg") no-repeat;
	position:relative;
}
.header {
	position:absolute;
	top: -25px;
	left: 1em;
}
.menu {
	margin: 0;
}
.maincontent div {
	position:absolute;
	top:0;
	left:175px;
	width:400px;
	height:600px;
}
/*--styles--*/
.header h1 {
	font-size: 95%;
	font-weight: normal;
	margin:0;
}
.header h1 a {
	color: #ccc;
}
.menu ul {
	margin:0;
	padding:1em;
}
.menu li {
	list-style:none;
	display:block;
}
.menu ul li a {
	text-transform: uppercase;
	font-weight: bold;
	color: #fff;
	font-size: 90%;
	line-height: 150%;
}
.menu ul li a:hover, .menu ul li.active a {
  color: #E47C7C;
}
.maincontent div {
	padding: 1em 2em;
	background:#000;
	opacity: 0; /* webkit */
	-moz-opacity: 0; /* moz */
	filter:alpha(opacity=0); /* ie */
	z-index: 9;
}
.maincontent div:target {
	opacity: 0.7; /* webkit */
	-moz-opacity: 0.7; /* moz */
	filter:alpha(opacity=70); /* ie */
	z-index: 10;
	-webkit-transition: opacity;
	-webkit-transition-duration: 800ms;
	-webkit-transition-timing-function: ease-in;
	-moz-transition-property: opacity;
	-moz-transition-duration: 800ms;
	-moz-transition-timing-function: ease-in;
	-o-transition-property: opacity;
	-o-transition-duration: 800ms;
}
.thumb {
	display:inline;
	padding:0;
	margin:0;
	width:40px;
	height:40px;
}