/* Rollover navigation css */

#proj1 a {display: block; width: 92px; height: 91px; background-image: url("images/Project_01.jpg"); background-position:top; background-repeat:no repeat;}
#proj1 a:hover {background-position:0 -91px;}

#proj2 a {display: block; width: 92px; height: 91px; background-image: url("images/Project_02.jpg"); background-position:top; background-repeat:no repeat;}
#proj2 a:hover {background-position:0 -91px;}

#proj3 a {display: block; width: 92px; height: 91px; background-image: url("images/Project_03.jpg"); background-position:top; background-repeat:no repeat;}
#proj3 a:hover {background-position:0 -91px;}

#proj4 a {display: block; width: 92px; height: 91px; background-image: url("images/Project_04new.jpg"); background-position:top; background-repeat:no repeat;}
#proj4 a:hover {background-position:0 -91px;}

#proj5 a {display: block; width: 92px; height: 91px; background-image: url("images/Project_05.jpg"); background-position:top; background-repeat:no repeat;}
#proj5 a:hover {background-position:0 -91px;}

#proj6 a {display: block; width: 92px; height: 91px; background-image: url("images/Project_06new.jpg"); background-position:top; background-repeat:no repeat;}
#proj6 a:hover {background-position:0 -91px;}

#proj7 a {display: block; width: 92px; height: 91px; background-image: url("images/Project_07.jpg"); background-position:top; background-repeat:no repeat;}
#proj7 a:hover {background-position:0 -91px;}

#proj8 a {display: block; width: 92px; height: 91px; background-image: url("images/Project_08.jpg"); background-position:top; background-repeat:no repeat;}
#proj8 a:hover {background-position:0 -91px;}

#proj9 a {display: block; width: 92px; height: 91px; background-image: url("images/Project_09.jpg"); background-position:top; background-repeat:no repeat;}
#proj9 a:hover {background-position:0 -91px;}

#proj10 a {display: block; width: 92px; height: 91px; background-image: url("images/Project_10.jpg"); background-position:top; background-repeat:no repeat;}
#proj10 a:hover {background-position:0 -91px;}

#proj11 a {display: block; width: 92px; height: 91px; background-image: url("images/Project_11.jpg"); background-position:top; background-repeat:no repeat;}
#proj11 a:hover {background-position:0 -91px;}


/* The idea here is to create a link block of given dimensions and populate it with an image that contains both the inactive and hover image states.  The a:hover
pseudo-class will shift the background 91px down the y-axis, making it seem like a rollover is happening.  No javascript, no bloat, no lag time. */