bookblock/css/demo5.css

0001 .bb-bookblock {
0002         width: 300px;
0003         height: 225px;
0004 }
0005
0006 ul.bb-custom-grid {
0007         list-style: none;
0008         margin: 0 auto 30px auto;
0009         padding: 0;
0010         max-width: 700px;
0011         display: block;
0012 }
0013
0014 /* Micro clearfix hack by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */
0015 ul.bb-custom-grid:before,
0016 ul.bb-custom-grid:after {
0017         content: " ";
0018     display: table;
0019 }
0020
0021 ul.bb-custom-grid:after {
0022         clear: both;
0023 }
0024 /* end clearfix hack */
0025
0026 ul.bb-custom-grid li {
0027         float: left;
0028         width: 300px;
0029         height: 260px;
0030         padding: 10px 20px 50px 20px;
0031         background: #fff;
0032         position: relative;
0033         box-sizing: content-box;
0034         margin-bottom: 20px;
0035         box-shadow: 0 1px 2px rgba(0,0,0,0.2);
0036 }
0037
0038 ul.bb-custom-grid li:nth-child(odd) {
0039         margin-right: 20px;
0040 }
0041
0042 ul.bb-custom-grid li:before,
0043 ul.bb-custom-grid li:after{
0044         content: '';
0045         position: absolute;
0046         z-index: -2;
0047         bottom: 15px;
0048         left:  10px;
0049         width: 50%;
0050         height: 20%;
0051         box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
0052         -webkit-transform: rotate(-3deg);
0053         -moz-transform: rotate(-3deg);
0054         -ms-transform: rotate(-3deg);
0055         -o-transform: rotate(-3deg);
0056         transform: rotate(-3deg);
0057 }
0058
0059 ul.bb-custom-grid li:after {
0060         right: 10px;
0061         left: auto;
0062         -webkit-transform: rotate(3deg);
0063         transform: rotate(3deg);
0064 }
0065
0066 ul.bb-custom-grid li a {
0067         display: block;
0068 }
0069
0070 ul.bb-custom-grid li h3 {
0071         color: #9a9b92;
0072         margin: 0;
0073         padding: 0;
0074         text-transform: uppercase;
0075         font-weight: 700;
0076         font-size: 14px;
0077         line-height: 35px;
0078         letter-spacing: 1px;
0079 }
0080
0081 ul.bb-custom-grid nav {
0082         text-align: center;
0083         margin-top: 12px;
0084         padding-bottom: 5px;
0085 }
0086
0087 ul.bb-custom-grid nav span {
0088         display: inline-block;
0089         width: 12px;
0090         height: 12px;
0091         border-radius: 50%;
0092         background: #f0f0f0;
0093         margin: 3px;
0094         cursor: pointer;
0095         box-shadow: inset 0 1px 1px rgba(0,0,0,0.2), 0 2px 1px rgba(255,255,255,0.9);
0096 }
0097
0098 ul.bb-custom-grid nav span.bb-current {
0099         background: #ecb700;
0100 }