/**
 * contient les style en communs
 */ 
 
// Grays
@black:             #000;
@grayDark:          lighten(@black, 25%);
@gray:              lighten(@black, 50%);
@grayLight:         lighten(@black, 75%);
@grayLighter:       lighten(@black, 90%);
@white:             #fff;

// Accent Colors
@blue:              #3DB4E2;
@blueDark:          #0074BC;

body, html {
	padding: 0;
	margin: 0; 
	
	height: 100%;
  border: 0;
	/*font-family:Arial, Helvetica, sans-serif;*/
	font-family: 'Open Sans', sans-serif;
	color: #424343;
	font-size: 12px;
	min-width: 1024px;
}  

@import "public/modules/account/activate.less";
@import "public/modules/account/created.less";    

/* 
ul
{
  padding-left:13px;
}
*/
                         
button, select, textarea
{
	font-family: Arial, Helvetica, sans-serif;
	color: #424343;
	font-size: 12px;
	outline:none;
  margin: 0; 
  padding: 0; 
  border-width: 0; 
}    

/* Pour chrome */
input, select, textarea, button
{
	/*font-family:Arial, Helvetica, sans-serif;*/
	font-family: 'Open Sans', sans-serif;
	outline: none;
	.border-radius(3px);
}    

input[type=text], input[type=password], select, textarea
{
  border:1px solid #E6E6E6;
} 

a {
	color: #424343;
	text-decoration: none;
	outline: none;
}

a img {
	border: 0;
}

/*
table {
  padding:0;
  border-spacing:0 ;
  border-collapse: collapse;//bug refresh firefox
}
*/

::-webkit-input-placeholder {
    font-style:italic !important;
    color: #aaa !important;
}                     
:-moz-placeholder {
    font-style:italic !important;
    color: #aaa !important;
}

select {
  background-color: #FFF;
}

/**** formulaire ***/

.styleForm p
{
  clear:left;
  margin-bottom:5px;
}

.styleForm label
{
  float:left;
  width:200px;
  padding:2px;
}

.styleForm input, 
.styleForm input[type=text], 
.styleForm input[type=password], 
.styleForm select 
{  
  color:#424343;
  font-size:11px;
  padding:0.2em;
}
/*.styleForm input*/
.styleForm input[type=text], .styleForm input[type=password] 
{
  width:200px;
}  

.styleForm select
{
  padding:1px;
}

.styleForm .asterisque,
.styleForm2 .asterisque
{
	font-weight:bold;
	color: #cc0000;
}
.styleForm .champObligatoire
{
  margin:0;
  font-size:0.8em; 
  color: #cc0000;
}



/***** tableau generique *****/
.styleTable
{  
  width:100%;
  border: 1px solid #E6E6E6;
  border-bottom: 3px solid #C6C6C6;
}

.styleTable input
{
	color: #424343;
	font-size: 12px;
}

.styleTable .entete td, 
.styleTable .ligneEntete, 
.styleTable #tr_entete,
.styleTable thead td, 
.styleTable thead th 
{
  font-weight:bold;
  cursor:pointer;
  color:#737373;  
  background-color:#EEEEEE;
  height:30px;  
  font-size:11px;      
  padding:2px 2px 2px 5px; 
  border-left:1px solid #E6E6E6;   
}

.styleTable .content td
{
  border-top:1px solid #E6E6E6;  
  font-size:12px;  
  height:30px;    
  padding-left:1px;
  padding-right:1px; 
  vertical-align:middle;
}

.styleTable .editable
{
    border:solid 1px #FFFFFF;
    cursor:text;
    min-height:18px;  
    padding-left:1px;    
}    

.styleTable .editableForm
{
  width:100%;
    margin: 0px; padding: 0px;
}

.styleTable .editableForm input
{
    border:none;  
    background-color: #FAFAFA;
}

.styleTable .disable
{
    color:grey;
}

.styleTable .colonneAction
{
  text-align:center;
}

.disable, .disabled {
  color: #9C9E9F;
}

/************ fin tableau generique s******************/
/***  style form 3 generique ***/
.styleForm3 .champObligatoire
{
  margin:0;
  font-size:0.8em; color: #cc0000;
}
.styleForm3 .blockLeft
{
    float: left;
    padding-left:15px;
    width: 350px;
}
.styleForm3 .blockRight
{
    float: right;
    padding-right:15px;
    width: 285px;
}          
.styleForm3 .asterisque
{
	font-weight:bold;
	color: #cc0000;
}       
.styleForm3 .input
{
   margin-top:5px;
   margin-bottom:10px;
}

.styleForm3 .input .inputText
{
    font-size: 18px;
    padding-top:3px;
    padding-bottom:3px;
    width:280px;
}
.styleForm3 select.sizeSelect
{
    width:280px;
}

.styleForm3 select
{
    font-size: 18px;
    padding-top:2px;
    padding-bottom:2px; 
}

.styleForm3 .rubTitle
{
  border-bottom: 1px solid #C9C9C9;
  padding-bottom: 4px;
  font-size: 18px;
  margin-bottom:10px;
  clear:both;
}

.styleForm3 .indicatifMobile
{
  float:left;
  width:70px;
}

.styleForm3 #mobile
{
  width: 210px;
}

.styleForm3 #expiration {
	width: 240px;
}

.styleForm3 .colorPicker
{
    font-size: 18px;
    padding-top:3px;
    padding-bottom:3px;
    width:240px;
}

.styleForm3 .inputFile
{
    font-size: 18px;
    padding-top:3px;
    padding-bottom:3px;
    width:270px;
}
/***  fin style form 3 generique ***/    
                  
.styleForm2 .blockLeft, 
#monProfil .blockLeft,
#contactUs .blockLeft
{
    float: left;
    width: 385px;
}

.styleForm2 .blockLeft2
{
    float: left;
    width: 385px;
    padding-left:10px;
}

.styleForm2 .blockRight2
{
  float:right;
}

.styleForm2 .blockRight,
#contactUs .blockRight
{
    float: left;
    width: 350px;
}

.styleForm2 .input,
#contactUs  .input
{
   margin-top:5px;
   margin-bottom:10px;
}
.styleForm2 .input .inputText,
#contactUs .input input
{
    font-size: 18px;
    padding-top:3px;
    padding-bottom:3px;
    width:280px;
}
.styleForm2 select.sizeSelect
{
    width:280px;
}

.styleForm2 select
{
    font-size: 18px;
    padding-top:2px;
    padding-bottom:2px; 
}

.messageErreur, erreur
{
  color:#cc0000;
}  

#vtip { 
    display: none; 
    position: absolute; 
    padding: 10px; 
    left: 5px; 
    font-size: 0.9em; 
    
    background-color: white; border: 1px solid #a6c9e2; -moz-border-radius: 5px; -webkit-border-radius: 5px; z-index: 9999   
}

#vtip #vtipArrow { position: absolute; top: -10px; left: 5px }

.contentPageWidth
{  
  margin:auto;
  margin-left:30px;
  margin-right:30px;  
}

.contentPageWidth2
{
  margin:auto;
  min-width:1024px; 
  width:1024px; 
}
   
.rubTitle 
{
    font-size: 14px;
    font-weight: bold;
    margin-bottom:6px;
    margin-top:10px;
}   

.rubTitle2
{
    border-bottom: 1px solid #C9C9C9;
    clear: both;
    font-size: 18px;
    margin-bottom: 10px;
    padding-bottom: 4px;
    padding-top: 4px;
    font-weight: bold;
    margin-top: 10px;
}


.warning
{
  color:#cc0000;
}

.footerTab
{ 
  background:none repeat scroll 0 0 #C6C6C6;
  font-size:3px;
  height:0;
  padding:0;
}


.ajaxImageSuccess
{
  vertical-align:middle;
  float: right;
}

.ajaxImageError
{
  vertical-align:middle;
  float: right;
}

.cursorPointer, .cursor_pointer
{
  cursor:pointer;
}   


.pagination {
  font-size:12px;
  font-size-adjust:none;
  font-style:normal;
  font-variant:normal;
  font-weight:normal;
  margin-top: 10px;
} 

.pagination a {
  color:#393733;
  height:14px;
  margin:0 2px 0 0;
  padding:0 0 0 3px;
  overflow:hidden;
  text-decoration:none;
  cursor:pointer;
}

.pagination a:hover {
  background-color:#f4f5f7;
}

.pagination .selected {
  background-color:#999999 !important;
  color:#FFFFFF !important;
}

.pagination a em {
  font-style:normal;
  height:12px;
  padding:2px 4px 0px 0;
}

/** style générique champ de recherche */
#div_recherche input[name=search],
#div_recherche input[id=search], #divRecherche input[id=search],  #div_recherche input[id=recherche], #divRecherche input[id=recherche],
#divRechercheFichier input[id=recherche]
{
  color:#737373;
  /*font-family:Verdana;*/
  font-family: 'Open Sans', sans-serif;
  font-size:11px;
  padding:2px;
}

#blockFiltre, .pre-table
{
    background-color: #F6F6F6;
    padding:10px;
    border-top: solid 1px #E6E6E6;
    border-left: solid 1px #E6E6E6; 
    border-right: solid 1px #E6E6E6;
    
  a {
    color: #424343;
  }
  a:hover {
      color:#FCCA1A;
  }
}  

#paginationBasAnnuaire,
#paginationBas
{
  clear: both;
  position: relative;
  float: right;
  padding-right: 10px;
}  
                    
// Disabled 
input[disabled],
select[disabled],
textarea[disabled],
button[disabled] 
{
  cursor: not-allowed;
}

.ui-dialog-upload {
	border-color: #d4d4d4 !important;
	  //.box-shadow(0 0 12px rgba(0,0,0,.7));
	.box-shadow(2px 6px 6px rgba(0, 0, 0, 0.4));

	.ui-dialog-titlebar {
	    color: #fff !important;

	    .gradientBar(#3DB4E2, #0074BC);
	}
}
/* 
.ui-highlight-blue-button {
    color: #fff !important;
	
    background-color: #0074BC;
    background-repeat: no-repeat;
    background-image: -webkit-linear-gradient(center top, #3DB4E2, #0074BC) !important;
    background-image: -moz-linear-gradient(center top, #3DB4E2, #0074BC) !important;
    background-image: -ms-linear-gradient(center top, #3DB4E2, #0074BC) !important;
    background-image: -o-linear-gradient(center top, #3DB4E2, #0074BC) !important;
    background-image: linear-gradient(center top, #3DB4E2, #0074BC) !important;
	    
    &:hover {
	    background-color: #0074BC;
	    background-repeat: no-repeat;
	    background-image: -webkit-linear-gradient(center top, #3DB4E2, #0074BC) !important;
	    background-image: -moz-linear-gradient(center top, #3DB4E2, #0074BC) !important;
	    background-image: -ms-linear-gradient(center top, #3DB4E2, #0074BC) !important;
	    background-image: -o-linear-gradient(center top, #3DB4E2, #0074BC) !important;
	    background-image: linear-gradient(center top, #3DB4E2, #0074BC) !important;
	    background-position: 0 -15px !important;
	    color: #333 !important;
	    text-decoration: none !important;	
	}
}*/

/*****************  bouton ***********************/
// Base .btn styles
.btn, .bouton_action, button, input[type=button] {
  // Button Base
  .disable-user-select();
  font-size: 12px;
  cursor: pointer;
  display: inline-block;
  #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
  padding: 5px 10px;
  line-height: normal;
  border: 1px solid #ccc;
  border-bottom-color: #bbb;
  .border-radius(4px);  
  @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  .box-shadow(@shadow);
  
  &:hover {
    background-position: 0 -15px;
    color: #333 !important;
    text-decoration: none !important;
  }

  // Primary Button Type
  &.primary {
    color: #fff !important;
    .gradientBar(@blue, @blueDark);
    font-weight: bold;
  }
  
  // Active and Disabled states
  &.active,
  &:active {
    @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
    .box-shadow(@shadow);
  }
  &.disabled {
    cursor: default;
    background-image: none;
    .reset-filter();
    .opacity(65);
    .box-shadow(none);
  }
  &[disabled] {
    // disabled pseudo can't be included with .disabled
    // def because IE8 and below will drop it ;_;
    cursor: default;
    background-image: none;
    .reset-filter();
    .opacity(65);
    .box-shadow(none);
  }
}


.button-style-1, .bouton_jaune {
  // Button Base
  .disable-user-select();
  
  padding:0;
  margin:0;
  font-size: 12px;
  cursor: pointer;
  display: inline-block;
  #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
  padding: 5px 10px;
  line-height: normal;
  border: 1px solid #ccc;
  border-bottom-color: #bbb;
  .border-radius(4px);
  @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  .box-shadow(@shadow);
  
  &:hover {
    background-position: 0 -15px;
    text-decoration: none;
  }
  
  color: #fff !important;
  font-weight: bold;
  .gradientBar(@blue, @blueDark);

  // Active and Disabled states
  &.active,
  &:active {
    @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
    .box-shadow(@shadow);
  }
  &.disabled {
    cursor: default;
    background-image: none;
    .reset-filter();
    .opacity(65);
    .box-shadow(none);
  }
  &[disabled] {
    // disabled pseudo can't be included with .disabled
    // def because IE8 and below will drop it ;_;
    cursor: default;
    background-image: none;
    .reset-filter();
    .opacity(65);
    .box-shadow(none);
  }
}

.styleTable
{
    .btn, .bouton_action, button, input[type=button] {
        padding: 3px 10px 4px;
    }
}

.ui-state-error ul {
  list-style: none;
  padding-left: 25px;
}

.link2 {
  font-size: 11px;
  font-style: italic;
  text-decoration:none;
}

.link2:hover {
  text-decoration:underline;
}


.ui-icon-circle-plus-blue {
	background-image: url("/css/default/images/ui-icons_2e83ff_256x240.png") !important;
	background-position: 0 -192px;
}


#header-ban {
	position: relative;
	line-height: normal;
	
	.text {	
		position: absolute;
		top: 10px;
		left: 12px;
		
		h2 {
			margin: 0;
			padding: 0;
			font-size: 38px;
			font-weight: bold;
			padding-top: 10px;
			color: #333333;
		}

        h1 {
            margin: 0;
            padding: 0;
            font-size: 38px;
            font-weight: bold;
            padding-top: 10px;
            color: #333333;
        }
	}
}

// UTILITY CLASSES
// ---------------

// Quick floats
.pull-right {
  float: right;
}
.pull-left {
  float: left;
}

// Toggling content
.hide {
  display: none;
}
.show {
  display: block;
}

// Visibility
.invisible {
  visibility: hidden;
}


/****************************/
/**
 * Contient les css d'aide
 */ 
 
 
.erreur, .error {
  font-weight:bold;
  color: #cc0000;
}


.gras
{
  color: #424343;
  font-weight: bold;  
}

.hide
{
  display:none;
}

.show
{
   display:block;
}

.clearBoth
{
  clear:both;
}

.ui-state-error2, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error2 {
    background: url("images/ui-bg_inset-soft_95_fef1ec_1x100.png") repeat-x scroll 50% bottom #FEF1EC;
    color: #CD0A0A;
}   

.ui-state-error2 .ui-icon, .ui-state-error-text .ui-icon {
    background-image: url("images/ui-icons_cd0a0a_256x240.png");
}

/*! normalize.css 2012-01-22T23:30 UTC - http://github.com/necolas/normalize.css */

/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

/*
 * Corrects block display not defined in IE6/7/8/9 & FF3
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
    display: block;
}

/*
 * Corrects inline-block display not defined in IE6/7/8/9 & FF3
 */

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

/*
 * Prevents modern browsers from displaying 'audio' without controls
 */

audio:not([controls]) {
    display: none;
}

/*
 * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
 * Known issue: no IE6 support
 */

[hidden] {
    display: none;
}


/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
 *    http://clagnut.com/blog/348/#c790
 * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
 *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
 */

html {
    font-size: 100%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

/* 
 * Addresses font-family inconsistency between 'textarea' and other form elements.
 */

html,
button,
input,
select,
textarea {
    font-family: sans-serif;
}

/*
 * Addresses margins handled incorrectly in IE6/7
 */

body {
    margin: 0;
}


/* =============================================================================
   Links
   ========================================================================== */

/*
 * Addresses outline displayed oddly in Chrome
 */

a:focus {
    outline: thin dotted;
}

/*
 * Improves readability when focused and also mouse hovered in all browsers
 * people.opera.com/patrickl/experiments/keyboard/test
 */

a:hover,
a:active {
    outline: 0;
}


/* =============================================================================
   Typography
   ========================================================================== */

/*
 * Neutralise smaller font-size in 'section' and 'article' in FF4+, Chrome, S5
 */

h1 {
    font-size: 2em;
}

/*
 * Addresses styling not present in IE7/8/9, S5, Chrome
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/*
 * Addresses style set to 'bolder' in FF3+, S4/5, Chrome
*/

b, 
strong { 
    font-weight: bold; 
}

blockquote {
    margin: 1em 40px;
}

/*
 * Addresses styling not present in S5, Chrome
 */

dfn {
    font-style: italic;
}

/*
 * Addresses styling not present in IE6/7/8/9
 */

mark {
    background: #ff0;
    color: #000;
}

/*
 * Corrects font family set oddly in IE6, S4/5, Chrome
 * en.wikipedia.org/wiki/User:Davidgothberg/Test59
 */

pre,
code,
kbd,
samp {
    /*font-family: monospace, serif;*/
    font-family: 'Open Sans', sans-serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}

/*
 * Improves readability of pre-formatted text in all browsers
 */

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/*
 * 1. Addresses CSS quotes not supported in IE6/7
 * 2. Addresses quote property not supported in S4
 */

/* 1 */

q {
    quotes: none;
}

/* 2 */

q:before,
q:after {
    content: '';
    content: none;
}

small {
    font-size: 75%;
}

/*
 * Prevents sub and sup affecting line-height in all browsers
 * gist.github.com/413930
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}


/* =============================================================================
   Lists
   ========================================================================== */

ul,
ol {
    margin-left: 0;
    padding: 0 0 0 40px;
}

dd {
    margin: 0 0 0 40px;
}

nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
 * 2. Improves image quality when scaled in IE7
 *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 */

img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}

/*
 * Corrects overflow displayed oddly in IE9 
 */

svg:not(:root) {
    overflow: hidden;
}


/* =============================================================================
   Figures
   ========================================================================== */

/*
 * Addresses margin not present in IE6/7/8/9, S5, O11
 */

figure {
    margin: 0;
}


/* =============================================================================
   Forms
   ========================================================================== */

/*
 * Corrects margin displayed oddly in IE6/7
 */

form {
    margin: 0;
}

/*
 * Define consistent border, margin, and padding
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/*
 * 1. Corrects color not being inherited in IE6/7/8/9
 * 2. Corrects text not wrapping in FF3 
 * 3. Corrects alignment displayed oddly in IE6/7
 */

legend {
    border: 0; /* 1 */
    padding: 0;
    white-space: normal; /* 2 */
    *margin-left: -7px; /* 3 */
}

/*
 * 1. Corrects font size not being inherited in all browsers
 * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
 * 3. Improves appearance and consistency in all browsers
 */

button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}

/*
 * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
 */

button,
input {
    line-height: normal; /* 1 */
}

/*
 * 1. Improves usability and consistency of cursor style between image-type 'input' and others
 * 2. Corrects inability to style clickable 'input' types in iOS
 * 3. Removes inner spacing in IE7 without affecting normal text inputs
 *    Known issue: inner spacing remains in IE6
 */

button,
input[type="button"], 
input[type="reset"], 
input[type="submit"] {
    cursor: pointer; /* 1 */
    -webkit-appearance: button; /* 2 */
    *overflow: visible;  /* 3 */
}

/*
 * 1. Addresses box sizing set to content-box in IE8/9
 * 2. Removes excess padding in IE8/9
 * 3. Removes excess padding in IE7
      Known issue: excess padding remains in IE6
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}

/*
 * 1. Addresses appearance set to searchfield in S5, Chrome
 * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in S5, Chrome on OS X
 */

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/*
 * Removes inner padding and border in FF3+
 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*
 * 1. Removes default vertical scrollbar in IE6/7/8/9
 * 2. Improves readability and alignment in all browsers
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}


/* =============================================================================
   Tables
   ========================================================================== */

/* 
 * Remove most spacing between table cells
 */

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

#pricing-page {
	font-size: 14px;
	padding-bottom: 10px;
	
	input[type=submit] {
		font-size: 1.2em;
		padding: 6px 12px;
	}
	
	ul.listing {
		margin: 0;
		padding: 0;
		list-style: none; 
		
		.selected {
			font-weight: bold;
		}
	}
	
	#cgv {
		text-align: center;
		width: 400px;
		margin: 30px auto;
		margin-top: 50px ;
		
		padding: 15px 60px;
		border: 1px dashed #C9C9C9;
		
		.cgv-accept {
			margin-bottom: 10px;	
		}
		
		a {
			color: blue;
			&:hover {
				text-decoration: underline;
			}
		}
		
	}
	
	#select-offer-listing {
		margin: 0;
		padding: 0;
		list-style: none; 
		margin-left: 10px;
		
		>li {
			margin: 8px 0;
						
			label {
				display: inline-block;
				margin-left: 10px;
				vertical-align: middle;
				
				.title {
					font-weight: bold;	
				}
				
				.description {
					color: grey;
					font-size: 0.8em;
				}
			}
		}
	}
	
	#offer-desc {
		display: none;
		
		.listing.selected {
			display: block;		
		}
		
		.listing {
			display: none;
			
			>li:before {
				content: '-';	
				margin: 10px;
			}
			
			>li {
				margin: 8px 0;
			}
		}
	}
	
	#select-payment {
		display: none;
		
		.listing {
			margin-left: 10px;
			
			input[type=radio] {
				margin-right: 10px;
			}
			
			>li {
				margin: 10px 0;
			}
		}
	}
	
	#select-payment-mode {
		display: none;
		
		.listing {
			margin-left: 10px;
			
			input[type=radio] {
				margin-right: 10px;
			}
			
			>li {
				margin: 10px 0;
			}
			
			img {
				vertical-align: middle;	
			}
		}
	}
	
	#total-ht-panel {
		margin-left: 550px;
		line-height: 25px;
		
		.labels {
			float:left;
		}
		.values{
			float: left;
			margin-left: 15px;
			font-weight: bold;
		}
	}
}

.form-s1 {
	@red: #CC0000;
	
	//color: #595959;
	color: #424343;
		
	.error {
		color: @red;
		font-style: italic;
		font-weight: normal;
		font-size: 0.9em;
		
		> div {
			display: none;
			padding-top: 5px;
		}	
	}
	
	fieldset {
		border: medium none;
    	margin: 0;
    	padding: 0;
	}
	
	#nb-user-selected {
		display: inline;
		border: none;
		font-size: inherit;
		background: none;
		box-shadow: none;
		font-weight: bold;
	}
	
	.row {
		margin-bottom: 15px;
		margin-left: 10px;
		
		input[type="text"],  input[type="password"] { 
			width:268px; 
			padding: 1px 10px; 
			height:33px; 
			line-height:33px;
		}
						
		input[name=phone-code],
		input[name=tva-code] {
			width:52px; 
		}
		
		input[name=phone],
		input[name=tva] {
			margin-left: 4px;
    		width: 190px;
		}
	}
	
	.item {
		display: inline-block;
		vertical-align: top;
		
		&:first-child {
			margin-right: 20px;
		}
		
		label {
			display: block;
			color: #595959;

    		/*float: left;*/
    		font-size: 14px;
    		padding-bottom: 6px;
    		
			em {
				color: @red;
				font-weight:bold; 
				margin-left:3px; 
			}
		}
		
		.notification-container {
			display: inline-block;
			width: 50px;
			vertical-align: bottom;
		}
		
		.notification-icon {
			vertical-align: bottom;
    		height: 35px;
    		display: none;
		}
	}
	
	input[type="text"], .row input[type="password"],  select,  textarea { 
		font-size: 18px;
		color: #424343;
		background:#f5f5f5; 
		box-shadow: 0 0 5px rgba(0,0,0,.1), 0 2px 2px rgba(0,0,0,.1) inset; 
		-moz-box-shadow: 0 0 5px rgba(0,0,0,.1), 0 2px 2px rgba(0,0,0,.1) inset; 
		-webkit-box-shadow: 0 0 5px rgba(0,0,0,.1), 0 2px 2px rgba(0,0,0,.1) inset; 
		border:1px solid #c5c5c5; 
		border-radius:3px; 
		-moz-border-radius:3px; 
		-webkit-border-radius:3px;
		
		&:focus { 
			border:1px solid #e7c971; 
			box-shadow: 0 0 5px #ffe8b1, 0 2px 2px rgba(0,0,0,.1) inset; 
			-moz-box-shadow: 0 0 5px #ffe8b1, 0 2px 2px rgba(0,0,0,.1) inset; 
			-webkit-box-shadow: 0 0 5px #ffe8b1, 0 2px 2px rgba(0,0,0,.1) inset;
		}
	}
	
	input[disabled] {
		background: none !important;
	}
	
	select { padding: 6px 5px; width: 290px; height:37px; line-height:33px;}

	textarea[name=message] {
		width: 658px;
		min-height: 100px;
	}
	
	.ui-slider-handle {
		border-radius: 40px;
		top: -3px;
	}
	
	@sliderWitdh: 500px;
	
	.ui-slider-horizontal {
		margin-top: 10px;
		width: @sliderWitdh;
		height: 15px;
		#gradient .vertical(#FFFFFF, #F6F6F6);
		
    	border: 1px solid #E6E6E6;
    	border-radius: 0;
    	float: left;
    	border-radius: 15px;
	}
	
	.ui-slider-range {
	  #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); 
	  .gradientBar(@blue, @blueDark);
	}
	
	.ui-slider .ui-slider-handle {
		width: 2.1em;	
		height: 1.2em;
	}
	
	.ui-slider-range {
		border-radius: 15px;
	}
	
	.ui-slider-horizontal .ui-slider-handle {
		//top: 0.5px;
	}
	
	.legend {
		position: relative;
		clear: both;
		
		.legend-item {
			position: absolute;
			font-weight: bold;
			display:inline-block;
			border-left: 1px solid #E6E6E6;
			padding-left: 2px;
		}
		.legend-item-20 {
			left: 82px
		}
		
		.legend-item-50 {
			left: 242px;
		}
		.legend-item-60 {
			left: 294px;
		}
		
		.legend-item-70 {
			left: 346px;
		}
		
		.legend-item-80 {
			left: 400px;
		}
		
		.legend-item-90 {
			left: 453px;
		}	
	
		.legend-item-100 {
			left: 501px;
		}
	}
	
	.more-user {
		float: left;

		margin-top: 8px;
		margin-left: 50px;
		font-size: 0.9em;
		font-style: italic;
		
		a {
			color: blue;
			
			&:hover {
				text-decoration: underline;
			}
		}
	}
	
	#select-user {
		.text {
			margin-top: 35px;
			line-height: 25px;
			.clearfix();
		}
		
		.labels {
			float:left;
		}
		.values{
			float: left;
			margin-left: 50px;
			font-weight: bold;
		}
	}
	
	#total {
		text-align: center;
		font-size: 1.2em;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	
	#cpromo {
		margin-top: 25px;
		margin-left: 35px;
			
		input[name=cpromo] {
			width: 150px;
			vertical-align: middle;
		}
	}
}



#summary-page {
	padding: 10px 0;
	@borderColor: grey;
	
	table {

		border: 1px solid @borderColor;
		width: 700px;
		margin: 0 auto;
		
		th, td {
			padding: 5px;
			line-height: 1.5em;
		}
		
		>thead {
			th {
				text-align: left;
			}
			
			border-bottom: 1px solid @borderColor;
		}
	}
	
	#amount-table {

		td {				
			&:first-child {
				border-right: 1px solid @borderColor;
			}
		}
		

		td {
			&:last-child {
				text-align: right;
			}
		}
		
		.amount {
			td {
				border-top: 1px solid @borderColor;
				text-align: right;
				
				&:first-child {
					font-weight: bold;
				}
			}
		}
		
		th {
			&:last-child {
				text-align: center;
			}
		}
	}
	
	.labels {
		float:left;
		width: 100px;
		line-height: 18px;
	}
	
	ul  {
		margin-top: 0;	
	}
	
	li {
		line-height: 18px;
	}
	
	.values {
		float: left;
		line-height: 18px;
		font-weight: bold;
	}
}

#header
{
    margin: auto;
    /*width: 1000px;*/
}

#subMenuBar {    
    height: 25px;
    line-height: 25px;
    text-align: right;
    
    background-color: #F6F6F6;
    background-image: -moz-linear-gradient(center top, #FFFFFF, #F6F6F6);
    background-image: -webkit-linear-gradient(top, #FFFFFF, #F6F6F6);
    background-image: -o-linear-gradient(top, #FFFFFF, #F6F6F6);
    background-image: linear-gradient(top, #FFFFFF, #F6F6F6);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#F6F6F6'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#F6F6F6')"; /* IE8+ */  
    
    border: 1px solid #E6E6E6;
    
    a {
      margin: 0 5px;
      font-size: 14px;
    }
}    

#container
{
  min-height:100%;
}

@footerSize:194px; 

#inner {
  width: 1000px;
  margin: 0 auto;
   padding-bottom:@footerSize;
}

#footer {    
    margin-top: -@footerSize;
    //height:140px;

    float: none;
    width:100%;
     
    ul {
      padding: 0;
      margin: 0;  
    } 
       
    .head {
        height:26px;
        line-height: 25px;
      
        width: 1000px;
        margin:auto;
        font-size:15px;
        font-weight:bold;
        
        .highlight
        {
            color:#0079BD;
        }
        
        .block {
          width:160px;
        }
        
        .blockInscription {
            float:left;
            width:188px;
            background-color:#F9F9F9;
            border-left:1px solid #e5e7e7;  
            padding-left: 10px;
            
            border-top:1px solid #e5e7e7;  
            border-right:1px solid #e5e7e7;  
            text-align:center;
        }
    }
    
    .block
    {        
        float:left;
        width:145px;
    }
    
    .content
    {
        border-top: 1px solid #E6E6E6;
        
        #gradient .vertical(#F1F1F2, #FFF);   
   
         color:#828282; 
         font-size: 10px;
         
        a {
           color:#828282; 
        }
        
        a:hover {
           text-decoration:underline; 
        }
        
      
        .wrapper {
            width:1000px;
            margin:auto;
        }
        
        .block {
            padding-top:8px;
            padding-left:15px;
            
            li {
                margin-top:2px;        
            }
        }
        
        .blockInscription {
            border-left:1px solid #e5e7e7;
            padding-left: 20px;
            width:179px;
            
            text-align:center;
            
            ul {
              text-align: left;
            }
        }
    }
        
    .footer
    {
        clear:both;
        height: 60px;  
        
        .copyright {
            text-align:right;
            line-height:50px;
            padding-top: 10px;    
        }
        
        .text {
            font-size:12px;
            padding-top:2px;
        }
                                           
        .facebook {
           padding-left:15px;
           float:left; 
        }
        
        .twitter {
           float:left;
        }
        
        .twitter img,
        .facebook img {
            padding-left:10px;
        }  
    }
}

#divHeaderLine {
  background-color: #ffffff;
  font-size: 80%;
  height: 20px;
  line-height: 20px;
  padding: 0 0px;
  text-align: right;
  border-bottom: 1px solid #EFEFEF;      
}

#divMenuConnexion {
  float: right;
  font-size: 13px;
  margin-right: 15px;
  
  .inputText {
    font-size: 13px;
    width: 200px;
  }
  
  .forgotPassword, .remember {
    cursor: pointer;
    font-size: 0.8em;
    text-align: right;
    margin-top:4px;
        
    &:hover {
      text-decoration: underline;
    }
    
    input[type=checkbox] {
      vertical-align: bottom;
    }
  }
  
  .remember {
    &:hover {
      text-decoration: none;
    }
  }
  
  input[type=submit] {
    margin-left: 5px;
    margin-top: 2px;
  }
}                        

.logo-header-txt {
	color: #9C9E9F;
	font-weight: bold;
	position: relative;
	left: 60px;
	top: -5px;
}                                           

#formVerification #errorMessage 
{
    padding-left:5px;
    margin-bottom:10px;
    padding-top:5px;
    padding-bottom:5px;
} 

#loginPage
{
   .links a {
      text-decoration:underline;
      font-size: 0.8em;
      margin-right: 10px;
   }
}


#pageRegeneratePassword .mainTitle
{
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 15px;
}

#signup {
   width:800px;
   margin:auto; 
   
   .mainTitle {
        font-size: 30px;
      font-weight: bold;
      margin-bottom: 20px;
   }
}

.rubTitle h1 {
  margin: 0;
  padding: 0;
  font-size: inherit;  
}

#page_sendNewPasswordLink {
  .link {
    text-decoration: underline;
  }
}

@zindexTooltip:           1020;

.tooltip {
  position: absolute;
  z-index: @zindexTooltip;
  display: block;
  visibility: visible;
  padding: 5px;
  font-size: 11px;
  //.opacity(0);
  
  &.in { .opacity(80); }
  &.top { margin-top: -2px; }
  &.right { margin-left: 2px; }
  &.bottom { margin-top: 2px; }
  &.left { margin-left: -2px; }
  &.top .tooltip-arrow { #popoverArrow > .top(5px, #0074BC); }
  &.left .tooltip-arrow { #popoverArrow > .left(5px, #0074BC); }
  &.bottom .tooltip-arrow { #popoverArrow > .bottom(5px, #0074BC); }
  &.right .tooltip-arrow { #popoverArrow > .right(5px, #0074BC); }
}

.tooltip-inner {

  max-width: 200px;
  padding: 8px 12px;
  font-size: 12px;   
  text-align: center;
  text-decoration: none;

  color: white;
  font-weight: bold;
  #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); 
  .gradientBar(@blue, @blueDark);
  
  border: 1px solid #ccc;
  border-bottom-color: #bbb;
  
  box-shadow: 1px 1px 2px #a7a7a7;
  .border-radius(5px);
}

.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
}

h2.headComparative {
  /*font-family:Arial, Helvetica, sans-serif;*/
  font-family: 'Open Sans', sans-serif;
  color: #424343;
  font-size: 12px;
  font-weight: normal;
}

#homepage {
	margin-left: auto;
	margin-right: auto;
	width: 1000px;
}

#homepage #signMoreDiv
{
    padding-top:35px;
    padding-left:10px;
}

#homepage .signUpButton
{
    /*background-image: url(/images/home/bt_signup.gif);*/
    //background: url(/images/home/sprite_index.png) no-repeat scroll 0 -36px transparent;
    background: url(/images/home/bouton_wedrop_ok.png) no-repeat;
    line-height: 31px;
    height: 41px;
    width: 189px;
    display: block;
    font-size: 14px;
    float: left;
    margin-left:15px; 
    color:#424343;
    text-align: center;
}

#homepage .knowmoreButton
{
    /*background-image: url(/images/home/bt_knowmore.gif);*/
    background: url(/images/home/sprite_index.png) no-repeat scroll 0 0 transparent;
    line-height: 31px;
    height: 36px;
    width: 170px;
    display: block;
    font-size: 14px;
    float: left;    color:#424343;
    text-align: center;
}

#homepage #homeLeft {
	float: left;
	width: 442px;
}

#homepage #homeLeft .header {
   font-size:33px;font-weight:bold;line-height:1.1em;
}

#homepage #homeRight {
	float: right;
	width: 558px;
}

#homepage #infos {
    margin-top:35px;
}

#homepage #references {
   padding-top: 60px;
}

#homepage #infos .infoBlock {
    float:left;
    width:325px;
    /*padding-right: 15px; */
}

#homepage #infos .infoBlock .blockLeft {
   float:left;
   width:100px;
}

#homepage #infos .infoBlock .blockRight {
   float:right;
   width: 220px;
}

#homepage #infos .infoBlock .title {
    font-weight:bold;
    font-size:14px
}

#homepage #infos .infoBlock .content {
  text-align:justify;
}

#homepage #infos .infoBlock h3 {
	margin: 0;
}

#homepage .header h1 {
	font-size: 20px !important;
    line-height: 28px;
}

#div_titre_bloc1_haut_droit {
    background-image: url("/images/home/laptop.png");
    height: 354px;
}

#div_titre_bloc1_haut_droit  .wrapper {
	padding-left: 62px;
    padding-top: 24px;
}

#jquery-notification 
{
  border-radius: 5px;
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
  padding: 15px;
  font-weight:bold;
  font-size:17px;
  
	    /* ne pas sélectionner le texte*/
	    -moz-user-select: none;
	    -webkit-user-select: none;
	    -o-user-select: none;
	    -ms-user-select: none;
	    user-select: none; 
}

.jquery-notification-info, .jquery-notification-success
{
	background-color: black;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 5px;
  color: #FFF; 
}

.jquery-notification-error
{
    background: url("images/ui-bg_inset-soft_95_fef1ec_1x100.png") repeat-x scroll 50% bottom #FEF1EC;
    color: #CD0A0A;
}



.comparative-list {
	margin: 0 auto;
    overflow: hidden;
    width: 917px;
}

.comparative-list .header {
	background-image: url("/img/wd/header_comparatif.png");
    height: 224px;
    left: 175px;
    position: relative;
    width: 746px;
}

.comparative-list .col {
	float: left;
	width: 200px;
	text-align: center;
	margin-right: 3px;
}

.comparative-list .col2 {
	width: 223px;
}

.comparative-list .col3 {
	width: 226px;
	margin-right: 1px;
}

.comparative-list .col4 {
	width: 223px;
}

.comparative-list .col2 .row {
	background-color: #F6F5F5;
}

.comparative-list .col3 .row {
	background-color: #ECECEC;
}

.comparative-list .col4 .row {
	background-color: #E2E2E2;
}

.comparative-list .row {
	border-bottom: 2px solid grey;
	height: 36px;
}
.comparative-list .col2 .row, 
.comparative-list .col3 .row, 
.comparative-list .col4 .row {
	line-height: 36px;
}

.comparative-list .row img {
	padding-top: 11px;
}

.comparative-list .row-last {
	/*padding: 5px 1px;	*/
	border-bottom: none;
}

.comparative-list .labels .row {
	display: table;
	width: 100%;
}

.comparative-list .labels .row-inner {
	display: table-cell;
	vertical-align: middle;
}

.comparative-list .footer {
	background-image: url(/img/wd/footer_vert.jpg);
	background-repeat: no-repeat;
	left: 197px;
    position: relative;
    height: 55px;
}

.comparative-list .footer-col {
	display: inline-block;
}

.comparative-list .footer-col a {
	color: #FFF;
	font-size: 1.2em;
    font-weight: bold;
  	display:inline-block;
	height: 45px;
    line-height: 45px;
    position: relative;
    top: 10px;
    padding: 0 65px;
}

.comparative-list .footer-col a:hover {
	color: black;
}

.header-col {
    /*position: relative;
    top: 10px;
    padding: 0 76px;*/
    display:inline-block;
    position: absolute;
    text-align: center;
    line-height: 18px;
}

.header-col .title {
	font-weight: bold;
	font-size: 1.5em;
}

.header-col1 {
	left: 70px;	
	top: 136px;
}

.header-col2 {
	left: 280px;
    top: 152px;
}

.header-col3 {
	left: 563px;	
	top: 138px;
}