examples.css 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. * { padding: 0; margin: 0; vertical-align: top; }
  2. body {
  3. background: url(background.png) repeat-x;
  4. font: 18px "proxima-nova", Helvetica, Arial, sans-serif;
  5. line-height: 1.5;
  6. }
  7. a { color: #069; }
  8. a:hover { color: #28b; }
  9. h2 {
  10. margin-top: 15px;
  11. font: normal 32px "omnes-pro", Helvetica, Arial, sans-serif;
  12. }
  13. h3 {
  14. margin-left: 30px;
  15. font: normal 26px "omnes-pro", Helvetica, Arial, sans-serif;
  16. color: #666;
  17. }
  18. p {
  19. margin-top: 10px;
  20. }
  21. button {
  22. font-size: 18px;
  23. padding: 1px 7px;
  24. }
  25. input {
  26. font-size: 18px;
  27. }
  28. input[type=checkbox] {
  29. margin: 7px;
  30. }
  31. #header {
  32. position: relative;
  33. width: 900px;
  34. margin: auto;
  35. }
  36. #header h2 {
  37. margin-left: 10px;
  38. vertical-align: middle;
  39. font-size: 42px;
  40. font-weight: bold;
  41. text-decoration: none;
  42. color: #000;
  43. }
  44. #content {
  45. width: 880px;
  46. margin: 0 auto;
  47. padding: 10px;
  48. }
  49. #footer {
  50. margin-top: 25px;
  51. margin-bottom: 10px;
  52. text-align: center;
  53. font-size: 12px;
  54. color: #999;
  55. }
  56. .demo-container {
  57. box-sizing: border-box;
  58. width: 850px;
  59. height: 450px;
  60. padding: 20px 15px 15px 15px;
  61. margin: 15px auto 30px auto;
  62. border: 1px solid #ddd;
  63. background: #fff;
  64. background: linear-gradient(#f6f6f6 0, #fff 50px);
  65. background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
  66. background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
  67. background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
  68. background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
  69. box-shadow: 0 3px 10px rgba(0,0,0,0.15);
  70. -o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  71. -ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  72. -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  73. -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  74. -webkit-tap-highlight-color: rgba(0,0,0,0);
  75. -webkit-tap-highlight-color: transparent;
  76. -webkit-touch-callout: none;
  77. -webkit-user-select: none;
  78. -khtml-user-select: none;
  79. -moz-user-select: none;
  80. -ms-user-select: none;
  81. user-select: none;
  82. }
  83. .demo-placeholder {
  84. width: 100%;
  85. height: 100%;
  86. font-size: 14px;
  87. }
  88. fieldset {
  89. display: block;
  90. -webkit-margin-start: 2px;
  91. -webkit-margin-end: 2px;
  92. -webkit-padding-before: 0.35em;
  93. -webkit-padding-start: 0.75em;
  94. -webkit-padding-end: 0.75em;
  95. -webkit-padding-after: 0.625em;
  96. min-width: -webkit-min-content;
  97. border-width: 2px;
  98. border-style: groove;
  99. border-color: threedface;
  100. border-image: initial;
  101. padding: 10px;
  102. }
  103. .legend {
  104. display: block;
  105. -webkit-padding-start: 2px;
  106. -webkit-padding-end: 2px;
  107. border-width: initial;
  108. border-style: none;
  109. border-color: initial;
  110. border-image: initial;
  111. padding-left: 10px;
  112. padding-right: 10px;
  113. padding-top: 10px;
  114. padding-bottom: 10px;
  115. }
  116. .legendLayer .background {
  117. fill: rgba(255, 255, 255, 0.85);
  118. stroke: rgba(0, 0, 0, 0.85);
  119. stroke-width: 1;
  120. }
  121. input[type="radio"] {
  122. margin-top: -1px;
  123. vertical-align: middle;
  124. }
  125. .tickLabel {
  126. line-height: 1.1;
  127. }