﻿<style type="text/css">
html {height: 100%; margin: 0px; padding: 0px; background-color: #414141;}
body {width: 90%; max-width:1280px; margin: 45px auto 0 auto; padding: 0px; background-color: #414141;}

/*Commun*/
/*Titres*/
h1 { margin:1% 0 1% 10%; font-size:x-large; color:#0000CD; text-shadow: 1px 1px 3px rgba(0, 0, 205, 0.3);}
h2 { margin:1% 0 1% 10%; font-size:large; color:#0000CD; text-shadow: 1px 1px 3px rgba(0, 0, 205, 0.3); }
h3 { margin:1% 0 1% 10%; font-size:medium; color:#0000CD; text-shadow: 1px 1px 2px rgba(0, 0, 205, 0.2); }

/* non utilisé
.hx-a { margin:1% 0 1% 15%; color:#0000CD; }
.hx-b { display:inline-block; color:#0000CD; }
.hx-c { margin:0 0 0 0; text-align:center; color:#0000CD; }
.hx-d { text-align:center; display:inline-block; }
*/

.titre-a { margin:1% 0 1% 10%; color:#0000CD; font-size:x-large; } /*non utiliser*/
.titre-b { margin:1% 0 1% 10%; color:#0000CD; font-size:20px; }
.titre-c { margin:1% 0 1% 10%; color:#0000CD; font-size:large; font-weight:bold; }
/*.titre-d { margin:1% 0 1% 10%; color:#0000CD; font-size:medium; }*/
.titre-d { color:black; font-family:"Comic Sans MS"; font-weight:bold; text-shadow: 1px 1px 2px #DB0B32; }

/*Textes*/
p { margin: 5px 0 10px 0; }
.texte-a { font-size:small; font-weight:bold; }
.texte-b { margin:5px 0 8px 0; line-height:110%; font-size:small; font-weight:bold; }
.texte-c { margin:5px 0 8px 0; line-height:110%; font-size:medium; font-weight:bold; }

/*Boutons*/
.bouton-a {
	color:#ffffff;
	font-family:"Comic Sans MS";
	font-weight:bold;
	padding: 5px 5px 5px 5px;
	border-radius:4px 4px 4px 4px;
	background-image: radial-gradient( #DB0B32 30%, #B22222 100%);
}

.klikandpay { 
	color:#ffffff;
	font-family:"Comic Sans MS";
	font-size:medium;
	font-weight:bold;
	padding:8px 20px 8px 20px;
	border-radius:4px 4px 4px 4px;
	background-image: radial-gradient( #B22222 30%, #FF8C00 100%);
}
.klikandpay:hover { background-image: radial-gradient( #FF8C00 30%, #B22222 100%); color:blue; }

/*****************************************************/
/*Bloc du centre 100%*/
.cadre-a {
margin: 3% 3% 3% 3%;
padding:2% 5% 1% 5%;
font-family:Calibri;
/*font-size:medium;*/
text-align:justify;
line-height:120%;
text-shadow: 1px 1px 2px rgba(0,0,0, 0.2);
box-shadow: 5px -5px 20px rgba(164, 198, 51, 0.30) inset;
border-radius:12px 12px 12px 12px;
}

	/* Bloc dépannage informatique express */
	.cadre-a-i-di {
	display:inline-block;
	width:24%;
	height:auto;
	font-family:Calibri;
	font-size:large;
	text-align:center;
	vertical-align:top;
	line-height:normal;
	text-shadow: #ffffff 1px 1px, #ffffff -1px 1px, #ffffff -1px -1px, #ffffff 1px -1px;
	padding:5px;
	background-color: #F5F5F5;
	background: url('/images/france-regions.png') no-repeat center;
	border-radius: 8px 8px 8px 8px;
	-moz-border-radius:8px 8px 8px 8px;
	-webkit-border-radius:8px 8px 8px 8px;
	position:relative;
	animation: imag-i 10s linear infinite;
	}

	.cadre-a-i-70 {
	display:inline-block;
	width:70%;
	margin:0;
	padding:0 0 0 3%;
	}

	.cadre-hor-a {
	display:inline-block;
	width:16.19%;
	margin-top: 0;
	margin-bottom: 10px;
	line-height: 110%;
	}

	.cadre-a-i-50 {
	display:inline-block;
	width:39.5%;
	margin:5px 0 5px 0;
	padding-left:10%;
	text-align:left;
	font-size:small;
	color:black;
	vertical-align:top;
	}

		/* -- Spoler --> Cadre zone d'intervention -- */
		#sp-01 #sp-02 { height: 0; overflow: hidden; }
		#sp-02 { background-color:#F5F5F5; border-radius: 6px; font-size:small }
		#sp-01:target #sp-02 { height: auto; }
		#sp-01:target #ca-02, #sp-01 #af-02 { display: inline; }
		#sp-01:target #af-02, #sp-01 #ca-02 { display: none; }
		.liens { text-decoration:none; color:black; }

/*****************************************************/
/*Bloc du centre, comprenant bloques Gauche et Droite*/
#centre {
height:100%;
width:100%;
margin:0px;
padding:0px;
border:0;
background-color:#ffffff;
clear:both;
}

/*****************************************************/
/*Bloc de gauche 25%*/
	#gauche {
	height:auto;
	width:25%;
	margin:0px;
	padding:0px;
	border:0;
	background-color:#ffffff;
	float:left;
	}

		.cadre-t-g-I {
		margin:30px 10% 0 10%;
		box-shadow: 5px -5px 20px rgba(0, 0, 255, 0.30) inset;
		/*box-shadow: 5px -5px 20px rgba(164, 198, 51, 0.30) inset;*/
		font-family:Calibri;
		font-size:large;
		text-align:center;
		line-height:normal;
		text-shadow: #ffffff 1px 1px, #ffffff -1px 1px, #ffffff -1px -1px, #ffffff 1px -1px;
		padding:5px;
		background-color: #F5F5F5;
		border-radius: 8px 8px 8px 8px;
		-moz-border-radius:8px 8px 8px 8px;
		-webkit-border-radius:8px 8px 8px 8px;
		position:relative;
		}

			.imag-a {
			min-height: 150px;
			background-image: url('/images/femme3.jpg');
			background-repeat: no-repeat;
			background-position:center;
			background-size: 100% 100%;
			}
	
			.imag-b {
			min-height: 150px;
			background-image: url('/images/femme4.jpg');
			background-repeat: no-repeat;
			background-position: center;
			background-size: 100% 100%;
			}
	
			.imag-c {
			min-height:70px;
			margin:0;
			padding-top:8%;
			background-image: url('/images/mspme.gif');
			background-repeat: no-repeat;
			background-position:center;
			}
	
			.imag-d {
			min-height:60px;
			margin:0;
			background-image: url('/images/mssilver-b.png');
			background-repeat: no-repeat;
			background-position:center;
			background-size: 100% 50px;
			}

			.imag-i {
			background: url('/images/france-regions.png') no-repeat center;
			filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/france-regions.gif', sizingMethod='scale');
			-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/france-regions.gif', sizingMethod='scale');
			animation: imag-i 10s linear infinite;
			}

				@keyframes imag-i {
				0%  {background: #F5F5F5 url('/images/france-regions.png') no-repeat center;}
				20% {background: #F0F8FF url('/images/france-regions.png') no-repeat left top;}
				40% {background: #FFFAFA url('/images/france-regions.png') no-repeat left bottom;}
			    60% {background: #F5F5DC url('/images/france-regions.png') no-repeat right top;}
				80% {background: #FAF0E6 url('/images/france-regions.png') no-repeat right bottom;}
				}
				@-moz-keyframes imag-i {
				0%  {background: #F5F5F5 url('/images/france-regions.png') no-repeat center;}
				20% {background: #F0F8FF url('/images/france-regions.png') no-repeat left top;}
				40% {background: #FFFAFA url('/images/france-regions.png') no-repeat left bottom;}
			    60% {background: #F5F5DC url('/images/france-regions.png') no-repeat right top;}
				80% {background: #FAF0E6 url('/images/france-regions.png') no-repeat right bottom;}
				}
				@-ms-keyframes imag-i {
			    0%   {background:#F5F5F5 no-repeat center;}
			    25%  {background:#F0F8FF no-repeat 0% 0%;}
			    50%  {background:#FFFAFA no-repeat 0% 100%;}
			    75%  {background:#F5F5DC no-repeat 100% 0%;}
			    100% {background:#FAF0E6 no-repeat 100% 100%;}
				}
				@-webkit-keyframes imag-i {
			    0%   {background:#F5F5F5 no-repeat center;}
			    25%  {background:#F0F8FF no-repeat 0% 0%;}
			    50%  {background:#FFFAFA no-repeat 0% 100%;}
			    75%  {background:#F5F5DC no-repeat 100% 0%;}
			    100% {background:#FAF0E6 no-repeat 100% 100%;}
				}

/*****************************************************/
/*Bloc de droite 75%*/
	#droite {
	height:auto;
	width:75%;
	margin:0px;
	padding:0px;
	border:0;
	background-color:#ffffff;
	float:right;
	}

		/*Cadre de droite 75%*/
		.cadre-b {
		margin:4% 3% 0 0;
		padding:2% 3% 1% 3%;
		font-family:Calibri;
		font-size:medium;
		text-align:justify;
		line-height:120%;
		text-shadow: 1px 1px 2px rgba(0,0,0, 0.2);
 		box-shadow: 5px -5px 20px rgba(164, 198, 51, 0.30) inset;
		border-radius:12px 12px 12px 12px;
		position:relative;
		}

			.cadre-b-i-a {
			display:inline-block;
			width:45%;
			margin:5px 0 5px 0;
			padding-left:4%;
			text-align:left;
			font-size:small;
			color:black;
			vertical-align:top;
			}

			.cadre-b-i-b {
			display:inline-block;
			width:45%;
			margin:0 0 5px 1%;
			padding-left:3%;
			font-size:small;
			vertical-align:top;
			}

			.cadre-b-c {
			margin:5% 1% 5% 1%;
			padding:2% 2% 2% 2%;
			border-radius:0 50px 0 50px;
			/*box-shadow: 0px 0px 20px 5px rgba(255, 204,51, 0.60);*/
			box-shadow: 3px -1px rgba(255, 204, 51, 0.10);
			}

.cadre-b-d { /*non utilisé*/
margin:0 1% 0 1%;
padding:0.5% 2% 0.5% 2%;
line-height:80%;
/*border-radius:0 50px 0 50px;*/
/*box-shadow: 0px 0px 20px 5px rgba(255, 204,51, 0.60);*/
/*box-shadow: 3px -1px rgba(255, 204, 51, 0.10);*/
}

			.imag-1 {
			background-image: url('/images/tech.gif');
			background-repeat: no-repeat;
			background-position: 90% 1%;
			background-size: 30% 20%;
			}
			
			.imag-2 {
			background-image: url('/images/idf.jpg');
			background-repeat: no-repeat;
			background-position: 90% 5%;
			background-size: 180px 180px;
			}

/*****************************************************/
/* -- Blocks span Côte à côte pour : Dépannage informatique à Distance, en Ligne, Immédiatement (page dépannage-informatique-à-distance) -- */
.cadre-3-i-E-80 {
	display:inline-block;
	vertical-align:top;
	width:40%;
	margin:1% 1% 0 1%;
	padding: 2%;
	border:none;
	text-align:center;
	background-color: #FFFACD;
	border-radius:8px 8px 8px 8px;
	box-shadow: 0px 0px 10px rgba(154, 205, 0, 0.50) inset;
}

.cadre-3-i-E-20 {
	display:inline-block;
	vertical-align:top;
	width:25%;
	margin:1% 1% 0 0;
	padding: 0;
	border:none;
	border-radius:8px 8px 8px 8px;
}

.cadre-1 {
	height:auto;
	width:100%;
	margin-top:0;
	padding:2%;
	text-align:center;
	line-height: 150%;
	border-radius:4px 4px 4px 4px;
	background-color: #808000;
}

.cadre-1-b {
	margin:5px;
	padding:2% 1% 2% 1%;
	font-size:large;
	font-weight:bold;
	text-align:center;
	font-family:"Comic Sans MS";
		border-radius:4px 4px 4px 4px;
		box-shadow: 0px 0px 15px rgba(154, 205, 0, 0.60);
	animation: cadre-1-b 15s linear infinite;
}

.cadre-1-c {
	margin:15px 5px 5px 5px;
	padding:2% 1% 2% 1%;
	font-size:large;
	font-weight:bold;
	text-align:center;
	font-family:"Comic Sans MS";
		border-radius:4px 4px 4px 4px;
		box-shadow: 0px 0px 15px orange;
	animation: cadre-1-c 20s linear infinite;
}

@keyframes cadre-1-b {
	0%  {color: black;}
    60% {background: #F5F5F5; color: blue;}
	40% {color: red;}
	20% {background: #FFFAFA; color: orange;}
	80% {color: black;}
}

@keyframes cadre-1-c {
	0%  {color: black;}
	20% {background: #FFFAFA; color: orange;}
	40% {color: red;}
    60% {background: #F5F5F5; color: blue;}
	80% {color: black;}
}

/*****************************************************/
/* page "Tarif services " a voir */
.col-p-1 {
	background-color: #F5F5F5;
	border-radius: 4px 4px 4px 4px;
	margin-top:10px;
	padding:5px;
}

.col-2-80 {
	display: inline-block;
	width: 79%;
	color: #0000CD;
}

.col-2-20 {
	display: inline-block;
	width: 20%;
	color: #0000CD;
	text-align: center;
}

.col-3-80 {
	display: inline-block;
	width: 79%;
}

.col-3-20 {
	display: inline-block;
	width: 20%;
	text-align: center;
}


#nav, #nav ul {
	margin-top:0;
	padding: 0 ;
	list-style: none ;
	font-family:"Comic Sans MS";
	font-size:14px;
	font-weight:bold;
}

#nav li {
	display: inline-block ;
	width: 19% ;
	margin-right: 1px ;
	line-height:27px ;
	background: #DB0B32 ;
	color: #ffffff ;
	 	border-radius: 4px 4px 4px 4px;
}

#nav li a {
	background: #DB0B32 ;
	color: #ffffff ;
	text-decoration: none ;
	margin-left: 5px ;
	font-family:"Comic Sans MS" ;
}

/* voir problème de couleur avec "hover" */
#nav li:hover, #nav li a:hover, #nav li:focus, #nav li a:focus, #nav li:active, #nav li a:active {
  background: #9932CC ; color:orange ;
  text-decoration: underline ;
}

/*****************************************************/
/*Bloc de gauche 75% anciens*/



/*Bas de page A*/
/* Bandeaux du Bas */
#bas {
height:auto;
width:100%;
margin:0px;
padding:0px;
background-color:#ffffff;
}
	.bas-g {
	height:auto;
	width:25%;
	margin:0px;
	padding:0px;
	background-color:#ffffff;
	float:left;
	}

		.cadre-25-E {
		color:#00008B;
		font-family:"Comic Sans MS";
		text-shadow:0px 1px 0px #DB0B32;
		margin:30px 10% 0 10%;
		padding: 3px;
		line-height:185%;
		border:1px solid silver;
		border-radius:8px 8px 8px 8px;
		-moz-border-radius:8px 8px 8px 8px;
		-webkit-border-radius:8px 8px 8px 8px;
		background: linear-gradient( #DCDCDC 30%, #F5F5F5 70%);
		behavior: url(/css-js/pie/PIE.htc);
		position:relative;
		}
	
			.cadre-25-I {
			font-family:Calibri;
			text-align:center;
			line-height:normal;
			text-shadow: #ffffff 1px 1px, #ffffff -1px 1px, #ffffff -1px -1px, #ffffff 1px -1px;
			vertical-align:middle;
			text-align:middle;
			padding:5px;
			background-color: #F5F5F5;
			border:1px solid silver;
			border-radius: 8px 8px 8px 8px;
			-moz-border-radius:8px 8px 8px 8px;
			-webkit-border-radius:8px 8px 8px 8px;
			behavior: url(/css-js/pie/PIE.htc);
			position:relative;
			}

	.bas-d {
	height:auto;
	width:75%;
	margin:0px;
	padding:0px;
	background-color: #ffffff;
	float:right;
	}

/*Volet "d'infos"*/
	#volet {
	position:fixed;
	min-width: 22%;
	max-width:22%;
    padding: 10px;
	left: 100%;
	top: 45%;
	-webkit-transition: all .8s ease-in;
	transition: all .8s ease-in;
	background: radial-gradient( #F5F5F5 50%, #DCDCDC 100%);
	border:2px double silver;
	border-radius:8px;
	font-family:Calibri;
	font-size:large;
	font-style:normal;
	color:#DB0B32;
	behavior: url(/css-js/pie/PIE.htc);
	}

	#volet a.ouvrir,
	#volet a.fermer {
    position: absolute;
	padding: 10px 25px;
    background: #DAA520;
    color: black;
    text-decoration: none;
    -ms-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
	}

	#volet a.ouvrir {
	left: -105px;
	top: 40px;
    border-radius: 8px 8px 0 0;
	}

	#volet a.fermer {
    right: -79px;
	top: 40px;
    border-radius: 0 0 8px 8px;
	}

	#volet a.fermer {
    display: none;
	}

	#volet:target {
	left:71%;
	}

	#volet:target a.ouvrir {
	display: none;
	}

	#volet:target a.fermer {
    display: block;
	}

	#volet_clos:target #volet {
	}

	#volet_clos {
	position: fixed;
	}

/* Bandeau du Bas footer */
#footer {
line-height:180%;
background-color:#B22222;
margin:0px;
padding:0px;
color:#ffffff;
text-align:center;
font-family:Calibri;
font-size:12px;
border-radius:0px 0px 8px 8px;
}

</style>