body {font:13px/18px corbel, helvetica, arial, sans-serif; letter-spacing: 0px; color: black; background-color: white;}

a { color: gray; text-decoration: none; }
a:hover, a:active {color: #FFCC00;text-decoration: none;outline: none;}

.column { float: left; width: 360px; padding-right: 27px; }
#navigation a, #previous a, #next a, #image_nav li a { display: block; }

h1 { position: relative; left: 0; top: 0px; background: url(img/h1.png); text-indent: -9999px; width: 185px;height: 29px; }
h2 { padding: 1em 0 3em 0; font-size: 16px;}

/* Branding
*/

#menu { position: absolute; left: 205px; top: 0px; width: 850px; height: 41px; font-size: 17px; }

#menuBio, #menuPortfolio, #menuProjects, #menuBlog { float: left; margin-left: 15px;}

#menuBio { width: 132px; height: 13px; background: url(img/menu_bio.png); text-indent: -9999px;}
#menuPortfolio .menuTopLine { width: 97px; height: 13px; background: url(img/menu_portfolio.png); text-indent: -9999px;}
#menuProjects .menuTopLine { width: 90px; height: 13px; background: url(img/menu_projects.png); text-indent: -9999px;}
#menuBlog { width: 46px; height: 13px; background: url(img/menu_blog.png); text-indent: -9999px;}
.menuBottomLine p { float: left; margin: 10px 12px 0 0;}

#menuPersonal { width: 93px; height: 13px; background: url(img/menu_sub_personal.png); text-indent: -9999px; }
#menuCommissioned { width: 200px; height: 13px; background: url(img/menu_sub_commissioned.png); text-indent: -9999px; }

#menuPeople1 { width: 83px; height: 13px; background: url(img/menu_sub_people1.png); text-indent: -9999px; }
#menuPeople2 { width: 82px; height: 13px; background: url(img/menu_sub_people2.png); text-indent: -9999px; }
#menuStreet { width: 66px; height: 13px; background: url(img/menu_sub_street.png); text-indent: -9999px; }
#menuHome { width: 50px; height: 13px; background: url(img/menu_sub_home.png); text-indent: -9999px; }
#menuAway { width: 49px; height: 13px; background: url(img/menu_sub_away.png); text-indent: -9999px; }
#menuPdf { width: 73px; height: 13px; background: url(img/menu_sub_pdf.png); text-indent: -9999px; }

#menuHiroshima { width: 106px; height: 13px; background: url(img/menu_sub_hiroshima.png); text-indent: -9999px; }
#menuAsian { width: 61px; height: 13px; background: url(img/menu_sub_asian.png); text-indent: -9999px; }



/* Content
*/

#content { position: relative; left: 6%; width: 800px; }
#content p, #slides p { padding-bottom: 1em; }
#content ul { padding-bottom: 1em; }

#images { position: relative; left: 6%; width: 1200px; }
#images img { height: 800px;}

.img_column { width: 1300px; }
.img_column img { float: left; padding-right: 27px; }


/* This was a real bitch.  The jQuery Cycle plugin takes all the images into Absolute positioning and removes it from the flow, which means those arrows would disappear under the image. So I styled the containers to be just a bit bigger than the image height and set the arrows to be positioned 100% below the top of its container, thereby pushing it into position.
*/
#image_nav { position: relative;}
#image_nav li { width: 52px; height: 810px; float: left; margin-right: 15px; }
#previous a, #next a { height: 15px; position: relative; top: 100%; }
#previous a { text-indent: -9999px; background-image: url(img/nav_left_arrow.png); }
#next a { text-indent: -9999px; background-image: url(img/nav_right_arrow.png); }


#footer { position: absolute; left: 6%; bottom: 0; color: black; background-color: white; font-size: 10px; padding: 4px 12px; opacity: 0.8; }

#footer a { display: inline; }