body
{
margin:0px 0px 0px 0px;
background-image:url(../images/new_bg.jpg);
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
text-align:center;
}

div#outer
{
width: 800px;

margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: 0px solid #cccccc;
}

.header 
{
width:800px;
margin:0px 0px 0px 0px;
border:0px #cccccc solid;
border-left:0px #cccccc solid;
text-align:left;
z-index:2;
}
.footer 
{
background-color:#ffffff;
width:638px;
height:12px;
border:1px #cccccc solid;
margin:3px 0px 0px 0px;
color:#333333;
font:Verdana;
font-size:10px;
padding:2px 3px 2px 5px;
text-align:right;
}
td.tableText
{
color:#333333;
font:Verdana;
font-size:10px;
padding:2px 5px 2px 5px;
}
table.tableText
{
color:#333333;
font:Verdana;
font-size:10px;
padding:2px 5px 2px 5px;

}
table.tableLinks
{
color:#603228;
font:garamond;
font-size:11px;
font-weight:bold;
}

th
{
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}

.smallBoxLeft
{
background-color:#FFFFFF;
width:415px;
height:40px;
border:1px #cccccc solid;

margin:3px 0px 0px 0px;
float:left;
background-image:url(../images/cabinets_direct_logo2.jpg);
/*background-image:url(../images/closure_sign.jpg);*/
background-position:center;
background-repeat:no-repeat;
padding:0px 0px 0px 0px;
}
.smallBoxRight
{
background-color:#ffffff;
width:378px;
height:151px;
border:1px #cccccc solid;
margin:3px 0px 0px 0px;
float:right;

vertical-align:bottom;
padding-left:0px;
padding-top:6px;
}
.verySmallBoxRight
{
background-color:#ffffff;
width:378px;
height:15px;
border:0px #cccccc solid;
margin:0px 0px 2px 0px;
float:right;
text-align:right;
}
.bigBoxLeft
{
background-color:#FFFFFF;
width:415px;
height:400px;
border:1px #cccccc solid;
margin:2px 0px 0px 0px;
float:left;
text-align:left;

}
.bigBoxRight
{
background-color:#ffffff;
width:378px;
height:283px;
border:1px #cccccc solid;
margin:2px 0px 0px 0px;
float:right;
padding-left:0px;


vertical-align:text-bottom;

}

.menu
{
background-color:#ffffff;
width:141px;
border:1px #cccccc solid;
margin:3px 0px 0px 0px;
float:left;
text-align:left;
}
.doorMenu
{
border:1px #cccccc solid;
float:left;
text-align:center;
width:91px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#999966;
height:16px;
vertical-align:middle;
}
.doorMenu a:link
{
border:1px #cccccc solid;
float:left;
text-align:center;
width:91px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#999966;
height:16px;
vertical-align:middle;
}
.doorMenu a:hover
{
background-color:#336699;
border:1px #cccccc solid;
float:left;
text-align:center;
width:91px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#999966;
height:16px;
vertical-align:middle;
}

.main
{
background-color:#ffffff;
width:650px;
height:auto;
border:1px #cccccc solid;
margin:3px 0px 0px 3px;
float:right;
text-align:left;
padding:1px 1px 1px 1px;

}
.main2
{
background-color:#ffffff;
width:650px;
height:auto;
border:1px #cccccc solid;
margin:3px 0px 0px 3px;
float:right;
text-align:left;
padding:1px 1px 1px 1px;
color:#333333;
font:Verdana;
font-size:10px;
text-align:right;
}
.mainHeader
{
background-color:#ffffff;
width:650px;
height:25px;
border:1px #cccccc solid;
margin: 3px 0px 0px 3px;
float:right;
text-align:left;
padding:1px 1px 1px 1px;

}
.mainCataloguePage
{
background-color:#E9E9ED;
width:797px;
height:auto;
border:1px #cccccc solid;
margin:3px 0px 0px 0px;
float:left;
text-align:left;
padding:1px 1px 1px 1px;
}
.main2CataloguePage
{
background-color:#ffffff;
width:797px;
height:auto;
border:1px #cccccc solid;
margin:3px 0px 0px 0px;
float:left;
text-align:left;
padding:1px 1px 1px 1px;
color:#333333;
font:Verdana;
font-size:10px;
text-align:right;
}


.mainHeaderCataloguePage
{
background-color:#ffffff;
width:797px;
height:25px;
border:1px #cccccc solid;
margin: 3px 0px 0px 0px;
float:left;
text-align:left;
padding:1px 1px 1px 1px;

}
.bodyText
{
color:#333333;
font:Verdana;
font-size:10px;
padding:2px 5px 2px 5px;
}
.galleryTitles
{
color:#666666;
font:Garamond;
font-size:11px;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
font-weight:bold;
}
h4
{
color:#666666;
font:Garamond;
font-size:11px;
padding:0px 5px 0px 5px;
margin:0px 0px 0px 0px;
font-weight:bold;
}
h3
{
color:#000099;
font:Garamond;
font-size:13px;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
font-weight:bold;
}
h1
{
color:#666666;
font:Garamond;
font-size:19px;
padding-left:5px;
margin:0px 0px 0px 0px;
font-weight:normal;
}
li
{
color:#333333;
font:Verdana;
font-size:11px;
padding:0px 0px 0px 0px;
}
a:link
{ 
color:#333333;
font:Verdana;
font-size:10px;

font-weight:bold;
}
a:visited
{ 
color:#333333;
font:Verdana;
font-size:10px;

font-weight:bold;
}
a:hover
{ 
color:#333333;
font:Verdana;
font-size:10px;

}
a:active
{ 
color:#333333;
font:Verdana;
font-size:10px;
font-weight:bold;
} 
.image
{
height:220px;
width:293px;
background-image:url(../images/gallery/imageHolder.jpg);
background-position:center;
background-repeat:no-repeat;
background-color:#ffffff;
float:right;


}

#menuTOP {
width: 100%;
background: #eee;
float: left;
background-color:#CCCCCC;
z-index:20;
}
#menuTOP ul {
list-style: none;
margin: 0;
padding: 0;
width: 114px;
float: left;
z-index:20;
}

#menuTOP a, #menuTOP h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px 2px 3px;
z-index:20;
}

#menuTOP h2 {
color:#000066;
background: #ccc;
text-transform: uppercase;
z-index:20;

}

#menuTOP a {
color: #000;
background: #efefef;
text-decoration: none;
z-index:20;
}

#menuTOP a:hover {
color: #a00;
background: #fff;
z-index:20;
}

/* POSITIONING OF menuTOPS */
#menuTOP li 
{
position: relative;
z-index:20;
}

#menuTOP ul ul {
position: absolute;
z-index:20;
}

#menuTOP ul ul ul {
top: 0;
left: 100%;
z-index:20;
}

/*Hiding and Revealing using :hover*/

div#menuTOP ul ul,
div#menuTOP ul li:hover ul ul,
div#menuTOP ul ul li:hover ul ul
{
display: none;
z-index:20;
}

div#menuTOP ul li:hover ul,
div#menuTOP ul ul li:hover ul,
div#menuTOP ul ul ul li:hover ul
{
display: block;
z-index:20;
}

.header2 
{
width:800px;
height:40px;

margin:0px 0px 0px 0px;
border:0px #cccccc solid;
border-left:0px #cccccc solid;

text-align:left;
}

#pic {
	background-color:
	left: 0px;
	position: relative;
	top: 0px;
/*	width: 135px;*/
}

#pic a .large {
	border: 0px;
	display: block;
	height: 0px;
	left: -1px;
	position: absolute;
	top: -1px;
	width: 0px;
}

#pic a img {
	border: 0;
}

#pic a.p1, #pic a.p1:visited {
	background: #E9E9ED;
	border: 0px solid #000000;
	display: block;
	/*height: 90px;*/
	left: 0;
	text-decoration: none;
	top: 0;
	/*width: 135px;*/
}

#pic a.p1:hover {
	background: #E9E9ED;
	text-decoration: none;
}

#pic a.p1:hover .large {
	background: #E9E9ED;
	border: 0px solid #000000;
	display: block;
	height:175px;
	left: 0px;
	position:absolute;
	top: -150px;
	width:175px;
}

#pic2 {
	background-color:
	left: 0px;
	position: relative;
	top: 0px;

/*	width: 135px;*/
}

#pic2 a .large2 {
	border: 0px;
	display: block;
	height: 0px;
	left: -1px;
	position: absolute;
	top: -1px;
	width: 0px;
	
}

#pic2 a img {
	border: 0;

}

#pic2 a.p2, #pic2 a.p2:visited {
	background: #FFFFFF;
	border: 0px solid #000000;
	display: block;
	/*height: 90px;*/
	left: 0;
	text-decoration: none;
	top: 0;
	/*width: 135px;*/
}

#pic2 a.p2:hover {
	background-color:
	color: #000000;
	text-decoration: none;
}

#pic2 a.p2:hover .large2 {
	border: 0px solid #000000;
	display: block;
	height:360px;
	left: -209px;
	position:absolute;
	top: -90px;
	width:200px;
	z-index:1000;
}


#pic3 {
	background-color:
	left: 0px;
	position: relative;
	top: 0px;
	float:left;
/*	width: 135px;*/
}

#pic3 a .large3 {
	border: 0px;
	display: block;
	height: 0px;
	left: -1px;
	position: absolute;
	top: -1px;
	width: 0px;

}

#pic3 a img {
	border: 0;
}

#pic3 a.p3, #pic3 a.p3:visited {
	background: #FFFFFF;
	border: 0px solid #000000;
	display: block;
	/*height: 90px;*/
	left: 0;
	text-decoration: none;
	top: 0;
	/*width: 135px;*/
}

#pic3 a.p3:hover {
	background-color:
	color: #000000;
	text-decoration: none;
}

#pic3 a.p3:hover .large3 {
	border: 1px solid #000000;
	display: block;
	height:400px;
	left: -500px;
	position:absolute;
	top: -165px;
	width:400px;
	z-index:100;
}


/#menuSIDE {
text-align:left;
height:auto;
background: #eee;
float: left;
background-color:#CCCCCC;
}
#menuSIDE ul {
list-style: none;
margin: 0;
padding: 0;
width: 158px;
float: left;

}

#menuSIDE a, #menuSIDE h2 {
font: bold 12px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #888 #888 #555 #bbb;
margin: 0;
padding: 3px 3px 3px 3px;
}

#menuSIDE h2 {
color:#FFFFFF;
background:#666666;
text-transform: uppercase;
}

#menuSIDE a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menuSIDE a:hover {
color: #a00;
background: #fff;
}

/* POSITIONING OF menuTOPS */
#menuSIDE li {
position:relative;

}

#menuSIDE ul ul {
position:absolute;
left:158px;
top:0px;
}

#menuSIDE ul ul ul {
top: 0;
left: 100%;
}

/*Hiding and Revealing using :hover*/

div#menuSIDE ul ul,
div#menuSIDE ul li:hover ul ul,
div#menuSIDE ul ul li:hover ul ul
{display: none;}

div#menuSIDE ul li:hover ul,
div#menuSIDE ul ul li:hover ul,
div#menuSIDE ul ul ul li:hover ul
{display: block;}

a#cabCats {
font:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:13px;
text-decoration:none;
font-variant:small-caps;

}
