gctGenerator/style/style.css

html {
   background-color:#f0f1f0;
   color:#000;
   font-family:Calibri;
   text-align:left
}

body {
   display:inline-block;
   margin:10px 0px;
   min-height:450px;
   font-size:1em;
   text-align:left
}

h1,h2,h3,h4{
   margin:5px 0px
}

h2,h3 {
   text-align:center
}

h1 {
   font-size:1.3em
}

h2 {
   font-size:1.1em
}

h3,h4 {
   margin-top:15px;
   font-size:1em
}

p {
   margin:10px 0px 0px 0px
}

img {
   border-radius:4px;
   max-width:100%
}

a {
   color:#ff0029;
   text-decoration:none
}

a:hover {
   color:#1185fd
}

hr {
   border-color:#f3f3f3
}

input[type=checkbox] {
   vertical-align:middle;
   width:15px;
   height:15px;
   margin:0;
   -webkit-appearance: checkbox;
   box-sizing: border-box
}

tr td:first-child {
   padding-right:5px
}

td {
   vertical-align:middle
}

#mainContainer {
   width:100vw;
   text-align:center
}

.initialhidden {
   visibility:hidden;
}

.section {
   display:inline-block;
   vertical-align:top;
   margin:20px 8px;
   text-align:left
}

.framed {
   padding:12px;
   text-align:justify;
   border-style:solid;
   border-color:#000;
   border-width:1px;
   border-radius:0px
}

.section .framed {
   margin-top:16px
}

.section .framed:first-of-type {
   margin-top:0px
}

#gameversion {
   width:100%;
   margin-top:0
}

#downloadbutton {
   width:100%;
   margin-top:2px
}

#generalsettings table {
   width:100%
}

#home {
   display:inline-block;
   min-width:400px;
   width:50vw;
   margin:10px 0px;
   padding:4px;
   text-align:justify
}

#smscommunity {
   display:block;
   text-align:center;
   margin:18px 0px 7px 0px
}

#smscommunity img {
   margin:0px 3px;
   vertical-align:middle
}

#left {
   width:30vw;
   min-width:300px;
   max-width:400px
}

#center {
   display:none
}

#right {
   width:50vw;
   min-width:300px;
   max-width:800px
}

#usefastcode:checked ~ #center {
   display:inline-block;
   width:20vw;
   min-width:300px;
   max-width:400px
}

#usefastcode:checked ~ #left {
   width:20vw
}

#usefastcode:checked ~ #right {
   width:35vw
}

@media screen and (max-width:1100px) {

   #usefastcode:checked ~ #left, #usefastcode:checked ~ #center{
      min-width:45vw;
      max-width:45vw
   }

   #usefastcode:checked ~ #right {
      min-width:90vw;
      min-width:calc(90vw + 24px);
      max-width:90vw
   }
}

@media screen and (max-width:700px) {

   #left,#center,#usefastcode:checked ~ #left, #usefastcode:checked ~ #center{
      min-width:400px;
      max-width:90vw;
      width:90vw
   }

   #right,#usefastcode:checked ~ #right {
      display:none
   }
}

button {
   padding:6px;
   margin:auto;
   color:#f1f1f1;
   background-color:#ca0707;
   border-style:none;
   border-radius:4px;
   cursor:pointer;
   outline:none
}

button:hover {
   background-color:#ff5151;
}

select {
   margin:2px 0px;
   background-color:#ca0707;
   padding:5px;
   color:#fff;
   width:200px;
   border-style:none;
   border-radius:4px;
   -webkit-user-select:none;
   -moz-user-select:none;
   -ms-user-select:none;
   user-select:none;
   outline:none
}

select:disabled {
   background:#e2e2e2;
   color: grey
}

optgroup {
   background:#ff5151
}

option {
   background:#ca0707
}

label {
   -webkit-user-select:none;
   -moz-user-select:none;
   -ms-user-select:none;
   user-select:none
}

ul {
   margin:0;
   padding:0;
   width:100%;
   list-style-type:none
}

ul li {
   margin-top:2px;
   cursor:pointer;
   position:relative;
   padding:4px;
   color:#262626;
   text-align:left;
   transition:.1s;
   -webkit-user-select:none;
   -moz-user-select:none;
   -ms-user-select:none;
   user-select:none;
   outline:none
}

ul li:nth-child(odd) {
   background:#e2e2e2
}

ul li:hover {
   background:#ca0707;
   color:#fff;
   border-color:#000
}

ul li.checked:hover {
   background:#ca0707;
   color:#fff
}

ul li.checked {
   background:#434343;
   color:#fff;
   border-color:#262626
}

[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -khtml-user-drag: element;
  -webkit-user-drag: element
}

#route_levels {
   margin:10px 0px;
}

#route_levels li {
   padding:0px 10px;
   margin:0
}

#route_levels li.dragover {
   padding-bottom:20px;
   background-color:white
}

#route_levels li select {
   margin:0;
   width:calc(100% - 40px);
   margin:0px 6px;
   color:black;
   background-color:inherit
}

#route_levels li select:hover {
   color:white
}

#route_levels li:hover select {
   color:white
}

#route_levels li:last-child {
   padding-left:24px
}

#route_levels li:last-child .route_remove, #route_levels li:last-child .route_drag {
   display:none
}

#checklist li {
   padding-left: 26px;
}

#checklist li::before {
   content:'';
   position:absolute;
   border-color:#a6a6a6;
   border-style:solid;
   border-width:2px;
   border-radius:50%;
   -webkit-transform: translateY(20%);
   -moz-transform: translateY(20%);
   -ms-transform: translateY(20%);
   -o-transform: translateY(20%);
   transform: translateY(20%);
   transform: translateY(20%);
   left:6px;
   height:10px;
   width:10px   
}

#checklist li:hover::before {
   border-color:#fff;
   background-color:#ffc0cb
}

#checklist li.checked::before {
    border-color:#fff;
    background-color:#d85e55
}

.dragelement {
   opacity:0.3
}

.route_remove {
   background:inherit;
   color:red;
   font-weight:bold;
   border-radius:0;
   vertical-align:middle;
   padding:0
}

.route_remove:hover {
   background:inherit;
   color:white
}

.route_drag {
   display:inline;
   background-color:inherit;
   color:#aaa;
   border-radius:0;
   vertical-align:middle;
   margin:0;
   padding:0
}

.route_clear, .route_presets {
   display:inline-block
}