@font-face {
  font-family: 'KendoMobileDemos';
  src: url('demos.eot');
  src: url('demos.eot') format('embedded-opentype'), url('demos.woff') format('woff'), url('demos.ttf') format('truetype'), url('demos.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

#search-tooltip {
    margin: 7em 2em;
    color: #2d3e50;
    font-size: 1.3em;
    line-height: 1.5em;
    text-align: center;
}

#examples .km-content {
    color: #2d3e50;
}

#examples .km-loader:before {
    background: #2a2d33;
}

#examples .km-touch-scrollbar {
    background: rgba(37, 39, 44, 0.3);
}

#examples .km-navbar,
#examples .k-toolbar
{
    background: #2a2d33;
    color: #fff;
}
#examples .km-navbar .km-view-title,
#examples .km-navbar .km-button {
    color: #fff;
}

#examples .km-navbar .km-button.km-state-active,
#examples .k-toolbar .km-button.km-state-active
{
    color: #5ce600;
}

#examples .km-listgroup .km-group-title {
    background-color: #f8f9fa;
    line-height: 3em;
}

#examples .km-list > li {
    border-image: none;
}

#demos-search {
    visibility: visible;
    width: 14em;
    height: 1.8em;
    background: #6a6c71;
    border: 1px solid #74767a;
    color: white;
    padding-left: 1.7em;
    font-size: 1.1em;
    line-height: 1.2em;
}

#demos-search-container:before {
    font: 1em/.9em "Kendo UI" normal;
    content: "\e21e";
    position: absolute;
    margin-top: .6em;
    margin-left: .6em;
}

#examples .km-drawer-icon:before,
#examples .km-drawer-icon:after {
    font: 1em/1em "KendoMobileDemos" normal;
    content: "\e602";
}

#examples .km-themechooser:before,
#examples .km-themechooser:after {
    font: 1em/1em "KendoMobileDemos" normal;
    content: "\e601";
}

#examples .km-arrow-w:after,
#examples .km-arrow-w:before
{
    content: "\e013";
    font-size: 2em;
    margin-left: -.5em;
    margin-top: -.3em;
}

#examples .km-search:after,
#examples .km-search:before
{
    content: "\e21e";
    font-size: 1.4em;
}

#examples .km-header .km-state-active,
#examples .km-state-active .km-listview-link {
    background: #dfe3e6;
    color: black;
}

#examples .km-header .km-button,
#examples .km-header .km-button.k-state-active {
    background: none;
    border: none;
}

#search-results .section {
    display: block;
    font-size: .8em;
    font-weight: normal;
}

#search-results .km-listview-link:after,
#about .km-listview-link:after {
    content: '';
    box-shadow: none;
}

#about .km-listview-link:after {
    border: 0;
}

#about {
    background: transparent url("backgrounds/kendo.jpg") left -500px no-repeat;
}

#about .km-navbar {
    background: rgba(28, 31, 35, 0.4);
}

#about .km-content,
#about .km-listview li,
#about .km-listview .km-state-active a {
    background: none;
    border: none;
    box-shadow: none;
}

#about .km-listview {
    margin-left: 23px;
}

#about .km-listview a,
#about .km-listview .km-state-active a {
    color: white;
}

#about #external-resources {
    margin-top: 2em;
}

#about #external-resources a {
    display: inline-block;
}
#about #external-resources a:after {
    font: .5em/.5em "KendoMobileDemos" normal;
    content: "\e605";
    color: rgba(255, 255, 255, 0.5);
    display: inline;
    position: absolute;
    right: auto;
    top: auto;
    margin: 1.3em 0.8em;
    -webkit-transform: none;
}

#about .km-footer .km-listview {
    margin-bottom: 23px;
}

#about .km-footer {
    font-size: .8em;
    background: transparent;
}

#about .km-leftitem {
    left: 0;
}

#logo {
    margin-left: 33px;
}

#themechooser li {
    padding: 0;
    box-shadow: none;
    border: none;
    background: transparent;
}

#themechooser .km-content,
#themechooser .km-listview-wrapper {
    background: #2a2d33;
}

#themechooser a {
    margin: 0;
    padding:.8em 2em;
    border-left-width: 9px;
    border-left-style: solid;
    color: white;
}

#themechooser .current a {
    border-left-width: 20px;
    background: #0f1011;
}

#themechooser a:after {
    display: none;
}

#desktop-footer {
    background-color: #2a2d33;
    padding: 1.3em;
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
  #desktop-footer {
      display: none;
  }
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) {
  #desktop-footer {
      display: none;
  }
}



@media only screen
and (min-width: 360px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 3.0) {
  #desktop-footer {
      display: none;
  }
}

#desktop-link {
    display: block;
    text-align: center;
    color: #38c0ff;
    text-decoration: none;
}

/* BOX */

.box {
    margin: 1em 7.5em;
    padding: 1em;
    background-color: rgba(20,53,80,0.038);
    border: 1px solid rgba(20,53,80,0.05);
}

.demo-section {
    margin: 1em auto;
    padding: 1em;
    border: 1px solid rgba(20,53,80,0.05);
}

#example * {
    -webkit-box-sizing: initial;
    box-sizing: initial;
}

.box:after,
.demo-section:after {
    content: "";
    display: block;
    clear: both;
    height: 0;
}

#example .box {
    margin: 1em auto;
}

.box.k-header,
.demo-section.k-header {
    background-position: 50% 70%;
}

#example .box h4,
#example .demo-section h4 {
    margin: 0 0 1em;
    font-size: 12px;
    line-height: 1em;
    font-weight: bold;
    text-transform: uppercase;
}

.box-col {
    display: block;
    float: left;
    padding: 0 3em 1em 0;
}

.box ul,
.demo-section .box-col ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.box li,
.demo-section .box-col li {
    margin-bottom: .6em;
}

.box li:last-child {
    margin-bottom: 0;
}

.box li a {
    font-size: 13px;
}

.box .k-widget {
    background-color: #ebeef0;
    border-color: #ccc;
    color: #7c7c7c;
}

.box .k-button {
    cursor: pointer;
    border-radius: 2px;
    padding: 2px 6px;
    font-size: inherit;
    color: #333;
    background: #e1e5ea;
    border-color: #c2ccd4;
}

.box .k-button:hover {
    background: #c2ccd4;
    color: #000;
}

.box .k-primary {
    color: #fff;
    background: #015991;
    border-color: #015991;
}

.box .k-primary:hover {
    background: #013A5E;
    color: #fff;
}

.box .k-textbox,
.box textarea {
    background: #fff;
    border-color: #ccc;
    color: #555;
    border-radius: 0;
}

.box .k-textbox:hover,
.box .k-textbox:active,
.box textarea:hover,
.box textarea:active {
    border-color: #999;
    background: #fff;
    color: #333;
}

.demo-hint {
    line-height: 22px;
    color: #aaa;
    font-style: italic;
    font-size: .9em;
}