/*::-webkit-scrollbar {
    width: 16px;
}*/


BODY {
    user-select : none;
    height: 100vh;
    width: 100%;    
    margin: 0px;
    display : flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: center;   
    font-family : sans-serif;
    overflow-y : hidden;
}

DIV#header {
   width: 100%;
   display: block;
   margin: 0px;
   padding: 0px;
   height: auto;
   background: var(--uos-red);    
   border-bottom :0px;
   margin-bottom: 0px;
}

DIV#header_menu {
   background: var(--uos-red);
   height: 30px;
   color: white;
   width: 100%;
   display : flex;
   flex-direction : row;
   align-items: stretch;
}

DIV#header_menu DIV.item {
    font-size: 120%;
    font-family : UbuntuBold;
    color: white;
    background : var(--uos-red);
    border-right: 2px solid white;
    padding: 0px 10px 0px 10px; 
    vertical-align: middle;
    display: flex;
    flex-direction: row;
    justify-items: center;
}

DIV#header_menu DIV.item:hover {
    background : var(--uos-red-light);       
}

DIV#header_menu DIV.item A {
    text-decoration : none;
    color: white;
}


DIV#header_menu DIV.item.selected {    
    color: var(--uos-red);
    background : var(--uos-yellow);
}

DIV#header_menu DIV.item.selected A {
    text-decoration : none;
    color: var(--uos-red);    
}


DIV#main-scroller {
    flex-grow : 1;
    display : flex;
    flex-direction: column;
    align-content: stretch;
    overflow-y: scroll;
}

DIV#title {
    font-family : UbuntuBold;
    font-size : 60px;
    color: var(--abbozza-blue);
    padding : 10px;
    margin-top: 1em;
    margin-bottom : 0.5em;
    text-align: center;
}


DIV#main {
    margin: 0px;
    padding: 0px;
    flex : 1;
    display : flex;    
    flex-direction : row;
    flew-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}



DIV#footer {
   display: block;
   padding: 10px;
   min-height: 100px;
   max-height: 100px;
   height: 100px;
   background: var(--abbozza-blue-light);
   display : flex;
   justify-content : flex-end;
   align-items: flex-start;
}


DIV#left-sidebar {
    background: white;
    flex : 1 1 20%;
    order: 1;
}

DIV#right-sidebar {
    background: white;
    flex: 1 1 20%;
    order : 3;
    display : flex;
    flex-direction: column;
    justify-content : flex-start;
    align-items : stretch;    
    padding: 10px;
    flex-grow : 0;
    width: 400px;
}

DIV#center {
    background: white;
    flex: 3 1 60%;
    order : 2;
    display : flex;
    flex-direction: column;
    justify-content : flex-start;
    align-content : space-around;
    align-items : center;    
    margin-right: 30px;
    margin-left: 30px;
    flex-grow : 1;
}




DIV#systems {
    display: flex;
    flex-direction: row;
    justify-content : center;
    align-content : center;
    align-items : flex-start;
    flex-wrap : wrap;
    min-height: 30px;
    width: 100%;
    margin-bottom: 30px;
}


DIV.system {
    flex-grow : 1;
    display: flex;
}

DIV.system:hover {
    transform : scale(1);
}


DIV#description {
     position: absolute;
     right: 5vw;
     width: 45vw;
     top: 100px;
     bottom: 100px;
     display: flex;
     justify-content: flex-start;
     align-content : flex-start;
     align-items : center;
     flex-wrap : wrap;
     background-color: var(--abbozza-blue-light);
}


DIV.infobox {
    background-color: var(--abbozza-blue-light);
    border-left: solid 5px var(--abbozza-blue);
    padding: 10px;
    margin-bottom: 20px;
    font-size : 90%;
}

DIV.filler {
    flex-grow: 1;
}

DIV#abz-version {
    margin-top: 80px;
    text-align: left;
    font-size:75%;
}

DIV#ddi-contact {
    font-size: 90%;
    text-align: right;
    margin-right: 10px;
}

DIV#ddi-logo {
    margin-right: 10px;
}


DIV#ddi-contact A {
    text-decoration: none;
    color : black;
}

h1 { 
    font-family : Ubuntu; 
    color : var(--abbozza-blue);
}

h2 { 
    font-family : Ubuntu; 
    color : var(--abbozza-blue);
}

h3 { 
    font-family : Ubuntu; 
    color : var(--abbozza-blue);
}


@media all and (max-width: 640px) {
    DIV#main {
        flex-direction : column;
    }
    
    #center, #left-sidebar,#right-sidebar {
        order: 0;
    }
    
    #header, #footer {
        min-height: 50px;
        max-height: 50px;
    }
}


DIV.tabcontainer {
    width: 100%;
    overflow: auto;
}

DIV.tablist {
    width: 100%;
    display : flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    align-content: center;
}

DIV.tabitem {
    flex-grow : 1;
    background-color : var(--abbozza-blue);
    color : white;
    text-align: center;
    padding: 10px;
    font-weight: bold;
    font-family : UbuntuBold;
    border: 2px solid var(--abbozza-blue);
    font-size: 120%;
}


DIV.tab {
    width: 100%;
    display : none;
    overflow : auto;
}


DIV.selected {
    background-color : white;
    color: var(--abbozza-blue);
}


DIV.infobox H1 {
    font-family : UbuntuBold;
    font-size : 150%;    
}

SPAN.abz-font {
    font-family : UbuntuBold;
    color : var(--abbozza-blue);
}

SPAN.abz-font-white {
    font-family : UbuntuBold;
    color : white;
}

IFRAME {
    width: 100%;
    border: none;
}

DIV.abz-tab {
    padding: 10px;
}


DIV.abz-collection {
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    width: 100%;
    justify-content : center;
}


DIV.abz-collection DIV.abz-collection-entry {
    background-color : white;
    color : var(--abbozza-blue);
    font-family : UbuntuBold;
    font-size: 200%;
    width: calc( 50% - 4em - 40px );
    border: 10px solid var(--abbozza-blue);
    border-radius : 10px;
    text-align: center;
    margin: 0.5em;
    padding: 0.5em;
}


DIV.column {
    display : flex;
    flex-direction : column;
    justify-content: stretch;
    flex-grow: 1;
}

DIV.abz-col {
    flex-grow : 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items : center;
    align-content: center;
}


DIV.abz-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: stretch;
}

DIV.abz-row-centered {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items : stretch;
}


#scroll-hint {
    position: fixed;
    right: 10px;
    bottom: 10px;   
    color : var(--abbozza-blue-light);
}

TABLE.peer-download {
    border-collapse: collapse;    
}

TABLE.peer-download TR TD {
    padding: 5px 20px 5px 20px;
    border-right: 2px solid var(--abbozza-blue);
}

TABLE.peer-download TR TD.first {
    border-top: 2px solid var(--abbozza-blue);
}

TABLE.peer-download TR TD.last {
    border-bottom: 2px solid var(--abbozza-blue);
}

TABLE.peer-download TR TD.os {
    font-size : 120%;
    font-family : Ubuntu;
    font-weight : bold;
    background-color : var(--abbozza-blue);
    color : white; 
    padding: 10px 15px 10px 15px;
    border: 2px solid var(--abbozza-blue);
}

TABLE.peer-download TR TD.top {
    border-bottom: 2px solid white;
}

TABLE.peer-download TR TD.middle {
    border-bottom: 2px solid white;
    border-top: 2px solid white;
}

DIV.button {
    border: 1px solid var(--abbozza-blue);
    background-color: var(--abbozza-blue);
    color : white;
    border-radius : 5px;
    padding: 5px;
    text-align: center;
    font-family : Ubuntu;
    font-weight: bold;
    cursor : pointer;
}

DIV.button:hover {
    color: var(--abbozza-blue);
    background-color : white;
}


DIV.sketch-list {
    display : flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items : center;
    flex-wrap : wrap;
}

DIV.sketch-list DIV.category {
    flex-direction: column;
    justify-content: space-evenly;
    width: 500px;
    margin: 10px;
    margin-bottom: 20px;
    
}

DIV.sketch-list DIV.category DIV.categoryInner {
    flex-direction: column;
    justify-content: space-evenly;
    width: 500px;
    display : none;
}


DIV.sketch-list DIV.category H1 {
    font-family : Ubuntu;
    font-size : 150%;
    padding : 5px;
    color : var(--abbozza-blue);
    border-bottom: 2px solid;
    position : relative;
}

DIV.sketch-list DIV.category H1:hover {
    background-color : var(--abbozza-blue);
    color : white;
    transform : scale(1.1);
}

DIV.sketch-list DIV.category H1.closed:after {
    content : "⊕";
    position: absolute;
    right: 5px;
    top: 0px;
}

DIV.sketch-list DIV.category H1.open:after {
    content : "⊖";
    position: absolute;
    right: 5px;
    top: 0px;
}


DIV.sketch {
    position : relative;
    border : 2px solid var(--abbozza-blue);
    border-radius: 5px;
    padding: 0px;    
    flex-grow : 1;
    margin: 5px;
}

DIV.sketch:hover {
    transform : scale(1.1);
}

DIV.sketch DIV.icon {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 32px;
    height: 32px;
    font-size: 200%;
}

DIV.sketch DIV.name {
    font-family : Ubuntu;
    font-weight: bold;
    font-size: 110%;
    padding : 5px;
    margin: 0px;
    background-color : var(--abbozza-blue);
    color : white;
}

DIV.sketch DIV.desc {
    padding: 5px;
    padding-top: 10px;
}

DIV.sketch DIV.links {
    padding : 5px;
}

DIV.sketch DIV.links A.link {
}

DIV.sketch DIV.links A.download {
    margin-left : 10px;
}


DIV.tabs {
    border : 1px solid var(--abbozza-blue);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

DIV.tabs-buttons {
    width: 100%;
    color : white;
    font-family : Ubuntu;
    font-size: 110%;
    font-weight : bold;
    background-color: var(--abbozza-blue);
    display : flex;
    flex-direction : row;
    justify-content : flex-start;
    align-items: stretch;    
}

DIV.tabs-button-selected {
    background-color: white;
    color: var(--abbozza-blue);
}

DIV.tabs-button:hover {
    background-color: var(--abbozza-blue-light);    
    color : var(--abbozza-blue);
}

DIV.tabs-button {
    padding: 5px 10px 5px 10px;
}

DIV.tabs-wrapper {
    width: 100%;
    padding: 0px;
}

DIV.tabs-tab {
    padding: 10px;
    margin: 0px;
    display : none;
}


DIV.framed-button {
    font-size: 150%;
    border: 15px var(--abbozza-blue) solid;
    border-radius: 20px;
    padding: 1em;
    font-family: UbuntuBold;
    color : var(--abbozza-blue);
}

DIV.framed-button:hover {
    border: 15px var(--abbozza-blue) solid;
    background-color: var(--abbozza-blue-light);
    cursor : pointer;
}

DIV#download-tabs {
    width: 100%;
}

DIV#version {
    display : none;
}

DIV.code {
    cursor: copy;
    overflow-x: auto;
    font-family: 'Courier New', Courier, monospace;
    width: calc( 100% - 10px );
    white-space:nowrap;
    background-color: rgb(220,220,220);
    padding: 5px;
    margin-right: 15px;
}