/*******************************************************************************
This file contains styling for the Members Only Module

NOTE: See =IE for Internet Explorer hacks

=MEMBERSONLYMODULE
=MEMBERSONLYMODULEV2
*******************************************************************************/
/* DUPLICATED FROM LAYOUT.CSS AND TWOCOLUMN.CSS */

div.layout div.onethird {
  width: 300px;
  margin-bottom: 0px;
}

#membersOnly ul, #membersOnly li {
  line-height:1.2em;
  margin:0;
  padding:0;
}

#membersOnly ul {
  color: #ccc;
  padding-left: 15px;
  font-size: 12px;
}


/*******************************************************************************
=MEMBERSONLYMODULE
*******************************************************************************/
#membersOnly {
  background-color: #fff;
  margin-bottom: 10px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  overflow: hidden;
  position: relative;
}

#membersOnly h1, 
#membersOnly h2, 
#membersOnly h3, 
#membersOnly h4,
#membersOnly h5,
#membersOnly p,
#membersOnly dl, 
#membersOnly dt {
  line-height: 1.2em;
  margin: 0;
  padding: 0;
}

#membersOnly.collapsed {
  height: 32px;
}

#membersOnly div.layout {
  padding: 0;
  margin: 0;
  background: transparent !important;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

#membersOnly div.header, #membersOnly div.body {
  padding: 0 10px 0;
}

#membersOnly div.body {
  background: #fff;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding-left: 0;
}

#membersOnly div.header {
  background-color: #06a;
  color: #fff;
  padding: 5px 10px 5px 20px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
}

#membersOnly.collapsed div.header {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

#membersOnly div.header h3 {
  margin-bottom: 0;
}

#membersOnly div.header div.control {
  position: absolute;
  right: 10px;
  top: 5px;
  height: 21px;
  width: 21px;
  margin: 0;
  padding: 0;
  background: transparent url(//g.foolcdn.com/img/main/collapsecontrols.png) no-repeat left top;
  text-indent: -99999px;
  cursor: pointer;
}

#membersOnly.expanded div.control {
  background-position: right top;
}

#membersOnly.collapsed div.control {
  background-position: left top;
}

#membersOnly.expanded div.control:hover {
  background-position: right bottom;
}

#membersOnly.collapsed div.control:hover {
  background-position: left bottom;
}

#membersOnly h4 {
  margin-bottom: 5px;
  font-weight: bold;
}

#membersOnly h4 a {
  color: #222;
  text-decoration: underline;
}

#membersOnly h4 a:hover {
  text-decoration: none;
}

#membersOnly div.body ul span {
  font-size: 11px;
  color: #666;
}

#membersOnly div.body ul span a {
  color: #666;
  text-decoration: underline;
}

#membersOnly div.body ul span a:hover {
  text-decoration: none;
}

#membersOnly div.body div.person {
  background: #f3f3f3;
  padding-left:20px;
  padding-right: 0;
  padding-top: 0;
  margin-right: 20px;
  margin-bottom: 0;
  padding-bottom: 20px;
  min-height: 260px;
  *height: 260px;
  border-right: 1px solid #e4e4e4;
  width: 284px;
  -moz-border-radius-bottomleft: 5px;
  -webkit-border-bottom-left-radius: 5px;
}

#membersOnly div.body div.person div.userInfo {
  margin: 10px 0;
}

#membersOnly div.body div.person div.userInfo p {
  color: #666;
}

#membersOnly div.body div.productInfo {
  background: #fff;
  margin-right: 20px;
  min-height: 155px;
  padding: 10px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 1px solid #ddd;
}

#membersOnly div.body div.productInfo h5 {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

#membersOnly div.body div.productInfo div.services {
  padding-bottom: 10px;
  margin-bottom: 10px;
}

#membersOnly div.body div.productInfo div.reports {
  border-top: 1px dotted #ddd;
}

#membersOnly div.body div.recommendations, #membersOnly div.body div.stories {
  padding-top: 10px;
  *padding-bottom: 20px;
}

#membersOnly div.body ul li {
  line-height: 1.3em;
  margin-bottom: 5px;
}

/*******************************************************************************
=MEMBERSONLYMODULEV2
*******************************************************************************/
#version2 #membersOnly {
  border: 1px solid #d8d8d8;
  overflow: hidden;
}

#version2 #membersOnly div.header {
  background: #434343 url(//g.foolcdn.com/img/Main/momV2bg.gif) repeat-x left top;
}

#membersOnly div.header img.userAvatar {
  float: left;
  clear: none;
  padding: 2px;
  border: 1px solid #ddd;
  margin-right: 5px;
  height: 34px;
  width: 34px;
  background: #fff;
}

#version2 #membersOnly div.userInfo h4 {
  font-weight: normal;
}

#version2 #membersOnly div.userInfo h4 a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

#version2 #membersOnly div.userInfo h4 a:hover {
  text-decoration: underline;
}

#version2 #membersOnly div.body {
  position: relative;
}

#version2 #membersOnly div.body img.downArrow {
  position: absolute;
  top: 0px;
  left: 29px;
  width: 20px;
  height: 10px;
}

#version2 #membersOnly div.body div.person {
  background: #f9f9ea;
  min-height: 0;
}

#version2 #membersOnly div.body div.productInfo {
  min-height: 0;
  background: transparent;
  border: none;
  padding: 10px 0 0 0;
}

#version2 #membersOnly div.body div.productInfo div.services ul li {
  font-size: 14px;
  font-weight: bold;
}

#version2 #membersOnly div.body div.productInfo div.services {
  margin-bottom: 0;
  padding-bottom: 10px;
}

/* User has 1, 2 or 3 products */
#version2 #membersOnly.numberOfServices1,
#version2 #membersOnly.numberOfServices2,
#version2 #membersOnly.numberOfServices3 {
  height: 170px;
}

#version2 #membersOnly.numberOfServices1 div.body div.person,
#version2 #membersOnly.numberOfServices2 div.body div.person,
#version2 #membersOnly.numberOfServices3 div.body div.person {
  height: 110px;
}

#version2 #membersOnly.numberOfServices1 div.body div.recommendations,
#version2 #membersOnly.numberOfServices1 div.body div.stories,
#version2 #membersOnly.numberOfServices2 div.body div.recommendations,
#version2 #membersOnly.numberOfServices2 div.body div.stories,
#version2 #membersOnly.numberOfServices3 div.body div.recommendations,
#version2 #membersOnly.numberOfServices3 div.body div.stories {
  height: 100px;
}

/* User has 4 or 5 products */
#version2 #membersOnly.numberOfServices4,
#version2 #membersOnly.numberOfServices5 {
  height: 200px;
}

#version2 #membersOnly.numberOfServices4 div.body div.person,
#version2 #membersOnly.numberOfServices5 div.body div.person {
  height: 140px;
}

#version2 #membersOnly.numberOfServices4 div.body div.recommendations,
#version2 #membersOnly.numberOfServices4 div.body div.stories,
#version2 #membersOnly.numberOfServices5 div.body div.recommendations,
#version2 #membersOnly.numberOfServices5 div.body div.stories
 {
  height: 130px;
}

/* User has 6 or 7 products */
#version2 #membersOnly.numberOfServices6,
#version2 #membersOnly.numberOfServices7 {
  height: 245px;
}

#version2 #membersOnly.numberOfServices6 div.body div.person,
#version2 #membersOnly.numberOfServices7 div.body div.person {
  height: 185px;
}

#version2 #membersOnly.numberOfServices6 div.body div.recommendations,
#version2 #membersOnly.numberOfServices6 div.body div.stories,
#version2 #membersOnly.numberOfServices7 div.body div.recommendations,
#version2 #membersOnly.numberOfServices7 div.body div.stories {
  height: 175px;  
}

/* User has 8 or 9 products */
#version2 #membersOnly.numberOfServices8,
#version2 #membersOnly.numberOfServices9 {
  height: 290px;
}

#version2 #membersOnly.numberOfServices8 div.body div.person,
#version2 #membersOnly.numberOfServices9 div.body div.person {
  height: 230px;
}

#version2 #membersOnly.numberOfServices8 div.body div.recommendations,
#version2 #membersOnly.numberOfServices8 div.body div.stories,
#version2 #membersOnly.numberOfServices9 div.body div.recommendations,
#version2 #membersOnly.numberOfServices9 div.body div.stories {
  height: 220px;  
}

/* User has 10 or products (unlikely since they'll more likely buy Duke St. */
#version2 #membersOnly.numberOfServices0,
#version2 #membersOnly.numberOfServices10,
#version2 #membersOnly.numberOfServices11,
#version2 #membersOnly.numberOfServices12,
#version2 #membersOnly.numberOfServices13,
#version2 #membersOnly.numberOfServices14,
#version2 #membersOnly.numberOfServices15,
#version2 #membersOnly.numberOfServices16,
#version2 #membersOnly.numberOfServices17,
#version2 #membersOnly.numberOfServices18,
#version2 #membersOnly.numberOfServices19,
#version2 #membersOnly.numberOfServices20 {
  height: 335px;
}

#version2 #membersOnly.numberOfServices0 div.body div.person,
#version2 #membersOnly.numberOfServices10 div.body div.person,
#version2 #membersOnly.numberOfServices11 div.body div.person,
#version2 #membersOnly.numberOfServices12 div.body div.person,
#version2 #membersOnly.numberOfServices13 div.body div.person,
#version2 #membersOnly.numberOfServices14 div.body div.person,
#version2 #membersOnly.numberOfServices15 div.body div.person,
#version2 #membersOnly.numberOfServices16 div.body div.person,
#version2 #membersOnly.numberOfServices17 div.body div.person,
#version2 #membersOnly.numberOfServices18 div.body div.person,
#version2 #membersOnly.numberOfServices19 div.body div.person,
#version2 #membersOnly.numberOfServices20 div.body div.person {
  height: 355px;
}

#version2 #membersOnly.numberOfServices0 div.body div.recommendations,
#version2 #membersOnly.numberOfServices0 div.body div.stories,
#version2 #membersOnly.numberOfServices10 div.body div.recommendations,
#version2 #membersOnly.numberOfServices10 div.body div.stories,
#version2 #membersOnly.numberOfServices11 div.body div.recommendations,
#version2 #membersOnly.numberOfServices11 div.body div.stories,
#version2 #membersOnly.numberOfServices12 div.body div.recommendations,
#version2 #membersOnly.numberOfServices12 div.body div.stories,
#version2 #membersOnly.numberOfServices13 div.body div.recommendations,
#version2 #membersOnly.numberOfServices13 div.body div.stories,
#version2 #membersOnly.numberOfServices14 div.body div.recommendations,
#version2 #membersOnly.numberOfServices14 div.body div.stories,
#version2 #membersOnly.numberOfServices15 div.body div.recommendations,
#version2 #membersOnly.numberOfServices15 div.body div.stories,
#version2 #membersOnly.numberOfServices16 div.body div.recommendations,
#version2 #membersOnly.numberOfServices16 div.body div.stories,
#version2 #membersOnly.numberOfServices17 div.body div.recommendations,
#version2 #membersOnly.numberOfServices17 div.body div.stories,
#version2 #membersOnly.numberOfServices18 div.body div.recommendations,
#version2 #membersOnly.numberOfServices18 div.body div.stories,
#version2 #membersOnly.numberOfServices19 div.body div.recommendations,
#version2 #membersOnly.numberOfServices19 div.body div.stories,
#version2 #membersOnly.numberOfServices20 div.body div.recommendations,
#version2 #membersOnly.numberOfServices20 div.body div.stories {
  height: 345px;
}

#version2 #membersOnly div.body div.person,
#version2 #membersOnly div.body div.recommendations,
#version2 #membersOnly div.body div.stories {
  height: 275px;
  padding-bottom: 10px;
}

#version2 #membersOnly div.body div.recommendations {
  border-right: 1px solid #E4E4E4;
  margin-right: 20px;
  padding-right: 20px;
}

#version2 #membersOnly div.header div.control {
  position: absolute;
  right: 15px;
  top: 12px;
  height: 21px;
  width: 21px;
  margin: 0;
  padding: 0;
  background: transparent url(/common/img/Buttons/ExpandCollapseCtrl.png) no-repeat left top;
  text-indent: -99999px;
  cursor: pointer;
}

#version2 #membersOnly.expanded div.header div.control{
    background-position:-20px 0;
}
#version2 #membersOnly.expanded div.header div.control:hover {
    background-position: -20px -20px;
}
#version2 #membersOnly.expanded div.header div.control:active {
    background-position:-20px -40px;
}

#version2 #membersOnly.collapsed div.header div.control {
    background-position:0px 0px;
}
#version2 #membersOnly.collapsed div.header div.control:hover {
    background-position: 0px -20px;
}
#version2 #membersOnly.collapsed div.header div.control:active {
    background-position: 0px -40px;
}


#version2 #membersOnly.collapsed {
  height: 50px;
}
* html #version2 div.collapsed {
  height: 50px !important;
}