/* ---- GENERAL ---- */

body {
}

/* ---- COMPETENCY ---- */

.comp {
    border: 1px solid transparent;
    transition: border 0.5s;
    padding-left: 10px;
    padding-top: 6px;
    padding-bottom: 6px;
}
.comp.active {
    border-color: #ddd;
    padding: 1em;
}

.comp .title {
    text-align: right;
    padding-right: 0.25em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.comp .title:hover {
    color: #2199e8;
}
.comp.active .title {
    white-space: normal;
    text-align: left;
    padding-left: 1rem;
}
.comp .definition {
    display: none;
    padding: 0 0 0 1rem;
    text-align: right;
}

.comp.active .definition {
    display: block;
    text-align: left;
}

/* ---- SKILLS & ABLILITIES ---- */

.comp .skillbox {
    position: relative;
}
.comp .skills {
    background-color: white;
    cursor: e-resize;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    padding-left: 10px;
    padding-right: 10%; /* match width of .after gradient */
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;
}
.comp.active .skills {
    white-space:normal;
    cursor: auto;
    -webkit-user-select: all;  /* Chrome all / Safari all */
    -moz-user-select: all;     /* Firefox all */
    -ms-user-select: all;      /* IE 10+ */
    user-select: all;

}
.comp .skills::-webkit-scrollbar {
    height: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
.comp .skills::-webkit-scrollbar-thumb {
    background: #f5f5f5;
}
.comp .skills li {
    display: inline-block;
    margin: 1px;
    padding: .5em;
    background-color: #deebf7;
}
.comp .skills li.Skill {
    
}
.comp.active .skills li {
/*
    width: inherit;
    display: block;
    float: left;
    clear: both;
    line-height: normal;
*/
}
.comp .skills li.KAB {
    background-color: #e2f0d9;
}
.comp .before {
    position: absolute;
    width: 10px;
    height: 41px;
    top: 0;
    left: 0;
    z-index: 10;
    background: rgba(255,255,255,1);
    background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)));
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
}
.comp .after {
    position: absolute;
    width: 10%;
    height: 42px;
    top: 0;
    right: 0;
    z-index: 10;
    background: rgba(255,255,255,0);
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 67%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(67%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1)));
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 67%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 67%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 67%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 67%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
}

.comp-main {
    width: 100%;
    white-space: nowrap;
}

.extras {
        margin-top: 1em;
        margin-bottom: 1em;
}
.extras > li {
        margin-top: .75em;
}

#content {
    display: block;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
}

.url a {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
}

/* ---- PRINT ---- */

@media print {
    body {
        font-size: 10pt;
        line-height: 1 !important;
        overflow: auto;
    }
    #content {
        display: block;
        position: inherit;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        overflow-y: visible;
    }
    h1.cfd-title {
        display: block !important;
        border-bottom: 1px solid #ddd;
    }
    .top-bar {
        display: none;
    }
    .comp, 
    .comp.active { 
        display: block;
        float: none;
        page-break-inside: avoid; 
        padding: 0;
        margin: 0;
        border: none;
    }
    .comp .title,
    .comp.active .title {
        font-weight: bold;
        text-align: left;
        margin-top: 0.5cm;
        padding-left: 0;
        page-break-after: avoid;
    }
    .comp .definition,
    .comp.active .definition {
        page-break-before: avoid;
        display: block !important;
        line-height: 1.2;
        margin-left: 0;
        padding-left: 0;
        text-align: left;
    }
    .comp .skills,
    .comp.active .skills {
        line-height: 1.3;
        white-space: normal;
        list-style: square;
    }
    .comp .skills li,
    .comp.active .skills li {
        display: list-item;
        list-style-position: outside;
        padding: 0;
        margin: 0;
        margin-left: 2em;
    }
    .comp .skills li.KAB,
    .comp.active .skills li.KAB {
        list-style: circle;
    }
    .comp .extras {
        display: block !important;
        margin-left: 1.75em;
    }
    
    a { 
        text-decoration: none;
    }
    a[href]:after {
        content: none !important;
    }
}
@page {
  size: 5.5in 10in;  
  margin: 0;
}