@charset "UTF-8";
/* CSS Document */

/* latelier.css
------------------------------------------------------------------------------

Author:  			Peter Richman
E-mail:				peter@plugandplaydesign.co.uk
Company: 			Plug and Play Design
Date:				05/05/2008

Version:			2.0
Designed for:		FireFox 3

CSS file:			Design One 

------------------------------------------------------------------------------*/



/* =USUAL SUSPECTS
------------------------------------------------------------------------------*/

body{
font-family:			Verdana, Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size:				62.5%;
color:					#444444;
background:				url(../images/middleBG.gif) top center repeat-y scroll #dadada;
}
img{
border:					none;
}
h1, h2, h3, h4, h5, h6{
font-family:			Verdana, Arial, Helvetica, sans-serif;
}
.centre p strong{
color:					#000;
}
a{
text-decoration:		none;
outline:				none;
}
a:active{
	border:				none;
	outline:			none;
}
q{
font-style:				italic;
color:					#000;
}
.clear{
clear:					both;
}
strong{
color:					#000;
}
.right{
	float:				right;
}


/* HACK for FIREFOX!! - to always display right hand scroll bars in short pages
this prevents the page bouncing left when changing pages */

html { 
overflow: -moz-scrollbars-vertical; 
height: 						100%; 
}

/*Hack over*/

p, .colLeft ul, .colLeft ol{
font-size:						1.2em;
line-height:					1.8em;
}

p a{
text-decoration:				none;
}
p img{
margin:							10px;
padding:            			0px;
}
p a:hover{
text-decoration:				underline;	
}
a:hover{
text-decoration:				underline;	
}

/* REMOVES HORIZONTAL SCROLL BARS */

html{
overflow-x:						hidden;
}

/* =WRAPPER
------------------------------------------------------------------------------*/

.wrapper{
	width:						1000px;
	background:					url(../images/topBG.gif) top center no-repeat;
	margin-left:				auto;
	margin-right:				auto;
	clear:						both;
	top:						-14px;
}

/* =LAYOUT
------------------------------------------------------------------------------*/

.colLeft{
	width:						655px;
	float:						left;
	margin-top:					15px;
}
.colRight{
	width:						301px;
	float:						right;
	padding-left:				40px;
	margin-top:					15px;
}

/* =HEADER =TOP
------------------------------------------------------------------------------*/

.submit input{
	background:					url(../images/topSubmitButton.gif);
	border:						0;
	width:						27px;
	height:						20px;
	margin-left:				20px;
}
.search input{
	background:					url(../images/topSearchBoxBackground.jpg) bottom left repeat-x #FFF;
	border:						1px solid #000;
	padding:					2px;
}
.top p{
	color: 						#050a19;
	font-family:				helvetica;
	font-size:					1.35em;
	width:						600px;
}
.top p a{
	color: 						#050a19;
	font-family:				'Helvetica Neue',Helvetica;
}
.searchList{
	list-style:					none;
	margin:						40px 0px 0px 0px;
	padding:					0;
}
.searchList li{
	float:						left;
}
.contactDetails{
	clear:						right;
	float:						right;
	text-align:					right;
	font-size:					1.1em;
	letter-spacing:				0.2em;
}
.logo a{
	width:						331px;
	height:						95px;
	background:					url(../images/LOGO.gif) top left no-repeat;
	text-indent:    			-4000px;
	float:						left;
	display:					block;
	margin:						0px 0px 35px 0px;
	
}


/* =TAB =MENU
------------------------------------------------------------------------------*/

body .wrapper .mainMenu{
float:							right;
width:							1000px;
line-height:					normal;
margin-right:   				0px;
margin-top:						0px;
font-weight:					lighter;
overflow:hidden;
position:absolute;
top:130px;
z-index:100;
}
body .wrapper .mainMenu li{
display:						inline;
z-index:100;
}
body .wrapper .mainMenu ul, .subMenu ul{
margin:							0px 0px 0px -1px;
padding:        				0px;
list-style:						none;

}
body .wrapper .mainMenu a{
float:							left;
margin:							0px 0px 0px 1px;
padding:        				0px 0px 0px 8px;
background:						url(../images/left_menu.gif) no-repeat left top;
}	
body .wrapper .mainMenu a span{
display:						block;
background:						url(../images/right_menu.gif) no-repeat right top;
padding:        				12px 15px 7px 6px;
color:							#FFF;
text-decoration:none;
font-family:					Arial, Helvetica, Verdana, sans-serif;
text-transform:					uppercase;
font-size:						1.35em;
float:							none;
font-weight:					lighter;
}

body .wrapper .mainMenu ul li ul a span, body .wrapper .mainMenu ul li ul a{
	background:					none;
	color:						#FFF;
	font-size:					14px;
	display:					block;
	margin:						10px;
	
}

body .wrapper .mainMenu li a:hover, body .wrapper .mainMenu li a:hover span{
background-position:			0% 75%;
text-decoration:				none;
}
body .wrapper .mainMenu li a:hover span{
background-position:			100% 75%;
}
body .wrapper .mainMenu .selected a span, body .wrapper .mainMenu .selectSec0 a span{
background-position:			100% 75%;
}
body .wrapper .mainMenu .selected a, body .wrapper .mainMenu .selectSec0 a{
background-position:			0% 75%;
}


/* =SUBMENU
------------------------------------------------------------------------------*/

.subMenu{
width:							1000px;
background-color:				#040e2f;
font-size:						93%;
line-height:					normal;
height:						55px;

clear:both;
}

.subMenu li{
float:							left;
padding:       	                7px 0px 7px 0px;
}

.subMenu a{
color:							#FFF;
font-size:						1.4em;
padding:        	            5px 10px 5px 10px;
}

.subMenu a.selected {
	text-decoration: 			underline;
}

/* =BANNER
------------------------------------------------------------------------------*/

.banner{
	width:						1000px;
	float:						left;
	padding-bottom:             17px;
	background:					url(../images/bannerShadow.jpg) bottom left no-repeat;
	margin-top:					-8px;
}
.bannerMenu{
	list-style:					none;
	background:					url(../images/bannerMenuBG.png) top left no-repeat;
	width:						1000px;
	padding:                    0px;
	height:						42px;
	display:					block;
	margin-top:					-42px;
	margin-bottom:				0px;
}

* .bannerMenu{
* margin-left:					-1px;
}

.bannerMenu li{
	float:						left;
	padding:					10px 25px 10px 25px;
}


.home .bannerMenu{
	position:					relative;
	top:						270px;
}

.bannerImage{
	background:					url(../images/homeBanner.jpg);
	height:						268px;		
	margin:						10px 0px 0px 0px;	
	text-indent:                 -4000px;
}
.bannerMenu li a{
	color:						#FFF;
	font-size:					1.5em;	
}

/* =FORMS
------------------------------------------------------------------------------*/

.contactForm{
	background:					#2e9625;
	width:						261px;
	color:						#FFF;
	letter-spacing:				0.5em;
	padding:					20px;
	float:						right;
}
.contactForm ul{
	list-style:					none;
	padding:					0;
}
.contactForm ul li{
	padding-bottom:				5px;
}
.contactForm .needAQuote{
	font-family:				arial;
	font-size:					2em;
	color:						#FFF;
	margin:						0;
}
.contactForm .checkbox{
	margin:                     10px 0px 10px 0px;
}
.contactForm .text input{
	border:						1px solid #8a8a8a;
	background:				 	url(../images/l%27atelieMK3_inputTextBackground.gif) bottom left repeat-x #FFF;
	width:						100%;
	padding:                    5px 0px 5px 0px;
	font-size:					1.4em;
}
.contactForm .checkbox input{
	border:						1px solid #8a8a8a;
	background:				 	#FFF;
	width:						100%;
	margin:							0px;
}
.contactForm textarea{
	border:						1px solid #8a8a8a;
	background:				 	url(../images/l%27atelieMK4_textareaBackground.gif) repeat-x bottom #FFF;
	width:						100%;
}
.contactForm .button input{
	border:						1px solid #8a8a8a;
	background:				 	url(../images/submitButtonBackground.gif) repeat-x bottom #FFF;
	float:						right;
	padding:                    5px 20px 5px 20px;
}
.contactForm label{
text-transform:					uppercase;
}

.enquiryLabel{
position:						relative;
left:							1px;
}

/* =HEADINGS
------------------------------------------------------------------------------*/

.pageTitle{
	color:						#2e9633;
	font-size:					2.8em;
	font-weight:				bolder;
	font-family:				Helvetica;
	margin:						0px 0px 20px 0px;
	word-spacing:				0.3em;
	letter-spacing:				0.2em;
}

.subTitle{
	color:						#333;
	font-size:					2em;
	font-weight:				lighter;
	margin:						-15px 0px 20px 0px;
}

.galleryTitle, .caseStudiesTitle{
	color:						#3c4358;
	font-size:					2.4em;
	font-weight:				lighter;
	font-family:				Helvetica;
	word-spacing:				0.3em;
	letter-spacing:				0.2em;
	margin:						0px 0px 20px 0px;
}

/* =BOXES
------------------------------------------------------------------------------*/

.tipBox{
	width:						291px;
	background:					url(../images/boxBackgroundTop.jpg) no-repeat top left;
	padding:					17px 0px 0px 0px;
	float:						right;
}
.tipBox .tipBoxBody{
	background:					url(../images/boxBackgroundMiddle.jpg) repeat-y top left;
	width:						291px;
	position:					relative;
	left:						-2px;
	padding:					0px;
	margin:						0px;
	display:					block;
}
.tipBox .tipBoxBody .tipBoxContent{
	background:					url(../images/boxBackgroundBottom.jpg) no-repeat bottom left;
	padding:					4px 30px 50px 30px;
	display:					block;
	font-size:					1.8em;
	line-height:				1.4em;
	color:						#FFF;
	font-weight:				lighter;
	margin-left:				2px;
}
.boxSearch{
	float:						right;
}

/* =FOOTER 
------------------------------------------------------------------------------*/

.footer{
	background:					#050a19;
	color:						#FFF;
	width:						970px;
	float:						left;
	margin-top:					30px;
	padding:					5px 0px 5px 30px;
	margin-bottom:				10px;
}
.footerMenu{
	list-style:					none;
	padding:					0px;
	margin:						0px;
}
.footerMenu li{
	float:						left;
	padding:					0px 0px 0px 40px;
}
.footerMenu li a{
	text-transform:				uppercase;
	color:						#FFF;
	font-size:					1.3em;
	font-family:				'Helvetica Neue',Helvetica;
	font-weight:				lighter;
	letter-spacing:				0.2em;
}
.footerBottom{
	clear:						left;
	text-align:					center;
}
.footerBottom a{
	color:						#444444;
}

/* =TEXT 
------------------------------------------------------------------------------*/

.colLeft p{
	color:						#444;
	font-family:				Arial, Helvetica, sans-serif;
	

}

/* This is making ULs look crap
.colLeft ul, .colLeft ol{
	color:						#444;
	font-family:				Arial, Helvetica, sans-serif;
	word-spacing:				0.3em;
	letter-spacing:				0.2em;
	
}*/
.underGreen{
	color:						#2e9625;
	text-decoration:			underline;
}

/* =GALLERY
------------------------------------------------------------------------------*/

.gallery{
list-style:					none;
margin:						0px 0px 50px 0px;
padding:                    0px;
width:						340px;
float:						right;	
position:					relative;
left:						13px;
}

.gallery li{
float:						left;
margin:						10px 0px 10px 26px;
}

.gallery img{
	border:						1px solid #4a4a4a;
	width:						81px;
	height:						81px;
	cursor:						pointer;
}

.mainGalleryImage{
	border:					1px solid #4A4A4A;
	width:					300px;
	height:					300px;
	margin-bottom:			17px;
}

/* =CASE STUDY
------------------------------------------------------------------------------*/

.caseStudies{
	list-style:					none;
	padding:					0px;
	margin:						0px;
}
.caseStudies li{
	border-top:					1px solid #8a8e9b;
	clear:						left;
}
.caseStudies li img{
	float:						left;
	padding:					20px 20px 20px 0px;
}
.caseStudies li p strong{
	color:						#666976;
}
.caseStudies li p{
	color:						#8e8e8f;
	font-family:				arial;
	word-spacing:				0.3em;
	letter-spacing:				0.2em;
	font-family:				arial;
}
.caseStudies li p a{
	color:						#666976;
	font-weight:				bolder;
	text-decoration:			underline;
}
.caseStudiesList{
	list-style:					none;
}
.caseStudiesList li{
	color:						#040e2f;
	height:						150px;
}
.caseStudiesList li span{
	color:						#040e2f;
	font-size:					2.3em;
	font-weight:				bolder;
	margin-bottom:				15px;
	display:					block;
	padding-top:				10px;
	font-family:				arial;
}
.caseStudiesList li img{
	float:						left;
	padding-right:				40px;
	width:						142px;
	height:						142px;
}


/* =BEFORE AND AFTER
------------------------------------------------------------------------------*/

.beforeTitle{
	color:						#040e2f;
	font-size:					2.5em;
	border-bottom:				1px solid #999;
	font-weight:				lighter;
	padding-bottom:             10px;
}

.beforeAndAfter{
	width:						654px;
	border-bottom:				1px solid #999;
	padding-bottom:             40px;
}

.beforeItem{
	width:						300px;
	float:						left;
	
	
}

.beforeItem h5{
	color:						#2e9625;
	font-size:					1.8em;
	font-weight:				lighter;
	margin:						0px 0px 5px 15px;
	float:						left;
}

.beforeItem img{
	float:						left;
}

.beforeItem p{
	float:						left;
	width:						150px;
	font-size:					0.9em;
	margin:						0px 0px 0px 15px;
	color:						#333;
}


/* =MOO =ACCORDION
------------------------------------------------------------------------------*/


#accordion {
	margin:						0px 0px;
}

h3.toggler {
	cursor: 					pointer;
	border: 					1px solid #f5f5f5;
	border-right-color: 		#ddd;
	border-bottom-color: 		#ddd;
	font-weight:				lighter;
	background: 				#D2E0E6;
	color: 						#41464D;
	margin: 					0 0 0 0;
	padding:                    4px 5px 4px 5px;
	font-size:					12px;
}

div.element p, div.element h4 {
	margin:						0px;
	padding:                   	0px;
}

blockquote {
	padding:                    5px 20px;
}

h3.toggler span, .answer span{
	color:						#2e9625;
	
}

.element .answer{
	font-weight:				lighter;
	font-size:					12px;
	padding-left:               7px;
	color:						#41464D;
	background-color:			#edeeef;
	margin:						0px;
}

.faq{
	font-size:					3em;
	font-weight:				lighter;
	background-color:			#363e59;
	margin:						30px 0px 0px 0px;
	padding:                    10px 0px 10px 10px;
	color:						#FFF;
}

/* =SLIDING IMAGES
--------------------------------------------------------------*/
#our_work
{
	display:block;
	width:600px;
}
#our_work li img, #more_work li img{
	padding-bottom:         15px;
	background:				url(../images/servicesBoxFooter.jpg) bottom left no-repeat;
}

#our_work li{
	list-style:				none;
	float:					left;
	background: 			#fff;
	margin:					0px 0px 15px 48px;
	padding: 	            0px 7px 8px 0px;
	width:					258px;
	position:				relative;

}

#more_work li{
	list-style:				none;
	float:					right;
	background: 			#fff;
	margin:					0 62px 15px 0;
	padding: 	            0px 7px 8px 0px;
	width:					258px;
	position: 				relative;
}

*html #our_work li{
	_margin:				0px 15px 15px 0px;
}

*html #more_work li{
	_margin:				0px 15px 15px 0px;
}

#our_work li.last, #more_work li.last{
	margin-right:			0;
}

#our_work li a{
	display: 				block;
	position: 				relative;
	overflow: 				hidden;
	width:					246px;
	height:					246px;
	color:					#FFF;
	font: 					1em Helvetica, Arial, sans-serif;
	font-size:				1.4em;
	line-height:			1.6em;
	text-decoration:		none;
	background-color:		#040E2F;
}

#more_work li a {
	display: 				block;
	position: 				relative;
	overflow: 				hidden;
	width:					246px;
	height:					171px;
	color:					#FFF;
	font: 					1em Helvetica, Arial, sans-serif;
	font-size:				1.4em;
	line-height:			1.6em;
	text-decoration:		none;
	background-color:		#040E2F;
}

#our_work .slidingButtons li p{
	z-index:				999;
	position:				relative;
	background:				url(../images/servicesTransparant.png) top left no-repeat;
	width:					226px;
	height:					246px;
	margin:					200px 0px 0px 0px;
	padding:                0px;
	color:					#FFF;
	line-height:			1.2em;
	font-size:				0.9em;
	padding:                0px 10px 0px 10px;
}

#more_work .slidingButtons li p{
	z-index:				999;
	position:				relative;
	background:				url(../images/servicesTransparant.png) top left no-repeat;
	width:					226px;
	height:					171px;
	margin:					130px 0px 0px 0px;
	padding:                0px;
	color:					#FFF;
	line-height:			1.2em;
	font-size:				0.9em;
	padding:                0px 10px 0px 10px;
}
	
	
#our_work .slidingButtons li p span, #more_work .slidingButtons li p span{
	font-size:				1.4em;
	display:				block;
	padding:				15px 3px 15px 1px;
}



#our_work li a:focus, #our_work li a:hover, #more_work li a:focus, #more_work li a:hover { text-decoration: none; }

#our_work li img{
	position: 				absolute;
	top: 					0;
	left: 					0;
	height: 				246px;
	width: 					246px;
	border: 				0;
}

#more_work li img{
	position: 				absolute;
	top: 					0;
	left: 					0;
	height: 				171px;
	width: 					246px;
	border: 				0;
	
}


.topButtons{
	margin-top:				50px;
	float:					left;
	width:					1000px;
	padding:                0px;
}


#more_work{
	float:					right;
}

.rightButtons{
	float:					right;
	width:					333px;
	padding:                0px;
}

.wrapper .colRight .rightButtons li{
	margin:					0px;
}


/* =SLIDING IMAGES END
--------------------------------------------------------------*/


/* =SERVICES PAGE
--------------------------------------------------------------*/

.servicesContent{
	width:					550px;
	margin:					0px 0px 0px 40px;
	float:					left;
}


/* =MENU =NAV =SUCKERFISH
------------------------------------------------------------------------------*/

*html body .wrapper .nav .selected a, *html body .wrapper .nav .selectSec0 a{
  background:			url(../images/menuOn.gif) top left repeat-x;
  color: 				#FFF;
}

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

.nav {
  font-family: 			Arial, Helvetica, sans-serif;
  z-index: 				100;
  position: 			relative;
  margin-left:			10px;
  height:35px;
}


*html .nav{
_margin-left:			28px;
}

.nav li {
  float: 				left;
  margin: 				0;
  padding: 	            0;
  height:35px;
  /*position: 			relative;*/
}
.mainMenu
{
}
.mainMenu .screen{
  position:absolute;
  left:0;
  width:1001px;
  height:35px;
  z-index:-1;
  background-color:#fff;
}

.mainMenu .nav .submenu1 .submenu2{
	display:			none;
}

.nav ul {
  background: 			#a8181c;
  list-style: 			none;
  margin: 				0;
  position: 			absolute;
  z-index:-2;
  top: 					35px;
  height: 0px;
  left: 				2px;
  display:none;
}

*html .nav ul{
_width: 				100px;
}

/*.nav li:hover ul,
.nav li.sfHover ul {
  /*top: 					35px;
  width:				1000px;
}*/
.nav ul li {
  border: 				0;
  float: 				none;
}
.nav li ul{
	background:			url(../images/subMenuBG.png) top left no-repeat;
	display:			none;
	height:				0px;
	width:				1000px;
}

.nav ul a {
  border-bottom: 		0;
  padding-right: 		20px;

  
  white-space: 			nowrap;
}

*html .nav ul a {
_width: 				80px;
}





	
	
/* MILKBOX */

#mbOverlay {
	position: absolute;
	left: 0;
	width:100%;
	background-color: #000; /* set the Milkbox overlay color // opacity: see the js options */
	z-index:100;
	cursor: pointer;
}

#mbCenter {
	/* for default width and height, see the js options */
	position: absolute;
	z-index:101;
	overflow:hidden;
	left: 50%;
	top:10%;/* overwritten in the js options to properly position the milkbox when activated in a scrolled window */
	background-color: #fff;/* set the Milkbox background color */
	border: 5px solid #fff;/* set the Milkbox border */
	margin:0; padding:5px;/* set the Milkbox padding */
}

.mbLoading{ background: #fff url(loading.gif) no-repeat center; }/* IMAGE: loading gif */

#mbCanvas{ margin:0; padding:0; height:0; border:none; font-size:0; overflow:hidden; }

.clear{ clear:both; height:0; margin:0; padding:0; font-size:0; overflow:hidden; }


/* *** BOTTOM *** */

#mbBottom { 
	/* set text options */
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 10px;
	color: #666;
	line-height: 1.4em;
	text-align: left;
	padding-top:8px;
	margin:0;
}

/* navigation */
/* be careful if you change buttons dimensions */

#mbNavigation{
	float:right;
	width:27px;
	padding-top:3px;
	border-left:1px solid #9c9c9c;/* set nav border */
}


#mbCount{ 
	width:55px; 
	overflow:hidden;
	padding-top:1px;
	float:right;
	text-align:right;
	font-size:9px; /* count font size */
}

#mbCloseLink, #mbPrevLink, #mbNextLink, #mbPlayPause{
	outline:none;
	display:block;
	float:right;
	height:19px;
	cursor: pointer;
}


#mbPrevLink, #mbNextLink{ width:15px; }
#mbPrevLink{ background: transparent url(prev.gif) no-repeat; }/* IMAGE: prev */
#mbNextLink{ background: transparent url(next.gif) no-repeat; }/* IMAGE: next */

#mbPlayPause{ width:13px; }
#mbPlayPause{ background: transparent url(play-pause.gif) no-repeat; }/* IMAGE: prev */


/* NOTE: doesn't work in ie6, so, just see the js options :) */
a#mbPrevLink:hover,a#mbNextLink:hover,a#mbCloseLink:hover,a#mbPlayPause:hover { background-position: 0 -22px; }

#mbCloseLink {
	width:17px;
	background: transparent url(close.gif) no-repeat;/* IMAGE: close */
}

/* description */

#mbDescription{
	margin-right:27px;
	padding:0px 10px 0 0;
	font-weight: normal;
	text-align:justify;
}

/* =NEWS
------------------------------------------------------------------------------*/

.newsContentWrapper{
margin-left:		45px;
margin-right:		45px;
}


.mainNewsItem{
width:				650px;
border-top:		1px solid #CCC;
float:left;
}

.mainNewsItem .mainDate{
font-size:			4em;
font-weight:		bold;
float:				left;
width:				60px;
margin-top:			20px;
margin-bottom:		20px;
line-height:		40px;
float: left;
display:inline;
}

.mainNewsItem .newsContent{
float:				right;
width:				550px;
margin-top:			20px;
margin-bottom:		13px;
display:inline;
}

.mainNewsItem .newsContent h2{
margin-top:			6px;
color:				#2E9633;
font-size:			1.5em;
}

.mainNewsItem .mainDate span{
font-size:			0.6em;
}

.colLeft li span a{
	color:			#2E9633;
}