/***** Design/CSS/XHTML by Noah Brier (http://www.noahbrier.com) *****/

body {
  text-align: center;
  padding: 0;
  margin: 0;
  }

#container {
  margin: 0 auto;
margin-top: 5px;
  width: 900px;
  }
  
span.alt {
display: none;
}

/***** MAIN PHOTO SECTION *****/

#mainphotos {
  background: #333;
margin: 0;
  padding: 0;
  }
  
#mainphotos h1 {
margin: 0;
padding: 0 15px 0 0;
position: relative;
bottom: 15px;
font: 4em "gill sans", helvetica, verdana, sans-serif;
color: #FFF;
text-align: right;
width: 600px;
float: right;
}

#mainphotos b.h1 {
font: 30px normal "gill sans", helvetica, verdana, sans-serif;
position: relative;
bottom: 20px;
}

#mainphotos h1 a {
text-decoration: none;
border: 0;
color: #FFF;
}

#mainphotos h1 a:hover {
text-decoration: none;
border: 0;
}

#mainphotos img {
border: solid #FFF 6px;
}

#mainphotos p.img {
clear: both;
position: relative;
bottom: 40px;
}

img.left {
float: left;
}

img.right {
float: right;
}

#mainphotos p.caption {
padding: 5px;
margin: 10px auto;
background: #FFF;
width: 400px;
color: #666;
font: 12px "gill sans", helvetica, verdana, sans-serif;
text-align: justify;
position: relative;
bottom: 41px
}

#mainphotos p.prevnext {
height: 34px;
width: 400px;
margin: 10px auto;
padding: 5px;
position: relative;
bottom: 30px;
}

#mainphotos p.prevnext a {
text-decoration: none;
border: 0;
}

#mainphotos p.prevnext a:hover {
text-decoration: none;
border: 0;
}

#mainphotos p.prevnext img {
border: 0;
padding: 0;
}

#mainphotos p b {
font: 20px "gill sans", helvetica, verdana, sans-serif;
}

#mainphotos p i {
font-size: 10px;
}

/***** THUMBNAILS *****/

#thumbnails {
width: 900px;
background: #333;
height: 150px;
margin-top: 5px;
clear: both;
padding: 20px 0 20px 0;
}

#thumbnails p {
padding: 8px;
margin: 0 auto;
width: 700px;
background: #FFF;
text-align: center;
}

#thumbnails img {
padding: 0 5px;
border: 0;
}

#thumbnails a {
border: solid #333;
border-width: 0 5px 0 0;
text-decoration: none;
}

#thumbnails a:hover {
border: solid #666;
border-width: 0 5px 0 0;
text-decoration: none;
}

/***** NAVIGATION *****/

ul#nav {
list-style-type: none;
margin: 0;
padding: 0;
float: left;
position: relative;
left: 15px;
}

ul#nav li {
display: inline;
}

ul#nav li a {
float: left;
width: 33px;
height: 160px;
padding-left: 10px;
background: #333;
}

ul#nav li a.features {
background: url(http://www.ericsumberg.com/staticimages/features-off.gif) no-repeat;
}

ul#nav li a.features:hover {
background: url(http://www.ericsumberg.com/staticimages/features-on.gif) no-repeat;
}

ul#nav li a.sports {
background: url(http://www.ericsumberg.com/staticimages/sports-on.gif) no-repeat;
}

ul#nav li a.sports:hover {
background: url(http://www.ericsumberg.com/staticimages/sports-off.gif) no-repeat;
}

ul#nav li a.sights {
background: url(http://www.ericsumberg.com/staticimages/sights-off.gif) no-repeat;
}

ul#nav li a.sights:hover {
background: url(http://www.ericsumberg.com/staticimages/sights-on.gif) no-repeat;
}

ul#nav li a.personal {
background: url(http://www.ericsumberg.com/staticimages/personal-off.gif) no-repeat;
}

ul#nav li a.personal:hover {
background: url(http://www.ericsumberg.com/staticimages/personal-on.gif) no-repeat;
}

ul#nav li a.contact {
background: url(http://www.ericsumberg.com/staticimages/media_off.png) no-repeat;
}

ul#nav li a.contact:hover {
background: url(http://www.ericsumberg.com/staticimages/media_on.png) no-repeat;
}

p.footer {
font: 12px "gill sans", helvetica, verdana, sans-serif;
text-align: center;
clear: both;
}

#media {
margin-top: 40px;
padding: 5px;
}