/* Add roll-overs to seperate stories or articles BETA */
.story { position:relative; } /* wrap this around the headings and paragraphs of a story or article */
.filler { position:relative; }
.rollover { width:100%; height:100%;  position:absolute; display:none; }

.story .surprise { display:none; }
.story .surprise-btn { display:none; position:absolute; }
.story .surprise-box { display:none; position:absolute; }

.story-set-1 .story { }
.story-set-1 .story .surprise-box { width:80%; top:120%; right:-5px; padding:20px; background-color:#7d46a3; color:#ffffff; }
.story-set-1 .story .rollover { padding:5px; background-color:#e9e9e9; border-bottom:1px solid #e1e1e1; top:-5px; left:-5px; }
.story-set-1 .story .surprise-btn { bottom:-55px; right:-20px; padding:0px 20px 20px 20px; background-color:#e9e9e9; border-left:1px solid #e1e1e1; border-bottom:1px solid #e1e1e1; }

.story-set-2 .story { margin:0px 0px 30px 0px; }
.story-set-2 .story .surprise-box { width:80%; top:100%;right:-20px; padding:0px 20px 20px 20px; background-color:#e1e1e1; }
.story-set-2 .story .rollover { padding:20px; background-color:#e9e9e9; border-bottom:1px solid #e1e1e1; top:-20px; left:-20px; }
.story-set-2 .story .surprise-btn { bottom:-55px; right:-20px; padding:0px 20px 20px 20px; background-color:#e9e9e9; border-left:1px solid #e1e1e1; border-bottom:1px solid #e1e1e1; width:auto; }

.story-set-4 .story { margin:0px; }
.story-set-4 .story .surprise-box { width:400px; top:100%; right:-10px; padding:6px 20px 20px 20px; background-color:#e9e9e9; border-bottom:1px solid #e1e1e1; border-left:1px solid #e1e1e1; }
.story-set-4 .story .rollover { padding:4px 10px 4px 10px; background-color:#e9e9e9; border-bottom:1px solid #e1e1e1; top:-4px; left:-10px; }
.story-set-4 .story .surprise-btn { bottom:-35px; right:-10px; padding:0px 10px 10px 10px; background-color:#e9e9e9;  }