/* DogSlim.com COLORS: Background: #cef; Light Blue: #18c; Dark Blue: #058; Grey: #888; ----------------------------------------------------------------------------------------- */ /* RESET - http://meyerweb.com/eric/tools/css/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, b, u, i, center, 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-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } /* Base -- Modified from "baseline" css framework ----------------------------------------------------------------------------------------- */ body { font-family: helvetica, arial, sans-serif; line-height: 1.5; background: white; color: black; } h1, h2, h3, h4, h5, h6 { line-height: 1.2; } h4, h5, h6 { font-weight: bold; } b, strong, th, thead, dt, legend { font-weight: bold; } caption, cite, dfn, em, i { font-style: italic; } code, kbd, samp, pre, tt, var { font-family: mono-space, monospace; } h1, h2, h3, h4, h5, h6 { word-spacing: -0.125em; } p { word-spacing: 0.125em; hyphenate: auto; hyphenate-lines: 3; } pre { white-space: pre; } del { text-decoration: line-through; } mark { background: rgba(255, 255, 0, 0.4); padding: 0 .25em; } ins { color: #f00; } small, sup, sub { font-size: 80%; } big { font-size: 125%; line-height: 80%; } abbr, acronym { font-size: 85%; text-transform: uppercase; letter-spacing: .1em; } abbr[title], acronym[title], dfn[title] { border-bottom: 1px dotted black; cursor: help; } sup, sub { line-height: 0; } sup { vertical-align: super; } sub { vertical-align: sub; } blockquote { padding: 1.5em; } hr { border: none; width: 100%; } ul, ol { margin-left: 1.5em; } ul { list-style: disc outside; } ol { list-style: decimal outside; } input, select, button { cursor: pointer; } table { font: inherit; width: 100%; } /* html 5 */ article, aside, header, hgroup, nav, section, footer { float: left; display: block; } figure { display: block; } /* Typography -- Modified from "baseline" css framework ----------------------------------------------------------------------------------------- */ body { font-size: 62.5%; line-height: 1.5; /*12/18*/ } h1, h2, h3, h4, h5, h6 { position: relative; } h1, h2, h4 { margin-bottom: 1.5em; } h3, h5, h6 { margin-bottom: .5em; } h1, h2, h3, h4 { margin-top: 1.5em; } h3, h4, h5, h6 { line-height: 1; } h1 { font-size: 3.6em; top: .5em; } h2 { font-size: 2.8em; top: .8em; } h3 { font-size: 2.2em; top: .1em; } h4 { font-size: 1.8em; top: .2em; } h5 { font-size: 1.5em; top: .4em; } h6 { font-size: 1.3em; top: .5em; } p, pre, address { font-size: 1.3em; line-height: 1.5; position: relative; top: 5px; } p {margin-bottom: 18px; } abbr, code, kbd, samp, small, var { line-height: 15px; } ul, ol, dl, dialog { font-size: 13px; line-height: 18px; position: relative; top: 5px; margin-top: 0; margin-bottom: 18px; } li ul, li ol { top: 0; margin-top: 0; margin-bottom: 0; } li h1, li h2, li h3, li h4, li h5, li h6, li p { top: 0; } form, legend, label { font-size: 13px; line-height: 18px; } legend { position: relative; top: 5px; } input, textarea { font-size: 12px; } h1:first-child, h2:first-child, h3:first-child, h4:first-child { margin-top: 0; } /* Table and cart styles ----------------------------------------------------------------------------------------- */ table { font-size: 1.3em; line-height: 1.5em; margin: 1.5em 0; border: 1px solid #18c; } th, td { padding: 3px; line-height: 1.2; text-align: center; } th { background: #cef; } tr:nth-child(even) { background: #cef; } tr:nth-child(odd) { } colgroup#weight { } #lbs { width: 13%; } #kg { width: 13%; } colgroup#amount { border-left: 1px solid #18c; border-right: 1px solid #18c; } #us { } #metric { } colgroup#mix { } #mixpowder { width: 20%; } #mixwater { width: 20%; } dl.analysis { width: 300px; margin-bottom: 1.5em; } .analysis dt { width:75%; float: left; display: inline; font-weight: normal; border-bottom: 1px solid #cef; padding: 3px 0;} .analysis dd { width:25%; float: left; display: inline; border-bottom: 1px solid #cef; text-align: right; padding: 3px 0;} hr { position: relative; height: 4px; margin: 18px 0 14px 0; } /* Author styles ----------------------------------------------------------------------------------------- */ body { background: #cef; } #wrapper { width: 820px; margin: 0 auto; text-align: left; background: #fff url(../images/global/bk-body.gif) top center repeat-y;} .inset-right { float: right; display inline; margin-left: 20px;} .inset-left { float: left; display inline; margin-right: 20px;} .edge { margin-right: -18px; } /* =a */ a, a:visited { color: #18c; } a:hover, a:active, a:focus { color: #058; text-decoration: none; } /* Type Styles ----------------------------------------------------------------------------------------- */ h3,h4,h6 { color: #058; } .smallcaps { text-transform: uppercase; letter-spacing: .2em; color: #18c; font-size: 1em; } .smallcaps a { text-decoration: none; } .intro p { font-size: 1.6em; line-height: 1.5; color :#888;} .chart p { text-indent: -9999px; background: transparent; line-height: 1; margin:0;} .caption { font-size: 1em; line-height: 1.2; color: #666; background: transparent;} .minor { color: #999; font-size: 1em; } ol { font-weight: bold; color: #058; font-size: 1.5em; } ol li { margin-bottom: .5em;} ol ul { font-weight: normal; color: #000; } ol ul li { margin-bottom: 0 } .aside { background: #e5f6ff; padding: 10px; margin-bottom: 1.5em;} /* Header ----------------------------------------------------------------------------------------- */ #header { background: #cef url(../images/global/header-wave.gif) bottom center no-repeat; padding-bottom: 50px; position: relative; width: 820px;} #header h1 { margin: 0; top: 0; float: left; display: inline;} #header h1 a { background: url(../images/global/header-logo.gif) 0 0 no-repeat; display: block; height: 70px; text-indent: -9999px; width: 170px; } #header h1 a:hover { background-position: 0 -70px;} .eyebrow { float: right; display: inline; line-height: 4; margin-right: 20px; text-align: right;} .eyebrow a { background: url(../images/global/logo-petag-blue.gif) right 0 no-repeat; display: block; height: 40px; padding-right: 80px;} .eyebrow a:hover { background-position: right -40px; } /* Navigation ----------------------------------------------------------------------------------------- */ ul.navigation { list-style: none; float: right; display: inline; line-height: 1; margin-top:0; margin-bottom: 0; padding: 0; font-size: 1.4em;} .navigation li { float: left; padding: 5px 20px;} .navigation a, .navigation a:visited { display: block; color: #18c; text-decoration: none; } .navigation a:hover, .navigation li.current a { color: #666; } .navigation li.current { border-bottom: 4px solid #f00; } body#home li#homepage a, body#bites li#bitespage a, body#powder li#powderpage a { font-weight: bold; } /* Buttons ----------------------------------------------------------------------------------------- */ .button { float: left; display: inline; text-indent: -9999px; margin-top: 0; margin-bottom: 1.5em; z-index: 1000;} .button a { width: 220px; height: 110px; display: block; } .powder { background: url(../images/global/button-powder.gif) 0 0 no-repeat; margin-right: 20px;} .bites { background: url(../images/global/button-bites.gif) 0 0 no-repeat; } .button a:hover { background-position: 0 -110px; } .petsmart { margin: 0 20px 0 60px} /* Content ----------------------------------------------------------------------------------------- */ #content { clear: both; position: relative; width:820px; } .content-main { float: right; display: inline; width: 460px; margin-right: 20px;} .retailers { width: 140px; } .retailers a { display: block; width: 140px; height: 50px; margin-bottom: 1.5em;} #sidebar { float: left; display: inline; width: 320px; } #sidebar .features { margin: 0 20px 1.5em; } #catslim { margin: 1.5em 20px; } #catslim img { margin: 0; } #catslim p { color: #888; margin-top: 0; top: 0;} .bottom, .buy h3 { margin-bottom: .5em;} body#bites .buy, body#powder .buy { margin-top: 3em; } #study a { width: 440px; height: 195px; background: url(../images/button-study.jpg) top left no-repeat; } #study a:hover { background-position: 0 -195px;} #frisbee-offer { margin-top: 2em; } .frisbee-caption { float: right; clear: right; display: inline; width: 180px; font-size: 1em; line-height: 1.2; color: #666;} .news { list-style: none; margin-left: 0;} /* Buttons ----------------------------------------------------------------------------------------- */ .button { float: left; display: inline; text-indent: -9999px; margin-top: 0; margin-bottom: 1.5em; z-index: 1000;} .button a { width: 220px; height: 110px; display: block; } .powder { background: url(../images/global/button-powder.gif) 0 0 no-repeat; margin-right: 20px;} .bites { background: url(../images/global/button-bites.gif) 0 0 no-repeat; } .button a:hover { background-position: 0 -110px; } .retailer { margin: 0 20px 1.5em 0;} /* Footer ----------------------------------------------------------------------------------------- */ #footer { background: #cef url(../images/global/footer-wave.gif) center top no-repeat; padding-top: 30px; margin-top: 50px; position: relative; width: 820px; color: #888; clear: both;} #footer .logo a { background: url(../images/global/logo-petag-blue.gif) 20px 0 no-repeat; display: block; padding-left: 100px; height: 40px; line-height: 4; margin-top: 20px; } #footer .logo a:hover { background-position: 20px -40px; } .usa { background: url(../images/global/USA.gif) 0 0 no-repeat; width: 40px; height: 36px; padding: 0; text-indent: -9999px; position: absolute; top: 70px; right: 20px;} .copyright { padding-left: 100px; } /* Clear Floats (clearfix) ----------------------------------------------------------------------------------------- */ .group:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .group {display: inline-block;} /* Hides from IE-mac \*/ * html .group {height: 1%;} .group {display: block;} /* End hide from IE-mac */