@charset "utf-8";
/* CSS Document */

/*SON OF SUCKERFISH DROPDOWN MENU - START*/

/*sos - container for the menu bar*/
.navbar {
	height: 60px;
	background-image: url(../images/navbar.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

.navbarwrapper {
	height: 178px;
	width: 980px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;	
	margin-bottom: 5px;
	padding: 0px;
	display: block;
	position: relative;
}
.navbox {
	width: 240px;
	position: absolute;
	margin: 0px;
	padding: 0px;
	border-bottom-width: 2px;
	border-left-width: 2px;
	left: -2px;
	border-right-width: 2px;
	overflow: auto;
	z-index: 999;
}
#navbox2 {
	width: 180px;
	position: absolute;
	margin: 0px;
	padding: 0px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: #F00;
	border-bottom-color: #F00;
	border-left-color: #F00;

	border-left-width: 1px;
	border-left-style: solid;
	background-color: #069;
}
#navboxshadow {
		width: 272px;
	position: absolute;
	padding: 0px;
	display: block;
	margin-bottom: -16px;
	margin-left: -16px;
	height: auto;
}



/*sos - changing the width here will control whether dreamweaver will properly display the top level menu on 1 line or multiple lines, even though it will render inbrowser fine regardless anyway, making this just a design-level nitpick.*/
#nav, #nav ul {
	list-style: none;
	text-transform: none;
	height: 68px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: 50px;
	font-weight: bold;
	font-variant: normal;
	display: block;
	width: 100%;
	padding: 0px;
	clear: none;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-color: #002F65;
}
/*sos - set font styles for dropdowns*/
#nav a {
	display: block;
	text-decoration: none;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	height: auto;
	z-index: 200;
	color: #FFF;
	line-height: 68px;
	font-weight: bold;
	width: 109px;
	text-align: center;
}

/*sos - set position of arrow for multi-level menu items*/
#nav a.daddy {
	width: 220px;
	background-repeat: no-repeat;
	background-position: right center;
	height: 30px;
}

/*sos - set borders, bg colours for toplevel & dropdown menu items*/
#nav li {
	height: 68px;
	line-height: normal;
	width: 108.8px;
	z-index: 200;
	padding: 0px;
	background-color: #002F65;
	float: left;
	margin: 0px;
}
/*sos - set width of dropdown here*/
#nav li ul {
	position: absolute;
	left: -2999em;
	height: auto;
	width: 120px;
	w\idth: 240px;
	font-weight: normal;
	z-index: 999;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 2px;
	padding-top: 0px; /*this puts a small gap between the toplevel menu and the drop down*/
	background-position: center bottom;
	background-repeat: no-repeat;
	text-indent: 5;
}
/*sos - set padding of arrow (affects underlines though, so use cautiously if you notice underlines do not extend the full width of the dropdowns - mainly visible in Opera and Firefox), borders, width of dropdowns, width of highlight & bg colour for items without a submenu*/
#nav li li {
	padding: 0px;
	width: 240px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0em;
	margin-left: 0px;
	background-position: center bottom;
	z-index: 200;
}
/*sos - set width of dropdown rollover highlighting state here. 
Original values were width: 13em(208px) and w\idth: 9em (144px)*/
#nav li ul a {
	width: 240px;
	w\idth: 240px;
	margin: 0px;
	padding: 0px;
}
/*sos - set width of first level dropdown and vertical position of second level dropdown*/
#nav li ul ul {
	padding: 0px;
	width: 240px;
	margin-top: -30px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 240px;
	background-position: center bottom;
	height: auto;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -1999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}


/*rollover state of toplevel menu*/
#nav li:hover, #nav li.sfhover {
	color: #FFF;
	background-color: #39F;
	font-weight: bold;
	background-image: url(../images/nav-ro-bg-1.jpg);
	background-repeat: no-repeat;
	background-position: right top;
}

/*sos  - fix for probs in IE7 only*/

#menu li:hover, #menu li.hover {
	position: static;
}
/*these highlight the current active page, keeping the active tab coloured - **do not use a comma after the last item** */
body#homelink a#homelink,
body#about a#about,
body#coffeemachines a#coffeemachines,
body#coffee a#coffee,
body#coffeepods a#coffeepods,
body#contact a#contact

{
	margin: 0px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	z-index: 300;
	background-color: #F00;
	color: #FFF;
}
/*sos menu only - END*/

/* END NORMAL NAVBAR STYLING
----------------------------------------------------------------------------------------------------*/


/*START ADMIN NAV STYLING*?
/*sos - changing the width here will control whether dreamweaver will properly display the top level menu on 1 line or multiple lines, even though it will render inbrowser fine regardless anyway, making this just a design-level nitpick.*/
#adminnavbar, #adminnavbar ul {
	list-style: none;
	text-transform: none;
	height: 68px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: 50px;
	font-weight: bold;
	font-variant: normal;
	display: block;
	width: 980px;
	padding: 0px;
	clear: none;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-color: #002F65;
}
/*sos - set font styles for dropdowns*/
#adminnavbar a {
	display: block;
	text-decoration: none;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	height: auto;
	z-index: 200;
	color: #FFF;
	line-height: 68px;
	font-weight: bold;
	width: 122.5px;
	text-align: center;
}

/*sos - set position of arrow for multi-level menu items*/
#adminnavbar a.daddy {
	width: 220px;
	background-repeat: no-repeat;
	background-position: right center;
	height: 30px;
}

/*sos - set borders, bg colours for toplevel & dropdown menu items*/
#adminnavbar li {
	height: 68px;
	line-height: normal;
	width: 12.5%;
	z-index: 200;
	padding: 0px;
	background-color: #002F65;
	float: left;
	margin: 0px;
}
/*sos - set width of dropdown here*/
#adminnavbar li ul {
	position: absolute;
	left: -2999em;
	height: auto;
	width: 120px;
	w\idth: 240px;
	font-weight: normal;
	z-index: 200;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 2px;
	padding-top: 4px; /*this puts a small gap between the toplevel menu and the drop down*/
	background-position: center bottom;
	background-repeat: no-repeat;
	text-indent: 5;
}
/*sos - set padding of arrow (affects underlines though, so use cautiously if you notice underlines do not extend the full width of the dropdowns - mainly visible in Opera and Firefox), borders, width of dropdowns, width of highlight & bg colour for items without a submenu*/
#adminnavbar li li {
	padding: 0px;
	width: 240px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0em;
	margin-left: 0px;
	background-position: center bottom;
	z-index: 200;
}
/*sos - set width of dropdown rollover highlighting state here. 
Original values were width: 13em(208px) and w\idth: 9em (144px)*/
#adminnavbar li ul a {
	width: 240px;
	w\idth: 240px;
	margin: 0px;
	padding: 0px;
}
/*sos - set width of first level dropdown and vertical position of second level dropdown*/
#adminnavbar li ul ul {
	padding: 0px;
	width: 240px;
	margin-top: -30px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 240px;
	background-position: center bottom;
	height: auto;
}

#adminnavbar li:hover ul ul, #adminnavbar li:hover ul ul ul, #adminnavbar li.sfhover ul ul, #adminnavbar li.sfhover ul ul ul {
	left: -1999em;
}

#adminnavbar li:hover ul, #adminnavbar li li:hover ul, #adminnavbar li li li:hover ul, #adminnavbar li.sfhover ul, #adminnavbar li li.sfhover ul, #adminnavbar li li li.sfhover ul {
	left: auto;
}


/*rollover state of toplevel menu*/
#adminnavbar li:hover, #nav li.sfhover {
	color: #FFF;
	background-color: #39F;
	font-weight: bold;
	background-image: url(../images/nav-ro-bg-1.jpg);
	background-repeat: no-repeat;
	background-position: right top;
}

/*sos  - fix for probs in IE7 only*/

#menu li:hover, #menu li.hover {
	position: static;
}
/*sos menu only - END */

/* END NORMAL NAVBAR STYLING */

/* FOOTER LINKS STYLING */

.mattblacktabs{
	width: 100%;
	overflow: hidden; /*bottom horizontal line that runs beneath tabs*/
	margin-top: 40px;
}
.mattblacktabs ul{
	padding-left: 0px; /*offset of tabs relative to browser left edge*/
	font: bold 12px Verdana;
	list-style-type: none;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	margin: 0;
}

.mattblacktabs li{
	padding-right: 10px;
	float: left;
	margin: 0;
	display: inline;
	width: auto;
}

.mattblacktabs li a{
	text-decoration: none; /*right divider between tabs*/
	color: #CCC;
	width: auto;
	margin: 0;
	height: 16px;
	display: block;
	padding: 8px;
	background-image: url(../images/raster-gray.png);
	background-repeat: repeat;
}

.mattblacktabs li a:visited{
color: white;
}

.mattblacktabs li a:hover, .mattblacktabs li.selected a{
	background-color: #666;
}

</style>