/* body and outer div*/
body {font: 14px "Trebuchet MS", Georgia, Arial; background: #333333 url('images/bg.gif') repeat-x;  text-align: center; margin: 0; padding: 0;}


/* ==============
    Tag Styles
=================*/
h1{font: bold 20px "Trebuchet MS", Georgia, Arial; color: #fff; position: absolute; top: 25px; left: 220px;  margin: 0; z-index: 1;}
h2{font: 24px "Trebuchet MS", Georgia, Arial; background: url('images/h2.gif') no-repeat top left; margin: 0 0 20px 0; padding: 15px 0 5px 15px; text-align: left; color: #036; width: 590px; font-weight: normal; letter-spacing: 2px;}
  .shot h2{text-align: center; font-size: 12px; }
  #sub h2, #blog div.widecolumn h2 {background: url('images/h2-long.gif') no-repeat top left; width: 859px; margin-left: 3px;}
h3 {font: 20px "Trebuchet MS", Georgia, Arial; color: #036; margin-left: 10px;}
img {border: 0;}

/* Content structure */
#header{height: 155px; background: url('images/logo.gif') no-repeat top left; width: 900px; margin:  0 auto;  text-align: left; z-index: 100; position: relative; margin-bottom: 50px;}
#bodyImage {background: url(images/design_image.gif) no-repeat  100% 1px; height: 150px; position: absolute; top: 0; right: 0; z-index: 1; width: 600px;}

#contentWrapper {width: 900px; margin:  0 auto 0 auto;  background: #fff url('images/content-top.gif') no-repeat top left; clear: both;}
#content {line-height: 140%;  width: 890px; padding: 20px 0px 70px 10px; text-align: left; background:  url('images/content-bottom.gif') no-repeat bottom left;}
#primaryContent {width: 605px; float: left; }
#sub #primaryContent {width: 850px;}

#secondaryContent {width: 271px; float: right; margin-right: 5px; display: inline;}
#secondaryContent h2,#sidebar h2 {width: 245px; background: url('images/secondary-h2.gif') no-repeat top left; font-size: 20px; font-weight: normal; padding: 12px 0 10px 15px; margin-bottom: 10px;}
#secondaryContent a {border: 4px solid #dadadd; margin: 10px 0 0px 15px; display: block; width: 220px; padding: 0; height: 70px;}
#secondaryContent a img {margin: 0; padding: 0;}
#secondaryContent a:hover {border: 4px solid #369;}
#primaryContent p,#content p {margin: 0 25px 15px 15px;}

#primaryContent a,#content a {font-weight: bold;}

#footer {margin: -30px auto 0px auto;  width: 900px;  text-align: left;  padding: 5px 0 20px 5px; color: #fff;  font-size: 12px;}
#footer p#copy {float: left; width: 300px; padding-left: 10px;  margin: 10px 0 0 0;}
#footer ul#footerLinks {float: right; width: 390px; text-align: right; margin: 10px 0 0 0; list-style: none; display: inline;}
#footer ul#footerLinks li {float: left;}
#footer ul#footerLinks li a {color: #fff;}


/* Main Navigation */
#nav  {background:  url(images/navigation/navigation-left.gif) no-repeat top left; padding-left: 7px; color: #fff;   float: left; width: 588px; margin: 120px 0 0 0;}
#nav li {float: left;  margin: 0; list-style:none;}
#nav li a{color: #fff;  background: #010136 url(images/navigation/divider.gif) repeat-y 100% 5px;  border-top: 5px solid #242484; display: block; text-decoration: none; text-align: center; padding: 5px;  width: 75px; font: bold 14px "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS";}
#nav li span {float: left;}
#nav li a:hover{color: #fff; background: #242483 ;}
#navon{color: #fff; background: #242483; border-top: 5px solid #242484; display: block; text-decoration: none; text-align: center; padding: 5px;  width: 75px; font: bold 14px "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS";}
#nav li.last {background:  url('images/navigation/navigation-right.gif') no-repeat top right; padding-right: 7px;}
#nav li.last a {background-image: none;}

/* Breadcrumbs */
#bread a:link,#bread a:visited, #bread a:active {padding: 2px; text-decoration: underline; font-size: 10px; color:  #036;}
#bread a:hover {color:  #369; text-decoration: none;}
#bread{color: #000; font-size: 10px; padding: 0 10px 10px 10px; margin-left: 3px;  font-family: Arial,Helvetica,Sans-serif; clear: both;}
#bread span {font-size: 10px; padding: 2px;}

/* Forms */
.input {text-align: left; padding: 10px 0px 3px 3px;}
.space2{padding-top: 10px; text-align: right;}
#formsub {margin: 3px 0px 5px 3px; border: 1px solid #000; background: #369; color: #fff; font-weight: bold;}
.contact #content p {margin: 0 0 10px 0;}
#captcha {margin-left: 14em;}
/* resume */
#content .experience {color: #036;  font-weight: bold; float: left; width: 250px; margin: 0 0 0 10px;}
.details {width: 590px; line-height: 140%; float: right; margin: 0 40px 15px 0;}
#about{width: 600px;}
.resume ul {margin-bottom: 0;}
.resume { clear: both;}
.download {text-align: right; padding: 0 0 20px 0; margin-right: 30px; color: #036;}

/* Portfolio Page */
.portfolioSite {padding-bottom: 20px; float: left;}
.screenShot {width: 154px; float: left; display:inline; margin: 3px 20px 0px 10px;}
.screenShot a.image {border: 2px solid #666;padding: 0;}
.screenShot img {display: block;}
.screenShot a.image:hover {border: 2px solid #369; display: block;}
.screenShot a {text-align: center; text-decoration:none; display: block; padding: 3px 0;}
.siteText {width: 677px; float: left;}
#sub .siteText h3 {border-bottom: 1px dashed #CCDFF4; color: #369; padding-bottom: 2px; margin: 0 0 5px 0;}


/* Various presentation */
.contxt {padding: 10px;line-height: 120%;}
.right {text-align: right;}
.border {border: 1px solid #369; width: 200px;}

ul li {margin: 0px 20px 2px 0px;}
.center{text-align: center;}
.clear {clear: both;}
pre {margin: 0 30px 0 10px; background: #f0f6fd;  border: 1px solid #036; padding: 10px 10px 10px 25px; font-size: 11px; font-weight: bold;}
.about strong {color: #036;}
.about p.usability strong {color: #000;}
/* Contact */
fieldset {border: 0;}
label {float: left; width: 13em; text-align: right; padding-right: 10px;}
#blog label {float: none;}
fieldset .text {margin-bottom: 5px;}
#formsub {width: 60px; margin-left: 14.5em;}


/* ====================
  links 
=======================*/
a:link,a:visited,a:hover,a:active {color: #036; text-decoration: none;}
a:visited{color: #999;}

a.pdf {background: url(images/pdf.jpg) no-repeat center left; padding: 0 0 0 25px;}
a.word {background: url(images/word.gif) no-repeat center left; padding: 0 0 0 25px; height: 18px;}


/* Use this Class for boxes with backgrounds or borders that contain floated boxes. This clears the box to contain the floats */
.clearFix:after {
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
}
.clearFix {display:inline-table;}
/* Hide from IE Mac \*/
.clearFix {display:block;}
/* End hide from IE Mac */



/* ====================
   blog Styles 
=======================*/
small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {color: #777;}
small {margin: -20px 0 0 15px; padding-bottom: 0;}
body .entry ul {margin-left: 30px; padding: 0;list-style: disc;} 
body .entry li {margin: 7px 0 8px 10px;}
body#blog #primaryContent h2 { background-image: none; margin: 0; padding: 0 0 0 15px; line-height: 90%;}
body#blog #primaryContent h2 a{font: bold 20px "Myriad Web", Georgia, Arial;}
#blog div.widecolumn h2 a {font: normal 24px "Myriad Web", Georgia, Arial; line-height: 90%;}
.narrowcolumn h3{margin: 0 0  0 15px;}

/* Begin Sidebar */
#sidebar{width: 271px; float: right; font: 12px 'Lucida Grande', Verdana, Arial, Sans-Serif; padding: 0px 0px 10px 0px; margin-bottom: 20px;}
#sidebar form {margin: 0;}
#sidebar ul {margin: 0; padding: 0;}
#sidebar ul li {list-style-type: none; list-style-image: none; margin-bottom: 15px;}
#sidebar ul p, #sidebar ul select {margin: 5px 0 8px;}
#sidebar ul ul, #sidebar ul ol {margin: 5px 0 0 20px;}
#sidebar ul ul ul, #sidebar ul ol {margin: 0 0 0 20px;}
ol li, #sidebar ul ol li {list-style: decimal outside;}
#sidebar ul ul li, #sidebar ul ol li {margin: 3px 0 0; padding: 0;}

#sidebar a {font-size: 12px; font-weight: normal;}
/* End Sidebar */

/* Blog Headers */
.post h2 {margin: 0;}
.post h2 a {font: bold 16px 'Lucida Grande', Verdana, Arial, Sans-Serif; color: #036; text-decoration: none; margin-bottom: 15px;}
div.entry h3 {margin-bottom: 5px;}
/* Entry */
.entry {margin-top: 15px;}
.entry ol {padding: 0 0 0 35px; margin: 0;}
.entry p {margin: 0 0px 10px 0; padding-right: 20px;}
.entry ol li {margin: 0; padding: 0;}
.postmetadata ul, .postmetadata li {display: inline; list-style-type: none; list-style-image: none;}
.postmetadata {margin-bottom: 25px;}
.postmetadata small {margin: 0;}
/* End Entry  */

/* Begin Form Elements */
#sidebar #searchform #s {width: 160px;  padding: 2px;  font-size: 10px;}
#sidebar #searchsubmit {padding: 1px;  background: #369;  color: #fff;  border: 1px solid #000;  font-size: 10px;}

.entry form { /* This is mainly for password protected posts, makes them look better. */text-align:center}
#blog select {width: 130px;}

#commentform input {width: 170px; padding: 2px; margin: 5px 5px 1px 0;}
#commentform textarea {width: 400px; padding: 2px;}
#commentform #submit {margin: 0;}
/* End Form Elements */


/* Begin Comments*/
.alt {margin: 0; padding: 10px;}
#commentlist {padding: 0; text-align: justify;}
#commentlist li {margin: 15px 0 3px; padding: 5px 10px 3px; list-style: none;}
#commentlist p {margin: 10px 5px 10px 0;}
#commentform p {margin: 5px 0;}
#commentform {margin: 0 0 20px 15px;}
.nocomments {text-align: center; margin: 0; padding: 0;}
.commentmetadata {margin: 0; display: block;}
/* End Comments */


/* Begin Various Tags & Classes */
acronym, abbr, span.caps {cursor: help;}
acronym, abbr {border-bottom: 1px dashed #999;}
blockquote {margin: 15px 30px 0 30px; padding-left: 0; border-left: 5px solid #ddd;}
blockquote cite {margin: 5px 0 0; display: block;}
.navigation {display: block;   margin: 10px 0 20px 15px;}
/* End Various Tags & Classes*/