@charset "UTF-8";

@import url("reset.css");

/*  trentonboyd.com
	Portfolio
	Copyright 2010
	Trenton Boyd */

::selection {
	background: #B5BABF;
	color: #FFF;
}
::-moz-selection {
	background: #B5BABF;
	color: #FFF;
}

strong {font-weight: bolder;}

em {font-style: italic;}


/************************************************************************/
/* PAGE LAYOUT */
/************************************************************************/
body {
    font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
    font-weight: 300;
    margin: 140px 0 0 0; /*9.25%*/
    padding: 0 60px;
    display: block;
    color: #6B757F;
    text-align: left;
    width: 100%;
}
#header_nav {
    height: 30px;
    position: fixed;
    top: 0;
    left: 0;
    margin: 60px 0 0 290px;
    z-index: 100;
}
#header_jump {
    height: 30px;
    position: fixed;
    top: 0;
    right: 0;
    margin: 60px 55px 0 0;
    z-index: 100;
}
/************************************************************************/
/* NAVIGATION */
/************************************************************************/
ul#navlist, ul#jumpnav {
    margin-left: 0;
    padding-left: 0;
    white-space: nowrap;
}
#navlist li, #jumpnav li {
    display: inline;
    list-style-type: none;
    margin: 0px 10px;
    color: #6B757F;
}
#navlist li { text-transform: uppercase }
#jumpnav li {
    border-radius: 6px;
    margin: 0 3px !important;
}
#navlist a, #jumpnav a {
    padding: 5px 11px !important;
    margin: 0 !important;
    border-radius: 6px !important;
    -moz-border-radius: 6px !important;
    -webkit-border-radius: 6px !important;
    border: none !important;
}
#navlist a:link, #navlist a:visited, #jumpnav a:link, #jumpnav a:visited {
    color: #6B757F;
    background-color: transparent;
    text-decoration: none;
}
#navlist a:hover, #navlist a#current:hover, #jumpnav a:hover, #jumpnav a#current:hover {
    color: #FFF;
    background-color: #F04E23;
    text-decoration: none;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
#navlist a#current {
    color: #FFF;
    background-color: #6B757F;
    text-decoration: none;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
/************************************************************************/
/* HEADLINES */
/************************************************************************/
h1 {
    position: fixed;
    top: 50px;
    left: 59px;
    height: 32px;
    width: 181px;
    padding: 0;
    margin: 0;
}
h1 span { display: none }
h1 a:hover, h1 a:active {
    padding: 0;
    margin: 0;
    background-color: transparent;
}
h2 {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 32pt;
    display: block;
    color: #FFF;
    background: #F04E23;
    padding: 5px 10px 4px 10px;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.25);
}
h3 {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 20pt;
    line-height: 23pt;
    color: #FFF;
    background: #6B757F;
    display: block;
    padding: 4px 7px 3px 7px;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.25);
}
h4 {
    color: #F04E23;
    margin: 10px 0 -10px 0;
}
/************************************************************************/
/* LINKS */
/************************************************************************/
a:link, a:visited {
    color: #F04E23;
    text-decoration: none;
    padding: 2px 3px;
    margin: -2px -3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
a:hover, a:focus, a:active {
    color: #FFF;
    background-color: #F04E23;
}
p.cta a {
    color: #FFF;
    width: 160px;
    padding: 5px 11px !important;
    margin: 0 !important;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border: none !important;
}
p.cta a:link, p.cta a:visited { background-color: #6B757F }
p.cta a:hover, p.cta a:focus, p.cta a:active { background-color: #F04E23 }
/************************************************************************/
/* LISTS */
/************************************************************************/
.box ul, .subcol ul {
    float: left;
    display: block;
    color: #6B757F;
    width: 40%;
    font-size: 11pt;
    line-height: 16px;
    margin: 17px 0 10px 32px;
}
ul + ul {
    float: right;
    margin: 17px 32px 10px 0;
}
.box li, .subcol li {
    margin-top: 17px;
    padding-left: 31px;
}
li:first-child { margin-top: 5px }
li.facebook { background: url("../img/facebook.png") left 50% no-repeat }
li.twitter { background: url("../img/twitter.png") left 50% no-repeat }
li.linkedin { background: url("../img/linkedin.png") left 50% no-repeat }
li.lastfm { background: url("../img/lastfm.png") left 50% no-repeat }
/************************************************************************/
/* PORTFOLIO STYLES */
/************************************************************************/
img { border: none }
div.portrait, div.landscape, div.square, div.var {
    float: left;
    margin: 0 0 0 40px;
    background-color: #FFF;
}
div.portrait img, div.landscape img, div.square img, div.var img {
    height: 400px;
    padding: 10px;
    border: 1px solid #6B757F;
}
div.portrait img { width: 300px }
div.landscape img { width: 600px }
div.square img { width: 400px }
.noborder { background-color: none }
.noborder img { border: none !important }
#preface {
    width: 620px;
    height: 420px;
    float: left;
    background: transparent url("/img/bar-stripes-orange.png") repeat-x 0 bottom;
    margin: 0 20px 0 0;
    padding: 0;
}
#preface p {
    color: #6B757F;
    font-size: 18pt;
    line-height: 27.5pt;
    margin-top: 13.75pt;
    text-align: justify;
}
.box {
    width: 320px;
    height: 420px;
    float: left;
    background: transparent url("/img/bar-stripes-grey.png") no-repeat left bottom;
    line-height: 22px;
    margin: 0 0 0 60px;
}
.box p, .twocol p {
    color: #6B757F;
    font-size: 11pt;
    line-height: 16pt;
    margin-top: 10px;
    text-align: justify;
}
.box > p, .subcol > p:first-child, .box > h4, .subcol > h4:first-child { margin-top: 17px !important }
.twocol {
    width: 670px;
    height: 420px;
    float: left;
    background: transparent url("/img/bar-stripes-grey.gif") no-repeat left bottom;
    line-height: 22px;
    margin: 0 0 0 60px;
}
.subcol {
    width: 320px;
    float: left;
}
.subcol + .subcol {
    margin-left: 30px;
    clear: none;
}
.tworow {
    width: 200px;
    height: 420px;
    margin: 0 0 0 40px;
    float: left;
}
.tworow + .tworow, .var + .tworow, .portrait + .tworow, .landscape + .tworow { margin-left: 30px }
.subrow {
    width: 100%;
    height: 205px;
    background-image: none;
    margin: 0 0 20px 0;
    padding: 0;
}
.subrow + .subrow { margin-bottom: 0 }
.subrow img {
    margin: 0;
    padding: 10px;
    width: 180px;
    height: 175px;
    border: 1px solid #6B757F;
}