.wrapper
{
background-color:#000000;
width:50em;
text-align:left;
margin-left: auto;
margin-right: auto;
padding:8px;
}

.productList 
{
width: 800px;
}

.product {
    border-bottom: 1px dashed #aaa;
    font-family: Helvetica, Arial;
    color: #CCCCA3;
    display: block;
    font-size: 1em;
    margin-top: 1.33em;
    margin-bottom: 1.33em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

.product .name 
{
font-weight: bold;
}

.product .price 
{
float: right;
}

.header
{
background-color:#ffffff;
padding:8px;
font-family:Helvetica, Arial; 
font-size:12pt;
color:#000066;
border-radius: 10px;
}

.sidebar
{
background-image: url("images/red metal.jpg");
background-size:150% 100%;
background-repeat:repeat-y;
padding:8px;
width:400px;
height:549px;
float:right;
}

.sidebar_whyZupp
{
background-image: url("images/red metal.jpg");
background-size:150% 100%;
background-repeat:repeat-y;
padding:8px;
width:200px;
height:300px;
float:right;
}


.article
{
background-image: url("images/red metal.jpg");
/*background-size:1000px 1000px;*/
background-size:120% 100%;
background-repeat:no-repeat;
color:#B2B28F;
/*color:#CCCCCC;*/
/*background-color:#800000;*/
padding:8px;
/*margin-right:216px;*/
font-size:13pt;
}


.footer
{
background-color:#000000;
color:#33CC33;
padding:8px;
text-align:center;
font-size:8pt;
}

nav ul ul
{
	display: none;	/* Hides submenus */
}
	nav ul li:hover > ul  /* The > symbol is the child selector */
	{
		display: block; /* when hovering, make submenus reappear vertical*/
		
	}
	
nav ul 	/* Navbar  background colour and shading */
{
	background: #efefef; /*almost white color */
	background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
	background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 20px;
	border-radius: 10px;  /* Sets the border radius of the div (nav bar) */
	list-style: none;
	position: relative;	/* Positioned relative to its normal position */
	display: inline-table;	/* Can use table tags, if required */
}
	nav ul:after 		/* This is a clearfix style rule */
	{
		content: ""; clear: both; display: block;  /* Makes the content appear after every ul */
	}

nav ul li 
{
	float: left;	/* Makes list elements appear horizontal */
}
	nav ul li:hover	/* Changes the link background colour when hovering */
	{
		background: #4b545f;
		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
	}
		nav ul li:hover a 
		{
			color: #fff;	/* The colour of the link text when hovering */
		}
	
	nav ul li a 
	{
		display: block; padding: 8px 14px; 	/* Vertical then horizontal padding of each link */
		color: #464646; text-decoration: none;	/* The normal link text colour without hovering */ 
	}
	
nav ul ul 		/* Prevents styles from inheriting styles from parent elements, so they look different */
{
	background: #5f6975; border-radius: 0px; padding: 0;	opacity:0.9; /* Background colour of links with no radius */
	position: absolute; top: 36px;
}
	nav ul ul li 
	{
		float: none; 	/* Turn off the floating stuff */
		border-top: 1px solid #6b727c; /* The colour of cell borders in drop-down menu */
		border-bottom: 1px solid #575f6a;
		position: relative;
	}
		nav ul ul li a 
		{
			padding: 4px 40px; /* Vertical then horizontal padding of sub menus */
			color: #fff;
			width: 7em;
		}	
			nav ul ul li a:hover 
			{
				background: #4b545f;
			}
			
			
	nav ul ul ul 
	{
		position: absolute; right: 100%; top:36px;	/* Position sub sub menus accordingly */
	}


.navbar ul
{
margin-left:-30px;
}

.navbar ul li
{
display:inline;
}

.navbar a
{
padding:8px;
color:white;
background-color: #000000;
font-family:Helvetica, Arial;
font-size:11pt;
//border-style:outset;
text-decoration:none;
width:8em;
}

.navbar a:hover,
.navbar a:active
{
border-style:inset;
color:yellow;
}

.sidebar ul li
{
color:#B2B28F;
font-family:Helvetica, Arial;
font-size:11pt;
display:block;
text-decoration:none;
}


body 
{
text-align: center;
font-family:Helvetica, Arial; 
font-size:13pt;
color:#FFFFF;
margin-left:1pc; 
margin-bottom:1pc;
padding-bottom:1pc; 
margin-top:0px;
margin-right:1pc;
padding-top:0px;
line-height:120%;
background-color:#FFFFFF;
}



h1, h2, h3, h4, h5 
{
font-family:Helvetica, Arial; 
color:#CCCCA3;
}


.yellow a
{
color:#FFFF99;
font-family:Helvetica, Arial;
font-size:11pt;
text-decoration:none;
width:8em;
}

.yellow a:hover,
.yellow a:active
{
border-style:inset;
color:yellow;
}

.yellow
{
color:#FFFF99;
font-family:Helvetica, Arial;
font-size:11pt;
text-decoration:none;
width:8em;
}


.unpadded
{
margin: 0;
padding:0;
}


td, th 
{
font-family:Helvetica, Arial; 
font-size:13pt;
color:#CCCCA3;
margin-left:1pc
}


figure 
{
  float: left;
  /*width: 254px;*/
  width: 500px;
  margin: 0px 10px 5px 10px;
}

figure img 
{
  border: 1px solid #666;
  //background-color: #CCC;
  border: 1px;
  padding: 10px;
}

figcaption 
{
  font: bold 1em/normal Verdana, Arial, Helvetica, sans-serif;
  color: #CCCCA3;
  text-align: center;
  //background-color: #e6f3ff;
  border: 1px;
  padding: 5px;
}

.knock-down {
    font-family: Helvetica, Arial;
    color: #CCCCA3;
    text-decoration-line: line-through;
    text-decoration-style: solid;
    text-decoration-color: blue;
    
}