krateng/maloja

/**
    COMMON STYLES FOR MALOJA, ALBULA AND POSSIBLY OTHERS
**/

@import url("/grisonsfont.css");

:root {
    --base-color: #232327;
    --base-color-dark: #090909;
    --base-color-light: #343437;
    --base-color-accent: #26262A;
    --base-color-accent-dark: #1d1d21;
    --base-color-accent-light: #404044;

    --text-color: beige;
    --text-color-selected: fadeout(var(--text-color),40%);
    --text-color-secondary: #bbb;
    --text-color-tertiary: grey;
    --text-color-focus: yellow;

    --ctrl-element-color-bg: rgba(0,255,255,0.1);
    --ctrl-element-color-main: rgba(103,85,0,0.7);
    --ctrl-element-color-focus: gold;

    --button-color-bg: var(--text-color);
    --button-color-bg-focus: var(--text-color-focus);
    --button-color-fg: var(--base-color);
    --button-color-fg-focus: var(--base-color);
}




body {
    --current-bg-color: var(--base-color); /* drag this information through inheritances */
    background-color: var(--current-bg-color);
    color: var(--text-color);
    font-family:"Ubuntu";
}

/* TOP INFO TABLE */

table.top_info td.image div {
    margin-right:20px;
    margin-bottom:20px;
    background-size:cover;
    background-position:top center;
    height:174px;
    width:174px
}

table.top_info td.text {
    vertical-align: top;
}

table.top_info td.text h1 {
    display:inline;
    padding-right:5px;
}


table.top_info td.text table.image_row td {
    height:50px;
    width:50px;
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
    opacity:0.5;
    filter: grayscale(80%);
}
table.top_info td.text table.image_row td:hover {
    opacity:1;
    filter: grayscale(0%);
}


span.spacer {
    width: 9px;
    display: inline-block;
}



/** SCROLLBAR **/

::-webkit-scrollbar {
  width: 8px;
  cursor: pointer;
}
::-webkit-scrollbar-track {
  background: grey;
  background-color: var(--ctrl-element-color-bg);
}
::-webkit-scrollbar-thumb {
background-color: var(--ctrl-element-color-main);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ctrl-element-color-focus);
}




[onclick]:hover, a:hover {
    cursor: pointer;
}


/** HOVERABLE LOAD/PROGRESS BAR **/


div.grisons_bar {
    background-color: var(--ctrl-element-color-bg);
}
div.grisons_bar>div {
    height:100%;
    background-color: var(--ctrl-element-color-main);
}
div.grisons_bar:hover>div {
    background-color: var(--ctrl-element-color-focus);
}





/** LINKS **/


a {
    color:inherit;
    text-decoration:none;
}
a:hover {
 text-decoration:underline;
}

/* for links in running text */
a.textlink {
    color: var(--text-color-focus);
}
a.hidelink:hover {
    text-decoration:none;
}



/** INPUTS **/

input[type="text"], input[type="number"] {
    background-color: transparent;
    border: 0px;
    border-bottom: 1px solid var(--text-color);
    color: white;
}

input:focus {
    outline: 0;
    background-color: var(--base-color-accent-light);
}




.hide {
    display:none !important;
}