<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">  /**
 * Web Developer Blog
 * @author Richard Hodgson &lt;richard.hodgson@bbc.co.uk&gt;
 * 
 * TODO work out where this is going to be minified
 * TODO organise comment &amp; user styles from end of this doc into structure.
 * TODO remove / decide what to do with social bookmarking bar links  
 * 
 * Rules organised into following groups:
 * fixes &amp; resets
 * position &amp; dimensions
 * backgrounds &amp; colours
 * typography
 * pretty print styles
 * 
 */

/* fixes &amp; resets */
.meta {
    /* cater for the clear-float divs that were removed from the default templates */
    overflow:auto;
    zoom:1;
    /* stuff we don't need */
    padding:0;
    border: none;
}

.post,
.block,
.block .wrap1,
.block .wrap2,
.block .wrap3,
.block-one .title,
.block-two .title,
.blqx-bookmark ul li {
    background: none;
    padding:0;
    width:auto;
    margin:0;
}

.post h2,
.post h2 a,
.post h1,
.post h1 a,
.meta,
.post_content {
    margin:0;
}

.entry_navigation, .blqx-bookmark, .navigation, .content-nav {
    display:none;
}

.block .title {
    border: none;
}

/* we want the Jump To More content link to work, some make
   this *appear* invisible.
*/
.related h2, #explore h2 {
	overflow: hidden;
	height:1px;
        margin:0;
}

/* position &amp; dimensions */
#content {
    padding-top:14px;
}

.banner {
    /* 96px tall */
    height: 66px;
    padding: 34px 0 0 28px;
    margin:0;
}

.subtitle {
    position:absolute;
    top:76px;
    left:32px;
}

.main {
    padding-top:8px;
}

.block,
.grids .unit {
    padding-bottom:8px;
    display:block;
}

.post, .content-left {
    /* 8 cols = (66 * 8) + (14 * 7)) = 626 */
    width: 626px;
}

.post {
    position:relative;
}

.content-left {
    padding-bottom:8px;
}

.block .wrap1,
.black .unit .title
{
    padding-top:8px;
}

.post h2 a,
.post h1 a {
    padding-top: 5px;
    display:block;
	padding-right: 126px;
}

.post h2 a,
.post h1 a,
.meta,
.post_content {
    padding-left:120px;
} 

.meta {
    padding-top:7px;
}
.meta, .post_content {
    padding-right: 14px;
}

.author {
    display:block;
}

.id-avatar {
    position:absolute;
    left:19px;
    top:7px;
}

.post_content ul li {
   padding:0;
}

.sidebar {
    margin-top:-8px;
}

.block,
.block .wrap1,
.block .wrap2,
.block .wrap3 {
    /* 4 cols = (66 * 4) + (14 * 3)) = 306 */
    width: 306px;
}

.grids .unit {
    /* 3 cols = (66 * 3) + (14 * 2)) = 226 */
    width: 226px;
}

.block {
    margin-bottom:14px;
}

.block h3 {
    padding-left: 14px;
    padding-top:2px;
}

.post pre {
    padding:14px;
    margin-bottom:14px;
	overflow:auto;
	width: 460px;
}

.content-left li {
    padding-left:14px;
}

.blqx-bookmark {
    
}

.post_content {
    padding-bottom: 1em;
    padding-top: 35px;
}

.frame {
    display:block;
    position:absolute;
    height:90px;
    left:-3px;
    top:-3px;
    width:90px;
}

.meta p {
	margin:0;
	line-height:1.3;
	padding:0;
}

/* '.flt-r a' will match a 'Comments' anchor */
.flt-r a {
	right:14px;
	top: 7px;
	padding-left:20px;
}

.flt-r a {
    position:absolute;
}

.categories {
    clear:left;
	margin:0;
}

.published {
	right:10px;
	position: relative;
	float:right;
	margin:0;
}

.post .published {
	top: -14px;
}

.short-entry .published {
    top:-11px;
}

.post .flt-r a {
	height: 15px;
}

.short-entry {
    display:block;
    padding-top:10px;
    min-height: 90px;
}

.short-entry a {
    display:block;
}

.archive-list {
    padding-left:106px;
}

.archive-list li {
    padding-bottom:14px;
}

.jump {
	position:absolute;
	/*
	position:absolute;
	top:70px;
	width: 306px;
	*/
	margin-top: 9.8em;
}

.jump a {
	padding: 0 0 0 20px;
	margin-left: 14px;
}

.twitter-link {
	display: block;
	padding: 0 0 0 20px;
	margin-top: 20px;
	margin-left: 4px;
	margin-bottom: 10px;
}

#explore {
	padding-left:14px;
}

/* backgrounds &amp; colours */
#blq-content {
    background: url(/staticarchive/6102043d7d80334f76884a74dc9ed103e60cea21.png) 0 -34px repeat-x #edecec;
}

.banner {
    background: url(/staticarchive/f3ddaef6b6d0ddeaa6b033c5f21b3afa956a784d.png) no-repeat;
}

.banner,
.black .banner a,
.black .banner a:link,
.black .banner a:visited,
.black .banner a:active {
    color:#fff;
}

.black .banner a:hover {
    color:#eee;
}

.subtitle {
    color:#ccc;
}

.content-left {
    background-position: left bottom;
}
.post h2 {
    /* ie6 */
    zoom:1;
}

.main {
    background-position: -1690px 0;
}

.black .post h2 a:link,
.black .post h2 a:visited,
.black .post h2 a,
.black .post h1 a:link,
.black .post h1 a:visited,
.black .post h1 a,
.block h3,
.unit .title h3 {
    color: #333;
}

.black .post h1 a:hover,
.black .post h2 a:hover {
    color: #444;
}

h2 a,
h1 a,
.post div,
.content-left ul
{
    background: #fff;
}

.black .published {
    color: #999;
}

.post_content p {
    color: #666;
}

.block {
    background-position:-932px bottom;
}


.content-left,
.main,
.block,
.block .wrap1,
.content .grids .unit,
.related .unit h3,
.black .unit .title {
    background-image: url(/staticarchive/00551f63ebdb92a052e0f804a67f0bd49d245a15.png);
    background-repeat:no-repeat;
}

.content .grids .unit {
    background-position: -1464px bottom;
    background-color: transparent;
    border:none;
}

.block-one .title,
.unit h3 {
    background: url(/staticarchive/6102043d7d80334f76884a74dc9ed103e60cea21.png) repeat-x;
}

.block .wrap1 {
    background-position:-626px 0;
}

.black .unit .title,
.related .unit h3 {
    background-position:-1238px 0;
}

.block .wrap2,
.unit .inner {
    background: #fff;
}

.black .meta .author a:link,
.black .meta .author a:visited,
.black .categories a:link,
.black .categories a:visited,
.black .flt-r a:link,
.black .flt-r a:visited,
.black .post_content a:link,
.black .post_content a:visited,
.rss p.rss_link a:visited,
.rss p.rss_link a:link,
.rss p.rss_link a,
.black .main a,
.black .main a:link,
.black .main a:visited,
.black .rss p.rss_link a,
.black .rss p.rss_link a:link,
.black .rss p.rss_link a:visited,
.black .rss p.rss_link a:focus,
.black .rss p.rss_link a:active,
.black .block .inner p a,
.black .block .inner p a:link,
.black .block .inner p a:visited,
.black .block .inner p a:focus,
.black .block .inner p a:active,
.black .block-one .inner a,
.black .block-one .inner a:link,
.black .block-one .inner a:visited,
.black .block-one .inner a:focus,
.black .block-one .inner a:active {
    color: #0195bb;
}

.black .meta .author a:hover,
.black .categories a:hover,
.black .flt-r a:hover,
.black .post_content a:hover,
.rss p.rss_link a:hover,
.black .rss p.rss_link a:hover,
.black .block .inner p a:hover,
.black .main a:hover {
    color: #34aac8;
}

.black .flt-r a,
.black .flt-r a:visited,
.black .flt-r a:link {
    background:url(/staticarchive/242840211c8cb260df9f9d6799fec3721dbec499.png) no-repeat 0 1px;
}

.black .jump a:visited,
.black .jump a:link {
	/*color: #ccc;*/
	background: url(/staticarchive/b90dfe909c84cc8fb21ec613babed5d1fec20b50.png) no-repeat 0 1px;
}

.twitter-link {
	background: url(/staticarchive/f66e5670790778d472f3345da16cec111210c1f3.png) no-repeat 0 3px;
}


.post pre {
    background: #fefbcd;
}

.black .blqx-bookmark ul li a:link {
    color:#666;
    background-image:url(/staticarchive/f0378d7cce7ceedc3e65aa1ace65abc69ed6afa5.gif);
    background-repeat:no-repeat;
}

.blqx-bookmark li.blqx-digg a {
    background-position:0 -27px;
}

.blqx-bookmark li.blqx-reddit a {
    background-position:0 -52px;
}

.blqx-bookmark li.blqx-stumble a {
    background-position:0 -79px;
}

.blqx-bookmark li.blqx-facebook a {
    background-position:0 -106px;
}

.frame {
    background: transparent url(/staticarchive/b5a27e43d210123ac2ca16fad447e7de4bace04d.png) no-repeat scroll 0 0;
}

#explore {
    background: #edecec;
}

/* typography */
.banner,
h1,
h2,
h3,
.author a,
.unit h3 {
    font-family: "Arial";
    font-weight:bold;
}

.banner {
    font-size: 3em;
    font-weight:bold;
}

.banner a {
    font-weight:bold;
}

.subtitle {
    font-size:1.1em;
    font-weight:normal;
}

.jump {
    font-size:1em;
    font-weight:normal;
}

#content .post h2,
#content .post h1 {
    font-size: 2em;
}

.author a {
    font-size: 1.2em;
    font-weight: bold;
}

.flt-r a,
.categories,
.published {
    font-size: 0.9em;
}

.flt-r a {
    font-weight:bold;
}

.post pre {
    font-family: "Monaco", "Courier New", "Courier", monospace;
    font-size:1em;
}

.post code {
    font-size:1.1em;
}

.post_content p,
.post_content pre {
    line-height:1.5em;
}

.block h3,
.unit .title h3 {
    font-size: 1.4em;
}

.blqx-bookmark ul li {
    font-size:0.8em;
    list-style:none outside;
}

.short-entry a {
    font-weight:normal;
    font-size:1em;
}

.archive-list li {
    line-height:1;
}

.tags a {
    text-transform:capitalize;
}

/* IE hackery */
.post h1 {
    zoom:1
}

.ie h2 a {
	/* fixes the bottom of g's etc being cut off */
	padding-bottom:1px;
}

.ie .content-left,
.black .ie .main,
.ie .block .wrap1,
.ie .block,
.ie .content .grids .unit,
.ie .related .unit h3,
.black .ie .unit .title {
    background-image:url(/staticarchive/6764283a2a3fa3332de20316f85c06b31e2234b9.png);
}

.ie .main {
    height:100%;
}

.ie pre {
    height:1%;
}

.ie .frame {
    background: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.bbc.co.uk/blogs/webdeveloper//staticarchive/b5a27e43d210123ac2ca16fad447e7de4bace04d.png', sizingMethod='crop');
}

.ie .post_content {
    padding-top:2em;
}

.ie .short-entry {
    height: 90px;
}

/* hasLayout issues, so position absolute the child instead */

.ie .jump {
	text-align: left;
	top:0;
	padding:0;
	margin:0;
	position:relative;
	line-height: 1.1;
}
.ie .jump a {
	top:10em;
	/*right: 0px;*/
	position:absolute;
}
.ie .sidebar {
	
}

/*TODO sort */
#comments {
    margin:0;
    padding-left:120px;
    padding-right:20px;
    overflow:auto;
}

.black #comments h3 {
    background: none;
    color:#333;
    padding:0;
    font-size:1.4em;
    font-weight:normal;
    
}

.black #comments h3 a {
    color:#0195bb;
    background:none;
}

#comments .collections li {
    border-bottom:none;
    padding:8px 0;
}

#comments p.flag {
    margin-bottom:0;
}

#dna-commentbox-text {
    border:1px solid #bbb;
    font-family:verdana,helvetica,arial,sans-serif;
    font-size:1em;
    padding:3px;
    width:470px;
}
.content-image-opposite, .pull-quote-opposite {
    float:right;
    margin: 10px 0 10px 10px;
}

.pull-quote-opposite {
    width:150px;
}

blockquote, .snippet-highlight {
    padding: 10px;
    background-color: #efefef;
}

.related .unit {
}

.related .grids h3 a,
.related .grids h3 a:visited,
.related .grids h3 a:link,
.related h3 a:link {
    display:block;
    padding-top:2px;
    padding-bottom:2px;
    padding-left:10px;
    padding-right:10px;
    margin-bottom:0;
    background:#fff;
}

.related h3 {
    padding-top:8px;
    margin:0;
}


.related .meta {
    background:#fff;
    border:none;
    text-indent:-2000px;
    
}

.related .meta,
.related .unit p {
    padding-left:10px;
    padding-right:10px;
}

.related .meta .vcard {
    float:left;
    text-indent:0;
}

.related .meta .vcard a {
}

.related .unit p {
    margin:0;
    background: #fff;
}

.related .unit p strong a {
    margin:0;
    color: #0195BB;
    font-size:0.8em;
}

a:hover,
a:active,
.post h1 a:hover,
.post h2 a:hover,
.related h4 a:hover,
.related h3 a:hover,
.comments h3 a:hover,
.search_entry_left h2 a:hover
{text-decoration:none;}


/* Pretty printing styles. Used with prettify.js. */
.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
</pre></body></html>