/*
-------------------------------------------------------------
project			ONE.org (www.one.org) ACT NOW style sheet
author:   		HUGE
last updated:	2009.02.09
---------------------------------------------------------- */

/* ---------- The main 'Act Now' title and intro text */
.land-title{ width:253px; height:56px; background:url(../img/act-now/title-landing.gif); margin-bottom:15px; }
.land-intro{ font-size:1.33em; margin-bottom:0; }

/* ---------- Actions Overview ----------*/
.actions-ov{ position:relative; background-repeat:no-repeat; padding:35px 0 0 86px; margin-left:-120px; }
.supporter-2{ background-image:url(../img/act-now/supporter-2.jpg); }

/* ---------- Basic styles for Act Now Landing items ----------*/
.actions-ov .item{ float:left; display:inline; width:280px; margin:0 0 26px 38px; }
.actions-ov .status{ padding-left:98px; width:180px; }
.actions-ov .status .user-status{ font-size:0.9em; }

/* ---------- The 2 column hero action is slightly different. ----------*/
.mod-hero-action h2 { border-bottom:1px solid #CCCCCC; color:#000000; font-size:1.33em; font-weight:700; height:7px; _overflow:hidden; margin:3px 0 30px; text-align:center; text-transform:uppercase; }
.mod-hero-action h2 span { position:relative; background:#FFFFFF; padding:1px 10px; text-align:center; }
.mod-hero-action .content h3{ font-size:1.5em; margin:2px 0; }
.mod-hero-action .desc-wrap{ width:280px; padding-left:245px; }
.mod-hero-action .desc-wrap p.desc{ position:relative; float:none; display:block; width:auto; margin:10px 0 15px 0; font-size:1.16em; line-height:125%; }
.mod-hero-action .date{ text-transform:uppercase; display:block; margin-top:5px; color:#666; font-size:1.1em; }

/* ---------- Act Now Landing, when user is logged out ----------*/
.mod-tell-friend p.desc{ float:none; display:block; width:auto; margin:0 0 15px 0; }
#signup-form .signup-email{ width:174px; }
#tell-friend-form{ margin:12px 0 20px; }
#tell-friend-form .text{ width:200px; margin-bottom:10px; }
#signup-form label, #tell-friend-form label{ text-transform:uppercase; display:block; font-weight:700; margin-bottom:3px; font-size:0.9em; }
#signup-form .submit{ margin-bottom:20px; }

/* ---------- Act Now Landing, when user is logged in ----------*/
.title-sign-up{ width:180px; height:43px; background:url(../img/act-now/title-sign-up.gif); text-indent:-9999px; margin-bottom:20px; }
.title-welcome-back{ width:178px; height:74px; background:url(../img/act-now/title-welcome-back.gif); text-indent:-9999px; margin-bottom:20px; }
.actions-ov .status .intro-text{ font-size:1.16em; margin-bottom:15px; line-height:120%; }
.actions-ov .status .intro-text span{ display:block; font-size:1.16em; font-weight:700; color:#000; }

/* ---------- On an action page, the sub-content column (left hand side) ---------- */
#action .sub-content{ background-repeat:no-repeat; padding-top:370px; }
#action .sub-content h2{ text-transform:uppercase; font-size:1.33em; font-weight:700; margin-bottom:20px; }
#action .sub-content p{ font-size:1.16em; line-height:125%; }

/*---------- The introductory title, description and progress bar ---------- */
.action-intro{ background:url(../img/lines-hatches/dot-line-horiz.gif) repeat-x 0 100%; padding-bottom:30px; margin-bottom:20px; }
.action-intro-no-bdr{ background:none; margin-bottom:10px; }
.action-intro h1{ text-transform:uppercase; font-size:2.5em; font-weight:700; letter-spacing:-1px; margin-bottom:5px; }
.action-intro span{ text-transform:uppercase; font-size:1.16em; color:#666; }
.action-intro .action-summary{ color:#999; font-size:1.33em; letter-spacing:-1px; margin-bottom:20px; }
.action-intro .action-progress{ margin-right:12px; }

.action-progress{ position:relative; float:left; display:inline; width:280px; height:30px; }
.action-progress .bar { width:0; height:30px; background:url(../img/act-now/bg-petition-progress-ylw.gif); text-align:right; font-size:1.5em; color:#000; padding:6px 5px 0 0; }
html>body .action-progress .bar { height:23px; }

.action-progress .container{ position:absolute; top:0; left:0; width:280px; height:30px; background:url(../img/act-now/petition-progress-container.png) no-repeat; }
.action-status{ line-height:125%; }
.action-progress .user-pointer{ color:#000; text-align:center; font-weight:700; text-transform:uppercase; font-size:0.9em; width:36px; height:14px; padding:15px 0 0 0; background:url(../img/act-now/bg-petition-progress-user.png) no-repeat; position:absolute; top:24px; left:36px; }

/*---------- The additional information JS-based accordions ---------- */
.additional-info{ color:#000; *height:1%; }
.additional-info h3{ background:url(../img/icons/ico-square-expand-off.gif) no-repeat 575px 50% #e5e5e5; margin-bottom:2px; text-transform:uppercase; font-weight:700; cursor:hand; cursor:pointer; }
.additional-info h3 a:hover{ display:block; background:url(../img/icons/ico-square-expand-on.gif) no-repeat 575px 50% #e5e5e5; color:#000; }
.additional-info h3.active{ background:url(../img/icons/ico-square-collapse-off.gif) no-repeat 575px 50% #e5e5e5; }
.additional-info h3 a{ text-decoration:none; padding:10px; display:block; position:relative; }
.additional-info h3 a:hover{ background:url(../img/icons/ico-square-expand-on.gif) no-repeat 575px 50% #e5e5e5; }
.additional-info h3.active a:hover{ background:url(../img/icons/ico-square-collapse-on.gif) no-repeat 575px 50% #e5e5e5; }
.additional-info .slider div{ padding:10px 10px 0 10px; line-height:125%; }
.additional-info p{ margin-bottom:15px; }
.additional-info ul{ list-style-type:disc; padding:0 0 20px 15px;}

/*---------- The petition introduction ---------- */
.petition-wrap{ background:url(../img/lines-hatches/dot-line-horiz.gif) repeat-x 0 100%; padding-bottom:30px; margin-bottom:20px; }
.petition-desc,
.petition-form{ float:left; display:inline; }
.petition-desc{ width:320px; margin-right:40px; }
.petition-desc p.desc{ font-size:1.16em; margin-bottom:18px; line-height:125%; }
.petition-desc p.desc span{ display:block; margin-bottom:20px; font-weight:700; }
.petition-form{ width:240px; }
#action .content h2{ text-transform:uppercase; margin-bottom:20px; font-weight:700; font-size:1.33em; }
.petition-wrap h2 span.not-user{ display:block; padding-top:3px; font-weight:400; font-size:0.73em; text-transform:none; }
.petition-wrap h2 span.not-user a{ color:#0099FF; }

/*---------- The petition form ---------- */
#action label { text-transform:uppercase; font-weight:700; color:#000; display:block; margin-bottom:3px; }
#action .text { width:230px; margin-bottom:10px; }
#action .petition-desc textarea{ width:310px; height:100px; }
#action .petition-form textarea{ width:230px; height:100px; margin-bottom:20px; }
#action .petition-wrap .zip-code { width:88px; margin-bottom:20px; }
#action .petition-wrap label .req{ color:#0099ff; font-size:1.1em; }
#action .petition-wrap label .opt{ color:#666; text-transform:none; font-weight:400; }
#action #signup .error {color: red;font-weight:700; } /*  Additional styling by Tsegaye | survey form css */

/* ---------- Act now - steps ---------- */
.act-steps{ width:600px; height:58px; background:url(../img/act-now/bg-act-steps.gif); margin-bottom:40px; }
.act-steps li{ font-size: 0.9em; float:left; display:inline; width:120px; margin-left:80px; padding-top:18px; height:40px; text-transform:uppercase; }
.act-steps li.first{ margin-left:50px; }
.act-steps li span{ font-size:2.8em; float:left; display:inline; margin:-4px 10px 0 0; font-weight:700; }
.act-steps li.complete{ color:#0099FF; }
.act-steps a{ color:#0099ff; display:block; }
.act-steps a:hover{ text-decoration:none; color:#000; }

/* ---------- Act - Compose Letter ---------- */
.act-compose p{ line-height:125%; margin-bottom:15px; }
#action .reset-labels label{ display:inline; text-transform:none; font-weight:400; }
.act-compose textarea{ width:520px; height:180px; margin-bottom:10px; line-height:115%; }

/* ---------- Act - Options ---------- */
.act-controls{ background:url(../img/lines-hatches/dot-line-horiz.gif) repeat-x; padding-top:20px; margin-top:30px; }
.act-controls input{ float:right; margin-top:1px; }
.act-controls .previous-step{ background:url(../img/icons/ico-previous-arrow-off.gif) no-repeat; float:left; display:block; padding:9px 0 10px 37px; }
.act-controls .previous-step:hover{ background:url(../img/icons/ico-previous-arrow-on.gif) no-repeat; text-decoration:none; color:#0099FF; }

/* ---------- News summary (Policy Landing Page ----------*/
.news-summary .desc{ width:486px; }

/* ---------- Recorded Action page ---------- */
#recorded-action-hero{ height:223px; background-position:29px 100%; background-repeat:no-repeat; padding:40px 0 0 316px; }
#recorded-action-hero h1{ font-size:2.5em; font-weight:700; text-transform:uppercase; margin-bottom:4px; }
#recorded-action-hero .summary{ font-size:1.16em; color:#666; margin-bottom:30px; }

/* ---------- Top container on Recorded Action page ---------- */
.status-container{ width:604px; }
.status-container .top { background:url(../img/act-now/status-container-top.gif); height:5px; overflow:hidden; }
.status-container .content{ padding:8px 0 8px 23px; background:url(../img/act-now/status-container-rep.gif) repeat-y; }
.status-container .btm{ background:url(../img/act-now/status-container-btm.gif); height:5px; overflow:hidden; }
.status-container table{ float:left; display:inline; margin-right:14px; }
.status-container table th{ width:72px; text-transform:uppercase; background:url(../img/lines-hatches/dot-line-horiz-gray.gif) repeat-x 0 100%; font-size:0.9em; font-weight:700; color:#999; padding:7px 0; }
.status-container table td{ background:url(../img/lines-hatches/dot-line-horiz-gray.gif) repeat-x 0 100%; width:188px; color:#000; font-size:1.16em; }
.status-container table tr.dates th,
.status-container table tr.dates td{ border:0; }
.status-container table tr.dates span{ font-size:0.8em; text-transform:uppercase; }
.status-container .sec-name{ margin-top:7px; }
.status-container .action-progress-wrap{ float:left; display:inline; background:url(../img/lines-hatches/dot-line-vert-gray.gif) repeat-y; padding-left:12px; height:75px; }

/* ---------- Custom styles for peitition status inside the Milestones module  ---------- */
.mod-milestones .petition-status{ padding-top:10px; }
#page .mod-milestones .petition-status ul{ position:relative; clear:left; margin:0;  }
#page .mod-milestones .petition-status ul li{ float:left; display:inline; clear:none; font-size:0.9em; margin:0 5px 0 0; font-weight:400; }
.mod-milestones .petition-status ul li a{ margin-right:5px; color:#0099ff; }
.mod-milestones .action-progress{ margin-bottom:15px; }

/* ---------- Campaign All Stars title ---------- */
.title-campaign-as{ width:273px; height:25px; background:url(../img/act-now/title-campaign-all-stars.gif); margin-bottom:10px; text-indent:-9999px; }

/*For Paragraphs inside the squares*/
/*added*/
.act-now { line-height:120%; margin-bottom:10px; }
/*added*/

/* ----------- Error handling -------------------- */ 
#signup-form label.error, #signup-form input.error, #signup-form p.error, #act-now p.error, #act-now label.error { color: red; font-weight: bold }
#signup-form p.error, #act-now p.error { padding-bottom: 1em; }
#act-now .tellafriend-form p.error { padding-bottom: 0; }

/* ---------- Hot topics ---------- */
.hot-topics{ position:relative; zoom:1; background:url(/c/media/img/lines-hatches/cr-hatch-bl.gif) repeat-x 0 100%; padding-bottom:9px; margin-bottom:26px; }
.hot-topics .sticker{ position:absolute; top:-5px; left:190px; }
.hot-topics .unit{ width:238px; padding:0 1px 0 0; height:148px; }
.hot-topics .first,.hot-topics .last{ width:220px; }
.hot-topics span{ text-transform:uppercase; font-size:0.9em; font-weight:700; color:#999; }
.hot-topics h2 { text-transform:uppercase; font-weight:700; font-size:1.33em; padding:1px 0 10px 0; background:url(/c/media/img/lines-hatches/dot-line-horiz.gif) repeat-x 0 100%; }
#page .hot-topics .more-link { margin:-20px 0 0 0; padding-bottom:20px; }
.hot-topics .topic{ position:relative; height:148px; background-position:0 100%; background-repeat:no-repeat; }
.topic h3 { font-size:1.6em; font-weight:700; padding:0 0 0 20px; }
.topic h3 a { display:block; _height:1%; background:url(/c/media/img/icons/ico-more-arrow-lrg-off.gif) no-repeat 0 2px; padding:0 0 0 21px; }
.hot-topics .hover h3 a, .hot-topics .topic h3 a:hover { text-decoration:none; color:#0099ff; background:url(/c/media/img/icons/ico-more-arrow-lrg-on.gif) no-repeat 0 2px; }
.topic p { visibility:hidden; padding:20px 20px 0 20px; line-height:133%; }
.topic p a { font-size:0.83em; }
.hot-topics .hover p { visibility:visible; }
.hot-topics .hover { background: none !important; }