/* This wrapper keeps the entire layout centered and keeps text aligned correctly  +9 */

#xc_wrapper {
ÊÊÊwidth: 1011px;
   height: 630px;
   text-align: left;
   position: absolute;
   top: 0px;
   left: 0px;
   margin-left: -4px;
}


.gsgrey10  { font-family:  Arial Narrow, Arial, Helvetica, Verdana, sans-serif;font-size: 12px; color:#999999; text-decoration: none; }

.gseyebrow { font-family:  Arial Narrow, Arial, Helvetica, Verdana, sans-serif; font-size: 12px; font-weight: bold; color: #00CCFF; text-decoration: none;}


.white  { color: #FFFFFF; }
.black  { color: #000000; }
.bold   { font-weight: bold; }
.left   { text-align: left; }
.right  { text-align: right; }
.center { text-align: center; }


img.left { float:left; }
img.Magazine_Covers { text-align: center; width: 166px; height: 187px; border: 2px solid black;}
img.Magazine_Covers:hover { border: 2px solid red;}

img.Event_Banners { text-align: center; width: 84px; height: 54px; border: 2px solid black;}
img.Event_Banners_lite { text-align: center; width: 84px; height: 54px; border: 2px solid red;}

img.Event_Banners:hover { border: 2px solid red;}

/* The screen is the overlay and the inside content is the contents of the frame main. */

img.Screen { width: 950px; height: 520px;}
img.CJ { width: 200px; height: 167px;}


iframe.Inside_Content { width: 936px; height: 494px; overflow: hidden;}

html {
        background: url(xancastle_v3/images/aurora.png) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

body { background-color: rgb(35,37,39); color: #DDDDCC;}

a:hover.gseyebrow { color:#FFCC66; text-decoration: none;}

div.center { text-align:center; } 


#GeoTrust { position:absolute;

         left: 38px;
         
         top:  625px;
         
         width: 115px;
         
         height: 55px;
         
         border: 1px solid black;
         
      background-color: #DDDDCC;
         
         z-index: 60000;

         }
/*
===================================
This is the 1and1 affiliate button
at the bottom center of the page
=================================
*/
#oneandone_affiliate { position:absolute;

         left: 823px;
         
         top:  625px;
         
         width: 140px;
         
         height: 28px;
         
         border: 1px solid black;
         
      background-color: #5C5C5F;
         
         z-index: 60000;

         }
/*
===================================
This is the CJ Advertisement
that appears on the top right of every
page on the site.
=================================
*/
#CJ_Square { position:absolute;

         left: 803px;
         
         top:  108px;
         
         width: 200px;
         
         height: 167px;
         
         background-color: #5C5C5F;
         
         z-index: 60000;

         }
/*
===================================
This is the CJ Advertisement
that appears on the bottom right of every
page on the site.
=================================
*/
#CJ_Square2 { position:absolute;

         left: 803px;
         
         top:  280px;
         
         width: 200px;
         
         height: 167px;
         
         background-color: #5C5C5F;
         
         z-index: 60000;

         }

/*
===================================
This is the space where the feature
video appears. The feature video
is whatever I choose to be there.
It can be a product review or a
video game trailer.
=================================
*/
#Feature_Video { position:absolute;

         left: 803px;
         
         top:  449px;
         
         width: 200px;
         
         height: 167px;
         
/*         border: 1px solid black; */

         z-index: 60000;

         }




/*
=================================
This is a big title used for every
section of the site to announce
what area you are in. A welcome
to this area tag. Top zero is 
actually 14. Left 238 is actually
250.
=================================
*/ 

#splash {position:absolute;
   
        left: 286px;
        
        top: 0px;
        
        width: 500px;
        
        height: 360px;
        
        z-index: 25;
        
        }


/*
=================================
This is a big title used for every
section of the site to announce
what area you are in. A welcome
to this area tag. Top zero is 
actually 14. Left 238 is actually
250.
=================================
*/ 

#welcome {position:absolute;
   
        left: 203px;
        
        top: 0px;
        
        width: 725px;
        
        height: 360px;
        
        z-index: 25;
        
        }
        
        
#landing {position:relative;
   
        left: 20px;
        
        top: 0px;
        
        width: 630px;
        
        height: 205px;
        
        z-index: 25;
        
        color:black;
        
        }        
        
/*
=================================
This is the starting corner of the
content area where the main
features appear. Its a table so
only 72 pixel square is needed.
There is a 4 pixel boundry between
each of the table data elements so
we go on a multiple of 76 rather
than 72. 304 is 5 and 152 is 3.
So the following is 5 icons spaces
over and 3 icon spaces down.
=================================
*/ 

#Features {position:absolute;
   
        left: 124px;
        
        top: 23px;
        
        width: 72px;
        
        height: 72px;
        
        z-index: 9000;
        
        }
        
        
/*
=================================
This is the starting corner of the
content area where the main
features appear. Its a table so
only 72 pixel square is needed.
There is a 4 pixel boundry between
each of the table data elements so
we go on a multiple of 76 rather
than 72. 304 is 5 and 152 is 3.
So the following is 5 icons spaces
over and 3 icon spaces down.
=================================
*/ 

#Magazine_Features_Row1_Col1 {position:absolute;
   
        left: 30px;
        
        top: 23px;
        
        width: 144px;
        
        height: 187px;
        
        z-index: 9000;
        
        }
        
#Magazine_Features_Row1_Col2 {position:absolute;
   
        left: 179px;
        
        top: 23px;
        
        width: 144px;
        
        height: 187px;
        
        z-index: 9000;
        
        }                

#Magazine_Features_Row1_Col3 {position:absolute;
   
        left: 328px;
        
        top: 23px;
        
        width: 144px;
        
        height: 187px;
        
        z-index: 9000;
        
        }


/*
=================================
This is the starting corner of the
content area where the main
features appear. Its a table so
only 72 pixel square is needed.
There is a 4 pixel boundry between
each of the table data elements so
we go on a multiple of 76 rather
than 72. 304 is 5 and 152 is 3.
So the following is 5 icons spaces
over and 3 icon spaces down.
=================================
*/ 

#Event_Features {position:absolute;
   
        left: 124px;
        
        top: 219px;
        
        width: 144px;
        
        height: 101px;
        
        z-index: 9000;
        
        }
        
/*
=================================
This is the starting corner of the
content area where the main
features appear. Its a table so
only 72 pixel square is needed.
There is a 4 pixel boundry between
each of the table data elements so
we go on a multiple of 76 rather
than 72. 304 is 5 and 152 is 3.
So the following is 5 icons spaces
over and 3 icon spaces down.
=================================
EVERYTHING +170
*/ 

#Link_Features_Row1_Col1 {position:absolute;
   
        left: 15px;
        
        top: 23px;
        
        width: 166px;
        
        height: 108px;
        
        z-index: 9000;
        
        }
        
#Link_Features_Row1_Col2 {position:absolute;
   
        left: 185px;
        
        top: 23px;
        
        width: 166px;
        
        height: 108px;
        
        z-index: 9000;
        
        }     
 
#Link_Features_Row1_Col3 {position:absolute;
   
        left: 355px;
        
        top: 23px;
        
        width: 166px;
        
        height: 108px;
        
        z-index: 9000;
        
        }                

#Link_Features_Row1_Col4 {position:absolute;
   
        left: 525px;
        
        top: 23px;
        
        width: 166px;
        
        height: 108px;
        
        z-index: 9000;
        
        }                

#Link_Features_Row1_Col5 {position:absolute;
   
        left: 695px;
        
        top: 23px;
        
        width: 166px;
        
        height: 108px;
        
        z-index: 9000;
        
        }

#Link_Features_Row1_Col6 {position:absolute;
   
        left: 865px;
        
        top: 23px;
        
        width: 166px;
        
        height: 108px;
        
        z-index: 9000;
        
        }

#Link_Features_Row1_Col7 {position:absolute;
   
        left: 1035px;
        
        top: 23px;
        
        width: 166px;
        
        height: 108px;
        
        z-index: 9000;
        
        }                   

/*
=================================
The Portal icons near the top of
the screen. There are 7 portals.
=================================
*/ 

#Portal_Menu {position:absolute;
   
        left: 141px;
        
        top: 20px;
        
        width: 670px;
        
        height: 60px;
        
        z-index: 9000;
        
        }
         


/*
=================================
MacEvents Division
=================================
*/ 

#MacEvents {position:absolute;
   
        left: 280px;
        
        top: 128px;
        
        width: 480px;
        
        height: 364px;
        
        z-index: 9000;
        

        }                   
/*
=================================
SIGGRAPH Division
=================================
*/ 

#SIGGRAPH {position:absolute;
   
        left: 142px;
        
        top: 128px;
        
        width: 720px;
        
        height: 342px;
        
        z-index: 9000;
        
        }
        
/*
=================================
E3 Division
=================================
*/ 

#E3 {position:absolute;
   
        left: 280px;
        
        top: 128px;
        
        width: 432px;
        
        height: 364px;
        
        z-index: 9000;
        
        } 
        
/*
=================================
E3 Division 2008
=================================
*/ 

#E3_2008 {position:absolute;
   
        left: 256px;
        
        top: 78px;
        
        width: 480px;
        
        height: 418px;
        
        z-index: 9000;
        
        }        
                       

/*
=================================
GDC Division
=================================
*/ 

#GDC {position:absolute;
   
        left: 280px;
        
        top: 128px;
        
        width: 480px;
        
        height: 364px;
        
        z-index: 9000;
        
        }

/*
=================================
ONLINE SUPPORT Division
=================================
*/ 

#Online_Support {position:absolute;
   
        left: 0px;
        
        top: 5px;
        
        width: 480px;
        
        height: 291px;
        
        z-index: 1;
        
        }   



/*
=================================
This is the background that appears
on every page. (the skin) top was 16
now 120 -- width is same as screen
class defined above.
=================================
*/           

         

#backgd {position:absolute;
   
        left: 28px;
        
        top: 100px;
        
        width: 950px;
        
        height: 520px;
        
        z-index: 29;
        
        overflow: hidden;
        
        }



/*
=================================
This is the boundry of where the
content of any given page will be
residing in. (13,16,950,468,300)
top was 14 now 118 
Should be the same as the defined
iFrame Inside_Content. 13 more left than backgd
=================================
*/             
#insideframe {position:absolute;

        left: 38px;

        top: 116px;

        width: 936px;
        
        height: 494px;
                
        z-index: 30;
        
        overflow: hidden;

       }




/*
=================================
This is the donation button that
appears at the bottom of every
page on the site.
=================================
*/             
#donation_button {position:absolute;

        left: 547px;

        top: 394px;

        width: 74px;

        height: 21px;

        z-index: 30;

       }



/*
=================================
This is the live chat room that
is available on every page of the
side via a show chat button.
(hidden by default)
=================================
*/      
        
  #livechatroom_frame {position:absolute;
   
        left: 12px;
        
        top: 14px;
        
        width: 987px;
        
        height: 472px;
        
        visibility: hidden;
        
        z-index: 50000;
        
        }
        

/*
=================================
This is the live chat room that
is available on any page in the
site.
=================================
*/      
        
#livechatroom {position:absolute;
   
        left: 0px;
        
        top: 0px;
        
        width: 987px;
        
        height: 472px;
                
        z-index: 100;
        
        }      
        
 
                        
/*
=================================
This is the boundry frame of the
navigiation bar. Top was 0 
Left was 0 width was 1010 17 987
=================================
*/       
#navbarframe {position:absolute;
   
        left: 15px;
        
        top: 832px;
        
        width: 1000px;
        
        height: 17px;
        
        z-index: 3000;
        
        }       

/*
=================================
Chat Icon
An animated chat icon shown on the
main page in the bottom
right hand corner.
=================================
*/           
#Chat_Icon {position:absolute;
        
        left: 925px;
        
        top: 520px;
        
        width: 71px;
        
        height: 55px;
        
        z-index: 15000;
        
        }
       

/*
=================================
This is the boundry frame of the
footer with copyright information.
=================================
*/           
#crfooter {position:absolute;
        
        left: 280px;
        
        top: 610px;
        
        width: 300px;
        
        height: 90px;
                
        z-index: 15000;
        
        font-size: 10px;
        
        }


/*
=================================
SOFTPEDIA 100% CLEAN AWARD
This is the badge shown on the
footer that says its 100% CLEAN
=================================
*/           
#softpedia_badge {position:absolute;
        
        left: 710px;
        
        top: 450px;
        
        width: 170px;
        
        height: 116px;
        
        z-index: 20000;
        
        }

/*
=================================
This is the position of the signature
on the support page right below the
photo of me.
=================================
*/
#Support_Signature { position:absolute;

        left: 15px;
        
        top: 295px;
        
        width: 400px;
        
        height: 25px;
        
        z-index: 9000;
        
        }


/*
=================================
This is the icon for the porsche
screen saver.
=================================
*/ 
        
#porschegt3rs_ss_icon {position:absolute;
        
        left: 280px;
        
        top: 33px;
        
        width: 181px;
        
        height: 139px;
        
        z-index: 30000;
        
        }

/*
=================================
This is the label for the porsche
screen saver.
=================================
*/ 
        
#porschegt3rs_ss_label {position:absolute;
        
        left: 280px;
        
        top: 173px;
        
        width: 239px;
        
        height: 21px;
        
        z-index: 30000;
        
        }


/*
=================================
This is the download button for 
the porsche screen saver.
=================================
*/ 
        
#porschegt3rs_ss_download {position:absolute;
        
        left: 149px;
        
        top: 146px;
        
        width: 179px;
        
        height: 21px;
        
        z-index: 40000;
        
        }

/*
=================================
This is the icon for the game
MazerWorld Fusion.
=================================
*/ 
        
#mazerworld_fusion_icon {position:absolute;
        
        left: 30px;
        
        top: 33px;
        
        width: 181px;
        
        height: 139px;
        
        z-index: 30000;
        
        }

/*
=================================
This is the label for the game
MazerWorld Fusion
=================================
*/ 
        
#mazerworld_fusion_label {position:absolute;
        
        left: 30px;
        
        top: 173px;
        
        width: 239px;
        
        height: 21px;
        
        z-index: 30000;
        
        }


/*
=================================
This is the download button for 
the game MazerWorld Fusion.
=================================
*/ 
        
#mazerworld_fusion_download {position:absolute;
        
        left: 390px;
        
        top: 176px;
        
        width: 179px;
        
        height: 21px;
        
        z-index: 40000;
        
        }



/*
=================================
This is the PayPal verified Seal
that appears in the shareware section.
=================================
*/ 
        
#paypal_verified {position:absolute;
        
        left: 760px;
        
        top: 360px;
        
        width: 170px;
        
        height: 116px;
        
        z-index: 20000;
        
        }

        
/*
=================================
This is a small icon of the corp
logo and myself toggled between
Contact and About Xan Software.
=================================
*/                
                
#corplogo {position:absolute;
        
        left: 795px;
        
        top: 95px;
        
        width: 90px;
        
        height: 90px;
        
        z-index: 1000;
        
        }              
                
h1      {
         font-family:  Arial Narrow, Arial, Helvetica, Verdana, sans-serif;font-size: 18px;
        }        
        
h2      {
         font-family: Arial Narrow, Arial, Helvetica, Verdana, sans-serif;font-size: 16px;
        }        
        
h3      {
         font-family:  Arial Narrow, Arial, Helvetica, Verdana, sans-serif;font-size: 14px;
        }
                
h4      {
         font-family:  Arial Narrow, Arial, Helvetica, Verdana, sans-serif;font-size: 12px;
        }
        
h5      {
         font-family:  Arial Narrow, Arial, Helvetica, Verdana, sans-serif;font-size: 10px;
        }
h6      {
         font-family:  Arial Narrow, Arial, Helvetica, Verdana, sans-serif;font-size: 9px;
        }
a.plain { text-decoration: none; color: rgb(0, 204, 255); }
a.plain:hover { color: rgb(255, 204, 0); }