/*
Configuration of specific parts defined by an id or a class. 
*/

/*	General */
	/*System messages*/
    
    .systemMsg{
    	display:block;
        background-color:#900;
        text-align:center;
        font-size:2em;
    }
    
    	.systemMsg a{
			color:#999        
        }
        
        .systemMsg a:hover{
			color:#777        
        }
        
        /*No Javascript enabled */ 
        #noScriptMsg{
            
        }
        
        /*Cookies not accepted*/
        #noCookieMsg{

        }
        
        #CookiesDisabledMsg{
            
        }
	
	/*Center inline-element vertically*/
	/*Class to add to a span include in he container besides a image or else to be able to center it vertically*/
	.vCenterHelper	{
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}
	


/*	Specific 	*/
html {
	display: block; 
	position:absolute; left: 0; top:0; z-index:0;
	width:100%; height:100%;
}


body {
	display: block; 
  	
  	margin: 0; padding: 0; 
	width:100%; height:100%;
	
	border: none; 
	overflow:visible;
	
	background-color: #123;
}


#Kopf{
	display: block; 
	width:96%; min-height:7em;
	margin: 0; 
	padding: 1.5% 2% 1.5% 2%;
	
	background-color: #123;
	color: #FBFBEE;
}


	
	#Kopf table {
		width:100%;
	}
	
		#SiteTitle {
			vertical-align:bottom;
		}
		
			#SiteTitle a:hover {
				background-color: #223344;
			}
		
			#SiteTitle a{
				display:flex;
				height:100%; width:100%;
			}			

				#LogoImgContainer{
					display: inline-block;
					 
						margin: 0 7.0em 0 0; 
										
				}
					
					#LogoImgContainer img {
						display: inline-block;
						vertical-align:bottom;
						height:4.3em; /*5.5em to fill the height of <tr>*/
						
					}

				#SiteTitleTxt{
					display:flex;
					flex-direction : column;
					flex-wrap:nowrap;
					 
						justify-content: center; 
										align-items: flex-start; 
					
					margin:0; padding:0;
					
					opacity:0.8;
					font-variant: small-caps;
					font-weight: lighter;
				}
					
					
					#SiteTitle1{	
						color:#999; 
						font-size:2.4em;/*3.3*/

					}
					
					#SiteTitle2{ 
						color:#666; 
						opacity:0.6;
						
						font-family: 'TechnicLite', 'Orator Std', Arial, sans-serif; 
						font-size:1.2em; /*1.3*/
					}
		




	#Langues {
		display: block;
		
		height: 1em; 
	
		margin: 0; /*1em 1em 0 0;*/
		border: none; 
		
		text-align:right; /*font-size: 1em; color:#666;*/
		cursor:pointer;
	}
		#Langues .nobr{
			top: 0%;
			width:100%; 
			vertical-align:top;
			overflow:hidden;
		}
		
			#Langues a{
				top: 0%;
				vertical-align:top;
				border:none;
				background-color: transparent; 
				opacity:0.6; /*moz-opacity:0.6;*/
				margin-right:0.5%;
				filter: invert(100%);
			}
			
			#Langues a img{
				border:none;
			}
			
            #Langues a img.actif{
                filter: invert(50%);
            }
			
			#Langues a:hover {
				color:#000;
				opacity:1; /*moz-opacity:1;*/
			}
			
				.langue_titre{
					display:inline-block;
					top: 0;
					width:0; 
					vertical-align:top;
					overflow:hidden;
				}




	
	#Userpanel {
		/*display: block;*/
		display: flex;
		flex-wrap:wrap;

		justify-content: flex-end;
		
		min-height: 1em; 
	
		margin: 1em 0 0 0; /*1em 1em 0 0;*/
		border: none; 
		
		text-align:right; /*font-size: 1em; color:#666;*/
	}
		
		.userpanelCtrlGroup {
            display: flex;
            align-items: center;
			margin: 0.5em 0 0 0;
            
            white-space: nowrap;
		}
		
        .userpanelCtrlGroup .button {
			border: 1px solid #101030;
			border-radius:14px;
            height: 2.0em;
            padding: 0.3em 1.0em;
            margin: 0 0 0 1em;
            
            background-color:#223344;
		}
		
        .userpanelCtrlGroup .button:hover {
			
            background-color: #112233;
		}
        
		.userpanelCtrlGroup a {
        	display: flex;
            align-items: center;
            height: 100%;
            vertical-align:middle;
            
            filter: invert(60%);
            
		}
		
        .userpanelCtrlGroup a:hover {
        	color:#000;
        	filter: invert(100%);
        }
		
		
        	.userpanelCtrlGroup a span {
                display:inline-block;
            }
        
			#UserStatusMessage{
				color: #666;
				
				padding: 3px 7px;
			}
		
#Main{
	display: block; 
	width:93%; 
	margin: auto;
	padding: 1% 3% 1% 3%;
	
	background-color: #FBFBEE;
	color:	#050505;
}

	#MainContainer{
		display: block; 
		position:relative; left: 0; top:0; z-index:20;
		width:100%; 
		margin: 0 auto 2em auto; 
		padding: 0;
	}




/* 	200-MainProducts && 250-MainTheProduct	*/
		#TheProduct, #Products{
			/*Flex for the content:*/
			display: flex;
			flex-wrap:wrap;
			justify-content: center; 
			align-items: flex-start; /*Vericaly aligns child elements to the top. Default stretches the child in order to fll the height of the parent.*/
			
			margin: 0 auto;	
			
		}
		
			#Visualisations, #ProdPalette{
				/*Flex for the content:*/
				display: flex;
				flex-wrap:wrap;
				justify-content: space-between;
				
				margin: 1.5em 0;
				padding: 1.5em 2em;
			}
			
			#Visualisations{	
				/*Flex for this element:*/
				 
					/*Desktop computer*/
					flex: 2 1 50%;
                
			}
			
			#ProdPalette{				
			}
			
				.VisuContainer, .ProdContainer{
					width: 30em;
					box-sizing: border-box;
					padding: 1.0em;
				}
				
				.VisuContainer {
					/*Flex for this element:*/
					 
						/*Desktop computer or tablet*/
						flex: 1 1 34%; /*51% => 1 elements per row; 34% => 2 elements per row; 26% 3 elements per row*/
									}
			
				.ProdContainer{
					/*Flex for this element:*/
					 
						/*Desktop computer or tablet*/
						flex: 1 1 26%; /*51% => 1 elements per row; 34% => 2 elements per row; 26% 3 elements per row*/
									}
				
				
					.VisuContainer a, .ProdContainer a{
						display:inline;
						height: 100%;
						vertical-align: middle;
					}
					
						.VisuContainer img, .ProdContainer img{
							margin: auto;
							max-height: 100%;
							max-width: 100%;
							vertical-align: middle;
						}
						
						.VisuTitle, .ProdTitle{
							display:block;
							text-align:right;
							bottom: 0;
						}
						
						
			#ProductSidebar{
				display: block;
				
				/*Flex for this element:*/
                 
                    /*Desktop computer*/
					flex: 1 1 30%;
                				
                max-width: 27em;
				margin: 1.5em 0;
				padding: 1.5em 2em;
				background-color: #FFF;
				
				border-radius: 21px;
			}
			
				#ProductSidebar form{
					
					
					text-align:center;
					margin: 0 auto;
					padding: 1.0em;
				}
					
                    .prodTitle{
                    	text-align:left;
						font-variant: small-caps;
						font-weight:lighter;
						font-size:1.4em;
                    }
                    
                    .prodSubTitle{
                    	text-align:left;
						font-variant: small-caps;
						font-weight:lighter;
						font-size:1.0em;
                        padding-bottom: 1.0em;
                    }
                    
					.prodInfoTitle {
						text-align:left;
						font-variant: small-caps;
						font-weight:lighter;
						font-size:1.2em;
					}
					
					.prodInfoParagraph {
						text-align:left;
						padding: 0 0 1em 0;
						font-size: 1em;
					}
					
					.intermedHeader {
						padding-top: 0.5em;	
					}
						.placeholder1stCol {
							min-width:1em;
						}
						
						.prodInfoLineHeader{
							
						}
						
						.prodInfoDataNumeric, .prodInfoDataPrice,.prodInfoDataPriceSubTotal, .prodInfoDataPriceTotal {
							padding-left:1em; 
							text-align:right;
						}
						.prodInfoDataPrice,.prodInfoDataPriceSubTotal, .prodInfoDataPriceTotal{
							min-width: 4em;
						}
						.prodInfoDataPriceSubTotal{
							font-weight:bolder;
						}
						.prodInfoDataPriceTotal{
							font-weight:bold;
						}
						.prodInfoUnit{
							padding-left:0.5em;
						}
						
				#basket-controls-container{
						margin : 2em 0 0 0;
						text-align:center;
				}
					.buttonInputContainer{
						display:inline-block;
						box-sizing: border-box;
						height: 4rem;
						width: 11rem;
						padding: 0 0rem;
						
						border: 0;
						border-radius: 2rem;
						
						background: #fff;
						color: #222;
						box-shadow: 0 10px 65px -10px rgba(0, 0, 0, 0.25);
						
						text-align: center;
						font-weight: lighter;
						
						cursor:pointer;
					}
                    
                    .row-info-below{
                    	font-size: 80%;
                        text-align:left;
                        white-space: nowrap;
                        padding-bottom: 0.5em;
                    }
                    
                    .promo-message{
                        color: #669900;
                    }
                    
                    .inactive{
                    	font-size: 80%;
                        color: #CCC;
                    }
		

#Fuss{
	display:block; 
	width:96%; min-height:7em;
	margin: 0;
	padding: 1% 2% 1% 2%;
	overflow: visible;
	
	background-color: #123;
	color: #FBFBEE;
	text-align:right;
}