/** 
	event invitation part 
	as well used with invitation preview
*/


body.invitation {
	color: #5d5e60;
	background-color: #F7F7F9;
	background-repeat: repeat-x;
	background-image: url('/img/inv/bgThemes/white/bg.png');
}
body.invitation div#mainC { 
	width: 850px; 
	height: 895px; 
	position: absolute; 
	left: 50%;
	margin-left: -425px; 
	top: 0;
	overflow: hidden;
	background-image: url('/img/inv/bgThemes/white/ek_logo.png');
	background-position: 335px 640px;
	background-repeat: no-repeat;
}
body.loading .pagesLinksC, body.loading .player .fL, body.loading .player .fR { display: none; }
body .loadingInfo { display: none; }
body.loading .loadingInfo { display: block; }

body.invitation div#mainC.fxCentered {
	left: 0; 
	margin-left: 0;
}


body.invitation a { text-decoration: none; }

.invitation div.layer a#ekLogo { display: block; z-index: 1; height: 35px; width: 200px; position: absolute; left: 325px; bottom: 0; }
.invitation div.layer {
	position : absolute;
	width : 850px;
	height: 675px;
	top: 0px;
	left: 0px;  	
}
.invitation div.stackLayer {
	position: absolute;
	width : 850px;
	height: 640px;
	top: 0px;
	left: 0px;  	
}

body.envelopeOpened div#eFrontL div,
body.envelopeOpened div#xxeBackL div {
	display: none;
}

.invitation div.layer.transparent {
	background-color: transparent;
}


/* Keep in sync with events/mobile/default.css:
*/
.invitation div#iOSAppBanner {
	width: 100%;
	height: 90px;
	margin: 0;
	padding: 20px 0px;
	background-color: #474843;
	color: #d8d8d8;
	font-family: sans-serif;
	font-size: 24px;
	font-weight: bold;
}
.invitation div#iOSAppBanner div {
	width: 49%;
	height: 90px;
	text-align: center;
}
.invitation div#iOSAppBanner div.openiOSAppBanner {
	border-left: 1px solid #686868;
}
.invitation div#iOSAppBanner .closeiOSAppBanner {
	width: 23px;
	height: 23px;
	position: absolute;
	top: 20px;
	right: 15px;
}
.invitation div#iOSAppBanner a {
	color: #d8d8d8;
	text-decoration: none;
	line-height: 90px;
}


body.invitation.black, body.invitation.simple_black {
	color: #ffffff;
	background-color: #28251D;
	xxbackground-image: url('/img/inv/bgThemes/black/bg.png');
}
body.invitation.blue, body.invitation.simple_blue {
	color: #414e70;
	background-color: #B4C3CA;
	xxbackground-image: url('/img/inv/bgThemes/blue/bg.png');
}
body.invitation.grey, body.invitation.simple_grey {
	color: #ffffff;
	background-color: #8A8B8B;
	xxbackground-image: url('/img/inv/bgThemes/grey/bg.png');
}
body.invitation.white, body.invitation.simple_white {
	color: #5d5e60;
	background-color: #F7F7F9;
	xxbackground-image: url('/img/inv/bgThemes/white/bg.png');
}
body.invitation.rosa, body.invitation.simple_rosa {
	color: #695671;
	background-color: #EBE0EB;
	xxbackground-image: url('/img/inv/bgThemes/white/bg.png');
}

body.invitation.simple_black,
body.invitation.simple_blue,
body.invitation.simple_grey,
body.invitation.simple_rosa,
body.invitation.simple_white { background-image: none; }

body.invitation.black div#mainC { background-image: url('/img/inv/bgThemes/black/ek_logo.png'); }
body.invitation.blue  div#mainC { background-image: url('/img/inv/bgThemes/blue/ek_logo.png'); }
body.invitation.grey  div#mainC { background-image: url('/img/inv/bgThemes/grey/ek_logo.png'); }
body.invitation.white div#mainC { background-image: url('/img/inv/bgThemes/white/ek_logo.png'); }
body.invitation.rosa  div#mainC { background-image: url('/img/inv/bgThemes/rosa/ek_logo.png'); }




.invitation div#preview { 
	width: 642px;
	xxmargin-left : auto;
	xxmargin-right : auto;
}

.invitation div#preview .page { /** layout of page */
	position: relative;
	margin-left: auto;
	margin-right: auto;
	
	xxoverflow: hidden;
	overflow: visible; /* visible on purpose - see #1887 */
	
	margin-top: 70px;
	width: 605px;
	height: 513px;
}
.FORMAT_HIGH .invitation div#preview .page { height: 643px; }
.FORMAT_PORTRAIT .invitation div#preview .page { width: 437px; height: 618px; }
.FORMAT_LANDSCAPE .invitation div#preview .page { width: 618px; height: 437px; }

.invitation div#preview .page .pageBgColor {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 0;
}
.FORMAT_HIGH.ONLINE_FROM_PAPER .invitation div#preview .page .pageBgColor {
	width: 437px; height: 618px;
	left: 84px; top: 6px;
}

.invitation div#preview .page .pageBg {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 5;
}

.imgGeneration div#preview .page,
.imgGeneration div#preview .page img {
	width: 623px;
	height: 531px;
}
.imgGeneration div#preview .page img { margin: 0 auto; border: 0; }

.invitation div#cardsL.cutDown .page { height: 500px; }

#cardsL #cardShadow,
#eFrontL #cardShadow,
#eBackL #cardShadow,
.invitation div#preview #cardShadow {
	position: absolute;
	margin-left: 11px;
	margin-top: 66px;
	width: 623px;
	height: 531px;
}
.FORMAT_HIGH #cardsL #cardShadow,
.FORMAT_HIGH #eFrontL #cardShadow,
.FORMAT_HIGH #eBackL #cardShadow,
.FORMAT_HIGH .invitation div#preview #cardShadow { height: 661px; }

body.invitationEditor.FORMAT_PORTRAIT .invitation div#preview #cardShadow {
	width: 463px; height: 643px;
	margin: -6px 0 0 89px;
}
.FORMAT_LANDSCAPE .invitation div#preview #cardShadow {
	width: 638px; height: 459px;
	margin-left: 3px;
}

.invitation div#preview #cardShadow { margin-left: 9px; }
#mainC.fxHideShadow #cardShadow,
.no-rgba #mainC.fxShadowAnimated #cardShadow { display: none; }
body.invitation #mainC.fxHideShadow #envelopeBackC,
.no-rgba body.invitation #mainC.fxShadowAnimated #envelopeBackC { background-image: none; }


.invitation div#preview.envelopePreview #cardShadow { margin-top: 67px; }
.invitationEditor div#preview div.envelope.side_front,
.invitationEditor div#preview div.giftbox { display: none; }
.invitationEditor div#preview.envelopePreview div.envelope.side_front,
.invitationEditor div#preview.giftboxPreview div.giftbox {
	margin-left: -17px;
	position: absolute;
	display: block;
}
.invitationEditor div#preview.envelopePreview.noEnvelope div.envelope.side_front,
body.invitationEditor .invitation div#preview.envelopePreview #cardShadow,
body.invitationEditor .invitation div#preview.giftboxPreview #cardShadow {
	display: none;
}
body.invitationEditor .invitation div#preview.envelopePreview.noEnvelope #cardShadow { display: block; }

body.invitationEditor .invitation div#preview.envelopePreview.animEnvelStamp #cardShadow {
	display: block;
	background-image: url('/img/inv/envelopes/generation/empty_shadow_canvas.png');
	width: 677px; height: 560px;
	margin: 0px 0 0 -17px;
}


#cardsL #cardShadow,
#eFrontL #cardShadow,
#eBackL #cardShadow,
.invitation div#preview #cardShadow {
	background-position: center top;
	background-repeat: no-repeat;
	background-image: url('/img/inv/cardShadow.png');
}

.FORMAT_HIGH #cardsL #cardShadow,
.FORMAT_HIGH #eFrontL #cardShadow,
.FORMAT_HIGH #eBackL #cardShadow,
.FORMAT_HIGH .invitation div#preview #cardShadow {
	background-image: url('/img/inv/cardShadow_HIGH.png');
}

.FORMAT_PORTRAIT .invitation div#preview #cardShadow {
	background-image: url('/img/inv/cardShadow_PORTRAIT.png');
}

.FORMAT_LANDSCAPE .invitation div#preview #cardShadow {
	background-image: url('/img/inv/cardShadow_LANDSCAPE.png');
}


.invitation div#preview .page div {
	position: absolute;
	/*overflow: hidden;*/
}

.invitation div#preview .page div .fieldImgPreview,
.invitation div#preview #envelopeBack div .fieldImgPreview,
.invitation div#preview #envelopeFront div .fieldImgPreview {
	position: absolute;
	left: 0px;
	background-position: center top;
	background-repeat: no-repeat;
	width: 100%;
}

.invitation div#preview .page div.suppressed,
.invitation div#preview #envelopeBack div.suppressed,
.invitation div#preview #envelopeFront div.suppressed {
	/*display: none !important;*/
	z-index: -10;
}


#cardsL #cardShadow,
#eFrontL #cardShadow,
#eBackL #cardShadow {
	margin-left: 114px;
}
#eFrontL #cardShadow { margin-top: 67px; display: inline; } /* inline fixes double margin bug in ie7- */
#eBackL #cardShadow { margin-top: 67px; }






/*
.invitation div#preview .page div.photoUpload { position: absolute; }
.invitation div#preview .page div.photoUpload div.borderer { width: 100%; height: 100%; } 
.invitation div#preview .page div.photoUpload img { 
	width: 100%; height: 100%;
	background-color: #ebebeb;
	background-position: center center;
	background-repeat: no-repeat;
}
*/




.invitation div#preview div.systemCard { color: white; }
.invitation div#preview div.systemCard { border: 0px; }







/** all the envelope stuff - move it to standalone css */

.flapClosed {
	width: 623px;
	height: 299px;
}

.flapOpened {
	xxmargin-top: 71px;
	width: 623px;
	height: 0px;
}
#flapper { margin-left: 27px; margin-top: -248px; display: block; position: absolute; }
#flapper .flapperTop { height: 320px; }

div.envelope,
div.giftbox {
	margin-left: auto;
	margin-right: auto; 
	width: 677px;
	height: 560px;
	background-position: center 67px;
	background-repeat: no-repeat;	
}
div.envelopeBackFaker { text-align: center; }
div.envelopeBackFaker img.flap { width: 623px; height: 320px; margin-top: 24px; }
div.envelopeBackFaker img.lining {}
div.envelopeBackFaker img { display: none; }
.animationOpening div.envelopeBackFaker img.lining { display: inline; margin-top: 344px; }
.animationOpened div.envelopeBackFaker img.lining,
.animationOpened div.envelopeBackFaker img.flap { display: inline; }
.animationOpened div.envelopeBackFaker img.lining { margin-top: 0; }

div.envelope.side_back {
	background-image: url("/img/inv/envelopes/bigger/white/envelope-noflap_trans.png");
}

div.envelope.side_front {
	/*xxbackground-image: url("/img/inv/envelopes/bigger/white/envelope-noflap-front.png");  envelope img is assigned always using inline css*/
	margin-left: 87px;
	position: absolute;
}

div.player {
	width: 670px;
	float: left;
	clear: left;
}
div.player .invLabel { width: 490px; float: right; }

.sound, .play, .pause, div.back, div.forward { 
	background-image: url('/img/inv/bgThemes/black/playa.png');
	background-repeat: no-repeat;
	height: 23px;
	cursor: pointer;
}
.sound {
	width: 32px;
	margin-right: 15px;
	background-position: 0px 0px;
}
.sound img { height: 23px; float: left; background-image: url('/img/inv/sound_controls.png'); background-repeat: no-repeat; }
.sound img.mute { width: 18px; margin-right: 2px; background-image: none; }
.sound img.vol1, .sound img.vol2, .sound img.vol3 { width: 4px; }
.sound.off img.mute { background-position: 2px top; background-image: url('/img/inv/sound_controls.png'); }
.sound img.vol1 { background-position: -20px top; }
.sound img.vol2 { background-position: -24px top; }
.sound img.vol3 { background-position: -28px top; }
.sound.vol1 img.vol2, .sound.vol1 img.vol3,
.sound.vol2 img.vol3 { background-image: none; }
.sound.off img.vol1, .sound.off img.vol2, .sound.off img.vol3 { background-image: none; }

.play {
	width: 20px;
	margin-right: 7px;
	background-position: -130px 0px;
}

.pause {
	width: 15px;
	margin-right: 12px;
	background-position: -80px 0px;
}

div.back {
	width: 15px;
	margin-right: 10px;
	background-position: -57px 0px;
}

div.forward {
	width: 15px;
	background-position: -105px 0px;
}

a#printer {
	display: block;
	width: 27px; height: 20px;
	background-position: -153px -2px;
	margin-top: 2px;
	margin-right: 15px;
}

.black .sound, .black .play, .black .pause, .black div.back, .black div.forward, .black #printer { background-image: url('/img/inv/bgThemes/black/playb.png'); }
.blue  .sound, .blue  .play, .blue  .pause, .blue  div.back, .blue  div.forward, .blue  #printer { background-image: url('/img/inv/bgThemes/blue/playb.png'); }
.grey  .sound, .grey  .play, .grey  .pause, .grey  div.back, .grey  div.forward, .grey  #printer { background-image: url('/img/inv/bgThemes/grey/playb.png'); }
.white .sound, .white .play, .white .pause, .white div.back, .white div.forward, .white #printer { background-image: url('/img/inv/bgThemes/white/playb.png'); }
.rosa  .sound, .rosa  .play, .rosa  .pause, .rosa  div.back, .rosa  div.forward, .rosa  #printer { background-image: url('/img/inv/bgThemes/rosa/playb.png'); }



body.invitation a.invAnchor {
	color: #a89074;
	text-decoration: none;
	text-shadow: #776e67;
}

body.invitation .invLabel { 
	color: #a89074; 
	line-height: 38px; 
	font-size: 27px; 
	text-decoration: none; 
	font-style: italic;
	font-family: Times New Roman;
}
body.invitation .invLabel strong { color: #73448a; }
div.player .invLabel { font-size: 16px; font-style: normal; text-align: center; }

body.black a.invAnchor, body.black .invLabel,
body.simple_black a.invAnchor, body.simple_black .invLabel { color: #ffffff; }
body.blue a.invAnchor,  body.blue .invLabel,
body.simple_blue a.invAnchor, body.simple_blue .invLabel  { color: #414e70; }
body.grey a.invAnchor,  body.grey .invLabel,
body.simple_grey a.invAnchor, body.simple_grey .invLabel  { color: #ffffff; }
body.white a.invAnchor, body.white .invLabel,
body.simple_white a.invAnchor, body.simple_white .invLabel { color: #5d5e60; }
body.rosa a.invAnchor,  body.rosa .invLabel,
body.simple_rosa a.invAnchor, body.simple_rosa .invLabel  { color: #695671; }



body.invitation .elHolder {
	position: absolute;
	width: 100%;
	z-index: 23;
}
body.invitation #envelopeBackC { position: relative; width: 677px; margin: 0px auto; }
body.invitation #envelopeBackC #rec {
	position: absolute;
	width: 677px;
	top: 100px;
}
body.invitation .elHolder .player div.fL { margin-top: 10px; }


.invitation .pagesLinksC {
	float: right;
	z-index: 4;
	margin-right: 10px;
	width: 165px;
	clear: right;
}
.invitation .pagesLinksC a.active { color: #73448A; }

.invitation #swfBgMusic { overflow: hidden; width: 1px; height: 1px; float: right; }

body.invitationEnvelopePreview div.envelopeTextHolder,
body.invitation div.envelopeTextHolder {
	width : 448px;
	height: 316px;
}

body.invitationEnvelopePreview div.envelope.side_front div.envelopeTextHolder,
#preview .giftbox div.envelopeTextHolder { margin-top: 240px; }
body.invitation div.envelope.side_front div.envelopeTextHolder { margin-top: 305px; }


body.invitationEnvelopePreview div.envelopeTextHolder div.senderInfoHolder,
body.invitation div.envelopeTextHolder div.senderInfoHolder, div.hostsInfoHolder {
   	width: 448px;
   	height: 125px;
   	margin: 0px 0px 0px 0px;
	overflow: hidden; 
	line-height: 25px; 
	font-size: 16pt; 
	xfont-weight: bold;
	font-family: serif; 
	/*font-style: italic;*/
	color: #303030;
	text-align: center;
}

div.senderInfoHolder div.senderInfo,
div.hostsInfoHolder div.hostsInfo {
	width: 450px;
	overflow: hidden;
	height: 25px;
	text-align: center;
}

body.invitationEnvelopePreview .envelope .envelopeHostNames {
   	position: absolute;
   	left: 27px;
   	top: 5px;
   	width: 364px;
   	height: 125px;
   	margin: 20px 0px 0px 20px;
   	padding: 0px;
	/*overflow: hidden;*/ 
	line-height: 25px; 
	font-size: 16px; 
	font-family: serif; 
	color: #303030;
	text-align: left;
}
body.invitationEnvelopePreview .envelope .envelopeHostNames div {
   	width: 100%;
   	height: 100%;
}
body.invitationEnvelopePreview .envelope .envelopeHostNames .envelopeHostName {
	width: 450px;
	/*overflow: hidden;*/
	height: 25px;
}

body.invitationEnvelopePreview div.envelopeTextHolder table.recipientInfoHolder,
body.invitation div.envelopeTextHolder table.recipientInfoHolder {
	width: 370px;
	height: 156px;
	/*overflow: hidden;*/
	line-height: 28px;
	font-size: 24px;
	/*font-style: italic;*/
	font-family: serif;
	color: #303030;
	margin: 60px 40px 0px 0px;
}


table.recipientInfoHolder td.recipientInfo {
	width: 347px;
	/*overflow: hidden;*/ 
	padding: 0px;
}
table.recipientInfoHolder td.recipientInfo.name { height: 92px; }
table.recipientInfoHolder td.recipientInfo.address { height: 93px; }

table.recipientInfoHolder td.recipientInfo div {
	width: 364px;
	height: 100%;
	margin-left: 4px;
	margin-right: 4px;
	/*overflow: hidden;*/
}


/* [EK-3980] Add "company name" to Envelope Addressing */
body.invitationEnvelopePreview .envelope.isRecipUseCompanyName div.envelopeTextHolder.centered,
body.invitation .envelope.isRecipUseCompanyName div.envelopeTextHolder.centered {
	width : 528px;
}
body.invitationEnvelopePreview .envelope.isRecipUseCompanyName div.envelopeTextHolder.centered table.recipientInfoHolder,
body.invitation .envelope.isRecipUseCompanyName div.envelopeTextHolder.centered table.recipientInfoHolder {
	width: 528px;
	margin-right: 0;
}
.envelope.isRecipUseCompanyName div.envelopeTextHolder.centered table.recipientInfoHolder td.recipientInfo div {
	width: 528px;
	margin-left: -1px;
	margin-right: 0;
}
.envelope.isRecipUseCompanyName div.envelopeTextHolder.centered table.recipientInfoHolder.fxFocused td.recipientInfo div {
	margin-left: -2px;
}
.envelope.isRecipUseCompanyName div.envelopeTextHolder table.recipientInfoHolder td.recipientInfo.name {
	height: 152px;
}
body.invitationEnvelopePreview .envelope.isRecipUseCompanyName div.envelopeTextHolder.centered table.recipientInfoHolder {
	margin-left: 0;
}