demo.css 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. /* General Demo Style */
  2. body{
  3. font-family: 'Open Sans Condensed','Arial Narrow', serif;
  4. background: #fafafa;
  5. font-weight: 400;
  6. font-size: 14px;
  7. color: #333;
  8. -webkit-font-smoothing: antialiased;
  9. overflow-y: scroll;
  10. overflow-x: hidden;
  11. padding-left:50px;
  12. }
  13. a{
  14. color: #555;
  15. text-decoration: none;
  16. }
  17. .container{
  18. width: 100%;
  19. position: relative;
  20. }
  21. .clr{
  22. clear: both;
  23. padding: 0;
  24. height: 0;
  25. margin: 0;
  26. }
  27. .main{
  28. width: 90%;
  29. margin: 0 auto;
  30. position: relative;
  31. }
  32. .container > header{
  33. margin: 10px;
  34. padding: 20px 10px 10px 10px;
  35. position: relative;
  36. display: block;
  37. text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  38. text-align: center;
  39. }
  40. .container > header h1{
  41. font-size: 36px;
  42. line-height: 36px;
  43. margin: 0;
  44. position: relative;
  45. font-weight: 300;
  46. color: #666;
  47. text-shadow: 1px 1px 1px rgba(255,255,255,0.7);
  48. }
  49. .container > header h2{
  50. font-size: 14px;
  51. font-weight: 300;
  52. margin: 0;
  53. padding: 15px 0 5px 0;
  54. color: #888;
  55. font-family: Cambria, Georgia, serif;
  56. font-style: italic;
  57. text-shadow: 1px 1px 1px rgba(255,255,255,0.9);
  58. }
  59. /* Header Style */
  60. .codrops-top{
  61. line-height: 24px;
  62. font-size: 11px;
  63. background: #fff;
  64. background: rgba(255, 255, 255, 0.5);
  65. text-transform: uppercase;
  66. z-index: 9999;
  67. position: relative;
  68. font-family: Cambria, Georgia, serif;
  69. box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
  70. }
  71. .codrops-top a{
  72. padding: 0px 10px;
  73. letter-spacing: 1px;
  74. color: #333;
  75. display: inline-block;
  76. }
  77. .codrops-top a:hover{
  78. background: rgba(255,255,255,0.6);
  79. }
  80. .codrops-top span.right{
  81. float: right;
  82. }
  83. .codrops-top span.right a{
  84. float: left;
  85. display: block;
  86. }
  87. /* Demo Buttons Style */
  88. .codrops-demos{
  89. text-align:center;
  90. display: block;
  91. line-height: 30px;
  92. padding: 5px 0px;
  93. }
  94. .codrops-demos a{
  95. display: inline-block;
  96. margin: 0px 4px;
  97. padding: 0px 6px;
  98. color: #aaa;
  99. line-height: 20px;
  100. font-size: 13px;
  101. text-shadow: 1px 1px 1px #fff;
  102. border: 1px solid #fff;
  103. background: #ffffff; /* Old browsers */
  104. background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
  105. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
  106. background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
  107. background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
  108. background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
  109. background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
  110. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
  111. box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  112. }
  113. .codrops-demos a:hover{
  114. color: #333;
  115. background: #fff;
  116. }
  117. .codrops-demos a:active{
  118. background: #fff;
  119. }
  120. .codrops-demos a.current-demo,
  121. .codrops-demos a.current-demo:hover{
  122. background: #f0f0f0;
  123. border-color: #d9d9d9;
  124. color: #aaa;
  125. box-shadow: 0 1px 1px rgba(255,255,255,0.7);
  126. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
  127. }