@media(max-width: 904px)
{
    #lastForumStuffes div
    {
        width: 100%;
        float: none;
    }

    #home_loginform
    {
        display: none;
    }

    #shoutboxTable
    {
        float: none !important;
        max-width: 9999px !important; /* :P */
        padding-right: 0 !important;
        padding-bottom: 20px;
    }
}

@media(min-width: 905px)
{
    #lastForumStuffes div
    {
        width: 50%;
        float: left;
    }

    #home_feeds
    {
        flex-wrap: nowrap !important;
    }

    #home_newsWall
    {
        order: 2 !important;
    }

    #shoutboxTable
    {
        order: 1 !important;
    }

    #home_loginform2
    {
        display: none;
    }
}

#home_feeds
{
    display: flex;
    flex-wrap: wrap;
}

.home_loginbox
{
    background-image:url(/design/_client/loginPanel.gif);
    height:110px;
    position:relative;
}

.home_loginbox_button1
{
    left: 100px;
    top: 16px;
    width: 130px;
    position: absolute;
}

.home_loginbox_button2
{
    left:100px;
    top:44px;
    width: 130px;
    position:absolute;
}

#home_loginform2 div
{
    background-color: #DEF0FA;
    border-radius: 7px;
    border: 10px solid #DEF0FA;
}
#home_loginform2 div input[type="text"],
#home_loginform2 div input[type="password"]
{
    width: 100%;
    height: 25px;
    margin-bottom: 4px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.home_loginbox_button3 { left:20px; top:65px; position:absolute; width:60px; height:120px; }
.home_loginbox_password { left:105px; top:68px; position:absolute; }
.home_loginbox_new { left:185px; top:78px; position:absolute; background-color:#FFFF99; }
.home_chatbox { height:100%; font-family: sans-serif; font-size: 12px; }
.home_separator { width:20px; }
.home_loginbox_rememberme { left:12px; top:87px; position: absolute; }
.home_loginbox_rememberme div { position: absolute; margin-top: -16px; margin-left: 19px; width: 90px }
.home_loginbox_rememberme2 { display: table-cell; vertical-align: middle; }
/* the screen width: chatbox+home_separator+(screen resultion)-this two. Other words: fixed+fixed+dynamic
   total height is .home_news: */
.home_news { width:100%; height: 416px; }

footer
{
    font-family: Georgia;
    font-size:12px;
}

#lastForumStuffes
{
    width: 100%;
}
#lastForumStuffes div
{
    background-color: #FFFFEA;
}
#lastForumStuffes h1
{
    font-size: 11px;
    font-weight: bold;
    font-family: Verdana;
}

#shoutboxTable
{
    max-width: 250px;
    padding-right: 20px;
    width: 100%;
    float: left;
    order: 3;
}

.home_newContent
{
    clear: both;
}
.home_newContent img
{
    max-width: 100%;
}

#shoutbox_container
{
    color: white;
    width: 100%;
    word-wrap: break-word;
    overflow: auto;
    position: relative;
    font-family: sans-serif;
    font-size: 12px;
    /*height: 400px;*/
    height: 60vh;
}

#home_newsWall
{
    width: 100%;
    order: 1;
    margin-bottom: 18px;
    font-size: 10px;
    font-family: Verdana;
    position: relative;
    height: 60vh;/*400px;*/
    overflow-y: scroll;
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: #454545;
    border-top-width: 2px;
    border-top-style: solid;
    border-top-color: #454545;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #AFAFAF;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #AFAFAF;
    background-image: url(/design/checker_14_small.gif);
    background-attachment: fixed;
    padding: 8px;
}

#home_scrolls
{
    background-color: #CCCCCC;
}

#home_newsWalltitle
{
    background-color: rgba(255, 255, 255, 0.5);
    width: 96.5%;
    align-items: center;
    display: flex;
    vertical-align: middle;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
}

.home_hr
{
    width: 90%;
    line-height: 18px;
}

/*.home_events
{
    float: right;
    line-height: 20px;
    background-color: #D8DFEA;
    padding: 0 5px 0 5px;
}*/

#home_playtimes
{
    color: #5F3D1F;
    margin-left: 16px;
    background-color: #BAECF8;
    padding: 2px;
}

#home_playtimesCalendar
{
    border-radius: 5px;
    border: 2px dotted grey;
    position: absolute;
    background-color: #FEFEFE;
    height: auto;
    width: auto;
    display: none;
    z-index: 20;
}

#home_dayDetails2
{
    border-spacing: 1px;
    border-collapse: separate;
    width: 100%;
}
#home_dayDetails2 thead tr td
{
    width: 12.5%;
    background-color: yellow;
}
#home_dayDetails2 tbody tr
{
    background-color: rgba(192,192,0,0.5);
}
#home_dayDetails2 tr td
{
    text-align: center;
}

/*.ui-datepicker .weekend .ui-state-default {
  background: #FEA;
}
.ui-datepicker-calendar td a[data-custom] {
  position: relative;
  padding-bottom: 10px;
}*/
.ui-datepicker-calendar td a[data-custom]::after {
  /*STYLE THE CUSTOME DATA HERE*/
  content: attr(data-custom);
  display: block;
  font-size: 8px;
}

#home_datepicker
{
    float: left;
    width: 200px;
}

.home_hasPlaytimes
{
    background-color: red;
}

#home_playtimesDetails
{
    float: left;
    width: 700px;
}

.usernameLink
{
    color: blue !important;
}

#home_topAnnouncement
{
    margin-bottom: 12px;
}
#home_topAnnouncement:empty
{
    display: none;
}

#clockPlugin_clockInner
{
    margin-left: auto;
    order: 2;
}
.clockPlugin_info
{
    font-size: 8px;
    position: absolute;
    top: 42px;
}
#clockPlugin_info1
{
    left: 26px;
}
#clockPlugin_info2
{
    left: 28px;
}

.home_newsWallDropping
{
    border: 2px dotted red !important;
    background-color: rgba(255,255,255,0.5) !important;
}

#home_uploadingLogin
{
    display: none;
    font-family: 'gothic', arial, serif;
    font-size: 14px;
}

#home_uploading
{
    font-family: 'gothic', arial, serif;
    display: none;
    background-color: #000080;
    color: white;
    font-size: 16px;
}
#home_uploadingFiles
{
    font-weight: bold;
    color: darkorange;
}

#home_dragDropHint
{
    border: 1px solid red;
    background-color: rgba(192,255,192,0.5);
    right: 25px;
    font-size: 10px;
    font-family: Verdana;
}

#home_discord div
{
    background-color: rgba(0,255,0, 0.2);
    font-size: 24px;
    border-radius: 4px;
    padding-left: 45px; /* In memory of Bytor age. February 21, 1976 ~ April 4, 2021 (age 45) */
}
@media(max-width: 1244px)
{
    #home_littlenewsContainer
    {
        flex-direction: column;
    }
    #home_discord
    {
        flex: 100%;
    }
    #home_discord div
    {
        width: calc(100% - 45px);
        float: left;
    }
    #home_discord iframe
    {
        width: 100% !important;
    }
}

@media(min-width: 1245px)
{
    #home_discord
    {
        flex: 1%;
    }
}

#home_daylight
{
    padding-top: 14px;
    padding-right: 50px;
    font-size: 16px;
    float: right;
}
#home_daylightDetail
{
    display: none;
    float: right;
    position: absolute;
    z-index: 9999;
    right: 0;
    max-width: 640px;
}
#home_daylightDetail img
{
    width: 100%;
}

#home_littleNewsRangerContainer
{
    display: flex;
}

#home_littleNewsRangerContainerLArrow,
#home_littleNewsRangerContainerRArrow
{
    cursor: pointer;
    margin-top: 2px;
}

#home_littlenewsContainer
{
    display: flex;
    align-content: stretch;
}

#home_littlenews
{
    flex: 99%;
}

#home_littleNewsRanger
{
    width: 100%;
}

/*.home_littleNewsRangerYears
{
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
}
.home_littleNewsRangerYears span
{
    position: relative;
    display: flex;
    justify-content: center;
    width: 1px;
    background: gray;
    height: 0;
    line-height: 0;
    margin-bottom: 0;
}*/

#home_POwarning
{
    float: left;
    margin-top: 10px;
    margin-right: 10px;
    animation-name: poWarningAnim;
    animation-timing-function: linear;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    background-color: #75d13f;
    border: .2em solid #e50000;
}
@keyframes poWarningAnim-half { 50% { background-color: #e50000; border-color: #75D13F; } }
@keyframes poWarningAnim { to { background-color: #e50000; border-color: #75D13F; } }

.home_poUser
{
    display: none;
    animation-name: poWarningAnim;
    animation-timing-function: linear;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    background-color: #75d13f;
    border: 1px dotted #e50000;
}

#home_activeChallenges
{
    float: left;
    border: 2px dotted yellowgreen;
    background-color: #FFFF40;
    font-size: 10px;
    font-family: Verdana;
    max-height: 120px;
    overflow-x: hidden;
    overflow-y: auto;
}
#home_activeChallenges div
{
    white-space: nowrap;
}