/* RESET BROWSER STYLES, courtesy of Eric Meyer: www.meyerweb.com */
@import url(reset.css);

/* MAIN LAYOUT */

html {
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}

body {
height:100%;
background-color:#efefef;
background-image:url(../img/background/bg_body.png);
background-repeat:repeat-y;
background-position:988px -7px;
font-family:"Trebuchet MS",verdana,arial,sans-serif;
font-size:63.5%;
color:#444;
line-height: 1.5;
}

#wrapper {
width:1000px;
background-image:url(../img/background/bg_wrapper.jpg);
background-repeat:repeat-y;
background-position:left top;
display:block;
position:absolute;
min-height:100%;
}

#contentContainer {
display:block; 
margin-bottom:75px;
min-height:521px;
background-image:url(../img/background/bg_contentcon.jpg);
background-repeat:no-repeat;
background-position:left top;
}

#mainColumn {
float:left;
width:679px;
position:relative; /*for jFlow controls*/
padding-bottom:56px;
}

#brandingColumn {
float:left;
width:321px;
}

#footer {
position:absolute; 
display:block; 
bottom:0; 
height:75px;
width:1000px;
background-image:url(../img/background/bg_footer3.png);
background-repeat:no-repeat;
background-position:left top;
padding:0 0 0 354px;
}

/* MAIN LINK STYLES */
a {
text-decoration:none;
font-weight:bold;
color:#333;
border-bottom:1px solid #b0d34c;
}

a:visited {

}

a:hover {
background-color:#b0d34c;
color:#fff;
border-bottom:0;
}

a:active {

}

a[href^="http:"] {
background-image:url(../img/background/bg_ext_site.png);
background-repeat:no-repeat;
background-position:99% 50%;
padding-right:22px;
}

a[href^="http:"]:hover {
background-image:url(../img/background/bg_ext_site_rev.png);
}

a[href$="pdf"]  {
background-image:url(../img/background/bg_pdf2.png);
background-repeat:no-repeat;
background-position:100% 50%;
padding-right:20px;
}

a[href$="pdf"]:hover  {
background-image:url(../img/background/bg_pdf2_rev.png);
}

/* MAIN TYPE STYLES */
h1, h2 {
text-indent:-9999px;
}

h3 {
font-size:2.5em;
font-weight:bold;
color:#869f95;
line-height:1.1;
margin:15px 30px 10px 30px;
}

h4 {
font-size:1.8em;
font-weight:bold;
color:#869f95;
line-height:1.1;
}

p {
font-size:1.4em;
margin:10px 30px 10px 30px;
padding:0 0 0 15px;
border-left:2px solid #b0d34c;
/*background-image:url(../img/background/bg_p.png);
background-repeat:repeat-y;
background-position:-10px 0;*/
}

ul {
margin:0 30px 0 30px;
font-size:1.4em;
}

li {
margin:5px 30px 5px 27px;
padding:0 0 0 20px;
line-height:1.25;
background-image:url(../img/background/bg_li_bullet.png);
background-repeat:no-repeat;
background-position:0 6px;
}

dt {
font-size:1.5em;
font-weight:bold;
font-style:italic;
margin:5px 0 0 0;
letter-spacing:-.5px;
}

dd {
font-size:1.2em;
background-image:url(../img/background/bg_li_bullet.png);
background-repeat:no-repeat;
background-position:0 5px;
padding:0 0 0 15px;
margin:1px 0 1px 0;
}


/* PRIMARY NAV */
#primaryNav {
width:679px;
height:58px;
overflow:hidden;
}

#primaryNav ul {
margin:0;
}

#primaryNav li {
float:left;
margin:0;
border:0;
padding:0;
background-image:none;
}

#primaryNav a {
display:block;
height:58px;
text-indent:-9999px;
background-repeat:no-repeat;
background-position:left bottom;
border-bottom:0;
}

#primaryNav a.current {
background-position:left top;
}

a#hello {
width:131px;
margin:0 0 0 30px;
background-image:url(../img/background/sprite_hello.gif);
}

a#work {
width:119px;
margin:0 0 0 62px;
background-image:url(../img/background/sprite_work.gif);
}

a#resume {
width:178px;
margin:0 0 0 66px;
background-image:url(../img/background/sprite_resume.gif);
}

a#hello:hover, a#work:hover, a#resume:hover {
background-position:left top;
}

a#hello:active, a#work:active, a#resume:active {
margin-top:1px;
}


/* SECONDARY NAV */

#secondaryNav {
height:63px;
margin:20px 0 0 29px;
background-image:url(../img/background/bg_secnav.png);
background-repeat:no-repeat;
background-position:left top;
}

#secondaryNav ul {
height:58px;
width:359px;
margin:0 0 0 19px;
}

#secondaryNav li {
float:left;
margin:0;
border:0;
padding:0;
}

#secondaryNav a {
float:left;
border-bottom:0;
}

#secondaryNav a.current {
background-position:0 -57px;
}

a#css, a#flash, a#cmyk, a#email {
width:62px;
height:57px;
display:block;
background-repeat:no-repeat;
background-position:0 0;
text-indent:-9999px;
}

a#css {
width:64px;
background-image:url(../img/background/sprite_css.png);
}

a#cmyk {
background-image:url(../img/background/sprite_cmyk.png);
}

a#flash {
background-image:url(../img/background/sprite_flash.png);
}

a#email {
background-image:url(../img/background/sprite_email.png);
}

a#css:hover, a#cmyk:hover, a#flash:hover, a#email:hover {
background-position:0 -57px;
}

a#css:active, a#cmyk:active, a#flash:active, a#email:active {
background-position:0 -114px;
}


/* WORK PAGE - jquery menu */
#jsContainer {
background-color:#fbfbfb;
margin:0 0 0 29px;
padding:3px 0 0 20px;
border-left: 1px solid #dadada;
}

#workController span{
display:none;
}

#workSlides {
}

#jFlowSlide{
}

#workController span.jFlowSelected {
}

.jFlowPrev, .jFlowNext{
cursor:pointer;
width:40px;
height:40px;
display:block;
position:absolute;
text-indent:-9999px;
}

.jFlowPrev {
top:87px;
left:574px;
}

.jFlowNext {
top:87px;
left:620px;
}

/* Intro slides for each part of portfolio */

.workBox {

}

.workBox h3 {
font-size:3em;
margin:0 200px 15px 0;
padding-top:8px;
}

.workBox p {
font-size:1.4em;
margin:0 0 15px 0;
padding:0 20px 0 15px;
line-height:1.35;
}

.workBox p.pleaseUse {
font-weight:bold;
}

.workBox img {
float:right; 
margin:5px 0 0 10px;
}

.workBox img.folioImage {
padding:3px;
margin:0;
float:none;
border:1px solid #ddd;
background:#fff;
}

.folioDisplayBox {
float:left;
padding-top:10px;
position:relative;
}

.folioDisplayBox a {
background-image:none;
border:0;
padding:0;
margin:0;
}

.folioDisplayBox a:hover {
background-image:none;
border:0;
background-color:transparent;
}

.folioDisplayBox a.seeAction {
color:#fff;
position:absolute;
bottom:4px;
right:1px;
font-size:1.2em;
background-color:#7e938a;
padding:3px;
font-weight:bold;
}

.folioDisplayBox a.seeAction:hover {
background-color:#b0d34c;
}

.folioNotesBox {
float:left;
}

.fullWidth {
width:auto;
}

.sideColumn {
width:154px;
}

.folioNotesBox h4 {
font-size:1.3em;
margin:5px 0 3px 0;
}

.folioNotesBox p {
font-size:1.1em;
margin:3px 20px 3px 0;
padding-left:0;
border-left:0;
}

.sideColumn h4 {
margin:8px 5px 3px 10px;
}

.sideColumn p {
margin:3px 5px 3px 10px;
}

#jsFooter {
height:29px;
margin:0 0 0 29px;
background-image:url(../img/background/bg_jsconfooter.png);
background-repeat:no-repeat;
background-position:left top;
}

#jsFooter p {
margin:0;
padding:0;
border:0;
color:#fff;
font-size:1.1em;
line-height:28px;
float:right;
margin-right:22px;
}

#jsFooter p a {
color:#fff;
}

#jsFooter p a[href^="http:"], .folioNotesBox p a[href^="http:"], .folioDisplayBox a.seeAction {
background-image:url(../img/background/bg_ext_site_sm.png);
background-repeat:no-repeat;
background-position:99% 50%;
padding-right:13px;
}

#jsFooter p a[href^="http:"]:hover, .folioNotesBox p a[href^="http:"]:hover, .folioDisplayBox a.seeAction:hover {
background-image:url(../img/background/bg_ext_site_rev_sm.png);
}

/* FOOTER STYLES - Twitter feed */
#footer h4 {
color:#f7f7f7;
text-align:right;
float:left;
margin:42px 0 0 0;
font-size:2em;
width:530px;
}

ul#twitter_update_list {
float:left;
width:530px;
margin:37px 0 0 0;
}

ul#twitter_update_list li {
background-image:none;
padding:0;
margin:0;
font-weight:bold;
font-size:13px;
text-align:right;
}

ul#twitter_update_list li a {
color:#fff;
border:0;
background-image:none;
padding:0;
border-bottom:1px solid #fff;
}

ul#twitter_update_list li a:hover {
background-color:#869e95;
border:0;
}

a#followTwitter {
display:block;
float:left;
width:56px;
height:67px;
text-indent:-9999px;
margin:6px 0 0 16px;
border:0;
background-image:none;
}

a#followTwitter:hover {
background:transparent;
}


/* SPECIAL STYLES */
strong {
font-weight:bold;
}

p strong {
font-size:15px;
line-height:1.25;
}

em {
font-style:italic;
}

.colorBox {
margin:20px 30px 10px 30px;
color:#65776f;
background-color:#869e95;
background-image:url(../img/background/bg_869e95.gif);
background-repeat:repeat;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

.colorBox h2.chrisFace {
float:left;
text-indent:-9999px;
}

.colorBox h3 {
color:#fff;
}

.colorBox h3.error {
font-size:4em;
margin:15px 20px 0px 10px;
letter-spacing:-1px;
padding-top:5px;
}

.colorBox h4 {
color:#fff;
}

.colorBox p {
margin:8px 20px 8px 10px;
padding:0px;
color:#fff;
font-weight:bold;
border-left:0;
line-height:1.25;
font-style:italic;
font-size:1.55em;
background-image:none;
}

.colorBox p.intro {
padding:0;
margin:0 20px 10px 240px;
}

.colorBox p.phone, .colorBox p.email {
font-style:normal;
margin: 4px 0 2px 240px;
padding:0 0 0 8px;
border-left:10px solid #b0d34c;
line-height:1;
}

.colorBox p.phone {
letter-spacing:1px;
}

.colorBox h3.error + p {
margin:0 20px 10px 5px;
padding:5px;
}

.colorBox a {
color:#fff;
}

#introBox {
background-image:url(../img/background/bg_intropara.png);
background-repeat:no-repeat;
background-position:7px -64px;
padding:10px 0 11px 0;
}

.sidebar {
width:240px;
margin:0 30px 10px 20px;
padding:2px;
float:right;
}

.sidebar a[href^="http:"] {
background-image:url(../img/background/bg_ext_site_sm.png);
background-repeat:no-repeat;
background-position:99% 50%;
padding-right:13px;
}

.sidebar a[href^="http:"]:hover {
background-image:url(../img/background/bg_ext_site_rev_sm.png);
}

.sidebar p {
padding:0;
margin:8px 8px 8px 7px;
font-size:1.3em;
color:#fff;
font-style:normal;
font-weight:bold;
}

.sidebar h4 {
margin:5px 8px 5px 5px;
font-style:italic;
}

.resume {
background-repeat:no-repeat;
background-position:0 49%;
border-bottom:1px solid #ddd;
margin:0 30px 0 30px;
padding:10px 0 10px 80px;
}


.resume h4 a {
color:#869f95;
}

.resume h4 a:hover {
color:#fff;
}

.education {
background-image:url(../img/background/bg_resume_edu.png);
}

.work {
background-image:url(../img/background/bg_resume_work.png);
}

.topResume {
padding:0 0 10px 80px;
background-image:url(../img/background/bg_resume_work_last.png);
background-position: 0 6px;
}

.bottomResume {
border:0;
}

.personableLightGreen {
color:#b0d34c;
}

.inlineArrows {
background-image:url(../img/background/bg_arrows.gif);
background-position:right center;
background-repeat:no-repeat;
padding:0 27px 0 0;
}

.aside {
font-size:smaller;
}

.uppercaseText {
text-transform:uppercase;
}

.letterspacedText {
letter-spacing:2px;
}

.extraTopMargin {
margin-top:15px;
}