/* ------------------------------------------------------------------------------
 <> SideTools.css
    Author: Erik Burns
    Version: 7 January 2008
    ----------------------------
	Styles the sidetools menus, which currently include navigation menus such as
	"regions", "friends", "groups", "browse" etc.
/* ------------------------------------------------------------------------------ */

/*  ----------------------------------------------------------------------------
 :: Layout and Behavior
    -------------------
    Apply general dimensions and margins to the sidetools. Format the title
	so that the text is swapped out with an image.  Set the open and closed
	states for the tools.
-------------------------------------------------------------------------------- */
.sidetools {
  width: 168px; clear: both;
  padding-top: 15px;
  }

.sidetools a { 
  font-size: 95% !important;
  color: #000;
  border: 1px solid #BCBEC0;
  background-color: #EBECEC;
  }

.sidetools a.title {
  display: block;
  width: 168px; height: 24px;
  margin: 0; padding: 0; border: 0;
  background-repeat: no-repeat; background-position: 0 0;
  }

/* Dwyer Method Image Replacement
   http://mezzoblue.com/tests/revised-image-replacement/ */
.sidetools a.title span {
  display: block;
  height: 0; width: 0;
  overflow: hidden;
  }

.sidetools ul a:hover, .sidetool ul a:active, .sidetools ul a.selected { background-color: #BFCFE2 !important; }

.sidetools p.text_only {
  padding: 8px 8px 12px 8px;
  font-size: 80%;
  color: #000;
  border: 1px solid #BCBEC0;
  background-color: #EBECEC;
  }

.sidetools p.text_only a {
  display: inline;
  padding: 0; border: 0; background: none;
  font-size: 100%; text-decoration: underline;
  color: #0064BF;
  }

/*  ----------------------------------------------------------------------------
    ... Toggle the tools closed and open
-------------------------------------------------------------------------------- */
.sidetools a.title { background-position: 0 -28px; }
.sidetools .closed a.title { background-position: 0 0; }

/* ... alternate ways to specify the same styles as above ... */
.open .sidetools a.title { background-position: 0 -28px !important; }
.closed .sidetools a.title { background-position: 0 0 !important; }

/* Styles just used for toggling menus during prototyping */
.open .sidetools ul { display: block; }
.closed .sidetools ul { display: none; }

/*  ----------------------------------------------------------------------------
 :: Titles
    ------
    Graphical title bars for the different types of sidetools
-------------------------------------------------------------------------------- */
.sidetools .about_community a.title { background-image: url(/skins/VF/images/sidetool_title_about_com.gif); }
.sidetools .about_debate a.title { background-image: url(/skins/VF/images/sidetool_title_about_deb.gif); }
.sidetools .about_nav a.title { background-image: url(/skins/VF/images/sidetool_title_company.gif); }
.sidetools .account_nav a.title { background-image: url(/skins/VF/images/sidetool_title_account.gif); }
.sidetools .categories a.title { background-image: url(/skins/VF/images/sidetool_title_categories.gif); }
.sidetools .collections a.title { background-image: url(/skins/VF/images/sidetool_title_collections.gif); }
.sidetools .community_partners a.title { background-image: url(/skins/VF/images/sidetool_title_partners_com.gif); }
.sidetools .contribute a.title { background-image: url(/skins/VF/images/sidetool_title_contribute.gif); }
.sidetools .explore a.title { background-image: url(/skins/VF/images/sidetool_title_explore.gif); }
.sidetools .learnmore a.title { background-image: url(/skins/VF/images/sidetool_title_learnmore.gif); }
.sidetools .more a.title { background-image: url(/skins/VF/images/sidetool_title_more.gif); }
.sidetools .moreactions a.title { background-image: url(/skins/VF/images/sidetool_title_moreactions.gif); }
.sidetools .related_options a.title { background-image: url(/skins/VF/images/sidetool_title_regions.gif); }
/*  .myfriends .sidetools .related_options a.title { background-image: url(/skins/VF/images/sidetool_title_friends.gif); }
  .mycommunities .sidetools .related_options a.title { background-image: url(/skins/VF/images/sidetool_title_communities.gif); } */
.sidetools .secondary_nav a.title { background-image: url(/skins/VF/images/sidetool_title_browse.gif); }
.sidetools .seeper a.title { background-image: url(/skins/VF/images/sidetool_title_seeper.gif); }
.sidetools .seethis a.title { background-image: url(/skins/VF/images/sidetool_title_seethis.gif); }
.sidetools .tags a.title { background-image: url(/skins/VF/images/sidetool_title_tags.gif); }
.sidetools .takeaction a.title { background-image: url(/skins/VF/images/sidetool_title_takeaction.gif); }
.sidetools .thisvoice a.title { background-image: url(/skins/VF/images/sidetool_title_thisvoice.gif); }

/*
--------------------------------------------------------------------------------
 :: Sidetool List Styles
    --------------------
    Sidetool list styles provide quick formatting capability for sidetool lists.
    Whole lists are consistently formatted by a single spanning div class.
    There are currently several different sidetool list styles available for use,
    (e.g., basic and nested) each of which are described and defined below.

    To use these sidetool list styles, just wrap any sidetool list in a div and
    set its class to whatever style you want below.
-------------------------------------------------------------------------------- */

/*
--------------------------------------------------------------------------------
 :: Basic Sidetool
    ------------------
    Basic display for sidetool lists. Links are displayed as outlined boxes, and
    change highlight color on rollover.  Sublists are displayed with an 18px
    indent.
-------------------------------------------------------------------------------- */
.basic_sidetool {
  position: relative; top: 0; left: 0;
  width: 168px;
  }

.basic_sidetool ul {
  position: relative;
  list-style: none;
  margin: 0; padding: 0;
  width: inherit;
  }

.basic_sidetool li {
  display: block; float: none;
  margin: 0; padding: 2px 0 0; /* Fix IE 1px padding bug - Note this needs to be applied to IE7 as well */ _padding: 1px 0 0;
  }

.basic_sidetool a {
  display: block;
  padding: 3px 0 4px; margin: 0;
  width: 166px; /* Cycloid's http://css-discuss.incutio.com/?page=BoxModelHack */ width: "168px";
  font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal;
  text-align: left; text-decoration: none;  text-indent: 9px;
  }

/* sub options (if any) */
.basic_sidetool ul ul a {
  text-indent: 18px; margin: 0; padding: 2px 0;
  }
  
/*
--------------------------------------------------------------------------------
 :: Nested Sidetool
    ------------------
    The nested sidetool provides a nested UL with image dinks to expand/compress
    the secondary UL list.
-------------------------------------------------------------------------------- */
.nested_sidetool {
  position: relative; top: 0; left: 0;
  width: 168px;
  }

.nested_sidetool ul {
  position: relative;
  list-style: none;
  margin: 0; padding: 0;
  width: inherit;
  }

.nested_sidetool li {
  display: block; float: none;
  margin: 0; padding: 2px 0 0; /* Fix IE 1px padding bug - Note this needs to be applied to IE7 as well */ _padding: 1px 0 0;
  }

.nested_sidetool a {
  display: block;
  padding: 3px 0 4px; margin: 0;
  width: 166px; /* Cycloid's http://css-discuss.incutio.com/?page=BoxModelHack */ width: "168px";
  font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal;
  text-align: left; text-decoration: none;  text-indent: 9px;
  }

/*  ----------------------------------------------------------------------------
    ... Special styles for options with sub-options
-------------------------------------------------------------------------------- */
/* set a custom narrower width for the main option */
.nested_sidetool a.has_subcats {
  width: 136px; /* Cycloid's http://css-discuss.incutio.com/?page=BoxModelHack */ width: "138px";
  }

/* style the image dink */
.nested_sidetool a.dink, .nested_sidetool a.dink_selected {
  position: absolute; right: 0;
  width: 26px;  /* Cycloid's http://css-discuss.incutio.com/?page=BoxModelHack */ width: "28px";
  background-repeat: no-repeat; background-position: center;
  }

.nested_sidetool a.dink { background-image: url(/skins/c2/images/secondary_dink_off.gif); }
.nested_sidetool a.dink_selected { background-image: url(/skins/c2/images/secondary_dink_on.gif); }

/* indent the suboptions list */
.nested_sidetool ul ul a {
  text-indent: 18px; margin: 0; padding: 2px 0;
  }

/* set sub-options to invisible unless flagged as "visible" */
.nested_sidetool ul ul {
  font-size: 100%;
  display: none;
  }

.nested_sidetool ul ul.visible {
  display: block;
  }

/*
--------------------------------------------------------------------------------
 :: Image Sidetool
    -------------------
    The image sidetool provides image support in the list, where the images
    are presented floated left, and the copy is presented floated right
-------------------------------------------------------------------------------- */
.image_sidetool {
  position: relative; top: 0; left: 0;
  width: 168px;
  }

.image_sidetool ul {
  position: relative;
  list-style: none;
  margin: 0; padding: 0;
  width: inherit;
  }

.image_sidetool li {
  clear: both;
  display: block; float: none;
  margin: 0; padding: 2px 0 0; /* Fix IE 1px padding bug - Note this needs to be applied to IE7 as well */ _padding: 1px 0 0;
  }

.image_sidetool a {
  position: relative;
  display: block;
  padding: 0; margin: 0;
  height: 36px;
  width: 166px; /* Cycloid's http://css-discuss.incutio.com/?page=BoxModelHack */ width: "168px";
  font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal;
  text-align: left; text-decoration: none;
  overflow: hidden;
  }

/* ... the thumbnail/group image and name */
.image_sidetool img { position: absolute; left: 0; top: 0; }
.image_sidetool p { display: block; padding: 10px 8px 0 46px; }

/*  ----------------------------------------------------------------------------
    ... styling the no items message
-------------------------------------------------------------------------------- */
.image_sidetool .no_items {
  background-color: #EBECEC; border: 1px solid #BCBEC0;
  margin: 2px 0 0; padding: 1px;
  }
  
.image_sidetool .no_items p {
  padding: 8px 8px 12px 8px;
  }