* {
  
}

/* global styles ________________________________________________________________________________________ */

html, 
body {

}

body { 
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 12px; 
  line-height:1.9em; 
  margin: 0; 
  padding: 0; 
  background: url(/images/header-graphic.jpg) top center no-repeat; 
  color: #444; 
}

  body.layout-logon { background-image: url(/images/header-graphic.jpg); }

  body.mce-content-body { background: white; padding: 10px;}



a { color: #CD0033; text-decoration: none; }
a:hover { text-decoration: underline; }

p { padding: 0 0 0.5em 0; margin: 0; }

h1, h2, h3, h4 { margin: 0.5em 0 0 0; padding: 0 0 0.5em 0; font-family: Arial, Helvetica, sans-serif;  }

form { margin: 0; padding: 0; }
form fieldset { padding: 12px 18px 12px 18px; margin: 0 12px 24px 12px; }
form legend { font-weight:bold; border-bottom: 1px solid #ddd; padding: 2px 10px 2px 10px; margin: 0 0 4px 0; background: #bbb; color: #236865 }
form div { clear:both; overflow:auto; padding: 0 0em 0.5em 0em; position: relative; }
form span { margin-right: 6px; }
form label { float: left; width: 180px; font-size: 1em; }
form input { float: left; padding: 2px 6px; width: 140px;  }
form select { width: 150px; margin-bottom: 8px;  }
form textarea { margin-left: 0; width: 460px; height: 120px; }

form input.checkbox, form input.radiobox { width: 20px; margin: 0; }
form .small { width: 50px; min-width: 0px; }
form .medium { width: 130px;}
form .btn-submit { /*! width: auto; */ /*! margin: 12px 0 0 0px; */ /*! padding: 2px 6px; */ }

form select.sel-category { clear: both; margin-top: 4px; width: 180px; }
form select.sel-category .level1 { background: #ddd; }


.notice, .message, .error { padding: 0.25em 1em !important; margin-bottom: 0.5em !important; color: black; }
.notice { border: 1px solid #ccc; background: #ffd; }
.message { border: 1px solid #aca; background: #dfd; }
.error { border: 1px solid #caa; background: #fdd; }


.hide-visually {
  position:absolute !important;
  margin:0 0 0 -9999px !important;
  left:auto !important;
  right: auto !important;
  bottom:auto !important;
  top: auto !important;
}





/* icon styles _________________________________________________________________________________________ */

i { 
  background: url(/images/add-resources-button-icon.png) top left no-repeat;
  width: 20px;
  height: 20px;
  display: inline-block;
}

.i--left {
  float: left; margin-right: 8px
}

.i--right {
  float: right; margin-left: 8px
}

  .i--add {
    background-image: url('/images/add-resources-button-icon.png');
  }

  .i--search {
    background-image: url('/images/search-button-icon.png');
  }





/* page structure styles _______________________________________________________________________________ */

header { clear: both; position: relative; margin: 0; padding: 30px 0px 10px 15px; }

.user-info { position: absolute; right: 640px; color: #eee; text-align: right; top: 92px; line-height: 22px; }

#content-anchor, 
#jump-to-content { 
  position: absolute; 
  left: -9999px; 
}

#page {
  width: 100%;
  margin: 0 auto; 
  padding: 0; 
  font-size: 1.2em;
  min-width: 1220px;
}

section { position: relative; }

article { clear: both; padding-bottom: 24px; overflow: auto; zoom: 1; color: #eee; padding: 12px 0px 24px 0px; } 
article a { color: white; text-decoration: underline; }
article a:hover { color: #ffc; }

.layout-container { 
  box-sizing: border-box;
  width: 100%;
  max-width: 1320px; 
  min-with: 296px;
  margin: 0 auto; 
  padding: 0 12px;
  position: relative;
  overflow: auto;
}

  .layout-container--offset {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 12px;
    padding-left: calc((100% - 1300px) / 2);
  }



.layout-default .content { 
  -webkit-column-count: 2; 
  -moz-column-count: 2; 
  column-count: 2;  
}
.layout-no-cols .content {
  -webkit-column-count: 1; 
  -moz-column-count: 1; 
  column-count: 1;         
}

.content-container, 
.layout-default article form { background: white; padding: 12px 12px 12px 12px; overflow: auto; color: #444; }

.layout-default article fieldset { border: none; }

.borderradius .layout-default article form, 
.borderradius .content-container {
  -webkit-border-radius:6px; 
  -moz-border-radius:6px; 
  border-radius:6px; 
}

aside { width: 176px; float: left; padding: 0 16px 24px 0;  }

.layout-logon aside, 
.layout-home aside { clear: both; float: none; width: auto; overflow: auto; zoom: 1; padding: 10px 10px 24px 10px; background: none; }

.content-area { margin-left: 192px; border-left: 1px solid #3B6B82; padding-left: 12px}

.layout-lightbox .content-area { margin-left: 0; border-left: none; padding-left: 0; }




/* general _____________________________________________________________________________________________ */

.loading { background: url(/images/loading.gif) 0px 32px no-repeat; padding: 36px 0 36px 36px; margin: 0 auto; width: 120px; }
.btn-add { display: inline-block; margin: 8px 0 8px 12px; background: white; padding: 2px 8px;  }




/* section ______________________________________________________________________________________________ */



.logo { 
  box-sizing: border-box;
  float: left; 
  margin: 0;
  padding: 100px 0 20px 0;
}

  .logo__image {
    display: block;
  }



#top-nav-logo { position: absolute; top: 10px; right: 12px; }

#top-search, 
#top-search fieldset, 
#top-search label, 
#top-search input { padding:0;margin:0;float: none;border: none;}

#top-search {}
#top-search fieldset { border: none; padding}
#top-search label { position: absolute; left: -9999px; }
#top-search input { height: 25px; line-height: 25px; padding: 0 8px; }
#top-search .btn-submit { background: url(/images/btn-submit.png) top left no-repeat; margin-left: 4px; width: 85px; text-indent: -9999px; }

.borderradius #top-search input { 
  -webkit-border-radius: 4px; 
  -moz-border-radius: 4px; 
  border-radius: 4px; 


}



/* languages ____________________________________________________________________________________________ */




/* news _________________________________________________________________________________________________ */

.news-list, 
.news-list-item, 
.news-title { padding: 0; margin: 0; list-style: none; }

.news-list { 
  list-style: none; 
  background: white; 
  color: #222; 
  padding: 12px; 
  margin-top: 8px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.news-list-item { position: relative; padding-left: 90px;  margin-bottom: 8px; }
  .news-title { padding-bottom: 0.25em; }
  .news-date { position: absolute; top: 1px; left: 4px; font-size: 12px; color: #666;}
  .news-link { color: inherit }


/* people _______________________________________________________________________________________________ */




/* collaborators ________________________________________________________________________________________ */

.filter-form { margin: 0; padding: 0; }
.filter-form fieldset { border: none; padding:0 0 6px 0; margin: 4px 0 0 0; }
.filter-form legend {
  position: static;
  display: block; 
  width: 168px;
  font-weight:bold; border-bottom: 1px solid #999; padding: 2px 10px 4px 0px; margin: 0 0 6px 0;
  background: none; 
  color: #236865;
}
.filter-form div { clear:both; overflow:auto; padding: 0 0 0.25em 0; position: relative; }
.filter-form span { margin-right: 6px; }
.filter-form label { 
  float: left; 
  width: 80px; 
  font-size: 12px;
}

.filter-form input { 
  clear: left; 
  margin-top: 4px;
  float: none; 
  padding: 2px 6px; 
  width: calc(100% - 14px); 
}

.filter-form input[type="checkbox"] { width: auto; float: none; position: absolute; right: 2px; top: 2px }

.filter-form select { width: 150px; margin-bottom: 8px;  }

.filter-form textarea { margin-left: 0; width: 460px; height: 120px; }

.filter-form .btn-submit { /*! display: block; */ /*! float: none; */ }

.filter-form .btn,
.filter-form button { 
  text-align: left;
  display: block; 
  background: #236865; 
  color: white;
  border: none;
  border-radius: 6px;
  line-height: 20px;
  padding: 6px 15px 6px 8px;
}

.filter-form .btn-submit { 
  background: #236865; 
  width: 100%;
}

.filter-form .btn-add { 
  background: #1A465F; 
  width: calc(100% - 23px);
}



.filter-form .admin-options legend { color: #900; }
.filter-form .admin-options label { color: #933; }





/* home-sections ________________________________________________________________________________________ */

.home-containers, .containers, .container, .container h3, .container p { padding: 0; margin: 0; list-style: none; }

.home-containers, 
.containers { clear: both; }

.home-containers { 
  padding-top: 12px; 
  position: relative;
  z-index: 1000;
  overflow: auto;
}

.container { 
  float: left; width: 290px; 
  background: #fff; border:1px solid #fff; 
  padding: 10px; 
  position: relative; 
  margin-right: 12px;
}
.container:last-child { margin-right: 0; }

.container h3 { margin: 0; padding: 2px 0 10px 6px; color: #3B6B82; }
.container img { border: 1px solid #ccc }
.container-options {
  background: none;
  display: block;
  padding: 0 0 2px 0;
  color: #54a5a0;
}

.container-gallery { 
  padding: 0; margin: 0 0 4px 0; display: block; 
  height: 206px; width: 289px; 
  overflow: hidden; 
}

.container:hover { background-position: 0px 0px; color: #444; }
.container:hover .readmore a { color: #9E1018; }

aside .container { background: #CCCCCC; width: 430px; min-height: 176px; padding: 8px 10px 0 18px; }
aside .container:last-child { margin-right: 0; }
aside .container h3 { padding-top: 6px; padding-left: 0 }
aside .container .container-options {
  background: #ccc url(/images/bg-arrows.png) 0px -149px no-repeat;
  display: block;
  padding: 0px 0px 2px 22px;
  margin-top: 12px;
  color: #006666;
}

.container-new img { position: absolute; top: -6px; right: 16px; border: 2px solid white; }
.container-new h3, aside .container-new .container-options { color: #006666; }
.container-logon h3, aside .container-logon .container-options { color: #990033; }
aside .container-logon .container-options { position: absolute; margin-top: 18px; right: 18px; background-position: 0px -119px; }

.container-logon { float: none; margin: 0 auto !important; }
.container-logon form { padding: 4px 0 0 0; margin: 0; }
.container-logon div { padding: 0 0em 1em 0em; }
.container-logon fieldset { padding: 0; margin: 0; border: 0; }
.container-logon label { width: 110px; }
.container-logon input { width: 290px } 
.container-logon .btn-submit { width: auto; margin-left: 0; padding-left: 0; } 

.boxshadow .container-new img {
  -webkit-box-shadow: 0px 0px 8px #999, 0px 2px 2px #333;
  -moz-box-shadow: 0px 0px 8px #999, 0px 2px 2px #333;
  box-shadow: 0px 0px 8px #999, 0px 2px 2px #333
}
.borderradius .container img, .borderradius .container { 
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}







/* content-area _________________________________________________________________________________________ */

.warning { display: block; float: right; width: 260px; padding: 0 12px; border-left: 1px solid #ddd; margin-top: 40px; }

.media-list, 
.media-list .media,
.media-list .m-title,
.media-list .m-container, 
.media-list .m-image { padding:0;margin:0;list-style:none;display:block; }

.media-list { overflow: auto; zoom: 1; padding-bottom: 240px; }
.media-list .media { 
  min-height: 70px; 
  width: 118px; 
  width: calc((100% - (30px * 5)) / 5);   
  float: left; 
  border: 1px solid #ddd; 
  margin: 0 12px 12px 0; 
  padding: 8px 8px 32px 8px; 
  position: relative;
}

.media-list.no-warning .media { 
  width: calc((100% - (30px * 5)) / 5);   
}

    .media-list.no-warning .media:nth-child(5n+5){
      margin-right: 0;
    }

    .media-list.no-warning .media:nth-child(5n+6){
      clear: left;
    }


@media all and (max-width: 1280px){

  .media-list.with-warning .media { 
    width: calc((100% - (30px * 3)) / 3);   
  }

      .media-list.with-warning .media:nth-child(3n+3){
        margin-right: 0;
      }

      .media-list.with-warning .media:nth-child(3n+4){
        clear: left;
      }
  
}

@media all and (min-width: 1281px){

  .media-list.with-warning .media { 
    width: calc((100% - (30px * 4)) / 4);   
  }

      .media-list.with-warning .media:nth-child(4n+4){
        margin-right: 0;
      }

      .media-list.with-warning .media:nth-child(4n+5){
        clear: left;
      }
  
}




/*
.media-list .media.m-last { margin-right: 0; }
*/
.media-list .m-title { margin-bottom: 4px; font-weight: normal; font-size: 1em; line-height: 1.2em; max-height: 45px; overflow: hidden; /*! margin-bottom: 30px; */}
.media-list .m-container { min-height: 80px; width: auto; background: #eee; padding: 1px; /*! position: absolute; */ /*! top: 8px; */ margin-bottom: 8px;}

.media-list .m-image { width: 100%;height: auto;}
.media-list .m-image-icon { margin: 16px auto 0 auto; width: 32px; }

.m-options { position: absolute; bottom: 8px; left: 3px; width: 130px; height: 16px; }

.m-lightbox-in, .m-lightbox, .m-verify, .m-unverify, .m-edit, .m-archive, .m-unarchive, .m-delete, .m-undelete, .m-download, .m-info { 
  margin: 0; 
  position: relative; 
  display: inline-block; width: 16px; height: 16px; 
  background: url(/images/bg-media-options.png) 0px 0px no-repeat;
}
.m-options .hidden { position: absolute; margin-left: -9990px; }

.m-lightbox { background-position: -128px 0px }
.m-lightbox-in { background-position: -144px 0px }
.m-edit { background-position: -112px 0px }
.m-verify { background-position: -80px 0px }
.m-unverify { background-position: -64px 0px }
.m-archive { background-position: -48px 0px }
.m-unarchive { background-position: -96px 0px }
.m-delete { background-position: -32px 0px }
.m-download { background-position: -16px 0px; }
.m-info { background-position: 0px 0px; float: right; position: relative; }

.media-list .media-unverified { background: #edd url(/images/bg-unverified.png); }
.media-list .media-archived { background: #edd url(/images/bg-archived.png); }



.lb-nav,
.lb-nav-item {
  padding: 0; 
  margin: 0;
  display: block;
  list-style: none;
}

.lb-nav {
  display: none;
  position: absolute; 
  z-index: 500;
  left: -5px;
  top: 16px;
  width: 150px;
  background: #000;
}

  .m-lightbox:hover .lb-nav,
  .m-lightbox-in:hover .lb-nav { display: block; }


.lb-nav-item { 
  color: white;
  overflow: auto; 
  padding: 5px 5px;
  line-height: 16px; 
}

  .lb-nav-item + .lb-nav-item { 
    border-top: 1px dotted #666;
  }

.lb-nav-item a {
  float: left;
  display: block;
  overflow: hidden;
  margin-right: 6px; 
}







/*
When the screens starts to enlarge, we need to start positioning the icons, but only once there is enough space
*/
@media all and (min-width: 1281px){
  
  .media-list.no-warning .m-options {
    left: 8px; 
    width: calc(100% - 16px); 
  }
  
  .media-list.no-warning .m-options > span,
  .media-list.no-warning .m-options > a { margin-right: 3px; }
  
}

/*
Slightly larger screen needed for the with-warning panel (+20px)
*/
@media all and (min-width: 1301px){
  
  .media-list.with-warning .m-options {
    left: 8px; 
    width: calc(100% - 16px); 
  }
  
  .media-list.no-warning .m-options > span,
  .media-list.no-warning .m-options > a { margin-right: 3px; }
  
}




.info-box, 
.info-box-title,
.info-box-summary,
.info-box-list,

.info-box-list dt,
.info-box-list dd { padding:0;margin:0;list-style:none;display:block; }

.info-box { 
  position: absolute; 
  left: -9999px; 
  z-index: 100; 
  top: -999px; 
  width: 168px; 
  padding: 4px 8px 6px 8px; 
  overflow: hidden; 
  background: #444; 
  border: 1px solid #ccc; 
  color: #eee; 
}
.media-list .m-info:hover .info-box { left: -119px; top: 24px}

/* .media-list .m-last .m-info:hover .info-box { left: -167px } */

.info-box p { font-size: 0.9em; line-height: 1.3em; padding: 3px 0 4px 0; }
.info-box-title { font-size: 1em; border-bottom: 1px solid #999; padding: 0 0 3px 0 }
.info-box-summary { border-bottom: 1px dotted #999; }
.info-box-list { padding: 3px 0 0 0; font-size: 0.9em; }
.info-box-list dt { width: 60px; float: left; }
.info-box-list dd { margin-left: 80px; text-align: right; }


/*
When the screens starts to enlarge, we need to start positioning the icons, but only once there is enough space
*/
@media all and (min-width: 1201px){
  
  .media-list.no-warning .m-info:hover .info-box { left: auto; right: -12px; top: 24px}
  
}

@media all and (min-width: 1301px){
  
  .media-list.with-warning .m-info:hover .info-box { left: auto; right: -12px; top: 24px}
  
}







.paging { padding: 4px; background: #eee; margin-bottom: 8px; text-align: right;}

.paging p { padding: 0; overflow: auto; line-height: 2.0em; }

.paging .btn-prev, 
.paging .btn-next { background: #3B6B82; display: inline-block; padding: 0 7px 0 7px; color: white; }

.paging .btn-prev.disabled, 
.paging .btn-next.disabled { background: #ccc; }

.paging .btn-prev { float: left; }
.paging .btn-next { float: right; }

.paging .btn-prev:hover, 
.paging .btn-next:hover { background: #CD0033; text-decoration: none; }

.page-list {
  overflow: auto;
  float: left;
  margin-top: 2px;
  margin-left: 5px;
}

.page {
  float: left;
  color: #444;
  border-radius: 50%;
  height: 20px;
  line-height: 20px;
  width: 20px;
  text-align: center;
  margin-right: 5px;
}

  
  .page.selected,
  .page:hover {
    color: white;
    background: #246664;  
    text-decoration: none;
  }


.paging .right {
  
}

.result-sort {
  float: right;
}

  * + .result-sort {
    margin-left: .5em;
  }







/* footer _______________________________________________________________________________________________ */

footer {
  color: #ddd;
  background: #246864;
  margin: 0; 
  padding: 0; 
  border-top: 1px solid #ddd; 
  height: 120px; 
  font-size: 1.1em; 
}

footer .layout-container {
  padding-top: 10px;
  padding-bottom: 10px;
}

footer p { clear: both; }
footer a { color: #ddd }

.sub-nav, .sub-nav ul, .sub-nav li { padding: 0; margin: 0; list-style: none; }
.sub-nav { float: left; width: 600px; margin-bottom: 4px; }
.sub-nav ul { overflow: auto; zoom: 1; }
.sub-nav li { float: left; margin: 0 4px 0 0; padding: 0 4px 0 0; border-right: 1px solid #888; line-height: 1.2em; }
.sub-nav li:after { }
.sub-nav li:last-child { border: none; }





/* lightbox styling  ____________________________________________________________________________________ */

.lightbox__list,
.lightbox,
.lightbox__poster,
.lightbox__title,
.lightbox__meta {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1em;
}

.lightbox__list { 
  overflow: auto;
}

.lightbox {
  float: left;
  margin: 0 20px 20px 0;
  list-style: none;
  background: #444;
  color: white;
}

  .lightbox:hover {
    background-color: #3B6B82;
  }

.lightbox__title {
  color: white;
  padding: 10px 10px;
}

.lightbox__meta {
  display: inline-block;
}


.lightbox__link {
  text-decoration: none;
}

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



.btn { 
  margin: 10px 0;
  background: #ccc;
  display: inline-block;
  color: #444;
  padding: 10px 15px 10px 10px;
  line-height: 1em;
  border-radius: 2px;
  font-weight: 600;
}

  .btn:hover { 
    background: #060;
    color: #fff;
    text-decoration: none;
  }




/* sticky-footer  _______________________________________________________________________________________ */


html, body { height: 100%;}
#page { margin: 0 auto 0 auto; min-height: 100%; position: relative; }
#main { padding-bottom: 120px; } /* footer height */
#additional-info { 
  position: relative;
  margin-top: -120px; /* negative value of footer height */
  height: 120px;
  clear:both;
}