body{
   overflow: hidden;
}

#container{
   top:0;
   left:0;
   position: absolute;
   background-image: url("../img/background_572x321.png");
   background-repeat: no-repeat;
   width: 100%;
   height: 308px;
   margin-left: 40px;
}

.social_button{
   display:inline-block;
   width: 18px;
   height: 18px;
   position: absolute;
   top: 16px;
}
#facebook{
   background-image: url("../img/facebook_sprite.png");
   background-repeat: no-repeat;
   background-position: 0px center;
   left: 57px;
}
#facebook:hover{
   background-position: center;
}
#facebook:active{
   background-position: -36px center;
}
#youtube{
   background-image: url("../img/youtube_sprite.png");
   background-repeat: no-repeat;
   background-position: 0px center;
   left: 79px;
}
#youtube:hover{
   background-position: center;
}
#youtube:active{
   background-position: -36px center;
}

#news_board{
   width: 288px;
   height: 280px;
   position: absolute;
   top: 15px;
   left: 118px;
}
#news_board_title{
   font-size: 14px;
   color: #810e0b;
   font-family: Arial, sans-serif;
   font-weight: 600;
}
#news_board_container{
   position: absolute;
   top: 19px;
   width: 288px;
   height: 244px;
   font-size: 11px;
   font-family: Arial, sans-serif;
   text-align: left;
   overflow-y: scroll;
   color: #402306;
}
.news_board_category_date{
   padding: 7px 10px 0px 11px;
   font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.news_board_content{
   padding: 2px 10px 4px 11px;
   line-height: 1.6;
}
#news_board_readmore a{
   position: absolute;
   bottom: 0px;
   font-size: 11px;
   color: #810e0b;
   font-family: Arial, sans-serif;
   font-weight: 600;
   text-align: center;
   width: 288px;
}

#calendar_board{
   position: absolute;
   width: 152px;
   top: -31px;
}
#upcoming_events{
   font-family: Arial, sans-serif;
   font-weight: 600;
   text-align: center;
   font-size: 12px;
   width: 152px;
   color: #3f2307;
}
#server_selected{
   width: 152px;
   height: 10px;
   font-family: Arial, sans-serif;
   font-size: 11px;
   text-align: center;
   color: #6e4b07;
}
#server_to_left {
   position: absolute;
   left: 15px;
   top: 13px;
   width: 7px;
   height: 8px;
   background-image: url("../img/server_selection_arrows.png");
   background-repeat: no-repeat;
   background-position: 0px center;
   cursor: hand;
}
#server_to_right {
   position: absolute;
   right: 15px;
   top: 13px;
   width: 7px;
   height: 8px;
   background-image: url("../img/server_selection_arrows.png");
   background-repeat: no-repeat;
   background-position: -7px center;
   cursor: hand;
}

#calendar{
   position: absolute;
   left: 17px;
   top: 39px;
   width: 100px;
   height: 104px;
}
#calendar_month{
   position: absolute;
   top: 5px;
   font-family: Arial, sans-serif;
   font-size: 10px;
   font-weight: 600;
   color: #88271d;
   text-align: center;
   width: 100px;
}
#calendar_day_displayed{
   position: absolute;
   top: 16px;
   font-family: Arial, sans-serif;
   font-size: 30px;
   font-weight: 600;
   color: #88271d;
   text-align: center;
   width: 100px;
}
#timezone_changer{
   position: absolute;
   top: 94px;
   left: 12px;
   background-image: url("../img/timezone_sprite.png");
   background-position: 0px center;
   height: 12px;
   width: 14px;
   background-repeat: no-repeat;
}
#timezone_changer:hover{
   background-position: center;
}
#timezone_changer:active{
   background-position: 14px center;
}
#event_time{
   color: #3c2a22;
   position: absolute;
   top: 57px;
   font-family: Arial, sans-serif;
   font-size: 11px;
   font-weight: 600;
   text-align: center;
   width: 90px;
   left: 5px;
}
#event_name{
   color: #3c2a22;
   position: absolute;
   top: 72px;
   font-family: Arial, sans-serif;
   font-size: 9px;
   text-align: center;
   width: 90px;
   left: 5px;
}

#month_days{
   font-family: Arial, sans-serif;
   font-size: 11px;
   color: #3c2a22;
   position: absolute;
   left: 4px;
   top: 154px;
}
#month_days td{
   width: 14px;
   height: 16px;
   text-align: center;
}
#weekdays_title{
   color: #070504;
   font-weight: bold;
   font-family: "Times New Roman", Georgia, Serif;
}

.day_isselectable{
   cursor: pointer;
   cursor: hand;
}
.day_islower{
   opacity: 0.4;
   filter: alpha(opacity=40);
}
.day_isselected{
   background-image: url("../img/selected_day_circle.png") !important;
   height: 16px;
   width: 16px;
   color: white !important;
}
.day_haseventscheduled{
   background-image: url("../img/day_hasevent.png?v=1.1");
   height: 16px;
   width: 16px;
}

#timezone_changer.hover{
   background-position: center !important;
}
#timezone_changer.active{
   background-position: -28px center;
}
#youtube.hover{
   background-position: center;
}
#youtube.active{
   background-position: -36px center;
}
#facebook.hover{
   background-position: center;
}
#facebook.active{
   background-position: -36px center;
}

/* KroNiqS light event skin */
html,
body {
   width: 100%;
   min-height: 100%;
   margin: 0;
   overflow: hidden;
   color: #102033 !important;
   background: transparent !important;
   font-family: Arial, sans-serif !important;
}

#container,
#container2,
#calendar_board,
#calendar_board2 {
   position: relative !important;
   top: auto !important;
   left: auto !important;
   width: 100% !important;
   min-height: 290px !important;
   height: auto !important;
   margin: 0 !important;
   padding: 10px !important;
   box-sizing: border-box !important;
   background: #ffffff !important;
   background-image: none !important;
}

#calendar_board,
#calendar_board2 {
   border: 1px solid #d9e8f0 !important;
   border-radius: 14px !important;
   background: linear-gradient(135deg, #ffffff, #f2fbff) !important;
   box-shadow: 0 12px 26px rgba(15, 52, 78, .08) !important;
}

#calendar {
   position: relative !important;
   top: auto !important;
   left: auto !important;
   width: 100% !important;
   height: 82px !important;
   margin: 0 0 10px !important;
   border: 1px solid #d9e8f0 !important;
   border-radius: 12px !important;
   background: #f8fdff !important;
}

#calendar_month,
#calendar_day_displayed,
#event_time,
#event_name,
#upcoming_events,
#server_selected,
#month_days,
#month_days td,
#weekdays_title,
.ranked-table,
.ranked-table *,
.Heading,
.Heading *,
.Row,
.Row *,
.Cell,
.Cell *,
.online {
   color: #102033 !important;
   text-shadow: none !important;
}

#calendar_month {
   top: 8px !important;
   left: 0 !important;
   width: 100% !important;
   color: #0d7fb9 !important;
   font-size: 11px !important;
   letter-spacing: 0 !important;
}

#calendar_day_displayed {
   top: 22px !important;
   left: 0 !important;
   width: 52px !important;
   color: #17324d !important;
   font-size: 28px !important;
}

#event_time {
   top: 26px !important;
   left: 58px !important;
   width: calc(100% - 64px) !important;
   color: #17324d !important;
   text-align: left !important;
}

#event_name {
   top: 45px !important;
   left: 58px !important;
   width: calc(100% - 64px) !important;
   color: #607287 !important;
   font-size: 10px !important;
   text-align: left !important;
}

#month_days {
   position: relative !important;
   top: auto !important;
   left: auto !important;
   width: 100% !important;
   color: #102033 !important;
   border-collapse: separate !important;
   border-spacing: 3px !important;
}

#month_days td {
   width: auto !important;
   height: 26px !important;
   border-radius: 8px !important;
   background: #ffffff !important;
   color: #102033 !important;
   font-weight: 700 !important;
}

#weekdays_title td {
   color: #17324d !important;
   background: #eaf8ff !important;
}

.day_islower {
   opacity: .45 !important;
   color: #7b8da0 !important;
}

.day_isselectable,
.day_haseventscheduled {
   color: #087ab8 !important;
   background: #f2fbff !important;
   background-image: none !important;
   cursor: pointer;
}

.day_isselected {
   color: #ffffff !important;
   background: linear-gradient(135deg, #0ea5e9, #16c7d9) !important;
   background-image: none !important;
}

.ranked-table {
   display: table !important;
   width: 100% !important;
   max-width: 100% !important;
   margin: 0 !important;
   border: 1px solid #d9e8f0 !important;
   border-radius: 12px !important;
   overflow: hidden !important;
   background: #ffffff !important;
}

.Heading,
.Row.a,
.Row.b {
   min-height: 30px !important;
   height: auto !important;
   color: #102033 !important;
   background: #ffffff !important;
   text-shadow: none !important;
}

.Heading {
   color: #17324d !important;
   background: linear-gradient(135deg, #f8fdff, #e8f7ff) !important;
   font-weight: 900 !important;
}

.Row.a:nth-child(even),
.Row.b:nth-child(even) {
   background: #f1f9fd !important;
}

.Cell {
   padding: 7px 6px !important;
   border-top: 1px solid #e6f0f6 !important;
   box-sizing: border-box !important;
}

.Cell p {
   margin: 0 !important;
   color: inherit !important;
}

/* Compact event list used inside the responsive sidebar iframe. */
#container2 {
   min-height: 0 !important;
   padding: 0 !important;
   background: transparent !important;
}

#calendar_board2 {
   min-height: 0 !important;
   padding: 0 !important;
   border: 0 !important;
   border-radius: 0 !important;
   background: transparent !important;
   box-shadow: none !important;
}

#container2 .ranked-table {
   width: 100% !important;
   box-sizing: border-box !important;
   table-layout: fixed !important;
   border-radius: 8px !important;
}

#container2 .Cell {
   padding: 7px 4px !important;
   vertical-align: middle !important;
}

#container2 .Cell:nth-child(1) {
   width: 30% !important;
}

#container2 .Cell:nth-child(2) {
   width: 45% !important;
}

#container2 .Cell:nth-child(3) {
   width: 25% !important;
}

#container2 .Cell p,
#container2 .Cell span {
   overflow-wrap: anywhere !important;
   word-break: normal !important;
   line-height: 1.15 !important;
}