/*
 * pb.2.css
 * Top-level style sheet for PledgeBank.com.
 * 
 * Copyright (c) 2005 UK Citizens Online Democracy. All rights reserved.
 * Email: matthew@mysociety.org. WWW: http://www.mysociety.org
 *
 * $Id: pb.2.css,v 1.10 2008-09-24 14:36:45 matthew Exp $
 * 
 */

/* Site wide styles */

body {
    text-align: center;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #000000;
    background-color: #ffffff;
}

a:link { color: #522994; }
a:visited { color: #7b52a5; }
a:hover, a:active, a:focus { color: #000000; }

blockquote.noindent {
    font-style: normal;
    margin: 0;
}

th {
    text-align: right;
}

dl {
    margin-left: 2em;
}

dt {
    font-weight: bold;
    margin-top: 0.5em;
}

form {
    margin: 0;
    padding: 3px;
}

form.buttonform {
    padding: 0;
}

textarea, input[type=text] {
    max-width: 100%;
}

input.topbutton {
    margin-bottom: 2px;
}

label {
    cursor: pointer;
}

#pledgeaction label {
    float: left;
    width: 8em;
    font-weight: bold;
}

#pledgeaction select {
    width: 12em;
}

ol li {
    margin: 0;
    padding: 0 0 0.5em 0;
}

/* Header */

h1 {
    font-size: 200%;
    margin: 0;
    padding: 0 10px 0.3em;
    text-align: left;
    color: #ffffff;
    background-color: #9c7bbd;
    border-bottom: solid 1px #522994;
}
h1 #logo {
    text-decoration: none;
}
h1 #logo:hover {
    text-decoration: underline;
}
h1 span#logo_pledge {
    background-color: #9C7BBD;
    color: #ffffff;
}
h1 span#logo_bank, h1 span#logo_zh {
    background-color: #9C7BBD;
    color: #21004A;
}
h1 span#beta {
    font-size: 40%;
    vertical-align: top;
    color: #ffffff;
}
h1 span#countrytitle {
    background-color: #9C7BBD;
    font-size: 40%;
    color: #ffffff;
}

#ms_logo {
    border: none;
    margin-right: 1em;
}

h2 {
    margin-top: 0;
}

.head_with_mast {
    margin-bottom: 0;
}
.head_mast {
    margin-top: 0;
}

#pledgeaction h2 {
    margin-bottom: 0.5em;
}

/* Site wide elements */

.v {
    display: none;
}

#tagline {
    font-size: 50%;
    font-weight: normal;
    font-style: italic;
}

#nav_search {
    background-image: url('/i/grad.png');
    background-repeat: repeat-x;
    background-position: 0 0;
    background-color: #ffffff;
    padding-left: 2em;
    text-align: left;
    font-size:83%;
}

#navforms {
    color: #21004a;
    position: absolute;
    top: 4px; right: 4px;
    font-size: 83%;
}
#navforms form {
    display: inline;
}
#navforms a {
    text-decoration: none;
}

#banner-announcement {
  clear:both;
  color:#fff;
  background-color: #9C7BBD;
  border-bottom: solid 1px #522994;
  border-top: solid 1px #522994;
  font-size:83%;
  padding:0.5em;
  margin-bottom: 1em;
}
#banner-announcement a:visited{
  color: #522994;
}

#language {
    width: 10em;
}

#pbcontent {
    clear: both;
    text-align: left;
    padding: 5px 5% 0;
    margin: 1em auto 0;
    max-width: 70em;
    background-color: #ffffff;
}

#pballfooter {
    padding-top: 1em;
    clear: both;
}

#pbfooter {
    clear: both;
    padding: 3px;
    border-top: solid 1px #c6b5de;
    font-size: 90%;
    width: 50%;
    margin: 0 auto;
}

.fr {
    margin-bottom: 2px;
}

#signedon {
    float: right;
    font-size: 83%;
    padding: 8px 4px 0 0;
    margin: 0;
}

/* Error and success messages */

#error {
    width: 50%;
}
#error, #errors, .finished {
    color: #ff0000;
    background-color: #ffcccc;
    border: solid 2px #990000;
    padding: 3px;
}
.success, .finished {
    margin: 0em auto 0;
    width: 80%;
    padding: 10px;
    text-align: center;
}
.success {
    background-color: #ccffcc;
    border: solid 2px #009900;
}
#yourpledges .success {
    padding: 3px;
}
.finished {
    color: #000000;
}
/* errors is for form errors */
#errors {
    margin: 0 auto 1em;
}
#errors ul {
    padding: 0;
    margin: 0 0 0 1.5em;
}
/* formnote is for non-negative notes at top of page about form filling in */
#formnote {
    margin: 0 auto 1em;
    background-color: #ccffcc;
    border: solid 1px #009900;
    padding: 3px;
}
#formnote ul {
    padding: 0;
    margin: 0 0 0 1.5em;
}
input.error, input[type=text].error, select.error, input[type=radio].error {
    border: solid 2px #990000;
    background-color: #ffcccc;
}

#cancelled {
    margin: 1em auto 0;
    width: 80%;
    padding: 10px;
    text-align: center;
    background-color: #ffcccc;
    border: solid 2px #990000;
}

#notice {
    margin: 1em auto 0;
    width: 80%;
    padding: 10px;
    text-align: center;
    background-color: #ffcc99;
    border: solid 2px #ff9900;
}

/* Front page */

#banner {
    margin-top: 0.5em;
    text-align: center;
    /* background-color: #502993; */
}
#banner img {
    border: solid 4px black;
    border-width: 4px 4px 4px 2px;
}

#tellworld {
    float: left;
    width: 59%;
    padding: 10px;
    background-color: #ffffff;
    background-image: url('/i/people-yay.png');
    background-repeat: no-repeat;
    background-position: 0 0;
}
#tellworld h2 {
    margin-bottom: 0;
    padding-left: 55px;
}
#tellworld h3 {
    margin-top: 0.5em;
    padding-left: 55px;
}

#col {
    width: 33%;
    float: right;
}

#startblurb1 {
    background-image: url('/i/person-idea.png');
    background-repeat: no-repeat;
    background-position: 100% 100%;
}
#startbubble {
    background-image: url('/i/speechbubble-8bit-nomatt.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 97px;
    height: 89px;
    position: absolute;
    left: -2em;
    top: -2em;
}

#startblurb {
    position: relative;
    /*border: solid 2px #ffcc66;*/
    /*border: solid 2px #83131B;
    background-color: #9d1c20;*/
    background-color: #9C7BBD;
    color: #ffffff;
    -moz-border-radius: 2em;
    border: solid 10px #522994;
    margin: 1em 55px 1em 0;
    padding: 15px 10px 10px;
}
#startblurb a {
    color: #FFCC66;
    color: #ffffff;
    padding-left: 30px;
}
#startblurb ul {
    margin-left: 0;
    margin-bottom: 0;
    padding-left: 1.5em;
    line-height: 1.5;
}

#extrablurb {
    border: solid 2px #522994;
    background-color: #9C7BBD;
    padding: 10px;
    margin-top: 1em;
    clear: right;
}
#start {
    margin: 0;
    text-align: center;
    font-size: 150%;
}
.starthowto {
    margin: 0;
    font-size: 150%;
}

#successfulpledges {
    width: 59%;
    float: left;
    padding: 10px;
    margin-top: 1em;
    background-image: url('/i/person-yay.png');
    background-repeat: no-repeat;
    background-position: 90% 0;
}
#successfulpledges ul {
    margin-left: 0;
    padding-left: 0;
}
#successfulpledges li {
    background-repeat: no-repeat;
    background-position: 0 0;
    padding-left: 60px;
}
#successfulpledges li.even {
    background-image: url('/i/iwill-light.png');
}
#successfulpledges li.odd {
    background-image: url('/i/iwill-dark.png');
}
#success_more {
    background-image: url('/i/people-hands.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    padding-left: 75px;
    height: 54px;
}

#currentpledges {
    clear: right;
    margin-top: 1em;
    padding: 10px;
}
#currentpledges ul {
    margin-left: 0;
    padding-left: 0;
}
#currentpledges li {
    background-image: url('/i/person-iwill.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    padding-left: 55px;
}
#currentpledges li:hover, #successfulpledges li:hover, #front #comments li:hover {
    background-color: #f6e5ff;
}

#front {
    background-image: url('/i/light-bg.png');
    background-repeat: no-repeat;
    background-position: 5% 85%;
}

#front #comments {
    margin-top: 1em;
    clear: right;
    font-size: 95%;
    padding: 10px;
}
#front #comments ul {
    margin-left: 0;
    padding-left: 0;
}
#front #comments li {
    background-image: url('/i/comment-bubble.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    padding-left: 40px;
}

#blogexcerpt {
    clear: right;
    margin-top: 1em;
    padding: 10px;
}

/* Setting password/ logging in */

#setpassword {
    text-align: left;
    border: solid 2px #522994;
    background-color: #f6e5ff;
    padding: 10px;
}
#setpassword p {
    margin: 0;
}
#setpassword select {
    width: 12em;
}
#loginradio {
    margin-left: 1em;
}

/* Local alert signup boxes */

#localsignupfrontpage p, #localsignupeverypage p,
#localsignupyourpage p, #localsignupsearchpage p {
    margin: 0;
}
#localsignupfrontpage select, #localsignupeverypage select,
#localsignupyourpage select, #localsignupsearchpage select {
    width: 12em;
}
#localsignupyourpage, #localsignupsearchpage, #localsignupfrontpage {
    border: solid 2px #522994;
    background-color: #f6e5ff;
    padding: 10px;
}
#localsignupfrontpage {
    text-align: center;
    margin-bottom: 1em;
}
#localsignupyourpage {
    border: none;
}
#localsignupeverypage {
    text-align: center;
    margin: 1em auto 0;
    border: none;
    padding: 10px;
    clear: both;
    width: 90%;
    border-top: solid 1px #c6b5de;
    background-image: url('/i/person-envelope.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    min-height: 70px;
}

/* My Pledges page */

#yoursignaturesandpledges {
    width: 59%;
    float: left;
}
#yoursignedpledges li, #yourconnections li {
    margin-bottom: 0.5em;
}
#yoursignedpledges p {
    text-align: right;
    margin: 0.5em 0 0;
}
#yourpledges h2 {
    clear: left;
}
#yourconnections {
    clear: right;
    float: right;
    width: 32%;
}

/* Forms for signing up, new pledges, etc. */

#new #pbcontent form {
    background-color: #c6b5de;
    border: solid 1px #522994;
    width: 45%;
    float: left;
    padding: 10px;
    margin: 1em 0 0.5em 0;
}
#new #preview {
    float: right;
    width: 47%;
}
#new #pledge {
    float: none;
    width: auto;
}

#modifyfaq {
    display: none;
}
#otherdetails {
    clear: left;
}

.pledge .c {
    text-align: center;
}
.pledge {
    border: solid 1px #522994;
    margin: 0 auto 1em;
    padding: 10px;
    background-color: #c6b5de;
}
.pledge p, #pledgeaction p, #new form p, #finished_connections p {
    margin-bottom: 0;
}
#pledgeaction {
    padding: 10px;
    margin: 0.5em 0 0.5em 0;
    float: right;
    width: 45%;
    border: solid 1px #ff8429;
    background-color: #ffffcc;
}
#pledgeaction #name_row {
    margin-top: 0.5em;
    margin-bottom: 0.25em;
}
#email_row {
    margin-top: 0.25em;
    margin-bottom: 0;
}
#email_blurb {
    margin-top: 0;
    margin-left: 4em;
}
#pledgeaction #showname_row {
    margin-top: 0.5em;
    margin-bottom: 0;
}
#pledgeaction #signpledge_row {
    margin-top: 0.5em;
    text-align: right;
}

#col2 #pledgeaction, #col2 #commentform, #col2 #finished_connections {
    float: none;
    width: auto;
}

#tips {
    float: right;
    width: 45%;
    margin-top: 1em;
}
#tips, #pledge, #pledge_main, #all .pledge, #yourpledges .pledge {
    border: solid 1px #522994;
    background-color: #f6e5ff;
    margin-bottom: 1em;
    padding: 8px;
}
#tips li {
    padding: 0;
    margin: 0 0 1em 0;
}

/* An individual pledge page */

#col1 {
    float: left;
    clear: left;
    width: 45%;
}
#col2 {
    float: right;
    width: 47%;
}

#pledge {
    width: 45%;
    float: right;
    margin: 1em 0 0 2em;
}
#pledge_main {
    float: left;
    width: 45%;
    margin: 0.5em auto 1em;
}

#moredetails {
    text-align: left;
    font-size: 95%; 
}
.byareamadeby {
    text-align: left;
    font-size: 83%; 
    font-weight: bold;
}

img.creatorpicture {
    float: left; 
    display: inline;
    margin-right: 10px;
}

#reportpledge {
    font-size: 83%;
    text-align: left;
}

#spreadword {
    border: solid 1px #522994;
    background-color: #c6b5de;
    padding: 10px;
    margin: 1em 0;
}
#spreadword h2 {
    font-size: 125%;
    margin-bottom: 0.5em;
}

#finished_connections {
    padding: 10px;
    margin: 0.5em 0 0.5em 0;
    float: right;
    width: 45%;
    text-align: left;
}
#finished_connections.success {
    background-color: #ccffcc;
    border: solid 1px #009900;
}
#finished_connections.finished {
    background-color: #ffcccc;
    border: solid 1px #990000;
}

#pledgeaction ul, #finished_connections ul {
    margin: 0.5em 0 0 0;
    padding: 0 0 0 1.5em;
}
#spreadword ul {
    line-height: 1.4;
    margin: 0;
    padding: 0 0 0 1.5em;
}
#spreadword a {
    font-weight: bold;
}

#signatories ul, #connections ul, #yourconnections ul {
    margin: 0;
    padding: 0 0 0 1.5em;
}
#signatories, #connections {
    margin-top: 1em;
}

.done {
    background-color: #ffffff;
    color: #006600;
    list-style-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Yes_check.svg/16px-Yes_check.svg.png');
}

.location {
    padding-bottom: 0.5em;
    border-bottom: dotted 1px #999999;
}
.location h3 {
    margin: 0.5em 0;
}
.location_success {
    padding: 4px;
    background-color: #eeffee;
    border: solid 1px #009900;
    margin-top: 1em;
}
.location_success h3 {
    margin: 0 0 0.5em 0;
}
.location_success p {
    float: right; 
    text-align: right;
    font-size: smaller;
    margin: 0;
}
#signatories .location_success ul {
    clear: left;
}

#digg {
    float: right;
}

/* Comments */

ul#comments {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
#comment_preview {
    float: left;
    clear: left;
    width: 45%;
    margin-top: 1em;
}

ul#comments li, #toomany {
    padding-bottom: 0.5em;
    border-bottom: dotted 1px #999999;
    margin-bottom: 0.5em;
}
ul#comments li div {
    margin-top: 0.25em;
    text-align: right;
}

#commentform {
    float: right;
    clear: right;
    width: 45%;
    margin-top: 1em;
}
#Commentform label {
    font-weight: bold;
    float: left;
    width: 8em;
}
#commentform .form_row {
    margin-bottom: 2px;
}

#oldannounce {
    float: right;
    width: 45%;
}

/* Navigation */

ul#nav {
    list-style-type: none;
    position: absolute;
    top: 2.75em;
    right: 0;
    margin: 0 1em 0 0;
    padding: 0;
}
ul#nav a {
    text-decoration: none;
}
ul#nav li {
    margin: 0;
    padding: 1px 5px;
    text-align: center;
    position: relative;
    top: 1px;
    background-color: #ffffff;
    /*background-color: #c6b5de;*/
    color: #21004a;
    margin-left: 0.5em;
    display: inline;
    border: solid 1px #522994;
    border-width: 1px 1px 0 1px;
/*    -moz-border-radius: 8px 8px 0 0; */
}

/* For example, to tell people to check their email */
.loudmessage {
    font-size: 150%; 
    font-weight: bold; 
    text-align: center;
}
.loudmessage strong {
    font-size: 125%;
    font-weight: bolder; 
}
/* ... not quite as loud */
.noisymessage {
    font-size: 125%; 
    font-weight: bold; 
    text-align: center;
}

/* All pledges page */

.pledge-0 {
    float: left;
    clear: left;
    width: 45%;
}
.pledge-1 {
    float: right;
    clear: right;
    width: 45%;
}
#all .pledge {
    margin-top: 1em;
}

.greyed {
    color: #999999;
}
input.greyed, textarea.greyed {
    color: #999999;
}
#sort {
    text-align: center;
}

/* Offline page */

#offline div {
    clear: both;
}
img.l {
    float: left;
    margin: 0 0.5em 0.25em 0;
    border: solid 1px #666666;
}
img.r {
    float: right;
    margin: 0 0 0.25em 0.5em;
    border: solid 1px #666666;
}

/* For /where */

#wherecolumns div {
    float: left; 
    width: 33%; 
}
#wherespecial, #wheremakepledge {
    clear: both;
}

#success #pbcontent div {
    clear: both;
    border-top: dotted 1px #522994;
}

ul#success_list {
    float: right;
    margin: -1em 1em 2em 4em;
}

/* Breadcrumbs when creating a pledge */

ol#breadcrumbs {
    font-size: 80%;
    display: block;
    padding: 0;
    margin-bottom: 1em;
    margin-top: 1em;
    margin-left: 0;
    margin-right: 0;
    text-align: center;
    border-bottom: 1px solid #eee;
    counter-reset: item;
}

ol#breadcrumbs li {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 1em;
    padding-right: 1em;
    color: #888;
    display: inline;
}
ol#breadcrumbs li:before {
    counter-increment: item;
    content: counter(item) ". ";
}
ol#breadcrumbs li.hilight {
    color: #000;
    background-color: #eee;
}
ol#breadcrumbs li.hilight em {
    font-style: normal;
}

/* Search results (used to display pledge lists just about everywhere now, actually) */

.search_results {
    list-style-type: none;
    padding-left: 0;
    margin-left: 2em;
}
.search_results li {
    margin-bottom: 0.5em;
}
.search_results small {
    color: #666666;
}

#local_alert_search {
    margin-left: 3em;
    float: right;
    clear: right;
    margin-top: 1em;
    width: 17em;
}

#next_step {
    font-size: 150%;
}

#sidebar {
    float: right;
    width: 15em;
    border: solid 1px #9c7bbd;
    margin: 3em 0 3em 3em;
}
#sidebar h2 {
    font-size: 120%;
    padding: 2px;
    margin: 0;
    color: #ffffff;
    background-color: #9c7bbd;
}
#sidebar p {
    margin: 1em;
}

ul#promote li {
    margin: 1em 0;
}