<!--

-->
body {
    background-color: #01280d;
    color: #666;
    font: 0.8em Helvetica, arial, sans-serif;
    text-align: center;
    background-image: url(/imgs/bg.png);
    background-repeat: repeat-x;
    margin: 0;
    padding: 0;
}
img {
    border: 0;
}
a:link, a:visited {
    color: #0baf4d;
    background-color: transparent;
    text-decoration: none; 
}
#wrapper {
    text-align: left;
    width: 760px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
}
#head {
    padding: 4px 20px 0 25px;
    margin: 0;
}
#head .foe-logo {
    float: left;
    padding: 10px 0 0 0;
}
#head .cc-logo {
    float: right;
}
#head div.join {
    padding: 20px 150px 0 202px;
    /*orig padding: 20px 200px 0 312px;*/
    font-size: 125%;
    text-align: center;
}
#head div.join strong {
    color: #0baf4d;
    font-weight: bold;
}
#nav {
    border-top: 1px solid #e3e3e3;
    clear:both;
    padding: 4px 20px 1px 15px;
}
#nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#nav li {
    display: inline;
}
#nav li span{
    display: inline;
    color: #0baf4d;
}
#nav li a:link, #nav li a:visited {
    color: #666;
    text-decoration: none;
}
#nav ul#main-nav {
    float:left;
    width: 430px;
    font-size: 95%;
    font-weight: bold;
    
}
#nav ul#main-nav li {
/* jh    padding: 0 0.5em 0 0; */
    padding: 0 0.2em 0 0;
}
#nav ul#main-nav li a {
    /*padding: 0 0.5em 0 0;*/
    margin: 0 0 0 0.2em;
    }
#nav ul#main-nav li span {
    /*padding: 0 0.5em 0 0;*/
    margin: 0 0 0 0;
    }
#nav ul#lang {
    float:right;
    width: 270px;
    text-align:right;
    font-size: 85%;
}
#nav ul#lang li a {
margin: 0 0 0 3px;
}

#banner {
/*jh height: 176px; */
    height: 205px;
    position: relative;
    border-top: 2px solid #06481d;
    border-bottom: 2px solid #06481d;
}
.about-banner {
    background-image: url(/imgs/door.jpg);
    background-repeat: no-repeat;
}
.blog-banner {
    background-image: url(/imgs/green_flags.jpg);
    background-repeat: no-repeat;
}
.petition-banner {
    background-image: url(/imgs/hurricane_220.jpg);
    background-repeat: no-repeat;
}
.privacy-banner {
    background-image: url(/imgs/hurricane_220.jpg);
    background-repeat: no-repeat;
}
.word-banner {
    background-image: url(/imgs/boy.jpg);
    background-repeat: no-repeat;
}
.donation-banner {
    background-image: url(/imgs/boy.jpg);
    background-repeat: no-repeat;
}
.events-banner {
    background-image: url(/imgs/wave_copenhagen.jpg);
    background-repeat: no-repeat;
}


#banner div {
    position: absolute;
    left: 25px;
    bottom: 5px;
    font-size: 247%;
    letter-spacing: -0.02em;
    font-weight: bold;
    color: #fff;
}
#banner div#banner_text_GB {font-size: 247%;}
#banner div#banner_text_FR {font-size: 180%;}
#banner div#banner_text_ES {font-size: 220%;}
#banner div#banner_text_ID {font-size: 190%;}
#banner div#banner_text_DE {font-size: 200%;}
#banner.events-banner #banner_text_FR, #banner.events-banner #banner_text_GB, #banner.events-banner #banner_text_ES, #banner.events-banner #banner_text_ID, #banner.events-banner #banner_text_DE, #banner.events-banner #banner_text_DA {font-size: 247%;}

#main {
    background-color: #eee;
    color: #666;
    padding: 20px 20px 10px 25px;
}
#content {
    float: left;
    width: 350px;
}
h1, h2 {
    color: #0baf4d;
    background-color: transparent;
    font-size: 180%;
    margin: 0;
    padding: 0;
    font-weight: normal;
}
#content p.first {
    font-weight: bold;
}
.un-box {
    background-color: #fff;
    padding: 6px 10px 6px 10px;
    margin: 0 0 1em 0;
}
.un-box a:link, .un-box a:visited, #petition-form .un-box a:link, #petition-form .un-box a:visited {
    display: block;
    color: #78a2bd;
    text-decoration: none;
    margin: 10px 0 0 0;
}
#petition-form .un-box {
    width: 255px;
    float: right;
}
#extras {
    float:right;
    width: 275px;
}
#extras .box {
    color: #666;
    background-color: #fff;
    margin: 0 0 20px 0;
}
#extras .box1 .boxtop {
    background-image: url(/imgs/box-banner-1.jpg);
}
#extras .box2 .boxtop {
    background-image: url(/imgs/box-banner-2.jpg);
}
#extras .box .boxtop {
    position: relative;
    height: 85px;
}
/*orig
#extras .box .boxtop h3 {
    color: #fff;
    font-size: 110%;
    position: absolute;
    bottom: 7px;
    left: 10px;
    margin: 0;
    padding: 0;
}
*/
#extras .box .boxtop h3 {
    color: #fff;
    font-size: 95%;
    position: absolute;
    bottom: 2px;
    left: 7px;
    margin: 0;
    padding: 0;
}
#extras .box .boxtop h3.ESN {
    font-size: 83%;
    left: 3px;
}
#extras .box .boxtop h3.FRA {
    font-size: 83%;
}
#extras .box .boxtop h3.box1-FRA {
    font-size: 66%;
}
#extras .box .boxtop h3.box1-DEU {
    font-size: 70%;
}

#extras .box .inner {
    padding: 0 30px 2em 10px;
}
.imagebox {
    text-align: right;
}
#blog {
    float: right;
    width: 356px;
    margin-right: 100px;
}

#blog-extras {
    float: left;
    width: 165px;
    padding-top: 1em;
}
#blog-extras .boxout {
    font-size: 110%;
    font-weight: bold;
}
.pager .prev {
    float:left;
    width: 100px;
}
.pager .next {
    float: right;
    width: 100px;
    text-align: right;
}
.pager a:link, .pager a:visited {
    color: #666;
    border-bottom: 1px solid #ccc;
    text-decoration: none;
}

ul#posts {
    clear: both;
    margin: 10px 0 1em 0;
    padding: 0;
    list-style: none;
}
ul#posts li {
    padding: 1em 0 1em 0;
}
ul#posts h2 {
    background-image: url(/imgs/dotty-double.gif);
    background-repeat: no-repeat;
    background-position: top left;
    padding: 15px 0 0.6em 0;
    margin: 0;
    font-size: 110%;
    font-weight: bold;
    color: #0baf4d;
}
ul#posts li .meta {
    background-image: url(/imgs/dotty.gif);
    background-repeat: no-repeat;
    background-position: bottom left;
    padding: 0 0 10px 0;
    font-size: 90%;
}
ul#posts li .post {
    padding: 10px 0 0 44px;
}
.chaoslogo {
    clear: both;
    text-align:right;
    padding: 2em 20px 10px 0;
}
.col1 {
    width: 348px;
    float:left;
}
.col2 {
    width: 348px;
    float:right;
}
.col2 .inner {
    padding-left: 71px;
}
.emails {
    background-image: url(/imgs/dotty.gif);
    background-position: bottom left;
    background-repeat: repeat-x;
    margin: 0 0 1em 0;
}
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    clear: both;
    background-image: url(/imgs/dotty.gif);
    background-repeat: repeat-x;
    background-position: bottom left;
    padding: 0 0 4px 0;
    position: relative;
}
#petition-form label {
    float:left;
/* orig width: 69px; */
    width: 119px; 
    padding: 0.4em 0 0 2px;
    color: #666;
}
#petition-form label.origlabel {
    width: 69px;
}

#petition-form .hilite label {
    color: #0baf4d;
}
#petition-form .regular div {
    background-image: url(/imgs/dotty.gif);
    background-repeat: repeat-x;
    padding: 6px 0 4px 0;
}
#petition-form div.select {
    background-image: url(/imgs/dotty.gif);
    background-repeat: repeat-x;
    background-position: bottom left;
    padding: 0 0 4px 0;
}
#petition-form div.select label {
    float: none;
    display: block;
    background-image: url(/imgs/dotty.gif);
    background-repeat: repeat-x;
    width: 100%;
    font-size: 110%;
    color: #666;
    padding: 0.2em 0 0.2em 0;
}
#petition-form div.select select {
    width: 100%;
    font-size: 110%;
    color: #000;
}

/* in the design this field is aligned to the bottom - the only way to do this is to set position absolute. 
As long as there is a big space between the top field and this one you should be ok however if it starts to overlap because you put more fields in then simply delete the below rule and it will just display in the normal flow of the page. */
#petition-form div.comments {
    position: absolute;
    bottom: 3px;
    right: 0;
}
#petition-form div.comments label{
    float: none;
    display: block;
    background-image: url(/imgs/dotty.gif);
    background-repeat: repeat-x;
    background-position: bottom left;
    width: 100%;
    padding: 4em 0 0.4em 0;
    margin: 0 0 4px 0;
}
#petition-form div.checks label {
/*orig
    text-align: right;
    font-style: italic;
    color: #666;
    padding: 0 10px 0 0;
    width: 59px;
*/
    color: #666;
    padding: 0.4em 0 0 2px;
    width: 119px;
}
#petition-form div.checks {
    padding: 1em 0 0 0;
}
#petition-form div.checks p.clearpara {
    clear: left;
    margin:0 0 0 90px;
    padding: 1em 0 0 0;
}
#petition-form div.checks input {
    float:left;
    width: 30px;
/* sg added */
padding-left: 0px;
}
#petition-form a:link, #petition-form a:visited {
    color: #666;
}
#petition-form div.checks p {
    /*orig margin:0 0 0 95px;*/
    margin:0 0 0 10px;
    padding: 0;
}
#petition-form div.checks p.dp {
    margin: 0;
    float: left;
    width: 100px;
}
#petition-form div.checks input.arrow, #petition-form input.arrow {
    width: auto;
    float: none;
    border: 0;
    font-size: 110%;
    color: #fff;
    background-image: url(/imgs/arrow-tip.gif);
    background-color: #0baf4d;
    font-weight: bold;
    height: 42px;
    background-repeat: no-repeat;
    background-position: top right;
    padding: 0 25px 0px 5px;
}

/* jh added */
#petition-form .col1 .text {
    /*float:right;*/
    width: 215px;
}
/* jh added */
#petition-form .col1 .shorttext{
    width: 95px; 
}


#petition-form .text , #petition-form .shorttext{
    width: 265px; 
    background-image: url(/imgs/text-bg.gif);
    background-repeat: repeat-x;
    background-color: #fff;
    border:1px solid #d0d0d0;
    padding: 0.2em 5px 0.2em 5px;
    font-size: 110%;
}
#petition-form .hilite .text {
    border-top: 1px solid #0baf4d;
    border-bottom: 1px solid #0baf4d;
}
#petition-form .hilite {
    padding-bottom: 1em;
}
#petition-form .shorttext{
    width: 165px;
}
#petition-form h1, #petition-form h2 {
    padding: 0 0 0.6em 0;
}
.intro p {
    padding: 0 0 1.2em 0;
    margin: 0;
    font-size: 110%;
    line-height: 1.2;
}

#footer {
    clear:both;
    border-top: 2px solid #0baf4d;
    padding: 0.4em 20px 1em 25px;
    /*text-align: right;*/
    height:30px;
}

.clear {
    clear: both;
    height: 1px;
    line-height: 1;
    font-size: 1px;
    margin: 0;
    padding: 0;
}

#nav ul#main-nav li a.item {color: #666;}
#nav ul#main-nav li a#about-about,
#nav ul#main-nav li a#word-word,
#nav ul#main-nav li a#blog-blog,
#nav ul#main-nav li a#events-events,
#nav ul#main-nav li a#petition-petition {color: #0baf4d;}

#nav ul#lang li a.item {color: #666;}
#nav ul#lang li a#GB-GB {color: #0baf4d;}
#nav ul#lang li a#ES-ES {color: #0baf4d;} 
#nav ul#lang li a#FR-FR {color: #0baf4d;}
#nav ul#lang li a#DA-DA {color: #0baf4d;}
#nav ul#lang li a#DE-DE {color: #0baf4d;}
#nav ul#lang li a#ID-ID {color: #0baf4d;}

/* hide bahasa lang links 
#nav ul#lang li#GB-ID-item, 
#nav ul#lang li#FR-ID-item, 
#nav ul#lang li#ES-ID-item, 
#nav ul#lang li#DA-ID-item, 
#nav ul#lang li#ID-ID-item 
{display: none;}*/

/* hide danish lang links 
#nav ul#lang li#GB-DA-item, 
#nav ul#lang li#FR-DA-item, 
#nav ul#lang li#ES-DA-item, 
#nav ul#lang li#DA-DA-item, 
#nav ul#lang li#ID-DA-item 
{display: none;}*/


#petition-intro { 
background-color: white; 
padding: 4px 3px 0px 4px;
margin: 0px 0px 5px 0px;
border: 1px solid #aaa;
}
#petition-intro li { 
padding-bottom: 4px;
}
#dp-text { 
padding: 0px 3px 0px 0px;
margin: 4px 0px 0px 0px;
font-size: 100%;
}
/* jh changed dp-box, right padding was 20px width was 94% */
#dp-box {
width:100%; padding: 4px 0 0 2px;}
/* jh changed dp-tickbox, top padding was 4px */
#dp-tickbox {float:right;padding: 5px 0 0 0;}
#petition-form .col2 .checks { 
padding-left: 73px;
}
#mail_me_blurb {
padding: 0;
margin: 0;
}
/* jh changed foeiname from float: right */
#foeiname { float: left; color:#030; font-weight: bold; font-size: 120%; padding-top: 10px; }
/* jh changed foeilogo-box from text-align:center */
#foeilogo-box { width: 100%; padding:10px 0 0 0;margin:0;text-align:left;}
#foeilogo { text-align: center; }
.pre-copy { width: 70%; float: left; font-size: 75%;}
.copy { float: right; text-align: right;font-size: 75%;}
#dp_tickbox_label , #mail_me_blurb {
padding-bottom: 0px;
margin-bottom: 0px;
}
#petition-form label#dp_tickbox_label {
width: 300px;
}
.noedit {
background-color: #aaa;
}
#petition-tally {font-weight: bold;color: #0baf4d; padding-right: 4px;}
#sign_up_text {padding-top:10px;}
#petition-preamble {padding: 0px 3px 10px 3px; color: #736F6E;}
#ewnicountrybox {display:none;}
#dp-box a#privacy_policy_link {color: #0baf4d;text-decoration: none;}
#pcbutton {padding: 0 0 0 0; margin: 0 0 0 0;}

/* jh added for secure page */
h4 {font-family: Arial, Helvetica, sans-serif; text-align:left; color: #063; font-weight: bold}

/*sg added to hide lang options on donation page */
.lang-donation { display: none; }

/* mf added to enable hiding blog link */
#nav ul#main-nav li.nobloglink {
display: none;
}
.right {float:right}