html {
}

a, a:visited {
    color: #1756a9;
}

/*** Card ***/

#card {
}

#card a {
    padding-right: 0.3em;
}

#card .name {
    font-size: 300%;
}

#card .description {
    margin-bottom: 0.4em;
}

#card .home-url {
    display: none;
}

/*** Below Card ***/

#below-card {
    margin: 2em 0;
    position: relative;
}

/*** Work History ***/

#history-blocks {
}

#work-history {
    margin-right: 18em;
}

#other-history {
    margin-right: 18em;
}

.history .place {
    margin: 0 0 3em 0;
    position: relative;
    text-align: left;
}

.history .role::after {
    content: ", "
}

.history .title {
    font-size: 200%;
    font-weight: 200;
}

.history .title-line {
    margin-bottom: 0.1em;
    position: relative;
}

.history .subtitle {
    display: block;
    padding-bottom: 0.4em;
}

.history .dates {
}

.history .now {
    color: green;
}

/*** Tags ***/

.tags {
    display: inline-block;
    font-size: 80%;
    position: relative;
    top: -0.12em;
    text-transform: lowercase;
}

.tags::before   {
    content: "[";
    color: red;
    margin-right: 0.1em;
}
.tags::after    {
    content: "]";
    color: red;
    margin-left: 0.1em;
}

.tag {
/*    color: #989985;*/
    /*    border-radius: 1em;*/
    /*    font-style: italic;*/
}

/*** Tag List ***/

#lists {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    margin: 0;
    width: 12em;
}

#lists ul {
    padding: 0;
    list-style: none;
}

#lists li {
    margin: 0;
    padding: 0;
}

ul.taglist {
    margin: 0 0 1em 0;
}

.taglist li {
    position: relative;
}

.taglist svg {
    position: absolute;
    right: 0;
    width: 4em;
    top: 0.3em;
}

.taglist svg rect {
    fill: #ddd;
    width: 111.2px;
    height: 111.2px;
}
.taglist svg rect.on {
    fill: #1756a9;
}

.taglist .level {
    color: lightgrey;
    font-size: 120%;
    text-align: right;
    position: absolute;
    display: block;
    top: -0.21em;
    right: 0;
    width: 3em;
}

.taglist span {
    cursor: default;
}

.taglist .on {
    color: green;
}

.taglist .subtag {
    margin-left: 0.5em;
}

.taglist .subtag::before {
    content: "\21b3";
}

.taglist .change {
    color: #0a0;
}

.taglist .selected .name, .tags .selected {
    animation: pulse 2s infinite;
}

.taglist-tech, .taglist-targets {
}

.taglist-systems, .taglist-hobbies {
    font-style: italic;
}

@keyframes pulse {
    0% {
        background-color: #fcc;
    }
    80% {
        background-color: #fcc;
    }
    90% {
        background-color: #fee;
    }
    100% {
        background-color: #fcc;
    }
}

#linklist {
    margin-top: 2em;
    margin-left: 0;
}

#linklist li {
    line-height: 150%;
}

span.tag {
    cursor: default;
}

.gauge {
    text-align: left;
    position: absolute;
    text-align: right;
    display: block;
    top: -0.1em;
    right: 0;
    width: 4.5em;
    height: 0.8em;
}

.gauge span {
    height: 0.45em;
    width: 0.45em;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.1em;
}

.gauge .g-on {
    border: 1px solid green;
    background-color: green;
    -webkit-print-color-adjust: exact;
}

.gauge .g-off {
    border: 1px solid #ddd;
    background-color: #ddd;
    -webkit-print-color-adjust: exact;
}

.gauge-1 .gauge-fill { width: 0.8em }
.gauge-2 .gauge-fill { width: 1.6em }
.gauge-3 .gauge-fill { width: 2.4em }
.gauge-4 .gauge-fill { width: 3.2em }
.gauge-5 .gauge-fill { width: 4em }

/*** printing ***/

@media print {
    @page {
        size: auto;
        margin: 5em 0 0 0;
    }

    body {
        font-family: Georgia, serif;
        font-size: 9pt;
    }
    a, a:visited {
        color: black;
    }

    .site-header {
        border: none;
    }

    .site-nav {
        display: none;
    }

    .history .place {
        margin: 1em 0 0.5em 0;
        position: relative;
    }

    #work-history,
    #other-history {
        margin: 0;
        float: none;
        margin: 0 12em 0 0;
    }

    #linklist {
        display: none
    }
    #card .home-url {
        display: inline-block;
    }

    .gauge .g-on {
        -webkit-print-color-adjust: exact;
    }

    .gauge .g-off {
        -webkit-print-color-adjust: exact;
    }

    .tags {
        display: block;
    }
}