/*

The Graphics Company Ltd
www.graphics.coop

*/

@import url("fonts/fonts.css");


/* --- Standard HTML elements --- */

body, div, dd, dl, dt, fieldset, form, input, h1, h2, h3, h4, hr, label, p, select, table, textarea, ul { margin: 0; border: 0; padding: 0; }
img  { margin: 0; border: solid 1px #999; padding: 0; }
a:link, a:visited { color: #bd2c16; text-decoration: none; }
a:hover, a:focus, a:active { color: #ff0f1c; text-decoration: underline; }
body { background: #8e1c0f url("/images/bg-tile.jpg") repeat fixed; font-family: Arial, Helvetica, sans-serif; line-height: 1.4; font-size: 68.75%; color: #000; }
dl { font-size: 1.1em; }
	dt { font-weight: bold; }
	dd.padded { padding: 0 0 0.9em 0; }
h1 { color: #bd2c16; font-family: 'Banda', Arial, Helvetica, sans-serif; font-size: 3em; font-weight: 600; padding: 0 0 5px 0; }
h2 { color: #bd2c16; font-family: 'Banda', Arial, Helvetica, sans-serif; font-size: 1.7em; font-weight: 600; padding: 10px 0 5px 0; }
h3 { color: #000; font-size: 1.4em; font-weight: normal; padding: 0 0 5px 0; }
cite { font-style: normal; font-weight: bold; }
hr { clear: both; visibility: hidden; height: 0; }
hr.visible { visibility: visible; border-top, border-right, border-left: 1px solid white; border-bottom: 1px dotted #666; }
input, select, textarea { font-family: Arial, Helvetica, sans-serif; line-height: 1; font-size: 1.1em; color: #444; }
legend { display: none; }
p, ol, ul { font-size: 1.1em; }
span { display: inline; white-space: nowrap; }

q { font-style: italic; }
/* IE7 and below don't use CSS quote marks, so we turn them off and put them in the content for now (April 2008) */
	q:lang(en) { quotes: "" "" "" "" }
/* One day we'll turn them on again and strip them from the content: */
/* q:lang(en) { quotes: “ ” ‘ ’ } */

/* IE6 and below don't use abbr so we currently use acronym (May 2008). One day we'll switch over to abbr: */
abbr, acronym { border-bottom: 1px dotted #888; cursor: help; }
	abbr.speakLetters, acronym.speakLetters { speak: spell-out; }
	abbr.speakWord, acronym.speakWord { speak: normal; }

.hide { display: none; }

/* --- Structural grid elements --- */

#wrapperOuter { width: 781px; margin: 0 auto; padding-bottom: 8px; }
	#banner { height: 120px; padding-left: 7px; background: url("/images/bg-content.png") repeat-y; }
		#banner img { border: 0; }
	#navigation { min-height: 20px; background: url("/images/bg-content.png") repeat-y; }
	#wrapperMiddle { background: url("/images/bg-content.png") repeat-y; }
		#wrapperInner { clear: both; width: 666px; margin: 0 7px; padding: 20px 48px 0 48px; background-color: #fff; }
			.christmas #wrapperInner { background:  url("/images/bg-content-xmas.jpg") left; }
		#intro {}
			.about #intro { width: 460px; }
			.contact #intro { width: 460px; }
			.home #intro { padding-bottom: 10px; }
			.news #intro { width: 460px; }
			.print #intro { width: 460px; }
			.sidePanelPage #intro { float: left; width: 410px; background: #fff; }
			.subsection { background-color: #ddd; margin: 0 0 10px 0; padding: 15px 15px 10px 25px; }
			.web #intro { width: 460px; }
		#main { width: 680px; background-color: #ddd; }
			.home #main { float: left; margin-bottom: 20px; }
			.about #main { width: 460px; background: #fff; }
			.christmas #main { background-color: transparent; }
			.contact #main { width: 460px; background: #fff; }
			.jobs #main { float: left; width: 410px; background: #fff; }
			.jobs #main { float: left; width: 410px; background: #fff; }
			.news #main { width: 460px; background: #fff; }
			.newsletterArchive #main { float: left; width: 460px; padding-top: 10px; background: #fff; }
			.print #main { width: 460px; background: #fff; }
			.sidePanelPage #main { float: left; width: 410px; background: #fff; }
			.web #main { width: 460px; background: #fff; }
			#main #leftCol { margin: 10px 0; padding: 5px 15px; }
				.home #main #leftCol { float: left; width: 390px; border: dotted #666; border-width: 0 1px 0 0; }
				.portfolio #main #leftCol { float: left; width: 320px; border: dotted #aaa; border-width: 0 1px 0 0; }
				.portfolioWeb #main #leftCol { float: left; width: 212px; border: dotted #aaa; border-width: 0 1px 0 0; }
				.home #main #rightCol { float: right; width: 225px; padding: 11px 18px 0 0; }
				.portfolio #main #rightCol { float: right; width: 296px; padding: 12px 18px 15px 0; }
				.portfolioWeb #main #rightCol { float: right; width: 404px; padding: 12px 18px 15px 0; }
				.christmas #main #rightCol { background-image: none; background-color: transparent; float: right; width: 390px; padding: 12px 18px 65px 0; }
				.home #main #singleCol { margin: 10px 0; padding: 5px 20px; }
		.news .multi-left { float: left; }
		.news .multi-right { float: right; }
	#subNav { float: right; width: 160px; margin: 10px 0 0 0; background-color: #ddd; padding: 4px 0; }
	#sidePanel { float: right; width: 180px; margin: 10px 0 0 0; background-color: #ddd; padding: 15px; }
	#footnote #box1 { float: left; width: 315px; padding-right: 15px; }
	#footnote #box2 { float: left; width: 315px; padding-left: 15px; border: dotted #666; border-width: 0 0 0 1px; }
	#footer { clear: both; width: 762px; background-color: #fff; margin: 0 7px; padding: 30px 0 20px 0; }
		.portfolio #footer { padding-top: 70px; }
	#bottom { height: 30px; background: url("/images/bg-footer.png") no-repeat top left; }


 
/* --- Main navigation --- */

#navigation ul { float: left; background-color: #585a5c; width: 762px; list-style: none; margin: 0 7px; font-family: 'Banda', Arial, Helvetica, sans-serif; font-size: 1.3em; font-weight: 600; text-transform: lowercase; letter-spacing: 0.05em; border-bottom: 5px solid #bd2c16; }
	#navigation li { float: left; width: 108px; border-right: 1px dotted #000; padding: 0; text-align: center; }
		#navigation li.last { border-right: 0; }
		#navigation li.selected { padding: 5px 0; color: #fff; background-color: #bd2c16; font-weight: bold; }
	#navigation li a { display: block; padding: 5px 0; color: #fff; background: #38373c url("/images/bg-nav-tab.jpg") repeat-x; text-decoration: none; }
		#navigation li a:link, #navigation li a:visited { }
			#navigation li.selected a:link, #navigation li.selected a:visited { padding: 0; background-color: #bd2c16; background-image: none; font-weight: bold; }
		#navigation li a:hover, #navigation li a:focus { background-color: #4b4b4e; background-position: 0 -100px; }
		#navigation li a:active { background-color: #1b1b1d; background-position: 0 -200px; }
			#navigation li.selected a:hover, #navigation li.selected a:focus, #navigation li.selected a:active { background-color: #bd2c16; background-image: none; font-weight: bold; }


/* --- Subnavigation --- */

#subNav h2 { margin: 0 15px; font-size: 2.1em; }
#subNav p { margin: 0 15px; }
#subNav ul { list-style: none; padding: 0; text-transform: lowercase; }
	#subNav ul acronym { text-transform: uppercase; border-bottom: 0; }
#subNav div { padding-top: 2px; }
	#subNav li { margin: 0 15px; border: dotted #666; border-width: 0 0 1px 0; padding: 6px 0; }
		#subNav li.afterPara { border-width: 1px 0 1px 0; margin-top: 8px; }
		#subNav li.last { border: 0; }
		#subNav li.single { border: dotted #666; border-width: 1px 0 0 0; margin-top: 6px; }
		#subNav div li { margin: 0 15px; border: 0; padding: 2px 0; }
		#subNav li a { display: block; }
		#subNav div li a { display: inline; }
			#subNav li a:link, #subNav li a:visited { color: #bd2c16; }
				#subNav li.selected a:link, #subNav li.selected a:visited { color: #666; }
			#subNav li a:hover, #subNav li a:focus, #subNav li a:active { color: #ff0f1c; }
				#subNav li.selected a:hover, #subNav li.selected a:focus, #subNav li.selected a:active { color: #666; text-decoration: none; }
			#subNav li.selected div a:link, #subNav li.selected div a:visited { color: #bd2c16; }
			#subNav li.selected div a:hover, #subNav li.selected div a:focus, #subNav li.selected div a:active { color: #ff0f1c; text-decoration: underline; }


/* --- Twitter feed --- */
#content .tweet ul { list-style: none; padding-left: 0; margin-left: 0; }
#content .tweet li { padding-left: 0; margin-left: 0; }
.tweet img { border: 0; margin-right: 5px; }
.tweet span { white-space: normal; }

/* --- Table elements --- */

table { width: 680px; border-collapse: collapse; }
	caption { display: none; }
	.portfolio thead { display: none; }
	.portfolio tfoot { display: none; }
	tbody { padding: 0 15px; }
	td { vertical-align: top; width: 190px; padding: 10px; }
		td a { display: block; }
			td a:link, td a:visited { color: #444; }
			td a:hover, td a:focus, td a:active { color: #ff0f1c; }
		td img { float: left; margin: -10px 10px 0 -5px; }
		td.colTwo { width: 170px; }
		th { vertical-align: top; width: 120px; text-align: left; padding: 15px 15px; font-size: 1.1em; }
		tr { border-bottom: 5px solid #fff; padding: 10px 15px; }
			tr.extra { border: 0; }
				tr.extra td { padding: 10px; }
			tr.extraLast { border: 0; }
			tr.multi { border: 0; }
				tr.multi td { padding: 20px 10px 10px 10px; }
			tr.single td { padding: 20px 10px 10px 10px; }

		td.linkToMore { padding: 0 0 0 5px; }
			td.linkToMore a:link, td.linkToMore a:visited { display: inline; color: #bd2c16; }
			td.linkToMore a:hover, td.linkToMore a:focus, td.linkToMore a:active { display: inline; color: #ff0f1c; }


/* --- Form elements --- */

form span { color: #bd2c16; }
	form span.gc { color: #000; }
input { border: solid #999; border-width: 1px; padding: 3px; font-family: sans-serif; }
label { display: block; width: 100%; padding-bottom: 2px; }
textarea { border: solid #999; border-width: 1px; padding: 3px; font-family: sans-serif; }
fieldset.default, fieldset.radioArray { padding-bottom: 20px; }
	fieldset.default input { width: 400px; margin-bottom: 5px; }
	fieldset.radioArray input { margin: 0 5px 5px 0; }
	fieldset.radioArray h4 { padding-bottom: 5px; }
	fieldset.radioArray label.radioLabel { display: inline; margin: 0 10px 5px 0; padding-bottom: 10px; }
	fieldset.radioArray textarea, fieldset.default textarea { width: 400px; margin-bottom: 5px; }
		fieldset.default input.error { border: 1px solid #bd2c16; background: #fff; color: #100; }
		fieldset.default label.error { background: #fff; font-weight: normal; color: #bd2c16; }
fieldset.controls { margin: -10px 0 0 0; }
	fieldset.controls input { background: #bd2c16; color: #fff; padding: 4px 4px 2px 4px; border: #bd2c16 solid; border-width: 1px; letter-spacing: 0.1em; font-weight: bold; }
		fieldset.controls input:hover, fieldset.controls input:focus { background: #fff; border: #999 solid; border-width: 1px; color: #000; cursor: pointer; }

div.errorExplanation { width: 440px; margin: 10px 0; padding: 10px 10px 0 10px; border: 1px dashed #bd2c16; }
div.errorExplanation p { font-weight: bold; }


/* --- HTML element exceptions --- */

span.gc { font-family: 'Banda', Arial, Helvetica, sans-serif; font-weight: bold; }
#banner h1, #banner h2 { position: absolute; left: -5000px; top: -5000px; }
.home #main h2 { font-size: 1.9em; padding: 0 0 5px 0; }
.home #main h3 { font-size: 1.6em; }
.home #rightCol p { font-size: 1.3em; }
.christmas #rightCol h2 { font-family: Myriad, "Myriad Pro", "Myriad Web", Verdana, sans-serif; font-size: 5em; line-height: 1; font-weight: bold; padding-bottom: 0.5em; }
.christmas #rightCol p { font-size: 1.3em; }
img.left { float: left; margin: 5px 15px 10px 0; }
img.right { float: right; margin: 5px 0 10px 15px; }
	.news img.nocaption { margin-bottom: 10px; }
img.multi { margin-top: 10px; }
#content p { padding: 0 0 0.9em 0; font-size: 1.1em; }
#intro p { font-size: 1.3em; }
.listing #intro h1 { padding: 0 0 15px 0; }
#footer img { float: right; border: 0; margin-top: -39px; padding-right: 33px; }
#footer p { padding: 0 0 10px 48px; }
p.legal { font-size: 0.9em; }
#content ul { padding: 0 0 0.9em 15px; font-size: 1.1em; }
#content li { padding: 0 0 10px 10px; }
	#content li.last { padding: 0 0 0 10px; }
#rightCol li { padding: 0 0 5px 5px; }
p.testimonial { margin-top: 0.5em; }
dl.people { margin-left: 2em; }
dt.person { color: #bd2c16; font-size: 1.3em; margin-top: 0.5em; }
#sidePanel h2 { padding-top: 5px; }
.newsletterArchive #main ul { list-style: none; }

/* Counter increment and formatting for nested lists on Terms page. IE 6 & 7 ignore it but it degrades OK */
/* IE 6 & 7 stop parsing the CSS when they reach "content: counters" so this must be at the end */
#content #terms ol { counter-reset: item; } 
	#content #terms ol ol { padding-top: 0.3em; }
#content #terms li { display: block; color: #555; font-size: 1.2em; font-weight: bold; padding: 0 0 0.3em 0; }
	#content #terms li li { color: #444; font-size: 0.83em; font-weight: normal; }
	#content #terms li:before { content: counters(item, ".") " "; counter-increment: item; display: block; margin-left: -40px; margin-bottom: -1.35em; }