body {font-family:Tahoma; margin:0; padding-top:10px}
#main {margin:0 auto; padding-bottom:50px; width:100%; max-width:950px; min-width:500px}
#ads {text-align:center}
h2#title {text-align:center; margin:5px 0 10px 0; padding:0;}
h2 a {color:black;}
h6 {font-size:12px; font-weight:bold; margin-bottom:10px; text-align:center}
h6 a {color:black}

#zoom {margin:0 auto; text-align:center}
#zoom a {color:white; padding:0px 5px; text-decoration:none; font-weight:bold; font-size:1.5em; font-family:monospace}
#zoom a.green {background:#0a0}
#zoom a.red {background:red}

#compare {margin:0px auto; max-width:500px; width:90%}
#compareform span input {max-width:35%}
.titlemobile {display:none}

.gparent text {display:none; font-size:1.1em; font-weight:bold; color:white; fill:white; text-shadow:1px 1px black}

polygon {opacity:0.5}
.draggable:hover + .draggable .gparent polygon {opacity:0.25}
.gparent:hover polygon {opacity:0.75;}
.gparent:hover text {display:inline}

.select-input {cursor:pointer}

#mapred {fill:red; cursor:grab}
#mapblue {fill:blue; cursor:grab}

img.map {filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50; position:absolute;}
#red {}
#blue {}
select {font-size:12px; font-weight:bold; padding:5px 2px; margin:0}
input {font-size:12px; font-weight:bold;}

#compareform {font-size:12px; font-weight:bold; padding:0px; text-align:center; margin-bottom:0px}
form#compareform img {vertical-align:middle; border:1px solid gray}
#red {border-left:5px solid red; height:auto}
#blue {border-left:5px solid blue; height:auto}

@media only screen and (max-width: 650px) {
	#compareform {text-align:center}
	#compareform .vs  {display:none}
}

#info {margin-top:400px}
#error {margin-top:100px; text-align:center; color:red; display:block}
noscript {text-align:center; display:block; color:red; margin:10px 0}
#data {font-size:14px; text-align:center}
#data b {font-size:24px}
#pix {background:#ffc; margin:0; border-bottom:1px solid #ddd; padding:5px 0; text-align:center; margin-bottom:15px; display:block}
#iewarn {text-align:center}

.voted {background:#ffa; padding:5px 10px 5px 10px}
.idea {margin-bottom:10px}

#feedback { height: 104px; width: 104px; position: fixed; top: 40%; z-index: 999; transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }
#feedback a { display: block; background: #f00; height: 15px; width: 70px; padding: 8px 16px; color: #fff; font-family: Arial, sans-serif; font-size: 17px; font-weight: bold; text-decoration: none; border-bottom: solid 1px #333; border-left: solid 1px #333; border-right: solid 1px #fff; } 
#feedback a:hover { background: #06c; }

#disqus_thread {width:500px; margin:20px auto}

.compareto {line-height:1.8em}

#compareform span {word-break:keep-all}

select {height:auto}

.ideas5 + .ideas5 {display:none}
.history5 + .history5 + .history5 + .history5 + .history5 {display:none}

.votes {background:#c18100; padding:4px; text-align:center; min-width:25px; display:inline-block; border-radius:50%; font-weight:bold; color:white}
.votes-green {background:#0a0; padding:4px; text-align:center; min-width:25px; display:inline-block; border-radius:50%; font-weight:bold; color:white}

.bigtext {text-decoration:none; font-size:1.5em;}

.hide {display:none}



.modal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.65);
  visibility: hidden;
  backface-visibility: hidden;
  opacity: 0;
  transition: opacity .15s ease-in-out;
}
.modal.modal-open {
  visibility: visible;
  backface-visibility: visible;
  opacity: 1;
  z-index: 3;
}
.modal .modal-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.modal .modal-inner .modal-content {
  background-color: white;
  width:250px;
  padding: 1em 1.5em;
  position: relative;
  margin: 2em;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
}
.modal .modal-inner .modal-content .modal-close-icon {
  position: absolute;
  right: 1.5em;
}
.modal .modal-inner .modal-content .modal-content-inner {
  
}
.modal .modal-inner .modal-content .modal-content-inner h1, .modal .modal-inner .modal-content .modal-content-inner h2, .modal .modal-inner .modal-content .modal-content-inner h3, .modal .modal-inner .modal-content .modal-content-inner h4, .modal .modal-inner .modal-content .modal-content-inner h5, .modal .modal-inner .modal-content .modal-content-inner h6 {
  margin-bottom: 0.25em;
}
.modal .modal-inner .modal-content .modal-content-inner p {
  margin-bottom: 1em;
}
.modal .modal-inner .modal-content .modal-buttons-seperator {
  margin: 1.5em 0;
  margin-top: 0;
}
.modal .modal-inner .modal-content .modal-buttons {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.modal .modal-inner .modal-content .modal-buttons button {
  margin-left: 1em;
}
.modal .modal-inner .modal-content .modal-buttons button:first-child {
  margin-left: 0;
}

.demo-container {
  text-align: center;
}
#modal-ul {
    height:300px;
    overflow:scroll;
}


@media only screen and (max-width: 1000px) {
    .hide700 {display:none}
}

@media only screen and (max-width: 650px) {
	#compareform span input {max-width:38%}
	#compare {width:90%; border:0px}
    #modal-ul {height:225px;}
}
@media only screen and (max-width: 550px) {
        .titlemobile {display:inline; border-radius:; font-weight:bold; text-decoration:none}
        .titledesktop {display:none}
        .hidemobile {display:none}
}
@media only screen and (max-width: 400px) {
	#compare {width:90%; border:0px}
}
@media only screen and (max-width: 300px) {
	#compare {width:90%; border:0px}
}

.rotate {
    transform: rotate(90deg);
    transform-origin: center;
}

.nav {text-align:center; padding:15px; background:#ddd; margin-top:20px; margin-bottom:50px}
#slider-slider {display:none; margin:0 auto !important}

.cookie {position:fixed; width:100%; z-index:100; bottom:0; padding:5px 10px; text-align:center; background:black; color:#eee}