body {	background: #ea6657;
	font-weight: 300;
	color: #f0f0f0;
	font-family: 'Lato', Arial, sans-serif;}















#container1
{position:relative; top:0px;  ; width:860px; height:830px; border:0px; solid; border-color: green; overflow:auto; background:#ea6657 ;margin: 0px auto;z-index: 1; }




#container2
{position:absolute; top:300px;left:0px; width:800px;height:400px;border:0px solid #ddd; background:transparent ;margin: 0px auto;z-index: 3;}



#container3
{position:absolute; top:0px;left: 0px ; width:400px;height:400px;border:0px solid #ddd; overflow:auto; background:transparent ;margin: 0px auto; z-index: 2;}


#apestaart {color: red}








.grid {
margin: 0;
padding: 0;
	list-style: none;
position: relative;
	width: 100%;
}


.grid li {
position: relative;
	float: left;
	font-size: 4em;
line-height: 1.5;
 height: 100px;
text-align: center;
width: 100px;}
	
.grid2 {
margin: 0;
padding: 0;
	list-style: none;
position: relative;
	width: 100%;
}


.grid2 li {
position: relative;
	float: left;
	font-size: 2em;
line-height: 1;
 height: 50px;
text-align: center;
width: 50px;}








/* Colors */


.ot-letter-left { background: #e74d3c; }

.ot-letter-right { background: #ea6657; }

.ot-letter-top { background: #ee7f72; }

.ot-letter-bottom { background: #e95949; }

.ot-letter-left1 { background: #e75b3c; }

.ot-letter-right1 { background: #ed7a6d; }

.ot-letter-top1 { background: #ee7572; }

.ot-letter-bottom1 { background: #e94c49; }



/* kleine blokjes */



/* Colors */


.ot-letter-left2 { background: #e74d3c; }

.ot-letter-right2 { background: #ea6657; }

.ot-letter-top2 { background: #ea6657; }

.ot-letter-bottom2 { background: #e74d3c; }

.ot-letter-left12 { background: #ed7a6d; }



.ot-letter-right12 { background: #ed7a6d; }

.ot-letter-top12 { background: #e94c49; }

.ot-letter-bottom12 { background: #e94c49; }

.ot-letter-left4 { background: #e94c49; }

.ot-letter-right3 { background: #e75b3c; }

.ot-letter-top3 { background: #e75b3c; }



.ot-letter-bottom4 { background: #e94c49; }