.clear-left { clear:left; }
.clear-right { clear:right; }
.clear-both { clear:both; }

a                       { color: #3669DA; text-decoration: none;}
a:hover         { color: #3a91fb; }

img {border:0;}

.editable {
    cursor: pointer;
    h: expression(onmouseover = new Function("this.style.backgroundColor = '#ffffd3';"),
                                onmouseout = new Function("this.style.backgroundColor = '';"));
}

.editable:hover, .editable:hover div, .editable:hover div a {
    background-color: #ffffd3;
    color: black !important;
}

.invisible {
    display: none;
}

/*= messages */
.messages {
    margin-bottom: 10px;
    margin-left: -475px;
    left: 50%;
    position: relative;
    width: 950px;
}
.messages li {
    margin: 0 0 5px;
    padding: 5px 10px 5px 30px;
    font: 12px 'lucida grande', arial, sans-serif;
    list-style-type: none;
}

.messages li.infoMessage {
    display: none;
    background: #f7ffef url(/image/main/icons/fam/accept.png) no-repeat 8px 5px;
    border: 1px solid #96de5b;
}

.messages li.errorMessage {
    background: #fff4f4 url(/image/main/icons/fam/exclamation.png) no-repeat 8px 5px;
    border: 1px solid #ffaeae;
}

.messages li.warnMessage {
    background: #fffdf1 url(../images/icons/warning.gif) no-repeat 8px 5px;
    border: 1px solid #ffe578;
}

.feedItem { padding: 5px 0 5px 5px; }
.feedItemTitle { font-weight: bold; }
.feedComponent { padding: 3px 5px 0 3px; }

.renderedDropDown { visibility: hidden; }

.announcementMessage {
    font: 12px 'lucida grande', tahoma, arial, sans-serif;
    margin: 0 0 5px;
    padding: 5px 10px 5px 30px;
    background: #fffdf1 url(../images/icons/warning.gif) no-repeat 8px 5px;
    border: 1px solid #ffe578;
}

.mbTester {
    background: none !important; /*override any existing background*/
    background-color: #fbd47f !important;
}

/* error tooltip for form fields */
.error-tip {
    z-index:99999;
    text-align:center;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    padding:8px 15px;
    min-width:50px;
    max-width:200px;
    color:#fff;
    background-color:#a00;
    -webkit-box-shadow:0 2px 5px rgba(0,0,0,0.5);
    -moz-box-shadow:0 2px 5px rgba(0,0,0,0.5);
    box-shadow:0 2px 5px rgba(0,0,0,0.5);
    font-size:11px;
    /**
     * - If you set a background-image, border/padding/background-color will be ingnored.
     *   You can set any padding to .tip-inner instead if you need.
     * - If you want a tiled background-image and border/padding for the tip,
     *   set the background-image to .tip-inner instead.
     */
}

/* arrow tip for error tooltip */
.error-tip:after {
    content:"";
    display:block; /* reduce the damage in FF3.0 */
    position:absolute;
    bottom: -8px; /* value = - border-top-width - border-bottom-width */
    left: 50%; /* controls horizontal position */
    width:0;
    height:0;
    border-width: 8px 4px 0; /* vary these values to change the angle of the vertex */
    border-style:solid;
    border-color: #a00 transparent;
    margin-left: -4px;
}

/* hide error tooltip content */
.error-tip-msg {
    display:none;
}

/* form field input error style */
.error-input {
    background:#ffe8e8 !important;
    color:#900 !important;
    border:1px solid #900 !important;
}

.mapMoreButton4MapTypes {
    font: 12px Arial, Helvetica, sans-serif;
    border: 1px solid black;
    background-color: white;
    text-align: center;
    width: 77px;
    cursor: pointer;
    position: absolute;
    top: 7px;
    right: 285px;
}

.mapMoreButton {
    font: 12px Arial, Helvetica, sans-serif;
    border: 1px solid black;
    background-color: white;
    text-align: center;
    width: 77px;
    cursor: pointer;
    position: absolute;
    top: 7px;
    right: 219px;
}

.mapMoreButtonExpanded4MapTypes {
    font: 12px Arial, Helvetica, sans-serif;
    border: 1px solid black;
    border-bottom: 1px solid white;
    background-color: white;
    text-align: center;
    width: 77px;
    cursor: pointer;
    position: absolute;
    top: 7px;
    right: 285px;
    z-index: 100;
}

.mapMoreButtonExpanded {
    font: 12px Arial, Helvetica, sans-serif;
    border: 1px solid black;
    border-bottom: 1px solid white;
    background-color: white;
    text-align: center;
    width: 77px;
    cursor: pointer;
    position: absolute;
    top: 7px;
    right: 219px;
    z-index: 100;
}

.mapMoreButton span {
    display: block;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #a7a7a7;
    border-bottom: 1px solid #a7a7a7;
}

.mapMoreButton4MapTypes span {
    display: block;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #a7a7a7;
    border-bottom: 1px solid #a7a7a7;
}

.mapMoreButtonExpanded span {
    display: block;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #a7a7a7;
    border-bottom: 1px solid #fff;
}

.mapMoreButtonExpanded4MapTypes span {
    display: block;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #a7a7a7;
    border-bottom: 1px solid #fff;
}

.mapMoreMenu4MapTypes {
    position: absolute;
    top: 25px;
    right: 260px;
    font: 12px Arial, Helvetica, sans-serif;
    width: 102px;
    border: 1px solid #000;
    background-color: #fff;
    z-index: 50;
}

.mapMoreMenu {
    position: absolute;
    top: 25px;
    right: 194px;
    font: 12px Arial, Helvetica, sans-serif;
    width: 102px;
    border: 1px solid #000;
    background-color: #fff;
    z-index: 50;
}

.mapMoreMenu4MapTypes span.mapMoreMenuInner {
    display: block;
    border-top: none;
    border-left: 1px solid #fff;
    border-right: 1px solid #a7a7a7;
    border-bottom: 1px solid #a7a7a7;
    padding: 5px 2px 3px;
}

.mapMoreMenu span.mapMoreMenuInner {
    display: block;
    border-top: none;
    border-left: 1px solid #fff;
    border-right: 1px solid #a7a7a7;
    border-bottom: 1px solid #a7a7a7;
    padding: 5px 2px 3px;
}

/* standard buttons */
.button {
    background:#d7d7d7 url(../images/bg_buttons.png) repeat-x;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    padding:7px 15px;
    margin:6px 5px 4px 5px;
    color:#000;
    text-shadow: 0 1px 0 #fff;
    border:1px solid #aaa;
    border-color:#bbb #aaa #888 #aaa;
    vertical-align:3px;
    display:inline-block;
    text-align:center;
    float:left;
    text-decoration:none !important;
    cursor:pointer;
    font-weight:bold;
    font-size:13px;
}
.button:hover {
    color:#000;
    text-decoration:none;
    text-shadow: 0 1px 0 #fff;
    -webkit-box-shadow:inset 0 0 6px #2cbafb;
    -moz-box-shadow:inset 0 0 6px #2cbafb;
    box-shadow:inset 0 0 6px #2cbafb;
    border:1px solid #2cbafb;
}
.button.primary {
    -webkit-box-shadow: 0 0 3px #2cbafb;
    -moz-box-shadow: 0 0 3px #2cbafb;
    box-shadow: 0 0 3px #2cbafb;
    cursor:pointer;
    border:1px solid #2cbafb;
}
.button.primary:hover {
    -webkit-box-shadow:inset 0 0 6px #2cbafb, 0 0 3px #2cbafb;
    -moz-box-shadow:inset 0 0 6px #2cbafb, 0 0 3px #2cbafb;
    box-shadow:inset 0 0 6px #2cbafb, 0 0 3px #2cbafb;
}
.button:active,
.button.primary:active,
.button.active {
    background-color:#9b9b9b;
    background-position: 0 -140px;
    -webkit-box-shadow:inset 0 0 6px #444;
    -moz-box-shadow:inset 0 0 6px #444;
    box-shadow:inset 0 0 6px #444;
    border-color:#555;
    color:#fff;
    text-shadow: 0 0 0 #fff;
}
.button.active:hover {
    color:#fff;
}

/* button groups using standard buttons */
.pill-box .button {
    margin-right:0;
    margin-left:0;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    border-radius:0;
    border-right-width:0;
    padding:6px 10px;
    font-weight:normal;
}
.pill-box .button.pill-left {
    -webkit-border-radius:4px 0 0 4px;
    -moz-border-radius:4px 0 0 4px;
    border-radius:4px 0 0 4px;
}
.pill-box .button.pill-right {
    -webkit-border-radius:0 4px 4px 0;
    -moz-border-radius:0 4px 4px 0;
    border-radius:0 4px 4px 0;
    border-right-width:1px;
}

.button.small {                     /* VECTOR */
    padding:3px 6px;
    font-size:11px;
    font-weight:normal;
}
.button.small:hover {
    box-shadow:inset 0 0 0px #fff;
    border-color:#bbb #aaa #888 #aaa;
}
.button.small:active,
.button.small.primary:active,
.button.small.active,
.button.small.active:hover {
    box-shadow:inset 0 0 4px #444;
    border-color:#555;
}

.button.disabled,
.button.disabled:hover {
    cursor:default;
    /* IE 8 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    /* IE 5-7 */
    filter:alpha(opacity=50);
    /* Netscape */
    -moz-opacity:0.5;
    /* Safari 1.x */
    -khtml-opacity:0.5;
    /* Good browsers */
    -webkit-opacity:0.5;
    opacity:0.5;
    -webkit-box-shadow:0 0 0 #fff;
    -moz-box-shadow:0 0 0 #fff;
    box-shadow:0 0 0 #fff;
    border:1px solid #999;
    color:#333 !important;
}
.button.disabled:active {
    background-position: 0 0;
    text-shadow: 0 1px 0 #fff;
    cursor:pointer;
    color:#333;
}

/* text buttons */
.button-text {
    display:inline-block;
    padding:13px 8px 13px 30px;
    text-decoration:none;
    color:#333;
    float:left;
    background: url(./../images/button-icons.png) no-repeat -9999px -9999px;
    text-shadow: 0 1px 0 #fff;
    cursor:pointer;
}
.button-text:hover {
    color:#000;
    text-shadow: 0 0 3px #83d4fe, 0 1px 0 #fff;
    text-decoration:none;
}
.button-text.no-text {
    text-indent:-9999px;
    padding-left:20px;
}
/* text button states...
default state
hover state
disabled state */
.button-text.edit                                               {background-position:-2px -45px;}
.button-text.edit:hover                                 {background-position:-202px -45px;}
.button-text.edit.disabled                              {background-position:-402px -45px;}
.button-text.delete                                             {background-position:-2px 5px;}
.button-text.delete:hover                               {background-position:-202px 5px;}
.button-text.delete.disabled                    {background-position:-402px 5px;}
.button-text.private                                    {background-position:-2px -94px;}
.button-text.private:hover                              {background-position:-202px -94px;}
.button-text.private.disabled                   {background-position:-402px -94px;}
.button-text.public                                             {background-position:-2px -144px;}
.button-text.public:hover                               {background-position:-202px -144px;}
.button-text.public.disabled                    {background-position:-402px -144px;}
.button-text.fav                                        {background-position: -4px -1387px;height: auto;width: auto;}
.button-text.fav:hover                              {background-position: -204px -1387px;}
.button-text.fav.disabled                           {background-position: -404px -1387px;}
.button-text.fav.favorite                           {background-position: -4px -1337px;}
.button-text.fav.favorite:hover                 {background-position: -204px -1337px;}
.button-text.fav.favorite.disabled              {background-position: -404px -1337px;}
.button-text.add                                                {background-position:-1px -199px;}
.button-text.add:hover                                  {background-position:-201px -199px;}
.button-text.add.disabled                               {background-position:-401px -199px;}
.button-text.save-to-myconnect                  {background-position:-2px -724px;}
.button-text.save-to-myconnect:hover    {background-position:-202px -724px;}
.button-text.save-to-myconnect.disabled {background-position:-402px -724px;}
.button-text.share                                              {background-position:0 -414px;}
.button-text.share:hover                                {background-position:-200px -414px;}
.button-text.share.disabled                             {background-position:-400px -414px;}
.button-text.send-to-device                             {background-position:-1px -564px;}
.button-text.send-to-device:hover               {background-position:-201px -564px;}
.button-text.send-to-device.disabled    {background-position:-401px -564px;}
.button-text.export                                             {background-position:0 -514px;}
.button-text.export:hover                               {background-position:-200px -514px;}
.button-text.export.disabled                    {background-position:-400px -514px;}
.button-text.print                                              {background-position:-3px -673px;}
.button-text.print:hover                                {background-position:-203px -673px;}
.button-text.print.disabled                             {background-position:-403px -673px;}
.button-text.compare                                    {background-position:-3px -877px;}
.button-text.compare:hover                              {background-position:-203px -877px;}
.button-text.compare.disabled                   {background-position:-403px -877px;}
.button-text.duplicate                                  {background-position:-3px -1236px;}
.button-text.duplicate:hover                    {background-position:-203px -1236px;}
.button-text.duplicate.disabled                 {background-position:-403px -1236px;}
.button-text.add-to-calendar                    {background-position:-3px -1286px;}
.button-text.add-to-calendar:hover              {background-position:-203px -1286px;}
.button-text.add-to-calendar.disabled   {background-position:-403px -1286px;}
.button-text.previous                                   {background-position:0 -979px; color:#3b73c4;}
.button-text.previous:hover                             {background-position:-200px -979px;}
.button-text.previous.disabled                  {background-position:-400px -979px;}
.button-text.next                                               {background-position:28px -929px; padding-left:8px; padding-right:20px; color:#3b73c4;}
.button-text.next:hover                                 {background-position:-172px -929px;}
.button-text.next.disabled                              {background-position:-372px -929px;}

.button-text.disabled {
    text-shadow: 0 0 0 #fff;
    color:#999;
    cursor:default;
    outline:none;
}

/* overlay buttons - for dark overlay containers on maps, etc - heads-up-display aka "hud" */
.button-hud {
    display:block;
    color:#fff;
    padding:6px 8px;
    text-decoration:none;
    background:#4e4e4e url(./../images/bg_buttons-hud.png) repeat-x;
    margin-bottom:5px;
    text-shadow: 0 -1px 0 #000;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border-top:1px solid #888;
    position:relative;
}
.button-hud:hover {
    color:#fff;
    text-decoration:none;
    background-color: #5f5f5f;
    background-position:0 -70px;
    border-top:1px solid #999;
    -webkit-box-shadow:inset 0 0 6px #888;
    -moz-box-shadow:inset 0 0 6px #888;
    box-shadow:inset 0 0 6px #888;
}
.button-hud:active { /* need to test with ie7 after integration */
    background-color: #646667;
    background-position:0 -140px;
    -webkit-box-shadow:inset 0 0 4px #222;
    -moz-box-shadow:inset 0 0 4px #222;
    box-shadow:inset 0 0 4px #222;
    border-top:1px solid #333;
}
.button-hud span {
    background: url(./../images/hud-icons.png) no-repeat;
    display:block;
    width:15px;
    height:14px;
    position:absolute;
    margin-top:-8px;
    top:50%;
    right:8px;
}
.button-hud.disabled {
    border-top:1px solid #666;
    color:#999;
    text-shadow: 0 0 0 #666;
    background-image:none;
    background-color:#555;
    outline:none;
    cursor:default;
}
.button-hud.disabled:hover {
    background-position:0 0 !important;
    -webkit-box-shadow:inset 0 0 0 #555;
    -moz-box-shadow:inset 0 0 0 #555;
    box-shadow:inset 0 0 0 #555;
    border-top:1px solid #666;
    background-color:#555;
}

/* Example HTML: <a href="#" class="button"><span class="icon"></span>Button</a> */

.button .icon,
.btn .icon {
    background:url('../images/button-icons.png') no-repeat;
    width:22px;
    height:22px;
    margin:0 2px -7px 0;
    display:inline-block;
    vertical-align:top;
}
.button .icon.checkmark { background-position:-10px -1650px; }
.button .icon.add       { background-position: -8px -212px; }
.button .icon.edit      { background-position: -9px -58px; }
.button .icon.share     { background-position: -7px -427px; }

.button.small .icon.small,
.btn.btn-small .icon.small {
    background:url('../images/button-icons-small.png') no-repeat;
    width:10px;
    height:10px;
    margin:2px 3px 0 0;
}
.button.small .icon.checkmark.small,
.btn.btn-small .icon.checkmark.small  { background-position:0  0px;}
.button.small .icon.add.small,
.btn.btn-small .icon.add.small        { background-position:0 -10px;}


/* action menu - use for right click and drop down menus */
.action-menu {
    list-style:none;
    margin:0;
    padding:3px 0 !important;
    border:1px solid #ccc;
    display:inline-block;
    background-color:#fff;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    white-space:nowrap;
    font-size: 12px;
}
.action-menu li {
    padding:0;
}
.action-menu li a,
.action-menu li a:hover {
    display:block;
    padding:4px 20px 4px 10px;
    color:#333;
    text-decoration:none;
    cursor:pointer;
}
.action-menu li a:hover {
    background-color: #e3f4ff;
}
.menu-wrapper {
    position:relative;
    z-index:500;
}
.menu-wrapper-action {
    z-index:0;
}
.menu-wrapper .action-menu,
.menu-wrapper-action .action-menu {
    position:absolute;
    left:0;
    top:100%;
    z-index:9999;
}
.menu-wrapper .action-menu.action-menu-right {
    right:0;
    left:inherit;
}
.toolbar ul.action-menu li { /* resolve left float of toolbar li */
    float:none;
}
.action-menu .h-divider {
    border-bottom:1px solid #ddd;
    height:1px;
    width:100%;
    padding:0;
    margin:3px 0;
    text-indent:-9999px;
}
.action-menu .icon,
.action-menu .icon:hover {
    padding-left:30px;
}

/* AddThis Vertical Layout Menu */
.menu-wrapper.addthis_toolbox .vertical a,
.menu-wrapper.addthis_toolbox .vertical a:hover {
    position: relative;
    display: block;
    width: 102px;
}
.menu-wrapper.addthis_toolbox .vertical span {
    position: absolute;
    left: 10px;
    top: 4px;
}

/* AddThis Vertical Layout Menu */
.menu-wrapper-action.addthis_toolbox .vertical a,
.menu-wrapper-action.addthis_toolbox .vertical a:hover {
    position: relative;
    display: block;
    width: 102px;
}
.menu-wrapper-action.addthis_toolbox .vertical span {
    position: absolute;
    left: 10px;
    top: 4px;
}

/* toolbar - standalone, box topper, or footer */
.toolbar {
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
    background:#ddd url(./../images/bg_toolbar.png) repeat-x;
    border:1px solid #cbcbcb;
    padding:0 10px;
    margin-bottom:10px;
}
.toolbar.topper { /* add to use as box topper */
    border-bottom:2px solid #94d8ff;
    -webkit-border-radius:6px 6px 0 0;
    -moz-border-radius:6px 6px 0 0;
    border-radius:6px 6px 0 0;
    margin-bottom:0;
}
.toolbar.footer { /* add to use as footer */
    border-top:1px solid #cbcbcb;
    -webkit-border-radius:0 0 6px 6px;
    -moz-border-radius:0 0 6px 6px;
    border-radius:0 0 6px 6px;
    margin-bottom:0;
    min-height:42px;
}
.toolbar h2 {
    font-size:20px;
    margin:10px 0 10px 5px;
    padding:0;
    float:left;
    line-height:1em;
    text-shadow: 0 1px 0 #fff;
}
.toolbar p {margin:12px 0;}
.toolbar ul {
    list-style:none;
    margin:0;
    padding:0;
}
.toolbar ul li {
    float:left;
    margin:0;
    padding:0;
}
.toolbar .v-divider { /* separator for toolbar text buttons - add li */
    border-left:1px solid #cbcbcb;
    text-indent:-9999px;
    margin:0 5px 0 10px;
    padding:13px 0;
    display:inline-block;
    text-decoration:none;
    float:left;
}
.toolbar.footer,
.toolbar.footer a {
    color:#888;
    font-size:11px;
}
.toolbar.footer a {text-decoration:underline;}
.toolbar.footer .button {
    color: #000;
    font-size:13px;
}
/* content area for use with toolbars */
.toolbar-body {
    position:relative;
    border:1px solid #cbcbcb;
    border-top:2px solid #3fbbf3;
    border-bottom:0;
    background:#fff;
}

/* overlay, aka popup, modal */
.overlay {
    display:none;
    z-index:10000;
    background-color:#fff;
    border-style:solid;
    border-color: #fff #999 #666 #999;
    border-width: 0 1px 1px 1px;
    -webkit-border-radius: 8px;
    -moz-border-radius:    8px;
    border-radius:         8px;
    -moz-box-shadow:    0 0 50px 5px #666;
    -webkit-box-shadow: 0 0 50px 5px #666;
    box-shadow:         0 0 50px 5px #666;
    box-shadow:         0 0 50px 5px rgba(0,0,0,0.5);
    width:515px;
    left:50% !important;
    margin:0 0 0 -257px;
}
.overlay-header {
    padding:10px 25px;
    background:#164e87 url(./../images/bg_overlay-header.png) repeat-x;
    -webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
    color:#fff;
    overflow:hidden;
    line-height:16px;
    text-shadow:0 -1px 0 #000;
    border:1px solid #3575ab;
    border-color:#97c1e0 #3575ab #0f355c #3575ab;
}
.overlay-header-icon {
    float: left;
    margin-top: 5px;
}
.overlay-header h3 {
    float: left;
    line-height: inherit;
    padding: 5px 0;
    font-size: 16px;
    width: 85%;
}
.overlay-header [class*="icon-"]:before {
    opacity: 0.6;
    margin: -5px 7px 0 0;
    font-size: 22px;
    line-height: 1em;
    display: inline-block;
    vertical-align: middle;
}

.overlay-header .close {
    background:url(./../images/overlay-close-icon.png) no-repeat right 3px;
    cursor:pointer;
    float:right;
    padding:5px 24px 5px 5px;
    line-height:inherit;
    color:#fff;
    font-weight:bold;
}
.overlay-header .close-me {
    font-size: 24px;
    line-height: 0.9;
    float: right;
}
.overlay-header .close:hover {
    text-shadow: 0 0 5px #fff;
    background-position: right -26px;
    text-decoration: none;
}
.overlay-date {
    padding: 6px 25px;
    background: #444;
    color: #ddd;
    font-size: 11px;
}
.overlay-content {
    padding: 25px;
    color: #555;
}
.overlay-content h4 {
    margin-bottom:5px;
}

/* Overlay footer */
.overlay-footer {
    padding: 15px 25px;
    background: #f9f9f9;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    text-align: center;
    color: #999;
}
.overlay-footer:last-child {
    border-bottom: none;
    -webkit-border-radius:0 0 8px 8px;
    -moz-border-radius:0 0 8px 8px;
    border-radius:0 0 8px 8px;
}
.overlay-footer .left-column,
.overlay-footer .right-column {
}
.overlay-footer .left-column {
    float: left;
}
.overlay-footer .right-column {
    float: right;
}
.overlay-footer .left-column * {
    margin-right: 15px;
}
.overlay-footer .right-column * {
    margin-left: 15px;
}

/* Narrow overlay */
.overlay-narrow {
    width: 250px;
    margin-left: -125px;
}
.overlay-narrow .overlay-header,
.overlay-narrow .overlay-footer {
    padding: 10px 15px;
}
.overlay-narrow .overlay-header h3 {
    width: 70%;
}
.overlay-narrow .overlay-date {
    padding: 6px 15px;
}
.overlay-narrow .overlay-content {
    padding: 20px 15px;
}

/* Overlay for help content */
.overlay.help {
    border: 3px solid #fff;
    background:#444;
    background:rgba(50,50,50,0.90);
    color:#fff;
    padding:20px;
}
.overlay.help .close {
    background:none;
    padding:0;
    color:#eee;
    border:1px solid #eee;
    border-radius:3px;
    line-height:0.9;
    font-weight:bold;
    text-align:center;
    position:absolute;
    top:7px;
    right:7px;
    font-size:12px;
    width:13px;
    height:13px;
    cursor:pointer;
}
.overlay.help .close:hover {
    color:#fff;
    border-color:#fff;
}
.overlay.help p,
.overlay.help h1,
.overlay.help h2,
.overlay.help h3,
.overlay.help h4,
.overlay.help h5,
.overlay.help h6 {
    margin: 0 0 10px 0;
    float:none;
}
.overlay.help h2 {
    font-size:16px;
}
.overlay.help h3 {
    font-size:14px;
}
.overlay.help .subtle {
    font-size: 11px;
    font-weight: normal;
    line-height: 14px;
    color: #bbb;
}

/* New Features overlay */
#overlay-new-features .overlay-content h2 {
    margin-bottom: 1em;
}
#overlay-new-features .overlay-content h3  {
    margin-top: 1.5em;
}
#overlay-new-features .overlay-content ul {
    margin: 20px;
}
#overlay-new-features .overlay-content h3:first-child  {
    margin-top: 0;
}
#overlay-new-features .overlay-content p {
    margin: 0.5em 0;
}


/* tooltip for actions
more than just a text tooltip - allows for action and interaction - NEW WITH VECTOR */
.action-tooltip {
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    background: #666; /* Old browsers */
    background: rgba(0,0,0,.6);
    text-align:center;
    box-shadow: 0 2px 8px rgba(0,0,0,.5);
    padding:4px;
}
.action-tooltip h2 {
    font-size:13px;
    color:#fff;
    padding:4px 0 6px 0;
    background-color: #7bbaea; /* Old browsers */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7bbaea), color-stop(100%,#2c6ba7)); /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(top, #7bbaea 0%,#2c6ba7 100%); /* Chrome10+,Safari5.1+ */
    background-image:    -moz-linear-gradient(top, #7bbaea 0%,#2c6ba7 100%); /* FF3.6+ */
    background-image:     -ms-linear-gradient(top, #7bbaea 0%,#2c6ba7 100%); /* IE10+ */
    background-image:      -o-linear-gradient(top, #7bbaea 0%,#2c6ba7 100%); /* Opera 11.10+ */
    background-image:         linear-gradient(top, #7bbaea 0%,#2c6ba7 100%); /* W3C */
    -webkit-border-radius:3px 3px 0 0;
    -moz-border-radius:3px 3px 0 0;
    border-radius:3px 3px 0 0;
    border:1px solid #aed6f3;
    border-width: 1px 0 0 0;
    text-shadow: 0 -1px 0 #537ca4;
}
.action-tooltip .action-tooltip-content {
    background:#fff;
    -webkit-border-radius:0 0 3px 3px;
    -moz-border-radius:0 0 3px 3px;
    border-radius:0 0 3px 3px;
    text-align:left;
}
.action-tooltip .action-tooltip-content .padded {
    padding:10px;
}
.action-tooltip.tip-left {
    margin-left:50px;
}
.action-tooltip.tip-right {
    margin-right:50px;
}
/* creates triangle */
.action-tooltip:after {
    content:"";
    position:absolute;
    bottom:-10px; /* value = - border-top-width - border-bottom-width */
    left:50px; /* controls horizontal position */
    border-width:10px 10px 0; /* vary these values to change the angle of the vertex */
    border-style:solid;
    border-color:rgba(0,0,0,.7) transparent;
    /* reduce the damage in FF3.0 */
    display:block;
    width:0;
}
.action-tooltip.tip-top:after {
    top:-10px; /* value = - border-top-width - border-bottom-width */
    right:50%; /* controls horizontal position */
    bottom:auto;
    left:auto;
    margin-right:-10px;
    border-width:0 10px 10px; /* vary these values to change the angle of the vertex */
    border-color: #666 transparent;
    border-color:rgba(0,0,0,.55) transparent;
}
.action-tooltip.tip-left:after {
    top:50%; /* controls vertical position */
    left:-10px; /* value = - border-left-width - border-right-width */
    bottom:auto;
    right:auto;
    margin-top:-10px;
    border-width:10px 10px 10px 0;
    border-color:transparent rgba(0,0,0,.75);
}
.action-tooltip.tip-right:after {
    top:50%; /* controls vertical position */
    right:-10px; /* value = - border-left-width - border-right-width */
    bottom:auto;
    left:auto;
    margin-top:-10px;
    border-width:10px 0 10px 10px;
    border-color:transparent rgba(0,0,0,.7);
}

/* loader mask
limit the ability of the user to access functionality beneath */
.loading-mask {
    position:absolute;
    left:0;
    top:0;
    display:block;
    width:100%;
    height:100%;
    background-image: url(./../images/loading-bg.png);
    z-index:9999;
}
.loading-text {
    text-align:center;
    position:absolute;
    width:160px;
    height:50px;
    padding-top:14px;
    left:50%;
    margin-left: -80px;
    top:50%;
    margin-top: -25px;
    background: url(./../images/loading-bg-center.png) no-repeat;
    color:#fff;
    font-weight:bold;
    text-shadow: #000 0 0 0;
}
.loading-text img {
    position: relative;
    top: 3px;
    margin-right: 7px;
    border:0;
}

/* sets color for placeholder on text input fields - works in conjunction with jquery.placeholder-label plugin */
input.placeholder {
    color: #aaa;
}

/* menu icons */
.embed {background: url(./../images/button-icons.png) no-repeat 2px -474px;}
.tcx {background: url(./../images/button-icons.png) no-repeat -2px -1095px;}
.gpx {background: url(./../images/button-icons.png) no-repeat -2px -1145px;}
.kml {background: url(./../images/button-icons.png) no-repeat -2px -1043px;}

/* favorites default styling */
.fav {
    background: url('./../images/button-icons.png') no-repeat -9px -1397px;
    text-indent: -9999px;
    display: inline-block;
    width: 20px;
    height: 20px;
}
.fav.favorite {
    background-position: -9px -1346px;
}
.fav.load {
    background: url('../images/loading.gif') no-repeat center center;
}

/* Added as part of social */
.field-label {
    padding:5px 0;
    float:left;
    width:225px;
    text-align:right;
}
.form-stacked .field-label {
    width:auto;
    display:block;
    text-align:left;
    float:none;
    padding:3px 0;
}
.input-fields,
.form-buttons {
    display:block;
    margin-left:240px;
}
.form-stacked .input-fields,
.form-stacked .form-buttons {
    display:block;
    margin-left:0;
}
.checkbox-label,
.radio-label {
    text-align: left;
    padding: 0 0 0 18px;
    margin-bottom: 5px;
    width: auto;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    float: none;
    display: block;
    color:#555;
}
.checkbox-label, .radio-label, .field-text {
    text-align: left;
    color: #555;
}
.checkbox-label input[type="checkbox"],
.radio-label input[type="radio"] {
    margin:0 2px 0 -18px;
}
.input-fields > .radio-label:first-child,
.input-fields > .checkbox-label:first-child {
    padding-top: 5px;
}
.help-block {
    color: #888;
    font-size: 11px;
    margin-top: 6px;
}
.help-inline {
    padding:1px 0;
    color: #888;
    display:inline-block;
    vertical-align: middle;
}
.field-text {
    display:inline-block;
    margin-right:5px;
}
.form-buttons .button {
    margin:0;
    padding:5px 25px;
    float:none;
}
input.text,
input.password,
textarea.textarea,
select.select {
    border: 1px solid #aaa;
    color:#555;
    font-size:13px;
    margin:0;
    display:inline-block;
    vertical-align: middle;
}
input.text,
input.password,
textarea.textarea {
    width:200px;
    padding: 4px 5px;
    background-color: white;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 8px 8px -10px #999;
    box-shadow:         inset 0 8px 8px -10px #999;
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
}
select.select {
    width:212px;
    height:26px;

    /* For IE7 - height can't be set on select element, so bumping it down to line up with label */
    *margin-top:3px;
}
textarea.textarea {
    min-height:80px;
}
input.text:focus,
textarea.textarea:focus {
    outline:0;
    border:1px solid #2cbafb;
    -webkit-box-shadow: 0 0 5px #2cbafb, inset 0 8px 10px -10px #999;
    box-shadow:         0 0 5px #2cbafb, inset 0 8px 10px -10px #999;
}
input[disabled=disabled].text,
input.text.disabled,
input[disabled=disabled].password,
input.password.disabled,
textarea[disabled=disabled].textarea,
textarea.textarea.disabled,
select[disabled=disabled].select,
select.select.disabled {
    opacity: 0.4;
    cursor: default;
}
input.text.size1,
textarea.textarea.size1,
select.select.size1 {
    width:30px;
}
input.text.size2,
textarea.textarea.size2,
select.select.size2 {
    width:50px;
}
input.text.size3,
textarea.textarea.size3,
select.select.size3 {
    width:100px;
}
input.text.size4,
textarea.textarea.size4,
select.select.size4 {
    width:150px;
}
input.text.size5,
textarea.textarea.size5,
select.select.size5 {
    width:250px;
}
input.text.size6,
textarea.textarea.size6,
select.select.size6 {
    width:350px;
}
input.text.auto,
textarea.textarea.auto,
select.select.auto {
    width:auto;
}
input.text.full,
textarea.textarea.full,
select.select.full {
    width:100%;
}
.form-section-header {
    font-size:14px;
    margin:10px 0 5px 0;
}
.section {
    border:1px solid #ddd;
    background:#f6f6f6;
    margin:10px 0;
    border-radius:3px;
}
.section .form-section-header {
    margin:10px 10px 10px 10px;
    font-size:14px;
    color:#666;
}
.field-group {
    padding:10px 0;
    border-bottom:1px solid #eaeaea;
}
.field-group:first-of-type {
    border-top:1px solid #eaeaea;
}
.field-group.justified .field-label {
    text-align:left;
    width:450px;
    margin-right:20px;
}
.field-group.error .field-label,
.field-group.error .help-inline {
    color:#b50000;
}
.field-group.error .field-text {
    color:#B50000;
}
.field-group.error input.text,
.field-group.error input.password,
.field-group.error textarea.textarea {
    border-color:#b50000;
}
.field-group.error .help-inline {
    position:relative;
    font-weight:bold;
    background: transparent url(/image/main/icons/fam/exclamation.png) no-repeat 5px 0;
    padding: 0 0 0 25px;
}
.field-group.error input.text:focus,
.field-group.error input.password:focus,
.field-group.error textarea.textarea:focus {
    -webkit-box-shadow: 0 0 5px #e13232, inset 0 8px 10px -10px #999;
    box-shadow:         0 0 5px #e13232, inset 0 8px 10px -10px #999;
}
.form-no-dividers .field-group.field-group-divider {
    padding-top:15px;
    margin-top:15px;
    border-top:1px solid #eaeaea;
    border-top:1px solid rgba(0,0,0,0.075);
}
.form-no-dividers .field-group {
    padding:5px 0;
    border:none;
}
.form-button-group {
    padding:20px 0;
}
.input-wrap + .input-wrap {
    margin-top:5px;
}
.fieldset,
fieldset.fieldset {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
}
#status .success-message,
#status .error-message {
    padding: 10px 10px 10px 35px;
    margin:10px 0;
    /* FUTURE STYLES
     -webkit-border-radius: 3px;
     -moz-border-radius:    3px;
     border-radius:         3px;
     */
}
#status .success-message {
    color:#333;
    background:#fffcd8 url(/image/main/icons/fam/icon-success.gif) no-repeat 12px 10px;
    /* FUTURE STYLES
     color:#3e783b;
     background:#e8ffd3 url(https://connect.garmin.com/api/user/style/main/../images/icon-success.gif) no-repeat 12px 9px;
     box-shadow: inset 0 -25px 40px -20px #dbffb9;
     */
}
#status .error-message {
    color:#b50000;
    background:#ffe7e7 url(/image/main/icons/fam/icon-failure.gif) no-repeat 12px 10px;
    /* FUTURE
     box-shadow: inset 0 -25px 40px -20px #ffd4d4;
     */
}
.help-title {
    font-style:inherit;
    border-bottom-width:1px;
    border-bottom-style:dotted;
    border-bottom-color:inherit;
    cursor:help;
}


/* user profile pic sizing */
/* HTML EXAMPLE: <img src="" class="avatar-tiny" /> */
.avatar-full   { width:296px;height:296px; }
.avatar-large  { width:100px;height:100px; }
.avatar-med    { width:60px; height:60px; }
.avatar-small  { width:40px; height:40px; }
.avatar-tiny   { width:30px; height:30px; }
/* end */


/* activity type icons for generic use */
/* HTML EXAMPLE: <span class="activity-icon activity-icon-cycling"></span> */
.activity-icon {
    display:inline-block;
    vertical-align:middle;
    background: url('../images/icons-activities.png') no-repeat -7px -10px;
    width:24px;
    height:24px;
}
.activity-icon-other        { background-position: -7px -10px; }
.activity-icon-run          { background-position: -7px -89px; }
.activity-icon-cycle        { background-position: -7px -168px; }
.activity-icon-walk         { background-position: -7px -250px; }
.activity-icon-hike         { background-position: -7px -330px; }
.activity-icon-swim         { background-position: -9px -408px; }
.activity-icon-weight       { background-position: -9px -490px; }
.activity-icon-unknown      { background-position: -7px -569px; }
.activity-icon-transition   { background-position: -7px -648px; }
.activity-icon-multisport   { background-position: -7px -728px; }
/* end */


/* media object - primarily used for activity feed and comments */
.object {
    margin:10px 0;
}
.object,
.object-content {
    position:relative;
}
.object-content {
    display:table-cell;
    width:10000px;
    *width:auto;
    *zoom:1;
}
.object-img {
    float:left;
    margin-right:10px;
}
/* end */


/*  Close Button  */

/*  Examples:                                        */
/*  <button class="close-me">&times;</button>        */
/*  <a href="#" class="close-me">&times:</button>    */

.close-me {
    height: 1em;
    width: 1em;
    padding: 0;
    color: inherit;
    opacity: 0.75;
    text-decoration: none;
    font-family: Helvetica,Arial;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    line-height: .75;
    border-radius: 2px;
    cursor: pointer;
}
a.close-me {
    padding-top:1px;
}
button.close-me {
    padding: .06em 0 .5em 0;
    margin:0;
    border: 0;
    cursor: pointer;
    background: transparent;
    -webkit-appearance: none;
}
.close-me:hover {
    text-decoration:none;
    opacity:1;
    background:#333;
    background:rgba(0,0,0,0.4);
    color:#fff;
    text-shadow:none;
    box-shadow:inset 0 1px 0 rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.4);
    font-weight:normal;
}
/* end */







/*  Colors  */

/* lighter */
.blue-bg              { background: #9fedff; }
.blue-color           { color:      #9fedff; }

.bluegreen-bg         { background: #a0ffb2; }
.bluegreen-color      { color:      #a0ffb2; }

.green-bg             { background: #b9ff41; }
.green-color          { color:      #b9ff41; }

.greenyellow-bg       { background: #e2ff1f; }
.greenyellow-color    { color:      #e2ff1f; }

.yellow-bg            { background: #fff000; }
.yellow-color         { color:      #fff000; }

.yelloworange-bg      { background: #ffdd00; }
.yelloworange-color   { color:      #ffdd00; }

.orange-bg            { background: #ffbf00; }
.orange-color         { color:      #ffbf00; }

.orangered-bg         { background: #ff9059; }
.orangered-color      { color:      #ff9059; }

.red-bg               { background: #ff787c; }
.red-color            { color:      #ff787c; }

.redpurple-bg         { background: #f28ace; }
.redpurple-color      { color:      #f28ace; }

.purple-bg            { background: #e8a7ff; }
.purple-color         { color:      #e8a7ff; }

.purpleblue-bg        { background: #d2baff; }
.purpleblue-color     { color:      #d2baff; }

.lightbrown-bg        { background: #f1e3c2; }
.lightbrown-color     { color:      #f1e3c2; }

.brown-bg             { background: #ebd6a1; }
.brown-color          { color:      #ebd6a1; }

.darkbrown-bg         { background: #e1c682; }
.darkbrown-color      { color:      #e1c682; }

.lightgray-bg         { background: #eee }
.lightgray-color      { color:      #eee; }

.gray-bg              { background: #ddd; }
.gray-color           { color:      #ddd; }

.darkgray-bg          { background: #ccc; }
.darkgray-color       { color:      #ccc; }

/* darker */
.blue-dk-bg              { background: #1aa2ff; }
.blue-dk-color           { color:      #1aa2ff; }

.bluegreen-dk-bg         { background: #12b79f; }
.bluegreen-dk-color      { color:      #12b79f; }

.green-dk-bg             { background: #4ba900; }
.green-dk-color          { color:      #4ba900; }

.greenyellow-dk-bg       { background: #87a000; }
.greenyellow-dk-color    { color:      #87a000; }

.yellow-dk-bg            { background: #ae9f00; }
.yellow-dk-color         { color:      #ae9f00; }

.yelloworange-dk-bg      { background: #c79600; }
.yelloworange-dk-color   { color:      #c79600; }

.orange-dk-bg            { background: #e27900; }
.orange-dk-color         { color:      #e27900; }

.orangered-dk-bg         { background: #db6000; }
.orangered-dk-color      { color:      #db6000; }

.red-dk-bg               { background: #db0000; }
.red-dk-color            { color:      #db0000; }

.redpurple-dk-bg         { background: #cc2692; }
.redpurple-dk-color      { color:      #cc2692; }

.purple-dk-bg            { background: #9822e6; }
.purple-dk-color         { color:      #9822e6; }

.purpleblue-dk-bg        { background: #793eac; }
.purpleblue-dk-color     { color:      #793eac; }

.lightbrown-dk-bg        { background: #ccba91; }
.lightbrown-dk-color     { color:      #ccba91; }

.brown-dk-bg             { background: #b3995d; }
.brown-dk-color          { color:      #b3995d; }

.darkbrown-dk-bg         { background: #80692e; }
.darkbrown-dk-color      { color:      #80692e; }

.lightgray-dk-bg         { background: #bbb }
.lightgray-dk-color      { color:      #bbb; }

.gray-dk-bg              { background: #888; }
.gray-dk-color           { color:      #888; }

.darkgray-dk-bg          { background: #444; }
.darkgray-dk-color       { color:      #444; }

/* white + black */
.white-bg             { background: #fff; }
.white-color          { color:      #fff; }

.black-bg             { background: #000; }
.black-color          { color:      #000; }


.transparent-bg    { background: transparent; }


/* ------------------ */
/* KEEP AT THE BOTTOM */
/* ------------------ */

/* utility classes */
.float-right    {float:right;}
.float-left     {float:left;}
.inline-block   {display:inline-block;}
.text-overflow {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.text-align-center {text-align:center;}
.text-align-right {text-align:right;}
.text-align-left {text-align:left;}

/* clearfix - better than overflow hidden */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

.show-more {
    display:block;
    padding:10px;
    text-align:center;
    background:#eee;
    border:1px solid #ccc;
    border-radius:5px;
    color:#666;
    box-shadow:inset 0 30px 40px -20px #f9f9f9;
    clear:both;
    margin-bottom:15px;
}
.show-more:hover {
    text-decoration:none;
    background:#eaeaea;
    color:#333;
}
.show-more:active {
    background:#dadada;
}