body {
    background: url(../img/design/webpageBG.jpg) repeat-x #303030;
    border: 0;
    margin: 0;
    padding: 0;
    outline: none;
    font-family: verdana, helvetica, sans-serif;
    font-size: 11px;
    color: #fff;
}

#webpage-container {
    position: relative;
}

#header-container {
    
}

#header-container #logoBG a span {
    display: none;
}
#header-container #logoBG {
    background: url(../img/design/logoBG.png) no-repeat;
    width: 88px;
    height: 315px;
    position: relative;
    left: 15px;
}

#header-container #logoBG #logo a, #header-container #logoBG #logo a:link {
    background: url(../img/design/logo.png) no-repeat;
    width: 67px;
    height: 207px;
    display: block;
}

#header-container #logoBG #logo a h1 {
    display: none;
}

#header-container #logoBG #logo {
    position: relative;
    top: 20px;
    left: 8px;
}



/* portfolio */
ul.gallery li {
	list-style: none;
    list-style-position: inside;
	margin: 0; 
    padding: 0;
    border: 0;
}
ul.gallery li {
	float: left;
	margin: 3px; 
    padding: 0;
	text-align: center;
    border: 6px solid #fff;
}
ul.gallery li a {
    border: 0;
    padding: 0;
    margin: 0;
    outline: none;
}
ul.gallery li a.thumb {
	width: 210px; /*--Width of image--*/
	height: 100px; /*--Height of image--*/
	padding: 0;
    border: 0;
	cursor: pointer;
}
ul.gallery li span { /*--Used to crop image--*/
	width: 210px;
	height: 100px;
    padding: 0;
    margin: 0;
	overflow: hidden;
	display: block;
}
ul.gallery li a.thumb:hover {
    background: #000;
}
ul.gallery li h2 {
	font-size: 1em;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0; 
    padding: 10px;
	background: #f0f0f0;
}
ul.gallery li a {text-decoration: none; color: #777; display: block;}

#footer-web20 a, #footer-web20 a:link {
    float: left;
    display: block;
    width: 48px;
    height: 48px;    
}

#portfolio {
    clear: both;
}
#footer-container #footer-web20 {
    position: relative;
    top: -20px;
}
#footer-container {
    position: absolute;
    top: 380px;
    left: 10px;
}

#footer-copyright {
    font-size: 10px;
    color: #666;
    clear: both;
    position: relative;
    top: -15px;
    left: 10px;
}

#content-container {
    position: absolute;
    top: 15px;
    left: 170px;
    width: 780px;
}

#top-nav-container {
    position: absolute;
    top: 0;
    left: 0;
}

#adv2 {
  position: absolute;
  top: 250px;
  left: -5px;
}
#adv2 ul {
 display:block;
 width:50px;
 height:50px;
 float:left;
 list-style: none;
 text-align: center;
}
#adv2 li { float:left; }
#adv2 li.split { clear:both; }
#adv2 li a {
    color: #fff;
  display:block;
  height:25px;
  width:25px;
  line-height:22px;
  text-decoration:none;
  background:#222;
}
#adv2 li a:hover {
  background:#0A0A0A;
}
#adv2 li a.selected {
  background: #fff;
  color:#111;
  font-weight:bold;
}

#adv2 span {
  height:50px;
  display:block;
  line-height:45px;
  width:450px;
  float:right;
  background:#181818;
}

#adv3 a {
  color: #fff;
  font-size:2em;
  font-weight:bold;
  text-decoration:none;
  margin:6px;
}
#adv3 a:hover { color:#68D; }
#adv3 p {
  color:#888;
  margin:5px;
  font-style:italic; 
}
#adv3 p a {
  margin:0;
  color:#CCC;
  font-size:1em;
  font-weight:bold;
  text-decoration:underline;
}
#adv3 p a:hover { color:#FFF; }

#message {
  margin:10px auto;
  border:6px solid #222;
  width:240px;
  height:40px;
  background:#0D0D0D;
  font-size:1.3em;
  line-height:2em;
  color:#FC4;
}


#p1subhead,#p2subhead,#p3subhead,#p4subhead {
    position: absolute;
    top: 10px;
    left: -5px;
}

#photo-container {
    width: 245px;
    height: 266px;
    position: absolute;
    top: 15px;
    left: 50px;
}

#detail-container {
    width: 667px;
    height: 344px;
    position: absolute;
    top: 15px;
    left: 50px;
    background: #fff;
}

#detail-overlay {
    position: absolute;
    top: 0;
    left: 0;
}
#photo-overlay {
    position: absolute;
    top: 0;
    left: 0;
}
#detail-info,#photo-info {
    position: relative;
}

#project-title {
    position: absolute;
    bottom: 55px;
    left: 13px;
    font-size: 16px; font-weight: bold;
    color: #fff;
}

#project-desc {
    position: absolute;
    bottom: 40px;
    left: 13px;
    font-size: 10px;
    color: #666;
}

#photo-title {
    position: absolute;
    top: 25px;
    right: 13px;
    width: 350px;
    font-size: 16px; font-weight: bold;
    color: #fff;
}
#photo-date:before {
    content:"# ";
}
#photo-date {
    position: absolute;
    top: 205px;
    left: 80px;
    width: 100px;
    color: #666;
    font-size: 12px;
    font-family: courier, arial, sans-serif;
}

#photo-desc {
    position: absolute;
    right: 13px;
    top: 60px;
    width: 350px;
    background: #fff;
    padding: 15px;
    font-size: 10px;
    color: #666;
}
#photo-tools {
    position: absolute;
    bottom: 58px;
    right: 15px;
    text-align: right;
    font-size: 10px;
    color: #666;
}

#info-box, #photo-box {
    position: relative;
    width: 650px;
    height: 340px;
    top: 10px;
    left: 10px;
}

#detail-close {
    position: absolute;
    bottom: 2px;
    right: 2px;
    cursor: pointer;
    z-index: 60;
}

#photo-close {
    position: absolute;
    top: 2px;
    right: 2px;
    cursor: pointer;
    z-index: 60;
}

#validators {
    width: 200px;
    position: absolute;
    top: 25px;
    left: 780px;
}