/*

Site: Ray Kit Shum | Online Gallery
Author: Ray Kit Shum

© Copyright 2012 Ray Kit Shum. All rights reserved.

*/

body
	{
	margin: 0px;
	background-color: #CCC;
	background-image: url('../images/grid.gif');
	}

#container
	{
	position: absolute;
	top: -50%;
	left: -50%;
	bottom: -50%;
	right: -50%;	
	margin: auto;
	width: 600px;
	height: 400px;
	}
	
#flash_container
	{	
	position: absolute;
	top: -50%;
	left: -50%;
	bottom: -50%;
	right: -50%;	
	margin: auto;
	width: 600px;
	height: 600px;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	color: #CCC;
	text-align: center;
	}
	
#panorama_container
	{	
	position: relative;
	top: 180px;
	}

#header
	{
	width: 600px;
	height: 300px;
	}
	
#footer
	{
	position:relative;
	top:5px;
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
	color: #555;
	width: 600px;
	height: 38px;
	}	

#gallery_container ul
	{
    list-style-type: none;
	padding: 0px;
	margin: 0px 0px 0px 20px;
	width: 558px;
	height: 62px;
    }

#gallery_container li
	{
    float: left;
	padding: 0px 2px 2px 2px;
    }

#gallery_container .thumbnail
	{
	border: 1px solid #CCC;
	
	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
	-khtml-opacity: 1.0;
	opacity: 1.0;
	
	border-radius: 50px;
 	-moz-border-radius: 50px;
	}
	
#gallery_container .thumbnail:hover
	{
	border: 1px solid #FFF;
	
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	
	-moz-box-shadow: 0px 2px 5px #000;
	-webkit-box-shadow: 0px 2px 5px #000;
	box-shadow: 0px 2px 5px #000;
	
	transform: scale(0.9,0.9);
 	-ms-transform: scale(0.9,0.9); /* IE 9 */
 	-webkit-transform: scale(0.9,0.9); /* Safari and Chrome */
 	-o-transform: scale(0.9,0.9); /* Opera */
 	-moz-transform: scale(0.9,0.9); /* Firefox */
	
	transition-duration: .3s, .3s;
	-webkit-transition-duration: .3s, .3s; 
	-o-transition-duration: .3s, .3s; 
	-moz-transition-duration: .3s, .3s;
	}
	
#gallery_container a.gallery span /* Preview Hidden Box */
	{
    position:absolute;
    top: 275px;
    left: 23px;
    width: 580px; 
    height: 0px; 
    overflow: hidden;
	
	transition-duration: .5s, .5s;
	-webkit-transition-duration: .5s, .5s; 
	-o-transition-duration: .5s, .5s; 
	-moz-transition-duration: .5s, .5s; 
    }

#gallery_container a.gallery:hover span /* Preview Pop-up Box */
	{
	position: absolute; 
    top: 0px; 
    left: 23px;
	width: 580px; 
	height: 285px;
	
	transition-duration: .5s, .5s;
	-webkit-transition-duration: .5s, .5s; 
	-o-transition-duration: .5s, .5s; 
	-moz-transition-duration: .5s, .5s; 
    }
	
#gallery_container a.gallery span .preview /* Preview Pop-up Image */
	{
	position: absolute; /* force image underneath text */
	top: 0px;
	
	border: 2px solid #FFF;
	
	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
	-khtml-opacity: 1.0;
	opacity: 1.0;

	border-radius: 10px;
 	-moz-border-radius: 10px;
	
	-moz-box-shadow: 0px 3px 6px #000;
	-webkit-box-shadow: 0px 3px 6px #000;
	box-shadow: 0px 3px 6px #000;
	
	transition-duration: .5s, .5s;
	-webkit-transition-duration: .5s, .5s; 
	-o-transition-duration: .5s, .5s; 
	-moz-transition-duration: .5s, .5s; 
	}
	
#gallery_container a.gallery span:hover .preview
	{
	position: relative;
	z-index: 10;
	
	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
	-khtml-opacity: 1.0;
	opacity: 1.0;
	
	transition-duration: .5s, .5s;
	-webkit-transition-duration: .5s, .5s; 
	-o-transition-duration: .5s, .5s; 
	-moz-transition-duration: .5s, .5s;
	}
	
#gallery_container a.visualization .thumbnail:hover, #gallery_container a.visualization span .preview
	{
	border-color: #6CF;
    }

#gallery_container a.illustration .thumbnail:hover, #gallery_container a.illustration span .preview
	{
	border-color: #FC0;
	}

#gallery_container a.game .thumbnail:hover, #gallery_container a.game span .preview
	{
	border-color: #F93;
    }

#gallery_container a.pencil .thumbnail:hover, #gallery_container a.pencil span .preview
	{
	border-color: #36C;
    }
	
#gallery_container a.panorama .thumbnail:hover, #gallery_container a.panorama span .preview
	{
	border-color: #C6C;
    }	

#gallery_container a.flash .thumbnail:hover, #gallery_container a.flash span .preview
	{
	border-color: #F03;
    }
	
#gallery_container a.web .thumbnail:hover, #gallery_container a.web span .preview
	{
	border-color: #3F3;
    }

#gallery_container a.brochure .thumbnail:hover, #gallery_container a.brochure span .preview
	{
	border-color: #F99;
    }

a.visualization h3
	{
	color: #6CF;
    }
	
a.illustration h3
	{
	color: #FC0;
    }
	
a.game h3
	{
	color: #F93;
    }
	
a.pencil h3
	{
	color: #36C;
    }

a.panorama h3
	{
	color: #C6C;
    }
	
a.flash h3
	{
	color: #F03;
    }
	
a.web h3
	{
	color: #3F3;
    }

a.brochure h3
	{
	color: #F99;
    }
	
h1
	{
	font-family: Century Gothic, "Times New Roman", Times, serif;
	font-size: 12px;
	font-weight: normal;
	color: #FFF;
	margin: 0px 0px 10px 8px;
	
	text-indent: -9999px;  
	background: url("../images/banner.png") no-repeat;
	width: 268px;  
	height: 11px;
	}

h2
	{
	font-family: Century Gothic, Verdana, Geneva, sans-serif;
	font-size: 12px;
	text-shadow: 1px 1px #333;
	color: #FFF;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 20px 0px 0px 20px;
	position: absolute;
	bottom: 25px;
	}

h3
	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-shadow: 1px 1px #333;
	color: #FFF;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 0px 0px 0px 20px;
	position: absolute;
	bottom: 10px;
	}
	
p
	{
	font-size: 0.55em;
	}

#email
	{
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
	color: #C7C287;
	letter-spacing: 1px;
	text-transform: lowercase;
	text-decoration: none;
	
	transition-duration: .3s, .3s;
	-webkit-transition-duration: .3s, .3s; 
	-o-transition-duration: .3s, .3s; 
	-moz-transition-duration: .3s, .3s;
	}
	
#email:hover
	{
	color: #F90;
	
	transition-duration: .3s, .3s;
	-webkit-transition-duration: .3s, .3s; 
	-o-transition-duration: .3s, .3s; 
	-moz-transition-duration: .3s, .3s;
	}
	
a
	{
	text-decoration: none;
	outline: 0;
	color: #CCC;
	}
	
a:visited 
	{
	text-decoration: none;
	outline: 0;
	color: #CCC;
	}

#gallery_container .title
	{
	position:absolute;
	top: 0px;
	left: 24px;
	
	width: 550px;
	height: 275px;
	border: 1px dashed #999;
	
	border-radius: 10px;
 	-moz-border-radius: 10px;

	transition-duration: .5s, .5s;
	-webkit-transition-duration: .5s, .5s; 
	-o-transition-duration: .5s, .5s; 
	-moz-transition-duration: .5s, .5s;
	}

#gallery_container ul:hover .title:hover
	{
	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
	-khtml-opacity: 1.0;
	opacity: 1.0;
	}
		
#gallery_container ul:hover .title_hide
	{
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity: 0;
	
	transition-duration: .5s, .5s;
	-webkit-transition-duration: .5s, .5s; 
	-o-transition-duration: .5s, .5s; 
	-moz-transition-duration: .5s, .5s;
	}
	
.title .centre
	{
	position: absolute;
	top: 120px;
	left: 135px;
	text-align:center;
	}