/* Stylesheet for About Productions  - All rights reserved
Created by: Yiannis Konstantakopoulos - hello@porcupine.gr 
----------------------------------------------------*/

/* Reset by E. Meyer
http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
----------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend
{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
}

body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* =Structure
----------------------------------------------------*/

body{
	text-align: center;
	font-size: 62.5%;
	font-family: "Myriad Pro", Helvetica, Arial, Verdana, sans-serif;
	color: #aaa;
	background:#444;
	/*background:  url(../img/960.png) repeat-y center top;*/
}

#wrapper{
	width: 960px;	
	margin: 0 auto;
	text-align: left;
}

/* =top
----------------------------------------------------*/
#top-wrapper{
	float: left;
	width: 100%;
	background: url(../img/misc/top-wrapper-bg-dark.jpg) repeat-x ;
}

#top{
	width: 960px;
	height: 180px;
	background: url(../img/misc/top-bg-dark.jpg) top center no-repeat #444;
	margin: 0 auto;
	padding: 5px 0 0 0;
}

#subnav{
	float: left;
	width: 400px;
}

#subnav ul{
	text-align: left;
	margin: 5px 0 0 0;
}

#subnav ul li{
	display: inline;
	margin: 0 0 0 10px;
	font-size: 1.2em;
}

#misc-nav{
	float: right;
	width: 140px;
	margin: 5px 0 0 0;
}

#back-color{
	float: left;
	width: 50px;
}

#lang{
	float: right;
	width: 50px;
	text-align: right;
	padding: 0 5px 0 0;
}


/* =head
----------------------------------------------------*/
#header{
	margin: 5em auto 0 auto;
	width: 960px;
}

#masthead{
	float: left;
	width: 130px;
	display: inline;/*IE6 Magic*/
	overflow: hidden;/*IE6 Magic*/
}


h1 a{
	position: relative;
	width: 100px;
	height: 100px;
	display: block;
}

h1 a span{
	position:absolute;
	top:0;
	left:0;
	width:100px;
	height:100px;
	background:url(../img/logo.png) no-repeat;
	cursor:pointer;
}


/* =nav
----------------------------------------------------*/
#nav{
	float: right;
	width: 830px;/*IE6 Magic*/
	font-size: 12px;
	margin: 56px 0 0 0;
	text-align: left;
	display: inline;
	overflow: hidden;
}	

#nav ul li{
	float: left;
	display: block
}

#nav ul li.photography a{
	display: block;
	float: left;
	margin: 0 0 0 0;
	padding: 25px 5px 0 45px;
	background: url(../img/tabs/li-nav-photography.png) 0 0 no-repeat;
	height: 50px;
	width: 100px;
}

#nav ul li.photography a:hover, #nav ul li.photography a.selected{
	display: block;
	float: left;
	margin: 0 0 0 0;
	padding: 25px 5px 0 45px;
	background: url(../img/tabs/li-nav-photography-hover.png) 0 0 no-repeat;
	height: 50px;
	width: 100px;
}

#nav ul li.quicktime a{
	display: block;
	float: left;
	margin: 0 0 0 10px;
	padding: 25px 5px 0 45px;
	background: url(../img/tabs/li-nav-3ds.png) 0 0 no-repeat;
	height: 50px;
	width: 100px;
}

#nav ul li.quicktime a:hover, #nav ul li.quicktime a.selected{
	display: block;
	float: left;
	margin: 0 0 0 10px;
	padding: 25px 5px 0 45px;
	background: url(../img/tabs/li-nav-3ds-hover.png) 0 0 no-repeat;
	height: 50px;
	width: 100px;
}

#nav ul li.panoramas a{
	display: block;
	float: left;
	margin: 0 0 0 10px;
	padding: 25px 5px 0 45px;
	background: url(../img/tabs/li-nav-panoramas.png) 0 0 no-repeat;
	height: 50px;
	width: 100px;
}

#nav ul li.panoramas a:hover, #nav ul li.panoramas a.selected{
	display: block;
	float: left;
	margin: 0 0 0 10px;
	padding: 25px 5px 0 45px;
	background: url(../img/tabs/li-nav-panoramas-hover.png) 0 0 no-repeat;
	height: 50px;
	width: 100px;
}

#nav ul li.architectural a{
	display: block;
	float: left;
	margin: 0 0 0 10px;
	padding: 25px 5px 0 45px;
	background: url(../img/tabs/li-nav-architectural.png) 0 0 no-repeat;
	height: 50px;
	width: 100px;
}

#nav ul li.architectural a:hover, #nav ul li.architectural a.selected{
	display: block;
	float: left;
	margin: 0 0 0 10px;
	padding: 25px 5px 0 45px;
	background: url(../img/tabs/li-nav-architectural-hover.png) 0 0 no-repeat;
	height: 50px;
	width: 100px;
}

#nav ul li.industrial a{
	display: block;
	float: left;
	margin: 0 0 0 10px;
	padding: 25px 5px 0 45px;
	background: url(../img/tabs/li-nav-industrial.png) 0 0 no-repeat;
	height: 50px;
	width: 100px;	
}

#nav ul li.industrial a:hover, #nav ul li.industrial a.selected{
	display: block;
	float: left;
	margin: 0 0 0 10px;
	padding: 25px 5px 0 45px;
	background: url(../img/tabs/li-nav-industrial-hover.png) 0 0 no-repeat;
	height: 50px;
	width: 100px;	
}

/* =home
----------------------------------------------------*/
#container{
	float: left;
	clear: left;
	margin: 20px 0 0 0;
	width: 960px;
}


/* =footer
----------------------------------------------------*/
#footer-wrapper{
	clear: left;
	float: left;
	width: 100%;
	height: 70px;
	margin: 0 0 10px 0;	
	background: url(../img/misc/footer-bg-dark.png) repeat-x;
	color: #aaa;
}

#footer{
	width: 960px;
	margin: 0 auto;
	text-align: left;
}

#copyright{
	width: 400px;
	float: left;
}

#credits{
	width: 400px;
	float: right;
}

#copyright p{
	padding: 40px 0 0 0;
	font-size: 1em;
}

#credits p{
	text-align: right;
	padding: 40px 0 0 0;
	font-size: 1em;
}

/* =typo
----------------------------------------------------*/
p{
	font-size: 1.2em;
	line-height: 1.6em;
}

div.side.home h1{
	font-size: 1.8em;
	margin: 1em 10px;
	font-weight: normal;
	text-shadow:0 1px 0 #fff;
	color: #ddd;	
}

div.side.home p{
	font-size: 1.2em;
	line-height: 1.6em;
	padding: 0 1em 1em 1em;
	text-shadow:0 1px 0 #fff;
}

div.direction-text h1{
	font-size: 1.8em;
	padding: 1em 10px;
	font-weight: normal;
	text-shadow:0 1px 0 #fff;
	color: #ddd;	
}

div.direction-text p{
	font-size: 1.2em;
	line-height: 1.6em;
	padding: 0 1em 1em 1em;
	text-shadow:0 1px 0 #fff;
}

/* =linkage
----------------------------------------------------*/
a{
	color: #49a;
	text-decoration: none;
}

a:hover{
	color: #49a;
	text-decoration: underline;
}

#nav a{
	color: #aaa ;
	text-decoration: none;
}

#nav a:hover{
	color: #ddd;
	text-decoration: none;
}

#subnav a, #footer a{
	color: #aaa;
	text-decoration: none;
}

#subnav a:hover, #subnav a.selected, #footer a:hover{
	color: #ddd;
	text-decoration: none;
}


/* =tabs @home
----------------------------------------------------*/
.stripViewer .panelContainer .panel ul {
	text-align: left;
	margin: 0 15px 0 30px;
}

.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
	margin: 20px 0;
	position: relative;
	width: 100%;
}

/* These 2 lines specify style applied while slider is loading */
.csw {width: 100%; height: 460px; background: #fff; overflow: scroll}
.csw .loading {margin: 200px 0 300px 0; text-align: center}

.stripViewer { /* This is the viewing window */
	position: relative;
	overflow: hidden; 
	border: none; /* this is the border. should have the same value for the links */
	margin: auto;
	width: 800px; /* Also specified in  .stripViewer .panelContainer .panel  below */
	height: 400px;
	clear: both;
	background: #000;
	padding: 0 0 20px 0;
}

.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
	position: relative;
	left: 0; top: 0;
	width: 100%;
	list-style-type: none;
	/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
}


.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
	float:left;
	height: 100%;
	position: relative;
	width: 800px; /* Also specified in  .stripViewer  above */
}

.stripViewer .panelContainer .panel .wrap { /* wrap to give some padding in the panels, without messing with existing panel width */
	padding: 0 30px ;
}

.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
	margin: auto;
}

.stripNav ul { /* The auto-generated set of links */
	list-style: none;
}

.stripNav ul li {
	float: left;
	margin-right: 80px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
	margin-top: 10px;
	width: 50px;
}

.stripNav a { /* The nav links */
	line-height: 1.1em;
	background: #edf5f7;
	color: #aaa;
	text-decoration: none;
	display: block;
	padding: 0 5px ;
	font-size: 1.4em;
	height: 30px;
}

/* =arrows
----------------------------------------------------*/
.stripNavL, .stripNavR {
	position: absolute;
	top: 150px;
	text-indent: -9000em;
}
		
.stripNavL a, .stripNavR a {
	display: block;
	height: 75px;
	width: 55px;
}
		
.stripNavL {
	left: 0;
	/*z-index: 100*/
	}
		
.stripNavR {
	right: 0;
}
		
.stripNavL {
	background: url(../img/misc/arrow-left.png) no-repeat center;
}
		
.stripNavR {
	background: url(../img/misc/arrow-right.png) no-repeat center;
}

/* Replace the text with images in the list, baby */

/* =1
----------------------------------------------------*/
#container .stripNav li.tab1 a{
	background: url(../img/tabs/photography.png) center center no-repeat;
	padding: 15px 5px 15px 50px;
}

#container .stripNav li.tab1 a:hover {
	background: url(../img/tabs/photography.png) center center no-repeat #333;
	padding: 15px 5px 15px 50px;
}

#container .stripNav  li.tab1 a.current {
	background: url(../img/tabs/photography.png) center center no-repeat #333;
	padding: 15px 5px 15px 50px;
}

/* =2
----------------------------------------------------*/
#container .stripNav li.tab2 a{
	background: url(../img/tabs/3ds.png) no-repeat center center ;
	padding: 15px 5px 15px 50px;
}

#container .stripNav li.tab2 a:hover {
	background: url(../img/tabs/3ds.png) no-repeat center center #333;
	padding: 15px 5px 15px 50px;
}

#container .stripNav li.tab2 a.current{
	background: url(../img/tabs/3ds.png) no-repeat center center #333;
	padding: 15px 5px 15px 50px;
}

/* =3
----------------------------------------------------*/
#container .stripNav li.tab3 a{
	background: url(../img/tabs/panoramas.png) no-repeat center center;
	padding: 15px 5px 15px 50px;
}

#container .stripNav li.tab3 a:hover{
	background: url(../img/tabs/panoramas.png) no-repeat  center center #333;
	padding: 15px 5px 15px 50px;
}

#container .stripNav li.tab3 a.current{
	background: url(../img/tabs/panoramas.png) no-repeat center center #333;
	padding: 15px 5px 15px 50px;
}

/* =4
----------------------------------------------------*/
#container .stripNav li.tab4 a{
	background: url(../img/tabs/architectural.png) no-repeat  center center;
	padding: 15px 5px 15px 50px;
}

#container .stripNav li.tab4 a:hover{
	background: url(../img/tabs/architectural.png) no-repeat  center center #333;
	padding: 15px 5px 15px 50px;
}

#container .stripNav li.tab4 a.current{
	background: url(../img/tabs/architectural.png) no-repeat  center center #333;
	padding: 15px 5px 15px 50px;
}

/* =5
----------------------------------------------------*/
#container .stripNav li.tab5 a{
	background: url(../img/tabs/industrial.png) no-repeat   center center;
	padding: 15px 5px 15px 50px;
}

#container .stripNav li.tab5 a:hover{
	background: url(../img/tabs/industrial.png) no-repeat  center center #333;
	padding: 15px 5px 15px 50px;
}

#container .stripNav li.tab5 a.current{
	background: url(../img/tabs/industrial.png) no-repeat center center #333;
	padding: 15px 5px 15px 50px;
}

/* =wrap elements
----------------------------------------------------*/
div.wrap-image{
	float: right;
	width: 445px;
	padding: 10px;
}

div.wrap-text{
	float:left;
	width: 270px;
	background: #000;
}

/* =wrap typo
----------------------------------------------------*/
div.wrap-text h1{
	font-size: 1.8em;
	padding: 1em 10px 1em 20px;
	font-weight: normal;
	text-shadow:0 1px 0 #333;
	color: #ddd;
}

div.wrap-text p{
	font-size: 1.2em;
	line-height: 1.6em;
	padding: 0 10px 1em 20px;
	text-shadow:0 1px 0 #333;
}


/* =photography + =arch-interior + =arch-exterior + =industrial
--------------------------------------------------------------------------*/
div.photo-nav, div.arch-interior-nav, div.arch-exterior-nav{
	width: 960px;
	float: left;
	margin: 20px 0;
	clear: left;
}

div.photo-nav ul li, div.arch-interior-nav ul li, div.arch-exterior-nav ul li{
	display: inline;
	float: left;
	margin: 0 40px 0 0;
	padding: .5em 0;
	font-size: 1.4em;
}

div.photo-nav ul li a, div.arch-interior-nav ul li a, div.arch-exterior-nav ul li a{
	padding: .5em;
	text-decoration: none;
}

div.photo-nav ul li a:hover, div.photo-nav ul li a.selected, div.arch-interior-nav ul li a:hover, div.arch-interior-nav ul li a.selected, div.arch-exterior-nav ul li a:hover, div.arch-exterior-nav ul li a.selected{
	color: #ddd;
	background: #000;
}

div.photo-nav p, div.arch-interior-nav p, div.arch-exterior-nav p{
	float: left;
	margin: 40px 40px 0 5px;
	padding: .5em 0;
	font-size: 1.2em;
}

#photo-container, #arch-interior-container, #arch-exterior-container, #industrial-container{
	float: left;
	clear: left;
	margin: 20px 0 0 0;
	width: 960px;
}

div.photography-item, div.arch-interior-item, div.arch-exterior-item, div.industrial-item{
	float: left;
	width: 300px;
	margin: 0 15px 20px 0;
	background: #000;
}

div.photo{
	float: left;
	width: 300px;
}

div.description{
	clear: left;
	float: left;
	width: 300px;
	height: 80px;
	background: #000;
}

div.photography-item h1, div.arch-interior-item h1, div.arch-exterior-item h1, div.industrial-item h1{
	font-size: 1.8em;
	padding: 10px;
	font-weight: normal;
	text-shadow:0 1px 0 #333;
	color: #ddd;
}

div.photography-item h2, div.arch-interior-item h2, div.arch-exterior-item h2, div.industrial-item h2{
	font-size: 1.4em;
	padding: 10px;
	font-weight: normal;
	text-shadow:0 1px 0 #333;	
	color: #ddd;
}

div.photography-item p, div.arch-interior-item p, div.arch-exterior-item p, div.industrial-item p{
	font-size: 1.2em;
	padding: 0 10px 10px 10px;
	line-height: 1.6em;
	text-shadow:0 1px 0 #333;
}


/* =panoramas + =arch-interactive 
----------------------------------------------------*/
#panoramas-container, #arch-interactive-container{
	float: left;
	clear: left;
	margin: 20px 0 0 0;
}

#panoramas-intro, #arch-interactive-intro{
	background: #000;
	width: 945px;
	margin: 0 0 20px 0;
	padding: 10px 0 30px 0;
}

#panoramas-intro h1, #arch-interactive-intro h1{
	font-size: 1.8em;
	margin: 20px 0 0 0;
	padding: 10px 10px 10px 20px;
	font-weight: normal;
	text-shadow:0 1px 0 #333;
	color: #ddd;	
}

#panoramas-intro p, #arch-interactive-intro p{
	font-size: 1.2em;
	padding: 0 20px 10px 20px;
	line-height: 1.6em;
	text-shadow:0 1px 0 #333;
}

#panoramas-intro img.img_right, #arch-interactive-intro img.img_right{
	float: right;
	margin: 0 0 10px 80px;
}

div.panoramas-item, div.arch-interactive-item{
	clear: both;
	float: left;
	margin: 0 15px 20px 0;
	background: #000;
	width: 945px;
}

div.panoramas-photo, div.arch-interactive-photo{
	float: left;
	width: 600px;
}

div.panoramas-description, div.arch-interactive-description{
	float: right;
	width: 345px;
}

div.panoramas-description h2, div.arch-interactive-description h2{
	font-size: 1.4em;
	font-weight: normal;
	padding: 10px 0 10px 0;
	text-shadow:0 1px 0 #333;
	color: #ddd;		
}

div.panoramas-description p, div.arch-interactive-description p{
	font-size: 1.2em;
	padding: 0 0 10px 0;
	line-height: 1.6em;
	text-shadow:0 1px 0 #333;	
}

/* =architectural
----------------------------------------------------*/
#architectural-container{
	float: left;
	clear: left;
	margin: 20px 0 0 0;
}

#architectural-intro h1{
	font-size: 1.8em;
	padding: 10px 10px 10px 20px;
	font-weight: normal;
	text-shadow:0 1px 0 #333;
	color: #ddd;	
}

div.architectural-item{
	clear: both;
	float: left;
	margin: 0 15px 20px 0;
	padding: 10px;
	background: #000;
	width: 945px;
}

div.architectural-photo{
	float: right;
	width: 455px;
}

div.architectural-description{
	float: right;
	width: 345px;
	margin: 0 50px 0 10px;	
}

div.architectural-description h2{
	font-size: 1.4em;
	font-weight: normal;
	padding: 10px 0 10px 0;
	text-shadow:0 1px 0 #333;
	color: #ddd;		
}

div.architectural-description p{
	font-size: 1.2em;
	padding: 0 0 10px 0;
	line-height: 1.6em;
	text-shadow:0 1px 0 #333;	
}


/* =content-text
----------------------------------------------------*/
#content-text{
	float: left;
	width: 600px;
	display: inline;/*IE6 Magic*/
	overflow: hidden;/*IE6 Magic*/
}

#content-text h1{
	font-size: 1.8em;
	margin: 1em 10px;
	font-weight: normal;
	text-shadow:0 1px 0 #333;
	line-height: 1.2em;
	color: #ddd;	
}

#content-text p{
	font-size: 1.2em;
	line-height: 1.6em;
	padding: 0 1em 1em 1em;
	text-shadow:0 1px 0 #333;
	width: 600px;
}

#content-text ul li{
	font-size: 1.2em;
	line-height: 1.6em;
	padding: 0 0 .5em 10px;
	text-shadow:0 1px 0 #333;
	width: 600px;
	list-style: square
}

#google-maps{
	float: right;
	width: 340px;
	display: inline;/*IE6 Magic*/
	overflow: hidden;/*IE6 Magic*/
}
}