a {
  text-decoration:none;
}


:root {
  --headerHeight: 50px;
  --footerHeight: 20px;
}

.w3-sidebar {
   
  right:0px;
  color: #555;
  
}
 
body {
}

header {
  display: block;
  position:fixed;
  top:0px;
  z-index: 1000;
}
#topSubMenu {
  display: block;
  position:fixed;
  z-index: 999;
}

#main {
  display: block;
  position:absolute;
  background-repeat: no-repeat;
  background-size: cover;
  background-color:#EEEEEE !important;
  text-align: center;
  overflow-y: scroll;
}

#container {
      text-align: left;
      width:100%;
      max-width: 1200px;
      background-color: #FFF;
      margin:auto;
      box-shadow: 0 0 1em #555;
      height:auto;
}



#topMenu a {
        min-width:36px;
        min-height:36px;
        line-height:30px;
        display:inline-block;
        vertical-align: middle;
        font-size:20px;
}


#topMenu .module {

  position:relative;

}

#topMenu .module {
  display:inline-block;
}

#topMenu .module .actions {
  position:absolute;
  width:300px;
  text-align: left;
  display: none;

}


#topMenu .module > a {

  opacity:.8;
}

#topMenu .module:hover > a {
  
  opacity:1;
  
}

#topMenu .module:hover  .actions {
    display:inline-block;
    background:#FFF;
    margin-top:-5px;
    padding:5px;
    border-radius:5px;
    font-size: 16px;

}
#topMenu .module:hover  .actions a {
  font-size:14px;
  width:100%;
  text-align: left;
  margin-bottom:5px;
}


@media (orientation: landscape) {
  
  
      header {
        top:0px;
        width: var(--headerHeight);
        height:100vh;
        z-index: 1000;
      }
      #topMenu {
        padding:0px !important;
      } 
  
      #topMenu .module {
        width:100%;
      }
  
      #topMenu a {
        margin-bottom:8px;
      }
  
      #topMenu .module .actions {
        top:0px;
        left:var(--headerHeight);
      }


      #topSubMenu {
        top:0px;
        left:var(--headerHeight);
        width: calc(100vw - var(--headerHeight));
        text-align: left;
      }
  
      #topSubMenu a {
        border-left:1px solid #00000022;  
      }
  
      #main {
        top:0px;
        left:var(--headerHeight);
        width:calc( 100vw - var(--headerHeight));
        height:calc( 100vw - var(--headerHeight)- var(--footerHeight));
        text-align: center;
        
      }
      #container {
            text-align: left;
            width:100%;
            height:calc( 100vw - var(--headerHeight)- var(--footerHeight));
      }
      #content {

      }
      footer { display:none !important;}
  
}

@media (orientation: portrait) {
  
      header {
        display: block;
        position:fixed;
        top:0px;
        width: 100vw;
        height:var(--headerHeight);
        z-index: 1000;
      }
  
      #topMenu .module .actions {
        top:45px;
        left:-100px;
        z-index: 1001;
        width:300px;
        color:#555;
        
      }
  
      #topSubMenu {
        top:var(--headerHeight);
        width: 100vw;
        text-align: center;
      }  
        
      #main {
        top:var(--headerHeight);
        left:0;
        width:100vw;
        min-height:calc(100vh - var(--headerHeight) - var(--footerHeight));
        max-height:calc(100vh - var(--headerHeight) - var(--footerHeight));
        
      }
  
      #topSubMenu a {
          margin:5px;
          padding:5px;
        border-radius:5px;
      }
  
      #topSubMenu a:hover {
        background-color:#FFFFFF33;
      }
  
  
}

main {
  display: block;
  position:absolute;
  top:var(--headerHeight);
  
  width: 100vw;
  background-repeat: no-repeat;
  background-size: cover;
}



footer {
  display: block;
  position:fixed;
  bottom:0px;
  width: 100vw;
  left: 0px;
  height:var(--footerHeight);
  border:0px;
  padding-left:60px;
  text-align: center;
  z-index:100;
}

.cufon,.w3-large,.w3-xlarge,.w3-xxlarge,.w3-xxxlarge, .w3-jumbo,.w3-cursive,
h1,h2,h3,h4,h5,h6 {
  font-weight: normal;
}

.scrollable {
  max-width:100%;
  overflow-x: scroll;
}


#login {
  
  margin-top:5vh !important;
  
}








#debug-window {
	position:fixed;
	bottom:0px;
	left:0px;
	width:30px;
	height:35px;
	z-index:1000;
	border:5px solid black;
	-webkit-transition: all .5s; /* Safari prior 6.1 */
  transition: all .5s;
	padding-top:30px;
	background-image:url('/img/debug.png');
	background-position:top left;
	background-repeat:no-repeat;
	background-size:30px 30px;
	overflow:hidden;
	overflow-y:auto;
	white-space:pre;
	font-size:10px;
}
#debug-window:hover {
	height:80vh;
	width:80vw;
	box-shadow:0 0 10em #000;
	border:5px solid black;
	padding:30px;
}
#debug-window > div {
	width:90vh;
}