body { margin: 0; font-family: Verdana, Arial, sans-serif; background: #D2E2B5; }

h1, h2, h3, h4, h5, h6 { font-family: Arial, sans-serif; margin: 10px 0; }
h2 { font-size: 24px; font-weight: 400; line-height: 28px; margin: 0 0 5px 0; }
h3 { font-size: 20px; line-height: 24px; color: #4F5F32; }
h4 { font-size: 16px; line-height: 20px; }
h5 { font-size: 14px; line-height: 18px; color: #4F5F32; }

.rowwrap input, textarea { border: 1px solid #D2E2B5; font-size: 11px; padding: 2px; }

:focus { outline: 0; }

/*
Navigation
*/

#navigation { float: left; width: 720px; height: 50px; overflow: hidden; padding: 10px 0; }
#navigation ul, #comments ul, #navigation-portfolio ul, #mainbar .images { margin: 0; padding: 0; list-style: none; }
#navigation li { float: left; padding: 0; margin: 0; }
#navigation a { display: block; padding: 0 20px; margin: 10px 0; color: #C8D8AB; font-size: 12px; font-weight: 800; text-decoration: none; border-right: 1px solid #C8D8AB; }
#navigation .active a, #navigation a:hover { color: #FFF; } 
#navigation .last a { border: 0; }

#navigation-portfolio { padding: 20px 20px 0 20px; }
#navigation-portfolio li { float: left; margin: 0 10px 10px 0; }
#navigation-portfolio img { float: left; }
#navigation-portfolio .third { margin-right: 0; }

.paging ul { width: 678px; overflow: hidden; padding: 0; margin: 0; list-style: none; }
.paging li { display: inline; clear: none; }
.paging a { display: block; float: left; padding: 4px; margin: 2px; border: 1px solid #000; text-decoration: none; }
.paging a:hover { background: #EAF4D9; color: #000; }
.paging .active a, .paging .active a:hover { background: #FF7A03; font-weight: 600; color: #FFF; }

/*
Images
*/

#sidebar img { border: 0; }

#portfolio .icon img, #navigation-portfolio img, #comments img { border: 9px solid #EAF4D9; padding: 1px; background: #000; }

#images { width: 460px; float: right; overflow: hidden; padding: 0; }
#images .last { margin-right: 0; }

#images-primary { width: 440px; overflow: hidden; margin: 0 0 0 20px; }
#images-primary img { margin: 0 0 20px 0; }

#images-loading img { margin: 120px 204px; }

#image-main { width: 440px; height: 300px; overflow: hidden; margin: 0 0 10px 20px; }

#image-thumbs { width: 460px; overflow: hidden; }
#image-thumbs img { border: 0; }
#image-thumbs a { float: left; margin: 20px 0 0 25px; border: 1px solid #FFF; }
#image-thumbs a:hover { border: 1px solid #FF7A03; }

#navigation-portfolio a img:hover { background: #FF7A03; }

.blog-image { float: right; margin: 0 0 10px 10px; }

.images { width: 658px; overflow: hidden; }
.images img { float: left; border: 0; margin: 10px 20px 10px 0; }

/*
Layout
*/

.clear { clear: both; }
.hidden, .show { display: none; }

#top { clear: both; text-align: center; background: #4F5F32; }
#middle { clear: both; text-align: center; background: #DCECBF url("/images/background_02.gif") 0 100% repeat; }
#bottom { clear: both; text-align: center; background: #D2E2B5 url("/images/background_01.gif") -10px -30px repeat-x; }

#header { width: 960px; height: 50px; overflow: hidden; margin: 0 auto; text-align: left; }
#header h1 { float: left; width: 240px; height: 50px; margin: 0; background: url("/images/logo_jp.gif") 0 0 no-repeat; }
#header h1 a { display: block; width: 240px; height: 50px; }
#header h1 a span { position: absolute; left: 0; top: -500px; }

#introduction h2 { font-size: 30px; line-height: 30px; margin: 0; }
#introduction p { font-family: Arial, sans-serif; font-size: 20px; line-height: 24px; margin: 10px 0 0 0; color: #4F5F32; }
#introduction p strong { color: #000; }

#bars { overflow: hidden; width: 960px; text-align: left; margin: 0 auto; }

#sidebar { float: left; width: 240px; overflow: hidden; padding: 0 0 10px 0; }
#sidebar ul, #resume ul { padding: 0; margin: 0 0 10px 0; list-style: none; }
#sidebar h2 { font-size: 18px; font-weight: 800; }
#sidebar .content li { padding: 0 0 0 21px; margin: 0 0 5px 0; }

#mainbar { float: left; width: 720px; overflow: hidden; }
#mainbar h2 { color: #FF7A03; }
#mainbar .content { clear: both; overflow: hidden; background: #FFF; border: 10px solid #EAF4D9; padding: 20px; margin: 10px 0; }

.ad { margin: 10px; padding: 10px; background: #EAF4D9; }

#resume li { padding: 0 0 0 21px; margin: 0 0 5px 0; }

.icon-checkbox { background: url("/images/icon_checkbox.gif") 0 20% no-repeat; }
.icon-chart { background: url("/images/icon_chart.gif") 0 20% no-repeat; }
.icon-medal { background: url("/images/icon_medal.gif") 0 20% no-repeat; }
.icon-client { background: url("/images/icon_client.gif") 0 20% no-repeat; }
.icon-server { background: url("/images/icon_server.gif") 0 20% no-repeat; }
.icon-feed { background: url("/images/icon_feed.gif") 0 20% no-repeat; }

.content { padding: 20px; }
.content p, .content ul, .content ol, .content dl, .content img { font-size: 11px; line-height: 18px; }
.content ul { list-style: square; }
.content p { margin: 10px 0; }
.content a { color: #537F00; }
.content a:hover { text-decoration: none; }
.content .date { color: #4F5F32; font-style: italic; }

.note, #error { border: 1px solid #E5E55C; background: #FFFF99; padding: 20px; margin: 10px 0; font-weight: 800; }
.note p { margin: 0; }

#portfolio ul { width: 680px; overflow: hidden; padding: 0; margin: 0; list-style: none; }
#portfolio li { float: left; width: 220px; overflow: hidden; margin: 0 0 10px 0; }
#portfolio .icon { float: left; width: 60px overflow: hidden; }
#portfolio .info { float: left; width: 155px; overflow: hidden; font-size: 11px; margin-left: 5px; }
#portfolio .info a { color: #000; text-decoration: none; }
#portfolio .info a:hover { text-decoration: underline; }
#portfolio .info .title { display: block; font-weight: 800; clear: both; margin-bottom: 5px; }
#portfolio .info .date { color: #4F5F32; font-style: italic; }

/*
Blog
*/

.related { width: 658px; overflow: hidden; border-bottom: 1px solid #B1BF99; margin: 0 0 5px 0; }
.related .date { display: block; float: left; width: 100px; overflow: hidden; padding: 0 0 5px 20px; background: url("/images/icon_calendar.gif") 0 1px no-repeat; }
.related .comments { display: block; float: left; width: 518px; overflow: hidden; padding: 0 0 5px 20px; background: url("/images/icon_comments.gif") 0 1px no-repeat; }

#comments ul { width: 658px; overflow: hidden; }
#comments li { float: left; clear: both; width: 678px; padding: 10px 0; overflow: hidden; }
#comments .odd { background: #D2E2B5; }
#comments .even { background: #DCECBF; }
#comments .avatar { float: left; width: 60px; padding: 0 10px; overflow: hidden; }
#comments .message { float: left; width: 568px; overflow: hidden; }
#comments .message .author { width: 568px; overflow: hidden; padding-bottom: 5px; border-bottom: 1px solid #B1BF99; }
#comments .message .author p { margin: 0; }
#comments .message .author .name { font-weight: 800; }
#comments .message .author .time { color: #4F5F32; }
#comments .message .text p { margin: 10px 0 0 0; }

/*
Forms
*/

#error h3, #error h4 { margin: 0 0 20px 0; }
#error ul { margin-top: 0; margin-bottom: 0; }

.submit input { font-weight: 800; padding: 5px; margin: 10px 0 0 0; }

form { margin: 0; }
form .rowwrap { width: 340px; overflow: hidden; padding: 4px 0; font-size: 11px; }
form .label { width: 100px; overflow: hidden; float: left; }
form label { font-weight: 800; }
form .input { width: 235px; overflow: hidden; float: left; margin-left: 5px; }
form .input input { width: 223px; }
form textarea { width: 328px; }
form p { display: inline; }

/*
Highlighter
*/

.code { height: 200px; overflow: scroll; border: 1px solid #000; margin: 10px 0; }
.code ol.hl-main{ padding-top: 5px; padding-bottom: 5px; line-height: normal; }
.code .hl-main{ color: #000; font-family: Courier New, Arial; }
.code .hl-prepro{ color: #006400; font-weight: bold; }
.code .hl-inlinetags{ color: #FF7A03; font-weight: bold; }
.code .hl-identifier{ color: #000; }
.code .hl-brackets{ color: #000; font-weight: bold; }
.code .hl-types{ color: #0000FF; font-weight: bold; }
.code .hl-var{ color: ##537F00; }
.code .hl-reserved{ color: #000; font-weight: bold; }
.code .hl-code{ color: #000; }
.code .hl-quotes{ color: #FF7A03; font-weight: bold; }
.code .hl-string{ color: #FF7A03; }
.code .hl-number{ color: #0000FF; }
.code .hl-comment{ color: #999; font-style: italic; }
.code .hl-mlcomment{ color: #FFA500; }
.code .hl-builtin { color: ##537F00; }

/**
 * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann
 * (http://qbnz.com/highlighter/ and http://geshi.org/)
 */

.html4strict  { height: 200px; overflow: scroll; font-family: Courier New, Arial; color: #006; border: 1px solid #000; font-size: 11px; }
.html4strict .kw2 { color: #000000; font-weight: bold; }
.html4strict .kw3 { color: #000066; }
.html4strict .es0 { color: #000099; font-weight: bold; }
.html4strict .br0 { color: #66cc66; }
.html4strict .sy0 { color: #66cc66; }
.html4strict .st0 { color: #ff7a03; }
.html4strict .nu0 { color: #cc66cc; }
.html4strict .sc-1 { color: #808080; font-style: italic; }
.html4strict .sc0 { color: #00bbdd; }
.html4strict .sc1 { color: #ddbb00; }
.html4strict .sc2 { color: #009900; }
.html4strict span.xtra { display: block; }

/*
Footer
*/

#footer { width: 960px; overflow: hidden; margin: 0 auto; text-align: left; }
#footer .column { float: left; width: 240px; padding: 0 0 10px 0; overflow: hidden; }
#footer .column h2 { margin: 15px 20px 20px 20px; padding: 0; font-weight: 600; font-size: 16px; font-weight: 600; color: #000; }
#footer .column h2 span { color: #4F5F32; } 
#footer .column p { font-size: 11px; line-height: 18px; margin: 10px 0 10px 20px; }
#footer .column ul { padding: 0; margin: 0; list-style: none; }
#footer .column li { float: left; width: 220px; overflow: hidden; padding: 0; margin: 5px 0 5px 20px; clear: both; font-size: 11px; line-height: 18px; }
#footer .link li { padding-left: 21px; background: url("/images/icon_checkbox.gif") 0 50% no-repeat; }
#footer .column li .date { width: 50px; float: left; overflow: hidden; color: #9AB667; font-weight: 800; }
#footer .column li .title { width: 160px; float: left; overflow: hidden; margin-left: 5px; }
#footer .column li a { color: #537F00; text-decoration: none; border-bottom: 1px solid #9AB667; padding-bottom: 1px; }
#footer .column a:hover, #footer .indicia a:hover { border-bottom: 1px solid #000; }

#indicia { width: 960px; overflow: hidden; clear: both; text-align: left; margin: 0 auto; font-size: 11px; color: #000; }
#indicia p { margin: 0; padding: 20px; }
#indicia a { color: #000; }