/* ====== CP styles ====== */

body, html, a, p, h1, h2, h3, h4, h5, h6, ul, ol, li, img, table, tr, td, form, div, span, address {
  margin: 0;
  padding: 0;
  border: none;
  }

body {
  color: #999;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: small;
  font-size: 66%;
  background-color: #333;
  background-image: url(images/structures/pixel.gif);
  background-repeat: no-repeat;
  }
	
/* ====== general ====== */

.hidden {
  display: none;
  }

a {
  color: #fff;
  text-decoration: none;
  }

a:hover {
  text-decoration: underline;
  }

.clearall {
  clear: both;
  height: 0;
  line-height: 0;
  }
  
div#wrapper {
  position: relative;
  width: 774px;
  margin-left: auto;
  margin-right: auto;
  }
  
p {
  margin-bottom: 16px;
  }
  
p strong {
  font-weight: normal;
  color: #ccc;
  }
  
/* ====== basic page structures ====== */

h1#logo {
  position: absolute;
  top: 75px;
  left: 0;
  width: 180px;
  height: 64px;
  background-image: url(images/structures/CP_logo.gif);
  background-repeat: no-repeat;
  }
  
h1#logo span {
  display: none;
  }
  
h2 {
  color: #fff;
  font-size: 110%;
  margin-bottom: 16px;
  }
   
h3 {
  color: #ccc;
  font-size: 110%;
  margin-bottom: 4px;
  clear: both;
  }
  
h4 {
  font-size: 100%;
  color: red;
  margin-bottom: 12px;
  }

img#logovert {
  position: absolute;
  top: 0;
  left: 66px;
  }

img#logohoriz {
  position: absolute;
  top: 107px;
  left: 180px;
  }

img#frametop {
  position: relative;
  top: 0;
  left: 0;
  }

img#framebottom {
  position: relative;
  bottom: 0;
  left: 0;
  }

img#thumbsframeleft {
  position: absolute;
  top: 492px;
  left: 219px;
  }

img#thumbsframeright {
  position: absolute;
  top: 492px;
  right: 0;
  }
    
/* ====== nav ====== */

ul#navprimary {
  position: absolute;
  top: 299px;
  left: 8px;
  width: 58px;
  }
  
ul#navprimary li {
  position: relative;
  text-align: right;
  list-style: none;
  display: block;
  height: 7px;
  margin-bottom: 12px;
  float: right;
  }
  
ul#navprimary li a {
  display: block;
  width: 58px;
  height: 7px;
  background-repeat: no-repeat;
  }
  
ul#navprimary li a span {
  display: none;
  }

a#navhome {
  background-image: url(images/nav/nav_home.gif);
  background-position: 28px -7px;
  }
  
a#navweddings {
  background-image: url(images/nav/nav_weddings.gif);
  background-position: 2px -7px;
  }

a#navchildren {
  background-image: url(images/nav/nav_children.gif);
  background-position: 6px -7px;
  }
  
a#navportraits {
  background-image: url(images/nav/nav_portraits.gif);
  background-position: 0 -7px;
  }
  
a#navlinks {
  background-image: url(images/nav/nav_links.gif);
  background-position: 28px -7px;
  }
  
a#navbuy {
  background-image: url(images/nav/nav_buy.gif);
  background-position: 37px -7px;
  }
  
a#navawards {
  background-image: url(images/nav/nav_awards.gif);
  background-position: 13px -7px;
  }
  
a#navabout {
  background-image: url(images/nav/nav_about.gif);
  background-position: 23px -7px;
  }
  
a#navcontact {
  background-image: url(images/nav/nav_contact.gif);
  background-position: 9px -7px;
  }
  
ul#navprimary li a:hover {
  background-position: right top;
  }
  
ul#navprimary li.on a {
  background-position: right top;
  }

ul#navsecondarychildren {
  position: absolute;
  top: 321px;
  left: 109px;
  width: 110px;
  }
  
ul#navsecondaryweddings {
  position: absolute;
  top: 256px;
  left: 109px;
  width: 110px;
  }
  
ul#navsecondaryportraits {
  position: absolute;
  top: 302px;
  left: 109px;
  width: 110px;
  }
  
ul#navsecondarychildren li, ul#navsecondaryportraits li, ul#navsecondaryweddings li  {
  position: relative;
  text-align: left;
  list-style: none;
  margin-bottom: 11px;
  float: left;
  }
  
ul#navsecondarychildren li a, ul#navsecondaryportraits li a, ul#navsecondaryweddings li a {
  display: block;
  width: 110px;
  height: 7px;
  }
  
ul#navsecondarychildren li a span, ul#navsecondaryportraits li a span, ul#navsecondaryweddings li a span {
  display: none;
  }

a#navgallery {
  background-image: url(images/nav/nav_gallery.gif);
  background-position: 0 -7px;
  background-repeat: no-repeat;
  }
  
a#navgallery1 {
  background-image: url(images/nav/nav_gallery1.gif);
  background-position: 0 -7px;
  background-repeat: no-repeat;
  }
  
a#navgallery2 {
  background-image: url(images/nav/nav_gallery2.gif);
  background-position: 0 -7px;
  background-repeat: no-repeat;
  }
  
a#navgallery3 {
  background-image: url(images/nav/nav_gallery3.gif);
  background-position: 0 -7px;
  background-repeat: no-repeat;
  }
  
a#navalbums {
  background-image: url(images/nav/nav_albums.gif);
  background-position: 0 -7px;
  background-repeat: no-repeat;
  }
  
a#navtestimonials {
  background-image: url(images/nav/nav_testimonials.gif);
  background-position: 0 -7px;
  background-repeat: no-repeat;
  }
  
a#navpricing {
  background-image: url(images/nav/nav_pricing.gif);
  background-position: 0 -7px;
  background-repeat: no-repeat;
  }

a#navproducts {
  background-image: url(images/nav/nav_products.gif);
  background-position: 0 -7px;
  background-repeat: no-repeat;
  }
  
a#navapproach {
  background-image: url(images/nav/nav_approach.gif);
  background-position: 0 -7px;
  background-repeat: no-repeat;
  }
  
a#navfaqs {
  background-image: url(images/nav/nav_faqs.gif);
  background-position: 0 -7px;
  background-repeat: no-repeat;
  }
    
ul#navsecondarychildren li a:hover, ul#navsecondaryportraits li a:hover, ul#navsecondaryweddings li a:hover {
  background-position: 0 0;
  }
  
ul#navsecondarychildren li.on a, ul#navsecondaryportraits li.on a, ul#navsecondaryweddings li.on a {
  background-position: 0 0;
  }
  
ul#navsecondarychildren li.on, ul#navsecondaryportraits li.on, ul#navsecondaryweddings li.on {
  background-image: url(images/nav/navlines_stub.gif);
  background-repeat: repeat-x;
  background-position: 0 50%;
  }

img#navlineshome {
  position: absolute;
  top: 302px;
  left: 71px;
  }
  
img#navlineschildren {
  position: absolute;
  top: 314px;
  left: 71px;
  }
  
img#navlinesportraits {
  position: absolute;
  top: 295px;
  left: 71px;
  }
  
img#navlinesweddings {
  position: absolute;
  top: 249px;
  left: 71px;
  }
  
img#navlinesawards {
  position: absolute;
  top: 377px;
  left: 71px;
  }
  
img#navlinesbuy {
  position: absolute;
  top: 377px;
  left: 71px;
  }

img#navlineslinks {
  position: absolute;
  top: 377px;
  left: 71px;
  }
  
img#navlinesabout {
  position: absolute;
  top: 377px;
  left: 71px;
  }
  
img#navlinescontact {
  position: absolute;
  top: 377px;
  left: 71px;
  }

/* ====== content ====== */

div#contentframe {
  position: absolute;
  top: 22px;
  left: 219px;
  width: 555px;
  background-image: url(images/structures/bg_frame.gif);
  background-repeat: repeat-y;
  border-bottom: 8px solid #333;
  }

div#contentcontainer {
  position: relative;
  margin: 24px 24px 24px 24px;
  }
  
table#contentcontainer {
  position: relative;
  height: 460px;
  }
  
table#contentcontainer td#content {
  padding: 24px;
  vertical-align: middle;
  }
  
table#contentcontainer td#gallery {
  text-align: center;
  vertical-align: middle;
  width: 555px;
  }
  
div#prop {
  height: 460px;
  width: 1px;
  float: right;
  }
  
#contentcontainer ol {
  margin-bottom: 16px;
  }

#contentcontainer ol li {
  margin-left: 24px;
  }
  
#contentcontainer address {
  font-style: normal;
  margin-bottom: 16px;
  }
  
#contentcontainer table {
  width: 99%;
  margin-bottom: 16px;
  }
  
#contentcontainer table th {
  display: none;
  }
  
#contentcontainer table td {
  padding-top: 2px;
  padding-bottom: 2px;
  vertical-align: top;
  }
  
#contentcontainer ul {
  list-style: square;
  margin-left: 16px;
  }
  
#contentcontainer ul.bottom {
  margin-bottom: 16px;
  }
  
#contentcontainer ul li {
  }
  
img#homepageimage {
  margin-left: 40px;
  margin-right: 40px;
  margin-top: 34px;
  }
  
p#homepagequote {
  margin-left: 40px;
  margin-right: 40px;
  margin-top: 36px;
  color: #ccc;
  font-size: 124%;
  text-align: center;
  }
  
p#homepagequote span {
  margin-left: 40px;
  margin-right: 40px;
  color: #999;
  font-size: 80%;
  line-height: 300%;
  }
  
.narrow {
  margin-left: 48px;
  margin-right: 48px;
  }
  
.smallgap {
  margin-top: 36px;
  }
  
.quote {
  font-style: italic;
  }
  
.credit {
  margin-left: 48px;
  margin-right: 48px;
  margin-top: 96px;
  }
  
p.testimonial {
  clear: both;
  }
  
p.testimonial strong {
  float: right;
  margin-bottom: 16px;
  }
  
p.shallow {
  margin-bottom: 8px;
  }
  
a#next {
  position: relative;
  left: 462px;
  margin-top: 26px;
  width: 38px;
  height: 7px;
  background-image: url(images/nav/nav_next.gif);
  background-position: 0 -7px;
  background-repeat: no-repeat;
  display: block;
  z-index: 100;
  }
  
a#next:hover {
  background-position: 0 0;
  }
  
a#next span {
  display: none;
  }
   
a#back {
  clear: both;
  position: relative;
  margin-top: 26px;
  width: 38px;
  height: 7px;
  background-image: url(images/nav/nav_back.gif);
  background-position: 0 -7px;
  background-repeat: no-repeat;
  display: block;
  z-index: 100;
  }
  
a#back:hover {
  background-position: 0 0;
  }
  
a#back span {
  display: none;
  }
  
p img.right {
  float: right;
  border: 1px solid #444;
  margin-left: 36px;
  }
  
a#weddingprints {
  position: relative;
  display: block;
  float: right;
  border-left: 36px solid #333;
  width: 189px;
  height: 160px;
  }
  
a#weddingprints img {
  border: 1px solid #444;
  }
  
a#weddingprints img.print1 {
  position: relative;
  margin-right: 24px;
  }
  
a#weddingprints img.print2 {
  position: absolute;
  right: 0;
  top: 40px;
  }
  
a#weddingprints:hover img {
  border: 1px solid #666;
  }
   
a.albumgallery img {
  margin-top: 4px;
  border: 1px solid #444;
  }
  
a.albumgallery:hover img {
  border: 1px solid #666;
  }
  
/* ====== thumbs ====== */

div#hold { 
  position: absolute;
  top: 496px;
  left: 227px;
  width: 539px;
  height: 70px;
  overflow:hidden;
  z-index:100;
  }
  
div#wn { 
  position:absolute; 
  left:0px; 
  top:0px; 
  width:539px; 
  height:44px; 
  clip:rect(0px, 539px, 44px, 0px); 
  overflow:hidden;	
  z-index:1; 
  }
  
div#lyr1 { 
  position:absolute; 
  left:0px; 
  top:0px; 
  visibility:hidden; 
  z-index:1; 
  }

div#scrollbar { 
  position:absolute; 
  left:0; 
  top:54px;
  width:539px; 
  height:11px;
  font-size:1px; 
  z-index:2;
  }
  
div#track { 
  position:absolute; 
  left:10px; 
  top:0;
  width:519px; 
  height:9px; 
  z-index:1;
  background-image: url(images/structures/struct_scrollbar.gif);
  }
  
div#dragBar {
  position:absolute; 
  left:1px; 
  top:1px;
  width:20px; 
  height:7px; 
  z-index:1;
  background-color:#999;
  }  
  
div#left { 
  float: left;
  z-index:2;
  }  
  
div#right { 
  float: right;
  z-index:3;
  }

table#thumbs td div {
  width: 44px;
  height: 44px;
  }
  
table#thumbs td div a img {
  width: 32px;
  height: 32px;
  margin: 6px;
  }
  
/* ====== intro page ====== */

body#intro {
  background-color: #000;
  }

img#intro {
  position: absolute;
  top: 108px;
  left: 168px;
  }
  
img#enterunder {
  position: absolute;
  top: 170px;
  left: 506px;
  }
 
a#enter {
  position: absolute;
  top: 164px;
  left: 515px;
  width: 34px;
  height: 7px;
  background-image: url(images/nav/nav_enter.gif);
  background-position: 0 -7px;
  background-repeat: no-repeat;
  display: block;
  z-index: 100;
  }
  
a#enter:hover {
  background-position: 0 0;
  }
  
a#enter span {
  display: none;
  }
  
/* ====== album pages and popups ====== */

div#albumwrapper {
  position: relative;
  width: 974px; 
  margin-left: auto;
  margin-right: auto;
  margin-top: 22px;
  margin-bottom: 22px;
  }
  
img.albumlips {
  position: relative;
  margin-left: 25px;
  }
  
div#albumflash {
  position: relative;
  width: 922px;
  margin-left: auto;
  margin-right: auto;
  border-left: 1px solid #666;
  border-right: 1px solid #666;
  padding-bottom: 12px;
  }
  
p#albuminstructions {
  position: absolute;
  left: 0;
  bottom: 36px;
  width: 922px;
  text-align: center;
  }

a#close {
  position: absolute;
  right: 62px;
  bottom: 20px;
  width: 34px;
  height: 7px;
  background-image: url(images/nav/nav_close.gif);
  background-position: 0 -8px;
  background-repeat: no-repeat;
  display: block;
  z-index: 200;
  }
  
a#close:hover {
  background-position: 0 0;
  }
  
a#close span {
  display: none;
  }
  
#weddingprintslarge {
  width: 100%;
  text-align: center;
  } 
  
#weddingprintslarge img.print1 {
  margin: 24px 36px 36px 0;
  }
  
#weddingprintslarge img.print2 {
  margin: 24px 0 36px 0;
  }
