/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */
body { background: url(../img/body-bg.jpg) 0 0 repeat; font:normal 13px/1.333 Verdana, Arial, sans-serif; }

@font-face {
    font-family: 'anime_ace_2.0_bbbold';
    src: url('animeace2_bld-webfont.eot');
    src: url('animeace2_bld-webfont.eot?#iefix') format('embedded-opentype'),
         url('animeace2_bld-webfont.woff') format('woff'),
         url('animeace2_bld-webfont.ttf') format('truetype'),
         url('animeace2_bld-webfont.svg#anime_ace_2.0_bbbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*
 * Structure page
 */
header[role="banner"],
.main,
footer[role="contentinfo"] { width: 940px; margin: 0 auto 20px; }

.main-wrapper { width: 100%; }
.main-wrapper .content { float: left; width: 700px; }
.main-wrapper aside { float: right; width: 220px; }

a { color: #ba2736; text-decoration: none; }
a:hover,
a:focus{ text-decoration: underline; }

/*
 * General
 */
.btn {
  padding: 0 10px; font: bold 12px/34px Arial, sans-serif; color: #fff; height: 34px; cursor: pointer;
  text-shadow: 0 1px 1px rgba(0,0,0,.1); border-radius: 5px; box-shadow: 0 2px 2px rgba(0,0,0,.1);
  background: url(../img/btn-bg.png) 0 0 repeat-x;
}
.lt-ie9 .btn { behavior:url(/~joan/mapalaboral/css/PIE.htc); position: relative; z-index: 100; }
.btn:hover,
.btn:focus { text-decoration: none; }

.content { padding: 10px; background: #fff; clear: both; }

.title { font-size: 24px; color: #ba2736; font-family:'anime_ace_2.0_bbbold'; }

/*
 * Header
 */
header[role="banner"] { background: url(../img/header-bg.jpg); height: 73px; margin-top: 20px; }

.logo { background: url(../img/logo.png); width: 222px; height: 56px; margin: 9px 0 0 20px; float: left; }

.lang { margin: 0; list-style: none; float: right; margin: 30px 20px 0 0; }
.lang li { float: left; margin: 0 0 0 15px; }
.lang a { font: bold 15px/1 Arial,sans-serif; padding: 0 0 0 4px; border-left: 4px solid #ba2736; }
.lang a.active,
.lang a:hover,
.lang a:focus { text-decoration: none; color: #d9d9d9; border-color: #d9d9d9; }

header[role="banner"] .btn { float: right; margin: 20px 0 0; }

/*
 * Footer
 */
footer[role="contentinfo"] { background: rgba(157,157,157,.9); font-size: 12px; }
.no-rgba footer[role="contentinfo"] { background: #a7a7a7; }
footer[role="contentinfo"] .wrapper { padding: 20px 10px; }

.idea { float: right; width: 245px; text-align: right; margin:0 10px 0 0; }

.ecas { display: block; float: right; width: 165px; text-align: left; margin: 0 20px 0 0; }
.incorpora { display: block; float: left; width: 410px; text-align: left; margin: 2px 0 58px 87px }
.incorpora .left { padding-right: 10px;}

.infojobs { display: block; margin: 0 0 20px 10px; float: left; width: 128px; margin: 0px 0 58px 20px }
.infojobs img { margin-top: 7px; }

.colab { /*clear: both;*/ margin: 0 0 20px 10px; float: left; width: 475px; display: none;}

.submenu { margin: 0 0 0 10px; list-style: none; padding: 0; clear: both; }
.submenu li { float: left; margin: 0 10px 0 0; border-right: 2px solid #000; padding: 0 10px 0 0; }
.submenu li:last-child { margin: 0; border:0; padding: 0; }
.submenu li.last-child { margin: 0; border:0; padding: 0; }
.submenu a { font-weight: bold; }

/* Upper case in credits */

.credits .credits-upper { text-transform: uppercase; font-weight:bold; }

/*
 * Content
 */

.section-title { float:left; font-size: 40px; text-shadow: 0 3px 2px rgba(0,0,0,.6); margin: 0 0 20px; }

.navigation { float: right; list-style: none; margin: 15px 10px 0 0; }
.navigation li { float: left; margin: 0 0 0 35px; padding: 0 0 0 4px; border-left: 4px solid #787878; }
.navigation li a { text-transform: uppercase; font-weight: bold; color: #787878; }
.navigation li:hover,
.navigation li.active,
.navigation li a:hover,
.navigation li a:focus,
.navigation li.active a { color: #ba2736; border-color: #ba2736; text-decoration: none; }

.banners { clear: both; }
.banners .banner { float: left; width: 300px; margin: 0 20px 0 0; text-align: center; }
.banners .banner:last-child { margin: 0; }
.banners .banner a { font-weight: bold; font-style:italic; text-align: center; color: #000; text-transform: uppercase; text-decoration: none; }
.banners .banner a + p { padding: 10px 20px; margin: 0; }
.banners .banner p:hover { text-decoration: underline !important; }

.intro .representative { border:2px solid #4b4b4b; float: left; margin: 0 20px 0 0; }
.intro .text { float: right; width: 610px; }
.main-wrapper .intro .text { float: right; width: 390px; }
.intro .text p:first-child { margin-top: 0; }

table { width: 100%; margin: 20px 0; }
table th { background: url(../img/thead-bg.png) 0 0 repeat-x; padding: 0 10px; border-right: 2px solid #da939b; height: 37px; line-height: 37px; color: #fff; text-transform: uppercase; text-align: left; }
.lt-ie9 table thead { background: url(../img/thead-bg-ie.png) 0 0 no-repeat; }
.lt-ie8 table thead tr { background: url(../img/thead-bg-ie.png) 0 0 no-repeat; }
.lt-ie9 table th { background: none; }
.lt-ie8 table th { background: url(../img/thead-bg.png) 0 0 repeat-x; }
table th.first { border-radius: 10px 0 0 0; }
table th.last { border-radius: 0 10px 0 0; border: 0; }
table td { border: 2px solid #fff; padding: 12px 10px; }
table .even td { background: #f5f5f5; }

table td { width: 66px; }
table td:first-child { width: 492px; }

table .info td {
    font-weight: 700;
    width: 100%;
    background-color: #787878;
}

.accordion { margin-bottom: 20px; }
.accordion .section-header { display: block; width: 100%; height: 36px; background: url(../img/menu-bg.png) 0 0 repeat-x; cursor: pointer; border-radius: 5px; margin: 0 0 1px; }
.lt-ie9 .accordion .section-header { behavior:url(/~joan/mapalaboral/css/PIE.htc); position: relative; z-index: 100; }
.accordion .open .section-header,
.accordion .section-header:hover { background-image: url(../img/accordion-header-active.png); }
.accordion .section-header a { text-transform: uppercase; color: #fff; text-decoration: none; padding: 0 0 0 40px; display: block; line-height: 36px;}
.accordion .section.close:first-child,
.accordion .section.open:first-child { margin-top:10px; }
.accordion .section-header a.content-close { background: url(../img/accordion-close.png) 12px 12px no-repeat; }
.accordion .section-header a.content-open { background: url(../img/accordion-open.png) 12px 12px no-repeat; }
.accordion .section ul { padding: 0 0 0 40px; margin:0; }
.accordion .section li { padding: 7px 0; }
.accordion .section li a { color: #000; }


/**
 * Identifica
 */
.download { margin: 20px 0 0; }
.download .btn { float: right; }

body.page-identifica .accordion { margin-top:20px; }


/*
 * Aside right
 */
.menu { margin:0 10px; width: 200px; list-style: none; padding: 0; }
.menu li { margin: 0 0 10px; }
.menu a {
  background: url(../img/menu-bg.png) 0 0 repeat-x; display: block; width: 100%; height: 36px; line-height: 17px; text-align: center; text-transform: uppercase; color: #fff; text-decoration: none;
  border-radius: 5px;
}
.lt-ie9 .menu a { behavior:url(/~joan/mapalaboral/css/PIE.htc); position: relative; z-index: 100; }
.menu a:hover,
.menu a:focus {
  background-image: url(../img/menu-bg-hover.png); font-weight: bold;
}

.menu li.last a { line-height:35px; }


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

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

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* ==========================================================================
   Nivo Slider styles
   jQuery Nivo Slider v3.2
   ========================================================================== */
.nivoSlider {
  position:relative;
  width:100%;
  height:auto;
  overflow: hidden;
}
.nivoSlider img {
  position:absolute;
  top:0px;
  left:0px;
  max-width: none;
}
.nivo-main-image {
  display: block !important;
  position: relative !important;
  width: 100% !important;
}

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  border:0;
  padding:0;
  margin:0;
  z-index:6;
  display:none;
  background:white;
  filter:alpha(opacity=0);
  opacity:0;
}
/* The slices and boxes in the Slider */
.nivo-slice {
  display:block;
  position:absolute;
  z-index:5;
  height:100%;
  top:0;
}
.nivo-box {
  display:block;
  position:absolute;
  z-index:5;
  overflow:hidden;
}
.nivo-box img { display:block; }

/* Caption styles */
.nivo-caption {
  position:absolute;
  left:0px;
  bottom:0px;
  background:#000;
  color:#fff;
  width:100%;
  z-index:8;
  padding: 5px 10px;
  opacity: 0.8;
  overflow: hidden;
  display: none;
  -moz-opacity: 0.8;
  filter:alpha(opacity=8);
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}
.nivo-caption p {
  padding:5px;
  margin:0;
}
.nivo-caption a {
  display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
  position:absolute;
  top:45%;
  z-index:9;
  cursor:pointer;
}
.nivo-prevNav {
  left:0px;
}
.nivo-nextNav {
  right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
  text-align:left;
  position: relative;
  top: -35px;
  z-index: 100;
  left: 880px;
  width: 100px;
}
.nivo-controlNav a {
  cursor:pointer;
  float: left;
  width: 13px;
  height: 14px;
  text-indent: -9999em;
  /*background: url(../img/slider-steps.png) 100% 0 no-repeat;*/
  margin: 0 3px;
}
.nivo-controlNav a.active {
  background-position: 0 0;
}

.nivo-controlNav