/*
--------------------------------------------------------
project			VOCnederland.org (www.vocnederland.org) ACT NOW style sheet
author:   		noutwebdesign (http://www.noutweb.com)
----------------------------------------------------- */

/* ---------- 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;
}


/* ---------- 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;
}

/* ---------- 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:23px;
background:url(../img/act-now/bg-petition-progress-ylw.gif);
text-align:right;
font-size:1.5em;
color:#000;
padding:6px 5px 0 0;
}
.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;
}


/* ---------- 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;
}


/*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(../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(../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(../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(../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;
}