knapsack.css

body {
    width: 100%;
    padding: 2%;
    background-image: url(whiteStars.gif) !important;
}


.minor{
    width: 49%;
    float: left;
    margin-bottom: 20px;
}   

.inner{
    border: 1px solid black;
    width: 95%;
    height: 300px;
    padding: 7%;
/*    background-color: white;*/
}

#house{
/*    background-image: url(hardwood.jpg);*/
    background-color: rgba(197, 255, 139,0.9);
}


#knapsack{
/*    background-image: url(jeans.jpg);*/
/*    background-color: #CBC0D2;*/
    background-color: rgba(203,192,210,0.9);
}



#d3s{
    padding: 0%;
    background-color: white;
    
}

.top{
    height: 200px;
    align-content: auto;
    margin: auto;
    background-color: rgba(255, 255, 255, 0.70) !important;
}

.top img{
    max-height: 100%;
    max-width: 50%;
    margin: auto;
}

.inner figure{
    height: 31%;
    width: 33%;
    float: left;
    align-self: center;
    vertical-align: middle;
    margin-top: 3%;
    margin-bottom: 3%;

}



figure img{
    max-height: 80%;
    max-width: 100%;
    
}

figure img:hover{
    opacity: 0.5;
    filter: alpha(opacity=40);
    cursor: pointer;
}

figure figcaption{
    vertical-align: middle;
    text-align: center;
    text-shadow: 2px 2px white;
    font-size: 14px;
}


.instruct{
    text-align: center;
}

#d3chart{
    //border: 1px black solid;
    max-height: 400;
}


.extraInfo{
    font-weight: bold;
    cursor: pointer;
}

.theInfo{
    font-size: larger;
/*    font-family: monospace;*/
}

.info{
    font-size: x-large;
}

.topHalf{
    max-height: 80%;
}

.bottomHalf{
    text-align: center;
    font-size: larger;
}

.states{
    font-size: x-large;
}


#spaces{
    border: none;
    background-color: rgba(255, 255, 255, 0.70) ;    
}