zulip/zephyr/static/styles/zephyr.css

body {
    font-family: 'Humbug', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    overflow-y: scroll;
}

/* Common background color */
body, #tab_bar, #tab_bar_underpadding, .message_list, .message_comp {
    background-color: #f8f9f8;
   -webkit-transition: background-color 200ms linear;
   -moz-transition: background-color 200ms linear;
   -o-transition: background-color 200ms linear;
   -ms-transition: background-color 200ms linear;
   transition: background-color 200ms linear;
}

body.narrowed_view, .narrowed_view #tab_bar, .narrowed_view #tab_bar_underpadding, .narrowed_view .message_list {
    background-color: #f0f8ff;
   -webkit-transition: background-color 200ms linear;
   -moz-transition: background-color 200ms linear;
   -o-transition: background-color 200ms linear;
   -ms-transition: background-color 200ms linear;
   transition: background-color 200ms linear;
}


input, button, select, textarea {
    font-family: 'Humbug', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: normal;
}

blockquote p {
    font-weight: normal;
}

a {
    cursor: pointer;
}

.container-fluid {
    max-width: 1230px;
    margin: 0px auto;
    padding-left: 5px;
    padding-right: 5px;
}

#right-sidebar {
    margin-left: 20px;
}

textarea, input {
    font-family: 'Humbug', Helvetica, Arial, sans-serif;
}


/* Override Bootstrap's fixed sizes for various elements */

textarea, label {
    font-size:   inherit;
    line-height: inherit;
}

/* List of text-like input types taken from Bootstrap */
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"]
{
    font-size: inherit;
    height:    1.4em;
}

li, .table th, .table td {
    line-height: inherit;
}

.btn {
    font-size:  inherit;
    height:     auto;
    line-height: 100%;
}

.btn-large {
    font-size: 115%;
}

.navbar .logo {
    display: block;
    font-size: 120%;
    font-weight: 900;
    text-shadow: none;
    color: #ffffff;
    font-variant: small-caps;
    letter-spacing: 2px;
    line-height: 18px;
    padding-top: 10px;
    padding-left: 25px;
    text-decoration: none;
 }

 .navbar .logoimage {
    width: 45px;
    height: auto;
 }

 @media (max-width: 979px) {
    .navbar .logo {
        margin-left: -20px;
    }
}


.navbar .gravatar-profile {
    width: 25px;
    height: 25px;
    background-size: 25px 25px;
    background-repeat: none;
    border-radius: 25px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px 0px rgba(255, 255, 255, 1);
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px 0px rgba(255, 255, 255, 1);
    -moz-mox-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px 0px rgba(255, 255, 255, 1);
    position: absolute;
    left: 5px;
    top: 7px;
}


/* Classes for hiding and showing controls */

.notdisplayed {
    display: none !important;
}

.notvisible {
    visibility: hidden !important;
    width: 0px !important;
    min-width: 0px !important;
    min-height: 0px !important;
    height: 0px !important;
    overflow: hidden !important;
    position: absolute !important;
}

/* Relative positioning */

.position-relative {
    position: relative;
}


/* Lighter strong */

strong {
    font-weight: 600;
}


/* Inline and block code */

code {
    /* 12/14 em, so bootstrap's default 12 px,
       when body is the default 14 px */
    font-size: 0.857em;
}

pre {
    /* 13/14 em, so bootstrap's default 13 px,
       when body is the default 14 px */
    font-size: 0.929em;
    line-height: inherit;
    white-space: pre;
    overflow-x: auto;
    word-wrap: normal;
}

pre code {
    white-space: pre;
}

/* Style inline code inside a link
   to look more like a normal link */
a code {
    color:        #08C;
    border-color: #08C;
}

a:hover code {
    color:        #005580;
    border-color: #005580;
}

.preserve_spaces {
    white-space: pre-wrap;
}

.sidebar-nav {
    padding: 0px 10px 20px 0px;
    margin-top: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
    /* This is a little hacky, but for whatever reason, span2 in a row-fluid
       doesn't consistently take on the right width when it's in an affix, so
       we need to specify a max size. */
    max-width: 200px;
}
@media (max-width: 767px) {
    .sidebar-nav {
        padding: 0.5em;
        margin: 0px;
        border: 1px solid black;
    }
}

#left-sidebar .brand {
    display: table-row;
}

#left-sidebar .gravatar-profile {
    width: 35px;
    height: 35px;
    background-size: 35px 35px;
    background-repeat: none;
    border-radius: 35px;
    border: 1px solid #CCC;
}

#my_information {
    display: table-cell;
    vertical-align: middle;
    padding-left: 0.5em;
}

#my_information .my_fullname {
    font-weight: bold;
    white-space: nowrap;
}
.my_email {
    font-weight: 300;
}


.logout {
    white-space: nowrap;
}

.new_message_button {
    padding-top: 1.1em;
}

.bottom_sidebar {
    margin-top: 1em;
}

#streams_list {
    border-top: 1px solid #eee;

    margin-top: 5px;
    margin-left: 10px;
}

.streams_title {
    font-size: 0.9em;
    font-weight: normal;

    display: inline;
}

#streams_list:hover #streams_inline_cog {
   visibility: visible;
   opacity: 0.5;
}

#streams_list #streams_inline_cog:hover {
   opacity: 1.0;
}

#streams_inline_cog {
    float: right;
    color: #000;
    text-decoration: none;
    visibility: hidden;

    margin-top: 3px;
}

.tooltip {
    max-width: 10em;
}

#stream_filters {
    border-bottom: 1px solid #eee;
    overflow-y: hidden;
    margin: 2px 0px 10px 0px;
    padding: 2px 15px 10px 0;
}

#stream_filters .narrow-filter {
    display: block;
    padding-left: 1.5em;
    position: relative;
    padding-right: 10px;
}

#stream_filters:hover {
    overflow-y: auto;
}

#stream_filters li:hover {
    background-color: #e2e8dd;
}

#stream_filters li.active-subject-filter:hover {
    background-color: #ccd6cc;
}

#user_presences {
    list-style-position: inside; /* Draw the bullets inside our box */
    margin-top:  1em;
    margin-left: 0;
    overflow-y:  hidden;
}
#user_presences:hover {
    overflow-y: auto;
}

#user_presences li:hover {
    background-color: lightgrey;
}

#user_presences .user_sidebar_entry:hover {
    cursor: pointer;
}

#user_presences li {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.user_sidebar_entry .count {
    display: none;
}

#user_presences li.user_active {
    list-style-image: url(/static/images/presence/user-active.png);
}

#user_presences li.user_away {
    list-style-image: url(/static/images/presence/user-away.png);
}

#user_presences li.user_idle {
    list-style-image: url(/static/images/presence/user-idle.png);
}

#user_presences .arrow {
    font-size: 1em;
    width: 2em;
}
#user_presences .arrow-real {
    display: none;
}
#user_presences li:hover .arrow-real {
    display: inline;
    cursor: pointer;
}

#user_presences a {
    color: #333;
}

#invite-user-link i {
    text-decoration: none;
    margin-right: 5px;
}

ul.filters {
    list-style-type: none;
    padding-right: 1em;
}

ul.filters a {
    color: #333;
}

ul.filters hr {
    margin-top: 10px;
    margin-bottom: 10px;
}

li.active-filter, li.active-subject-filter {
    font-weight: bold;
    background: #ccd6cc;
    position: relative;
}

li.active-filter:after, li.active-subject-filter:after {
    content: "";
    position: absolute;
    top: 50%;
    right: -6px;
    margin-top: -6px;
    display: block;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #ccd6cc;
}

li.hidden-filter {
    visibility: hidden;
    display: none;
}

ul.filters {
    margin-left: 9px;
}

ul.filters .count {
    margin-left: 0.5em;
    display: none;

}

ul.filters i {
    padding-right: 0.25em;
}

ul.filters .arrow {
    position: absolute;
    right: 0px;
    top: 2px;
    font-size: 0.8em;
    display: none;
}

ul.filters li:hover .arrow {
    display: inline;
    cursor: pointer;
    color: #888;
}

ul.filters li .arrow:hover {
    display: inline;
    cursor: pointer;
    color: #000;
}

ul.filters li.out_of_home_view {
    opacity: 0.25;
}

.message_list {
    padding-left: 4px;
}

.message_area_padder {
    margin-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
    /* This is needed for the floating recipient bar
     in Firefox only, for some reason; otherwise it gets
     a scrollbar */
    overflow: visible;
}


.message_comp {
    display: none;
}

.message_comp,
#compose_controls {
    border: 1px solid #EEE;
    background-color: white;
    padding: 8px 20px 8px 10px;
    box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.3);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

#compose_buttons {
    text-align: center;
}

@media (max-width: 480px) {
    .compose_stream_button_label, .compose_private_button_label {
        display: none;
    }
}

td.pointer {
    vertical-align: top;
    padding-top: 10px;
    background-color: #fff;
}

.selected_message .messagebox, .selected_message .message_data {
    background-color: #f7f7f7;
}

.selected_message .inline_profile_picture {
    border-color: #AAA;
}

.selected_message.private-message .inline_profile_picture {
    border-color: #AAA;
}

.selected_message .info {
    visibility: visible;
}


.private-message .messagebox {
background-color: #feffe0;
}

.selected_message.private-message .message_data, .selected_message.private-message .messagebox {
    background-color: #feffcc;
}

.new_messages {
    background-color: lightblue;
}

.new_messages, .new_messages_fadeout {
    -webkit-transition: all 3s ease-in-out;
    -moz-transition: all 3s ease-in-out;
    -o-transition: all 3s ease-in-out;
    transition: all 3s ease-in-out;
}

.selected_message .pointer, .selected_message.mention .pointer {
    background-color: #1f2170;
}

.private-message.selected_message .pointer {
    background-color: #1f2170;
}


/* Adjust certain message elements so they still
   stand out against the grey background */

.selected_message pre {
    background-color: white;
}

.selected_message code {
    background-color: white;
}

.selected_message blockquote {
    border-left-color: #BBB;
}

.message_time {
    position: absolute;
    right: -26px;
    top: 7px;
    display: inline-block;
    font-weight: normal;
    font-size: 75%;
    line-height: 100%;
    color: #999;
}

.message_controls {
    display: inline-block;
    position: absolute;
    top: 2px;
    right: -63px;
}

.message_data {
    vertical-align: top;
    text-align: left;
    padding: 0px;
    background-color: #fff;
    position: relative;
}

.include-sender .message_time {
    top: 7px;
}

.ztable_layout_row {
    visibility: collapse;
}

.ztable_col1 {    /* colorblock */
    width: 8px;
}

.ztable_col2 {    /* messagebody */
    width: 100%;
}

.ztable_comp_col1 {
    width: 40px;
}

.ztable_comp_col2 {
    width: 100%;
}

.message_header {
    vertical-align: middle;
    text-align:     left;

    /* We can overflow-y if the font size gets big */
    overflow:       hidden;
    text-overflow:  ellipsis;
    white-space:    nowrap;
    font-weight:    600;
    line-height:    14px;
    padding:        3px 0px 2px 5px;
    border-radius:  0px 3px 0px 0px;
    background: rgb(220,220,220); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(220,220,220,1) 0%, rgba(230,230,230,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(220,220,220,1)), color-stop(100%,rgba(230,230,230,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(230,230,230,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(230,230,230,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(230,230,230,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(220,220,220,1) 0%,rgba(230,230,230,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcdcdc', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */
    border-bottom: 1px solid #d2eee7;
    /* box-shadow: 0px 2px 3px #ccc; */
    border-top: 1px solid #c1dbd5;
    border-right: 1px solid #c1dbd5;
}

.message_header .icon-vector-narrow {
    font-size: 0.6em;
    position: relative;
    top: -1px;
}

.message_header_colorblock {
    border-radius: 3px 0px 0px 0px;
    /* box-shadow: 0px 2px 3px #ccc; */
    border-top: 1px solid #c1dbd5;
    border-left: 1px solid #c1dbd5;
    border-bottom: 1px solid #d2eee7;
}

.last_message .messagebox {
    height: 3px;
    border-radius: 0px 0px 3px 0px;
    border: 1px solid #c1dbd5;
    border-top: none;
    border-left: none;
}

.last_message .messagebox_colorblock {
    border-radius: 0px 0px 0px 3px;
    border: 1px solid #c1dbd5;
    border-top: none;
    border-right: none;
}


.floating_recipient .message_header, .floating_recipient .message_header_colorblock {
    box-shadow: none;
    border-bottom: 1px solid #d2eee7;
}

.compose_table .message_header.message_header_private_message, .message_header_private_message {
    background-image: none;
    background-color: #444444;
}

.compose_table .message_header {
    background: none;
    background-color: #ececec;
    border: none;
    border-radius: 0px;
}

.selected_message .messagebox_colorblock {
    box-shadow: inset -12px 0px 0px -1px rgba(40,40,40,0.5);
}

.selected_message .messagebox_colorblock.message_header_private_message {
    box-shadow: inset -12px 0px 0px -1px rgba(240,240,240,0.5);
}

.pointer_icon {
    width: 100%;
    text-align: center;
    display: none;
    color: #fff;
}

.selected_message .pointer_icon {
    display: inline-block;
}

.mention .messagebox {
    background-color: #ffe4e0;
}

.unread .messagebox .message_top_line {
    position: relative;
}

.unread .messagebox .message_top_line:before {
    content: "";
    position: absolute;
    top: 0px;
    left: -7px;
    border-width: 8px 8px 0px 0;
    border-style: solid;
    border-color: #db1f1f transparent;
}

.include-sender.unread .messagebox .message_top_line:before {
    top: -7px;
}

.selected_message.mention .messagebox, .selected_message.mention .message_data {
    background-color: #FFE0DC;
}

.selected_message.private-message.mention .messagebox, .selected_message.private-message.mention .message_data {
    background-color: #FFE0DC;
}

.message_sender {
    height: 0px;
    vertical-align: top;
    position: relative;
}

.sender_name {
    color: #333;
    display: inline-block;
    font-weight: bold;
    vertical-align: top;
    position: relative;
    top: -2px;
}

.sender_name_hovered .sender_name {
    color: #0088CC;
}

.sender_name_hovered .inline_profile_picture {
    border-color: #0088CC;
}

.actions_hover:hover {
    color: #0088CC;
}

.message_label_clickable:hover {
    cursor: pointer;
    color: #08C;
}

.edit_subject {
    opacity: .7;
}

.edit_subject:hover {
    cursor: pointer;
    opacity: 1.0;
}

/* Brighten text because of the dark background */
.dark_background {
    color: #ffffff;
}

.dark_background .message_label_clickable:hover {
    color: #3BF;
}

.message_top_line {
    position: relative;
}

.message-right {
    float: right;
}

.small {
    font-size: 80%;
}

.tiny {
    font-size: 60%;
}

.actions_hovered .message_time, .actions_hovered .info {
    color: #0088CC;
    cursor: pointer;
}

.message_hovered .info {
    visibility: visible;
}

.actions_hovered .actions_link {
    text-decoration: underline;
}

table.message_table {
    table-layout: fixed;
    border-collapse: separate;
    margin-left: auto;
    display: none;
    width: 100%;
}

table.compose_table {
    table-layout: fixed;
    margin-left: auto;
    width: 100%;
}

table.focused_table {
    display: table;
}

.include-sender .message_content {
    margin-top: -8px;
}

.message_content {
    line-height: 18px;
    padding-left: 35px;
}
@media (max-width: 480px) {
    .message_content {
        margin-right: 5px;
    }
}

.message_content.condensed {
    max-height: 8.5em;
    overflow: hidden;
}
.message_content.collapsed {
    max-height: 0em;
    overflow: hidden;
}

.message_length_controller {
    display: none;
    text-align: center;
    color: #0088CC;

    /* to match .message_content */
    margin-left: 5px;
    margin-right: 35px;
}

.message_length_controller:hover {
    text-decoration: underline;
}

blockquote {
    margin-bottom: 6px;
}

blockquote p {
    line-height: inherit;
    font-size:   inherit;
}

.messagebox {
    padding: 7px 70px 0px 7px;
    background-color: #fff;
    word-wrap: break-word;
    cursor: pointer;
    vertical-align: top;
    border-right: 1px solid #c1dbd5;
    border-left: none;
}

.messagebox_colorblock {
    border-left: 1px solid #c1dbd5;
}

.messagebox p {
    margin: 3px 0px 3px 0px;
}

.messagebox blockquote {
    padding-left: 5px;
    margin-left: 10px;
}

#send_message_form {
    margin: 0px;
}

#send_message_form .messagebox {
    /* normally 5px 14px; pull in the right and bottom a bit */
    padding-right: 5px;
    padding-bottom: 0px;
    border-top-width: 1px;
    cursor: default;
}

#enter-sends-label {
    margin-bottom: 0px;
    margin-top: 2px;
}

#send_message_form .message_content {
    display: table-row;
    margin-right: 0px;
}

#compose-send-button {
    height: 31px; /* Same as height of compose textarea. */
}

#below-compose-content {
    display: table-row;
    font-size: 80%;
    white-space: nowrap;
    padding-top: 6px;
}

.bookend {
    padding-top: 10px;
    background-color: transparent;
}

.prev_is_same_sender.messagebox {
    padding-top: 0px;
}

.prev_is_same_sender.message_data {
    padding-top: 0px;
}

.next_is_same_sender {
    border-bottom: 0px;
    padding-bottom: 0px;
}

.profile_picture {
    display: block;
    float: right;
    margin-top: 5px;
    max-height: 15px;
    width:  15px;
    height: 15px;
    cursor: pointer;
    border-radius: 30px;
   -moz-box-shadow:     1px 1px 1px #777 inset;
   -webkit-box-shadow:  1px 1px 1px #777 inset;
    box-shadow:         1px 1px 1px #777 inset;
    background-size: 15px 15px;
}

.inline_profile_picture {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-right: 5px;
    background-size: 25px 25px;
    border-radius: 25px;
    border: 1px solid #CCC;
    vertical-align: top;
    position: relative;
    left: -1px;
}

#compose {
    position: fixed;
    bottom: 0px;
    background: white;
    z-index: 1;
}

#compose_close {
    display: none;
    position: absolute;
    right: 5px;
    top: 10px;
}

/* Like .nav-tabs > li > a */
#send-status {
    width: 90%;
    padding: 8px 14px 8px 14px;
    line-height: 20px;
    display: none;
}

/* Like .alert .close */
.send-status-close {
    font-size:   17px;
    font-weight: bold;
    color:       black;
    text-shadow: 0 1px 0 white;
    opacity:     .2;
    filter:      alpha(opacity=20);
    float:       right;
}

.send-status-close:hover {
    cursor:  pointer;
    opacity: .4;
    filter:  alpha(opacity=40);
}

.home-error-bar {
    margin-top: 5px;
    display: none;
}

#connection-error {
    font-size: 13px;
}

.streamname {
    font-weight: bold;
}

.home-error-bar .alert {
    margin-bottom: auto;
}

textarea.new_message_textarea {
    display: table-cell;
    width: 99%;
    height: 1.5em;
    max-height: 11em;
    margin-bottom: 0px;
    resize: none;
}

input.recipient_box {
    margin-bottom: 0px;
    margin-top: 0px;
}

#stream.recipient_box {
    width: 20%;
}
#subject.recipient_box {
    width: 15%;
}
#private_message_recipient.recipient_box {
    width: 72%;
}

#left-of-compose {
    vertical-align: top;
    padding-top: 3px;
}

#send_controls {
    display: table-cell;
    vertical-align: bottom;
    padding-left: 15px;
    /* jQuery's slideDown() animation seems to compute the target height by
       drawing these elements in an (offscreen) context where they would reflow
       onto multiple lines.  We need to prevent that in order to avoid an
       animation glitch.  See: http://is.gd/EVJFZ8 */
    white-space: nowrap;
    /* This white-space nowrap is also critical for making sure that the
       button doesn't get smushed as the textarea expands; clearly the
       button is taking up more than the 1% width specified below. */
    width: 1%;
}

#navbar-spacer {
    /* A spacer that is exactly a navbar size, so that all content
    gets pushed unerneath it */
    width: 100%;
    height: 40px;
}

#navbar-middle {
    padding-left: 5px;
    padding-right: 10px;
}

.brand.skinny-user-gravatar {
    display: table-cell;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    white-space: nowrap;
}

#searchbox {
    width: 100%;
    padding-right: 30px;
}

#tab_bar {
    position: fixed;
    top: 41px;
    z-index: 2;
    padding-top: 0px;
    padding-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#tab_list {
    list-style: none;
    height: 20px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 5px;
    border: none;
    white-space: nowrap;
}

#tab_list li {
   white-space: nowrap;
   list-style-type: none;
   display: inline-block;
   position: relative;
   font-weight: 600;
   background-color: #f9f9f9;
   margin: 0px;
   padding: 0px;
   border-radius: 0px 0px 3px 3px;
   border-left: 10px solid;
   background: -moz-linear-gradient(top, rgba(220,220,220,1) 0%, rgba(230,230,230,1) 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(220,220,220,1)), color-stop(100%,rgba(230,230,230,1))); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(230,230,230,1) 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(230,230,230,1) 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(230,230,230,1) 100%); /* IE10+ */
   background: linear-gradient(to bottom, rgba(220,220,220,1) 0%,rgba(230,230,230,1) 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcdcdc', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */
   border-bottom: 1px solid;
   border-right: 1px solid;
   text-overflow: ellipsis;
}

#tab_list li.narrow_spacer {
   margin: 0px;
   padding: 0px 0px 0px 1px;
   min-width: 0px;
   text-shadow: 0px 1px 0px #fff;
   border: none;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
   background: none;
}

#tab_list li.private_message {
    border-color: #444;
}

#tab_list a {
    text-decoration: none;
    color: inherit;
    border-color: inherit;
    height: 15px;
    width: 100%;
    min-width: 80px;
    display: inline-block;
    padding: 3px 9px 6px 8px;
}

#tab_list li.active {
    padding: 3px 9px 6px 8px;
    height: 15px;
    min-width: 80px;
}

#tab_list .root {
    border-color: #7dcbff;
    margin: 0px;
}

#tab_bar_underpadding {
    position: fixed;
    z-index: 10;
    top: 74px;
    background-color: #FFF;
    height: 0px;
}

.navbar-top {
    background: rgb(172,197,193); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(172,197,193,1) 0%, rgba(220,241,234,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(172,197,193,1)), color-stop(100%,rgba(220,241,234,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(172,197,193,1) 0%,rgba(220,241,234,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(172,197,193,1) 0%,rgba(220,241,234,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(172,197,193,1) 0%,rgba(220,241,234,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(172,197,193,1) 0%,rgba(220,241,234,1) 100%); /* W3C */

    background-image: url(/static/images/backgrounds/header.jpg);
    background-size: 180px 180px;

    border-bottom: 1px solid #314945;

    position: relative;
}


#navbar-buttons {
    white-space: nowrap;
    position: absolute;
    right: 0px;
    top: 2px;
}

#navbar-buttons ul.nav {
    margin: 0px;
    /* Firefox-specific hack; Technically white-space: nowrap applies to
       text, not "stuff in general", so in Firefox without this, the
       <li>s all get smushed vertically (in Chrome and Safari, they
       don't).
       Fortunately, Firefox also provides this nice 'max-content'
       thing which is basically 'give us as much space as we need'. */
    width: -moz-max-content;
}

#navbar-buttons ul.nav .dropdown-toggle {
    font-size: 18px;
    margin-top: 4px;
    color: #87cbc0;
    text-shadow: none;
    padding-left: 0px !important;
}

#navbar-buttons ul.nav li.dropdown.open .dropdown-toggle {
    background: none;
    color: #fff;
    text-shadow: none;
}

#searchbox .input-append {
    position: relative;
    width: 100%;
}

#searchbox .input-append .icon-vector-search {
    padding: 0px;
    position: absolute;
    left: 11px;
    top:8px; 
    z-index:5;
}

#searchbox_form {
    width: 100%;
}

#search_query {
    width:       100%;
    font-size:   1em;
    line-height: 20px;
    padding: 0px;
    color: #222;
    height: 27px;
    min-height: 27px;
    border-radius: 3px;
    box-shadow: none;
    margin-left: 5px;
    margin-top: 1px;
    margin-bottom: 2px;
    padding-left: 25px;
    padding-right: 20px;
    background: -moz-linear-gradient(top, rgba(14,70,67,0.2) 0%, rgba(14,83,68,0.2) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(14,70,67,0.2)), color-stop(100%,rgba(14,83,68,0.2))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(14,70,67,0.2) 0%,rgba(14,83,68,0.2) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(14,70,67,0.2) 0%,rgba(14,83,68,0.2) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(14,70,67,0.2) 0%,rgba(14,83,68,0.2) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(14,70,67,0.2) 0%,rgba(14,83,68,0.2) 100%); /* W3C */
    background: rgb(255,255,255); /* Old browsers */
    border: none;
    border-top: 1px solid #777;
    border-left: 1px solid #777;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.7);
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.7);
    -moz-mox-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.7);
    font-family: 'Humbug';
}


#search_query:focus {
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.7), 0px 0px 8px rgba(255,255,255, 0.3);
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.7), 0px 0px 8px rgba(255,255,255, 0.3);
    -moz-mox-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.7), 0px 0px 8px rgba(255,255,255, 0.3);
}

#searchbox .search_button, #searchbox .search_button[disabled]:hover {
    position: absolute;
    right: 0px;
    top: 0px;
    background: none;
    border-radius: 0px;
    border: none;
    height: 30px;
    text-align: center;
    padding: 4px;
    color: #ccc;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    text-shadow: none;
    z-index:5;
}

#searchbox .search_button:hover {
    color: #000;
}

#searchbox .search_button[disabled] {
    visibility: hidden;
}

@media (max-width: 767px) {

    #search_query {
        width: 100%;
        margin-left: 40px;
    }

    #navbar-middle {
        padding-right: 75px;
    }

    #searchbox .input-append .icon-vector-search {
        left: 46px;
    }

    #searchbox .search_button, #searchbox .search_button[disabled]:hover {
        right: -35px;
    }

}

.highlight {
    background-color: #FCEA81;
}

.highlight_text_inserted {
    background-color: #E6EDFF;
}

.highlight_text_deleted {
    background-color: #FFE6E6;
}

.highlight_text_replaced {
    background-color: #F5E6FF;
}

#search_arrows {
    margin-bottom: 5px;

    /* Bootstrap wants font-size: 0 to eliminate space between
       the buttons.  We need to inherit the font size, so we
       remove the button gap by adjusting "letter" spacing. */
    font-size: 90%;
    letter-spacing: -.3em;
}

#search_arrows input {
    /* Chrome and Firefox do this already via default browser stylesheet;
       but Opera needs this to avoid smushed letters in the search box. */
    letter-spacing: normal;
}


#floating_recipient_bar {
    position: fixed;
    /* .message_list max-width */
    text-decoration: none;
    top: 60px; /* should really be the same as the height of navbar-spacer + height of the tab bar*/
    visibility: hidden; /* so that we pass clicks through to underneath us */
    /* If zhome has opacity on it, it suddenly starts getting drawn on top
       of top_statusbar -- unless we specify a z-index.  */
    z-index: 2;
}

table.floating_recipient {
    table-layout: fixed;
    border-collapse: separate;
    margin-left: auto;
    width: 100%;
}

#bottom_whitespace {
  display: block;
  height: 300px;
}

#home-error {
    display: none;
}

.loading_indicator_spinner {
    /* If you change these, make sure to adjust the constants in
     * make_loading_indicator as well */
    height: 38px;
    width: 38px;
    float: left;
}

.loading_indicator_text {
    /* If you change these, make sure to adjust the constants in
     * make_loading_indicator as well */
    margin-left: 20px;
    font-size:   33px;
    font-weight: bold;
    line-height: 38px;
}

.message_inline_image {
    margin-bottom: 5px;
    margin-left: 5px;
    height: 100px;
}

.message_inline_image img {
    height: 100%;
}

.popover {
    width: auto;
}

.popover-title {
    overflow-x: hidden;
    text-overflow: ellipsis;
    text-align: center;

    font-size:   inherit;
    line-height: inherit;
}

.popover-title:empty {
    display: none;
}

.popover_info {
    text-align: center;
}

.popover hr {
    margin-top:    5px;
    margin-bottom: 5px;
}

.hotkeys_table {
    float: left;
    width: 245px;
    margin-right: 10px;
    font-size: 90%;
}

.hotkeys_table .hotkey {
    text-align: right;
    font-weight: bold;
}

#loading_more_messages_indicator {
    margin: 10px;
}

#loading_more_messages_indicator_box_container {
    position: absolute;
    left: 50%;
}

#loading_more_messages_indicator_box {
    position: relative;
    left: -50%;
    top: 25px;
    border: 1px rgb(100, 100, 100) solid;
    background-color: rgba(230, 230, 230, 0.8);
    z-index: 1;
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
}

#page_loading_indicator {
    margin: 10px auto;
}

#subs_page_loading_indicator {
    margin: 10px auto;
}

.subscriber_list_loading_indicator {
    margin: 10px auto;
}

.table-striped thead th {
    background-color: #444;
    color: white;
}


#fmt_help_table {
    table-layout: fixed;
}

.subscription_table_elem {
    padding: 2px;
    line-height: 25px;
}

.subscription_header.active {
    border-color: rgba(82, 168, 236, 0.8);
    cursor: pointer;

  -webkit-box-shadow: inset 0 0 0 1px rgba(82, 168, 236, 0.8), 0 0 8px rgba(82, 168, 236, 0.6);
     -moz-box-shadow: inset 0 0 0 1px rgba(82, 168, 236, 0.8), 0 0 8px rgba(82, 168, 236, 0.6);
          box-shadow: inset 0 0 0 1px rgba(82, 168, 236, 0.8), 0 0 8px rgba(82, 168, 236, 0.6);
}

.color_swatch {
    display: inline-block;
    height: 1em;
    width: 1em;
    border: 1px #666 solid;
    padding: 0;
    margin: 0 0 0 5px;
    vertical-align: middle;
}

#subscriptions_table .subscription_block {
    padding-left: 0.5em;
    vertical-align: middle;
    display: inline-block;
    line-height: 14px;
    height: 16px;
}

#stream_filters .subscription_block {
    padding-bottom: 4px;
    display: inline-block;
    line-height: 12px;
    width: 100%;
    padding-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#stream_filters .subscription_block .icon-lock {
    display: inline-block;
    vertical-align: middle;
    margin-top: 0px;
    margin-left: 3px;
    position: absolute;
    top: 2px;
}

.subscription_settings {
    margin-left: 35px;
    margin-right: 35px;
    clear: right;
}

.subscription_settings form {
    margin: 0;
}

.subscription_settings ul {
    list-style-type: none;
}

.subscriber_list_settings {
    margin-top: 10px;
}

.sub_setting_control[type="checkbox"] {
    margin: 0 30px 5px 20px;
}

.streams_popover .sp-container {
    background: white;
    cursor: pointer;
    border: none;
}

.streams_popover .sp-palette-container {
    border-right: none;
}

.streams_popover .colorpicker-container {
    display: inline-block;
    margin-right: 10px;
}

.sub_setting_control {
    display: inline-block;
    margin-right: 10px;
}

.sub_unsub_button {
    min-width: 140px;
    float: right;
}

.sub_arrow {
    float: right;
    padding: 0 5px 0 10px;
}

#create_stream_row td {
    background-color: #f3f3f3;
    border-color: #BBB;
    border-bottom: 1px solid #BBB;
}

#create_stream_name {
    margin-left: 25px;
    width: 220px;
}
@media (max-width: 480px) {
    #create_stream_name {
        width: 130px;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    #create_stream_name {
        width: 140px;
    }
}

#create_stream_button {
    min-width: 140px;
    float: right;
}

.sub_settings_title {
    line-height: 30px;
    margin: 10px 0;
    font-weight: bold;
}

.settings_committed {
    margin: 10px;
}

.subscriber_list_container {
    max-height: 200px;
    overflow: auto;
    margin-top: 10px;
    clear: right;
}

.subscriber_list_add {
    float: right;
}

.modal {
    overflow: hidden;
    margin-top: 0;
    top: 5%;
    outline: 0; /* Bootstrap uses tabindex=-1 on modals for focus and ESC handling,
                   so avoid the outline it causes */
}

.modal-body {
    max-height: 60vh;
}

.modal form {
    margin-bottom: 0px;
}

#invitee_emails {
    min-height: 40px;
    max-height: 300px;
}

#invite_status {
    display: none;
}

@media (max-width: 480px) {
    body {
        padding-right: 5px;
        padding-left: 5px;
    }
}

#settings-dropdown {
    padding: 5px;
    font-size: 175%;
}

#notifications-area {
    position: fixed;
    bottom: 0px;
    right: 20px;
    width: 200px;
    height: 35px;
}

#notifications-bar {
    z-index: 9000;
    position: absolute;
    bottom: 0px; /* necessary to get slideUp, slideDown directions correct */
    width: 100%;
    height: 100%;
    border-radius: 10px 10px 0px 0px;
    padding: 10px 0px 0px 10px;
    background: #58F;
    color: white;
    font-size: 125%;
    cursor: default;
    display: none;
    /* For now, cut off long messages (but we should find a better solution) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.empty_feed_notice {
    padding: 3em 4em;
    display: none;
}

.empty_feed_notice h4 {
    text-align: center;
}

#empty_narrow_message p {
    text-align: center;
}

.message_reply_fade {
    opacity: .4;
}

.message_reply_fade_narrowed {
    opacity: .4;
}

#stream-message, #private-message {
    display: none;
}

.emoji {
    height: 1.4em;
    width: 1.4em;
}

#sending-indicator {
    float: left;
    font-weight: bold;
    display: none;
}

.streamlist_swatch {
    display: block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    border-radius: 1em;
    float: left;
    position: absolute;
    left: 1px;
    top: 3px;
}

ul.expanded_subjects {
    list-style-type: none;
    font-weight: normal;
    margin-left: 0px;
}

li.expanded_subject {
    margin-left: .3em;
}

li.expanded_subject .subject_box {
    display: inline-block;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.twitter-tweet {
    border: 1px solid #ddd;
    padding: .5em .75em;
    margin-bottom: 0.25em;
}

.twitter-avatar {
    float: left;
    width: 48px;
    height: 48px;
    margin-right: .75em;
}

.star {
    display: inline-block;
    opacity: 1;
    font-size: 16px;
    color: #2c8211;
}

.empty-star {
    color: #CCC;
}

.empty-star:hover {
    cursor: pointer;
    color: #565656;
}

.info {
    display: inline-block;
    font-size: 16px;
    color: #CCC;
}

.star:hover {
    cursor:  pointer;
    color: #0d7245;
}

.empty_feed_notice p {
    text-align: center;
}

.settings_separator {
    margin-top:    2em;
    margin-bottom: 2em;
}

/* FIXME: Combine this rule with the one in portico.css somehow? */
#pw_strength {
    /* Same width as a Bootstrap default text <input> with padding */
    width: 220px;
}

/* Override padding-top on form labels when they label only text */
.form-horizontal .label_for_text {
    padding-top: 0;
}

#pw_change_controls {
    display: none;
}

.humbug-icon-star {
    background-position: -121px 0 !important;
    padding-right: 0.09em !important; /* Alignment hack to line up with other icons */
}

.sub-unsub-message, .date_row {
    text-align: center;
    padding-bottom: 10px; /* same as .bookend */
}

.date_row span{
    display: block;
    background: inherit;
    padding: 4px;
    overflow: hidden;
    text-transform: uppercase;
    font-size: 0.8em;
    color: #bbb;
    text-shadow: 1px 1px 0px #fff;
}

.date_row span:before,
.date_row span:after{
    display: inline-block;
    position: relative;
    content: " ";
    vertical-align: middle;
    width: 50%;
    height: 0px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #fff;
}

.date_row span:before{
    right: 0.5em;
    margin-left: -50%;
}

.date_row span:after{
    left: 0.5em;
    margin-right: -50%;
}

#restore-draft {
    float: left;
    display: none;
    margin-right: 1em;
}

#restore-draft:hover {
    cursor:  pointer;
}

#compose a.message-control-button {
    display: block;
    color: #777;
    text-decoration: none;
    font-size: 14px;
    width: 14px;
    height: 14px;
    margin-right: 5px;
    border-radius: 2px;
    text-align: center;
    float: right;
}

#compose a.message-control-button:hover {
    color: #000;
}

#stream_filters {
    font-weight: normal;
}

#stream_filters .inactive_stream {
    opacity: .5;
}

#bots_list {
    display: none;
    font-size: 90%;
    list-style-type: none;
    width: 550px;
    margin-left: 0px;
}

#bots_list .image, 
#bots_list .bot_info {
    display: inline-block;
    margin: 10px;
}

#bots_list .image {
    vertical-align: top;
}

#bots_list .name {
    font-weight: bold;
    font-size: 130%;
}

#bots_list .field:after {
    content: ':';
}

.bot_info .field {
    width: 7em;
    display: inline-block;
}

#create_bot_form .control-label {
    width: 10em;
    text-align: left;
    margin-right: 3px;
}

#create_bot_button {
    margin-left: 24em;
}

#bot_avatar_clear_button {
    display: none;
}

#create_bot_name {
    width: 20em;
}

#create_bot_short_name {
    width: 7em;
}

.bot_name_header {
    width: 8em;
}

#bots_list img.avatar {
    height: 35px;
    width: 35px;
}

#bots_list .email .value,
#bots_list .api_key .value {
    font-family: monospace;
    font-size: 85%;
}

#onboarding-header {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}
#onboarding-checklist {
    font-size: 14px;
    border: 1px solid #ddd;
    background-color: #F7F7F7;
    padding: 10px;
}
#onboarding {
    display: none;
}

.onboarding_success {
    font-size: 40px;
    color: #00CC00;
    text-align: center;
}

#sticky-popover h1 {
    text-align: center;
}
.done-button {
    text-align: center;
}
.sticky-popover-inner {
    max-width: 300px;
}
.sticky-popover-inner p {
    padding-bottom: 5px;
}

#feedback_section {
    text-align: center;
    padding-bottom: 10px;
}

.message_edit {
    display: none;
}

/* Reduce some of the heavy padding from Bootstrap. */
#message_edit_form .edit-control-label {
    width: auto;
    float: left;
}
#message_edit_form .edit-controls {
    margin-left: 50px;
}
#message_edit_form textarea {
    width: 90%;
    min-width: 206px;
}

.message_edit_notice {
    font-size: 11px;
}

.message_body_gravatar {
    width: 20px;
    height: 20px;
    margin: 2px 2px 2px 0px;
    border: 1px solid #000;
}

.user-mention {
    background-color: #eee;
    border-radius: 3px;
    padding: 0 0.2em;
    border: 1px solid #ccc;
    white-space: nowrap;
    background-image: -moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(100%,rgba(0,0,0,0)));
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%);
    background-image: -o-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%);
    background-image: -ms-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%);
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%);
    display: inline-block;
    margin-bottom: 1px;
}

.user-mention-me {
    background-color: #c9fcc1;
}

#notification-settings .control-group {
    margin-bottom: 5px;
}

#notification-settings .control-label {
    width: 280px;
    text-align: left;
}

#pin_info_question {
    padding-left: 3px;
}
#pin_info_question:hover {
    cursor:  pointer;
}

.zero_count {
    display: none;
}

.message-pane {
    padding-left: 0.3em;
}

.screen {
    position: absolute;
    left: 0;
    top: 0;
    background: #000;
    z-index: 20000;
}

.tutorial-popover {
    width: 200px;
}

#tutorial-stream {
    width: 250px;
}

#tutorial-subject {
    width: 250px;
}
.tutorial-done-button {
    text-align: right;
}

#onboarding-checklist i {
    margin-right: 0.25em;
}