html,body,div,span,h1,h2,h3,h4,h5,h6,table,tr,th,td,a,img,p { 
margin:0;
padding:0;
border:0;
outline:0;
}

html {
overflow-y: scroll;
}

body {
font-family:Helvetica,sans-serif;
font-weight:normal;
color:#333; 
background-color:#ffffff;
text-align:center;
background-image:url('topbar.png');
background-repeat:repeat-x;
}

a {
text-decoration:none;
color:#3366cc;
}

a:hover {
color:#4488ff;
}

a.plink {
font-weight:normal;
color:#264d99;
}

p { 
vertical-align:top;
clear:both;
margin-bottom:14px;
font-size:0.9em;
line-height:1.5em;
}

h1 {
font-size:1.5em;
font-weight:normal;
float:left;
text-shadow: 0px 1px 0px #fff;
}

h2 {
font-size:1.0em;
font-weight:normal;
margin-bottom:8px;
}

#main {
width:962px;
padding: 0 30px;
margin:0 auto;
text-align:left;
position:relative;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}

#projects { 
width:772px;
}

#photobox { 
position:relative;
width:910px;
height:512px;
border:1px solid #000000;
}

#prevbutton { 
position:absolute;
top:100px;
left:0;
padding-top:100px;
padding-bottom:100px;
padding-left:12px;
padding-right:40px;
}

#nextbutton { 
position:absolute;
top:100px;
right:0;
padding-top:100px;
padding-bottom:100px;
padding-left:40px;
padding-right:12px;
}

#caption {
position:absolute;
bottom:0px;
width:886px;
padding-top:16px;
padding-bottom:8px;
padding-left:12px;
padding-right:12px;
background-image:url('caption_bg.png');
line-height:1.5em;
color:#333;
font-size:0.9em;
font-weight:normal;
}

.date {
color:#333;
font-size:0.9em;
font-weight:normal;
float:right;
text-align:right;
padding-left:40px;
line-height:1.25em;
}

img.border { 
border:1px solid #333333;
}

.photo {
position:absolute;
top:0;
left:0;
margin:0;
padding:0;
}

.header {
width:100%;
margin-top:12px;
margin-bottom:36px;
}

.row { 
width:100%;
clear:both;
}

.nav {
font-weight:normal;
padding-top:8px;
text-align:right;
}

.toplink {
padding-left:16px;
padding-top:8px;
padding-bottom:8px;
text-shadow: 0px 1px 0px #fff;
}

.leftcol { 
float:left;
vertical-align:top;
width: 30%;
padding-bottom:8px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}

.leftcolnarrow { 
float:left;
text-align:right;
vertical-align:top;
width: 30%;
padding-bottom:16px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}

.rightcol {
float:right;
width:57%;
padding-bottom:8px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}

.footer {
color:#666666;
font-size:0.7em;
clear:both;
padding-top:4px;
padding-bottom:20px;
}

.copyright {
float:right;
text-align:right;
}

.small {
font-size:0.8em;
}

#photo {
width: 360px;
height: 200px;
}

@media only screen and (max-width: 960px) {
#main { width: 100%; padding: 0 20px; }
#photo { margin: auto; }
.leftcol { width: 100% }
.rightcol {
  clear:both;
  float:none;
  width: 100%;
  padding-top: 20px;
}
}

@media only screen and (max-width: 479px) {
#photo { width: 280px; height: 156px; }
}