/* 
    Document   : landing page style sheet
    Created on : Jul 20, 2009, 8:37:59 AM
    Author     : PagerDuty
    Description:
        landing page style sheet
*/

/* Basics */

/*
* {
  margin:0;
  padding:0
}

body {
  font-size: 14px;
  font-family: Helvetica,Arial,"sans serif";
  background-color: #E5E5E5;
  color: #222222;
}

img {
  border-width: 0px;
  vertical-align: middle;
}

a {
  color: #1969BC;
  text-decoration: none;
}
a:hover { 
  text-decoration: underline;
}

.clear {
  clear: both;
  height: 0;
}
.nobr { white-space: nowrap; }

.rounded_corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

*/
/* This class is applied to elements by javascript; it only hides elements if js is enabled */
.jshide { display: none; }

/* =UserVoice feedback tab
------------------------------------------------------------------------------*/

a#uservoice-feedback-tab {
  background: #222222 url(http://pagerduty.uservoice.com/images/feedback_tab.png) no-repeat scroll -3px 50%;
  border-color: #222222 #222222 #222222 transparent;
  border-style: outset outset outset none;
  border-width: 1px 1px 1px medium;
  display: block;
  position: fixed;
  height: 90px;
  width: 22px;
  left: 0;
  margin-top: -45px;
  top: 40%;
  cursor: pointer;
  z-index: 100001;
}
a#uservoice-feedback-tab:hover {
  background-color: #0066CC;
  border-color: #0066CC #0066CC #0066CC transparent;
  border-style: outset outset outset none;
  border-width: 1px 1px 1px medium;
  cursor: pointer;
}

/* Header and Menus */

div.header {
  margin: 0;
  background: url(/images/marketing/header_gradient_out.png) repeat-x; 
  background-color: #F1F1F1;
  border-bottom: 1px solid #CCCCCC;
  height: 50px;
  min-width: 990px;
  overflow: hidden;
}

div.header_wrapper {
  width:  960px;
  margin-left: auto;
  margin-right: auto;
  height: 50px;
}

div.header div.logo {
  float: left;
  padding-top: 10px;
}

div.menu_wrapper {
  float: right;
  margin-left: auto;
  margin-right: auto;
  padding-top: 9px;
}

div.header div.login {
  float: right;
  font-size: 10px;
  padding: 0;
}

div.menu {
  clear: right;
  float: right;
  font-size: 12px;
  padding-top: 9px;
}

div.menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
div.menu li {
  float:left;
  /*padding: 0px 5px;*/
  /*border-right: 1px solid black;*/
  padding: 0px 10px;
}

div.menu li a.special {
  color: #FA0302;
}

div.menu li a.last {
  padding-right: 0;
}

div.menu li.last {
  /*border: none;*/
  padding-right: 0;
}

div.menu li.selected a {
  /*
  background-color: #222222;
  color: white;
  padding: 5px 10px;
  */
  color: black;
  cursor: default;
}
div.menu li.selected a:hover { text-decoration: none; }

div.menu a, div.menu a:visited {
  /*color: #222222;*/
  /*text-decoration: underline;*/
  color: #1969BC;
  padding: 2px;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: -0.06em;
}

div.menu a:hover,  div.menu a:visited:hover {
  /*
  background-color: black;
  color: white;
  text-decoration: none;
  */
  text-decoration: underline;
}

/* landing page tagline container */

div.tagline_container {
  margin: 0;
  padding: 0;
  background: #E4F2FD url(/images/marketing/grid12.gif) repeat scroll 0 0;
  border-bottom: 1px solid #CCCCCC;
  min-width: 990px;
}

div.tagline_content {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  background-image: url(/images/marketing/tagline_screens_mi.png);
  background-position: right bottom;
  background-repeat: no-repeat;
  height: 350px;
}

div.tagline_text {
   width: 350px;
}

h1.tagline {
  color: #000000;
  padding-top: 30px;
  font-size: 50px;
  line-height: 0.95em;
  letter-spacing: -0.06em;
  height: 163px;
}

p.sub_tagline {
  /* margin-top: 20px; */
  font-size: 20px;
  line-height: 20px;
  width: 350px;
}

p.sub_tagline em {
  font-style: italic;
  font-weight: bold;
}

p.free_signup {
  margin-top: 30px;
}

a.free_signup_250 {
  display: block;
  overflow: hidden;
  text-indent: -1000px;
  margin: 0;
  width: 250px;
  height: 64px;
  background: transparent url(/images/buttons/sign_up_risk_free_250.png) no-repeat scroll left center;
}

/*
a.free_signup_225 {
  display: block;
  overflow: hidden;
  text-indent: -1000px;
  margin: 0;
  width: 225px;
  height: 58px;
  background: transparent url(/images/buttons/sign_up_risk_free_225.png) no-repeat scroll left center;
}
*/

span.italic {
  font-style: italic;
}

/*
a.play_button {
  display: block;
  overflow: hidden;
  text-indent: -1000px;
  margin: 0;
  width: 100px;
  height: 100px;
  float: right;
  padding: 0;
  position: relative;
  right: 225px;
  top: 150px;
  background: transparent url(/images/buttons/play_button_normal.png) no-repeat scroll center center;
}

a.play_button:hover {
  background: transparent url(/images/buttons/play_button_hover.png) no-repeat scroll center center;
}
*/

/* content body */
div.content {
  margin: 0;
  background-color: #FFFFFF;
  min-width: 990px;
  padding-top: 20px;
  /*** TEMP ***/
  /*font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;*/
}

div.content_wrapper {
  width: 960px;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 20px;
}

/* landing page */

div.left_content {
  float: left;
  width: 665px;
}

p.intro_text {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 40px;
}

span.green_italic {
  font-style: italic;
  color: #669326;
  font-weight: bold;
}

span.orange {
  color: #FF9A16;
  font-weight: bold;
}

ul.pd_features {
  list-style-type: none;
  list-style-position: outside;
  list-style-image: none;
}

li.feature {
  display: block;
  width: 100%;
  font-size: 16px;
  clear: both;
  float: left;
  margin-bottom: 20px;
  line-height: 24px;
}
li.feature h2 {
  font-size: 22px;
  margin-left: 10px;
  padding-bottom: 5px;
}
li.feature p.feature_detail { color: #666666; }
li.feature p.thumbnail a {
  float: left;
  width: 220px;
  height: 148px;
  border: 5px solid #CCCCCC;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  margin-right: 20px;
}
li.feature  p.thumbnail a:hover {
  float: left;
  border: 5px solid #E04F1A;
}

img.zoom_in {
  position: relative;
  top: -165px;
  left: 210px;
}


/*******
 * Right content sidebar
 */

div.right_content {
  float: left;
  width: 280px;
  margin-left: 10px;

  /*padding-left: 10px;
  padding-right: 10px;*/
  padding: 10px 20px;

  background-color: #F1F6F7;
  border-left: 1px solid #EEEEEE;
  margin-bottom: 5px;
}
p.big_quote {
  color: #666666;
  font-size: 15px;
  line-height: 20px;
  font-style: italic;
  padding: 5px 0;
}
p.big_quote span.first_quote { margin-left: -5px; }
/*
span.byline {
  font-size: 13px;
  color: #333333;
  margin-left: 10px;
  display: block;
}*/

ul.byline {
  list-style-position: outside;
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
  padding-left: 10px;
  text-indent: -9px;
  font-size: 13px;
}
ul.byline li {
  padding-left: 0;
}

div.right_content h3 {
  font-size: 16px;
}
div.cust_logo {
  margin: 0 auto;
  padding: 5px;
  text-align: center;
}
div#rails_machine_logo {
  width: 200px;
  height: 40px;
}
div#rails_machine_logo img { line-height: 40px; }
div#opscode_logo { margin-top: 10px; }
div#webmynd_logo {
  background-color: #272528;
  height: 38px;
  width: 160px;
  margin-top: 20px;
}


p.right_title {
  width: 100%;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  color: #222222;
  background-color: #E4F2FD;
  padding: 5px 0px 5px 5px;
  margin-bottom: 15px;
  border: 5px solid #E4F2FD;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
p.new_feature {
  color: #CC0000;
}

ul.what_you_get {
  margin-top: 10px;
  list-style-type: none;
  list-style-position: outside;
  list-style-image: none;
}


ul.what_you_get li {
  display: block;
  width: 100%;
  font-size: 12px;
  font-weight: bold;
  line-height: 16px;
  padding-left: 22px;
  background: transparent url(/images/gpl/check16.png) no-repeat scroll left top;
  margin-bottom: 10px;
}

div.right_features {
  margin-bottom: 10px;
}

div.right_features h3 {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  padding: 10px;
  background-color: #E4F2FD;
}

div.right_new_features {
  position: relative;
  width: 100%;
  border: 2px solid #375F98;
}

div.right_new_features h3 {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  padding: 5px 5px;
  background-color: #375F98;
  color: #FFFFFF;
  text-align: center;
}

div.right_new_features img.badge {
  position: absolute;
  top: -15px;
  left: -15px;
}

div.right_new_features p {
  margin: 10px;
}
div.right_new_features p.big_link {
  text-align: center;
}
div.right_new_features p.big_link a {
  font-size: 18px;
  color: #FA0302;
}

p.customer_quote {
  margin: 10px 0px 20px 0px;
  font-size: 16px;
  font-style: italic;
}

p.press_coverage {
  margin: 10px 0px 10px 0px;
  font-size: 16px;
  font-style: italic;
}

/* non-landing page header */
div.content_header_container {
  margin: 0;
  /*background-color: #E4F2FD;*/
  background: transparent url(/images/new/bg-subpagebanner-shopify.gif) repeat-x scroll 0 0;
  border-bottom: 1px solid #C6D9E9;
  height: 78px;
  min-width: 990px;
}

div.content_header_container h2 {
  font-size: 36px;
  padding-top: 24px;
  line-height: 1em;
  letter-spacing: -0.06em;
}
div.content_header_container h1 {
  font-size: 36px;
  padding-top: 24px;
  line-height: 1em;
  letter-spacing: -0.06em;
}

div.sign_up_bar {
  text-align: center;
  margin-top: 20px;
  background-color: #F0F0F0;
  border: 1px solid #DDDDDD;
  padding: 20px;
  font-size: 20px;
}

div.sign_up_bar a {
  font-weight: bold;
  color: #DD0000;
}


/***** Feature tour page *****/
div.notes {
  text-align: right;
}

em.small {
  font-size: 11px;
  font-weight: normal;
  font-style: normal;
}

div.screenshot_box {
  margin: auto;
  width: 700px;
}

div.content_header {
  width:  960px;
  margin-left: auto;
  margin-right: auto;
}
div.content_inner {
  float: right;
  width: 700px;
  color: #666666;
  font-size: 13px;
}
div.content_inner h1, div.content_inner h2, div.content_inner h3 {
  color: #333333;
}

div.sub_nav {
  float: left;
  width: 230px;
  font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
/*
ul#nav_tour {
  margin: 0;
  padding: 0;
  width: 227px;
}
ul#nav_tour li {
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
}
ul#nav_tour li a {
  display: block;
  height: 40px;
  line-height: 40px;
  color: #1969BC;
  border: 1px solid #EFEFEF;
  margin-top: -1px;
  padding-left: 10px;
  background-color: white;
}
ul#nav_tour li a:hover {
  background-color: #EFEFEF;
  text-decoration: none;
}
ul#nav_tour li.main a {
  font-weight: bold;
  font-size: 16px;
}
ul#nav_tour li.sub a {
  padding-left: 25px;
  font-size: 15px;
}
ul#nav_tour li.first a {
  margin-top: 0;
}
ul#nav_tour li.selected a {
  color: white;
  background-color: #2983E0;
  cursor: default;
}*/

/*
div.overview_section {
  margin-bottom: 30px;
}
div.overview_section img.mini_screen {
  float: left;
  margin-right: 20px;
  border: 1px solid #AAAAAA;
}
div.overview_section h2 {
  font-size: 18px;
  margin-bottom: 10px;
}
div.overview_section p {
  line-height: 20px;
}
div.overview_section a.rm {
  display: block;
  margin-top: 10px;
}
div.overview_section a.rm img { margin-left: 4px }
*/

div.feature_section {
  font-size: 14px;
  line-height: 24px;
}
div.feature_section img.framed {
  border: 1px solid #CFCFCF;
}
div.feature_section span.standout {
  background-color: #FFFF99;
}
div.feature_section h2 {
  /*margin: 0 0 5px 0;*/
  font-size: 18px;
}
div.feature_section h3 {
  font-size: 14px;
}
div.feature_section ul {
  padding: 0 0 0 20px;
  line-height: 24px;
}
div.feature_section ul li {
  margin: 8px 0;
}
div.feature_section div.screen {
  text-align: center;
}
div.feature_section table.countries {
  width: 100%;
}
div.feature_section table.countries td {
  width: 33%;
}

div.two_col {
  line-height: 21px;
  font-size: 12px;
}
div.two_col div.col1 {
  float: left;
  width: 322px;
}
div.two_col div.col2 {
  float: right;
  width: 322px;
}
div.two_col img {
  border: 1px solid #CCC;
}
div.two_col p { margin: 5px 0; }
div.two_col h3 { margin-bottom: 5px; }

table#monitoring_logos td {
  width: 25%;
  padding: 5px 0;
}

table#contact_method_logos td {
  margin: 10px 0;
  width: 33%;
  text-align: center;
}
table#contact_method_logos tr.captions div {
  width: 128px;
  margin: 0 auto;
  font-size: 12px;
  line-height: 18px;
  color: red;
}
table#new_rotation_steps { margin-top: 10px; }
table#new_rotation_steps td {
  vertical-align: top;
  text-align: center;
  width: 33%;
}

table#mobile_alert_response td {
  margin: 10px 0;
  width: 50%;
  text-align: center;
}

/* faq page */
/*
div.faq_container {
  width: 600px;
  line-height: 24px;
  float:left;

}

div.right_container {
  float:right;
  width: 240px;
}

div.faq_container div.the_q {
  font-weight: bold;
  width: 30px;
  float: left;
  line-height: 27px;
  font-size: 16px;
}

div.faq_container h2 {
  line-height: 27px;
  font-size: 16px;
  float:left;
  width: 570px;
  margin-bottom: 10px;
}

div.faq_container p {
  margin-bottom: 20px;
  margin-left: 30px;
  color: #555555;
  font-size: 14px;
  width: 570px;
}

div.faq_container ul {
  margin-left: 60px;
  color: #555555;
  font-size: 14px;
  margin-bottom: 20px;
}

div.faq_tip_container {
  float: right;
  width: 300px;
  border: 1px solid #EEE8D8;
  background-color: #F9F8D8;
  padding: 20px;
  clear: both;
  margin-bottom: 20px;
}
div.faq_tip_container p {
  margin-top: 10px;
}

div.sign_up_tip_container {
  float: right;
  width: 300px;
  clear: both;
  color: #0BA30E;
  border: 1px solid #DDDDDD;
  background-color: #F0F0F0;
  padding: 20px 20px;
  margin-bottom: 20px;
}

div.sign_up_tip_container a {
  margin-left: auto;
  margin-right: auto;
}

div.sign_up_tip_container a:hover {
  margin-left: auto;
  margin-right: auto;
}
*/

/* terms of service, privacy policy, credits */
div.content_wrapper div.legal {
  font-size:14px;
  line-height:2em;
  margin-bottom:50px;
  width:800px;
}

div.content_wrapper div.legal p {
  font-size:14px;
  line-height:1.5em;
  margin-bottom:1.5em;
}

div.legal ul {
  margin-bottom:1.5em;
  padding-left:2.3em;
}

div.legal ol {
  padding-left:2.3em;
  font-size:14px;
  line-height:1.5em;
  margin-bottom:1.5em;
}

div.legal p.lead-in {
  font-size:14px;
  font-weight:bold;
  line-height:1.6em;
  margin-bottom:2em;
}

/* forms */
div.marketing_form {
  width: 100%;
  background-color: #FFFFFF;
}

div.marketing_form fieldset {
  border: 1px solid #D5D5D5;
  background-color: #F2F4F3;
  margin-top: 15px; 
  padding: 10px;
}

div.marketing_form fieldset p {
  margin-bottom: 10px;
  font-size: 14px;
}

div.marketing_form legend {
  border: 1px solid #D5D5D5;
  background-color: #FFFFFF;
  padding: 5px 10px;
  font-size: 16px;
  font-weight: bold;
}

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

div.marketing_form table tr.fields td, div.marketing_form table tr.fields th {
  padding-top: 5px;
}

div.marketing_form td {
  font-size: 14px;
  line-height: 33px;
  vertical-align: top;
}

div.marketing_form td.label {
  font-weight: bold;
  margin-right: 5px;
  text-align: right;
  width: 200px;
  padding-right: 10px;
}

div.marketing_form table th{
  font-weight: bold;
  margin-right: 5px;
  text-align: right;
  width: 200px;
  padding-right: 10px;
}

div.marketing_form td.label.not_required {
  font-weight: normal;
}

div.marketing_form td.label.vtop {
  vertical-align: top;
}

div.marketing_form td.check_box {
  width: 15px;
  vertical-align: top;
  font-weight: bold;
  margin-right: 5px;
  text-align: right;
  padding-right: 10px;
}

div.marketing_form td.collapse_width {
  width: 1px;
  vertical-align: top;
}

div.marketing_form input {
  font-size: 14px;
}

div.marketing_form textarea {
  font-size: 14px;
}

div.marketing_form  div.formError {
  color: red;
  font-size: 12px;
  font-style: italic;
  line-height: 12px;
  white-space: nowrap;
}

div.marketing_form div.fieldWithErrors{
  display: inline;
}

div.marketing_form div.address_container {
  margin-bottom: 30px;
}

div.address_container h3 {
  margin-bottom: 10px;
}

div.marketing_form div.address {
  float:left;
  margin-left: 10px;
}

div.marketing_form div.phone {
  margin-left: 60px;
  float:left;
}

div.submit_button {
  margin-top: 15px;
}

div.submit_button input {
  font-size: 20px;
}

div.thank_you {
  border: 1px solid #D5D5D5;
  background: #F2F4F3 none repeat scroll 0 0;
  margin-top: 15px;
  padding: 10px;
  text-align: center;
}

/* Footer */
div.footer {
  margin: 0;
  border-top: 1px solid #D5D5D5;
  background-color: #E5E5E5;
  height: 150px;
  font-size: 12px;
}

div.footer_content {
  margin-left: auto;
  margin-right: auto;
  width: 900px;
  padding-top: 15px;
}

div.footer p {
  margin-bottom: 12px;
  text-align: center;
}

/* Error */
div.fieldWithErrors input {
  background-color: #FFBFBF;
}

div.fieldWithErrors textarea {
  background-color: #FFBFBF;
}

div.formError {
  color: red;
  font-size: 10px;
  font-style: italic;
}

/*
 * Columns
 */
 
div.center_column {
  width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/*
 * Pricing Page
 */
#pricing_page div.masthead { text-align: center; }
#pricing_page div.masthead h2 {
  font-size: 32px;
}
#pricing_page div.masthead h3 {
  color: #39892F;
}

div.price_background {
  /*background-color: #F2F4F3;*/
  margin: 25px 0 10px 0;
  padding: 10px;
}

div#asterisk {
  margin-top: 10px;
  float: left;
  font-size: 12px;
}
div#usd {
  margin-top: 10px;
  float: right;
  font-size: 12px;
  font-weight: bold;
}

div.yellow_msg {
  background-color: #FFFF00;
  padding: 5px;
  margin-left: auto;
  margin-right: auto;
  width: 600px;
  text-align: center;
}

a.sign_up_big {
  background: transparent url(/images/buttons/sign_up_for_risk_free.png) no-repeat scroll left center;
  height: 79px;
  width: 302px;
  display: block;
  overflow: hidden;
  text-indent: -1000px;
  margin: 10px auto 0 auto;
}

#pricing_table {
  width: 100%;
  border-collapse:collapse;
  font-size: 14px;
}
#pricing_table th {
  padding: 5px 10px;
  text-align: center;
  border-left: 1px solid #CCCCCC;
  border-right: 1px solid #CCCCCC;
  border-bottom: 1px solid #CCCCCC;
}
#pricing_table td {
  padding: 5px 10px;
  text-align: center;
  border: 1px solid #CCCCCC;
}
#pricing_table th h2 {
  font-size: 26px;
  font-weight: normal;
  padding: 0;
  margin: 0;
}
#pricing_table td.lheading {
  text-align: left;
  border-left: none;
}
#pricing_table th.last, #pricing_table td.last {
  border-right: none;
}
#pricing_table td.lheading span.star { font-size: 11px; }

#pricing_faq {
  padding: 10px 0px;
  clear: both;
  padding: 10px 20px 0 20px;
  background-color: #EEE;
}
#pricing_faq h2 { margin-bottom: 20px; }
#pricing_faq h3 {
  font-size: 15px;
}
#pricing_faq div.rightcol {
  float: right;
  text-align: left;
  width: 450px;
}
#pricing_faq div.leftcol {
  float: left;
  text-align: left;
  width: 450px;
}
#pricing_faq p {
  font-size: 13px;
  color: #434343;
  line-height: 20px;
  margin: 5px 0 15px 0;
}

#legal {
  color: #999999;
  font-size: 12px;
}