/********************************************
Terrasses Knox - feuille de style
Créé par Debbie Rouleau, le 13 février 2007
dernire modification le 20 février 2007

Feuille de style du site des condos Knox, 
dans le quartier Pointe-Saint-Charles, dans
le sud-ouest de Montreal (Quebec), par
Montreal Zone Design.
*********************************************
---------------------------------------html*/
html { margin: 0px; padding: 0px; }
body { background-color: #cedeea; margin: 0px; padding: 0px; font-family: Myriad, Geneva, Arial, Helvetica, sans-serif;	font-size:12px; }
#container { width: 999px;	height: auto; min-height: 750px;	background-color: #fff;	margin:0px;	padding:0px; position:absolute; }
#bas { width: 999px;	background-color: #fff; }
#contenu { float: left;	width: 620px; min-height: 707px;	height: 100%; margin: 0px;	padding: 0px; }
#toplogo { float: left;	width: 620px; height: 173px; margin: 0px;	padding: 0px; border:none; }
#gauche { float:left; width: 170px;	min-height: 534px; background-image: url(../images/2.jpg); background-repeat: no-repeat; background-color: #fff; }
#milieu { float:left; width: 450px;	min-height: 534px; height: auto;	background-image: url(../images/3.jpg); background-repeat: no-repeat; background-color: #68b921; }
#milieu img { margin-left:10px; text-decoration:none;	border: none; text-align:right; behavior: url(iepngfix.htc); }
#milieu a{ text-decoration:none;	color: #566005; font-weight: bold; font-size: 14px; }
#milieu a:hover{ text-decoration:none;	color: #000033; }
#milieu .lien { margin-left: 10px; }
#milieu .plan3D {	margin:0px;	padding: 0px; text-decoration:none;	border: none; text-align:right;
	behavior: url(iepngfix.htc); 
	/* Mozilla ignores crazy MS image filters, so it will skip the following */
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='../images/3d_plan.png'); }
#milieu .texte {
	color: #333333;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left:10px;
	text-align:justify;
	padding: 20px;
	background-color:#9dd16e;
	filter:alpha(opacity=75);
	-moz-opacity:0.75;
	opacity: 0.75;
	line-height: 18px;
	width: 400px;
}
#milieu .texte2 {
	color: #333333;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left:10px;
	text-align:justify;
	padding: 20px;
	background-color:#9dd16e;
	line-height: 18px;
	width: 400px;
}
#milieu form {
	color: #333333;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left:10px;
	text-align:justify;
	padding: 20px;
	background-color:#9dd16e;
	filter:alpha(opacity=75);
	-moz-opacity:0.75;
	opacity: 0.75;
	line-height: 18px;
}
#droit { float:right; width: 379px;	min-height: 707px; background-color: #fff; }
/*-------------------------------------menu*/
div.menu-01 {position:relative;left:0px;top:0px;width:122px;height:5px;padding-left: 45px;}
div.menu-02 {position:relative;left:0px;top:22px;width:122px;height:5px;padding-left: 45px;}
div.menu-03 {position:relative;left:0px;top:42px;width:122px;height:5px;padding-left: 45px;}
div.menu-04 {position:relative;left:0px;top:62px;width:122px;height:5px;padding-left: 45px;}
div.menu-05 {position:relative;left:0px;top:82px;width:122px;height:5px;padding-left: 45px;}
	
div.menu-en-01 {position:relative;left:0px;top:0px;width:122px;height:5px;padding-left: 45px;}
div.menu-en-02 {position:relative;left:0px;top:22px;width:122px;height:5px;padding-left: 45px;}
div.menu-en-03 {position:relative;left:0px;top:42px;width:122px;height:5px;padding-left: 45px;}
div.menu-en-04 {position:relative;left:0px;top:62px;width:122px;height:5px;padding-left: 45px;}
div.menu-en-05 {position:relative;left:0px;top:82px;width:122px;height:5px;padding-left: 45px;}
/*----------------------------------galerie*/
#gallery { background:url(../images/bg_nav_right.jpg) right top no-repeat; padding:0 4px 10px 0; }
#gallery ul { margin:0; margin-left: 10px; padding:0; background:#960000 url(../images/bg_nav.jpg) left top repeat-x; list-style:none; position:relative; height:36px; }

#gallery ul li { display:block; width:auto; float:left; color:#fff; height:36px; }
#gallery ul li a { display:block; width:auto; color:#fff; text-decoration:none; padding:8px 1.3em 8px 1em; font:1.1em Verdana, sans-serif; background:url(../images/nav_arrow.jpg) right 0 no-repeat; }
#gallery ul li a:hover { text-decoration:underline; background:url(../images/nav_arrow.jpg) right -36px no-repeat; }
#gallery ul li#first { background:url(../images/bg_nav_left.jpg) left top no-repeat; }

#gallery ul li ul { display:none; position:absolute; top:34px; background:#fff url(../images/bg_nav.jpg) left -34px repeat-x; height:auto; width:95%; left:2%; padding:8px 5px 15px 5px; }
#gallery ul li:hover ul, #gallery ul li.over ul { display:block; }
#gallery ul li ul li { display:inline; float:none; background-image:none; height:auto; }
#gallery ul li ul li a { background-image:none; margin:8px; padding:2px; position:relative; border:1px solid #960000; float:left; display:block; width:75px; height:50px; background-color:#fff; }
#gallery ul li ul li a:hover { background-image:none; z-index:2; }
#gallery ul li ul li a img { position:absolute; top:2px; width:75px; height:50px; border:0; margin:0; padding:0; }
#gallery ul li a:hover img, 
#gallery ul li a:active img, 
#gallery ul li a:focus img { width:100px; height:75px; left:-11px; top:-10px; z-index:1; border:1px solid #000; }
#gallery ul li.overview { display:block; clear:both; padding:5px 10px 0 10px; color:#000; }
/*-------------------------------------divs*/
#listing ul {
	color: #333;
	background-color:#9dd16e;
	filter:alpha(opacity=75);
	-moz-opacity:0.75;
	opacity: 0.75;
	margin-left: 10px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-left: 40px;
	padding-bottom: 10px;
	padding-right: 5px;
	padding-top: 2px;
	text-align:justify;
	line-height:18px;
	width: 395px;
}
#langue {
	margin-top: 125px;
	padding-left: 25px;
	width: 125px;
	color: #306005;
	font-family: Myriad, Geneva, Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align:right;
	font-weight:bold;
}
#langue a{ text-decoration:none; color: #ff9900; }
#langue a:hover{ text-decoration:none; color: #000033; }
#icones { margin-top: 25px; padding-left: 25px;	padding-right: 10px;	width: 125px; text-align:left; }
#icones a, a:hover, img { text-decoration:none;	border:none; }
#piedDePage {
	margin-top: 15px;
	padding-left: 25px;
	width:125px;
	color: #306005;
	font-family: Myriad, Geneva, Arial, Helvetica, sans-serif;
	font-size:9px;
	text-align: right;
	font-weight:bold;
	word-spacing: 5px;
	line-height: 12px;
}
#piedDePage a{ text-decoration:none; color: #ff9900; }
#piedDePage a:hover{ text-decoration:none; color: #000033; }
/*----------------------------------classes*/
.telephone {
	margin-top: 15px;
	padding-left: 25px;
	padding-top: 5px;
	padding-right: 7px;
	width: 120px;
	height:40px;
	color: #306005;
	font-family: Myriad, Geneva, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	text-align:right;
	font-stretch:extra-expanded;
	background-image:url(../images/fondBureauVentes.gif);
	background-repeat:no-repeat;
	background-position: top right;
}
.telephone2 { font-size:18px;	font-weight:bold; }
.titreItalique { font-style:italic; font-size: 12px; }
.titreItalique2 { font-size: 12px; font-weight: bold; }
.bigText { font-weight: bold; }
.bigText2{ font-weight: bold;	font-size:14px; }
/*-----------------------CSS IMAGE MAP Code*/
/* Here's the list that houses the image as a background */
ul#cmp { 
  list-style-type : none;
  position : relative;
  display : block;
  background : transparent url(../images/PLAN.png) no-repeat 0 0 ;
  width : 439px;
  height : 439px;
  margin : 0 auto 0;  /* the auto part is for optionally centering the list */
  padding : 0;
}
/* This makes the list items (links and spans) easier to manage (float control) */
ul#cmp li { display : inline; }
/* Here are link specs and relationship setup */
ul#cmp li a { position : relative; display : block; text-decoration : none; }
/* This gets rid of the main content-containing outer span and all within, 
  but it remains available to assistive technologies */
ul#cmp li a span.offset { margin-top : -9000px; margin-left : -9000px; position : absolute; }
/* This is the general hover and focus state link-span properties */
ul#cmp li a:hover span.offset, ul#cmp li a:focus span.offset, ul#cmp li a:active span.offset {
  color : #000;
  background-color : #ffffde;
  display : block;
  width : 470px;
  height : auto;
  text-decoration : none;
  cursor : pointer;
}
/* This sets the inner span. Padding on the main span 
  was tried but produced odd results in IE (go figure) */
ul#cmp li a:hover span.offset span, ul#cmp li a:focus span.offset span, ul#cmp li a:active span.offset span {
  display : block; width : 460px; margin: 0px; }
/* No embedded image styles are needed except maybe border : 0 (not needed here). 
  Images are optional though, as is text. Place images in main outer span. 
  Text goes within the inner span

  What follows are CSS blocks, one for each list item link. This is a solid solution,
  but it uses a lot of CSS info. I will comment the first block only.*/
/*   Hot-Spot Number One (1) */
/* This sets the size of the list item link area and its location relative to the UL */
ul#cmp li a#cmp01 { width : 200px; height : 115px; margin-top : 0; margin-left : 125px; }
/* On hover/focus I grab the second background image, the one with the hover/focus state changes.
  I also set its position underneath the sized window I created with the hover/focus link properties.*/
/*ul#cmp li a#cmp01:hover, ul#cmp li a#cmp01:focus, ul#cmp li a#cmp01:active {
  background : transparent url(../images/cmp_flat_on.jpg) no-repeat -130px 0px;}*/
/* Now I have to set the position of the outer span in relation to the list item link */
ul#cmp li a#cmp01:hover span.offset, ul#cmp li a#cmp01:focus span.offset, ul#cmp li a#cmp01:active span.offset {
  margin-top : 10px; margin-left : 230px; }
/* Hot-Spot Number Two (2) */
ul#cmp li a#cmp02 { width : 200px; height : 100px;; margin-top : 115px; margin-left : 125px; }
/*ul#cmp li a#cmp02:hover, ul#cmp li a#cmp02:focus, ul#cmp li a#cmp02:active {
  background : transparent url(../images/cmp_flat_on.jpg) no-repeat -235px -10px; }*/
ul#cmp li a#cmp02:hover span.offset, ul#cmp li a#cmp02:focus span.offset, ul#cmp li a#cmp02:active span.offset {
  margin-top : 10px; margin-left : 230px; }
/* Hot-Spot Number Three (3) */
ul#cmp li a#cmp03 { width : 200px; height : 95px; margin-top : 0px; margin-left : 125px; }
/*ul#cmp li a#cmp03:hover, ul#cmp li a#cmp03:focus, ul#cmp li a#cmp03:active {
  background : transparent url(../images/cmp_flat_on.jpg) no-repeat -115px -88px; }*/
ul#cmp li a#cmp03:hover span.offset, ul#cmp li a#cmp03:focus span.offset, ul#cmp li a#cmp03:active span.offset {
  margin-top : 10px; margin-left : 230px; }