/*
      MyCardMaker.com stylesheet
      last updated: May 30th, 2007
      Sean Camden
      
      Table of contents:
        Common

        Index (index.html)

        Memberships (memberships.html)

        ProPrinting (proprinting.html)

        Gallery (gallery.html, /card-types/*.html)
        Yahoo! YUI tweaks (gallery.html, /card-types/*.html)

        Confirm (confirm_confirmed.html, confirm_noMatch.html, confirm_success.html)

        Press (/press/*.html)

        404 (404.html)

        Sitemap/FAQ (sitemap.html, /help/*.html)

        Lightbox styles (by Lokesh Dhakar huddletogether.com)

 */




/* Common styles
   -------------------------------------------------------------------------- */

#rootContainer {margin:0 auto; width:774px; text-align:center; padding-top:22px}

#mainContent {text-align:left; padding:0 33px}

a {color:#1170A0;}

img {border-style: none}

p {text-align:left}

.alignRight {text-align:right}

.alignLeft {text-align: left}

.copyright {font-size:10px; color:#000000}

body {
  padding:0px; 
  margin:0px; 
  background-color:#DBEAF5;
  color:#006699;
  font-family:arial,helvetica;
  font-size:12px;
  text-align:left;
}

h1 {text-align:left; line-height:1.5em; font-size:26px}

h2 {
  font-size: 16px;
  line-height: 16px;
  font-weight :bold;
  padding:0;
  margin: 0;
}


h3 {
  line-height:2.5em;
  font-size: 28px;
  font-weight: bold;
  margin: 0;
}

h4 {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

h5 {
  font-size: 14px;
  font-weight: normal;
  margin: 0;
  padding: 15px 0 0 0;
}

h6 {
  line-height: 1.3em;
  font-size: 16px;
  font-weight: bold;
  text-align: right;
  margin: 0;
  padding: 0;
}

.whiteBox {
  background-image:url(/images/bg_fade.gif);
  background-color:#FFFFFF;
  background-repeat:repeat-y;
  width:774px;
  text-align:left;
}

.whiteBox td.headerLeft {padding:25px 12px 5px 35px;vertical-align:bottom;}
.whiteBox td.headerRight {padding:5px 10px 5px 0px;vertical-align:bottom;text-align:right;}

.whiteBox td.headerRight img {border-style:none}

td {
  color:#006699;
  font-family:arial,helvetica;
  font-size:12px;
}


td.copy {
  color:#666666;
  font-family:arial,helvetica;
  text-align:left;
  font-size:12px;
}

.breadCrumbGray {color:#999999}
.pinkCopy {color:#F32D96}
.greenLink {color:#33CC33}
.greenL {color:#33CC00}
.orangeL {color:#FF6803}
.orangeCopy {color:#FF7819}

#breadcrumbs {padding:10px 0 0 34px; margin:0}
#breadcrumbs ul {display:inline; list-style-type:none}
#breadcrumbs li {display:inline}
#breadcrumbs a {text-decoration:none}

.child {padding:1em}

.bold {font-weight: bold}

.center {text-align:center; padding-top:10px}

#getStarted {margin:0 auto; width:97px; padding:10px}

#flickrGroup {padding:5px 15px 15px 15px}

footer {
  font-family:Arial,helvetica;
  font-size:12px;
  font-style:normal;
  color:#666666;
}

.footer ul {display:inline; list-style-type:none; padding:0; margin:0}

.footer li {display:inline}

a.footer:link, a.footer:visited {color:#666666; text-decoration:none}

a.footer:hover {color:#006699; text-decoration:underline}

a.footer:active {color:#006699; text-decoration:none}

a.copy:link, a.copy:visited, a.copy:hover, a.copy:active {color:#666666; text-decoration:none}


/* Index styles
   -------------------------------------------------------------------------- */
#indexH1 {
  text-align:left;
  padding: 0;
  margin: 0;
}

#indexH1 h1 { 
  text-align:left;
  height: 307px; 
  background: transparent url(/images/indexHero.jpg) 0 0 no-repeat; 
  font-size: 28px;
  display: block;
  margin: 0;
  padding: 0;
}

#indexH1 h1 span { display: none }

#indexH3 { 
  font-size:2em;
  line-height: 1.25em;
  margin:0;
  padding:0 0 20px 0;
}

.sampleCard {padding:10px 0 0 0;margin:0;line-height:4em}

.h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.columns {
  padding:10px;
  xborder-left:5px solid #DBEAF5;
}

.flickrGroup { padding:5px 15px 15px 15px; }

#col1 {width:158px;border-left:none;
  background:#DBEAF5 url('/images/mcm-ghk-1px.jpg') repeat-y -33px 0px }

#col1 h4 {}

#goodHK {display:block;position:absolute}

#goodHKCopy {width:140px;display:block;position:relative}

#insidegoodHK {position:relative;left:-43px;top:-10px}

#col2 {padding-left:30px;padding-right:30px} 

#joinPara p {width:350px;font-size: 16px;line-height:1em}

#joinPara {padding-right:25px}

#cardsOccasionPara {padding:0 0 10px 0}

#indexStartButton {
  padding:19px 0 15px 0;
}

#indexH1copy {
  position:absolute;
  padding-left:33px;
  padding-top:25px;
  width:330px;
}

p.index {
  margin:0;
  padding: 10px 0 10px 0;
  width:265px;
}

h2.index {}

#h2indexSpacer {padding-top:220px}

h3.index {
  font-size:2.1em;
  line-height:1em;
  padding-top:20px;
}

h4.index {
  padding:10px 0 0 0;
  width:535px;
  font-size:2em;
  line-height:1.1em;
  font-weight:bold;
}

h5.index {
  font-size:1.3em;
  line-height:1.3em;
  font-weight:bold;
  padding: 0 0 20px 0;
}

#printSnipe {
  border:1px thin red;
  position:relative;
  }

#printSnipe #snipe {
  position:absolute;
  right:-29px;
  }

/* Memberships styles
   -------------------------------------------------------------------------- */
#memTable td {padding:10px; border-top:5px solid #DBEAF5}

#memTable td.leftCell {width:200px; padding-left:35px; vertical-align:top}

#memTable td.rightCell {border-left:5px solid #DBEAF5}

#memTable .screenGrab {padding:10px 0 30px 0}

#memTable .columnImage {padding:10px 15px 10px 0px}

#memTable td a img {float:right; vertical-align:bottom}

#memTable blockquote {padding:20px 0}

#memHeader {margin-top:2px}

#memHeader td.headerContent {padding:0 0 15px 35px}

#members {padding:0;margin:0;list-style-type:none;line-height:1.5em}

/* Proprinting styles
   -------------------------------------------------------------------------- */
.proCaption {text-align:center}

/* Gallery pages styles
   -------------------------------------------------------------------------- */
ul#galleryList {
  list-style-type:none; 
  background-image:url(/images/bg_fade_reverse.gif);
  background-color:#FFFFFF;
  background-repeat:repeat-y;
width:150px;
margin:20px 0;
padding:10px 0 20px 10px;
border:1px solid #DBEAF5; 
}

ul#galleryIndex {
  list-style-type:none; 
  background-image:url(/images/bg_fade_reverse.gif);
  background-color:#FFFFFF;
  background-repeat:repeat-y;
width:680px;
margin:20px auto;
padding:10px 0 20px 10px;
border:1px solid #DBEAF5; 
}

ul#relatedCards {
  list-style-type:none; 
width:525px;
margin:10px 0 10px 33px;
padding:10px 0 10px 10px;
border:1px solid #DBEAF5; 
}

ul#relatedCards li.subhead {font-weight:bold;padding-bottom:5px}

#galleryList h2 {padding:5px 0}

#galleryMainTable td#mainCell {width:570px}

#galleryMainTable td#sideCell {width:200px}

.gallerySubTable td {width:130px}

.thumbs td {width:130px; padding-top:15px}

.thumbsLastRow td {padding-bottom:15px;width:130px; padding-top:15px}

.captions td {width:130px; height:65px}

.thumbRule {padding:0 0 10px 0; margin:0; width:525px; height:1px}

.thumbRuleYUI {padding:0 0 10px 0; margin:0; width:485px; height:1px}

.subRule {padding:0; margin:0}

.yui-content .subRule {padding:10px 10px 0 0; margin:0}

.galleryCaptions td {width:130px; height:25px}

.miniThumbs td {height:56px; width:65px}

.miniThumbsTarget {width:240px}

.miniThumbsTable {padding-top:15px}

.galleryCopy {width:500px}

.copyLeft {float:left;width:240px;padding:0 10px 0 0;margin:0}

.copyRight {border-left:1px solid #FF6803;float:left;width:230px;padding:0 0 0 10px;margin:0}

h1.gallery {
  text-align:left;
  line-height:30px;
  font-size:26px;
padding:10px 0 10px 0;
margin:0;
}

h2.gallery {padding:20px 0 0 0}

.galleryCopy h6 {
  font-size:12px;
  line-height:30px;
  font-weight:100;
  text-align:left;
padding:0;
margin:0;
}

#galleryList a:link, #galleryList a:visited {text-decoration:none; color:#33CC33; font-weight:normal}

#galleryList a:hover {text-decoration:underline; color:#33CC33; font-weight:normal}

#galleryList a:active {text-decoration:none; color:#33CC33; font-weight:normal}

#relatedCards a:link, #relatedCards a:visited {text-decoration:none; color:#33CC33; font-weight:normal}

#relatedCards a:hover {text-decoration:underline; color:#33CC33; font-weight:normal}

#relatedCards a:active {text-decoration:none; color:#33CC33; font-weight:normal}

.thumbs a:link, .thumbsLastRow a:link, .thumbs a:visited, .thumbsLastRow a:visited {text-decoration:none; color:#33CC33; font-weight:normal}

.thumbs a:hover, .thumbsLastRow a:hover {text-decoration:underline; color:#33CC33; font-weight:normal}

.thumbs a:active, .thumbsLastRow a:active {text-decoration:none; color:#33CC33; font-weight:normal}

.thumbs img, .thumbsLastRow img {border:1px solid #1170A0}

.thumbs img:hover, .thumbsLastRow img:hover {border:1px dashed #1170A0}

.miniThumbs img {border:1px solid #1170A0}

.miniThumbs img:hover {border:1px dashed #1170A0}

.miniThumbsTarget img {border:1px solid #1170A0}

.miniThumbsTarget img:hover {border:1px solid #1170A0}

/* YUI tweaks (gallery pages)
   -------------------------------------------------------------------------- */
.yui-content {width:510px;padding-left:15px}

.yui-navset .yui-nav li a, .yui-navset .yui-content {
border:1px solid #DBEAF5;
}

.yui-navset .yui-nav .selected a, .yui-navset .yui-nav a:hover, .yui-navset .yui-content {
  background-color:#F5FBFF; /* active tab, tab hover, and content bgcolor */
}

.yui-nav a:link {color:#1170A0; text-decoration:none}

.yui-nav a:visited {color:#666666; text-decoration:none}

.yui-nav a:hover {color:#1170A0; text-decoration:underline}

.yui-nav a:active {color:#1170A0; text-decoration:none}

/* Confirm pages styles
   -------------------------------------------------------------------------- */
.topBox {
  background-image:url(/images/bg_fade.gif);
  background-color:#FFFFFF;
  background-repeat:repeat-y;
width:774px;
      text-align:left;
}

.smallerBox {
  background-image:url(/images/bg_fade_s.gif);
  background-color:#FFFFFF;
  background-repeat:repeat-y;
width:350px;
      margin-top:5px;
}

/* Press pages styles
   -------------------------------------------------------------------------- */
.strdPadding {padding: 0 35px 0 35px}

#pressPara p {margin:0;padding:10px}

#prTable {padding:33px;margin:0}

#prTable h2 {line-height:.1em;padding-bottom:.5em}

#prTable h3 {font-size:20px;line-height:2em;padding:20px 0 0 0;}

#prTable p.subhead {line-height:.1em;padding-top:20px}

.pressColumn {text-align: left; width: 500px}

#loadBar { color:#FF6803 }

#emailSuccess { color:#33CC00 }

.mcmButton {padding-bottom: 10px}

#buttonList {padding-left: 25px; list-style-type: none}

#contactForm {text-align:left;border-collapse:separate;border-spacing:0 5px}

/* Legal pages styles
   -------------------------------------------------------------------------- */
.legal {padding:0; margin:0}
.legal ul {display:inline; list-style-type:none}
.legal li {display:inline}
.legal a {text-decoration:none}

/* 404 page styles
   -------------------------------------------------------------------------- */
.list404 {padding:0;margin:0;list-style-type:none}

#H1_404 {padding: 10px 0 10px 0; margin: 0}

#H1_404 h1 { 
height: 18px; 
background: transparent url(/images/txt_createprintshare.gif) 0 0 no-repeat; 
            font-size: 28px;
display: block;
margin: 0;
padding: 0;
}

#H1_404 h1 span { display: none }

/* Sitemap/FAQ page styles
   -------------------------------------------------------------------------- */
#smap ul {list-style-type:none; width:500px}

li.subline, p.subline {margin:0; padding:0}

li.superline {margin-top:0; padding:.5em 0 0 0}

#smap h1 {padding-left:33px}

#smap a:link, #smap a:visited {text-decoration:none; font-weight:bold}

#smap a:hover {text-decoration:underline; font-weight:bold}

#smap a:active {text-decoration:none; font-weight:bold}

#mainHelpTable td#mainCell {width:550px}

#mainHelpTable #subTable {width:535px}


/* Lightbox Styles
   -------------------------------------------------------------------------- */

#lightbox{
position: absolute;
left: 0;
width: 100%;
       z-index: 100;
       text-align: center;
       line-height: 0;
}

#lightbox a img{ border: none; }

#outerImageContainer{
position: relative;
          background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}

#imageContainer{
padding: 10px;
}

#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
       text-align: center;
       line-height: 0;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
       z-index: 10;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(/images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif;
      background-color: #fff;
margin: 0 auto;
        line-height: 1.4em;
overflow: auto;
width: 100%	
}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	

#overlay{
position: absolute;
top: 0;
left: 0;
      z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}