rycus86/demo-site

html, body {
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
    margin: 0;
    padding: 0;
}

body main section .mdl-grid .mdl-card {
    margin-left: auto;
    margin-right: auto;
}

header a.mdl-layout__tab:hover {
    color: #fff;
}

footer ul.mdl-mini-footer__link-list {
    line-height: 36px;
}

.mdl-card .mdl-card__title {
    background-color: #00bcd4 !important;
    color: #fff !important;
}

.mdl-card .mdl-card__media {
    background-color: #00bcd4 !important;
}

.mdl-card .mdl-card__actions {
    display: flex;
    box-sizing: border-box;
    align-items: center;
}

.mdl-card .mdl-card__actions.card-actions-dark {
    background-color: #00bcd4 !important;
    color: #fff !important;
}

.mdl-card .mdl-card__actions a {
    color: #fff !important;
    text-decoration: none;
}

.mdl-card .mdl-chip--contact .mdl-chip__contact {
    background-color: #00bcd4 !important;
}

.mdl-cell.empty-cell {
    margin-top: 0;
    margin-bottom: 0;
}

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
    margin: 16px 0;
}

.markdown h1 {
    font-size: 32px;
}
.markdown h2 {
    font-size: 28px;
}
.markdown h3 {
    font-size: 24px;
}
.markdown h4,
.markdown h5,
.markdown h6 {
    font-size: 20px;
}

.markdown code,
.markdown pre {
    background: #eee;
    overflow-x: auto;
    padding: 0.2em;
    border-radius: 5px;
    border: 1px #bbb solid;
}
.markdown pre code {
    padding: 0px;
    border: 0;
}

.markdown a.anchor {
    display: none;
}

.markdown a {
    text-decoration: none;
}

.markdown .table-wrapper {
    overflow: auto;
}

.markdown .table-wrapper table {
    width: 500px;
    border-collapse: collapse;
    margin: 4px;
}

.markdown .table-wrapper th, .markdown .table-wrapper td {
    border: 1px solid #ccc;
    padding: 4px;
}

.markdown .table-wrapper th, .markdown .table-wrapper tr:nth-child(2n) {
    background: #eee;
}

.mdl-list.condensed-list {
    padding: 0;
}

.mdl-list.condensed-list .mdl-list__item {
    height: auto;
    padding: 2px 16px;
}

#panel-specs .mdl-card__media {
    text-align: center;
    height: 350px;
}

#panel-specs .mdl-card__media img {
    max-width: 100%;
    max-height: 100%;
}

#panel-specs .mdl-card .markdown img[src^="/asset/"] {
    width: 100%;
    border-radius: 5px;
    border: 1px #bbb solid;
}

#specs .specs-fab-menu {
    display: none;
}

#specs.is-active .specs-fab-menu {
    display: block;
}

#panel-specs button#specs-menu {
    color: #424242;
    background-color: #ffeb3b;
}

#panel-specs .specs-fab-menu {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
}

#panel-specs .specs-menu-popup {
    position: relative;
    right: 35px;
    bottom: -15px;
}

#panel-specs .specs-menu-popup .popup-wrapper {
    overflow-y: scroll;
    height: 220px;
    padding: 0;
    margin: 0;
}

#panel-specs .specs-menu-popup thead {
    display: none;
}

#panel-specs .specs-menu-popup tr {
    background: none;
}

#panel-specs .specs-menu-popup td {
    border: 1px solid rgba(0,0,0,.12);
    transition-duration: .28s;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-property: background-color;
}

#panel-specs .specs-menu-popup td:hover {
    background-color: #eee;
}

#panel-specs .specs-menu-popup a {
    text-decoration: none;
    display: block;
}

#panel-github .markdown img[src$="png"] {
    max-width: 100%;
    max-height: 100%;
}

.card-fab-holder {
    position: relative;
    overflow: visible;
}

.card-fab-holder .mdl-button--mini-fab {
    position: absolute;
    overflow: visible;
    right: 10px;
    top: -20px;
}

div.sticky-progress {
    width: 100%;
    max-width: none;
    height: 2px;
    position: relative;
    z-index: 2;
    background-color: rgba(0, 150, 136, 0.3);
}

div.sticky-progress .bar {
    position: relative;
    height: 2px;
}

div.sticky-progress > .progressbar {
    background-color: rgb(255, 110, 64);
}

div.sticky-progress > .bufferbar {
    top: -2px;
}

div.sticky-progress > .auxbar {
    display: none;
}

section div div.loading-panel {
    text-align: center;
}

@media screen and (max-width: 620px) {
    #panel-specs .mdl-card__media {
        text-align: center;
        height: 200px;
    }

    footer.mdl-mini-footer .mdl-mini-footer__right-section ul.mdl-mini-footer__link-list {
        display: block;
    }
}