@charset "utf-8";
body {
font-family:Verdana, Geneva, sans-serif Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background : #fff;
margin : 0;
padding : 0;
}
ul, ol, dl {
	list-style-type: none;
	list-style-position: outside;	
	padding : 0;
	margin : 0;

}

h1, h2, h3, h4, h5, h6 {
margin-top : 0;
padding-right : 0px;
text-align:left;
}
section {
	border-top: 1px dotted #FF0000;
	margin:0px 0 40px 0;
	padding : 15px 2px 0px 0px;
	clear:both;
}
h1 {
	font-family:Verdana, Geneva, sans-serif Verdana, Arial, Helvetica, sans-serif;
	font-size : 1.3em;
	font-weight:bold;
	color: #000;
	margin-bottom:5px;
	
}
h2 {
	font-family:Verdana, Geneva, sans-serif Verdana, Arial, Helvetica, sans-serif;
	font-size : 1em;
	font-weight:bold;
	color: #000;

	
}
hr {
	clear:both;
	height:1px;
	color:#fff;
}

.infoprojet {
	font-family:Verdana, Geneva, sans-serif Verdana, Arial, Helvetica, sans-serif;
	font-size : 0.58em;
	font-style: italic;
	color: #666;
	margin-bottom:15px;
}
.legende {
	font-family:Verdana, Geneva, sans-serif Verdana, Arial, Helvetica, sans-serif;
	font-size : 0.58em;
	color: #F0F;
	line-height:12px;
}


a img {
border : none;
}
a:link {
color : #00F;
text-decoration : underline;
}
a:visited {
color : #666;
text-decoration : underline;
}
a:hover, a:active, a:focus {
text-decoration : none;
}
p {
	font-size: 0.75em;
	line-height:1.45em;
}
p ul li {
	font-size: 0.75em;
	line-height:1.45em;
}

/* banner (header) */
#header a:hover {
text-decoration : none;
background-color : #00f;
color : #fff;
}
#header {
	/*
	border-bottom : 1px dotted #000;
	
	height:40px;*/
	width : 100%;
	z-index : 10;
	position : fixed;
	top : 0;
	
}

#titre {
	position : absolute;
	background-image: url(img/logo-tf_40.png);
	background-repeat: no-repeat;
	background-position: left center;
	height:41px;
	width:180px;
	z-index:1;
}
#titre span{
	font-family:Verdana, Geneva, sans-serif Verdana, Arial, Helvetica, sans-serif;
	font-size : 0.7em;
	position:absolute;
	font-weight:bold;
	margin:13px 0 0 50px;
}
#titre a:hover{
	/*background-color: ;*/
}

#menu {
	width:100%;
	position : absolute;	
	font-family:Verdana, Geneva, sans-serif Verdana, Arial, Helvetica, sans-serif;
	font-size : 0.7em;
	background-color:#FFF;
	border-bottom:1px dotted #000;
	padding :5px 0px 0px 200px;
}
#realisations, #archives, #informations, #etaussi {
	padding-bottom: 14px;
}
.menuitem_type {
	font-family:Verdana, Geneva, sans-serif Verdana, Arial, Helvetica, sans-serif;
	font-size : 0.8em;
	color:#999;
}
/* Contenu */
#content {
	height:auto;
	max-width:900px;
	text-align : left;
	margin : 80px auto 0px auto;
	padding : 0px 3px 30px 3px;
}
/* Contenu réalisations*/
#content img {
	position:relative;
	float:left;
	margin: 0px 5px 5px 0;
}
/* Boutons aside */
aside {
	right: 6px;
    position: fixed;
    top: 75px;
	z-index:1;
}
#iwantone {
	background-image: url(img/iwantone.png);
	background-repeat: no-repeat;
	width :100px;
	height :100px;
	display:block;
    /*right: 12px;
    position: fixed;
    top: 75px;
	z-index:1;*/
}
#someeting {
	background-image: url(img/someeting.png);
	background-repeat: no-repeat;
	width :100px;
	height :100px;
	display:block;
    /*right: 12px;
    position: fixed;
    top: 75px;
	z-index:1;*/
}
#nofis-mini {
	background-image: url(img/nofid-sticker_mini.png);
	background-repeat: no-repeat;
	width :100px;
	height :100px;
	display:block;
    /*right: 12px;
    position: fixed;
    top: 275px;
    z-index:1;*/
}
#partage {
	/*background-image: url(img/share-sticker.png);
	background-repeat: no-repeat;*/
	width :100px;
	height :100px;
	display:block;
	/*z-index:1;
	right: 12px;
	top: 75px;
	position: fixed;*/
}

#at15s {
	 position: fixed;
}
.citation {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size : 2.5em;
	line-height:1.2em;
	background-color:#FF0;
}
.citation2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size : 2.5em;
	line-height:1.2em;
	background-color:#0FF;
}
.citation3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size : 2.5em;
	line-height:1.2em;
	background-color:#0F0;
}
#barreboutons {
	right: 12px;
    position: fixed;
    top: 75px;
}

/* Contenu  accueil
#picthome {
	text-align:center;
	width:100%;
	height:auto;
	margin : 160px auto 0px auto;
}
#picthome img{
	float:none;
	width:100%;
}*/
#homepict {
	text-align:center;
	width:100%;
	height:auto;
	margin : 160px auto 0px auto;
}

/* footer */
footer {

background : #fff;
border-top : 1px dotted #000;
position : fixed;
bottom : 0;
width : 100%;
z-index:10;
height:30px;
}
footer .mentions {
	padding-bottom:5px;
}
.mentions {
	margin : 4px 0 0px 4px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:0.6em;
	text-align:left;
}

.fltrt {
float : right;
margin-left : 8px;
}
.fltlft {
float : left;
margin-right : 8px;
}
.clearfloat {

clear : both;
height : 1px;
width:100%;
margin:10px 0 40px 0;

}

/* fullscreen */
#bgimg {
	position:absolute;
	z-index: -1;
}
/* Fullscreen */
#realbody{
	position:absolute;
	z-index: 1;				/* Place the new body above the background image */
	overflow:hidden; 			/* restore scrollbars for the content */
	height:100%;width:100%;	/* Make the new body fill the screen */
	background: url('img/raster.png'); /* this is just a fancy raster, you can remove it; I kinda like it though */
}
#nofis {
	width:200px;
	height:200px;
	margin: 5px 5px 5px 5px;
	background-image: url('img/nofis-sticker.gif');
	background-repeat: no-repeat;
	/*display:block;*/
}
/** ScrollToTop **/
#scrollToTop a{
	position: fixed;
	right: 20px;
	bottom: 35px;
	height : 40px;
	width:77px;
	background-image: url('img/fleche_hdp.gif');
	background-repeat: no-repeat;
	display:block;
	/*padding: 7px 10px;
background-color: rgb(255,255,255);
background-color: rgba(255,255,255, 0.7);border: 1px solid #000;*/
}
#scrollToTop a:hover{
	background-image: url('img/fleche_hdp.gif');
	height : 40px;
	background-position: -77px 0px;
	display:block;
	/*	
	background-color:#FF0;
box-shadow: 0px 0px 5px #222;
-moz-box-shadow: 0px 0px 5px #222;
-webkit-box-shadow: 0px 0px 5px #222;
text-decoration: none !important;*/
}

/** boites metro **/
.boxmod {
	background-color:#39F;
	float:left;
	width:200px;
	height:200px;
	margin: 0 4px 4px 0;
}
.boxmod:hover {
	background-color:#F0F;
}
.boxmod a{
	text-decoration:none;
}
.boxmod a:hover{
	text-decoration:none;
}
.boxmod p {
	margin:0 0 0 5px;
	color:#fff;
}
.contactbase {
	background-color:#E5E5E5;
	color:#000;
	width:404px;
	background-image: url(img/courriel.png);
	background-position: right center;
	background-repeat: no-repeat;
}
.contactbase p {
	color:#000;
}
.facebook {
	/*background-color:#039;*/
	background-image: url(img/facebook.png);
	background-position: center center;
}
.twitter {
	/*background-color:#039;*/
	background-image: url(img/twitter.png);
	background-position: center center;
}
.live {
	/*background-color:#039;*/
	background-image: url(img/windows.png);
	background-position: center center;
}
.linkedin {
	/*background-color:#039;*/
	background-image: url(img/linkedin.png);
	background-position: center center;
}
.viadeo {
	/*background-color:#039;*/
	background-image: url(img/viadeo.png);
	background-position: center center;
}
.ixda {
	/*background-color:#039;*/
	background-image: url(img/ixda.png);
	background-position: center center;
}
.pinterest {
	/*background-color:#039;*/
	background-image: url(img/pinterest.png);
	background-position: center center;
}
.foursquare {
	/*background-color:#039;*/
	background-image: url(img/foursquare.png);
	background-position: center center;
}
.google {
	/*background-color:#039;*/
	background-image: url(img/google+.png);
	background-position: center center;
}
.download {
	/*background-color:#039;*/
	background-image: url(img/download-workbench.png);
	background-position: center center;
}
.skydrive {
	/*background-color:#039;*/
	background-image: url(img/skydrive.png);
	background-position: center center;
}
.nocolor, .nocolor:hover {
	background-color:#fff;
}
.contactlist li a {
	text-decoration:none;
}

#working {
	width:100%;
	height:400px;
	background-image: url(img/working.png);
	background-repeat: no-repeat;
	background-position: center center;
}

.clickable {
   cursor: pointer;
}
#titreprint {display:none;}


/* Disable iOS/WinMobile font size changes */
@media screen and (max-width: 600px),
screen and (max-device-width: 480px) {
html {
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
}
} /*/mediaquery*/



@media print {
	#partage {display:none;}
	footer {position:relative;}
	#header {display:none;}
	#content {margin-top:0px;}
	#titreprint {display:block;font-size:0.75em;}
	body {font-size:11pt;}
	p {font-size:9pt; line-height:12pt}
	#content img {width:50%;height:auto;margin: 0px 5px 10px 0;}
	.citation {font-size: 18pt;line-height: 20pt;}
	
	/*.clearfloat {break-before:always;}
	section {page-break-after:always;}*/

	
}  /*/mediaquery*/

@media screen and (max-width:768px) {
#menu {
	margin-top:40px;
	padding :00px 0px 0px 0px;
	border-top:1px dotted #000;
}
#header {
	background : #fff;
	height:40px;
}
#content {
	margin: 100px auto 0;
    /*width: 700px;*/	
}
#content article img {
	width:40%;
	height:auto;
	clear:both;
}
aside {
    top: 90px;
}
	
} /*/mediaquery*/
@media screen and (max-width:480px) {
#content article img {
	width:100%;
	height:auto;
	clear:both;
}
.sf-menu li {
    clear:left;
	width:100%;
}
.contactlist {
	width:100%;
}

#realisations, #archives, #informations, #etaussi {
    border-top: 1px dotted #000000;
}
#header {
    position: relative;
	height:200px;
}
#menu {
	border-top:none;
	margin-top:200px;
	padding-left :0px;
}

#content {
	margin: 170px auto 0;
    /*width: 700px;*/	
}
#realbody {
    margin-top: 0px;
	width:100%;
}
aside {
    top: 136px;
	z-index:10;
	/*clear:both*/
}
.citation {
	font-size : 1.7em;
}
.citation2 {
	font-size : 1.7em;
}
.citation3 {
	font-size : 1.7em;
}
.legende {
	font-size:0.75em;
}
footer {
	/*height:35px;*/
	position:static;
	bottom:0px;
}
aside #partage {
	display:none;
	position:relative;
}
aside .addthis_button_compact {
	display:none;
}
#scrollToTop, #scrollToTop a, #scrollToTop a:hover {
    bottom: 45px;
    margin: 0 auto;
    position: relative;
    right: 0;
}
#bgimg {
	margin-top:340px;
	display:none;
	
	
}
#realbody {
	margin-top:30px;
	width:100%;
	height:100%;
	background: url("img/bg37.jpg") no-repeat scroll 0 0;
}
#titre {
	background-image: url("img/logo-tf_240x180.png");
    background-position: center center;
    height: 200px;
    margin: 0 auto;
    width: 100%;
}
#titre span {
	display:none;
}
.contactbase {
	width:100%;
}
.facebook, .twitter, .live, .foursquare, .linkedin, .viadeo, .pinterest, .ixda, .google, .download, .skydrive {
	width:100%;
	background-repeat: no-repeat;
	background-position: center center;
	margin: 0 2px 2px 0;
}

} /*/mediaquery*/