/********************************************************/
/* Architecture d'une page                              */
/********************************************************/
body { margin: 0 auto 0 auto; background-color: #818181;}

#page{
	position: relative;
	font-family: 'Arial';
  font-size: 8pt;
	margin: 20px auto 20px auto;
	width: 950px;	
	background-color: #FFFFFF;
	z-index: 1;
}

#pageHeader{
	padding: 5px 10px 5px 10px;
}

#pageHeader div.logo{
	background-image: url("images/logo-quickspot.gif");
	width: 470px;
	height: 80px;
	border: solid 1px white;
	float:left;
}

#pageHeader div.sentence{
	color: #45AFE0;
	font-size: 11pt;
	margin-left: 80px;
	margin-top: 60px;
}

#pageHeader div.authMessage{
	float:right;
	margin-top:20px;
	margin-right: 50px;
	text-align:right;
}

#pageHeader div.sentence font.nbHotSpot{
	color:black;
}

.pageContent{
	padding-top: 10px;
	padding-left: 20px
}

#pageFooter{
	text-align:center;
	padding-bottom: 10px;
}

#pageFooter div.separator{
	width:100%;
	height: 12px;
	background: url('images/bg-primary-navbar.gif') repeat-x top left;
	border-bottom: solid 1px #CFCFCF;
	margin-bottom: 10px;
}

/********************************************************/
/* Style pour le menu principal                         */
/********************************************************/

#mainMenu{
	height: 30px;
	width: 100%;
	border-bottom: solid 1px #CFCFCF;
	background: url('images/bg-primary-navbar.gif') repeat-x bottom left;
}

#mainMenu div.menuItem, #mainMenu div.menuItemSelected{
	float:right;
}

#mainMenu div.menuItem div.leftSide, #mainMenu div.menuItemSelected div.leftSide{
	height: 31px;
	width:12px;
	background: url('images/menu-off-left.gif');
	float:left;
}

#mainMenu div.menuItem div.content, #mainMenu div.menuItemSelected div.content{
	float:left;
	height:31px;
	background: url('images/menu-off-middle.gif');
}

#mainMenu div.content p{
	margin-top:10px;
}

#mainMenu div.menuItem div.rightSide, #mainMenu div.menuItemSelected div.rightSide{
	height: 31px;
	width:12px;
	background: url('images/menu-off-right.gif');
	float:left;
}

#mainMenu div.divider{
	float:right;
	width: 2px;	
}

#mainMenu div.menuItem div.content a:link, #mainMenu div.menuItemSelected div.content a:link,
#mainMenu div.menuItem div.content a:visited, #mainMenu div.menuItemSelected div.content a:visited{
	color:#2D5081;
	text-decoration:none;
	font-weight:bold;
	font-size: 8pt;
	font-family: 'verdana', 'trebuchet ms', 'sans-serif';
}

#mainMenu div.menuItemSelected h1{
	color:#FF8000;
	text-decoration:none;
	font-weight:bold;
	font-size: 8pt;
	font-family: 'verdana', 'trebuchet ms', 'sans-serif';
}

#mainMenu div.menuItemSelected div.content a:link, #mainMenu div.menuItemSelected div.content a:visited{
	color: #FF8000;
}

#mainMenu div.menuItem div.content a:hover, #mainMenu div.menuItemSelected div.content a:hover{
	text-decoration: underline;
}

#mainMenu div.menuItemSelected div.leftSide{
	background: url('images/menu-on-left.gif') repeat top right;
	width:9px;
}
#mainMenu div.menuItemSelected div.content{
	background: url('images/menu-on-middle.gif');
}
#mainMenu div.menuItemSelected div.rightSide{
	background: url('images/menu-on-right.gif');
	width:9px;
}

/********************************************************/
/* Style pour le menu de gauche                         */
/********************************************************/

#leftMenu{
	float:left;
}

#leftMenu div.group{
	margin-top: 20px;
}

#leftMenu div.groupTitle{
	background: url('images/leftMenu-groupTitle.gif');
	height: 20px;
	width: 159px;
	padding-top: 2px;
	padding-left: 10px;
	font-family: 'verdana', 'trebuchet ms', 'sans-serif';
}

#leftMenu div.group ul{
	margin-top: 0px;
	margin-left: 10px;
	padding-left: 9px;
}


#leftMenu div.group ul li{
	list-style-image: url('images/arrow_east.gif');
	margin-left: 8px;
	margin-top: 4px;
}

#leftMenu div.retailerButton{
	margin-top: 20px;
}

/********************************************************/
/* Style pour le floatingPanel                          */
/********************************************************/
.floatingPanel{
	background-color: white;
	position: absolute;
	font-family: 'Arial';
  font-size: 8pt;
}

.floatingPanel div.closingButton{
	float:right;
	cursor:pointer;
	background: url('images/close.png') repeat-x top left;
	height: 12px;
	width: 12px;
	margin-right:2px;
	margin-top: 2px;
}

.floatingPanel div.content{
	margin: 0px 10px 10px 10px;
}


/********************************************************/
/* Style des différents conteneurs d'une page           */
/********************************************************/
.blockParaphs{
	padding-bottom: 16px;
}

.paraph{
	margin-left: 15px;
}

.paraph ul{
	padding-left: 0px;
	margin-left: 2px;
	margin-bottom: 0px;
	margin-top: 0px;
}

.paraph ul li.mainList{
	padding-left: 0px;
	list-style-type: none;
	list-style-image: url("images/east_orange_arrow.gif");
	padding-bottom: 0px;
	margin-left: 0px;
	margin-top: 10px;
}

.paraph ul li.mainListNoImage{
	padding-left: 0px;
	list-style-type: none;
	padding-bottom: 0px;
	margin-left: 0px;
	margin-top: 10px;
}

.paraph ul li.sublist{
	padding-left: 0px;
	margin-top: 3px;
	list-style-type: circle;
	padding-bottom: 0px;
	margin-left: 13px;
}

.justified{
	text-align: justify;
}

.center{
	text-align: center;
}

.blockWidget{
	background: url('images/block-background.gif') repeat-x top left;
	width: 251px;
	height: 122px;
	margin-top: 8px;
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 30px;
	
}

.blockWidget ul, .grayBlock ul{
	margin-top: 3px;
	padding-left: 20px;
	margin-left: 0px;
	margin-bottom: 0px;
}

.blockWidget ul li, .grayBlock ul li{
	padding-left: 0px;
	list-style-type: none;
	list-style-image: url("images/east_orange_arrow.gif");
	padding-bottom: 0px;
	margin-left: 18px;
}

/** Panel de connexion **/
.blockWidget div.login, .blockWidget div.password{
	margin-top: 5px;
	float:left;
	width: 77px;
	text-align: right;
}

.blockWidget div.loginInput, .blockWidget div.passwordInput{
	margin-top: 3px;
	margin-left: 5px;
	float: left;
}

.blockWidget div.loginInput input{
	width: 75px;
}

.blockWidget div.loginButton{
	width: 70px;
	float: left;
	margin-top: 13px;
	margin-left: 5px;
}

.orangeBlock{
	background-color: #FFFFF4;
	border: solid 1px #FFA500;
}

.redBlock{
	background-color: #FFFFF4;
	border: solid 1px #990000;
}

.orangeBlock div.mediumBoldTitle {
	padding: 7px 15px;
}

.orangeBlock div.paraph{
	padding-right: 10px;
}

.redBlock div.paraph{
	padding: 10px 12px;
}

.grayBlock, .grayBlockBasic{
	background-color: #F5F5F5;
	border: solid 1px #DADADA;
	padding-bottom: 10px;
}

.whiteBlock{
	background-color: #FFFFFF;
	border: solid 1px #DADADA;
	padding-left: 4px ;
	padding-right: 4px ;
	padding-bottom: 10px;
	padding-top: 5px;
}

/********************************************************/
/* Style des écritures                                  */
/********************************************************/

.tinyBoldTitle{
	font-weight:bold;
	font-size:9pt;
}

.largeTitle{
	font-size: 16pt;
}

.bigTitle{
	font-size: 14pt;
}

h2.bigTitle{
	font-size: 14pt;
	font-weight:normal;
	margin:0;
}

.tallTitle{
	font-size: 12pt;
	font-weight:normal;
}

.tallBoldTitle{
	font-size: 12pt;
	font-weight:bold;
}

.italic{
	font-style: italic;
}

.mediumTitle, .mediumBoldTitle{
	font-size: 10pt;
}

.mediumBoldTitle{
	font-weight: bold;
}

.littleTitle, .littleBoldTitle{
	font-size: 11pt;
}

.littleBoldTitle, .thinBoldTitle{
	font-weight: bold;
}

.thinTitle, .thinBoldTitle{
	font-size: 10pt;
}

.thinContent{
	font-size: 9pt;
	line-height: 1.3;
}

.tinyContent{
	font-size: 8pt;
	line-height: 1.3;
}

.thinBorderContent{
	border: solid 1px #CFCFCF}

.mediumContent{
	font-size: 9pt;
	font-weight: bold;
}

.blueText{
	color: #2477E6;
}

.darkBlueText{
	color: #2D5081;
}

.grayText, .lightGrayText{
	color : #636363;
}

.orangeText{
	color: #FF8000;
}

.darkOrangeText{
	color: #CC6633;
}

.redText{
	color:#990000;
}

.lettrineTallTitle:first-letter{
	font-size: 14pt;
}

.underlined{
	width:100%;
	border-bottom: solid 1px #CFCFCF;
}

.incompletUndelined{
	width:95%;
	border-bottom: solid 1px #CFCFCF;
}


.lightUnderlined{
	width:100%;
	border-bottom: solid 1px #F5F5DC;
}

.fadingUnderlined{
	padding-bottom: 3px;
	background: url("images/title-bottom-content.gif") no-repeat bottom left;
	width: 100%;
}

/**********************************************************/
/* Style des liens                                        */
/*		- linkThinGray                                      */
/*		- linkSmallGray                                     */
/*		- linkMediumGray                                    */
/*		- linkTallGray                                      */
/*		- linkBigGray                                       */
/*		                                                    */
/*		- linkThinLightGray                                 */
/*		- linkMediumLightGray                               */
/*														                            */
/*		- linkThinOrange		                                */
/*		- linkMediumOrange                                  */
/*		                                                    */
/*		- linkMediumLightBlue                               */
/*		                                                    */
/*		- linkThinBlack                                     */
/**********************************************************/

.linkThinGray:link, .linkThinGray:visited, .linkThinGray:hover,
.linkSmallGray:link, .linkSmallGray:visited, .linkSmallGray:hover,
.linkMediumGray:link, .linkMediumGray:visited, .linkMediumGray:hover,
.linkTallGray:link, .linkTallGray:visited, .linkTallGray:hover,
.linkBigGray:link, .linkBigGray:visited, .linkBigGray:hover,
.linkThinLightGray:link, .linkThinLightGray:visited, .linkThinLightGray:hover,
.linkMediumLightGray:link, .linkMediumLightGray:visited, .linkMediumLightGray:hover,
.linkThinOrange, .linkThinOrange:link, .linkThinOrange:visited, .linkThinOrange:hover,
.linkMediumOrange:link, .linkMediumOrange:visited, .linkMediumOrange:hover,
.linkMediumLightBlue:link, .linkMediumLightBlue:visited, .linkMediumLightBlue:hover,
.linkMediumDarkBlue:link, .linkMediumDarkBlue:visited, .linkMediumDarkBlue:hover,
.linkThinDarkBlue:link, .linkThinDarkBlue:visited, .linkThinDarkBlue:hover,
.linkThinBlack:link, .linkThinBlack:visited, .linkThinBlack:hover{
	text-decoration:none;
	font-size: 9pt;
	font-weight: normal;
}

.linkMediumOrange, .linkMediumOrange:link, .linkMediumOrange:visited, .linkMediumOrange:hover,
.linkMediumLightBlue:link, .linkMediumLightBlue:visited, .linkMediumLightBlue:hover{
	font-size: 12pt;
}

.linkMediumLightGray:link, .linkMediumLightGray:visited, .linkMediumLightGray:hover{
	font-size: 10pt;
}

.linkBigGray:link, .linkBigGray:visited, .linkBigGray:hover{
	font-size: 11pt;
}

.linkSmallGray:link, .linkSmallGray:visited, .linkSmallGray:hover,
.linkTallGray:link, .linkTallGray:visited, .linkTallGray:hover{
	font-size: 10pt;
}

.linkThinGray:link, .linkThinGray:visited, .linkThinGray:hover,
.linkSmallGray:link, .linkSmallGray:visited, .linkSmallGray:hover,
.linkMediumGray:link, .linkMediumGray:visited, .linkMediumGray:hover,
.linkTallGray:link, .linkTallGray:visited, .linkTallGray:hover,
.linkBigGray:link, .linkBigGray:visited, .linkBigGray:hover{
	color : #636363;
}

.linkThinLightGray:link, .linkThinLightGray:visited, .linkThinLightGray:hover,
.linkMediumLightGray:link, .linkMediumLightGray:visited, .linkMediumLightGray:hover{
	color: #939393;
}

.linkThinOrange, .linkThinOrange:link, .linkThinOrange:visited, .linkThinOrange:hover,
.linkMediumOrange, .linkMediumOrange:link, .linkMediumOrange:visited, .linkMediumOrange:hover{
	color: #FF8000;
}

.linkMediumLightBlue:link, .linkMediumLightBlue:visited, .linkMediumLightBlue:hover{
	color: #859FC2;
}

.linkMediumDarkBlue:link, .linkMediumDarkBlue:visited, .linkMediumDarkBlue:hover,
.linkThinDarkBlue:link, .linkThinDarkBlue:visited, .linkThinDarkBlue:hover{
	color: #2D5081;
	text-decoration: underline;
}

.linkThinBlack:link, .linkThinBlack:visited, .linkThinBlack:hover{
	color: #2E2E2E;
	text-decoration:underline;
}

.linkThinGray:hover,
.linkSmallGray:hover,
.linkMediumGray:hover,
.linkTallGray:hover,
.linkBigGray:hover,
.linkThinOrange:hover,
.linkThinLightGray:hover,
.linkMediumLightGray:hover,
.linkMediumOrange:hover,
.linkMediumLightBlue:hover{
	text-decoration: underline;
}

.linkThinBlack:hover,
.linkMediumDarkBlue:hover{
	text-decoration: none;
}

.linkMediumGray:link, .linkMediumGray:visited, .linkMediumGray:hover,
.linkMediumLightGray:link, .linkMediumLightGray:visited, .linkMediumLightGray:hover,
.linkTallGray:link, .linkTallGray:visited, .linkTallGray:hover,
.linkBigGray:link, .linkBigGray:visited, .linkBigGray:hover{
	font-weight: bold;
}

.linkThinGray:link, .linkThinGray:visited, .linkThinGray:hover{
	font-size: 10pt;
}

/********************************************************/
/* Style des input                                      */
/********************************************************/

.inputText, .inputTextCurrency, .inputTextError, .inputTextCurrencyError, .inputTextNumber,
.inputTextFocused, .inputTextCurrencyFocused, .inputTextNumberFocused{
	height:16px;
	border:solid 1px #BCBCBC; 
	color:#646567;
}
.inputTextError, .inputTextCurrencyError, .inputDatePickerError, .inputTextNumberError, .inputTextAreaError{
	background-color: #E2C1C3;
}

.inputTextFocused, .inputTextCurrencyFocused, .inputTextNumberFocused, .inputDatePickerFocused, .inputTextAreaFocused{
	background-color: #F7D9C6;
}

.inputTextCurrency, .inputTextCurrencyError, .inputTextCurrencyFocused{
	text-align: right;
}

.inputTextNumber, .inputTextNumberError, .inputTextNumberFocused{
	text-align: center;
}

.inputTextArea, .inputTextAreaFocused, .inputTextAreaError{
	border:solid 1px #BCBCBC; 
	color:#646567;
	font-family: 'Arial';
}

.inputDatePicker, .inputDatePickerError, .inputDatePickerFocused{
	border:solid 1px #BCBCBC; 
	color:#646567;
}

/** Button customisé **/
.inputQSBButton{
	margin: 0px;
	padding: 0px;
	cursor: pointer;
	float:left;
	font-size:11px;
	font-weight:bold;
	color:white; 
	border: none;
	height: 21px;
	background: url("images/button-orange-middle.gif") repeat-x top left;
}

.inputQSBButtonLeft{
	cursor: pointer;
	float:left;
	background: url('images/button-orange-left.gif');
	width: 14px;
	height: 21px;
}

.inputQSBButtonRight{
	cursor: pointer;
	float:left;
	background: url('images/button-orange-right.gif');
	width: 14px;
	height: 21px;
}

.inputQSBBigButton{
	white-space: normal;
	margin: 0px;
	padding: 0px;
	cursor: pointer;
	float:left;
	font-size:12px;
	font-family: "Arial";
	font-weight:bold;
	color:white; 
	border: none;
	height: 60px;
	background: url("images/big-orange-middle-button.gif") repeat-x top left;
}


.inputQSBBigButtonLeft{
	cursor: pointer;
	float:left;
	background: url('images/big-orange-left-button.gif');
	width: 14px;
	height: 60px;
}

.inputQSBBigButtonRight{
	cursor: pointer;
	float:left;
	background: url('images/big-orange-right-button.gif');
	width: 14px;
	height: 60px;
}


.inputQSBBigButtonInactive{
	white-space: normal;
	margin: 0px;
	padding: 0px;
	float:left;
	font-size:12px;
	font-family: "Arial";
	font-weight:bold;
	color:white; 
	border: none;
	height: 60px;
	background: url("images/button_grey_middle.gif") repeat-x top left;
}


.inputQSBBigButtonInactiveLeft{
	float:left;
	background: url('images/button_grey_left.gif');
	width: 20px;
	height: 60px;
}

.inputQSBBigButtonInactiveRight{
	float:left;
	background: url('images/button_grey_right.gif');
	width: 20px;
	height: 60px;
}


/********************************************************/
/* Style pour l'autocomplete                            */
/********************************************************/

.autoCompleteResults {
    background-color: white;
    border: 1px solid #C0D5EA;
    border-bottom:none;
    width: 207px;
    margin-left:3px;
    text-align: left;
}

.autoCompleteResults ul, .autoCompleteResults li {
    margin: 0px;
    padding: 0px;
    list-style: none;
    color: #597684;
}

.autoCompleteResults ul{
	max-height: 200px;
	_height:200px;
	overflow-y: auto;
}

.autoCompleteResults li {
		padding: 4px;
    border-bottom: 1px solid #C0D5EA;
    cursor:pointer;
    list-style-type: none;
    text-align: left;
}

.autoCompleteResults .selected {
    background-color: #DAEAF7;
}