﻿body{font-family: Verdana; font-size: 12pt; background-color: #8CC63F; padding: 0 0 0 0; margin: 0 0 0 0;text-align:center;}
#top_container{width: 960px; margin: 0px auto 20px auto; background-color: #FFFFFF; position:relative; top: 55px; display:block; min-height: 550px;text-align:left;}
#headerBlue{background-image: url(../images/back_blue.png); background-repeat: repeat-x; position: absolute; left: 0px; top: 0px; width: 100%; height: 350px;}
#headerTop{position:relative; display:block; background-image: url(../images/top_blue.png); background-color: #B8D9FF; height: 19px; width: 960px;}
#header{position:relative; height: 100px; background-color: #2491E6;}
h1, .h1{font-family: "Sans-Serif", Arial, Verdana; font-size: 28pt; font-weight: bold; color: #163DA1; margin: 0 0 0 0;}
h2, .h2{font-family: "Sans-Serif", Arial, Verdana; font-size: 14pt; font-weight: normal; color: #203DA1; margin: 0 0 0 0;}
#header a.logo, #header a.logo:visited{position: absolute; left: 25px; bottom: 10px;}
#header #corner_box{position:absolute; right:0px; bottom:15px; text-align: right; font-family: Verdana; width: 470px;}
#footer{width:960px; height: 25px; display:block; position:relative; bottom: 0px; right: 35px; text-align:right; padding-bottom: 10px; font-size: 9pt; font-family: Verdana; color: #002E1A;}
#footerBottom{position:absolute; bottom: 0px; display:block; background-image: url(../images/bottom_white.png); background-color: #8CC63F; height: 19px; width: 960px;}
div#content_container{min-height: 550px;}
div#inner_content_container{display:block; padding-top: 15px;}
div.sub_container{display:inline-block;}
.line{width: 930px; height: 7px; margin: 0px 15px 10px 15px; background-image: url(../images/line1.png); background-repeat: repeat-x;}
#messageBalance{width: 800px; height: 140px; text-align: left;}
/*new reminder*/
#newReminder{height:41px; right:10px; top:6px; position:relative; width:152px; float: right;}
#newReminder a{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background: transparent url(../images/bt_newrem.png) no-repeat scroll center top; display:block; height:41px; width:152px;}
#newReminder a:hover{background-position:center bottom; display:block; height:41px; width:152px;}
#newReminder a span{display:none;}
/*billing details*/
#billingDetails{height:41px; width:152px;}
#billingDetails a{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background: transparent url(../images/bt_billdet.png) no-repeat scroll center top; display:block; height:41px; width:152px;}
#billingDetails a:hover{background-position:center bottom; display:block; height:41px; width:152px;}
#billingDetails a span{display:none;}
/*phone details*/
#phoneDetails{height:41px; width:152px;}
#phoneDetails a{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background: transparent url(../images/bt_phonedet.png) no-repeat scroll center top; display:block; height:41px; width:152px;}
#phoneDetails a:hover{background-position:center bottom; display:block; height:41px; width:152px;}
#phoneDetails a span{display:none;}
/*basecamp integration*/
#basecampIntegration{height:41px; width:197px;}
#basecampIntegration a{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background: transparent url(../images/bt_basecamp.png) no-repeat scroll center top; display:block; height:41px; width:197px;}
#basecampIntegration a:hover{background-position:center bottom; display:block; height:41px; width:197px;}
#basecampIntegration a span{display:none;}
/*Add messages button*/
#addMessagesBtn{height:41px; position:relative; width:73px; float: right; padding-top: 0px; padding-left: 5px;}
#addMessagesBtn a{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background: transparent url(../images/bt_add.png) no-repeat scroll center top; display:block; height:41px; width:73px;}
#addMessagesBtn a:hover{background-position:center bottom; display:block; height:41px; width:73px;}
#addMessagesBtn a span{display:none;}
/*submit button*/
#sbmitBtn{height:41px; position:relative; width:96px; float: right; padding-top: 0px; padding-left: 5px;}
#sbmitBtn a{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background: transparent url(../images/bt_submit.png) no-repeat scroll center top; display:block; height:41px; width:96px;}
#sbmitBtn a:hover{background-position:center bottom; display:block; height:41px; width:96px;}
#sbmitBtn a span{display:none;}
/*Add phone button*/
#addPhoneBtn{height:41px; position:relative; width:113px; float: right; padding-top: 0px; padding-left: 5px;}
#addPhoneBtn a{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background: transparent url(../images/bt_addphone.png) no-repeat scroll center top; display:block; height:41px; width:113px;}
#addPhoneBtn a:hover, #addPhoneBtn a.hover{background-position:center bottom; display:block; height:41px; width:113px;}
#addPhoneBtn a span{display:none;}
/*Add reminder button*/
.addReminderBtn{height:41px; position:relative; right:25px; width:73px; float: right; padding-top:20px;padding-left:5px;}
.addReminderBtn a{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background: transparent url(../images/bt_add.png) no-repeat scroll center top; display:block; height:41px; width:73px;}
.addReminderBtn a:hover{background-position:center bottom; display:block; height:41px; width:73px;}
.addReminderBtn a span{display:none;}
/*Update billing info button*/
.updateBillingInfoBtn{height:41px; position:relative; width:96px; float: right;}
.updateBillingInfoBtn a{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background: transparent url(../images/bt_update.png) no-repeat scroll center top; display:block; height:41px; width:96px;}
.updateBillingInfoBtn a:hover{background-position:center bottom; display:block; height:41px; width:96px;}
.updateBillingInfoBtn a span{display:none;}
/*Update reminder button*/
.updateReminderBtn{height:41px; position:relative; right:25px; width:96px; float: right; padding-top: 60px; padding-left: 5px; padding-bottom: 20px;}
.updateReminderBtn a{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background: transparent url(../images/bt_update.png) no-repeat scroll center top; display:block; height:41px; width:96px;}
.updateReminderBtn a:hover{background-position:center bottom; display:block; height:41px; width:96px;}
.updateReminderBtn a span{display:none;}
/*sign out*/
#signOut{height:41px; width:120px;}
#signOut a{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background: transparent url(../images/bt_signout.png) no-repeat scroll center top; display:block; height:41px; width:120px;}
#signOut a:hover{background-position:center bottom; display:block; height:41px; width:120px;}
#signOut a span{display:none;}
/*sign in*/
#signIn{height:41px; width:112px;}
#signIn a{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background: transparent url(../images/bt_signin.png) no-repeat scroll center top; display:block; height:41px; width:112px;}
#signIn a:hover{background-position:center bottom; display:block; height:41px; width:112px;}
#signIn a span{display:none;}
/*join*/
#join{height:41px; width:98px; position: relative; top: 15px; left:161px;}
#join a{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background: transparent url(../images/bt_join.png) no-repeat scroll center top; display:block; height:41px; width:98px;}
#join a:hover{background-position:center bottom; display:block; height:41px; width:98px;}
#join a span{display:none;}
/*accept*/
#accept{height:41px; width:195px; position: relative; top: 0px; right: 0px;}
#accept a{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background: transparent url(../images/bt_accept.png) no-repeat scroll center top; display:block; height:41px; width:195px;}
#accept a:hover{background-position:center bottom; display:block; height:41px; width:195px;}
#accept a span{display:none;}
#messagesLeft{margin-left: 50px; margin-top: 2px; width: 225px; height: 37px; float: left;}
#msgLeft{background-image: url(../images/blue_left.png); width: 12px; height: 37px; float: left;}
#msgBody{background-image: url(../images/blue_body.png); background-repeat: repeat-x; width: 201px; height: 37px; float: left; font-size: 14pt; color: #454766; padding-top: 5px;}
#msgRight{background-image: url(../images/blue_right.png); width: 12px; height: 37px; float: right;}
#msgBody .messagesLeftCount{font-family: Verdana; font-size: 18pt; font-weight: bold;}
#addMessagesDiv{width: 320px; float: left; font-size: 14pt;}
.textbox{border: solid 1px #9EA3B9; font-family: Verdana, "Sans-Serif", Arial; font-size: 10pt; background-color: #D1EAFA;}
#phoneNumbersListContainer{padding: 0px 15px 0px 15px; height: 330px;}
.reminderTextColumn{font-weight: normal; font-family: Verdana; font-size: 11pt; color: #000000;}
.loginWelcome{font-size: 9pt; color: #ffffff; text-align: right;}
.loginEmail{font-size: 12pt; font-weight: bold; color: #002E1A; text-align: right;}
.chargeAmount{font-weight: bold;}
.errorRefNumber{padding-left: 10px; font-weight: bold;}
.errorContainer{width: 590px; padding-top: 50px; font-family: Verdana; font-size: 12pt; text-align: left;}
a{color: #656565; font-family: Verdana; font-size: 9pt; font-weight: normal;}
#flashPlaceHolder{width: 400px; height: 350px; position: relative; top: 52px; left: 55px; background-color: #cccccc; float: left;}
#loginPlaceHolder{float: right; position: relative; top: 52px; right: 55px; width: 420px; height:225px; border: solid 2px #F3F7FA;}
#joinPlaceHolder{float: right; position: relative; top: 64px; right: 55px; width: 420px; height: 105px; border: solid 2px #F3F7FA;}
.loginTitles{font-family: Verdana, "Sans-Serif", Arial; font-size: 12pt; color: #000000; font-weight: bold; padding: 0px;}
.loginTextbox{border: solid 2px #5D5D75; font-family: Verdana, "Sans-Serif", Arial; font-size: 14pt; width: 290px; height: 25px;}
#loginViewTbl{border-collapse: collapse; width: 100%; height:100%;}
#dontHaveAccount{font-family: Verdana; font-size: 12pt; color: #ff0000; text-align: center; padding-top: 15px;}
#homeTextPlaceHolder{height: 220px; position: absolute; left: 0px; top: 570px; text-align: justify; padding: 10px 55px 50px 55px; font-family: Verdana; font-size: 9pt;}
.homeMainWord{color: #555555; font-weight: bold; font-size: 11pt; margin-top: 10px;}
#reminderMainDetails{width: 910px; height: 155px; border: solid 2px #F1F6FA; position: relative; top: 0px; left: 25px;}
#reminderRecurrenceDetails{width:910px; height: 150px; border: solid 2px #F1F6FA; position: relative; top: 20px; left: 25px; vertical-align: top;}
.recurrenceRange{width: 750px; height: 140px; position: relative; top: 30px; left: 25px;}
#tblRecurrenceRange{width:910px; border: solid 2px #F1F6FA;}
.errorSmallFont{font-family: Verdana, Arial; font-size: 9pt; color: #ff0000;}
.calendarImg{position: relative; top:3px; left:3px;}
#addNewPhoneNumber{width:910px; height: 60px; border: solid 2px #F1F6FA; position: relative; left: 25px; vertical-align: top;}
.tip{color: #9C9BA3; font-family: Verdana; font-size: 8pt;}
.siteMap{color: #777777; font-family: Verdana; font-size: 10pt; position: relative; top: 5px;}
.siteMap a{padding-left: 5px; font-size: 10pt;}
.unverifiedPhoneRow{color: #555555;}
.unverifiedPhoneRow a{color: #ff0000;}
.smallerFont{font-family: Verdana; font-size: 9pt;}
.frame{width: 910px; height: 300px; text-align: left; border: solid 2px #F3F7FA;}
.required{color: #ff0000; font-size: 9pt; vertical-align: top;}
#tblFooterAction{margin-top:10px;margin-bottom:20px;width:860px;height:50px;text-align:left;padding:0;}
.policySubTitle{color: #555555; font-weight: bold; font-size: 9pt; margin-top: 10px;}
/*forgot pass control*/
.forgotPass{font-family: Verdana; font-size: 12pt; text-align: left; height: 70px; width: 650px;}
.forgotPassInstruction{padding: 0px 0px 10px 0px; text-align: left;}
.forgotPassSubmit{display: none;}
#messageCostPnl{color: #777777; font-family: Verdana; font-size: 8pt; position: relative; left: 80px; width: 200px;}
#autoAddAjaxLoaded{border: none; margin: 0; padding: 0; position: relative; left: 0px;}
/*verification dialog*/
#verificationFlyout{font-size: large; color: #D92600; width: 600px;background-color: #FFDD9D; border: solid 2px #FCAD0A; font-size: 12px; font-family: Verdana; text-align: center;}
#verificationFlyout .title{font-size: 12pt; font-weight: bold; text-align: center; padding: 0px 0px 5px 0px;}
#verificationFlyout .numberinput{width: 80px; height: 26px; font-size: 16pt; text-align: center; background-color: #FFAB00; border: solid 2px #E66C00; color: #D92600; padding: 6px;}
/*verify button*/
#verify{height:41px; width:91px; position: relative; top: 0px; right: 0px;}
#verify a{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background: transparent url(../images/bt_verify.png) no-repeat scroll center top; display:block; height:41px; width:91px;}
#verify a:hover{background-position:center bottom; display:block; height:41px; width:91px;}
#verify a span{display:none;}
/*end verification dialog*/
/*view demo button*/
#viewdemo{float: right; height:41px; width:113px; position: relative; top: 10px; right: 0px;}
#viewdemo a{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background: transparent url(../images/bt_viewdemo.png) no-repeat scroll center top; display:block; height:41px; width:113px;}
#viewdemo a:hover{background-position:center bottom; display:block; height:41px; width:113px;}
#viewdemo a span{display:none;}
/*help button*/
#help{height:21px; width:51px; position: relative; top: 0px; left: 899px;}
#help a{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background: transparent url(../images/bt_help.png) no-repeat scroll center top; display:block; height:21px; width:51px;}
#help a:hover{background-position:center bottom; display:block; height:21px; width:51px;}
#help a span{display:none;}
/*confirm button*/
#confirm{height:41px; width:99px; float: right;}
#confirm a{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background: transparent url(../images/bt_confirm.png) no-repeat scroll center top; display:block; height:41px; width:99px;}
#confirm a:hover{background-position:center bottom; display:block; height:41px; width:99px;}
#confirm a span{display:none;}
/*cancel button*/
#cancel{height:41px; width:99px; float: left;}
#cancel a{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background: transparent url(../images/bt_cancel.png) no-repeat scroll center top; display:block; height:41px; width:99px;}
#cancel a:hover{background-position:center bottom; display:block; height:41px; width:99px;}
#cancel a span{display:none;}
#charsleft{border-style: none; font-size: 18pt; color: #656565; font-family: Verdana; font-weight: bold; width: 52px; background-color: Transparent;}
/*phone # verification result*/
.verificationResultOk{width: 600px; height: 90px; border: solid 2px #004D24; background-color: #81DB6E;}
.verificationResultOk .closeImgCell{width: 19px; cursor: pointer; padding: 1px; background: transparent url(../images/close_green.png) no-repeat left bottom; font-size: 5px;}
.verificationResultOk .title{color: #004D24; font-weight: bold; text-align: center; padding: 0px 0px 5px 0px;}
.verificationResultFailed{width: 600px; height: 90px; border: solid 2px #BF0024; background-color: #FF9466;}
.verificationResultFailed .closeImgCell{width: 19px; cursor: pointer; padding: 1px; background: transparent url(../images/close_red.png) no-repeat left bottom; font-size: 5px;}
.verificationResultFailed .title{color: #BF0024; font-weight: bold; text-align: center; padding: 0px 0px 5px 0px;}
/*basecamp message*/
#message{background:#BDB89E;border:1px solid #80706B;border-top:none;display:none;position:absolute;width:700px;top:-55px;height:30px;padding-top:10px;font-family:Verdana;font-weight:bold;font-size:11pt;color:#171a1f; left:50px;}
/*company button*/
#company{height:41px; width:154px; position: relative; top: 0px; right: 0px;}
#company a{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background: transparent url(../images/bt_company.png) no-repeat scroll center top; display:block; height:41px; width:154px;}
#company a:hover{background-position:center bottom; display:block; height:41px; width:154px;}
#company a span{display:none;}


#packages_container {width:800px; height:341px; background:url("../images/packages_bg.png") no-repeat top left; padding:30px 5px;}
#packages_container div.package{cursor: pointer;float:left; font-size:14px; color:#4a4a38; margin:3px;width:192px; height:290px;}
#packages_container div.package:hover{border:3px solid black;margin:0;}
div#starter_pckg {background:url(../images/starter.png) no-repeat left top;}
div#plus_pckg {background:url(../images/plus.png) no-repeat left top;}
div#premim_pckg{background:url(../images/premium.png) no-repeat left top;}
#packages_container div#max_pckg {background:url(../images/max.png) no-repeat left top; font-size:12px;}
.price_red {font-size:20px; color:#f00}
.price_black {font-size:19px; color:#000}
.price_red2 {font-size:17px; color:#f00;line-height:30px;}
.price_black2 {font-size:17px; color:#000;line-height:30px;}
.package_body { padding:55px 12px 0 12px}
.package_description {padding-top: 23px}
.package_description2 {padding-top: 20px}

.ellipsis {overflow: hidden; white-space: nowrap; line-height: 1.2em;height: 1.2em;text-overflow: ellipsis;-o-text-overflow: ellipsis;width: 100%;-moz-binding: url(bindings.xml#ellipsis);}
.moz-ellipsis > DIV:first-child{float: left;}
.moz-ellipsis > DIV + DIV{float: right;margin-top: -1.2em;}
.moz-ellipsis > DIV + DIV::after{background-color: white;content: '...';}
