:root {
	--color-down: #ff8181;
	--color-up: #72ff72;

    --color-down-light: #ffe4e4;
    --color-up-light: #deffde;
}
body {
	font-family: var(--font-sans);
}
a {
	color:var(--color-neutral-dark);
}



.icon {
   display:inline-block;
   width:1.25em;
   height:1.25em;
   text-align:text-bottom;
}
.main {
   flex:1 1 auto;
   position:relative;
   overflow:hidden;
   z-index:1;
}

.page {
	display:flex;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	flex-direction:column;
}
.footer,
.header {
    line-height: var(--header-height);
    flex: none;
    z-index:2;
    position:relative;
    box-shadow:0 0 6px rgba(0,0,0,0.1);
}

.noclick {
	pointer-events:none;
}


.transitioner {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	transition:opacity 0.2s;
	opacity:0;
	pointer-events:none;
	background-color:rgba(255,255,255,0.75);
  background-image:url(/img/loading2.gif);
  background-repeat:no-repeat;
  background-position:center;
  background-size:40px;
}
.transitioner.active {
	opacity:1;
  pointer-events:initial;
}




.list-item>a {
	display:block;
    padding: 1em;
    margin: 1em;
    border: 1px solid var(--color-neutral-light);
    border-radius: 0.5em;
    box-shadow: 1px 5px 10px rgba(0,0,0,0.15);
    text-decoration:none;
    transition:all 0.3s;
    position:relative;
}
.list-item>a:hover {
    box-shadow: 1px 5px 12px rgba(0,0,0,0.25);
}



.nav.tabs ul {
	display:flex;
}
.nav.tabs li {
    margin: 0 0.2em;
    flex: 1 1 auto;
    text-align:center;
    line-height:var(--header-height);
}
.nav.tabs a {
    position: relative;
    border-radius: 0.3em 0.3em 0 0;
    padding: 0 0.5em;
    font-family:var(--font-sans);
}



.header .hotdog > input {
    line-height: initial; 
    height: initial;
}
.footer a {
   line-height: var(--header-height);
   height: var(--header-height);
}





.form.small {
	max-width:320px;
	margin-left: auto;
	margin-right: auto;
}
.form-input {
	border-radius:0.2em;
	border:1px solid var(--color-neutral-light);
	padding:0.5em 1em;
	vertical-align:baseline;
}
.form-button {
	background-color:var(--color-neutral-light);
	font:inherit;
	padding:0.5em 1em;
}
.form-button:hover {
   text-decoration:none;
   cursor:pointer;
}
.form-button~.form-button {
   margin-top:0.25em;
}

.hotdog {
   padding:0.5em 1em;
   display:inline-flex;
    line-height: 1.5em;
}



label.checkbox {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 0.1em solid var(--color-neutral-medium);
    border-radius: 0.2em;
    cursor: pointer;
    position: relative;
    vertical-align: text-top;
}
label.checkbox::after {
	content:'✓';
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	font-size:0.8em;
	color:var(--color-neutral-medium);
	opacity:0;
}
input[type='checkbox']:checked+label.checkbox::after {
	opacity:1;
}









.weight {
    width: 6em;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    position:relative;
}
.weight-up {
    background-color: var(--color-up);
    height: 100%;
}
.weight-down {
    background-color: var(--color-down);
    height: 100%;
}
.weight-total {
	padding:0 0.5em;
}


.review {
    padding: 0.2em 0.5em;
    border-bottom: 1px solid #f3f3f3;
    position:relative;
}
.review::before {
	position:absolute;
	top:0;
	left:0;
	width:0.3em;
	height:100%;
	content:'';
}
.review.up::before { background-color:var(--color-up); }
.review.down::before { background-color:var(--color-down); }
.review:hover {
  background-color:var(--color-neutral-light);
}

.container {
	max-width:800px;
}


.review.mismatch {
   background-color:var(--color-down-light);
}
.review.match {
   background-color:var(--color-up-light);
}





.thumbs h3 {
   margin:0;
}







.poster {
	width:100px;
}
.review:not(.up):not(.down) [data-score],
.down [data-score='1'],
.up [data-score='0'],
.gray {
	opacity:0.3;
}
.rate {
	pointer-events: none;
}



.overscroll {
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
}
.reviews.critics {
    max-height: 15em;
    overflow: auto;
}




.media-image { max-width:100%; display:inline-block; vertical-align:text-bottom; }
.poster {
   float:right;
   margin-left:1em;
   margin-bottom:1em;
}








.section-heading {
    margin-top: 2.5em;
    margin-bottom: 0.5em;
    letter-spacing: 0.1em;
}
.cross-list {
    display: flex;
    overflow: auto;
    list-style-type: none;
    padding: 0;
    margin:0;
}
.choice {
    flex: none;
    font-size: 0.8rem;
    padding: 0.5em;
    background-color: var(--color-neutral-light);
    border-radius: 0.4em;
    margin: 0.4em 0.2em;
}
.choice-image {
    width: 10em;
    height: 15em;
}
.choice-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.choice-description {
    width: 10em;
    padding: 0.5em 0.2em;
}






@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */
  .header:last-child {
    padding-bottom:1em;
  }
}