@font-face {
  font-family:               'Social Media Circled';
  src:                       url('../fonts/Social Media Circled.otf') format("opentype");
}

/*-----------------------------------------------------------------------------------------------*/
:root {
  --site-width:              1180px;
    
  --color-black:             #000000;
  --color-white:             #ffffff;
  --color-gray:              #999999;
  --color-lightgray:         #dddddd;
  --color-red:               #ff6633;
  --color-blue:              #ccddff;
  --color-lightblue:         #aaccff;
  --color-blue-hover:        #99bbff;

  --main-color:              #3399ff;
  --main-color-hover:        #66ccff;
  
  --main-font:               'Arial';
  --head-font:               'Arial Black';
  --sm-font:                 'Social Media Circled';
}

/*-----------------------------------------------------------------------------------------------*/

body {
  background-attachment:     fixed;
  background-repeat:         no-repeat;
  background-color:          var(--color-black);
  background-size:           cover;
  font-family:               var(--main-font);
  overflow-y:                scroll;
  font-size:                 medium;
  padding:                   0px 0px 0px 0px;
  margin:                    0px 0px 0px 0px;
}

h1 {
  font-family:               var(--head-font);
  text-align:                center;
  font-size:                 x-large;
  margin:                    5px 0px 5px 0px;
}

h1 span {
  border-bottom:             2px solid var(--main-color);
  font-family:               var(--head-font);  
  display:                   inline-flex;
}

h2 {
  font-family:               var(--head-font);
  text-align:                left;
  font-size:                 large;
  margin:                    3px 0px 3px 0px;
}

h2 span {
  font-family:               var(--head-font);
  display:                   flex;
}

p {
  text-align:                justify;
  margin:                    3px 0px 0px 0px;
}

/*-----------------------------------------------------------------------------------------------*/

.w5   { width:                 5%; }
.w10  { width:                10%; }
.w15  { width:                15%; }
.w20  { width:                20%; }
.w25  { width:                25%; }
.w30  { width:                30%; }
.w35  { width:                35%; }
.w40  { width:                40%; }
.w45  { width:                45%; }
.w50  { width:                50%; }
.w55  { width:                55%; }
.w60  { width:                60%; }
.w65  { width:                65%; }
.w70  { width:                70%; }
.w75  { width:                75%; }
.w80  { width:                80%; }
.w85  { width:                85%; }
.w90  { width:                90%; }
.w95  { width:                95%; }
.w100 { width:               100%; }

.justify { text-align:       justify; }
.left    { text-align:       left;    }
.center  { text-align:       center;  }
.right   { text-align:       right;   }

#/*-----------------------------------------------------------------------------------------------*/

div.Overlay {
  display:                   none;
}

div.Overlay.Show {
  background-color:          rgba(0,0,0,0.75);
  position:                  fixed;
  display:                   block;
  z-index:                   999;
  height:                    100%;
  width:                     100%;
  left:                      0px;
  top:                       0px;
}

/*-----------------------------------------------------------------------------------------------*/

div.Overlay div.Overlay_Gallery {
  transform:                 translateY(-50%);
  position:                  relative;
  top:                       50%;
}

div.Overlay div.Overlay_Gallery div.Image {
  margin:                    0px 15% 0px 15%;
  width:                     70%;
}

div.Overlay div.Overlay_Gallery div.Image img {
  border-radius:             20px 20px 20px 20px;
  height:                    auto;
  width:                     100%;
}

div.Overlay div.Overlay_Gallery div.Image p.Copyright {
  text-align:                right;
  font-size:                 x-small;
  padding:                   0px;
  margin:                    -15px 15px 0px 0px;
}

div.Overlay div.Overlay_Gallery p.Description {
  text-align:                center;
  margin:                    10px 15% 0px 15%;
  color:                     var(--color-lightgray);
  width:                     70%;
}

/*-----------------------------------------------------------------------------------------------*/

div.Site {
  background-color:          var(--color-white);
  border-radius:             20px 20px 20px 20px;
  box-sizing:                border-box;
  position:                  relative;
  padding:                   20px 20px 20px 20px;
  margin:                    10px 50% 10px 50%;
  width:                     var(--site-width);
  left:                      calc((-1) * var(--site-width) / 2);
}

div.SiteHeader {
  background-color:          var(--color-black);
  border-radius:             10px 10px 10px 10px;
  box-sizing:                border-box;
  border:                    2px solid var(--main-color);
  height:                    150px;
  margin:                    0px 0px 10px 0px;
  width:                     100%;
}

div.SiteHeader div.Left {
  text-align:                left;
  height:                    100%;
  float:                     left;
  width:                     40%;
}

div.SiteHeader div.Left div.SiteTitle {
  margin:                    41px 0px 41px 20px;
  width:                     fit-content;
}

div.SiteHeader div.Left div.SiteTitle p.Title {
  font-family:               var(--head-font);
  font-size:                 24pt;
  padding:                   0px 0px 0px 0px;
  color:                     var(--color-white);
}

div.SiteHeader div.Left div.SiteTitle p.Title span {
  font-family:               var(--head-font);
  border-top:                2px solid var(--main-color);
  padding:                   0px 0px 0px 0px;
  display:                   inline-flex;
}

div.SiteHeader div.Left div.SiteTitle p.Subtitle {
  letter-spacing:            10px;
  text-align:                center;
  font-size:                 11pt;
  margin:                    0px 0px 0px 0px;
  color:                     var(--color-white);
}

div.SiteHeader div.Center {
  text-align:                center;
  height:                    100%;
  float:                     left;
  width:                     20%;
}

div.SiteHeader div.Center img {
  height:                    calc(100% - 20px);
  margin:                    10px 5px 10px 5px;
  width:                     auto;
}

div.SiteHeader div.Right {
  text-align:                right;
  height:                    100%;
  float:                     left;
  width:                     40%;
}


div.SiteHeader div.Right div.SocialMedia {
  margin:                    108px 5px 0px 0px;
}

div.SiteHeader div.Right div.SocialMedia a {
  text-decoration:           none;
  font-family:               var(--sm-font);
  font-size:                 30px;
  margin:                    0px 0px 0px 0px;
  color:                     var(--main-color);
}

div.SiteHeader div.Right div.SocialMedia a:hover {
  color:                     var(--main-color-hover);
}

div.SiteHeader div.Right div.SocialMedia a.Instagram:after {
  content:                   "Ú";
}

div.SiteHeader div.Right div.SocialMedia a.Instagram:hover:after {
  content:                   "Q";
}

div.SiteHeader div.Right div.SocialMedia a.Steam:after {
  content:                   "ì";
}

div.SiteHeader div.Right div.SocialMedia a.Steam:hover:after {
  content:                   "8";
}

div.SiteHeader div.Right div.SocialMedia a.Youtube:after {
  content:                   "Ö";
}

div.SiteHeader div.Right div.SocialMedia a.Youtube:hover:after {
  content:                   "M";
}

div.SiteHeader div.Right div.SocialMedia a.Twitch:after {
  content:                   "°";
}

div.SiteHeader div.Right div.SocialMedia a.Twitch:hover:after {
  content:                   "a";
}

div.SiteHeader div.Right div.SocialMedia a.Discord:after {
  content:                   "â";
}

div.SiteHeader div.Right div.SocialMedia a.Discord:hover:after {
  content:                   "Y";
}


div.SiteMenu {
  background-color:          var(--main-color);
  border-radius:             10px 10px 10px 10px;
  box-sizing:                border-box;
  display:                   inline-block;
  height:                    30px;
  margin:                    2px 0px 0px 0px;
  width:                     100%;  
}

div.SiteFooter {
  background-color:          var(--color-black);
  border-radius:             10px 10px 10px 10px;
  box-sizing:                border-box;
  display:                   inline-block;
  border:                    2px solid var(--main-color);
  margin:                    10px 0px 0px 0px;
  width:                     100%;
}

/*-----------------------------------------------------------------------------------------------*/

div.Site h2 + table {
  margin-left:               20px;
}

div.Site table {
  border-spacing:            0px;
  border-radius:             10px 10px 10px 10px;
  font-size:                 small;
  border:                    2px solid var(--main-color);
  width:                     calc(100% - 20px);
}

div.Site table tr:first-child th:first-child {
  border-radius:             6px 0px 0px 0px;
}

div.Site table tr:first-child th:last-child {
  border-radius:             0px 6px 0px 0px;
}

div.Site table tr:first-child td:first-child {
  border-radius:             6px 0px 0px 0px;
}

div.Site table tr:first-child td:last-child {
  border-radius:             0px 6px 0px 0px;
}

div.Site table tr:last-child td:first-child {
  border-radius:             0px 0px 0px 6px;
}

div.Site table tr:last-child td:last-child {
  border-radius:             0px 0px 6px 0px;
}

div.Site table tr th {
  background-color:          var(--main-color);
  font-weight:               bold;
  padding:                   10px 5px 10px 5px;
  color:                     var(--color-white);
}

div.Site table tr td {
  padding:                   5px 5px 5px 5px;  
}

div.Site table tr.Odd {
  background-color:          var(--color-white);
}

div.Site table tr.Even {
  background-color:          var(--color-lightgray);
}

/*-----------------------------------------------------------------------------------------------*/

div.Site div.Categories {
  display:                   inline-block;
  margin:                    10px -5px 15px -5px;
  width:                     calc(100% + 10px);
}

div.Site div.Categories h1 {
  margin-top:                15px;
}

div.Site div.Categories div.Item {
  border-radius:             10px 10px 10px 10px;
  box-sizing:                border-box;
  text-align:                center;
  overflow:                  hidden;
  padding:                   5px 10px 5px 10px;
  margin:                    16px 5px -6px 5px;
  float:                     left;
  width:                     calc(25% - 10px);
}

div.Site div.Categories div.Item div.Carousel div.CarouselImage {
  display:                   none;
  margin:                    -5px -10px -5px -10px;
  height:                    auto;
  width:                     calc(100% + 20px);
}

div.Site div.Categories div.Item div.Carousel div.CarouselImage img {
  width:                     100%;
}

div.Site div.Categories div.Item div.Carousel div.CarouselImage p.Copyright {
  text-align:                right;
  font-size:                 xx-small;
  padding:                   0px;
  margin:                    -15px 5px 0px 0px;
  color:                     var(--color-black);
}

div.Site div.Categories div.Item div.Carousel div.CarouselImage p.Copyright.Light {
  color:                     var(--color-lightgray);
}

div.Site div.Categories div.Item h2 {
  text-align:                center;
  display:                   block;
  margin:                    10px 0px 0px 0px;
}

div.Site div.Categories div.Item.Main {
  border:                    2px solid var(--main-color);
}

div.Site div.Categories div.Item.Main:hover {
  border:                    2px solid var(--main-color-hover);
  cursor:                    pointer;
}

div.Site div.Categories div.Item.Main h2 {
  color:                     var(--main-color);
}

div.Site div.Categories div.Item.Main:hover h2 {
  color:                     var(--main-color-hover);
}

/*-----------------------------------------------------------------------------------------------*/

div.Site div.BlogShort {
  display:                   inline-block;
  margin:                    10px -5px 15px -5px;
  width:                     calc(100% + 10px);
}

div.Site div.BlogShort div.Item {
  border-radius:             10px 10px 10px 10px;
  box-sizing:                border-box;
  text-align:                center;
  padding:                   5px 10px 5px 10px;
  margin:                    16px 5px -6px 5px;
  float:                     left;
  width:                     calc(25% - 10px);
}

div.Site div.BlogShort div.Item p.Category {
  border-radius:             3px 3px 0px 0px;
  font-weight:               bold;
  font-size:                 small;
  padding:                   5px 5px 5px 5px;
  margin:                    -5px -10px 0px -10px;
}

div.Site div.BlogShort div.Item div.Image {
  display:                   grid;
}

div.Site div.BlogShort div.Item div.Image img {
  height:                    auto;
  margin:                    0px -10px 5px -10px;
  width:                     calc(100% + 20px);
}

div.Site div. BlogShort div.Item div.Image p.Copyright {
  text-align:                right;
  font-size:                 xx-small;
  padding:                   0px;
  margin:                    -20px -5px 0px 0px;
  color:                     var(--color-black);
}

div.Site div.BlogShort div.Item div.Carousel div.CarouselImage p.Copyright.Light {
  color:                     var(--color-lightgray);
}

div.Site div.BlogShort div.Item p.Date {
  text-align:                left;
  font-size:                 x-small;
  color:                     var(--color-gray);
  float:                     left;
}

div.Site div.BlogShort div.Item p.Author {
  text-align:                right;
  font-size:                 x-small;
  color:                     var(--color-gray);
}

div.Site div.BlogShort div.Item p.Abstract {
  padding-top:               2%;
  box-sizing:                border-box;
  overflow:                  hidden;
  height:                    175px;
  margin:                    6px 0px 3px 0px;
}

div.Site div.BlogShort div.Item a.Button {
  border-radius:             5px 5px 5px 5px;
  box-sizing:                border-box;
  text-align:                center;
  display:                   inline-block;
  padding:                   10px 10px 10px 10px;
  cursor:                    pointer;
  width:                     100px;
}

div.Site div.BlogShort div.Item.Main {
  border:                    2px solid var(--main-color);
}

div.Site div.BlogShort div.Item.Main h2 span {
  border-bottom:             2px solid var(--main-color);
}

div.Site div.BlogShort div.Item.Main p.Category {
  background-color:          var(--main-color);
  color:                     var(--color-white);
}

div.Site div.BlogShort div.Item.Main:hover {
  border:                    2px solid var(--main-color-hover);
  cursor:                    pointer;
}

div.Site div.BlogShort div.Item.Main:hover h2 span {
  border-bottom:             2px solid var(--main-color-hover);
}

div.Site div.BlogShort div.Item.Main:hover p.Category {
  background-color:          var(--main-color-hover);
  color:                     var(--color-white);
}

/*-----------------------------------------------------------------------------------------------*/

div.Site div.Article {
  display:                   inline-block;
  margin:                    10px 0px 0px 0px;
  width:                     100%;
}

div.Site div.Article div.Header {
  border-radius:             10px 10px 10px 10px;
  box-sizing:                border-box;
  text-align:                center;
  padding:                   0px 0px 0px 0px;
  margin:                    10px 0px 10px 0px;
  float:                     left;
  width:                     100%;
}

div.Site div.Article div.Header h1 {
  margin:                    5px 0px 5px 0px;
}

div.Site div.Article div.Header p.Date {
  text-align:                left;
  font-size:                 x-small;
  margin:                    0px 0px 0px 0px;
  color:                     var(--color-gray);
  float:                     left;
}

div.Site div.Article div.Header p.Author {
  text-align:                right;
  font-size:                 x-small;
  color:                     var(--color-gray);
}

div.Site div.Article div.Content {
  margin:                    0px 0px 0px 0px;
  float:                     left;
  width:                     calc(70% - 10px);
}

div.Site div.Article div.Content.NoSide {
  width:                     100%;
}

div.Site div.Article div.Content div.Carousel {
  margin:                    0px 0px 0px 0px;
}

div.Site div.Article div.Content div.Carousel div.CarouselImage {
  display:                   none;
  margin:                    0px 0px 0px 0px;
  height:                    auto;
  width:                     calc(100%);
}

div.Site div.Article div.Content div.Carousel div.CarouselImage img {
  border-radius:             10px 10px 10px 10px;
  width:                     100%;
}

div.Site div.Article div.Content div.Carousel div.CarouselImage p.Copyright {
  text-align:                right;
  font-size:                 x-small;
  padding:                   0px;
  margin:                    -15px 5px 0px 0px;
  color:                     var(--color-black);
}

div.Site div.Article div.Content div.Carousel div.CarouselImage p.Copyright.Light {
  color:                     var(--color-lightgray);
}

div.Site div.Article div.Content div.Image p.Copyright {
  text-align:                right;
  font-size:                 xx-small;
  padding:                   0px;
  margin:                    -20px -5px 0px 0px;
}

div.Site div.Article div.Content p {
  margin:                    1em 0px 0px 0px;
}

div.Site div.Article div.Content p.Abstract {
  font-style:                italic;
}

div.Site div.Article div.Side {
  margin:                    0px 0px 0px 0px;
  float:                     right;
  width:                     calc(30% - 10px);
}

div.Site div.Article div.Side div.Info {
  border-radius:             10px 10px 10px 10px;
  overflow:                  hidden;
  border:                    2px solid var(--main-color);
  width:                     100%;
}

div.Site div.Article div.Side div.Info p.Caption {
  background-color:          var(--main-color);
  font-weight:               bold;
  text-align:                center;
  padding:                   1em 5px 1em 5px;
  height:                    1em;
  margin:                    0px 0px 0px 0px;
  color:                     var(--color-white);
  width:                     100%;
}

div.Site div.Article div.Side div.Info div.Item {
  border-top:                1px solid var(--color-gray);
  font-size:                 small;
  margin:                    0px 0px 5px 0px;
  width:                     100%;
}

div.Site div.Article div.Side div.Info div.Item:first-child {
  border-top:                0px solid transparent;
}

div.Site div.Article div.Side div.Info div.Item p.Title {
  font-weight:               bold;
  text-align:                left;
  font-size:                 small;
  padding:                   0px 5px 1px 5px;
}

div.Site div.Article div.Side div.Info div.Item p.Data {
  text-align:                right;
  font-size:                 smaller;
  padding:                   1px 5px 0px 5px;
}

div.Site div.Article div.Side div.Info div.Item img {
  width:                     100%;
}

div.Site div.Article div.Side div.Info div.Item div.Data {
  text-align:                right;
  font-size:                 smaller;
  padding:                   1px 5px 0px 5px;
}

div.Site div.Article div.Side div.Info div.Item div.Data div.USK {
  text-align:                center;
  float:                     left;
  width:                     50%;
}

div.Site div.Article div.Side div.Info div.Item div.Data div.USK img {
  width:                     50%;
}

div.Site div.Article div.Side div.Info div.Item div.Data div.PEGI {
  text-align:                center;
  float:                     left;
  width:                     50%;
}

div.Site div.Article div.Side div.Info div.Item div.Data div.PEGI img {
  float:                     left;
  width:                     50%;
}

div.Site div.Article div.Side div.Info div.Item div.Data div.PEGI div.Small {
  float:                     left;
  width:                     50%;
}

div.Site div.Article div.Side div.Info div.Item div.Data div.PEGI div.Small img {
  margin:                    5px 5px 5px 5px;
  float:                     left;
  width:                     calc(50% - 10px);
}

div.Site div.Article div.Side div.Info div.Item div.Data p {
  text-align:                center;
}

div.Site div.Article div.KeyWords {
  display:                   inline-block;
  margin:                    10px 0px 0px 0px;
  clear:                     both;
  width:                     100%;
}

div.Site div.Article div.KeyWords p {
  text-align:                center;
  font-size:                 x-small;
  color:                     var(--color-gray);
}

/*-----------------------------------------------------------------------------------------------*/

div.Site div.Calender {
  display:                   inline-block;
  margin:                    10px 0px 0px 0px;
  width:                     100%;
}

div.Site div.Calender div.Header {
  box-sizing:                border-box;
  text-align:                center;
  padding:                   0px 0px 0px 0px;
  margin:                    10px 0px 10px 0px;
  float:                     left;
  width:                     100%;
}

div.Site div.Calender div.Header h1 {
  margin:                    5px 0px 5px 0px;
}

div.Site div.Calender div.Content {
  margin:                    0px 0px 0px 0px;
  float:                     left;
  width:                     100%;
}

div.Site div.Calender div.Content h2 {
  text-align:                center;
}

div.Site div.Calender div.Content div.Style {
  border-radius:             10px 10px 10px 10px;
  margin:                    5px 0px 10px 0px;
  border:                    1px solid var(--main-color);
}

div.Site div.Calender div.Content div.Style div {
  border-radius:             0px 0px 0px 0px;
}

div.Site div.Calender div.Content div.Style div:first-child div:first-child {
  border-radius:             9px 0px 0px 0px;
}

div.Site div.Calender div.Content div.Style div:first-child div:last-child {
  border-radius:             0px 9px 0px 0px;
}

div.Site div.Calender div.Content div.Style div:last-child div:first-child {
  border-radius:             0px 0px 0px 9px;
}

div.Site div.Calender div.Content div.Style div:last-child div:last-child {
  border-radius:             0px 0px 9px 0px;
}

div.Site div.Calender div.Content div.Header {
  overflow:                  hidden;
  margin:                    0px 0px 0px 0px;
  clear:                     both;
  width:                     calc(100% + 1px);
}

div.Site div.Calender div.Content div.Header div {
  box-sizing:                border-box;
  padding:                   1em 5px 1em 5px;
}

div.Site div.Calender div.Content div.Header div.Week {
  background-color:          var(--main-color);
  border:                    1px solid var(--main-color);
  color:                     var(--color-white);
  float:                     left;
  width:                     5.5%;
}

div.Site div.Calender div.Content div.Header div.Week p {
  font-weight:               bold;
  text-align:                center;
}

div.Site div.Calender div.Content div.Header div.Day {
  background-color:          var(--main-color);
  border:                    1px solid var(--main-color);
  color:                     var(--color-white);
  float:                     left;
  width:                     13.5%;
}

div.Site div.Calender div.Content div.Header div.Day p {
  font-weight:               bold;
  text-align:                center;
}

div.Site div.Calender div.Content div.Row {
  overflow:                  hidden;
  margin:                    0px 0px 0px 0px;
  clear:                     both;
  width:                     calc(100% + 1px);
}

div.Site div.Calender div.Content div.Row div {
  box-sizing:                border-box;
  padding:                   5px 5px 5px 5px;
  height:                    125px;
}

div.Site div.Calender div.Content div.Row div.Week {
  background-color:          var(--main-color);
  border:                    1px solid var(--main-color);
  color:                     var(--color-white);
  float:                     left;
  width:                     5.5%;
}

div.Site div.Calender div.Content div.Row div.Week p {
  font-weight:               bold;
  text-align:                center;
  transform:                 rotate(270deg);
  position:                  relative;
  bottom:                    50%;
  margin:                    -7px 0px 0px 0px;
  top:                       50%;
}

div.Site div.Calender div.Content div.Row div.Day {
  border:                    1px solid var(--main-color);
  float:                     left;
  width:                     13.5%;
}

div.Site div.Calender div.Content div.Row div.Day p {
  font-weight:               bold;
  text-align:                center;
}

div.Site div.Calender div.Content div.Row div.Day p.DayOfMonth {
  text-align:                right;
}

div.Site div.Calender div.Content div.Row div.Day.Weekend {
  background-color:          var(--color-lightgray);    
}

div.Site div.Calender div.Content div.Row div.Day.Inactive {
  opacity:                   0.3;
}

div.Site div.Calender div.Content div.Foot {
  overflow:                  hidden;
  margin:                    0px 0px 0px 0px;
  clear:                     both;
  width:                     calc(100% + 1px);
}

div.Site div.Calender div.Content div.Foot div {
  box-sizing:                border-box;
  padding:                   0px 5px 0px 5px;
}

div.Site div.Calender div.Content div.Foot div.Week {
  background-color:          var(--main-color);
  border:                    1px solid var(--main-color);
  color:                     var(--color-white);
  float:                     left;
  width:                     5.5%;
}

div.Site div.Calender div.Content div.Foot div.Week p {
  font-weight:               bold;
  text-align:                center;
}

div.Site div.Calender div.Content div.Foot div.Day {
  background-color:          var(--main-color);
  border:                    1px solid var(--main-color);
  color:                     var(--color-white);
  float:                     left;
  width:                     13.5%;
}

div.Site div.Calender div.Content div.Foot div.Day p {
  font-weight:               bold;
  text-align:                center;
}

/*-----------------------------------------------------------------------------------------------*/

div.Site div.Forum {
  display:                   inline-block;
  margin:                    10px 0px 0px 0px;
  width:                     100%;
}

div.Site div.Forum div.Header {
  box-sizing:                border-box;
  text-align:                center;
  padding:                   0px 0px 0px 0px;
  margin:                    10px 0px 10px 0px;
  float:                     left;
  width:                     100%;
}

div.Site div.Forum div.Header h1 {
  margin:                    5px 0px 5px 0px;
}

div.Site div.Forum div.Content {
  margin:                    0px 0px 0px 0px;
  float:                     left;
  width:                     100%;
}

div.Site div.Forum div.Content div.Category {
  border-radius:             10px 10px 10px 10px;
  overflow:                  hidden;
  display:                   inline-block;
  border:                    1px solid var(--main-color);
  margin:                    10px 0px 10px 0px;
  width:                     100%;
}

div.Site div.Forum div.Content div.Category p.Title {
  background-color:          var(--main-color);
  font-weight:               bold;
  padding:                   1em 5px 1em 10px;
  margin:                    0px 0px 0px 0px;
  color:                     var(--color-white);
}

div.Site div.Forum div.Content div.Category div.Entry {
  box-sizing:                border-box;
  padding:                   5px 0px 5px 0px;
  height:                    4em;
  clear:                     both;
  width:                     100%;
}

div.Site div.Forum div.Content div.Category div.Entry:hover {
  background-color:          var(--color-blue-hover)                      !important;
  cursor:                    pointer;
}

div.Site div.Forum div.Content div.Category div.Entry:nth-child(odd) {
  background-color:          var(--color-white);
}

div.Site div.Forum div.Content div.Category div.Entry:nth-child(even) {
  background-color:          var(--color-lightgray);
}

div.Site div.Forum div.Content div.Category div.Entry.Unread:nth-child(odd) {
  background-color:          var(--color-blue);
}

div.Site div.Forum div.Content div.Category div.Entry.Unread:nth-child(even) {
  background-color:          var(--color-lightblue);
}

div.Site div.Forum div.Content div.Category div.Entry div.Icon {
  float:                     left;
  width:                     75px;
}

div.Site div.Forum div.Content div.Category div.Entry div.Theme {
  position:                  relative;
  float:                     left;
  width:                     calc(100% - 75px - 200px - 75px - 75px);
  top:                       calc(50% - 19px);
}

div.Site div.Forum div.Content div.Category div.Entry div.Theme p.Caption {
  font-weight:               bold;  
}

div.Site div.Forum div.Content div.Category div.Entry div.Theme p.Caption span.Important {
  color:                     var(--color-red);
}

div.Site div.Forum div.Content div.Category div.Entry div.Theme p.CreationData {
  font-size:                 smaller;
}

div.Site div.Forum div.Content div.Category div.Entry div.Reply {
  position:                  relative;
  float:                     left;
  width:                     200px;
  top:                       calc(50% - 19px);
}

div.Site div.Forum div.Content div.Category div.Entry div.Reply p.LastReply {
  font-size:                 small;
}

div.Site div.Forum div.Content div.Category div.Entry div.Reply p.LastReplyUser {
  font-size:                 smaller;
}

div.Site div.Forum div.Content div.Category div.Entry div.ReplyCount {
  position:                  relative;
  float:                     left;
  width:                     75px;
  top:                       calc(50% - 7px);
}

div.Site div.Forum div.Content div.Category div.Entry div.ReplyCount p {
  text-align:                center;
  margin:                    0px 0px 0px 0px;
}

div.Site div.Forum div.Content div.Category div.Entry div.ViewCount {
  position:                  relative;
  float:                     left;
  width:                     75px;
  top:                       calc(50% - 7px);
}

div.Site div.Forum div.Content div.Category div.Entry div.ViewCount p {
  text-align:                center;
  margin:                    0px 0px 0px 0px;
}

/*-----------------------------------------------------------------------------------------------*/

div.Site div.Gallery {
  display:                   inline-block;
  margin:                    10px -5px 15px -5px;
  width:                     calc(100% + 10px);
}

div.Site div.Gallery h1 {
  margin-top:                15px;
}

div.Site div.Gallery div.Entry {
  border-radius:             10px 10px 10px 10px;
  box-sizing:                border-box;
  text-align:                center;
  overflow:                  hidden;
  padding:                   5px 10px 5px 10px;
  border:                    2px solid var(--main-color);
  margin:                    16px 5px -6px 5px;
  float:                     left;
  width:                     calc(25% - 10px);
}

div.Site div.Gallery div.Entry:hover {
  border:                    2px solid var(--main-color-hover);
  cursor:                    pointer;
}

div.Site div.Gallery div.Entry div.Image {
  margin:                    -5px -10px -5px -10px;
  height:                    auto;
  width:                     calc(100% + 20px);
}

div.Site div.Gallery div.Entry div.Image img {
  filter:                    none;
  width:                     100%;
}

div.Site div.Gallery div.Entry:hover div.Image img {
  filter:                    saturate(10);
}

div.Site div.Gallery div.Entry div.Image p.Copyright {
  text-align:                right;
  font-size:                 xx-small;
  padding:                   0px;
  margin:                    -15px 5px 0px 0px;
}

div.Site div.Gallery div.Entry p.Description {
  text-align:                justify;
  font-size:                 small;
  display:                   block;
  margin:                    13px 0px 0px 0px;
}

/*-----------------------------------------------------------------------------------------------*/

div.SiteFooter {
  font-size:                 small;
}

div.SiteFooter p.Copyright {
  font-size:                 smaller;
  display:                   inline-block;
  margin:                    10px 0px 10px 10px;
  color:                     var(--color-gray);
  float:                     left;
}

div.SiteFooter p.Impressum {
  font-size:                 smaller;
  display:                   inline-block;
  margin:                    10px 10px 10px 0px;
  color:                     var(--color-gray);
  float:                     right;
}