@charset "utf-8";

#container {
	width: 860px;
	margin-right: auto;
	margin-left: auto;
	height:650px;
	border:1px dotted #003399;
	
	-moz-border-radius: 30px; /* Firefox */
	-webkit-border-radius: 30px; /* Safari, Chrome */
	border-radius: 30px; /* CSS3 */
	behavior: url(images/border-radius.htc);
	
	-webkit-box-shadow: 3px 3px 3px #000066;
    -moz-box-shadow: 3px 3px 3px #000066;
	box-shadow: 3px 3px 3px #000066;
	
	/* working background*/
	background-image: url(images/gradient.svg);
    background-size: 100% 100%;
    background-repeat: repeat-x;
    background-position: 0 0;
    background-color: #0066FF; /* old browsers */
	
	/* gradient color*/	
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33FFFF', endColorstr='#0066FF', GradientType=0); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#33FFFF), to(#0066FF)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #33FFFF,  #0066FF); /* for firefox 3.6+ */ 
	background-image: -o-linear-gradient(rgb(51,255,255),rgb(0,102,255));/* for opera */
}

/* ribbon style */

.ribbon-wrapper {
	position: relative;
	margin-top:60px;
}

.ribbon-front {
	background-color:#7133a5;	
	height: 60px;
	width: 905px;
	position: relative;
	left:-20px;
	z-index: 2;
}

.ribbon-front,
.ribbon-back-left,
.ribbon-back-right
{
	-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	-o-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
}

.ribbon-edge-topleft,
.ribbon-edge-topright,
.ribbon-edge-bottomleft,
.ribbon-edge-bottomright {
	position: absolute;
	z-index: 1;
	border-style:solid;
	height:0px;
	width:0px;
}

.ribbon-edge-topleft,
.ribbon-edge-topright {
}

.ribbon-edge-bottomleft,
.ribbon-edge-bottomright {
	top: 60px;
}

.ribbon-edge-topleft,
.ribbon-edge-bottomleft {
	left: -20px;
	border-color: transparent #99c transparent transparent;
}

.ribbon-edge-topleft {
	top: -10px;
	border-width: 10px 20px 0 0;
}

.ribbon-edge-bottomleft {
	border-width: 0 20px 0px 0;
}

.ribbon-edge-topright,
.ribbon-edge-bottomright {
	left: 865px;
	border-color: transparent transparent transparent #99c;
}

.ribbon-edge-topright {
	top: -10px;
	border-width: 10px 0 0 20px;
}

.ribbon-edge-bottomright {
	border-width: 0 0 0px 20px;
}

.ribbon-back-left {
	position: absolute;
	top: -10px;
	left: 0px;
	width: 0px;
	height: 60px;
	z-index: 0;
}

.ribbon-back-right {
	position: absolute;
	top: -10px;
	right: 0px;
	width: 0px;
	height: 60px;
	z-index: 0;
}

body{
	color:#000000;
}
	
img.banner{
	width:990px;
	height:150px;
	border:none;
	padding:0px;
	margin:0px;
}
	
img{
	width: 180px;
	height:180px;
	border:5px;
	border:dashed;
	border-color:#FFFFFF;
	padding:5px;	
	margin:30px 0 0 70px;
}

.img2{
	-webkit-transition: all .3s ease-in-out; 
	-moz-transition: all .3s ease-in-out; 
	-o-transition: all .3s ease-in-out; 
	-ms-transition: all .3s ease-in-out;
}	

.img2:hover{
	-webkit-transform: rotate(360deg) scale(1.5); 
	-moz-transform: rotate(360deg) scale(1.5); 
	-o-transform: rotate(360deg) scale(1.5); 
	-ms-transform: rotate(360deg) scale(1.5);
}

.img3{
	-webkit-transition: all .3s ease-in-out; 
	-moz-transition: all .3s ease-in-out; 
	-o-transition: all .3s ease-in-out; 
	-ms-transition: all .3s ease-in-out;
}

.img3:hover{
	-webkit-transform: translate(400px,-50px); 
	-moz-transform: translate(400px,-50px);
	-o-transform: translate(400px,-50px); 
	-ms-transform: translate(400px,-50px);
}

.img4{
	-webkit-transition: all 1s linear;
	-moz-transition: all 1s linear;
	-o-transition: all 1s linear;
	transition: all 1s linear;
}
  
.img4:hover{   
	-webkit-transform: scale(1.5); 
	-moz-transform: scale(1.5); 
	-o-transform: scale(1.5); 
	-ms-transform: scale(1.5);	
}
  
.img5{
	width:180px;
	height:180px;
	transition-property:width .1s linear .3s;
	/* Firefox 4 */
	-moz-transition:width .1s linear .3s;
	/* Safari and Chrome */
	-webkit-transition:width .1s linear .3s;
	/* Opera */
	-o-transition:width .1s linear .3s;
}

.img5:hover{
    width:220px;
}
 
.img6{
	-webkit-transition: all .3s ease-in-out; 
	-moz-transition: all .3s ease-in-out; 
	-o-transition: all .3s ease-in-out; 
	-ms-transition: all .3s ease-in-out;
}

.img6:hover{
	-webkit-transform: translate(-100px, 50px); 
	-moz-transform: translate(-100px, 50px);
	-o-transform: translate(-100px, 50px); 
	-ms-transform: translate(-100px, 50px);
}