/* ######################################################################################################
** # Base du systeme 
** ######################################################################################################
*/
@media all
{
html {} 

body { 

	font-family: Arial, Verdana, Helvetica, sans-serif; 
	margin:0; padding:0; border:0;
/* This prevents that centered layouts jump ** around 10 pixels if side contents become smaller than the height of the browser */

/* Removal of the rounding error with character sizes in the Opera as well as standard formatting  */

/* FIX: Prevented that positioned elements are not shifted when the size of the Browser of window are changed . */
    position: relative; 

/* Default of the standard colors and text adjustment */     
    color: #333333;        
    background: #ffffff;
    text-align: left; 
} 

/* Hereby the edge distances and boron that of all HTML elements are set to zero.  Thus 
** the appearance of the web page in different Browsern is standardized. 
**
** note:  At the same time thereby however the extreme zoom shot behavior in the InterNet Explorer caused 
** for it the necessities chop should therefore not be forgotten, around this problem again too 
** be eliminated.  He is to be found in the file "iehacks.css". 
*/

* {margin:0; padding:0; border:0;}

/* ######################################################################################################
** ## DIV-Container des Basislayouts
** ######################################################################################################
*/
#nav_horizontal {  width:100%;}
#main {	 width: 100%; }

#col1 {
	background-color:#eeeeee;
	float: left;
}

#col2 {
	float:right; 
	width: 150px; /* Default value, if no other defaults are made */
}

#col3
{
	width:auto;
   	margin-left: 200px; /* Default value, if no other defaults are made */
   	margin-right: 200px; /* Default value, if no other defaults are made */
}


/* The z-index prevents that in the case of the still existing IE nose the texts appear forwards 
** to the column background . */
#col1 {}
#col2 {}
#col3 {}
#col1_content {}
#col2_content {}
#col3_content {}

#col1, #col2, #col3 { position: relative; }
#col1_content, #col2_content, #col3_content { position: relative; }

#footer { height:15px; width:100%; }

/* ######################################################################################################
** ### CSS Floatclearing solutions 
** ######################################################################################################
*/

/* Clearfix-Methode to the Clearen of the floating environments  */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
/* This indication must have the Safari Browser !! */
.clearfix {display: block;}

/* Overflow-Methode to the Clearen of the floating environments  */
.floatbox { overflow:hidden; }

/* Clearen of the 3 contents columns by means of this special hr-Tags */
hr.clear_columns {	
	content: "."; 
	display: block;  
	height: 0; 
	line-height: 0px; 
	clear: both; 
	float: left; 
	visibility: hidden; 
	border: 0; 
	padding: 0;
	margin: 0 0 0 0; /* necessarily with it no empty space between columns and Footer develops  */
}

/* ######################################################################################################
** ### Standard formatting for lists & quotations 
** ######################################################################################################
*/

ul, ol, dl { margin: 0 0 0 0; }
li { margin-left: 1.5em; line-height: 1.5em; }

blockquote, cite { margin: 0 0 1em 1.5em; font-size: 0.93em; width: auto;}

}

/* ######################################################################################################
** # PERSONNALISATION AU NIVEAU DE LA STRUCTURE 
** ######################################################################################################
*/

@media all
{

/* Formatting the side  */
body {
	background: #ffffff;
	padding: 0px;	
}

/* Here a circulating edge can be produced around the entire web page  */
#page { 
	border-bottom: 1px transparent solid; 
	background: #FFFFFF; 
}

#page_margins {
	min-width: 1024px; 
	max-width: 1900px; 
		
	width:expression(document.body.clientWidth > 1900 ? "1900px": "auto" );
		
	margin:auto;
}

#main { color: #000000; background: #FFFFFF ; padding: 0; } 


/* Formatting the head area  */
#header { 
	width:100%;
	background-image: url(/client/mastersound100/img/fond_header.jpg); 
	margin: 0;
	padding: 0;
}

/* Formatting the footing line  */
#footer { 
	color: #646464; 
	background: #cccccc; 
	/* border-top: 01px #999999 solid;  */
	/* line-height: 2em; */
}

/* ######################################################################################################
** ### FORMATAGE COLONNES  
** ######################################################################################################
*/

/* left column  */
#col1 {	width: 200px; background-color:#eeeeee;}	

#family{
	width:100%;
	height:32px;
	line-height:32px;
	text-indent:34px;
	font-size:14;
	color: #FFFFFF;
	text-decoration:none;
	font-weight:bold;
	text-transform: uppercase;
	background-image: url(/client/mastersound100/img/fond_family.gif);
	background-color:#000000;
	display:block;
}

#subFamily{
	width:100%;
	line-height:17px;
	display:block;
	text-indent:5px;
	font-size:10px;
	color: #990000;
	text-decoration:none;
}
#subFamily:hover{
	background-color:#990000;
	color: #ffffff;
}


#col1_content {	padding-top:0px; margin-left: 0px; margin-right: 0px; color: #333333; background-color:#eeeeee; }

/* Right column  */
#col2 {	width: 200px; }

#visited_page{
	width:100%;
	line-height:16px;
	display:block;
	font-size:10px;
	color: #000000;
	text-decoration:none;
}
#visited_page:hover{
	background-color:#99CC00;
	color: #000000;
}

#col2_content {	padding-top:05px; margin-left: 05px; margin-right: 05px;}

/* Middle column */
#col3
{
  	margin-left: 200px; 
   	margin-right: 200px; 
	border-left: 01px solid #999999;
	border-right: 01px solid #999999;
}

#col3_content { padding-top:05px; margin-left: 05px; margin-right: 05px; }

} 

@media all
{
/* ######################################################################################################
** ### Navigation
** ######################################################################################################
*/

/* navigation horizontale */
#nav_horizontal {
	width:100%;
	color: #FFFFFF;
	background: #990000;
    padding: 0 ;
	margin: 0;
	height: 20px; 
	border-top:1px solid #000000;
	border-bottom:1px solid #000000;    
}

#nav_horizontal a:link,#nav_horizontal a:visited {
	color: #FFFFFF;
	text-decoration: none;		
	font-weight: normal;
}

#nav_horizontal a:active,#nav_horizontal a:hover {
	color: #FFFFFF;
	text-decoration: underline;	
	font-weight: normal;
	background: #990000;
}

/* onglet */
#nav_main {
	padding:5px;
	background: #ffffff;   /* #ffffff; couleur fond haut de page */
	vertical-align:bottom;
}

.nav_main ul {
}
  
.nav_main li {

}

#menu {
  font-size:12px;
  font-weight:bold;
  display:inline;
  color: #eeeeee;
  background: transparent;
  padding: 5px;  
  padding-left: 20px; 
  padding-right: 20px;
  text-transform: none;
  text-decoration:none;
  background: #999999; /* couleur fond onglet */
  margin-left: 5px;
  margin-right: 5px;
  border-top:1px solid #000000;
  border-left:1px solid #000000;
  border-right:1px solid #000000;    
}

/* Commented backslash chop hides rule from IE5-Mac */
/* End IE5-Mac hack */
#menu:hover { 
    color: #FFFFFF;
    background-color: #990000;  /* couleur fond onglet actif */
}
#menu #current {

  }
#menu #current {
  background: #990000;
  border-top:1px solid #000000;
  border-left:1px solid #000000;
  border-right:1px solid #000000;   
}

}

/* ######################################################################################################
** # PERSONNALISATION AU NIVEAU DU CONTENU
** ######################################################################################################
*/

@media all
{
 body, p, td, th, div, blockquote, dl, ul, ol, li, button,input, form, textarea, select, font , thead, tbody, tfoot, label, fieldset {
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
 font-size: 11px;
 font-weight: normal;
}

strong {
 color: #000000;
 font-size: 11px;
 font-weight: bold;
}

h1,h2,h3,h4,h5,h6,h7,h8,h9 { display: block; }

h1 {
	color: #333333;
	font-size: 18px;
	font-weight: bold;
}

h2 {
	color: #333333;
	font-size: 16px;
	font-weight: bold;
}

h3 {
	color: #333333;
	font-size: 14px;
	font-weight: bold;
}

h4 {
	color: #333333;
	font-size: 12px;
	font-weight: bold;
}

h5 {
	color: #333333;
	font-size: 12px;
	font-weight: normal;
}
			

/* pave */
fieldset {
color: #333333; 
}

fieldset.pave {
	margin: 2px 0px 10px 0px;
	padding-left: 2px;
}

fieldset.pave legend {
	border: none;
	color: #333333;
	font-size: 15px;
	font-weight: bold;
	padding-left: 2px;	
	padding-right: 2px;	
	margin-bottom: 10px;
}

/* sous-pave */

h6 {
	font-size: 13px; 
	font-weight:bold; 
	color: #333333;  
	background:inherit;  
	margin: 15px 0 10px 0; 
	border-bottom: 01px #646464 null;
}

p,ul {line-height: 1.5em;}
p {line-height: 1.5em; margin: 0 0 1em 0; }

strong,b {font-weight: bold;}
i { font-style:italic; }

hr { color: transparent; background:transparent; margin: 0 0 0.5em 0; padding: 0 0 0.5em 0; border-bottom: 01px #999999 solid; }

/* liste colonne */
table.cssCenterList {
	border: hidden; 
	width: 98%;
	/* attention margin + width 100% depasse dimension prevue */
}

table.cssCenterList tbody tr td { padding-top: 20px; padding-bottom: 5px;}

table.cssCenterList tbody tr td#cssCenterListSfm { 
border-right: #000000 1px dotted;
border-bottom: #000000 1px dotted;
}

table.cssCenterList tbody tr td#cssCenterListItem { 
border-right: #000000 1px dotted;
border-bottom: #000000 1px dotted;
}

table.cssCenterList tfoot tr td { padding-top: 10px; border: hidden;}

/* liste ligne */
.cssLineOdd {
background-color: #FFFFFF;
color: #333333;
}
.cssLinePar {
background-color: #eeeeee;
color: #333333;
}
.cssLineHilite, .cssLineHilite a:active, .cssLineHilite a:hover, .cssLineHilite a:link,.cssLineHilite a:visited {
background-color: #999999;
color: #000000;
border: none;
}

.cssLineBorder {
border-bottom: #00000 1px dotted;
vertical-align: top;
padding: 5px;
}

.cssLineBorder img {
margin: 5px;
}


/* album */

table.cssAlbumList {
	border: hidden; 
	width: 98%;
	/* attention margin + width 100% depasse dimension prevue */	
}

table.cssAlbumList tbody tr td { padding-top: 20px; padding-bottom: 5px;}

table.cssAlbumList tbody tr td.cssAlbumListPhoto { 
border-right: #eeeeee 1px null;
border-bottom: #eeeeee 1px null;
}

table.cssAlbumList tfoot tr td { padding-top: 10px; border: hidden;}
  
.cssAlbumList img {
	border: 01px solid #FFFFFF;
}

/* grille tarifs degressif */
table.cssPriceQty {
margin-right: 5px;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
border-collapse: collapse;
}


table.cssPriceQty td {
border-top: 1px solid #999999;
border-left: 1px solid #999999;
padding: 5px;
}

/* pages infos */
.cssInfoListDivLanguageTitle {
clear: left; 
margin-top: 20px;
}

.cssInfoListDivDate {
font-size: 8px;
}

.cssInfoListDivImg {
margin-right: 10px; 
margin-bottom: 10px; 
text-align: left;
border: none;
float: left;
}

.infoListDivLanguageText {
}

.infoListDivPagin {
clear: left; 
text-align: center;
}

/* ######################################################################################################
** ### locals and External Links ##########################################################
** ######################################################################################################
*/

a {
color: #990000; 
text-decoration: none;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
font-size: 11px;
}
a:hover {background-color: #FFFFFF; text-decoration: underline; color: #990000; }

#footer a { color: #990000 ; text-decoration: none;}
#footer a:hover {
background-color: #CCCCCC;  
text-decoration: underline; 
color: #990000;
}

#header a { color: #666666 ; text-decoration: underline;}

#header a:hover {
	background-color: #000000;  
	text-decoration: underline; 
	color: #666666;
}


/* ######################################################################################################
** ### Formulaire 
** ######################################################################################################
*/

input, select, textarea {
    width: auto;
	font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
	border-left: 01px #990000 solid;
	border-top: 01px #990000 solid;
	border-right: 01px #990000 solid;
	border-bottom: 01px #990000 solid;		
    background: #CECECE;
	padding: 01px;
	color: #000000;
}

select {
	padding: 0px;
}

input[type=text]:focus, select:focus, textarea:focus {
	background: #eeeeee;
	color: #333333;
	border-left: 01px #666666 solid;
	border-top: 01px #666666 solid;
	border-right: 01px #666666 solid;
	border-bottom: 01px #666666 solid;			
}

input[type=checkbox], input[type=radio] {
	margin-right: 5px;
	border-color: transparent;
	background: transparent;
}

button {
	background-color: #990000;
	border-top: #000000 01px solid;	
	border-left: #000000 1px solid;	
	border-bottom: #000000 1px solid;	
	border-right: #000000 1px solid;				
	color: #FFFFFF;
	padding: 01px;
	font: 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
	cursor: hand;
}
button:hover {
	background-color: #99CC00;
	color: #000000;
}


*.layoutWithoutTable p {
	margin: 0;
	padding: 0;
	padding-top: 5px;
}

*.layoutWithoutTable p label {
 clear: left;
 display: block;
 
 float: left;
 width: 30%; 	
}

table.layoutTableStd {
width: 98%;
margin-top: 5px;
margin-bottom: 5px;
border-right: 01px solid #eeeeee;
border-collapse: collapse;
}

table.layoutTableStd td {
border-top: 01px solid #eeeeee;
border-left: 01px solid #eeeeee;
padding: 5px;
}

table.layoutTableStd td.header {
background-color: #990000;
color: #FFFFFF;
font-size: 11px;
text-align:center;
font-weight:bold;
}


table.layoutTableStdNoBorder {
margin-top: 5px;
margin-bottom: 5px;
border: none;
}

table.layoutTableStdNoBorder td {
border: none;
padding: 5px;
line-height: 10px;
}

}

/* ######################################################################################################
** # Table panier, etc...
** ######################################################################################################
*/
@media all
{

#cartWarningMessage {
	border: #eeeeee 01px dashed;
	color: #000000;
	background-color: #FFCC00;
	padding: 2px;
	margin: 2px;
}	

/* prix */
#cssPrice {
	margin-left: 5px;	
	margin-right: 5px;		
	color: #000000;
	font-size: 12px;	
	font-weight: bold;	
}

#cssOurPriceRefresh {
	margin-left: 5px;	
	margin-right: 5px;		
	color: #000000;
	font-size: 12px;	
	font-weight: bold;	
	border: none;
	background-color:  #FFFFFF;
}

/* prix barre */
s#cssPriceOverline {
	text-decoration: line-through;
	margin-left: 5px;	
	margin-right: 5px;			
	color: #000000;
	font-size: 12px;	
	font-weight: bold;		
}

/* remise */
#cssDiscount {
	margin-left: 5px;	
	margin-right: 5px;		
	color: #000000;
	font-size: 12px;	
	font-weight: bold;			
}
			
}
/* ######################################################################################################
** # IMPRESSION 
** ######################################################################################################
*/

@media print
{
body * { font-size: 11px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; }

/* Vermeidung von Seitenumbrüchen direkt nach einer Überschrift */
h1,h2,h3,h4,h5,h6,h7,h8,h9 { page-break-after:avoid; }

abbr[title]:after, acronym[title]:after { content: '(' attr(title) ')'; }

/* Sichtbare Auszeichnung der URLs von Links */
#col3 a[href^="http:"], #col3 a[href^="https:"], 
#col1 p a[href^="http:"], #col1 p a[href^="https:"],
#col2 p a[href^="http:"], #col2 p a[href^="https:"]
{
	padding-left: 0;
	background-image: none;
}

a[href]:after {
 content:" <URL: "attr(href)">";
 color:#444;
 background-color:inherit;
 font-style:italic;
} 

/* Umformatierung der Layoutboxen */
body {margin:0; padding: 0;}
#page_margins, #page {min-width: inherit; margin:0; padding: 0; border: 0; } 
#header {display: none;}
#nav {display:none;}
#nav_horizontal {display:none;}
#main {margin: 0; padding: 0;}
#col1 {display:none;}
#col1_content {display:none;}
#col2 {display:none;}
#col2_content {display:none;}
#col3 { margin:0; padding: 0; border:0; }
#col3_content {margin:0; padding: 0; border:0; }
#footer {display: none;}

}

/* ######################################################################################################
** # Extension utilisateur
** ######################################################################################################
*/