body {color: #656565; font-family: Georgia, Times, serif;}
h1,h2,h3,h4,h5,h6 {color: #343434; font-family: 'Cardo', Palatino, Times, serif;}
header, footer, article, aside, nav, section {display: block;}
a {color: #527ACC;}
strong { font-weight: bolder; }
em { font-style: italic; }

/*all pages*/
#page_wrapper {margin: 0 auto; max-width: 870px; min-height: 560px; padding: 12px 90px 0 28px; position: relative;}
header h1#site_branding a {background:#fff url('https://assets.mealybar.co.uk/img/site/vertical_domain_background.gif') no-repeat top left; display: block; height: 100%; margin: 0; position: absolute; right: 0; text-indent: -9999px; top: 0; width: 90px;}
header h1#site_branding a:hover {background-color: #f1f1f1!important; background-position: -90px 0!important;}
#homeicon {background: transparent url('https://assets.mealybar.co.uk/img/site/home_icon.png') no-repeat top center; display: block; height: 42px; position: absolute; width: 40px;}

nav {border-right: 2px solid #aaa; float: right; font-family: Geneva, Verdana, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-variant: small-caps; margin-top: 6px; position: relative; text-align: right; width: 90px; z-index: 10;}
nav a:link, nav a:visited {color: #999; display: block; padding: 3px 6px; text-decoration: none;}
nav a:focus, nav a:hover {background-color: #f1f1f1; color: #666; text-decoration: underline;}

#elsewhere {background:#fff url('https://assets.mealybar.co.uk/img/site/me.png') no-repeat top right; border-top: 2px solid #aaa; clear: both; min-height: 200px; margin-top: 32px; overflow: auto;}
#elsewhere p {font-family: 'Cardo', Palatino, Times, serif; font-size: 170%; line-height: 1.3; margin: 12px 120px 8px 0;}
#elsewhere section {display: block; float: left; font-size: 90%; margin: 0 2%; width: 38%;}
#elsewhere section h3 {color: #676767; font-family: Palatino, Times, serif; font-weight: bolder; margin-bottom: 4px;}
#elsewhere section ul li {margin: 0 0 4px 8px;}
#elsewhere a:link, #elsewhere a:visited {background: #fff url('https://assets.mealybar.co.uk/img/site/social_sprite.png') no-repeat top left; color: #656565; padding-left: 22px; text-decoration: none;}
#elsewhere a:hover {text-decoration: underline;}
.facebook {/*default*/}
.flickr {background-position: 0 -17px!important;}
.lastfm {background-position: 0 -34px!important;}
.twitter {background-position: 0 -72px!important;}

.mium_icon {background: #fff url('https://assets.mealybar.co.uk/img/site/mium_favicon.png') no-repeat top left!important;}
.mb_icon {background: #fff url('https://assets.mealybar.co.uk/img/site/mb_favicon.png') no-repeat top left!important;}
.psl_icon {background: #fff url('https://assets.mealybar.co.uk/img/site/psl_favicon.png') no-repeat top left!important;}

footer {color: #999; font-size: 70%; padding: 8px 2px; text-align: right;}
footer span {color: #bbb; font-size: 95%;}
footer a:link, footer a:visited {color: #bbb;}

/*homepage*/
#homepage header h1 {font-size: 255%; line-height: 1.2; margin-top: 43px; width: auto;}
#list_posts {float: left; margin: 18px 4% 0 0; padding-bottom: 32px; width: 56%;}
#list_posts ol {border-bottom: 2px solid #eee; margin-top: 3px;}
#list_posts article {border-top: 2px solid #eee; padding: 16px 0 0 0; margin: 0; width: auto;}
#list_posts article h1 {font-size: 170%; margin-top: 0;}
#list_posts article h1 a {color: #343434; text-decoration: none!important;}
#list_posts article h1 a:hover {border-bottom: 1px solid #343434;}
#list_posts article time {font-size: 80%;}
#list_posts article p {font-size: 95%;}
.read_continuation {margin: 8px; text-align: right;}
.secondary_block {border-bottom: 2px solid #eee; float: left; margin: 15px 0 8px 0;}
.secondary_block p:first-child {border-bottom: 2px solid #eee; font-size: 100%; padding-bottom: 3px; line-height: 1.2; margin: 4px 0;}
.secondary_block p {margin: 8px 0; font-size: 95%; line-height: 1.45;}
#list_photos, #list_linked_posts, #fp_about {float: right; width: 39%;}
#list_photos {border-bottom:none;}
#list_photos ol {padding: 8px 0 10px 0;}
#list_photos ol li {display: inline-block; width: 48%;}
#list_photos img {background-color: #fff; border: 1px solid #ccc; margin: 3px; padding: 4px; vertical-align: middle; width: 92%;}
#list_photos img:hover {-moz-transform: scale(1.4); -o-transform: scale(1.4); -webkit-transform: scale(1.4); transform: scale(1.4); position: relative; z-index: 100;}
#list_linked_posts {border-bottom: none; width: 39%;}
#list_linked_posts ol {margin-top: 3px;}
#list_linked_posts article {padding: 12px 0 0 0; margin: 0; width: auto;}
#list_linked_posts article h1 {font-size: 100%; margin-top: 0;}
#list_linked_posts article h1 a {color: #343434; text-decoration: none!important;}
#list_linked_posts article h1 a:hover {border-bottom: 1px solid #343434;}
#list_linked_posts article time {font-size: 70%;}
#list_linked_posts .read_continuation {border-top: 2px solid #eee; margin-top: 8px; padding-top: 8px;}

/*blog archive*/
#blog_archive, #linked_archive {padding: 0; width: 78%;}
#blog_archive h2, #linked_archive h2 {margin: 16px 0 8px 0;}
#blog_archive dl, #linked_archive dl {margin: 0 0 12px 16px; position: relative;}
#blog_archive dl dt, #linked_archive dl dt {left: 0; position: absolute; top: 0;}
#blog_archive dl dd, #linked_archive dl dd {margin-bottom:  3px; padding-left: 85px;}

/*blog post*/
article {margin: 0 1% 32px 0; padding-right: 34%; position: relative; width: 64%; z-index: 5;}
article h1 {font-size: 275%; line-height: 1.2; margin-top: 24px; width: 140%;}
article header p {color: #ccc; font-size: 85%; margin: 0;}
article header time {color: #aaa; font-style: italic;}
article h2, article h3, article h4, article h5, article h6 {font-size: 170%; margin: 28px 0 16px 0;}
article p {line-height: 1.45; margin: 16px 0;}
p#comments {border-top: 2px solid #ddd; color: #aaa; font-size: 75%; margin: 24px 0; padding-top: 6px; text-align: right;}
article ol {list-style: decimal outside none; margin: 16px 0;}
article ol li {line-height: 1.45; list-style: decimal outside none;}
article ul {list-style: disc outside none; margin: 16px 0;}
article ul li {line-height: 1.45; list-style: disc outside none;}
article blockquote {background-color: #f1f1f1; padding: 1px 19px; position: relative;}
article blockquote cite { display: block; font-size: 80%; font-style: italic; margin: 16px 0; position: relative; text-align: right;}
article code {font-family: courier, monspace; font-size: 85%; font-weight: lighter;}
article .article-image {font-size: 85%; text-align: center;}
article .article-image img {border: 1px solid #a0a0a0; display: block; margin: 0 auto; padding: 8px; max-width: 96%;}

article aside {position: absolute; right: 0; top: 92px; width: 32%;}
article aside img {border: 1px solid #ccc; display: block; margin-bottom: 4px; padding: .8%; width: 96%;}
article aside #extra_photos img {display: block; float: left; margin: 0 .5%; width: 29%;}
article aside #extra_photos img:hover {opacity: 0.7;}

/*smaller width version*/
@media handheld and (max-device-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 700px){
	body {-webkit-text-size-adjust: 110%;}
	#page_wrapper {padding: 4px;}
	header h1#site_branding a {background:#fff url('https://assets.mealybar.co.uk/img/site/horizontal_domain_background.gif') no-repeat top left; display: block; height: 50px; margin: 2px 4px; position: relative; right: 0; text-indent: -9999px; top: 0; width: 325px;}
	header h1#site_branding a:hover {background-color: #fff!important; background-position: 0 0!important;}
	nav {border: 0; border-top: 2px solid #aaa; float: none; margin: 0 0 0 4px; padding-top: 3px; text-align: left; width: auto;}
	nav li {display: inline;}
	nav a:link, nav a:visited {display: inline; padding: 3px 6px 3px 0;}
	nav a:hover, nav a:focus {text-decoration: none;}
	#homepage {margin: 0 4px;}
	#homepage header h1 {font-size: 180%; margin-top: 20px;}
	#list_posts, #list_photos, #list_linked_posts, .secondary_block {float: none; margin: 18px 0 0 0; padding: 0; width: auto!important;}
	#list_photos img:hover {-moz-transform: none; -o-transform: none; -webkit-transform: none; transform: none;}
	#elsewhere {background-position: right bottom;}
	#elsewhere section {float: none; margin-top: 12px;}
	#elsewhere p {font-size: 120%; margin-right: 8px;}
	
	#blog_archive {width: auto;}
	
	article {padding: 0; width: auto;}
	article h1 {font-size: 180%; width: auto;}
	article aside {position: relative; right: 0; top: 0;}
	article aside #extra_photos {display: none;}
}

/*iphone4 super image*/
@media (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 700px) and (-webkit-min-device-pixel-ratio: 2){
	header h1#site_branding a {background-image: url('https://assets.mealybar.co.uk/img/site/horizontal_domain_background2x.gif'); background-size: 319px 46px;}
}