/*TEXT STYLES*/
/*
 COLORS
 #f9f1eb beige
 #f4f4e5 new beige
 #6ac0cc teal
 #f6ba3a orange
 #3fa55e green
 #c8ebf0 outer border
 #f0f9fb lightest teal
 #ECE9D8 possibility for beige alternative
 */

/* Override the GWT global styles */
html body {
    background-color: #fff;
    margin: 0;
    padding: 0;
    border: none;
    direction: ltr;
}

.gwt-Frame,
iframe {
    overflow: hidden;
    border: none !important;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
}

html body,
body table td,
body select {
    font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000;
}

/* Reset the GWT global styles only for GWT content */
body .vspot-pages,
body .vspot-wizardpage,
body .vspot-pages table td,
body .vspot-wizardpage table td,
body .vspot-pages select,
body .vspot-wizardpage select {
  font-family: "Arial Unicode MS", Arial, sans-serif;
  font-size: small;
}

.vspot-StdDialog textarea {
    font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
}

html body .vspot-pages,
html body .vspot-wizardpage,
html body .vspot-pages table td,
html body .vspot-wizardpage table td,
html body .vspot-pages select,
html body .vspot-wizardpage select {
    color: #000;
}

html body .vspot-pages {
  margin: 0px;
  border: 0px;
  padding: 0px;
  background: #fff;
  direction: ltr;
}

.vspot-pages a, .vspot-pages a:visited, .vspot-pages a:hover {
  color: #0000AA;
}

/* Now back to your regularly scheduled style sheet */
strong { font-weight: 700; }

.greenheading {
    font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color: #3fa55e;
    text-align: center;
    font-style: italic;
    margin: 4px auto;
}

.greenheading a:link, .greenheading a:visited {
    color: #3fa55e;
    text-decoration: underline;
}

.greenheading a:hover, .greenheading a:active {
    color: #3fa55e;
    text-decoration: none;
}

span.highlight {
    color: #F9AA11;
}

h1, #static h1 {
    width: 100%;
    color: #3fa55e;
    border-bottom: 2px dotted #f6ba3a;
    font-size: 20px;
}

h2, #static h2 {
    font-size: 1.25em;
}

h3, #static h3 {
    font-size: 1.15em;
}

h4, #static h4 {
	font-size: 1.0em;
	font-weight: bold;
	color: #3fa55e;
	width: 100%;
	margin-bottom: 2px;
}

h5, #static h5 {
	font-size: .9em;
	font-style: italic;
	width: 100%;
	margin-top: 0px;
	margin-bottom: 0px;
}

span.green {
    color: #3fa55e;
    font-weight: bold;
}

#static p {
    font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #666;
}

p.h3 {
    font-size: 1.15em;
    margin-top: 0;
}

dt {
    font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color: #f6ba3a;
    font-size: 1.15em;
    font-weight: bold;
    padding-top: 12px;
    border-top: 2px dotted #CCC;
    margin-top: 24px;
    margin-bottom: 8px;
}

dt span {
    background-color: #f6ba3a;
    color: #666;
}

dd {
    font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
}

dt a:link, dt a:visited {
    text-decoration: underline;
    color: #f6ba3a;
}

dt a:hover, dt a:active {
    text-decoration: none;
    color: #f6ba3a;
}

body a:link {
    text-decoration: underline;
    color: #666;
}

body a:visited {
    text-decoration: underline;
    color: #666;
}

body a:hover {
    text-decoration: none;
    color: #666;
}

body a:active {
    text-decoration: none;
    color: #666;
}

/*FOOTER */
#footer {
    font-size: 11px;
    color: #666;
    margin-bottom: 50px;
}

#footer a:link, #footer a:visited, #footer a:active {
    text-decoration: none;
    color: #666;
}

#footer a:hover {
    text-decoration: underline;
    color: #666;
}

#footerlinks {
    width: 100%;
}

#footerlinks li {
    list-style: none;
}

#footerlinks li.category {
    list-style: none;
    float: left;
    margin-right: 20px;
    width: 150px;
    padding: 0 0 0 7px;
    border-right: 2px dotted #6ac0cc;
    height: auto;
    font-weight: bold;
}

#footerlinks li.category ul {
    margin: 5px 0;
    padding: 0;
}

#footerlinks li.category li {
    margin: 3px 0;
    padding: 0;
    font-weight: normal;
}

.panelbullet ul, ul.panelbullet {
    font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    /*list-style-image:url("/img/leafarrow.png");*/
    list-style-type: disc;
    margin: 8px 8px 4px 12px;
    padding-left: 12px;
    line-height: 18px;
}

.panelbullet li {
    margin-bottom: 8px;
}

/*.panelbullet ul {
 margin:8px 8px 4px 0px;
 padding:0;
 }*/
td.right {
    text-align: right;
}

.formlabel {
    font-weight: bold;
    text-align: right;
}

.source {
    font-weight: bold;
    font-size: 1.1em;
}

#users {
    width: 95%;
    border-collapse: collapse;
    border: 2px dotted #f6ba3a;
}

#users td {
    vertical-align: top;
    padding: 4px 8px;
    border-left: 2px dotted #f6ba3a;
    border-right: 2px dotted #f6ba3a;
}

#users td.orangehead {
    font-style: italic;
    font-weight: bold;
    color: #f6ba3a;
    border-bottom: none;
}

/*homepage tagline*/
#tagline {
    width: 900px;
    font-size: 1.5em;
    margin-top: 4px;
    font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
    color: #3fa55e;
    text-align: center;
    font-style: italic;
    font-weight: bold;
}

#homequote {
    /*width: 551px;
     margin-top: 32px;
     border: 1px dotted #EEE;
     color: #00a0c6;*/
     font-size: 1.25em;
     font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
     color: #f90;
     text-align: left;
	 margin: 14px 20px 0px 20px;
	 /* change made 11-16-2010 for wider, taller layout 
	 width:625px;    */ 
     }
     
     #smallquote {
     /*width: 100%;*/
    margin: 16px 0px;
    font-size: 1.2em;
    font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
    color: #00a0c6;
    text-align: left;
    font-style: italic;
    border: 1px dotted #EEE;
    padding: 8px;
}

#keywordquote {
	font-size: 1.0em;
	font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
	color: #666;
	text-align: left;
	margin: 14px 20px 0px 20px;
}

/*non underline link */
a.headerlink:hover, a.headerlink:active, a.headerlink:visited, a.headerlink:link {
    text-decoration: none;
    color: #6ac0cc;
}

p.demochoice {
    color: #3fa55e;
    font-size: 1.3em;
    font-weight: bold;
    font-style: italic;
    width: 100%;
    line-height: 45px;
}

p.demochoice a:link, p.demochoice a:visited {
    color: #3fa55e;
    text-decoration: underline;
}

p.demochoice a:hover, p.demochoice a:active {
    color: #3fa55e;
    font-style: italic;
    text-decoration: none;
}

.privacynote {
    font-size: 11px;
}

/* used in org pages, ebooks pages, sendinvitationsummary, startdemo, done, later */
.bluebox {
    background-color: #f0f9fb;
    padding: 3px 3px 12px 3px;
    margin: 16px 0px;
}

.bluebox p {
    color: #00A0C6;
    font-size: 1.25em;
    margin-top: 0px;
    margin-bottom: 0px;
}

.regtext {
    color: #666;
    font-weight: normal;
}

#PremiumNote {
    width: 75%;
    margin: 2em;
    padding: 1.25em;
    background-color: #f4f4e5;
    border: 2px solid #3fa55e;
    color: #3fa55e;
}

p img {
    float: left;
    margin: 1.5em 1.5em 1.5em 0;
    padding: 0;
}

ul.leftlist {
    margin: 1em;
    padding: 0px;
}

ul.leftlist li {
    margin-left: 0px;
    padding-left: 0px;
    list-style: disc;
    line-height: 16px;
    padding-bottom: 4px;
}

.two-up h2 {
    margin-top: 0px;
    text-align: center;
    font-size: 1.3em;
}

.two-up h3 {
    margin-top: 0px;
    text-align: center;
    font-size: 1.05em;
}

.lovequote {
    /*font-weight:bold;*/
    font-style: italic;
}

em {
    font-style: italic;
}

/* Warning Banner for Browser problems */
#bad-browser {
    background: none repeat scroll 0 0 #FFFCDF;
    border-bottom: 1px solid #DFDDCB;
    color: #4F4D3B;
    left: 0;
    margin: 0;
    padding: 5px 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    text-align: center;
    display: none;
}

#bad-browser-inner {
    display: inline-block;
}

#bad-browser-close-button {
    margin-left: 20px;
}

#bad-browser-close-button a {
    color: #000;
    cursor: pointer;
    text-decoration: underline;
}

/* New designs for the old site */
.nikki h1 {
    color: #3D9E5B;
    border-bottom: none;
    font-size: 25px;
}

.nikki h2 {
    color: #3D9E5B;
    margin: 0;
    font-size: 18px;
    font-weight: bold;
}

.nikki h3 {
    color: #1EA853;
    margin: 0;
    font-size: 16px;
    font-weight: bold;
}

.nikki .white-box-container {
}

.nikki .white-box {
    float: left;
}

.nikki .white-box.middle {
    margin-left: 5px;
    margin-right: 5px;
}

.nikki .white-box .white-box-top {
    background: url("/images/backgrounds/step_bg_top.png") no-repeat scroll 0 0 transparent;
    width: 256px;
    height: 17px;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.nikki .white-box .white-box-middle {
    background: url("/images/backgrounds/step_bg_middle.png") no-repeat scroll 0 0 #fff;
    width: 256px;
    min-height: 210px;
    padding: 0;
    margin: 0;
}

.nikki .white-box .white-box-bottom {
    background: url("/images/backgrounds/step_bg_bottom.png") no-repeat scroll 0 0 transparent;
    width: 256px;
    height: 17px;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.nikki .white-box .white-box-content {
    padding: 17px 17px 0 17px;
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: 11px;
}

.nikki .white-box-icon {
    margin-left: 180px;
    margin-top: -12px;
    position: absolute;
}

.nikki .white-box strong {
    color: #21B0D0;
    font-size: 12px;
}

.nikki .white-box em,
.nikki label {
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
}

.nikki .white-box input {
    height: 20px;
    width: 175px;
    line-height: 20px;
    font-family: Arial,sans-serif;
    font-size: 15px;
}

.nikki .light-green {
    background-color: #DBEDC3;
    padding: 20px 6px;
}

.nikki .green-callout-box {
    width: 216px;
    margin: 0 auto;
}

.nikki .green-callout-box .green-callout-box-top {
    background: url("/images/backgrounds/green_callout_box_top.png") no-repeat scroll 0 0 transparent;
    width: 216px;
    height: 32px;
    font-weight: 700;
    font-size: 17px;
    line-height: 34px;
    text-align: center;
    color: #230400;
}

.nikki .green-callout-box .green-callout-box-content {
    color: #323232;
    border-right: 1px dashed  #24a859;
    border-left: 1px dashed  #24a859;
    border-bottom: 1px dashed  #24a859;
    text-align: center;
    padding: 5px;
    font-size: 15px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -khtml-border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -khtml-border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.nikki .white-box-big {
    float: left;
}

.nikki .white-box-big .white-box-top {
    background: url("/images/backgrounds/white_box_top.png") no-repeat scroll 0 0 transparent;
    width: 299px;
    height: 21px;
}

.nikki .white-box-big .white-box-middle {
    background: url("/images/backgrounds/white_box_middle.png") no-repeat scroll 0 0 #fff;
    width: 259px; /* 299 - 40px of padding */
    min-height: 384px;
    padding: 0 20px;
}

.nikki .white-box-big .white-box-bottom {
    background: url("/images/backgrounds/white_box_bottom.png") no-repeat scroll 0 0 transparent;
    width: 299px;
    height: 21px;
}

.nikki .blue-box {
    float: left;
}

.nikki .blue-box .blue-box-top {
    background: url("/images/backgrounds/blue_box_top.png") no-repeat scroll 0 0 transparent;
    width: 299px;
    height: 21px;
}

.nikki .blue-box .blue-box-middle {
    background: url("/images/backgrounds/blue_box_middle.png") no-repeat scroll 0 0 #fff;
    width: 259px; /* 299 - 40px of padding */
    min-height: 384px;
    padding: 0 20px;
}

.nikki .blue-box .blue-box-bottom {
    background: url("/images/backgrounds/blue_box_bottom.png") no-repeat scroll 0 0 transparent;
    width: 299px;
    height: 21px;
}

.nikki .green-box .green-box-top {
    background: url("/images/backgrounds/green_box_top.png") no-repeat scroll 0 0 transparent;
    width: 299px;
    height: 21px;
}

.nikki .green-box .green-box-middle {
    background: url("/images/backgrounds/green_box_middle.png") no-repeat scroll 0 0 #fff;
    width: 259px; /* 299 - 40px of padding */
    min-height: 384px;
    padding: 0 20px;
}

.nikki .green-box .green-box-bottom {
    background: url("/images/backgrounds/green_box_bottom.png") no-repeat scroll 0 0 transparent;
    width: 299px;
    height: 21px;
}

/* Buttons */
button.blue-button-103 {
    border: medium none;
    color: #FFFFFF;
    font-family: Arial,sans-serif;
    margin: 0;
    cursor: pointer;
    text-decoration: none;
}

button.blue-button-103 span {
    display: inline-block;
    margin: 0;
}

button.blue-button-103 {
    font-size: 50px;
    font-weight: bold;
    height: 103px;
    padding: 0 12px 0 0;
}

button.blue-button-103 span {
    height: 103px;
    line-height: 103px;
    padding: 0 0 0 15px;
}

button.blue-button-103.two-line span {
    font-size: 35px;
    line-height: 50px;
}

button.blue-button-103.two-line-skinny {
    width: 100%;
}

button.blue-button-103.two-line-skinny span {
    font-size: 19px;
    line-height: 25px;
    padding: 0 10px 0 20px;
}

button.blue-button-103 {
    background: url("/images/buttons/blue_right_103.png") no-repeat scroll right center transparent;
}

button.blue-button-103 span {
    background: url("/images/buttons/blue_left_103.png") no-repeat scroll left center transparent;
}

button.green-button-103 {
    background: url("/images/buttons/green_right_103.png") no-repeat scroll right center transparent;
}

button.green-button-103 span {
    background: url("/images/buttons/green_left_103.png") no-repeat scroll left center transparent;
}

/* Button fix for Firefox -- we probably need this because we are not using a CSS reset */
@-moz-document url-prefix() {
    button.blue-button-103 span,
    button.green-button-103 span {
        margin: -2px 0 0;
    }
}

/* Generic Helpers */
.help-text {
    color: #999;
    font-size: 13px;
}

.width-full {
    width: 100%;
}

.width-half {
    width: 50%;
}

.left {
    float: left;
}

.really-left {
    float: left !important;
}

.right {
    float: right;
}

.center-text {
    text-align: center;
}

.br {
    clear: both;
}

.hidden {
    display: none;
}

.invisible {
    visibility: hidden;
}

.placeholder {
	color: #ccc;
}

.ui-widget-overlay {
    background-image: none !important;
    opacity: 0.5 !important;
}

.error,
.notice {
    color: #CC5500;
}

input.error {
    color: #000 !important;
    border: 2px #CC5500 solid !important;
    background-color: #FCE49C !important;
}

label.error {
    margin-left: 10px;
}

.mt5 {
    margin-top: 5px;
}

.mt10 {
    margin-top: 10px;
}

.mt20 {
    margin-top: 20px;
}

.mr20 {
    margin-right: 20px;
}

p.first {
    margin-top: 0;
}

p.last {
    margin-bottom: 0;
}

.pop-up,
.clickable {
    cursor: pointer;
}

.ghosted {
    opacity: .25;
}

.comment-table-container {
    width: inherit;
}

table.comment_table {
    border-collapse: collapse;
    width: 100%;
}

table.comment_table td {
    padding: 2px 5px;
}

table.comment_table td.comments_user,
table.comment_table td.delete {
    width: 36px;
}

table.comment_table td.comments_text {
    width: 492px;
}

div.comments_content {
    width: inherit;
}

table.comment_table td.date {
    width: 110px;
}

table.comment_table td.comments_text div {
    float: left;
}

table.comment_table td.comments_text div.comments_edit_form {
    display: none;
}

table.comment_table td.comments_text div.comments_edit_form input[type="text"] {
    border: 1px solid #888888;
    font-size: 13px;
    height: 14px;
    padding: 1px 6px;
    width: 250px;
}

table.comment_table td.comments_text div.comments_edit_form input[type="submit"] {
    border: 1px solid #888888;
    font-size: 11px;
    height: 18px;
}

table.comment_table td.comments_text div.comments_edit_link {
    float: right;
}

table.comment_table td.comments_text div.comments_edit_link a {
    color: #0000AA;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    line-height: 18px;
}

table.comment_table td.comments_text div.comments_edit_link a:hover {
    text-decoration: underline;
}

table.comment_table tr.odd {
    background-color: #eee;
}

table.comment_table th {
    font-weight: 700;
}

.timeago {
    white-space: nowrap;
    border: none;
    font-size: 12px;
    color: #666;
}

a.comments-view {
    text-decoration: none;
}

.comment-container {
    white-space: nowrap;
    float: left;
}

h1.comment-title {
    border-bottom: medium none;
    margin: 0 0 5px 0;
}

.comment-text-area {
    float: right;
}

.vspot-commentextra-invitation-move-right {
    position: absolute;
    margin-left: 174px;
    margin-top: 8px;
}

html body div.vspot-commentextra-tasklist-move-right {
    background-position: right;
}

.vspot-commentextra-float-right {
    float: right;
}

.vspot-commentextra-margin-right {
    margin-right: 10px;
}

.vspot-commentextra-position-right {
    position: absolute;
    margin-top: -20px;
    margin-left: 545px;
}

.vspot-calendar-cell-comments:not(.vspot-calendar-cell-oksignup):not(.vspot-calendar-cell-currentsignup) .vspot-calendar-status:not(:empty) {
    background: url("/images/icons/famfamfam/mini/comment_yellow_left.gif") no-repeat scroll 13px 0px transparent;
}

.vspot-calendar-comments-icon {
    background: url("/images/icons/famfamfam/mini/comment_yellow_left.gif") no-repeat scroll 22px 0px transparent;
}

.vspot-comment-container {
    white-space: normal;
    font-size: 9pt;
}

.vspot-comment-container div {
    margin: 3px 0 0 10px;
    padding: 0;
}

.vspot-comment-date {
    font-weight: 700;
    margin: 0 10px 0 -10px;
    position: relative;
}

.wrap {
    width: inherit;
    width: -moz-available;
    white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5+ */
}

.my-tbl-data .my-tbl-item-cell-overflow {
    width: inherit;
}