/* Author: Greg Pullman */


/* GENERAL STYLES APPLYING TO WHOLE PAGE */

#header	{
	width: 960px;
	background-image: url(../accessories/banner-012009.gif);
	height: 130px;
}

#wrapper	{
	width: 920px;
	margin-top: 10px;
	margin-bottom: 30px;
	padding: 10px 20px 50px 20px;
	background-color: #fff;
}

body	{
	background-color: #996;
	color: #000;
//	background-image: url(../accessories/pea-background.gif);
//        background-repeat: repeat-y;

}


h1	{	/* Used for Google; text invisible on page */
	margin-top: 0;
	font-size: 0.01px;
	color: #996;
	background-color: #996; 
	text-align: left;
}


h2	{
	font-size: 1.8em;
	color: #963;
	padding-left: 5px;
	background-color: #ccc;
	display: block;
	-moz-border-radius: 5px;
}


h3	{
	font-size: 1.5em;
	color: #963;
	padding-left: 5px;
	background-color: #ccc;
	display: block;
	-moz-border-radius: 5px;
}

h4 {
	font-size: 1.1em;
	font-weight: bold;
	color: #630;
	background-color: #f6f6f6;
}

h5 {
	font-size: 0.8em;
	font-weight: bold;
	color: #000;
	background-color: #f6f6f6;
}

.redtext {
	color: #c00;
}
/* ----------------------------------------- */



/* TOPNAV */

#topnavwrapper {
	width: 920px;
	min-height: 55px;
	margin-left: auto;
	margin-right: auto;
	border-bottom: 2px solid #999;
}

#topnav {
	float: left;
	list-style: none;
}

#topnav li {
	float: left;
	display: block;
}

/* Commented backslash hack hides rule from IE5-Mac \*/
#topnav a, #topnav a span
{
float: none;
}
/* End IE5-Mac hack */

#topnav .mainnav {
	border-top: 1px solid #fff;
}

#topnav .mainnav ul {
	margin-top: 0px;
	margin-left: -40px;
}

#topnav .mainnav ul li {
	padding-bottom: 5px;
}

#topnav .mainnav ul li a, #topnav .mainnav ul li a.selected:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	color: #333;
	background: #ccc url(../accessories/tab-light-left.gif) left top no-repeat;
	text-decoration: none;
	margin-left: 2px;
	padding-left: 10px;
	padding-bottom: 5px;
}

#topnav .mainnav ul li a span, #topnav .mainnav ul li a.selected:hover span {
	background: url(../accessories/tab-light-right.gif) right top no-repeat;
	padding-right: 10px;
}

#topnav .mainnav ul li a:hover, #topnav .mainnav ul li a.selected {
	color: #ccc;
	background: #666 url(../accessories/tab-dark-left.gif) left top no-repeat;
	text-decoration: none;
	padding-left: 10px;
}

#topnav .mainnav ul li a:hover span, #topnav .mainnav ul li a.selected span {
	background: url(../accessories/tab-dark-right.gif) right top no-repeat;
	padding-right: 10px;
}

#topnav .subnav {
	display: block;
	float: left;
	border: 1px solid #666;
	background-color: #666;
	min-height: 23px;
	margin-top: 0px;
	margin-left: 2px;
	min-width: 916px;
}

#topnav .subnav ul {
	margin-top: 7px;
	margin-left: -41px;
	font-size: 0.9em;
}

#topnav .subnav ul li a, #topnav .subnav ul li a.selected:hover {
	color: #ccc;
	background-color: #666;
	padding: 3px 8px;
	text-decoration: none;
}

#topnav .subnav ul li a:hover, #topnav .subnav ul li a.selected {
	padding: 3px 8px;
	text-decoration: underline;
}




/* NAVIGATION */

#nav	{
	float: left;
	margin-top: 25px;
	width: 140px;
}

#nav ul  {
	font-size: 1.0em;
	font-weight: bold;
	color: #399;
	background-color: #fff;
	list-style: none;
	margin: 0;
	padding: 0;
}


#nav li {
	margin-top: 5px;
}

#nav ul .collapse {
	margin-top: -10px;
	margin-bottom: 20px;
}

#nav a:link, #nav a:visited {
	padding-left: 8px;
	text-decoration: none;
}

#nav a:link {
	color: #363;
	background-color: #fff;
}


#nav a:visited {
	color: #696;
	background-color: #fff;
}


#nav ul a:hover, #nav ul a:active {
	background-image: url(../accessories/arrow.gif);
	background-repeat: no-repeat;
	background-position: left;
	border-bottom: 1px dotted #660;
}


#nav ul ul {
	margin: 0 0 0 10px;
	font-size: 0.9em;
	font-weight: normal;
	padding: 2px 0px 2px 8px;
	background-repeat: repeat-y;
	background-image:url(../accessories/nav-line.gif);
}


#nav ul ul ul {
	margin: 0 0 0 10px;
	font-size: 0.8em;
	background-repeat: repeat-y;
	background-image:url(../accessories/nav-line.gif);
}



#nav .selected {
	color: #660	!important;
	background-color: #fff;
	background-image: url(../accessories/arrow.gif);
	background-repeat: no-repeat;
	background-position: left;

}


/* ----------------------------------------- */

/* CONTENT */



#content-home	{
	margin-right: 200px;
	margin-top: 20px;
	
	background-color: #F6F6F6;
	min-height: 250px;

}

#content	{
	margin-top: 20px;
	background-color: #F6F6F6;
	min-height: 250px;

}

#content p, #content-home p {
	color: #000;
	background-color: #f6f6f6;
	padding: 0 5px;
}

#content dt {
	margin-left: 5px;
}

#content a:link, #content ul li a:link, #content-home a:link, #content-home ul li a:link {
	color: #363;
	background-color: #f6f6f6;
	text-decoration: none;
	border-bottom: 1px dotted #363;
	line-height: 120%; /* This allows an extra pixel space for the bottom border when a link goes over two lines */
}

#content a:visited {
	color: #696;
	background-color: #f6f6f6;
	text-decoration: none;
	border-bottom: 1px dotted #696;
}

#content a:hover, #content ul li a:hover, #content a:active, #content a[href^="http:"]:hover, #content a[href^="http:"]:active {
	color: #630;
	background-color: #f6f6f6;
	text-decoration: none;
	border-bottom: 1px solid #630;
}

#content a[href^="http:"]:link, #content a[href^="http:"]:visited  {
	color: #639;
	background-color: #f6f6f6;
	text-decoration: none;
	border-bottom: 1px dotted #639;
	background-image: url(../accessories/external-link.gif);
	background-position: right;
	background-repeat: no-repeat;
	padding-right: 15px;
	line-height: 120%;
}


#content a[href^="mailto:"]:link {
	color: #339;
	background-color: #f6f6f6;
	text-decoration: none;
	border-bottom: 1px dotted #339;
	background-image: url(../accessories/email-envelope.gif);
	background-position: right;
	background-repeat: no-repeat;
	padding-right: 19px;
	line-height: 120%;
}

#content img a:link {
	border: 2px solid #363;
}


/* ----------------------------------------- */

/* AREA-SPECIFIC SETTINGS */

/* Images as links in gallery pages */
ul#gallery a:link img, img usemap {
	border: 2px solid #363;
}

/* Images as links in how-to pages */
#photoguide a:link img {
	border: 2px solid #363;
}

/* First box on the front page with all promo information */
#frontpromo {
	display: block;
	background-color: #666;
	color: #000;
	-moz-border-radius: 10px;
	padding: 10px;
	height: 400px;
/* If no height value, the grey box doesn't display in IE but looks fine in FF. If specify any height property, in IE it will be at least as big as required, in FF it will be what you specify. So adjust manually for correct height */
}

/* Main image in promo */
#frontpromo .frontimage  {
	float: left;
	margin-top: 10px;
margin-left: 0px; // for barista-deluxe collage centred
}

/* Other stuff in promo */
.promotext, .promotext a:link, .promotext a:visited {
        color: #fff !important;
        background-color: #666 !important;
	font-size: 1.0em;
        padding-left: 40px
	text-align: left;
	margin-top: 10px;
	position: relative;
	line-height: 1.1em;
display: block;

}

#frontpromo img {
	border: none;
}

/* External links in front promo - Firefox only. */
#content #frontpromo a[href^="http:"]:link, #content #frontpromo a[href^="http:"]:visited {
	color: #fff;
	font-size: 60%;
	background-color: #666;
	background-image: none;
	border-bottom: none;
	text-align: right;
	margin-right: -13px; /* Lines up end of link text with line above in FF, space left there for bg image */
}

/* Does most of the above for IE */
#frontpromo a:link { 
	color: #fff;
	font-size: 60%;
	background-color: #666;
	border-bottom: none;
	text-align: right;
}

#frontpromo a:link img { 
        border: none;
	color: #fff;
	background-color: #666;
        text-decoration: none;
}

/* ----- */
/* NEWS */



#news {
	border: 1px solid #000;
	background-color: #ffc;
}

#news p, #news p a, #news p a:visited {
	padding: 0 5px;
	color: #333;
	background-color: #ffc;
}


/* ----------------------------------------- */

/* IMAGE */


.image	{
	float: right;
	padding: 0 5px 10px 10px;
	font-size: 0.8em;
	text-align: right;
	color: #339;
	font-style: italic;
}

.imageright	{
	float: right;
	padding: 0 5px 10px 10px;
	max-width: 200px;
	font-size: 0.8em;
	text-align: right;
	color: #339;
	font-style: italic;
}

.imageleft {
	float: left;
	padding: 0 5px 10px 10px;
	max-width: 200px;
	font-size: 0.8em;
	text-align: left;
	color: #339;
	font-style: italic;
}
	
#compliance {
	position: absolute;
	left: 20px;
	bottom: 17px;
	font-size: 0.9em;
	color: #666;
	background-color: #fff;
}

#compliance img {
	border: none;
}

/* ----------------------------------------- */

/* FOOTER */



#footer	{
	bottom: 20px;
	width: 720px;
	background-color: transparent;
	font-size: 0.8em;
	text-align: center;
}

#footer .align-right {
	position: absolute;
	right: 20px;
}


#footer a:hover {
	border-bottom: 1px dotted #999;
	text-decoration: none;
}