/* Start of CMSMS style sheet 'Pipework' */
/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.5.2
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}


body {
	background: url(images/pipework/css_images/body_bg.gif) top left repeat-x;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 62.5%;
}

p a {
       color: #BE883B;
}

#main_container {
	width: 960px;
	margin: 0 auto 0 auto;
}

#main_body {
	float: left;
	margin: 0 0 0 45px;
	width: 930px;
}

#header {
	float: left;
	width: 930px;
	height: 151px;
	margin: 0 0 25px 0;
}

#header_img {
	float: left;
	width: 960px;
	height: 115px;
}

ul#main_menu {
	float: left;
	width: 960px;
	margin: 0;
	height: 33px;
	padding: 0;
}

ul#main_menu li {
	float: left;
}

ul#main_menu li a {
	display: block;
	text-align: center;
	line-height: 33px;
	background: url(images/pipework/css_images/mainmenu.jpg) top left no-repeat;
	text-indent: -9999px;
}

ul#main_menu li#home a {
	background-position: 0 0;
	width: 120px;
}

	ul#main_menu li#home a:hover, ul#main_menu li#home a.currentpage, ul#main_menu li#home a.activeparent  {
		background-position: 0 -36px;
	}

ul#main_menu li#aboutus a {
	background-position: -120px 0;
	width: 138px;	
}

	ul#main_menu li#aboutus a:hover, ul#main_menu li#aboutus a.currentpage, ul#main_menu li#aboutus a.activeparent {
		background-position: -120px -36px;
	}

ul#main_menu li#services a {
	background-position: -251px 0;
	width: 131px;
}

	ul#main_menu li#services a:hover, ul#main_menu li#services a.currentpage, ul#main_menu li#services a.activeparent {
		background-position: -251px -36px;
	}

ul#main_menu li#projects a {
	background-position: -383px 0;
	width: 132px;
}

	ul#main_menu li#projects a:hover, ul#main_menu li#projects a.currentpage, ul#main_menu li#projects a.activeparent {
		background-position: -383px -36px;
	}

ul#main_menu li#news a {
	background-position: -515px 0;
	width: 113px;
}

	ul#main_menu li#news a:hover, ul#main_menu li#news a.currentpage, ul#main_menu li#news a.activeparent {
		background-position: -515px -36px;
	}

ul#main_menu li#recruitment a {
	background-position: -628px 0;
	width: 156px;
}

	ul#main_menu li#recruitment a:hover, ul#main_menu li#recruitment a.currentpage, ul#main_menu li#recruitment a.activeparent {
		background-position: -628px -36px;;
	}


ul#main_menu li#contactus a {
	background-position: -784px 0;
	width: 166px;
}

	ul#main_menu li#contactus a:hover, ul#main_menu li#contactus a.currentpage {
		background-position: -784px -36px;
	}
	
	
h1#welcome_header {
	float: left;
	width: 500px;
	height: 43px;
	background: url(images/pipework/css_images/welcome_header.gif) top left no-repeat;
	text-indent: -99999px;
	margin: 0 0 5px 0;
}

h1#services_header {
	float: left;
	width: 872px;
	height: 43px;
	background: url(images/pipework/css_images/services_header.jpg) top left no-repeat;	
	text-indent: -99999px;
	margin: 0 0 5px 0;
}

h1#aboutus_header {
	float: left;
	width: 872px;
	height: 43px;
	background: url(images/pipework/css_images/aboutus_header.jpg) top left no-repeat;	
	text-indent: -99999px;
	margin: 0 0 5px 0;
}

h1#latestprojects_header {
	float: left;
	width: 872px;
	height: 79px;
	background: url(images/pipework/css_images/latestprojects_header.jpg) top left no-repeat;	
	text-indent: -99999px;
	margin: 0 0 15px 0;
}

h1#latestnews_header {
	float: left;
	width: 872px;
	height: 79px;
	background: url(images/pipework/css_images/latestnews_header.jpg) top left no-repeat;	
	text-indent: -99999px;
	margin: 0 0 15px 0;
}

h1#latestvacancies_header {
	float: left;
	width: 872px;
	height: 79px;
	background: url(images/pipework/css_images/latestvacancies_header.jpg) top left no-repeat;	
	text-indent: -99999px;
	margin: 0 0 5px 0;
}

h1#weneedyou_header {
	float: left;
	width: 872px;
	height: 43px;
	background: url(images/pipework/css_images/weneedyou_header.jpg) top left no-repeat;	
	text-indent: -99999px;
	margin: 0;
}

h2#meettheteam_header {
	float: left;
	width: 235px;
	height: 29px;
	background: url(images/pipework/css_images/meettheteam_header.jpg) top left no-repeat;	
	text-indent: -99999px;
	margin: 0 0 15px 0;
}

h2#recentnewsstories_header {
	float: left;
	width: 263px;
	height: 44px;
	background: url(images/pipework/css_images/recentnewsstories_header.jpg) top left no-repeat;	
	text-indent: -99999px;
	margin: 0;
        padding: 0;
}

h2#recentprojects_header {
	float: left;
	width: 263px;
	height: 44px;
	background: url(images/pipework/css_images/recentprojects_header.jpg) top left no-repeat;	
	text-indent: -99999px;
	margin: 0;
        padding: 0;
}

h2#servicesweoffer_header {
	float: left;
	width: 263px;
	height: 44px;
	background: url(images/pipework/css_images/servicesweoffer_header.jpg) top left no-repeat;	
	text-indent: -99999px;
	margin: 0;
        padding: 0;
}

p {
	font-size: 1.6em;
	margin: 0 0 15px 0;
}

.highlight {
	color: #af8642;
	font-weight: bold;
	text-transform: uppercase;
}

.highlight a {
	color: #af8642;
	text-decoation: underline;
}


.col-ab {
	float: left;
	width: 580px;	
}

	.col-ab p {
		float: left;
		width: 580px;
		font-size: 1.6em;
		margin: 0 0 10px 0;
	}
	
	.col-ab .lrg_image {
		float: left;
		width: 580px;
		margin: 15px 0 0 0;
	}
	
.col-bc {
	float: left;
	width: 580px;
}


.col-bc-menu {
	float: left;
        width: 600px;
	margin: 0 0 0 20px;
        padding: 0 0 0 15px;
        border-left: solid 6px #B0B0B2;
}


	.col-bc h2, .col-bc-menu h2 {
		font-size: 2.0em;
		color: #af8642;
		font-weight: bold;
		margin: 15px 0 10px 0;
	}
	
	.col-bc p {
		margin: 0 0 10px 0;
	}

.col-c {
	float: left;
	width: 300px;
	margin: 0 0 5px;
	padding: 0 0 0 15px;
}

.frontpage .col-c .top {
	margin: 0 0 0 5px;
}

	.col-c .top .lrg_boxout {
		float: left;
		width: 258px;
		padding: 5px;
		border-left: solid 1px #000;
		border-right: solid 1px #000;
	}
	
		.col-c .top ul {
			float: left;
			width: 245px;
			margin: 0 0 0 10px;
		}
	
		.col-c .top ul li {
			list-style-position: outside;
			list-style-type: none;
			text-transform: uppercase;
			background: url(images/pipework/css_images/bullet.gif) top left no-repeat;
			padding: 0 0 0 18px;
			font-size: 1.6em;
			color: #b0b0b2;
			font-weight: bold;
		}
	
		.col-c .top .lrg_boxout_top {
			float: left;
			width: 270px;
			height: 11px;
			margin-top: 10px;
			background: url(images/pipework/css_images/boxout_bg_top.gif) top left no-repeat;
		}
		
		.col-c .top .lrg_boxout_bottom {
			float: left;
			width: 270px;
			height: 12px;
			background: url(images/pipework/css_images/boxout_bg_bottom.gif) top left no-repeat;
		}
		
		.col-c h2 {
			font-size: 2.4em;
			font-weight: bold;
			margin: -4px 0 10px 0;
                        text-transform: uppercase;
                        vertical-align: text-top;
		}
		
		.col-c h3 {
			font-size: 1.4em;
			font-weight: bold;
		}
		
		.col-c ul {
			float: left;
			width: 248px;
			margin: 0 0 0 10px;
		}
	
		.col-c ul li {
			list-style-type: disc;
			margin: 0 0 0 5px;
			padding: 0;
			font-size: 1.4em;
			color: #000;
		}

.col-a-menu {
	float: left;
	width: 260px;
}
		
.col-a {
	float: left;
	width: 290px;
}

	.col-a p {
		width: 260px;
	}

	.col-a h2 {
		color: #BE883B;
		font-weight: bold;
		font-size: 1.8em;
		margin: 15px 0 10px 0;
	}

.col-b {
	float: left;
	width: 290px;
	margin: 0 0 0 10px;
}

.col-b-map {
	float: left;
	width: 275px;
	margin: 0 0 0 10px;
}

.col-b-menu {
       	float: left;
	width: 285px;
	margin: 0 0 0 20px;
        padding: 0 0 0 15px;
        border-left: solid 6px #B0B0B2;
}

.col-b-narrow {
	float: left;
	width: 260px;
	margin: 0 0 0 10px;
}

.col-a .boxout, .col-b .boxout, .col-c .boxout, .col-b-menu .boxout {
	float: left;
	width: 270px;
	background-color: #d7d7d8;
	padding: 5px;
	margin: 20px 0 0 0;
	font-weight: bold;
}

.col-a .boxout {
	width: 270px;
}
.col-a .boxout p {
	width: 270px;
}

.col-a .boxout img, .col-b .boxout img, .col-c .boxout img, .col-b-menu .boxout img {
	float: left;
	margin: 0 3px 3px 0;
	vertical-align: text-top;
}

.col-a .boxout p, .col-b .boxout p, .col-c .boxout p, .col-b-menu .boxout p {
	font-size: 1.3em;
	margin: 0;
}

.col-a .boxout p a, .col-b .boxout p a, .col-c .boxout p a {
	color: #af8642;
}

.meet_the_team {
	background-color: #ebecec;
	padding: 15px;
	width: 245px;
}

.meet_the_team h2 {
	font-size: 2.4em;
	font-weight: bold;
	text-transform: uppercase;
	margin: 0 0 15px 0;
}

	.team_member {
		background: url(images/pipework/css_images/subheader_bg.gif) bottom left no-repeat;
		padding: 0 0 20px 0;
		margin: 0 0 15px 0;
	}
	
	.team_member h3 {
		font-size: 1.6em;
		font-weight: bold;
		color: #BE883B;
		text-transform: uppercase;
		margin: 0 0 10px 0;
	}
	
	.team_member p {
		font-size: 1.4em;
		width: 235px;
	}
	
	.team_member p img {
		float: left;
		margin: 2px 10px 5px 0;
	}
	
	
.vacancy-top {
	float: left;
	width: 570px;
	height: 12px;
	margin: 0 0 0 10px;
	background: url(images/pipework/css_images/vacancy_bg_top.gif) top left no-repeat;
}

.vacancy-bottom {
	float: left;
	width: 570px;
	height: 12px;
	margin: 0 0 15px 10px;
	background: url(images/pipework/css_images/vacancy_bg_bottom.gif) top left no-repeat;
}

.vacancy {
	float: left;
	margin: 0 0 0 10px;
	padding: 20px;
	width: 528px;
	border-left: solid 1px #000;
	border-right: solid 1px #000;
}

.vacancy h2 {
	color: #000;
	text-transform: uppercase;	
}

.col-bc .vacancy p {
	font-size: 1.4em;
}

.vacancy-header {
	font-size: 1.2em;
	text-transform: uppercase;
	font-weight: bold;
	width: 530px;
	padding: 0 0 5px 0;
        margin-bottom: 10px;
	border-bottom: solid 1px #000;
}

.sidemenu {
	float: left;
	width: 263px;
	padding: 0 13px 0 0;
	margin: 0 10px 0 0;
}

.sidemenu h2 {
	font-size: 2.4em;
	font-weight: bold;
	text-transform: uppercase;
	padding-bottom: 30px;
	background: url(images/pipework/css_images/subheader_bg.gif) bottom left no-repeat;
	margin-bottom: 5px;
}

.sidemenu ul {
        float: left;
        width: 264px;
	font-size: 1.6em;
        margin-top: 10px;
}

.sidemenu ul li {
	margin: 0 0 15px 0;
	text-transform: uppercase;
	font-weight: bold;
        background: url(images/pipework/css_images/menu_bullet_off.gif) top left no-repeat;
        padding: 0 0 0 18px;
}


.sidemenu ul li:hover, .sidemenu ul li.selected, .sidemenu ul li.currentpage {
        background: url(images/pipework/css_images/menu_bullet_on.gif) top left no-repeat;
	color: #000;
}

.sidemenu ul li:hover a, .sidemenu ul li.selected a, .sidemenu ul li.currentpage a {
        color: #000;
}

.sidemenu ul li a {
	text-decoration: none;
	color: #b0b0b2;
}

.sidemenu p {
	font-weight: bold;
	font-size: 1.6em;
}

.quote {
	font-weight: bold;
	color: #af8642;
	margin: 15px 0 0 0;
}

.introsection {
	text-transform: uppercase;
	color: #b1b2b4;
	font-weight: bold;
}

h2.columnspan {
	float: left;
	width: 500px;
	font-size: 2.0em;
	text-transform: uppercase;
	font-weight: bold;
	color: #000;
	margin: -3px 0 10px 10px;
}

h2.newsheader {
	float: left;
	width: 260px;
	font-size: 2.0em;
	text-transform: uppercase;
	font-weight: bold;
	color: #000;
	margin: -3px 0 10px 0;
}


#contact_details_address {
        float: left;
        width: 258px;
        margin: 15px 0 0 0;
}

#contact_details_other {
        float: left;
        width: 258px;
        margin: 15px 0 0 0;
}


#contact_details_address ul li, #contact_details_other ul li  {
height: 20px
}




.large_grey {
	color: #b0b0b2;
	font-size: 4.5em;
	font-weight: bold;
	vertical-align: top;
}

p.listheader {
	font-weight: bold;
	font-size: 1.4em;
	margin: 0 0 0 10px;
	text-transform: uppercase;
}

p.promo_text {
	font-size: 2.8em;
	font-weight: bold;
	text-transform: uppercase;
}

p.promo_text a {
	text-decoration: none;
	color: #000;
}

.screen_divider {
	float: left;
	width: 872px;
	height: 28px;
	background: url(images/pipework/css_images/screen_divider.gif) top left no-repeat;
	clear: both;
	margin: 25px 0 25px 0;
}

#footer {
	float: left;
	width: 870px;
	height: 107px;
	margin-top: 25px;
	background: url(images/pipework/css_images/footer.gif) top left no-repeat;
}

#footer-span {
	clear: both;
	width: 100%;
	height: 23px;
	background-color: #b0b0b2;
}

/**

Stylesheet: Slideshow.css

	CSS for Slideshow.



License:

	MIT-style license.



Copyright:

	Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).

	

HTML:

	<div class="slideshow">

		<div class="images" />

		<div class="captions" />

		<div class="controller" />

		<div class="thumbnails" />

	</div>

	

Notes:

	These next four rules are set by the Slideshow script.

	You can override any of them with the !important keyword but the slideshow probably will not work as intended.

*/



.slideshow {

	display: block;

	position: relative;

	z-index: 0;

}

.slideshow-images {

	display: block;

	overflow: hidden;

	position: relative;

}		

.slideshow-images img {

	display: block;

	position: absolute;

	z-index: 1;

}		

.slideshow-thumbnails {

	overflow: hidden;

}



/**

HTML:

	<div class="slideshow-images">

		<img />

		<img />

	</div>

	

Notes:

	The images div is where the slides are shown.

	Customize the visible / prev / next classes to effect the slideshow transitions: fading, wiping, etc.

*/



.slideshow-images {

	height: 418px;

	width: 488px;

}		

.slideshow-images-visible { 

	opacity: 1;

}	

.slideshow-images-prev { 

	opacity: 0; 

}

.slideshow-images-next { 

	opacity: 0; 

}

.slideshow-images img {

	float: left;

	left: 0;

	top: 0;

}	



/**

Notes:

	These are examples of user-defined styles.

	Customize these classes to your usage of Slideshow.

*/



.slideshow {

	height: 418px;

	margin: 6px auto 0 auto;

	width: 488px;

}

.slideshow a img {

	border: 0;

}



/**

HTML:

	<div class="slideshow-captions">

		...

	</div>

	

Notes:

	Customize the hidden / visible classes to affect the captions animation.

*/



.slideshow-captions {

	background: #000;

	bottom: 0;

	color: #FFF;

	font: normal 12px/22px Arial, sans-serif;

	left: 0;

	overflow: hidden;

	position: absolute;

	text-indent: 10px;

	width: 100%;

	z-index: 10000;

}

.slideshow-captions-hidden {

	height: 0;

	opacity: 0;

}

.slideshow-captions-visible {

	height: 22px;

	opacity: .7;

}



/**

HTML:

	<div class="slideshow-controller">

		<ul>

			<li class="first"><a /></li>

			<li class="prev"><a /></li>

			<li class="pause play"><a /></li>

			<li class="next"><a /></li>

			<li class="last"><a /></li>

		</ul>

	</div>

	

Notes:

	Customize the hidden / visible classes to affect the controller animation.

*/



.slideshow-controller {

	background: url(controller.png) no-repeat;

	height: 42px;

	left: 50%;

	margin: -21px 0 0 -119px;

	overflow: hidden;

	position: absolute;

	top: 50%;

	width: 238px;

	z-index: 10000;

}

.slideshow-controller * {

	margin: 0;

	padding: 0;

}

.slideshow-controller-hidden { 

	opacity: 0;

}

.slideshow-controller-visible {

	opacity: 1;

}

.slideshow-controller a {

	cursor: pointer;

	display: block;

	height: 18px;

	overflow: hidden;

	position: absolute;

	top: 12px;

}

.slideshow-controller a.active {

	background-position: 0 18px;

}

.slideshow-controller li {

	list-style: none;

}

.slideshow-controller li.first a {

	background-image: url(controller-first.gif);

	left: 33px;

	width: 19px;

}

.slideshow-controller li.last a {

	background-image: url(controller-last.gif);

	left: 186px;

	width: 19px;

}

.slideshow-controller li.next a {

	background-image: url(controller-next.gif);

	left: 145px;

	width: 28px;

}

.slideshow-controller li.pause a {

	background-image: url(controller-pause.gif);

	left: 109px;

	width: 20px;

}

.slideshow-controller li.play a {

	background-position: 20px 0;

}

.slideshow-controller li.play a.active {

	background-position: 20px 18px;

}

.slideshow-controller li.prev a {

	background-image: url(controller-prev.gif);

	left: 65px;

	width: 28px;

}



/**

HTML:

	<div class="slideshow-loader" />

	

Notes:

	Customize the hidden / visible classes to affect the loader animation.

*/



.slideshow-loader {

	height: 28px;

	right: 0;

	position: absolute;

	top: 0;

	width: 28px;

	z-index: 10001;

}

.slideshow-loader-hidden {

	opacity: 0;

}

.slideshow-loader-visible {

	opacity: 1;

}



/**

HTML:

	<div class="slideshow-thumbnails">

		<ul>

			<li><a class="slideshow-thumbnails-active" /></li>

			<li><a class="slideshow-thumbnails-inactive" /></li>

			...

			<li><a class="slideshow-thumbnails-inactive" /></li>

		</ul>

	</div>

	

Notes:

	Customize the active / inactive classes to affect the thumbnails animation.

	Use the !important keyword to override FX without affecting performance.

*/



.slideshow-thumbnails {

	bottom: -65px;

	height: 65px;

	left: 0;

	position: absolute;

	width: 100%;

}

.slideshow-thumbnails * {

	margin: 0;

	padding: 0;

}

.slideshow-thumbnails ul {

	height: 65px;

	left: 0;

	position: absolute;

	top: 0;

	width: 10000px;

}

.slideshow-thumbnails li {

	float: left;

	list-style: none;

	margin: 5px 5px 5px 0;

	position: relative;

}

.slideshow-thumbnails a {

	display: block;

	padding: 5px;

	position: relative; 

}

.slideshow-thumbnails a:hover {

	background-color: #FF9 !important;

	opacity: 1 !important;

}

.slideshow-thumbnails img {

	display: block;

}

.slideshow-thumbnails-active {

	background-color: #9FF;

	opacity: 1;

}

.slideshow-thumbnails-inactive {

	background-color: #FFF;

	opacity: .5;

}

/* End of 'Pipework' */