/* 
navmenus.css
tyler Mazaika
COIN 65 09w
Assignment 9
*/

* { margin: 0; padding: 0; }

body { 
    background-color: black; 
    color: white; 
    font: 100% Optima, sans-serif; 
}



div#topnav
{
	color: #fff;
	width: 100%;
}

div#topnav ul
{
	margin: .5em auto;
	padding: 0;
	list-style-type: none;
	width: 50em;
	border: 4px double #aaa;
}

div#topnav li { display: inline; }

div#topnav a
{
	display: inline-block;
	text-align: center;
	text-decoration: none;
    color: #fff;
	width: 10em;
	font-size: .8em;
}
div#topnav a:first-letter {
    font-size: 2em;
}

div#topnav a:hover:first-letter {  /* this validates, but unfortunately only works in FF... */
    color: red;
}




div#sidebar
{
	float: left;
	width: 9em;
	clear: both;
	margin: 1em;
	border-top: .5em solid #a00;
	border-left: .08em solid #a00;
}

div#sidebar ul
{
	margin: 1em;
	list-style-type: none;
	border-right: .08em solid #d60;
	border-bottom: .5em solid #d60;
}

div#sidebar a
{
	display: block;
	text-decoration: none;
	color: #fff;
	padding: .5em .2em 1em .2em;
	margin: 1em 0;
	width: 6em;
}

div#sidebar a:first-letter { 
    padding: .5em 0 0 1.5em;
    
    }
div#sidebar a:hover:first-letter {  /* this validates, but unfortunately only works in FF... */
    border-left: .5em solid #ee0;
    border-top: .08em solid #ee0;
    padding: .42em 0 0 1em;
}
div#sidebar a:hover
{
    padding: .5em .2em 1em .2em;
}

div#sidebar li { display: inline; }

p { margin: 2em; }




/* SECOND GROUP ADDED BECAUSE THE FIRST GROUP ONLY WORKS IN FF...
*/

div#secondContainer { clear: both; }

div#topnav2
{
	color: #fff;
	width: 100%;
}

div#topnav2 ul
{
	margin: .5em auto;
	padding: 0;
	list-style-type: none;
	width: 50em;
	border: 4px double #aaa;
}

div#topnav2 li { display: inline; }

div#topnav2 a
{
	display: inline-block;
	text-align: center;
	text-decoration: none;
    color: #fff;
	width: 7.8em;
	font-size: 1em;
	padding: .6em 0;
	margin: 2px 0 2px 4px;
	border-top: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
}
div#topnav2 a:hover {
    border-top: 3px solid #aaa;
    border-bottom: 3px solid #aaa;
    margin: 0 0 0 4px;
}




div#sidebar2
{
	float: left;
	width: 9em;
	clear: both;
	margin: 1em;
	border-top: .5em solid #a00;
	border-left: .08em solid #a00;
}

div#sidebar2 ul
{
	margin: 1em;
	list-style-type: none;
	border-right: .08em solid #d60;
	border-bottom: .5em solid #d60;
}

div#sidebar2 a
{
	display: block;
	text-decoration: none;
	color: #fff;
	padding: .5em .2em 1em .2em;
	margin: 1em 1em;
	width: 6em;
}
div#sidebar2 a:hover { color: #ff0; }