.page {  display: grid;  width: 100%;  height: 100%;
  grid-template-areas: "header header header"
  "left main right"
  "footer footer footer";
  grid-template-columns: 120px 4fr 120px;
  grid-template-rows: 60px 4fr 20px;
}
.page > div {  border: 0px dashed #888;}

.header {  grid-area: header;}
.left {  grid-area: left;}
.main {  grid-area: main;}
.right {  grid-area: right;}
.footer {  grid-area: footer;}

.grid4x3 {  display: grid;  width: 100%;  height: 100%;
  grid-template-areas: 
  "pic-a pic-b pic-c pic-d"
  "pic-e pic-f pic-g pic-h"
  "pic-i pic-j pic-k pic-l";
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
.grid4x3 > div {  border: 0px dashed #f88;}

.pic-a {  grid-area: pic-a;}
.pic-b {  grid-area: pic-b;}
.pic-c {  grid-area: pic-c;}
.pic-d {  grid-area: pic-d;}
.pic-e {  grid-area: pic-e;}
.pic-f {  grid-area: pic-f;}
.pic-g {  grid-area: pic-g;}
.pic-h {  grid-area: pic-h;}
.pic-i {  grid-area: pic-i;}
.pic-j {  grid-area: pic-j;}
.pic-k {  grid-area: pic-k;}
.pic-l {  grid-area: pic-l;}

body {
  background-color:#f0ede3;  margin:0px; padding:0px;}

h2 { margin:0px; padding-top:10px; text-align:center; color:#888; background: #f0ede3; font-size:15pt;}
h4 { margin:0px; padding-top:10px; text-align:center; color:#fff; background: #E6E2D3; text-shadow: #555 2px 2px 1px; font-size:15pt; box-shadow:8px 15px 20px #E6E2D3;}

.footer{ text-align:right; color:#bebe9e; background: #f0ede3; margin:20px; }

.nav { text-align: center; font-size: 12px; margin:15px auto; padding:0px; display: inline-block;}
.nav a { float:left; clear:left; text-decoration:none; color:#bebe9e; background:#f0ede3; width:110px; margin:0 0 2px; padding:3px 6px;
	font-weight:normal; border:0px solid #bbb;}
.nav a:hover {  color:#777; background:#E6E2D3; border-color:#e7e7e7; }

.left { background:#f0ede3; margin:0; padding:0px; border:0px solid #888;}
.right { background:#f0ede3; margin:0; padding:0px; border:0px solid #888; text-align: center; font-size: 12px; color:#bebe9e; background:#f0ede3; }

.box { margin:20px; }
.box img{ background:#eee; border-color:#ddd #bbb #aaa #ccc; 
	border-style:solid; border-width:10px;
	padding:10px; border:10px solid #808080; box-shadow:8px 15px 20px #404040;}
	
.rnav a { text-decoration:none; color:#bebe9e; background:#f0ede3; width:110px; margin:0px 0 2px; padding:3px 6px; font-weight:normal;}
.rnav a:hover {  color:#777; background:#E6E2D3; border-color:#e7e7e7; }
.p { color:#bebe9e; background:#f0ede3; text-align:center;}