@font-face {
    font-family: 'ExistenceLight';
    src: url('../../media/fonts/Existence-Light-webfont.eot');
    src: url('../../media/fonts/Existence-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../media/fonts/Existence-Light-webfont.woff') format('woff'),
         url('../../media/fonts/Existence-Light-webfont.ttf') format('truetype'),
         url('../../media/fonts/Existence-Light-webfont.svg#ExistenceLight') format('svg');
    font-weight: normal;
    font-style: normal;

}
body{
    background:url('../images/bg.png');
    font-family: "ExistenceLight", "Helvetica Neue";
    font-weight:lighter;
    font-size:12.5pt;
}
a{
    color:#fe9933;

}
#splash{
	background:url('../images/splash.jpg') no-repeat #000;
	position:absolute;
	top:0px;
	left:0px;
	width:1200px;
	height:700px;
	border-radius:10px;
}
#splash a{ 
	text-shadow: none;
	font-size: 22pt;
	border-radius: 8px;
	padding:10px;
	padding-left: 30px;
	width:150px;
	text-align: center;
	line-height:50px;
	position:absolute;
	display:block;
	background-color:#5e9ebc;
	top:420px;
	left:120px;
	background-image:url('../images/icon_about.png');
	background-position: 10px center;
	background-repeat: no-repeat;
	color:#fff;
}
#splash a:hover{
	background-color: #e9bc7a;
}
#settingsPanel .bodyPanel a{
	margin:0;
	display:block;
	position:relative;
	top: auto;
	left: auto;
	width:50px;
	height:50px;
	border-radius: 8px;
	background-image: url('../images/terrain1.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #5e9ebc;
	float:left;
	border:1px solid #11406b;
}
#settingsPanel .bodyPanel a:hover, #settingsPanel .bodyPanel a.selected{
	background-color: #e9bc7a;
}
#settingsPanel #setTerrain{
	width:200px;
	height:100px;
	float:left;
}
#settingsPanel #setLavaBall{
	width:130px;
	height:100px;
	float:left;
}
#settingsPanel #setArmor{
	width:300px;
	height:100px;
	float:left;
}
#settingsPanel .bodyPanel a#terrain1{
	background-image:url('../images/terrain1.png');
	border-radius: 8px 0 0 8px;
	border-right: none;
}
#settingsPanel .bodyPanel a#terrain2{
	background-image:url('../images/terrain2.png');
	border-radius: 0 0 0 0;
	border-right: none;
}
#settingsPanel .bodyPanel a#terrain3{
	background-image:url('../images/terrain3.png');
	border-radius: 0 8px 8px 0;
}
#settingsPanel .bodyPanel a#armor1{
	background-image:url('../images/armor1.png');
	border-radius: 8px 0 0 8px;
	border-right: none;
}
#settingsPanel .bodyPanel a#armor2{
	background-image:url('../images/armor2.png');
	border-radius: 0;
	border-right: none;
}
#settingsPanel .bodyPanel a#armor3{
	background-image:url('../images/armor3.png');
	border-radius: 0;
	border-right: none;
}
#settingsPanel .bodyPanel a#armor4{
	background-image:url('../images/armor4.png');
	border-radius: 0;
	border-right: none;
}
#settingsPanel .bodyPanel a#armor5{
	background-image:url('../images/armor5.png');
	border-radius: 0 8px 8px 0;
}
#settingsPanel a#ball1{
	border-radius: 8px 0 0 8px;
	border-right: none;
	background-image:url('../images/ball1.png');
}
#settingsPanel a#ball2{
	border-radius: 0 8px 8px 0;
	background-image:url('../images/ball2.png');
}
#highScoresPanel .bodyPanel ul{
	list-style: none;
	display:block;
	padding:0;
	margin:0;
}
#highScoresPanel .bodyPanel ul li{
	display:block;
	line-height: 50px;
	clear:both;
	margin-bottom:0px;
}
#highScoresPanel .bodyPanel ul li img{
	padding:1px;
	float:left;
	border:1px solid #11406b;
	width:40px;
	height:40px;
}
#highScoresPanel .bodyPanel ul li strong{
	display:block;
	width: 250px;
	float:left;
	clear:right;
	margin-top:-15px;
	margin-left:20px;
	height:12px;
	color: #5e9ebc;
	font-weight: bold;
}
#highScoresPanel .bodyPanel ul li span{
	float:left;
	display:block;
	width:250px;
	font-size: 11pt;
	margin-left:20px;
	margin-top:6px;
	color:#11406b;
}
#submitScore{
	position:absolute;
	width:300px;
	padding:50px;
	height:180px;
	top:220px;
	left:410px;
	background: #fff;
	border-radius: 10px;
	z-index: 200;
	display:none;
	border:1px solid #5e9ebc;
}
#submitScore input{
	border-radius: 5px;
	border:1px solid #5e9ebc;
	color:#5e9ebc;
	padding:12px;
	line-height:20px;
	float:left;
	width:150px;
	display: block;
}
#submitScore input:hover, #submitScore input:focus{
	border:1px solid #e9bc7a;
}
a.submit_score_button{
	background-image: url('../images/icon_submit.png');
	background-position: 10px center;
	background-repeat: no-repeat;
	background-color: #5e9ebc;
	display:block;
	color:#fff;
	text-shadow: none;
	width:60px;
	border-radius: 8px;
	float:right;
	padding:10px;
	padding-left:40px;
	line-height:20px;
}
a.submit_score_button:hover{
	background-color: #e9bc7a;
}
#splash #newGame{
	top:320px;
	left:120px;
	background-image:url('../images/icon_play.png');
}
#splash #settings{
	top:420px;
	left:120px;
	background-image:url('../images/icon_settings.png');

}
#splash #highScores{
	top:520px;
	left:120px;
	background-image:url('../images/icon_highScores.png');
	font-size:21pt;

}
#splash #about{
	top:600px;
	left:980px;
	background-image:url('../images/icon_about.png');
}
.panel {
	position:absolute;
	top:-500px;
	right:82px;
	width:730px;
	height:430px;
	background-color: rgba(255,255,255,0.9);
	z-index:100;
	border-radius:10px;
	border:1px solid #11406b;
}
#highScoresPanel{
	top:1200px;
}
.headerPanel{
	background-color: #5e9ebc;
	height:70px;
	border-radius:10px 10px 0 0;
	border-bottom:1px solid #11406b;
	position:relative;
}
.closeButton{
	display:block;
	width:25px;
	height:25px;
	position:absolute;
	top:3px;
	right:6px;
	background:url('../images/icon_closePanel.png') no-repeat center center;
}
#submitScore .closeButton{
	background:url('../images/icon_closePanel.png') #5e9ebc no-repeat center center;
	border-radius: 5px;
}
.headerPanel h1{
	font-size:30pt;
	line-height:70px;
	padding-left:55px;
	color:#fff;
	font-weight:lighter;
    text-shadow: none;
    background-image: url('../images/icon_settings.png');
    background-position: 20px center;
    background-repeat: no-repeat;

}
#highScoresPanel .headerPanel h1{
    background-image: url('../images/icon_highScores.png');
}
#barritaIzq, #barritaDer{
    width:10px;
    height:50%;
    background-color:rgba(255,255,255,0.6);
    box-shadow:  inset 0 0 2px #666;
    position:absolute;
    top:0;
    left:50%;
    margin-left:-200px;
    margin-top:-359px;
}
#barritaDer{
    margin-left:200px;
}
#container{
    width:1200px;
    height:600px;
    background-color:rgba(255,255,255,0.7);
    background-color: #444;
    background-size: 100%;
    padding-bottom:20px;
    position:absolute;
    border-radius: 10px;
    box-shadow:  inset 0 0 8px #666, 0 12px 6px -6px #888;
    top:50%;
    left:50%;
    margin-left:-630px;
    margin-top:-360px;
    padding:0px;
}

#container #temporal{
    width:100px;
    height:100px;
    position:absolute;
    top:0;
    left:0;
    background:url('../images/temporal.png') no-repeat;
}
#container #pic{
    width:130px;
    height:150px;
    float: left;
    border:1px solid #ccc;
    border-radius: 10px;
    padding:1px;
    background: #fff;
}
#container #dataInfo{
    float:left;
    margin:0 30px;
    width:270px;
}
#container #dataInfo h1{
    font-size:27pt;
    padding:8px 15px;
    background-color:rgba(204,204,204,0.6);
    border:1px solid #ccc;
    border-radius: 10px;
    color:#fe9933;
    font-weight: lighter;
    clear:both;
    margin: 0 auto;			
    margin-bottom:15px;
    text-align: center;
}
#container #dataInfo dl{

    width:270px;
    display: block;
    line-height:17pt;
}
#container #dataInfo dl dt{
    width:90px;
    float:left;
    text-align:right;
    clear:left;
}
#container #dataInfo dl dd{
    float:left;
    margin-left:10px;
    text-align: left;
}
#container #extraInfo{
    width:130px;
    height:150px;
    float: left;
    border-radius: 10px;
    padding:1px;
}
#container #extraInfo #curriculum{
    width:124px;
    height:32px;
    padding:3px;
    display:block;
    background-color:rgba(204,204,204,0.6);
    border-radius: 10px;
    border:1px solid #ccc;
    margin-bottom:15px;
}
#container #extraInfo a{
    display:block;
    width:32px;
    height:32px;
    float:left;
}
#container #extraInfo #facebook{
    background:url('../images/fb.png') no-repeat;
}
#container #extraInfo #twitter{
    background:url('../images/tw.png') no-repeat;
    margin:0 17px;
}
#container #extraInfo #linkedin{
    background:url('../images/lin.png') no-repeat;
}
#container h2{
    font-size: 20pt;
    display: inline-block;
    color:#666;
    font-weight: lighter;
    border-radius: 10px;
    margin:15px 0 5px 0;
}
#container .content{
    font-size: 12pt;
    text-align: justify;

}
#container #queOfrezco{
    width:200px;
    float:left;
}
#container #misHerramientas{
    width:250px;
    margin-left:20px;
    float:left;
}
#container #misHerramientas .herramienta{
    float:left;
    text-align: right;
    clear:left;
    display: block;
    width:135px;
}
#container #misHerramientas .level{
    background: url('../images/star.png');
    display: inline-block;
    height:16px;
    width:48px;
    float: left;
    margin-left:15px;
}
#container #misHerramientas .level.high{
    width:48px;
}
#container #misHerramientas .level.medium{
    width:32px;
}
#container #misHerramientas .level.medium-high{
    width:40px;
}
#container #miBlog{
    width:130px;
    display:block;
    float:left;
    color:#000;
}
.left{
    float: left;
}
.right{
    float:right;
}
.center{
    margin:0 auto;
    display:block;
}
#container .content.centeredText{
    text-align: center;
}
.orange{
    color:#fe9933;
}
.black{
    color:#000;
}
.clearfix{ 
    clear: both; 
}
h3{
    font-weight: lighter;
    margin-top:15px;
    margin-bottom:5px;
    clear:both;
}
#menu {
  width: 228px;
  margin: 30px 0 0;
  padding: 0;
  background-color: #fff;
}
#menu > li > a {
  display: block;
  width: 190px \9;
  margin: 0 0 -1px;
  padding: 6px 14px;
  border: 1px solid #e5e5e5;
}

#menu > .active > a {
  position: relative;
  z-index: 2;
  padding: 9px 15px;
  border: 0;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
  -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
     -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
          box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
  
}
#menu .nav-header{
	box-shadow: none;
}
/* Chevrons */
#menu .icon-chevron-right {
  float: right;
  margin-top: 2px;
  margin-right: -6px;
  opacity: .25;
}
#menu > li > a:hover {
  background-color: #f5f5f5;
}
#menu a:hover .icon-chevron-right {
  opacity: .5;
}
#menu .active .icon-chevron-right,
#menu .active a:hover .icon-chevron-right {
  background-image: url(../images/glyphicons-halflings-white.png);
  opacity: 1;
}
#menu.affix {
  top: 40px;
}
#menu.affix-bottom {
  position: absolute;
  top: auto;
  bottom: 270px;
}