/* Main definition of the body */
body {
	background-color: #101010;
	color: #7D7D7D;
	text-align: center;
}

/* Lay-out of the page and the font rules */
#page-layout {
	width: 1020px;
	height: 580px;
	margin-top: 40px;
	margin-left: auto;
	margin-right: auto;
	font-family: "Century Gothic", "Verdana", "Trebuchet MS", Geneva, Arial, Helvetica, Verdana, sans-serif;
	font-size: 12;
	font-weight: normal;
	text-align: left;
}

/* Basic table layout */
table {
	table-layout: fixed;
	width: 1020px;
	height: 580px;
	font-size: 12;
	border-collapse: collapse;
}

/*	Main definition - one level below the general table definition */
table.main {
	border-collapse: collapse;
	border: 1px solid #555555;
}

/* Table defintion used with the logo's - we do not use this definition */
table.brands {
	table-layout: fixed;
	width: 672px;
	height: 254px;
	/*
	border-top:    1px solid #555555;
	border-bottom: 1px solid #555555;
	*/
}

/*
	This definition for the table is used in two ways:
	(1) for the basic brand pages that link to the specific brand page
	(2) for all text pages where we use the two lines to put everything in between
	(3) Note that the lines have been defined here, rather than with the separate definitions.
*/

table.brands-nologo {
	width: 634px;
	height: 254px;
	text-align: center;
	vertical-align: middle;
	/* 
	border-top: 1px solid #555555;
	border-bottom: 1px solid #555555; 
	*/
}

/* lay-out of contact page(s) */
table #contact {
	width: 634px;
	height: 175px;
	color: #c1c1c1;
	text-align: left;
	vertical-align: top;
}

td.contact-header {
	font-size: 18;
	font-weight: normal;
	color: #4B7AB7;
	text-decoration: none;
	font-family: "Century Gothic", "Trebuchet MS", Geneva, Arial, Helvetica, Verdana, sans-serif;
}

tr.contact-row {
	color: c1c1c1;
	font-size: 11;
}

td.contact-data-left {
	text-align: left;
}

td.contact-data-middle {
	text-align: right;
}

td.contact-data-right {
	text-align: left;
	padding-left: 15px;
}

/* end: contact page(s) */
	
/*
	Also within the table there is content.
	Define the lay-out of the content within the table
*/
table.content {
	table-layout: fixed;
	width: 742px;
	height: 254px;
	vertical-align: top;
}

/*
	All rows by default have justified text
*/
tr {
	text-align: justify;
}

/*
	The left-most column defintion where the variable menu items reside
	-- center the menu itmems
*/
td.leftcolumn {
	background-color: #202020;
	color: #858585;
	vertical-align: text-top;
	text-align: center;
	padding-left:  5px;
	padding-right: 5px;
	border-right:  1px solid #555555;
	border-bottom: 1px solid #555555;
	border-left:   1px solid #555555;
	border-top:    1px solid #555555;
}
/*
	The middle column is the one that holds all content.
	*/
td.middlecolumn {
	padding-left:  50px;
	padding-right: 50px;
	background-image: url(../images-pages/background.jpg);
	border-right:  0px solid #555555;
	border-bottom: 1px solid #555555;
	border-left:   0px solid #555555;
	border-top:    1px solid #555555;
}

/*
	The right column holds the picture for every page.
	*/
td.rightcolumn {
	background-color: #000000;
	padding-left:  2px;
	padding-right: 2px;
	vertical-align: middle;
	border-right:  1px solid #555555;
	border-bottom: 1px solid #555555;
	border-left:   1px solid #555555;
	border-top:    1px solid #555555;
}

/*
	In order to have the lines painted correctly, we split into layers.
	The upper layer defines the line above the text, the middle ones do
	not have any lines painted, and the lower layer closes with a line.
	*/
td.brands-layer1 {
	color: #858585;
	vertical-align: middle;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
}
td.brands-layer-m {
	color: #858585;
	vertical-align: middle;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
}
td.brands-layer2 {
	color: #858585;
	vertical-align: middle;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
}


/*
	opruimingspagina lay-out
	*/
td.sale-layer1 {
	color: #FFFFFF;
	vertical-align: top;
	text-align: left;
	padding-left: 5px;
	padding-right: 5px;
}
td.sale-layer2 {
	color: #FFFFFF;
	vertical-align: top;
	text-align: right;
	padding-left: 5px;
	padding-right: 5px;
}
td.sale-layer3 {
	color: #858585;
	vertical-align: top;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 10;
}

/*
	The contact page has a different layout due to a-symmetric table definition.
	*/
td.contact-l1 {
	color: #C1C1C1;
	vertical-align: middle;
	text-align: left;
	padding-left: 5px;
	padding-right: 5px;
}
td.contact-lm {
	color: #C1C1C1;
	vertical-align: middle;
	text-align: left;
	padding-left: 5px;
	padding-right: 5px;
}
td.contact-l2 {
	color: #C1C1C1;
	vertical-align: middle;
	text-align: left;
	padding-left: 5px;
	padding-right: 5px;
}

td.contact-r1 {
	color: #C1C1C1;
	vertical-align: middle;
	text-align: right;
	padding-left: 5px;
	padding-right: 5px;
}
td.contact-rm {
	color: #C1C1C1;
	vertical-align: middle;
	text-align: right;
	padding-left: 5px;
	padding-right: 5px;
}
td.contact-r2 {
	color: #C1C1C1;
	vertical-align: middle;
	text-align: right;
	padding-left: 5px;
	padding-right: 5px;
}

/*	definition of the middle column in the contact page 
*/

td.contact-mid1 {
	color: #C1C1C1;
	vertical-align: middle;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
}
td.contact-midm {
	color: #C1C1C1;
	vertical-align: middle;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
}
td.contact-mid2 {
	color: #C1C1C1;
	vertical-align: middle;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
}

/* 
	Definition of the content part of the page
	1 - m - 2 means the upper, the middle and the lower part
	Please notice that we also define the width here,
	rather than in the files. This allows easy changes
	*/
td.content-1 {
	color: #C1C1C1;
	vertical-align: middle;
	text-align: justify;
	padding-left: 5px;
	padding-right: 5px;
	width: 634px;
}
td.content-m {
	color: #C1C1C1;
	vertical-align: middle;
	text-align: justify;
	padding-left: 5px;
	padding-right: 5px;
	width: 634px;
}
td.content-2 {
	color: #C1C1C1;
	vertical-align: middle;
	text-align: justify;
	padding-left: 5px;
	padding-right: 5px;
	width: 634px;
}

td.content-2l {
	color: #C1C1C1;
	vertical-align: middle;
	text-align: left;
	padding-left: 5px;
	padding-right: 5px;
	width: 317px;
}
td.content-2r {
	color: #C1C1C1;
	vertical-align: middle;
	text-align: right;
	padding-left: 5px;
	padding-right: 5px;
	width: 317px;
}

/*
	definition of the copyright & menu data cell
*/
td.data {
	border-bottom: 1px solid #E1771E;
	width: 93px;
}
td.data-m {
	border-bottom: 1px solid #E1771E;
	width: 185px;
}
td.data-l {
	border-left:   1px solid #555555;
	width: 93px;
}
td.data-r{
	border-right:  1px solid #555555;
	width: 93px;
}
td.copyright {
	border-bottom: 1px solid #555555;
	border-left:   1px solid #202020;
	border-right:  1px solid #202020;
}

td.copyright-l {
	border-bottom: 1px solid #555555;
	border-left: 1px solid #555555;
}
td.copyright-r {
	border-bottom: 1px solid #555555;
	border-right: 1px solid #555555;
}

/* 
	This is our own definition of "visited" pages, so
	that the user can see that the current named page is active.
	*/
font.visited {
	font-weight: normal;
	font-size: 11;
   color: #FFFFFF;
	}
	
font.visited-bold {
   font-weight: bolder;
	font-size: 11;
	color: #4d4d4d;
	}


/*
	Within a paragraph we sometimes need the specific settings for
	either art's audio or audio excellence. We both use different types
	of fonts, and these definitions take care of that, including the
	difference in size.
	*/
p.aa {
	font-weight: bolder;
	font-size: 20;
	font-family: "Century Gothic", "Trebuchet MS", Geneva, Arial, Helvetica, Verdana, sans-serif;
	color: #4B7AB7;
	}
	
p.ae {
	font-weight: bolder;
	font-size: 24;
	font-family: Garamond, "Trebuchet MS", Geneva, Arial, Helvetica, Verdana, sans-serif;
	color: #4B7AB7;
	}

/*
	We use several link types, and their definitions are named after their use.
	*/
a:link    {
	font-weight: normal;
	color: #AAAAAA;
	text-decoration: none;
}
a:visited {
	font-weight: normal;
	color: #AAAAAA;
	text-decoration: none;
}
a:hover   {
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
}
a:active  {
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
}

/*
	links inside the text...
	*/
a.intext:link    {
	font-weight: normal;
	font-size: 12;
	color: #7D7D7D;
	text-decoration: none;
}
a.intext:visited {
	font-weight: normal;
	font-size: 12;
	color: #7D7D7D;
	text-decoration: none;
}
a.intext:hover   {
	font-weight: normal;
	font-size: 12;
	color: #E1771E;
	text-decoration: none;
}
a.intext:active  {
	font-weight: normal;
	font-size: 12;
	color: #E1771E;
	text-decoration: none;
}

/*
	links inside the text - orange...
	*/
a.intext-orange:link    {
	font-weight: normal;
	font-size: 12;
	color: #E1771E;
	text-decoration: none;
}
a.intext-orange:visited {
	font-weight: normal;
	font-size: 12;
	color: #E1771E;
	text-decoration: none;
}
a.intext-orange:hover   {
	font-weight: normal;
	font-size: 12;
	color: #7D7D7D;
	text-decoration: none;
}
a.intext-orange:active  {
	font-weight: normal;
	font-size: 12;
	color: #7D7D7D;
	text-decoration: none;
}

/*
	links inside the text - orange...
	*/
a.intext-orange-large:link    {
	font-weight: normal;
	font-size: 16;
	color: #E1771E;
	text-decoration: none;
}
a.intext-orange-large:visited {
	font-weight: normal;
	font-size: 16;
	color: #E1771E;
	text-decoration: none;
}
a.intext-orange-large:hover   {
	font-weight: normal;
	font-size: 16;
	color: #7D7D7D;
	text-decoration: none;
}
a.intext-orange-large:active  {
	font-weight: normal;
	font-size: 16;
	color: #7D7D7D;
	text-decoration: none;
}

/*
	links inside the text - white...
	*/
a.intext-white-large:link    {
	font-weight: normal;
	font-size: 16;
	color: #FFFFFF;
	text-decoration: none;
}
a.intext-white-large:visited {
	font-weight: normal;
	font-size: 16;
	color: #FFFFFF;
	text-decoration: none;
}
a.intext-white-large:hover   {
	font-weight: normal;
	font-size: 16;
	color: #7D7D7D;
	text-decoration: none;
}
a.intext-white-large:active  {
	font-weight: normal;
	font-size: 16;
	color: #7D7D7D;
	text-decoration: none;
}


/* for pictures */
a.picture:link    {
	font-weight: normal;
	color: #AAAAAA;
	text-decoration: none;
}
a.picture:visited {
	font-weight: normal;
	color: #AAAAAA;
	text-decoration: none;
}
a.picture:hover   {
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
}
a.picture:active  {
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
}

/*
	For the left column where the variable menu items are presented.
	*/
a.leftc:link    {
	font-size: 11;
	font-weight: normal;
	color: #AAAAAA;
	text-decoration: none;
}
a.leftc:visited {
	font-size: 11;
	font-weight: normal;
	color: #AAAAAA;
	text-decoration: none;
}
a.leftc:hover   {
	font-size: 11;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
}

a.leftc:active {
	font-size: 11;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
}

/*
	For the left column where the variable menu items are presented.
	stand out color
	*/
a.leftc-highlight:link    {
	font-size: 11;
	font-weight: normal;
	color: #E1771E;
	text-decoration: none;
}
a.leftc-highlight:visited {
	font-size: 11;
	font-weight: normal;
	color: #E1771E;
	text-decoration: none;
}
a.leftc-highlight:hover   {
	font-size: 11;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
}

a.leftc-highlight:active {
	font-size: 11;
	font-weight: normal;
	color: #4B7AB7;
	text-decoration: none;
}

a.menu-highlight:link    {
	font-size: 11;
	font-weight: normal;
	color: #4B7AB7;
	text-decoration: none;
}
a.menu-highlight:visited {
	font-size: 11;
	font-weight: normal;
	color: #4B7AB7;
	text-decoration: none;
}
a.menu-highlight:hover   {
	font-size: 11;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
}

a.menu-highlight:active {
	font-size: 11;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
}

/*
	For the left column main article.
	*/
a.main_art:link    {
	font-size: 11;
	font-weight: bolder;
	color: #AAAAAA;
	text-decoration: none;
}
a.main_art:visited {
	font-size: 11;
	font-weight: bolder;
	color: #AAAAAA;
	text-decoration: none;
}
a.main_art:hover   {
	font-size: 11;
	font-weight: bolder;
	color: #FFFFFF;
	text-decoration: none;
}

a.main_art:active {
	font-size: 11;
	font-weight: bolder;
	color: #FFFFFF;
	text-decoration: none;
}

/*
	The brands pages have larger font, and different color settings.
	*/
a.brands-tbl:link    {
	font-size: 14;
	font-weight: bolder;
	color: #4B7AB7;
	text-decoration: none;
}
a.brands-tbl:visited {
	font-size: 14;
	font-weight: bolder;
	color: #4B7AB7;
	text-decoration: none;
}
a.brands-tbl:hover   {
	font-size: 14;
	font-weight: bolder;
	color: E1771E;
	text-decoration: none;
}

a.brands-tbl:active {
	font-size: 14;
	font-weight: bolder;
	color: #717171;
	text-decoration: none;
}

/*
	Links that have the same color layour as the tables
	*/
a.blue:link    {
	font-size: 14;
	font-weight: normal;
	color: #4B7AB7;
	text-decoration: none;
}
a.blue:visited {
	font-size: 14;
	font-weight: normal;
	color: #4B7AB7;
	text-decoration: none;
}
a.blue:hover   {
	font-size: 14;
	font-weight: normal;
	color: #E1771E;
	text-decoration: none;
}

a.blue:active {
	font-size: 14;
	font-weight: normal;
	color: #717171;
	text-decoration: none;
}

/*
	Links using art's audio logo style
	*/
a.aa:link    {
	font-size: 20;
	color: #4B7AB7;
	font-family: "Century Gothic", "Verdana", "Trebuchet MS", Geneva, Arial, Helvetica, Verdana, sans-serif;
	text-decoration: none;
}
a.aa:visited {
	font-size: 20;
	font-family: "Century Gothic", "Verdana", "Trebuchet MS", Geneva, Arial, Helvetica, Verdana, sans-serif;
	color: #4B7AB7;
	text-decoration: none;
}
a.aa:hover   {
	font-size: 20;
	font-family: "Century Gothic", "Verdana", "Trebuchet MS", Geneva, Arial, Helvetica, Verdana, sans-serif;
	color: #E1771E;
	text-decoration: none;
}

a.aa:active {
	font-size: 20;
	font-weight: bolder;
	font-family: "Century Gothic", "Verdana", "Trebuchet MS", Geneva, Arial, Helvetica, Verdana, sans-serif;
	color: #717171;
	text-decoration: none;
}

/*
	Links using Audio Excellence logo style
	*/
a.ae:link    {
	font-weight: bolder;
	font-size: 24;
	font-family: Garamond, "Verdana", "Trebuchet MS", Geneva, Arial, Helvetica, Verdana, sans-serif;
	color: #4B7AB7;
	text-decoration: none;
}
a.ae:visited {
	font-weight: bolder;
	font-size: 24;
	font-family: Garamond, "Verdana", "Trebuchet MS", Geneva, Arial, Helvetica, Verdana, sans-serif;
	color: #4B7AB7;
	text-decoration: none;
}
a.ae:hover   {
	font-weight: bolder;
	font-size: 24;
	font-family: Garamond, "Verdana", "Trebuchet MS", Geneva, Arial, Helvetica, Verdana, sans-serif;
	color: #E1771E;
	text-decoration: none;
}

a.ae:active {
	font-weight: bolder;
	font-size: 24;
	font-family: Garamond, "Verdana", "Trebuchet MS", Geneva, Arial, Helvetica, Verdana, sans-serif;
	color: #717171;
	text-decoration: none;
}

/*
	The contact page links definition.
	NOTE: these should have the same color as the main text
	*/
a.contact:link    {
	font-size: 11;
	font-weight: normal;
	color: #C1C1C1;
	text-decoration: none;
}
a.contact:visited {
	font-size: 11;
	font-weight: normal;
	color: #C1C1C1;
	text-decoration: none;
}
a.contact:hover   {
	font-size: 11;
	font-weight: normal;
	color: #4B7AB7;
	text-decoration: none;
}
a.contact:active  {
	font-size: 11;
	font-weight: normal;
	color: #000000;
	text-decoration: none;
}

/*
	A text page may have a follow-up page. The links to these pages have their own definition.
	*/
a.next:link    {
	font-size: 10;
	font-weight: normal;
	color: #E1771E;
	text-decoration: none;
}
a.next:visited {
	font-size: 10;
	font-weight: normal;
	color: #E1771E;
	text-decoration: none;
}
a.next:hover   {
	font-size: 10;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
}
a.next:active  {
	font-size: 10;
	font-weight: normal;
	color: #E1771E;
	text-decoration: none;
}

/*
	larger font
	*/

a.next-large:link    {
	font-size: 12;
	font-weight: normal;
	color: #E1771E;
	text-decoration: none;
}
a.next-large:visited {
	font-size: 12;
	font-weight: normal;
	color: #E1771E;
	text-decoration: none;
}
a.next-large:hover   {
	font-size: 12;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
}
a.next-large:active  {
	font-size: 12;
	font-weight: normal;
	color: #E1771E;
	text-decoration: none;
}

/*
	A text page may have a follow-up page. The links to these pages have their own definition.
	*/
a.next-orange:link    {
	font-size: 10;
	font-weight: normal;
	color: #E1771E;
	text-decoration: none;
}
a.next-orange:visited {
	font-size: 10;
	font-weight: normal;
	color: #E1771E;
	text-decoration: none;
}
a.next-orange:hover   {
	font-size: 10;
	font-weight: normal;
	color: #909090;
	text-decoration: none;
}
a.next-orange:active  {
	font-size: 10;
	font-weight: normal;
	color: #909090;
	text-decoration: none;
}


/*
	The next-previous definition is in a different font-size and color.
	*/
p.next {
font-size: 10 ;
color: #4B7AB7;	
}

p.sale-next {
font-size: 10 ;
color: #4B7AB7;
text-align: center;	
}
/*
	In the top line the links have their own definition.
	*/
a.header:link    {
	font-size: 18;
	font-weight: normal;
	color: #4B7AB7;
	text-decoration: none;
}
a.header:visited {
	font-size: 18;
	font-weight: normal;
	color: #4B7AB7;
	text-decoration: none;
}
a.header:hover   {
	font-size: 18;
	font-weight: normal;
	color: #E1771E;
	text-decoration: none;
}
a.header:active  {
	font-size: 18;
	font-weight: normal;
	color: #4B7AB7;
	text-decoration: none;
}

/*
	Font-size and color definition for a header text.
	*/
p.header1 {
	font-weight: bolder;
	font-size: 18;
	color: #4B7AB7;
	}
	
/*
	Our tagline definition.
	*/
p.tagline {
	font-weight: normal;
	font-size: 10;
	color: #696969;
	text-align: center;
}