/* SECTIONS: Recent Misc, Colours, Doc Structure, Links & Navlinks, Headings, Basic Body Styles, Images, Lists, Table Of Contents, Sidebars, Footnotes And Help Popups, Tables, Prices, Misc, Debugging */
/* <##>======= ↓ SCREEN CSS ↓ ======= */

@media screen, projection {
.no-screen, .print-only, .iphone-only  {
 /* if an element is classed for print only or iphone only, do not display it on screen */
display:none;
}

/* <##>== ↓ RECENT MISC ↓ == */

a.inherit-link-colour:link, a.inherit-link-colour:visited {
color:inherit;
}

a.inherit-link-colour:active, a.inherit-link-colour:hover {
color:#336699;
}

/* <##>== ↓ COLOURS ↓ == */

.colour-blue {
color:#336699;
}

.colour-blue-light {
color:#7A9BBD;
}

.colour-blue-light.background {
background-color:#7A9BBD;
}

.colour-gray-xlight {
color:#F7F7F7}

.warning, .colour-warning {
color:#CE6765;
}

.colour-warning-strong {
color:#d70006;
}

/* <##>== ↓ DOC STRUCTURE ↓ == */

html, body {
font-family:Tahoma,Verdana,'Trebuchet MS','URW Gothic L',sans-serif;
font-size:1em;
line-height:1.8;
}

#masthead {
margin:0 0 0 50px;
color:#555555;
}

#masthead input.submit {
color:#336699;
}

#content {
color:#333333;
margin:80px 13% 5% 15%;
font-weight:normal;
}

#footer {
padding:8px 8px 0 8px;
color:#555555;
margin-top:2em;
border-top:6px solid #7A9BBD;;
}

.font-fam-small, .sidebar, .img-caption.narrow, table, #date {
font-family:'Arial Narrow','DejaVu Sans Condensed',Arial,sans-serif;
}

/* <##>== ↓ LINKS & NAVLINKS ↓ == */

a {
text-decoration:none;
}

a:link, a:visited, a.persistent:visited, li.footnote a.backref:visited, a.help-link:visited {
color:#336699;
}

a.important {
text-decoration:underline;
}

a:hover, a.persistent:hover {
color:#7A9BBD;
}

a:active, a.persistent:active {
color:#BBB;
}

a.subtle {
color:inherit;
font-weight:inherit;
}

.navlinks {
margin:0;
padding:0;
list-style-type:none;
font-size:.9em;
}

#masthead .navlinks {
margin-left:-.5em;
}

.navlinks li {
display:inline;
margin-right:.5em;
}

#footer .navlinks {
text-align:center;
}

div.featured-link {
color:#666;
margin:2em 1em;
text-align:left;
line-height:1.4;
padding:10px 14px;
border: solid 2px #d9d9d9;
-webkit-border-radius:4px;-moz-border-radius:4px;-khtml-border-radius:4px;border-radius:4px;background-repeat:repeat-x;
background-position:bottom left;
background-image:url('/resources/images/featured-link-bg.jpg');
}

/* <##>== ↓ HEADINGS ↓ == */

#date, #date a {
color:#BBBBBB;
font-size:.9em;
margin-bottom:-.25em;
position:relative;
z-index:4;
}

h1, h3, h4, h5 {
color:#336699;
}

h2 {
margin-top:0px;
}

h3, h4, h5 {
margin:4em auto 1.5em auto}

h1.x-short {
font-size:2.8em;
line-height:1.2;
letter-spacing:-1px;
}

h1.short {
font-size:2em;
line-height:1.3;
}

h1 {
font-size:1.7em;
line-height:1.3;
margin-top:0;
margin-bottom:.25em;
color:#336699;
}

h1.long {
font-size:1.5em;
line-height:1.3;
}

h1.x-long {
font-size:1.3em;
line-height:1.3;
}

.kern-decrease-small {
margin-right:-0.05em;
}

.kern-decrease-med {
margin-right:-0.10em;
}

.kern-decrease-large {
margin-right:-0.15em;
}

h2.x-short {
font-size:1.3em;
line-height:1.2;
}

h2.short {
font-size:1.2em;
line-height:1.3;
}

h2, h3 {
font-size:1.1em;
line-height:1.4;
}

h2.long {
font-size:1.1em;
line-height:1.4;
}

h2.x-long {
font-size:1.1em;
line-height:1.5;
}

h5 {
font-size:1em;
margin-top:2em;
font-weight:normal;
font-style:italic;
}


/* <##>== ↓ BASIC BODY STYLES ↓ == */

.runin {
font-style:normal;
font-weight:bold;
}

.seo {
text-decoration:none;
font-style:inherit;
font-weight:inherit;
}

p.first {
font-size:1.1em;
color:#336699;
}

p.first:first-line {
font-weight:bold;
font-size:1.2em;
}

p.first:first-letter {
float:left;
font-weight:bold;
color:#7A9BBD;
font-size:120px;
line-height:100px;
padding-top:2px;
margin:0px 10px 0 -25px;
text-shadow:#BBBBBB 2px 2px 8px;
}

blockquote {
margin:1.5em 1em;
color:#777;
line-height:1.5;
}

blockquote p.attribution {
font-size:.8em;
color:#777;
text-align:left;
margin:0 0 0 40%;
}

blockquote blockquote {
margin:1em;
font-size:.9em;
}

p.pull {
display:none;
color:#669966;
font-style:italic;
font-size:1.3em;
margin:2.5em auto 2.5em auto;
}

p.pull.left {
text-align:right;
margin-left:-15%;
margin-right:35%;
}

p.pull.right {
text-align:left;
margin-left:35%;
margin-right:-15%;
}

#preamble {
font-size:.9em;
color:gray;
line-height:1.4;
margin-bottom:4em;
}

.badge-excerpt {
font-size:.9em;
font-weight:bold;
font-style:normal;
padding:0 4px 1px 4px;
color:white;
letter-spacing:1px;
background-color:#7A9BBD;
}

.badge-excerpt.inline {
margin:0;
vertical-align:2px;
background-color:#CCC;
font-size:.7em;
padding:1px 2px 1px 4px;
}

.meta {
border: 4px solid #7A9BBD;-webkit-border-radius:6px;-moz-border-radius:6px;-khtml-border-radius:6px;border-radius:6px;;
color:#666;
background:#FFFFFF;
padding:2em;
margin:5em -2em;
line-height:1.5;
background-repeat:repeat-x;
background-position:bottom left;
background-image:url('/resources/images/featured-link-bg.jpg');
}

.meta.small {
padding:1em;
margin:2em -1em;
}

strong.medium {
color:#555;
}

span.count {
font-weight: bolder;
float:left;
margin: 0 0 0 -1.5em;
color: #7A9BBD;
}

pre {
font-size:.9em;
font-family:Helvetica;
line-height:1.3;
border:1px solid #888;
-webkit-border-radius:6px;-moz-border-radius:6px;-khtml-border-radius:6px;border-radius:6px;padding:10px;
}

em.highlight {
padding-bottom:2px;
border-bottom: 2px solid #B6C8DB;
font-style:normal;
}


/* <##>== ↓ IMAGES (IMGS) ↓ == */

/* Styling of images and captions generated by php function “img()”. */
/* Image container styles. (Most IMGs have div containers.) */
.img-container img {
vertical-align:bottom;
border:0;
}

.img-container {
text-align:center;
margin-top:2.5em;
margin-bottom:.25em;
}

.img-container.right {
float:right;
margin-right:-10%;
margin-left:2em;
margin-bottom:1em;
}

.img-container.left {
float:left;
margin-right:2em;
margin-left:-14%;
margin-bottom:1em;
}

.img-container.center {
margin:3em auto 3em auto;
padding-right:4%;
/* My body text is not centred but a little bit left of, so my they also need to be pushed a bit to the left. Doesn't work with sidecaps, as these already tend to look left-of-centre. */
}

/* negate margin-busting in certain contexts */
#customer-info-section div.img-container.right, .help-popup div.img-container.right, .sidebar div.img-container.right, .meta div.img-container.right {
border:none;
margin:0 0 1em 1em;
}

/* Styles common to ALL caption headers and captions ... */
.img-caption {
margin:1em 5%;
font-size:.9em;
color:#666;
line-height:1.5;
}

h5.img-caption {
font-weight:bold;
font-style:normal;
font-size:1em;
padding:0;
}

/* Styles for captions under images floated to the left and right ... */
h5.img-caption.below {
/* For captions headers below smaller right and left side images. It gets tweaked a bit for caption headers below big centred pictures, see below. */
margin-bottom:-.5em;
}

h5.img-caption.below.narrow {
/* Remove the margins for very narrow captions. */
margin:0;
}

p.img-caption.below.narrow {
/* Remove the margins for very narrow captions. */
margin:0;
}

/* Styles for captions under big centered images ... */
.img-container.center h5.img-caption.below {
margin:1em 10% 0 10%;
/* a little more room underneath */
font-size:1em;
/* slightly larger for roomier caption format */
}

.img-container.center p.img-caption.below {
margin:1em 10% 0 10%;
}

/* Styling for captions on the right side of an image ... */
img.cap-on-right {
/* Images with captions on the side are floated, and need to have a margin to push the text away from them a bit (applying the margin to the caption itself doesn’t work, not sure why). */
float:left;
margin-right:0em;
}

.img-caption.rightside {
text-align:left;
padding-top:.3em;
margin-right:0;
padding-right:0;
}

h5.img-caption.rightside {
font-size:1em;
margin-bottom:-.7em;
}

p.img-caption.rightside {
margin-right:0;
line-height:1.8;
}

/* Just a wee bit of styling for inline images. */
.inline-superscript-tall {
vertical-align:.2em;
}

.inline-superscript {
vertical-align:.1em;
}

.inline-superscript-short {
vertical-align:.05em;
}

.inline-on-baseline {
vertical-align:0;
}

.inline-subscript {
vertical-align:-.15em;
}

/* Styles for CSS drop shadows. See http://www.alistapart.com/articles/onionskin/ */
.ds {
background-repeat:no-repeat;
}

.ds.small.wrap1 {
float:left;
margin-bottom:.5em;
background-position:right bottom;
background-image:url('/resources/images/ds-small-shadow.gif');
}

.ds.small.wrap2 {
background-position:left bottom;
background-image:url('/resources/images/ds-small-corner-bl.gif');
}

.ds.small.wrap3 {
background-position:right top;
padding:0 5px 5px 0;
background-image:url('/resources/images/ds-small-corner-tr.gif');
}

.ds.med.wrap1 {
float:left;
margin-bottom:.5em;
background-position:right bottom;
background-image:url('/resources/images/ds-med-shadow.gif');
}

.ds.med.wrap2 {
background-position:left bottom;
background-image:url('/resources/images/ds-med-corner-bl.gif');
}

.ds.med.wrap3 {
background-position:right top;
padding:0 8px 8px 0;
background-image:url('/resources/images/ds-med-corner-tr.gif');
}

.wrap3 img {
display:block;
}

a.embiggen-link:link, a.embiggen-link:visited {
display: block;
position:absolute;
z-index:2;
top:-5px;
left:-5px;
width:16px;
height:16px;
background-position: 1px 1px;
background-repeat: no-repeat;
background-image: url('/resources/images/magnifying-glass.png');
}

a.embiggen-link:hover {
background-position: 0px 0px;
background-image: url('/resources/images/magnifying-glass-rollover-hover.png');
}

a.embiggen-link:active {
background-position: 0px 0px;
background-image: url('/resources/images/magnifying-glass-rollover-active.png');
}

/* <##>== ↓ LISTS ↓ == */

ul li {
list-style-image:url('/resources/images/bullet-8px.png');
}

li {
padding-left:.5em;
line-height:1.5;
color:#777;
margin:1.5em 4em 1.5em 0;
}

ul.short li, ol.short li {
margin:1.5em 3em;
}

ul.promo-bullets li {
color:#444;
list-style-image:url('/resources/images/rt-arrow.png');
padding-left:.5em;
}

li ul, li ol {
margin:1em 1.5em inherit 1.5em;
padding-left:1.5em;
padding-right:1.5em;
}

dd ol {
margin-top:1em;
margin-left:1.5em;
margin-right:1.5em;
padding-left:1.5em;
padding-right:1.5em;
}

dl {
margin-bottom:2.5em;
}

dl dt {
font-weight:bold;
margin-right:2em;
margin-top:1em;
}

dl dd {
margin-left:1em;
margin-right:2em;
}

dl dd p {
color:#555;
line-height:1.5;
}

/* <##>== ↓ TABLE OF CONTENTS ↓ == */

#tocbutton {
position:fixed;
top:150px;
left:20px;
width:36px;
height:46px;
z-index:1;
}

ul.toc {
margin:0;
padding:0;
}

.toc li {
/* ALL TOC ITEMS */
list-style-image:none;
list-style-type:none;
line-height:1.3;
margin-bottom:-1em;
color:#555;
}

.toc .l1 {
/* TOC L1 ITEMS */
font-weight:bold;
margin-top:2em;
}

.toc .l2 {
/* TOC L2 ITEMS */
font-size:.9em;
margin-left:1.2em;
}

.toc.detailed li {
margin-bottom:-.6em;
color:#666}

.toc a:visited {
_color:#369;
}

.link-to-toc {
font-size:.8em;
text-transform:uppercase;
text-align:right;
}

#adsense-search-masthead {
float:right;
margin-right:5px;
_margin-right:0;
}

/* <##>== ↓ SIDEBARS ↓ == */

.sidebar {
float:right;
line-height:1.3;
color:#555;
width:35%;
margin:1em -12% 1.5em 1.5em;
padding:8px 0 .5em 2px;
border-top:4px solid #7A9BBD;;
}

.sidebar-box {
float: right;
font-size: .85em;
background-color:white;
margin: 0 -10% 20px 20px;
padding: 10px;
text-align: center;
color: #777;
border: 1px solid #ccc;
-webkit-border-radius:4px;-moz-border-radius:4px;-khtml-border-radius:4px;border-radius:4px;width: 10em;
line-height: 1.4em;
}

.sidebar.large {
width:45%;
margin-right:-18%;
}

.sidebar.warning {
border-top:4px solid #CE6765;
}

div.sidebar.warning h4, div.sidebar.warning h5 {
color:#CE6765;
}

.sidebar h4, .sidebar h5 { /* both sidebar h4s and h5s are styled the same way, regardless of hierarchy */
font-size:1em;
margin:0;
margin-bottom:-.5em;
font-style:normal;
font-weight:bold;
}

.sidebar.large h4, .sidebar.large h5, .sidebar.large p {
margin-right:10px;
}

div.sidebar ol, div.sidebar ul {
margin-left:1em;
padding:0;
}

div.sidebar li {
padding-left: .1em;
line-height:1.3;
margin:.5em 0 .5em 0;
}

/* <##>== ↓ FOOTNOTES and HELP POPUPS↓ == */

.hoverwindow {
border: 4px solid #7A9BBD;-webkit-border-radius:6px;-moz-border-radius:6px;-khtml-border-radius:6px;border-radius:6px;width: 400px;
display:none;
}

.hoverwin {
border: 4px solid #7A9BBD;-webkit-border-radius:6px;-moz-border-radius:6px;-khtml-border-radius:6px;border-radius:6px;background-color:#FFFFFF;
padding:15px;
line-height:1.5;
font-size:.9em;
color: #666;
}

.hoverwincontainer{
z-index:2;
border:0px;
margin-top:15px;
width:40%;
background-image:url('/resources/images/transparent-pixel-50.png');
display:none;
position:absolute;
padding:5px;
}

.int{
padding:10px;
}

.closebutton{
float:right;
padding:0;
margin:0;
display:block;
position:absolute;
top:15px;
right:15px;
text-align:center;
cursor:pointer;
}

a.ref:link, a.ref:visited, a.help-link:link, a.help-link:visited { /* styles common to both help-links (class "help-link") and footnote references (class "ref"), which are quite similar */
white-space:nowrap;
font-size:.75em;
margin-left:2px;
padding:0 2px;
vertical-align:+.25em;
-webkit-border-radius:4px;-moz-border-radius:4px;-khtml-border-radius:4px;border-radius:4px;text-shadow:#fff 0 1px 0;
color:#7A9BBD;
background-color:#dddddd;
border:1px white solid;
}

a.ref:hover, a.help-link:hover { /* hover help-link/ref styles in common */
color:#336699;
background-color:#e4e4e4;
background:-webkit-gradient(linear, left top, left bottom, from(#e5e5e5), to(#c2c2c2));
border:1px #7A9BBD solid;
}

a.ref:active, a.help-link:active { /* active help-link/ref styles in common */
color:white;
border:1px #336699 solid;
}

a.help-link { /* extra styles for help-links (buttonizes them) */
font-size:.7em;
color:#336699;
font-family:'Arial Narrow','DejaVu Sans Condensed',Arial,sans-serif;
-webkit-border-radius:4px;-moz-border-radius:4px;-khtml-border-radius:4px;border-radius:4px;padding:2px 5px 1px;
white-space:nowrap;
background:-webkit-gradient(linear, left top, left bottom, from(#e5e5e5), to(#c2c2c2));
border:1px white solid;
}

li.footnote {
list-style-image:none;
font-size:.9em;
margin-bottom:3.5em;
}

li.footnote a.backref {
font-size:.6em;
text-transform:uppercase;
float:right;
margin-top:.75em;
color:gray;
}

li.footnote blockquote + a.backref {
margin-top:-.5em;
}

li.popup-footnote a.backref:link, li div.help-popup a.close:link, a.close {
/* This styles the close-widget in footnote boxes. */
display:block;
position:absolute;
top:2px;
right:2px;
}

div.help-hidden {
display:none;
}

li.popup-footnote, div.help-popup {
z-index:2;
display:block;
position:absolute;
left:25%;
background:#FFFFFF;
border:4px solid #7A9BBD;;
-webkit-border-radius:6px;-moz-border-radius:6px;-khtml-border-radius:6px;border-radius:6px;max-width:50%;
padding:1.5em;
line-height:1.5;
font-size:15px;
}

div.help-popup {
font-size:16px;
margin-top:.75em;
padding-bottom:2em;
left:10%;
max-width:80%;
width:80%;
}

div.help-popup h3 {
margin-top:0;
margin-bottom:-0.5em;
}

div.help-popup h4 {
margin-top:1.5em;
margin-bottom:-0.5em;
font-size:1em;
}

div.help-popup p {
margin-bottom:-.5em;
}

div.help-popup .img-container.right {
margin-top:0;
margin-right:0;
}

li.footnote div.abstract {
display:block;
margin-bottom:.5em;
}

li.footnote blockquote {
margin-top:.5em;
margin-bottom:.5em;
}

div.abstract em.h {
font-style:normal;
font-weight:bold;
color:gray;
font-size:.9em;
}

/* <##>== ↓ TABLES ↓ == */

table {
margin-top:2em;
margin-bottom:2em;
color:#777;
}

table.small {
width:65%;
margin-left:12%;
}

table.medium {
width:88%;
margin-left:6%;
}

table.large {
width:100%;
}

table.x-large {
font-size:.9em;
width:0%;
margin-left:-5%;
}

table th {
color:#555;
text-align:left;
vertical-align:top;
}

table td {
text-align:left;
vertical-align:top;
}

table td.caption {
font-family:Tahoma,Verdana,'Trebuchet MS','URW Gothic L',sans-serif;
color:#666;
border-bottom:2px solid #bbb;
}

/* <##>== ↓ PRICES ↓ == */

.dollarsign {
font-size:.9em;
font-weight:normal;
vertical-align:3px;
margin-right:-1px;
}

.dollars {
font-weight:bold;
}

.dollars.withcents {
font-size:1em;
letter-spacing:-1px;
margin-right:3px;
}

.dollars.withoutcents {
letter-spacing:-1px;
margin-right:2px;
}

.cents, .currency {
color:inherit;
font-size:.8em;
}

.cents {
letter-spacing:-1px;
vertical-align:.25em;
font-weight:normal;
margin-right:.1em;
margin-left:-.1em;
}

.large-price .dollarsign {
font-size:.8em;
vertical-align:.2em;
margin-right:-3px;
}

.large-price .dollars.withcents {
letter-spacing:-3px;
margin-right:5px;
}

.large-price .cents {
font-size:.8em;
color:#888;
vertical-align:0.2em;
text-decoration:underline;
}

.currency {
font-weight:normal;
margin-right:.2em;
font-size:.9em;
color:#555;
}

.pricedash {
color:#555;
margin-left:4px;
margin-right:2px;
}

/* <##>== ↓ MISC ↓ == */

code {
font-family:Helvetica;
padding-bottom:3px;
font-size:.8em;
border-bottom: 1px solid #CCC;
}

input.checkboxwithpara {
float:left;
margin-left:-3em;
margin-top:.75em;
}

.meta h4 {
font-size:1em;
margin-top:0;
}

br.clear {
clear:both;
}

.sy-badge {
display:inline-block;
width:18px;
height:16px;
padding:0 2px 4px 2px;
font-size:14px;
background-color:#CCC;
color:white;
font-weight:bold;
-webkit-border-radius:2px;-moz-border-radius:2px;-khtml-border-radius:2px;border-radius:2px;}

/* END screen css */
}

/* <##>======= ↓ PRINT↓ ======= */

@media print {
* {
background:#FFFFFF;
color:#000;
}

html {
margin:0;
font-size:12pt;
font-family:Georgia, serif;
border:0;
}

body, #content {
margin:0;
padding:0;
}

.hoverwindow, .hoverwincontainer, .closebutton, .no-print, #masthead, #footer, #date, .date, li.footnote a.backref, .localinfo, #toc, .toc, #customer-info-section, #tocbutton, caption, #continue, .pull, #help-showloc, .bt-short-table {
display:none;
}

/* strip common styling from these elements */
.seo, .subtle:link, .subtle:visited, em.highlight, .byline {
font-weight:inherit;
font-style:inherit;
border:0;
text-decoration:none;
color:inherit;
}

h1, h2, h3, h4, h5, p, blockquote, li, .byline {
widows:4;
orphans:4;
}

h3, h4 {
margin-top:3em;
}

table {
color:black;
}

a:link, a:visited {
text-decoration:underline;
}

a.ref:link, a.ref:visited {
text-decoration:none;
font-size:9pt;
vertical-align:2pt;
}

.sidebar {
float:none;
font-size:10pt;
margin:2.5em 1em;
border-top:2px solid black;
border-bottom:2px solid black;
padding:0em 2em;
}

.sidebar h4 {
font-size:12pt;
margin-top:.5em;
}

table.large, table.x-large {
width:100%;
}

.img-container {
text-align:center;
margin-top:2.5em;
margin-bottom:2em;
border:0;
}

.img-container.right, .img-container.left {
float:right;
margin-right:-8%;
_margin-right:-30px;
margin-left:2em;
}

.img-container.center {
margin:1.5em auto 1.5em auto;
padding-right:4%;
/* My body text is not centred but a little bit left of, so my they also need to be pushed a bit to the left. Doesn't work with sidecaps, as these already tend to look left-of-centre. */
}

}

/* END print css */