/*
    Document   : common style
    Author     : Jun (Peter) Lin
*/

/* ---------------- Global settings ---------------------- */
* {
    box-sizing: border-box;  /*include padding and border in element's width and height.*/
    /*border: 1px solid red;*/
}
html {
    font-family: arial, sans-serif;
    font-size: 16px;
    background-color: rgb(245, 245, 245);
    overflow: hidden;
}
/* ---------------- Positional layout ------------------*/
 /* For mobile phones: */
[class*="col-"] {
    width: 100%;
    float: left;
    padding: 3px;
}
@media (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
.row::after {
    content: "";
    clear: both;
    display: table;
}
.center {
  display: table;
  margin: 0 auto;
}
[class*="gridx-"] {
    float: left;
    padding: 3px;
}

.fullscreen {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    width: 100vw;
    height: 100vh;
}
.gridx-1 {width: 8.33%;}
.gridx-2 {width: 16.66%;}
.gridx-3 {width: 25%;}
.gridx-4 {width: 33.33%;}
.gridx-5 {width: 41.66%;}
.gridx-6 {width: 50%;}
.gridx-7 {width: 58.33%;}
.gridx-8 {width: 66.66%;}
.gridx-9 {width: 75%;}
.gridx-10 {width: 83.33%;}
.gridx-11 {width: 91.66%;}
.gridx-12 {width: 100%;}

.gridy-1 {height: 8.33%;}
.gridy-2 {height: 16.66%;}
.gridy-3 {height: 25%;}
.gridy-4 {height: 33.33%;}
.gridy-5 {height: 41.66%;}
.gridy-6 {height: 50%;}
.gridy-7 {height: 58.33%;}
.gridy-8 {height: 66.66%;}
.gridy-9 {height: 75%;}
.gridy-10 {height: 83.33%;}
.gridy-11 {height: 91.66%;}
.gridy-12 {height: 100%;}
/* ---------------- Page framework ------------------*/
.trunk {
    display: block;
    height: calc(100vh - 4em);
    overflow: scroll;
    margin: 0;
    padding: 0;
    justify-content: center;
}
.header {
    border-bottom: 1px solid #cccccc;
}
.footer {
    border-top: 1px solid #cccccc;
}
/* ----------Appearance classes------------ */
.noborder {
    border: none;
}
/* System button */
.button1
{
    border-left: 2px solid #dddddd;
    border-top: 2px solid #dddddd;
    border-right: 1px solid #999999;
    border-bottom: 1px solid #999999;
    border-radius: 3px 3px 3px 3px;
    text-decoration: none;
    font-size:0.8em;
    line-height: 1.3em;
    padding: 0px 3px;
    cursor: pointer;
    color: rgb(0, 69, 220);
    background-color: rgb(240, 240, 240);
}
.button1:hover
{
    background-color: rgb(250, 250, 250);
}

/* ----------J-Notes CSS classes----------- */
.p-todo
{
    background-color: yellow;
}
.p-todo::before
{
    content: "[To-do]";
    vertical-align: super;
    font-size: 9px;
}
.p-thoughts
{
    background-color: pink;
}
.p-thoughts::before
{
    content: "[Toughts]";
    vertical-align: super;
    font-size: 9px;
}

/* ---------------- General use classes --------------- */

/* Popup menu */
.nav {
    display: inline-block;
    white-space:nowrap;
}
.nav ul {
    list-style: none;
    background-color: rgb(240, 240, 240);
}
.nav ul li {
    float: left;
    font-size:14px;
    padding: 2px 3px;
    cursor: pointer;
    color: rgb(0, 69, 220);
    background-color: rgb(255, 255, 255);
    border-bottom: 1px solid #999999;
}
.nav ul li:hover {
    background-color: rgb(250, 250, 0);
}
.nav ul div {
    cursor: default;
    color: black;
    background-color: #E0E0FF;
    font-size: 12px;
}
.nav ul li ul {
    position: absolute;
    top: 18px;
    left: 3px;
    display: none;
    border: 1px solid #999999;
    z-index: 99;
}
.nav ul li:hover > ul {
    display: block;
}
.nav ul li a{
    display:block;
    text-decoration:none;
}
.nav ul li:hover > ul{ margin: 0px; padding: 0px;}
.nav ul li:hover > ul li { float: none; display: block;}
.nav ul li:hover > ul li a { min-width: 150px;text-decoration: none;}
.nav > ul > li {
    border-left: 2px solid #dddddd;
    border-top: 2px solid #dddddd;
    border-right: 1px solid #999999;
    border-bottom: 1px solid #999999;
    border-radius: 3px 3px 3px 3px;
    font-size:12px;
    margin-left: 2px;
}
.nav .current {
    background-color: cornflowerblue;
    color:white;
}

.photogallery{
 width:260px;
 background-color:white;
 padding: 3px 3px;
 margin: 5px 5px;
 float:left;
 border: 1px solid #cccccc;
 border-radius: 3px 3px 3px 3px;
}
.photogallery:hover {
    border: 1px solid blue;
}
.photogallery img {
    display: block;
    margin: auto;
    width:100%;
}
.photogallery span {
    display:block;
    text-align:center;
    font-weight:bold;
}

.photoinsert{
    display: inline-block;
    background-color:#F9F9F9;
    padding: 3px 3px;
    margin: auto;
    border: 1px solid #cccccc;
    border-radius: 3px 3px 3px 3px;
}
.photoinsert:hover {
    border: 1px solid blue;
}
.photoinsert img {
    max-width:600px;
    max-height:800px;
    display: block;
    margin: auto;
}
.photoinsert span {
    display:block;
    text-align:center;
    font-size: 12px;
    padding: 2px;
}

.iconlarge {
    display: inline-block;
    padding: 3px 3px;
    margin: 5px 25px;
    width: 80px;
    height: 90px;
}
.iconlarge:hover {
    background-color:lightblue;
}
.iconlarge img {
    width: 64px;
    height: 64px;
    display: block;
    margin: auto;
    border-radius: 10px 10px 10px 10px;
}
.iconlarge span {
    display:block;
    text-align:center;
    font-size: 12px;
    padding: 2px;
}

/* ----------------- Particular components styles ---------------- */

#settingbar {
    float: right;
}

.homeurl {
    display: inline-block;
    background-image: url(/images/L32.png);
    background-size: cover;
    width: 16px;
    height: 16px;
    margin: 3px 3px;
}

.option-menu {
  position: fixed;
  top: 0px;
  right: 2em;
  border: none;
  max-width: 80vw;
  min-width: 10vw;
  max-height: 100vh;
  height: 100vh;
  background: rgba(220,220,220,1);
  overflow: auto;
  padding: 0px;
  border: 1px solid gray;
}
ul.option-menu li {
    cursor: pointer;
    border: 1px solid gray;
    color: blue;
    padding: 3px;
}
ul.option-menu a {
    text-decoration: none;
    color: inherit;
}
.option-menu div {
    cursor: pointer;
    color: blue;
/*    padding: 2px;
    margin: 2px 2px 2px 16px;*/
    background-color: lightblue;
}

.quick-menu {
    position: fixed;
    right: 36px;
    top: 0px;
    border: none;
    max-width: 80%;
    min-width: 100px;
    max-height: 100%;
    background: rgba(255,255,220,0);
    overflow: auto;
    padding: 0px;
}
ul.quick-menu div {
    cursor: pointer;
    border: 1px solid gray;
    color: blue;
    padding: 3px;
    margin: 3px;
    border-radius: 16px 16px 16px 16px;
    background: rgba(255,255,220,1);
    text-align: center;
}
ul.quick-menu a {
    text-decoration: none;
    color: inherit;
}

.option-menu-full {
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  border: 0px;
  background: rgba(255,255,255,1);
  overflow: auto;
}
.option-menu-background {
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  border: 0px;
  background: rgba(255,255,255,0.6);
}

.quick-menu-button {
  position: fixed;
  top: 0px;
  right: 0px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 14px 14px 14px 14px;
  background: rgba(160,160,0,0.3);
  cursor: pointer;
  text-align: center;
  line-height: 28px;
  vertical-align: middle;
}

.bg-1 {
    background-image:url(/Images/menu.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.quick-shortcut-menu-button {
  position: fixed;
  top: 30px;
  right: 0px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 14px 14px 14px 14px;
  background: rgba(0,0,100,0.3);
  cursor: pointer;
  text-align: center;
  line-height: 28px;
  vertical-align: middle;
}

.navigation-tree-button {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 16px 16px 16px 16px;
  background: rgba(200,200,0,0.4);
  cursor: pointer;
}
.most-recent-button {
  position: fixed;
  bottom: 0px;
  left: 32px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 16px 16px 16px 16px;
  background: rgba(200,200,0,0.4);
  cursor: pointer;
}

/* toggle menu */
.togglemenu-check {
  display: none; /* hide the checkbox */
}
.togglemenu-check:checked + .togglemenu {
  display: block;
}
.togglemenu {
    display: none;
}

.sysbar {
    height: 26px;
}


/* index page layout -- location bar */
.location
{
    display: block;
    font-size: 0.9em;
    height: 1.5em;
    overflow: visible;
    border-top: 1px solid #cccccc;
    clear: both;
}
.location span {
    font-size: 0.9em;
}


/* index page layout -- left side bar */
.index
{
    display: none;
    padding: 3px 3px;
    margin: 0 0;
    /* vertical-align: top; */
    overflow: auto;
}

/* ul is used for index intend items*/
.index ul
{
    padding-left:16px;
    margin: 0 0;
}
.index > ul
{
    padding-left:0px;
}
.index > div > ul
{
    padding-left:0px;
}
.index li
{
    list-style-type:none;
}


/* index page layout -- left side bar */
.contentindex
{
    display: block;
    padding: 0px 0px;
    margin: 0 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    border: 1px solid gray;
    background-color: white;
}
/* ul is used for index intend items*/
.contentindex ul
{
    list-style-type: disc;
    padding-left:16px;
    margin: 0 0;
}
.contentindex > ul
{
    list-style-type: circle;
}
.contentindex > div > ul
{
    padding-left:0px;
}

/* index page layout -- content area */
.content
{
    position: static;
    display: block;
    /* vertical-align: top; */
    padding: 3px 3px;
    margin: 0 0;
    background-color: rgb(250, 250, 250);
    width: 100%;
    height: 100%;
}

/* index page layout -- content area, only one side bar */
.contentWide
{
    display: block;
    padding: 3px 3px;
    margin: 0 0;
    background-color: rgb(250, 250, 250);
}

/* Article */
.articlebox
{
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    line-height:150%;
    font-size: 1em;
}
.articlebox code
{
    white-space: pre;
    background-color: lavender;
    display:inline-block;
    overflow: auto;
    padding: 2px 2px;
    max-width: 100%;
    /*margin-left: 16px;*/
}
.articlebox h1
{
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}
.articlebox h2
{
    font-weight: bold;
    font-size: 1.5em;
    text-align: center;
}
.articlebox h3
{
    font-weight: bold;
    font-size: 1.2em;
    text-align: left;
}
.articlebox h4
{
    font-weight: bold;
    font-size: 1em;
    text-align: left;
}
.articlebox h5
{
    font-weight: bold;
    font-size: 0.8em;
    text-align: left;
}
.articlebox h6
{
    font-weight: bold;
    font-size: 0.6em;
    text-align: left;
}

.articleheader
{
    color: rgb(120, 60, 120);
    text-shadow: 1px 1px 1px rgb(200, 200, 200);
    font-size: 1.2em;
    text-align: center;
    margin: 2px auto;
    vertical-align: middle;
}
.articlecontent
{
    white-space: pre-wrap;
    padding: 2px 2px;
}
.articlecontent-edit
{
    white-space: pre-wrap;
    padding: 2px 2px;
    width: 290px;
    overflow: auto;
}

.comments
{
    display: block;
    width: 100%;
    overflow: hidden;
    border-top: 3px double darkslateblue;
    margin-top: 18px;
}

.grouptable {
    display: block;
}
.grouptable div {
    display: block;
    border: 1px solid rgb(220,220,220);
}
.grouptable div span {
    display: inline-block;
    width: 200px;
}
.grouptable div a {
    display: inline-block;
    width: 120px;
}
.grouptable .current {
    background-color: rgb(200,200,255);
}

/* ------------------------------------------- */

h1, h2, h3, h4, h5, h6
{
    display: inline;
    font-family: sans-serif;
    color: black;
    font-weight: normal;
    line-height: 1.8em;
}
h1
{
    font-size: 1.6em;
}
h2
{
    font-size: 1.5em;
}
h3
{
    font-size: 1.4em;
}
h4
{
    font-size: 1.3em;
}
h5
{
    font-size: 1.2em;
}
h6
{
    font-size: 1.1em;
}

/* table is used for layout*/
table
{
    border-collapse: collapse;
    border: 1px solid #888888;
}
th, td
{
    border: 1px solid #888888;
    vertical-align: top;
}
a.logo
{
    background-image: url("/images/L32.png");
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center center;
    text-decoration: none;
    vertical-align: middle;
}
a.logo:hover
{
    text-decoration: none;
    background-color: rgb(250, 250, 250);
}

.ContentsFrame
{
    width: 100%;
    height:100%;
}

.ContentsFrameBody
{
    border-style:none;
    margin:0px;
    padding:2px;
    width:98%;
}

.content-descriptions
{
    font-size:1.1em;
    color:Blue;
}

.pictures
{
    max-width:100%;
    /*width:100%;*/
}

.menu
{
    display: inline-block;
    background-color: #eeeeee;
    margin: 2px 3px;
    padding: 2px 3px;
    border-left: 1px solid #dddddd;
    border-top: 1px solid #dddddd;
    border-right: 1px solid #999999;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
}
.toolbar
{
    border-left: 1px solid #dddddd;
    border-top: 1px solid #dddddd;
    border-right: 1px solid #999999;
    border-bottom: 1px solid #999999;
    border-radius: 3px 3px 3px 3px;

    background-color:#cae8ca;

    font-size: 0.8em;
    line-height: 1em;

    padding: 4px 2px;
    margin: 2px;
}

/* Tab bar*/
.tabbox
{
    background-color: rgb(250, 250, 250);
    border: 1px solid rgb(230,230,230);
}
.tabbar
{
    border-bottom: 1px solid #cccccc;
    margin-top: 6px;
}
.tab
{
    margin: 0px 1px;
    padding: 0px 3px;
    background-color: white;
    color:blue;
    border-top: 1px solid rgb(160,160,160);
    border-right: 1px solid rgb(160,160,160);
    border-left: 1px solid rgb(160,160,160);
    text-decoration: none;
    cursor: default;
    border-radius: 6px 6px 0px 0px;
}
.tab-current
{
    margin: 0px 1px;
    padding: 0px 3px;
    background-color: cornflowerblue;
    color:white;
    border-top: 1px solid rgb(160,160,160);
    border-right: 1px solid rgb(160,160,160);
    border-left: 1px solid rgb(160,160,160);
    text-decoration: none;
    cursor: pointer;
    border-radius: 6px 6px 0px 0px;
}

/* Menu button*/
.menu-button, .menu-button-current
{
    display: inline-block;
    border-left: 2px solid #dddddd;
    border-top: 2px solid #dddddd;
    border-right: 1px solid #888888;
    border-bottom: 1px solid #888888;
    border-radius: 3px 3px 3px 3px;
    text-decoration: none;
    font-size:0.9em;
    line-height: 1.1em;
    margin: 1px 2px;
    padding: 0px 2px;
    cursor: pointer;
    color: rgb(0, 69, 220);
    background-color: rgb(240, 240, 240);
    text-align: center;
    min-width: 20px;
}
.menu-button:hover
{
    background-color: rgb(250, 250, 250);
}
.menu-button-current
{
    background-color: rgb(0, 69, 220);
    color: rgb(240, 240, 240);
}
.menu-button-push
{
    display: inline-block;
    border-left: 2px solid #888888;
    border-top: 2px solid #888888;
    border-right: 2px solid #dddddd;
    border-bottom: 2px solid #dddddd;
    border-radius: 3px 3px 3px 3px;
    text-decoration: none;
    font-size:0.9em;
    margin: 1px 3px;
    padding: 0px 3px;
    cursor: pointer;
    color: rgb(0, 69, 220);
    background-color: rgb(240, 240, 240);
    text-align: center;
}

/* System button */
.system-button
{
    display: inline-block;
    border-left: 2px solid #dddddd;
    border-top: 2px solid #dddddd;
    border-right: 1px solid #999999;
    border-bottom: 1px solid #999999;
    border-radius: 3px 3px 3px 3px;
    text-decoration: none;
    font-size:0.8em;
    line-height: 1.3em;
    margin: 1px 3px;
    padding: 0px 3px;
    cursor: pointer;
    color: rgb(0, 69, 220);
    background-color: rgb(240, 240, 240);
}
.system-button:hover
{
    background-color: rgb(250, 250, 250);
}

/* Button in footer area */
.footer-button
{
    display: inline-block;
    text-decoration: none;
    font-size:0.8em;
    margin:0px 4px;
    padding:0px;
    cursor: pointer;
    color: rgb(0, 69, 220);
}
.footer-button:hover
{
    background-color: rgb(250, 250, 250);
}

.messagebox
{
    visibility: hidden;
    position: fixed;
    bottom: 0px;
    height: 22px;
    left: 0px;
    width: 100%;
    border:solid 1px #cccccc;
    border-radius: 3px 3px 3px 3px;
    background-color: yellow;
    font-size: 0.9em;
}
.message
{
    text-align:left;
    font-size:0.8em;
}

.section
{
    margin: 3px 3px;
    padding: 3px 3px;
    border-left: 1px solid #dddddd;
    border-top: 1px solid #dddddd;
    border-right: 1px solid #999999;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    overflow: auto;
}

.button
{
    text-align:center;
    font-size:0.8em;
    margin:2px;
    padding:2px;
    border-left: solid 2px #999999;
    border-bottom: solid 2px #999999;
    border-top: solid 2px #BBBBBB;
    border-right: solid 2px #AAAAAA;
    text-decoration: none;
    background-color:rgb(220,220,255);
    color: blue;
    cursor:pointer;
}
.button:hover
{
    background-color:rgb(255,255,255);
}

.img-active
{
    border:solid 1px Gray;
}

.img-active:hover
{
    border:solid 1px Blue;
}

.menu-close
{
    position:absolute;
    right:0px;
    top:0px;
    border:solid 1px White;
    font-size:16px;
    color:White;
    cursor:default;
}

.menu-close:hover
{
    color:White;
    background-color:Red;
}

.menu-resize
{
    position: absolute;
    border:0px;
    cursor:se-resize;
    right:0px;
    bottom:0px;
}

.catalog
{
    color:Green;
    font-size:1.1em;
    margin-top:6px;
    margin-bottom:6px;
}

.description
{
    color:Blue;
    font-size:1em;
    padding:3px;
}

/* Window served as content */
.win1
{
    overflow:auto;
    width:100%;
    padding:0px;
    margin:0px;
}
tr.win1
{
    border-bottom:solid 1px #F0F0F0;
}

/* Window served as title block*/
table.win0
{
    border:none;
    background-color:#F9F9F9;
}
th.win0
{
    background-color:#E0E0FF;
    border-top: solid 1px Blue;
    text-align:left;
    font-size:1.2em;
}

/* index */
.index-item
{
    font-size:0.9em;
    text-decoration: none;
    cursor:pointer;
    margin: 1px 3px;
    padding: 1px;
    color: rgb(0, 69, 220);
    background-color: transparent;
}
.index-item:hover
{
    background-color: rgb(255, 255, 255);
}
.index-item-cur
{
    font-size:0.9em;
    text-decoration: none;
    cursor:pointer;
    margin: 1px 3px;
    padding: 1px;
    color: rgb(240, 240, 240);
    background-color: rgb(0, 69, 220);
}
.index-item-source
{
    font-size:0.9em;
    text-decoration: none;
    cursor:pointer;
    margin: 1px 3px;
    padding: 1px;
    color: rgb(255, 255, 255);
    background-color: rgb(0, 220, 0);
}

/* Notes */

.notes-subject
{
    background-color:#E0E0FF;
    border-top: solid 1px Blue;
    text-align:left;
    font-size:1.2em;
}

.notes-info
{
    border:solid 1px #F0F0F0;
    background-color:#F9F9F9;
}

.notes-catalog
{
    color:Black;
    font-size:1.1em;
    font-weight:bold;
    margin:0px;
    padding:3px;
}

.notes-description
{
    /*	overflow:scroll;*/
    background-color:#FFFFFF;
    overflow:visible;
    color:Black;
    font-size:1em;
    margin:0px;
    padding:3px;
    min-height:300px;
    max-height:600px;
}

.notes-postscript
{
    color:Black;
    font-size:0.8em;
}

div.notes-content
{
    margin-left:3px;
    margin-right:3px;
    margin-top:auto;
    margin-bottom:auto;
    width:auto;
    height:70%;
    /*
        left:0px;
        right:0px;
        top:0px;
        bottom:0px;
    */
}

img.button
{
    border:solid 1px gray
}
img.button:hover
{
    border:solid 1px blue
}

/* Column Box*/
.columnbox
{
    border: 1px #cccccc solid;
    margin: 6px 3px;
    overflow: auto;
}
.columnheader
{
    display: block;
    font-size: 0.9em;
    background-color: rgb(220, 220, 220);
    border-bottom: 1px #cccccc solid;
}
.columncontent
{
    font-size: 1em;
    padding: 2px;
    white-space: nowrap;
    overflow: auto;
}

/* Text format*/
.texttitle
{
    color: rgb(120, 60, 120);
    text-shadow: 1px 1px 1px rgb(200, 200, 200);
    font-size: 1.1em;
    text-align: center;
}
.textheader
{
    font-size: 1.1em;
    text-align: center;
}
.textnormal
{
    font-size: 0.9em;
}
.textsmall
{
    font-size: 0.8em;
}
.textauthor
{
    font-size: 0.8em;
    font-style: italic;
    width: 160px;
}

.inputbox
{
    border-radius: 3px 3px 3px 3px;
    font-size: 0.9em;
    width: 200px;
}
.inputbutton
{
    border-radius: 3px 3px 3px 3px;
    font-size: 0.9em;
}

/* Photo display panel */
.panel
{
    width: 600px;
    height: 450px;
    margin: 0 auto;
    border: 1px solid #cccccc;
}
.photo
{
    display: block;
    position: static;
    margin: 0 auto;
    max-height: 100%;
}
.photobig
{
    position: fixed;
    height: 600px;
    margin: 0 auto;
    left: 0px;
    top: 5px;
    bottom: 0px;
    right: 0px;
    z-index: 10;
}
.panelcontrol
{
    display: block;
    position: static;
    margin: 0 auto;
}
.panelcontrolbig
{
    display: block;
    position: fixed;
    margin: 0 auto;
    top: 605px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 10;
}

.popupMenu
{
    display: block;
    position: absolute;
    right: 0px;
    border: 1px solid gray;
    display: none;
    background-color: #eeeeee;
    min-width: 100px;
}