/** RESETS **/
* {margin: 0;padding: 0;text-decoration: none;filter: inherit;outline:none;}
*:focus{outline: none;}  
h1, h2, h3, h4 ,h5, h6 {font-weight: normal;}
a {
	outline:0; 
	text-decoration:none;
}
a img {border: none;}
ul, ol, li {list-style-type: none;}


@font-face {
    font-family: 'matizregular';
    src: url('../fonts/matiz-webfont.eot');
    src: url('../fonts/matiz-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/matiz-webfont.woff') format('woff'),
         url('../fonts/matiz-webfont.ttf') format('truetype'),
         url('../fonts/matiz-webfont.svg#matizregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body, html {width:100%; height:100%;height:20000px; font-family:'matizregular';}
body {
    overflow:hidden;
}
header {
background: url('../img/header-bg.png') repeat-x top right;
width:100%;
position:fixed;
top:0px;
left:0px;
z-index:1000;
display: block;
overflow: hidden;
min-width: 1020px;
}
.header-title {
float:left;
display:inline-block;
*display:inline;
	zoom:1;
overflow:hidden;
background: url('../img/header-title.png') no-repeat top left;
color:transparent;
width:327px;
height:75px;
text-indent:-9999px;
font-size:1px;

}
.sources {
position:fixed;
top:85px;
right:10px;
font-size:9px;
letter-spacing:1px;
color:#272727;
z-index: 9999;
}

.header-logo {
	width:212px;
	height:75px;
	float:right;
	display:inline-block;
	*display:inline;
	zoom:1;
	overflow:hidden;
	
}
.header-logo a {
	width:212px;
	height:75px;
	display:block;	
	overflow:hidden;
	background: url('../img/logo.png') no-repeat top left;	
	text-indent:-9999px;
font-size:1px;
color:transparent;
position:relative;
}
.restart {
margin:0px;
	padding: 26px;
	float:left;
	display:inline-block;
	*display:inline;
	zoom:1;
	overflow:hidden;
	border-right: 1px solid #696970;

font-size:17px;
color:#E3E3E3;

width:118px;
	height:23px;
	-webkit-box-shadow: 2px 4px 10px -2px #000 ;
}

.restart:hover {
cursor:pointer;
color:#D7A736;
}
.social {
	margin:0px;
	padding: 10px 10px 7px;
	float:right;
	display:inline-block;
	*display:inline;
	zoom:1;
	overflow:hidden;
	border-right: 1px solid #696970;
	border-left: 1px solid #696970;
}
.social li {
	display:inline-block;
	*display:inline;
	zoom:1;
	list-style:none;
}

#fb_sprite{ width:48px; height:46px; background: url(../img/facebook.png) 0 0; }
#twit_sprite{ width:50px; height:49px; background:url(../img/twitter.png) 0 0; }
#pin_sprite{ width:77px; height:49px; background:url(../img/pintrest.png) 0 0; }
#google_sprite{ width:78px; height:49px; background:url(../img/google.png) 0 0; }



.viewport {
position: fixed;
	display: block;
	height: 100%;
	width: 100%;
overflow:hidden;
z-index:10;
}
.container{
	position:relative;
	margin:0px;
	padding:0px;
	display:block;
	height: auto;
	min-height:100%; 
}
.panel {
	padding: 0px;
	margin:0px;
	position:absolute;
	display:block;
	width:100%;
	overflow:hidden;
}
#start {
	top:0px;
	left:0px;
	background:#ffffff;
}
.start-content {
	width:960px;
	margin:75px auto 0px;
}
.main-title {
	
	width:960px;
	height:369px;
	display:block;
	position:relative;
	margin:110px auto 20px;
	overflow:visible;

	border-bottom: 1px dashed #cacad9;
padding-bottom: 25px;

}
.areyou {
	background:url(../img/areyou.png) no-repeat top center;
	width:289px;
	height:40px;
	display:block;
	position:absolute;
	top:100px;
	left:-2000px;
	overflow:hidden;
	font-size:1px;
	color:transparent;
	text-indent:-9999px;
	z-index:50;

}
.calamity {
	background:url(../img/calamity.png) no-repeat top center;
	width:699px;
	height:136px;
	display:block;
	position:absolute;
	top:-500px;
	left:129px;
	overflow:hidden;
	font-size:1px;
	color:transparent;
	text-indent:-9999px;
	z-index:60;

}
.intro-nail1 {
	background:url(../img/nail1.png) no-repeat top center;
	width:80px;
	height:27px;
	display:block;
	position:absolute;
	top: -500px;
right: 80px;
	overflow:hidden;	
	z-index:50;
}
.intro-nail2 {
	background:url(../img/nail2.png) no-repeat top center;
	width:69px;
	height:46px;
	display:block;
	position:absolute;
	top: -500px;
right: 50px;
	overflow:hidden;	
	z-index:50;
}
.intro-brush {
	position:absolute;
	bottom: 45px;
left: -2000px;
	z-index:70;
	background:url(../img/tools/brush.png) no-repeat top center;
	width:159px;
	height:207px;
	display:block;
}
.intro-brush.painting {
	 -webkit-animation-name: wobble;
      -webkit-animation-duration: 4s;
	  animation-name: wobble;
      animation-duration:4s;
	  -moz-animation-name: wobble;
	-moz-animation-duration: 4s;
	-ms-animation-name: wobble;
	-ms-animation-duration: 4s;
}
.intro-splash1 {
	position:absolute;
	top: 130px;
left: 40px;
}
.intro-splash2 {
	position:absolute;
	bottom: 60px;
left: 100px;
}
.intro-splash3 {
	position:absolute;
	top: 102px;
left: 140px;
}
.intro-splash4 {
	position:absolute;
	top: 110px;
left: 170px;
}

.intro-screwdriver {
	position:absolute;
	top: -500px;
	left: 325px;
	z-index:70;
	background:url(../img/tools/screwdriver.png) no-repeat top center;
	width:288px;
	height:84px;
	display:block;
	}
.intro-screwdriver.wobbling {
	 -webkit-animation-name: wobble;
      -webkit-animation-duration: 1s;
	  animation-name: wobble;
      animation-duration:1s;
	  -moz-animation-name: wobble;
	-moz-animation-duration:1s;
	-ms-animation-name: wobble;
	-ms-animation-duration: 1s;
	}
.intro-hammer {
	position:absolute;
	top: 25px;
	right: -2000px;
	z-index:70;
	background:url(../img/tools/hammer.png) no-repeat top center;
	width:250px;
	height:147px;
	display:block;	
	}
.intro-hammer.hammering {
	-webkit-animation-name: hammering;
      -webkit-animation-duration: 3s;
	   -o-animation-name: hammering;
      -o-animation-duration: 3s;
	  animation-name: hammering;
      animation-duration:3s;
	  -moz-animation-name: hammering;
	-moz-animation-duration: 3s;
	-ms-animation-name: hammering;
	-ms-animation-duration: 3s;
	}
.intro{
	font-size:18px;
	color:#65516b;
	display:inline-block;
	*display:inline;
	zoom:1;
	position:relative;
	float:left;
	overflow:hidden;
	width: 575px;
	margin-left:-2000px;
}

.intro h1 {
	font-size:23px;
	color:#27c5aa;
}

.find-out {
background:url(../img/findout.png) no-repeat top center;
	width:276px;
	height:137px;
	display:inline-block;
	*display:inline;
	zoom:1;
	position:relative;
	float:right;
	overflow:hidden;
	font-size:1px;
	color:transparent;
	text-indent:-9999px;
	cursor:pointer;
	margin-right:-2000px;
	
}
.find-out:hover {
background-position: 0px -137px;
}
#sex {
	background:#7763be;
}
.sex-content {
	width:540px;
	margin:75px auto 0px;
	height:100%;
	display:block;
	position:relative;
	background:#6C56BA;
	padding-top: 40px;
}
#sex .title {
	background:url(../img/sex.png) no-repeat top center;
	font-size:1px;
	color:transparent;
	text-indent:-9999px;
	margin:0px auto;
	width:161px;
	height:89px;
	display:block;
}
.strapline {
	color:#fff;
	font-size:18px;
	width:auto;
	text-align:center;
	border-top: 1px dashed #fff;
	padding:10px 10px 0px;
	margin: 20px auto 0px;
	
	overflow: hidden;
	position: relative;
}
#sex .strapline {
width:200px;
}
.sex-image {
	background:url(../img/sex-symbols.png) no-repeat top center;
	position:relative;
	display:block;
	overflow:hidden;
	margin:30px auto;
	width:405px;
	height:387px;
	background-size:100%;
}
.female {
	cursor:pointer;
	position:absolute;
	display:block;
	overflow:hidden;
	margin:30px auto;
	width:172px;
	height:320px;
	left:6px;
	top:59px;
}
.male {
	cursor:pointer;
	position:absolute;
	display:block;
	overflow:hidden;
	margin:30px auto;
	width:206px;
	height:254px;
	left:184px;
	top:5px;
}
.male-hover{
	background:url(../img/bubbles/male.png) no-repeat top center;
	position:absolute;
	top:0px;
	right:0px;
	display:none;
	overflow:hidden;
	width:120px;
	height:82px;
}
.male:hover .male-hover{
	display:block;
}
.female-hover{
	background:url(../img/bubbles/female.png) no-repeat top center;
	position:absolute;
	top: 80px;
	left:0px;
	display:none;
	overflow:hidden;
	width:120px;
	height:82px;
}
.female:hover .female-hover{
	display:block;
}
#skill {
background:#EA6E70;
}
#skill .strapline { width:665px; }
#skill .title {
	background:url(../img/skill.png) no-repeat top center;
	font-size:1px;
	color:transparent;
	text-indent:-9999px;
	margin:0px auto;
	width:237px;
	height:102px;
	display:block;
}
.skill-content {
	min-width:960px;
	padding-top: 40px;
		margin:75px auto 0px;
}
.scale {
background:url(../img/scale.png) no-repeat top center;
	width:811px;
	height:47px;
	display:block;
	position:absolute;
	bottom:-38px;
	right:0px;
}
.tape-measure { width:100%; background:#E86263; height:260px; position:relative; display: block; overflow:visible; margin-top: 40px;}
.tape-measure-holder {	
	width: 960px;
	margin: 0px auto;
	display: block;
	overflow: visible;
	position: relative;
	height: 100%;
}

.measure {
background:url(../img/measure.png) no-repeat top left;
	width:258px;
	height:189px;
	display:block;
	position:absolute;
	bottom:11px;
	left:0px;
	z-index:20;
	pointer-events:none;
	}
.tape {
background:url(../img/tape.png) no-repeat top right;
	width:90px;
	height:53px;
	display:block;
	position:absolute;
	bottom:19px;
	left: 42px;
	z-index:10;
}

.skill-hover{
	background:url(../img/bubbles/drag.png) no-repeat top center;
	position:absolute;
	top: -60px;
	right: -100px;
	display: none;
	overflow: hidden;
	width: 122px;
	height: 84px;
	z-index: 60;
}
.tape:hover .skill-hover{
	display:block;
}

.ui-resizable { position: absolute; margin-top: 205px; margin-left: 130px;}
.ui-resizable-handle { position: absolute;font-size: 0.1px; display: block; }
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 790px; top: -5px; left: 0; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 790px; bottom: -5px; left: 0; }
.ui-resizable-e { cursor: e-resize; width: 70px; right: -5px; top: 0; height: 53px; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 53px; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}



#tool {
	background:#6bd5d0;
}
#tool .strapline { display: inline-block; }
.tool-content {
	margin:75px auto 0px;
}
#tool .title {
	background:url(../img/tool.png) no-repeat top center;
	font-size:1px;
	color:transparent;
	text-indent:-9999px;
	margin:0px auto;
	width:214px;
	height:88px;
	display:block;
	margin-top: 40px;
}
#tool .strapline {
	color:#9697a5;
	border-top: 1px dashed #9697a5;
}
table {
	width:100%;
	height:100%;
}
td {
	min-width:320px;
	*width:320px;
	height:230px;
	position: relative;
}
.what-tool {
background:#272727;
display: block;
overflow: hidden;
height: auto;
height:100%;
min-height:100%;
 zoom:1;
}

.hammer-holder, .ladder-holder, .saw-holder, .knife-holder, .screwdriver-holder, .drill-holder, .spanner-holder, .brush-holder {

   -webkit-transition: background 0.3s linear;
        -moz-transition: background 0.3s linear;
        -ms-transition: background 0.3s linear;
        -o-transition: background 0.3s linear;
        transition: background 0.3s linear;
}

.hammer-holder:hover, .ladder-holder:hover, .saw-holder:hover, .knife-holder:hover, .screwdriver-holder:hover, .drill-holder:hover, .spanner-holder:hover, .brush-holder:hover {
/*background-color: #D9F4F3;*/
background-color: #ffffff;
}




.hammer {
	background:url(../img/tools/hammer.png) no-repeat top center;
	width:250px;
	height:147px;
	display:block;
	left: 50%;
    margin-left: -125px;
    margin-top: -73px;
    position: absolute;
    top: 50%;
	background-size: 100%;
	}
	

	
.hammer-holder { background-color:#89ddd9; }
.hammer-holder:hover div.hammer {
-webkit-animation-name: hammering;
      -webkit-animation-duration: 3s;
	   -o-animation-name: hammering;
      -o-animation-duration: 3s;
	  animation-name: hammering;
      animation-duration:3s;
	  -moz-animation-name: hammering;
	-moz-animation-duration: 3s;
	-ms-animation-name: hammering;
	-ms-animation-duration: 3s;
	cursor:pointer;
}
.hammer-hover{
	background:url(../img/bubbles/hammer.png) no-repeat top center;
	position:absolute;
	top: 40px;
	right: 60px;
	display: none;
	overflow: hidden;
	width: 117px;
	height: 94px;
	z-index: 60;
}
.hammer-holder:hover .hammer-hover{
	display:block;
}
.screwdriver {
background:url(../img/tools/screwdriver.png) no-repeat top center;
	width:288px;
	height:84px;
	display:block;
	left: 50%;
    margin-left: -144px;
    margin-top: -42px;
    position: absolute;
    top: 50%;
	background-size: 100%;
}
.screwdriver-holder { background-color:#6bd5d0; }
.screwdriver-holder:hover div.screwdriver{
 -webkit-animation-name: wobble;
      -webkit-animation-duration: 1.5s;
	  animation-name: wobble;
      animation-duration:1.5s;
	  -moz-animation-name: wobble;
	-moz-animation-duration: 1.5s;
	-ms-animation-name: wobble;
	-ms-animation-duration: 1.5s;
	cursor:pointer;
}
.screwdriver-hover{
	background:url(../img/bubbles/screwdriver.png) no-repeat top center;
	position:absolute;
	top: 40px;
	left: 60px;
	display: none;
	overflow: hidden;
	width: 117px;
	height: 94px;
	z-index: 60;
}
.screwdriver-holder:hover .screwdriver-hover{
	display:block;
}
.ladder {
background:url(../img/tools/ladder.png) no-repeat top center;
	width:79px;
	height:219px;
	display:block;
	left: 50%;
    margin-left: -38px;
    margin-top: -109px;
    position: absolute;
    top: 50%;
	background-size: 100%;
}
.ladder-holder { background-color:#7ad9d5; }
.ladder-holder:hover div.ladder{
 -webkit-animation-name: wobble;
      -webkit-animation-duration: 1.5s;
	  animation-name: wobble;
      animation-duration:1.5s;
	  -moz-animation-name: wobble;
	-moz-animation-duration: 1.5s;
	-ms-animation-name: wobble;
	-ms-animation-duration: 1.5s;
	cursor:pointer;
}
.ladder-hover{
	background:url(../img/bubbles/ladder.png) no-repeat top center;
	position:absolute;
	top: 60px;
right: 80px;
	display: none;
	overflow: hidden;
	width: 117px;
	height: 94px;
	z-index: 60;
}
.ladder-holder:hover .ladder-hover{
	display:block;
}
.spanner {
background:url(../img/tools/spanner.png) no-repeat top center;
	width:280px;
	height:104px;
	display:block;
	left: 50%;
    margin-left: -140px;
    margin-top: -52px;
    position: absolute;
    top: 50%;
	background-size: 100%;
	}
.spanner-holder { background-color:#6bd5d0; }
.spanner-holder:hover div.spanner {
    -webkit-animation-name: spannering;
    -webkit-animation-duration: 4s;
	animation-name: spannering;
    animation-duration:4s;
	-moz-animation-name: spannering;
	-moz-animation-duration: 4s;
	-ms-animation-name: spannering;
	-ms-animation-duration: 4s;
	cursor:pointer;
}
.spanner-hover{
	background:url(../img/bubbles/spanner.png) no-repeat top center;
	position:absolute;
	top: 40px;
	left: 60px;
	display: none;
	overflow: hidden;
	width: 117px;
	height: 94px;
	z-index: 60;
}
.spanner-holder:hover .spanner-hover{
	display:block;
}
.splash {
background:url(../img/tools/splash.png) no-repeat center center;
background-size:100% 100%;
	width:0px;
	height:0px;
	display:block;
}
.splash1 {
	position:absolute;
	top: 90px;
right: 120px;
}
.splash2 {
	position:absolute;
	top: 0px;
right: 100px;
}
.splash3 {
	position:absolute;
	top: 50px;
left: 160px;
}
.brush {
	background:url(../img/tools/brush.png) no-repeat top center;
	width:159px;
	height:207px;
	display:block;
	left: 50%;
    margin-left: -79px;
    margin-top: -103px;
    position: absolute;
    top: 50%;
	background-size: 100%;
	}
	.brush-holder { background-color:#81dbd7; }
	.brush-hover{
	background:url(../img/bubbles/brush.png) no-repeat top center;
	position:absolute;
	top: 80px;
	left: 60px;
	display: none;
	overflow: hidden;
	width: 117px;
	height: 94px;
	z-index: 60;
}
.brush-holder:hover .brush-hover{
	display:block;
}
.brush-holder:hover div.brush{
 -webkit-animation-name: wobble;
      -webkit-animation-duration: 4s;
	  animation-name: wobble;
      animation-duration:4s;
	  -moz-animation-name: wobble;
	-moz-animation-duration: 4s;
	-ms-animation-name: wobble;
	-ms-animation-duration: 4s;
	cursor:pointer;
}
.brush-holder:hover div.splash1{
 -webkit-animation-name: splashing1;
      -webkit-animation-duration: 4s;
	  animation-name: splashing1;
      animation-duration:4s;
	  -moz-animation-name: splashing1;
	-moz-animation-duration: 4s;
	-ms-animation-name: splashing1;
	-ms-animation-duration: 4s;
	cursor:pointer;
}
.brush-holder:hover div.splash2{
 -webkit-animation-name: splashing2;
      -webkit-animation-duration: 4s;
	  animation-name: splashing2;
      animation-duration:4s;
	  -moz-animation-name: splashing2;
	-moz-animation-duration: 4s;
	-ms-animation-name: splashing2;
	-ms-animation-duration: 4s;
	cursor:pointer;
}
.brush-holder:hover div.splash3{
 -webkit-animation-name: splashing3;
      -webkit-animation-duration: 4s;
	  animation-name: splashing3;
      animation-duration:4s;
	  -moz-animation-name: splashing3;
	-moz-animation-duration: 4s;
	-ms-animation-name: splashing3;
	-ms-animation-duration: 4s;
	cursor:pointer;
}
.saw {
	background:url(../img/tools/saw.png) no-repeat top right;
	width:270px;
	height:155px;
	display:block;	
	left: 50%;
    margin-left: -135px;
    margin-top: -77px;
    position: absolute;
    top: 50%;
	background-size: 100%;
	
}
.saw-holder { background-color:#89ddd9; }
.saw-holder:hover div.saw{
    -webkit-animation-name: sawing;
    -webkit-animation-duration: 2s;
	animation-name: sawing;
    animation-duration:2s;
	-moz-animation-name: sawing;
	-moz-animation-duration: 2s;
	-ms-animation-name: sawing;
	-ms-animation-duration: 2s;
	cursor:pointer;
}
	.saw-hover{
	background:url(../img/bubbles/saw.png) no-repeat top center;
	position:absolute;
	top: 20px;
	left: 60px;
	display: none;
	overflow: hidden;
	width: 117px;
	height: 94px;
	z-index: 60;
}
.saw-holder:hover .saw-hover{
	display:block;
}
.bit {
    background:url(../img/tools/bit.png) no-repeat left 57px;
	width:266px;
	height:164px;
	display:block;
		left: 50%;
    margin-left: -133px;
    margin-top: -82px;
    position: absolute;
    top: 50%;
	
}
.drill {
    background:url(../img/tools/drill.png) no-repeat top right;
	width:223px;
	height:160px;
	display:block;
	position: absolute;
	top: 0px;
	right: 0px;	
	background-size: 100%;
}
.drill-holder { background-color:#7ad9d5; }
.drill-holder:hover .drill {
-webkit-animation-name: drilling;
    -webkit-animation-duration: 3s;
	animation-name: drilling;
    animation-duration:3s;
	-moz-animation-name: drilling;
	-moz-animation-duration: 3s;
	-ms-animation-name: drilling;
	-ms-animation-duration: 3s;
	cursor:pointer;
}
.drill-hover{
	background:url(../img/bubbles/drill.png) no-repeat top center;
	position:absolute;
	top: 10px;
right: 10px;
	display: none;
	overflow: hidden;
	width: 117px;
	height: 94px;
	z-index: 60;
}
.drill-holder:hover .drill-hover{
	display:block;
}
.blade {
    background:url(../img/tools/blade.png) no-repeat 147px 2px;
	width:273px;
	height:118px;
	display:block;
	left: 50%;
    margin-left: -136px;
    margin-top: -59px;
    position: absolute;
    top: 50%;
	
}
.knife {
background:url(../img/tools/knife.png) no-repeat top center;
	width:218px;
	height:118px;
	display:block;
	position: absolute;
	bottom: 0px;
	left: 0px;	
	
	}
.knife-holder { background-color:#6bd5d0; }	
.knife-holder:hover .blade {
-webkit-animation-name: stanley;
    -webkit-animation-duration: 3s;
	animation-name: stanley;
    animation-duration:3s;
	-moz-animation-name: stanley;
	-moz-animation-duration: 3s;
	-ms-animation-name: stanley;
	-ms-animation-duration: 3s;
	cursor:pointer;
}
.knife-hover{
	background:url(../img/bubbles/knife.png) no-repeat top center;
	position:absolute;
	top: 40px;
	left: 50px;
	display: none;
	overflow: hidden;
	width: 117px;
	height: 94px;
	z-index: 60;
}
.knife-holder:hover .knife-hover{
	display:block;
}
#room {
	background:#48a8f7;
}
.room-content {
	margin:75px auto 0px;
}

#room .strapline { display: inline-block; }
.room-content {
	margin:75px auto 0px;
}
#room .title {
	background:url(../img/area.png) no-repeat top center;
	font-size:1px;
	color:transparent;
	text-indent:-9999px;
	margin:0px auto;
	width:230px;
	height:87px;
	display:block;
	margin-top: 40px;
}
#room .strapline {
	color:#9697a5;
	border-top: 1px dashed #9697a5;
}

.what-room {
background:#272727;
display: block;
overflow: hidden;
height:100%;
}
.bathroom-holder, .lounge-holder, .garage-holder, .kitchen-holder, .bedroom-holder, .stairs-holder, .garden-holder, .cellar-holder {
   -webkit-transition: background 0.3s linear;
        -moz-transition: background 0.3s linear;
        -ms-transition: background 0.3s linear;
        -o-transition: background 0.3s linear;
        transition: background 0.3s linear;
}
.bathroom-holder:hover, .lounge-holder:hover, .garage-holder:hover, .kitchen-holder:hover, .bedroom-holder:hover, .stairs-holder:hover, .garden-holder:hover, .cellar-holder:hover {
/*background-color: #D9EDFD;*/
background-color: #FFFFFF;
}





 .lounge-holder:hover div,  .stairs-holder:hover div, .cellar-holder:hover div {
    -webkit-animation-name: roomleft;
    -webkit-animation-duration: 3s;
	animation-name: roomleft;
    animation-duration:3s;
	-moz-animation-name: roomleft;
	-moz-animation-duration: 3s;
	-ms-animation-name: roomleft;
	-ms-animation-duration: 3s;
	cursor:pointer;
}

.bathroom-holder:hover div, .garage-holder:hover div, .kitchen-holder:hover div, .bedroom-holder:hover div, .garden-holder:hover div {
    -webkit-animation-name: roomright;
    -webkit-animation-duration: 3s;
	animation-name: roomright;
    animation-duration:3s;
	-moz-animation-name: roomright;
	-moz-animation-duration: 3s;
	-ms-animation-name: roomright;
	-ms-animation-duration: 3s;
	cursor:pointer;
}



.bathroom {
	background:url(../img/rooms/bathroom.png) no-repeat top center;
	width:323px;
	height:204px;
	display:block;	
		left: 50%;
    margin-left: -161px;
    margin-top: -102px;
    position: absolute;
    top: 50%;
	background-size:100%;
	}
.bathroom-holder { background-color:#6db9f9; }

.bathroom-hover{
	background:url(../img/bubbles/bathroom.png) no-repeat top center;
	position:absolute;
	top: 40px;
	right: 50px;
	display: none;
	overflow: hidden;
	width: 117px;
	height: 94px;
	z-index: 60;
}
.bathroom-holder:hover .bathroom-hover{
	display:block;
}
.bedroom {
background:url(../img/rooms/bedroom.png) no-repeat top center;
	width:199px;
	height:182px;
	display:block;
		left: 50%;
    margin-left: -99px;
    margin-top: -91px;
    position: absolute;
    top: 50%;
	background-size:100%;
}
.bedroom-holder { background-color:#48a8f7; }

.bedroom-hover{
	background:url(../img/bubbles/bedroom.png) no-repeat top center;
	position:absolute;
	top: 40px;
	right: 50px;
	display: none;
	overflow: hidden;
	width: 117px;
	height: 94px;
	z-index: 60;
}
.bedroom-holder:hover .bedroom-hover{
	display:block;
}
.lounge {
background:url(../img/rooms/lounge.png) no-repeat top center;
	width:183px;
	height:191px;
	display:block;
		left: 50%;
    margin-left: -91px;
    margin-top: -95px;
    position: absolute;
    top: 50%;
	background-size:100%;
}
.lounge-holder { background-color:#5bb1f8; }

.lounge-hover{
	background:url(../img/bubbles/lounge.png) no-repeat top center;
	position:absolute;
	top: 40px;
	right: 50px;
	display: none;
	overflow: hidden;
	width: 117px;
	height: 94px;
	z-index: 60;
}
.lounge-holder:hover .lounge-hover{
	display:block;
}
.garden {
background:url(../img/rooms/garden.png) no-repeat top center;
	width:149px;
	height:80px;
	display:block;
		left: 50%;
    margin-left: -74px;
    margin-top: -40px;
    position: absolute;
    top: 50%;
	background-size:100%;
	}
.garden-holder { background-color:#48a8f7; }

.garden-hover{
	background:url(../img/bubbles/garden.png) no-repeat top center;
	position:absolute;
	top: 40px;
	right: 50px;
	display: none;
	overflow: hidden;
	width: 117px;
	height: 94px;
	z-index: 60;
}
.garden-holder:hover .garden-hover{
	display:block;
}
.cellar {
	background:url(../img/rooms/cellar.png) no-repeat top center;
	width:226px;
	height:256px;
	display:block;
		left: 50%;
    margin-left: -113px;
    margin-top: -128px;
    position: absolute;
    top: 50%;
	background-size:100%;
	}
	.cellar-holder { background-color:#6db9f9; }

.cellar-hover{
	background:url(../img/bubbles/cellar.png) no-repeat top center;
	position:absolute;
	top: 40px;
	right: 50px;
	display: none;
	overflow: hidden;
	width: 117px;
	height: 94px;
	z-index: 60;
}
.cellar-holder:hover .cellar-hover{
	display:block;
}
.garage {
	background:url(../img/rooms/garage.png) no-repeat top center;
	width:190px;
	height:160px;
	display:block;		
		left: 50%;
    margin-left: -95px;
    margin-top: -80px;
    position: absolute;
    top: 50%;
	background-size:100%;
}
.garage-holder { background-color:#6db9f9; }

.garage-hover{
	background:url(../img/bubbles/garage.png) no-repeat top center;
	position:absolute;
	top: 40px;
	right: 50px;
	display: none;
	overflow: hidden;
	width: 117px;
	height: 94px;
	z-index: 60;
}
.garage-holder:hover .garage-hover{
	display:block;
}
.stairs {
    background:url(../img/rooms/stairs.png) no-repeat top center;
	width: 216px;
	height: 247px;
	display:block;	
		left: 50%;
    margin-left: -108px;
    margin-top: -123px;
    position: absolute;
    top: 50%;
	background-size:100%;
}
.stairs-holder { background-color:#5bb1f8; }

.stairs-hover{
	background:url(../img/bubbles/stairs.png) no-repeat top center;
	position:absolute;
	top: 40px;
	right: 50px;
	display: none;
	overflow: hidden;
	width: 194px;
	height: 123px;
	z-index: 60;
}
.stairs-holder:hover .stairs-hover{
	display:block;
}
.kitchen {
background:url(../img/rooms/kitchen.png) no-repeat top center;
	width:148px;
	height:160px;
	display:block;
		left: 50%;
    margin-left: -74px;
    margin-top: -80px;
    position: absolute;
    top: 50%;
	background-size:100%;
	}
.kitchen-holder { background-color:#48a8f7; }	

.kitchen-hover{
	background:url(../img/bubbles/kitchen.png) no-repeat top center;
	position:absolute;
	top: 40px;
	right: 50px;
	display: none;
	overflow: hidden;
	width: 117px;
	height: 94px;
	z-index: 60;
}
.kitchen-holder:hover .kitchen-hover{
	display:block;
}

h2 .female-small {
	background:url(../img/female-small.png) no-repeat top right;
	position:absolute;
	top: 0px;
	right: -40px;
	overflow: hidden;
	width: 60px;
	height: 97px;
	z-index: 60;
}
h2 .male-small {
	background:url(../img/male-small.png) no-repeat top right;
		position:absolute;
	top: 0px;
	right: -40px;
	overflow: hidden;
	width: 83px;
	height: 86px;
	z-index: 60;
}
#result {
	background:#ffffff;
}


.result-tool.drill {
    background:url(../img/tools/drill-full.png) no-repeat top right;
	width:266px;
	height:164px;
	display:block;
}
.result-tool.knife {
    background:url(../img/tools/knife-full.png) no-repeat top right;
	width:269px;
	height:118px;
	display:block;
}

.result-tool {
z-index:7;
position: absolute;
	bottom: 30px;
	left: 0px;	
	margin-top: 0px;
margin-left: 0px;
top:auto;
}
.result-room {
z-index:7;
position: absolute;
	top: 80px;
	right: 0px;	
	margin-top: 0px;
margin-left: 0px;
left:auto;

}
.result-skill {
    background:url(../img/tools/tapemeasure.png) no-repeat top right;
	width:157px;
	height:66px;
	display:block;
	position: absolute;
	top: 0px;
	right: 210px;	
	z-index:9;
}
.result-woah {
    background:url(../img/bubbles/woah.png) no-repeat top right;
	width:147px;
	height:90px;
	display:block;
	position: absolute;
	top: 0px;
	right: 0px;	
	z-index:10;
}
.result-number {
width:510px;
	height:540px;
	display:block;
	position: absolute;
	top: 0px;
	right: 0px;	
	z-index:1;
}
.number-10 {
 background:url(../img/numbers2/10.png) no-repeat right center;
}
.number-9 {
 background:url(../img/numbers2/9.png) no-repeat right center;
}
.number-8 {
 background:url(../img/numbers2/8.png) no-repeat right center;
}
.number-7 {
 background:url(../img/numbers2/7.png) no-repeat right center;
}
.number-6 {
 background:url(../img/numbers2/6.png) no-repeat right center;
}
.number-5 {
 background:url(../img/numbers2/5.png) no-repeat right center;
}
.number-4 {
 background:url(../img/numbers2/4.png) no-repeat right center;
}
.number-3 {
 background:url(../img/numbers2/3.png) no-repeat right center;
}
.number-2 {
 background:url(../img/numbers2/2.png) no-repeat right center;
}
.number-1 {
 background:url(../img/numbers2/1.png) no-repeat right center;
}
.result-content {
	overflow:hidden;
	width:1020px;
	margin:75px auto 0px;
	height:100%;
	display:block;
	position:relative;
	padding-top: 40px;
	color:#685c6b;
font-size:17px;
}
.result-left {
	display:inline-block;
	*display:inline;
	zoom:1;
	width:540px;
	float:left;
	text-align:center;
	position:relative;

	
}
.result-share li{
display:inline-block;
*display:inline;
zoom:1;
list-style:none;
margin-right:20px;
}
.result-left h2 {
	font-size: 42px;
	color:#ff3c85;
	line-height: 1.2em;
	margin-bottom:30px;
}

.result-left h2  span{
	font-size: 55px;
	color:#404044;
	display:block;
	line-height: 0.8em;
	text-transform: uppercase;
}
.result-left p {
margin-bottom:10px;
}

.result-details {
	margin-top: 30px;
	width:100%;	
	height:100%;
	display:block;
	position:relative;

}
.result-right {
	display:inline-block;
	*display:inline;
	zoom:1;
	width:450px;
	float:right;
	position:relative;
	overflow:visible;
	height: 550px;
}



@-webkit-keyframes areyou {
     100%   { left:322px; }   
}
@-webkit-keyframes calamity {
     80%   { top:155px; }   
	 82%  {-webkit-transform: rotate(-5deg);}
     84%  {-webkit-transform: rotate(5deg);}
	 86%  {-webkit-transform: rotate(-5deg);}
     88%  {-webkit-transform: rotate(5deg);}
	 90%  {-webkit-transform: rotate(0deg);}
}


@-webkit-keyframes stanley {
     0%   { background-position: 127px 10px;}   
	20%	 { background-position: 147px 2px;} 
    40% { background-position: 127px 10px;}  
    60% { background-position: 147px 2px;}   
	80% { background-position: 127px 10px;}  
    100% { background-position: 147px 2px;} 
}
@-ms-keyframes stanley {
     0%   { background-position: 127px 10px;}   
	20%	 { background-position: 147px 2px;} 
    40% { background-position: 127px 10px;}  
    60% { background-position: 147px 2px;}   
	80% { background-position: 127px 10px;}  
    100% { background-position: 147px 2px;} 
}
@-moz-keyframes stanley {
     0%   { background-position: 127px 10px;}   
	20%	 { background-position: 147px 2px;} 
    40% { background-position: 127px 10px;}  
    60% { background-position: 147px 2px;}   
	80% { background-position: 127px 10px;}  
    100% { background-position: 147px 2px;} 
}
@keyframes stanley {
     0%   { background-position: 127px 10px;}   
	20%	 { background-position: 147px 2px;} 
    40% { background-position: 127px 10px;}  
    60% { background-position: 147px 2px;}   
	80% { background-position: 127px 10px;}  
    100% { background-position: 147px 2px;} 
}
@keyframes drilling {
     0%   { right:20px; }   
	20%	 { right:0px; }
    40% { right:20px; }
    60% { right:0px; }
	80% { right:20px; }
    100% { right:0px; }
}
@-webkit-keyframes drilling {
     0%   { right:20px; }   
	20%	 { right:0px; }
    40% { right:20px; }
    60% { right:0px; }
	80% { right:20px; }
    100% { right:0px; }
}
@-moz-keyframes drilling {
     0%   { right:20px; }   
	20%	 { right:0px; }
    40% { right:20px; }
    60% { right:0px; }
	80% { right:20px; }
    100% { right:0px; }
}
@-ms-keyframes drilling {
     0%   { right:20px; }   
	20%	 { right:0px; }
    40% { right:20px; }
    60% { right:0px; }
	80% { right:20px; }
    100% { right:0px; }
}
@keyframes roomleft {
0%   { transform: rotate(0deg); }
5%   { transform: rotate(-5deg);}
100%   { transform: rotate(-5deg);}
}
@-webkit-keyframes roomleft {
0%   { -webkit-transform: rotate(0deg); }
5%   { -webkit-transform: rotate(-5deg);}
100%   { -webkit-transform: rotate(-5deg);}
}
@-moz-keyframes roomleft {
0%   { -moz-transform: rotate(0deg); }
5%   { -moz-transform: rotate(-5deg);}
100%   { -moz-transform: rotate(-5deg);}
}
@-ms-keyframes roomleft {
0%   { -ms-transform: rotate(0deg); }
5%   { -ms-transform: rotate(-5deg);}
100%   { -ms-transform: rotate(-5deg);}
}
@keyframes roomright {
0%   { transform: rotate(0deg); }
5%   { transform: rotate(5deg); }
100%   { transform: rotate(5deg); }
}
@-webkit-keyframes roomright {
0%   { -webkit-transform: rotate(0deg); }
5%   { -webkit-transform: rotate(5deg);}
100%   { -webkit-transform: rotate(5deg);}
}
@-moz-keyframes roomright {
0%   { -moz-transform: rotate(0deg); }
5%   { -moz-transform: rotate(5deg);}
100%   { -moz-transform: rotate(5deg);}
}
@-ms-keyframes roomright {
0%   { -ms-transform: rotate(0deg); }
5%   { -ms-transform: rotate(5deg);}
100%   { -ms-transform: rotate(5deg);}
}
@keyframes spannering {
     0%   { transform: rotate(5deg); transform-origin: center right;}
    10%  {transform: rotate(-5deg); transform-origin: center right;}
    20%  {transform: rotate(5deg); transform-origin: center right;}
	30%	 {transform: rotate(-5deg); transform-origin: center right;}	
    40% {transform: rotate(5deg); transform-origin: center right;}
	50%	 {transform: rotate(-5deg); transform-origin: center right;}	
    60% {transform: rotate(5deg); transform-origin: center right;}
	70%	 {transform: rotate(-5deg); transform-origin: center right;}	
    80% {transform: rotate(5deg); transform-origin: center right;}
	90%	 {transform: rotate(-5deg); transform-origin: center right;}	
    100% {transform: rotate(5deg); transform-origin: center right;}
}
@-webkit-keyframes spannering {
     0%   { -webkit-transform: rotate(5deg); -webkit-transform-origin: center right;}
    10%  {-webkit-transform: rotate(-5deg); -webkit-transform-origin: center right;}
    20%  {-webkit-transform: rotate(5deg); -webkit-transform-origin: center right;}
	30%	 {-webkit-transform: rotate(-5deg); -webkit-transform-origin: center right;}	
    40% {-webkit-transform: rotate(5deg); -webkit-transform-origin: center right;}
	50%	 {-webkit-transform: rotate(-5deg); -webkit-transform-origin: center right;}	
    60% {-webkit-transform: rotate(5deg); -webkit-transform-origin: center right;}
	70%	 {-webkit-transform: rotate(-5deg); -webkit-transform-origin: center right;}	
    80% {-webkit-transform: rotate(5deg); -webkit-transform-origin: center right;}
	90%	 {-webkit-transform: rotate(-5deg); -webkit-transform-origin: center right;}	
    100% {-webkit-transform: rotate(5deg); -webkit-transform-origin: center right;}
}
@-moz-keyframes spannering {
     0%   { -moz-transform: rotate(5deg); -moz-transform-origin: center right;}
    10%  {-moz-transform: rotate(-5deg); -moz-transform-origin: center right;}
    20%  {-moz-transform: rotate(5deg); -moz-transform-origin: center right;}
	30%	 {-moz-transform: rotate(-5deg); -moz-transform-origin: center right;}	
    40% {-moz-transform: rotate(5deg); -moz-transform-origin: center right;}
	50%	 {-moz-transform: rotate(-5deg); -moz-transform-origin: center right;}	
    60% {-moz-transform: rotate(5deg); -moz-transform-origin: center right;}
	70%	 {-moz-transform: rotate(-5deg); -moz-transform-origin: center right;}	
    80% {-moz-transform: rotate(5deg); -moz-transform-origin: center right;}
	90%	 {-moz-transform: rotate(-5deg); -moz-transform-origin: center right;}	
    100% {-moz-transform: rotate(5deg); -moz-transform-origin: center right;}
}
@-ms-keyframes spannering {
     0%   { -ms-transform: rotate(5deg); -ms-transform-origin: center right;}
    10%  {-ms-transform: rotate(-5deg); -ms-transform-origin: center right;}
    20%  {-ms-transform: rotate(5deg); -ms-transform-origin: center right;}
	30%	 {-ms-transform: rotate(-5deg); -ms-transform-origin: center right;}	
    40% {-ms-transform: rotate(5deg); -ms-transform-origin: center right;}
	50%	 {-ms-transform: rotate(-5deg); -ms-transform-origin: center right;}	
    60% {-ms-transform: rotate(5deg); -ms-transform-origin: center right;}
	70%	 {-ms-transform: rotate(-5deg); -ms-transform-origin: center right;}	
    80% {-ms-transform: rotate(5deg); -ms-transform-origin: center right;}
	90%	 {-ms-transform: rotate(-5deg); -ms-transform-origin: center right;}	
    100% {-ms-transform: rotate(5deg); -ms-transform-origin: center right;}
}
@keyframes sawing {
    0%     { margin-left:-112px; }
    10%  {margin-left:-135px;}
    20%    { margin-left:-112px; }
	30%	 {margin-left:-135px;}
    40%   { margin-left:-112px; }
	50%	 {margin-left:-135px;}
    60%   { margin-left:-112px; }
	70%	{margin-left:-135px;}
    80%   { margin-left:-112px; }
	90%	 {margin-left:-135px;}
    100%   { margin-left:-112px; }
}
@-webkit-keyframes sawing {
   0%     { width: 293px; }
    10%  { width: 270px; }
    20%   { width: 293px; }
	30%	 { width: 270px; }
    40%   { width: 293px; }
	50%	 { width: 270px; }
    60%   { width: 293px; }
	70%	{ width: 270px; }
    80%  { width: 293px; }
	90%	 { width: 270px; }
    100%   { width: 293px; }
}
@-moz-keyframes sawing {
     0%     { margin-left:-50px; }
    10%  {margin-left:-135px;}
    20%    { margin-left:-50px; }
	30%	 {margin-left:-135px;}
    40%   { margin-left:-50px; }
	50%	 {margin-left:-135px;}
    60%   { margin-left:-50px; }
	70%	{margin-left:-135px;}
    80%   { margin-left:-50px; }
	90%	 {margin-left:-135px;}
    100%   { margin-left:-50px; }
}
@keyframes sawing {
    0%     { margin-left:-112px; }
    10%  {margin-left:-135px;}
    20%    { margin-left:-112px; }
	30%	 {margin-left:-135px;}
    40%   { margin-left:-112px; }
	50%	 {margin-left:-135px;}
    60%   { margin-left:-112px; }
	70%	{margin-left:-135px;}
    80%   { margin-left:-112px; }
	90%	 {margin-left:-135px;}
    100%   { margin-left:-112px; }
}

@keyframes hammering {
     0%   { transform: rotate(5deg); transform-origin: bottom right;}
    10%  {transform: rotate(-5deg); transform-origin: bottom right;}
    20%  {transform: rotate(5deg); transform-origin: bottom right;}
	30%	 {transform: rotate(-5deg); transform-origin: bottom right;}	
    40% {transform: rotate(5deg); transform-origin: bottom right;}
	50%	 {transform: rotate(-5deg); transform-origin: bottom right;}	
    60% {transform: rotate(5deg); transform-origin: bottom right;}
	70%	 {transform: rotate(-5deg); transform-origin: bottom right;}	
    80% {transform: rotate(5deg); transform-origin: bottom right;}
	90%	 {transform: rotate(-5deg); transform-origin: bottom right;}	
    100% {transform: rotate(5deg); transform-origin: bottom right;}
}
@-webkit-keyframes hammering {
     0%   { -webkit-transform: rotate(5deg); -webkit-transform-origin: bottom right;}
    10%  {-webkit-transform: rotate(-5deg); -webkit-transform-origin: bottom right;}
    20%  {-webkit-transform: rotate(5deg); -webkit-transform-origin: bottom right;}
	30%	 {-webkit-transform: rotate(-5deg); -webkit-transform-origin: bottom right;}	
    40% {-webkit-transform: rotate(5deg); -webkit-transform-origin: bottom right;}
	50%	 {-webkit-transform: rotate(-5deg); -webkit-transform-origin: bottom right;}	
    60% {-webkit-transform: rotate(5deg); -webkit-transform-origin: bottom right;}
	70%	 {-webkit-transform: rotate(-5deg); -webkit-transform-origin: bottom right;}	
    80% {-webkit-transform: rotate(5deg); -webkit-transform-origin: bottom right;}
	90%	 {-webkit-transform: rotate(-5deg); -webkit-transform-origin: bottom right;}	
    100% {-webkit-transform: rotate(5deg); -webkit-transform-origin: bottom right;}
}
@-moz-keyframes hammering {
     0%   { -moz-transform: rotate(5deg); -moz-transform-origin: bottom right;}
    10%  {-moz-transform: rotate(-5deg); -moz-transform-origin: bottom right;}
    20%  {-moz-transform: rotate(5deg); -moz-transform-origin: bottom right;}
	30%	 {-moz-transform: rotate(-5deg); -moz-transform-origin: bottom right;}	
    40% {-moz-transform: rotate(5deg); -moz-transform-origin: bottom right;}
	50%	 {-moz-transform: rotate(-5deg); -moz-transform-origin: bottom right;}	
    60% {-moz-transform: rotate(5deg); -moz-transform-origin: bottom right;}
	70%	 {-moz-transform: rotate(-5deg); -moz-transform-origin: bottom right;}	
    80% {-moz-transform: rotate(5deg); -moz-transform-origin: bottom right;}
	90%	 {-moz-transform: rotate(-5deg); -moz-transform-origin: bottom right;}	
    100% {-moz-transform: rotate(5deg); -moz-transform-origin: bottom right;}
}
@-ms-keyframes hammering {
     0%   { -ms-transform: rotate(5deg); -ms-transform-origin: bottom right;}
    10%  {-ms-transform: rotate(-5deg); -ms-transform-origin: bottom right;}
    20%  {-ms-transform: rotate(5deg); -ms-transform-origin: bottom right;}
	30%	 {-ms-transform: rotate(-5deg); -ms-transform-origin: bottom right;}	
    40% {-ms-transform: rotate(5deg); -ms-transform-origin: bottom right;}
	50%	 {-ms-transform: rotate(-5deg); -ms-transform-origin: bottom right;}	
    60% {-ms-transform: rotate(5deg); -ms-transform-origin: bottom right;}
	70%	 {-ms-transform: rotate(-5deg); -ms-transform-origin: bottom right;}	
    80% {-ms-transform: rotate(5deg); -ms-transform-origin: bottom right;}
	90%	 {-ms-transform: rotate(-5deg); -ms-transform-origin: bottom right;}	
    100% {-ms-transform: rotate(5deg); -ms-transform-origin: bottom right;}
}

/* Firefox */
@-moz-keyframes wobble {
   0%   { -moz-transform: rotate(5deg); }
    10%  {-moz-transform: rotate(-5deg);}
    20%  {-moz-transform: rotate(5deg);}
	30%	 {-moz-transform: rotate(-5deg);}	
    40% {-moz-transform: rotate(5deg);}
	50%	 {-moz-transform: rotate(-5deg);}	
    60% {-moz-transform: rotate(5deg);}
	70%	 {-moz-transform: rotate(-5deg);}	
    80% {-moz-transform: rotate(5deg);}
	90%	 {-moz-transform: rotate(-5deg);}	
    100% {-moz-transform: rotate(5deg);}
}

/* Safari and Chrome */
@-webkit-keyframes wobble {
    0%   { -webkit-transform: rotate(5deg); }
    10%  {-webkit-transform: rotate(-5deg);}
    20%  {-webkit-transform: rotate(5deg);}
	30%	 {-webkit-transform: rotate(-5deg);}	
    40% {-webkit-transform: rotate(5deg);}
	50%	 {-webkit-transform: rotate(-5deg);}	
    60% {-webkit-transform: rotate(5deg);}
	70%	 {-webkit-transform: rotate(-5deg);}	
    80% {-webkit-transform: rotate(5deg);}
	90%	 {-webkit-transform: rotate(-5deg);}	
    100% {-webkit-transform: rotate(5deg);}
}

/* Internet Explorer */
@-ms-keyframes wobble {
    0%   { -ms-transform: rotate(5deg); }
    10%  {-ms-transform: rotate(-5deg);}
    20%  {-ms-transform: rotate(5deg);}
	30%	 {-ms-transform: rotate(-5deg);}	
    40% {-ms-transform: rotate(5deg);}
	50%	 {-ms-transform: rotate(-5deg);}	
    60% {-ms-transform: rotate(5deg);}
	70%	 {-ms-transform: rotate(-5deg);}	
    80% {-ms-transform: rotate(5deg);}
	90%	 {-ms-transform: rotate(-5deg);}	
    100% {-ms-transform: rotate(5deg);}
}

@keyframes wobble {
     0%   { transform: rotate(5deg); }
    10%  {transform: rotate(-5deg);}
    20%  {transform: rotate(5deg);}
	30%	 {transform: rotate(-5deg);}	
    40% {transform: rotate(5deg);}
	50%	 {transform: rotate(-5deg);}	
    60% {transform: rotate(5deg);}
	70%	 {transform: rotate(-5deg);}	
    80% {transform: rotate(5deg);}
	90%	 {transform: rotate(-5deg);}	
    100% {transform: rotate(5deg);}
}



/* Safari and Chrome */
@-webkit-keyframes splashing3 {
 3%   { width: 0px; height:0px; }  
    5%   { width: 20px; height:21px; margin-left:-10px; margin-top:-10px;}  
 100%   { width: 20px; height:21px; margin-left:-10px; margin-top:-10px;}  	
}
@-webkit-keyframes splashing2 {
 8%   { width: 0px; height:0px; }  
    10%   { width: 10px; height:11px; margin-left:-5px; margin-top:-5px;}     
100%   { width: 10px; height:11px; margin-left:-5px; margin-top:-5px;}      	
}
@-webkit-keyframes splashing1 {
 13%   { width: 0px; height:0px; }  
    15%   { width: 10px; height:11px; margin-left:-5px; margin-top:-5px;}        
	 100%   { width: 10px; height:11px; margin-left:-5px; margin-top:-5px;}      
}

@-moz-keyframes splashing3 {
 3%   { width: 0px; height:0px; }  
    5%   { width: 20px; height:21px; margin-left:-10px; margin-top:-10px;}  
 100%   { width: 20px; height:21px; margin-left:-10px; margin-top:-10px;}  	
}
@-moz-keyframes splashing2 {
 8%   { width: 0px; height:0px; }  
    10%   { width: 10px; height:11px; margin-left:-5px; margin-top:-5px;}     
100%   { width: 10px; height:11px; margin-left:-5px; margin-top:-5px;}      	
}
@-moz-keyframes splashing1 {
 13%   { width: 0px; height:0px; }  
    15%   { width: 10px; height:11px; margin-left:-5px; margin-top:-5px;}        
	 100%   { width: 10px; height:11px; margin-left:-5px; margin-top:-5px;}      
}

@-ms-keyframes splashing3 {
 3%   { width: 0px; height:0px; }  
    5%   { width: 20px; height:21px; margin-left:-10px; margin-top:-10px;}  
 100%   { width: 20px; height:21px; margin-left:-10px; margin-top:-10px;}  	
}
@-ms-keyframes splashing2 {
 8%   { width: 0px; height:0px; }  
    10%   { width: 10px; height:11px; margin-left:-5px; margin-top:-5px;}     
100%   { width: 10px; height:11px; margin-left:-5px; margin-top:-5px;}      	
}
@-ms-keyframes splashing1 {
 13%   { width: 0px; height:0px; }  
    15%   { width: 10px; height:11px; margin-left:-5px; margin-top:-5px;}        
	 100%   { width: 10px; height:11px; margin-left:-5px; margin-top:-5px;}      
}

@keyframes splashing3 {
 3%   { width: 0px; height:0px; }  
    5%   { width: 20px; height:21px; margin-left:-10px; margin-top:-10px;}  
 100%   { width: 20px; height:21px; margin-left:-10px; margin-top:-10px;}  	
}
@keyframes splashing2 {
 8%   { width: 0px; height:0px; }  
    10%   { width: 10px; height:11px; margin-left:-5px; margin-top:-5px;}     
100%   { width: 10px; height:11px; margin-left:-5px; margin-top:-5px;}      	
}
@keyframes splashing1 {
 13%   { width: 0px; height:0px; }  
    15%   { width: 10px; height:11px; margin-left:-5px; margin-top:-5px;}        
	 100%   { width: 10px; height:11px; margin-left:-5px; margin-top:-5px;}      
}
@keyframes sawing-small {
    0%     { margin-left:-70px; }
    10%  {margin-left:-99x;}
    20%    { margin-left:-70px; }
	30%	 {margin-left:-99x;}
    40%   { margin-left:-70px; }
	50%	 {margin-left:-99x;}
    60%   { margin-left:-70px; }
	70%	{margin-left:-99x;}
    80%   { margin-left:-70px; }
	90%	 {margin-left:-99x;}
    100%   { margin-left:-70px; }
}
@-webkit-keyframes sawing-small {
   0%     { margin-left:-70px; }
    10%  {margin-left:-99x;}
    20%    { margin-left:-70px; }
	30%	 {margin-left:-99x;}
    40%   { margin-left:-70px; }
	50%	 {margin-left:-99x;}
    60%   { margin-left:-70px; }
	70%	{margin-left:-99x;}
    80%   { margin-left:-70px; }
	90%	 {margin-left:-99x;}
    100%   { margin-left:-70px; }
}
@-moz-keyframes sawing-small {
     0%     { margin-left:-70px; }
    10%  {margin-left:-99x;}
    20%    { margin-left:-70px; }
	30%	 {margin-left:-99x;}
    40%   { margin-left:-70px; }
	50%	 {margin-left:-99x;}
    60%   { margin-left:-70px; }
	70%	{margin-left:-99x;}
    80%   { margin-left:-70px; }
	90%	 {margin-left:-99x;}
    100%   { margin-left:-70px; }
}
@keyframes sawing-small {
     0%     { margin-left:-70px; }
    10%  {margin-left:-99x;}
    20%    { margin-left:-70px; }
	30%	 {margin-left:-99x;}
    40%   { margin-left:-70px; }
	50%	 {margin-left:-99x;}
    60%   { margin-left:-70px; }
	70%	{margin-left:-99x;}
    80%   { margin-left:-70px; }
	90%	 {margin-left:-99x;}
    100%   { margin-left:-70px; }
}


@media screen and (max-height:768px) {
	.hammer {
		width:191px;
		height:112px;
		margin-left: -95px;
margin-top: -56px;
	}
	.spanner {
		width:223px;
		height:83px;
		margin-left: -111px;
margin-top: -41px;
	}
	.brush {
		width:112px;
		height:146px;
		margin-left: -56px;
margin-top: -73px;
	}
	.ladder {
		width:48px;
		height:132px;
		margin-left: -24px;
margin-top: -66px;
	}
	.screwdriver {
		width:222px;
		height:65px;
		margin-left: -111px;
margin-top: -32px;
	}
	.saw {
		width:199px;
		height:114px;
		margin-left: -99x;
margin-top: -57px;
	}
	td {
	min-width:280px;
	*width:280px;
	height:180px;
	
}

.bathroom {
		width:246px;
		height:156px;
		margin-left: -123px;
		margin-top: -78px;
	}
	.lounge {
		width:127px;
		height:133px;
		margin-left: -63px;
		margin-top: -66px;
	}
	.stairs {
		width:157px;
		height:180px;
		margin-left: -78px;
		margin-top: -90px;
	}
	.bedroom {
		width:150px;
		height:137px;
		margin-left: -75px;
		margin-top: -68px;
	}
	.cellar {
		width:187px;
		height:180px;
		margin-left: -93px;
		margin-top: -90px;
	}
	
	.garage {
		width:158px;
		height:133px;
		margin-left: -79px;
		margin-top: -66px;
	}
	.kitchen {
		width:116px;
		height:125px;
		margin-left: -58px;
		margin-top: -62px;
	}
.main-title {
margin-top:0px;
padding-bottom:0px;
}
.areyou { top:80px; }
.intro {
font-size:14px;
}
.saw-holder:hover div.saw{
    -webkit-animation-name: sawing-small;
    -webkit-animation-duration: 2s;
	animation-name: sawing-small;
    animation-duration:2s;
	-moz-animation-name: sawing-small;
	-moz-animation-duration: 2s;
	-ms-animation-name: sawing-small;
	-ms-animation-duration: 2s;
	cursor:pointer;
}

.sex-image {	
	width:293px;
	height:285px;
}
.female {
width: 134px;
height: 240px;
left: 6px;
top: 0px;
}
.male {
	width: 154px;
height: 167px;
left: 134px;
top: 0px;
}
.result-content {
font-size: 14px;
}
.restart {
font-size:15px;
}

}