/* CSS Document */

#wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #CCFF00;
}

#flaquerbox {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -210px;
	margin-top: -210px;
	width: 400px;
	height: 400px;
	border: 10px solid black;
}

#flaquerbox2 {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -210px;
	margin-top: -210px;
	width: 400px;
	height: 400px;
	border: 10px solid blue;
	background-color: black;
}

.flaq {
	display: block;
	float: left;
	width: 40px;
	height: 40px;
	background-image: url('../gfx/flaq.png');
	background-position: 0px 0px;
	-webkit-transition-property: all;
	-webkit-transition-duration: 100ms;
	-webkit-transition-timing-function: linear;
	-webkit-transition-repeat-count: initial;
}

.flaq2 {
	display: block;
	float: left;
	width: 40px;
	height: 40px;
/*	background-image: url('http://flaquerbox.luc.at/gfx/flaq2.png'); */
	background-color: #FF6600;
	-webkit-transition: opacity 1s ease-in;
	opacity: 0;
}

h1 {
	position: absolute;
	top: 415px;
	left: -10px;
	margin: 0;
	padding: 0;
}
	
.flaq:hover {
	background-position: 0px -40px;
}
	
.flaq2:hover {
	-webkit-transition: opacity 0.1s ease-out;
	opacity: 1;
}
	
#test {
-webkit-transition-property: ;
-webkit-transition-duration: 500ms;
-webkit-transition-timing-function: linear;
-webkit-transition-repeat-count: initial;
border-top-width: 10px;
border-right-width: 10px;
border-bottom-width: 10px;
border-left-width: 10px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: black;
border-right-color: black;
border-bottom-color: black;
border-left-color: black;
/* This div will acquire a slightly thicker blue border when hovered. */
}