﻿/* ------ NOTES ---------------------------------------------------------------

Master Screen Style for Voyage Evasion, http://www.

--------- UPDATE INFO ---------------------------------------------------------

Last updated: 30 Juillet 2008
Last update made by: Gwenvael Ballu (gwen@prospek.ca)

--------- CONTENTS ------------------------------------------------------------

1: BODY AND UNIVERSAL RESET
2: GLOBAL NAVIGATION
	a) Top navigation and user box
	b) Footer navigation
	c) Header nav
	d) Content nav
3: PAGE STRUCTURE
	a) Contianers
	b) Header
	c) Main content
	d) Footer
4: SECTION SPECIFIC STYLES
	a) Home page
	b) Signup page
	c) Start page
	d) Your list
	e) Gift tips and News
	f) Your profile and Tools
5: LISTS
6: FORMS & TABLES
	a) Standard forms
	b) Forms on Edit list page
	c) Tables for forms
7: GLOBALS
	a) Links
	b) Typography
8: MISC

---------------------------------------------------------------------------- */

/*IMPORT
============================================================================ */

@import "evasion-iewin.css";
@import url("evasion-reset.css");


/* 1: BODY AND UNIVERSAL RESET
============================================================================ */

body {
	margin: 0px;
	padding: 0px;
	background: #FFFFFF;
	color: #000;
	font: 12px/160% Arial, Verdana, Trebuchet MS, 'Bitstream Vera Sans', sans-serif;

	}

html:not([lang*=""]) body {
	overflow-y:			scroll;
}

html[xmlns*=""] body:last-child {
	overflow-y:			scroll;
}

/* Reset margin and padding for all elements */

* {margin: 0; padding: 0;}

.clearall {clear:both;}


/* 3: PAGE STRUCTURE
============================================================================ */

/* a) Containers */

.wrapper, #wrapper, #main-wrapper {width: 950px; margin: 0; padding: 0; text-align: left;}
#content {float: left; width: 100%; padding: 0; margin:0px; background: #fff;}

#content #main-wrapper {
	background: #ffffff url(images/background_content.gif) top left no-repeat;
	min-height: 370px
}

/* b) Header */

#logo {
	float: right;
	width: 193px;
	margin: 0 165px 0 0;
	color: #fff;
	}
#logo span, #logo a {
	display: block;
	width: 193px;
	height: 63px;
	border: none;
	background: url(images/logo.gif) no-repeat;
	}
#logo img  {display: block; border: none;}

#header {
	float: left;
	width: 100%;
	height: 280px;

}

#header h1 span{
	height: 28px;
	border: none;
}

#header h1 img{
	margin: 234px 0 17px 222px;	
}

/* c) main content */
#page {float:left; width: 728px; min-height: 400px; margin: 0 ; padding: 11px 0 0 0; background: url(images/background_content_right.gif) left top no-repeat;}
#menu {float:left; width: 222px; min-height: 400px; margin: 0; padding:0; background: url(images/background_content_left.gif) left top no-repeat;}



/* 2: NAVIGATION
============================================================================ */
/** d) CONTENT NAV **/


/* Menu principal */
ul#main-nav {
	list-style: none;
	padding: 0 43px 0px 0px;
	margin: 0 0 0 0;
  	border: none;
  	font-weight: normal;
  	text-align: right;
  	word-spacing: 1px;
  	}
ul#main-nav li{
	padding: 0;
	margin: 7px 0;
	height: 26px;
	font-size: 11px;
	}
ul#main-nav li a{

	text-decoration: none;
	padding: 6px 8px 8px 0px;
	margin: 0;
  	border-bottom: none;
  	font-weight: normal;
	background: url(images/background_menu_right.gif) right bottom no-repeat;
  	color: #8CC6ED;
  	}
ul#main-nav li a span{
	text-decoration: none;
	padding: 6px 10px 8px 10px;
	margin: 0;
  	border-bottom: none;
  	font-weight: normal;
  	background: url(images/background_menu.gif) left bottom no-repeat;
  	color: #8CC6ED;
  	}
ul#main-nav li a:hover{
	background: url(images/background_menu_right_h.gif) right bottom no-repeat;
	color: #5498B1;
}
ul#main-nav li a:hover span{
	
	color: #5498B1;
}

ul#main-nav li a:active{
	color: #5498B1;
}
ul#main-nav li#current{
	color: #FFFFFF;
	}
ul#main-nav li#current a{
	background: url(images/background_menu_right_s.gif) right bottom no-repeat;
	color: #FFFFFF;
	}
ul#main-nav li#current a span{
	background: url(images/background_menu_select.gif) left bottom no-repeat;
	color: #FFFFFF;
}

ul#main-nav li.btn_online_services{
	height: 50px;//38px;
	margin-top: 0; 
}

ul#main-nav li#current.btn_online_services a {
	background: url(images/background_menu_right_h_services-en-ligne.gif) right bottom no-repeat;
	color: #FFFFFF;
}

ul#main-nav li#current.btn_online_services  a span{
	background: url(images/background_menu_services-en-ligne.gif) left bottom no-repeat;
	color: #FFFFFF;
}

ul#main-nav li.btn_online_services img {
	margin:	0 1px -10px 0;
}

/*  Sous-Menu groupe */
ul.sub-nav {
	list-style: none;
	padding: 0;
  	border: none;
  	font-weight: normal;
  	text-align: left;
  	word-spacing: 2px;
	margin-top: 4px;
  	}
ul.sub-nav li {
	display: inline;
	
	margin: 0 0 0 0;
	height: 30px;
	font-size: 11px;

	/*background: url(images/background_btn_voyage.gif) left top no-repeat;*/
	}
ul.sub-nav li a{

  	text-decoration: none;
	padding: 6px 8px 8px 0px;

	margin: 0;
	
  	border-bottom: none;
  	font-weight: normal;
	/*background: url(images/background_menu_right.gif) right top no-repeat;*/
  	color: #8CC6ED;

	
  	}
ul.sub-nav li img{
	margin: 0px;
	padding: 0px;

}
ul.sub-nav li a:link span span, ul.sub-nav li a:visited span  span{
	padding: 0 0 0 0;
}

ul.sub-nav li a:link span, ul.sub-nav li a:visited span {
  	
	padding: 6px 6px 8px 10px;
	margin: 0;
  	font-weight: normal;
  	background: url(images/background_menu.gif) left top no-repeat;
  	color: #8CC6ED;
	border-bottom: none;
}

ul.sub-nav li a:hover  {
	color: #5498B1;
}

ul.sub-nav li a:hover span span{
	padding: 0 0 10px 0;
	/* Opéra :  padding: 0 0 11px 0; */
	color: #5498B1;
	background-image: url(images/background_menu_botto.gif);
	background-position: 47% 100%;
	background-repeat: no-repeat;

}

ul.sub-nav li a:active{
	color: #5498B1;
}

ul.sub-nav li#current a{
	/*background: url(images/background_btn_voyage.gif) left top no-repeat;*/
	color: #FFFFFF;
	padding-right: 0;
	border-bottom: none;

	}
ul.sub-nav li#current a span{
	/*background: url(images/background_btn_voyage_right.gif) right top no-repeat;*/
	color: #FFFFFF;
	}
ul.sub-nav li#current a span span{
	padding: 0 0 10px 0;
	/* Opéra :  padding: 0 0 11px 0; */
	/*background: url(images/background_btn_voyage_botto.gif) center bottom no-repeat;	*/
}

#menu div#reserver{
	display: none;
	
	padding: 1px 0 8px 0;
	margin: 0 0 0 60px;
	height: 26px;
	width: 115px;
	background: url(images/background_btn_reserver.gif) left top no-repeat;
	color: #FFFFFF;
}

#menu div#reserver a{
	padding: 7px 0 0 0;
	margin: 0px 8px 0 7px;
	color: #FFFFFF;
	text-decoration: none;
	font-weight: bold;
}
#menu img{
	padding: 0;
	margin: 26px 0 0 73px;
}

#menu div#inscrivez{
	display: none;
	
	padding: 2px 0 0 0;
	margin: 6px 0 0 73px;
	height: 26px;
	width: 115px;
	background: url(images/background_btn_inscrivez.gif) left top no-repeat;
}

#menu div#inscrivez a{
	padding: 0 0 0 12px;
	margin: 0;
	color: #FFFFFF;
	text-decoration: none;
	font-weight: bold;
}

/* 4:SPECIFICS STYLES
============================================================================ */
.onecolumn{
	float:left;
	width: 186px;
	margin: 0 15px 0 0;
}

.onecolumn h2.voyagesculturels{
	display: inline;
	/*padding: 6px 6px 8px 0px;*/
	margin: 0;
	
	/*width: 108px;*/
		
  	
	/*background: url(images/background_btn_voyage_right.gif) right top no-repeat;*/

	
}
.onecolumn h2.voyagesculturels img{
	margin: 0;
}
.onecolumn h2.voyagesculturels a:link, .onecolumn h2.voyagesculturels a:active, .onecolumn h2.voyagesculturels a:visited{
	text-decoration: none;
	/*padding: 6px 8px 8px 10px;*/
	margin: 0;
	
	font-weight: bold;
	/*background: url(images/background_btn_voyage.gif) left top no-repeat;*/

	
}


.onecolumn  h2.voyagesculturels a span{
	padding: 0 0 9px 0;
	background: url(images/background_btn_voyage_botto.gif) center bottom no-repeat;	

}

.onecolumn div.photos{
	padding: 8px 0 0 8px;
	margin: 8px 0 27px 0;
	height: 115px;
	width: 190px;
	background: url(images/cadre_photo_groupe.gif) left top no-repeat;
}

h3 img{
	padding: 0;
	margin: 20px 0 ;
}

.cadre{
	padding: 0;
	margin:0 0 14px 0;
	width: 563px;
	
}

.haut{
	padding: 0;
	margin: 0;
	
	height: 11px;
	background: url(images/cadre_texte_haut.gif) left bottom no-repeat;
	margin-top: -4px;
	
}
.bas{
	padding: 0;
	margin: 0;
	height: 11px;
	background: url(images/cadre_texte_bas.gif) left top no-repeat;
	margin-bottom: -8px;
	
}
.milieu{
	padding: 0;
	margin: 0;
	background: #FFFFFF url(images/cadre_texte_milieu.gif) left top repeat-y;
	
}

.open{
	float: right;
	
	padding: 0;
	margin: 0 12px 0 0;

	font-size: 11px;
	color: AFCDD7;
	
	
}

.open a:link, .open a:visited, .open a:active{
	padding: 0;
	margin: 0 0 0 10px;
	color: #AFCDD7;
	text-decoration: none;

}

.open a:hover{
	color: #5498B1;
}

a.open_file:link, a.open_file:hover, a.open_file:active, a.open_file:visited {
	background-image: url(images/fleche2.gif);
	background-repeat: no-repeat;
	background-position: 85% 40%; 
	display: block;
	color: #41788C;
	margin-left: 3px;
	padding-right: 10px;
}

h5{
	padding: 0;
	margin: 0 0 0 15px;
	color: #639DB0;
}

.bold {
	font-weight: bold;
}

div.contenu {
	padding: 0 0 0 0;
	margin: 15px 38px 0 14px;
}

div.conteneurText{
	min-height: 110px;	
}

div.conteneurText2{
	min-height: 130px;
}

div.photos_voyages{
	float: left;
	height: 120px;
	width: 179px;
	padding: 0;
	margin: 0 9px 0 0;
	background: #ffffff url(images/cadre_photos_voyages.gif) left top no-repeat;
}

div.photos_voyages{
	float: left;
	height: 120px;
	width: 179px;
	padding: 0;
	margin: 0 9px 0 0;
	background: #ffffff url(images/cadre_photos_voyages.gif) left top no-repeat;
}

div.contenu div, div.contenu p{
	font-size: 11px;
	color: #0C5A73;
	word-spacing: 0px;
}

div.contenu a{
	font-size: 11px;
	color: #0C5A73;
	font-weight: bold;
	word-spacing: 0px;
	text-decoration: none;
}

div.contenu a:hover{
	font-size: 11px;
	font-weight: bold;
	word-spacing: 0px;

}

div.contenu div a{
	font-size: 11px;
	color: #0C5A73;
	font-weight: bold;
	word-spacing: 0px;
}

div.contenu div a:hover{
	font-size: 11px;
	color: #0C5A73;
	font-weight: bold;
	font-decoration:underline;
	word-spacing: 0px;
}

.photos_voyages img{
	margin: 6px 10px 10px 6px;
}


div.photos_portrait{
	float: left;
	height: 146px;
	width: 159px;
	padding: 0;
	margin: 0 9px 0 0;
	background: #ffffff url(images/cadre_photos_portait.gif) left top no-repeat;
}

.photos_portrait img{
	margin: 6px 10px 10px 6px;

}
.right {
	float:right;
}

div.boutons{
	padding: 0;
	margin: 30px 0 0 0;
	position: relative;
	bottom: 0;
}

div.boutons div{
	padding: 6px 10px 0px 6px;
	margin: 0;
	height: 26px;
	width: 115px;
	background: url(images/background_btn_cadre.gif) left no-repeat;
}

div.boutons div a{
	padding: 0 0 5px 0;
	margin: 0;
	text-decoration:none;
	font-weight: bold;

}

h5.quicklinks {
	color: #5A9AC5;
}

div.quicklinks a {
	color: #5A9AC5;
}

.cadrequicklinks{
	padding: 0;
	margin:0 0 10px 0;
	
}




.cadreMiddle {
	background: url(images/cadre_texte_milieu2.gif) top repeat-x;
	height: 42px;
	padding-left: 5px;
	padding-right: 5px;
		font-size: 11px;
	color: #5A9AC5;
	word-spacing: 0px;

}

.cadreMiddle a{
	font-size: 11px;
	color: #5A9AC5;
	font-weight: normal;
	text-decoration: none;
}

.cadreMiddle a:hover{
	font-size: 11px;
	text-decoration: none;
	word-spacing: 0px;
	
	color: #2f6b93;
	
	font-weight: normal;

}





