/* ******************************************************************** */ /* project: My Royal Heinie - Holding Website file: screen.css creator: Ben Kutil creation date: Sun Sep 7 22:07:52 EDT 2008 copyright: (c) 2008 - Make Things Studio, LLC All rights reserved. info: screen.css file imports the baseline file, and includes major layout files */ /* ******************************************************************** */ /* = IMPORTS /* -------------------------------------------------------- */ /* base and resets */ @import url("/_assets/css/base.css"); @import url("/_assets/css/jquery.lightbox.css"); /* -------------------------------------------------------- */ /* = [end] IMPORTS */ /* = GENERAL /* -------------------------------------------------------- */ body { font-family: helvetica, sans-serif; font-size: 62.5%; text-align: center; color: #58595b; background: #ab9cc3 url(/_assets/images/_s/bg-body.gif) left top repeat; } #horizon { width: 850px; margin: 0 auto;} #wrap { width: 850px; margin: 0 auto; padding: 0; text-align: left; border-left: 3px solid #a08ebb; border-right: 3px solid #a08ebb; border-bottom: 3px solid #a08ebb; background: #fff; } /* = LINKS /* -------------------------------------------------------- */ #content a, #content a:link, #content a:visited { text-decoration: none; color: rgb(196, 38, 46); } #content a:hover { text-decoration: underline; } /* -------------------------------------------------------- */ /* = [end] LINKS */ /* = HEADER /* -------------------------------------------------------- */ #header { position: relative; margin: 0 0 18px 0; } #branding-logo { display: inline; float: left; width: 385px; margin: 20px 0 0 36px; } /* = utility /* -------------------------------------------------------- */ #utility { display: inline; float: right; } #util { float: right; margin: 60px 50px 0 0; } #util li { display: inline; margin: 0 6px 0 0; } #util a { font-size: 10px; font-weight: bold; text-decoration: none; color: #4F2D7F; } #search_mini_form { display: none; } #nav-social { position: absolute; top: 12px; right: 55px; } #nav-social li { display: inline; float: right; margin: 0 6px 0 0; } #nav-social a { display: block; position: relative; text-transform: none; text-decoration: none; color: rgb(196, 38, 46); } #nav-social img { position: relative; top: 3px; } /* -------------------------------------------------------- */ /* = [end] HEADER */ /* = NAVIGATION /* -------------------------------------------------------- */ #nav { display: inline; float: left; width: 100%; margin: 0; padding: 6px 0 5px; background: #c5262f url(/_assets/images/_s/bg-tier1.gif) left bottom repeat-x; z-index: 100; } #tier1 { margin: 0 0 0 -70px; padding: 0 0px 0 50px; } #tier1 li { display: inline; float: left; position: relative; margin: 0; padding: 0 0 0 70px; } #tier1 .tier2 { position: absolute; top:-999em; left: 70px; margin: 0; padding: 21px 0 0 0; background: url(/_assets/images/_s/nav-tier1-btm.gif) left top repeat-x; z-index: 1500; } #tier1 li:hover ul.tier2, #tier1 li.sfHover ul.tier2 { left: 37px; top: 21px; z-index:1000; z-index: 3000; display: block; width: 132px; } #tier1>li>a.ir, #tier1 a span { display: block; height: 27px; } #nav-10>a, #nav-10>a>span { width: 49px; background: url(/_assets/images/_s/nav-tier1-about-off.gif) left top no-repeat; } #nav-15>a, #nav-15>a>span { width: 37px; background: url(/_assets/images/_s/nav-tier1-shop-off.gif) left top no-repeat; } #nav-16>a, #nav-16>a>span { width: 78px; background: url(/_assets/images/_s/nav-tier1-wholesale-off.gif) left top no-repeat; } #nav-17>a, #nav-17>a>span { width: 100px; background: url(/_assets/images/_s/nav-tier1-locate-off.gif) left top no-repeat; } #nav-18>a, #nav-18>a>span { width: 41px; background: url(/_assets/images/_s/nav-tier1-news-off.gif) left top no-repeat;} #nav-111>a, #nav-111>a>span { width: 89px; background: url(/_assets/images/_s/nav-tier1-contact-off.gif) left top no-repeat;} #tier1 #nav-112 { display: none; } #tier1 ul.tier2 li { display: block; margin: 0; padding: 0; border-top: 2px solid #fff; } ul.tier2 li a { display: block; width: 120px; margin: 0; padding: 6px; font-size: 13px; line-height: 18px; text-decoration: none; color: rgb(79, 45, 127); background: #c6bbd6; background-image: none; } ul.tier2 li a:hover { color: #fff; background: rgb(79, 45, 127);} #tier2 li { display: inline; float: left; width: 100%; margin: 0 0 9px 0; } #tier2 a, #tier2 a:link, #tier2 a:visited { display: block; padding: 0 0 12px 0; font-weight: bold; color: #fff; text-decoration: none; color: #fff; background: url(/_assets/images/_s/nav-tier2-off.gif) -1px bottom no-repeat; } #tier2 a span { display: block; padding: 12px 0 0 9px; font-size: 1.4em; line-height: 1; color: #fff; background: #f0ab00 url(/_assets/images/_s/nav-tier2-off.gif) -169px top no-repeat; } #tier2 a:hover, #tier2 a:hover span { color: #fff; border: none; text-decoration: none; background-image: url(/_assets/images/_s/nav-tier2-on.gif); } #tier2 a:hover span { background-color: #503080;} .nav.inline, .nav.inline li { display: inline; float: left; } .nav.inline ul li, .nav.inline ul { display: block; } /* -------------------------------------------------------- */ /* = [end] NAVIGATION */ /* = FOOTER /* -------------------------------------------------------- */ #siteinfo { display: inline; float: left; width: 814px; text-align: left; font-weight: bold; } #siteinfo-legal { display: inline; float: left; width: 470px; font-size: 1em; margin: 6px 0 0 36px; } #siteinfo-credits { display: inline; float: right; width: 200px; font-size: 1.1em; text-align: right; margin: 6px 0 0 0; } #siteinfo-credits h4 { margin: 0 0 6px; font-weight: bold; font-size: 1em; } #siteinfo-credits a { color: #545454;} #siteinfo-credits a:hover { color: rgb(196, 38, 46); } /* -------------------------------------------------------- */ /* = [end] FOOTER */ /* = TYPOGRAPHY /* -------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { margin: 0; font-size: 1em; line-height: 1em; font-weight: normal; } h4 { font-size: 1.4em; font-weight: bold; } p { margin: 0 0 1em 0; font-size: 1.3em; line-height: 1.46315; } #main-content p em { font-style: italic; } #main-content ul { margin: 0 0 1.2em 0;} #main-content li { font-size: 1.3em; line-height: 1.46315; margin: 0 0 6px 0; } .callout { font-size: 1.9em; line-height: 1.26; } .presale.note { margin: 0 0 30px 0; border: 1px solid #c5262f; padding: 12px; font-weight: bold; color: #4f2d7f; background: #FFCDD2; } code { display: block; padding: 6px; color: #000; border: 1px solid #666; background: #ccc; } /* -------------------------------------------------------- */ /* = [end] TYPOGRAPHY */ /* -------------------------------------------------------- */ /* = [end] GENERAL */ /* = INDEX Layout /* -------------------------------------------------------- */ #index #content { width: 750px; margin: 18px auto 0; padding: 0 0 18px 0; } #index #promo-content { display: inline; float: left; width: 750px; margin: 24px 0 18px 0; padding: 0; z-index: 0; } #index #promo-outer-wrap { background: url(/_assets/images/_s/bg-promo-crn.jpg) -750px top no-repeat; } #index #promo-inner-wrap { min-height: 345px; padding: 0 0 2px 0; background: url(/_assets/images/_s/bg-promo-crn.jpg) 0 bottom no-repeat; } #index #promo-img { display: inline; float: right; width: 314px; height: 345px; margin: 8px 18px 0 0; } #index #promo-callout { display: inline; float: left; width: 342px; margin: 24px 0 0 18px; } #promo-callout h2 { margin: 0 0 12px 0; font-size: 3.2em; font-weight: normal; line-height: 1.125; color: rgb(196, 38, 46); } #index #promo-detail { position: relative; display: inline; float: left; width: 342px; margin: -9px 0 0 0px; padding:1px 0 0 0; } #index #promo-detail img { position: absolute; top: -5px; left: 4px; } #index #promo-detail p { position: absolute; top: 2.5em; left: 240px; width: 230px; margin: 0 0 0 0; } #promo-detail h3 { position: absolute; top: 9px; width: 250px; left: 240px; margin: 0 0 0 0; font-size: 1.9em; font-weight: normal; line-height: 1.26; color: rgb(79, 45, 127);} .outline360 { display: inline; float: left; background: url(/_assets/images/_s/bg-outline.gif) left top repeat-y; } .outline360 .wrap { margin: 0; padding: 0; width: 360px; background: url(/_assets/images/_s/bg-outline-crn.gif) left top no-repeat; } .outline360 .wrap.inner { padding: 0 0 12px 0; background: url(/_assets/images/_s/bg-outline-crn.gif) -360px bottom no-repeat; width: 360px; } #special-offer h2 { padding: 12px 0 12px 12px; font-size: 2.4em; font-weight: normal; line-height: 1.125; color: rgb(79, 45, 127); } #special-offer p { padding: 0 12px; margin: 0; } #special-offer img { padding: 0; margin: 0 0 0 2px; } #index #sub-content { display: inline; float: left; width: 360px; margin: 0 0 0 24px;} #index #newsletter-enrollment { margin: 0 12px;} /* -------------------------------------------------------- */ /* = [end] INDEX Layout */ .outline160 { display: inline; float: left; width: 165px; background: url(/_assets/images/_s/bg-out160.gif) left top repeat-y; } .outline160 .wrap { margin: 0; padding: 13px 0 0 0; width: 165px; background: url(/_assets/images/_s/bg-out160-crn.gif) left top no-repeat; } .outline160 .wrap.inner { padding: 0 0 13px 0; background: url(/_assets/images/_s/bg-out160-crn.gif) -165px bottom no-repeat; width: 165px; } /* = INTERIOR LAYOUT /* -------------------------------------------------------- */ #interior #content { display: inline; float: left; width: 800px; margin: 0 0 30px 50px; } #interior #main-content { display: inline; float: left; width: 545px; margin: 0; padding: 0; } #interior.press #main-content { width: 100%; } #interior.press.kit #main-content { width: 545px; } #interior #sub-content { display: inline; float: left; width: 165px; margin: 12px 0 0 30px; } /* -------------------------------------------------------- */ /* = [end] INTERIOR LAYOUT */ /* = Breadcrumbs /* -------------------------------------------------------- */ #breadcrumbs { display: inline; float: left; width: 100%; margin: 18px 0 9px 0;; } #breadcrumbs.inline li, #breadcrumbs a { display: inline; float: left; font-size: 13px; line-height: 1.46; font-weight: bold; color: rgb(79, 45, 127); text-transform: lowercase; } #breadcrumbs li { display: inline; float: left; } #breadcrumbs li.last { background: none; } #breadcrumbs a, #breadcrumbs a:link, #breadcrumbs a:visited { font-weight: normal; text-decoration: none; color: rgb(145, 143, 144); padding-right: 24px; background: url( /_assets/images/_s/bg-breadcrumb.gif) right -3px no-repeat;} /* -------------------------------------------------------- */ /* = [end] Breadcrumbs */ /* = Headers /* -------------------------------------------------------- */ #interior h1 { margin: 0 0 12px 0; font-size: 3.2em; line-height: 1.125; color: rgb(79, 45, 127); } #interior h2 { margin: 0 0 6px 0; font-size: 1.4em; line-height: 1.28; font-weight: bold; color: rgb(79, 45, 127); } #interior div.form form h2, #interior #sub-content h3, #interior #sub-content h2, #interior.locate #main-content h2, h2.title, #interior.shop .outline360 h2, #interior.press.kit h2 { margin: 0 0 12px 0; font-size: 2.4em; font-weight: normal; line-height: 1.125; color: rgb(79, 45, 127); } #interior h3 { margin: 0 0 12px 0; font-size: 1.4em; font-weight: bold; } #interior .faq h3 { margin: 0; } #interior #sub-content h4 { font-size: 1.4em; font-weight: bold; color: rgb(79, 45, 127); } /* -------------------------------------------------------- */ /* = [end] Headers */ /* = Text /* -------------------------------------------------------- */ #content strong { font-weight: bold;} /* -------------------------------------------------------- */ /* = [end] Text */ /* = IMAGES /* -------------------------------------------------------- */ img.inline { display: inline; } img.left { float: left; margin: 0 12px 12px 0; } img.right { float: right; margin: 0 0 12px 12px; } img.full { margin-bottom: 15px; } /* -------------------------------------------------------- */ /* = [end] IMAGES */ .callout { font-size: 1.9em; line-height: 1.26; } .presale.note { margin: 0 0 30px 0; border: 1px solid #c5262f; padding: 12px; font-weight: bold; color: #4f2d7f; background: #FFCDD2; } code { display: block; padding: 6px; color: #000; border: 1px solid #666; background: #ccc; } .purple { color: rgb(79, 45, 127); } .red { color: #c5262f; } /* = LINK LISTS /* -------------------------------------------------------- */ #content ul.linklist { margin: 0 0 2.1em 0; } /* -------------------------------------------------------- */ /* = [end] LINK LISTS */ /* = FAQ /* -------------------------------------------------------- */ .faq { margin: 0 0 3em 0; } /* -------------------------------------------------------- */ /* = [end] FAQ */ /* = IMAGE GALLERy /* -------------------------------------------------------- */ #gallery { margin: 0 0 0 -15px; } .gallery { display: inline; float: left; width: 165px; min-height: 225px; margin: 0 0 0 15px;} /* TODO: fix for IE */ .gallery p { font-size: 1em; } /* -------------------------------------------------------- */ /* = [end] IMAGE GALLERy */ /* = REVIEWS /* -------------------------------------------------------- */ .review { margin: 6px 0 2.1em 0; padding: 0 0 12px 0; border-bottom: 2px solid #e5dfeb; } #pager { position: relative; display: inline; float: left; width: 100%; font-size: 1.2em; font-weight: bold; } #pager .qp_next, #pager .qp_prev { width: 50px; } #pager .qp_next { position: absolute; top: 0; left: 0; } #pager .qp_prev { position: absolute; top: 0; right: 0; } #pager .qp_counter { display: block; width: 50px; margin: 0 auto; } /* -------------------------------------------------------- */ /* = [end] REVIEWS */ /* = FORMS /* -------------------------------------------------------- */ div.form { display: inline; float: left; width: 544px; margin: 0 0 18px 0; border: none; background: #e5e0ec url(/_assets/images/_s/bg-form.gif) left top no-repeat; } div.form .wrap { padding: 15px 15px 3px; background: url(/_assets/images/_s/bg-form.gif) -545px bottom no-repeat; } p.req { font-weight: bold; color: #df001f; } fieldset { margin: 0 0 8px 0; padding-bottom: 9px; border: none; border-bottom: 1px dotted #666; } .shop fieldset { border: none; } legend { border: none; display: none; visibility: hidden;} fieldset.submit { border: none;} .ctl { display: inline; float: left; width: 100%; margin: 0 0 1.2em 0; vertical-align: top; } .ctl.inline { display: inline; width: auto; margin: 0 18px 0 0; } .ctl label { display: block; margin: 0 0 3px 0; font-weight: bold; color: #545454; } .ctl .req { margin: 0 0 0 3px; font-size: 1.2em; font-weight: bold; color: #D6001F;} .ctl span { display: inline; float: left; width: 300px; } .ctl.inline span, .radio span { width: 18px; } .ctl input.text, .ctl select, .ctl textarea { width: 300px; } .ctl textarea { height: 9em; } .ctl.inline label, .radio label { display: inline; float: left; width: auto;} /* User for things like radio buttons */ #email-inp { margin: 0 0 18px;} #email-inp input.submit { margin: 0;} .ctl button { margin: 0; padding: 0; border: none; background: none; } button:hover { cursor: pointer; } #newsletter-enrollment button.submit { width: 84px; height: 24px; } strong.error { display: block; margin: 3px 0; padding: 3px; font-weight: bold; color: #fff; background: #c5262f;} /* -------------------------------------------------------- */ /* = [end] FORMS */ /* = locate /* -------------------------------------------------------- */ #interior.locate #main-content { padding-bottom: 30px; } #store-locator { margin: 0; } #sort-stores { display: inline; float: left; width: 100%; margin: 0 0 15px 0; background: #9F8CB8; } #sort-stores form { display: inline; float: left; width: 500px; margin: 9px 9px 0; padding: 0 0 9px 0; } #ctl-sort, #states-all { display: inline; float: left; width: 100px; margin: 0; padding: 0; } #states-all { margin: 0 0 0 6px; } #content #states-all a, #content #states-all a:link, #content #states-all a:visited { color: #fff; } #sel-category { width: 150px; } #store-locator .col { display: inline; float: left; width: 165px; margin: 0 0 0 24px; } #store-locator .col h3 { margin-bottom: 3px; line-height: 1;} #store-locator .state { margin-bottom: 6px; } #store-locator .vcard { font-size: 1.2em; line-height: 1.3;} #store-locator .vcard .fn { display: block; font-weight: bold; color: #666;} #store-locator .vcard .adr, #store-locator .vcard .adr .street-address, #store-locator .vcard .adr .extended-address { display: block; } #store-locator .vcard .tel .type { display: none; } #store-locator .vcard .web { display: block; font-size: 1em;} #interior.locate #sub-content { margin-top: 14em; } #linklist-online_stores li { font-size: 1.3em; line-height: 1.46315; margin: 0 0 6px 0; } /* -------------------------------------------------------- */ /* = [end] locate */ /* = NEWS /* -------------------------------------------------------- */ .news { margin: 0 0 2.1em 0; padding: 12px 12px 0; border-bottom: 2px solid #e5dfeb; } #index .news { border: none; } .section { font-size: 1.4em; font-weight: bold; text-transform: capitalize; color: #a7a9ac; } .news h2.title { margin: 0; color: rgb(196, 38, 46); } #interior .news img { display: inline; float: right; margin: 0 0 12px 12px; } #sub-content .press strong { font-weight: bold; } #page-nav { width: 100%; } #page-nav li { margin-right: 9px; } #page-nav a, #page-nav a:link, #page-nav a:visited { padding: 6px; font-weight: bold; color: #fff; background: #a290bc; } #page-nav a:hover, #page-nav strong a, #page-nav strong a:link, #page-nav strong a:visited { color: #4f4c4d;} .awards.outline160 { text-align:center;} .awards p { margin: 0 auto;} #interior #sub-content .outline160.news { margin: 0 0 15px; padding: 0; border-bottom: 0; } #interior #sub-content .outline160.news #sidebar { margin: 0 0 0 12px; } #interior #sub-content .outline160.news.sidebar h2, #interior #sub-content .outline160.news.sidebar form p, #interior #sub-content .outline160.news.sidebar p.rss { margin: 0; font-size: 1.4em; font-weight: bold; color: rgb(79, 45, 127);} #interior #sub-content .outline160.news.sidebar input.text { width: 100px; } #interior #sub-content .outline160.news.sidebar #nav_categories { margin: 0 0 18px 0; } #interior #sub-content .outline160.news.sidebar #nav_categories li { margin: 0 0 6px 0; } #interior #sub-content .outline160.news.sidebar p.rss { margin: 0 0 6px 0; } #interior #sub-content .outline160.news.sidebar p.rss a { padding: 3px 0 3px 24px; color: rgb(79, 45, 127); background: url(/_assets/images/_s/feed-icon-18.gif) left top no-repeat; } /* -------------------------------------------------------- */ /* = [end] NEWS */ /* = press /* -------------------------------------------------------- */ #interior .press_wrap { display: inline; float: left; width: 100%; } #interior .press.outline360 { margin: 0 18px 18px 0; } #interior .press.outline360 .wrap.inner { min-height: 140px; padding-top: 18px; } /* TODO: Windows code for this */ #interior.press .press.outline360 img { display: inline; float: left; margin: 18px; } #interior.press .press.outline360 p { margin: 0 18px; } #interior.press .press.outline360 h2 { margin: 0 18px; } /* -------------------------------------------------------- */ /* = [end] press */ /* = SHOP /* -------------------------------------------------------- */ #interior.shop h1 { text-transform: lowercase; } #interior.shop #promo-content, #interior.shop .promo-content { display: inline; float: left; width: 750px; margin: 0 0 18px 0; padding: 0; background: #eee9f0 url(/_assets/images/_s/bg-promo.gif) left top repeat; } #interior.shop #promo-content-2 { background: url(/_assets/images/_s/bg-promo-out.gif) left top repeat;} #interior.shop #promo-outer-wrap, #interior.shop .promo-outer-wrap { display: inline; float: left; width: 750px; background: url(/_assets/images/_s/bg-promo-crn.jpg) -750px top no-repeat; } #interior.shop #promo-content-2 .promo-outer-wrap { background: url(/_assets/images/_s/bg-promo-out-crn.gif) 0 top no-repeat; } #interior.shop #promo-inner-wrap, #interior.shop .promo-inner-wrap { display: inline; float: left; width: 750px; background: url(/_assets/images/_s/bg-promo-crn.jpg) 0px bottom no-repeat; } #interior.shop #promo-content-2 .promo-inner-wrap { padding-bottom: 15px; background: url(/_assets/images/_s/bg-promo-out-crn.gif) -750px bottom no-repeat; } #interior.shop #promo-content-info, #interior.shop .promo-content-info { display: inline; float: left; width: 370px; margin: 12px; } #interior.shop #promo-content img, #interior.shop .promo-content img { display: inline; float: right; margin: 12px 30px 0 0; } #interior.shop #main-content { width: 780px; margin-left: -18px; } #interior.shop .outline360 { display: inline; float: left; margin: 0 9px 18px 18px;} #interior.shop .outline360 .wrap.inner { min-height: 35em; padding: 12px 0 12px; } #interior.shop .outline360 h2, #interior.shop #promo-content-2 h2, #interior.shop .outline360 p, #interior.shop #promo-content-2 p, #interior.shop .outline360 img{ padding: 0 18px 0 18px; } #interior.shop #promo-content-2 h2 { margin: 0 0 12px; font-size: 2.4em; font-weight: normal; line-height: 1.125; } #interior.shop .outline360 a, #interior.shop .outline360 a:link, #interior.shop .outline360 a:visited, #interior.shop .outline360 a:active, #interior.shop #promo-content-2 a { display: block; text-decoration: none; color: #58595b; border: none; } /* = accessories & specials /* -------------------------------------------------------- */ .list .accessory { display: inline; float: left; width: 600px; padding: 0 0 8px 0; margin: 0 0 8px 0; border-bottom: 2px solid #e5dfeb; } .list .accessory img.listimg { display: inline; float: left; width: 165px; margin: 24px; } .list .accessory .info { display: inline; float: left; width: 300px; margin: 0 0 0 12px; padding: 0; } .list .accessory .info .cart { margin: 0; } .wholesale .accessory-list { display: inline; float: left; width: 100%; margin: 0; padding: 0 0 1px;} .list.wholesale .accessory { width: 180px; margin: 0 15px 15px 0; } /* -------------------------------------------------------- */ /* = [end] accessories & specials */ /* -------------------------------------------------------- */ /* = [end] SHOP */ /* = WHOLESALE /* -------------------------------------------------------- */ #rnd-tradeshow { display: inline; float: left; width: 545px; margin: 0 0 18px 0; padding: 0; background: url(/_assets/images/_s/bg-int-promo-sm.gif) left top repeat; } #rnd-tradeshow .wrap { display: inline; float: left; width: 545px; background: url(/_assets/images/_s/bg-int-promo-crn-sm.gif) 0 top no-repeat; } #rnd-tradeshow .wrap.inner { display: inline; float: left; width: 545px; background: url(/_assets/images/_s/bg-int-promo-crn-sm.gif) -545px bottom no-repeat; } #rnd-tradeshow .info { margin: 9px; } /* -------------------------------------------------------- */ /* = [end] WHOLESALE */