Created
June 20, 2012 09:51
-
-
Save airen/2959128 to your computer and use it in GitHub Desktop.
A web page created at CodePen.io
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>CodePen · A Pen by airen</title> | |
| <link rel="stylesheet" href="http://codepen.io/stylesheets/css/reset.css"> | |
| <style> | |
| html, body { height:100%; } | |
| *{ margin:0; padding:0; } | |
| body { | |
| background:#c0c0c0 url(bg.jpg) repeat; | |
| color:#464339; | |
| font:400 12px/1.3 Arial, Helvetica, sans-serif; | |
| } | |
| /*--controls--*/ | |
| .leftSide { | |
| margin: 20px auto; | |
| position:relative; | |
| width:590px; | |
| z-index:2; | |
| } | |
| .panel { | |
| height:auto; | |
| position:relative; | |
| width:560px; | |
| } | |
| .panel.one { | |
| z-index:50; | |
| } | |
| .panel.two { | |
| z-index:90; | |
| } | |
| .panel.three { | |
| z-index:50; | |
| } | |
| .panelWrap { | |
| padding-top: 10px; | |
| } | |
| .panelTitle, | |
| .sliderMinus, | |
| .sliderContainer, | |
| .sliderPlus, | |
| .largeInputContainer { | |
| display: inline-block; | |
| vertical-align: middle; | |
| } | |
| .panelContent { | |
| background-color:#ddd; | |
| background-image:-moz-linear-gradient(top, #eeeeee, #cccccc); | |
| background-image:-ms-linear-gradient(top, #eeeeee, #cccccc); | |
| background-image:-o-linear-gradient(top, #eeeeee, #cccccc); | |
| background-image:-webkit-linear-gradient(top, #eeeeee, #cccccc); | |
| background-image:linear-gradient(top, #eeeeee, #cccccc); | |
| border:1px solid #999; | |
| border-top:0; | |
| box-shadow: | |
| 1px 0 rgba(127, 127, 127, 0.25), | |
| 2px 0 rgba(127, 127, 127, 0.125), | |
| 3px 0 rgba(127, 127, 127, 0.0625), | |
| -1px 0 rgba(127, 127, 127, 0.25), | |
| -2px 0 rgba(127, 127, 127, 0.125), | |
| -3px 0 rgba(127, 127, 127, 0.0625); | |
| height:50px; | |
| margin:0 10px; | |
| padding:0 15px; | |
| position:relative; | |
| width:515px; | |
| } | |
| .panelContent:after { | |
| content:""; | |
| position:absolute; | |
| } | |
| .panel.one .panelContent { | |
| border-radius:5px 5px 0 0; | |
| border-top:1px solid #999; | |
| box-shadow: | |
| 1px 0 rgba(127, 127, 127, 0.25), | |
| 2px 0 rgba(127, 127, 127, 0.125), | |
| 3px 0 rgba(127, 127, 127, 0.0625), | |
| -1px 0 rgba(127, 127, 127, 0.25), | |
| -2px 0 rgba(127, 127, 127, 0.125), | |
| -3px 0 rgba(127, 127, 127, 0.0625), | |
| 0 -1px rgba(127, 127, 127, 0.25), | |
| 0 -2px rgba(127, 127, 127, 0.25), | |
| 0 -3px rgba(127, 127, 127, 0.0625); | |
| } | |
| .panel.three .panelContent { | |
| border-radius:0 0 5px 5px; | |
| box-shadow: | |
| 1px 0 rgba(127, 127, 127, 0.25), | |
| 2px 0 rgba(127, 127, 127, 0.125), | |
| 3px 0 rgba(127, 127, 127, 0.0625), | |
| -1px 0 rgba(127, 127, 127, 0.25), | |
| -2px 0 rgba(127, 127, 127, 0.125), | |
| -3px 0 rgba(127, 127, 127, 0.0625), | |
| 0 1px rgba(127, 127, 127, 0.25), | |
| 0 2px rgba(127, 127, 127, 0.125), | |
| 0 3px rgba(127, 127, 127, 0.0625); | |
| height:52px; | |
| } | |
| .panelTitle { | |
| width:93px; | |
| display: inline-block; | |
| vertical-align: middle; | |
| } | |
| .panelTitle p { | |
| font-weight:700; | |
| font-weight:400\0/; | |
| text-shadow:0 1px #fff; | |
| } | |
| .sliderContainer { | |
| margin:0 5px; | |
| position:relative; | |
| } | |
| .slider { | |
| background-color:#8d8374; | |
| border-radius:5px; | |
| box-shadow: | |
| 0 0 1px #000 inset, | |
| 0 3px 3px -3px #000 inset, | |
| 0 1px 1px -1px #fff; | |
| eight:10px; | |
| margin-top:1px; | |
| position:relative; | |
| width:304px; | |
| } | |
| .sliderThumb { | |
| background-color:#b7b7b7; | |
| background-image:-moz-linear-gradient(left,#ccc,#9b9b9b); | |
| background-image:-ms-linear-gradient(left,#ccc,#9b9b9b); | |
| background-image:-o-linear-gradient(left,#ccc,#9b9b9b); | |
| background-image:-webkit-linear-gradient(left,#ccc,#9b9b9b); | |
| background-image:linear-gradient(left,#ccc,#9b9b9b); | |
| border:1px solid #999; | |
| border-radius:10px; | |
| box-shadow:2px 3px 5px -5px #000; | |
| cursor:pointer; | |
| height:19px; | |
| left:45px; | |
| position:absolute; | |
| top:-6px; | |
| width:49px; | |
| } | |
| .panel.two .sliderThumb { | |
| left: 80px; | |
| } | |
| .panel.three .sliderThumb { | |
| left: 25px; | |
| } | |
| .sliderThumb:before { | |
| background-color:#ddd; | |
| background-image:-moz-linear-gradient(left,#9c9c9c,#c8c8c8); | |
| background-image:-ms-linear-gradient(left,#9c9c9c,#c8c8c8); | |
| background-image:-o-linear-gradient(left,#9c9c9c,#c8c8c8); | |
| background-image:-webkit-linear-gradient(left,#9c9c9c,#c8c8c8); | |
| background-image:linear-gradient(left,#9c9c9c,#c8c8c8); | |
| border-radius:10px; | |
| content:""; | |
| height:19px; | |
| left:10px; | |
| position:absolute; | |
| top:0; | |
| width:30px; | |
| } | |
| .sliderThumb:after { | |
| background-color:#eee; | |
| background-image:-moz-linear-gradient(left,#999, #999 1px, #d1d1d1 1px, #d1d1d1 2px, #b7b7b7 2px, #b7b7b7); | |
| background-image:-ms-linear-gradient(left,#999, #999 1px, #d1d1d1 1px, #d1d1d1 2px, #b7b7b7 2px, #b7b7b7); | |
| background-image:-o-linear-gradient(left,#999, #999 1px, #d1d1d1 1px, #d1d1d1 2px, #b7b7b7 2px, #b7b7b7); | |
| background-image:-webkit-linear-gradient(left,#999, #999 1px, #d1d1d1 1px, #d1d1d1 2px, #b7b7b7 2px, #b7b7b7); | |
| background-image:linear-gradient(left,#999, #999 1px, #d1d1d1 1px, #d1d1d1 2px, #b7b7b7 2px, #b7b7b7); | |
| background-size:3px auto; | |
| content:""; | |
| height:19px; | |
| left:21px; | |
| position:absolute; | |
| top:0; | |
| width:9px; | |
| } | |
| .sliderMinus { | |
| color:#8d8374; | |
| font-size:29px; | |
| margin-top:-5px; | |
| text-shadow:0 1px #fff; | |
| } | |
| .sliderPlus { | |
| color:#8d8374; | |
| font-size:20px; | |
| margin-right:16px; | |
| text-shadow:0 1px #fff; | |
| } | |
| .largeInputContainer { | |
| background-color:#e8e8e8; | |
| border:1px solid #c1c1c1; | |
| border-radius:7px; | |
| box-shadow: 0 0 3px rgba(255, 255, 255, .2), 0 3px 5px -5px #666 inset; | |
| font-size:18px; | |
| font-weight:700; | |
| height:27px; | |
| padding:0; | |
| width:43px; | |
| } | |
| .largeInputContainer:hover { | |
| box-shadow:0 0 7px rgba(255, 255, 255, .7), 0 3px 5px -5px #666 inset; | |
| } | |
| .largeInput { | |
| background-color:transparent; | |
| border:none; color:#464339; | |
| font:700 18px Arial, Helvetica, sans-serif; | |
| height:27px; | |
| margin:0; | |
| padding:0; | |
| text-align:center; | |
| width:43px; | |
| } | |
| .openMore { | |
| background-color:#b7b7b7; | |
| background-image:-moz-linear-gradient(top, #c8c8c8, #a5a5a5); | |
| background-image:-ms-linear-gradient(top, #c8c8c8, #a5a5a5); | |
| background-image:-o-linear-gradient(top, #c8c8c8, #a5a5a5); | |
| background-image:-webkit-linear-gradient(top, #c8c8c8, #a5a5a5); | |
| background-image:linear-gradient(top, #c8c8c8, #a5a5a5); | |
| border:1px solid #666; | |
| border-radius:9px; | |
| cursor:pointer; | |
| display:block; | |
| height:16px; | |
| position:absolute; | |
| right:-6px; | |
| top:27px; | |
| width:16px; | |
| } | |
| .openMoreText { | |
| font-size:17px; | |
| font-weight:700; | |
| line-height:16px; | |
| padding-left:3px; | |
| text-shadow:0 1px rgba(255, 255, 255, 0.3); | |
| } | |
| .openMore { top:15px; } | |
| .panel.three .panelContent { | |
| border-radius: 0 0 5px 5px; | |
| box-shadow: | |
| 1px 0 rgba(127, 127, 127, 0.25), | |
| 2px 0 rgba(127, 127, 127, 0.125), | |
| 3px 0 rgba(127, 127, 127, 0.063), | |
| -1px 0 rgba(127, 127, 127, 0.25), | |
| -2px 0 rgba(127, 127, 127, 0.125), | |
| -3px 0 rgba(127, 127, 127, 0.063), | |
| 0 1px rgba(127, 127, 127, 0.25), | |
| 0 2px rgba(127, 127, 127, 0.125), | |
| 0 3px rgba(127, 127, 127, 0.063); | |
| eight: 52px; | |
| } | |
| </style> | |
| <style> | |
| #codepen-footer, #codepen-footer * { | |
| -webkit-box-sizing: border-box !important; | |
| -moz-box-sizing: border-box !important; | |
| box-sizing: border-box !important; | |
| } | |
| #codepen-footer { | |
| display: block !important; | |
| position: fixed !important; | |
| bottom: 0 !important; | |
| left: 0 !important; | |
| width: 100% !important; | |
| padding: 0 10px !important; | |
| margin: 0 !important; | |
| height: 30px !important; | |
| line-height: 30px !important; | |
| font-size: 12px !important; | |
| color: #eeeeee !important; | |
| background-color: #505050 !important; | |
| text-align: left !important; | |
| background: -webkit-linear-gradient(top, #505050, #383838) !important; | |
| background: -moz-linear-gradient(top, #505050, #383838) !important; | |
| background: -ms-linear-gradient(top, #505050, #383838) !important; | |
| background: -o-linear-gradient(top, #505050, #383838) !important; | |
| border-top: 1px solid black !important; | |
| border-bottom: 1px solid black !important; | |
| border-radius: 0 !important; | |
| box-shadow: inset 0 1px 0 #6e6e6e, 0 2px 2px rgba(0, 0, 0, 0.4) !important; | |
| z-index: 300 !important; | |
| font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important; | |
| letter-spacing: 0 !important; | |
| word-spacing: 0 !important; | |
| } | |
| #codepen-footer a { | |
| color: #a7a7a7 !important; | |
| text-decoration: none !important; | |
| } | |
| #codepen-footer a:hover { | |
| color: white !important; | |
| } | |
| </style> | |
| <script src="http://codepen.io/javascripts/libs/prefixfree.min.js"></script> | |
| </head> | |
| <body> | |
| <div class="leftSide"> | |
| <div class="panel one"> | |
| <div class="panelContent"> | |
| <div class="openMore"> | |
| <span class="openMoreText">+</span> | |
| </div> | |
| <div class="panelWrap"> | |
| <div class="panelTitle"><p>Border-radius</p></div> | |
| <div class="sliderMinus">-</div> | |
| <div class="sliderContainer"> | |
| <div id="brSlider" class="slider"> | |
| <div id="brThumb" class="sliderThumb"></div> | |
| </div> | |
| </div> | |
| <div class="sliderPlus">+</div> | |
| <div class="largeInputContainer"> | |
| <input id="brInput" class="largeInput" autocomplete="off" type="text" value="45"/> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="panel two"> | |
| <div class="panelContent"> | |
| <div class="openMore"> | |
| <span class="openMoreText">+</span> | |
| </div> | |
| <div class="panelWrap"< | |
| <div class="panelTitle"><p>Box-Shadow</p></div> | |
| <div class="sliderMinus">-</div> | |
| <div class="sliderContainer"> | |
| <div id="brSlider" class="slider"> | |
| <div id="brThumb" class="sliderThumb"></div> | |
| </div> | |
| </div> | |
| <div class="sliderPlus">+</div> | |
| <div class="largeInputContainer"> | |
| <input id="brInput" class="largeInput" autocomplete="off" type="text" value="80"/> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="panel three"> | |
| <div class="panelContent"> | |
| <div class="openMore"> | |
| <span class="openMoreText"<+>/span> | |
| </div> | |
| <div class="panelWrap"> | |
| <div class="panelTitle"><p>Text-shadow</p></div> | |
| <div class="sliderMinus">-</div> | |
| <div class="sliderContainer"> | |
| <div id="brSlider" class="slider"> | |
| <div id="brThumb" class="sliderThumb"></div> | |
| </div> | |
| </div> | |
| <div class="sliderPlus">+</div> | |
| <div class="largeInputContainer"> | |
| <input id="brInput" class="largeInput" autocomplete="off" type="text" value="25"/> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="http://code.jquery.com/jquery-latest.js"></script> | |
| <script src="http://codepen.io/javascripts/libs/modernizr.js"></script> | |
| <div id="codepen-footer"> | |
| <a style="color: #f73535 !important;" href="https://codepen.wufoo.com/forms/m7x3r3/def/field14=" onclick="window.open(this.href, null, 'height=517, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Report Abuse</a> | |
| | |
| <a href="/airen/pen/1/1">Edit this Pen</a> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="leftSide"> | |
| <div class="panel one"> | |
| <div class="panelContent"> | |
| <div class="openMore"> | |
| <span class="openMoreText">+</span> | |
| </div> | |
| <div class="panelWrap"> | |
| <div class="panelTitle"><p>Border-radius</p></div> | |
| <div class="sliderMinus">-</div> | |
| <div class="sliderContainer"> | |
| <div id="brSlider" class="slider"> | |
| <div id="brThumb" class="sliderThumb"></div> | |
| </div> | |
| </div> | |
| <div class="sliderPlus">+</div> | |
| <div class="largeInputContainer"> | |
| <input id="brInput" class="largeInput" autocomplete="off" type="text" value="45"/> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="panel two"> | |
| <div class="panelContent"> | |
| <div class="openMore"> | |
| <span class="openMoreText">+</span> | |
| </div> | |
| <div class="panelWrap"< | |
| <div class="panelTitle"><p>Box-Shadow</p></div> | |
| <div class="sliderMinus">-</div> | |
| <div class="sliderContainer"> | |
| <div id="brSlider" class="slider"> | |
| <div id="brThumb" class="sliderThumb"></div> | |
| </div> | |
| </div> | |
| <div class="sliderPlus">+</div> | |
| <div class="largeInputContainer"> | |
| <input id="brInput" class="largeInput" autocomplete="off" type="text" value="80"/> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="panel three"> | |
| <div class="panelContent"> | |
| <div class="openMore"> | |
| <span class="openMoreText"<+>/span> | |
| </div> | |
| <div class="panelWrap"> | |
| <div class="panelTitle"><p>Text-shadow</p></div> | |
| <div class="sliderMinus">-</div> | |
| <div class="sliderContainer"> | |
| <div id="brSlider" class="slider"> | |
| <div id="brThumb" class="sliderThumb"></div> | |
| </div> | |
| </div> | |
| <div class="sliderPlus">+</div> | |
| <div class="largeInputContainer"> | |
| <input id="brInput" class="largeInput" autocomplete="off" type="text" value="25"/> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, body { height:100%; } | |
| *{ margin:0; padding:0; } | |
| body { | |
| background:#c0c0c0 url(bg.jpg) repeat; | |
| color:#464339; | |
| font:400 12px/1.3 Arial, Helvetica, sans-serif; | |
| } | |
| /*--controls--*/ | |
| .leftSide { | |
| margin: 20px auto; | |
| position:relative; | |
| width:590px; | |
| z-index:2; | |
| } | |
| .panel { | |
| height:auto; | |
| position:relative; | |
| width:560px; | |
| } | |
| .panel.one { | |
| z-index:50; | |
| } | |
| .panel.two { | |
| z-index:90; | |
| } | |
| .panel.three { | |
| z-index:50; | |
| } | |
| .panelWrap { | |
| padding-top: 10px; | |
| } | |
| .panelTitle, | |
| .sliderMinus, | |
| .sliderContainer, | |
| .sliderPlus, | |
| .largeInputContainer { | |
| display: inline-block; | |
| vertical-align: middle; | |
| } | |
| .panelContent { | |
| background-color:#ddd; | |
| background-image:-moz-linear-gradient(top, #eeeeee, #cccccc); | |
| background-image:-ms-linear-gradient(top, #eeeeee, #cccccc); | |
| background-image:-o-linear-gradient(top, #eeeeee, #cccccc); | |
| background-image:-webkit-linear-gradient(top, #eeeeee, #cccccc); | |
| background-image:linear-gradient(top, #eeeeee, #cccccc); | |
| border:1px solid #999; | |
| border-top:0; | |
| box-shadow: | |
| 1px 0 rgba(127, 127, 127, 0.25), | |
| 2px 0 rgba(127, 127, 127, 0.125), | |
| 3px 0 rgba(127, 127, 127, 0.0625), | |
| -1px 0 rgba(127, 127, 127, 0.25), | |
| -2px 0 rgba(127, 127, 127, 0.125), | |
| -3px 0 rgba(127, 127, 127, 0.0625); | |
| height:50px; | |
| margin:0 10px; | |
| padding:0 15px; | |
| position:relative; | |
| width:515px; | |
| } | |
| .panelContent:after { | |
| content:""; | |
| position:absolute; | |
| } | |
| .panel.one .panelContent { | |
| border-radius:5px 5px 0 0; | |
| border-top:1px solid #999; | |
| box-shadow: | |
| 1px 0 rgba(127, 127, 127, 0.25), | |
| 2px 0 rgba(127, 127, 127, 0.125), | |
| 3px 0 rgba(127, 127, 127, 0.0625), | |
| -1px 0 rgba(127, 127, 127, 0.25), | |
| -2px 0 rgba(127, 127, 127, 0.125), | |
| -3px 0 rgba(127, 127, 127, 0.0625), | |
| 0 -1px rgba(127, 127, 127, 0.25), | |
| 0 -2px rgba(127, 127, 127, 0.25), | |
| 0 -3px rgba(127, 127, 127, 0.0625); | |
| } | |
| .panel.three .panelContent { | |
| border-radius:0 0 5px 5px; | |
| box-shadow: | |
| 1px 0 rgba(127, 127, 127, 0.25), | |
| 2px 0 rgba(127, 127, 127, 0.125), | |
| 3px 0 rgba(127, 127, 127, 0.0625), | |
| -1px 0 rgba(127, 127, 127, 0.25), | |
| -2px 0 rgba(127, 127, 127, 0.125), | |
| -3px 0 rgba(127, 127, 127, 0.0625), | |
| 0 1px rgba(127, 127, 127, 0.25), | |
| 0 2px rgba(127, 127, 127, 0.125), | |
| 0 3px rgba(127, 127, 127, 0.0625); | |
| height:52px; | |
| } | |
| .panelTitle { | |
| width:93px; | |
| display: inline-block; | |
| vertical-align: middle; | |
| } | |
| .panelTitle p { | |
| font-weight:700; | |
| font-weight:400\0/; | |
| text-shadow:0 1px #fff; | |
| } | |
| .sliderContainer { | |
| margin:0 5px; | |
| position:relative; | |
| } | |
| .slider { | |
| background-color:#8d8374; | |
| border-radius:5px; | |
| box-shadow: | |
| 0 0 1px #000 inset, | |
| 0 3px 3px -3px #000 inset, | |
| 0 1px 1px -1px #fff; | |
| eight:10px; | |
| margin-top:1px; | |
| position:relative; | |
| width:304px; | |
| } | |
| .sliderThumb { | |
| background-color:#b7b7b7; | |
| background-image:-moz-linear-gradient(left,#ccc,#9b9b9b); | |
| background-image:-ms-linear-gradient(left,#ccc,#9b9b9b); | |
| background-image:-o-linear-gradient(left,#ccc,#9b9b9b); | |
| background-image:-webkit-linear-gradient(left,#ccc,#9b9b9b); | |
| background-image:linear-gradient(left,#ccc,#9b9b9b); | |
| border:1px solid #999; | |
| border-radius:10px; | |
| box-shadow:2px 3px 5px -5px #000; | |
| cursor:pointer; | |
| height:19px; | |
| left:45px; | |
| position:absolute; | |
| top:-6px; | |
| width:49px; | |
| } | |
| .panel.two .sliderThumb { | |
| left: 80px; | |
| } | |
| .panel.three .sliderThumb { | |
| left: 25px; | |
| } | |
| .sliderThumb:before { | |
| background-color:#ddd; | |
| background-image:-moz-linear-gradient(left,#9c9c9c,#c8c8c8); | |
| background-image:-ms-linear-gradient(left,#9c9c9c,#c8c8c8); | |
| background-image:-o-linear-gradient(left,#9c9c9c,#c8c8c8); | |
| background-image:-webkit-linear-gradient(left,#9c9c9c,#c8c8c8); | |
| background-image:linear-gradient(left,#9c9c9c,#c8c8c8); | |
| border-radius:10px; | |
| content:""; | |
| height:19px; | |
| left:10px; | |
| position:absolute; | |
| top:0; | |
| width:30px; | |
| } | |
| .sliderThumb:after { | |
| background-color:#eee; | |
| background-image:-moz-linear-gradient(left,#999, #999 1px, #d1d1d1 1px, #d1d1d1 2px, #b7b7b7 2px, #b7b7b7); | |
| background-image:-ms-linear-gradient(left,#999, #999 1px, #d1d1d1 1px, #d1d1d1 2px, #b7b7b7 2px, #b7b7b7); | |
| background-image:-o-linear-gradient(left,#999, #999 1px, #d1d1d1 1px, #d1d1d1 2px, #b7b7b7 2px, #b7b7b7); | |
| background-image:-webkit-linear-gradient(left,#999, #999 1px, #d1d1d1 1px, #d1d1d1 2px, #b7b7b7 2px, #b7b7b7); | |
| background-image:linear-gradient(left,#999, #999 1px, #d1d1d1 1px, #d1d1d1 2px, #b7b7b7 2px, #b7b7b7); | |
| background-size:3px auto; | |
| content:""; | |
| height:19px; | |
| left:21px; | |
| position:absolute; | |
| top:0; | |
| width:9px; | |
| } | |
| .sliderMinus { | |
| color:#8d8374; | |
| font-size:29px; | |
| margin-top:-5px; | |
| text-shadow:0 1px #fff; | |
| } | |
| .sliderPlus { | |
| color:#8d8374; | |
| font-size:20px; | |
| margin-right:16px; | |
| text-shadow:0 1px #fff; | |
| } | |
| .largeInputContainer { | |
| background-color:#e8e8e8; | |
| border:1px solid #c1c1c1; | |
| border-radius:7px; | |
| box-shadow: 0 0 3px rgba(255, 255, 255, .2), 0 3px 5px -5px #666 inset; | |
| font-size:18px; | |
| font-weight:700; | |
| height:27px; | |
| padding:0; | |
| width:43px; | |
| } | |
| .largeInputContainer:hover { | |
| box-shadow:0 0 7px rgba(255, 255, 255, .7), 0 3px 5px -5px #666 inset; | |
| } | |
| .largeInput { | |
| background-color:transparent; | |
| border:none; color:#464339; | |
| font:700 18px Arial, Helvetica, sans-serif; | |
| height:27px; | |
| margin:0; | |
| padding:0; | |
| text-align:center; | |
| width:43px; | |
| } | |
| .openMore { | |
| background-color:#b7b7b7; | |
| background-image:-moz-linear-gradient(top, #c8c8c8, #a5a5a5); | |
| background-image:-ms-linear-gradient(top, #c8c8c8, #a5a5a5); | |
| background-image:-o-linear-gradient(top, #c8c8c8, #a5a5a5); | |
| background-image:-webkit-linear-gradient(top, #c8c8c8, #a5a5a5); | |
| background-image:linear-gradient(top, #c8c8c8, #a5a5a5); | |
| border:1px solid #666; | |
| border-radius:9px; | |
| cursor:pointer; | |
| display:block; | |
| height:16px; | |
| position:absolute; | |
| right:-6px; | |
| top:27px; | |
| width:16px; | |
| } | |
| .openMoreText { | |
| font-size:17px; | |
| font-weight:700; | |
| line-height:16px; | |
| padding-left:3px; | |
| text-shadow:0 1px rgba(255, 255, 255, 0.3); | |
| } | |
| .openMore { top:15px; } | |
| .panel.three .panelContent { | |
| border-radius: 0 0 5px 5px; | |
| box-shadow: | |
| 1px 0 rgba(127, 127, 127, 0.25), | |
| 2px 0 rgba(127, 127, 127, 0.125), | |
| 3px 0 rgba(127, 127, 127, 0.063), | |
| -1px 0 rgba(127, 127, 127, 0.25), | |
| -2px 0 rgba(127, 127, 127, 0.125), | |
| -3px 0 rgba(127, 127, 127, 0.063), | |
| 0 1px rgba(127, 127, 127, 0.25), | |
| 0 2px rgba(127, 127, 127, 0.125), | |
| 0 3px rgba(127, 127, 127, 0.063); | |
| eight: 52px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment