body { margin:0px; padding:0px; font-family:arial; font-size:12px; line-height:15px; color:#333333; background-color:#CCCCCC; }
h1 { font-size:18px; color:#0066FF; font-weight:bold; }
h2 { font-size:15px; color:#330033; font-weight:bold; }
a { color:#999999; text-decoration:none; }
a:hover { text-decoration:none; }
.clear { float:none; clear:both; height:0; }

#bg { float:left; }
#bg .yellowdot { float:left; width:16px; height:16px; background-image:url(images/dot_yellow.jpg); }
#bg .purpledot { float:left; width:16px; height:16px; background-image:url(images/dot_purple.jpg); }
#bg .greydot { float:left; width:16px; height:16px; background-image:url(images/dot_grey.jpg); }
#bg .bluedot { float:left; width:16px; height:16px; background-image:url(images/dot_blue.jpg); }
#bg .cleardot { float:left; width:16px; height:16px; background-image:none; }

#content { margin:auto; width:700px; }

#introLogo { display:block; width:164px; height:29px; background-image:url(images/header_name.jpg); }

#content #header { padding-left:15px; padding-right:15px; padding-top:18px; width:670px; height:82px; margin-top:50px; margin-bottom:20px; background-color:#FFFFFF; }
#content #header #logo { display:block; float:left; width:71px; height:64px; background-image:url(images/logo_ojg.jpg); }
#content #header #name { display:block; float:left; margin-top:18px; width:164px; height:29px; background-image:url(images/header_name.jpg); }
#content #header #nav { float:right; margin-top:21px; height:20px; }
#content #header #nav .nav { display:block; float:left; align:center; padding:4px; padding-top:2px; padding-bottom:2px; font-weight:bold; }
#content #header #nav #home { color:#999999; }
#content #header #nav #home:hover { background-color:#CCCCCC; color:#FFFFFF; }
#content #header #nav #resume { color:#999999; }
#content #header #nav #resume:hover { background-color:#CCCCCC; color:#FFFFFF; }
#content #header #nav #portfolio { color:#999999; }
#content #header #nav #portfolio:hover { background-color:#CCCCCC; color:#FFFFFF; }
#content #header #nav #contact { color:#999999; }
#content #header #nav #contact:hover { background-color:#CCCCCC; color:#FFFFFF; }
#content #header #nav .line { float:left; margin-left:7px; margin-right:7px; width:1px; height:20px; background-color:#FF9600; }

#content #middle { padding:15px; width:670px; background-color:#FFFFFF; }

#content #middle #welcome { padding-bottom:25px; width:670px; }
#content #middle #welcome h1 { padding-bottom:10px; }
#content #middle #welcome h2 { padding-bottom:7px; }
#content #middle #welcome p { margin:0p; padding:0px; }

.screenshot { float:left; width:250px; padding-right:80px; margin-bottom:50px; border-right:1px solid #FF9600; }
.info { padding-left:15px; float:left; width:250px; }

#content #middle #footero { padding-top:5px; width:670px; border-top:1px dotted #FF9600; font-size:11px; }
#content #middle #footero #footeri { padding-top:5px; width:670px; border-top:1px solid #330033; }
#content #middle #footero #footeri #apple { display:block; width:22px; height:26px; background-image:url(images/apple.jpg); }
#content #middle #footero #footeri #fireworks { display:block; width:25px; height:24px; background-image:url(images/fwlogo.jpg); }