﻿/* basic grid format */
table.grid tr, table.grid td, table.grid a{
  margin: 0px;
  padding:0px;
  border: 0px;
}

table.grid, table.grid tr, table.grid td{
  border-spacing:3px
}

table.grid td{
  width:190px;
  height:130px;
}

table.grid a{
  display:block;
  width:190px;
  height:130px;
  color:#FFFFFF;
  outline: none;
  text-decoration:none;
  vertical-align:bottom;
  text-align:center;
  font-weight: bold;
  font-size: 22px;
  background: url(../images/allinone2010.jpg);
}

table.grid a span { display: none; position: relative;}
table.grid a:hover span { 
  display: block;
  background: rgb(70, 70, 70);
  background: rgba(0, 0, 0, 0.6);
}

/*column one*/
table.grid a.biography, table.grid a:link.biography, table.grid a:visited.biography {height:396px; background-position:0px -396px;}
table.grid a:hover.biography, table.grid a:focus.biography { background-position:0px 0px;}
table.grid a:hover.biography span {top: 280px;}


table.grid a.projects, table.grid a:link.projects, table.grid a:visited.projects {width:383px; background-position:-190px 0px;}
table.grid a:hover.projects, table.grid a:focus.projects {background-position:-190px -130px;}
table.grid a:hover.projects span {top: 80px;}

table.grid a.repertoire, table.grid a:link.repertoire, table.grid a:visited.repertoire {background-position:-573px -130px;}
table.grid a:hover.repertoire, table.grid a:focus.repertoire {background-position:-573px 0px;}
table.grid a:hover.repertoire span {top: 80px;}

/*column two*/
table.grid a.masterclasses, table.grid a:link.masterclasses, table.grid a:visited.masterclasses {background-position:-190px -390px;}
table.grid a:hover.masterclasses, table.grid a:focus.masterclasses {background-position:-190px -260px;}
table.grid a:hover.masterclasses span {top: 80px;}

table.grid a.photos, table.grid a:link.photos, table.grid a:visited.photos {background-position:-380px -390px;}
table.grid a:hover.photos, table.grid a:focus.photos {background-position:-380px -260px;}
table.grid a:hover.photos span {top: 80px;}

table.grid a.developments, table.grid a:link.developments, table.grid a:visited.developments {height:263px; background-position:-573px -523px;}
table.grid a:hover.developments, table.grid a:focus.developments { background-position:-573px -260px;}
table.grid a:hover.developments span {top: 80px;}

/*column two*/
table.grid a.links, table.grid a:link.links, table.grid a:visited.links {background-position:-190px -650px;}
table.grid a:hover.links, table.grid a:focus.links {background-position:-190px -520px;}
table.grid a:hover.links span {top: 80px;}

table.grid a.contact, table.grid a:link.contact, table.grid a:visited.contact {background-position:-380px -650px;;}
table.grid a:hover.contact, table.grid a:focus.contact {background-position:-380px -520px;}
table.grid a:hover.contact span {top: 80px;}



