/**

 * Stylesheet for the Greeting Card Popup.

 *

 * popupIEFrame		id of iframe for IE hack

 * popup			id & class of div layer containing the divs listed below,

 *                  this is the top-level tag for the Greeting Card Builder pop-up layer.

 * popupHeader		id & class of div layer containing the popupTitle and popupExit divs

 * popupTitle		id & class of div layer stretching across the top which is draggable

 * popupExit		id & class of div layer containing close window image

 * popupBody		id & class of div layer that contains the window contents

 */



/* ---[ BEGIN: Greeting Card styles used in the Shopping Cart  ]------------- */

img.greetingCardThumbnailInPopupV

{

	width: 87px; /* dimensions to hold laying when images don't load */

	height: 120px;

	cursor: hand;

}

img.greetingCardThumbnailInPopupH

{

	width: 87px; /* dimensions to hold laying when images don't load */

	height: 63px;

	cursor: hand;

}

img.greetingCardThumbnailInCartV

{

	cursor: hand;

	vertical-align: middle;

}

img.greetingCardThumbnailInCartH

{

	cursor: hand;

	vertical-align: middle;

}

img.addGreetingCardInCart

{

	cursor: hand;

}

span.greetingCardTextInCart {}

span.greetingCardText_PersonalizedGreetingCard {}

span.greetingCardText_edit {}

span.greetingCardText_remove {}

span.greetingCardText_sep {}

/* ---[ BEGIN: Greeting Card styles used in the Shopping Cart  ]------------- */



/* ---[ BEGIN: Image Styles ]------------------------------------------------ */

img

{

	border: 0;

}



#popup_closeWindowLabel

{

	margin-right: 8px;

    text-decoration: underline;

}

#popup_img_closeWindow { display: none; }

#popup_img_cardHeader { text-align: center; }

#popup_img_selectACardLabel {}

#popup_img_chooseCategory {}

#popup_img_preview {}

#popup_img_submit {}



/* ---[ END: Image Styles ]-------------------------------------------------- */



/**

 * The pop-up layer

<div class="popup" id="popup" style="visibility: hidden; display: none;">

  <div class="popupHeader" id="popupHeader">

    <div class="popupTitle" id="popupTitle"></div>

    <div class="popupExit" id="popupExit"></div>

  </div>

  <div class="popupBody" id="popupBody"></div>

</div>

 */

div.popup

{

	z-index: 100;

    width: 575px; /* width: 625px; */

	

  	background: white;

	border: 1px solid black;

	/* overflow: hidden; */

}



/**

 * Draggable area containing close image (image actually in sub element w/ id popupExit)

 */

div.popup div.popupHeader

{

  	cursor: default;

  	height: 14px;

  	line-height: 19px;

  	text-decoration: none;

  	font-family: "Times New Roman", Serif;

  	font-size: 13px;

}



div.popup div.popupBody {}



div.popup div.popupHeader div.popupTitle

{

  	float: left;

}



div.popup div.popupHeader div.popupExit

{

  	float: right;

  	cursor: hand;

	padding: 3px;

}



/**

 * <div> containing initial content before AJAX call returns w/ body of pop-up

 */

div#popup_loading_text

{

	text-align: center;

	font-size: medium;

	width: 100%;

	margin-top: 50px;

}



/**

 * <div> containing initial content before AJAX call returns w/ body of pop-up

 */

div#popup_loading_image

{

	text-align: center;

	width: 100%;

	margin-top: 40px;

	margin-bottom: 60px;

}



/**

 * Highest level <div> in content returned from AJAX call to BECGreetingCardBuilderView.

 */

#popup_body

{

	/* background-color: white; */ /* Setting bgcolor here makes vertical preview section blank in IE */

}



/**

 * <div> containing visible content below the close window link. Contains the HD logo.

 */

#popup_cardHeader

{

	margin-top: 15px;

	margin-bottom: 30px;

	text-align: center;

}



/**

 * <div> containing the "Select a Greeting Card" image.

 */

#popup_selectACardLabel

{

	text-align: left;

	margin-left: 8px; /* to align w/ popup_cardCatalog */

}



/**

 * <div id="popup_cardCatalog">

 *   <div id="category_SCGreetingCard001" class="categoryShown/categoryHidden" name="category">

 *     <div id="row1" class="row">

 *       <div class="cardCell01" id="card_B43_SCGreetingCard001">

 *         <img /><br />

 *         <input type="radio" name="cardSelection" id="radio_B43_SCGreetingCard001"/>

 *       </div>

 *     </div>

 *   </div>

 * </div>

 */

#popup_cardCatalog

{

	border: 1px solid black;

	position: relative;

	text-align: left;

	padding: 5px;

	margin: 8px;

}



/**

 * Class for all category <div>s that are not currently displayed.

 * id will have the following format: category_SCGreetingCard001 

 * (where SCGreetingCard001 is the value in CATGROUP.IDENTIFIER)

 */

div.categoryHidden

{

	display: none;

	visibility: hidden;

}



/**

 * Class for the one category <div> that is currently displayed.

 * id will have the following format: "category_SCGreetingCard001"

 * (where SCGreetingCard001 is the value in CATGROUP.IDENTIFIER)

 */

div.categoryShown

{

	display: inline;

	visibility: visible;

	position: relative;

}



/**

 * <div> containing a set of card cell <div> tags.

 * id will be like "row1"

 */

.row

{

	position: relative;

	height: 150px;

	top: 0;

	left: 0;

	z-index: 2;

	visibility: visible;

	display: block;

}



/**

 * Common styles for all card cells.

 * class will be like: "cardCell01"

 * id will be like: "card_B43_SCGreetingCard001"

 */

div.row div

{

	position: absolute;

	top: 0px;

	height: 150px;

	width: 20%; /* this value should be 100/number of columns shown */

	text-align: center;

  	cursor: hand;

}



table.popup_cardThumbShadowTableV

{

	border: none;

}



table.popup_cardThumbShadowTableH

{

	border: none;

	margin-top: 25px; /* to vertically center the horizontal thumbnails */

}



/**

 * Card cell <div> tags by class. 

 */

div.cardCell01

{

	left: 0%;

}

div.cardCell02

{

	left: 20%;

}

div.cardCell03

{

	left: 40%;

}

div.cardCell04

{

	left: 60%;

}

div.cardCell05

{

	left: 80%;

}



/* ----[ END popup_cardCatalog ]--------------------------------------------- */



/**

 * <div id="popup_categoryDropDown">

 *   <select id="popup_categoryDropDownSelect">

 *     <option value="SCGreetingCard001">Every Day Greeting Cards</option>

 *   </select>

 * </div>

 */

#popup_chooseCategoryLabel

{

	display: inline;

	float: right;

	vertical-align: text-bottom;

}



#popup_categoryDropDown

{

	/*

	visibility: hidden;

	text-align: center;

	*/

	display: inline;

	float: right;

	margin-right: 8px;

	vertical-align: text-bottom;

}



#popup_categoryDropDownSelect

{

	

}



/**

 * Tag heirarchy reference (needs updating):

 * 

 * <div id="popup_cardPreviewSection" class="previewSectionHidden/Shown">

 *   <div id="popup_cardCover" class="cardCoverVertical/Horizontal">

 *     <div id="popup_cardCoverHead">

 *       <span id="popup_cardCoverHeadLabel">Card Cover</span>

 *     </div>

 *     <div id="popup_cardCoverBody">

 *       <img id="popup_previewImage" />

 *     </div>

 *   </div>

 *   <div id="popup_cardGreeting" class="cardGreetingVertical/Horizontal">

 *     <div id="popup_cardGreetingHead">

 *       <span id="popup_cardGreetingHeadLabel">Enter Card Greeting</span>

 *     </div>

 *     <textarea id="popup_cardGreetingTextArea" class="cardGreetingTextVertical/Horizontal" />

 *     <div id="popup_cardGreetingFoot">

 *       <div id="popup_cardGreetingFootLabel">

 *         <span id="popup_charsPerLineNumber" />

 *       </div>

 *       <div id="popup_charsLeftDiv">

 *         <input id="popup_charsLeftInput" />

 *       </div>

 *       <div id="popup_charsLeftLabel"></div>

 *     </div>

 *   </div>

 *   <div id="popup_cardGreetingSubmitArea">

 *   </div>

 * </div>

 * <div id="popup_cardFooter"></div>

 */



/**

 * Contains all the content which is hidden initially when first adding a card.

 */

#popup_cardPreviewSection

{

	margin-left: 8px; /* to align w/ popup_cardCatalog */

	margin-right: 8px;

	width: auto;

	text-align: left;

	/* text-align: center; /*  default in IE, doesn't work in firefox */

}



div.previewSectionHidden

{

	visibility: hidden;

	display: none;

}



div.previewSectionShown

{

	visibility: visible;

	display: block;

}



/**

 * cardPreviewFrame classes align submit button with text box

 */

#popup_cardPreviewFrame {}

div.cardPreviewFrameVertical {}

div.cardPreviewFrameHorizontal 

{

	/* TODO move this to a class and toggle w/ orientation */

	width: 502px;

	margin-left: 26px; 

}



/**

 * <div> containing the image with the word "Preview:"

 */

#popup_cardPreviewLabel

{

	text-align: left;

	margin-top: 12px;

	margin-bottom: 8px;

}



/* -----[ Card Cover Image Preview Styles ]---------------------------------------- */

#popup_cardCover

{

}



/**

 * Vertical Preview

 * id: popup_cardCover

 */

div.cardCoverVertical

{

	float: left;

	width: 274px; /* previewImageVertical.width + popup_previewImage.border px*/

}



div.cardCoverHorizontal

{

	float: none;

	width: 502px; /* previewImageHorizontal.width + popup_previewImage.border px*/

	margin-bottom: 25px;

}



#popup_cardCoverHead

{

	height: 19px;

	background-color: #E7E7D0;

	text-align: left;

}



/**

 * <span> containing the text inside popup_cardCoverHead

 * "Card Cover"

 */

#popup_cardCoverHeadLabel

{

	font-weight: bold;

	font-size: 10pt;

	margin-left: 10px;

	color: #666633;

}



/**

 * Preview image container <div>

 */

#popup_cardCoverBody

{

}



#popup_previewImage

{

	border: solid black 1px;

}



img.previewImageVertical

{

	float: left;

	width: 272px; /* dimensions to hold laying when images don't load */

	height: 375px;

}

img.previewImageHorizontal

{

	float: none;

	width: 500px;  /* dimensions to hold laying when images don't load */

	height: 363px;

}



div.cardCoverVerticalDropShadowRight

{

	float: left;

}



div.cardCoverVerticalDropShadowBottom

{

	float: left;

	clear: left;

}



div.cardCoverHorizontalDropShadowRight

{

	float: right;

}



div.cardCoverHorizontalDropShadowBottom

{

	float: left;

	clear: left;

}



/* -----[ Card Greeting Text Entry Styles ]---------------------------------- */

#popup_cardGreeting

{

}



div.cardGreetingVertical

{

	float: right;

	width: 272px;

}



div.cardGreetingHorizontal

{

	float: none;

	width: 512px;

}



#popup_cardGreetingHead

{

	height: 19px;

	background-color: #E7E7D0;

	text-align: left;

}



/**

 * <span> containing the text inside popup_cardGreetingHead

 * "Enter Card Greeting"

 */

#popup_cardGreetingHeadLabel

{

	font-weight: bold;

	font-size: 10pt;

	margin-left: 10px;

	color: #666633;

}



/**

 * <div> that serves as a container for the <textarea> so that is centered and has a border

 */

#popup_cardGreetingTextDiv

{

	text-align: center;

	vertical-align: middle;

	border-top: 1px solid;

	border-left: 1px solid;

	border-right: 1px solid;

}



div.cardGreetingTextDivVertical

{

	height: 334px;

}



div.cardGreetingTextDivHorizontal

{

	width: 500px;

	height: 320px;

}



#popup_cardGreetingTextBoxCenteringTable

{

	height: 334px;

	border: 0;

	vertical-align: middle;

}



/**

 * Common styles for the greeting text area regardless of the orientation of the selected card.

 */

#popup_cardGreetingTextArea

{

	border: 1px solid #C0C0C0;



	text-align: left;

	font-family: "Times New Roman", Times, TimesNR, serif;

	font-weight: normal;

	font-style: normal;

	color: #333333;

	overflow: auto;

}



/**

 * Textarea input for vertical cards. Height needs to be a little less than 

 * the size of img.previewImageVertical - popup_cardGreetingFoot (373px - 37px)

 * 

 * Padding styles increase the size of the textarea, so as these change the

 * height/width needs to change correspondingly.

 */

textarea.cardGreetingTextVertical

{

	/*height: 177px;	/* height: 334px; - padding-top */

	/*width: 121px;	/* width: 270px; - padding-left */

	

	/*

	padding-top: 50px;

	padding-left: 50px;

	*/

	

	font-size: 14px;

}



/**

 * Textarea input for horizontal cards.

 * 

 * Padding styles increase the size of the textarea, so as these change the

 * height/width needs to change correspondingly.

 */

textarea.cardGreetingTextHorizontal

{

	/*height: 238px;	/* height: 354px; - padding-top */

	/*width: 379px;	/* width: 500px; - padding-left */

	

	/*

	padding-top: 70px;

	padding-left: 120px;

	*/

	

	font-size: 16px;

}



/* -----[ Card Greeting Text Footer Styles ]--------------------------------- */

#popup_cardGreetingFoot

{

	height: 37px;

	background-color: #E7E7D0;

	

	border-left: 1px solid;

	border-right: 1px solid;

	border-bottom: 1px solid;

	

	font-weight: bold;

	font-size: 7pt;

	padding-top: 5px;

}



#popup_cardGreetingFootLabel

{

	float: left;

	text-align: left;

	width: 50%;

	margin-left: 10px;

}



#popup_maxChars {}



#popup_charsPerLineLabel

{

	display: inline;

	visibility: visible;

}



#popup_charsPerLineNumber {}



#popup_charsLeftInput

{

	float: right;

	margin-left: 4px;

	margin-right: 5px;

}



#popup_charsLeftLabel

{

	float: right;

	text-align: left;

	width: 20%;

	margin-left: 15px;

}



#popup_cardGreetingSubmitArea

{

	clear: both; /* moves this <div> down below floated elements on either side */

	text-align: right;

}



#popup_cardGreetingSubmitButtonDiv

{

	float: right;

	display: block;

	margin-top: 5px;

	/*margin-bottom: 10px; /* pushes the lower boundary of the pop-up layer down in all but IE */

}



#popup_addToAllLabel

{

	float: right;

	display: block;

	width: 156px; /* Firefox isn't honoring this when float: none, <br> inserted into text */

	height: 30px;

	margin-top: 5px;

	margin-left: 5px;

	margin-right: 20px;

	

	text-align: left;

	font-weight: bold;

	font-size: 7pt;

}



#popup_addToAllCheckboxDiv

{

	float: right;

	display: block;

	margin-top: 5px;

	vertical-align: middle;

}



#popup_addToAllCheckbox

{

	margin-bottom: 8px;

}



/**

 * <div> containing disclaimer text at the bottom of the pop-up.

 */

#popup_cardFooter

{

	clear: both; /* moves this <div> down below floated elements on either side */

	width: 100%;

	text-align: left; /* Firefox won't center <div> tags */

	margin-top: 10px;

	margin-bottom: 10px;

}



/**

 * <div> inside popup_cardFooter containing disclaimer text.

 */

#popup_cardFooterLabel

{

	width: 340px;

	text-align: center;

	margin-left: 116px; /* Firefox won't center <div> tags */

}