/*

    Theme Name: RIVM Sliders 
    Description: Anual REPORT 2013
    Version: 1.0.0
    Author: Liters.nl

*/

/***********************/
/********GENERAL *******/
/***********************/

body,
html {padding:0px; margin:0px; font-family: arial; }

/********************/
/********FONTS*******/
/********************/

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

/***************************/
/******** SLIDERS *********/
/*************************/

#sliderContainer { width: 663px; height: 400px; position: relative; border: 1px solid #42145F;}

/******** SLIDERS SET HEIGHT ********/
#sliderContainer.arbeidsongevallen {height: 560px;}
#sliderContainer.internationaal {height: 660px;}
#sliderContainer.resistentebacterien {height: 485px;}
#sliderContainer.voeding {height: 475px;}
#sliderContainer.top10 {height: 630px;}

.slideContent { background-color: #E17000; position: absolute; top: 0px; right:0px; padding: 0px; width: 643px; margin:10px; height: 34px; overflow: hidden; }
.slide h1 { font-size: 24px; text-transform: uppercase; margin:0px; padding:0px; line-height: 34px; padding-left:10px; font-family: 'rijksoverheidsansregular' !important; padding-top: 2px; font-weight: bold; letter-spacing: 0.4px;}

/* TOP 10 OVERRULE */ 
#sliderContainer.top10 .slideContent {height: 58px;}
#sliderContainer.top10 .slide h1 {line-height: 58px; padding-left: 105px;}
/* / TOP 10 OVERRULE */ 

.jFlowSlideContainer { overflow: hidden; }
.jFlowSlideContainer a { color: #F90; text-decoration: none; font-style: italic; }
.jFlowSlideContainer a:hover { text-decoration: none; }
.jFlowSlideContainer a:focus { position: relative; top: 1px; }

.jFlowNext { height:50px; width: 50px; position:absolute; bottom: 10px; right: 10px; cursor:pointer; }
.jFlowPrev { height:50px; width: 50px; position:absolute; bottom: 10px; right: 70px; cursor:pointer; }
.jFlowPrev:hover { background-position: -84px -235px; }
.jFlowNext:hover { background-position: 0px -235px; }

.text-version {
    position: absolute;
    bottom: 15px;
    left: 15px;
    font-family: 'rijksoverheidsansregular' !important;
    font-size: 16px;
    color: #000;
    z-index: 11;
}

.text-version.personeel {
    bottom: 1px;
}

.text-version:hover {
    text-decoration: none;
}


#myController { position: absolute; bottom: 50px; right: 55px; width: 75px; margin-right:-50px; font-family: 'rijksoverheidsansregular' !important;}

#top10 { position: absolute; top: 0px; left: 25px;  background: url(../img/top10/top10.png) no-repeat top center #fff; width: 70px; height: 84px; padding: 0px 4px 5px 5px }

.jFlowControl {margin-left:2px; float: left; width: 75px; height: 15px; text-align: center; display: none;}
.jFlowControl:hover { cursor: pointer; }
.jFlowSelected, .jFlowSelected:hover { display: inherit; }

.arrow-right {
    background: url(../img/arrow-right.png) no-repeat;
    border: none;
    text-indent: -99999999px;
    width: 32px;
    height: 39px;
    bottom: 8px;
}
.arrow-right:hover {
    background: url(../img/arrow-right.png) no-repeat;
    border: none;
    text-indent: -99999999px;
    width: 32px;
    height: 39px;
}
.arrow-left {
    background: url(../img/arrow-left.png) no-repeat;
    border: none;
    text-indent: -99999999px;
    width: 32px;
    height: 39px;
    right: 43px;
    bottom: 7px;
}
.arrow-left:hover {
    background: url(../img/arrow-left.png) no-repeat;
    border: none;
    text-indent: -99999999px;
    width: 32px;
    height: 39px;
}

/*
.arrow-right:focus, .arrow-left:focus {
    outline: 1;
} 
*/

/*****************************/
/******** PERSONEEL *********/
/***************************/

#personeel { width: 663px; height: 509px; position: relative; border: 1px solid #000000;}

#grid {width:663px; height: 509px; background: url(../img/personeel/grid.png) no-repeat top center transparent; position:absolute; top:0px; left:0px; z-index: 10;}

#contentHeading {background-color: #E17000; position: absolute; top: 0px; right:0px; padding: 0px; width: 643px; margin:10px; height: 34px; overflow: hidden; z-index: 100; }
#contentHeading h1 { font-size: 24px; text-transform: uppercase; margin:0px; padding:0px; padding-top: 2px; line-height: 34px; padding-left:10px; font-family: 'rijksoverheidsansregular' !important; font-weight: bold; }

#year-2009 {width: 132px; height: 440px; overflow: hidden; position: absolute; left:0px;   bottom:24px; z-index: 10; filter:inherit; color: #42145F;
}
#year-2010 {width: 132px; height: 440px; overflow: hidden; position: absolute; left:133px; bottom:24px; z-index: 10; filter:inherit; color: #42145F;
}
#year-2011 {width: 132px; height: 440px; overflow: hidden; position: absolute; left:266px; bottom:24px; z-index: 10; filter:inherit; color: #42145F;
}
#year-2012 {width: 132px; height: 440px; overflow: hidden; position: absolute; left:399px; bottom:24px; z-index: 10; filter:inherit; color: #42145F;
}
#year-2013 {width: 131px; height: 440px; overflow: hidden; position: absolute; left:532px; bottom:24px; z-index: 10; filter:inherit; color: #42145F;
}

.female {color: #fff; font-weight: bold; width: 132px; height: 250px; text-align: center; padding-top: 100px; background: url(../img/personeel/female.png) no-repeat top center; overflow: hidden; position: absolute; left:0px; bottom:0px; z-index: 10; filter:inherit;
}
.male {color: #fff; font-weight: bold; width: 132px; height: 80px; text-align: center; padding-top: 100px; background: url(../img/personeel/male.png) no-repeat top center; overflow: hidden; position: absolute; left:0px; bottom:0px; z-index: 20; filter:inherit;}

.fte {width: 132px; height: 75px; text-align: center; position: absolute; left:0px; top:25px; z-index: 10; font-size: 14px; filter:inherit;
font-family: 'rijksoverheidsansregular' !important; font-weight: bold; background-color: #fff;}
 
.fte h2 {padding:0px; margin:0px; font-weight: bold; margin-bottom: 2px; font-size: 35px;margin-top: -5px;}
.fte span {padding:0px; margin:0px; font-weight: normal; font-size: 18px;}

#year-2009 .female {height: 87px; left: 2px; z-index: 30;}
#year-2009 .male {height: 205px;}

#year-2010 .female {height: 60px; left: 2px; z-index: 30;}
#year-2010 .male {height: 187px;}

#year-2011 .female {height: 85px; left: 2px; z-index: 30;}
#year-2011 .male {height: 220px;}

#year-2012 .female {height: 229px; left: 2px; z-index: 10;}
#year-2012 .male {height: 90px; z-index: 20;}

#year-2013 .female {height: 180px; left: 2px; z-index: 10;}
#year-2013 .male {height: 35px; z-index: 20;}