@charset "UTF-8";
/* CSS Document */

 /* CSS Reset */
  * { margin:0; padding:0; }
 body {
 background-image:url(img/bg_body.jpg);
 background-repeat:repeat;
  }
body {
font-family:Verdana;
color: #5f5f5f;
text-decoration: none;
word-spacing: normal;
text-align: left;
letter-spacing: 0;
line-height: 1.5em;
font-size: 0.8em;
}
a:link { 
	color: #02A1FC;
	}
a:visited { 
	color: #02A1FC;
	}
a:hover { 
	color: #ff6f66;
	background-color: #ffffff;
	text-decoration: none;
	}
a:active { 
	color: #02A1fc;
	}
img {
border: 0}


#container {
    width:1024px;
	margin:50px auto;
	background-color:0099ff;
  }

#header {
  height:108px;
  width:960px;
  margin:0 auto;
}
#header h1 {
    display:block;
    float:left;
    width:320px;
    height:110px;
    background:url(img/logo.jpg)  no-repeat 0 0;
    text-indent:-10000px;
  }
#header h1 a {
    display:block;
    width:100%;
    height:100%;
  }
#header h1 a:hover {
    background:url(img/logo.jpg) no-repeat 0 -110px;
}
#header ul {
    display:block;
    float:left;
    width:640px;
    height:110px;
    background:url(img/menu.jpg) no-repeat 0 0;
    list-style:none;
  }
  #header ul {
    display:block;
    float:right;
    width:640px;
    height:110px;
    background:url(img/menu.jpg) no-repeat 0 0;
    list-style:none;
  }
   #header ul li {
    display:block;
    float:left;
    height:110px;
    text-indent:-10000px;
  }


 #home {
    width:160px;
  }
  #gallery {
    width:160px;
  }
  #info {
    width:160px;
  }
  #contact {
    width:160px;
  }

  #header ul li a {
    display:block;
    width:100%;
    height:100%;
  }

     #home a:hover {
    background:url(img/menu.jpg) no-repeat 0 -110px;
  }
  #gallery a:hover {
    background:url(img/menu.jpg) no-repeat -160px -110px;
  }
  #info a:hover {
    background:url(img/menu.jpg) no-repeat -320px -110px
  }
  #contact a:hover {
    background:url(img/menu.jpg) no-repeat -480px -110px;
  }

  
 
#content {
    width:960px;
    margin:20px auto;
  }
#leftcolumn {
display:block;
    float:left;
    width:390px;
    height:570px;
    background:url(img/monitor.jpg)  no-repeat 0 0;
	background-color:#FFFFFF;
}
#rightcolumn { 
display:block;
    float:left;
    width:570px;
    height:200px;
    background:url(img/featured_bg_top.jpg)  no-repeat 0 0;
}
#rightcolumn_content {
display:block;
    float:left;
    width:550px;
    height:370px;
	padding-left:10px;
	padding-right:10px;
	background-color:#FFFFFF;
}
#content_footer {
display:block;
    float:left;
    width:960px;
    height:30px;
	background-color:0099ff;
    background:url(img/featured_bg_footer.jpg);
}

#bottom_boxes {
width:960px;
height:190px;
margin:20px auto;
}

#leftbox {
display:block;
    float:left;
    width:308px;
    height:190px;
	padding-top:10px;
    background:url(img/btm_box_left.jpg)  no-repeat 0 0;
}
#bottom_box_margin_left {
display:block;
    float:left;
    width:20px;
    height:190px;
    background:url(img/btm_box_div_left.jpg)  no-repeat 0 0;
	}
#centerbox {
display:block;
    float:left;
    width:304px;
    height:190px;
	padding-top:10px;
    background:url(img/btm_box_ctr.jpg)  no-repeat 0 0;
}
#bottom_box_margin_right {
display:block;
    float:left;
    width:20px;
    height:190px;
    background:url(img/btm_box_div_right.jpg)  no-repeat 0 0;
	}
#rightbox {
display:block;
    float:right;
    width:308px;
    height:190px;
	padding-top:10px;
    background:url(img/btm_box_right.jpg)  no-repeat 0 0;
}
#gallery_page_div {
 	display:block;
	float:none;
	width:960px;
	height:630px;
	padding-top:20px;
	background:url(http://www.johnpedersenphotography.com/headshots/img/gallery_bg.jpg) no-repeat 0 0;
	}

 #footer {
 	margin-top:20px;
    clear:both;
    width:1024px;
	padding:20px;
  } 
  
.galleria{list-style:none;width:200px}
.galleria li{display:block;width:80px;height:80px;overflow:hidden;float:left;margin:0 10px 10px 0}
.galleria li a{display:none}
.galleria li div{position:absolute;display:none;top:0;left:180px}
.galleria li div img{cursor:pointer}
.galleria li.active div img,.galleria li.active div{display:block}
.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto}
.galleria li .caption{display:block;padding-top:.5em}
* html .galleria li div span{width:400px} /* MSIE bug */