/*//////////////////////////////////////     BODY CONTROL      ///////////////////////////////////////*/
    /*  BODY */  
    body, html {
    background-color: #FFFFFF;
    text-align: center;
    /*body {background-image:url('')*/ 
	
	/* Borders */
	/*margin:0; /* margin width all around */
    /*padding:1.5em; /* padding between border and page content */
	/*border: 50px #666 ridge; /* width / color / style */
	/* Other styles of borders:
	                             dotted, dashed, solid, double, groove, inset, outset
	*/
	
	/* Margin widths */
	margin-top: 0px; 
	margin-left: 0px; 
	margin-right: 0 px;
	margin-bottom: 0 px;
	
	/* ScrollBar Colors */
 	scrollbar-face-color: #F12B3A; /* color of the scroll block face */
 	scrollbar-shadow-color: #ccccff; /* don't need to change color for the dark shadow of the 3D look */
 	scrollbar-highlight-color: #ccccff; /* don't need to change color for the light shadow of the 3d look */
 	scrollbar-3dlight-color: #99ccff; /* don't need to change color for the light shadow of the 3d look on the scroll block */
 	scrollbar-darkshadow-color: #000000; /* don't need to change color for the drop shadow behind scroll block */
 	scrollbar-track-color: #1E21A2; /* background color */
 	scrollbar-arrow-color: #FFFFFF;  /* arrow colors when active */

}
    
    /* END BODY */
    /*/////////////////////////////////////////////////////////////////////////////////////////////////////////*/
    
    
    
    .bg{
	background-image : url(images/index_02.gif);
	background-position : top center;
	background-repeat : no-repeat;
}

    
    
    
    
    /*/////////////////////////////////////////   TEXT CONTROL     ///////////////////////////////////////////*/
    /*     TEXT    */
	body { margin-top: 0px; margin-left: 0px; }
	H1{ font-family: Arial, Helvetica; text-align:; font-style: normal; color: #010075; font-size : 13pt; display: inline }
	H2{ font-family: Arial, Helvetica; text-align:; font-style: normal; color: #FA0309; font-size : 12pt; display: inline}
	H3{ font-family: Arial, Helvetica; text-align:; font-style: normal; color: #999999; font-size : 10pt; display: inline}
	H4{ font-family: Arial, Helvetica; text-align:; font-style: normal; color: #000000; font-size : 10pt; display: inline}
	p { font-family: Arial, Helvetica; text-align:; font-style: normal; color: 000000; font-size : 10pt; display: inline}
	table,td { font-family: Arial, Helvetica; color: #000000; font-size : 10pt; }
    li { font-family: Arial, Helvetica; color: red; font-size : 12pt; }
    /*    END TEXT    */
    /*////////////////////////////////////////////////////////////////////////////////////////////////////////*/


  /* ///////////////////////////////////////////hover lists////////////////////



  html code example
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>


#navcontainer { width: 200px; }

#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
background-color: #036;
border-bottom: 1px solid #eee;
}

#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#navcontainer a:hover
{
background-color: #369;
color: #fff;
}



     */




     /*

     HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS

#navlist li
{
display: inline;

}

#navlist
{
width: 7em;

font-family: sans-serif;
margin: 0 0 0 3em;
padding: 0;
border-top: 1px #000 solid;
border-left: 1px #000 solid;
border-right: 1px #000 solid;
}

#navlist a
{
width: 99.99%;

display: block;
background-color: #fff;
border-bottom: 1px #000 solid;
text-align: center;
text-decoration: none;
color: #000;
}

#navlist a:hover { background-color: orange; }
#navlist a:visited { color: #000; }


              Pure hover lists

                   HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>
<li><a href="#">Subitem two</a></li>
<li><a href="#">Subitem three</a></li>
<li><a href="#">Subitem four</a></li>
</ul>

</li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>
</div>

CSS
ul#navlist { font-family: sans-serif; }

ul#navlist a
{
font-weight: bold;
text-decoration: none;
}

ul#navlist, ul#navlist ul, ul#navlist li
{
margin: 0px;
padding: 0px;
list-style-type: none;
}

ul#navlist li { float: left; }

ul#navlist li a
{
color: #ffffff;
background-color: #003366;
padding: 3px;
border: 1px #ffffff outset;
}

ul#navlist li a:hover
{
color: #ffff00;
background-color: #003366;
}

ul#navlist li a:active
{
color: #cccccc;
background-color: #003366;
border: 1px #ffffff inset;
}

ul#subnavlist { display: none; }
ul#subnavlist li { float: none; }

ul#subnavlist li a
{
padding: 0px;
margin: 0px;
}

ul#navlist li:hover ul#subnavlist
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
}

ul#navlist li:hover ul#subnavlist li a
{
display: block;
width: 10em;
border: none;
padding: 2px;
}

ul#navlist li:hover ul#subnavlist li a:before { content: " >> "; }


ABOUT THE CODE
Some lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.

              end pure over lists


              Blues Clues

              HTML

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>
<li><a href="#">Subitem two</a></li>
<li><a href="#">Subitem three</a></li>
<li><a href="#">Subitem four</a></li>
</ul>

</li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>
</div>

CSS
#navcontainer { }
#navcontainer a { text-decoration: none; }

#navcontainer ul
{
padding: 0;
margin: 0;
list-style-type: none;
position: relative;
}

#navcontainer li { display: inline; }

1st level elements
#navcontainer ul
{
border-top: 1px solid #36c;
border-bottom: 1px solid #36c;
background-color: #36c;
padding: 2px 0;
margin-bottom: 2em;
}

#navcontainer li { margin: 0 0 0px; }

#navcontainer ul a,
#navcontainer ul a:link,
#navcontainer ul a:visited
{
background-color: #36c;
border: 1px solid #36c;
color: white;
padding: 0px 5px;
}

#navcontainer ul a:hover,
#navcontainer ul a:focus
{
background-color: #9CD4F7;
border: 1px solid black;
color: black;
}

current Link
#navcontainer ul a#current,
#navcontainer ul a#current:link,
#navcontainer ul a#current:visited { font-weight: bold; }

Second and subsequent levels
#navcontainer ul ul
{
font-size: 80%;
position: absolute;
top: 23px;
left: 0;
width: 100%;
border-top: none;
background-color: #95B1BB;
}

#navcontainer ul ul li { display: inline; }

#navcontainer ul ul a,
#navcontainer ul ul a:link,
#navcontainer ul ul a:visited
{
background-color: #95B1BB;
border: 1px solid #95b1bb;
color: black;
}

#navcontainer ul ul a:hover,
#navcontainer ul ul a:focus
{
background-color: #9CD4F7;
border: 1px solid black;
color: black;
}

current Link
#navcontainer ul ul a#subcurrent,
#navcontainer ul ul a#subcurrent:link,
#navcontainer ul ul a#subcurrent:visited { font-weight: bold; }


ABOUT THE CODE
Some lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.
               ---------gray-----


#navcontainer { }
#navcontainer a { text-decoration: none; }

#navcontainer ul
{
padding: 0;
margin: 0;
list-style-type: none;
position: relative;
}

#navcontainer li { display: inline; }

1st level elements
#navcontainer ul
{
border-top: 0px solid #969696;
border-bottom: 0px solid #969696;
background-color: #969696;
padding: 2px 0;
margin-bottom: 2em;
}

#navcontainer li { margin: 0 0 0px; }

#navcontainer ul a,
#navcontainer ul a:link,
#navcontainer ul a:visited
{
background-color: #9A9A9A;
border: 0px solid ;
color: white;
padding: 0px 5px;
}

#navcontainer ul a:hover,
#navcontainer ul a:focus
{
background-color: #B98B8B;
border: 1px solid black;
color: black;
}

current Link
#navcontainer ul a#current,
#navcontainer ul a#current:link,
#navcontainer ul a#current:visited { font-weight: bold; }

Second and subsequent levels
#navcontainer ul ul
{
font-size: 80%;
position: absolute;
top: 23px;
left: 0;
width: 100%;
border-top: none;
background-color: #95B1BB;
}

#navcontainer ul ul li { display: inline; }

#navcontainer ul ul a,
#navcontainer ul ul a:link,
#navcontainer ul ul a:visited
{
background-color: #95B1BB;
border: 1px solid #95b1bb;
color: black;
}

#navcontainer ul ul a:hover,
#navcontainer ul ul a:focus
{
background-color: #9CD4F7;
border: 1px solid black;
color: black;
}

current Link
#navcontainer ul ul a#subcurrent,
#navcontainer ul ul a#subcurrent:link,
#navcontainer ul ul a#subcurrent:visite


-----end gray--------


              Blurs Clues






                  In Header
                   <style type="text/css">
                   </style>

    ///////////////////////////////////////hover lists////////////////////
*/





            







    /*
bottem buttons
<div id="navcontainer">
<ul id="navlist">
<li><a href="index.html">Home</span></a></li>
<li><a href="cabinetry.html">About us</a></li>
<li><a href="countertops.html">Store</a></li>
<li><a href="appliances.html">Gallery</a></li>
<li><a href="accessories.html">Accessories</a></li>
<li><a href="tour.html">Tour </a></li>
<li><a href="contact_us.html">Contact Us</a></li>

  */




   
   
   
    /*////////////////////////////////////////     LINK CONTROL    ////////////////////////////////////////////*/
    /*  LINKS */
    a:link { color : #FE3E3E; font-weight: bold; text-decoration: none }       /* unvisited link */
    a:visited { color : #FE3E3E; text-decoration: underline }   /* visited link */
    a:hover { color : #242BAF; font-weight: bolder; text-decoration: none; font-stretch: wider }      /* mouse over link */
    a:active { color : #242BAF; text-decoration: line-through }     /* selected link */
    /*  END LINKS */
    /*/////////////////////////////////////////////////////////////////////////////////////////////////////////*/




    
    

    

    
    
    
    /*//////////////////////////////////////     Bullets within a list /////////////////////////////////////*/
	/* Bullet styles within a list */
    	/* other styles include:
	                          square, disc, circle, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha
							  upper-alpha, lower-latin, upper-latin, lower-greek, hebrew, hiragana, katakana, hiragana-iroha
							  katakana-iroha, none
	*/

    /* use an image for the bullets
	list-style-image: url(images/bullet.gif);
  .ul {
  	list-style-type: disc;color: #00CC00 ;




}
                       */



    /* End Bullet styles within a list */
    
    
	/*/////////////////////////////////////////// Form Properties //////////////////////////////////////////*/
	/* Form Properties */
	/* Submit Button */



	.buttonSubmit {
 	color:black; /* font color */
 	background-color: #B09BFF; /* button background color */
 	font-size: 1.0em; /* font size */
 	border: 3px solid #724CFF; /* button border color */
 	padding: 1px; /* spacing between text and button border */
	}
	/* Reset Button */
	.buttonReset {
 	color:black; /* font color */
 	background-color: #B09BFF; /* button background color */
 	font-size: 1.0em; /* font size */
 	border: 3px solid #724CFF; /* button border color */
 	padding: 1px; /* spacing between text and button border */
	}
	/* End Form Properties */
    
    /*//////////////////////////////////////     TABLE CONTROL     ////////////////////////////////////////*/
    /*  Table   */
    .container {
    
    width:760px;
    padding: 2px;
    margin:0 auto;
    border-left-width: 1;
    border-right-width: 1;
    border-top-width: 1;
    border-bottom-width: 1;
    border-style: solid;
    border-color: #000000;
    background-color: ffffff;
    /*background-image:url('')*/
    }
    
    .box_title {
    width: 200px;
    padding: 2px;
    border-left-width: 0;
    border-right-width: 0;
    border-top-width: 0;
    border-bottom-width: 1;
    border-style: solid;
    border-color: #000000;
    background-color: cccccc;}
    
    .box_content {
    width: 200px;
    padding: 0px;
    border-width: 1;
    border-style: solid;
    border-color: #000000;
    background-color: ffffff;}
    
    /*  END TABLE  */
    /*////////////////////////////////////////////////////////////////////////////////////////////////////////*/
    
    
    
    
    
    
    
    
    
    /*////////////////////////////////////////        IMAGE BORDER      /////////////////////////////////////*/
    
    /*  Image Border  */  
    img {}
    .image_border {
    padding: 0px;
    border-width: 1;
    border-style: dotted;
    border-color: #000000;
    /* END Image Border  */
    /*////////////////////////////////////////////////////////////////////////////////////////////////////////*/