html {
	background: #000 url('../images/bg_body.jpg') top center repeat;
}

body {
	font-family: Tahoma;
	color: #808f90;
	background: transparent url('../images/bg_masthead_home.png') top center repeat-x;
}

.home-illustration {
	display: none;
}

#hd {
	padding-top: 10px;
}

#bd {
	background: transparent;
}

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

a img {
	border-style: none;
}

 .jumbo-float-left{
 	float: left;
 }

.logo-text {
	vertical-align: middle;
}

a.button-link, 
.blk_c1 .inside a.button-link,
.yui-navset-top .blk_c1 .inside a.button-link,
a:hover.button-link, 
.blk_c1 .inside a:hover.button-link,
.yui-navset-top .blk_c1 .inside a:hover.button-link {
	text-decoration: none;
}

.thumb {
	float: left;
	width: 75px;
	height: 75px;
	margin: 0em 1em 0.5em 0em;
}

.thumbnail {
	margin: auto;
	background-position: center;
	background-repeat: no-repeat;
}

.thumb-mask {
	height: 75px;
	background: url(../images/thumb_mask_sprite.png) left  top no-repeat;
}

.thumbnail-link {
	display:block;
	text-decoration:none;
}

/* some of the HTML5 tags that should display as blocks by default */
article,
aside,
audio,
canvas,
datagrid,
datalist,
details,
dialog,
figure,
meter,
progress,
footer,
header,
menu,
nav,
section,
video {
  display: block;
}
/* some of the HTML5 tags that should display as inline text by default */
abbr,
eventsource,
mark,
time,
output,
bb {
	display:inline;
}

.loading {
	background-color: transparent;
	min-height: 40px;
	margin: 0 auto;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url('../images/bar_loader_fr.gif');
}

.language-fr .loading {
	background-image: url('../images/bar_loader_fr.gif');
}

.language-en .loading {
	background-image: url('../images/bar_loader_en.gif');
}

.yui-skin-sam .yui-simple-dialog .bd .yui-icon {
	margin: 15px 8px 8px 25px;
}

/* 	For all panels, we display the "Close" text
	The text-indent is then set to 0 instead of -10000 em */
#jumbo .container-close {
	vertical-align:middle;
	background: url(../images/sprite_toml_icons.png) no-repeat 44px -2348px;
	color: #808f90;
	text-decoration: underline;
	top: 15px;
	right: 21px;
	text-indent: 0;
	height: 28px;
	width: 60px;
	line-height: 28px;
	font-size: 85%;
	
}


button.close {
 	margin-left: 5px;
 }
 
/* 	For confirm and warning messages, we don't display the "Close" text */
#jumbo #jumbo-wmanager-confirm .container-close, #jumbo #jumbo-wmanager-warning .container-close {
	text-indent: -10000em;
}

#jumbo .yui-panel-container {
	text-align:left;/* since the yui.css centers all what's not in the #doc2, we align to left the content of the modale windows */
}

#jumbo .yui-panel-container form {
	background-color: transparent;
}

/* 	Skin of the Panels */
/* 	We darken a little bit more the background to give
	the panel a better focus */
.yui-skin-sam .mask {
	opacity:0.70;
	filter:alpha(opacity=70);
}
/* 	Due to the rounded corners, margin and border-width are set to 0 */
#jumbo .yui-panel .hd, #jumbo .yui-panel .bd, #jumbo .yui-panel .ft {
	border-width: 0;
	margin: 0;
}


#jumbo .yui-panel-container.shadow .underlay {
	position:absolute;
	background: none;
	opacity:0.12;
	filter:alpha(opacity=12);
	left:3px;
	right:-3px;
	bottom:-3px;
	top:3px;
}
#jumbo #tml-details .yui-panel-container.shadow .underlay {
	background-color: #000;
}

#jumbo .yui-panel {
	border:none;
	overflow:visible;
	background-color:transparent;
	padding: 0;
}

/* Style the header and apply the rounded corners, center the text */
#jumbo .yui-panel .hd, #jumbo .yui-panel .ft {
	padding:0;
	border:none;
	background:url(../images/sprite_overlay_corners.png) repeat-x 0 -120px; 
	color:#000;
	height:15px;
	margin-left:15px;
	margin-right:15px;
	text-align:center;
	overflow:visible;
}
#jumbo .yui-panel .ft {	
	background-position: 0 bottom; 
}

/* Confirm and Warning messages have buttons in the footer, so the height is set to 40px */
#jumbo #jumbo-wmanager-confirm .ft,
#jumbo #jumbo-wmanager-warning .ft,
#jumbo #jumbo-wmanager-info .ft {	
	height: 55px;
	background-position: 0 bottom; 
}

/* Style the body and footer */
.yui-skin-sam .yui-panel .bd {
	overflow:hidden;
	padding:0 8px;
	background:url(../images/bg_panel.png) repeat;
	}

.yui-skin-sam .yui-panel .bd .loading {
	background-color: #000;
}
.yui-skin-sam .yui-panel .bd .blk_c1 .loading {
	background-color: #242628;
}

/* Confirm and warning messages need to be encapsulated in a special div
	This div has the class confirm-text or warning-text with white background */
#jumbo #jumbo-wmanager-confirm .confirm-text,
#jumbo #jumbo-wmanager-warning .warning-text,
#jumbo #jumbo-wmanager-info .info-text,
#jumbo #jumbo-wmanager-confirm form,
#jumbo #jumbo-wmanager-warning form,
#jumbo #jumbo-wmanager-info form {
	background-color: #242628;
	border-color: #000000;
	border-style: solid;
	border-width: 0 7px;
	margin: 0;
	padding: 8px;
}

#jumbo #jumbo-wmanager-confirm .confirm-text form,
#jumbo #jumbo-wmanager-warning .warning-text form,
#jumbo #jumbo-wmanager-info .info-text form {
	border-width: 0;
}
/* If it happens to have a blk_c1 in a warning or a confirm message, padding is set to 0 */
#jumbo #jumbo-wmanager-confirm .confirm-text .blk_c1,
#jumbo #jumbo-wmanager-warning .warning-text .blk_c1,
#jumbo #jumbo-wmanager-info .info-text .blk_c1 {
	padding: 0;
}

#jumbo #jumbo-wmanager-confirm .confirm-text .blk_c1 h2,
#jumbo #jumbo-wmanager-warning .warning-text .blk_c1 h2,
#jumbo #jumbo-wmanager-info .info-text .blk_c1 h2,
#jumbo #jumbo-wmanager-confirm .confirm-text .blk_c1 .h2,
#jumbo #jumbo-wmanager-warning .warning-text .blk_c1 .h2,
#jumbo #jumbo-wmanager-info .info-text .blk_c1 .h2  {
	background-color: #242628;
}

#jumbo .yui-panel .hd span {
	line-height:15px;
	vertical-align:middle;
	font-weight:bold;
}
/* 	Skin of the top left corner
	Position is absolute */
#jumbo .yui-panel .hd .tl {
	width:15px;
	height:15px;
	top:0;
	left:0;
	background:url(../images/sprite_overlay_corners.png) no-repeat 0 0;
	position:absolute;
}
/* 	Skin of the top right corner
	Position is absolute */
#jumbo .yui-panel .hd .tr {
	width:15px;
	height:15px;
	top:0;
	right:0;
	background:url(../images/sprite_overlay_corners.png) no-repeat -15px 0;
	position:absolute;
}

.yui-skin-sam .yui-dialog .ft .button-group {
	padding: 5px;
	background-color: #242628;
}

#jumbo .yui-panel .ft span {
	line-height:15px;
	vertical-align:middle;
}
/* 	Skin of the bottom left corner
	Position is absolute */
#jumbo .yui-panel .ft .bl {
	width:15px;
	height:15px;
	bottom:0;
	left:0;
	background:url(../images/sprite_overlay_corners.png) no-repeat 0 -105px;
	position:absolute;
}
/* 	Skin of the bottom right corner
	Position is absolute */
#jumbo .yui-panel .ft .br {
	width:15px;
	height:15px;
	bottom:0;
	right:0;
	background:url(../images/sprite_overlay_corners.png) no-repeat -15px -105px;
	position:absolute;
}
/*	Confirm and warning messages have a footer with a bigger height
	We wet this height for the bottom left and right corners and set
	the proper background positionning */
#jumbo #jumbo-wmanager-confirm .ft .bl,
#jumbo #jumbo-wmanager-warning .ft .bl,
#jumbo #jumbo-wmanager-info .ft .bl {
	height: 55px;
	background-position: 0 -65px;
}

#jumbo #jumbo-wmanager-confirm .ft .br,
#jumbo #jumbo-wmanager-warning .ft .br,
#jumbo #jumbo-wmanager-info .ft .br {
	height: 55px;
	background-position: -15px -65px;
}

.yui-skin-sam .yui-panel-container .underlay {
	overflow:auto;
}
/*	In order to avoid spaces between elements in an overlay
	Background-color is always set to white in blk_c1 and yui-navsets */
#jumbo .yui-panel .yui-navset {
	background-color: #000;
	padding: 0 8px;
}
/* For blk_c1 in nevsets, padding is always set to 0 */
#jumbo .yui-panel .yui-navset .blk_c1 {
	padding: 0;
	background-color: #242628;
}
/* set the .clearfix class on container element that have floated elements inside */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.clearfix { /* IE fix */
	*zoom:1;
	*display:block;
}
/* invisible div that will contain the swf file required for swf storage */
#swfstore-container {
	width:0;
	height:0;
}

.yui-g.main-separator {
	background: #000 url('../images/bg_body.jpg') top center no-repeat;
	height: 10px;
}

.yui-gf {
	/*margin-bottom: 15px;
	 Change asked by Philippe background: url(../images/bg_smenu.gif) repeat-y 22% 0%; */
	background: url('../images/bg_main.png') repeat-y left top;
}

.yui-gf.no-bg {
	background: none;
}

.yui-gf .yui-u {
	width: 764px;
}

.yui-gf .yui-u.first {
	background-color: #33373b;
	width: 200px;
	border: 1px solid #4e5357;
	border-width: 0 1px;
}


.left-col-tl, .left-col-tr, .left-col-bl, .left-col-br {
	background: #1c1f24 url('../images/sprite_toml_backgrounds.png') no-repeat 100% -614px;
	height: 10px;
	margin: 0 -1px 0 14px;
}
.left-col-tl {
	background-position: 0 -614px;
	margin: 0 0 0 -1px;
}
.left-col-br {
	background-position: 100% -624px;
}
.left-col-bl {
	background-position: 0 -624px;
	margin: 0 0 0 -1px;
}

.module-tl, .module-tr, .module-bl, .module-br {
	background: #1c1f24 url('../images/sprite_toml_backgrounds.png') no-repeat 100% -554px;
	height: 10px;
	margin: 0 0 0 14px;
}
.module-tl {
	background-position: 0 -554px;
	margin: 0;
}
.module-br {
	background-position: 100% -564px;
}
.module-bl {
	background-position: 0 -564px;
	margin: 0;
}


.blk_c1 .inside .blk_c1 h2,
.blk_c1 .inside .blk_c1 .h2,
.blk_c1 .inside .module-br,
.blk_c1 .inside .module-bl {
	background-color: #242628;
}

.sep2 {
	line-height: 1px;
	background: #3f4246;
	margin: 1em 0em;
	height: 1px;
}
.sep {
	line-height: 3px;
	background: url(../images/bg_sep.gif) repeat-x 0px 0px;
	margin: 2em 0em;
	height: 3px;
}

.arianne {
	padding: 0 10px;
	margin-right: -1px;
	margin-left: -1px;
}

#arianne {
	background: url(../images/sprite_toml_bg.png) repeat-x 0px -326px;
	line-height: 30px;
	font-size: 100%;
	margin-bottom: 10px;
	height: 35px;
	/*padding-left: 9px;*/
	/**padding-left: 10px;*/
}
#arianne a, #arianne-white a {
	color: #808f90;
}

#arianne-white {
	background-image: none;
	background-color: #fff;
	color: #808f90;
	line-height: 30px;
	font-size: 100%;
	padding-left: 9px; 
	*padding-left: 11px;
	margin: 0 -11px;
}

/*************************************************************
	.blk_c1 is the class used for standard blocks on toml.
	Most of the time the block structure is:
	- Wrapping div with .blk_c1 class,
	- Wrapping title div with class .h2,
	- Title div contains a H2 tag,
	- Content div has the class .inside
***********************************************************/

/* Standard style for block wrapping div */
.blk_c1 {	
	background-color: #000;
}
.yui-g .blk_c1, .yui-gf .blk_c1 {
	background: #000 url('../images/bg_body.jpg') -535px 0 repeat-y;
	
}

.yui-g .blk_c1 .inside, .yui-gf .blk_c1 .inside {
	background: #242628;
}

.yui-g #confirm .blk_c1 {
	background-position: center -20px;
}

.yui-g #confirm .blk_c1 .inside .blk_c1 {
	background: #242628;
}
/* Standard style for block title */
.h2 {	
	background: transparent url('../images/sprite_toml_backgrounds.png') no-repeat 0 -342px;
	padding: 0px 0px 0px 10px;
}
.blk_c1 .h2.right-door, .blk_c1 h2 {
	font-size: 100%;
	line-height: 32px;
	font-weight: bold;
	background: #1c1f24 url('../images/sprite_toml_backgrounds.png') no-repeat 100% -342px;
	padding: 0 10px 0 0;
}

.blk_c1 .h2.right-door h2 {
	background: #1c1f24 url('../images/sprite_toml_backgrounds.png') repeat-x center -471px;
	line-height: 32px;
}
/* use to insert right-aligned links in block titles */
.blk_c1 h2 span {
	font-size: 77%;
	float: right;
	font-weight: normal;
}
/* Standard style for block content div */
.blk_c1 .inside {
	overflow: auto;
	padding: 7px 13px;
	border: 1px solid #3f4246;
	border-width: 0px 1px 1px 1px;
	background-color: #242628;
}
/* Standard H3 style. Normally used as sub-block title followed by a .sep2 */
.blk_c1 h3 {
	font-weight: bold;
	margin-bottom: 0.5em;
}
/* Paragraph style for .inside div and form */
.blk_c1 .inside p {
	font-size: 100%;
	margin: 0.5em 0em ;
}
.blk_c1 .inside form p {
	font-size: 100%;
	margin: 0em 0em 0.5em;
	clear: both;
}

/***********************************************************************
	.service_row class is used to create a two column content in a block 
	It's the class of the div wrapping the column set. Normal column set
	width ratio is 50/50 with a separator between columns 
********************************************************************/
/* .service_row is displaying a separator between the columns */
.blk_c1 .service_row {
	overflow: hidden;
	background: url(../images/grey_pix.gif) repeat-y 50% 0%;	

}	
.blk_c1 .col_1 {
	overflow: hidden;
	float: left;
	width: 48%;
	*width:47%;
}
.blk_c1 .col_2 {
	width: 48%;
	overflow: hidden;
	padding-left: 4%;
	float: left;
}

/* Specific timeitem-edition */
#timeitem-edition-container .service_row, #time-item-advanced-container .service_row {
	background-position: 67% 0%;
}

#timeitem-edition-container .col_1, #time-item-advanced-container .col_1 {
	width: 65%;
}

#timeitem-edition-container .col_2, #time-item-advanced-container .col_2 {
	width: 31%;
}
/*************************************************************
	Blocks can contain blocks. Instead of having a .blk_c2
	class, we use the same .blk_c1 class but we redifine
	necessary elemnts as they are nested.
**********************************************************/
/*	As title have sliding doors, the background-color needs
	to be set to match the standard .inside background-color */
#jumbo .yui-panel .blk_c1 .inside,
#jumbo .yui-panel .blk_c1 .inside .h2,
#jumbo .yui-panel .blk_c1 .inside h2 {
	background-color: #242628;
}

/*************************************************************
	In panels, blocks are not completly like standard ones
	Tyles are redifined accordingly
**********************************************************/	
/* No padding needed in panels for the top and bottom */
#jumbo .yui-panel .blk_c1 {
	padding: 0 8px;
}
#jumbo .yui-panel .blk_c1 .blk_c1 {
	padding: 0px;
	background-color: #242628;
}

.yui-gf .yui-u .blk_c1 .inside, .yui-g .blk_c1 .inside {
	border-width: 0 1px;
}

.blk_c1 .inside .img_l {
	display: block;
	margin: 0em 2em 1em 0em;
	border: 1px solid #CCCCCC;
	float: left;
}

/* paginator */
.yui-skin-sam .yui-pg-container {
	margin: 0;
}

.yui-skin-sam .yui-pg-container span.yui-pg-page,
.yui-skin-sam .yui-pg-container a.yui-pg-page {
	padding: 0 4px;
	background: none;
	border: none;
	font-weight: bold;
	text-decoration: none;
	color: #bbd1d2;
}

.yui-skin-sam .yui-pg-container a:link,
.yui-skin-sam .yui-pg-container a:active,
.yui-skin-sam .yui-pg-container a:visited,
.yui-skin-sam .yui-pg-container a:hover {
	color: #5a6367;
	background: none;
	border: none;
}


.yui-skin-sam .yui-pg-container a:active,
.yui-skin-sam .yui-pg-container a:hover {
	color: #bbd1d2;
}

.yui-skin-sam .yui-pg-container span.yui-pg-previous,
.yui-skin-sam .yui-pg-container span.yui-pg-next,
.yui-skin-sam .yui-pg-container span.yui-pg-first,
.yui-skin-sam .yui-pg-container span.yui-pg-last,
.yui-skin-sam .yui-pg-container a.yui-pg-previous,
.yui-skin-sam .yui-pg-container a.yui-pg-next,
.yui-skin-sam .yui-pg-container a.yui-pg-first,
.yui-skin-sam .yui-pg-container a.yui-pg-last {
    color: #6666;
	margin-left:1px;
	margin-right:1px;
	padding: 0 6px;
	text-decoration: none;
	background: transparent url('../images/sprite_tml_buttons.png') -269px -3px no-repeat;
}

.yui-skin-sam .yui-pg-container a.yui-pg-first {
	background-position: -269px -29px;

}
.yui-skin-sam .yui-pg-container a:hover.yui-pg-first {
	background-position: -269px -55px;

}
.yui-skin-sam .yui-pg-container a:active.yui-pg-first {
	background-position: -269px -81px;

}

.yui-skin-sam .yui-pg-container span.yui-pg-previous {
	background-position: -295px -3px;
}
.yui-skin-sam .yui-pg-container a.yui-pg-previous {
	background-position: -295px -29px;
}
.yui-skin-sam .yui-pg-container a:hover.yui-pg-previous {
	background-position: -295px -55px;
}
.yui-skin-sam .yui-pg-container a:active.yui-pg-previous {
	background-position: -295px -81px;
}

.yui-skin-sam .yui-pg-container span.yui-pg-next {
	background-position: -321px -3px;
}
.yui-skin-sam .yui-pg-container a.yui-pg-next {
	background-position: -321px -29px;
}
.yui-skin-sam .yui-pg-container a:hover.yui-pg-next {
	background-position: -321px -55px;
}
.yui-skin-sam .yui-pg-container a:active.yui-pg-next {
	background-position: -321px -81px;
}

.yui-skin-sam .yui-pg-container span.yui-pg-last {
	background-position: -347px -3px;
}
.yui-skin-sam .yui-pg-container a.yui-pg-last {
	background-position: -347px -29px;
}
.yui-skin-sam .yui-pg-container a:hover.yui-pg-last {
	background-position: -347px -55px;
}
.yui-skin-sam .yui-pg-container a:active.yui-pg-last {
	background-position: -347px -81px;
}

#id-controller ol .item .inside {
	height: 170px;
	overflow: hidden;
	border: 1px solid #3f4246;
	border-width: 0 1px 1px 1px;
}

/**
* with the following classed, we can have pure CSS triangles. To fix the dimension of the triangle, just define a font-size and a border-color
*/
.arrow-n,
.arrow-e,
.arrow-s,
.arrow-w {
  /*
   * In Internet Explorer, The"border-style: dashed" will never be
   * rendered unless "(width * 5) >= border-width" is true.
   * Since "width" is set to "0", the "dashed-border" remains
   * invisible to the user, which renders the border just like how
   * "border-color: transparent" renders.
   */
  border-style: dashed;
  border-color: transparent;
  border-width: 0.53em;
  display: -moz-inline-box;
  display: inline-block;
  /* Use font-size to control the size of the arrow. */
  font-size: 100px;
  height: 0;
  line-height: 0;
  position: relative;
  vertical-align: middle;
  width: 0;
}

.arrow-n {
  border-bottom-width: 1em;
  border-bottom-style: solid;
  border-bottom-color: #666;
  bottom: 0.25em;
}

.arrow-e {
  border-left-width: 1em;
  border-left-style: solid;
  border-left-color: #666;
  left: 0.25em;
}
                    
.arrow-s {
  border-top-width: 1em;
  border-top-style: solid;
  border-top-color: #666;
  top: 0.25em;
}

.arrow-w {
  border-right-width: 1em;
  border-right-style: solid;
  border-right-color: #666;
  right: 0.25em;
}

#toml-tos ul, #toml-tos ol {
    padding-left:0;
    margin-left:0.5em;
}

#toml-tos li {
	list-style-position: outside;
    padding-left:0;
    margin-left:1em;
}
#toml-tos ul li {
	list-style-type: disc;

}
#toml-tos ol li {
	list-style-type: decimal;
}
#toml-tos li ul li {
	list-style-type: circle;
}