<!--

-->
/* ===================================================================
    
    Styles for GET SERIOUS ABOUT CO2 CAMPAIGN
    
    Copyright Friends of the Earth 2009.
    
    Last updated 22-05-2009
    
    SINGLE LINE STYLING CONVENTION:
    #styleReference {Z-INDEX AND POSITIONING; FLOATS: WIDTH and HEIGHT; MARGIN and PADDING; FONT and TEXT STYLES; DISPLAY; MISC; BACKGROUND STYLES; }
        #styleReference h1 {RELATED CHILD ELEMENT INDENTED LIKE SO, UNDERNEATH PARENT}
        
======================================================================*/
/* Hello :) */
/*======================  OVERWRITES of styles in main.css  ===================*/
br {line-height:1.0;}/* main.css OVERWRITE */

/*======================  GENERAL  ===================*/
.floatRight {float:right;}
fieldset {border:0; padding:0; margin:0;}
legend {display:none;}
/*hack:stops ff/mozilla dotted line around links, doesn't validate */
:focus {-moz-outline-style: none;} 
.imageTitle {display:block; text-indent:-9999px;}
.imageLink a, a.imageLink {display:block; text-indent:-9999px;}
hr {display:none; clear:both; visibility:hidden; height:0px;}

/*======================  MAIN  ===================*/
div#getSerious {width:313px; padding:0 0 0px 0;}
div.seriousSection {clear:both; margin:15px 0 0 0; padding:14px 0 0 0;  border-top: 1px solid #019934;}
div.seriousSection2 {clear:both; margin:0 0 0 0; padding:0 0 0 0}
    .seriousInput {height:14px; color:#888; padding:4px 0 4px 4px; font-size:10pt; border:1px #cfcfcf solid; }
    .seriousInput2 {color:#888; border:1px #cfcfcf solid; }
        .sendToFriend {width:300px;}
        #postCodeArea {width:180px;}
/*sg h1#getSeriousHeader {width:313px; height:249px; background: url(/imgs/get_serious_banner_faces2.jpg) no-repeat;} */
/* h1#getSeriousHeader {width:313px; height:190px; background: url(/imgs/get_serious_banner_faces2.jpg) no-repeat;} */
h1#getSeriousHeader {width:309px; height:169px; background: url(/imgs/get_serious_banner_faces2.jpg) no-repeat;}

#getSerious h2 {color:#009933/*108445*/; font-size:12pt;}
h2.seriousSection {font-size:12pt}

/*sg #getSerious p {color:#888; font-size:8pt;}*/
#getSerious p {color:#888; font-size:10pt;}
#getSerious p a {color:#009933;}

    
#getSerious a.largeLink {clear:both; padding:4px 30px 4px 8px;  margin:0 0 9px 0; font-size:9pt; font-weight:bold; color:#fff; background:#009933 url(/imgs/gs_icon_arrow.png) right 9px no-repeat; }
#getSerious a.greenBgLink {clear:both; padding:3px 30px 3px 6px; margin:0 0 9px 0; font-size:8pt; font-weight:bold; color:#fff; background:#009933 url(/imgs/gs_icon_arrow.png) right 6px no-repeat;}
#getSerious a.largeLinkLeft {clear:both; padding:4px 8px 4px 30px; margin:0 0 9px 0; font-size:11pt; font-weight:bold; color:#fff; background:#009933 url(/imgs/gs_icon_arrow-left.png) 8px 9px no-repeat;}
    p#noPhotoLink {width:200px; height:19px; padding:5px 0 0 20px; background:#009933 url(/imgs/gs_icon_cross.png)  5px no-repeat;}

/*========================== PETITION FORM =========================*/
    #petitionForm {}
    #petitionForm p {font-size: 8pt; clear:both; width:100%; height:18px; /**height:14px; _margin:0 0 -1px 0; _height:26px; */}
            #petitionForm p.checkbox {height:65px;}
            #petitionForm p.checkboxB {height:22px;}
            #petitionForm p#findAddress {margin:0 0 30px 87px; width:120px;}
            #petitionForm p#findAddress input {width:99px; height:19px; border:none; padding:0; }
            
    #petitionForm label {float:left; width:77px; padding:4px 10px 5px 0; text-align:right; /*color:#888;*/ /*font-weight:bold;*/ }
            #petitionForm label.checkbox {width:250px; /*height:65px;*/ padding:4px 0 5px 0;  border:0; }
    #petitionForm input {float:left; width:186px; height:14px; color:#333; padding:1px 0 3px 4px; font-size:10pt; border:1px #cfcfcf solid; }
            #petitionForm input.checkbox {width:20px; border:0; margin:5px 0 0 12px;}
            #petitionForm input#petitionSubmit {float:right; width:71px; height:26px; margin:0 0 30px 0;  border:0;}
    #petitionForm select {float:left; width:192px; color:#333; padding:1px 2px 1px 0; font-size:10pt; border:1px #cfcfcf solid; border-top:1px #cfcfcf solid; }
    
    input.imageUploadField {height:23px;}/* to control height of IE7 image upload field*/
    
    div#underEighteenContainer {margin:0 30px 0 0;}
            #petitionForm p#underEighteen {text-align:right; /**padding:0 0 5px 0;*/}
                #petitionForm p#underEighteen label {float:none; }
                #petitionForm p#underEighteen div {float:none;}
                #petitionForm select.underEighteen {float:right; width:70px; margin:0 5px 0 0;}
                
                
    #titleUpload {padding:2px 0 0 27px; background:url(/imgs/gs_sprite_numbers.png) left -344px no-repeat;}
    #titleCrop {padding:2px 0 0 27px; background:url(/imgs/gs_sprite_numbers.png) left -100px no-repeat;}
    #titleImageConfirm {padding:2px 0 0 27px; background:url(/imgs/gs_sprite_numbers.png) left -220px no-repeat;}
    #titleAvatar {padding:2px 0 0 27px; background:url(/imgs/gs_sprite_numbers.png) left -479px no-repeat;}
    div#thumbnailContainer {clear:both; position:relative; height:104px; padding:7px; margin:7px 0 0 0; background:#f5f5f5; }
    #theDivTHatMustBeHid {display:none;}
    /*======================================== THUMBNAILS (mainly for results.html) ======================================*/
    
    #getSerious ul, .seriousSection ul {position:relative; list-style:none; padding:0; margin:0;}     
    #getSerious ul.supporters, .seriousSection ul.supporters  {min-height:120px; height:auto !important; height:120px; }
    #getSerious ul#supportersGrid {min-height:326px; height:auto !important; height:326px; }
    #getSerious ul.supporters li, .seriousSection ul.supporters li, #getSerious ul#supportersGrid li {float:left; width:78px; height:78px;}
    ul.supporters li div.supportersImage, ul.supporters li img,  ul#supportersGrid li img {height:78px; width:78px; /*_margin:0 0 -3px 0;*/}
    #getSerious ul.supporters li p {font-size: 8pt; min-height:35px; height:auto !important; height:55px;}
    
    ul#supportersGrid li.hoverable {position:relative;}
    
    ul#supportersGrid li#position1 {position:absolute; top:0; left:0; z-index:33;}
        ul#supportersGrid li#position2 {position:absolute; top:0; left:78px; z-index:32;}
        ul#supportersGrid li#position3 {position:absolute; top:0; left:156px; z-index:31;}
        ul#supportersGrid li#position4 {position:absolute; top:0; left:234px; z-index:30;}
    
    ul#supportersGrid li#position5 {position:absolute; top:78px; left:0; z-index:33;}
        ul#supportersGrid li#position6 {position:absolute; top:78px; left:78px; z-index:32;}
        ul#supportersGrid li#position7 {position:absolute; top:78px; left:156px; z-index:31;}
        ul#supportersGrid li#position8 {position:absolute; top:78px; left:234px; z-index:30;}
    ul#supportersGrid li#position9 {position:absolute; top:156px; left:0; z-index:33;}
        ul#supportersGrid li#position10 {position:absolute; top:156px; left:78px; z-index:32;}
        ul#supportersGrid li#position11 {position:absolute; top:156px; left:156px; z-index:31;}
        ul#supportersGrid li#position12 {position:absolute; top:156px; left:234px; z-index:30;}
        
    ul#supportersGrid li#position13 {position:absolute; top:234px; left:0; z-index:33;}
        ul#supportersGrid li#position14 {position:absolute; top:234px; left:78px; z-index:32;}
        ul#supportersGrid li#position15 {position:absolute; top:234px; left:156px; z-index:31;}
        ul#supportersGrid li#position16 {position:absolute; top:234px; left:234px; z-index:30;}    
    
    ul#supportersGrid li.hoverable p.supporterDetails  {
    background:url(/imgs/gs_bg_details-hover.png) no-repeat;
    /*_background:url(/imgs/gs_bg_details-hover-ie6.png) no-repeat;*/
    font-size:14px;
    font-weight:bold;
    min-height:96px; height:auto !important; height:96px;
    left:-9999px;
    top:0;
    overflow:hidden;
    padding:38px 0 0 45px;
    position:absolute;
    width:105px;
    display:none;
    }
    ul#supportersGrid li.hovered p.supporterDetails {display:block; z-index:5555; top:12px; left:0;  margin:-20px 0 0 60px;}    
    
#getSerious p.supporterDetails, #getSerious p.supporterDetails a {color:#fff;}/* needs to be here - doesn't work in above style */
a.flagInappropriate {z-index:555; width:75px; height:21px; margin:10px 0 0 -0px; display:block; text-indent:-9999px; text-align:none;  background:url(/imgs/gs_b_flag-as-inappropriate.png) no-repeat;}
    /*================= OTHER STUFF =======================================================================*/
#getSerious input#submit {margin:0 0 -5px 0;}
#getSerious div.seriousNews {margin:0 0 12px 0;}
    #getSerious div.seriousNews p {margin: 0 ; padding:0;}
    #getSerious div.seriousNews p span { color:#303030;}
    #getSerious div.seriousNews p.seriousNewsImage img { max-width:313px;}
        a.rightArrow {padding:0 18px 0 0; color:#009933; background:url(/imgs/gs_icon_arrow-green.png) right 5px no-repeat;}

#getSerious .peopleCounter {clear:both; position:relative; height:28px; margin:20px 0 0px 0;   color:#fff; background:#009933; }
    #getSerious .peopleCounter .counterContainer {margin:0 0 0 40px; /*padding:4px 0 0;*/}
    /*#getSerious .peopleCounter span,*/ #getSerious .peopleCounter .counterContainer table {float:left; }
    .counterContainer table td {width:12px; height:20px; padding:5px 0 3px 3px; font-size:12pt; font-weight:bold; border-right:1px solid #fff; background:#3f3f3f;}
    
    #getSerious .peopleCounter  div {}
    #getSerious .peopleCounterCopy {position:absolute; top:0; left:142px; }
        .titleNumberOf {width:142px; height:20px; margin:4px 0 0 0; padding:0; background:url(/imgs/gs_title_number-of-people.png) no-repeat;}
/* alter the following to hide or reveal the people counter */
 #getSerious .peopleCounter {display: none;} 
        
    #personDetail {}
        #personDetail h3 {margin:0 0 0 0; padding:0 0 0 0; color:#009933;}
        #enlargedImage {margin:0 0 15px 0;} 
        
    #councilForm {margin:0 0 60px 0;}
    #uploadForm {margin:0 0 20px 0;}
    
    form#seriousnessForm div {clear:both; /**margin:0 0 10px 0;*/}
    p.seriousnessLeft, label.seriousnessLeft {float:left; width:160px; padding:0 5px 0 0 ;}
    p.seriousnessRight {float:left; width:140px;}

/* ======================= AVATARS Selection ================================ */
p.avatarSelection {float:left; height:115px; margin:15px 15px 20px 0; padding:12px 0 0 13px; width:110px;}
    p.avatarSelection label {display:none;}
    p#avatarA { margin-left:30px; _margin-left:10px; background:url(/imgs/gs_bg_avatar.png) no-repeat;}
    p#avatarB { background:url(/imgs/gs_bg_avatar.png) no-repeat;}
    #avatar1, #avatar2 {margin:8px 0 0 30px; /**margin:3px 0 0 25px;*/}

/*=============  LIGHTBOX/OVERLAY STUFF ======================*/
#lightbox{
    position: absolute;
    top:41%;
    left:50%;
    width:600px;
    margin:-220px 0 100px -300px;
    background:none;
    text-align:left;
}
#lightbox[id]{/*position:fixed;*/}
#overlay{
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:170%;
    background-color:#000;
    -moz-opacity: 0.65;
    opacity:.65;
    filter: alpha(opacity=65);
}
#overlay[id]{position:fixed;}
#thumbnailDisplay {border:1px #565656 solid; overflow:hidden;  position:absolute; top:5px; right:20px;}
#thumbInputButton {position:absolute; top:70px; right:118px;}
    #thumbInputButton input {width:110px;}
    
img#thumbnailPhoto {position:absolute; top:4px; left:303px; border:1px #565656 solid;}
    
.cropIntro {min-height:75px; height:auto !important; height:75px; padding:15px; margin-bottom:5px; background:#fff;}
#confirmButtons {position:absolute; top:15px; right:20px;}
    
/* CROWBARRING MAIN TEMPLATE (main.css) TO GET OVERLAY TO WORK IN ALL BROWSERS  */
#contenttop1 {position:static;}
#contentcenter2 {position:none; position:static;}

/* =========================== SLIDERS ========================================
    Slider CSS, style as you please.
   Remove the -moz & -khtml styles if you want the css to validate.
====================================================================== */
fieldset#slider {background:url(/imgs/gs_bg_slider.png) 0 40px no-repeat;}
/* Styles for the horizontal slider */
.fd-slider
        {
        position:relative;
        width:100%;
        height:20px;
        text-align:center;
        border:0 none;
        text-decoration:none;
        display:block;
        -moz-user-select:none;
        -khtml-user-select:none
        cursor:pointer;
        }
.fd-slider-inner
        {
        position:relative;
        display:block;
        z-index:1;
        height:18px;
        text-align:left;
        background:#fcfcfc;
       /* border:1px solid #ccc;*/         
        }
.fd-slider-bar
        {
        position:absolute;
        display:block;
        z-index:2;
        height:2px;
        border:1px solid #bbb;
        border-bottom:1px solid #aaa;
        border-right:1px solid #aaa;
        background:#ddd;
        margin:0;
        padding:0;
        overflow:hidden;
        line-height:4px;
        top:8px;
        bottom:none;
        left:10px;
        right:10px;         
        }
/* Styles for the vertical slider */
.fd-slider-vertical
        {
        position:relative;
        border:0 none;
        text-decoration:none;
        display:block;
        width:20px;
        height:100%;
        text-align:center;
        -moz-user-select:none;
        -khtml-user-select:none
        cursor:pointer;
        cursor:hand;
        }
.fd-slider-vertical .fd-slider-inner
        {
        display:block;
        width:18px;
        height:100%;
        text-align:left;
/*        background:#fcfcfc;
        border:1px solid #ccc;*/
        }
.fd-slider-vertical .fd-slider-bar
        {         
        width:2px;   
        top:10px;
        bottom:10px;
        left:8px;
        right:none;
        height:auto;
        }
.fd-slider-vertical .fd-slider-handle
        {
        cursor:N-resize;
        }
.focused .fd-slider-inner
        {
/*        background:#eee !important;
        border:1px solid #aaa !important;*/
        }
/* black handle, no glow */
.fd-slider-handle
        {
        position:absolute;
        display:block;
        padding:0;
        border:0 none;
        margin:0;
        z-index:3;
        top:0;
        left:0;
        width:20px;
        height:20px;
        outline:0px none;
        background:transparent url(/imgs/gs_slider-disabled.png) no-repeat 0px 0px;
        cursor:W-resize;  
        line-height:20px;
        font-size:20px;       
        -webkit-user-select: none;
        -moz-user-select:none;
        -moz-user-focus:none;
        -moz-outline:0px none;               
        }
.fd-slider-handle:focus
        {
        outline:0px none;
        border:0 none;
        -moz-user-focus:normal;
        }
button.fd-slider-handle:focus::-moz-focus-inner { border-color: transparent; }
/* black handle, glow */
.fd-slider-hover .fd-slider-handle
        {
        background:transparent url(/imgs/gs_slider-disabled-1.png) no-repeat 0px 0px;
        }
/* blue handle, no glow */
.focused .fd-slider-handle
        {
        background:transparent url(/imgs/gs_slider.png) no-repeat 0px 0px;
        }
/* blue handle glow */
.focused.fd-slider-hover .fd-slider-handle
        {
        background:transparent url(/imgs/gs_slider-1.png) no-repeat 0px 0px;
        }
body.slider-drag-vertical
        {
        cursor:N-resize !important;
        }
body.slider-drag-horizontal
        {
        cursor:W-resize !important;
        }
.fd_hide_slider_input
        {
        display:none;
        }
/* TOOLTIP STYLES  */
#tooltip
        {
        position:absolute;
        top:0px;
        left:-999px;
        width:100px;
        height:25px;
        line-height:25px;
        background:transparent url(/imgs/gs_tooltip-dongle.png) no-repeat 50% 100%;
        padding-bottom:5px;
        z-index:999;
        }
#tooltipInner1
        {
        padding-left:5px;
        overflow:hidden;
        color:#fff;
        background:transparent url(/imgs/gs_tooltipleft.png) no-repeat 0 0;
        }
#tooltipInner2
        {
        padding:0 5px 0 0;
        height:22px;
        line-height:22px;
        overflow:hidden;
        color:#fff;
        text-align:center;
        background:transparent url(/imgs/gs_tooltip.png) no-repeat 100% 0;
        text-shadow:#000 1px 1px 1px;
        }


/* =========================== LAUNCH TWEAKS ========================================
    hide some things that are not quite ready
====================================================================== */

#getSerious div#campaignreports { display: none; }

/* some images for the php files */
/*
/imgs/gs_b_save-thumbnail.png 
/imgs/gs_avatarA10.jpg
/imgs/gs_avatarA50.jpg
/imgs/gs_avatarA78.jpg
/imgs/gs_avatarA110.jpg
/imgs/gs_avatarA230.jpg
/imgs/gs_avatarA313.jpg
/imgs/gs_avatarB10.jpg
/imgs/gs_avatarB50.jpg
/imgs/gs_avatarB78.jpg
/imgs/gs_avatarB110.jpg
/imgs/gs_avatarB230.jpg
/imgs/gs_avatarB313.jpg
/imgs/gs_thumb-1.jpg
/imgs/gs_thumb-2.jpg
/imgs/gs_thumb-3.jpg
/imgs/gs_thumb-4.jpg
/imgs/gs_nav_get_serious_about_CO2.jpg
/imgs/logo_get-serious-about-co2.gif
*/