/**
 * EDS - Fichier CSS dédié aux JUNIORS pages CONTENU (nodes).
 * Chargé dans le template.tpl.php
 *
 * @file
 */

/**
 * COMMUN
 */

body.page-node.juniors h1#page-title { padding-bottom: 20px; }
body.page-node.juniors .node > .content { position: relative; }

/*** CRÉDITS ***/

body.page-node.juniors .credits {
  position: absolute;
  right: 0; bottom: 25px;
  font-size: .95em;
  font-style: italic;
  color: #ababab;
}
body.page-node.juniors.tags .credits { bottom: 0; }

/*** SERVICE LINKS ***/

body.page-node.juniors a.service-links-facebook {
  background: url('../../images/juniors/social/facebook.png') no-repeat;
  background: url('../../images/juniors/social/facebook.svg') no-repeat;
}
body.page-node.juniors a.service-links-twitter {
  background: url('../../images/juniors/social/twitter.png') no-repeat;
  background: url('../../images/juniors/social/twitter.svg') no-repeat;
}
body.page-node.juniors a.service-links-google-plus {
  background: url('../../images/juniors/social/google-plus.png') no-repeat;
  background: url('../../images/juniors/social/google-plus.svg') no-repeat;
}
body.page-node.juniors a.service-links-forward {
  background: url('../../images/juniors/social/mail.png') no-repeat;
  background: url('../../images/juniors/social/mail.svg') no-repeat;
}

/*** BORDER BOTTOM ***/

body.page-node.juniors .border-bottom { border-bottom-color: #f75817; }

/*** MOTS CLÉS ***/

body.page-node.juniors .field-name-field-tags .field-label { color: #f75817; }

/*** COMMENTAIRES ***/

a.comments-button {
  background-image: url('../../images/juniors/commentaires.png');
  background-image: url('../../images/juniors/commentaires.svg');
}
#comments h2, #comments .comment-form .form-actions input { background-color: #f75817; }
#comments h2:hover,
#comments .comment-form .form-actions input:hover { background-color: #f76a2e; }
#comments article h3, #comments article .submitted, #comments article .links li a { color: #f75817; }
#comments article .links li a {
  background: url('../../images/juniors/fleche-puce.png') left top no-repeat;
  background: url('../../images/juniors/fleche-puce.svg') left .25em no-repeat;
}

/*** NODE PAGER ***/

body.page-node.juniors .node-nav a .label { color: #f75817; }
body.page-node.juniors .node-nav .all a { background-color: #f75817; }
body.page-node.juniors .node-nav .all a:hover { background-color: #f76a2e; }
body.page-node.juniors .node-nav .prev .label {
  background-image: url('../../images/juniors/fleche-puce-prev.png');
}
body.page-node.juniors .node-nav .next .label {
  background-image: url('../../images/juniors/fleche-puce.png');
  background-image: url('../../images/juniors/fleche-puce.svg');
}

/**
 * EXPÉRIENCES
 */

/*** TOP LEFT ***/

body.page-node.juniors.experiences .group-media { margin-bottom: 10px; }
body.page-node.juniors.experiences .field-name-field-2-juniors-exp-sstitre {
  padding: 0 20px;
  font-family: 'Helvetica Neue bold', Helvetica, Arial, sans-serif;
  font-size: 1.5em;
  color: #f75817;
}
body.page-node.juniors.experiences .group-top-right {
  padding: 75px 20px 20px 20px;
  height: 384px;
  background: #f2f1f0 url('../../images/juniors/infos.png') 20px 30px no-repeat;
  background: #f2f1f0 url('../../images/juniors/infos.svg') 20px 30px no-repeat;
  -webkit-box-shadow: 15px 0 20px -15px rgba(0,0,0,0.3), -15px 0 20px -15px rgba(0,0,0,0.3);
  box-shadow: 15px 0 20px -15px rgba(0,0,0,0.3), -15px 0 20px -15px rgba(0,0,0,0.3);
}
body.page-node.juniors.experiences .field-name-field-2-juniors-exp-materiel { margin-bottom: 1em; }
body.page-node.juniors.experiences .field-name-field-2-juniors-exp-materiel .field-label {
  margin-bottom: .6em;
  font-size: 1.3em;
}
body.page-node.juniors.experiences .field-name-field-2-juniors-exp-materiel ul { margin: 0; }
body.page-node.juniors.experiences .field-name-field-2-juniors-exp-materiel ul li {
  margin-bottom: .5em;
  font-size: .95em;
}
body.page-node.juniors.experiences .field-name-field-2-juniors-exp-adulte {
  padding-top: 1.5em;
  border-top: 2px solid #f75817;
  font-family: 'Helvetica Neue bold', Helvetica, Arial, sans-serif;
  font-size: .95em;
  color: #f75817;
}

/*** CASES ***/

body.page-node.juniors .group-cases { margin-bottom: 40px; }
body.page-node.juniors.experiences .group-case {
  float: left;
  margin-right: 2.13%;
  width: 31.91%;
}
body.page-node.juniors.experiences .group-case-3 { margin-right: 0; }
body.page-node.juniors.experiences .group-case .field-type-image .field-label {
  text-align: center;
  font-family: 'Glober semibold', Helvetica, Arial, sans-serif;
  font-size: 7em;
  color: #e9e9e9;
}
body.page-node.juniors.experiences .group-case .field-type-text-long {
  padding: 0 1.3em;
  line-height: 1.5;
}

/*** COMMENT ***/

body.page-node.juniors.experiences .field-name-field-2-juniors-exp-comment {
  margin-bottom: 70px;
  padding: 1.3em 1.3em 0 1.3em;
  background-color: #f2f1f0;
}
body.page-node.juniors.experiences .field-name-field-2-juniors-exp-comment .field-label {
  margin-bottom: .5em;
  font-family: 'Helvetica Neue bold', Helvetica, Arial, sans-serif;
  font-size: 1.5em;
  color: #f75817;
}
body.page-node.juniors.experiences .field-name-field-2-juniors-exp-comment .field-item {
  line-height: 1.5;
}

/**
 * GRANDES QUESTIONS
 */

body.page-node.juniors.questions .group-top {
  position: relative;
  background-color: #fff;
  -webkit-box-shadow: 15px 0 20px -15px rgba(0,0,0,0.3), -15px 0 20px -15px rgba(0,0,0,0.3);
  box-shadow: 15px 0 20px -15px rgba(0,0,0,0.3), -15px 0 20px -15px rgba(0,0,0,0.3);
}
body.page-node.juniors.questions .field-name-field-2-juniors-questions-img1 {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 100;
}
body.page-node.juniors.questions .group-cases { margin-bottom: 70px; }
body.page-node.juniors.questions .group-case {
  float: left;
  padding: 0 1.3em;
  width: 50%;
}
body.page-node.juniors.questions .group-case .field-type-text {
  margin-bottom: .5em;
  font-family: 'Helvetica Neue bold', Helvetica, Arial, sans-serif;
  font-size: 1.5em;
  color: #f75817;
}
body.page-node.juniors.questions .group-case .field-type-text-long { line-height: 1.5; }

/**
 * ANIMAUX
 */

body.page-node.juniors.animaux .group-top {
  margin-bottom: 0;
  padding: 30px 30px 0 30px;
  height: 350px;
  background-color: #fff;
  -webkit-box-shadow: 15px 0 20px -15px rgba(0,0,0,0.3), -15px 0 20px -15px rgba(0,0,0,0.3);
  box-shadow: 15px 0 20px -15px rgba(0,0,0,0.3), -15px 0 20px -15px rgba(0,0,0,0.3);
  padding-right: 20px;
  font-family: 'Trebuchet bold', Helvetica, Arial, sans-serif;
  font-style: italic;
  font-size: 1.5em;
}
body.page-node.juniors.animaux .group-cases-top { margin-bottom: 20px; }
body.page-node.juniors.animaux .group-case { float: left; margin-right: 2.13%; width: 31.91%; }
body.page-node.juniors.animaux .group-case-2,
body.page-node.juniors.animaux .group-case-4 { margin-right: 0; }
body.page-node.juniors.animaux .group-case .field-type-image { margin-bottom: 20px; }
body.page-node.juniors.animaux .group-case .field-type-text {
  margin-bottom: .5em;
  padding: 0 20px;
  font-family: 'Helvetica Neue bold', Helvetica, Arial, sans-serif;
  font-size: 1.5em;
  color: #f75817;
}
body.page-node.juniors.animaux .group-case .field-type-text-long {
  padding: 0 1.3em;
  line-height: 1.5;
}
body.page-node.juniors.animaux .field-name-field-2-juniors-animaux-texte3 { margin-bottom: 20px; }

/**
 * ILLUSIONS D'OPTIQUE
 */

body.page-node.juniors.illusions-optique .group-media {
  width: 100%;
  background-color: #fff;
  -webkit-box-shadow: 15px 0 20px -15px rgba(0,0,0,0.3), -15px 0 20px -15px rgba(0,0,0,0.3);
  box-shadow: 15px 0 20px -15px rgba(0,0,0,0.3), -15px 0 20px -15px rgba(0,0,0,0.3);
  text-align: center;
}
body.page-node.juniors.illusions-optique .group-media .field-type-image { display: inline-block; }
body.page-node.juniors .field-name-field-2-juniors-illusions-sstitr {
  padding: 0 20px;
  font-family: 'Helvetica Neue bold', Helvetica, Arial, sans-serif;
  font-size: 1.5em;
  color: #f75817;
}

/*** CASES ***/

body.page-node.juniors.illusions-optique .group-case {
  float: left;
  margin-right: 2.13%;
  width: 31.91%;
}
body.page-node.juniors.illusions-optique .group-case-3 { margin-right: 0; }
body.page-node.juniors.illusions-optique .group-case .field-label {
  text-align: center;
  font-family: 'Glober semibold', Helvetica, Arial, sans-serif;
  font-size: 7em;
  color: #e9e9e9;
}
body.page-node.juniors.illusions-optique .group-case .field-type-text-long {
  padding: 0 1.3em;
  line-height: 1.5;
}

/*** COMMENT ***/

body.page-node.juniors .field-name-field-2-juniors-illusions-image2 {
  float: left;
  margin-right: 20px;
}
body.page-node.juniors.illusions-optique .group-ccm { margin-bottom: 70px; }
body.page-node.juniors .field-name-field-2-juniors-illusions-ccm {
  padding: 1.3em;
  overflow: hidden;
  background-color: #f2f1f0;
}
body.page-node.juniors .field-name-field-2-juniors-illusions-ccm .field-label {
  margin-bottom: .5em;
  font-family: 'Helvetica Neue bold', Helvetica, Arial, sans-serif;
  font-size: 1.5em;
  color: #f75817;
}
body.page-node.juniors .field-name-field-2-juniors-illusions-ccm .field-item { line-height: 1.5; }

/**
 * RESPONSIVE
 */

/*--------- <= 980px ---------*/

@media only screen and (max-width: 980px) {

  #main {
    margin-left: 3% !important;
    margin-right: 3% !important;
    width: 94% !important;
  }
  .backlink { margin-left: 0 !important; }
  h1#page-title,
  .node-full footer { padding-left: 0 !important; padding-right: 0 !important; }
  body.page-node.juniors.experiences .group-case img,
  body.page-node.juniors.animaux .group-case .field-type-image img,
  .group-media img { width: 100% !important; height: auto !important; }
  .service-links { padding-left: 0 !important; padding-right: 0 !important; }
  body.page-node.questions .field-name-field-2-juniors-questions-img1 { display: none; }

}

/*--------- <= 820px ---------*/

@media only screen and (max-width: 820px) {

  .credits { position: static !important; }

}

/*--------- <= 680px ---------*/

@media only screen and (max-width: 680px) {

  .group-top-right { height: auto !important; }
  body.page-node.juniors.illusions-optique .group-media { padding-bottom: 30px; }

}

/*--------- <= 580px ---------*/

@media only screen and (max-width: 580px) {

  body.page-node.juniors.questions .group-media { padding-bottom: 40px; }
  body.page-node.juniors.illusions-optique .group-media { padding-bottom: 60px; }

}

/*--------- <= 480px ---------*/

@media only screen and (max-width: 480px) {  /* eq. 384px */

  body.page-node.juniors.experiences .group-top { background-color: #fff; }
  body.page-node.juniors.experiences .group-media { padding-bottom: 60px; }
  body.page-node.juniors.questions .group-media,
  body.page-node.juniors.illusions-optique .group-media { padding-bottom: 110px; }
  body.page-node.juniors.experiences .group-case,
  body.page-node.juniors.questions .group-case,
  body.page-node.juniors.illusions-optique .group-case,
  body.page-node.juniors.animaux .group-case { float: none ; width: 100%; }
  body.page-node.juniors.questions .group-case-1,
  body.page-node.juniors.questions .group-case-2 { margin-top: 30px; }
  body.page-node.juniors.experiences .group-case .field-item { margin-top: 0 !important; }
  body.page-node.juniors.animaux .group-case .field-type-text,
  body.page-node.juniors.animaux .group-case .field-type-text-long { padding: 0; }

}