html{background-color: #fff;}

/* header */


.custom-doc { width:79em;*width:77.1em;min-width:1027px; margin:auto; text-align:left; }

#hd{
	position: fixed;
	top: 0;
	background-color: #fff;
	width: 1071px;
	margin: 0 auto;
	}

#shadow{
	position: fixed;
	top: 110px;
	background: transparent url(../img/navigation/shadow.png) top left repeat-x;
	height: 11px;
	width: 100%;
}

#hd, #shadow{z-index: 1000;}

/* stop default borders around links (firefox) */
a {
	outline: none;
}

/* pad out body */
#padder{padding: 0 35px 0 36px;}

#navwrapper{
	float: left;
	background: #fff url(../img/navigation/snake-full.gif) 20px 0 no-repeat;
}

#navwrapper ul{padding: 46px 42px 45px 105px; width: 532px;}
#hd li{display: inline;}

#navwrapper li{padding-right: 27px;}

#navwrapper a, #hdrauxwrapper a{
	color: #FA9700;
	text-decoration: none;
	font-weight: bold;
	text-transform: lowercase;
	font-size: 16px;
	}
	
#hdrauxwrapper a{
	font-size: 14px;
}
	
#hd a:hover {
	color: #8DD9E7;
}

#hdrauxwrapper{float: left; padding-top: 44px; width: 300px;}

#hdrauxwrapper ul{ position: relative; top: -17px; left: 146px;}

#hd h1{
	text-indent: -9999px;
	background: #fff url(../img/creature-logo.png) top left no-repeat;
	height: 26px;
	position: relative;
	left: -21px;
	}
	
#hd h1 a{
	width: 130px;
}

#bd{
	margin-top: 130px;
	width: 886px;
	margin-left: 5px;
}

/*
SECTION HEADERS
*/
a.section{
	display: block;
	width: 1px; height: 1px;
	overflow: hidden;
	position: relative;
	top: -210px;
	text-indent: -10000px;
}

h2{
	margin: 40px 30px 34px 0;
	padding-bottom: 13px;
	border-bottom: dotted 2px #bfbfbf;
}


/* custom width adjustments */

/* text right */
.yui-gc .yui-u{ width: 195px; margin-right: 10px;}
.yui-gc .first{ width: 650px; }
/* text left (now defunct) */


/* .yui-gd div.yui-u{ width: 72%;}
.yui-gd div.first{ width: 26%;}
 */

/*
ASIDE
*/
.aside{
	float: right;
	position: relative;
	top: -45px;
	left: -14px;
	width: 217px;
	height: 63px;
	overflow: visible;
	z-index: 50;
	font-size: 11px;
}

.asideSlider{
	position: relative;
	left: -40px;
}

a.close{
	position: relative;
	left: 151px;
	top: -22px;
}

.asideTitle{
	font-weight: bold;
	margin-bottom: 5px;
}

div.asideContent{
	background: transparent url(../img/aside-over-bg-new.png) top left no-repeat;
	padding: 5px;
	height: 250px;
	padding: 31px 10px 10px 10px;
	position: relative;
	top: -51px;
	left: 30px;
	width: 193px;
	overflow: hidden;
}


/* first 'aside' below a section header need a slight tweak */
a.section + div.item div.aside{
	top: -47px;
}

/*
CONTENT AREAS (SAME FOR ALL PORTFOLIO ITEMS)
*/
.contentbar {
	position: relative;
	left: -5px;
}

.title{
	margin: 16px 0 19px 0;
	font-weight: bold;
	text-transform: uppercase;
	color: #6d6f72;
	font-size: 10px;
}

.header{
	font-size: 19px;
	font-weight: bold;
	font-family: Helvetica, Arial, Sans-serif;
	margin-bottom: 14px;
	line-height: 23px;
}

.content{
	font-family: helvetica, arial, sans-serif;
	font-size: 12px;
	/* background: #fff url(../img/divider.gif) bottom left no-repeat; */
	padding-bottom: 15px;
	border-bottom: dotted 1px #bfbfbf;
}

.pcontent{
	margin-bottom: 12px;
	line-height: 17px;
}

.pcontentfull{
	margin-top: 12px;
}

.meta{margin-top: 15px;}

.meta a, a.readmore{
	display: block;
	margin-bottom: 10px;
	color: #c8c9cb;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: bold;
	}
	
.meta a:hover, a.readmore:hover{
	color: #4d4d4d;
}

a.watchvideo{margin-bottom: 3px;}
a.visitwebsite{margin-bottom: 4px;}

.meta a img, a.readmore img{
	padding-right : 23px;
	position: relative;
	top: 4px;
}

div.share{
	position: relative;
	top: -5px;
}

div.share a{
	padding-left:36px;
	margin-bottom: 7px;
}

/* container for each portfolio item */
.item{
	padding-bottom: 32px;
	margin-bottom: 33px;
	border-bottom: dotted 2px #bfbfbf;
	margin-right: 15px;
}

#bd .billboard {
	background: #fff url(../img/dropshadow.png) top left no-repeat;
	border-width: 0;
	position: relative;
	left: -16px;
	overflow: visible;
}

.last{
	background: none;
	border: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

/*
SLIDESHOW
http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/
*/
.slidecontainer {
  margin:0 auto;
  width:636px;
  height:344px;
  overflow:auto; /* allow scrollbar for non js users */
  position:relative;
}

.slide {
  margin:0 auto;
  width:616px; /* reduce by 20 pixels to avoid horizontal scroll */
  height:475px;
}
 
.control {
	position: absolute;
	left: 0;
	top: 0;
	float: left;
	height: 344px;
	width: 200px;
	z-index: 100;
}

#right:hover{background: transparent url(../img/right-arrow.png) center right no-repeat;}
#left:hover{background: transparent url(../img/left-arrow.png) center left no-repeat;}

#right{
	margin-left: 435px;
}

.dotnav{
	text-align: center;
	margin-top: 33px;
}
.dotnav li{
	display: inline;
	padding-right: 14px;
}

.dotnav a {
	text-decoration: none;
	color: #95979b;
	font-weight: bold;
	font-size: 13px;
}

.dotnav a:hover {
	color: #4d4d4d;
	text-decoration: none;
}





/*

THREE IMAGE PORTFOLIO ITEMS

*/
/* slight width adjusments */
.threeimage div.yui-u{
	width: 195px;
}

.threeimage div.first{
	width: 638px;
}

.threeimage .image1{
	padding-bottom: 16px;
}

.aux_images img{
	padding-right: 16px;
}

.aux_images img+img{
	padding-right: 0;
}


/* contact page */
#contact #bd{
	width: 912px;	
}

#banner{
	padding: 45px;
}

#contact #banner{
	float: left;
	width: 540px;
	background: #fff url(../img/contact-border.png) top left no-repeat;
	position: relative;
	left: -10px;
	padding: 40px;
}

#contact #sidebar{
	float: left;
	width: 229px;
	margin-left: 8px;
}

#contact #content{
	padding-bottom: 20px;
	border-bottom: dotted 1px #bfbfbf;
	margin-bottom: 20px;
	font-size: 95%;
}

#contact #content h2{
	border-width: 0;
	background-image: none;
	color: #000;
	font-weight: bold;
	margin-bottom: 0;
	padding-bottom: 0.3em;
	font-size: 1.2em;
	text-transform: lowercase;
	margin-top: 20px;
}

#contact #content h3{
	color: rgb(108, 111, 114);
	text-transform: uppercase;
	margin-bottom: 0.8em;
}

#contact #content p{
	font-size: 0.95em;
}

#contact #content a{
	color: #000;
	text-decoration: none;
}

#contact #content a:hover{
	text-decoration: underline;
}

/* 'show map' link */
#contact #maptogglecontainer{
	margin-top: 15px;	
}

#contact #maptogglecontainer a{
	color: rgb(150, 152, 156);
	text-decoration: none;
	font-size: 14px;
	text-transform: uppercase;
	padding-left: 40px;
	padding-top: 5px;
	background: transparent url(../img/show-map.gif) center left no-repeat;
	display: block;
	height: 23px;
	width: 130px;
}

/* 'Us' page */
.clear{
	clear: both;	
}


#us #banner{
	margin-bottom: 30px;
}

#us h2{
	margin-top: 40px;
	clear: both;
}

/* two column sections */
#pageheader .header, #pageheader div#content, #us .staffdetails, #us .stafftext{
	width: 45%;
	float: left;
}

#us .staffdetails, #us .header{
	margin-right: 70px;
}

.staffdetails img{
	display: block;
	margin-bottom: 25px;
}

#us h3{
	color: rgb(150, 152, 156);
	text-transform: uppercase;
	margin: 10px 0 5px 0;	
}

#us #toplink{
	position: relative;
	top: -130px;
}


/* 'back to top' links */
.backtotop{
	font-size: 12px;
	color: rgb(150, 152, 156);
	position: relative;
	top: 55px;
	float: right;
	text-transform: uppercase;
	text-decoration: none;
}

.backtotop:hover{
	text-decoration: underline;
}


/* browser specific fixes */
@media screen and (-webkit-min-device-pixel-ratio:0){
	/* different anchor rules for webkit (localscroll) */
	a.anchor{
		top: -70px;
		display: block;
		margin-bottom: 20px;
		border: 0;
	}
}