/**********************
*          Fonts          *
***********************/
	@font-face
	{
		font-family: regular;
		src: url('regular.otf');
	}

	@font-face
	{
		font-family: demi;
		src: url('demi.otf');
	}

	@font-face
	{
		font-family: light;
		src: url('light.otf');
	}

	html
	{
		overflow-y: scroll;
		margin-bottom: 50px;
	}
	
	body
	{
		background-color: #000000;
		padding: 5px;
		margin: 5px;
	}

/**********************
*   Page and BG    *
***********************/
 
	#bgImg img
	{
		position: absolute;
		z-index: -1;
		margin: 0;
		
		/* transform:matrix(0.65,0,0,0.65,-852,-794); */
		-ms-transform:matrix(0.65,0,0,0.65,-1695,-1475);
		-moz-transform:matrix(0.65,0,0,0.65,-1695,-1475); 
		-webkit-transform:matrix(0.65,0,0,0.65,-1695,-1475); 
		-o-transform:matrix(0.65,0,0,0.65,-1695,-1475);
		
	}

	#page
	{
		width: 1220px;
		margin: auto;
		font-family: regular, sans-serif;
		font-size: 18px;
		color: #333333;	
	}

/**********************
*         Menu           *
***********************/
	#menuContainer
	{
		padding-top: 15px;
	}

	#menu
	{	
		position: relative;
		width: 500px;
		margin: auto;
		padding: 10px;
		border-style: solid;
		border-width: 2px;
		border-color: #FFFFFF;
	}

	#menuRight
	{	
		position: absolute;
		right: 5px;
		display: inline-block;
	}

/**********************
*  General Page    *
***********************/
	#pageContent
	{
		width: 1200px;
		min-height: 600px;
		padding: 5px;
		padding-bottom: 50px;
		margin: 5px;
		margin-top:45px;
		background-color: #303030;
		border-style: solid;
		border-width: 1px;
		border-color: #FFFFFF;
		color: #FFFFFF;
	}
	
	.subContent
	{
		background-color: #303030;
		margin-top: 30px;
	}
	
	.subContentHeader
	{
		background-color: #505050;
		font-size: 32px;
		margin-left: 5px;
		margin-right: 5px;
		padding-left: 30px;
	}

	.contentBlock
	{
		margin-left: 40px;
		margin-right: 40px;
		overflow: hidden;
	}
	
	.twoColumns
	{
		margin-top: 30px;
		margin-bottom: 30px;
		-webkit-column-count: 2; /* Chrome, Safari, Opera */
		-moz-column-count: 2; /* Firefox */
		column-count: 2;
		-webkit-column-fill: auto;
		-moz-column-fill: auto;
		column-fill: auto;
	}
	
	.twoColumns p:first-of-type
	{
		margin-top: 0;
	}
	
	img
	{
		margin: 10px;
	}
	
	h1
	{
		text-align: center;
		font-family: light, sans-serif;
		font-size: 40px;
	}
	
	h2
	{
		text-align: left;
		font-family: light, sans-serif;
		font-size: 28px;
	}
	
	p
	{
		margin-left: 10px;
		margin-right: 10px;
		line-height: 150%;
	}
	
	ul
	{
		margin-left: 10px;
		list-style-type: disc;
	}
	

/**********************
* Main Page Post  *
***********************/
	.post
	{
		margin: 40px;
		margin-top: 30px;
		background-color: #383838;
		border-style: solid;
		border-width: 1px;
		border-color:#444444;
		min-height: 150px;
	}
	
	.post:hover
	{
		border-color: #888888;
	}

	.postHeader
	{
		position: relative;
		font-family: light, sans-serif;
		font-size: 26px;
		background-color: #505050;
		padding-top: 10px;
		padding-bottom: 5px;
	}

	.postTitle
	{
		position: relative;
		display: inline;
		margin-left: 10px;
		
	}

	.postDate
	{
		position: absolute;
		right: 5px;
		display: inline-block;
	}
	
	.postContent
	{
		margin-left: 25px;
		margin-right: 25px;
		
		line-height: 140%;
	}

/**********************
*     TT specifics   *
***********************/
	.featureHeader
	{
		text-align: left;
		font-family: light, sans-serif;
		font-size: 28px;
		font-weight: bold;
		margin-top: 16px;
		margin-bottom: 8px;
		margin-left: 10px;
		margin-right: 10px;
		border-bottom: 2px solid #444444;
	}
	
	.featureThumbnail
	{
		position: relative;
		display: block;
		max-width:300px;
		width: auto;
		height: auto;
		margin: 10px;
		float: left;
	}
	
	.featureThumbnail img
	{
		position: relative;
		margin: auto;
		width: 100%;
		border-style: solid;
		border-width: 1px;
		border-color: RGBA(255,255,255,0);
		-webkit-transition: all 0.7s ease; 
		-moz-transition: all 1s ease;
	}
	
	.featureThumbnail img:hover
	{
		border-style: solid;
		border-width: 1px;
		border-color: #FFFFFF;
	}
			
	.clear
	{
		clear: both;
	}
	
	.featureDescription
	{
		margin-left: 330px;
	}
	
	.releaseHeader
	{
		background-color: #505050;
		padding-left: 5px;
	}
	
	.release
	{
		margin: 10px;
		margin-top:20px;
		margin-left: 15px;
	}
	
	.version
	{
		display: inline-block;
		text-align: left;
		width: 70px;
	}
	
	.releasePackage
	{
		display: inline-block;
		width: 250px;
	}
	
	.checksums
	{
		margin-left: 75px;
		font-size: 16px;
	}
	
	#changelog
	{
		display: inline-block;
		margin-left: 15px;
	}
	
/**********************
*    DIY Specifics  *
***********************/
	
	#projects
	{
		margin-left: 20px;
		margin-right: 20px;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	
	#projects a
	{
		display: inline-block;
		text-decoration: none;
		color: #FFFFFF;
	}
	
	.project
	{
		margin-left: 20px;
		margin-right: 20px;
		margin-top: 10px;
		margin-bottom: 20px;
		width: 340px;
		height: 260px;
		display: inline-block;
		background-color: #383838;
		border-style: solid;
		border-width: 1px;
		border-color:#444444;
	}
	
	.project:hover
	{
		border-color: #888888;
	}
		
	.projectDescription
	{
		position: relative;
		display: block;
		height: 30px;
		text-align: center;
		text-decoration: none;
		background-color: #505050;
		font-family: light, sans-serif;
		font-size: 24px;
	}
	
	.projectThumbnail
	{
		position: relative;
		display: block;
		padding: 10px;
		margin: auto;
		width: 320px;
		height: 210px;
	}
	
	.projectThumbnail img
	{
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-top: 0;
		margin-bottom: 0;
		max-width: 320px;
		max-height: 210px;
		top: 50%;
		-webkit-transform: translate(0, -50%);
		-moz-transform: translate(0, -50%);
		-ms-transform: translate(0, -50%);
	}
	
/**********************
*  Project Images *
***********************/	
	
	.centerProjectImagesContainer
	{
		width: 100%;
		text-align: center;
	}
	
	.projectImagesContainer
	{
		margin-left: auto;
		margin-right: auto;
		margin-top: 10px;
		margin-bottom: 20px;
		max-width: 900px;
		min width: 450px;
		display: inline-block;
		background-color: #383838;
		border-style: solid;
		border-width: 1px;
		border-color:#444444;
	}
	
	.projectImagesHeader
	{
		position: relative;
		display: block;
		height: 30px;
		text-align: center;
		text-decoration: none;
		background-color: #505050;
		font-family: light, sans-serif;
		font-size: 24px;
	}
	
	.projectImage
	{
		position: relative;
		display: inline-block;
		vertical-align: top;
		padding: 1px;
		margin: 15px;
		max-width: 400px;
		max-height: 400px;
		border-style: solid;
		border-width: 1px;
		border-color: RGBA(255,255,255,0);
	}

	.projectImage:hover
	{
		border-color: #888888;	
	}

	
	
	#fullSizeImageContainer
	{
		text-align: center;
		display: none;
		position: fixed;
		z-index: 100;
		margin: -10px;
		padding: -10px;
		height: 100%;
		width: 100%;
		background-color: RGBA(0, 0, 0, 0.8);
		
	}
	
	#fullSizeImageContainer img
	{
		position: fixed;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);	
		margin: 0;
		padding: 0;
	}	
	
/**********************
*   Creator & Icon  *
***********************/

	/* J.Loov */
	#creator
	{
		display: inline;
		margin-top: 10px;
		width: 150px;
		margin-right: 0px;
		float: right;
		bottom: 25px;
		padding: 5px;
		font-size: 28px;
		color: #FFFFFF;
	}

	/* Rotating Icon */
	#rotate
	{
		display: inline;
	}

	#rotate img
	{
		-moz-transition: -moz-transform 5s;
		-webkit-transition: -webkit-transform 5s;
		-o-transition: -o-transform 5s;
		transition: transform 5s;
		margin: 0;
	}

	#rotate img:hover
	{
		-moz-transform: rotate(360deg); /* Firefox 4 */
		-webkit-transform: rotate(360deg); /* Safari and Chrome */
		-o-transform: rotate(360deg); /* Opera */
		transform: rotate(360deg);
	}



/**********************
*          Links          *
***********************/

	/* Regular links */
	a
	{
		font-family: regular, sans-serif;
		color: #FFFFFF;
		text-decoration: underline;
	}

	a:link, visited
	{
		text-decoration: underline;
	}

	a:hover, active
	{
		text-decoration: underline;
		color: #BBBBBB;
	}
	
	/* Menu links */
	#menu a
	{
		font-family: demi, sans-serif;
		font-size: 26px;
		color: #666666;
		margin: 10px;
		text-decoration: none;

		transition: text-shadow 0.7s;
		
		-moz-transition: color 0.7s; /* Firefox 4 */
		-webkit-transition: color 0.7s; /* Safari and Chrome */
		-o-transition: color 0.7s; /* Opera */
		transition: color 0.7s;
	}

	#menu a:hover
	{
		text-decoration: none;
		color: #FFFFFF;
		text-shadow: 0px 0px 8px #FFFFFF;
	}