* {
	padding: 0;
	margin: 0;
}

#header {
  height: 25px;
  text-align: center;
  font: 12px/25px Helvetica, sans-serif;
  background: #eee;
}

#container {
	width: 700px;
	height: 200px;
	margin: 100px auto;
}

.hoverDot {
	float: left;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	height: 200px; width: 200px;
	background-color: #eee;
	margin: 0 50px 50px 0;
}


#headline {
	background: #f5f5f5 url('headline.jpg') no-repeat;
}



/* @group Sliding Doors */

#slidingDoors {
	
	/*Applying the Background Images*/
	background-image: url('wood.jpg'), url('wood.jpg'), url('car.jpg');
	background-repeat: no-repeat;
	
	/*Positioning the Background Images*/
	background-position: -100px 0px, 100px 0px, 0px 0px;
	
	/*Transition Parameters*/
	-webkit-transition: all 0.7s ease-in-out;
	-moz-transition: all 0.7s ease-in-out;
	-o-transition: all 0.7s ease-in-out;
	-ms-transition: all 0.7s ease-in-out;
	transition: all 0.7s ease-in-out;
}

#slidingDoors:hover {
	background-position: -200px 0px, 200px 0px, 0px 0px;
}

/* @end */

/* @group Sliding Doors Vertical */

#slidingDoorsVert {
	
	/*Applying the Background Images*/
	background-image: url('mosaic.jpg'), url('mosaic.jpg'), url('car.jpg');
	background-repeat: no-repeat;
	margin-right: 0;
	
	/*Positioning the Background Images*/
	background-position: 0px -100px, 0px 100px, 0px 0px;
	
	/*Transition Parameters*/
	-webkit-transition: all 0.7s ease-in-out;
	-moz-transition: all 0.7s ease-in-out;
	-o-transition: all 0.7s ease-in-out;
	-ms-transition: all 0.7s ease-in-out;
	transition: all 0.7s ease-in-out;
}

#slidingDoorsVert:hover {
	background-position: 0px -200px, 0px 200px, 0px 0px;
}

/* @end */

/* @group BreakApart */

#breakApart {
	background-image: url('squares.jpg'), url('squares.jpg'), url('squares.jpg'), url('squares.jpg'), url('car.jpg');
	background-repeat: no-repeat;
	background-position: -100px -100px, 100px 100px, -100px 100px, 100px -100px, 0px 0px;
	
	
	/*Transition*/
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;	
}

#breakApart:hover {
	background-position: -200px -200px, 200px 200px, -200px 200px, 200px -200px, 0px 0px;
}

/* @end */

/* @group BreakApart Rounded */

#breakApartRounded {
	background-image: url('circle.png'), url('circle.png'), url('circle.png'), url('circle.png'), url('car.jpg');
	background-repeat: no-repeat;
	background-position: -50px -50px, 50px 50px, -50px 50px, 50px -50px, 0px 0px; /*right down*/
	
	/*Transition*/
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
		
}

#breakApartRounded:hover {
	background-position: -200px -200px, 200px 200px, -200px 200px, 200px -200px,  0px 0px;	
}

/* @end */

/* @group Twist and Shout */

#twistAndShout {
	background-image: url('crisscross.jpg'), url('crisscross.jpg'), url('crisscross.jpg'), url('crisscross.jpg'), url('car.jpg');
	background-repeat: no-repeat;
	background-position: -100px -100px, 100px 100px, -100px 100px, 100px -100px, 0px 0px;
	margin-right: 0;
	
	/*Rotate*/
	-webkit-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	-o-transform:rotate(-90deg);
	-ms-transform:rotate(-90deg);
	transform:rotate(-90deg);
	
	/*Transition*/
	-webkit-transition: background-position .6s ease-in-out, -webkit-transform .3s ease;
	-moz-transition: background-position .6s ease-in-out, -moz-transform .3s ease;
	-o-transition: background-position .6s ease-in-out, -o-transform .3s ease;
	-ms-transition: background-position .6s ease-in-out, -ms-transform .3s ease;
	transition: background-position .6s ease-in-out, transform .3s ease;
}

#twistAndShout:hover {
	background-position: -200px -200px, 200px 200px, -200px 200px, 200px -200px, 0px 0px;
	
	/*Rotate*/
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	transform:rotate(0deg);	
}

/* @end */