.blocker{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:auto;z-index:1;padding:20px;box-sizing:border-box;background-color:#000;background-color:rgba(0,0,0,0.75);text-align:center}.blocker:before{content:"";display:inline-block;height:100%;vertical-align:middle;margin-right:-0.05em}.blocker.behind{background-color:transparent}.modal{display:none;vertical-align:middle;position:relative;z-index:2;max-width:500px;box-sizing:border-box;width:90%;background:#fff;padding:15px 30px;-webkit-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 0 10px #000;-moz-box-shadow:0 0 10px #000;-o-box-shadow:0 0 10px #000;-ms-box-shadow:0 0 10px #000;box-shadow:0 0 10px #000;text-align:left}.modal a.close-modal{position:absolute;top:-12.5px;right:-12.5px;display:block;width:30px;height:30px;text-indent:-9999px;background-size:contain;background-repeat:no-repeat;background-position:center center;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==')}.modal-spinner{display:none;position:fixed;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);padding:12px 16px;border-radius:5px;background-color:#111;height:20px}.modal-spinner>div{border-radius:100px;background-color:#fff;height:20px;width:2px;margin:0 1px;display:inline-block;-webkit-animation:sk-stretchdelay 1.2s infinite ease-in-out;animation:sk-stretchdelay 1.2s infinite ease-in-out}.modal-spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.modal-spinner .rect3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}.modal-spinner .rect4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}@-webkit-keyframes sk-stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.5)}20%{-webkit-transform:scaleY(1.0)}}@keyframes sk-stretchdelay{0%,40%,100%{transform:scaleY(0.5);-webkit-transform:scaleY(0.5)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}}
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;  margin:0;padding:0;
}

body{
  margin:0;
  background: white;
  color: black; 
  font-family: "Roboto", Helvetica, sans-serif; 
  font-weight: 300;
  font-size: 16px;
}
img { border:0; }
strong { font-weight: bold; }

/*-----------------------------------------------------*/
header {
  position:relative;
  background: black;
  color: white;
  min-height: 60px;
  padding: 12px;
  text-align:center;
  display:flex;
  align-items: center;
  justify-content: space-between;  
}
header .logo {
  width:64px;   
}
#hamburger {
  font-size: 2em;
  background: none;
  color:white;
  border: none;
  cursor: pointer;
}
#navmenu {
  display:none;
  position:absolute;
  padding: 2rem;
  top:1rem;
  right:0.5rem;
  background-color: #eee; 
  color:black;
  border-radius: 0.5rem;
  z-index: 10; 
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
#navmenu-close {
	position: absolute;
  height: 2rem;
	width: 2rem;
	top: 0.5rem;
	right: 0.5rem;
	font-size: xx-large;
	cursor: pointer;
	background-color: black;
	color: white;
	border-radius: 50%;
	text-align: center;
	line-height: 0.9;
}


/*-----------------------------------------------------*/
main {
  max-width: 800px;
  min-height: 600px;
  margin: 0 auto; 
}

/*-----------------------------------------------------*/
.botonera {
  margin:0; 
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.botonera li {
  display:inline-block;
  list-style: none;
}
.botonera button {
  font-size: 0.8rem;
  padding: 4px 8px; 
  margin: 3px;
  border: none;
  border-radius: 10px;
  background-color: black;
  color:white;
}
.botonera button.sorted {
  background-color:white;
  color:black;
}
.botonera .searchbox { 
  justify-self: flex-end;
}
.botonera .searchbox input {
  border:1px solid black; padding: 3px;
}
/*-----------------------------------------------------*/
footer {
  background: #333;
  color: #999;
  font-size: 0.8rem;
  text-align: center;
  padding: 20px 0;
}
footer .logo {
  width:64px; 
  margin-top: 20px; 
}

/*-----------------------------------------------------*/
.moviecard { 
  display: flex;
  flex-flow: row wrap;
  position:relative;
  min-height: 320px;
  padding: 6px 6px 12px 12px;
  border-top: 1px solid #ccc;
}

/*.moviecard:hover {
  background-color: #f6f6ff;
}*/

.moviecard .movieposter {
  flex: 1 1 200px;
}
.moviecard .movieinfo {
  flex: 1 1 500px;
}
.moviecard .moviedata {
  display: flex;
  flex-direction:row;
  align-items: flex-end;
}
.moviecard .moviedata * {
  margin: 0 2px;
}
.moviecard .moviedata .youwatch {
  margin: 0 0 0 auto;
  font-size:0.8rem;
}

.moviecard img { 
  width :200px;
  height: auto;
  float : left;
  margin: 0 10px 10px 0;
}

.moviecard .comments, .moviecard .overview {
  margin-top: 6px;
}

.moviecard a {
  color: #06a;
  text-decoration: none;
  font-weight: normal;
}

.moviecard a:hover {
  color:orange;
}

.moviecard .title {
  font-weight: bold;
  font-size: 1.2rem;
}

.moviecard .originaltitle {
  font-weight: bold;
  font-size: 1.2rem;
  font-style: italic;
  padding-left:12px;
}

.moviecard .overview, .moviecard .tagline {
  font-size: 0.7rem;
  color:#333;
  font-style: italic;
}

.moviecard .comments {
  color: black;
}

.moviecard .stars {
  color: orange;
}

.moviecard .rating {
  background-color:black; 
  color:white;
}

.moviecard .genre {
  text-transform: uppercase;
  font-size: 75%;
}

.moviedata {
  padding: 6px 0;
  background-color:#f6f6ff;
}

.moviedata span {
  display: inline-block;
  padding: 0 4px;
}

.moviedata .year {
  font-weight: bold;
}

/*-----------------------------------------------------------------*/
#newmovie-form {
  display:block;
  position: absolute;
  z-index: 10;
  top: 100px;
  right: 25%;
  width: 200px;
  height: 200px;
  background-color: #aaa;
  border: 1px solid #666;
  border-radius: 6px;
  padding: 16px;
}
#newmovie-form #newmovie-close {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 2rem;
  height: 2rem;
  background-color: black;
  color:white;
  border: 0;
  border-radius:50%;
  padding:2px;
}
/*-----------------------------------------------------------------*/
#debug, #info {
  padding:6px;
  background-color:black;
  font-size:80%;
  font-family: "Andale Mono", "Consolas", "Courier New", "monospace";    
  color:#0f0;
}