/*
      Created by Keith Donegan of Code-Sucks.com
	  
	  E-Mail: Keithdonegan@gmail.com
	  
	  You can do whatever you want with these layouts,
	  but it would be greatly appreciated if you gave a link
	  back to http://www.code-sucks.com
	  
*/

* { padding: 0; margin: 0; }

body {
 font-family:Verdana, Arial, Helvetica, sans-serif;
 text-align:justify;
 font-size:12px;
 background-color:#999999;
 /*background-image:url(../../Sites/images/tile.jpg);
 background-repeat:repeat-y;*/
}
a:link {
	color:#333333;
	text-decoration:none;
	}
	
a:visited {
	color:#333333;
	text-decoration:none;
	}
	
a:hover {
	color:#669900;
	text-decoration:none;
	}

h1, h2, h3, h4, h5 {
color:#990000;
}
#subtext {
font-size:10px;
color:#669900;
text-align:center;
}
#container { 
 margin-left: 5em;
 width: 800px;

 }
#wrapper { 
 width: 100%;
 background-color:#FFFFFF;
}
#header {
 color: #333;
 width: 800px;
 float: left;
 padding-top: 10px;
 padding-bottom: 10px;
 /*border: 1px solid #ccc;*/
 border-top-color:#CCCCCC;
 border-top-style:solid;
 border-top-width:10px;
 border-bottom-color:#CCCCCC;
 border-bottom-style:solid;
 border-bottom-width:10px;
 height: 180px;
 margin: 0px 0px 0px 0px;
 background:#FFFFFF;
}
#hdright {
width:500px;
height:100%;
float:right;
padding-right:10px;
/*border:1px solid #ccc;*/
background:#FFFFFF;
text-align:right;
font-size:10px;
}
#navigation {
 float: left;
 width: 800px;
 color: #333;
 padding: 0px;
 /*border: 1px solid #ccc;*/
 margin: 0px 0px 5px 0px;
 background:#669900;
}
#leftcolumn { 
 color: #333;
/*border: 1px solid #ccc;*/

 background:#fff;
 margin: 0px 0px 0px 0px;
 padding: 00px;
 height: 440px;
 width: 240px;
 float: left;
}
#rightcolumn { 
 float: right;
 color: #333;
 /*border: 1px solid #ccc;*/
 background:#FFFFFF;
 margin: 0px 10px 5px 0px;
 padding: 10px;
 height: 100%;
 width: 475px;
 display: inline;
 }
 #rightcolumnsmall { 
 color: #333;
/*border: 1px solid #ccc;*/
 border-left-color:#CCCCCC;
 border-left-style:solid;
 border-left-width:2px;
 background:#FFFFFF;
 margin: 0px 35px 5px 0px;
 padding: 10px;
 height: 440px;
 width: 195px;
 float: right;
}
#leftcolumnbig { 
 float: left;
 color: #333;
 /*border: 1px solid #ccc;*/
 background:#FFFFFF;
 margin: 0px 0px 5px 0px;
 padding: 20px;
 height: 100%;
 width: 490px;
 display: inline;
 }
 #singlecolumn {
 float:left;
 background-color:#FFFFFF;
 margin: 0px 0px 5px 10px;
 padding: 20px;
 height:100%;
 width:740px;
 text-align:left;
 }
 #footer { 
 width: 780px;
 clear:both;
 color: #333;
/*border: 1px solid #ccc;*/
 border-bottom-color:#CCCCCC;
 border-bottom-style:solid;
 border-bottom-width:10px;
 border-top-color:#CCCCCC;
 border-top-style:solid;
 border-top-width:10px;
 background:#FFFFFF;
 margin: 0px 0px 10px 0px;
 padding: 10px;
 font-size:10px;
 text-align:center;
}
#imgright{
float:right;
padding:10px;
margin-right:10px;
}
#imgleft{
float:left;
padding:10px;
}
.imgbanner{
z-index:2;
position:absolute;
top:250px;
left:640px;
right:100px;
}
.imgbannerl{
z-index:2;
position:absolute;
top:250px;
left:100px;
}
#null{
margin:0;
padding:0;
}
#sidebanner{
font-size:10px;
text-align:left;
width:198px;
height:100%;
background-color:#ECECEC;
border-left:#cccccc solid 1px;
border-right:#cccccc solid 1px;
border-top:#cccccc solid 10px;
border-bottom:#cccccc solid 10px;
padding:10px;
margin-bottom:20px;
}
.margintop{
margin-top:120px;
}
.indent{
margin-left:10px;
}
ul.bull { 
list-style-type:square;
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:12px; 
text-align:left;
margin-left:2em;
}
ul.quote {
list-style-type:square;
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:10px; 
text-align:left;
margin-left:2em;
}
ul.indent {
margin-left:3em;
}
p,fieldset,table,pre {
	/*so things don't run into each other*/
	margin-bottom:1em;
}
.fade {
background-image:url(tile.jpg);
background-repeat:repeat-y;
}
.plink a{
color:#990000;
text-decoration:underline;
}
.plink a:hover{
color:#990000;
text-decoration:underline;
}
 
.borderright{
border-right-color:#CCCCCC;
border-right-style:solid;
border-right-width:2px;
}
.borderleft{
border-left-color:#CCCCCC;
border-left-style:solid;
border-left-width:2px;
}
.noborder{
border:0;
}
#space {
height:150px;
width:100%;
}
.textcenter {
text-align:center;
padding:10px;
margin-top:20px;
margin-bottom:20px;
}

/* Drop down menu code START -----------------------------------------------------------------------*/

#menu {
width: 100%;
background:#669900;
padding-bottom:0px;
font-size:16px;
float:left;
}

#menu a, #menu h2 {
font: bold 11px/16px Verdana, Arial, Helvetica, sans-serif;
display: block;
border-width: 0px;
border-style: solid;
border-color: #FFF;
white-space:nowrap;
margin: 0;
padding: 3px 3px;
text-align:center
}

#menu h2 {
color: #fff;
background:#990000;
/*text-transform: uppercase;*/
}

#menu a {
color: #fff;
background:#669900;
text-decoration: none;
}

#menu a:hover {
color: #fff;
background:#990000;
}

#menu a:active {
color:#FFFFFF;
background:#990000;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0px;
width: 199px;
float: left;
}
#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 500;
top:0px;
left:0px;
margin-top:20px;

}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

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

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

</style>
<!--[if IE]>
<style type="text/css" media="screen">
 #menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#menu ul li a {height: 1%;} 

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
</head>
<body id="www-tanfa-co-uk">
<div id="pagetop">
<a href="http://www.tanfa.co.uk/" title="tanfa :: Home Page" id="toplink"></a>
<h1>CSS Drop Down Menu Tutorial Code</h1>
<h2>Page 7 - Full Working Example</h2>
<h3>&laquo; <a href="http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp#hs7">return to tutorial</a> :: Stages 
[<a href="http://www.tanfa.co.uk/css/examples/menu/hs1.asp" title="Horizontal Example 1">1</a>] 
[<a href="http://www.tanfa.co.uk/css/examples/menu/hs2.asp" title="Horizontal Example 2">2</a>] 
[<a href="http://www.tanfa.co.uk/css/examples/menu/hs3.asp" title="Horizontal Example 3">3</a>] 
[<a href="http://www.tanfa.co.uk/css/examples/menu/hs4.asp" title="Horizontal Example 4">4</a>] 
[<a href="http://www.tanfa.co.uk/css/examples/menu/hs5.asp" title="Horizontal Example 5">5</a>] 
[<a href="http://www.tanfa.co.uk/css/examples/menu/hs6.asp" title="Horizontal Example 6">6</a>] 
[7]
</h3>
</div>

/* Drop down menu code END-----------------------------------------------------------------------*/