﻿.personalization
{
	width: 920px;
	min-height: 600px;
	margin: 0px;
	padding-bottom: 15px;
	font: 13px/1.3 Arial, Helvetica, sans-serif;
	color: #444;
	background-color: #b2d5e7;
	text-align: left;
}

.personalization TD, .personalization SPAN, .personalization LI, .personalization BODY, .personalization P,
.personalization OPTION, .personalization SELECT, .personalization INPUT, .personalization TEXT, .personalization TEXTAREA, .personalization SUBMIT 
{ 
	font: 13px/1.3 Arial, Helvetica, sans-serif;  
}

/* For FF to not have gaps between stacked images */
.personalization img
{
	display: block;
}

#previewBody
{
	/*width: 460px;
	height: 440px;*/
	width: 650px;
	height: 600px;
	background-color: #b2d5e7;
	text-align: center;
	margin: 0;
	padding: 0;
}

#mainWrapper
{
	float: left;
	/*margin: 0 auto;*/
	margin-left:50px;
	text-align: left;
}

#mainWrapper img
{
	border: 0;
	/*width: 480px;*/
}

.personalization h2,
.personalization h3
{
	margin: 0px;
	FONT: 1em/1.5em "Trebuchet MS" Verdana, Arial, sans-serif; 
	COLOR: Black;
}

.personalization a
{
	font: .9em/1.5em Arial, sans-serif; /*color: #6AB0D0;*/
	color: #207090;
	text-decoration: underline;
	
}

.personalization a:hover
{
	text-decoration: underline;
}


/* Personalization Navigation */

#personalInfo #step1,
#etiquetteAssistant #step2,
#designStudio #step3
{
	color: #306881;	
}

#personalizationNav
{
	background-image: url( '../smittenimages/ribbon.gif' );
	background-repeat: repeat-x;
	width: 920px;
	height: 59px;
	float: left;
	clear: both;
}

#personalizationNav a
{
	float: left;
	margin: 15px 20px 0px 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11pt;
	color: #90C0E0;
}

#personalizationNav a dl
{
	margin: 0px;
	float:left;
	cursor: pointer;
}

#personalizationNav a dt
{
	font-size: 8pt;
	line-height: 7pt;
}

#personalizationNav a dd
{
	margin:0px;
	line-height: 13pt;
}

#personalizationNav img
{
	margin-left: 15px;
	margin-right: 50px;
	float: left;
}


/* PERSONAL INFO PAGE STYLES
 *
----------------------------------------------------------------------------*/


#personalInfo
{
   /* min-height: 700px;*/
	float: left;
	clear: both;
}

/* This is for safari */
html[xmlns*=""] body:last-child #personalInfo { min-height: 750px; }
    body:last-child:not(:root:root) #personalInfo { min-height: 750px; }

#personalInfo #primaryContent
{
	width: 600px;
	margin-left: 10px;
	padding-bottom: 25px;
	float: left;
}

#personalInfo #myform
{
	width: 550px;	
	background-color: #fcfcee;
	margin-top: 10px;
	border: solid 1px #6AB0D0;
}

#personalInfo label
{
	float: left;
	width: 14em;
	margin-left: 1em;
	clear: left;
}

#personalInfo input
{
	width: 15em;
	float: left;
}

#personalInfo select
 {
	width: 12em;
	float: left;
}

#personalInfo legend
{
	margin: 0;
	padding-left: 0px;
	font: 1.1em/1.5em Garamond, Arial, sans-serif;
	color: #6AB0D0;
	font-weight: bold;
}

#personalInfo fieldset
{
	padding-bottom: 10px;
	margin: 10px;
	clear: left;
}

#personalInfo p
{
	float: left;
	margin: 3px 0px;
}

#personalInfo #secondaryContent
{
	width: 262px;
	height: 600px;
	float: right;
	margin: 0px 10px;
}

#personalInfo #secondaryContent #tips
{
	margin: 0;
	FONT: 1em/1.1em Arial, sans-serif;
}

#personalInfo #secondaryContent #nextPage
{
    margin-top: 225px;
	width:121px;
}


/* ETIQUETTE ASSISTANT PAGE STYLES
 *
----------------------------------------------------------------------------*/

#etiquetteAssistant
{
	float: left;
}

#etiquetteAssistant #instructionsWrapper
{
	visibility: hidden;
}

#TB_window #instructions
{
	padding: 15px 5px;
	font-size: 16px;
	line-height: 1.5;
}

#TB_window #instructions h2
{
	font-size: 16px !important;
}

#TB_window #instructions p
{
	font-size: 14px;
}

#etiquetteAssistant #primaryContent
{
	margin: 0px 10px;
	padding:0px;
	float: left;
	width: 318px;
	height: 466px;
}

#etiquetteAssistant #primaryContent img
{
	margin-bottom: 8px;	
}

#etiquetteAssistant #myform
{
	background-color: White;
	border: solid 1px #6AB0D0;
	padding:  10px 20px;
	margin-top: 0px;
	margin-bottom:10px;
	width: 272px;
	float: left;
	min-height: 300px;
}

#etiquetteAssistant h4
{
	margin:  7px 0px;
	padding-left: 8px;
	font: 1.1em/1.5em Garamond, Arial, sans-serif;
	color: #6AB0D0;
	font-weight: bold;
}

#etiquetteAssistant #myform p
{
	padding: 0px;
	margin: 5px 0px;
	float: left;
	clear: both;
	width: 100%;
	cursor: pointer;
}

#etiquetteAssistant #primaryContent p input
{
	margin-right: 5px;
	float: left;
}

#questionWrapper
{
	height: 250px;
	overflow: hidden;
}

#etiquetteAssistant p span
{
	float: left;
	width: 247px;
}

#answers, #suggestions
{
	width: 100%;
}

#suggestionsWrapper
{
	margin-top: 25px;
	min-height: 150px;
	overflow: hidden;
}

#etiquetteAssistant #previous
{
	float:left;
	cursor: hand;
	font-size: 1.1em;
}

#etiquetteAssistant #next
{
	float:right;
	cursor: hand;
	font-size: 1.1em;
}

#etiquetteAssistant #previewWrapper
{
	width: 290px;
	height: 430px;
	float: left;
	background-color: White;	
	border: solid 1px #6AB0D0;
	text-align: center;
	font-family: Garamond;
	font-size: 10.5pt;
}


#etiquetteAssistant #preview
{
	position: relative;
	z-index: 10;
	width: 290px;
	padding: 10px 0px;
	margin: 20px 0px 0px 0px;
	height: 353px;
}

/*
#etiquetteAssistant #loading
{
	position: absolute;
	z-index: 20;
	width: 290px;
	padding: 10px 0px;
	margin: 20px 0px 0px 0px;
	height: 353px;

	background-color:#000;
	filter:alpha(opacity=90);
	-moz-opacity: 0.90;
	opacity: 0.90;
}*/

#previewWrapper #topLeft
{
	float: left;
	margin: -4px 0px 0px -4px;
}

#previewWrapper #topRight
{
	float: right;	
	margin: -4px -4px 0px 0px;
}

#previewWrapper img#bottomLeft
{
	float: left;	
	margin: 0px 0px 0px -4px;
}

#previewWrapper img#bottomRight
{
	float: right;	
	margin: 0px -4px 0px 0px;
}

#preview em
{
	background-color: #FFFFCC;
	text-decoration: none;
	font: inherit;
	width: 94%;
	font-style: normal;
	display:inline-block;
	margin: 0px;
}

#etiquetteAssistant #secondaryContent
{
	width: 262px;
	height: 304px;
	clear:right;
	float: left;
	margin: 0px 10px;
}

#etiquetteAssistant #secondaryContent img
{
	display: block;
}

/*
#primaryContent *
{
	margin: 0;
	border-width: 0px;
	padding: 0px;
}
*/

#tips
{
	margin: 0px;
	padding: 15px 20px 15px 10px;
	display:block;
	background-repeat: repeat-y;
	background-image: url( '../smittenimages/noteMiddle.gif');
	text-align: center;
	height: 150px;
	width:240px;
	font-size: 12px;
}

#etiquetteAssistant #secondaryContent #nextPage
{
    margin-top: 25px;
}


/* DESIGN STUDIO PAGE STYLES
 *
----------------------------------------------------------------------------*/
#designStudio
{
	float: left;
	width: 100%;
}
/* For Stationery admin */
#designStudio #secondaryContent .left
{
	float: left;
	width: 260px;
	margin: 5px;
}

#designStudio #secondaryContent .left label
{
	float: left;
	width: 100px;
	clear: left;
	line-height: 20px;
}

#designStudio #secondaryContent .left input,
#designStudio #secondaryContent .left select
{
	float: left;
	width: 150px;
}

#designStudio #secondaryContent .right
{
	float: right;
	margin: 5px;
}

#designStudio #secondaryContent .right label
{
	float: left;
	width: 100px;
	clear: left;
	line-height: 20px;
}

#designStudio #secondaryContent .right input,
#designStudio #secondaryContent .right select
{
	float: left;
	width: 75px;
}

#designStudio #secondaryContent .right a
{
	float: right;
	clear: right;
}

#designStudio #primaryContent #checkBoxGroup
{
	margin-top: 30px;
}

#designStudio #primaryContent #checkBoxGroup input
{
	width: 20px;	
	float: none;
}

/* End Stationery admin */
#designStudio label
{
	font-size: 10px;
	color: #444;
}

#designStudio p 
{
	font: 13px/1.3 Arial, Helvetica, sans-serif;
}

#designStudio img
{
	display: block;
	border: 0;
}

#designStudio #secondaryContent  
{
	width: 480px;
	float: left;
	margin: 10px 0 0 15px;
	padding: 0;
}

#designStudio #previewWrapper
{
	float: left;
	padding: 0;
	margin: 0;
}

#designStudio #preview
{ 
	padding:0;
	margin: 0;
	width: 480px; 
	height: 480px;
	float: left;
	border: solid 1px black;
}

#viewLarger
{
	float: left; clear:left;	
}

#showPreview
{
	float: right; clear: none;
}

#designStudio .palette
{
	background-color: #90C3DC;	
	border: solid 1px #80B0C0;
	float: left;
	padding: 3px;
	margin: 5px 5px 0px 0px;
	height: 105px;
}

#designStudio .palette label
{
	width: 91%;
	font-size: 10px;
}

#designStudio .palette select
{
	font-size: .9em;
	margin: 3px;
}
	
#designStudio .palette h3
{
	height: 20px;
	margin-bottom: 3px; 
}

#designStudio .palette h3 img
{
	float: left;
	height: 20px;
}

#designStudio .palette h3 label
{
	float: left;
	height: 20px;
	padding-top: 1px;
	background: #90C3DC url(  '../smittenimages/fillerCurvedBg.gif' ) repeat-x;
	text-align: center;
	font-size: 14px;
	font-family: Garamond;
}

#designStudio .palette a
{
	font-size: .9em;
}

#designStudio #position
{
	width: 160px;
}

#designStudio #position p
{
	margin-top: 0;
	width: 85px;
	float: right;
	text-align: center;
}

#designStudio #position img
{
	display: inline;
}

#designStudio #position a
{
	position: relative;
	top: 15px;
	height: 10px;
	margin-left: 15px;
}

#spacingLabel
{
	margin: 7px 0 7px 7px;
}

#designStudio #fonts
{
	width: 145px;
}

#designStudio #fonts a
{
	float: right;
}

#designStudio #fonts p
{
	margin: 3px;
}

#designStudio #colors
{
	width: 141px;	
	margin-right: 0px! important;
}

#designStudio #colors span
{
	float: left; /* Just to make it have layout */
	width: 10px;
	height: 10px;
	margin: 5px;
}

#designStudio #colors p
{
	display: block;
	float: left;
	clear: left;
	width: 110px;
	margin: 0px;
	text-indent: 0px;
}

#designStudio #colors a
{
	float: left;
	margin-top: 20px;
	display: block;
	width: 100%;
	text-align: center;
}

#designStudio #instructions
{
	width: 318px;
	height: 90px! important;	
}

#designStudio #instructions p
{
	margin: 0px;
	font-family: Garamond;
	font-size: 1.1em;
}

#designStudio #instructions textarea
{
	width: 98%;
	height: 65px;
	font: 12px/1.3 Arial, sans-serif;
}

#designStudio #thirdNav
{
	float: left;
}

#designStudio #thirdNav p
{
	margin: 5px;
}

#designStudio #primaryContent
{
	float: left;
	clear: right;
	margin: 2px 0px 0px 22px;
	width: 383px;
	height:850px;
}

#designStudio #primaryContent.stationeryPreview
{
	width: 410px;
}

#mergeFieldPopupPanel
{
	background-color: White;
	border: solid 1px black;
	width: 225px;
	vertical-align:  bottom;
}

#mergeFieldPopupPanel td,
#mergeFieldPopupPanel input
{
	height: 8px;
}

#mergeFieldPopupPanel label
{
	font-size:10px;
}

#designStudio #checkToAccent
{
	float: left;
	clear: left;
	margin-top: 10px;	
}

#designStudio #sizeAndAlign
{
	float: right;
	margin-right: 18px;
	margin-top: 10px;
}

#designStudio #primaryContent .indent
{
	float: left;
	margin-left: 25px;
	clear: left;
}

#designStudio #primaryContent input,
#designStudio #primaryContent select
{
	font-size: 9pt;
	padding: 1px 2px;
	margin-left: 3px;
	float: left;
}

#designStudio #primaryContent select
{
	padding: 0;
}

#designStudio #primaryContent p
{
	display: block;
	float: left;
	clear: both;
	margin:1px 0px;
	width: 100%; /* used to be 380px */
	height: 22px;
}

#designStudio #primaryContent input
{
	width: 225px;
}

#designStudio #primaryContent input.accentCheck,
#designStudio #primaryContent input.mergePi
{ 
	width: 20px;
	height: 22px;
	float: left;
	margin: 0;
}

#designStudio input.accent
{
	clear: left;
}

#designStudio #primaryContent select 
{

}

#designStudio #disclaimer
{
	height: auto !important;
	width: 340px !important;
	margin-bottom: 10px !important;
	font: 10px/1.2 Arial, Helvetica, sans-serif;
	clear: both;
	text-align: left;
}

#designStudio #primaryContent .secondaryNav input
{
	width: auto;
	margin-left: -4px;
}

#designStudio #exit
{
	float: left;
	clear: left;
	width: 175px;
}

#editingToggle
{
	clear:left;
}


/* FONT SELECTION POPUP PAGE STYLES
 *
----------------------------------------------------------------------------*/
#fontSelectionBody
{
	margin: 0;
	padding: 0;
	width: 480px;
	font: 13px/1.3 Arial, Helvetica, sans-serif;
	color: #444;
	background-color: white;
}

#fontSelection
{
	background-color: #FFFFFF;
	text-align: center;
	width: 480px;
}

#fontSelection h1
{
	background-color: #b2d5e7;
	padding: 5px 0 10px 0;
	margin: 0;
}

#fontSelection h2
{	
	font-size: 11px;
	clear: left;
	margin: 15px 0 0 100px;
	text-align:center;
}

#fontSelection dl
{
	text-align:left;
	margin: 15px 2%;
	width: 96%;
}

#fontSelection dt
{
	float: left;
	width: 100px;
	height: 70px;
	margin: 0px 0px 15px 0px;
	text-align: center;
	clear: left;
}

#fontSelection dt p
{ 
	margin: 15px 0 10px 0;
	text-transform: uppercase; 
	font-size: .8em;
}

#fontSelection dt a
{
	margin: 0px;
	font-size: .9em;
	font-style: italic;
}

#fontSelection dd
{
	border: 1px solid #b2d5e7;
	float: left;
	height: 70px;
	margin: 0 0 15px 10px;
	padding: 5px;
	width: 325px;
}

/* POST-ORDER PREVIEW PAGE STYLES
 *
----------------------------------------------------------------------------*/

#designStudioView
{
	text-align: center;
}

#designStudioView #preview
{ 
	margin-top: 25px;
	padding:0;
	border: solid 1px black;
}
      
/* AJAX CONTROL STYLES
 *
----------------------------------------------------------------------------*/
.watermarked {	BORDER-RIGHT: #bebebe 1px solid;	PADDING-RIGHT: 0px;	BORDER-TOP: #bebebe 1px solid;	PADDING-LEFT: 2px;	PADDING-BOTTOM: 0px;	BORDER-LEFT: #bebebe 1px solid;	WIDTH: 150px;	COLOR: gray;	PADDING-TOP: 2px;	BORDER-BOTTOM: #bebebe 1px solid;	HEIGHT: 20px;	BACKGROUND-COLOR: #f0f8ff}

.modalBackground { FILTER: alpha(opacity=70);	BACKGROUND-COLOR: white;	opacity: 0.7}

.popup
{
	padding: 20px;	
}
