# {
margin: 0px;
padding: 0px;
}

body {
margin:0;
padding:0;
min-height:1600px;
text-align:center;
font-size:75%;
}
/*** Header section ***/
#container {
color:#000;
margin:0;
min-width:770px;
padding:0;
text-align:left;
width:1130px;
font-family:Arial;
position:absolute;
left:0px;
}

#sitename {
color:#000;
height:92px;
margin:0 20px 50px;
text-align:center;
}

#livehelp{
top:190px;
left:82px;
position:absolute;
right:100%;
}
/* navigation */
#searchbar{
position:absolute;
left:732px;
top:70px;
width:400px;
}

#rightnav{
float:right;
top:170px;
left:889px;
width:180px;
position:absolute;
}

#rightnav a{
background:url(logoboxcontent.jpg);
margin-right:20px;
margin-top: 0px;
text-indent:20px;
display:block;
width:150px;
text-decoration:none;
color:#000;
}

#rightnav a:hover{
color:#FF9933;
}

#rightnav h4{
background:url(logoboxcontent.jpg);
margin-right:20px;
margin-top: 0px;
text-indent:20px;
display:block;
width:150px;
text-decoration:none;
color:#000;
}

#main{
left:300px;
top:200px;
width:580px;
position:absolute;
}

#product{
background:url(productbox.jpg);
width:186px;
height:370px;
float:left;
top:20px;
position:relative;
}

#product a{
text-decoration:underline;
font-weight:bold;
color:#000000;

}
#product a:hover{
color:#FF9933;
}

#product img{
max-height:90px;
max-width:100px;
}

#cartbutton{
display: block;
  width: 150px;
  height: 58px;
background: url("viewcart.jpg") no-repeat 0 0;
float:right;
top:115px;
left:890px;
position:absolute;
}

#cartbutton:hover
{ 
  background-position: 0 -58px;
}

#addto{
display: block;
  width: 141px;
  height: 55px;
background: url("addtocart.jpg") no-repeat 0 0;
}

#addto:hover
{ 
  background-position: 0 -55px;
}

#nextprev{
left:400px;
top: 0px;
position:absolute;
width:400px;
}
#nextprev a{
color:#000;
text-decoration:none;
}
#nextprev a:hover{
color:#FF9933;
}

ul#nav { text-align:center; background:url(navbar.jpg); padding-bottom: 0px; }
ul#nav li { float:none; list-style-type:none }
ul#nav li a { height:60px; display:block; position:absolute; top:0px; text-indent:-9999px; outline:none; }

li#navHome a, li#navProducts a, li#navAbout a, li#navContact a, li#navTerms a,  li#navShipping a { background:url(navbar.jpg)}

li#navHome a 					        { background-position:0 0; width:105px; left:0 }
li#navHome a:hover				        { background-position:0 -60px }
body#pageHome li#navHome a 		        { background-position:0 -120px }

li#navProducts a 					    { background-position:-105px 0; width:134px; left:105px }
li#navProducts a:hover				    { background-position:-105px -60px }
body#pageProducts li#navProducts a 	    { background-position:-105px -120px }

li#navAbout a 				            { background-position:-239px 0; width:129px; left:239px }
li#navAbout a:hover				        { background-position:-239px -60px }
body#pageAbout li#navAbout a 			{ background-position:-239px -120px }
 
li#navContact a 					    { background-position:-368px 0; width:147px; left:368px }
li#navContact a:hover				    { background-position:-368px -60px }
body#pageContact li#navContact a 	    { background-position:-368px -120px }

li#navTerms a 					        { background-position:-515px 0; width:147px; left:515px }
li#navTerms a:hover				        { background-position:-515px -60px }
body#pageTerms li#navTerms a 		    { background-position:-515px -120px }

li#navShipping a 					    { background-position:-621px 0; width:169px; left:621px }
li#navShipping a:hover				    { background-position:-621px -60px }
body#pageShipping li#navShipping a 		{ background-position:-621px -120px }
/* The following code just puts our navigation on an example page; it's not necessarily related to the tutorial */
#nav {
position:relative;
margin-top:-15px;
width:621px;
height:19px;
left:24px;
}

#leftnav{
background:url(sideboxcontent.jpg);
margin-left:84px;
top:310px;
width:180px;
position:absolute;
}

#leftnav img{
margin-top:-3px;
margin-bottom:-3px;
}

#leftnav a{
color:#000;
text-decoration:none;
height:20px;
display: block;
width:157px;
text-indent:20px;
margin-left:-17px;
}

#leftnav a:hover {
color: #000;
background: #ffe699;
}

#leftnav h1 {
margin-top:-20px;
margin-left:2px;
font-family:Arial;
text-decoration:none;
font-size:14px;
}

#leftnav ul { /* remove bullets and list indents */
list-style: none;
margin-left: 30px;
padding: 0;
}

#leftnav li {
/* make the list elements a containing block for the nested lists */
position: relative;
}

#leftnav ul ul {
position:absolute;
top: 0;
left: 60%; /* to position them to the right of their containing block */
width: 180px; /* width is based on the containing block */
}

#leftnav ul ul li a {
background:center url(sideboxcontentpopout.gif);
margin-left: 10px;
margin-bottom: 0px;
color:#000;
text-decoration:none;
height:20px;
width:163px;
}

div#leftnav ul ul,
div#leftnav ul ul li:hover ul {
display: none;
background:none;
}

div#leftnav ul li:hover ul {
display: block;
background:none;
}



<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc); /* call hover behaviour file */
font-size: 100%; /* enable IE to resize em fonts */
}

#leftnav ul li {
float: left; /* cure IE5.x "whitespace in lists" problem */
width: 100%;
}

#leftnav ul ul li a {
height: 1%; /* make links honour display: block; properly */
}

</style>
<![endif]-->