﻿body {
   font-family: 'Open Sans', sans-serif;
   color: #333;
   font-size: 14px;
}


a, .ms-link:visited {
   color: #4db6e5;
   text-decoration: underline;
}

   a:hover, a:active {
      color: #3781c2;
      text-decoration: underline;
   }

   a:visited {
      color: #663399;
      text-decoration: line-through;
   }


.ms-rtestate-field h1, h1.ms-rteElement-H1 {
   font-family: 'Open Sans', sans-serif;
   font-weight: 800;
   color: #686868;
   line-height: 2em;
   text-transform: uppercase;
   font-size: 1.8em;
}

.ms-rtestate-field h2, h2.ms-rteElement-H2 {
   font-family: 'Open Sans', sans-serif;
   font-weight: 600;
   color: #686868;
   line-height: 2em;
   text-transform: uppercase;
   font-size: 1.6em;
}

.ms-rtestate-field h3, h3.ms-rteElement-H3 {
   font-family: 'Open Sans', sans-serif;
   font-weight: 500;
   color: #686868;
   line-height: 2em;
   text-transform: uppercase;
   font-size: 1.4em;
}

.ms-rtestate-field h4, h4.ms-rteElement-H4 {
   font-family: 'Open Sans', sans-serif;
   font-weight: 500;
   color: #686868;
   line-height: 2em;
   text-transform: uppercase;
   font-size: 1.3em;
}
/* Set-up pour la bv qui n'est pas pris en compte dans SP13. Si la bv devait être intégrée, il faudrait sans doute réactiver ces balises.

a {text-decoration: none;}

h1 {font-family: 'Open Sans', sans-serif; font-weight: 800; color: #686868; line-height: normal}
h2 {font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-weight: bold; color: #139AD2; line-height: normal}
h3 {font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: italic; font-weight: bold; color: #139AD2; line-height: normal}
h4 {font-family: 'Open Sans', sans-serif; font-size: 12px; font-style: italic; font-weight: bold; color: #000000; line-height: normal}
*/

#headerNavigationBackground {
   width: 100%;
   height: 50px;
   background-color: #fff;
   border-bottom: solid 1px;
}

#headerNavigation {
   background-color: #fff;
   height: 50px;
   width: 1000px;
   line-height: 50px;
   vertical-align: middle;
   margin: auto;
}

#elementsNavigation {
   float: left;
   position: relative;
   padding: 0;
   height: 50px;
}

   #elementsNavigation ul {
      display: inline-block;
      padding: 0;
      margin: 0;
      list-style: none outside none;
   }

   #elementsNavigation li {
      float: left;
      padding-right: 4px;
      font-size: 12px;
      color: black;
   }

   #elementsNavigation a {
      color: black;
      text-decoration:none;
   }

   #elementsNavigation a:hover {
      color: white;
      background-color:black;
   }

   
 
#social {
   float: right;
   position: relative;
   padding: 0;
   height: 50px;
}

   #social ul {
      display: inline-block;
      list-style: none outside none;
      padding: 0px;
      margin: 0px;
   }

   #social li {
      float: left;
      margin-right: 20px;
   }

      #social li a {
         display: block;
         min-height: 50px;
         width: 37px;
         opacity: 0;
         -webkit-transition: opacity 0.5s linear;
         -moz-transition: opacity 0.5s linear;
         -o-transition: opacity 0.5s linear;
         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
         transition: opacity 0.5s linear;
      }

         #social li a:hover {
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            opacity: 1;
         }

#tourneeHydro { 
   background: url(../images/AP_TourneeHydro-iconeChatmouille.png) no-repeat center;
}
#facebookAP {
   background: url(../images/social/icon_facebook.png) no-repeat center;
}

   #facebookAP a {
      background: url(../images/social/icon_facebookOver.png) no-repeat center;
   }

#twitterAP {
   background: url(../images/social/icon_twitter.png) no-repeat center;
}

   #twitterAP a {
      background: url(../images/social/icon_twitterOver.png) no-repeat center;
   }

#youtubeAP {
   background: url(../images/social/icon_youtube.png) no-repeat center;
}

   #youtubeAP a {
      background: url(../images/social/icon_youtubeOver.png) no-repeat center;
   }

#journal {
   float: right;
   position: relative;
   padding: 0;
   width: auto;
   background: url(../images/social/instagram.png) no-repeat center;
   height: 50px;
}

   #journal a:hover {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      opacity: 1;
   }

   #journal a {
      display: block;
      min-height: 50px;
      width: 51px;
      opacity: 0;
      -webkit-transition: opacity 0.5s linear;
      -moz-transition: opacity 0.5s linear;
      -o-transition: opacity 0.5s linear;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      transition: opacity 0.5s linear;
      background: url(../images/social/instagramOver.png) no-repeat center;
   }
   


#s4-bodyContainer {
   margin: 0px;
   padding: 0px;
   /*background-image: url('../Images/wallpaper_pattern_repeat.jpg');bg du haut */
   /* PM  - 18 juillet 2013 */
   /* Maintenant dans Theme.js */
   /*background-image: url('../Images/bg_base_header.png');*/
   height: 322px; 
   /*background-repeat: repeat-x;*/
   /*background-position: center top;*/
   margin-top:5px;
}

#wrapper {
   width: 960px;
   height: auto;
   background-color: transparent;
   margin: auto;
   /* PM  - enlevé le overflow qui semble causer un scroll bar horizontal dans la plupart des pages */
   /*overflow:auto;*/
}

#header {
   height: 241px;
   background: transparent;
   position: relative;
   padding-bottom: 22px;
   margin-top:0px;
}

#headerPrincipal {
   float: left;
   position: relative;
   width: 960px;
}

#headerTop {
   height: 166px;
}

#logo {
    background: #a8c653; /* Old browsers */
	background: -moz-linear-gradient(top,  #a8c653 0%, #73953e 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8c653), color-stop(100%,#73953e)); 
	background: -webkit-linear-gradient(top,  #a8c653 0%,#73953e 100%); 
	background: -o-linear-gradient(top,  #a8c653 0%,#73953e 100%); 
	background: -ms-linear-gradient(top,  #a8c653 0%,#73953e 100%); 
	background: linear-gradient(to bottom,  #a8c653 0%,#73953e 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8c653', endColorstr='#73953e',GradientType=0 ); 
    float: left;
    position: relative;
   height: 164px;
   width: 166px;
}	

#logoimage {
	background: url('../Images/LogoAP2013.png');
	height:160px;
   width: 156px;
   margin: auto;
   display: block;
}

#bannierepanel {
   position: relative;
   float: left;
   height: 164px;
   width: 528px;
}

#barreRecherche {
   margin-top: 20px;
}

.ms-srch-sb-border, .ms-srch-sb-borderFocused, .ms-srch-sb-border:hover {
   border: none;
   margin: auto;
}

#SearchBox {
   background-color: #ffffff;
}

/* PM - 18 juillet 2013 */
/* pour le bg switcher : 
            /* clear l'image */
.ms-srch-sbLarge img {
   display: none;
}

.ms-srch-sb-searchLink:hover {
   background-color: #ffffff !important;
}

/*Contient le texte "tu as une question" et l'image de la loupe*/
#ctl00_g_94b4cb32_c805_4fe9_bfeb_3de90de57c66_csr_sboxdiv,
#ctl00_g_989a2aa4_9add_4f88_9df8_0775fb79b2ad_csr_sboxdiv,
#ctl00_g_312f8cea_a3ed_4ba0_9f9c_31be296e6dfa_csr_sboxdiv {
   border: 0;
   height: 55px;
   border:thin silver solid;
}

/* Texte tu as une question... */
#ctl00_g_94b4cb32_c805_4fe9_bfeb_3de90de57c66_csr_sbox,
#ctl00_g_989a2aa4_9add_4f88_9df8_0775fb79b2ad_csr_sbox,
#ctl00_g_312f8cea_a3ed_4ba0_9f9c_31be296e6dfa_csr_sbox {
   width: 639px;
   height: 55px;
   text-align: center;
   font-family: "Open Sans", sans-serif;
   color: #6E6E71;
   margin: 0;
   padding: 0;
   background-color: #FFF;
   }

/*Image loupe*/
#ctl00_g_94b4cb32_c805_4fe9_bfeb_3de90de57c66_csr_SearchLink,
#ctl00_g_989a2aa4_9add_4f88_9df8_0775fb79b2ad_csr_SearchLink,
#ctl00_g_312f8cea_a3ed_4ba0_9f9c_31be296e6dfa_csr_SearchLink {
   width: 55px;
   height: 55px;
   border: 0;
   vertical-align: middle;
   background-image: url('../Images/icon_recherche.png');
   background-color: #FFF;
   background-repeat: no-repeat;
   background-position: center;
}

#connexion {
   height: 243px;
   width: 254px;
   position: absolute;
   margin-left: 12px;
   right: 0;
   top: 0;
}

#connexionboutons {
	float: right;
	/*padding-right: 30px;*/
	/* PM - ajusté à 12px */
/*	padding-top: 13px;*/
	padding-top: 12px;
	color: #FFF;
}

   #connexionboutons a {
      color: white;
   }

#bienvenue {
   height: 243px;
   width: 254px;
}

/* Zone de connexion dans accueil */
#ctl00_g_9e51831e_1d05_4f11_9723_9f86dfd5458a_ctl00_lnkOubliePwd{
	font-size:12px;
}

input[type=password], input[type=text], input[type=file], select, textarea, .sp-peoplepicker-topLevel, .sp-peoplepicker-topLevelDisabled, .sp-peoplepicker-autoFillContainer, .ms-inputBox {
  background-color: #dedede;
}

.ap-entlgn-login {
   width: 255px;
   height: 134px;
   position: absolute;
   top: 19px;
   display: none;
}

#bienvenue .ap-entlgn-btn-connexion {
   font-size: 16px;
   font-weight: bolder;
   color: rgb(255,255,255);
   width: 254px;
   height: 55px;
   margin-left: 0px;
   background-color: #b2ca55;
}

#bienvenue .ap-entlgn-btn-connexion:hover {
   cursor: pointer; 
}

#bienvenue .ap-entlgn-btn-inscrire {
   font-size: 16px;
   font-weight: bolder;
   color: rgb(255,255,255);
   width: 254px;
   height: 55px;
   margin-left: 0px;
   margin-top: 18px;
   background-color: #74a02a;
}

#bienvenue .ap-entlgn-btn-inscrire:hover {
   cursor: pointer; 
}

#bienvenueConnecter {
	position: relative;
	float: right;
   height: 180px;
   width: 254px;
   top: 63px;
   background-color: #fff;
   text-align: center;
}

#bienvenue a:visited {
   color: #ffffff;
}

.ap-avatarAccueil {
   max-width: 80px;
   position: absolute;
   right: 92px;
   bottom: 163px;
}

.ap-ident-Nom {
	position: relative;
   font-size: 12px;
   font-weight: 800;
   color: #74a02a;
   top: 40px;
   text-transform: uppercase;
}

.ap-ident-NivScol {
   position: relative;
   font-size: 12px;
   font-style: italic;
   text-decoration: underline;
   color: #74a02a;
   top: 45px;
}
 
.ap-btn-signout {
   position: absolute;
   width: 100%;
   height: 52px;
   top: 90px;
   left: 0px;
   background-color: #74a02a;
   color: #ffffff;
	font-size: 16px;
	font-weight: bold;
   text-decoration: none;
   line-height: 55px;
}

   .ap-btn-signout:hover {
      font-size: 16px;
      font-weight: bold;
      text-decoration: none;
   }

.ap-btn-profil {
   position:absolute;
   background-color: #5e5e5e;
   color: #ffffff;
   font-size: 13px;
   text-decoration: none;
   width: 100%;
   top: 205px;
   height: 40px;
   line-height: 40px;
   text-align: center;
}
.ap-btn-profil:before {
   content: url('/_catalogs/masterpage/AlloProf/Images/Connexion/Icon-compte.png');
   position: absolute;
   top: 3px;
   left: 55px;
}
.ap-btn-profil:hover {
   font-size: 13px;
   text-decoration: none;
   color: #ffffff;
}

#breadcrumb {
   top: 8px;
   left: 15px;
   position: relative;
   width: 100%;
   color:white;
}

#breadcrumb a:link, #breadcrumb a:visited {
   color:white;
}

#content {
   position: relative;
   width: 100%;
   min-height: 460px;
   background-color: white;
}

/* Début section footer ALLO PROF */
#footerLarge {
   background-color: #5E5E5E;
   height: 295px;
}

#footerAP {
   width: 960px;
   margin: auto;
   height: 295px;
   position: relative;
   background-image: url('../Images/footer/footer_image.png');
   margin-top: 20px;
}

#contenuFooter {
   top: 40px;
   margin: 0;
   position: absolute;
}

#footerLogo {
   background: #a8c653; /* Old browsers */
   background: -moz-linear-gradient(top, #a8c653 0, #73953e 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8c653), color-stop(100%,#73953e));
   background: -webkit-linear-gradient(top, #a8c653 0,#73953e 100%);
   background: -o-linear-gradient(top, #a8c653 0,#73953e 100%);
   background: -ms-linear-gradient(top, #a8c653 0,#73953e 100%);
   background: linear-gradient(to bottom, #a8c653 0,#73953e 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8c653', endColorstr='#73953e',GradientType=0 );
   float: left;
   height: 112px;
   width: 109px;
}

   #footerLogo img {
      max-width: 100%;
      max-height: 100%;      
   }

#liensFooterAP {
   width: 400px;
   float: left;
   margin-left: 225px;
}

   #liensFooterAP h3 {
      font-weight: bold;
      color: white;
   }

.ap-colonne-footer {
   float: left;
   width: 200px;
   margin: 0;
   padding: 0;
}

   .ap-colonne-footer ul {
      padding: 0;
      margin-top: 10px;
      list-style: none;
   }

      .ap-colonne-footer ul li {
         padding-bottom: 15px;
         margin: 0;
      }

         .ap-colonne-footer ul li:before {
            content: '-';
            margin: 0 1px;
            color: white;
         }

         .ap-colonne-footer ul li a {
            text-decoration: none;
            color: white;
         }

            .ap-colonne-footer ul li a:hover {
               text-decoration: underline;
            }
/* Fin section footer ALLO PROF */

#footerPartenaire {
   height: 120px;
   background-color: white;
   padding-top: 20px;   
   width:860px; /* Patrice 10 septembre 2013 */
   margin-left:auto;
   margin-right:auto;
   vertical-align:middle;
   text-align:center;
   top: 0px;
   position: relative;
}

   #footerPartenaire ul {
      display: inline-block;
      padding: 0;
      list-style: none outside none;
   }

   #footerPartenaire li {
      float: left;
      border-right: solid 1px;
      padding: 0px 10px;
      font-size: 10px;
      color: white;
      height: 12px;
      margin-right: 10px;
   }

#footerPartenaireCarousel {
	height: 80px;
	width: 165px;
	background-color: black;
}

.ms-ref-refiner #Container {
   padding-top: 0px;
}

#boutonFavori {
   float: right;
   position: relative;
   /* Fred - changé de 16px a 23px */
   bottom: 23px;
}
	
/* Cyberclasse - Salle d'attente */
.cyberclasse-texte-rang {
   font-family: 'Open Sans', sans-serif; 
   font-weight: 600; 
   color: #686868; 
   line-height: 2em; 
   text-transform:uppercase; 
   font-size: 1.6em;
}

/* Cyberclasse - bouton suivant */
.suivant-actif {
	background-color: green !important;
	width: 125px;
	height: 125px;
	box-shadow: 5px 5px 5px #aaa;
	font-size: 14px;
	font-weight: bold;
	color: #FFF;
}

.suivant-inactif {
   background-color: red !important;
   	width: 125px;
	height: 125px;
	box-shadow: 5px 5px 5px #aaa;
	font-size: 14px;
	font-weight: bold;
	color: #FFF;
}

#bouton_suivant_cyberprof {
	padding-left: 30px;
}

/* Cyberclasse - Section info dossier élève */
.cyberclasse-info-dossier table {
   border: 1px solid;
}

.cyberclasse-info-dossier td {
   padding-right: 20px;
   text-align: left;
}

.cyberclasse-info-dossier th {
   padding-right: 20px;
   text-align: left;
}

/* La liste des avatars dans le forumulaire d'inscription */
.ap-liste-avatar * {
   vertical-align: middle;
}

.ap-liste-avatar label {
   width: 62px;
   display: inline-block;
}

.ap-liste-avatar img {
   width: 62px;
   height: 62px;
}

/* La liste des backgrounds dans le forumulaire d'inscription */
.ap-liste-background * {
   vertical-align: middle;
}

.ap-liste-background label {
   width: 62px;
   display: inline-block;
}

.ap-liste-background img {
   width: 50px;
   height: 30px;
   }

.AP-BoutonLogin-AD {
   text-align:right;
   margin-top: 7px;
}

   .AP-BoutonLogin-AD a {
      color: #FFF;
   }

.talking {
   display:none;
   background-image: url('../Images/forum/speech_bubble.png');
   background-size: 65px;
   z-index:200;
   width:65px;
   height:65px;
   position:absolute;
   margin-left:35px;
   margin-top: -45px;
}

.speech_text {
   position:absolute;
   top:18px;
   left: 8px;
}

.echec-validation input {
   background-color:lightpink;
   border-color:red;
}

.echec-validation,
.echec-validation span,
.succes-validation,
.succes-validation span{
   color:red;
   word-wrap: normal;
   }

/*.ms-webpart-chrome {
   border-spacing: 2px !important;
   }*/

/*Balise gérant le message d'erreur de Microsoft en cas de mauvais login - Elle fait descendre tout le content type de la page sous la pointe bleue.*/
#ctl00_PlaceHolderMain_g_317afdbc_651c_4b31_8f4b_6e537116aae2 {
    padding-top:15 px;
}

#texte-introcyber {
	margin-left: 30px;	
}

#texte-choisirunecyber {
	margin-top: -12px;	
	margin-left: 30px;	
}

.ms-dlgTitle {
   background-color: white;
}

   .ms-dlgTitle h1 {
      font-family: "Open Sans", sans-serif;
      font-size: 16px;
      font-weight: bolder;
      width: 100px !important;
      vertical-align: middle;
      margin: 0px;
      position: relative;
   }
   
.ap-loginExterne{
	margin-left:90px;
	}
/**************************************************/
/* CSS de la barre d'outils                       */
/**************************************************/

#barreOutils {
    margin-top: 20px;
    position:relative;
    float:right;
}


.bouton-barre-outils {
	width: 30px;
   height: 30px;
   display: block;
   background-repeat: no-repeat;
   background-color: transparent;
	position: relative;
    float: left;
}

   .bouton-favori {
      background-image: url(../images/BarreOutils/favori.jpg);
   }

      .bouton-favori:hover {
         background-position: -30px 0;
      }

   .bouton-commenter {
     background-image: url(../images/BarreOutils/commenter.jpg);
   }

      .bouton-commenter:hover {
         background-position: -30px 0;
      }

   .bouton-partager {
      background-image: url(../images/BarreOutils/partager.jpg);
   }

      .bouton-partager:hover {
         background-position: -30px 0;
         cursor: pointer;
      }

      .div-partager {
         width: 30px;
         height: 30px;
      }
