Created
September 3, 2012 11:53
-
-
Save mr-stezz/3608797 to your computer and use it in GitHub Desktop.
vehicle derivative pre-content
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @charset "utf-8"; | |
| /* vehicle derivative pre-content */ | |
| *{ | |
| /* gives everything a better box model for using percentage padding and margins. Borders get included in width sizes */ | |
| -moz-box-sizing:border-box; | |
| box-sizing:border-box; | |
| padding:0; | |
| margin:0; | |
| } | |
| html{ | |
| height:100%; | |
| /* always provide a scrollbar so they don't affect the page when they do appear */ | |
| overflow-y:scroll; | |
| -webkit-text-size-adjust:100%; | |
| -ms-text-size-adjust:100%; | |
| text-rendering:optimizeLegibility; | |
| -moz-font-feature-settings:"kern=1"; | |
| -ms-font-feature-settings:"kern" 1; | |
| -webkit-font-smoothing:subpixel-antialiased; | |
| padding:1em; | |
| } | |
| body{ | |
| /* sets the base font-size to 13 and line-height to 22 */ | |
| font:81.25%/1.6923076923076923 sans-serif; | |
| color:#666; | |
| background:url(/img/bg-org.png) #fff no-repeat center 0; | |
| -webkit-background-size:cover; | |
| -moz-background-size:cover; | |
| background-size:cover; | |
| margin:0; | |
| } | |
| /* vertical rhythm for different elements on the page */ | |
| ul,ol,dd, | |
| p,figure, | |
| pre,table,fieldset,hr, | |
| .img{ | |
| margin-bottom:1.6923076923076923em; /* 22px = base line-height */ | |
| } | |
| /*--- anchors ---*/ | |
| a:focus{ | |
| outline:thin dotted; | |
| } | |
| a:hover, | |
| a:active{ | |
| outline:0; | |
| } | |
| a{ | |
| text-decoration:none; | |
| color:#353978; | |
| -webkit-tap-highlight-color:rgba(53,57,120,.5); | |
| } | |
| a:hover{ | |
| color:#000; | |
| } | |
| a[href ^= 'http']:not([href *= 'listers.']):after, | |
| a.offsite:after{ | |
| -webkit-user-select:none; | |
| -moz-user-select:none; | |
| user-select:none; | |
| cursor:pointer; | |
| content:' ∞'; | |
| } | |
| /*-- Headings --*/ | |
| h1,h2,h3,h4,h5,h6{color:#333;} | |
| h1,h2,h3,h4,h5,h6, | |
| .heading{ | |
| font-family:"Proxima Nova","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| /* font size adjust - 0.488 x 13 = 6.344 | lowercase x-height = 6.344px */ | |
| font-size-adjust:0.488; | |
| } | |
| h1,.alpha, | |
| h2,.beta{ | |
| font-weight:200; | |
| } | |
| h1,.alpha{ | |
| font-size:2em; | |
| line-height:1.4; | |
| margin-bottom:0.19230769230769232em; | |
| } | |
| h2,.beta{ | |
| font-size:1.8461538461538463em; | |
| line-height:1.33333333; | |
| margin-bottom:0.16666666666666666em; | |
| } | |
| h3,.gamma{ | |
| font-weight:300; | |
| font-size:1.3846153846153846em; | |
| line-height:1.4444444444444444; | |
| margin-bottom:0.2222222222222222em; | |
| } | |
| h4,.delta{ | |
| font-weight:400; | |
| font-size:1.2307692307692308em; | |
| line-height:0.8888888888888888; | |
| margin-bottom:0.625em; | |
| } | |
| h5,.epsilon, | |
| h6,.zeta{ | |
| font-size:1em; | |
| text-transform:uppercase; | |
| margin-bottom:0.38461538461538464em; | |
| } | |
| h5,.epsilon{ | |
| font-weight:500; | |
| } | |
| h6,.zeta{ | |
| font-weight:bold; | |
| color:#666; | |
| } | |
| /*--- images ---*/ | |
| img{ | |
| max-width:100%; | |
| /*height:auto;*/ | |
| } | |
| /*--- figures ---*/ | |
| figure img{ | |
| vertical-align:middle; | |
| border:0.07692307692307693em solid #ebebeb; | |
| margin-bottom:0.8461538461538461em; | |
| } | |
| figcaption, | |
| caption{ | |
| color:#666; | |
| caption-side:bottom; | |
| } | |
| /*--- lists ---*/ | |
| ul,ol{ | |
| padding:0; | |
| } | |
| ul,ol, | |
| dd{ | |
| margin-left:1.6923076923076923em; | |
| } | |
| li > ul, | |
| li > ol{ | |
| margin-bottom:0; | |
| } | |
| /*--- unordered list ---*/ | |
| ul{ | |
| list-style:square; | |
| list-style-position:inside; | |
| } | |
| /*--- ordered list ---*/ | |
| ol{ | |
| list-style:decimal; | |
| } | |
| /*--- definition list ---*/ | |
| dl{ | |
| margin-bottom:1.6923076923076923em; | |
| } | |
| dt{ | |
| font-weight:bold; | |
| } | |
| /*--- menu list ---*/ | |
| menu{ | |
| list-style:none; | |
| margin-bottom:1.6923076923076923em; | |
| } | |
| menu > li{ | |
| text-align:center; | |
| } | |
| /*--- horizontal rule ---*/ | |
| hr{ | |
| height:0.07692307692307693em; | |
| background-color:#ddd; | |
| border:0; | |
| } | |
| /*------------------------------------*\ | |
| $LAYOUT | |
| \*------------------------------------*/ | |
| /* boundaries */ | |
| .row:before, | |
| .row:after{ | |
| content:""; | |
| display:table; | |
| } | |
| .row:after{ | |
| clear:both; | |
| } | |
| .row{ | |
| max-width:75.6923076923077em; | |
| position:relative; | |
| margin:0 auto 0.8461538461538461em auto; | |
| } | |
| .row > .island, | |
| .row > .islet{ | |
| width:100%; | |
| } | |
| .row .row{ | |
| width:auto; | |
| max-width:none; | |
| min-width:0; | |
| margin:0 -0.9230769230769231em; | |
| } | |
| /* island modules */ | |
| .grid, | |
| .island, | |
| .islet{ | |
| display:block; | |
| float:left; | |
| /* gutters = 12px */ | |
| padding:0 0.9230769230769231em; | |
| } | |
| /* micro clearfix */ | |
| .cf:before, | |
| .cf:after{ | |
| content:" "; | |
| display:table; | |
| } | |
| .cf:after{clear:both;} | |
| /* -- | |
| nav | |
| --*/ | |
| .nav{ | |
| list-style:none; | |
| margin-left:0; | |
| } | |
| .nav > li, | |
| .nav a{ | |
| display:inline-block; | |
| } | |
| /*-- segregate each list item --*/ | |
| .segregated > li{ display:inline; } | |
| .segregated > li:after{ | |
| content:' · '; | |
| color:#888; | |
| } | |
| .segregated > li:last-child:after{ content:''; } | |
| /* -- | |
| media | |
| --*/ | |
| .media{display:block;} | |
| .complementary{float:left;margin-right:0.9230769230769231em;} | |
| /* Reversed image location (right instead of left). */ | |
| .complementary.reverse{float:right;margin-left:0.9230769230769231em;} | |
| .complementary img, | |
| img.complementary{display:block;} | |
| .body { overflow:hidden; } | |
| .body > :last-child { margin-bottom:0; } | |
| .page-title > .island{ width:100%; } | |
| .page-mast{ | |
| min-height:14.923076923076923em; | |
| overflow:hidden; | |
| position:relative; | |
| background:#4a4a4a; | |
| -webkit-background-size:cover; | |
| -moz-background-size:cover; | |
| background-size:cover; | |
| border-radius:0.23076923076923078em; | |
| box-shadow: | |
| inset 0 0 0 0.15384615384615385em rgba(0,0,0,.4), | |
| inset 0 0 0 0.23076923076923078em rgba(255,255,255,.1); | |
| padding:1.9230769230769231em; | |
| margin-bottom:0; | |
| } | |
| .car-details{ | |
| height:auto; | |
| min-height:18em; | |
| color:#fff; | |
| text-shadow:0 1px 2px rgba(0,0,0,.6); | |
| background-image:linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,0) 30%,rgba(0,0,0,.4) 86%,rgba(0,0,0,0) 100%); | |
| border-radius:0; | |
| padding:0; | |
| } | |
| .car-details .complementary{ margin:2px 0 2px 2px; } | |
| .spotlight .img{ margin-bottom:0; } | |
| .vehicle-primary-info{ | |
| height:164px; | |
| padding-top:10px; | |
| } | |
| .vehicle-primary-info > .island{ width:100%; } | |
| .vehicle-primary-info span{ | |
| display:block; | |
| text-align:center; | |
| } | |
| .span-one{ | |
| font-size:16px; | |
| font-weight:bold; | |
| text-transform:uppercase; | |
| } | |
| .span-two{ | |
| font-size:24px; | |
| text-transform:uppercase; | |
| } | |
| .vehicle-primary-info .nav{ | |
| display:block; | |
| text-align:center; | |
| margin-bottom:0; | |
| } | |
| .vehicle-secondary-info, | |
| .vehicle-tertiary-info{ | |
| overflow:hidden; | |
| border-top:1px solid rgba(255,255,255,.2); | |
| } | |
| .vehicle-secondary-info .island { width:25%; } | |
| .vehicle-tertiary-info > .island { width:100%; } | |
| dl.vehicle-secondary-info { margin-bottom: 0; } | |
| .vehicle-secondary-info dt { display:none; } | |
| .vehicle-secondary-info dd{ | |
| border-left:1px solid rgba(255,255,255,.1); | |
| margin: 0; | |
| } | |
| .vehicle-secondary-info dd:first-child{ border-left:none; } | |
| .vehicle-secondary-info dd, | |
| .vehicle-location > span{ | |
| display:block; | |
| font-size:16px; | |
| text-align:center; | |
| padding:4px 0; | |
| } | |
| .car-action{ | |
| display:inline; | |
| font-weight:bold; | |
| font-size:13px; | |
| color:#fff; | |
| text-transform:uppercase; | |
| } | |
| .car-action:before{ | |
| content:'— '; | |
| } | |
| .vehicle-media{ | |
| display:block; | |
| width:100%; | |
| height:32px; | |
| font-weight: bold; | |
| text-shadow: 0 1px 0 rgba(255,255,255,.6); | |
| background-color:#ccc; | |
| background-image:linear-gradient(rgba(255,255,255,0.2) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0.3) 50%,rgba(255,255,255,0.5) 100%); | |
| background-clipping:padding-box; | |
| border-radius:0 0 3px 3px; | |
| border:1px solid rgba(0,0,0,.1); | |
| box-shadow:inset 0 0 0 1px rgba(255,255,255,.3), | |
| 0 1px 2px rgba(0,0,0,.05); | |
| } | |
| .vehicle-has-media, | |
| .vehicle-availability-notice { padding:4px 12px; } | |
| .vehicle-has-media{ | |
| width:356px; | |
| float:left; | |
| background-color:rgba(0,0,0,.3); | |
| border-right: 1px solid #888; | |
| } | |
| .vehicle-availability-notice { text-align:center; } | |
| /*------------------------------------*\ | |
| $THEMES | |
| \*------------------------------------*/ | |
| /* overly large type abstractions */ | |
| .giga{ | |
| font-size:1.8461538461538463em; | |
| margin-bottom:0.08333333333333333em; | |
| } | |
| .mega{ | |
| font-weight:normal; | |
| font-size:1.3846153846153846em; | |
| margin:0; | |
| } | |
| /* header styling */ | |
| .emphasis{ | |
| font-weight:bold; | |
| text-transform:uppercase; | |
| } | |
| /* morph ordinary elements into headings */ | |
| .heading, | |
| .link-heading{ | |
| display:block; | |
| } | |
| .link-heading{ | |
| font-weight:bold; | |
| color:#333; | |
| } | |
| .link-heading:hover{ | |
| color:#000; | |
| } | |
| /*--- lined section headings ---*/ | |
| .section-heading{ | |
| border-bottom:1px solid #bfbfbf; | |
| border-bottom:0.07692307692307693rem solid rgba(0,0,0,.2); | |
| } | |
| h1.section-heading, | |
| .alpha.section-heading{ | |
| padding-bottom:0.3076923076923077em; | |
| margin-bottom:0.46153846153846156em; | |
| } | |
| h2.section-heading, | |
| .beta.section-heading{ | |
| padding-bottom:0.23076923076923078em; | |
| margin-bottom:0.38461538461538464em; | |
| } | |
| h3.section-heading, | |
| .gamma.section-heading{ | |
| padding-bottom:0.3076923076923077em; | |
| margin-bottom:0.3076923076923077em; | |
| } | |
| small, | |
| .mili{ | |
| font-size:0.8461538461538461em; | |
| line-height:1.8181818181818181; | |
| } | |
| .muted{ | |
| color:#999; | |
| } | |
| ul.unstyled-list{ | |
| list-style:none; | |
| margin-left:0; | |
| } | |
| ul.disc-list{ | |
| list-style-type:disc; | |
| } | |
| ul.numbered-list{ | |
| list-style:decimal outside; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="row page-title"> | |
| <div class="island"> | |
| <figure class="page-mast car-details"> | |
| <div class="car-specs body"> | |
| <div class="vehicle-primary-info"> | |
| <div class="island"> | |
| <span class="heading span-one">Approved Used, 2008 '61'</span> | |
| <span class="heading span-two">Land Rover Defender 90 SWB Diesel XS Station Wagon TDCI</span> | |
| <ul class="nav segregated"> | |
| <li>Orkney Grey</li> | |
| <li>4dr</li> | |
| <li>Van</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <dl class="vehicle-secondary-info"> | |
| <dt class="vehicle-price">Price</dt> | |
| <dd class="island">£18,900</dd> | |
| <dt class="vehicle-mileage">Mileage</dt> | |
| <dd class="island">17,584 miles</dd> | |
| <dt class="vehicle-fuel">Fuel</dt> | |
| <dd class="island">Diesel</dd> | |
| <dt class="vehicle-transmission">Gearbox</dt> | |
| <dd class="island">Automatic</dd> | |
| </dl> | |
| <div class="vehicle-tertiary-info"> | |
| <div class="island vehicle-location"> | |
| <span>Mercedes-Benz of Lincoln and Hull <a href="" class="car-action">Call</a> <a href="" class="car-action">Map</a></span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="spotlight complementary"> | |
| <img src="http://placehold.it/353x232" alt="" class="img"> | |
| </div> | |
| </figure> | |
| <div class="vehicle-media"> | |
| <div class="vehicle-availability-notice"> | |
| <span>This car is currently unavailable</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment