* { margin: 0; padding: 0; }
body { background: #333d4b; color: #FFF; font: 80%/1.3 "Helvetica Neue", Arial, sans-serif; }
#container { width: 900px; margin: 0 auto; }


/*-------------------------------------------------
=TEXT/STYLES
-------------------------------------------------*/
a { color: #ffc177; text-decoration: none; }
p { margin: 2px 0 12px; }
h2 { font-size: 1.4em; margin-bottom: .5em; }
h3 { font-size: 1.1em; }
h4 { font-size: 1em; color: #DDD; margin-bottom: .15em; }

h2, h3, h4 { font-family: "Helvetica Neue", Arial, sans-serif; font-weight: bold; text-shadow: -1px -1px 0 #222932; }


/*-------------------------------------------------
=HEADER
-------------------------------------------------*/
#headerWrap { width: 100%; height: 150px; margin-bottom: 1.75em; background: transparent url(../img/header-bkg-paper.jpg) no-repeat 50% 0; }
#header { width: 900px; height: 150px; margin: 0 auto; position: relative; }
#header img { position: absolute; top: 34px; left: -8px; }
#header img.tagline { top: 60px; left: 619px; }
#bdWork #header img.tagline { left: 590px; }


/*-------------------------------------------------
=CONTENT
-------------------------------------------------*/
#content { width: 590px; float: left; margin-right: 30px; }

div.col { width: 280px; float: left; margin-right: 30px; }
div.col#col2 { margin-right: 0; }

div.work { width: 280px; min-height: 200px; height: auto!important; height: 200px; margin-bottom: 20px; }
div.work p { margin: 2px 0; }
p.view { font-weight: bold; font-size: .9em; margin-top: 4px; }
p.view a { color: #FFF; background: url(../img/arrow-small.gif) no-repeat 0 50%; padding-left: 8px; }
p.view a:hover { color: #ffc177; }

div.work img { margin-bottom: 10px; }
div.work a img { padding: 5px; background: #bed4f3; display: block; }
div.work a:hover img { background: #ffc177; }



/*-------------------------------------------------
=SLIDER
-------------------------------------------------*/
body#bdWork #content { width: 900px; padding: 0 9px; margin-right: 0; }
body#bdWork #container { width: 918px; }

div#work { width: 880px; height: 430px; padding: 19px; margin: 5px 0 0 -9px; background: url(../img/work-lg-bkg.jpg) no-repeat; }
.scroll { width: 880px; height: 430px; margin-bottom: 30px; overflow: auto; overflow-x: hidden; position: relative; }
div.panel { width: 880px; height: 430px; overflow: hidden; }

#workInfo { width: 560px; float: left; display: inline; margin: 0 0 50px -9px; }
#workInfo ul { margin: 1.25em 0; font-size: .9em; font-weight: bold; }
#workInfo ul li { margin: .25em 0; }
#workInfo ul li a { color: #FFF; background: url(../img/arrow-small.gif) no-repeat 0 50%; padding-left: 10px; }
#workInfo ul li a:hover { color: #ffc177; }
a.workBtn { display: block; width: 126px; height: 26px; line-height: 25px; background: url(../img/rd-btn-bg.gif) no-repeat; outline: none; float: left; margin-right: 20px; text-align: center; color: #FFF; font-size: .9em; }
a:hover.workBtn { background-position: 0 -26px; }
a.workBtn strong { font-weight: normal; }
a.workBtn strong.previous { padding-left: 15px; background: url(../img/arr-previous.gif) no-repeat 0 50%; }
a.workBtn strong.next { padding-right: 15px; background: url(../img/arr-next.gif) no-repeat 100% 50%; }

#workSidebar { width: 294px; margin-bottom: 50px; padding-top: 5px; float: right; }
ul.navigation { width: 294px; margin-top: 10px; }
ul.navigation li { float: left; width: 84px; height: 84px; margin: 0 14px 14px 0; }
ul.navigation li a { outline: none; }
ul.navigation li a img { padding: 4px; background: #bed4f3; display: block; }
ul.navigation li a:hover img, ul.navigation li.selected a img { background: #ffc177; }
ul.navigation li.selected a img { cursor: default; }


/*-------------------------------------------------
=SIDEBAR
-------------------------------------------------*/
#sidebar { width: 280px; float: left; color: #DDD; }
#sidebar a:hover { color: #DDD; }
#sidebar h2 { color: #FFF; }
#sidebar div.section { margin-bottom: 20px; }
#sidebar div.section li em { font-style: normal; font-size: .9em; }
#sidebar div.section h4.toph4 { margin-top: 0; }
#sidebar div.section h4 { margin-top: 20px; }

#sidebar div.section li { margin-bottom: 4px; }
#sidebar div.section li a { padding-left: 22px; }
#sidebar div.section li.email a { background: url(../img/icon-email.gif) no-repeat 0 50%; }
#sidebar div.section li.vCard a { background: url(../img/icon-vCard.gif) no-repeat 0 50%; }
#sidebar div.section li.resume a { background: url(../img/icon-resume.gif) no-repeat 0 50%; }
#sidebar div.section li.dlSamples a { background: url(../img/icon-dlSamples.gif) no-repeat 0 50%; }
#sidebar div.section li.blog a { background: url(../img/icon-blog.gif) no-repeat 0 50%; }
#sidebar div.section li.reel a { background: url(../img/icon-reel.gif) no-repeat 0 50%; }


#sidebar ul.checklist { margin: 0; min-height: 160px; height: auto!important; height: 160px; }
#sidebar ul.checklist li { margin: 0 0 .8em; padding-left: 20px; background: url(../img/icon-check.gif) no-repeat; }


/*-------------------------------------------------
=FOOTER
-------------------------------------------------*/
#footer { width: 900px; margin: 4em auto 0; padding-bottom: 1.5em; font-size: .85em; border-top: 1px solid #465160; padding-top: 10px; color: #BBB; clear: both; }
#footer a { color: #BBB; text-decoration: none; border-bottom: 1px dotted #BBB; }