.transition(@property, @duration) { -webkit-transition: @property @duration; -moz-transition: @property @duration; transition: @property @duration; } .boxed(@amounts, @color) { -webkit-box-shadow: @amounts @color; -moz-box-shadow: @amounts @color; box-shadow: @amounts @color; } .rounded(@amounts) { -webkit-border-radius: @amounts; -moz-border-radius: @amounts; border-radius: @amounts; } /* 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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } html { background: url('img/bkgd.png') repeat-x; } body { font-family: 'Crimson Text', Georgia, Times, sans-serif; margin-top: 32px; padding-top: 16px; } h1, h2, h3 { font-weight: bold; line-height: 1.5; } strong { font-weight: bold; } em { font-style: italic; } h1 { font-size: 36px; margin-top: 32px; } h2 { font-size: 24px; } p { line-height: 1.5; margin-bottom: 16px; &.note { text-align: right; color: #444; font-style: italic; } } a { position: relative; color: #2178d1; &:hover, &:focus { color: #691d6f; text-decoration: none; } } ul { list-style: disc outside; margin: 16px 0 16px 16px; line-height: 1.5; } #home { position: fixed; margin-left: 32px; display: block; text-indent: -9999px; width: 22px; height: 22px; background-repeat: no-repeat; background-position: 0px 0px; background-image:url('img/home.png'); background-color: #fff; padding: 8px; &:hover { background-position: -38px 0; .rounded(8px); background-color: #666; } &:active { margin-top: 1px; } } #compare { z-index: 2; background: rgba(255,255,255, 0.75); position: fixed; margin: 16px; padding: 8px 16px; right: 0; .rounded(16px); &:hover { background: rgba(255,255,255,1); } &:active { margin-top: 17px; } } #content { width: 640px; margin: 32px auto; a:active { top: 1px; } } #remotes { img { cursor: move; display: block; position: absolute; &.drag { opacity: 0.5; } &.compare { position: fixed; top: 48px; margin-top: 0; } } } #apple_tv { /* 4.7 x 1.2 x 0.2 in */ width: 1.2*40px; height: auto; margin-top: 48px; margin-left: -96px; &.compare { margin-left: -132px; } } #boxee { /* 1.75 x 5.75 in */ width: 1.65*40px; margin-top: 48px; margin-left: 700px; &.compare { margin-left: -28px; } } #roku { height: 4.9*40px; width: auto; margin-top: 48px; margin-left: -96px; &.compare { margin-left: -88px; } } #revue { /* 16.3 x 2.6 x 8.1 inches */ width: auto; height: 16.3*40px; margin-top: -96px; margin-left: 700px; &.compare { margin-left: 580px; } } #ps3 { /* 6.18 in x 3.74 in x 2.16 in */ width: 6.18*40px; height: auto; margin-left: -300px; margin-top: 32px; &.compare { margin-left: 100px; } } #wii { /* 5.83 in x 1.43 in x 1.21 in */ width: 1.43*40px; height: auto; margin-top: 96px; margin-left: 700px; &.compare { margin-left: 40px; } } #xbox360 { /* 6.05 in x 4.13 in */ width: 6.05*40px; height: auto; margin-left: -300px; margin-top: 240px; &.compare { margin-left: 340px; } } table { line-height: 1.5; margin-bottom: 16px; } tr { &:nth-child(odd) { background: #efefef; } } th, td { border-right: 2px solid #fff; padding: 4px 8px; } th { background: #ccc; font-weight: bold; } td { text-align: right; &:first-child { text-align: left; } p { text-align: left; } } footer { color: #444; text-align: center; width: 640px; margin: 0 auto; padding: 32px 0; }