/*
 * Overall grid and layout
 */

/* Page types */
#call-form          { width: 40%; }
#call-story         { width: 60%; }
#donation-contact   { width: 40%; }
#donation-details   { width: 60%; }
#event-attend-form  { width: 40%; }
#event-create-form  { width: 50%; }
#letter-form        { width: 40%; }
#letter-story       { width: 60%; }
#letter-story .box  { width: 100% }
#letter-story textarea { font-size: 1.2em; height: 14em; }
#lte-prelim         { width: 40%; }
#lte-letter         { width: 100%; }
#lte-help           { width: 100%; }
#petition-box       { width: 60%; }
#petition-story     { width: 60%; }
#petition-form      { width: 40%; }
#recurring-cancel   { width: 60%; }
#recurring-update   { width: 60%; }
#signup-form        { width: 40%; }
#signup-story       { width: 60%; }
#survey-contact     { width: 40%; }
#survey-questions   { width: 60%; }
#taf-form           { width: 50%; }
#taf-preview        { width: 50%; }
#thanks-notaf       { width: 100%; }
#unsub-form         { width: 50%; }

/* [whipcount/login/account tools/recurring cancel/update] */

/* Box sizing so percents work the way we want. Our JS makes it work on IE7 */
.container, .col, input, select, textarea {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

/* Sizes and padding */
body { margin: 0px; }
.container { 
  width: 900px; 
  padding: 0px 20px; 
  max-width: 100%;
}
.col, .border.col {  padding: 5px 15px; margin: 0px !important; }
.col { float: left; }
.col.end { float: right; }
.area { padding: 15px; }

/* Headers */
.header { border-bottom: solid #ddd 1px; padding: 10px; }
h1, h2, h3 { margin: 0px; font-weight: bold; line-height: 1.2em; padding: 15px; color: rgb(80, 80, 80); }
.header h1 { padding: 5px; }
.col h2, .col h2, .area h2, .area h3 { padding: 0px; }

/* Footer */
.footer-holder { padding-top: 15px; }
.footer { border-top: solid #ddd 1px; 
    padding: 15px; 
    margin-top: 25px; 
    text-align: right; 
}
.footer span:before { content: "\00b7\00a0"; }
.footer span:first-child:before { content: ""; }
.footer-holder { clear: both; }

.ak-rtl .footer { text-align: left; }
.ak-rtl .col { float: right; }
.ak-rtl .col.end { float: left; }

/* 
 * Details: specific form elements, input styles, default font
 */

/* Emphasized box, para spacing, headers */
.box { background-color: rgb(200,200,200); padding: 20px; }
.col p, .box p, .area p { margin: 1em 0px 0px 0px; }
.col p:first-child, .box p:first-child, .area p:first-child { margin: 0px; }

/* Input and text styles */
fieldset { padding-top: 0.5em; border: 1px solid #aaa; border-radius: 10px; }
legend { margin-left: -5px; padding: 0px 5px; }
textarea { height: 4em; width: 100%; }
input, select, textarea, .taf_body { border-radius: 4px; }
select { padding: 3px 0px; }
p, div { line-height: 1.7em; }
p { margin-top: 1.5em; margin-bottom: 0em; }
label { font-weight: normal; }
button { float: none; /* Blueprint makes them float. */ } 
button:hover { background-color: #DEDEDE; border-color: #CECECE; color: #464646; }

/* Thanks and tellafriend */
.fb-like { float:right; clear:right; border:none; overflow:hidden; width:300px; height:80px; padding-top: 5px; }
.floating-progress { float: right; clear: right; width: 300px /* f/ie7 */; margin-left: 0px; margin-right: 15px; }
#taf { clear: both; }
#id_comment, #id_taf_emails { height: 4em; width: 100%; }
#id_taf_note { height: 6em; }
.area #progress { margin-right: 0px; }

/* Donate */
#card_num { width: 100%; }
#card_code_box, #exp_date_box { width: 50%; float: left; }
#progress { margin: 15px; }
#product_list td, #candidate_list td { vertical-align: top; }
#product_list th, #candidate_list th { background-color: #eee; }
#products-label, #candidates-label { position: absolute; left: -999em; }
.candidate-portrait { float: left; margin: 0px 10px 0px 0px; }
.candidate-name, .product-name { font-weight: bold; }
.candidate-amount, .product-quantity, .product-amount { width: 1%; }
.donation-total { background-color: yellow; padding: 5px; font-weight: bold; }

/* LTE */
#lte-submit { clear: both; }

/* A default font */
p, body, input, select, textarea, button, div {
  font-size: 13px; 
  font-family: Georgia, serif;
}

/* Changes for mobile */
@media (max-width:750px) {
  body {  background-image: none; }
  .container, .area { padding: 0px; }
  .col, .container, .area, .sidebar { width: 100% !important; }
  .border { border-right: none !important; }
  .ak-mobile-lead, .ak-continued { position: static !important; left: auto !important; }
  
  /* a mobile screen isn't wide enough for two-column grid of labels/inputs, so flatten it */
  .ak-labels-before label, .ak-labels-before input, .ak-labels-before select, .ak-labels-before textarea, .ak-labels-before .ak-err { width: 100%; }
  .ak-labels-before label { text-align: left; }
  .ak-rtl .ak-labels-before label { text-align: right; }
}