/* ============================================================
   basic.css — Layout Structure
   Gesior2012 | Dark Fantasy Theme
   ------------------------------------------------------------
   SCOPE: body, columns, #ContentRow positions, artwork areas,
          footer skeleton, announcement bar, progress bar skeleton.
   Nothing visual here — colors/fonts are in style.css.
   ============================================================ */

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0; padding: 0;
    min-width: 1000px;
}

img { border: 0; vertical-align: middle; }

/* ── Artwork wrapper ── */
#ArtworkHelper {
    text-align: center;
    background-position: top center;
    background-attachment: scroll;
    background-repeat: no-repeat;
    width: 100%; height: 100%;
    min-width: 1000px; min-height: 800px;
}

/* ── Page container ── */
#Bodycontainer {
    text-align: left;
    min-width: 1000px; max-width: 1200px;
    width: 100%; height: 100%;
    margin: 0 auto; padding: 0;
    display: table;
    position: relative;
}

/* ── Three-column row ── */
#ContentRow {
    position: relative;
    top: 48px; /* height of #TopNavBar */
}
* html #ContentRow { display: inline-block; }

/* Left column */
#MenuColumn {
    position: absolute;
    left: 0; top: 0;
    width: 192px;
    margin: 0 8px;
    padding: 0;
}

/* Center column */
#ContentColumn {
    position: relative;
    margin-left: 208px;
    margin-right: 208px;
}

/* Right column */
#ThemeboxesColumn {
    text-align: center;
    position: absolute;
    top: 0; right: 0;
    width: 192px;
    margin: 0 8px;
}

/* IE min-width hack */
#ContentHelper { position: relative; }
* html #ContentHelper {
    display: inline-block;
    position: relative;
    top: -800px;
    margin: -20px -570px -20px -20px;
}

/* ── Logo / left artwork ── */
#LeftArtwork {
    position: absolute;
    height: 48px; width: 220px;
    top: 0; left: 0;
    background-repeat: no-repeat;
    z-index: 5;
}
#LeftArtwork a { display: block; height: 48px; line-height: 48px; padding-left: 8px; }
#LeftArtwork img { height: 40px; width: auto; margin-top: 4px; }

/* ── Players online / right artwork ── */
#RightArtwork {
    position: absolute;
    top: 0; right: 160px;
    width: 132px;
    z-index: 90;
}
#PedestalAndOnline {
    position: absolute;
    top: 0; width: 132px; height: 48px;
    display: flex; align-items: center; justify-content: center;
}
#PlayersOnline {
    text-align: center;
    width: 92px;
}

/* ── Announcement bar ── */
#AnnouncementBar {
    position: relative;
    width: 100%;
    padding: 8px 14px;
    font-size: 12px;
    line-height: 1.5;
    z-index: 50;
}

/* ── Footer ── */
#Footer {
    position: relative;
    width: 100%;
    padding: 20px 0 28px;
    text-align: center;
}
* html #Footer { padding-bottom: 120px; margin-bottom: 50px; }

/* ── Progress bar (skeleton only) ── */
#ProgressBar #Headline        { text-align:center; font-size:12pt; font-weight:bold; margin-bottom:5px; }
#ProgressBar #MainContainer   { position:relative; top:10px; height:50px; margin-bottom:25px; }
#ProgressBar #BackgroundContainer       { position:relative; width:100%; }
#ProgressBar #BackgroundContainerCenter { position:absolute; left:0; top:0; height:17px; width:100%; }
#ProgressBar #BackgroundContainerCenterImage { position:relative; margin:0 25px; height:17px; }
#ProgressBar #BackgroundContainerLeftEnd  { position:absolute; float:left; }
#ProgressBar #BackgroundContainerRightEnd { position:absolute; right:0; top:0; float:right; }
#ProgressBar #TubeLeftEnd  { position:absolute; left:25px; top:4px; }
#ProgressBar #TubeRightEnd { position:absolute; right:25px; top:4px; z-index:0; }
#ProgressBar .Steps           { position:relative; height:39px; font-size:9px; float:left; top:-11px; margin-left:-1px; }
#ProgressBar #StepsContainer1 { text-align:right; margin:0 40px 0 92px; height:10px; }
#ProgressBar #StepsContainer2 { width:100%; height:10px; }
#ProgressBar .TubeContainer   { position:relative; padding-right:47px; }
#ProgressBar .Tube            { position:relative; top:16px; width:100%; height:7px; }
* html #ProgressBar .Tube     { top:13px; }
#ProgressBar .SingleStepContainer { position:absolute; top:0; width:47px; height:30px; right:0; text-align:center; }
#ProgressBar #FirstStep .SingleStepContainer { left:45px; position:absolute; }
#ProgressBar .StepIcon        { position:absolute; right:0; }
#ProgressBar #FirstStep .StepIcon { top:0; left:0; }
#ProgressBar .StepText        { top:40px; position:absolute; width:200px; right:-77px; }