/*
Copyright (C)2014 Creative Bay Ltd. All rights reserved.
This CSS Style Sheet may not be used or reproduced in whole or in part, without the prior permission of CreativeBay, www.creativebay.co.uk.
Any person or group of persons found to be in breach of this notice may face legal action.
*/

/*<========== GENERAL STYLING (contains: background, header, flash, subheader, repeater & footer) ==========>*/

@charset "UTF-8";

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,300);

.inner {
	width: 980px;
	margin: 0 auto;
}

#background a {
	 font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
}

#seo {
	display: none;
}

/*<-- background -->*/
#background {
	background: #f0f0f0;
}

a:focus { outline: none; }

/*<-- header -->*/
div#header,#header-duplicate {
	background: #fff /*url(shared_header.jpg)*/;
	height: 150px;
	width: 980px;
	position: relative;
	margin: 0px auto;
	float: none;
	font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;

	
}

#header-duplicate{
	margin-bottom: 20px;
}

#logo {
	left: 10px;
    position: relative;
    top: 30;
	z-index: 50;
	float: left;
	
}



div#header h3{
	
	line-height: 30px;
    margin: 0;
    padding: 0;
    text-align: center;
	text-transform: uppercase;
	color: #48494a;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 16px;
	 
}



#headercontainer{
	position: relative;
	background: #fff;
}




#storenav {
	text-align: right;
	position: relative;
	right: 60px;
	top: 25px;
}

#storenav li a {
	color: #000;
	text-decoration: none;
	font-size: 11px;
	font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
	margin-right: 12px;
	font-weight: 600;
}

#storenav li a:hover {
	color: #red;
}

#storenav li:last-child a {
	margin-right: 0;
}


#storenav li {
	list-style: none;
	display: inline-block;
}


.reassurance {
	background: #0e569e;
	height: 45px;
	line-height: 45px;
	text-align: left;
}

.reassurnacelinks {
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
	display: inline-block;
	width: 100%;
	font-size: 0;
	height: 45px;
	line-height: 45px;
	
}

.reassurance li {
	display: inline-block;
	list-style: none;
	width: 24%;
	vertical-align: middle;
	line-height: 45px;
}


.reassurance li a {
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	vertical-align: middle;
}

.reassurnacelinks img {
	vertical-align: middle;
}

.reassurnacelinks img  {
	margin-right: 5px;
}


/* <==== Search ====> */

#container input, #container select {
	padding: 0;
}

.searchbox {
    width: 340px;
	position: absolute;
	height: 24px!important;
	border-radius: 0;
	border: none;
	position: absolute!important;
    left: 375px!important;
    top: 60px!important;
}

.searchbox form,
.searchbox form input { margin: 0; border: none; }

.searchbox .srchbox,
.searchbox .srchbtn {
box-sizing: border-box;
display: inline-block;
vertical-align: top;
}
 
.searchbox .srchbox {
border: 1px solid #5a5a5a;
border-right: none;
width: 260px;
background: #fff;
color: #666;
font-size: 12px;
height: 36px;
line-height: 24px;
margin: 0;
text-indent: 5px;
outline: none;
float: left;
}

.searchbox .srchbtn {
background: none;
padding: 5px 0px;
width: 80px;
height: 36px;
position: absolute;
	display: block;
	top: 0;
	cursor: pointer;
}


.search-button {
	background: #0e569e url(search_icon.png) no-repeat center center;
	border: none;
	width: 80px;
	height: 36px;
	cursor: pointer;
	margin: 0px 0px 0px 0px;
	float: right;
	position: relative;
	line-height: 36px;
	text-align: center;
	color: #fff;
	
}

.search-button i, .search-button span {
	display: inline-block;
	position: relative;
	top: 0;
}


.assistance {
	position: absolute;
	right: 0;
	top: 60px;
}

/*<-- subheader -->*/
div#subheader {
	background: #000;
	width: 100%;
	margin: 0px auto;
	position: relative;
    height: 54px;
	float: none;
}


#nav {
	font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
	z-index: 10;
	width: 980px;
	height: 54px;
	padding: 0 ;
	margin: 0 auto;
	list-style: none;
	color: #fff;
	font-weight: 100;
	font-size: 11px;
	text-align: left;
	overflow: hidden;

}

#nav li {
	display: inline-block;
	vertical-align: top;
	word-wrap: break-word;
	
	
}


#nav > li {
	width: 88px;
}




.lt-ie7 #nav li {
	float: left;
}


#nav li:last-child:after {
	content: none;
}

#nav a {
	display: inline-block;
	color: #fff;
	font-weight: 700;
	text-transform: inherit;
	font-size: 11px;
	text-decoration: none;
	vertical-align: middle;
	font-size: 13px;
	line-height: 54px;
	text-align: center;
	width: 90px;
	height: 54px;
}



#nav a.twoline {
    height: 42px;
    line-height: 15px;
    padding-top: 12px;
}

#nav > li{
	height: 54px;
	border-left: 1px solid #fff;
}


#nav > li:first-child {
	border: none;
}

#nav a:hover {
	text-decoration: none;
	
}

/*#nav li:hover{
	background: red;
}*/


/* sublinks */
/*#nav li:first-child a {
	padding-left: 0;
}*/

/* sublinks */
#nav .sublink {
	position: absolute;
	display: none;
	width: 950px;
	background: #f0f0f0;
	border: 1px solid #000;
	border-top: none;
	padding: 15px;
	margin: 0 auto;
	line-height: auto;
	font-size: 11px;
	top: 54px;
	z-index: 40;
	right: 0;
	left: 0;


}

#nav li:hover .sublink,
#nav li.sfhover .sublink {
	display: inline-block;
	
}

#nav .sublink li,
.lt-ie7 li.sfhover ul {
	display: inline-block;
	
}

#nav .sublink > li {
	width: 25%;
}

#nav .sublink  a {
	width: 95%;
}


#nav li li:after {
	content: none;
}

#nav li li > a {
	display: block;
	padding: 0;
	font-size: 13px;
	text-transform: inherit;
	font-weight: 600;
	padding-bottom: 0;
	height: auto;
	margin-bottom: 10px;
	line-height: 16px;
	text-align: left;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	color: #000;
}

#nav ul a:hover {
	text-decoration: underline;

}

.thirdlink{
	
	padding: 0;
}

.thirdlink li{
	width: 100%;
	display: block;
}

#nav .thirdlink li a {
	font-weight: 400;
	margin-bottom: 0;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


#nav ul a {
	text-decoration: none;
	color: #fff;
}


#nav > li:hover {
	background: #0e569e /*url(http://my.frooition.com/{{clientref}}/files/sub_over.gif)*/;

}


#nav > .has-sub:hover{
	height: 54px;
	padding-bottom: 2px;
}

#categories { display: none !important; }

/*<-- repeater -->*/
div#container {
	background: none;
	width: 980px;
}

/*<-- footer -->*/

#footercontainer{
	background: #fff;
}


div#footer {
height: 200px;
width: 980px;
padding-top: 10px;
margin: 0px auto;
border: none;
position: relative;
	text-align: left;
}

#footer i {
	position: relative;
	top: -20px;
}

#footer .fa {
	color: #fff;
	background: #000;
	border-radius: 50%;
	padding: 15px;
	font-size: 20px;
	
	
}

#footer ul {
	padding: 0;
	margin: 0;
	font-size: 0;
}


#footer li {
	font-size: 12px;
	list-style: none;
	
}

#footer li p {
	font-size: 12px;
}





.footer-section {
	width: 320px;
	height: 200px;
	border-radius: 5px;
	background: #0e569e;
	display: inline-block;
	vertical-align: top;
	text-align:  center;
	position: relative;
	font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
	color: #fff;
}

#footer h2 {
	margin-top: 0;
	color: #000;
	margin-bottom: 10px;
}



#footer li.footer-section {
	margin-right: 10px;
	
}

#footer li.footer-section:last-child  {
	margin-right: 0px;
	
}

#keep-in-touch a {
	color: #fff;
	background: #000;
	text-decoration: none;
	padding: 10px 50px;
	display: inline-block;
}

#keep-in-touch p {
	padding: 0 40px;
	margin-bottom: 10px;
}

#why-us li {
	line-height: 22px;
}

#storenav {
	text-align: right;
	position: relative;
	right: 60px;
	top: 25px;
}

#footerlinks {
	margin-top: 35px;
}

#footerlinks li a {
	color: #fff;
	text-decoration: none;
	font-size: 12px;
	font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
	margin-right: 12px;
}

#footerlinks li a:hover {
	color: #000;
}

#footerlinks li:last-child a {
	margin-right: 0;
}


#footerlinks li {
	list-style: none;
	line-height: 22px;
}

/*<========== Columns ==========>*/

div#centerpane {
    display: block;
    float: left;
    padding: 0px!important;
	margin: 20px 0px 0px 0px;
    width: 980px;
	z-index: 0;
}
* html div#centerpane { width: 980px; }

/*<========== Frooition Credit link colours ==========>*/

#design div { width: 197px; }

/*<========== SHOWCASE ==========>*/


#gallerycontainer {
	margin-bottom: 20px;
	background: #fff;
	position: relative;
}

div#showcase { 
	width: 470px;
	float: left; 
	margin: 0px 20px 25px 0px;
	margin-bottom: 0;
}

#showcase ul {
    display: none !important;
    float: left;
    list-style: none outside none;
    margin: 0 0 0 0px;
    padding: 0;
    width: 470px;
	background: none;
}

#showcase li {
    display: block;
    float: left;
    height: 70px;
   
    padding: 0;
    width: 70px;
	text-align: center;
}

#showcase li.exhosted img,
#showcase li a img {
	max-height: 95px;
	max-width: 95px;
	width: auto;
	height: auto;
}

#showcase li a {
    cursor: pointer;
    display: block;
    height: 70px;
	width: 70px;
    padding: 0;
    text-align: center;
	display: table-cell;
	vertical-align: middle;
	border: none;
}

* html #showcase li a {
    height: 70px;
    width: 70px;
}

#showcase div#largeimage {
    border: none;
    display: block !important;
    float: none;
    text-align: center;
    width: 470px;
	margin: 0 0 10px 0;
	height: 470px;
}

#showcase div#largeimage img {
    display: block;
    margin: 0 auto 10px;
}

div#showcase span {
    clear: both;
    display: block;
    height: 5px;
    width: 470px;
}

#showcase div#largeimage a#fullsize {
	color: #999;
}

#showcase div#largeimage a#fullsize:hover { text-decoration: underline; }

div#showcase div#imageID {
    display: none;
    left: 0;
    position: absolute;
    top: 0px;
	left: 10px;
    width: 960px;
	z-index: 10;
	-webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.5);
	-moz-box-shadow:    0px 5px 10px 0px rgba(50, 50, 50, 0.5);
	box-shadow:         0px 5px 10px 0px rgba(50, 50, 50, 0.5);
}

div#showcase div#imageID h5 {
	color: #fff;
	background: #000;
	display: block;
	width: 960px;
	height: 20px;
	margin: 0px;
	padding: 0px;
	text-indent: 10px;
}

div#showcase div#imageID a {
	background: #fff;
	border: 1px solid #000;
	color: #666;
	padding-top: 5px;
	padding-bottom: 5px;
	width: 958px;
}

div#showcase div#imageID span {
	background: #000;
	display: block;
	width: 960px;
	line-height: 1px;
	height: 1px;
	font-size: 0px;
}


#showcase_v2 li {
	list-style: none;
	display: inline-block;
	margin-right: 5px;
	border: 1px solid #fff;
	
	
}


#showcase_v2 li:hover{
	cursor: pointer;
	border: 1px solid #cf0000;
}

#showcase_v2 li:last-child {
	margin: 0;
}

#showcase_v2 {
	padding: 0;
	margin: 0;
	font-size: 0;
}

/*<========== ITEM DETAILS  ==========>*/

div#description {
	width: 980px;
	background: #fff;
	font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
	color: #000;
}

div#description div#descriptiontitle {
	background: #0e569e;
	width: 100%;
	height: 30px;
	line-height: 30px;
	text-align: center;
	color: #fff;
}

#itemdetails { width: 50%; margin: 0px 0px 0px 0px; display: inline-block;}

.item-specifics, .about-plumbworld {
	overflow-x: hidden;
	overflow-y: visible;
	max-height: 385px;
	font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
	
}

#desktoptitle {
	font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
	color: #000;
	font-size: 15px;
	line-height: 25px;
	text-transform: uppercase;
	font-weight: 300;
	max-height: 70px;
	margin-bottom: 10px;
	width: 490px;
	overflow: hidden;
}
#desktoptitle h3 { margin: 0px 0px 0px 0px;
	font-weight: 300!important;
	width: 490px;

}


#mobiletitle {
	display: none;
}

div#itemdescription {
	color: #fff;
	font-size: 13px;
	font-weight: 400;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 20px 0px;
}

div#itemdescription ul {
	padding: 0px 0px 0px 20px;
	margin: 0px 0px 0px 0px;
}

div#description div#descriptioncontent {
	padding: 10px;
	width: 958px;
	border: 1px solid #000;
	
}

#desktop_more_items_content {
	width: 978px;
	border: 1px solid #000;
}

/*div#description div#descriptiontitle, div#description div#descriptionbase {
	display: none!important;
}*/


#feedback_msg {
	display: none!important;
}


.seller-buttons {
	border: 2px dashed #ccc;
	border-left: none;
	border-right: none;
	width: 50%;
	position: absolute;
	bottom: 0;
	
}

.seller-buttons li {
	list-style: none;
	width: 49%;
	display: inline-block;
	text-align: center;
	padding: 25px 0;
	margin: 10px 0;
}



.seller-buttons li:last-child {
	border-left: 2px solid #cccccc;
}


.seller-buttons a {
	color: #0e569e;
	text-decoration: none;
	font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
	font-size: 16px;
}

/*<========== TABS ==========>*/



 div#more_items_title  {
	background: #000!important;
	height: 30px!important;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	line-height: 30px!important;
	font-size: 14px!important;
	width: 100%;
	font-weight: bold;
	text-align: center;
	color: #fff;
	font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
	
	
}

#boxtitle, .tabtitle {
	display: none!important;
}

#boxcontent, .tabcontent, #more_items_content {
	background: none;
	color: #000;
	font-weight: 400;
	font-size: 12px!important;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	 font-family: "Open Sans",Arial,Helvetica,serif;
	
	
}

.tabcontent {
	padding: 20px 10px!important;
}


ul.tablinks {
    height: 30px;
	width: 978px;
	border-bottom: 1px solid #000;
}

ul.tablinks a {
    background: #0e569e /*url(template_tabout1.gif) no-repeat*/;
    color: #fff;
    height: 30px;
    line-height: 30px;
	text-align: center;
}

ul.tablinks span,
ul.tablinks a:hover {
    background: #fff /*url(template_tabover1.gif) no-repeat*/;
    color: #000;
    height: 30px;
    line-height: 30px;
    text-shadow: none;
	text-align: center;
	width: 194px;
}

ul.tablinks a:hover {
	background: #000;
	color: #fff;
	border-bottom: none;
	
}



ul.tablinks a, ul.tablinks span {
	width: 194px;
}


.tablinks span {
	border: 1px solid #000;
	border-bottom: none;
}

/*ul.tablinks li {
	border:1px solid #000;
	border-bottom: none;
}*/

pre.tabcontent {
	border:1px solid #000;
	width: 978px;
	border-top: none;
}

#desktop_more_items_container, #tabs_container {
	width: 980px;
	background: #fff;
}

#desktop_more_items_container {
	margin-bottom:  20px;
}


div#container div.boxcontent, div.boxlinks {
	width: 100%;
}


div#customhtml {
	width: 100%;
}


#left_custom_content {
	overflow-y: auto;
	height: 328px;
	width: 470px!important;
}

#benftBnrs {
	margin-top: 20px;
}

#benftBnrs li {
	background: #fff;
	list-style: none;
	display: inline-block;
	margin-right: 5px;
	border-radius: 2px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
	 padding: 20px;
}

#benftBnrs li:last-child {
    margin-right: 0;
}

/*<========== Promo ==========>*/

#promobox {
	width: 100%!important;
}

.promoitem {
    font-size: 12px;
	font-weight: normal;
	font-family: "Open Sans",Arial,Helvetica,serif;
    padding: 20px 15px;
    text-align: center;
	float: left;
	width: 210px;
}

a.ignr {
	text-decoration: none;
	color: #333;
}

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

.promoitem span.price { color: #000; font-size: 12px; font-weight: bold; }

.promo_divider { color: #999; }
.promoitem a.buynow, .promoitem a.details { color: #000;  }

div#promobackup { color: #666; }
div#promobackup a { color: #ed0000; }

div.clear {clear: both; }


/*<==========================scrolling thumbnails====================>*/
			.scroller {	
				padding: 0 12px;
				position: relative;
				width: 395px;
				margin: 0 25px;

				
			}

			#frooscroll {
				visibility: hidden;
			}
			
			.arrow {
				position: absolute;
				top: 25px;
			
			}
			
			.arrow a {
				display: block;
				text-align: center;
				text-decoration: none;
				color: #000;
				font-size: 45px;
			}
			
			.arrow .inactive {
				opacity: 0.5;
				cursor: default;
			}
			
			#arrowLeft {
				left: -25px;
			}
			
			#arrowRight {
				right: -25px;
			
			}

			

			#arrowRight a:hover.active {
				color: #0e569e;
			}

			#arrowLeft a:hover.active  {
				color: #0e569e;
			}
			
			#scrollWrapper {
				overflow: hidden;
			}
			
			#scroll {
				position: relative;
				left: 0;
				padding: 0;
				margin: 0;
				list-style: none;
				-webkit-transition: all 0.8s ease; /* Safari compatibility */
				transition: all 0.8s ease; /* not recognised in IE9 and below */
				height: 95px;
				overflow: hidden;
			}

			#scroll:after {
			  content: "";
			  display: table;
			  clear: both;
			}

			#scroll li {
				float: left;
				overflow: hidden;
				width: 95px; /* 5 lis per view */
				height: 95px;
				margin-left: 5px;
				margin-right: 0;
				
				
			}

			#scroll li:first-child {
				margin-left: 0\px;
			}

			/*#scroll li:nth-child(4n){
				margin-right: 0;
			}*/

			#scroll img {
				height: 100%;
				width: 100%;
			}

			#scroll img:hover {
				opacity: 1;
				cursor: pointer;
			}

			.hide {
				display: none;
			}