@import url(http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic&subset=latin,latin-ext);

/* Colours */

body, a { color: #222; }
a { border-bottom: 1px solid #ccc; }
#footer em a { border-bottom: none; }
em, nav, #footer em a { color: #999; }
em a, nav a { color: #666; }
em.background, .keywords { color: #bbb; }
.first-letter:first-letter { color: #aeaeae; }

/* Typography */

body, input { font-family: "Helvetica", helvetica, "Helvetica Neue", arial, sans-serif; line-height: 1.3; }
ul li, p, em { font-size: 13px; font-style: normal; }
h1, h2, h3, h4, h5, h6 { font-family: 'Lora', serif; font-size: 15px; font-weight: normal; }
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em, a.atom-rss { font-family: "Helvetica", helvetica, "Helvetica Neue", arial, sans-serif; }
a { text-decoration: none; }
article#content h1 { font-size: 28px; }
#footer { font-family: 'Lora', serif; font-size: 13px; }
#footer em, .keywords { font-family: 'Lora', serif; font-style: italic; }
.first-letter:first-letter { font-family: 'Lora', serif; font-size: 54px; line-height: 48px; }

/* Layout */

article, aside, footer, header, hgroup, main, nav, section { display: block; }
body { background: url('../../images/bg.png') 50% 0; padding: 30px 0px 40px; text-align: center; }
nav ul { list-style: none outside none; margin: 2px 0 0; padding: 0; }
nav li { display: inline; }
nav li a { display: block; float: left;}
nav li:after { content: ','; display: block; float: left;  margin-right: 5px; }
nav li:last-child:after { content: ''; margin-right: 0; }
#container { background: #fff; margin: 0px auto; width: 820px; padding: 20px 30px 40px; text-align: left; overflow: hidden;
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.3);
   -moz-box-shadow: 0 0 10px rgba(0,0,0,.3);
    -ms-box-shadow: 0 0 10px rgba(0,0,0,.3);
     -o-box-shadow: 0 0 10px rgba(0,0,0,.3);
        box-shadow: 0 0 10px rgba(0,0,0,.3);
}

.col { float: left; margin: 0px 0px 0px 20px; padding: 0px; }
.col .col { margin: 0px; }

.one { width: 60px; }
.two { width: 140px; }
.three { width: 220px; }
.four { width: 300px; }
.five { width: 380px; }
.six { width: 460px; }
.seven { width: 540px; }
.eight { width: 620px; }
.nine { width: 700px; }
.ten { width: 780px; }
.eleven { width: 860px; }
.twelve { width: 940px; }

h1 em, h2 em, h3 em, h4 em, h5 em, h6 em { display: block; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { border-bottom: none; }

p, h2 { margin: 0px 0px 5px; }
hr { display: block; clear: both; margin: 0px 0px 30px; padding: 0px; height: 0px; overflow: hidden; visibility: hidden; }
a img { border: 0px; margin-bottom: -4px; }
.col hr { margin: 0px 0px 15px; }

h2 { overflow: hidden; }
input#filter { display: inline; width: auto; padding: 1px 0px; border: 0px; background: #eee; font-size: inherit; color: inherit; }

.two-column { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; }
.first-letter:first-letter { float: left; margin-right: 5px; }

hr.border { border: none; border-top: 1px solid #ccc; float: left; width: 780px; margin: 20px 0 20px 20px; overflow: visible; visibility: visible; position: relative; }
hr.border:before,
hr.border:after { content: ''; display: block; border-top: 1px solid #fff; width: 20px; position: absolute; top: -1px; left: 140px; }
hr.border:after { left: 460px; }
hr.border.double { border-bottom: 1px solid #ccc; padding-top: 3px; }
hr.border.style2:before,
hr.border.style2:after { left: 540px; }
hr.border.style3 { width: 620px; }
hr.border.style3:after { display: none; }

#content ul.project-list,
#content ul.clients-list,
#content ul.clients-images { margin: 0; padding: 0px; list-style: none; width: 640px; }
#content ul.project-list { margin-left: 20px; }
#content ul.clients-list { padding-top: 20px; position: relative; }
#content ul.clients-list:before,
#content ul.clients-list:after { content: ''; border-top: 1px solid #ccc; display: block; width: 300px; position: absolute; top: 0; }
#content ul.clients-list:after { left: 320px; }
#content ul.project-list li,
#content ul.clients-list li,
#content ul.clients-images li { margin: 0px 20px -1px 0px; float: left; }
#content ul.clients-images li { border-bottom: 1px solid #ccc; padding: 20px 20px 20px 0; }
#content ul.clients-images li:nth-child(odd) { margin-right: 0; }
#content ul.clients-images li:nth-child(even) { padding-right: 0; }
#content ul.clients-images li img { display: block; }
#content ul.project-list h2,
#content ul.clients-list h2 { margin: 0 0 5px; }
ul.project-list div.thumbnail a { border: 0px; }
ul.project-list div.summary { margin: 0px 0px 0px 20px; }

#content h1.category,
#content ul.project-list li:nth-child(-n+2) { border-top: 1px solid #ccc; padding-top: 3px; }
#content h1.category:before,
#content ul.project-list li:nth-child(-n+2):before { content: ''; display: block; border-top: 1px solid #ccc; padding-top: 20px; }
#content ul.clients-list li p { margin-bottom: 15px; }

#content section { overflow: hidden; }
#content section:last-child { margin-bottom: -20px; }

h2.title, #content ul.project-list li, div.description, p.para, #images, #media { border-top: 1px solid #ccc; padding: 20px 0px 0px; }
#content ul.project-list li { border-bottom: 1px solid #ccc; padding: 20px 0px; }
#content ul.news-list li { border-top: none; padding: 12px 0px 10px; position: relative; }
/* #content ul.news-list li:nth-last-child(-n+2):after { content: ''; display: block; width: 100%; border-bottom: 1px solid #ccc; position: absolute; bottom: -5px; } */
#content ul.news-list li.title { clear: left; }
#content ul.news-list li h2 { font-size: 13px; line-height: 1.3; margin: 0; }
#content ul.news-list li p { margin: 0; }
#content ul.news-list li p.date { margin-left: 10px; }

#thinking-about .thinking-about,
#content .news-list-container { border-top: 1px solid #ccc; margin-left: 20px; padding: 3px 0 25px; position: relative; }
#thinking-about .thinking-about:before,
#content .news-list-container:before { content: ''; display: block; border-top: 1px solid #ccc; padding-top: 25px; }
#thinking-about .thinking-about:after,
#content .news-list-container:after { content: ''; display: block; background: #fff; width: 20px; height: 5px; position: absolute; top: -1px; left: 300px; }
#thinking-about .thinking-about .thumbnail { margin-bottom: 40px; }
#thinking-about .thinking-about .thumbnail img { max-width: 100%; }
#thinking-about .thinking-about h2 { font-style: italic; margin-bottom: 12px; }
#thinking-about .thinking-about p { margin-bottom: 0; }

#content .news-list-container { padding-bottom: 0; }
#content .news-list-container:before { padding-top: 8px; }
#content .news-list-container .news-list { margin-left: 0; }
#content .news-list-container .news-list li:nth-child(-n+2) { border-top: none; padding-top: 12px; }
#content .news-list-container .news-list li:nth-child(-n+2):before { border-top: none; padding-top: 0; }

#content .pagination { font-size: 13px; text-align: right; }
#content .pagination a,
#content .pagination span { display: inline-block; border: none; margin: 15px 0; padding: 5px; }
#content .pagination a { cursor: pointer; }
#content .pagination .jp-disabled,
#content .pagination .jp-current { color: #bbb; cursor: default; }

#media { overflow: hidden; }
div.media { margin: 0px 0px 10px; }

article header { margin-bottom: 10px; }
article header h1 { margin-top: -5px; margin-left: -2px; }
article .keywords { margin: -15px 0 20px; }
article footer { margin-top: 60px; }

#content div.description { margin: 0px 0px 0px 20px; }
div.description #media { margin: 0px 0px 10px; border: 0px; padding: 0px; }
div.description hr { border: none; border-top: 1px solid #ccc; margin: 20px 0; visibility: visible; }
#content .image { margin-bottom: 10px; }
#content .image:last-child { margin-bottom: 0; }
#content .share_buttons { width: 200px; }
#content .share_buttons .rrssb-buttons.small-format li { width: 27px !important; }
#content .share_buttons .rrssb-buttons.small-format li a .icon svg { height: 50%; }

.contact-form { overflow: hidden;  margin: 0 -12px 0 -18px; }
.contact-form iframe { width: 100% !important; margin-bottom: -39px; overflow: hidden; }
.contact-form a { display: none !important; }

a.atom-rss { margin: 0px 6px; padding: 2px 3px 0px; font-size: 0.93em; letter-spacing: 0.08em; background: #ddd; }