/**************************************************************************************************************************/
										/* CSS de la page d'accueil Squalp */
/**************************************************************************************************************************/

#bordureSousSchemSqualp
{
	height : 20px;
	width : 0px;
	border-right : 1px solid black;
	position : absolute;
	margin-top : 613px;
	margin-left : 504px;
}

#contenuSqualpAcc
{
	width : 440px;
	display : inline-block;
	padding-bottom : 12px;
	padding-top : 5px;
}

#animationAccueilSqualp
{
	float : left;
}

#cercle
{
	position : absolute;
	margin-top : -50px;
}

#motSqualp
{
	color : black;
	font-size : 18px;
	text-shadow : none;
	position : absolute;
	font-family : garamond;
	margin-top : 322px;
	margin-left : 198px;
	font-weight : bold;
}

#mot1,#mot2,#mot3,#mot4,#mot5,#mot6,#mot7,#mot8
{
	position : absolute;
	color : black;
	text-shadow : 1px 1px rgb(110,110,110);
	font-size : 14px;
	font-family : Arial, Helvetica, sans-serif;/*Segoe ui;*/
	font-weight : bold;
	letter-spacing:2px;
	cursor : none;
	z-index:2;
}

#defmot1,#defmot2,#defmot3,#defmot4,#defmot5,#defmot6,#defmot7,#defmot8
{
	position : absolute;
	color : black;
	font-size : 13px;
	font-weight : bold;
	font-family : Arial, Helvetica, sans-serif; /*Segoe ui;*/
}


/*Gestion de la partie droite de la page d'accueil avec les petits onglets de liens d'affichage*/

#titre1
{	
	margin-top : 120px;
	margin-left : 530px;
	font-family : Arial, Helvetica, sans-serif;/*Segoe ui;*/
	font-weight : bold;
	font-size : 13px;
	color: black;
}

#titre2
{
	/*margin-top : 5px;*/
	margin-top : 30px;/*39px;*/
	margin-left : 545px;
	/*margin-left : 540px;*/
	font-family :Arial, Helvetica, sans-serif;/*Segoe ui;*/
	font-weight : bold;
	font-size : 13px;
	color: black;
}

#titre3
{
	/*margin-top  : 5px;*/
	margin-top  : 35px;
	margin-left : 525px;
	margin-bottom:10px;
	font-family : Arial, Helvetica, sans-serif;/*Segoe ui;*/
	font-weight : bold;
	font-size : 13px;
	color: black;
}

#text1
{
	/*margin-top : 13px;*/
	/*margin-left : 535px;*/
	margin-top : 35px;
	margin-left : 570px;
	font-family : Arial, Helvetica, sans-serif;/*Segoe ui;*/
	font-weight : bold;
	font-size : 13px;
}

#text1 a:link
{
text-decoration: none;
}

#text2
{
	/*margin-top : 11px;*/
	margin-left : 570px;
	font-family : Arial, Helvetica, sans-serif;/*Segoe ui;*/
	font-weight : bold;
	font-size : 13px; 
	line-height: 27px;
}

#text2 a:link
{
text-decoration: none;
}
#text2 span
{
	line-height: 20px;
}

#text3
{
	/*margin-top : 10px;*/
	margin-left : 570px;
	font-family : Arial, Helvetica, sans-serif;/*Segoe ui;*/
	font-weight : bold;
	font-size : 13px;
}

#text3 a:link
{
text-decoration: none;
}

#text4
{
	/*margin-top : 16px;*/
	margin-top : 38px;
	margin-left : 570px;
	font-family : Arial, Helvetica, sans-serif;/*Segoe ui;*/
	font-weight : bold;
	font-size : 13px;
}

#text4 a:link
{
text-decoration: none;
}

#text5
{
	margin-top : 5px;
	margin-left : 570px;
	font-family : Arial, Helvetica, sans-serif;/*Segoe ui;*/
	font-weight : bold;
	font-size : 13px;
	/*line-height: 7px;*/
}

#text5 a:link
{
text-decoration: none;
}

#text6
{
	margin-top : 5px;
	margin-left : 570px;
	font-family : Arial, Helvetica, sans-serif;/*Segoe ui;*/
	font-weight : bold;
	font-size : 13px;
	margin-bottom:10px;
}

#text6 a:link
{
text-decoration: none;
}

#text7
{
	margin-top : 9px;
	margin-left : 515px;
	margin-left : 560px;
	font-family : Arial, Helvetica, sans-serif;/*Segoe ui;*/
	font-weight : bold;
	font-size : 13px;
}

#text7 a:link
{
text-decoration: none;
}

#text8
{	margin-top	: 5px;
	/*margin-left : 515px;*/
	margin-left : 560px;
	font-family : Arial, Helvetica, sans-serif;/*Segoe ui;*/
	font-weight : bold;
	font-size : 13px;
	/*line-height: 7px;*/
}

#text8 a:link
{
text-decoration: none;
}

#text9
{
	margin-top : 5px;
	margin-left : 560px;
	font-family : Arial, Helvetica, sans-serif;/*Segoe ui;*/
	font-weight : bold;
	font-size : 13px;
}

#text9 a:link
{
text-decoration: none;
}

#text1:hover ,#text2:hover,#text3:hover,#text4:hover,#text5:hover,#text6:hover{
   text-decoration: underline;
   color: blue;
}

/*couleur*/

  div#text1 a,div#text2 a,div#text3 a,div#text4 a,div#text5 a,div#text6 a { 	
  display: block;
  text-decoration: none;
  color:black;
  }
  
/*Gestion des apparitions des borders textes dans la partie droite de l'écran*/

	div#text1 a span,div#text2 a span,div#text3 a span,div#text4 a span,div#text5 a span,div#text6 a span { 
	display: none;  
	}

  
	div#text1 a:hover span{
	display: inline;
	padding: 5px;
	width:224px;
	position : absolute;
	margin-top : 0px;
	margin-left : -192px;/*-178px;*/
	/*border-left : 1px solid rgb(170,170,170);*/
	/*box-sizing : border-box;*/
	padding-left : 10px;
	padding-right : 10px;
	box-shadow: -1px 2px 2px grey, 0px -1px 2px grey;
	border-radius : 10px;
	background-color: white;
	font-weight: normal;
	color: black;
	font-family : Arial, Helvetica, sans-serif;/*Segoe ui;*/
	border-left: 2px solid black;
	border-right: 2px solid black; 
	}
	
	div#text2 a:hover span{
	display: inline;
	padding: 5px;
	width:224px;
	position : absolute;
	margin-top : 0px;
	margin-left : -190px;/*-178px;*/
	/*border-left : 1px solid rgb(170,170,170);*/
	/*box-sizing : border-box;*/
	padding-left : 10px;
	padding-right : 10px;
	box-shadow: -1px 2px 2px grey, 0px -1px 2px grey;
	border-radius : 10px;
	background-color: white;
	font-weight: normal;
	color: black;
	font-family : Arial, Helvetica, sans-serif;/*Segoe ui;*/
	border-left: 2px solid black;
	border-right: 2px solid black; 
	}
	
	div#text3 a:hover span{
	display: inline;
	padding: 5px;
	width:224px;
	position : absolute;
	margin-top : 0px;
	margin-left : -174px;/*-161px;*/
	/*border-left : 1px solid rgb(170,170,170);*/
	/*box-sizing : border-box;*/
	padding-left : 10px;
	padding-right : 10px;
	box-shadow: -1px 2px 2px grey, 0px -1px 2px grey;
	border-radius : 10px;
	background-color: white;
	font-weight: normal;
	color: black;
	font-family : Arial, Helvetica, sans-serif;/*Segoe ui;*/
	border-left: 2px solid black;
	border-right: 2px solid black; 
	}
	
	div#text4 a:hover span{
	display: inline;
	padding: 5px;
	width:224px;
	position : absolute;
	margin-top : 0px;
	margin-left : -120px;/*-110px;*/
	/*border-left : 1px solid rgb(170,170,170);*/
	/*box-sizing : border-box;*/
	padding-left : 10px;
	padding-right : 10px;
	box-shadow: -1px 2px 2px grey, 0px -1px 2px grey;
	border-radius : 10px;
	background-color: white;
	font-weight: normal;
	color: black;
	font-family : Arial, Helvetica, sans-serif;/*Segoe ui;*/
	border-left: 2px solid black;
	border-right: 2px solid black;
	}
	
	div#text5 a:hover span{
	display: inline;
	padding: 5px;
	width:224px;
	position : absolute;
	margin-top : 0px;
	margin-left : -120px;/*-110px;*/
	/*border-left : 1px solid rgb(170,170,170);*/
	/*box-sizing : border-box;*/
	padding-left : 10px;
	padding-right : 10px;
	box-shadow: -1px 2px 2px grey, 0px -1px 2px grey;
	border-radius : 10px;
	background-color: white;
	font-weight: normal;
	color: black;
	font-family : Arial, Helvetica, sans-serif;/*Segoe ui;*/
	border-left: 2px solid black;
	border-right: 2px solid black;
	}

	div#text6 a:hover span{
	display: inline;
	padding: 5px;
	width:224px;
	position : absolute;
	margin-top : 0px;
	margin-left : -188px;/*-110px;*/
	/*border-left : 1px solid rgb(170,170,170);*/
	/*box-sizing : border-box;*/
	padding-left : 10px;
	padding-right : 10px;
	box-shadow: -1px 2px 2px grey, 0px -1px 2px grey;
	border-radius : 10px;
	background-color: white;
	font-weight: normal;
	color: black;
	font-family : Arial, Helvetica, sans-serif;/*Segoe ui;*/
	border-left: 2px solid black;
	border-right: 2px solid black;
	}
	
	div#text1 span p,div#text2 span p,div#text3 span p,div#text4 span p,div#text5 span p,div#text6 span p{
	border-bottom : 1px solid blue;
	text-align : center;
	font-size : 14px;
	margin-top : 0px;
	margin-bottom : 10px;
	color : blue;
	font-weight : bold;
	}
	li{
	list-style:square;
	}*

#mot1
{
	margin-top : 115px;
	margin-left : 405px;
}
#mot2
{
	margin-top : 410px;
	margin-left : 425px;
}
#mot3
{
	margin-top : 510px;
	margin-left : 315px;
}
#mot4
{
	margin-top : 491px;
	margin-left : 180px;
}
#mot5
{
	margin-top : 394px;
	margin-left : 105px;
}
#mot6
{
	margin-top : 290px;
	margin-left : 315px;
}
#mot7
{
	margin-top : 305px;
	margin-left : 115px;
}
#mot8
{
	margin-top : 240px;
	margin-left : 185px;
}

.mot span
{
	font-size : 11px;
	padding : 5px;
	color : black;
	z-index : 50;
	position : relative;
	display : none;
	width : 80px;
	line-height : 12px;
	font-style : italic;
	font-family : Segoe ui;
	font-weight : bold;
	text-shadow : none;
	letter-spacing : 0.5px;
	margin-left : -5px;
}

.mot:hover
{
	font-size : 16px;
	cursor : pointer;
}

#animationAccueilSqualp > img
{
	border-top : 1px solid black;
	border-right : 1px solid black;
	width : 748px;
	height : 565px;
}

.planete 
{    
    /* Make the initial position to be the center of the circle you want this object follow.*/
    position: absolute;
	left : 215px;
	top : 290px;
	z-index : 1;
	width : 85px;

    /*
     * Sets up the animation duration, timing-function (or easing)
     * and iteration-count. Ensure you use the appropriate vendor-specific 
     * prefixes as well as the official syntax for now. Remember, tools like 
     * CSS Please are your friends!
     */
    -webkit-animation: myOrbit 4s linear infinite; /* Chrome, Safari 5 */
       -moz-animation: myOrbit 4s linear infinite; /* Firefox 5-15 */
         -o-animation: myOrbit 4s linear infinite; /* Opera 12+ */
            animation: myOrbit 4s linear infinite; /* Chrome, Firefox 16+, 
                                                      IE 10+, Safari 5 */
}

/*
 * Set up the keyframes to actually describe the begining and end states of 
 * the animation.  The browser will interpolate all the frames between these 
 * points.  Again, remember your vendor-specific prefixes for now!
 */
 
@-webkit-keyframes myOrbit 
{
    from { -webkit-transform: rotate(0deg) translateX(110px) rotate(0deg); }
    to   { -webkit-transform: rotate(360deg) translateX(110px) rotate(-360deg); }
}

@-moz-keyframes myOrbit 
{
    from { -moz-transform: rotate(0deg) translateX(110px) rotate(0deg); }
    to   { -moz-transform: rotate(360deg) translateX(110px) rotate(-360deg); }
}

@-o-keyframes myOrbit 
{
    from { -o-transform: rotate(0deg) translateX(110px) rotate(0deg); }
    to   { -o-transform: rotate(360deg) translateX(110px) rotate(-360deg); }
}

@keyframes myOrbit 
{
    from { transform: rotate(0deg) translateX(110px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(110px) rotate(-360deg); }
}

/**************************************************************************************************************************/
										/* CSS des pages Squalp */
/**************************************************************************************************************************/

#schemaSqualp
{
	float : left; 
}

#imgSqualp img
{
	width : 269px;
	height : 565px;
	margin : 0px;
	margin-top : 5px; 
}

#contenuSqualp
{
	overflow : hidden;
}

#contenuSq
{
	display : inline-block;
	width : 749px;
	font-size : 12px;
	border-left : 1px solid black;
	overflow : hidden;
	margin-bottom : -5px;
}

#contenuSqualp #descContenuSqualp
{
	float : left;
	border-top : 1px solid black;
	width : 479px;
	box-sizing : border-box;
	padding-left : 15px;
	padding-right : 15px;
	padding-top : 10px;
	padding-bottom : 10px;
	text-align : justify;
	font-family :  /*Tahoma, Geneva, sans-serif;*//*'Lucida Sans Unicode', 'Lucida Grande', sans-serif;*/Georgia, serif;/*'Comic Sans MS', cursive;*//*verdana;*/
	line-height : 19px;
	letter-spacing : 0.2px;
	font-size : 12px;
	margin-top : 5px;
	border-right : 1px solid black;
	min-height : 580px;
}

#contenuSqualp p
{
	margin-top : 0px;
	margin-bottom : 10px;
}

#contenuSqualp .sansEspaceAvantListe
{
	margin-bottom : 0px;
}

#contenuSqualp ul
{
	padding-left : 35px;
	margin-top : 0px;
	list-style-type: none;
}

#contenuSqualp ul li
{
	padding-left : 0px;
	padding-bottom : 2px;
	list-style-image : url('/images/puce-fleche/puce/puceRondeRouge.png');
}