body, html {
	background: #EFEFEF;
	line-height: 20px;
	font-size: 14px;
	color: #333;
	font: "Lucida Grande", "Lucida Sans Unicode", helvetica, verdana, arial, sans-serif;
	font-weight: normal;
	margin-bottom: 120px;
}

h1 {
	color: #666;
	font-size: 42px;	
	line-height: 36px;           
	-moz-text-shadow: 0 1px 1px #666;
    -webkit-text-shadow: 0 1px 1px #666;
    text-shadow: 0 1px 1px #666;  
	margin-bottom: 48px;	  	
}    

h1 span.author {
	font-size: 16px;	
}                   
h1 span a{
	color: #00BFFF;
}

h2 {            
    color: #666;
	font-size: 20px;
	line-height: 36px;
	padding-bottom: 5px;
	-moz-text-shadow: 0 1px 1px #999;
    -webkit-text-shadow: 0 1px 1px #999;
    text-shadow: 0 1px 1px #999;    	
  	clear: left;
}

h3 {
	font-size: 18px;
	line-height: 26px;
	letter-spacing: -1px;
	font-weight: normal;
}

a.link, a:active, a:selected {
	border: none;
	outline: none;
	color: #00BFFF;	
}



a.link, a:visited{
	color: #00BFFF;  
}       


#wrap{
	width: 960px;     
	position: absolute;
	left: 50%;    
	margin-left: -480px;
	margin-top: 60px;   
}   

         
.container1 {
	position: relative;     
	width: 640px;
	height: 420px;
	float: left;      
	-webkit-box-shadow: 0 0 32px #666;
	-moz-box-shadow: 0 0 32px #666;
	box-shadow: 0 0 32px #666;  	
 	overflow: hidden;    
	background: #333;

}        


.container2{
	position: relative;     
	width: 853px;
	height: 420px;
	float: left;
	-moz-border-radius: 8px;
	border-radius: 8px;    
	/*
	-webkit-box-shadow: 0 0 32px #666;
	-moz-box-shadow: 0 0 32px #666;
	box-shadow: 0 0 32px #666;  	
	*/
 	overflow: hidden;
	margin-bottom: 80px;  
	background: #CCC;
}    

h2#example2{          
	padding-top: 32px;  
} 


.container1 .thumbnails{
	position: absolute;
	left: 0;
	width: 213px;      
	height: 426px;
	color: #FFF;       
	font-family: helvetica, "Lucida Grande", "Lucida Sans Unicode", verdana, arial, sans-serif;
	z-index: 1003;

}  

.container2 .thumbnails{
	position: absolute;
	right: 0;
	width: 213px;      
	height: 426px;
	color: #FFF;       
	font-family: helvetica, "Lucida Grande", "Lucida Sans Unicode", verdana, arial, sans-serif;
	z-index: 1003;       
	opacity: .9;
} 

/* un-comment this if you want to move the big image to the right and display the whole view of the image */            
/* 
.container1 .bigImages ul li{
	margin-left: 213px;
}  
*/

.bigImages ul li{
	position: relative;     
	display: block;
}
.bigImages ul li a{   
	position: absolute;  
}
.bigImages ul li > img{
	position: absolute;  
	left: 0;
	top: 0;
	z-index: 1001; 
}

.bigImages ul li > h4{
	position: relative;
	display: inline-block;	
	font: 26px "Lucida Grande", "Lucida Sans Unicode", helvetica, verdana, arial, sans-serif;
	padding: 8px;
	color: #FFF;
	background: #2F4F4F;       
	-moz-text-shadow: 0 1px 1px #666;
    -webkit-text-shadow: 0 1px 1px #666;
    text-shadow: 0 1px 1px #666;  
	-moz-border-radius: 8px;
	border-radius: 8px;	 		
	z-index: 1002;                     
}  

.bigImages ul li > p{
	position: relative;    
	display: inline-block;
	padding: 8px;
	font: 12px "Lucida Grande", "Lucida Sans Unicode", helvetica, verdana, arial, sans-serif;
	background: #4682B4;     	
	color: #FFF;
	-moz-border-radius: 8px;
	border-radius: 8px;	   
	-moz-text-shadow: 0 1px 1px #666;
    -webkit-text-shadow: 0 1px 1px #666;
    text-shadow: 0 1px 1px #666;  
	z-index: 1002;                 	
}    

.container1 .bigImages ul li > h4{
	margin-top: 120px;
	margin-left: 300px; 
} 

.container1 .bigImages ul li > p{   
	margin-top: 4px;
	margin-left: 300px;	 
	
} 
                     
.container2 .bigImages ul li{    
	width: 600px;     
	height: 420px;
}                 

.container2 .bigImages ul li h4{ 
	margin-top: 120px;
	margin-left: 140px;    
	clear: right;	
}    
.container2 .bigImages ul li p { 
	margin-top: 4px;                
	margin-left: 140px;             	
	float: left;
	clear: left;
}  



.bigImages ul li .green1{
	background: #9ACD32;
}                       
.bigImages ul li .green2{
	background: #6B8E23;
}
.bigImages ul li .orange{
	background: #FFA500;
}
.bigImages ul li .red{
	background: #FF6347;
}                       

.thumbnails a{
	color: #00BFFF;
}  

.thumbnails ul{
	display: block;
}
.thumbnails ul li{    	
	display: block;
	width: 213px;
	height: 142px;       	
}        

.thumbnails div.nextArrow{
	position: absolute;  
	background: url(../images/assets/arrow.png) no-repeat; 
	width: 24px;
	height: 24px;      
	left: 90px;        
	top: -40px;
	z-index: 1005;     
}           

div.vimeo, #container2 div.youtube{
	position: absolute;
	z-index: 1100;         
	overflow: hidden;
}


.animate0{
   	-webkit-animation-duration: .6s;
	-webkit-animation-delay: 0s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: .6s;
	-moz-animation-delay: 0s;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: both;
	-ms-animation-duration: .6s;
	-ms-animation-delay: 0s;
	-ms-animation-timing-function: ease;
	-ms-animation-fill-mode: both;
	animation-duration: .6s;
	animation-delay: 0s;
	animation-timing-function: ease;
	animation-fill-mode: both;	          
}         

.animate1{
   	-webkit-animation-duration: .6s;
	-webkit-animation-delay: .2s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: .6s;
	-moz-animation-delay: .2s;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: both;
	-ms-animation-duration: .6s;
	-ms-animation-delay: .2s;
	-ms-animation-timing-function: ease;
	-ms-animation-fill-mode: both;
	animation-duration: .6s;
	animation-delay: .2s;
	animation-timing-function: ease;
	animation-fill-mode: both;	          
} 

.animate2{
   	-webkit-animation-duration: .6s;
	-webkit-animation-delay: .4s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: .6s;
	-moz-animation-delay: .4s;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: both;
	-ms-animation-duration: .6s;
	-ms-animation-delay: .4s;
	-ms-animation-timing-function: ease;
	-ms-animation-fill-mode: both;
	animation-duration: .6s;
	animation-delay: .4s;
	animation-timing-function: ease;
	animation-fill-mode: both;	          
} 

.animate3{
   	-webkit-animation-duration: .6s;
	-webkit-animation-delay: .6s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: .6s;
	-moz-animation-delay: .6s;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: both;
	-ms-animation-duration: .6s;
	-ms-animation-delay: .6s;
	-ms-animation-timing-function: ease;
	-ms-animation-fill-mode: both;
	animation-duration: .6s;
	animation-delay: .6s;
	animation-timing-function: ease;
	animation-fill-mode: both;	          
}   

.animate4{
   	-webkit-animation-duration: .6s;
	-webkit-animation-delay: .8s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: .6s;
	-moz-animation-delay: .8s;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: both;
	-ms-animation-duration: .6s;
	-ms-animation-delay: .8s;
	-ms-animation-timing-function: ease;
	-ms-animation-fill-mode: both;
	animation-duration: .6s;
	animation-delay: .8s;
	animation-timing-function: ease;
	animation-fill-mode: both;	          
}  

.animate5{
   	-webkit-animation-duration: .6s;
	-webkit-animation-delay: 1s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: .6s;
	-moz-animation-delay: 1s;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: both;
	-ms-animation-duration: .6s;
	-ms-animation-delay: 1s;
	-ms-animation-timing-function: ease;
	-ms-animation-fill-mode: both;
	animation-duration: .6s;
	animation-delay: 1s;
	animation-timing-function: ease;
	animation-fill-mode: both;	          
}              

.animate6{
   	-webkit-animation-duration: .6s;
	-webkit-animation-delay: 1.2s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: .6s;
	-moz-animation-delay: 1.2s;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: both;
	-ms-animation-duration: .6s;
	-ms-animation-delay: 1.2s;
	-ms-animation-timing-function: ease;
	-ms-animation-fill-mode: both;
	animation-duration: .6s;
	animation-delay: 1.2s;
	animation-timing-function: ease;
	animation-fill-mode: both;	          
}              

.animate7{
   	-webkit-animation-duration: .6s;
	-webkit-animation-delay: 1.4s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: .6s;
	-moz-animation-delay: 1.4s;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: both;
	-ms-animation-duration: .6s;
	-ms-animation-delay: 1.4s;
	-ms-animation-timing-function: ease;
	-ms-animation-fill-mode: both;
	animation-duration: .6s;
	animation-delay: 1.4s;
	animation-timing-function: ease;
	animation-fill-mode: both;	          
}