Created
April 19, 2012 10:40
-
-
Save egrouse/2420179 to your computer and use it in GitHub Desktop.
This file contains 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
| $padding: 24px; | |
| html { font-family: "Museo Sans", "Verdana", sans-serif; font-size: 62.5%; height: 100%; overflow-y: scroll; } | |
| body { font-size: 1.2em; line-height: $padding; color: #444; | |
| h1 { border-bottom: 1px solid #ddd; padding-bottom: $padding/4; margin-bottom: $padding/2; } | |
| } | |
| b, strong { color: #000; font-weight: bold; } | |
| h1 { font-size: 1.5em; padding-bottom: $padding/2; } | |
| aside#sidebar { float: left; height: 100%; background: #eee; width: 15%; border-right: 1px solid #ddd; padding-bottom: $padding * 2; | |
| .cont { padding: $padding $padding/2; } | |
| h1 { text-align: center; | |
| a { color: #000; } | |
| } | |
| nav { margin-top: $padding/2; | |
| li { margin: 4px 0; margin: 0 (-$padding/2); margin-bottom: 8px; | |
| a { background: #ddd; display: block; padding: 4px $padding/2; border: 1px solid #ccc; border-width: 1px 0 1px 0;} | |
| ul { margin-top: ( $padding / 4 ) + 2; | |
| li { margin: 0; border-bottom: 1px solid #ddd; font-size: 0.9em; | |
| a { background: none; padding: 0; padding-left: $padding; border: none; } | |
| } | |
| } | |
| } | |
| } | |
| footer { text-align: center; margin-top: -$padding; } | |
| } | |
| section#main { float: left; width: 84%; | |
| p { margin-bottom: $padding/2; } | |
| form { | |
| label { float: left; width: 100px; } | |
| input,textarea { border: 1px solid #ddd; padding: 3px 5px; vertical-align: top; } | |
| textarea { height: 5em; } | |
| .field { height: auto; padding-bottom: $padding/2; clear: both; } | |
| .submit { padding-left: 103px; } | |
| input#unit_colour { color: #fff; text-transform: uppercase; } | |
| input[type=checkbox] { margin-top: 6px; } | |
| } | |
| ul.perms { list-style: disc; | |
| li { margin-left: 20px; } | |
| } | |
| } | |
| table.list { width: 100%; border: 1px solid #ddd; margin-bottom: $padding; | |
| th { text-align: left; font-weight: bold; background: #ccc; } | |
| th, td { padding: 3px 5px; } | |
| td { border-right: 1px solid #eee; } | |
| tr td:last-child { border: none; } | |
| tr:nth-child(odd) { background: #f9f9f9; } | |
| } | |
| .front_end.index #main { width: 100%; } | |
| .front_end.index h1 { border: none; } | |
| .flash { padding: 5px 12px; border: 1px solid #ddd; background: #eee; margin-bottom: $padding; font-size: 1.2em; line-height: 28px; color: #c00; } | |
| .right { float: right; } | |
| .cont { padding: $padding; } | |
| .clr { clear: both; } | |
| a { color: #79e; text-decoration: none; } | |
| a:hover { color: #666; } | |
| ul#homepage { text-align: center; border: 1px solid #eee; width: 964px; margin: 60px auto; height: 480px; position: absolute; top: $padding; left: 50%; margin-left: -482px; | |
| li { float: left; width: 240px; padding: 0; height: 480px; position: relative; border-right: 1px solid #ddd; } | |
| h2 { color: #fff; font-weight: 500; font-size: 1.1em; margin-top: -71px; background: rgba( 0, 0, 0, 0.6 ); position: relative; z-index: 5; padding: 5px; height: 48px; line-height: 48px; width: 231px;} | |
| li#unit-4 { border-right: 0; } | |
| li#unit-4 h2 { line-height: 24px; } | |
| img { position: relative; z-index: 3; width: 241px; height: 141px; } | |
| a.foot { background: #000; color: #fff; position: absolute; bottom: $padding; left: 50%; padding: 5px 0; width: 80px; margin-left: -40px; } | |
| a:hover { color: #999 !important; } | |
| a.foot:hover{ color: #fff !important; background: #999 !important; } | |
| .newspost { position: absolute; width: 192px; top: 335px; | |
| h3 { font-size: 1.2em; margin-bottom: -5px; } | |
| } | |
| .date { color: #999; } | |
| } | |
| body.unit_display { width: 960px; margin: 0 auto; | |
| #main-header { margin-top: 80px; } | |
| #main { width: 960px; | |
| h3 { font-size: 1.2em; border-bottom: 1px solid #ccc; margin-bottom: $padding / 2; } | |
| .item { margin-bottom: $padding; } | |
| } | |
| aside#unit-sidebar { width: 200 - $padding; float: right; | |
| h2 { font-weight: bold; } | |
| p { margin-bottom: $padding / 2; } | |
| } | |
| } | |
| header#main-header { | |
| h1 { text-align: center; font-size: 4em; margin-top: 60px; margin-bottom: -20px; } | |
| nav { text-align: left; | |
| li { display: inline-block; margin-right: -2px; text-align: center; | |
| a { display: block; padding: 0 10px; background: #ddd; color: #000; } | |
| a:hover, a.active { color: #000; background: #ddd; } | |
| } | |
| } | |
| #unit-navigation { height: 24px; | |
| li { float: left; display: block; margin-right: 1px; } | |
| li.active, li:hover { padding: 0; } | |
| li.active a, li:hover a { padding-bottom: 4px; position: relative; top: -4px; } | |
| } | |
| nav#page-navigation { margin-bottom: $padding; float: right; margin-right: -1px; | |
| li { float: left; margin-right: 1px; } | |
| a { position: relative; } | |
| a:hover, a.active { padding-top: 4px; top: 0; } | |
| } | |
| div#unit-header { height: 210px; background: #ddd; width: 100%; padding: 5px; width: 950px; position: relative; | |
| h2 { position: absolute; bottom: 5px; color: #fff; font-size: 2.4em; background: rgba( 0, 0, 0, 0.6 ); padding: 10px; width: 730px; } | |
| } | |
| img#logo { position: absolute; top: 5px; right: 5px; background: rgba( 0, 0, 0, 0.6 ); padding: 30px 30px 30px 34px; } | |
| } | |
| // Contact form | |
| body.contact { | |
| aside#contact-form { float: right; width: 300px; } | |
| section#main { width: 660px - $padding * 2; } | |
| } | |
| body.unit_display.page { | |
| form { | |
| .field { margin-bottom: 6px; } | |
| label { float: left; width: 80px; padding: 0px 0; } | |
| input { border: 1px solid #ccc; width: 206px; padding: 5px; } | |
| textarea{ border: 1px solid #ccc; width: 206px; height: 70px; margin-top: 2px; padding: 5px; } | |
| .submit { padding-left: 80px; | |
| input { width: 218px; } | |
| } | |
| } | |
| #main { padding-bottom: 60px; } | |
| } | |
| body.unit_display.index, body.unit_display.news_post, body.unit_display.page.cases, body.unit_display.case_study { | |
| #main { width: 660px - $padding * 2; } | |
| aside#latest-news { width: 300px; float: right; padding-bottom: 40px; | |
| h1 { display: none; } | |
| h2 { font-size: 1.1em; border-bottom: 1px solid #ddd; margin-bottom: 8px; padding-bottom: 6px; | |
| span { color: #999; float: right; } | |
| } | |
| .content { margin-bottom: $padding; } | |
| } | |
| } | |
| .cke_skin_kama { float: left; clear: right; margin-bottom: $padding / 2; } | |
| body.unit_display.index, body.unit_display.page, body.unit_display.news_post, body.unit_display.page.cases, body.unit_display.case_study { height: 100%; margin: 0 auto; padding: 0; | |
| footer#main-footer { clear: both; border-top: 1px solid #ddd; width: 600px; margin: 0 auto; text-align: center; margin-top: -40px; color: #999; | |
| a { color: #666; } | |
| } | |
| #wrapper { min-height: 100%; } | |
| #main-header { margin: 0; padding-top: 60px;} | |
| } | |
| body.unit_display.news_post { | |
| h1 span { float: right; color: #999; } | |
| } | |
| h1 a.toggle-box { float:right; width: 20px; height: 20px; text-indent: -50px; overflow: hidden; background: transparent url( 'arrow-sprite.png'); background-position: 0 -20px; } | |
| .hidden h1 a.toggle-box { background-position: 0 0; } | |
| .tooltip { position: relative; | |
| a { margin-left: 4px; } | |
| .detail { position: absolute; top: 18px; left: -10px; font-size: 0.9em; min-width: 250px; background: #ddd; padding: 8px; line-height: 1.4em; font-weight: normal; border: 1px solid #ddd; box-shadow: #888 2px 2px 5px; display: none; z-index: 999; | |
| h4 { font-weight: bold; margin-bottom: 5px; font-size: 1.1em; color: #666; } | |
| p { margin: 0 !important; } | |
| } | |
| } | |
| div.case_study { position: relative; height: auto; margin-bottom: $padding; | |
| .img { float: left; margin-right: $padding / 2; } | |
| img { width: 160px; } | |
| a.readmore { position: absolute; bottom: $padding / 2; left: 160px + $padding / 2; } | |
| } | |
| aside#side { width: 300px; float: right; padding-bottom: 40px; } | |
| dl#case-info { padding-top: $padding / 2; | |
| dt { width: 120px; float: left; font-weight: bold; } | |
| dd { margin-left: 120px; } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment