/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/* light reset */
* {
    margin: 0;
    padding: 0;
    list-style-type: disc;
    font-size: 100%;
}

/* global style */
html, body {
    height: 100%;
}

body {
    background-color: #37455b;
    background-color: #fcfcfc;
    color: #37455b;
    font-family: liberation_sansregular, Liberation Sans, sans-serif;
    font-size: 17px;
}

/* titles */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: liberation_sansregular, Liberation Sans, sans-serif;
    color: #95b71e;
    line-height: 1.2;
}

h1,
h2,
h3 {
    font-weight: normal;
}

h1 {
    font-size: 1.8em;
    line-height: 1.1;
    margin-bottom: 20px;
    margin-top: 20px;
}

h2 {
    font-size: 1.4em;
    margin-bottom: 0.3em;
    margin-top: 1em;
}

h3 {
    font-size: 1.2em;
    margin-bottom: 1em;
    margin-top: 1em;
}

h4 {
    margin-bottom: 1em;
    margin-top: 1em;
}

/* links*/
a {
    color: #84a11e;
    text-decoration: none;
    transition: color 0.1s linear;
}
a .fa {color: #37455b;}

a:hover,
a:focus,
a:hover .fa,
a:focus .fa {
    color: #99c303;
}

/* content elements */
p {
    color: #e2e9f6;
    color: #37455b;
    line-height: 1.2;
    margin-top: 1em;
}

ul li, ol li {
    list-style-position: inside;
}

code {
    display: inline-block;
    margin: 0.2em 0;
    padding: 0.2em;
    font-family: monospace, monospace;
    font-size: 0.85em;
    background: #485a74;
    color: #fff;
}
/* ::selection rules need to be splitted */)
code::-moz-selection {color: #485a74;background: #fff;}
code::selection {color: #485a74;background: #fff;}

b, strong {
    font-family: liberation_sansbold, Liberation Sans Bold;
    font-weight: normal;
}

em, i {
    font-family: liberation_sansitalic, Liberation Sans Italic;
    font-style: normal;
}

hr {
    height: 1px;
    margin-top: 1em;
    border: 0;
    border-top: 1px dotted #b4d931;
}

img {
    max-width: 100%;
    height: auto;
}

figcaption {
    font-style: oblique;
    text-align: center;
}


/********************************** LAYOUT **********************************/

/* section wrapper */
.inner {
    position: relative;
    margin: auto;
}

/* micro clearfix */
.cf::before, 
.cf::after,
.inner::before,
.inner::after {content: " ";display: table;}
.cf::after,
.inner::after {clear: both;}

@media screen and (min-width: 980px) {
    .inner {width: 980px;}
}
@media screen and (min-width: 1225px) {
    .inner {width: 80%;}
}

#content {
    padding: 20px;
}
    #main {}
    #aside {}

@media screen and (min-width: 980px) {
    #main {
        float: left;
        width: 75%;
        padding-right: 20px;
    }
    #aside {
        float: right;
        width: 25%;
        border-top: 0;
    }
}



/********************************** HEADER **********************************/
#branding {
    background: #fcfcfc;
    padding: 20px 0;
}

#logo,
#slogan {
    display: inline-block;
    vertical-align: middle;
    padding: 0 20px;
    margin: 10px 0;
}
#logo {
    width: 360px;
}
#logo img {
    border: none;
    width: 100%;
}

#slogan {
    margin: 12px 0 0 0; /* logo vertical alignement */
    font-size: 1.4em;
    line-height: 1.1;
    color: #37455b;
    font-family: liberation_sansregular, Liberation Sans, sans-serif;
    opacity: 0.7;
}
@media screen and (min-width: 980px) {
    #slogan {
        font-size: 1.8em;
    }
}



/********************* MENU *******************/
#navigation {
    background: #98b800;
    min-height: 40px;
    position: relative;
}

#navigation li {
    display: inline;
    list-style-type: none;
}

#navigation li a {
    display: block;
    line-height: 40px;
    color: #FFFFFF;
    text-decoration: none;
    padding: 0 20px;
    font-size: 1.1em;
    transition: background-color 0.1s linear;
}
@media screen and (min-width: 640px) {
    #navigation li a {
        display: inline-block;
    }
}

#navigation li a:hover,
#navigation li a:focus {
    background: #b1d201;
}

#navigation li.selected a {
    font-weight: bold;
    background: #b1d201;
}

@media screen and (max-width: 640px) {
    #navigation .nav {display: none;}
    #navigation::before,
    #navigation::after {
        display: block;
        line-height: 40px;
        color: #FFFFFF;
        padding: 0 20px;
        font-size: 1.1em;
        transition: color 0.1s linear;
    }
    #navigation::before {
        content: "Menu";
    }
    #navigation::after {
        position: absolute;
        top: 0;
        right: 0;
        content:'\2630';
    }
    #navigation.open .nav,
    #navigation:focus .nav,
    #navigation:hover .nav {display: block;}
    #navigation.open::before,
    #navigation.open::after,
    #navigation:focus::before,
    #navigation:focus::after,
    #navigation:hover::before,
    #navigation:hover::after {color: #b1d201;}
}



/********************************** FOOTER **********************************/
#footer {
    clear: both;
    margin: 20px 0 40px;
    border-top: 40px solid #98B800;
    font-size: smaller;
}
#footer .inner {
    padding: 20px;
}

#footer p {
    margin: 0;
    font-size: 13px;
}
#footer p + p {
    margin-top: 0.5em;
}
#footer p img {
    display: inline-block;
    vertical-align: middle;
}



/**********************************  MAIN CONTENT **********************************/

#main {}

/* classe node : colonne de contenu principale */
.node {}
.node:last-child {border-bottom: 0;}

.node img {
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: 100%;
    height: auto;
}
.node .legend-picto {
    margin: 0;
    display: inline-block;
}

.node--datepubli {
    font-family: liberation_sansregular, Liberation Sans, sans-serif;
    font-style: italic;
    font-size: smaller;
    opacity: 0.8;
}

/* external links */
#content a[href*="//"]:not([href*="faimaison.net"])::after {
    font: normal normal normal 10px/1.4 FontAwesome;
    content: "\f08e";
    display: inline-block;
    vertical-align: super;
    margin-left: 0.2em;
    color: #99C303;
}

/* map link (osm) */
#content a.map {
    display: block;
    text-align: center;
}

#content ol {
    margin: 0.5em 1em 0.5em 0;
    counter-reset: liste-num;
}

#content ol,
#content ol li {
    list-style-type: none;
}

#content ol li {
    counter-increment: liste-num;
}

#content ol li:before {
    content: counter(liste-num) '.\00a0';
    color: #84A11E;
}

#content ul {
    margin: 0.5em 1em 0.5em 0;
    list-style-image: url('/theme/images/puce-ul-1.png');
}

#content li {
    margin-bottom: 0.2em;
}

#content ul ul {
    margin-left: 1em;
}

.img-float {
    float: left;
    margin-right: 15px;
}

/** Table **/
.node  table {
    margin: 1em 0;
    border: 1px solid #eee;
    width: 100%;
    border-collapse: collapse;
}
.node  table thead {}
.node  table thead tr {
    background: #eee;
}
.node  table th {
    font-family: liberation_sansbold, Liberation Sans Bold;
    font-weight: normal;
}
.node  table th,
.node  table td {
    border-left: 1px solid #eee;
    padding: 0.5em;
    text-align: left;
}
.node  table tbody {}
.node  table tbody tr {}
.node  table td {}


/* annule l'effet du <p></p> créé par le plugin "file" de django-cms */
.plugin_file {
    display: inline;
}

/* footnotes */
.footnote-ref {
    font-size: 0.8em;
}
.footnote {
    margin-top: 40px;
}
.footnote ol li::before {
    line-height: 1.2;
    float: left;
}

.paginator {
    margin-top: 40px;
    padding-top: 0.5em;
    border-top: 1px solid #eee;
    font-size: 0.9rem;
}


.page-category {}

.page-category .category-rss-link {
    display: inline-block;
    vertical-align: baseline;
    font-size: 0.7em;
}
.page-category .category-rss-link .fa {color: #eee;transition: color 0.1s linear;}
.page-category .category-rss-link:hover .fa {color: #37455b;}

.page-category .node {}
.page-category .node + .node {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #eee;
}
.page-category .node .node--title {
    margin-top: 0;
}

/* Anchor links */
#main h2[id],
#main h3[id] {position: relative;}
#main h2[id] .anchor-link,
#main h3[id] .anchor-link {
  display: none;
  position: absolute;
  top: 0;
  left: -1em;
  width: 1em;
  text-decoration: none;
}
#main h2[id]:hover .anchor-link,
#main h3[id]:hover .anchor-link {
  display: block;
}

/* big warning */
.big-warning {
    line-height: 1.2;
    margin: 2em 0;
    border: 1px solid #95B71E;
    padding: 0.5em;
    text-align: center;
    font-style: italic;
    background-color: #95B71E;
    color: #fff;
    font-weight: bold;
}
.big-warning::before,
.big-warning::after {
    content: "⚠";
    display: inline-block;
}
.big-warning::before {float: left;}
.big-warning::after {float: right;}




/********************************** ASIDE **********************************/
#aside {
    margin-top: 40px;
    border-top: 1px solid #b1d201;
}
@media screen and (min-width: 980px) {
    #aside {
        margin-top: 0;
        padding-top: 60px;
        border-top: 0;
    }
}

#aside h3 {
    /*background: url(/theme/images/puce-h3-mini.png) 0 0.35em no-repeat;*/
    margin-top: 0;
    margin-left: 0;
}

#aside .col-right-item {
    color: #37455b;
    padding-top: 20px;
}
#aside .col-right-item + .col-right-item {
    margin-top: 20px;
    border-top: 1px solid #b1d201;
}
@media screen and (min-width: 980px) {
    #aside .col-right-item {
        border-left : 1px solid #b1d201;
        padding: 20px;
    }
    #aside .col-right-item + .col-right-item {
        border-top: 0;
    }
}

#aside .col-right-item div {
    margin-bottom: 20px;
}

#aside .col-right-item *:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

/* ? */
#aside img {
    display: block;
    margin: 0 auto;
}

/* sidebar meta (date) */
.sidebar-meta {
    display: block;    
}
@media screen and (min-width: 980px) {
    .sidebar-meta {
        font-style: italic;
        font-size: smaller;
        opacity: 0.8;
    }
}

.sidebar-meta i {
    display: inline-block;
    vertical-align: middle;
}


/* aside next meeting */
#next-meeting {}
#next-meeting ul {
    margin-top: 0;
}


/* aside ressources */
#aside #ressources ul {
    list-style: none;
}

#aside #ressources ul li {
    margin: 0;
    list-style: none;
}

#aside #ressources ul li a {
    text-decoration: none;
    color: #37455b;
    font-size:0.95em;
}
#aside #ressources ul li a:hover {
    color: #95b71e;
}



/********************************** HOME **********************************/
section.home {}
section.home + .home {margin-top: 40px;}

.home {}
.home > h2 {
    margin-bottom: 0.5em;
}
.home .all {
    text-align: right;
}

@media screen and (max-width: 639px) {
    .home .node-home + .node-home {
        border-top: 1px solid #eee;
        padding-top: 1em;
        margin-top: 1em;
    }
}
@media screen and (min-width: 640px) {
    .home .node-home {
        display:inline-block;
        vertical-align: top;
        border-bottom: 1px solid #eee;
        width: 46%;
        padding: 0 0.5%;
        margin-bottom: 1em;
        min-height: 6em;
        margin-right: 2%;
    }
    .home .all {
        margin-top: 0;
    }
    .home .all .fa {color: #84A11E;}
}

.home-edito {
    margin-top: 60px;
    margin-bottom: 20px;
    margin-right: 20px;
    padding: 20px;
    border: 1px solid #b1d201;
    background-color: #fefefe;
}
.home-edito p {margin-top: 0;}
.home-edito p + p {margin-top: 1em;}

.node-home h2 {
  margin-top: 0;
  font-size: 1em;
}
.node-home h2 a {color: #37455B;}
.node-home h2 a:focus,
.node-home h2 a:hover {color: #95B71E;}
.node-home .readmore {
  clear: both;
  display:block;
  text-align:right;
}
.node-home .node--date {
    margin-top: 0.5em;
    font-family: liberation_sansregular, Liberation Sans, sans-serif;
    font-style: italic;
    font-size: smaller;
    opacity: 0.8;
}
.node-home .node--date + p {margin-top: 0.5em;}





/********************************** PARTNERS **********************************/
.partners {}
#content .partners ul {
    margin: 1em 0;
}
.partners ul li {
    display: block;
    padding: 1em 0;
    font-size: 13px;
}
@media screen and (min-width: 980px) {
    .partners ul li {
        display: inline-block;
        vertical-align: top;
        width: 30%;
        padding: 0 2.5% 2em 0;
    }
}

.partners ul li a {
    font-size: 16px;
    display: block;
}
.partners ul li img {
    display: block;
    margin: 0 0 0.5em 0;
    max-height: 60px;
}



/********************************** SERVICES **********************************/
.services-list {
    display: flex;
    justify-content: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 25px 0 0 0;
}
.services-list + p {margin-top: 0;}
.services-list .service {
    border: 2px solid #95b71e;
    width: 100%;
    margin-bottom: 30px;
    padding: 25px 10px;
    text-align: center;
    cursor: pointer;
}
@media screen and (min-width: 340px) {
    .services-list .service {
        width: 48%;
    }
}
@media screen and (min-width: 640px) {
    .services-list .service {
        width: 30%;
    }
}
.services-list .service:hover {
    background: rgba(55, 69, 91, 0.1);
}
.services-list .service .fa {
    font-size: 3em;
    color: #95b71e;
    margin-bottom: 25px;
}
.services-list .service h3 {
    color: #37455b;
    font-size: 1.5em;
    margin: 0;
}
.services-list .service h3 a,
.services-list .service h3 a:link,
.services-list .service h3 a:visited {
    color: #37455b;
}
.services-list .service h3 small {
    display: block;
    font-size: 0.6em;
    opacity: 0.7;
}


/* 1 service page. common info. */
.node-page--services > footer {
    border-top: 1px solid #95b71e;
    margin-top: 50px;
    padding-top: 1em;
    max-width: 36em;
}
.node-page--services > footer p + p {margin-top: 2em;}

.services-common {
    color: #37455b;
    font-style: italic;
    opacity: 0.8;
}
.services-common a {
    color: #37455b;
    text-decoration: underline;
}
.services-common a:hover,
.services-common a:focus {
    color: #95b71e;
}

.services-return a .fa {color: #95b71e;}