@charset "UTF-8";
/*////////////////////////////////////////////////////////////
mansion100% - recommend.css for "recommend" category.

Copyright (C) NEXT Co,. Ltd. All right reserved.
------------------------------------------------------------

    0. Import External CSS
    1. Common
    2. Settings
        2-1. Common
        2-2. Setup Dream Room Layout
        2-3. Setup Other Items
    3. Unit with Stars
    4. Related Info
        4-1. Common
        4-2. Similar Dream Room
        4-3. Recommend Company
        4-4. Interesting Property
    5. Top Page (Non-setting Avatar)
    6. Writer Profile
    7. Avatar Edit Flash

////////////////////////////////////////////////////////////*/

/* ------------------------------------------------------------
    0. Import External CSS
   ------------------------------------------------------------ */
@import "common.css";

/* ------------------------------------------------------------
    1. Common
   ------------------------------------------------------------ */
div#recommendSearchSettings {
    position: relative;
    padding-top: 8px;
}

/* Setup Title */
div#recommendSearchSettings div.setTitle {
    width: 980px;
    background: url(/recommend/images/box_search_01_btm.gif) no-repeat left bottom;
}

div#recommendSearchSettings div.setTitle h2 {
    float: left;
    width: 894px;
    padding: 10px 20px;
    background: url(/recommend/images/box_search_01_top.gif) no-repeat 0 0;
    font-size: 182%;
}

div#recommendSearchSettings div.noedit h2 {
    width: 940px;
}

div#recommendSearchSettings div.setTitle div.edit {
    float: right;
    width: 45px;
    padding: 1px 1px 1px 0;
    background: url(/recommend/images/box_search_01_top.gif)  no-repeat right top;
}

/* Reset Settings Button */
div#recommendSearchSettings p.reset {
    position: absolute;
    top: 5px;
    right: 0;
    width: 139px;
    height: 27px;
}

/* Back to Top */
p.navRecommendTop {
    margin: 20px 0 10px;
}

/* ------------------------------------------------------------
    2. Settings
   ------------------------------------------------------------ */

/*  2-1. Common
   ------------------------------------------------- */
div#recommendSearchSettings div.settings {
    position: relative;
    width: 980px;
    padding: 14px 0 24px;
}

/* --- Title --- */
div#recommendSearchSettings div.settings div.title h3 span.imageText{
    display: block;
    height: 18px;
    background-position: 0 0;
    background-repeat: no-repeat;
    text-indent: -1000px;
    line-height: 1;
    overflow: hidden;
}

/*  2-2. Setup Dream Room Layout
   ------------------------------------------------- */
div.setRoomFamily {
    float: left;
    width: 486px;
}

div.setRoomFamily div.title {
    background: url(/recommend/images/box_search_02_btm.gif) no-repeat left bottom;
}

div.setRoomFamily div.title h3 {
    float: left;
    width: 424px;
    margin-top: 0;
    padding: 4px 8px 0;
    background: url(/recommend/images/box_search_02_top.gif) no-repeat 0 0;
}

div.setRoomFamily div.title h3.noedit {
    width: 470px;
    padding-bottom: 4px;
}

div.setRoomFamily div.title div.edit {
    float: right;
    width: 45px;
    padding: 1px 1px 1px 0;
    background: url(/recommend/images/box_search_02_top.gif)  no-repeat right top;
}

/* No Avatar */
div.setRoomFamily div.image {
    position:relative;
}

div.setRoomFamily div.image p.btnSetAvatar {
    position: absolute;
    top: 210px;
    left: 0;
    width: 486px;
    text-align: center;
}

/* --- Dream Room Layout Detail --- */

/* Common */
div.setRoomFamily table {
    width: 486px;
}

div.setRoomFamily table th {
    background-color: #eeeeee;
}

div.setRoomFamily table th span.imageText {
    display: block;
    overflow: hidden;
    margin: 0 auto;
    background-position: 0 0;
    background-repeat: no-repeat;
    text-indent: -1000px;
    line-height: 1;
}

/* Layout */
div.setRoomFamily table.layout th,
div.setRoomFamily table.layout td {
    border-bottom: 1px solid #cac9c9;
    padding: 5px 5px;
    text-align:center
}

div.setRoomFamily table.layout th.quantity,
div.setRoomFamily table.layout th.feature,
div.setRoomFamily table.family th.number {
    width: 43px;
    border-left: 1px solid #cac9c9;
}

div.setRoomFamily table.layout th.quantity span.imageText {
    width: 36px;
    height: 15px;
    background-image: url(/recommend/images/txt_room_quantity_01.gif);
}

div.setRoomFamily table.layout th.interior span.imageText {
    width: 51px;
    height: 15px;
    background-image: url(/recommend/images/txt_interior_01.gif);
}

div.setRoomFamily table.layout th.feature span.imageText {
    width: 31px;
    height: 15px;
    background-image: url(/recommend/images/txt_room_feature_01.gif);
}

div.setRoomFamily table.layout td {
    border-right: 1px solid #cac9c9;
}

div.setRoomFamily table.layout td.quantity {
    width: 172px;
}

div.setRoomFamily table.layout th.interior {
    width: 52px;
}

div.setRoomFamily table.layout td.feature {
    padding-right: 5px;
    padding-left: 12px;
    text-align: left;
}

/* Family */
div.setRoomFamily table.family th,
div.setRoomFamily table.family td {
    border-bottom: 1px solid #cac9c9;
}

div.setRoomFamily table.family th {
    padding: 5px 5px;
}

div.setRoomFamily table.family td {
    border-right: 1px solid #cac9c9;
}

div.setRoomFamily table.family th.number span.imageText {
    width: 28px;
    height: 29px;
    background-image: url(/recommend/images/txt_resident_01.gif);
}

div.setRoomFamily table.family td.number ul.member {
    padding: 5px 5px 5px 12px;
}

div.setRoomFamily table.family td.number ul.member li {
    display: inline;
}

div.setRoomFamily table.family td.number ul.member li img {
    float: left;
}

div.setRoomFamily table.family td.number dl.number {
    clear: both;
    padding: 1px 5px 3px 12px;
    border-top: 1px solid #cac9c9;
}

div.setRoomFamily table.family td.number dl.number dt,
div.setRoomFamily table.family td.number dl.number dd {
    display: inline;
}

div.setRoomFamily table.family td.number dl.number dd {
    font-size: 153.9%;
    font-weight: bold;
}

div.setRoomFamily table.family td.number dl.number img {
    vertical-align: baseline;
}

div.setRoomFamily table.family td.number dl.number dt img {
    margin-right: 11px;
}

div.setRoomFamily table.family td.number dl.number dd img {
    margin-left: 5px;
    margin-right: 17px;
}

/*  2-3. Setup Other Items
   ------------------------------------------------- */
div#recommendSearchSettings div.setGroup01 {
    float: left;
    width: 235px;
    padding: 0 0 0 11px;
}

div#recommendSearchSettings div.setGroup02 {
    float: left;
    width: 235px;
    padding: 0 0 0 12px;
}

div#recommendSearchSettings div.setGroup03 {
    float: right;
    width: 482px;
}

/* --- Title --- */
div#recommendSearchSettings div.setGroup01 div.title,
div#recommendSearchSettings div.setGroup02 div.title {
    background: url(/recommend/images/box_search_03_btm.gif) no-repeat left bottom;
}

div#recommendSearchSettings div.setGroup03 div.title {
    background: url(/recommend/images/box_search_04_btm.gif) no-repeat left bottom;
}

div#recommendSearchSettings div.setGroup01 div.title h3,
div#recommendSearchSettings div.setGroup02 div.title h3 {
    float: left;
    width: 173px;
    margin-top: 0;
    padding: 4px 8px 0;
    background: url(/recommend/images/box_search_03_top.gif) no-repeat 0 0;
}

div#recommendSearchSettings div.setGroup01 div.title h3.noedit,
div#recommendSearchSettings div.setGroup02 div.title h3.noedit {
    width: 219px;
    padding-bottom: 4px;
}

div#recommendSearchSettings div.setGroup03 div.title h3.noedit {
    float: left;
    width: 468px;
    margin-top: 0;
    padding: 4px 8px 4px;
    background: url(/recommend/images/box_search_04_top.gif) no-repeat 0 0;
}


div#recommendSearchSettings div.setGroup01 div.title div.edit,
div#recommendSearchSettings div.setGroup02 div.title div.edit {
    float: right;
    width: 45px;
    padding: 1px 1px 1px 0;
    background: url(/recommend/images/box_search_03_top.gif)  no-repeat right top;
}

div#recommendSearchSettings div.setGroup01 div.title div.edit a,
div#recommendSearchSettings div.setGroup02 div.title div.edit a {
    display: block;
    width: 45px;
    height: 23px;
}

/* Specific Title */
div#recommendSearchSettings div.setRoomFamily div.title h3 span.imageText{
    width: 91px;
    background-image: url(/recommend/images/txt_ideal_01.gif);
}

div#recommendSearchSettings div.priceLimit div.title h3 span.imageText{
    width: 77px;
    background-image: url(/recommend/images/txt_price_limit_01.gif);
}

div#recommendSearchSettings div.livedIn div.title h3 span.imageText{
    width: 145px;
    background-image: url(/recommend/images/txt_lived_in_01.gif);
}

div#recommendSearchSettings div.wishArea div.title h3 span.imageText{
    width: 72px;
    background-image: url(/recommend/images/txt_wish_area_01.gif);
}

div#recommendSearchSettings div.regularStation div.title h3 span.imageText{
    width: 71px;
    background-image: url(/recommend/images/txt_regular_station_01.gif);
}

div#recommendSearchSettings div.commute div.title h3 span.imageText{
    width: 168px;
    background-image: url(/recommend/images/txt_commute_01.gif);
}

div#recommendSearchSettings div.walkTime div.title h3 span.imageText{
    width: 162px;
    background-image: url(/recommend/images/txt_walk_time_01.gif);
}

div#recommendSearchSettings div.keyword div.title h3 span.imageText{
    width: 72px;
    background-image: url(/recommend/images/txt_keyword_01.gif);
}

/* Setup Unit */
div#recommendSearchSettings div.setGroup01 div.setUnit01,
div#recommendSearchSettings div.setGroup02 div.setUnit01,
div#recommendSearchSettings div.setGroup03 div.setUnit01 {
    margin-bottom: 9px;
    padding-bottom: 1px;
    background: url(/recommend/images/box_search_03_top.gif) no-repeat right bottom;
}

div#recommendSearchSettings div.setGroup03 div.setUnit01 {
    background: url(/recommend/images/box_search_04_top.gif) no-repeat right bottom;
}

div#recommendSearchSettings div.setGroup01 p,
div#recommendSearchSettings div.setGroup02 p {
    padding: 6px 16px;
    border-right: 1px solid #cac9c9;
    border-left: 1px solid #cac9c9;
    text-align: center;
}

div#recommendSearchSettings div.setGroup01 p span.number,
div#recommendSearchSettings div.setGroup02 p span.number {
    font-size: 153.9%;
    font-weight: bold;
}

div#recommendSearchSettings div.livedIn ul,
div#recommendSearchSettings div.wishArea ul,
div#recommendSearchSettings div.regularStation ul {
    border-right: 1px solid #cac9c9;
    border-left: 1px solid #cac9c9;
}

div#recommendSearchSettings div.livedIn ul li,
div#recommendSearchSettings div.wishArea ul li,
div#recommendSearchSettings div.regularStation ul li {
    padding: 6px 16px 5px;
    border-top: 1px solid #cac9c9;
}

div#recommendSearchSettings div.livedIn ul li.firstChild,
div#recommendSearchSettings div.wishArea ul li.firstChild,
div#recommendSearchSettings div.regularStation ul li.firstChild {
    border-top-width: 0;
}

div#recommendSearchSettings div.keyword ul {
    padding: 6px 16px;
    border-right: 1px solid #cac9c9;
    border-left: 1px solid #cac9c9;
}

div#recommendSearchSettings div.keyword ul li {
    display: inline;
}

div#recommendSearchSettings div.keyword ul li.firstChild {
    padding-left: 0;
    background-image: none;
}

/* Area */
div#recommendSearchSettings div.wishArea ul li span.wish01,
div#recommendSearchSettings div.wishArea ul li span.wish02,
div#recommendSearchSettings div.wishArea ul li span.wish03 {
    display: block;
    float: left;
    width: 88px;
    height: 17px;
    background-position: 0 4px;
    background-repeat: no-repeat;
    text-indent: -1000px;
    line-height: 1;
    overflow: hidden;
}

div#recommendSearchSettings div.wishArea ul li span.wish01 {
    background-image: url(/recommend/images/txt_wish_01.gif);
}

div#recommendSearchSettings div.wishArea ul li span.wish02 {
    background-image: url(/recommend/images/txt_wish_02.gif);
}

div#recommendSearchSettings div.wishArea ul li span.wish03 {
    background-image: url(/recommend/images/txt_wish_03.gif);
}

/* ------------------------------------------------------------
    3. Unit with Stars
   ------------------------------------------------------------ */
div.recommendForYou {}

div.recommendForYou div.blockAssetsBuzz,
div.recommendForYou div.blockAssetsList{
    margin-top: 20px;
}

div.recommendForYou div.blockAssetsBuzz div.unitBuzz01,
div.recommendForYou div.blockAssetsList div.unitList01{
    position: relative;
    margin-bottom: 20px;
    padding-top: 35px;
}

div.recommendForYou div.blockAssetsBuzz div.unitBuzz01 p.recommend,
div.recommendForYou div.blockAssetsList div.unitList01 p.recommend{
    position: absolute;
    top: 0;
    left: 0;
    width: 235px;
    height: 35px;
    background-color: #FFFFFF;
}

div.recommendForYou p.more{
    margin-bottom: 24px;
    text-align: right;
}

/* ------------------------------------------------------------
    4. Related Info
   ------------------------------------------------------------ */

/*  4-1. Common
   ------------------------------------------------- */
.ttl51 {
    width: 980px;
    margin-bottom: 12px;
    background: #eeeeee url(/recommend/images/bcg_title_01.gif) no-repeat 0 0;
}

.ttl51 .ttl51inner {
    width: 950px;
    padding: 8px 15px;
    background: url(/recommend/images/bcg_title_02.gif) no-repeat left bottom;
    font-size: 108%;
    font-weight: bold;
}

/*  4-2. Similar Dream Room
   ------------------------------------------------- */
div.closelyPeople {
    margin-bottom: 52px;
}

div.closelyPeople li {
    position: relative;
    width: 185px;
    float: left;
    margin-left: 13px;
    padding-top: 110px;
}
div.closelyPeople li.firstChild {
    margin-left: 0;
}
div.closelyPeople li li {
    position: static;
    width: auto;
    float: none;
    margin-left: 0;
    padding-top: 0;
}
div.closelyPeople li p.image {
    position: absolute;
    top: 0;
    left: 0;
    width: 185px;
    height: 110px;
}
div.closelyPeople li h3 {
    margin-bottom: 3px;
    border-bottom: 1px solid #B4B4B4;
    padding: 0 0 3px 2px;
    font-size: 108%;
    font-weight: bold;
}
div.closelyPeople li table {
    width: 100%;
}
div.closelyPeople li table th {
    width: 59px;
    border-right: 2px solid #FFFFFF;
    padding: 5px;
    vertical-align: top;
}
div.closelyPeople li table th span.area,
div.closelyPeople li table th span.regident,
div.closelyPeople li table th span.roomQuantity,
div.closelyPeople li table th span.interior {
    display: block;
    overflow: hidden;
    height: 0;
    margin: 0 auto;
    padding-top: 9px;
    background-repeat: no-repeat;
}
div.closelyPeople li table th span.area {
    width: 46px;
    background-image: url(/recommend/images/txt_wish_area_02.gif);
}
div.closelyPeople li table th span.regident {
    width: 38px;
    background-image: url(/recommend/images/txt_resident_02.gif);
}
div.closelyPeople li table th span.roomQuantity {
    width: 26px;
    background-image: url(/recommend/images/txt_room_quantity_02.gif);
}
div.closelyPeople li table th span.interior {
    width: 46px;
    background-image: url(/recommend/images/txt_interior_02.gif);
}
div.closelyPeople li table tr.odd th,
div.closelyPeople li table tr.odd td {
    background-color: #FFFFFF;
}
div.closelyPeople li table tr.even th,
div.closelyPeople li table tr.even td {
    background-color: #eeeeee;
}
div.closelyPeople li table td {
    padding: 3px 5px;
    text-align: center;
    font-size: 77%;
    line-height:1.4;
}

/*  4-3. Recommend Company
   ------------------------------------------------- */
div.closelyCompany {}
div.closelyCompany table {
    width: 980px;
}
div.closelyCompany table thead th {
    height: 28px;
    border-bottom: 1px solid #FFFFFF;
    border-right: 2px solid #FFFFFF;
    background-color: #CCCCCC;
    background-position: center center;
    background-repeat: no-repeat;
    text-indent: -1000px;
}
div.closelyCompany table thead th span.imageText {
    display: block;
    height: 0;
    overflow: hidden;
}
div.closelyCompany table tbody td {
    border-bottom: 1px solid #FFFFFF;
    border-right: 2px solid #FFFFFF;
    padding: 4px;
}
div.closelyCompany table thead th.recommend { /* with th, td */
    border-width: 0;
    background-image: url(/recommend/images/txt_recommend_01.gif);
}
div.closelyCompany table thead th.company {
    background-image: url(/recommend/images/txt_company_01.gif);
}
div.closelyCompany table thead th.area {
    background-image: url(/recommend/images/txt_area_01.gif);
}
div.closelyCompany table thead th.capital {
    background-image: url(/recommend/images/txt_capital_01.gif);
}
div.closelyCompany table thead th.property {
    background-image: url(/recommend/images/txt_property_01.gif);
}
div.closelyCompany table thead th.favorite {
    background-image: url(/recommend/images/txt_favorite_01.gif);
}
div.closelyCompany table .company { /* with th, td */
    width: 238px;
}
div.closelyCompany table .area,
div.closelyCompany table .capital { /* with th, td */
    width: 142px;
}
div.closelyCompany table .property,
div.closelyCompany table .favorite { /* with th, td */
    width: 115px;
}
div.closelyCompany table .recommend { /* with th, td */
    width: 213px;
}
div.closelyCompany table .capital,
div.closelyCompany table .property { /* with th, td */
    text-align: right;
}
div.closelyCompany table .favorite,
div.closelyCompany table .recommend { /* with th, td */
    text-align: center;
}
div.closelyCompany table tr.odd td{ /* with th, td */
    background-color: #FFFFFF;
}
div.closelyCompany table tr.even td{ /* with th, td */
    background-color: #eeeeee;
}

/*  4-4. Interesting Property
   ------------------------------------------------- */
div.closelyAssets{}

div.closelyAssets p.more{
    margin-bottom: 24px;
    text-align: right;
}

table#tblRecommend01{}
table#tblRecommend01 td.date {
    width: 107px;
}

table#tblRecommend01 td.property {
    width: 176px;
    padding-left: 6px;
}

table#tblRecommend01 td.comment {
    width: 635px;
}

div.recommendUserComments{
    margin-bottom: 40px;
}

/* ------------------------------------------------------------
    5. Top Page (Non-setting Avatar)
   ------------------------------------------------------------ */
div#contentRecommendAbout {}

div#contentRecommendAbout div.recommendAbout {
    margin: 30px auto 0;
    text-align: center;
}
div#contentRecommendAbout div.setNow {
    padding: 50px 0 20px;
    text-align: center;
}

/* ------------------------------------------------------------
    6. Writer Profile
   ------------------------------------------------------------ */
dl.writerProfile dd {
    position: relative;
    min-height: 67px;
    margin: 17px 0 20px;
    background: url(/recommend/images/box_profile_btm.gif) no-repeat left bottom;
}

* html dl.writerProfile dd { /* For IE6 */
    height: 67px;
}

dl.writerProfile dd p.name {
    float: left;
    width: 190px;
    margin: 9px 0;
    padding: 0 9px 5px 69px;
    background: url(/recommend/images/bcg_line_01.gif) repeat-y right top;
    color: #000066;
    font-weight: bold;
}

dl.writerProfile dd p.name img {
    display: block;
    margin: 0 0 3px;
}

dl.writerProfile dd p.image {
    position: absolute;
    top: 10px;
    left: 11px;
}

dl.writerProfile dd p.introduction {
    padding: 9px 9px 9px 283px;
    background: url(/recommend/images/box_profile_top.gif) no-repeat 0 0;
    font-size: 85%;
}

/* ------------------------------------------------------------
    7. Avatar Edit Flash
   ------------------------------------------------------------ */
div.swfAvatarEdit {
    width: 600px;
}

div.lbContent div.swfAvatarEdit {
    margin-top: 40px;
}

div.swfAvatarMaker {
    padding-bottom: 50px;
}
