html, body {
    width: 100%;
}

body {
}

#layout {
    width: 100%;
    text-align: center;
}

html.no-touch a:hover {
    color: #4CAF50;
}

.page-header {
    padding: 5rem 0 10rem;
}

.page-title {
}

.page-menu {
    position: relative;
    z-index: 101;
    padding-bottom: 2rem;
}

.pui-menu {
    margin-left: auto;
    margin-right: auto;
}

.pui-menu > li > a {
    vertical-align: middle;
    color: #fff;
}

html.no-touch .pui-menu > li > a:hover, 
.pui-menu > li > a.hover {
    background: red;
    color: #fff;
    background: #3B983B;
}

.pui-menu > li > a > .fa {
    margin-top: -3px;
}

.pui-menu > li > ul a.hover,
html.no-touch .pui-menu > li > ul a:hover {
    color: #555;
}

code {
    color: #999;
    background: #eee;
}

pre.prettyprint { 
    padding: 10px; 
    border: 1px solid #ddd; 
}

ol.linenums { 
    color: #999; 
    padding-left: 2.5em; 
}

ol.linenums code {
    font-size: 13px;
    border: none;
    background:none;  
    padding: 0;
    word-spacing: 1px; 
    letter-spacing: 1px;
    font-family: Consolas, 'Monaco', courier, monospace !important;
}

li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 { 
    list-style-type: decimal;
}

#code-box {
    margin: 0 auto;
}

#code-box pre {
    width: 49%;
    min-height: 290px;
    display: inline-block;
    border: none;
}

#code-box pre:last-child, .code2 {
    float: right;
}

.pui-menu-dropdown {
    width: 200px;
} 

.pui-menu-dropdown > li > a {
    color: #666;
}

.pui-menu-dropdown > li > a.hover,
html.no-touch .pui-menu-dropdown > li > a:hover {
    background: #f6f6f6;
}

.page-content {
    padding: 4rem 0;
}

.pui-card-simple .pui-card-box {
    padding-top: 1.6rem;
}

.github-buttons {
    padding-top: 2rem;
}

.github-buttons p {
    margin-bottom: 0;
}

.github-buttons p:first-child {
    margin-bottom: 1rem;
}

.page-footer {
    padding: 3rem 0;
}

.page-footer a + a {
    margin-left: 8px;
}

.pui-card-title > h1 {
    font-size: 1.8rem;
}

#go-to-top {
    position: fixed;
    bottom: 10%;
    right: 10%;
    display: none;
    -webkit-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}

#go-to-top:hover {
    color: #3B983B !important;
}

.page-header-container {
    width: 100%;
    margin: 0 auto;
}

@media only screen and (min-width: 400px) {
}

@media only screen and (max-width: 1024px) {
    .page-footer {
        padding: 3rem 2rem;
    }
    
    #code-box {
        width: 92%;
    }
    
    #go-to-top {
        right: 3%;
    }
}

@media only screen and (min-width: 1025px) {
}