html {
background-color: #EEE;
color: #111;
height:99%;
}
body {
font-family: sans-serif;
margin: 0;
height:99%;
}
header h1 {
padding: 1.34rem;
margin: auto;
color: #111111;
min-height:80px;
}
h2 {
color: #111111;
}
header {
text-align: center;
width:100%;
background-color: #ffe751;
}
#logos {
text-align:right;
}
.logo-bdc, .logo-fdc {
width:150px;
display:inline-block;
}
header #logos{
margin: 5px;
float: left;
height:100%;
}
header #logos a {
display:inline-block;
height:100%;
}
header #logos img {
height:100%;
}
h4{
color: #ffe751;
}
li h4{
color: #111111;
}
nav {
float:left;
width: 15%;
border: 1px solid #666;
border-left: 0;
background-color: #222;
color: #EEE;
}
nav h3 {
margin: 10px 0 10px 5px;
}
main {
width:100%;
overflow: hidden;
min-height: 70%;
display:inline-block;
}
#main {
width: calc(85% - 20px);
display: block;
margin-left: calc(15% + 20px);
}
h2 {
text-align: center;
}
ul {
list-style: none;
}
a, a:visited {
color: #333333;
text-decoration: underline;
cursor: pointer;
}
ul.event_program li {
background-color:#000;
}
nav li a, nav li a:visited {
color: white;
}
ul.event_program li.incontournable{
background-color: #74AED0;
}
ul.event_program li.jeune-public{
background-color: #d12f21;
}
ul.event_program li.ami-du-court{
background-color: #14a27c;
}
/* ul.event_program li.mouvement{
background-color: #6f4d9f;
}
ul.event_program li.unitaire{
background-color: #ea148b;
}
ul.event_program li.talents{
background-color: #ffe751;
};*/
ul.event_program li.ici-et-maintenant{
background-color: #f7b667;
}
ul.event_program li.art-et-essai{
background-color: #b3a2c7;
}
ul.event_program li.comedie{
background-color: #f7a500;
}
ul.event_program li.exclusifs-cinemas{
background-color: #000000;
}
li.talents > a{
color: #111111;
}
.event_program > li > span {
text-decoration: none;
padding: 7px 10px;
text-transform: uppercase;
font-weight: 600;
font-size: 18px;
display: inline-block;
width: calc(100% - 20px);
}
.event_program {
display: flex;
flex-direction: column;
}
.event_program > li {
position: relative;
min-height: 30px;
}
.event_program, .event_program ul{
padding: 0;
margin-bottom: 5px;
margin-top: 0;
}
.event_program ul {
display: none;
position: absolute;
background-color: #111111;
border: 1px solid #666;
top: 0;
left: 100%;
width: 75%;
}
.event_program > li:hover ul, .event_program > li:focus ul, .event_program > li:active ul {
display: block;
}
.event_program > li:hover ul li, .event_program > li:focus ul li, .event_program > li:active ul li{
border-bottom: 1px solid #666;
padding: 7px 5px;
}
.event_list{
display: flex;
padding: 0;
flex-wrap: wrap;
}
.event_item{
flex: 0 0 20%;
max-width: 20%;
border: 1px solid #363636;
box-shadow: 0 6px 8px -5px rgba(255,255,255, .15);
margin: 10px 5px;
padding: 10px;
border-radius: 5px;
}
.event_item a {
display: block;
width: 100%;
height: 100%;
}
.event_item .title {
font-size: 1.4em;
font-weight: bold;
display: block;
text-align: center;
margin-bottom: 5px;
}
.event_item .author {
font-size: 0.8em;
display: block;
text-align: right;
margin-top: 3px;
}
.event_item .location {
}
.event_item .start {
}
footer {
font-size: 0.65rem;
margin-top: 10px;
text-align: right;
margin-right: 5px;
}
footer span {
display: block;
}
footer a, footer a:visited {
text-decoration: underline;
color: #111;
}
.day_list li{
position: relative;
}
@media screen and (max-width: 640px) {
nav {
width: 100%;
position: relative;
}
#main {
margin: 0;
width: 100%;
}
main ul {
margin: 0;
padding: 0;
}
main ul .day_item {
padding: 0 10px;
}
.event_list {
display: block;
}
.event_item {
margin: 10px auto;
max-width: 100%;
}
.event_program ul {
position: relative;
width: 100%;
margin: 0;
border-bottom: 0;
left: 0;
}
}
a.unfliter{
display:block;
color: #888;
border: 1px solid #888;
}
a.unfilter:visited {
color: #888;
}
.more {
display: none;
}