/*	Screen styles for www.azimut2.com

	This file contains layout and cosmetics for CSS ~=>2.0 UAs rendering on 
	screen media type(s)
	
	[UNIX. UTF-8, tab=4spaces]										col.79 -> *

	Currently using xml encoding tag prior to head of xhtml. This sets ie6 to 
	quirks mode: leave it this as-is so we can use the same box for ie5 & ie6, 
	and therefore have one less condition to worry about.   	
	------------------------------------------------------------------------ */

/* 	general identity and core elements
	------------------------------------------------------------------------ */

body {
	margin : 0;
	text-align : center;
	color : #000;
	background : #ffd;
}

#wrapper {
	margin : 24px auto;
	border : 4px solid #fc6;
	width : 756px;
	color : inherit;
	background : #fff;
}

a {
	text-decoration : none;
	color : #930;
	background : inherit;
}

a:hover {
	text-decoration : none;
	color : #f90;
	background : inherit;
}

h1, h2, h3, h4, h5, h6 {
	margin : 0.5em auto 0 auto;
	color : #930;
	background : inherit;
}

p {
	margin : 1em auto;
}

address {
	margin : 1em auto 2em 2em;
}


/*	#branding
	------------------------------------------------------------------------ */

#branding {
	text-align : left;
	margin : 24px 24px 12px 24px;
}

#branding h1 {
	margin: 0;
	padding : 0;
	line-height : 1em;
}

 
#intro {
	position : relative;
	top : -4em;
	right : 0;
	text-align : right;
	font-size : 85%;
	color : #930;
	background : transparent;
}
	

/*	#navigation:
	------------------------------------------------------------------------ */

#navigation {	
	/*	ie alts for li{float:left} and a{display:block} done below 
		doesn't hurt others, so leave it general up here. */ 
	text-align : left;
	white-space : nowrap;
}

#navigation ul {
	display: inline;
	overflow: hidden;
	margin: 0;
	padding: 0;
	height: 46px;
	list-style: none;
}
#navigation li {
	display : inline;
	margin : 0;
	padding : 0;
	list-style : none;
}
#navigation ul > li {
	float : left;
}

#navigation a {
	overflow : hidden;
	padding : 46px 0 0 0;
	height : 0px !important; 	
	height /**/: 46px; 					/* IE5 Win*/
}

#navigation li > a {
	display : block;
}

#navigation #home {
	background-image : url("/res/img/id/menu/home.gif");
	width : 90px !important;
	clip : rect(0, 90px, 46px, 0);
}

#navigation #apartments {
	background-image : url("/res/img/id/menu/apartments.gif");
	width : 143px !important;
	clip : rect(0, 143px, 46px, 0);
}

#navigation #reservations {
	background-image : url("/res/img/id/menu/reservations.gif");
	width : 145px !important;
	clip : rect(0, 145px, 46px, 0);
}

#navigation #directions {
	background-image : url("/res/img/id/menu/directions.gif");
	width : 127px !important;;
	clip : rect(0, 127px, 46px, 0);
}

#navigation #montreal {
	background-image : url("/res/img/id/menu/montreal.gif");
	width : 129px !important;;
	clip : rect(0, 129px, 46px, 0);
}

#navigation #contact {
	background-image : url("/res/img/id/menu/contact.gif");
	width : 122px !important;
	clip : rect(0, 122px, 46px, 0);
}

#navigation a:hover {
	background-position : 0 -92px !important;
}

#navigation a:active, a.active {
	background-position : 0 -46px !important;
}

/*	#content (including misc. text styles for this zone):
	------------------------------------------------------------------------ */

#content {
	clear : both;
	margin : auto 24px;
	text-align : justify;
	padding-top : 24px;
}

#lead, #main p, #desc {
	margin : 1em auto 2em auto;
}


#content ul {
	margin-left : 16px;
	padding-left : 0;
}

#content > ul {
	padding-left : 16px;
	margin-left : 0;
}

#content ul em, #content dl em {
	font-size : 85%;
}

p.listcap {
	text-align : left !important;
	margin : 1em auto 1em 0;
	display : inline;
	line-height : 1.2em;
	border-bottom : 1px dotted #930;
	font-style : italic;
}
p.listsep {
	text-align : left !important;
	margin-top: 1em;
	margin-bottom: -2em;
	line-height : 1.2em;
	border-bottom : 1px dotted #930;
	font-style : italic;
}
#content dl, #content ul {
	text-align : left;
	margin : 0 24px 12px 24px;
}

#content dl {
	border-left : 1px dotted #930;
	border-bottom : 1px dotted #930;
}

#content dt, #content li {
	padding : 4px 0 0 4px;
	margin : 0;
}

#content dd {
	padding : 4px 0 4px 16px;
	margin : 0;
}

/*	graphic headings: (revised Phark IR technique)
	------------------------------------------------------------------------ */

h1.pagetitle {
	width : 300px;
	height : 33px;
	text-indent : -5000px;
	text-align : left;
	margin : 0;
}
h1#hometitle {
	background : transparent url("/res/img/id/titles/home.gif") top left no-repeat;
}
h1#upstairstitle {
	background : transparent url("/res/img/id/titles/upstairs.gif") top left no-repeat;
}
h1#downstairstitle {
	background : transparent url("/res/img/id/titles/downstairs.gif") top left no-repeat;
}
h1#stdominiquetitle {
	background : transparent url("/res/img/id/titles/stdominique.gif") top left no-repeat;
}
h1#reservationstitle {
	background : transparent url("/res/img/id/titles/reservations.gif") top left no-repeat;
}
h1#directionstitle {
	background : transparent url("/res/img/id/titles/directions.gif") top left no-repeat;
}
h1#montrealtitle {
	background : transparent url("/res/img/id/titles/montreal.gif") top left no-repeat;
}
h1#contacttitle {
	background : transparent url("/res/img/id/titles/contact.gif") top left no-repeat;
}

/*	flowed content:
	------------------------------------------------------------------------ */

.flowed #thumbs {
	margin : 1em 0 16px 24px;
	border : 3px solid #930 !important;
	color : #000;
	background : #ffd;
	float : right;
	text-align : center;
	line-height : 0;
}

.flowed > #thumbs {
	margin-top : 0;
}

.flowed div#thumbs {
	/*	apply this to the div element, so that size is auto if #thumbs is just 
		the img  */
	padding-right : 3px;
}
		

.flowed > div.upstairs  {
	width : 347px; /* 3 landscape-oriented thumbs + padding 
					  ie is in quirks mode and will auto-fit.*/
}

.flowed > div.downstairs {
	width : 347px; /* 3 landscape-oriented thumbs + padding 
					  ie is in quirks mode and will auto-fit.*/
}

.flowed > div.stdominique {
	width : 347px; /* 3 landscape-oriented thumbs + padding 
					  ie is in quirks mode and will auto-fit.*/
}

#thumbs img {
	margin-top : 3px;
	margin-left : 3px;
}

#thumbs p {
	margin : 0 auto;
	padding : 3px 0;
	line-height : 1em;
	text-align : center;
	font-size : 75%;
}

/*	for bilingual pages (don't forget the clear in the next element. #):
	------------------------------------------------------------------------ */

.flowed #body-en {
	float : left;
}
.flowed #body-fr {
	float : right;
}
.flowed #body-en, .flowed #body-fr {
	/*	assumes a narrow graphic in the middle.... */
	width : 38%;
}
* html .flowed #body-en, * html .flowed #body-fr {
	/*	assumes a narrow graphic in the middle.... */
	width : 35.5%;
}
.flowed #body-en address {
	text-align : left;
	margin : 1em auto 1em 2em;
}

.flowed #body-fr address {
	text-align : right;
	margin : 1em 2em 1em auto;
}

/*	#colophon: 
	------------------------------------------------------------------------ */

#colophon {
	clear : both;
	margin : 0 auto 24px auto;
	padding : 0;
}

#colophon p {
	margin : 0;
	font-size : 85%;
	line-height : 1.25em;
	text-align : center;
}


/*	deco:
	------------------------------------------------------------------------ */

/*	forms and tables:
	------------------------------------------------------------------------ */