﻿.matrix {
	overflow:hidden;
}

/* Matrix Startposition */
.pos1-1 { position: absolute ; left: 0px; top: 0px; }
.pos2-1 { position: absolute ; left: 160px; top: 0px; }
.pos3-1 { position: absolute ; left: 320px; top: 0px; }
.pos4-1 { position: absolute ; left: 480px; top: 0px; }
.pos5-1 { position: absolute ; left: 640px; top: 0px; }
.pos6-1 { position: absolute ; left: 800px; top: 0px; }
.pos1-2 { position: absolute ; left: 0px; top: 120px; }
.pos2-2 { position: absolute ; left: 160px; top: 120px; }
.pos3-2 { position: absolute ; left: 320px; top: 120px; }
.pos4-2 { position: absolute ; left: 480px; top: 120px; }
.pos5-2 { position: absolute ; left: 640px; top: 120px; }
.pos6-2 { position: absolute ; left: 800px; top: 120px; }
.pos1-3 { position: absolute ; left: 0px; top: 242px; }
.pos2-3 { position: absolute ; left: 160px; top: 242px; }
.pos3-3 { position: absolute ; left: 320px; top: 242px; }
.pos4-3 { position: absolute ; left: 480px; top: 242px; }
.pos5-3 { position: absolute ; left: 640px; top: 242px; }
.pos6-3 { position: absolute ; left: 800px; top: 242px; }
.pos1-4 { position: absolute ; left: 0px; top: 360px; }
.pos2-4 { position: absolute ; left: 160px; top: 360px; }
.pos3-4 { position: absolute ; left: 320px; top: 360px; }
.pos4-4 { position: absolute ; left: 484px; top: 360px; }
.pos5-4 { position: absolute ; left: 640px; top: 360px; }
.pos6-4 { position: absolute ; left: 800px; top: 360px; }
.pos1-5 { position: absolute ; left: 0px; top: 480px; }
.pos2-5 { position: absolute ; left: 160px; top: 480px; }
.pos3-5 { position: absolute ; left: 320px; top: 480px; }
.pos4-5 { position: absolute ; left: 480px; top: 480px; }
.pos5-5 { position: absolute ; left: 640px; top: 480px; }
.pos6-5 { position: absolute ; left: 800px; top: 480px; }



/* Matrix Element Breite */
.x1 { width: 160px; }
.x2 { width: 320px; }
.x3 { width: 480px; }
.x4 { width: 640px; }
.x5 { width: 800px; }
.x6 { width: 960px; }
.y1 { height: 120px; }
.y2 { height: 240px; }
.y3 { height: 240px; }
.y4 { height: 480px; }
.y5 { height: 600px; }

/* Matrix Rand */
.border-0-0-0-0 { border:none; }
.border-1-1-1-1 { border-width:1px; border-style:solid; border-color:#e39800 #e39800 #e39800 #e39800; }
.border-1-0-0-0 { border-width:1px; border-style:solid; border-color:#e39800 #ffffff #ffffff #ffffff; }
.border-1-1-0-0 { border-width:1px; border-style:solid; border-color:#e39800 #e39800 #ffffff #ffffff; }
.border-1-1-1-0 { border-width:1px; border-style:solid; border-color:#e39800 #e39800 #e39800 #ffffff; }
.border-0-1-0-0 { border-width:1px; border-style:solid; border-color:#ffffff #dbdbdb #ffffff #ffffff; }
.border-0-1-1-0 { border-width:1px; border-style:solid; border-color:#ffffff #e39800 #e39800 #ffffff; }
.border-0-1-1-1 { border-width:1px; border-style:solid; border-color:#ffffff #e39800 #e39800 #e39800; }
.border-0-0-1-0 { border-bottom:2px #e39800 solid; }
.border-0-0-1-1 { border-width:1px; border-style:solid; border-color:#ffffff #ffffff #e39800 #e39800; }
.border-1-0-0-1 { border-width:1px; border-style:solid; border-color:#e39800 #ffffff #ffffff #e39800; }
.border-1-0-1-1 { border-width:1px; border-style:solid; border-color:#e39800 #ffffff #e39800 #e39800; }
.border-0-1-0-1 { border-width:1px; border-style:solid; border-color:#ffffff #e39800 #ffffff #e39800; }
.border-0-1-0-1 { border-width:1px; border-style:solid; border-color:#ffffff #e39800 #ffffff #e39800; }

/* Matrix Hintergrundfarbe*/
.matrix.bg { background:#fff; }
.bg-ohne { background:none;}
.bg-transparent { background:transparent;}
.bg-blue { background:#7f7fff;}
.bg-red { background:#ff7f7f;}
.bg-yellow { background:#ffff7f;}
.bg-green { background:#7fff7f;}
.bg-grey { background:grey;}
.bg-black { background:#e39800; }
