@charset "UTF-8";

/*
 *  top.css
 *  http://reroom.jp/
 *
 *  Description:
 *  トップページのスタイル
 *
 *  Copyright 2010, reroom
*/ 

/*======================================================================
    elements
======================================================================*/

h1 {
    display: none;
}

legend {
    display: none;
}

textarea {
    width: 282px;
    max-width: 282px;
}

/*======================================================================
    parts
======================================================================*/

/*----------------------------------------------------------------------
    div.thumb
----------------------------------------------------------------------*/

div.thumb img {
    border: 2px solid #b3b3ab;
}

/*----------------------------------------------------------------------
    div.user
----------------------------------------------------------------------*/

div.user {
    position: relative;
    line-height: 1;
    font-weight: bold;
}

div.user span.portrait {
    margin-right: 10px;
    float: left;
}

div.user span.title {
    display: block;
    font-size: 108%;
}

div.user span.name {
    color: #b3b3ab;
    font-size: 93%;
}

div.user span.date {
    position: absolute;
    top: 0;
    right: 0;
    color: #b3b3ab;
    font-size: 85%;
}

/*----------------------------------------------------------------------
    p.more
----------------------------------------------------------------------*/

p.more {
    font-weight: bold;
    font-size: 85%;
}

/*======================================================================
    #photo
======================================================================*/

#photo div.pickup,
#photo div.featured,
#photo div.featuredList,
#photo div.category {
    margin: 0 30px 0 25px;
    padding-top: 20px;
    overflow: hidden;
    _zoom: 1; /* for IE6 */
}

#photo h2 {
    margin: 0 0 15px;
    width: 610px;
    height: 23px;
    background-repeat: no-repeat;
    text-indent: -9999px;
}

/*======================================================================
    div.pickup
======================================================================*/

#photo div.pickup {
    padding-top: 30px;
    padding-bottom: 30px;
}

#photo div.pickup h2 {
    background-image: url(../images/headline/pickup.png);
}

/*----------------------------------------------------------------------
    div.image
----------------------------------------------------------------------*/

#photo div.pickup div.image {
    margin: 0 0 10px;
}

#photo div.pickup div.image a:hover {
    background-color: transparent;
}

#photo div.pickup div.image img {
    padding: 3px;
    border: 2px solid #b3b3ab;
}

/*----------------------------------------------------------------------
    div.user
----------------------------------------------------------------------*/

#photo div.pickup div.user {
    float: left;
    width: 300px;
}

/*----------------------------------------------------------------------
    div.description
----------------------------------------------------------------------*/

#photo div.pickup div.description {
    margin-left: 310px;
}

/*----------------------------------------------------------------------
    p.more
----------------------------------------------------------------------*/

#photo div.pickup p.more {
    margin-bottom: 40px;
    clear: both;
}

/*======================================================================
    div.featured
======================================================================*/

#photo div.featured {
    border-top: 1px solid #a6a69f;
    position: relative;
}
#photo div.featured h2 {
    background-image: url(../images/headline/featured.png);
}
#photo div.featured div.user,
#photo div.featured div.description,
#photo div.featured p.more {
    margin-left: 310px;
}

/*----------------------------------------------------------------------
    div.thumb
----------------------------------------------------------------------*/

#photo div.featured div.thumb {
    float: left;
    width: 300px;
}

/*----------------------------------------------------------------------
    div.user
----------------------------------------------------------------------*/

#photo div.featured div.user {
    width: 297px;
}

/*----------------------------------------------------------------------
    div.description
----------------------------------------------------------------------*/

#photo div.featured div.description {
    margin-top: 30px;
    margin-bottom: 10px;
}

/*======================================================================
    div.featuredList
======================================================================*/

#photo div.featuredList {
    padding-top: 25px;
    margin-right: -20px;
}

/*----------------------------------------------------------------------
    div.thumbnail
----------------------------------------------------------------------*/

#photo div.featuredList div.thumbnail {
    margin: 0 20px 15px 0;
    float: left;
    width: 190px;
}

/*----------------------------------------------------------------------
    div.user
----------------------------------------------------------------------*/

#photo div.featuredList div.thumbnail div.user span.title {
    margin-top: 10px;
    font-size: 93%;
}

#photo div.featuredList div.thumbnail div.user span.date {
    margin-top: 7px;
    position: static;
    display: block;
}

/*======================================================================
    div.category
======================================================================*/

#photo div.category {
    margin-top: 30px;
    border-top: 1px solid #a6a69f;
}

#photo div.category h2 {
    background-image: url(../images/headline/category.png);
}

#photo dl.data {
    position: relative;
    zoom: 1;
}

/*----------------------------------------------------------------------
    dt
----------------------------------------------------------------------*/

#photo dl.data dt {
    margin: 0;
    position: absolute;
    top: 0;
    width: 190px;
    height: 20px;
    text-indent: -9999px;
}

#photo dl.data dt.color {
    left: 0;
    background: url(../images/headline/color.png) no-repeat;
}

#photo dl.data dt.item {
    left: 210px;
    background: url(../images/headline/item.png) no-repeat;
}

#photo dl.data dt.keyword {
    left: 420px;
    background: url(../images/headline/keyword.png) no-repeat;
}

/*----------------------------------------------------------------------
    dd
----------------------------------------------------------------------*/

#photo dl.data dd {
    margin: 25px 20px 0 0;
    padding-bottom: 20px;
    float: left;
    width: 190px;
}

#photo dl.data dd.color {
    margin-right: 10px;
    _margin-right: 5px; /* for Win IE 6 */
    width: 200px;
}

#photo dl.data dd.keyword {
    margin-right: 0;
}

#photo dl.data dd p.more {
    clear: both;
}

/*----------------------------------------------------------------------
    dd.color
----------------------------------------------------------------------*/

#photo dl.data dd.color li {
    margin: 0 3px 6px 0;
    padding: 0;
    float: left;
    text-indent: -9999px;
}

#photo dl.data dd.color li a {
    display: block;
    width: 95px;
    height: 21px;
    background: url(../images/button/form/color_scheme.png) no-repeat;
}

/* image replacement
----------------------------------------------------------------------*/

#photo dl.data dd.color li.red a {
    background-position: 0 0;
}
#photo dl.data dd.color li.red a:hover {
    background-position: -95px 0;
}
#photo dl.data dd.color li.brown a {
    background-position: 0 -21px;
}
#photo dl.data dd.color li.brown a:hover {
    background-position: -95px -21px;
}
#photo dl.data dd.color li.orange a {
    background-position: 0 -42px;
}
#photo dl.data dd.color li.orange a:hover {
    background-position: -95px -42px;
}
#photo dl.data dd.color li.khaki a {
    background-position: 0 -63px;
}
#photo dl.data dd.color li.khaki a:hover {
    background-position: -95px -63px;
}
#photo dl.data dd.color li.yellow a {
    background-position: 0 -84px;
}
#photo dl.data dd.color li.yellow a:hover {
    background-position: -95px -84px;
}
#photo dl.data dd.color li.yellowGreen a {
    background-position: 0 -105px;
}
#photo dl.data dd.color li.yellowGreen a:hover {
    background-position: -95px -105px;
}
#photo dl.data dd.color li.green a {
    background-position: 0 -126px;
}
#photo dl.data dd.color li.green a:hover {
    background-position: -95px -126px;
}
#photo dl.data dd.color li.lightBlue a {
    background-position: 0 -147px;
}
#photo dl.data dd.color li.lightBlue a:hover {
    background-position: -95px -147px;
}
#photo dl.data dd.color li.blue a {
    background-position: 0 -168px;
}
#photo dl.data dd.color li.blue a:hover {
    background-position: -95px -168px;
}
#photo dl.data dd.color li.purple a {
    background-position: 0 -189px;
}
#photo dl.data dd.color li.purple a:hover {
    background-position: -95px -189px;
}
#photo dl.data dd.color li.pink a {
    background-position: 0 -210px;
}
#photo dl.data dd.color li.pink a:hover {
    background-position: -95px -210px;
}
#photo dl.data dd.color li.white a {
    background-position: 0 -231px;
}
#photo dl.data dd.color li.white a:hover {
    background-position: -95px -231px;
}
#photo dl.data dd.color li.gray a {
    background-position: 0 -252px;
}
#photo dl.data dd.color li.gray a:hover {
    background-position: -95px -252px;
}
#photo dl.data dd.color li.black a {
    background-position: 0 -273px;
}
#photo dl.data dd.color li.black a:hover {
    background-position: -95px -273px;
}
#photo dl.data dd.color li.gold a {
    background-position: 0 -294px;
}
#photo dl.data dd.color li.gold a:hover {
    background-position: -95px -294px;
}
#photo dl.data dd.color li.silver a {
    background-position: 0 -315px;
}
#photo dl.data dd.color li.silver a:hover {
    background-position: -95px -315px;
}

/*----------------------------------------------------------------------
    dd.item
----------------------------------------------------------------------*/

#photo dl.data dd.item li {
    padding: 0 0 0 20px;
    background: url(../images/icon/item001_13x13.png) no-repeat 0 0.2em;
    font-weight: bold;
    font-size: 93%;
}

/*----------------------------------------------------------------------
    dd.keyword
----------------------------------------------------------------------*/

#photo dl.data dd.keyword li {
    margin: 0 5px 10px 0;
    padding: 0;
    float: left;
    height: 18px;
    line-height: 18px;
    background: url(../images/bg/keyword_bg.png) no-repeat 100% 0;
    font-weight: bold;
    font-size: 85%;
    white-space: nowrap;
}

#photo dl.data dd.keyword li a {
    padding: 0 10px;
    display: block;
    float: left;
    height: 18px;
    color: #ffffff;
    background: url(../images/bg/keyword_bg.png) no-repeat -184px -18px;
}

/*======================================================================
    #utilities
======================================================================*/

#utilities h3 {
    font-size: 93%;
}
#utilities div.regist h3,
#utilities div.banner h3,
#utilities div.twitter h3 {
    display: none;
}

/*----------------------------------------------------------------------
    div.section
----------------------------------------------------------------------*/

#utilities div.section {
    margin: 0 0 15px 0; /* 左右のマージン増やした */
}

/*----------------------------------------------------------------------
    div.button
----------------------------------------------------------------------*/

#utilities div.button {
    height: 30px;
    background-repeat: no-repeat;
}

#utilities div.button input,
#utilities div.button a {
    display: block;
    overflow: hidden;
    height: 30px;
    text-indent: -9999px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 0 -30px;
    cursor: pointer;
}

#utilities div.button input {
    _border: none; /* for Win IE 6 */
}

#utilities div.button a:hover {
    background-color: transparent;
}

/*----------------------------------------------------------------------
    div.regist
----------------------------------------------------------------------*/

#utilities div.regist div.button {
    height: 60px;
}

#utilities div.regist div.button a {
    height: 60px;
    background-position: 0 -60px;
}

#topRegist,
#topRegist a {
    width: 300px;
    background-image: url(../images/button/form/regist_300x60.png);
}

#topTwitter,
#topTwitter a {
    width: 300px;
    background-image: url(../images/twitter.png);
}

/*----------------------------------------------------------------------
    div.banner
----------------------------------------------------------------------*/

/*----------------------------------------------------------------------
    div.news
----------------------------------------------------------------------*/

#utilities div.news {
    padding-bottom: 3px;
    background-image: url(../images/bg/utilities_box001.png);
    background-repeat: no-repeat;
    background-position: 0 100%;
}

#utilities div.news h3 {
    margin: 0;
    padding: 10px 15px;
    margin: 0;
    background-image: url(../images/bg/utilities_box001.png);
    background-repeat: no-repeat;
    background-position: -300px -996px;
}

#utilities div.news dl {
    margin: 0;
}

#utilities div.news dl dt {
    margin: 0;
    padding: 10px 15px 0 25px;
    border-top: 1px dotted #a6a69f;
    font-size: 93%;
    background-image: url(../images/marker/dash001.png);
    background-repeat: no-repeat;
    background-position: 15px 1.45em;
}

#utilities div.news dl dd {
    margin: 0;
    padding: 0 15px 10px;
    font-size: 93%;
}

#utilities div.news ul {
    margin-left: 10px;
    font-size: 95%;
}

/*----------------------------------------------------------------------
    div.contact
----------------------------------------------------------------------*/

#utilities div.contact h3 {
    margin-top: 40px;
    padding-left: 18px;
    background: url(../images/icon/comment002_13x13.png) no-repeat;
}

#utilities div.contact dl {
    margin: 10px 0 0;
}

#utilities div.contact dt {
    display: none;
}

* html #utilities  div.contact textarea { /* for IE6 */
    border: 2px solid #b3b3ab;
    width: 296px;
}

#submitContact,
#submitContact input {
    width: 164px;
    background-image: url(../images/button/form/contact_164x30.png);
}

/*----------------------------------------------------------------------
    div.twitter
----------------------------------------------------------------------*/

#utilities div.twitter {
    /* margin-top: 40px; */
    /* height: 60px; */
    /* background: DeepSkyBlue; */
    width: 300px;
    height: 200px;
}

div#twitter_widget {
    margin: 0 auto;
}

/*======================================================================
    layout
======================================================================*/

#main {
    overflow: hidden;
    _zoom: 1; /* for IE6 */
}

#photo {
    width: 665px;
    float: left;
}

#utilities {
    margin-top: 50px;
    width: 300px;
    float: left;
    /* background: #f7f7f2; */
}

#utilities #banner {
    margin-top: 30px;
}

.twtr-doc {
    border: 1px solid #CCCCC4;
}