body{
	background:#5298fc; 	
	text-align:center;
  font-family: "Open Sans", sans-serif; 
}
#view-code{
  color:#fff;  
  opacity:0.7;
  font-size:14px;
  text-transform:uppercase;
  font-weight:700;
  text-decoration:none;
  position:absolute;top:700px; left:50%;margin-left:-35px;
}
#view-code:hover{opacity:1;}
#window{
	margin:30px auto 0;
	border-radius:6px;
	background:#fff;
	width:675px;
	height:620px;	
	overflow:hidden;
	position:relative;
}
#header{
	background:#e3e5e9;
	height:33px;
	padding-left:18px;
}
#header .circle{
	background:#9fa2a8;
	border-radius:50%;
	float:left;
	width:12px;
	height:12px;
	margin-right:6px;
	margin-top:11px;
}

.thumbs{ padding:10px 50px 30px 70px; }
.thumbs p, .thumbs p.floating-thumb{
  background: #e3e5e9;
  width: 155px;
  height: 60px;
  margin: 30px 30px 0 0;
  border-radius: 4px;
  float: left;
  padding-top: 121px;
}

.floating-thumb{	
	background: #e3e5e9;
    width: 155px;
    height: 60px;    
    border-radius: 4px;
    float: left;
    padding-top: 121px;
	position:absolute;
	top: 156px;
	left: 70px;
}
.floating-thumb.animate{
	width:303px;
	height:80px;
	margin-top:20px;
	padding-top: 326px;	
	top: 146px;
    left: 186px;
	-webkit-transition: all 400ms cubic-bezier(0,.93,.33,.99);
	   -moz-transition: all 400ms cubic-bezier(0,.93,.33,.99);
	    -ms-transition: all 400ms cubic-bezier(0,.93,.33,.99);
	     -o-transition: all 400ms cubic-bezier(0,.93,.33,.99);
		    transition: all 400mscubic-bezier(0,.93,.33,.99);
}
.thumbs p span, p.floating-thumb span{
	display:block;
	height:10px;
	margin:10px 20px;
	background:#d2d4d9;
	border-radius:2px;
}
.thumbs p span.short, p.floating-thumb span.short{width:50px;}
.thumbs p:hover{
	background:#dfe0e5;
	cursor:pointer;
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
	    -ms-transition: all 100ms ease-out;
	     -o-transition: all 100ms ease-out;
		    transition: all 100ms ease-out;
	
}
#headline{padding:39px 50px 0px 70px;}
#headline p{
	width:380px;
	margin:10px 0;
	height:15px;
	background:#9fa2a8;
	border-radius:3px;
}
#headline p.short{width:220px;}

#grid-selector{
	width:100px;
	position:absolute;
    top: 92px;
    right: 79px;	
}

#viewCarousel{
	background:#e3e5e9;
	width:20px;
	height:20px;
	float:right;
	border-radius:1px;
}
#viewCarousel:hover{
	cursor:pointer;
}

#viewCarousel:hover, #viewGrid:hover p{
	cursor:pointer;
	background:#cacdd1;
}
#viewCarousel.active, #viewGrid.active p{
	color:#5298fc;
}
#viewGrid{
	width:22px;
	height:20px;
	float:right;
	margin-top:-1px;
	margin-right:5px;
}

#viewGrid p{
	background: #e3e5e9;
	  width: 9px;
	  height: 9px;
	  float: right;
	  border-radius: 1px;
	  margin: 1px;
}
#viewGrid.active p, #viewCarousel.active{
	background:#9fa2a8;
}

#carousel{ 
	overflow:hidden;	
	position:relative;
	height:488px;
    margin-top: 25px;
	display:none;
	position:absolute;
	top:121px; 
	left:0;
	width:675px;
}
#carousel .innerCarousel{
	position:absolute;
	top:0; 
	left:-168px;

}
#carousel .innerCarousel div{
	width:	337px;
	height:448px;
	text-align:center;
	float:left;
}
#carousel .innerCarousel div p{
  background: #e3e5e9;
  width: 220px;
  height: 73px;
  margin: 30px auto 0 auto;
  border-radius: 4px;
  padding-top: 300px;
  margin-top: 38px;  
  -webkit-transition: all 300ms cubic-bezier(0,.93,.33,.99);
	   -moz-transition: all 300ms cubic-bezier(0,.93,.33,.99);
	    -ms-transition: all 300ms cubic-bezier(0,.93,.33,.99);
	     -o-transition: all 300ms cubic-bezier(0,.93,.33,.99);
		    transition: all 300ms cubic-bezier(0,.93,.33,.99);
  
}
#carousel .innerCarousel div p:hover{cursor:pointer;}
#carousel .innerCarousel div p.current:hover{cursor:normal;}

#carousel .innerCarousel div p.current{
	width:303px;
	height:80px;
	margin-top:20px;
	padding-top: 326px;	
	-webkit-transition: all 300ms cubic-bezier(0,.93,.33,.99);
	   -moz-transition: all 300ms cubic-bezier(0,.93,.33,.99);
	    -ms-transition: all 300ms cubic-bezier(0,.93,.33,.99);
	     -o-transition: all 300ms cubic-bezier(0,.93,.33,.99);
		    transition: all 300ms cubic-bezier(0,.93,.33,.99);
}
#carousel .innerCarousel span,
p.floating-thumb.animate span{
	height:10px;
	display:block;
	margin:10px 30px;
	height:12px;
	background:#d2d4d9;
	border-radius:3px;
}
#carousel .innerCarousel span.short,
p.floating-thumb.animate span.short{width:170px;}
	

	
	
	
.title{
	position:absolute; 
	top:152px;
	left:0;
	width:100%;
	height:60px;
	overflow:hidden;
	-webkit-transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
	   -moz-transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
	    -ms-transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
	     -o-transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
		    transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
}