/* This is similar free font for ff din pro (eth). The designer
provides also bold and italic versions. So far we do not use this, we
leave it to the browser. Aditional @font-face constructs with
font-weight: bold; etc would be needed. */

@font-face { 
    font-family: cabin-eth; 
    src: url(Cabin-Regular-TTF.ttf); /* conf:2 */ 
}

body {
    /* test if css visible in the browser */
    /* background-color: lightblue;*/
    background-color: white;
    padding:0;margin:0; /* browsers have different defaults */
    font-size: 100%;
}

.eth-font {
    font-family: cabin-eth, sans-serif;
}

.eth-left {
    padding-left: 64px;
}

.eth-color {
    background-color: #0069B4; /* Pantone 2935 */

    /* other ETH  Fachwelt Colors
       Pantone 2935 #0069B4 RGB(18, 105, 176)
       Pantone 392 #72791c RGB(114,121,28)
       Pantone 234 #91056a RGB (145,5,106)
       Pantone Cool Gray 9 #6f6f6e RGB(111,111,100)
       Pantone 1797 #a8322d RGB(168,50,45)
       Pantone 633 #007a92 RGB(0,122,150)
       Pantone 7512 #956013 RGB(149,96,19)*/
}

/* header formating */
#eth-header {
    /* Generally no new line because of float, float means that other
       elements float arounf this element. Here we need new line, so no
       float. Float is needed in subsequent elements (dimage)
       */
    margin: 0px;
    padding-top: 32px;
    padding-bottom: 32px;

    /* border: 1px solid black; */ /* for testing */
}

/* content div formating */
.content {
    margin: 0px;
    padding-left: 64px;
    padding-top: 0px;

    /* border: 1px solid black;*/
}

/* decorative image div */
#dimage {
    float: right;
    width: 200px;
    height: 800px;
    background-color: #EAECEE;
    opacity: 1.0;
    /* border: 1px solid black; */
    background-repeat: no-repeat;
    background-position: right;
    -webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */
    animation: mymove 20s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    0% {background-position: top left;}
    100% {background-position: top right;}
}

/* Standard syntax */
@keyframes mymove {
    0% {background-position: top left;}
    100% {background-position: top right;}
}

/* small screen sizes */
@media screen and (max-width: 900px) { /* conf:6 */
    .desktop-only {
        display:none !important;
    }
    html {font-size: 120% } /* conf:7 */
}

/* footer formating */
#eth-footer {
    clear: both;
    width: 100%
    margin: 0px;
    padding-top: 0px;
    padding-bottom: 0px;

    /* border: 1px solid black;*/
}