Template:GC Table/styles.css
From Archon Arcana - The KeyForge Wiki
/* setting up the outer table */ div.vtcontainer { display: table; margin-top: 10px; margin-bottom: 10px; border: 1px solid #aaaaaa; box-shadow: 15px 15px 38px -27px rgba(0, 0, 0, 0.53); } div.vtcontainermenu { display: flex; box-sizing: border-box; } div.upcomingvtcontainermenu { display: flex; box-sizing: border-box; } div.vtcontainerentry { display: flex; border-top: solid 1px #aaaaaa; } div.upcomingvtcontainerentry { display: flex; border-top: solid 1px #aaaaaa; } /* sets up the menu */ div.vtcontainer .menu1 { font-weight: bold; text-align: center; padding-top: 10px; padding-bottom: 10px; background-image: linear-gradient(#dadada, #ffffff); box-sizing: border-box; } div.vtcontainer .menu2 { font-weight: bold; text-align: left; padding-top: 10px; padding-bottom: 10px; background-image: linear-gradient(#dadada, #ffffff); } div.vtcontainer .menu3 { font-weight: bold; text-align: center; padding-top: 10px; padding-bottom: 10px; background-image: linear-gradient(#dadada, #ffffff); } div.vtcontainer .menu4 { font-weight: bold; text-align: center; padding-top: 10px; padding-bottom: 10px; background-image: linear-gradient(#dadada, #ffffff); } div.vtcontainer .menu5 { font-weight: bold; text-align: center; padding-top: 10px; padding-bottom: 10px; background-image: linear-gradient(#dadada, #ffffff); } div.vtcontainer .menu6 { font-weight: bold; padding-top: 10px; padding-bottom: 10px; background-image: linear-gradient(#dadada, #ffffff); } div.vtcontainer .menu7 { font-weight: bold; padding-top: 10px; padding-bottom: 10px; background-image: linear-gradient(#dadada, #ffffff); } /* setting up the years and set rows */ div.vtcontainertext { width: 100%; text-align: center; font-weight: bold; padding-top: 10px; padding-bottom: 10px; border-top: 1px solid #aaaaaa; } /* setting up each entry row */ div.vtcontainer .date { text-align: center; padding-top: 6px; padding-bottom: 6px; } div.vtcontainer .location { text-align: left; font-weight: bold; padding-top: 6px; padding-bottom: 6px; } div.vtcontainer .format { text-align: center; padding-top: 6px; padding-bottom: 6px; } div.vtcontainer .variant { text-align: center; padding-top: 6px; padding-bottom: 6px; } div.vtcontainer .players { text-align: center; padding-top: 6px; padding-bottom: 6px; } div.vtcontainer .winner { text-align: left; padding-top: 6px; padding-bottom: 6px; } div.vtcontainer .deck { text-align: left; padding-top: 6px; padding-bottom: 6px; } /* sets up the format and variant row */ .vtcontainerrow { display: flex; } .upcomingvtcontainerrow { display: flex; } /* screen sizing */ /* small screens */ @media screen and (max-width: 499px) { div.vtcontainer { width: 100%; } .vtcontainerrow { font-size:.9em; } .upcomingvtcontainerrow { font-size:.9em; } div.vtcontainermenu .menu1 { width: 25%; box-sizing:border-box; padding-right:10px; text-align:right; } div.vtcontainermenu .menu2 { width: 75%; padding-left: 10px; box-sizing: border-box; } div.vtcontainermenu .menu3 { display: none; } div.vtcontainermenu .menu4 { display: none; } div.vtcontainermenu .menu5 { display: none; } div.vtcontainermenu .menu6 { display: none; } div.vtcontainermenu .menu7 { display: none; } div.upcomingvtcontainermenu .menu1 { width: 25%; box-sizing:border-box; padding-right:10px; text-align:right; } div.upcomingvtcontainermenu .menu2 { width: 75%; padding-left: 10px; box-sizing: border-box; } div.upcomingvtcontainermenu .menu3 { display: none; } div.upcomingvtcontainermenu .menu4 { display: none; } div.upcomingvtcontainermenu .menu5 { display: none; } div.upcomingvtcontainermenu .menu6 { display: none; } div.upcomingvtcontainermenu .menu7 { display: none; } div.vtcontainerentry .date { width: 25%; background-color: #efefef; background-image:linear-gradient(#efefef,#ffffff); text-align:right; } div.vtcontainerentry .location { width: 75%; background-color: #efefef; background-image:linear-gradient(#efefef,#ffffff); padding-left: 10px; box-sizing: border-box; } div.vtcontainerentry .format { display: none; } div.vtcontainerentry .variant { display: none; } div.vtcontainerentry .players { display: none; } div.vtcontainerentry .winner { display: none; } div.vtcontainerentry .deck { display: none; } div.upcomingvtcontainerentry .date { width: 25%; background-color: #efefef; background-image:linear-gradient(#efefef,#ffffff); text-align:right; } div.upcomingvtcontainerentry .location { width: 75%; background-color: #efefef; background-image:linear-gradient(#efefef,#ffffff); padding-left: 10px; box-sizing: border-box; } div.upcomingvtcontainerentry .format { display: none; } div.upcomingvtcontainerentry .variant { display: none; } div.upcomingvtcontainerentry .players { display: none; } div.upcomingvtcontainerentry .winner { display: none; } div.upcomingvtcontainerentry .deck { display: none; } div.upcomingvtcontainerentry .ticketing { display:none; } div.vtcontainerrow .menu3 { width: 25%; background-color: #ffffff; background-image: none; text-align:right; color: #000000; padding-top: 6px; padding-bottom: 1px; } div.vtcontainerrow .format { width: 75%; text-align: left; padding-left: 10px; box-sizing: border-box; padding-top: 6px; padding-bottom: 1px; } div.vtcontainerrow .menu4 { width: 25%; background-color: #ffffff; background-image: none; text-align:right; color: #000000; padding-top: 1px; padding-bottom: 1px; } div.vtcontainerrow .variant { width: 75%; text-align: left; padding-left: 10px; box-sizing: border-box; padding-top: 1px; padding-bottom: 1px; } div.vtcontainerrow .menu5 { width: 25%; background-color: #ffffff; background-image: none; text-align:right; color: #000000; padding-top: 1px; padding-bottom: 1px; } div.vtcontainerrow .players { width: 75%; text-align: left; padding-left: 10px; box-sizing: border-box; padding-top: 1px; padding-bottom: 1px; } div.vtcontainerrow .menu6 { width: 25%; background-color: #ffffff; background-image: none; text-align:right; color: #000000; padding-top: 1px; padding-bottom: 1px; } div.vtcontainerrow .winner { width: 75%; padding-left: 10px; box-sizing: border-box; padding-top: 1px; padding-bottom: 1px; } div.vtcontainerrow .menu7 { width: 25%; background-color: #ffffff; background-image: none; text-align:right; color: #000000; padding-top: 1px; padding-bottom: 1px; } div.vtcontainerrow .deck { width: 75%; text-align: left; padding-left: 10px; box-sizing: border-box; padding-right: 5px; padding-top: 1px; padding-bottom: 1px; } div.upcomingvtcontainerrow .menu3 { width: 25%; background-color: #ffffff; background-image: none; color: #000000; text-align:right; padding-top: 1px; padding-bottom: 1px; } div.upcomingvtcontainerrow .format { width: 75%; text-align: left; padding-left: 10px; box-sizing: border-box; padding-top: 1px; padding-bottom: 1px; } div.upcomingvtcontainerrow .menu4 { width: 25%; background-color: #ffffff; background-image: none; text-align:right; color: #000000; padding-top: 1px; padding-bottom: 1px; } div.upcomingvtcontainerrow .variant { width: 75%; text-align: left; padding-left: 10px; box-sizing: border-box; padding-top: 1px; padding-bottom: 1px; } div.upcomingvtcontainerrow .menu6 { width: 25%; background-color: #ffffff; background-image: none; font-weight:bold; text-align:right; color: #000000; padding-top: 1px; padding-bottom: 1px; } div.upcomingvtcontainerrow .ticketing { width: 75%; text-align: left; padding-left: 0px; box-sizing: border-box; padding-top: 1px; padding-bottom: 1px; } div.upcomingvtcontainerrow .menu { width: 25%; background-color: #ffffff; background-image: none; font-weight:bold; text-align:right; color: #000000; padding-top: 1px; padding-bottom: 1px; } div.upcomingvtcontainerrow .text { width: 75%; text-align: left; padding-left: 10px; box-sizing: border-box; padding-top: 1px; padding-bottom: 1px; } } /* medium screens */ @media screen and (max-width: 750px) and (min-width:500px) { div.vtcontainer { width: 100%; } div.vtcontainermenu .menu1 { width: 25%; box-sizing:border-box; padding-right:10px; text-align:right; } div.vtcontainermenu .menu2 { width: 60%; box-sizing: border-box; padding-left: 10px; } div.vtcontainermenu .menu3 { display: none; } div.vtcontainermenu .menu4 { display: none; } div.vtcontainermenu .menu5 { width: 15%; } div.vtcontainermenu .menu6 { display: none; } div.vtcontainermenu .menu7 { display: none; } div.upcomingvtcontainermenu .menu1 { width: 25%; box-sizing:border-box; padding-right:10px; text-align:right; } div.upcomingvtcontainermenu .menu2 { width: 75%; box-sizing: border-box; padding-left: 10px; } div.upcomingvtcontainermenu .menu3 { display: none; } div.upcomingvtcontainermenu .menu4 { display: none; } div.upcomingvtcontainermenu .menu5 { display: none; } div.upcomingvtcontainermenu .menu6 { display: none; } div.upcomingvtcontainermenu .menu7 { display: none; } div.vtcontainerentry .date { width: 25%; background-color: #efefef; background-image:linear-gradient(#efefef,#ffffff); text-align:right; } div.vtcontainerentry .location { width: 60%; box-sizing: border-box; padding-left: 10px; background-image:linear-gradient(#efefef,#ffffff); background-color: #efefef; } div.vtcontainerentry .format { display: none; } div.vtcontainerentry .variant { display: none; } div.vtcontainerentry .players { width: 15%; background-image:linear-gradient(#efefef,#ffffff); background-color: #efefef; } div.vtcontainerentry .winner { display: none; } div.vtcontainerentry .deck { display: none; } div.upcomingvtcontainerentry .ticketing { display:none; } div.upcomingvtcontainerentry .date { width: 25%; background-color: #efefef; background-image:linear-gradient(#efefef,#ffffff); text-align:right; } div.upcomingvtcontainerentry .location { width: 75%; box-sizing: border-box; background-image:linear-gradient(#efefef,#ffffff); padding-left: 10px; background-color: #efefef; } div.upcomingvtcontainerentry .format { display: none; } div.upcomingvtcontainerentry .variant { display: none; } div.upcomingvtcontainerentry .players { display: none; } div.upcomingvtcontainerentry .winner { display: none; } div.upcomingvtcontainerentry .deck { display: none; } div.vtcontainerrow .menu3 { width: 25%; background-color: #ffffff; background-image: none; text-align:right; color: #000000; padding-top: 6px; padding-bottom: 1px; background-image: none; } div.vtcontainerrow .format { width: 75%; text-align: left; padding-left: 10px; box-sizing: border-box; padding-top: 6px; padding-bottom: 1px; } div.vtcontainerrow .menu4 { width: 25%; background-color: #ffffff; background-image: none; text-align:right; background-image: none; color: #000000; padding-top: 1px; padding-bottom: 1px; } div.vtcontainerrow .variant { width: 75%; text-align: left; padding-left: 10px; box-sizing: border-box; padding-top: 1px; padding-bottom: 1px; } div.vtcontainerrow .menu5 { display: none; } div.vtcontainerrow .players { display: none } div.vtcontainerrow .menu6 { width: 25%; background-color: #ffffff; background-image: none; text-align:right; color: #000000; padding-top: 1px; padding-bottom: 1px; } div.vtcontainerrow .winner { width: 75%; padding-left: 10px; box-sizing: border-box; padding-top: 1px; padding-bottom: 1px; } div.vtcontainerrow .menu7 { width: 25%; background-color: #ffffff; background-image: none; text-align:right; color: #000000; padding-top: 1px; padding-bottom: 1px; } div.vtcontainerrow .deck { width: 75%; text-align: left; padding-left: 10px; box-sizing: border-box; padding-top: 1px; padding-right: 5px; padding-bottom: 1px; } div.upcomingvtcontainerrow .menu3 { width: 25%; background-color: #ffffff; background-image: none; color: #000000; text-align:right; padding-top: 1px; padding-bottom: 1px; background-image: none; } div.upcomingvtcontainerrow .format { width: 75%; text-align: left; padding-left: 10px; box-sizing: border-box; padding-top: 1px; padding-bottom: 1px; } div.upcomingvtcontainerrow .menu4 { width: 25%; background-color: #ffffff; background-image: none; background-image: none; color: #000000; text-align:right; padding-top: 1px; padding-bottom: 1px; } div.upcomingvtcontainerrow .variant { width: 75%; text-align: left; padding-left: 10px; box-sizing: border-box; padding-top: 1px; padding-bottom: 1px; } div.upcomingvtcontainerrow .menu6 { width: 25%; background-color: #ffffff; background-image: none; background-image: none; color: #000000; text-align:right; font-weight:bold; padding-top: 1px; padding-bottom: 1px; } div.upcomingvtcontainerrow .ticketing { width: 75%; text-align: left; padding-left: 0px; box-sizing: border-box; padding-top: 1px; padding-bottom: 1px; } div.upcomingvtcontainerrow .menu { width: 25%; background-color: #ffffff; background-image: none; background-image: none; color: #000000; text-align:right; font-weight:bold; padding-top: 1px; padding-bottom: 1px; } div.upcomingvtcontainerrow .text { width: 75%; text-align: left; padding-left: 10px; box-sizing: border-box; padding-top: 1px; padding-bottom: 1px; } } /* desktop screens */ @media screen and (min-width: 751px) and (max-width:1150px) { div.vtcontainertext { width: 100%; box-sizing:border-box; font-size:1.1em; font-weight: bold; padding-top: 10px; padding-bottom: 10px; border-top: 1px solid #aaaaaa; } div.vtcontainermenu .menu1 { width: 100px; box-sizing:border-box; padding-right:10px; text-align:right; } div.vtcontainermenu .menu2 { width: 300px; padding-left: 10px; box-sizing: border-box; } div.vtcontainermenu .menu3 { width: 80px; } div.vtcontainermenu .menu4 { width: 80px; } div.vtcontainermenu .menu5 { width: 80px; } div.vtcontainermenu .menu6 { display: none; } div.vtcontainermenu .menu7 { display: none; } div.upcomingvtcontainermenu .menu1 { width: 100px; box-sizing:border-box; padding-right:10px; text-align:right; } div.upcomingvtcontainermenu .menu2 { width: 380px; padding-left: 10px; box-sizing: border-box; } div.upcomingvtcontainermenu .menu3 { width: 80px; } div.upcomingvtcontainermenu .menu4 { width: 80px; } div.upcomingvtcontainermenu .menu5 { width: 80px; } div.upcomingvtcontainermenu .menu6 { display: none; } div.upcomingvtcontainermenu .menu7 { display: none; } div.vtcontainerentry .date { width: 100px; text-align:right; background-color: #efefef; background-image:linear-gradient(#efefef,#ffffff); } div.vtcontainerentry .location { width: 300px; padding-left: 10px; box-sizing: border-box; background-color: #efefef; background-image:linear-gradient(#efefef,#ffffff); } div.vtcontainerentry .format { width: 80px; background-color: #efefef; background-image:linear-gradient(#efefef,#ffffff); } div.vtcontainerentry .variant { width: 80px; background-color: #efefef; background-image:linear-gradient(#efefef,#ffffff); } div.vtcontainerentry .players { width: 80px; background-color: #efefef; background-image:linear-gradient(#efefef,#ffffff); } div.vtcontainerentry .winner { display: none; } div.vtcontainerentry .deck { display: none; } div.upcomingvtcontainerentry .date { width: 100px; text-align:right; background-image:linear-gradient(#efefef,#ffffff); background-color: #efefef; } div.upcomingvtcontainerentry .location { width: 380px; padding-left: 10px; box-sizing: border-box; background-image:linear-gradient(#efefef,#ffffff); background-color: #efefef; } div.upcomingvtcontainerentry .format { width: 80px; background-color: #efefef; background-image:linear-gradient(#efefef,#ffffff); } div.upcomingvtcontainerentry .variant { width: 80px; background-color: #efefef; background-image:linear-gradient(#efefef,#ffffff); } div.upcomingvtcontainerentry .players { display: none; } div.upcomingvtcontainerentry .winner { display: none; } div.upcomingvtcontainerentry .deck { display: none; } div.upcomingvtcontainerentry .ticketing { display:none; } div.vtcontainerrow .menu3 { display: none; } div.vtcontainerrow .format { display: none; } div.vtcontainerrow .menu4 { display: none; } div.vtcontainerrow .variant { display: none; } div.vtcontainerrow .menu5 { display: none; } div.vtcontainerrow .players { display: none; } div.vtcontainerrow .menu6 { width: 100px; background-color: #ffffff; background-image: none; color: #000000; text-align: right; padding-top: 6px; padding-bottom: 1px; } div.vtcontainerrow .winner { padding-left: 10px; box-sizing: border-box; padding-top: 6px; padding-bottom: 1px; } div.vtcontainerrow .menu7 { width: 100px; background-color: #ffffff; background-image: none; color: #000000; text-align: right; padding-top: 1px; padding-bottom: 1px; } div.vtcontainerrow .deck { text-align: left; padding-left: 10px; box-sizing: border-box; padding-top: 1px; padding-right: 5px; padding-bottom: 1px; } div.upcomingvtcontainerrow .menu3 { display: none; } div.upcomingvtcontainerrow .format { display: none; } div.upcomingvtcontainerrow .menu4 { display: none; } div.upcomingvtcontainerrow .variant { display: none; } div.upcomingvtcontainerrow .menu6 { width: 100px; background-color: #ffffff; background-image: none; color: #000000; font-weight:bold; text-align: right; padding-top: 1px; padding-bottom: 1px; } div.upcomingvtcontainerrow .ticketing { padding-left: 0px; box-sizing: border-box; padding-top: 1px; padding-bottom: 1px; } div.upcomingvtcontainerrow .menu { width: 100px; background-color: #ffffff; background-image: none; color: #000000; font-weight:bold; text-align: right; padding-top: 1px; padding-bottom: 1px; } div.upcomingvtcontainerrow .text { padding-left: 10px; box-sizing: border-box; padding-top: 1px; padding-bottom: 1px; } } /* Very large screens */ @media screen and (min-width: 1151px) { div.vtcontainer {} div.vtcontainermenu .menu1 { width: 100px; box-sizing:border-box; padding-right:10px; text-align:right; } div.vtcontainermenu .menu2 { width: 300px; padding-left: 10px; box-sizing: border-box; } div.vtcontainermenu .menu3 { width: 80px; } div.vtcontainermenu .menu4 { width: 80px; } div.vtcontainermenu .menu5 { width: 80px; } div.vtcontainermenu .menu6 { width:200px; box-sizing:border-box; padding-left:10px; } div.vtcontainermenu .menu7 { display:none; } div.upcomingvtcontainermenu .menu1 { width: 100px; box-sizing:border-box; padding-right:10px; text-align:right; } div.upcomingvtcontainermenu .menu2 { width: 380px; padding-left: 10px; box-sizing: border-box; } div.upcomingvtcontainermenu .menu3 { width: 80px; } div.upcomingvtcontainermenu .menu4 { width: 80px; } div.upcomingvtcontainermenu .menu5 { display:none; } div.upcomingvtcontainermenu .menu6 { width:200px; text-align:left; } div.upcomingvtcontainermenu .menu7 { display: none; } div.vtcontainerentry:nth-child(even) { background-color: #efefef; background-image:linear-gradient(#efefef,#ffffff); } div.vtcontainerentry:nth-child(odd) { background-color: #efefef; background-image:linear-gradient(#efefef,#ffffff); } div.vtcontainerentry .date { width: 100px; text-align:right; } div.vtcontainerentry .location { width: 300px; padding-left: 10px; box-sizing: border-box; } div.vtcontainerentry .format { width: 80px; } div.vtcontainerentry .variant { width: 80px; } div.vtcontainerentry .players { width: 80px; } div.vtcontainerentry .winner { width:200px; box-sizing:border-box; padding-left:10px; } div.vtcontainerentry .deck { display:none; } div.upcomingvtcontainerentry .date { width: 100px; text-align:right; background-image:linear-gradient(#efefef,#ffffff); background-color: #efefef; } div.upcomingvtcontainerentry .location { width: 380px; padding-left: 10px; box-sizing: border-box; background-color: #efefef; background-image:linear-gradient(#efefef,#ffffff); } div.upcomingvtcontainerentry .format { width: 80px; background-color: #efefef; background-image:linear-gradient(#efefef,#ffffff); } div.upcomingvtcontainerentry .variant { width: 80px; background-color: #efefef; background-image:linear-gradient(#efefef,#ffffff); } div.upcomingvtcontainerentry .venue { display:none; } div.upcomingvtcontainerentry .ticketing { width:200px; background-color: #efefef; text-align:left; padding-top:6px; background-image:linear-gradient(#efefef,#ffffff); padding-bottom:6px; } div.upcomingvtcontainerentry .deck { display: none; } div.vtcontainerrow .menu3 { display: none; } div.vtcontainerrow .format { display: none; } div.vtcontainerrow .menu4 { display: none; } div.vtcontainerrow .variant { display: none; } div.vtcontainerrow .menu5 { display: none; } div.vtcontainerrow .players { display: none; } div.vtcontainerrow .menu6 { display: none; } div.vtcontainerrow .winner { display: none; } div.vtcontainerrow .menu7 { width: 100px; background-color: #ffffff; background-image: none; color: #000000; font-weight:bold; text-align: right; padding-top: 1px; padding-bottom: 1px; } div.vtcontainerrow .deck { padding-left: 10px; box-sizing: border-box; padding-top: 1px; padding-bottom: 1px; } div.upcomingvtcontainerrow .menu3 { display: none; } div.upcomingvtcontainerrow .format { display: none; } div.upcomingvtcontainerrow .menu4 { display: none; } div.upcomingvtcontainerrow .menu6 { display: none; } div.upcomingvtcontainerrow .ticketing { display: none; } div.upcomingvtcontainerrow .variant { display: none; } div.upcomingvtcontainerrow .menu { width: 100px; background-color: #ffffff; background-image: none; color: #000000; font-weight:bold; text-align: right; padding-top: 1px; padding-bottom: 1px; } div.upcomingvtcontainerrow .text { padding-left: 10px; box-sizing: border-box; padding-top: 1px; padding-bottom: 1px; } div.vtcontainertext { width: 100%; box-sizing:border-box; font-size:1.1em; font-weight: bold; padding-top: 10px; padding-bottom: 10px; border-top: 1px solid #aaaaaa; } } .vtcontainerCotA { background-color: #f7cdd9; background-image:linear-gradient(#f8d3de,#f4bdcd); box-shadow: inset 0px 11px 8px -10px #f1a7bc, inset 0px -11px 8px -10px #f1a7bc; } .vtcontainerAoA { background-color: #c2ddff; background-image:linear-gradient(#cce3ff,#b3d5ff); box-shadow: inset 0px 11px 8px -10px #99c7ff, inset 0px -11px 8px -10px #99c7ff; } .vtcontainerWC { background-color: #ccc2ff; background-image:linear-gradient(#d5ccff,#bfb3ff); box-shadow: inset 0px 11px 8px -10px #a899ff, inset 0px -11px 8px -10px #a899ff; } .vtcontainerMM { background-color: #bac2d1; background-image:linear-gradient(#d1d6e0,#bac2d1); box-shadow: inset 0px 11px 8px -10px #b3bbcc, inset 0px -11px 8px -10px #b3bbcc; } .vtcontainerWorlds { background-color: #f5edc9; background-image:linear-gradient(#f7f1d4,#f3e9be); box-shadow: inset 0px 11px 8px -10px #ebdb93, inset 0px -11px 8px -10px #ebdb93; } .vtcontainerInput { background-color: #d4d4d4; background-image:linear-gradient(#d9d9d9,#cccccc); box-shadow: inset 0px 11px 8px -10px #aaaaaa, inset 0px -11px 8px -10px #aaaaaa; } .vtDateBlock { display:inline-block; }