Advertisement
Guest User

Untitled

a guest
Sep 21st, 2019
142
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.51 KB | None | 0 0
  1. <style type="text/css">
  2. .list li {
  3. background: url("https://bradfrost.github.com/this-is-responsive/patterns/images/icon_arrow_right.png") no-repeat 97% 50%;
  4. border: 1px solid #ccc;
  5. display: table;
  6. padding: 5px;
  7. margin: 8px;
  8. background: #fff;
  9. color: #DD3333;
  10. border-collapse: collapse;
  11. width: 96%;
  12. }
  13. .inner {
  14. display: table-row;
  15. overflow: hidden;
  16. }
  17. .li-img {
  18. display: table-cell;
  19. vertical-align: middle;
  20. width: 70px;
  21. height: 70px;
  22. padding-right: 1em;
  23. }
  24. .li-img img {
  25. margin: 5px;
  26. border: 1px solid #ccc;
  27. padding: 0.05em;
  28. border-radius: 3px;
  29. display: block;
  30. width: 70px;
  31. height: 70px;
  32.  
  33. }
  34. .li-text {
  35. display: table-cell;
  36. vertical-align: middle;
  37. padding: 4px;
  38.  
  39. }
  40. .li-head {
  41. color: #DD3333;
  42. margin: 0;
  43. }
  44. .li-sub {
  45. margin: 0;
  46. }
  47.  
  48. @media all and (min-width: 45em) {
  49. .list li {
  50. float: left;
  51. width: 50%;
  52. }
  53. }
  54.  
  55. @media all and (min-width: 75em) {
  56. .list li {
  57. width: 33.33333%;
  58. }
  59. }
  60. /*========*/
  61.  
  62. .form-wrapper {
  63. background-color: #f6f6f6;
  64. background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
  65. background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
  66. background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
  67. background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
  68. background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
  69. background-image: linear-gradient(top, #f6f6f6, #eae8e8);
  70. border-color: #dedede #bababa #aaa #bababa;
  71. border-style: solid;
  72. border-width: 1px;
  73. -webkit-border-radius: 10px;
  74. -moz-border-radius: 10px;
  75. border-radius: 10px;
  76. -webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
  77. -moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
  78. box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
  79.  
  80. overflow: hidden;
  81. padding: 8px;
  82. width: 90%;
  83. }
  84.  
  85. .form-wrapper #search {
  86. border: 1px solid #CCC;
  87. -webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FFF;
  88. -moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FFF;
  89. box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FFF;
  90. -webkit-border-radius: 3px;
  91. -moz-border-radius: 3px;
  92. border-radius: 3px;
  93. color: #999;
  94. float: left;
  95. font: 16px Lucida Sans, Trebuchet MS, Tahoma, sans-serif;
  96. height: 20px;
  97. padding: 10px;
  98. width: 60%;
  99. }
  100.  
  101. .form-wrapper #search:focus {
  102. border-color: #aaa;
  103. -webkit-box-shadow: 0 1px 1px #bbb inset;
  104. -moz-box-shadow: 0 1px 1px #bbb inset;
  105. box-shadow: 0 1px 1px #bbb inset;
  106. outline: 0;
  107. }
  108.  
  109. .form-wrapper #search:-moz-placeholder,
  110. .form-wrapper #search:-ms-input-placeholder,
  111. .form-wrapper #search::-webkit-input-placeholder {
  112. color: #999;
  113. font-weight: normal;
  114. }
  115.  
  116. .form-wrapper #submit {
  117. background-color: #0483a0;
  118. background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
  119. background-image: -webkit-linear-gradient(top, #DD3333, #8a2a21);
  120. background-image: -moz-linear-gradient(top, #DD3333, #8a2a21);
  121. background-image: -ms-linear-gradient(top, #DD3333, #8a2a21);
  122. background-image: -o-linear-gradient(top, #DD3333, #8a2a21);
  123. background-image: linear-gradient(top, #DD3333, #8a2a21);
  124. border: 1px solid #4f120c;
  125. -moz-border-radius: 3px;
  126. -webkit-border-radius: 3px;
  127. border-radius: 3px;
  128. -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #FFF;
  129. -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #FFF;
  130. box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #FFF;
  131. color: #fafafa;
  132. cursor: pointer;
  133. height: 42px;
  134. float: right;
  135. font: 15px Arial, Helvetica;
  136. padding: 0;
  137. text-transform: uppercase;
  138. text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
  139. width: 100px;
  140. }
  141.  
  142. .form-wrapper #submit:hover,
  143. .form-wrapper #submit:focus {
  144. background-color: #31b2c3;
  145. background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
  146. background-image: -webkit-linear-gradient(top, #8a2a21, #DD3333);
  147. background-image: -moz-linear-gradient(top, #8a2a21, #DD3333);
  148. background-image: -ms-linear-gradient(top, #8a2a21, #DD3333);
  149. background-image: -o-linear-gradient(top, #8a2a21, #DD3333);
  150. background-image: linear-gradient(top, #8a2a21, #DD3333);
  151. }
  152.  
  153. .form-wrapper #submit:active {
  154. -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  155. -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  156. box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  157. outline: 0;
  158. }
  159.  
  160. .form-wrapper #submit::-moz-focus-inner {
  161. border: 0;
  162. }
  163. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement