cityuni-webserver/base.css

/*
This file is (C) Captain ALM
Under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License
*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
main{
	padding-top: 70px;
	padding-left: 6px;
}
.no-dec{
    text-decoration: none;
}
.no-lst-style{
	list-style: none;
}
.centered{
    text-align: center;
}
.content, .content > *{
    word-break: break-word;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}
.content > p, .content > h1, .content > h2, .content > h3, .content > h4, .content > h5, .content > h6{
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.header{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    border-style: solid;
    border-width: 0 0 2px;
}
.home-button, .sort-button{
    display: inline-block;
    width: 84px;
    height: 66px;
    overflow: hidden;
    text-align: center;
}
.sort-button{
    cursor: pointer;
}
.home-button > div, .sort-button > div{
    display: inline;
    font-size: 48px;
    padding: 10px;
    vertical-align: middle;
}
.nav{
    width: 100%;
    height: 100%;
    overflow: hidden;
	max-height: 0;
}
.vnav{
    max-height: none;
    top: 0;
    position: relative;
    float: right;
    width: auto;
    overflow: hidden;
}
.so-pane{
    display: none;
    overflow: hidden;
    position: fixed;
    max-height: 0;
}
.so-pane > form > div{
    display: table-row;
    background-color: transparent;
    box-sizing: inherit;
    max-width: 100%;
    width: 100%;
}
.so-pane > form > div > div, .so-pane > form > div > span{
    background-color: transparent;
    box-sizing: inherit;
    padding: 2px;
    text-align: center;
    vertical-align: middle;
}
.so-pane > form > div > div{
    display: table-cell;
    max-width: 50%;
    width: 50%;
}
.so-pane > form > div > span{
    display: block;
    max-width: 100%;
    width: 100%;
}
.so-pane-full{
    display: table-caption !important;
    caption-side: bottom;
}
.so-pane > form > div > * > *{
    max-width: 100%;
    width: 100%;
    vertical-align: middle;
    font-size: 16px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.so-pane > form > div > div > *{
    text-align: left;
}
.so-pane > form > div > div > label{
    background-color: transparent;
    text-align: center;
}
.nav-menu, .sort-menu{
	display: none;
}
.menu a, .vmenu a{
    display: block;
    padding: 24px 16px;
}
.vmenu li{
    float: left;
}
.vmenu a:hover{
    background-color: transparent;
}
.hmb{
    cursor: pointer;
    float: right;
	background-color: transparent;
    padding: 32px 20px;
}
.hmb-line{
    display: block;
    height: 2px;
    position: relative;
    width: 24px;
}
.hmb-line::before, .hmb-line::after{
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .1s ease-out;
    width: 100%;
}
.hmb-line::before{
    top: 5px;
}
.hmb-line::after{
    top: -5px;
}
.nav-menu:checked ~ #nav, .nav-open{
    max-height: 100%;
}
.nav-menu:checked ~ .hmb .hmb-line, .nav-open-hmb .hmb-line{
    background: transparent;
}
.nav-menu:checked ~ .hmb .hmb-line::before, .nav-open-hmb .hmb-line::before{
    transform: rotate(-45deg);
    top:0;
}
.nav-menu:checked ~ .hmb .hmb-line::after, .nav-open-hmb .hmb-line::after{
    transform: rotate(45deg);
    top:0;
}
.sort-menu:checked ~ .so-pane, .so-pane-open{
    display: block;
    z-index: 101;
    box-sizing: content-box;
    position: fixed;
    text-align: center;
    top: 70px;
    left: 20px;
    max-height: 100%;
    width: 230px;
    height: auto;
    -webkit-border-bottom-left-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-bottomleft: 8px;
    -moz-border-radius-bottomright: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 4px;
    border-style: solid;
    border-width: 0 2px 2px;
    overflow: hidden;
}
.sort-menu:checked ~ .so-pane > form, .so-pane-open > form{
    display: table;
    box-sizing: inherit;
}
.main-box > div, footer{
    max-width: 100%;
    margin: 3px 0;
    padding: 2px;
    box-sizing: content-box;
}
.item-table{
    display: table;
    box-sizing: content-box;
    background-color: transparent;
    -webkit-border-radius: 32px;
    -moz-border-radius: 32px;
    border-radius: 32px;
    border-width: 1px;
    border-style: solid;
}
.flex-col{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-content: center;
    align-content: center;
    max-width: 100%;
    width: 100%;
    overflow: hidden;
}
.item-table > div{
    display: table-row;
    box-sizing: inherit;
    max-width: 100%;
    width: 100%;
}
.flex-row, .item-table > div{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    max-width: 100%;
    width: 100%;
    overflow: hidden;
}
.item-table > div > div > div{
    padding: 2px;
}
.item-table-caption, .so-pane-caption{
    display: table-caption !important;
    caption-side: bottom;
}
.item-table-full, .item-table-360, .item-table-caption, .so-pane-caption{
    background-color: transparent;
    box-sizing: inherit;
}
.item-table-full{
    display: table-cell;
    vertical-align: top;
    width: 100%;
}
.item-table-360{
    display: table-cell;
    vertical-align: middle;
    max-width: 360px;
    width: 360px;
    overflow: hidden;
    text-align: center;
}
.image-box > a{
    border-style: solid;
    border-width: 1px;
	margin: 2px;
}
@media (min-width: 600px){
    .main-box > div{
        padding: 12px;
    }
    footer{
        padding: 4px;
    }
    .item-table > div{
        -ms-flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .item-table-full{
        max-width: -webkit-calc(100% - 361px);
        max-width: -moz-calc(100% - 361px);
        max-width: calc(100% - 361px);
        width: -webkit-calc(100% - 361px);
        width: -moz-calc(100% - 361px);
        width: calc(100% - 361px);
    }
	.image-box > a{
        border-width: 4px;
	    margin: 10px;
    }
}
@media (min-width: 680px){
    .nav{
        max-height: none;
        top: 0;
        position: relative;
        float: right;
        width: auto;
    }
    .menu li{
        float: left;
    }
    .menu a:hover{
        background-color: transparent;
    }
    .hmb{
        display: none;
    }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .item-table-full, .item-table-360 {
        display: block !important;
    }
    .item-table-caption{
        display: block !important;
    }
}