/* standard style */
body{
	font-family:Cambria, Georgia, serif;
	line-height:1.5;
	font-size:100%;
	background:url(bg.png) 0 0 repeat;
	margin:0;
	padding:0;
}
header, section, footer, nav, hgroup{
	display:block;
}
a{
	color:#35BFFF;
	text-decoration:none;
}
a:hover, a:active{
	color:#91DCFF;
}
img{
	border:none;
	max-width:95%;
}

/* Header */
#header{
	width:100%;
	background:#000;
	background:rgba(0, 0, 0, 0.8);
	color:#eee;
	padding:15px 0;
	letter-spacing:1px;
	margin-bottom:20px;
	position:relative;
	top:0;
	left:0;
	z-index:99;
}
#header h1{
	padding:0 20px;
	margin:5px 0;
	text-shadow:0px 1px 1px #333, 1px 2px 2px #FAFAFA;
	float:left;
}
#backlinks{
	float:right;
	padding:0 20px;
	line-height:25px;
	font-weight:bold;
	font-size:14px;
}
#backlinks a{
	text-align:right;
	display:block;
}

/* Footer */
#footer{
	position:relative;
	padding-left:20px;
	bottom:0;
	left:0;
	line-height:25px;
	color:#888;
	font-size:13px;
	background:rgb(0, 0, 0);
	background:rgba(0, 0, 0, 0.8);
	z-index:99;
}
#footer span{
	display:inline-block;
}

/* clearfix */
.clearfix {
	clear:both !important;
}

/* wrapper content style */
#wrapper{
	margin:0 0 3em;
	padding:10px 7%;
	text-align:center;
}

/* page header */
#wrapper hgroup{
	margin:0 0 20px;
	z-index:5;
	position:relative;
	display:inline-block;
}
#wrapper hgroup:hover{
	z-index:10;
}
#wrapper h2{
	position:relative;
	
	margin:0;
	color:#0082E0;
	text-align:center;
	text-shadow:1px 1px 1px #777;
	font-size:33px;
	font-family:Arial Narrow, Arial, sans-serif;
	
	transition: color 1s, font-size 1s, text-shadow 1s;
	-moz-transition: color 1s, font-size 1s, text-shadow 1s;
	-webkit-transition: color 1s, font-size 1s, text-shadow 1s;
	-o-transition: color 1s, font-size 1s, text-shadow 1s;
}
#wrapper h2 span{
	color:#56B8FF;
	
	transition: color 1s, text-shadow 1s;
	-moz-transition: color 1s, text-shadow 1s;
	-webkit-transition: color 1s, text-shadow 1s;
	-o-transition: color 1s, text-shadow 1s;
}
#wrapper hgroup h3{
	font-style:italic;
	font-weight:normal;
	font-size:18px;
	text-shadow:0 1px 0 #fafafa;
	color:#444;
	margin:0;
	
	transition: color 1s, font-size 1s;
	-moz-transition: color 1s, font-size 1s;
	-webkit-transition: color 1s, font-size 1s;
	-o-transition: color 1s, font-size 1s;
}
#wrapper hgroup:hover h2{
	color:#C9EEFF;
	z-index:10;
	font-size:40px;
	text-shadow:0 0 20px #EAF8FF;
}
#wrapper hgroup:hover span{
	color:#fafafa;
	font-style:italic;
	text-shadow:0 0 20px #fafafa;
}
#wrapper hgroup:hover h3{
	color:#ccc;
	font-size:20px;
}


#holder{
	position:relative;
}


/* image boxes */
.box{
	text-align:center;
	background-color:#f4f4f4;
	border:1px solid #ccc;
	float:left;
	margin:5px 1%;
	padding:10px 2% 15px;
	position:relative;
	z-index:5;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	
	box-shadow:0 0 3px #ccc;
	-moz-box-shadow:0 0 3px #ccc;
	-webkit-box-shadow:0 0 3px #ccc;
	
	transform: scale(1);
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	
	transition: background-color 1s, box-shadow 1s, transform 0.5s;
	-moz-transition: background-color 1s, -moz-box-shadow 1s, -moz-transform 0.5s;
	-webkit-transition: background-color 1s, -webkit-box-shadow 1s, -webkit-transform 0.5s;
	-o-transition: background-color 1s, -o-box-shadow 1s, -o-transform 0.5s;
}
.box:hover{
	background-color:#fff;
	z-index:10;
	
	box-shadow:0 0 15px #333;
	-moz-box-shadow:0 0 15px #333;
	-webkit-box-shadow:0 0 15px #333;
	
	transform: scale(1.1);
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
}
.box-1 { max-width:24%; }
.box-2 { max-width:44%; }
.box-3 { max-width:35%; }

/* title holder */
.box h3{
	font-size:27px;
	color:#777;
	margin:5px 10px;
	padding:5px 10px;
	font-family:'Arial Narrow', Arial;
	letter-spacing:1px;
	text-shadow:0 1px 1px #ccc;
	border-bottom:0 solid #fff;
	
	transition: color 1s, text-shadow 1s, border-bottom 1s;
	-moz-transition: color 1s, text-shadow 1s, border-bottom 1s;
	-webkit-transition: color 1s, text-shadow 1s, border-bottom 1s;
	-o-transition: color 1s, text-shadow 1s, border-bottom 1s;
}
.box:hover h3{
	color:#333;
	border-bottom:1px solid #aaa;
	text-shadow:1px 1px 1px #fff, 2px 2px 1px #888;
}

/* image holder */
.box .image{
	margin:10px;
	opacity:0.5;
	filter: alpha(opacity=50);
	
	transition: opacity 1s;
	-moz-transition: opacity 1s;
	-webkit-transition: opacity 1.5s;
	-o-transition: opacity 1s;
}
.box:hover .image{
	opacity:1;
	filter: alpha(opacity=100);
}
.box .image img{
	padding:7px;
	background:#000;
}
.box .image img:hover{
	background:#333;
}

/* description text holder */
.box .description, .box .description a{
	color:rgb(153,153,153);
	color:rgba(153,153,153,0);
	text-shadow:0 0 5px #aaa;
	text-align:left;
	font-size:14px;

	transition: text-shadow 1s ease 0.5s, color 1s ease 0.5s, outline 1s ease 0.5s;
	-moz-transition: text-shadow 1s ease 0.5s, color 1s ease 0.5s, outline 1s ease 0.5s;
	-webkit-transition: text-shadow 1s ease 0.5s, color 1s ease 0.5s, outline 1s ease 0.5s;
	-o-transition: text-shadow 1s ease 0.5s, color 1s ease 0.5s, outline 1s ease 0.5s;
}
.box:hover .description, .box:hover .description a{
	text-shadow:0 0 0 #fff;
	color:rgb(100,100,100);
}
.box:hover .description a{
	outline:1px dotted #777;
}


#overlay{
	position:fixed;
	width:100%;
	height:100%;
	left:0;
	top:0;
	z-index:7;
	background:rgb(0,0,0);
	background:rgba(0,0,0,0.5);
	filter: alpha(opacity=50);
	
	transition: background-color 0.7s;
	-moz-transition: background-color 0.7s;
	-webkit-transition: background-color 0.7s;
	-o-transition: background-color 0.7s;
}
#overlay:hover{
	background:rgb(0,0,0);
	background:rgba(0,0,0,0.5);
	z-index:0;
	filter: alpha(opacity=0);
}