/* ================================================ Page ================================================== */

/* This holds the entire page. This div could later be horizontally centered within
	the browser window if desired. */
div#page
{
	margin-left: 68px;
	width: 470px; /* same width as the widest possible image */


	/* This allows other child elements to be positioned with respect to this */
	position: relative;

	/* This pushes the H1 downwards */
	padding-top: 44px;
}

/* =========================================== Headers ============================================== */


/* This is the primary logo (currently) at the top of the page */
div#page h1
{
	margin-bottom: 50px;
}

/* These are the generally-larger headers such as "Search and "Featured Packages" */
div#page h2
{
	margin-bottom: 0.1em;
}


/* This is in use on the popups such as for the bylines (and elsewhere within pages) */
div#page h4
{
	margin-bottom: 0.8em;
}

/* ============================================ Image Container ===================================== */

/* An image container holds photographs and, when used with veritcal photos,
	horizontally centers the image and applies a (currently ) gray background behind it. */

/* This holds the main image on the home page */
div#page div.image-container
{
	margin-bottom: 1.1em;
}

/* =========================================== Buttons ============================================== */

div#page ul#image-preview-buttons
{
	margin: 0;
	padding: 0;
	display: block;

	margin-bottom: 1em;
}

/* This ensures that any floated elements within the image-preview-buttons ul are automatically cleared,
	though using the easy clearing technique: http://www.positioniseverything.net/easyclearing.html */
div#page ul#image-preview-buttons:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

div#page ul#image-preview-buttons {display: inline-block;}

/* Hides from IE-mac \*/
* html div#page ul#image-preview-buttons {height: 1%;}
div#page ul#image-preview-buttons {display: block;}
/* End hide from IE-mac */


div#page ul#image-preview-buttons li
{
	margin: 0;
	padding: 0;

	float: left;

	/* This helps prevent retardation in IE when floating LIs. */
	display: inline;
}

/* General properties for image-replacement buttons */
div#page ul#image-preview-buttons li
{
	margin: 0em;
	padding: 0em;

	margin-right: 1.0em;

	position: relative;
	font-size: 1.0em;

	/* hide overflow:hidden from IE5/Mac */
	/* \*/
	overflow: hidden;
	/* */
}

div#page ul#image-preview-buttons li a
{
	/* IE tends to forget to use the "hand" cursor without a little reminding here */
	cursor: pointer;
}

/* General properties for image-replacement buttons, continued */
div#page ul#image-preview-buttons li span
{
	width: 100%;
	height: 100%;
	position: absolute;
	background-repeat: no-repeat; /* Just to be sure */
}

/* This hides the text via the Phark text-hiding method:
http://www.mezzoblue.com/tests/revised-image-replacement/#phark2 */

div#page ul#image-preview-buttons li#add-to-lightbox span,
	div#page ul#image-preview-buttons li#remove-from-lightbox span
{
	text-indent: -5000px;
}

/* this is the "on" state for add-to-lightbox */

div#page ul#image-preview-buttons li#add-to-lightbox
{
	width: 143px;
	height: 18px;
	background-image: url(../images/buttons/add-to-lightbox-hover.png);
	background-repeat: no-repeat;
}

div#page ul#image-preview-buttons li#remove-from-lightbox
{
	width: 143px;
	height: 18px;
	background-image: url(../images/buttons/remove-from-lightbox-hover.png);
	background-repeat: no-repeat;
}


/* this is the "off" state for add-to-lightbox */

div#page ul#image-preview-buttons li#add-to-lightbox a
{
	background-image: url(../images/buttons/add-to-lightbox.png);
	background-repeat: no-repeat;
	display: block;
	width: 100%;
	height: 100%;
}

div#page ul#image-preview-buttons li#remove-from-lightbox a
{
	background-image: url(../images/buttons/remove-from-lightbox.png);
	background-repeat: no-repeat;
	display: block;
	width: 100%;
	height: 100%;
}

div#page ul#image-preview-buttons li#add-to-lightbox a:hover,
	div#page ul#image-preview-buttons li#remove-from-lightbox a:hover
{
	background-image: none;
}

/* This hides the text via the Phark text-hiding method:
http://www.mezzoblue.com/tests/revised-image-replacement/#phark2 */

div#page ul#image-preview-buttons li#add-to-cart span,
	div#page ul#image-preview-buttons li#remove-from-cart span
{
	text-indent: -5000px;
}

/* this is the "on" state for add-to-cart and remove-from-cart*/

div#page ul#image-preview-buttons li#add-to-cart
{
	width: 121px;
	height: 18px;
	background-image: url(../images/buttons/add-to-cart-hover.png);
	background-repeat: no-repeat;
}

div#page ul#image-preview-buttons li#remove-from-cart
{
	width: 121px;
	height: 18px;
	background-image: url(../images/buttons/remove-from-cart-hover.png);
	background-repeat: no-repeat;
}

/* this is the "off" state for add-to-cart and remove-from-cart */

div#page ul#image-preview-buttons li#add-to-cart a
{
	background-image: url(../images/buttons/add-to-cart.png);
	background-repeat: no-repeat;
	display: block;
	width: 100%;
	height: 100%;
}

div#page ul#image-preview-buttons li#remove-from-cart a
{
	background-image: url(../images/buttons/remove-from-cart.png);
	background-repeat: no-repeat;
	display: block;
	width: 100%;
	height: 100%;
}

div#page ul#image-preview-buttons li#add-to-cart a:hover,
	div#page ul#image-preview-buttons li#remove-from-cart a:hover
{
	background-image: none;
}

/* This hides the text via the Phark text-hiding method:
http://www.mezzoblue.com/tests/revised-image-replacement/#phark2 */

div#page ul#image-preview-buttons li#back span
{
	text-indent: -5000px;
}

/* this is the "on" state for back */

div#page ul#image-preview-buttons li#back
{
	width: 51px;
	height: 19px;
	background-image: url(../images/buttons/back-hover.png);
	background-repeat: no-repeat;
	float: right;
	margin: 0em;
}

/* this is the "off" state for back */

div#page ul#image-preview-buttons li#back a
{
	background-image: url(http://tnpv.us/i/nyta/buttons/back.png);
	background-repeat: no-repeat;
	display: block;
	width: 100%;
	height: 100%;
}

div#page ul#image-preview-buttons li#back a:hover
{
	background-image: none;
}

/* =========================================== Links ============================================== */

div#page ul#popup-image-options
{
	padding-top: 0.5em;
	float: right;
	width: 50%;
	text-align: right;
}


/* ==================================== Descriptive Paragraph ====================================== */

div#page p.descriptive-paragraph
{
	margin-bottom: 1.5em;
}

/* ==================================== Footer ====================================== */

div#page div#footer
{
	border-top: 1px solid rgb(101,177,209); /* Cyan, more or less */

	color: rgb(120,120,120);

	/* The footer doesn't need to float on popup pages */
	float: none;
	width: 100%;
}

/* This holds the paragraph(s) within the footer area */
div#footer div#footer-paragraphs
{
	margin-top: 1.5em;
}