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

/* Tabs */
.TabHover{ }
.TabSelected{color:black; float: left; display: block; width: 106px; height: 36px; background-image: url(Images/active.png) !important; background-repeat: no-repeat; background-position: center; text-align: center;line-height:35px; text-decoration:none; }
.TabMain{color:black; float: left; display: block; width: 106px; height: 36px; background-image: url(Images/background.png); background-repeat: no-repeat; background-position: center; text-align: center; line-height:35px; text-decoration:none; }


/* SET UP
______________________ */

* {margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; }

body {margin: 0; padding: 0; color: #000; background-color: #fff;font-family: Arial,Helvetica,sans-serif;}

#container {width: 830px; margin: 20px auto; position: relative; padding-bottom:100px;}
.input-button, .enquiry-button, .input-button-search {height: 22px; color: #fff; background-color: #00a1b1; padding: 0 2px 0 2px; text-align: center; border: none; border-collapse: collapse; cursor:pointer;}
 
/* TEXT AND LINKS
______________________ */

p, h1, h2, ul, li {line-height: 150%; color: #000; padding-top: 10px;}

p, li {font-size: 0.8em;}

.small {font-size: 0.7em;}

h1, h2 {font-size: 1.4em; padding: 5px 0 5px 0;}

h2 {font-size: 1em;}

.Content a {color: #009AA6; text-decoration: none; }
.Content a:hover {color: #002776; text-decoration: underline; }
/* SPECIALS 
______________________*/
.clearer{ clear: both; height: 0px; overflow: hidden;}
.cleardiv{clear:both;}
.hidden {display: none;}
.bold {font-weight: bold;}
.italics {font-style: italic;}

table tr td{text-align:left;}
tr th{background-color:#26afbe;	color: white;padding:10px;}
tr{text-align:center;}

.tbPressOffice tr td{text-align:center;}

/* TOP
______________________  */

#top-container {width: 820px; }

#top-container .logo-and-boxes {width: 100%; height: 100px;}

#top-container .logo {width: 160px; height: 76px; float: left; background-image: url(images/sidhil-and-docherty.png); background-position: top left; background-repeat: no-repeat;}

#top-container .navigation {clear: both; width: 100%; height: 30px; padding: 5px 0; background-image: url(images/nav-background2.png);}


#top-container .navigation .navigationmenu{margin-top:2px;float:left;width:770px; font-weight:bold;}
#top-container .navigation .navigationmenu a {color: #fff; text-decoration: none; font-size:10pt; }
#top-container .navigation .navigationmenu a:hover{color: #004080; text-decoration:underline;}
#top-container .navigation .navbasket{float:left;width:40px;text-align:right; margin-top:-3px;}
#top-container .navigation .navbasket a{border-right:solid 0px white;}

#top-container ul, #top-container li {display: inline; color: #fff;}

#top-container ul {margin-left: 12px;}



#top-container .phone {width: 180px; height: 27px; float: right; text-align: left; color: #00a1b1; font-size: 1.3em; margin-bottom: 10px;}

#top-container .phone-image {float: left; margin-top: 0; padding-right:8px;}

/*.tag {width: 110px; height: 110px; background-image: url(images/tag2.png); background-repeat: no-repeat; margin-left: 670px; *margin-left: 710px; margin-top: -30px; *margin-top: -30px; position: absolute; _display: none;}*/
.tag{display:none;}

/* Firefox hack */ @-moz-document url-prefix() { .input-field { padding: 2px 0 0px 0; } }

.input-button, .enquiry-button, .input-button-search {height: 22px; color: #fff; background-color: #00a1b1; padding: 0 5px 0 5px; text-align: center; border: none; border-collapse: collapse;}

/* Firefox hack */ @-moz-document url-prefix() { .input-button-search { padding: 3px 0 15px 0; height: 25px;} }



/* LOGIN and SEARCH */

#top-container .search-and-login {float: right; width: 630px; text-align: right;}

#top-container .login {float: right;}
#top-container .login #welcomemessage {position:absolute; right:195px; top:5px; text-align:right; width:430px;}

#top-container .search {float: right; margin-left: 10px;}

#top-container input {}

.bl {background: url(images/bl.png) 0 100% no-repeat #e2f4fd;}
.br {background: url(images/br.png) 100% 100% no-repeat}
.tl {background: url(images/tl.png) 0 0 no-repeat}
.tr {background: url(images/tr.png) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}

.box {background-color: #fff; border: 1px solid #26afbe; height: 20px; margin-left: 5px;} 

.input-field {width: 80px; margin: 0 5px; background-color: #ccc; }
.login-field{width:200px; padding:2px; background-color: #ccc; border:solid 1px #00a1b1;}

/* Firefox hack */ @-moz-document url-prefix() { .input-field { padding: 2px 0 0px 0; } }

.input-button, .enquiry-button, .input-button-search {height: 22px; color: #fff; background-color: #00a1b1; padding: 0 5px 0 5px; text-align: center; border: none; border-collapse: collapse;}

/* Firefox hack */ @-moz-document url-prefix() { .input-button-search { padding: 3px 0 15px 0; height: 25px;} }


.enquiry-button {height: 35px; font-size: 0.9em; width: 130px; padding: 10px; }

/* BREADCRUMB
______________________  */

#breadcrumb-and-filter {width: 100%;}

.breadcrumb {float: left; margin: 15px 0 0 0; color:#999; font-size: 0.7em; }

.filter {clear: left; float: left; margin: 10px 0 0 0;}

#breadcrumb-and-filter form {margin: 0; padding: 0;}

.breadcrumb a {color:#999; text-decoration: none; border-bottom: 1px solid #999; .text-decoration: underline;}

/* INTRO TEXT
______________________  */

#intro-text, .intro-text {clear: both; width: 820px; margin: 0; float: left; }

#intro-text h1, .intro-text h1 {color: #26afbe; font-size: 1.6em;}

#intro-text img, .intro-text img {float: right; margin: 10px 0 10px 10px; border:1px solid #ccc;}


/* SUB MENU
---------------------- */
#submenu{clear:both; margin-top:4px;}

/* CATCH-ALLS
______________________ */

.left {margin-left: 0px; padding-left: 0px;}
img.reset {border: none; padding: 0; margin: 0;}


/* MAIN PIC
______________________  */

.main-pic-strip { width: 815px; margin: 20px 0 0 0; border: 4px solid #e2f4fd; height: 249px; overflow:hidden;}

/*.image-one {background-image: url(../images/dummy-images/dummy-main-pic.jpg);}*/

.main-pic-strip .caption {float: left; padding-top: 180px; margin-left: 10px; _width: 90%;}

.main-pic-strip h1, .main-pic-strip p {color: #fff; font-size: 1.4em; display: inline; _padding-right: 10px;}

.main-pic-strip p {font-size: 0.9em; }

.main-pic-strip a { color:White;}


/* PRODUCT BUTTONS
______________________  */

#product-buttons {clear: both; width: 880px; padding: 20px 0 0 0px;}
.product-button-wrapper{width: 142px; margin-right: 15px; height: 202px; float: left;}

#product-buttons a {color: #fff; text-decoration: none;}
#product-buttons a:hover {text-decoration: underline;}

/* Button Types */
#product-buttons .buttons {background-position: top; background-repeat: no-repeat; border-width:4px; border-style:solid; margin-bottom:10px; padding-right:8px; }
#product-buttons img{margin:0; padding:0;}
#product-buttons p {margin-top: -3px; color: #fff;}


/* Hero */

#hero-products {clear: both; padding-top: 20px; margin-bottom:10px; width: 100%;}

#hero-products .product {width: 240px; float: left; margin-right: 25px;}

#hero-products .first {margin-left: 0;}

#hero-products .headline-box {clear: both; width: 240px; float: left; margin-bottom: 10px; height: 40px;}

#hero-products a {text-decoration:none; color: #00a1b1; font-weight: bold; font-size: 1.3em;}
#hero-products a:hover {text-decoration:underline; }

#hero-products img {margin-top: 5px; border: 1px solid #ccc;}


/* Standard */

#products-display {clear: both; width: 100%;}

#products-display .product {width: 130px; float: left; margin-right: 33px; padding-top: 20px; margin-bottom:5px;}

#products-display .first {margin-left: 0;}

#products-display .headline-box {clear: both; width: 130px; float: left; margin-bottom: 10px; height: 30px;}

#products-display a {text-decoration: none; color: #00a1b1; font-weight: bold; font-size: 0.8em; }
#products-display a:hover {text-decoration: underline; }

#products-display img {margin-top: 5px; border: 1px solid #ccc;}
.clearer-products{clear:both; height:1px}

.largeproductimg{text-align:center;}

/* Bullets for both */

#hero-products ul, #products-display ul {list-style-type: disc; list-style-position: outside;}
#hero-products ul{margin-left:15px;}
#hero-products li, #products-display li {font-size: 0.8em; padding:0 0 3px 0;}

#products-display li {font-size: 0.7em; list-style-position: outside; line-height: 140%; margin-left: 15px;}

/* Image */
#image_large{text-align:left; clear:both; margin-top:10px; padding-top:10px;}


/* TOP COLUMNS
______________________  */

#product-intro {width: 820px; margin: 0; padding-top:10px; clear:left;}

#product-intro h1, #product-intro p {color: #00a1b1; font-size: 1.4em; display: inline;}
#product-intro h1.title{margin:2px 0 2px 0; clear:both;}
#product-detail {font-size: 0.8em; color: #000; line-height:1.4em;}
.product-code {color: #999; font-weight: normal;}
#product-intro .cross-both{padding-bottom:10px;}

.column1, .column2, .column3,.column3WithFlash, .pdf-download {float: left; background-position: top left; background-repeat: no-repeat;  margin-left:25px;}

.column1, .pdf-download {margin-left: 0;}

.pdf-download {clear: both;}

.column1, .column2 {width: 260px; height: 300px; border: 1px solid #ccc;}

.column3 {width: 480px; background-image: none;}
.column3WithFlash{width: 200px; background-image: none; float: left;}

.column3 h2, .column3WithFlash h2{margin-bottom:0;}
.column3 ul, .column3WithFlash ul{margin-top:0;}

#product-intro .ProductDescription, #product-intro .product_suitable{margin-left:15px; list-style-type:disc; list-style-position:outside;}


#product-intro li.none {list-style-type: none;}

.ProductDescription{padding:0;}
.ProductColour{display:inline-block;width: 30px;}
.ProductColourQuantity{width: 15px;	border: solid 1px #CCCCCC;	background-color:#CCCCCC;}
.quantityTextbox{width:110px; padding:2px;}

/* MAIN IMAGE */

.column1 img {padding-top: 15px; margin-left: 10px;}


/* TABS COLUMNS
______________________  */

#dimensions, #accessories, #faqs, #spare-parts, #further-info {clear: both; width: 790px; padding-top: 10px; margin-left: 15px;}

/* Dimensions */

.dimensions-column1 {width: 300px; float: left; height: 160px; border: 1px solid #ccc;}

.dimensions-column2 {width: 400px; float: right; margin-left: 30px;}
.dimensions-column2.full{float:none; width:500px; margin-left:0;}
.dimensions-column2.full p{margin-left:0;}

.dimensions-spec, .dimensions-spec-first {display: block; border: 1px solid #ccc; height: 30px; width: 100%; margin-top: 10px;}

.dimensions-spec-first {margin-top: 0;}

#dimensions p {margin: 0 5px; color: #000;}

.line1, .line2 {width: 100%; height: 50px;}

.line2 {background-color: #CCC;}

.other_item{margin-bottom:10px; padding-bottom:10px; border-bottom: 1px solid #ccc;}
.other_item h3{font-size:1em; font-weight:bold;}

/* TABS COLUMNS
______________________  */
.suitable {color: #0088CE; font-weight: bold;}

.unsuitable {color: #0088CE; font-weight: normal; text-decoration: line-through;}


/* COLOUR SWATCHES
______________________  */

#colour-swatches-header {width: 820px;   height: 49px; margin: 5px 0 0 0; float: left; background-position: right; background-image: url(../../images/backgrounds/csh.png);}

#colour-swatches-header h2	 {color: #00a1b1; font-size: 1.4em; display: block; padding-top: 12px; margin-left: 40px}

#colour-swatches {clear: both; width: 820px; padding-top: 10px; font-size: 0.8em; color: #000;}

.swatches-intro {clear: both; }

.swatch {width: 150px; float: left; height: 25px; _height: 23px; border: 1px solid #ccc; margin: 10px 10px 10px 0; padding: 0; overflow: hidden;}

#colour-swatches .first {margin-left: 0;}

.swatch-name {height: 25px; float: left; border: none; margin: 5px 0 0 5px;}

.swatch input {height: 25px;}

#colour-swatches-big {clear: both; width: 670px; padding-top: 10px; font-size: 0.8em; color: #000;}
#colour-swatches-big .swatch-big-colour {width: 120px; height: 120px; float: left; margin: 0; }
#colour-swatches-big .swatch-big {width: 120px; float: left; height: 120px; margin: 20px 10px 10px 0;}

#colour-swatches-big .swatch-big-name {clear: left; height: 25px; border: none; margin: 5px 0 0 5px; width: 120px;}


h2.swatches-header {color: #999; display: inline;}

.colour {width: 25px; height: 25px; float: left; margin: 0; }

.quantity {width: 30px; height: 100%; border-collapse: collapse; border: none; background-color: #ccc; float: right; text-align: center;}

.colour-swatch-red {background-color: #FF0000;}

.colour-swatch-green {background-color: #00FF00;}

.colour-swatch-grey {background-color: #999;}

.colour-swatch-blue {background-color: #0000FF;}

.colour-swatch-pink {background-color: #FF00FF;}

.swatch-pop-up {clear: both; float: left; width: 100%; }




/* ENQUIRY BUTTON
______________________  */

p.link a:hover {background-color: #d4e2e5; text-decoration: none;}

p.link a:link span{display: none;}

p.link a:visited span{display: none;}

p.link a:hover span {
position: absolute;
margin:15px 0px 0px 20px;
background-color: #d4e2e5;
max-width:220;
padding: 5px 10px 5px 10px;
border: ;
font: normal 10px/12px verdana;
color: #000;
text-align:left;
display: block;
text-decoration: none;
border-bottom: none;
}

/*Press Office**********************************************************/

.POResults
{
	border:solid 1px #26afbe;
	width:794px;
	height:100%;
	padding:2px 2px 2px 2px;
	clear:both;
}
.POLeft
{
	height:100%;
	width:200px;
	float:left;
}
.PORight
{
	height:100%;
	width:500px;
	float:left;
}

#distributors {width: 100%; margin-top: 10px;}

#distributor .entry {clear: both; float: left; width: 100%; margin-top: 30px; padding-bottom:10px; border-bottom:1px solid #EDEFDD;}

#distributor a {color: #000;}

#distributor .headline {display: block; color: #000; font-size: 1em; font-weight: bold;}

#distributor img {float: right; padding: 5px; margin: 5px 0 0 10px; border:1px solid #ccc;}

#distributor .info { width: 100%; }

/* FAQs
______________________  */

#faqsPage {width: 100%; padding-top:15px;}

#faqsPage .faq-item{margin-bottom:20px; clear:both;}

#faqsPage h3.question {margin: 10px 0 5px 0; color: #00a1b1; font-weight: bold; font-size: 1em;}

#faqsPage .answer {margin-top: 0; color: #000; font-size: 1em;}

#faqsPage .answer img {float: right; margin-left: 10px; border: 1px solid #ccc;}


.clearer-with-space {clear: both; height: 10px;}

/* PRESS OFFICE AND INFOZONE
______________________  */

#press {width: 100%; margin-top: 10px;}

#press .stories,#press .resources {width: 820px; margin-bottom:15px;}
#press .headline {display: block; margin-bottom: 5px;}

#press .date {font-size: 0.9em; font-weight: normal; color: #999;}

#press .headline a {font-size: 0.9em; text-decoration: none; border-bottom: 1px solid #000; margin-left: 10px; color: #000; font-weight: bold;}

#press .standfirst {}
#press .pressImage{float:right; margin:0 0 10px 10px;}
#press .pressMoreLink{color:#26AFBE; font-weight:bold;}

#press .sidebar-container {float: right; width: 250px;}

#press .sidebar-top {height: 15px; width: 250px; background-image: url(../images/press/sidebar-box-top.gif); background-position: top; background-repeat: no-repeat;}

#press .sidebar-main {width: 250px; background-image: url(../images/press/sidebar-background.gif); height: 200px; background-position: bottom;}

#press .sidebar-main p {margin: 0 10px;}


#press-story {clear: both; width: 820px; margin: 0; float: left; }

#press-story h1 {color: #26afbe; font-size: 1.6em;}

#press-story img {float: right; margin: 10px 0 10px 10px; border:1px solid #ccc;}


/* FOOTER
______________________ */

#footer {clear:both; width: 820px; text-align: left; padding-bottom: 10px; padding-top: 20px;}

#footer img {margin-left: 5px;}

#footer ul, #footer li {clear: both; display: inline; font-size: 0.8em; color: #666;}

#footer ul li a {border: none; text-decoration: none; color: #666; font-weight:normal;}

#footer ul {margin-left: 5px;}


/* CONTACT US
______________________  */

#contact-us {float: left; width: 820px; clear: both;}

#contact-us .contact-us-column-1 {clear: both; width: 350px; float: left; padding: 0; margin: 0;}

#contact-us .contact-us-column-1 p, #contact-us .contact-us-column-2 p {font-size: 1em;}

#contact-us .numbers, #contact-us .address {width: 350px; font-size: 0.9em;}

#contact-us .numbers-details {clear: both; float: left; width: 220px; margin-top: 5px;}

#contact-us .numbers-number {float: right; width: 120px; margin-top: 5px;  text-align: right;}


#contact-us .address {margin-bottom: 20px;}

#contact-us .contact-us-column-1-contact-form {width: 100%; border: 1px solid #00a1b1; padding: 10px; margin-top: 20px;}

#contact-us .contact-us-column-1-contact-form .fieldcont{width:160px; float:left; margin:0 10px 0 0;}
#contact-us .contact-us-column-1-contact-form .fieldcont input{float:left;}
#contact-us .contact-us-column-1-contact-form .contactvalidation{margin-bottom:10px;}
#contact-us .contact-us-column-1-contact-form label{font-size:90%;}
#contact-us .contact-us-column-1-contact-form h1 {font-size: 1.2em; color: #00a1b1;}

#contact-us .contact-us-column-1 input.box {width: 150px; height: 30px; margin-top: 5px; padding: 3px; margin-left: 0; border-collapse: collapse; border: none; background-color: #ccc;}

#contact-us .contact-send{margin:10px 0;}

#contact-us .caveat, #contact-us p.caveat {font-size: 0.8em;}

#contact-us .contact-us-column-2 {width: 340px; float: right;}

#contact-us .contact-us-map {width: 340px; float: right;}

#contact-us .contact-us-map iframe, #contact-us .contact-us-map img {border: 1px solid #00a1b1;}
#contact-us #mapdownload{text-align:center;}
#contact-us .contact-us-registration {float: left; width: 340px; padding-top: 20px; font-size: 0.8em; text-align: right;}

#contact-us .contact-us-address {clear: both; width: 100%; margin-top: 20px; text-align: right; }

#contact-us .contact-form {border: 1px solid #26afbe; height: 30px; width: 160px; background-color: #ccc; margin: 4px 0 10px 0;}

#contact-us .contact-form-message {border: 1px solid #26afbe; height: 100px; width: 320px; background-color: #ccc; margin-top: 10px;}


/* SEARCH
____________________________ */

.SearchInputLeft{width: 396px; height:170px; float:left;}

/* Search Results */
#tblSearchRes{width:100%;}
#tblSearchRes h3{color:#263D83; font-size:1em;}
#tblSearchRes td{padding:3px;}
#tblSearchRes a.searchLink{color:#00A2B2;}
#tblSearchRes td img.searchImage{float:right; margin:0 0 5px 10px; border:1px solid #263D83; width:100px;} 
#tblSearchRes td ul,#tblSearchRes td li{line-height:100%;}
#tblSearchRes td li{line-height:120%; padding:0 0 5px 0;}
#tblSearchRes td ul{margin:0 0 5px 20px;}
#tblSearchRes td p{padding:0 0 5px 0;}
.SearchResultsColumnName{width:200px;}
.SearchResultsColumnDescription{width:450px;}
.SearchResultsColumnLink,.SearchResultsColumnType{width:30px;}
.SearchResultsItem{	background-color:#DAF4F8;text-align:left;}
.SearchResultsItemAlternate{background-color:#A5E6ED;text-align:left;}

/* REGISTER 
________________________________________ */
.UserPreferencesColumn{float:left;width: 395px;}
.UserPreferencesColumn.leftcol{width: 415px; margin-right:5px;}
#registerButton{padding:15px 5px; text-align:right;}
#registerButton .input-button{font-size:1.1em; height:35px; width:150px; border:1px solid #0033CF;}
.registerleft{float: left; width: 350px;}
.registerright{float: left; width: 450px;}
.reg-validate{font-size:0.9em; margin:15px 0 10px 0; line-height:18px;}
.UserPreferencesColumn table th p.small_label{font-size:0.8em; color:#fff;}
.UserPreferencesColumn.leftcol table.reg_userdetails th{white-space:normal; width:200px;}

/* Enquiries */
#sendEnquiryByEmail{padding:5px 0; margin:5px 0; border-top:1px solid #91D5DF; border-bottom:1px solid #91D5DF; font-size:90%;}
.btnSubmitEnquiry,.btnSaveEnquiry{float:right;}
.btnClearEnquiry, .btnUpdateEnquiry{float:left;}
table.OrderQuotes{width:100%;}
table.OrderQuotes td.center{text-align:center;}

/* Other */
.clearme{clear:both;}
.noborder{border:none;}

/* CLEARING FLOATS (http://www.positioniseverything.net/easyclearing.html) 
-------------------------------------------------------------------------------------------------------------- */
.clearfix:after {content: "."; clear: both; height: 0; visibility: hidden; display: block;}
.clearfix {display: inline-block;}
/* Hides from MacIE \*/           
* html .clearfix {height: 1%;}
.clearfix {    display: block;}
/* End hide from MacIE */