#background { background-image: url("../jpg/background_winter.jpg");
              background-size: cover;
              bottom: 0%;
              left: 5%;
              right: 0%;
              top: 20%;
              position: fixed;
              padding: 0vh;
              z-index: 0;
            }

a { color: #800000;
    text-decoration: none;
  }
a:hover { text-decoration: underline; }

body { background-color: #ffffff;
       background-size: cover;
       display: flex;
       flex-flow: row wrap;
       margin: 0 auto;
       max-width: 60em;
     }

button { background-color: #c0c0c0;
         border: none;
         color: #000000;
         font-family: Verdana;
         font-size: 3.5vh;
         padding: 3.5vh;
       }

button:hover { background-color: #800000;
               color: #ffffff;
             }

#footer { background-color: #ffffff;
          border-top-color: #800000;
          border-top-style: solid;
          border-top-width: 1px;
          color: #000000;
          font-family: Verdana;
          font-size: 1.5vh;
          padding: 2vh;
          position: fixed;
          bottom: 0%;
          left: 5%;
          right: 0%;
          width: 100%;
          z-index: 1;
       }

h1 { color: #800000;
     font-family: Verdana;
     font-size: 2.5vh;
     font-weight: bold;
   }

h2 { color: #800000;
     font-family: Verdana;
     font-size: 5vh;
     font-weight: bold;
   }

h3 { color: #800000;
     font-family: Verdana;
     font-size: 2vh;
     font-weight: bold;
   }

#iframe { position: relative;
          right: 0%;
          top: 0%;
          width: 100%;
          height: 100%;
       }

input { border-color: #800000;
        border-style: solid;
        border-width: 1px;
        font-family: Verdana;
        font-size: 1.5vh;
        height: 4vh;
        min-height: 4vh;
        width: 95%;
        min-width: 50%;
        position: relative;
        left: 0%;
        margin: 0.5vh;
        padding: 0.5vh;
      }

textarea { border-color: #800000;
           border-style: solid;
           border-width: 1px;
           font-family: Verdana;
           font-size: 1.5vh;
           height: 16vh;
           min-height: 16vh;
           width: 95%;
           min-width: 50%;
           position: relative;
           left: 0%;
           margin: 0.5vh;
           padding: 0.5vh;
         }

#checkbox { border-color: #800000;
            border-style: solid;
            border-width: 1px;
            color: #800000;
            font-family: Verdana;
            font-size: 2vh;
            height: 2vh;
            min-height: 2vh;
            width: 2vh;
            min-width: 2vh;
            position: relative;
            left: 0%;
            margin: 0;
            padding: 0;
          }

#input { border-color: #800000;
         border-style: solid;
         border-width: 1px;
         font-family: Verdana;
         font-size: 2vh;
         height: 2.5vh;
         min-height: 2.5vh;
         width: 50%;
         min-width: 50%;
         position: absolute;
         right: 2.5%;
       }

#box { border-color: #800000;
       border-style: solid;
       border-width: 1px;
       font-family: Verdana;
       font-size: 2vh;
       height: 2.5vh;
       min-height: 2.5vh;
       width: 2.5vh;
       min-width: 2.5vh;
       position: absolute;
       left: 0%;
     }

#content { background-color: #ffffff;
           color: #000000;
           font-family: Verdana;
           font-size: 2vh;
           min-height: 56%;
           height: auto;
           padding: 2vh;
           position: absolute;
           left: 30%;
           top: 40%;
           width: 40%;
           opacity: 0.8;
           z-index: 1;
        }

#content_box { min-height: 56%;
               height: auto;
               position: absolute;
               left: 30%;
               top: 40%;
               width: 40%;
               display: flex;
               flex-direction: column;
             }

#content_top { background-color: #ffffff;
               color: #000000;
               font-family: Verdana;
               font-size: 2vh;
               height: auto;
               padding: 0;
               position: relative;
               left: 0%;
               top: 0%;
               width: 100%;
               opacity: 0.8;
               text-align: left;
               z-index: 1;
             }

#content_top_image { position: relative;
                     top: 0%;
                     left: 0%;
                     width: 100%;
                     height: auto;
                     text-align: left;
                   }

#content_top_text { top: 0%;
                    left: 100%;
                    padding: 2vh;
                    width: auto;
                  }

#content_empty { background: transparent;
                 height: 2vh;
                 position: relative;
                 top: 0%;
                 left: 0%;
                 width: 40%;
               }

#content_bottom { position: relative;
                  left: 0%;
                  top: 0%;
                  width: 100%;
                  display: flex;
                  flex-direction: row;
               }

#content_bottom_1 { background-color: #ffffff;
                    border-right-color: #800000;
                    border-right-style: solid;
                    border-right-width: 1px;
                    color: #000000;
                    font-family: Verdana;
                    font-size: 2vh;
                    height: auto;
                    padding: 0;
                    position: relative;
                    left: 0%;
                    top: 0%;
                    width: 100%;
                    opacity: 0.8;
                    z-index: 1;
                  }

#content_bottom_header { background-color: #808080;
                         color: #ffffff;
                         font-family: Verdana;
                         font-size: 1.5vh;
                         font-weight: bold;
                         padding: 0.5vh;
                         position: relative;
                         left: 0%;
                         top: 0%;
                         width: 96%;
                         opacity: 1.0;
                         z-index: 1;
                       }

#content_bottom_text { color: #000000;
                       font-family: Verdana;
                       font-size: 1.5vh;
                       margin: 0.25vh;
                       z-index: 1;
                     }

#content_left { background-color: #ffffff;
                color: #000000;
                font-family: Verdana;
                font-size: 2vh;
                min-height: 25%;
                height: auto;
                padding: 2vh;
                position: relative;
                left: 0%;
                top: 0%;
                width: 30%;
                opacity: 0.8;
                z-index: 1;
              }

#content_center { background-color: #ffffff;
                  color: #000000;
                  font-family: Verdana;
                  font-size: 2vh;
                  min-height: 25%;
                  height: auto;
                  padding: 2vh;
                  position: relative;
                  left: 35%;
                  top: -25%;
                  width: 30%;
                  opacity: 0.8;
                  z-index: 1;
               }

#content_right { background-color: #ffffff;
                 color: #000000;
                 font-family: Verdana;
                 font-size: 2vh;
                 min-height: 25%;
                 height: auto;
                 padding: 2vh;
                 position: relative;
                 left: 70%;
                 top: 0%;
                 width: 30%;
                 opacity: 0.8;
                 z-index: 1;
              }
                

#information { background-color: #ffffff;
               color: #000000;
               font-family: Verdana;
               font-size: 2.5vh;
               height: auto;
               padding: 2vh;
               position: absolute;
               left: 10%;
               top: 30%;
               width: 80%;
            }

#button_left { position: relative;
               left: 0%;
               width: 45%;
               font-size: 2vh;
               font-weight:bold;
             }

#button_right { position: relative;
                right: 0%;
                width: 45%;
                font-size: 2vh;
                font-weight: bold;
              }

#sbutton_left { font-size: 2vh;
                position: relative;
                left: 0%;
                top: 50%;
                min-width: 32%;
                width: 32%;
                padding: 0.5vh;
              }

#sbutton_center { font-size: 2vh;
                  position: relative;
                  left: 0.5%;
                  top: 50%;
                  min-width: 32%;
                  width: 32%;
                  padding: 0.5vh;
                }

#sbutton_right { font-size: 2vh;
                 position: relative;
                 left: 0.5%;
                 top: 50%;
                 min-width: 32%;
                 width: 32%;
                 padding: 0.5vh;
               }

#iconbar { position: absolute;
           right: 0%;
           text-align: right;
         }

#icon { height: 3.5%;
        width: 3.5%;
      }

#name { color: #ffffff;
        font-family: Verdana;
        font-size: 3vh;
        font-weight:bold;
        position: absolute;
        left: 5%;
      }

nav { position: fixed;
      right: 5%;
      top: 10%;
      margin: 0;
      padding: 0;
      vertical-align: top;
      text-align: center;
      width: 25%;
      height: 10%;
      max-width: 50%;
      max-height: 10%;
    }

nav ul { list-style: none;
         margin: 0;
         padding: 0;
         display: flex;
         flex-direction: row;
         position: relative;
         top: 0%;
         left: 0%;
         vertical-align: top;
         width: 100%;
         z-index: 2;
       }

nav li { margin: 0.5em; }

ul .menu { background-color: #800000;
           display: block;
           list-style: none;
           margin: 0;
           padding: 0;
           display: flex;
           flex-direction: column;
           position: relative;
           top: 15%;
           left: 0%;
           visibility: hidden;
           width: 125%;
           z-index: 2;
         }

li .menu { background-color: #800000;
           display: block;
           margin: 0;
           text-align: left;
           padding: 0;
           width: 125%;
           height: 4vh;
         }

li:hover .menu { visibility: visible; }

li .menu a { color: #c00000;
             font-family: Verdana;
             font-size: 2vh;
             text-decoration: none;
             margin: 0.5em;
           }

li .menu a:hover { color: #ffffff; }

ul .submenu { background-color: #800000;
              display: block;
              list-style: none;
              margin: 0;
              padding: 0;
              display: flex;
              flex-direction: column;
              position: relative;
              top: 0%;
              left: 0%;
              visibility: hidden;
              width: 100%;
              z-index: 2;
            }

li .submenu { background-color: #800000;
              display: block;
              margin: 0;
              text-align: left;
              padding: 0;
              width: 100%;
              visibility: hidden;
              height: 4vh;
            }

li:hover .submenu { visibility: visible; }

li .submenu a { color: #c00000;
                font-family: Verdana;
                font-size: 2vh;
                text-decoration: none;
                margin: 0.5em;
              }

li .submenu a:hover { color: #ffffff;
                      text-decoration: underline;
                    }

nav .about { visibility: hidden; }
nav .ecourses { visibility: hidden; }
nav .tools { visibility: hidden; }
nav .blogs { visibility: hidden; }
nav .alerts { visibility: hidden; }
nav .shop { visibility: hidden; }
nav .projects { visibility: hidden; }

#button { height: 7vh;
          width: 7vh;
          margin: 0;
          padding: 0;
          vertical-align: top;
          position: relative;
          top: 10%;
        }

#silverbar { background-color: #c0c0c0;
             border: 0px;
             padding: 0px;
             position: fixed;
             left: 0;
             top: 0;
             min-height: 100%;
             width: 5%;
           }

#topbar { background-color: #800000;
          border: 0px;
          min-height: 10%;
          padding: 0px;
          position: fixed;
          left: 2.5%;
          top: 10%;
          width: 97.5%;
          z-index: 2;
       }

#triangle { background-color: #c0c0c0;
            border: 0px;
            position: fixed;
            height: 2.5%;
            left: 2.5%;
            top: 7.5%;
            width: 2.5%;
          }

#whitebar { background-color: #ffffff;
            border: 0px;
            height: 10%;
            min-height: 10%;
            padding: 0px;
            position: fixed;
            left: 5%;
            top: 0;
            vertical-align: middle;
            width: 95%;
            z-index: 2;
          }
#top { text-align: right; }

#empty { min-height: 20%;
         position: relative;
         top: 0%;
       }

#cookies { background-color: #ffd300;
           border-bottom-color: #800000;
           border-bottom-style: solid;
           border-bottom-width: 1px;
           color: #000000;
           font-family: Verdana;
           font-size: 1.5vh;
           padding: 2vh;
           position: fixed;
           top: 20%;
           left: 5%;
           right: 0%;
           width: 95%;
           z-index: 1;
        }

#attention { heigh: 5%;
             width: 5%;
           }

#cookies_text { position: absolute;
                left: 10%;
                top: 20%;
                width: 70%;
              }