tr_styles.css trends.js <!-- DELIVERY --><!--[if IE 7 ]> <div id="content" class="tr-page tr-landing clearfix ie7"> <![endif]--><!--[if IE 8 ]> <div id="content" class="tr-page tr-landing clearfix ie8"> <![endif]--><!--[if IE 9 ]> <div id="content" class="tr-page tr-landing clearfix ie9"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--><div id="content" class="tr-page tr-landing clearfix"><!--<![endif]--> <!-- CSS specific to Trends Landing page --> <style media="screen,projection"> #content.tr-page {padding: 15px 25px 25px;} #content.ie7 {width: 892px !important;} #content .font-replaced { font-weight: 200; line-height: .8; } /* content header styles */ .tr-header { margin-bottom: 15px; position: relative; width:895px; } .tr-header h1 { font-size: 48px; margin-bottom: 1px; text-transform: uppercase; } .tr-header h1 > span { display:inline; font-family: Arial,sans-serif; font-size: 14px; text-indent: 0; } .tr-header .tr-social { bottom: 25px; height:19px; position:absolute; right:0; width: 22%; } #tr-page-fb-like { left:67px; overflow:hidden; position:absolute; width:82px; } .tr-header .tr-social > ul { float: right; list-style: none; padding:0; margin:0; } .tr-header .tr-social li { float: left; margin-left: 5px; } /* end content header styles */ /* main content styles */ .tr-page .tr-main { float:left; padding:0 30px 0 0; width:582px; } .tr-page .tr-main .tr-hero { margin-bottom:10px; position: relative; } .tr-page .tr-trend { font-family: Aria,sans-serif; margin-bottom: 10px; } .tr-page .tr-trend-type { color: #717171; font-family: Arial,sans-serif; font-size: 8px; font-weight: normal; margin-bottom: 5px; text-transform: uppercase; } #content.tr-page .tr-main .tr-hero .tr-trend-title {margin-bottom: 5px;} .tr-page .tr-main .tr-hero h2.font-replaced { color: #fff; font-size: 58px; left: -99999em; letter-spacing: .0125em; position: absolute; top: 55px; visibility: hidden; } .tr-page .tr-main .tr-hero h2.font-replaced + p { color: #fff; font-size: 14px; left: -99999em; line-height: 1; position: absolute; text-transform: uppercase; top: 178px; visibility: hidden; width: 275px; } #content.tr-page .tr-trend-title { color: #000; font-size: 16px; font-weight: normal; line-height: 1; margin:0 0 5px;padding:0; text-transform: uppercase; width: auto; } .tr-page .tr-trend .tr-trend-img { background-color: #ccc; float: left; height: 123px; margin: 0 13px 7px 0; width: 106px; } .tr-page .tr-trend p { color: #666; font-size: 12px; padding:0 0 .5em;margin:0; } .tr-page .tr-hero p > .tr-hero-cta { display: block; height: 321px; overflow: hidden; width: 582px; } .tr-page .tr-collection-link, .tr-page .tr-more-link { background: url("/wcsstore/SGH/experiences/trends/images/tr_arrow_right.png") no-repeat; color: #39c !important; font-size: 11px; padding-right: 9px; } .tr-page .tr-collection-link:hover, .tr-page .tr-more-link:hover {color: #000 !important;} .tr-page .tr-trend .tr-more-link { background-position: 178px 3px; display:block; } .tr-page .tr-trend .tr-more-link:hover {background-position: 178px -9px;} .tr-page.ie7 .tr-trend .tr-more-link, .tr-page.ie8 .tr-trend .tr-more-link {background-position: 175px 4px;} .tr-page.ie7 .tr-trend .tr-more-link:hover, .tr-page.ie8 .tr-trend .tr-more-link:hover {background-position: 175px -8px;} .tr-page .tr-trend .tr-collection-link { background-position: 218px 3px; display:block; } .tr-page .tr-trend .tr-collection-link:hover {background-position: 218px -9px;} .tr-page.ie7 .tr-trend .tr-collection-link, .tr-page.ie8 .tr-trend .tr-collection-link {background-position: 218px 4px;} .tr-page.ie7 .tr-trend .tr-collection-link:hover, .tr-page.ie8 .tr-trend .tr-collection-link:hover {background-position: 218px -8px;} #celeb-carousel .tr-more-link { background-position: 66px 3px; display:inline-block; } #celeb-carousel .tr-more-link:hover {background-position: 66px -7px;} .tr-page.ie7 #celeb-carousel .tr-more-link, .tr-page.ie8 #celeb-carousel .tr-more-link {background-position: 66px 4px;} .tr-page.ie7 #celeb-carousel .tr-more-link:hover, .tr-page.ie8 #celeb-carousel .tr-more-link:hover {background-position: 66px -8px;} .tr-page .tr-spotlight .tr-more-link { background-position: 106px 3px; display:block; } .tr-page .tr-spotlight .tr-more-link:hover {background-position: 106px -9px;} .tr-page.ie7 .tr-spotlight .tr-more-link, .tr-page.ie8 .tr-spotlight .tr-more-link {background-position: 103px 4px;} .tr-page.ie7 .tr-spotlight .tr-more-link:hover, .tr-page.ie8 .tr-spotlight .tr-more-link:hover {background-position: 103px -8px;} .tr-page .tr-fulltime-fab .tr-more-link { background-position: 59px 3px; display:block; } .tr-page .tr-fulltime-fab .tr-more-link:hover {background-position: 59px -9px;} .tr-page.ie7 .tr-fulltime-fab .tr-more-link, .tr-page.ie8 .tr-fulltime-fab .tr-more-link {background-position: 56px 4px;} .tr-page.ie7 .tr-fulltime-fab .tr-more-link:hover, .tr-page.ie8 .tr-fulltime-fab .tr-more-link:hover {background-position: 56px -8px;} .tr-page .tr-trend .fb-like { clear: both; display: block; } .tr-page .tr-main .multi-cols { color:#666; padding-bottom: 20px; } .tr-page .tr-main .multi-cols > div { display:block; float:left; width:280px; } .tr-page .tr-main .multi-cols > div:first-child { margin-right:22px; } .tr-page .tr-main .tr-trending-now h3 {color: #000;} /* end main content styles */ /* sidebar styles */ .tr-page .tr-sidebar { float: left; overflow: hidden; width: 280px; } .tr-page .tr-sidebar > div { margin-bottom: 20px; padding-top: 15px; } .tr-page .tr-sidebar > div.tr-celeb-sightings { border-top: none; padding-top: 11px; } .tr-page .tr-sidebar p { color: #666; font-size: 12px; margin:0; padding:0; } .tr-page .tr-trending-now h3, .tr-page .tr-sidebar h3 { font-size:31px; letter-spacing: .03em; margin-bottom: 0; position: relative; text-transform: uppercase; } .tr-page .tr-sidebar h3 { border-bottom: 4px solid #000; margin-bottom: 14px; padding-bottom: 3px; } .tr-page .tr-sidebar .tr-spotlight h3, .tr-page .tr-sidebar .tr-fulltime-fab h3 { margin-bottom: 3px; } .tr-page .tr-sidebar .tr-spotlight p, .tr-page .tr-sidebar .tr-fulltime-fab p {margin-bottom: 5px;} .tr-page .tr-sidebar h3 > span, .tr-page .tr-sidebar h3 + h2 { color: #000; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; margin-bottom: 3px; text-transform: uppercase; } .tr-page .tr-sidebar .tr-spotlight h3 + h2, .tr-page .tr-sidebar .tr-fulltime-fab h3 + h2 {margin-bottom: 14px;} .tr-page .tr-trending-now h3 { border-bottom: 4px solid #000; margin-bottom: 8px; padding-bottom: 3px; } .tr-page .tr-trending-now h3 > a, .tr-page .tr-sidebar h3 > a { bottom:3px; color:#39c !important; font-family: Georgia,serif; font-size: 12px; font-style: italic; letter-spacing: normal; position: absolute; right:0; text-transform: none; } .tr-page .tr-sidebar .tr-celeb-sightings > h3 { margin:0 0 14px; } .tr-page .tr-trending-now h3 > a:hover, .tr-page .tr-sidebar h3 > a:hover {color:#000 !important;} /* carousel dots */ .carousel-dots{ bottom:8px; left:50%; position:absolute; } .tr-spotted .carousel-dots {bottom:5px;} .carousel-dots ul{ margin-left: -50%; overflow:hidden; position:relative; } .carousel-dots li{ background:url("/wcsstore/SGH/experiences/trends/images/tr_carousel_dots.png") no-repeat; cursor:pointer; float:left; height:10px; margin:0 8px 0 0; overflow: hidden; width:10px; } .carousel-dots .active-carousel-dot{ background-position:0 -13px; cursor:default; } /* end carousel dots */ /* Circle carousel */ #circle-carousel{ background:url("/wcsstore/SGH/experiences/trends/images/tr_bg_circle.png") no-repeat 59px 0; height:218px; margin:0; overflow:hidden; position:relative; width:280px; } .ie7 #circle-carousel .carousel-dots, .ie9 #circle-carousel .carousel-dots {width: 30%;} #circle-carousel .carousel-dots {left: 50%;} #circle-carousel .carousel-dots ul {margin-left: -50%;} #circle-carousel .carousel-list{ overflow:visible; position:absolute; top:0; width:20000px; } #circle-carousel .carousel-list li img { position:relative; left:10px; } #circle-carousel .carousel-list li{ float:left; height:175px; list-style: none; position:relative; width:280px; } #circle-carousel li > p{ position:absolute; right:12px; top:145px; } #circle-carousel li span{ color:#999; font-family: Arial,sans-serif; font-size:12px; line-height:16px; display:block; text-align:right; text-transform: uppercase; } #circle-carousel li span.circle-product-price {color:#333;} #circle-carousel a:hover span{color:#000;} #circle-carousel > a{ border-top:13px solid transparent; border-bottom:13px solid transparent; bottom:10px; cursor: pointer; display:block; height:0; position:absolute; width:0; } #circle-carousel .circle-carousel-prev{ border-right:13px solid #000; left:0; } #circle-carousel .circle-carousel-next{ border-left:13px solid #000; right:0; } #circle-carousel .circle-carousel-prev:hover{ border-right:13px solid #666; left:0; } #circle-carousel .circle-carousel-next:hover{ border-left:13px solid #666; right:0; } #circle-carousel .carousel-nav-disabled, #circle-carousel .carousel-nav-disabled:hover{ border-left-color:#ccc !important; border-right-color:#ccc !important; cursor:default; } #circle-carousel > a span{ border-top:13px solid transparent; border-bottom:13px solid transparent; bottom:0; display:block; height:0; position:relative; width:0; } #circle-carousel .circle-carousel-prev span{ border-right:13px solid #fff; bottom:13px; left:3px; } #circle-carousel .circle-carousel-next span{ border-left:13px solid #fff; bottom:13px; right:16px; } /* END Circle carousel */ /* Celebrity carousel */ #celeb-carousel{ height:282px; margin:0; overflow:hidden; position:relative; width:280px; } .ie9 #celeb-carousel .carousel-dots {width: 50%;} #celeb-carousel .carousel-dots {left: 50%;} #celeb-carousel .carousel-dots ul {margin:0 0 0 -50%; padding:0;} #celeb-carousel .carousel-list{ overflow:visible; position:absolute; top:0; width:20000px;padding:0; margin:0; } #celeb-carousel .carousel-list li{ float: left; font-family: Arial,sans-serif; height:251px; list-style: none; position:relative; width:280px; } #celeb-carousel .carousel-list li img { height:170px; margin:0 auto; position:relative; width:279px; } #celeb-carousel .carousel-list li .tr-source { color: #666; font-size: 8px; font-weight: normal; line-height: 1.5; margin: 0 0 10px; text-transform: uppercase; width: auto; } #celeb-carousel .carousel-list li .tr-caption { color: #000; font-size: 15px; font-weight: normal; line-height: 1.2; text-transform: uppercase; width: auto; } #celeb-carousel .carousel-list li .product { color: #999; font-size: 10px; line-height: 1; margin-bottom: 3px; } #celeb-carousel .carousel-list li .product span { display: inline-block; padding: 0 .5em; text-transform: uppercase; } #celeb-carousel .carousel-list li .product span:first-child {padding-left: 0;} #celeb-carousel .carousel-list li .product span.style { border: solid #999; border-width: 0 1px; } #celeb-carousel .carousel-list li .product span.price {color: #333;} #celeb-carousel .carousel-list li a { border-width: 0 1px 1px; color: #39c !important; font-family: Arial,sans-serif; font-size:11px; } #celeb-carousel .carousel-list li a:hover {color:#000 !important;} #celeb-carousel > .celeb-carousel-prev, #celeb-carousel > .celeb-carousel-next{ border-top:13px solid transparent; border-bottom:13px solid transparent; bottom:0; cursor: pointer; display:block; height:0; position:absolute; width:0; z-index: 10; } #celeb-carousel .celeb-carousel-prev{ border-right:13px solid #000; left:0; } #celeb-carousel .celeb-carousel-next{ border-left:13px solid #000; right:0; } #celeb-carousel .celeb-carousel-prev:hover{ border-right:13px solid #666; left:0; } #celeb-carousel .celeb-carousel-next:hover{ border-left:13px solid #666; right:0; } #celeb-carousel .carousel-nav-disabled, #celeb-carousel .carousel-nav-disabled:hover{ border-left-color:#ccc !important; border-right-color:#ccc !important; cursor:default; } #celeb-carousel .celeb-carousel-prev > span, #celeb-carousel .celeb-carousel-next > span { border-top:13px solid transparent; border-bottom:13px solid transparent; bottom:0; display:block; height:0; position:relative; width:0; } #celeb-carousel .celeb-carousel-prev span{ border-right:13px solid #fff; bottom:13px; left:3px; } #celeb-carousel .celeb-carousel-next span{ border-left:13px solid #fff; bottom:13px; right:16px; } /* END Celebrity carousel */ /* end sidebar styles */.fb_edge_widget_with_comment {*top:0px !important;} </style> <!-- END CSS specific to Trends Landing page --> <div class="tr-header"> <h1 class="font-replaced"> Trends </h1> <div class="tr-social clearfix"> <ul class="clearfix"> <li><a href="#JS" id="tr-page-facebook" rel="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.sunglasshut.com%2Fwebapp%2Fwcs%2Fstores%2Fservlet%2FExperience%3FstoreId%3D10152%26experienceName%3Dtrends"><img src="/wcsstore/SGH/experiences/trends/images/tr_icon_facebook.png" alt="Share on Facebook"/></a></li> <li><a href="#JS" id="tr-page-twitter" rel="http://twitter.com/home?status=http%3A%2F%2Fwww.sunglasshut.com%2Fwebapp%2Fwcs%2Fstores%2Fservlet%2FExperience%3FstoreId%3D10152%26experienceName%3Dtrends"><img src="/wcsstore/SGH/experiences/trends/images/tr_icon_twitter.png" alt="Share on Twitter"/></a></li> </ul> <div id="tr-page-fb-like"> <fb:like href="http://www.sunglasshut.com/Experience?storeId=10152&catalogId=10101&experienceName=trends" send="false" layout="button_count" width="450" show_faces="true"></fb:like> </div> </div> </div> <div class="tr-content clearfix"> <div class="tr-main"> <div class="tr-hero"> <h3 class="tr-trend-type">The Latest</h3><!-- TODO: add URL for hero. --> <a href="/us/trends/SP13Emerald" class="font-replaced tr-hero-cta"> <img class="hero" src="/wcsstore/SGH/experiences/trends/images/trendshero_emerald.jpg" alt="Emerald"/> </a> <h2 class="font-replaced">Everything Emerald</h2> <p> See the latest sunwear styles </p><br/> <div id="tr-hero-fb-like" class="fb-like"><!-- TODO: add encoded url to facebook "like" iframe src attribute (IMPORTANT: In the href parameter, replace "&" with %252526 and replace "=" with %25253D (omit quotes)) --> <fb:like send="false" width="450" layout="button_count" show_faces="false" href="http://www.sunglasshut.com/Experience?storeId=10152&catalogId=10101&experienceName=sgh-summer-trends"></fb:like> </div> </div> <div class="multi-cols clearfix"> <div class="col"> <div class="tr-trend"> <a href="/us/trends/SP13Stripes" ><img class="tr-trend-img" src="/wcsstore/SGH/experiences/trends/images/Thumbnail_Stripes_0320.jpg" alt=""/></a> <h3 class="tr-trend-type">Fashion</h3> <h2 class="tr-trend-title">SHOW YOUR STRIPES</h2> <p> Forget the polka dots. Choose stripes and turn heads. </p> <a href="/us/trends/SP13Stripes" class="tr-collection-link">Shop the Collection </a> <div class="fb-like"> <fb:like href="http://www.sunglasshut.com/us/trends/SP13Stripes" send="false" layout="button_count" width="450" show_faces="false"></fb:like> </div> </div> <div class="tr-trend"> <a href="/us/trends/SP13Electric" ><img class="tr-trend-img" src="/wcsstore/SGH/experiences/trends/images/Thumbnail_ElectricAve_0320.jpg" alt=""/></a> <h3 class="tr-trend-type">Fashion</h3> <h2 class="tr-trend-title">ELECTRIC AVENUE</h2> <p> Live life in color. Put on your brights. </p> <a href="/us/trends/SP13Electric" class="tr-collection-link">Shop the Collection </a> <div class="fb-like"> <fb:like href="http://www.sunglasshut.com/us/trends/SP13Electric" send="false" layout="button_count" width="450" show_faces="false"></fb:like> </div> </div> <div class="tr-trend"> <a href="/Experience?storeId=10152&catalogId=10101&langId=-1&experienceName=polarized" ><img class="tr-trend-img" src="/wcsstore/SGH/experiences/trends/images/tr_polarized.jpg" alt=""/></a> <h3 class="tr-trend-type">Technology</h3> <h2 class="tr-trend-title">Polarized<br />Lenses 101</h2> <p> Get crystal clear vision with unparalleled style in polarized lenses. </p> <a href="/us/trends/Polarized" class="tr-more-link">Shop the Collection</a><br> <a href="/Experience?storeId=10152&catalogId=10101&langId=-1&experienceName=polarized" class="tr-more-link">Read More</a> <div class="fb-like"> <fb:like href="http://www.sunglasshut.com/us/trends/Polarized" send="false" layout="button_count" width="450" show_faces="false"></fb:like> </div> </div> </div> <div class="col"> <div class="tr-trend"> <a href="/us/trends/SP13Flashy" ><img class="tr-trend-img" src="/wcsstore/SGH/experiences/trends/images/Thumbnail_FlashyAndFab_0320.jpg" alt=""/></a> <h3 class="tr-trend-type">Fashion</h3> <h2 class="tr-trend-title">FLASHY AND FABULOUS</h2> <p> Be mistaken for a celebrity in a jaw-dropping look. </p> <a href="/us/trends/SP13Flashy" class="tr-collection-link">Shop the Collection </a> <div class="fb-like"> <fb:like href="http://www.sunglasshut.com/us/trends/SP13Flashy" send="false" layout="button_count" width="450" show_faces="false"></fb:like> </div> </div> <div class="tr-trend"> <a href="/us/trends/SP13Mirrored" ><img class="tr-trend-img" src="/wcsstore/SGH/experiences/trends/images/Thumbnail_Mirrored_0320.jpg" alt=""/></a> <h3 class="tr-trend-type">Fashion</h3> <h2 class="tr-trend-title">REFLECT IN STYLE</h2> <p> Covert and clandestine. Trade the gradient lenses for mirrored ones and show off your secret style. </p> <a href="/us/trends/SP13Mirrored" class="tr-collection-link">Shop the Collection </a> <div class="fb-like"> <fb:like href="http://www.sunglasshut.com/us/trends/SP13Mirrored" send="false" layout="button_count" width="450" show_faces="false"></fb:like> </div> </div> </div> </div> </div> <div class="tr-sidebar clearfix"> <!-- <div class="tr-celeb-sightings"> <h3 class="font-replaced"> Celebrity Sightings </h3> <div id="celeb-carousel"> <a href="#JS" class="celeb-carousel-prev carousel-nav-disabled"><span></span></a> <ul class="carousel-list"> <li> <input type="hidden" value="/wcsstore/SGH/experiences/trends/images/Trends_CelebertySightings_DAgron_3.jpg" /> <p class="tr-source"> </p> <p class="tr-caption"> DIANA AGRON IN PRADA </p> <p class="product"> <span class="tr-brand">PRADA</span> <span class="style">PR27OS</span> <span class="price">$290.00</span> </p> <a href="/us/64366" > Get the Look </a> </li> <li> <input type="hidden" value="/wcsstore/SGH/experiences/trends/images/Trends_CelebertySightings_JenniferAniston5.jpg" /> <p class="tr-source"> </p> <p class="tr-caption"> JENNIFER ANISTON IN RAY-BAN </p> <p class="product"> <span class="tr-brand">Ray-Ban </span> <span class="style">RB3025</span> <span class="price">$149.95</span> </p> <a href="/us/44292" class="tr-more-link"> Get the Look </a> </li> <li> <input type="hidden" value="/wcsstore/SGH/experiences/trends/images/Trends_CelebertySightingz_JoshHutcherson.jpg" /> <p class="tr-source"> </p> <p class="tr-caption"> JOSH HUTCHERSON IN PERSOL </p> <p class="product"> <span class="tr-brand">PERSOL</span> <span class="style">PO0649</span> <span class="price">$360</span> </p> <a href="/us/46074" > Get the Look </a> </li> <li> <input type="hidden" value="/wcsstore/SGH/experiences/trends/images/tr_celeb_6.jpg" /> <p class="tr-source"> Source: Just Jared </p> <p class="tr-caption"> Reese Witherspoon in Ray-Ban </p> <p class="product"> <span class="tr-brand">Ray-Ban</span> <span class="style">RB2132 55 Wayfarer</span> <span class="price">$169.95</span> </p> <a href="/us/44135" class="tr-more-link"> Get the Look </a> </li> <li> <img src="/wcsstore/SGH/experiences/trends/images/Trends_CelebertySightings_EvaHerzigova.jpg" width="279" /> <p class="tr-source"> </p> <p class="tr-caption"> EVA HERZIGOVA IN STELLA MCCARTNEY </p> <p class="product"> <span class="tr-brand">Stella McCartney</span> <span class="style">SM4023</span> <span class="price">$200</span> </p> <a href="/us/50666" class="tr-more-link"> Get the Look </a> </li> <li> <img src="/wcsstore/SGH/experiences/trends/images/Trends_CelebritySighting_DakotaFanning.JPG" width="279" /> <p class="tr-source"> </p> <p class="tr-caption"> DAKOTA FANNING IN PERSOL </p> <p class="product"> <span class="tr-brand">Persol</span> <span class="style">PO3025S</span> <span class="price">$310.00</span> </p> <a href="/us/54096" class="tr-more-link"> Get the Look </a> </li> <li> <img src="/wcsstore/SGH/experiences/trends/images/Trends_CelebertySightingz_GClooney-2.jpg" width="279" /> <p class="tr-source"> </p> <p class="tr-caption"> GEORGE CLOONEY IN PERSOL </p> <p class="product"> <span class="tr-brand">PERSOL</span> <span class="style">PO2405S</span> <span class="price">$360</span> </p> <a href="/us/53524" class="tr-more-link"> Get the Look </a> </li> <li> <input type="hidden" value="/wcsstore/SGH/experiences/trends/images/Trends_CelebertySightings_CarrieUnderwood.jpg" /> <p class="tr-source"> </p> <p class="tr-caption"> CARRIE UNDERWOOD IN BVLGARI </p> <p class="product"> <span class="tr-brand">BVLGARI</span> <span class="style">BV6049B</span> <span class="price">$475</span> </p> <a href="/us/50402" class="tr-more-link"> Get the Look </a> </li> </ul> <a href="#JS" class="celeb-carousel-next"><span></span></a> </div> </div> --> <!-- <div class="tr-spotlight"> <h3 class="font-replaced"> Trend Spotlight </h3> <h2>With Rachel Bilson, Style Director</h2> <img src="/wcsstore/SGH/experiences/trends/images/LUX2119_Bilson_279x170.jpg" alt="Seventies Glam" /> <p> Return to '70s glam. Obsess over this sophisticated flashback. </p> <a href="/webapp/wcs/stores/servlet/Experience?storeId=10152&catalogId=10101&experienceName=bilson-main" class="tr-more-link">See Rachel's Latest </a> </div> --> <!-- <div class="tr-fulltime-fab"> <h3 class="font-replaced"> Full Time Fabulous </h3> <h2>By Kristy Elena</h2> <img src="/wcsstore/SGH/experiences/trends/images/tr_full_time_fab.jpg" alt="" /> <p> Fashion is about moving forward. Stay on top of the latest trends, on-the-street style and fashion tips with Kristy. </p> <a href="/webapp/wcs/stores/servlet/BlogView?storeId=10152&catalogId=10101" class="tr-more-link">Read More</a> </div> --><div class="tr-sgh-on-fb" style="border-top: 0px ! important;"> <div class="tr-fb-box"> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FSunglassHut&width=280&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=288" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:280px; height:280px;" allowTransparency="true"></iframe> </div><div class="tr-fulltime-fab"> <br><br> <hr> <a href="/us/Experience?storeId=10152&catalogId=10101&experienceName=artistseries-all" > <img src="/wcsstore/SGH/experiences/trends/images/ArtistSeries-trendstout.jpg" alt=""/> <br><br> <p> </p> </a> </div> </div><!-- <div class="tr-trending-now"> <h3 class="font-replaced"> Trending Now </h3> <div id="circle-carousel"> <a href="#JS" class="circle-carousel-prev carousel-nav-disabled"><span></span></a> <ul class="carousel-list"> <li> <a href="/us/50770" title="Tory Burch TY7027" > <img src="http://s7d3.scene7.com/is/image/LuxotticaRetail/642878925209_shad_qt?$pngalpha$&wid=280" width="280"/> </a> <p> <a href="/us/50770" title="Tory Burch TY7027" > <span class="circle-product-name">Tory Burch TY7027</span> <span class="circle-product-price">$150</span> </a> </p> </li> <li> <a href="/us/46152" title="Smith Optics Shoreline" > <input type="hidden" value="http://s7d3.scene7.com/is/image/LuxotticaRetail/715757377175_shad_qt?$pngalpha$&wid=280" data-alt="Smith Optics Shoreline" /> </a> <p> <a href="/us/46152" title="Smith Optics Shoreline" > <span class="circle-product-name">Smith Optics Shoreline</span> <span class="circle-product-price">$139</span> </a> </p> </li> <li> <a href="/us/52396" title="Revo RE4054 GUIDE" > <img src="http://s7d3.scene7.com/is/image/LuxotticaRetail/745016236844_shad_qt?$pngalpha$&wid=280" width="280"/> </a> <p> <a href="/us/52396" title="Revo RE4054 GUIDE" > <span class="circle-product-name">Revo RE4054 GUIDE</span> <span class="circle-product-price">$179.95</span> </a> </p> </li> <li> <a href="/us/48872" title="Vogue Eyewear VO2638S" > <input type="hidden" value="http://s7d3.scene7.com/is/image/LuxotticaRetail/805289389712_shad_qt?$pngalpha$&wid=280" data-alt="Vogue Eyewear VO2638S" /> </a> <p> <a href="/us/48872" title="Vogue Eyewear VO2638S" > <span class="circle-product-name">Vogue Eyewear VO2638S</span> <span class="circle-product-price">$89.95</span> </a> </p> </li> <li> <a href="/us/46865" title="Burberry BE3043" > <input type="hidden" value="http://s7d3.scene7.com/is/image/LuxotticaRetail/713132303641_shad_qt?$pngalpha$&wid=280" data-alt="Burberry BE3043" /> </a> <p> <a href="/us/46865" title="Burberry BE3043" > <span class="circle-product-name">Burberry BE3043</span> <span class="circle-product-price">$190</span> </a> </p> </li> </ul> <a href="#JS" class="circle-carousel-next"><span></span></a> </div> </div> --></div></div></div> <!-- #content --><!-- TODO: update src if necessary -->
The Latest Everything Emerald See the latest sunwear styles
Fashion SHOW YOUR STRIPES Forget the polka dots. Choose stripes and turn heads.
Shop the Collection
Fashion FLASHY AND FABULOUS Be mistaken for a celebrity in a jaw-dropping look.
Shop the Collection
Fashion REFLECT IN STYLE Covert and clandestine. Trade the gradient lenses for mirrored ones and show off your secret style.
Shop the Collection
Alert the paparazzi
Need a second opinion?
Did you blink?
Return to mirror >>