/**
 * FILMTIPSET.SE
 * @author Danaco <info@danaco.se>
 */

.unverified { display:block; width:98%; border-radius:3px; text-align:center; padding:6px; background:#ba2d2d; color:#fff; }

h1 { font-size:2.2em; }

.score-big {
  float:right;
  width:70px;
  height:65px;
  color:#fff;
  font-size:0.7em;
  background:#333;
  padding:5px 0 0 0;
  border-radius:50%;
  text-align:center;
  line-height:1.2em;
  margin:-7px 0 0 3px;
}
.score-big .score {
  font-size:3.5em;
  font-weight:bold;
  line-height:1.1em;
}

.score-medium,.score-small {
  float:right;
  width:45px;
  height:40px;
  color:#fff;
  font-size:0.6em;
  background:#999;
  padding:3px 0 0 0;
  border-radius:50%;
  text-align:center;
  line-height:1.6em;
  margin-left:2px;
}
.score-medium .score,.score-small .score {
  font-size:2.7em;
  font-weight:bold;
  line-height:23px;
}

.favourite-toggle { 
  float:right;
  width:45px;
  height:44px;
  box-sizing: border-box;
  color:#fff;
  font-size:2em;
  background:#999;
  padding:9px 0 0 0;
  border-radius:50%;
  text-align:center;
  line-height:26px;
  margin-left:2px;
 }
 .favourite-toggle:hover { cursor:pointer; background:#ba2d2d; }
.favourite-toggle.active { background:#ba2d2d; }

.rating1 { background:#c3a89e; }
.rating2 { background:#e16292; }
.rating3 { background:#edd55e; }
.rating4 { background:#37a4ea; }
.rating5 { background:#63b571; }

.postmeta { display:inline-block; color:#777; border:1px solid #ccc; padding:5px 6px; border-radius:4px; margin:7px 6px 4px 0; }
.postmeta a { color:#777; margin-right:0; }

.movieposter {
  float:left;
  width:180px;
  border-radius:4px;
  margin:0 25px 15px 0;
  border:1px solid #ddd;
}

#moviecontainer { width:calc(100% - 215px);float:left; }

.moviedescription { font-size:1.2em; line-height:1.7em; }

#scorebox, #databox, #friendsbox { float:left; clear:left; width:100%; padding:15px; margin: 10px 1% 0 0; border:1px solid #eee; border-radius: 4px; overflow:auto; }
#scorebox { padding-bottom:12px; }
#scorebox #voting { display:block; clear:right; }
#scorebox h3 { margin: 0 0 5px 0; }
.scoredata { min-width:120px; float:right; margin-top:15px; text-align: center;}

.friendscore { min-width:120px;float:left; text-align:center; }
#moviedata { display:block; clear:both; width:100%; max-width:100%; padding-top:10px;margin:5px; }

#moviedata td {
  padding:0 10px 5px 0;
}
#moviedata .label {
  font-weight:bold;
}
#moviedata a {
  color:#222;
}
#moviedata a:hover {
  color:#111;
}

.votebutton div {
  float:left;
  width:36px;
  height:36px;
  margin:0 4px 0 0;
  padding-top:7px;
  background:#ccc;
  border-radius:50%;
  font-size:1.3em;
  font-weight:bold;
  color:#fff;
  text-align:center;
}
.votebutton.trash div { padding-top:4px; background:#fff; border:1px solid #cecece; color:#999; }
.votebutton.one:hover div, .votebutton.one.active div { background:#c3a89e; }
.votebutton.two:hover div, .votebutton.two.active div { background:#e16292; }
.votebutton.three:hover div, .votebutton.three.active div { background:#edd55e; }
.votebutton.four:hover div, .votebutton.four.active div { background:#37a4ea; }
.votebutton.five:hover div, .votebutton.five.active div { background:#63b571; }
.votebutton.trash:hover div { background:#222; border:1px solid #222; color:#fff; }

.reactbutton {
  float:right;
  font-size:0.9em;
  background:#fff;
  color:#333;
  border:1px solid #444;
  border-radius:4px;
  padding:4px 8px;
  margin: 3px 8px 0 0;
}
.reactbutton:hover {
  background:#333;
  color:#fff;
  border:none;
}

#commentform { display:none;margin-bottom:20px;clear:both; }

.personalComment { width:calc(100% - 120px); float:left; }
.commentcontainer { display:block;clear:both;margin:10px;padding:15px 10px;border-top:1px solid #eee; }
.commentprofile { float:left;font-size:0.8em;margin:5px 5px 15px 0;width:120px;line-height:1.2em; }
.commentprofile strong { font-weight:font-size:0.9em; margin:5px 0; }
.commentprofile i.fa { margin:4px 2px 0 0; font-size:1.1em; }
.commentcontent { width:calc(100% - 140px);float:left; margin-bottom:15px; }
.commentEdit { float:right; margin: 0 0 10px 10px; color:#999; }
.commentEdit:hover { color:#000; border: none !important; }
.commentDelete { float:right; margin: 0 0 10px 10px; color:#999; }
.updateComment { border:0; padding: 5px 10px; cursor:pointer; margin: 0 0 10px 0; }

.commentmeta { font-size:0.7em; }

.relatedmovie { float:left; background-size:cover;width:90px;height:120px;margin:4px; border-radius: 3px; }

.row.movieloop { background:none; padding:15px 8px; }
.row.movieloop p { background:none; clear:both; margin:0 8px 0 2px; }
.similarmovie { display:inline-block; background-color:#fff; width:11.5%; margin:4px 1% 0 0; border-radius: 3px; }

@media all and (max-width:1023px){
  h1 { font-size:1.9em; }
}

@media all and (max-width:980px){
  #moviecontainer { width:100%; }
}

@media all and (max-width:768px){
  .movieposter { width:140px; margin:5px 15px 10px 0; }
  .relatedmovie { width:23%; margin:10px 2% 10px 0; height:130px; }
  .similarmovie { width:23%; }
  .moviedescription { font-size:0.9em; }
}

@media all and (max-width:468px){
  .relatedmovie { width:80px;height:110px; max-width:20% !important; }
}