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

//
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 {
	margin: 0;
	padding: 0;
	text-align: center;
	background:#FFF;
	font-size: 125%;
	font-family: Helvetica, sans-serif;
	color: #939495;
}


#page {
	
margin: 40px auto 0;
	
padding: 0;
	
width: 830px;
	
text-align: left;
	
border:solid 1px #666;
	}


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: 100px;
	
position: relative;
	
clear: both;
	
margin: 0;
	
padding: 0 0 30px 0;
	
}


#logo {
	
height: 83px;
	
width:183px;
	
position:relative;
	
float:left;
	
margin:0 0 0 35px;
	
text-align: left;
	

display:inline;
	
}



/* =Header | Navigation
----------------------------------------------- */	

.navigation, .navigation2
{
	float: left;
	text-align: left;
	display: inline; /* IE float x2 */
	border-left: 1px solid #666;
	padding: 0 0 0 10px;
	
	margin-left: 150px;
}


.navigation2 {
	
width: 210px;
	
}


.navigation ul, .navigation2 ul {
	
list-style: none;
	
margin: 0;
	
padding: 0;
	
}
	

.navigation li, .navigation2 li {
	
margin: 0;
	
padding: 0;
	
}
	

.navigation a, .navigation2 a {
	
color: #969696;
	
padding: 3px 10px;
	
text-decoration: none;
	
}
	

.navigation a:hover, .navigation2 a:hover {
	
color: #CEC632;
	
}
	

.navigation .currentpage a, .navigation2 .currentpage a {
	
color: #CEC632;
	
font-weight: bold;
	
}



/* =Content
----------------------------------------------- */

#content
{
	overflow: hidden;
	width: 80%;
	padding: 0 0 20px;
	margin: 10px 0 0 125px;
}


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

#center {
	
position:relative;
	
float:left;
	
margin:10px 0 0 105px;
	
text-align: left;
	
display: inline; /* IE float x2 */
	
border:1px solid #666;
	
}
#left {
	
width:180px;
	
position:relative;
	
float:left;
	
margin:10px 0 0 35px;
	
text-align: left;
	
display: inline; /* IE float x2 */
	
}


#left2 {
	
width:166px;
	
padding: 0;
	
background-color: #4C5051;
	
float:left;
	
margin:10px 11px 0 35px;
	
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: 150%;
	
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, #right2 {
	
position:relative;
	
float:right;
	
width:580px;
	
margin: 10px 32px 0 0;
	
text-align: left;
	
display: inline; /* IE float x2 */
	
}


#right2 {
	
width: 575px;
	
border: 1px solid #666;
	
background-color:#4C5051;
	
}
	

#right2 p, #right2 h2, #right2 h3 {
	
margin: 0 30px 20px;
	
color:#969696;
	
}


#right2 h2, #right2 h3 {
	
margin-top: 20px;
	
font-size: 150%;
	
color: #757575;
	
font-weight:lighter;
	
}


#right2 h3 {
	
font-size: 120%;
	
font-weight:bold;
	
}


#right2 a:link, #right2 a:visited, #right2 a:hover, #right2 a:visited:hover {
	
color: #969696;
	
text-decoration: none;
	
}


#right2 a:hover, #right2 a:visited:hover {
	
color: #CEC632;
	text-decoration: underline;
	
}


.clients {
	
width: 255px;
	
margin: 0 0 30px 20px;
	
color:#969696;
	border: 0;
	
float:left;
	
display: inline; /* IE float x2 */
	
}



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



/* =ImageGallery
----------------------------------------------- */

#OuterContainer {
	
padding: 0;
	
margin: 0 auto;
}

#Container, #Container2 {
	
position: relative;
	
height: 200px;
	
width: 200px;
	
margin: 0 auto;
	
background-color: #dedede;
	
border: 1px solid #666; /* Used to be 5px and #ccc*/
	
font-size: 0px;
}


#Photo {
	
position: absolute;
	
top: 0;
	
left: 0;
	
z-index: 5;
}


#Loading {
	
height: 25%;
	
width: 100%;
	
position: absolute;
	
top: 40%;
	
left: 0%;
	
text-align: center;
	
z-index: 0;
}


#LinkContainer {
	
position: absolute;
	
top: 0;
	left: 0;
	
height: 100%;
	
width: 100%;
	
z-index: 10;
	
/* filter:alpha(opacity:80); 
/* Specify opacity for IE */
}


#PrevLink, #NextLink {
	
cursor: pointer;
	
width: 48%;
	
height: 100%;
	
background: transparent url(../images/c.gif) no-repeat; /* Trick IE into showing hover */
	
display: block;

}


#PrevLink span, #NextLink span { display: none; }
#PrevLink { left: 0; float: left; }

#NextLink { right: 0; float: right; }

/* background image for IE */

#PrevLink:hover, #PrevLink:visited:hover { background: url(../images/prev_minus.gif) 20% 50% no-repeat; }

#NextLink:hover, #NextLink:visited:hover { background: url(../images/next_plus.gif) 80% 50% no-repeat; }


/* backgroudn image for compliant browsers */

#LinkContainer>#PrevLink:hover, #LinkContainer>#PrevLink:visited:hover { 
background: url(../images/prev_chevron.png) 20% 50% no-repeat; }

#LinkContainer>#NextLink:hover, #LinkContainer>#NextLink:visited:hover { 
background: url(../images/next_chevron.png) 80% 50% no-repeat; }


#CaptionContainer {
	
margin: 10px auto 0;
	p
adding: 0;
	
width: 200px;
	
text-align: left;
/*	
background-color: #4C5051;
	
border: 1px solid #666; */
	
}


#Counter {
	
float:left;
	
font-weight: bold;
	
color: #666;
	
padding: 10px 0 0 15px;
	
margin-bottom: 20px;
	
width:30px;
	}


#Caption {
	
padding: 10px 20px 15px 55px;
	
display:block;
	
text-align: center;
	
color:#969696;
	
}



/* =PAGE 2 | Projektbox (Awards)
----------------------------------------------- */

.pbox_header {
	
width: 522px;
	
padding: 0 0 20px 0;
	
margin: 0 0 0 30px;
	
}


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


.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
----------------------------------------------- */

.red, .red a, .red a:link, .red a:visited, .red a:hover, .red a:visited:hover {
	
color: #B94343;
	
text-decoration: none;
	}


.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;
	
}



/* =Links
----------------------------------------------- */



/* =Footer
----------------------------------------------- */

#footer { 
	
height: 20px;
	
margin: 10px auto;
	
padding: 0;
	
width: 830px;
	
color: #757575;
	
font-size: 9px;
	}
	

#footer_left { 
	
float:left;
	
width: 350px;
	
margin-left: 10px;
	
text-align: left;
	
display: inline; /* IE float x2 */
	
}


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


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


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