/* -------------------------------------------------------------- 
  
   CSS Starter Kit
   Web Design & Development by Studio 24 Ltd
   www.studio24.net - (0870) 241 6159
     
-------------------------------------------------------------- */

@import "reset.css";


body {
	background: url(/assets/img/layout/background.gif) 0 12px repeat-x; /* original dark grey */
	background: url(/assets/img/layout/background-2.gif) 0 12px repeat-x; /* lighter grey */
}


/* =CONTAINERS
-------------------------------------------------------------- */
div#container { /* set as 'standard' width, centred container for 1024x768 site - 960px wide inc. 20px padding left and right */
	width: 960px;
	margin: 0 auto;
	padding:12px 0 0 0;
}

/* =LOGO
-------------------------------------------------------------- */
img#logo {
	float: left;
	margin-left: 10px;
	margin-bottom: 13px;
}


/* =NAV-PRIMARY
-------------------------------------------------------------- */
ul#nav-primary {
	background: #2a3238; /* original dark grey */
	background: #404040; /* lighter grey */
	float: left;
	list-style-type: none;
	margin: 29px 0 0 110px;
	padding: 0;
	width: 390px;
} 

ul#nav-primary li {
	float: left;
	margin: 0 10px 5px 0;
	display: inline;
}

ul#nav-primary li a:link, ul#nav-primary li a:visited, ul#nav-primary li a:focus, ul#nav-primary li a:active {
	display: block;
	width: 110px;
	padding: 0 0 0 10px;
	line-height: 16px;
}

ul#nav-primary li a:hover {
	background-image: url(/assets/img/icons/arrows.gif);
	background-repeat: no-repeat;
	background-position: 0 50%;
}

/* Active states - Colours in section specific area at the bottom of CSS */
body.home ul#nav-primary li#nav-home a,
body.about-us ul#nav-primary li#nav-about-us a,
body.design-resources ul#nav-primary li#nav-design-resources a,
body.invitations ul#nav-primary li#nav-invitations a,
body.stationery ul#nav-primary li#nav-stationery a,
body.pr-marketing-materials ul#nav-primary li#nav-pr-marketing-materials a,
body.contact-us ul#nav-primary li#nav-contact-us a,
body.shop ul#nav-primary li#nav-shop a,
body.packaging ul#nav-primary li#nav-packaging a
{
    color: #fff;
}

ul#nav-primary ul.submenu {
    display: none;
}

/* =CONTACT NUMBERS
-------------------------------------------------------------- */
ul#contact-numbers {
	list-style: none;
	float: right;
	margin: 29px 0 0 0;
	padding: 0;
	color: #ccc;
	color: #999;
	font-size: 0.84em; /* 11px */
	text-align: right;
}

ul#contact-numbers li {
	margin: 0 0 3px 0;
}

ul#contact-numbers div.org,
ul#contact-numbers a.url,
ul#contact-numbers span.type {
	display: none;
}

ul#contact-numbers li span {
	color:#fff;
}

/* =BANNER(S)
-------------------------------------------------------------- */
img#banner {
	clear: both;
	margin-bottom: 10px;
}

div#banners {
    clear: both;
    margin-bottom: 10px;
    width: 960px;
    height: 300px;
    overflow: hidden;
}

/* =NAV-SECONDARY
-------------------------------------------------------------- */
ul#nav-secondary {
	list-style-type: none;
	float: left;
	width: 200px;
	margin: 9px 30px 0 0;
	padding: 0;
}

ul#nav-secondary li {
	border-bottom: 1px solid #ccc;
}

ul#nav-secondary li a:link, ul#nav-secondary li a:visited, ul#nav-secondary li a:focus, ul#nav-secondary li a:active {
	padding: 5px 10px;
	display: block;
	font-weight: normal;
	font-size: 0.92em; /* 12px */
	color: #333;
}

ul#nav-secondary li a:hover {
	background-image: url(/assets/img/icons/arrows.gif);
	background-repeat: no-repeat;
	background-position: 0 50%;
	text-decoration: none;
	color: #000;
}

body.home ul#nav-secondary {
    display: none; /* Hide secondary nav on homepage */
}

body.about ul#nav-secondary li a:hover {
	/* background-position: -160px 50%; */
	background-position: -200px 50%;
}

/* =BREADCRUMB
-------------------------------------------------------------- */
ul#nav-breadcrumb {
	float: left;
	width: 950px;
	border-bottom: 1px solid #ccc;
	clear: both;
	list-style-type: none;
	margin: 0 0 35px 0;
	padding: 0 0 5px 10px;
	font-size: 0.84em; /* 11px */
} 

ul#nav-breadcrumb li {
	float: left;
	color: #999;
	margin: 0 5px 0 0;
	display: inline;
}

ul#nav-breadcrumb a:link, ul#nav-breadcrumb a:visited, ul#nav-breadcrumb a:focus, ul#nav-breadcrumb a:active {
	background: url(/assets/img/layout/nav-breadcrumb-divider.gif) 100% 2px no-repeat;
	padding-right: 10px;
	color: #666;
}

body.home ul#nav-breadcrumb,
body.landing ul#nav-breadcrumb {
    display: none;
}


/* =CONTENT CONTAINERS
-------------------------------------------------------------- */
div#content {
	clear: both;
}

div#content-primary {
	float: left;
	width: 480px;
	margin: 0;
	padding: 0 40px 0 10px;
}

body.home div#content-primary {
	width: 450px;
	margin: 0;
	padding: 0 20px 0 10px;
}

div#content-secondary {
	float: left;
	width: 200px;
	color: #666;
}

body.home div#content-secondary {
	width: 480px;
	margin: 0;
	padding: 0;
	color: #000;
}

div#gallery {
	clear: both;
	padding-bottom:20px;
	border-bottom:solid 1px #ccc;
}

/* =SITE-INFO / FOOTER
-------------------------------------------------------------- */
div#site-info-container {
	clear: both;
	border-top: 1px solid #666;
	margin: 40px 0 20px 0;
	color: #666;
	font-size: 0.84em; /* 11px; */
	float: left;
	width: 100%;
}

div#site-info {
	width: 940px;
	margin: 0 auto;
	padding: 20px 10px;
}

div#site-info a:link, div#site-info a:visited, div#site-info a:focus, div#site-info a:active {
	color: #666;
	font-weight: normal;
}

div#site-info ul {
	list-style-type: none;
	float: left;
	margin: 0;
	padding: 0;
} 

div#site-info img {
	float: right;
}


/* =BASIC TYPOGRAPHY
-------------------------------------------------------------- */

html {
	font-size: 100%; /* 100% = the default font size of the browser, usually 16px -> DON'T CHANGE THIS */
}

/**
 * Font sizing: 
 *
 * To calculate the percentage font-size to use in the body tag use the following calculation:
 *
 * (16px / Required body font-size) x 100
 *
 * Examples below:
 * 16px = 100%
 * 14px = 87.5%
 * 13px = 81.25%
 * 12px = 75%
 * 10px = 62.5%
 *
 */

body {
    font-family: Helvetica, Arial, sans-serif;
	/* font-size: 75%; /* Set the base font-size (75% sets a size of 1em = 12px) */
	font-size: 81.25%; /* Set the base font-size (81.25% sets a size of 1em = 13px) */
    line-height: 1.4em;
    color: #333;
}

body.home div#content {
	font-size: 0.92em;
	color: #000;
}

/* =HEADINGS */
h1, h2, h3, h4 {
	line-height:1.5em;
}

/* 1em = body font-size, so we can calculate our other font-sizes based on this:
   for example, if we want a font-size of 32px, in ems 32px = (32 / 12) = 2.6em */

h1 {
	font-size: 1.38em; /* 18px */
	font-weight: bold;
	border-bottom: 1px solid #ccc;
	margin: 0 0 1em 0;
	padding: 0 0 10px 0;
	color: #333;
}

body.home h1 {
	font-size: 1.16em; /* 14px */
	font-weight: bold;
	color: #000;
	border: none;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

h2 {
	font-size: 1em; /* 13px */
	font-weight: bold;
	color: #666;
}

body.home h2 {
	color: #000;
}

h3 {
	font-size: 1em; /* 13px */
}

p {
	margin: 0 0 1em 0; 
}

p.leader {
	border-bottom: 1px solid #ccc;
	font-size: 1.38em; /* 18px */
	text-align: right;
	padding: 0px 0 20px 130px;
	color: #666;
	line-height: 22.5px;
}

/* =OTHER TEXT ELEMENTS
-------------------------------------------------------------- */

blockquote {
	font-style: italic; 
	font-family: serif;
	font-size: 2em;
}

pre, code {
	margin: 0 0 1em 0;
}

/* =OTHER ELEMENTS
-------------------------------------------------------------- */
div#content-primary img {
    margin: 0 0.5em 0.5em 0.5em;
}


/* =LINKS
-------------------------------------------------------------- */

a:link, a:visited, a:focus, a:active {
	font-weight: bold;
	color: #000;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

ul#nav-primary a:link, ul#nav-primary a:visited, ul#nav-primary a:focus, ul#nav-primary a:active {
	font-size: 0.92em; /* 12px */
	font-weight: normal;
	color: #ccc;
}

ul#nav-primary a:hover {
	color: #fff;
	text-decoration: none;
}

p#skip-link { 
	position:absolute;
	left:-9000px;
	top:0; 
	z-index:20;
} 


/* icon links */
a.icon:link, a.icon:visited, a.icon:focus, a.icon:active, a.icon:hover {
	padding:2px 0 4px 20px;
	background-color: transparent;
	background-position:0 0;
	background-repeat: no-repeat;
} 
a.pdf:link, a.pdf:visited, a.pdf:focus, a.pdf:active, a.pdf:hover {
	background-image:url(../img/icons/pdf.png);
}
a.word:link, a.word:visited, a.word:focus, a.word:active, a.word:hover {
	background-image:url(../img/icons/word.png);
}
a.excel:link, a.excel:visited, a.excel:focus, a.excel:active, a.excel:hover {
	background-image:url(../img/icons/excel.png);
}
a.txt:link, a.txt:visited, a.txt:focus, a.txt:active, a.txt:hover {
	background-image:url(../img/icons/txt.png);
}
a.flash:link, a.flash:visited, a.flash:focus, a.flash:active, a.flash:hover {
	background-image:url(../img/icons/flash.png);
}
a.video:link, a.video:visited, a.video:focus, a.video:active, a.video:hover {
	background-image:url(../img/icons/video.png);
}
a.podcast:link, a.podcast:visited, a.podcast:focus, a.podcast:active, a.podcast:hover {
	background-image:url(../img/icons/podcast.png);
}
a.pub:link, a.pub:visited, a.pub:focus, a.pub:active, a.pub:hover {
	background-image:url(../img/icons/pub.png);
}
a.rss:link, a.rss:visited, a.rss:focus, a.rss:active, a.rss:hover {
	background-image:url(../img/icons/rss-feed.png);
}
a.print:link, a.print:visited, a.print:focus, a.print:active, a.print:hover {
	background-image:url(../img/icons/print.png);
}
a.friend:link, a.friend:visited, a.friend:focus, a.friend:active, a.friend:hover {
	background-image:url(../img/icons/friend.png);
}
a.help:link, a.help:visited, a.help:focus, a.help:active, a.help:hover {
	background-image:url(../img/icons/help.png);
}
a.info:link, a.info:visited, a.info:focus, a.info:active, a.info:hover {
	background-image:url(../img/icons/info.png);
}
a.email:link, a.email:visited, a.email:focus, a.email:active, a.email:hover {
	background-image:url(../img/icons/email.png);
}
a.vcard:link, a.vcard:visited, a.vcard:focus, a.vcard:active, a.vcard:hover {
	background-image:url(../img/icons/vcard.png);
}
a.plus:link, a.plus:visited, a.plus:focus, a.plus:active, a.plus:hover {
	background-image:url(../img/icons/plus.png);
}
a.minus:link, a.minus:visited, a.minus:focus, a.minus:active, a.minus:hover {
	background-image:url(../img/icons/minus.png);
}
	
	
/* =LISTS
-------------------------------------------------------------- */

ul {
	margin: 0 0 1em 2em;
}

ol { 
	margin: 0 0 1em 2em;
}

dl {
	margin: 0 0 1em 2em;
}

dt {
	font-weight: bold;
}

dt, dd {
	margin: 0 0 0.5em 0 ;
}


/* =TABLES
-------------------------------------------------------------- */

table {
	width: auto;
	margin: 0 0 1em 0;
	border-top:1px solid #ddd;
	border-left:1px solid #ddd;
}

th,td {
	padding: 0.3em 0.4em 0.2em 0.4em;
	border-bottom:1px solid #ddd;
	border-right:1px solid #ddd;
}

th {
	font-weight:bold;
	background-color: #ccffcc;
}

tr:nth-child(odd) { /* CSS3 zebra row solution - only works in Opera & Safari */
  background-color: #edf3fe;
}

tr.alt { /* Hardcoded zebra row solution - use this class on every other <tr> for a zebra effect */
	background-color: #edf3fe;
}


/* -------------------------------------------------------------- 
   -------------------------------------------------------------- 
	     				FORMS
   -------------------------------------------------------------- 
   -------------------------------------------------------------- */
/* form warning message */
form div.message p {
	color:#000;
}
   
/* fieldset messages - before the relevant field */
form div em {
	display: none;
}

form div.problem em {
	display: inline;
	color:red;
}

   
   
/* =SIMPLE-FORM
----------------------------------------------- */

form.simple-form fieldset {
	margin:1em 0;
	padding:1em;
	border:solid 1px #ccc;
	background-color:#eee;
}

form.simple-form legend {
	font-weight: bold;
}

form.simple-form div {
	position:relative;
	padding:6px;
	margin-bottom: 0.5em;
}

form.simple-form label {
	display: block;
}

form.simple-form input {
	width:200px;
}

form.simple-form textarea {
	width:300px;
	height:100px;
}

form.simple-form div.radio input, form.simple-form div.checkbox input, form.simple-form input.submit {
	width:auto;
}
   
form.simple-form div.radio label, form.simple-form div.checkbox label {
	display: inline;
}

/* fieldset messages - before the relevant field */
form.simple-form div.problem {
	background-color: #ffefef;
	border:solid 1px #ff7f7f;
}

/* progressive enhancements for browsers beyond ie6 */
form.simple-form input:focus, form.simple-form textarea:focus {
	background-color: #ffc;
}

form.simple-form input[type="text"], form.simple-form textarea{
	border-top: solid 2px #999;
	border-right: solid 1px #999;
	border-bottom: solid 1px #999;
	border-left: solid 2px #999;
}

/* CSS rounded corners - no Opera support as of Aug 09 */
form.simple-form div.message,
form.simple-form div.problem,
form.simple-form fieldset {
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px;
}

 

/* =FLASH MESSAGES
----------------------------------------------- */

div.message {
	padding:10px;
}

div.message ul a:hover {
	text-decoration: none;
}

/* flash message - error */
div.error {
	border:solid 1px #ff7f7f;
	background-color: #ffefef;
}
div.error,
div.error a:link, 
div.error a:visited, 
div.error a:focus, 
div.error a:active  {
	color:red;
}

/* flash message - alert */
div.alert {
	border:solid 1px #FF8A00;
	background-color: #FCFFDF;
}
div.alert,
div.alert a:link, 
div.alert a:visited, 
div.alert a:focus, 
div.alert a:active  {
	color:#FF8A00;
}

/* flash message - success */
div.success {
	border:solid 1px #3FAF00;
	background-color: #EAFFDF;
}
div.success,
div.success a:link, 
div.success a:visited, 
div.success a:focus, 
div.success a:active  {
	color:#2D7F00;
}


/* =SECONDARY CONTENT
---------------------------------------------- */
div#content-secondary {
	font-size: 0.92em;
}

div#content-secondary ul {
	margin: 0 0 0 40px;
	padding: 0;
	list-style: none;
}

div#content-secondary h3 {
	color: #333;
	border-bottom: 1px solid #ccc;
	margin: 17px 0 5px 0;
	padding: 0 0 2px 50px;
}

div#content-secondary p {
	margin-left: 50px;
}

div#content-secondary a:link, div#content-secondary a:visited, div#content-secondary a:focus, div#content-secondary a:active {
	color: #333;
	display: inline-block;
	margin: 0 0 30px 40px;
	padding: 0 0 0 10px;
	background-image: url(/assets/img/icons/arrows.gif);
	background-repeat: no-repeat;
	background-position: 0 50%;
}

div#content-secondary a:hover {
	color: #000;
	text-decoration: none;
	/* background-position: -160px 50%; */
	background-position: -400px 50%;
}

div#content-secondary ul li a:link, div#content-secondary ul li a:visited, div#content-secondary ul li a:focus, div#content-secondary ul li a:active {
	margin: 0;
}

div#content-secondary h3 a:link, div#content-secondary h3 a:visited, div#content-secondary h3 a:focus, div#content-secondary h3 a:active {
    background: none;
    margin: 0;
    padding: 0;
    /* color: #0099ff; */
}

div#content-secondary a.gallery-photo:link, div#content-secondary a.gallery-photo:visited, div#content-secondary a.gallery-photo:focus, div#content-secondary a.gallery-photo:active {
    margin: 0 0 5px 50px;
    padding: 0;
    background: none;
}

div#content-secondary img#gallery-example {
    width: 150px;
    margin: 0;
}

/* =GALLERY
----------------------------------------------- */

div#gallery {
	float: left;
	width: 100%;
	margin: 30px 0 0 0;
}

div#gallery h3 {
	color: #333;
	border-bottom: 1px solid #ccc;
	margin: 0 0 10px 0;
	padding: 0 0 5px 10px;
}

div#gallery p {
	font-size: 0.84em;
	font-weight: normal;
	color: #666;
	float: right;
	margin: -34px 0 0 0;
	padding-right:5px;
}

div#gallery ul {
	float: left;
	width: 910px;
	margin: 0;
	padding: 0;
	list-style: none;
	display: inline;
	position: relative;
}

div#gallery li {
	float: left;
	margin: 0 0 10px 10px;
	display: inline;
	overflow: hidden;
	width: 172px;
	height: 124px;
	background: #333;
	position: relative;
}

div#gallery li a {
	position: absolute;
	top: 0;
	left: 0;
	width: 172px;
	height: 124px;
	margin: 0;
	padding: 0;
}

#slider {
	width: 920px;
	margin: 0 20px;
	padding-top:10px;
	position: relative;
}

.scroll {
  position: relative; /* fix for IE to respect overflow */
  clear: left;
  width: 910px;
}

.scrollButtons {
  position: absolute;
  top: 160px;
  cursor: pointer;
/*   outline:solid red 1px; */
}

.scrollButtons.left {
  left: -20px;
}

scrollButtons.left:hover {
  outline:solid green 1px;
  border-bottom:solid 10px blue;
}

.scrollButtons.right {
  right: -20px;
}


/* =HOMEPAGE
------------------------------------------------------------------------- */
body.home div#content-primary {
	margin-top: 10px;
}

body.home div#content-secondary {
	font-size: 1em; /* 12px */ 
}

body.home div#content-secondary img, body.home div#content-secondary h2, body.home div#content-secondary p {
	float: left;
}

body.home div#content-secondary h2, body.home div#content-secondary p {
	width: 220px;
	margin: 0;
	padding: 0 10px;
}

body.home div#content-secondary h2 {
	margin-top: 11px;
	margin-bottom: 2px;
}

body.home div#content-secondary p {
	margin-left: 0;
}

body.home div#content-secondary a:link, body.home div#content-secondary a:visited, body.home div#content-secondary a:focus, body.home div#content-secondary a:active {
	background: none;
	margin: 0;
	padding: 0;
	float: left;
	color: #000;
}

ul#highlights {
	float: left;
	clear: both;
	width: 960px;
	margin: 20px 0 0 0;
	padding: 0;
}

ul#highlights li {
	float: left;
	width: 240px;
	height: 160px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	position: relative;
}

ul#highlights li#highlight-1 { background: url(/assets/img/layout/highlight-1.jpg) 0 0 no-repeat; border-bottom: 4px solid #0099ff; }
ul#highlights li#highlight-2 { background: url(/assets/img/layout/highlight-2.jpg) 0 0 no-repeat; border-bottom: 4px solid #f80d82; }
ul#highlights li#highlight-3 { background: url(/assets/img/layout/highlight-3.jpg) 0 0 no-repeat; border-bottom: 4px solid #fff300; }
ul#highlights li#highlight-4 { background: url(/assets/img/layout/highlight-4.jpg) 0 0 no-repeat; border-bottom: 4px solid #000; border-bottom: 4px solid #009933 }

ul#highlights div {
	background: #000;
	background: rgba(0,0,0,0.8);
	position: absolute;
	bottom: 0;
	left: 0;
	width: 220px;
	/* height: 140px; */
	height: 14px;
	overflow: hidden;
	padding: 10px;
	color: #fff;
}

ul#highlights h3, ul#highlights a:link, ul#highlights a:visited, ul#highlights a:focus, ul#highlights a:active {
	font-weight: bold;
	color: #fff;
	text-transform: uppercase;
}

ul#highlights h3 {
	margin-bottom: 5px;
	display: inline-block;
}

ul#highlights h3 a:link, ul#highlights h3 a:visited, ul#highlights h3 a:focus, ul#highlights h3 a:active,
ul#highlights a.read-more:link, ul#highlights a.read-more:visited, ul#highlights a.read-more:focus, ul#highlights a.read-more:active {
	font-size: 0.91em; /* 11px */
}

ul#highlights a.full {
	position: absolute;
	top: 0;
	left: 0;
	width: 240px;
	height: 160px;
	z-index: 20;
	text-indent: -9999px;
}

ul#highlights div a.read-more {
/*	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 230px;
	height: 20px;
	margin: 0;
	padding: 137px 10px 0 0; */
	text-align: right;
	vertical-align: baseline;
	z-index: 10;
	float: right;
	padding-right: 15px;
}

ul#highlights li#highlight-1 a.read-more { background: url(/assets/img/icons/arrows.gif) -128px 50% no-repeat; }
ul#highlights li#highlight-2 a.read-more { background: url(/assets/img/icons/arrows.gif) -528px 50% no-repeat; }
ul#highlights li#highlight-3 a.read-more { background: url(/assets/img/icons/arrows.gif) -728px 50% no-repeat; }
ul#highlights li#highlight-4 a.read-more { background: url(/assets/img/icons/arrows.gif) -1328px 50% no-repeat; }

dl#help {
	clear: both;
	float: left;
	margin: 20px 0 0 0;
	padding: 20px 0 0 0;
	width: 960px;
	border-top: 1px solid #ccc;
}

dl#help dt {
	float: left;
	width: 240px;
	font-size: 1.08em; /* 13px */
	font-weight: bold;
	color: #666;
	margin: 0 0 14px 0;
	padding: 0;
}

dl#help dd {
	float: left;
	width: 240px;
	margin: 0 0 2px 0;
	padding: 0;
}

dl#help dd a:link, dl#help dd a:visited, dl#help dd a:focus, dl#help dd a:active {
	background: url(/assets/img/icons/arrows.gif) 0 50% no-repeat;
	padding: 0 0 0 10px;
	font-weight: bold;
	text-transform: uppercase;
	color: #666;	
}

dl#help dd a:hover {
    background-position: -400px 50%;
	text-decoration: none;
	color: #000;
}

/* =CONTACT US PAGE
------------------------------------------------------------------------------- */
body.contact-us ul.offices {
    float: left;
    clear: both;
    width: 480px;
    border-bottom: 1px solid #ccc;
    margin: 0 0 10px 0;
    padding: 0;
    list-style: none;
}

body.contact-us ul.offices li {
    float: left;
    width: 230px;
    margin: 0;
    padding: 0 10px 0 0;
}

/* =SECTION SPECIFIC COLOURS
------------------------------------------------------------------------------- */
/* Home - white */
ul#nav-primary li#nav-home a:hover, body.home ul#nav-primary li#nav-home a:link, body.home ul#nav-primary li#nav-home a:visited, body.home ul#nav-primary li#nav-home a:focus, body.home ul#nav-primary li#nav-home a:active {
    background: url(/assets/img/icons/arrows.gif) -1200px 50% no-repeat;
}

/* About us - burgundy */
ul#nav-primary li#nav-about-us a:hover, body.about-us ul#nav-primary li#nav-about-us a:link, body.about-us ul#nav-primary li#nav-about-us a:visited, body.about-us ul#nav-primary li#nav-about-us a:focus, body.about-us ul#nav-primary li#nav-about-us a:active {
    background: url(/assets/img/icons/arrows.gif) -2000px 50% no-repeat;
}
body.about-us h1,
body.about-us div#content-secondary h3,
body.about-us div#content-secondary h3 a:link,
body.about-us div#content-secondary h3 a:visited,
body.about-us div#content-secondary h3 a:focus,
body.about-us div#content-secondary h3 a:active,
body.about-us div#gallery h3 {
    color: #cc0000;
}
body.about-us ul#nav-secondary a:hover, body.about-us div#content-secondary a:hover {
    background-position: -2000px 50%;
}

/* Design Resources & Graphic Design landing page - pink */
ul#nav-primary li#nav-design-resources a:hover, body.design-resources ul#nav-primary li#nav-design-resources a:link, body.design-resources ul#nav-primary li#nav-design-resources a:visited, body.design-resources ul#nav-primary li#nav-design-resources a:focus, body.design-resources ul#nav-primary li#nav-design-resources a:active {
    background: url(/assets/img/icons/arrows.gif) -600px 50% no-repeat;
}
body.design-resources h1,
body.design-resources div#content-secondary h3,
body.design-resources div#content-secondary h3 a:link,
body.design-resources div#content-secondary h3 a:visited,
body.design-resources div#content-secondary h3 a:focus,
body.design-resources div#content-secondary h3 a:active,
body.design-resources div#gallery h3,

body.graphic-design h1,
body.graphic-design div#content-secondary h3,
body.graphic-design div#content-secondary h3 a:link,
body.graphic-design div#content-secondary h3 a:visited,
body.graphic-design div#content-secondary h3 a:focus,
body.graphic-design div#content-secondary h3 a:active,
body.graphic-design div#gallery h3 {
    color: #F80D82;
}
body.design-resources ul#nav-secondary a:hover, body.design-resources div#content-secondary a:hover,
body.graphic-design ul#nav-secondary a:hover, body.graphic-design div#content-secondary a:hover {
    background-position: -600px 50%;
}

/* Invitations & Events landing page - blue */
ul#nav-primary li#nav-invitations a:hover, body.invitations ul#nav-primary li#nav-invitations a:link, body.invitations ul#nav-primary li#nav-invitations a:visited, body.invitations ul#nav-primary li#nav-invitations a:focus, body.invitations ul#nav-primary li#nav-invitations a:active {
    background: url(/assets/img/icons/arrows.gif) -200px 50% no-repeat;
}
body.invitations h1,
body.invitations div#content-secondary h3,
body.invitations div#content-secondary h3 a:link,
body.invitations div#content-secondary h3 a:visited,
body.invitations div#content-secondary h3 a:focus,
body.invitations div#content-secondary h3 a:active,
body.invitations div#gallery h3,

body.events h1,
body.events div#content-secondary h3,
body.events div#content-secondary h3 a:link,
body.events div#content-secondary h3 a:visited,
body.events div#content-secondary h3 a:focus,
body.events div#content-secondary h3 a:active,
body.events div#gallery h3 {
    color: #0099FF;
}
body.invitations ul#nav-secondary a:hover, body.invitations div#content-secondary a:hover,
body.events ul#nav-secondary a:hover, body.events div#content-secondary a:hover {
    background-position: -200px 50%;
}

/* Stationery & Marketing Materials landing page- green */
ul#nav-primary li#nav-stationery a:hover, body.stationery ul#nav-primary li#nav-stationery a:link, body.stationery ul#nav-primary li#nav-stationery a:visited, body.stationery ul#nav-primary li#nav-stationery a:focus, body.stationery ul#nav-primary li#nav-stationery a:active {
    background: url(/assets/img/icons/arrows.gif) -1400px 50% no-repeat;
}
body.stationery h1,
body.stationery div#content-secondary h3,
body.stationery div#content-secondary h3 a:link,
body.stationery div#content-secondary h3 a:visited,
body.stationery div#content-secondary h3 a:focus,
body.stationery div#content-secondary h3 a:active,
body.stationery div#gallery h3,

body.marketing-materials h1,
body.marketing-materials div#content-secondary h3,
body.marketing-materials div#content-secondary h3 a:link,
body.marketing-materials div#content-secondary h3 a:visited,
body.marketing-materials div#content-secondary h3 a:focus,
body.marketing-materials div#content-secondary h3 a:active,
body.marketing-materials div#gallery h3 {
    color: #009933;
}
body.stationery ul#nav-secondary a:hover, body.stationery div#content-secondary a:hover,
body.marketing-materials ul#nav-secondary a:hover, body.marketing-materials div#content-secondary a:hover {
    background-position: -1400px 50%;
}

/* PR & Marketing Materials - burnt orange */
ul#nav-primary li#nav-pr-marketing-materials a:hover, body.pr-marketing-materials ul#nav-primary li#nav-pr-marketing-materials a:link, body.pr-marketing-materials ul#nav-primary li#nav-pr-marketing-materials a:visited, body.pr-marketing-materials ul#nav-primary li#nav-pr-marketing-materials a:focus, body.pr-marketing-materials ul#nav-primary li#nav-pr-marketing-materials a:active {
    background: url(/assets/img/icons/arrows.gif) -1800px 50% no-repeat;
}
body.pr-marketing-materials h1,
body.pr-marketing-materials div#content-secondary h3,
body.pr-marketing-materials div#content-secondary h3 a:link,
body.pr-marketing-materials div#content-secondary h3 a:visited,
body.pr-marketing-materials div#content-secondary h3 a:focus,
body.pr-marketing-materials div#content-secondary h3 a:active,
body.pr-marketing-materials div#gallery h3 {
    color: #cc6600;
}
body.pr-marketing-materials ul#nav-secondary a:hover, body.pr-marketing-materials div#content-secondary a:hover {
    background-position: -1800px 50%;
}


/* Contact us - lime green */
ul#nav-primary li#nav-contact-us a:hover, body.contact-us ul#nav-primary li#nav-contact-us a:link, body.contact-us ul#nav-primary li#nav-contact-us a:visited, body.contact-us ul#nav-primary li#nav-contact-us a:focus, body.contact-us ul#nav-primary li#nav-contact-us a:active {
    background: url(/assets/img/icons/arrows.gif) -1000px 50% no-repeat;
}
body.contact-us h1,
body.contact-us div#content-secondary h3,
body.contact-us div#content-secondary h3 a:link,
body.contact-us div#content-secondary h3 a:visited,
body.contact-us div#content-secondary h3 a:focus,
body.contact-us div#content-secondary h3 a:active,
body.contact-us div#gallery h3 {
    color: #8A9102;
}
body.contact-us ul#nav-secondary a:hover, body.contact-us div#content-secondary a:hover {
    background-position: -1000px 50%;
}

/* Shop & Weddings landing page- dark blue */
ul#nav-primary li#nav-shop a:hover, body.shop ul#nav-primary li#nav-shop a:link, body.shop ul#nav-primary li#nav-shop a:visited, body.shop ul#nav-primary li#nav-shop a:focus, body.shop ul#nav-primary li#nav-shop a:active {
    background: url(/assets/img/icons/arrows.gif) -1600px 50% no-repeat;
}
body.shop h1,
body.shop div#content-secondary h3,
body.shop div#content-secondary h3 a:link,
body.shop div#content-secondary h3 a:visited,
body.shop div#content-secondary h3 a:focus,
body.shop div#content-secondary h3 a:active,
body.shop div#gallery h3,

body.weddings h1,
body.weddings div#content-secondary h3,
body.weddings div#content-secondary h3 a:link,
body.weddings div#content-secondary h3 a:visited,
body.weddings div#content-secondary h3 a:focus,
body.weddings div#content-secondary h3 a:active,
body.weddings div#gallery h3 {
    color: #0033cc;
}
body.shop ul#nav-secondary a:hover, body.shop div#content-secondary a:hover,
body.weddings ul#nav-secondary a:hover, body.weddings div#content-secondary a:hover {
    background-position: -1600px 50%;
}

/* Packaging - lilac */
ul#nav-primary li#nav-packaging a:hover, body.packaging ul#nav-primary li#nav-packaging a:link, body.packaging ul#nav-primary li#nav-packaging a:visited, body.packaging ul#nav-primary li#nav-packaging a:focus, body.packaging ul#nav-primary li#nav-packaging a:active {
    background: url(/assets/img/icons/arrows.gif) -2200px 50% no-repeat;
}
body.packaging h1,
body.packaging div#content-secondary h3,
body.packaging div#content-secondary h3 a:link,
body.packaging div#content-secondary h3 a:visited,
body.packaging div#content-secondary h3 a:focus,
body.packaging div#content-secondary h3 a:active,
body.packaging div#gallery h3 {
    color: #c781e8;
}
body.packaging ul#nav-secondary a:hover, body.packaging div#content-secondary a:hover {
    background-position: -2200px 50%;
}