Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <style type="text/css">
- .list li {
- background: url("https://bradfrost.github.com/this-is-responsive/patterns/images/icon_arrow_right.png") no-repeat 97% 50%;
- border: 1px solid #ccc;
- display: table;
- padding: 5px;
- margin: 8px;
- background: #fff;
- color: #DD3333;
- border-collapse: collapse;
- width: 96%;
- }
- .inner {
- display: table-row;
- overflow: hidden;
- }
- .li-img {
- display: table-cell;
- vertical-align: middle;
- width: 70px;
- height: 70px;
- padding-right: 1em;
- }
- .li-img img {
- margin: 5px;
- border: 1px solid #ccc;
- padding: 0.05em;
- border-radius: 3px;
- display: block;
- width: 70px;
- height: 70px;
- }
- .li-text {
- display: table-cell;
- vertical-align: middle;
- padding: 4px;
- }
- .li-head {
- color: #DD3333;
- margin: 0;
- }
- .li-sub {
- margin: 0;
- }
- @media all and (min-width: 45em) {
- .list li {
- float: left;
- width: 50%;
- }
- }
- @media all and (min-width: 75em) {
- .list li {
- width: 33.33333%;
- }
- }
- /*========*/
- .form-wrapper {
- background-color: #f6f6f6;
- background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
- background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
- background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
- background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
- background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
- background-image: linear-gradient(top, #f6f6f6, #eae8e8);
- border-color: #dedede #bababa #aaa #bababa;
- border-style: solid;
- border-width: 1px;
- -webkit-border-radius: 10px;
- -moz-border-radius: 10px;
- border-radius: 10px;
- -webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
- -moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
- box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
- overflow: hidden;
- padding: 8px;
- width: 90%;
- }
- .form-wrapper #search {
- border: 1px solid #CCC;
- -webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FFF;
- -moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FFF;
- box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FFF;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
- color: #999;
- float: left;
- font: 16px Lucida Sans, Trebuchet MS, Tahoma, sans-serif;
- height: 20px;
- padding: 10px;
- width: 60%;
- }
- .form-wrapper #search:focus {
- border-color: #aaa;
- -webkit-box-shadow: 0 1px 1px #bbb inset;
- -moz-box-shadow: 0 1px 1px #bbb inset;
- box-shadow: 0 1px 1px #bbb inset;
- outline: 0;
- }
- .form-wrapper #search:-moz-placeholder,
- .form-wrapper #search:-ms-input-placeholder,
- .form-wrapper #search::-webkit-input-placeholder {
- color: #999;
- font-weight: normal;
- }
- .form-wrapper #submit {
- background-color: #0483a0;
- background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
- background-image: -webkit-linear-gradient(top, #DD3333, #8a2a21);
- background-image: -moz-linear-gradient(top, #DD3333, #8a2a21);
- background-image: -ms-linear-gradient(top, #DD3333, #8a2a21);
- background-image: -o-linear-gradient(top, #DD3333, #8a2a21);
- background-image: linear-gradient(top, #DD3333, #8a2a21);
- border: 1px solid #4f120c;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- border-radius: 3px;
- -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #FFF;
- -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #FFF;
- box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #FFF;
- color: #fafafa;
- cursor: pointer;
- height: 42px;
- float: right;
- font: 15px Arial, Helvetica;
- padding: 0;
- text-transform: uppercase;
- text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
- width: 100px;
- }
- .form-wrapper #submit:hover,
- .form-wrapper #submit:focus {
- background-color: #31b2c3;
- background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
- background-image: -webkit-linear-gradient(top, #8a2a21, #DD3333);
- background-image: -moz-linear-gradient(top, #8a2a21, #DD3333);
- background-image: -ms-linear-gradient(top, #8a2a21, #DD3333);
- background-image: -o-linear-gradient(top, #8a2a21, #DD3333);
- background-image: linear-gradient(top, #8a2a21, #DD3333);
- }
- .form-wrapper #submit:active {
- -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
- -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
- outline: 0;
- }
- .form-wrapper #submit::-moz-focus-inner {
- border: 0;
- }
- </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement