/*Color References:

These are used as background colors for the main sections of the site
feedback (yellow) - #f0e6b1;
feedback:hover (beige)- #F2E9C2;
thoughts (blue) - #81DDF2;
thoughts:hover (darker blue) 

*/

/* Instead of using css hacks, inidividual styles are passed to Internet Explorer using conditional comments to append classes to the body tag */

html {
color: #000;
background: #89715f;
}



#nagdoc {
    background: #89715f;
    width: 64em;
    padding-top: 6px;
    margin:auto;
    text-align: left;
}
.ie #nagdoc {
    /* check ie.css */
    width:63em;
}
#yui-main{
    width:595px;
}
.yui-t5 {
    width: 64em;
    margin:auto;
    text-align: left;
}
.ie .yui-t5 {
  /* for ie*/
  width:63em;
}

input.checkbox {
  width:30px;
}
body {
    background: #89715f;

}

/* = JS hidden Styles = */

/* this is used where forms are hidden when javascript, but we need to sort their appearance when js is switched off*/
label.js_hidden{
  display:block;
}

/* = Generic Form Styles = */

/* ============ */
/* = clearfix = */
/* ============ */

.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    padding-top:12px;
}
form textarea{
  width:520px;
  margin-top:12px;
  margin-bottom:12px;

}

/* ================= */
/* = Header -- #hd = */
/* ================= */

#hd {
    position: relative;
    background: transparent url(/images/bg/site_span_bg.png) no-repeat scroll 0px 0px
}

#hd h1 {
    display: block;
    width: 150px;
    height: 105px;
    text-indent: -9999em;
    background: url(/images/icons/the_nag_logo.png) no-repeat 10px 7px;
    position: relative;
    top: 6px;
    left: 5px;
}

#hd h1 a{
  display: block;
  width:150px;
  height:105px;
}

#hd ul#nav_menu {
    position: absolute;
    left: 160px;
    top: 80px;
    margin-left: 11px;
}

#hd ul#nav_menu li a {
    color: #5d4331;
    text-decoration: none;
}

#hd ul#nav_menu li a:hover {
    color: #EE2C74;
    border-bottom: 2px solid #EE2C74;
}

#hd ul#nav_menu li {
    display: inline;
    font-size: 1.3em;
    margin-right: 36px ;
}

#hd ul#secondary_nav {
    background: url(/images/buttons/the_nag_guide.png) no-repeat;
}

#hd ul#secondary_nav li.the_nag_guide {
    display: block;
    width: 120px;
    height: 60px;
    background: url(/images/buttons/the_nag_guide.png) no-repeat;
    position: absolute;
    top: 12px;
    left: 703px;
    text-indent: -9999em;
}
#hd ul#secondary_nav li.the_nag_guide a{
    display: block;
    width: 120px;
    height: 60px;  
}
#hd ul#secondary_nav li.the_nag_guide a:hover{
    background: url(/images/buttons/the_nag_guide_rollover.png) no-repeat;
}

/* search box */
#hd ul#secondary_nav li.search {
  display: block;
  position: absolute;
  top: 78px;
  left: 668px;
}
#global_search input.text{
  width:120px;
  height:18px;
  margin-top:0px;  
  padding-bottom:0px;
}
.ie #global_search input.text{
  padding-bottom:2px;
}

#hd ul#secondary_nav li.search label {
    display: none;
}
#hd ul#secondary_nav li.search p{
  position:relative;
}
/* hiding this for now, until we decide what it will look like*/
#global_search input.image {
  position:absolute;
  top:0px;
  right:-24px;
  width:25px;
}
.ie #global_search input.image {
  top:1px;
}

#hd .bottom {
    background: url(/images/bg/site_span_bg.png) 0px bottom no-repeat;
    height: 15px;
}
#breadcrumbs {
    margin-left: 16px;
/*    margin-top: 8px;*/
}
#breadcrumbs span {
    font-size: 77%;
    padding-right: 9px;
}

/* ============== */
/* = Activation = */
/* ============== */

body.activations_create div.wrap{
  padding-left:32px;
  padding-top:18px;
}

body.activations_create form.activate{
  margin-top:18px;
}



/* ======== */
/* = Body = */
/* ======== */

#bd {
    position: relative;
}

.main_content_top{
    position:relative;
    background: url(/images/bg/content_bg.png) -3px 0 repeat-y;
    min-height:20px;
    padding-left:32px;
    padding-top:24px;
}

/* reset padding for show pages*/
body.show .main_content_top, body.edit .main_content_top{
    padding-left:0px;
    padding-top:0px;
}

.wrap {
    background: url(/images/bg/content_bg_mid.png) -4px 0 repeat-y;
    width: 590px;
    position:relative;
}
.main_content_bottom {
    clear: both;
    position: relative;
    background: url(/images/bg/content_bg.png) no-repeat -3px bottom;
    min-height: 20px;
}
.ie div.main_content_bottom {
  height:20px;
}
  
/* *abstracted sizes = */

div.intro, div#listing{
    width:540px;
    position:relative;
}

div#listing ul{
    width:265px;
    height:322px;
    position:relative;
    right:-14px;
    overflow:hidden;
}

div#listing .first ul {
    width:265px;
    right:0px;
    left:-1px;
}

div.wrap{
    padding-left:24px;
}

/* these allow for content to be inside main wrap*/
.wrap .main_content_bottom{
    left:-24px;
    position:relative;
    top:20px;
}

.wrap .main_content_top{
    left:-18px;
    height:18px;
}

#active_users, #news_ticker, #site_info {
    position: relative;
    background: transparent url(/images/bg/site_span_bg.png) no-repeat scroll 0px 0px;
    margin: auto;
    text-align: left;
    width: 64em;
}
div#site_info {
  margin-top:23px;
}
#active_users .bottom, #news_ticker .bottom, #site_info .bottom {
    background: url(/images/bg/site_span_bg.png) no-repeat 0px bottom;
    height: 20px;
}

#news_ticker ul#update_ticker{
  width:780px;
  height:18px;
  padding-left:6px;
  padding-right:6px;
  overflow:hidden;
}
#active_users h4{
  position:absolute;
  left:615px;
  top: 24px;
  z-index:20;
}

#active_users ul {
    padding-top: 15px;
    padding-left: 13px;
    position: relative;
}
#active_users ul li {
    display: inline;
    margin-left: 8px;
}
#active_users ul li .user_content {
    background: #FFF url(/images/bg/most_active_speech.png) no-repeat scroll 0px;
    position: absolute;
    top: 15px;
    left: 600px;
    width: 205px;
    height: 75px;
}

#active_users ul li .user_content p{
    margin-top:30px;
    margin-left:18px;
}

#active_users ul li .user_submission_form p {
    margin-top: 10px;
    margin-left: 10px;
}

div#news_ticker{
  height:50px;
  margin-top:2px;
}

div#news_ticker .bottom{
  position:relative;
  top:36px;
}

#news_ticker ul#update_ticker {
  height:40px;
  position:absolute;
  top:18px;
  left:17px;
}

#news_ticker ul#update_ticker li{
  overflow:hidden;
  width:200px;
  height:18px;
}
#site_info ul {
    padding-top: 17px;
    margin-left: 18px;
    text-align:center;
}

#news_ticker ul li, #site_info ul li {
    display: inline;
}



#site_info ul li {
    margin-right: 33px;
}

/* ========== */
/* = *Errors = */
/* ========== */

div.errorExplanation{
    padding-top:12px;
}

div.errorExplanation, .errorExplanation ul{
    width: 480px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px;
}

.errorExplanation ul li, .errorExplanation p{
    margin:6px;
}

/* ========= */
/* = *Flash = */
/* ========= */

div#flash_notice, div#flash_error{
width: 480px;
margin-left: auto;
margin-right: auto;
margin-bottom: 12px;
margin-top:18px;
}


/* =========== */
/* = *Sidebar = */
/* =========== */

.ie .sidebar{
  margin-right:7px;
}

.sidebar_section{
    margin-left:20px;
    width:200px;
}

/* ============= */
/* = *Login box = */
/* ============= */

#bd #login_register {
    background: url(/images/bg/sidebar.png) no-repeat 6px -3px;
    margin-top: 8px;
    position: relative;
    padding-top:8px;
    width:auto;
}

#login_register h4{
    margin-left:18px;
}

#bd #login_register form {
    margin-left: 30px;
    padding-top: 30px;
}

#bd #login_register form input.text {
    width: 172px;
    margin-bottom: 12px;
}
#bd #login_register .buttons{
    position:relative;
    width:182px;
    height:90px;
}
#bd #login_register .buttons .register{
  width:90px;
  position:absolute;
  top:10px;
  left:10px;
  display:block;
}
#bd #login_register .buttons .sign_in{
  width:90px;
  position:absolute;
  top:10px;
  display:block;
  left:100px;
}
input#signin {
    text-indent: -9999em;
    position:absolute;
}
input#user_session_remember_me{
  position:absolute;
  text-indent:0px;
  top:0px;
}
#login_register form p.sign_in{
  position:absolute;
  width:80px;
  height:40px;
  width:120px;
}

#login_register form p.sign_in input.image {
    text-indent: -9999em;
    display: block;
    position: relative;
    left: 2px;
    /* width:80px;*/
    /* height:38px;*/
}

#bd #login_register form p.forgot_password {
    margin-left: 6px;
    width:70px;
    position:absolute;
    top:60px;
    left:10px;
}

#bd #login_register form p.remember_me {
    position:absolute;
    left: 100px;
    top:60px;
}
#bd #login_register form p.remember_me label{
  float:right;
  padding-left:18px;
  /* below for ie7*/
  padding-top:0px;
}
#login_register form p.remember_me input{
  float:left;
}

#login_register form p.register input.image {
    position: relative;
    left: 2px;
    display: block;
    width: 80px;
    height: 38px;
    background: url(/images/buttons/register.png) no-repeat;
}

#login_register form p.register a#register {
    text-indent: -9999em;
    display: block;
    /* position: relative;*/
    /* left: 2px;*/
    width:80px;
    height: 38px;
    background: url(/images/buttons/register.png) no-repeat;
}

#bd #login_register form p.remember_me label {
    display: inline;
}

#bd #login_register div.bottom, #nag_toolbar .bottom {
    background: url(/images/bg/sidebar.png) no-repeat 6px bottom;
    margin: 0px;
    position: relative;
    height: 20px;
    width:240px;
}

#nag_toolbar .bottom {
    left:-24px;
}

  /* = Call to Action = */
/* ================== */

#bd #call_to_action {
    background: url(/images/bg/sidebar.png) no-repeat 6px -3px;
    margin-top: 3px;
    min-height: 40px;
    position: relative;
}
#bd #call_to_action a.register_image, #bd #call_to_action a.register_image:hover{
  display:block;
  width:215px;
  height:290px;
  margin-left:19px;
  background:url(/images/icons/signed_out_sprite.png) no-repeat left;
  text-indent:-9999em;
}
#bd #call_to_action a.register_image:hover{
    background:url(/images/icons/signed_out_sprite.png) no-repeat -217px;
}
#bd #call_to_action img {
  margin-left:8px;
}
#bd #call_to_action .bottom{
    background: url(/images/bg/sidebar.png) no-repeat 6px bottom;
    height:15px;
}


/* = *Nag ToolBar = */
/* This is the section on the right, giving quick access to user generated items */

#nag_toolbar{
    background: url(/images/bg/sidebar.png) no-repeat 6px 6px;
    padding-left:24px;
    padding-top:12px;
    position:relative;
}
.ie #nag_toolbar{
    display:inline-block; /*added in for IE7 - see http://haslayout.net/haslayout*/
}
#nag_toolbar img.profile_pic{
    float:right;
    margin-right:22px;
    margin-top:14px;
}
#login_register h4.salutation{
margin-top:10px;
}
div#nag_box{
    margin-top:18px;
    width:200px;
}
div#nag_box h4{
    font-size:123%;
}
div#my_nag_menu{
    margin-top:12px;
}
div#my_nag_menu h4{
    margin-top:6px;
}
div#my_nag_menu h4{
    background:url(/images/bg/nag_tag_corners.png) top;
    color:#fff;
    width:178px;
    padding: 4px 6px 4px 12px ;
}
div#nag_box .ui-accordion h4{
    background:url(/images/bg/nag_tag_corners_closed.png) no-repeat;
}
div#nag_box .ui-accordion h4.selected{
  background-image:url(/images/bg/nag_tag_corners.png);
}
div#my_nag_menu h4.my_thoughts{
    background-color:#81DDF2;
}
div#my_nag_menu h4.my_suggestions{
    background-color:#A8AF91;
}
div#my_nag_menu h4.my_actions{
    background-color:#FAC39E;
}
div#my_nag_menu h4.my_comments{
    background-color:#ACBABC;
}
div#my_nag_menu h4.my_stories{
    background-color:#ED97AB;
}
div#my_nag_menu h4.my_feedbacks{
    background-color:#f0e6b1;
}
div#my_nag_menu ul{
    background:#ffffff url(/images/bg/nag_tag_corners.png) repeat scroll 0 bottom;
    padding-top:4px;
    padding-bottom:4px;
    width:196px;
}   
div#my_nag_menu ul li{
    width:180px;
    background:#ffffff;
    padding: 6px 0px 6px 16px ;
}
div#my_nag_menu ul li p{
    width:160px;
    padding-left:8px;
    padding-bottom:6px;
    border-bottom:#ddd 2px solid;    
}
p.sign_out{
    padding-top:12px;
    text-align:center;
    font-size:138%;
    color:#5d4331;
}
p.sign_out a{
    color:#5d4331;
    text-decoration: none;
}

/* ====================== */
/* = Front page content = */
/* ====================== */

#bd ul#introduction {
    display: block;
    height: 120px;
    background: url(/images/icons/homepage_3_images.png) no-repeat 0px 0px;
    position: relative;
}

#bd ul#introduction li {
    font-size: 0.9em;
    position:absolute;
    display:block;
    height:110px;
    width:120px;
}

#bd ul#introduction li a{
    position:absolute;
    bottom:7px;
    left:0px;
    display:block;  
    color:#5d4331;
    text-decoration:none;
    padding-top:90px;
}

#bd ul#introduction li a{
    font-size:88%;
}

#bd ul#introduction li a:hover, #bd ul#introduction li a:focus{
    text-decoration:underline;
}
#bd ul#introduction li#get_off_your_chest{
    left: 45px;
    top: 5px;
}
#bd ul#introduction li#get_off_your_chest a{
}

#bd ul#introduction li#get_off_your_chest a:hover{
/*    height:100px;   */
    display:block;    
}

#bd ul#introduction li#suggest_solutions {
    left: 215px;
    top: 5px;
}

#bd ul#introduction li#suggest_solutions a{
    left:5px;    
}
    
#bd ul#introduction li#do_something {
    left: 375px;
    top: 5px;
}

#bd ul#introduction li#do_something a{
    left:15px;    
}

.about #bd h2 {
    font-size: 116%;
}

.index h2{
    margin-left:15px;
}

/* = Content Indexes = */

#listing h3 {
    font-size: 138.5%;
    margin-left: 32px;
    margin-top: 20px;
}

#listing .first h3 {
    position:relative;
    margin-left:22px;
    width:200px;
}

#listing div.first{
    margin-left:0px;
}

#listing ul {
    margin-left: 0px;
    margin-top: 8px;
}

#listing  .more{
    font-size: 116.0%;
    text-align:center;
    width:250px;
    position:relative;
    right:-14px;
    padding-top:12px;
}


#listing ul li {
    width: 220px;
    height: 45px;
    margin-top: 2px;
    padding-left: 15px;
    padding-right: 18px;
    padding-top: 8px;
    background: url(/images/bg/speech_bubble.png) no-repeat;
}

#listing ul li.thoughts a, #listing ul li.thoughts a:visited, #listing ul li.actions a, #listing ul li.actions a:visited, #listing ul li.feedbacks a, #listing ul li.feedbacks a:visited{
    text-decoration: none;
    color:#000000;
}

#listing ul li a {
padding-right:30px;
display:block;
width:195px;
height:35px;
}
#listing ul li a:hover{
  display:block;
  width:195px;
  height:35px;
}

#listing ul li.action{
    background-color: #FAC39E;
}
#listing ul li.action:hover{
    background-color: #FCAB75;
}
#listing ul li.thought{
    background-color: #81DDF2;
}
#listing ul li.thought:hover{
    background-color: #81DDF2;
}
#listing ul li.intent{
    background-color:#fab0c3;  
}
#listing ul li.intent:hover{
    background-color:#ff7b9a;  
}
#listing ul li.feedback{
    background-color: #f0e6b1;
}
#listing ul li.feedback:hover{
    background-color: #f7ec98;    
}
#listing ul li.feedback a, #listing ul li.feedback a:hover{
  background:transparent url(/images/icons/nag_sprite.png) no-repeat scroll 175px -170px;
}
#listing ul li.intent a, #listing ul li.intent a:hover{
  background:transparent url(/images/icons/nag_sprite.png) no-repeat scroll 175px -317px;
}
#listing ul li.action a, #listing ul li.action a:hover{
  background:transparent url(/images/icons/nag_sprite.png) no-repeat scroll 175px -20px;
}
#listing ul li.suggestion a, #listing ul li.suggestion a:hover{
  background:transparent url(/images/icons/nag_sprite.png) no-repeat scroll 175px -242px;
}
#listing ul li.comment a, #listing ul li.comment a:hover{
  background:transparent url(/images/icons/nag_sprite.png) no-repeat scroll 175px -94px;
}
#listing ul li.rant a, #listing ul li.rant a:hover{
  background:transparent url(/images/icons/nag_sprite.png) no-repeat scroll 175px -464px;
}
#listing ul li.idea a, #listing ul li.idea a:hover{
  background:transparent url(/images/icons/nag_sprite.png) no-repeat scroll 175px -390px;
}
#listing ul li.wish a, #listing ul li.wish a:hover{
  background:transparent url(/images/icons/nag_sprite.png) no-repeat scroll 175px -538px;
}
/* idea is at -390px*/
/* rant is at -464px*/
/* wish is at -538px*/

#listing ul li.suggestion{
    background-color: #D0D5C4;
}
#listing ul li.suggestion:hover{
    background-color: #B4BC9C;    
}
#listing ul li.comment{
    background-color: #ACBABC;
}
#listing ul li.comment:hover{
    background-color: #889899;    
}
#listing ul li.story{
    background-color: #ED97AB;
}
#listing ul li.story:hover{
    background-color: #E57794;    
}
#listing ul li.paginator{
  text-align:center;
  padding-top:18px;
}
#listing ul li.paginator a{
  display:inline;
  padding-right:4px;
}
.thoughts #active_users ul li .user_content {
    background-color: #81DDF2;
}

#listing .no_activity {
  min-height:342px;
}
#listing .no_activity h2{
  padding-top:12px;
}

#listing .activities_page {
  clear: both;
  position: relative;
  height: 342px;
}

#listing .activities_page .left {
  position: absolute;
  left: 0px;
  top: 0;
}

#listing .activities_page .right {
  position: absolute;
  left: 280px;
  top: 0;
}

#listing #paginator {
  display: block;
  clear: both;
  height:auto;
  float:left;
  margin-bottom:8px;
  margin-top:0px;
}
#listing #paginator {
  width:535px;
  right:0px;
  margin-left:0px;
  padding-left:0px;
  height:30px;
  position:relative;
}
#listing ul#paginator li.activities{
  height:10px;
  width:auto;
  margin:2px;
  padding:2px;
  float:left;
}
#listing ul#paginator li.activities a{
  padding:2px;
  margin:2px;
}
#listing ul#paginator li#activities_next{
  position:absolute;
  left:460px;
}
#listing ul#paginator li#activities_prev{
  position:absolute;
  left:400px;  
}
#listing ul#paginator li a{
  width:auto;
  height:auto;
}
#listing .paginator_prev{
  float:left;
  left:20px;
  width:100px;
}
#listing .paginator_next{
  float:right;
  right:20px;
  width:100px;

}

/* ================ */
/* = User Sign up = */
/* ================ */

#ajax_flash{
  display: none;
}

body.users_new div.wrap{
  padding-left:24px;
  padding-top:18px;

}

form#new_user div.sign_up_screen {
    padding-left: 18px;
    padding-top: 36px;
    padding-bottom: 36px;
    width:520px;
    background:url(/images/bg/sign_up_bg.png) no-repeat scroll 0 0;
}

form#new_user div.sign_up_screen input {
    display: inline;
    width: 140px;
    margin-right: 6px;
}

form#new_user select#user_country{
  width:150px;
}

form#new_user div.sign_up_screen p.dob input.day, form#new_user div.sign_up_screen p.dob input.month {
    width: 20px;
}

form#new_user div.sign_up_screen p.dob input.year {
    width: 40px;
}

form#new_user div.sign_up_screen input.checkbox{
  width:30px;
}

#form_submit {
    height: 45px;
    width:560px;
    margin-top:18px;
}

form#new_user #form_submit .forward, body.pages #form_submit .forward, body.pages #form_submit .back, div.actions a.back{
    float: right;
    margin-right: 36px;
}

#form_submit a.button{
    display:block;
    height:40px;
    width:60px;
    text-indent:-9999em;
    float:right;
    margin-right:18px;
}

#form_submit a.next{
        background: transparent url('/images/buttons/next.png') no-repeat;
}

#form_submit a.back{
    background: transparent url('/images/buttons/back.png') no-repeat;
    float:left;
}

/* ================== */
/* = Password Reset = */
/* ================== */

.password_resets h3{
  padding-top:18px;
  padding-bottom:12px;
  width:510px;
}

body.password_resets_edit .main_content_top{
  padding-left:32px;
  padding-top:24px;  
}



/* ============ */
/* = Thoughts = */
/* ============ */

body.thoughts div.intro {
    background: url(/images/bg/illustration_background.png) no-repeat;
    height: 120px;
    margin-top: 14px;
}
body.ie p.intro_copy, body.thoughts_index p.intro_copy  {
  margin-top: 10px;
  margin-left: 10px;
  width: 180px;
}
body.thoughts div.intro a#create_new_thought {
    width: 150px;
    height: 40px;
    background: url(/images/buttons/whats_on_your_mind.png) no-repeat;
    display: block;
    text-indent: -9999em;
    margin-top: 4px;
    margin-left: 4px;
}


body.thoughts #bd h2.subtitle {
    position: absolute;
    left: 105px;
    top: 30px;
    z-index:5;
}
body.thoughts div.intro {
    clear: left;
    position: relative;
}
body.thoughts div.intro img {
    float: left;
    position: relative;
    top: 10px;
    left: 10px;
}
body.thoughts div.intro .yui-g {
  margin-left: 120px;
  width: 410px;
}
body.thoughts div.intro form#search_box{
  position:absolute;
  top:34px;
  left:340px;
}
body.thoughts_index #search_box #search_button{
  position:relative;
  top:9px;
  left:-2px;
}
#bd form#search_box label.search_tag_line{
  display:block;
}



/* ================================= */
/* = Thought/action/suggestion new = */
/* ================================= */

body.new div.wrap, body.create div.wrap{
  padding-left:36px;
  width:570px;
}
body.index div.wrap{
    padding-top:12px;
}
div#category{
  background: url(/images/bg/create_category.png) no-repeat 0 0;
  width:520px;
  position:relative;
  top:18px;
  margin-bottom:18px;
}
#category .bottom{
  background:url(/images/bg/create_category.png) no-repeat 0 bottom;
  width:520px;
  height:10px;
  margin-left:0px;
}
form#new_thought div#category, form#new_thought #category .bottom{
  background-color:#81DDF2;
}
form#new_feedback div#category, form#new_feedback #category .bottom{
  background-color:#f0e6b1;
}
form#new_feedback div#category h3{
    background: transparent no-repeat 450px -167px url('/images/icons/nag_sprite.png');
    height:27px;
}
form#new_thought label, body.new form#new_feedback label{
  display:block;
}

#category ul{
  width:530px;
  background: no-repeat 450px -464px url('/images/icons/nag_sprite.png');
  /* idea is at -390px*/
  /* rant is at -464px*/
  /* wish is at -538px*/
}
#category ul li{
  float:left;
  margin-top:8px;
}
#category ul li input.radio{
  position:relative;
  top:3px;
}
#category ul li label{
  display:inline;
  margin-right:6px;
  margin-left:36px
}
#category fieldset#kind_of_thought{
  overflow:hidden;
  width:530px;
  height:33px;
}
.ie #category fieldset#kind_of_thought{
  height:30px;
}
#category fieldset#kind_of_thought .fieldWithErrors{
  display:inline;
  width:24px;
}
#category .yui-gb .yui-u input.checkbox, #category .yui-gb .yui-u input.radio{
  position:relative;
  top:3px
}
input.text{
  padding: 0.2em 0px 0.2em 0.2em ;
  margin-top:12px;
  margin-bottom:12px;
  width:510px;
  font-style: italic;
  color: #BFBFBF;  
}
.ie input.text{
  padding-bottom:3px;
  padding-bottom:3px;
}
#search_box input.text{
  width: 140px;
  padding-bottom:0px;
}
#bd .yui-toolbar-group h3{
  font-size:75%;
}
div.form_actions{
  margin-top:12px;
}
.form_actions a#cancel{
  display:block;
  height:40px;
  width:65px;
  text-indent:-9999em;
  float:right;
  margin-right:18px;
  background-image:url(/images/buttons/cancel.png);
}
.form_actions input#submit{
  float:right;
  padding-right:50px;
}



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

#primary_content div.posted_by{
  position:relative;

}
div#share_this{
  height:25px;
  position:absolute;
  right:60px;
  top:11px;
  width:85px;
}
.wrap .bubble{
    padding-top:12px;
}
/* these are background for the speech bubble*/
.wrap .thought {
    background-color:#7fe1f7;
}
.wrap .action {
    background-color:#fac39e;
}
.wrap .suggestion {
    background-color:#d0d5c4;
}
.wrap .feedback {
    background-color:#f0e6b1;
}

/* this form is used for adding stories, comments and suggestions */
.user_submission_form{
    position:relative;
    padding-top:12px;
}
.user_submission_form .bubble {
    width:540px;
    background-image: url(/images/bg/suggestion_story_corners.png);
    background-repeat: no-repeat;
    background-position: 0 -15px;
    margin-left:30px;
}
.user_submission_form .suggestion{
    background-color:#d0d5c4;
}
.user_submission_form .comment, .user_submission_form .story{
    background-color:#fcf9f9;
}
.user_submission_form .action{
    background-color:#fac39e;  
}
body.actions_new .user_submission_form .action{
 margin-left:0px;
}
.user_submission_form .comment{
padding-top:16px;
}
.user_submission_form .suggestion input.text, .user_submission_form .suggestion textarea, .user_submission_form .suggestion  #action_params_description_container, body.actions_new .user_submission_form #new_content_container, body.actions_new .user_submission_form input.text{
  margin-left:10px;
}
div.user_submission_form h2{
  margin-left:10px;
}
.user_submission_form .suggestion input.text, #actions_create .user_submission_form .suggestion input.text, body.actions_new .user_submission_form input.text{
  width:510px;
}
.user_submission_form .suggestion textarea{
  width:515px;
}
#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;
}
#new_content_container{
  margin-left:0px;
}


/**/
.user_submission_form .bubble .bottom{
    height:12px;
    padding-bottom:0px;
}
.user_submission_form .suggestion .bottom{
    background: url(/images/bg/suggestion_story_corners.png) no-repeat 0 -0px;
    width:540px;
    min-height:15px;
}

.ie .user_submission_form input.text, .ie .user_submission_form input textarea#action_params_description_container, .ie .user_submission_form textarea#action_params_description, .ie .user_submission_form textarea#comment_comment, .ie textarea#story_story{
  position:relative;
  left:-20px;
  margin-left:0px;
}


#bd .user_submission_form .bottom{
  padding:0px;
}

div.supplementary_info {
  position: absolute;
  top: 6px;
  left: 30px;
}

li.user_profile_pic img{
    background-color:#f3ebe8;
}

#bd div.supplementary_info ul li {
    width: 80px;
}

#bd div.supplementary_info ul li.followers, #bd div.supplementary_info ul li.suggestions, #bd div.supplementary_info ul li.members, #bd div.supplementary_info ul li.done_it, #bd div.supplementary_info ul li.doing_it{
  width:60px;
  margin-top:12px;
  margin-left:6px;
}
#bd .form_actions li, div.nag_someone a{
    float:right;
    text-indent:-9999em;
}
/* with these styles now as POST requests behind buttons, these may not be necessary */

#bd .form_actions li.follow, #bd .form_actions li.follow a{
/*    background:url(/images/buttons/my_issue_too.png) no-repeat;*/
    width:65px;
    height:40px;
    display:block;
}
#bd .form_actions li.unfollow, #bd .form_actions li.unfollow a{
  width:75px;
}
#bd .form_actions li.nag_someone, #bd .form_actions li.invite a, div.invite a{
    background:url(/images/buttons/invite.png) no-repeat;
    width:60px;
    height:40px;
    display:block;    
}

#bd .form_actions li.back_to_thought{
  float:left;
  margin-left:90px;
}
#bd .form_actions li.back_to_thought a{
  background:url(/images/buttons/back_to_thought.png) no-repeat;
  width:95px;
  height:40px;
  display:block;
  float:left;
}
#bd .form_actions li.add_a_story, #bd .form_actions li.add_a_story a{
    background:url(/images/buttons/add_a_story.png) no-repeat;
    width:95px;
    height:40px;
    display:block;    
}

#bd .form_actions li.add_more, #bd .form_actions li.add_more a, a.add_more{
    background:url(/images/buttons/add_more.png) no-repeat;
    position:absolute;
    left:325px;
    top:10px;
    width:95px;
    height:40px;
    display:block;
    text-indent:-9999em;
}
#bd .form_actions li.cancel, #bd .form_actions li.cancel a, div#invite_form a.cancel{
    background:url(/images/buttons/cancel.png) no-repeat;
    position:absolute;
    left:0px;
    top:10px;
    width:65px;
    height:40px;
    display:block;
    text-indent:-9999em;

}

#bd .form_actions li.add_a_story, #bd .form_actions li.make_a_suggestion a, div.actions a.add_a_story{
    background:url(/images/buttons/make_a_suggestion.png) no-repeat;
    width:135px;
    height:40px;
    display:block;    
}

div#ive_done_it div.actions{
  margin-top:36px;
}

div.actions a.back{
  text-indent:-9999em;
  height:40px;
  width:55px;
  display:block;    
}

div.actions a.add_a_story{
  text-indent:-9999em;
  height:40px;
  width:95px;
  background:url(/images/buttons/add_a_story.png) no-repeat;
}

div.actions a.back{
  float: right;
  margin-right: 36px;
  background: transparent url('/images/buttons/back.png') no-repeat;
}

#bd .form_actions li.ill_do_it{
    width:70px;
    height:40px;
    display:block;    
}
#bd .form_actions li.join_this_nag{
  width:70px;
  height:40px;
  display:block;    
}
#bd .form_actions li.ive_done_it, #bd .form_actions li.ive_done_it a{
    width:100px;
    height:40px;
    display:block;
}


.form_actions li input.comment{
  display:block;

}

#bd .form_actions li.comment, #bd .form_actions li.comment a{
    background:url(/images/buttons/comment.png) no-repeat;
    width:90px;
    height:40px;
    display:block;    
}

/* = *Search Pages = */
/* ================ */

body.search h2{
  margin-bottom:12px;
}
body.search h2 span.search_term{
  font-style:italic;
  color:#bfbfbf;
}
div#search, div#search .bottom{
    background: #F8F8F8 url(/images/bg/sign_up_bg.png) no-repeat 0 0;
    width:540px;
    position:relative;
    margin-top:0px;
    height:85px;
}
div#search form{
    padding-left:12px;
    padding-top:12px;
}
body.search #bd div#search form#search_box{
    position:absolute;
    left:0px;
    top:0px;
}
div#search div.search_result_count{
  position:absolute;
  top:32px;
  right:20px;
}
form#search_box input.search{
    float:left;
    margin-top:12px;
}
.ie form#search_box input#search{
    padding-top:3px;
    padding-bottom:3px;
}
form#search_box input.search_button{
  position:relative;
  top:12px;
  left:0px;
}
body.index form#search_box input.search_button{
  position:relative;
  top:7px;
  left:-3px;
}
body.ie form#search_box input.search_button{
  position:relative;
  top:-8px;
  left:-3px;
}

div#search .bottom{
    background:#F8F8F8 url(/images/bg/sign_up_bg.png) no-repeat 0 bottom;
    height:10px;
    margin-left:0px;
}

/* = *Account = */
/* =========== */

/* account tab navigation*/
ul#account_tabs{
  display:block;
  height:50px;
  padding-top:0;
  position:relative;
  width:600px;
}
.main_content_top ul.show_accounts{
 background:transparent url(/images/bg/profile_tab_sprite.png) repeat-y scroll -2px -4px;
}
.main_content_top ul.edit_accounts{
 background:transparent url(/images/bg/profile_tab_sprite.png) repeat-y scroll -3px 178px;
}
.main_content_top ul.edit_notifications{
 background:transparent url(/images/bg/profile_tab_sprite.png) repeat-y scroll -0px 116px;
}
.main_content_top ul.edit_more_infos{
 background:transparent url(/images/bg/profile_tab_sprite.png) repeat-y scroll -0px 57px;
}
ul#account_tabs li{
    display:block;
    position:absolute;
    height:40px;
    font-size:138%;
    padding:12px 10px 0 15px ;
    width:105px;
}
ul#account_tabs li.my_content{
    left:5px;
}
ul#account_tabs li.my_account{
    left:135px;
}
ul#account_tabs li.my_emails{
    left:265px;
}
ul#account_tabs li.more_info{
    left:395px;
}

/* account shared styles */
.accounts .wrap, .notifications .wrap, .more_infos .wrap{
    padding-left:28px;
    padding-top:6px;
}
.more_infos ul.account_form, .notifications ul.account_form, .accounts ul.account_form{
    padding-left:6px;
    padding-top:12px;
    padding-bottom:12px;
}
ul.account_form li.info{
  clear:left;
}
.more_infos ul.account_form li:after, .accounts ul.account_form li:after, .notifications ul.account_form li:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    padding-top:12px;
}
.more_infos ul.account_form li label, .notifications ul.account_form li label, .accounts ul.account_form li label {
    width:100px;
    margin-top:6px;
    float:left;
}
.accounts #bd ul.account_form li input.text{
  margin-bottom:0px;
  margin-top:2px;
}
.more_infos ul.account_form li label.select, .more_infos ul.account_form li select, .more_infos ul.account_form li input.text, .accounts ul.account_form li label.select, .accounts ul.account_form li input.text, .accounts ul li select {
    width:200px;
}
.accounts ul.account_form li select {
    float:left;
    margin-top:4px;
}
.notifications ul.account_form li input.checkbox, .accounts ul.account_form li input.checkbox {
    margin-right:18px;
    float:left;
}
.accounts li.explanation p, .more_infos li.explanation p{
    color:#5d4331;
    font-size:100%;
    font-style:normal;
    width:350px;
}
.more_infos #form_submit, .accounts #form_submit, .notifications #form_submit{
  width:540px;
  margin-top:18px;
}
input#save_changes{
  float:right;
}

/* account > my content page */
/* ========================= */


div#filter{
    padding-top:12px;
    background: #F8F8F8 url(/images/bg/sign_up_bg.png) no-repeat 0 0;
    width:540px;
    position:relative;
    margin-top:0px;
    margin-bottom:15px;  
    height:30px;
}
div#filter form{
  margin-left:12px;
}
div#filter form select.filter_select{
  width:200px;
  margin-right:12px;
}
div#filter div.bottom{
      background: #F8F8F8 url(/images/bg/sign_up_bg.png) no-repeat 0 bottom;
      height:10px;
      width:540px;

}


/* account > my details page*/
.accounts ul.account_form ul#avatar_image{
    width:540px;
    min-height:100px;
    padding-top:10px;
    padding-bottom:10px;
    background:#F8F8F8 url(/images/bg/file_upload_border.png) no-repeat scroll 0 0;
    position:relative;
    left:-6px;
}
.accounts ul.account_form ul#avatar_image img{
  position:absolute;
  right:10px;
  top:10px;
}
.accounts ul.account_form ul#avatar_image li input#user_avatar{
  margin-top:30px;
  margin-left:15px;
}
.accounts ul.account_form ul#avatar_image li label.upload_hint {
font-size:83%;
left:20px;
position:absolute;
top:25px;
width:400px;
}

.accounts ul.account_form ul#avatar_image li label.upload_description {
font-size:83%;
left:20px;
position:absolute;
top:85px;
width:400px;
}
.accounts ul.account_form ul#avatar_image li a.clear_upload {
  text-decoration: underline;
  margin-left:6px;
}
.accounts ul.account_form li.user_name label {
     margin-top:0px;

}
.accounts ul.account_form li.user_name span.user_name{
  margin-top:6px;
}
.accounts ul.account_form li ul.location{
    margin-left:100px;
}

/* account > my emails page*/
.notifications ul.account_form, .more_infos ul.account_form{
    min-height:200px;
    background:#F8F8F8 url(/images/bg/sign_up_bg.png) no-repeat scroll 0 0;
    width:534px;
    padding-top:18px;
    padding-bottom:18px;
}
.more_infos ul.account_form li, .notifications ul.account_form li{
  margin-top:12px;
}
.notifications ul.account_form li input.checkbox{
  margin-left:18px;
}
.notifications ul.account_form li label{
  width:400px;
  margin-top:0px;
} 

/* account > my info page*/
.more_infos ul.account_form li label{
  width:200px;
  margin-left:12px;
} 
.more_infos ul.account_form li.explanation{
    padding-top:18px;
    padding-left:12px;
}

/* = New Action = */

h4.explanation{
  background-attachment:scroll;
  background-color:#FFFFFF;
  background-image:url(/images/bg/content_bg_mid.png);
  background-position:-4px 0;
  background-repeat:repeat;
  padding-bottom:10px;
  padding-left:30px;
  padding-top:10px;
  width:585px;
}
body.actions_new .bubble{
  margin-left:47px;
}


/* = Feedback index page = */

body.feedbacks_index #bd form#search_box{
  top:5px;
}
body.feedbacks_index #search_box #search_button{
  position:relative;
  top:9px;
  left:-2px;
}

/* = Create feedback page = */

a#create_new_feedback{
    background: transparent url(/images/buttons/add_your_feedback.png) no-repeat;
    display:block;
    width:150px;
    height:40px;
    text-indent:-9999em;
}

body.feedbacks div.intro, body.actions div.intro {
    background: url(/images/bg/illustration_background.png) no-repeat;
    min-height:120px;
/*    break validation for IE6*/
/*    _height:120px;*/
}

body.feedbacks div.intro a#create_new_thought {
    width: 150px;
    height: 40px;
    background: url(/images/buttons/whats_on_your_mind.png) no-repeat;
    display: block;
    text-indent: -9999em;
    margin-top: 40px;
    margin-left: 20px;
}

body.feedbacks #bd h1 {
    color: #5d4331;
}

body.feedbacks div.intro img {
  float: left;
  position: relative;
  top: 10px;
  left: 10px;
}

body.feedbacks div.intro .yui-g, body.actions div.intro .yui-g {
  margin-left: 120px;
  width: 410px;
}

body.feedbacks div.intro .yui-g .first, body.actions div.intro .yui-g .first{
  margin-top:18px;
}

body.feedbacks div.intro .yui-g .first p, body.actions div.intro .yui-g .first p{
width:180px;
}

/* = *Actions index = */

body.actions div.intro img {
  float: left;
  position: relative;
  top: 10px;
  left: 10px;
}

body.actions h1{
    padding-left:6px;
}
.ie div.bottom {
  zoom:1;
}