/*
 * BASIC.CSS (Basic styles and typography)
 *
 * version: 0.1
 * media: screen, print
 *
 * * */
@font-face {
    font-family: 'DejaVuSansBook';
    src: url('../fonts/DejaVuSans-webfont.eot');
    src: url('../fonts/DejaVuSans-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/DejaVuSans-webfont.woff') format('woff'),
         url('../fonts/DejaVuSans-webfont.ttf') format('truetype'),
         url('../fonts/DejaVuSans-webfont.svg#DejaVuSansBook') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* * * * * *  general page properties  * * * * * */
html                    { 
	font: 75%/150% Arial, Helvetica, sans-serif; 
	background: #f5f6f7; /* Old browsers */
	height:100%;
	padding:0px;
	margin:0px;
}

body               		{  
	margin: 0px; 
	/*padding:10px 0px;*/
	background: #f5f6f7; /* Old browsers */

	background: rgb(159,180,191); 

}
 
/* * * * * *  html 5 fix  * * * * * */
section,
article,
header,
footer,
nav,
aside,
hgroup             	{ display: block; }
.twitter-timeline 	{ width:100% !important; height:100% !important; }
.stream 			{ width:100% !important; height:100% !important; }
.timeline 			{ height:100px !important; }
/* * * * * *  layout  * * * * * */
#wrapper           { 
					margin:0px auto;
					 width:980px; border-bottom: none; color:#666;
					/* -webkit-border-radius: 27px;
					-moz-border-radius: 27px;
					/*border-radius: 27px;*/
					padding-top:30px;
					padding-bottom:40px;
					background-color:#fff;
					/*box-shadow: inset 0 0 30px rgb(220,220,220), 3px 3px 13px #77868e;
					-ms-box-shadow: inset 0 0 30px rgb(220,220,220), 10px 10px 10px #77868e;
					-moz-box-shadow: inset 0 0 30px rgb(220,220,220), 10px 10px 10px #77868e;
					-webkit-box-shadow: inset 0 0 40px rgb(220,220,220), 3px 3px 13px #77868e;*/
					border:5px solid #fff;
}

#wrapper:after     { display: block; clear: both; content: " "; }

#content1		   { width:952px; margin:auto; margin-left:20px; position:relative; }

#content1:after     { display: block; clear: both; content: " "; }


#about			   { margin:22px; margin-right:45px; font-size:1.2em; color:#666; width:900px;}

.aboutme{
	display:none;
}
#abouttext h2 { color:#546A86; }
#abouttext h2:nth-child(1)	  { margin-top:10px; }
#abouttext h2:nth-child(1n+2)	  { margin-top:25px; }

header             { position: relative; width: 100%; left:-8px;  }
footer             { width: 100%; text-align:center; color:#333; margin-top:10px; 
					 text-shadow:
					   -1px -1px 2px #fff,  
						1px -1px 2px #fff,
						-1px 1px 2px #fff,
						 1px 1px 2px #fff; 
	 				}


#content           { display: inline; float: left; width: 952px; margin: 15px 0 15px 30px; }
#sidebar           { display: inline; float: right; width: 248px; margin: 12px 30px 15px 0; }
#abouttext p	   { width:900px; background-color:rgba(255,255,255,0.1); text-align:justify; }



.cell			   { width:275px; height:220px; padding:5px; float:left; margin-right:17px; margin-bottom:15px; position:relative; top:0px; left:22px;
					 /*border-radius:10px;*/
					/* box-shadow: 0px 0px 12px #d6d6d6;
					-moz-box-shadow: 0px 0px 12px #d6d6d6;
					-webkit-box-shadow: 0px 0px 12px #d6d6d6;
					-o-box-shadow: 0px 0px 12px #d6d6d6;*/
					border:1px solid #d6d6d6;
				   }

abbr                    { border-bottom: dotted 1px; border-color: inherit; cursor: help; }
address                 { margin: 1em 0; font-style: normal; }
.displayNone            { display: none; }
.hidden                 { position: absolute; left: -999em; }
.clear                  { display: block; clear: both; height: 1px; line-height: 1px; font-size: 1px; }


/* * * * * *  headings  * * * * * */
h1, h2, h3, h4, h5, h6  { margin: 0px 0 12px; font-size: 1em; }
h1                      { font-size: 2em; font-weight: normal; }
h2                      { font-size: 1.2em; }
h3                      { font-size: 1.25em; font-weight: normal; color:#546a86 }

.logo					{ font: 38px Corbel, DejaVuSansBook, Arial, Helvetica, sans-serif; color: #8e9eb5; margin-bottom:0px; padding-left:50px;
						text-shadow: 0px 0px 3px white; }
.logodark				{ color: #546a86 }
.logo a					{ color: #8e9eb5; }
.logo a:visited			{ color: #8e9eb5; }

/* * * * * *  lists  * * * * * */
ul 						{ padding-left:0px; margin-left:10px; }
li						{ padding-left:0px; margin-left:0px; }
/*
ul                      { margin: 1em 0; padding: 0; list-style: none; }
ul li                   { padding-left: 16px; list-style: none; background: url(images/li.gif) 5px 5px no-repeat; }
ol                      { margin: 1em 0 1em 2em; padding: 0; }
*/

/* * * * * *  links  * * * * * */
a                       { color: #E44D26; text-decoration: none;  }
a:visited               { color: #E44D26; text-shadow:none !important;  }
a:hover                 { text-decoration: underline; text-decoration: underline; text-shadow:none !important; }

p a						{ text-decoration: none;}
h3 a					{ color:#E44D26; }
h3 a:visited 			{ color:#E44D26; }
/* * * * * *  images  * * * * * */
img                     { border: none;  }
.cell div img 			{ 
							
						}

/* * * * * *  forms  * * * * * */
form                    { margin: 0; padding: 0; }
fieldset                { margin: 1em 0; padding: 1em; border: solid 1px #dadada; background: #f5f5f5; }
fieldset legend         { padding: 6px 12px; font-weight: bold; font-size: 1.09em; color: black; background: #d9d9d9; }
input,
textarea                { margin: 0; padding: 3px 3px; font-size: 1em; font-family: Arial, Helvetica, sans-serif; border: solid 1px #dadada; }
textarea                { font-size: 12px; }
select                  { font-size: 1em; font-family: Arial, Helvetica, sans-serif; }
input.submit            { padding: 4px 8px 3px; cursor: pointer; border: none; font-weight: bold; font-family: Arial, Helvetica, sans-serif;
                          border: solid 1px #ffa969; color: black; background: #ffcc45 url(/images/submit.gif) 0 0 repeat-x; }
					
/* * * * * * images * * * * * */
div.playercontent{
	width: 100%;
	height: 100%;
}

div.content {
	width: 100%;
	margin:auto;
	color:#333;
	font-size:16px;
	text-align:center;
	display:none;
}
div.content h3{
	margin-top:5px;
	margin-bottom:0px;
}
div.content p{
	margin-top:5px;
	font-size:smaller;
}
div.missing {
	margin: auto;
	position: relative;
	top: 50%;
	width: 193px;
}
div.missing a {
	height: 63px;
	position: relative;
	top: -31px;
}
div.missing img {
	border-width: 0px;
}
div#unityPlayer {
	cursor:crosshair;
	height: 100%;
	width: 100%;
	margin-top:-50px;
	margin-left:-20px;
	background-color:#000;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	
}

.papervision{ width:900px; display:block; float:left; margin:10px; visibility:hidden; }

.amiaward{ position:absolute; top:162px; left:226px;}

/* * * * * * particles * * * * * */
canvas { 
	position: absolute;
	top:0px;
	left:0px;
	z-index:10000;
	pointer-events: none;
	display:none;
}

.divider{
	width:100%;
	margin:auto;
	margin-top:10px;
	padding-bottom:10px;
	text-align:center;
	border-bottom:1px solid #CCC;
	font-size:120%;
	float:left;
	position:relative;
	top:10px;
	display:none;
}

.smaller{
	font-size:80%;
}

@media only screen 
and (min-width : 480px) 
and (max-width : 1024px)
{
	
	html{ 
		background: #9fb4bf; /* Old browsers */
	}
	body{
		width:100%;
		background-image:none;
		padding:0px;
		margin:0px;
		/*margin-top:10px;*/
		font-size:130%;
	}
	
	.aboutme{
		display:block;
		margin-top:0px;
	}
	
	.logo{ margin-left:1.5%; position:relative; top:18px; } 
	
	#wrapper{ 
		width:0px;
		width:96%;
		padding-top:20px;
		padding-bottom:50px;
		margin-bottom:0px;
		margin:auto;
		background: #fff;
		background-color:#fff;
		min-width:480px;
	}
	
	#content1{ 
		width:100%;
		padding:0px;
		margin:0px;
		margin-right:5px;
	}
	
	

	#about{
		display:none;
	}

	.cell{
		width:40%;
		min-height:300px;
		max-height:650px;
		overflow:hidden;
		margin:0px;
		margin-left:5.7%;
		margin-top:5%;
		left:0px;
		line-height:24px;
	}
	
	.cell div img { 
		width:35%;
		height:auto;
		border-radius:8px;
		
		margin-right:15px !important; 
		margin-bottom:15% !important;
		/*
		box-shadow: 5px 5px 8px rgba(0,0,0,0.25);
		-moz-box-shadow: 5px 5px 8px rgba(0,0,0,0.25);
		-webkit-box-shadow: 5px 5px 8px rgba(0,0,0,0.25);
		-ms-box-shadow: 5px 5px 8px rgba(0,0,0,0.25);
		-o-box-shadow: 5px 5px 8px rgba(0,0,0,0.25);
		*/
		-webkit-box-reflect: below 4px 
   url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAA3CAYAAADHao5rAAAAcElEQVR4nO3WwQnAMAwEQQWc9F9yPukgGMMyA/oLDnGaAQAAAAAAAAAAAAAAAAAAAOCn6xui1szcp5dgn/UNUWtmntNLsI8LjtPBcQKOE3CcDo7zRce54DgdHCfgOAHH6eA4X3ScC47TwXECjhNw3AsAuwCrN+rF0AAAAABJRU5ErkJggg==);
	}
	
	.cell div p{
		margin-top:0px !important;
		margin-bottom:5px !important;
	}
	
	.papervision{ width:1px; display:none; }
	
	a						{ color:#E44D26; }
	h3 						{ margin-bottom:10px !important; text-shadow: none;}
	h3 a					{ color:#E44D26;  }
	h3 a:visited 			{ color:#E44D26; }
	canvas{ width:0px; }
	
	.divider{
		display:block;
	}
	
	.amiaward{ width:50px !important; margin:10px;}
}

@media only screen 
and (min-width : 480px) 
and (max-width : 1024px)
and (orientation : portrait)
{
	
	.logo{ margin-left:0px; position:relative; top:12px; }
	
	body{
		font-size:140%;
	}
	.cell div img { 
		width:25%;
	}
	
	.divider{
		display:block;
	}
}



@media only screen 
and (min-width : 320px) 
and (max-width : 480px) {
	
	html { 
		background: #FFF;
		font-family: Corbel, DejaVuSansBook, Arial, Helvetica, sans-serif;
		margin:0px;
		padding:0px;
	}
	
	body {
		background: #FFF;
		margin:0px;
		padding:0px;
		width:98%;
	}
	
	.aboutme{
		display:block;
	}
	
	#about{
		display:none;
	}
	
	#content1{ 
		width:100%;
		padding:0px;
		margin:0px;
		margin-left:0px;
		background:none;
		border:0px;
	}
	
	#wrapper{ 
		width:100%;
		padding:0%;
		box-shadow: none;
		-ms-box-shadow: none;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		 -webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
		border:0px;
		background:none;
	}
	

	.cell{
		width:0px;
		width:90%;
		display:block;
		font-size:150%;
		line-height:140%;
		padding:6px;
		margin:auto auto;
		left:0px;
		margin-bottom:6%;
		height:auto;
		min-height:150px;
		background: #fff; 
		float:none;
		
		background-color:#fff;
		box-shadow: inset 0 0 30px rgb(200,200,200), 3px 3px 8px rgba(0,0,0,0.5));
		-ms-box-shadow: inset 0 0 30px rgb(200,200,200), 10px 10px 8px rgba(0,0,0,0.5);
		-moz-box-shadow: inset 0 0 30px rgb(200,200,200), 10px 10px 8px rgba(0,0,0,0.5);
		-webkit-box-shadow: inset 0 0 40px rgb(200,200,200), 3px 3px 8px rgba(0,0,0,0.5);
		border:3px solid #fff;
		
	}
	
	.cell:after     { display: block; clear: both; content: " "; overflow:hidden; }
	
	.cell div{
	}
	
	.cell div img{
		width:68px;
		height:auto;
		margin-bottom:45px !important;
		-webkit-box-reflect: below 4px 
   url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAA3CAYAAADHao5rAAAAcElEQVR4nO3WwQnAMAwEQQWc9F9yPukgGMMyA/oLDnGaAQAAAAAAAAAAAAAAAAAAAOCn6xui1szcp5dgn/UNUWtmntNLsI8LjtPBcQKOE3CcDo7zRce54DgdHCfgOAHH6eA4X3ScC47TwXECjhNw3AsAuwCrN+rF0AAAAABJRU5ErkJggg==);
	}
	
	.cell div img { 
		border-radius:8px;
		box-shadow: none;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
	}
	
	.cell div p{
		margin-top:0px;
		margin-bottom:10px !important;
	}
	
	.logo{ font-size:230%; margin:auto; padding:20px 0px 5px 5%;max-width:3220px; overflow:hidden; color:#FFF; text-shadow: 1px 1px 1px rgba(0,0,0,0.7); }
	.logodark				{ color:#232D38; text-shadow: 1px 1px 2px rgba(255,255,255,0.7); }
	.logo a					{ color: #FFF; }
	.logo a:visited			{ color: #FFF; }
	
	h3{
		padding-bottom:10px;
	}
	
	a						{ color:#E44D26 }
	h3 a					{ color:#E44D26; text-shadow: 0px 1px 0px  #333333; }
	h3 a:visited 			{ color:#E44D26; }
	canvas{ width:0px; }
	
	.papervision{ width:1px; display:none; }
	
	.amiaward{ position:relative; top:0px; left:0px; width:50px !important; height:auto;}
	
}

/* Smartphones (landscape) ----------- */
@media screen 
and (min-device-width : 320px) 
and (max-device-width : 580px)
and (orientation:landscape) {

	.logo{ padding:20px 15px 30px 5%;}
	
	#wrapper{
		margin:0px 45px 45px 0px;
	}
	
	.cell { padding:14px 5px 5px 14px }
	
	.cell div{ padding-bottom:40px; }
	
	.cell div img {
		width:110px;
		margin-right:18px !important;
	}
	
	.cell div p{
		font-size:80% !important;
		margin-top:0px !important;
		margin-bottom:20px !important;
	}
	
	.cell div ul{
		font-size:80% !important;
	}
	
	.divider{ display:none; }
}
/*
@media only screen 
and (min-width : 100px) 
and (max-width : 480px) and (orientation:landscape) {
	html, body{
		width:480px;
	}
	

}
*/