style.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538
  1. /**
  2. * @file
  3. * Main theme stylesheet.
  4. */
  5. /*******************************************************************************
  6. * General styles
  7. ******************************************************************************/
  8. body,
  9. input,
  10. textarea,
  11. select,
  12. .ui-widget,
  13. .ui-widget input,
  14. .ui-widget select,
  15. .ui-widget textarea,
  16. .ui-widget button {
  17. font-family: "Lucida", "Lucida Grande", "Trebuchet MS", Tahoma, Verdana, sans-serif;
  18. }
  19. html {
  20. overflow-y: scroll;
  21. }
  22. body.tao {
  23. color: #333;
  24. background: #fff;
  25. }
  26. a {
  27. color: #008eb1;
  28. text-decoration: none;
  29. }
  30. .limiter {
  31. margin: 0 30px;
  32. }
  33. /* Skip to content link. */
  34. #skip-link {
  35. width: 200px;
  36. height: 0;
  37. left: 50%;
  38. margin-left: -100px;
  39. }
  40. #skip-link a:hover,
  41. #skip-link a:active,
  42. #skip-link a:focus {
  43. left: 0;
  44. z-index: 20;
  45. text-align: center;
  46. width: 200px;
  47. background: #333;
  48. color: #fff;
  49. opacity: .9;
  50. padding: 10px 0;
  51. -webkit-border-radius: 0 0 5px 5px;
  52. -moz-border-radius: 0 0 5px 5px;
  53. border-radius: 0 0 5px 5px;
  54. }
  55. /* "Rounded" elements. */
  56. a.button,
  57. .compact-link a,
  58. input.form-submit,
  59. input.teaser-button,
  60. .form-actions #edit-cancel {
  61. -webkit-border-radius: 3px;
  62. -moz-border-radius: 3px;
  63. border-radius: 3px;
  64. }
  65. /* "Popped" elements. */
  66. input.teaser-button,
  67. input.form-submit,
  68. a.button,
  69. .form-actions #edit-cancel {
  70. -webkit-box-shadow: #ddd 0 1px 1px;
  71. -moz-box-shadow: #ddd 0 1px 1px;
  72. box-shadow: #ddd 0 1px 1px;
  73. }
  74. /* "Embossed" elements. */
  75. table th {
  76. text-shadow: #fff 0 1px 0;
  77. }
  78. /* General styles end */
  79. /*******************************************************************************
  80. * Branding
  81. ******************************************************************************/
  82. #branding {
  83. background: url(../images/bleeds.png) 0 -30px repeat-x;
  84. color: #ccc;
  85. font-size: 11px;
  86. height: 30px;
  87. overflow: hidden;
  88. }
  89. #branding ul.links {
  90. float: right;
  91. }
  92. #branding ul.links a {
  93. background: url(../images/bleeds.png) 0% -30px no-repeat;
  94. color: #fff;
  95. float: left;
  96. padding: 5px 10px;
  97. }
  98. #branding ul.links a:hover {
  99. background-position: 0% -90px;
  100. }
  101. #branding .breadcrumb {
  102. padding: 0;
  103. float: left;
  104. font-weight: normal;
  105. }
  106. #branding .breadcrumb-link {
  107. float: left;
  108. position: relative;
  109. }
  110. #branding .breadcrumb-depth-0 {
  111. z-index: 10;
  112. }
  113. #branding .breadcrumb-depth-1 {
  114. z-index: 9;
  115. }
  116. #branding .breadcrumb-depth-2 {
  117. z-index: 8;
  118. }
  119. #branding .breadcrumb-depth-3 {
  120. z-index: 7;
  121. }
  122. #branding .breadcrumb-depth-4 {
  123. z-index: 6;
  124. }
  125. #branding .breadcrumb-depth-5 {
  126. z-index: 5;
  127. }
  128. #branding .breadcrumb-depth-6 {
  129. z-index: 4;
  130. }
  131. #branding .breadcrumb-depth-7 {
  132. z-index: 3;
  133. }
  134. #branding .breadcrumb-depth-8 {
  135. z-index: 2;
  136. }
  137. #branding .breadcrumb-link > a,
  138. #branding .breadcrumb-link > strong {
  139. color: #fff;
  140. font-weight: normal;
  141. float: left;
  142. margin-right: -10px;
  143. padding: 5px 20px;
  144. background: url(../images/bleeds.png) 100% -60px no-repeat;
  145. }
  146. #branding .breadcrumb-depth-0 a,
  147. #branding .breadcrumb-depth-0 strong {
  148. padding-left: 10px;
  149. }
  150. #branding .breadcrumb a:hover {
  151. background-position: 100% -90px;
  152. }
  153. /* Branding end */
  154. /*******************************************************************************
  155. * Page title
  156. ******************************************************************************/
  157. #page-title {
  158. background: #fff url(../images/bleeds.png) 0 -350px repeat-x;
  159. }
  160. #page-title .limiter {
  161. position: relative;
  162. }
  163. #page-title .page-title {
  164. float: left;
  165. padding: 15px 10px 15px 0;
  166. line-height: 30px;
  167. min-height: 30px;
  168. -webkit-text-shadow: #fff 0 1px 0;
  169. text-shadow: #fff 0 1px 0;
  170. letter-spacing: -1px;
  171. font-weight: normal;
  172. font-size: 20px;
  173. }
  174. #page-title .page-title span.icon {
  175. float: left;
  176. margin-right: 10px;
  177. }
  178. .add-or-remove-shortcuts,
  179. .action-links {
  180. float: left;
  181. font-size: 11px;
  182. }
  183. .add-or-remove-shortcuts {
  184. padding: 20px 0;
  185. }
  186. .action-links {
  187. padding: 20px 0 20px 10px;
  188. }
  189. .action-links a {
  190. background-color: #7bc;
  191. text-shadow: #38a 0 1px 0;
  192. }
  193. .add-or-remove-shortcuts a {
  194. background-color: #999;
  195. text-shadow: #666 0 1px 0;
  196. }
  197. /* Page title end */
  198. /*******************************************************************************
  199. * Tabs
  200. ******************************************************************************/
  201. .tabs {
  202. float: right;
  203. right: 0;
  204. }
  205. .primary-tabs {
  206. height: 30px;
  207. margin: 15px 0 0;
  208. -webkit-border-radius: 5px;
  209. -moz-border-radius: 5px;
  210. border-radius: 5px;
  211. }
  212. div.pager {
  213. margin: 10px 0 0;
  214. height: 30px;
  215. }
  216. .pager li,
  217. .primary-tabs li {
  218. height: 30px;
  219. position: relative;
  220. background: #eee url(../images/bleeds.png) 50% 0 no-repeat;
  221. margin-bottom: 10px;
  222. }
  223. .pager a,
  224. .pager span,
  225. .primary-tabs a {
  226. float: left;
  227. text-align: center;
  228. min-width: 70px;
  229. padding: 5px 10px;
  230. color: #333;
  231. text-shadow: #fff 0 1px 0;
  232. }
  233. .pager a,
  234. .pager span {
  235. min-width: 10px;
  236. padding: 5px 15px;
  237. }
  238. .pager li:hover,
  239. .primary-tabs li:hover {
  240. background-color: #f8f8f8;
  241. }
  242. .pager li:first-child,
  243. .primary-tabs li.first-row-link {
  244. background-position: 0% 0;
  245. -webkit-border-radius: 5px 0 0 5px;
  246. -moz-border-radius: 5px 0 0 5px;
  247. border-radius: 5px 0 0 5px;
  248. }
  249. .pager li:last-child,
  250. .primary-tabs li.last-row-link {
  251. background-position: 100% 0;
  252. -webkit-border-radius: 0 5px 5px 0;
  253. -moz-border-radius: 0 5px 5px 0;
  254. border-radius: 0 5px 5px 0;
  255. }
  256. /* This style is necessary in case there is only one tab that goes to the
  257. second row. */
  258. .primary-tabs li.first-row-link.last-row-link {
  259. background-position: 0% 0;
  260. -webkit-border-radius: 5px;
  261. -moz-border-radius: 5px;
  262. border-radius: 5px;
  263. }
  264. .pager li.pager-current,
  265. .primary-tabs li.active {
  266. background-color: #7bc;
  267. }
  268. .pager li.pager-current span,
  269. .primary-tabs li.active a {
  270. color: #fff;
  271. text-shadow: #38a 0 1px 0;
  272. }
  273. /* Secondary tabs, nested */
  274. .secondary-tabs {
  275. min-width: 150px;
  276. float: left;
  277. position: relative;
  278. margin: 5px 5px 5px 0;
  279. font-size: 11px;
  280. background: #59a url(../images/buttons.png) -800px 50% no-repeat;
  281. -webkit-border-radius: 3px;
  282. -moz-border-radius: 3px;
  283. border-radius: 3px;
  284. z-index: 1;
  285. }
  286. .secondary-tabs:hover {
  287. background: #59a;
  288. opacity: .9;
  289. }
  290. ul.secondary-tabs li,
  291. ul.secondary-tabs li a {
  292. background: transparent;
  293. float: none;
  294. height: auto;
  295. text-align: left;
  296. margin-bottom: 0;
  297. }
  298. .secondary-tabs a {
  299. color: #fff;
  300. text-shadow: #38a 0 1px 0;
  301. display: none;
  302. padding: 0 10px 0 25px;
  303. }
  304. .secondary-tabs:hover a,
  305. .secondary-tabs .active a {
  306. display: block;
  307. }
  308. .secondary-tabs li:hover,
  309. .secondary-tabs li.active {
  310. background: transparent;
  311. }
  312. .secondary-tabs a:hover {
  313. background: #389 url(../images/buttons.png) -800px 50% no-repeat;
  314. }
  315. .secondary-tabs li:last-child a:hover {
  316. -webkit-border-radius: 0 0 3px 3px;
  317. -moz-border-radius: 0 0 3px 3px;
  318. border-radius: 0 0 3px 3px;
  319. }
  320. .secondary-tabs li:first-child a:hover {
  321. -webkit-border-radius: 3px 3px 0 0;
  322. -moz-border-radius: 3px 3px 0 0;
  323. border-radius: 3px 3px 0 0;
  324. }
  325. ul.secondary.tabs {
  326. position: static;
  327. float: right;
  328. font-size: 0.923em;
  329. padding: 0 3px 5px;
  330. line-height: 1.385em;
  331. overflow: hidden;
  332. background-color: #fff;
  333. }
  334. ul.secondary.tabs li {
  335. margin: 0 5px;
  336. float: none;
  337. display: inline;
  338. }
  339. /* Tabs end */
  340. /*******************************************************************************
  341. * Content
  342. ******************************************************************************/
  343. .help-page,
  344. div.comment,
  345. div.node {
  346. border-style: solid;
  347. border-width: 1px;
  348. border-color: #ddd;
  349. background: #fff url(../images/vrule.png) 65% 0% repeat-y;
  350. margin: 0 0 10px;
  351. }
  352. /* Make large images display within the parent container. This will prevent
  353. messing up the layout if a wide image needs to be displayed in content. */
  354. #page img {
  355. max-width: 100%;
  356. }
  357. #help-text .column-main .column-wrapper,
  358. .help-page .column-main .column-wrapper,
  359. div.comment .column-main .column-wrapper,
  360. div.node .column-main .column-wrapper {
  361. padding: 19px;
  362. }
  363. #help-text .column-main .column-wrapper {
  364. padding-left: 59px;
  365. position: relative;
  366. }
  367. #help-text .column-main .column-wrapper span.icon {
  368. position: absolute;
  369. top: 15px;
  370. left: 15px;
  371. }
  372. #help-text .column-side .column-wrapper,
  373. .help-page .column-side .column-wrapper,
  374. div.comment .column-side .column-wrapper,
  375. div.node .column-side .column-wrapper {
  376. padding: 9px;
  377. font-size: 11px;
  378. }
  379. #help-text .column-side .help-links,
  380. .help-page .column-side .help-page-links,
  381. .node-submitted,
  382. .comment-submitted {
  383. padding: 10px;
  384. background: #f8f8f8;
  385. }
  386. .comment-links,
  387. .node-links {
  388. padding: 10px 0;
  389. }
  390. .help-page .help-page-links ul.links {
  391. -webkit-column-count: 2;
  392. -moz-column-count: 2;
  393. }
  394. .column-side ul.links li,
  395. .column-side ul.links a,
  396. .column-side ul.links span {
  397. display: block;
  398. float: none;
  399. }
  400. .column-side ul.links a,
  401. .column-side ul.links span {
  402. padding: 0 10px;
  403. display: block;
  404. float: none;
  405. }
  406. .column-side ul.links span a {
  407. padding: 0;
  408. display: inline;
  409. }
  410. .column-side ul.links a.active,
  411. .column-side ul.links a:hover {
  412. background: #fff;
  413. }
  414. .comment-links ul.links a:hover {
  415. background: #f4f4f4;
  416. }
  417. .comment-title,
  418. .node-title {
  419. margin: 0 0 20px;
  420. font-weight: normal;
  421. font-size: 16px;
  422. }
  423. /* Content end */
  424. /*******************************************************************************
  425. * Fixes for other modules
  426. ******************************************************************************/
  427. /* Fix rules action links. */
  428. .rules-elements-table ul.rules-operations a {
  429. text-shadow: none;
  430. color: #666;
  431. }
  432. /* Fix the position of Rules table drag toggle. It uses "position: absolute", so
  433. it is necessary to set "position: relative" to the parent, so that the button
  434. stays in the same frame. */
  435. #rules-form-wrapper {
  436. position: relative;
  437. }
  438. /* Fix the padding of Rules table drag toggle. Out of the box it is optimized
  439. for display in table headers, while in Rules it is displayed outside of the
  440. tables, in the same line as table heading. */
  441. #rules-form-wrapper .rules-elements-table .tabledrag-toggle-weight-wrapper {
  442. padding-top: 0;
  443. padding-right: 0;
  444. }
  445. /* Views exposed filters forms. */
  446. div.views-exposed-form {
  447. margin-bottom: 20px;
  448. }
  449. div.views-exposed-form div.form-item {
  450. border: 0;
  451. padding: 0;
  452. }
  453. div.views-exposed-form div.views-submit-button {
  454. margin-right: 1em;
  455. }
  456. div.views-exposed-form input.form-text,
  457. div.views-exposed-form input.form-autocomplete {
  458. height: 28px;
  459. }
  460. /* Views grouped filters in admin. */
  461. #views-ajax-body .scroll.form-wrapper > *:not(.tabledrag-toggle-weight-wrapper) {
  462. float: left;
  463. width: 100%;
  464. /* It's horrible to do this, but it's the best option for now. */
  465. -webkit-box-sizing: border-box;
  466. -moz-box-sizing: border-box;
  467. box-sizing: border-box;
  468. }
  469. #views-ajax-body .tabledrag-toggle-weight-wrapper {
  470. position: relative;
  471. }
  472. #views-ajax-body .scroll.form-wrapper table {
  473. float: none;
  474. }
  475. #views-ajax-body .scroll.form-wrapper > .views-left-40 {
  476. width: 40%;
  477. }
  478. #views-ajax-body .scroll.form-wrapper > .views-right-60 {
  479. width: 59%;
  480. float: right;
  481. }
  482. #views-ajax-body #edit-options-more {
  483. margin-top: 10px;
  484. }
  485. /* Views header on administrative pages (displayed while editing a view). */
  486. .views-display-top {
  487. padding: 10px;
  488. }
  489. /* CTools toggle in views display columns. This is displayed while editing or
  490. creating a view. */
  491. .views-display-column > .ctools-toggle {
  492. margin-top: 14px;
  493. }
  494. .views-display-column > .ctools-toggle.ctools-toggle-collapsed {
  495. margin-top: 11px;
  496. }
  497. /* Module filter "clear" link. */
  498. .module-filter-clear a {
  499. margin: 3px 0 0 -35px;
  500. }
  501. /* Fix Workbench Moderation links. */
  502. .view-workbench-moderation tbody .views-field-moderation-actions li {
  503. float: none;
  504. margin-bottom: 5px;
  505. margin-right: 3px;
  506. overflow: auto;
  507. }
  508. .view-workbench-moderation tbody .views-field-moderation-actions li a {
  509. background-color: #7bc;
  510. -webkit-border-radius: 5px;
  511. -moz-border-radius: 5px;
  512. border-radius: 5px;
  513. color: #fff;
  514. display: block;
  515. padding: 0 7px;
  516. text-shadow: #38a 0 1px 0;
  517. }
  518. .view-workbench-moderation tbody .views-field-moderation-actions li a:hover {
  519. background-color: #52a8be;
  520. color: #fff;
  521. }
  522. /* Make sure that OpenLayers maps are displayed. */
  523. #page img.olTileImage {
  524. max-width: inherit;
  525. }
  526. /* Use monospace font on devel/php form. */
  527. #devel-execute-form textarea {
  528. font-family: monospace;
  529. }
  530. /* Fixes for other modules end */