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



/* rotator css */
div ul {	
	height: 100%;
	padding: 0;
	margin: 0;
 
}
div ul li {	
	postion:absolute;
    list-style: none;

}

/* rotator image style */    
div ul.rotater li img {
	width:100%;
	position:absolute;
	background:#ffffff;  
}
div ul li.show {
	width:100%;
	position:absolute;
	background:#ffffff; 
	z-index:200; 
}
div ul li.noshow {
	width:100%;
	position:absolute;
	background:#ffffff; 
	z-index:0;
}


/*placement, scaling and position of images*/

div ul li.show img.imageInBox {
	background:#ffffff;
	position:absolute;
	opacity: 1;
	z-index:300;
	display:block;
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	transition:all 0.3s linear;
	background-position:inherit; 
	}
	

div ul li.show img.imageInBoxNew {
	background:#ffffff;
	display:block;
	opacity: 1;
	z-index:250;
	}
	 

#moveBox1, #moveBox2, #moveBox3, #moveBox4, #moveBox5, #moveBox6, #moveBox7 {
	
	width:100%;
	height: 100%;
	float:left;  
	position:absolute; 
	top:0; 
	bottom:0; 
	margin:auto;
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	transition:all 0.3s linear; 
	
}

#moveBox1 {width: 395px; left:-75px}
#box1:hover #moveBox1{left:0}

#moveBox2 {width: 487px; top: -166px;}
#box2:hover #moveBox2{top: 0;}

#moveBox3 {width: 216px; right: -70px}
#box3:hover #moveBox3{right: 0}

#moveBox4 {width: 272px; right: -70px; top: -84px;}
#box4:hover #moveBox4{right: 0; top: -84px;}

#moveBox5 {width: 267; top:-162px}
#box5:hover #moveBox5{right: 0; top: 0;}

#moveBox6 {width:405px; top: -163px; left: -69px}
#box6:hover #moveBox6{top:0; left:0}

#moveBox7 {width:405px; top:-152px}
#box7:hover #moveBox7{top: 0;}

/*boxes group settings*/
#box1, #box2, #box3, #box4, #box5, #box6, #box7 {
	position:relative;
	overflow:hidden;
	display:block;
	z-index: 0;
	background:#ffffff;
	border:#211c1b 5px solid;
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	transition:all 0.3s linear;  	
}

/*boxes structure*/
#box1{height: 490px;width: 243px;z-index: 0;}
#box2{height: 162px;width: 487px;left: 248px;top: -500px;z-index: 0;}
#box3{height: 323px;width: 77px;left: 658px;top: -505px;z-index: 0;}
#box4{height: 240px;width: 133px;left: 248px; top: -838px;z-index: 0;}
#box5{height: 162px;width: 267px;left: 386px; top: -1088px;z-index: 0;}
#box6{height: 77px;width: 267px;left: 386px; top: -1097px;z-index: 0; background-color:#000}
#box7{height: 78px;width: 405px;left: 248px;top: -1102px;z-index: 0;}

/*pop-outs group settings*/
#button1, #button2, #button3, #button4, #button5, #button6, #button7{
    background-color: #000;
    height: 40px;
    width: 0px;
    display: block;   
    position:absolute;
	bottom: -80px;
    z-index: 500;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	opacity: .75;
	border-top:#FFF thin solid;
	border-left:#FFF thin solid;
	border-right:#FFF thin solid;
	margin-left: 5px;
	-webkit-transition:all 0.5s linear;
	-moz-transition:all 0.5s linear;
	-ms-transition:all 0.5s linear;
	-o-transition:all 0.5s linear;
	transition:all 0.5s linear;
}

#box1:hover #button1, #box2:hover #button2, #box3:hover #button3, #box4:hover #button4, #box5:hover #button5, #box6:hover #button6, #box7:hover #button7{
	bottom: 0px;
	width:66%;
}