/*
Theme Name: Colourgarden
Theme URI: http://colourgarden.net
Description: Theme for Colourgarden website. Based on <a href="nathanstaines.com/archive/starkers-html5">Starkers HTML5</a> by <a href="http://nathanstaines.com">Nathan Staines</a>, originally by <a href="http://elliotjaystocks.com/">Elliot Jay Stocks</a>.
Version: 3.0
Author: Tom Hare
Author URI: http://colourgarden.net
Tags: colourgarden, clean, sunset, orange, red, grunge, html5, starkers
*/

/* == CSS Reset
========================================================================================================= */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, hr, a, a img, font, img, dd, dl, dt, li, ol, ul, blockquote, fieldset, form, label, legend, table, caption, tr, th, td{margin: 0; padding: 0; border: 0; line-height: inherit; font-family: inherit; font-size: 100%;}

/* == Typography
========================================================================================================= */
@font-face{font-family: 'Mido'; src: url('fonts/mido.eot'); src: local('?'), url('fonts/mido.woff') format('woff'), url('fonts/mido.ttf') format('truetype'), url('fonts/mido.svg#webfont') format('svg'); font-weight: normal; font-style: normal; font-variant: normal;}
@font-face{font-family: 'Nobile'; src: url('fonts/nobile.eot'); src: local('?'), url('fonts/nobile.woff') format('woff'), url('fonts/nobile.ttf') format('truetype'), url('fonts/nobile.svg#webfont') format('svg'); font-weight: normal; font-style: normal; font-variant: normal;}

h1, h2, h3{display: block; font-family: 'Mido'; font-size: 1.7em; color: #353535; letter-spacing: 0.1em; font-weight: normal;}
h1 a, h2 a , h3 a{color: #353535; text-decoration: none;}
h1 a:hover, h2 a:hover , h3 a:hover{color: #ce7563; text-decoration: none;}
h1{}
h2{}
h3{font-size: 1.4em;}

p{margin: 1.3em 0;}

a, a img{color: #000; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; text-decoration: none;}
a:hover, a:hover img{text-decoration: underline; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease;}
a:hover img{opacity: 0.8;}

ol, ul{list-style: none;}

hr{border: 0; border-top: 1px #d88473 dotted; height: 1px; margin: 2em 0;}

/* Generated by WordPress */
.aligncenter { display:block; margin:0 auto }
.alignleft { float:left }
.alignright { float:right }
.wp-caption { border:1px solid #666; text-align:center; background:#ccc; padding:10px; margin:10px }

.clr{height: 1%;}
.clr:after{content: ".";clear: both;display: block;height: 0;visibility: hidden;}

body{font-family: Nobile, Tahoma, Arial, Sans-Serif; font-size: 100%; line-height: 1.5em; letter-spacing: 0.08em; color: #333; background: url(img/bg.jpg) fixed center center;}

/* == Layout Styles
========================================================================================================= */
#wrap{position: relative; width: 900px; margin: 0 auto 25px auto; padding: 70px 35px 25px; font-size: 0.7em; background: #fff; border-radius: 0 0 0.6em 0.6em; -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.5); -moz-box-shadow: 0 3px 5px rgba(0,0,0,0.5);}

nav#topbar{position: fixed; width: 100%; font-family: Mido; text-align: center; padding: 0.75em 0; top: 0; left: 0; background: rgba(255,255,255,0.9); z-index: 99; -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.5); -moz-box-shadow: 0 3px 5px rgba(0,0,0,0.5);}
	nav#topbar ul li{display: inline; margin: 0 1em;}
	nav#topbar ul li a{color: #666; text-transform: uppercase; text-decoration: none;}
	nav#topbar ul li a:hover{color: #ce7563;}

#content{float: right; width: 900px;}
	section#left{float: left; width: 625px;}
	aside{float: right; width: 240px; font-size: 0.9em; line-height: 2.2em;}
		aside h3{color: #ce7563;}
		aside ul{margin: 0.75em 0 1.75em;}
		aside ul li{list-style: square; margin: 0 2.2em; color: #cf6651;}

		aside ul.social-links{margin-bottom: 2.5em;}
		
#foot{float: left; width: 100%; text-align: center; font-size: 0.9em; border-top: 1px #ce7563 solid; margin-top: 2em; padding-top: 1.5em;}

h1.title{font-size: 2.35em;}
p.tagline{margin: 0 0 2.5em; font-size: 1.3em; font-family: Mido; color: #888; padding: 0 0 0 25px; letter-spacing: 0.1em;}

article{position: relative; margin-bottom: 3em;}
article .wp-post-image{border-radius: 0.6em; -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.5); -moz-box-shadow: 0 2px 3px rgba(0,0,0,0.5); margin: 1.3em 0;}
article footer{padding: 0.5em; border: 1px #666 dotted; border-width: 1px 0; font-size: 0.85em; margin: 2em 0; opacity: 0.5; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease;}
article footer:hover{opacity: 1;}
article footer time{float: right;}
.cat-icon{position: absolute; top: -12px; left: -60px; background: #fff; border-radius: 2em; padding: 0.75em; -webkit-box-shadow: -2px 0 1px rgba(0,0,0,0.3); -moz-box-shadow: -2px 0 1px rgba(0,0,0,0.3);}
.cat-icon .icon{float: left; position: relative;}
.cat-icon .icon:hover{left: 5px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease;}

ul.social-links{margin: 1.5em 0;}
ul.social-links li{list-style: none; margin: 0 1em 0 0; float: left;}

a.icon{display: block; width: 32px; height: 32px; background: url(img/icons-sprite.png) no-repeat 0 -32px #cf6651; border-radius: 2em; margin: 0;}
a.icon:hover{background-color: #d88473; -webkit-transition: all 0.2s ease; -webkit-transform: rotate(360deg); -moz-transition: all 0.2s ease; -moz-transform: rotate(360deg);}
a.icon span{display: none; /* unfortunately can't use text-indent as causes scrollbars on rotation */}
a.link{background-position: -64px -32px;}
a.post{background-position: 0 -32px;}
a.fashion{background-position: 0 -64px;}
a.photo{background-position: -96px -32px;}
a.music{background-position: -32px -32px;}
a.iRss{background-position: 0 0;}
a.iTwitter{background-position: -32px 0;}
a.iLastfm{background-position: -64px 0;}
a.iFacebook{background-position: -96px 0;}

#comments-hold{border-top: 1px #ccc dotted; padding-top: 1.5em;}
#commentform{width: 625px; border-bottom: 1px #ccc dotted; padding-bottom: 1.5em; margin-bottom: 1.5em;}
#commentform p{float: left; width: 200px;}
#commentform p.email{width: 235px;}
#commentform p.website{width: 190px;}
#commentform p.loggedin{float: none; width: auto;}
#commentform input, #commentform textarea{width: 182px; border: 1px #ccc solid; padding: 3px;}
#commentform input:focus, #commentform textarea:focus{border-color: #cf6651;}
#commentform textarea{width: 617px;}
#commentform input#email{width: 217px;}
#commentform button{background: #cf6651; border: 0; padding: 0.5em 0.75em; color: #fff; fon-size: 0.9em; cursor: pointer;}

h3#comments{margin-bottom: 1em;}
article.pingback, article.comment{border: 1px #ccc solid; border-radius: 0.75em; padding: 1em; margin-bottom: 1.5em;}
article.pingback p{color: #3cf;}
article.comment{position: relative; padding-left: 85px;}
article.comment img.avatar{position: absolute; top: 1em; left: 1em;}
article.comment.odd{padding-right: 85px; padding-left: 1em;}
article.comment.odd img.avatar{left: auto; right: 1em;}
article.comment cite a{font-size: 1.6em; font-family: Mido; font-style: normal;}

.twitter-bubble{position: relative;	padding: 1.5em; margin: 2em 0 1.5em 0; color: #fff; font-size: 1.2em;
	border-radius: 1em;
	background: #cf6651;
	background:-webkit-gradient(linear, left top, left bottom, from(#cf6651), to(#d88473));
	background:-moz-linear-gradient(top, #cf6651, #d88473);
	background:-o-linear-gradient(top, #cf6651, #d88473);
}
.twitter-bubble:after {display: block; position: absolute; width: 0; height: 0;
	bottom: -15px; /* value = - border-top-width - border-bottom-width */
	right: 50px;
	border-width: 15px 20px 0 0;
	border-style: solid;
	border-color: #d88473 transparent;
	content: ""; 
}
.twitter-bubble a{color: #ccc;}
.twitter-meta{color: #999; text-align: center; margin-bottom: 2em;}
.twitter-meta a{color: #3cf;}

#back-to-top{position: fixed; top: 50%; right: 15px; cursor: pointer;}