[Summary view] [Print] [Text view]

   1  /* Button Styles
   2  ---------------------------------------- */
   3  
   4  /* Rollover buttons
   5     Based on: http://wellstyled.com/css-nopreload-rollovers.html
   6  ----------------------------------------*/
   7  .buttons {
   8      float: left;
   9      width: auto;
  10      height: auto;
  11  }
  12  
  13  /* Rollover state */
  14  .buttons div {
  15      float: left;
  16      margin: 0 5px 0 0;
  17      background-position: 0 100%;
  18  }
  19  
  20  /* Rolloff state */
  21  .buttons div a {
  22      display: block;
  23      width: 100%;
  24      height: 100%;
  25      background-position: 0 0;
  26      position: relative;
  27      overflow: hidden;
  28  }
  29  
  30  /* Hide <a> text and hide off-state image when rolling over (prevents flicker in IE) */
  31  /*.buttons div span        { display: none; }*/
  32  /*.buttons div a:hover    { background-image: none; }*/
  33  .buttons div span            { position: absolute; width: 100%; height: 100%; cursor: pointer;}
  34  .buttons div a:hover span    { background-position: 0 100%; }
  35  
  36  /* Big button images */
  37  .reply-icon span    { background: transparent none 0 0 no-repeat; }
  38  .post-icon span        { background: transparent none 0 0 no-repeat; }
  39  .locked-icon span    { background: transparent none 0 0 no-repeat; }
  40  .pmreply-icon span    { background: none 0 0 no-repeat; }
  41  .newpm-icon span     { background: none 0 0 no-repeat; }
  42  .forwardpm-icon span     { background: none 0 0 no-repeat; }
  43  
  44  /* Set big button dimensions */
  45  .buttons div.reply-icon        { width: {IMG_BUTTON_TOPIC_REPLY_WIDTH}px; height: {IMG_BUTTON_TOPIC_REPLY_HEIGHT}px; }
  46  .buttons div.post-icon        { width: {IMG_BUTTON_TOPIC_NEW_WIDTH}px; height: {IMG_BUTTON_TOPIC_NEW_HEIGHT}px; }
  47  .buttons div.locked-icon    { width: {IMG_BUTTON_TOPIC_LOCKED_WIDTH}px; height: {IMG_BUTTON_TOPIC_LOCKED_HEIGHT}px; }
  48  .buttons div.pmreply-icon    { width: {IMG_BUTTON_PM_REPLY_WIDTH}px; height: {IMG_BUTTON_PM_REPLY_HEIGHT}px; }
  49  .buttons div.newpm-icon        { width: {IMG_BUTTON_PM_NEW_WIDTH}px; height: {IMG_BUTTON_PM_NEW_HEIGHT}px; }
  50  .buttons div.forwardpm-icon    { width: {IMG_BUTTON_PM_FORWARD_WIDTH}px; height: {IMG_BUTTON_PM_FORWARD_HEIGHT}px; }
  51  
  52  /* Sub-header (navigation bar)
  53  --------------------------------------------- */
  54  a.print, a.sendemail, a.fontsize {
  55      display: block;
  56      overflow: hidden;
  57      height: 18px;
  58      text-indent: -5000px;
  59      text-align: left;
  60      background-repeat: no-repeat;
  61  }
  62  
  63  a.print {
  64      background-image: none;
  65      width: 22px;
  66  }
  67  
  68  a.sendemail {
  69      background-image: none;
  70      width: 22px;
  71  }
  72  
  73  a.fontsize {
  74      background-image: none;
  75      background-position: 0 -1px;
  76      width: 29px;
  77  }
  78  
  79  a.fontsize:hover {
  80      background-position: 0 -20px;
  81      text-decoration: none;
  82  }
  83  
  84  /* Icon images
  85  ---------------------------------------- */
  86  .sitehome, .icon-faq, .icon-members, .icon-home, .icon-ucp, .icon-register, .icon-logout,
  87  .icon-bookmark, .icon-bump, .icon-subscribe, .icon-unsubscribe, .icon-pages, .icon-search {
  88      background-position: 0 50%;
  89      background-repeat: no-repeat;
  90      background-image: none;
  91      padding: 1px 0 0 17px;
  92  }
  93  
  94  /* Poster profile icons
  95  ----------------------------------------*/
  96  ul.profile-icons {
  97      padding-top: 10px;
  98      list-style: none;
  99  }
 100  
 101  /* Rollover state */
 102  ul.profile-icons li {
 103      float: left;
 104      margin: 0 6px 3px 0;
 105      background-position: 0 100%;
 106  }
 107  
 108  /* Rolloff state */
 109  ul.profile-icons li a {
 110      display: block;
 111      width: 100%;
 112      height: 100%;
 113      background-position: 0 0;
 114  }
 115  
 116  /* Hide <a> text and hide off-state image when rolling over (prevents flicker in IE) */
 117  ul.profile-icons li span { display:none; }
 118  ul.profile-icons li a:hover { background: none; }
 119  
 120  /* Positioning of moderator icons */
 121  .postbody ul.profile-icons {
 122      float: right;
 123      width: auto;
 124      padding: 0;
 125  }
 126  
 127  .postbody ul.profile-icons li {
 128      margin: 0 3px;
 129  }
 130  
 131  /* Profile & navigation icons */
 132  .email-icon, .email-icon a        { background: none top left no-repeat; }
 133  .aim-icon, .aim-icon a            { background: none top left no-repeat; }
 134  .yahoo-icon, .yahoo-icon a        { background: none top left no-repeat; }
 135  .web-icon, .web-icon a            { background: none top left no-repeat; }
 136  .msnm-icon, .msnm-icon a            { background: none top left no-repeat; }
 137  .icq-icon, .icq-icon a            { background: none top left no-repeat; }
 138  .jabber-icon, .jabber-icon a        { background: none top left no-repeat; }
 139  .pm-icon, .pm-icon a                { background: none top left no-repeat; }
 140  .quote-icon, .quote-icon a        { background: none top left no-repeat; }
 141  
 142  /* Moderator icons */
 143  .report-icon, .report-icon a        { background: none top left no-repeat; }
 144  .warn-icon, .warn-icon a            { background: none top left no-repeat; }
 145  .edit-icon, .edit-icon a            { background: none top left no-repeat; }
 146  .delete-icon, .delete-icon a        { background: none top left no-repeat; }
 147  .info-icon, .info-icon a            { background: none top left no-repeat; }
 148  
 149  /* Set profile icon dimensions */
 150  ul.profile-icons li.email-icon        { width: {IMG_ICON_CONTACT_EMAIL_WIDTH}px; height: {IMG_ICON_CONTACT_EMAIL_HEIGHT}px; }
 151  ul.profile-icons li.aim-icon    { width: {IMG_ICON_CONTACT_AIM_WIDTH}px; height: {IMG_ICON_CONTACT_AIM_HEIGHT}px; }
 152  ul.profile-icons li.yahoo-icon    { width: {IMG_ICON_CONTACT_YAHOO_WIDTH}px; height: {IMG_ICON_CONTACT_YAHOO_HEIGHT}px; }
 153  ul.profile-icons li.web-icon    { width: {IMG_ICON_CONTACT_WWW_WIDTH}px; height: {IMG_ICON_CONTACT_WWW_HEIGHT}px; }
 154  ul.profile-icons li.msnm-icon    { width: {IMG_ICON_CONTACT_MSNM_WIDTH}px; height: {IMG_ICON_CONTACT_MSNM_HEIGHT}px; }
 155  ul.profile-icons li.icq-icon    { width: {IMG_ICON_CONTACT_ICQ_WIDTH}px; height: {IMG_ICON_CONTACT_ICQ_HEIGHT}px; }
 156  ul.profile-icons li.jabber-icon    { width: {IMG_ICON_CONTACT_JABBER_WIDTH}px; height: {IMG_ICON_CONTACT_JABBER_HEIGHT}px; }
 157  ul.profile-icons li.pm-icon        { width: {IMG_ICON_CONTACT_PM_WIDTH}px; height: {IMG_ICON_CONTACT_PM_HEIGHT}px; }
 158  ul.profile-icons li.quote-icon    { width: {IMG_ICON_POST_QUOTE_WIDTH}px; height: {IMG_ICON_POST_QUOTE_HEIGHT}px; }
 159  ul.profile-icons li.report-icon    { width: {IMG_ICON_POST_REPORT_WIDTH}px; height: {IMG_ICON_POST_REPORT_HEIGHT}px; }
 160  ul.profile-icons li.edit-icon    { width: {IMG_ICON_POST_EDIT_WIDTH}px; height: {IMG_ICON_POST_EDIT_HEIGHT}px; }
 161  ul.profile-icons li.delete-icon    { width: {IMG_ICON_POST_DELETE_WIDTH}px; height: {IMG_ICON_POST_DELETE_HEIGHT}px; }
 162  ul.profile-icons li.info-icon    { width: {IMG_ICON_POST_INFO_WIDTH}px; height: {IMG_ICON_POST_INFO_HEIGHT}px; }
 163  ul.profile-icons li.warn-icon    { width: {IMG_ICON_USER_WARN_WIDTH}px; height: {IMG_ICON_USER_WARN_HEIGHT}px; }
 164  
 165  /* Fix profile icon default margins */
 166  ul.profile-icons li.edit-icon    { margin: 0 0 0 3px; }
 167  ul.profile-icons li.quote-icon    { margin: 0 0 0 10px; }
 168  ul.profile-icons li.info-icon, ul.profile-icons li.report-icon    { margin: 0 3px 0 0; }
 169