/********************************************************/
/* Architecture d'une page                              */
/********************************************************/
body { 
	margin: 0 auto 0 auto;
	background-color: #FFF;
	color : #888888;
	background-image:url(images/fond-Qspot.jpg);
	width:100%;
}


#page{
	min-height : 500px;
  	width:98%;
  	max-width: 900px;
  	
  	position : relative;
	margin : 0 auto 0 auto;
	margin-top : 20px;
	margin-bottom : 20px;
	padding-top : 20px;
	
	
	font-family: 'Arial';
  	font-size: 12pt;
	background-color: #FFFFFF;
	border-radius: 15px ;
	border : solid #30acdf 1px;
	behavior: url(/themes/pie/PIE.php); 
	
}


.intro{
	width:90%;
	min-height : 100px;
	
	margin : 0 auto 0 auto;
	padding : 5px;
	background-color : #7aa5fe;
	border-radius: 15px ;
	behavior: url(/themes/pie/PIE.php); 
}

.content{
	width:90%;
	margin : 0 auto 0 auto;
	margin-top : 20px;
}

.explain{
	float:left;
	font-size: 10pt;
	width : 49%;
	margin-bottom : 20px;
}

.contactUs{
	//margin:3em 2em 1em;
	margin-top : 20px;
	font-size:12pt;
	text-align:justify;	
}


.stopImg{
	float:right;
	width : 49%;
}

#ridiculousImg{
	max-width:100%;
}

.qspot-logo{
	text-align:center;
	margin-top : 10px;
}

.footer{
	width:100%;
	position : absolute;
	bottom:0;
	text-align:center;
}


.triangle-obtuse {
	position:relative;
	padding:15px;
	//margin:1em 0 3em;
	color:#fff;
	background:#2e88c4;
	/* css3 */
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#075698), to(#2e88c4));
	background:-moz-linear-gradient(#075698, #2e88c4);
	background:-o-linear-gradient(#075698, #2e88c4);
	background:linear-gradient(#075698, #2e88c4);
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}

.divider{
	clear:both;
}

a {
    color: #30acdf;
    text-decoration : none;
}
a:hover {
    color : #888;
    text-decoration: none;
}

.highlight{
	color : red;
}

.triangle-obtuse.right {
	margin-right:50px;
	background:#2e88c4;
}

/* creates the wider right-angled triangle */
.triangle-obtuse:before {
	content:"";
	position:absolute;
	bottom:-20px; /* value = - border-top-width - border-bottom-width */
	left:65%; /* controls horizontal position */
	border:0;
	border-right-width:30px; /* vary this value to change the angle of the vertex */
	border-bottom-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :after */
	border-style:solid;
	border-color:transparent #2e88c4;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

/* creates the narrower right-angled triangle */
.triangle-obtuse:after {
	content:"";
	position:absolute;
	bottom:-20px; /* value = - border-top-width - border-bottom-width */
	left:60%; /* value = (:before's left) + (:before's border-right/left-width)  - (:after's border-right/left-width) */
	border:0;
	border-right-width:10px; /* vary this value to change the angle of the vertex */
	border-bottom-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :before */
	border-style:solid;
	border-color:transparent #fff;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}