/* ======================== 
          FONTS
   ======================== */

@font-face {
    font-family: 'ComingSoon';
    src: url('/MateMarote/templates/header/fonts/ComingSoon.ttf')  format('truetype');
}

/* =====================
	removing outher values
   ===================== */

/* TODO RESETEAR LOS ESTILOS DE LAS FUENTES Y PONER LA FUNETE ADECUADA */

/* =====================
          HEADER
   ====================== */

header {
  height: 112px;
  width: 916px;
  margin-right: auto;
  margin-left: auto;
  overflow: visible;
}

#logoMateMarote {
	margin: 0px;
}

.header-wrapper {
  position: relative;
  font-family: 'ComingSoon';
  width: 100%;
  height: 70.5357%;
  margin-left: auto;
  margin-right: auto;
  top: 5px;
}

#colored_dots {
  position: absolute;
  right: 0px;
  top: 1px;
}

/* ==================== *
 *        Navbar        *
 * ==================== */

.navbar {
  position: absolute;
  top: 44px;
  left: 164px;
}

ul.navbar {
  text-align: left;
  display: inline;
  margin: 0;
  list-style: none;
}

.nav-button {
  display: inline-block;
  float: left;
  position: relative;
  margin-right: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.header-text-link:visited, .header-text-link:link {
  text-decoration: none;
  font-weight: bold;
}

/* ==================== *
 *     Static pages     *
 * ==================== */

static-page-link:nth-of-type(1) > a {
  color: #c44029;
}

static-page-link:nth-of-type(2) > a {
  color: #dd4475;
}


/* ==================== *
 *  Language selection  *
 * ==================== */

.language-selector {
  padding: 0px;
  position: absolute;
  top: -16px;
  left: 0px;
  list-style: none;
}

.language-option {
  margin-bottom: 3px;
  cursor: pointer;
  display: none;
  width: 200px;
  border-radius: 5px;
  background-color: inherit;
}

.language-option:hover {
  background-color: #efe3a8;
}

.selected-language {
  display: block !important;
}

.language-option .language-name {
  display: inline;
  margin-left: 5px;
  top: 0px;
  color: #1273ad;
  font-weight: bold;
  font-size: 14px;
}

.language-option .language-flag {
  display: inline;
}

#current-language:hover .language-selector {
  display: block;
  opacity: 1;
  visibility: visible;
}

.language-selector img {
  border-radius: 5px;
}

/* ==================== *
 *       User info      *
 * ==================== */

.user_information {
  position: absolute;
  right: 1px;
  top: 33px;
  display: none;
}

#user_image {
  float: left;
  margin-right: 5px;
}

#user_name {
  float: left;
  color: #7aa829;
  font-weight: bold;
}

#bt-exit:visited, #bt-exit:link {
  position: absolute;
  top: 22px;
  right: 2px;
  font-size: 10px;
  color: #4d4d4d;
}

img#user_image {
  border: 3px solid #8ebf42;
  border-radius: 8px;
}


/* ====================== *
 *    Browser modal       *
 * ====================== */

.browser {
  background-color: #FFFFCC !important;
  border-radius: 15px !important;
  border: 1px solid !important;
}

.browser-body {
  background-image: url("/MateMarote/resources/img/pancho_browser.svg");
  background-repeat: no-repeat;
  width: 560px;
  height: 150px;
}

.browser-button {
  position: relative;
  width: 200px;
  left: 190px;
}

.browser-text {
  position: relative;
  left: 190px;
  top: 27px;
  width: 312px;
  color: #FFFFFF;
  font-size: 18px;
  text-align: center;
}