/*
    djangcms teletext home 2020

    Teletext stylesheet based on Galax 2014-2015 http://galax.xyz
*/

/* Hard reset */
html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,
address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,
sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,
tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,
footer,header,hgroup,menu,nav,output,section,summary,time,audio,video {
  padding: 0;
  margin: 0;
  border: 0;
  font-smooth: never;
  -webkit-font-smoothing: none;
}

a {
    text-decoration: none;
}

.flashing {
    animation: flashing 2s steps(5, start) infinite;
    -webkit-animation: flashing 2s steps(5, start) infinite;
}
@keyframes flashing { to { visibility: hidden; } }
@-webkit-keyframes flashing { to { visibility: hidden; } }


body {
    font-family: monospace, courier, fixed;
    font-size: 1vw;
    line-height: 1.5vw;
    font-smooth: never;
    -webkit-font-smoothing : none;
    color: #ffffff;
    background: #000000;
    border-width: 20px 20px 20px 20px; /* t r b l */
    padding: 1vw;
    padding-left:1vw;
    padding-right:1vw;
    color: yellow;
}


.rust-lander {
   padding-right:25% !important;
}
.lander-fixed {
        font-size: 0.75vw;
	padding-right:50px !important;
	margin-right:50px !important;
}

h1 {
    color : cyan;
    padding-bottom: 0px;
}
h2 {
    color : yellow;
    padding-bottom: 0.2vw;
}

.main {
  padding-left:7vw;
  padding-right:7vw;
}


p {
    padding-bottom: 1vw;
}

.date {
  float: right;
  overflow: hidden;
  color:yellow;
}
.currentpage {
  float: left;
  overflow: hidden;
  color:yellow;
}

a:link {
  color:yellow;
}
a:visited {
  color: magenta;
}
ul.vertical {
  margin: 0;
  padding: 10px;
}
ul.vertical > li {
  clear: left;
  display: block;
}
ul.vertical > li > a {
  padding: 1px !important;
  color:yellow !important;
}

.menucontainer {
  width: 80vw;
  display: grid;
  background-color: #555555;
  margin: 0px;
  padding: 0px;
}
.menuitem1 {
  justify-self: center;
  grid-column:1 ;
  grid-row: 1;
}
.menuitem2 {
  justify-self: center;
  grid-column:2 ;
  grid-row: 1;
}
.menuitem3 {
  justify-self: center;
  grid-column:3 ;
  grid-row: 1;
}
.menuitem4 {
  justify-self: center;
  grid-column:4 ;
  grid-row: 1;
}
.menuitem5 {
  justify-self: center;
  grid-column:5 ;
  grid-row: 1;
}
.menuitem6 {
  justify-self: center;
  grid-column:6 ;
  grid-row: 1;
}
.menuitem7 {
  justify-self: center;
  grid-column:1 ;
  grid-row: 2;
}
.menuitem8 {
  justify-self: center;
  grid-column:2 ;
  grid-row: 2;
}
.menuitem9 {
  justify-self: center;
  grid-column:3 ;
  grid-row: 2;
}
.menuitem10 {
  justify-self: center;
  grid-column:4 ;
  grid-row: 2;
}
.menuitem11 {
  justify-self: center;
  grid-column:5 ;
  grid-row: 2;
}
.menuitem12 {
  justify-self: center;
  grid-column:6 ;
  grid-row: 2;
}

ul.bottommenu {
  position:fixed;
  bottom:0%;
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  background-color: black;
  width: 80vw;
}


li {
}

a.colour1 { color:red; }
a.colour2 { color:light-green; }
a.colour3 { color:yellow; }
a.colour4 { color:cyan; }
a.colour5 { color:blue; }
a.colour6 { color:white; }
a.colour7 { color:magenta; }
a.colour8 { color:white; }

li a {
  display: block;
  text-align: left;
  padding: 1.5vw;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}

a[href^="https://"] {
  color: red;
  text-decoration: underline;
}
a[href^="http://"] {
  color: red;
  text-decoration: underline;
}

.main-grid-container {
  display: grid;
  grid-template-rows: auto auto auto auto;
  width: 80vw;
  margin-left: 10vw;
}

.grid-container {
  text-align: center;
  padding: 0px 0;
  background-color: black;
  justify-content: center;
}
.teaser {
  background-color: black;
  text-align: center;
  display: grid;
  grid-template-rows: auto auto auto auto;
  width: 80vw;
}

.video {
  width: 10vw;
}

.grid-child {
  border: 5px solid rgba(0, 0, 0, 1);
  background-color: cyan;
  grid-row: 1;

}


.item1 {
  grid-row: 1 / span 1;
  margin: 0 !important;
  padding: 0 !important;
  padding-left:7vw !important;
  padding-right:7vw !important;
}
.item2 {
  grid-row: 2 / span 2;

  height: 80vh;
  margin: 0;

}
.maincontainer {
  background-color: #555555;
}
.item3 {
  grid-row: 4 / span 2;
 }

.item4 {
  grid-row: 6 / span 1;
  float:right;
  margin: auto;
  padding: 0;
  padding-left:0px !important;
  width:100%;
}
.item5 {
  grid-row: 7 / span 1;
  float:left;
  padding-left:1vw !important;
}

.banner {
  padding-top: 4px;
  background-color: blue;
  color:yellow;
  margin-left:7vw;
  margin-right:7vw;
}

blockquote {
  border-top: 8px solid #ccc;
  border-bottom: 8px solid #ccc;
  background-color:#111;
  color:white;
  padding-left:2vw;
  padding-top:2vw;
  padding-bottom:2vw;
  text-align:left;
}

.img-fluid {
  margin:0px !important;
  padding:0px !important;
  width:50vw !important;
}

.bottommenu {
  display: inline-block;
}

.headingrow {
    grid-row: 1;
    grid-column: 1 / span 3;
    margin:5px;
    padding: 5px;
}

.playgame {
  width: 60vw;
  height: 60vw;
}

@media only screen and (max-device-width: 1000px) {
    ul.topmenu {
        font-size: 3.5vw;
    }
    ul.bottommenu {
        font-size: 3.5vw;
    }
    ul.vertical > li > a {
        font-size: 3vw !important;
        margin-top:2vw;
        margin-bottom:2vw;
    }
    .currentpage {
        font-size: 3vw;
    }


    body, td.teletext {
        margin-top:1vw;
        font-size: 2.5vw;
        line-height: 2.8vw;
    }
    .teletext {
        font-size: 2vw;
     }
     p {
        margin:0px !important;
        padding:0px !important;
        word-wrap: break-all !important;
     }
    .img-fluid {
        width:50vw !important;
        height:25vh !important;
      }

      blockquote {
        border-top: 2px solid #ccc;
        border-bottom: 2px solid #ccc;
        background-color:#111;
        color:white;
        padding:2vw;
        margin-top:2vw;
        margin-bottom:2vw;
        text-align:left;
      }
/*
      .menucontainer {
        width: 85vw;
        display: grid;
      }
        */
      .menuitem1 {
        justify-self: center;
        grid-column:1 ;
        grid-row: 1;
      }
      .menuitem2 {
        justify-self: center;
        grid-column:2 ;
        grid-row: 1;
      }
      .menuitem3 {
        justify-self: center;
        grid-column:3 ;
        grid-row: 1;
      }
      .menuitem4 {
        justify-self: center;
        grid-column:1 ;
        grid-row: 2;
      }
      .menuitem5 {
        justify-self: center;
        grid-column:2 ;
        grid-row: 2;
      }
      .menuitem6 {
        justify-self: center;
        grid-column:3 ;
        grid-row: 2;
      }
      .menuitem7 {
        justify-self: center;
        grid-column:1 ;
        grid-row: 3;
      }
      .menuitem8 {
        justify-self: center;
        grid-column:2 ;
        grid-row: 3;
      }
      .menuitem9 {
        justify-self: center;
        grid-column:3 ;
        grid-row: 3;
      }
      .menuitem10 {
        justify-self: center;
        grid-column:1 ;
        grid-row: 4;
      }
      .menuitem11 {
        justify-self: center;
        grid-column:2 ;
        grid-row: 4;
      }
      .menuitem12 {
        justify-self: center;
        grid-column:3 ;
        grid-row: 4;
      }

}