/* ==== DEFAULTS -- DO NOT CHANGE ======= */

* { margin: 0; padding: 0; text-decoration: none; font-size: 1em; outline: none; }
code, kbd, samp, pre, tt, var, textarea, input, select, isindex { font: inherit; font-size: 1em; }
dfn, i, cite, var, address, em { font-style: normal; }
th, h1, h2, h3, h4, h5, h6 { font-weight: normal; }
a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet { border: none; }
strong,b { font-weight: bold; }
em,i { font-style: italic; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td, center { text-align: left; vertical-align: top; }
body { line-height: 1; background: white; color: black; }
q { quotes: "" ""; }
ul, ol, dir, menu { list-style: none; }
sub, sup { vertical-align: baseline; }
a { color: inherit; }
hr { display: none; } /* we don't need a visual hr in layout!! damn right mofos */
font { color: inherit !important; font: inherit !important; color: inherit !important; } /* disables some nasty font attributes in standard browsers */

input.textfield, input.number {
	color: #a0a0a0 !important;
	color: #000;
	margin: 0 0 5px 0;
	border: 1px solid #ccc;
	text-align: left;
	display: block;
	padding: 5px;
	background-color: #fff !important;
	}
html * input.textfield:focus, html * input.textfield_req:focus, html * input.number:focus {
	border: 1px solid #47ad00;
	color: #000 !important;
	}	
html * input.textfield_req {
	color: #000;
	padding: 5px;
	border: 1px solid #ccc;
	margin: 0 0 5px 0;
	background-color: #fff !important;
	}		
html * input.submit, html * input.go {
	display: block;
	}		
html * textarea, textarea {
	padding: 5px;
	border: 1px solid #ccc;
	font-family: helvetica,arial;
	color: #000 !important;
	}		
html * textarea:focus {
	border: 1px solid #47ad00;
	color: #000 !important;
	}		

img.right {
	float: right;
	margin: 0 0 15px 20px;
	}
img.left {
	float: left;
	}	



html,body {
	height: 100%;
	}
body {
	font: normal 11px helvetica,arial;
	background: #fff;
	}
	


.wrapper {
	/*width: 960px;*/
	width: 995px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -20em; /* the bottom margin is the negative value of the footer's height */	
	background: #fff;
/*	overflow: hidden; */
	}
#lightwindow_iframe {
	overflow:hidden !important;
}
img.lightwindow {
	border: 1px solid #bbb;
	margin: 0 20px 10px 0;
	}	
a.lightwindow img {
	border: 1px solid #47ad00;
	}
a.lightwindow img.floatleft {
	border: 1px solid #47ad00;
	float: left;
	margin: 0 20px 10px 0;
	}		
#main {
	margin: 0 auto;
	width: 960px;
	position: relative;
	padding: 10px 0 0 0;	
	}	
	
a#logo {
	width: 164px;
	height: 51px;
	background: url(../images/crm/ribbit_for_salesforce_logo.gif) no-repeat 0 0;
	display: block;
	margin: 3px 0 0 40px;
	}

a#logo_home {
	width: 164px;
	height: 51px;
	background: url(../images/home/logo.gif) no-repeat 0 0;
	display: block;
	}

#help a {
	color: #999;
	float: right;
	font: normal 11px helvetica;
	margin-bottom: 25px;
	padding: 5px 38px 0 0;
	text-decoration: none;
	}
#help a:hover {
	color: #333;
	}

	
	
/* Nav ---------------------------------------------------*/
#top_nav {
	margin-bottom: 15px;
	width: 100%;
	}
#sddm {
	margin: 0 20px 0 0;
	padding: 0;
	z-index: 88888;
	float: right;
	}

#sddm li {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: normal 11px helvetica;
	letter-spacing:1px;
	}

#sddm li a {
	display: block;
	margin: 0;
	padding: 0 18px;
	color: #999;
	text-decoration: none;
	border-right: 1px solid #999;
	}

#sddm li a:hover {
	color:#333;
	}

#sddm div {
	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 5px 0 10px 0;
	border:0;
	background:url(../images/crm/dropmenudiv.gif) no-repeat left bottom;
	width:123px;
	z-index: 88888;
	}
	#sddm div a, #sddm div .dummylink
	{	position: relative;
		display: block;
		margin: 0;
		padding: 5px 5px 5px 17px;
		width: auto;
		text-align: left;
		text-decoration: none;
		color: #aaa;
		font:normal 10px helvetica;
		border:0;
		letter-spacing:normal;
		z-index: 88888;
	}
	
	/*#sddm div .dummylink {
		visibility: visible;
	}*/

	#sddm div a:hover {	
		color: #333;
	}
	#sddm a#nav_contact:hover {	
		cursor: default; /* So the cursor stays an arrow and doesn't change to the text cursor because the words "Contact us" are not really a link (and has no href attribute) */
	}
/* END Nav -----------------------------------------------*/



/* Home page -------------------------------------*/
div.home_image {
	position: relative;
	}
img.home_image {
	display: block;
	}
#learn_more_home {
	position: absolute;
		bottom: 142px;
		right: 6px;
	}
.home_links {
	background: url(../images/crm/home_links.jpg) 0 0 no-repeat;
	color: #8b8d90;
	font-family: Helvetica, Arial, sans-serif;
	height: 73px;
	/*position: relative;
		top: -73px;*/
	text-align: center;
	width: 954px;
	}
.home_links a {
	color: #231f20;
	}
.home_links a:hover {
	color: #d9d9da;
	}
.home_links .link_section {
	display: block;
	float: left;
	height: 53px;
	padding-top: 20px;
	width: 317px;
	}
.home_links .link_section .upper_line {
	font-size: 19px;
	font-weight: bold;
	}
.home_links .link_section .lower_line {
	font-size: 13px;
	font-weight: normal;
	}
.home_links .link_section .quotation {
	color: #47ad00;
	font-size: 16px;
	font-style: italic;
	font-weight: bold;
	}
.home_links .link_section .more {
	color: #8b8d90;
	font-size: 12px;
	font-style: italic;
	}
.home_links .link_section:hover a, .home_links .link_section:hover .quotation, .home_links .link_section:hover .more {
	color: #d9d9da;
	}
.home_links #how_it_works_section a:hover {
	color: #8b8d90;
	}
/* END Home page ---------------------------------*/



/* Content (general styles) ----------------------*/
#content {
	background:url(../images/crm/header_bg.jpg) no-repeat;
	color: #595a5c;
	font: normal 14px helvetica,arial;
	line-height: 145%;	
	margin: 0;
	padding: 155px 0 15px 0;
	}	
#content h1 {
	color: #000;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 20px;
	font-weight: bold;
	margin-top: 5px;
	padding-bottom: 25px;
	}
#content h2 {
	color: #009444;
	font-size: 18px;
	font-weight: bold;
	}
#box_wrapper {
	background: url(../images/crm/curved_box_repeater.gif) 0 0 repeat-y;
	width: 738px;
	}
#box_head {
	background: url(../images/crm/curved_box_head.gif) 0 0 no-repeat;
	width: 738px;
	}
#box_foot {
	background: url(../images/crm/curved_box_foot.gif) 0 100% no-repeat;
	padding: 20px 30px 40px 30px; /* Applied to #box_foot because it is the inner-most <div> of the curved box */
	width: 680px;
	}
#box_wrapper_full {
	background: url(../images/crm/curved_box_full_repeater.gif) 0 0 repeat-y;
	width: 960px;
	}
#box_foot_full {
	background: url(../images/crm/curved_box_full_foot.gif) 0 100% no-repeat;
	width: 960px;
	}
.float_clearer {
	clear: both;
	}
p.plain_copy {
	margin-bottom: 15px;
	}
.publication {
	font-style: italic;
	}
.section {
	border-bottom: 1px solid #ccc;
	color: #666666;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 1.5em;
	margin: 50px 0 0 20px;
	padding-bottom: 50px;
	width: 638px;
	}
.section.first_section {
	margin-top: 0;
	}
.section.last_section {
	border: none;
	}
/* END Content (general styles) ------------------*/



/* Sidebar ---------------------------------------*/
#sidebar {
	color: #999;
	float: right;
	font-size: 10px;
	line-height: normal;
	margin: 0;
	padding: 25px 15px 0 0; /* padding-right causes problems in IE 6 */ /* Make padding-top the same as #content h1 (general style) to align baselines */
	position: relative; /* For the positioning of #learn_more */
	text-align: right;
	width: 185px;
	}
#sidebar a {
	color: #8b8d90;
	}
#sidebar #learn_more {
	display: block;
	position: absolute;
		right: 18px;
		top: -134px;
	}
#sidebar h3 {
	font-size: 22px;
	margin-bottom: 25px;
	}
#sidebar.core_features li {
	}
#sidebar ul a {
	display: block;
	height: 49px; /* Height of the background images - padding-top spacing */
	margin-bottom: 20px;
	padding-right: 86px; /* Width of the background images + 18 px spacing */	
	padding-top: 8px;
	}
#sidebar a:hover {
	text-decoration: underline;
	}
#sidebar.core_features #core_feature_voice_memos { background: url(../images/crm/sidebar/features_icon_voice_memos.gif) 100% 0 no-repeat; }
#sidebar.core_features #core_feature_transcriptions { background: url(../images/crm/sidebar/features_icon_transcriptions.gif) 100% 0 no-repeat; }
#sidebar.core_features #core_feature_sms { background: url(../images/crm/sidebar/features_icon_sms.gif) 100% 0 no-repeat; }
#sidebar.core_features #core_feature_workflow { background: url(../images/crm/sidebar/features_icon_workflow.gif) 100% 0 no-repeat; }
#sidebar.core_features #core_feature_inbox { background: url(../images/crm/sidebar/features_icon_inbox.gif) 100% 0 no-repeat; }
#sidebar.core_features #core_feature_routing { background: url(../images/crm/sidebar/features_icon_routing.gif) 100% 0 no-repeat; }
#sidebar.core_features #core_feature_web-based { background: url(../images/crm/sidebar/features_icon_web-based.gif) 100% 0 no-repeat; }
/* END Sidebar -----------------------------------*/



/* Core Features ---------------------------------*/
#all_features h2 {
	font-size: 14px;
	height: 55px;
	padding: 12px 0 0 65px;
	}
#all_features li {
	padding-bottom: 35px;
	margin: 43px 20px 0 20px;
	width: 638px;
	}
#all_features li#features_voice_memos {
	margin-top: 10px;
	height: 269px;
	}
#all_features .right .description, #all_features .left img {
	display: block;
	float: right;
	}
#all_features .left .description, #all_features .right img {
	display: block;
	float: left;
	}
#features_voice_memos .description {
	background: url(../images/crm/core_features/all_features_icon_voice_memos.gif) 0 0 no-repeat;
	width: 245px;
	}
#features_transcriptions .description {
	background: url(../images/crm/core_features/all_features_icon_transcriptions.gif) 0 0 no-repeat;
	width: 275px;
	}
#features_sms .description {
	background: url(../images/crm/core_features/all_features_icon_sms.gif) 0 0 no-repeat;
	margin-left: 12px;
	width: 233px;
	}
#features_workflow .description {
	background: url(../images/crm/core_features/all_features_icon_workflow.gif) 0 0 no-repeat;
	width: 215px; 
	}
#features_inbox .description {
	background: url(../images/crm/core_features/all_features_icon_inbox.gif) 0 0 no-repeat;
	margin-left: 12px;
	width: 277px;
	}
#features_routing .description {
	background: url(../images/crm/core_features/all_features_icon_routing.gif) 0 0 no-repeat;
	width: 261px;
	}
#features_web-based .description { 
	background: url(../images/crm/core_features/all_features_icon_web-based.gif) 0 0 no-repeat;
	width: 269px;
	}
/* END Core Features -----------------------------*/



/* What is it? -----------------------------------*/
#what_intro {
	margin-bottom: 25px;
	}
#what_list h2 {
	height: 40px; /* Because they are not all the same number of lines */
	margin-bottom: 25px;
	padding-top: 2px;
}
#what_list ul {
	list-style-image: url(../images/crm/bullet_green.gif);
	list-style-position: outside;
	list-style-type: disc;
	margin-left: 15px;
	}
#what_list li {
	float: left;
	padding-left: 72px; /* Width of the number (background image) plus 15 px spacing */
	width: 258px;
	}
#what_list li#what_stay, #what_list li#what_talk {
	margin-bottom: 35px;
	}
#what_list li#what_stay, #what_list li#what_manage {
	margin-right: 20px;
	}
#what_list li#what_stay { background: url(../images/crm/what_is_it/number_one.gif) 0 0 no-repeat; }
#what_list li#what_talk { background: url(../images/crm/what_is_it/number_two.gif) 0 0 no-repeat; }
#what_list li#what_manage { background: url(../images/crm/what_is_it/number_three.gif) 0 0 no-repeat; }
#what_list li#what_unify { background: url(../images/crm/what_is_it/number_four.gif) 0 0 no-repeat;	}
#what_list li li {
	margin-bottom: 15px;
	padding: 0;
	width: auto;
	}
/* END What is it? -------------------------------*/



/* How it Works ----------------------------------*/
#how_it_works_visual_wrapper {
	margin: 30px auto 0 auto;
	width: 100%;
	}
.ui-tabs .ui-tabs-hide {
    display: none;
	}
#how_it_works_buttons {
	background: url(../images/crm/how_it_works/how_it_works_buttons_border.gif) 0 0 no-repeat;
	height: 55px;
	margin: 0 auto;
	padding: 18px 0 0 11px;
	width: 468px;
	}
#how_it_works_buttons li {
	float: left;
	margin-top: 1px;
	}
#how_it_works_buttons li a {
	display: block;
	height: 100%;
	width: 100%;
	}
#how_it_works_button_messages {
	background: url(../images/crm/how_it_works/how_it_works_button_messages_off.gif) 0 0 no-repeat;
	height: 34px;
	margin-left: 6px;
	width: 111px;
	}
#how_it_works_button_calls {
	background: url(../images/crm/how_it_works/how_it_works_button_calls_off.gif) 0 0 no-repeat;
	height: 34px;
	width: 112px;
	}
#how_it_works_button_voice_memos {
	background: url(../images/crm/how_it_works/how_it_works_button_voice_memos_off.gif) 0 0 no-repeat;
	height: 34px;
	width: 112px;
	}
#how_it_works_button_outbound_sms {
	background: url(../images/crm/how_it_works/how_it_works_button_outbound_sms_off.gif) 0 0 no-repeat;
	height: 34px;
	width: 111px;
	}
#how_it_works_button_messages.ui-state-active {	background: url(../images/crm/how_it_works/how_it_works_button_messages_on.gif); }
#how_it_works_button_calls.ui-state-active { background: url(../images/crm/how_it_works/how_it_works_button_calls_on.gif); }
#how_it_works_button_voice_memos.ui-state-active {	background: url(../images/crm/how_it_works/how_it_works_button_voice_memos_on.gif); }
#how_it_works_button_outbound_sms.ui-state-active {	background: url(../images/crm/how_it_works/how_it_works_button_outbound_sms_on.gif); }
#how_it_works_diagrams {
	position: relative;
		left: -26px; /* Because the curved-border <div> already has padding and this needs to exceed the width that is left */
	}
#how_it_works_diagrams div {
	background: url(../images/crm/how_it_works/how_it_works_diagram_border.gif) 50%	 0 no-repeat;
	height: 417px;
	}
#how_it_works_diagrams img {
	display: block;
	}
/* END How it Works ------------------------------*/



/* Videos ----------------------------------------*/
#videos .section {
	height: 175px;
	margin: 30px 0 0 30px;
	padding-bottom: 15px;
	}
#videos a {
	display: block;
	float: left;
	}
#videos a img {
	border: none;
	display: block;
	}
#videos p {
	margin-left: 245px;
}
/* END Videos ------------------------------------*/



/* Screenshots -----------------------------------*/
.screenshots .section {
	height: 175px;
	margin: 30px 0 0 30px;
	padding-bottom: 15px;
	}
.screenshots a {
	border: none;
	display: block;
	float: left;
	}
.screenshots a img {
	border: none;
	display: block;
	}
.screenshots p {
	margin-left: 338px;
}
/* END Screenshots -------------------------------*/



/* Customers -------------------------------------*/
#customers h1 {
	margin-left: 20px;
	}
#customers .first_section {
	margin-top: 15px;
	}
#customers .last_section {
	margin-bottom: 0;
	}
#customers img {
	display: block;
	float: left;
	}
#customers blockquote p {
	margin-left: 165px; /* Width of images (135 px) + 15 px spacing */
	}
#customers .quote_who {
	display: block;
	font-weight: bold;
	/*font-style: italic;*/
	margin-left: 165px;
	margin-top: 15px;
	}
#customers a.case_study {
	background: url("../images/crm/pdf_icon.gif") 0 50% no-repeat; /* 16 px × 16 px */
	color: #009444;
	float: left;
	height: 16px;
	margin-left: 165px;
	padding-left: 22px;
	}
#customers a.case_study {
	text-decoration: underline;
	}
/* END Customers ---------------------------------*/



/* Case studies ----------------------------------*/
#case_studies h1 {
	margin-left: 20px;
	}
#case_studies .first_section {
	margin-top: 15px;
	}
#case_studies .last_section {
	margin-bottom: 0;
	}
#case_studies img {
	display: block;
	float: left;
	}
#case_studies p {
	margin-left: 165px; /* Width of images (135 px) + 15 px spacing */
	}
#case_studies p span.intro {
	font-weight: bold;
	}
#case_studies a.case_study {
	background: url("../images/crm/pdf_icon.gif") 0 50% no-repeat; /* 16 px × 16 px */
	color: #009444;
	float: left;
	height: 16px;
	margin-left: 165px;
	padding-left: 22px;
	}
#case_studies a.case_study {
	text-decoration: underline;
	}
/* END Case studies-------------------------------*/



/* Pricing ---------------------------------------*/
#pricing h1 {
	margin-left: 30px;
	}
#pricing img {
	display: block;
	}
/* END Pricing -----------------------------------*/



/* News/Events -----------------------------------*/
#events a {
	color: #009444;
	text-decoration: underline;
	}
#events ol li {
	margin-top: 15px;
	}
#events ol li h3, #events ol li h4 {
	color: #094;
	font-weight: bold;
	}
#press_releases .release_title {
	color: #009444;
	text-decoration: underline;
	}
#press_releases .release_date {
	font-size: 11px;
	margin-bottom: 7px;
	padding-bottom: 7px;
	}
#featured_news h2 {
	color: #666666;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 15px;
	padding: 2px 0 0 0;
	}
#featured_news .article {
	margin-bottom: 15px;
	}
#featured_news .article a {
	color: #666666;
	}
#featured_news .article img {
	clear: left;
	float: left;
	margin: 10px 10px 15px 0;
	}
#featured_news .article .articlink {
	border-bottom: 1px solid #ccc;
	display: block;
	float: left;
	padding: 10px;
	width: 445px;
	}
#featured_news .article.last_article .articlink {
	border: none;
	}
#featured_news .article a.articlink:hover {
	background: #D2E5F0;
	}

#featured_news .article .title {
	color: #000;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 15px;
	/*font-style: italic;*/
	font-weight: bold;
	/*padding: 2px 0 15px 0;*/
	}
#featured_news .article .date {
	font-size: 11px;
	margin-bottom: 7px;
	padding-bottom: 7px;
	}
#featured_news .article .content {
	}
#featured_news .article .content .more {
	font-weight: bold;
	}
#awards h3 {
	font-weight: bold;
	margin-bottom: 15px;
	}
#awards li {
	margin-bottom: 30px;
	}
#awards a {
	color: #009444;
	text-decoration: underline;
	}
#media_kit a {
	color: #666666;
	}	
/* END News/Events -------------------------------*/



/* Sign-up & Info/Thank you ----------------------*/
#signup_box_head_full_and_split {
	background: url(../salesforce/trial/images/curved_box_full_and_split_head.gif) 0 0 no-repeat;
	padding-top: 15px;
	width: 960px;
	}
/* END Sign-up & Info/Thank you ------------------*/
	


/* Footer --------------------------------------------------*/
.footer_spacer {
	width: 638px;
	display: block;
	margin: 0 auto;
	padding: 0 0 0 0;
	}	
.footer, .push {
	height: 19em; /* .push must be the same height as .footer */
	}	
.footer {
	margin: 0px auto 0 auto;
	color: #aaa;
	background: url(../images/crm/grass.gif) no-repeat bottom left;
	width: 760px;
	padding-left: 200px;
	}
.footer ul {
	float: left;
	margin: 0 37px 0 0;
	color: #aaa;
	}		
.footer ul:hover {
	color: #000;
	}
.footer .title {
	display: block;
	padding: 0 0 6px 0;
	font-weight: bold;
	}	
.footer li {
	display: block;
	padding: 0 0 2px 0;
	line-height: 120%;
	}		
.footer a:link,
.footer a:active,
.footer a:visited {
	color: inherit !important;
	color: #aaa;
	text-decoration: none;
	}	
.footer a:hover {
	text-decoration: underline;
	}	

/* For when there was a R4SF-specific footer
.footer_spacer {
	width: 838px;
	display: block;
	margin: 0 auto;
	padding: 0 0 0 0;
	}	
.footer {
	background: url(../images/crm/grass.jpg) no-repeat bottom left;
	color: #aaa;
	margin: 25px auto 0 auto;
	padding-bottom: 25px;
	width: 995px;
	z-index: 10;
	}
.footer ul {
	float: left;
	margin: 0 116px 0 0;
	color: #aaa;
	}
.footer #why_do_we_love {
	margin-left: 34px;
	}
.footer #support {
	margin-right: 0;
}
.footer ul:hover {
	color: #000;
	}
.footer .title {
	display: block;
	font-weight: bold;
	}	
.footer li {
	display: block;
	padding: 0 0 2px 0;
	line-height: 120%;
	}		
.footer a:link,
.footer a:active,
.footer a:visited {
	color: inherit !important;
	color: #aaa;
	text-decoration: none;
	}	
.footer a:hover {
	text-decoration: underline;
	}
.footer ul.broad_links {
	letter-spacing: 0.2em;
	list-style-type: none;
	margin: 60px 0 0 0;
	padding: 0;
	text-align: center;
	width: 100%;
	}
.footer ul.broad_links li {
	display: inline;
	padding: 0;
	}*/
/* END Footer ----------------------------------------------*/



.disclaimer {
	font-size: 11px;
	color: #999;
	line-height: 110%;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;	
	padding: 15px 0;
	margin: 10px 0 15px 0;
	display: block;
	}		
		
				
form.ribbit {
	margin: 15px 0 0 0;
	font: normal 12px helvetica,arial;
	line-height: 150%;
	color: #121212;
	padding: 20px 0 5px 0;
	
	}
form.ribbit .formtitle {
	font: bold 17px helvetica,arial;
	}		
form.ribbit input.textfield, form.ribbit input.textfield_req {
	width: 325px;
	margin: 0 0 5px 0;
	text-align: left;
	display: block;
	}	
form.ribbit input.number {
	width: 35px;
	margin: 0 0 0 5px;
	display: inline;
	font-weight: normal;
	}	
form.ribbit p {
	line-height: 125%;
	padding: 0 0 15px 0;
	font-size: 1.1em;
	}	
form.ribbit li.title {
	display: block;
	font-weight: bold;
	font-size: 1.2em;
	}	
	
form.ribbit input.submit {
	display: block;
	margin: 20px 0 0 0;
	}		
form.ribbit textarea {
	width: 325px;
	height: 100px;
	}		
form.ribbit ul {
	padding: 5px 0 0 0 !important;
	}	
form.ribbit li {
	list-style-type: none !important;
	margin-left: 0 !important;
	}
form.ribbit select.country, form.ribbit .select {
	margin: 0 0 10px 0;
	width: 335px;
	display: block;
	}		
form.ribbit h2 {
	font: bold 1.4em helvetica,arial;
	padding: 15px 0 5px 0;
	margin: 15px 0 0 0;
	border-top: 1px solid #ccc;
	}		
#tilessection {
	padding-bottom: 8px;
	}	
form.ribbit select {
	width: 340px;
	}