#gridContainer
{
  position:absolute;top:40px;left:0px;z-index:2;
  width:828px;height:562px;
}
* {-moz-box-sizing: border-box; } 

.gridLine {background-color:white;}

.gridHorizontal
{
  position:absolute;z-index:2;left:0px;
  width:828px;height:11px;
}
.gridVertical
{
  position:absolute;z-index:2;top:0px;
  width:11px;height:562px;
}

.gridMiddleLineOne    {top:86px;}
.gridMiddleLineTwo    {top:216px;}
.gridMiddleLineThree  {left:209px;}


/* grid squares and basix state */
.gridSquare 
{
  position:absolute;z-index:1;
  overflow:hidden;
  cursor:pointer;cursor:hand;
}

.gridSquareTwo    {background-color:#b1c772;}
.gridSquareThree  {background-color:#74899c;}


.gridSquareOne 
{
  top:39px;left:46px;
  width:163px;height:47px;
}
.gridSquareTwo 
{
  top:39px;left:220px;
  width:264px;height:47px;
}
.gridSquareThree 
{
  top:97px;left:46px;
  width:163px;height:119px;
}
.gridSquareFour 
{
  top:97px;left:220px;
  width:264px;height:119px;
}
.gridSquareFive 
{
  top:227px;left:46px;
  width:163px;height:198px;
}
.gridSquareSix 
{
  top:227px;left:220px;
  width:264px;height:198px;
}

/* grid items */
.gridContent 
{
  padding:4px 8px 4px 4px;
}

.gridContent h2 
{
  color:white;
  font-size:19px;
  margin:0.5em 0 0.2em 0;
}

.gridContent p {margin:0 0 0.5em 0;}

.gridContent a {color:black;}
.gridContent a:hover {color:black;text-decoration:none;}


.gridTitle
{
  color:#3270a1;
  margin-top:0;
  margin-bottom:0.3em;
  font-family:verdana;
  font-weight:bold;
  font-size:17px;
}

.gridSquareTwo .gridTitle   {color:#6e9334;}
.gridSquareThree .gridTitle {color:#98c6e7;}

.gridBackground 
{
  position:absolute;top:0px;left:0px;
  width:1000px;height:1000px;
  z-index:-1;
  background-color:white;
  opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

/* images and special items */

/* some of these can be found in bg.css and bg_ie6.css, due to bgimage transparancy complications*/

.gridContent * {display:none;}
.gridContent .gridTitle {display:block;}

.gridStart {}

/* start state */
.gridStart #gridFourRegion {right:0px;}
.gridStart .gridSquareThree h2 {display:block;}


/* state One */
.gridStateOne .gridSquareOne .gridBackground  {opacity:0.6;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);}
.gridStateOne .gridMiddleLineOne      {top:290px;}
.gridStateOne .gridMiddleLineTwo      {top:352px;}
.gridStateOne .gridMiddleLineThree    {left:310px;}

.gridStateOne .gridSquareOne     {                     width:264px;height:251px;cursor:default;}
.gridStateOne .gridSquareTwo     {          left:321px;width:163px;height:251px;}
.gridStateOne .gridSquareThree   {top:301px;           width:264px;height:51px;}
.gridStateOne .gridSquareFour    {top:301px;left:321px;width:163px;height:51px;}
.gridStateOne .gridSquareFive    {top:362px;           width:264px;height:70px;}
.gridStateOne .gridSquareSix     {top:362px;left:321px;width:163px;height:70px;}

.gridStateOne .gridSquareOne .gridContent * {display:block;}

/* state Two */
.gridStateTwo .gridMiddleLineOne      {top:290px;}
.gridStateTwo .gridMiddleLineTwo      {top:352px;}

.gridStateTwo .gridSquareOne     {                     width:163px;height:251px;}
.gridStateTwo .gridSquareTwo     {          left:220px;width:264px;height:251px;cursor:default;}
.gridStateTwo .gridSquareThree   {top:301px;           width:163px;height:51px;}
.gridStateTwo .gridSquareFour    {top:301px;left:220px;width:264px;height:51px;}
.gridStateTwo .gridSquareFive    {top:362px;           width:163px;height:70px;}
.gridStateTwo .gridSquareSix     {top:362px;left:220px;width:264px;height:70px;}

.gridStateTwo .gridSquareTwo .gridContent * {display:block;}

/* state Three */
.gridStateThree .gridMiddleLineTwo   {top:352px;}
.gridStateThree .gridMiddleLineThree {left:310px;}

.gridStateThree .gridSquareOne   {                     width:264px;}
.gridStateThree .gridSquareTwo   {          left:321px;width:163px;}
.gridStateThree .gridSquareThree {                     width:264px;height:255px;}
.gridStateThree .gridSquareFour  {          left:321px;width:163px;height:255px;cursor:default;}
.gridStateThree .gridSquareFive  {top:362px;           width:264px;height:70px;}
.gridStateThree .gridSquareSix   {top:362px;left:321px;width:163px;height:70px;}

.gridStateThree .gridSquareThree .gridContent * {display:block;}


/* state Four */
.gridStateFour .gridSquareFour .gridBackground  {opacity:0.6;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);}
.gridStateFour .gridMiddleLineTwo     {top:352px;}
.gridStateFour .gridMiddleLineThree   {left:209px;}

.gridStateFour .gridSquareOne    {                     width:163px;}
.gridStateFour .gridSquareTwo    {                     width:264px;}
.gridStateFour .gridSquareThree  {                     width:163px;height:255px;}
.gridStateFour .gridSquareFour   {                     width:264px;height:255px;cursor:default;}
.gridStateFour .gridSquareFive   {top:362px;           width:163px;height:70px;}
.gridStateFour .gridSquareSix    {top:362px;left:220px;width:264px;height:70px;}
.gridStateFour .gridSquareThree h2 {display:block;}

.gridStateFour .gridSquareFour .gridContent * {display:block;}


/* state Five */
.gridStateFive .gridSquareFive .gridBackground  {opacity:0.6;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);}
.gridStateFive .gridMiddleLineOne    {top:86px;}
.gridStateFive .gridMiddleLineTwo    {top:144px;}
.gridStateFive .gridMiddleLineThree  {left:310px;}

.gridStateFive .gridSquareOne    {                     width:264px;}
.gridStateFive .gridSquareTwo    {          left:321px;width:163px;}
.gridStateFive .gridSquareThree  {                     width:264px;height:47px;}
.gridStateFive .gridSquareFour   {          left:321px;width:163px;height:47px;}
.gridStateFive .gridSquareFive   {top:155px;           width:264px;height:278px;cursor:default;}
.gridStateFive .gridSquareSix    {top:155px;left:321px;width:163px;height:278px;}

.gridStateFive #gridFiveBook  {top:199px;left:25px;}
.gridStateFive #gridSixFarmer {top:180px;left:99px;}

.gridStateFive .gridSquareFive .gridContent * {display:block;}


/* state Six */
.gridStateSix .gridSquareSix .gridBackground  {opacity:0.6;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);}
.gridStateSix .gridMiddleLineOne     {top:86px;}
.gridStateSix .gridMiddleLineTwo     {top:144px;}
.gridStateSix .gridMiddleLineThree   {left:209px;}

.gridStateSix .gridSquareOne     {                     width:163px;}
.gridStateSix .gridSquareTwo     {          left:220px;width:264px;}
.gridStateSix .gridSquareThree   {                     width:163px;height:47px;}
.gridStateSix .gridSquareFour    {          left:220px;width:264px;height:47px;}
.gridStateSix .gridSquareFive    {top:155px;           width:163px;height:278px;}
.gridStateSix .gridSquareSix     {top:155px;left:220px;width:264px;height:278px;cursor:default;}

.gridStateSix #gridFiveBook  {top:199px;left:25px;}
.gridStateSix #gridSixFarmer {top:180px;left:200px;}

.gridStateSix .gridSquareSix .gridContent * {display:block;}