/*
Title:      Mark Wallis v5 screen styles (The fluid, responsive edition)
Author:     mark@markwallis.ie
*/

/* reset styles 
--------------------------------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	border: 0;
	outline: 0;
	background: transparent;
}

figure {
	margin: 0;
	padding: 0;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* -Basic Styles
--------------------------------------------- */

body {
	background: #fff url(/img/bg.png);
	border-top: 5px solid #e2e2e2;
	color: #777;
	font: normal 62.5% "ff-tisa-web-pro-1","ff-tisa-web-pro-2", Georgia, serif;
}

h1, h2 {
	color: #777;
}

section header h1 {
	margin-bottom: 30px;
}

article header h1 {
	margin-bottom: 15px;
}

p, ul, ol {
	font-size: 1.4em;   /* 14px */
	line-height: 1.6em;
	margin-bottom: 1.5em;
}

article, aside, figure, figcaption, footer, header,
hgroup, nav, section {
	display:block;
}

a {
	color: #777;
	text-decoration: none;
	
	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}

a:hover {
	border-bottom: 1px dotted #CCC;
}

input, textarea {
	font-family: Georgia;
	font-size: 1em;
}

/* -Fonts
--------------------------------------------- */

/*
"ff-dagny-web-pro-1","ff-dagny-web-pro-2"
"ff-tisa-web-pro-1","ff-tisa-web-pro-2"
*/


#site p {
	font: normal 1.8em/1.5em "ff-tisa-web-pro-1","ff-tisa-web-pro-2", Georgia, serif;
}

.feat h2 {
	font: normal 1.8em/1 "ff-tisa-web-pro-1","ff-tisa-web-pro-2", Georgia, serif;
}

.feat h3 {
	color: #999;
	font: normal 1.4em/1 "ff-tisa-web-pro-1","ff-tisa-web-pro-2", Georgia, serif;
	font-style: italic;
}

section header h1 {
	font: normal 1.8em/1 "ff-tisa-web-pro-1","ff-tisa-web-pro-2", Georgia, serif;
}

#home section header h1 {
	font: normal 1.1em/1 "ff-dagny-web-pro-1","ff-dagny-web-pro-2", Arial, sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.hentry h1, p.alert {
	font: normal 2.4em/1em "ff-tisa-web-pro-1","ff-tisa-web-pro-2", Georgia, serif;
}

.hentry h2 {
	font: normal 1.8em/1em "ff-tisa-web-pro-1","ff-tisa-web-pro-2", Georgia, serif;
}

.quotes blockquote p, .category-quotes blockquote p {
	font: normal 2.4em/1.2em "ff-tisa-web-pro-1","ff-tisa-web-pro-2", Georgia, serif;
}

#about .primary header h1 {
	font: normal 1.8em/1.2 "ff-tisa-web-pro-1","ff-tisa-web-pro-2", Georgia, serif;
}

nav a {
	font: bold 1.2em/1 "ff-dagny-web-pro-1","ff-dagny-web-pro-2", Arial, "Helvetica Neue", Helvetica, sans-serif;
	text-transform: uppercase;
}

.project-nav {
	font: normal 1.3em/1 "ff-dagny-web-pro-1","ff-dagny-web-pro-2", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

#projects li a, #project aside h2 {
	font: normal 1em/1 "ff-dagny-web-pro-1","ff-dagny-web-pro-2", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

footer .links a {
	font: normal 1.2em/1 "ff-dagny-web-pro-1","ff-dagny-web-pro-2", Arial, "Helvetica Neue", Helvetica, sans-serif;
	text-transform: uppercase;
}

.secondary h1, #journal form label {
	font: bold 1.1em/1 "ff-dagny-web-pro-1","ff-dagny-web-pro-2", Arial, "Helvetica Neue", Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.journal-nav a, .journal-nav span {
	font-family: "ff-dagny-web-pro-1","ff-dagny-web-pro-2", Arial, "Helvetica Neue", Helvetica, sans-serif;
	text-transform: uppercase;
}

#about .primary .r-mod header h1 a {
	font: normal 1.2em/1 "ff-dagny-web-pro-1","ff-dagny-web-pro-2", Arial, "Helvetica Neue", Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.hentry footer li span {
	font: normal 0.8461em/1.5em "ff-dagny-web-pro-1","ff-dagny-web-pro-2", Arial, "Helvetica Neue", Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
}


/*	-Helper Styles
--------------------------------------------- */

.mod {
	width: 100%;
	overflow: hidden;
}

ul.inline li {
	display: inline;
}

a.btn {
	-moz-border-radius: 3px; /* FF1+ */
  	-webkit-border-radius: 3px; /* Saf3+, Chrome */
    border-radius: 3px; /* Opera 10.5, IE 9 */
	color: #fff;
	color: rgba(255,255,255, 1);
	text-shadow: 0px -1px 0px rgba(0,0,0,.2);
	display: block;
	float: left;
	font-weight: bold;
	line-height: 2.5em;
	font-size: 1.1em;
	padding: 0 1.5em;
	text-decoration: none;
	border: 1px solid rgba(0,0,0,0.1);
	
	-moz-box-shadow: 0 0 5px rgba(0,0,0,.3);
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
	box-shadow: 0 0 5px rgba(0,0,0,.3);
	
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

a.btn:hover {
	border: 1px solid rgba(0,0,0,.3);
}

a.btn:active {
	position: relative;
	top: 1px;
}

.btn-green {
	background-color: #54b834;
}

a.btn-green:hover {
	background-color: #54b834;
}

.btn-red {
	background-color: #d01814;
}

#page .primary a.btn-red:hover {
	background-color: #e81c18;
	color: #fff;
}

#page .last-col {
	margin-right: 0;
}

.grid-50-50 .col1, .grid-50-50 .col2 {
	width: 46.2686%;
}

.grid-50-50 .col1 {
	float: left;
}

.grid-50-50 .col2 {
	float: right;
}

/*	-Layout
--------------------------------------------- */

#page {
	background-color: rgba(255,255,255, .8);
	border-top-width: 5px;
	border-top-style: solid;
	max-width: 96.4em;	/* 964px */
	margin: -5px auto 0;
	overflow: hidden;
}

.ie6 #page, .ie7 #page, .ie8 #page {
	background: #fff;
}

#page-inner {
	width: 87.55187%;	/*	844px / 964px = 0.8755186	*/
	margin: 0 auto;
}

.primary {
	float: left;
	width: 65.8767%;	/* 556px / 844px = 0.658767 */
}

.secondary {
	float: right;
	width: 23.2227%;	/* 196px / 844px = 0.232227 */
}

.secondary section {
	margin-bottom: 30px;
}

.secondary h1, #journal form label {
	margin-bottom: 1.5em;
}

/*	-Header
--------------------------------------------- */
#site {
	border-bottom: 1px solid #e0e0e0;
	padding: 30px 0 35px;
	margin-bottom: 30px;
}

/*	-Nav
--------------------------------------------- */
nav {
	float: left;
	width:74.4%;
}

nav ul {
	font-size: 1em;
}

nav li {
	float: left;
}

nav a {
	border-bottom: 1px dotted #fff;
	font-size: 1.2em;
	font-weight: bold;
	display: block;
	margin: 0 20px 20px 0;
	padding-bottom: 3px;
	letter-spacing: 1px;
	text-transform: uppercase;
	
	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}

#site p {
	clear: left;
	width: 74.4%; /* 628px / 844px = 0.744	*/
	margin-bottom: 0;
}

/*  -Logo
--------------------------------------------- */
#logo {
	float: right;
	width: 124px;
}

#logo a {
	border: none;
	float: right;
}

/*  -Home
--------------------------------------------- */
#home #page {
	border-top-color: #158ec5;
}

#home a:hover, #home .active a {
	border-color: #158ec5; 
	color: #158ec5;
}

#home #site p a, #home footer a {
	color: #158ec5;
}

.feat {
	padding-bottom: 15px;
}

#home .feat a {
	border: none;
	color: #666;
	float: left;
	width: 31.7535%;
	margin-right: 2.3696%;
	text-decoration: none;
}

#home .feat a:hover {
	color: #666;
}

.feat img {
	margin-bottom: 15px;
	opacity: .95;
	max-width: 100%;
}

.feat a:hover img {
	opacity: 1;
}

.feat a:hover h2 {
	color: #333;
}

#home .feat a:hover p {
	color: #666;
}

.feat h2 {
	margin-bottom: 0.5em;
}

.feat h3 {
	margin-bottom: 0.5em;
}

.feat .date {
	line-height: 1em;
	margin-bottom: 8px;
}

/*	-Work
--------------------------------------------- */
#work #page {
	border-top-color: #54b834;
}

#work a:hover {
	border-color: #54b834;
	color: #54b834;
}

#work #site p a, #work .active a, #work aside a, #work footer a {
	color: #54b834;
}

#project-swathe {
	padding-bottom: 50px;
}

#project-swathe h1 {
	font-size: 2.4em;
	float: left;
}

.project-nav {
	float: right;
	width: 18.1279%;
	overflow: hidden;
}

.project-nav a[target="_blank"] {
	background: url(/img/work-full-screen.png) no-repeat 100% 1px;
	float: left;
	padding-right: 10px;
}

.project-nav a[target="_blank"]:hover {
	background-position: 100% -29px;
}

.project-nav .controls {
	float: right;
	width: 24.183%;
	overflow: hidden;
}

.project-nav .controls span, .project-nav .controls a {
	display: block;
	height: 15px;
	width: 15px;
	text-indent: -9999px;
}

.controls .prev {
	background: url(/img/work-nav-prev.png) no-repeat;
	float: left;
}

.controls .next {
	background: url(/img/work-nav-next.png) no-repeat;
	float: right;
}

.controls a.prev:hover, .controls a.next:hover {
	background-position: 0 -25px;
	border: none;
}

#projects li {
	line-height: 2em;
}

#projects {
	float: left;
	width: 14.6919%;	/* 124 / 844 = 0.146919 */
	margin-top: -7px;
}

#projects li.active a {
	color: #54b834;
}

#project { 
	float: right;
	width: 82.9383%;	/* 700 / 844 = 0.829383 */ 
}

.screengrab {
	background: url(/img/safari-chrome-top.png) no-repeat;
	padding-top: 31px;
	margin-bottom: 3em;
}

.screengrab div {
	background: url(/img/safari-chrome-btm.png) no-repeat 0 100%;
	padding-bottom: 6px;
}

#project img {
	max-width: 100%;
	margin-bottom: 15px;
}

#project h1 { 
	font-size: 1.8em; /* 18px */
	float: none;
}

#project a:hover {
	border-color: #54b834;
	color: #54b834;
}

.desc {
	float: left;
	width: 58.8571%;
	width: 48.5714%;
}

#project aside {
	float: right;
	width: 38.2857%;
	width: 48.5714%;
}

#project aside h2 {
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 7px;
}

#project aside li {
	line-height: 1.8em;
}


/*	-Journal
--------------------------------------------- */
#journal #page {
	border-top-color: #ffa105;
}

#journal nav a:hover, #journal a:hover {
	color: #ffa105;
}

#journal nav li.active a, #journal #site p a, #journal article a, #journal footer a {
	color: #ffa105;
}

#journal #site p a, #journal p a:hover, #journal li a:hover, #journal article a:hover {
	border-color: #ffa105;
}

article footer {
	border: none;
	padding: 0;
}

.hentry {
	border-bottom: 1px solid #e0e0e0;
	margin-bottom: 20px;
}

#journal .hentry h1 {
	padding-left: 12.9263%;
	line-height: 1.4em;
}

.hentry h1 a:hover {
	border: none;
}

#journal .hentry h2 {
	padding-left: 12.9263%;
	margin-bottom: 0.8322em; /* 15px */
}

.videos h1, .category-videos h1 {
	background: url(/img/journal-icons.png) no-repeat -36px -168px;
}

.quotes, .category-quotes {
	background: url(/img/journal-icons.png) no-repeat -78px -123px;
}

.category-quotes header {
	display: none;
}

.quotes blockquote, .category-quotes blockquote {
	margin-bottom: 1em;
}

.quotes blockquote p, .category-quotes blockquote p {
	margin: 0;
}

.articles h1, .category-articles h1 {
	background: url(/img/journal-icons.png) no-repeat -120px -86px;
}

#journal article h1 a {
	color: #777777;
}

.notes h1, .category-notes h1 {
	background: url(/img/journal-icons.png) no-repeat 6px -208px;
}

.links h1, .category-links h1 {
	background: url(/img/journal-icons.png) no-repeat -163px -41px;
}

.photos h1, .category-images h1 {
	background: url(/img/journal-icons.png) no-repeat -205px 0;
}

.ie6 .quotes, .ie7 .quotes, .ie8 .quotes {
	background-color: #fff;
}

.ie6 #journal article h1, .ie7 #journal article h1, .ie8 #journal article h1 {
	background-color: #fff;
}



.hentry figure {
	background-color: #efefef;
	margin-bottom: 15px;
	text-align: center;
	margin-left: 12.9263%;
}

.hentry figure img {
	display: block;
	margin: 0 auto;
}

figure.img-swathe {
	padding: 38px 0;
}

.hentry figcaption {
	background-color: #efefef;
	color: #999;
	font: italic 1.2em/2em Georgia, serif;
	margin: 0 0 1.6667em 0;
	text-align: center;
}

.hentry p, .hentry ol, .hentry ul, .hentry footer {
	padding-left: 12.9263%; 
}

.ie6 .hentry figure, .ie7 .hentry figure, .ie8 .hentry figure {
	width: 87.3873%;
	padding: 0;
	margin-left: 12.6127%;
}

.hentry footer ul.mod {
	font-size: 1.3em;
	float: none;
	padding-left: 0;
	width: auto;
	margin-bottom: 1em;
}

.hentry li {
	line-height: 2.4em;
}

.hentry blockquote p {
	font-size: 2.4em;
	font-style: italic;
	line-height: 1.2em;
	margin-bottom: 5px;
}

.hentry blockquote + p {
	text-align: right;
}

.hentry .video-swathe {
	margin-left: 12.9263%;
	margin-bottom: 3em;
}

/* fluid images & video */
.hentry figure img, .hentry embed {
	display: block;
	max-width: 100%;
}

.hentry footer ul.mod li {
	border-right: 1px solid #e0e0e0;
	float: left;
	padding: 0 5.5556% 0 0;
	margin-right: 5.5556%;
	text-align: left;
}

.hentry footer li:last-child {
	border: none;
	padding-right: 0;
	margin-right: 0;
}

article.category-notes blockquote  {
	border-left: 1px solid #E0E0E0;
	margin-left: 12.9263%;
	padding-left: 2em;
}

article.category-notes blockquote p  {
	font-size: 1.4em;
	font-style: italic;
	line-height: 1.6;
	padding-left: 0;
}

.journal-nav {
	padding-bottom: 2em;
}

.journal-nav a, .journal-nav span {
	font-size: 1.8em;
	display: block;
	letter-spacing: 2px;
	line-height: 2em;
}

.hentry footer li span {
	color: #bbb;
	display: block;
	margin-bottom: -8px;
}

.journal-nav a:hover {
	border: none;
}

.journal-nav span, .secondary .journal-nav span {
	color: #ccc;
}

.journal-nav .prev-post {
	float: left;
}

.journal-nav .prev, .journal-nav .prev-post span, .journal-nav .prev-post a {
	display: block;
	float: left;
	padding-left: 37px;
}

.journal-nav span.prev, .journal-nav .prev-post span {
	background: url(/img/prev-32x32.png) no-repeat;
}
.journal-nav a.prev, .journal-nav .prev-post a {
	background: url(/img/prev-32x32.png) no-repeat 0 -60px;
}
.journal-nav a.prev:hover, .journal-nav .prev-post a:hover {
	background: url(/img/prev-32x32.png) no-repeat 0 -121px;
}

.journal-nav .next-post {
	float: right;
}

.journal-nav .next, .journal-nav .next-post span, .journal-nav .next-post a {
	display: block;
	float: right;
	padding-right: 35px;
}

.journal-nav span.next, .journal-nav .next-post span  {
	background: url(/img/next-32x32.png) no-repeat 100% 0;
}
.journal-nav a.next, .journal-nav .next-post a {
	background: url(/img/next-32x32.png) no-repeat 100% -60px;
}
.journal-nav a.next:hover, .journal-nav .next-post a:hover {
	background: url(/img/next-32x32.png) no-repeat 100% -121px;
}

#journal form {
	margin-bottom: 2.5em;
}

#journal form label {
	display: block;
	margin-bottom: 0.625em;
}

#journal form input {
	border: none;
	background-color: #efefef;
	color: #666;
	font-size: 1.2em;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	width: 185px;
	width: 100%;
	padding: 5px;
	
}

.secondary .journal-nav {
	border: 1px solid #e5e5e5;
	border-width: 1px 0;
	padding: 1em 0;
	margin-bottom: 3em;
}

.secondary .journal-nav a, .secondary .journal-nav span {
	font-size: 1.2em;
}

.secondary .journal-nav .prev, .secondary .journal-nav .prev-post span, .secondary .journal-nav .prev-post a {
	padding-left: 29px;
}

.secondary .journal-nav span.prev, .secondary .journal-nav .prev-post span {
	background: url(/img/prev-24x24.png) no-repeat;
}
.secondary .journal-nav a.prev, .secondary .journal-nav .prev-post a {
	background: url(/img/prev-24x24.png) no-repeat 0 -54px;
}
.secondary .journal-nav a.prev:hover, .secondary .journal-nav .prev-post a:hover {
	background: url(/img/prev-24x24.png) no-repeat 0 -108px;
}

.secondary .journal-nav .next, .secondary .journal-nav .next-post span, .secondary .journal-nav .next-post a {
	padding-right: 29px;
}

.secondary .journal-nav span.next, .secondary .journal-nav .next-post span {
	background: url(/img/next-24x24.png) no-repeat 100% 0;
}
.secondary .journal-nav a.next, .secondary .journal-nav .next-post a {
	background: url(/img/next-24x24.png) no-repeat 100% -54px;
}
.secondary .journal-nav a.next:hover, .secondary .journal-nav .next-post a:hover {
	background: url(/img/next-24x24.png) no-repeat 100% -108px;
}

.entries li {
	margin-bottom: 0.5em;
}

.entries li a, #journal .secondary section p a {
	/*border: none;*/
}


#categories {
	background-color: #efefef;
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

#categories li {
	float: left;
	width: 33.3333%;
}

#categories a {
	display: block;
	border: 1px solid #dedede;
	width: 100%;
	line-height: 1em;
	padding-top: 38px;
	padding-bottom: 15px;
	text-align: center;
	
	-webkit-transition: background-color .2s ease-in-out;
	-moz-transition: background-color .2s ease-in-out;
	-o-transition: background-color .2s ease-in-out;
	transition: background-color .2s ease-in-out;
}

#journal #categories a:hover {
	background-color: #dedede;
	border-color: #dedede;
	color: #666;
}

#categories #links, #categories .cat-item-8 a {
	background: url(/img/category-icons.png) no-repeat 50% -124px;
	border-width: 0 1px 1px 0;
}

#categories #notes, #categories .cat-item-5 a {
	background: url(/img/category-icons.png) no-repeat 50% -187px;
	border-width: 0 1px 1px 0;
}

#categories #articles, #categories .cat-item-4 a {
	background: url(/img/category-icons.png) no-repeat 50% 17px;
	border-width: 0 0 1px 0;
}

#categories #images, #categories .cat-item-9 a {
	background: url(/img/category-icons.png) no-repeat 50% -51px;
	border-width: 0 1px 0 0;
}

#categories #videos, #categories .cat-item-6 a {
	background: url(/img/category-icons.png) no-repeat 50% -315px;
	border-width: 0 1px 0 0;
}

#categories #quotes, #categories .cat-item-10 a {
	background: url(/img/category-icons.png) no-repeat 50% -250px;
	border: none;
}

/* -Archives
--------------------------------------------- */
#archives {
	margin-bottom: 60px;
}

#archives header h1 {
	font-size: 2.4em;
}

#archives article {
	border-bottom: 1px solid #E0E0E0;
	margin-bottom: 20px;
	padding-bottom: 10px;
}

#archives article footer {
	color:#BBBBBB;
	float: left;
	font-size: 1.2em;
	width: 14.6919%;
}

#archives article header {
	float: left;
}

#archives article header h1 {
	font-size: 1.8em;
}


/* -Category Archives */
.primary > header h1, #archives > header h1 {
	border-bottom: 1px solid #E0E0E0;
	font-size: 2.4em;
	padding-bottom: 1em;
}


/*	-About
--------------------------------------------- */
#about #page {
	border-top-color: #d01814;
}

#about nav a:hover, #about nav li.active a {
	color: #d01814;
}

#about nav a:hover, #about footer a:hover {
	border-color: #d01814;
}

#about section h2 a, #about footer a, #about p a {
	color: #d01814;
}

#about section h2 a {
	border-color: #fff;
}

#delicious-links h2 {
	font-weight: normal;
}

#about section h2 a:hover {
	color: #d01814;
}

#about #site p a {
	border-color: #d01814;
	color: #d01814;
}

#about .primary a:hover {
	color: #d01814;
	border-color: #d01814;
}

#about .primary h1 a:hover {
	/*border: none;*/
}

#about .primary img, #about .work img {
	-moz-box-shadow: 0px 0px 5px rgba(0,0,0,.3);
	-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.3);
	box-shadow: 0px 0px 5px rgba(0,0,0,.3);
}

#about .primary section {
	margin-bottom: 3em;
}

#about .primary header {
	float: left;
	width: 22.3021%;	/* 124px / 556px = 0.223021 */
}

#about .primary .r-mod header {
	float: none;
	margin-bottom: 1.5em;
	width: auto;
}

#about .primary .r-mod header h1 {
	text-align: left;
}

#about .primary .content {
	float: right;
	width: 74.1%;	/* 412px / 556px = 0.74100 */
}

#about .primary header h1 {
	color: #807c7b;
	margin-bottom: 1em;
	text-align: right;
}

.frame{
	display: block;
    position: relative;
    overflow: hidden;
	float: left;
	margin: 0 20px 20px 0;
}

.frame > img{
    vertical-align: top;
}

/*
#markwallis img {
	float: left;
	margin: 0 20px 20px 0;
}
*/

.frame, .frame:before {
    -moz-border-radius: 100em;
    border-radius:100em;
}

.frame > img{
    -webkit-border-radius:100em;
}

.frame:before{
    content:'';
    display:block;
    position:absolute;
    left:0;
    right:0;
    width:100%;
    height:100%;
    margin:-10em;
    border:10em solid #fff;
}

#markwallis .content .btn {
	margin-right: 20px;
}

#markwallis .content div {
	padding: 5px 0;
}

#zootool-badge li:nth-child(4n) a {
	margin-right: 0;
}

/*	thumbs
--------------------------------------------- */
.thumbs {
	padding-top: 5px;
}

.thumbs a {
	border: none;
	display: block;
	float: left;
	margin: 0 4.6116% 4.6116% 0;
	overflow: hidden;
}

.thumbs a img {
	opacity: .9;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	max-width: 100%;
}

.thumbs a:hover img {
	opacity: 1;
}

#zootool-badge li a {
	width: 21.4112%;
	height: auto;
	overflow: hidden;
}

#zootool-badge li a img {
	width: 100%;
	height: auto;
}

.ie6 #zootool-badge li, .ie7 #zootool-badge li, .ie8 #zootool-badge li {
	float: left;
	width: 21.4112%;
	margin: 0 3.5% 3.5% 0;
}

.ie6 #zootool-badge li a, .ie7 #zootool-badge li a, .ie8 #zootool-badge li a {
	width: 100%;
}

#flickr-badge a {
	width: 16.0194%;
	height: auto;
	margin-bottom: 0;
}

#flickr-badge a:last-child {
	margin-right: 0;
}

#flickr-badge img {
	width: 100%;
	height: auto;
}

.ie6 #flickr-badge a, .ie7 #flickr-badge a, .ie8 #flickr-badge a {
	margin: 0 3.5% 3.5% 0;
}

#about .primary .r-mod header h1 {
	font-size: 1em;
}

#about .primary .r-mod header h1 em {
	font: italic 1.4em Georgia;
}

#about .primary .r-mod header h1 a {
	padding-left: 5px;
}

#about .elsewhere {
	margin-bottom: 0;
}

#about .elsewhere li {
	float: left;
	margin: 0 0.6em 0.6em 0;
	margin: 0 0.6em 0 0;
}

#about .elsewhere li a {
	border: none;
	display: block;
}

#about .elsewhere img {
	opacity:0.4;
	
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

#about .elsewhere a:hover img {
	opacity:0.6;
}

#about .work li {
	width: 100%;
	overflow: hidden;
	margin-bottom: 20px;
}

#about .work li:hover {
	background-color: #f7f7f7;
}

#about .work li a {
	border: none;
	/*color: #777;*/
	font-size: 0.9em;
	font-weight: bold;
	text-decoration: none;
}

#about .work li a em {
	display: block;
	font-size: 1.1em;
	font-weight: normal;
	font-style: normal;
	line-height: 1.5em;
	padding-top: 3px;
}

#about .work li a:hover em {
	color: #666;
}

#about .work li a img {
	float: left;
	margin-right: 10px;
	opacity: .95;
	
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

#about .work li a:hover img {
	opacity: 1;
}

#about .recommended {
	width: 125px;
}

#about .recommended a {
	border: none;
	display: block;
	margin-bottom: 15px;
}

#about .recommended a img {
	opacity: .4;
	
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

#about .recommended a:hover img {
	opacity: .6;
}

/*	r-cols
--------------------------------------------- */
.r-cols .col-1 {
	width: 47.5728%;
	float: left;
}

.r-cols .col-2 {
	width: 47.5728%;
	float: right;
}

.r-mod .timestamp {
	color: rgba(0,0,0,.3);
	font: Arial, Helvetica, sans-serif;
	font-size: 0.85em;
	display: block;
	padding-top: 3px;
}

#delicious-links h2 {
	line-height: 1.5em;
	margin-bottom: 0.7692em;
}

#delicious-links h2 a {
	border-bottom: 1px dotted #ccc;
	font-size: 1.4em;
}

#tweets p, #delicious-links p {
	margin-bottom: 0;
}

/*	-Contact
--------------------------------------------- */

#contact .primary p {
	line-height: 3em;
	padding-left: 45px;
	font-style: italic;
}

.success-msg {
	background: #ddead9 url(/img/success-icon.png) no-repeat 5px 50%;
	color: #124f02;
}

.error-msg {
	background: #fadedb url(/img/error-icon.png) no-repeat 5px 50%;
	color: #9d1908;
}

#contact #page {
	border-color: #6c0a59;
}

#contact footer a, #contact .secondary a {
	color: #6c0a59;
}

#contact a:hover, #contact li.active a, #contact #site p a { 
	color: #6c0a59;
}

#contact a:hover {
	border-color: #6c0a59;
}

#contact form {
	padding-bottom: 3em;
}

#contact form ul {
	margin-bottom: 0;
}

#contact form li {
	border-bottom: 1px dotted #E0E0E0;
	width: 100%;
	overflow: hidden;
	margin-bottom: 1.5em;
	padding-bottom: 1.5em;
	padding-top: 5px;
}

#contact form li:last-child {
	border: none;
	margin-bottom: 0;
}

#contact form li label {
	float: left;
	display: block;
	width: 30%;
	margin-right: 3%;
}

#contact input, #contact textarea {
	background-color: #efefef;
	border: 1px solid #efefef;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	color: #666666;
	padding: 5px;
	width: 50%;
	
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;	
	
}

#contact input.error, #contact textarea.error {
	border-color: #e0240b;
}

#contact input:focus, #contact textarea:focus {
	background-color: #fff;
	border-color: #e0e0e0;
	
	-moz-box-shadow: 0 0 5px rgba(0,0,0,.3);
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
	box-shadow: 0 0 5px rgba(0,0,0,.3);
}

#contact button {
	background-color: #622874;
	border: 1px solid #4f1a5f;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0,0,0,.15);
	font-weight: bold;
	padding: 0.5em 1em;
	margin-left: 32.9136%;
}

#contact button:hover {
	background-color: #6a337b;
}

#contact button:active {
	position: relative;
	top: 1px;
}

.i-vcard {
	background: url(/img/i-vcard.png) no-repeat;
	padding-left: 20px;
}


/*	-Footer
--------------------------------------------- */
footer {
	border-top: 1px solid #e0e0e0;
	padding: 30px 0 50px;
}

footer ul.mod {
	width: 40%;
	float: right;
	font-size: 1em;
	margin-bottom: 0;
}

footer section {
	width: 49%;
	float: left;
}

footer .links li {
	float: left;
}

footer .links a {
	border-bottom: 1px dotted #fff;
	display: block;
	float: left;
	margin-right: 20px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

footer .links li:last-child a {
	margin-right: 0;
}

footer p {
	line-height: 1em;
	margin-bottom: 0;
}

footer p a {
	font-size: 1em;
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1024px) {

/*	csstransforms
--------------------------------------------- */
.csstransforms .thumbs img {
	-moz-transition-property : scale; 
	-moz-transition-duration : 0.2s;
	-moz-transition-timing-function : ease-in-out; 

	-o-transition-property : scale; 
	-o-transition-duration : 0.2s; 
	-o-transition-timing-function : ease-in-out; 

	-webkit-transition-property : scale; 
	-webkit-transition-duration : 0.2s; 
	-webkit-transition-timing-function : ease-in-out; 

	transition-property : scale; 
	transition-duration : 0.2s; 
	transition-timing-function : ease-in-out; 
}

.csstransforms .thumbs a:hover img {
	-moz-transform: scale(1.15); 
	-o-transform: scale(1.15);
	-webkit-transform: scale(1.15);
	transform: scale(1.15); 
}

}

/* -web-kit-animation
--------------------------------------------- */
#home #logo a {
	background-color: #20acee;
	display: block;
	height: 124px;
	width: 124px;
}

.cssanimations #home nav a, .cssanimations #home footer a {
	color: #777;
}

.cssanimations #home nav a:hover, .cssanimations #home footer a:hover {
	border-color: #333;
	color: #333;
}

@-webkit-keyframes colours {
	  0% {background-color: #20acee;}
	 20% {background-color: #62bd44;}
	 40% {background-color: #ffa105;}
	 60% {background-color: #ff211d;}
	 80% {background-color: #7e63b5;}
	 100% {background-color: #20acee;}
}

.cssanimations #home #logo a {
	-webkit-animation-direction: normal;
	-webkit-animation-duration: 30s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-name: colours;
	-webkit-animation-timing-function: ease;
}

@-webkit-keyframes border-top-colours {
	  0% {border-top-color: #20acee;}
	 20% {border-top-color: #62bd44;}
	 40% {border-top-color: #ffa105;}
	 60% {border-top-color: #ff211d;}
	 80% {border-top-color: #7e63b5;}
	 100% {border-top-color: #20acee;}
}

.cssanimations #home #page {
	-webkit-animation-direction: normal;
	-webkit-animation-duration: 30s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-name: border-top-colours;
	-webkit-animation-timing-function: ease;
}

@-webkit-keyframes link-colours {
	  0% {border-color: #20acee; color: #20acee;}
	 20% {border-color: #62bd44; color: #62bd44;}
	 40% {border-color: #ffa105; color: #ffa105;}
	 60% {border-color: #ff211d; color: #ff211d;}
	 80% {border-color: #7e63b5; color: #7e63b5;}
	 100% {border-color: #20acee; color: #20acee;}
}

.cssanimations #home #site p a {
	-webkit-animation-direction: normal;
	-webkit-animation-duration: 30s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-name: link-colours;
	-webkit-animation-timing-function: ease;
}

/* Responsive layout
--------------------------------------------- */
@media screen and (max-width: 600px) {
	
	#page {
		width: 100%;
	}
	
	#page-inner {
		width: 95%;
	}
	
	#logo {
		float: none;
		text-align: center;
		margin-bottom: 2em;
	}
	
	#logo a {
		float: none;
		margin: 0 auto;
	}
	
	#logo a img {
		position: relative;
	}
	
	nav {
		text-align: center;
		width: 100%;
	}
	
	nav ul {
		margin: 0 auto 2em;
	}
	
	nav ul li {
		display: inline;
		float: none;
	}
	
	nav ul li a {
		display: inline;
		font-size: 1.2em;
	}
	
	nav ul li:last-child a {
		margin-right: 0;
	}
	
	#site p {
		width: 100%;
		text-align: center;
	}
	
	#home #logo {
		background-color: transparent;
	}
	
	#home #logo a {
		background-color: #20acee;
		display: block;
		height: 124px;
		width: 124px;
	}
	
	#home #site {
		border-bottom: none;
		margin-bottom: 0;
	}
	
	#home .feat {
		display: none;
	}
	
	#project-swathe > header h1 {
		display: none;
	}
	
	.project-nav, .project-nav .controls {
		float: none;
		overflow: hidden;
		width: 100%;
		
	}
	
	#work #site {
		margin-bottom: 5px;
	}
	
	.project-nav .controls {
		border-bottom: 1px solid #E0E0E0;
		margin: 0 auto 15px;
	}
	
	.project-nav .controls span, .project-nav .controls a {
		background-image: none;
		height: auto;
		width: auto;
		font: normal 1.4em/2em "ff-tisa-web-pro-1","ff-tisa-web-pro-2",Georgia,serif;
		display: block;
		text-indent: 0;
	}
	
	.controls .next {
		padding-right: 5px;
	}
	
	.controls .prev {
		padding-left: 5px;
	}
	
	.project-nav a[target="_blank"] {
		display: none;
	}
	
	#projects {
		display: none;
	}
	
	#project {
		float: none;
		width: 100%;
	}
	
	#project .desc, #project aside {
		display: block;
		float: none;
		width: 100%;
	}
	
	.primary, .secondary {
		float: none;
		width: 100%;
	}
	
	.secondary h1, #journal form label {
		font:1.8em/1 "skolar-1", "skolar-2", Georgia, serif;
		margin-bottom: 0.8333em;
		text-transform: none;
	}
	
	#journal form label {
		margin-bottom: 0.278em;
	}

	#journal .hentry h1 {
		background-image: none;
		padding-left: 0;
	}
	
	.quotes, .category-quotes {
		background-image: none;
	}
	
	#journal .hentry h2, .hentry figure, .hentry p, .hentry ol, .hentry ul, .hentry footer {
		padding-left:0;
	}
	
	.hentry footer li:last-child {
		display: none;
	}
	
	#journal .secondary form {
		border: 1px solid #e5e5e5;
		border-width: 1px 0;
		padding: 1.5em 0;
	}
	
	#journal .secondary form input {
		width: 96%;
	}
	
	.secondary .journal-nav {
		display: none;
	}
	
	#archives article header, #archives article footer {
		float: none;
		width: auto;
	}
	
	#archives article footer {
		margin-bottom: 0.5em;
	}
	
	#about .primary header, #about .primary .content {
		float: none;
		width: auto;
	}
	
	#about .primary header h1 {
		text-align: left;
	}
	
	.thumbs a {
		margin: 0 0 2% 0;
	}
	
	#zootool-badge a, #flickr-badge a {
		width: 48.0144%;
		overflow: hidden;
		margin-bottom: 2%;
	}
	
	#zootool-badge a img, #flickr-badge a img {
		width: 95%;
		max-width: 100%;
	}
	
	#zootool-badge li:nth-child(2n) a, #flickr-badge a:nth-child(2n) {
		float: right;
		margin-right: 0;
	}
	
	#flickr-badge a.last-col {
		float: none;
	}
	
	.r-cols .col-1, .r-cols .col-2 {
		float: none;
		width: auto;
		margin-bottom: 1.5em;
	}
	
	#about .secondary .work, #about .secondary .recommended {
		display: none;
	}
	
	#contact form {
		border-bottom:1px dotted #E0E0E0;
		margin-bottom: 3em;
	}
	
	#contact form li label, #contact input, #contact textarea { 
		float: none;
		width: 98%;
	}
	
	#contact form li label {
		margin-bottom: 0.25em;
	}
	
	#contact .receptacle {
		text-align: center;
	}
	
	#contact button {
		margin: 0;
	}
	
	footer {
		text-align: center;
	}
	
	footer ul.mod, footer section {
		float: none;
		width: auto;
	}
	
	footer ul.mod {
		margin-bottom: 1.5em;
		text-align: center;
	}
	
	footer ul.mod li {
		display: inline-block;
		padding: 0.25em 1.5em;
	}
	
	footer ul.mod a {
		float: none;
		display: inline;
		padding: 0;
		margin: 0;
	}
	
	footer p {
		line-height: 1.5em;
	}
	
}
	
.hentry ul.t-collection {
	background: #efefef;
	float: left;
	padding-left: 0;
	margin-left: 12.9263%;
}

.hentry .t-collection li {
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	
	background: #efefef;
	float: left;
	width: 50%;
	text-align: center;
	padding: 30px 0 15px;
	
	-webkit-transition: background .3s ease-in-out;
	-moz-transition: background .3s ease-in-out;
	-o-transition: background .3s ease-in-out;
	transition: background .3s ease-in-out;
}

.hentry .t-collection li:hover {
	background: rgba(224, 224, 224, .5);
}

.hentry .t-collection li a:hover {
	border: none;
}

.t-collection li img {
	width: 174px;
	opacity: 0.85;
	
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

#journal .hentry .t-item-info {
	padding-top: 10px;
}

#journal .hentry .t-item-info {
	color: #999;
}

#journal .hentry .t-item-info a {
	color: #777;
	
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

#journal .hentry .t-collection li:hover .t-item-info a {
	color: #FFA105;	
	border-bottom: 1px dotted #FFA105;
}

.t-collection li:hover img {
	opacity: 1;
	-webkit-transform: scale(1.1324);
	-moz-transform: scale(1.1324);
	-o-transform: scale(1.1324);
	transform: scale(1.1324);
}

.hentry footer {
	clear: left;
}