style.css: .holder{ position:relative; margin-bottom:10px; } .content-inner{ width:500px; margin:0 auto; } .content-inner h3{ color:#fff; margin:0 10px; } .content-inner .source.wide{ width:1000px; margin-left:-250px; } .content-inner .source.medium{ width:650px; margin-left:-75px; } .content-inner .source span{ position:absolute; top:7px; right:10px; color:#35BFFF; font-size:12px; cursor:pointer; } .content-inner .source span:after{ content:' + '; } .content-inner .source span.active{ color:#666; } .content-inner .source span.active:after{ content:' - '; } .content-inner .source pre{ color:#ccc; background:#000; border:1px solid #333; padding:7px 15px; box-shadow:0 0 7px #333; } .content-inner .source pre hr{ border:none; border-bottom:1px dashed #333; } .bar{ margin:5px 0 3px; border:6px solid #333; background:#333; overflow:hidden; border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px; box-shadow:1px 1px 1px #777; -moz-box-shadow:1px 1px 1px #777; -webkit-box-shadow:1px 1px 1px #777; } .bar > span{ display:block; height:20px; width:20%; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } .gradient > span{ box-shadow:0 5px 5px rgba(255,255,255,0.6) inset, 0 -5px 7px rgba(0, 0, 0, 0.4) inset; -moz-box-shadow:0 5px 5px rgba(255,255,255,0.6) inset, 0 -5px 7px rgba(0, 0, 0, 0.4) inset; -webkit-box-shadow:0 5px 5px rgba(255,255,255,0.6) inset, 0 -5px 7px rgba(0, 0, 0, 0.4) inset; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33ffffff', endColorstr='#33000000',GradientType=0 ); } .gloss > span{ background-image: -moz-linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 45%, rgba(0,0,0,0.2) 55%, rgba(0,0,0,0.1) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.2)), color-stop(45%,rgba(255,255,255,0.1)), color-stop(55%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0.1))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.1) 45%, rgba(0,0,0,0.2) 55%, rgba(0,0,0,0.1) 100%); background-image: -o-linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 45%, rgba(0,0,0,0.2) 55%, rgba(0,0,0,0.1) 100%); background-image: -ms-linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 45%, rgba(0,0,0,0.2) 55%, rgba(0,0,0,0.1) 100%); background-image: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 45%, rgba(0,0,0,0.2) 55%, rgba(0,0,0,0.1) 100%); } .stripe > span{ background-size:30px 30px; -moz-background-size:30px 30px; -webkit-background-size:30px 30px; -o-background-size:30px 30px; background-image: -moz-linear-gradient(-45deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0.2)), color-stop(25%,rgba(255,255,255,0.2)), color-stop(25%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.2)), color-stop(75%,rgba(255,255,255,0.2)), color-stop(75%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0))); background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.3) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%); background-image: -o-linear-gradient(-45deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%); background-image: -ms-linear-gradient(-45deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%); background-image: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%); } .pattern > span{ background-size: 13px, 29px, 37px, 53px; background-image: -moz-linear-gradient(left, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.07) 50%, transparent 50%), -moz-linear-gradient(left, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.13) 50%, transparent 50%), -moz-linear-gradient(left, transparent 0%, transparent 50%, rgba(255,255,255,0.17) 50%), -moz-linear-gradient(left, transparent 0%, transparent 50%, rgba(255,255,255,0.19) 50%); background-image: -webkit-linear-gradient(left, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.07) 50%, transparent 50%), -webkit-linear-gradient(left, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.13) 50%, transparent 50%), -webkit-linear-gradient(left, transparent 0%, transparent 50%, rgba(255,255,255,0.17) 50%), -webkit-linear-gradient(left, transparent 0%, transparent 50%, rgba(255,255,255,0.19) 50%); background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,.07)), color-stop(50%,rgba(255,255,255,.07)), color-stop(50%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0))), -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,.13)), color-stop(50%,rgba(255,255,255,.13)), color-stop(50%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0))), -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.17)), color-stop(50%,rgba(255,255,255,0.17))), -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.19)), color-stop(50%,rgba(255,255,255,0.19))); background-image: -o-linear-gradient(left, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.07) 50%, transparent 50%), -o-linear-gradient(left, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.13) 50%, transparent 50%), -o-linear-gradient(left, transparent 0%, transparent 50%, rgba(255,255,255,0.17) 50%), -o-linear-gradient(left, transparent 0%, transparent 50%, rgba(255,255,255,0.19) 50%); background-image: -ms-linear-gradient(left, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.07) 50%, transparent 50%), -ms-linear