/*
Theme Name: BPfolio
Theme URI: http://www.benpalmer.info/
Description: My portfolio site.
Version: 1.0
Author: Ben Palmer
Author URI: http://www.worklove.co.uk/
Tags: blue, custom header, fixed width, two columns, widgets

	BPfolio v1.0

	This theme was designed and built by Ben Palmer,
	whose blog you will find at http://www.worklove.co.uk/

	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php

*/

@import "assets/css/reset.css";

/*
1.2
FONT FACES
Graublau family by Digital Type Foundry
-----------------------------------------------*/

@font-face {
	font-family: "Graublau Web Regular";
	src: local("Graublau Web Regular"), local("GraublauWeb-Regular"),
		url("assets/fonts/GraublauWeb.otf") format("opentype");
	}
@font-face {
	font-family: "Graublau Web Bold";
	src: local("Graublau Web Bold"), local("GraublauWeb-Bold"),
		url("assets/fonts/GraublauWebBold.otf") format("opentype");
	}


/*
1.3
SCAFFOLDING
-----------------------------------------------*/

.col-1,.col-2,.col-3,.col-4,.col-5 {
    float:left;
}

.col-1 { width:192px; }
.col-2 { width:384px; }
.col-3 { width:576px; }
.col-4 { width:768px; }
.col-5 { width:960px; /*border-right:1px solid #ccc;*/ }

.ind { margin-left:192px; /*border-right:1px solid #ccc;*/ }

/*
2
GLOBAL
-----------------------------------------------*/

body {
     /*background:url('../images/bg_grid.png') repeat-y left top; */
}

abbr {
    border:0;
}

a {
    outline:none;
}

/*
2.1
Header
-----------------------------------------------*/

#ben-palmer-name {
    background:url('assets/images/logo_ribbon.png');
    display:block;
    width:70px;
    height:138px;
    padding:48px 15px 0 15px;
    font:1.5em/1em "Graublau Web Regular";
    color:white;
    text-decoration:none;
    position:absolute;
    margin:-10px 0 0 46px;
}

aside.sitedesc {
	display:none;
}

#navbar {
    margin:20px 0 0 192px;
    border-bottom:3px double #ccc;
    border-right:1px solid #ccc;
}

#navbar li {
    float:left;
    padding:10px 0 0 0;
    border-left:1px solid #ccc;
}

#navbar li a {
    display:block;
    width:181px;
    padding:71px 5px 5px 5px;
    text-decoration:none;
    color:#666;
    font:.8em/1.2em "Graublau Web Regular";
}

#navbar li:first-child a {
    width:180px;
}

#navbar li a:hover {
    background-color:#e5e5e5;
}

#navbar li a.active {
    background-color:#e5e5e5;
}

#navbar abbr {
    padding:0;
    border:0;
}

#banner {
    height:192px;
    margin:30px 0 0 0;
}

/*
2.2
Banner
-----------------------------------------------*/

#banner article {
    width:768px;
    float:left;
    margin:0 0 0 192px;
    background-color:#e5e5e5;
    height:192px;
	background-image: url('assets/images/linear_bg_2.png'); /* fallback image */
	background-image: -moz-linear-gradient(100% 100% 90deg, #f5f5f5, #e5e5e5);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f5f5f5), to(#e5e5e5));
	
}

#banner hgroup h1 { }

#banner details {
    font:1.125em/1.25em "Graublau Web Regular";
    color:#aaa;
    text-shadow: 1px 1px 0px rgba(255,255,255,.9);
}

/*
2.3
Content
-----------------------------------------------*/

#content {
    padding:10px 0;
}

#bio {
	-moz-column-count:2;
	-webkit-column-count:2;
	-moz-column-gap: 10px;
	-webkit-column-gap: 10px;
	margin:20px 0 40px 192px;
	column-count:2;
	column-gap: 10px;
}

#bio a {
    color:#666;
}
#bio a:hover {
    background-color:#ffc;
}

.workwrapper { width:970px; }

#latest-work {
    width:778px; /* hack another 10px on cause nth child buggers up fadeIns */
}

#latest-work ol {
    list-style-type:none;
    margin:10px 0;
}

#latest-work ol li {
	float:left;
	width:379px;
    margin:0 10px 10px 0;
}

#latest-work ol li a {
    display:block;
    width:379px;
    text-decoration:none;
    
}

.folio {
    height:166px;
    border-bottom:1px solid #ccc;
}

/*
#latest-work ol li:nth-child(even) a {
    margin-left:5px;
}


#latest-work ol li a:hover {
    background-color:#FFFFCC;
}
*/

#latest-work ol li a div {
    display:block;
    height:86px;
    background-color:#f5f5f5;
    margin:0 0 10px 0;
}

/* .folio in typography section */

.ribbon {
    background-image:url('assets/images/sml_ribbon.png');
    background-repeat:no-repeat;
    background-position:334px 0;
}

.ribbonpr {
    background-image:url('assets/images/sml_ribbon.png');
    background-repeat:no-repeat;
    background-position:728px 0;
}

/* .folio in typography section */

.ribbon {
    background-image:url('assets/images/sml_ribbon.png');
    background-repeat:no-repeat;
    background-position:338px 0;
}

#subnav {
    margin:10px 0 0 0;
}
#subnav ul {
	list-style-type:none;
}

#subnav a {
    text-align:right;
    padding:10px 10px 9px 10px;
    display:block;
    border-bottom:1px solid #ccc;
    text-decoration:none;
    color:#999;
    margin:0 10px 0 0;
	cursor:pointer;
}

#subnav li:first-child a {
    border-top:1px solid #ccc;
}

#subnav a.active {
    background-color:#FFFFCC;
    background-image:url('assets/images/cross.png');
    background-repeat:no-repeat;
    background-position:5px center;
    color:#666;
}

#subnav a:hover {
    background-color:#e5e5e5;
}


/*
2.4
Extras
-----------------------------------------------*/

#extras {  }

.about, .tweet {
    margin:10px 0 0 0;
}

.about {
    width:384px;
    float:left;
}

.about div, .about ul {
    margin:10px 10px 0 0;
    width:182px;
    float:left;
}

.about ul {
    list-style-type:none;
}
.about ul a {
    text-decoration:none;
}

.about ul a:hover {
    text-decoration:underline;
}

.about abbr {
    border:0;
}

.linkedin {
    color:#069;
}

.twitter {
    color:#38ccff;
}

.facebook {
    color:#3B5998;
}

.flickr {
    color:#FF0084;
}

.behance {
    color:#009CEC;
}

.tweet {
    background-image:url('assets/images/tweet_corner.png');
    padding:0 0 10px 0;
    background-position:bottom left;
    background-repeat:no-repeat;
    width:380px;
    float:right;
}

.tweet blockquote {
    background-color:#38ccff;
    margin:10px 0 0 0;
    overflow:hidden;
}

.tweet abbr {
    float:right;
    margin:10px 0 0 0;
}

/*
2.5
Project Page
-----------------------------------------------*/

.preview {
    width:768px;
    float:left;
    margin:0 0 0 192px;
    background-color:#f5f5f5;
    height:192px;
}

.preview img {
    position:absolute;
}

.preview a {
    display:block;
    text-decoration:none;
    width:768px;
    height:192px;
    position:absolute;
    margin:162px 0 0 0;
}

.preview a div {
    padding:5px;
    height:20px;
    background-color:#FFFFCC;
}

#project {
    padding:30px 0 0 0;
}

#project h1 {
    margin:0 0 10px 0;
}

#project div {
    -moz-column-count:2;
    -webkit-column-count:2;
    -moz-column-gap: 1.2em;
    -webkit-column-gap: 1.2em;
	column-count:2;
	column-gap: 1.2em;
}

#project details, #project p, #project aside {
    margin:0 0 1.2em 0;
}

#project abbr {
    border:0;
}

.shots {
    list-style-type:none;
    margin:40px 0 20px 0;
}

.shots li {
    background-image:url('assets/images/browser.png');
    background-repeat:no-repeat;
    padding:35px 0 0 0;
    margin:0 0 20px 0;
}

.shots li img {
    border-left:1px solid #a3a3a3;
    border-right:1px solid #a3a3a3;
    border-bottom:1px solid #a3a3a3;
}

/*
2.6
Footer
-----------------------------------------------*/

#footer {
    margin:30px 0 0 0;
}

#footer address {
	display:block;
	height:192px;
	width:768px;
	background-image: url('assets/images/linear_bg_1.png'); /* fallback image */
	background-image: -moz-linear-gradient(100% 100% 90deg, #e5e5e5, #f5f5f5);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e5e5e5), to(#f5f5f5));
}

/*
3
CV hresume
-----------------------------------------------*/

#cv abbr { 
	border:0; 
	padding:0; 
	}
	
#cv h2 { 
	margin:0 0 .6875em 0;
}

#cv a { 
	text-decoration:none; 
	}
	
#cv a:hover { 
	text-decoration:underline; 
	}

#cv .skills a { 
	color:#666; 
	}
	
#cv .skills a:hover { 
	color:#999; 
	}

/*
3.1
Contact Details
-----------------------------------------------*/

#cv .contact, #cv .vcalendar, #cv .skills {
    padding:1.072em 0;
    border-bottom:1px solid #ccc;
    overflow:hidden;
}

#cv .tel, #cv .street-address, #cv .locality, #cv .region, #cv .postal-code, #cv .country-name, #cv .url {
    font:.8em/1.143em Palatino,Georgia,Times;
    display:block;
}

#cv .tel, #cv .street-address, #cv .locality, #cv .region, #cv .postal-code, #cv .country-name { 
	color:#666; 
}

#cv .adr { }

#cv .contact .type {
    display:none;
}

#cv .contact h3 {
    font:.8em/1.143em Palatino,Georgia,Times;
    color:#666;
    font-weight:bold;
}

#cv .contact ul {
    list-style-type:none;
    padding:0;
    margin:0;
}

#cv .contact section section {
    padding:0 0 1.143em 0;
    overflow:hidden;
}

/*
3.2
Skills
-----------------------------------------------*/

#cv .skills {}

#cv .skills h3 {
    font:.8em/1.143em Palatino,Georgia,Times;
    color:#666;
    font-weight:bold;
}

#cv .skills ul {
    list-style-type:none;
    padding:0;
    margin:0;
    font:.8em/1.143em Palatino,Georgia,Times;
    color:#666;
}

#cv .skills section {
    padding:0 0 1.143em 0;
    overflow:hidden;
}

/*
3.3
Experience
-----------------------------------------------*/

#cv .experience {
    margin:0 0 2.286em 0;
    overflow:hidden;
}

#cv .experience { }

#cv .experience .date_duration {
    font:.8em/1.143em Palatino,Georgia,Times;
    color:#666;
    font-weight:bold;
}

#cv .experience hgroup {
    margin:0 0 1.143em 0;
    font:.8em/1.143em Palatino,Georgia,Times;
    color:#666;
}

#cv .experience hgroup h3 {}

#cv .experience hgroup h4 {
    font-style:italic;
    font-weight:normal;
}

#cv .experience .description {
    font:.8em/1.143em Palatino,Georgia,Times;
    color:#666;
    padding:0 1.143em 0 0;
}

#cv .experience .description ul {
    list-style-type:none;
}

#cv .experience .description ul li {
    margin:0 0 0 0;
}

#cv .experience .notes {
    font:.8em/1.143em Palatino,Georgia,Times;
    color:#999;
}

/*
3.4
Education
-----------------------------------------------*/

#cv .education {
    margin:0 0 1.143em 0;
    overflow:hidden;
    font:.8em/1.143em Times;
    color:#666;
}

#cv .education .date_duration {
    font-weight:bold;
}

#cv .education hgroup h4 {
    font-weight:normal;
}

/*
4
Typography
-----------------------------------------------*/

h1 {
    font:2.25em/1.2em "Graublau Web Regular",Arial,Helvetica;
    color:#666;
    font-weight:normal;
    text-shadow: 1px 1px 0px rgba(255,255,255,.9);
}

h2 {
    font:1.5em/1.2em "Graublau Web Regular",Arial,Helvetica;
    color:#999;
    font-weight:normal;
    text-shadow: 1px 1px 0px rgba(255,255,255,.9);
}

h1:after, h2:after {
    content: ".";
}

#bio p {
	font:.8em/1.2em Palatino,Georgia,Times;
	color:#666;
	margin:0 0 1.2em 0;
}

.folio {
    font:.8em/1.2em Palatino,Georgia,Times;
    color:#666;
}

.folio summary {
    font-weight:bold;
}

.about div, .about ul {
    font:.8em/1.2em Palatino,Georgia,Times;
    color:#666;
}

.tweet blockquote {
    font:.8em/1.2em Palatino,Georgia,Times;
    color:#666;
}

.tweet abbr {
    color:#fff;
    border:0;
}

#footer address {
    font:.8em/1.2em Palatino,Georgia,Times;
    color:#666;
    font-style:normal;
}

#subnav a {
    font:.8em/1.2em "Graublau Web Regular",Arial,Helvetica;
}

#projnav a {
    font:.8em/1.2em "Graublau Web Regular",Arial,Helvetica;
    text-decoration:none;
    color:#999;
}

#projnav a:hover {
    text-decoration:underline;
}

#project h2 {
    font-size:.8em;
    font-family:Palatino,Georgia,Times;
    font-weight:bold;
    color:#666;
    line-height:1.2em;
}

#project details {
    font:.8em/1.2em Palatino,Georgia,Times;
    color:#666;
}
#project details summary {
     font-weight:bold;
}

#project p {
    font:.8em/1.2em Palatino,Georgia,Times;
    color:#666;
}

#project aside {
    font:.8em/1.2em Palatino,Georgia,Times;
    color:#666;
    font-style:italic;
}

#project p a {
    color:#666;
    text-decoration:none;
}

#project p a:hover {
    text-decoration:underline;
}