/*RESET*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
body {
  line-height: 1.5;
}
table {
  border-collapse: separate;
  border-spacing: 0;
}
caption, th, td {
  text-align: left;
  font-weight: normal;
}
table, td, th {
  vertical-align: middle;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: "";
}
blockquote, q {
  quotes: "" "";
}
a img {
  border: none;
}

pre,code,tt { 
  font: 0.8em 'andale mono', 'lucida console', monospace; line-height: 1.5; 
  color: navy;
  display: block;
  border: 1px solid #cee8ff;
  background-color: #eff8ff;
  padding: 5px;
}



pre.textmate-source {
	word-wrap: break-word;
	white-space: pre;
	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -o-pre-wrap;
}

pre.textmate-source .linenum {
	width: 75px;
	padding: 0.1em 1em 0.2em 0;
	color: #888;
	background-color: #eee;
}
pre.textmate-source span {
   padding-top: 0.2em;
   padding-bottom: 0.1em;
}
pre.textmate-source ::selection {
	background-color: #FFD793;
}
/* Comment */
pre.textmate-source .comment {
	color: #386F90;
	background-color: rgba(221, 238, 254, 0.95);
}

/* Variable */
pre.textmate-source .variable {
	color: #20498D;
}

/* Keyword */
pre.textmate-source .keyword {
	color: #5B91E1;
	font-weight: bold;
}

/* Number */
pre.textmate-source .constant_numeric {
	color: #C34F0A;
	font-weight: bold;
}

/* User-defined constant */
pre.textmate-source .constant {
	color: #C5060B;
}

/* Built-in constant */
pre.textmate-source .constant_language {
	color: #585CF6;
}

/* String */
pre.textmate-source .string {
	color: #840E0B;
}

/* String interpolation */
pre.textmate-source .constant_character_escaped, pre.textmate-source .constant_character_escape, pre.textmate-source .string .source {
	color: #26B31A;
}

/* Preprocessor line */
pre.textmate-source .other_preprocessor {
	color: #1A921C;
}

/* Preprocessor directive */
pre.textmate-source .entity_name_preprocessor {
	color: #0C450D;
	font-weight: bold;
}

/* Function name */
pre.textmate-source .entity_name_function, pre.textmate-source .keyword_other_name-of-parameter_objc {
	color: #1B4B9D;
	font-weight: bold;
}

/* Class name */
pre.textmate-source .entity_name_class {
	font-style: italic;
}

/* Inherited class name */
pre.textmate-source .entity_other_inherited-class {
	font-style: italic;
}

/* Function parameter */
pre.textmate-source .variable_parameter {
	font-style: italic;
}

/* Function argument and result types */
pre.textmate-source .storage_type_method {
	color: #70727E;
}

/* Section */
pre.textmate-source .meta_section .entity_name_section, pre.textmate-source .declaration_section .entity_name_section {
	font-style: italic;
}

/* Library function */
pre.textmate-source .support_function {
	color: #3C4C72;
	font-weight: bold;
}

/* Library object */
pre.textmate-source .support_class, pre.textmate-source .support_type {
	color: #2D5579;
	font-weight: bold;
}

/* Library constant */
pre.textmate-source .support_constant {
	color: #619A1C;
	font-weight: bold;
}

/* Library variable */
pre.textmate-source .support_other_variable {
	color: #21439C;
	font-weight: bold;
}

/* JS: Operator */
pre.textmate-source .keyword_operator_js {
	color: #687687;
}

/* Invalid */
pre.textmate-source .invalid {
	color: #FFFFFF;
	background-color: #990000;
}

/* Invalid trailing whitespace */
pre.textmate-source .invalid_trailing-whitespace {
	background-color: #FFD0D0;
}

/* Embedded source */
pre.textmate-source .text .source, pre.textmate-source .string_unquoted {
	background-color: rgba(66, 127, 245, 0.19);
}

/* Markup XML declaration */
pre.textmate-source .meta_xml-processing, pre.textmate-source .declaration_xml-processing {
	color: #68685B;
}

/* Markup DOCTYPE */
pre.textmate-source .meta_doctype, pre.textmate-source .declaration_doctype {
	color: #888888;
}

/* Markup DTD */
pre.textmate-source .meta_doctype_DTD, pre.textmate-source .declaration_doctype_DTD {
	font-style: italic;
}

/* Markup tag */
pre.textmate-source .meta_tag, pre.textmate-source .declaration_tag {
	color: #1C3981;
}

/* Markup name of tag */
pre.textmate-source .entity_name_tag {
	color: #001D56;
	font-weight: bold;
}

/* Markup tag attribute */
pre.textmate-source .entity_other_attribute-name {
	color: #000000;
	font-style: italic;
}

/* Markup: Heading */
pre.textmate-source .markup_heading {
	color: #0C07FF;
	font-weight: bold;
}

/* Markup: Quote */
pre.textmate-source .markup_quote {
	color: #000000;
	font-style: italic;
}

/* Markup: List */
pre.textmate-source .markup_list {
	color: #B90690;
}

code span.comment {
  color: #666;
  font-style: italic;
}

#zoom a { border: none; }
.clearfix:after, .container:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden;
}
.clearfix, .container {
  display: block;
}
.clear {
  clear: both;
}

h1 {
  font-size: 2em;
  font-weight: bold;
  color: #333;
}

a {
  color: #0072bc;
  text-decoration: none;
  border-bottom: 1px solid #ccc;
}

a:hover {
  color: #c00;
  text-decoration: none;
  border-bottom: 2px solid #ccc;
}

.empty {
  color: #ccc;
  font-style: italic;
}

span.highlight {
  background-color: #ffffc1;
}
.inline_notice {
  background-color: #F90;
  color: #fff;
  padding: 2px;
  margin-right: 6px;
  text-transform: uppercase;
}

.small {
  font-size: 0.8em;
}

.regular {
  font-weight: normal;
  font-size: 0.9em;
}


.green {
  color: #060;
  font-weight: bold;
}

.red {
  color: #c00;
  font-weight: bold;
}

.crossout {
  text-decoration: line-through;
}

.message_notice {
  margin: 15px 0;
  padding: 10px 15px;
  font-size: 0.9em;
  font-weight: bold;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
}

.error, .notice, .success {
  padding: 10px 15px;
  margin-bottom: 1em;
  border: 2px solid #ddd;
}

.error {
  background: #FBE3E4;
  color: #990900;
  border-color: #FBC2C4;
}
.notice {
  background: #FFF6BF;
  color: #514721;
  border-color: #FFD324;
}
.success {
  background: #E6EFC2;
  color: #264409;
  border-color: #C6D880;
}
.error a {
  color: #990900;
}
.notice a {
  color: #514721;
}
.success a {
  color: #264409;
}


.empty_content {
  margin: 30px 0;
  padding: 30px 0;
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
  color: #ccc;
  font-style: italic;
}

#loading_indicator, #done_indicator , #error_indicator {
  font-size: 0.9em;
}

div.legend {
  position: relative;
  border-bottom: 2px solid #0072bc;
  margin-bottom: 8px;
  margin-top: 28px;
}

div.danger {
  border-bottom: 2px solid #c00;
}

span.danger {
  background-color: #fee;
  color: #c00;
}

div.legend span {
  text-transform: uppercase;
  font-weight: bold;
  color: #333;
  font-size: 0.8em;
  position: absolute;
  top: -16px;
  right: 18px;
  display: block;
  padding: 8px;
  background-color: #fff;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11pt;
  color: #666;
}

.textfield {
  border: 1px solid #ccc;
  padding: 5px;
  background: url('/images/bg_tab_active.gif') top left repeat-x;
}

.field {
  margin: 5px 0;
}

.pipe {
  color: #aaa;
  margin-left: 5px;
  margin-right: 5px;
}


/* ------------
Error
------------- */
div.fieldWithErrors {
  display: inline;
}

div.fieldWithErrors label {
  color: #c00 !important;
  font-weight: bold !important;
}

div.fieldWithErrors input,
div.fieldWithErrors select {
  border-color: #c00 !important;
}
div.formError {
  color: #c00;
  font-style: italic;
}

/* Push Inbox Buttons */

button {
  border: 0;
  cursor: pointer;
  font-weight: bold;
  padding: 0 14px 0 0;
  text-align: center;
}

button::-moz-focus-inner {
  padding: 0;
  border: none; /* overrides extra padding in Firefox */
}

button span {
  position: relative;
  display: block;
  white-space: nowrap;
  padding: 0 0 0 14px;
  font-size: 12px;
  text-shadow: #fff 0px 1px 0px;
}

button.submit_button {
  background: url('/images/bg_button_right.gif') right no-repeat;
}

button.submit_button span {
  height: 30px;
  line-height: 30px;
  background: url('/images/bg_button_left.gif') left no-repeat;
}

a.submit_button {
  border: none;
  font-size: 0.8em;
  color: #333;
  display: block;
  float: left;
  cursor: pointer;
  font-weight: bold;
  padding: 0 14px 0 0;
  text-align: center;
  height: 30px;
  line-height: 30px;
  background: url('/images/bg_button_right.gif') right no-repeat;
  text-decoration: none;
  margin-right: 10px;
}

a.submit_button:hover {
  color: #000;
}

a.submit_button span {
  display: block;
  height: 30px;
  line-height: 30px;
  background: url('/images/bg_button_left.gif') left no-repeat;
  padding: 0 0 0 14px;
  text-shadow: #fff 0px 1px 0px;
}

/* Buttons Images */

.send_message_button {
  padding-left: 25px;
  background: url('/images/icon_push_inbox.gif') left center no-repeat;
}

.add_button {
  padding-left: 20px;
  background: url('/images/icon_add.gif') left center no-repeat;
}

/*
button.submit_button:hover {
background: url(images/btn_blue_right_hover.gif) right no-repeat;
}
button.submit_button:hover span {
background: url(images/btn_blue_left_hover.gif) left no-repeat;
}
*/

.f_l {
  float: left;
}
.f_r {
  float: right;
}
.airmail_hr {
  margin-top: 10px;
  margin-bottom: 10px;
  height: 3px;
  background: url('/images/bg_airmail.gif') top left repeat-x;
}

.page {
  margin: 15px 68px;
}


#header_outer {
  height: 205px;
  background: url('/images/bg_header.gif') bottom left repeat-x;
}

#header {
  height: 205px;
  background: url('/images/bg_cloud.gif') bottom center no-repeat;
}

#header_inner {
  position: relative;
  height: 205px;
  width: 888px;
  margin: auto;
}

#header_inner #logo {
  position: absolute;
  top: 38px;
  left: 50px;
}

#header_inner #logo a {
  border: none;
}

#user_panel,
#sign_in_panel,
#download_panel {
  font-size: 0.9em;
  color: #333;
}

#user_panel,
#download_panel {
  position: absolute;
  height: 34px;
  width: 216px;
  right: 50px;
  top: 0px;
  background: url('/images/bg_dropdown.gif') top center no-repeat;
  line-height: 30px;
  padding-left: 25px;
  padding-right: 25px;
}

#download_panel .download_link,
#download_panel #sign_in_link {
  text-decoration: none;
  color: #333;
}

#download_panel .download_link {
  background: url('/images/arrow_down.png') left center no-repeat;
  padding-left: 20px;
  padding-top: 2px;
  padding-bottom: 2px;
}

#sign_in_panel {
  position: absolute;
  right: 50px;
  top: -94px;
  width: 266px;
}

#sign_in_panel .upper {
  background: url('/images/bg_dropdown_panel.png') left center repeat-y;
  width: 266px;
  height: 60px;
}

#sign_in_panel .lower {
  background: url('/images/bg_dropdown.png') top center no-repeat;
  width: 266px;
  height: 34px;
}

#sign_in_panel .form {
  padding: 10px 15px;
}


#sign_in_panel .form label {
  text-transform: uppercase;
  font-size: 0.8em;
  font-weight: bold;
  color: #aaa;
}

#sign_in_panel .form input {
  width: 100px;
}

#sign_in_panel .submit {
  padding: 0px 15px;
}

#body {
  width: 888px;
  margin: auto;
  padding: 30px 0px;
}


#intro {
  margin-top: 30px;
  height: 260px;
}

#intro #iphone {
  float: left;
  height: 250px;
  width: 35%;
}

#intro #iphone #screen {
  background: url('/images/home_iphone.png') 0px 0px no-repeat;
  width: 131px;
  height: 242px;
  margin-left: 50px;
  position: relative;
}

#intro #iphone #screen #slide_wrapper {
  width: 108px;
  height: 162px;
  position: absolute;
  left: 12px;
  top: 40px;
  overflow: hidden;
}

#intro #iphone #screen #slide_wrapper #slide {
  position: absolute;
  width: 324px;
  height: 162px;
}




#intro #intro_text {
  width: 65%;
  float: left;
  margin-top: 35px;
}

#intro #intro_text h1 {
  text-indent: -9999px;
  height: 50px;
  margin-bottom: 10px;
  background: url('/images/home_banner_title.png') top left no-repeat;
}

#intro #intro_text h2 {
  text-indent: -9999px;
  height: 50px;
  margin-bottom: 20px;
  background: url('/images/home_banner_detail.png') top left no-repeat;
}

#intro #intro_text #home_button { 
}

#intro #intro_text #home_button a {
  border: none;
}

#intro a {
  border: none;
}


#homepage #intro strong {
  font-weight: bold;
  color: #004080;
}


#homepage .center_hr {
  height: 28px;
  background: url('/images/home_banner_shadow.png') top center no-repeat;
  margin-top: 10px;
  margin-bottom: 60px;
}

.highlight a { border: none; }

#highlights .highlight {
  width: 50%;
  float: left;
  margin-bottom: 20px;
}

#highlights .highlight .icon {
  width: 15%;
  float: left;
  text-align: center;
}

#highlights .highlight .detail {
  width: 85%;
  float: left;
}

#highlights .highlight .detail a {
  color: #666;
}

#highlights .highlight p {
  font-size: 0.9em;
  height: 60px;
  margin-right: 10px;
}

#highlights h2 {
  text-indent: -9999px;
  height: 25px;
  margin-top: 2px;
  margin-bottom: 2px;
}

#highlights #h_instant_delivery {
  background: url('/images/h_home_sub_instant_delivery.gif') top left no-repeat;
}

#highlights #h_sleep_hours {
  background: url('/images/h_home_sub_sleep_hours.gif') top left no-repeat;
}

#highlights #h_restful_api {
  background: url('/images/h_home_sub_restful_api.gif') top left no-repeat;
}

#highlights #h_pin_and_keys {
  background: url('/images/h_home_sub_pin_key.gif') top left no-repeat;
}

#highlights #h_website_plugins {
  background: url('/images/h_home_sub_website_plugins.gif') top left no-repeat;
}

#highlights #h_multiple_sources {
  background: url('/images/h_home_sub_multiple_sources.gif') top left no-repeat;
}

/* Footer */

#footer {
  background-color: #f2f2f2;
  border-top: 1px solid #ddd;
}

#footer .content {
  width: 788px;
  margin: auto;
  padding-top: 30px;
  padding-bottom: 30px;
}

#footer #contact_form {
  width: 398px;
}

#footer #twitter {
  width: 390px;
}


#footer h2 {
  font-weight: bold;
  font-size: 1.25em;
  color: #666;
  text-transform: uppercase;
  text-shadow: #fff 0px 1px 0px ;
}

/* Session */

#sign_in {
}


.sign_in_form {
  margin: 60px auto;
  width: 388px;
}


#sign_in .sign_in_form .field label {
  font-size: 1.5em;
  color: #666;
}

#sign_in .sign_in_form input.textfield {
  width: 380px;
  font-size: 1.5em;
}

#sign_in .note {
  font-size: 0.8em;
  color: #aaa;
  margin-left: 22px;
}

#sign_in_remember_me {
  width: 380px;
  padding: 5px;
  font-size: 0.9em;
}

#sign_in .submit {
  margin-top: 10px;
}

#sign_in .f_r {
  line-height: 30px;
}

.border_box {
  border: 1px solid #ddd;
  background-color: #eee;
}


/* User Page */
.user_page {
  margin-bottom: 30px;
}

.user_page h1 {
}

.tab {
  border-bottom: 2px solid #ccc;
  height: 52px;
  line-height: 52px;
  margin-bottom: 10px;
  position: relative;
}

.tab .title {
  float: left;
}
.tab .items {
  float: right;
  height: 52px;
  margin-right: 28px;
}

.tab .items ul {
  list-style: none;
  position: relative;
  height: 32px;
}

.tab .items ul li {
  font-size: 0.9em;
  float: left;
  height: 32px;
  line-height: 32px;
  padding: 0 10px;
  margin: 0 5px;
  margin-top: 20px;
}


.tab .items ul li.active {
  margin-top: 19px;
  border: 1px solid #ccc;
  background-color: #fff;
  background: url('/images/bg_tab_active.gif') top left repeat-x;
  border-bottom: 2px solid #fff;
  -webkit-border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
}

.tab .items ul li.active a {
  font-weight: bold;
  text-decoration: none;
}

.tab .items ul li a {
  border: none;
  padding-left: 20px;
  padding-top: 2px;
  padding-bottom: 2px;
}


#tab_messages a {
  background: url('/images/icon_tab_email.png') left center no-repeat;
}

#tab_contacts a {
  background: url('/images/icon_tab_contact.png') left center no-repeat;
}

#tab_keys a {
  background: url('/images/icon_tab_key.png') left center no-repeat;
}

#tab_devices a {
  background: url('/images/icon_tab_iphone.png') left center no-repeat;
}

#tab_settings a {
  background: url('/images/icon_tab_setting.png') left center no-repeat;
}

#tab_account a {
  background: url('/images/icon_tab_setting.png') left center no-repeat;
}


/* Toolbar */
.toolbar {
  margin: 15px 0;
  margin-bottom: 30px;
}
.toolbar .buttons {
  float: left;
}

.toolbar .danger_action {
  float: right;
}
.toolbar .search {
  float: right;
}

.toolbar .search .textfield {
  background: url('/images/icon_tab_magnifier.png') 5px center no-repeat;
  padding-left: 22px;
  width: 180px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
}

.toolbar .search .searching {
  background: url('/images/indicator.gif') 5px center no-repeat;
}



/* Show Message */
.item_field {
  margin: 10px 0;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.submit_field {
  margin: 10px 0;
  padding-bottom: 10px;
}

.submit_field .label,
.item_field .label {
  float: left;
  width: 80px;
  font-weight: bold;
  color: #aaa;
}
.submit_field .content,
.item_field .content {
  color: #333;
}

.item_field .textarea {
  padding: 0 15px;
  font-size: 1.2em;
  border: 1px solid #ddd;
  background-color: #f2f2f2;
  min-height: 200px;
}

.item_field .textarea p {
  margin: 15px 0;
}

/* Compose */
#new_message div.airmail_hr {
  margin: 20px 0;
}

#compose_form .field textarea {
  height: 220px;
}

#compose_form {
  float: left;
  width: 450px;
}


#compose_form .textfield {
  width: 330px;
  font-size: 1.0em;
}

#compose_form .submit_field .label,
#compose_form .item_field .label {
  width: 100px;
}

#compose_form .item_field .content {
  float: left;
}

#compose_form textarea {
  min-height: 220px;
}

#compose_form select {
  border: 1px solid #ccc;
  font-size: 1.0em;
  padding: 5px;
  margin: 5px 0;
}

#compose_form .label {
  color: #666;
  margin-top: 6px;
  font-weight: normal;
}

#compose_form .item_field {
  border-bottom: none;
  padding: 0;
  margin: 5px 0;
}
#compose_form .active_field {
  border-bottom: 1px solid #aaa;
}
#compose_form .active_field .label {
  color: #0072bc;
  font-weight: bold;
}

#compose_help {
  float: right;
  width: 290px;
}

#compose_help .help {
  margin: 15px;
}

#compose_help .help h2 {
  color: #333;
  padding-left: 22px;
  background: url('/images/icon_lightbulb.png') 0px 3px no-repeat;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

#compose_help ul {
  margin: 0;
  padding: 0;
  font-size: 0.8em;
  list-style: none;
}

#compose_help li {
  padding: 0;
  margin: 10px 0;
  padding-left: 20px;
  background: url('/images/bullet_go.png') 0px 1px no-repeat;
}

/* Sent */
#sent {
  margin: 100px 0;
}

#sent .image {
  float: left;
  width: 200px;
  text-align: center;
}

#sent .content {
  float: right;
  width: 500px;
  color: #333;
}

#sent .content {
  padding-top: 10px;
}

#sent .content div {
  margin: 15px 0;
}

/* Item List */
ul.item_list {
  list-style: none;
}

ul.item_list li {
  list-style: none;
  height: 70px;
  border-bottom: 1px solid #ddd;
  background: url('/images/bg_item.gif') left 15px repeat-x;
}

.item_list li span.item_content {
  display: block;
  padding: 10px;
}

.item_list li.pager {
  background: none;
  font-size: 1.2em;
  font-weight: bold;
  height: 50px;
  border-bottom: none;
}

.item_list li.pager span.pager_control {
  display: block;
  line-height: 30px;
}

.item_list li.pager span.pager_indicator {
  display: block;
  line-height: 30px;
  padding-left: 25px;
  background: url('/images/indicator.gif') left center no-repeat;
  color: #999;
}

.item_list li span.arrow {
  display: block;
  float: right;
  width: 20px;
  height: 50px;
  background: url('/images/icon_arrow.png') center right no-repeat;
}

/* Message List*/
#message_list {
  margin: 30px 0;
}

#message_list li span.icon {
  display: block;
  float: left;
  width: 35px;
  padding: 18px 5px 0 5px;
}


#message_list li span.content {
  display: block;
  float: left;
  margin-top: 8px;
}

#message_list li span.timestamp {
  display: block;
  float: right;
  font-size: 0.9em;
  line-height: 50px;
  color: #aaa;
}

#message_list li:hover span.timestamp {
  color: #0072bc;
}

#message_list li span.title {
  display: block;
  font-weight: bold;
  font-size: 1em;
}

#message_list li span.title a {
  color: #000;
}

#message_list li span.author {
  display: block;
  font-size: 0.8em;
  color: #555;
}

#message_list li.unread {
  background: url('/images/bg_item_unread.gif') left 15px repeat-x;
  border-bottom: 1px solid #fc0;
}

#message_list li.unread span.title a {
  color: #c00;
}



/* Contact List */
#contact_list {
  margin: 30px 0;
}

#contact_list li span.content {
  display: block;
  float: left;
  margin-top: 5px;
  margin-left: 10px;
}

#contact_list li span.content .title {
  display: block;
  font-size: 1.2em;
  font-weight: bold;
}
#contact_list li span.content .pin {
  display: block;
  font-size: 0.8em;
}
#contact_list li span.action {
  display: block;
  float: right;
  font-size: 0.9em;
  line-height: 50px;
  color: #aaa;
}

#contact_list li:hover span.action {
  color: #0072bc;
}


/* Show Keys */
#key_list li span.icon {
  display: block;
  float: left;
  width: 60px;
  padding: 15px 5px 0 5px;
}

#key_list li span.content {
  display: block;
  float: left;
  line-height: 50px;
  font-size: 1.2em;
  font-weight: bold;
}

#key_list li span.switch,
#key_list li span.counter,
#key_list li span.expire {
  float: right;
  display: block;
  height: 22px;
  line-height: 22px;
  margin-top: 14px;
  font-size: 0.75em;
  font-weight: bold;
  color: #333;
}

#key_list li span.switch {
  width: 80px;
  border: 1px solid #ddd;
  background-color: #eee;
  margin-left: 10px;
}

#key_list li span.switch_control {
  padding-left: 5px;
}

#key_list li span.switch_indicator {
  display: block;
  height: 22px;
  background: url('/images/indicator_key.gif') center center no-repeat;
}

#key_list li span.counter {
  border: 1px solid #ddd;
  padding: 0 10px;
  background-color: #fff;
  border-right: none;
}

#key_list li span.expire {
  border: 1px solid #ddd;
  padding: 0 10px;
  background-color: #eee;
  border-left: none;
}

#key_list li span.master_pin {
  float: right;
  line-height: 50px;
  padding: 0 10px;
  font-style: italic;
  font-size: 0.9em;
  color: #803900;
}

#key_list li.pin {
  background: url('/images/bg_item_unread.gif') left 15px repeat-x;
  border-bottom: 1px solid #fc0;
}

#key_list li.pin span.content {
  color: #c00;
}

#show_key .item_field .label {
  width: 200px;
}

/* Create key */
.pi_form fieldset {
  padding: 10px;
  border: 1px solid #ddd;
  margin: 10px 0;
  background-color: #eee;
}

.pi_form {
  color: #333;
  font-size: 0.9em;
}

.pi_form label {
  font-size: 1.2em;
  font-weight: bold;
}

.pi_form input, .pi_form select {
  font-size: 1.2em;
}

.pi_form .help {
  color: #666;
  margin-top: 10px;
  border-top: 1px dotted #ccc;
  padding-top: 10px;
  font-size: 0.9em;
}

.pi_form .help strong {
  color: #0072bc;
}

.pi_form legend {
  font-weight: bold;
  float: right;
  color: #bbb;
  border-bottom: 2px solid #ddd;
}

.pi_form .submit_field {
  margin-top: 10px;
}


#key_message_limit {
  width: 100px;
}

#key_form .show_advanced_setting,
#key_form .hide_advanced_setting {
  padding-left: 20px;
  line-height: 30px;
  border: none;
  color: #333;
  font-weight: bold;
}

#key_form .show_advanced_setting {
  background: url('/images/icon_arrow_down.png') left center no-repeat;
}

#key_form .hide_advanced_setting {
  background: url('/images/icon_arrow_up.png') left center no-repeat;
}

#key_form .advanced_setting_field {
  border-bottom: 1px solid #eee;
}

/* Devices */


#device_list li span.icon {
  display: block;
  float: left;
  width: 70px;
  padding: 15px 5px 0 5px;
}

#device_list li span.content {
  display: block;
  float: left;
  margin-top: 8px;
}

#device_list li span.title {
  display: block;
  font-weight: bold;
  font-size: 1em;
}

#device_list li span.title a {
  color: #000;
}

#device_list li span.uuid {
  display: block;
  font-size: 0.8em;
  color: #555;
}


#device_list li span.timestamp {
  display: block;
  float: right;
  font-size: 0.9em;
  line-height: 50px;
  color: #aaa;
}

#device_list li:hover span.timestamp {
  color: #0072bc;
}

#show_device .item_field .label {
  width: 180px;
}

/* Setting */
#account_form {
  margin: 30px 0;
}

#account_form .item_field .label {
  width: 200px;
}

#show_contact .item_field .label {
  width: 120px;
}

/* Footer Form*/

#push_inbox_form {
}

#twitter #tweet {
  margin-bottom: 10px;
  margin-right: 30px;
}

#twitter #tweet li {
  list-style: none;
  display: block;
  background: url('/images/icon_chat.png') 0px 7px no-repeat;
  font-size: 0.9em;
  margin: 5px 0;
  padding: 5px 0;
  padding-left: 22px;
}

#twitter p {
  font-weight: bold;
  font-size: 0.9em;
}

#bottom_toolbar {
  border-top: 1px solid #aaa;
  background-color: #ccc;
}


#bottom_toolbar .content {
  width: 788px;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  height: 60px;
}

#bottom_toolbar #seals {
  float: left;
  width: 150px;
}
#bottom_toolbar #links {
  float: left;
  width : 638px;
  text-align: right;
}

#bottom_toolbar #links ul, 
#bottom_toolbar #links li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#bottom_toolbar #links li {
  list-style: none;
  display: inline;
  line-height: 60px;
  font-size: 0.8em;
  margin-right: 10px;
}

#bottom_toolbar #links,
#bottom_toolbar #links a {
  color: #333;
}

#bottom_toolbar #links a {
  border-bottom: 1px solid #aaa;
}

#bottom_toolbar #links a:hover {
  border-bottom: 2px solid #0072bc;
}

/* Public menu*/
#public_menu {
}

.menu_hr {
  height: 28px;
  background: url('/images/menu_banner_shadow.png') top center no-repeat;
  margin-top: 25px;
}

#public_menu ul {
  list-style: none;
  text-align: center;
  margin-bottom: 50px;
}

#public_menu ul li {
  display: inline;
  list-style: none;
  font-size: 1.2em;
  font-weight: bold;
  margin: 0px 20px;
}

#public_menu ul li .active {
  color: #333;
  padding-bottom: 28px;
  background: url('/images/icon_up.png') bottom center no-repeat;
}

#public_menu ul li a {
  border: none;
}

/* Info page */
.info_page {
}

.info_page h1 {
  color: #0072bc;
  border-bottom: 2px solid #eee;
  font-size: 2em;
  margin-bottom: 30px;
}

/* Prcing */

#pricing table {
  margin: 28px auto;
  width: 80%;
}

#pricing table td {
  padding: 10px 10px;
}

#pricing table thead td {
  font-weight: bold;
  font-size: 1.2em;
  
  border-bottom: 2px solid #0072bc;
  text-transform: uppercase;
}

#pricing table thead td.price {
  text-align: center;
  background-color: #e6f5ff;
  color: #0072bc;
}

#pricing table td.plan {
  width: 60%;
}
#pricing table td.price {
  text-align: center;
  width: 15%;
}
#pricing table td.remark {
  text-align: right;
  width: 25%;
}

#pricing table tbody td {
  border-bottom: 1px solid #eee;
  padding: 15px 10px;
}

#pricing table tbody td.plan {
  color: #333;
  font-weight: bold;
}

#pricing table tbody td.price {
  color: #900000;
  font-weight: bold;
  background-color: #f6f6f6;
}


#pricing table tbody td.remark {
  font-size: 0.9em;
  font-style: italic;
  color: #666;
  text-align: left;
}

#pricing table tfoot a {
  border: none;
}


#pricing table tfoot td {
  text-align: right;
  padding: 15px 10px;
}

#plan_notice {
  text-align: center;
  width: 70%;
  margin: 15px auto;
  font-size: 1.2em;
  color: #000;
}

#plan_note {
  width: 80%;
  margin: auto;
  font-size: 0.8em;
}

/* List */
.content_table_list {
}

.content_table_list ul {
  padding: 15px;
  border: 1px solid #eee;
  background-color: #f6f6f6;
  
  list-style: none;
  font-size: 0.9em;
}

.content_table_list ul li.section {
  font-size: 1.1em;
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: 1px solid #eee;
  margin: 10px auto;
}

.table_list_content {
  margin: 30px auto;
}

.table_list_content h2 {
  font-size: 1.2em;
  color: #aaa;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}

.table_list_content p {
  color: #000;
  font-size: 0.9em;
  margin: 15px auto;
}

/* FAQ */

#faq  {
}
#faq_list, #faq_content {
  width: 80%;
  margin: auto;
}

/* API */
#api_list {
  float: right;
  padding-left: 20px;
  padding-bottom: 20px;
  background-color: #fff;
}
/* Plugins */
#plugins_list {
  float: right;
  padding-left: 20px;
  padding-bottom: 20px;
  background-color: #fff;
}



/* Features*/
#features {}

.feature {
  margin: 50px auto;
  margin-top: 30px;
  border-bottom: 2px solid #eee;
  padding-bottom: 50px;
}

.feature h1 {
  font-size: 2.5em;
  color: #000;
  text-align: center;
  border: none;
  margin-bottom: 5px;
}

.feature h2 {
  width: 85%;
  margin: auto;
  text-align: center;
  margin-bottom: 15px;
  font-size: 1.1em;
  line-height: 1.6;
}

.feature .images {
  text-align: center;
}

.feature .images img {
  margin: auto 5px;
  vertical-align: middle;
}

.feature .images img.iphone {
  padding-top: 25px;
}

.feature h2 strong {
  font-weight: bold;
  background-color: #ffffc1;
  color: #000;
  padding: 2px;
  margin: 2px;
}

.feature .desc {
  font-size: 0.9em;
  width: 60%;
  margin: 5px auto;
  border: 1px solid #cee8ff;
  background-color: #eff8ff;
  color: #1b4b9d;
  padding: 10px;
}

.feature .desc span {
  background-color: #0c0;
  color: #fff;
  font-weight: bold;
  padding: 5px;
  margin-right: 5px;
}

.feature .images a { border: none; }

#feature_top {
  text-align: center;
  font-size: 1em;
  font-weight: bold;
  color: #c00;
}

#feature_top img {
  vertical-align: middle;
}

#feature_bottom {
  text-align: center;
  margin-bottom: 10px;
}
#feature_top a , #feature_bottom a { border: none; }

/* Download */
#download p {
  text-align: center;
  font-size: 2em;
  margin: 100px;
}

/* M */
.m_table {
  font-size: 12px;
  width: 100%;
  margin-bottom: 20px;
}
.m_table td {
  padding: 10px;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}

.m_table thead tr {
  background-color: #f6f6f6;
}

.m_table thead td {
  border-bottom: 2px solid #eee;
  color: #0072bc;
  font-weight: bold;
}

.m_table tbody td {
  border: 0;
  border-bottom: 1px solid #cfcfcf;
}