* {
    box-sizing: border-box;
}

body {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    font-size: 12pt;
    float: none;
}

button {
    width: 100px;
    font-size: 12pt;
}

.header {
    background-color: #FFD90F;
//  2196F3    
    color: white;
    padding: 15px;
}

.footer {
    height: 5vh;
    background-color: #FFD90F; //444;
    color: black;
    //    padding: 0px;
    padding-top: 1vh;
    padding-left: 5px;    
}

.topmenu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #AF2107; //777;
}

.topmenu li {
    float: left;
}

.topmenu li.right {
    float: right;
    padding-right: 16px;
}

.topmenu li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

.topmenu li p {
    display: inline-block;
    color: white;
    text-align: center;
    padding-right: 16px;
    text-decoration: none;
}
.topmenu li a:hover {
    background-color: #222;
}
.topmenu li a.active {
    color: white;
    background-color: #83C33F; //4CAF50;
}


 /* Dropdown Button */
.dropbtn {
//  background-color: #4CAF50;

  color: white;
 // padding: 16px;
 //  font-size: 12px;
  border: none;
  display: inline-block;
  color: white;
  text-align: center;
  text-decoration: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  background-color: #eee;
  text-decoration: none;
  color: #666;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {  background-color: #222;  }

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {  background-color: #222;  }




.column {
    float: left;
    padding: 15px;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/*
.sidebar {
    width: 25%;
}
*/
.sidebar {
    padding-left: 15px;
    padding-right: 15px;
}

.content {
    width: 75%;
}
.sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.sidebar li a {
    margin-bottom: 4px;
    display: block;
    width: 60%;
    padding: 8px;
    background-color: #eee;
    text-decoration: none;
    color: #666;
}
.sidebar li a:hover {
    background-color: #555;
    color: white;
}
.sidebar li a.active {
    background-color: #008CBA;
    color: white;
}

#wrapper {
  display:table;
  width:100%;
}
#row {
  display:table-row;
}
#left {
  display:table-cell;
//  background-color:red;
  width:25%;
}
#center {
  display:table-cell;
//  background-color:blue;
  width:75%;
}
/*
#right {
  display:table-cell;
//  background-color:#bada55;
  width:20%;
}
*/

#rightmenu {
    display: block;
    float: right;
    width: 20%;
//    border: solid 2px  black;
    padding-right:15px
}

#logout {
    display: inline;
}

#spreebutton {
    display: inline-block;
    color: white;
    active: white;
    background-color: #AF2107;
    text-align: center;
    padding: 16px;
    font-size:14pt;
    text-decoration: none;
    border: 2px solid black; 
}
#spreebutton:visited {
    color: white;
}
#spreebutton:hover {
    color: white;
    background-color: #83C33F;
}


table.ctable { 
//      	width: 750px; 
        //font-family: "Comic Sans MS", Verdana, sans-serif; 
	border-collapse: collapse; 
	margin:25px 0; 
      }	
table.ctable th { 	
	background: #2196F3;  // 7CB8E2 
	color: white; 
	font-weight: bold; 
      }
      table.ctable td, th { 
	padding: 5px; 
	font-size: 14pt;
	text-align: right;
      }
      table.ctable .players tr td {
	background-color: #f4f4ff;
	border: 2px solid #ccc; 
	font-weight: bold;
      }
      table.ctable td.t1c0 {
	  width: 350px;
	  text-align: left;
      }
      table.ctable td.t2c0 {
	  width: 350px;
	  text-align: right;
      }
      table.ctable th.t1c0, th.t2c0 {
	  text-align: left;
      }
      tbody.hide {
	  border: 2px solid #ccc;
      }
      table.ctable td.t1c1 td.t2c1 {
	  width: 120px;
      }
      table.ctable td.t1c2 td.t2c2 {
	  width: 120px;
      }
      table.ctable td.t1c3 td.t2c3 {
	  width: 75px;
      }
div.arrow { background:transparent url(arrows.png) 
                  no-repeat scroll 0px 0px; 
		  width:16px; height:16px; display:block;}
div.up { background-position:0px -16px;}