/*
 *  psd2css.css
 *
 *  This is your external CSS style sheet. It defines all of the CSS styles that you
 *  are using in your page.  If you are going to create multiple pages from the same
 *  PSD file (like a template), you will share this CSS style sheet between the various
 *  pages.
 *
 *  This file was originally generated at http://psd2cssonline.com 
 *  August 5, 2009, 9:20 am with psd2css Online version 1.44
 *
 */

body	{  background-color: #f5f5f5;   background-image: url(bg-gradient.png);  background-repeat: repeat-x;  background-attachment:scroll;  background-position: top; }
body	{ font:normal 14px "Arial", Tahoma, Arial, sans-serif; color:#666; overflow-y: scroll;}
#container {position: relative;  width: 1024px; height: 805px; margin-left: auto; margin-right: auto;  }
#container-index {position: relative;  width: 1024px; height: 1015px; margin-left: auto; margin-right: auto;  }
#container-features {position: relative;  width: 1024px; height: 1094px; margin-left: auto; margin-right: auto;  }
#container-games {position: relative;  width: 1024px; height: 1094px; margin-left: auto; margin-right: auto;  }
#container-games p { font-family:arial; color:#bbb; font-size:14px; }


p	{ position:relative; top:2px; line-height:14px; }
h1 { font-family:arial; color:#000; font-size:16px; font-weight:bold; letter-spacing:-1px; }
h2 { font-family:arial; color:#fff; font-size:16px; font-weight:bold; text-align:center; margin-top: 14px }
h3 { font-family:arial; color:#666; font-size:12px; text-align:center; font-weight: 100; margin-top: 22px }

#footer 	{ position: relative; font-size:12px; width: 1004px; height: 60px; background-image:url(footer.png); margin-left: auto;	margin-right: auto;}
#footer p { margin-bottom: 1em; }
#footer p.copy { float: left; width: 52%; margin: 22px 0 9px 23px; }
#footer li { float: right; margin-top:22px; margin-right:8px; padding-right:22px  }

#space { position: relative; font-size:12px; text-align:center; width: 1004px; height: 100px; padding-top: 8px; margin-left: auto; margin-right: auto;}

#navbar {  
    background:url("navbar.png") 0 0 no-repeat;  
    position: relative;
	top:140px;
	width:1004px;  
    height:60px;  
    margin-left:10px;  
    padding:0;  
    } 
#navbar li span { display: none; }  
  
#navbar li { float:left; list-style:none; position:relative; }  
  
#navbar li, #navbar a {  
    height:60px;    /* Each button must have the same height, define it here */  
    display:block;  
    margin:0;  
    padding:0;  
    }  
  
li#index { margin-bottom:0px; width:130px; } 
li#features, li#games, li#environments, li#techspecs, li#businessmodel, li#customworks { margin-bottom:0px; width:124px; }  
li#ordernow { margin:0; width:130px; }

#index a:hover { background:url("navbar.png") -0px  -60px no-repeat; } 
#features a:hover { background:url("navbar.png") -130px  -60px no-repeat; }  
#games a:hover { background:url("navbar.png") -254px  -60px no-repeat; }  
#environments a:hover { background:url("navbar.png") -378px  -60px no-repeat; }  
#techspecs a:hover { background:url("navbar.png") -502px -60px no-repeat; } 
#businessmodel a:hover { background:url("navbar.png") -626px -60px no-repeat; } 
#customworks a:hover { background:url("navbar.png") -750px -60px no-repeat; } 
#ordernow a:hover { background:url("navbar.png") -874px -60px no-repeat; } 

#index a.active { background:url("navbar.png") -0px  -120px no-repeat; } 
#features a.active { background:url("navbar.png") -130px  -120px no-repeat; }  
#games a.active { background:url("navbar.png") -254px  -120px no-repeat; }  
#environments a.active { background:url("navbar.png") -378px  -120px no-repeat; }  
#techspecs a.active { background:url("navbar.png") -502px -120px no-repeat; } 
#businessmodel a.active { background:url("navbar.png") -626px -120px no-repeat; } 
#customworks a.active { background:url("navbar.png") -750px -120px no-repeat; } 
#ordernow a.active { background:url("navbar.png") -874px -120px no-repeat; } 

#about-text {
	position: absolute;
	left: 50px;
	top: 250px;
	width: 442px;
	height: 304px;
}
#jobs-text {
	position: absolute;
	left: 50px;
	top: 456px;
	width: 364px;
	height: 306px;
}
#contact-mail {
	position: absolute;
	left: 730px;
	top: 522px;
	width: auto;
	height: auto;
}

#contact-text {
	position: absolute;
	left: 730px;
	top: 265px;
	width: auto;
	height: auto;
}


#default-panel {position: absolute;	background-image: url(default-panel.png); left: 12px;	top: 212px;	width: 1004px;	height: 604; }



/* You named this layer solidicon-logo */
#Layer-4 {
  position: absolute;
  left: 237px;
  top: 20px;
  width: 542px;
  height: 135px;
}

/* You named this layer faq_page_empty */
#Layer-5 {
  position: absolute;
  left: 576px;
  top: 256px;
  width: 128px;
  height: 128px;
  z-index: 5;
}

/* You named this layer about_page_empty */
#Layer-6 {
  position: absolute;
  left: 576px;
  top: 256px;
  width: 128px;
  height: 128px;
  z-index: 6;
}

/* You named this layer contact_page_empty */
#Layer-7 {
  position: absolute;
  left: 7px;
  top: 199px;
  width: 512px;
  height: 696px;
  z-index: 7;
}

/* You named this layer product-application */
#Layer-8 {
	position: absolute;
	left: 9px;
	top: 14px;
	width: 499px;
	height: 683px;
	z-index: 8;
}

/* You named this layer index_page_empty */
#Layer-9 {
	position: absolute;
	left: 14px;
	top: 213px;
	width: 128px;
	height: 128px;
	z-index: 9;
}

/* Here are some examples of how you might want to change the
 * look and behavior of the links on your page.  Some examples for
 * further customization are included in comments.  */
a { cursor: pointer; }
a:link { color: #666; text-decoration:none; }
a:visited { color: #666; text-decoration:none; }
a:hover {  color: #ffa01e; text-decoration:none; */
  /* font-weight: bold; */
}

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.gallerycontainer{
	position: absolute;
	left: 33px;
	top: 356px;
	width:auto;
	height:auto;
	
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
left: -1000px;
border: 1px #CCCCCC;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: -255px;
left: -2px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>