/* Important, see init_theme in script.php for color scheme specific styles */

/* Global */
body {
  font-family: "Roboto", sans-serif;
  background-color: #222;
  color: #F4F4F4;
  transition: background-color 1s ease;
}
body.light {
  background-color: #F4F4F4;
  color: #222;
}
.btn {
  font-weight: bold;
}

/* Start */
.start_title {
  font-family: 'Pacifico', sans-serif;
}
.start_label, .start_join_button, .start_subtitle {
  font-family: 'Righteous', sans-serif;
}
#start_footer {
  position: fixed;
  bottom: 1em;
  width: 50%;
  margin-left: 25%;
  text-align: center;
}

/* Content */
#message_content_parent {
  /* Fix chat to bottom */
  position: fixed;
  max-height: calc(100vh - 4em);
  bottom: 4em;
  overflow: auto;
  width: 100vw;
  font-size: 1.2em;
  max-width: 100%;
  overflow-x: hidden;
}
.message_face {
  margin-right: 0.1em;
}
.message_pin {
  padding: 0.1em;
  margin-left: 0.1em;
  margin-right: 0.2em;
  font-size: 1em;
  border-style: solid;
  border-width: 1px;
  border-color: #ccc; 
  border-radius: 0.3em;
}
.message_pin:hover {
  cursor: pointer;
}
.message_username, .message_face, .message_pin {
  font-size: 1.2em;
  display: inline-block;
  vertical-align: top;
}
#message_content_parent .message_username {
  font-weight: bold;
  margin-right: 0.2em;
}
#message_content_parent .message_username, #message_content_parent .message_face, #message_content_parent .message_pin {
  text-shadow: 0px 1px 0px rgba(244, 244, 244, 0.2);
}
#message_content_parent.light .message_username, #message_content_parent.light .message_face, #message_content_parent.light .message_pin {
  text-shadow: 0px 2px 2px rgba(34, 34, 34, 0.8);
}
.message_username:after {
  content: ':';
}
.message_message {
  vertical-align: bottom;
}
.system_message {
  width: 33vw;
  margin-left: 33vw;
  text-align: center;
  font-family: 'Righteous', sans-serif;
}
.system_message.start_room, .system_message.archive_room {
  font-weight: bold;
  margin-top: 2em;
  margin-bottom: 2em;
}
.system_message.start_room {
  color: #882D60;
}
.system_message.archive_room {
  color: #980000;
}
.at_username {
  font-weight: bold;
  color: #882D60;
  vertical-align: bottom;
}

/* Pinned */
.pinned {
  position: fixed;
  top: 0;
  right: 1.2em;
  z-index: 10;
}
.pinned .message_face, .pinned .message_username {
  display: none;
}
.pinned .message_youtube, .pinned .message_vimeo, .pinned .message_twitch, .pinned .message_soundcloud, .pinned .message_video {
  width: 420px;
  height: 345px;
}

/* Content */
.message_content {
  max-width: 100vw;
  max-height: 100vh;
}
.message_youtube, .message_vimeo, .message_twitch, .message_video {
  width: 250px;
  height: 200px;
}
.message_soundcloud iframe {
  width: 420px;
  height: 100px;
}
.message_image {
  max-height: 33vh;
}

/* Inputs */
#message_input_parent {
  position: fixed;
  z-index: 20;
  width: 100%;
  max-width: 100vw;
  bottom: 0;
}
#message_input {
  height: 4em;
  background-color: #F4FAFF;
  color: #222;
}

/* Join New */
#toolbar {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.95;
}

/* Mobile */
@media (max-device-width: 736px) {
  .message_pin {
    display: none;
  }
  .system_message {
    width: 70vw;
    margin-left: 15vw;
  }
  #start_footer {
    position: static;
    text-align: center;
    margin-top: 5em;
  }
}

/* Orange Action Bootstrap-Styled Button */
.btn-action {   
  background-color: hsl(44, 100%, 56%) !important; 
  background-repeat: repeat-x; 
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffc31e", endColorstr="#ffc31e"); 
  background-image: -khtml-gradient(linear, left top, left bottom, from(#ffc31e), to(#ffc31e)); 
  background-image: -moz-linear-gradient(top, #ffc31e, #ffc31e); 
  background-image: -ms-linear-gradient(top, #ffc31e, #ffc31e); 
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffc31e), color-stop(100%, #ffc31e)); 
  background-image: -webkit-linear-gradient(top, #ffc31e, #ffc31e); 
  background-image: -o-linear-gradient(top, #ffc31e, #ffc31e); 
  background-image: linear-gradient(#ffc31e, #ffc31e); 
  border-color: #ffc31e #ffc31e hsl(44, 100%, 56%); 
  color: #333 !important; 
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.00); 
  -webkit-font-smoothing: antialiased;
}
.btn-action:hover {
  background-color: hsl(38, 100%, 54%) !important; 
  background-repeat: repeat-x; 
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffa814", endColorstr="#ffa814"); 
  background-image: -khtml-gradient(linear, left top, left bottom, from(#ffa814), to(#ffa814)); 
  background-image: -moz-linear-gradient(top, #ffa814, #ffa814); 
  background-image: -ms-linear-gradient(top, #ffa814, #ffa814); 
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffa814), color-stop(100%, #ffa814)); 
  background-image: -webkit-linear-gradient(top, #ffa814, #ffa814); 
  background-image: -o-linear-gradient(top, #ffa814, #ffa814); 
  background-image: linear-gradient(#ffa814, #ffa814); 
  border-color: #ffa814 #ffa814 hsl(38, 100%, 54%); 
  color: #333 !important; 
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.00); 
  -webkit-font-smoothing: antialiased;
}