/* 
    Document   : tokyo cafe 360用テンプレート
    Created on : 2012/10/11,
    Author     : Yasuhiro Ichikawa
    Description:
    Purpose of the stylesheet follows.
*/

/**** ヘッダ ****/
#header {
    position:absolute;
    width:100%;
    height:25px;
    top:0;
    z-index: 1000;
    background-image: url('header_back.png');
    display: none; /* 最初は非表示 */
}

#areaname {
    font-size: 10pt;
    float: left;
    margin: 0;
    padding: 5px 15px;
    color: #333;
}

#shopname {
    font-size: 10pt;
    float: right;
    margin: 0;
    padding: 5px 15px;
    color: #333;
}


/**** フッター ****/
#footer {
    position: absolute;
    z-index: 999;
    top: -9999px;
    left: -9999px;
    width: 1280px;
    height: 50px;
    background-image: url('transparent-tile-w60.png');
}

#selectAreaButton {
    position: absolute;
    z-index: 1000;
    top: 10px;
    left: 10px;
}

#searchItemButton {
    position: absolute;
    z-index: 1000;
    top: 10px;
    left: 100px;  
}

#mapButton {
    position: absolute;
    z-index: 1000;
    top: 10px;
    left: 0px; 
}

#helpButton {
    position: absolute;
    z-index: 1000;
    top: 5px;
    left: 0px;  
}

/**** 検索窓 ****/

#searchBoxContainer  {
    display: none;
}

.searchBoxContainer_normal  {
    margin: 0;
    height: 230px;
    width: 500px;
    background: url('searchbox.png') no-repeat bottom;
    position: absolute;
    z-index: 1000;
    /*
    top: -9999px;
    left: -9999px;
    */
}

.searchBoxContainer_iphone  {
    margin: 0;
    height: 100px;
    width: 280px;
    background:url('searchbox_iphone.png') no-repeat;
    position: absolute;
    z-index: 1000;
    /*
    top: -9999px;
    left: -9999px;
    */

}

#searchBox {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
}

.searchBox_normal{
    background: none;
    border: none;
    width: 300px;
    height: 20px;
    margin-top: 105px;
    margin-left: 100px;
    padding-left: 35px;
}

.searchBox_iphone{
    background: none;
    border: none;
    width: 190px;
    height: 20px;
    margin-top: 67px;
    margin-left: 75px;
    padding-left: 35px;
}



#searchBoxContainerCloseBtn {
    position: absolute;
    top:35px;
    right:85px;
}


/**** パノラマリスト ****/
#panoramaListBoxContainer {
    position: absolute;
    top: -9999px;
    left: -9999px;
    width: 300px;
    z-index: 1000;
}

#panoramaListBalloon {
    text-align: center;
    margin-bottom: -6px;
}

#panoramaListCloseBtn {
    text-align: right;
    margin: 5px;
}

#panoramaListBox {
    -webkit-border-radius: .5em;
    list-style-type: none;
    padding: 5px;
    background-color: #FFF;
    box-shadow: 0px 0px 6px #555;
}  

#panoramaList {
    -webkit-border-radius: .5em;
    list-style-type: none;
    padding: 0;
    height: 200px;
    width: 290px;
    overflow: scroll;
    overflow-y: scroll;
    overflow-x: hidden;
}


.panoramaItem {
    height: 15px;
    margin-bottom: 1px;
    padding: 3px;
    overflow: hidden;
    background-color: whitesmoke;
    color: #333;
}

.panoramaItem:hover {              
    background-color: pink;
}

.panoramaItem:visited {              
    color: #333;
}

.panoramaItemCaption {
    font-size: 70%;
    color: black;
}

.panoramaSelectedItemCaption {
    font-size: 70%;
    color: #333;
}

/**** 商品検索結果リスト ****/
#searchResultBoxContainer {
    position: absolute;
    top: -9999px;
    left: -9999px;
    width: 312px;
    z-index: 1000;
}



#searchResultBalloon {
    text-align: center;
    margin-bottom: -6px;
}

#searchResultBox {
    -webkit-border-radius: .5em;
    list-style-type: none;
    box-shadow: 0px 0px 6px #555;
    padding: 5px;
    background-color: #FFF;   
}  

#searchResultTitle {
    text-align: center;
    color:#555;
    font-size: 12pt;
    padding-top: 2px;
    padding-bottom: 5px;
}

#searchResultList {
    -webkit-border-radius: .5em;
    list-style-type: none;
    padding: 0;
    height: 300px;
    width: 302px;
    overflow: scroll;
    overflow-x:hidden;
    overflow-y:scroll;
}

.searchResultItem {
    width: 300px;
    height: 35px;
    margin-top: 1px;
    margin-bottom: 1px;
    padding: 3px;
    overflow: hidden;
    background-color: whitesmoke;
}

.searchResultItem:hover {              
    background-color: pink;
}

.searchResultItemThumb {
    float: left;
    width: 30px;
    height: 30px;
    margin-left: 6px;
}

.searchResultItemCaption {
    width: 240px;
    height: 35px;
    margin-right: 15px;
    float: right;
    font-size: 70%;
    color: black;
}

.searchResultSelectedItemCaption {
    width: 240px;
    height: 35px;
    margin-right: 12px;
    float: right;
    font-size: 11pt;
    color: pink;
}

span.loading {
    position: absolute;
    top: 50%;
    left: 48%;
}

/*** 商品ポップアップ ***/

#myItemInner {
    position: relative;
    overflow: hidden;
    text-align: center;
    overflow: visible;
    height:320px;
}

#productDetailMain {
}

#productDetailFooter {
    background-color: #a2a2a2;
    padding-top: 5px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
}

#productTitle {
    height: 20px;
    text-align:center;
    padding-top: 8px;
    font-size: 12pt;
    font-weight: bold;
    overflow: hidden;
    display: none;
}


#productImage {
    width:200px;
    border: 3px solid white;
    margin:0 auto;
}

#productPrice {
    margin:5px auto 0 auto;
    color:#333;
    text-align: right;
    font-size: 120%;
    position: absolute;
    right:50px;
    top:160px;
    font-size: 90%;
    color:#FFF;
    background-color:#0071BC;
    padding:2px 5px;
}

#productCategory {
    width: 155px;
    position: absolute;
    color: #888888;
    font-family:sans-serif;
    left:20px;
    top: 160px;
    padding: 5px;
}


#productDescription {
    font-size: 10pt;
    color: #333;
    line-height: 160%;
    text-align:left;
    position: absolute;
    top: 190px;
    padding: 0 25px;
    overflow: scroll;
    max-height: 80px;
}

#productDescription p {
    text-overflow:clip;
    padding: 0 !important;
    overflow: scroll;
}

#productDetailSNSbuttons {
    display: inline-block;
    float: right;
}

#productTwitter {
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 15px;
    left:10px;
    background-image: url('productTwitter_back.png');
    display: block;
}

#productDetail {
    width: 90px;
    height:20px;
    display: block;
    position: absolute;
    bottom:15px;
    right: 10px;
    background-image: url('productDetail_back.png');
    text-indent: -9999px;
}


/**** ナビゲーション ****/

#popup {
    display: none;
    position: absolute;
    width:300px;
    height: 380px;
    z-index: 9999;
}

#popup a:link {color: #666666;}
#popup a:visited {color: #666666;}
#popup a:hover {color: #000;}
#popup a:active {color: #666666;}
#popup a:focus{color: #666666;}

#popup_inner{
    width: auto;
    margin:0 auto;
    background:none;
    text-align: center;
}

#popup_title{
    background-color:#e8e8e8;
    height:27px;
}

#popup_caption{
    height:25px;
    float:left;
}

#popup_closeWindow{
    width: 175px;
    height:35px;
    display: block;
    position: absolute;
    bottom:20px;
    right:65px;
    background-image: url(popup_closeWindow.png);
    text-indent: -9999px;
}

#popup_body {
    background: none;    
}

#popup_overlay {
    display:none;
    position:absolute;
    top: 0px;
    left: 0px;
    background:url('bg.png');
    z-index:9998;    
}

#nav_page {
    width: 300px;
    height: 420px;
    display: block;
    background-image: url(nav_page_back.png);
    position:relative;
}


a#nav_page_button1 {
    width: 200px;
    height: 45px;
    background-image: url(nav_page_button1.png);
    display: block;
    text-indent: -9999px;
    position: absolute;
    top:255px;
    left: 300px;
}

a#nav_page_button1:hover {
    background-position: bottom;
}

a#nav_page_button2 {
    width: 200px;
    height: 45px;
    background-image: url(nav_page_button2.png);
    display: block;
    text-indent: -9999px;
    position: absolute;
    top:255px;
    left: 50px;
}

a#nav_page_button2:hover {
    background-position: bottom;
}

a#nav_page_button3 {
    width: 120px;
    height: 45px;
    background-image: url(nav_page_button3.png);
    display: block;
    text-indent: -9999px;
    position:absolute;
    top: 320px;
    left:200px;
}

a#nav_page_button3:hover {
    background-position: bottom;
}

a#nav_page_button4 {
    width: 120px;
    height: 45px;
    background-image: url(nav_page_button4.png);
    display: block;
    text-indent: -9999px;
    position:absolute;
    top: 320px;
    left:55px;
}

a#nav_page_button4:hover {
    background-position: bottom;
}

/**** ナビゲーション ****/

#popup_iphone {
    display: none;
    position: absolute;
    height: 380px;
    z-index: 999;
}

#popup_body_iphone {
    background:url(popup_iphone.png);
    background-repeat: no-repeat;
    position: relative;
    height: 360px;
}

#popup_iphone_button {
    position: absolute;
    width: 150px;
    height: 30px;
    display:block;
    background:url(popup_iphone_button.png);
    top:320px;
    left:75px;
    z-index:9999;
}