/*
  +------------------------------------------------------------------+
  | Green-Beast.com                                                  |
  | CSS: Menu Descriptions                                           |
  | Cascading Style Sheet                                            |
  | Copyright May 2007                                               |
  | Use with attribution by visible link please!                     |
  | Attribute to: <a href="http://green-beast.com/">Mike Cherim</a>  |
  +------------------------------------------------------------------+
*/ 

/* 
  ==================================================================
  the following styles are used for the layout of the sample content
  portions of this experiment. I decided to include them so readers 
  can better see how it all works together
*/

/*
  the main container or wrapper (layout)
*/
#cmd_wrapper {
  width : 640px;
  margin : 0 auto 0;
}

/*
  the main content portion (layout)
*/
#cmd_content {
  width : 474px;
  border : 1px solid #999;
  float : right;
  display : inline;
  background-color : #f7faf2;
}

/* 
  the content (and sidebar) heading styles
*/
#cmd_content h2, #cmd_sidebar h2 {
  color : #669900;
  margin : 5px 0 0 5px;
}

/* 
  the content paragraph styling
*/
#cmd_content p {
  margin : 14px 15px;
  font-size : 90%;
  text-indent : 20px;
}

/* 
  the sidebar portion (layout)
*/
#cmd_sidebar {
  width : 160px;
  float : left;
  display : inline;
}

/* 
  =============================================================
  now here are the styles specific to the functionality of this 
  experiment's links 
*/

/*
  style the list which contains the links
*/
ul#cmd {
  margin : 5px;
  list-style-type : none;
  font-size : 90%;
}

/* 
  this could be applied to the links, but IE needs this on <li>
*/
ul#cmd li {
  margin-bottom : 5px;
}

/*
  static link styling
*/
ul#cmd a {
  position : relative; /* to create a new positioning baseline */
  width : 145px;
  height : 4em;
  display : block;
  padding : 5px;
  padding-right : 0;
  border : 1px solid #669900;
  background : #ddd url(images/cmd_linkback.jpg) repeat-x;
  color : #669900; 
  text-decoration : none;
  font-weight : bold;
  cursor : pointer;
}

/*
  styles for the span (kept opff screen until needed
*/
ul#cmd a span {
  position : absolute;
  top : -9000px;
  left : -9000px;
  display : block;
  width : 260%;
  height : 4em; /* to make the text resizable but do allow room */
  background : #fafafa url(images/cmd_linkback_on.jpg) repeat-x;
  border : 1px solid #669900;
  border-left : 0;
  padding : 5px;
  padding-left : 23px;
  text-indent : -17px;
  cursor : pointer; /* needed for opera */
  color : #cc9900;
}

/* 
  hover/focus styles of link
*/
ul#cmd a:hover, ul#cmd a:focus, ul#cmd a:active {
  background : #fafafa url(images/cmd_linkback_on.jpg) repeat-x;
  color : #000;
}

/*
  re-postion the pre-styled span on hover/focus
*/
ul#cmd a:hover span, ul#cmd a:focus span, ul#cmd a:active span {
  top : -1px;
  left : 80px;
}

/* End Styles */