@import url('https://fonts.googleapis.com/css?family=Handlee|Lato');

/* 
 *   Couleur : #318CE7 
 * 
 * https://color.adobe.com/fr/create/color-wheel/?base=2&rule=Shades&selected=2&name=Mon%20th%C3%A8me%20Color&mode=rgb&rgbvalues=0.13912655971479504,0.3975044563278683,0.6558823529411765,0.08609625668449199,0.24598930481276154,0.40588235294117647,0.19215686274509805,0.5490196078431373,0.9058823529411765,0.2027629233511587,0.5793226381459964,0.9558823529411765,0.17094474153297687,0.48841354723693237,0.8058823529411765&swatchOrder=0,1,2,3,4
 *
 *  Nuances (clair au foncé): 
 *    * #3494F4
 *    * #2C7DCD
 *    * #2365A7
 *    * #163F67
 *
 *  Complémentaires :
 *    * #E7A331
 *    * #9A6202
 *    * #50A7FF
 *    * #11569A
 *
 */

* {
font-family: 'Handlee', cursive;
}

body {
  background-color: #99AFC5;
  padding: 0px;
  margin: 0px;
}

a, 
a:visited {
  color: #E7A331;
  text-decoration: none;
}

a:hover {
  color: #946202;
}

h1 {
  color: #A3B414;
}


h2 {
  color: #EAAB6C;
}

img {
  background: white;
  padding: 2ex;
  -moz-box-shadow: 0px 0px 20px 5px #163F67;
  -webkit-box-shadow: 0px 0px 20px 5px #163F67;
  -o-box-shadow: 0px 0px 20px 5px #163F67;
  box-shadow: 0px 0px 20px 5px #163F67;
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#163F67, Direction=NaN, Strength=20);
}



/*
 * En-tête
 */
#header {
  background: url('http://charlotte-et-aurelien.ap2c.org/images/charlotte.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;


  position: fixed;
  top: 0px;
  z-index: -1;
  color: white;
  padding: 1em 3em;
  font-style: italic;

  width: 100%;
  height: 90%;
}

#header h1 {
  position: fixed;
  top: 0px;
  /*color: white;*/
  text-shadow: 0 0 2px rgba(0,0,0,0.5);
  color: #EB5449;
}

#header strong {
  /*color: #11569A;*/
}

#header em {
  /*color: #EB5449;*/
}



/*
 * Pied de page
 */
#footer {
  position: fixed;
  width: 100%;
  bottom: 0;
  background-color: #274B6E;
  margin: 0px;
  text-align: center;
  color: #99AFC5;
  font-size: 85%;
  padding: 4ex;
}

#footer p {
  margin: 0px;
}



/*
 * Menu
 */
#menu {
  background-color: #163F67;
  display: block;
  text-align: center;
  padding: 3ex 0ex;
}

#menu ul {
  padding: 0px;
}

#menu ul > li {
  display: inline-block;
}

#menu a, 
#menu a:visited {
  font-weight: bold;
  font-size: 120%;
  margin: 0ex 1.1em;
}

@media screen and (max-width: 600px) {
  #menu a,
  #menu a:visited {
    font-size: 100%;
    margin: 0ex 0.5em;
  }
}


/*
 * Home
 */
#main {
  position: absolute;
  width: 100%;
  top: 90%;
  z-index: 1;
  /*margin-top: 670px;*/
  margin-bottom: 10ex;
}

#pageInfoToolbar {
  /*background-color: #99AFC5;*/
  /*color: #274B6E;*/
  display: none;
}

#principal {
  display: block;
  color: #274B6E;
}

div.block {
  padding: 2ex;
  padding-bottom: 6em;
  z-index: 1;
}


div.pictures {
  margin-top: 6em;
  text-align: center;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  background-color: #062F57;
  -moz-box-shadow: 0px 0px 20px 10px #163F67;
  -webkit-box-shadow: 0px 0px 20px 10px #163F67;
  -o-box-shadow: 0px 0px 20px 10px #163F67;
  box-shadow: 0px 0px 20px 10px #163F67;
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#163F67, Direction=NaN, Strength=20);
}

@media screen and (max-width: 600px) {
  div.pictures {
    width: 90%;
  }
  img {
    padding: 0.5ex;
  }
}

div.pictures p {
  padding: 0px;
  margin: 0px;
}

div.pictures img {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#163F67, Direction=NaN, Strength=0);
  background-color: #062F57;
  max-width: 70%;
  /*padding: 1.5%;*/
  height: auto;
  margin: 0px;
}


div.zeroBlock {
  background-color: #135597;
  color: #C8D8E4;
}

div.firstBlock {
  background-color: #2365A7;
  color: #C8D8E4;
}

div.secondBlock {
  background: #2C7DCD;
  color: #C8D8E4;
}

div.thirdBlock {
  background: #318CE7;
  color: #C8D8E4;
}



/*
 * Style pour les véhicules
 */

div.vehicle-list {
  text-align: center;
}

div.vehicle-icon {
  display: inline-block;
  max-width: 35ex;
  margin-left: 2ex;
  margin-right: 2ex;
  vertical-align: top;
}

div.vehicle-icon p {
  text-align: center;
}

div.vehicle-icon img {
  max-width: 100%;
  height: auto;
  padding: 0px;
}

div.vehicle-history {
  background-color: #2365A7;
  color: #C8D8E4;
  padding: 2ex;
  z-index: 1;
}

div.vehicle-history p.vehicule-image {
  text-align: center;
}
div.vehicle-history p.vehicule-image img {
  max-width: 95%;
  height: auto;
}


div.vehicle-data {
  width: 75%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  border-style: solid;
  border-width: 25px 58px 27px 61px;
  -moz-border-image: url("http://charlotte-et-aurelien.ap2c.org/images/fond-vehicule.png") 25 58 27 61 repeat round;
  -webkit-border-image: url("http://charlotte-et-aurelien.ap2c.org/images/fond-vehicule.png") 25 58 27 61 repeat round;
  -o-border-image: url("http://charlotte-et-aurelien.ap2c.org/images/fond-vehicule.png") 25 58 27 61 repeat round;
  border-image: url("http://charlotte-et-aurelien.ap2c.org/images/fond-vehicule.png") 25 58 27 61 fill repeat round;
}

div.vehicle-data p.vehicle-data-title {
  height: 8ex;
  text-align: right;
  padding-right: 5ex;
  background: url("http://charlotte-et-aurelien.ap2c.org/images/Givenchy_art.png");
  background-size: auto 8ex;
  background-repeat: no-repeat;
  background-position: 2ex 0px;
  padding-top: 2ex;
  font-size: 18pt;
  font-weight: bold;
  color: #555;
  font-family: monospace;
}

p.vehicle-data-id,
p.vehicle-data-lastName,
p.vehicle-data-firstName,
p.vehicle-data-table,
p.vehicle-data-position,
p.vehicle-data-date {
  color: #555;
  font-family: monospace;
  font-size: 120%;
}

p.vehicle-data-id strong,
p.vehicle-data-lastName strong,
p.vehicle-data-firstName strong,
p.vehicle-data-table strong,
p.vehicle-data-position strong,
p.vehicle-data-date strong {
  font-family: monospace;
}

div.vehicle-data p.vehicle-data-title img {
  width: 15ex;
  height: auto;
  border: none;
  background: none;
  vertical-align: middle;
  margin-right: 20ex;
}

@media screen and (max-width: 800px) {
  div.vehicle-icon {
    max-width: 25ex;
  }
  div.vehicle-data {
    width: 65%;
  }
  p.vehicle-data-id,
  p.vehicle-data-lastName,
  p.vehicle-data-firstName,
  p.vehicle-data-table,
  p.vehicle-data-position,
  p.vehicle-data-date {
    font-size: 110%;
  }

  div.vehicle-data p.vehicle-data-title {
    height: 5.5ex;
    padding-top: 10ex;
    text-align: center;
    padding-right: 0px;
  }

}





iframe {
  vertical-align: middle;
  padding-left: 2%;
  max-width: 95%;
}

p.eglise, 
p.chateau {
  display: inline-block;
  margin-left: 7%;
  vertical-align: middle;
}

img.eglise,
img.chateau {
  max-width: 95%;
  width: 400px;
  height: auto;
}


/* Table */
table {
    border-collapse: collapse;
    width: 100%;
    /*color: #303030;*/
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even){
  background-color: #CBD8E4;
  background-color: #354E67;
}
tr:nth-child(odd){
  background-color: #99AFC5;
  background-color: #163F67;
}

th {
  background-color: #274B6E;
  color: #CBD8E4;
  background-color: #266DB4;
}

td[colspan] {
  background-color: #274B6E;
  color: #99AFC5;
  /*background-color: #99AFC5;*/
  text-align: center;
  font-weight: bold;
  background-color: #78B2EB;
  color: #163F67;
}