/* BACKGROUNDS */ body.epsonworld { background: #fff url(http://www.epson.co.uk/assets/images/bak_home.gif) repeat-x 0 0 } #UserLinks { margin-bottom:5px; text-align:right } #UserLinks ul { margin-right:-10px; padding-top:5px } #UserLinks ul li { display:inline; text-transform:uppercase; font-size:1em; border-left:1px solid #fff; padding:0 10px 0 10px } #UserLinks ul li:first-child { border-left:none } body.epsonworld #UserLinks ul li { color:#4d4d4d; border-color:#999 } #UserLinks ul li a, #UserLinks ul li label, #UserLinks ul li strong { color:#fff } #UserLinks ul li strong { margin-right:10px } body.epsonworld #UserLinks ul li a, body.epsonworld #UserLinks ul li label { color:#4d4d4d } #UserLinks ul li#selCountryDropdown a { background:url(http://www.epson.co.uk/assets/images/ico_arrowdown_white.png) no-repeat right; padding:0 12px 0 0 } body.epsonworld #UserLinks ul li#selCountryDropdown a { background-image:url(http://www.epson.co.uk/assets/images/ico_arrowdown_grey.png) } #UserLinks .selCountryContainer { text-align:left } #UserLinks .selCountryContainer .content { padding:0 5px } /* generic rounded corners */ .genericRoundedCorners > .top { height: 7px } .genericRoundedCorners > .top .tl { float:left; width:10px; height:7px } .genericRoundedCorners > .top .tr { float:right; width:10px; height:7px } .genericRoundedCorners > .top .t { margin:0 10px; height:7px } .white .genericRoundedCorners > .top .tl { background:transparent url(http://www.epson.co.uk/assets/images/sprite_corners.png) no-repeat 0 0 } .white .genericRoundedCorners > .top .tr { background:transparent url(http://www.epson.co.uk/assets/images/sprite_corners.png) no-repeat -10px 0 } .white .genericRoundedCorners > .top .t { background:transparent url(http://www.epson.co.uk/assets/images/sprite_corners.png) repeat-x 0 -20px } .genericRoundedCorners > .content { } .white .genericRoundedCorners > .content { background:#ffffff url(http://www.epson.co.uk/assets/images/bak_masthead.png) repeat-x 0 100%; border-right:1px solid #e1e1e1; border-left:1px solid #e1e1e1 } .genericRoundedCorners > .bottom { height:10px } .genericRoundedCorners > .bottom .bl { float:left; width:10px; height:10px } .genericRoundedCorners > .bottom .br { float:right; width:10px; height:10px } .genericRoundedCorners > .bottom .b { margin:0 10px; height:10px } .white .genericRoundedCorners > .bottom .bl { background:transparent url(http://www.epson.co.uk/assets/images/sprite_corners.png) no-repeat 0 -10px } .white .genericRoundedCorners > .bottom .br { background:transparent url(http://www.epson.co.uk/assets/images/sprite_corners.png) no-repeat -10px -10px } .white .genericRoundedCorners > .bottom .b { background:transparent url(http://www.epson.co.uk/assets/images/sprite_corners.png) repeat-x 0 -30px } /* generic dropdowns */ a.jsDropdown { display:-moz-inline-box; display:inline-block; padding-right:27px; text-align:left; background:transparent url(http://www.epson.co.uk/assets/images/sprite_buttons.png) no-repeat 100% -1480px; line-height:1.5 } a.jsDropdown.disabled { opacity:0.5 } a.jsDropdown:hover { text-decoration:none } a.jsDropdown span { display:block; height:15px; padding:6px 10px; font-family:Verdana, Arial, sans-serif; font-size:1.1em; color:#636363; line-height:14px; background:transparent url(http://www.epson.co.uk/assets/images/sprite_buttons.png) no-repeat 0 -1440px; cursor:pointer } a.jsDropdown span:hover { color:#00baf2 } a.jsDropdown.disabled span:hover { color:#4d4d4d } .jsDropdownMenu { position:absolute; z-index:999; padding-top:4px; background:transparent url(http://www.epson.co.uk/assets/images/bak_dropdown_top.png) repeat-x 0 0; } .jsDropdownMenu ul { overflow: hidden; z-index:999 } .jsDropdownMenu ul li { display:block; height:1.36em; padding:3px 10px; font-family:Verdana, Arial, sans-serif; font-size:1.1em; cursor:pointer } .jsDropdownMenu ul li:hover { color:#00baf2 } .jsDropdownMenu ul li a { display:block; color:#4d4d4d; line-height:1.5 } .jsDropdownMenu ul li a:hover { color:#00baf2; text-decoration:none } /* Mast Head */ #MastHead { position:relative } /* masthead logo */ #MastHead .mastheadLogo { float:left; width:130px; padding:10px 0 0 20px } #MastHead .mastheadLogo a { display:block; width:116px; height:38px } #Container.white #MastHead .mastheadLogo a { background:transparent url(http://www.epson.co.uk/assets/images/epson_logo.png) no-repeat 0 0 } #MastHead .mastheadLogo a img { display:none } #MastHead .mastheadContents { margin-left:150px; padding:9px 0 0; border-left:1px solid #e1e1e1 } #MastHead .levelOne { padding:0 10px 0 20px } /* masthead search */ #MastHead .mastheadSearch { float:right; margin-top:-5px } #MastHead .mastheadSearch label { display:none } #MastHead .mastheadSearch input#SiteSearch { float:left; width:185px; height:1.4em; padding:4px 5px; margin-right:5px; font-family:Verdana, Arial, sans-serif; font-size:1.1em; border:1px solid #e1e1e1; background:#fff url(http://www.epson.co.uk/assets/images/sprite_buttons.png) repeat-x 0 -1920px } #MastHead .mastheadSearch input#SiteSearch:focus { border-color:#00baf2 } #MastHead .mastheadSearch button { float:left } /* masthead primary navigation */ #MastHead .primaryNavigation { } #MastHead .primaryNavigation div.title { font-size:1.4em; font-weight:bold; text-transform:uppercase; color:#4D4D4D } #MastHead .primaryNavigation ul { } #MastHead .primaryNavigation ul li { display:inline; font-size:1.4em; text-transform:uppercase } #MastHead .primaryNavigation ul li + li { margin-left:10px; padding-left:10px; border-left:1px solid #E1E1E1 } #MastHead .primaryNavigation ul li a { color:#4d4d4d } #MastHead .primaryNavigation ul li a:hover { color:#00baf2; text-decoration:none } #MastHead .levelTwo { min-height:21px; margin-top:10px; padding:0 10px 0 20px; border-top:1px solid #eaeaea } /* masthead secondary navigation */ #MastHead .secondaryNavigation { margin-top:6px } #MastHead .secondaryNavigation ul { } #MastHead .secondaryNavigation ul li { display:inline; margin-right:20px; font-size:1.2em; text-transform:uppercase; color:#000000; } #MastHead .secondaryNavigation ul li a { color:#4d4d4d; font-size: 1.1em; line-height: 1.2em; } #MastHead .secondaryNavigation ul li a:hover { color:#00baf2; text-decoration:none } #MastHead .secondaryNavigation ul li.dropdown a { background:url(http://www.epson.co.uk/assets/images/ico_arrowdown_grey.png) no-repeat 100% 50%; padding-right:12px } #MastHead .secondaryNavigation ul li ul { display:none; } #MastHead .secondaryNavigation ul li ul li { display:block; float:left; margin-right:20px; font-size:1.2em; text-transform:uppercase; color:#000000 } #MastHead .secondaryNavigation ul li.dropdown ul li a { background-image:none } #MastHead .secondaryNavigation form { display:inline-block } #MastHead .secondaryNavigation form .button input { height:2.1em; padding: 5px 8px 8px 10px } #MastHead .secondaryNavigation form select { font-size:0.9em; margin:0 5px } #MastHead .secondaryNavigation ul li.dropdown ul { margin: 0; } /* masthead basket */ #MastHead .mastheadCheckout { position:absolute; bottom:5px; right:1px; padding-right:10px; text-align:right; white-space:nowrap; background:transparent url(http://www.epson.co.uk/assets/images/sprite_buttons.png) no-repeat 100% -1760px } #Container #MastHead .mastheadCheckout:hover { background-position:100% -1840px; text-decoration:none } #Container #MastHead .mastheadCheckout:active { background-position:100% -1880px } #Container #MastHead .mastheadCheckout:focus { outline:none } #MastHead .mastheadCheckout span { display:block; padding:8px 0 6px 35px; font-size:1.2em; color:#00BAF2; text-transform:uppercase; background:transparent url(http://www.epson.co.uk/assets/images/sprite_buttons.png) no-repeat 0 -1600px } #Container #MastHead .mastheadCheckout:hover span { color:#fff; background-position:0 -1680px } #Container #MastHead .mastheadCheckout:active span { color:#fff; background-position:0 -1720px } /* Flash Carousel */ #Container #Carousel { margin-top:20px; min-height:400px; background:transparent url(http://www.epson.co.uk/assets/images/ani_loader_home.gif) no-repeat 50% 50% } /* Carousel */ .carouselItem { width:570px; margin:0 auto 20px } .carouselItem .carouselHeading { position:relative; height:270px; overflow:hidden; color:#fff } .carouselItem .carouselHeading .carouselType { position:absolute; top:0; left:0; right:0; padding:5px 20px; font-size:1.4em; font-weight:bold; text-transform:uppercase; background:transparent url(http://www.epson.co.uk/assets/images/bak_carousel_title.png) no-repeat 0 0 } .carouselItem .carouselHeading .carouselHeadingContent { position:absolute; top:40px; left:20px; right:20px; width:320px } .carouselItem .carouselHeading .carouselHeadingContent h2 { margin-bottom:5px; font-size:4em; font-weight:f; text-transform:uppercase } .carouselItem .carouselHeading .carouselHeadingContent p { margin-bottom:10px; font-size:1.6em; line-height:1.2 } .carouselItem .carouselHeading img { width:570px } .carouselItem .content { padding:20px } ul.carouselItemInfo > li { margin-top:20px; padding-top:20px; border-top:1px dashed #ccc } ul.carouselItemInfo > li:first-child { margin-top:0; padding-top:0; border-top:none } ul.carouselItemInfo h3 { margin-bottom:20px; font-size:1.2em; text-transform:uppercase } ul.carouselItemInfo p { float:left; width:115px; margin-right:20px; font-size:1.4em; font-weight:bold } ul.carouselItemInfo ul.carouselImageLinks { margin-left:135px } ul.carouselItemInfo ul.carouselLinks { margin-left:205px } ul.carouselItemInfo ul.carouselImageQuickLinks { width:340px; margin-left:0; padding-top:20px } ul.carouselItemInfo ul.carouselQuickLinks { width:200px; margin-left:0 } ul.carouselItemInfo .carouselQuickLinks + ul.carouselImageLinks { padding-top:20px } ul.carouselLinks { margin-right:-20px } ul.carouselLinks li { float:left; width:150px; margin-right:20px; font-family:Verdana, Arial, sans-serif; font-size:1.1em } ul.carouselQuickLinks li { float:none; width:auto } ul.carouselImageLinks { position:relative; top:-20px; margin-bottom:-20px } ul.carouselImageLinks li { float:left; width:88px; margin-left:10px; font-family:Verdana, Arial, sans-serif; font-size:1.1em; text-align:center } ul.carouselImageQuickLinks li + li { margin-left:25px } ul.carouselImageLinks li:first-child { margin-left:0 } ul.carouselImageLinks li a { color:#4d4d4d } ul.carouselImageLinks li img { display:block; width:88px; height:66px; margin-bottom:5px } ul.carouselArtImageLinks { padding-bottom:20px } ul.carouselArtImageLinks li { float:left; width:70px; height:70px; margin-left:16px; font-family:Verdana, Arial, sans-serif; font-size:1.1em; border:2px solid #fff } ul.carouselArtImageLinks li:first-child { margin-left:0 } ul.carouselArtImageLinks li a { color:#4d4d4d } ul.carouselArtImageLinks li a span { display:block; padding-bottom:5px; background:transparent url(http://www.epson.co.uk/assets/images/bak_carouselArtShadow.png) no-repeat 50% 100% } /* Teaser Styles */ #Teasers { height:166px } #Teasers .content { } #Teasers ul { margin: 0; height: 156px; } /*#Teasers ul { margin: 0 0 -10px 0; }*/ #Teasers ul li { position:relative; float:left; width:282px; height:142px; padding:7px 15px 6px; list-style-image:none; list-style-position:outside; list-style-type:none; } #Teasers ul li:last-child { width:283px } #Teasers ul li.type2 { height:155px; width:312.5px; padding:0 } #Teasers ul li h4 { margin-bottom:5px; font-size:2.2em; font-weight:bold; text-transform:uppercase } #Teasers ul li.type1 h4 { margin-right:150px } #Container.white #Teasers ul li h4 { color:#000000; } #Teasers ul li h4 a { padding-right:10px } #Container.white #Teasers ul li h4 a { color:#4d4d4d; font-size: 0.85em; font-family: Arial, Verdana, sans-serif; } #Container.white #Teasers ul li h4 a:hover { color:#00baf2 } #Teasers ul li p { font-size: 1.4em } #Teasers ul li.type1 p { margin-right:150px } #Container.white #Teasers ul li p { color:#999; font-size: 1.4em; } #Container.white #Teasers ul li.type0 p { color: #999; font-size: 1.2em; line-height: 1em; font-family: Arial, Verdana, sans-serif; } #Container.white #Teasers ul li.type1 p { color: #999; font-size: 1.2em; line-height: 1em; font-family: Arial, Verdana, sans-serif; } #Container.white #Teasers .bottom .bl { margin: -9px 0 0 0; } #Container.white #Teasers .bottom .br { margin: -9px 0 0 0; } #Teasers ul li.type0 img { position:absolute; bottom:-18px; left:-1px; width:312px; height:92px } #Teasers ul li.type1 img { position:absolute; top:-17px; right:10px; width:130px; height:186px } #Teasers ul li.type2 img { width:315px; height:199px; margin:-22px 0 } #Teasers ul li.type2:first-child img { margin-left:-1px; } #Teasers ul li.type0:last-child img, #Teasers ul li.type2:last-child img { left:auto; right:-1px } #Teasers .wc_tl { position:absolute; top:-8px; left:-1px; width:4px; height:4px; background-position: 0 0 } #Teasers .wc_tr { position:absolute; top:-8px; right:-2px; width:4px; height:4px; background-position: 100% 0 } #Teasers .wc_bl { position:absolute; bottom:-7px; left:-1px; width:4px; height:4px; background-position: 0 100% } #Teasers .wc_br { position:absolute; bottom:-7px; right:-2px; width:4px; height:4px; background-position: 100% 100% } body.epsonworld #Teasers .wc_tl, body.epsonworld #Teasers .wc_tr, body.epsonworld #Teasers .wc_bl, body.epsonworld #Teasers .wc_br {background-image:url(http://www.epson.co.uk/assets/images/bak_footer_corners_white.png)} /* Footer */ #FooterContent { padding:20px 0 } #FooterContent .content { padding:0 15px } #FooterContent ul li { display:inline; padding-left:15px; font-family:Verdana, Arial, sans-serif; font-size:1.1em } #FooterContent ul li:first-child { padding-left:0 } #FooterContent ul li a { color:#4d4d4d } #FooterContent ul li a:hover { color:#00baf2; text-decoration:none } #FooterContent ul.footerNavigation li { text-transform:uppercase } #FooterContent ul.footerSpecial { float:left; margin:3px 10px 0 0; padding:2px 10px 2px 5px; border-right:1px solid #d9d9d9 } #FooterContent ul.footerSpecial li { font-size:1em } #FooterContent ul.footerSpecial li a { text-decoration:none; color:#fff; } body.epsonworld #FooterContent ul.footerSpecial a, body.grey #FooterContent ul.footerSpecial a { text-decoration:none; color:#999 } #FooterContent ul.footerSpecial a:hover { text-decoration:underline; color:#fff } body.epsonworld #FooterContent ul.footerSpecial a:hover, body.grey #FooterContent ul.footerSpecial a:hover { text-decoration:underline } #FooterContent .footerCopyright { margin-top:5px; padding:0 5px; font-family:Verdana, Arial, sans-serif; color:#999 } #FooterContent .footerCaveats { color:#999; line-height:1; margin-bottom:5px; }