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

* {
margin: 0px;
padding: 0px;
}

html {
height: 100%;
}

body {	
width: 100%;
height: 100%;			
background-color: #cfd3d4;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
text-align: center;
}

/* see http://positioniseverything.net/easyclearing.html for details of how it works */

.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

/* (display: inline-block is valid CSS 2.1, but not CSS 2, which is why it might fail on the W3C validation page) */

.clearfix {
display: inline-block;
}

/*****/
			
img {
border: 0px;
}


h1 {
color: #4b63ae;
font-size: 28px;
line-height: 35px;
padding-bottom: 15px;
}

h2 {
color: #00447c;
font-size: 20px;
line-height: 25px;
padding-bottom: 15px;
font-weight: 400;
}

h3 {
color: #00447c;
font-size: 17px;
line-height: 25px;
padding-bottom: 15px;
font-weight: 400;
}

h4 {
color: #6d6f71;
font-size: 13px;
line-height: 18px;
padding-bottom: 5px;
}

h5 {
color: #6d6f71;
font-size: 12px;
line-height: 18px;
padding-bottom: 5px;
}

p {
color: #6d6f71;
font-size: 12px;
line-height: 15px;
padding-bottom: 10px;
text-align: left;
}

ul {
list-style-type: none;
margin-bottom: 10px;
}

a {
color: #4b63ae;
text-decoration: none;
}

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

li, label {
color: #6d6f71;
}

/* prevent certain table cells from wrapping ... */

.td_nowrap {
white-space: nowrap !important;
}

/****************************************************************************************/

/* this is the 'outer' container that is centered and contains the background drop-shadow */
div#page_container_outer {
position: absolute;
top: 50%;
left: 50%;
width: 910px;
height: 640px;
margin-left: -455px; /* centre the container horizontally */
margin-top: -330px; /* centre the container vertically */
padding-left: 20px; /* used to show the drop shadow which extends outwards */
padding-right: 20px;
padding-top: 15px;
padding-bottom: 15px; 
text-align: center;
background-image: url(../images/background_drop_shadow.gif);
background-repeat: no-repeat;
background-position: top left;
}

/* within this is the inner container that holds the page's content */
div#page_container_inner {
width: 910px;
height: 640px;
overflow: hidden;
position: absolute;
top: 15px;
left: 20px;
text-align: left;
z-index: 0;
}

div#gallery_doors_container {
width: 910px;
height: 640px;
overflow: hidden;
position: absolute;
text-align: left;
top: 15px;
left: 20px;
z-index: 100;
}

/* the inner container on each page has a different background to look like a gallery, a wall etc */
.background_gallery {
background-image: url(../images/gallery_background.jpg);
background-repeat: no-repeat;
background-position: top left;
}

.background_featured_valve_butterfly {
background-image: url(../images/featured_valve_butterfly_background.jpg);
background-repeat: no-repeat;
background-position: top left;
}

.background_featured_valve_nrv {
background-image: url(../images/featured_valve_nrv_background.jpg);
background-repeat: no-repeat;
background-position: top left;
}

.background_featured_valve_fh2 {
background-image: url(../images/featured_valve_fh2_background.jpg);
background-repeat: no-repeat;
background-position: top left;
}

.background_gallery_wall {
background-image: url(../images/gallery_wall_background.jpg);
background-repeat: no-repeat;
background-position: top left;
}

/****************************************************************************************/

/* the home page */

/* the home page Flash object/image is 910px by 640px */
div#home_page_flash_container {
width: 910px;
height: 640px;
}

/****************************************************************************************/

/* the menu is in the bottom-right. White text on a translucent blue background */
div#bottom_right_menu_container {
position: absolute;
bottom: 0px;
right: 22px;
width: 165px;
height: 300px;
}

ul#bottom_right_menu {
width: 100%;
padding-top: 20px; /* leave space for the triangle */
}

ul#bottom_right_menu li {
padding-bottom: 2px;
margin-bottom: 14px;
width: 165px; /* leave 10px to the right so the white 'selected' bottom line doesn't go to the end */
}

ul#bottom_right_menu li.selected {
border-bottom: 2px solid #fff;
}

ul#bottom_right_menu li a {
color: #eee;
font-weight: bold;
font-size: 10px;
}

div.bottom_right_menu_saint_gobain_logo {
width: 100%;
text-align: center;
}

/****************************************************************************************/

/* the gallery page */

div#gallery_artwork_left_wall_warhol_image {
position: absolute;
top: 30px;
left: 30px;
width: 270px;
height: 270px;
}

div#gallery_artwork_left_wall_magritte_image {
position: absolute;
top: 90px;
left: 320px;
width: 180px;
height: 175px;
}

div#gallery_artwork_left_wall_lichtenstein_image {
position: absolute;
top: 90px;
left: 520px;
width: 150px;
height: 170px;
}

div#gallery_artwork_right_wall_saint_gobain_image {
position: absolute;
top: 80px;
right: 31px;
width: 140px;
height: 140px;
}

div#gallery_win_camera_container {
position: absolute;
bottom: 0px;
right: 240px;
width: 179px;
height: 114px;
}

/****************************************************************************************/

/* the featured valves pages */

div#featured_valves_page_content_top_left_pdf_links {
position: absolute;
top: 30px;
left: 50px;
width: 200px;
height: 200px;
}

div#featured_valves_page_content_left_column {
position: absolute;
top: 30px;
left: 330px;
width: 350px;
height: 500px;
}

div#featured_valves_page_content_right_column {
position: absolute;
top: 80px;
left: 720px;
width: 170px;
height: 250px;
}

div#featured_valves_page_content_left_column_visible_area {
height: 510px;
padding-right: 10px;
}

div.datasheet_link_container {
width: 170px;
height: 100px;
clear: both;
margin-bottom: 10px;
}

div.datasheet_link_image {
float: left;
width: 65px;
margin-right: 10px;
}

div.datasheet_link_text {
float: left;
width: 85px;
}

/****************************************************************************************/

/* other products pages */

div#other_products_inner_content {
width: 810px;
height: 540px;
padding-top: 30px;
padding-bottom: 50px;
padding-left: 50px;
padding-right: 50px;
}

table.other_products_images_table {
margin-bottom: 40px;
}

table.other_products_images_table td {
}

/****************************************************************************************/

/* contact page */

div#contact_inner_content {
width: 710px;
height: 540px;
padding-top: 30px;
padding-bottom: 50px;
padding-left: 100px;
padding-right: 100px;
}

table.contact_images_table {
margin-bottom: 5px;
}

table.contact_images_table td {
padding-left: 30px;
padding-right: 30px;
}

div#contact_form_container {
width: 550px;
}

form#contact_form {
padding-left: 30px;
}

table.contact_form {
}

table.contact_form td {
vertical-align: top;
padding-bottom: 5px;
}

table.contact_form td.label {
padding-top: 8px;
}

.contact_form_input {
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 400px;
padding: 5px;
}

.contact_form_textarea {
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 400px;
height: 50px;
padding: 5px;
}

div.contact_form_response_success, div.contact_form_response_success p {
color: #006600;
padding-bottom: 5px;
}

div.contact_form_response_error, div.contact_form_response_error p {
color: #CC0000;
padding-bottom: 5px;
}

/****************************************************************************************/

ul.standard_grey_list li {
font-size: 12px;
line-height: 15px;
padding-bottom: 2px;
text-align: left;
padding-left: 15px;
background-image: url(../images/bullet_point_new.gif);
background-repeat: no-repeat;
background-position: top left;
}

ul.standard_grey_list li.indented_sub_point {
padding-left: 35px;
background-position: top 20px;
}

/****************************************************************************************/

/* scroll panel */

.jScrollPaneContainer {
position: relative;
overflow: hidden;
z-index: 1;
}

.jScrollPaneTrack {
position: absolute;
cursor: pointer;
right: 0;
top: 0;
height: 100%;
background: #aaa;
}

.jScrollPaneDrag {
position: absolute;
background: #666;
cursor: pointer;
overflow: hidden;
}

.jScrollPaneDragTop {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}

.jScrollPaneDragBottom {
position: absolute;
bottom: 0;
left: 0;
overflow: hidden;
}

a.jScrollArrowUp {
display: block;
position: absolute;
z-index: 1;
top: 0;
right: 0;
text-indent: -2000px;
overflow: hidden;
/*background-color: #666;*/
height: 9px;
}

a.jScrollArrowUp:hover {
/*background-color: #f60;*/
}

a.jScrollArrowDown {
display: block;
position: absolute;
z-index: 1;
bottom: 0;
right: 0;
text-indent: -2000px;
overflow: hidden;
/*background-color: #666;*/
height: 9px;
}

a.jScrollArrowDown:hover {
/*background-color: #f60;*/
}

a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
/*background-color: #f00;*/
}

/****************************************************************************************/

div#initially_invisible__sewage_air_valve,
div#initially_invisible__gate_way_resilient_seated_gate_valve,
div#initially_invisible__portable_water_single_small_orifice_air_valve,
div#initially_invisible__ultra_ng_wide_range_couplings_and_flange_adaptors,
div#initially_invisible__gs_dedicated_couplings_and_flange_adaptors,
div#initially_invisible__portable_water_single_large_orifice_air_valve,
div#initially_invisible__portable_water_double_orifice_air_valve,
div#initially_invisible__fh1_fire_hydrant,
div#initially_invisible__euro_tp_flap_valves,
div#initially_invisible__mf2006_metal_seated_gate_valve {
display: none;
clear: both;
}

div#initially_invisible_left_column {
position: absolute;
top: 350px;
left: 50px;
width: 430px;
height: 200px;
}

div#initially_invisible_right_column {
position: absolute;
top: 350px;
left: 510px;
width: 170px;
height: 250px;
}

/****************************************************************************************/

/* styles used by Thickbox (used to hold the pop-up wizard) */

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {
	font: 12px Arial, Helvetica, sans-serif;
	color: #333333;
}

#TB_secondLine {
	font: 10px Arial, Helvetica, sans-serif;
	color:#666666;
}

#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
	position: fixed;
	z-index:100;
	top: 0px;
	left: 0px;
	height:100%;
	width:100%;
}

.TB_overlayMacFFBGHack {background: url(../images/thickbox_macFFBgHack.png) repeat;}

.TB_overlayBG {
	background-color:#000;
	filter:alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
}

* html #TB_overlay { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_window {
	position: fixed;
	background: #eee; /* shows through as the border */
	z-index: 102;
	color:#000000;
	display:none;
	border: 4px solid #525252;
	text-align:left;
	top:50%;
	left:50%;
}

* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_window img#TB_Image {
	display:block;
	margin: 15px 0 0 15px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #666;
	border-left: 1px solid #666;
}

#TB_caption{
	height:25px;
	padding:7px 30px 10px 25px;
	float:left;
	color: #fff;
}

#TB_closeWindow{
	height:25px;
	padding:11px 25px 10px 0;
	float:right;
	color: #fff;
}

#TB_closeAjaxWindow{
	padding:7px 10px 5px 0;
	margin-bottom:1px;
	text-align:right;
	float:right;
}

#TB_ajaxWindowTitle{
	float:left;
	padding:7px 0 5px 10px;
	margin-bottom:1px;
	font-weight:bold;
}

#TB_title{
	background-color:#ccc; /* the title bar of the wizard */
	height:27px;
	display: block;
	color:#666;
}

#TB_ajaxContent{
	clear:both;
	padding:2px 15px 15px 15px;
	overflow:auto;
	text-align:left;
	line-height:1.4em;
}

#TB_ajaxContent.TB_modal{
	padding:15px;
}

#TB_ajaxContent p{
	padding:5px 0px 5px 0px;
}

#TB_load{
	position: fixed;
	display:none;
	height:13px;
	width:208px;
	z-index:103;
	top: 50%;
	left: 50%;
	margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}

* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_HideSelect{
	z-index:99;
	position:fixed;
	top: 0;
	left: 0;
	background-color:#fff;
	border:none;
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	height:100%;
	width:100%;
}

* html #TB_HideSelect { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_iframeContent{
	clear:both;
	border:none;
	margin-bottom:-1px;
	margin-top:1px;
	_margin-bottom:1px;
}

/****************************************************************************************/

div#initially_hidden_video_container {
position: absolute;
top: 50%;
left: 50%;
width: 600x;
height: 360px;
margin-left: -300px; /* centre the container horizontally */
margin-top: -180px; /* centre the container vertically */
display: none;
z-index: 50;
}

/****************************************************************************************/

div#footer {
width: 910px;
height: 25px;
position: absolute;
top: 670px;
left: 20px;
text-align: left;
z-index: 0;
}

div#footer p {
font-size: 9px;
color: #666;
text-align: center
}

div#footer a {
font-size: 9px;
color: #666;
text-decoration: underline;
}


/****************************************************************************************/

ul.pdf_links {
}

ul.pdf_links li {
padding: 2px;
}

ul.pdf_links li a {
font-size: 12px;
line-height: 18px;
text-align: left;
padding-left: 25px;
background-image: url(../images/pdf_icon.gif);
background-repeat: no-repeat;
background-position: center left;
color: #666;
padding-top: 4px;
padding-bottom: 4px;
}

/****************************************************************************************/