├── README.markdown ├── config.rb ├── css ├── forms.css ├── ie.css ├── layout.css ├── print.css ├── style.css └── tabs.css ├── dgd7.info ├── images ├── apple-touch-icon.png ├── dgd7-cover.jpg ├── sprite.png ├── sprite │ ├── check-lrg.png │ ├── comment.png │ ├── down.png │ ├── druplicon.png │ ├── home.png │ ├── left.png │ ├── link.png │ ├── locked.png │ ├── logo.mobile.png │ ├── logo.png │ ├── minus.png │ ├── page.png │ ├── plus.png │ ├── popout.png │ ├── printer.png │ ├── reference.css │ ├── right.png │ ├── search.png │ ├── up.png │ ├── user.png │ ├── warning-lrg.png │ ├── x-lrg.png │ └── x.png └── throbber.gif ├── sass ├── forms.scss ├── ie.scss ├── layout.scss ├── print.scss ├── style.scss └── tabs.scss ├── screenshot.png ├── template.php └── templates ├── book-export-html.tpl.php ├── book-navigation.tpl.php ├── comment-wrapper.tpl.php ├── comment.tpl.php ├── field.tpl.php ├── html.tpl.php ├── node--book--compact.tpl.php ├── node--profile--compact.tpl.php ├── node.tpl.php ├── page.tpl.php ├── user-picture.tpl.php └── views-view-list.tpl.php /README.markdown: -------------------------------------------------------------------------------- 1 | # What's here? 2 | 3 | This theme was created to accompany the theming chapters (15 and 16) in 4 | [The Definitive Guide to Drupal 7](http://definitivedrupal.org). It's currently running on http://definitivedrupal.org and includes examples of: 5 | 6 | * General setup and customized Global Theme Settings (see pages 275-281). 7 | * Custom region implementation (see pages 282-292). 8 | * Template file overrides (see pages 293-301). 9 | * Theme function overrides (see pages 301-304). 10 | * Theme hook suggestions implementations (304-310). 11 | * Preprocess and process function implementations (see pages 313-321). 12 | * Alter hook implementations (see pages 321-327). 13 | * render(), hide(), and show() (see pages 327-329). 14 | * Advanced loading and removal of Stylesheets (see 341-347). 15 | 16 | You can purchase the book, which contains **way** more than a couple of chapters on theme development here: http://definitivedrupal.org/purchase. It's over 1,000 pages, was written by lots of Drupal rockstars, and covers so many aspects of Drupal 7 development. 17 | 18 | # Disclaimers 19 | 20 | ## I am NOT a web designer 21 | 22 | This is probably really obvious from viewing the site. This theme was created with 3 goals in mind: 23 | 24 | 1. Illustrate as many useful theming examples as possible. 25 | 2. Make it look decent. 26 | 3. Have fun with CSS3 and not care at all about older browsers. 27 | 28 | It's not perfect, and doesn't claim to be, but if you are trying to learn Drupal 7 theming in more detail, it should be helpful. 29 | 30 | ## Sass/Compass 31 | 32 | The CSS in this theme was written using Sass and Compass. The source is located in the "sass" directory and is ultimately complied into the "css" directory. In this case, existing code was quickly converted to Compass syntax, because I hate writing CSS3 without it and it's got lots of awesome utilities that make it a lot easier and faster to write CSS in general. Unfortunately, the time that I can spend on this has run out, but if I were to continue working on this theme (or had used SASS from the start), I would have made partials, mixins, sprites and more variables. 33 | 34 | To learn more about using SASS and Compass + Drupal, I highly recommend checking out all of the following resources: 35 | 36 | * [Sass](http://sass-lang.com) 37 | * [Compass](http://compass-style.org) 38 | * [The Sass Way](http://thesassway.com) 39 | * [The Coding Designer's Survival Kit](http://thecodingdesigner.com) 40 | * [The Coding Designer's Survival Kit (Drupal project)](http://drupal.org/project/survivalkit) 41 | 42 | ## Mobile Friendliness 43 | 44 | While this theme contains media queries that manipulate the layout so that it is easier to read on small screens, it's by no means meant to be an example of how to create a complete and robust mobile experience or responsive design and doesn't work where media queries are not supported. It's just a quick attempt to make it more mobile friendly as others have done: http://bit.ly/n3kqsJ. 45 | 46 | To learn more about making mobile friendly and responsive websites, here are some good resources and some code: 47 | 48 | * [Responsive Web Design (article)](http://www.alistapart.com/articles/responsive-web-design/) 49 | * [Responsive Web Design (book)](http://www.abookapart.com/products/responsive-web-design) 50 | * [HTML5 Mobile Boilerplate](http://html5boilerplate.com/mobile/) 51 | * [css3-mediaqueries.js](http://code.google.com/p/css3-mediaqueries-js/) 52 | * [respond.js](https://github.com/scottjehl/Respond) 53 | * [Responsive Images](https://github.com/filamentgroup/Responsive-Images) 54 | 55 | # More documentation 56 | 57 | There are many resources available, some of which are linked throughout the code comments and in this file. There's also plenty of official documentation on http://drupal.org: 58 | 59 | * [Theming Guide](http://drupal.org/theme-guide/6-7) 60 | * [Drupal API Documentation](http://api.drupal.org) 61 | * [A log of changes from Drupal 6 to Drupal 7](http://drupal.org/update/themes/6/7) 62 | 63 | # Tools 64 | 65 | Below is a collection of the tools/apps that I use on a daily basis and find invaluable. Maybe you will too. 66 | 67 | ## General 68 | 69 | * This theme was partially written in [TextMate](http://macromates.com) and [Espresso](http://macrabbit.com/espresso/) on Mac OS X. 70 | * I use [Google Chrome](http://www.google.com/chrome) for development. 71 | * I use [LiveReload](http://livereload.com) to automatically refresh my browser windows while I code. 72 | * I use [MAMP](http://www.mamp.info) for my local development environment. 73 | * I use [xDebug](http://xdebug.org) which gives very helpful stack traces when an error occurs. 74 | * I use [VMware Fusion](http://www.vmware.com/products/fusion/overview.html) and 3 virtual machines for cross-browser testing. 75 | * I use [VirtualHostX](http://clickontyler.com/virtualhostx) to easily setup local sites. 76 | * I use [Tower](http://www.git-tower.com) for version control. 77 | * I use [Colloquy](http://colloquy.info) to hang out and chat with other developers and frequent #drupal, #drupal-contribute, #drupal-html5 and #html5 on [IRC](http://drupal.org/irc). 78 | 79 | ## Drupal-specific 80 | 81 | * I use [Devel](http://drupal.org/project/devel) religiously while theming to print the contents of arrays/objects using dpm(). 82 | * I use [Drush](http://drupal.org/project/drush) constantly during development (especially to clear the cache). 83 | * I use the [Design test](http://drupal.org/project/design) and [Style Guide](http://drupal.org/project/styleguide) modules which contain test pages with lots of different output to help ensure that I don't miss styling anything important when creating themes. 84 | 85 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /config.rb: -------------------------------------------------------------------------------- 1 | # Require any additional compass plugins here. 2 | 3 | # Set this to the root of your project when deployed: 4 | http_path = "/" 5 | css_dir = "css" 6 | sass_dir = "sass" 7 | images_dir = "images" 8 | javascripts_dir = "js" 9 | 10 | # You can select your preferred output style here (can be overridden via the command line): 11 | # output_style = :expanded or :nested or :compact or :compressed 12 | 13 | # To enable relative paths to assets via compass helper functions. Uncomment: 14 | # relative_assets = true 15 | 16 | # To disable debugging comments that display the original location of your selectors. Uncomment: 17 | line_comments = false 18 | 19 | 20 | # If you prefer the indented syntax, you might want to regenerate this 21 | # project again passing --syntax sass, or you can uncomment this: 22 | # preferred_syntax = :sass 23 | # and then run: 24 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass 25 | -------------------------------------------------------------------------------- /css/forms.css: -------------------------------------------------------------------------------- 1 | /* This CSS was written using SASS and Compass. 2 | * @see http://compass-style.org/ 3 | -----------------------------------------------------------------------------*/ 4 | /* HTML5 Boilerplate goodies. 5 | * @see https://github.com/paulirish/html5-boilerplate/blob/master/css/style.css#L132 6 | -----------------------------------------------------------------------------*/ 7 | form { 8 | clear: both; 9 | font-family: "Droid Sans", "Lucida Grande", Helvetica, Arial, sans-serif; 10 | margin: 0; 11 | } 12 | 13 | fieldset { 14 | border: solid 1px #ddd; 15 | padding: 1em; 16 | margin: 0 0 1em 0; 17 | } 18 | 19 | label { 20 | cursor: pointer; 21 | display: block; 22 | font-weight: bold; 23 | line-height: 2; 24 | } 25 | label.option { 26 | font-weight: normal; 27 | display: inline; 28 | } 29 | 30 | legend { 31 | border: 0; 32 | font-weight: bold; 33 | *margin-left: -7px; 34 | padding: 0; 35 | } 36 | 37 | button, 38 | input, 39 | select, 40 | textarea { 41 | font-family: "Lucida Grande", Tahoma, Verdana, sans-serif; 42 | font-size: 100%; 43 | margin: 0; 44 | vertical-align: baseline; 45 | *vertical-align: middle; 46 | } 47 | 48 | button, 49 | input { 50 | line-height: normal; 51 | *overflow: visible; 52 | } 53 | 54 | table button, 55 | table input { 56 | *overflow: auto; 57 | } 58 | table button .form-item, 59 | table input .form-item { 60 | margin: 0; 61 | } 62 | 63 | button, 64 | input[type="button"], 65 | input[type="reset"], 66 | input[type="submit"] { 67 | cursor: pointer; 68 | -webkit-appearance: button; 69 | } 70 | 71 | input[type="checkbox"], 72 | input[type="radio"] { 73 | box-sizing: border-box; 74 | padding: 0; 75 | } 76 | 77 | input[type="search"] { 78 | -webkit-appearance: textfield; 79 | -moz-box-sizing: content-box; 80 | -webkit-box-sizing: content-box; 81 | -ms-box-sizing: content-box; 82 | box-sizing: content-box; 83 | } 84 | 85 | input[type="search"]::-webkit-search-decoration { 86 | -webkit-appearance: none; 87 | } 88 | 89 | button::-moz-focus-inner, 90 | input::-moz-focus-inner { 91 | border: 0; 92 | padding: 0; 93 | } 94 | 95 | textarea { 96 | overflow: auto; 97 | vertical-align: top; 98 | resize: vertical; 99 | } 100 | 101 | input:invalid, 102 | textarea:invalid { 103 | background-color: #f0dddd; 104 | } 105 | 106 | /* Wrappers 107 | ------------------------------------------------------------------------------*/ 108 | .form-item { 109 | margin: 0 0 20px 0; 110 | } 111 | .form-item .form-item { 112 | margin: 0 0 4px 0; 113 | } 114 | 115 | .form-actions { 116 | padding-top: 1em; 117 | } 118 | 119 | .container-inline .form-item { 120 | margin-right: 1em; 121 | } 122 | 123 | textarea, 124 | input:not([type="submit"]) { 125 | border: solid 1px #ddd; 126 | padding: 6px; 127 | -moz-border-radius: 4px; 128 | -webkit-border-radius: 4px; 129 | -o-border-radius: 4px; 130 | -ms-border-radius: 4px; 131 | -khtml-border-radius: 4px; 132 | border-radius: 4px; 133 | } 134 | 135 | textarea:focus, 136 | input:not([type="submit"]):focus { 137 | background-color: #eee; 138 | } 139 | 140 | input[size="60"] { 141 | max-width: 100%; 142 | -moz-box-sizing: border-box; 143 | -webkit-box-sizing: border-box; 144 | -ms-box-sizing: border-box; 145 | box-sizing: border-box; 146 | } 147 | 148 | select { 149 | border: solid 1px #ddd; 150 | } 151 | 152 | .resizable-textarea textarea { 153 | -moz-border-radius: 4px 4px 0 0; 154 | -webkit-border-radius: 4px 4px 0 0; 155 | -o-border-radius: 4px 4px 0 0; 156 | -ms-border-radius: 4px 4px 0 0; 157 | -khtml-border-radius: 4px 4px 0 0; 158 | border-radius: 4px 4px 0 0; 159 | } 160 | 161 | .filter-wrapper { 162 | padding-top: 0.5em; 163 | } 164 | .filter-wrapper .form-item { 165 | margin: 0; 166 | } 167 | .filter-wrapper ul.tips { 168 | padding: 0 0 0 20px; 169 | } 170 | .filter-wrapper ul.tips li { 171 | list-style: disc; 172 | } 173 | .filter-wrapper ul.tips code { 174 | font-size: 0.923em; 175 | } 176 | 177 | html.js input.form-autocomplete { 178 | background-image: url(../images/throbber.gif); 179 | background-position: 99% 6px; 180 | } 181 | html.js input.form-autocomplete.throbbing { 182 | background-position: 99% -17px; 183 | } 184 | 185 | button, 186 | input[type="submit"], 187 | .form-actions > a, 188 | .form-actions > a:visited { 189 | background-color: #444; 190 | background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #222222), color-stop(70%, #444444)); 191 | background-image: -webkit-linear-gradient(top, #222222 40%, #444444 70%); 192 | background-image: -moz-linear-gradient(top, #222222 40%, #444444 70%); 193 | background-image: -o-linear-gradient(top, #222222 40%, #444444 70%); 194 | background-image: -ms-linear-gradient(top, #222222 40%, #444444 70%); 195 | background-image: linear-gradient(top, #222222 40%, #444444 70%); 196 | border: solid 1px #444; 197 | color: #fff; 198 | line-height: 2; 199 | height: 2em; 200 | padding: 0 1em; 201 | margin: 0 0.5em; 202 | vertical-align: baseline; 203 | -moz-border-radius: 4px; 204 | -webkit-border-radius: 4px; 205 | -o-border-radius: 4px; 206 | -ms-border-radius: 4px; 207 | -khtml-border-radius: 4px; 208 | border-radius: 4px; 209 | display: -moz-inline-box; 210 | -moz-box-orient: vertical; 211 | display: inline-block; 212 | vertical-align: middle; 213 | *vertical-align: auto; 214 | } 215 | button, 216 | input[type="submit"], 217 | .form-actions > a, 218 | .form-actions > a:visited { 219 | *display: inline; 220 | } 221 | button:first-child, 222 | input[type="submit"]:first-child, 223 | .form-actions > a:first-child, 224 | .form-actions > a:visited:first-child { 225 | margin-left: 0; 226 | } 227 | 228 | .form-required, 229 | .tabledrag-changed { 230 | color: #d44510; 231 | margin: 0.25em; 232 | } 233 | 234 | .description, 235 | .fieldset-description { 236 | color: #888; 237 | font-family: "Lucida Sans Unicode", "Lucida Grande", Tahoma, Verdana, sans-serif; 238 | font-style: italic; 239 | } 240 | 241 | .description { 242 | font-size: 0.923em; 243 | line-height: 1.4; 244 | padding: 0.5em 0; 245 | } 246 | 247 | div.form-item div.password-suggestions { 248 | background-color: #f8f8f8; 249 | border-color: #eee; 250 | color: #000; 251 | font-size: 1em; 252 | padding: 1em; 253 | } 254 | 255 | .outer .form-item { 256 | margin: 0; 257 | } 258 | 259 | .two-column .form-item { 260 | padding-left: 160px; 261 | position: relative; 262 | } 263 | .two-column .form-item .form-item { 264 | padding-left: 0; 265 | } 266 | .two-column .form-item .form-item label { 267 | position: relative; 268 | } 269 | .two-column .form-item label { 270 | position: absolute; 271 | left: 0; 272 | } 273 | 274 | .vertical-tabs .element-invisible { 275 | border: 0; 276 | height: 1px; 277 | margin: -1px; 278 | overflow: hidden; 279 | padding: 0; 280 | width: 1px; 281 | } 282 | .vertical-tabs .element-invisible.element-focusable:active, .vertical-tabs .element-invisible.element-focusable:focus { 283 | position: static !important; 284 | height: auto; 285 | margin: auto; 286 | overflow: visible; 287 | width: auto; 288 | } 289 | 290 | /* Lil screens 291 | -----------------------------------------------------------------------------*/ 292 | @media screen and (min-width: 320px) and (max-width: 480px) { 293 | div.vertical-tabs { 294 | margin: 1em 0; 295 | } 296 | div.vertical-tabs ul.vertical-tabs-list { 297 | border-top: none; 298 | float: none; 299 | *zoom: 1; 300 | width: 100%; 301 | clear: both; 302 | margin: 0; 303 | } 304 | div.vertical-tabs ul.vertical-tabs-list:after { 305 | content: ""; 306 | display: table; 307 | clear: both; 308 | } 309 | div.vertical-tabs ul.vertical-tabs-list li { 310 | border-width: 0 0 1px 0; 311 | } 312 | } 313 | -------------------------------------------------------------------------------- /css/ie.css: -------------------------------------------------------------------------------- 1 | /* 2 | Dear old versions of IE, 3 | I'm sorry, but I don't have time for you right now. 4 | Luckily, this book is about Drupal, not cross-browser 5 | compatibility, so basically, you can suck it for once. 6 | Love, 7 | Jacine 8 | */ 9 | -------------------------------------------------------------------------------- /css/layout.css: -------------------------------------------------------------------------------- 1 | /* This CSS was written using SASS and Compass. 2 | * @see http://compass-style.org/ 3 | -----------------------------------------------------------------------------*/ 4 | .container { 5 | *zoom: 1; 6 | } 7 | .container:after { 8 | content: ""; 9 | display: table; 10 | clear: both; 11 | } 12 | .container > :first-child { 13 | width: 90%; 14 | max-width: 1140px; 15 | margin: 0 auto; 16 | position: relative; 17 | } 18 | 19 | .column { 20 | float: left; 21 | display: inline; 22 | position: relative; 23 | } 24 | 25 | .column.main { 26 | width: 100%; 27 | } 28 | 29 | .column-first { 30 | width: 25%; 31 | left: -75%; 32 | } 33 | 34 | .column-second { 35 | float: right; 36 | width: 25%; 37 | } 38 | 39 | .sidebar-first .column.main { 40 | width: 75%; 41 | left: 25%; 42 | } 43 | 44 | .sidebar-second .column.main { 45 | width: 75%; 46 | } 47 | 48 | .two-sidebars .column.main { 49 | width: 50%; 50 | left: 25%; 51 | } 52 | .two-sidebars .column-first { 53 | left: -50%; 54 | } 55 | 56 | @media screen and (min-width: 320px) and (max-width: 480px) { 57 | .container > :first-child, 58 | .column { 59 | float: none; 60 | left: auto; 61 | right: auto; 62 | margin: 0 auto; 63 | min-width: 0; 64 | width: auto; 65 | } 66 | } 67 | @media screen and (min-width: 768px) and (max-width: 1024px) { 68 | .container { 69 | *zoom: 1; 70 | } 71 | .container:after { 72 | content: ""; 73 | display: table; 74 | clear: both; 75 | } 76 | .container > :first-child { 77 | width: 100%; 78 | max-width: none; 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /css/print.css: -------------------------------------------------------------------------------- 1 | /* This CSS was written using SASS and Compass. 2 | * @see http://compass-style.org/ 3 | -----------------------------------------------------------------------------*/ 4 | body { 5 | font-family: "Droid Serif", Georgia, Verdana, Arial, sans-serif; 6 | font-size: 11pt; 7 | line-height: 1.6; 8 | margin: 0 auto; 9 | padding: 25px 0; 10 | width: 90%; 11 | } 12 | 13 | article, aside, details, figcaption, figure, footer, header, hgroup, 14 | menu, nav, section { 15 | display: block; 16 | } 17 | 18 | a { 19 | text-decoration: none; 20 | -moz-transition-property: all; 21 | -webkit-transition-property: all; 22 | -o-transition-property: all; 23 | transition-property: all; 24 | -moz-transition-duration: 0.3s; 25 | -webkit-transition-duration: 0.3s; 26 | -o-transition-duration: 0.3s; 27 | transition-duration: 0.3s; 28 | -moz-transition-timing-function: linear; 29 | -webkit-transition-timing-function: linear; 30 | -o-transition-timing-function: linear; 31 | transition-timing-function: linear; 32 | } 33 | 34 | blockquote, p { 35 | margin: 1.5em 0; 36 | } 37 | 38 | p:first-child, 39 | p.first-child { 40 | margin-top: 0; 41 | } 42 | 43 | img { 44 | border: none; 45 | } 46 | 47 | abbr, acronym { 48 | border-bottom: 1px dotted; 49 | cursor: help; 50 | white-space: nowrap; 51 | } 52 | 53 | pre, code, kbd, samp, tt { 54 | font-family: monospace, monospace; 55 | _font-family: 'courier new', monospace; 56 | font-size: 1em; 57 | } 58 | 59 | pre { 60 | background-color: #eee; 61 | border: solid 1px #ddd; 62 | padding: 1em; 63 | white-space: pre-wrap; 64 | } 65 | 66 | blockquote { 67 | font-family: "Droid Serif", Georgia, Verdana, Arial, sans-serif; 68 | font-style: italic; 69 | } 70 | 71 | mark { 72 | font-size: 0.769em; 73 | } 74 | 75 | /* Layout 76 | -------------------------------------------------------------------------*/ 77 | #toolbar, 78 | header[role="banner"], 79 | footer[role="contentinfo"], 80 | div.tabs, 81 | nav, 82 | form, 83 | .comment-form, 84 | div.sidebar, 85 | div.breadcrumb { 86 | display: none !important; 87 | } 88 | 89 | body div.column.main { 90 | display: block !important; 91 | width: 100% !important; 92 | left: 0 !important; 93 | right: auto !important; 94 | } 95 | 96 | body.toolbar-drawer { 97 | padding-top: 0 !important; 98 | } 99 | 100 | /* Headings 101 | -------------------------------------------------------------------------*/ 102 | h1, h2, h3, h4, h5, h6 { 103 | font-weight: 400; 104 | line-height: 1em; 105 | padding: 0; 106 | margin: 24px 0 12px 0; 107 | } 108 | 109 | h1 { 110 | font-size: 2.153em; 111 | } 112 | 113 | h2 { 114 | font-size: 1.692em; 115 | } 116 | 117 | h3 { 118 | font-size: 1.385em; 119 | } 120 | 121 | h4 { 122 | font-size: 1.231em; 123 | } 124 | 125 | h5 { 126 | font-size: 1.077em; 127 | } 128 | 129 | h6 { 130 | font-size: 1em; 131 | } 132 | 133 | h1.book-heading { 134 | border-bottom: solid 1px #ddd; 135 | padding-bottom: 0.4em; 136 | } 137 | 138 | /* Lists 139 | -------------------------------------------------------------------------*/ 140 | dl { 141 | margin: 1em 0; 142 | padding: 1em; 143 | } 144 | 145 | dt { 146 | font-size: 1.231em; 147 | } 148 | 149 | dd { 150 | margin: 0 0 0.5em 0; 151 | padding: 1em 0 1em 2em; 152 | } 153 | 154 | dd:last-child { 155 | border-bottom: 0; 156 | } 157 | 158 | dl dl { 159 | margin-left: 1em; 160 | } 161 | 162 | ul, ol { 163 | padding: 0; 164 | margin: 0 0 0 1.5em; 165 | } 166 | 167 | li { 168 | margin: 0; 169 | padding: 0; 170 | } 171 | 172 | ul.inline, 173 | .inline .content ul { 174 | display: inline; 175 | margin-left: 0; 176 | } 177 | 178 | ul.inline li, 179 | .inline .content li { 180 | display: inline; 181 | margin: 0 0.5em 0 0; 182 | } 183 | 184 | li p { 185 | margin-top: 0; 186 | } 187 | 188 | /* Tables 189 | -------------------------------------------------------------------------*/ 190 | table { 191 | border: solid #e4e2e0; 192 | border-collapse: collapse; 193 | border-width: 1px 1px 0 1px; 194 | margin: 1em 0; 195 | width: 100%; 196 | } 197 | 198 | th { 199 | font-weight: 600; 200 | text-align: left; 201 | } 202 | 203 | th, td { 204 | border: solid #e4e2e0; 205 | border-width: 0 0 1px 0; 206 | padding: 0.5em; 207 | vertical-align: top; 208 | } 209 | 210 | thead th:last-child, 211 | tr td:last-child { 212 | border-right: solid 1px #e4e2e0; 213 | } 214 | 215 | table .form-item, 216 | table p { 217 | margin: 0; 218 | } 219 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | /* This CSS was written using SASS and Compass. 2 | * @see http://compass-style.org/ 3 | -----------------------------------------------------------------------------*/ 4 | html { 5 | background-color: #ffcc00; 6 | } 7 | 8 | body { 9 | background-color: #111; 10 | color: #444; 11 | font-family: "Droid Sans", "Lucida Grande", Helvetica, Arial, sans-serif; 12 | font-size: 81.3%; 13 | line-height: 1.6; 14 | margin: 0; 15 | padding: 0; 16 | } 17 | 18 | p { 19 | font-size: 1.077em; 20 | } 21 | 22 | a, 23 | a:visited { 24 | color: #3399cc; 25 | text-decoration: none; 26 | -moz-transition-property: none; 27 | -webkit-transition-property: none; 28 | -o-transition-property: none; 29 | transition-property: none; 30 | -moz-transition-duration: 1s; 31 | -webkit-transition-duration: 1s; 32 | -o-transition-duration: 1s; 33 | transition-duration: 1s; 34 | } 35 | 36 | a:hover { 37 | text-decoration: underline; 38 | } 39 | 40 | a:hover, 41 | a:focus, 42 | a:active { 43 | outline: none; 44 | } 45 | 46 | img { 47 | -moz-transition-property: all; 48 | -webkit-transition-property: all; 49 | -o-transition-property: all; 50 | transition-property: all; 51 | -moz-transition-duration: 0.3s; 52 | -webkit-transition-duration: 0.3s; 53 | -o-transition-duration: 0.3s; 54 | transition-duration: 0.3s; 55 | -moz-transition-timing-function: ease; 56 | -webkit-transition-timing-function: ease; 57 | -o-transition-timing-function: ease; 58 | transition-timing-function: ease; 59 | } 60 | 61 | h1, h2, h3, h4, h5, h6 { 62 | font-family: "Droid Sans", "Lucida Grande", Helvetica, Arial, sans-serif; 63 | font-weight: 400; 64 | line-height: 1.1; 65 | margin: 0 0 24px 0; 66 | } 67 | 68 | h1 { 69 | font-size: 2.461em; 70 | } 71 | 72 | h2 { 73 | font-size: 1.692em; 74 | } 75 | 76 | h3 { 77 | font-size: 1.385em; 78 | } 79 | 80 | h4 { 81 | font-size: 1.231em; 82 | } 83 | 84 | h5 { 85 | font-size: 1.077em; 86 | } 87 | 88 | h6 { 89 | font-size: 1em; 90 | } 91 | 92 | h1 a, h2 a { 93 | color: #444; 94 | } 95 | h1 a:visited, h2 a:visited { 96 | color: #888; 97 | } 98 | h1 a:hover, h1 a:focus, h1 a:active, h2 a:hover, h2 a:focus, h2 a:active { 99 | color: #d44510; 100 | outline: 0; 101 | text-decoration: underline; 102 | } 103 | 104 | pre, code, kbd, samp, tt { 105 | font-family: monospace, monospace; 106 | _font-family: 'courier new', monospace; 107 | font-size: 1em; 108 | } 109 | 110 | pre { 111 | background-color: #eee; 112 | border: solid 1px #ddd; 113 | padding: 1em; 114 | white-space: pre-wrap; 115 | } 116 | 117 | blockquote { 118 | font-family: "Droid Serif", Georgia, Verdana, Arial, sans-serif; 119 | font-style: italic; 120 | } 121 | 122 | /* Tables 123 | -----------------------------------------------------------------------------*/ 124 | td 125 | table { 126 | background-color: #fff; 127 | border: solid 1px #eee; 128 | border-bottom: 0; 129 | font-family: "Droid Sans", "Lucida Grande", Helvetica, Arial, sans-serif; 130 | margin: 1em 0; 131 | width: 100%; 132 | } 133 | 134 | thead { 135 | background-color: #333; 136 | color: #fff; 137 | font-size: 0.923em; 138 | } 139 | 140 | tr { 141 | border-bottom: solid 1px #eee; 142 | } 143 | tr.even { 144 | background-color: #f8f8f8; 145 | } 146 | 147 | th { 148 | font-weight: normal; 149 | text-align: left; 150 | } 151 | th a { 152 | color: #ffcc00; 153 | } 154 | 155 | th, td { 156 | padding: 0.5em; 157 | vertical-align: top; 158 | } 159 | 160 | .page-title { 161 | background-color: #222; 162 | color: #fff; 163 | margin: 16px 0 0 0; 164 | padding: 0.7em; 165 | position: relative; 166 | -moz-border-radius: 10px 10px 0 0; 167 | -webkit-border-radius: 10px 10px 0 0; 168 | -o-border-radius: 10px 10px 0 0; 169 | -ms-border-radius: 10px 10px 0 0; 170 | -khtml-border-radius: 10px 10px 0 0; 171 | border-radius: 10px 10px 0 0; 172 | } 173 | 174 | .region-content { 175 | background-color: #fff; 176 | color: #444; 177 | font-family: "Droid Serif", Georgia, Verdana, Arial, sans-serif; 178 | padding: 20px; 179 | margin: 0 0 16px 0; 180 | -moz-border-radius: 0 0 10px 10px; 181 | -webkit-border-radius: 0 0 10px 10px; 182 | -o-border-radius: 0 0 10px 10px; 183 | -ms-border-radius: 0 0 10px 10px; 184 | -khtml-border-radius: 0 0 10px 10px; 185 | border-radius: 0 0 10px 10px; 186 | } 187 | .region-content .block { 188 | background-color: #fff; 189 | } 190 | 191 | .no-title .region-content { 192 | -moz-border-radius: 10px; 193 | -webkit-border-radius: 10px; 194 | -o-border-radius: 10px; 195 | -ms-border-radius: 10px; 196 | -khtml-border-radius: 10px; 197 | border-radius: 10px; 198 | } 199 | 200 | /* Lists 201 | -----------------------------------------------------------------------------*/ 202 | ol, ul, li { 203 | margin: 0; 204 | padding: 0; 205 | list-style: none; 206 | } 207 | 208 | li.row { 209 | list-style: none; 210 | margin: 0 0 45px 0; 211 | padding: 0; 212 | } 213 | 214 | .content ul, 215 | .content ol { 216 | margin: 1em 0; 217 | padding: 0; 218 | } 219 | .content ul li, 220 | .content ol li { 221 | list-style: disc; 222 | margin: 0 0 5px 30px; 223 | padding: 0; 224 | } 225 | 226 | dt { 227 | font-family: "Droid Sans", "Lucida Grande", Helvetica, Arial, sans-serif; 228 | font-size: 1.231em; 229 | } 230 | 231 | dd { 232 | margin: 1em; 233 | } 234 | 235 | .feed-icon { 236 | position: absolute; 237 | top: 1em; 238 | right: 1em; 239 | } 240 | 241 | /* Fields 242 | -----------------------------------------------------------------------------*/ 243 | .views-field-title { 244 | font-size: 1.231em; 245 | } 246 | .views-field-title a { 247 | color: #676; 248 | } 249 | 250 | div[class^=field-] { 251 | margin-top: 20px; 252 | padding: 0; 253 | } 254 | div[class^=field-] h2, div[class^=field-] h3 { 255 | margin-bottom: 6px; 256 | text-shadow: 1px 1px 1px #fff; 257 | } 258 | 259 | div.field-tags ul { 260 | display: inline; 261 | margin-left: 0; 262 | } 263 | div.field-tags ul li { 264 | display: inline; 265 | padding-left: 0; 266 | margin-right: 5px; 267 | } 268 | 269 | /* Breadcrumbs 270 | -----------------------------------------------------------------------------*/ 271 | .breadcrumb-wrapper { 272 | color: #000; 273 | float: left; 274 | text-transform: lowercase; 275 | width: 75%; 276 | } 277 | .breadcrumb-wrapper .breadcrumb { 278 | padding: 1em; 279 | } 280 | .breadcrumb-wrapper a:first-child { 281 | background: transparent url("../images/sprite.png") no-repeat 0 -472px; 282 | display: inline-block; 283 | height: 16px; 284 | margin-left: 0; 285 | text-indent: -999em; 286 | width: 16px; 287 | } 288 | .breadcrumb-wrapper a, 289 | .breadcrumb-wrapper a:visited { 290 | color: #444; 291 | margin: 0 0.25em; 292 | } 293 | 294 | /* Link lists 295 | -----------------------------------------------------------------------------*/ 296 | .inline { 297 | margin-top: 20px; 298 | } 299 | .inline.links { 300 | display: block; 301 | font-family: "Droid Sans", "Lucida Grande", Helvetica, Arial, sans-serif; 302 | text-align: right; 303 | } 304 | .inline li { 305 | list-style-type: none; 306 | padding: 0 0.5em; 307 | vertical-align: middle; 308 | display: -moz-inline-box; 309 | -moz-box-orient: vertical; 310 | display: inline-block; 311 | vertical-align: middle; 312 | *vertical-align: auto; 313 | } 314 | .inline li { 315 | *display: inline; 316 | } 317 | .inline li.first { 318 | padding-left: 0; 319 | } 320 | .inline li.last { 321 | padding-right: 0; 322 | } 323 | 324 | /* Blocks 325 | -----------------------------------------------------------------------------*/ 326 | .block { 327 | padding: 0; 328 | margin-bottom: 1em; 329 | } 330 | .block .content { 331 | padding: 1em; 332 | } 333 | 334 | .main .region { 335 | background-color: #fff; 336 | color: #444; 337 | } 338 | .main .block { 339 | margin: 0; 340 | } 341 | .main .content { 342 | padding: 20px 20px 0 20px; 343 | } 344 | .main p:only-child { 345 | margin: 0; 346 | } 347 | 348 | /* Nodes 349 | -----------------------------------------------------------------------------*/ 350 | .node { 351 | position: relative; 352 | margin-bottom: 3em; 353 | } 354 | .node .username { 355 | background: transparent url("../images/sprite.png") no-repeat -396px -348px; 356 | padding-left: 20px; 357 | font-size: 1.077em; 358 | } 359 | .node .username:hover, .node .username:focus, .node .username:active { 360 | background-image: url("../images/16-39c.png"); 361 | color: #444; 362 | } 363 | .node .content { 364 | margin-top: 1em; 365 | padding: 1em 0; 366 | } 367 | .node .content ul.links { 368 | display: block; 369 | text-align: right; 370 | } 371 | .node .content ul.links a { 372 | color: #666; 373 | } 374 | .node img { 375 | display: block; 376 | margin-top: 1em; 377 | margin-bottom: 1em; 378 | } 379 | .node .icon { 380 | background: transparent url(../images/sprite.png) no-repeat 0 -2000px; 381 | display: inline-block; 382 | height: 1.6em; 383 | vertical-align: middle; 384 | width: 20px; 385 | } 386 | .node .icon:focus, .node .icon:hover { 387 | background-color: url("../images/16-39c.png"); 388 | } 389 | 390 | .node-teaser .content { 391 | border-bottom: solid 1px #eee; 392 | } 393 | 394 | .node-title { 395 | margin-bottom: 10px; 396 | } 397 | 398 | .submitted { 399 | color: #666; 400 | font-family: "Droid Sans", "Lucida Grande", Helvetica, Arial, sans-serif; 401 | margin-bottom: 1em; 402 | } 403 | 404 | .node-readmore .icon { 405 | background-position: -348px -696px; 406 | } 407 | 408 | .comment-add .icon { 409 | background-position: 0 -124px; 410 | } 411 | 412 | .book-add-child .icon { 413 | background-position: 0 -1587px; 414 | } 415 | 416 | .book-printer .icon { 417 | background-position: 0 -1819px; 418 | } 419 | 420 | /* Book navigation 421 | -----------------------------------------------------------------------------*/ 422 | .book-navigation .menu { 423 | border-color: #eee; 424 | } 425 | .book-navigation .menu li { 426 | list-style: disc; 427 | } 428 | .book-navigation .page-links { 429 | background-color: #f8f8f8; 430 | border: solid 1px #eee; 431 | font-family: "Droid Sans", "Lucida Grande", Helvetica, Arial, sans-serif; 432 | font-size: 0.923em; 433 | margin: 1em 0 0 0; 434 | padding: 0.5em; 435 | position: relative; 436 | -moz-border-radius: 4px; 437 | -webkit-border-radius: 4px; 438 | -o-border-radius: 4px; 439 | -ms-border-radius: 4px; 440 | -khtml-border-radius: 4px; 441 | border-radius: 4px; 442 | *zoom: 1; 443 | } 444 | .book-navigation .page-links:after { 445 | content: ""; 446 | display: table; 447 | clear: both; 448 | } 449 | .book-navigation .page-links .icon { 450 | display: -moz-inline-box; 451 | -moz-box-orient: vertical; 452 | display: inline-block; 453 | vertical-align: middle; 454 | *vertical-align: auto; 455 | background-position: -216px -1583px; 456 | float: right; 457 | height: 16px; 458 | width: 16px; 459 | } 460 | .book-navigation .page-links .icon { 461 | *display: inline; 462 | } 463 | .book-navigation .page-links li { 464 | margin: 0; 465 | padding: 0; 466 | } 467 | .book-navigation .page-links a { 468 | padding-left: 20px; 469 | vertical-align: middle; 470 | display: -moz-inline-box; 471 | -moz-box-orient: vertical; 472 | display: inline-block; 473 | vertical-align: middle; 474 | *vertical-align: auto; 475 | } 476 | .book-navigation .page-links a { 477 | *display: inline; 478 | } 479 | .book-navigation .page-links a:hover, .book-navigation .page-links a:active, .book-navigation .page-links a:focus { 480 | color: #3399cc; 481 | text-decoration: none; 482 | } 483 | 484 | /* Skip link 485 | ------------------------------------------------------------------------------*/ 486 | #skip-link { 487 | text-align: center; 488 | } 489 | 490 | #skip-link a { 491 | background: #ffcc00; 492 | color: #000; 493 | padding: 0.7em 1em; 494 | display: -moz-inline-box; 495 | -moz-box-orient: vertical; 496 | display: inline-block; 497 | vertical-align: middle; 498 | *vertical-align: auto; 499 | -moz-border-radius: 0 0 8px 8px; 500 | -webkit-border-radius: 0 0 8px 8px; 501 | -o-border-radius: 0 0 8px 8px; 502 | -ms-border-radius: 0 0 8px 8px; 503 | -khtml-border-radius: 0 0 8px 8px; 504 | border-radius: 0 0 8px 8px; 505 | } 506 | #skip-link a { 507 | *display: inline; 508 | } 509 | 510 | /* Navigation 511 | -----------------------------------------------------------------------------*/ 512 | nav[role=navigation] { 513 | background: #ffcc00; 514 | background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(42%, #ffcc00), color-stop(71%, #e8bb09)); 515 | background-image: -webkit-linear-gradient(top, #ffcc00 42%, #e8bb09 71%); 516 | background-image: -moz-linear-gradient(top, #ffcc00 42%, #e8bb09 71%); 517 | background-image: -o-linear-gradient(top, #ffcc00 42%, #e8bb09 71%); 518 | background-image: -ms-linear-gradient(top, #ffcc00 42%, #e8bb09 71%); 519 | background-image: linear-gradient(top, #ffcc00 42%, #e8bb09 71%); 520 | padding: 0; 521 | text-align: center; 522 | } 523 | 524 | .region-navigation .block { 525 | margin: 0; 526 | padding: 0; 527 | } 528 | .region-navigation h2.block-title { 529 | clip: rect(1px 1px 1px 1px); 530 | clip: rect(1px, 1px, 1px, 1px); 531 | position: absolute !important; 532 | } 533 | .region-navigation .content { 534 | margin: 0; 535 | padding: 0; 536 | } 537 | .region-navigation .content ul { 538 | font-family: "Droid Serif", Georgia, Verdana, Arial, sans-serif; 539 | font-size: 1.385em; 540 | padding: 0.5em 0; 541 | margin: 0; 542 | vertical-align: middle; 543 | display: -moz-inline-box; 544 | -moz-box-orient: vertical; 545 | display: inline-block; 546 | vertical-align: middle; 547 | *vertical-align: auto; 548 | } 549 | .region-navigation .content ul { 550 | *display: inline; 551 | } 552 | .region-navigation .content ul li { 553 | display: inline; 554 | float: left; 555 | position: relative; 556 | margin: 0 1em 0 0; 557 | } 558 | .region-navigation .content a { 559 | color: #000; 560 | padding: 0.35em 0.8em; 561 | vertical-align: middle; 562 | white-space: nowrap; 563 | display: -moz-inline-box; 564 | -moz-box-orient: vertical; 565 | display: inline-block; 566 | vertical-align: middle; 567 | *vertical-align: auto; 568 | -moz-border-radius: 10px; 569 | -webkit-border-radius: 10px; 570 | -o-border-radius: 10px; 571 | -ms-border-radius: 10px; 572 | -khtml-border-radius: 10px; 573 | border-radius: 10px; 574 | } 575 | .region-navigation .content a { 576 | *display: inline; 577 | } 578 | .region-navigation .content a:hover, .region-navigation .content a:focus 579 | .region-navigation .content a.active { 580 | background-color: #222; 581 | color: #fff; 582 | text-decoration: none; 583 | } 584 | 585 | /* Messages & Markers 586 | -----------------------------------------------------------------------------*/ 587 | .messages { 588 | background-color: #fff; 589 | color: #000; 590 | font-family: "Droid Serif", Georgia, Verdana, Arial, sans-serif; 591 | } 592 | .messages .content { 593 | background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #f5f5f5), color-stop(70%, #ffffff)); 594 | background-image: -webkit-linear-gradient(top, #f5f5f5 40%, #ffffff 70%); 595 | background-image: -moz-linear-gradient(top, #f5f5f5 40%, #ffffff 70%); 596 | background-image: -o-linear-gradient(top, #f5f5f5 40%, #ffffff 70%); 597 | background-image: -ms-linear-gradient(top, #f5f5f5 40%, #ffffff 70%); 598 | background-image: linear-gradient(top, #f5f5f5 40%, #ffffff 70%); 599 | border-top: solid 1px #777; 600 | border-bottom: solid 1px #ddd; 601 | color: #000; 602 | font-size: 1.077em; 603 | margin: 0; 604 | padding: 1em 1em 0.8em 1em; 605 | } 606 | .messages p:first-child { 607 | margin-top: 0; 608 | } 609 | 610 | .message-title { 611 | padding: 0.4em; 612 | margin: 0; 613 | } 614 | .message-title .icon { 615 | background: url(../images/sprite.png) no-repeat 0 0; 616 | display: block; 617 | float: left; 618 | height: 24px; 619 | margin-right: 0.5em; 620 | width: 24px; 621 | } 622 | 623 | .status { 624 | background: #248625; 625 | color: #fff; 626 | } 627 | 628 | .warning { 629 | background: #ffcc00; 630 | } 631 | .warning .icon { 632 | background-position: -396px -464px; 633 | } 634 | 635 | .error { 636 | background-color: #a80f08; 637 | color: #fff; 638 | } 639 | .error .icon { 640 | background-position: -396px -720px; 641 | } 642 | 643 | span.marker { 644 | background-color: #d44510; 645 | color: #fff; 646 | float: left; 647 | line-height: 1.3; 648 | padding: 0 0.3em; 649 | margin-right: 0.4em; 650 | display: -moz-inline-box; 651 | -moz-box-orient: vertical; 652 | display: inline-block; 653 | vertical-align: middle; 654 | *vertical-align: auto; 655 | -moz-border-radius: 4px; 656 | -webkit-border-radius: 4px; 657 | -o-border-radius: 4px; 658 | -ms-border-radius: 4px; 659 | -khtml-border-radius: 4px; 660 | border-radius: 4px; 661 | } 662 | span.marker { 663 | *display: inline; 664 | } 665 | 666 | /* Action links 667 | -----------------------------------------------------------------------------*/ 668 | .action-links { 669 | background-color: #fff; 670 | padding: 1em 0; 671 | } 672 | .action-links li { 673 | padding: 0 1em; 674 | position: relative; 675 | display: -moz-inline-box; 676 | -moz-box-orient: vertical; 677 | display: inline-block; 678 | vertical-align: middle; 679 | *vertical-align: auto; 680 | } 681 | .action-links li { 682 | *display: inline; 683 | } 684 | .action-links a { 685 | display: -moz-inline-box; 686 | -moz-box-orient: vertical; 687 | display: inline-block; 688 | vertical-align: middle; 689 | *vertical-align: auto; 690 | } 691 | .action-links a { 692 | *display: inline; 693 | } 694 | .action-links a:hover { 695 | text-decoration: none; 696 | color: #000; 697 | } 698 | .action-links .icon { 699 | background: transparent url(../images/sprite.png) no-repeat 0 -1587px; 700 | height: 16px; 701 | width: 20px; 702 | display: -moz-inline-box; 703 | -moz-box-orient: vertical; 704 | display: inline-block; 705 | vertical-align: middle; 706 | *vertical-align: auto; 707 | } 708 | .action-links .icon { 709 | *display: inline; 710 | } 711 | .action-links a:hover .icon, 712 | .action-links a:focus .icon { 713 | background-image: url(../images/sprite.png); 714 | } 715 | 716 | /* Pagers 717 | -----------------------------------------------------------------------------*/ 718 | ul.pager { 719 | display: block; 720 | font-family: "Droid Sans", "Lucida Grande", Helvetica, Arial, sans-serif; 721 | margin: 1.5em 0 1em 0; 722 | text-align: right; 723 | } 724 | ul.pager li { 725 | margin: 0.5em 0.2em 0 0; 726 | display: -moz-inline-box; 727 | -moz-box-orient: vertical; 728 | display: inline-block; 729 | vertical-align: middle; 730 | *vertical-align: auto; 731 | } 732 | ul.pager li { 733 | *display: inline; 734 | } 735 | ul.pager a, 736 | ul.pager .pager-current { 737 | background-color: #eee; 738 | padding: 0.2em 0.8em; 739 | display: -moz-inline-box; 740 | -moz-box-orient: vertical; 741 | display: inline-block; 742 | vertical-align: middle; 743 | *vertical-align: auto; 744 | -moz-border-radius: 3px; 745 | -webkit-border-radius: 3px; 746 | -o-border-radius: 3px; 747 | -ms-border-radius: 3px; 748 | -khtml-border-radius: 3px; 749 | border-radius: 3px; 750 | } 751 | ul.pager a, 752 | ul.pager .pager-current { 753 | *display: inline; 754 | } 755 | ul.pager .pager-current { 756 | color: #000; 757 | font-weight: bold; 758 | } 759 | ul.pager a:hover, 760 | ul.pager a:active, 761 | ul.pager a:focus { 762 | background-color: #3399cc; 763 | color: #fff; 764 | text-decoration: none; 765 | } 766 | 767 | /* Comments 768 | -----------------------------------------------------------------------------*/ 769 | .comment-form { 770 | background-color: #fff; 771 | padding: 0; 772 | margin: 1em 0 0 0; 773 | } 774 | .comment-form .form-item label { 775 | display: inline; 776 | } 777 | 778 | .comment-wrapper { 779 | margin-top: 40px; 780 | } 781 | 782 | .comment { 783 | border-top: solid 1px #eee; 784 | padding: 20px 0 20px 110px; 785 | position: relative; 786 | } 787 | .comment h3 { 788 | margin: 0; 789 | } 790 | .comment h3 a, 791 | .comment h3 a:visited { 792 | color: #666; 793 | } 794 | .comment .meta { 795 | margin: 8px 0; 796 | color: #666; 797 | font-size: 0.923em; 798 | } 799 | .comment .content { 800 | margin: 0; 801 | padding: 0; 802 | } 803 | .comment .user-picture { 804 | width: 110px; 805 | position: absolute; 806 | left: 0; 807 | } 808 | .comment .user-picture img { 809 | margin: 0; 810 | } 811 | 812 | /* Clearfix 813 | -----------------------------------------------------------------------------*/ 814 | ul.tabs, 815 | ul.action-links, 816 | .field-item, 817 | .form-item, 818 | .item-list { 819 | *zoom: 1; 820 | } 821 | ul.tabs:after, 822 | ul.action-links:after, 823 | .field-item:after, 824 | .form-item:after, 825 | .item-list:after { 826 | content: ""; 827 | display: table; 828 | clear: both; 829 | } 830 | 831 | /* Header 832 | -----------------------------------------------------------------------------*/ 833 | header[role=banner] { 834 | color: #fff; 835 | padding: 1.6em 1em; 836 | position: relative; 837 | } 838 | 839 | .site-name { 840 | margin: 0; 841 | padding: 0; 842 | } 843 | .site-name a { 844 | display: block; 845 | background: transparent url(../images/sprite.png) no-repeat 0 -1141px; 846 | height: 114px; 847 | text-indent: -999em; 848 | width: 296px; 849 | } 850 | 851 | .site-slogan { 852 | font: 1.231em "Droid Serif", Georgia, Verdana, Arial, sans-serif; 853 | margin-top: 0.5em; 854 | display: -moz-inline-box; 855 | -moz-box-orient: vertical; 856 | display: inline-block; 857 | vertical-align: middle; 858 | *vertical-align: auto; 859 | } 860 | .site-slogan { 861 | *display: inline; 862 | } 863 | 864 | .region-header { 865 | margin: 0; 866 | padding: 0; 867 | position: absolute; 868 | top: 0; 869 | right: 0; 870 | min-width: 260px; 871 | max-width: 50%; 872 | } 873 | .region-header .block { 874 | margin: 0 0 1em 0; 875 | } 876 | 877 | /* Footer 878 | -----------------------------------------------------------------------------*/ 879 | footer[role=contentinfo] { 880 | background: #ffcc00; 881 | color: #444; 882 | -moz-border-radius: 0 50px 0 0; 883 | -webkit-border-radius: 0 50px 0 0; 884 | -o-border-radius: 0 50px 0 0; 885 | -ms-border-radius: 0 50px 0 0; 886 | -khtml-border-radius: 0 50px 0 0; 887 | border-radius: 0 50px 0 0; 888 | } 889 | footer[role=contentinfo] a, 890 | footer[role=contentinfo] a:visited { 891 | color: #000; 892 | } 893 | 894 | .region-footer #block-system-powered-by { 895 | color: #000; 896 | float: right; 897 | margin: 0; 898 | padding: 0; 899 | min-width: 300px; 900 | text-align: right; 901 | width: 25%; 902 | } 903 | .region-footer #block-system-powered-by .content { 904 | padding: 1em 50px 1em 1em; 905 | } 906 | .region-footer #block-system-powered-by .content span { 907 | display: block; 908 | } 909 | .region-footer #block-system-powered-by .content a { 910 | background: transparent url("/misc/druplicon.png") no-repeat; 911 | display: block; 912 | float: right; 913 | height: 100px; 914 | position: relative; 915 | text-align: left; 916 | text-indent: -999em; 917 | top: -65px; 918 | width: 88px; 919 | } 920 | .region-footer .view-authors li { 921 | display: -moz-inline-box; 922 | -moz-box-orient: vertical; 923 | display: inline-block; 924 | vertical-align: middle; 925 | *vertical-align: auto; 926 | margin-right: 0.5em; 927 | margin-bottom: 0.5em; 928 | width: 180px; 929 | } 930 | .region-footer .view-authors li { 931 | *display: inline; 932 | } 933 | 934 | /* Profiles & Bios 935 | -----------------------------------------------------------------------------*/ 936 | .profile h3 { 937 | border: none; 938 | } 939 | .profile .user-picture { 940 | background-color: #222; 941 | padding: 10px; 942 | -moz-border-radius: 4px; 943 | -webkit-border-radius: 4px; 944 | -o-border-radius: 4px; 945 | -ms-border-radius: 4px; 946 | -khtml-border-radius: 4px; 947 | border-radius: 4px; 948 | } 949 | .profile .user-picture .change-user-picture { 950 | display: block; 951 | } 952 | 953 | .field-image img, 954 | .node-profile img, 955 | .view-display-id-biographies img { 956 | border: solid 5px #fff; 957 | -moz-box-shadow: 10px 0 10px rgba(0, 0, 0, 0.2); 958 | -webkit-box-shadow: 10px 0 10px rgba(0, 0, 0, 0.2); 959 | -o-box-shadow: 10px 0 10px rgba(0, 0, 0, 0.2); 960 | box-shadow: 10px 0 10px rgba(0, 0, 0, 0.2); 961 | } 962 | .field-image a:focus img, 963 | .field-image a:hover img, 964 | .field-image img:hover, 965 | .node-profile a:focus img, 966 | .node-profile a:hover img, 967 | .node-profile img:hover, 968 | .view-display-id-biographies a:focus img, 969 | .view-display-id-biographies a:hover img, 970 | .view-display-id-biographies img:hover { 971 | border-color: #3399cc; 972 | } 973 | 974 | .view-display-id-images ul { 975 | padding: 0; 976 | margin: 50px 0; 977 | text-align: center; 978 | display: -moz-inline-box; 979 | -moz-box-orient: vertical; 980 | display: inline-block; 981 | vertical-align: middle; 982 | *vertical-align: auto; 983 | } 984 | .view-display-id-images ul { 985 | *display: inline; 986 | } 987 | .view-display-id-images li { 988 | display: -moz-inline-box; 989 | -moz-box-orient: vertical; 990 | display: inline-block; 991 | vertical-align: middle; 992 | *vertical-align: auto; 993 | margin-bottom: 24px; 994 | text-align: center; 995 | vertical-align: baseline; 996 | width: 180px; 997 | } 998 | .view-display-id-images li { 999 | *display: inline; 1000 | } 1001 | .view-display-id-images img { 1002 | border: solid 4px #eee; 1003 | border-bottom-color: #ccc; 1004 | border-right-color: #ccc; 1005 | } 1006 | 1007 | .view-display-id-biographies li { 1008 | *zoom: 1; 1009 | margin-left: 45px; 1010 | position: relative; 1011 | } 1012 | .view-display-id-biographies li:after { 1013 | content: ""; 1014 | display: table; 1015 | clear: both; 1016 | } 1017 | .view-display-id-biographies img { 1018 | float: left; 1019 | margin: 0 1.231em 0 0; 1020 | } 1021 | 1022 | .node-profile.node-full img { 1023 | width: 98%; 1024 | max-width: 98%; 1025 | width: auto !important; 1026 | display: -moz-inline-box; 1027 | -moz-box-orient: vertical; 1028 | display: inline-block; 1029 | vertical-align: middle; 1030 | *vertical-align: auto; 1031 | -moz-transform: rotate(-1deg); 1032 | -webkit-transform: rotate(-1deg); 1033 | -o-transform: rotate(-1deg); 1034 | -ms-transform: rotate(-1deg); 1035 | transform: rotate(-1deg); 1036 | } 1037 | .node-profile.node-full img { 1038 | *display: inline; 1039 | } 1040 | 1041 | .node-book .field-author { 1042 | *zoom: 1; 1043 | } 1044 | .node-book .field-author:after { 1045 | content: ""; 1046 | display: table; 1047 | clear: both; 1048 | } 1049 | .node-book .field-author ul li { 1050 | margin: 0 0 40px 0; 1051 | list-style: none; 1052 | *zoom: 1; 1053 | } 1054 | .node-book .field-author ul li:after { 1055 | content: ""; 1056 | display: table; 1057 | clear: both; 1058 | } 1059 | .node-book .field-image { 1060 | float: left; 1061 | margin: 0 20px 0 0; 1062 | height: 100%; 1063 | width: 120px; 1064 | } 1065 | .node-book .field-image img { 1066 | margin: 0; 1067 | } 1068 | .node-book .field-do-uid { 1069 | margin-top: 8px; 1070 | } 1071 | .node-book .field-do-uid h3 { 1072 | background: url(../images/sprite.png) no-repeat 0 -356px; 1073 | height: 16px; 1074 | width: 16px; 1075 | text-indent: -999em; 1076 | display: -moz-inline-box; 1077 | -moz-box-orient: vertical; 1078 | display: inline-block; 1079 | vertical-align: middle; 1080 | *vertical-align: auto; 1081 | } 1082 | .node-book .field-do-uid h3 { 1083 | *display: inline; 1084 | } 1085 | .node-book .body { 1086 | float: left; 1087 | } 1088 | 1089 | /* Author chapters 1090 | -----------------------------------------------------------------------------*/ 1091 | div.view-author-chapters h3 { 1092 | margin: 0; 1093 | } 1094 | div.view-author-chapters h3 a:link { 1095 | color: #E8BB09; 1096 | } 1097 | div.view-author-chapters h3 a:visited { 1098 | color: #ccc; 1099 | } 1100 | div.view-author-chapters li.row { 1101 | color: #ccc; 1102 | margin: 0; 1103 | list-style: disc; 1104 | } 1105 | 1106 | /* Highlighted region 1107 | -----------------------------------------------------------------------------*/ 1108 | .main .region-highlight { 1109 | background: #111; 1110 | color: #fff; 1111 | max-width: 960px; 1112 | margin: 0 auto; 1113 | } 1114 | .main .region-highlight .block { 1115 | margin: 20px 0 40px 0; 1116 | } 1117 | .main .region-highlight .block .content, 1118 | .main .region-highlight .block legend { 1119 | padding: 0; 1120 | } 1121 | 1122 | #block-block-1 { 1123 | background: url(../images/dgd7-cover.jpg) no-repeat 0 45px; 1124 | color: #fff; 1125 | font-family: "Droid Serif", Georgia, Verdana, Arial, sans-serif; 1126 | font-size: 1.538em; 1127 | padding: 75px 0 0 290px; 1128 | min-height: 290px; 1129 | } 1130 | 1131 | /* Search box 1132 | -----------------------------------------------------------------------------*/ 1133 | .region-header .block-search .content { 1134 | padding: 0; 1135 | } 1136 | 1137 | .block-search input.form-text { 1138 | padding-right: 24px; 1139 | width: 100%; 1140 | -moz-box-sizing: border-box; 1141 | -webkit-box-sizing: border-box; 1142 | -ms-box-sizing: border-box; 1143 | box-sizing: border-box; 1144 | } 1145 | .block-search input.form-submit { 1146 | background: transparent url(../images/sprite.png) no-repeat -396px -116px; 1147 | border: none; 1148 | height: 16px; 1149 | margin: -1.7em 10px 0 0; 1150 | position: absolute; 1151 | right: 0; 1152 | text-indent: -999em; 1153 | width: 20px; 1154 | z-index: 1; 1155 | } 1156 | .block-search input.form-submit:hover, .block-search input.form-submit:focus, .block-search input.form-submit:active { 1157 | border: none; 1158 | cursor: pointer; 1159 | } 1160 | 1161 | /* Sidebars 1162 | ------------------------------------------------------------------------------*/ 1163 | .sidebar .region { 1164 | margin: 16px; 1165 | } 1166 | .sidebar .block { 1167 | background-color: #202020; 1168 | border: 1px solid #333; 1169 | border-color: rgba(66, 66, 66, 0.15); 1170 | padding: 1em; 1171 | -moz-border-radius: 4px; 1172 | -webkit-border-radius: 4px; 1173 | -o-border-radius: 4px; 1174 | -ms-border-radius: 4px; 1175 | -khtml-border-radius: 4px; 1176 | border-radius: 4px; 1177 | } 1178 | .sidebar .block .block-title { 1179 | color: #eee; 1180 | font-size: 1.381em; 1181 | margin-bottom: 0; 1182 | text-shadow: 1px 1px 1px #232323; 1183 | } 1184 | .sidebar .block ul.menu { 1185 | color: #333; 1186 | list-style-type: square; 1187 | margin: 1em 0; 1188 | padding: 0; 1189 | } 1190 | .sidebar .block ul.menu li { 1191 | padding: 0; 1192 | margin: 0; 1193 | } 1194 | .sidebar .block ul.menu li ul { 1195 | margin: 5px 0 5px 20px; 1196 | } 1197 | .sidebar .block ul.menu li a.active:before { 1198 | content: "\2192 \00A0"; 1199 | font-size: 1.231em; 1200 | vertical-align: middle; 1201 | } 1202 | .sidebar .block a { 1203 | color: #ddd; 1204 | line-height: 1; 1205 | } 1206 | .sidebar .block .active-trail > a, .sidebar .block a.active { 1207 | color: #ffcc00; 1208 | font-weight: bold; 1209 | } 1210 | 1211 | /* Outer 1212 | ------------------------------------------------------------------------------*/ 1213 | .outer { 1214 | color: #fff; 1215 | } 1216 | .outer .node .content { 1217 | border: none; 1218 | } 1219 | .outer ul.pager a, 1220 | .outer ul.pager a.active, 1221 | .outer ul.pager .pager-current { 1222 | background-color: #444; 1223 | color: #fff; 1224 | } 1225 | 1226 | /* Misc 1227 | ------------------------------------------------------------------------------*/ 1228 | .left, 1229 | .right { 1230 | display: block; 1231 | margin: 2em; 1232 | } 1233 | 1234 | .left { 1235 | float: left; 1236 | margin-left: 0; 1237 | } 1238 | 1239 | .right { 1240 | float: right; 1241 | margin-right: 0; 1242 | } 1243 | 1244 | /* Lil screens 1245 | -----------------------------------------------------------------------------*/ 1246 | @media screen and (min-width: 320px) and (max-width: 480px) { 1247 | .region-content { 1248 | -moz-border-radius: 0; 1249 | -webkit-border-radius: 0; 1250 | -o-border-radius: 0; 1251 | -ms-border-radius: 0; 1252 | -khtml-border-radius: 0; 1253 | border-radius: 0; 1254 | overflow-x: auto; 1255 | } 1256 | .region-content .form-item, 1257 | .region-content .form-item div { 1258 | float: none !important; 1259 | } 1260 | .region-content .container-inline .form-text, 1261 | .region-content .container-inline .form-textarea { 1262 | margin-bottom: 1em; 1263 | } 1264 | 1265 | .page-title { 1266 | -moz-border-radius: 0; 1267 | -webkit-border-radius: 0; 1268 | -o-border-radius: 0; 1269 | -ms-border-radius: 0; 1270 | -khtml-border-radius: 0; 1271 | border-radius: 0; 1272 | } 1273 | 1274 | .site-name { 1275 | height: 105px; 1276 | width: 271px; 1277 | } 1278 | .site-name a { 1279 | background: url(../images/sprite.png) no-repeat 0 -936px; 1280 | height: 105px; 1281 | width: 271px; 1282 | } 1283 | 1284 | .region-header { 1285 | position: relative; 1286 | background-color: #222; 1287 | min-width: none; 1288 | max-width: none; 1289 | margin: 1em -1em -1em; 1290 | } 1291 | .region-header .block { 1292 | margin: 0; 1293 | } 1294 | .region-header .block .form-actions, 1295 | .region-header .block .form-item input { 1296 | margin: 0; 1297 | } 1298 | 1299 | .region-navigation { 1300 | text-align: left; 1301 | padding-left: 0.2em; 1302 | } 1303 | .region-navigation .content a { 1304 | font-size: 0.846em; 1305 | } 1306 | .region-navigation .content .active a { 1307 | margin-left: 0.5em; 1308 | } 1309 | .region-navigation .content ul li { 1310 | display: block; 1311 | float: none; 1312 | margin: 0; 1313 | white-space: nowrap; 1314 | } 1315 | 1316 | .breadcrumb { 1317 | clear: both; 1318 | } 1319 | 1320 | .node .content img { 1321 | clear: both !important; 1322 | float: none; 1323 | } 1324 | 1325 | .passworrd-strength, 1326 | .password-confirm { 1327 | margin-bottom: 1em; 1328 | padding-left: 0; 1329 | } 1330 | 1331 | .password-parent { 1332 | width: auto; 1333 | } 1334 | 1335 | #block-block-1 { 1336 | background-position: 50% 100%; 1337 | font-size: 1.385em; 1338 | margin-bottom: 1em; 1339 | padding: 0 20px 300px 20px; 1340 | } 1341 | #block-block-1 .content { 1342 | padding: 1em; 1343 | } 1344 | 1345 | .two-column .form-item { 1346 | padding-left: 0; 1347 | position: relative; 1348 | } 1349 | .two-column .form-item label { 1350 | position: relative; 1351 | left: 0; 1352 | } 1353 | 1354 | #block-block-2 .fieldset-wrapper { 1355 | padding-left: 0; 1356 | } 1357 | #block-block-2 .form-text { 1358 | width: 100%; 1359 | } 1360 | } 1361 | -------------------------------------------------------------------------------- /css/tabs.css: -------------------------------------------------------------------------------- 1 | /* This CSS was written using SASS and Compass. 2 | * @see http://compass-style.org/ 3 | -----------------------------------------------------------------------------*/ 4 | /* Shared 5 | -----------------------------------------------------------------------------*/ 6 | div.tabs { 7 | background-color: #222; 8 | padding: 0 2em; 9 | } 10 | 11 | ul.tabs { 12 | display: block; 13 | padding: 0; 14 | margin: 0; 15 | } 16 | 17 | .tabs li { 18 | color: #fff; 19 | margin: 0 0.2em 0 0; 20 | padding: 0; 21 | display: -moz-inline-box; 22 | -moz-box-orient: vertical; 23 | display: inline-block; 24 | vertical-align: middle; 25 | *vertical-align: auto; 26 | } 27 | .tabs li { 28 | *display: inline; 29 | } 30 | 31 | .tabs a { 32 | color: #fc0; 33 | display: block; 34 | } 35 | .tabs a:focus { 36 | outline: 0; 37 | } 38 | 39 | /* Primary 40 | -----------------------------------------------------------------------------*/ 41 | .primary { 42 | font-size: 1.077em; 43 | line-height: 4ex; 44 | margin-top: 1em; 45 | overflow-y: auto; 46 | height: 4ex; 47 | } 48 | .primary a { 49 | padding: 0 1em; 50 | -moz-transition-property: none; 51 | -webkit-transition-property: none; 52 | -o-transition-property: none; 53 | transition-property: none; 54 | -moz-transition-duration: 1s; 55 | -webkit-transition-duration: 1s; 56 | -o-transition-duration: 1s; 57 | transition-duration: 1s; 58 | } 59 | .primary a:hover, .primary a:focus, .primary a:active, .primary a.active { 60 | background-color: #fff; 61 | color: #000; 62 | font-weight: bold; 63 | text-decoration: none; 64 | -moz-border-radius: 6px 6px 0 0; 65 | -webkit-border-radius: 6px 6px 0 0; 66 | -o-border-radius: 6px 6px 0 0; 67 | -ms-border-radius: 6px 6px 0 0; 68 | -khtml-border-radius: 6px 6px 0 0; 69 | border-radius: 6px 6px 0 0; 70 | } 71 | 72 | /* Secondary 73 | -----------------------------------------------------------------------------*/ 74 | ul.secondary { 75 | background-color: #fff; 76 | line-height: 3ex; 77 | margin: 0 -2em; 78 | padding: 1em 1em 0 1em; 79 | position: relative; 80 | } 81 | 82 | .secondary a { 83 | background-color: #f8f8f8; 84 | border: solid 1px #eee; 85 | color: #000; 86 | font-size: 0.846em; 87 | font-weight: bold; 88 | padding: 0.2em 1em; 89 | text-transform: uppercase; 90 | -moz-border-radius: 3px; 91 | -webkit-border-radius: 3px; 92 | -o-border-radius: 3px; 93 | -ms-border-radius: 3px; 94 | -khtml-border-radius: 3px; 95 | border-radius: 3px; 96 | } 97 | .secondary a:hover, .secondary a:focus, .secondary a:active, .secondary a.active { 98 | background-color: #eee; 99 | border-color: #ddd; 100 | text-decoration: none; 101 | } 102 | 103 | /* Lil screens 104 | -----------------------------------------------------------------------------*/ 105 | @media screen and (min-width: 320px) and (max-width: 480px) { 106 | div.tabs { 107 | padding: 0 1em; 108 | } 109 | 110 | ul.primary { 111 | font-size: 0.846em; 112 | } 113 | 114 | .primary a { 115 | padding: 0 0.5em; 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /dgd7.info: -------------------------------------------------------------------------------- 1 | name = DGD7 Theme 2 | description = A theme written for The Definitive Guide to Drupal 7 book website. 3 | core = 7.x 4 | 5 | 6 | ; REGIONS (pg. 282-292) 7 | ;------------------------------------------------------------------------------- 8 | ; Default 9 | regions[page_top] = Page Top 10 | regions[header] = Header 11 | regions[highlight] = Highlight 12 | regions[help] = Help 13 | regions[content] = Content 14 | regions[sidebar_first] = Sidebar First 15 | regions[sidebar_second] = Sidebar Second 16 | regions[footer] = Footer 17 | regions[page_bottom] = Page Bottom 18 | 19 | ; Custom 20 | regions[banner_ad] = Banner Ad 21 | regions[navigation] = Navigation 22 | 23 | 24 | ; STYLESHEETS (pg. 341-347) 25 | ;------------------------------------------------------------------------------- 26 | ; Stylesheets handling is totally broken in .info files, so I can't recommend 27 | ; using it for most use cases: 28 | ; 29 | ; Files added here: 30 | ; - Load on every page, whether they were supposed to in the first place or not. 31 | ; - Are grouped in a separate