/*---------------------------------------- Name: core.less Developed by: Mark Joseph Rivera Copyright: 2011 @ Dog and Rooster ----------------------------------------*/ @import 'class.less'; /* --+ RESETS / CLEARFIX / DYNAMIC CLASS +-- */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, logo, nav, section, time, audio, video { margin:0; padding:0; border:none; outline:0; } html { overflow-y:scroll; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; } table { border-collapse:collapse; border-spacing:0; } input, select { vertical-align:middle; } textarea { overflow:auto; } select, input, textarea, button { font:99% sans-serif; } input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; } label, input[type=button], input[type=submit], button { cursor:pointer; } sub { vertical-align:sub; font-size:smaller; } sup { vertical-align:super; font-size:smaller; } p { margin:0 0 10px; } a { outline:0; text-decoration:none; } a img { border:0; text-decoration:none; } h1, h2, h3, h4, h5, h6 { font-weight:normal; line-height:normal; margin:0 0 10px; } a:link { -webkit-tap-highlight-color:#bf4804; } .clearfix:before, .clearfix:after { content:"\0020"; display:block; height:0; visibility:hidden; } .clearfix:after { clear:both; } .clearfix { zoom:1; } .clear { clear:both; } .col1 { float:left; } .col2 { float:right; } .center { text-align:center; } .left { text-align:left; } .right { text-align:right; } .smaller { font-size:11px; } .small { font-size:small; } .medium { font-size:medium; } .large { font-size:large; } .larger { font-size:larger; } .first { margin-left:0 !important; padding-left:0 !important; } .last { margin-right:0 !important; padding-right:0 !important; } .top { margin-top:0 !important; padding-top:0 !important; } .bottom { margin-bottom:0 !important; } .dotted { border:none; border-bottom:dotted 1px #CCC; } .hline { border:none; border-bottom:solid 1px #CCC; } .ir { display:block; background-repeat:no-repeat; text-align:left; text-indent:-999em; direction:ltr; overflow:hidden; } .hidden { display:none; visibility:hidden; } .ie7 img { -ms-interpolation-mode:bicubic; } .ie7 input[type="checkbox"] { vertical-align: baseline; } .ie6 input { vertical-align: text-bottom; } ::-moz-selection { background:##e14366; color:#fff; text-shadow:none; } ::selection { background:##e14366; color:#fff; text-shadow:none; } /* --+ HTML5 CORE +-- */ html { background:#FFF; min-height:100%; .linear-gradient(#FFFFFF,#817d7a,100%); background: linear-gradient(top, #ffffff 0%,#817d7a 100%); filter: e("progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#817d7a',GradientType=0)"); } body { font:13px 'HelveticaNeueLight', sans-serif; color:#666; } figure { position:relative; width:1020px; min-height:500px; margin:auto; padding:0; } section { float:left; position:relative; background:#FFF; width:875px; margin:-10px 0 0 135px; padding:10px 10px 0 0; z-index:1px; .border-radius(0 0 5px 5px); .box-shadow(-3px,2px,4px,0,rgba(0,0,0,.5)); &#main { padding:10px 10px 0 0; } //Custom Attributes a { color:#e14366; text-decoration:none; &.org { color:#fe7223; } } #topnav { position:absolute; top:7px; right:15px; background:rgba(0,0,0,.65); color:#FFF; text-align:center; list-style:none; margin:0; padding:5px 10px; .border-radius(0 0 5px 5px); z-index:1000; a { font:11px 'HelveticaNeueLight',sans-serif; color:#FFF; margin:0 3px; &:hover { color:#fe7223; } } } } //Main Navigation nav { position:absolute; top:40px; left:0; width:135px; min-height:110px; z-index:0; .border-radius(5px 0 0 5px); .box-shadow(0,0,5px,1px,rgba(0,0,0,.5)); #hdr_logo { display:block; background:url(../images/ns_logo.jpg) no-repeat; width:135px; height:105px; -webkit-border-top-left-radius:5px; } ul { list-style:none; margin:0; li { position:relative; display:block; background:#363432; font:1.2em sans-serif; color:#FFF; width:100%; min-height:1%; overflow:hidden; &#mn_learn { span { background:#fe7223; } a:first-child { margin-top:10px; } a:last-child { margin-bottom:5px; } } &#mn_shop { span { background:#e14366; } a:first-child { margin-top:10px; } a:last-child { margin-bottom:5px; } //Fix Radius -webkit-border-bottom-left-radius:5px; background-clip:padding-box; background-origin:padding-box; &.active span { -webkit-border-bottom-left-radius:0; } span { -webkit-border-bottom-left-radius:5px; box-shadow:none; } } span { display:block; text-indent:10px; line-height:30px; height:30px; cursor:pointer; .box-shadow(0,2px,5px,0,rgba(0,0,0,.7)); a { color:#FFF; } } div { display:none; &.learn,&.shop { display:block; } a { display:block; font:12px 'HelveticaNeueLight', sans-serif; color:#FFF; text-indent:10px; text-transform:capitalize; letter-spacing:.05em; width:100%; padding:7px 0; &:hover { color:#fe7223; } &.on { color:#fe7223; } } } } } #networksDock { position:absolute; bottom:-42px; left:0; text-align:center; width:135px; height:32px; } } //End of Nav footer { clear:both; float:left; width:885px; height:150px; margin:0; overflow:hidden; ul { font:10px Arial,sans-serif; list-style:none; width:885px; margin:0; li { float:left; display:inline; color:#999; height:115px; &.subscription { width:225px; padding:35px 0 0 70px; } &.contactinfo { width:205px; padding:35px 0 0 90px; } &.retailerinfo { width:200px; padding:35px 0 0 95px; } } h3 { font:bold 13px Arial,sans-serif; color:#444; margin-bottom:5px; } dd { margin:5px 0 0; } input[type=email] { display:block; font-size:11px; text-indent:5px; line-height:25px; width:150px; height:25px; margin-bottom:20px; border:solid 1px #CCC; -moz-box-shadow:inset 1px 1px 2px 0 rgba(0,0,0,.2); -webkit-box-shadow:inset 1px 1px 2px 0 rgba(0,0,0,.2); } input[type=submit] { background:none; font:10px Arial,sans-serif; color:#e14366; border:none;} } } //End of Footer #copyright { clear:both; float:left; font:11px 'HelveticaNeueLight',sans-serif; color:#FFF; width:885px; margin:5px 0 20px 140px; } //Homepage Slideshow #home_slideshow { position:relative; background:#EEE; width:885px; height:465px; margin:0; overflow:hidden; #nav { position:absolute; bottom:15px; right:15px; text-align:center; height:23px; z-index:1000!important; a { float:left; display:block; background:url(../images/ss_nav.png) no-repeat 0 0; font-size:11px; color:#FFF; line-height:23px; width:23px; height:23px; &:hover { background:url(../images/ss_nav.png) no-repeat 0 -28px; } &.activeSlide { background:url(../images/ss_nav.png) no-repeat 0 -56px; } } } #s4 { position:relative; list-style:none; width:885px; height:465px; margin:0; z-index:0; li { position:relative; width:885px; height:465px; z-index:0; hgroup { position:absolute; top:175px; left:25px; width:100%; height:100%; z-index:1; h1 { font:100 70px 'HelveticaNeueLight',sans-serif; color:#FFF; line-height:60px; margin:0 0 25px; } p { font-size:14px; color:#FFF; width:400px; } a { color:#fe7223; &:hover { position:relative; text-decoration:underline; } } } img { position:absolute; width:100%; height:100%; z-index:0; } } } } //End of Slideshow #cat_learn { float:left; list-style:none; width:885px; margin:0; li { float:left; position:relative; width:295px; height:170px; &.learn { background:url(../../temp/category/category_link-01.jpg) no-repeat top center; } &.order { background:url(../../temp/category/category_link-02.jpg) no-repeat top center; } &.compare { background:url(../../temp/category/category_link-03.jpg) no-repeat top center; } &.learn h3,&.compare h3 { background:#fe7223; } &.order h3 { background:#e14366; } } a { display:block; font:13px 'HelveticaNeueLight',sans-serif; color:#FFF; width:295px; height:170px; h3 { position:absolute; top:20px; left:0; line-height:30px; height:30px; padding:0 20px 0 15px; .border-radius(0 5px 5px 0); } &:hover h3 { padding:0 30px 0 15px; } } } //End of Category Learn #cat_slider { clear:both; float:left; background:#0e0e0e; width:885px; height:180px; margin:0; overflow:hidden; h3 { display:inline-block; background:#fe7223; color:#FFF; margin:4px 0 0 0; padding:5px 10px; .border-radius(0 5px 0 0); } #sliderPanel { float:left; background:#363432; width:100%; height:120px; -moz-box-shadow:inset 0 0 8px 0 rgba(0,0,0,.6); box-shadow:inset 0 0 8px 0 rgba(0,0,0,.6) } } //End of Category Slider article { position:relative; z-index:10; #headers { position:relative; z-index:200; .dark,.light { display:none } a { color:#fe7223; } &.tour,&.company,&.materials,&.difference,&.comparison,&.faq,&.press,&.gift,&.group { color:#FFF; width:845px; height:135px; padding:20px; h2 { font:100 48px 'HelveticaNeueLight',sans-serif; margin:10px 0 0; } p { letter-spacing:.045em; } } &.tour { background:url(../images/hdr_tour.jpg) no-repeat; } &.company { background:url(../images/hdr_company.jpg) no-repeat; } &.materials { background:url(../images/hdr_materials.jpg) no-repeat; } &.difference { background:url(../images/hdr_difference.jpg) no-repeat; } &.comparison { background:url(../images/hdr_comparison.jpg) no-repeat; } &.faq { background:url(../images/hdr_faq.jpg) no-repeat; } &.press { background:url(../images/hdr_press.jpg) no-repeat; } &.cart,&.viewall { color:#FFF; width:845px; height:70px; padding:20px; h2 { font:100 34px 'HelveticaNeueLight',sans-serif; color:#EBEBEB; margin-top:10px; } } &.cart,&.register { background:url(../images/hdr_cart.png) no-repeat; } &.viewall { background:url(../images/hdr_viewall.jpg) no-repeat; h2 { margin:20px 0 0; } } &.retailer { background:url(../images/hdr_retailer.jpg) no-repeat; width:845px; height:70px; padding:20px; h2 { font:100 34px 'HelveticaNeueLight',sans-serif; color:#EBEBEB; margin:10px 0 0; } } &.register { width:845px; height:70px; padding:20px; h2 { font:100 34px 'HelveticaNeueLight',sans-serif; color:#EBEBEB; margin:10px 0 0; } } &.watch { background:url(../images/hdr_watch.jpg) no-repeat; color:#FFF; width:845px; height:435px; padding:20px; h2 { font:100 58px 'HelveticaNeueLight',sans-serif; margin:0 0 10px; } img { position:relative; left:-5px; display:block; margin:0; } } #menu { position:absolute; bottom:0; left:0; margin:0; li{ float:left; display:inline; font-family:arial; letter-spacing:0; a, a.active { height:25px; line-height:25px; text-align:center; display:block; margin-right:3px; padding:0 10px; .border-radius(5px 5px 0 0); } a.active { background:url(../images/top-menu.jpg); color:#FE7223; &:hover { color:#808080; } } a { background:url(../images/shadow.jpg) repeat-x center bottom #e9e6e4; color:#464646; &:hover{ color:#808080; } } } } #videoplayer { position:absolute; top:0; left:0; z-index:100; } } //End of Headers #content-learn { float:left; background:#e9e6e4; width:855px; min-height:500px; padding:15px 15px 0 15px; #demo { float:left; list-style:none; width:100%; margin:0; li { position:relative; background:#F8F8F8; font:12px sans-serif; color:#898989; line-height:16px; width:530px; height:140px; margin:0 0 15px 295px; padding:5px 15px; .border-radius(5px); h4 { font:15px 'HelveticaNeueLight',sans-serif; color:#464646; margin:0 0 5px; } span { display:block; text-align:right; margin:20px 0 0; padding:0 15px 0 0; } a { color:#FE7223; &:hover { color:#464646; } } img { position:absolute; top:0; left:-295px; width:280px; height:150px; .border-radius(5px); } } } #suggeted-products { clear:both; float:left; h3 { font:bold 14px Arial,sans-serif; color:#464646; margin:0 0 10px; } ul { float:left; background:#F8F8F8; list-style:none; width:825px; min-height:110px; margin:0 0 15px; padding:15px 15px 0 15px; .border-radius(3px); li { float:left; position:relative; width:157px; height:97px; margin:0 10px 15px 0; .border-radius(3px); .box-shadow(-2px,2px,3px,0,rgba(0,0,0,.5)); &:first-child { margin:0 10px 0 0; } } a { position:relative; display:block; width:100%; z-index:0; img { display:block; } &:hover { background:#FFF; img { opacity:.9; } } } span { position:absolute; bottom:0; left:0; display:block; background:#000; font:11px sans-serif; color:#FFF; text-indent:10px; line-height:20px; width:100%; height:20px; z-index:1; .border-radius(0 0 3px 3px); } } } #tbl-comparison { background:#E0DCDB; font:13px sans-serif; margin:0 0 15px; thead td { text-align:center; padding:20px 0; } tbody tr { &:nth-child(even) { background:#e0dcdb; } &:nth-child(odd) { background:#dbd6d2; } } tbody td { text-align:center; color:#fe7223; padding:4px 0; &:first-child { font-size:12px; color:#444; text-align:left; text-indent:10px; } } } #faq-questions { float:left; background:#FFF; list-style:none; width:835px; margin:0 0 10px; padding:10px; .border-radius(5px); li { float:left; font-family:sans-serif; color:#444; line-height:14px; width:385px; margin:0 0 0 65px; &:first-child { margin:0; } p { margin:0 0 3px; padding-right:10px; strong { font:bold 14px sans-serif; color:#555; } } div { display:block; margin-top:40px; &:first-child { margin-top:0; } } } a { color:#444; &:hover { color:#FE7223; } } } .faq-answer { clear:both; float:left; background:#FFF; list-style:none; width:835px; margin:0 0 15px; padding:10px; .border-radius(5px); li { float:left; font-family:sans-serif; width:100%; margin:0; p { float:left; width:295px; padding-right:20px; } span { float:right; color:#888; width:520px; } a { color:#444; &:hover { color:#FE7223; } } } } #retailer { float:left; list-style:none; width:865px; margin:0 0 20px; padding:0 0 20px; border-bottom:dotted 1px #CCC; li { float:left; height:270px; &.retForm { width:290px; height:280px; padding-top:10px; } &.retMap1 { text-align:center; width:505px; padding-left:50px; } &.retMap2 { clear:right; text-align:center; width:555px; height:75px; //img { display:inline; margin:0 35px; } a { display:inline-block; width:110px; height:72px; margin:0 35px; &.al { background:url(../../temp/map/retailer_alaska_map.png) no-repeat 0 0; } &.hw { background:url(../../temp/map/retailer_hawaii_map.png) no-repeat 0 0; } &.pr { background:url(../../temp/map/retailer_puertorico_map.png) no-repeat 0 0; } &:hover { background-position:0 -72px; } } } } select { display:block; background:#fe7223; color:#FFF; width:250px; padding:4px; margin-bottom:5px; border:0; //CSS3 .border-radius(4px); //Webkit -webkit-appearance: listmenu; } input[type=submit] { background:#fe7223; font:13px 'HelveticaNeueLight',sans-serif; color:#FFF; padding:5px 10px; border-top:solid 1px rgba(255,255,255,.7); border-left:0; border-right:0; border-bottom:0; .border-radius(4px); .box-shadow(1px,1px,3px,0,rgba(0,0,0,.5)); &:hover { text-shadow:0 -1px 0 #777; .linear-gradient(#fd8b4b,#fe7223,100%); } } } .tabRetailerList { clear:both; float:left; font-size:12px; line-height:16px; color:#888178; width:100%; margin-bottom:5px; dt { display:block; font:bold 13px sans-serif; color:#444; text-align:left; width:100%; padding:10px 0 20px; } dd { float:left; width:285px; margin-bottom:20px; ul { list-style:none; margin:0; } a { color:#e24366; text-decoration:none; } } } &.shoppingCart { position:relative; min-height:500px; #cart-menu { float:left; background:#d5d4d2; list-style:none; width:auto; height:25px; margin-bottom:40px; .border-radius(5px); li { float:left; display:inline; a { position:relative; display:inline-block; color:#363432; text-align:center; line-height:25px; padding:0 20px; &:hover { color:#fe7223; } &[curve] { background:#363432 url(../images/checkout_navbar_arrow.jpg) no-repeat right 0; color:#FFF; .border-radius(5px 0 0 5px); } &[active] { background:#363432 url(../images/checkout_navbar_arrow.jpg) no-repeat right 0; color:#FFF; } &[over] { background:#363432 url(../images/checkout_navbar_arrow.jpg) no-repeat right -50px; color:#FFF; .border-radius(5px 0 0 5px); } &[visited]{ background:#363432 url(../images/checkout_navbar_arrow.jpg) no-repeat right -50px; color:#FFF; } &[finish] { background:#363432; color:#FFF; .border-radius(0 5px 5px 0); } } } } h3 { font:18px 'HelveticaNeueLight',sans-serif; color:#e14366; } .cart_listings { position:relative; td { vertical-align:top; } thead { font:16px 'HelveticaNeueRoman',sans-serif; tr { border-bottom:solid 1px #000; } } tbody { tr { border-bottom:solid 1px #CCC; &.subtotal,&.noborder { border-bottom:none; } &.subtotal td { background:#f9f9f9; font-size:15px; padding:10px 0; } &.noborder td { padding:10px 0 20px; } &.coupon td { font:12px sans-serif; padding:10px 0 10px; input[type=text] { width:100px; margin:0 5px 0 0; } .error { display:block; font-size:10px; color:#A40; margin:5px 0 0; } } &.grandtotal td { background:#d5d4d2; font:17px 'HelveticaNeueRoman',sans-serif; color:#444; text-shadow:1px 1px 0 #FFF; padding:10px 0; } } td { font:normal 12px sans-serif; padding:25px 0 20px; &:first-child { width:590px; padding:20px 0; } &:last-child { font:15px sans-serif; } img { float:left; width:125px; height:70px; margin-right:10px; } input[type=text] { text-indent:5px; line-height:20px; width:50px; height:20px; margin-right:25px; border:solid 1px #CCC; -webkit-box-shadow:inset 0 1px 2px 0 rgba(0,0,0,.3); -moz-box-shadow:inset 0 1px 2px 0 rgba(0,0,0,.3); } } } } .shipping_info { h3 { font:15px 'HelveticaNeueBold',sans-serif; color:#444; margin:0 0 10px; } table { margin-bottom:40px; p { color:#898278; margin:0; } ul { list-style:none; width:460px; margin:20px 0 0; li { display:inline; &.col1 { width:285px; } &.col2 { font:14px 'HelveticaNeueBold',sans-serif; text-align:center; width:175px; } } } } fieldset { border:none; label { clear:both; display:block; font:12px sans-serif; color:#898278; } input[type=text],input[type=password] { display:block; text-indent:5px; width:283px; height:21px; margin-bottom:10px; border:solid 1px #CCC; -webkit-box-shadow:inset 0 1px 1px 0 rgba(0,0,0,.2); -moz-box-shadow:inset 0 1px 1px 0 rgba(0,0,0,.2); } input#city { display:inline-block; width:180px; margin-right:10px; } input#zip { width:85px; } input#phone { width:185px; } input#cardnumber { width:285px; } input#cardcode { width:85px; } select { -webkit-appearance:listmenu; } select#state { position:relative; top:-5px; display:inline-block; width:80px; padding:4px; border:0; .border-radius(2px); } select#country { position:relative; top:0; width:283px; padding:4px; margin-bottom:10px; border:0; .border-radius(2px); } select#cardtype { position:relative; top:0; width:283px; padding:4px; margin-bottom:10px; border:0; .border-radius(2px); } select#month,select#year { position:relative; top:0; width:140px; padding:4px; margin-bottom:10px; border:0; .border-radius(2px); } ul { list-style:none; margin:10px 0 0; &.zip-phone { width:285px; margin:0; li { float:left; width:185px; &:first-child { width:85px; margin-right:15px; } } } &.card-code { width:400px; li { float:left; width:85px; &:first-child { width:285px; margin-right:15px; } } } &.month-year { width:285; margin:0; li { float:left; width:142px; &:first-child { width:142px; margin-right:5px; } } } } } } .payment_info { float:left; list-style:none; width:855px; margin:10px 0; li { float:left; background:#FFF; width:420px; margin-left:15px; &:first-child { margin-left:0; } table { thead td { background:#ff7203; color:#FFF; padding:3px 5px; } tbody td { vertical-align:top; padding:3px; } } } } } &.registerCart { h3 { font:15px 'HelveticaNeueBold',sans-serif; margin:0 0 20px; } fieldset { margin:0 20px 50px 0; border:none; &.userlogin { float:left; width:290px; label { clear:both; font:12px sans-serif; color:#898278; } input[type=text],input[type=password] { text-indent:5px; width:283px; height:21px; margin-bottom:10px; border:solid 1px #CCC; -webkit-box-shadow:inset 0 1px 1px 0 rgba(0,0,0,.2); -moz-box-shadow:inset 0 1px 1px 0 rgba(0,0,0,.2); } ul { list-style:none; width:285px; margin:0; a:hover { color:#fe7223; } } span[red] { color:#e14366; } .vanadium-advice { display:block; font:11px sans-serif; color:#e14366; margin:-7px 0 10px; } } &.useraccess { float:left; width:350px; margin:40px 0 20px; h3 { margin-bottom:10px; } label { clear:both; font:12px sans-serif; color:#898278; } input[type=text] { text-indent:5px; width:348px; height:21px; margin:5px 0 10px; border:solid 1px #CCC; -webkit-box-shadow:inset 0 1px 1px 0 rgba(0,0,0,.2); -moz-box-shadow:inset 0 1px 1px 0 rgba(0,0,0,.2); } .vanadium-advice { display:block; font:11px sans-serif; color:#e14366; margin:-7px 0 10px; } } &.col2 { p { padding-right:7px; } } } .error-info { background:#d1d0cf; font:16px 'HelveticaNeueBold',sans-serif; color:#e14366; width:400px; margin:0 0 20px; padding:5px 10px; } } } //End of Content-Learn } /* Cart & Button Factory */ .cartbtn,.cartbtn2 { position:relative; background:transparent; font:11px 'HelveticaNeueLight',sans-serif; color:#FFF; margin:0px; padding:4px 20px; border:0; .border-radius(2px); } .cartbtn { background:url(../images/cartbtn.jpg) repeat-x left top; text-shadow:0 -1px 0 #d13e60; &:hover { background:url(../images/cartbtn.jpg) repeat-x left bottom; } } .cartbtn2 { background:url(../images/cartbtn2.jpg) repeat-x left top; text-shadow:0 -1px 0 #333; &:hover { background:url(../images/cartbtn2.jpg) repeat-x left bottom; } } button.cartbtn,button.cartbtn2 { position:relative; top:1px; padding:3px 20px; } /* Product Factory */ .pebble-organic { background:url(../images/hdr_bg_dark.jpg) no-repeat; } .pebble-organic-wrap { background:url(../images/hdr_bg_light.jpg); } .pebble-organic,.pebble-organic-wrap { float:left; width:885px; min-height:550px; #product { position:relative; width:585px; min-height:565px; .black { color:#000; } } #product-desc { color:#a2a19f; } #product-desc-light { color:#636363 } #product-desc, #product-desc-light { font-size:12px; line-height:16px; width:266px; min-height:500px; padding:50px 15px 30px 15px; h2 { font:100 27px 'HelveticaNeueUltraLt'; color:#FFF; margin-bottom:10px; } dl.top { dt{ color:#FFF; } dd{} } dl.middle { margin-bottom:10px; dt{ color:#FFF; display:inline; } dd{ display:inline; margin-left:10px; ul{ height:24px; display:block; margin-top:6px; li{ display:inline; float:left; margin:0 4px; .border-radius(2px 2px); behavior:url(_pie.htc); a { width:21px; height:21px; display:block; } a:hover { width:19px; height:19px; .border-radius(2px 2px); behavior:url(_pie.htc); border:1px solid #CCC; } } .pink { background:#ee1460; } .white { background:#faf8f9; } .yellow { background:#fcf6a0; } .blue { background:#bde4e1; } .green { background:#ccdb40; } .darkyellow { background:#fe9e2d; } } } } ul.shop { margin-top:10px; display:block; width:190px; li { width:83px; height:24px; list-style:none; display:inline; float:left; margin: 0 10px 4px 0; cler:both; label { font-size: 18px; color:#FFF; } a.cart, a.share { width:83px; height:24px; font-size:11px; color:#FFF; text-align:center; line-height:24px; display:block; .border-radius(4px 4px); behavior:url(_pie.htc); } a.cart{ .linear-gradient(#dd6580, #e14467, 100%); } a.share{ .linear-gradient(#7b7670, #322f2b, 100%); } a:hover.cart{ .linear-gradient(#ed7c95, #e14467, 100%); } a:hover.share{ .linear-gradient(#8b8884, #322f2b, 100%); } } } } } #info { float:left; background:#4a4947; width:855px; padding:15px; li { float:left; height:215px; overflow:hidden; h3 { display:block; background:#000; font:13px 'HelveticaNeueLight',sans-serif; color:#FFF; text-indent:10px; line-height:25px; width:100%; height:25px; margin:0; .border-radius(5px 5px 0 0); } &#add-info { width:560px; margin-right:15px; .border-radius(5px); dl { float:left; background:#353432; width:100%; dt { float:left; position:relative; width:370px; height:215px; overflow:hidden; img,p { position:absolute; } img { bottom:0; left:0; width:370px; height:215px; z-index:0; .border-radius(0 0 0 5px); } p { bottom:30px; left:10px; font:12px 'HelveticaNeueLight'; color:#FFF; line-height:14px; width:350px; z-index:2; } .shadow-box { position:absolute; bottom:20px; left:0; display:block; width:370px; height:215px; z-index:1; .linear-gradient(transparent,#000,130%); } } dd { float:left; line-height:14px!important; width:180px; padding-left:10px; a { display:block; font-size:11px; color:#FFF; margin:0; padding:0; &:first-child { margin-top:10px; } &:hover,&:active,&.on { color:#f7486c; } } } } } &#similar-product { width:280px; .border-radius(5px); dl { float:left; background:#7f7e7e; width:100%; dt { float:left; position:relative; text-align:center; width:140px; height:93px; margin:1px 0 0 0; a { position:absolute; top:0; display:block; background:#FFF; width:140px; height:70px; overflow:hidden; } img { display:block; width:140px; height:70px; } span { position:absolute; bottom:0; left:0; display:block; background:#373737; font-size:12px; color:#FFF; line-height:23px; width:140px; height:23px; } } } } } } #content-shop { background:#484643; width:869px; float:left; padding:8px; h2 { clear:both; float:left; font:18px 'HelveticaNeueLight',sans-serif; color:#ebebeb; margin:5px 0 10px; } #viewall { clear:both; float:left; list-style:none; width:876px; min-height:1%; margin:0 0 10px; li { float:left; position:relative; background:#000; width:285px; height:170px; margin:0 7px 7px 0; .border-radius(0 5px 5px 0); img { float:left; width:185px; height:170px; } dl { float:right; width:95px; height:150px; padding:10px 0 10px 5px; dt { display:block; color:#FFF; h3 { font-family:sans-serif; } h3 { font-size:11px; } } dd { position:absolute; bottom:20px; right:7px; color:#FFF; margin:0; padding:0; h4 { font:14px sans-serif; } label, input[type=text] { display:inline-block; } label { font:11px sans-serif; } input[type=text] { text-indent:5px; width:55px; height:23px; margin-left:5px; border:none; .border-radius(2px); -moz-box-shadow:inset 0 2px 2px 0 rgba(0,0,0,.5); } button { display:block; margin:10px 0 0; padding:3px 12px; } } } } } }