/*-----------------------------------
 *  editor.css
 *-----------------------------------*/

/*
 * Styles that affect the guided path page shell.
 */

.h1-title
{
	margin-top:5px;
}

#divGxFooterControls
{
	margin-bottom:10px;
}

div #gx-body-control
{
	width:710px;
	font-size:11px;
	padding-bottom:0px;
}

#gx-body-bottom-rule
{
	display:none;
}

body div #divGxFooterControls
{
	width:auto;
	right:auto;
	position:static;
	padding:0px 10px;
}

body div #divGxFooterControls a#divGxFooterBackButton
{
	margin-left:auto;
}

body #StandardTabs td.RowTwoWords,
body #StandardTabs td.RowTwoWordsClickable,
body #StandardTabs td.RowTwoWordsSelected
{
	width:80px;
}

/*
 * Styles specific to the "Choose Type" page.
 */

#typePageOuter
{
	text-align:left;
}

#typePageInner
{
	margin:15px 50px;
	position:relative;
	zoom:1; /* gives IE "layout", needed for the "absolute in a relative" trick */
}

#typePageOuter div.spacer
{
	height:15px;
}

#typeSelector .faux-preview
{
	display:none;
}

#typeSelector #divPreviewGrid
{
	padding-bottom:20px;
}

.caricature-type-preview
{
	margin-top:10px;
	text-align:center;
}

.caricature-type-preview div
{
	text-decoration:none;
	color:#000;
}

.caricature-type-preview p
{
	margin:0px auto; /* auto needed for horiz. centering in Firefox */
	width:70px;
}

#btnCreateNew
{
	bottom:10px;
	position:relative;
	float:right;
}

.useExisting
{
	border:1px solid #8c8dc1;
	margin:8px 0px 20px;
	padding:20px 0px 30px 0px;
	padding-right:15px;
	text-align : left;
}

.useExisting p
{
	margin:0px 25px 0px 20px;
	vertical-align:middle;
	line-height:23px;
}

.useExisting img
{
	float:right;
}

.use-existing-continue
{
	text-align : right;
}

/*
 * The styles common to the standard layout pages.
 */

div #gx-body-control
{
	text-align:center;
}

.quadrant-layout
{
	/* CSS centering with auto-margins. */
	margin:0px auto;
	text-align:left;
	width:660px;
}

#editorPageHeader h2
{
	margin:0px;
	font-size:16px;
}

#editorPageHeader p
{
	margin:5px 0px;
	padding-right:100px;
}

#currentCaricatureContainer
{
	padding-bottom:0px;
}

#currentCaricatureContainer .component-container-inner
{
	margin:0px;
	padding-top:0px;
	padding-left:0px;
	padding-right:0px;
}

.preview-grid-container
{
	height:435px;
}

.preview-grid-container .component-container-inner,
#preview-grid-container-inner
{
	width:100%;
}

/*
 * This is used to fill out the preview grid if there aren't enough items in it.
 * Be sure to mimic margins/padding/border of actual preview images.
 */
.preview-grid-container .faux-preview
{
	/* use a border color for visual line-up, the 1px border is needed for sizing */
	border:1px solid white;
	width:90px;
	height:107px;
}

.intermediateStep
{
	border:1px solid white;
	width:90px;
	height:107px;
}

.back-to-addons
{
	margin-left:3em;
}

.addonbtn
{
	margin-top: 10px;
	margin-bottom: 10px;
}

.preview-grid-footer td
{
	text-align:center;
}

/*
 * Caricature preview buttons.
 */

.preview-button div.button-outer
{
	padding:2px;
	background-color:inherit;
	cursor : pointer;
}

.preview-button div.button-inner
{
	border:1px solid #d4e2f9;
	background-color:White;
}

table.preview-table-active,
.preview-button-active div.button-outer
{
	background-color: #ff630a;
}

.name-container,
.color-palette-container,
#skinTonePaletteContainer
{
	margin-top:-1px;
	height:83px;
}

.color-palette-container
{
	height:auto;
}

.name-container #iptCaricatureName
{
	margin-top:5px;
	width:160px;
}

.component-container
{
	border:1px solid #8c8dc1;
	border-top:0px;
	width:100%;
}

.component-container-inner
{
	padding:0px 10px 5px;
}

.component-container h4
{
	font-size:12px;
	margin:0px;
	padding:5px;
}

.component-container .tl,
.component-container .top,
.component-container .tr
{
	background:url('/ig/cvgradient.caspx?w=1&gs=8182bd,2,f9fbff,8,e4ebf8,8,e8eff8,16,ffffff') top center repeat-x;
}

.component-container .top
{
	height:34px;
}

.component-container-rounded
{
	border-left:0px;
	border-right:0px;
}

.component-container-rounded .tl
{
	background:url('/vp/images/nns/common/background/gradient_top_boxes/top_left_round_corner.gif') top left no-repeat;
	width:7px;
}

.component-container-rounded .tr
{
	background:url('/vp/images/nns/common/background/gradient_top_boxes/top_right_corner_round.gif') top right no-repeat;
	width:7px;
}

.component-container-rounded .left
{
	border-left:1px solid #8c8dc1;
}

.component-container-rounded .right
{
	border-right:1px solid #8c8dc1;
}

/*
 * The multi-grid control on the add-ons page.
 */

.multi-grid-container .tab-list
{
	position:relative;
	margin-bottom:-1px;
}

.multi-grid-container .tab
{
	text-decoration:none;
	cursor:pointer;
}

.multi-grid-container .tab .l
{
	background: url(/vp/images/nns/common/background/gradient_tabbed_box/tab_left_slice.gif) top left no-repeat;
	width:4px;
}

.multi-grid-container .tab .c
{
	text-align:center;
	height:25px;
	background: url(/vp/images/nns/common/background/gradient_tabbed_box/tab_tile.gif) repeat-x;
	padding:5px 0;
	color:#2E2F91;
	font:12px;
	width:100px;
}

.multi-grid-container .tab .r
{
	background: url(/vp/images/nns/common/background/gradient_tabbed_box/tab_right_slice.gif) top left no-repeat;
	width:9px;
}

.multi-grid-container .activetab td.l
{
	background: url(/vp/images/nns/common/background/gradient_tabbed_box/sel_tab_left_slice.gif) repeat-x;
}

.multi-grid-container .activetab td.c
{
	background: url(/vp/images/nns/common/background/gradient_tabbed_box/sel_tab_tile.gif) repeat-x;
	color:#000;
	font-weight:bold;
}

.multi-grid-container .activetab td.r
{
	background: url(/vp/images/nns/common/background/gradient_tabbed_box/sel_tab_right_slice.gif) top left no-repeat;
}


.multi-grid-container .component-container .tl,
.multi-grid-container .component-container .top,
.multi-grid-container .component-container .tr
{
	background:url('/vp/images/nns/common/background/gradient_tabbed_box/tabbed_box_top_tile.gif') top center repeat-x;
}

/*
 * The palette of color schemes.
 */

.color-palette-container .component-container-inner
{
	text-align:center;
}

.color-palette-container .color-palette
{
	/* CSS centering, uses text-align:center on parent as well. */
	margin:0px auto;
	text-align:justify;
	width:420px;
}

.popmode .color-palette-container .color-palette
{		
	width:690px;
	>width:680px;
}

div.color-button
{
	cursor:pointer;
	float:left;
	margin:2px;
}

div.color-button div.button-outer
{
	border:2px solid white;
	padding:2px;
}

div.color-button-active div.button-outer
{
	border:2px solid #ff630a;
}

div.color-button div.color
{
	border:1px solid black;
	text-align:center;
	vertical-align:middle;
	width:26px;
	height:26px;
}

/*
 * The footer control that shows the current progress in document creation.
 */

#designProgress
{
	position:relative;
	z-index:100;
	margin-top:15px;
}

#designProgress .tl
{
	vertical-align:top;
	background:url(/vp/images/nns/common/background/product_viewer/viewer_left.gif) top right repeat-y;
	width:10px;
}

#designProgress .tl span
{
	background:url(/vp/images/nns/common/background/product_viewer/viewer_top_left.gif) top right no-repeat;
	display:block;
	width:10px;
	height:91px;
}

#designProgress .tr
{
	vertical-align:top;
	background:url(/vp/images/nns/common/background/product_viewer/viewer_right.gif) top left repeat-y;
	width:10px;
}

#designProgress .tr span
{
	background:url(/vp/images/nns/common/background/product_viewer/viewer_top_right.gif) top left no-repeat;
	display:block;
	width:10px;
	height:91px;
}

#designProgress .content
{
	background:#c6dcf6 url(/vp/images/nns/common/background/product_viewer/viewer_tile_tall.gif) top center repeat-x;
}

#designProgress .bl
{
	background:url(/vp/images/nns/common/background/product_viewer/viewer_bottom_left.gif) top right no-repeat;
}

#designProgress tr.bottom
{
	background:#c6dcf6;
	height:10px;
	line-height:11px;
	font-size:11px;
}

#designProgress .br
{
	background:url(/vp/images/nns/common/background/product_viewer/viewer_bottom_right.gif) top left no-repeat;
}

#designProgress strong
{
	padding:5px;
}

#designProgress td.spacer
{
	max-width: 50px;
}

#designProgress h4
{
	font-size:11px;
	margin:0px;
	padding:5px;
}

.design-progress-left
{
	padding-right:15px;
}

.design-progress-left .preview
{
	/* Can't put this on the image directly, it will shrink it by the border width in W3C DOM. */
	border:1px solid #d4e2f9;
}

.design-progress-right
{
	text-align:center;
}

.design-progress-right h4
{
	text-align:left;
}

#designProgressBaseline
{
	position:absolute;
	left:0px;
	bottom:0px;
	background:url('/vp/images/nns/common/background/product_viewer/viewer_tile_baseline.gif');
	font-size:11px;
	height:11px;
	line-height:11px;
	width:710px;
}

/*
 * Styles for the review page.
 */

#reviewPageOuter
{
	text-align:left;
	padding-bottom:15px;
}

#tblFinalEdits
{
	margin-top:15px;
}

#aAddAnotherCaricature
{
	display:block;
	margin-top:15px;
	margin-bottom:5px;
	margin-left:-5px;
	width:150px;
}

#tblGroupReviewGrid
{
	margin-left: 5%;
	margin-right: 5%;
}

.caricature-review div
{
	text-align:center;
}

.caricature-review img
{
	text-align:center;
}

.caricature-review-rearrange
{
	margin-left: 15px;
	float:right;
}

#divGxFooterBackButton
{
	float : left;
}

.preview-button .partids
{
	text-align:center;
	font-size:smaller;
	line-height:0px;
	position:relative;
	top:-1em;
}

.caricature-document-review-links
{
	text-align:center;
	font-size:smaller;
}
#AddonRemovalLink
{
	text-align : center;
}
.Bold
{
	font-weight : bold;
}
.preview-button-outer-table
{
	text-align : center;
}
.group-seperator
{
	height : 2px;
	width: 100%;
	color : #9697C8;
	background-color : #9697C8;
}
#tblUseExistingCaricaturesPager
{
	width : 100%;
}
.tblUseExistingGroups
{
	width : 100%;
}
.user-existing-select-group-buttons
{
	text-align : right;
	vertical-align : bottom;
}
.use-existing-group-grid
{
	text-align : left;
}


/********************************
*
*Animated Caricature eCard tab styles
*
*********************************/
#topMessageSection,
#MainPanelContainer
{
	width:645px;
	margin:10px 10px 10px 20px;
}

.customization-container
{
	width:203px;
	margin:10px 3px 10px 3px;
	height:190px;
}
#previewContainer
{
	text-align:center;
	border:solid 1px #7f9db9;
	width:631px;
	height:340px;
	margin-left:5px;
}

#eCardTitle
{
	font-weight:bold;
	font-size:16px;
	text-align:left;
}

#topMessageSection tr td
{
	text-align:right;
}


.input-label
{
	font-weight:bold;
	margin:3px 0px 1px 0px;
}
.input-box
{
	width:160px;
	margin-bottom:4px;
}

#functionButtons
{
	text-align:center;
	margin-top:20px;
	margin-bottom:20px;
}

.sound-reminder
{
	text-align:center;
	margin:10px 0px 10px 0px;
	width:100%;
}

a#playButton:link div,
a#playButton:visited div
{
	background-image:url(/vp/images/nns/common/buttons/btn_play.gif);
}
a#stopButton:link div,
a#stopButton:visited div
{
	background-image:url(/vp/images/nns/common/buttons/btn_stop.gif);
}
a#emailButton:link div,
a#emailButton:visited div
{
	background-image:url(/vp/images/nns/common/buttons/btn_email.gif);
}
a#playButton:hover div
{
	background-image:url(/vp/images/nns/common/buttons/btn_play_over.gif);
	cursor:pointer;
}
a#stopButton:hover div
{
	background-image:url(/vp/images/nns/common/buttons/btn_stop_over.gif);
	cursor:pointer;
}
a#emailButton:hover div
{
	background-image:url(/vp/images/nns/common/buttons/btn_email_over.gif);
	cursor:pointer;
}

#playButton div,
#stopButton div,
#emailButton div
{
	width:104px;
	height:27px;
	margin:auto;
	margin-top:10px;
}

#skipThisButtonDiv
{
	text-align:right;
	padding-left:10px;
	padding-right:10px;
	margin-bottom:10px;
}
#cnfmContainer
{
	width:640px;
	margin-left:20px;
	margin-bottom:100px;
}
#cnfmBottomLink
{
	width:100%;
	margin:10px 0px 20px 5px;
}

.view-ecard-link
{
	float:left;
}

.share-ecard-link
{
	float:right;
	margin-right:3px;
}

#colorSelector
{
	margin-top:5px;
	margin-left:-4px;
}

a.color-palet-link:hover div.color-palet-border
{
	border:solid 1px #7f9db9;
	cursor:pointer;
}


div.color-palet-border
{
	width:15px;
	height:15px;
	text-align:center;
	vertical-align:middle;
}

.color-palet
{
	position:relative;
	left:1px;
	top:1px;
	width:11px;
	height:11px;
}

.messages-border
{
	border-top:solid 1px #7f9db9;
	width:100%;
	height:35px;
	text-align:center;
	padding-top:10px;
	background-image:url(/vp/images/nns/common/background/inner_shadow_box.gif);
}

#messages
{
	margin:auto;
	font-size:14px;
	font-weight:bold;
	height:15px;
}

#divWarningMessageContainer
{
	width:100%;
	text-align:center;
}

.warning-message
{
	font-weight:bold;
	font-size:12px;
	margin-bottom:30px;
	margin-top:30px;
}

.warning-msg-buttons
{
	width:250px;
	margin:auto;
}

#MainPanelContainer tbody tr td.top
{
	padding-left:10px;
}
.customization-container tbody tr td.top h4
{
	margin-left:-10px;
}

.popmode #gx-footer, .popmode .page-content-outer-container
{
    background-color: Transparent;
}

.popmode div.page-inner-container div.page-content-outer-container div.page-content-inner-container,
.popmode div.page-inner-container .h1-title
{
    border: 0;
}

.popmode #gx-footer img
{
    margin-left: 10px;    
}

.popmode div.page-inner-container
{
    left: 0;
}


.popmode .cobrand-footer
{
    display: none;
}

.popmode .page-outer-container,
.popmode .page-inner-container,
.popmode .page-content-outer-container, 
.popmode .page-content-inner-container,
.popmode #divGuidedDesignPage
{
    height: 610px;   
    overflow: hidden;
    background-color:  #FFFFFF;
    border: 0;
}

.popmode #gx-container
{
    height: 560px;       
    overflow: hidden;
    background-color: #FFFFFF;
    border: 0;
}


body.popmode
{
    overflow: hidden; 
}

.popmode #CaricaturesType #DogCat,
.popmode #CaricaturesType #FurryAnimal,
.popmode #CaricaturesType #NonfurryAnimal,
.popmode #CaricaturesType #HolidayIcon,
.popmode #CaricaturesHead,
.popmode #CaricaturesHair,
.popmode #CaricaturesEyes,
.popmode #CaricaturesNoseAndMouth,
.popmode #CaricaturesAddOns,
.popmode #CaricaturesReview
{
    height: 504px;
    >height: 500px;
    overflow: hidden;
    overflow-y: auto;    
}

.popmode #typePageOuter
{
    height: 504px;
    >height: 500px;
}

.popmode #gx-footer
{    
     height: 20px;
     padding: 0;
     margin: 0;
}

#gx-footer-buttons
{
    height: 30px;
    margin: 0;
}
/*-----------------------------------
 *  editor.brand09.css
 *-----------------------------------*/
/*@import url(/vp/css/caricatures/editor.css?siteversion=201);*/

body.fixed-960 .page-content-outer-container
{
	width:100% !important;
}

#frmPage, #gx-container, #gx-body-control, #divGuidedDesignPage
{
	height:auto;
}

.h1-title 
{
	margin-top:0px;
}

div #gx-body-control
{
	width: 100%;
	background-color:Transparent;
}

#gx-container div
{
	position:relative;
}

#gx-container div table
{
	position:relative;
}

#gx-footer
{
	/*display:block;*/
	border:0px solid Transparent;
	width:100%;
}

#designProgressBaseline
{
	width: 100%;
}

.quadrant-layout
{
	width:auto;
}

.component-container-inner,
.component-container td.left, .component-container td.right,
.component-container-rounded td.left, .component-container-rounded td.right
{
	background-color:White;
}

.footer-container
{
	position:relative;
	width:960px !important;
}