Olympic links

Information

Ok... ONE final demonstration of non rectangular links with replacement of active/focus borders with css styled alternatives.

Again these links are just a styled unordered list.

The links only occupy the square 'border' area and will not be selectable until the mouse pointer is actually on each color.

The interlocking 'square hoops' have three states, normal, hover and active/focus.

nDLRt : nicholls Dotted Line Replacement technique.

==================================

#clouds {background: url(clouds.jpg); padding:2em 0; position:relative;}

ul#off {list-style-type:none; padding:0; margin:0; width:360px; height:180px; margin:2em auto; position:relative;}
ul#off li {display:block; width:0; height:0;}

ul#off a {display:block; width:0; height:0; text-decoration:none; position:absolute;}
ul#off a.blue {top:0; left:0; color:#fff;}
ul#off a.black {top:0; left:120px; color:#fff;}
ul#off a.red {top:0; left:240px; color:#fff;}
ul#off a.yellow {top:60px; left:60px; color:#000;}
ul#off a.green {top:60px; left:180px;color:#000;}

ul#off a em {position:absolute; display:block; cursor:pointer; font-style:normal; font-weight:bold;}

ul#off a em.h6 {height:20px; width:120px; font-size:10px; font-style:normal; text-align:center; font-weight:bold; line-height:20px;}
ul#off a em.h3 {height:20px; width:60px;}
ul#off a em.h2 {height:20px; width:40px;}

ul#off a em.v4 {height:80px; width:20px;}
ul#off a em.v2 {height:40px; width:20px;}
ul#off a em.v1 {height:20px; width:20px;}

ul#off a em.ha {top:0; left:0;}
ul#off a em.hb {top:0; left:60px;}
ul#off a em.hc {top:100px; left:0;}
ul#off a em.hd {top:100px; left:80px;}

ul#off a em.va {top:20px; left:0;}
ul#off a em.vb {top:20px; left:100px;}
ul#off a em.vc {top:60px; left:100px;}
ul#off a em.vd {top:80px; left:0;}

.blue em {background:transparent url(blue.gif);}
.black em {background:transparent url(black.gif);}
.red em {background:transparent url(red.gif);}
.yellow em {background:transparent url(yellow.gif);}
.green em {background:transparent url(green.gif);}

ul#off a:hover {background:#ddd;}
ul#off a.blue:hover em {background:#00c;}
ul#off a.black:hover em {background:#000;}
ul#off a.red:hover em {background:#c00;}
ul#off a.yellow:hover em {background:#ee0;}
ul#off a.green:hover em {background:#0c0;}

ul#off a:active, ul#off a:focus {background:#fff;}
ul#off a.blue:active em, ul#off a.blue:focus em {background:#66c; color:#000;}
ul#off a.black:active em, ul#off a.black:focus em {background:#666; color:#000;}
ul#off a.red:active em, ul#off a.red:focus em {background:#c66; color:#000;}
ul#off a.yellow:active em, ul#off a.yellow:focus em {background:#ee6; color:#000;}
ul#off a.green:active em, ul#off a.green:focus em {background:#6c6; color:#000;}