/* Browser reset styles
------------------------------------------------------ */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0; padding:0}
table {border-collapse:collapse; border-spacing:0}
fieldset,img, img a, a img {border:0}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal; font-weight:normal}
ol,ul {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}
a {outline: none}

/* Common styles
------------------------------------------------------ */
.clear {clear:both}
.float-left {float:left}
.float-right {float:right}
.text-left {text-align:left}
.text-right {text-align:right}
.text-center {text-align:center}
.bold {font-weight:bold}
.italic {font-style:italic}
.img-left {float:left;margin:4px 10px 4px 0}
.img-right {float:right;margin:4px 0 4px 10px}

/* Layout Styles
------------------------------------------------------ */
body {text-align: center; background: #fff url(../images/bn-tile.gif) repeat-x top; font: 12px "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Lucida", Verdana, "Bitstream Vera Sans", sans-serif; color: #999}
#wrapper {width: 800px; margin: 0 auto; position: relative}

/* Banner Styles
------------------------------------------------------ */
#banner {width: 100%; float: left}
#banner .logo {float: right; width: auto; margin-top: 27px}
#banner .logo h1 {background: url(../images/bn-logo.jpg) no-repeat 0 0; width: 281px; height: 119px; display: block; text-indent: -9999px}
#banner .logo h1 a {width: 249px; height: 119px; display: block}

/* Navigation Styles */
#banner div.nav	{height: 18px; width: 195px; margin: 97px 0 0 0; padding: 0;	border: 0; float: left}
#banner div.nav ul.menu	{height: 18px; width: 195px; background: transparent url(../images/bn-nav.gif) no-repeat 0 0; margin: 0; padding: 0; position: relative}
#banner div.nav ul.menu li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0}
#banner ul.menu li, ul.menu a {height: 18px; display: block}
#banner div.nav ul.menu li a {text-indent: -9999px;	overflow: hidden;	text-decoration: none}
#banner #navhome	{left: 0; width: 35px;}
#banner #navfolio	{left: 35px; width: 62px;}
#banner #navresume	{left: 97px; width: 59px;}
#banner #navcontact {left: 156px; width: 39px;}
#banner #navhome a:hover	{background: transparent url(../images/bn-nav.gif) 0 -18px no-repeat}
#banner #navfolio a:hover {background: transparent url(../images/bn-nav.gif) -35px -18px no-repeat}
#banner #navresume a:hover {background: transparent url(../images/bn-nav.gif) -97px -18px no-repeat}
#banner #navcontact a:hover {background: transparent url(../images/bn-nav.gif) -157px -18px no-repeat}

/* You Are Here
------------------------------------------------------ */
body#home #navhome a {background: transparent url(../images/bn-nav.gif) 0 -18px no-repeat}
body#folio #navfolio a {background: transparent url(../images/bn-nav.gif) -35px -18px no-repeat}
body#resume #navresume a {background: transparent url(../images/bn-nav.gif) -97px -18px no-repeat}
body#contact #navcontact a {background: transparent url(../images/bn-nav.gif) -157px -18px no-repeat}

/* Content Styles
------------------------------------------------------ */
#content {width: 100%; float: left; text-align: left; border-bottom: 1px solid #E1E0E0; padding-bottom: 40px; margin-bottom: 40px; margin-top: 30px}
#content a {color: #999; text-decoration: none;}
#content a:hover {color: #40B7FD; border: none}

/* Home
------------------------------------------------------ */
body#home h2, h3, ol li, p {display: block; width: 675px}
body#home h2 {color: #40b7fd; padding-bottom: 40px; font-size: 30px;}
body#home h3 {font-size: 25px;}
body#home ol {list-style-type: decimal; color:#999999; }
body#home ol li.d01 {font-size: 25px; padding-bottom: 40px;}
body#home ol li.d02 {font-size: 25px; padding-bottom: 40px;}
body#home ol li.d03 {font-size: 25px; padding-bottom: 40px;}
body#home p {padding-bottom: 45px;}

/* Folio
------------------------------------------------------ */
.gallery {float: left; width: 345px; padding: 24px 0 100px 0; border-top: 1px solid #d9d9d9;}
.gallery li {float: left; margin: 0 17px 17px 0}
.gallery li a {width: auto}
.gallery li.last {margin: 0 0 17px 0}
#content .gallery li a {border: 1px solid #e4e4e4; width: 40px; height: 45px; margin: 0; padding: 0; display: block}
#content .gallery li a:hover {border: 1px solid #41B7FD}

/* Resume
------------------------------------------------------ */
body#resume h3, p {display: block; text-indent: 0px;}
body#resume .inner {width: 800px; float: left}
body#resume #content p, body#resume #content ul, body#resume #content h3 {float: left; width: 100%; color:#999999}
body#resume #content p, body#resume #content ul, body#resume #content table {margin-bottom: 20px;}
body#resume #content h2 {margin: 0 0 20px 0; padding: 0; border-bottom: 1px solid #D9D9D9; height: 37px; font-size: 24px; color: #40B7FD; width: 800px; float: left; display: block; }
body#resume #content h3 {font-style: italic; color:#999999}
body#resume #content li {list-style: disc; margin-bottom: 6px;}
body#resume #content li.description {list-style: none;}
body#resume #content li.where { list-style: none; padding-top: 4px;}
body#resume #content ul#print {width: 167px; float: right}
body#resume #content ul#print li {display: block; padding: 0 12px 0 0; margin: 0; height: 37px; line-height: 37px; float: left; background: transparent url(../../../images/resume/divide.gif) no-repeat 100% 50%}
body#resume #content ul#print li.icon {padding: 0; background: none}
body#resume #content ul#print li.icon a {border: none; padding: 0; width: 54px; height: 37px; display: block; text-indent: -9999px; background: transparent url(../../../images/resume/pdf.gif) no-repeat 50% 50%}
body#resume #content ul#listskills {margin-left: 20px}
body#resume #content ul#listskills strong {font-weight: bold; color: #40B7FD}
body#resume #content table {width: 100%; float: left}
body#resume #content table td {vertical-align: top}
body#resume #content table td.where {text-align: right; white-space: nowrap}
body#resume #content table td.when {width: 108px}
body#resume #content table td.who {}
body#resume #content table td.where {width: 126px}
body#resume #content table td.what {padding: 0 0 20px 0}
body#resume #content table li.title {color: #40B7FD; font-weight: bold; padding: 0; background: none; list-style: none;}
body#resume #content table ul {margin: 0; padding: 0}
body#resume #content p.top a {border: none; float: right; width: 24px; height: 28px; text-indent: -9999px; display: block; background: transparent url(../../../images/resume/top.gif) no-repeat 0 0}

/* Contact */
body#contact ul {}
body#contact li {display: block;}
body#contact li.phone {background: url(../images/phone.jpg) no-repeat; height: 65px; padding: 7px 0 45px 90px; font-size: 30px; color: #40b7fd; margin-top: 12px;}
body#contact li.email {background: url(../images/email.jpg) no-repeat; height: 70px; font-size: 30px; color: #40b7fd; padding:13px 0 45px 90px;}
body#contact li.linkedin {background: url(../images/linkedin.jpg) no-repeat; height: 66px; font-size: 30px; color: #40b7fd; padding:13px 0 45px 90px;}
body#contact #content li.email a {color: #40b7fd;}
body#contact #content li.linkedin a {color: #40b7fd;}
body#contact #content li.phone a {color: #40b7fd;}
body#contact #content li.email a:hover {color: #999;}
body#contact #content li.linkedin a:hover {color: #999;}
body#contact #content li.phone a:hover {color: #999;}