body {
	background			: #F0EFE7 url('images/fond-container-accueil.jpg') fixed repeat top left / cover;
}

.container-accueil {
	width				: 1024px;
	height	 			: 768px;
	margin				: auto;
	padding				: 0;
	border-radius		: 15px;
	opacity				: 0.9;
	filter				: Alpha(opacity=90); /* pour IE8- */
	color				: #060;
	text-shadow			: 1.5px 1.5px yellow;
/*	border				: 2px solid red;*/
}

.container-domogenius {
	position			: absolute;
	top					: 0;
	left				: 0;
	width				: 94%;
	height	 			: 42%; /*43%;*/ /*44%;*/
	margin				: 0;
	padding				: 1% 3% 0% 3%; /*0% 3%;*/
	color				: black;
	font-size			: 1.3em;
	text-align			: justify;
	text-shadow			: none;
	overflow			: hidden;
/*	border-radius		: 15px;
	border				: 2px solid blue;*/
}

.container-domotique {
	position			: absolute;
	top					: 44%; /*45%;*/ /*47%;*/
	left				: 0%;
	width				: 100%;
	height	 			: 55%; /*54%;*/ /*52%;*/
	margin				: auto;
	padding				: 0px;
	color				: #060;
	text-shadow			: none;
/*	border-radius		: 15px;
	border				: 2px solid blue;*/
}

.wrapper-schema {
	position			: absolute;
	top					: -5%; /*0;*/
	left				: 0;
	width				: 45.15%; /*43%;*/ /*46%;*/ /*45.5%;*/
	height	 			: 105%; /*100%;*/
	margin				: 0px 0 0 30px; /*10px 0 0 10px;*/ /*0 0 0 10px;*/ /* auto;*/
	padding				: 0;
	color				: #000;
	background			: url('images/schema-domotique.png') no-repeat center center / 100%;
/*	z-index				: 500; */
/*	border-radius		: 15px;
	border				: 2px solid red;*/
}

.cadre-symbole {
	position			: absolute;
	width				: 12.9%;
	height				: 14.3%;
	margin				: auto;
	padding				: 0px;
	background			: url('images/cadre-symbole.png') no-repeat center center / 100%; /* 94%; */
	color				: #000;
/*	border-radius		: 15px;
	border				: 2px solid green;*/
}

p .image-symbole {
	width				: 8%;
	margin				: 0 3px;
}

#symbole-application-1 {
	top					: 5.5%;
}

#symbole-application-2, #symbole-application-8 {
	top					: 18%;
}

#symbole-application-3, #symbole-application-7 {
	top					: 43%;
}

#symbole-application-4, #symbole-application-6 {
	top					: 68%;
}

#symbole-application-5 {
	top					: 80%;
}

#symbole-application-1, #symbole-application-5 {
	left				: 34%;
}

#symbole-application-2, #symbole-application-4 {
	left				: 58.1%;
}

#symbole-application-3 {
	left				: 67.2%;
}

#symbole-application-6, #symbole-application-8 {
	left				: 9.6%;
}

#symbole-application-7 {
	left				: 0%;
}

.cadre-symbole span {
	position			: absolute;
	display				: none;
	top					: -28%;
	left				: 0px;
	width				: 200%;
	padding				: 3px;
	font-size			: .7em;
	font-weight			: bold;
	text-align			: center;
/*	z-index				: 1500; */
	opacity				: 1;
	filter				: Alpha(opacity=100); /* pour IE8- */
	background-color	: #F8EE6A;
	border-radius		: 15px;
	border				: 1.5px solid blue;
}

.cadre-symbole span.offset-to-top {
	top					: -50%;
}

.cadre-symbole span.offset-to-left {
	left				: -108%;
}

.cadre-symbole span.offset-to-top-and-center {
	top					: -50%;
	left				: -60%;
}

.cadre-symbole span.offset-to-top-and-left {
	top					: -50%;
	left				: -108%;
}

.cadre-symbole:hover span {
	display				: block;
}

.wrapper-text {
	position			: absolute;
	top					: 0;
	left				: 43%; /* 45.5%; */
	width				: 57%; /* 54.5%; */
	height	 			: 100%;
	margin				: 0 5% 0 1%;
	padding				: 0px;
	color				: #000;
/*	z-index				: 1000; */
/*	border-radius		: 15px;
	border				: 2px solid blue;*/
}

.application {
	float				: left;
	display				: none;
	width				: 100%;
	height				: 0%;
	margin				: 0 0 0 0;
	overflow			: hidden;
/*	border				: 2px solid green;*/
}

.wrapper-text p {
	margin				: 1.5% 8% 0 0;
	padding				: 0;
	font-size			: 1.02em; /*1.05em;*/ /*1.1em;*/
	text-align			: justify; 
}

.wrapper-text ul {
	margin				: 0 8% 0 0;
	font-size			: 1em;
	text-align			: justify;
/*	border				: 2px solid green;*/
}

p.titre-application {
	margin				: 0 8% 0 0;
	padding				: 0;
	font-size			: 1.4em;
	font-weight			: bold; 
	color				: #060;
	text-shadow			: 1.5px 1.5px yellow;
}

.titre-application img {
	vertical-align		: middle;
}

.wrapper-schema:hover {
	top					: -16%;
	left				: 0;
	width				: 53.75%; /* 1.2 fois celle de .wrapper-schema */
	height	 			: 125%;
	z-index				: 100;
	cursor				: pointer;
/*	border				: 2px solid red;*/
}

.cadre-symbole:hover {
	width				: 15.5%;
	height				: 17.2%;
	background			: url('images/cadre-symbole-survole.png') no-repeat center center / 100%; /* 94%; */
	cursor				: pointer;
}

.cadre-symbole.select, .cadre-symbole.select:hover {
	background			: url('images/cadre-symbole-selectionne.png') no-repeat center center / 100%; /* 94%; */
}

.cadre-symbole .image-symbole {
	height				: 60%; /*65%;*/
	margin				: 15% 18%; /*15% 20%;*/
}

sup {
	font-size			: .6em;
	font-weight			: bold;
}

.container-domogenius p {
	margin				: 2% 0%;
	padding				: 0;
}

a {
	color				: blue;
	text-decoration		: underline;   
}

a span {
	display 			: none;
	position			: absolute;
	left				: -28%;
	bottom				: -.75%;
	padding				: 3px 10px 5px 10px;
	width				: 116%;
	overflow			: hidden;
	font-size			: .8em;
	opacity				: 1;
	filter				: Alpha(opacity=100); /* pour IE8- */
	background-color	: #F8EE6A;
	border-radius		: 15px;
	border				: 1px solid blue;
	cursor				: pointer;
}

a span.bulle-1 {
	left				: 0%;
	height				: 18%;
	width				: 88%;
	color				: white;
	font-weight			: bold;
	background-color	: #FF5555; 
	border				: 3px solid red;
}

a span.bulle-2 {
	height				: 18%;
}

a span.bulle-3 {
	height				: 20%;
}

a span.bulle-4 {
	height				: 25%;
}

a span.bulle-5 {
	height				: 29%;
}

a:hover span {
	display 			: block;
}

p.note-bas-page {
	margin-top			: 20px;
	font-size			: 0.85em;
	font-weight			: 550;
	font-style			: italic;
}

p.note-bas-page br {
	margin-top			: 0;
}