/*
	Author	:	Christopher Robinson
	Email		:	christopher@edg3.co.uk
	Website	:	http://www.edg3.co.uk/
*/
* {
	border:0;
	margin:0;
	padding:0;
}

/* body */
body {
	background:#fff;
	color:#666;
	font:0.75em/100% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
	line-height:1.4em;
}

/* general */
a {
	color:#9C0;
	text-decoration:none;
}
a:hover {
	color:#555;
	text-decoration:none;
}

/* header */
#header {
	width:100%;
	color: #000000;
	background-color: #000000;
	background-repeat: no-repeat;
}
#header:after {
	clear:both;
	content:'.';
	display:block;
	height:0;
	visibility:hidden;
}
#header_inside {
	border-left:1px solid #bbb;
	border-right:1px solid #bbb;
	margin:0 auto;
	width:800px;
}
#header_inside h1 {
	color:#fff;
	float:left;
	font:3.2em 'Trebuchet MS', Verdana, sans-serif;
	height:100px;
	line-height:100px;
	margin:0 0 0 20px;
	width:180px;
}
#header_inside h1 span {
	color:#9c0;
}
#header_inside ul {
	float:right;
	height:100px;
	list-style:none;
	width:600px;
}
#header_inside ul li {
	border-right:1px solid #555;
	float:right;
	height:100px;
	list-style:none;
	width:75px;
}
#header_inside ul li a {
	color:#fff;
	display:block;
	height:50px;
	line-height:50px;
	padding:50px 0 0;
	text-align:center;
	width:75px;
}
#header_inside ul li a:hover {
	background:#fff;
	color:#111;
}
#header_inside ul li a.active {
	background:#fff;
	color:#111;
}

/* content */
#content {
	background:#fff url('image/background_content.jpg') center repeat-y;
	clear:both;
	width:100%;
}
#content_inside {
	border-left:1px solid #bbb;
	border-right:1px solid #bbb;
	margin:0 auto;
	width:800px;
}
#content_inside_sidebar {
	border-left:1px solid #bbb;
	clear:both;
	float:right;
	height:auto;
	line-height:175%;
	margin:5px 0;
	padding:0 10px;
	width:200px;
}
#content_inside_sidebar h2 {
	background:#fff;
	color:#000;
	font-size:110%;
	font-weight:400;
	padding:5px 0;
	text-align:right;
}
#content_inside_sidebar ul {
	letter-spacing:-1px;
	list-style:none;
	margin:0 0 10px;
}
#content_inside_sidebar ul li {
	list-style:none;
}
#content_inside_sidebar ul li a {
	border-bottom:1px solid #e9e9e9;
	display:block;
	padding:3px;
	text-align:right;
	width:194px;
}
#content_inside_sidebar ul li a:hover {
	background:#ddd;
	color:#000;
}
#content_inside_main {
	background:#fff;
	float:left;
	letter-spacing:-1px;
	line-height:175%;
	margin:0 auto;
	padding:10px;
	width:559px;
}
#content_inside_main h1 {
	border-bottom:1px solid #ccc;
	font-size:125%;
	padding:0 0 2px;
}
#content_inside_main h2 {
	color:#ccc;
	font-size:115%;
	text-align:right;
}
#content_inside_main p {
	padding:0 0 10px;
}

/* footer */
#footer {
	background:#323232 url('image/background_footer.jpg') center repeat-y;
	clear:both;
	height:100px;
	width:100%;
}
#footer_inside {
	border-left:1px solid #bbb;
	border-right:1px solid #bbb;
	height:100px;
	margin:0 auto;
	width:800px;
}
#footer_inside p {
	color:#EEEEEE;
	line-height:100px;
	text-align:center;
}var gal = { 
init : function() { 
if (!document.getElementById || !document.createElement || !document.appendChild) return false; 
if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal'; 
var li = document.getElementById('jgal').getElementsByTagName('li'); 
li[0].className = 'active'; 
for (i=0; i<li.length; i++) { 
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')'; 
li[i].title = li[i].getElementsByTagName('img')[0].alt; 
gal.addEvent(li[i],'click',function() { 
var im = document.getElementById('jgal').getElementsByTagName('li'); 
for (j=0; j<im.length; j++) { 
im[j].className = ''; 
} 
this.className = 'active'; 
}); 
} 
}, 
addEvent : function(obj, type, fn) { 
if (obj.addEventListener) { 
obj.addEventListener(type, fn, false); 
} 
else if (obj.attachEvent) { 
obj["e"+type+fn] = fn; 
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); } 
obj.attachEvent("on"+type, obj[type+fn]); 
} 
} 
} 
gal.addEvent(window,'load', function() { 
gal.init(); 
});
/* general styling for this example */ 
* { margin: 0; padding: 0; } 
body { padding: 20px; } 
/* begin gallery styling */ 
#jgal { list-style: none; width: 200px; } 
#jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; } 
#jgal li img { position: absolute; top: 20px; left: 220px; display: none; } 
#jgal li.active img { display: block; } 
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ } 
/* styling without javascript */ 
#gallery { list-style: none; display: block; } 
#gallery li { float: left; margin: 0 10px 10px 0; } 
<!--[if lt IE 8]> 
<style media="screen,projection" type="text/css"> 
#jgal li { filter: alpha(opacity=50); } 
#jgal li.active, #jgal li:hover { filter: alpha(opacity=100); } 
</style> 
<![endif]--> 
<script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script> 
<!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]-->