css navigation: #4

table version

red link	purple link	orange link
pink link	green link	lime link
teal link	navy link	fuchsia link

HEAD

a.tvm-table, a.tvm-table:active, a.tvm-table:link, a.tvm-table:visited {
	color: #fff;
	background: #000;
	font-size: 9px;
	text-decoration: none;
	font-family:century gothic;
	font-weight: normal;
	border: 0px;
	text-align: center;
	font-style: normal;
	display: block;
	width:80px;
	height: 80px;
	border: none;
	text-transform: uppercase; 
	margin: 1px; 
	letter-spacing: 1px;
	line-height: 80px;
	transition: 0.5s;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	text-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

a.tvm-table:hover {
	color: #000;
	text-shadow: none;
	transition: 0.5s;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

a.red:hover{
	background: red;
}

a.purple:hover{
	background: purple;
}

a.pink:hover{
	background: pink;
}

a.orange:hover{
	background: orange;
}

a.lime:hover{
	background: lime;
}

a.navy:hover{
	background: navy;
}

a.teal:hover{
	background: teal;
}

a.green:hover{
	background: green;
}

a.fuchsia:hover{
	background: fuchsia;
}

BODY

<table  cellspacing="0" cellpadding="0">
	<tr>
		<td><a href="http://thevioletmaniac.narod.ru/" class="tvm-table red" target="">red link</a></td>
		<td><a href="http://thevioletmaniac.narod.ru/" class="tvm-table purple" target="">purple link</a></td>
		<td><a href="http://thevioletmaniac.narod.ru/" class="tvm-table orange" target="">orange link</a></td>
	</tr>
	<tr>
		<td><a href="http://thevioletmaniac.narod.ru/" class="tvm-table pink" target="">pink link</a></td>
		<td><a href="http://thevioletmaniac.narod.ru/" class="tvm-table green" target="">green link</a></td>
		<td><a href="http://thevioletmaniac.narod.ru/" class="tvm-table lime" target="">lime link</a></td>
	</tr>
	<tr>
		<td><a href="http://thevioletmaniac.narod.ru/" class="tvm-table teal" target="">teal link</a></td>
		<td><a href="http://thevioletmaniac.narod.ru/" class="tvm-table navy" target="">navy link</a></td>
		<td><a href="http://thevioletmaniac.narod.ru/" class="tvm-table fuchsia" target="">fuchsia link</a></td>
	</tr>
</table>

div verison

red link purple link orange link pink link green link lime link teal link navy link fuchsia link

HEAD

a.tvm-div, a.tvm-div:active, a.tvm-div:link, a.tvm-div:visited {
	color: #fff;
	background: #000;
	font-size: 9px;
	text-decoration: none;
	font-family:century gothic;
	font-weight: normal;
	border: 0px;
	text-align: center;
	font-style: normal;
	display: block;
	float: left;
	width:80px;
	height: 80px;
	border: none;
	text-transform: uppercase; 
	margin: 1px; 
	letter-spacing: 1px;
	line-height: 80px;
	transition: 0.5s;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	text-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

a.tvm-div:hover {
	color: #000;
	transition: 0.5s;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	text-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.clear{
	clear: both;
}

a.red:hover{
	background: red;
}

a.purple:hover{
	background: purple;
}

a.pink:hover{
	background: pink;
}

a.orange:hover{
	background: orange;
}

a.lime:hover{
	background: lime;
}

a.navy:hover{
	background: navy;
}

a.teal:hover{
	background: teal;
}

a.green:hover{
	background: green;
}

a.fuchsia:hover{
	background: fuchsia;
}