body, html
{
	width: 100%;
	height: 100%;
	margin: 0;
	background-color: #F2F2F2;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #444444;
}

.copyright
{
	color: #F2F2F2;
	font-size: 10pt;
	font-weight: bold;
	text-align: center;
	width: 100%;
}

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

.leftpane
{
	-- border: 1px red solid;
	background-color: #2F2F2F;
	background-image: url(../img/bg-left.png);
	background-repeat: repeat-y;
	width: 20%;
	height: 100%;
	float: left;
}

.middlepane
{
	-- border: 1px orange solid;
	background-color: #666666;
	background-image: url(../img/bg-mid.png);
	background-repeat: repeat-y;
	min-width: 2%;
	height: 100%;
	float: left;
}

.rightpane
{
	-- border: 1px blue solid;
	background-color: #F2F2F2;
	background-image: url(../img/bg-right.png);
	background-repeat: repeat;
	width: 78%;
	height: 100%;
	position: relative;
	float: right;
}

.toppane
{
	-- border: 1px green solid;
	background-color: #2F2F2F;
	background-image: url(../img/bg-top.png);
	background-repeat: repeat-x;
	width: 100%;
	height: 2%;
}




.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.column {
  -- border: 1px #ffffff solid;
  flex: 120px;
  max-width: 65px;
  padding: 0 4px;
}

.column img
{
  border: 1px #F2F2F2 solid;
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}




-- Responsive layout - makes a two column-layout
@media screen and (max-width: 400px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

-- Responsive layout - makes the two columns stack on top of each other
@media screen and (max-width: 400px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}




.bg-img
{
	position: relative;
	top: 20px;
	left: 20px;
}

.fg-img-s
{
	position: absolute;
	left: 103;
	top: 63;
	display: block;
	margin: auto;
}

.fg-img-h
{
	position: absolute;
	left: 63;
	top: 90;
	display: block;
	margin: auto;
}

.fg-img-v
{
	position: absolute;
	left: 90;
	top: 63;
	display: block;
	margin: auto;
}