/*
-----------------------------------------------
CSS rules

Client: Brian Cassey
Author: Julian Kommunikation /www.julian.se/
Version: #2 - October 2008

REFERENCES //
Thumbnails			http://www.gungfu.de/facts/archives/2004/08/16/new-markup-and-css-for-thumbnail-galleries/#nid-p2
Image gallery		http://www.couloir.org/js_slideshow/
.. thumbnail nav	http://www.miningphoto.com/index.php/portfolio/		
Thumbnail opacity	http://www.mandarindesign.com/opacity.html
Image slideshow		http://www.tutorialized.com/tutorial/Ultimate-Fade-in-slide-show/11145
Anchor slide		http://www.mad4milk.net/entry/scroll-your-internal-links-smoothly
Thumb rollover		http://www.inknoise.com/experimental/rolloverer.php
Browser detect		http://www.brunildo.org/test/csshacks3.html
----------------------------------------------- */


/* =Structure
----------------------------------------------- */
*,body,h1,h2,h3,h4,h5,h6,p,div,form,fieldset,input {
	margin: 0;
	padding: 0;
	}

body {
	margin: 0;
	padding: 0 0 20px;
	text-align: center;
	background: #1C1C1C;
	font-size: 12px;
	font-family: 'Lucida Grande', 'Trebuchet MS', verdana, arial, sans-serif;
	color: #333;
	}

#page {
	margin: 0 auto;
	padding: 25px 0;
	width: 950px;
	text-align: left;
	background: #212121;
	}

html { /* To prevent content jumping sideways when changing page | http://archivist.incutio.com/viewlist/css-discuss/51018 */
	min-height: 100%;
	margin-bottom: 1px;
	}

a { /* To prevent dotted border around links in Firefox | http://sonspring.com/journal/removing-dotted-links */
	outline: none;
	}

.clear {
	clear:both;
	height: 25px;
	}


/* =Header
----------------------------------------------- */
#header {
	height: 80px;
	width: 910px;
	margin: 0 20px;
/*	border-bottom: 1px solid #3B3B3B;*/
	}

#logo {
	height: 45px;
	width: 230px;
	float: left;
	}

#mainmenu {
	position: relative;
	width: 660px;
	float: left;
	}

/* =Header | Navigation
----------------------------------------------- */	
ul.navigation {
	text-align: center;
	padding-bottom: 10px;
	}
ul.navigation2 {
	text-align: center;
	}
ul.navigation li, ul.navigation2 li {
	display: inline;
	}
ul.navigation li a, ul.navigation2 li a {
	color: #aaa;
	font-weight: bold;
	font-size: 13px !important;
	padding: 0 10px 0 0;
	margin: 0 5px 0 0;
	text-decoration: none;
	border-right: 1px solid #3B3B3B;
	border-right: 1px solid #555;
	}
ul.navigation2 li a {
	padding: 0 5px 0 0;
	margin: 0;
	color: #666;
	font-weight: normal;
	font-size: 11px !important;
	}
ul.navigation a:hover, ul.navigation2 a:hover,
ul.navigation li.currentpage a, ul.navigation2 li.currentpage a {
	color: #CEC632;
	}
ul.navigation li.currentpage a, ul.navigation2 li.currentpage a {
	font-weight: bold;
	}
ul.navigation2 li a {
	color: #CEC632;
	}
ul.navigation2 li.currentpage a,
ul.navigation2 a:hover {
	color: #666;
	}
ul.navigation2 li.currentpage a {
	font-weight: normal;
	}
ul.navigation li.last a, ul.navigation2 li a.last {
	border-right: none !important;
	}

.tabcontent {
	display: none;
	}

/* =Content
----------------------------------------------- */
#content {
	overflow: hidden;
	width: 100%;
	padding: 20px 0;
	}

#intro {
	position: relative;
	float: left;
	margin: 10px 0 20px 105px;
	text-align: left;
	display: inline; /* IE float x2 */
	border: 1px solid #333;
	}

#left {
	width:180px;
	position:relative;
	float:left;
	margin:10px 0 0 20px;
	text-align: left;
	display: inline; /* IE float x2 */
	}

#left2 {
	width:166px;
	padding: 0;
	float:left;
	margin:10px 11px 0 20px;
	text-align: left;
	display: inline; /* IE float x2 */
	}

#left2 img {
	border: 1px solid #666;
	}
	
#left2 p, #left2 h2 {
	margin: 10px;
	color:#969696;
	}

#left2 h2 {
	margin-top: 20px;
	font-size: 18px;
	color: #757575;
	font-weight:lighter;
	}

#left2 a {
	color: #969696;
	padding: 0;
	margin:0;
	text-decoration: none;
	}
	
#left2 a:hover {
	color: #CEC632;
	}
	
#left2 .currentpage a {
	color: #CEC632;
	font-weight: bold;
	}

#right {
	position: relative;
	float: right;
	width: 710px;
	margin: 10px 20px 0 0;
	text-align: left;
	display: inline; /* IE float x2 */
	}
#right p, #right h2, #right h3 {
	margin: 0 30px 20px;
	color:#969696;
	}
#right h2, #right h3 {
	margin-top: 20px;
	font-size: 18px;
	color: #757575;
	font-weight:lighter;
	}
#right h3 {
	font-size: 15px;
	font-weight:bold;
	}
#right.books {
	margin: 10px 30px 0;
	width: 900px;
	float: left;
	}
#right.books a img {
	border: none;
	}
#right.books img {
	margin: 0 30px 0 0;
	float: left;
	}
#right.books #imgcaption {
	width: 476px;
	margin: 0 20px 0 0;
	float: left;
	clear: both;
	}
#right.books h3 {
	margin-bottom: 0;
	}
#right a:link, #right a:visited, #right a:hover, #right a:visited:hover {
	color: #CEC632;
	text-decoration: none;
	}
#right a:hover, #right a:visited:hover {
	color: #CEC632;
	text-decoration: underline;
	}

.clients {
	float: left;
	width: 280px;
	padding: 0 0 30px 45px;
	color: #969696;
	}

/* =Content | Thumbnails
----------------------------------------------- */	
ul.thumbnails {
	list-style:none;
	padding:0;
	margin:0;  /* different browsers style this different so go for sure */
	text-align:left;
	}

#thumbnails2 {
	width: 520px;
	padding:0;
	margin:0 0 0 30px; 
	}
	
ul.thumbnails li {
	float:left;
	margin-bottom:5px;
	margin-right:5px;
	}
	
ul.thumbnails a img {
	border:1px solid #ccc;
	}

ul.thumbnails a:hover img {
	border:1px solid #666; /* Doesn't work in IE - no hover on non-text links */
	}


/* =Content | Thumbnails ALTERNATIVE (3)
----------------------------------------------- */
#menu {
	height: 50px;
	margin: 0;
	padding: 0;
	display: inline;
	overflow: hidden;
	list-style: none;
	}

#menu li {
	padding: 0;
	display: inline; /* duplicated for IE 5/Win */
	list-style-type: none; /* duplicated for IE 5/Win */
	}

#menu a {
	float: left;
	height: 0px !important;
	height /**/:50px; /* IE 5/Win hack */ 
	padding: 50px 0 0 0;
	overflow: hidden;
	margin-bottom:5px;
	margin-right:5px;
	border:1px solid #666;
	}

#menu a:hover {
	background-position: 0 -50px;
	border:1px solid #ccc;
	}

/* =PAGE 2 | Projektbox (Awards)
----------------------------------------------- */
.pbox_header {
	width: 522px;
	padding: 0 0 20px 0;
	margin: 0 0 0 30px;
	}

.pbox_content {
	padding: 10px 0 0;
	margin: 0 0 0 30px;
	width: 522px;
	clear:both;
	}

.pbox_content img {
	margin: 0 0 10px;
	}

.display {
	float: left;
	height: 50px;
	width: 50px;
	margin-bottom:5px;
	margin-right:5px;
	}

.display a img {
	border:1px solid #ccc;
	}

.display a:hover img {
	border:1px solid #666;
	}

.stretcher {
	}

.stretcher img {
	border:1px solid #ccc;
	}

/* =Odds and sods
----------------------------------------------- */
.yellow, .yellow a, .yellow a:link, .yellow a:visited, .yellow a:hover, .yellow a:visited:hover {
	color: #CEC632;
	text-decoration: none;
	}

hr {
	height:1px;
	width:520px;
	background:#666;
	margin: 0 30px 30px;  
	}

#browser {
	padding: 0;
	margin: 0 0 0 30px;
	width: 522px;
	clear:both;
	}

/* =Footer
----------------------------------------------- */
#footer { 
	height: 20px;
	margin: 10px auto;
	padding: 0;
	width: 950px;
	color: #383838;
	font-size: 11px;
	}
	
#footer_left { 
	float:left;
	width: 350px;
	margin-left: 20px;
	text-align: left;
	display: inline; /* IE float x2 */
	}

#footer_right { 
	float:right;
	width: 350px;
	margin-right: 20px;
	text-align: right;
	display: inline; /* IE float x2*/
	}

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

#footer a:hover, #footer a:visited:hover {
	color: #4F5647;
	text-decoration: underline;
	}