* {
  margin: 0;
  padding: 0;
  border: 0;
  }
body {
  font-family: arial, sans-serif;
  font-size:100%;
  background: #1b1b1b;
  padding: 30px 0;
  }
p {
  font-size:16px;
  line-height:1.5em;
  color:#ccc;
  margin: 1em 0;
  }


#constrain {
	width:85%;
	margin: 0 auto;
	position:relative;
}

#logo {
	border-bottom: 1px solid #cbf538;
	background: transparent url('../images/i-glow-1.png') no-repeat -2000px 0;
	width:153px;
	padding: 8px 0;
	overflow:hidden;
}
#header {
	padding: 0 1% 0 0;
}
#nav {
	border-bottom: 1px solid #cbf538;
	padding: 0 0 0 120px;
	position:absolute;
	right:0;
	top:5px;
}
	#nav ul {
		list-style-type:none;
	}
	#nav ul li {
		background: transparent url('../images/i-nav-div.png') no-repeat right 12px;
		float:left;
		margin: 0 0 0 -1px;
	}
		#nav ul li.nav-current {
			margin-right: 1px;
		}
		#nav ul li.nav-faq {
			background:none;
		}
	#nav ul li a {
		color:#fff;
		text-decoration:none;
		display:block;
		text-indent: -100000px;
		background-repeat: no-repeat;
		background-position: center 12px;
		padding: 12px 9px;
		height:14px;
		line-height:14px;
	}
		#nav ul li.nav-home a {
			background-image: url('../images/i-nav-home.png');
			width:46px;
		}
		#nav ul li.nav-tutorials a {
			background-image: url('../images/i-nav-tutorials.png');
			width:84px;
		}
		#nav ul li.nav-about a {
			background-image: url('../images/i-nav-about.png');
			width:118px;
		}
		#nav ul li.nav-faq a {
			background-image: url('../images/i-nav-faq.png');
			width:29px;
		}
	#constrain #nav li.nav-current a {
		background-position: center -51px;
		background-color:#cbf538;
	}
	#constrain #nav a:hover {
		transition-property: background-color;  
  		transition-duration:1s;
		transition-timing-function: ease-out;
		-webkit-transition-property: background-color;  
  		-webkit-transition-duration: 1s;  
  		-o-transition-property: background-color;  
  		-o-transition-duration: 1s;  
  		-moz-transition-property: background-color;  
  		-moz-transition-duration: 1s;  

		background-color:#242424;
	}

#content {
	margin: 30px -1% 30px 0;
}

.vexel {
	float:left;
	position:relative;
	width:32%;
	height:404px;
	overflow:hidden;
	margin: 0 1% 0 0;
}
	.vexel a {
		display:block;
		text-decoration:none;
		color:#fff;
		transition-property: opacity;  
  		transition-duration:0.5s;
		transition-timing-function: ease-out;
		-webkit-transition-property: opacity;  
  		-webkit-transition-duration: 0.5s;  
  		-o-transition-property: opacity;  
  		-o-transition-duration: 0.5s;  
  		-moz-transition-property: opacity;  
  		-moz-transition-duration: 0.5s;  

		opacity: 0.3;
	}
	.vexel a:hover {
		transition-property: opacity;  
  		transition-duration:0.5s;
		transition-timing-function: ease-in;
		-webkit-transition-property: opacity;  
  		-webkit-transition-duration: 0.5s;  
  		-o-transition-property: opacity;  
  		-o-transition-duration: 0.5s;  
  		-moz-transition-property: opacity;  
  		-moz-transition-duration: 0.5s;  
		opacity:1;
	}
	.vexel img {
		border: 2px solid #d16f7f;
	}

	.vexel-1 img {
		border-color: #d16f7f;
	}
	.vexel-2 img {
		border-color:#a66643;
	}
	.vexel-3 img {
		border-color:#c6ac89;
	}
	.vexel-4img {
		border-color:#c6ac89;
	}
	.vexel-5 img {
		border-color:#ca95aa;
	}
	.vexel-6 img {
		border-color:#b5cf88;
	}
	.vexel-7 img {
		border-color:#837076;
	}
	.vexel-8 img {
		border-color:#022231;
	}
	.vexel-9 img {
		border-color:#ca95aa;
	}
	.vexel-10 img {
		border-color:#ca95aa;
	}
	.vexel-11 img {
		border-color:#727095;
	}
	.vexel-12 img {
		border-color:#4b6155;
	}

	.vexel .download, .vexel .zoom {
		opacity:0;
		cursor:pointer;
	}
	.vexel:hover .zoom {
		opacity:1;
	}
	.vexel:hover .download {
		opacity: 0.3;
	}
	.vexel .zoom {
		position:absolute;
		bottom: 9px;
		left: 0;
		text-indent: -10000px;
		background: transparent url('../images/i-zoom.png') no-repeat;
		width:55px;
		height:15px;
		line-height:15px;
		overflow:hidden;
	}
	.vexel .download-wrap {
		max-width:370px;
		position:relative;
	}
	.vexel .download a {
		position:absolute;
		bottom: -15px;
		right: 0;
		text-indent: -10000px;
		background: transparent url('../images/i-download.png') no-repeat;
		width:115px;
		height:15px;
		line-height:15px;
		overflow:hidden;
		display:block;
	}
	.vexel .download a:hover {
		opacity:1;
	}

/* Tutorials */

.tutorial-list {
	display:inline-block;
	width:220px;
	height:180px;
	vertical-align:top;
	position:relative;
	padding: 10px;
	background:#101010;
	margin: 0 15px 20px 0;
	transition-property: opacity;  
  	transition-duration:0.2s;
	transition-timing-function: ease-in;
	-webkit-transition-property: opacity;  
  	-webkit-transition-duration: 0.2s;  
  	-o-transition-property: opacity;  
  	-o-transition-duration: 0.2s;  
  	-moz-transition-property: opacity;  
  	-moz-transition-duration: 0.2s;  
	opacity:0.7;
}
	.tutorial-list:hover {
		transition-property: opacity;  
  		transition-duration:0.2s;
		transition-timing-function: ease-in;
		-webkit-transition-property: opacity;  
  		-webkit-transition-duration: 0.2s;  
  		-o-transition-property: opacity;  
  		-o-transition-duration: 0.2s;  
  		-moz-transition-property: opacity;  
  		-moz-transition-duration: 0.2s;  
		opacity:1;
	}
	.tutorial-list a {
		text-decoration:none;
		color:#eee;
	}
.tutorial-list .tutn {
	position:absolute;
	left:10px;
	top:10px;
}
.tutorial-list .program {
	position:absolute;
	right:10px;
	top:127px;
	left:10px;
	background:transparent url('../images/g-black-mid.png');
	padding:4px 10px;
	font-size:12px;
}	
	.tutorial-list .program img {
		position:absolute;
		right:-5px;
		bottom:-5px;
	}
.tutorial-list .tut-info {
	font-size:12px;
	display:block;
	padding:148px 10px 0 10px;
}

.intro-text {
	width:50%;
	min-width:400px;
	background:#101010;
	padding: 20px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	margin: 10px auto;
}
	.intro-text p {
		margin: 0;
		font-size:16px;
		color:#ccc;
	}

.column-half {
	float:left;
	width:49%;
	margin: 0 1% 0 0;
}
.column-quarter {
	float:left;
	width:24%;
	margin: 0 1% 0 0;
}
	.info-box {
		background:#101010;
		padding: 20px;
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
		border-radius:10px;
		margin: 10px;
	}
	.info-box a {
		color:#cbf538;
		text-decoration:none;
	}
	.info-box a:hover {
		color:#ccc;
	}
	.info-box ul {
		color:#ccc;
		margin: 1em;
	}
	.info-box ul li {
		line-height:1.5em;
	}