#gamecontainer {
	width:1280px;
	height:720px;
	border: 1px solid black;
}

.gamelayer {
	width:1280px;
	height:720px;
	position:absolute;
	display:none;
}

/* Game Starting Menu Screen */
#gamestartscreen {
  width:1280px;
  height:720px;
  background: url(images/Scenes/trektPortadaSinLogo.png);
	text-align:center;
}

#gamestartscreen img {
	margin:10px;
}
#gss {
  position:absolute;
  top:300px;
}

#preScene
{
    background: url(images/Scenes/trektPortada.png);
}

#meteorite
{
  position:relative;
}

#preScene p
{
  margin-top:480px;
  text-align: center;
  text-shadow: 0 0 2px #000;
  color:white;
  font-size: 30px;
  font-family: Gotham;
  animation: blinker 0.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
}

@keyframes blinker {  
  from { opacity: 1; }
  to { opacity: 0; }
}

#ScoresScreen
{
  background: url(images/Scenes/Highscore.png);
  color:white;
}

#settingsbutton:hover{
	opacity:1.0;
	-webkit-filter: drop-shadow(8px 8px 10px black);
	filter: drop-shadow(8px 8px 10px black);
}

#scoresbutton:hover
{
    opacity:1.0;
  -webkit-filter: drop-shadow(8px 8px 10px black);
  filter: drop-shadow(8px 8px 10px black);
}

#playbutton:hover{
  opacity:1.0;
  -webkit-filter: drop-shadow(8px 8px 10px black);
  filter: drop-shadow(8px 8px 10px black);
}

#settingsScreen {
	width:1280px;
	height:720px;
	background: url(images/Scenes/controles.png);
	border: 1px solid black;
}

#settingsbutton
{
    position: relative;
    top: -60px;
    left: 270px;
    cursor:pointer;
    z-index: 1;
    opacity: 0.5;
}

#scoresbutton
{
  cursor: pointer;
  opacity: 0.5;
  top: 9px;
  z-index: 5;
  position: relative;
}

#playbutton{
    cursor:pointer;
    opacity: 0.5;
    margin-top:20px;
    z-index: 5;
    position: relative;
}

#titlescore{
  color: white;
  font-size: 48px;
  margin-left:500px;
}

#scores{
  color: white;
  font-size: 30px;
  margin-left:520px;  
}

#retornoR
{
  cursor:pointer;
  margin-left:550px;
  margin-top:50px;
}

#retornoR:hover
{
  opacity: 0.5;
}

#logo
{
  position:relative;
  left: -140px;
  top:-440px;
}

#pantallanegra
{
  width:1280px;
  height:720px;
  background: url(images/Misc/pantallanegra.png);
}

#animDinosMenu
{
    position: relative;
    top: -620px;
    left:-10px;
}

#settingsScreen p
{
	text-shadow: 0 0 2px #000;
	color:white;
  margin-top:-180px;
  margin-left:400px;
  font-size: 30px;
  position: relative;
}

#settingsScreen img
{
	margin-top:400px;
  cursor: pointer;
}

#modoDebug
{
   margin-left:400px;
   z-index: 1;
}


#retorno
{
	position:absolute;
	top:140px;
	margin-left:-300px;
}

#modoTutorial
{
	position:relative;	
}

#retorno:hover 
{
	opacity:0.9;
	-webkit-filter: drop-shadow(8px 8px 10px black);
	filter: drop-shadow(8px 8px 10px black);	
}

/* Loading Screen */
#loadingscreen {
	background:rgba(100,100,100,0.3);	
}

#loadingmessage {
    margin-top:400px;
	text-align:center;
	height:48px;
	color:white;
	background:url(images/loader.gif) no-repeat center;
	font:12px Arial;
}

/*Ending Screen*/
#endingscreen {
	width:1280px;
	height:720px;
	background:url(images/Previous/fondo2.png);
	border: 1px solid black;
	text-align:center;
}

#fondoIcons{
  background:url(images/Scenes/pause/fr.png);
  width:334px;
  height:179px;
  top: 300px;
  position: relative;
  left: 474px;  
}

#homeButton{
  background:url(images/Scenes/pause/Home.png);
  width:104px;
  height:104px;
  position: relative;
  left: 590px;
  top: 50px;
  cursor:pointer;  
}

#homeButton:hover
{
    -webkit-filter: drop-shadow(8px 8px 10px black);
     filter: drop-shadow(8px 8px 10px black);  
}


#facebookIcon:hover
{
    -webkit-filter: drop-shadow(8px 8px 10px black);
     filter: drop-shadow(8px 8px 10px black);  
}

#facebookIcon
{
  background:url(images/Scenes/pause/fb.png);
  width:94px;
  height:94px;
  position: relative;
  left: 500px;
  top: 60px;
  cursor:pointer;
}

#twitterIcon
{
  background:url(images/Scenes/pause/tw.png);
  width:94px;
  height:94px;
  left: 688px;
  position: relative;
  top: -35px;  
  cursor:pointer;
}

#twitterIcon:hover
{
    -webkit-filter: drop-shadow(8px 8px 10px black);
     filter: drop-shadow(8px 8px 10px black);  
}

/* Score Screen */
#buttons  {
    height:60px;
    font: 32px Comic Sans MS;
    text-shadow: 0 0 2px #000;
	color:white;
}

#scoreThis{
position: relative;
top: 200px;
font-size: 30px;
}

#buttons img{
    opacity:0.6;
    top:10px;
    position:relative;
    padding-left:10px;
    cursor:pointer;
}

#buttons img:hover{
    opacity:1.0;
}

#buttons #score {
	position:absolute;
	top:5px;
	right:20px;
}

#box {
    border:1px solid #E38E34;
    background-color: #FFE7BF;
    height:100px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-top:-100px;
    position:relative;
    z-index: 15;
}
#title {
    margin:5px;
    border-bottom:1px solid #E38E34;
    color:#C46908;
    font-weight:bold;
}

#message{
    margin:5px;
}

#rex {
  width: 314px;
  height: 406px;
  background: transparent url("images/Tutorial/rex.png");
  background-position: 0px 0px;
  margin-left:600px;
  margin-top:-406px;
  position:relative;
  z-index:5;
}

#skipTutorial
{
    width: 80px;
    height: 80px;
    background: transparent url("images/Tutorial/skip.png");
    background-position: 0px 0px;
    margin-left:1150px;
    margin-top:-80px;
    position:relative;
    cursor:pointer;
    z-index:26;
}

#skipTutorial:hover
{
    -webkit-filter: drop-shadow(8px 8px 10px orange);
     filter: drop-shadow(8px 8px 10px orange);  
}

#pauseScreen{
  width:1280px;
  height:720px;
}
#backgroundPause
{
  margin-left:500px;
  margin-top:300px;
}

#goBack
{
  margin-left: -312px;
  position: absolute;
  cursor: pointer;
  margin-top: 342px;
}

#goBack:hover{
    -webkit-filter: drop-shadow(8px 8px 10px black);
  filter: drop-shadow(8px 8px 10px black);
}

#continue
{
  cursor: pointer;
  margin-left: -142px;
  position: absolute;
  top: 342px;
}

#continue:hover{
    -webkit-filter: drop-shadow(8px 8px 10px black);
  filter: drop-shadow(8px 8px 10px black);
}

.linkedin{
  width: 31px;
  height: 31px;
  background: transparent url("3rrss.png");
  background-position: 0px 0px;
  float:left;
}
.twitter{
  width: 31px;
  height: 31px;
  background: transparent url("3rrss.png");
  background-position: -32px 0px;
  float:left;
}
.facebook{
  width: 31px;
  height: 31px;
  background: transparent url("3rrss.png");
  background-position: -64px 0px;
  float:left;
}
.linkedin:hover{
  background-position: 0px -32px;
}
.twitter:hover{
  background-position: -32px -32px;
}
.facebook:hover{
  background-position: -64px -32px;
}
/* Dejamos una separación entre los enlaces */
.contenedor a{
  margin: 10px;
}

.contenedor{
  position: absolute;
}

ul.horiz{
  list-style-type: none;
  padding: 0;
  float: none;
}
ul.horiz li{
  float: left;
  padding: 10px;
}

@font-face {
  font-family: "Gotham";
  src: url("fonts/GothamRounded-Book.otf");
}

#debugcanvas
{
  position:relative;
}