@charset "UTF-8";

/*
 *  myroom_permalink.css
 *  http://reroom.jp/
 *
 *  Description:
 *  写真個別ページのスタイル
 *
 *  Copyright 2010, reroom
*/ 

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

h1 {
    margin: 5px 0 0 50px;
    border: none;
}

legend {
    display: none;
}

input[type="text"] {
    width: 165px;
    max-width: 165px;
}

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

/*======================================================================
    user
======================================================================*/

div.user {
    position: absolute;
    top: 55px;
    left: 75px;
    color: #b3b3ab;
    font-weight: bold;
    font-size: 93%;
}

h1 span.portrait {
    color: #b3b3ab;
    font-weight: bold;
    font-size: 65%;
}

h1 {
    margin-top: 2px;
}

h1 a {
    /* color: #b3b3ab; */
}

div.user span.portrait {
    position: absolute;
    top: -28px;
    left: -50px;
}

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

#photo {
    margin: 15px 0 30px;
}

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

#photo {
}

#photo #selectImage {
    margin: 0 30px 10px 25px;
    position: relative;
    border: 2px solid #b3b3ab;
}

#photo div.image {
    border: 3px solid #fff;
    /* width: 600px; */
    background-color: #f5f5f0;
    text-align: center;
}

#photo div.image img {
    max-width: 600px;
    max-height: 600px;
}

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

/*----------------------------------------------------------------------
    p.description
----------------------------------------------------------------------*/

#photo p.description {
    margin: 0 30px 30px 25px;
    padding-bottom: 20px;
    border-bottom: 1px dotted #b3b3ab;
    font-size: 108%;
}

/*----------------------------------------------------------------------
    dl.data
----------------------------------------------------------------------*/

#photo dl.data {
    padding-left: 25px;
    position: relative;
}

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

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

#photo dl.data dt.color {
    left: 25px;
    background: url("../images/headline/color.12bfbfbedee7.png") no-repeat;
}

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

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

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

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

#photo dl.data dd.item {
}

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

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

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

#photo dl.data dd.color li a {
    display: block;
    width: 190px;
    height: 21px;
    background: url("../images/icon/colorscheme.b06bbc3b9174.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: -190px 0;
}
#photo dl.data dd.color li.brown a {
    background-position: 0 -21px;
}
#photo dl.data dd.color li.brown a:hover {
    background-position: -190px -21px;
}
#photo dl.data dd.color li.orange a {
    background-position: 0 -42px;
}
#photo dl.data dd.color li.orange a:hover {
    background-position: -190px -42px;
}
#photo dl.data dd.color li.khaki a {
    background-position: 0 -63px;
}
#photo dl.data dd.color li.khaki a:hover {
    background-position: -190px -63px;
}
#photo dl.data dd.color li.yellow a {
    background-position: 0 -84px;
}
#photo dl.data dd.color li.yellow a:hover {
    background-position: -190px -84px;
}
#photo dl.data dd.color li.yellowGreen a {
    background-position: 0 -105px;
}
#photo dl.data dd.color li.yellowGreen a:hover {
    background-position: -190px -105px;
}
#photo dl.data dd.color li.green a {
    background-position: 0 -126px;
}
#photo dl.data dd.color li.green a:hover {
    background-position: -190px -126px;
}
#photo dl.data dd.color li.lightBlue a {
    background-position: 0 -147px;
}
#photo dl.data dd.color li.lightBlue a:hover {
    background-position: -190px -147px;
}
#photo dl.data dd.color li.blue a {
    background-position: 0 -168px;
}
#photo dl.data dd.color li.blue a:hover {
    background-position: -190px -168px;
}
#photo dl.data dd.color li.purple a {
    background-position: 0 -189px;
}
#photo dl.data dd.color li.purple a:hover {
    background-position: -190px -189px;
}
#photo dl.data dd.color li.pink a {
    background-position: 0 -210px;
}
#photo dl.data dd.color li.pink a:hover {
    background-position: -190px -210px;
}
#photo dl.data dd.color li.white a {
    background-position: 0 -231px;
}
#photo dl.data dd.color li.white a:hover {
    background-position: -190px -231px;
}
#photo dl.data dd.color li.gray a {
    background-position: 0 -252px;
}
#photo dl.data dd.color li.gray a:hover {
    background-position: -190px -252px;
}
#photo dl.data dd.color li.black a {
    background-position: 0 -273px;
}
#photo dl.data dd.color li.black a:hover {
    background-position: -190px -273px;
}
#photo dl.data dd.color li.gold a {
    background-position: 0 -294px;
}
#photo dl.data dd.color li.gold a:hover {
    background-position: -190px -294px;
}
#photo dl.data dd.color li.silver a {
    background-position: 0 -315px;
}
#photo dl.data dd.color li.silver a:hover {
    background-position: -190px -315px;
}

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

#photo dl.data dd.item li {
    padding: 0 0 0 20px;
    background: url("../images/icon/item001_13x13.796a92b36b7d.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.00cedf34739c.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.00cedf34739c.png") no-repeat -184px -18px;
}

#photo dl.data dd.keyword form {
    margin: 0 0 7px;
    position: relative;
    clear: both;
}

#photo dl.data dd.keyword div.inputText span.addBtn {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 24px;
    height: 28px;
    text-indent: -9999px;
    background-image: url("../images/button/add001.85776ad6af4f.png");
    background-repeat: no-repeat;
    background-position: 0 0;
}

#photo dl.data dd.keyword div.inputText a {
    display: block;
    width: 24px;
    height: 28px;
    background-image: url("../images/button/add001.85776ad6af4f.png");
    background-repeat: no-repeat;
    background-position: 0 -28px;
}

#photo dl.data dd.keyword div.inputText a:hover {
    background-position: 0 -56px;
}

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

#utilities {
    margin: 15px 0;
    border: 1px solid #dbdbdb;
}

#utilities h2 {
    margin: 0;
    padding: 10px 15px;
    border-bottom: 1px solid #dbdbdb;
    font-size: 85%;
}

#utilities div.section div.section {
    border-top: 1px dotted #b3b3ab;
    min-height: 83px;
    position: relative;
}

#utilities div.section div.first {
    border: none;
}

#utilities div.section div.section h3,
#utilities div.section div.section div.date,
#utilities div.section div.section ul.info {
    margin-left: 85px;
}

#utilities div.section div.section h3 {
    margin-top: 0;
    padding-top: 15px;
}

#utilities div.section div.section div.date {
    color: #b3b3ab;
    font-weight: bold;
    font-size: 93%;
}

#utilities div.section div.section div.thumb {
    position: absolute;
    top: 10px;
    left: 15px;
}

#utilities div.section div.section ul.info {
    color: #b3b3ab;
    font-weight: bold;
    font-size: 93%;
}

#utilities div.section div.section ul.info li {
    margin: 5px 5px 0 0;
    padding: 0;
    float: left;
    height: 21px;
    line-height: 21px;
    background: url("../images/bg/utilities_info_bg.77604a8bd4a4.png") no-repeat 100% 0;
}

#utilities div.section div.section ul.info li img {
    vertical-align: middle;
}

#utilities div.section div.section ul.info li span {
    padding: 0 5px;
    display: block;
    float: left;
    height: 21px;
    color: #b3b3ab;
    background: url("../images/bg/utilities_info_bg.77604a8bd4a4.png") no-repeat -154px -21px;
}

#utilities div.section div.section ul.info li a:hover {
    color: #b3b3ab;
    background-color: transparent;
}


#utilities p.more {
    border-top: 1px solid #dedede;
    margin: 0;
    padding: 10px 0;
    font-size: 85%;
    font-weight: bold;
    text-align: center;
    display: block;
    width: 300px;
}

/*======================================================================
    #communication
======================================================================*/

#communication {
    margin: 0 1px;
    border-top: 1px solid #dbdbdb;
    background: #fafaf5;
}

#comment h2,
#clip h2 {
    margin-top: 30px;
    padding-bottom: 10px;
    border-bottom: 1px dotted #b3b3ab;
    height: 12px;
    text-indent: -9999px;
}

/*----------------------------------------------------------------------
    list
----------------------------------------------------------------------*/

#communication span.portrait {
    float: left;
}

#communication span.name {
    margin-left: 38px;
    display: block;
    font-size: 93%;
}

#communication span.date {
    margin-left: 5px;
    color: #b3b3ab;
    font-size: 85%;
}

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

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

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

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

/*----------------------------------------------------------------------
    #comment
----------------------------------------------------------------------*/

#comment {
    border-top: 1px solid #ffffff;
}

#comment h2,
#commentList,
#commentForm {
    margin-right: 25px;
    margin-left: 25px;
}

#comment h2 {
    background: url("../images/headline/comment.4c44ac133cac.png") no-repeat;
}

/*----------------------------------------------------------------------
    #commentList
----------------------------------------------------------------------*/

#commentList {
    margin-bottom: 15px;
}
#commentList h3 {
    display: none;
}

#commentList dl {
    margin: 5px 0 0;
}

#commentList dt {
    margin: 0;
    padding-top: 7px;
    float: left;
    clear: left;
    width: 200px;
    line-height: 1.2;
    font-weight: bold;
}

#commentList dd.commentBody {
    padding: 7px 0 10px 210px;
    border-bottom: 1px dotted #b3b3ab;
}


/*----------------------------------------------------------------------
    #commentForm
----------------------------------------------------------------------*/

#commentForm {
    margin-bottom: 40px;
}

#commentForm h3 {
    margin-top: 40px;
    padding-left: 18px;
    background: url("../images/icon/comment002_13x13.d46d7cda580c.png") no-repeat;
    font-size: 93%;
}
#commentForm dt {
    display: none;
}

#commentForm p.attention {
    height: 30px;
    line-height: 30px;
    color: #b3b3ab;
    font-weight: bold;
    font-size: 93%;
    text-indent: 15px;
}

#submitComment,
#submitComment input {
    float: left;
    width: 135px;
    background-image: url("../images/button/form/comment_135x30.f580c4ff59ee.png");
}

#loginComment,
#loginComment a {
    width: 167px;
    background-image: url("../images/button/form/comment_login_167x30.24a6166172ea.png");
}


/*----------------------------------------------------------------------
    #clip
----------------------------------------------------------------------*/

#clip {
    border-top: 1px solid #ffffff;
}
#clip h2 {
    background: url("../images/headline/clip.8e9ad3a3a0ee.png") no-repeat;
}

#clip ul.clipList {
    margin: 0 0 15px;
    padding: 0;
}

#clip ul.clipList li {
    margin: 0;
    padding: 13px 0;
    border-bottom: 1px dotted #b3b3ab;
    clear: both;
    line-height: 1.2;
    background: none;
    font-weight: bold;
}

#clip p.clipList-footer  {
    text-align: right;
}

#addClip,
#addClip a {
    width: 96px;
    background-image: url("../images/button/form/clip_96x30.08e9b25a480e.png");
}

#loginClip,
#loginClip a {
    width: 166px;
    background-image: url("../images/button/form/clip_login_166x30.66ad3e49bd64.png");
}

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

#main,
#communication {
    overflow: hidden;
}

#main {
	padding-bottom: 30px;
}

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

#utilities,
#clip {
    width: 300px;
    float: left;
}

ul.errorlist li {
    background-image:url("../images/icon/caution001_13x13.024e7a61f7aa.png");
    background-position:0 2px;
    bottom:0;
    color:#FF9900;
    font-size:11px;
    font-weight:bold;
    height:13px;
    left:0;
    line-height:1.4;
    padding-top:2px;
    padding-left:18px;
    margin-top: -5px;
    margin-bottom: 10px;
}


/*======================================================================
    sns button
======================================================================*/

a.mixi-check-button {
    margin-left: 10px !important;
}

iframe.twitter-share-button {
    margin-left: 5px !important;
    width: 100px !important;
}

iframe.facebook-like-button {
    border: none;
    overflow: hidden;
    width: 90px;
    height: 24px;
    margin-bottom: -9px;
}

.twitter-share-button,
.twitter-count-horizontal {
    margin-bottom: -5px !important;
}

.facebook-share-button .FBConnectButton_Text {
}