/* ---------------------------------- Default Theme ----------------------------------- */ div.pp_default .pp_top, div.pp_default .pp_top .pp_middle, div.pp_default .pp_top .pp_left, div.pp_default .pp_top .pp_right, div.pp_default .pp_bottom, div.pp_default .pp_bottom .pp_left, div.pp_default .pp_bottom .pp_middle, div.pp_default .pp_bottom .pp_right { height: 13px; } div.pp_default .pp_top .pp_left { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/default/sprite.png) -78px -93px no-repeat; } /* Top left corner */ div.pp_default .pp_top .pp_middle { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/default/sprite_x.png) top left repeat-x; } /* Top pattern/color */ div.pp_default .pp_top .pp_right { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/default/sprite.png) -112px -93px no-repeat; } /* Top right corner */ div.pp_default .pp_content .ppt { color: #f8f8f8; } div.pp_default .pp_content_container .pp_left { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/default/sprite_y.png) -7px 0 repeat-y; padding-left: 13px; } div.pp_default .pp_content_container .pp_right { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/default/sprite_y.png) top right repeat-y; padding-right: 13px; } div.pp_default .pp_content { background-color: #fff; } /* Content background */ div.pp_default .pp_next:hover { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/default/sprite_next.png) center right no-repeat; cursor: pointer; } /* Next button */ div.pp_default .pp_previous:hover { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/default/sprite_prev.png) center left no-repeat; cursor: pointer; } /* Previous button */ div.pp_default .pp_expand { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/default/sprite.png) 0 -29px no-repeat; cursor: pointer; width: 28px; height: 28px; } /* Expand button */ div.pp_default .pp_expand:hover { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/default/sprite.png) 0 -56px no-repeat; cursor: pointer; } /* Expand button hover */ div.pp_default .pp_contract { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/default/sprite.png) 0 -84px no-repeat; cursor: pointer; width: 28px; height: 28px; } /* Contract button */ div.pp_default .pp_contract:hover { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/default/sprite.png) 0 -113px no-repeat; cursor: pointer; } /* Contract button hover */ div.pp_default .pp_close { width: 30px; height: 30px; background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/default/sprite.png) 2px 1px no-repeat; cursor: pointer; } /* Close button */ div.pp_default #pp_full_res .pp_inline { color: #000; } div.pp_default .pp_gallery ul li a { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/default/default_thumb.png) center center #f8f8f8; border:1px solid #aaa; } div.pp_default .pp_gallery ul li a:hover, div.pp_default .pp_gallery ul li.selected a { border-color: #fff; } div.pp_default .pp_social { margin-top: 7px; } div.pp_default .pp_gallery a.pp_arrow_previous, div.pp_default .pp_gallery a.pp_arrow_next { position: static; left: auto; } div.pp_default .pp_nav .pp_play, div.pp_default .pp_nav .pp_pause { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/default/sprite.png) -51px 1px no-repeat; height:30px; width:30px; } div.pp_default .pp_nav .pp_pause { background-position: -51px -29px; } div.pp_default .pp_details { position: relative; } div.pp_default a.pp_arrow_previous, div.pp_default a.pp_arrow_next { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/default/sprite.png) -31px -3px no-repeat; height: 20px; margin: 4px 0 0 0; width: 20px; } div.pp_default a.pp_arrow_next { left: 52px; background-position: -82px -3px; } /* The next arrow in the bottom nav */ div.pp_default .pp_content_container .pp_details { margin-top: 5px; } div.pp_default .pp_nav { clear: none; height: 30px; width: 110px; position: relative; } div.pp_default .pp_nav .currentTextHolder{ font-family: Georgia; font-style: italic; color:#999; font-size: 11px; left: 75px; line-height: 25px; margin: 0; padding: 0 0 0 10px; position: absolute; top: 2px; } div.pp_default .pp_close:hover, div.pp_default .pp_nav .pp_play:hover, div.pp_default .pp_nav .pp_pause:hover, div.pp_default .pp_arrow_next:hover, div.pp_default .pp_arrow_previous:hover { opacity:0.7; } div.pp_default .pp_description{ font-size: 11px; font-weight: bold; line-height: 14px; margin: 5px 50px 5px 0; } div.pp_default .pp_bottom .pp_left { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/default/sprite.png) -78px -127px no-repeat; } /* Bottom left corner */ div.pp_default .pp_bottom .pp_middle { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/default/sprite_x.png) bottom left repeat-x; } /* Bottom pattern/color */ div.pp_default .pp_bottom .pp_right { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/default/sprite.png) -112px -127px no-repeat; } /* Bottom right corner */ div.pp_default .pp_loaderIcon { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/default/loader.gif) center center no-repeat; } /* Loader icon */ /* ---------------------------------- Light Rounded Theme ----------------------------------- */ div.light_rounded .pp_top .pp_left { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_rounded/sprite.png) -88px -53px no-repeat; } /* Top left corner */ div.light_rounded .pp_top .pp_middle { background: #fff; } /* Top pattern/color */ div.light_rounded .pp_top .pp_right { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_rounded/sprite.png) -110px -53px no-repeat; } /* Top right corner */ div.light_rounded .pp_content .ppt { color: #000; } div.light_rounded .pp_content_container .pp_left, div.light_rounded .pp_content_container .pp_right { background: #fff; } div.light_rounded .pp_content { background-color: #fff; } /* Content background */ div.light_rounded .pp_next:hover { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_rounded/btnNext.png) center right no-repeat; cursor: pointer; } /* Next button */ div.light_rounded .pp_previous:hover { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_rounded/btnPrevious.png) center left no-repeat; cursor: pointer; } /* Previous button */ div.light_rounded .pp_expand { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_rounded/sprite.png) -31px -26px no-repeat; cursor: pointer; } /* Expand button */ div.light_rounded .pp_expand:hover { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_rounded/sprite.png) -31px -47px no-repeat; cursor: pointer; } /* Expand button hover */ div.light_rounded .pp_contract { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_rounded/sprite.png) 0 -26px no-repeat; cursor: pointer; } /* Contract button */ div.light_rounded .pp_contract:hover { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_rounded/sprite.png) 0 -47px no-repeat; cursor: pointer; } /* Contract button hover */ div.light_rounded .pp_close { width: 75px; height: 22px; background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_rounded/sprite.png) -1px -1px no-repeat; cursor: pointer; } /* Close button */ div.light_rounded .pp_details { position: relative; } div.light_rounded .pp_description { margin-right: 85px; } div.light_rounded #pp_full_res .pp_inline { color: #000; } div.light_rounded .pp_gallery a.pp_arrow_previous, div.light_rounded .pp_gallery a.pp_arrow_next { margin-top: 12px !important; } div.light_rounded .pp_nav .pp_play { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_rounded/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px; } div.light_rounded .pp_nav .pp_pause { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_rounded/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px; } div.light_rounded .pp_arrow_previous { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_rounded/sprite.png) 0 -71px no-repeat; } /* The previous arrow in the bottom nav */ div.light_rounded .pp_arrow_previous.disabled { background-position: 0 -87px; cursor: default; } div.light_rounded .pp_arrow_next { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_rounded/sprite.png) -22px -71px no-repeat; } /* The next arrow in the bottom nav */ div.light_rounded .pp_arrow_next.disabled { background-position: -22px -87px; cursor: default; } div.light_rounded .pp_bottom .pp_left { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_rounded/sprite.png) -88px -80px no-repeat; } /* Bottom left corner */ div.light_rounded .pp_bottom .pp_middle { background: #fff; } /* Bottom pattern/color */ div.light_rounded .pp_bottom .pp_right { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_rounded/sprite.png) -110px -80px no-repeat; } /* Bottom right corner */ div.light_rounded .pp_loaderIcon { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_rounded/loader.gif) center center no-repeat; } /* Loader icon */ /* ---------------------------------- Dark Rounded Theme ----------------------------------- */ div.dark_rounded .pp_top .pp_left { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_rounded/sprite.png) -88px -53px no-repeat; } /* Top left corner */ div.dark_rounded .pp_top .pp_middle { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat; } /* Top pattern/color */ div.dark_rounded .pp_top .pp_right { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_rounded/sprite.png) -110px -53px no-repeat; } /* Top right corner */ div.dark_rounded .pp_content_container .pp_left { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat-y; } /* Left Content background */ div.dark_rounded .pp_content_container .pp_right { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_rounded/contentPattern.png) top right repeat-y; } /* Right Content background */ div.dark_rounded .pp_content { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat; } /* Content background */ div.dark_rounded .pp_next:hover { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_rounded/btnNext.png) center right no-repeat; cursor: pointer; } /* Next button */ div.dark_rounded .pp_previous:hover { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_rounded/btnPrevious.png) center left no-repeat; cursor: pointer; } /* Previous button */ div.dark_rounded .pp_expand { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_rounded/sprite.png) -31px -26px no-repeat; cursor: pointer; } /* Expand button */ div.dark_rounded .pp_expand:hover { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_rounded/sprite.png) -31px -47px no-repeat; cursor: pointer; } /* Expand button hover */ div.dark_rounded .pp_contract { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_rounded/sprite.png) 0 -26px no-repeat; cursor: pointer; } /* Contract button */ div.dark_rounded .pp_contract:hover { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_rounded/sprite.png) 0 -47px no-repeat; cursor: pointer; } /* Contract button hover */ div.dark_rounded .pp_close { width: 75px; height: 22px; background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_rounded/sprite.png) -1px -1px no-repeat; cursor: pointer; } /* Close button */ div.dark_rounded .pp_details { position: relative; } div.dark_rounded .pp_description { margin-right: 85px; } div.dark_rounded .currentTextHolder { color: #c4c4c4; } div.dark_rounded .pp_description { color: #fff; } div.dark_rounded #pp_full_res .pp_inline { color: #fff; } div.dark_rounded .pp_gallery a.pp_arrow_previous, div.dark_rounded .pp_gallery a.pp_arrow_next { margin-top: 12px !important; } div.dark_rounded .pp_nav .pp_play { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_rounded/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px; } div.dark_rounded .pp_nav .pp_pause { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_rounded/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px; } div.dark_rounded .pp_arrow_previous { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_rounded/sprite.png) 0 -71px no-repeat; } /* The previous arrow in the bottom nav */ div.dark_rounded .pp_arrow_previous.disabled { background-position: 0 -87px; cursor: default; } div.dark_rounded .pp_arrow_next { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_rounded/sprite.png) -22px -71px no-repeat; } /* The next arrow in the bottom nav */ div.dark_rounded .pp_arrow_next.disabled { background-position: -22px -87px; cursor: default; } div.dark_rounded .pp_bottom .pp_left { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_rounded/sprite.png) -88px -80px no-repeat; } /* Bottom left corner */ div.dark_rounded .pp_bottom .pp_middle { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat; } /* Bottom pattern/color */ div.dark_rounded .pp_bottom .pp_right { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_rounded/sprite.png) -110px -80px no-repeat; } /* Bottom right corner */ div.dark_rounded .pp_loaderIcon { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_rounded/loader.gif) center center no-repeat; } /* Loader icon */ /* ---------------------------------- Dark Square Theme ----------------------------------- */ div.dark_square .pp_left , div.dark_square .pp_middle, div.dark_square .pp_right, div.dark_square .pp_content { background: #000; } div.dark_square .currentTextHolder { color: #c4c4c4; } div.dark_square .pp_description { color: #fff; } div.dark_square .pp_loaderIcon { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_square/loader.gif) center center no-repeat; } /* Loader icon */ div.dark_square .pp_expand { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_square/sprite.png) -31px -26px no-repeat; cursor: pointer; } /* Expand button */ div.dark_square .pp_expand:hover { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_square/sprite.png) -31px -47px no-repeat; cursor: pointer; } /* Expand button hover */ div.dark_square .pp_contract { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_square/sprite.png) 0 -26px no-repeat; cursor: pointer; } /* Contract button */ div.dark_square .pp_contract:hover { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_square/sprite.png) 0 -47px no-repeat; cursor: pointer; } /* Contract button hover */ div.dark_square .pp_close { width: 75px; height: 22px; background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_square/sprite.png) -1px -1px no-repeat; cursor: pointer; } /* Close button */ div.dark_square .pp_details { position: relative; } div.dark_square .pp_description { margin: 0 85px 0 0; } div.dark_square #pp_full_res .pp_inline { color: #fff; } div.dark_square .pp_gallery a.pp_arrow_previous, div.dark_square .pp_gallery a.pp_arrow_next { margin-top: 12px !important; } div.dark_square .pp_nav { clear: none; } div.dark_square .pp_nav .pp_play { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_square/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px; } div.dark_square .pp_nav .pp_pause { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_square/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px; } div.dark_square .pp_arrow_previous { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_square/sprite.png) 0 -71px no-repeat; } /* The previous arrow in the bottom nav */ div.dark_square .pp_arrow_previous.disabled { background-position: 0 -87px; cursor: default; } div.dark_square .pp_arrow_next { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_square/sprite.png) -22px -71px no-repeat; } /* The next arrow in the bottom nav */ div.dark_square .pp_arrow_next.disabled { background-position: -22px -87px; cursor: default; } div.dark_square .pp_next:hover { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_square/btnNext.png) center right no-repeat; cursor: pointer; } /* Next button */ div.dark_square .pp_previous:hover { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/dark_square/btnPrevious.png) center left no-repeat; cursor: pointer; } /* Previous button */ /* ---------------------------------- Light Square Theme ----------------------------------- */ div.light_square .pp_left , div.light_square .pp_middle, div.light_square .pp_right, div.light_square .pp_content { background: #fff; } div.light_square .pp_content .ppt { color: #000; } div.light_square .pp_expand { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_square/sprite.png) -31px -26px no-repeat; cursor: pointer; } /* Expand button */ div.light_square .pp_expand:hover { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_square/sprite.png) -31px -47px no-repeat; cursor: pointer; } /* Expand button hover */ div.light_square .pp_contract { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_square/sprite.png) 0 -26px no-repeat; cursor: pointer; } /* Contract button */ div.light_square .pp_contract:hover { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_square/sprite.png) 0 -47px no-repeat; cursor: pointer; } /* Contract button hover */ div.light_square .pp_close { width: 75px; height: 22px; background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_square/sprite.png) -1px -1px no-repeat; cursor: pointer; } /* Close button */ div.light_square .pp_details { position: relative; } div.light_square .pp_description { margin-right: 85px; } div.light_square #pp_full_res .pp_inline { color: #000; } div.light_square .pp_gallery a.pp_arrow_previous, div.light_square .pp_gallery a.pp_arrow_next { margin-top: 12px !important; } div.light_square .pp_nav .pp_play { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_square/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px; } div.light_square .pp_nav .pp_pause { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_square/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px; } div.light_square .pp_arrow_previous { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_square/sprite.png) 0 -71px no-repeat; } /* The previous arrow in the bottom nav */ div.light_square .pp_arrow_previous.disabled { background-position: 0 -87px; cursor: default; } div.light_square .pp_arrow_next { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_square/sprite.png) -22px -71px no-repeat; } /* The next arrow in the bottom nav */ div.light_square .pp_arrow_next.disabled { background-position: -22px -87px; cursor: default; } div.light_square .pp_next:hover { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_square/btnNext.png) center right no-repeat; cursor: pointer; } /* Next button */ div.light_square .pp_previous:hover { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_square/btnPrevious.png) center left no-repeat; cursor: pointer; } /* Previous button */ div.light_square .pp_loaderIcon { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_rounded/loader.gif) center center no-repeat; } /* Loader icon */ /* ---------------------------------- Facebook style Theme ----------------------------------- */ div.facebook .pp_top .pp_left { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/facebook/sprite.png) -88px -53px no-repeat; } /* Top left corner */ div.facebook .pp_top .pp_middle { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/facebook/contentPatternTop.png) top left repeat-x; } /* Top pattern/color */ div.facebook .pp_top .pp_right { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/facebook/sprite.png) -110px -53px no-repeat; } /* Top right corner */ div.facebook .pp_content .ppt { color: #000; } div.facebook .pp_content_container .pp_left { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/facebook/contentPatternLeft.png) top left repeat-y; } /* Content background */ div.facebook .pp_content_container .pp_right { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/facebook/contentPatternRight.png) top right repeat-y; } /* Content background */ div.facebook .pp_content { background: #fff; } /* Content background */ div.facebook .pp_expand { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/facebook/sprite.png) -31px -26px no-repeat; cursor: pointer; } /* Expand button */ div.facebook .pp_expand:hover { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/facebook/sprite.png) -31px -47px no-repeat; cursor: pointer; } /* Expand button hover */ div.facebook .pp_contract { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/facebook/sprite.png) 0 -26px no-repeat; cursor: pointer; } /* Contract button */ div.facebook .pp_contract:hover { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/facebook/sprite.png) 0 -47px no-repeat; cursor: pointer; } /* Contract button hover */ div.facebook .pp_close { width: 22px; height: 22px; background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/facebook/sprite.png) -1px -1px no-repeat; cursor: pointer; } /* Close button */ div.facebook .pp_details { position: relative; } div.facebook .pp_description { margin: 0 37px 0 0; } div.facebook #pp_full_res .pp_inline { color: #000; } div.facebook .pp_loaderIcon { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/facebook/loader.gif) center center no-repeat; } /* Loader icon */ div.facebook .pp_arrow_previous { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/facebook/sprite.png) 0 -71px no-repeat; height: 22px; margin-top: 0; width: 22px; } /* The previous arrow in the bottom nav */ div.facebook .pp_arrow_previous.disabled { background-position: 0 -96px; cursor: default; } div.facebook .pp_arrow_next { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/facebook/sprite.png) -32px -71px no-repeat; height: 22px; margin-top: 0; width: 22px; } /* The next arrow in the bottom nav */ div.facebook .pp_arrow_next.disabled { background-position: -32px -96px; cursor: default; } div.facebook .pp_nav { margin-top: 0; } div.facebook .pp_nav p { font-size: 15px; padding: 0 3px 0 4px; } div.facebook .pp_nav .pp_play { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/facebook/sprite.png) -1px -123px no-repeat; height: 22px; width: 22px; } div.facebook .pp_nav .pp_pause { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/facebook/sprite.png) -32px -123px no-repeat; height: 22px; width: 22px; } div.facebook .pp_next:hover { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/facebook/btnNext.png) center right no-repeat; cursor: pointer; } /* Next button */ div.facebook .pp_previous:hover { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/facebook/btnPrevious.png) center left no-repeat; cursor: pointer; } /* Previous button */ div.facebook .pp_bottom .pp_left { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/facebook/sprite.png) -88px -80px no-repeat; } /* Bottom left corner */ div.facebook .pp_bottom .pp_middle { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/facebook/contentPatternBottom.png) top left repeat-x; } /* Bottom pattern/color */ div.facebook .pp_bottom .pp_right { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/facebook/sprite.png) -110px -80px no-repeat; } /* Bottom right corner */ /* ------------------------------------------------------------------------ DO NOT CHANGE ------------------------------------------------------------------------- */ div.pp_pic_holder a:focus { outline:none; } div.pp_overlay { background: #000; display: none; left: 0; position: absolute; top: 0; width: 100%; z-index: 9500; } div.pp_pic_holder { display: none; position: absolute; width: 100px; z-index: 10000; } .pp_top { height: 20px; position: relative; } * html .pp_top { padding: 0 20px; } .pp_top .pp_left { height: 20px; left: 0; position: absolute; width: 20px; } .pp_top .pp_middle { height: 20px; left: 20px; position: absolute; right: 20px; } * html .pp_top .pp_middle { left: 0; position: static; } .pp_top .pp_right { height: 20px; left: auto; position: absolute; right: 0; top: 0; width: 20px; } .pp_content { height: 40px; min-width: 40px; } * html .pp_content { width: 40px; } .pp_fade { display: none; } .pp_content_container { position: relative; text-align: left; width: 100%; } .pp_content_container .pp_left { padding-left: 20px; } .pp_content_container .pp_right { padding-right: 20px; } .pp_content_container .pp_details { float: left; margin: 10px 0 2px 0; } .pp_description { display: none; margin: 0; } .pp_social { float: left; margin: 0; } .pp_social .facebook { float: left; margin-left: 5px; width: 55px; overflow: hidden; } .pp_social .twitter { float: left; } .pp_nav { clear: right; float: left; margin: 3px 10px 0 0; } .pp_nav p { float: left; margin: 2px 4px; white-space: nowrap; } .pp_nav .pp_play, .pp_nav .pp_pause { float: left; margin-right: 4px; text-indent: -10000px; } a.pp_arrow_previous, a.pp_arrow_next { display: block; float: left; height: 15px; margin-top: 3px; overflow: hidden; text-indent: -10000px; width: 14px; } .pp_hoverContainer { position: absolute; top: 0; width: 100%; z-index: 2000; } .pp_gallery { display: none; left: 50%; margin-top: -50px; position: absolute; z-index: 10000; } .pp_gallery div { float: left; overflow: hidden; position: relative; } .pp_gallery ul { float: left; height: 35px; margin: 0 0 0 5px; padding: 0; position: relative; white-space: nowrap; } .pp_gallery ul a { border: 1px #000 solid; border: 1px rgba(0,0,0,0.5) solid; display: block; float: left; height: 33px; overflow: hidden; } .pp_gallery ul a:hover, .pp_gallery li.selected a { border-color: #fff; } .pp_gallery ul a img { border: 0; } .pp_gallery li { display: block; float: left; margin: 0 5px 0 0; padding: 0; } .pp_gallery li.default a { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/facebook/default_thumbnail.gif) 0 0 no-repeat; display: block; height: 33px; width: 50px; } .pp_gallery li.default a img { display: none; } .pp_gallery .pp_arrow_previous, .pp_gallery .pp_arrow_next { margin-top: 7px !important; } a.pp_next { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat; display: block; float: right; height: 100%; text-indent: -10000px; width: 49%; } a.pp_previous { background: url(/js/jquery/popupgallery_standard/images/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat; display: block; float: left; height: 100%; text-indent: -10000px; width: 49%; } a.pp_expand, a.pp_contract { cursor: pointer; display: none; height: 20px; position: absolute; right: 30px; text-indent: -10000px; top: 10px; width: 20px; z-index: 20000; } a.pp_close { position: absolute; right: 0; top: 0; display: block; line-height:22px; text-indent: -10000px; } .pp_bottom { height: 20px; position: relative; } * html .pp_bottom { padding: 0 20px; } .pp_bottom .pp_left { height: 20px; left: 0; position: absolute; width: 20px; } .pp_bottom .pp_middle { height: 20px; left: 20px; position: absolute; right: 20px; } * html .pp_bottom .pp_middle { left: 0; position: static; } .pp_bottom .pp_right { height: 20px; left: auto; position: absolute; right: 0; top: 0; width: 20px; } .pp_loaderIcon { display: block; height: 24px; left: 50%; margin: -12px 0 0 -12px; position: absolute; top: 50%; width: 24px; } #pp_full_res { line-height: 1 !important; } #pp_full_res .pp_inline { text-align: left; } #pp_full_res .pp_inline p { margin: 0 0 15px 0; } div.ppt { color: #fff; display: none; font-size: 17px; margin: 0 0 5px 15px; z-index: 9999; } /* ------------------------------------------------------------------------------------ SCREEN - Glencrest 2020 Filename : sitepanes.css Last Updated : 17. 02. 2021 Copyright : (c) 2021 Etail Systems Ltd Author : Etail Systems Ltd Web : http://www.etailsystems.com Table of Contents 01. =Reset 02. =Page 03. =Typography Defaults Headings Links Specific headings Blockquote Base Article Typography 04. =Buttons 05. =Tables Defaults Order Quotations 06. =Forms Defaults Sign in Register Forgotten Password Checkout (New Customer) Checkout (Sign In) 07. =DepartmentTree / Menu top level second level third level forth level 08. =Breadcrumb 09. =Jquery Base Overrides 10. =OwlCarousel Overrides 11. =AccordionBase Header including hide/show icons Panes 12. =Autocomplete 13. =Email when back in stock EWIS 14. =HoverBasket 15. =PopupDialog / Popup Add to Basket / Direct Despatch 16. =Messages 17. =FIXEDTopPanel 17. =PanelTop 18. =CenterPanel 19. =MainPanel Articles Banners 20. =FooterPanel 21. =BottomPanel xx. =FIXEDBottomPanel 22. =Copyright and Managed By 23. =FilterSearch 24. =SearchHeader / SearchFooter 25. =FeaturedProducts Base Settings Image Title Pricing Structure Unit Specifics Client ref/Model Buy Form Media Queries 26. =ProductLists 27. =MyAccount 28. =Blog 29. =CustomArticles 30. =CustomBanners 31. =SpecificPages 31. =DepartmentPages Subdepartment Tree Media Queries 32. =ProductPage Title Image (carousel) Brand and Manufacturer barcodes Buy Panel Pricing info Description Accordion Description Stock Leadtime Direct Despatch/Dropship Links - Ask a question etc Video Links (youtube) Buytogether Personalisation 33. =Super Attributes Defaults attributeTypePrice_Matrix_Calculator attributeTypeDimensions attributeTypeRadio_button attributeTypeText_Box_Free_Text_Entry attributeTypeDrop_down_list attributeTypeSingle_Image_Upload 34. =Basket Basket header Basket Lines Basket Line items Basket Subtotal Delivery info Shipping Basket Totals Basket Payment Buttons Media Queries 35. =Checkout Process 36. =OrderConfirmation 36. =Hacks =Definitions ------------------------------------------------------------------------------------- */ :root { --mainColor:#e31f26; --footerColor:#3d4247; --altColor:#5bb1b1; --altColor:#333333; --altColor2:#e31f26; --textColor:#0e0b0c; --textColorLight:#958f99; --textHeadingColor:#1e1e1e; --textHeadingAltColor:#929292; --textSubHeadingColor:#929292; --textSubHeadingAltColor:#1e1e1e; --bgColor:#f8f8f8; --bgaltColor:#f8f1da; --bgaltColor2:#333333; --bgaltColor3:#929292; --checkoutButtons:#8EC760; --white:#ffffff; --mainFont: 'myriad-pro', sans-serif; --altFont: 'roboto-condensed', sans-serif; --altFont2: 'Cookie', cursive; --headingFont: 'roboto-condensed', sans-serif; --buttonFont:'roboto-condensed', sans-serif; --borderColour: #d2d0d3; } /* =Reset ------------------------------------------------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; -webkit-font-smoothing:antialiased; /* Looks pretty much the same than Windows */ } iframe { /*don't do this here!*/ /* width:100% !important; */ } /* To enable HTML5 elements in IE */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display:block; } input, select, textarea { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; } input:focus, textarea:focus, select:focus { outline-offset:0px; } /* ----------------------------------------------------------------------------------------------------------------- =Page ------------------------------------------------------------------------------------- */ html { -webkit-font-smoothing:antialiased } body { background-color:var(--bgColor); font-family: var(--mainFont); font-size:16px; } ol { margin-left:.5em; } /* ------------------------------------------------------------------------------------- =Typography /* latin */ @font-face { font-family: 'Cookie'; font-style: normal; font-weight: 400; src: local('Cookie-Regular'), url(https://fonts.gstatic.com/s/cookie/v8/syky-y18lb0tSbf9kgqS.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Defaults ------------------------------------------------------- */ /* this choice of font-family is supposed to render text the same across platforms */ body, input, button, textarea, select { font-family: var(--mainFont); -webkit-font-smoothing: antialiased; /* Looks pretty much the same than Windows */ } p, li, label, input, select, textarea {} select, textarea { padding:.5em; } input.inputtext, input.inputtext_light /*used for the newsletter signup */{ font-family: var(--mainFont); font-size: 1em; padding: 0.5em .25em; border:1px solid var(--borderColour); max-width: calc(100% - 1px - .5em); } p, ol, ul, dl, address { font-family:var(--mainFont); font-weight: 400; } b, strong { font-weight:600; font-size:inherit; } ol, ul { list-style:none; } li ul, li ol { font-size:1em; } ul.inline li { display:inline-block; } abbr { opacity:0.9; } abbr[title]:hover, dfn[title] { border-bottom: 1px dotted #656565; cursor:help; } ins, mark { padding:0 0.125em; text-decoration:none; } sub, sup { position:relative; font-size:smaller; line-height:0; } em, em a, i, samp { font-style: italic; } ins, mark { padding: 0 0.125em; text-decoration: none; } sub, sup { position: relative; font-size: smaller; line-height: 0; } sup { vertical-align: super; } sub { vertical-align: sub; } del, s { text-decoration: line-through; } img { max-width: 100%; height: auto; } /* correct orientation of phone icon if font awesome used */ .fa-phone { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)"; -webkit-transform: scaleX(-1); transform: scaleX(-1); } /* Headings ------------------------------------------------------- */ h1,h2,h3,h4,h5,h6{ font-family: var(--altFont); text-rendering: optimizelegibility; } h1 { font-size: 2em; } h2 { font-size: 1.8em; } h3 { font-size: 1.5em; } h4 { font-size: 1.4em; } h5 { font-size: 1.2em; } h6 {} /* Specific headings ------------------------------------------------------- */ /* Links ------------------------------------------------------- */ a{ text-decoration: none; color:inherit; /*makes the link the same colour as whatever the thing is that its in h3 h4 p etc*/ } a:hover{ text-decoration: none; } a.lnk:hover { text-decoration:underline; } a:active, a:visited{ text-decoration: none; } /* Blockquote ------------------------------------------------------ */ blockquote { border-top: 1px solid #f8f8f8; border-bottom: 1px solid #f8f8f8; margin: 0 0 1.5em 0; padding: 2em; } blockquote p { font-size: 1.6em; font-style: italic; margin-bottom: 1em; } blockquote footer, blockquote cite { font-size: 1.4em; line-height: 1.5; } q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } cite { font-style: normal; } /* Base Article Typography ------------------------------------------------------- */ /*Unified heading colors*/ #pm .art h2, #pm .art h3, #pm .art h4, #pm .art h5 {} /*to ensure a clear break after a paragraph*/ #pm .artp p {} #pm .art h3, #pf .art h3 {} #pm .art h2, #pf .art h2 { font-weight:600; /* margin-bottom:1em; */ } #pm .artp ul { list-style-type:disc; margin:1em 1.5em; } #pm .artp ul.nobullets { list-style-type:none; margin:.5em 0; } #pm .artp ol { list-style-type:decimal; margin:1em 1.5em; } #pm .artp img {} #pm .artp a {} #pm .artp a {} /* ------------------------------------------------------------------------------------- =Buttons ------------------------------------------------------------------------------------- */ .submit, a.btn, .hoverbsktadd a[title="Checkout"] { display:inline-block; vertical-align:middle; font-family:var(--buttonFont); font-size:1em; padding: 0.5em 1em; border: none; text-align: center; border-color:inherit; cursor:pointer; background-color: var(--altColor); border:1px var(--altColor) solid; color:white; text-transform:capitalize; border-radius: 3px; } /* iphone specific overrides */ textarea, input.text, input[type="text"], input[type="button"], input[type="submit"], input[type="image"], input#searchbox, .input-checkbox { -webkit-appearance: none; /* border-radius: 0; */ font-size: 1em; } td a.btn{ display:block; } a.btn:hover { text-decoration: none; } .submit:hover, a.btn:hover {} /* ------------------------------------------------------------------------------------- =Tables ------------------------------------------------------------------------------------- */ /* Defaults ------------------------------------------------------- */ table { border:1px #e8e8e8 solid; /*stops that stupid break between cells */ border-collapse:collapse; min-width: 100%; font-size: 1em; } thead, tbody { display: contents; } /*set table headers */ table th { font-family: var(--mainFont); color:var(--bgaltColor); font-weight:600; text-align:left; padding:.5em; width:auto; } /* for when no header has been used in the code !*/ table tbody tr:first-child td{ font-family: var(--mainFont); color: #000; text-align:left; padding:.5em; } table tr td { padding:.5em; vertical-align:middle; font-size:1em; } th, td { padding: .5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align:left; } tr:nth-child(even) td { background: #f8f8f8; } /*ensures font size for a p in a table is the same as it is for text that is NOT in a p block */ table tr td p, table tr td li { font-size:1em; } #pm .artp table td p { font-size:1em; } table th:first-child {} table tr:nth-child(odd) { background-color:#e8e8e8; } /* Order ------------------------------------------------------- */ table.order { width:100%; margin-bottom:1em; } .ordinfo a.btn.print { background-color:#e8e8e8; border-color:#e8e8e8; margin-left:1em; } /* Quotations ------------------------------------------------------- */ table.quotationlist, table.quotationlines, table.quotation { border-collapse:collapse; width:100%; max-width:100%; } table.quotationlist th.quoteNo, table.quotationlist th.ref, table.quotationlist th.value, table.quotationlist th.expires, table.quotationlist th.viewQuote, table.quotationlist th.addQuote { width:auto; } table.quotationlist a.btn[title="Download Quote"] { font-family: var(--mainFont); font-size:1em; padding:0; text-align:center; cursor:pointer; background-color:transparent; border:none; outline:none; color:var(--bgaltColor); display:inline-block; } /* ------------------------------------------------------------------------------------- =Forms ------------------------------------------------------------------------------------- */ /* Defaults ------------------------------------------------------- */ .form { padding:1em; } .form .bt {} .form .bt h3 {} .form h5 {} .form li select, .form li textarea, .form li input { grid-column:2; width:100%; } .form li { /* try grid layout */ display:grid; grid-template-columns:minmax(auto, 1fr) 3fr 1em; grid-gap:.25em; } .form label { grid-column:1; display:inline-block; vertical-align:top; text-align:right; } .form label img { display:inline-block; } .form li.help, .form li.info { display:inline-block; width:100%; } .form li.info.acct { font-size:1.25em; } .form li.info.acct a{ margin-left:.5em; display:inline-block; vertical-align:middle; font-family:var(--buttonFont); font-size:.725em; padding: 0.5em 1em; border: none; text-align: center; border-color:inherit; cursor:pointer; background-color: var(--altColor); border:1px var(--altColor) solid; color:white; text-transform:capitalize; border-radius: 3px; } .form form {} .form li { margin-bottom:.5em; } .form ul.radio {} .form ul.radio li {} .form form .submit {} /* captcha */ .form .g-recaptcha{ grid-column:2; text-align:center; } /* fix for checklists*/ .form ul.check { max-width: 100%; columns:3; -webkit-columns: 3; -moz-columns:3; } /* Sign In ------------------------------------------------------- */ .form#psign{ } /* as labels aren't being used - placeholders are */ .form#psign select, .form#psign textarea, .form#psign input { grid-column:1/3; text-align: left; width:100%; } .form#psign .exstreqsubmit input.submit{ grid-column:1; justify-self:start; width:auto; margin-left:0; } .form#psign .exstfgtpwd { display:inline-block; font-weight:400; } .form#psign .exstreglnk{ display:inline-block; } .form#psign .exstreglnk h5{ font-weight:400; color:#1d1d1d; } .form#psign .exstreglnk h5 a{ text-decoration:underline; text-decoration-color: var(--mainColor); } /* Register ------------------------------------------------------- */ .form#preg{ width: 50%; margin:auto; } /* as labels aren't being used - placeholders are */ .form#preg select, .form#preg textarea, .form#preg input { grid-column: 1/3; justify-self:stretch; /* would rather not have to do this, but we display the width on the input element and that borks things */ width:100%; } .form#preg li.chkbox.subscribe{ display:block; } .form#preg li.chkbox.subscribe input{ width:auto; margin:.5em; } .form#preg input.submit{ grid-column:1; justify-self:start; margin-left:0; } .form#preg label{ text-align:left; } .form h5 { grid-column:1/3; margin:1em 0; } /* Forgotten Password ------------------------------------------------------- */ .form#pwrem{} /* Checkout (New Customer) ------------------------------------------------------- */ .form#pchkoutnewcust, .form#pguest{} .form#pguest select, .form#pguest textarea, .form#pguest input { grid-column:1/3; text-align: left; width:100%; } .form#pguest input.submit#submit{ grid-column:1; justify-self:start; width:auto; margin-left:0; } .form li.chkbox { display:inline-block; } .form li.chkbox #subscribe{ width:auto; } /* Checkout (Sign In) ------------------------------------------------------- */ .checkoutsignin #pm .form#psign, .checkoutsignin #pm .form#pchkoutnewcust, .checkoutsignin #pm .form#pguest { } /*existing customer pane */ .checkoutsignin #pm .form#psign ul.exstcust {} .checkoutsignin #pm .form#psign ul.exstcust label {} .checkoutsignin #pm .form#psign .exstnotme a { } /* ------------------------------------------------------------------------------------- =DepartmentTree / Menu ------------------------------------------------------------------------------------- */ #pt .dept{ grid-area:nav; position: relative; margin-top:1em; border-top:1px var(--borderColour) solid; /* border-bottom:1px var(--borderColour) solid; */ } #pt .dept .bt, #pt .dept .bb, #pt .dept .bc{} #pt .dept ul{ padding: 0; list-style-type: none; list-style-position: outside; position: relative; z-index: 1001; display:block; text-align:center; } #jnav li.pipe{} /***********************************************************************/ /* Tabs */ /***********************************************************************/ #jnav li.nav, #jnav li.navcurr{ /*use same font as headings*/ font-family:var(--altFont); font-weight:600; color:var(--textHeadingColor); display:inline-block; } #jnav li.nav:hover{ background-color:var(--bgColor); } #jnav li.nav a, #jnav li.nav h3, #jnav li.navcurr a, #jnav li.navcurr h3{ display:inline-block; /* width: calc(100% - 4em); */ padding: 1em 1.5em; } #jnav li.nav a:hover, #jnav li.nav h3:hover, #jnav li.navcurr h3:hover #jnav li.navcurr a:hover{ color:var(--altColor); background-color:var(--bgColor); } #jnav li.navcurr a, #jnav li.navcurr h3, #jnav li.nav h3{} #jnav .navleft, #jnav .navright, #jnav .navleftcurr, #jnav .navrightcurr{} /***********************************************************************/ /* Drop down */ /***********************************************************************/ #jnav li.nav ul.snav, #jnav li.navcurr ul.snav{ position: absolute; text-align:left; display:none; /* width: calc(340px - 1em); */ min-width: 200px; padding: 0; background-color: var(--bgColor); -webkit-box-shadow: -2px 2px 2px 0 rgba(96,94,93,0.75); -moz-box-shadow: -2px 2px 2px 0 rgba(96,94,93,0.75); box-shadow: 2px 2px 2px 0px rgba(96,94,93,0.75); } #jnav li.nav ul.snav li:hover, #jnav li.navcurr ul.snav li:hover{} #jnav li.nav ul.snav li, #jnav li.navcurr ul.snav li{ display:block; /* outline:1px red solid; */ vertical-align:top; margin:.5em; padding:.5em 0; } #jnav li.nav ul.snav li a, #jnav li.navcurr ul.snav li a{} #jnav li.nav ul.snav li a:hover, #jnav li.navcurr ul.snav li a:hover{} /* Banners */ #jnav li.nav ul.snav li.bnrs, #jnav li.navcurr ul.snav li.bnrs{} #jnav li.nav ul.snav li.bnrs .bnr, #jnav li.navcurr ul.snav li.bnrs .bnr{} #jnav li.nav ul.snav li.bnrs .bnr a, #jnav li.navcurr ul.snav li.bnrs .bnr a{} /* Level 1 dept header */ #jnav li.nav ul.snav li a.deptIcon, #jnav li.navcurr ul.snav li a.deptIcon{ padding:0; width:auto; } #jnav li.nav ul.snav li a.deptIcon img, #jnav li.navcurr ul.snav li a.deptIcon img{ max-width: 70px; } #jnav li.nav ul.snav li a, #jnav li.navcurr ul.snav li a{ font-family:var(--altFont); font-weight:600; display:inline-block; vertical-align:middle; } #jnav li.nav ul.snav li a, #jnav li.navcurr ul.snav li a{ text-transform:capitalize; padding:0 .5em; /* width:auto; */ } #jnav li.nav ul.snav li a.:hover, #jnav li.navcurr ul.snav li a.:hover{ color:var(--altColor) } /* Level 2 depts */ #jnav li.nav ul.snav li a.l2, #jnav li.navcurr ul.snav li a.l2, #jnav li.nav ul.snav li a.seeall, #jnav li.navcurr ul.snav li a.seeall{} #jnav li.nav ul.snav li.depts a:hover, #jnav li.navcurr ul.snav li.depts a:hover{} #jnav li.nav ul.snav li.arts{} /* ------------------------------------------------------------------------------------- =Breadcrumb ------------------------------------------------------------------------------------- */ .bdcb{} .crumb { display:block; padding:.5em 0; /* text-align: center; */ } .crumb li{ font-size: 0.875em; display:inline-block; vertical-align:middle; } .home .crumb { /* as a rule we don't want to show the breadcrumb on the home page, but it is written out anyway needs fixing by a dev */ display:none; } /*for the break between the crumb*/ .crumb li:after { content:">"; display:inline-block; vertical-align:middle; margin:0 .5em; font-weight:400; } .crumb li:last-child:after { content:""; margin:0; display:none; } .crumb a, .crumb h1, .crumb h3 { display:inline-block; vertical-align:middle; /* unify font */ font-family:var(--mainFont); font-size:1em; margin:0; } .crumb h1 span{ font-family:var(--mainFont) } /* ------------------------------------------------------------------------------------- =Jquery Base Overrides ------------------------------------------------------------------------------------- */ .validateTips{ font-size:.688em; } /* Interaction states ----------------------------------*/ .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { border: 1px solid var(--borderColour); background: var(--mainColor); font-weight: normal; color: #ffffff; } .ui-icon-background, .ui-state-active .ui-icon-background { border: var(--mainColor) background-color: #ffffff; } /* ------------------------------------------------------------------------------------- =OwlCarousel Overrides ------------------------------------------------------------------------------------- */ /* base settings */ .carousel { position:relative; margin-bottom:1em; } .owl-stage-outer{} /* this should be the title for the carousel */ .carousel h2{} .carousel:hover { cursor:-moz-grab; cursor:-webkit-grab; cursor:grab; } .noNav .owl-controls{ display:none; } .owl-controls {} .owl-carousel .owl-item img {} .owl-theme .owl-controls { /*going with a hardline of this is at the bottom of the carousel (not over anything) and centered */ text-align:center; /* margin-top: 0.5em; */ font-size:.875em; } .owl-theme .owl-nav { /*going with a hardline of not showing the arrows/nav */ display:none; } .owl-nav .owl-prev, .owl-nav .owl-next {} .owl-prev {} .owl-next {} .owl-theme .owl-nav .disabled {} .owl-theme .owl-dots {} .owl-theme .owl-dots .owl-dot { display:inline-block; vertical-align:top; } .owl-theme .owl-dots .owl-dot span { display:inline-block; vertical-align:top; width: 0.5em; height: 0.5em; margin: 0.25em; border-radius:50%; border:2px solid; border-color:var(--borderColour); background-color:white; } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { border-color: var(--altColor2); background-color:var(--mainColor) } .owl-theme .owl-item img {} /* Product Carousels -------------------------------------------------------*/ /* the layout is different so need to undo some of the default settings and re-order */ /* even MORE irritating is the fact that this is done differently for carousels on the product page! */ .carousel .fprd{ display:grid; grid-template-columns: 1fr; position:relative; background-color:#ffffff; } .home .carousel .fprd{ display:block; } /* mini hack for the fact that we aren't consistent in how we write out product info !*/ .home .carousel .fprd .bt, .home .carousel .fprd .bb{} .carousel .fprd .prevprice{ /* due to the carousel dictating the width of the container this may not fit! */ } /* flags */ #pm .carousel .piflags, #pm .carousel .flag { grid-row:1; grid-column:1/4; text-align:left; vertical-align:top; align-items:start; align-self:start; padding:.5em; box-shadow: none; border: none; } #pm .carousel .piflags img, #pm .carousel .flag img{ width:auto; height:auto; } /* ------------------------------------------------------------------------------------- =AccordionBase ------------------------------------------------------------------------------------- */ ul.accordion {} #pm li.address, #pm li.inst {} /* Header including hide/show icons ------------------------------------------------------- */ .accordion .header { font-family: var(--altFont2); background-color:var(--bgaltColor2); font-size: 1em; margin:0; position:relative; cursor:pointer; padding:.5em; } .accordion .header img { position:absolute; right: 1em; top:.75em; width:1em; cursor:pointer; } .accordion .header .showplus {} .accordion .header .showminus { display:none; } .accordion .header.current .showplus { display:none; } .accordion .header.current .showminus { display:block; } li.subhead {} /* Panes ------------------------------------------------------- */ #pm ul.accordion li.pane.first { } #pm ul.accordion li.pane { /* font-size:.825em; */ } #pm ul.accordion li.pane p {} #pm ul.accordion li.pane ul { list-style-type:disc; margin-left:1em; } #pm ul.accordion li.pane li {} #pm ul li.title {} /* ------------------------------------------------------------------------------------- =Autocomplete ------------------------------------------------------------------------------------- */ .ui-helper-hidden-accessible { display:none; } .ui-widget.ui-widget-content.ui-autocomplete { width:355px !important; margin:auto; padding:0; z-index:999999 !important; border-radius:0; max-height:332px; overflow-x:hidden; overflow-y:scroll; border:1px solid var(--borderColour); z-index:2000; background:var(--bgColor); } .ui-autocomplete li.ui-menu-item { width:100%; display:inline-block; cursor:pointer; margin:0; } .ui-menu-item a { display:inline-block; width:98%; padding:0 1%; } .ui-autocomplete li { list-style:none; } .ui-autocomplete li:hover {} .ui-menu .ui-menu-item a.ui-state-focus, .ui-menu .ui-menu-item a.ui-state-active { margin:0; border-radius:0; border:none; outline:none; } .ui-menu-item a.ui-state-active {} .foundProduct { display:inline-block; vertical-align:top; width:20%; } .foundProduct img { width:100%; max-width:80px; height:auto; } .foundProductTitle { display:inline-block; width:78%; /* font-size:.750em; */ margin:1%; font-family:var(--altFont); font-weight:600; } .foundProductRef { display:none; } .foundProductDesc { display:none; } .foundProductDesc {} .ui-autocomplete mark {} /* ------------------------------------------------------------------------------------- =Email when back in stock EWIS ------------------------------------------------------------------------------------- */ /* take care as the html markup that writes this thing out is a bit borked! */ #ewis h3 { font-weight:600; } #ewis label { color:#61666b } .fprd .ewis { grid-column:1/-1; text-align:center; font-size:.825em; } a.lnk.ewisopen, a.lnk.ewis { display:inline-block; vertical-align:middle; font-family:var(--buttonFont); font-size:1em; padding: 0.5em 1em; border: none; text-align: center; border-color:inherit; cursor:pointer; background-color: var(--altColor); border:1px var(--altColor) solid; color:white; text-transform:capitalize; border-radius: 3px; } .lnk.ewisopen:hover { text-decoration:none; } /* ------------------------------------------------------------------------------------- =HoverBsket ------------------------------------------------------------------------------------- */ .hoverbskt { background-color: #ffffff; border:1px solid var(--borderColour); box-shadow:5px 5px 5px var(--bgaltColor3); width: 250px; padding:.5em; padding-bottom:0; z-index:1001; text-align:center; } .hoverbskt h3 { /*pointless title - hide it */ display:none; } .hoverbskt .lines .item:last-child {} .hoverbskt .formupdate {} .hoverbskt .formupdate input {} .hoverbskt .formupdate input.submitQtyChange {} .hoverbskt a, .hoverbsktadd a, .hoverbskt p, .hoverbsktadd p {} .hoverbskt .lines {} .hoverbskt .lines .item { display:grid; grid-template-columns: 58px 1fr; align-items:center; text-align:left; grid-gap:.25em; } .hoverbskt .lines .item a.title, .hoverbskt .lines .item p.sample { font-family:var(--altFont); font-weight:600; font-size:.875em; } .hoverbskt .lines .item img {} .hoverbskt .lines .item p.descr {} .hoverbskt .lines .item p.qty { /* executive decision to not show this */ display:none; } .hoverbskt .lines .item p.price { /* executive decision to not show this */ display:none; } .hoverbskt h4.count { text-align:center; font-size: 0.825em; padding:.5em; border-top: 1px var(--borderColour) solid; } .hoverbskt h4.total { text-align:center; font-size: 0.825em; padding:.5em; border-bottom: 1px var(--borderColour) solid; } .hoverbskt a.btn { text-align:center; margin: 0.5em; } /* ------------------------------------------------------------------------------------- =PopupDialog / Popup Add to Basket / Direct Despatch ------------------------------------------------------------------------------------- */ .hoverbsktadd, #popupdialog { position:fixed; top:25%; left:35%; width:calc(30% - 1em); padding:.5em; z-index:2000; border:2px var(--borderColour) solid; background-color:var(--bgColor); display:none; text-align:center; } .hoverbsktadd .item, #popupdialog .item { display: grid; grid-template-columns:100px auto auto; grid-gap:.25em; align-items:center; margin-bottom:1em; } .hoverbsktadd .item img, #popupdialog .item img{ margin:auto; } .hoverbsktadd h3, #popupdialog h3 {} .hoverbsktadd a, #popupdialog a {} .hoverbsktadd .item a.title, #popupdialog .item .title {} .hoverbsktadd .item p.qty, #popupdialog .item p.qty { grid-column:1; text-align:left; } .hoverbsktadd .item p.price, #popupdialog .item p.price { grid-column:3; text-align:right; } .hoverbsktadd a[title="Checkout"]:hover {} #popupdialog .useraccount {} #popupdialog .useraccount input {} #popupdialog .useraccount a {} /* media queries for viewports start BIG and go small outside of this it used the default --------------------------------------- */ /* under 400px wide, go wider */ @media screen and (max-width:400px ){ .hoverbsktadd, #popupdialog { left:2.5%; width:calc(95% - 1em); } } /* ------------------------------------------------------------------------------------- =Messages ------------------------------------------------------------------------------------- */ #mess{ background-color:#ffffff; /* padding:1em; */ margin:1em 0; text-align:center; } .warn{ color:red; } /* OOS and DDS popup 20/11/14 */ .outofstockdialog, .directdespatchdialog {} .outofstockdialog .outofstockpopup, .directdespatchdialog .directdespatchpopup {} .outofstockdialog span, .directdespatchdialog span {} .outofstockdialog .outofstockpopup .oosheader, .directdespatchdialog .ddheader {} .outofstockdialog .outofstockpopup .oosmessage, .directdespatchdialog .ddmessage {} .outofstockdialog .outofstockpopup .oosmessage .oosdate, .directdespatchdialog .dddate {} .ui-dialog-titlebar {} .outofstockdialog .ui-widget-content {} .outofstockdialog .ui-widget-content .ui-dialog-buttonset button, .directdespatchdialog .ui-widget-content .ui-dialog-buttonset button {} /* Out of Stock, Direct Despatch ------------------------------------------------------- */ .ui-dialog.outofstockdialog, .ui-dialog.directdespatchdialog {} .ui-dialog.outofstockdialog .outofstockpopup, .ui-dialog.directdespatchdialog .directdespatchpopup-pane {} .ui-dialog.outofstockdialog .outofstockpopup .oosheader, .ui-dialog.directdespatchdialog .ui-widget-header {} .ui-dialog.directdespatchdialog .ui-widget-header {} .ui-dialog.directdespatchdialog .ui-widget-header .ui-dialog-titlebar-close {} .ui-dialog.outofstockdialog .outofstockpopup .oosmessage .oosdate {} .ui-dialog.outofstockdialog .ui-dialog-titlebar {} .ui-dialog.outofstockdialog .ui-widget-content, .ui-dialog.directdespatchdialog .ui-dialog-buttonpane {} .ui-dialog.outofstockdialog .ui-widget-content .ui-dialog-buttonset, .ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset {} .ui-dialog.outofstockdialog .ui-widget-content .ui-dialog-buttonset button, .ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button {} .ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button:first-child {} .directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button {} #directdespatchpopup-pane span.ddproduct {} .ddmessage {} .ddmessage span.dddatemessage {} .ddmessage span.dddate {} /* ------------------------------------------------------------------------------------- =SiteContainer ------------------------------------------------------------------------------------- */ #site { width:100%; /* max-width: 1200px; */ margin:auto; font-size:16px; font-weight:normal; text-align:left; -webkit-text-size-adjust:100%; } /* ------------------------------------------------------------------------------------- =FIXEDTop Panel ------------------------------------------------------------------------------------- */ #ptf{ top:0px; z-index:2002; width: 100%; min-width: 1200px; background-color:var(--bgColor); color:var(--textColor); font-size:.875em; } #ptf .ext { width: 1200px; margin: 0 auto; position: relative; text-align:right; } /*because we are floating elements */ #ptf:after{ content: ""; clear: both; display: table; } /* vat switch ------------------------------------------------------- */ #ptf .vatsw{ float:left; text-transform:uppercase; } .vatsw div{ display:inline-block; vertical-align:middle; font-size:inherit; } .vatsw form#vatswitch{ position: relative; margin: 0 auto; } .vatsw form input label{ text-shadow: 0 1px rgba(255, 255, 255, 0.25); } .vatsw form input { display:inline-block; vertical-align:middle; font-size:1em; width: 1em; height: 1em; margin:.5em 0; background-color: #999999; -webkit-appearance: none; cursor:pointer; } .vatsw form input[checked="checked"] { background-color:var(--mainColor); background-repeat: no-repeat; cursor:initial; } #vatswitch div:nth-child(1) label { float: left; margin: .5em; border-radius: .25em 0 0 .25em; } #vat_yes { display:inline-block; vertical-align:middle; border-radius: .25em 0 0 .25em; border-top: 1px solid #bfbfbf; border-bottom: 1px solid #fff; border-left: 1px solid #cecece; } #vat_no { display:inline-block; vertical-align:middle; border-radius: 0 .25em .25em 0; border-top: 1px solid #bfbfbf; border-right: 1px solid #cecece; border-bottom: 1px solid #fff; } #vatswitch div:nth-child(2) label { float: right; margin:.5em; margin-left: .5em; } /* top links ------------------------------------------------------- */ #ptf .info{ float:right; text-transform:uppercase; } #ptf .info li{ display:inline-block; /* font-family:var(--altFont2); */ } #ptf .info li a{ display:inline-block; padding: 0.5em .5em; } #ptf .info li a:hover{ color:var(--textColorLight) } /* Top content/contact ------------------------------------------------------- */ #ptf .art{ float:left; } #ptf .artp, #ptf .imgcont{ display:inline-block; vertical-align:middle; font-family:var(--altFont2); padding: 0.5em .25em; } /* VAT Switch ------------------------------------------------------- */ /* ------------------------------------------------------------------------------------- =PanelTop ------------------------------------------------------------------------------------- */ #pt { margin: 0 auto; padding: 0; width: 100%; min-width: 1200px; position:relative; background-color:white; } #pt .ext { margin: 0em auto; position: relative; width: calc(1200px - 0em); display:grid; grid-template-columns: 390px 1fr 140px 250px; grid-template-areas:"search logo favourite basket" "nav nav nav nav"; text-align:right; align-items:center; align-content:center; } #pt ul { /* typically we dont want bullet styles*/ list-style: none; list-style-position: inside; display: inline; } /* favourites ------------------------------------------------------- */ #p52330496{ grid-area:favourite; align-self:center; text-align:right; } #p52330496 .bc{ margin-left:auto; display:inline-block; margin-right:2em; margin-top:.5em; } #p52330496 .icon a.img{ grid-area:icon; display:block; } #p52330496 .icon .img img{ display:block; max-height:1.5rem; width:auto; } #p52330496 ul{ display:grid; grid-template-columns: auto auto auto; align-items:center; grid-template-areas:"phone account favourites"; } #p52330496 li.icon{ display:grid; grid-template-columns:1fr; grid-template-areas: "icon" "text"; text-align:center; margin-right:1rem; } #p52330496 li.icon:last-of-type{ margin-right:0; } #p52330496 a.lnk{ display:none } /* First info block ------------------------------------------------------- */ /* Site Logo ------------------------------------------------------- */ #pt .pbnr{ grid-area:logo; text-align:center; } #pt .pbnr .bnr{ text-align:center; } #pt .pbnr img{ height:auto; } /* Second info block (register/sign in) ------------------------------------------------------- */ #pt .info li.pipe{ /*why do this anyway!*/ display:none; } /* Search ------------------------------------------------------- */ #pt .search {grid-area:search;/* align-self:end; */text-align:left;} #pt .search form{ text-align: right; border: 1px solid var(--borderColour); border-radius:5px; } #pt .search label { display: none; } #pt #searchbox { background-color:#ffffff; border:none; display:inline-block; vertical-align:middle; color:var(--textColor); outline:0; /* make sure the auto complete width matches this width */ width: 355px; padding:0; } /*sort the placeholder color*/ #pt #searchbox::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color:var(--bgColor); } #pt #searchbox:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ opacity: 1; color:var(--bgColor); } #pt #searchbox::-moz-placeholder { /* Mozilla Firefox 19+ */ opacity: 1; color:var(--bgColor); } #pt #searchbox:-ms-input-placeholder { /* Internet Explorer 10-11 */ color:var(--bgColor); } #pt #searchbox::-ms-input-placeholder { /* Microsoft Edge */ color:var(--bgColor); } #pt #searchbox:focus{ /* outline: 0; */ /* border: none; */ } #pt .search input#search { display:inline-block; vertical-align:middle; outline: 0; border:0; width: 2em; height:2em; background-size:.1em; padding:0.5em; /* margin:0.5em; */ background-color:transparent; border-radius:0; } #pt .search input[type="submit"] {} /* Basket ------------------------------------------------------- */ #pt .bskt { grid-area:basket; /* align-self:end; */ /* margin-top:1em; */ margin-left: calc(100% - 250px); /*width needs to be set and match the hoverbasket width */ width: 250px; } #pt .bskt .bc {} #pt .bskt .bt { display:none; } #pt .bskt h3, #pt .bskt h4 { font-size: 0.825em; padding:.5em; } #pt .bskt #mybskt{ display:grid; /* padding:0 .5em; */ grid-template-columns:1fr 1fr; grid-gap:.25em; background:url('https://s3-eu-west-1.amazonaws.com/glencrest/6225920/i/bdr/basket.png?') no-repeat left center; background-size:2em; } #pt .bskt #mybskt h4{ grid-column:1/3; text-align:center; /* client request - doesn't want the free delivery messages */ color:#fff; } #pt .bskt #bsktitems { grid-column:2; grid-row:1; text-align:left; } #pt .bskt #bsktitems span{ /* display:none; */ margin:0 .5em; } #pt .bskt #bsktvalue {} #pt .bskt #bsktvalue span{ display:none; } #pt .bskt span {} /*the my basket button*/ #pt .bskt a.btn { display:none; } #pt .bskt a.btn img {} #pt .art#a109969410{ grid-column:2; grid-row:2; text-align:center; color:var(--altColor) } #pt .art#a109969410 h3{ font-size: 1.25em; margin:1em; } /* ------------------------------------------------------------------------------------- =CentrePanel ------------------------------------------------------------------------------------- */ #pc { width: 100%; min-width: 1200px; } #pc .bc { width: 1200px; margin: 0 auto; position: relative; text-align:left; } #pc .arts, #pc .pbnr {} #pc .arts .bc, #pc .pbnr .bc{ width:auto; } #site.home #pc {} #pc .bc .pbnr {} #pc .bc .pbnr img {} #pc .bc .pbnr h3 {} /* carousel bits with text next to image */ #pc .imgcont{ display:grid; grid-template-columns:auto auto; align-items:center; grid-gap:1em; } /* use grid to change display order - would be better if coms had an option to do this per slide */ #pc .imgcont img{ grid-column:2; grid-row:1 } #pc .imgcont div{ grid-column:1; grid-row:1; } #pc .imgcont h3{ font-family:var(--altFont2); color:var(--textSubHeadingColor); margin-bottom:.25em; } #pc .imgcont h2{ font-family:var(--mainFont); color:var(--textHeadingColor); margin-bottom:1em; } #pc .imgcont p{ color:var(--textHeadingAltColor); margin-bottom:1em; max-width:500px; } #pc .slideCont{ color:#fff; } #pc .topMessage{ border: 1px var(--mainColor) solid; padding:.5em; margin:.5em 0; text-align:center; } #pc .topMessage h2{ font-family:var(--altFont2); background-color:#fff; } #pc .topMessage .artp{ padding:.5em; text-align:center; background-color:#fff; } /* ------------------------------------------------------------------------------------- =MainPanel ------------------------------------------------------------------------------------- */ #pmid { width:1200px; clear: both; margin: 0 auto; padding: 0; position: relative; /*used to ensure left panel displays correctly, unsure why though... */ display:flex; } #pm { margin: 0 auto; position: relative; margin-bottom:1em; } /*should only be pmwide if a left panel is in use*/ #pm.pmwide { width: 80%; display:inline-block; vertical-align:top; } #pm.pmfull { width: 1200px; background-color:transparent; } #pm .pmind {} /* Articles ------------------------------------------------------- */ /* Banners ------------------------------------------------------- */ /* ------------------------------------------------------------------------------------- =RightPanel ------------------------------------------------------------------------------------- */ #pr { width: 25%; padding:1em; } /* ------------------------------------------------------------------------------------- =LeftPanel ------------------------------------------------------------------------------------- */ #pl { width: calc(20% - 1em); margin-right:1em; margin-top:1em; } #pl .bt h3 { font-size: 1em; padding: .5em; font-size: 1em; padding: .5em; background-color:var(--bgaltColor2); color:white; position:relative; cursor:pointer; } #pl .bc {} #pl .bc #sldiv {} #pl p {} #pl a {} #pl a:hover {} #pl .bb {} #pl .dept{} #pl .dept .bc{} #pl .dept .bc li{} #pl .dept ul{} #pl .dept ul li{} #pl .dept ul li a{} #pl .pbnr {} #pl .bnr {} #pl .bnr span {} /* ------------------------------------------------------------------------------------- =FooterPanel ------------------------------------------------------------------------------------- */ #pf { width: 100%; background-color:var(--altColor3); /* color:var(--mainColor) */ } #pf .ext { margin: 1em auto; position: relative; /* padding-top:1em; */ width:1200px; } #pf .art.imageText{ display:inline-block; padding:.5em; width: calc(33.333333% - 1em); text-align:center; } #pf ul {} #pf ul li {} #pf ul li:last-child {} /* Typography ------------------------------------------------------- */ #pf h2, #pf h3, #pf h4, #pf span, #pf strong{} #pf a, #pf p, #pf ul{ margin-bottom:.5em; } #pf a:hover{} #pf h2, #pf h3, #pf h4{ color:var(--mainColor); font-size:1.5em; margin-bottom:.5em; } #pf li{} /* Testimonial Slider Article ------------------------------------------------------- */ #pf .art{ /* background-color:var(--mainColor); */ } #pf .art .carousel{ width:1200px; margin:auto; } #pf .art .carousel { color:white; padding-bottom:1em; } #pf .owl-theme .owl-dots .owl-dot span { border-color:var(--borderColour); background-color:transparent; } #pf .owl-theme .owl-dots .owl-dot.active span, #pf .owl-theme .owl-dots .owl-dot:hover span { border-color: var(--altColor); background-color:var(--altColor) } /* image overlay (because we don't have a better way yet!) */ #pf .art .carousel .imgcont { position: relative; display:grid; grid-template-columns:1fr; grid-template-rows:1fr; align-items:center; } /*first statement is to cover lack of css class being applied */ #pf .art .carousel .imgcont img, #pf .art .carousel img.slideCont{ grid-row:1; grid-column:1; padding:0; } /*first statement is to cover lack of css class being applied */ #pf .art .carousel .imgcont div, #pf .art .carousel .slideCont { grid-row:1; grid-column:1; display: inline-block; vertical-align: middle; text-align: center; color:var(--white); margin:auto; min-width:25%; max-width:70%; } #pf .art .carousel .imgcont div h2, #pf .art .carousel .slideCont h2, #pf .art .carousel .imgcont div p, #pf .art .carousel .slideCont p{ width:auto; margin:.5em; font-family:var(--altFont2); font-size:1.25em; } #pf .art .carousel .imgcont h4{ color:var(--textSubHeadingAltColor); font-size:1em; margin:1em; } #pf .art .carousel .imgcont p{ margin:.5em; } /* newsletter ------------------------------------------------------- */ #pf .news{ background-color:var(--footerColor); } #pf .news .bt{ width:1200px; margin:auto; padding:2em 0; text-align:center; } #pf .news .bc{ width:1200px; margin:auto; padding:0; text-align:center; } #pf .news form{ text-align:center; } #pf .news .bb:before{ content:''; height: 53px; display:block; background-color:white; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTQwIiBoZWlnaHQ9IjUzIiB2aWV3Qm94PSIwIDAgMTU0MCA1MyI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogI2Y2ZjRmNzsKICAgICAgICBmaWxsLXJ1bGU6IGV2ZW5vZGQ7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGlkPSJiZ18tX2Y2ZjRmNyIgZGF0YS1uYW1lPSJiZyAtIGY2ZjRmNyIgY2xhc3M9ImNscy0xIiBkPSJNMC0yNjBIMTU0MFYwUzExNTQuNjksNTMsNzY5LjU0Miw1M0MzODQuNjk0LDUzLDAsMCwwLDBWLTI2MFoiLz4KPC9zdmc+Cg=='); background-repeat:no-repeat; background-position:bottom; background-size:cover; } #pf .pbnr img{ height:auto; } /* Newsletter signup; ------------------------------------------------------- */ #pb .news{} #pf .news .bc label{ display:block; color:var(--textColor); margin-bottom:1em; } #pf .news .bc .inputtext_light, #pf .news .bc .inputtext{ display:inline-block; vertical-align:middle; border-right:none; border-top-left-radius:8px; border-bottom-left-radius:8px; } #pf .news .bc .submit{ padding: 0.6em 0.6em; display:inline-block; vertical-align:middle; border-top-left-radius:0px; border-bottom-left-radius:0px; } /* Info ------------------------------------------------------- */ #pf .info{ display:inline-block; vertical-align:top; padding:.5em; width: calc(20% - 1em); } /* Client specific ------------------------------------------------------- */ /* ------------------------------------------------------------------------------------- =BottomPanel ------------------------------------------------------------------------------------- */ #pb { margin: 0em auto; /* margin-top: 1em; */ width: 100%; min-width: 1200px; background-color:var(--footerColor); font-family:var(--altFont); font-weight:600; } #pb .ext { width: 1200px; margin:0 auto; position: relative; display:grid; grid-gap: 0 1em; grid-template-columns:1fr 1fr 1fr 1fr; } #pb .pipe { display: none; } #pb ul { list-style: none; font-family:var(--altFont); color:var(--textColorLight); text-transform:uppercase; } #pb .info h3, #pb .art h2, #pb .pbnr h3 { font-size:1.5em; font-family: var(--altFont); color:white; margin-top: 1em; margin-bottom: 1em; } #pb .info a:hover, #pb .art a:hover{ text-decoration:underline; } /* Typography ------------------------------------------------------- */ #pb h2, #pb h3, #pb h4, #pb span, #pb strong{} #pb a, #pb p{} #pb a:hover{} #pb h2, #pb h3, #pb h4{} #pb p, #pb li{ color:var(--textColorLight); margin-bottom: 0.5em; } /* Articles ------------------------------------------------------- */ #pb .art{ } /*company details article */ #pb .art#a110100482{} #pb .art#a110100482 ul:first-of-type li{ display:block; } #pb .art#a110100482 li{ display:inline-block; vertical-align:middle; } /*increase size of font awesome icons */ #pb .art#a110100482 i{ font-size: 1.25em; display:inline-block; vertical-align:middle; } #pb .art#a110100482.textImage .imgcont{ display:inline-block; vertical-align:top; margin:0; margin-right:.25em; } /* Info ------------------------------------------------------- */ #pb .info{} /* Social Icons ------------------------------------------------------- */ /* Client specific ------------------------------------------------------- */ /* ------------------------------------------------------------------------------------- =FIXEDBottom Panel ------------------------------------------------------------------------------------- */ #pbf{ width: 100%; min-width: 1200px; background-color:var(--footerColor); color:var(--textColorLight); } #pbf .ext{ width:1200px; margin:auto; padding:.5em 0; font-size:.725em; } /* ------------------------------------------------------------------------------------- =Copyright and Managed by and cookie stuff ------------------------------------------------------------------------------------- */ #pbf .etailcopy { display:inline-block; width:100%; display:grid; grid-template-columns:1fr 1fr; } #pbf .info{ display:inline-block; width:100%; text-align:center; } #pbf .info li{ display:inline-block; margin:.5em; } /* note to use grid layout */ p.copy{} p.etail { text-align:right; } p.copy { display:inline-block; margin-right: 1em; } p.copy span {} /* cookie popup ------------------------------------------------------- */ #pbf .cookie { position: fixed; bottom: 0%; left: 0%; width: 100%; z-index: 1000; background: #0d0d0d; text-align: center } #pbf .cookie p { width: 1200px; margin: 0 auto; float: none; color: #fff; /* font-size: .75em; */ padding: .5em 0; } #pbf .cookie p a { float: none; color: #fff; text-decoration: underline; padding: 0 .25em; } #pbf .cookie img { float: none; display: inline-block; vertical-align: middle; margin-left: 10px } #pbf .cookie img:hover { cursor: pointer } /* ------------------------------------------------------------------------------------- =FilterSearch ------------------------------------------------------------------------------------- */ #pl .filter{ border:1px var(--bgColor) solid; } #pl .filter .bc .ContainerPanel .HeaderContent, #pl .filter .bc .ContainerPanel .HeaderContentClose {} #pl .filter .bc .ContainerPanel .Content .citem {} #pl .filter .bc .ContainerPanel .Content .citem:hover {} #pl .filter .bc .ContainerPanel .Content .citem span {} #pl .filter .bc .ContainerPanel .Content {} #pl .filter .bc .ContainerPanel .Content .showmore { cursor: pointer; } .filter .bt { background-repeat: no-repeat; width: 100%; } .filter .bt h3 { display: inline-table; } .longattrsection .items { overflow-x: hidden; -ms-overflow-x: scroll; margin-bottom: 1em; } .HeaderContent { font-size: 1em; padding: .5em; font-family: var(--mainFont); background-color:var(--bgaltColor2); color:white; position:relative; cursor:pointer; } .HeaderContent:after{ content:'\f146'; font-family: "Font Awesome 5 Free"; margin-right: .5em; font-size: 1em; position:absolute; right:0; top:.5em; } .HeaderContent.collapsed:after{ content:'\f0fe'; font-family: "Font Awesome 5 Free"; margin-right: .5em; font-size: 1em; position:absolute; right:0; top:.5em; } .HeaderContent h5 { font-size:1em; } .collapsed h5 {} .collapsed h5:hover {} .items{ margin:.5em 0 } .citem { color:var(--textColor); font-family:var(--mainFont); padding: .5em; margin: 0; cursor: pointer; } .citem:before{ font-family: "Font Awesome 5 Free"; margin-right: .5em; font-size: 1em; display:inline-block; content: '\f0c8'; } .citemselected:before{ font-family: "Font Awesome 5 Free"; margin-right: .5em; font-size: 1em; display:inline-block; content: '\f14a'; } .citem:empty { display: none; } .citem:hover {} .citemselected {} .citemselected:hover {} #divPriceRangeDisplay { text-align:center; padding: .5em; } #sldiv { margin: 1em; } #resetfs { display:none; } #resetfs h5 { text-transform: uppercase; cursor: pointer; } /* ------------------------------------------------------------------------------------- =SearchHeader / SearchFooter ------------------------------------------------------------------------------------- */ .deptwrap{} .searchheader, .searchfooter { padding:.5em 0; text-align:right; } .searchheader .bc, .searchfooter .bc{ display:grid; grid-template-columns: 120px 250px 150px 1fr; align-items:center; } .searchheader label, .searchfooter label{ font-size:.825em; margin-right:.5em; } /* results found */ .searchheader h5#rescou { font-size:.825em; display:inline-block; vertical-align:middle; margin-right:.5em; text-align:left; } /* sort by */ .searchheader #sorpan, .searchheader form[name="dispord"]{ display:inline-block; vertical-align:middle; margin-right:.5em; } /* results per page */ .searchheader #rpppan, .searchheader .rpp{ display:inline-block; vertical-align:middle; margin-right:.5em; } .searchheader .search { /* for unknown reasons we re-write out the searchbox in the search header*/ display:none; } .searchheader .paging { display:inline-block; vertical-align:middle; margin-right:.5em; padding:.5em 0; } /*writing out "page" is a little daft */ .searchheader .paging label, .searchfooter .paging label { display:none; } .searchheader .paging span, .searchheader .paging a, .searchfooter .paging span, .searchfooter .paging a { font-size:1em; display:inline-block; margin-right:.5em; } .searchheader .paging a, .searchfooter .paging a{} /*this should be the current page */ .searchheader .paging span, .searchfooter .paging span { font-family:var(--mainFont) } .searchheader .search input#searchbox {} .searchheader .search input.submit {} .searchheader label[for="rpp"] {} .searchfooter .paging {} #sr { /* use grid layout */ display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 1em; position:relative; margin-top:1em; } /* ------------------------------------------------------------------------------------- =FeaturedProducts ------------------------------------------------------------------------------------- */ /* Base settings ------------------------------------------------------- */ #deptlist .fprdcont, #searchlist .fprdcont {} /* lets use grid layouts cos they are awesome! */ .fprd { /* border:1px var(--bgaltColor) solid; */ } .fprd:hover{} /* unfortunately there are cases where a .bc is present inside .fprd*/ .fprd .bc{ display:grid; grid-template-columns: 1.5fr 1fr 1.5fr; grid-template-areas: "image image image" "title title title" "unit . price" "buy buy buy"; align-items:center; grid-gap: 0.5em; padding: 0.5em; position:relative; background-color:#ffffff; /*using min height here to make things the same*/ min-height:425px; } .fprd .bc .fprdimg{ grid-area:image; text-align:center; /* padding:.5em; */ position:relative; } /* image ------------------------------------------------------- */ .fprd a.img { grid-column:1/3; grid-row:1; text-align:center; padding:.5em; } .fprd a.img img { max-width:100%; } .fprd .fprdimg{} .fprd .fprdimg img{ } .fprd .fprdimg a.img { display:inline-block; padding:0; } /* title ------------------------------------------------------- */ .fprd .fprdtitle, .fprd a.title { font-family: var(--headingFont); font-weight:600; grid-area:title; text-align: left; color: var(--altColor); align-self:start; /*min-height set based on 3 line titles */ min-height: 3.25em; align-items:center; text-align:center; } .fprd .strap {} .fprd .strap p{} /* pricing structure ------------------------------------------------------- */ .fprd .rrp{} .fprd .rrp h6{} .fprd .qty { grid-area:unit; align-self:start; } .fprd .price{ grid-area:price; text-align: right; align-self:start; } .fprd .price h6 { color:var(--altColor); font-weight:600; } .fprd .prevprice{ display:none; } .fprd .prevprice h6 { text-decoration: line-through; text-decoration-color:var(--mainColor); color:var(--textColor); } .fprd .offer{ grid-area:price; align-self:start; text-align:right; } .fprd .offer h6 { color:var(--altColor); font-weight:600; } .fprd label { font-size: 0.725em; color:var(--textColorLight); font-family:var(--altFont); } .fprd .trade { grid-area:price; align-self:start; text-align:right; } .fprd .trade h6 { color:var(--altColor); font-weight:600; } /* this is the vat info */ .fprd h6 span{ font-size:.5em; } /* pricebreaks ------------------------------------------------------- */ .pricebreak{} .pricebreak tr { display:table-row; grid-template-columns: repeat(auto-fit, minmax(0, 1fr) ); } .pricebreak th{} /* Unit specifics ------------------------------------------------------- */ .fprd .unit { display:none; /*just writes out a h5 - needs structural improvement and perhaps a label too like other items do */ } .fprd .unit label, .fprd .unit h6 {} .fprd .unit label {} .fprd .inner {} .fprd .outer {} .fprd .trade.break { display:none; } /* clientref/model code ------------------------------------------------------- */ .fprd .clientref span {} .fprd .brand, .fprd .manu, .fprd .model, .fprd .clientref { grid-row:3; font-size:.750em; /* equiv to 1em at .75em font size */ padding: 0.66666666666em; } .fprd .flag{ position:absolute; top: -0.5em; left: -0.5em; } .fprd .flag.offer{ grid-column:unset; grid-row:unset; } .fprd .flag.stkout{ grid-column:unset; grid-row:unset; } .fprd .piflags { position:absolute; bottom:0; } .fprd .piflags img{ max-width:32px; } .fprd .piflags ul {} .fprd .piflags li {} .fprd .flag img, .fprd .piflags img { width:auto; } /* Buy form ------------------------------------------------------- */ .fprd form { grid-area:buy; text-align:center; align-self:baseline; } .fprd form select { grid-column:1; grid-row:1; max-width:100%; display:inline-block; border-radius:8px; } .fprd form label { display:inline-block; text-align:left; vertical-align:middle; margin-right:.25em; max-width: 50px; } .fprd button { display:inline-block; vertical-align:middle; border:1px var(--borderColour) solid; background-color:var(--bgColor); color:var(--mainColor); font-weight:600; font-size:1.2em; padding:.25em .5em; } .fprd button.fpskuqtysub {} .fprd form input.inputtext { display:inline-block; vertical-align:middle; text-align:center; width:2.5em; } .fprd button.fpskuqtyadd{} .fprd form input.submit { font-size:.875em; margin-left:.5em; } /* quantity in basket - not shown everywhere... */ .qtyInBskt{ display:none; } /* more info button */ .fprdinfo, .fprd a.btn { grid-row: 1; align-self:center; text-align:center; grid-column:1 / 5; padding:.5em; z-index:1; } /* the more info button - both will show */ .fprd a.btn{ display:none; } /* the quickview button */ .fprd a.btn.qkvw{ } .fprd:hover a.qkvw { display:block; float: none; padding:4px; font-weight:400; display: block; margin: 0 auto; background-color:rgb(142,142,142); border-color:rgb(142,142,142); color: #FFF; grid-row:1; } .fprdinfo a.qkvw:hover { display:block; background-color: #d6aa59; border-color: #d6aa59; color:#fff; } /* Wishlist on fprd ------------------------------------------------------- */ .fprd .sfl{ grid-area:unset !important; position:absolute; top:.5rem; right:.5rem; width:2.5rem; height:2.5rem; z-index:1; } .fprd .sfl .submit { background-color:var(--featured-color); background-color:transparent; border:none; line-height:1; } .fprd .sfl .rsfl, .fprd .sfl .asfl{ display:grid; grid-template-areas:"button"; align-content:center; align-items:center; } .fprd .sfl .rsfl .submit, .fprd .sfl .asfl .submit{ width: 2.5rem; height:2.5rem; grid-area:button; padding:2px; } /* save for later ------------------------------------------------------- */ #pi .sfl{ position:absolute; top:.5rem; right:.5rem; } #pi .sfl input{ background-color:var(--white); width:2em; height:2em; padding:0; border:none; } /* Media Queries ------------------------------------------------------- */ /* ------------------------------------------------------------------------------------- =QuickView ------------------------------------------------------------------------------------- */ .quickview{ background-color:rgba(0,0,0,0.5); width:100vw; height:100vh; z-index: 1001; position:fixed; top:0; left:0; padding-top:5%; } .quickviewdialog{ width:800px; margin:auto; background-color:var(--white); z-index:999999; display:grid; grid-template-columns:1fr 1fr; grid-gap:.25em; } .quickviewdialog .quickviewHeader{ grid-column:1/3; } .quickviewdialog .quickviewHeader .closeqkvw{} .quickviewdialog .left{} .quickviewdialog .left .piimg{} /*it seems we now put a broken image carousel on the quickview*/ .quickviewdialog .left .owl-carousel{ display:none; } .quickviewdialog .left img{} .quickviewdialog .right{} .quickviewdialog .right .pititle, .quickviewdialog .right .lnk, .quickviewdialog .right .delivery{} .quickviewdialog .right .delivery h4{ margin-top:.5em; font-size:1.2em; } .quickviewdialog .right .brandmanu.model{} .quickviewdialog .right .brandmanu.model h5, .quickviewdialog .right .brandmanu.model h6{ font-family:var(--mainFont); font-size:.875em; margin-right:.5em; color:var(--altColor2); display:inline-block; vertical-align:middle; } .quickviewdialog .right .pidesc{ margin:.5em; } .quickviewdialog .right .pidesc h2[itemprop="name"]{ /*duplicated title */ display:none; } .quickviewdialog .right .pidesc p{} .quickviewdialog .right .lnk{ font-size:.8em; text-align:right; margin:.5em; } .quickviewdialog .right .pibuy{ } .quickviewdialog .right .pibuy .price, .quickviewdialog .right .pibuy .qty, .quickviewdialog .right .pibuy .trade{ text-align:center; margin:.25em; font-size:2em; } .quickviewdialog .right .pibuy .price label{ display:none; } .quickviewdialog .right .pibuy .price h6{} .quickviewdialog .right .pibuy .qty label, .quickviewdialog .right .pibuy .trade label, .quickviewdialog .right .pibuy .qty h6, .quickviewdialog .right .pibuy .trade h6{} .quickviewdialog .right .pibuy form p{} .quickviewdialog .right .pibuy form .attrqty{} .quickviewdialog .right .pibuy form .attrqty .qtyinput{ display:inline-block; vertical-align:middle; margin:.5em; } .quickviewdialog .right .pibuy form .attrqty .qtyinput label{} .quickviewdialog .right .pibuy input#bspsubmit{} .quickviewdialog .right .pibuy form .attrqty .qtyinput input.inputtext{} .quickviewdialog .right .pibuy form .attrqty input#buy{ display:inline-block; vertical-align:middle; margin:.5em; } .quickviewdialog .right .pibuy .stock{ text-align:center; font-size:.713em; } .quickviewdialog .right .pibuy .title{ /*pointless pricein gpb value, should only show if it isn't gbp */ display:none; } .quickviewdialog .right .pibuy .ewis_dialog, .quickviewdialog .right .pibuy .ewis{} /* ------------------------------------------------------------------------------------- =ProductLists ------------------------------------------------------------------------------------- */ .prdlst .bc ul{ display:grid; gap: .5em; padding:1em; /*will use media queries to change breakpoints set default here */ grid-template-columns:1fr 1fr 1fr 1fr 1fr; } .prdlst .bt h3{ font-size: 1.5em; font-weight: 600; text-align: center; padding:1em } /* media queries for viewports start BIG and go small outside of this it used the default --------------------------------------- */ /* over 600px wide and less than 800px wide - show 3 per row */ @media screen and (max-width:800px ){ .prdlst .bc ul { /* for grid widths us the fr unit - which is calcuated on free space (whats left after padding and margin) */ grid-template-columns:1fr 1fr 1fr; } } /* over 400px wide and less than 600px wide - show 2 per row */ @media screen and (max-width:600px ){ .prdlst .bc ul{ grid-template-columns:1fr 1fr; } } /* under 400px wide, show 1 per row */ @media screen and (max-width:400px ){ .prdlst .bc ul{ grid-template-columns: 1fr; } } /* items in product list - would be better if they had .fprd stylings on them !*/ .prdlst li { display:grid; grid-template-columns: 1fr 1fr; position:relative; border: 1px solid var(--borderColour); background-color:#ffffff; align-items:center; } .prdlst li a.img{ grid-column:1/3; grid-row:1; text-align:center; padding:.5em; } .prdlst li a.txt{ grid-column:1/3; grid-row:2; text-align:center; padding:.5em; color:var(--textColor); font-weight:600; } .prdlst .price{ grid-column:1/3; grid-row:3; text-align:center; padding:.5em; } .prdlst .offer{ grid-column:2; grid-row:3; text-align:center; } .prdlst .prevprice{ grid-column:1; grid-row:3; text-align:center; } .prdlst .prevprice h6{ text-decoration:line-through; } .prdlst h6{ font-weight:600; } .prdlst label{ font-weight:400; } /* ------------------------------------------------------------------------------------- =BrandLists ------------------------------------------------------------------------------------- */ /* scrolling brand lists */ .brnd .scroller{} .brnd ul { background-color:#ffffff; width:100%; overflow:hidden; } .brnd #buttleft, .brnd #buttright{ display:none; } .brnd ul li { display:inline-block; vertical-align:middle; height:100%; padding-left: 1em; } .brnd ul li a{} .brnd ul li a img { display:inline-block; vertical-align:middle; opacity:0.6; filter:alpha(opacity=60); -webkit-transition:opacity .2s ease-in-out; -moz-transition:opacity .2s ease-in-out; -o-transition:opacity .2s ease-in-out; transition:opacity .2s ease-in-out; filter:grayscale(1); max-height:70px; width:auto; margin:auto; } .brnd ul li a:hover img { opacity:1; filter:alpha(opacity=100); filter:grayscale(0); } /* ------------------------------------------------------------------------------------- =RecentItems ------------------------------------------------------------------------------------- */ .ritm { } .ritm .bt {} .ritm h3 {} .ritm ul {} .ritm ul li { display:grid; grid-template-columns: 50px 1fr; align-items:center; grid-gap:.25em; margin-bottom:1em; background-color:#ffffff; padding:.5em; } .ritm a.img { grid-row:1; grid-column:1; } .ritm ul li a.img img { } .ritm ul li a.txt { /* font-family: var(--altFont2); */ color:var(--mainColor); align-self:start; font-size: 0.825em; grid-row:1; grid-column:2; } .ritm ul li .price, .ritm ul li .unit, .ritm ul li .offer{ display:none; } .ritm ul li .qty{ grid-column:1/-1; grid-row:2; text-align:right; font-size:.825em; align-self:end; } .ritm ul li .trade, .ritm ul li .offer{ grid-column:1/3; grid-row:1; text-align:right; font-size:.825em; align-self:end; } .ritm ul li .prevprice{ display:none; } .ritm ul li .price label, .ritm ul li .qty label, .ritm ul li .trade label, .ritm ul li .offer label{ display:none; } /* ------------------------------------------------------------------------------------- =MyAccount ------------------------------------------------------------------------------------- */ .myaccount ul {} .link {} #psign h4, #psign h3 { margin-bottom:.5em; } /* orderinfo ------------------------------------------------------- */ .orderinfo{} .orderinfo ul.order li{ display:grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-template-columns: 25% 75%; grid-gap:.5em; margin-bottom:.5em; } .orderinfo ul.order label{ grid-column:1; font-weight:600; } .orderinfo ul.order li span{ grid-column:2; display:contents; word-break:break-word } .orderinfo ul.order table{ grid-column:1/3; } /*view order button uses the same image as other things, be careful! */ .orderinfo #pm a.btn.info{ background:none; margin:0; padding:0; } .orderinfo #pm a.btn img.btn{ width:1em; } ul.order a.lnk { grid-column:1/3; font-family: "proxima-nova",sans-serif; font-weight:600; font-size:1em; margin:.5em; padding:.5em .5em; text-align:center; cursor:pointer; border:none; outline:none; color:#ffffff; background-color: var(--bgColor); } /* my details ------------------------------------------------------- */ form[name="selectDelAddress"]{} form[name="selectDelAddress"] li.info{ width:100%; color: #1d1d1d; font-family: "open-sans", sans-serif; /* www.aestheticallyloyal.com/public/optimize-legibility/ */ text-rendering: optimizelegibility; } form[name="selectDelAddress"] li label{ grid-column:1/3; text-align:left; } #psign ul.orders a.img, #psign ul.contact a.img, #psign ul.details a.img { text-align:center; justify-self:center; align-self:center; } #psign ul.orders a.img img, #psign ul.contact a.img img, #psign ul.details a.img img { max-height:32px; padding:.5em; } #psign ul.orders a.lnk, #psign ul.contact a.lnk, #psign ul.details a.lnk { justify-self:left; align-self:center; font-weight:600; } #pm .form .link {} /* ------------------------------------------------------------------------------------- =Blog ------------------------------------------------------------------------------------- */ #site.blog #pm {} #site.blog #pm h2 {} #site.blog #pm .blog {} #site.blog #pm .blog a.title {} #site.blog #pm .blog p.date {} #site.blog #pm .blog img {} #site.blog #pm .blog .artp {} #site.blog #pm .blog a.more {} #site.blog #pm .blogBtns, #site.blog #pm .blogPageBtns {} #site.blog #pm .blogBtns a, #site.blog #pm .blogPageBtns a {} #site.blog #pm .blogBtns a.prev, #site.blog #pm .blogPageBtns a.prev {} #site.blog #pm .blogBtns a.next, #site.blog #pm .blogPageBtns a.next {} #site.blog #pm .art .bc h2 {} #site.blog #pm .art .bc .artp {} #site.blog #pm .art .bc .artp h3 {} /* ------------------------------------------------------------------------------------- =TabbedArticles ------------------------------------------------------------------------------------- */ #pi_wrapper{ -webkit-box-shadow: 2px 2px 2px 2px var(--bgaltColor3); -moz-box-shadow: 2px 2px 2px 2px var(--bgaltColor3)); box-shadow: 2px 2px 2px 2px var(--bgaltColor3); margin-bottom:1em; } #pi_wrapper ul.pi_tabs{} #pi_wrapper ul.pi_tabs li{ display:inline-block; padding:1em; background-color:var(--bgColor); cursor:pointer; font-weight:600; margin-right:1em; } #pi_wrapper ul.pi_tabs li.selected{ background-color:var(--mainColor); color:#ffffff; -webkit-box-shadow: 2px 2px 2px 2px var(--bgaltColor3) -moz-box-shadow: 2px 2px 2px 2pxvar(--bgaltColor3); box-shadow: 2px 2px 2px 2px var(--bgaltColor3); } #pi_wrapper .pi_tab_content{ border:1px var(--bgColor) solid; padding:1em; overflow-x:hidden; height:20em; -webkit-box-shadow: 2px 2px 2px 2px var(--bgaltColor3); -moz-box-shadow: 2px 2px 2px 2px var(--bgaltColor3); box-shadow: 2px 2px 2px 2px var(--bgaltColor3); } /* ------------------------------------------------------------------------------------- =CustomArticles ------------------------------------------------------------------------------------- */ .fullWidth{ width:100%; display:inline-block; vertical-align:top; margin-bottom:1em; } /*often don't want halfWidth on mobile */ .halfWidth{ width:100%; display:inline-block; vertical-align:top; margin-bottom:1em; } .third{ /* on mobile we don't want these splitting so go for full width */ width:calc(33.333% - 1em); display:inline-block; vertical-align:top; /*needed as text may be too wide to show on smaller devices*/ overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; padding:.5em; text-align:center; } .third .imgcont img{ max-width:100%; } .quarterWidth{ width:25%; display:inline-block; vertical-align:top; /*needed as text may be too wide to show on smaller devices*/ overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; margin-bottom:1em; } .deptHeader{ display:grid; grid-template-columns:70% 30%; background-color:white; padding:1em; align-items:center; /* grid-gap:1em; */ } .deptHeader h2{ grid-column:1/3; } .deptHeader .artp{ margin-right:1em; } .imageText { margin-bottom:1em; display:grid; grid-template-columns: auto 1fr; grid-gap:1em; align-items:center; background-color:var(--bgaltColor); } #pm .imageText .imgcont img{ display:block; } #pm .imageText .artp{} #pm .imageText .artp h2, #pm .imageText .artp h3, #pm .imageText .artp p{ margin-bottom:1em; line-height:1.5; } /* responsive iframe */ .respIframe{ width:calc(100% - 2em); margin:1em; display:inline-block; vertical-align:top; margin-top:2em; } /*to sort out the responsive iframe */ .respIframe .artp { position: relative; overflow: hidden; padding-top: 56.25%; } .respIframe .artp iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* CTA's used on home page and other places */ /*Grey Image then Text */ .greyCTAImgText{ background-color:var(--bgaltColor3); border-radius:5px; text-align:left; padding-left:3em; display:grid; grid-template-columns:auto auto; } .greyCTAImgText .imgcont{ align-self:end; } .greyCTAImgText .imgcont img{ display:block; } .greyCTAImgText .artp{ padding:2em; align-self:center; } .greyCTAImgText h3{ font-size:1.5em; margin-bottom:.5em; color:var(--textSubHeadingColor); } .greyCTAImgText h2{ font-size:2em; margin-bottom:.25em; color:var(--textHeadingColor); } .greyCTAImgText p{ color:#a5a2a7; margin-bottom:1em; } .greyCTAImgText p:last-child{ margin-bottom:0; } /*Grey Text then Image */ .greyCTATextImg{ background-color:var(--bgaltColor3); border-radius:5px; text-align:right; display:grid; grid-template-columns:auto auto; } .greyCTATextImg .imgcont{} .greyCTATextImg .artp{ padding:2em; align-self:center; text-align:left; } .greyCTATextImg h3{ font-size:1.5em; margin-bottom:.5em; color:var(--textSubHeadingAltColor); } .greyCTATextImg h2{ font-size:2em; margin-bottom:.25em; color:var(--white); } .greyCTATextImg p{ color:#a5a2a7; margin-bottom:1em; } .greyCTATextImg p:last-child{ margin-bottom:0; } /*Purple Text then Image */ .altCTATextImg{ background-color:var(--mainColor); border-radius:8px; text-align:right; display:grid; grid-template-columns:auto auto; } .altCTATextImg .imgcont{ background-color:var(--bgaltColor3); border-top-right-radius:8px; border-bottom-right-radius:9px; } .altCTATextImg .imgcont img{ } .altCTATextImg .artp{ padding: 2em; align-self:center; text-align:left; } .altCTATextImg h3{ font-size:1.5em; margin-bottom:.5em; color:var(--textSubHeadingAltColor); } .altCTATextImg h2{ font-size:2em; margin-bottom:.25em; color:var(--white); } .altCTATextImg p{ color:#a5a2a7; margin-bottom:1em; } .altCTATextImg p:last-child{ margin-bottom:0; } /*Black Text then Image */ .alt2CTATextImg{ background-color:var(--altColor2); border-radius:5px; text-align:right; display:grid; grid-template-columns:auto auto; } .alt2CTATextImg .imgcont{ background:linear-gradient(to right, var(--altColor2) 32px, var(--bgaltColor3) 32px); } .alt2CTATextImg .imgcont img{ display:block; } .alt2CTATextImg .artp{ padding:2em; align-self:center; text-align:left; } .alt2CTATextImg h3{ font-size:1.5em; margin-bottom:.5em; color:var(--textSubHeadingAltColor); } .alt2CTATextImg h2{ font-size:2em; margin-bottom:.25em; color:var(--white); } .alt2CTATextImg p{ color:#a5a2a7; margin-bottom:1em; } .alt2CTATextImg p:last-child{ margin-bottom:0; } /* ------------------------------------------------------------------------------------- =CustomBanners ------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------- =CustomPages/Promotions ------------------------------------------------------------------------------------- */ /* Contact Us ------------------------------------------------------- */ /* 404 page ------------------------------------------------------- */ /* FAQs ------------------------------------------------------- */ /* About US ------------------------------------------------------- */ /* ------------------------------------------------------------------------------------- =SpecificPages ------------------------------------------------------------------------------------- */ /* homepage ------------------------------------------------------- */ #site.home #pm .pmind{ /* display:grid; */ grid-gap:1em; /* grid-template-columns:1fr 1fr 1fr 1fr; */ align-items:end; } /*product carousels full width */ /*dept carousels full width */ #site.home #pm .deptprods, #site.home #pm .carousel.prod{ } #site.home #pm .deptprods h3, #site.home #pm .carousel.prod h2{ text-align:center; font-size:2.5em; margin:.25em 0; font-family:var(--altFont2) } #site.home #pm .deptprods .seeall{ text-align:center; display:block; margin-bottom:.5em; font-family:var(--altFont); font-weight:600; } #site.home #pm .deptprods .owl-dots, #site.home #pm .carousel.prod .owl-dots{ padding:1em; } /* articles */ #site.home #pm .art{ grid-column:1/5; } /* ------------------------------------------------------------------------------------- =DepartmentPages ------------------------------------------------------------------------------------- */ /* top x dept prod carousel used in promotions ------------------------------------------------------- */ .deptprods{ } .deptprods h3{ text-align:center; margin:.5em; grid-row:1; } /* dept single links used in promotions ------------------------------------------------------- */ .deptsingle { align-items:center; text-align:center; background-color:#fff; margin:.5em; position:relative; display:inline-block; vertical-align:top; width: calc(25% - 1em) } .deptsingle a.imglnk{ text-align:center; display:grid; } .deptsingle a.imglnk img{ object-fit:cover; width:100%; height:auto; } /* done like this due to lack of class on the text link */ .deptsingle a.imglnk + a { font-family: var(--altFont2); font-size:2em; text-align:center; display:block; height:auto; padding:.5em; background-color:#fff; position:absolute; bottom:0; width:calc(100% - 1em); opacity:.9; } /* Subdepartment tree ------------------------------------------------------- */ .depttree{ margin-top:1em; } .depttree h3{ color:var(--mainColor); margin-bottom:.5em; } .depttree h4.tagline{ font-size:1em; margin-bottom:1em; } .depttree ul{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr; grid-gap: 1em; } .depttree li{ display:grid; /*will use media queries to change breakpoints set default here */ grid-template-columns: 1fr; align-items:center; background-color:#ffffff; position:relative; } .depttree li:hover{ -webkit-box-shadow: 2px 2px 2px 2px var(--bgaltColor3); -moz-box-shadow: 2px 2px 2px 2px var(--bgaltColor3); box-shadow: 2px 2px 2px 2px var(--bgaltColor3); } .depttree a.txt{ font-family: var(--altFont2); font-size:1.5em; text-align:center; /* display:block; */ height:auto; padding:.0em; background-color:var(--bgaltColor); position:absolute; bottom:0; width:calc(100% - 0em); opacity:.9; } .depttree img{ margin:0 !important; padding:0 !important; } /* media queries --------------------------------------- */ /* ------------------------------------------------------------------------------------- =ProductPage ------------------------------------------------------------------------------------- */ /* Product Panels ------------------------------------------------------- */ #pi{ display:inline-block; position:relative; margin:0; padding:0; } #pi .top{} #pi .main{ display:inline-block; position:relative; width:1200px; margin:auto; padding-top:1em; text-align:left; } #pi .left{ display:inline-block; vertical-align:top; width: calc(500px - 1em); margin-right:1em; padding:0; position:relative; } #pi .right{ display:inline-block; vertical-align:top; width: calc(700px - 0em); /* padding:.5em; */ } #pi .bottom{} /* ------------------------------------------------------------------------------------- =tipsy ------------------------------------------------------------------------------------- */ .tipsy{ padding: .5em; font-size: 1em; opacity: 0.8; filter: alpha(opacity=80); background-repeat: no-repeat; background-image: url(/images/tipsy.gif); } .tipsy-inner{ padding: .5em; background-color: #1a1a1c; color: white; max-width: 200px; text-align: center; } .tipsy-inner{ -moz-border-radius: 3px; -webkit-border-radius: 3px; } .tipsy-north{ background-position: top center; } .tipsy-south{ background-position: bottom center; } .tipsy-east{ background-position: right center; } .tipsy-west{ background-position: left center; } /* Title ------------------------------------------------------- */ .pititle{ display:inline-block; vertical-align:middle; width: 77%; margin-bottom:.25em; } h4.strap{ font-size:1em; margin-bottom: .5em; margin:.5em 0; color:var(--textColorLight); font-family:var(--altFont2); } #pi .pititle h2{ color:var(--textColor); font-weight:600; } /* Image (carousel/Main Image Zoom) ------------------------------------------------------- */ #pi .piimg{ background-color:#fff; text-align:center; display:inline-block; vertical-align:top; } #pi .piimg img{ max-width:100%; height:auto !important; } #pi .piimg p{ display:none; } #pi .piimgx{} /* If image not aligning centrally */ #pi .piimg a{ margin:auto; text-align:center; } #pi .piimg a img{ margin:auto; } /* Gallery ------------------------------------------------------- */ #pi .gallery{ text-align:left; display:grid; grid-template-columns:1fr 1fr 1fr 1fr; grid-gap:.5em; } #pi .gallery h4{ display:none; } #pi .gallery .piimg_large{} #pi .gallery .piimg_large img{ width:100%; height:auto; margin:0 !important;; } #pi .gallery .piimg_large a{} /* This is the moving lens square underneath the mouse pointer. Not visible if the zoom window is over the image*/ .cloud-zoom-lens{ border:1px solid var(--borderColour); margin:-1px; /* Set this to minus the border thickness. */ background-color:#fff; cursor:move; } /* This is for the title text. */ .cloud-zoom-title{} /* This is the zoom window. */ .cloud-zoom-big{ overflow:hidden; top:0; left:0 !important; background-color:#fff; } /* This is the loading message. */ .cloud-zoom-loading{ position:absolute; top:0; margin:0; color:white; background:#222; padding:3px; } /* Brand and Manufacturer ------------------------------------------------------- */ #pi .brandmanu.brand h5, #pi .brandmanu.brand p{ display:none; } #pi .brandmanu.brand img{} #pi .brandmanu.model{ margin-bottom:.5em; padding-bottom:.5em; border-bottom:2px var(--bgaltColor2) solid; } #pi .brandmanu h5{ text-align:center; display:inline-block; vertical-align:middle; font-size:.825em; color:var(--textColor); } #pi .brandmanu h6{ text-align:center; display:inline-block; vertical-align:middle; font-size:.825em; margin-left:.5em; color:var(--textColor); } /* Barcodes ------------------------------------------------------- */ /* independant price element - not part of the form yay! ------------------------------------------------------- */ #pi .pricecomp{ display:inline-block; vertical-align: top; text-align:right; width: calc(23% - .5em); margin-left:.5em; color:var(--textColor); } #pi .pricecomp label{ display:none; } #pi .pricecomp h6{ font-size: 1.25em; /* font-family:var(--altFont2); */ } #pi .pricecomp h6 span{ font-family:var(--mainFont); font-size:.35em; display:block; } #pi .pricecomp .prevprice, #pi .pricecomp .saving{ display:none; } #pi .pricecomp .offer{} /* Buy Panel ------------------------------------------------------- */ #pi .pibuy{ position:relative; } #pi .pibuy h6{} #pi .pibuy .bt{} #pi .pibuy .bc{} #pi .pibuy .bb{} /* for some reasone we always show "price in..." */ #pi .pibuy .bc .title{ display:none; } /* pricing info ------------------------------------------------------- */ #pi .pibuy .bc .price, #pi .pibuy .bc .offer, #pi .pibuy .bc .prevprice, #pi .pibuy .bc .rrp, #pi .pibuy .bc .trade, #pi .pibuy .bc .saving{ display:inline-block; margin-right:1em; } /*normal price */ #pi .pibuy .bc .price { /*because despite my instructions this is being written out when not wanted!!!! */ display:none; } #pi .pibuy .bc .price h6{ display:inline-block; vertical-align:middle; } #pi .pibuy .bc .price label{ display:none; } #pi .pibuy .bc .price span{} /*rrp price */ #pi .pibuy .bc.rrp {} #pi .pibuy .bc .rrp h6{} #pi .pibuy .bc .rrp label{} #pi .pibuy .bc .rrp span{} /*offer price */ #pi .pibuy .bc .offer {} #pi .pibuy .bc .offer h6{} #pi .pibuy .bc .offer label{ display:none; } #pi .pibuy .bc .offer span{} /*previous price (goes with offer) */ #pi .pibuy .bc .prevprice {} #pi .pibuy .bc .prevprice h6{ text-decoration:line-through; text-decoration-color:#d94927; } #pi .pibuy .bc .prevprice label{ display:none; } #pi .pibuy .bc .prevprice span{} /*offer price */ #pi .pibuy .bc .saving { display:none; } #pi .pibuy .bc .saving h6{} #pi .pibuy .bc .saving label{} #pi .pibuy .bc .saving span{} /*trade price */ #pi .pibuy .bc .trade {} #pi .pibuy .bc .trade h6{} #pi .pibuy .bc .trade label{} #pi .pibuy .bc .trade span{} /* Messages */ #pi .pibuy p{ font-size:0.688em; display:inline-block; } #pi .pibuy h4{} #pi .pibuy h5{} #pi .pibuy p.p_stock{} /* stock */ #pi .pibuy .stock{ font-size:0.750em; } /* quantity in basket info */ #pi .pibuy .qtyInBskt{ margin:1em 0; font-size:.825em; } /*dynamic price */ .dynprice{ display:inline-block; } /* Pricing info ------------------------------------------------------- */ /* Buy Form -------------------------------------------------------*/ #buy_form{} /* attributes/sku select */ #buy_form .attr{ display:inline-block; vertical-align:middle; } #buy_form .attr label{ display:none; } #buy_form .options{ grid-column:1; grid-row:1; } #buy_form select, #buy_form textarea{} #buy_form select{ max-width:100%; } #buy_form .attrqty { grid-column:2; grid-row:1; } /* quantity input */ .attrqty .qtyinput{ display:inline-block; vertical-align:middle; margin:.5em; } /*hide quantity label*/ .attrqty .qtyinput label{ display:none; } .attrqty .qtyinput #skuqty{ display:inline-block; vertical-align:middle; text-align:center; padding:.5em; margin:.5em; } /*increase/decrease buttons */ .attrqty .qtyinput button{ display:inline-block; vertical-align:middle; border:1px var(--borderColour) solid; color:var(--textColor); font-weight:600; font-size:1.3em; padding:.25em .5em; background-color:#fff; cursor:pointer; } .attrqty .submit{ display:inline-block; vertical-align:middle; font-size:1em; border: none; text-align: center; cursor:pointer; } /* message if no option selected*/ #selectResponse{ color:red; padding:0 .5em } /* Description -------------------------------------------------------*/ #pi .pidesc, #pi .delivery{ color:var(--textColor); margin:1em 0; } #pi .pidesc h2[itemprop="name"]{ /*product title gets duplicated on the page*/ display:none; } /*strapline*/ #pi .pidesc h4[itemprop="description"]{ /*if strapline is added then it too gets duplicated on the page*/ display:none; } #pi .delivery h3{} #pi .pidesc p, #pi .delivery p{} #pi .pidesc ul{} #pi .pidesc li{} /* direct despatch */ #pi .pidesc.desp{} #pi .pidesc.desp h5{} #pi .pidesc.desp p{ display:inline-block; vertical-align:middle; } /* Extra Description ------------------------------------------------------- */ #pi .pidescx{} #pi .pidescx ul{} #pi .pidescx ul li{} /* Strapline -------------------------------------------------------*/ /* Accordion Description -------------------------------------------------------*/ /* Tabbed Descriptions -------------------------------------------------------*/ #pm #pi .pi_tab{ display:inline-block; width:100%; } #pm #pi #pi_wrapper{ -webkit-box-shadow:-2px 2px 2px 0 var(--bgaltColor3); -moz-box-shadow:-2px 2px 2px 0 var(--bgaltColor3); box-shadow:-2px 2px 2px 0 var(--bgaltColor3); } #pm #pi ul.pi_tabs{ display:inline-block; cursor:pointer; } #pm #pi ul.pi_tabs li{ font-size:1em; text-transform:uppercase; padding:1em; margin:1em; text-align:center; border:1px #ebecee solid; background-color:#ebecee; } #pm #pi ul.pi_tabs li.selected{ background-color:#2c4556; color:#fff; z-index:9999999; } #pm #pi ul.pi_tabs li:last-child{} #pm #pi .pi_tab_content{ width:95%; margin-left:1em; } #pm #pi .pi_tab_content h2{ font-size:1.2em; } #pm #pi .pi_tab_content h3, #pm #pi .pi_tab_content h4, #pm #pi .pi_tab_content ul, #pm #pi .pi_tab_content p{ padding:.5em; } #pm #pi .pi_tab_content p{ font-size:0.813em; } #pm #pi .pi_tab_content a{} #pm #pi .pi_tab_content a img {} #pm #pi .pi_tab_content ul , #pm #pi .pi_tab_content ol{} #pm #pi .pi_tab_content ul li, #pm #pi .pi_tab_content ol li{} #pm #pi .pi_tab_content ul li{ list-style:disc; font-size:0.938em; } /* Stock -------------------------------------------------------*/ /* Leadtime -------------------------------------------------------*/ /* Direct Despatch/Dropship -------------------------------------------------------*/ /* Links - Ask a question etc ------------------------------------------------------ */ #pi .pilinks li{ font-size:0.750em; display:inline-block; margin-bottom:.5em; } #pi .pilinks .linkimg{ display:inline-block; vertical-align:middle; } #pi .pilinks .linkimg img{ display:inline-block; vertical-align:middle; width:1em; height:auto; } #pi .pilinks a.lnk{} #pi .pilinks li.email a.lnk{ display:inline-block; vertical-align:middle; } #pi .pilinks ul li.query a.lnk{ cursor:pointer; display:inline-block; vertical-align:middle; } /* Files ------------------------------------------------------- */ #pi .pifile{ margin:.5em 0; text-align:right; } #pi .pifile li{ margin-bottom:.5em; } #pi .pifile .linkimg, #pi .pifile a{ display:inline-block; vertical-align:middle; margin:.125em; } #pi .pifile .linkimg img{ display:inline-block; vertical-align:middle; } /* Flags ------------------------------------------------------ */ #pi .flags{ display:inline-block; position:absolute; top:0px; right:0px; z-index:999; } #pi .flags .flag{ display:inline-block; margin-bottom:.5em; } /* Video Links (youtube) ------------------------------------------------------ */ #pi .youtube {} #pi .youtube li.title{} #pi .youtube li.vid{} /* Social Links ------------------------------------------------------ */ #pi .socbook {} #pi .socbook .bt h3{ display:none; } #pi .socbook li{ display:inline-block; margin-right:.5em; } /* Buytogether -------------------------------------------------------*/ /* Personalisation -------------------------------------------------------*/ #pi .pibuy form .pers{} #pi .pibuy form .pers li{} #pi .pibuy form .pers li:last-child{} #pi .pibuy form .pers label{} #pi .pibuy form .pers input.inputtext{} #pi .pibuy form .pers span.chars{} #pi .pibuy form .pers span{} /* Associated/Recommended/Related -------------------------------------------------------*/ #pi .prec, #pi .pass, #pi .prel, #pi .pran{} #pi .prec h3, #pi .pass h3, #pi .prel h3, #pi .pran h3{ margin:1em 0; text-align:center; border-bottom:1px var(--borderColour) solid; padding-bottom:1em; } #pi .prec .fprd, #pi .pass .fprd, #pi .prel .fprd, #pi .pran .fprd{} #pi .prec .fprd h3, #pi .pass .fprd h3, #pi .prel .fprd h3, #pi .pran .fprd h3{} #pi .prec .fprd .bc{} #pi .prec .fprd:last-child, #pi .pass .fprd:last-child, #pi .prel .fprd:last-child, #pi .pran .fprd:last-child{} #pi .prec .fprd .fprdimg, #pi .pass .fprd .fprdimg, #pi .prel .fprd .fprdimg, #pi .pran .fprd .fprdimg {} #pi .prec .fprd .fprdimg img, #pi .pass .fprd .fprdimg img, #pi .prel .fprd .fprdimg img, #pi .pran .fprd .fprdimg img{} #pi .prec .fprd .fprdimg .piflags, #pi .pass .fprd .fprdimg .piflags, #pi .prel .fprd .fprdimg .piflags, #pi .pran .fprd .fprdimg .piflags{} #pi .prec .fprd .fprdtitle, #pi .pass .fprd .fprdtitle, #pi .prel .fprd .fprdtitle, #pi .pran .fprd .fprdtitle{} #pi .prec .fprd .piflags, #pi .pass .fprd .piflags, #pi .prel .fprd .piflags, #pi .pran .fprd .piflags{} /* buytogether -------------------------------------------------------*/ .buytogether{} .buytogether li.header{} .buytogether ul.boughtto{} .buytogether ul.boughtto li{} .buytogether ul.boughtto li.imgs{} .buytogether ul.boughtto li.imgs img{} .buytogether ul.boughtto li.imgs span{} .buytogether ul.boughtto li.prods{} .buytogether ul.boughtto li.prods input, .buytogether ul.boughtto li.prods span.descr, .buytogether ul.boughtto li.prods span.price{} .buytogether ul.boughtto li.prods input{ } .buytogether ul.boughtto li.prods span.descr{} .buytogether ul.boughtto li.prods span.price{} .buytogether ul.boughtto li.total{} .buytogether ul.boughtto li.total span{} .buytogether ul.boughtto li.btn{} .buytogether ul.boughtto li.btn .submit{} /* feefo summary widget -------------------------------------------------------*/ #pi #feefologohere{} ul.feefo li{} ul.feefo li:last-child{} .feefosmallsummarypanel{} .feefosmallsummarypanel .title{} .feefosmallsummarypanel .stars{} .feefosmallsummarypanel span[itemprop="ratingCount"]{} .feefosmallsummarypanel .ratingNumber{} .feefosmallsummarypanel .reviewCount{} .feefopanel{} .feefosmallsummarypanel{} .feefosmallsummarypanel img{} /* title is a duplicate of product title so we don't want to show it */ .feefosmallsummarypanel .title{ display:none; } .feefosmallsummarypanel .stars{ text-align:right; } .feefosmallsummarypanel .stars img{ width:1em; height:auto; } .feefosmallsummarypanel .stars img { display: inline-block; width: 1em } .feefosmallsummarypanel .reviewCount{ display: inline-block; margin: .5em; text-align:left; } .feefosmallsummarypanel .ratingNumber { display:none; } .feefosmallsummarypanel .ratingNumber {} .feeforeviews {} .feeforeviews .feefosummary {} .feeforeviews .feefosummary span.title {} .feeforeviews .feefosummary span.stars {} .feeforeviews .feefosummary img {} .feeforeviews .feefosummary span.ratingNumber {} .feeforeviews .feefosummary .ratingCount {} /* Wishlist (not used) ------------------------------------------------------- */ #pi .pibuy form.wishlist{} #pi .pibuy form.wishlist input.chkbox{} #pi .pibuy form.wishlist label{} #pi .pibuy form.wishlist .submit{} /* Media Queries ------------------------------------------------------- */ /* ------------------------------------------------------------------------------------- =Super Attributes ------------------------------------------------------------------------------------- */ /* Defaults ------------------------------------------------------- */ /*validator messages */ .sa_validator { color:red; } .cls_superattrribute #sa_pnl_product_not_found { display: none; z-index: 2000; } .cls_superattrribute #saten_pnl_show { position:relative; } .cls_superattrribute {} .cls_superattrribute .bc table {} .cls_superattrribute .bc table .sa_left_cell_type_1, .cls_superattrribute .bc table .sa_right_cell_type_1 {} .cls_superattrribute .att_measure {} .cls_superattrribute .att_X, .cls_superattrribute .att_Y {} .cls_superattrribute .att_X label, .cls_superattrribute .att_Y label {} .cls_superattrribute .calc_price {} .cls_superattrribute .calc_price .submit {} #sa_pnl_product_not_found #sa_label_product_not_found_close {} #sa_pnl_product_not_found table {} #sa_pnl_product_not_found table label {} #sa_pnl_product_not_found td {} #sa_pnl_product_not_found th {} #sa_pnl_product_not_found #sa_label_product_not_found {} #safour_panel_show td {} .sa_pnl_product_not_found_showg {} .sa_pnl_product_not_found_show label {} #pi .pibuy form#buy_form .cls_superattrribute .submit {} /*help icon */ #pi .pibuy form#buy_form .cls_superattrribute img[id^="help"] {} /* attributeTypePrice_Matrix_Calculator ------------------------------------------------------- */ .cls_superattrribute.attributeTypePrice_Matrix_Calculator {} .cls_superattrribute.attributeTypePrice_Matrix_Calculator .bc {} /*help icon needs to be placed differently for different items... */ .cls_superattrribute.attributeTypePrice_Matrix_Calculator #saten_pnl_show img[id^="help"] {} .cls_superattrribute.attributeTypePrice_Matrix_Calculator .att_X label, .cls_superattrribute.attributeTypePrice_Matrix_Calculator .att_Y label {} .cls_superattrribute.attributeTypePrice_Matrix_Calculator label {} /* attributeTypeDimensions ***************************************************************/ .cls_superattrribute.attributeTypeDimensions {} .cls_superattrribute.attributeTypeDimensions .bc {} .cls_superattrribute.attributeTypeDimensions .width {} .cls_superattrribute.attributeTypeDimensions .drop {} .cls_superattrribute.attributeTypeDimensions .width label, .cls_superattrribute.attributeTypeDimensions .width input, .cls_superattrribute.attributeTypeDimensions .drop label, .cls_superattrribute.attributeTypeDimensions .drop input {} .cls_superattrribute.attributeTypeDimensions .width span, .cls_superattrribute.attributeTypeDimensions .drop span{} /*help icon needs to be placed differently for differnt items... */ .cls_superattrribute.attributeTypeDimensions img[id^="help"] {} .cls_superattrribute.attributeTypeDimensions .att_container {} .cls_superattrribute.attributeTypeDimensions .att_X label, .cls_superattrribute.attributeTypeDimensions .att_Y label {} .cls_superattrribute.attributeTypeDimensions label {} /* attributeTypeRadio_button ***************************************************************/ .cls_superattrribute.attributeTypeRadio_button {} .cls_superattrribute.attributeTypeRadio_button .info.sa_name {} /*help icon needs to be placed differently for differnt items... */ .cls_superattrribute.attributeTypeRadio_button img[id^="help"] {} .cls_superattrribute.attributeTypeRadio_button .radiobuttondatali {} .cls_superattrribute.attributeTypeRadio_button .radiobuttondatali ul {} .cls_superattrribute.attributeTypeRadio_button .radiobuttondatali li {} /* attributeTypeText_Box_Free_Text_Entry ***************************************************************/ .cls_superattrribute.attributeTypeText_Box_Free_Text_Entry {} .cls_superattrribute.attributeTypeText_Box_Free_Text_Entry .sa_name {} /*help icon needs to be placed differently for differnt items... */ .cls_superattrribute.attributeTypeText_Box_Free_Text_Entry img[id^="help"] {} .cls_superattrribute.attributeTypeText_Box_Free_Text_Entry span {} /*attributeTypeDrop_down_list ***************************************************************/ .cls_superattrribute.attributeTypeDrop_down_list {} .cls_superattrribute.attributeTypeDrop_down_list .info.sa_name {} /*help icon needs to be placed differently for differnt items... */ .cls_superattrribute.attributeTypeDrop_down_list img[id^="help"] {} .cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content {} .cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content select {} /* for things with images... */ /*except this isn't just written out when images are in use because people don't think! */ /*don't put stuff in here it breaks things you may not be seeing on other pages */ .cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content .sa_swatch_panel {} .cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content .sa_swatch_panel .sa_swatch_panel_inner {} img.sa_img_swatch_selected {} .cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content .sa_swatch_panel .sa_swatch_panel_inner img, .cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content .sa_swatch_panel .sa_swatch_panel_inner span {} .cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content select {} /* whatever this is we don't want it! */ .sa_pnl_product_popup_image_show { display:none; } /*attributeTypeSingle_Image_Upload ***************************************************************/ .cls_superattrribute.attributeTypeSingle_Image_Upload {} .cls_superattrribute.attributeTypeSingle_Image_Upload .progress {} .cls_superattrribute.attributeTypeSingle_Image_Upload .sa_name {} /* ------------------------------------------------------------------------------------- =Basket - Checkout v5 ------------------------------------------------------------------------------------- */ /*needs #pm as .bskt is used in the header */ #pm .bskt { /* margin:1em 0; */ padding:.5em; background-color:white; } /*checkout breadcrumb added - controls the order of the checkout process doesn't do accordion stuff though */ .chkcrumb{ text-align:left; font-size:.750em; padding:.5em; /* currently not wanting to show this - ultimately this will be a setting in coms as to whether it is displayed or not at each stage */ display:none; } .chkcrumb .prev, .chkcrumb .curr, .chkcrumb .next{ display:inline-block; margin-right:.5em; } .chkcrumb .numbers{ display:inline-block; } .chkcrumb .text{} .chkcrumb .curr{ font-weight:600; } .chkcrumb .prev .numbers{} /* if basket is empty and user is in it */ .bskt .empty{ margin:10em 0; } .bskt .empty .header{ color:var(--textColor); background:none; } .bskt .empty .total{ text-align:center; } /* Basket header ------------------------------------------------------- */ .bskt .header{ padding: 0.25em 0; font-size:1.25em; text-align:center; font-family:var(--altFont); font-weight:600; color:var(--textHeadingColor); } .bskt .header .icon{ display:inline-block; vertical-align:middle; } .bskt .header .icon img{ max-width:32px; margin-right:1em; } /* Basket Lines ------------------------------------------------------- */ .bskt .lines{ background-color:white; margin-bottom:1em; } /* Basket Line items ------------------------------------------------------- */ .bskt .lines .line{ display:grid; grid-gap:1em; grid-template-columns: 100px 6fr 1fr 30px 100px 1fr; align-items:center; } /* Image */ .bskt .lines .line .prodimg{ grid-column:1; grid-row:1; } .bskt .lines .line .prodimg a, .bskt .lines .line .prodimg a img{ display:block; text-align:center; margin:auto; } /* Product Info - in list form */ .bskt .lines .line .prodinfo{ grid-column:2; grid-row:1; /* align-self:start; */ } .bskt .lines .line .prodinfo li.descr{ font-size:1em; font-weight:600; } .bskt .lines .line .prodinfo li.subset, .bskt .lines .line .prodinfo li.model{ font-size:.875em; margin-left:1em; } /*repeat order check box */ .rocheck{ grid-column:5; } .rocheck .chkbox{ display:inline-block; vertical-align:middle; } .rocheck form:after{ content:'Repeat order'; font-size:.825em; display:inline-block; vertical-align:middle; } /* remove item */ .bskt .lines .line .rem{ grid-column:4; grid-row:1; align-self:start; text-align:center; align-self:center; } .bskt .lines .line .rem .submit { margin:0; padding:0; border:none; outline:none; background:none; } .bskt .lines .line .rem .submit{} .bskt .lines .line .rem .submit:hover {} /* Change quantity */ .bskt .lines .line .qty{ grid-column:3; grid-row:1; font-size:.875em; text-align:center; align-self:center; } .bskt .lines .line .qty label{ display:none; } .bskt .lines .line .qty button{ display:inline-block; vertical-align:middle; border:1px var(--textColor) solid; background-color: var(--white); color:var(--textColor); font-weight:600; font-size:1.2em; padding:.25em .5em; } .bskt .lines .line .qty input{ display:inline-block; vertical-align:middle; margin: 0 .5em; text-align:center; } .bskt .lines .line .netprice { grid-column:3; font-size:.875em; } .bskt .lines .line .netprice label, .bskt .lines .line .netprice span{ font-size:.750em; display:inline-block; } .bskt .lines .line .netprice label{ margin-right:.25em; } .bskt .lines .line .price { grid-column: 6; grid-row: 1; text-align:right; font-family:var(--altFont); align-self:center; } /* out of stoc messages */ .oos{ color:var(--mainColor); font-size:.725em; } /* Basket Subtotal ------------------------------------------------------- */ .prodsubtotal{ padding:1em 0; border-top:1px var(--borderColour) solid; border-bottom:1px var(--borderColour) solid; text-align:right; } .prodsubtotal label{ margin-right: 1em; } .prodsubtotal span{ font-size:1.2em; font-weight:600; } /* Delivery info ------------------------------------------------------- */ /* for free delivery messages */ .header.freedel{ display:none; } .header.delivery{ /*doesn't exist but should be on the actual delivery header */ } /* Shipping ------------------------------------------------------- */ .shipping{ padding: 0.5em; } /* no need to show this unless collect option is available */ .shipping .deliveryto h4{ display:none; } .shipping .address input, .shipping .address h4{ display:inline-block; vertical-align:middle; font-size:1em; margin:.25em; } .shipping .store input, .shipping .store h4{ display:inline-block; vertical-align:middle; font-size:1em; margin:.25em; } .shipping .deliveryto form{ text-align:center; } /* if there ARE delivery choices */ .shipping form select{ width:100%; margin-bottom:1em; } /* if there are NOI delivery choices */ .shipping .deliverto span{ font-weight:600; } li.shipping{ padding:0; text-align:right; } /* selected shipping cost*/ li.shipping form span{ font-weight:600; margin-left:.5em; } /* Basket Totals ------------------------------------------------------- */ .bskttotals{ border-top:3px var(--textColor) solid; border-bottom:3px var(--textColor) solid; padding:1em; text-align:right; } .bskttotals label{ display:inline-block; } .bskttotals span{ font-family:var(--mainFont); /*fix a min width for different number alignment */ display:inline-block; width:8em; } .bskttotals .total{ font-size:1.5em; } .bskttotals .total span{ /* reset span size as font size if .total font size is bigger */ width:5.3333333333em; } /* Vouchers ------------------------------------------------------- */ .vouchentry{ display:inline-block; text-align: left; background: #eef2f3; padding:1em; } #pm ul.accordion li.pane ul.vouch li, .vouchentry ul.vouch li{ display:inline-block; } /* Basket Payment Buttons ------------------------------------------------------- */ .bsktbuttons{ text-align:right; margin:.5em 0; font-size: 1em; } .bsktbuttons .sp_button{ /* display:inline-block; */ /* margin:0 .5em; */ } .bsktbuttons a{ padding:.5em; margin:.5em 0; text-align:center; cursor:pointer; border:none; outline:none; background-color:var(--checkoutButtons); color:#fff; } .bsktbuttons .pp_button a.btn{ background:none; padding:0; } /*font awesome icons */ #pm .sp_button a.btn.sagepay:before{ font-family: "Font Awesome 5 Free"; font-weight: 600; margin-right: .5em; font-size: 1em; display:inline-block; content: '\f09d'; } #pm .sp_button a.btn.bacs:before{ font-family: "Font Awesome 5 Free"; font-weight: 600; margin-right: .5em; font-size: 1em; display:inline-block; content: '\f19c'; } #pm .sp_button a.btn.lease:before{ font-family: "Font Awesome 5 Free"; font-weight: 600; margin-right: .5em; font-size: 1em; display:inline-block; content: '\f154 \f154 \f154'; } .page_basket .btn.cont a.btn { display:inline-block; margin:.5em 0; border-color:var(--bgColor); color:var(--textColor); background-color:var(--bgaltColor); } .page_basket .btn.cont a.btn:hover { color:#ffffff; background-color:var(--bgColor);; } .page_basket .btn.clear a.btn { display:inline-block; margin:.5em 0; } .page_basket .btn.clear a.btn:hover {} /* Media Queries ------------------------------------------------------- */ /* over 600px wide and less than 800px */ @media screen and (max-width:800px ){} /* over 400px wide and less than 600px wide */ @media screen and (max-width:600px ){} /* under 32400px0px wide */ @media screen and (max-width:400px ){ /* add an extra row and change order of things */ .bskt .lines .line .qty{ grid-column:1/4; font-size:.875em; } .bskt .lines .line .prodinfo{ grid-column:2/5; grid-row:1; } /* remove item */ .bskt .lines .line .rem{ grid-column:4; grid-row:2; } .bskt .lines .line .netprice { grid-column:1/3; } .bskt .lines .line .netprice label, .bskt .lines .line .netprice span{ font-size:.750em; } .bskt .lines .line .price { grid-row:3; } } /* ------------------------------------------------------------------------------------- =Checkout v5 Accordion Option ------------------------------------------------------------------------------------- */ /* Defaults / Overrides ------------------------------------------------------- */ #checkout_panel_processing, #ro_accord_processing { position: absolute; display:none; width: 100%; padding: 20px 10px; opacity: 0.6; filter: Alpha(Opacity=60); float: right; background-color: var(--textColor); } #pm .accord { display:inline-block; vertical-align:top; width: 834px; margin-right:1em; overflow-x: visible; } /* Accordion tabs ------------------------------------------------------- */ .ui-accordion .ui-accordion-header .ui-accordion-header-icon { color:#ffffff; right:0; left:initial; background-image: url(https://download.jqueryui.com/themeroller/images/ui-icons_fff_256x240.png); } #pm .accord h3 { padding: 0.5em 0; margin: 0; /* width: 100%; */ position: relative; cursor: pointer; background:var(--bgaltColor2); border:none; color:#ffffff; font-size:1.2em; margin-bottom:2px; border-radius:0; } #personalisation_panel, #gift_panel { border: none; } #pm .accord h4 {} #pm .accord label {} #pm .accord ul li input, #pm .accord ul li select, #pm .accord ul li textarea, #pm .accord ul li span { margin-bottom:1em; } #pm .accord ul li textarea {} #pm .accord ul li input.submit { display:inline-block; vertical-align:middle; font-family:var(--buttonFont); font-size:1em; padding: 0.5em 1em; border: none; text-align: center; border-color:inherit; cursor:pointer; background-color: var(--altColor); border:1px var(--altColor) solid; color:white; text-transform:capitalize; border-radius: 3px; } #pm .accord li #submit {} #checkout_accordion {} #checkout_accordion input.inputtext, #checkout_accordion input.inputtext_light, #checkout_accordion select, #checkout_accordion textarea {} #checkout_accordion #deliveryInst{ width:90%; } #checkout_accordion select{ grid-column: 1/2; } .ui-accordion .ui-accordion-content { padding: 1em ; border-top: 0; overflow: auto; } #checkout_accordion #ul_left li, #checkout_accordion #ul_right li{ margin-bottom:1em; display:grid; grid-template-columns:10fr .5fr; align-items:center; grid-gap:.25em; } .reqmsg{ color:red; } /* Typography ------------------------------------------------------- */ /* Specific Fields ------------------------------------------------------- */ /* sign in in accordion */ #signinform h5{ font-size:.8em; } #signinform li{} #signinform input.inputtext{ width:300px; } #signin_skip{ line-height:normal; font-weight:600; padding:.5em; border: none; color: var(--textColorLight); margin-right:1em; text-align: center; text-transform: uppercase; background: #eef2f3; cursor:pointer; } /* Main accordion Sections ------------------------------------------------------- */ #ul_top{ font-size:.875em; margin-bottom:1em; } #ul_left{} #ul_right{} #ul_bottom .continue{ margin:auto; text-align:center; } /* Customer Details ------------------------------------------------------- */ #customer_panel{} #customer_panel #ul_left, #customer_panel #ul_right{ width:calc(50% - 1em); display:inline-block; vertical-align:top; padding:0 .5em; } /* Delivery Address ------------------------------------------------------- */ #delivery_panel{} #delivery_panel #ul_right{ } #delivery_panel .address, #delivery_panel #basket_delivery_address, #delivery_panel .address ul{ grid-column:1/3; } #delivery_panel #basket_delivery_address ul{ margin:1em 0 } a#delivery_to_other{ display:inline-block; vertical-align:middle; font-family:var(--buttonFont); font-size:1em; padding: 0.5em 1em; border: none; text-align: center; border-color:inherit; cursor:pointer; background-color: var(--altColor); border:1px var(--altColor) solid; color:white; text-transform:capitalize; border-radius: 3px; } /* Delivery Service ------------------------------------------------------- */ #delivery_date_panel{} #delivery_date_panel .service{ } #delivery_date_panel .service span{ margin-left:.5em; font-weight:600; } #delivery_date_panel .slot{ font-size } #delivery_date_panel .slot .form li{ display:inline-block; } #delivery_date_panel .slot .form li span{ display:inline-block; vertical-align:middle; margin:0 .5em; font-family:var(--headingFont); } #delivery_date_panel .slot .form li input{ display:inline-block; vertical-align:middle; margin:0 .5em; font-family:var(--headingFont); width:auto; font-size:1em; } #delivery_date_panel .slot .form{ padding:0; } #delivery_date_panel .slot .form h3{ background:none; color:var(--textColor); margin:0; font-size:1.4em; } #delivery_date_panel .slot .form .info.date{ font-size:1.5em; text-align:right; } #delivery_date_panel .slot .form p{ margin-bottom:1em; } /* Confirm Panel inc Basket Summary ------------------------------------------------------- */ #confirm_panel{ padding:0; } #confirm_panel .continue{ margin:auto; text-align:center; } #confirm_panel .continue .submit{ display:inline-block; vertical-align:middle; font-family:var(--buttonFont); font-size:1em; padding: 0.5em 1em; border: none; text-align: center; border-color:inherit; cursor:pointer; background-color: var(--altColor); border:1px var(--altColor) solid; color:white; text-transform:capitalize; border-radius: 3px; } .basketsummary .header{ margin:0; color:var(--textColor); padding:.5em; background-color:#ffffff; text-align:center; } .bsktsum{} .bsktsum .line{ display:grid; grid-gap:.5em; padding:.5em; grid-template-columns: 3fr .5fr 1fr; align-self:center; } .bsktsum .line:nth-child(odd){ background-color:var(--bgColor); } .bsktsum .qty{ text-align:right; } .bsktsum .qty label{ display:none; } .bsktsum .price{ font-weight:600; text-align:right; } /* no one wants to send people back to the basket at this point - needs to be removed from basket summary */ .bsktsum .editbskt{ display:none; } .bsktsum .line .prodinfo li{ font-size:.725em; } .bsktsum .line .prodinfo li.descr { font-size:1em; font-family:var(--headingFont); font-weight:600; } /* Basket Subtotal ------------------------------------------------------- */ .bsktsum .subtotal{ padding: .5em; text-align:right; } /* Basket Totals ------------------------------------------------------- */ .bskttotals{ border-top:3px var(--borderColour) solid; border-bottom:3px var(--borderColour) solid; padding:1em; text-align:right; } .bsktsum .subtotal label{ display:inline-block; } .bsktsum .subtotal span{ font-weight:600; /*fix a min width for different number alignment */ display:inline-block; width:5.3333333333em; } .bsktsum #ordertotal{ } .bskttotals #ordertotal{ /* reset span size as font size if .total font size is bigger */ width:5.3333333333em; } /* Payment Panel Totals ------------------------------------------------------- */ #payment_panel{} #payment_panel .form{} #delivery_date_panel .continue{ margin:auto; text-align:center; } /* PAY WITH AMAZON ------------------------------------------------------- */ /* Please include the min-width, max-width, min-height and max-height if you plan to use a relative CSS unit measurement to make sure the widget renders in the optimal size allowed. */ #addressBookWidgetDiv { min-width: 300px; max-width: 100%; min-height: 228px; height: 300px; } #walletWidgetDiv { min-width: 300px; max-width: 100%; min-height: 228px; height: 300px; } #shippingSelector{ border:1px solid #bbb; margin:1em 0; padding:0 1em; } #amazonShippingSelection > span{ margin-top:.5em; font-size:1.2em; font-weight:600; width:100%; display:inline-block; } #amazonShippingSelection > span +span{ font-weight:normal; margin-top:.5em; margin-bottom:.5em; } #shippingSelector amazonShippingSelection{ outline:1px red solid; } .amazonShippingCountryDiv span.label{ font-weight:600; margin-right:1em; } .amazonShippingOptionsDiv span.value{ font-weight:600; } .amazonShippingOptionsDiv{ cursor:pointer; } .amazonShippingOptionDiv{ width:40%; line-height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid #bbb; border-radius: 3px; display: block; text-decoration: none; margin: 0 3px 6px 0; padding: 0 20px 0 30px; color: #333; font-size: 11px; height: 30px; background: #f6f6f6; background: -moz-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%); background: -webkit-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%); background: -ms-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%); background: linear-gradient(to bottom,#f6f6f6 0,#e1e1e1 100%); } .amazonShippingOptionsDiv:after{ display:block; clear:both; content:''; } .amazonShippingOptionDiv.selected { background: #f6f6f6 url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat; background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,-moz-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%); background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,-webkit-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%); background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,-ms-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%); background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,linear-gradient(to bottom,#f6f6f6 0,#e1e1e1 100%) } .amazonShippingOptionDiv.selected:hover { background: #ececec url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat; background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,-moz-linear-gradient(top,#ececec 0,#d3d3d3 100%); background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,-webkit-linear-gradient(top,#ececec 0,#d3d3d3 100%); background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,-ms-linear-gradient(top,#ececec 0,#d3d3d3 100%); background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,linear-gradient(to bottom,#ececec 0,#d3d3d3 100%) } .amazonShippingOptionDiv:hover { background: #ececec; background: -moz-linear-gradient(top,#ececec 0,#d3d3d3 100%); background: -webkit-linear-gradient(top,#ececec 0,#d3d3d3 100%); background: -ms-linear-gradient(top,#ececec 0,#d3d3d3 100%); background: linear-gradient(to bottom,#ececec 0,#d3d3d3 100%) } .address-list li.selected a.invalid { background: #f6f6f6; background: -moz-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%); background: -webkit-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%); background: -ms-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%); background: linear-gradient(to bottom,#f6f6f6 0,#e1e1e1 100%) } #cancelAmazon{ background-color:#eef2f3; color:#416976; font-weight:600; padding:.5em; } .noshipping{ color:var(--mainColor); margin-bottom:1em; font-weight:bold; } .submit[disabled]{ background-color:#eef2f3; color:#ffffff; } /* Checkout Breadcrumb panel ------------------------------------------------------- */ #pm .accordbdcb { display:inline-block; vertical-align:top; width: 350px; } #pm .accordbdcb .checkoutLogos{ text-align:center; } #pm .accordbdcb .checkoutLogos img{ margin:.5em; } #pm .accordbdcb ul { border-bottom:2px #d5d6d6 solid; margin-bottom:.5em; } #pm .accordbdcb ul li { margin: .5em 0em 1em 1em; } #pm .accordbdcb ul li.header { font-family:var(--altFont); font-weight:600; padding: 0; margin: 0; padding:.5em; position: relative; cursor: pointer; border:none; font-size:1em; border-radius:0; border-bottom: var(--borderColour) 2px solid; color:var(--textColor) } #pm .accordbdcb ul li:last-child {} #pm .accordbdcb ul li.title { font-weight: 600; padding: 0; margin: 0; width: 96%; padding:.5em 2%; position: relative; cursor: pointer; border:none; font-size:1.2em; border-radius:0; margin-bottom:2px; background: var(--bgaltColor2); font-family:var(--altFont); color:#ffffff; } /* due to the way the payment bit in the checkout crumb is written out */ #pm .accordbdcb ul li span.label { width:50%; display:inline-block; } /* terms and conditions article in checkout ------------------------------------------------------- */ #pp { width: 1000px; margin: 0 auto; background-color: #ffffff; } #pp p, #pp h3, #pp h4 { margin: 0 1em; } #pp h3, #pp h4 { margin-bottom: .5em; } /* ------------------------------------------------------------------------------------- =ConfirmationPage ------------------------------------------------------------------------------------- */ .confirmation .conf{ padding:1em; } .confirmation .conf .info li{ margin-bottom:1em; display:block; } .confirmation .conf li.info li{ list-style:disc; display:list-item; list-style-position:inside; } .confirmation .conf .header{ font-family:var(--headingFont); font-size:2em; } .confirmation .conf .subhead{ font-family:var(--headingFont); margin:.5em 0; } /* Basket Line items ------------------------------------------------------- */ .confirmation .conf .order{} .confirmation .conf .order .line{ display:grid; align-items:center; grid-gap:.5em; grid-template-columns: 1fr 6fr 1fr 1fr; } .confirmation .conf .order .line:nth-child(odd){ } /* Image */ .page_confirmation .conf .order .line a.img{} /* Product title*/ .confirmation .conf .order .line .descr{ font-size:.875em; } .confirmation .conf .order .line .price { text-align:right; } /* Basket Subtotal ------------------------------------------------------- */ .confirmation .conf .order .subtotal{ padding:1em 0; border-top:1px var(--borderColour) solid; text-align:right; } .confirmation .conf .order .subtotal label{ margin-right: 1em; } .confirmation .conf .order .subtotal span{ font-size:1.2em; font-weight:600; } .confirmation .conf .order .address{ text-align:left; font-size:.875em; } /* Post order customer registration panel ------------------------------------------------------- */ .confirmation .conf .ordreg{ background-color:#ffffff; padding:1em; margin:1em 0; } .confirmation .conf .ordreg input{ margin:.5em 0; } .confirmation .conf .ordreg .info{ margin:.5em 0; } .confirmation .conf .ordreg .help{ font-size:.725em; padding:1em 0 } .success .form li {} /* ------------------------------------------------------------------------------------- =Sitemap ------------------------------------------------------------------------------------- */ #pm .smap ul { list-style-position: inside; width:100%; } #pm .smap ul li { padding: 1em 0; } #pm .smap ul li a, #pm .smap ul li h3 { padding: 0; } #pm .smap .bc ul li ul { padding:1em 0; float:left; } #pm .smap ul li ul li { padding: 0; } /* First Level */ #pm .smap ul li{ width:25%; float:left; } #pm .smap ul li a{ font-weight:600; font-size:1.2em; } /* Second Level */ #pm .smap ul li ul{ margin-left:2%; width:98%; float:left; } #pm .smap ul li ul li{ width:100%; } #pm .smap ul li ul li a{ font-weight:normal; font-size:1em; } /* Third Level */ #pm .smap ul li ul li ul li a{ font-weight:normal; } /* ------------------------------------------------------------------------------------- =AccordionArticles ------------------------------------------------------------------------------------- */ /* accordion descriptions ------------------------------------------------------- */ #pm .bc ul.accordion{} #pm .bc ul.accordion .pane{ display:none; } #pm .bc ul.accordion .pane{ background-color:var(--bgColor); padding:1em; } #pm .bc ul.accordion li.header{ } #pm .bc ul.accordion li.header img{ position:absolute; right:1em; top: 0.5em; width:1em; height:auto; cursor:pointer; } #pm .bc ul.accordion li.header img.showminus{ display:none; } #pm .bc ul.accordion li.header.current img.showminus{ display:block; } #pm .bc ul.accordion li.header.current img.showplus{ display:none; } #pm .bc .accordion p{ font-size:1em; margin-bottom:1em; } #pm .bc .accordion ul{} #pm .bc .accordion a{} #pm .bc .accordion a:hover{ text-decoration:underline; } #pm .bc .accordion span{ font-weight:800; } #pm .bc ul.accordion thead td{ font-weight:800; } /* ------------------------------------------------------------------------------------- =Hacks ------------------------------------------------------------------------------------- */ .clearfix{ padding:0 !important; margin:0 !important; float:none !important; clear:both !important; } .spacer{ float:left; } .epau .bc{ display:none; } #modal-overlay-inline{ z-index:999; } /* password reset 2026 */ .password .viewpwd, .paswordCheck .viewpwd, .exstpwd .viewpwd{ display:inline-block; float:none; } .viewpwd img{ display:inline-block; max-width:24px; height:auto; cursor:pointer; } .exstpwd .viewpwd img{ /* vertical-align:middle; */ max-width:24px; height:auto; cursor:pointer; } .viewpwd:after{ content:'Show Passsword'; display:inline-block; vertical-align:top; font-size:11px; line-height:24px; margin-left:5px; color:#b9bcc1; } .page_passwordreset form{ max-width:50%; background-color:var(--cream-alpha); margin:auto; max-width:700px; padding:2em; } .page_passwordreset h3.header{ text-align:center; margin:2rem; font-size:2em; } .page_passwordreset .inputtext{ width:calc(100% - 1em); margin:0; padding:0 1em; margin-bottom:.5em; background-color:var(--white); height: 50px; text-align: left; } .page_passwordreset .submit{ width:calc(100% - 1em); } @media only screen and (max-width: 768px) { .page_passwordreset form{ max-width:95%; } }