/* outline and set background on entire header block */
.superheader {
	border: 1px dashed #000;
	background-color: #99CCCC;
	width: 780px;
}

/* container for logo and personal links */
.header {
        height: 89px;
        margin: 0;
        position: relative;
}

.logo {
        float: right;
        position: absolute;
        margin: -17px 0 0 25px;
        top: 50%;
}

/* personal link menu */
.personal {
		float: left; 				/* force to right side of container */
        list-style: none;			/* remove bullets on list */
        text-align: right;			/* align list items to right */
        padding: 0;					/* remove padding on list items */
        position: absolute;			/* set position absolutely in container */
        top: 50%; right: 0;			/* make top edge halfway down container */
        height: 2.5em;				/* set height to 2.5 characters high */
        margin: -1.25em 0 0 0;		/* set negative margin so center line is now halfway down */
}

/* set up image menu */
.menu, .menu li { 
	margin: 0; 
	padding: 0; 
}
.menu ul { 
	padding: 0;						/* remove padding from menu */
	margin: 0 auto;					/* set margin top/bottom to 0, and left/right to auto for centering */
	width: 714px;					/* set width explicitly so that we can center the menu */
	overflow: hidden; 				/* if overflow is set, most browsers expand to surround floated elements */
} 
.menu li { 
	float: left; 					/* make menu horizontal */
	list-style: none; 				/* remove bullets */
}

/* see lesson on horizontal menus for full explanation */
#menu1, #menu2, #menu3, #menu4, #menu1a, #menu2a, #menu3a, #menu4a { 
	display: block; text-indent: -9999px; text-decoration: none;  border: 1px solid #00F; 
}
#menu1,#menu1a { background-image: url(../menu/menu1.png); width: 100px; height: 30px }
#menu2,#menu2a { background-image: url(../menu/menu2.png); width: 100px; height: 30px }
#menu3,#menu3a { background-image: url(../menu/menu3.png); width: 100px; height: 30px }
#menu4,#menu4a { background-image: url(../menu/menu4.png); width: 100px; height: 30px }