/* ------------------------------------------------------------------------------------
		SCREEN - Present Finder 2018
		Filename : product.css
		Last Updated : 02. 10. 2018
		Copyright : (c) 2017 Etail Systems Ltd
		Author : Etail Systems Ltd
		Web : http://www.etailsystems.com



Table of Contents
    01.	=Product Panels   
    02. =Typography 
    03. =Tab Panel 
    04. =Imagery 
    05. =Buy pane  
    06. =Buy pane form  
    07. =Super Attributes 
    08. =Associated and Related products  
    09. =Recommended products - Buy option 
    10. =buytogether
    11. =Flags / Files
    12. =Videos 
    13. =Wishlist
    14. =Social bookmarks pane   
    15. =Feefo 
    16. =Hacks

------------------------------------------------------------------------------------- */



/* -------------------------------------------------------------------------------------
=Product Panels   
------------------------------------------------------------------------------------- */

#pi{
    float: left;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

#pi .top{
    float:right;
    width:200px;
    margin-bottom:1em;
}

#pi .main{
    float:left;
    width: 984px;
    margin-right:1em;
}

#pi .left{
    float: left;
    width: 374px;
    margin-right:1em;
    padding: 0;
}

#pi .right{
    float: left;
    position: relative;
    width: 594px;
    padding: 0;
}

#pi .bottom{
    float:left;
    width:100%;
    margin-top:1em;
}
/* -------------------------------------------------------------------------------------
=Typography 
------------------------------------------------------------------------------------- */

/* Title
------------------------------------------------------- */

#pi .pititle{}
#pi .pititle h2{
    color:#416976;
}

/* Description panes 
------------------------------------------------------- */

#pi .pidesc, 
#pi .delivery{}
#pi .pidesc h2{}
#pi .delivery h3{}
#pi .pidesc p,  
#pi .delivery p{}
#pi .pidesc ul{}
#pi .pidesc li{}

#pi .pidesc.desp {
	float:left;
	width:100%;
	margin-bottom:1em;
	padding-bottom:.5em;
	border-bottom:2px #eef2f3 solid;
}

/* direct despatch */
#pi .pidesc.desp h5{
	display:none;
}

#pi .pidesc.desp p{
    font-size: 1em;
    line-height:1.5em;
    color: #009c5f;
    /* text-align:center; */
    background:url('https://s3-eu-west-1.amazonaws.com/presentfinderimages/1441792/i/bdr/info%20icon.png') no-repeat center left;
    background-size:1.5em;
    padding-left:2em;
}


/* Extra Description 
------------------------------------------------------- */
#pi .pidescx{
    border-bottom:2px #eef2f3 solid;
    padding-bottom:1em;
    margin-bottom:.5em;
}

/*because of the insistance of using inline styles!*/
#pi .pidescx ul{
    list-style-type:none !important;
    font-size:initial !Important;
    margin-left:0 !Important;
}


#pi .pidescx ul li{
   list-style: none;
   line-height:1;
   font-size: 1em;
}

#pi .pidescx ul li:before{
   content: '';
   display: inline-block;
   height: 1em;
   width: 1em;
   margin-right:.5em;
   background: url('https://s3-eu-west-1.amazonaws.com/presentfinderimages/1441792/i/bdr/productbullettick.png') no-repeat 0 0;
   background-size: 1em;
}

/* Brand and Manufacturer  
------------------------------------------------------- */

#pi .brandmanu.brand{
	text-align:center;
	margin-top:1em;
}
#pi .brandmanu.brand h5{
	display:inline-block;
	text-transform:uppercase;
	font-size:.9em;
	margin-right:1em;
	font-weight:700;
}
#pi .brandmanu.brand h6{}
#pi .brandmanu.brand p{
	display:none;
}
#pi .brandmanu.brand a{
	font-size:.9em;
	display:inline-block;
	color:#416976;
	border:1px #416976 solid;
	border-radius: .5em;
	padding: .25em .5em;
	text-transform:uppercase;
}

#pi .brandmanu.brand a:hover{
	color:#fff;
	background-color:#416976;
}


/* Model #
------------------------------------------------------- */

#pi .brandmanu.model{
	float:left;
	clear:both;
	width:100%;
}
#pi .brandmanu.model h5{
	/* color:#416976; */
	font-size:1em;
	/* font-weight:700; */
	float:left;
	margin-right:1em;
}
#pi .brandmanu.model h6{
	font-size:1em;
	float:left;
}
#pi .brandmanu.model p,
#pi .brandmanu.model a{}


/* Telephone orders   
------------------------------------------------------- */

#pi .piphone{}
#pi .piphone h4{}
#pi .piphone h5{}
#pi .piphone p{}



/* -------------------------------------------------------------------------------------
=Tab Panel 
------------------------------------------------------------------------------------- */

#pm #pi #pi_wrapper{
    float:left;
    width:98%;
    padding:1%;
    border:2px #eef2f3 solid;
}

#pm #pi ul.pi_tabs{
    display:inline-block;
    float:left;
    width:100%;
    border-bottom:2px #979797 solid;     
    padding-bottom:.5em;
    cursor:pointer;
}

#pm #pi ul.pi_tabs li{
    float:left;
    font-size:1.2em;
    width:25%;
    text-align:center;
}

#pm #pi ul.pi_tabs li:last-child{}
#pm #pi ul.pi_tabs li.selected{
    color:#416976;
}
#pm #pi .pi_tab_content{
    float:left;
    width:100%;
    margin:1em 0;
}

#pm #pi .pi_tab_content h2{
    font-size: 1.4em;
    color:#416976;
}

#pm #pi .pi_tab_content h3{
	color:#416976;
	font-size:1.3em;
	margin-top:1em;
}

#pm #pi .pi_tab_content h4{
	color:#416976;
	font-size:1em;
	font-weight:700;
}


#pm #pi .pi_tab_content .artp p{
	margin-bottom:.5em;
}
#pm #pi .pi_tab_content a{}
#pm #pi .pi_tab_content a img {}
#pm #pi .pi_tab_content ol li{}

#pm #pi .pi_tab_content .artp ul{
	margin-left:2em;
	margin-bottom:1em;
}


#pm #pi .pi_tab_content .artp ul li{
    list-style: disc;
    /* list-style-position:inside; */
}

/* -------------------------------------------------------------------------------------
=Imagery 
------------------------------------------------------------------------------------- */

#pi .piimg{
    border: solid 1px #D2D2D2;
}

#pi .piimg p{
    display: none;
}

#pi .piimgx{}

/* If image not aligning centrally */
#pi .piimg a{
    float: none;
    margin-left: auto;
    margin-right: auto;
}

#pi .left .flags{
	display:none;
}

/* Gallery
------------------------------------------------------- */

#pi .gallery{
    float:left;
    width:100%;
    text-align:center;
    margin:.5em 0;
}

#pi .gallery h4{
    display: none;
}

#pi .gallery .piimg_large{
    width: 32.33333%;
    display:inline-block;
    margin:.5%;
    outline: solid 1px #D2D2D2;
}

#pi .gallery .piimg_large img{
    width:100%;
    height:auto;
}
#pi .gallery .piimg_large a{
	display:block;
	margin:0;
	padding:0;
}

/* Main Image Zoom
------------------------------------------------------- */

/* This is the moving lens square underneath the mouse pointer. */
.cloud-zoom-lens{
    border: 1px solid #888;
    margin: -2px; /* Set this to minus the border thickness. */
    background-color: #fff;
    cursor: move;
}

/* This is for the title text. */
.cloud-zoom-title{
    font-family: Arial, Helvetica, sans-serif;
    position: absolute !important;
    background-color: #000;
    color: #fff;
    padding: 3px;
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 10px;
    top: 0;
}

/* This is the zoom window. */
.cloud-zoom-big{
    border: 1px solid #ccc;
    overflow: hidden;
    margin-top: -1px;
    margin-left: -7px;
}

/* This is the loading message. */
.cloud-zoom-loading{
    position: absolute;
    top: 0;
    margin: 0;
    color: white;
    background: #222;
    padding: 3px;
}
   
/* -------------------------------------------------------------------------------------
=Buy pane  
------------------------------------------------------------------------------------- */

#pi .pibuy{
    padding-top:.5em;
}

#pi .pibuy .bt{}
#pi .pibuy .bc{}
#pi .pibuy .bb{}

#pi .pibuy .bc .title{
    display:none;
}

/* pricing info
------------------------------------------------------- */
#pi .pibuy .bc .price,
#pi .pibuy .bc .offer,
#pi .pibuy .bc .prevprice,
#pi .pibuy .bc .rrp,
#pi .pibuy .bc .trade,
#pi .pibuy .bc .saving{
	display:inline-block;
}

/*normal price */
#pi .pibuy .bc .price {}
#pi .pibuy .bc .price h6{
    color:#000;
    font-size: 2em;
} 
#pi .pibuy .bc .price label{
    display:none;
}
#pi .pibuy .bc .price span{} 

/*rrp price */
#pi .pibuy .bc.rrp {}
#pi .pibuy .bc .rrp h6{}
#pi .pibuy .bc .rrp label{}
#pi .pibuy .bc .rrp span{} 

/*offer price */
#pi .pibuy .bc .offer {
	margin-right:1em;
	color:#eb0000
}
#pi .pibuy .bc .offer h6{}
#pi .pibuy .bc .offer label{} 
#pi .pibuy .bc .offer span{} 

/*previous price (goes with offer) */
#pi .pibuy .bc .prevprice {
	margin-right:1em;
}
#pi .pibuy .bc .prevprice h6{
	text-decoration: line-through;
}
#pi .pibuy .bc .prevprice label{}
#pi .pibuy .bc .prevprice span{} 

/*offer price */
#pi .pibuy .bc .saving {
	color:#1e9c5a;
}
#pi .pibuy .bc .saving h6{}
#pi .pibuy .bc .saving label{}
#pi .pibuy .bc .saving span{}  


#pi .pibuy .bc .saving +h4 {
display:none;
}

/*trade price */
#pi .pibuy .bc .trade {}
#pi .pibuy .bc .trade h6{}
#pi .pibuy .bc .trade label{}
#pi .pibuy .bc .trade span{} 

/* Messages */
#pi .pibuy p{}
#pi .pibuy h4{}
#pi .pibuy h5{}
#pi .pibuy p.p_stock{}

/* stock */
#pi .pibuy .stock{
    font-size: 1em;
}

#pi .pibuy .stock li.out{
	font-weight:600;
}

#pi .pibuy .stock li.in{
	color:#009c5f;
	color:#31405b;
	padding-left:1.5em;
	background:url('https://s3-eu-west-1.amazonaws.com/presentfinderimages/1441792/i/bdr/stocktick.png') no-repeat left center;
	background-size:1em;
}


/* -------------------------------------------------------------------------------------
=Buy pane form  
------------------------------------------------------------------------------------- */

#pi .pibuy form#buy_form{
    float:left;
    width:100%;
}

#pi .pibuy form#buy_form .attr{
	display:inline-block;
	margin-right:1em;
	margin-bottom:1em;
}

#pi .pibuy form .attr label{
	color:#416976;
	font-weight:700;
}

#pi .pibuy form .options{
	display:inline-block;

}

#pi .pibuy form .options select{
	border:1px #5a5858 solid;
}


#pi .pibuy form#buy_form .attrqty{}
#pi .pibuy form#buy_form .attr .attritem{}
#pi .pibuy form#buy_form .attr .attritem .multiselect{}
#pi .pibuy form label{}

.sa_validator /* Shouldn't be visible. AL */
{
    display: none;
}

#pi .pibuy form .attrqty label{
    display:none;
}

#pi .pibuy form .attr label#selectResponse{}
#pi .pibuy form input,
#pi .pibuy form select,
#pi .pibuy form textarea{}
#pi .pibuy form select{}
#pi .pibuy form .inputtext,
#pi .pibuy form .textarea{}
#pi .pibuy span.chars{
	font-size:.8em;
}

#pi .pibuy input#skuqty.inputtext{
	width:2em;
	text-align:center;
	padding: 0.8em;
	float:left;
	margin-right:.5em;
}
#pi .pibuy .submit{
	float:left;
	padding: 1.25em 1.5em;

}

#pi .pibuy #bspsubmit.submit{}

#pi .pibuy .curr{
    display:none;
}

/* Product Personalisation info
------------------------------------------------------- */
#pi .pibuy form ul.pers{
	background-color:#eef2f3;
	float:left;
	clear:both;
	margin:.5em 0;
}

#pi .pibuy form .pers li{
	margin-bottom:.5em;
	vertical-align:middle;
}

#pi .pibuy form .pers li:last-child{
	margin-bottom:0;
	vertical-align:middle;
}

#pi .pibuy form .pers label{
	width:250px;
	display:inline-block;
	margin:1em 1em .25em 1em;
	color:#416976;
	font-weight:700;
	vertical-align:middle;
}

#pi .pibuy form .pers input.inputtext,
#pi .pibuy form .pers textarea{
	width:250px;
	margin-right:.5em;
	background-color:#fff;
	border:1px #5a5858 solid;
	padding:0.2em 1em;
	vertical-align:middle;
}

#pi .pibuy form .pers span.chars{
	float:right;
	text-align:right;
	margin-right:2em;
	width:95%;
	font-size:.6em;
}

#pi .pibuy form .pers span{
	font-size:.8em;
	margin-left:1em;
}

#pi .pibuy form .pers + div.attrqty{
	margin-top:1em;
}


/* Email when in stock */

#pi .pibuy .ewis{
	float:left;
	margin:.5em 0;
}

#pi .pibuy .ewis a{
	background-color:#de5d53;
	color:#fff;
	padding:.5em;
	float:left;
}

/* -------------------------------------------------------------------------------------
=Super Attributes    
------------------------------------------------------------------------------------- */

#pi .pibuy form#buy_form .cls_superattrribute{}
#pi .pibuy form#buy_form .cls_superattrribute .bc table{}
#pi .pibuy form#buy_form .cls_superattrribute .bc table .sa_left_cell_type_1,
#pi .pibuy form#buy_form .cls_superattrribute .bc table .sa_right_cell_type_1{}

/* -------------------------------------------------------------------------------------
=Associated and Related products  
------------------------------------------------------------------------------------- */

#pi .pass,
#pi .prel,
#pi .pran{}
#pi .pass h3,
#pi .prel h3,
#pi .pran h3{}
#pi .pass .fprd h3, 
#pi .pass .fprd h3, 
#pi .pass .fprd h3{}
#pi .pass .fprd{}

#pi .prec{
    float:left;
    background: #eef2f3;
}

#pi .prec h3{
    color:#416976;
    font-size:1.2em;
    text-align:center;
    text-transform:uppercase; 
    margin-top:.5em;
}


#pi .prec .fprd{
    border:none;
    width:90%;
    margin:auto 5%;
    border-bottom:2px #fff solid;
    margin-bottom:.5em;
}

#pi .prec .fprd:last-child{
    border-bottom:none;
    margin-bottom:0;
}

#pi .prec .fprd .fprdimg {
    width:100%;
    height:auto;
}

#pi .prec .fprd .fprdtitle{
    margin-bottom:0;

}
/* -------------------------------------------------------------------------------------
=Recommended products - Buy option  
------------------------------------------------------------------------------------- */

#pi .prec .sprd{}
#pi .prec .sprd form{}
#pi .prec .sprd form p{}
#pi .prec .sprd .img{}
#pi .prec .sprd .img img{}
#pi .prec .sprd a.lnk{}
#pi .prec .sprd .price,
#pi .prec .sprd .offer{}
#pi .prec .sprd .prevprice,
#pi .prec .sprd .price label,
#pi .prec .sprd .prevprice label,
#pi .prec .sprd .offer label{}
#pi .prec .sprd .price h6{}
#pi .prec .sprd h3{}


/* -------------------------------------------------------------------------------------
=buytogether
------------------------------------------------------------------------------------- */

.buytogether{
    float:left;
    width:100%;
    margin-top:1em;
}

.buytogether li.header{
	font-size:1.2em;
    color:#416976;
    text-align:center;
    padding:.5em 0;
    text-transform:uppercase;
    border-top:2px #eef2f3 solid;
    border-bottom:2px #eef2f3 solid;
}

.buytogether  ul.boughtto{
	position:relative;
	float:left;
	width:100%;
}


.buytogether  ul.boughtto li{
	width:90%;
	margin:.5em auto;
}

.buytogether ul.boughtto li.imgs{
    text-align:center;
    margin:0 auto;
    height: 182px;
}

.buytogether ul.boughtto li.imgs img{
	height:auto;
	margin:.5em;
	max-width:150px;
	width:22%;
	text-align:center;
	vertical-align:middle;
}

.buytogether ul.boughtto li.imgs span{
	width:5%;
	text-align:center;
	vertical-align:middle;
	font-size:2em;
}

.buytogether ul.boughtto li.prods{
	width: 74%;
	margin:0;
	text-align:left;
	padding-bottom:.25em;
	padding-left:.5em;
	padding-right:1em;
	float:left;
	border-right:2px #eef2f3 solid;
}

.buytogether ul.boughtto li.prods a{
	color:#0066c0;
}


.buytogether ul.boughtto li.prods input,
.buytogether ul.boughtto li.prods span.descr,
.buytogether ul.boughtto li.prods span.price{
	float:left;
}

.buytogether ul.boughtto li.prods input{
	font-size:1em;
	width:10%;
	margin:0;
	display:inline-block;
	margin-top:.3em;
	line-height:1.5;
	
}

.buytogether ul.boughtto li.prods span.descr{
	font-weight:700;
	width:70%;
}

.buytogether ul.boughtto li.prods span.price{
	float:right;
	color:#5a5859;
	font-weight:700;
	width:20%;
	text-align:right;
	float:left;
}

.buytogether ul.boughtto li.total{
	position:absolute;
	top: 182px;
	right:.5em;
	width: 23%;
	margin:0;
	float:right;
	text-align:center;
	font-size:1.2em;
}

.buytogether ul.boughtto li.total span{}

.buytogether ul.boughtto li.btn{
	position:absolute;
	top: 230px;
	right:.5em;
	width: 23%;
	margin:0;
	float:right;
	text-align:center;
	font-size:1.2em;
}

.buytogether ul.boughtto li.btn .submit{
	padding:.5em;
	margin:0;
	background-color: #de5d53;
	display:inline-block;
}


/* -------------------------------------------------------------------------------------
=Flags / Files
------------------------------------------------------------------------------------- */

#pi .flags{}

/* Links, File & Flags panes   
------------------------------------------------------- */
#pi .pilinks, 
#pi .pifile, 
#pi .piflags{
	display:inline-block;
}

#pi .pilinks .bt, 
#pi .pilinks .bb, 
#pi .pifile .bt, 
#pi .pifile .bb, 
#pi .piflags .bt, 
#pi .piflags .bb{
    display: none;
}

#pi .pilinks .bc, 
#pi .pifile .bc, 
#pi .piflags .bc{
    float: left;
    border: none;
}

#pi .pilinks ul li,
#pi .pifile ul li{}
#pi .pilinks ul li a, 
#pi .pifile ul li a{}
#pi .pilinks ul li .linkimg, 
#pi .pifile ul li .linkimg{}
#pi .pilinks ul li a.lnk,
#pi .pifile ul li a.lnk{}
#pi .pilinks ul li.email a.lnk{}


/* -------------------------------------------------------------------------------------
=Videos 
------------------------------------------------------------------------------------- */

#pi .youtube {
	float:left;
	width:100%;
	margin:1em 0;
	text-align: left;
}


/********************************************************************/
/* Fix for embedded videos plus overlay                 */
/********************************************************************/

#modal-overlay
{
    position: fixed;
    z-index: 2000;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0.8 !important;
}

#modal-overlay-inline
{
    z-index: 9000;
}

#modal-overlay-inline iframe
{
        border: solid 3px #324C6B;
        padding: 0px;
}

img#modal-overlay-close
{
    float: right;
}

/* -------------------------------------------------------------------------------------
=Wishlist 
------------------------------------------------------------------------------------- */

#pi .pibuy form.wishlist{}
#pi .pibuy form.wishlist input.chkbox{}
#pi .pibuy form.wishlist label{}
#pi .pibuy form.wishlist .submit{}

/* -------------------------------------------------------------------------------------
=Social bookmarks pane    
------------------------------------------------------------------------------------- */
#pi .socbook{
	float:left;
	width:100%;
	text-align:center;
	margin:.5em 0;

}
#pi .socbook li{}

/* -------------------------------------------------------------------------------------
=Feefo 
------------------------------------------------------------------------------------- */
/* Summary
------------------------------------------------------- */

.feefosmallsummarypanel{
    float:left;
    width:100%;
    margin:.5em 0;
}

.feefosmallsummarypanel .title{
    display:none;
}

.feefosmallsummarypanel .stars{
    margin-left:.5em;
}

.feefosmallsummarypanel .stars img{
	display:inline-block;
	width:1em;
}

.feefosmallsummarypanel .reviewCount,
.feefosmallsummarypanel .ratingNumber{
    display:inline-block;

    margin:.5em;
}

.feefosmallsummarypanel .ratingNumber{
	    display:none;
}

/* Review detail in tabs
------------------------------------------------------- */

.feeforeviews{
    float:left;
}

/*summary*/

.feeforeviews .feefosummary{
	float:left;
	margin-bottom:1em;
	/* margin-left:2em; */
	display:none;
}

.feeforeviews .feefosummary span.title{
    width:100%;
    font-size:2em;
    margin-bottom:.25em;
    float:left;
    color:#416976
}

.feeforeviews .feefosummary span.stars{
    float:left;
    margin-right:1em;
    height:2em;
}

.feeforeviews .feefosummary img{
    display:block;
    float:left;
    width:1.5em
}

.feeforeviews .feefosummary span.ratingNumber{
    font-size: 1.5em;
    float:left;
}

.feeforeviews .feefosummary .ratingCount{
    font-size:.5em;
    margin-left:1em;
}

/*individual reviews */

.feeforeviews ul.feefo{
    margin-top:1em;
    margin-bottom:1em;
}

.feeforeviews ul.feefo li{
	display:inline-block;
    list-style: none;
    margin: 0;
    padding: 1em 0;
    border-bottom:2px #eef2f3 solid;
    width:100%;
}
.feeforeviews ul.feefo li:last-child{
	border:none;
}

.feeforeviews ul.feefo li .rating{
	float:left;
	clear:both;
}

.feeforeviews ul.feefo li .rating img,
.rating img{
	width:1em;
	height:auto;
}


.feeforeviews ul.feefo li p.comment{
	display:inline-block;
	float:left;
	clear:left;
}

.feeforeviews ul.feefo li p.date{
	display:inline-block;
	font-size:.8em;
	float:right;
}

.feeforeviews .feefofooter{
    float:left;
    font-size:.8em;
}