/* 
 File: screen.css
 Version: 2024-08-06 with CSS3 for www.dzieyk.com/net/eu/info/consulting
 Content: Screen-specific formatting with interaction
 Checked Browsers:
   Firefox 4.0
   Safari 5.0
   Chrome 18
   Opera 11
*/

/* The default body has a fixed width and is without any margins directly at the top of the screen 
** The order of the div's is 
**   (#navbar) .navbar > .navback > .navtitle > .navnext
**  
**   #topmenu
**   #title
**   #content
**   #footer
*/
body
{
    font-size: 1em;
    color: #003869; /* regular Text */
    background-color: #ECEEF2;
    line-height: 140%;
    font-family: Calibri, Verdana, Arial, Helv, Helvetica, sans-serif;
    margin: auto; /* This centers the display */
}

/* ----- TOP MENU (was #header #menu) ---------------- */

/* The new CSS-styled header */

/* TODO: Enable Icons as Button - not the final version */
#topmenu img
{
    height: 16px;
    vertical-align: top;
}

#topmenu ul
{
    margin: 1px;
    height: 18px;
    list-style: none;
    line-height: 18px;
}

#topmenu li
{
    float: left;
    margin: 0 3px; /* Abstand der Buttons */
}

.navback a, .navnext a, #topmenu a
{
    display: inline-block;
    float: left;
    height: 17px;
    margin: 0;
    border: 1px solid #ECEEF2;
    border-radius: 10px;
    padding: 5px 10px;
    text-decoration: none;
    font-weight: bolder;
    font-size: 1.0em;
    color: #003869;
    text-shadow: 1px 1px 1px white; /* W3C proposed */
}

/*  Gradient from White to Spot Dark TODO: compatibility for all current browsers  */
#topmenu a:hover
{
    background: white; /* color: Black; */ /* Gradient from White to Spot Dark */
    background-image: -moz-linear-gradient(white, #003869); /* Firefox */
    background-image: -o-linear-gradient(white, #003869); /* Opera  */
    background-image: -webkit-gradient(linear, center top, center bottom, White, #003869); /* Safari 5+ older Webkits */
    background-image: -webkit-linear-gradient(White, #003869); /* Chrome 10+ */
    background-image: linear-gradient(White, #003869); /* W3C proposed */
    border: 1px solid #003869; /* Spot Dark */
    border-radius: 10px;
    color: black;
    text-shadow: 1px 1px 1px white; /* W3C proposed */
    box-shadow: inset 2px 2px 5px white, 3px 3px 4px black, 0 0 60px orange;
}

#topmenu .current a
{
    color: white;
    text-shadow: 1px 1px 1px #003869; /* W3C proposed */
    background: none;
    box-shadow: none;
    border: inherit;
}

#topmenu .current a:hover
{
    cursor: inherit;
}


/* TODO: make media queries */
#header
{
    height: 156px; /* same as picture + 50 px */
    background: url("images/title005mECEEF2.png") no-repeat left top;
}

/* The title of the page is positioned at x=180 y=30 */
#header h1
{
    position: relative;
    left: 180px;
    top: 30px;
    margin: 0;
    text-shadow: 1px 1px 1px white; /* W3C proposed */
}

/* The CSS-styled Menue */
#menu
{
    position: relative;
    top: 42px;
    float: right; /* the Menu will be displayed at the right side of the body */
    vertical-align: middle;
}

/* TODO: Enable Icons as Button - not the final version */
#menu img
{
    height: 16px;
    vertical-align: top;
}

#menu ul
{
    margin: 1px;
    height: 18px;
    list-style: none;
    line-height: 18px;
}

#menu li
{
    float: left;
    margin: 0 10px;
    z-index: 5;
}

#menu a
{
    display: inline-block;
    float: left;
    height: 17px;
    margin: 0;
    border: 1px solid #ECEEF2;
    border-radius: 10px;
    padding: 5px 10px;
    text-decoration: none;
    font-weight: bolder;
    font-size: 1.0em;
    color: #003869;
    text-shadow: 1px 1px 1px white; /* W3C proposed */
}

/*  Gradient from White to Spot Dark TODO: compatibility for all current browsers  */
#menu a:hover
{
    background: white; /* color: Black; */ /* Gradient from White to Spot Dark */
    background-image: -moz-linear-gradient(White, #003869); /* Firefox */
    background-image: -o-linear-gradient(White, #003869); /* Opera  */
    background-image: -webkit-gradient(linear, center top, center bottom, White, #003869); /* Safari 5+ older Webkits */
    background-image: -webkit-linear-gradient(White, #003869); /* Chrome 10+ */
    background-image: linear-gradient(White, #003869); /* W3C proposed */
    border: 1px solid #003869; /* Spot Dark */
    border-radius: 10px;
    color: black;
    text-shadow: 1px 1px 1px white; /* W3C proposed */
    box-shadow: inset 2px 2px 5px white, 3px 3px 4px black, 0 0 60px orange;
}

#menu .current a
{
    color: white;
    text-shadow: 1px 1px 1px #003869; /* W3C proposed */
    background: none;
    box-shadow: none;
    border: inherit;
}

#menu .current a:hover
{
    cursor: inherit;
}

#submenu
{
    clear: left;
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: normal;
    border-bottom: solid 21px #F3F3F3;
}

#submenu a
{
    display: block;
    float: left;
    height: 18px;
    margin-right: 3px;
    text-decoration: none;
    font-size: 1em;
    padding: 3px 3px 0;
    font-weight: bold;
}

/* A little gag that is possible using CSS3: Nice Button, that appears on hovering 
** TODO: Must be generalized for other browsers too
*/

/* The Link of a Big Button is not underlined and needs a explicit size */
.bigbutton
{
    vertical-align: baseline;
    text-decoration: none;
    letter-spacing: -0.02em;
    font-size: 1.6em;
    color: black;
    border: 0 solid #F3F3F3;
    padding: 14px 4px 4px 14px;
    border-radius: 15px;
    margin: 10px;
    display: inline-block;
    height: 40px;
    width: 180px;
    max-height: 10%;
    max-width: 60%;
    box-shadow: inset -2px -2px 5px gray, 2px 2px 8px black;
}


/* The hoverbutton will appear with a gradient and all the CSS3-Features */
.bigbutton:hover
{
    /* Gradient from White to Spot Dark */
    background-image: -moz-linear-gradient(White, #003869); /* Firefox */
    background-image: -o-linear-gradient(White, #003869); /* Opera  */
    background-image: -webkit-gradient(linear, center top, center bottom, White, #003869); /* Safari 5+ older Webkits */
    background-image: -webkit-linear-gradient(White, #003869); /* Chrome 10+ */
    background-image: linear-gradient(White, #003869); /* W3C proposed */
    border: 0 solid #003869; /* Spot Dark */
    text-shadow: -1px -1px 1px black, 1px 1px 1px white; /* W3C proposed */
    box-shadow: inset 2px 2px 5px White, 0 0 12px White, 0 0 70px #003869;
}


/* Elements marked as German Content will have the appropriate flag */
.DE
{
    padding: 5px 15px 5px 40px;
    background: url("images/de.gif") no-repeat;
}

/* Elements marked as English Content will have the appropriate flag */
.EN
{
    padding: 5px 15px 5px 40px;
    background: url("images/en.gif") no-repeat;
}

/* ------- Attributed Global Tags ---- */

/* CSS-Anomalie: visited als erstes und dann noch mal spaeter, sonst klappts nur mit dem IE */

a
{
    display: inline-block;
    border: 1px solid white;
    padding: 0 5px;
    border-radius: 6px;
    margin: 0 0 8px;
    box-shadow: 2px 2px 5px black;
}

a:visited
{
    background: transparent;
    color: #003869;
    text-decoration: none;
}

a:link
{
    background: transparent;
    color: #003869;
    text-decoration: none;
}

a:hover
{
    text-decoration: none;
    background: #003869;
    color: #FFF;
    box-shadow: 0 0 12px orange, 2px 2px 5px black;
}


/* -------- Tag-Free Classes --------- */

/* Don't show print-only elements */
.print
{
    display: none;
}


/* ------- Viewport-Related Styles -------------- 
** These will be supported by CSS3 media queries. Older browsers are always on desktop and 
** will be the default 
*/

/* Very small Width available 
** iPhones in General
** Update: 20224-08-06 Now needs more width for Education too
*/
@media (width <= 660px) {
    body
    {
        width: 100%;

        /* TODO: font-size: 0.7em; */

        /* background-color: Tomato; /* for debugging */
    }
    
    /* Navigation bar for small devices (like iPhone etc) uses Floating for horizontal alignment. 
    ** The title must be the last element in html-source, because a non-floater breaks like a clear.
    ** 
    ** TODO: The Shape of the back-Icon like on the phone
    */
    .navbar 
    {
        display: block;
        position: fixed;
        top: 0;
        clear: both; /* in a separate line anyway */
        width: 100%;
        height: 44px; /* typical size of iPhone navbar */
        text-align: center;
        background-color: #ECEEF2;
        z-index: 20;
    }
    
    /* Back-Element shown on the left side */
    .navback
    {
        margin: 5px 0 0 5px;
        float: left;
        width: auto;
    }

    /* Next-Elemnt of the right side */
    .navnext
    {
        margin: 5px 5px 0 0;
        float: right;
        width: auto;
    }

    /* The title is centered, if it the last element in html only */
    .navtitle
    {
        padding-top: 10px;
        font-size: 1.1em; 

        /* oder besser: font-size: 2em; früher 30px; */
        margin: 0 auto;
        width: auto;
    }
    
    .navback a, .navnext a
    {
        padding: 5px 10px 10px; /* bit bigger */
    }

    /* The Top Menue is not visible */
    #topmenu
    {
        display: none;
    }

    /* The title is below the top menu */
    #title 
    {
        position: relative;
        padding: 44px 10px 10px;
    }

    #content 
    {
        padding: 0 10px;
    }

    /* Descriptions are on the left side and start a new line
    ** And will not appear since 2024-08-06
    */
    .descr
    {
        float: left;
        display: inline-block;
        clear: right;
        width: inherit;
    }

    /* Left Text */
    .descr p
    {
        color: darkslategray;
        font-size: 1em;
        text-align: left;
        vertical-align: text-bottom;
        margin: 2px 0 4px;
    }

    /* The text is shown on the right side */
    .text
    {
        float: left;
        margin-left: 0; /* 180px; */
    }

    .text p
    {
        line-height: 140%;
        vertical-align: baseline;
        margin-top: 0;
    }
    
    .bigbutton
    {
        height: 10%;
        width: 80%;
    }
}

/* Limited Width available 
** We will use a flexible width with margin for reading.
** The header will not display an image (TODO: may be use a small one)
** 
*/
@media (width > 660px) and (width < 740px) {
    body
    {
        width: 100%;

        /* background-color: LightSalmon;  /* for debugging */
    }

    .navbar 
    {
        display: none;
    }

    /* The CSS-styled Menue */
    #topmenu
    {
        position: fixed;
        top: 0;
        left: 0;
        padding: 4px 0 8px; /* the heigth of the fixed area */
        width: 100%; 
        background: #ECEEF2 url("images/Icon-005-100-transparent.png") no-repeat top left; /* may have a contrast color too */
        background-size: 40px;
        border-bottom: 1px dotted gray;
        z-index: 5;
    }

    /* TODO: right align this stuff */    
    #topmenu ul 
    {
        margin: 0 0 0 50px; /* for the image */
    }

    /* The title is below the top menu */
    #title
    {
        display: block;
        margin-left: 180px;
        padding: 32px 0 0;
    }

    #content .text
    {
        padding: 0 2% 0 0;
    }
}

/* Sufficient Width available
** We will use a flexible width for reading, but the rest will stay the same
** with the bigger screen. So the common definitions are here. 
** CSS3 is pretty cool - if you know how!
*/
@media (width >= 740px)
{
    body
    {
        width: 98%;
        background: #ECEEF2 url("images/title005mECEEF2.png") no-repeat left top;

        /* background-color: LightYellow; /* for debugging */
    }

    .standalone
    {
        background: #ECEEF2;
    }

    .navbar 
    {
        display: none;
    }

    /* The top menu will be in the second gradient line of the background picture
    ** In the past that was right-adjusted now with more buttuns left-adjusted */
    #topmenu
    {
        position: relative;
        top: 54px;
        margin-left: 120px;
        height: 31px;
        float: left;
        z-index: 5; 
    }

    /* The title of the page is in the first gradient line of the background picture */
    #title
    {
        position: relative;
        top: -40px;
        margin-left: 180px;
        height: 74px; 
        margin-bottom: 50px;
    }

    #title h1
    {
        position: relative;
        top: 20px;
        text-shadow: 1px 1px 1px white; /* W3C proposed */
    }
}

/* Full width available 
** reading width is fixed in pixel by default 
*/
@media (width >= 840px) 
{
    body
    {
        width: 800px;

        /* background-color: LightGreen; /* for debugging */
    }
    
    /* The navbar is only visible on small devices */
    .navbar 
    {
        display: none;
    }
}