SHARE
TWEET

Untitled

a guest Sep 21st, 2019 100 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top