/*! HTML5 Boilerplate v6.0.1 | MIT License | https://html5boilerplate.com/ */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

   html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
body{
    background-color:#333;
    background-image:url("../img/diagmonds.png");    
    background-repeat: repeat;
    color:#fff;
    font-family: 'Roboto', sans-serif;    
    padding:0 1em 1em;
}
#social {font-size:0.875em;    
    float:right;
    width:30%;    
}
#social ul{list-style-type: none;
    display: flex;
    flex-flow: nowrap row;
    margin: 0;
    padding: 0;
    justify-content: flex-end;}
#social li{background:rgba(242, 111, 36, 0.1);}
#social li:hover{
    background: rgba(242, 111, 36, 0.2);
    cursor: pointer;
}
#social li:hover a, #social li:hover a:visited {
    color:#ffffff;    
}
#social li a {
	display:inline-block;
    color:#bb4400;
	padding:1em;
    text-decoration: none;
}
#social li a:visited {
    color:#bb4400;
}
#social li a:hover {
    color:#ffffff;
}
#divisionLogo {
    background-image:url("../img/td-wt-icon.png");
    background-position: center;
    background-repeat: no-repeat;
    display:block;
    height:350px;
    margin:0 auto;
    max-width:350px;
    width:100%;
}
#filterInput{
    background:#000;
    border-radius:3px;
    border:none;
    box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, .15);
    color:#f26f24;
    display:flex;
    font-family: 'Roboto', sans-serif;
    margin:10px auto;
    max-width: 300px;
    padding:8px;
    text-align:center;
    width:100%;
}
#buttons {
    display:flex;
    flex-flow: row wrap;
    justify-content:space-around;
    margin:0;
    padding:0;
}
   #buttons button {
    background-color: rgba(81, 85, 86, 0.5);
    border:none;
    box-shadow:0px 1px 1px 1px rgba(0, 0, 0, .15);
    color:#f26f24;
    cursor:pointer;
    font-weight:600;
    height:40px;
    max-width:100%;
    width:16%;
}
        #buttons button.active {
            background-color: rgba(242, 111, 36, 0.8);
            color:#fff;
}
#options{
    display:flex;
    flex-flow:row wrap;
    justify-content:space-around;
    margin:0;
    padding:0;    
}
#options div.active {
    display: inline-block;
}
#options .talentContainer {
    background-color: rgba(0, 0, 0, 0.5);
    background-position: right bottom;
    background-repeat: no-repeat;
    box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, .9);
    display: none;
    height:260px;
    margin:1em 0;    
    padding:1em;
    text-align:left;
    width:260px;
}    
    .talentContainer p.title span {
        color:#f26f24;
    }
    .talentContainer p.requirements span {
        color:#f26f24;
    }
    .talentContainer p.talentOn {
        max-width:70%;
    }
    .talentContainer p.talentOn span {
        color:#f26f24;
    }

#options .talentContainer.Accurate {
    background-image: url("../img/icons/accurate-icon.png");
}
#options .talentContainer.Adept {
    background-image: url("../img/icons/adept-icon.png");
}
#options .talentContainer.Ambusher {
    background-image: url("../img/icons/ambusher-icon.png");
}
#options .talentContainer.Balanced {
    background-image: url("../img/icons/balanced-icon.png");
}
#options .talentContainer.Brutal {
    background-image: url("../img/icons/brutal-icon.png");
}
#options .talentContainer.Capable {
    background-image: url("../img/icons/capable-icon.png");
}
#options .talentContainer.Commanding {
    background-image: url("../img/icons/commanding-icon.png");
}
#options .talentContainer.Competent {
    background-image: url("../img/icons/competent-icon.png");
}
#options .talentContainer.Coolheaded {
    background-image: url("../img/icons/coolheaded-icon.png");
}
#options .talentContainer.Deadly {
    background-image: url("../img/icons/deadly-icon.png");
}
#options .talentContainer.Destructive {
    background-image: url("../img/icons/destructive-icon.png");
}
#options .talentContainer.Determined {
    background-image: url("../img/icons/determined-icon.png");
}

#options .talentContainer.Disciplined {
    background-image: url("../img/icons/disciplined-icon.png");
}
#options .talentContainer.Dominant {
    background-image: url("../img/icons/dominant-icon.png");
}
#options .talentContainer.Elevated {
    background-image: url("../img/icons/elevated-icon.png");
}
#options .talentContainer.Expert {
    background-image: url("../img/icons/expert-icon.png");
}
#options .talentContainer.Ferocious {
    background-image: url("../img/icons/ferocious-icon.png");
}
#options .talentContainer.Fierce {
    background-image: url("../img/icons/fierce-icon.png");
}
#options .talentContainer.Focused {
    background-image: url("../img/icons/focused-icon.png");
}
#options .talentContainer.Harmful {
    background-image: url("../img/icons/harmful-icon.png");
}
#options .talentContainer.Hurried {
    background-image: url("../img/icons/hurried-icon.png");
}
#options .talentContainer.Intense {
    background-image: url("../img/icons/intense-icon.png");
}
#options .talentContainer.Meticulous {
    background-image: url("../img/icons/meticulous-icon.png");
}
#options .talentContainer.Predatory {
    background-image: url("../img/icons/predatory-icon.png");
}
#options .talentContainer.Prepared {
    background-image: url("../img/icons/prepared-icon.png");
}
#options .talentContainer.Proficient {
    background-image: url("../img/icons/proficient-icon.png");
}
#options .talentContainer.Responsive {
    background-image: url("../img/icons/responsive-icon.png");
}
#options .talentContainer.Self-Preserved {
    background-image: url("../img/icons/self-preserved-icon.png");
}
#options .talentContainer.Skilled {
    background-image: url("../img/icons/skilled-icon.png");
}
#options .talentContainer.Sustained {
    background-image: url("../img/icons/sustained-icon.png");
}
#options .talentContainer.Swift {
    background-image: url("../img/icons/swift-icon.png");
}
#options .talentContainer.Talented {
    background-image: url("../img/icons/talented-icon.png");
}
#options .talentContainer.Toxic {
    background-image: url("../img/icons/toxic-icon.png");
}
#options .talentContainer.Trained {
    background-image: url("../img/icons/trained-icon.png");
}
#options .talentContainer.Unforgiving {
    background-image: url("../img/icons/unforgiving-icon.png");
}
#options .talentContainer.Vicious {
    background-image: url("../img/icons/vicious-icon.png");
}
/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    -webkit-clip-path: none;
    clip-path: none;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}
/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media only screen and (max-width: 30em){
    #buttons button {
        width:40%;
    }
    #options .talentContainer.Accurate, #options .talentContainer.Adept, #options .talentContainer.Ambusher, #options .talentContainer.Balanced, #options .talentContainer.Brutal, #options .talentContainer.Capable, #options .talentContainer.Commanding, #options .talentContainer.Competent, #options .talentContainer.Coolheaded, #options .talentContainer.Deadly, #options .talentContainer.Destructive, 
    #options .talentContainer.Determined, #options .talentContainer.Disciplined, #options .talentContainer.Dominant, #options .talentContainer.Elevated, #options .talentContainer.Expert, #options .talentContainer.Ferocious, #options .talentContainer.Fierce, #options .talentContainer.Focused, #options .talentContainer.Harmful, #options .talentContainer.Hurried, #options .talentContainer.Intense, #options .talentContainer.Meticulous, #options .talentContainer.Predatory, #options .talentContainer.Prepared, #options .talentContainer.Proficient, #options .talentContainer.Responsive, #options .talentContainer.Self-Preserved, #options .talentContainer.Skilled, #options .talentContainer.Sustained, #options .talentContainer.Swift, #options .talentContainer.Talented, #options .talentContainer.Toxic, #options .talentContainer.Trained, #options .talentContainer.Unforgiving, #options .talentContainer.Vicious {
        background-image: none;
    }
    #options .talentContainer {
        height:auto;
        width:100%;
    }
    .talentContainer p.talentOn {
        max-width:100%;
    }
}
@media only screen and (max-width: 40em){
    #social {
        background: rgba(242, 111, 36, 0.1);
        float:none;
        margin-bottom:1em;
        width:100%;
    }
    #social ul {
        justify-content: space-evenly;
    }
    #social li, #social li:hover {
        background:none;
    }
}