body, html {margin: 0px; padding: 0px; background-color: transparent; overflow: hidden;}
* HTML body {background-color: transparent;}
#wrap {width: 400px;}
.brand {color: #439639;}

/* generic styles */

a {text-decoration: none; outline: none;}
a:hover {text-decoration: underline;}
small {font-size: 11px; color: #999999;}
small.required {color: red;}	
.legal {font-size: 10px; color: #999999;padding: 8px 0px;}

.litevite .send-button {
	background: url(/images/litevite/litevite-ui.gif) -296px -215px no-repeat transparent;
	width: 97px;
	height: 26px;
	display: block;
	text-indent: -10000px;
	cursor: pointer;
	}

.litevite .espanol.send-button {background: url(/images/litevite/es-litevite-ui.gif) -296px -215px no-repeat transparent;}
	
.litevite span#working {
	background: url(/images/litevite/litevite-ui.gif) -296px -239px no-repeat transparent;
	width: 97px;
	height: 26px;
	display: block;
	text-indent: -10000px;
	cursor: pointer;
	left:16px;
	position:absolute;
	top:8px;
	}

.litevite .espanol#working {background: url(/images/litevite/litevite-ui.gif) -296px -239px no-repeat transparent;}

/* --- BEGIN LAYOUT --- */

.litevite {
	width: 400px;
	height: 470px;
	background-color: transparent;
	position: relative;
	font-family: Arial, sans-serif;
	font-size: 12px;
	}

* HTML .litevite {
	background-color: transparent;
	}
	
.litevite #litevite-container, .litevite #whatsthis-container, .litevite #sent-container {
	padding: 2px 5px 0px 5px;
	}

.litevite .close {
	position: absolute;
	width: 14px;
	height: 14px;
	background: url(/images/litevite/close.gif) top left no-repeat transparent;
	top: 8px;
	right: 8px;
	cursor: pointer;
	text-indent: -10000px;
	}

/* --- tabs --- */

.tabs {
	height: 41px;
	width: 390px;
	background: url(/images/litevite/litevite-ui.gif) 0px -9px no-repeat transparent;
	margin: 0px auto;
	padding: 0px;
	}

.tabs li {
	list-style: none;
	height: 41px;
	float: left;
	}
	
.tabs li a, .tabs li a span {
	background-image: url(/images/litevite/litevite-ui.gif);
	background-repeat: no-repeat;
	float: left;
	height: 41px;
	margin: 0px;
	padding: 0px;
	}

.tabs li a {
	background-position: 0% -92px;
	text-decoration: none;
	line-height: 55px;
	font-size: 16px;
	}

* HTML .tabs li a, * HTML .tabs li a span {
	margin-bottom: -10px;
	}

.tabs li a span {
	background-position: 100% -51px;
	padding: 0px 12px;
	}

/* tab current and hover states */

.tabs li a:hover, .tabs li a.current {
	background-position: 0% -174px;
	}

.tabs li a:hover span, .tabs li a.current span {
	background-position: 100% -133px;
	}
	
/* content box */

.content {
	padding: 0px 9px;}

/* h1 header */

h1.header {
	color: #333333;
	font-size: 16px;
	margin: 0px 4px;
	padding: 10px 4px 0px 4px;
	background: url(/images/litevite/litevite-ui.gif) 0px 36px no-repeat transparent;
	font-weight: 100;
	height: 35px;
	}

* HTML h1.header {
	font-weight: bold;
	}

h1.header .whatsthis {
	font-size: 10px;
	float: right;
	margin-top: 3px;
	font-weight: 100;}

/* h2 subtitle */

.content h2 {
	font-size: 14px;
	margin: 0px;
	}

/* form styles */

.litevite input, .litevite textarea {
	border: 1px #7f9db9 solid;
	}

.litevite input {
	padding: 3px 0px;}


.litevite label {
	padding: 0px 0px 1px 0px;
	display: block;}


/* --- END GENERIC --- */

/* --- BEGIN LAYOUT --- */

/*  form structure */

.litevite #invite-tab-content .clearwrap {
	overflow: hidden;
	width: 372px;}

.litevite #invite-tab-content .leftcol {
	width: 180px;
	float: left;}

.litevite #invite-tab-content .rightcol {
	width: 180px;
	float: right;}

.litevite #invite-tab-content .clearwrap input { /* sets width of textareas in 2 columns.  it's the col width minus padding mius border */
	width: 172px; padding-left:0px; padding-right:0px
	}

.litevite #invite-tab-content input, textarea {
	border: 1px #7f9db9 solid;
	}

.litevite #invite-tab-content input {
	padding: 3px;}

.litevite #invite-tab-content textarea {
	width: 364px;
	height: 45px;
	padding: 0px 0px 0px 0px;
	}
	
.litevite #tmp-participants {
	width: 360px;
	height: 45px;
	padding: 0px 0px 0px 0px;
	}

/* to-field elements are added to the DOM by the auto-complete library */	
.litevite #invite-tab-content .to-field input {
	border: 0px #fff solid;
	padding: 0px 0px 0px 0px;
	}
/* to-field elements are added to the DOM by the auto-complete library */	
.litevite #invite-tab-content .to-field, .litevite #invite-tab-content #tmp-participants  {
	border: 1px #7f9db9 solid;
	background: white;
	}

.litevite #invite-tab-content label, .litevite #social-instruction-container label {
	padding: 8px 0px 1px 0px;
	display: block;}
	

/* invite footer */

.litevite #invite-tab-content .bottom {
	background: url(/images/litevite/invite-b.png) top center no-repeat;
	width: 390px;
	height: 47px;
	position: relative;
	}
	
* HTML .litevite #invite-tab-content .bottom {
	background: url(/images/litevite/invite-b-ie.png) top center no-repeat;
	}

.litevite #invite-tab-content .bottom .send-button {
	position: absolute;
	top:8px; /* was 16 */
	left: 16px;
	}
	
.litevite #invite-tab-content .networks {
	width: 179px;
	height: 39px;
	background: url(/images/litevite/litevite-ui.gif) 0px -244px no-repeat;
	position: absolute;
	top:8px;
	left: 155px;
	}

.litevite #invite-tab-content .networks h4 {
	text-indent: -10000px;
	}

.litevite #invite-tab-content .networks a {
	position: absolute;
	width: 24px;
	height: 24px;
	top:0px; /* was 0px */
	text-indent: -10000px;
	}

.litevite #invite-tab-content .tab-facebook {left: 0px;}
.litevite #invite-tab-content .tab-twitter {left: 31px;}
.litevite #invite-tab-content .tab-myspace {left: 62px;}
.litevite #invite-tab-content .tab-bebo {left: 93px;}
.litevite #invite-tab-content .tab-linkedin {left: 124px;}
.litevite #invite-tab-content .tab-friendfeed {left: 155px;}


* HTML .litevite #invite-tab-content .networks a {
	background-image: url(/images/litevite/litevite-ui.gif);
	background-repeat: no-repeat;
	background-position: -1000px -1000px;
	}

/* --- END LAYOUT --- */

/* --- BEGIN PREVIEW --- */

/* preview */

.litevite #preview-tab-content .clearwrap {
	overflow: hidden;}

.litevite #preview-tab-content .leftcol {
	width: 76px;
	float: left;
	}

.litevite #preview-tab-content .rightcol {
	width: 285px;
	float: right;}

.litevite #preview-tab-content #message-preview-container {
	height: 60px;
	overflow: auto;
	font-family: "Courier New", Courier, monospace;
	border: 1px #7f9db9 solid; /* MOVE COLOR TO BRAND COLOR */
	}

* HTML .litevite #preview-container .message {
	clear: both;
	}

.litevite #preview-tab-content .event-info {
	margin-bottom: 8px;
	padding-bottom: 5px;
	}

.litevite #preview-tab-content .send-button {
	margin-left: 0;
	}

.litevite #preview-tab-content table {
	border: 0px;
	border-collapse: collapse;
	border-bottom: 1px solid #cfcfcf;
	margin-bottom: 8px;
	padding-bottom: 5px;
	
	line-height: 18px;
	
	width: 372px;
	}

.litevite #preview-tab-content table td {
	vertical-align: top;
	text-align: left;
	font-size: 12px;
	padding: 0px;
	margin: 0px;
	border: 0px;
	}

.litevite #preview-tab-content table .left {
	width: 80px;
	font-weight: bold;
	color: #8b8b8b;}

/* --- END PREVIEW --- */

/* --- BEGIN WHAT'S THIS --- */

.litevite #whatsthis-container {
	padding: 0px;}

.litevite #whatsthis-container img {
	padding-top: 50px;}

/* --- END WHAT'S THIS --- */

/* --- BEGIN LOGIN --- */

.litevite #login-container {
	padding: 0px;}
	
.litevite #import-contacts-container {
	padding:0px;}
	
/* --- END LOGIN --- */

/* --- BEGIN SOCIAL INSTRUCTION --- */

.litevite #social-instruction-container .content {
	text-align: center;}

.litevite #social-instruction-container img {
	border: 0px;}

.litevite #social-instruction-container #social-instructions-nevermind, .litevite #social-instruction-container #social-instructions-continue  {
	position: relative;
	top:10px;}

.litevite #social-instruction-container .clearwrap {
	overflow: hidden;
	width: 372px;
	padding: 0px 0px 8px 0px;
	border-bottom: 1px solid #dddddd;
	margin: 0px 9px;
	margin-bottom: 5px;
	}

.litevite #social-instruction-container .leftcol {
	width: 180px;
	float: left;}

.litevite #social-instruction-container .rightcol {
	width: 180px;
	float: right;}

.litevite #social-instruction-container .clearwrap input { /* sets width of textareas in 2 columns.  it's the col width minus padding mius border */
	width: 172px; padding-left:0px; padding-right:0px
	}


/* --- END SOCIAL INSTRUCTION --- */

/* --- BEGIN CONFIRM --- */

.litevite #sent-container {
	padding: 0px;}

.litevite #sent-container h1.header {
	position: relative;
	padding-left: 30px;
	color: #0c7900;
	}
	
.litevite #sent-container .invite-page-button {
	background: url(/images/litevite/litevite-ui.gif) 0px -217px no-repeat;
	width: 213px;
	height: 22px;
	display: block;
	text-indent: -10000px;
	cursor: pointer;
	margin: 15px auto;
	margin-top: 5px;
	}

.litevite #sent-container .invite-page-button {background: url(/images/litevite/es-litevite-ui.gif) 0px -217px no-repeat;}

/* tinyurl, tweet, share */

.litevite .tinyurl {
	height: 20px;
	margin: 0px;
	padding: 0px;
	text-align: center;}

.litevite .tinyurl input {
	text-align: center;
	border: 0px none;
	color: #5B5555;
	font-weight: bold;
	font-size: 12px;}

#tweet-this-link {display: inline;}

.tweet-this-link, .share-this-link {
    background-image: url(/invite2/images/sharetweets.gif);
    background-repeat: no-repeat;
    cursor: pointer;
    display: inline-block;
    text-indent: -10000px;
    width: 96px;
    height: 20px;
    margin-top: 1px;
    }

.tweet-this-link {background-position: top right;}
.tweet-this-link:hover {background-position: bottom right;}

.share-this-link {background-position: top left;}
.share-this-link:hover {background-position: bottom left;}

/* --- END CONFIRM --- */

/* --- IMPORT PANEL --- */

.litevite #import-contacts-container {
	}

.litevite #import-contacts-container table {
	border-collapse: collapse;
	border: 0px none;
	font-size: 12px;
	margin: 0px auto;}

.litevite #import-contacts-container h4 {
	margin: 0px 0px 10px 0px;}

.litevite #import-contacts-container .section {
	border-bottom:1px solid #aeaeae;
	overflow:hidden;
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 10px 0px;}

.litevite #import-contacts-container .footer h2, .litevite #import-webmail-container .footer h2 {
	margin: 30px 0px 20px 0px;
	text-align: center;
	}

.litevite #import-contacts-container .footer p, .litevite #import-webmail-container .footer p {
	text-align: center;
	padding: 0px 10px;
	}

.litevite #import-contacts-container .networks a {
	width: 98px;
	height: 20px;
	display: block;
	color: #000000;
	text-decoration: none;
	line-height: 20px;}

.litevite #import-contacts-container .networks a:hover {
	background-image: url(/images/litevite/contact-import.gif);
	background-repeat: no-repeat;
	background-position: 0px -66px;
	text-decoration: none;}

.litevite #import-contacts-container input {
	float: left;
	width: 210px;
	}

.litevite .button, .litevite .graybutton {
	background-image: url(/images/litevite/contact-import.gif);
	background-repeat: no-repeat;
	width: 63px;
	height: 20px;
	text-indent: -10000px;
	float: right;
	cursor: pointer;
	margin: 0px 0px 0px 4px;
	}

.litevite .browse-button {background-position: -219px 0px;}
.litevite .upload-button {background-position: top right;}

.litevite .cancel-button {background-position: -219px -23px;}
.litevite .import-button {background-position: -286px -23px;}

.litevite .ok-button, .litevite .graybutton {background-position: -219px -46px;}

/* icons */

.litevite #import-contacts-container .networks a span {
	width: 16px;
	height: 16px;
	background-image: url(../invite2/images/favicons.gif);
	float: left;
	margin: 2px;}
	
.litevite #import-contacts-container .networks .gmail span {background-position: -60px -60px;}
.litevite #import-contacts-container .networks .yahoo span {background-position: -60px -80px;}
.litevite #import-contacts-container .networks .hotmail span {background-position: -60px -100px;}
.litevite #import-contacts-container .networks .linkedin span {background-position: -60px -120px;}
.litevite #import-contacts-container .networks .mobileme span {background-position: -60px -140px;}
.litevite #import-contacts-container .networks .aol span {background-position: -60px -160px;}

.litevite #import-contacts-container .networks .maildotcom span {background-position: -60px -180px;}
.litevite #import-contacts-container .networks .lycos span {background-position: -60px -200px;}
.litevite #import-contacts-container .networks .gmx span {background-position: -60px -220px;}
.litevite #import-contacts-container .networks .icqmail span {background-position: -80px -100px;}
.litevite #import-contacts-container .networks .rediff span {background-position: -80px -120px;}
.litevite #import-contacts-container .networks .fastmail span {background-position: -80px -140px;}
.litevite #import-contacts-container .networks .webdotde span {background-position: -60px -240px;}
.litevite #import-contacts-container .networks .indiatimes span {background-position: -80px -60px;}
.litevite #import-contacts-container .networks .mynet span {background-position: -80px -80px;}

/* more networks */

.litevite #import-contacts-container .networks .more-button {
	background-image: url(/images/litevite/contact-import.gif);
	background-repeat: no-repeat;
	background-position: -299px -70px;
	display: block;
	width:50px;
	height: 19px;
	text-indent: -10000px;
	margin-top: 10px;
	}

.litevite #import-contacts-container .networks .more-button:hover {background-position: -299px -92px;}
.litevite #import-contacts-container .networks .more-button:active {background-position: -299px -115px;}

.litevite #import-contacts-container .more-panel {
	background-image: url(/images/litevite/contact-import.gif);
	background-position: 0px -131px;
	width: 349px;
	position: absolute;
	top:152px;
	left: 23px;
	}
	
.litevite #import-contacts-container .more-panel .panel-top {
	background-image: url(/images/litevite/contact-import.gif);
	background-position: -299px -138px;
	height: 30px;
	width: 50px;
	position: absolute;
	top:-30px;
	left: 299px;
	}
	
.litevite #import-contacts-container .more-panel .panel-body {
	background-image: url(/images/litevite/contact-import.gif);
	background-position: 0px -168px;
	padding: 8px 0px 0px 0px;
	}

.litevite #import-contacts-container .more-panel .panel-body .wrap {
	padding: 0px 0px 5px 5px;
	background-image: url(/images/litevite/contact-import.gif);
	background-position: left bottom;
	}

.litevite #import-contacts-container .more-panel .panel-body table {
	margin: 0px;
	}

/* webmail contacts panel */

.litevite #import-webmail-container .section {
	border-bottom:1px solid #aeaeae;
	overflow:auto;
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 10px 0px;}

* HTML .litevite #import-webmail-container .section {
	
	padding: 0px 0px 40px 0px;}

.litevite #import-webmail-container h4 {
	margin: 0px 0px 10px 0px;}


/*  form structure */

.litevite #import-webmail-container .clearwrap {
	overflow: hidden;
	width: 372px;
	padding-bottom: 5px;
	}

.litevite #import-webmail-container .leftcol {
	width: 180px;
	float: left;}

.litevite #import-webmail-container .rightcol {
	width: 180px;
	float: right;}

.litevite #import-webmail-container .clearwrap input, .litevite #import-webmail-container select { /* sets width of textareas in 2 columns.  it's the col width minus padding mius border */
	width: 172px; padding-left:0px; padding-right:0px
	}

.litevite #import-webmail-container input, textarea {
	border: 1px #7f9db9 solid;
	padding: 3px;
	}

.litevite #import-webmail-container label {
	width: 115px;
	float: left;
	padding-top: 5px;
	text-align: right;
	padding-right: 5px;}

/* --- END IMPORT --- */

/* --- LOGIN --- */

.litevite #login-container h4 {
	margin: 0px 0px 10px 0px;}
	
.litevite #login-container .left {
	border-bottom:1px solid #aeaeae;
	overflow:auto;
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 10px 0px;
	}

/*  form structure */

.litevite #login-container .forms {
	overflow: hidden;
	width: 372px;
	padding-bottom: 5px;
	}

.litevite #login-container input, .litevite #login-container select { /* sets width of textareas in 2 columns.  it's the col width minus padding mius border */
	width: 172px; padding-left:0px; padding-right:0px
	}

.litevite #login-container input {
	border: 1px #7f9db9 solid;
	padding: 3px 0px;
	}

.litevite #login-container label {
	width: 115px;
	float: left;
	padding-top: 5px;
	text-align: right;
	padding-right: 5px;
	}

.litevite #login-container .password {
	text-align: right;
	padding-right: 80px;
	font-size: 10px;
	}

.litevite #login-container .graybutton {margin-right: 80px; }

.litevite #login-container .terms {float: none; display: inline; font-size: 11px;vertical-align: middle;}

.litevite #login-container .fb-button {margin-left: 120px;margin-top: 5px;}

/* --- END LOGIN --- */

/* MESSAGES (These display for validation errors) */
#message { position:absolute;top:40px;left:20px;width:320px;height:80px;font-size:14px;font-weight:bold;text-align:center; padding:20px;margin-bottom:30px;border:2px solid #888888;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
 }
.error {background:url(/images/background-error.png) top left repeat-x;color:#8a1f11;border-color:#FBC2C4;}
.notice {background:url(/images/background-yellow.png) top left repeat-x;color:#514721;border-color:#d0b11e;
}
.success {background:url(/images/background-success.png) top left repeat-x;color:#264409;border-color:#C6D880;}


/* CONTACT IMPORT */

/* custom styles to overwite */

.to-field {
	width: 358px !important;
	height: 41px;
	min-height: 41px !important;
	max-height: 85px !important;
	}
	
ul.search-results {
	border-color: #7F9DB9 !important;
	border-top: 0px none !important;
	width: 362px !important;
	padding-bottom: 4px !important;
	padding-top: 4px !important;
	background: url(/images/litevite/auto-complete.png) bottom center #fff !important;
	}

ul.search-results li {
	padding:3px 4px 3px 4px !important;
	margin: 0px 3px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	cursor: pointer;
}

ul.search-results li.highlighted {
	background: #8b8d8e !important;	
	color: #fff !important;	
}

ul.search-results li.highlighted div {
	color: #fff;	
}

ul.search-results .contact-identifier {
	text-indent: 5px;}
	
#webmail-working-section, #email-validation-message {

	padding:3px 4px 3px 4px !important;
	margin: 5px 3px 0px 3px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border: 1px solid #AEAEAE;
	text-align: center;
	font-weight: bold;
	
	}
	
#webmail-working-section img, #email-validation-message img {
	vertical-align: middle;}