default.css 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. /* General Demo Style */
  2. @import url(googleapiscss.css);
  3. @font-face {
  4. font-family: 'fontawesome';
  5. src:url('../fonts/fontawesome.eot');
  6. src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
  7. url('../fonts/fontawesome.svg#fontawesome') format('svg'),
  8. url('../fonts/fontawesome.woff') format('woff'),
  9. url('../fonts/fontawesome.ttf') format('truetype');
  10. font-weight: normal;
  11. font-style: normal;
  12. }
  13. /*body, html { font-size: 100%; padding: 0; margin: 0;}*/
  14. /* Reset */
  15. /**,*/
  16. /**:after,*/
  17. /**:before {*/
  18. /* -webkit-box-sizing: border-box;*/
  19. /* -moz-box-sizing: border-box;*/
  20. /* box-sizing: border-box;*/
  21. /*}*/
  22. /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
  23. .clearfix:before,
  24. .clearfix:after {
  25. content: " ";
  26. display: table;
  27. }
  28. .clearfix:after {
  29. clear: both;
  30. }
  31. /*body {*/
  32. /* font-family: 'Lato', Calibri, Arial, sans-serif;*/
  33. /* color: #47a3da;*/
  34. /*}*/
  35. /*a {*/
  36. /* color: #f0f0f0;*/
  37. /* text-decoration: none;*/
  38. /*}*/
  39. /*a:hover {*/
  40. /* color: #000;*/
  41. /*}*/
  42. .main,
  43. .container > header {
  44. width: 90%;
  45. max-width: 69em;
  46. margin: 0 auto;
  47. padding: 0 1.875em 3.125em 1.875em;
  48. }
  49. .container > header {
  50. padding: 2.875em 1.875em 1.875em;
  51. }
  52. .container > header h1 {
  53. font-size: 2.125em;
  54. line-height: 1.3;
  55. margin: 0;
  56. float: left;
  57. font-weight: 400;
  58. }
  59. .container > header span {
  60. display: block;
  61. font-weight: 700;
  62. text-transform: uppercase;
  63. letter-spacing: 0.5em;
  64. padding: 0 0 0.6em 0.1em;
  65. }
  66. .container > header nav {
  67. float: right;
  68. }
  69. .container > header nav a {
  70. display: block;
  71. float: left;
  72. position: relative;
  73. width: 2.5em;
  74. height: 2.5em;
  75. background: #fff;
  76. border-radius: 50%;
  77. color: transparent;
  78. margin: 0 0.1em;
  79. border: 4px solid #47a3da;
  80. text-indent: -8000px;
  81. }
  82. .container > header nav a:after {
  83. content: attr(data-info);
  84. color: #47a3da;
  85. position: absolute;
  86. width: 600%;
  87. top: 120%;
  88. text-align: right;
  89. right: 0;
  90. opacity: 0;
  91. pointer-events: none;
  92. }
  93. .container > header nav a:hover:after {
  94. opacity: 1;
  95. }
  96. .container > header nav a:hover {
  97. background: #47a3da;
  98. }
  99. .main > section {
  100. max-width: 260px;
  101. width: 90%;
  102. margin: 0 auto;
  103. }
  104. .main > section h2 {
  105. font-weight: 300;
  106. color: #ccc;
  107. }
  108. .main > section button {
  109. border: none;
  110. background: #47a3da;
  111. color: #fff;
  112. padding: 1.5em;
  113. display: block;
  114. width: 100%;
  115. cursor: pointer;
  116. margin: 10px 0;
  117. font-size: 0.8em;
  118. }
  119. .main > section button:hover {
  120. background: #258ecd;
  121. }
  122. .main > section button.active {
  123. background: #0d77b6;
  124. }
  125. .main > section button.disabled {
  126. background: #aaa;
  127. pointer-events: none;
  128. }
  129. .icon-drop:before,
  130. .icon-arrow-left:before {
  131. font-family: 'fontawesome';
  132. position: absolute;
  133. top: 0;
  134. width: 100%;
  135. height: 100%;
  136. speak: none;
  137. font-style: normal;
  138. font-weight: normal;
  139. line-height: 2;
  140. text-align: center;
  141. color: #47a3da;
  142. -webkit-font-smoothing: antialiased;
  143. text-indent: 8000px;
  144. padding-left: 8px;
  145. }
  146. .container > header nav a:hover:before {
  147. color: #fff;
  148. }
  149. .icon-drop:before {
  150. content: "\e000";
  151. }
  152. .icon-arrow-left:before {
  153. content: "\f060";
  154. }