/*  James Love  - July 2010



1. GLOBAL

___________________________________________________________________________________________________________________________________________________

1.1 Reset Tools

----------------------------------------------- */

/*Copyright (c) 2008, Yahoo! Inc. All rights reserved.Code licensed under the BSD License:http://developer.yahoo.net/yui/license.txt version: 2.6.0*/

html{padding:0;margin:0}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}

table{border-collapse:collapse;border-spacing:0; margin:0; padding:0;} /* Added margin/padding reset */

fieldset,img{border:0;}

address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}

li{list-style:none;}

caption,th{text-align:left;}

h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}

q:before,q:after{content:'';}

abbr,acronym{border:0;font-variant:normal;}

sup{vertical-align:text-top;}

sub{vertical-align:text-bottom;}

input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}

input,textarea,select{font-size:100%;}

legend{color:#555 ;}

del,ins{text-decoration:none;}

/* Clearing floats without extra markup  */

.clearing{ display: inline-block; }

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

* html .clearing{ height: 1%; }

.clearing { display: block; }

.clear-both{clear:both}

.skiplinks{position:absolute;top:-5000px}

  .hide{display:none}

 .border-top,.border-bottom{border-style:solid;border-color:#a1a1a1 }

.border-top{border-width:1px 0 0 0}

.border-bottom{border-width: 0 0 1px 0}


/* 1.2Headings

----------------------------------------------- */
h1,h2,h3,h4, h5 ,h6 {font-weight:normal;font-family:Georgia, "Times New Roman", Times, serif;letter-spacing:1px;color:#555 }
h1{font-size:100%;}
h2{font-size:150%;padding-bottom:15px;font-style:italic;}
h3{font-size:110%;}
h4{font-size:105%;}


/* 1.3 Links + lists

----------------------------------------------- */
a{text-decoration:none;color:#555 ;border-bottom: dotted 1px #555 }
a:hover{background-color: #ff0;color:#555 }

#content ul {padding: 0 20px 40px 0px;}
#content ul li{background: transparent url(../images/bg-main-nav.png) no-repeat 0 0.6em;padding: 0 0 5px 13px}
#content ul.ul-2c {padding:0}
#content ul.ul-2c li{display:block;float:left;width:240px;margin-right: 20px;padding-left:13px}
#content ul.ul-2cn {padding:0}
#content ul.ul-2cn li{display:block;float:left;width:127px;margin-right: 20px;padding-left:13px}
#content ul.ul-4c {padding:0}
#content ul.ul-4c li{float:left;width:85px;margin-right: 10px;padding-left:15px}
#content ul.border-bottom{margin-bottom:40px;padding-bottom:40px}


/* 1.4 Columns + Rows
----------------------------------------------- */

.col-x1{float:left;width:320px;}
.col-x1l{float:left;width:320px;margin-right:100px}
.col-x2{float:left;width:560px;margin-right:100px}
.col-x2r{float:left;width:560px}


/*2. MAIN PAGE ELEMENTS
______________________________________________________________________________________________*

/*2.0 Top Level elements

----------------------------------------------- */
body{background-color:#fff;font-family:Georgia,Arial, Helvetica, sans-serif;font-size:91%;line-height:1.8em;color:#555 ;vertical-align: baseline;}
p{padding-bottom:20px}
p.intro,h1.intro{font-size:140%;font-family:Georgia, "Times New Roman", Times, serif;line-height:1.5em;margin-bottom:50px;padding-bottom:60px;border-bottom: solid 1px  #a1a1a1 }
h1.intro{font-size:170%;font-style:italic}
p.border-bottom{margin-bottom:50px;padding-bottom:50px}
#footer p{margin-bottom:0;padding-bottom:0}
img,object,embed{border:0}
strong,em{font-weight:bold}
address{padding:0 0 20px 0}
blockquote{}

/*2.1 Wrapper
----------------------------------------------- */
#wrapper{}
.wrapper-center{margin: 0 auto;width:980px}


/*2.2 Header
----------------------------------------------- */
#header-wrapper{padding:100px 0;}
#header #branding {float:left;width:320px}
#header #branding h1 {font-size:260%;color:#555 ;line-height:0.95em }
#header #branding h1 a {color:#555 ;background-color: transparent; font-weight:normal;border-bottom:0;font-style: normal}
#header #branding h1 span{display:block;font-size:67%;margin:-2px 0 0 0;font-style:italic;} 

/*2.3 Navigation

----------------------------------------------- */
/* main */
#main-navigation{float:right;width:auto}
#main-navigation ul{margin-top:75px}
#main-navigation ul li{float:left;width:auto;margin-left:20px}
#main-navigation ul li.first{}
#main-navigation ul li a{text-transfhorm:uppercase;font-style: normal;font-weight:normal;font-size:95%;padding-top:10px;border:0;background-color:transparent}
#main-navigation ul li a:hover{background-color: #fff;color:#555 }
#main-navigation ul li.active a{border-bottom:solid 2px #555 }
 

/*2.4 Main content

----------------------------------------------- */

#content-wrapper{}
#content{padding:80px 0 20px 0;border-top: solid 1px #555 ;position:relative;border-top:solid 1px #a1a1a1 }

/*2.5 Footer

----------------------------------------------- */

#footer-wrapper{clear:both;}
#footer {margin-top:40px;font-size:85%;border-top:solid 1px #a1a1a1 ;text-align:right}


/*3. SPECIFIC PAGES
______________________________________________________________________________________________*/

/*3.0 WORK
---------------------------------------------- */

ul#selected-work{margin:0;padding:0}
ul#selected-work li{padding:0;background-image: none;position:relative;float:left;width:320px;margin-right:10px;padding:0 0 10px 0}
body#home ul#selected-work li{margin-right: 0}
ul#selected-work li.end{margin-right:0}
ul#selected-work li h3{width:320px;left:0;background-color:#555 ;color:#fff;font-size:81%;border-bottom:solid 1px #fff}
ul#selected-work li a,ul#selected-work li a:hover{border:0;background-color: transparent}
ul#selected-work li h3 a{display:block;color:#fff;background-color:#555 ;font-weight:normal;width:300px;padding:0px 10px; }
ul#selected-work li h3 a:hover{background-color:#ffff00;color:#555 ;border:0}

/*work-page*/

#secondary-navigation{position:absolute;top:-28px;right:0px;}
#secondary-navigation p a{width:auto;text-align:right;background: none;font-size:81%;color:#555;border:solid 1px #a1a1a1;border-bottom:0;padding:7px 15px 7px 10px }



/*3.1 Contact

----------------------------------------------- */
ul#contact-details{margin:0;padding:0}
ul#contact-details li{border-bottom:solid 1px #a1a1a1 ;padding:20px 0 30px 0 ;margin-bottom:30px;background-image: none}
ul#contact-details li.end{border-bottom:0;padding:0;margin:0;background:none}
ul#contact-details li p{background-repeat: no-repeat;background-position: top left;padding-left:45px;min-height:33px;line-height:33px}
ul#contact-details li.email p{background-image: url(../images/icon-email.gif)}
ul#contact-details li.mobile p{background-image: url(../images/icon-phone.gif)}
ul#contact-details li.twitter p{background-image: url(../images/icon-twitter.gif)}
ul#contact-details li.linked-in p{background-image: url(../images/icon-linkedin.gif)}


/* CSS3extras 
------------------------------------------------ */
#secondary-navigation p a{background:-moz-linear-gradient(top, #f1f1f1 15%, #fff 100%);background: -webkit-gradient(linear, left top,  left bottom, from(#f1f1f1), to(#fff), color-stop(0.7, #fff));}
#secondary-navigation p a:hover{background:-moz-linear-gradient(top, #ddd 1%, #fff 100%);background: -webkit-gradient(linear, left top,  left bottom, from(#ccc), to(#fff), color-stop(0.7, #fff));}