You are here

global.base.css in Drupal Commons 7.3

/*
 * @file
 * global.base
 *
 * - normalize with small modifications for Drupal and AT: http://necolas.github.com/normalize.css/
 * - Gutter widths, see $gutter-width in _custom.scss
 * - Default container alignment.
 * - Flexible images and media declarations.
 * - Copies of the SCSS mixins for reference, which includes an improved
 *   element-invisible and focusable styles.
 */
/* =============================================================================
    HTML5 display definitions
   ========================================================================== */
/*
 * Corrects block display not defined in IE6/7/8/9 & FF3
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}

/*
 * Corrects inline-block display not defined in IE6/7/8/9 & FF3
 */
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

/*
 * Prevents modern browsers from displaying 'audio' without controls
 * Remove excess height in iOS5 devices
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/*
 * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
 * Known issue: no IE6 support
 */
[hidden] {
  display: none;
}

/* =============================================================================
    Base
   ========================================================================== */
/*
 * If you are using the themes Responsive JS feature (media_queries.js) do not
 * set a font-family on the html element, use body.
 *
 * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
 *    http://clagnut.com/blog/348/#c790
 * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
 *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
 */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  line-height: 1.7;
  overflow-y: scroll;
}

/*
 * 1 . Addresses margins handled incorrectly in IE6/7
 */
body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility\9;
  /* Only IE, can mess with Android */
}

/*
 * Addresses font-family inconsistency between 'textarea' and other form elements.
 */
button,
input,
select,
textarea {
  font-family: sans-serif;
}

/* =============================================================================
    Links
   ========================================================================== */
/*
 * Addresses outline displayed oddly in Chrome
 */
a:focus {
  outline: thin dotted;
}

/*
 * Improves readability when focused and also mouse hovered in all browsers
 * people.opera.com/patrickl/experiments/keyboard/test
 */
a:hover,
a:active {
  outline: 0;
}

/* =============================================================================
    Typography
   ========================================================================== */
/*
 * Headings
 *
 * Addresses font sizes and margins set differently in IE6/7
 * Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

h2 {
  font-size: 1.5em;
  margin: 0.83em 0;
}

h3 {
  font-size: 1.17em;
  margin: 1em 0;
}

h4 {
  font-size: 1em;
  margin: 1.33em 0;
}

h5 {
  font-size: 0.83em;
  margin: 1.67em 0;
}

h6 {
  font-size: 0.75em;
  margin: 2.33em 0;
}

/*
 * Addresses styling not present in IE7/8/9, S5, Chrome
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/*
 * Addresses style set to 'bolder' in FF3+, S4/5, Chrome
 */
b,
strong {
  font-weight: bold;
}

blockquote {
  margin: 1em 40px;
}

/*
 * Addresses styling not present in S5, Chrome
 */
dfn {
  font-style: italic;
}

/*
 * Addresses styling not present in IE6/7/8/9
 */
mark {
  background: #ff0;
  color: #000;
}

/*
 * Addresses margins set differently in IE6/7
 */
p,
pre {
  margin: 0 0 1.5em;
}

/*
 * Corrects font family set oddly in IE6, S4/5, Chrome
 * en.wikipedia.org/wiki/User:Davidgothberg/Test59
 */
pre,
code,
kbd,
samp {
  font-family: monospace, serif;
  _font-family: 'courier new', monospace;
  font-size: 1em;
}

/*
 * Improves readability of pre-formatted text in all browsers
 */
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/*
 * 1. Addresses CSS quotes not supported in IE6/7
 * 2. Addresses quote property not supported in S4
 */
q {
  quotes: none;
}

q:before,
q:after {
  content: '';
  content: none;
}

small {
  font-size: 75%;
}

/*
 * Prevents sub and sup affecting line-height in all browsers
 * gist.github.com/413930
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* =============================================================================
    Lists
   ========================================================================== */
/*
 * Addresses margins set differently in IE6/7
 */
dl,
menu,
ol,
ul {
  margin: 1em 0;
}

dd {
  margin: 0 0 0 40px;
}

/*
 * Addresses paddings set differently in IE6/7
 */
menu,
ol,
ul {
  padding: 0 0 0 40px;
}

/*
 * Corrects list images handled incorrectly in IE7
 */
nav ul,
nav ol {
  list-style: none;
  list-style-image: none;
}

/* =============================================================================
    Embedded content
   ========================================================================== */
/*
 * 1. Remove border when inside 'a' element in IE6/7/8/9, FF3
 * 2. Improves image quality when scaled in IE7
 *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 */
img {
  /* border: 0; */
  /* Drupal core already does this, uncomment if you need it */
  -ms-interpolation-mode: bicubic;
}

/*
 * Corrects overflow displayed oddly in IE9
 */
svg:not(:root) {
  overflow: hidden;
}

/* =============================================================================
    Figures
   ========================================================================== */
/*
 * Addresses margin not present in IE6/7/8/9, S5, O11
 */
figure {
  margin: 0;
}

/* =============================================================================
    Forms
   ========================================================================== */
/*
 * 1. Corrects font size not being inherited in all browsers
 * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
 * 3. Improves appearance and consistency in all browsers
 */
button,
input,
select,
textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle;
}

/*
 * 1. Addresses box sizing set to content-box in IE8/9
 * 2. Removes excess padding in IE8/9
 * 3. Removes excess padding in IE7
 *    Known issue: excess padding remains in IE6
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
  *height: 13px;
  *width: 13px;
}

/*
 * 1. Addresses appearance set to searchfield in S5, Chrome
 * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
 */
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in S5, Chrome on OS X
 */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/*
 * 1. Removes default vertical scrollbar in IE6/7/8/9
 * 2. Improves readability and alignment in all browsers
 */
textarea {
  overflow: auto;
  vertical-align: top;
}

/* =============================================================================
    Tables
   ========================================================================== */
/*
 * 1. Remove most spacing between table cells
 */
table {
  border: 1px solid;
  border-spacing: 0;
  border-collapse: collapse;
  font-size: inherit;
  font: 100%;
}

/* =============================================================================
    Flexible Media and Cross browser improvements
   ========================================================================== */
/*
 * - This can cause issues in table cells where no width is set on the column,
 *   only in some versions of webkit and IE 7/8.
 * - declaring the width attribute on image elements and using max-width causes
 *   the "dissappering images" bug in IE8.
 * - Mapping services such as Google Maps may break also, see below for fixes.
 */
img {
  height: auto;
  -ms-interpolation-mode: bicubic;
}

/* Ethan Marcotte - http://front.ie/l8rJaA */
img,
embed,
object,
video {
  max-width: 100%;
}

/* Disable flexiblity for IE8 and below */
.lt-ie9 img,
.lt-ie9 object,
.lt-ie9 embed,
.lt-ie9 video {
  max-width: none;
}

/* Override max-width 100% for map displays */
#map img,
.gmap img,
.view-gmap img,
.openlayers-map img,
#getlocations_map_canvas img,
#locationmap_map img,
.geofieldMap img,
.views_horizontal_slider img {
  max-width: none !important;
}

/* =============================================================================
    Misc helpers, Accessibility classes etc
   ========================================================================== */
/* Prevent overflowing content */
header[role=banner],
.content-inner,
.nav,
.region-sidebar-first,
.region-sidebar-second,
.region-secondary-content,
.region-tertiary-content,
.region-footer {
  overflow: visible;
  word-wrap: break-word;
}

/**
 * General classes for hiding content. These are all included as SASS mixins.
 * @SEE: sass/_custom.scss
 */
/**
 * Image replacement
 * Kellum Method: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement
 * Additional helpers from http://html5boilerplate.com/docs/css/
 */
.ir {
  /* Kellum Method */
  display: block !important;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  /* Remove the default border from elements like button */
  border: 0;
  /* Crush the text down to take up no space */
  font: 0/0 a;
  /* Remove any text shadows */
  text-shadow: none;
  /* Hide any residual text in Safari 4 and any mobile devices that may need it */
  color: transparent;
  /* Hide the default background color on elements like button */
  background-color: transparent;
}

/* More robust element-invisible and element-focuable classes */
.element-invisible {
  border: 0;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.element-invisible.element-focusable:active,
.element-invisible.element-focusable:focus {
  clip: auto;
  height: auto;
  overflow: visible;
  position: static;
  width: auto;
}

/* Shift content offscreen, can be usefull when you reall need to do this */
.offscreen {
  position: absolute;
  top: -99999em;
  width: 1px;
  height: 1px;
  overflow: hidden;
  outline: 0;
}

/* Hide content from all users */
.element-hidden {
  display: none;
}

File

themes/commons/commons_origins/css/global.base.css
View source
  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. nav,
  27. section,
  28. summary {
  29. display: block;
  30. }
  31. /*
  32. * Corrects inline-block display not defined in IE6/7/8/9 & FF3
  33. */
  34. audio,
  35. canvas,
  36. video {
  37. display: inline-block;
  38. *display: inline;
  39. *zoom: 1;
  40. }
  41. /*
  42. * Prevents modern browsers from displaying 'audio' without controls
  43. * Remove excess height in iOS5 devices
  44. */
  45. audio:not([controls]) {
  46. display: none;
  47. height: 0;
  48. }
  49. /*
  50. * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
  51. * Known issue: no IE6 support
  52. */
  53. [hidden] {
  54. display: none;
  55. }
  56. /* =============================================================================
  57. Base
  58. ========================================================================== */
  59. /*
  60. * If you are using the themes Responsive JS feature (media_queries.js) do not
  61. * set a font-family on the html element, use body.
  62. *
  63. * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
  64. * http://clagnut.com/blog/348/#c790
  65. * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
  66. * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
  67. */
  68. html {
  69. font-size: 100%;
  70. -webkit-text-size-adjust: 100%;
  71. line-height: 1.7;
  72. overflow-y: scroll;
  73. }
  74. /*
  75. * 1 . Addresses margins handled incorrectly in IE6/7
  76. */
  77. body {
  78. min-height: 100%;
  79. margin: 0;
  80. padding: 0;
  81. -webkit-font-smoothing: antialiased;
  82. font-smoothing: antialiased;
  83. text-rendering: optimizeLegibility\9;
  84. /* Only IE, can mess with Android */
  85. }
  86. /*
  87. * Addresses font-family inconsistency between 'textarea' and other form elements.
  88. */
  89. button,
  90. input,
  91. select,
  92. textarea {
  93. font-family: sans-serif;
  94. }
  95. /* =============================================================================
  96. Links
  97. ========================================================================== */
  98. /*
  99. * Addresses outline displayed oddly in Chrome
  100. */
  101. a:focus {
  102. outline: thin dotted;
  103. }
  104. /*
  105. * Improves readability when focused and also mouse hovered in all browsers
  106. * people.opera.com/patrickl/experiments/keyboard/test
  107. */
  108. a:hover,
  109. a:active {
  110. outline: 0;
  111. }
  112. /* =============================================================================
  113. Typography
  114. ========================================================================== */
  115. /*
  116. * Headings
  117. *
  118. * Addresses font sizes and margins set differently in IE6/7
  119. * Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5
  120. */
  121. h1 {
  122. font-size: 2em;
  123. margin: 0.67em 0;
  124. }
  125. h2 {
  126. font-size: 1.5em;
  127. margin: 0.83em 0;
  128. }
  129. h3 {
  130. font-size: 1.17em;
  131. margin: 1em 0;
  132. }
  133. h4 {
  134. font-size: 1em;
  135. margin: 1.33em 0;
  136. }
  137. h5 {
  138. font-size: 0.83em;
  139. margin: 1.67em 0;
  140. }
  141. h6 {
  142. font-size: 0.75em;
  143. margin: 2.33em 0;
  144. }
  145. /*
  146. * Addresses styling not present in IE7/8/9, S5, Chrome
  147. */
  148. abbr[title] {
  149. border-bottom: 1px dotted;
  150. }
  151. /*
  152. * Addresses style set to 'bolder' in FF3+, S4/5, Chrome
  153. */
  154. b,
  155. strong {
  156. font-weight: bold;
  157. }
  158. blockquote {
  159. margin: 1em 40px;
  160. }
  161. /*
  162. * Addresses styling not present in S5, Chrome
  163. */
  164. dfn {
  165. font-style: italic;
  166. }
  167. /*
  168. * Addresses styling not present in IE6/7/8/9
  169. */
  170. mark {
  171. background: #ff0;
  172. color: #000;
  173. }
  174. /*
  175. * Addresses margins set differently in IE6/7
  176. */
  177. p,
  178. pre {
  179. margin: 0 0 1.5em;
  180. }
  181. /*
  182. * Corrects font family set oddly in IE6, S4/5, Chrome
  183. * en.wikipedia.org/wiki/User:Davidgothberg/Test59
  184. */
  185. pre,
  186. code,
  187. kbd,
  188. samp {
  189. font-family: monospace, serif;
  190. _font-family: 'courier new', monospace;
  191. font-size: 1em;
  192. }
  193. /*
  194. * Improves readability of pre-formatted text in all browsers
  195. */
  196. pre {
  197. white-space: pre;
  198. white-space: pre-wrap;
  199. word-wrap: break-word;
  200. }
  201. /*
  202. * 1. Addresses CSS quotes not supported in IE6/7
  203. * 2. Addresses quote property not supported in S4
  204. */
  205. q {
  206. quotes: none;
  207. }
  208. q:before,
  209. q:after {
  210. content: '';
  211. content: none;
  212. }
  213. small {
  214. font-size: 75%;
  215. }
  216. /*
  217. * Prevents sub and sup affecting line-height in all browsers
  218. * gist.github.com/413930
  219. */
  220. sub,
  221. sup {
  222. font-size: 75%;
  223. line-height: 0;
  224. position: relative;
  225. vertical-align: baseline;
  226. }
  227. sup {
  228. top: -0.5em;
  229. }
  230. sub {
  231. bottom: -0.25em;
  232. }
  233. /* =============================================================================
  234. Lists
  235. ========================================================================== */
  236. /*
  237. * Addresses margins set differently in IE6/7
  238. */
  239. dl,
  240. menu,
  241. ol,
  242. ul {
  243. margin: 1em 0;
  244. }
  245. dd {
  246. margin: 0 0 0 40px;
  247. }
  248. /*
  249. * Addresses paddings set differently in IE6/7
  250. */
  251. menu,
  252. ol,
  253. ul {
  254. padding: 0 0 0 40px;
  255. }
  256. /*
  257. * Corrects list images handled incorrectly in IE7
  258. */
  259. nav ul,
  260. nav ol {
  261. list-style: none;
  262. list-style-image: none;
  263. }
  264. /* =============================================================================
  265. Embedded content
  266. ========================================================================== */
  267. /*
  268. * 1. Remove border when inside 'a' element in IE6/7/8/9, FF3
  269. * 2. Improves image quality when scaled in IE7
  270. * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
  271. */
  272. img {
  273. /* border: 0; */
  274. /* Drupal core already does this, uncomment if you need it */
  275. -ms-interpolation-mode: bicubic;
  276. }
  277. /*
  278. * Corrects overflow displayed oddly in IE9
  279. */
  280. svg:not(:root) {
  281. overflow: hidden;
  282. }
  283. /* =============================================================================
  284. Figures
  285. ========================================================================== */
  286. /*
  287. * Addresses margin not present in IE6/7/8/9, S5, O11
  288. */
  289. figure {
  290. margin: 0;
  291. }
  292. /* =============================================================================
  293. Forms
  294. ========================================================================== */
  295. /*
  296. * 1. Corrects font size not being inherited in all browsers
  297. * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
  298. * 3. Improves appearance and consistency in all browsers
  299. */
  300. button,
  301. input,
  302. select,
  303. textarea {
  304. font-size: 100%;
  305. margin: 0;
  306. vertical-align: baseline;
  307. *vertical-align: middle;
  308. }
  309. /*
  310. * 1. Addresses box sizing set to content-box in IE8/9
  311. * 2. Removes excess padding in IE8/9
  312. * 3. Removes excess padding in IE7
  313. * Known issue: excess padding remains in IE6
  314. */
  315. input[type="checkbox"],
  316. input[type="radio"] {
  317. box-sizing: border-box;
  318. padding: 0;
  319. *height: 13px;
  320. *width: 13px;
  321. }
  322. /*
  323. * 1. Addresses appearance set to searchfield in S5, Chrome
  324. * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
  325. */
  326. input[type="search"] {
  327. -webkit-appearance: textfield;
  328. -moz-box-sizing: content-box;
  329. -webkit-box-sizing: content-box;
  330. box-sizing: content-box;
  331. }
  332. /*
  333. * Removes inner padding and search cancel button in S5, Chrome on OS X
  334. */
  335. input[type="search"]::-webkit-search-decoration,
  336. input[type="search"]::-webkit-search-cancel-button {
  337. -webkit-appearance: none;
  338. }
  339. /*
  340. * 1. Removes default vertical scrollbar in IE6/7/8/9
  341. * 2. Improves readability and alignment in all browsers
  342. */
  343. textarea {
  344. overflow: auto;
  345. vertical-align: top;
  346. }
  347. /* =============================================================================
  348. Tables
  349. ========================================================================== */
  350. /*
  351. * 1. Remove most spacing between table cells
  352. */
  353. table {
  354. border: 1px solid;
  355. border-spacing: 0;
  356. border-collapse: collapse;
  357. font-size: inherit;
  358. font: 100%;
  359. }
  360. /* =============================================================================
  361. Flexible Media and Cross browser improvements
  362. ========================================================================== */
  363. /*
  364. * - This can cause issues in table cells where no width is set on the column,
  365. * only in some versions of webkit and IE 7/8.
  366. * - declaring the width attribute on image elements and using max-width causes
  367. * the "dissappering images" bug in IE8.
  368. * - Mapping services such as Google Maps may break also, see below for fixes.
  369. */
  370. img {
  371. height: auto;
  372. -ms-interpolation-mode: bicubic;
  373. }
  374. /* Ethan Marcotte - http://front.ie/l8rJaA */
  375. img,
  376. embed,
  377. object,
  378. video {
  379. max-width: 100%;
  380. }
  381. /* Disable flexiblity for IE8 and below */
  382. .lt-ie9 img,
  383. .lt-ie9 object,
  384. .lt-ie9 embed,
  385. .lt-ie9 video {
  386. max-width: none;
  387. }
  388. /* Override max-width 100% for map displays */
  389. #map img,
  390. .gmap img,
  391. .view-gmap img,
  392. .openlayers-map img,
  393. #getlocations_map_canvas img,
  394. #locationmap_map img,
  395. .geofieldMap img,
  396. .views_horizontal_slider img {
  397. max-width: none !important;
  398. }
  399. /* =============================================================================
  400. Misc helpers, Accessibility classes etc
  401. ========================================================================== */
  402. /* Prevent overflowing content */
  403. header[role=banner],
  404. .content-inner,
  405. .nav,
  406. .region-sidebar-first,
  407. .region-sidebar-second,
  408. .region-secondary-content,
  409. .region-tertiary-content,
  410. .region-footer {
  411. overflow: visible;
  412. word-wrap: break-word;
  413. }
  414. /**
  415. * General classes for hiding content. These are all included as SASS mixins.
  416. * @SEE: sass/_custom.scss
  417. */
  418. /**
  419. * Image replacement
  420. * Kellum Method: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement
  421. * Additional helpers from http://html5boilerplate.com/docs/css/
  422. */
  423. .ir {
  424. /* Kellum Method */
  425. display: block !important;
  426. text-indent: 100%;
  427. white-space: nowrap;
  428. overflow: hidden;
  429. /* Remove the default border from elements like button */
  430. border: 0;
  431. /* Crush the text down to take up no space */
  432. font: 0/0 a;
  433. /* Remove any text shadows */
  434. text-shadow: none;
  435. /* Hide any residual text in Safari 4 and any mobile devices that may need it */
  436. color: transparent;
  437. /* Hide the default background color on elements like button */
  438. background-color: transparent;
  439. }
  440. /* More robust element-invisible and element-focuable classes */
  441. .element-invisible {
  442. border: 0;
  443. clip: rect(1px 1px 1px 1px);
  444. /* IE6, IE7 */
  445. clip: rect(1px, 1px, 1px, 1px);
  446. height: 1px;
  447. overflow: hidden;
  448. padding: 0;
  449. position: absolute;
  450. width: 1px;
  451. }
  452. .element-invisible.element-focusable:active,
  453. .element-invisible.element-focusable:focus {
  454. clip: auto;
  455. height: auto;
  456. overflow: visible;
  457. position: static;
  458. width: auto;
  459. }
  460. /* Shift content offscreen, can be usefull when you reall need to do this */
  461. .offscreen {
  462. position: absolute;
  463. top: -99999em;
  464. width: 1px;
  465. height: 1px;
  466. overflow: hidden;
  467. outline: 0;
  468. }
  469. /* Hide content from all users */
  470. .element-hidden {
  471. display: none;
  472. }