in footer (only one right now) */
}
.calendar tfoot .ttip { /* Tooltip (status bar) cell | */
background: #f4f0e8;
padding: 1px;
border: 1px solid #000;
background: #848078;
color: #fff;
text-align: center;
}
.calendar tfoot .hilite { /* Hover style for buttons in footer */
border-top: 1px solid #fff;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #fff;
padding: 1px;
background: #e4e0d8;
}
.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
padding: 2px 0px 0px 2px;
border-top: 1px solid #000;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
}
/* Combo boxes (menus that display months/years for direct selection) */
.calendar .combo {
position: absolute;
display: none;
width: 4em;
top: 0px;
left: 0px;
cursor: default;
border-top: 1px solid #fff;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #fff;
background: #e4e0d8;
font-size: 90%;
padding: 1px;
z-index: 100;
}
.calendar .combo .label,
.calendar .combo .label-IEfix {
text-align: center;
padding: 1px;
}
.calendar .combo .label-IEfix {
width: 4em;
}
.calendar .combo .active {
background: #c4c0b8;
padding: 0px;
border-top: 1px solid #000;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000;
}
.calendar .combo .hilite {
background: #048;
color: #fea;
}
.calendar td.time {
border-top: 1px solid #000;
padding: 1px 0px;
text-align: center;
background-color: #f4f0e8;
}
.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
padding: 0px 3px 0px 4px;
border: 1px solid #889;
font-weight: bold;
background-color: #fff;
}
.calendar td.time .ampm {
text-align: center;
}
.calendar td.time .colon {
padding: 0px 2px 0px 3px;
font-weight: bold;
}
.calendar td.time span.hilite {
border-color: #000;
background-color: #766;
color: #fff;
}
.calendar td.time span.active {
border-color: #f00;
background-color: #000;
color: #0f0;
}
/*Make loading image*/
@font-face {
font-family: "fontawesome";
src: url("https://www.poptents.uk/js/pdp/fonts/fontawesome-webfont.ttf");
}
@font-face {
font-family: "HelveticaNeue";
src: url("https://www.poptents.uk/js/pdp/fonts/HelveticaNeue.ttf");
}
@font-face {
font-family: "HelveticaNeueBold";
src: url("https://www.poptents.uk/js/pdp/fonts/HelveticaNeueBold.ttf");
}
.awesome {
font-family: fontawesome;
}
.pdploading,.pdp_loading {
background: url("https://www.poptents.uk/js/pdp/css/images/overlay.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
height: 100%;
left: 0;
opacity: 0.8;
position: fixed;
top: 0;
width: 100%;
z-index: 999999;
}
#pdp_info_item span.item_delete {
background: url("https://www.poptents.uk/js/pdp/images/button-close.png") no-repeat scroll center center rgba(0, 0, 0, 0);
background-size: 20px;
font-size: 0;
}
.pdp_curved_text_control > div {
float: left;
width: 100%;
}
#pdp2_canvas_layer {
background: none repeat scroll 0 0 #fff;
display: none;
left: 0;
position: fixed;
top: 0;
z-index: -3;
}
#font_color_colorpicker {
background: none repeat scroll 0 0 #fff;
position: absolute;
top: 20px;
z-index: 99;
display: none;
}
#pdp2_zoom_content, #pdp2_zoom_content_backend {
left: 0;
position: absolute;
text-align: center;
top: 0;
width: 100%;
z-index: 20000;
}
#pdp2_zoom_content_backend {
left: 0;
position: absolute;
text-align: center;
top: 15px;
width: 100%;
z-index: 20000;
}
#export_image {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
color: #ffffff;
cursor: pointer;
font-weight: bold;
padding: 10px 0;
position: absolute;
right: 0;
text-decoration: none;
top: 30%;
width: 100%;
}
#pdp2_zoom_content .close {
background: url("https://www.poptents.uk/js/pdp/images/button-close.png") no-repeat scroll center center rgb(255, 255, 255);
border-radius: 100%;
cursor: pointer;
height: 30px;
position: absolute;
right: -15px;
top: -10px;
width: 30px;
}
#pdp2_zoom_content .inlay {
background: none repeat scroll 0 0 #111;
height: 100%;
left: 0;
opacity: 0.8;
position: fixed;
top: 0;
width: 100%;
}
#pdp2_zoom_img {
background: none repeat scroll 0 0 rgb(255, 255, 255);
border: 1px solid rgb(255, 255, 255);
border-radius: 0;
display: inline-block;
position: relative;
z-index: 20001;
}
#pdp2_zoom_img img {
clear: both;
float: left;
width: 100%;
height: auto;
}
#pdp2_zoom_img .view_wall_pre{ float:left;}
#pdp2_zoom_img .view_wall_pre input[type="radio"]{ padding:0 10px 0 0;}
#use_curved {
border: 1px solid #ff0000;
cursor: pointer;
float: left;
height: 12px;
margin: 5px 12px 0 0;
width: 12px;
}
/* #pdp2_zoom {
cursor: pointer;
font-size: 0;
height: 40px;
position: absolute;
right: 15px;
top: 5px;
width: 40px;
background: url(https://www.poptents.uk/js/pdp/images/zoom.png) no-repeat;
background-size: 100% 100%;
} */
#use_curved.active {
background: url("https://www.poptents.uk/js/pdp/images/checked_box.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
border: medium none;
height: 17px;
margin: 2px 10px 0 0;
width: 16px;
}
a.active i {
color: #ff0000;
}
.pdp_curved_text_control{
display: block;
float: left;
width: 100%;
color: white;
}
/* .pdploading span {
background: url("https://www.poptents.uk/js/pdp/css/images/loading.gif") no-repeat scroll center 30px #FFFFFF;
border-radius: 10px;
display: block;
font-size: 20px;
height: 60px;
line-height: 30px;
margin: 20% auto;
text-align: center;
width: 300px;
}
*/
.pdploading span:after, .pdp_loading span:after {
background: none repeat scroll 0 0 rgb(128, 210, 153);
border-radius: 100% 0;
bottom: 0;
color: rgb(255, 255, 255);
content: "Please wait...";
font-size: 12px;
height: 15px;
left: 0;
line-height: 15px;
position: absolute;
text-indent: 0;
width: 100%;
z-index: 1;
}
.pdploading span,.pdp_loading span {
background: url("https://www.poptents.uk/js/pdp/css/images/477.gif") no-repeat scroll center 18px rgb(51, 153, 204);
border-radius: 100% 0;
display: block;
font-size: 20px;
height: 70px;
line-height: 30px;
margin: 20% auto;
position: relative;
text-align: center;
text-indent: -9999px;
width: 140px;
z-index: 9999;
}
.wrapper_pdp #design_control #pdp_rotate_item {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #80d299;
border-image: none;
border-style: solid;
border-width: 1px 1px 1px 5px;
display: block;
position: absolute;
text-align: center;
top: 45px;
width: 120px;
z-index: 9999;
}
.product-view .product-img-box .product-image {
position: relative;
}
span.loadinggif {
background: url("https://www.poptents.uk/js/pdp/images/loading2.gif") no-repeat scroll center center rgba(0, 0, 0, 0);
height: 100%;
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.pdp_more_view li {
float: left;
cursor: pointer;
}
.wrap_inlay .item img {
position: absolute;
}
.img_view {
text-decoration: none;
}
.style-and-align{display:block;}
.pdp_edit_font_style ul {
text-align: left;
}
.pdp_edit_font_style {
display: block;
float: left;
padding: 10px 0;
width: 170px;
}
#pdp_edit_text_style {
border-left: 1px solid #cccccc;
display: block;
float: right;
padding: 10px 0;
text-align: right;
width: 115px;
}
.product-image img.pdp_img{
max-width: 100%;
}
.product-view .product-img-box .product-image img {
max-width: 100%;
}
.pdp_edit_font_style li a, #pdp_edit_text_style li a {
color: #414141;
font-size: 15px;
}
.pdp_edit_text_font_size {
float: left;
margin: 10px 0;
width: 100%;
}
.pdp_extra_item #pdp_edit_text_size label {
color: #FFFFFF;
float: left;
font-size: 15px;
width: 90px;
}
#pdp_font_size_input {
float: left;
margin: 5px 10px 0 0;
width: 150px;
}
.pdp_edit_text_font_size .label, .pdp_edit_text_line_height .label {
float: left;
font-size: 12px;
min-width: 72px;
padding-right: 0;
white-space: nowrap;
}
#pdp_edit_text_line_height_input {
float: left;
margin: 5px 10px 0 0;
width: 150px;
}
#pdp_font_size_value,#pdp_font_line_height_value {
float: left;
font-size: 12px;
line-height: 18px;
text-align: center;
width: auto;
}
.pdp_edit_text_line_height {
float: left;
margin: 10px 0;
width: 100%;
}
.pdp_edit_font_style li, #pdp_edit_text_style li {
background: none repeat scroll 0 0 rgb(245, 245, 245);
border: 1px solid rgb(204, 204, 204);
border-radius: 0;
color: rgb(0, 0, 0);
cursor: pointer;
display: inline;
float: none;
margin: 0;
padding: 2px;
text-align: center;
width: 20px;
}
.pdp_edit_font_style li:hover a{color:#fff;}
.pdp_edit_font_style li:hover {
background: none repeat scroll 0 0 #80d299;
border-color: #80d299;
color: #ffffff;
}
/* Text Color */
#pdp_color_text {
clear: both;
display: block;
width: 100%;
}
#pdp_color_text .label {
float: left;
font-size: 12px;
line-height: 35px;
min-width: 72px;
padding-right: 15px;
}
#pdp_color_text .pdp_color_list {
float: left;
width: 160px;
}
#font_color {
background: none repeat scroll 0 0 #eeeeee;
cursor: pointer;
display: block;
line-height: 35px;
padding: 0;
text-align: center;
width: 100%;
position:relative;
color:#000;
}
#font_color.showClose:before {
color: #000000;
content: "\f057";
font-family: Fontawesome;
font-size: 18px;
position: absolute;
right: 10px;
top: 0;
}
#font_color_list {
background: none repeat scroll 0 0 #ffffff;
border: 1px solid #eeeeee;
bottom: 50px;
display: block;
float: left;
font-size: 15px;
left: -9999px;
max-height: 146px;
overflow: auto;
padding: 5px 0;
position: absolute;
text-align: center;
transition: all 0.3s ease 0s;
width: 290px;
z-index: 999;
}
#font_color_list.showme {
left: 5px;
}
#font_color_list li {
border: 1px solid #ffffff;
border-radius: 0;
color: #ffffff;
cursor: pointer;
float: left;
font-size: 16px;
line-height: 25px;
margin: 0 0 1px;
overflow: hidden;
padding: 0;
text-align: center;
width: 32px;
}
.itemsssss {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.design-color-image li img {
float: left;
width: 100%;
}
.pdp_opacity_item .label {
float: left;
font-size: 12px;
margin-left: 5px;
min-width: 72px;
}
.font_outline_color #use_shadow {
cursor: pointer;
float: left;
height: 18px;
margin: 5px 5px 0 0;
position: relative;
width: 16px;
}
.font_outline_color .use_shadow label {
float: left;
line-height: 25px;
width: auto;
white-space:nowrap;
}
.font_outline_color label {
float: left;
line-height: 25px;
text-align: left;
width: 50px;
white-space:nowrap;
font-size:12px;
}
#pdp_shadow_item {
background: none repeat scroll 0 0 rgb(238, 238, 238);
border: 1px dotted rgb(128, 210, 153);
border-radius: 0;
display: block;
float: left;
padding: 5px 10px;
width: auto;
max-width:292px;
min-width:142px;
}
.font_outline_color .h-shadow, .font_outline_color .v-shadow, .font_outline_color .blur, .font_outline_color .color {
float: left;
width: 49%;
}
.font_outline_color > div {
float: left;
position: relative;
text-align: center;
}
#font_outline_color {
margin: 0;
}
.pdp_opacity_item {
background: none repeat scroll 0 0 #A87B50;
bottom: 75px;
float: left;
min-height: 40px;
padding: 0 2%;
position: absolute;
width: 100%;
z-index: 50000;
}
.pdp_color_list ul li a {
border: 1px dotted rgba(0, 0, 0,0);
cursor: pointer;
float: left;
font-size: 0;
height: 30px;
overflow: visible;
position: relative;
width: 30px;
}
.pdp_color_list ul li:first-child a {background:transparent!important;}
.pdp_color_list ul li:first-child a:before, .pdp_color_list ul li:first-child a.active:before, .pdp_color_list ul li:first-child a:hover:before {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
border-width: 0 !important;
color: rgb(0, 0, 0) !important;
content: "None" !important;
font-family: Arial !important;
font-size: 11px !important;
left: 2px !important;
line-height: 30px !important;
position: absolute;
top: 0 !important;
width: 100% !important;
z-index: 999;
}
.pdp_color_list ul li a:after{}
#select_font .owl-next, .pdp_color_list .owl-next {
font-size: 15px;
position: absolute;
right: -12px;
top: 22px;
}
#select_font .owl-prev, .pdp_color_list .owl-prev {
font-size: 15px;
left: -12px;
position: absolute;
top: 22px;
}
#pdp_color_item ul li {
float: left;
margin: 2px 2px 2px 0;
width: 32px;
}
.pdp_color_list ul li a.active:before, .pdp_color_list ul li a:hover:before {
background: none repeat scroll 0 0 rgb(255, 255, 255);
border-color: rgb(255, 255, 255);
border-radius: 20px;
border-style: solid;
border-width: 5px;
color: rgb(128, 210, 153);
content: "";
font-family: Fontawesome;
font-size: 10px;
height: 20px;
left: 2px;
line-height: 11px;
margin: 0;
padding: 0;
position: absolute;
top: 4px;
width: 20px;
}
.pdp_design_color li.active:before, .pdp_design_color li:hover:before {
color: #80d299;
content: "\f00c";
font-family: Fontawesome;
font-size: 28px;
height: 11px;
left: 12px;
line-height: 32px;
position: absolute;
top: 8px;
width: 11px;
}
.pdp_color_list ul {
display: block;
float: left;
}
.pdp_buttons {
display: none;
}
.tshirt-size .size_option_0 {
line-height: 80px;
width: 10%;
}
#pdp_design_popup {
position: absolute;
top: 10px;
width: 100%;
z-index: 99999;
text-align:center;
}
#pdp_design_popup .wrapper_pdp {
background: none repeat scroll 0 0 #ffffff;
border-radius: 0;
display: inline-block;
margin: 0;
padding: 0;
position: relative;
width: auto;
z-index: 5000;
min-width:640px;
}
.wrapper_pdp_2 {
position: relative;
}
#pdp_design_popup .farbtastic .overlay {
background: url("https://www.poptents.uk/js/pdp/images/mask.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
left: 47px;
opacity: 1;
position: relative;
top: 47px;
width: 101px;
}
.font_outline_color #use_shadow.active {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: medium none;
height: 17px;
margin: 5px 5px 0 0;
position: relative;
width: 16px;
}
.font_outline_color #use_shadow:before {
border: 1px solid #000000;
content: "";
font-family: fontawesome;
height: 14px;
line-height: 14px;
position: absolute;
text-align: center;
width: 14px;
}
.font_outline_color #use_shadow.active:before {
border: 1px solid #000000;
content: "\f00c";
font-family: fontawesome;
height: 14px;
line-height: 14px;
position: absolute;
text-align: center;
width: 14px;
}
#pdp_design_popup > .overlay {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
height: 100%;
position: fixed;
top: 0;
width: 100%;
z-index: 4999;
}
#edit_item_wrap .item {
border-right: 1px solid #CCCCCC;
color: #6D6E70;
float: left;
text-align: center;
width: 100%;
}
#edit_item_wrap > div {
}
.wrapper_pdp .pdp_add_to_cart {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
float: right;
margin: 0;
padding-bottom: 3px;
padding-top: 3px;
position: absolute;
right: 5px;
text-align: right;
width: 95px;
}
.wrapper_pdp .pdp_add_to_cart a {
background: none repeat scroll 0 0 #E55725;
border: 5px solid #FFFFFF;
border-radius: 10px;
color: #FFFFFF;
cursor: pointer;
float: right;
height: 38px;
padding: 2px 1px 13px;
text-align: center;
text-decoration: none;
}
.pdp_add_to_cart .pi-shopping-cart {
font-size: 30px;
}
#move_to_front label {
background: url("https://www.poptents.uk/js/pdp/images/front.png") no-repeat scroll center 3px rgba(0, 0, 0, 0);
}
#delete_item label, #color_item label, #flip_item label, #edit_text label, #edit_font label, #effects_item label {
font-size: 24px;
padding: 0;
}
.wrapper_pdp ul, .wrapper_pdp ol {
list-style: none outside none;
margin: 0;
padding: 0;
}
#pdp_sides ul{
margin: 5px auto;
width: 90%;
}
.wrap_pdp_design .pdp-btn {
background: none repeat scroll 0 0 #00AEEF;
border-radius: 5px;
color: #FFFFFF;
cursor: pointer;
float: left;
font-weight: bold;
line-height: 30px;
margin: 0 10px;
padding: 0 20px;
}
#design_control .design-color-image h3 span {
font-size: 12px;
font-weight: normal;
padding: 0 5px 0 0;
}
#icon_list li {
text-align: center;
width: 20%;
}
#product-image-wrap-back {
display: none;
}
.cart .item-options label {
float: left;
width: 35px;
}
.cart .item-options p {
margin: 0;
}
#select_image span img {
position: relative;
z-index: 0;
}
.cart .item-options li {
float: left;
width: 100%;
}
.design-btn {
float: left;
}
.cart .item-options span {
float: left;
}
.tab_main.add_text_tab {
}
th.th_link {
position: relative;
float: left;
}
a.th_link {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 99999;
font-size: 0;
}
#cboxTitle a {
background: none repeat scroll 0 0 #4F8100;
border-radius: 10px;
color: #FFFFFF;
padding: 3px 10px;
}
.tshirt-size {
display: none!important;
float: left;
margin: 0 0 20px;
width: 100%;
}
.wrap_pdp_design .save_design {
background: none repeat scroll 0 0 #00AEEF;
border-radius: 20px;
color: #FFFFFF;
float: left;
line-height: 30px;
margin: 0 10px;
padding: 0 20px;
cursor: pointer;
}
.tshirt-size ul li label {
color: #000000;
float: left;
font-size: 15px;
line-height: 30px;
text-align: center;
width: 80px;
}
.tshirt-size ul li input {
float: left;
height: 30px;
margin: 0 30px 0 10px;
text-align: center;
width: 30px;
}
.tshirt-size ul li {
display: none;
float: left;
margin: 5px 0;
position: relative;
width: 100%;
}
.tshirt-size h1 {
background: none repeat scroll 0 0 #FFFFFF;
border-left: 1px solid #CCCCCC;
border-radius: 5px 5px 0 0;
border-right: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
float: left;
font-size: 15px;
line-height: 30px;
margin: 0 0 -1px 15px;
padding: 0 10px;
position: relative;
}
.tshirt-size ul {
border: 1px solid #CCCCCC;
border-radius: 5px 5px 5px 5px;
float: left;
list-style: none outside none;
margin: 0;
padding: 10px 0 0;
width: 94%;
}
#pdp_add_text {
display: none;
}
#add_text:before {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgb(128, 210, 153);
border-image: none;
border-style: solid;
border-width: 8px 9px;
content: "";
height: 0;
left: 40px;
position: absolute;
top: -20px;
width: 0;
display:none;
}
#select_image:before {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgb(128, 210, 153);
border-image: none;
border-style: solid;
border-width: 8px 9px;
content: "";
height: 0;
left: 160px;
position: absolute;
top: -20px;
width: 0;
display:none;
}
.pdp_bottom_action {
background: url("https://www.poptents.uk/js/pdp/images/bg_bottom_action.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
bottom: 0;
float: left;
height: 69px;
left: 0;
margin: 0;
padding: 3px 1%;
position: absolute;
width: 98%;
}
.design-color-image li {
border: 2px solid rgba(0, 0, 0, 0);
border-radius: 100%;
cursor: pointer;
float: left;
height: auto;
margin: 0 5px 5px 0;
min-height: 30px;
width: 30px;
}
#pdp_search_text {
border: medium none;
border-radius: 10px;
float: right;
font-size: 15px;
height: 30px;
margin: 8px 15px 0 10px;
text-indent: 10px;
width: 60%;
}
#design_control .add_text_field {
border: 1px solid #80d299;
display: block;
float: none;
overflow: hidden;
padding: 0 10px 10px;
}
#add_text_input {
border: 1px solid #CCCCCC;
border-radius: 4px;
font-size: 14px;
margin: 10px 0 0;
min-height: 50px;
padding: 5px 2%;
width: 96%;
}
#pdp_info_item {
box-sizing: padding-box;
padding: 0;
position: absolute;
right: 0;
top: 100px;
width: 200px;
}
#pdp_info_item li {
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
box-sizing: border-box;
cursor: pointer;
display: table;
width: 100%;
}
#pdp_info_item li:last-child {
border-bottom: 1px solid #ccc;
}
#pdp_info_item li:hover, #pdp_info_item li.active {
background: none repeat scroll 0 0 #e4e4e4;
}
#pdp_info_item span {
border-right: 1px solid #ccc;
display: table-cell;
padding: 5px 10px;
text-align: center;
vertical-align: middle;
}
#pdp_info_item span.item_size {
width: 50%;
}
#pdp_info_item span.item_info {
padding: 5px 0;
width: 25%;
}
#pdp_info_item .item_info img {
width: 30px;
}
#pdp_info_item label {
float: left;
width: 50px;
}
#add_text_action, #edit_text_action, #add_text_curved_action {
background: #d4171d;
border-radius:0;
color:#fff;
cursor: pointer;
float: none;
font-size: 14px;
font-weight: bold;
line-height: 39px;
margin: 10px auto 0;
padding: 0;
text-align: center;
text-transform: uppercase;
width: 92%;
}
.content_upload {
padding: 20px;
}
#add_text_curved_action {
}
#pdp2_curved_text {
line-height: 25px;
width: 260px;
}
#pdp2_curved_text_radius_value, #pdp2_curved_text_spacing_value {
float: left;
line-height: 22px;
margin: 0 0 0 15px;
text-align: center;
width: 50px;
}
.pdp_curved_text_control label {
width: 90px;
}
#design_control .add_text_field .pdp_text_key {
background: #eee;
float: left;
margin: 15px 0;
width: 100%;
display:none;
}
.add_text_field label {
color: #000000;
float: left;
font-size: 14px;
padding: 5px 15px;
/* text-transform: uppercase; */
}
#design_control .add_text_field .pdp_text_key .pdp_text_tag {
display: inline;
float: left;
padding: 5px 0;
}
#design_control .add_text_field .pdp_text_key .pdp_text_tag li {
color: #000000;
cursor: pointer;
display: inline;
float: left;
font-size: 14px;
padding: 0 5px;
text-decoration: underline;
}
#design_control .add_text_field .pdp_text_list {
float: left;
width: 100%;
display:none;
}
#design_control .add_text_field .pdp_text_list ul {
display: block;
float: left;
margin-bottom: 15px;
max-height: 200px;
overflow: auto;
width: 100%;
}
#design_control .add_text_field .pdp_text_list ul li {
background: none repeat scroll 0 0 #FEFEFE;
border: 1px solid #ECECEC;
color: #000000;
cursor: pointer;
float: left;
font-size: 14px;
margin: 3px 0;
padding: 2px 0 2px 15px;
width: 95%;
}
#design_control .add_text_field .pdp_text_list ul li:hover {
background: none repeat scroll 0 0 #80d299;
border-color: #80d299;
color: #fff;
}
.color_content {
display: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
z-index: 5001;
}
.color_content .inlay_div {
background: none repeat scroll 0 0 #111111;
cursor: no-drop;
height: 100%;
opacity: 0.1;
position: fixed;
top: 0;
width: 100%;
}
.color_content_wrap label {
float: left;
font-size: 18px;
line-height: 47px;
padding: 0 10px;
}
.color_content_wrap input {
border: 1px solid #111111;
border-radius: 4px;
float: left;
height: 25px;
margin: 10px 10px 0 0;
text-indent: 10px;
text-transform: uppercase;
width: 100px;
}
.color_content .color_content_wrap .selected_color {
margin: 10px 0 0 10px;
opacity: 1;
}
.color_content .color_content_wrap {
background: none repeat scroll 0 0 #C2C2C2;
border-radius: 10px;
left: 1173px;
margin: 0 auto;
position: absolute;
top: 200px;
width: 327px;
}
.color_content .color_content_wrap ul.pdp_color_ul {
float: left;
list-style: none outside none;
margin: 10px;
border-left: 1px solid #E6E6E6;
border-top: 1px solid #E6E6E6;
}
.color_content .color_content_wrap ul li {
border-bottom: 1px solid #E6E6E6;
border-right: 1px solid #E6E6E6;
display: inline-block;
float: left;
}
.color_content .color_content_wrap ul li.last {
border: medium none;
float: right;
}
.color_content .color_content_wrap .pdp_color_act li {
border: none;
}
.color_content .color_content_wrap ul li.last a {
background: none repeat scroll 0 0 #00AEEF;
border: 1px solid #00AEEF;
border-radius: 10px;
color: #FFFFFF;
font-size: 20px;
height: 35px;
line-height: 35px;
text-align: center;
text-decoration: none;
width: 100px;
}
.color_content .color_content_wrap ul li:hover a {
opacity: 1;
}
.color_content .color_content_wrap ul li a.act {
border: 1px dashed #FF0000;
opacity: 1;
}
.color_content .color_content_wrap ul li a {
border: 1px solid;
border-radius: 100%;
cursor: pointer;
float: left;
font-size: 0;
height: 25px;
margin: 3px;
opacity: 0.8;
width: 25px;
}
.design-color-image li.active {
border: 2px solid #D64BF2;
}
.design-color-image {
float: left;
width: 100%;
}
.design-color-image ul {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
float: left;
}
#edit_item_wrap {
display: block;
float: left;
margin: 10px 0 5px;
position: relative;
width: 100%;
}
#edit_item_wrap label {
cursor: pointer;
float: left;
font-size: 24px;
height: 26px;
left: 0;
margin: 0;
position: relative;
text-align: center;
top: 0;
width: 100%;
}
#move_item {
background: url("https://www.poptents.uk/js/pdp/images/align.png") no-repeat scroll 0 0 transparent;
float: left;
height: 50px;
margin: 10px 15px;
overflow: hidden;
position: relative;
width: 50px;
}
#move_item span {
position: absolute;
cursor: pointer;
width: 13px;
height: 13px;
font-size: 0;
float: left;
}
#move_item span.m_tl:hover {
background: url(https://www.poptents.uk/js/pdp/images/top_left.png) no-repeat;
}
#move_item span.m_tr:hover {
background: url(https://www.poptents.uk/js/pdp/images/top_right.png) no-repeat;
}
#move_item span.m_bl:hover {
background: url(https://www.poptents.uk/js/pdp/images/bottom_left.png) no-repeat;
}
#move_item span.m_br:hover {
background: url(https://www.poptents.uk/js/pdp/images/bottom_right.png) no-repeat;
}
#move_item span.m_cl:hover, #move_item span.m_cr:hover {
background: url(https://www.poptents.uk/js/pdp/images/center_right.png) no-repeat;
width: 7px;
}
#move_item span.m_tc:hover, #move_item span.m_bc:hover {
background: url(https://www.poptents.uk/js/pdp/images/top_center.png) no-repeat;
height: 7px;
}
#move_to_front label {
background: url("https://www.poptents.uk/js/pdp/images/front.png") no-repeat scroll center 3px rgba(0, 0, 0, 0);
}
#move_to_front:hover label, #move_to_front.active label {
background-position: center -49px;
}
#move_to_back label {
background: url("https://www.poptents.uk/js/pdp/images/back.png") no-repeat scroll center 3px rgba(0, 0, 0, 0);
}
#move_to_back:hover label, #move_to_back.active label {
background-position: center -49px;
}
#shadow_item:hover label, #shadow_item.active label {
background-position: center -49px;
}
#shadow_item label {
background: url("https://www.poptents.uk/js/pdp/images/shadow.png") no-repeat scroll center 3px rgba(0, 0, 0, 0);
}
#opacity_item:hover label, #opacity_item.active label {
background-position: center -51px;
}
#opacity_item label {
background: url("https://www.poptents.uk/js/pdp/images/opacity.png") no-repeat scroll center 1px rgba(0, 0, 0, 0);
}
#delete_item label, #color_item label, #flip_item label, #edit_text label, #edit_font label, #effects_item label{
font-size: 24px;
padding: 0;
}
#delete_item label:hover, #color_item label:hover, #flip_item label:hover, #edit_text label:hover, #edit_font label:hover, #effects_item label:hover {
color: #e55725;
}
#edit_item_wrap .owl-wrapper .owl-item span {
cursor: pointer;
float: left;
font-size: 15px;
text-align: center;
width: 100%;
}
#edit_item_wrap .item:hover {
color: #e55725;
}
#pdp_edit_text {
margin: 10px 5px;
padding: 0;
}
#pdp_edit_text_tab {
/* position: absolute;
top: -30px; */
}
#pdp_edit_text_tab a.active {
background: none repeat scroll 0 0 #A87B50;
color: #FFFFFF;
}
#pdp_edit_text_tab a {
background: none repeat scroll 0 0 #F2C35E;
border-radius: 5px 5px 0 0;
color: #111111;
cursor: pointer;
float: left;
font-size: 15px;
line-height: 30px;
margin: 0 1px;
padding: 0 15px;
text-decoration: none;
}
#pdp_edit_text_content {
height: 55px;
}
#pdp_edit_text_input {
border: 1px solid #eeeeee;
border-radius: 0;
float: none;
font-size: 12px;
height: auto;
line-height: 15px;
margin: 0 auto;
min-height: 30px;
overflow: auto;
padding: 5px;
resize: vertical;
width: 280px;
}
#font_menu.showClose{
}
#font_menu.showClose:before {
color: #80d299;
/* content: "\f057"; */
font-family: Fontawesome;
font-size: 25px;
position: absolute;
right: 10px;
top: 0px;
}
#font_menu {
border: 1px solid #eeeeee;
color: #80d299;
display: block;
font-size: 15px;
font-weight: bold;
margin: 5px 0;
padding: 8px 0;
text-align: center;
width: 100%;
position:relative;
cursor:pointer;
clear:both;
transition: all 0.3s ease 0s;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f4f4f4 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f4f4f4)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f4f4f4 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f4f4f4 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f4f4f4 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#f4f4f4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f4f4',GradientType=0 ); /* IE6-9 */
}
#select_font {
background: none repeat scroll 0 0 #ffffff;
border: 1px solid #eeeeee;
display: none;
float: left;
font-size: 15px;
left: -9999px;
max-height: 300px;
overflow: auto;
padding: 5px 0;
position: absolute;
text-align: center;
top: 105px;
transition: all 0.3s ease 0s;
width: 290px;
z-index: 9999;
}
#select_font.showme {
display: block;
left: auto;
right: 300px;
top: 55px;
}
#edit_item_wrap .item {
border-right: 3px solid #CCCCCC;
color: #6D6E70;
float: left;
opacity: 0.5;
text-align: center;
width: 100%;
}
#edit_item_wrap .owl-buttons .awesome {position: absolute; font-size: 15px;}
#edit_item_wrap .owl-buttons .owl-prev {
left: 0;
top: 15px;
}
#edit_item_wrap .owl-buttons .owl-next {
right: 0;
top: 15px;
}
#move_item span.m_tl {
left: 0;
top: 0;
}
#move_item span.m_tc {
height: 13px;
left: 18px;
width: 15px;
}
#move_item span.m_tr {
right: 0;
}
#move_item span.m_cl {
height: 15px;
top: 18px;
width: 13px;
}
#move_item span.m_cc {
height: 24px;
left: 13px;
top: 13px;
width: 24px;
}
#move_item span.m_cr {
height: 15px;
right: 0;
top: 18px;
width: 13px;
}
#move_item span.m_bl {
bottom: 0;
}
#move_item span.m_bc {
bottom: 0;
height: 13px;
left: 18px;
width: 15px;
}
#move_item span.m_br {
bottom: 0;
right: 0;
}
#flip_items {
float: left;
width: 100%;
}
#pdp_flip_x label {
line-height: 40px;
}
#pdp_flip_y label{
line-height: 40px;
}
#pdp_flip_x a {
background: url("https://www.poptents.uk/js/pdp/images/flips-01.png") no-repeat scroll -53px 0 #FFFFFF;
border-radius: 5px;
cursor: pointer;
float: left;
font-size: 0;
height: 40px;
margin: 0;
width: 53px;
}
#pdp_opacity_input-slider {
float: left;
margin-top: 7px;
}
#pdp_flip_y a {
background: url("https://www.poptents.uk/js/pdp/images/flips-01.png") no-repeat scroll 0 0 #FFFFFF;
border-radius: 5px;
cursor: pointer;
float: left;
font-size: 0;
height: 40px;
margin: 0 0 0 5px;
width: 53px;
}
.box_font_size {
float: left;
width: 80px;
}
.product-img-box .color_att {
background: none repeat scroll 0 0 #F2F2F2;
bottom: -50px;
float: left;
list-style: none outside none;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
z-index: 99;
}
#pdp_sides {
border: 1px solid #CCCCCC;
border-radius: 10px;
float: left;
margin: 10px 0 0;
padding: 0;
width: 150px;
}
#pdp_sides ul li {
border: 1px solid rgba(0, 0, 0, 0);
cursor: pointer;
float: left;
text-align: center;
margin-bottom: 5px;
width: 100%;
}
#pdp_sides ul li.active {
border: 1px solid red;
}
#pdp_sides li label {
display: none;
}
#pdp_sides ul li img{
}
.loading_initializing {
background: none repeat scroll 0 0 #FFFFFF;
cursor: wait;
height: 100%;
opacity: 0.7;
position: fixed;
width: 100%;
z-index: 999;
}
.loading_initializing .process_wrap {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #111111;
border-radius: 4px 4px 4px 4px;
height: 15px;
margin: 0 0 0 50px;
overflow: hidden;
width: 300px;
}
.loading_initializing .process_wrap span {
background: none repeat scroll 0 0 #23E509;
float: left;
height: 15px;
width: 0%;
}
.loading_initializing .p_wrap {
background: none repeat scroll 0 0 #000000;
border-radius: 10px 10px 10px 10px;
color: red;
font-size: 50px;
left: 38%;
position: absolute;
top: 40%;
width: 400px;
}
.loading_initializing p span {
display: block;
}
.product-img-box .color_att li.ori_img {
border: 1px dotted;
}
.product-img-box .color_att li {
border: 1px solid transparent;
cursor: pointer;
display: block;
float: left;
height: 30px;
margin: 0 5px 0 0;
width: 30px;
}
.color_wrap {
border: 1px solid #CCCCCC;
border-radius: 10px;
float: left;
margin: 10px 0 0;
padding: 10px;
width: 350px;
}
.product-img-box .color_att li a {
border: 1px solid transparent;
cursor: pointer;
display: block;
float: left;
font-size: 0;
height: 20px;
width: 20px;
}
.t_shirt.tab_main {
border-left: 1px solid #CFCFCF;
border-radius: 5px 0 0 5px;
}
.add_text_tab.tab_main {
border-radius: 0 5px 5px 0;
}
.tab_main.active {
background: url("https://www.poptents.uk/js/pdp/images/bg-tab-act.png") repeat-x scroll 0 0 transparent;
}
.product-img-box .color_att li.cact a {
border: 1px solid red;
}
#tab_control ul {
list-style: none outside none;
margin: 0 0 0 3%;
padding: 0;
}
.control_text_img_tab {
float: left;
left: 10px;
position: relative;
top: 31px;
}
.img_result {
position: relative;
}
.c_items img {
}
#list_color ul {
float: left;
list-style: none outside none;
margin: 0;
padding: 0;
}
.product-info span.price, span.product-title {
display: block;
font-size: 25px;
}
#list_color ul li {
border: 2px solid rgba(0, 0, 0, 0);
cursor: pointer;
float: left;
padding: 5px;
margin: 5px 10px 5px 0;
min-height: 50px;
overflow: hidden;
width: 50px;
}
#list_color ul li.active {
border: 2px solid #000000;
border-radius: 10px;
}
.wrapper_pdp .product-img-box {
float: left;
margin: 0;
/* max-width: 1000px; */
/* min-width: 700px; */
min-height: 700px;
padding: 0;
position: relative;
text-align: center;
width: 100%;
}
.wrapper_pdp .product-image {
float: left;
padding: 0 0 5px;
position: relative;
margin: 0;
}
.wrapper_pdp .product-img-box #rotate-180 {
position: absolute;
right: 0;
top: 0;
z-index: 11;
}
.wrapper_pdp .product-img-box #rotate-180 a {
background: url("https://www.poptents.uk/js/pdp/css/images/rotate.png") no-repeat scroll 10px center #FFFCFC;
border-radius: 0 0 0 15px;
cursor: pointer;
float: left;
font-size: 0;
height: 23px;
padding: 5px 10px;
text-decoration: none;
width: 59px;
}
#design_control .control_tab .control_tab_wrap {
float: left;
padding: 0;
width: 100%;
}
.control_tab a {
color: rgb(65, 65, 66);
cursor: pointer;
display: block;
font-family: arial;
font-size: 15px;
font-weight: normal;
line-height: 45px;
padding: 0 10px;
text-decoration: none;
text-transform: capitalize;
border-top:solid 5px #f4f4f6;
}
.pdp_design.tab_main {
border-left: 1px solid #D7D7D7;
border-radius: 5px 0 0 5px;
}
.wrapper_pdp #design_control .tab_content {
background: none repeat scroll 0 0 rgb(255, 255, 255);
border-bottom: 1px solid rgb(128, 210, 153);
border-left: 1px solid rgb(128, 210, 153);
border-top: 5px solid rgb(128, 210, 153);
display: block !important;
float: left;
margin: 0;
padding: 0;
position: absolute;
top: 45px;
/*width: 400px;*/
width:250px;
z-index: 9999;
left:10px;
}
#add_text{
left:0;
}
#design_control .control_tab .control_tab_wrap {
float: left;
padding: 0;
position:relative;
width: 100%;
}
.wrapper_pdp #design_control #select_image {
/*border-right: 1px solid #80d299;*/
border:solid 1px #ccc !important;
left: 10px;
margin: 0;
padding: 0;
position: absolute;
top: 33%;
/*width: 400px;*/
width: 250px;
}
.pdp_close {
margin-top: 10px;
position: absolute;
right: 0;
z-index: 999;
}
#choose_products, #rotate-180, .add_text, .add_artwork, .wall_text, .roof_text, .valance_text, #save_design {
/*border-right: 1px solid #e8e8e9;*/
color: #59585B;
float: left;
padding-left: 0px;
padding-right: 0px;
text-decoration: none;
}
.add_text > a:hover, .add_artwork > a:hover, .control_tab a:hover {
color: #ed4174;
}
#pdp_share, #save_design,#pdp2_zoom, #pdp3_zoom, #download_image {
float: right;
}
#save_design a:before {
/* border-top: 2px solid #fff; */
content: "";
height: 0;
left: 0;
position: absolute;
top: 19px;
width: 100%;
}
#save_design {
background: none repeat scroll 0 0 #39b811;
/*border-right: 0 solid #fff;*/
color: #fff;
padding: 0 20px;
position: relative;
}
#save_design a {
color: #fff;
cursor: pointer;
line-height: 45px;
position: relative;
border-top:solid 5px #39b811;
}
#save_design a .pi {
margin-left: 0;
padding-left: 0;
}
#pdp_share {
cursor: help;
padding-left: 0px;
padding-right: 0px;
position: relative;
}
#pdp2_zoom {
cursor: help;
padding-left: 0px;
padding-right: 0px;
position: relative;
}
/* #pdp_question:after {
content: "GUIDE";
font-size: 16px;
height: 45px;
position: absolute;
right: 15px;
top: 9px;
} */
.pdp2_close {
background: none repeat scroll 0 0 transparent;
border: 1px solid #fff;
color: #000000;
cursor: pointer;
font-size: 25px;
font-weight: lighter;
height: 30px;
line-height: 1;
padding: 0;
position: absolute;
right: 28px;
top: 7px;
width: 30px;
z-index: 9999;
}
.pdp2_close:before {
color: #fff;
content: "\f00d";
font-family: Fontawesome;
font-size: 25px;
font-weight: normal;
position: absolute;
right: 5px;
top: 3px;
}
.content_designs ul#icon_list {
float: left;
margin: 20px 0 20px 2%;
max-height: 275px;
/* min-height: 150px;*/
min-height: 74px;
overflow: auto;
padding: 0;
width: 96%;
}
.wrapper_pdp .content_designs .add-more {
float: left;
text-align: center;
width: 100%;
}
.wrapper_pdp .content_designs .add-more button {
background: #d4171d;
border: medium none;
border-radius: 0;
color: #fff;
cursor: pointer;
font-size: 12px;
font-weight: bold;
padding: 5px 15px;
}
.content_designs {
float: left;
position: relative;
width: 100%;
}
.content_designs span.loading-img {
background: url("https://www.poptents.uk/js/pdp/images/loading.gif") no-repeat scroll center center #FFFFFF;
height: 100%;
left: 0;
opacity: 0.8;
position: absolute;
top: 0;
width: 100%;
}
#lists_img_upload span div.loading-img {
background: url("https://www.poptents.uk/js/pdp/images/loading.gif") no-repeat scroll center center #FFFFFF;
height: 100%;
left: 0;
opacity: 0.8;
top: 0;
width: 100%;
}
.content_designs #image_category_list {
background: none repeat scroll 0 0 #ffffff;
border: 1px solid #dddddd;
display: none;
overflow: hidden;
position: absolute;
right: 28px;
top: 40px;
width: 235px;
z-index: 999;
left:7px;
}
.content_facebook {
padding: 10px 20px;
}
.content_facebook #fb-auth {
clear: both;
width: 100%;
}
#user-info{width:100%;}
.content_facebook #fb_album {
height: 30px;
line-height: 30px;
width: 100%;
}
.content_designs #image_category_list li {
background: none repeat scroll 0 0 rgb(255, 255, 255);
cursor: pointer;
display: block;
float: none;
font-size: 12px;
line-height: 30px;
margin: 0;
padding: 0 0 0 10px;
text-align: left;
width: auto;
}
.content_designs #image_category_list li:hover {
background: none repeat scroll 0 0 #dddddd;
color: #000000;
}
.add_to_box .add-to-cart .btn-cart {
background: url("https://www.poptents.uk/js/pdp/images/add_to_cart.png") no-repeat scroll 0 0 transparent;
border: medium none;
cursor: pointer;
display: block;
float: right;
font-size: 0;
height: 64px;
margin: 0 20px 0 0;
width: 152px;
}
.add_to_box .price {
color: #A02566;
float: right;
font-size: 24px;
line-height: 64px;
padding: 0 10px 0 0;
}
.add_to_box .add-to-cart {
float: right;
}
.content_designs #image_category_list .active {
background: none repeat scroll 0 0 #3399cc;
color: #ffffff;
}
.wrap_pdp_design {
float: left;
padding: 0px;
position: relative;
text-align: left;
width: 100%;
}
.pdp_add_text_wrap {
border: 1px solid #CCCCCC;
margin: 0;
padding: 10px;
}
.tab_main a {
color: #333333;
font-size: 16px;
text-decoration: none;
}
#design_control h3, #design_control .pdp_text_title {
background: none repeat scroll 0 0 #ddd;
border: medium none;
color: #000000;
font-size: 14px;
font-weight: bold;
height: 45px;
line-height: 45px;
margin: 0;
text-indent: 10px;
width: 100%;
text-transform:none;
}
#design_control .pdp_text_title, #design_control .photo-art-title{background:#80D299;color:#fff; }
#design_control h3 span, #design_control .pdp_text_title span {
cursor: pointer;
float: right;
font-size: 25px;
padding: 0 5px 0 0;
}
.tab_main {
background: url("https://www.poptents.uk/js/pdp/images/bg-tab.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
border-right: 1px solid #D7D7D7;
cursor: pointer;
display: block;
float: left;
height: 44px;
line-height: 44px;
padding: 0 18px;
position: relative;
text-align: center;
width: 90px;
}
#list_color {
padding: 0 0 10px 0;
float: left;
width: 100%;
}
#design_control {
background: none repeat scroll 0 0 #f4f4f6;
clear: both;
float: left;
padding: 0;
width: 100%;
/*border-top:solid 1px #f4f4f6;
border-bottom:solid 1px #f4f4f6;*/
margin:0 0 0 0;
}
.content_upload span {
float: left;
}
#select_font li {
background: none repeat scroll 0 0 #f5f5f5;
border: 2px solid #ffffff;
border-radius: 2px;
cursor: pointer;
float: left;
font-size: 16px;
line-height: 25px;
margin: 0 0 0 1%;
overflow: hidden;
padding: 0;
text-align: center;
width: 47%;
}
#select_font_span {
background: url("https://www.poptents.uk/js/pdp/css/images/bg-font-span.png") no-repeat scroll 95% center transparent;
border: 1px solid #CCCCCC;
float: left;
font-family: Arial;
font-size: 14px;
height: 30px;
line-height: 30px;
padding: 0 0 0 10px;
width: 150px;
}
#select_font li:hover, #select_font li.active {
background: none repeat scroll 0 0 #80d299;
color: #ffffff;
}
.wrap_pdp_design .add_to_box {
display: none;
float: left;
padding: 25px 0;
width: 100%;
}
#add_text_input {
font-size: 14px;
height: 60px;
padding: 5px 2%;
width: 95%;
}
.wrapper_pdp .product-title:before {
color: #fff;
content: "Design: ";
font-size: 18px;
/* height: 35px; */
left: 10px;
line-height: 19px;
position: absolute;
top: 12px;
}
.wrapper_pdp .product-title {
background: none repeat scroll 0 0 #d4171d;
color: #fff;
float: none;
font-size: 18px;
font-weight: lighter;
/* height: 35px; */
line-height: 35px;
margin: 0;
padding: 5px 10px 5px 80px;
text-align: left;
text-transform: none;
width: auto;
}
#change_text_type a.active {
background-color: #9E9C9E!important;
}
.wrapper_pdp .product-info {
float: right;
margin: 20px 0 0;
padding: 0;
width: 100%;
}
#change_text_type ul {
list-style: none outside none;
padding: 0;
}
#product-image-wrap .item {
top: 70px;
left: 58px;
}
#product-image-wrap .item.text-image {
top: 150px;
left: 58px;
}
#change_text_type li a {
float: left;
font-size: 0;
height: 18px;
padding: 0 0 0 4px;
width: 18px;
cursor: pointer;
}
#change_text_type li a.bold {
background: url("https://www.poptents.uk/js/pdp/images/text_icons/Bold.png") no-repeat scroll 3px 0 transparent;
}
#change_text_type li a.italic {
background: url("https://www.poptents.uk/js/pdp/images/text_icons/Italic.png") no-repeat scroll 3px 0 transparent;
}
#change_text_type li a.underline {
background: url("https://www.poptents.uk/js/pdp/images/text_icons/Underline.png") no-repeat scroll 3px 0 transparent;
}
#change_text_type li a.align_left {
background: url("https://www.poptents.uk/js/pdp/images/text_icons/AlignLeft.png") no-repeat scroll 3px 0 transparent;
}
#change_text_type li a.align_center {
background: url("https://www.poptents.uk/js/pdp/images/text_icons/AlignCenter.png") no-repeat scroll 3px 0 transparent;
}
#change_text_type li a.align_right {
background: url("https://www.poptents.uk/js/pdp/images/text_icons/AlignRight.png") no-repeat scroll 3px 0 transparent;
}
#change_text_type li a.align_justify {
background: url("https://www.poptents.uk/js/pdp/images/text_icons/Justify.png") no-repeat scroll 3px 0 transparent;
}
.wrap_inlay {
/*border: 1px dashed transparent;*/
display: none;
overflow: hidden;
position: absolute;
z-index: 11;
}
#product-image-wrap:hover .wrap_inlay {
/*border: 1px dotted black;*/
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.wrap_inlay.act2 {
border: 1px dashed orange;
}
.add_text_field .box_text {
float: left;
padding: 0 20px 0 0;
position: relative;
width: 150px;
}
#change_text_type {
float: left;
width: 100%;
margin: 10px 0;
}
#change_text_type li {
border: 1px solid #7E7E7E;
border-radius: 2px 2px 2px 2px;
float: left;
margin: 0 2px;
text-align: center;
}
#select_image #choose_type_design li{
width: 100%;
margin: 0 0 10px;
}
#select_image #choose_type_design li label {
font-size: 16px;
line-height: 16px;
margin: 0 0 0 5px;
}
#select_image #choose_type_design li input {
float: left;
}
#lists_img_upload {
float: left;
width: 100%;
position: relative;
padding: 10px 0;
}
#lists_img_upload span {
cursor: pointer;
float: left;
height: 69px;
max-height: 120px;
overflow: hidden;
padding: 1%;
width: 33%;
}
.design-btn .create-sample-btn {
background: none repeat scroll 0 0 #00AEEF;
color: #FFFFFF;
cursor: pointer;
float: left;
font-weight: bold;
line-height: 21px;
margin: 0 5px;
padding: 0 6px;
}
.add_text_field .box_size {
float: left;
width: 80px;
padding: 0 20px 0 0;
}
.add_text_field .box_color {
float: left;
margin: 0 0 0 40px;
width: 100px;
}
#select_font_size {
font-size: 15px;
height: 30px;
margin: 0;
width: 30px;
text-align: center;
}
.add_text_field.edit_form #add_text_action {
display: none;
}
.image_item canvas {
width: 100%;
height: 100%;
}
#list_color li img {
width: 100%;
}
.font_outline_color > div {
float: left;
position: relative;
text-align: center;
width: 25%;
}
.font_outline_color input {
border: medium none;
float: left;
height: 25px;
text-align: center;
text-transform: uppercase;
width: 75px;
}
#font_outline_colorpicker {
background: none repeat scroll 0 0 #fff;
display: none;
left: -146px;
position: absolute;
top: -163px;
z-index: 9999999;
}
.font_outline_color .next_t {
background: url("https://www.poptents.uk/js/pdp/css/images/next_t.png") no-repeat scroll center center transparent;
cursor: pointer;
bottom: 0;
float: right;
font-size: 0;
height: 30px;
position: absolute;
right: 8px;
width: 13px;
}
.select_font_size .next_t {
background: url("https://www.poptents.uk/js/pdp/css/images/next_t.png") no-repeat scroll center center transparent;
cursor: pointer;
bottom: 0;
float: right;
font-size: 0;
height: 30px;
position: absolute;
right: 0;
width: 13px;
}
.tshirt-size .next_t {
background: url("https://www.poptents.uk/js/pdp/css/images/next_t.png") no-repeat scroll center center transparent;
cursor: pointer;
bottom: 0;
float: right;
font-size: 0;
height: 30px;
position: absolute;
right: 180px;
width: 13px;
}
.select_font_size {
float: left;
position: relative;
text-align: center;
width: 65px;
}
.font_outline_color .prev_t {
background: url("https://www.poptents.uk/js/pdp/css/images/prev_t.png") no-repeat scroll center center transparent;
bottom: 0;
font-size: 0;
cursor: pointer;
height: 30px;
left: 8px;
position: absolute;
width: 13px;
}
.tshirt-size .prev_t {
background: url("https://www.poptents.uk/js/pdp/css/images/prev_t.png") no-repeat scroll center center transparent;
bottom: 0;
font-size: 0;
cursor: pointer;
height: 30px;
left: 70px;
position: absolute;
width: 13px;
}
.select_font_size .prev_t {
background: url("https://www.poptents.uk/js/pdp/css/images/prev_t.png") no-repeat scroll center center transparent;
bottom: 0;
font-size: 0;
cursor: pointer;
height: 30px;
left: 0;
position: absolute;
width: 13px;
}
.font_outline_color > div.use_shadow {
width: 100%;
}
.font_outline_color #use_shadow {
float: left;
}
.font_outline_color .use_shadow label {
float: left;
font-size: 12px;
line-height: 25px;
width: auto;
}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block; }
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 9px; height: 9px; right: -5px; bottom: -5px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}
.text-swatches > li {
display: inline-block;
}
.text-swatches > li > a {
display: block;
padding: 1px;
border: 2px solid transparent;
}
.text-swatches > li > a.active {
border: 2px solid #333333;
}
.text-swatches > li img {
height: 38px;
cursor: pointer;
}
.adminhtml-catalog-product-edit #t-shirt-type, .adminhtml-catalog-product-edit #select_phone_type h3.product-type-title {
display: block;
}
#t-shirt-type {
border: 1px solid #CCCCCC;
border-radius: 4px 4px 4px 4px;
padding: 4px;
width: 220px;
display: none;
}
#design_control .pdp_side_title {
background: none repeat scroll 0 0 #80d299;
border: medium none;
color: #ffffff;
font-size: 14px;
font-weight: bold;
height: 50px;
line-height: 50px;
margin: 0;
text-align: left;
text-indent: 10px;
width: 100%;
}
#design_control .pdp_side_title span {
cursor: pointer;
float: right;
font-size: 25px;
margin: 12px 3px 0 0;
padding: 0;
}
.design-color-image h3 {
}
#select_phone_type h3.product-type-title {
display: none;
}
.product-img-box .inline1 {
background: none repeat scroll 0 0 #4F8100;
border-radius: 15px;
color: #FFFFFF;
padding: 5px 10px;
text-decoration: none;
}
.custom_link {
float: left;
margin: 10px 0;
width: 100%;
}
.custom_link a, .pdp_link {
background: none repeat scroll 0 0 #00AEEF;
border-radius: 15px;
color: #FFFFFF;
font-weight: bold;
padding: 8px 10px;
text-decoration: none;
}
#select_image img {
height: auto;
margin: 4%;
width: 92%;
transition: all 0.3s ease 0s;
}
#select_image li a:hover img {
transform: scale(1.8);
}
#select_image #photos_album li {
cursor: pointer;
height: 100px;
margin: 0 0 5px;
overflow: hidden;
padding: 1%;
width: 31.333%;
}
#select_image li {
float: left;
margin: 0;
}
#select_image li a {
border: 1px solid #e0e0e0;
cursor: pointer;
float: left;
height: 69px;
margin: 0 5% 8%;
overflow: hidden;
text-align: center;
vertical-align: middle;
width: 90%;
}
.ui-wrapper {
overflow: visible !important;}
.ui-resizable-handle {
background: url("https://www.poptents.uk/js/pdp/images/resize_handle.png") no-repeat scroll center center rgba(255, 255, 255, 0.3);
border: 1px solid #F1F1F1;
border-radius: 5px 5px 5px 5px;
bottom: -10px;
height: 10px;
padding: 5px;
right: -10px;
width: 10px;
z-index: 2;
}
.ui-rotatable-handle {
background: url("https://www.poptents.uk/js/pdp/images/rotate.png") no-repeat scroll center center rgba(255, 255, 255, 0.3);
border: 1px solid #FFFFFF;
border-radius: 5px 5px 5px 5px;
cursor: pointer;
height: 10px;
left: auto !important;
margin: 0;
padding: 5px;
position: absolute;
right: -10px !important;
top: -10px !important;
width: 10px;
}
.ui-rotatable-handle.clone {
visibility: hidden;}
#select_images img {
cursor: pointer;
padding: 5px;
width: 55px;
}
.clear {
clear: both;
}
.text-image {
position: absolute;
float: left;
}
.text-image p {
margin: 0;
}
#select_images span {
border: 1px solid #CCCCCC;
float: left;
height: 65px;
margin: 0 5px;
overflow: hidden;
width: 65px;
}
.image_item {
width: 100px;
left: 0;
position: absolute;
top: 0;
}
.image_item img {
}
#product-image-wrap {
border: medium none;
display: block;
float: left;
margin-bottom: 10px;
margin-left: 40px !important;
margin-top: 10px;
overflow: hidden;
/**padding: 10px;**/
position: relative;
left:475px;
}
#wrap_inlay canvas {
display: block;
}
.tab_design_image {
float: left;
margin: 20px 0 0 16px;
width: 100%;
}
.content_tab {
float: left;
padding: 10px 0 15px;
text-align: center;
/*width: auto;*/
width:250px;
overflow:hidden;
}
.content_tab input[type=file]{ width:215px; overflow:hidden;}
.tab_design_image a {
background: none repeat scroll 0 0 #f4f4f6;
border: medium none;
color: #333333;
cursor: pointer;
float: left;
font-size: 14px;
font-weight: normal;
margin: 0 2px -1px;
padding: 5px 25px;
position: relative;
text-decoration: none;
border:solid 2px #bcbcbc;
}
.tab_design_image a:hover,.control_tab a:hover {
text-decoration: none;
}
.tab_design_image a.active {
background: none repeat scroll 0 0 #80d299;
color: #fff;
}
.content_designs .design_label {
background: none repeat scroll 0 0 #f5f5f5;
border: 1px solid #d7d7d7;
border-radius: 4px;
clear: both;
color: #000000;
cursor: pointer;
float: left;
font-size: 12px;
font-weight: normal;
margin: 0 0 0 3%;
padding: 10px 2%;
position: relative;
text-align: left;
text-transform: uppercase;
width: 90%;
}
.content_designs .design_label .pdp_selected_category {
margin: 0 10px;
padding: 0 0 0 10px;
text-transform: capitalize;
}
.design_label .pdp_parent {
float: right;
margin: 7px 0 0;
}
#main_image {
max-height: 100%;
max-width: 100%;
}
#remove_act {
display: none;
height: 100%;
position: absolute;
width: 100%;
z-index: 10;
}
.ui-close {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3);
border: 1px solid #F1F1F1;
border-radius: 3px 3px 3px 3px;
bottom: -10px;
color: maroon;
cursor: pointer;
font-family: arial;
font-size: 10px;
font-weight: bold;
height: 10px;
left: -10px;
line-height: 10px;
padding: 5px;
position: absolute;
text-align: center;
width: 10px;
z-index: 100000;
}
#product-image-wrap .text-image img {
width: 100%;
}
.ui-rotatable-handle, .ui-resizable-handle, .ui-close {
display: none!important;
}
.item.active .ui-rotatable-handle, .item.active .ui-resizable-handle, .item.active .ui-close {
display: block!important;
}
/**************** Share Button Group**************/
.pdp_share_buttons {
background: none repeat scroll 0 0 rgb(255, 255, 255);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
display: none;
height: 50px;
opacity: 0.5;
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
position: absolute;
right: 2px;
top: 108%;
z-index: 999;
}
.pdp_share_buttons .social-bottom {
float: left;
position: relative;
width: 275px;
}
.pdp_share_buttons div.overlay-btn {
background: none repeat scroll 0 0 #888888;
height: 33px;
opacity: 0.5;
position: absolute;
right: 3px;
text-align: center;
top: 0;
width: 140px;
}
.pdp_share_buttons div.overlay-btn.send-back {
z-index : -100;
}
.pdp_share_buttons #save_before_share {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
color: #000000;
cursor: pointer;
float: left;
font-weight: normal;
padding: 0;
position: relative;
text-align: center;
top: 0;
width: auto;
line-height: 30px;
margin: 0 10px;
z-index: 2000;
}
.pdp_share_buttons .addthis_toolbox {
float: right;
width: 145px;
}
.nodisplay {
display: none;
}
.actions .pdp_link {
background: none repeat scroll 0 0 #00AEEF;
color: #FFFFFF;
cursor: pointer;
font-weight: bold;
height: 19px;
padding: 3px 10px;
text-decoration: none;
}
#upload_custom_img_btn {
background: none repeat scroll 0 0 #F15A29;
color: #FDFFFF;
cursor: pointer;
font-weight: bold;
line-height: 21px;
padding: 0 3px;
}
#pdp_color_item ul {
max-height: 265px;
overflow: auto;
padding: 10px;
width: 100%;
}
#pdp_color_item {
display: block;
overflow: hidden;
width: 100%;
}
.pdp_design_color{
width:280px;
padding:10px;
display:block;
}
.pdp_design_color li {
border: 1px dashed #ccc;
/* border-radius: 100%; */
float: left;
height: 50px;
cursor: pointer;
margin: 5px 7px;
padding: 0;
position: relative;
width: 50px;
}
.pdp_design_color li.active {
border: 1px dashed #222;
}
/*====./Side Views====*/
.pdp_rotate_item {
display: block !important;
left: auto;
position: absolute;
right: auto;
width: 100%;
z-index: 999;
top:auto;
bottom:auto;
}
.pdp_rotate_wrap {
display: inline;
float: left;
position: relative;
text-align: center;
width: 100%;
}
#sideview {
display: none;
}
#pdp_rotate_item .pdp_rotate_wrap > label {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
color: #ffffff;
cursor: pointer;
left: auto;
line-height: 10px;
padding: 5px 10px;
position: absolute;
right: auto;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
#pdp_rotate_item .pdp_rotate_wrap .side_items {
background: none repeat scroll 0 0 #ffffff;
display: block;
height: 0;
margin: 0 auto;
min-width: 200px;
overflow: hidden;
padding-left: 20px;
padding-right: 20px;
text-align: center;
transition: all 0.3s ease 0s;
width: auto;
}
#pdp_rotate_item .pdp_rotate_wrap input:checked ~ .side_items {
border: 1px solid #ccc;
}
#pdp_side_items li {
cursor: pointer;
display: inline-block;
float: none;
margin: 5px 5px 0 0;
text-align: center;
width: 100px;
position:relative;
}
#pdp_side_items li img {
border: 1px solid #ccc;
width: 100%;
}
#pdp_side_items li.active img {
border: 1px solid #eee;
}
/*#pdp_side_items li label {
display: block;
}*/
/* Top Position */
.pdp_rotate_item.rotate_top {top:0px;}
#pdp_rotate_item.rotate_top .pdp_rotate_wrap > label {bottom: -32px;}
#pdp_rotate_item.rotate_top .pdp_rotate_wrap input:checked + label { bottom: -32px;}
#pdp_rotate_item.rotate_top .pdp_rotate_wrap input:checked ~ .side_items{height:112px;}
/* Bottom Position */
.pdp_rotate_item.rotate_bottom {bottom:0px;}
#pdp_rotate_item.rotate_bottom .pdp_rotate_wrap > label {bottom: 0px;}
#pdp_rotate_item.rotate_bottom .pdp_rotate_wrap input:checked + label { bottom: 112px;}
#pdp_rotate_item.rotate_bottom .pdp_rotate_wrap input:checked ~ .side_items {height:112px;}
/* Left Position */
#pdp_rotate_item.rotate_left .pdp_rotate_wrap input:checked + label { left: 120px;}
#pdp_rotate_item.rotate_left .pdp_rotate_wrap > label {
bottom: auto;
color: #ffffff;
cursor: pointer;
left: -23px;
line-height: 10px;
padding: 5px 10px;
position: absolute;
top: 40%;
transform: rotate(-90deg);
transition: all 0.3s ease 0s;
white-space: nowrap;
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#pdp_rotate_item.rotate_left .pdp_rotate_wrap .side_items {
background: none repeat scroll 0 0 #ffffff;
display: inline-block;
float: left;
height: auto;
margin: 0 auto;
overflow: hidden;
padding: 0;
text-align: center;
transition: all 0.3s ease 0s;
width: 0;
min-width:0px;
}
#pdp_rotate_item.rotate_left .pdp_rotate_wrap input:checked ~ .side_items {
border: 1px solid #ccc;
padding: 20px;
width: auto;
position:relative;
left:280px;
}
#pdp_rotate_item.rotate_left #pdp_side_items li{display:block;}
.pdp_rotate_item.rotate_left {left:0px;width:auto;top:10px;}
/*====./ENd of Side Views====*/
/* Expand to full width */
.pdp2_expand:before {
content: "\f108";
font-family: FontAwesome;
font-size: 25px;
font-weight: normal;
position: absolute;
right: 5px;
top: 5px;
}
.pdp2_expand.pdp2_laptop:before {
content: "\f109";
}
.pdp2_expand:hover:before{color:#000;}
.pdp2_expand {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 0 solid rgb(255, 255, 255);
color: rgb(255, 255, 255);
cursor: pointer;
font-size: 25px;
font-weight: lighter;
height: 30px;
line-height: 1;
position: absolute;
right: 80px;
top: 7px;
width: 30px;
z-index: 9999;
}
#pdp_design_popup .pdp_full_preview{display:block!important;overflow:hidden;transition: all 0.3s ease;}
#pdp_save_admin_sample {
background: none repeat scroll 0 0 #FB913E;
border: 1px solid #CCCCCC;
color: #FDF5FF;
cursor: pointer;
float: right;
font-weight: bold;
margin-right: 15px;
padding: 5px;
line-height: 20px;
}
#design_control .showsm{display:none;}
/* Responsive Ajustment */
#design_control.onSmallDevice .hidesm{display:none!important;}
#design_control.onSmallDevice .showsm{display:block!important;}
/* write by zia*/
.item_2{display:none;}
.item_3{display:none;}
.item_4{display:none;}
/*====================================New Color Code panel design start here====================================*/
.pdp_color_list_pr {
display: block;
overflow: hidden;
width: 100%;
}
.pdp_color_list_pr .pdp_design_color{
max-height: 265px;
overflow: auto;
padding: 10px;
width: 100%;
}
.pdp_color_list_pr .pdp_design_color li {
float: left;
margin: 2px 2px 2px 0;
width: 30px;
height:30px;
border: 1px dotted rgba(0, 0, 0,0);
}
.pdp_color_list_pr .pdp_design_color li a {
border: 1px dotted rgba(0, 0, 0,0);
cursor: pointer;
float: left;
font-size: 0;
height: 30px;
overflow: visible;
position: relative;
width: 30px;
}
.pdp_color_list_pr .pdp_design_color li:first-child a {background:transparent!important;}
.pdp_color_list_pr .pdp_design_color li a:hover:before {
background: none repeat scroll 0 0 rgb(255, 255, 255);
border-color: rgb(255, 255, 255);
border-radius: 20px;
border-style: solid;
border-width: 5px;
color: rgb(128, 210, 153);
content: "";
font-family: Fontawesome;
font-size: 10px;
height: 20px;
left: 2px;
line-height: 11px;
margin: 0;
padding: 0;
position: absolute;
top: 4px;
width: 20px;
}
.pdp_color_list_pr .pdp_design_color li.active:before, .pdp_color_list_pr .pdp_design_color li:hover:before {
color: #80d299;
content: "\f00c";
font-family: Fontawesome;
font-size: 10px;
height: 11px;
left: 12px;
line-height: 32px;
position: absolute;
top: 8px;
width: 11px;
}
/*------------------------------------New css Here---------------------------------*/
#design_control .pdp_add_text{ top:61px !important; border:solid 1px #CCCCCC !important;}
#design_control .pdp_add_text .addtext_head{ background:#01009a; padding:0 0 0 20px; color:#fff; font-size:15px; line-height:32px; font-weight:bold;}
.wrapper_pdp #design_control #select_image .artwork_head{ background:#01009a; padding:0 0 0 20px; color:#fff; font-size:15px; line-height:32px; font-weight:bold;}
/*#design_control .control_tab .control_tab_wrap #walls{ background:#1919a1;}
#design_control .control_tab .control_tab_wrap #walls a{ color:#fff;}*/
#pdp_rotate_item .pdp_rotate_wrap #side_same_design{ text-align:left; color:#636363; font-family: Arial; font-size: 13px; font-weight: 600;}
#pdp_rotate_item .pdp_rotate_wrap #side_same_design input[type='radio']{ margin:3px 8px 0 0px;}
.custom_active{background-color: #fff; border-top:solid 5px #1a19a1;}
.custom_active a{ color:#333333 !important; border-top:none;}
.wrapper_pdp .product-img-box .custom_message{ color:#636363; font-family: Arial; font-size: 13px; font-weight: normal; padding:10px 0 20px 0;}
.wrapper_pdp .product-img-box .custom_message input[type='checkbox']{ margin:3px 8px 0 0px;}
.wrapper_pdp .product-img-box .custom_message span{ color:#f91c1c; font-size:16px;}
#design_control #save_design{ background:#39b811; margin:0 20px 0 0; border:none;}
#pdp2_zoom_img .view_wall_pre{ text-align:left; color:#636363; font-family: Arial; font-size: 13px; font-weight: 600; margin-bottom:15px;}
#pdp2_zoom_img .view_wall_pre input[type='radio']{ margin:3px 3px 10px 10px;}
#product-image-wrap #pdp2_zoom{
background:#d4171d;
border: medium none;
color: #fff;
cursor: pointer;
float: none;
font-size: 18px;
height: 40px;
margin: 20px 0 0 0px;
text-transform:capitalize;
width: 200px;
font-family: Arial;
/*-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;*/
}
/*==========================================New css Add here===========================================*/
/*#pdp_side_items li .print_side_wall{ position:absolute; right:-35px; top:37px;}*/
/*------------------------------------Add Css Start Here-------------------*/
#pdp_rotate_item.rotate_left .pdp_rotate_wrap input:checked ~ .side_items{ padding:0; float:left; width:285px; border:none; height: 516px;
overflow: auto;}
#pdp_side_items li{ width:285px; float:left; border:solid 1px #e0e0e0; margin:5px 5px 10px 0;}
#pdp_side_items li #level_design{ width:100%; clear:both; border-bottom:solid 1px #e0e0e0;}
#product-image-wrap { left:560px;}
#pdp_side_items li #level_design_chk{ float:left; width:28px; background:#f4f4f6; height:90px; border-right:solid 1px #e0e0e0;}
#pdp_side_items li #level_design_chk input[type='checkbox']{ float:left; margin:34px 0 0 8px;}
#pdp_side_items li .pdp-side-img{ float:left; width:94px; height:68px; border:none; margin:10px 0 10px 10px;}
#pdp_side_items li #level_design_radio{ float: left; font-size: 12px; padding: 14px 0 0; text-align: left; width: 80px; font-weight:normal;}
#pdp_side_items li #level_design_radio input[type='radio']{ float:left; margin: 3px 5px 0 9px;}
#pdp_side_items li .print_side_wall{ float:right; width:28px; /*background:#ff3333;*/ height:90px; /*border-left:solid 1px #e0e0e0;*/ position:absolute; top:0; right:0;}
#pdp_side_items li .print_side_wall input[type='checkbox']{ float:left; margin:34px 0 0 8px;}
#pdp_side_items li .design_paste{ float:right; background:#f4f4f6; position:relative; width:30px; height:90px;}
/*------------------------------------Roof -------------------------------*/
#pdp_side_items li.item_0{ width:204px;}
#pdp_side_items li.item_0 .print_side_wall{ height:77px;}
#pdp_side_items li.item_0 .design_paste{ float:right; background:#f4f4f6; position:relative; width:30px; height:77px;}
#pdp_side_items li .design_paste .paste_child{transform: rotate(-90deg);color:#5b5b5b; position:absolute; top:40px; left:-6px; font-size:15px; text-transform:capitalize;
-webkit-transform: rotate(-90deg); /* Safari/Chrome */
-moz-transform: rotate(-90deg); /* Firefox */
-o-transform: rotate(-90deg); /* Opera */
-ms-transform: rotate(-90deg); /* IE 9 */
}
#pdp_side_items li.item_0 .pdp-side-img {
border: medium none;
float: left;
height: 57px;
margin: 10px 0 10px 10px;
width: 112px;
}
/*-----------------------Custom Massages panel design start here-------------------------------*/
.wrapper_pdp .product-img-box .custom_message .product_print_price{}
.wrapper_pdp .product-img-box .custom_message{border: 1px solid #e0e0e0; left: 597px; position: relative; width: 425px; top:10px; margin:0 0 15px 0; padding:0 0 15px 0;}
.wrapper_pdp .product-img-box .custom_message p{ font-size:14px; color:#464646;}
.wrapper_pdp .product-img-box .custom_message p span{ font-size:13px; color:#636363; padding:0 0 0 10px;}
.wrapper_pdp .product-img-box .custom_message p span.pdf_paste_button{ /*background:#f4f4f6;*/ background:url(https://www.poptents.uk/js/pdp/css/images/check-design.png) no-repeat 90% 50% #f4f4f6; font-size:14px; color:#333335; border:solid 1px #e0e0e0; padding:3px 25px; font-weight:normal;}
.pdp_toolbox_header {
position: absolute;
right: 20px;
top: 60px;
width: 300px;
z-index: 500;
border:solid 1px #ccc; padding:0;
}
.pdp_toolbox_header .product-description{ margin-bottom: 10px; padding: 5px 5px 5px 10px;}
.pdp_toolbox_header .product-description br{ display:none;}
.product-price{ font-weight:bold; color:#f91c1c !important;}
.custom_total_price{ margin:0 0 0 0; font-family: Arial; background:#fff; color:#000; padding:6px; border-top:solid 1px #e0e0e0;}
.custom_total_price span{ color:#d1181d !important; font-weight:bold;}
.wrapper_pdp .product-img-box{ height:795px;}
.custom_total_price span.pdp_price_info{ color:#000 !important; display:inline-block; width:115px; font-weight:normal;}
/*---------------------------------------------try css here vallance---------------------------*/
#pdp_side_items li.all_preview_side_10{ height:100px;}
#pdp_side_items li.all_preview_side_10 .pdp-side-img { height: 40px; margin: 18px 0 5px 10px;}
#pdp_side_items li.all_preview_side_10 .design_paste{ height:76px;}
#pdp_side_items li.all_preview_side_10 .design_paste .paste_child{ top:39px; font-weight:normal; font-size:15px;}
#pdp_side_items li.all_preview_side_10 .print_side_wall{ top:20px; right:0;}
#pdp_side_items li.all_preview_side_10 .print_side_wall input[type="checkbox"]{ margin:13px 0 0 8px;}
#pdp_side_items li.all_preview_side_12{ height:100px;}
#pdp_side_items li.all_preview_side_12 .pdp-side-img { height: 40px; margin: 18px 0 5px 10px;}
#pdp_side_items li.all_preview_side_12 .design_paste{ height:76px;}
#pdp_side_items li.all_preview_side_12 .design_paste .paste_child{ top:39px; font-weight:normal; font-size:15px;}
#pdp_side_items li.all_preview_side_12 .print_side_wall{ top:20px; right:0;}
#pdp_side_items li.all_preview_side_12 .print_side_wall input[type="checkbox"]{ margin:13px 0 0 8px;}
#pdp_side_items li.all_preview_side_14{ height:100px;}
#pdp_side_items li.all_preview_side_14 .pdp-side-img { height: 40px; margin: 18px 0 5px 10px;}
#pdp_side_items li.all_preview_side_14 .design_paste{ height:76px;}
#pdp_side_items li.all_preview_side_14 .design_paste .paste_child{ top:39px; font-weight:normal; font-size:15px;}
#pdp_side_items li.all_preview_side_14 .print_side_wall{ top:20px; right:0;}
#pdp_side_items li.all_preview_side_14 .print_side_wall input[type="checkbox"]{ margin:13px 0 0 8px;}
#pdp_side_items li.all_preview_side_16{ height:100px;}
#pdp_side_items li.all_preview_side_16 .pdp-side-img { height: 40px; margin: 18px 0 5px 10px;}
#pdp_side_items li.all_preview_side_16 .design_paste{ height:76px;}
#pdp_side_items li.all_preview_side_16 .design_paste .paste_child{ top:39px; font-weight:normal; font-size:15px;}
#pdp_side_items li.all_preview_side_16 .print_side_wall{ top:20px; right:0;}
#pdp_side_items li.all_preview_side_16 .print_side_wall input[type="checkbox"]{ margin:13px 0 0 8px;}
/*#pdp_side_items li.all_preview_side_12{ height:64px;}
#pdp_side_items li.all_preview_side_12 .pdp-side-img { height: 27px; margin: 5px 0 5px 10px;}
#pdp_side_items li.all_preview_side_12 .design_paste{ height:40px;}
#pdp_side_items li.all_preview_side_12 .design_paste .paste_child{ top:11px; font-weight:bold; font-size:12px;}
#pdp_side_items li.all_preview_side_12 .print_side_wall{ height:40px;}
#pdp_side_items li.all_preview_side_12 .print_side_wall input[type="checkbox"]{ margin:13px 0 0 8px;}
#pdp_side_items li.all_preview_side_14{ height:64px;}
#pdp_side_items li.all_preview_side_14 .pdp-side-img { height: 27px; margin: 5px 0 5px 10px;}
#pdp_side_items li.all_preview_side_14 .design_paste{ height:40px;}
#pdp_side_items li.all_preview_side_14 .design_paste .paste_child{ top:11px; font-weight:bold; font-size:12px;}
#pdp_side_items li.all_preview_side_14 .print_side_wall{ height:40px;}
#pdp_side_items li.all_preview_side_14 .print_side_wall input[type="checkbox"]{ margin:13px 0 0 8px;}
#pdp_side_items li.all_preview_side_16{ height:64px;}
#pdp_side_items li.all_preview_side_16 .pdp-side-img { height: 27px; margin: 5px 0 5px 10px;}
#pdp_side_items li.all_preview_side_16 .design_paste{ height:40px;}
#pdp_side_items li.all_preview_side_16 .design_paste .paste_child{ top:11px; font-weight:bold; font-size:12px;}
#pdp_side_items li.all_preview_side_16 .print_side_wall{ height:40px;}
#pdp_side_items li.all_preview_side_16 .print_side_wall input[type="checkbox"]{ margin:13px 0 0 8px;}*/
/*====================Share buttons design start here=================================*/
.pdp_share_buttons{ display:block !important; top:778px; right:20px; opacity:1;}
.content_upload .file_format_all{ /*width:86%;*/ width:100%; margin:0 0 10px 0; text-align:left; font-family: Arial; color:#000; font-size:14px; line-height:18px; font-weight:normal;}
#pdp_side_items li .dysize_2_7, #pdp_side_items li .dysize_4_7{ float:left; width:74px; height:56px; border:none; margin:10px 0 10px 10px;}
#pdp_side_items li.item_0 .dysize_11_7, #pdp_side_items li.item_0 .dysize_15_7{ width:84px; height:48px;}
#pdp_side_items li.item_0 .dysize_12_7, #pdp_side_items li.item_0 .dysize_16_7{ width:95px;}
/*----------------------------------*/
#pdp_side_items li .dysize_2_2, #pdp_side_items li .dysize_4_2{ width:74px; height:56px;}
#pdp_side_items li.item_0 .dysize_11_2, #pdp_side_items li.item_0 .dysize_15_2{ width:84px; height:48px;}
#pdp_side_items li.item_0 .dysize_12_2, #pdp_side_items li.item_0 .dysize_16_2{ width:95px;}
/*-----------------------------------------------------------------------*/
#select_font.showme{ border:solid 1px #c4c4c4;}
#select_image li a{ height:48px;}
.content_designs ul#icon_list{ min-height: 52px;}
.wrapper_pdp .product-img-box .custom_message #roof_message{ font-family:Arial; float:left; width:100%;}
.wrapper_pdp .product-img-box .custom_message #roof_message span{ padding:0; font-size:14px; line-height:18px; font-weight:normal; color:#000;}
.wrapper_pdp .product-img-box .custom_message #roof_message span.meta_title{ clear:both; float:left; width:100%; padding:0 0 0 20px; margin:0; background:#01009a; font-size:15px; line-height:32px; color:#fff; font-weight:bold; text-align:left;}
.wrapper_pdp .product-img-box .custom_message #roof_message span.design_short_des{ clear:both; float:left; width:60%; padding:0; margin:0; background:url(https://www.poptents.uk/js/pdp/css/images/design-arrow.png) no-repeat 100% 50%;}
.wrapper_pdp .product-img-box .custom_message #roof_message span.design_short_des h2{ font-size:14px; line-height:20px; font-weight:normal; color:#343434; text-align:left; padding:10px 0 0 10px; margin:0;}
.wrapper_pdp .product-img-box .custom_message #roof_message span.design_short_des p{ padding:0 0 0 34px; margin:0; background:url(https://www.poptents.uk/js/pdp/css/images/design-round.png) no-repeat 10px 50%; font-size:14px; line-height:22px; font-weight:normal; color:#333333; text-align:left;}
.wrapper_pdp .product-img-box .custom_message #roof_message span.price_roof_val{ float:left; width:40%; padding:13% 0 0 5%; margin:0;}
.wrapper_pdp .product-img-box .custom_message #roof_message span.design_price_show{ padding:0 0 10px 10px; margin:0; font-size:20px; float:left; width:100%; text-align:left; color:#d4171b; font-weight:bold;}
.wrapper_pdp .product-img-box .custom_message #roof_message span.round_move{ padding:0 0 0 10px; margin:0; float:left; width:100%; text-align:left;}
.pdp_toolbox_header p.meta_title_toolbox{ color:#fff; text-align:left; padding:0 0 0 10px; background:#01009a; line-height:32px; font-size:15px; font-weight:bold;}
.wrapper_pdp .product-img-box .custom_message #roof_message span.roof_last_text{ border-top: 1px solid #ccc; float: left; margin: 5px 3% 0; padding: 5px 0 5px 0; width: 94%;}
/*---------------------------walls design start here------------------------------*/
.wrapper_pdp .product-img-box .custom_message #walls_message{ font-family:Arial;}
.wrapper_pdp .product-img-box .custom_message #walls_message span{ padding:0; font-size:14px; line-height:18px; font-weight:normal; color:#000;}
.wrapper_pdp .product-img-box .custom_message #walls_message span.meta_title{ clear:both; float:left; width:100%; padding:0 0 0 10px; margin:0 0 10px 0; background:#01009a; font-size:15px; line-height:32px; color:#fff; font-weight:bold; text-align:left;}
.wrapper_pdp .product-img-box .custom_message #walls_message p{ /*padding:0; font-size:14px; line-height:18px; font-weight:normal; color:#000;*/ padding:0 0 0 45px; margin:0; background:url(https://www.poptents.uk/js/pdp/css/images/design-round.png) no-repeat 21px 26%; font-size:14px; line-height:24px; font-weight:normal; color:#333333; text-align:left; float:left; width:100%;}
.wrapper_pdp .product-img-box .custom_message #walls_message span.design_price_show{ padding:0 0 0 30px; margin:0; font-size:20px; color:#d2181d; font-weight:bold; background:url(https://www.poptents.uk/js/pdp/css/images/arrow-design-2.png) no-repeat 12px 70%;}
.wrapper_pdp .product-img-box .custom_message #wall_message{ border-top: 1px solid #ccc; float: left; margin: 5px 3% 0; padding: 5px 0 0; width: 94%;}
/*======================Color customize panel start here===================================*/
.pdp_color_list_pr #nonprint_col{ margin:0 0 0 30px; width:87%;}
.pdp_color_list_pr #nonprint_col li{ height:65px; width:50px; margin:0 23px 25px 0;}
.pdp_color_list_pr #nonprint_col li .heading_col{ float:left; width:100%; font-size:12px; height:39px; text-align:center;}
.pdp_color_list_pr #nonprint_col li .heading_col span{ clear:both; width:100%; float:left;}
.pdp_color_list_pr #nonprint_col li .footer_col{ float:left; width:100%;}
.pdp_color_list_pr #nonprint_col li .footer_col a{ width:50px; height:40px; border:solid 1px #000;}
label{ font-family:Arial !important;}
/*----------------------------------------Safari and crome only-----------------------------*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
#pdp_side_items li{ width:267px;}
}
/*===================================================Rsponsive Design Start Here===================================================*/
@media (max-width: 1366px){
.pdp_toolbox_header .product-description br{ display:none;}
.product-choose-2mx2m #product-image-wrap{ left:548px;}
.product-choose-3mx3m #product-image-wrap{ left:548px;}
.product-choose-3mx4-5m #product-image-wrap{ left:548px;}
.product-choose-3mx6m #product-image-wrap{ left:548px;}
.wrapper_pdp .product-img-box .custom_message{ left:585px;}
}
@media (width: 1280px){
#product-image-wrap{ width:320px;}
.pdp_toolbox_header .product-description br{ display:none;}
/*------------------------------------------------------New Style css here--------------------------------*/
.wrapper_pdp .product-img-box .custom_message{ width:358px;}
.wrapper_pdp .product-img-box .custom_message #roof_message span.design_short_des p{ font-size:13px;}
.wrapper_pdp .product-img-box .custom_message #roof_message span.price_roof_val{ padding: 13% 0 0 2%;}
.wrapper_pdp .product-img-box .custom_message #roof_message span.design_price_show{ font-size:19px;}
#product-image-wrap #pdp2_zoom{ z-index:999;}
}
@media (max-width: 1024px){
#product-image-wrap{ left:242px !important;}
#pdp_rotate_item.rotate_left .pdp_rotate_wrap input:checked ~ .side_items{ left:10px; top:580px;}
.wrapper_pdp .product-img-box .custom_message{ clear:both; width:42%; padding:0 0 0 0 !important; float:left; left:275px;}
.wrapper_pdp .product-img-box .custom_message p{ font-size:15px;}
.wrapper_pdp .product-img-box {height: 1300px;}
.wrapper_pdp #design_control #select_image{ top:19%;}
.wrapper_pdp .product-img-box .custom_message #roof_message span.design_short_des{ clear:both; float:left; width:59%; padding:0 0 7px 0; margin:0;}
.pdp_toolbox_header .product-description br{ display:none;}
#product-image-wrap{ clear:both;}
#product-image-wrap #pdp2_zoom{ z-index:999;}
#pdp_side_items li #level_design_radio object{ float:left;}
#pdp_side_items li #level_design_radio input[type="radio"]{ float:left; margin: 0 5px 0 9px;}
#pdp_side_items li #level_design_radio br{ clear:both;}
.pdp_toolbox_header{ width:280px;}
#pdp_toolbox{ width:280px !important; top:293px !important;}
#pdp_toolbox > label{ width:283px !important;}
.ac-container{ width:283px !important;}
.pdp_share_buttons{ top:795px !important;}
}
/*
* jQuery UI CSS Framework @VERSION
*
* Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Theming/API
*/
/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }
/* Icons
----------------------------------*/
/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
/* Misc visuals
----------------------------------*/
/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/*
Colorbox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
#colorbox .wrap_inlay {
display: block;
}
/*
User Style:
Change the following styles to modify the appearance of Colorbox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(https://www.poptents.uk/js/pdp/css/images/overlay.png) repeat 0 0;}
#colorbox{outline:0;}
#cboxTopLeft{width:21px; height:21px; background:url(https://www.poptents.uk/js/pdp/css/images/controls.png) no-repeat -101px 0;}
#cboxTopRight{width:21px; height:21px; background:url(https://www.poptents.uk/js/pdp/css/images/controls.png) no-repeat -130px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(https://www.poptents.uk/js/pdp/css/images/controls.png) no-repeat -101px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(https://www.poptents.uk/js/pdp/css/images/controls.png) no-repeat -130px -29px;}
#cboxMiddleLeft{width:21px; background:url(https://www.poptents.uk/js/pdp/css/images/controls.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(https://www.poptents.uk/js/pdp/css/images/controls.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(https://www.poptents.uk/js/pdp/css/images/border.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px; background:url(https://www.poptents.uk/js/pdp/css/images/border.png) 0 -29px repeat-x;}
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:28px;}
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
#cboxLoadingOverlay{background:url(https://www.poptents.uk/js/pdp/css/images/loading_background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://www.poptents.uk/js/pdp/css/images/loading.gif) no-repeat center center;}
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(https://www.poptents.uk/js/pdp/css/images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}
#cboxNext{position:absolute; bottom:0; left:27px; background:url(https://www.poptents.uk/js/pdp/css/images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}
#cboxClose{position:absolute; bottom:0; right:0; background:url(https://www.poptents.uk/js/pdp/css/images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}
/*
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}
.nodisplay {
display: none;
}
/*
* Core Owl Carousel CSS File
* v1.22
*/
/* clearfix */
.owl-carousel .owl-wrapper:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
/* display none until init */
.owl-carousel{
display: none;
position: relative;
width: 100%;
-ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
display: none;
position: relative;
-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-perspective: 1000;
}
.owl-carousel .owl-wrapper-outer{
overflow: hidden;
position: relative;
width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
-webkit-transition: height 500ms ease-in-out;
-moz-transition: height 500ms ease-in-out;
-ms-transition: height 500ms ease-in-out;
-o-transition: height 500ms ease-in-out;
transition: height 500ms ease-in-out;
}
.owl-carousel .owl-item{
float: left;
position: relative;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{
cursor: pointer;
}
.owl-controls {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* mouse grab icon */
.grabbing {
cursor:url(https://www.poptents.uk/js/pdp/css/grabbing.png) 8 8, move;
}
/* fix */
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item{
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
/*!
* Font Awesome 4.2.0 by @davegandy - http://fontawesome.io - @fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/
/* FONT PATH
* -------------------------- */
@font-face {
font-family: 'FontAwesome';
src: url('https://www.poptents.uk/js/pdp/fonts/fontawesome-webfont.eot?v=4.2.0');
src: url('https://www.poptents.uk/js/pdp/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('https://www.poptents.uk/js/pdp/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('https://www.poptents.uk/js/pdp/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('https://www.poptents.uk/js/pdp/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
.pi {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* makes the font 33% larger relative to the icon container */
.pi-lg {
font-size: 1.33333333em;
line-height: 0.75em;
vertical-align: -15%;
}
.pi-2x {
font-size: 2em;
}
.pi-3x {
font-size: 3em;
}
.pi-4x {
font-size: 4em;
}
.pi-5x {
font-size: 5em;
}
.pi-fw {
width: 1.28571429em;
text-align: center;
}
.pi-ul {
padding-left: 0;
margin-left: 2.14285714em;
list-style-type: none;
}
.pi-ul > li {
position: relative;
}
.pi-li {
position: absolute;
left: -2.14285714em;
width: 2.14285714em;
top: 0.14285714em;
text-align: center;
}
.pi-li.pi-lg {
left: -1.85714286em;
}
.pi-border {
padding: .2em .25em .15em;
border: solid 0.08em #eeeeee;
border-radius: .1em;
}
.pull-right {
float: right;
}
.pull-left {
float: left;
}
.pi.pull-left {
margin-right: .3em;
}
.pi.pull-right {
margin-left: .3em;
}
.pi-spin {
-webkit-animation: pi-spin 2s infinite linear;
animation: pi-spin 2s infinite linear;
}
@-webkit-keyframes pi-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes pi-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
.pi-rotate-90 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.pi-rotate-180 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.pi-rotate-270 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
.pi-flip-horizontal {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
-webkit-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.pi-flip-vertical {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
-webkit-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
}
:root .pi-rotate-90,
:root .pi-rotate-180,
:root .pi-rotate-270,
:root .pi-flip-horizontal,
:root .pi-flip-vertical {
filter: none;
}
.pi-stack {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: middle;
}
.pi-stack-1x,
.pi-stack-2x {
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
.pi-stack-1x {
line-height: inherit;
}
.pi-stack-2x {
font-size: 2em;
}
.pi-inverse {
color: #ffffff;
}
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.pi-glass:before {
content: "\f000";
}
.pi-music:before {
content: "\f001";
}
.pi-search:before {
content: "\f002";
}
.pi-envelope-o:before {
content: "\f003";
}
.pi-heart:before {
content: "\f004";
}
.pi-star:before {
content: "\f005";
}
.pi-star-o:before {
content: "\f006";
}
.pi-user:before {
content: "\f007";
}
.pi-film:before {
content: "\f008";
}
.pi-th-large:before {
content: "\f009";
}
.pi-th:before {
content: "\f00a";
}
.pi-th-list:before {
content: "\f00b";
}
.pi-check:before {
content: "\f00c";
}
.pi-remove:before,
.pi-close:before,
.pi-times:before {
content: "\f00d";
}
.pi-search-plus:before {
content: "\f00e";
}
.pi-search-minus:before {
content: "\f010";
}
.pi-power-off:before {
content: "\f011";
}
.pi-signal:before {
content: "\f012";
}
.pi-gear:before,
.pi-cog:before {
content: "\f013";
}
.pi-trash-o:before {
content: "\f014";
}
.pi-home:before {
content: "\f015";
}
.pi-file-o:before {
content: "\f016";
}
.pi-clock-o:before {
content: "\f017";
}
.pi-road:before {
content: "\f018";
}
.pi-download:before {
content: "\f019";
}
.pi-arrow-circle-o-down:before {
content: "\f01a";
}
.pi-arrow-circle-o-up:before {
content: "\f01b";
}
.pi-inbox:before {
content: "\f01c";
}
.pi-play-circle-o:before {
content: "\f01d";
}
.pi-rotate-right:before,
.pi-repeat:before {
content: "\f01e";
}
.pi-refresh:before {
content: "\f021";
}
.pi-list-alt:before {
content: "\f022";
}
.pi-lock:before {
content: "\f023";
}
.pi-flag:before {
content: "\f024";
}
.pi-headphones:before {
content: "\f025";
}
.pi-volume-off:before {
content: "\f026";
}
.pi-volume-down:before {
content: "\f027";
}
.pi-volume-up:before {
content: "\f028";
}
.pi-qrcode:before {
content: "\f029";
}
.pi-barcode:before {
content: "\f02a";
}
.pi-tag:before {
content: "\f02b";
}
.pi-tags:before {
content: "\f02c";
}
.pi-book:before {
content: "\f02d";
}
.pi-bookmark:before {
content: "\f02e";
}
.pi-print:before {
content: "\f02f";
}
.pi-camera:before {
content: "\f030";
}
.pi-font:before {
content: "\f031";
}
.pi-bold:before {
content: "\f032";
}
.pi-italic:before {
content: "\f033";
}
.pi-text-height:before {
content: "\f034";
}
.pi-text-width:before {
content: "\f035";
}
.pi-align-left:before {
content: "\f036";
}
.pi-align-center:before {
content: "\f037";
}
.pi-align-right:before {
content: "\f038";
}
.pi-align-justify:before {
content: "\f039";
}
.pi-list:before {
content: "\f03a";
}
.pi-dedent:before,
.pi-outdent:before {
content: "\f03b";
}
.pi-indent:before {
content: "\f03c";
}
.pi-video-camera:before {
content: "\f03d";
}
.pi-photo:before,
.pi-image:before,
.pi-picture-o:before {
content: "\f03e";
}
.pi-pencil:before {
content: "\f040";
}
.pi-map-marker:before {
content: "\f041";
}
.pi-adjust:before {
content: "\f042";
}
.pi-tint:before {
content: "\f043";
}
.pi-edit:before,
.pi-pencil-square-o:before {
content: "\f044";
}
.pi-share-square-o:before {
content: "\f045";
}
.pi-check-square-o:before {
content: "\f046";
}
.pi-arrows:before {
content: "\f047";
}
.pi-step-backward:before {
content: "\f048";
}
.pi-pist-backward:before {
content: "\f049";
}
.pi-backward:before {
content: "\f04a";
}
.pi-play:before {
content: "\f04b";
}
.pi-pause:before {
content: "\f04c";
}
.pi-stop:before {
content: "\f04d";
}
.pi-forward:before {
content: "\f04e";
}
.pi-pist-forward:before {
content: "\f050";
}
.pi-step-forward:before {
content: "\f051";
}
.pi-eject:before {
content: "\f052";
}
.pi-chevron-left:before {
content: "\f053";
}
.pi-chevron-right:before {
content: "\f054";
}
.pi-plus-circle:before {
content: "\f055";
}
.pi-minus-circle:before {
content: "\f056";
}
.pi-times-circle:before {
content: "\f057";
}
.pi-check-circle:before {
content: "\f058";
}
.pi-question-circle:before {
content: "\f059";
}
.pi-info-circle:before {
content: "\f05a";
}
.pi-crosshairs:before {
content: "\f05b";
}
.pi-times-circle-o:before {
content: "\f05c";
}
.pi-check-circle-o:before {
content: "\f05d";
}
.pi-ban:before {
content: "\f05e";
}
.pi-arrow-left:before {
content: "\f060";
}
.pi-arrow-right:before {
content: "\f061";
}
.pi-arrow-up:before {
content: "\f062";
}
.pi-arrow-down:before {
content: "\f063";
}
.pi-mail-forward:before,
.pi-share:before {
content: "\f064";
}
.pi-expand:before {
content: "\f065";
}
.pi-compress:before {
content: "\f066";
}
.pi-plus:before {
content: "\f067";
}
.pi-minus:before {
content: "\f068";
}
.pi-asterisk:before {
content: "\f069";
}
.pi-exclamation-circle:before {
content: "\f06a";
}
.pi-gift:before {
content: "\f06b";
}
.pi-leaf:before {
content: "\f06c";
}
.pi-fire:before {
content: "\f06d";
}
.pi-eye:before {
content: "\f06e";
}
.pi-eye-slash:before {
content: "\f070";
}
.pi-warning:before,
.pi-exclamation-triangle:before {
content: "\f071";
}
.pi-plane:before {
content: "\f072";
}
.pi-calendar:before {
content: "\f073";
}
.pi-random:before {
content: "\f074";
}
.pi-comment:before {
content: "\f075";
}
.pi-magnet:before {
content: "\f076";
}
.pi-chevron-up:before {
content: "\f077";
}
.pi-chevron-down:before {
content: "\f078";
}
.pi-retweet:before {
content: "\f079";
}
.pi-shopping-cart:before {
content: "\f07a";
}
.pi-folder:before {
content: "\f07b";
}
.pi-folder-open:before {
content: "\f07c";
}
.pi-arrows-v:before {
content: "\f07d";
}
.pi-arrows-h:before {
content: "\f07e";
}
.pi-bar-chart-o:before,
.pi-bar-chart:before {
content: "\f080";
}
.pi-twitter-square:before {
content: "\f081";
}
.pi-facebook-square:before {
content: "\f082";
}
.pi-camera-retro:before {
content: "\f083";
}
.pi-key:before {
content: "\f084";
}
.pi-gears:before,
.pi-cogs:before {
content: "\f085";
}
.pi-comments:before {
content: "\f086";
}
.pi-thumbs-o-up:before {
content: "\f087";
}
.pi-thumbs-o-down:before {
content: "\f088";
}
.pi-star-half:before {
content: "\f089";
}
.pi-heart-o:before {
content: "\f08a";
}
.pi-sign-out:before {
content: "\f08b";
}
.pi-linkedin-square:before {
content: "\f08c";
}
.pi-thumb-tack:before {
content: "\f08d";
}
.pi-external-link:before {
content: "\f08e";
}
.pi-sign-in:before {
content: "\f090";
}
.pi-trophy:before {
content: "\f091";
}
.pi-github-square:before {
content: "\f092";
}
.pi-upload:before {
content: "\f093";
}
.pi-lemon-o:before {
content: "\f094";
}
.pi-phone:before {
content: "\f095";
}
.pi-square-o:before {
content: "\f096";
}
.pi-bookmark-o:before {
content: "\f097";
}
.pi-phone-square:before {
content: "\f098";
}
.pi-twitter:before {
content: "\f099";
}
.pi-facebook:before {
content: "\f09a";
}
.pi-github:before {
content: "\f09b";
}
.pi-unlock:before {
content: "\f09c";
}
.pi-credit-card:before {
content: "\f09d";
}
.pi-rss:before {
content: "\f09e";
}
.pi-hdd-o:before {
content: "\f0a0";
}
.pi-bullhorn:before {
content: "\f0a1";
}
.pi-bell:before {
content: "\f0f3";
}
.pi-certificate:before {
content: "\f0a3";
}
.pi-hand-o-right:before {
content: "\f0a4";
}
.pi-hand-o-left:before {
content: "\f0a5";
}
.pi-hand-o-up:before {
content: "\f0a6";
}
.pi-hand-o-down:before {
content: "\f0a7";
}
.pi-arrow-circle-left:before {
content: "\f0a8";
}
.pi-arrow-circle-right:before {
content: "\f0a9";
}
.pi-arrow-circle-up:before {
content: "\f0aa";
}
.pi-arrow-circle-down:before {
content: "\f0ab";
}
.pi-globe:before {
content: "\f0ac";
}
.pi-wrench:before {
content: "\f0ad";
}
.pi-tasks:before {
content: "\f0ae";
}
.pi-filter:before {
content: "\f0b0";
}
.pi-briefcase:before {
content: "\f0b1";
}
.pi-arrows-alt:before {
content: "\f0b2";
}
.pi-group:before,
.pi-users:before {
content: "\f0c0";
}
.pi-chain:before,
.pi-link:before {
content: "\f0c1";
}
.pi-cloud:before {
content: "\f0c2";
}
.pi-flask:before {
content: "\f0c3";
}
.pi-cut:before,
.pi-scissors:before {
content: "\f0c4";
}
.pi-copy:before,
.pi-files-o:before {
content: "\f0c5";
}
.pi-paperclip:before {
content: "\f0c6";
}
.pi-save:before,
.pi-floppy-o:before {
content: "\f0c7";
}
.pi-square:before {
content: "\f0c8";
}
.pi-navicon:before,
.pi-reorder:before,
.pi-bars:before {
content: "\f0c9";
}
.pi-list-ul:before {
content: "\f0ca";
}
.pi-list-ol:before {
content: "\f0cb";
}
.pi-strikethrough:before {
content: "\f0cc";
}
.pi-underline:before {
content: "\f0cd";
}
.pi-table:before {
content: "\f0ce";
}
.pi-magic:before {
content: "\f0d0";
}
.pi-truck:before {
content: "\f0d1";
}
.pi-pinterest:before {
content: "\f0d2";
}
.pi-pinterest-square:before {
content: "\f0d3";
}
.pi-google-plus-square:before {
content: "\f0d4";
}
.pi-google-plus:before {
content: "\f0d5";
}
.pi-money:before {
content: "\f0d6";
}
.pi-caret-down:before {
content: "\f0d7";
}
.pi-caret-up:before {
content: "\f0d8";
}
.pi-caret-left:before {
content: "\f0d9";
}
.pi-caret-right:before {
content: "\f0da";
}
.pi-columns:before {
content: "\f0db";
}
.pi-unsorted:before,
.pi-sort:before {
content: "\f0dc";
}
.pi-sort-down:before,
.pi-sort-desc:before {
content: "\f0dd";
}
.pi-sort-up:before,
.pi-sort-asc:before {
content: "\f0de";
}
.pi-envelope:before {
content: "\f0e0";
}
.pi-linkedin:before {
content: "\f0e1";
}
.pi-rotate-left:before,
.pi-undo:before {
content: "\f0e2";
}
.pi-legal:before,
.pi-gavel:before {
content: "\f0e3";
}
.pi-dashboard:before,
.pi-tachometer:before {
content: "\f0e4";
}
.pi-comment-o:before {
content: "\f0e5";
}
.pi-comments-o:before {
content: "\f0e6";
}
.pi-flash:before,
.pi-bolt:before {
content: "\f0e7";
}
.pi-sitemap:before {
content: "\f0e8";
}
.pi-umbrella:before {
content: "\f0e9";
}
.pi-paste:before,
.pi-clipboard:before {
content: "\f0ea";
}
.pi-lightbulb-o:before {
content: "\f0eb";
}
.pi-exchange:before {
content: "\f0ec";
}
.pi-cloud-download:before {
content: "\f0ed";
}
.pi-cloud-upload:before {
content: "\f0ee";
}
.pi-user-md:before {
content: "\f0f0";
}
.pi-stethoscope:before {
content: "\f0f1";
}
.pi-suitcase:before {
content: "\f0f2";
}
.pi-bell-o:before {
content: "\f0a2";
}
.pi-coffee:before {
content: "\f0f4";
}
.pi-cutlery:before {
content: "\f0f5";
}
.pi-file-text-o:before {
content: "\f0f6";
}
.pi-building-o:before {
content: "\f0f7";
}
.pi-hospital-o:before {
content: "\f0f8";
}
.pi-ambulance:before {
content: "\f0f9";
}
.pi-medkit:before {
content: "\f0pi";
}
.pi-fighter-jet:before {
content: "\f0fb";
}
.pi-beer:before {
content: "\f0fc";
}
.pi-h-square:before {
content: "\f0fd";
}
.pi-plus-square:before {
content: "\f0fe";
}
.pi-angle-double-left:before {
content: "\f100";
}
.pi-angle-double-right:before {
content: "\f101";
}
.pi-angle-double-up:before {
content: "\f102";
}
.pi-angle-double-down:before {
content: "\f103";
}
.pi-angle-left:before {
content: "\f104";
}
.pi-angle-right:before {
content: "\f105";
}
.pi-angle-up:before {
content: "\f106";
}
.pi-angle-down:before {
content: "\f107";
}
.pi-desktop:before {
content: "\f108";
}
.pi-laptop:before {
content: "\f109";
}
.pi-tablet:before {
content: "\f10a";
}
.pi-mobile-phone:before,
.pi-mobile:before {
content: "\f10b";
}
.pi-circle-o:before {
content: "\f10c";
}
.pi-quote-left:before {
content: "\f10d";
}
.pi-quote-right:before {
content: "\f10e";
}
.pi-spinner:before {
content: "\f110";
}
.pi-circle:before {
content: "\f111";
}
.pi-mail-reply:before,
.pi-reply:before {
content: "\f112";
}
.pi-github-alt:before {
content: "\f113";
}
.pi-folder-o:before {
content: "\f114";
}
.pi-folder-open-o:before {
content: "\f115";
}
.pi-smile-o:before {
content: "\f118";
}
.pi-frown-o:before {
content: "\f119";
}
.pi-meh-o:before {
content: "\f11a";
}
.pi-gamepad:before {
content: "\f11b";
}
.pi-keyboard-o:before {
content: "\f11c";
}
.pi-flag-o:before {
content: "\f11d";
}
.pi-flag-checkered:before {
content: "\f11e";
}
.pi-terminal:before {
content: "\f120";
}
.pi-code:before {
content: "\f121";
}
.pi-mail-reply-all:before,
.pi-reply-all:before {
content: "\f122";
}
.pi-star-half-empty:before,
.pi-star-half-full:before,
.pi-star-half-o:before {
content: "\f123";
}
.pi-location-arrow:before {
content: "\f124";
}
.pi-crop:before {
content: "\f125";
}
.pi-code-fork:before {
content: "\f126";
}
.pi-unlink:before,
.pi-chain-broken:before {
content: "\f127";
}
.pi-question:before {
content: "\f128";
}
.pi-info:before {
content: "\f129";
}
.pi-exclamation:before {
content: "\f12a";
}
.pi-superscript:before {
content: "\f12b";
}
.pi-subscript:before {
content: "\f12c";
}
.pi-eraser:before {
content: "\f12d";
}
.pi-puzzle-piece:before {
content: "\f12e";
}
.pi-microphone:before {
content: "\f130";
}
.pi-microphone-slash:before {
content: "\f131";
}
.pi-shield:before {
content: "\f132";
}
.pi-calendar-o:before {
content: "\f133";
}
.pi-fire-extinguisher:before {
content: "\f134";
}
.pi-rocket:before {
content: "\f135";
}
.pi-maxcdn:before {
content: "\f136";
}
.pi-chevron-circle-left:before {
content: "\f137";
}
.pi-chevron-circle-right:before {
content: "\f138";
}
.pi-chevron-circle-up:before {
content: "\f139";
}
.pi-chevron-circle-down:before {
content: "\f13a";
}
.pi-html5:before {
content: "\f13b";
}
.pi-css3:before {
content: "\f13c";
}
.pi-anchor:before {
content: "\f13d";
}
.pi-unlock-alt:before {
content: "\f13e";
}
.pi-bullseye:before {
content: "\f140";
}
.pi-ellipsis-h:before {
content: "\f141";
}
.pi-ellipsis-v:before {
content: "\f142";
}
.pi-rss-square:before {
content: "\f143";
}
.pi-play-circle:before {
content: "\f144";
}
.pi-ticket:before {
content: "\f145";
}
.pi-minus-square:before {
content: "\f146";
}
.pi-minus-square-o:before {
content: "\f147";
}
.pi-level-up:before {
content: "\f148";
}
.pi-level-down:before {
content: "\f149";
}
.pi-check-square:before {
content: "\f14a";
}
.pi-pencil-square:before {
content: "\f14b";
}
.pi-external-link-square:before {
content: "\f14c";
}
.pi-share-square:before {
content: "\f14d";
}
.pi-compass:before {
content: "\f14e";
}
.pi-toggle-down:before,
.pi-caret-square-o-down:before {
content: "\f150";
}
.pi-toggle-up:before,
.pi-caret-square-o-up:before {
content: "\f151";
}
.pi-toggle-right:before,
.pi-caret-square-o-right:before {
content: "\f152";
}
.pi-euro:before,
.pi-eur:before {
content: "\f153";
}
.pi-gbp:before {
content: "\f154";
}
.pi-dollar:before,
.pi-usd:before {
content: "\f155";
}
.pi-rupee:before,
.pi-inr:before {
content: "\f156";
}
.pi-cny:before,
.pi-rmb:before,
.pi-yen:before,
.pi-jpy:before {
content: "\f157";
}
.pi-ruble:before,
.pi-rouble:before,
.pi-rub:before {
content: "\f158";
}
.pi-won:before,
.pi-krw:before {
content: "\f159";
}
.pi-bitcoin:before,
.pi-btc:before {
content: "\f15a";
}
.pi-file:before {
content: "\f15b";
}
.pi-file-text:before {
content: "\f15c";
}
.pi-sort-alpha-asc:before {
content: "\f15d";
}
.pi-sort-alpha-desc:before {
content: "\f15e";
}
.pi-sort-amount-asc:before {
content: "\f160";
}
.pi-sort-amount-desc:before {
content: "\f161";
}
.pi-sort-numeric-asc:before {
content: "\f162";
}
.pi-sort-numeric-desc:before {
content: "\f163";
}
.pi-thumbs-up:before {
content: "\f164";
}
.pi-thumbs-down:before {
content: "\f165";
}
.pi-youtube-square:before {
content: "\f166";
}
.pi-youtube:before {
content: "\f167";
}
.pi-xing:before {
content: "\f168";
}
.pi-xing-square:before {
content: "\f169";
}
.pi-youtube-play:before {
content: "\f16a";
}
.pi-dropbox:before {
content: "\f16b";
}
.pi-stack-overflow:before {
content: "\f16c";
}
.pi-instagram:before {
content: "\f16d";
}
.pi-flickr:before {
content: "\f16e";
}
.pi-adn:before {
content: "\f170";
}
.pi-bitbucket:before {
content: "\f171";
}
.pi-bitbucket-square:before {
content: "\f172";
}
.pi-tumblr:before {
content: "\f173";
}
.pi-tumblr-square:before {
content: "\f174";
}
.pi-long-arrow-down:before {
content: "\f175";
}
.pi-long-arrow-up:before {
content: "\f176";
}
.pi-long-arrow-left:before {
content: "\f177";
}
.pi-long-arrow-right:before {
content: "\f178";
}
.pi-apple:before {
content: "\f179";
}
.pi-windows:before {
content: "\f17a";
}
.pi-android:before {
content: "\f17b";
}
.pi-linux:before {
content: "\f17c";
}
.pi-dribbble:before {
content: "\f17d";
}
.pi-skype:before {
content: "\f17e";
}
.pi-foursquare:before {
content: "\f180";
}
.pi-trello:before {
content: "\f181";
}
.pi-female:before {
content: "\f182";
}
.pi-male:before {
content: "\f183";
}
.pi-gittip:before {
content: "\f184";
}
.pi-sun-o:before {
content: "\f185";
}
.pi-moon-o:before {
content: "\f186";
}
.pi-archive:before {
content: "\f187";
}
.pi-bug:before {
content: "\f188";
}
.pi-vk:before {
content: "\f189";
}
.pi-weibo:before {
content: "\f18a";
}
.pi-renren:before {
content: "\f18b";
}
.pi-pagelines:before {
content: "\f18c";
}
.pi-stack-exchange:before {
content: "\f18d";
}
.pi-arrow-circle-o-right:before {
content: "\f18e";
}
.pi-arrow-circle-o-left:before {
content: "\f190";
}
.pi-toggle-left:before,
.pi-caret-square-o-left:before {
content: "\f191";
}
.pi-dot-circle-o:before {
content: "\f192";
}
.pi-wheelchair:before {
content: "\f193";
}
.pi-vimeo-square:before {
content: "\f194";
}
.pi-turkish-lira:before,
.pi-try:before {
content: "\f195";
}
.pi-plus-square-o:before {
content: "\f196";
}
.pi-space-shuttle:before {
content: "\f197";
}
.pi-slack:before {
content: "\f198";
}
.pi-envelope-square:before {
content: "\f199";
}
.pi-wordpress:before {
content: "\f19a";
}
.pi-openid:before {
content: "\f19b";
}
.pi-institution:before,
.pi-bank:before,
.pi-university:before {
content: "\f19c";
}
.pi-mortar-board:before,
.pi-graduation-cap:before {
content: "\f19d";
}
.pi-yahoo:before {
content: "\f19e";
}
.pi-google:before {
content: "\f1a0";
}
.pi-reddit:before {
content: "\f1a1";
}
.pi-reddit-square:before {
content: "\f1a2";
}
.pi-stumbleupon-circle:before {
content: "\f1a3";
}
.pi-stumbleupon:before {
content: "\f1a4";
}
.pi-delicious:before {
content: "\f1a5";
}
.pi-digg:before {
content: "\f1a6";
}
.pi-pied-piper:before {
content: "\f1a7";
}
.pi-pied-piper-alt:before {
content: "\f1a8";
}
.pi-drupal:before {
content: "\f1a9";
}
.pi-joomla:before {
content: "\f1aa";
}
.pi-language:before {
content: "\f1ab";
}
.pi-pix:before {
content: "\f1ac";
}
.pi-building:before {
content: "\f1ad";
}
.pi-child:before {
content: "\f1ae";
}
.pi-paw:before {
content: "\f1b0";
}
.pi-spoon:before {
content: "\f1b1";
}
.pi-cube:before {
content: "\f1b2";
}
.pi-cubes:before {
content: "\f1b3";
}
.pi-behance:before {
content: "\f1b4";
}
.pi-behance-square:before {
content: "\f1b5";
}
.pi-steam:before {
content: "\f1b6";
}
.pi-steam-square:before {
content: "\f1b7";
}
.pi-recycle:before {
content: "\f1b8";
}
.pi-automobile:before,
.pi-car:before {
content: "\f1b9";
}
.pi-cab:before,
.pi-taxi:before {
content: "\f1ba";
}
.pi-tree:before {
content: "\f1bb";
}
.pi-spotify:before {
content: "\f1bc";
}
.pi-deviantart:before {
content: "\f1bd";
}
.pi-soundcloud:before {
content: "\f1be";
}
.pi-database:before {
content: "\f1c0";
}
.pi-file-pdf-o:before {
content: "\f1c1";
}
.pi-file-word-o:before {
content: "\f1c2";
}
.pi-file-excel-o:before {
content: "\f1c3";
}
.pi-file-powerpoint-o:before {
content: "\f1c4";
}
.pi-file-photo-o:before,
.pi-file-picture-o:before,
.pi-file-image-o:before {
content: "\f1c5";
}
.pi-file-zip-o:before,
.pi-file-archive-o:before {
content: "\f1c6";
}
.pi-file-sound-o:before,
.pi-file-audio-o:before {
content: "\f1c7";
}
.pi-file-movie-o:before,
.pi-file-video-o:before {
content: "\f1c8";
}
.pi-file-code-o:before {
content: "\f1c9";
}
.pi-vine:before {
content: "\f1ca";
}
.pi-codepen:before {
content: "\f1cb";
}
.pi-jsfiddle:before {
content: "\f1cc";
}
.pi-life-bouy:before,
.pi-life-buoy:before,
.pi-life-saver:before,
.pi-support:before,
.pi-life-ring:before {
content: "\f1cd";
}
.pi-circle-o-notch:before {
content: "\f1ce";
}
.pi-ra:before,
.pi-rebel:before {
content: "\f1d0";
}
.pi-ge:before,
.pi-empire:before {
content: "\f1d1";
}
.pi-git-square:before {
content: "\f1d2";
}
.pi-git:before {
content: "\f1d3";
}
.pi-hacker-news:before {
content: "\f1d4";
}
.pi-tencent-weibo:before {
content: "\f1d5";
}
.pi-qq:before {
content: "\f1d6";
}
.pi-wechat:before,
.pi-weixin:before {
content: "\f1d7";
}
.pi-send:before,
.pi-paper-plane:before {
content: "\f1d8";
}
.pi-send-o:before,
.pi-paper-plane-o:before {
content: "\f1d9";
}
.pi-history:before {
content: "\f1da";
}
.pi-circle-thin:before {
content: "\f1db";
}
.pi-header:before {
content: "\f1dc";
}
.pi-paragraph:before {
content: "\f1dd";
}
.pi-sliders:before {
content: "\f1de";
}
.pi-share-alt:before {
content: "\f1e0";
}
.pi-share-alt-square:before {
content: "\f1e1";
}
.pi-bomb:before {
content: "\f1e2";
}
.pi-soccer-ball-o:before,
.pi-futbol-o:before {
content: "\f1e3";
}
.pi-tty:before {
content: "\f1e4";
}
.pi-binoculars:before {
content: "\f1e5";
}
.pi-plug:before {
content: "\f1e6";
}
.pi-slideshare:before {
content: "\f1e7";
}
.pi-twitch:before {
content: "\f1e8";
}
.pi-yelp:before {
content: "\f1e9";
}
.pi-newspaper-o:before {
content: "\f1ea";
}
.pi-wifi:before {
content: "\f1eb";
}
.pi-calculator:before {
content: "\f1ec";
}
.pi-paypal:before {
content: "\f1ed";
}
.pi-google-wallet:before {
content: "\f1ee";
}
.pi-cc-visa:before {
content: "\f1f0";
}
.pi-cc-mastercard:before {
content: "\f1f1";
}
.pi-cc-discover:before {
content: "\f1f2";
}
.pi-cc-amex:before {
content: "\f1f3";
}
.pi-cc-paypal:before {
content: "\f1f4";
}
.pi-cc-stripe:before {
content: "\f1f5";
}
.pi-bell-slash:before {
content: "\f1f6";
}
.pi-bell-slash-o:before {
content: "\f1f7";
}
.pi-trash:before {
content: "\f1f8";
}
.pi-copyright:before {
content: "\f1f9";
}
.pi-at:before {
content: "\f1pi";
}
.pi-eyedropper:before {
content: "\f1fb";
}
.pi-paint-brush:before {
content: "\f1fc";
}
.pi-birthday-cake:before {
content: "\f1fd";
}
.pi-area-chart:before {
content: "\f1fe";
}
.pi-pie-chart:before {
content: "\f200";
}
.pi-line-chart:before {
content: "\f201";
}
.pi-lastfm:before {
content: "\f202";
}
.pi-lastfm-square:before {
content: "\f203";
}
.pi-toggle-off:before {
content: "\f204";
}
.pi-toggle-on:before {
content: "\f205";
}
.pi-bicycle:before {
content: "\f206";
}
.pi-bus:before {
content: "\f207";
}
.pi-ioxhost:before {
content: "\f208";
}
.pi-angellist:before {
content: "\f209";
}
.pi-cc:before {
content: "\f20a";
}
.pi-shekel:before,
.pi-sheqel:before,
.pi-ils:before {
content: "\f20b";
}
.pi-meanpath:before {
content: "\f20c";
}
/* Functional styling;
* These styles are required for noUiSlider to function.
* You don't need to change these rules to apply your design.
*/
.noUi-target,
.noUi-target * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-ms-touch-action: none;
-ms-user-select: none;
-moz-user-select: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-base {
width: 100%;
height: 100%;
position: relative;
}
.noUi-origin {
position: absolute;
right: 0;
top: 0;
left: 0;
bottom: 0;
}
.noUi-handle {
position: relative;
z-index: 1;
}
.noUi-stacking .noUi-handle {
/* This class is applied to the lower origin when
its values is > 50%. */
z-index: 10;
}
.noUi-stacking + .noUi-origin {
/* Fix stacking order in IE7, which incorrectly
creates a new context for the origins. */
*z-index: -1;
}
.noUi-state-tap .noUi-origin {
-webkit-transition: left 0.3s, top 0.3s;
transition: left 0.3s, top 0.3s;
}
.noUi-state-drag * {
cursor: inherit !important;
}
/* Slider size and handle placement;
*/
.noUi-horizontal {
height: 7px;
}
.noUi-horizontal .noUi-handle {
width: 34px;
height: 28px;
left: -17px;
top: -6px;
}
.noUi-horizontal.noUi-extended {
padding: 0 15px;
}
.noUi-horizontal.noUi-extended .noUi-origin {
right: -15px;
}
.noUi-vertical {
width: 18px;
}
.noUi-vertical .noUi-handle {
width: 28px;
height: 34px;
left: -6px;
top: -17px;
}
.noUi-vertical.noUi-extended {
padding: 15px 0;
}
.noUi-vertical.noUi-extended .noUi-origin {
bottom: -15px;
}
/* Styling;
*/
.noUi-background {
background: url("https://www.poptents.uk/js/pdp/images/slider_nice.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.noUi-connect {
background: #3FB8AF;
}
.noUi-origin {
border-radius: 2px;
}
.noUi-target {
border: medium none;
border-radius: 0;
box-shadow: none;
float: left;
margin: 9px 0 10px;
max-width: 260px;
width: 45%;
}
.noUi-target.noUi-connect {
}
/* Handles and cursors;
*/
.noUi-dragable {
cursor: w-resize;
}
.noUi-vertical .noUi-dragable {
cursor: n-resize;
}
.noUi-handle {
background: url("https://www.poptents.uk/js/pdp/images/slider_nice.png") no-repeat scroll 0 -91px rgba(0, 0, 0, 0);
cursor: grab;
}
.noUi-active {
background: url("https://www.poptents.uk/js/pdp/images/slider_nice.png") no-repeat scroll 0 -121px rgba(0, 0, 0, 0);
cursor: grabbing;
}
/* Handle stripes;
*/
.noUi-handle2:before,
.noUi-handle2:after {
content: "";
display: block;
position: absolute;
height: 14px;
width: 1px;
background: #E8E7E6;
left: 14px;
top: 6px;
}
.noUi-handle2:after {
left: 17px;
}
.noUi-vertical .noUi-handle2:before,
.noUi-vertical .noUi-handle2:after {
width: 14px;
height: 1px;
left: 6px;
top: 14px;
}
.noUi-vertical .noUi-handle2:after {
top: 17px;
}
/* Disabled state;
*/
[disabled].noUi-connect,
[disabled] .noUi-connect {
background: #B8B8B8;
}
[disabled] .noUi-handle {
cursor: not-allowed;
}
/* Blocked state;
*/
.noUi-state-blocked.noUi-connect,
.noUi-state-blocked .noUi-connect {
background: #4FDACF;
}
/*
== malihu jquery custom scrollbar plugin ==
Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller
*/
/*
CONTENTS:
1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited).
2. VERTICAL SCROLLBAR - Positioning and dimensions of vertical scrollbar.
3. HORIZONTAL SCROLLBAR - Positioning and dimensions of horizontal scrollbar.
4. VERTICAL AND HORIZONTAL SCROLLBARS - Positioning and dimensions of 2-axis scrollbars.
5. TRANSITIONS - CSS3 transitions for hover events, auto-expanded and auto-hidden scrollbars.
6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS
6.1 THEMES - Scrollbar colors, opacity, dimensions, backgrounds etc. via ready-to-use themes.
*/
/*
------------------------------------------------------------------------------------------------------------------------
1. BASIC STYLE
------------------------------------------------------------------------------------------------------------------------
*/
.mCustomScrollbar{ -ms-touch-action: none; touch-action: none; /* MSPointer events - direct all pointer events to js */ }
.mCustomScrollbar.mCS_no_scrollbar{ -ms-touch-action: auto; touch-action: auto; }
.mCustomScrollBox{ /* contains plugin's markup */
position: relative;
overflow: hidden;
height: 100%;
max-width: 100%;
outline: none;
direction: ltr;
}
.mCSB_container{ /* contains the original content */
overflow: hidden;
width: auto;
height: auto;
}
/*
------------------------------------------------------------------------------------------------------------------------
2. VERTICAL SCROLLBAR
y-axis
------------------------------------------------------------------------------------------------------------------------
*/
.mCSB_inside > .mCSB_container{ margin-right: 30px; }
.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; } /* non-visible scrollbar */
.mCS-dir-rtl > .mCSB_inside > .mCSB_container{ /* RTL direction/left-side scrollbar */
margin-right: 0;
margin-left: 30px;
}
.mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-left: 0; } /* RTL direction/left-side scrollbar */
.mCSB_scrollTools{ /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */
position: absolute;
width: 16px;
height: auto;
left: auto;
top: 0;
right: 0;
bottom: 0;
}
.mCSB_outside + .mCSB_scrollTools{ right: -26px; } /* scrollbar position: outside */
.mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools,
.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ /* RTL direction/left-side scrollbar */
right: auto;
left: 0;
}
.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ left: -26px; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */
.mCSB_scrollTools .mCSB_draggerContainer{ /* contains the draggable element and dragger rail markup */
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: auto;
}
.mCSB_scrollTools a + .mCSB_draggerContainer{ margin: 20px 0; }
.mCSB_scrollTools .mCSB_draggerRail{
width: 2px;
height: 100%;
margin: 0 auto;
-webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px;
}
.mCSB_scrollTools .mCSB_dragger{ /* the draggable element */
cursor: pointer;
width: 100%;
height: 30px; /* minimum dragger height */
z-index: 1;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* the dragger element */
position: relative;
width: 4px;
height: 100%;
margin: 0 auto;
-webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px;
text-align: center;
}
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 12px; /* auto-expanded scrollbar */ }
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 8px; /* auto-expanded scrollbar */ }
.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown{
display: block;
position: absolute;
height: 20px;
width: 100%;
overflow: hidden;
margin: 0 auto;
cursor: pointer;
}
.mCSB_scrollTools .mCSB_buttonDown{ bottom: 0; }
/*
------------------------------------------------------------------------------------------------------------------------
3. HORIZONTAL SCROLLBAR
x-axis
------------------------------------------------------------------------------------------------------------------------
*/
.mCSB_horizontal.mCSB_inside > .mCSB_container{
margin-right: 0;
margin-bottom: 30px;
}
.mCSB_horizontal.mCSB_outside > .mCSB_container{ min-height: 100%; }
.mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* non-visible scrollbar */
.mCSB_scrollTools.mCSB_scrollTools_horizontal{
width: auto;
height: 16px;
top: auto;
right: 0;
bottom: 0;
left: 0;
}
.mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: -26px; } /* scrollbar position: outside */
.mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer{ margin: 0 20px; }
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail{
width: 100%;
height: 2px;
margin: 7px 0;
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{
width: 30px; /* minimum dragger width */
height: 100%;
left: 0;
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
width: 100%;
height: 4px;
margin: 6px auto;
}
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{
height: 12px; /* auto-expanded scrollbar */
margin: 2px auto;
}
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{
height: 8px; /* auto-expanded scrollbar */
margin: 4px 0;
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft,
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{
display: block;
position: absolute;
width: 20px;
height: 100%;
overflow: hidden;
margin: 0 auto;
cursor: pointer;
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft{ left: 0; }
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ right: 0; }
/*
------------------------------------------------------------------------------------------------------------------------
4. VERTICAL AND HORIZONTAL SCROLLBARS
yx-axis
------------------------------------------------------------------------------------------------------------------------
*/
.mCSB_container_wrapper{
position: absolute;
height: auto;
width: auto;
overflow: hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-right: 30px;
margin-bottom: 30px;
}
.mCSB_container_wrapper > .mCSB_container{
padding-right: 30px;
padding-bottom: 30px;
}
.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 20px; }
.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 20px; }
/* non-visible horizontal scrollbar */
.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 0; }
/* non-visible vertical scrollbar/RTL direction/left-side scrollbar */
.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 0; }
/* RTL direction/left-side scrollbar */
.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 20px; }
/* non-visible scrollbar/RTL direction/left-side scrollbar */
.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 0; }
.mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper{ /* RTL direction/left-side scrollbar */
margin-right: 0;
margin-left: 30px;
}
.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container{
padding-right: 0;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container{
padding-bottom: 0;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden{
margin-right: 0; /* non-visible scrollbar */
margin-left: 0;
}
/* non-visible horizontal scrollbar */
.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; }
/*
------------------------------------------------------------------------------------------------------------------------
5. TRANSITIONS
------------------------------------------------------------------------------------------------------------------------
*/
.mCSB_scrollTools,
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown,
.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_scrollTools .mCSB_buttonRight{
-webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
-o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
}
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, /* auto-expanded scrollbar */
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail{
-webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s,
margin-left .2s ease-out .2s, margin-right .2s ease-out .2s,
margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
opacity .2s ease-in-out, background-color .2s ease-in-out;
-moz-transition: width .2s ease-out .2s, height .2s ease-out .2s,
margin-left .2s ease-out .2s, margin-right .2s ease-out .2s,
margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
opacity .2s ease-in-out, background-color .2s ease-in-out;
-o-transition: width .2s ease-out .2s, height .2s ease-out .2s,
margin-left .2s ease-out .2s, margin-right .2s ease-out .2s,
margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
opacity .2s ease-in-out, background-color .2s ease-in-out;
transition: width .2s ease-out .2s, height .2s ease-out .2s,
margin-left .2s ease-out .2s, margin-right .2s ease-out .2s,
margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
opacity .2s ease-in-out, background-color .2s ease-in-out;
}
/*
------------------------------------------------------------------------------------------------------------------------
6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS
------------------------------------------------------------------------------------------------------------------------
*/
/*
----------------------------------------
6.1 THEMES
----------------------------------------
*/
/* default theme ("light") */
.mCSB_scrollTools{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; }
.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 0; filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)"; }
.mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag,
.mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag,
.mCustomScrollBox:hover > .mCSB_scrollTools,
.mCustomScrollBox:hover ~ .mCSB_scrollTools,
.mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools,
.mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; }
.mCSB_scrollTools .mCSB_draggerRail{
background-color: #000; background-color: rgba(0,0,0,0.4);
filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)";
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
background-color: #fff; background-color: rgba(255,255,255,0.75);
filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)";
}
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
background-color: #fff; background-color: rgba(255,255,255,0.85);
filter: "alpha(opacity=85)"; -ms-filter: "alpha(opacity=85)";
}
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
background-color: #fff; background-color: rgba(255,255,255,0.9);
filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)";
}
.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown,
.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_scrollTools .mCSB_buttonRight{
background-image: url(https://www.poptents.uk/js/pdp/css/mCSB_buttons.png); /* css sprites */
background-repeat: no-repeat;
opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)";
}
.mCSB_scrollTools .mCSB_buttonUp{
background-position: 0 0;
/*
sprites locations
light: 0 0, -16px 0, -32px 0, -48px 0, 0 -72px, -16px -72px, -32px -72px
dark: -80px 0, -96px 0, -112px 0, -128px 0, -80px -72px, -96px -72px, -112px -72px
*/
}
.mCSB_scrollTools .mCSB_buttonDown{
background-position: 0 -20px;
/*
sprites locations
light: 0 -20px, -16px -20px, -32px -20px, -48px -20px, 0 -92px, -16px -92px, -32px -92px
dark: -80px -20px, -96px -20px, -112px -20px, -128px -20px, -80px -92px, -96px -92px, -112 -92px
*/
}
.mCSB_scrollTools .mCSB_buttonLeft{
background-position: 0 -40px;
/*
sprites locations
light: 0 -40px, -20px -40px, -40px -40px, -60px -40px, 0 -112px, -20px -112px, -40px -112px
dark: -80px -40px, -100px -40px, -120px -40px, -140px -40px, -80px -112px, -100px -112px, -120px -112px
*/
}
.mCSB_scrollTools .mCSB_buttonRight{
background-position: 0 -56px;
/*
sprites locations
light: 0 -56px, -20px -56px, -40px -56px, -60px -56px, 0 -128px, -20px -128px, -40px -128px
dark: -80px -56px, -100px -56px, -120px -56px, -140px -56px, -80px -128px, -100px -128px, -120px -128px
*/
}
.mCSB_scrollTools .mCSB_buttonUp:hover,
.mCSB_scrollTools .mCSB_buttonDown:hover,
.mCSB_scrollTools .mCSB_buttonLeft:hover,
.mCSB_scrollTools .mCSB_buttonRight:hover{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; }
.mCSB_scrollTools .mCSB_buttonUp:active,
.mCSB_scrollTools .mCSB_buttonDown:active,
.mCSB_scrollTools .mCSB_buttonLeft:active,
.mCSB_scrollTools .mCSB_buttonRight:active{ opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; }
/* theme: "dark" */
.mCS-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); }
.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }
.mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.85); }
.mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.9); }
.mCS-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; }
.mCS-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; }
.mCS-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; }
.mCS-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; }
/* ---------------------------------------- */
/* theme: "light-2", "dark-2" */
.mCS-light-2.mCSB_scrollTools .mCSB_draggerRail,
.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{
width: 4px;
background-color: #fff; background-color: rgba(255,255,255,0.1);
-webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
}
.mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width: 4px;
background-color: #fff; background-color: rgba(255,255,255,0.75);
-webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
}
.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
width: 100%;
height: 4px;
margin: 6px auto;
}
.mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); }
.mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); }
.mCS-light-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px 0; }
.mCS-light-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -20px; }
.mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -40px; }
.mCS-light-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -56px; }
/* theme: "dark-2" */
.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{
background-color: #000; background-color: rgba(0,0,0,0.1);
-webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
}
.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
background-color: #000; background-color: rgba(0,0,0,0.75);
-webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
}
.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }
.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
.mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px 0; }
.mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -20px; }
.mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -40px; }
.mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -56px; }
/* ---------------------------------------- */
/* theme: "light-thick", "dark-thick" */
.mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail,
.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{
width: 4px;
background-color: #fff; background-color: rgba(255,255,255,0.1);
-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
}
.mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width: 6px;
background-color: #fff; background-color: rgba(255,255,255,0.75);
-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
}
.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail{
width: 100%;
height: 4px;
margin: 6px 0;
}
.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
width: 100%;
height: 6px;
margin: 5px auto;
}
.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); }
.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); }
.mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px 0; }
.mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -20px; }
.mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -40px; }
.mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -56px; }
/* theme: "dark-thick" */
.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{
background-color: #000; background-color: rgba(0,0,0,0.1);
-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
}
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
background-color: #000; background-color: rgba(0,0,0,0.75);
-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
}
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px 0; }
.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -20px; }
.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -40px; }
.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -56px; }
/* ---------------------------------------- */
/* theme: "light-thin", "dark-thin" */
.mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.1); }
.mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 2px; }
.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; }
.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
width: 100%;
height: 2px;
margin: 7px auto;
}
/* theme "dark-thin" */
.mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); }
.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }
.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }
.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; }
.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; }
.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; }
.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; }
/* ---------------------------------------- */
/* theme "rounded", "rounded-dark", "rounded-dots", "rounded-dots-dark" */
.mCS-rounded.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.15); }
.mCS-rounded.mCSB_scrollTools .mCSB_dragger,
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger,
.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger,
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger{ height: 14px; }
.mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width: 14px;
margin: 0 1px;
}
.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger,
.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger,
.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger,
.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 14px; }
.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
height: 14px;
margin: 1px 0;
}
.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{
width: 16px; /* auto-expanded scrollbar */
height: 16px;
margin: -1px 0;
}
.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,
.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 4px; /* auto-expanded scrollbar */ }
.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{
height: 16px; /* auto-expanded scrollbar */
width: 16px;
margin: 0 -1px;
}
.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,
.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{
height: 4px; /* auto-expanded scrollbar */
margin: 6px 0;
}
.mCS-rounded.mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 -72px; }
.mCS-rounded.mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -92px; }
.mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft{ background-position: 0 -112px; }
.mCS-rounded.mCSB_scrollTools .mCSB_buttonRight{ background-position: 0 -128px; }
/* theme "rounded-dark", "rounded-dots-dark" */
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }
.mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); }
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px -72px; }
.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -92px; }
.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -112px; }
.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -128px; }
/* theme "rounded-dots", "rounded-dots-dark" */
.mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail,
.mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail{ width: 4px; }
.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail,
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{
background-color: transparent;
background-position: center;
}
.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail,
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{
background-image: url("https://www.poptents.uk/js/pdp/css/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==");
background-repeat: repeat-y;
opacity: 0.3;
filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)";
}
.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{
height: 4px;
margin: 6px 0;
background-repeat: repeat-x;
}
.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px -72px; }
.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -92px; }
.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -112px; }
.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -128px; }
/* theme "rounded-dots-dark" */
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{
background-image: url("https://www.poptents.uk/js/pdp/css/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII=");
}
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px -72px; }
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -92px; }
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -112px; }
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -128px; }
/* ---------------------------------------- */
/* theme "3d", "3d-dark", "3d-thick", "3d-thick-dark" */
.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
background-repeat: repeat-y;
background-image: -moz-linear-gradient(left, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
background-image: -o-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
background-image: -ms-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
background-image: linear-gradient(to right, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
}
.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
background-repeat: repeat-x;
background-image: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
}
/* theme "3d", "3d-dark" */
.mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger,
.mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 70px; }
.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger,
.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 70px; }
.mCS-3d.mCSB_scrollTools,
.mCS-3d-dark.mCSB_scrollTools{
opacity: 1;
filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)";
}
.mCS-3d.mCSB_scrollTools .mCSB_draggerRail,
.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; }
.mCS-3d.mCSB_scrollTools .mCSB_draggerRail,
.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{
width: 8px;
background-color: #000; background-color: rgba(0,0,0,0.2);
box-shadow: inset 1px 0 1px rgba(0,0,0,0.5), inset -1px 0 1px rgba(255,255,255,0.2);
}
.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; }
.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 8px; }
.mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{
width: 100%;
height: 8px;
margin: 4px 0;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.2);
}
.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
width: 100%;
height: 8px;
margin: 4px auto;
}
.mCS-3d.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; }
.mCS-3d.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; }
.mCS-3d.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; }
.mCS-3d.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; }
/* theme "3d-dark" */
.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{
background-color: #000; background-color: rgba(0,0,0,0.1);
box-shadow: inset 1px 0 1px rgba(0,0,0,0.1);
}
.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); }
.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; }
.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; }
.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; }
.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; }
/* ---------------------------------------- */
/* theme: "3d-thick", "3d-thick-dark" */
.mCS-3d-thick.mCSB_scrollTools,
.mCS-3d-thick-dark.mCSB_scrollTools{
opacity: 1;
filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)";
}
.mCS-3d-thick.mCSB_scrollTools,
.mCS-3d-thick-dark.mCSB_scrollTools,
.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer,
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; }
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical,
.mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ right: 1px; }
.mCS-3d-thick.mCSB_scrollTools_vertical,
.mCS-3d-thick-dark.mCSB_scrollTools_vertical{ box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); }
.mCS-3d-thick.mCSB_scrollTools_horizontal,
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal{
bottom: 1px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5);
}
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
box-shadow: inset 1px 0 0 rgba(255,255,255,0.4);
width: 12px;
margin: 2px;
position: absolute;
height: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); }
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; }
.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
height: 12px;
width: auto;
}
.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{
background-color: #000; background-color: rgba(0,0,0,0.05);
box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1);
}
.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; }
.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; }
.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; }
.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; }
.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; }
/* theme: "3d-thick-dark" */
.mCS-3d-thick-dark.mCSB_scrollTools{ box-shadow: inset 0 0 14px rgba(0,0,0,0.2); }
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.2); }
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 1px 0 0 rgba(255,255,255,0.4), inset -1px 0 0 rgba(0,0,0,0.2); }
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.2); }
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #777; }
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{
background-color: #fff; background-color: rgba(0,0,0,0.05);
box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1);
}
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; }
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; }
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; }
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; }
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; }
/* ---------------------------------------- */
/* theme: "minimal", "minimal-dark" */
.mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical,
.mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{
right: 0;
margin: 12px 0;
}
.mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{
bottom: 0;
margin: 0 12px;
}
/* RTL direction/left-side scrollbar */
.mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical,
.mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{
left: 0;
right: auto;
}
.mCS-minimal.mCSB_scrollTools .mCSB_draggerRail,
.mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; }
.mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger,
.mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 50px; }
.mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger,
.mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 50px; }
.mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
background-color: #fff; background-color: rgba(255,255,255,0.2);
filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)";
}
.mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
background-color: #fff; background-color: rgba(255,255,255,0.5);
filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)";
}
/* theme: "minimal-dark" */
.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
background-color: #000; background-color: rgba(0,0,0,0.2);
filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)";
}
.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
background-color: #000; background-color: rgba(0,0,0,0.5);
filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)";
}
/* ---------------------------------------- */
/* theme "light-3", "dark-3" */
.mCS-light-3.mCSB_scrollTools .mCSB_draggerRail,
.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{
width: 6px;
background-color: #000; background-color: rgba(0,0,0,0.2);
}
.mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; }
.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail{
width: 100%;
height: 6px;
margin: 5px 0;
}
.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,
.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{
width: 12px;
}
.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,
.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{
height: 12px;
margin: 2px 0;
}
.mCS-light-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; }
.mCS-light-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; }
.mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; }
.mCS-light-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; }
/* theme "dark-3" */
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); }
.mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; }
.mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; }
.mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; }
.mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; }
/* ---------------------------------------- */
/* theme "inset", "inset-dark", "inset-2", "inset-2-dark", "inset-3", "inset-3-dark" */
.mCS-inset.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{
width: 12px;
background-color: #000; background-color: rgba(0,0,0,0.2);
}
.mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width: 6px;
margin: 3px 5px;
position: absolute;
height: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
height: 6px;
margin: 5px 3px;
position: absolute;
width: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{
width: 100%;
height: 12px;
margin: 2px 0;
}
.mCS-inset.mCSB_scrollTools .mCSB_buttonUp,
.mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp,
.mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; }
.mCS-inset.mCSB_scrollTools .mCSB_buttonDown,
.mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown,
.mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; }
.mCS-inset.mCSB_scrollTools .mCSB_buttonLeft,
.mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft,
.mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; }
.mCS-inset.mCSB_scrollTools .mCSB_buttonRight,
.mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight,
.mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; }
/* theme "inset-dark", "inset-2-dark", "inset-3-dark" */
.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }
.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }
.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); }
.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; }
.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; }
.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; }
.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; }
/* theme "inset-2", "inset-2-dark" */
.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{
background-color: transparent;
border-width: 1px;
border-style: solid;
border-color: #fff;
border-color: rgba(255,255,255,0.2);
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ border-color: #000; border-color: rgba(0,0,0,0.2); }
/* theme "inset-3", "inset-3-dark" */
.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.6); }
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.6); }
.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }
.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }
.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); }
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); }
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); }
/* ---------------------------------------- */
/**
* Farbtastic Color Picker 1.2
* © 2008 Steven Wittens
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
*/
.farbtastic {
position: relative;
}
.farbtastic * {
position: absolute;
cursor: crosshair;
}
.farbtastic, .farbtastic .wheel {
width: 195px;
height: 195px;
}
.farbtastic .color, .farbtastic .overlay {
top: 47px;
left: 47px;
width: 101px;
height: 101px;
}
.farbtastic .wheel {
background: url(https://www.poptents.uk/js/pdp/images/wheel.png) no-repeat;
width: 195px;
height: 195px;
}
.farbtastic .overlay {
background: url(https://www.poptents.uk/js/pdp/images/mask.png) no-repeat;
}
.farbtastic .marker {
width: 17px;
height: 17px;
margin: -8px 0 0 -8px;
overflow: hidden;
background: url(https://www.poptents.uk/js/pdp/images/marker.png) no-repeat;
}
.stickytooltip{
box-shadow: 5px 5px 8px #818181; /*shadow for CSS3 capable browsers.*/
-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
display:none;
position:absolute;
display:none;
border:5px solid black; /*Border around tooltip*/
background:white;
z-index:3000;
}
.stickytooltip.sticky{
border: 5px solid #E55725;
}
.stickytooltip .stickystatus{ /*Style for footer bar within tooltip*/
background:black;
color:white;
padding-top:5px;
text-align:center;
font:bold 11px Arial;
}
.stickytooltip .stickystatus.sticky{
background: #E55725;
}
#pdp_info_item{display:none!important;}
#pdp_toolbox {
position: absolute;
right: 20px;
/*top: 60px;*/
top:282px;
width: 300px;
z-index:500;
}
.preview {
clear: both;
display: block;
float: none;
margin-bottom: 5px;
padding: 0;
width: 100%;
}
#pdp_toolbox > input#tool_expand ~ .ac-container,
#pdp_toolbox > input#tool_pricing ~ .ac-container{
overflow: hidden;
}
#pdp_toolbox > input#tool_expand:checked ~ .ac-container,
#pdp_toolbox > input#tool_pricing:checked ~ .ac-container {
overflow: visible;
}
#pdp_toolbox > input#tool_expand:checked ~ .ac-container .prices{display:none;}
#pdp_toolbox > input#tool_expand:checked ~ .ac-container .tools{display:block;}
#pdp_toolbox > input#tool_pricing:checked ~ .ac-container .tools{ display:none;}
#pdp_toolbox > input#tool_pricing:checked ~ .ac-container .prices{ display:block;}
#pdp_toolbox > input#tool_pricing:checked ~ .ac-container .prices > label {min-width:258px;}
.ac-container {
background: none repeat scroll 0 0 rgb(255, 255, 255);
border: 0 solid rgba(0, 0, 0, 0);
border-radius: 0;
display: block;
float: right;
height: 0;
margin: 0;
overflow: visible;
padding: 0;
text-align: left;
/* transition: all 0.3s ease 0s; */
width: auto;
}
#pdp_toolbox > input {
display: none;
}
#pdp_toolbox > label {
/*background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);*/
background:#01009a !important;
border-radius: 5px 5px 0 0;
color: #ffffff;
cursor: pointer;
display: block;
float: right;
font-size: 15px;
font-weight: bold;
line-height: 32px;
margin-bottom: 0;
margin-left: 1px;
overflow: hidden;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
text-align: left;
width:300px;
}
#pdp_toolbox > input:checked ~ .pdp-toolbox {
border: 1px solid #3399cc;
height: auto;
}
/* .ac-container > div > label{
color: #777;
cursor: pointer;
display: block;
font-size: 18px;
height: 30px;
line-height: 30px;
padding: 5px 20px;
position: relative;
z-index: 20;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 1%, #eeeeee 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eeeeee));
background: -webkit-linear-gradient(top, #ffffff 1%,#eeeeee 100%);
background: -o-linear-gradient(top, #ffffff 1%,#eeeeee 100%);
background: -ms-linear-gradient(top, #ffffff 1%,#eeeeee 100%);
background: linear-gradient(top, #ffffff 1%,#eeeeee 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
1px 0px 0px 0px rgba(255,255,255,0.9) inset,
0px 2px 2px rgba(0,0,0,0.1);
} */
.ac-container > div > label {
background: none repeat scroll 0 0 #fff;
box-shadow: none;
color: #464646;
cursor: pointer;
display: block;
font-size: 14px;
font-weight: normal;
line-height: 30px;
padding: 5px 20px;
position: relative;
z-index: 20;
border-top:solid 1px #c4c4c4;
}
.ac-container > div > label:hover {
color: #000000;
}
.ac-container > div > input + label:before {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #333333 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
border-image: none;
border-style: solid;
border-width: 7px;
content: "";
position: absolute;
right: 10px;
top: 15px;
}
.ac-container > div > input:checked + label:before {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #d2181d rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
border-image: none;
border-style: solid;
border-width: 7px;
content: "";
height: 0;
position: absolute;
right: 10px;
top: 15px;
width: 0;
}
.ac-container > div > input:checked + label, .ac-container > div > input:checked + label:hover {
/* box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 2px 2px rgba(0, 0, 0, 0.1); */
color: #f91c1c;
}
.ac-container > div > label:hover:after,
.ac-container > div > input:checked + label:hover:after{
content: '';
position: absolute;
width: 24px;
height: 24px;
right: 13px;
top: 7px;
}
.ac-container > div > input:checked + label:hover:after{
}
.ac-container > div > input {
display: none;
}
.ac-container article {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5);
border: 1px solid #ffffff;
height: 0;
margin-bottom: 0;
margin-top: 0;
overflow: hidden;
position: relative;
z-index: 10;
/* -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
transition: height 0.3s ease-in-out, box-shadow 0.6s linear; */
}
.ac-container article p{
font-style: normal;
color: #464646;
line-height: 18px;
font-size: 14px;
padding: 10px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
font-family: Arial;
}
.ac-container > div > input:checked ~ article {
overflow:visible;
/* -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
transition: height 0.5s ease-in-out, box-shadow 0.1s linear; */
}
.ac-container > div > input:checked ~ article.ac-small{
height: 140px;
}
.ac-container > div > input:checked ~ article.ac-medium {
height: 190px;
}
.ac-container > div > input:checked ~ article.ac-large{
height: 285px;
padding-top:5px;
}
/* Quick Tools */
.quick_tools {
clear: both;
display: block;
float: none;
padding: 0 2px;
}
.quick_tools .pdp_btn {
border: 1px dotted rgb(128, 210, 153);
display: inline-block;
float: none;
margin-bottom: 5px;
}
.pdp_btn_warming:hover {
background:#ccc;
}
.pdp_btn_warming {
background: #eee;
}
.pdp_btn_danger:hover {
background:#1919a1;
}
.pdp_btn_danger {
background: none repeat scroll 0 0 #f91c1c;
color: #fff;
}
.pdp_btn_small {
font-size: 12px;
font-weight: normal;
line-height: 1;
padding: 10px;
white-space: nowrap;
}
.pdp_btn {
border: medium none;
cursor: pointer;
display: block;
margin: 0;
padding: 10px 0;
text-align: center;
transition: all 0.3s ease 0s;
}
.pdp_btn_primary:hover{
background:rgba(227, 65, 32,0.7);
color:#fff;
}
.pdp_btn_primary {
background: none repeat scroll 0 0 #eee;
color: #000;
line-height: 30px;
text-transform: uppercase;
width: 100%;
transition: all 0.3s ease;
}
.pdp_btn_block{
display:block;
width:100%;
}
.pdp_btn_50 {
border-radius: 0px;
width: 142px;
}
/* Opacity Customizing */
#pdp_opacity_item {
background: none repeat scroll 0 0 #eeeeee;
border: 1px dotted #80d299;
border-radius: 0;
bottom: auto;
display: block !important;
float: none;
margin-bottom: 5px;
max-width: 289px;
min-height: 0;
overflow: hidden;
padding: 10px 0;
position: relative;
}
.ac-container .pdp_opacity_item label {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
box-shadow: none;
color: rgb(47, 47, 47);
font-size: 14px;
font-weight: normal;
height: auto;
line-height: 25px;
padding: 0 5px 0 10px;
}
#pdp_opacity_item span {
color: rgb(47, 47, 47);
float: left;
font-size: 14px;
line-height: 25px;
padding: 0 3px;
}
.noUi-origin {
background: #999;
border-radius: 0!important;
}
.noUi-base {
background: #80D299;
height: 100%;
position: relative;
width: 100%;
}
/* Layer Table Pricing */
.ac-container > div > input:checked ~ article.ac-medium.pricetable {
height: 190px;
max-height: 190px;
overflow: auto;
min-width:298px;
}
.layer_pricing{
width:100%;
max-width:100%;
border-spacing: 0;
border-collapse: collapse;
}
.layer_pricing >tbody>tr>td {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #ddd;
display:table-cell;
font-size:12px;
}
.layer_pricing>thead>tr>th, .layer_pricing>tfoot>tr>th {
vertical-align: bottom;
border-bottom: 2px solid #ddd;
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #ddd;
text-align:left;
display:table-cell;
font-size:12px;
font-weight:normal;
}
.layer_pricing > tfoot > tr > th {
border-bottom: 0 none;
border-top: 1px solid #efa14a;
font-weight: bold;
}
.layer_pricing>tbody>tr:nth-child(odd) {
background-color: #f9f9f9;
}
.layer_pricing img {
max-width: 30px;
}
/*---------------------------------new Css Here--------------------------------*/
.ac-container #wall_info_des span, .ac-container #valance_info_des span{ width:100%; float:left; color:#000; margin-bottom:8px;}
.wrapper_pdp #design_control #pdp_rotate_item ,
.pdp_edit_font_style li:hover,
#design_control .add_text_field,
#design_control .add_text_field .pdp_text_list ul li:hover,
.wrapper_pdp #design_control .tab_content,
#pdp_shadow_item,
.quick_tools .pdp_btn,
#pdp_opacity_item
{/*border-color: #80d299;*/ border:none;}
#add_text:before,
#select_image:before
{border-bottom-color: #80d299;}
.pdp_edit_font_style li:hover,
#design_control .add_text_field .pdp_text_list ul li:hover,
#save_design,
#save_design,
#design_control .pdp_text_title, #design_control .photo-art-title,
#select_font li:hover, #select_font li.active,
#design_control .pdp_side_title,
.tab_design_image a.active,
.noUi-base ,
#layer_pricing .pdp2_layer_item.active
{
background-color: #fff;
border:solid 2px #19199f;
color:#1a18a0;
}
.pdp_color_list ul li a.active:before, .pdp_color_list ul li a:hover:before,
.pdp_design_color li.active:before, .pdp_design_color li:hover:before,
#font_menu.showClose:before,
#font_menu
{
color:#212121;
font-weight:normal;
}
/* .wrapper_pdp .product-title{background:#87ceeb;} */
.content_designs #image_category_list .active,
.ac-container > div > label,
#pdp_rotate_item .pdp_rotate_wrap > label,
#pdp_toolbox > input:checked + label
{
background-color:#fff;
}
#pdp_toolbox > input:checked ~ .pdp-toolbox ,#pdp_side_items li.active img,
.content_designs #image_category_list,#select_font
{border-color:#c4c4c4; border-top:none;}
/* ===== NOTE USER MANUAL:
- Uncomment which colour icon you would like to show and comment other icons.
- Comment all to use default
====== */
/* ==== Colour icon: EGG ==== */
/* .pdp_color_list ul li a.active:before, .pdp_color_list ul li a:hover:before {
-webkit-border-radius: 30px;
border-radius: 100%;
height: 20px;
left: 5px;
top: 15px;
width: 20px;
}
.pdp_color_list ul li a {
border: 0 dotted #000000;
-webkit-border-radius: 15px / 24px 24px 16px 16px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
height: 40px;
width: 30px;
} */
/* ==== Colour icon: Circle ==== */
/* .pdp_color_list ul li a.active:before, .pdp_color_list ul li a:hover:before {left:5px;top:5px;}
.pdp_color_list ul li a {
border: 0 dotted #000000;
border-radius: 100%;
height: 30px;
width: 30px;
} */
/* ==== Colour icon: Heart ==== */
/* .pdp_color_list ul li:first-child a:before {
top: -5px !important;
}
.pdp_color_list ul li a:after {
background: url("https://www.poptents.uk/js/pdp/css/color_heart.png") no-repeat scroll center top rgba(0, 0, 0, 0);
content: "";
height: 26px;
left: 0;
position: absolute;
top: 0;
width: 30px;
z-index: 999;
}
.pdp_color_list ul li a {
border: 0 dotted rgba(0, 0, 0, 0);
height:26px;
}
.pdp_color_list ul li a.active:before, .pdp_color_list ul li a:hover:before {
background: none repeat scroll 0 0 #80d299;
border-color: #80d299;
border-radius: 20px;
border-style: solid;
border-width: 5px;
color: #ffffff!important;
height: 15px;
left: 16px;
line-height: 9px;
top: 0;
width: 15px;
z-index: 9999;
} */
/**
* BxSlider v4.1.2 - Fully loaded, responsive content slider
* http://bxslider.com
*
* Written by: Steven Wanderski, 2014
* http://stevenwanderski.com
* (while drinking Belgian ales and listening to jazz)
*
* CEO and founder of bxCreative, LTD
* http://bxcreative.com
*/
/** RESET AND LAYOUT
===================================*/
.bx-wrapper {
position: relative;
margin: 0 auto 60px;
padding: 0;
*zoom: 1;
}
.bx-wrapper img {
max-width: 100%;
display: block;
}
/** THEME
===================================*/
.bx-wrapper .bx-viewport {
/*fix other elements on the page moving (on Chrome)*/
-webkit-transform: translatez(0);
-moz-transform: translatez(0);
-ms-transform: translatez(0);
-o-transform: translatez(0);
transform: translatez(0);
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
position: absolute;
bottom: -30px;
width: 100%;
}
/* LOADER */
.bx-wrapper .bx-loading {
min-height: 50px;
background: url(https://www.poptents.eu/skin/frontend/tm_themes/theme772/images/bxslider/bx_loader.gif) center center no-repeat #fff;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2000;
}
/* PAGER */
.bx-wrapper .bx-pager {
text-align: center;
font-size: .85em;
font-family: Arial;
font-weight: bold;
color: #666;
padding-top: 20px;
}
.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
display: inline-block;
*zoom: 1;
*display: inline;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: #666;
text-indent: -9999px;
display: block;
width: 10px;
height: 10px;
margin: 0 5px;
outline: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
background: #000;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
left: 10px;
background: url(https://www.poptents.eu/skin/frontend/tm_themes/theme772/images/bxslider/controls.png) no-repeat 0 -32px;
}
.bx-wrapper .bx-next {
right: 10px;
background: url(https://www.poptents.eu/skin/frontend/tm_themes/theme772/images/bxslider/controls.png) no-repeat -43px -32px;
}
.bx-wrapper .bx-prev:hover {
background-position: 0 0;
}
.bx-wrapper .bx-next:hover {
background-position: -43px 0;
}
.bx-wrapper .bx-controls-direction a {
position: absolute;
top: 50%;
margin-top: -16px;
outline: 0;
width: 32px;
height: 32px;
text-indent: -9999px;
z-index: 9999;
}
.bx-wrapper .bx-controls-direction a.disabled {
display: none;
}
/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
display: block;
text-indent: -9999px;
width: 10px;
height: 11px;
outline: 0;
background: url(https://www.poptents.eu/skin/frontend/tm_themes/theme772/images/bxslider/controls.png) -86px -11px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
display: block;
text-indent: -9999px;
width: 9px;
height: 11px;
outline: 0;
background: url(https://www.poptents.eu/skin/frontend/tm_themes/theme772/images/bxslider/controls.png) -86px -44px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
background-position: -86px -33px;
}
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
text-align: left;
width: 80%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
right: 0;
width: 35px;
}
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
position: absolute;
bottom: 0;
left: 0;
background: #666\9;
background: rgba(80, 80, 80, 0.75);
width: 100%;
}
.bx-wrapper .bx-caption span {
color: #fff;
font-family: Arial;
display: block;
font-size: .85em;
padding: 10px;
}
|