
/* ============================================ Menu Menu ============================================= */
/*Strip the ul of padding and list styling*/
ul { list-style-type:none;margin:0;padding:0;position: absolute; }
/*Create a horizontal list with spacing*/
li {display:inline-block;float: left;margin-right: 1px;}
/*Style for menu links*/
li a {display:block; min-width:140px;height: 50px;line-height: 56px;color: #fff;text-decoration: none; font-size: 1.2em; }
/*Hover state for top level links*/
li:hover a {color: #fc9835;}
/*Style for dropdown links*/
li:hover ul a {background: red;color: #2f3036;height: 40px;line-height: 40px;}
/*Hover state for dropdown links*/
li:hover ul a:hover {background-color:#E5E5E5; color:#fc9835;}
/*Hide dropdown links until they are needed*/
li ul {display: none;}
/*Make dropdown links vertical*/
li ul li {display: block;float: none;}
/*Prevent text wrapping*/
li ul li a {width: auto;min-width: 100px;padding: 0 20px;}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {display: block;}
/*Style 'show menu' label button and hide it by default*/
.show-menu {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;text-decoration: none;color: #245D90;font-weight: 500;background: #fff;text-align: center;padding: 20px 0;display: none;cursor: pointer;}
/*Hide checkbox*/
input[type=checkbox]{display: none;}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{display: block;}
/*Responsive Styles*/
@media screen and (max-width : 885px){
/*Make dropdown links appear inline*/
ul.main-menu {position: static; display: none;}
/*Create vertical spacing*/
li {margin-bottom: 1px;}
/*Make all menu links full width*/
ul li, li a {width: 100%;}
/*Display 'show menu' link*/
.show-menu {display:block;}
li a {text-align: center;background: #ffffff;}
}

/* ============================================Page Styling ============================================= */
@charset "utf-8";
/* CSS Document */
.producttitlestyle {color:#265d90;font-size: 22px;text-indent:5px; font-weight:600px;}
.productinfostyle {}
.productkeywordstyle {font-size: 15px;color:#265d90;font-size:14px;font-weight:700;}
#con{width:190px; height:200px}
hr, hr.vertically {color: #b2b2b2; background-color: #b2b2b2;}
hr.vertically {width: 0; height: 100%;}
a img{border:none;}
a:link{text-decoration: none!important; color:#354170;}
body {
	margin: 0 auto; 
	padding: 0px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1em;
    font-weight: 300;
    line-height: 1.4em;
    color: #000;
	background-image: url("https://www.plastidip.co.uk/ebay/eBay/V4/page-background.jpg");
	background-position: center top;
	background-size: cover;
	background-repeat: repeat-y;
	max-width:1460px;
	}

#outerwrapper{ position:fixed; padding:0; margin: 0 auto; top:0; left:0; height: 100%; z-index: -1; min-height: 800px;}	
#container{	margin: 0 auto;	width:100%;	position:relative;     padding:0;	}
#header{line-height: 32px; height: 32px; width: 100%; background: #333;}
#logo{position:absolute;z-index: 1000; }
#logo2{float: left; margin-top: -5px; width: 25%;}
#innerheader{margin: 0 auto; line-height: 32px;	height: 32px; max-width: 950px; background: #333; padding: 0px 0px;}
#headerIcons{float: right; text-align:right; padding-top: 4px;}
#topNavigation{font-size: 16px; height:56px; width: 100%; background: #FFF; box-shadow: 0 0 5px 2px rgba(130, 130, 130, 0.5); line-height:1;}
#innertopNavigation{ margin: 0 auto; height:56px; max-width: 810px;}
#innertopNavigation2{  height:56px; max-width: 810px; }
#facebookBanner{width: 100%;}		
#innerwrapper{margin: 0 auto; max-width:950px; padding-top:5px;	}
#mainContent{max-width:950px; background-color:rgba(255,255,255,0.5)}
#discalimer{font-size: 10px;float: left;background-color: white;margin-top: -15px;margin-bottom: 15px;padding: 10px;line-height: 9px;}
.CTResourcesList a{line-height: 0.8em!important; color: #354170 !important;}
.CTResourcesList a:hover{color: #fc9835 !important; }
.colorHeading{ font-family: 'Source Sans Pro', sans-serif;font-weight: 600; font-size: 1.8em; text-transform: uppercase; margin: 10px 0px 10px 0px; color: #354170;padding-left: 5px; text-decoration:none; float: left; width: 100%; min-width: 400px; text-align: left !important;}
colorHeading a{ font-family: 'Source Sans Pro', sans-serif;font-weight: 600; font-size: 1.8em; text-transform: uppercase; margin: 10px 0px 10px 0px; color: #354170;padding-left: 5px; text-decoration:none; float: left; width: 100%; min-width: 400px; text-align: left !important;}

.colorHeading a:hover{ color:#fc9835; cursor:pointer; font-style:italic;  text-decoration:none; }
.colorSubHeading{color:#999;font-size: 18px;text-indent:5px;font-weight: 600; margin:5px;}

.colorCatDiscription{width: 100%; float: left;}
.colorSwatchTitle{color:#354170;font-size: 18px;text-indent:5px;font-weight: 600; margin:5px;}
#productColours{color:#265d90;font-size: 18px;text-indent:5px;}
#colorRow{float:left;height: 80px; width: 100%;margin-bottom: 5px;}
#colorSwatch{float:left;background-color:rgba(255,255,255,0.5); height: 300px;box-shadow: 0px 5px 2px rgba(130, 130, 130, 0.5); margin:5px;text-indent:5px; color: #354170;}
#colorSwatchEmpty{float:left;background-color:rgba(255,255,255,0); height: 330px; width:155px; margin:5px;text-indent:5px; color: #354170;}
.colorBlock{margin-right:15px; margin-top:5px; width:40px; height:40px; display: block; float:right; border: 1px solid #CCC; border-radius: 3px;}
#disclaimer{float: left; width: 100%; font-size: 10px; line-height: 1;}
#productImage{width: 470px;	height: 450px;  margin: 20px 0px 0px 5px;background-color: #fff;float: left;}
#productNav{height: 58px;float: left;}
#ProductInfo{width: 100%;box-shadow: 0 0 5px 2px rgba(130, 130, 130, 0.5);margin: 0 auto;min-height: 35em; margin-bottom: 10px;}	
.featureBox{		
		width:24.5%;
		margin-left:0.1%;
		background-color:rgba(255, 255, 255, 1);
		display: inline-block;
		box-shadow: 0 0 5px 2px rgba(130, 130, 130, 0.5);
		color:#265d90;
		font-size:18px;
		line-height:20px;
		text-align: center;
		margin-bottom:10px;
		font-weight:600;
		padding-top:5px;
		padding-bottom:5px;	
}
.featureBox a {text-decoration: none;}
@media(max-width:550px){
	.featureBox{
		width: 100% !important;
		height: auto;
	}
	}
@media screen and (max-width: 750px) and (min-width: 551px) {
	.featureBox{
		width: 49% !important;
		margin:0 auto!important;
		margin-left: 0.5% !important;
		margin-bottom:10px !important;
	}
	}
@media screen and (max-width: 935px) and (min-width: 751px) {
	.featureBox{
		width: 32% !important;
		margin:0 auto!important;
		margin-left: 0.5% !important;
		margin-bottom:10px !important;
	}
	}
	
.2-3Banner{ width:75%; margin-bottom:10px;  box-shadow: 0 0 5px 2px rgba(130, 130, 130, 0.5);cursor: pointer;	float: right !important; }
.fullBanner{ width:100%; margin-bottom:10px; box-shadow: 0 0 5px 2px rgba(130, 130, 130, 0.5);cursor: pointer;	}
#featuredItems{ width: 918px; padding: 16px; margin: 5px 5px 5px 0px; height: 24px;	 background-color: #fff;float: left;}
#footer{width: 100%; border:0;	rgba(0, 0, 0, 0); margin-top:5px; bottom: 0 !important;}
#innerfooter{margin: 0 auto; max-width: 950px; border:0; background-color:rgba(0, 0, 0, 0); font-weight: 400; text-decoration:none; }
.built-by{ padding-right: 10px;  cursor: crosshair; float:right !important; font-family: 'Montserrat Subrayada', sans-serif; font-weight: 200; display: block ;color: white !important;}

.built-by:hover{color: #0ca2e0; 
	background: -webkit-linear-gradient(left,#0ca2e0 32%,#27dde8 100%); 
	-webkit-background-clip: text; 
	-webkit-text-fill-color: transparent; 
}



/* ============================================ Product Info Tabs ============================================= */
/* TabTop IndexCards styles */
/* all styles are > limited to avoid styling inner content */

/* sizes */
.tabholder { width:100%; height: auto; font-size:1em;  } /* base font size for em-scaling */
.tabholder div.tabtops { width:100%;}
.tabholder ul.tabtops > li { height:1.92em; } /* ( 1.92em = 1.2em x 1.6em @ h2 sizes ) */
.tabholder ul.tabtops > li > div { height:33.5em; top:1.92em;display: block; }
.tabholder ul.tabtops > li > label > h2 { font-size:1.1em; line-height:2em; font-weight: 400;} 
.tabholder ul.tabtops > li > div > div { font-size:.9em; }

/* colors, fonts, and decoration */
.tabholder { font-family:arial; }
.tabholder ul.tabtops > li { }
.tabholder ul.tabtops > li > label > h2 { /* inactive tab tops */
	background-color:#354170; 
	color:#FFF; 
	border: 0px solid #999999;   
	border-bottom:0;
	border-radius:0 8px 0 0;
	box-shadow: -5px -5px 5px -5px #333;
	} 
.tabholder ul.tabtops > li > label:hover > h2 { /* hover tab top */
	background-color:#E5E5E5; 
	color:#fc9835; 
	}
.tabholder ul.tabtops > li > input:checked + label > h2 { /* select active tab */
	background-color:rgba(255, 255, 255, 0.3); 
	color:#265d90; 
	z-index:3;
	}
.tabholder ul.tabtops > li > input:checked:hover + label > h2 { /* hover active tab */
	background-color:#FFFFFF; 
	color:#fc9835; 
	z-index:3;
	}
.tabholder ul.tabtops > li > div  {  /* set content background */
	background-color:rgba(255,255,255, 0.5); 
	border: 0px solid #999999;
	}
.tabholder ul.tabtops > li > div > div  { /* set content text attributes */
	color:#000000;
 	line-height:125%;
	font-weight:normal;
	text-align:left;
	}
/* structure */
.tabholder .tab1 ul.tabtops > li { width:100%; }
.tabholder .tab2 ul.tabtops > li { width:49.75%; }
.tabholder .tab3 ul.tabtops > li { width:33%; }
.tabholder .tab4 ul.tabtops > li { width:24.62%; }
.tabholder .tab5 ul.tabtops > li { width:19.6%; }
.tabholder .tab6 ul.tabtops > li { width:16.25%; }
.tabholder .tab7 ul.tabtops > li { width:13.85%; }
.tabholder .tab8 ul.tabtops > li { width:12.06%; }
.tabholder ul.tabtops > li { margin-right:0.5%; }
.tabholder ul.tabtops > li:last-child { margin-right:0%; } 

.tabholder {
	position:relative; 
	padding:0;
	margin-top:1em;
	margin-bottom:1.5em;
	}
.tabholder div.tabtops { 
	position:relative;
	height:auto; 
	margin:auto; 
	}
.tabholder ul.tabtops{
	position:absolute;
	width:100%; 
	height:auto; 
	top:0px;
	left:0px;
	margin:0px; 
	padding:0px;
	}
.tabholder ul.tabtops > li { 
	list-style:none;
	float:left; 
	margin-left:0;
	text-align:center;
	}

.tabholder ul.tabtops > li > input { /* hide radio elements */ 
	visibility:hidden; 
	position:absolute; 
	overflow: hidden;
	top:1em; 
	left:2em; 
	}
.tabholder ul.tabtops > li > label {
	margin:0; padding:0; border:0;
	}
.tabholder ul.tabtops > li > label > h2 {
	position:relative; 
	display:block;
	height:100%; 
	margin:0px; 
	padding:0px;
	overflow:hidden;
	cursor:pointer;
	z-index:1; 
	}
.tabholder ul.tabtops > li > div {  /* for border and scroller */
	position:absolute; 
	left:0px;
	right:0px;
	bottom:0px;
	margin:0px; 
	padding:0px;
	overflow:auto;
	display:none;
	z-index:2; 
	}
.tabholder ul.tabtops > li > div > div { /* the content */
	position:relative; 
	top:0; left:0; 
	width:auto;
	height:auto;
	max-height:none;
	overflow:visible;
	margin:.8em;
	}

.tabholder ul.tabtops > li > input:checked ~ div  {
	        display: block;
	}

@media(max-width:885px){
.tabholder .tab1 ul.tabtops > li, 
.tabholder .tab2 ul.tabtops > li, 
.tabholder .tab3 ul.tabtops > li, 
.tabholder .tab4 ul.tabtops > li, 
.tabholder .tab5 ul.tabtops > li, 
.tabholder .tab6 ul.tabtops > li, 
.tabholder .tab7 ul.tabtops > li, 
.tabholder .tab8 ul.tabtops > li { width:100%; margin-right:0; position:relative; clear:both; float:none; }

.tabholder ul.tabtops > li > label > h2 { /* inactive tab tops */
	border-radius:8px 8px 0 0;
	} 
.tabholder ul.tabtops > li > input:checked + label > h2 { /* select active tab */
	border-bottom: 1px solid #354170;	
	}
/* remove all hover states and create drop open sections */
.tabholder { height:auto;}
.tabholder div.tabtops { width:100%; max-width:none; height:auto; }
.tabholder ul.tabtops { position:relative; }
.tabholder ul.tabtops > li { height:auto; margin-top:1px; }
.tabholder ul.tabtops > li > div { height:auto; top:0em; }

.tabholder div.tabtops ul.tabtops > li > label > h2 { position:relative; height:1.92em; }  /* height if no doctype */
.tabholder div.tabtops ul.tabtops > li > div { position:relative; display:none; }
.tabholder div.tabtops ul.tabtops > li > div > div { overflow:visible; }

.tabholder ul.tabtops > li > input:checked + label > h2 { /* select active tab */
	background-color:#FFFFFF; 
	color:#265d90; 
	z-index:3;
	}
.tabholder ul.tabtops > li > input:checked:hover + label > h2 { /* hover active tab */
	background-color:#FFFFFF; 
	color:#265d90;  
	}
.tabholder ul.tabtops > li > input:checked ~ div  { /* open content */
	display: block;
	overflow:hidden;
	animation-name: rollopen;
	animation-duration: 1s;
	}
}
/* animation code */
@keyframes rollopen{
	from { height:0px; }
	to { height:300px; }
}



</style>
