:root {
    --body-backgroud-color: #E6E6E6;
    --main-forecolor: #333;
    --content-background-color: #FFFFFF;
    --content-border-color: #E1E8ED;
    --border-color: #CCC;
    --dark-border-color: #000000;
    --light-border-color: #EEEEEE;
    --navbar-forecolor: #FFFFFF;
    --link-color: #036;
    --link-hover-color: #3D64FF;
    --title-color: #FFBC3A;
    --danger-color: #FF0000;
    --footer-color: #666;
    --footer-link-hover-color: #FFDD3A;
    --news-background-color: #F0F0F0;
}

body {
    /* Move down content because we have a fixed navbar that is 50px tall */
    padding-top: 70px;
    background-color: var(--body-backgroud-color);
    color: var(--main-forecolor);
}

.z_content {
    background-color: var(--content-background-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}
.navbar-brand {
    font-weight: bold;
    font-size: 2em;
}
.navbar-inverse .navbar-brand {
    color: var(--navbar-forecolor);
}
.navbar-nav>li:hover {
    border-left: 2px solid var(--navbar-forecolor);
}

.portal-first-row {
    margin-bottom: 15px;
}
.portal-left-column {
    padding: 0 15px 0 15px;
    margin: 0 -8px 0 -15px;
}
.portal-right-column {
    padding: 0 15px 0 15px;
    margin: 0 -15px 0 -7px;
}

.more {
    text-align: right;
    font: normal 10px/120% "Lucida Grande", "Trebuchet MS", Verdana, Arial,
        Helvetica, sans-serif;
}

p.more {
    margin-top: 0px;
}

a:link,a:visited {
    text-decoration: none;
    color: var(--link-color);
}

a:hover,a:active {
    color: var(--link-hover-color);
}

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

a img {
    border: 0 none;
}

h2.zl {
    font-size: 12px;
    font-weight: bold;
    line-height: 100%;
    margin: 0 0 1px 0;
    text-transform: uppercase;
    letter-spacing: 0;
}

h3.zl {
    font-size: 14px;
    line-height: 100%;
    margin: 0 0 1px 0;
    text-transform: uppercase;
    letter-spacing: 0;
}

h4.date {
    font-size: 10px;
    line-height: 100%;
}

a.link-container {
    display: inline;
    background: url(./ihm/extlink.gif) left center no-repeat;
    padding-left: 16px;
}

/* page elements */
#main-post {
    padding-top: 15px;
    padding-bottom:10px;
}
#main-post .main-post-title {
    float: left;
    padding-left: 10px;
    padding-bottom:10px;
    text-transform:uppercase;
    font-size:+2em;
    font-weight:bold;
}
#main-post .main-post-content {
    clear:both;
    text-align: justify;
}
.contest-first {
    width:100%;
    height: 200px;
}
.contest {
    width:45%;
    height:120px;
}

#galcontent {
    text-align: center;
}

#galcontent .title, #image_container .title {
    font-weight: bold;
    border-bottom: 1px dotted var(--border-color);
    margin-top: 15px;
    margin-bottom: 5px;
}

#galcontent .description {
    font-style: italic;
    border-bottom: 1px dotted var(--border-color);
}

#galcontent .lstimages {
    margin: 15px auto;
    position: relative;
    /*width: 730px;*/
}

#galcontent .line {
    clear: both;
    margin: auto;
    margin-bottom: 10px;
}

.line_image {
    display: inline;
    float: left;
    margin: 10px;
}

#galcontent .caption {
    font-weight:bold;
    padding:1px;
    margin-bottom:5px;
    background-color: var(--content-background-color);
    opacity:0.75;
    filter:alpha(opacity=75);
}


#image_container {
    text-align: center;
}

.z_navbar {
    margin-top: 15px;
    margin-bottom: 15px;
    text-align: center;
}

.previous {
    display: inline;
    margin-right: 20px;
}
#image-fullsize { max-width:100%;}
#image-fullsize:fullscreen { padding:15px;}
#image-previous { left:0;}
#image-next { right:0;}
#image-previous, #image-next {
    position: absolute;
    bottom: 0px;
    height: 100%;
    width: 35%;
    cursor: pointer;
    outline: none;
    z-index: 102;
    display: inline;
    opacity: 0.5;
    filter:alpha(opacity=50);
}
#image-previous:hover, #image-next:hover {
    opacity:1;
    filter:alpha(opacity=100);
}
.image-next-button, .image-previous-button {
    line-height: 100px;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    font-size:2em;
}
.image-next-button {
    right: 10px;
    margin-right:-50px;
}
.image-previous-button {
    left:10px;
}

.pages {
    font-size: 15px;
    display: inline;
    margin-right: 10px;
}

.pagination {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    background-color: white;
}
.pagination nav {
    display:inline-flex;
    position: relative;
}
.pagination a.page-selector,span.page-selector {
    display:inline-flex;
    position: relative;
    align-items:center;
    padding: 0.5rem;
    border: 1px solid;
    border-color: rgb(209 213 219);
}
.pagination a.page-selector:hover {
    text-decoration: none;
    background-color: lightgray;
}
.pagination a.page-previous {
    border-bottom-left-radius:.375rem;
    border-top-left-radius:.375rem;
}
.pagination a.page-next {
    border-bottom-right-radius:.375rem;
    border-top-right-radius:.375rem;
}
.pagination a.selected {
    color: rgb(79 70 229);
    background-color: rgb(238 242 255);
    border-color: rgb(99 102 241);
}

.next {
    display: inline;
}
.item-separator {
    border-bottom: 5px solid var(--body-backgroud-color);
    margin-left: -15px;
    margin-right: -15px;
}
#news-list-container .news-container {
    margin-bottom: 10px;
}
#news-list-container .news-title {
  text-transform: uppercase;
  font-size: +2em;
  font-weight: bold;
}
#news-list-container .news-subtitle {
  margin-bottom: 5px;
  color:#a0a0a0;
}
#news-list-container .news-author {
  font-weight: bold;
}
#news-list-container .news-tag {
  font-style:italic;
}
#news-list-container .news-content {
  text-align: justify;
  margin-bottom: 10px;
}
#news-list-container .news {
    margin-bottom: 5px;
    border-bottom: 1px dotted var(--border-color);
}
#news-list-container .news-content-more {
 text-align: right;
}
.news-main-pic {
  width: 100%;
  height: 100px;
  background-color: var(--news-background-color);
  margin-bottom: 10px;
  border-radius: 10px;
  overflow:hidden;
}
.news-content-allpic {
  padding: 5px;
  height: 75px;
  border: 1px solid var(--body-backgroud-color);
  overflow: hidden;
}
.news-thumbnail {
  width: 65px;
  height: 65px;
  float: left;
  background-color: var(--news-background-color);
  margin-left: 2px;
  margin-bottom: 2px;
}
.news-footer {
  clear: both;
  padding: 5px;
  background-color:var(--light-border-color);
  text-transform: uppercase;
  font-size: 0.8em;
}

.news_title {
    font-weight: bold;
    margin-bottom: 3px;
}

.news_body {
    margin-bottom: 5px;
    overflow: hidden;
}

.news_body ul {
    padding-left: 2em;
}

.news_body table { /* used to hide table on the portal */
    visibility: collapse;
}

.news_footer {
    margin-bottom: -3px;
    text-align: right;
}

.news_comment {
    float: left;
    text-align: left;
}

.news_info {
    display: none;
}

.news_more {
    float: left;
}

.cat_Filter {
    border: 1px solid var(--border-color);
    padding: 3 3 3 3;
    font-size: 14px;
}

#all_news_container .news {
    margin-top: 5px;
    margin-bottom: 2px;
}

#all_news_container .news .news_type {
    font: normal 10px/120% "Lucida Grande", "Trebuchet MS", Verdana, Arial,
        Helvetica, sans-serif;
    color: #4d6db3;
    margin-bottom: 5px;
}

#all_news_container .news_title {
    text-transform: uppercase;
    font-weight: bold;
    color: var(--title-color);
    font-size: 16px;
    margin-bottom: 3px;
}

#all_news_container .news_body {
    margin-bottom: 5px;
    overflow: hidden;
}

#all_news_container .news_footer {
    margin-bottom: -3px;
    text-align: right;
}

#all_news_container .news_comment {
    float: left;
    text-align: left;
}

#all_news_container .news_more {
    float: left;
}

.article_entry {
    padding: 5px;
    margin-left: 20px;
    margin-top: 5px;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--border-color);
}

.article_entry2 {
    padding: 5px;
    margin-left: 20px;
    margin-top: 5px;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--border-color);
}

/* used in news details */
#container_news_details {
    margin-right:340px;
}

.news_details {
    margin-bottom: 5px;
}

.news_details_title {
    margin-bottom: 1px;
}

h4.title {
    font-weight: bold;
    color: var(--title-color);
    font-size: 20px;
}

.news_details_info {
    clear: both;
    border-top: 2px solid var(--title-color);
    padding-top: 2px;
}

.news_details_published {
    float: right;
    margin: 1px 0px 5px 0px;
    font-size: 10px;
}

h4.category {
    color: #4d6db3;
    font-size: 10px;
    border-bottom: 1px #90afdd solid;
    margin: 1px 0px 5px 0px;
    text-align: left;
}

.news_details_body {
    clear: both;
    margin-bottom: 5px;
}

.news_details_body ul {
    padding-left: 2em;
}

.news_image_list {
    text-align: center;
}

.news_details_comment {
    float: left;
    text-align: left;
}

#prevnextcontainer {
    border-top: 1px dotted var(--border-color);
    margin-bottom: 30px;
}

#prev,#next {
    width: 250px;
}

#prev,#prev_title {
    float: left;
}

#next,#next_title {
    float: right;
}

#next_title {
    text-align: right;
}

#prev_img,#next_img {
    height: 30px;
    width: 20px;
}

#prev_img {
    background: url('ihm/previous.gif') center no-repeat;
    float: left;
}

#next_img {
    background: url('ihm/next.gif') center no-repeat;
    float: right;
}

#prev_title,#next_title {
    height: 30px;
    width: 200px;
    line-height: 30px;
    padding-right: 5px;
    padding-left: 5px;
    overflow: hidden;
}

.link_article_full {
    text-align: right;
}

#comments-container {
    border-top:1px dotted var(--border-color);
    padding:0 5px 5px 5px;
    background-color:var(--light-border-color);
    text-align:left;
    margin:10px 0 15px 0;
}
#comments {
    display: block;
    padding:0 15px;
}
#comment-help {
    background-color:#FFF7E5;
}
.comment-help-code {
    background-color:#F3EED5;
}
.comment-preview-container {
    background-color:#FFFFFF;
    height:100%;
}
#comments .comment,ul .comment {
    border-top: 1px solid #DDDDDD;
    display: block;
    position: relative;
    min-height: 75px;
    *height: 75px;
    text-align: left;
}
#comments .comment .avatar {
    left: 0;
    position: absolute;
    top: 8px;
}
#comments .comment img {
    max-width:100%;
}
#comments .comment .avatar img {
    border-radius: 3px 3px 3px 3px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.44);
    transition: all 0.4s linear 0s;
    margin-left: 3px;
}
#comments .comment .avatar a:hover img {
    opacity: 0.77;
    filter: alpha(opacity = 77);
}
#comments .comment .comment-content {
    padding: 8px 3px 12px 70px;
}
#comments .comment .comment-content .comment-rate-positive {
    color: #2C9801;
    margin-right: 3px;
}
#comments .comment .comment-content .comment-rate-negative {
    color: #CB4700;
    margin-left: 3px;
}
#comments .comment .comment-content .comment-header {
    display: block;
    font-size: 1.3em;
    margin-bottom: 8px;
}
#comments .comment .comment-content .comment-header .pubdate {
    color: #777777;
}
#comments .comment .comment-content .comment-header .comment-author {
    font-weight: bold;
}
#comments .comment .comment-content .comment-rate {
    float: right;
}
#comments .comment .comment-content .comment-rate em {
    font-weight: bold;
    float: left;
    line-height: 20px;
    font-size: 1.3em;
}
.comment-sprite_img {
    display: block;
    float: left;
    width: 22px;
    height: 20px;
    margin: 0 2px;
}
.comment-sprite_img:hover {
    background-color: var(--title-color);
}
.thumb_up {
    background-image: url("ihm/icons/thumbs_up.png");
    background-repeat: no-repeat;
}
.thumb_down {
    background-image: url("ihm/icons/thumbs_down.png");
    background-repeat: no-repeat;
}
.staff {
    text-transform: uppercase;
    z-index: 100;
    color: var(--danger-color);
    font-weight: bold;
    text-align: right;
    margin-top: -2px;
}
.moderate {
    background-image: url("ihm/moderate-bg.png");
    background-repeat: fill;
}
.comment-hide {
    display: none;
}
.comment-warning {
    color: light-grey;
}
.comment-show {
    font-style: italic;
}
.comment-show hover {
    text-decoration: underline;
}
.comment-commands {
    text-align: left;
}
.comment-single-attachment {
    margin-bottom:15px;
}
.comment-single-attachment > img {
    width:100%;
}
.comment-single-attachment > span {
    display:inline-block;
    width:100%;
    text-align:center;
    margin-top:15px;
    font-size:1.2em;
    text-decoration:underline;
}
.textarea-wrapper {
    position:relative;
    border: 1px solid var(--body-backgroud-color);
    height:100%;
}
.comment-cmd-bar {
    position: absolute;
    top:0;
    border-bottom: 1px solid var(--body-backgroud-color);
    z-index: 100;
    width:100%;
}
.comment-cmd-row {
    margin:5px;
    height:20px;
}
.comment-cmd-button {
    position:relative;
    float:left;
    border:0;
    background-color:var(--content-background-color);
    padding:4px;
}
.comment-text {
    width:100%;
    border:0;
    border-top:30px solid transparent;
}
div.quote {
    clear: both;
}
div.quote .quote-avatar {
    float:left;
    margin-right:10px;
    background-image:url(./ihm/border.png);
}
div.quote .text {
    float:none !important;;
}
blockquote.comment {
    margin-left: 0;
    margin-right: 0;
    padding: 12px;
    background-color: var(--body-backgroud-color);
    border-left: 5px solid #cfcfcf;
    overflow: hidden;
    font-size: 14px;
}
#comment-images-container>img,
#news-images-container>img {
    margin:5px;
}
.editButton,.deleteButton {
    height: 33px;
    float: left;
    margin-top: 2px;
    margin-left: 5px;
    margin-bottom: -15px;
    text-align: left;
}
.addComments {
    border-top: 2px ridge var(--border-color);
    text-align: left;
    padding-top: 10px;
    font-size: 24px;
}
.comment-remove-attachment,
.discourse-remove-attachment,
.news-remove-image {
    display: block;
    margin: 5px auto 0 auto;
}
#container-news-navbar {
    width: 325px;
    position:absolute;
    top:0px;
    right:10px;
    bottom:20px;
    background-color:#F8F9FA;
    overflow: hidden;
}
#news-navbar {
    padding: 10px 10px 10px 10px;
    margin-left: 10px;
    margin-bottom: 20px;
    margin-top: 15px;
}
#news-navbar .news-navbar-title {
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 5px;
    padding-bottom: 2px;
    border-bottom: 2px dotted var(--border-color);
}
.ul-news-navbar-content {
    list-style: none;
    list-style-image: none;
    padding:0;
}
.li-news-navbar-entry, .li-news-navbar-active-entry {
    padding-left: 5px;
    margin-bottom: 5px;
}
.li-news-navbar-entry {
    display: block;
    border: 1px solid var(--content-background-color);
}
.li-news-navbar-entry a {
    display: block;
}
.li-news-navbar-entry:hover {
    display: block;
    background-color: var(--border-color);
    border: 1px solid var(--dark-border-color);
}
.li-news-navbar-active-entry {
    display: block;
    background-color: var(--dark-border-color);
    border: 1px solid var(--border-color);
    color: var(--content-background-color);
}

#container_news_navbar {
    width: 18%;
    float: left;
    text-align: center;
    margin:10px 0 10px 0;
}
#news_navbar {
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
}
#news_navbar .news_navbar_title {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 5px;
    padding-bottom: 2px;
    border-bottom: 2px dotted var(--border-color);
}
.ul_news_navbar_content {
    list-style: none; 
    list-style-image: none; 
    padding:0px;
}
.li_news_navbar_entry {					
    display: block;
    margin-bottom: 3px;
}
.li_news_navbar_entry a {
    display: block;
    border: 1px solid var(--content-background-color);
}
.li_news_navbar_entry a:hover {
    display: block;
    background-color: var(--border-color);
    border: 1px solid var(--dark-border-color);
}
.li_news_navbar_active_entry {
    display: block;
    margin-bottom: 3px;
    background-color: var(--dark-border-color);
    border: 1px solid var(--border-color);
    color: var(--content-background-color);
}

#articles {
    width: 47%;
    margin-right: -20px;
    float: left;
    text-align: justify;
}

.article_properties {
    border: 2px solid var(--border-color);
    margin: 10px;
    padding: 5px;
}

.article_title {
    font: normal 20px/120% "Lucida Grande", "Trebuchet MS", Verdana, Arial,
        Helvetica, sans-serif;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
}

.block {
    border: 1px solid var(--border-color);
    padding: 5px;
    margin-bottom: 10px;
}

.block ul,table ul {
    padding-left: 2em;
}

.edited_block {
    border: 2px solid var(--danger-color);
    padding: 5px;
    margin-bottom: 10px;
}

.editBlock {
    margin-top: -10px;
    margin-bottom: 20px;
}

.block-images {
    border: 1px solid var(--border-color);
    text-align: center;
    padding: 5px;
    margin-bottom: 10px;
}

.block-thumbnail {
    border: 1px solid var(--border-color);
    text-align: center;
    margin-bottom: 10px;
}

.block-thumbnail a img {
    padding: 5px;
}

.two_column_block {
    border: 1px solid var(--border-color);
    padding: 1em;
    margin-bottom: 10px;
}

.left {
    border-right: 1 px dotted var(--border-color);
}

.two_column_block table {
    font: normal 13px/120% "Lucida Grande", "Trebuchet MS", Verdana, Arial,
        Helvetica, sans-serif;
}

#container {
    width: 51%;
    margin-right: -20px;
    margin-left: 10px;
    padding-left: 10px;
    float: left;
    border-left: 1px solid var(--border-color);
    font: normal 11px/120% "Lucida Grande", "Trebuchet MS", Verdana, Arial,
        Helvetica, sans-serif;
}

#galeries {
    clear: both;
    color: var(--main-forecolor);
}

.galerie {
    margin-bottom: 5px;
    clear: both;
}

.last_galerie {
    clear: both;
}

.gal_title {
    font-weight: bold;
    margin-bottom: 3px;
    text-transform: uppercase;
}

.portal_gal_title {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

.gal_controller {
    float: right;
}

.gal_body {
    clear: both;
}

.gal_image {
    float: left;
    margin-right: 10px;
}
.gal_description {
    float: left;
    margin-left: 10px;
}
.gal-description {
    float: none !important;
}
.gal_footer {
    clear: both;
}
.gal-footer {
    clear: both;
    border-bottom: 5px solid var(--body-backgroud-color);
    margin-left: -15px;
    margin-right: -15px;
}

.gal_thumb {
    float: left;
    width: 90px;
    height: 70px;
    margin-top: 10px;
    margin-right: 22px;
}

.gal_nbcom {
    position:absolute;
    bottom:0px;
    right:5px;
    padding-bottom: 6px;
}

.gal_comment {
    font-size: 10px;
}

.gal_info {
    float: left;
    text-align: right;
}

.zeliste_container {
    padding: 5px;
    background-color: #bdd0ee;
    color: var(--main-forecolor);
}

.admin_container {
    margin-bottom: 10px;
}

.concours-container {
    text-align:center;
    margin-top:15px;
}
.concours_selected_participation {
    margin-top: 10px;
}
.concours_separator {
    border-top: 2px dotted var(--border-color);
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 15px;
}
.concours_line_month {
    text-align:center;
}
.concours-date {
    text-decoration:underline;
    font-weight:bold;
}
.participation_description {
    font-weight:bold;
    margin-top:5px;
    text-align:center;
}
div.podium {
    width:100%;
    padding:5px;
    text-align:center;
}
li.podium {
    background-repeat:no-repeat;
    background-position:right center;
    background-size:20px 40px;
}
div.participation {
    text-align:center;
}
img.participation {
    margin-top:15px;
    max-width:100%;
    height:auto;
}
img.participation-medal {
    position:absolute;
    bottom:10px;
    right:5px;
}
.votebutton {
    margin: 20px 5px;
    border: 2px solid var(--border-color);
    text-align: center;
}

#login-container
{
    min-height: 540px;
    margin-top: 50px;
}
#login-container .login-header
{
    margin:10px 10px 40px 10px;
}

.profile-gallery {
    margin-bottom:5px;
}

.page-navbar {
    clear: both;
    height: 34px;
    margin-bottom:10px;
}
#footer {
    clear: both;
    margin-top:10px;
    background-color: var(--border-color);
    font-size:0.8em;
    color: var(--footer-color);
    text-align: center;
    height: 14px;
}

.zl-footer {
    margin-top:40px;
    padding-top:40px;
    border-top:2px ridge var(--border-color);
}
.zl-footer-links {
    padding-left:0;
    margin:0;
    list-style: none;
}
.zl-footer-links li {
    display: inline-block;
    line-height: 16px;
}
.zl-footer-links>li>a {	
    padding: 10px 10px;
}
.zl-footer-icon {
    position: absolute;
    top: -28px;
    left: 50%;
    height: 50px;
    width: 50px;
    margin-left: -25px;
    font-size: 50px;
    color: var(--border-color);
}

#footer a:link,#footer a:visited {
    text-decoration: underline;
    color: var(--footer-color);
}

#footer a:hover,#footer a:active {
    color: var(----footer-link-hover-color);
}

a.btn {
    color: var(--content-background-color);
}

@media (max-width:1200px) {
    #container-news-navbar {
    display:none;
    }
    #container_news_details {
    margin-right:0px;
    }
}
@media only screen and (max-width:992px) {
    .portal-left-column {
    margin-right:-15px;
    margin-bottom:15px;
    }
    .portal-right-column {
    margin-left:-15px;
    }
}
@media (max-width:768px) {
    .zl-footer-icon {
        top:15px;
    }
}