/* = User Generated Content Styles  
/* ========================= */

/*
These styles control how things generated by users should look - this covers actions, thoughts, suggestions feedback.

/* Thought/action/suggestion/feedback detail */



.bubble h2{
  padding-left:12px;
  padding-bottom:12px;
}
div.bubble {
    width: 440px;
    position:relative;
}
.thoughts div.bubble, .actions div.bubble, .feedbacks div.bubble{
  margin-left:105px;
}
li.bubble{
    width: 440px;
    margin-left: 130px;
    padding-top:12px;
    position:relative;
}
.bubble_top, li.bubble{
    background:url(/images/bg/ug_content_top.png);
    background-position:top;
    background-repeat:no-repeat;
}
.description p{
  max-width:410px;
  padding-top:12px;
}

.bubble .bottom, .bubble div.metadata {
    background-image: url(/images/bg/ug_content_bottom.png);
    background-repeat:no-repeat;
    background-position: 0 bottom;
    min-height:25px;
    padding-top:15px;
    padding-left:12px;
    padding-bottom:6px;
}
.suggestion div.metadata{
  position:relative;
}

.bubble img.speech_bubble{
  position:absolute;
  top:20px;
  left:-10px;
}
/* this refers to the icon for thoughts, actions and feedback. 
moving it here means we no longer need to truncate the copy */

div.item_icon{
  background: no-repeat url('/images/icons/nag_sprite.png');
  width:40px;
  height:40px;
  position:absolute;
  right:10px;
  top:12px;
}
/* the background position settings here move the 'viewport' for the nag sprite to show different icons */

div.item_icon_idea{
  background-position: -14px -538px;
}
div.item_icon_rant{
  background-position: -14px -464px
}
div.item_icon_wish{
  background-position: -14px -390px;
}
div.item_icon_action{
  background-position: -14px -12px;
}
div.item_icon_feedback{
  background-position: -14px -166px;
}



div.bubble div.description{
    min-height:200px;
    padding-left:12px;
}
li.bubble div.description{
  padding-left:12px;
}
div.posted_by{
  position:relative;
}
div#share_this{
  height:25px;
  position:absolute;
  right:60px;
  top:11px;
  width:85px;
}

/* styling for slide up/down widgets used when showing and creating actions */
h4.explanation{
  width:570px;
  color:#aaa;
  position:relative;
}
h4.explanation span.title{
  color:#5D4331; 
}



/* control styling for flag for admin buttons*/
div.flag_for_admin{
  position:absolute;
  display:block;
  bottom:8px;
  right:15px;
  height:25px;
  width:25px;
  text-indent:-9999em;
}
div.flag_for_admin a{
  display:block;
  width:25px;
  height:25px;
}
div.flag_for_admin, div.flag_for_admin a{
  background:url(/images/icons/flag_for_admin.png) -23px -10px no-repeat;
}
div.flag_for_admin a:focus, div.flag_for_admin a:hover{
  background:url(/images/icons/flag_for_admin.png) -23px -54px no-repeat;
}

/* these are background for the speech bubble, used in comments, detail pages and new action creation pages */
.thought, .thought img.speech_bubble {
    background-color:#7fe1f7;
}
.action, .action img.speech_bubble {
    background-color:#fac39e;
}
.feedback, .feedback img.speech_bubble {
    background-color:#f0e6b1;
}
.suggestion, .suggestion img.speech_bubble {
    background-color:#d0d5c4;
}
li.odd img.speech_bubble{
  background-color:#d9eceb;
}
li.even img.speech_bubble{
  background-color:#e4efef;
}
/* this form is used for adding stories, comments and suggestions */
li.user_submission_form{
    position:relative;
    padding-top:12px;
}
/* suggestions used a wider box, so they need a different margin */
li#make_new_suggestion{
  margin-left:0px;
  background-image: none;
  width:570px;
}
.user_submission_form form.new_action input.text, .user_submission_form  form.new_suggestion input.text{
   width:510px;
   margin-left:10px;
}
.user_submission_form form.new_action textarea, .user_submission_form form.new_suggestion textarea{
  width:515px;
}
.new_action label, .new_suggestion label{
  margin-left:10px;
}
.user_submission_form div.bubble{
  margin-left:30px;
}

.user_submission_form .suggestion {
    width:540px;
    background: #d0d5c4 url(/images/bg/suggestion_story_corners.png) no-repeat 0 -15px;
    margin-left:30px;
}
.user_submission_form .comment, .user_submission_form .story{
    background-color:#fcf9f9;
}
.user_submission_form .comment{
padding-top:16px;
}
.user_submission_form input.text{
  width:510px;
  margin-left:10px;
}
li.user_submission_form div.description{
  padding-left:0px;
  margin-left:0px; 
  width:440px;
}
.user_submission_form textarea{
  width:515px;
  margin-left:10px;
}
li.user_submission_form div.metadata{
  min-height:0px;
  padding-top:10px;
  padding-bottom:0px;
}
ul.form_actions{
  margin-left:30px;
  width:520px;
  padding-top:10px;
  padding-bottom:10px;
}


/* These styles refer to the user submission regions when nested in the comment areas */
.user_submission_form .bubble textarea{
    margin-left:10px;
    width:420px;
    margin-top:12px;
}
.user_submission_form .bubble .yui-editor-container{
  margin-left:12px;
}
.user_submission_form .bubble input.text{
  margin-left:60px;
  width:415px;
  padding-bottom:6px;
}
.comments .user_submission_form ul.form_actions, .stories .user_submission_form ul.form_actions{
  margin-left:12px;
  margin-top:0px;
  background:#fff;
  margin-right:0px;
  width:420px;
}
ul.form_actions li input{
  display:block;
}
/* We need to override of the comment and user submission form styles here*/
li#missing_your_voice div.description{
  background-image:none;
  padding-left:12px;
}

#actions_create input{
  margin-left:10px;
  margin-top:10px;
}
#bd p.attachment, #bd .bubble p.attachment{
  margin-left:14px;
  padding-top:12px;
  color:#5d4331;
  width:510px;
}
#bd p.attachment input.attachment{
  margin-left:10px;
}
#bd p.attachment label, body.new form p.attachment label, body.new form#new_feedback p.attachment label {
  margin-right:18px;
  display:inline;
}

/* ============= */
/* = *Comments = */
/* ============= */

div#bd_comments {
  background: transparent url(/images/bg/content_bg.png) no-repeat -3px -4px;
  padding-top:12px;
}
.ie div#bd_comments {
  padding-top:24px;
}
/* css sprite is used here - css top gives a white left tab, css bottom gives white right tab  */
div#bd_comments ul#tab_switcher{
    background: transparent url(/images/bg/comment_tab_sprite.png) -3px -86px no-repeat ;
    display:block;
    height:50px;
    width:600px;
    position:relative;
    top:-20px;
}

div#bd_comments div.tab_select ul#tab_switcher {
    background: transparent url(/images/bg/comment_tab_sprite.png) -4px top no-repeat ;
}

body.feedbacks div#bd_comments ul#tab_switcher {
    background: transparent url(/images/bg/feedback_tab.png) -4px bottom no-repeat ;
}

div#bd_comments ul#tab_switcher li{
    display:block;
    position:absolute;
    height:40px;
    font-size:138%;
    padding:12px 10px 0 15px ;
    width:105px;
}

div#bd_comments ul#tab_switcher li a{
    color:#5d4331;
    text-decoration: none;
}

div#bd_comments ul#tab_switcher li a:hover, div#bd_comments ul#tab_switcher li a:focus  {
    color:#EE2C74;
    border-bottom:2px solid #EE2C74;
    padding-bottom:2px;
}

ul#tab_switcher li.comments{
    left:135px;
    top:00px;
}
body.feedbacks div#bd_comments ul#tab_switcher li.comments {
    left:5px;
}

ul#tab_switcher li.suggestions{
    left:5px;
}
ul#tab_switcher li.stories{
    left:26px;
}

div#bd_comments ul#comments, div#bd_comments ul#suggestions, div#bd_comments ul#stories{
    background: transparent url(/images/bg/content_bg_mid.png) repeat-y scroll -4px bottom;
    padding-top:20px;
    position:relative;
    zoom:1;   /*trigger has layout for ie6 and ie7 */
}

div ul#comments li.comment .comment_content{
    background:transparent url(/images/bg/comment_bubble_mid.png) repeat-y scroll 0 0
}

/* background colours for the comments, stories and suggestions */
ul#comments li.even, ul#comments li.even .metadata{
    background-color:#d9eceb;
}
ul#comments li.odd, ul#comments li.odd .metadata{
    background-color:#c1d5d5;
}
ul#stories li.even, ul#stories li.even .metadata{
    background-color:#fab0c3;
}
ul#stories li.odd, ul#stories li.odd .metadata{
    background-color:#ff7b9a;
}
body.feedbacks ul#comments li.even, body.feedbacks ul#comments li.even .metadata{
    background-color:#f0e6b1;
}
body.feedbacks ul#comments li.odd, body.feedbacks ul#comments li.odd .metadata{
    background-color:#f7ec98;
}
ul#suggestions li.even .metadata, ul#suggestions li.even{
    background-color:#E4EFEF;
}
ul#suggestions li.odd .metadata, ul#suggestions li.odd, ul#feedbacks li.odd, ul#suggestions li.odd .metadata{
    background-color:#d9eceb;
}
ul#suggestions .user_submission_form li.missing_your_voice, ul#suggestions .user_submission_form li.missing_your_voice .metadata{
  background-color:#F2E9C2;
}

li.bubble img.profile_pic{
    position:absolute;
    top:7px;
    left:-100px;
}

div#comments_suggestions{
    margin-top:12px;
    background:transparent url(/images/bg/content_bg_mid.png) repeat-y scroll -4px bottom;
}

#comments_info, #suggestions_info, #stories_info, #comment_info{
  background:#fcfbfb url(/images/bg/create_comment_info.png) no-repeat 0 0;
  width:540px;
  margin-left:30px;
  padding-top:6px;
}

#comments_info p, #suggestions_info p, #stories_info p{
    margin-left:6px;
}

#comments_info .bottom, #suggestions_info .bottom, #stories_info .bottom{
  background:#fcfbfb url(/images/bg/create_comment_info.png) no-repeat 0 bottom;
  width:540px;
  height:10px;
  margin-left:0px;
}

ol.paginator{
    float:right;
    margin-right:20px;
    width:auto;
}

ol.paginator li, ul.paginator li{
    display:inline;
    padding:4px;
    font-size:85%;    
}



/* =================== */
/* = Nested comments = */
/* =================== */

/* These styles refer to comments on suggestions listed on the thoughts page, and on the create a new action page */

ul.suggestion_comments{
  margin-left:0px;
  background-color:#fcf9f9;
  padding-top:6px;
  width:440px;
}
ul.suggestion_comments li.bubble{
  width:354px;
  margin-left:85px;
  background-image:url(/images/bg/ug_nested_comment_top.png);
  margin-bottom:15px;
}
li.nested_comment .bubble{
  margin-left:0px;
}
li.nested_comment .user_submission_form .description{
  width:auto;

}
li.nested_comment .description{
  background-color:#E4EFEF;  
}

li.nested_comment .description textarea{
  height:180px;
  width:330px;
  margin-left:0px;
}
li.nested_comment div.metadata{
  width:342px;
  background-image:url(/images/bg/ug_nested_comment_bottom.png);  
}
ul.suggestion_comments li.nested_comment img.profile_pic{
  margin-left:-75px;  
  position:absolute;
  top:0px;
  left:0px;
}

ul.suggestion_choices{
  border-top:dotted #666 1px;
  margin-top:6px;
  padding-top:6px;
  width:420px;
}

/* these only exist in the ul.suggestion_buttons so we don't need to nest them here */
li.suggestion_buttons{
  float:right;
  width:auto;
}
li.suggestion_comments{
  width:195px;
  display:block;
  float:left;
}
li.view_action{
  width:95px;
  margin-top:2px;
  float:right;
}
a.create_action{
  display:block;
  height:40px;
  width:125px;
  background-image:url(/images/buttons/create_an_action.png);
  background-repeat: no-repeat;
  text-indent:-9999em;
}
a.create_action:hover{
  background-image:url(/images/buttons/create_an_action_rollover.png);
}
li.suggestion_buttons li{
  float:left;
  width:auto;
}

li.nested_comment .user_submission_form ul.form_actions{
  width:325px;
  padding-bottom:12px;
}




/* *New thought/feedback styles */

body.new #new_feedback #category h3, body.new #new_thought #category h3{
  padding-top:6px;
  padding-left:6px;
}
.thoughts .new h2.title{
    color:#5d4331;
}

/* *Thought Action Feedback Detail pages */
/* any ugc content should be black, where as 'official' copy should be brown (#5d4331) */
#primary_content p, #suggestions p, #stories p, #comments p, #active_users p{
  color:#111;
}

/* *Content Index pages */

#listing ul li a, #listing ul li, #listing #popular ul li a, #listing #hottest ul li a:hover{
    text-decoration: none;
    color:#111;
}

#listing .more a{
  text-decoration: none;
}
#listing .more a:hover{
  text-decoration:underline;
}
.thoughts #listing .more a{
  color:#81DDF2;
}
.actions #listing .more a{
  color:#FCAB75;


#listing ul li.paginator a:hover{
    text-decoration: underline;
}

#listing .more a:focus, #listing .more a:hover{
    text-decoration: underline;
}

#listing #actions .more a, #listing #actions .more a:hover, #listing #actions h3{
    color:#FAC39E;
}

#listing #thoughts .more a, #listing #thoughts .more a:hover, #listing #thoughts h3{
    color:#87e1f8;
}

body.feedbacks #listing .more a, body.feedbacks #listing .more a:hover, body.feedbacks #listing a:visited, body.feedbacks #listing h3{
    color:#89715f;
}