/*------------------------------------*\
  RESET
\*------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0b1 | 201101
   NOTE:WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

html, body{width:100%}

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
	font-family:Verdana, Geneva, sans-serif
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
  display:block;
}

ol,ul{
  list-style:none;
}
blockquote,q{
  quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
  content:'';
  content:none;
}
/* remember to define visible focus styles!
:focus{
  outline:?????;
} */

/* remember to highlight inserts somehow! */
ins{
  text-decoration:none;
}
del{
  text-decoration:line-through;
}

table{
  border-collapse:collapse;
  border-spacing:0;
}

a{color:#D00004;text-decoration:none}
a:hover{color:#D00004;text-decoration:underline}

/* ------------------------------------------
/* Typographie generale (style transversaux)
/* ------------------------------------------ */
html { font-size: 100%; } /* Cf.: http://pompage.net/pompe/definir-des-tailles-de-polices-en-CSS/ */
body { font-size: 11px; font-family: "Muli","Trebuchet MS", Arial, Helvetica; color: #363c4b; overflow-y:scroll}

*, *:before, *:after {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			*behavior: url("./boxsizing.htc")}

/* Titraille / Intertitres */
h1,h2,h3,h4,h5,h6 { margin: 0; padding: 0; font-weight: bold; font-size: 1em; font-family: Verdana, Geneva, sans-serif; }
h1 { font-size: 1.70em; color: #000; }
h2 { font-size: 16px; font-weight: bold; margin-bottom:15px }
h2, h2 a, h2 a:focus, h2 a:hover, h2 a:active { color: #d00004; }
h3 { font-size: 1.20em; font-weight: bold; }
p{margin-bottom:14px;line-height:14px}

/* Autres enrichissements typo */
strong { font-weight: bold; }
em { font-style: italic; }
abbr, acronym { border-bottom: 1px dotted; cursor: help; }
small { font-size: 0.90em; color: #363c4b; }
dfn { font-weight: bold; color: #363c4b; }
del { text-decoration: line-through; }
ins { color: red !important; text-decoration: none; }
sup, sub { font-size: .8em; font-variant: normal; }


div#menu, h1#logo{display: block;float: left;width: 299px}
h1#logo{width: 242px}
h1#logo a{display: block;background: url('../img/le-grand-mix_logo.png') 0 0 no-repeat transparent;width:242px;height:75px}
h1#logo span{display:block;text-indent:-5000px;}
h1.titre{font-size:11px; font-weight:normal; margin-left:6px}



#page{}


#header{background-color: #E6E6E6;height: 75px;position: relative;z-index: 1000}
#header-content,#contenu{width:1024px; margin:0 auto}

/* ACCUEIl */
	#main{width:949px}
	/* MENU */
		ul.menu-liste{display:inline-block;width:700px;position:relative;left:79px; top:24px}
		li.menu-item{display:inline-block; padding-right:28px }
			li a.menu-liens{display:block; height:32px; background:url(../img/menu.png) top left no-repeat; box-sizing:normal; line-height:120px; overflow:hidden}
				li a#menu-lejeu{width:68px}
					li a#menu-lejeu:hover{background-position:0px -160px}
				li a#menu-laville{width:74px;background-position:0px -32px}
					li a#menu-laville:hover{background-position:0px -192px}
				li a#menu-lesbatiments{width:134px;background-position:0px -64px}
					li a#menu-lesbatiments:hover{background-position:0px -224px}
				li a#menu-leprojet{width:95px;background-position:0px -96px}
					li a#menu-leprojet:hover{background-position:0px -256px}
				li a#menu-contact{width:87px;background-position:0px -128px}
					li a#menu-contact:hover{background-position:0px -288px}

/* MAIN */
	#texte{margin-top: 22px; position: relative}


	#ecran-droit {float: right; margin-left: 66px; position: absolute; right: 0; top: 0}

/* OUTILS CONSTRUCTIONS */
	#outils{height:35px}
	#outils h3{display:none}
	#outils ul{display:inline-block}
	#outils li{display:inline-block;width:21px;height:31px;overflow:hidden; margin-right:15px}
	#outils a{display: block;height: 100%;overflow: hidden;text-indent: -600px;
    width: 100%;background-image:url('../img/outils.png'); background-repeat:no-repeat}
	
	#outils #rotation a:hover{background-position:0 -32px}
	
	#outils #erase{width:29px}
		#outils #erase a{background-position:-33px 0}
			#outils #erase a:hover{background-position:-33px -32px}
	#outils #zoom_plus{width:29px}
		#outils #zoom_plus a{background-position:-71px 0}
			#outils #zoom_plus a:hover{background-position:-71px -32px}
	#outils #zoom_moins{width:22px}
		#outils #zoom_moins a{background-position:-107px -14px}
			#outils #zoom_moins a:hover{background-position:-107px -46px}
	
	/* ZOOM + & ZOOM - */
	img.medium_size{width:156px;height:156px;z-index: 100}
	img.large_size{width:234px;height:234px;z-index: 100}
	
	
/* GRILLE CONSTRUCTION */

	#grille, #librairie, .infobat{
		-moz-box-shadow: 0px 0px 4px 2px #f6f6f6;
		-webkit-box-shadow: 0px 0px 4px 2px #f6f6f6;
		-o-box-shadow: 0px 0px 4px 2px #f6f6f6;
		box-shadow: 0px 0px 4px 2px #f6f6f6;
		filter:progid:DXImageTransform.Microsoft.Shadow(color=#f6f6f6, Direction=NaN, Strength=4);}
		
	#grille{float: left;height: 624px;width: 626px; overflow:hidden}
	.grille-case{width:78px;height:78px;position:relative;float:left;border-bottom:1px dashed #dfdfdf; border-right:1px dashed #dfdfdf}
		#construct-city .col-7{border-right:none}
		#construct-city .rang-7{border-bottom:none}
	/*#librairie{width:240px; height:390px; overflow:visible; float:left; margin-top:36px; direction: rtl; position:relative; background-color:#ed1c24}*/
	#librairie{width:242px; height: 390px; float:left; /*overflow:hidden;*/ margin-top:34px; direction: rtl; /*position:relative; background-color:#ed1c24*/}
		/*#librairie-scroll{width:234px;height:auto; direction: ltr; position:absolute; top:0px; right:0px}
		#librairie-scroller{display:none;width:15px;height:53px;position:absolute; top:0px; left:0px; background:url('../img/poignee-scroll.png') top left no-repeat transparent; z-index:600}*/
		 .in-use{z-index:900}
	/* SCROLLBAR */
		.mCSB_container{margin:0 0 0 8px}
		.mCustomScrollBox > .mCSB_scrollTools{right: auto; left:0px}
		.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{height:48px; width:13px; border: 2px solid white; background:#ff0000; opacity:1.0}
			.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {opacity:1.0}
		.mCSB_scrollTools .mCSB_draggerContainer {height:95%}
		.mCustomScrollBox > .mCSB_scrollTools{background:url(../img/bg-scrollbar.gif) top left repeat-y transparent}
		.mCSB_scrollTools .mCSB_draggerRail {background:none; width:6px}
			
			
		
	.morceaux{float:left;cursor:move;height:78px;width:78px}
	.grille-case .morceaux{float:none;position:absolute;top:0px}
	#valide-grille{clear:both; float:right; width:222px; height:39px; padding-top:16px; border:none; border-top:7px solid blue; background:url('../img/menu.png') 0px -314px no-repeat transparent; text-indent:999px; overflow:hidden}
		#valide-grille:hover{background-position:0px -346px; cursor:pointer; border-top:7px solid red;}
	#grille img.selected{border:3px solid blue}
	/* INFORMATION BATIMENT */
		.infobat{clear: both;float: left; margin-top: 20px;position: relative;width: 240px;z-index: 400; background:url('../img/motif-rayures.gif') top left repeat white; border-left:6px solid #fedd00; left: 3px}
			.infobat dt{font-size: 14px; font-weight:bold; margin:0 0 8px; text-align:center}
				.infobat dt a{color:inherit}
		#construct-city #liste-infos-bats{dsiplay:block; width:216px; margin:5px auto; padding:0; list-style:none}
			#construct-city dt, #construct-city dd, #construct-city .architecte, #construct-city dd .annee, #construct-city dd .ville, #construct-city dd .url_site, #construct-city dd .descriptif{display:none}
		/* INFOS BAT PAGE BATIMENTS */
			#batiment dt, #batiment dd, #batiment .architecte, #batiment dd .annee, #batiment dd .ville, #batiment dd .url_site, #batiment dd .descriptif{float:left}
			#batiment dt, #batiment dd, #batiment .architecte, #batiment dd .annee, #batiment dd .ville{display:inline-block}
			#batiment dd{width:100%; margin-bottom:15px}
			#batiment dt{position:relative; left:252px;font-size:14px; font-weight:bold}
			#batiment dd img{float:left; width:243px;margin-right:10px;position:relative;top:-13px}
			#batiment dd .ville{clear:right}
			#batiment dd .descriptif{width:660px; margin: 25px 0 15px 0; font-size:12px; line-height:normal}
			#batiment dd .url_site{font-size:12px; text-decoration:underline}
			#batiment #ecran-droit{padding:0; margin:0}
			
/* PAGE LE PROJET */		
	#projet #ecran-droit{margin:0}
	#projet #ecran-droit p{font-size:14px; line-height:normal}
	#projet .img-projet{float:left; width:242px; margin-right:66px}
		#projet .img-projet img{margin:0 0 15px}
	.logos-partenaires{float:left; margin-right:10px}
	
	/* A GARDER !! REGLE LE RENDU DE L'IMAGE ENREGISTREE */
		div#main table.grille_ss_bords{background-color:#FFFFFF}
		div#main table.grille_ss_bords, div#main table.grille_ss_bords td, div#main table.grille_ss_bords tr{border:none}
		div#main table.grille_ss_bords td img{border:none}
		
		
		/* ROTATE °*/
		/*img.quart{
		-webkit-transform:rotate(90deg);
			-moz-transform:rotate(90deg);
			-o-transform:rotate(90deg);

			-ms-transform:rotate(90deg);
		    transform: rotate(90deg);
		}
		img.demi{
		-webkit-transform:rotate(180deg);
			-moz-transform:rotate(180deg);
			-o-transform:rotate(180deg);

			-ms-transform:rotate(180deg);
			transform: rotate(180deg)
		}
		img.troisquart{
		-webkit-transform:rotate(270deg);
			-moz-transform:rotate(270deg);
			-o-transform:rotate(270deg);

			-ms-transform:rotate(270deg);
			transform: rotate(270deg)
		}*/
		
		

/* ARIANNE */
    div.ariane{clear:both;margin-bottom:91px;margin-left:161px}
    div.ariane ul{list-style:none; float:left;width:678px; display:block; padding:5px 5px 0px 8px; height:26px; background-color:white; border:1px solid #dedede;}
    div.ariane li{
        display:block;float:left;height:17px;
       /* background: url('../img/ariane_arrow.gif')top left no-repeat transparent;*/
        font-size:11px;
        color:#c4c4c4;
        padding:3px 0px 0px 9px;margin-right:5px;}
     div.ariane li.passed, div.ariane li.on{color:#D00004;}
     div.ariane li.on{text-decoration:underline;}
     div.ariane li.home{width:11px;/*background: url('../img/ariane_home.gif') 0px 4px no-repeat transparent*/}
     div.ariane li.home span{display: none}

/* PAGE VILLE */
	body#city, #city #page{width:100%}
	
	#city #header{position:fixed; top:0px; left:50%; margin-left: -512px}
	#city #outils{height:auto; top: 75px; padding:10px 0; background-color:white}
	#city #centrer{width: 24px}
		#city #centrer a{background-position: -135px 0}
		#city #centrer a:hover{background-position: -135px -32px}
	#city #ecran-droit{position:relative;width:100%; overflow:visible; margin:0}
		#city #ecran-droit #grille {margin-top: 120px}
			#city #ecran-droit .grille-taille1 td {width:78px; height:78px}
			#city #grille{width:auto; height:auto}
		
		#city #contenu, #city #main{width:100%}
		#city #outils, #city .titre {background-color: #FFFFFF; margin: 0 auto; position: relative; width: 1024px; z-index: 1001}
	#city #grille table{display:block}
		#city #grille tr{display:inline-block}
			#city #grille td{display:block}
			/*#city #ecran-droit .grille-case {float:left; display:block; width:80px; height:80px;} CORRECTION */
			#city #ecran-droit .grille-case {float:none; display:block; width:80px; height:80px;} /*  CORRECTION */
			#city #grille{float:none} /* CORRECTION */
			#city #grille:hover{cursor:move} /* CORRECTION */
			#city #ecran-droit{float:none} /* CORRECTION */
			
	/* LES TAILLES DE GRILLES EN FONCTION DU ZOOM */
			#city #contenu table.grille-taille1{width:2028px; height:2028px}
			#city #contenu table.grille-taille2{width:4264px; height:4264px}
				#city #contenu table.grille-taille2 td, #city #contenu table.grille-taille2 td .morceaux{width:163px; height:163px}
			#city #contenu table.grille-taille3{width:6110px; height:6110px}
				#city #contenu table.grille-taille3 td, #city #contenu table.grille-taille3 td .morceaux{width:234px; height:234px}
			#city #contenu table.grille-taille0{width:650px; height:650px; float:none; position:relative; margin:0 auto; }
				#city #contenu table.grille-taille0 td, #city #contenu table.grille-taille0 td .morceaux{width:24px; height:24px}
					
	


.endSection, .nettoyeur{clear:both;margin:0;padding:0;border:0;height:0;line-height:1px;font-size:1px;overflow:hidden}
.indication{font-size: 10px}

.clearfix:before,
.clearfix:after {
  content: ".";    
  display: block;    
  height: 0;    
  overflow: hidden; 
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */