@charset 'UTF-8';

/*======================================
　0: Layout CSS
=======================================*/

html {
}

body {
background: #FFF;
}

#wrapper {
background: url(../images/bg.png);
margin: 0;
z-index:1;
}

#wrapperin {
color: #FFF;
margin: 0 auto;
background: url(../images/logo.png) no-repeat;
width: 940px;
}

/*========== Link ==========*/
a { 
color: #006699; /* Link */
}

a:hover { 
color: #0099cc; /* Hover */
}

/*========== Header ==========*/
#header {
margin: 0 auto;
width: 800px;
text-align: center;
}

#logo {
float: left;
width: 300px;
}

#hright {
float: right;
width: auto;
text-align: right;
}

#sns {
margin: 0 auto;
padding: 20px 0 0px 0;
}

iframe.twitter-share-button {
    width: 105px!important;
}

#lang {
width: 90px;
float: right;
padding: 20px 0 0 0;
}

#lang select {
background: #666;
color: #FFF;
border: none;
font-size: 11px;
}


/*========== Contetnt ==========*/
#main {
width: 800px;
margin: 0 auto;
}

#indexmain {
background: url(../images/bg_main_ja.png) no-repeat;
}

#indexmainen {
background: url(../images/bg_main_en.png) no-repeat;
}

#btnlogin {
margin: 0 auto;
text-align: center;
}


/* ============ Old Panel ========================*/
#panel {
margin: 50px 0 0 -5px;
background: url(../images/bg_panel2.png) left bottom no-repeat;;
color: #333;
}

#panelin {
background: url(../images/bg_panel1.png) left top no-repeat;
}

#panelleft {
width: 440px;
float: left;
}

#panelright {
width: 360px;
float: left;
padding: 30px 0;
}

#puser {
width: 420px;
overflow: hidden;
}

#puser .photo {
width: 48px;
float: left;
margin: 11px 0 0 5px;
}

#puser .name {
width: 355px;
float: left;
margin: 36px 0 0 6px;
color: #FFF;
font-weight: bold;
font-size: 22px;
padding: 0;
line-height: 100%;
}

#pform {
padding: 20px 0 20px 20px;
}

#pform tr {
}

#pform th {
text-align: left;
	vertical-align: top;
}

#pform td {
vertical-align: middle;
font-size: 11px;
padding: 2px 0;
}

#pform td span {
color: #999;
}

#pform td #target_tags,
#pform td #target_user_id {
border: 1px solid #999;
width: 100px;
height: 15px;
}

#setting1 {
font-weight: bold;
margin: 20px auto 0 auto;
text-align: center;
}

#setting1 a {
color: red;
}

#setting2 {
font-weight: bold;
color: green;
margin: 20px auto 0 auto;
text-align: center;
}

#tweetbox textarea {
width: 355px;
height: 40px;
margin: 20px auto 0 auto;
font-size: 11px;
color: #666;
}

#setbtn {
width: 220px;
text-align: center;
margin: 0px auto 0 auto;
}

#setbtn button {
border: none;
background: none;
text-align: center;
width: 220px;
}

#settext {
font-size: 12px;
margin: 35px 5px 20px 5px;
color: #CCC;
font-weight: normal;
}

#previewbtn {
margin: 10px auto 0 auto;
text-align: center;
}

#previewbtn button {
border: none;
background: none;
width: 150px;
}

#previewarea {
}

#preview_loading {
margin: 20px auto 0 auto;
text-align: center;
}

#preview {
margin: 0 auto;
text-align: center;
height: 150px;
}

#preview_note {
font-size: 11px;
text-align: center;
margin: 3px auto 0 auto;
color: #999;
}

#preview_loading {
margin-top: 50px 0 0 40px;
}

#postbg_sending {
 margin:50px auto 0 auto;
text-align: center;
color: #fff;
}

#panel .btn {
margin: 0 auto;
text-align: center;
}


/* ============ NEW Panel ========================*/
#panelnew {
margin: 50px 0 0 -7px;
color: #333;
}

#panelnew #panelin {
background: url(../images/bg_panelnew_top.png) left top no-repeat;
}

#panelnew #paneltop {
background: url(../images/bg_panelnew_top2.png) left bottom no-repeat;;

}

#panelnew #panelbtm {
margin: 15px auto 0 auto;
}

#panelnew #puser {
width: 420px;
overflow: hidden;
}

#panelnew #puser .photo {
width: 48px;
float: left;
margin: 11px 0 0 5px;
}

#panelnew #puser .name {
width: 355px;
float: left;
margin: 36px 0 0 6px;
color: #FFF;
font-weight: bold;
font-size: 22px;
padding: 0;
line-height: 100%;
}

#panelnew #pform {
padding: 20px 0 20px 20px;
}

#panelnew #pform th {
text-align: left;
	vertical-align: top;
}

#panelnew #pform td {
vertical-align: middle;
font-size: 11px;
padding: 2px 0;
}

#panelnew #pform td span {
color: #999;
}

#panelnew #pform td #target_tags,
#panelnew #pform td #target_user_id {
border: 1px solid #999;
width: 100px;
height: 15px;
}

#panelnew #setting1 {
font-weight: bold;
margin: 20px auto 0 auto;
text-align: center;
}

#panelnew #setting1 a {
color: red;
}

#panelnew #setting2 {
font-weight: bold;
color: green;
margin: 20px auto 0 auto;
text-align: center;
}

#panelnew #tweetbox textarea {
width: 355px;
height: 40px;
margin: 20px auto 0 auto;
font-size: 11px;
color: #666;
}

#panelnew #setbtn {
width: 220px;
text-align: center;
margin: 10px auto 0 auto;
}

#panelnew #setbtn button {
border: none;
background: none;
text-align: center;
width: 220px;
}

#panelnew #settext {
font-size: 12px;
margin: 35px 5px 20px 5px;
color: #CCC;
font-weight: normal;
}

#panelnew #previewbtn {
margin: 10px auto 0 auto;
text-align: center;
}

#panelnew #previewbtn button {
border: none;
background: none;
width: 150px;
}

#panelnew #previewarea {
border: 1px dashed #666;
border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
width: 794px;
height: 300px;
margin: 0 auto;
background: url(../images/bg_preview.png) no-repeat center center;
text-align: center;
padding: 25px 0 0 0;
}

#panelnew #preview {
margin: 0 auto;
text-align: center;
height: 150px;
}

#panelnew #preview_note {
font-size: 11px;
text-align: center;
margin: 130px auto 0 auto;
color: #FFF;
}

#panelnew #preview_loading {
margin-top: 60px 0 0 40px;
text-align: center;
}

#panelnew #postbg_sending {
 margin:50px auto 0 auto;
text-align: center;
color: #fff;
}

#panelnew #postbg_done {
 display:none; 
 width: 600px;
 text-align: center;
 margin: 20px auto;
}

#panelnew #postbg_done p {
color: #009900;
}

#panelnew .btn {
margin: 10px auto;
text-align: center;
}

/*エディタ*/
#panelnew #preview_popup {
z-index:1000; 
width:860px; 
height:485px; 
background-color: #CCC; 
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px; 
border: 3px solid #FFF; 
display:none;
}


#panelnew #preview_popup #msg {
position: relative;
color: #333;
font-size: 12px;
margin: -25px 0 20px 15px;
z-index: 1;
}

#panelnew #preview_popup #msg img {
vertical-align: top;
}

#panelnew #preview_popup #reload {
position: relative;
z-index: 2;
text-align: left;
width: 40px;
top: 10px;
left: 807px;
}

#panelnew #preview_popup #preview_popup_canvas {
 width:832px;
 margin: 0 auto;
 text-alin :center;
 }

#panelnew #preview_popup #preview_popup_btn {
margin: 20px auto 0 auto;
text-align: center;
}

#panelnew #preview_popup #preview_popup_btn #btn button {
border: 0; 
background: none;
}

/*========== Content: about ==========*/

#about {
margin-top: 60px;
font-size: 11px;
}

#about h2 {
font-size: 15px;
font-weight: bold;
color: #d5e9f2;
padding-bottom: 5px;
}

#about .about1t,
#about .about3t {
width: 250px;
float: left;
line-height: 180%;
}

#about .about1i,
#about .about3i {
width: 500px;
float: right;
text-align: center;
margin: 0 0 80px 0;
}

#about .about2t,
#about .about4t {
width: 250px;
float: right;
line-height: 180%;
}

#about .about2i,
#about .about4i  {
width: 500px;
float: left;
text-align: center;
margin: 0 0 80px 0;
}

#about #btnlogin {
margin-bottom: 60px;
}

/*========== Content: help ==========*/

#help {
margin: 60px 0 30px 0;
font-size: 11px;
}

#help h2 {
font-size: 15px;
font-weight: bold;
color: #d5e9f2;
padding-bottom: 25px;
}

#help .helpinfo {
marbin-bottom: 10px;
}

#help p {
padding: 20px 0;

}

#help h3 {
border-top: 1px dotted #666;
font-size: 14px;
padding-top: 20px;
}

/*========== Content: policy ==========*/

#policy {
margin: 60px 0 30px 0;
font-size: 11px;
}

#policy h2 {
font-size: 15px;
font-weight: bold;
color: #d5e9f2;
padding-bottom: 25px;
}

#policy .policyinfo {
marbin-bottom: 10px;
}

#policy p {
padding: 20px 0;

}

#policy h3 {
border-top: 1px dotted #666;
font-size: 14px;
padding-top: 20px;
}

/*========== Content: policy ==========*/

#policy {
margin: 60px 0 30px 0;
font-size: 11px;
}

#policy h2 {
font-size: 15px;
font-weight: bold;
color: #d5e9f2;
padding-bottom: 25px;
}

#policy .policyinfo {
marbin-bottom: 10px;
}

#policy p {
padding: 20px 0;

}

#policy h3 {
border-top: 1px dotted #666;
font-size: 14px;
padding-top: 20px;
}

/*========== Content: Contact ==========*/

#contact {
margin-top: 60px;
line-height: 150%;
}

#contactinfo {
width: 200px;
float: left;
}

#contactform {
width: 600px;
float: left;
}

#contact dl {
width: 530px;
margin: 0 auto;
}

#contact dl dt {
width: 130px;
float: left;
border-bottom: 1px solid #666;
margin: 5px 0;
height: 35px;
}

#contact dl dd {
width: 400px;
float: left;
border-bottom: 1px solid #666;
margin: 5px 0 5px 0px;
height: 35px;
}

#contact dl dt#cmsg,
#contact dl dd#cmsg {
height: 190px;
}

#contact #cmsg textarea {
width: 350px; 
height: 150px;
}

#contact dl dt#ccode,
#contact dl dd#ccode {
height: 75px;
}

#contact dd input {
border: 1px solid #999;
background: #EDEDED;
}

#contact .btn {
width: 500px;
margin: 0 atuo;
text-align: center;
}

#contact .btn button {
background: url(../images/btn_150.png) no-repeat;
width: 150px;
height: 35px;
color: #FFF;
border: 0;
}

#contact span {
font-size: 10px;
}

#contact .errors {
margin: 0px 30px 20px 40px;
border: 1px dotted #ff6666;
padding: 10px;
}

/*========== Tag: Tagpage ==========*/

#tagpage {
margin-top: 30px;
}

#tagpage h2 {
margin-top: 10px;
width: 300px;
float: left;
font-size: 14px;
}

#tagbtn {
width: 250px;
height: 35px;
float: right;
text-align: center;
padding: 13px 0 0 0;
margin: 0 5px 5px 0;
background: url(../images/btn_tag.png) center center no-repeat;
}

#tagbtn a {
color: #FFF;
text-decoration: none;
}

#tagpage table {
clear: both;
}

#tagpage table td {
padding-bottom: 5px;
}


/*NEWPAGINATION*/

#tagpagination {
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
margin: 10px auto 14px auto;
padding:0;
font-size: 10px;
text-align:center;
color:#666;
line-height: 100%;
}

#tagpagination span {
line-height: 20px;
display: inline-block;
height: 20px;
width:20px;
background: url(../images/tagpagination.png) no-repeat -20px center;
padding: 0px 0 0 0 !important;
text-decoration: none;
margin: 0 2px 4px 0;
text-align: center;
}

#tagpagination span a b {
color:#666;
display: block;
background: none;
text-align: center;
font-weight: bold;
}

#tagpagination span a,
#tagpagination span a:visited{
color:#2249a2;
text-decoration: none;
text-align: center;
display: block;
width: 20px;
}

/*========== Error ==========*/

.errors { color: #ff6666; font-size: 11px;}

#error_no_user,
#error_no_tags {
text-align: center;
margin: 0 auto;
font-weight: bold;
color: #ff6666; font-size: 11px;
}

/*========== User ==========*/
#usertab {
width: 800px;
height: 28px;
margin: 0px auto 0 auto;
text-align: right;
}

#user {
background: url(../images/bg_user.png);
padding: 20px 20px 20px 20px;
}

#userframe {
width: 875px;
margin: 0 auto;
}


#usersb,
#usersf {
width: 30px;
height: 180px;
float: left;
}

#usersb {
width: 35px;
}

#users_back,
#users_forward {
padding: 65px 0 0 0;
}

#userin {
width: 810px;
float: left
}

#userin div {
width: 26px;
float: left;
}

#userscount {
width: 810px;
height: 22px;
margin: 0 auto;
text-align: right;
}

#userscount img {
vertical-align: text-bottom;
float: left;
}

#userscount div {
background: url(../images/users_totalbg.png) no-repeat right top;
color: #FFF;
display: inline;
padding: 4px 15px 0 5px;
height: 22px;
font-size: 11px;
float: left;
}

#tagtab {
width: 800px;
height: 28px;
margin: 30px auto 0 auto;
}

#tag {
background: #5c7dc8 url(../images/tag_bg.png) left top repeat-x;
margin: 0 auto;
}

#tagin {
width: 800px;
text-align: center;
margin: 0 auto;
padding: 10px 0px;
}

#tagin a {
color: #FFF;
}

#tagsort {
 margin-bottom:10px;
 text-align: right;
 }
 
 #tagsort a {
color:#333333;
}
  
#totop {
margin: 0 auto;
width: 800px;
text-align: right;
}

#totop a {
font-size: 11px;
border: 1px solid #CCC;
background: #666;
padding: 5px 5px;
color: #FFF;
text-decoration: none; 
}


/*========== Footer ==========*/
footer {
width: 830px;
color: #666;
text-align: center;
margin: 0 auto;
}

#link {
width: 300px;
float: left;
text-align: left;
padding: 8px 0 0 0;
}

#link a {
border-right: 1px dotted #999;
padding: 0 7px;
}

#link div {
padding: 5px 0 0 6px;
}

#link div a {
border: none;
padding: 0;
}

#copy {
font-size: 10px;
width: 530px;
float: right;
text-align: right;
padding: 7px 0 0 0;
}

#copy2 {
clear: both;
font-size: 9px;
color: #999;
padding: 10px 0 10px 0;
text-align: right;
}

/*========== jQuery: Tool TIp ==========*/

.bubbleInfo {
    position: relative;
}

.bubbleInfo img {
vertical-align: text-bottom;
padding-left: 5px;
}

.popup {
    position: absolute;
	background: url(../images/balloon.png) no-repeat;
	width: 200px;
	height: 110px;
    display: none; /* keeps the popup hidden if no JS available */
}

.popup p {
padding: 40px 10px 0 10px;
font-weight: normal;
text-decoration: normal;
font-size: 11px;
color: #663300;
}


#footerad {
margin: 0 auto; 
padding-top: 40px;
}

/*========== jQuery: sticky scroll ==========*/
#flinks {
margin: 20px 0px 0 0;
width:172px;
height: 193px;
background: url(../images/bg_flinks.png) no-repeat;
z-index: 100;
position: relative;
float: right;
}

#flinks .scrollFixIt {
color: #FFF;
left: 148px;
width: 10px;
height: 10px;
border: 1px solid #fff;
padding: 2px;
margin-top: 5px;
}

#flinks img {
position: relative; 
top: 26px;
left: 5px;
}

#main { margin-top: -110px;}