/* graphico.co.uk */

/* The file below is read by ALL browsers
   but the hacks contained within it further target 
   IE5-6 for Windows. See file for details. */
@import "ie6win.css";
@import "ie7win.css";

/* IE 5.5 hacks only */
@media tty 
{
i{content:"";/*" "*/}}@m;
@import 'ie55win.css'; /*";}
}/* */ 

/* The file below is ONLY read by IE5/Win.
   Makes use of the Mid Pass Filter: 
   http://tantek.com/CSS/Examples/midpass.html */   
@media tty 
{
 i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */

/* The file below is ONLY read by IE5/Mac.
   Makes use of the Band Pass Filter: 
   http://www.stopdesign.com/examples/ie5mac-bpf/ */

/*\*//*/
  @import "ie5mac.css";
/**/

/* default headers */
h1,h2,h3, h4 { margin: 1em 0; }

h1.sifrLarge { font-size: 6em; color: #fff; margin: 0.166em 0; }
h1.sifr { font-size: 2.2em; margin: 0 0 0.454em 0; color: #f1eda8; }
#viewer h1.sifr { width: 75%; }
h3, .nav li { font-size: 1em; line-height: 2em; margin: 0; }

h1,h2  { font-family: Helvetica, Arial, Sans-serif; }
h2  { font-size: 1.4em; margin-bottom: 0.714em; }

h1, h2, h3, h4, h5, h6 ,strong { font-weight:bold;  }

abbr,acronym 
{
	border-bottom: 1px dotted #000;
	cursor: help;
}
 
em 
{
	/*bringing italics back to the em element*/
	font-style:italic;
}

blockquote, ul, ol, dl 
{
	/*giving blockquotes and lists room to breath*/
	margin: 0 1em;
}

ol, ul, dl 
{
	/*bringing lists on to the page with breathing room */
	/*margin-left: 1em;*/
}

ol li 
{
	/*giving OL's LIs generated numbers*/
	list-style: decimal outside;	
}

ul li 
{
	/*giving UL's LIs generated disc markers*/
	list-style: disc outside;
}

dl dd 
{
	/*giving UL's LIs generated numbers*/
	margin-left:1em;
}

th,td 
{
	/*borders and padding to make the table readable*/
	border: 1px solid #000;
	padding: .5em;
}

th 
{
	/*distinguishing table headers from data cells*/
	font-weight: bold;
	text-align: center;
}

caption 
{
	/*coordinated marking to match cell's padding*/
	margin-bottom: .5em;
	/*centered so it doesn't blend in to other content*/
	text-align: center;
}

p, fieldset, table 
{
	/*so things don't run into each other*/
	margin-bottom:1em;
}

.invisible { display: none; }

/* Hide content for visual users. E.g. skip links	*/
.hide
{
	position: absolute;
	top: -9999px;
	left: -9999px;
}

/* Can't hide legends cross browser with negative text indent */
legend.hide
{
	font-size: 0.005em;
	visibility: hidden;
}

fieldset
{
	border: 0;	
}

/* Used to space an ellipse nicely */
.ellipse { letter-spacing: -0.15em; }

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */
.clear { display: inline-block; }   
.clear:after, .container:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
* html .clear { height: 1%; }
.clear { display: block; }

/* Generic Levin image replacement -  
   http://levin.grundeis.net/files/20030809/alternatefir.html */
.replace
{ 
	position: relative; 
	margin: 0px; 
	padding: 0px; 
	/* hide overflow:hidden from IE5/Mac */ 
	/* \*/ overflow: hidden; /* */ 
}

.replace span
{
	display: block; 
	position: absolute; 
	top: 0px; 
	left: 0px;
	z-index: 1; /*for Opera 5 and 6*/ 
}

/*	Site Default Styles		*/
body
{
	font: 62.5% Verdana, Helvetica, Arial, sans-serif;
	text-align: center;
	min-width: 900px;
	color: #ccc;
	background: #000 url(../../images/spotlight.jpg) top center no-repeat;
}

body.home {
	background: #000;
}

.article p.teaser {
    font-size: 2.5em;
    color: #f1eda8;
}

.light {
	/*background: #000 url(../../images/spotlight-light.jpg) top center no-repeat;*/
}

#doc
{
  font-size: 1em;
  width: 880px;
  margin: 0 auto;
  text-align: left;
  padding-top: 80px;
}

.aside, .article { float: left; }

.aside { width: 220px; }

.aside .primary a { font-weight: bold; } 

#viewer, .article {
	width: 615px;
	padding: 0 20px;
	min-height: 515px;
}

#viewer {
	background: url(../../images/article.png) center top  no-repeat;
}

.article {
	background: url(../../images/article-transparent.png) center top  no-repeat;
}

.home .article {
	background: none;
}

#accordion h3 {
    line-height: 2em;
}

#viewer .gutter {
	position: relative;
	margin: 2px;
	padding: 0;
}

.article .gutter {
	margin: 2px 10px;
	padding-top: 8px;
	padding-bottom: 3.178em;
}

.home .article .gutter {
	padding-top: 130px;
	margin-left: -80px;
}
    
.article h2 {
	margin-bottom: 0.909em;
	margin-top: 0.454em;
}

#viewer p {
	margin-bottom: 1em;
}

.article p {
	margin-bottom: 1.818em;
	line-height: 1.8;
	font-size: 1.1em;
	width: 90%;
}

#viewer h2 {
	margin-bottom: 0.454em;
}

.primary {

}

.secondary {
	margin: 0 1em;
}

#carousel ul {
	margin: 0;
}

#carousel {
	padding-bottom: 2em;
}

ul li {
	list-style: none;
}

#carousel ul li a {
	display: block;
}

.thumbs {
    float: right;
    margin: 5px 5px 0 0;
    width: 62px;
}

.thumbs ul {
    margin: 0;
}

.thumbs li {
    float: left;
}

.thumbs li.last {
    float: right;
}

.logo {
	margin-bottom: 2em;
    margin-top: -20px;
}

.next {
	right: 10px;
	line-height: 2em;
}

.prev {
	left: 10px;
	line-height: 2em;
}

.figure {
	margin-bottom: 1em;
	height: 412px;
}

.caption {
	margin-left: 8px;
}

.caption p {
	width: 75%;
}

.caption h2 {
	width: 75%;
	line-height: 1.409;
}

.primary ul {
	margin: 0;
}

a:link, a:visited, a:hover, a:active { color: #999; text-decoration: none;}

.ui-state-active a:link, 
.ui-state-active a:visited, 
.ui-state-active a:hover, 
.ui-state-active a:active,
a.active:link, 
a.active:visited, 
a.active:hover, 
a.active:active { 
	color: #fff; 
}

.thumbs a img {
    opacity: 0.35;
	filter:alpha(opacity=35);
	-moz-opacity:0.35;
	-khtml-opacity: 0.35;
}

.thumbs a.active img {
    opacity: 1;
	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity: 1;
}

.figure p.error { 
    margin-left: 5px;
    margin-right: 5px;
    font: 1.4em/2 bold Verdana,Helvetica,Arial,sans-serif;
}

.address {
    float: left;
}

.first {
    clear: left;
}

.secondary .categories {
	margin: 0 1em;
}

.secondary .categories a {
	font-weight: normal;
}

#contact .article .active {
    display: block;
}


/* graphico.co.uk */

/* The file below is read by ALL browsers
   but the hacks contained within it further target 
   IE5-6 for Windows. See file for details. */
@import "ie6win.css";
@import "ie7win.css";

/* IE 5.5 hacks only */
@media tty 
{
i{content:"";/*" "*/}}@m;
@import 'ie55win.css'; /*";}
}/* */ 

/* The file below is ONLY read by IE5/Win.
   Makes use of the Mid Pass Filter: 
   http://tantek.com/CSS/Examples/midpass.html */   
@media tty 
{
 i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */

/* The file below is ONLY read by IE5/Mac.
   Makes use of the Band Pass Filter: 
   http://www.stopdesign.com/examples/ie5mac-bpf/ */

/*\*//*/
  @import "ie5mac.css";
/**/

/* default headers */
h1,h2,h3, h4 { margin: 1em 0; }

.home h1 { font-size: 4em; color: #fff; margin: 100px 0 0.454em 200px; }
h1.sifr { font-size: 2.2em; margin: 0 0 0.454em 0; color: #f1eda8; width: 75%; background: none; }

.home #flashcontent p { margin-left: 200px; font-size: 1.4em; }
.home .article h1.sifr,
.home .article h1.sifr span 
{ background: none; }

.home h1.sifr { font-size: 6em; color: #fff; margin: 0.166em 0; background: none; }

h3, .nav li { font-size: 1em; line-height: 2em; margin: 0; }

h1,h2  { font-family: Helvetica, Arial, Sans-serif; }
h2  { font-size: 1.4em; margin-bottom: 0.714em; }

h1, h2, h3, h4, h5, h6 ,strong { font-weight:bold; }

abbr,acronym 
{
	border-bottom: 1px dotted #000;
	cursor: help;
}
 
em 
{
	/*bringing italics back to the em element*/
	font-style:italic;
}

blockquote, ul, ol, dl 
{
	/*giving blockquotes and lists room to breath*/
	margin: 0 1em;
}

ol, ul, dl 
{
	/*bringing lists on to the page with breathing room */
	/*margin-left: 1em;*/
}

ol li 
{
	/*giving OL's LIs generated numbers*/
	list-style: decimal outside;	
}

ul li 
{
	/*giving UL's LIs generated disc markers*/
	list-style: disc outside;
}

dl dd 
{
	/*giving UL's LIs generated numbers*/
	margin-left:1em;
}

th,td 
{
	/*borders and padding to make the table readable*/
	border: 1px solid #000;
	padding: .5em;
}

th 
{
	/*distinguishing table headers from data cells*/
	font-weight: bold;
	text-align: center;
}

caption 
{
	/*coordinated marking to match cell's padding*/
	margin-bottom: .5em;
	/*centered so it doesn't blend in to other content*/
	text-align: center;
}

p, fieldset, table 
{
	/*so things don't run into each other*/
	margin-bottom:1em;
}

.invisible { display: none; }

/* Hide content for visual users. E.g. skip links	*/
.hide
{
	position: absolute;
	top: -9999px;
	left: -9999px;
}

/* Can't hide legends cross browser with negative text indent */
legend.hide
{
	font-size: 0.005em;
	visibility: hidden;
}

fieldset
{
	border: 0;	
}

/* Used to space an ellipse nicely */
.ellipse { letter-spacing: -0.15em; }

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */
.clear { display: inline-block; }   
.clear:after, .container:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
* html .clear { height: 1%; }
.clear { display: block; }

/* Generic Levin image replacement -  
   http://levin.grundeis.net/files/20030809/alternatefir.html */
.replace
{ 
	position: relative; 
	margin: 0px; 
	padding: 0px; 
	/* hide overflow:hidden from IE5/Mac */ 
	/* \*/ overflow: hidden; /* */ 
}

.replace span
{
	display: block; 
	position: absolute; 
	top: 0px; 
	left: 0px;
	z-index: 1; /*for Opera 5 and 6*/ 
}

/*	Site Default Styles		*/
body
{
	font: 62.5% Verdana, Helvetica, Arial, sans-serif;
	text-align: center;
	min-width: 900px;
	color: #ccc;
	background: #000 url(../../images/spotlight.jpg) top center no-repeat;
}

body.home {
	/* background:  #000;/*#030102 url(../../images/coloured3.jpg) top center no-repeat; */
}

.home .article p {
    font-size: 2em;
    color: #f1eda8;
    line-height: 1.4;

}

.home .article p {
	width: 630px;
    height: 130px;
    /*
    text-indent: -9999px;
    overflow: hidden;
	background: url(../../images/p-home.png) top left no-repeat;
	*/
}

.home .article h1 {
	width: 630px;
    height: 80px;
    /*
    text-indent: -9999px;
    overflow: hidden;
	background: url(../../images/h1-home.png) top left no-repeat;
	*/
}

.light {
	background: #000 url(../../images/spotlight-light.jpg) top center no-repeat;
}

#doc
{
  font-size: 1em;
  width: 880px;
  margin: 0 auto;
  text-align: left;
  padding-top: 80px;
  position: relative;
}

#content {
	position: absolute;	
	top: 80px;
	left: 0;
	z-index: 100;
}

.aside, .article { float: left; }

.aside { width: 220px; }

.aside .primary a { font-weight: bold; } 

#viewer, .article {
	width: 615px;
	padding: 0 20px;
	min-height: 515px;
}

#viewer {
	background: url(../../images/article.png) center top  no-repeat;
}

.article {
	background: url(../../images/article-transparent.png) center top  no-repeat;
}

.home .article {
	background: none;
}

#accordion h3 {
    line-height: 2em;
}

#viewer .gutter {
	position: relative;
	margin: 2px;
	padding: 0;
}

.article .gutter {
	margin: 2px 10px;
	padding-top: 8px;
	padding-bottom: 3.178em;
}

.home .article .gutter {
	padding-top: 130px;
	margin-left: -80px;
}
    
.article h2 {
	margin-bottom: 0.909em;
	margin-top: 0.454em;
}

#viewer p {
	margin-bottom: 1em;
}

.article p {
	margin-bottom: 1.818em;
	line-height: 1.8;
	font-size: 1.1em;
	width: 90%;
}

.article p.sifr {
    font-size: 2.5em;
    color: #f1eda8;
    background: none;
    height: auto;
    width: auto;
}

#viewer h2 {
	margin-bottom: 0.454em;
}

.primary {

}

.secondary {
	margin: 0 1em;
}

#carousel ul {
	margin: 0;
}

#carousel {
	padding-bottom: 2em;
}

ul li {
	list-style: none;
}

#carousel ul li a {
	display: block;
}

.thumbs {
    float: right;
    margin: -2px 5px 10px 0;
    width: 70px;
}

.thumbs ul {
    margin: 0;
}

.thumbs li {
    float: left;
}

.thumbs li.last {
    float: right;
}

.logo {
	margin-bottom: 2em;
    margin-top: -20px;
}

.next {
	right: 10px;
	line-height: 2em;
}

.prev {
	left: 10px;
	line-height: 2em;
}

.figure {
	margin-bottom: 1em;
	height: 412px;
}

.caption {
	margin-left: 8px;
}

.caption p {
	width: 75%;
}

.caption h2 {
	width: 75%;
	line-height: 1.409;
}

.primary ul {
	margin: 0;
}

a:link, a:visited, a:hover, a:active { color: #999; text-decoration: none;}

.article a:link, 
.article a:visited, 
.article a:hover, 
.article a:active { 
	text-decoration: underline;
	color: #f1eda8;
}

.article a:hover { 
	text-decoration: none;
	color: #fff;
}

.ui-state-active a:link, 
.ui-state-active a:visited, 
.ui-state-active a:hover, 
.ui-state-active a:active,
a.active:link, 
a.active:visited, 
a.active:hover, 
a.active:active { 
	color: #fff; 
}

.thumbs a img {
    opacity: 0.35;
	filter:alpha(opacity=35);
	-moz-opacity:0.35;
	-khtml-opacity: 0.35;
}

.thumbs a.active img {
    opacity: 1;
	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity: 1;
}

.figure p.error { 
    margin-left: 5px;
    margin-right: 5px;
    font: 1.4em/2 bold Verdana,Helvetica,Arial,sans-serif;
}

.address {
    float: left;
}

.first {
    clear: left;
}

.secondary .categories {
	margin: 0 1em;
}

.secondary .categories a {
	font-weight: normal;
}

#contact .territory {
    display: none;
}

#contact .address {
    float: left;
    width: 49.8%;
}

#contact .article .active {
    display: block;
}

.address p {
	margin-bottom: 1em;
}

.sIFR-active .sifr {
    visibility: hidden;
}

#flashcontent {
    /*padding-left: 150px;   */
}

.thumbs ul li a {
    display: block;
    border: 2px solid #000;    
}

.thumbs ul li a.active { border: 2px solid #F1EDA8; }

.count { 
    text-align: center;
    font-size: 1.1em;
    line-height: 1.4;
    color: #F1EDA8;
    margin-top: 0.45em;
}

.count span { 
    color: #fff;
}

#socialMedia ul {
	margin: 0;
	margin-top: 1em;
}

#socialMedia li {
	float: left;
}

.webKeysArticle .gutter {
	background: url(../../images/webkeys.png) right 10px no-repeat;
}

.webKeysArticle p {
	width: 50%;
}

.webKeysArticle .extended {
	width: 100%;
}