/* tatango.css CSS definitions used only in the static networkText site */ /* New Homepage */ .quick-wrapper{ width: 800px; margin: 0 auto; position: relative; } .tatango-index #content{ margin: 0; padding: 0; width: 100%; } .tatango-index #header_wrapper #header{ height: 68px; overflow: hidden; } /* trust me, this is not as strange as you think */ .tatango-index #header_wrapper #header .header_logo{ height: 66px; overflow: hidden; } #featured-content{ background: #dc3e12 repeat-x url("/images/n/featured-content-bg.png"); padding: 40px 0 25px; border-bottom: 1px solid #993214; height: 300px; overflow: visible; } #featured-content #text{ float: left; width: 290px; margin-top: 45px; } #featured-content #text h2{ font-size: 1.9em; color: #fff; } #featured-content #text p{ font-weight: 300; font-size: 1.75em; color: #F4C8B8; color: #F4C8B8; margin-bottom: 20px; } #featured-content #text li{ float: left; margin: 5px 10px; width: 110px; } #featured-content #text ul a{ font-size: 1.4em; color: #F4C8B8; text-decoration: none; font-weight: bold; border-bottom: 1px dotted #F4C8B8; } #featured-content #text p a:hover{ color: #fff; border-style: solid; } #featured-content #screenshot{ position: relative; float: left; right: -20px; margin-top: -10px; width: 470px; height: 264px; padding: 20px; background: no-repeat bottom center url("/images/n/video-bg-wide.png");} #try_it_now { background: url("/images/n/trial_ribbon.png") no-repeat; display: block; width: 120px; height: 48px; position: absolute; right: 4px; top: -5px; z-index: 100; } #copy-bar{ background: #F5F4FB; border-bottom: 1px solid #DEDDE7; border-top: 1px solid #fff; padding: 15px 0; color: #334; } #copy-bar #try-it, #copy-bar #or, #copy-bar #login{ float: right; } #copy-bar #or{ margin: 0 .5em; font: italic .8em Georgia; color: #99a; line-height: 50px; } #quotes{ text-align: center; } #quotes li{ display: inline; margin: 0 15px; line-height: 40px; } #quotes img{ vertical-align: middle; } #more-buzz{ font-size: 0.9em; font: italic 1em Georgia; text-align: right; margin-top: 10px; } #more-buzz a{ text-decoration: none; } #more-buzz a:hover{ text-decoration: underline; } blockquote{ background: #99a; color: #fff; margin-bottom: 3.5em; margin-top: 2em; } blockquote p{ font: medium "Helvetica Neue", Helvetica, Arial, Sans, sans-serif; line-height: 150%; margin: 0; padding: 1em 2em 1em 1em; } blockquote cite{ display: block; background: #fff; color: #334; padding-top: 24px; background: #fff no-repeat 305px top url("/images/quote_tail.png"); } blockquote cite span{ display: block; text-align: center; float: right; width: 240px; } #how, #details{ margin-top: 2em; overflow: hidden; } #how img{ float: right; width: 350px; } #how .right{ float: left; width: 450px; } #details .right{ float: right; width: 450px; } #details .left{ float: left; width: 350px; } #how p, #details li{ color: #445; font: large "Helvetica Neue", Helvetica, Arial, Sans, sans-serif; line-height: 150%; } #details li{ font-size: medium; margin-bottom: 1em; } #how strong, #details strong{ color: #22222c; } a.get_started { background: #D14414; border: 1px solid #993214; color: #fff; display: block; font: bold medium "Helvetica Neue", Helvetica, Arial, Sans, sans-serif; margin: 0 auto; padding: .8em .8em .7em .8em; text-decoration: none; text-align: center; width: 10em; -moz-border-radius: 5px; -webkit-border-radius: 5px; } a.get_started:hover{ text-decoration: underline; color:#EFB22D ; } #how a.get_started, #details a.get_started{ clear: both; } .learn_more{ display: block; float: right; font-size: medium; font-weight: bold; margin-bottom: 2em; text-decoration: none; width: auto; } /* Restyling Headers */ h2{ font-size: large; } h3{ font-size: medium; } .legal p, .legal li{ font-size: small; } address{ margin-bottom:1em; } .thick_list p{ clear: both; color: #99a; display: block; font-size: small; padding-left: .05em; } .thick_list li{ border-top: 1px solid #EFEEF6; margin: 0; padding: 1.5em .5em; } .thick_list li div.status{ font-weight: bold; float:right; padding:.5em; margin-bottom:1em; border:1px dotted #EFEEF6; } .thick_list li div.status.ok{ color: #339E35; border-color: #339E35; } .thick_list li div.status.bad{ color: red; border-color: red; } .thick_list li div.status.warning{ border: none; } strong.issues-title{ margin-left: 1em; } .thick_list ul.issues{ margin-left: 2em; font-size: x-small; } .thick_list ul li{ padding: .2em; border: none; } /* About Sidebar */ #about_sidebar ul{ border-top: 1px dotted #DEDDE7; list-style-type: none; } #about_sidebar ul li{ border-bottom: 1px dotted #DEDDE7; padding: 0em; } #about_sidebar ul li a{ display: block; padding: .75em; text-decoration: none; } #about_sidebar ul li a:hover{ background: #F7FDFF; } #about_sidebar ul li a .caption{ color: #99a; display: block; font-size: x-small; padding-top: .5em; } #about_sidebar a.more{ display: block; margin-bottom: 2em; text-align: right; } .break{ margin-top: 2em; } #details .phone_preview{ float: left; } .screenshot_link{ display: block; text-align: center; clear: left; width: 300px; } /* Article Links */ #featured_on{ margin: 0; padding: 0; } #featured_on li{ background: url('/images/featured_on.png') no-repeat top left; float: left; margin: 0 5px; text-indent: -999em; width: 150px; } #featured_on li.sprite-seattle_times { background-position: 0 -30px; } #featured_on li.sprite-techcrunch { background-position: 0 -110px; } #featured_on li.sprite-mashable { background-position: 0 -190px; } #featured_on li.sprite-center_networks { background-position: 0 -270px; } #featured_on li.sprite-lh { background-position: 0 -350px; } #featured_on a{ display: block; height: 50px; width: 150px; } a.select{ color: #99a; font-size: x-small; padding: 3px 6px; text-decoration: none; display: block; width: auto; float: left; margin: .5em 0 0 1em; } a.select:hover{ color: #D14414; text-decoration: underline; } /* Contact */ #contact_sidebar p{ font-size: x-small; color: #99a; } #contact_sidebar ul{ border-top: 1px dotted #DEDDE7; list-style-type: none; margin-bottom: 1.5em; } #contact_sidebar ul li{ border-bottom: 1px dotted #DEDDE7; padding: .75em; } #contact_sidebar address{ border-top: 1px dotted #DEDDE7; border-bottom: 1px dotted #DEDDE7; margin-bottom: 1.5em; padding: .75em; } /* Discover Tatango */ ul.discover{ border-top: 1px solid #DEDDE7; overflow: hidden; } ul.discover li{ width: 380px; height: 80px; padding: 10px; float: left; font-size: small; border-bottom: 1px solid #DEDDE7; background: no-repeat 24px center; } ul.discover li:hover{ border-color:#fff; } ul.discover li h3{ font-size:x-large; line-height: 80px; padding-left: 82px; color: #334; } ul.discover li:hover h3{ font-size: large; line-height: 1em; color: #D14414; margin-bottom: .25em; padding-left: 0; } ul.discover li p{ display:none; } ul.discover li:hover p{ display:block; } #web_messaging{ background-image: url('/images/learnmore/web_messaging.png'); } #text_messaging{ background-image: url('/images/learnmore/text_messaging.png'); } #voice_messaging{ background-image: url('/images/learnmore/voice_messaging.png'); } #free{ background-image: url('/images/learnmore/free.png'); } #business_class{ background-image: url('/images/learnmore/business_class.png'); } #groups{ background-image: url('/images/learnmore/groups.png'); } #privacy{ background-image: url('/images/learnmore/privacy.png'); } #social_sharing{ background-image: url('/images/learnmore/social_sharing.png'); } #text_messaging, #free, #privacy, #groups{ background-color: #F7FDFF; } #web_messaging:hover, #text_messaging:hover, #voice_messaging:hover, #free:hover, #business_class:hover, #groups:hover, #privacy:hover, #social_sharing:hover{ background: #fff; } #go_tatango{ width: auto; float: right; margin: 5px 10px; background: #fff no-repeat center right url('/images/learnmore/signup.png'); border: 0; color: #0051BA; text-align: right; padding-right: 34px; } #go_tatango:hover{ color: #D14414; text-decoration: none; } a.watch_video { background: #D14414; border: 1px solid #993214; float:left; width:auto; color: #fff; font: bold medium "Helvetica Neue", Helvetica, Arial, Sans, sans-serif; margin: 10px 10px 10px 25px; padding: .5em 0em .5em 0em; text-decoration: none; text-align: center; width: 10em; -moz-border-radius: 5px; -webkit-border-radius: 5px; } /* About Page */ .two-thirds{ overflow: hidden; margin-bottom: 0; } .two-thirds h2{ color: #334; font-size: 18px; line-height: 36px; margin: 0; } .two-thirds h3{ color: #334; font-size: 14px; line-height: 18px; margin: 0; } .two-thirds .break{ margin-bottom: 18px; } .two-thirds .left ul{ list-style-type: disc; padding-left: 16px; margin-bottom: 0; } .two-thirds .left ul li{ padding: 9px 0; line-height: 18px; font-size: 12px; margin: 0; } .two-thirds .left ul li strong{ font-size: 14px; } .two-thirds .left{ width: 450px; margin-right: 24px; padding-right: 25px; float: left; border-right: 1px solid #EFEEF6; } .two-thirds .left p{ font-size: 15px; line-height: 18px; } .two-thirds .right{ width: 300px; float: left; } .two-thirds .right p, .halves .left p{ font-size: 12px; line-height: 18px; margin-bottom: 18px; } .two-thirds .right blockquote p{ padding: 9px; font-size: 14px; line-height: 18px; margin-bottom: 0; } .two-thirds .right blockquote{ margin-top: 36px; margin-bottom: 0; } .two-thirds .right blockquote cite{ padding-top: 18px; height: 45px; background: #FFFFFF url(/images/quote_tail.png) no-repeat scroll 205px top; } .two-thirds .right blockquote cite span{ width: auto; } .two-thirds .right ul{ margin: 8px 0 0; border-top: 1px solid #DEDDE7; } .two-thirds .right ul li{ margin: 0; padding: 0; } .two-thirds .right ul li a{ display: block; padding: 0 10px 0 46px; line-height: 35px; font-size: 12px; border-bottom: 1px solid #DEDDE7; text-decoration: none; font-weight: bold; } .two-thirds .right ul li a:hover{ background-color: #F7FDFF; } .two-thirds .twitter a{ background: no-repeat 10px 6px url("/images/n/icons/twitter-24.png"); } .two-thirds .blog a{ background: no-repeat 10px 6px url("/images/n/icons/feed-24.png"); } .two-thirds .facebook a{ background: no-repeat 10px 6px url("/images/n/icons/facebook-24.png"); } .halves .left, .halves .right{ width: 375px; } .two-thirds .halves .left, .two-thirds .halves .right{ width: 150px; } #main-about-block{ padding-top: 17px; border-top: 1px solid #DEDDE7; } #team{ margin-top: 18px; padding-top: 17px; border-top: 1px solid #DEDDE7; clear: both; } .tatango .float-pic{ float: left; margin: 9px 9px 9px 0; } #more-press{ margin-top: -36px; margin-left: 9px; margin-bottom: 36px; } /* contact page (steals a lot from the About Page section) */ #contact-infos{ width: 400px; margin: 20px auto; } .tatango-contact .two-thirds .right blockquote{ margin-top: 9px; } .tatango-contact .two-thirds .right blockquote cite{ background-position: center -9px; padding-top: 9px; } .tatango-contact .two-thirds .right blockquote cite span{ width: 100%; } #press p{ margin-top: 9px; clear: both; margin-bottom: 9px; padding-bottom: 8px; border-bottom: 1px solid #EFEEF6; } #press .float-pic{ width: auto; } .highlight_bar{ border: 1px solid #99a; background: #F5F4FB; margin: 35px 0; font-size: 1.5em; color: #667; padding: 9px; clear: both; overflow: hidden; } .highlight_bar p{ float: left; line-height: 40px; margin-bottom: 0; width: 660px; text-align: center; } .highlight_bar a{ text-decoration: none; } .highlight_bar #try-it{ float: right; } .highlight_bar #try-it img{ display: block; } /* Support page */ .two-thirds .left ul#support-options{ list-style-type: none; padding: 0; } #support-options li{ float: left; width: 235px; margin: 0px; } #support-options li.left{ margin-right: 10px; } #support-options li a{ display: block; height: 90px; line-height: 90px; background: #EFEEF6; text-align: center; text-decoration: none; font-size: 1.15em; font-weight: bold; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #support-options li a:hover{ background: #E2F2F9; } h2#contact-form { clear:left; padding-top:20px; } /* How It Works Page */ .tatango-tour #content { text-align: center; } .tatango-tour #content h2 { font-size: 2.5em; margin-bottom: 0.2em; } .tatango-tour #content .section p { font-size: 1.25em; } .tatango-tour #content .legend { margin: -5px 0 35px; } .tatango-tour #content .legend p { display: inline; margin-right: 20px; } .tatango-tour .screenshot { position: relative; margin-bottom: 35px; } .tatango-tour .screenshot img.large { border: 1px solid #667; padding: 1px; } .tatango-tour .bullet { position:absolute; width: 32px; height: 32px; } .tatango-tour .one { background-image: url("/images/n/bullets/1.png"); } .tatango-tour .two { background-image: url("/images/n/bullets/2.png"); } .tatango-tour .three { background-image: url("/images/n/bullets/3.png"); } .tatango-tour #adding-members .one { top:45%; left:92%; } .tatango-tour #adding-members .two { top:90%; left:45%; } .tatango-tour #managing-contacts .one { top:44%; left:37%; } .tatango-tour #managing-contacts .two { top:31%; left:92%; } .tatango-tour #managing-contacts .three { top:48%; left:77%; } .tatango-tour #messaging-group .one { top:45%; left:52%; } .tatango-tour #messaging-group .two { top:60%; left:79%; } .tatango-tour #messaging-group .three { top:85%; left:50%; } .tatango-tour #sms .one { top:22%; left:56%; } .tatango-tour #sms .two { top:40%; left:60%; } .tatango-tour #sent-messages .one { top:23%; left:73%; } .tatango-tour #sent-messages .two { top:63%; left:83%; } /* Learn More Page */ #highlights{ margin-bottom: 18px; } #highlights .highlight{ padding-left: 45px; background: no-repeat left top; } #highlights #on-the-go{ background-image: url("/images/n/icons/iphone-32.png"); } #highlights #look-pro{ background-image: url("/images/n/icons/briefcase-32.png"); } #highlights #responses{ background-image: url("/images/n/icons/clock-32.png"); } #highlights #customize-keywords{ background-image: url("/images/n/icons/settings-32.png"); } #highlights #multiple-admins{ background-image: url("/images/n/icons/users-32.png"); } #highlights #lightning-fast{ background-image: url("/images/n/icons/lightning-32.png"); } #highlights p{ font-size: 11px; } #tatango_uses ul{ margin: 0 0 36px 0; border: 0; clear: both; } #tatango_uses ul li{ line-height: 18px; font-size: 13px; height: 18px; float:left; width: 125px; padding-left: 20px; background: no-repeat left center url("/images/n/icons/check-16.png"); color: #667; } /* blockquote reset */ #happy_users{ font-size: 1.1em; } #happy_users blockquote{ background: none; color: #334; margin: 0 0 30px; clear: left; } #happy_users cite{ background: none; padding: 0; margin-top: 10px; clear: both; } #happy_users cite em{ color: #667; font-size: 0.9em; } #happy_users img{ float: left; margin: 5px 9px 0 0; } #happy_users p{ padding: 0; line-height: 1.25em; overflow: auto; } #happy_users p.subsection { font-size: 1.2em; border-bottom:1px solid #DEDDE7; margin-bottom:30px; padding-bottom: 20px; } .tatango-churches .two-thirds .right h2, .tatango-politicians .two-thirds .right h2, .tatango-businesses .two-thirds .right h2, .tatango-education .two-thirds .right h2 { margin: 20px 0 0; } .tatango-churches .two-thirds .right ul, .tatango-politicians .two-thirds .right ul, .tatango-businesses .two-thirds .right ul, .tatango-education .two-thirds .right ul { padding-top: 10px; } .tatango-churches .two-thirds .right ul li a, .tatango-politicians .two-thirds .right ul li a, .tatango-businesses .two-thirds .right ul li a, .tatango-education .two-thirds .right ul li a { border: none; font-weight: normal; padding: 0; clear: both; line-height: 1em; padding: 5px 0 15px; } #video { margin-bottom:27px; } #video a { display:block; text-indent:-1000px; width:300px; height:200px; background: top center url("/images/video_preview.jpg"); } #video a.brown { background-image: url("/images/brown-preview.jpg"); } #homepage #video a { width:440px; height:260px; background-image: url("/images/n/home.png"); } .tatango-index #facebox .title { margin-bottom: 0; } #video a:hover{ background-position: bottom center; } #video-bar { padding-bottom: 10px; border-bottom: 1px solid #dedde7; } #video-bar h4 { color: #334; font-size: 1.6em; margin: 0; } #video-bar p { color: #667; font-size: 1.3em; margin: 0; } #video-bar #try-it { float: right; } #video-bar #tatango-player { float: left; margin-right: 15px; } #carriers, #tatango_featured_in{ margin: 9px 0 9px; overflow: hidden; } #carriers ul, #tatango_featured_in ul{ border: 0; margin: 0; } #carriers li, #tatango_featured_in li{ float: left; width: 50%; text-align: center; line-height: 36px; height: 36px; } #carriers a, #tatango_featured_in a{ border: 0; padding: 0; } #carriers_more_content{ display: none; } #carriers_more{ margin: 0; overflow: hidden; } #carriers_more li{ float: left; width: 50%; line-height: 18px; font-size: 11px; } #screenshots{ margin: 0px; overflow: none; } #screenshots ul, #screenshots a{ border: 0; } #screenshots li{ float: left; margin: 36px 14px; } #screenshots li img{ height: 108px; width: 164px; border: 3px solid #EFEEF6; margin: 0 auto; } #screenshots li img:hover{ cursor: pointer; border: 3px solid #DEDDE7; } #screenshots li em{ display: block; text-align: center; margin-top: 9px; color: #667; } .tatango-learn_more #security{ border: 0; padding: 0; background-color: #fff; background-position: top left; padding-left: 42px; line-height: 18px; margin-bottom: 36px; } .tatango-learn_more #security h3{ margin-bottom: 0; font-size: 12px; line-height: 18px; } .tatango-learn_more #security p{ margin-bottom: 0; font-size: 12px; line-height: 18px; } /* contact us form */ .tatango-contact-form{ border: 1px solid #DEDDE7; padding: 18px; background: #F5F4FB; overflow: hidden; } .tatango-contact-form label{ margin: 0 2% 0 0; float: left; clear: left; line-height: 2em; font-weight: bold; width: 20%; } .tatango-contact-form input.submit{ margin-top: 1em; clear: both; float: right; } .tatango-contact-form input.text{ width: 50%; margin-bottom: .5em; float: left; } .tatango-contact-form textarea{ width: 50%; height: 6em; float: left; } #tour_tagline{ margin: 0px 0px 20px; font-size: 1.4em; font-weight: bold; padding: 8px 0; text-align: center; clear: both; } .qtip-price strong { display:block; margin-bottom:3px;} .qtip-price { font-size:large; } .two-thirds .right #tatango_uses ul li a{ font-weight:normal; display: inline; padding: 0px; line-height: inherit; font-size: auto; } .pdf-link { background:url('/images/icons/pdf.gif') top left no-repeat; padding-left:15px; margin-left:10px; font-size:12px; font-weight:bold; } #case_study_header img.icon { float:left; margin:8px 10px; } #case_study_header #try-it { padding-bottom:0px; } .skinny-page { width:480px; margin-left:auto; margin-right:auto; }