root / drupal7 / sites / all / themes / adaptivetheme / at_subtheme / css / global.base.css @ 74f6bef0
1 |
/*
|
---|---|
2 |
* @file
|
3 |
* global.base
|
4 |
*
|
5 |
* - normalize with small modifications for Drupal and AT: http://necolas.github.com/normalize.css/
|
6 |
* - Gutter widths, see $gutter-width in _custom.scss
|
7 |
* - Default container alignment.
|
8 |
* - Flexible images and media declarations.
|
9 |
* - Copies of the SCSS mixins for reference, which includes an improved
|
10 |
* element-invisible and focusable styles.
|
11 |
*/
|
12 |
/* =============================================================================
|
13 |
HTML5 display definitions
|
14 |
========================================================================== */
|
15 |
/*
|
16 |
* Corrects block display not defined in IE6/7/8/9 & FF3
|
17 |
*/
|
18 |
article,
|
19 |
aside,
|
20 |
details,
|
21 |
figcaption,
|
22 |
figure,
|
23 |
footer,
|
24 |
header,
|
25 |
hgroup,
|
26 |
main,
|
27 |
nav,
|
28 |
section,
|
29 |
summary {
|
30 |
display: block; |
31 |
} |
32 |
|
33 |
/*
|
34 |
* Corrects inline-block display not defined in IE6/7/8/9 & FF3
|
35 |
*/
|
36 |
audio,
|
37 |
canvas,
|
38 |
video {
|
39 |
display: inline-block; |
40 |
*display: inline; |
41 |
*zoom: 1; |
42 |
} |
43 |
|
44 |
/*
|
45 |
* Prevents modern browsers from displaying 'audio' without controls
|
46 |
* Remove excess height in iOS5 devices
|
47 |
*/
|
48 |
audio:not([controls]) { |
49 |
display: none; |
50 |
height: 0; |
51 |
} |
52 |
|
53 |
/*
|
54 |
* Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
|
55 |
* Known issue: no IE6 support
|
56 |
*/
|
57 |
[hidden] {
|
58 |
display: none; |
59 |
} |
60 |
|
61 |
/* =============================================================================
|
62 |
Base
|
63 |
========================================================================== */
|
64 |
/*
|
65 |
* If you are using the themes Responsive JS feature (media_queries.js) do not
|
66 |
* set a font-family on the html element, use body.
|
67 |
*
|
68 |
* 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
|
69 |
* http://clagnut.com/blog/348/#c790
|
70 |
* 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
|
71 |
* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
|
72 |
*/
|
73 |
html {
|
74 |
font-size: 100%; |
75 |
-webkit-text-size-adjust: 100%; |
76 |
line-height: 1.5; |
77 |
height: 100%; |
78 |
overflow-y: scroll; |
79 |
} |
80 |
|
81 |
/*
|
82 |
* 1 . Addresses margins handled incorrectly in IE6/7
|
83 |
*/
|
84 |
body {
|
85 |
min-height: 100%; |
86 |
margin: 0; |
87 |
padding: 0; |
88 |
-webkit-font-smoothing: antialiased; |
89 |
font-smoothing: antialiased; |
90 |
text-rendering: optimizeLegibility\9; |
91 |
/* Only IE, can mess with Android */
|
92 |
} |
93 |
|
94 |
/*
|
95 |
* Addresses font-family inconsistency between 'textarea' and other form elements.
|
96 |
*/
|
97 |
button,
|
98 |
input,
|
99 |
select,
|
100 |
textarea {
|
101 |
font-family: sans-serif; |
102 |
} |
103 |
|
104 |
/* =============================================================================
|
105 |
Links
|
106 |
========================================================================== */
|
107 |
/*
|
108 |
* Addresses outline displayed oddly in Chrome
|
109 |
*/
|
110 |
a:focus { |
111 |
outline: thin dotted; |
112 |
} |
113 |
|
114 |
/*
|
115 |
* Improves readability when focused and also mouse hovered in all browsers
|
116 |
* people.opera.com/patrickl/experiments/keyboard/test
|
117 |
*/
|
118 |
a:hover, |
119 |
a:active { |
120 |
outline: 0; |
121 |
} |
122 |
|
123 |
/* =============================================================================
|
124 |
Typography
|
125 |
========================================================================== */
|
126 |
/*
|
127 |
* Headings
|
128 |
*
|
129 |
* Addresses font sizes and margins set differently in IE6/7
|
130 |
* Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5
|
131 |
*/
|
132 |
h1 {
|
133 |
font-size: 2em; |
134 |
margin: 0.67em 0; |
135 |
} |
136 |
|
137 |
h2 {
|
138 |
font-size: 1.5em; |
139 |
margin: 0.83em 0; |
140 |
} |
141 |
|
142 |
h3 {
|
143 |
font-size: 1.17em; |
144 |
margin: 1em 0; |
145 |
} |
146 |
|
147 |
h4 {
|
148 |
font-size: 1em; |
149 |
margin: 1.33em 0; |
150 |
} |
151 |
|
152 |
h5 {
|
153 |
font-size: 0.83em; |
154 |
margin: 1.67em 0; |
155 |
} |
156 |
|
157 |
h6 {
|
158 |
font-size: 0.75em; |
159 |
margin: 2.33em 0; |
160 |
} |
161 |
|
162 |
/*
|
163 |
* Addresses styling not present in IE7/8/9, S5, Chrome
|
164 |
*/
|
165 |
abbr[title] { |
166 |
border-bottom: 1px dotted; |
167 |
} |
168 |
|
169 |
/*
|
170 |
* Addresses style set to 'bolder' in FF3+, S4/5, Chrome
|
171 |
*/
|
172 |
b,
|
173 |
strong {
|
174 |
font-weight: 700; |
175 |
} |
176 |
|
177 |
blockquote {
|
178 |
margin: 1em 40px; |
179 |
} |
180 |
|
181 |
/*
|
182 |
* Addresses styling not present in S5, Chrome
|
183 |
*/
|
184 |
dfn {
|
185 |
font-style: italic; |
186 |
} |
187 |
|
188 |
/*
|
189 |
* Addresses styling not present in IE6/7/8/9
|
190 |
*/
|
191 |
mark {
|
192 |
background: #ff0; |
193 |
color: #000; |
194 |
} |
195 |
|
196 |
/*
|
197 |
* Addresses margins set differently in IE6/7
|
198 |
*/
|
199 |
p,
|
200 |
pre {
|
201 |
margin: 0 0 1.5em; |
202 |
} |
203 |
|
204 |
/*
|
205 |
* Corrects font family set oddly in IE6, S4/5, Chrome
|
206 |
* en.wikipedia.org/wiki/User:Davidgothberg/Test59
|
207 |
*/
|
208 |
pre,
|
209 |
code,
|
210 |
kbd,
|
211 |
samp {
|
212 |
font-family: monospace, serif; |
213 |
_font-family: 'courier new', monospace; |
214 |
font-size: 1em; |
215 |
} |
216 |
|
217 |
/*
|
218 |
* Improves readability of pre-formatted text in all browsers
|
219 |
*/
|
220 |
pre {
|
221 |
white-space: pre; |
222 |
white-space: pre-wrap; |
223 |
word-wrap: break-word; |
224 |
} |
225 |
|
226 |
/*
|
227 |
* 1. Addresses CSS quotes not supported in IE6/7
|
228 |
* 2. Addresses quote property not supported in S4
|
229 |
*/
|
230 |
q {
|
231 |
quotes: none; |
232 |
} |
233 |
|
234 |
q:before, |
235 |
q:after { |
236 |
content: ''; |
237 |
content: none; |
238 |
} |
239 |
|
240 |
small {
|
241 |
font-size: 75%; |
242 |
} |
243 |
|
244 |
/*
|
245 |
* Prevents sub and sup affecting line-height in all browsers
|
246 |
* gist.github.com/413930
|
247 |
*/
|
248 |
sub,
|
249 |
sup {
|
250 |
font-size: 75%; |
251 |
line-height: 0; |
252 |
position: relative; |
253 |
vertical-align: baseline; |
254 |
} |
255 |
|
256 |
sup {
|
257 |
top: -0.5em; |
258 |
} |
259 |
|
260 |
sub {
|
261 |
bottom: -0.25em; |
262 |
} |
263 |
|
264 |
/* =============================================================================
|
265 |
Lists
|
266 |
========================================================================== */
|
267 |
/*
|
268 |
* Addresses margins set differently in IE6/7
|
269 |
*/
|
270 |
dl,
|
271 |
menu,
|
272 |
ol,
|
273 |
ul {
|
274 |
margin: 1em 0; |
275 |
} |
276 |
|
277 |
dd {
|
278 |
margin: 0 0 0 40px; |
279 |
} |
280 |
|
281 |
/*
|
282 |
* Addresses paddings set differently in IE6/7
|
283 |
*/
|
284 |
menu,
|
285 |
ol,
|
286 |
ul {
|
287 |
padding: 0 0 0 40px; |
288 |
} |
289 |
|
290 |
/*
|
291 |
* Corrects list images handled incorrectly in IE7
|
292 |
*/
|
293 |
nav ul, |
294 |
nav ol { |
295 |
list-style: none; |
296 |
list-style-image: none; |
297 |
} |
298 |
|
299 |
/* =============================================================================
|
300 |
Embedded content
|
301 |
========================================================================== */
|
302 |
/*
|
303 |
* 1. Remove border when inside 'a' element in IE6/7/8/9, FF3
|
304 |
* 2. Improves image quality when scaled in IE7
|
305 |
* code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
|
306 |
*/
|
307 |
img {
|
308 |
/* border: 0; */
|
309 |
/* Drupal core already does this, uncomment if you need it */
|
310 |
-ms-interpolation-mode: bicubic; |
311 |
} |
312 |
|
313 |
/*
|
314 |
* Corrects overflow displayed oddly in IE9
|
315 |
*/
|
316 |
svg:not(:root) { |
317 |
overflow: hidden; |
318 |
} |
319 |
|
320 |
/* =============================================================================
|
321 |
Figures
|
322 |
========================================================================== */
|
323 |
/*
|
324 |
* Addresses margin not present in IE6/7/8/9, S5, O11
|
325 |
*/
|
326 |
figure {
|
327 |
margin: 0; |
328 |
} |
329 |
|
330 |
/* =============================================================================
|
331 |
Forms
|
332 |
========================================================================== */
|
333 |
/*
|
334 |
* Corrects margin displayed oddly in IE6/7
|
335 |
*/
|
336 |
form {
|
337 |
margin: 0; |
338 |
} |
339 |
|
340 |
/*
|
341 |
* Define consistent border, margin, and padding
|
342 |
*/
|
343 |
fieldset {
|
344 |
margin: 0 2px; |
345 |
padding: 0.35em 0.625em 0.75em; |
346 |
} |
347 |
|
348 |
/*
|
349 |
* 1. Corrects color not being inherited in IE6/7/8/9
|
350 |
* 2. Corrects text not wrapping in FF3
|
351 |
* 3. Corrects alignment displayed oddly in IE6/7
|
352 |
*/
|
353 |
legend {
|
354 |
border: 0; |
355 |
padding: 0; |
356 |
white-space: normal; |
357 |
*margin-left: -7px; |
358 |
} |
359 |
|
360 |
/*
|
361 |
* 1. Corrects font size not being inherited in all browsers
|
362 |
* 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
|
363 |
* 3. Improves appearance and consistency in all browsers
|
364 |
*/
|
365 |
button,
|
366 |
input,
|
367 |
select,
|
368 |
textarea {
|
369 |
font-size: 100%; |
370 |
margin: 0; |
371 |
vertical-align: baseline; |
372 |
*vertical-align: middle; |
373 |
} |
374 |
|
375 |
/*
|
376 |
* Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
|
377 |
*/
|
378 |
button,
|
379 |
input {
|
380 |
line-height: normal; |
381 |
} |
382 |
|
383 |
/*
|
384 |
* 1. Improves usability and consistency of cursor style between image-type 'input' and others
|
385 |
* 2. Corrects inability to style clickable 'input' types in iOS
|
386 |
* 3. Removes inner spacing in IE7 without affecting normal text inputs
|
387 |
* Known issue: inner spacing remains in IE6
|
388 |
*/
|
389 |
button,
|
390 |
input[type="button"], |
391 |
input[type="reset"], |
392 |
input[type="submit"] { |
393 |
cursor: pointer; |
394 |
-webkit-appearance: button; |
395 |
*overflow: visible; |
396 |
} |
397 |
|
398 |
/*
|
399 |
* Re-set default cursor for disabled elements
|
400 |
*/
|
401 |
button[disabled], |
402 |
input[disabled] { |
403 |
cursor: default; |
404 |
} |
405 |
|
406 |
/*
|
407 |
* 1. Addresses box sizing set to content-box in IE8/9
|
408 |
* 2. Removes excess padding in IE8/9
|
409 |
* 3. Removes excess padding in IE7
|
410 |
* Known issue: excess padding remains in IE6
|
411 |
*/
|
412 |
input[type="checkbox"], |
413 |
input[type="radio"] { |
414 |
box-sizing: border-box; |
415 |
padding: 0; |
416 |
*height: 13px; |
417 |
*width: 13px; |
418 |
} |
419 |
|
420 |
/*
|
421 |
* 1. Addresses appearance set to searchfield in S5, Chrome
|
422 |
* 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
|
423 |
*/
|
424 |
input[type="search"] { |
425 |
-webkit-appearance: textfield; |
426 |
-moz-box-sizing: content-box; |
427 |
-webkit-box-sizing: content-box; |
428 |
box-sizing: content-box; |
429 |
} |
430 |
|
431 |
/*
|
432 |
* Removes inner padding and search cancel button in S5, Chrome on OS X
|
433 |
*/
|
434 |
input[type="search"]::-webkit-search-decoration, |
435 |
input[type="search"]::-webkit-search-cancel-button { |
436 |
-webkit-appearance: none; |
437 |
} |
438 |
|
439 |
/*
|
440 |
* Removes inner padding and border in FF3+
|
441 |
* www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
|
442 |
*/
|
443 |
button::-moz-focus-inner, |
444 |
input::-moz-focus-inner { |
445 |
border: 0; |
446 |
padding: 0; |
447 |
} |
448 |
|
449 |
/*
|
450 |
* 1. Removes default vertical scrollbar in IE6/7/8/9
|
451 |
* 2. Improves readability and alignment in all browsers
|
452 |
*/
|
453 |
textarea {
|
454 |
overflow: auto; |
455 |
vertical-align: top; |
456 |
} |
457 |
|
458 |
/* =============================================================================
|
459 |
Tables
|
460 |
========================================================================== */
|
461 |
/*
|
462 |
* 1. Remove most spacing between table cells
|
463 |
*/
|
464 |
table {
|
465 |
border: 1px solid; |
466 |
border-spacing: 0; |
467 |
border-collapse: collapse; |
468 |
font-size: inherit; |
469 |
font: 100%; |
470 |
} |
471 |
|
472 |
/* =============================================================================
|
473 |
Gutters
|
474 |
========================================================================== */
|
475 |
/*
|
476 |
* If gutters are set in theme settings they will override these values,
|
477 |
* see Extensions > Modify Output > Design
|
478 |
* $gutter-width is set in _base.scss
|
479 |
*/
|
480 |
#main-content,
|
481 |
.block-inner,
|
482 |
.pane-inner,
|
483 |
.menu-wrapper,
|
484 |
.branding-elements,
|
485 |
.breadcrumb-wrapper,
|
486 |
.attribution,
|
487 |
.at-panel .rounded-corner, |
488 |
.block-panels-mini > .block-title, |
489 |
.rendered-by-ds .panel-display .region-inner, |
490 |
div.messages { |
491 |
margin-left: 10px; |
492 |
margin-right: 10px; |
493 |
} |
494 |
|
495 |
/*
|
496 |
* Panel pages need negative margin equal to the gutter width applied to #content,
|
497 |
* this is taken care of in theme settings as per above for normal gutters
|
498 |
*/
|
499 |
#content .panel-display, |
500 |
#content .panel-flexible { |
501 |
margin-left: -10px; |
502 |
margin-right: -10px; |
503 |
} |
504 |
|
505 |
/* =============================================================================
|
506 |
Flexible Media and Cross browser improvements
|
507 |
========================================================================== */
|
508 |
/*
|
509 |
* - This can cause issues in table cells where no width is set on the column,
|
510 |
* only in some versions of webkit and IE 7/8.
|
511 |
* - declaring the width attribute on image elements and using max-width causes
|
512 |
* the "dissappering images" bug in IE8.
|
513 |
* - Mapping services such as Google Maps may break also, see below for fixes.
|
514 |
*/
|
515 |
img {
|
516 |
height: auto; |
517 |
-ms-interpolation-mode: bicubic; |
518 |
} |
519 |
|
520 |
/* Ethan Marcotte - http://front.ie/l8rJaA */
|
521 |
img,
|
522 |
embed,
|
523 |
object,
|
524 |
video {
|
525 |
max-width: 100%; |
526 |
} |
527 |
|
528 |
/* Disable flexiblity for IE8 and below */
|
529 |
.lt-ie9 img, |
530 |
.lt-ie9 object, |
531 |
.lt-ie9 embed, |
532 |
.lt-ie9 video { |
533 |
max-width: none; |
534 |
} |
535 |
|
536 |
/* Override max-width 100% for map displays */
|
537 |
#map img, |
538 |
.gmap img, |
539 |
.view-gmap img, |
540 |
.openlayers-map img, |
541 |
#getlocations_map_canvas img, |
542 |
#locationmap_map img, |
543 |
.geofieldMap img, |
544 |
.views_horizontal_slider img, |
545 |
.geolocation-map img, |
546 |
.geolocation-views-map img { |
547 |
max-width: none !important; |
548 |
} |
549 |
|
550 |
/* =============================================================================
|
551 |
Misc helpers, Accessibility classes etc
|
552 |
========================================================================== */
|
553 |
/* Prevent overflowing content */
|
554 |
header[role=banner], |
555 |
.content-inner,
|
556 |
.nav,
|
557 |
.region-sidebar-first,
|
558 |
.region-sidebar-second,
|
559 |
.region-secondary-content,
|
560 |
.region-tertiary-content,
|
561 |
.region-footer {
|
562 |
overflow: visible; |
563 |
word-wrap: break-word; |
564 |
} |
565 |
|
566 |
/**
|
567 |
* General classes for hiding content. These are all included as SASS mixins.
|
568 |
* @SEE: sass/_custom.scss
|
569 |
*/
|
570 |
/**
|
571 |
* Image replacement
|
572 |
* Kellum Method: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement
|
573 |
* Additional helpers from http://html5boilerplate.com/docs/css/
|
574 |
*/
|
575 |
.ir {
|
576 |
/* Kellum Method */
|
577 |
display: block !important; |
578 |
text-indent: 100%; |
579 |
white-space: nowrap; |
580 |
overflow: hidden; |
581 |
/* Remove the default border from elements like button */
|
582 |
border: 0; |
583 |
/* Crush the text down to take up no space */
|
584 |
font: 0/0 a; |
585 |
/* Remove any text shadows */
|
586 |
text-shadow: none; |
587 |
/* Hide any residual text in Safari 4 and any mobile devices that may need it */
|
588 |
color: transparent; |
589 |
/* Hide the default background color on elements like button */
|
590 |
background-color: transparent; |
591 |
} |
592 |
|
593 |
/* More robust element-invisible and element-focuable classes */
|
594 |
.element-invisible {
|
595 |
border: 0; |
596 |
clip: rect(1px 1px 1px 1px); |
597 |
/* IE6, IE7 */
|
598 |
clip: rect(1px, 1px, 1px, 1px); |
599 |
height: 1px; |
600 |
overflow: hidden; |
601 |
padding: 0; |
602 |
position: absolute; |
603 |
width: 1px; |
604 |
} |
605 |
|
606 |
.element-invisible.element-focusable:active, |
607 |
.element-invisible.element-focusable:focus { |
608 |
clip: auto; |
609 |
height: auto; |
610 |
overflow: visible; |
611 |
position: static; |
612 |
width: auto; |
613 |
} |
614 |
|
615 |
/* Shift content offscreen, can be usefull when you reall need to do this */
|
616 |
.offscreen {
|
617 |
position: absolute; |
618 |
top: -99999em; |
619 |
width: 1px; |
620 |
height: 1px; |
621 |
overflow: hidden; |
622 |
outline: 0; |
623 |
} |
624 |
|
625 |
/* Hide content from all users */
|
626 |
.element-hidden {
|
627 |
display: none; |
628 |
} |