/* --------------------------------------------------------
      Core Framework for all three sites (TP, TPC, WPD)
      file: core-stylings.css
      author: Eric Ritchey <eritchey@tinyprints.com>
      date: Dec. 2, 2009
* -------------------------------------------------------*/

/* misc classes
------------------------------------------------------*/
/*
	when changing the hours on the site use this code:
	<p class="hours-change"><strong>Please Note:</strong> <span>...</span></p>
*/
.hours-change {
	text-align:center;
	font-size:20px;
	margin-bottom:60px;
	color:#c00;
	padding:10px;
	width:100%;
	border-bottom:2px dotted #ededed;
}
.hours-change span { font-size:14px; }
.hours-change strong { display:block; }

.gradient-up      { background: #fff    url('/image/common/gradient-up.gif')      repeat-x bottom left; }
.gradient-down    { background: #fff    url('/image/common/gradient-down.png')    repeat-x 1px left;    }
.gradient-left    { background: #fff    url('/image/common/gradient-left.gif')    repeat-x top left;    }
.gradient-right   { background: #fff    url('/image/common/gradient-right.gif')   repeat-x top left;    }
.gradient-up-alt  { background: #fbfbf8 url('/image/common/sidebar-gradient.gif') repeat-x bottom left; }

/* use when missing an asset (i.e. a link) */
.oops {background-color:#f00;color:#fff;}

/* for adding the orange "new" section */
#container span.new,
#container-dynamic span.new { color:#D76B4F; font-size:1em; font-weight:bold; position: static; margin-left: 0; text-indent: 0;}

/* clearers */
.clearBoth  { clear:both  !important; }
.clearLeft  { clear:left  !important; }
.clearRight { clear:right !important; }

.block      { display: block; }
.hidden     { display: none;  }
.blockauto  { display: block; margin: auto; }
/* aligners */
span.alignLeft,
span.alignCenter,
span.alignRight { display: block; }

.alignLeft   { text-align: left   !important; }
.alignRight  { text-align: right  !important; }
.alignCenter { text-align: center !important; }

.floatLeft  { float: left  !important; }
.floatRight { float: right !important; }
.floatNone  { float: none  !important; }

/* --- shadowing css --- */
.shadow-full,.shadow-double,.shadow-single { background: url('/image/common/shadowing.png') no-repeat center bottom; }
#container .shadow-full      { padding-bottom: 11px; }
#container .shadow-double    { padding-bottom: 9px;  }
#container .shadow-single    { padding-bottom: 8px;  }
/* --- end shadowing --- */

/* --- start star rating --- */
.rating {
	display:block;
	text-indent:-999px;
	overflow:hidden;
	background: url('/image/star-rating.png') no-repeat left center;
	height:12px;
	width:71px;
	margin: 2px 0;
}
.r1 { background-position: -57px 0; }
.r2 { background-position: -43px 0; }
.r3 { background-position: -29px 0; }
.r4 { background-position: -15px 0; }
.r5 { background-position: 0px 0;   }
/* --- end star rating ----- */


/* --- testimonial quote action --- 
   located on:
    - http://www.tinyprints.com/personal-shoppers-photo-cards.htm
    - http://www.weddingpaperdivas.com/wedding-paper-divas-difference.htm
*/
#container .quotes blockquote {
	font-style:italic;
	font-size:1.1em;
	text-indent:30px;
	position:relative;
	font-family:Georgia;
	text-align: left;
	margin: 0 1.5em;
}
#container .quotes blockquote .quote {
	position:absolute;
	color:#bebebe;
	font-size:4em;
	text-indent:0;	
}
#container .quotes blockquote .first {
	top:-15px;
	left:0;
}
/* --- end testimonial quote action --- */

/* -------------------------
c    = core
brdr = border
t    = top
r    = right
b    = bottom
l    = left
t-b  = top-bottom
pad  = pad
mar  = margin
------------------------- */
.c-pad      { padding: .5em; }
.c-pad-b	{ padding-bottom: 20px; }
.c-pad-r    { padding-right: 10px; }
.c-pad-l	{ padding-left: 10px; }
.c-mar-t    { margin-top: 20px; }
.c-mar-b    { margin-bottom: 20px; }
.c-gray     { background: #f6f5f3; }

.c-brdr     { border: 1px solid #ccc; }
.c-brdr-t   { border-top:    2px dotted #ebebeb; padding-top: 10px; }
.c-brdr-r   { border-right:  2px dotted #ebebeb; }
.c-brdr-b   { border-bottom: 2px dotted #ebebeb; }
.c-brdr-l   { border-left:   2px dotted #ebebeb; }
.c-brdr-t-b { border-top:    2px dotted #ebebeb; border-bottom: 2px dotted #ebebeb; padding: 10px 0; }

.req  {
	color: #f00;
	font-weight: bold;
	font-size:1.1em;
}

/* for product page styling */
#container-dynamic p.na {color:#F78C5A;}
#container-dynamic p.na strong   {font-weight:normal;}
#container-dynamic p.note strong { color:#F78C5A;    }

/* default testimonial and review styling for left nav */
#container #testimonial,
#container #review {
/*	border-bottom:2px dotted #ebebeb; - Removing to get rid of dotted underline on text of testimonial in IE7. No longer deemed necessary */
	margin-top:10px;
}
#sidebar .hreview span             { display: block; }
#sidebar .hreview span span        { display: inline; font-weight: normal; }
#sidebar #review .img              { float: left;  width: 43%; }
#sidebar #review .reviewdata       { float: right; width: 51%; }
#sidebar #review .reviewdata.short { padding-top: 10px; }
#sidebar #review .type             { display: none; }
#sidebar #review h3                { text-transform: uppercase; }
#sidebar #review .description      { margin: 10px 0 0 0; padding: 0; clear: both; }

#container #testimonial h3,
#container #review h3 {
/*	background: url('/image/core-icons/icon-sprite.png') no-repeat -3px -110px; Removed to get rid of <3 icon next to h3 in testimonials. No longer needed per rebrand */
	padding: .3em 0 0 1.7em;
	margin-top:1em;
	height:1.1em;
}
#container #testimonial p {
	font-size:.85em;
	line-height:1.5em;
}
.strikeout,.s { text-decoration: line-through;}
.mouseprint, .sm 		{ font-size:.85em; }

/* holiday cut-off
------------------------------------------------------*/
/* --- holiday cut-off sub nav --- */
#container ul.anchor-links,
#container ul.anchor-links li {
	margin:0;
	padding:0;
	list-style:none;
}
#container ul.anchor-links {
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	width:100%;
	float:left;
	margin: 4px 0 0 0;
	padding:0;
	display:inline;
}
#container ul.anchor-links li {
	text-align:center;
	margin: .3em 0;
	padding:0 .5em;
	width:165px;
	float:left;
}
#container ul.anchor-links li a {
	border-bottom:0;
	display:block;
	width:100%;
	padding:.5em;
}
#container ul.anchor-links li a:hover {
	background:#680;
	padding:.2em .5em;
	margin:.3em 0 0 0;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	color:#fff;
	text-shadow: 1px 1px 1px #666;
}
#container ul.anchor-links li.selected a {
	font-weight:bold;
	color:#6b6b6b;
}
#container ul.anchor-links li.selected a:hover {
	background-color:inherit;
	text-shadow: 0 0 0;
}

/* Column Structures
------------------------------------------------------*/
.core-2-col,
.core-3-col,
.core-4-col,
.core-5-col,
.core-6-col {
	overflow: hidden;
	clear: both;
	width: 100%;
}
.core-2-col div,
.core-3-col div,
.core-4-col div,
.core-5-col div,
.core-6-col div {
	float: left;
	padding: 10px .5%;
	text-align: center;
	position:relative;
	overflow: hidden;
}

.core-2-col div.alignLeft,
.core-3-col div.alignLeft,
.core-4-col div.alignLeft,
.core-5-col div.alignLeft,
.core-6-col div.alignLeft  { text-align: left; }
.core-2-col div.alignRight,
.core-3-col div.alignRight,
.core-4-col div.alignRight,
.core-5-col div.alignRight,
.core-6-col div.alignRight { text-align: right; }


.core-3-col div,
.core-4-col div { padding: 10px 1%; margin: 0; }

.core-2-col div:first-child,
.core-3-col div:first-child,
.core-4-col div:first-child,
.core-5-col div:first-child,
.core-6-col div:first-child { margin-left: 0; }

/* Column widths */
.core-2-col div { width: 47%;    }
.core-3-col div { width: 31%;  }
#container.full .core-3-col div { width: 31%;   }
.core-4-col div { width: 23%;    }
.core-5-col div { width: 18%;    }
.core-6-col div { width: 14.6%;  }

/* --- 2 Columns --- */
.core-2-col p        { font-size:.9em; }
.core-2-col div      { padding: 0; }
.core-2-col div.last { float:right; }

#container .core-2-col h1,
#container .core-2-col h2,
#container .core-2-col h3,
#container .core-2-col h4,
#container .core-2-col h5,
#container .core-2-col h6,
#container .core-2-col p {
	margin: 0;
	padding: 0;
}
#container .core-2-col a {
/*	font-size:.9em;*/
	border-bottom: 0;
}
#container .core-2-col a:hover {
	border-bottom: 0;
}

#container .core-2-col .alignRight {
	position: absolute;
	bottom:0;
	right:5px;
}

/* --- 3 Columns --- */
.index .core-3-col div {
	margin-left: 10px;
	padding: 0;
}
.core-3-col div:first-child {
	margin-left: 0;
}
.index .core-3-col div          { width: 32.4%; }
.index .core-3-col div div {
	border-top: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	float: none;
	display: block;
}
.index .core-3-col h3,
.index .core-3-col p {
	margin: 0;
	padding: 0;
}


.core-3-col div.mid.brdr {
	border-left: 2px dotted #ebebeb;
	border-right: 2px dotted #ebebeb;
}
/* --- 4 Columns --- */
.core-4-col.borders        {/* for modern browsers */
	border: 1px solid #ccc;
	border-top: 0;
	width: 99.8%; 
}
.core-4-col.borders div    {/* for modern browsers */
	border-right: 1px solid #ccc;
	width: 22.9%;
}
.core-4-col div:last-child {/* for modern browsers */
	border-right: 0;
}

/* --- 5 Columns --- */
#container ul.core-5-col.products,
#container ol.core-5-col.products,
#container ul.core-5-col.products li,
#container ol.core-5-col.products li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.core-5-col.products li {
	width: 19.9%;
	float: left;
	text-align: center;
}

/* --- 6 Columns --- */

/* ----------------------------------------------------------------------
   added for table sorting on the wedding photographers page
   http://www.weddingpaperdivas.com/local-wedding-photographers.htm
   http://www.tinyprints.com/tiny-prints-local-photographer-recommendations.htm
---------------------------------------------------------------------- */
table.sortable {
	width: 100%;
}
#container .sortable td,
#container .sortable th {
	padding: 0.3em;
}
#container .sortable thead th {
	cursor: pointer;
	padding: .4em;
	font-weight: bold;
	text-align: left;
	
}
#container .sortable thead,
#container .sortable tfoot {
	background-color: #e0ecec;
}
#container .sortable tfoot * {
	font-weight: normal;
	font-style: normal;
}
#container .sortable tfoot th {
	padding:.1em .5em;
	font-size:.85em;
}
#container .sortable tr.even {
	background-color: #f2f2f2;
}
#container .sortable .sortasc,
#container .sortable .sortdesc,
#container .sortable .headerSortDown {
	background: #e3e4e0 url('/image/wpd/css/icons/down.gif') no-repeat right center;
}
#container .sortable .headerSortUp {
	background: #e3e4e0 url('/image/wpd/css/icons/up.gif') no-repeat right center;
}

/*
 * Console Logging in IE
 */
#tpconsole {
	position:absolute;
	bottom: 0;
	left: 0;
	width: 98%;
	border: 1px solid #999;
	background: #eee;
	font-size: 12px;
	padding: 10px;
}
html>body #tpconsole {
	position: fixed;
}
#tpconsole a {
	float: right;
	padding-left: 1em;
	padding-bottom: .5em;
	text-align: right;
}

/*until convertro fixes*/
#__cvo_f{
	display:none;
}
/* -------------------------------------------------------------- 

		Filename: slideshows.css
		Author:   Tommy Sanchez <tom.sanchez@tinyprints.com>
		Date Created:  8/21/10
		Date Modified: 9/02/10

		Description:
		CSS for the HP, VLP, LP, mini, Greeting and Business slideshows.
		
		Versions:
		8/19/10 | v1.0   | tsanchez | Initial Construction and Development
		8/28/10 | v1.0.1 | eritchey | Updated Description
		9/02/10 | v1.0.2 | tsanchez | Made slideshow more flexible for dynamic # of slides
		9/04/10	| v1.0.3 | tsanchez | Added styles for all types of pages
		9/05/10 | v1.0.4 | tsanchez | Added styles for full-width pages
		
		Example Implementation:
		Large version: <div id="slideshow">
		Mini version: <div id="slideshow" class="mini">
		
		Page-modifying classes will control images that appear in slideshow. E.G. #container.vlp.occasions and #container.vlp.invitations 
		can have different images because of specificity.  Images would be added like so:
			#container.vlp.occasions #slides div {
				background: url('new_image_sprite.jpg') no-repeat 0 0;
			}
		...and so on. 

-------------------------------------------------------------- */
#slideshow {
	position: relative;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e5e5e5;
}

#slideshow.mini {
	height: auto;
	border: 0;
	padding: 0px;
	width: 225px;
}

#slideshow.mini img {
	padding:0px;
}

.lp .module #slideshow.col_6.mini,
.blp .module #slideshow.col_6.mini,
.glp .module #slideshow.col_6.mini,
.wlp .module #slideshow.col_6.mini {
	min-height: 225px;
}

#slides div {
	background: transparent url('/image/wpd/slideshows/multi-homepage-second-2012-02-07.jpg') no-repeat 0 0; /* Sprite */
	position: relative;
	overflow: hidden;
	text-indent: -999em;
	border: 2px solid #fff;
	border-bottom: 0;
	margin: 5px;
	width: 744px;
	z-index: 0;
}

#slides div:first-child {
	background: transparent url('/image/wpd/slideshows/multi-homepage-first-2012-02-07.jpg') no-repeat 0 0;
}

#slideshow.mini #slides div {
	
	/* Need final sprited images */

	background: transparent url('/image/tp/rebrand/tempImg.png') no-repeat 0 0; /* Sprite */
	margin: 4px;
	border: 0;
	width: 217px;
	height: 144px;
}

#slideshow.mini #slides div:first-child {
	
	/* Need final mini image 1 */
	
	background: transparent url('/image/tp/rebrand/tempImg.png') no-repeat 0 0;
}

.full #slides div {
	/* Need final image */
	
	background: transparent url('/image/tp/multi-homepage-second.jpg') no-repeat 0 0; /* Sprite */
	width: 954px;
}

#slides a {
	display: block;
	position: absolute;
	top: 0; left: 0;
}

#slideshow.mini #slides a {
	/* width: 218px; */
	width: 217px;
	height: 131px;
}

.full #slides a {
	width: 954px;
}

/* Controls the height of the slides */
.wpd #slides div, .wpd #slides a {
	height: 356px;
	width: 744px;
}

.lp #slides div, .lp #slides a,
.vlp #slides div, .vlp #slides a,
.bvlp #slides div, .bvlp #slides a,
.gvlp #slides div, .gvlp #slides a,
.wvlp #slides div, .wvlp #slides a,
.full #slides div, .full #slides a {
	height: 260px;
}

/* Slideshow "control" links (pagination) */
#slideshow-controls {
	position: relative;
	width: 750px;
	z-index: 15;
	border-right: 2px solid #fff;
	margin: 7px 0 5px 5px;
}

.full #slideshow-controls {
	width: 100%;
}

#slideshow-controls p {
	position: relative;
	float: left;
	text-align: center;
	padding-top: 5px;
	margin: -5px 0 5px 0;
	white-space: nowrap;
	overflow: hidden;
}

#slideshow-controls p:first-child a {
	border-left: 2px solid #fff;
}

#slideshow.mini #slideshow-controls {
	position: absolute;
	bottom: 8px;
	right: 5px;
	width: auto;
}

#slideshow.mini #slideshow-controls p {
	background: transparent;
	padding: 0;
	margin: -8px 0 0 3px;
	font-size: .9em;
}

#slideshow.mini #slideshow-controls p:first-child {
	margin-left: 0;
}

#slideshow-controls a {
	display: block;
	background: #b3a89d;
	color: #fff;
	vertical-align: middle;
	padding: 2px 0 4px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
}

#slideshow.mini #slideshow-controls a {
	padding: 1px 6px 0;
	border: 0;
	background: transparent;
	color: #00d1ce;
	border: 0;
	vertical-align: middle;
}

.blp #slideshow.mini #slideshow-controls a,
.bvlp #slideshow.mini #slideshow-controls a {
	color: #099;
}

#slideshow-controls a:hover, #slideshow-controls a.activeSlide {
	background: #5CADD6;
	text-decoration: none;
}

#slideshow-controls p.activeSlide {
	/* background: url('/image/tp/rebrand/sprite-main.png') no-repeat 0 0; */
	z-index: 20;
}

.bhp #slideshow-controls a:hover, .bhp #slideshow-controls .activeSlide a,
.blp #slideshow-controls a:hover, .blp #slideshow-controls .activeSlide a,
.bvlp #slideshow-controls a:hover, .bvlp #slideshow-controls .activeSlide a {
	background: #97b5b4;
}

#slideshow.mini #slideshow-controls p.activeSlide a {
	background: #00d1ce;
	color: #fff;
	-moz-border-radius: 14px;
	-webkit-border-radius: 14px;
	-o-border-radius: 14px;
}

.blp #slideshow.mini #slideshow-controls p.activeSlide a,
.bvlp #slideshow.mini #slideshow-controls p.activeSlide a {
	background: #099;
}

/* Next/Previous */
#slideshow #prev, #slideshow #next {
	display: none;
	position: absolute;
	top: 40%;
	width: 27px;
	height: 54px;
	z-index: 10;
	cursor: pointer;
}

#slideshow.mini #prev, #slideshow.mini #next {
	top: 25%;
	width: 17px;
	height: 32px;
}

#slideshow #prev {
	background: url('/image/tp/rebrand/sprite-main.png') no-repeat 0px -279px;
	left: 0;
}

#slideshow #next {
	background: url('/image/tp/rebrand/sprite-main.png') no-repeat -41px -279px;
	right: 0;
}

#slideshow.mini #prev {
	background: url('/image/tp/rebrand/sprite-main.png') no-repeat 0px -342px;
}

#slideshow.mini #next {
	background: url('/image/tp/rebrand/sprite-main.png') no-repeat -52px -342px;
}
/* --- dots -- */
#ssdots {
	position:absolute;
	bottom:15px;
	right: 15px;
	z-index: 15;
}

#ssdots p {
	margin: 0px 5px;
	float: left;
	width: 10px;
	background: #DDD;
	opacity:0.8;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border: 1px solid #666;
}

#ssdots a {
	text-indent: -9999px;
	width:10px;
	height: 10px;
	display:block;
}

#ssdots p.activeSlide {
	background: #666;
	opacity: 1.0;
}

/* --- SPECIFYING THE CSS FOR EACH OF THE VERTICALS HERE --- */