spot-it.css

* {
    box-sizing:border-box;
}
body {
    font-family:arial;
    padding:20px;
}
.cards {
    /*display:flex;
    flex-direction:row;
    flex-wrap: wrap;*/
    max-height: 420px;
    overflow:scroll;
    border:2px solid grey;
}
.playingGame .cards {
    overflow:visible;
    border: 0;
}
.card {
    border:1px solid #ccc;
    float:left;
    width: 41%;
    /*height:225px;*/
    /*width:300px;*/
    margin:10px;
    display:flex;
    flex-direction:row;
    flex-wrap: wrap;
    justify-content: center;
    /*align-items: center;*/
    page-break-inside: avoid;
    padding: 10px;
    overflow:hidden;
}
.card:nth-child(2n+1){
    clear:left;
    /*border-color:red;*/
}
.card__num {
    width:100%;
    padding:20px;
    text-align:center;
}
.card__item {
    /*width:50%;*/
    text-align:center;
    align-items: center;
    vertical-align:middle;
    /*border:1px solid red;*/
    padding:0px;
    width:33%;
    border:2px solid transparent;
    
    display: flex;
    justify-content: center;
    flex-direction: column;
    position:relative;
}
.card__item:hover {
    background:#f1f1f1;
}
.card__item img {
    /*width:100%;*/
    max-width:100%;
}
.card__item--image {
    justify-content: flex-start;
}
.card__item__label {
    /*position:absolute;*/
    bottom:0;
    background:rgba(255, 255, 255, 0.5);;
    color:black;
    width:100%;
    text-align:center;
    display:none;
}
.hide{
    display:none;
}
.right {
    border:2px solid green;
}
.wrong {
    border:2px solid red;
}
.game .card:nth-child(2n+1){
    clear:none;
}
.credits {
    clear:both;
}
textarea {
    width:90%;
    height:200px;
}
.setData {
    clear:both;
}
.dataEntry:before,
.setData:after {
    content:"";
    display:table;
    clear:both;
}
.data-group {
    width:45%;
    float:left;
}
.bigtext .card__item {
    font-family: 'Comic Sans MS';
    font-size:30px;
    /* if they want big text, don't crop it off */
    border-radius: 0 !important;
    overflow: visible !important;
}
.colorize .red {
    color:red;
}
.colorize .orange {
    color:orange;
}
.colorize .green {
    color:green;
}
.colorize .blue {
    color:blue;
}
.colorize .purple {
    color:purple;
}
.colorize .magenta {
    color:magenta;
}
.colorize .turquoise {
    color:turquoise;
}
.colorize .firebrick {
    color:firebrick;
}

.print3x5 .card {
    height:2.7in;
    width:4.7in;
}
.print5x3 .card {
    width:2.9in;
    height:4.6in;
}
.print4x6 .card {
    height:3.7in;
    width:5.7in;
}
.print6x4 .card {
    width:3.7in;
    height:5.6in;
}
.print5x8 .card {
    height:5in;
    width:8in;
}
.print4x4 .items-per-row {
    display:none;
}
.print4x4 .card {
    width:3.375in;
    height:3.375in;
    border-radius: 50%;
    display: block;
    position:relative;
}
.print4x4 .card .card__item {
    height: .9in;
    width: .9in;
    float:left;
    position:absolute;
    border-radius: 50%;
    overflow:hidden;
    justify-content: center;
    /*transform: translateY(-50%) translateX(-50%);*/
    background-color: transparent !important; /* override test colors */
}
.print4x4 .card .card__item img {
    height: .9in;
    width: .9in;
    object-fit: cover;
}
.print4x4 .card .card__item__label {
    position: absolute;
    top: 50%;
    bottom:auto;
    transform: translateY(-50%);
}

.print4x4.words-per-card-4 .card .card__item:nth-child(1){
    top: calc(20% - .45in);
    left: calc(50% - .45in);
    background:red;
}
.print4x4.words-per-card-4 .card .card__item:nth-child(2){
    top: calc(50% - .45in);
    left: calc(80% - .45in);
    background:orange;
}
.print4x4.words-per-card-4 .card .card__item:nth-child(3){
    top: calc(80% - .45in);
    left: calc(50% - .45in);
    background:yellow;
}
.print4x4.words-per-card-4 .card .card__item:nth-child(4){
    top: calc(50% - .45in);
    left: calc(20% - .45in);
    background:green;
}


.print4x4.words-per-card-6 .card .card__item:nth-child(1){
    top: calc(22% - .45in);
    left: calc(33% - .45in);
    background:red;
}
.print4x4.words-per-card-6 .card .card__item:nth-child(2){
    top: calc(22% - .45in);
    left: calc(66% - .45in);
    background:orange;
}
.print4x4.words-per-card-6 .card .card__item:nth-child(3){
    top: calc(48% - .45in);
    left: calc(50% - .45in);
    background:yellow;
}
.print4x4.words-per-card-6 .card .card__item:nth-child(4){
    top: calc(82% - .45in);
    left: calc(50% - .45in);
    background:green;
}
.print4x4.words-per-card-6 .card .card__item:nth-child(5){
    top: calc(60% - .45in);
    left: calc(20% - .45in);
    background:blue;
}
.print4x4.words-per-card-6 .card .card__item:nth-child(6){
    top: calc(60% - .45in);
    left: calc(80% - .45in);
    background:purple;
}


.print4x4.words-per-card-8 .card .card__item:nth-child(1){
    top: calc(19% - .45in);
    left: calc(36% - .45in);
    background:red;
}
.print4x4.words-per-card-8 .card .card__item:nth-child(2){
    top: calc(19% - .45in);
    left: calc(66% - .45in);
    background:orange;
}
.print4x4.words-per-card-8 .card .card__item:nth-child(3){
    top: calc(50% - .45in);
    left: calc(50% - .45in);
    background:yellow;
}
.print4x4.words-per-card-8 .card .card__item:nth-child(4){
    top: calc(84% - .45in);
    left: calc(50% - .45in);
    background:green;
}
.print4x4.words-per-card-8 .card .card__item:nth-child(5){
    top: calc(42% - .45in);
    left: calc(16% - .45in);
    background:blue;
}
.print4x4.words-per-card-8 .card .card__item:nth-child(6){
    top: calc(42% - .45in);
    left: calc(84% - .45in);
    background:purple;
}
.print4x4.words-per-card-8 .card .card__item:nth-child(7){
    top: calc(70% - .45in);
    left: calc(78% - .45in);
    background:teal;
}
.print4x4.words-per-card-8 .card .card__item:nth-child(8){
    top: calc(70% - .45in);
    left: calc(22% - .45in);
    background:silver;
}



.per-row-2 .card__item { 
    width: 50%;
}
.per-row-3 .card__item { 
    width: 33.3%;
}
.per-row-4 .card__item { 
    width: 25%;
}
.active {
    background: #00e965;
}
.showlabels .card__item__label {
    display:inline;
}
.show-with-items {
    display:none;
}
.have-items .show-with-items {
    display:block;
}
.displayOptions a {
    display: inline-block;
    padding:3px;
}
.playingGame .hide-with-game {
    display:none;
}
.show-with-game {
    display:none;
}
.playingGame .show-with-game {
    display:block;
}
@media print {
    .hide-for-print {
        display:none;
    }
    body {
        padding:0;
        margin:0;
    }
    .print3x5 .card,
    .print5x3 .card,
    .print4x6 .card,
    .print6x4 .card {
        margin:0;
        border:0;
    }
    .cards {
        max-height:none;
        border:0;
        overflow:visible;
    }
}

#urlWarning {
    border:5px solid red;
    padding:5px;
}
.local_show {
    margin:0;
    padding:0;
    list-style-type: none;
}
.local_show li {
    display:inline-block;
    padding:10px;
    border:1px solid black;
    text-align:center;
    margin:10px;
}
.local_show img {
    cursor: pointer;
    width:50px;
}

.used[class] {
    border-color:green;
    background: rgb(129, 241, 160);
}

.upload {
    border:1px solid black;
    padding:10px;
    margin-bottom:20px;
}

#browser-warning {
    display: none;
    padding: 1em;
    text-align: center;
    background-color: #FFDAD9;
    border: 2px solid #FF0700;
    -moz-border-radius: 4px 4px;
    -webkit-border-radius: 4px 4px;
    border-bottom-left-radius: 4px 4px;
    border-bottom-right-radius: 4px 4px;
    border-top-left-radius: 4px 4px;
    border-top-right-radius: 4px 4px;
    margin-bottom: 1em;
}

#drop-box-overlay {
    margin: 1px;
    padding: 0;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    position: fixed;
    background-color: rgba(0,0,0,.8);
    display: none;

    z-index: 50;
    opacity: 1;
}

#drop-box-overlay .message {
    padding: 2em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    text-align: center;
    border: 2px solid #679B00;
    background-color: #C9F76F;
    -moz-border-radius: 4px 4px;
    -webkit-border-radius: 4px 4px;
    border-bottom-left-radius: 4px 4px;
    border-bottom-right-radius: 4px 4px;
    border-top-left-radius: 4px 4px;
    border-top-right-radius: 4px 4px;

    color: #222222;
    font-size: 150%;
    text-shadow: 1px 1px 1px #FFFFFF;
}
.currentlyProcessing {
    width:100px;
}

.show {
    opacity: 1;
    display:block !important;
}
.dropzone-previews, #dropzone {
    display:none;
}