Chromium Code Reviews Chromium Code Reviews
Issue 9385040:
Updated home screen to match new UI mocks. (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src| Index: remoting/webapp/main.css |
| diff --git a/remoting/webapp/main.css b/remoting/webapp/main.css |
| index 80350a4f202d6a6b41badc47b833ba6449cd40cb..b39f3d586a953fa7f5c41d8205aebd4a5e1e8a46 100644 |
| --- a/remoting/webapp/main.css |
| +++ b/remoting/webapp/main.css |
| @@ -3,18 +3,4443 @@ |
| * found in the LICENSE file. |
| */ |
|
Jamie
2012/02/22 22:33:46
Most of this new CSS is unnecessary, but until the
|
| +html,body,div,span,applet,object,iframe, |
| +h1,h2,h3,h4,h5,h6,p,blockquote,pre, |
| +a,abbr,acronym,address,big,cite,code, |
| +del,dfn,em,font,img,ins,kbd,q,s,samp, |
| +small,strike,strong,sub,sup,tt,var, |
| +dl,dt,dd,ol,ul,li, |
| +fieldset,form,label,legend, |
| +table,caption,tbody,tfoot,thead,tr,th,td { |
| + margin: 0; |
| + padding: 0; |
| + border: 0; |
| + outline: 0; |
| + font-weight: inherit; |
| + font-style: inherit; |
| + font-size: 100%; |
| + font-family: inherit; |
| + vertical-align: baseline; |
| +} |
| +body { |
| + line-height: 1; |
| + color: black; |
| + background: white; |
| +} |
| +ol,ul { |
| + list-style: none; |
| +} |
| +table { |
| + border-collapse: separate; |
| + border-spacing: 0; |
| +} |
| +caption,th,td { |
| + text-align: left; |
| + font-weight: normal; |
| +} |
| +blockquote:before,blockquote:after, |
| +q:before,q:after { |
| + content: ""; |
| +} |
| +blockquote,q { |
| + quotes: "" ""; |
| +} |
| +input::-moz-focus-inner { |
| + border: 0; |
| +} |
| + |
| + |
| +/*------------------------------------------------------------------ |
| +@global Type |
| +------------------------------------------------------------------*/ |
| +body,body input,body button,body td { |
| + font-family: "Arial", "Helvetica", sans-serif; |
| + color: #222; |
| + font-size:12px; |
| + -webkit-tap-highlight-color: rgba(0,0,0,0); |
| +} |
| +h1,h2,h3,h4,h5 { |
| + font-size: 16px; |
| + line-height:24px; |
| + font-weight: normal; |
| + color: #222; |
| +} |
| +p { |
| + margin: 0 0 1em; |
| + font-size: 13px; |
| + line-height: 18px; |
| +} |
| +p.nonLatin { |
| + font-size: 14px; |
| + line-height: 21px; |
| +} |
| +li { |
| + line-height: 17px; |
| +} |
| +a { |
| + text-decoration: none; |
| + color: #15c; |
| + cursor: pointer; |
| +} |
| +a:visited { |
| + color: #61c; |
| +} |
| +a:active { |
| + color: #d14836; |
| +} |
| +a.secondary { |
| + text-decoration: none; |
| + color: #2D9AE3; |
| +} |
| +iframe { |
| + border: 0px; |
| +} |
| +strong, b { |
| + color: #000; |
| + font-weight:bold; |
| +} |
| +em { |
| + font-style: italic; |
| +} |
| + |
| +div.mobile { |
| + width:320px; |
| +} |
| + |
| +.clearfix:after { clear: both; } |
| +.clearfix { zoom: 1; } |
| + |
| +/*------------------------------------------------------------------ |
| +Stickersheet global styles |
| +------------------------------------------------------------------*/ |
| +#stickersheet #siteTitle { |
| + padding: 30px 40px; |
| +} |
| +#stickers > ul > li { |
| + padding: 30px 0; |
| + border-bottom: 1px solid #DDD; |
| + position: relative; |
| +} |
| +.componentName { |
| + display: block; |
| + height: 29px; |
| + float: none; |
| + font-size: 20px; |
| + line-height: 24px; |
| + color: #222; |
| + margin-bottom: 21px; |
| + margin-left: 0px; |
| + margin-right: 0px; |
| +} |
| +.option { |
| + float: left; |
| + width: 336px; |
| + margin-right: 16px; |
| +} |
| +.option .componentName { |
| + margin-bottom: 0; |
| +} |
| +#stickersheet h2.componentName a { |
| + color: #222; |
| +} |
| +#stickers > ul { |
| + margin: 0 44px; |
| +} |
| +/* stickersheet specific positioning */ |
| +.kd-modaldialog.demo, |
| +.kd-settings.demo { |
| + position: relative; |
| + top: 0; |
| + left: 0; |
| + margin-left: 0; |
| + -webkit-transform: scale(1.0); |
| + z-index: 0; |
| +} |
| +#stickers #kd-tooltip { |
| + top: 75px; |
| + margin-left: 0; |
| +} |
| +#wrap { |
| + overflow: auto; |
| + height: 100%; |
| +} |
| +#stickers > ul > li ol { |
| + margin: 5px 10px; |
| +} |
| +#stickers > ul > li ol li { |
| + margin-bottom: 5px; |
| +} |
| +#stickers .kd-buttonbar { |
| + margin-bottom: 16px; |
| +} |
| +#modaldemo { |
| + display: none; |
| +} |
| +.sectionTitle { |
| + float: left; |
| + width: 160px; |
| + margin-right: 16px; |
| + clear: left; |
| + margin-bottom: 16px; |
| +} |
| +.sectionContent { |
| + float: left; |
| + clear: right; |
| + margin-bottom: 16px; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Styleguide container |
| +------------------------------------------------------------------*/ |
| +.styleguide { |
| + padding: 0 44px 44px; |
| +} |
| +.styleguide .section { |
| + position:relative; |
| + padding: 44px 0; |
| + height: 100%; |
| + overflow:visible; |
| + border-bottom: 1px solid #ebebeb; |
| +} |
| +.styleguide .section.clearfix { |
| + overflow:hidden; |
| +} |
| +.styleguide .section .section { |
| + padding: 16px 0; |
| + border-bottom: 0; |
| +} |
| +.styleguide .section h3 { |
| +/* margin: 16px 0;*/ |
| +} |
| +#styleGuideNav { |
| + width:156px; |
| + position:fixed; |
| + left:0; |
| + top:28px; |
| +} |
| +#styleGuideNav li li a{ |
| + width:144px; |
| + overflow:hidden; |
| + white-space:nowrap; |
| + text-overflow:ellipsis; |
| +} |
| +#styleGuideNav li li a.selected{ |
| + color:#d14836; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Notes And Metrics |
| +------------------------------------------------------------------*/ |
| +.notesBox .kd-zippy{ |
| + margin-top:-20px; |
| +} |
| +.notesBox .kd-zippy .row{ |
| + float:right; |
| + display: block; |
| + clear:both; |
| +} |
| +.notesBox .kd-disclosureindicator { |
| + position:relative; |
| + top:-2px; |
| + cursor:default; |
| +} |
| +.notesBox .kd-disclosureindicator + h3{ |
| + display: inline; |
| + margin-left:6px; |
| + cursor:default; |
| +} |
| +.notesBox .kd-zippycontent{ |
| + height:100%; |
| + overflow:hidden; |
| + margin-bottom: 20px; |
| + margin-left:16px; |
| + background-color: #F5F5F5; |
| + clear:both; |
| +} |
| +.notesBox .notes{ |
| + width:320px; |
| + float:left; |
| + padding-top:10px; |
| + padding-bottom:10px; |
| + padding-left:16px; |
| +} |
| + |
| +.notesBox h3{ |
| +margin-bottom:10px; |
| +margin-top:10px; |
| +} |
| + |
| +.notesBox .metrics{ |
| + width:320px; |
| + float:left; |
| + padding-top:10px; |
| + padding-bottom:10px; |
| + padding-left:16px; |
| + |
| +} |
| + |
| +.notesBox ul { |
| + list-style:disc outside; |
| + padding: 0 16px 16px; |
| +} |
| + |
| +.notesBox ul li { |
| + margin-bottom: 5px; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Grid |
| +------------------------------------------------------------------*/ |
| +#grid { |
| + border-left: 44px solid rgba(255,255,0,0.1); |
| + border-right: 44px solid rgba(255,255,0,0.1); |
| + left: 0; |
| + top: 0; |
| + bottom: 0; |
| + z-index: 100; |
| + -webkit-box-sizing: content-box; |
| + overflow: hidden; |
| + -webkit-transition: all 0.218s; |
| +} |
| +html.x-expand #grid { |
| + border-left: 72px solid rgba(255,255,0,0.05); |
| + border-right: 72px solid rgba(255,255,0,0.05); |
| +} |
| +.gridline { |
| + width: 72px; |
| + height: 117px; |
| + background-color: rgba(0,0,127,0.04); |
| + border-left: 28px solid rgba(0,0,127,0.01); |
| + border-right: 28px solid rgba(0,0,127,0.01); |
| + margin-right: 16px; |
| + float: left; |
| + -webkit-box-sizing: border-box; |
| +} |
| +.gridline-right { |
| + float: right; |
| + margin-right: 0; |
| + margin-left: 16px; |
| +} |
| +.gridfill { |
| + background: red; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Typography |
| +------------------------------------------------------------------*/ |
| +.productName{ |
| + font-size: 20px; |
| + line-height: 24px; |
| + color: #DD4B39; |
| +} |
| +.title{ |
| + color:#1155CC; |
| + font-weight:normal; |
| +} |
| +.greytext{ |
| + color:#777777; |
| +} |
| +.bodylink{ |
| + color:#1155CC; |
| +} |
| +.searchlink{ |
| + color:#1122CC; |
| +} |
| +.visitedlink{ |
| + color:#6611CC; |
| +} |
| +.redlink{ |
| + color:#DD4B39; |
| +} |
| +.secondary{ |
| + font-size:11px; |
| + color:#777777; |
| +} |
| +.secondary.nonLatin{ |
| + font-size:12px; |
| + color:#777777; |
| +} |
| +.source{ |
| + color:#009933; |
| +} |
| + |
| +#typography p { |
| + line-height: 170%; |
| + margin-bottom: 0; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Colors |
| +------------------------------------------------------------------*/ |
| +#colorTable { |
| + border-left:1px solid #ebebeb; |
| + border-bottom:1px solid #ebebeb; |
| +} |
| +#colorTable th{ |
| + background:#f5f5f5; |
| + border:1px solid #e5e5e5; |
| + border-right:1px solid #e5e5e5; |
| + border-top:1px solid #e5e5e5; |
| + font-weight:bold; |
| + color:#222; |
| +} |
| +#colorTable td, #colorTable th{ |
| + text-align:left; |
| + border-top:1px solid #ebebeb; |
| + border-right:1px solid #ebebeb; |
| + padding:4px 4px; |
| +} |
| +.colorBlock { |
| + color: #FFF; |
| + font-weight: bold; |
| +} |
| +.colorBlock.dark { |
| + color: #222; |
| +} |
| +.colorBlock span { |
| + text-align: left; |
| + display: inline-block; |
| + width: 100%; |
| +} |
| +.colorBlock:first-child { |
| + margin-left: 0; |
| +} |
| + |
| + |
| +/* Background Color Changer */ |
| +#bgColorChanger{ |
| + display:block; |
| + position: relative; |
| + width:250px; |
| + margin-bottom:40px; |
| + |
| + background: #FFF; |
| + outline: 1px solid rgba(0,0,0,0.2); |
| + -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); |
| + -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); |
| + box-shadow: 0 2px 4px rgba(0,0,0,0.2); |
| + padding: 16px; |
| + -webkit-border-radius: 2px; |
| + -moz-border-radius: 2px; |
| + border-radius: 2px; |
| +} |
| +#bgColorChanger .title { |
| + padding-right:10px; |
| +} |
| + |
| +#otherColor{ |
| + display:none; |
| + width:auto; |
| + margin-top:16px; |
| +} |
| +#otherColor input[type=text]{ |
| + width:auto; |
| +} |
| +#otherColor ul li, #otherColor label{display:inline-block; margin-bottom:0;} |
| +#otherColor ul li{margin-left:8px;} |
| +#otherColor ul li:first-child{margin-left:0;} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Horizontal Rules |
| +------------------------------------------------------------------*/ |
| +.whiteBox,.greyBox { |
| + padding: 16px 0; |
| + margin-bottom: 16px; |
| +} |
| +.greyBox { |
| + background: #f1f1f1; |
| +} |
| +.kd-ruledBox { |
| + width: 100%; |
| +} |
| +.kd-greyRuled { |
| + border-top: 1px solid #e5e5e5; |
| +} |
| +.kd-whiteRuled { |
| + border-top: 1px solid #ebebeb; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Shadows |
| +------------------------------------------------------------------*/ |
| +.shadowList{ |
| + padding:16px; |
| + list-style:disc inside; |
| +} |
| +.shadowList > li{ |
| + margin-bottom:16px; |
| + position:relative; |
| +} |
| +.shadowList .kd-modaldialog{ |
| + display:block; |
| + position:relative; |
| + top:0; |
| + left:0; |
| + opacity:1; |
| + margin:16px 0; |
| + -webkit-transform:none; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Search Bar (Google Bar) |
| +------------------------------------------------------------------*/ |
| +#kd-searchbar, |
| +#kd-googlebar{ |
| + position:relative; |
| + background:#f1f1f1; |
| + height:29px; |
| + padding:21px 0; |
| + border-bottom:1px solid #e5e5e5; |
| + z-index:40; |
| +} |
| +#kd-googlebar.alternate{ |
| + z-index:30; |
| +} |
| + |
| +/* Search area */ |
| +#kd-search { |
| + position:absolute; |
| + left:220px; |
| + right:308px; |
| + bottom:21px; |
| + max-width:600px; |
| + height:29px; |
| +} |
| +#kd-searchfield { |
| + position:absolute; |
| + left:0; |
| + right:88px; |
| + margin:0; |
| + font-size:16px; |
| + color:#000; |
| +} |
| +::-webkit-input-placeholder{ |
| + color:#999; |
| +} |
| +#kd-searchfield:-moz-placeholder, input:-moz-placeholder{ |
| + color:#999; |
| +} |
| +#kd-searchbutton { |
| + position:absolute; |
| + top:0; |
| + right:0; |
| +} |
| +#kd-searchbutton img { |
| + opacity:1; |
| +} |
| +#kd-googlebar.alternate #kd-search { |
| + left:414px; |
| + max-width:406px; |
| +} |
| +.kd-googlebuttonbar .kd-button{ |
| + min-width:0; |
| + width:28px; |
| +} |
| +.kd-googlebuttonbar .kd-button .maskedIcon{ |
| + background:#7b7b7b; |
| + display:inline-block; |
| + width:21px; |
| + height:21px; |
| + margin:4px 0 0; |
| + -moz-transition: all 0.218s; |
| + -webkit-transition: all 0.218s; |
| + -o-transition: all 0.218s; |
| +} |
| +.kd-googlebuttonbar .kd-button:hover .maskedIcon, |
| +.kd-googlebuttonbar .kd-button:active .maskedIcon, |
| +.kd-googlebuttonbar .kd-button.selected .maskedIcon{ |
| + background:#DD4B39; |
| +} |
| +.kd-googlebuttonbar .kd-button .maskedIcon img{visibility:hidden;} |
| +.kd-googlebuttonbar.kd-segmentedcontrol{ |
| + display:inline-block; |
| + float:none; |
| + margin-left:0; |
| +} |
| + |
| + |
| +/* Mobile variations */ |
| +.mobile #kd-searchbar, |
| +.mobile #kd-googlebar { |
| + height:29px; |
| + padding:14px 0; |
| +} |
| +.mobile #kd-searchbar .kd-buttonbar.right, |
| +.mobile #kd-googlebar .kd-buttonbar.right{ |
| + margin-right:7px; |
| +} |
| +.mobile #kd-searchbar #kd-social .kd-share, |
| +.mobile #kd-googlebar #kd-social .kd-share{ |
| + padding-left:0; |
| + margin-left:9px; |
| +} |
| +.mobile #kd-searchbar #kd-social .kd-notifications, |
| +.mobile #kd-googlebar #kd-social .kd-notifications{ |
| + min-width:19px; |
| + width:19px; |
| +} |
| +.mobile #kd-searchbar #kd-social .kd-share, |
| +.mobile #kd-googlebar #kd-social .kd-share{ |
| + min-width:19px; |
| + width:19px; |
| +} |
| +.mobile #kd-searchbar #kd-social .kd-avatar, |
| +.mobile #kd-googlebar #kd-social .kd-avatar{ |
| + margin-left:9px; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Subcomponent: App Switcher |
| +------------------------------------------------------------------*/ |
| +.kd-appswitcher { |
| + position:relative; |
| + top:-21px; |
| + width:160px; |
| + height:71px; |
| + margin:0 0 0 44px; |
| + float:left; |
| +} |
| +.kd-appswitcher .logo { |
| + display:block; |
| + width:160px; |
| + height:71px; |
| + cursor:pointer; |
| +} |
| +.kd-appswitcher .logo img { |
| + display:block; |
| + margin-top:1px; |
| + width:117px; |
| + height:71px; |
| + float:left; |
| + image-rendering:optimizeQuality; |
| +} |
| +.kd-appswitcher .logo .kd-disclosureindicator { |
| + display:block; |
| + position:relative; |
| + top:50%; |
| + float:left; |
| + margin-top:-2px; |
| + margin-left:6px; |
| + background-position:0 0; |
| + -webkit-transform:rotate(90deg); |
| + -moz-transform:rotate(90deg); |
| + transform:rotate(90deg); |
| + opacity:0.3; |
| + |
| + -webkit-transition:opacity 0.218s; |
| + -moz-transition:opacity 0.218s; |
| + transition:opacity 0.218s; |
| +} |
| +.kd-appswitcher:hover .logo .kd-disclosureindicator { |
| + opacity:1; |
| + -webkit-transition:opacity 0.18s; |
| + -moz-transition:opacity 0.18s; |
| + transition:opacity 0.18s; |
| +} |
| +.kd-appswitcher.open span.logo { |
| + cursor:default; |
| +} |
| + |
| +.kd-appswitcher-menu { |
| + position:absolute; |
| + top:71px; |
| + left:-4000px; |
| + max-height:44px; |
| + margin-top:-10px; |
| + |
| + background:#2d2d2d; |
| + border-bottom:1px solid #686868; |
| + |
| + -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2); |
| + -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2); |
| + box-shadow: 2px 2px 5px rgba(0,0,0,0.2); |
| + |
| + z-index:9999; |
| + opacity:0; |
| + -webkit-transition-property:opacity, max-height, margin, left; |
| + -webkit-transition-duration:0.218s, 0.218s, 0.218s, 0s; |
| + -webkit-transition-delay:0s, 0s, 0s, 0.218s; |
| + -moz-transition-property:opacity, max-height, margin, left; |
| + -moz-transition-duration:0.218s, 0.218s, 0.218s, 0s; |
| + -moz-transition-delay:0s, 0s, 0s, 0.218s; |
| + transition-property:opacity, max-height, margin, left; |
| + transition-duration:0.218s, 0.218s, 0.218s, 0s; |
| + transition-delay:0s, 0s, 0s, 0.218s; |
| +} |
| +.kd-appswitcher.open .kd-appswitcher-menu { |
| + left:-18px; |
| + max-height:400px; |
| + opacity:1; |
| + margin-top:0; |
| + -webkit-transition-property:opacity, max-height, margin, left; |
| + -webkit-transition-duration:0s, 0s, 0.218s, 0s; |
| + -webkit-transition-delay:0s; |
| + -moz-transition-property:opacity, max-height, margin, left; |
| + -moz-transition-duration:0s, 0s, 0.218s, 0s; |
| + -moz-transition-delay:0s; |
| + transition-property:opacity, max-height, margin, left; |
| + transition-duration:0s, 0s, 0.218s, 0s; |
| + transition-delay:0s; |
| +} |
| +.kd-appswitcher-menu:before { |
| + content:""; |
| + display:block; |
| + position:absolute; |
| + top:-12px; |
| + left:133px; |
| + margin-left:-1px; |
| + border-style:solid; |
| + border-color:#777 transparent; |
| + border-width:0 12px 12px; |
| + z-index:20; |
| +} |
| +.kd-appswitcher-menu:after { |
| + content:""; |
| + display:block; |
| + position:absolute; |
| + top:-11px; |
| + left:133px; |
| + border-style:solid; |
| + border-color:#2d2d2d transparent; |
| + border-width:0 11px 11px; |
| + z-index:21; |
| +} |
| +.kd-app { |
| + width:192px; |
| + height:43px; |
| + border-top:1px solid #7d7d7d; |
| +} |
| +.kd-app:first-child { |
| + border-top-color:#2d2d2d; |
| +} |
| +.kd-app > a { |
| + display:block; |
| + width:135px; |
| + height:43px; |
| + line-height:43px; |
| + padding-left:57px; |
| + background-position:12px center; |
| + background-repeat:no-repeat; |
| + color:#fff; |
| +} |
| +.kd-app:hover > a, |
| +a.logo:hover + .kd-appswitcher-menu .kd-app-search > a { |
| + background-color:#4c4c4c; |
| +} |
| +.kd-app-double > a { |
| + height:34px; |
| + padding-top:9px; |
| + line-height:13px; |
| +} |
| +.app-caption { |
| + font-size:10px; |
| + color:rgba(255,255,255,0.5); |
| +} |
| + |
| +.killTransition { |
| + -webkit-transition-duration:0; |
| + -moz-transition-duration:0; |
| + transition:0; |
| +} |
| +.kd-more-menu { |
| + position:absolute; |
| + top:0; |
| + bottom:-1px; |
| + left:-1000%; |
| + width:0; |
| + overflow:hidden; |
| + |
| + background:#fff; |
| + border:1px solid #e5e5e5; |
| + |
| + -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); |
| + -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); |
| + box-shadow: 0 2px 4px rgba(0,0,0,0.2); |
| + |
| + -webkit-transition-property:width, left; |
| + -webkit-transition-duration:0.218s, 0s; |
| + -webkit-transition-easing-function:ease-in, linear; |
| + -webkit-transition-delay:0.2s, 0.418s; |
| + -moz-transition-property:width, left; |
| + -moz-transition-duration:0.218s, 0s; |
| + -moz-transition-easing-function:ease-in, linear; |
| + -moz-transition-delay:0.2s, 0.418s; |
| + -o-transition-property:width, left; |
| + -o-transition-duration:0.218s, 0s; |
| + -o-transition-easing-function:ease-in, linear; |
| + -o-transition-delay:0.2s, 0.418s; |
| + transition-property:width, left; |
| + transition-duration:0.218s, 0s; |
| + transition-easing-function:ease-in, linear; |
| + transition-delay:0.2s, 0.418s; |
| +} |
| +.kd-app:hover > .kd-more-menu, |
| +.kd-app .kd-more-menu.open { |
| + width:192px; |
| + left:100%; |
| + |
| + -webkit-transition-easing-function:ease-out, linear; |
| + -webkit-transition-delay:0.2s; |
| + -moz-transition-easing-function:ease-out, linear; |
| + -moz-transition-delay:0.2s; |
| + -o-transition-easing-function:ease-out, linear; |
| + -o-transition-delay:0.2s; |
| + transition-easing-function:ease-out, linear; |
| + transition-delay:0.2s; |
| +} |
| +.kd-more-menu .kd-more-container { |
| + position:absolute; |
| + top:0; |
| + right:0; |
| + width:192px; |
| +} |
| +.kd-more-container ul{ |
| + float:left; |
| +} |
| +.kd-appswitcher-menu .kd-app-more:hover .kd-more-menu, |
| +.kd-appswitcher-menu .kd-app-more .kd-more-container { |
| + width:576px; |
| +} |
| +.kd-more-menu .kd-app { border-top:1px solid #e5e5e5; } |
| +.kd-more-menu .kd-app:first-child { border-top:none; } |
| +.kd-more-menu .kd-app:hover > a { background-color:rgba(0,0,0,0.05); } |
| + |
| +.kd-more-menu .kd-app > a { color:#2d2d2d; } |
| + |
| + |
| +.mobile .kd-appswitcher { |
| + position:absolute; |
| + top:0; |
| + left:0; |
| + margin:0 0 0 16px; |
| + float:none; |
| + width:120px; |
| + height:57px; |
| +} |
| +.mobile .kd-appswitcher .kd-appswitcher-menu { top:57px; } |
| +.mobile .kd-appswitcher.open .kd-appswitcher-menu { left:-10px; } |
| + |
| +.mobile .kd-appswitcher .kd-appswitcher-menu:before { |
| + top:-8px; |
| + left:15px; |
| + border-width:0 8px 8px; |
| +} |
| +.mobile .kd-appswitcher .kd-appswitcher-menu:after { |
| + top:-7px; |
| + left:15px; |
| + border-width:0 7px 7px; |
| +} |
| +.mobile .kd-appswitcher .logo { width:120px; height:60px; } |
| +.mobile .kd-appswitcher .logo img { width:99px; height:60px; } |
| + |
| +.mobile .kd-more-menu { left:-9999px; } |
| +.mobile .kd-appswitcher-menu .kd-app-more .kd-more-container { width:192px; } |
| + |
| +.mobile .kd-app:hover > .kd-more-menu, |
| +.mobile .kd-app .kd-more-menu.open { |
| + width:192px; |
| + left:50px; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Sidebars |
| +------------------------------------------------------------------*/ |
| +#styleguide #sidebars { |
| + overflow: visible; |
| + height: 544px; |
| +} |
| +.sidebarHolder { |
| + width: 220px; |
| + float: left; |
| +/* border-left:1px solid #ebebeb; |
| + border-right:1px solid #ebebeb;*/ |
| +} |
| +.sidebarHolder h4 { |
| + padding: 16px 0; |
| +} |
| + |
| +.kd-content-sidebar { |
| + width:160px; |
| + padding:16px 0px 16px 44px; |
| + border-left:1px solid #ebebeb; |
| +} |
| +.kd-content-sidebar li { |
| + position:relative; |
| + margin-left: -16px; |
| + border-bottom:1px solid transparent; |
| +} |
| +.kd-content-sidebar li a { |
| + display: block; |
| + line-height: 29px; |
| + color: #333; |
| + font-size: 13px; |
| + cursor:default; |
| +} |
| + |
| +.kd-content-sidebar .kd-zippy .row a { |
| + margin-left: 16px; |
| +} |
| +.kd-content-sidebar li |
| +.kd-content-sidebar ul ul{ |
| + margin-left:28px; |
| +} |
| +.kd-content-sidebar ul ul li, |
| +.kd-content-sidebar ul ul li a{ |
| + line-height:19px; |
| +} |
| +.kd-content-sidebar ul ul li a{ |
| + padding-left: 12px; |
| + margin-left: 32px; |
| +} |
| +.kd-content-sidebar ul ul li .kd-disclosureindicator{ |
| + top:0; |
| + height:19px; |
| +} |
| +.kd-content-sidebar ul ul li:hover .kd-disclosureindicator{ |
| +/* height:16px;*/ |
| +} |
| +.kd-content-sidebar li.selected .kd-disclosureindicator, |
| + |
| +.kd-content-sidebar li .kd-disclosureindicator { |
| + position: relative; |
| + display: block; |
| + float: left; |
| + width:15px; |
| + height:29px; |
| + background-position:center; |
| + margin-left:-1px; |
| + opacity: 0.8; |
| + filter: alpha(opacity=80); |
| + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; |
| + -moz-transition: none; |
| + -o-transition: none; |
| + -webkit-transition: none; |
| + cursor:default; |
| +} |
| +.kd-content-sidebar li:hover > .kd-disclosureindicator { |
| + opacity: 1.0; |
| + filter: alpha(opacity=80); |
| + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; |
| +} |
| + |
| +.kd-content-sidebar ul > li > a { |
| + padding-left: 16px; |
| +} |
| + |
| +.kd-content-sidebar ul > li > a:hover { |
| + background-color: #eee; |
| +} |
| +.kd-content-sidebar span.row { |
| + display: block; |
| +} |
| +.kd-content-sidebar span.row.split:hover { |
| + background-color: transparent; |
| +} |
| + |
| +.kd-content-sidebar span.row:hover, |
| +.kd-content-sidebar .kd-zippycontent li a:hover, |
| +.kd-content-sidebar span.row.split a:hover, |
| +.kd-content-sidebar span.row.split .kd-disclosureindicator:hover { |
| + background-color: #eee; |
| + color: #222; |
| +} |
| + |
| +.kd-content-sidebar .kd-zippy span.row:hover .kd-disclosureindicator, |
| +.kd-content-sidebar .kd-zippy span.row.split .kd-disclosureindicator:hover { |
| + opacity: 1.0; |
| + filter: alpha(opacity=80); |
| + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; |
| +} |
| + |
| +.kd-content-sidebar li.selected a { |
| + color: #d14836; |
| +} |
| +ul.iconlist li a, li.kd-labellistitem a { |
| + background-position: 25px 50%; |
| + background-repeat: no-repeat; |
| +} |
| +li.kd-labellistitem.selected a{ |
| + background-position:20px 50%; |
| +} |
| +ul.iconlist li.kd-sidebarlistitem a{ |
| + background-position: 44px 50%; |
| + padding-left:75px; |
| +} |
| +ul.iconlist li.kd-sidebarlistitem.selected a{ |
| + background-position: 39px 50%; |
| + padding-left:70px; |
| +} |
| +.kd-menulabel{ |
| + position:absolute; |
| + height:11px; |
| + width:11px; |
| + top:11px; |
| + right:11px; |
| + cursor:default; |
| + border-radius:1px; |
| + -moz-border-radius:1px; |
| + -webkit-border-radius:1px; |
| +} |
| +.kd-menulabel.red{ |
| + background:#DD4B39; |
| +} |
| +.kd-menulabel.grey{ |
| + background:#999999; |
| +} |
| +.kd-menulabel.blue{ |
| + background:#4D90F0; |
| +} |
| + |
| +.kd-content-sidebar .kd-menulist li{ |
| + margin-left:0; |
| +} |
| +.kd-flyouttrigger.selected .kd-menulist{ |
| + display:block; |
| +} |
| +.kd-flyouttrigger.selected .kd-menulist.clip{ |
| + overflow-y:auto; |
| +} |
| +/*sidebars - extended hover and selected states*/ |
| +.kd-content-sidebar .kd-sidebarlistitem{ |
| + margin-left:-44px; |
| +} |
| +.kd-content-sidebar .kd-sidebarlistitem > a{ |
| + padding-left:44px; |
| +} |
| +.kd-content-sidebar .kd-sidebarlistitem.selected > a/*, .kd-content-sidebar .kd-sidebarlistitem.kd-zippy.expanded > .row*/{ |
| + border-left:5px solid #999; |
| + padding-left:39px; |
| +} |
| +.kd-content-sidebar .kd-sidebarlistitem > .row{ |
| + padding-left:28px; |
| +} |
| +/*sidebar zippy*/ |
| +.kd-content-sidebar .kd-sidebarlistitem.kd-zippy .kd-zippycontent{ |
| + margin-left:29px; |
| +} |
| + |
| +.kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split:hover .row{ |
| + background-color:transparent; |
| +} |
| +.kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split .row{ |
| + padding-left:0; |
| +} |
| +.kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split .kd-disclosureindicator{ |
| + padding-left:28px; |
| + background-position:34px center; |
| + margin-left:0; |
| +} |
| + |
| +.kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split .kd-disclosureindicator{ |
| + width:13px; |
| + border-right:1px solid #FFF; |
| +} |
| +.kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split .label > a{ |
| + margin-left:41px; |
| + padding-left:3px; |
| +} |
| +.kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split .kd-disclosureindicator:hover, |
| +/*.kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split .kd-disclosureindicator.down,*/ |
| +.kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split .label:hover{ |
| + background-color:#EEE; |
| + color: #222; |
| +} |
| +.kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split .label{ |
| + display:block; |
| +} |
| +.kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split .kd-disclosureindicator.down{ |
| + background-position:32px center; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: App bars |
| +------------------------------------------------------------------*/ |
| +.kd-appbar { |
| + position:relative; |
| + padding: 21px 0; |
| + border-bottom: 1px solid #ebebeb; |
| + height: 29px; |
| + z-index:20; |
| + background:#fff; |
| +} |
| +.kd-appbar .kd-appname { |
| + width: 160px; |
| + margin-right: 16px; |
| + margin-left: 44px; |
| + height: 29px; |
| + float: left; |
| + font-size: 20px; |
| + font-weight: normal; |
| + line-height: 29px; |
| + color: #666; |
| + white-space:nowrap; |
| +} |
| +.kd-appbar .kd-appname a { color: #666; cursor:pointer; } |
| +#stickers .kd-appbar .kd-buttonbar { |
| + margin-bottom: 0; |
| +} |
| +.kd-buttonbar{ |
| + height:29px; |
| + line-height:29px; |
| +} |
| +.kd-buttonbar.right { |
| + float: right; |
| + margin-right: 44px; |
| +} |
| +.kd-buttonbar.left { |
| + float: left; |
| +} |
| +.kd-buttonbar span.kd-count, .kd-buttonbar span.kd-count strong { |
| + line-height: 29px; |
| + color: #666; |
| +} |
| +.kd-buttonbar.right span.kd-count { |
| + float: left; |
| +} |
| +.kd-buttonbar.left span.kd-count { |
| + float: right; |
| + margin-left: 16px; |
| +} |
| +#styleguide .section .kd-appbar h4 { |
| + margin-bottom: 16px; |
| +} |
| + |
| +/* Maps (mini) app bar */ |
| +.maps .kd-appbar { width:380px; } |
| +.maps .kd-appbar .kd-appname { width:auto; } |
| +.maps .kd-maps-collapser { |
| + display:block; |
| + position:absolute; |
| + top:0; |
| + bottom:0; |
| + right:0; |
| + width:15px; |
| + line-height:71px; |
| + vertical-align:middle; |
| + text-align:center; |
| + border: 1px solid #ebebeb; |
| + border-width:0 1px; |
| + background:#fff; |
| + cursor:pointer; |
| + -webkit-transition:line-height 0.18s; |
| + -moz-transition:line-height 0.18s; |
| + transition:line-height 0.18s; |
| +} |
| +.maps .kd-maps-collapser .kd-disclosureindicator { |
| + -webkit-transform: rotate(-180deg); |
| + -moz-transform: rotate(-180deg); |
| + transform: rotate(-180deg); |
| +} |
| +.maps .kd-maps-collapser:hover { |
| + background:#f1f1f1; |
| +} |
| + |
| +/* Mobile app bar */ |
| +.mobile .kd-appbar { |
| + padding:7px 0; |
| +} |
| +.mobile .kd-appbar .kd-appname{ |
| + width:auto; |
| + margin-left:16px; |
| + margin-right:7px; |
| + |
| + font-size:16px; |
| +} |
| +.mobile .kd-appbar .kd-appname.arrowed:before { |
| + display:inline-block; |
| + content:"‹"; |
| + text-align:right; |
| + width:12px; |
| + margin:0 4px 0 -16px; |
| +} |
| +.mobile .kd-appbar .kd-buttonbar.right{ |
| + margin-right:7px; |
| +} |
| +.mobile .kd-appbar .kd-button-action img, |
| +.mobile .kd-appbar .kd-button-share img, |
| +.mobile .kd-appbar .kd-button-submit img{ |
| + opacity:1; |
| +} |
| +.mobile .kd-appbar .kd-button.mid { margin-left:-1px; } |
| +.mobile .kd-appbar .kd-button.right { margin-left:-1px; } |
| +.mobile .kd-appbar .kd-button:first-child { margin-left:0; } |
| +.mobile .kd-appbar .cancel-button{ |
| + display:inline-block; |
| + height:27px; |
| + width:34px; |
| + line-height:27px; |
| + padding:4px 0; |
| + text-align:center; |
| + margin-left:6px; |
| + margin-right:-6px; |
| +} |
| +.mobile .kd-appbar .cancel-button img{ |
| + opacity:.667; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Toolbar |
| +------------------------------------------------------------------*/ |
| +.kd-toolbar { |
| + height: 29px; |
| + background: #f1f1f1; |
| + border-top: 1px solid #e5e5e5; |
| + border-bottom: 1px solid #ebebeb; |
| + margin-bottom: 44px; |
| + padding: 8px 44px 4px; |
| +} |
| +.kd-toolbar .kd-select .kd-disclosureindicator{ |
| + margin-top:7px; |
| +} |
| +.kd-toolbarbutton { |
| + border-color: transparent; |
| + background: 0; |
| +} |
| +.kd-toolbar .kd-button{ |
| + margin-left:0; |
| +} |
| +.kd-toolbar .kd-button.right{ |
| + margin-left:0; |
| +} |
| +.kd-toolbarbutton.small, .kd-toolbar .kd-button.small{ |
| + width:24px; |
| + min-width:24px; |
| +} |
| +.kd-toolbarbutton, .kd-toolbar .kd-button{ |
| + height:24px; |
| + line-height:24px; |
| +} |
| +.kd-toolbar .kd-menubutton.small{ |
| + width:34px; |
| +} |
| +.kd-toolbar .kd-button{ |
| + min-width:0; |
| +} |
| +.kd-toolbarbutton:hover { |
| + border: 1px solid #C6C6C6; |
| + color: #333; |
| + -webkit-transition: all 0.0s; |
| + -moz-transition: all 0.0s; |
| + -o-transition: all 0.0s; |
| + transition: all 0.0s; |
| + background-color: #f8f8f8; |
| + background-image: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f1f1f1)); |
| + background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1); |
| + background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1); |
| + background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1); |
| + background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1); |
| + background-image: linear-gradient(top,#f8f8f8,#f1f1f1); |
| + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8f8f8',EndColorStr='#f1f1f1'); |
| + -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1); |
| + -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.1); |
| + box-shadow: 0px 1px 1px rgba(0,0,0,0.1); |
| +} |
| +.kd-toolbarbutton:active { |
| + background-color: #f6f6f6; |
| + background-image: -webkit-gradient(linear,left top,left bottom,from(#f6f6f6),to(#f1f1f1)); |
| + background-image: -webkit-linear-gradient(top,#f6f6f6,#f1f1f1); |
| + background-image: -moz-linear-gradient(top,#f6f6f6,#f1f1f1); |
| + background-image: -ms-linear-gradient(top,#f6f6f6,#f1f1f1); |
| + background-image: -o-linear-gradient(top,#f6f6f6,#f1f1f1); |
| + background-image: linear-gradient(top,#f6f6f6,#f1f1f1); |
| + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f6f6f6',EndColorStr='#f1f1f1'); |
| + -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); |
| + -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); |
| + box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); |
| +} |
| +.kd-toolbarbutton:visited { |
| + color: #666; |
| +} |
| +.kd-toolbarbutton.focus { |
| + outline: none; |
| + border: 1px solid #4d90fe; |
| +} |
| + |
| +.kd-toolbarbutton.selected, .kd-toolbar .kd-menubutton.selected { |
| + background-color: #EEEEEE; |
| + background-image: -webkit-gradient(linear,left top,left bottom,from(#EEEEEE),to(#E0E0E0)); |
| + background-image: -webkit-linear-gradient(top,#EEEEEE,#E0E0E0); |
| + background-image: -moz-linear-gradient(top,#EEEEEE,#E0E0E0); |
| + background-image: -ms-linear-gradient(top,#EEEEEE,#E0E0E0); |
| + background-image: -o-linear-gradient(top,#EEEEEE,#E0E0E0); |
| + background-image: linear-gradient(top,#EEEEEE,#E0E0E0); |
| + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EEEEEE',EndColorStr='#E0E0E0'); |
| + -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); |
| + -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); |
| + box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); |
| + border: 1px solid #CCC; |
| + color: #333; |
| +} |
| + |
| +.kd-toolbar .kd-select, |
| +.kd-toolbar .kd-menubutton { |
| +/* background: #fdfdfd;*/ |
| + border-color:transparent; |
| +} |
| +.kd-toolbar .kd-select:hover, .kd-toolbar .kd-menubutton:hover{ |
| + border: 1px solid #C6C6C6; |
| +} |
| + |
| +.kd-toolbarseparator { |
| + display: inline-block; |
| + float: left; |
| + height: 17px; |
| + margin: 5px 6px 0 6px; |
| + border-left: 1px solid #CCC; |
| +} |
| +.kd-toolbarseparator.no-margin{ |
| + margin:5px 0 0 0; |
| +} |
| +.buttongroup{ |
| + margin:0 6px; |
| + float:left; |
| +} |
| +.buttongroup.first{ |
| + margin-left:0; |
| +} |
| +.kd-toolbarseparator + .kd-select.kd-menubutton { |
| + margin-left: -1px; |
| +} |
| +.kd-select.kd-menubutton + .kd-toolbarseparator { |
| + margin-left: -1px; |
| +} |
| +.kd-toolbar .kd-select.kd-menubutton { |
| + background-color: transparent; |
| + background-image: none; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Tabs |
| +------------------------------------------------------------------*/ |
| +#stickersheet .kd-tabbar-horz { |
| + margin-bottom: 40px; |
| +} |
| +.kd-tabbar-horz { |
| + border-bottom: 1px solid #ccc; |
| + height: 28px; |
| +} |
| +.kd-tabbar-vert { |
| + border-right: 1px solid #ccc; |
| + display: inline-block; |
| + width: 71px; |
| + height: 100%; |
| +} |
| +.kd-tabbutton { |
| + display: inline-block; |
| + min-width: 54px;*min-width:70px;/*hello,IE7!*/ |
| + text-align: center; |
| + color: #666; |
| + font-size: 11px; |
| + font-weight: bold; |
| + height: 27px; |
| + padding: 0 8px; |
| + line-height: 27px; |
| + -webkit-transition: all 0.218s; |
| + -moz-transition: all 0.218s; |
| + -o-transition: all 0.218s; |
| + transition: all 0.218s; |
| + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f5f5',EndColorStr='#f1f1f1'); |
| + -webkit-user-select:none; |
| + -moz-user-select:none; |
| + cursor:default; |
| + |
| + border: 1px solid transparent; |
| +} |
| + |
| +.kd-tabbutton:hover { |
| + color: #222; |
| +} |
| + |
| +.kd-tabbutton:active { |
| + color: #333; |
| +} |
| + |
| +.kd-tabbutton.selected { |
| + color: #202020; |
| + border: 1px solid #ccc; |
| +} |
| + |
| +.kd-tabbar-horz .kd-tabbutton { |
| + -webkit-border-top-left-radius:2px; |
| + -webkit-border-top-right-radius:2px; |
| + -moz-border-radius-topleft: 2px; |
| + -moz-border-radius-topright: 2px; |
| + border-top-left-radius: 2px; |
| + border-top-right-radius: 2px; |
| +} |
| + |
| +.kd-tabbar-vert .kd-tabbutton { |
| + -webkit-border-top-left-radius:2px; |
| + -webkit-border-bottom-left-radius:2px; |
| + -moz-border-radius-topleft: 2px; |
| + -moz-border-radius-bottomleft: 2px; |
| + border-top-left-radius: 2px; |
| + border-bottom-left-radius: 2px; |
| +} |
| + |
| +.kd-tabbar-horz .kd-tabbutton.selected { |
| + border-bottom: 1px solid #fff; |
| + |
| +} |
| + |
| +.kd-tabbar-vert .kd-tabbutton.selected { |
| + border-right: 1px solid #fff; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Buttons |
| +------------------------------------------------------------------*/ |
| +.kd-button { |
| + display: inline-block; |
| + min-width: 54px;*min-width:70px;/*hello,IE7!*/ |
| + border:1px solid #DCDCDC; |
| + border: 1px solid rgba(0,0,0,0.1); |
| + text-align: center; |
| + color: #444; |
| + font-size: 11px; |
| + font-weight: bold; |
| + height: 27px; |
| + padding: 0 8px; |
| + line-height: 27px; |
| + -webkit-border-radius:2px; |
| + -moz-border-radius: 2px; |
| + border-radius: 2px; |
| + -webkit-transition: all 0.218s; |
| + -moz-transition: all 0.218s; |
| + -o-transition: all 0.218s; |
| + transition: all 0.218s; |
| + background-color: #f5f5f5; |
| + background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f1f1f1)); |
| + background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1); |
| + background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1); |
| + background-image: -ms-linear-gradient(top,#f5f5f5,#f1f1f1); |
| + background-image: -o-linear-gradient(top,#f5f5f5,#f1f1f1); |
| + background-image: linear-gradient(top,#f5f5f5,#f1f1f1); |
| + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f5f5',EndColorStr='#f1f1f1'); |
| + -webkit-user-select:none; |
| + -moz-user-select:none; |
| + cursor:default; |
| +} |
| +.kd-button:hover, .kd-button.hover { |
| + border: 1px solid #C6C6C6; |
| + color: #222; |
| + -webkit-transition: all 0.0s; |
| + -moz-transition: all 0.0s; |
| + -o-transition: all 0.0s; |
| + transition: all 0.0s; |
| + background-color: #f8f8f8; |
| + background-image: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f1f1f1)); |
| + background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1); |
| + background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1); |
| + background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1); |
| + background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1); |
| + background-image: linear-gradient(top,#f8f8f8,#f1f1f1); |
| + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8f8f8',EndColorStr='#f1f1f1'); |
| + -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1); |
| + -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.1); |
| + box-shadow: 0px 1px 1px rgba(0,0,0,0.1); |
| +} |
| +.kd-button:active, .kd-button.active { |
| + background-color: #f6f6f6; |
| + background-image: -webkit-gradient(linear,left top,left bottom,from(#f6f6f6),to(#f1f1f1)); |
| + background-image: -webkit-linear-gradient(top,#f6f6f6,#f1f1f1); |
| + background-image: -moz-linear-gradient(top,#f6f6f6,#f1f1f1); |
| + background-image: -ms-linear-gradient(top,#f6f6f6,#f1f1f1); |
| + background-image: -o-linear-gradient(top,#f6f6f6,#f1f1f1); |
| + background-image: linear-gradient(top,#f6f6f6,#f1f1f1); |
| + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f6f6f6',EndColorStr='#f1f1f1'); |
| + -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); |
| + -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); |
| + box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); |
| +} |
| +.kd-button.active{ |
| + border: 1px solid #C6C6C6; |
| + color: #333; |
| +} |
| + |
| +.kd-button:visited { |
| + color: #666; |
| +} |
| +.kd-button.focus, .kd-button.right.focus, .kd-button.mid.focus, .kd-button.left.focus{ |
| + outline: none; |
| + border: 1px solid #4d90fe; |
| + z-index:4 !important; |
| +} |
| + |
| +.kd-button.selected { |
| + background-color: #EEEEEE; |
| + background-image: -webkit-gradient(linear,left top,left bottom,from(#EEEEEE),to(#E0E0E0)); |
| + background-image: -webkit-linear-gradient(top,#EEEEEE,#E0E0E0); |
| + background-image: -moz-linear-gradient(top,#EEEEEE,#E0E0E0); |
| + background-image: -ms-linear-gradient(top,#EEEEEE,#E0E0E0); |
| + background-image: -o-linear-gradient(top,#EEEEEE,#E0E0E0); |
| + background-image: linear-gradient(top,#EEEEEE,#E0E0E0); |
| + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EEEEEE',EndColorStr='#E0E0E0'); |
| + -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); |
| + -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); |
| + box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); |
| + border: 1px solid #CCC; |
| + color: #333; |
| +} |
| +.kd-button input[type=checkbox] { |
| + position: relative; |
| + top: 3px; |
| +} |
| + |
| +.kd-button img { |
| + display: inline-block; |
| + margin: -3px 0 0; |
| + opacity: 0.55; |
| + *margin:4px 0 0; /*IE7*/ |
| +/* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; //IE CANNOT HANDLE OPACITY ON PNGS, SO WE ARE JUST GONNA REMOVE THESE FILTERS |
| + filter: alpha(opacity=80);*/ |
| + |
| + margin-left: 0px; |
| + margin-right: 0px; |
| + vertical-align: middle; |
| +} |
| + |
| +.kd-button.selected img { |
| + opacity: 0.9; |
| +/* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; |
| + filter: alpha(opacity=90);*/ |
| +} |
| +.kd-button:hover img { |
| + opacity: 0.72; |
| +/* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; |
| + filter: alpha(opacity=90);*/ |
| +} |
| +.kd-button:active img { |
| + opacity: 1.0; |
| +/* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; |
| + filter: alpha(opacity=100);*/ |
| +} |
| + |
| +/* Disabled buttons */ |
| +.kd-button.disabled, .kd-button.disabled:hover, .kd-button.disabled:active { |
| + background: none; |
| + color: #b8b8b8; |
| + border: 1px solid #f3f3f3; |
| + border: 1px solid rgba(0,0,0,0.05); |
| + cursor: default; |
| + pointer-events: none; |
| +} |
| +.kd-button.disabled.active{ |
| + -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); |
| + -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); |
| + box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); |
| +} |
| +.kd-button-submit.disabled, .kd-button-submit.disabled:hover, .kd-button-submit.disabled:active, |
| +.kd-button-share.disabled, .kd-button-share.disabled:hover, .kd-button-share.disabled:active, |
| +.kd-button-action.disabled, .kd-button-action.disabled:hover, .kd-button-action.disabled:active { |
| + border: 1px solid #505050; |
| + background-color: #666; |
| + color: #FFF; |
| + opacity: 0.5; |
| + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; |
| + filter: alpha(opacity=50); |
| +} |
| +.kd-button.disabled img { |
| + opacity: 0.5; |
| + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; |
| + filter: alpha(opacity=50); |
| +} |
| + |
| +/* Colored Buttons */ |
| +.kd-button-submit:focus, .kd-button-submit.focus, |
| +.kd-button-share:focus, .kd-button-share.focus, |
| +.kd-button-action:focus, .kd-button-action.focus{ |
| + box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5); |
| + -webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5); |
| + -moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5); |
| +} |
| +.kd-button-submit:focus, .kd-button-submit.focus, |
| +.kd-button-share:focus, .kd-button-share.focus, |
| +.kd-button-action:focus, .kd-button-action.focus { |
| + border-color:#404040; |
| +} |
| + |
| +.kd-button-submit:focus:hover, .kd-button-submit.focus:hover, |
| +.kd-button-share:focus:hover, .kd-button-share.focus:hover, |
| +.kd-button-action:focus:hover, .kd-button-action.focus:hover{ |
| + box-shadow:inset 0 0 0 1px #fff, 0px 1px 1px rgba(0,0,0,0.1); |
| + -webkit-box-shadow:inset 0 0 0 1px #fff, 0px 1px 1px rgba(0,0,0,0.1); |
| + -moz-box-shadow:inset 0 0 0 1px #fff, 0px 1px 1px rgba(0,0,0,0.1); |
| +} |
| + |
| +.kd-button-submit, |
| +.kd-button-share, |
| +.kd-button-action { |
| + border: 1px solid #505050; |
| + color: #FFF; |
| + background-color: #666; |
| + background-image: -webkit-gradient(linear,left top,left bottom,from(#777),to(#555)); |
| + background-image: -webkit-linear-gradient(top,#777,#555); |
| + background-image: -moz-linear-gradient(top,#777,#555); |
| + background-image: -ms-linear-gradient(top,#777,#555); |
| + background-image: -o-linear-gradient(top,#777,#555); |
| + background-image: linear-gradient(top,#777,#555); |
| + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#777777',EndColorStr='#555555'); |
| +} |
| +.kd-button-submit:hover, |
| +.kd-button-share:hover, |
| +.kd-button-action:hover { |
| + border: 1px solid #404040; |
| + color: #FFF; |
| + background-color: #555; |
| + background-image: -webkit-gradient(linear,left top,left bottom,from(#666),to(#444)); |
| + background-image: -webkit-linear-gradient(top,#666,#444); |
| + background-image: -moz-linear-gradient(top,#666,#444); |
| + background-image: -ms-linear-gradient(top,#666,#444); |
| + background-image: -o-linear-gradient(top,#666,#444); |
| + background-image: linear-gradient(top,#666,#444); |
| + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666',EndColorStr='#444444'); |
| +} |
| +.kd-button-submit:active, .kd-button-submit:focus:active, .kd-button-submit.focus:active, |
| +.kd-button-share:active, .kd-button-share:focus:active, .kd-button-share.focus:active, |
| +.kd-button-action:active, .kd-button-action:focus:active, .kd-button-action.focus:active { |
| + -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3); |
| + -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3); |
| + box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3); |
| +} |
| + |
| +.kd-button-share { |
| + text-shadow: 0px 1px rgba(0,0,0,0.1); |
| +} |
| +.kd-button-share:hover { |
| + text-shadow: 0px 1px rgba(0,0,0,0.3); |
| +} |
| +.kd-button-action { |
| + margin-bottom: 16px; |
| + text-transform: uppercase; |
| + letter-spacing:1; |
| + text-shadow: 0px 1px rgba(0,0,0,0.1); |
| +} |
| +.kd-button-action:hover { |
| + -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.2); |
| + -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.2); |
| + box-shadow: 0px 1px 1px rgba(0,0,0,0.2); |
| +} |
| +.kd-button-action:visited, |
| +.kd-button-share:visited, |
| +.kd-button-submit:visited { |
| + color: #FFF; |
| +} |
| +.kd-button.kd-button-action img, |
| +.kd-button.kd-button-action.selected img, |
| +.kd-button.kd-button-action:hover img, |
| +.kd-button.kd-button-action:active img, |
| +.kd-button.kd-button-submit img, |
| +.kd-button.kd-button-submit.selected img, |
| +.kd-button.kd-button-submit:hover img, |
| +.kd-button.kd-button-submit:active img, |
| +.kd-button.kd-button-share img, |
| +.kd-button.kd-button-share.selected img, |
| +.kd-button.kd-button-share:hover img, |
| +.kd-button.kd-button-share:active img { |
| + opacity: 1.0; |
| +} |
| + |
| +/* Buttons of all styles */ |
| +.kd-buttonbar .kd-button, |
| +.kd-buttonbar .kd-combobutton, |
| +.kd-buttonbar .kd-expandbutton { |
| + float: left; |
| + margin: 0; |
| + margin-left: 16px; |
| + position: relative; |
| + z-index: 1; |
| +} |
| +.left + .kd-combobutton{ |
| + margin-left:0; |
| +} |
| + |
| +.kd-buttonbar .kd-button:hover { |
| + z-index: 2; |
| +} |
| +.kd-buttonbar .kd-button:first-child, |
| +.kd-buttonbar .kd-combobutton:first-child, |
| +.kd-buttonbar .kd-expandbutton:first-child { |
| + margin-left: 0; |
| +} |
| + |
| +.kd-button.small, |
| +.mobile .kd-button.small { |
| + min-width: 34px; |
| + width: 34px; |
| + padding: 0; |
| +} |
| +.mobile .kd-button { |
| + min-width:30px; |
| + width:30px; |
| + padding:0 8px; |
| + margin-left:7px; |
| +} |
| +.kd-menubutton { |
| + position: relative; |
| +} |
| +.kd-menubutton .kd-disclosureindicator { |
| + float: right; |
| + margin-top: 10px; |
| + margin-left: 7px; |
| + -webkit-transform: rotate(90deg); |
| + -moz-transform: rotate(90deg); |
| + transform: rotate(90deg); |
| + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); |
| + opacity: .8; |
| + -webkit-transition: none; |
| + -moz-transition: none; |
| + -o-transition: none; |
| + transition: none; |
| + |
| +/* ie hacks*/ |
| + *float:none; |
| + *position:relative; |
| + *top:-3px; |
| + margin-top:12px\0/; |
| +} |
| +.kd-select { position:relative; } |
| +.kd-select .kd-disclosureindicator{ |
| + width:7px; |
| + height:11px; |
| + -webkit-transform: none; |
| + -moz-transform: none; |
| + transform: none; |
| + margin-top:8px; |
| +} |
| + |
| +.kd-menubutton.small img { |
| + margin-left: -8px; |
| +} |
| +.kd-menubutton.small .kd-disclosureindicator { |
| + position: absolute; |
| + margin: 10px 0; |
| + right: 4px; |
| +} |
| +.kd-menubutton .kd-menulist .kd-disclosureindicator { |
| + float: none; |
| + -webkit-transform: rotate(0); |
| + -moz-transform: rotate(0); |
| + transform: rotate(0); |
| + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); |
| + opacity: .8; |
| +} |
| +.kd-menubutton img + .label{ |
| + margin-left:5px; |
| +} |
| + |
| +.kd-menubutton img { |
| + display: inline-block; |
| +} |
| +.kd-menubutton:hover .kd-disclosureindicator { |
| + border-left-color: #999; |
| + opacity: 1; |
| +} |
| +.kd-menubutton span.label { |
| + display: inline-block; |
| +} |
| +.kd-combobutton .kd-menubutton:first-child { |
| + -webkit-border-radius: 2px 0 0 2px; |
| + -moz-border-radius: 2px 0 0 2px; |
| + border-radius: 2px 0 0 2px; |
| +} |
| +.kd-combobutton .kd-menutrigger, |
| +.mobile .kd-combobutton .kd-menutrigger { |
| + margin-left: -1px; |
| + border-left-color: transparent; |
| + padding: 0 8px 0 2px; |
| + width:auto; |
| + min-width: 0; |
| + -webkit-border-radius: 0 2px 2px 0; |
| + -moz-border-radius: 0 2px 2px 0; |
| + border-radius: 0 2px 2px 0; |
| + z-index: 0; |
| +} |
| +.kd-combobutton .kd-menutrigger:hover { |
| + border-left-color: #c6c6c6; |
| +} |
| + |
| +.kd-expandbutton { |
| + display: inline-block; |
| + overflow: hidden; |
| + z-index: 0; |
| + width: 88px; |
| + height: 29px; |
| + position: relative; |
| + -webkit-transition: all 0.218s; |
| + -moz-transition: all 0.218s; |
| + -o-transition: all 0.218s; |
| + transition: all 0.218s; |
| + cursor:pointer; |
| +} |
| +.kd-expandbutton:hover { |
| + width: 210px; |
| + margin-left: -100px; |
| +} |
| +.kd-expandbutton:hover .expand-options{ |
| + border-color: #e5e5e5; |
| +} |
| +.kd-expandbutton .expand-options { |
| + display: inline-block; |
| + background: #f7f7f7; |
| + border: 1px solid #f0f0f0; |
| + padding-left: 16px; |
| + -webkit-border-radius: 2px 0 0 2px; |
| + -moz-border-radius: 2px 0 0 2px; |
| + border-radius: 2px 0 0 2px; |
| + position: absolute; |
| + left: 0; |
| + width: 144px; |
| + font-size:11px; |
| +} |
| +.kd-expandbutton .expand-options span { |
| + float:left; |
| + padding: 0 8px; |
| + line-height: 27px; |
| + color:#666; |
| +/* border-left:1px solid transparent;*/ |
| +} |
| + |
| +.kd-expandbutton .expand-options span:hover, .kd-expandbutton .expand-options span.selected{ |
| + background-color:#e5e5e5; |
| + color: #222; |
| +} |
| +.kd-expandbutton .expand-options .kd-disclosureindicator { |
| + position: absolute; |
| + top: 50%; |
| + margin-top: -3px; |
| + left: -3px; |
| + opacity: .5; |
| + -webkit-transform: rotate(180deg); |
| + -moz-transform: rotate(180deg); |
| + transform: rotate(180deg); |
| + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); |
| + |
| +} |
| +.kd-expandbutton .main { |
| + z-index: 1; |
| + position: absolute; |
| + right: 0; |
| +} |
| +.kd-expandbutton:hover .kd-button.main{ |
| + border: 1px solid #C6C6C6; |
| + color: #333; |
| + -webkit-transition: all 0.0s; |
| + -moz-transition: all 0.0s; |
| + -o-transition: all 0.0s; |
| + transition: all 0.0s; |
| + background-color: #f8f8f8; |
| + background-image: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f1f1f1)); |
| + background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1); |
| + background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1); |
| + background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1); |
| + background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1); |
| + background-image: linear-gradient(top,#f8f8f8,#f1f1f1); |
| + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8f8f8',EndColorStr='#f1f1f1'); |
| + -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1); |
| + -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.1); |
| + box-shadow: 0px 1px 1px rgba(0,0,0,0.1); |
| +} |
| + |
| +/* Combo/segmented buttons */ |
| +.kd-combobutton .kd-button-action.small { |
| + margin: 0 0 0 1px; |
| +} |
| +.kd-button.left { |
| + border-right-color: transparent; |
| + margin-right: 0; |
| + -webkit-border-radius: 2px 0 0 2px; |
| + -moz-border-radius: 2px 0 0 2px; |
| + border-radius: 2px 0 0 2px; |
| +} |
| +.kd-button.left:hover { |
| + border-right: 1px solid #c6c6c6; |
| +} |
| +.kd-button.mid { |
| + -webkit-border-radius: 0; |
| + -moz-border-radius: 0; |
| + border-radius: 0; |
| + margin-left:0; |
| + margin-right:0; |
| +} |
| +.kd-button.mid + .kd-button.mid, .kd-button.left + .kd-button.mid{ |
| + margin-left: -1px; |
| +} |
| +.kd-button.right { |
| + margin-left: 0; |
| + -webkit-border-radius: 0 2px 2px 0; |
| + -moz-border-radius: 0 2px 2px 0; |
| + border-radius: 0 2px 2px 0; |
| + margin-left:-1px; |
| +} |
| +.kd-button.right:hover { |
| + border-left: 1px solid #c6c6c6; |
| +} |
| +.kd-segmentedcontrol{ |
| + float:left; |
| + margin-left:16px; |
| +} |
| +.kd-segmentedcontrol:first-child{ |
| + margin-left:0; |
| +} |
| +.kd-button.left.kd-button-action:hover { |
| + border-right: 1px solid transparent; |
| +} |
| +.kd-button.right.kd-button-action:hover { |
| + border-left: 1px solid transparent; |
| +} |
| + |
| +/* Mini buttons */ |
| +.kd-button.mini{ |
| + height:17px; |
| + line-height:17px; |
| + min-width:0; |
| +} |
| +/* Mini text input */ |
| +input[type="text"].mini{ |
| + height:17px; |
| + line-height:17px; |
| + display:inline-block; |
| + padding:0 2px; |
| + -webkit-box-sizing:content-box; |
| + font-size:11px; |
| +} |
| + |
| +/* View toggle buttonset */ |
| +.kd-viewtoggle{ |
| + display:block; |
| + height:29px; |
| + position:relative; |
| +} |
| +.kd-viewtoggle .kd-button{ |
| + position:absolute; |
| + margin:0; |
| + -webkit-transition: right 0.13s; |
| + -moz-transition: right 0.13s; |
| + -o-transition: right 0.13s; |
| + transition: right 0.13s; |
| + |
| + -webkit-transition-delay:0.4s; |
| + -moz-transition-delay:0.4s; |
| + -o-transition-delay:0.4s; |
| + transition-delay:0.4s; |
| +} |
| +.kd-viewtoggle .kd-button.selected{ |
| + z-index:3; |
| +} |
| +.kd-viewtoggle .tab{ |
| + position: absolute; |
| + top: 0; |
| + right: 36px; |
| + display:block; |
| + height:27px; |
| + width:16px; |
| + border: 1px solid #ebebeb; |
| + -webkit-border-radius: 2px 0 0 2px; |
| + -moz-border-radius: 2px 0 0 2px; |
| + border-radius: 2px 0 0 2px; |
| + -webkit-transition: all 0.218s linear 0.4s; |
| + -moz-transition: all 0.218s linear 0.4s; |
| + -o-transition: all 0.218s linear 0.4s; |
| + transition: all 0.218s linear 0.4s; |
| +} |
| +.kd-viewtoggle.wide .tab{ |
| + right:72px; |
| +} |
| +.kd-viewtoggle:hover .kd-button{ |
| + -webkit-transition-delay:0; |
| + -moz-transition-delay:0; |
| + -o-transition-delay:0; |
| + transition-delay:0; |
| +} |
| +.kd-viewtoggle:hover .tab{ |
| + right:0; |
| +} |
| +.kd-viewtoggle .kd-button.selected{ |
| + border-color:#CCC; |
| + -webkit-border-radius: 2px; |
| + -moz-border-radius: 2px; |
| + border-radius: 2px; |
| +} |
| + |
| +/* Colored button bar */ |
| +.kd-buttonbar-colored { |
| + padding:10px; |
| + height:19px; |
| + background: #4D90FE; |
| +} |
| +.kd-buttonbar-colored span { |
| + font-size: 13px; |
| + font-weight: bold; |
| + color: white; |
| + float: left; |
| + line-height: 19px; |
| + height:19px; |
| + background: #4D90FE; |
| + text-shadow: 0px 1px 0px rgba(0,0,0,0.3); |
| +} |
| +.kd-buttonbar-colored .kd-button{ |
| + color: white; |
| + height:19px; |
| + font-size: 11px; |
| + margin-top:-1px; |
| + background: none; |
| + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.16)), to(rgba(0,0,0,0.2))); |
| + background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.16), rgba(0,0,0,0.2)); |
| + background-image: -moz-linear-gradient(top, rgba(0,0,0,0.16), rgba(0,0,0,0.2)); |
| + background-image: -ms-linear-gradient(top, rgba(0,0,0,0.16), rgba(0,0,0,0.2)); |
| + background-image: -o-linear-gradient(top, rgba(0,0,0,0.16), rgba(0,0,0,0.2)); |
| + background-image: linear-gradient(top, rgba(0,0,0,0.16), rgba(0,0,0,0.2)); |
| + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#160000FF, endColorstr=#220000FF); |
| + -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#160000FF, endColorstr=#220000FF); |
| +} |
| +.kd-buttonbar-colored .kd-button:hover, |
| +.kd-buttonbar-colored .kd-button.hover { |
| + color: white; |
| + background: none; |
| + border: 1px solid rgba(0,0,0,0.2); |
| + |
| + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.14)), to(rgba(0,0,0,0.2))); |
| + background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.14), rgba(0,0,0,0.2)); |
| + background-image: -moz-linear-gradient(top, rgba(0,0,0,0.14), rgba(0,0,0,0.2)); |
| + background-image: -ms-linear-gradient(top, rgba(0,0,0,0.14), rgba(0,0,0,0.2)); |
| + background-image: -o-linear-gradient(top, rgba(0,0,0,0.14), rgba(0,0,0,0.2)); |
| + background-image: linear-gradient(top, rgba(0,0,0,0.14), rgba(0,0,0,0.2)); |
| + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#14000000, endColorstr=#22000000); |
| + -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#14000000, endColorstr=#22000000); |
| +} |
| +.kd-buttonbar-colored .kd-button.focus, .kd-button.right.focus, |
| +.kd-buttonbar-colored .kd-button.mid.focus, .kd-button.left.focus{ |
| + outline: none; |
| + border: 1px solid white; |
| + z-index:4 !important; |
| +} |
| +.kd-buttonbar-colored .kd-button.disabled, |
| +.kd-buttonbar-colored .kd-button.disabled:hover, |
| +.kd-buttonbar-colored .kd-button.disabled:active { |
| + color: rgba(255, 255, 255, 0.5); |
| + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#50FFFFFF, endColorstr=#50FFFFFF); |
| + -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#50FFFFFF, endColorstr=#50FFFFFF); |
| +} |
| + |
| +/* Slide toggle button */ |
| +.kd-slidetoggle{ |
| + height: 27px; |
| + line-height: 27px; |
| + width:94px; |
| + padding:0; |
| + -webkit-border-radius:2px; |
| + -moz-border-radius: 2px; |
| + border-radius: 2px; |
| + border:1px solid #CCC; |
| + font-weight:bold; |
| + color:#666; |
| + position:relative; |
| + overflow:hidden; |
| + |
| + background-image: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(#e0e0e0)); |
| + background-image: -webkit-linear-gradient(top, #EEEEEE, #e0e0e0); |
| + background-image: -moz-linear-gradient(top, #EEEEEE, #e0e0e0); |
| + background-image: -ms-linear-gradient(top, #EEEEEE, #e0e0e0); |
| + background-image: -o-linear-gradient(top, #EEEEEE, #e0e0e0); |
| + background-image: linear-gradient(top, #EEEEEE, #e0e0e0); |
| + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EEEEEE, endColorstr=#e0e0e0); |
| + -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EEEEEE, endColorstr=#e0e0e0); |
| + |
| + -webkit-box-shadow: inset 0px 1px 2px 0 rgba(0,0,0,0.1); |
| + -moz-box-shadow: inset 0px 1px 2px 0 rgba(0,0,0,0.1); |
| + box-shadow: inset 0px 1px 2px 0 rgba(0,0,0,0.1); |
| +} |
| +.kd-slidetoggle span { |
| + display: inline-block; |
| + width: 45px; |
| + text-align: center; |
| + |
| + -webkit-border-radius:2px 2px 0 0; |
| + -moz-border-radius: 2px 2px 0 0; |
| + border-radius: 2px 2px 0 0; |
| +} |
| +.kd-slidetoggle span.on{ |
| + background-image: -webkit-gradient(linear, left top, left bottom, from(#3b93ff), to(#3689EE)); |
| + background-image: -webkit-linear-gradient(top, #3b93ff, #3689EE); |
| + background-image: -moz-linear-gradient(top, #3b93ff, #3689EE); |
| + background-image: -ms-linear-gradient(top, #3b93ff, #3689EE); |
| + background-image: -o-linear-gradient(top, #3b93ff, #3689EE); |
| + background-image: linear-gradient(top, #3b93ff, #3689EE); |
| + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3b93ff, endColorstr=#3689EE); |
| + -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3b93ff, endColorstr=#3689EE); |
| + |
| + color:#FFF; |
| + |
| + width:47px; |
| + margin-right:-2px; |
| + |
| + -webkit-box-shadow: inset 0px 1px 2px 0 rgba(0,0,0,0.1); |
| + -moz-box-shadow: inset 0px 1px 2px 0 rgba(0,0,0,0.1); |
| + box-shadow: inset 0px 1px 2px 0 rgba(0,0,0,0.1); |
| + |
| + -webkit-border-radius:2px 0 0 2px; |
| + -moz-border-radius: 2px 0 0 2px; |
| + border-radius: 2px 0 0 2px; |
| +} |
| +.kd-slidetoggle .thumb{ |
| + content:''; |
| + position:absolute; |
| + display:block; |
| + top:-1px; |
| + left:-1px; |
| + height:27px; |
| + width:47px; |
| + border:1px solid #CCC; |
| + -webkit-border-radius:2px; |
| + -moz-border-radius: 2px; |
| + border-radius: 2px; |
| + |
| + -webkit-box-shadow: 0px 1px 2px 0 rgba(0,0,0,0.1); |
| + -moz-box-shadow: 0px 1px 2px 0 rgba(0,0,0,0.1); |
| + box-shadow: 0px 1px 2px 0 rgba(0,0,0,0.1); |
| + |
| + background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f1f1f1)); |
| + background-image: -webkit-linear-gradient(top, #f8f8f8, #f1f1f1); |
| + background-image: -moz-linear-gradient(top, #f8f8f8, #f1f1f1); |
| + background-image: -ms-linear-gradient(top, #f8f8f8, #f1f1f1); |
| + background-image: -o-linear-gradient(top, #f8f8f8, #f1f1f1); |
| + background-image: linear-gradient(top, #f8f8f8, #f1f1f1); |
| + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, endColorstr=#f1f1f1); |
| + -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, endColorstr=#f1f1f1); |
| + |
| + -webkit-transition: all 0.130s ease-out; |
| + -moz-transition: all 0.130s ease-out; |
| + -o-transition: all 0.130s ease-out; |
| + transition: all 0.130s ease-out; |
| +} |
| +.kd-slidetoggle.on .thumb{ |
| + left:46px; |
| +} |
| +.kd-slidetoggle .thumb::after{ |
| + content:""; |
| + position:absolute; |
| + display:block; |
| + top:9px; |
| + left:15px; |
| + height:9px; |
| + width:17px; |
| + background-image: |
| + -webkit-linear-gradient(left, #ccc 50%, transparent 50%), |
| + -webkit-linear-gradient(left, #ccc 50%, transparent 50%), |
| + -webkit-linear-gradient(left, #ccc 50%, transparent 50%), |
| + -webkit-linear-gradient(left, #ccc 50%, transparent 50%), |
| + -webkit-linear-gradient(left, #ccc 50%, transparent 50%); |
| + background-size:2px 0; |
| + background-position:0 0, 0 2px, 0 4px, 0 6px, 0 8px; |
| + background-repeat:repeat-x; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Butter Bar |
| +------------------------------------------------------------------*/ |
| +.kd-butterbar { |
| + position: absolute; |
| + text-align:center; |
| + bottom:0; |
| + padding:0 16px; |
| + background:#F9EDBE; |
| + border:1px solid #F0C36D; |
| + margin-bottom:-15px; |
| + left:-1000%; |
| + |
| + -webkit-border-radius:2px; |
| + -moz-border-radius:2px; |
| + border-radius:2px; |
| + |
| + margin-left:-190px; |
| + opacity:0; |
| + |
| + -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); |
| + -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); |
| + box-shadow: 0 2px 4px rgba(0,0,0,0.2); |
| + |
| + -webkit-transform:scale(.2); |
| + -moz-transform:scale(.2); |
| + -o-transform:scale(.2); |
| + transform:scale(.2); |
| + |
| + -webkit-transition: opacity 1s, -webkit-transform 0 linear 1s, left 0 linear 1s; |
| + -moz-transition: opacity 0.130s; |
| + -o-transition: opacity 0.130s; |
| + transition: opacity 0.130s; |
| +} |
| +.kd-butterbar.shown{ |
| + opacity:1; |
| + left:496px; |
| + -webkit-transform:scale(1.00); |
| + |
| + -webkit-transition: all 0.130s, left 0 linear 0; |
| + -moz-transition: all 0.218s; |
| + -o-transition: all 0.218s; |
| +/* transition: all 0.218s, left 0;*/ |
| +} |
| +.kd-butterbar p{ |
| + margin-bottom:0; |
| + line-height:29px; |
| + font-size:11px; |
| +} |
| + |
| +.kd-butterbar a{ |
| + color:#333; |
| + text-decoration:underline; |
| +} |
| +.kd-butterbar a:hover{ |
| + color:#202020; |
| +} |
| + |
| +.kd-butterbar.mini{ |
| + margin-bottom:-5px; |
| +} |
| +.kd-butterbar.mini p{ |
| + line-height:19px; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Text Field, Autocomplete |
| +------------------------------------------------------------------*/ |
| +input[type=text] { |
| + height: 29px; |
| + background-color: #FFF; |
| + line-height: 27px; |
| + padding-left: 8px; |
| + color: #333; |
| + border: 1px solid #d9d9d9; |
| + border-top: 1px solid #c0c0c0; |
| + display: inline-block; |
| + vertical-align: top; |
| + -webkit-box-sizing: border-box; |
| + box-sizing: border-box; |
| + -webkit-border-radius: 1px; |
| +} |
| +input[type=text]:hover { |
| + border: 1px solid #b9b9b9; |
| + border-top: 1px solid #a0a0a0; |
| + -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); |
| + -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); |
| + box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); |
| +} |
| +input[type=text]:focus { |
| + -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3); |
| + -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3); |
| + box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3); |
| + outline: none; |
| + border: 1px solid #4d90fe; |
| +} |
| +input#fakesearch { |
| + width: 512px; |
| + font-size: 16px; |
| +} |
| +input#fakesearch:focus + .kd-autocomplete { |
| + display: block; |
| +} |
| +.kd-search-form { |
| + position: relative; |
| +} |
| +.kd-autocomplete { |
| + width: 510px; |
| + padding: 0; |
| + display: none; |
| + position: absolute; |
| + left: 1px; |
| + top: 29px; |
| + z-index: 100; |
| +} |
| +.kd-autocompletelistitem { |
| + font-size: 16px; |
| + line-height: 30px; |
| + padding-left: 10px; |
| +} |
| +.kd-autocompletelistitem:hover { |
| + background: #eee; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Zippy |
| +------------------------------------------------------------------*/ |
| +.kd-zippycontent { |
| + position: relative; |
| + overflow: hidden; |
| + height: 0; |
| + -webkit-transition: all 0.218s; |
| + -moz-transition: all 0.218s; |
| + -o-transition: all 0.218s; |
| + transition: all 0.218s; |
| +} |
| +.kd-zippycontent > *{position:absolute;bottom:0; left:0; width:100%;} |
| +.kd-zippy.expanded .kd-zippycontent{} |
| + |
| +.kd-zippycontent ul.iconList li a { |
| + padding-left: 30px; |
| + margin-left: 32px; |
| + background-repeat: no-repeat; |
| + background-position: 2px center; |
| + line-height: 23px; |
| +} |
| + |
| +/* zippy as folder */ |
| +.kd-zippy.kd-parent img.icon{ float:left; position:relative; top:2px; margin-right:5px; opacity:.6;} |
| +.kd-zippy.kd-parent ul li a{line-height:23px; padding-left:0;} |
| +.kd-zippy.kd-parent.has_icon ul li a{padding-left:23px;} |
| +.kd-zippy.kd-parent ul li img.icon{top:-1px;} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Accordion |
| +------------------------------------------------------------------*/ |
| +.kd-accordion .kd-zippy{ |
| + border-bottom:1px solid #ebebeb; |
| +} |
| +.kd-accordion label{ |
| + display:block; |
| +} |
| +.kd-accordion .kd-zippycontent{ |
| +} |
| +.kd-accordion .kd-zippycontent > ul{ |
| + bottom:auto; |
| + top:0; |
| +} |
| +.kd-accordion .kd-zippycontent ul li{ |
| + margin-left:28px; |
| + line-height:29px; |
| +} |
| +.kd-accordion .kd-zippycontent ul li input[type=radio]{ |
| + margin-bottom:-2px; |
| +} |
| +.kd-accordion .row > a{ |
| + -webkit-transition: color 0.130s linear; |
| + -moz-transition: color 0.130s linear; |
| + -o-transition: color 0.130s linear; |
| + transition: color 0.130s linear; |
| +} |
| +.kd-accordion .expanded .row > a{ |
| + color:#222; |
| + font-weight:bold; |
| +} |
| +.kd-accordion .expanded .row .kd-disclosureindicator{ |
| + |
| + |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Compondent: Slider |
| +------------------------------------------------------------------*/ |
| +.kd-slider { |
| + position:relative; |
| + width:137px; |
| + height:5px; |
| + padding:5px 0; |
| + margin-bottom:20px; |
| + |
| + cursor:default; |
| + -webkit-user-select:none; |
| + -moz-user-select:none; |
| +} |
| +.kd-slider:before { |
| + content:""; |
| + display:block; |
| + width:141px; |
| + height:5px; |
| + margin-left:-2px; |
| + -webkit-border-radius:3px; |
| + -moz-border-radius:3px; |
| + border-radius:3px; |
| + background:#e5e5e5; |
| +} |
| +.kd-slider:hover:before { |
| + background:#d1d1d1; |
| +} |
| + |
| +.kd-slider .kd-sliderhandle { |
| + display:block; |
| + position:absolute; |
| + top:50%; |
| + left:0; |
| + z-index:1; |
| + |
| + background:#999; |
| + cursor:pointer; |
| + cursor:col-resize; |
| + |
| + -webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.1); |
| + -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1); |
| + box-shadow:0px 1px 1px rgba(0,0,0,0.1); |
| + |
| + -webkit-transition: left 0.218s; |
| + -moz-transition: left 0.218s; |
| + -o-transition: left 0.218s; |
| + transition: left 0.218s; |
| +} |
| +.kd-slider .kd-sliderhandle-inner { |
| + display:block; |
| + position:absolute; |
| + top:1px; |
| + left:1px; |
| + |
| + background:#999; |
| + text-align:center; |
| + text-indent:-9999px; |
| + line-height:15px; |
| +} |
| +.kd-slider:hover .kd-sliderhandle-inner { |
| + background:#fff; |
| +} |
| +.kd-slider .kd-sliderhandle:active { |
| + background:#535252; |
| +} |
| +.kd-slider:active .kd-sliderhandle { |
| + -webkit-transition: left 0; |
| + -moz-transition: left 0; |
| + -o-transition: left 0; |
| + transition: left 0; |
| +} |
| +.kd-slider .kd-sliderhandle:active .kd-sliderhandle-inner { |
| + background:#535252; |
| +} |
| +.kd-slider.kd-slider-range .kd-sliderambit { |
| + display:block; |
| + position:absolute; |
| + top:0; |
| + left:0; |
| + height:5px; |
| + margin-top:5px; |
| + |
| + background:#c6c6c6; |
| + cursor:pointer; |
| + cursor:move; |
| +} |
| +.kd-slider.kd-slider-range:hover .kd-sliderambit { |
| + background:#535252; |
| +} |
| +.kd-slider.kd-slider-range:active .kd-sliderambit { |
| + background-color:#999; |
| + background-size:6px 6px; |
| + background-position:left -1px; |
| + background-repeat:repeat-x; |
| + background-image:-webkit-linear-gradient(135deg, transparent, transparent 3px, #fff 3px, #fff 4px, transparent 4px, transparent); |
| + background-image:-moz-linear-gradient(135deg, transparent, transparent 3px, #fff 3px, #fff 4px, transparent 4px, transparent); |
| + background-image:-o-linear-gradient(135deg, transparent, transparent 3px, #fff 3px, #fff 4px, transparent 4px, transparent); |
| + background-image:linear-gradient(135deg, transparent, transparent 3px, #fff 3px, #fff 4px, transparent 4px, transparent); |
| +} |
| + |
| +.kd-slider-continuous .kd-sliderhandle { |
| + width:17px; |
| + height:17px; |
| + margin-top:-8px; |
| + margin-left:-8px; |
| + |
| + -webkit-border-radius:8px; |
| + -moz-border-radius:8px; |
| + border-radius:8px; |
| +} |
| +.kd-slider-continuous .kd-sliderhandle-inner { |
| + width:15px; |
| + height:15px; |
| + |
| + -webkit-border-radius:7px; |
| + -moz-border-radius:7px; |
| + border-radius:7px; |
| +} |
| +.kd-slider-continuous.kd-slider-range .kd-sliderhandle { |
| + width:9px; |
| + |
| + -webkit-border-radius:0; |
| + -moz-border-radius:0; |
| + border-radius:0; |
| +} |
| +.kd-slider-continuous.kd-slider-range .kd-sliderhandle-inner { |
| + width:7px; |
| + |
| + -webkit-border-radius:0; |
| + -moz-border-radius:0; |
| + border-radius:0; |
| +} |
| +.kd-slider-continuous.kd-slider-range .kd-sliderhandle-min { |
| + -webkit-border-top-left-radius: 8px; |
| + -webkit-border-bottom-left-radius: 8px; |
| + -moz-border-radius-topleft: 8px; |
| + -moz-border-radius-bottomleft: 8px; |
| + border-top-left-radius: 8px; |
| + border-bottom-left-radius: 8px; |
| +} |
| +.kd-slider-continuous.kd-slider-range .kd-sliderhandle-min .kd-sliderhandle-inner { |
| + -webkit-border-top-left-radius: 6px; |
| + -webkit-border-bottom-left-radius: 6px; |
| + -moz-border-radius-topleft: 6px; |
| + -moz-border-radius-bottomleft: 6px; |
| + border-top-left-radius: 6px; |
| + border-bottom-left-radius: 6px; |
| +} |
| +.kd-slider-continuous.kd-slider-range .kd-sliderhandle-max { |
| + margin-left:0; |
| + -webkit-border-top-right-radius: 8px; |
| + -webkit-border-bottom-right-radius: 8px; |
| + -moz-border-radius-topright: 8px; |
| + -moz-border-radius-bottomright: 8px; |
| + border-top-right-radius: 8px; |
| + border-bottom-right-radius: 8px; |
| +} |
| +.kd-slider-continuous.kd-slider-range .kd-sliderhandle-max .kd-sliderhandle-inner { |
| + -webkit-border-top-right-radius: 6px; |
| + -webkit-border-bottom-right-radius: 6px; |
| + -moz-border-radius-topright: 6px; |
| + -moz-border-radius-bottomright: 6px; |
| + border-top-right-radius: 6px; |
| + border-bottom-right-radius: 6px; |
| +} |
| + |
| +.kd-slider-discrete { |
| + padding-bottom:26px; |
| +} |
| +.kd-slider-discrete .kd-sliderhandle { |
| + width:16px; |
| + height:9px; |
| + margin-top:-18px; |
| + margin-left:-8px; |
| + |
| + -webkit-border-top-left-radius: 3px; |
| + -webkit-border-top-right-radius: 3px; |
| + -moz-border-radius-topleft: 3px; |
| + -moz-border-radius-topright: 3px; |
| + border-top-left-radius: 3px; |
| + border-top-right-radius: 3px; |
| +} |
| +.kd-slider-discrete .kd-sliderhandle:before { |
| + content:""; |
| + display:block; |
| + position:absolute; |
| + top:9px; |
| + border-style:solid; |
| + border-color:#999 transparent; |
| + border-width:8px 8px 0; |
| +} |
| +.kd-slider-discrete .kd-sliderhandle:active:before { |
| + border-color:#535252 transparent; |
| +} |
| +.kd-slider-discrete .kd-sliderhandle-inner { |
| + width:14px; |
| + height:8px; |
| + |
| + -webkit-border-top-left-radius: 2px; |
| + -webkit-border-top-right-radius: 2px; |
| + -moz-border-radius-topleft: 2px; |
| + -moz-border-radius-topright: 2px; |
| + border-top-left-radius: 2px; |
| + border-top-right-radius: 2px; |
| +} |
| +.kd-slider-discrete .kd-sliderhandle-inner:before { |
| + content:""; |
| + display:block; |
| + position:absolute; |
| + top:8px; |
| + border-style:solid; |
| + border-color:#999 transparent; |
| + border-width:7px 7px 0; |
| +} |
| +.kd-slider-discrete:hover .kd-sliderhandle-inner { |
| + background:#fff; |
| +} |
| +.kd-slider-discrete:hover .kd-sliderhandle-inner:before { |
| + border-color:#fff transparent; |
| +} |
| +.kd-slider-discrete .kd-sliderhandle:active .kd-sliderhandle-inner:before { |
| + border-color:#535252 transparent; |
| +} |
| + |
| +.kd-slider-discrete.kd-slider-range .kd-sliderhandle { |
| + width:8px; |
| +} |
| +.kd-slider-discrete.kd-slider-range .kd-sliderhandle-inner { |
| + width:6px; |
| +} |
| +.kd-slider-discrete.kd-slider-range .kd-sliderhandle-min { |
| + margin-left:-7px; |
| + -webkit-border-top-right-radius: 0; |
| + -moz-border-radius-topright: 0; |
| + border-top-right-radius: 0; |
| +} |
| +.kd-slider-discrete.kd-slider-range .kd-sliderhandle-min:before { |
| + border-width:8px 0 0 8px; |
| +} |
| +.kd-slider-discrete.kd-slider-range .kd-sliderhandle-min .kd-sliderhandle-inner { |
| + -webkit-border-top-right-radius: 0; |
| + -moz-border-radius-topright: 0; |
| + border-top-right-radius: 0; |
| +} |
| +.kd-slider-discrete.kd-slider-range .kd-sliderhandle-min .kd-sliderhandle-inner:before { |
| + border-width:6px 0 0 6px; |
| +} |
| +.kd-slider-discrete.kd-slider-range .kd-sliderhandle-max { |
| + margin-left:0; |
| + -webkit-border-top-left-radius: 0; |
| + -moz-border-radius-topleft: 0; |
| + border-top-left-radius: 0; |
| +} |
| +.kd-slider-discrete.kd-slider-range .kd-sliderhandle-max:before { |
| + border-width:8px 8px 0 0; |
| +} |
| +.kd-slider-discrete.kd-slider-range .kd-sliderhandle-max .kd-sliderhandle-inner { |
| + -webkit-border-top-left-radius: 0; |
| + -moz-border-radius-topleft: 0; |
| + border-top-left-radius: 0; |
| +} |
| +.kd-slider-discrete.kd-slider-range .kd-sliderhandle-max .kd-sliderhandle-inner:before { |
| + border-width:6px 6px 0 0; |
| +} |
| + |
| +.kd-slider-discrete .kd-sliderruler { |
| + position:absolute; |
| + top:18px; |
| + left:0; |
| + width:100%; |
| + height:18px; |
| +} |
| +.kd-slider-discrete .kd-sliderstep { |
| + display:block; |
| + position:relative; |
| + float:left; |
| + width:9px; |
| + height:10px; |
| + padding-top:8px; |
| + margin-left:12px; |
| + margin-right:-4px; |
| + |
| + text-align:center; |
| + font-size:12px; |
| + color:#343434; |
| +} |
| +.kd-slider-discrete .kd-sliderstep:first-child { |
| + margin-left:-4px; |
| +} |
| +.kd-slider-discrete .kd-sliderstep:before { |
| + content:""; |
| + display:block; |
| + position:absolute; |
| + top:0; |
| + left:4px; |
| + width:1px; |
| + height:5px; |
| + |
| + background:#d0d0d0; |
| +} |
| +.kd-slider-discrete .kd-sliderstep-minor { |
| + text-indent:-9999px; |
| +} |
| +.kd-slider-discrete .kd-sliderstep-minor:before { |
| + height:2px; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Checkboxes and Radio buttons |
| +------------------------------------------------------------------*/ |
| +input[type=checkbox], input[type=radio], .fakecheckbox, .fakeradio{ |
| + -webkit-appearance: none; |
| + width: 13px; |
| + height: 13px; |
| + border: 1px solid #C6C6C6; |
| + margin:0; |
| + -webkit-border-radius:1px; |
| + -moz-border-radius:1px; |
| + border-radius:1px; |
| + -webkit-box-sizing: border-box; |
| + -moz-box-sizing: border-box; |
| + box-sizing: border-box; |
| + cursor:default; |
| + position:relative; |
| +} |
| +input[type=checkbox]:active, input[type=radio]:active, .fakecheckbox:active, .fakeradio:active{ |
| + border-color:#666; |
| + background:#ebebeb; |
| +} |
| +input[type=checkbox]:hover, input[type=radio]:hover, .fakecheckbox:hover, .fakeradio:hover{ |
| + border-color:#666; |
| + -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.1); |
| + -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.1); |
| + box-shadow: inset 0px 1px 1px rgba(0,0,0,0.1); |
| +} |
| +input[type=radio], .fakeradio{ |
| + border-radius:50%; |
| + width: 15px; |
| + height: 15px; |
| +} |
| + |
| +input[type=checkbox].disabled, input[type=radio].disabled, .fakecheckbox.disabled, .fakeradio.disabled{ |
| + border-color:#f1f1f1; |
| + background:#FFF; |
| + -webkit-box-shadow: none; |
| + -moz-box-shadow: none; |
| + box-shadow: none; |
| +} |
| +.disabledtext{ |
| + color:#B8B8B8; |
| +} |
| + |
| +input[type=radio]:checked::after, .fakeradio.checked::after{ |
| + content:''; |
| + display:block; |
| + position:relative; |
| + top:3px; |
| + left:3px; |
| + width:7px; |
| + height:7px; |
| + background:#666; |
| + border-radius:50%; |
| +} |
| + |
| +input[type=checkbox]:checked::after, .fakecheckbox.checked::after { |
| + content:url('../images/check_no_box.png'); |
| + display:block; |
| + position:absolute; |
| + top:-6px; |
| + left:-5px; |
| +} |
| + |
| +input[type=checkbox]:focus, .fakecheckbox.focus { |
| + outline: none; |
| + border-color:#4d90fe; |
| +} |
| +.fakecheckbox, .fakeradio{ |
| + display:inline-block; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Menus |
| +------------------------------------------------------------------*/ |
| +.kd-menulist { |
| + background: #FFF; |
| + /* border:1px solid #CCC;/*THIS SHOULD BE USED IN NON-WEBKIT BROWSERS ONLY - OTHER BROWSERS DO NOT INTERPRET THE OUTLINE STYLE CORRECTLY*/ |
| + outline:1px solid rgba(0,0,0,0.2); |
| + padding:0 0 6px; |
| + white-space: nowrap; |
| + -moz-transition: opacity 0.218s; |
| + -o-transition: opacity 0.218s; |
| + -webkit-transition: opacity 0.218s; |
| + transition: opacity 0.218s; |
| + -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); |
| + -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); |
| + box-shadow: 0 2px 4px rgba(0,0,0,0.2); |
| +} |
| +.kd-menulist-bubble { |
| + margin-top:11px; |
| + padding-top:6px; |
| +} |
| +.kd-menulist-bubble:after{ |
| + content:""; |
| + outline: none; |
| + display: block; |
| + position: absolute; |
| + top: -11px; |
| + left: 24px; |
| + margin: 0 0 0 -5px; |
| + width: 17px; |
| + height: 11px; |
| + |
| +} |
| +.kd-menulistitem { |
| + display: block; |
| + padding: 6px 44px 6px 16px; |
| + position: relative; |
| + color: #333; |
| + font-size:13px; |
| + font-weight:normal; |
| + cursor: default; |
| + margin: 0; |
| +} |
| +.kd-menuchecklistitem { |
| + padding-left: 30px; |
| +} |
| + |
| +.kd-shortcutitem{ |
| + padding-right:72px; |
| +} |
| + |
| +.kd-shortcut{ |
| + position:absolute; |
| + right:16px; |
| + text-align:right; |
| + color:#CCC; |
| +} |
| + |
| +.kd-menulistitem.kd-menuchecklistitem.selected { |
| + background-position: left center; |
| + background-repeat: no-repeat; |
| + background-color: #FFF; |
| +} |
| +.kd-menulistitem.kd-menuchecklistitem.selected:hover { |
| + background-color: #EEE; |
| +} |
| +.kd-menulistitem.disabled, .kd-menulistitem.disabled:hover, .kd-menulistitem.disabled { |
| + color: #ccc; |
| + background-color: #FFF; |
| + cursor: default; |
| +} |
| + |
| +.kd-menulist .kd-flyout { |
| + position: absolute; |
| + left: 100%; |
| + top: 0; |
| + width: 1px; |
| + overflow: hidden; |
| + opacity: 0.0; |
| + -moz-opacity: 0.0; |
| + filter: alpha(opacity=00); |
| + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)"; |
| +/* -moz-transition: opacity 0.218s; |
| + -o-transition: opacity 0.218s; |
| + -webkit-transition: opacity 0.218s; |
| + transition: opacity 0.218s;*/ |
| +} |
| + |
| +.kd-menulistitem:hover .kd-flyout { |
| + width: auto; |
| + overflow: visible; |
| + opacity: 1.0; |
| + -moz-opacity: 1.0; |
| + filter: alpha(opacity=100); |
| + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; |
| + -moz-transition: opacity 0s; |
| + -webkit-transition: opacity 0s; |
| + transition: opacity 0s; |
| + -moz-transition-delay:0.130s; |
| + -webkit-transition-delay:0.130s; |
| + transition-delay:0.130s; |
| +} |
| + |
| +.kd-menulistitem .kd-disclosureindicator { |
| + position: absolute; |
| + right: 10px; |
| + top: 50%; |
| + margin-top: -3px; |
| + opacity: .5; |
| +} |
| + |
| +.kd-menulistitem:hover, .kd-menulistitem.selected { |
| + background-color: #f1f1f1; |
| + color: #222; |
| + |
| + -moz-transition: background 0s; |
| + -o-transition: background 0s; |
| + -webkit-transition: background 0s; |
| + transition: background 0s; |
| +} |
| +.kd-menulistitem:hover .kd-disclosureindicator { |
| + border-left-color: #999; |
| + opacity: 1; |
| + -webkit-transition: none; |
| + -moz-transition: none; |
| + transition: none; |
| +} |
| +.kd-menurule { |
| + border-top: 1px solid #ebebeb; |
| + margin-top: 9px; |
| + margin-bottom: 10px; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Menu Button |
| +------------------------------------------------------------------*/ |
| +.kd-menubutton .kd-menulist { |
| + text-align: left; |
| + position: absolute; |
| + z-index: 99; |
| + background: #FFF; |
| + height: 0; |
| + width:auto; |
| + left:-9999px; |
| + /*overflow: hidden;*/ |
| + |
| + -moz-transition: 0; |
| + -o-transition: 0; |
| + -webkit-transition: 0; |
| + transition: 0; |
| + |
| + opacity: 0.0; |
| + -moz-opacity: 0.0; |
| + filter: alpha(opacity=00); |
| + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)"; |
| +} |
| +.kd-menubutton .kd-menulist.shown { |
| + left:0; |
| + height: auto; |
| + opacity: 1.0; |
| + -moz-opacity: 1.0; |
| + filter: alpha(opacity=100); |
| + -moz-transition: 0; |
| + -o-transition: 0; |
| + -webkit-transition: 0; |
| + transition: 0; |
| + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; |
| +} |
| +.kd-menubutton .kd-menulist.scroll.shown { |
| + max-height: 174px; |
| + overflow: auto; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Modal Dialog |
| +------------------------------------------------------------------*/ |
| +#kd-modalshield { |
| + background: #FFF; |
| + position: fixed; |
| + left: 0; |
| + right: 0; |
| + bottom: 0; |
| + z-index: 99; |
| + opacity: 0.0; |
| + opacity: 0.0; |
| + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)"; |
| + filter: alpha(opacity=00); |
| + -webkit-transition: all 0.218s; |
| + -moz-transition: all 0.218s; |
| + -o-transition: all 0.218s; |
| + transition: all 0.218s; |
| +} |
| +html.x-mobile #kd-modalshield { |
| + display: none; |
| +} |
| +html.x-mobile #kd-modaldialog { |
| + display: none; |
| +} |
| +body.strawman #kd-modalshield { |
| + top: 44px; |
| +} |
| +body.kd-compact #kd-modalshield { |
| + top: 72px; |
| +} |
| +html.y-expand #kd-modalshield { |
| + top: 80px; |
| +} |
| +#kd-modalshield.visible { |
| + opacity: .75; |
| + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; |
| + filter: alpha(opacity=75); |
| + opacity: .75; |
| +} |
| +.kd-modaldialog.visible { |
| + opacity: 1.0; |
| + -webkit-transform: scale(1.0); |
| + -moz-transform: scale(1.0); |
| + transform: scale(1.0); |
| +} |
| +.kd-modaldialog { |
| + -webkit-box-shadow: 0 4px 16px rgba(0,0,0,0.2); |
| + -moz-box-shadow: 0 4px 16px rgba(0,0,0,0.2); |
| + -ms-box-shadow: 0 4px 16px rgba(0,0,0,0.2); |
| + box-shadow: 0 4px 16px rgba(0,0,0,0.2); |
| + background: white; |
| + left: 50%; |
| + outline:1px solid rgba(0,0,0,0.2);/* border:1px solid #CCC;/*THIS IS FOR NON-WEBKIT BROWSERS ONLY - OTHER BROWSERS DO NOT INTERPRET THE OUTLINE STYLE CORRECTLY*/ |
| + padding:30px 42px; |
| + position: fixed; |
| + right: auto; |
| + width: 512px; |
| + height: auto; |
| + overflow: hidden; |
| + z-index: 100; |
| + top: 72px; |
| + margin-left: -256px; |
| + opacity: 0.0; |
| + -webkit-transform: scale(1.05); |
| + -moz-transform: scale(1.05); |
| + transform: scale(1.05); |
| + -webkit-transition: all 0.218s; |
| + -moz-transition: all 0.218s; |
| + transition: all 0.218s; |
| +} |
| +.kd-modaldialog.medium { |
| + padding:28px 32px; |
| + |
| + width: 384px; |
| +} |
| +.kd-modaldialog.small { |
| + padding:16px 20px; |
| + |
| + width: 256px; |
| +} |
| +.kd-modaldialog h1 { |
| + margin-bottom: 1em; |
| +} |
| + |
| +.kd-modaldialog.small h1 { |
| + margin-bottom: 8px; |
| +} |
| +.kd-formbuttons{ |
| + margin-top:16px; |
| +} |
| +.kd-formbuttons .kd-button.primary{ |
| + float:left; |
| + margin-right:16px; |
| +} |
| +.kd-modaldialog .kd-confirmation { |
| + display: inline-block; |
| + padding-top: 7px; |
| +} |
| +.kd-modaldialog input[type=checkbox] { |
| + margin-left: 0; |
| + margin-right: 6px; |
| + margin-bottom: -1px; |
| +} |
| +.kd-closebutton { |
| + width: 44px; |
| + height: 44px; |
| + background: url('../images/icons/x.png') center no-repeat; |
| + position: absolute; |
| + top: 0; |
| + right: 0; |
| + opacity: .7; |
| + -moz-opacity: .7; |
| + filter: alpha(opacity=70); |
| + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; |
| + cursor:default; |
| +} |
| +.kd-closebutton:hover { |
| + opacity: 1; |
| + -moz-opacity: 1; |
| + filter: alpha(opacity=100); |
| + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Prompt |
| +------------------------------------------------------------------*/ |
| +.kd-prompt label { |
| + display: block; |
| + margin-bottom: 16px; |
| +} |
| +.kd-prompt input[type=text] { |
| + width: 100%; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Settings |
| +------------------------------------------------------------------*/ |
| +.kd-settings { |
| + -webkit-box-shadow: 0 4px 16px rgba(0,0,0,0.2); |
| + -moz-box-shadow: 0 4px 16px rgba(0,0,0,0.2); |
| + -ms-box-shadow: 0 4px 16px rgba(0,0,0,0.2); |
| + box-shadow: 0 4px 16px rgba(0,0,0,0.2); |
| + background: white; |
| + left: 50%; |
| + outline:1px solid rgba(0,0,0,0.2);/* border:1px solid #CCC;/*THIS IS FOR NON-WEBKIT BROWSERS ONLY - OTHER BROWSERS DO NOT INTERPRET THE OUTLINE STYLE CORRECTLY*/ |
| + position: fixed; |
| + right: auto; |
| + width: 800px; |
| + height: auto; |
| + overflow: hidden; |
| + z-index: 100; |
| + top: 72px; |
| + margin-left: -256px; |
| + opacity: 0.0; |
| + -webkit-transform: scale(1.05); |
| + -moz-transform: scale(1.05); |
| + transform: scale(1.05); |
| + -webkit-transition: all 0.218s; |
| + -moz-transition: all 0.218s; |
| + transition: all 0.218s; |
| +} |
| +.kd-settings.visible { |
| + opacity: 1.0; |
| + -webkit-transform: scale(1.0); |
| + -moz-transform: scale(1.0); |
| + transform: scale(1.0); |
| +} |
| +.kd-settings-hd { |
| + background-color: #f1f1f1; |
| + border-bottom: 1px solid #ccc; |
| + height: 71px; |
| +} |
| +.kd-settings-hd h1 { |
| + padding-top: 26px; |
| + padding-left: 42px; |
| +} |
| +.kd-settings-hd .kd-formbuttons { |
| + float: right; |
| + padding-right: 26px; |
| + padding-top: 22px; |
| + margin: 0; |
| +} |
| +.kd-settings-nav { |
| + padding: 36px 20px 36px 42px; |
| + border-right: 1px solid #ebebeb; |
| + width: 108px; |
| + float: left; |
| + overflow: auto; |
| +} |
| +.kd-settings-nav li { |
| + margin-bottom: 13px; |
| +} |
| +.kd-settings-nav li a { |
| + display: block; |
| + color: #333; |
| + cursor: default; |
| +} |
| +.kd-settings-nav li a:hover { |
| + color: #111; |
| +} |
| +.kd-settings-nav li a.selected { |
| + color: #DD4B39; |
| + font-weight: bold; |
| +} |
| +.kd-settings-content { |
| + width: 629px; |
| + margin-left: 171px; |
| + height: auto; |
| + overflow: hidden; |
| + padding-bottom: 20px; |
| +} |
| +.kd-settings-content .kd-settings-pane { |
| + display: none; |
| + padding: 16px 32px; |
| + height: auto; |
| + max-height: 400px; |
| + overflow: auto; |
| +} |
| +.kd-settings-content .kd-settings-pane.selected { |
| + display: block; |
| +} |
| + |
| +.kd-settings-pane-section { |
| + clear: both; |
| + border-bottom: 1px solid #ebebeb; |
| + padding: 20px 0; |
| + height: 100%; |
| + overflow: hidden; |
| +} |
| +.kd-settings-pane-section p { |
| + line-height: 13px; |
| +} |
| +.kd-settings-pane-section .setting-label { |
| + display: block; |
| + width: 185px; |
| + float: left; |
| + font-weight: bold; |
| +} |
| +.kd-settings-pane-section .setting-label .info { |
| + font-size: 11px; |
| + color: #666; |
| + font-weight: normal; |
| +} |
| +.kd-settings-pane-section .setting { |
| + margin-left: 210px; |
| +} |
| +.kd-settings-pane-section .kd-button.kd-select { |
| + float: none; |
| + margin-left: 0; |
| + min-width: 0; |
| + margin-right: 5px; |
| +} |
| + |
| +.kd-settings-pane-section .setting input[type=checkbox] { |
| + margin-right: 5px; |
| + bottom: -1px; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Bubble Panel |
| +------------------------------------------------------------------*/ |
| +.kd-bubble { |
| + position: relative; |
| + background: #FFF; |
| + outline: 1px solid rgba(0,0,0,0.2); |
| + -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); |
| + -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); |
| + box-shadow: 0 2px 4px rgba(0,0,0,0.2); |
| + padding: 16px; |
| + width: 146px; |
| + -webkit-border-radius: 2px; |
| + -moz-border-radius: 2px; |
| + border-radius: 2px; |
| +} |
| +.kd-bubble .pointer { |
| + outline: none; |
| + display: block; |
| + position: absolute; |
| + top: -11px; |
| + left: 24px; |
| + margin: 0 0 0 -5px; |
| + width: 17px; |
| + height: 11px; |
| +} |
| + |
| +.kd-bubble p { |
| + margin-bottom: 0; |
| + color: #666; |
| +} |
| + |
| +.kd-bubble p.links { |
| + margin-top: 10px; |
| +} |
| +.kd-bubble p.links a:hover{ |
| + text-decoration:underline; |
| +} |
| + |
| +.kd-bubble.alert{ |
| + background: #F9EDBE; |
| + outline: 1px solid #f0c36d; |
| +} |
| + |
| +.kd-profilebox{ |
| + width:336px; |
| +} |
| +.kd-profilebox .kd-disclaimer{ |
| + background:#F9EDBE; |
| + padding:16px; |
| + margin:-16px -16px 0 -16px; |
| + border-bottom:1px solid #ddd8c0; |
| +} |
| +.kd-profilebox .kd-disclaimer p{ |
| + color:#202020; |
| +} |
| +.kd-profile{ |
| + padding:22px 0; |
| + height:100%; |
| + overflow:hidden; |
| +} |
| +.kd-profileimage{ |
| + float:left; |
| + width:160px; |
| +} |
| +.kd-profileimage img{ |
| + border:1px solid #CCC; |
| +} |
| +.kd-profileinfo{ |
| + float:right; |
| + width:160px; |
| +} |
| +.kd-profileinfo .email{ |
| + color:#999; |
| +} |
| +.kd-profileinfo ul{ |
| + margin-top:6px; |
| +} |
| +.kd-profileinfo ul li{ |
| + line-height:24px; |
| +} |
| +.kd-profileinfo .kd-profilename{ |
| + font-size:13px; |
| + line-height:13px; |
| + color:#202020; |
| + font-weight:bold; |
| +} |
| +.kd-accountlist{ |
| + background:#f1f1f1; |
| + padding:3px 16px 0; |
| + margin:0 -16px 0; |
| + border-top:1px solid #CCC; |
| + -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); |
| + -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); |
| + box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); |
| +} |
| +.kd-accountlist h3{ |
| + font-size:13px; |
| + font-weight:bold; |
| +} |
| +.kd-accountlist img{ |
| + border:1px solid #CCC; |
| + position:absolute; |
| + left:0; |
| + top:2px; |
| +} |
| +.kd-accountlist ul{ |
| + margin-top:3px; |
| +} |
| +.kd-accountlist ul li{ |
| + height:44px; |
| + position:relative; |
| +} |
| +.kd-accountlist ul li p{ |
| + margin-left:44px; |
| +} |
| +.kd-bubble .bottomlinks{ |
| + margin:0 -16px; |
| + padding:16px 16px 0; |
| + border-top:1px solid #CCC; |
| +} |
| +.kd-bubble .bottomlinks a{ |
| + float:right; |
| +} |
| +.kd-bubble .bottomlinks a:first-child{ |
| + float:left; |
| +} |
| +#stickers .kd-bubble{ |
| + margin-right:44px; |
| + float:left; |
| +} |
| +.kd-bubble.dark{background:#2d2d2d;width:auto;outline: 1px solid rgba(255,255,255,0.5);} |
| +.kd-bubble.dark ul{height:100%; overflow:hidden;} |
| +.kd-bubble.dark li{float:left; margin-left:16px;} |
| +.kd-bubble.dark li img{display:block;} |
| +.kd-bubble.dark li:first-child{margin-left:0;} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Hovercard |
| +------------------------------------------------------------------*/ |
| +.kd-hovercard { |
| + outline:1px solid rgba(0,0,0,0.2); |
| + width: 160px; |
| + -moz-transition: opacity 0.218s; |
| + -o-transition: opacity 0.218s; |
| + -webkit-transition: opacity 0.218s; |
| + transition: opacity 0.218s; |
| + -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); |
| + -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); |
| + box-shadow: 0 2px 4px rgba(0,0,0,0.2); |
| +} |
| + |
| +.kd-hovercard .kd-cardprofile { |
| + padding: 16px 16px 0; |
| + border-bottom: 1px solid #ebebeb; |
| +} |
| + |
| +.kd-hovercard .kd-menulist { |
| + outline: 0; |
| + width: auto; |
| + -moz-transition: none; |
| + -o-transition: none; |
| + -webkit-transition: none; |
| + transition: none; |
| + -webkit-box-shadow: 0; |
| + -moz-box-shadow: 0; |
| + box-shadow: 0; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Date Picker |
| +------------------------------------------------------------------*/ |
| +.kd-datepicker{ |
| + padding:16px; |
| + outline: 1px solid rgba(0,0,0,0.2); |
| + opacity:0; |
| + width:144px; |
| + position:absolute; |
| + left:-9999px; |
| + z-index:3; |
| + background:#FFF; |
| + |
| + -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); |
| + -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); |
| + box-shadow: 0 2px 4px rgba(0,0,0,0.2); |
| + -webkit-border-radius: 2px; |
| + -moz-border-radius: 2px; |
| + border-radius: 2px; |
| + -webkit-transition: all 0.13s linear, left 0 linear .13s; |
| + -moz-transition: all 0.13s linear; |
| + -o-transition: all 0.13s linear; |
| + transition: all 0.13s linear; |
| +} |
| +.kd-minicalendar{ |
| + width:148px; |
| + margin-left:-4px; |
| +} |
| +.kd-datepicker .kd-minicalendar{ |
| + width:144px; |
| + margin:0; |
| + |
| +} |
| +.kd-datepicker.shown{ |
| + opacity:1; |
| + -webkit-transition:0, left 0 linear 0; |
| + -moz-transition:0 |
| + -o-transition:0; |
| + transition:0; |
| +} |
| +.kd-minicalendar h2{ |
| + font-size:13px; |
| + color:#666; |
| + padding-left:4px; |
| +} |
| +.kd-minicalendar h2 .links{ |
| + float:right; |
| + margin-right:2px; |
| +} |
| +.kd-minicalendar h2 .links img{ |
| + cursor:default; |
| +} |
| +.kd-minicalendar td, .kd-minicalendar th{ |
| + width:20px; |
| + height:20px; |
| + line-height:20px; |
| + padding-left:4px; |
| + font-size:11px; |
| + color:#666; |
| + cursor:default; |
| +} |
| +.kd-minicalendar td:hover, .kd-minicalendar td.selected, .kd-minicalendar h2 .links img:hover{ |
| + background:#eee; |
| + color:#333; |
| +} |
| + |
| +.kd-minicalendar td.disabled{ |
| + color:#ccc; |
| +} |
| +.kd-minicalendar td.disabled:hover{ |
| + background:none; |
| + cursor:default; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Color Picker |
| +------------------------------------------------------------------*/ |
| +.kd-colorpicker{ |
| + width:140px; |
| + padding:16px; |
| + outline: 1px solid rgba(0,0,0,0.2); |
| + -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); |
| + -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.2); |
| + box-shadow: 0 2px 4px rgba(0,0,0,0.2); |
| + -webkit-border-radius: 2px; |
| + -moz-border-radius: 2px; |
| + border-radius: 2px; |
| +} |
| +.kd-menubutton .kd-colorpicker{ |
| + padding:0; |
| +} |
| +.kd-menubutton.selected .kd-colorpicker{ |
| + padding:16px; |
| +} |
| +.kd-colortable{ |
| + width:140px; |
| +} |
| +.kd-colortable.primaries{ |
| + margin-bottom:8px; |
| +} |
| +.kd-colortable td{ |
| + width:16px; |
| + height:16px; |
| + border:1px solid #FFF; |
| + cursor:default; |
| + position:relative; |
| +} |
| +.kd-colortable td:hover{ |
| + border-color:#333; |
| +} |
| +.kd-colortable td.selected:after{ |
| + content:''; |
| + display:block; |
| + position:absolute; |
| + top:-3px; |
| + right:0; |
| + width:18px; |
| + height:18px; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Activity Indicator |
| +------------------------------------------------------------------*/ |
| +#loader { |
| + position:relative; |
| + width:19px; |
| + height:19px; |
| +} |
| +#loader * { |
| + display:block; |
| + position:absolute; |
| +} |
| +#loader .circle { |
| + width:100%; |
| + height:100%; |
| + -webkit-border-radius:50%; |
| + -moz-border-radius:50%; |
| + border-radius:50%; |
| + opacity:0; |
| + overflow:hidden; |
| +} |
| + |
| +#loader .mask { |
| + height:100%; |
| + width:100%; |
| + opacity:0; |
| + overflow:hidden; |
| +} |
| + |
| +#loader .mask.first { |
| + -webkit-transition-property:border-color; |
| + -webkit-transition-duration:0s; |
| + -webkit-transition-delay:0.22s; |
| + -moz-transition-property:border-color; |
| + -moz-transition-duration:0s; |
| + -moz-transition-delay:0.22s; |
| + transition-property:border-color; |
| + transition-duration:0s; |
| + transition-delay:0.22s; |
| +} |
| + |
| +#loader .circle.initial .mask { top:0; height:50%; } |
| + |
| +#loader .circle.red .mask.first { top:0; height:50%; border-bottom:1px solid #555; } |
| +#loader .circle.red .mask.second { bottom:0; height:50%; } |
| + |
| +#loader .circle.yellow .mask.first { right:0; width:50%; border-left:1px solid #888; } |
| +#loader .circle.yellow .mask.second { left:0; width:50%; } |
| + |
| +#loader .circle.green .mask.first { bottom:0; height:50%; border-top:1px solid #555; } |
| +#loader .circle.green .mask.second { top:0; height:50%; } |
| + |
| +#loader .circle.blue .mask.first { left:0; width:50%; border-right:1px solid #888;} |
| +#loader .circle.blue .mask.second { right:0; width:50%; } |
| + |
| +#loader .circle .mask .base { |
| + height:100%; |
| + width:100%; |
| + opacity:0; |
| + -webkit-border-radius:50%; |
| + -moz-border-radius:50%; |
| + border-radius:50%; |
| + -webkit-transition-property:opacity; |
| + -webkit-transition-timing-function:linear; |
| + -webkit-transition-duration:0s; |
| + -webkit-transition-delay:0s; |
| + -moz-transition-property:opacity; |
| + -moz-transition-timing-function:linear; |
| + -moz-transition-duration:0s; |
| + -moz-transition-delay:0s; |
| + transition-property:opacity; |
| + transition-timing-function:linear; |
| + transition-duration:0s; |
| + transition-delay:0s; |
| +} |
| + |
| +#loader .circle .mask .mover { |
| + height:100%; |
| + width:100%; |
| + -webkit-border-radius:50%; |
| + -moz-border-radius:50%; |
| + border-radius:50%; |
| + -webkit-transition-property:background-color, left, top, right, bottom, width, height; |
| + -webkit-transition-timing-function:ease-in; |
| + -webkit-transition-duration:0.22s; |
| + -webkit-transition-delay:0s; |
| + -moz-transition-property:background-color, left, top, right, bottom, width, height; |
| + -moz-transition-timing-function:ease-in; |
| + -moz-transition-duration:0.22s; |
| + -moz-transition-delay:0s; |
| + transition-property:background-color, left, top, right, bottom, width, height; |
| + transition-timing-function:ease-in; |
| + transition-duration:0.22s; |
| + transition-delay:0s; |
| +} |
| +#loader .circle .mask.second .mover, |
| +#loader .circle.initial .mask .mover { |
| + -webkit-transition-timing-function:ease-out; |
| + -webkit-transition-delay:0.22s; |
| + -moz-transition-timing-function:ease-out; |
| + -moz-transition-delay:0.22s; |
| + transition-timing-function:ease-out; |
| + transition-delay:0.22s; |
| +} |
| + |
| +#loader .circle.red .mask.first .base { top:0; height:200%; background-color:#888; } |
| +#loader .circle.red .mask.second .base { bottom:0; height:200%; background-color:#555; } |
| + |
| +#loader .circle.yellow .mask.first .base { right:0; width:200%; background-color:#555; } |
| +#loader .circle.yellow .mask.second .base { left:0; width:200%; background-color:#888; } |
| + |
| +#loader .circle.green .mask.first .base { bottom:0; height:200%; background-color:#888; } |
| +#loader .circle.green .mask.second .base { top:0; height:200%; background-color:#555; } |
| + |
| +#loader .circle.blue .mask.first .base { left:0; width:200%; background-color:#555; } |
| +#loader .circle.blue .mask.second .base { right:0; width:200%; background-color:#888; } |
| + |
| +#loader .circle.initial .mask .mover { |
| + top:100%; |
| + height:0; |
| + background-color:#363636; |
| +} |
| +#loader .circle.red .mask.first .mover { top:0; height:200%; background-color:#555; } |
| +#loader .circle.red .mask.second .mover { bottom:100%; height:0; background-color:#6a6a6a } |
| + |
| +#loader .circle.yellow .mask.first .mover { right:0; width:200%; background-color:#888; } |
| +#loader .circle.yellow .mask.second .mover { left:100%; width:0; background-color:#363636; } |
| + |
| +#loader .circle.green .mask.first .mover { bottom:0; height:200%; background-color:#555; } |
| +#loader .circle.green .mask.second .mover { top:100%; height:0; background-color:#6a6a6a; } |
| + |
| +#loader .circle.blue .mask.first .mover { left:0; width:200%; background-color:#888; } |
| +#loader .circle.blue .mask.second .mover { right:100%; width:0; background-color:#363636; } |
| + |
| +/* Initial State */ |
| +#loader.initial .circle.initial, |
| +#loader.initial .circle.initial .mask { |
| + opacity:1; |
| +} |
| +#loader.initial .circle.initial .mask .mover { |
| + top:0; |
| + height:200%; |
| + background-color:#555; |
| +} |
| + |
| +/* Moving from Red to Yellow */ |
| +#loader.yellow .circle.yellow, |
| +#loader.yellow .circle.yellow .mask, |
| +#loader.yellow .circle.yellow .mask .base { |
| + opacity:1; |
| +} |
| +#loader.yellow .circle.yellow .mask.first { |
| + border-color:#555; |
| +} |
| +#loader.yellow .circle.yellow .mask.first .mover { |
| + right:100%; |
| + width:0; |
| + background-color:#6a6a6a; |
| +} |
| +#loader.yellow .circle.yellow .mask.second .mover { |
| + left:0; |
| + width:200%; |
| + background-color:#555; |
| +} |
| + |
| +/* Moving from Yellow to Green */ |
| +#loader.green .circle.green, |
| +#loader.green .circle.green .mask, |
| +#loader.green .circle.green .mask .base { |
| + opacity:1; |
| +} |
| +#loader.green .circle.green .mask.first { |
| + border-color:#888; |
| +} |
| +#loader.green .circle.green .mask.first .mover { |
| + bottom:100%; |
| + height:0; |
| + background-color:#363636; |
| +} |
| +#loader.green .circle.green .mask.second .mover { |
| + top:0; |
| + height:200%; |
| + background-color:#888; |
| +} |
| + |
| + |
| +/* Moving from Green to Blue */ |
| +#loader.blue .circle.blue, |
| +#loader.blue .circle.blue .mask, |
| +#loader.blue .circle.blue .mask .base { |
| + opacity:1; |
| +} |
| +#loader.blue .circle.blue .mask.first { |
| + border-color:#555; |
| +} |
| +#loader.blue .circle.blue .mask.first .mover { |
| + left:100%; |
| + width:0; |
| + background-color:#6a6a6a; |
| +} |
| +#loader.blue .circle.blue .mask.second .mover { |
| + right:0; |
| + width:200%; |
| + background-color:#555; |
| +} |
| + |
| +/* Moving from Blue to Red */ |
| +#loader.red .circle.red, |
| +#loader.red .circle.red .mask, |
| +#loader.red .circle.red .mask .base { |
| + opacity:1; |
| +} |
| +#loader.red.firstTime .circle.red .mask.second .base { |
| + opacity:0; |
| +} |
| +#loader.red .circle.red .mask.first { |
| + border-color:#888; |
| +} |
| +#loader.red .circle.red .mask.first .mover { |
| + top:100%; |
| + height:0; |
| + background-color:#363636; |
| +} |
| +#loader.red .circle.red .mask.second .mover { |
| + bottom:0; |
| + height:200%; |
| + background-color:#888; |
| +} |
| +#loader.offline .mask.first .base, |
| +#loader.offline .mask.second .mover, |
| +#loader.readyOn .base, |
| +#loader.readyOn .mover, |
| +#loader.transitionOn .mask.second .base{ |
| + background-color:#999 !important; |
| +} |
| +#loader.offline .mask.first, |
| +#loader.readyOn .mask.first{ |
| + border-color:#999 !important; |
| +} |
| +#loader .bolt{ |
| + position:absolute; |
| + top:50%; |
| + left:50%; |
| + margin-top:-6px; |
| + margin-left:-3px; |
| + opacity:0; |
| + width:8px; |
| + height:14px; |
| + |
| + -webkit-transition: opacity .218s linear .44s; |
| + -moz-transition: opacity .218s linear .44s; |
| + -o-transition: opacity .218s linear .44s; |
| + transition: opacity .218s linear .44s; |
| +} |
| +#loader.offline .bolt{ |
| + opacity:1; |
| +} |
| +/*#loader.transitionOn .mask.first .mover{ |
| + background-color:#999 !important; |
| +}*/ |
| + |
| +#loader.stopped .mask.first .base, |
| +#loader.finishing .mask.first .base, |
| +#loader.finishing .mask.second .base, |
| +#loader.finishing .mask.first .mover{ |
| + opacity:0 !important; |
| +} |
| + |
| +#loader.finishing .mask.first{ |
| + border-color:transparent !important; |
| +} |
| +#loader.finishing.blue .circle.blue .mask.second .mover{ |
| + width:0; |
| + right:100%; |
| +} |
| +#loader.finishing.green .circle.green .mask.second .mover{ |
| + height:0; |
| + top:100%; |
| +} |
| +#loader.finishing.yellow .circle.yellow .mask.second .mover{ |
| + width:0; |
| + left:100%; |
| +} |
| +#loader.finishing.red .circle.red .mask.second .mover{ |
| + height:0; |
| + bottom:100%; |
| +} |
| +#loader.finishing .mover{ |
| + -webkit-transition-delay:0s !important; |
| + -moz-transition-delay:0s !important; |
| + transition-delay:0s !important; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Progress Bar |
| +------------------------------------------------------------------*/ |
| +.kd-progressstatus{ |
| + color:#202020; |
| + margin-bottom:0; |
| +} |
| +.kd-progresstext{ |
| + color:#999; |
| +} |
| +.kd-progressbar{ |
| + width:320px; |
| + border:1px solid #999; |
| + padding:1px; |
| +} |
| +.kd-progresstrack { |
| + background-color:#ccc; |
| + width:170px; |
| + height:5px; |
| +} |
| +.kd-progressbar-blue .kd-progresstrack { background-color:#6188f5; } |
| + |
| +.kd-progressbar-tall .kd-progresstrack, |
| +.kd-progressbar-tall .kd-quantitytrack { |
| + height:8px; |
| +} |
| + |
| +.kd-progressbar-animated .kd-progresstrack { |
| + -webkit-box-shadow:inner 0 0 0 1px rgba(0,0,0,0.1); |
| + -moz-box-shadow:inner 0 0 0 1px rgba(0,0,0,0.1); |
| + box-shadow:inner 0 0 0 1px rgba(0,0,0,0.1); |
| + |
| + background-repeat:repeat-x; |
| + background-position:0 0; |
| + background-size:16px 8px; |
| + background-image:-webkit-linear-gradient(315deg, transparent, transparent 33%, rgba(0,0,0,0.12) 33%, rgba(0,0,0,0.12) 66%, transparent 66%, transparent); |
| + background-image:-moz-linear-gradient(315deg, transparent, transparent 33%, rgba(0,0,0,0.12) 33%, rgba(0,0,0,0.12) 66%, transparent 66%, transparent); |
| + background-image:-o-linear-gradient(315deg, transparent, transparent 33%, rgba(0,0,0,0.12) 33%, rgba(0,0,0,0.12) 66%, transparent 66%, transparent); |
| + background-image:linear-gradient(315deg, transparent, transparent 33%, rgba(0,0,0,0.12) 33%, rgba(0,0,0,0.12) 66%, transparent 66%, transparent); |
| + |
| + -webkit-animation-name: bg; |
| + -webkit-animation-duration: 0.8s; |
| + -webkit-animation-iteration-count: infinite; |
| + -webkit-animation-timing-function: linear; |
| +} |
| +.kd-progressbar-animated.kd-progressbar-tall .kd-progresstrack { |
| + background-size:20px 10px; |
| + -webkit-animation-name: bg-tall; |
| +} |
| + |
| +@-webkit-keyframes bg { |
| + 0% { background-position:0 0; } |
| + 100% { background-position:-16px 0; } |
| +} |
| +@-webkit-keyframes bg-tall { |
| + 0% { background-position:0 0; } |
| + 100% { background-position:-20px 0; } |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Quantity Bar |
| +------------------------------------------------------------------*/ |
| +.kd-quantitytrack{ |
| + width:170px; |
| + height:5px; |
| + background-color: #CCC; |
| + background-image: -webkit-linear-gradient(0, transparent 50%, white 50%); |
| + background-image: -moz-linear-gradient(0, transparent 50%, white 50%); |
| + background-image: linear-gradient(0, transparent 50%, white 50%); |
| + -o-background-size: 5px; |
| + -moz-background-size: 5px; |
| + -webkit-background-size: 5px; |
| + background-size: 5px; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Scrollbars |
| +------------------------------------------------------------------*/ |
| +.scrollBarBox{ |
| + width:144px; |
| + margin-right:44px; |
| + position:relative; |
| + display:inline-block; |
| + -webkit-box-sizing:border-box; |
| +} |
| +.scrollBarInner{ |
| + height:300px; |
| + overflow:auto; |
| + padding-top:20px; |
| + padding-right:16px; |
| +} |
| +.scrollBarInner .shadowTop{ |
| + width:100%; |
| + margin-right:0; |
| + height:6px; |
| + position:absolute; |
| + top:0; |
| + left:0; |
| + background:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.2)), to(rgba(0,0,0,0))); |
| + -webkit-mask-box-image:-webkit-gradient(linear, left top, right top, color-stop(0.0, rgba(0,0,0,0.1)), color-stop(0.5, rgba(0,0,0,.8)), color-stop(1.0, rgba(0,0,0,0.1))); |
| + opacity:0; |
| +} |
| +.scrollBarInner .shadowTop:after { |
| + content:""; |
| + display:block; |
| + position:absolute; |
| + top:0px; |
| + left:0; |
| + width:100%; |
| + height:0; |
| + border-top:1px solid #ebebeb; /*FOR IE*/ |
| + border-top:1px solid rgba(0, 0, 0, 0.3); |
| +} |
| + |
| +.scrollBarInner .shadowBottom{ |
| + width:100%; |
| + margin-right:0; |
| + height:4px; |
| + position:absolute; |
| + bottom:0; |
| + left:0; |
| + background:-webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,.2)), to(rgba(0,0,0,0))); |
| + -webkit-mask-box-image:-webkit-gradient(linear, left top, right top, color-stop(0.0, rgba(0,0,0,0.1)), color-stop(0.5, rgba(0,0,0,.8)), color-stop(1.0, rgba(0,0,0,0.1))); |
| + opacity:1; |
| +} |
| +.scrollBarInner .shadowBottom:after { |
| + content:""; |
| + display:block; |
| + position:absolute; |
| + bottom:0px; |
| + left:0; |
| + width:100%; |
| + height:0; |
| + border-bottom:1px solid #ebebeb; /*FOR IE*/ |
| + border-bottom:1px solid rgba(0, 0, 0, 0.3); |
| +} |
| + |
| +::-webkit-scrollbar { |
| + width: 16px; |
| + height: 16px; |
| +} |
| + |
| +::-webkit-scrollbar-button { |
| + height: 0px; |
| + width: 0px; |
| +} |
| + |
| +::-webkit-scrollbar-button:start:decrement, |
| +::-webkit-scrollbar-button:end:increment { |
| + display: block; |
| +} |
| + |
| +::-webkit-scrollbar-button:vertical:start:increment, |
| +::-webkit-scrollbar-button:vertical:end:decrement { |
| + display: none; |
| +} |
| +::-webkit-scrollbar-track:vertical { |
| + border-right: 0px solid transparent; |
| + border-left: 5px solid transparent; |
| + background-clip:padding-box; |
| + background-color: white; |
| +} |
| +::-webkit-scrollbar-track:horizontal { |
| + border-bottom: 0px solid transparent; |
| + border-top: 5px solid transparent; |
| + background-clip:padding-box; |
| + background-color: white; |
| + |
| +} |
| + |
| +::-webkit-scrollbar-thumb { |
| + min-height: 28px; |
| + padding-top:100px; |
| + background-clip:padding-box; |
| + background-color: rgba(0,0,0,0.2); |
| + -webkit-box-shadow: inset 1px 1px 0px rgba(0,0,0,0.10), |
| + inset 0px -1px 0px rgba(0,0,0,0.07); |
| +} |
| + |
| +::-webkit-scrollbar-thumb:hover { |
| + background-color: rgba(0,0,0,0.4); |
| + -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.25); |
| +} |
| + |
| +::-webkit-scrollbar-thumb:active { |
| + -webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,0.35); |
| + background-color: rgba(0,0,0,0.5); |
| +} |
| +::-webkit-scrollbar-thumb:vertical { |
| + border-top: 0px solid transparent; |
| + border-bottom: 0px solid transparent; |
| + border-right: 0px solid transparent; |
| + border-left: 5px solid transparent; |
| +} |
| +::-webkit-scrollbar-thumb:horizontal { |
| + border-top: 5px solid transparent; |
| + border-bottom: 0px solid transparent; |
| + border-right: 0px solid transparent; |
| + border-left: 0px solid transparent; |
| +} |
| + |
| +.inline-scroller .scrollBarInner::-webkit-scrollbar-track:vertical { |
| + border-left: 6px solid transparent; |
| + border-right: 1px solid transparent; |
| +} |
| +.inline-scroller .scrollBarInner::-webkit-scrollbar-track:horizontal { |
| + border-top: 6px solid transparent; |
| + border-bottom: 1px solid transparent; |
| +} |
| + |
| +.inline-scroller .scrollBarInner::-webkit-scrollbar-thumb:vertical { |
| + border-left: 6px solid transparent; |
| + border-right: 1px solid transparent; |
| + border-top: 0px solid transparent; |
| + border-bottom: 0px solid transparent; |
| +} |
| +.inline-scroller .scrollBarInner::-webkit-scrollbar-thumb:horizontal { |
| + border-left: 0px solid transparent; |
| + border-right: 0px solid transparent; |
| + border-top: 6px solid transparent; |
| + border-bottom: 1px solid transparent; |
| +} |
| + |
| +::-webkit-scrollbar-track:hover { |
| + background-color:rgba(0,0,0,0.05); |
| + -webkit-box-shadow: inset 1px 0px 0px rgba(0,0,0,0.10); |
| +} |
| + |
| +::-webkit-scrollbar-track:active { |
| + background-color:rgba(0,0,0,0.05); |
| + -webkit-box-shadow: inset 1px 0px 0px rgba(0,0,0,0.14), |
| + inset -1px -1px 0px rgba(0,0,0,0.07); |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Tooltips |
| +------------------------------------------------------------------*/ |
| +#kd-tooltip { |
| + display: block; |
| + position: absolute; |
| + background: #2d2d2d; |
| + top: -5px; |
| + color: #FFF; |
| + font-weight: bold; |
| + text-align: center; |
| + outline: 1px solid rgba(255,255,255,0.5); |
| + height: 29px; |
| + line-height: 29px; |
| + margin-left: -20px; |
| + padding: 0 10px; |
| + font-size: 11px; |
| + z-index: 2000; |
| + opacity: 0.0; |
| + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); |
| + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; |
| + -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.2); |
| + -moz-box-shadow: 0px 1px 4px rgba(0,0,0,0.2); |
| + box-shadow: 1px 2px 4px rgba(0,0,0,0.2); |
| + -webkit-box-sizing: border-box; |
| + -moz-box-sizing: border-box; |
| + box-sizing: border-box; |
| + -webkit-transition: opacity 0.13s; |
| + -moz-transition: opacity 0.13s; |
| + -o-transition: opacity 0.13s; |
| + transition: opacity 0.13s; |
| +} |
| +#kd-tooltip .pointer { |
| + outline: none; |
| + display: block; |
| + position: absolute; |
| + top: -5px; |
| + left: 24px; |
| + margin: 0 0 0 -5px; |
| + width: 0; |
| + height: 0; |
| + line-height: 0px; |
| + font-size: 0px; |
| + /* This sets the tooptip pointer color */ |
| + border-top: transparent; |
| + border-left: 5px solid transparent; |
| + border-right: 5px solid transparent; |
| + border-bottom: 5px solid #2d2d2d; |
| +} |
| +#kd-tooltip.visible { |
| + opacity: 1.0; |
| + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); |
| + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Sample Form |
| +------------------------------------------------------------------*/ |
| +form ul li{ |
| + margin-bottom:16px; |
| +} |
| +form{ |
| + width:336px; |
| +} |
| +fieldset{ |
| + border:1px solid #ebebeb; |
| + padding:16px; |
| +} |
| +legend{ |
| + padding:0 6px; |
| +} |
| +form label{ |
| + display:block; |
| + line-height:29px; |
| +} |
| +form input[type=text]{ |
| + width:100%; |
| +} |
| +form label input[type=radio], form label input[type=checkbox]{ |
| + bottom:-1px; |
| +} |
| +form label input[type=checkbox]{ |
| + margin-right:5px; |
| +} |
| +form .kd-button.kd-select{ |
| + float:none; |
| + margin-left:0; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Form Errors |
| +------------------------------------------------------------------*/ |
| +#errorDemo{ |
| + width:280px; |
| +} |
| + |
| +input[type=text].kd-formerror{ |
| + border:1px solid #DD4B39; |
| +} |
| +.kd-errormessage{ |
| + color:#DD4B39; |
| + padding:9px 0 ; |
| +} |
| +.kd-errormessage .qm{ |
| + background:#DD4B39; |
| + color:#FFF; |
| + font-weight:bold; |
| + display:inline-block; |
| + padding: 0 5px ; |
| + -webkit-border-radius:10px; |
| + -moz-border-radius:10px; |
| + border-radius:10px; |
| + |
| + position: relative; |
| + top: -1px; |
| +} |
| +.kd-textlabel{ |
| + color:#666; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: List |
| +------------------------------------------------------------------*/ |
| + |
| +.kd-list table, |
| +.kd-list tbody { |
| + display:block; |
| + width:100%; |
| + overflow:visible; |
| +} |
| +.kd-list table tr { |
| + display:block; |
| + position:relative; |
| + height:39px; |
| + margin-top:-1px; |
| + background-color:#f8f8f8; |
| + border:1px solid; |
| + border-color:#ebebea transparent; |
| + z-index:1; |
| +} |
| +.kd-list table tr.highlighted { |
| + background:#fff; |
| +} |
| +.kd-list table tr.checked { |
| + background-color: #f6ebae; |
| + border-color:#ebdb84 transparent; |
| + z-index:2; |
| +} |
| +.kd-list table tr:hover { |
| + z-index:3; |
| + border-color:#ccc; |
| + -webkit-box-shadow: 0 4px 16px rgba(0,0,0,0.2); |
| + -moz-box-shadow: 0 4px 16px rgba(0,0,0,0.2); |
| + -ms-box-shadow: 0 4px 16px rgba(0,0,0,0.2); |
| + box-shadow: 0 4px 16px rgba(0,0,0,0.2); |
| +} |
| +.kd-list table tr.checked:hover { |
| + border-color:#e5d36f; |
| +} |
| +.kd-list table tr:hover input[type=checkbox], |
| +.kd-list table tr:hover .fakecheckbox, |
| +.kd-list table tr.checked input[type=checkbox], |
| +.kd-list table tr.checked .fakecheckbox { |
| + background:#fff; |
| +} |
| +.kd-list table tr td { |
| + display:block; |
| + position:absolute; |
| +} |
| +.kd-list table tr td a { |
| + display:block; |
| + text-overflow:ellipsis; |
| + overflow:hidden; |
| + white-space:nowrap; |
| + line-height:39px; |
| + font-size:13px; |
| + color:#333; |
| +} |
| + |
| +.y-crush .kd-list table tr { |
| + height:29px; |
| +} |
| +.y-crush .kd-list table tr.two-line, |
| +.mobile .kd-list table tr.two-line { |
| + height:51px; |
| +} |
| +.y-crush .kd-list table tr td a, |
| +.mobile .kd-list table .two-line td a { |
| + line-height:29px; |
| +} |
| +.mobile .kd-list table tr td:first-child { |
| + left:16px; |
| + padding-left:0; |
| +} |
| + |
| +/* KNURLING */ |
| +.kd-list table.knurling tr:hover:after { |
| + content:""; |
| + position:absolute; |
| + top:2px; |
| + bottom:2px; |
| + left:2px; |
| + width:7px; |
| + background-image:-webkit-linear-gradient(top, #ddd, #ddd 50%, transparent 50%, transparent); |
| + background-image:-moz-linear-gradient(top, #ddd, #ddd 50%, transparent 50%, transparent); |
| + background-image:linear-gradient(top, #ddd, #ddd 50%, transparent 50%, transparent); |
| + background-size:1px 2px; |
| + cursor:pointer; |
| + z-index:3; |
| +} |
| +.kd-list table.knurling tr.checked:after { |
| + background-image:-webkit-linear-gradient(top, #dcc961, #dcc961 50%, transparent 50%, transparent); |
| + background-image:-moz-linear-gradient(top, #dcc961, #dcc961 50%, transparent 50%, transparent); |
| + background-image:linear-gradient(top, #dcc961, #dcc961 50%, transparent 50%, transparent); |
| +} |
| + |
| +/* Responsive resize transitions */ |
| +.kd-list table tr { |
| + -webkit-transition:height 0.18s; |
| + -moz-transition:height 0.18s; |
| + transition:height 0.18s; |
| +} |
| +.kd-list table tr td { |
| + -webkit-transition-property:top, left, right; |
| + -webkit-transition-duration:0.18s; |
| + -moz-transition-property:top, left, right; |
| + -moz-transition-duration:0.18s; |
| + transition-property:top, left, right; |
| + transition-duration:0.18s; |
| +} |
| +.kd-list table tr td a { |
| + -webkit-transition-property:padding, line-height; |
| + -webkit-transition-duration:0.18s; |
| + -moz-transition-property:padding, line-height; |
| + -moz-transition-duration:0.18s; |
| + transition-property:padding, line-height; |
| + transition-duration:0.18s; |
| +} |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Footers |
| +------------------------------------------------------------------*/ |
| +.pageFooter{ |
| + padding:11px 44px; |
| + border-top:1px solid #ebebeb; |
| + font-size:12px; |
| +} |
| +.pageFooter a:hover{ |
| + text-decoration:underline; |
| +} |
| +.pageFooter, .pageFooter a{color:#999;} |
| +.pageFooter ul.linklist.right{ |
| + float:right; |
| +} |
| +.pageFooter ul.linklist.left{ |
| + float:left; |
| +} |
| +.pageFooter ul.linklist > li, .pageFooter ul.linklist{ |
| +/* display:inline;*/ |
| + float:left; |
| +} |
| +.pageFooter ul.linklist > li{ |
| + margin:0 8px; |
| +} |
| +.pageFooter ul.linklist .kd-menubutton{ |
| + border-left:1px solid; |
| + border-right:1px solid; |
| + border-color:transparent; |
| + margin:-11px 0 0; |
| + padding:11px 7px; |
| +} |
| +.pageFooter ul.linklist .chatbutton{ |
| + padding-top:8px; |
| + padding-bottom:6px; |
| + margin-right:60px; |
| +} |
| +.pageFooter ul.linklist .kd-menubutton.selected a{ |
| + color:#000; |
| +} |
| +.pageFooter ul.linklist .kd-menubutton.selected .kd-disclosureindicator{ |
| + -webkit-transform:rotate(-90deg); |
| +} |
| +.pageFooter ul.linklist .kd-menubutton:hover, .pageFooter ul.linklist .kd-menubutton.selected{ |
| + border-color:#ebebeb; |
| +} |
| +.pageFooter ul.linklist .kd-menubutton:hover a{ |
| + text-decoration:none; |
| +} |
| +.pageFooter .kd-menubutton a{margin:0;} |
| + |
| +.pageFooter .kd-menubutton .kd-disclosureindicator{ |
| + margin:4px 0 0 4px; |
| + opacity:.6; |
| +} |
| +.pageFooter .kd-menubutton img{ |
| + opacity:.6; |
| +} |
| +.pageFooter .kd-menubutton:hover .kd-disclosureindicator, .pageFooter .kd-menubutton:hover img, .pageFooter .kd-menubutton.selected img{ |
| + opacity:.8; |
| +} |
| +.pageFooter .kd-menulist{ |
| + -webkit-box-shadow: 0px -2px 4px rgba(0,0,0,0.2); |
| + -moz-box-shadow: 0px -2px 4px rgba(0,0,0,0.2); |
| + box-shadow: 0 -2px 4px rgba(0,0,0,0.2); |
| + outline:0; |
| + border:1px solid #a7a7a7; |
| + border-bottom:0; |
| +} |
| + |
| +.componentName, #stickersheet h2.componentName a { color: #DD4B39; } |
| +.kd-content-sidebar .kd-sidebarlistitem.selected > a { border-left-color:#dd4b39; } |
| +.kd-appbar .kd-appname, .kd-appbar .kd-appname a { color:#DD4B39; } |
| + |
| + |
| + |
| +.kd-button-submit.disabled, .kd-button-submit.disabled:hover, .kd-button-submit.disabled:active { |
| + border-color:#3079ed; |
| + background-color: #4d90fe; |
| +} |
| +.kd-button-share.disabled, .kd-button-share.disabled:hover, .kd-button-share.disabled:active { |
| + border-color:#29691d; |
| + background-color: #3d9400; |
| +} |
| +.kd-button-action.disabled, .kd-button-action.disabled:hover, .kd-button-action.disabled:active { |
| + border-color: #b0281a; |
| + background-color: #d14836; |
| +} |
| + |
| +.kd-button-submit:focus, .kd-button-submit.focus{ |
| + border-color:#4D90FE |
| +} |
| +.kd-button-share:focus, .kd-button-share.focus{ |
| + border-color:#29691d; |
| +} |
| +.kd-button-action:focus, .kd-button-action.focus{ |
| + border-color:#d14836; |
| +} |
| + |
| +.kd-button-submit { |
| + border-color: #3079ed; |
| + background-color: #4d90fe; |
| + background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed)); |
| + background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed); |
| + background-image: -moz-linear-gradient(top,#4d90fe,#4787ed); |
| + background-image: -ms-linear-gradient(top,#4d90fe,#4787ed); |
| + background-image: -o-linear-gradient(top,#4d90fe,#4787ed); |
| + background-image: linear-gradient(top,#4d90fe,#4787ed); |
| + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe',EndColorStr='#4787ed'); |
| +} |
| +.kd-button-submit:hover { |
| + border-color: #2f5bb7; |
| + background-color: #357ae8; |
| + background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#357ae8)); |
| + background-image: -webkit-linear-gradient(top,#4d90fe,#357ae8); |
| + background-image: -moz-linear-gradient(top,#4d90fe,#357ae8); |
| + background-image: -ms-linear-gradient(top,#4d90fe,#357ae8); |
| + background-image: -o-linear-gradient(top,#4d90fe,#357ae8); |
| + background-image: linear-gradient(top,#4d90fe,#357ae8); |
| + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe',EndColorStr='#357ae8'); |
| +} |
| + |
| +.kd-button-share { |
| + border-color: #29691d; |
| + background-color: #3d9400; |
| + background-image: -webkit-gradient(linear,left top,left bottom,from(#3d9400),to(#398a00)); |
| + background-image: -webkit-linear-gradient(top,#3d9400,#398a00); |
| + background-image: -moz-linear-gradient(top,#3d9400,#398a00); |
| + background-image: -ms-linear-gradient(top,#3d9400,#398a00); |
| + background-image: -o-linear-gradient(top,#3d9400,#398a00); |
| + background-image: linear-gradient(top,#3d9400,#398a00); |
| + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#3d9400',EndColorStr='#398a00'); |
| +} |
| +.kd-button-share:hover { |
| + border-color: #2D6200; |
| + background-color: #368200; |
| + background-image: -webkit-gradient(linear,left top,left bottom,from(#3d9400),to(#368200)); |
| + background-image: -webkit-linear-gradient(top,#3d9400,#368200); |
| + background-image: -moz-linear-gradient(top,#3d9400,#368200); |
| + background-image: -ms-linear-gradient(top,#3d9400,#368200); |
| + background-image: -o-linear-gradient(top,#3d9400,#368200); |
| + background-image: linear-gradient(top,#3d9400,#368200); |
| + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#3d9400',EndColorStr='#368200'); |
| +} |
| + |
| +.kd-button-action { |
| + margin-bottom: 16px; |
| + border: 1px solid transparent; |
| + color: #FFF; |
| + text-transform: uppercase; |
| + letter-spacing:1; |
| + background-color: #d14836; |
| + background-image: -webkit-gradient(linear,left top,left bottom,from(#dd4b39),to(#d14836)); |
| + background-image: -webkit-linear-gradient(top,#dd4b39,#d14836); |
| + background-image: -moz-linear-gradient(top,#dd4b39,#d14836); |
| + background-image: -ms-linear-gradient(top,#dd4b39,#d14836); |
| + background-image: -o-linear-gradient(top,#dd4b39,#d14836); |
| + background-image: linear-gradient(top,#dd4b39,#d14836); |
| + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#dd4b39',EndColorStr='#d14836'); |
| +} |
| +.kd-button-action:hover { |
| + border-color: #b0281a; |
| + border-bottom-color: #AF301F; |
| + background-color: #c53727; |
| + background-image: -webkit-gradient(linear,left top,left bottom,from(#dd4b39),to(#c53727)); |
| + background-image: -webkit-linear-gradient(top,#dd4b39,#c53727); |
| + background-image: -moz-linear-gradient(top,#dd4b39,#c53727); |
| + background-image: -ms-linear-gradient(top,#dd4b39,#c53727); |
| + background-image: -o-linear-gradient(top,#dd4b39,#c53727); |
| + background-image: linear-gradient(top,#dd4b39,#c53727); |
| + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#dd4b39',EndColorStr='#c53727'); |
| +} |
| +.kd-button-action:active, |
| +.kd-button-action:focus:active, |
| +.kd-button-action.focus:active { |
| + border-color: #992A1B; |
| + background-color: #b0281a; |
| + background-image: -webkit-gradient(linear,left top,left bottom,from(#dd4b39),to(#b0281a)); |
| + background-image: -webkit-linear-gradient(top,#dd4b39,#b0281a); |
| + background-image: -moz-linear-gradient(top,#dd4b39,#b0281a); |
| + background-image: -ms-linear-gradient(top,#dd4b39,#b0281a); |
| + background-image: -o-linear-gradient(top,#dd4b39,#b0281a); |
| + background-image: linear-gradient(top,#dd4b39,#b0281a); |
| +} |
| + |
| +.kd-accordion .expanded .row > a { color:#d14836; } |
| + |
| +/*------------------------------------------------------------------ |
| +Component: Activity Indicator |
| +------------------------------------------------------------------*/ |
| +#loader .circle.red .mask.first { border-bottom-color:rgb(60,120,248); } |
| +#loader .circle.yellow .mask.first { border-left-color:rgb(250,36,36); } |
| +#loader .circle.green .mask.first { border-top-color:rgb(255,211,75); } |
| +#loader .circle.blue .mask.first { border-right-color:rgb(0,177,95);} |
| + |
| +#loader .circle.red .mask.first .base { background-color:rgb(250,36,36); } |
| +#loader .circle.red .mask.second .base { background-color:rgb(60,120,248); } |
| + |
| +#loader .circle.yellow .mask.first .base { background-color:rgb(255,211,75); } |
| +#loader .circle.yellow .mask.second .base { background-color:rgb(250,36,36); } |
| + |
| +#loader .circle.green .mask.first .base { background-color:rgb(0,177,95); } |
| +#loader .circle.green .mask.second .base { background-color:rgb(255,211,75); } |
| + |
| +#loader .circle.blue .mask.first .base { background-color:rgb(60,120,248); } |
| +#loader .circle.blue .mask.second .base { background-color:rgb(0,177,95); } |
| + |
| +#loader .circle.initial .mask .mover { background-color:rgb(33,89,189); } |
| + |
| +#loader .circle.red .mask.first .mover { background-color:rgb(60,120,248); } |
| +#loader .circle.red .mask.second .mover { background-color:rgb(158,18,18); } |
| + |
| +#loader .circle.yellow .mask.first .mover { background-color:rgb(250,36,36); } |
| +#loader .circle.yellow .mask.second .mover { background-color:rgb(222,161,26); } |
| + |
| +#loader .circle.green .mask.first .mover { background-color:rgb(255,211,75); } |
| +#loader .circle.green .mask.second .mover { background-color:rgb(0,137,72); } |
| + |
| +#loader .circle.blue .mask.first .mover { background-color:rgb(0,177,95); } |
| +#loader .circle.blue .mask.second .mover { background-color:rgb(33,89,189); } |
| + |
| +#loader.initial .circle.initial .mask .mover { background-color:rgb(60,120,248); } |
| + |
| +#loader.yellow .circle.yellow .mask.first { border-color:rgb(255,211,75); } |
| +#loader.yellow .circle.yellow .mask.first .mover { background-color:rgb(158,18,18); } |
| +#loader.yellow .circle.yellow .mask.second .mover { background-color:rgb(255,211,75); } |
| + |
| +#loader.green .circle.green .mask.first { border-color:rgb(0,177,95); } |
| +#loader.green .circle.green .mask.first .mover { background-color:rgb(222,161,26); } |
| +#loader.green .circle.green .mask.second .mover { background-color:rgb(0,177,95); } |
| + |
| +#loader.blue .circle.blue .mask.first { border-color:rgb(60,120,248); } |
| +#loader.blue .circle.blue .mask.first .mover { background-color:rgb(0,137,72); } |
| +#loader.blue .circle.blue .mask.second .mover { background-color:rgb(60,120,248); } |
| + |
| +#loader.red .circle.red .mask.first { border-color:rgb(250,36,36); } |
| +#loader.red .circle.red .mask.first .mover { background-color:rgb(33,89,189); } |
| +#loader.red .circle.red .mask.second .mover { background-color:rgb(250,36,36); } |
| + |
| a { |
| color: rgb(0, 102, 204); |
| text-decoration: none; |
| } |
| body { |
| - background: -webkit-gradient(radial, center center, 0, center center, 400, |
| - from(rgb(254, 254, 254)), |
| - to(rgb(239, 239, 239))); |
| - font-family: 'Open sans', Arial, sans-serif; |
| - margin:0; |
| - padding:0; |
| + margin: 0; |
| + padding: 20px; |
| direction: __MSG_@@bidi_dir__; |
| } |
| @@ -56,17 +4481,26 @@ form { |
| display: inline; |
| } |
| -h1 { |
| - font-size: 24px; |
| - font-weight: normal; |
| +h1.icon-label { |
| + vertical-align: 14px; |
| + margin-bottom: 60px; |
| + font-size: 28px; |
| + font-weight: 300; |
| + color: #aaa; |
| + font-family: "Open sans", "Ariel", sans-serif |
| } |
| -html { |
| - /* |
| - Used to force background gradient to center correctly. |
| - http://crbug.com/109705 |
| - */ |
| - height: 100%; |
| +h2 { |
| + color: #666; |
| +} |
| + |
| +header { |
| + display: -webkit-box; |
| + width: 100%; |
| +} |
| + |
| +header > .box-spacer { |
| + -webkit-box-flex: 1; |
| } |
| label { |
| @@ -74,6 +4508,17 @@ label { |
| font-weight: bold; |
| } |
| +section { |
| + width: 690px; |
| + margin: 30px auto; |
| + border: 1px solid #e5e5e5; |
| + background: #f9f9f9; |
| + padding: 20px 30px 20px 30px; |
| + border-radius: 3px; |
| + box-shadow: 0 2px 5px rgba(0,0,0,0.07); |
| +} |
| + |
| + |
| /* Classes */ |
| .access-code-digit-group { |
| @@ -106,12 +4551,6 @@ label { |
| height: 0 !important; |
| } |
| -.choice-header { |
| - font-size: 24px; |
| - font-weight: normal; |
| - margin-__MSG_@@bidi_start_edge__: 10px; |
| -} |
| - |
| .choice-footer { |
| font-size: 14px; |
| } |
| @@ -125,17 +4564,13 @@ label { |
| cursor: pointer; |
| } |
| -.description { |
| - margin-bottom: 25px; |
| -} |
| - |
| .error-state { |
| background-image: url('icon_warning.png'); |
| background-repeat: no-repeat; |
| background-position: top __MSG_@@bidi_start_edge__; |
| padding-__MSG_@@bidi_start_edge__: 30px; |
| padding-top: 3px; |
| - margin-bottom: 10px; |
| + margin-bottom: 8px; |
| color: #900; |
| display: inline-block; |
| } |
| @@ -182,43 +4617,34 @@ label { |
| margin-bottom: 10px; |
| } |
| -.mode-select-button { |
| - width: 100%; |
| - height: 32px; |
| - white-space: nowrap; |
| +.mode-select-button-column { |
| + text-align: __MSG_@@bidi_end_edge__; |
| } |
| -.mode-select-label { |
| - padding-__MSG_@@bidi_end_edge__: 20px; |
| +.mode-select-button-column button { |
| + min-width: 72px; |
| } |
| .mode-select-table { |
| - margin-__MSG_@@bidi_start_edge__: 40px; |
| - width: 600px; /* width + margin = body width */ |
| border-collapse: collapse; |
| - margin-top: 40px; |
| + margin-top: 30px; |
| + width: 100%; |
| } |
| .mode-select-table-spacer { |
| - height: 20px; |
| + height: 13px; |
| } |
| .mode-select-table-underline td { |
| - border-bottom: 1px solid #c6c6c6; |
| + border-bottom: 1px solid #ebebeb; |
| } |
| .hide-scrollbars { |
| overflow-y: hidden; |
| } |
| -.host-list-container { |
| - -webkit-transition: all 0.5s; |
| - overflow: hidden; |
| -} |
| - |
| .host-list-table { |
| - margin-__MSG_@@bidi_start_edge__: 30px; |
| - width: 610px; /* width + margin = body width */ |
| + width: 100%; |
| border-spacing: 0; |
| } |
| @@ -228,12 +4654,15 @@ label { |
| } |
| .host-list-row td { |
| - border-bottom: 1px solid transparent; |
| - border-top: 1px solid transparent; |
| + border-bottom: 1px solid #ebebeb; |
| +} |
| + |
| +td { |
| + vertical-align: middle; |
| } |
| -.host-list-row:hover { |
| - background-color: #e7eef2; |
| +.host-online:hover { |
| + background-color: #f2f2f2; |
| } |
| .host-list-rename-icon, .host-list-remove-icon { |
| @@ -256,46 +4685,29 @@ label { |
| opacity: 0.5; |
| } |
| -.host-list-row:hover td { |
| - border-bottom: 1px solid #c6c6c6; |
| - border-top: 1px solid #c6c6c6; |
| -} |
| - |
| -.host-list-row-end { |
| - padding-__MSG_@@bidi_end_edge__: 10px; |
| -} |
| - |
| -.host-list-row-start { |
| - padding-__MSG_@@bidi_start_edge__: 10px; |
| +.host-list-main-icon { |
| + width: 40px; |
| } |
| -.host-offline { |
| - color: #a9a9a9; |
| +.host-list-edit-icon, |
| +.host-list-rename-icon { |
| + width: 16px; |
| } |
| +.host-offline .host-list-label, |
| .host-offline .host-list-main-icon { |
| opacity: 0.5; |
| } |
| +.kd-button { |
| + white-space:nowrap; |
| +} |
| + |
| .small-print { |
| font-size: 13px; |
| color: #AAA; |
| } |
| -.top-primary { |
| - font-size: 14px; |
| - position: absolute; |
| - top: 0.5em; |
| - __MSG_@@bidi_start_edge__: 0.5em; |
| -} |
| - |
| -.top-secondary { |
| - font-size: 14px; |
| - position: absolute; |
| - top: 0.5em; |
| - __MSG_@@bidi_end_edge__: 0.5em; |
| -} |
| - |
| .waiting { |
| color: rgb(180, 180, 180); |
| } |
| @@ -351,8 +4763,9 @@ label { |
| color: rgba(0, 0, 0, 0.5); |
| } |
| -#daemon-control { |
| - margin-top: 50px; |
| +#daemon-plugin-container { |
| + width: 0; |
| + height: 0; |
| } |
| #dialog-screen { |
| @@ -382,14 +4795,6 @@ label { |
| width: 64px; |
| } |
| -#main { |
| - color: rgb(115, 115, 115); |
| - font-size: 16px; |
| - margin: 100px auto 0 auto; |
| - padding: 10px; |
| - width: 640px; |
| -} |
| - |
| #host-list-error { |
| margin-__MSG_@@bidi_start_edge__: 40px; |
| } |
| @@ -410,3 +4815,7 @@ label { |
| min-width: 0; |
| line-height: 0; |
| } |
| + |
| +#top-secondary { |
| + margin-top: 10px |
| +} |
