/* Wiking CMS style customizations for OUI Technology Ltd. website.
 * Copyright (c) 2017, 2018 OUI Technology Ltd.
 *
 * Base colors (logo):
 * O:    (255, 235, 0) = #ffeb00
 * U:    (250, 200, 0) = #fac800
 * I:    (245, 165, 0) = #f5a500
 * text: (80, 67, 40)  = #504328
 */

body {
    font-size: 18px;
}
body.non-maximized #root-wrap {
    max-width: 900px;
}
#top, #main, #bottom {
    padding-left: 50px;
    padding-right: 50px;
}

#site-title a {
    display: inline-block;
    background: url(oui-logo.svg) left top no-repeat;
    background-size: contain;
    height: 50px;
    padding-left: 68px;
    padding-top: 11px;
    font-size: 26px;
    box-sizing: border-box;
}
@media only screen and (max-width: 600px) {
    #site-title a {
        position: relative;
        height: 28px;
        padding-left: 38px;
        padding-top: 2px;
        font-size: 20px;
        left: -10px;
    }
    #menu-button {
        left: -10px;
    }
    #menu-button a {
        padding: 9px 10px;
    }
    .menu-icon {
        background: url(menu.svg) left top no-repeat;
        width: 18px;
        height: 21px;
    }
    #menu ul.level-1 > li > a .label {
        background-color: transparent;
        margin-left: 4px;
        font-weight: bold;
    }
    #menu ul.level-1 > li > a .icon {
        display: none;
    }
    #menu ul.level-1 > li > a {
        margin-left: 7px;
        padding-left: 0;
        border-left: solid #fff 5px;;
    }
    #menu ul.level-1 > li > a:hover {
        border-left-color: #ffeb00;
    }
    #menu ul.level-1 > li > a.current {
        border-left-color: #f5a500;
    }
}

#menu ul.level-1 > li > a,
#site-title a,
body .notebook-widget li.notebook-tab > a {
    color: #504328;
}

#menu ul.level-1 > li > a:hover {
    border-bottom-color: #ffeb00;
}
#menu ul.level-1 > li.in-path > a {
    border-bottom-color: #f5a500;
}
#submenu a.current .label {
    background-color: #fef7be;
}
h1, h2, h3, h4, h5, h6 {
    background: none;
    border: none;
}
h1 { font-size: 2.4em; padding: 4px 0; text-align: center; }
h2 { font-size: 2.0em; margin: 1.3em 0 .6em 0; }

#top-controls > .maximized-mode-control {
    display: none;
}

#footer {
    padding-top: 10px;
}
body .pytis-form.browse-form table.data-table tr.data-row td,
body .pytis-form.browse-form table.data-table tr.row-expansion td,
body .pytis-form.browse-form table.data-table tr.column-headings th,
body .pytis-form.browse-form table.data-table tr.group-heading th {
    border-color: #fac80080;
}

/* Specific styles for specific pieces of OUI website content */

.page-id-about #content > p:first-child,
.page-id-technologies .section-level-2 > .section-content-wrapper > p:first-child {
    font-style: italic;
    max-width: 26em;
    margin: 1.4em auto;
    text-align: center;
}
.boxed {
    vertical-align: top;
    margin: 0 -20px;
}
.boxed > section {
    display: inline-block;
    width: 33.3%;
    padding: 0 20px 20px 20px;
    vertical-align: top;
    box-sizing: border-box;
}
.boxed.four-columns > section {
    width: 25%;
}
@media only screen and (max-width: 770px) {
    .boxed.four-columns > section { width: 33.3%; }
}
@media only screen and (max-width: 660px) {
    .boxed > section { width: 50%; }
    .boxed.four-columns > section { width: 50%; }
}
@media only screen and (max-width: 440px) {
    .boxed > section { width: 100%; }
    .boxed.four-columns > section { width: 100%; }
}
.boxed img {
    max-width: 100%;
    margin: 0;
}
.boxed h3 {
    margin: .4em 0 .5em 0;
    font-size: 1.3em;
}

#example {
    max-width: 704px;
    margin: 30px auto;
    border: dotted #aaa 1px;
    padding: 0 34px 6px 34px;
}
#example h2 {
    margin: .5em 0;
}
#example .section-heading.section-level-3 {
    display: none;
}
#team {
    text-align: center;
}
#team .boxed {
    max-width: 680px;
    margin: 0 auto;
}
#team h3 {
    text-align: center;
    font-size: 1.6em;
}
#team .boxed > section {
    width: 300px;
}
#team .boxed img.lcg-image {
    border-radius: 130px;
}

@media only screen and (max-width: 640px) {
    #top, #main, #bottom {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media only screen and (max-width: 400px) {
    #team .section.section-level-3 {
        width: 100%;
    }
    #top, #main, #bottom {
        padding-left: 20px;
        padding-right: 20px;
    }
}