@charset "utf-8";
/* -------------------------------------------------------------- 
  
   reset.css
   * Resets default browser CSS.
   
   Based on work by Eric Meyer:
   * meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
   
-------------------------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 border: 0; 
 font-family: inherit;
 font-size: 100%;
 font-style: inherit;
 font-weight: inherit;
 margin: 0;
 padding: 0;
 vertical-align: baseline;
}

body {
 background: white;
 color: inherit;
 line-height: 1.5;
 margin: 0;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table {
 border-collapse: separate;
 border-spacing: 0;
}

caption,
th,
td {
 font-weight: 400;
 text-align: left;
}

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, 
blockquote:after, 
q:before, 
q:after { 
 content: "";
}

blockquote, 
q { 
 quotes: "" "";
}

a img {
 border: none;
}

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

	grid.css
	
	Using the rule of thirds, this grid is setup to a grid of 980px with 10px gutters
	3 columns of 320px can be used for the main composition and then these are broken
	down into further 3 columns of 100px width each.
	
	[-----------------------------------------------930px------------------------------------------------]
	
	[------------290px-----------] 30px [-----------290px------------] 30px [-----------290px------------]
	
	[90px] 10px [90px] 10px [90px] 30px [90px] 10px [90px] 10px [90px] 30px [90px] 10px [90px] 10px [90px]

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

.container {
 width: 77.5em /* 930px */;
 margin: 0 auto;
}

/* Columns
---------------------------------------------------------------------------------------------------------------- */
.column, 
div.col-1, 
div.col-2, 
div.col-4,
div.col-5,
div.col-7
div.col-8 {
 margin-right: 0.833em;
} 

div.col-3,
div.col-6 {
 margin-right: 2.5em;
}

/* The last column in a row needs this class. */
.last, div.last {
 margin-right: 0;
} 

/* Use these classes to set the width of a column. */
.col-1 {
 float: left;
 width: 7.5em /* 90px */;
}

.col-2 {
 float: left;
 width: 15.8333em /* 190px */;
}

.col-3 {
 float: left;
 width: 24.1666em /* 290px */;
}

.col-4 {
 float: left;
 width: 34.1666em;
}

.col-5 {
 float: left;
 width: 42.5em;
}

.col-6 {
 float: left;
 width: 50.833em;
}

.col-7 {
 float: left;
 width: 60.833em;
}

.col-8 {
 float: left;
 width: 69.166em;
}

.col-9 {
 float: left;
 width: 77.5em;
}
/* Add these to a column to append empty cols. */
.append-1 {
 padding-right: 8.3333em /* 100px */;
}

.append-2 {
 padding-right: 16.6666em /* 200px */;
}

/* Add these to a column to prepend empty cols. */
.prepend-1 {
 padding-left: 8.3333em /* 100px */;
}

.prepend-2 {
 padding-left: 16.6666em /* 200px */;
}

/* Border on right hand side of a column. */
div.border {
 border-right: 0.083em /* 1px */ solid #eee;
 margin-right: 0.416em /* 5px */;
 padding-right: 0.333em /* 4px */;
}

/* Border with more whitespace, spans one column. */
div.colborder {
 border-right: 0.083em /* 1px */ solid #eee;
 margin-right: 3.196em /* 47px */;
 padding-right: 4.166em /* 50px */;
}

/* Misc classes and elements
---------------------------------------------------------------------------------------------------------------- */
/* In case you need to add a gutter above/below an element */
.prepend-top {
 margin-top: 1.5em;
}

.append-bottom {
 margin-bottom: 1.5em;
}

/* Use a .box to create a padded box inside a column.  */
.box {
 background: #e5ecf9;
 margin-bottom: 1.5em;
 padding: 1.5em;
} 

/* Use this to create a horizontal ruler across a column. */
hr {
 background: #ddd;
 border: none;
 clear: both;
 color: #ddd;
 float: none;
 /* setup to not disturb vertical rhythm of type */
 height: 0.0833em /* 1px */;
 margin: 1.483em 0;
 width: 100%;
}

hr.space {
 background: white;
 color: white;
}

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

.clearfix, .container {
 display: block;
}

/* Regular clearing   
apply to a column that should drop below previous ones. */
.clear {
 clear:both;
}

/* -------------------------------------------------------------- 
   
   forms.css
   
   Usage:
   * For text fields, use class .title or .text
   
-------------------------------------------------------------- */

/* Fieldsets */
fieldset { 
 border: none;
 margin: 0 0 1em 0;
 padding: 0;
}

legend {
 font-size: 1.2em;
 font-weight: bold;
}

/* Text fields */
input.text, 
input.title {
 border: 1px solid #bbb;
 background: #f6f6f6;
 color: inherit;
 margin: 0.5em 0.5em 0.5em 0;
 padding: 5px;
 width: 300px;
}

input.text:focus,
input.title:focus {
 border: 1px solid #999;
 background: white;
 color: inherit;
}

input.title {
 font-size: 1.5em;
}

/* Textareas */
textarea {
 height: 250px;
 margin: 0.5em 0.5em 0.5em 0;
 width: 400px;
}

textarea {
 background:#eee;
 border: 1px solid #bbb;
 color: inherit;
 padding: 5px;
}

textarea:focus {
 border: 1px solid #999;
 background: white;
 color: inherit;
}

/* Select fields */
select {
 background:#f6f6f6;
 border: 1px solid #ccc; 
 color: inherit;
 width: 200px;
}

select:focus {
 background: white;
 border: 1px solid #999;
 color: inherit;
}


/* Success, error & notice boxes for messages and errors. */
.error,
.notice, 
.success {
 border: 2px solid #ddd;
 margin-bottom: 1em;
 padding: .8em;
}

.error { 
 background: #fbe3e4;
 color: #d12f19;
 border-color: #fbc2c4;
}

.notice {
 background: #fff6bf; 
 border-color: #ffd324; 
 color: #817134;
}

.success {
 background: #e6efc2;
 border-color: #c6d880;
 color: #529214;
}

.error a {
 background: inherit;
 color: #d12f19;
}

.notice a {
 background: inherit;
 color: #817134;
}

.success a {
 background: inherit;
 color: #529214;
}

/* -------------------------------------------------------------- 
   
   typography.css
   * Sets up some sensible default typography.
  
   Based on work by:
   * Nathan Borror     [playgroundblues.com]
   * Jeff Croft        [jeffcroft.com]
   * Christian Metts   [mintchaos.com]
   * Wilson Miner      [wilsonminer.com]
   * Richard Rutter    [clagnut.com]

   Read more about using a baseline here:
   * alistapart.com/articles/settingtypeontheweb

   Read more about composing a vertical rhythm here:
   * 24ways.org/2006/compose-to-a-vertical-rhythm

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

/* Default fonts and colors. 
-------------------------------------------------------------- */

body {
 background: white url('underline.gif');
 color: #222; 
 font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif; 
 font-size: 75%;
 line-height: 1.5em;
 text-shadow: white 0 0 1px; /* corrects Safari CoreType rendering problems */
}

html>body {
 font-size: 12px; /* Sets size specifically for modern browsers which allow users to resize text sized in pixels */
}

/* Headings
Typography sizes and styles based on Mark Boulton's 
hierachy in A practical guide to Designing for the Web 
http://www.fivesimplesteps.co.uk/
-------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
 background: inherit;
 color: #600; 
 font-family: Georgia, "Times New Roman", Times, serif;
 font-weight: normal;
 letter-spacing: 0.04165em; /* Renders .5 of a px in Webkit and Mozilla browsers, seriously! */
 text-shadow: #eee;
}

h1 /* 24px */{
 background: inherit;
 color: #111;
 font-size: 2em;
 letter-spacing: normal;
 line-height: 1em;
 margin-bottom: 0.755em;
}

h2 /* 18px */ { 
 font-size: 1.5em;
 line-height: 1em;
 margin-bottom: 1em;
}

h2 a {
	color: #600;
	text-decoration: none;
}

h3 /* 16px */ { 
 font-size: 1.333333em;
 line-height: 1.125em;
 margin-bottom: 0.5625em;
}

h4,
h5,
h6 /* 13px */ { 
 font-size: 1.083333em;
 line-height: 1.384615em;
 margin-bottom: 1.384615em;
}

h5 { 
 text-transform: uppercase;
}

h6 { 
 font-weight: bold;
 text-transform: uppercase;
}

h3+h3 {
 margin-top: 1.1em;
}

h3+h4 {
 margin-top: 1.4em;
}

/* Text elements
-------------------------------------------------------------- */

p /* 12px */{
 font-size: 1em;
 margin: 1.5em 0;
}

p.last {
 margin-bottom: 0;
}

p img { 
 float: left; 
 margin: 1.5em 1.5em 1.5em 0; 
 padding: 0;
}

p img.top { 
 margin-top: 0; 
} /* Use this if the image is at the top of the <p>. */

img { 
 margin: 0 0 1.5em; 
}

ul, ol { 
 margin: 0 1.5em 1.4em 1.5em; 
}

ul { 
 list-style-type: disc;
}

ol { 
 list-style-type: decimal;
}

dl { 
 margin: 0 0 1.5em 0;
}

  dl dt { 
   font-weight: bold; 
  }

  dd {
   margin-left: 1.5em;
  }

abbr, 
acronym { 
 border-bottom: 1px dotted #666; 
}

address     {
 font-style: italic; 
 margin-top: 1.5em;
}

del {
 background: inherit;
 color: #666;
}

a:link {
 background: inherit;
 color: #009; 
 text-decoration: underline;
}

a:visited {
 background: inherit;
 color: #009; 
 text-decoration: underline;
}

a:focus, 
a:hover {
 background: inherit;
 color: #000;
 outline: none;
}

a:active {
 background: inherit;
 color: #000;
 outline: none;
}

blockquote  {
 background: inherit;
 color: #666;
 font-style: italic;
 margin: 1.5em;
}

strong {
 font-weight: bold;
}

em,
dfn { 
 font-style: italic;
}

dfn {
 font-weight: bold;
}

pre,
code { 
 margin: 1.5em 0; 
 white-space: pre;
}

pre,
code,
tt { 
 font: 1em 'andale mono', 'monotype.com', 'lucida console', monospace; 
 line-height: 1.5;
}

tt {
 display: block; 
 line-height: 1.5;
 margin: 1.5em 0;
}

/* Tables
-------------------------------------------------------------- */

table {
 margin-bottom: 1.4em;
}

th { 
 border-bottom: 1px solid #ddd; 
 font-weight: bold;
}

td { 
 border-bottom: 1px solid #ddd;
}

th,
td {
 padding: 4px 10px 4px 0;
}

tfoot {
 font-style: italic;
}

caption {
 background: #ffc;
 color: inherit;
}

/* Use this if you use span-x classes on th/td. */
table .last {
 padding-right: 0;
}

/* Default classes
-------------------------------------------------------------- */

.small {
 font-size: .8em;
 line-height: 1.875em;
 margin-bottom: 1.875em;
}

.large {
 font-size: 1.2em;
 line-height: 2.5em;
 margin-bottom: 1.25em;
}

.quiet {
 background: inherit;
 color: #666;
}

.hide {
 display: none;
}

.highlight {
 background: #ff0;
 color: inherit;
}

.added {
 background: inherit;
 color: #060;
}

.removed {
 color: #900;
}

.top {
 margin-top: 0;
 padding-top: 0;
}

.bottom {
 margin-bottom: 0; 
 padding-bottom: 0;
}

.left {
 float: left;
 width: auto;
}

.right {
 float: right;
 padding-left: 10px;
 width: auto;
}

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

	icons.css

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

/* Use this class if a link gets an icon when it shouldn't. */
body a.noicon {
 background: none !important;
 color: inherit;
 margin: 0 !important;
 padding: 0 !important;
}

/* Make sure the icons are not cut */

a[href^="http:"], 
a[href^="mailto:"], 
a[href^="http:"]:visited, 
a[href$=".pdf"], 
a[href$=".doc"], 
a[href$=".xls"], 
a[href$=".rss"], 
a[href$=".rdf"], 
a[href^="aim:"] {
 background-repeat: no-repeat;
 background-position: right center;
 margin: -2px 0;
 padding: 2px 22px 2px 0;
}

/* External links */
a[href^="http:"] {
 background-image: url('/images/external.png');
 color: inherit;
 padding-right: 14px;
} 

#footer a[href^="http:"] {
 background-image: url('/images/external-foot.png');
 color: inherit;
 padding-right: 14px;
}

a[href^="mailto:"] {
 background-image: url('/images/email.png');
 color: inherit;
}

a[href^="http:"]:visited {
 background-image: url('/images/visited.png');
 color: inherit;
}

/* Files */
a[href$=".pdf"]   { 
 background-image: url('/images/pdf.png');
 color: inherit;
}

a[href$=".doc"] { 
 background-image: url('/images/doc.png');
 color: inherit;
}

a[href$=".xls"] { 
 background-image: url('/images/xls.png');
 color: inherit;
}  
 
/* Misc */
a[href$=".rss"], 
a[href$=".rdf"] {
 background-image: url('/images/feed.png');
 color: inherit;
}

a[href^="aim:"] {
 background-image: url('/images/im.png');
 color: inherit;
}

a[href^="http://digikev.co.uk"] {
 background-image: none;
 color: inherit;
 margin: 0;
 padding: 0;
}

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

	CSS written by Kevin Rapley [digikev.co.uk]

	SWATCHES

	#000000

	CONTENTS
	Search for any of the below to be transported to that section of the
	document

	=HEADER
	=ACCESS
	=BRANDING
	=MENU
	=SUBMENU
	=CONTENT
	=SIDEBAR
	=TOP-BUTTON
	=FOOTER

=TOP
----------------------------------------------------------------- */
html, 
body {
 height: 100%;
 overflow: hidden;
 width: 100%;
}

 #page {
  height: 100%;
  left: 0;
  margin: 0 auto;
  min-width: 82.5em;
  overflow: auto;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
 }

 #background {
  
 }

  #background img {
   height: 100%;
   position: absolute;
	 top: -1.5em;
   width: 100%;
   z-index: 0;
  }

/* =HEADER
contains the logo and background gradient for the masthead
----------------------------------------------------------------- */

 #header {
  background: url('/images/headerloop.png') top repeat-x;
  color: black;
  position: relative;
 }

  #search {
   background: black;
   color: white;
   filter: alpha(opacity=80);
   height: 1.5em;
   opacity: 0.8;
   padding: 0.4166em 1em 0.4166em 0.4166em;
   position: absolute;
   right: 0;
   top: 4em;
	 width: 250px;
  }

   #search * {
    filter: alpha(opacity=100);
    opacity: 1.0;
	 }

   #s {
    background: white;
    border: none;
		color: red;
    font-weight: bold;
	 }

   #searchsubmit {
    background: black;
		border: none;
		color: white;
		cursor: hand;
		font-size: 0.9em;
		font-weight: bold;
	 }

    #searchsubmit:hover {
     text-decoration: underline;
		}

/* =ACCESS
contains all styles attributed to the accessibility panel
----------------------------------------------------------------- */

 #access {
  
 }

/* =BRANDING
Logo, search and telephone number.
----------------------------------------------------------------- */

  #branding {
   background: url('/images/illustration.png') top center no-repeat;
   color: black;
   height: 23em
  }

   #branding img {
    margin: 21px 0 0 25px;
   }

  .menu {
   background: black;
   clear: both;
   color: white;
   display: block;
   font-size: 1.166em;
   line-height: 1.1em;
   list-style: none;
   margin: 6em 0 0 0;
   padding: 0.4166em;
   width: 55em;
  }

  .menu {
   filter: alpha(opacity=80);
   height: 1.1em;
   opacity: 0.8;
  }

   .menu li {
    float: left;
    width: auto;
   }

    .menu a:link,
    .menu a:visited {
     background: inherit;
     color: white;
     text-decoration: none;
	}

    .menu a:hover,
    .menu a:active {
     text-decoration: underline;
	}

    .menu span {
     background: inherit;
     color: #ff0;
     margin: 0 0.4166em; 
	}

/* =MENU
Main navigational menu.
----------------------------------------------------------------- */

 #menu {
  
 }

  #menu ul {
   
  }

   #menu li {
    
   }

   #menu li.selected {
    
   }

   #menu a:link, #menu a:visited {
    
   }

   #menu .selected a:link, #menu .selected a:visited {
    
   }

   #menu a:hover, #menu a:active {
    
   }

/* =SUBMENU
Secondary menu.
----------------------------------------------------------------- */

 #submenu {
  
 }

/* =CONTENT
Main content region.
----------------------------------------------------------------- */

 #content {
  position: relative;
 }

  #content img.border {
   border: 1px solid #600;
   margin-top: 5px;
  }

	#breadcrumbs {
		left: 0;
		margin: 0;
		position: absolute;
		top: -2em;
	}

  #what {
   
  }

   #what dl {
    float: left;
   }

    #what dl img {
     float: left;
     margin: 0 0.666em 0;
    }

    #what dt {
     background: white;
     border: #600 solid 1px;
		 border-bottom: none;
		 color: inherit;
     font-family: Georgia, "Times New Roman", Times, serif;
     font-size: 1.333333em;
     font-weight: normal;
     line-height: 1.125em;
     padding: 10px;
    }

     #what dt a {
      background: white;
			color: black;
	   }

    #what dd {
     background: white;
     border: #600 solid 1px;
		 border-top: none;
		 color: inherit;
     margin: 0 0 10px 0;
		 padding: 10px;
    }

     #what dd p {
      margin-top: 0;
	   }

  #connect {
   
  }

   #connect ul {
    list-style: none;
    margin: 0;
   }

    #connect li {
     clear: both;
     margin: 0 0 2.5em 0;
	}

     #connect li img {
      float: right;
      margin: 0 0 0 0.833em;
      width: auto;
	 }

     #connect p, #connect h2 {
      letter-spacing: normal;
      margin: 0;
	 }

 .code {
  background: white url('/framework3/library/underline.gif');
  border: solid 1px #600;
	color: #600;
  overflow-x: scroll;
  padding-left: 2em;
  width: 48.833em;
 }

  .code code {
   white-space: nowrap;
	}

.books {
	background: #ffc;
	border: solid 1px #600;
	color: black;
	padding: 20px;
}

	.books ul {
		display: block;
	}

		.books li {
			list-style: none;
		}

	.books h4 {
		clear: both;
	}

	.books img {
		float: left;
		margin: 0;
		margin-right: 20px;
		padding: 0;
		width: auto;
	}

	.books a[href^="http:"] {
		background-image: none !important;
		clear: both;
		margin: 0;
		padding: 0;
	}

	.books p {
		clear: right;
	}

/* =SIDEBAR
All attributes that relate to the sidebar
----------------------------------------------------------------- */

 #sidebar {
  
 }

  #sidebar ul {
   list-style: none;
   margin-left: 0;
	}

   #sidebar ul ul {
    margin-left: 1em;
	 }

/* =TOP-BUTTON
Usability/Access feature to bring user to top of HTML document
----------------------------------------------------------------- */

 #top-button {
  
 }

/* =FOOTER
Copyright statement, links to policies, RSS and 3heads link
----------------------------------------------------------------- */

 #footer {
  background: url('/images/footer.png') repeat-x;
  color: white;
  height: 6.666em;
  margin-top: 3.333em
 }

  #footer p {
   padding: 1.75em 0 0 1.75em;
  }

   #footer p a:link,
   #footer p a:visited {
    background-color: inherit;
    color: #ff0;
   }

   #footer p a:hover,
   #footer p a:active {
    background-color: inherit;
    color: #ff0;
    text-decoration: none;
   }

/* =TOP
Search for above to be brought to the top of the document
----------------------------------------------------------------- */


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

    print.css
    Based on Blueprint CSS framework and
    Hartija CSS framework

    Repackaged, restyled and improved by 
    Kevin Rapley [http://digikev.co.uk]

    Typography in absolute sizes using Points [pt] and Picas [pc]

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

@media print {

  body {
   background: none;
   color: black;
   font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
   font-size: 12pt;
   letter-spacing: 0.2pt;
   line-height: 1.5pc;
   margin: 0 !important;
   padding: 0 !important;
   width: 100% !important;
   word-spacing: 1.1pt;
  }  

  /* Layout
  -------------------------------------------------------------- */
  .container {
   background: none;
   color: inherit;
  }

  hr {
   background: #ccc;
   border: none;
   color: #ccc;
   height: 2px;
   margin: 2pc 0;
   padding: 0;
   width: 100%;
  }

  hr.space {
   background: none;
   color: white;
  }

  /* Typography
  Typography sizes and styles based on Mark Boulton's 
  hierachy in A practical guide to Designing for the Web 
  http://www.fivesimplesteps.co.uk/
  -------------------------------------------------------------- */
  h1, 
  h2, 
  h3, 
  h4, 
  h5, 
  h6 {
   font-family: "Helvetica Neue", Arial, "Lucida Grande", sans-serif;
   font-size: 13pt;
  }

  h1 {
   font-size: 24pt;
  }

  h2 {
   font-size: 18pt;
  }

  h3 {
   font-size: 16pt;
  }

  code {
   font: 9pt "Courier New", Monaco, Courier, monospace;
  }

  img {
   float: left;
   margin: 1.5pc 1.5pc 1.5pc 0;
  }

  a img {
   border: none;
  }

  p img.top {
   margin-top: 0;
  }

  blockquote {
   font-style: italic;
   font-size: 12pt;
   margin: 1.5pc;
   padding: 1pc;
  }

  .small {
   font-size: 9pt;
  }

  .large {
   font-size: 13pt;
  }

  .quiet {
   color: #999;
  }

  .hide {
   display: none;
  }

  /* Links
  -------------------------------------------------------------- */
  a:link,
  a:visited {
   background: none;
   color: inherit;
   font-weight: 700;
   text-decoration: underline;
  }

  a:link:after, 
  a:visited:after {
   content: " (" attr(href) ")";
   font-size: 90%;
  }

  a:link[href^="http://"]:after,
  a[href^="http://"]:visited:after { 
   content: " (" attr(href) ") "; 
   font-size: 90%;
  }

  a[href^="http://"] {
   background: none;
   color: black;
  }

  /* If you're having trouble printing relative links, uncomment and customise this: 
     (note: This is valid CSS3, but it still won't go through the W3C CSS Validator) */ 
/*
  a[href^="/"]:after {
   content: " (http://www.yourdomain.com" attr(href) ") ";
  }
*/

  /* Table
  -------------------------------------------------------------- */
  table { 
   margin: 1px; 
   text-align: left;
  }

   caption {
    background: #ccc;
    caption-side: bottom;
    color: black;
    margin-bottom: 2pc;
    text-align: left;
   }

   thead {
    display: table-header-group;
   }

   tfoot { 
    font-style: italic;
   }

   tr {
    page-break-inside: avoid;
   }
  
    th { 
     border-bottom: 1px solid #333;
     font-weight: bold;
    }

    td { 
     border-bottom: 1px solid #333;
    }

    th,
    td { 
     padding: 4px 10px 4px 0;
    }
}