google-nomulus/java/google/registry/ui/css/kd_components.css
shicong 6b9b60d38c Remove all CSS animations to reduce flakiness
-------------
Created by MOE: https://github.com/google/moe
MOE_MIGRATED_REVID=237045320
2019-03-08 18:25:36 -05:00

4404 lines
107 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/*------------------------------------------------------------------
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;
}