@charset "utf-8";
/* CSS Document */

html {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	background-color: #eaeeed;
	background-image: url(../img/bg_gradient.gif);
	background-repeat: repeat-y;
	background-position: right top;
	overflow: hidden;
}
body {
	width: 100%;
	height: 100%;
	background-image: url(../img/fish.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	margin: 0;
	padding: 0;
}
#white {
	width: 800px;
	height: 768px;
	left: 0px;
	top: 0px;
	position: absolute;
}
#nav_main {
	width: 99px;
	height: 240px;
	float: right;
	margin: 40px 0 0 0;
}
#nav_main a {
	width: 99px;
	height: 20px;
	display: block;
	background-repeat: no-repeat;
	margin: 0 0 -3px 0;
}
#nav_main span {
	width: 99px;
	height: 20px;
	display: block;
	background-repeat: no-repeat;
	margin: 0 0 -3px 0;
}
/*------------------------------------------------------------------------------------------------------ H O M E ----------*/
a.home {
	background-image: url(../img/but_home.png);
	background-position: 0px -40px;
}
a.home:hover {
	background-image: url(../img/but_home.png);
	background-position: 0px -20px;
}
span.home {
	background-image: url(../img/but_home.png);
}
/*------------------------------------------------------------------------------------------------------ B R A N D --------*/
a.brand {
	background-image: url(../img/but_brand.png);
	background-position: 0px -40px;
}
a.brand:hover {
	background-image: url(../img/but_brand.png);
	background-position: 0px -20px;
}
span.brand {
	background-image: url(../img/but_brand.png);
}
/*------------------------------------------------------------------------------------------------------ W E B ------------*/
a.web {
	background-image: url(../img/but_web.png);
	background-position: 0px -40px;
}
a.web:hover {
	background-image: url(../img/but_web.png);
	background-position: 0px -20px;
}
span.web {
	background-image: url(../img/but_web.png);
}
/*------------------------------------------------------------------------------------------------------ P R I N T --------*/
a.print {
	background-image: url(../img/but_print.png);
	background-position: 0px -40px;
}
a.print:hover {
	background-image: url(../img/but_print.png);
	background-position: 0px -20px;
}
span.print {
	background-image: url(../img/but_print.png);
}
/*------------------------------------------------------------------------------------------------------ S K E T C H ------*/
a.sketch {
	background-image: url(../img/but_sketch.png);
	background-position: 0px -40px;
}
a.sketch:hover {
	background-image: url(../img/but_sketch.png);
	background-position: 0px -20px;
}
span.sketch {
	background-image: url(../img/but_sketch.png);
}
/*------------------------------------------------------------------------------------------------------ V E C T O R ------*/
a.vector {
	background-image: url(../img/but_vector.png);
	background-position: 0px -40px;
}
a.vector:hover {
	background-image: url(../img/but_vector.png);
	background-position: 0px -20px;
}
span.vector {
	background-image: url(../img/but_vector.png);
}
/*------------------------------------------------------------------------------------------------------ M O T I O N ------*/
a.motion {
	background-image: url(../img/but_motion.png);
	background-position: 0px -40px;
}
a.motion:hover {
	background-image: url(../img/but_motion.png);
	background-position: 0px -20px;
}
span.motion {
	background-image: url(../img/but_motion.png);
}
/*------------------------------------------------------------------------------------------------------ D O W N L O A D --*/
a.download {
	background-image: url(../img/but_download.png);
	background-position: 0px -40px;
}
a.download:hover {
	background-image: url(../img/but_download.png);
	background-position: 0px -20px;
}
span.download {
	background-image: url(../img/but_download.png);
}
/*------------------------------------------------------------------------------------------------------ R E S U M E ------*/
a.resume {
	background-image: url(../img/but_resume.png);
	background-position: 0px -40px;
}
a.resume:hover {
	background-image: url(../img/but_resume.png);
	background-position: 0px -20px;
}
span.resume {
	background-image: url(../img/but_resume.png);
}
/*------------------------------------------------------------------------------------------------------ C O N T A C T ----*/
a.contact {
	background-image: url(../img/but_contact.png);
	background-position: 0px -40px;
}
a.contact:hover {
	background-image: url(../img/but_contact.png);
	background-position: 0px -20px;
}
span.contact {
	background-image: url(../img/but_contact.png);
}
/*------------------------------------------------------------------------------------------------------ F R I E N D S ----*/
a.friends {
	background-image: url(../img/but_friends.png);
	background-position: 0px -40px;
}
a.friends:hover {
	background-image: url(../img/but_friends.png);
	background-position: 0px -20px;
}
span.friends {
	background-image: url(../img/but_friends.png);
}
/*------------------------------------------------------------------------------------------------------ B L O G ----------*/
a.blog {
	background-image: url(../img/but_blog.png);
	background-position: 0px -40px;
}
a.blog:hover {
	background-image: url(../img/but_blog.png);
	background-position: 0px -20px;
}
span.blog {
	background-image: url(../img/but_blog.png);
}
/*------------------------------------------------------------------------------------------------------ P L A Y ----------*/
a.play {
	background-image: url(../img/but_play.png);
	background-position: 0px -40px;
}
a.play:hover {
	background-image: url(../img/but_play.png);
	background-position: 0px -20px;
}
span.play {
	background-image: url(../img/but_play.png);
}
/*------------------------------------------------------------------------------------------------------ T E T R I S ------*/

/*------------------------------------------------** tetris 168,308 ***/

#content_tetris {
	width: 500px;
	height: 400px;
	margin: 0;
	background-color: #ffffff;
	background-image: url(../img/bg_tetris.png);
	top: 0px;
	left: 5px;
	position: absolute;
}

#tetris {
	position: absolute;
	width: 300px;
	height: 310px;
	background: #ffffff;
	top: 20px;
	left: 180px;
}

/*------------------------------------------------** left ***/

#tetris .left {
background: #ffffff;
position: absolute;
width: 130px;
height: 100%;
left: 0px;
top: 0px;
}

/*------------------------------------------------** menu */
    
#tetris .left .menu {
	text-align: center;
}
#tetris .left input {
	font: 10px Arial;
	color: #929788;
	text-transform: uppercase;
	background: #f1f4f3;
	border: 2px solid #f1f4f3;
	margin: 1px 0 1px 0;
	height: 20px;
}
#tetris .left .menu input {
	width: 90px;
}

/*------------------------------------------------** keyboard */

#tetris .left .keyboard {
	position: absolute;
	top: 163px;
	left: 32px;
	width: 85px;
	height: 55px;
	overflow: visible;
	display: none;
}
#tetris .left .keyboard input {
	font: 11px tahoma;
	width: 25px;
	height: 25px;
	padding-bottom: 2px;
	text-transform: none;
}
* html #tetris .left .keyboard input {
	padding-left: 1px;
}
#tetris .left .keyboard .up {
	position: absolute;
	left: 30px;
	top: 0px;
	width: 30px;
	height: 30px;
}
#tetris .left .keyboard .up input {
	font: 15px tahoma;
	padding-top: 3px;
}
#tetris .left .keyboard .down {
	position: absolute;
	left: 30px;
	top: 30px;
	width: 30px;
	height: 30px;
}
#tetris .left .keyboard .down input {
	font: 14px tahoma;
}
#tetris .left .keyboard .left {
	position: absolute;
	left: 0px;
	top: 30px;
	width: 30px;
	height: 30px;
}
#tetris .left .keyboard .right {
	position: absolute;
	left: 60px;
	top: 30px;
	width: 30px;
	height: 30px;
}

/*------------------------------------------------** game over */

#tetris-gameover {
	position: absolute;
	width: 100%;
	top: 50%;
	text-align: center;
	font-weight: bold;
	display: none;
	font: 10px Arial;
	color: #929788;
}

/*------------------------------------------------** next puzzle */

#tetris-nextpuzzle {
	position: absolute;
	top: 49%;
	left: 35%;
	background: #ffffff;
	overflow: visible;
	display: none;
}

/*------------------------------------------------** stats */

#tetris .left .stats {
	position: absolute;
	left: 35px;
	bottom: 10px;
}
#tetris .stats td { padding-bottom: 1px; }
#tetris .stats .level { text-align: left; padding-right: 10px; }
#tetris-stats-level { font-weight: bold; }
#tetris .stats .time { text-align: left; padding-right: 10px; }
#tetris-stats-time { font-weight: bold; }
#tetris .stats .apm { text-align: left; padding-right: 10px; }
#tetris-stats-apm { font-weight: bold; }
#tetris .stats .lines { text-align: left; padding-right: 10px; }
#tetris-stats-lines { font-weight: bold; }
#tetris .stats .score { text-align: left; padding-right: 10px; }
#tetris-stats-score { font-weight: bold; }

/*------------------------------------------------** area ***/

#tetris-area {
	background: #FFFFFF;
	position: absolute;
	width: 168px;
	height: 308px;
	left: 131px;
	top: 1px;
	overflow: hidden;
}
#tetris .block0, #tetris .block1, #tetris .block2, #tetris .block3, #tetris .block4, #tetris .block5, #tetris .block6 {
	position: absolute;
	width: 13px;
	height: 13px;
	border: 0.5px solid #ffffff;
	/* with margin 0.5px there were problems with offsetLeft and offsetTop */
}
#tetris .block0,#tetris .block1 {
	background: #e2e8e7;
}
#tetris .block2,#tetris .block3 {
	background: #4ec4f0;
}
#tetris .block4 {
	background: #dd0569;
}
#tetris .block5 {
	background: #dfe7c4;
}
#tetris .block6 {
	background: #9db0a7;
}

/*------------------------------------------------** window ***/

#tetris .window {
	background: #f1f4f3;
	position: absolute;
	width: 168px;
	height: 308px;
	left: 131px;
	top: 1px;
	z-index: 5;
	display: none;
}
#tetris .window .top {
	position: relative;
	background: #c2cfcd;
	color: #666666;
	font: 10px Arial;
	letter-spacing: +1px;
	height: 20px;
	line-height: 20px;
	vertical-align: middle;
	border-bottom: 1px solid #ffffff;
	text-indent: 10px;
}
#tetris .window .top .close {
	position: absolute;
	background: #c2cfcd;
	font: 10px Arial;
	font-weight: bold;
	right: 0px;
	top: 0px;
	height: 20px;
	line-height: 19px;
	text-indent: 7px;
	width: 21px;
	border-left: 1px solid #ffffff;
	cursor: pointer;
}
#tetris .window .top .close:hover {
 	background: #9db0a7;
}
#tetris .window .content {
	font: 9px Arial;
	margin: 10px;
	color: #516b72;
}
#tetris .window .content table {
	font: 10px Arial;
	color: #516b72;
}
table {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	color: #c2cfcd;
	text-align: left;
}
#thumbs {
  width:500px;
  height: 550px;
  position: absolute;
  z-index: 99;
  top: 0px;
  left: 0px;
}

#thumbs a {
  float:left;
  width:60px;
  height:60px;
  display: block;
  margin: 10px 5px 5px 10px;
}

#loadingmessage {
	position:absolute;
	top:200px;
	left:150px;
	padding:1em 5px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
	width:150px;
	text-align:center;
	font-size:12px;
	color:#929788;
	z-index: 101;
	text-transform: uppercase;
	background-image: url(../img/loader_bg.png);
	background-repeat: no-repeat;
}
/*------------------------------------------------------------------------------------------------------ C O N T A C T   C O P Y ------*/
#contact_copy {
  width:500px;
  height: 550px;
  position: absolute;
  z-index: 99;
  top: 0px;
  left: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding: 25px;
}
#contact_copy h1 {
	font-size: 16px;
	font-weight: normal;
	color: #42bdee;
}
#contact_copy .fields {
	width: 324px;
	height: 22px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #98ada4;
	margin-bottom: 5px;
	padding: 5px;
	border: 1px solid #d6dedd;
}
#contact_copy .fields2 {
	width: 324px;
	height: 60px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #98ada4;
	padding: 5px;
	border: 1px solid #d6dedd;
}
#contact_copy .submit {
	background-color: #f1f4f3;
	border: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #95a9a0;	
	margin: 5px 0 0 0;
	padding: 5px;
}
/*------------------------------------------------------------------------------------------------------ R E S U M E  C O P Y ------*/
#resume_copy {
	width:500px;
	height: 550px;
	position: absolute;
	z-index: 99;
	top: -3px;
	left: 3px;
	font-family: Arial, Helvetica, sans-serif;
	color: #98ada4;
	padding: 15px;
	font-size: 11px;
}
#resume_copy a {
	font-family: Arial, Helvetica, sans-serif;
	color: #42bdee;
	font-size: 10px;
	text-decoration: none;
	text-transform: uppercase;
}
#resume_copy a:hover {
	background-color: #e1e7e6;
	color: #42bdee;
}
/*------------------------------------------------------------------------------------------------------ D O W N L O A D  C O P Y ------*/
#download_copy {
	width:500px;
	height: 550px;
	position: absolute;
	z-index: 99;
	top: -3px;
	left: 3px;
}
/*------------------------------------------------------------------------------------------------------ H O M E  C O P Y ------*/
#home_copy {
	width:500px;
	height: 550px;
	position: absolute;
	z-index: 99;
	top: -3px;
	left: 3px;
	padding: 50px 0 0 25px;
}
/*------------------------------------------------------------------------------------------------------ C O L O R   P A L E T T E ------*/
.pink {
	color: #d8005b;
}
.cyan {
	color: #42bdee;
	font-size: 16px;
}