/*

YShout HTML Structure:

<div id="yshout">
    <div id="ys-before-posts"></div>
    <div id="ys-posts>

        <div id="ys-post-1" class="ys-post ys-first [ys-admin-post] [ys-banned-post]">
            <span class="ys-post-timestamp">12:56</span>
            <span class="ys-post-nickname">Yurivish:<span>
            <span class="ys-post-message">Hey!</span>
            <span class="ys-post-info ys-info-[inline|overlay]">
                <em>IP:</em> 127.0.0.1
                <em>Posted:</em> Sunday Apr. 29, 2007 at 12:56.
            </span>
            <span class="ys-post-actions">
                <a title="Show post information" class="ys-info-link" href="#">Info</a> |
                <a title="Delete post" class="ys-delete-link" href="#">Delete</a> |
                <a title="Ban Yurivish" class="ys-ban-link" href="#">Ban</a>
            </span>
        </div>

        <div id="ys-post-2" class="ys-post [ys-admin-post] [ys-banned-post]">
            <span class="ys-post-timestamp">12:57</span>
            <span class="ys-post-nickname>Travis:<span>
            <span class="ys-post-message>Hello.</span>
            <span class="ys-post-info ys-info-[inline|overlay]">
                <em>IP:</em> 127.0.0.2
                <em>Posted:</em> Sunday Apr. 29, 2007 at 12:57.
            </span>
            <span class="ys-post-actions">
                <a title="Show post information" class="ys-info-link" href="#">Info</a> |
                <a title="Delete post" class="ys-delete-link" href="#">Delete</a> |
                <a title="Ban Travis" class="ys-ban-link" href="#">Ban</a>
            </span>
        </div>

        <div id="ys-post-3" class="ys-post ys-last [ys-admin-post] [ys-banned-post]">
            <span class="ys-post-timestamp">12:57</span>
            <span class="ys-post-nickname>Yurivish:<span>
            <span class="ys-post-message>Yup...</span>
            <span class="ys-post-info ys-info-[inline|overlay]">
                <em>IP:</em> 127.0.0.1
                <em>Posted:</em> Sunday Apr. 29, 2007 at 12:57.
            </span>
            <span class="ys-post-actions">
                <a title="Show post information" class="ys-info-link" href="#">Info</a> |
                <a title="Delete post" class="ys-delete-link" href="#">Delete</a> |
                <a title="Ban Yurivish" class="ys-ban-link" href="#">Ban</a>
            </span>
        </div>
    </div>
    <div id="ys-after-posts"></div>

    <div id="ys-before-post-form"></div>
    <div id="ys-post-form">
        <form id="ys-post-form>
            <fieldset>
                <input id="ys-input-nickname" value="Nickname" type="text" accesskey="N" maxlength="25" class="[ys-before-focus|ys-after-focus]" />
                <input id="ys-input-message" value="Message Text" type="text" accesskey="M" maxlength="175" class="[ys-before-focus|ys-after-focus]" />
                <input id="ys-input-submit" value="Shout!" accesskey="S" type="submit" />
                <br><a title="[View YShout History|Open Admin CP]" class="ys-post-form-link" id="[ys-history-link|ys-cp-link]" href="[history/|cp/]">[View History|Admin CP]</a>
            </fieldset>
        </form>
    </div>
    <div id="ys-after-post-form"></div>
</div>


*/


#yshout * {
    margin: 0;
    /*padding: 0;*/
}

#yshout a {
    text-decoration: none;
    color: #1e88e5;
}

#yshout a:hover {
    color: #3d464d;
}

#yshout a:active {
    color: #282e33;
}

#yshout {
    margin: 6px 0px;
/*  width: 215px;  */
    position: relative;
/*  overflow: hidden; */
    font-size: 11px;
}

/* Posts
------------------------------------- */

#yshout #ys-posts {
    position: relative;
    color: #000000;
    font-size: 13px; 
    overflow-y: scroll;
    max-height: 700px;
}

#yshout .ys-post {
    /*border-bottom: 1px solid #999;*/
    border-top: 1px solid #999;
    margin: 0 7px;
    padding: 5px 0;
    position: relative;
    overflow: hidden;
}

#yshout .ys-last {
    border-bottom: 0px;
    /*border-bottom: 1px solid #999;*/
}

#yshout .ys-admin-post .ys-post-nickname .ys-post-nickname-admin {
/*
    padding-left: 11px;
    background: url(../images/star.gif) 0 2px no-repeat;
*/
}


#yshout .ys-post-timestamp {
/*  color: #b3b3b3; */
    color: #666666;
}

#yshout .ys-post-nickname-admin {
    color: #000;
    font-weight: 600;
}

#yshout .ys-post-nickname {
    color: #000;
    font-weight: 600;
}

.ys-post-nickname::before {
    font-family: 'Font Awesome 5 Free';
    content: "\f007";
    color: #810080;
    margin-right: 3px;
    font-weight: 600;
    font-size: 11px;
}

#yshout .ys-post-message {
    color: #666666;
}


/* Banned
------------------------------------- */

#yshout .ys-banned-post .ys-post-nickname .ys-post-nickname-admin,
#yshout .ys-banned-post .ys-post-message,
#yshout .ys-banned-post {
    color: #b3b3b3 !important;
}

#yshout #ys-banned {
    position: absolute;
    z-index: 75;
    width: 500px;
    height: 100%;
    _height: 430px;
    top: 0;
    left: 0;
    margin: 0 5px;
    background: #fff;
}

#yshout #ys-banned span {
    position: absolute;
    display: block;
    height: 20px;
    margin-top: -10px;
    top: 50%;
    padding: 0 20px;
    color: #666;
    text-align: center;
    font-size: 13px;
    z-index: 80;
}

#yshout #ys-banned a {
    color: #999;
}

#yshout #ys-banned a:hover {
    color: #666;
}

/* Hover Controls
------------------------------------- */

#yshout .ys-post-actions {
    display: none;
    /*visibility: hidden;*/
    position: absolute;
    top: 0;
    right: 0;
    /*padding: 5px;*/
    font-size: 11px;
    z-index: 50;
    background: #fff;
    color: #b3b3b3;
}

#yshout .ys-post-actions a {
    color: #7a8c99;
}

#yshout .ys-post-actions a:hover {
    color: #3d464d;
}

#yshout .ys-post:hover .ys-post-actions {
    display: block;
}

#yshout .ys-post-info {
    color: #595959;
}

#yshout .ys-post-info em {
    font-style: normal;
    color: #1a1a1a;
}

#yshout .ys-info-overlay {
    display: none;
    position: absolute;
    z-index: 45;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    padding: 5px;
}

#yshout .ys-info-inline {
    display: none;
    margin-top: 2px;
    padding-top: 3px;
    border-top: 1px solid #f2f2f2;
}

/* Post Form
------------------------------------- */

#yshout #ys-post-form {
    padding: 0.5em;
    color: #666666;
    margin-bottom: 2px;
    border-radius: 0 0 5px 5px;
}

#yshout #ys-input-nickname,
#yshout #ys-input-message {
    font-size: 11px;
    padding: 2px;
    background: #fff;
    border: 1px solid #c3c3c3;
}

#yshout #ys-post-form fieldset {
    _position: absolute;
    border: none;
    padding: 0 5px;
    _margin-top: 5px;
}

#yshout #ys-input-nickname {
/*    width: 150px;*/
    width: 100%;
    margin-left: 0px;
    margin-top: 2px;
}

#yshout #ys-input-message {
    /*    width: 150px;*/
    width: 100%;
    margin-left: 0px;
    margin-top: 2px;
}

#yshout #ys-input-submit {
    font-size: 10px;
    /*height: 16px;*/
    /*width: 50px;*/
    /*margin-left: 5px;*/
    margin-top: 2px;
    float: right;
}

#yshout #ys-input-submit:hover {
    cursor: pointer;
}

#yshout .ys-before-focus {
    color: #b3b3b3;
}

#yshout .ys-after-focus {
    color: #000;
}

#yshout .ys-input-invalid {
    color: inherit;
}

#yshout .ys-post-form-link {
    /*margin-left: 5px;*/
    margin-left: 1px;
}


/* Overlays - This should go in all YShout styles
------------------------------------- */

#ys-overlay {
    position: fixed;
    _position: absolute;
    z-index: 100;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #000;
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;
}

* html body {
    height: 100%;
    width: 100%;
}

#ys-closeoverlay-link,
#ys-switchoverlay-link {
    display: block;
    font-weight: bold;
    height: 13px;
    font-size: 11px;
    color: #fff;
    text-decoration: none;
    margin-bottom: 1px;
    outline: none;
    float: left;
}

#ys-switchoverlay-link {
    float: right;
}

.ys-window {
    z-index: 102;
    position: fixed;
    _position: absolute;
    top: 5%;
    left: 5%;
}

#ys-cp {
/*    margin-top: -220px;
    margin-left: -310px;*/
    width: 620px;
}

#ys-yshout {
    margin-top: -250px;
    margin-left: -255px;
    width: 500px;
}

#ys-history {
/*    margin-top: -220px;
    margin-left: -270px;*/
    width: 90vw;
}

#yshout .ys-browser {
    border: none !important;
    outline: none !important;
    z-index: 102;
    overflow: auto;
    background: transparent !important;
}

#yshout-browser {
    height: 580px;
    width: 510px;
}

#cp-browser {
    height: 440px;
    width: 620px;
    _height: 450px;
    _width: 440px;
}

#history-browser {
    height: 80vh;
    width: 90vw;
    border-top: 1px solid #545454;
    border-left: 1px solid #545454;
    border-bottom: 1px solid #444;
    border-right: 1px solid #444;
}

@media screen and (max-width: 991px) {
    #yshout {
        width: 100%;
    }
    #yshout #ys-posts {
        max-height: 300px;
    }
}