/*
Theme Name: Green Tea
Theme URI: http://dbushell.com
Description: Theme for dbushell.com
Author: David Bushell
Version: 1.0
*/
/* ****************************************************************************************************
 * Layout
 */

body,blockquote,div,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,textarea,th,td { margin: 0; padding: 0; }
table { border-collapse:collapse; border-spacing: 0; }
th, td { text-align: left; vertical-align: top; }
fieldset,img {	border: 0; }
ol,ul { list-style: none; }

img { display: block; }

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .clearfix { zoom: 1; }
*:first-child+html .clearfix { zoom: 1; }

body { font-family: Helvetica, Arial, sans-serif; font-size: 12px; background: #eee url('./bodybg.png') repeat; }

.centre { width: 940px; margin: 0 auto; padding: 0 35px; position: relative; }

/* ****************************************************************************************************
 * Typography
 */

@font-face {
	font-family: 'DroidSerif';
	src: url('./droidserif-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'DroidSerif';
	src: url('./droidserif-bold-webfont.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'DroidSerif';
	src: url('./droidserif-bolditalic-webfont.woff') format('woff');
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: 'DroidSerif';
	src: url('./droidserif-italic-webfont.woff') format('woff');
	font-weight: normal;
	font-style: italic;
}


@font-face {
	font-family: 'LeagueGothic';
	src: url('./league_gothic-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

h1, h2, h3, h4 { font-family: DroidSerif, Georgia, sans-serif; color: #47494a; margin: 0 0 15px 0; }

h1, h1 a { text-decoration: none; color: #47494a; font-size: 36px; letter-spacing: -1px; font-weight: bold; line-height: 38px; }
h1 a:hover { color: #7fd269; }

h2, h2 a { text-decoration: none; font-family: LeagueGothic, "Arial Narrow", Arial, sans-serif; letter-spacing: 1px; color: #5e6162; font-size: 32px; line-height: 32px; text-transform: uppercase; font-weight: normal; }
h2 a:hover { color: #7fd269; }

h3, h3 a { color: #47494a; font-size: 22px; line-height: 26px; }
h4, h4 a { color: #47494a; font-size: 14px; line-height: 16px; }
h3 a:hover, h4 a:hover { color: #7fd269; }

p { font-family: DroidSerif, Georgia, sans-serif; color: #47494a; font-size: 14px; line-height: 24px; margin: 0 0 15px 0; }
.large { font-size: 16px; }
.medium { font-size: 12px; color: #777a7b; line-height: 16px; }
.small { font-size: 11px; color: #abaeb0; font-family: Helvetica, Arial, sans-serif; }

p.intro { font-size: 36px; letter-spacing: -1px; line-height: 38px; }
blockquote p { color: #777a7b; font-style: italic; font-size: 13px; line-height: 20px; background: url('./quote.png') 10px 15px no-repeat; padding: 15px 40px 10px 50px; }
abbr.date { color: #919495; font-size: 12px; border: none; }

a { color: #4db930; }
a:hover { color: #2994CB; -webkit-transition: color .1s linear; }

.uni { font-family: Helvetica, Arial, sans-serif; margin: 0 5px 0 0; color: #a3a4a6; }

#page .posts h3 { padding: 10px 0 0 0; }
#page .posts article ul { list-style-type: disc; list-style-position: outside; padding: 0; margin: 25px 0 25px 20px; }
#page .posts article ul li { margin: 0 0 10px 20px; font-family: DroidSerif, Georgia, sans-serif; color: #47494a; font-size: 14px; line-height: 24px; }

footer p { font-size: 12px; color: #777a7b; line-height: 16px; }

p.code { font-family: "Courier New", Courier, monospace; font-size: 12px; line-height: 20px; background: #f2f2f2; padding: 10px 40px 10px 50px; }

.c1 { width: 300px; }
.c2 { width: 620px; }
.left { float: left; }
.right { float: right; }

/* ****************************************************************************************************
 * Header & Navigation
 */

header { display: block; width: 100%; min-width: 1010px; height: 270px; position: relative; background: #fff url('./headbg.jpg') center top repeat-x; }
header .centre { height: 100%; background: url('./header.jpg') center top no-repeat; }

#logo { position: absolute; z-index: 10; top: 0; left: 375px; display: block; width: 260px; height: 270px; overflow: none; }
#svglogo { width: 260px; height: 270px; overflow: hidden; border: 0; }

nav { display: block; position: absolute; z-index: 5; left: 35px; top: 166px; width: 940px; padding: 0 0 10px 0; border-bottom: 1px dashed #ddd; }
nav li { float: left; display: block; height: 24px; }
nav li.border { width: 1px; border-right: 1px solid #fff; background: #b9bcbd; margin: 0 10px; }
nav a { display: block; line-height: 16px;  padding: 5px 8px; margin: 0 2px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; color: #919495; text-shadow: 1px 1px 2px #fff; text-decoration: none; }
nav a:hover { color: #4db930; }
nav li.small a { font-size: 12px; }
nav .selected a, nav .current_page_item a { color: #fff; text-shadow: 1px 1px 2px #797b7c;
	background-color: #b9bcbd;
	background: -webkit-gradient(linear, left bottom, left top, color-stop(1, rgb(186,189,190)), color-stop(0, rgb(199,201,202)));
	background: -moz-linear-gradient(center bottom, rgb(186,189,190) 100%, rgb(199,201,202) 0%);
	-moz-box-shadow: inset 1px 1px 2px #9da0a1;
	border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }

/* ****************************************************************************************************
 * Page
 */

#page { background: #fff; padding: 20px 0 40px 0; min-height: 200px; width: 100%; min-width: 1010px; }
#home { border-bottom: 1px dashed #ddd; min-height: 290px; _height: 290px; }
#crane { position: absolute; z-index: 5; top: -70px; right: 35px; }
#introduction { position: relative; z-index: 20; padding: 0; }
#introduction .intro { position: relative; top: -5px; margin: 0 0 20px 0; }
#introduction p.large { width: 620px; }

#featured { background: #fff; padding: 30px 0 30px 0; position: relative; }
#featured section { float: left; width: 300px; margin: 0 20px 0 0; }
#featured .c3 { margin: 0; }
#featured .c3 img { float: left; }
#featured .c3 p { margin: 0 0 0 25px; }
#featured h2 {  display: block; padding: 0 0 15px 0; border-bottom: 1px solid #e2e6e7; margin: 0 0 2px 0; background: url('./arrow.png') left 10px no-repeat; }
#featured h2 a { background: #fff; padding: 0 10px 0 0; }
#featured article { display: block; padding: 7px 0 5px 0; border-bottom: 1px solid #e2e6e7; }
#featured article p { line-height: 16px; margin: 0; }
#featured article a { color: #797b7c; text-decoration: none; display: block; height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 300px; }
#featured article a:hover { color: #4db930; }
#featured article .small { line-height: 15px; }

#featured #carbonads-container { margin: 10px 0; height: 120px; width: 302px; overflow: hidden; background: #f5f5f5; }

#featured-flattr { position: absolute; left: 35px; top: 9px; z-index: 100; }

.field { outline: none; color: #797b7c; font-family: DroidSerif, Georgia, serif; font-size: 12px; line-height: 16px; height: 16px; padding: 6px 8px; font-style: italic;
	 border: 1px solid #d5d5d5; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.field:focus { color: #47494a; text-indent: 20px; background: #fff url('./field.png') 3px 6px no-repeat; border: 1px solid #7fd269;
	box-shadow: 1px 1px 4px #ddd; -webkit-box-shadow: 1px 1px 4px #ddd; -moz-box-shadow: 1px 1px 4px #ddd; }

.textarea { outline: none; color: #797b7c; font-family: DroidSerif, Georgia, serif; font-size: 12px; line-height: 16px; padding: 6px 8px; font-style: italic;
	 border: 1px solid #d5d5d5; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.textarea:focus { color: #47494a; border: 1px solid #7fd269;
	box-shadow: 1px 1px 4px #ddd; -webkit-box-shadow: 1px 1px 4px #ddd; -moz-box-shadow: 1px 1px 4px #ddd; }

.button { cursor: pointer; padding: 7px 20px; border: 1px solid #b5b6b8; outline: none; background-color: #7cd564; color: #fff; font-size: 14px; font-weight: bold; text-shadow: 1px 1px 2px #006400; font-family: Helvetica, Arial, sans-serif; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;
	background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(124,213,100)), color-stop(1, rgb(153,237,131))); -moz-linear-gradient( center bottom, rgb(124,213,100) 0%, rgb(153,237,131) 100%);
	box-shadow: 1px 1px 6px #ccc; -webkit-box-shadow: 1px 1px 6px #ccc; -moz-box-shadow: 1px 1px 6px #ccc; }

#page .t-home { -webkit-text-size-adjust: none; }

#page .posts { width: 620px; float: left; margin: 0; }
#page .posts article { display: block; margin: 0 0 30px 0; }
#page .posts article abbr.date { position: relative; top: -10px; display: block; }
#page .posts .tweetit { height: 20px; margin: 0 0 15px 0; }
#nextprev { width: 940px; float: left; margin: 0; border-top: 1px dashed #ddd; padding: 15px 0 0 0; }
#nextprev a { color: #919495; }
#nextprev a:hover { color: #4db930; }
#nextpost { float: right; background: url('./smallarrow.png') right top no-repeat; padding: 0 35px 0 0; }
#prevpost { float: left; background: url('./smallarrow.png') left bottom no-repeat; padding: 0 0 0 35px; }

.t-blog .centre { margin-bottom: 20px; }
.t-blog .mainarea { display: block; border-bottom: 1px dashed #ddd; margin: 0; }

.t-single .centre { margin-bottom: 20px; }
.t-single .mainarea { display: block; border-bottom: 1px dashed #ddd; margin: 0; }

/* .t-single .entry p:first-of-type::first-line { font-variant: small-caps; } */

#page aside { display: block; width: 300px; float: right; }
#page aside #tweets li { background: url('./tweetbg.png') left bottom no-repeat; display: block; border-top: 1px solid #d9dadc; /*border-bottom: 0;*/ margin: 5px 10px 0 10px; padding: 10px 10px 25px 10px; color: #777a7b; font-size: 12px; font-style: italic; line-height: 16px; font-family: DroidSerif, Georgia, serif; }
#page aside #tweets a { color: #abaeb0; }
#page aside #tweets a:hover { color: #4db930; }
#page aside #tweets .aktt_more_updates { background: none; border: none; }
#page aside .twitterlink { padding: 12px 10px 8px 30px; background: url('./ico-twitter.png') 10px 16px no-repeat; }
#page aside .rsslink { padding: 12px 10px 5px 10px; }

#page aside #carbonads-container { margin: 10px 0; height: 120px; width: 302px; overflow: hidden; background: #f5f5f5; }

.t-page .mainarea { display: block; border-bottom: 1px dashed #ddd; margin: 0; }

.t-showcase .centre { margin-bottom: 20px; }
.t-showcase .mainarea { display: block; border-bottom: 1px dashed #ddd; margin: 0; margin-bottom: 30px; padding-bottom: 20px; }
.t-showcase .posts article { min-height: 500px; }
.t-showcase img { float: right; clear: right; margin: 0 0 15px 0; border: 5px solid #fff; box-shadow: 0px 0px 10px #ccc; -webkit-box-shadow: 0px 0px 10px #ccc; -moz-box-shadow: 0px 0px 10px #ccc; }
.t-showcase .description { float: left; width: 360px; }

.t-portfolio .centre { margin-bottom: 20px; }
.t-portfolio .content { width: 960px; position: relative; left: -10px; }
.t-portfolio .portfolio-thumb { display: block; float: left; width: 290px; height: 200px; padding: 15px; background: url('./portfolio.png') no-repeat; }
.t-portfolio .portfolio-thumb a { position: relative; display: block; width: 290px; height: 190px; overflow: hidden; }
.t-portfolio .portfolio-thumb a:hover img { position: relative; top: -190px; }

.t-portfolio #carbonads-container { position: absolute; top: 240px; right: 10px; height: 120px; width: 302px; overflow: hidden; background: #f5f5f5; }

#page #carbonads-container.inheader { position: absolute; right: 0; top: -280px; height: 120px; width: 302px; overflow: hidden; background: #f5f5f5; }

/* ****************************************************************************************************
 * Footer
 */

#comments { width: 940px; margin: 0 0 30px 0; border-bottom: 1px dashed #bbb; }
#comments .comment { width: 620px; margin: 0 0 20px 0; position: relative; }
#comments .message { color: #777a7b; font-style: italic; font-size: 13px; line-height: 20px; }
#comments .message p { margin: 0 0 10px 0; }
#comments abbr.date { display: block; }
#comments h4 { margin: 0 0 10px 0; }

#search { position: relative; z-index: 30; top: -49px; background: url('./searchbg.jpg') center top no-repeat; height: 100px; }
#search form { width: 460px; position: relative; margin: 0 auto; }
#search .field { position: absolute; left: 141px; top: 4px; width: 147px; padding-right: 26px; }
#search .submit { cursor: pointer; position: absolute; left: 297px; top: 9px; outline: none; border: 0; background: url('./search.png') left top; height: 20px; width: 22px; }
#search .submit:hover { background-position: left bottom; }

footer { display: block; position: relative; width: 100%; min-width: 1010px; }
footer .content { position: relative; z-index: 35px; margin-top: -59px; padding: 0 0 40px 0; }
#contactform .field { width: 280px; margin: 0 0 5px 0; }
#contactform .details { float: left; width: 300px; margin: 0 20px 15px 0; }
#contactform .details2 { float: left; width: 620px; }
#contactform .details p { margin: 10px 0 0 0; }
#contactform .textarea { width: 600px; height: 86px; float: left; margin: 0 0 15px 0; resize: none; }
#contactform .button { float: left; margin-left: 0; }
#contactform-recaptcha { width: 620px; float: right; }
#contactform .error { font-weight: bold; color: #f93d4a; }
#contactform .error2 { width: 620px; display: block; float: right; font-weight: bold; color: #f93d4a; }
#recaptcha_area { margin: 0 0 15px 0; }
#contactform .placeholder { color: #abaeb0; }

footer .signoff { margin-top: 20px; }
footer .signoff p { padding-top: 20px; border-top: 1px dashed #bbb; }
footer .signoff p, footer .signoff a { color: #abaeb0; }

/* ****************************************************************************************************
 * About
 *
 */

.t-about .centre { margin-bottom: 20px; }

#timeline { width: 940px; height: 140px; margin: 15px 0 0 0; position: relative; border-top: 1px dashed #bbb; background: url('./timeline.png') center 75px no-repeat; }
#timeline .year { display: block; width: 50px; height: 60px; position: absolute; top: 36px; cursor: pointer; background: url('./yeartabs.png') 0 0 no-repeat; }
#timeline #y1987 { left: -10px; background-position: 0 -420px; }
#timeline #y1994 { left: 200px; background-position: 0 -350px; }
#timeline #y2003 { left: 470px; background-position: 0 -280px; }
#timeline #y2005 { left: 530px; background-position: 0 -210px; }
#timeline #y2008 { left: 620px; background-position: 0 -140px; }
#timeline #y2010 { left: 680px; background-position: 0 -70px; }
#timeline #y2017 { left: 900px; background-position: 0 0; }

#timeline #y1987:hover { left: -10px; background-position: -110px -420px; }
#timeline #y1994:hover { left: 200px; background-position: -110px -350px; }
#timeline #y2003:hover { left: 470px; background-position: -110px -280px; }
#timeline #y2005:hover { left: 530px; background-position: -110px -210px; }
#timeline #y2008:hover { left: 620px; background-position: -110px -140px; }
#timeline #y2010:hover { left: 680px; background-position: -110px -70px; }
#timeline #y2017:hover { left: 900px; background-position: -110px 0; }

#timeline #y1987.selected { left: -10px; background-position: -50px -420px; }
#timeline #y1994.selected { left: 200px; background-position: -50px -350px; }
#timeline #y2003.selected { left: 470px; background-position: -50px -280px; }
#timeline #y2005.selected { left: 530px; background-position: -50px -210px; }
#timeline #y2008.selected { left: 620px; background-position: -50px -140px; }
#timeline #y2010.selected { left: 680px; background-position: -50px -70px; }
#timeline #y2017.selected { left: 900px; background-position: -50px 0; }

#timeline-events { position: relative; width: 940px; height: 65px; overflow: hidden; padding: 0 0 15px 0; border-bottom: 1px dashed #bbb; margin: 0 0 20px 0; }
#timeline-events .events { background: #fff url('./events123.png') 0 0 no-repeat; height: 58px; padding: 2px 0 0 0; position: absolute; top: 0; left: 0;  }
#timeline-events .event { width: 260px; padding: 0 0 0 40px; float: left; margin-right: 20px; font-size: 12px; line-height: 16px; }
#timeline-events .e3 { margin-right: 0; }

#me-statistics { width: 620px; float: left; }
#me-appearance { position: relative; width: 300px; float: right; height: 362px; }
#me-photo { position: absolute; top: 42px; left: -10px; }
#me-caption { position: absolute; line-height: 14px; top: 312px; left: 15px; width: 270px; }

/* ****************************************************************************************************
 * Media Queries
 * (first reset the whole page to a fluid width layout)
 *
 */

@media all and (min-width: 1px)
{
	#b-multi header { min-width: 700px; }
	#b-multi header .centre { width: auto; max-width: 1300px; }
	#b-multi header nav { width: auto; position: relative; left: auto; height: 24px; }
	#b-multi #logo { left: 50%; margin-left: -130px; }

	#b-multi #page { min-width: 700px; }
	#b-multi #page .centre { width: auto; max-width: 1300px; }

	#b-multi #page .posts { width: auto; margin-right: 320px; min-height: 500px; }
	#b-multi #page #nextprev { width: 100%; }
	#b-multi #page aside { position: absolute; top: 0; right: 35px; }

	#b-multi footer { min-width: 700px; }
	#b-multi footer #search { z-index: 25; }
	#b-multi footer .content { z-index: 50; }
	#b-multi footer .centre { width: auto; max-width: 940px; }
	#b-multi footer #comments { width: auto; }
	#b-multi footer #comments .comment { width: 100%; max-width: 620px; }
}

@media all and (max-width: 850px)
{
	#b-multi #page .posts { margin-right: 0; }
	#b-multi #page aside { float: left; position: relative; right: auto; top: auto; width: auto; border-top: 1px dashed #ddd; }
	#b-multi #page aside li { width: 260px; float: left; min-height: 50px; }
	#b-multi #page .rsslink { padding: 20px 0 0 0; }
	#b-multi #page .twitterlink { padding: 5px 0 0 0; }
}

@media all and (min-width: 1100px)
{
	#b-multi #page .posts .content {
		-moz-column-count: 2; -moz-column-gap: 30px;
		-webkit-column-count: 2; -webkit-column-gap: 30px;
		column-count: 2; column-gap: 30px;
	}
	#b-multi #page .posts .content h3 { -webkit-column-break-after: avoid; -moz-column-break-after: avoid; }

	#b-multi #page .posts img { width: 100%; height: auto; position: relative; }
	#b-multi #page .posts .content p { vertical-align: baseline; }
}

@media all and (max-device-width: 670px)
{
	#b-multi header { width: 100%; min-width: auto; max-width: 600px; }
	#b-multi #page { width: 100%; min-width: auto; max-width: 600px; }
	#b-multi footer { width: 100%; min-width: auto; max-width: 600px; }

	#b-multi #page .posts { margin-right: 0; }
	#b-multi #page aside { float: left; position: relative; right: auto; top: auto; width: auto; border-top: 1px dashed #ddd; }
	#b-multi #page aside li { width: 260px; float: left; min-height: 50px; }
	#b-multi #page .twitterlink { padding: 20px 0 0 0; }
}

/* ****************************************************************************************************
 * Other Stuff
 *
 */

/*
#thecssawards{ position:absolute; top:20px; right:0px; z-index:555; }
#thecssawards a{ width:69px; height:105px; text-indent:-8000px; display:block; background:url('./award_day_white.png') no-repeat; }
*/