/*------------------------------------------------------------------ eric meyer's reset ------------------------------------------------------------------*/ 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:13px; -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:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } /*i'm leaving these in case we end up needing them*/ .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; 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; } 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;} #otherColor .kd-errormessage{display:block; position:absolute; top:35px; left:141px; text-align:right; display:none;} /*------------------------------------------------------------------ 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; } /*------------------------------------------------------------------ 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; } .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-button .maskedIcon.icon_images{ -webkit-mask-image:url('../images/icons/corpus-images.png'); } .kd-googlebuttonbar .kd-button .maskedIcon.icon_shopping{ -webkit-mask-image:url('../images/icons/corpus-shopping.png'); } .kd-googlebuttonbar .kd-button .maskedIcon.icon_search{ -webkit-mask-image:url('../images/icons/corpus-search.png'); } .kd-googlebuttonbar .kd-button .maskedIcon.icon_news{ -webkit-mask-image:url('../images/icons/corpus-news.png'); } /*.kd-googlebuttonbar .kd-button .maskedIcon.icon_images{ -webkit-mask-image:url('../images/icons/svg/Search/images.svg'); } .kd-googlebuttonbar .kd-button .maskedIcon.icon_shopping{ -webkit-mask-image:url('../images/icons/svg/Search/shopping.svg'); } .kd-googlebuttonbar .kd-button .maskedIcon.icon_search{ -webkit-mask-image:url('../images/icons/svg/Search/everything.svg'); } .kd-googlebuttonbar .kd-button .maskedIcon.icon_news{ -webkit-mask-image:url('../images/icons/svg/Search/news.svg'); }*/ .kd-googlebuttonbar.kd-segmentedcontrol{ display:inline-block; float:none; margin-left:0; } /* Social controls */ #kd-social .kd-name { float:left; font-size:12px; font-weight:bold; line-height: 29px; color: #666; } #kd-social .kd-notifications { width:27px; min-width:27px; margin-left:9px; font-size:14px; font-weight:bold; } #kd-social .kd-share { position:relative; padding-left:2px; margin-left:7px; border-color:transparent; background:#dcdcdc; } #kd-social .kd-share:hover { border-color:#b0b0b0; } #kd-social .kd-share:after { content:''; display:block; position:absolute; top:9px; right:-6px; width:8px; height:9px; background:url('../images/social_share_nubbin.png') left 0px no-repeat; } #kd-social .kd-share:hover:after { background-position:left -9px; } #kd-social .kd-share:active:after { background-position:left -18px; } #kd-social .kd-avatar { width:27px; min-width:27px; margin-left:11px; padding:0; border:1px solid rgba(0,0,0,0.3); background-clip:border-box; background:url('../images/profile_fpo_small.jpg') no-repeat; } #kd-social .kd-avatar:hover, #kd-social .kd-avatar.hover { border:1px solid rgba(0,0,0,0.4); } #kd-social .kd-avatar .kd-disclosureindicator { position:relative; right:-24px; opacity:0.5; } #kd-social .kd-avatar:hover .kd-disclosureindicator { opacity:1; } /* 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; opacity:0.3; } .kd-appswitcher:hover .logo .kd-disclosureindicator { opacity:1; } /*.kd-appswitcher.open .logo .kd-disclosureindicator { opacity:0; background-position:7px 0; -webkit-transition-property:opacity, background-position; -webkit-transition-duration:0.218s; -webkit-transition-delay:0s; -webkit-transition-timing-function:linear, ease-out; -moz-transition-property:opacity, background-position; -moz-transition-duration:0.218s; -moz-transition-delay:0s; -moz-transition-timing-function:linear, ease-out; transition-property:opacity, background-position; transition-duration:0.218s; transition-delay:0s; transition-timing-function:linear, ease-out; }*/ .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; } .kd-appswitcher.open .kd-appswitcher-menu { left:-18px; max-height:400px; opacity:1; margin-top:0; } .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); } .kd-app-search > a { background-image:url('../images/more_menu_search.png'); } .kd-app-plus > a { background-image:url('../images/apps/plus.jpg'); } .kd-app-calendar > a { background-image:url('../images/apps/calendar.png'); } .kd-app-maps > a { background-image:url('../images/apps/maps.png'); } .kd-app-reader > a { background-image:url('../images/apps/reader.png'); } .kd-app-docs > a { background-image:url('../images/apps/docs.png'); } .kd-app-mail > a { background-image:url('../images/apps/mail.png'); } .kd-app-more > a { padding-left:16px; width:176px; } .kd-app-search-everything > a { background-image:url('../images/more_menu_search_everything.png'); } .kd-app-search-images > a { background-image:url('../images/more_menu_search_images.png'); } .kd-app-search-video > a { background-image:url('../images/more_menu_search_video.png'); } .kd-app-search-news > a { background-image:url('../images/more_menu_search_news.png'); } .kd-app-search-shopping > a { background-image:url('../images/more_menu_search_shopping.png'); } .kd-app-search-books > a { background-image:url('../images/more_menu_search_books.png'); } .kd-app-search-places > a { background-image:url('../images/more_menu_search_places.png'); } .kd-app-search-blogs > a { background-image:url('../images/more_menu_search_blogs.png'); } .kd-app-plus-home > a { background-image:url('../images/more_menu_plus_home.png'); } .kd-app-plus-profile > a { background-image:url('../images/more_menu_plus_profile.png'); } .kd-app-plus-photos > a { background-image:url('../images/more_menu_plus_photos.png'); } .kd-app-plus-circles > a { background-image:url('../images/more_menu_plus_circles.png'); } .kd-app-plus-hangouts > a { background-image:url('../images/more_menu_plus_hangouts.png'); } .kd-app-plus-games > a { background-image:url('../images/more_menu_plus_games.png'); } .kd-app-youtube > a { background-image:url('../images/more_menu_youtube.png'); } .kd-app-photos > a { background-image:url('../images/more_menu_picasa.png'); } .kd-app-sites > a { background-image:url('../images/more_menu_sites.png'); } .kd-app-groups > a { background-image:url('../images/more_menu_groups.png'); } .kd-app-earth > a { background-image:url('../images/more_menu_earth.png'); } .kd-app-voice > a { background-image:url('../images/more_menu_voice.png'); } .kd-app-blogger > a { background-image:url('../images/more_menu_blogger.png'); } .kd-app-talk > a { background-image:url('../images/more_menu_talk.png'); } .kd-app-igoogle > a { background-image:url('../images/more_menu_igoogle.png'); } .kd-app-directory > a { background-image:url('../images/more_menu_directory.png'); } .kd-app-chrome > a { background-image:url('../images/more_menu_chrome.png'); } .kd-app-toolbar > a { background-image:url('../images/more_menu_toolbar.png'); } .kd-app-bookmarks > a { background-image:url('../images/more_menu_bookmarks.png'); } .kd-app-latitude > a { background-image:url('../images/more_menu_latitude.png'); } .kd-app-panoramio > a { background-image:url('../images/more_menu_panoramio.png'); } .kd-app-checkout > a { background-image:url('../images/more_menu_checkout.png'); } .kd-app-translate > a { background-image:url('../images/more_menu_translate.png'); } .kd-app-sketchup > a { background-image:url('../images/more_menu_sketchup.png'); } .kd-app-pack > a { background-image:url('../images/more_menu_pack.png'); } .kd-app-health > a { background-image:url('../images/more_menu_health.png'); } .kd-app-fusiontables > a { background-image:url('../images/more_menu_fusiontables.png'); } .kd-app-labs > a { background-image:url('../images/more_menu_labs.png'); } .kd-app-code > a { background-image:url('../images/more_menu_code.png'); } .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); } .kd-app:hover > .kd-more-menu, .kd-app .kd-more-menu.open { width:192px; left:100%; } .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-disclosureindicator.down { } .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; cursor:default; } .kd-content-sidebar li:hover > .kd-disclosureindicator { opacity: 1.0; } .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; } .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; } /* Flyout triggers */ .kd-flyouttrigger.clear { border:1px solid #b5b5b5; background:url('/assets/images/disclosure_arrow_md_grey_down.png') center no-repeat; } .kd-flyouttrigger.clear:hover, .kd-flyouttrigger.clear.selected{ border-color:#666; background:url('../images/disclosure_arrow_dk_grey_444_down.png') center no-repeat #DDD; } .kd-flyouttrigger:hover, .kd-flyouttrigger.selected{ background-image:url('../images/disclosure_arrow_down_white.png'); background-position:center; background-repeat:no-repeat; } .kd-flyouttrigger .kd-menulist{ position:absolute; display:none; left:0px; top:100%; z-index:3; } .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; } /*.kd-content-sidebar .kd-sidebarlistitem.kd-zippy.expanded > .row{ padding-left:23px; }*/ .kd-content-sidebar .selected .kd-disclosureindicator { background-image: url('../images/disclosure_arrow_orange_rt.png'); } /*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; } /*Gmail*/ li.kd-labellistitem a.kd-label-red { background-image: url('../images/icons/label_red.png'); } li.kd-labellistitem a.kd-label-grey { background-image: url('../images/icons/label_grey.png'); } li.kd-labellistitem a.kd-label-blue { background-image: url('../images/icons/label_blue.png'); } .kd-button.compose { width: 97px; } /*------------------------------------------------------------------ Component: App bars ------------------------------------------------------------------*/ .kd-appbar { position: relative; padding: 21px 0; border-bottom: 1px solid #ebebeb; height: 66px; 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-description { height: 29px; font-size: 20px; font-weight: normal; line-height: 29px; padding-bottom: 8px; color: #666; white-space:nowrap; } .kd-appbar .kd-description .kd-value { color: black; font-weight: bold; } .kd-appbar .kd-description form { display: inline; } .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; } .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; background-color: #f8f8f8; background-image: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f1f1f1)); /* @alternate */ background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1); /* @alternate */ background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1); /* @alternate */ background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1); /* @alternate */ background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1); /* @alternate */ background-image: linear-gradient(top,#f8f8f8,#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)); /* @alternate */ background-image: -webkit-linear-gradient(top,#f6f6f6,#f1f1f1); /* @alternate */ background-image: -moz-linear-gradient(top,#f6f6f6,#f1f1f1); /* @alternate */ background-image: -ms-linear-gradient(top,#f6f6f6,#f1f1f1); /* @alternate */ background-image: -o-linear-gradient(top,#f6f6f6,#f1f1f1); /* @alternate */ background-image: linear-gradient(top,#f6f6f6,#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)); /* @alternate */ background-image: -webkit-linear-gradient(top,#EEEEEE,#E0E0E0); /* @alternate */ background-image: -moz-linear-gradient(top,#EEEEEE,#E0E0E0); /* @alternate */ background-image: -ms-linear-gradient(top,#EEEEEE,#E0E0E0); /* @alternate */ background-image: -o-linear-gradient(top,#EEEEEE,#E0E0E0); /* @alternate */ background-image: linear-gradient(top,#EEEEEE,#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; text-align: center; color: #666; font-size: 11px; font-weight: bold; height: 27px; padding: 0 8px; line-height: 27px; -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; border:1px solid #DCDCDC; /* @alternate */ 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; background-color: #f5f5f5; background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f1f1f1)); /* @alternate */ background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1); /* @alternate */ background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1); /* @alternate */ background-image: -ms-linear-gradient(top,#f5f5f5,#f1f1f1); /* @alternate */ background-image: -o-linear-gradient(top,#f5f5f5,#f1f1f1); /* @alternate */ background-image: linear-gradient(top,#f5f5f5,#f1f1f1); -webkit-user-select:none; -moz-user-select:none; cursor:default; } .kd-button:hover, .kd-button.hover { border: 1px solid #C6C6C6; color: #222; background-color: #f8f8f8; background-image: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f1f1f1)); /* @alternate */ background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1); /* @alternate */ background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1); /* @alternate */ background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1); /* @alternate */ background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1); /* @alternate */ background-image: linear-gradient(top,#f8f8f8,#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)); /* @alternate */ background-image: -webkit-linear-gradient(top,#f6f6f6,#f1f1f1); /* @alternate */ background-image: -moz-linear-gradient(top,#f6f6f6,#f1f1f1); /* @alternate */ background-image: -ms-linear-gradient(top,#f6f6f6,#f1f1f1); /* @alternate */ background-image: -o-linear-gradient(top,#f6f6f6,#f1f1f1); /* @alternate */ background-image: linear-gradient(top,#f6f6f6,#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)); /* @alternate */ background-image: -webkit-linear-gradient(top,#EEEEEE,#E0E0E0); /* @alternate */ background-image: -moz-linear-gradient(top,#EEEEEE,#E0E0E0); /* @alternate */ background-image: -ms-linear-gradient(top,#EEEEEE,#E0E0E0); /* @alternate */ background-image: -o-linear-gradient(top,#EEEEEE,#E0E0E0); /* @alternate */ background-image: linear-gradient(top,#EEEEEE,#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-left: 0px; margin-right: 0px; vertical-align: middle; } .kd-button.selected img { opacity: 0.9; } .kd-button:hover img { opacity: 0.72; } .kd-button:active img { opacity: 1.0; } /* Disabled buttons */ .kd-button.disabled, .kd-button.disabled:hover, .kd-button.disabled:active { background: none; color: #b8b8b8; border: 1px solid #f3f3f3; /* @alternate */ 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; } .kd-button.disabled img { opacity: 0.5; } /* 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)); /* @alternate */ background-image: -webkit-linear-gradient(top,#777,#555); /* @alternate */ background-image: -moz-linear-gradient(top,#777,#555); /* @alternate */ background-image: -ms-linear-gradient(top,#777,#555); /* @alternate */ background-image: -o-linear-gradient(top,#777,#555); /* @alternate */ background-image: linear-gradient(top,#777,#555); } .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)); /* @alternate */ background-image: -webkit-linear-gradient(top,#666,#444); /* @alternate */ background-image: -moz-linear-gradient(top,#666,#444); /* @alternate */ background-image: -ms-linear-gradient(top,#666,#444); /* @alternate */ background-image: -o-linear-gradient(top,#666,#444); /* @alternate */ background-image: linear-gradient(top,#666,#444); } .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; } /* Disclosure indicator */ .kd-disclosureindicator { display: inline-block; width: 5px; height: 7px; background: url('/assets/images/disclosure_arrow_dk_grey.png') center no-repeat; } /* Buttons of all styles */ .kd-buttonbar .kd-button, .kd-buttonbar .kd-combobutton, .kd-buttonbar .kd-expandbutton { float: left; margin: 0; margin-right: 16px; position: relative; z-index: 1; } .left + .kd-combobutton{ margin-left:0; } .kd-buttonbar .kd-button:hover { z-index: 2; } .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; opacity: .8; /* ie hacks*/ *float:none; *position:relative; *top:-3px; /* margin-top:12px\0/; */ } .kd-select { position:relative; } .kd-select .kd-disclosureindicator{ background:url('/assets/images/disclosure_arrow_dk_grey_up_down.png'); width:7px; height:11px; 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; 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; 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; } .kd-expandbutton .main { z-index: 1; position: absolute; right: 0; } .kd-expandbutton:hover .kd-button.main{ border: 1px solid #C6C6C6; color: #333; background-color: #f8f8f8; background-image: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f1f1f1)); /* @alternate */ background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1); /* @alternate */ background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1); /* @alternate */ background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1); /* @alternate */ background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1); /* @alternate */ background-image: linear-gradient(top,#f8f8f8,#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 { -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; } .kd-viewtoggle .kd-button.selected{ z-index:3; } .kd-viewtoggle .tab{ position: absolute; top: 0; right: 36px; display:block; height:27px; width:16px; background: url('../images/disclosure_arrow_lt_grey_left.png') center no-repeat #f7f7f7; border: 1px solid #ebebeb; -webkit-border-radius: 2px 0 0 2px; -moz-border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px; } .kd-viewtoggle.wide .tab{ right:72px; } .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))); /* @alternate */ background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.16), rgba(0,0,0,0.2)); /* @alternate */ background-image: -moz-linear-gradient(top, rgba(0,0,0,0.16), rgba(0,0,0,0.2)); /* @alternate */ background-image: -ms-linear-gradient(top, rgba(0,0,0,0.16), rgba(0,0,0,0.2)); /* @alternate */ background-image: -o-linear-gradient(top, rgba(0,0,0,0.16), rgba(0,0,0,0.2)); /* @alternate */ background-image: linear-gradient(top, rgba(0,0,0,0.16), rgba(0,0,0,0.2)); } .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))); /* @alternate */ background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.14), rgba(0,0,0,0.2)); /* @alternate */ background-image: -moz-linear-gradient(top, rgba(0,0,0,0.14), rgba(0,0,0,0.2)); /* @alternate */ background-image: -ms-linear-gradient(top, rgba(0,0,0,0.14), rgba(0,0,0,0.2)); /* @alternate */ background-image: -o-linear-gradient(top, rgba(0,0,0,0.14), rgba(0,0,0,0.2)); /* @alternate */ background-image: linear-gradient(top, rgba(0,0,0,0.14), rgba(0,0,0,0.2)); } .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); } /* 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)); /* @alternate */ background-image: -webkit-linear-gradient(top, #EEEEEE, #e0e0e0); /* @alternate */ background-image: -moz-linear-gradient(top, #EEEEEE, #e0e0e0); /* @alternate */ background-image: -ms-linear-gradient(top, #EEEEEE, #e0e0e0); /* @alternate */ background-image: -o-linear-gradient(top, #EEEEEE, #e0e0e0); /* @alternate */ background-image: linear-gradient(top, #EEEEEE, #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)); /* @alternate */ background-image: -webkit-linear-gradient(top, #3b93ff, #3689EE); /* @alternate */ background-image: -moz-linear-gradient(top, #3b93ff, #3689EE); /* @alternate */ background-image: -ms-linear-gradient(top, #3b93ff, #3689EE); /* @alternate */ background-image: -o-linear-gradient(top, #3b93ff, #3689EE); /* @alternate */ background-image: linear-gradient(top, #3b93ff, #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)); /* @alternate */ background-image: -webkit-linear-gradient(top, #f8f8f8, #f1f1f1); /* @alternate */ background-image: -moz-linear-gradient(top, #f8f8f8, #f1f1f1); /* @alternate */ background-image: -ms-linear-gradient(top, #f8f8f8, #f1f1f1); /* @alternate */ background-image: -o-linear-gradient(top, #f8f8f8, #f1f1f1); /* @alternate */ background-image: linear-gradient(top, #f8f8f8, #f1f1f1); } .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); } .kd-butterbar.shown{ opacity:1; left:496px; } .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; } .kd-butterbar.fatal { background: #ff3636; border: 1px solid #9b1e1e; color: white; font-weight: bold; } .kd-butterbar.fatal a { color: white; padding-left: 0.5em; } .kd-butterbar.fatal a:hover { color: white; } /*------------------------------------------------------------------ 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; } .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; } .kd-zippycontent ul.iconList li a.images { background-image: url(../images/icons/corpus-images.png); } .kd-zippycontent ul.iconList li a.news { background-image: url(../images/icons/corpus-news.png); } .kd-zippycontent ul.iconList li a.places { background-image: url(../images/icons/corpus-places.png); } /* 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 .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); } .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 .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); /* @alternate */ background-image:-moz-linear-gradient(135deg, transparent, transparent 3px, #fff 3px, #fff 4px, transparent 4px, transparent); /* @alternate */ background-image:-o-linear-gradient(135deg, transparent, transparent 3px, #fff 3px, #fff 4px, transparent 4px, transparent); /* @alternate */ 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 XXX: Modified to remove from defaults. ------------------------------------------------------------------*/ .kd-input[type=checkbox], .kd-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; } .kd-input[type=checkbox]:active, .kd-input[type=radio]:active, .fakecheckbox:active, .fakeradio:active { border-color:#666; background:#ebebeb; } .kd-input[type=checkbox]:hover, .kd-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); } .kd-input[type=radio], .fakeradio { border-radius:50%; width: 15px; height: 15px; } .kd-input[type=checkbox].disabled, .kd-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; } .kd-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%; } .kd-input[type=checkbox]:checked::after, .fakecheckbox.checked::after { content:url('../images/check_no_box.png'); display:block; position:absolute; top:-6px; left:-5px; } .kd-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; -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; background: url('../images/bubble_point_white.png'); } .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-image: url('../images/check_no_box.png'); 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; } .kd-menulistitem:hover .kd-flyout { width: auto; overflow: visible; opacity: 1.0; -moz-opacity: 1.0; } .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; } .kd-menulistitem:hover .kd-disclosureindicator { border-left-color: #999; opacity: 1; } .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;*/ opacity: 0.0; -moz-opacity: 0.0; } .kd-menubutton .kd-menulist.shown { left:0; height: auto; opacity: 1.0; -moz-opacity: 1.0; } .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; } 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; } .kd-modaldialog.visible { opacity: 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; } .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; cursor:default; } .kd-closebutton:hover { opacity: 1; -moz-opacity: 1; } /*------------------------------------------------------------------ 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; } .kd-settings.visible { opacity: 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; background: url('../images/bubble_point_white.png'); } .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-bubble.alert .pointer{ background: url('../images/bubble_point_yellow.png'); } .kd-profilebox{ width:336px; } .kd-profilebox .kd-disclaimer{ background:#F9EDBE; padding:16px; margin:-16px -16px 0 -16px; border-bottom:1px solid #ddd8c0; } .kd-bubble.kd-profilebox .pointer{ background: url('../images/bubble_point_yellow_grey.png'); } .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;} .kd-bubble.dark .pointer{ background:url('../images/bubble_point_dk_grey.png') bottom center no-repeat; } /*------------------------------------------------------------------ Component: Hovercard ------------------------------------------------------------------*/ .kd-hovercard { outline:1px solid rgba(0,0,0,0.2); width: 160px; -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; -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; } .kd-minicalendar{ width:148px; margin-left:-4px; } .kd-datepicker .kd-minicalendar{ width:144px; margin:0; } .kd-datepicker.shown{ opacity:1; } .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; background:url('../images/icons/svg/Translate/check_with_stroke.svg'); /* -webkit-mask-image:url('../images/icons/svg/Translate/check_with_stroke.svg');*/ } /*------------------------------------------------------------------ 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 .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%; } #loader .circle .mask .mover { height:100%; width:100%; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; } #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{ background:url('../images/offline_lightning.png') center no-repeat; position:absolute; top:50%; left:50%; margin-top:-6px; margin-left:-3px; opacity:0; width:8px; height:14px; } #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%; } /*Grey*/ /*blue and yellow becaome dark grey*/ /*#loader.grey.red .circle.red .base, #loader.grey.blue .circle.blue .base, #loader.grey.yellow .circle.yellow .base, #loader.grey.green .circle.green .base, #loader.grey.red .circle.red .mask.second .mover, #loader.grey.yellow .circle.yellow .mask.second .mover, #loader.grey.blue .circle.blue .mask.second .mover, #loader.grey.red .circle.yellow .mask.first .mover, #loader.grey.yellow .circle.green .mask.first .mover, #loader.grey.green .circle.blue .mask.first .mover, #loader.grey.blue .circle.red .mask.first .mover{ background-color:#777; }*/ /*red and green become lighter grey*/ /*#loader.grey.red .circle.red .mask.first .base, #loader.grey.red .circle.red .mask.second .mover, #loader.grey.green .circle.green .mask.first .base, #loader.grey.green .circle.green .mask.second .mover, #loader.grey.green .circle.blue .mask.first .mover, #loader.grey.blue .circle.blue .mask.second .base, #loader.grey.red .circle.yellow .mask.first .mover, #loader.grey.yellow .circle.yellow .mask.second .base{ background-color:#999; }*/ /*#loader.offline.red .circle.red .mask.first .mover, #loader.grey.yellow .circle.yellow .mask.first .mover, #loader.grey.green .circle.green .mask.first .mover, #loader.grey.blue .circle.blue .mask.first .mover, #loader.grey.red .circle.yellow .mask.second .mover, #loader.grey.yellow .circle.green .mask.second .mover, #loader.grey.green .circle.blue .mask.second .mover, #loader.grey.blue .circle.red .mask.second .mover{ background-color:#555; }*/ /*#loader.grey .mask.second .base, #loader.grey .mask.second .mover, #loader.grey .mask.first .base, #loader.grey .mask.first .mover{ background:#999 !important; } #loader.grey .mask.first{ border-color:#777 !important; } #loader.grey.red .mask.first, #loader.grey.green .mask.first{ border-color:#999 !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); /* @alternate */ 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); /* @alternate */ 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); /* @alternate */ 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); } .kd-progressbar-animated.kd-progressbar-tall .kd-progresstrack { background-size:20px 10px; } @-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%); /* @alternate */ background-image: -moz-linear-gradient(0, transparent 50%, white 50%); /* @alternate */ 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))); 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*/ /* @alternate */ 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))); 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*/ /* @alternate */ 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:horizontal { background-color: transparent; width:4px; }*/ ::-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-track:hover { background-color:rgba(0,0,0,0.035); -webkit-box-shadow: inset 1px 1px 0px rgba(0,0,0,0.14), inset -1px -1px 0px rgba(0,0,0,0.07); }*/ .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); } /*::-webkit-scrollbar-track-piece { background: white; }*/ /*------------------------------------------------------------------ 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; -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; } #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; } /*------------------------------------------------------------------ Component: Star/Importance icons ------------------------------------------------------------------*/ .kd-star { display: inline-block; height: 21px; width: 21px; background: url('../images/icons/svg/Gmail/starred_ghost.svg') center center no-repeat; cursor: default; } .kd-star:hover { background-image: url('../images/icons/svg/Gmail/starred_ghost_hover.svg'); } .kd-star.selected { background-image: url('../images/icons/svg/Gmail/starred_fill_yellow.svg'); } .kd-star.selected:hover { background-image: url('../images/icons/svg/Gmail/starred_fill_yellow_hover.svg'); } #wrap { padding-bottom: 400px; padding-left:200px; } .star { height:19px; width: 19px; } .star_unlit { background: url(../images/star.png); } .star_unlit:hover { background: url(../images/star_hover.png); } .star_unlit:active { background: url(../images/star_down.png); } .star_lit { background: url(../images/star_fill.png); } .star_lit:hover { background: url(../images/star_fill_hover.png); } .star_lit:active { background: url(../images/star_fill_down.png); } /* importance indicators */ .importance { height:19px; width: 19px; } .importance_unlit { background: url(../images/importance.png); } .importance_unlit:hover { background: url(../images/importance_hover.png); } .importance_unlit:active { background: url(../images/importance_down.png); } .importance_lit { position: relative; height:19px; width: 19px; background: url(../images/importance_fill.png); } .importance_lit:hover { background: url(../images/importance_fill_hover.png); } .importance_lit:active { background: url(../images/importance_fill_down.png); } /*------------------------------------------------------------------ Component: Rating Stars ------------------------------------------------------------------*/ .kd-ratingstar{ display:inline-block; width:12px; height:21px; background:url('../images/icons/svg/Maps/review_stars_blank.svg') center no-repeat; cursor:default; } .kd-ratingstar.full{ background:url('../images/icons/svg/Maps/review_stars_full.svg') center no-repeat; } .kd-ratingstar.half{ background:url('../images/icons/svg/Maps/review_stars_half.svg') center no-repeat; } /*------------------------------------------------------------------ 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; } .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); /* @alternate */ background-image:-moz-linear-gradient(top, #ddd, #ddd 50%, transparent 50%, transparent); /* @alternate */ 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); /* @alternate */ background-image:-moz-linear-gradient(top, #dcc961, #dcc961 50%, transparent 50%, transparent); /* @alternate */ background-image:linear-gradient(top, #dcc961, #dcc961 50%, transparent 50%, transparent); } /*--- GMAIL EXAMPLE-SPECIFIC CODE --*/ .kd-list table.gmail tr .icons { display:block; width:60px; padding-left:12px; overflow:hidden; white-space:nowrap; line-height:35px; font-size:13px; color:#333; } .kd-list table.gmail tr .icons input[type=checkbox] { vertical-align:middle; } .kd-list table.gmail tr .icons .kd-star { vertical-align:middle; margin-left:-2px; } .kd-list table.gmail tr .icons .kd-important { display: inline-block; height: 21px; width: 21px; vertical-align:middle; margin-left:-6px; background: url('../images/icons/important-unread.png') center center no-repeat; } .kd-list table.gmail tr .from { left:72px; width:176px; } .kd-list table.gmail tr .from a { width:160px; padding-left:16px; } .kd-list table.gmail tr.highlighted .from .new { color:#222; font-weight:bold; } .kd-list table.gmail tr .message { left:248px; right:88px; } .kd-list table.gmail tr .message a { padding-left:16px; color:#999; } .kd-list table.gmail tr .message .subject { color:#333; } .kd-list table.gmail tr.highlighted .message .subject { color:#222; font-weight:bold; } .kd-list table.gmail tr .message .snippet:before { content: " - "; } .kd-list table.gmail tr .date { right:0; width:88px; text-align:right; } .kd-list table.gmail tr .date a { width:60px; padding-right:12px; padding-left:16px; } .y-crush .kd-list table.gmail tr .icons { line-height:24px; } .mobile .kd-list table.gmail .two-line .icons { line-height:24px; } .mobile .kd-list table.gmail tr .message { left:16px; right:13px; top:22px; } .mobile .kd-list table.gmail tr .message a { padding-left:0; } /*--- DOCLIST EXAMPLE-SPECIFIC CODE --*/ .kd-list table.doclist tr .icons { display:block; width:45px; padding-left:12px; overflow:hidden; white-space:nowrap; line-height:35px; font-size:13px; color:#333; } .kd-list table.doclist tr .icons input[type=checkbox] { vertical-align:middle; } .kd-list table.doclist tr .icons .kd-star { vertical-align:middle; margin-left:-2px; } .kd-list table.doclist tr .title { left:57px; right:88px; font-weight:normal; } .kd-list table.doclist tr.highlighted .title { font-weight:bold; } .kd-list table.doclist tr .title a { padding-left:16px; } .kd-list table.doclist tr .date { right:0; width:88px; text-align:right; } .kd-list table.doclist tr .date a { width:60px; padding-right:12px; padding-left:16px; } .mobile .kd-list table.doclist tr .title { left:57px; right:7px; } /*------------------------------------------------------------------ Component: Footers ------------------------------------------------------------------*/ .pageFooter{ padding:11px 0px; border-top:1px solid #ebebeb; font-size:13px; } .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: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; }