/*
1Image
Author: Lee Munroe www.leemunroe.com June 2008
*/


/* 
################### CSS contents ###################
* 1 Common
* 2 Layout
* 3 Nav
* 4 Headings
* 5 Lists
* 6 Images
* 7 Links
* 8 Forms
* 9 Tables
* 10 Typography 
* 11 Other
*/


/* 
################### Colour reference ###################
#d0d0cf Silver
#151414 Dark/black
#23272e Dark grey
#1c1f25 Darker grey
#55575c Grey
#31302e BG
*/
 
 
/*
################### Common ################### 
*/

*{
margin:0;
padding:0;
text-decoration:none;
}

.clear{
clear:both;
}

html {
overflow: -moz-scrollbars-vertical;
}

#skipto{
display:none;
}

#footer div{
zoom: 1.0; /*jumping link hover fix*/
}


/*
################### Layout ################### 
*/

body{
background:#31302e;
font:72.5%/1.5 Arial, Helvetica, sans-serif;
color:#bbbbba;
}

#container{
margin-left:10px;
width:960px;
padding:20px 0;
border-bottom:#2c2b29 1px solid;
}

#header{
width:330px;
height:400px;
float:left; 
position:relative;
}

#main{
margin-left:30px;
width:600px;
float:right;
}

#footer{
margin-left:10px;
width:960px;
padding:20px 5px;
position:relative;
border-top:#363533 1px solid;
}

#thumbnails{
width:300px;
float:left;
}

#showcase{
width:300px;
border-left:1px solid #151615;
padding-left:10px;
}
/*
################### Nav ################### 
*/

#nav, #subnav{
list-style:none;
text-transform:uppercase;
}

#nav{
margin-left:5px;
}

#nav li{
display:inline;
}

#nav li a{
color:#8e8e8e;
font-size:1em;
font-weight:bold;
padding:5px;
}

#nav li a.pr:hover, #nav li.active a.pr{
color:#a14fa2;
}

#thumbnails li a.pr-active{
border-color:#a14fa2;
}

#nav li a.corporate:hover, #nav li.active a.corporate{
color:#4f6aa2;
}

#thumbnails li a.corporate-active{
border-color:#4f6aa2;
}

#nav li a.commercial:hover, #nav li.active a.commercial{
color:#4fa262;
}

#thumbnails li a.commercial-active{
border-color:#4fa262;
}

#nav li a.studio:hover, #nav li.active a.studio{
color:#a2994f;
}

#thumbnails li a.studio-active{
border-color:#a2994f;
}

#subnav li a.event:hover, #subnav li.active a.event{
color:#fff;
}

#thumbnails li a.product-active{
border-color:#784949;
}

#nav li a.product:hover, #nav li.active a.product{
color:#784949;
}


#thumbnails li a.event-active{
border-color:#784949;
}

#subnav{
position:absolute;
top:380px;
left:5px;
}

#subnav li{
display:inline;
}

li.block{
display:block!important;
}

li.block a{
padding-left:0!important;
}

#subnav li a{
color:#8e8e8e;
font-weight:bold;
padding:4px 7px;
}

#subnav li.first a{
padding-left:0;
}

#subnav li a:hover, #subnav li a.active{
color:#f0a109;
}

/*
################### Headings ################### 
*/

h1{
width:280px;
height:65px;
background:url(/images/layout/h1.gif) no-repeat;
float:left;
margin-bottom:30px;
}

h1 span{
position:absolute;
left:-9999px;
}

h2{
font-size:2em;
font-weight:normal;
margin-bottom:30px;
}

h2 span{
font-size:0.4em;
}

h3{
width:345px;
height:30px;
background:url(/images/layout/h3.gif) no-repeat;
margin:0 auto 30px auto;
}

h3 span{
position:absolute;
left:-9999px;
}

/*
################### Lists ################### 
*/
#main li{
margin:10px 0;
}

#main ul{
margin-left:20px;
}

/*
################### Images ################### 
*/

img{
border:none;
}

/*
################### Links ################### 
*/

h1 a{
display:block;
width:100%;
height:100%;
}

a{
color:#f0a109;
border-bottom:1px solid #41403d;
}

a:hover{
border:none;
color:#fff;
}

#nav a, #subnav a, h1 a, a.img{
border:none;
}

#footer a{
color:#fff;
}

/*
################### Forms ################### 
*/

#frmContact fieldset{
border:none;
margin-top:20px;
}

#frmContact legend{
font-weight:bold;
color:#fff;
}

#frmContact label{
width:250px;
display:block;
}

#frmContact input, #frmContact textarea{
padding:2px;
background:url(/images/layout/inputbg.jpg) repeat-x #fff;
border:1px solid #000;
}

#frmContact #submit{
background:none;
border:none;
color:#f0a109;
font-weight:bold;
cursor:pointer;
}

#frmLogin fieldset{
border:none;
margin-top:20px;
}

#frmLogin legend{
font-weight:bold;
color:#fff;
}

#frmLogin label{
width:250px;
display:block;
}

#frmLogin input, #frmLogin textarea{
padding:2px;
background:url(/images/layout/inputbg.jpg) repeat-x #fff;
border:1px solid #000;
}

#frmLogin #submit{
background:none;
border:none;
color:#f0a109;
font-weight:bold;
cursor:pointer;
}


/*
################### Tables ################### 
*/

table{
margin-bottom:30px;
}


/*
################### Typography ################### 
*/

p{
margin:10px 0;
}

#main p{
text-align:justify;
}

em{
font-size:1.2em;
color:#fff;
}

.caption{
font-size:0.9em;
text-align:left;
}

blockquote{background:#2C2B29;padding:10px;border-left:5px solid #363533;font-style:italic;margin-bottom:20px;}
blockquote p.author{font-style:normal;color:#fff;font-weight:bold;}
blockquote strong{color:#fff;}
/*
################### Other ################### 
*/

.largephoto{
text-align:center;
height:420px;
}

#thumbnails ul{
list-style:none;
margin-top:20px;
}

#thumbnails ul li{
margin:0 20px 20px 0;
float:left;
}

#thumbnails ul li a{
border:2px solid #494949;
display:block;
float:left;
}

#thumbnails ul li a:hover, #thumbnails ul li a.active{
border-color:#b6b6b6;
}

#footer .leemunroe{
font-size:0.9em;
}

.right{
float:right;
}

.left{
float:left;
}

#quote{
width:600px;
float:right;
}

.text{
width:400px;
margin:0 auto;
}


/* Extra */
#myGallery, #myGallerySet, #flickrGallery
{
	width:400px;
	height:300px;
	margin:0 auto;
}

#flickrGallery
{
	width: 400px;
	height: 300px;
}

#myGallery img.thumbnail, #myGallerySet img.thumbnail
{
	display: none;
}

.jdGallery
{
	overflow: hidden;
	position: relative;
}

.jdGallery img
{
	border: 0;
	margin: 0;
}

.slideElement{background-color:#31302E;}

.jdGallery .slideElement
{
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url('img/loading-bar-black.gif');
}

.jdGallery .loadingElement
{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url('img/loading-bar-black.gif');
}

.jdGallery .slideInfoZone
{
	position: absolute;
	z-index: 10;
	width: 100%;
	margin: 0px;
	left: 0;
	bottom: 0;
	height: 40px;
	background: #333;
	color: #fff;
	text-indent: 0;
	overflow: hidden;
}

* html .jdGallery .slideInfoZone
{
	bottom: -1px;
}

.jdGallery .slideInfoZone h2
{
	padding: 0;
	font-size: 80%;
	margin: 0;
	margin: 2px 5px;
	font-weight: bold;
	color: inherit;
}

.jdGallery .slideInfoZone p
{
	padding: 0;
	font-size: 60%;
	margin: 2px 5px;
	color: #eee;
}

.jdGallery div.carouselContainer
{
	position: absolute;
	height: 135px;
	width: 100%;
	z-index: 10;
	margin: 0px;
	left: 0;
	top: 0;
}

.jdGallery a.carouselBtn
{
	position: absolute;
	bottom: 0;
	right: 30px;
	height: 20px;
	/*width: 100px; background: url('img/carousel_btn.gif') no-repeat;*/
	text-align: center;
	padding: 0 10px;
	font-size: 13px;
	background: #333;
	color: #fff;
	cursor: pointer;
}

.jdGallery .carousel
{
	position: absolute;
	width: 100%;
	margin: 0px;
	left: 0;
	top: 0;
	height: 115px;
	background: #333;
	color: #fff;
	text-indent: 0;
	overflow: hidden;
}

.jdExtCarousel
{
	overflow: hidden;
	position: relative;
}

.jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper
{
	position: absolute;
	width: 100%;
	height: 78px;
	top: 10px;
	left: 0;
	overflow: hidden;
}

.jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner
{
	position: relative;
}

.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail
{
	cursor: pointer;
	
	background-position: center center;
	float: left;
	border: solid 1px #fff;
}

.jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail
{
	margin-bottom: 10px;
}

.jdGallery .carousel .label, .jdExtCarousel .label
{
	font-size: 13px;
	position: absolute;
	bottom: 5px;
	left: 10px;
	padding: 0;
	margin: 0;
}

.jdGallery .carousel .wallButton, .jdExtCarousel .wallButton
{
	font-size: 10px;
	position: absolute;
	bottom: 5px;
	right: 10px;
	padding: 1px 2px;
	margin: 0;
	background: #222;
	border: 1px solid #888;
	cursor: pointer;
}

.jdGallery .carousel .label .number, .jdExtCarousel .label .number
{
	color: #b5b5b5;
}

.jdGallery a
{
	font-size: 100%;
	text-decoration: none;
	color: inherit;
}

.jdGallery a.right, .jdGallery a.left
{
	position: absolute;
	height: 99%;
	width: 25%;
	cursor: pointer;
	z-index:10;
	filter:alpha(opacity=20);
	-moz-opacity:0.2;
	-khtml-opacity: 0.2;
	opacity: 0.2;
}

* html .jdGallery a.right, * html .jdGallery a.left
{
	filter:alpha(opacity=50);
}

.jdGallery a.right:hover, .jdGallery a.left:hover
{
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
}

.jdGallery a.left
{
	left: 0;
	top: 0;
	background: url('img/fleche1.png') no-repeat center left;
}

* html .jdGallery a.left { background: url('img/fleche1.gif') no-repeat center left; }

.jdGallery a.right
{
	right: 0;
	top: 0;
	background: url('img/fleche2.png') no-repeat center right;
}

* html .jdGallery a.right { background: url('img/fleche2.gif') no-repeat center right; }

.jdGallery a.open
{
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.withArrows a.open
{
	position: absolute;
	top: 0;
	left: 25%;
	height: 99%;
	width: 50%;
	cursor: pointer;
	z-index: 10;
	background: none;
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
}

.withArrows a.open:hover { background: url('img/open.png') no-repeat center center; }

* html .withArrows a.open:hover { background: url('img/open.gif') no-repeat center center;
	filter:alpha(opacity=80); }
	
	
/* Gallery Sets */

.jdGallery a.gallerySelectorBtn
{
	z-index: 15;
	position: absolute;
	top: 0;
	left: 30px;
	height: 20px;
	/*width: 100px; background: url('img/carousel_btn.gif') no-repeat;*/
	text-align: center;
	padding: 0 10px;
	font-size: 13px;
	background: #333;
	color: #fff;
	cursor: pointer;
	opacity: .4;
	-moz-opacity: .4;
	-khtml-opacity: 0.4;
	filter:alpha(opacity=40);
}

.jdGallery .gallerySelector
{
	z-index: 20;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	
}

.jdGallery .gallerySelector h2
{
	margin: 0;
	padding: 10px 20px 10px 20px;
	font-size: 20px;
	line-height: 30px;
	color: #fff;
}

.jdGallery .gallerySelector .gallerySelectorWrapper
{
	overflow: hidden;
}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton
{
	margin-left: 10px;
	margin-top: 10px;
	border: 1px solid #888;
	padding: 5px;
	height: 40px;
	color: #fff;
	cursor: pointer;
	float: left;
}

.jdGallery .gallerySelector .gallerySelectorInner div.hover
{
	background: #333;
}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview
{
	
	background-position: center center;
	float: left;
	border: none;
	width: 40px;
	height: 40px;
	margin-right: 5px;
}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3
{
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-weight: normal;
}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info
{
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-weight: normal;
	color: #aaa;
}