@charset "UTF-8";

html,body,div.background, #main {
	/*height: 100%;*/
}

div.background, #main {
	/*min-height: 100%;*/
}

body > div.background {
	height: auto;
}

body {
	margin: 0;
	padding: 0;
	color: #222222;
	background-color: #b2fcc4;
}

a {
	color: #3399CC;
}

#header {
	width: 100%;
	height: 36px;
	background-color: #7ECE15;
	/*デバッグ用の透過処理*/
	/*background-color: rgba(126, 207, 21, 0.42);*/
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	padding: 5px;
	z-index: 3;
}

.dis_inline {
	display: inline;
}

.indexFrom {
	position: fixed;
	top: 36px;
	width: 100%;
	left: 0;
	margin: 0;
	padding: 4px;
	height: 36px;
	z-index: 2;
}

.form_lavel_r{
	text-align: right;
	padding-top: 5px;
}

/* ヘッダーフォーム */
.input_form_style {
	height: 30px;
	padding: 5px 10px;
	font-size: 12px;
	line-height: 1.5;
	border-radius: 5px;
	color: #555;
	background-color: #fff;
	border: 1px solid #ccc;
	font-family: inherit;
}

/*  画面幅 520px以上 PC,タブレットでの設定 */
@media only screen and (min-width: 520px) {

	#Search_Form {
		margin-left: 20px;
		margin-right: 0px;
		width: 150px;
	}

	#Lavel_Order {
		display: inline;
	}

	#Search_Button {
		margin-right: 40px;
	}
}

/* 画面幅 519px以下 スマホ想定での設定 */
@media only screen and (max-width: 519px) {

	#Search_Form {
		margin-left: 20px;
		margin-right: 0px;
		width: 110px;
	}

	#Order_Form {
		width: 110px;
	}

	#Lavel_Order {
		display: none;
	}

	#Search_Button {
		margin-right: 10px;
	}
}



#dummyIndexForm {
	position: fixed;
	width: 100%;
	top: 36px;
	left: 0;
	margin: 0;
	padding: 5px;
	height: 40px;
	border-bottom: 1px solid #8bc244;
	/* デバッグ用に背景無しに */
	background-color: #fff;
	z-index: 1;
}

#header_menu {
	float: right;
	display: inline;
	font-size: 1.2em;
}

#header h1 {
	font-size: 1.5em;
	padding-top: 10px;
	margin-left: 15px;
	display: inline;
}

#header h1 a {
	color: #ffffff;
	text-decoration: none;
}

#header h1 a:hover {
	background-color: #BBBBBB;
}

#pageTitle {
	margin-top: 20px;
	margin-bottom: 5px;
}

#pageTitle h2 {
	font-size: 1.8em;
	display: inline;
}

#calcStatusArea {
	padding-top: 20px;
	text-align: right;
}

#calcStatusArea p {
	display: inline;
}

/* main user */

#main {
	margin: 0px;
	padding-top: 60px;
	background-color: #b2fcc4;
}

.mainUser {
	background-color: #e2fee5;
	width: 100%;
	padding: 10px 5px 0px 5px;
	border-radius: 10px;
	border-bottom: 2px solid #CCCCCC;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 5px;
}

.mainUser p {
	margin: 0;
}

#toMeWsMessage{
	position: fixed;
	z-index: 3;
	left: 30%;
	top: 0px;
	text-align: center;
}

#toOtherWsMessage{
	z-index: 3;
	left: 30%;
	top: 0px;
	text-align: center;
}


#statuses {
	background-color: #b2fcc4;
}

.follow_status img {
	width: 60px;
	border-radius: 5px;
}

.follow_button, .unfollow_button {
	width: 60px;
	border-radius: 5px;
	border: 1px solid #aaa;
	-moz-box-shadow:
		0px 1px 3px rgba(005,005,005,0.5),
		inset 0px -1px 0px rgba(255,255,255,0.7);
	-webkit-box-shadow:
		0px 1px 3px rgba(005,005,005,0.5),
		inset 0px -1px 0px rgba(255,255,255,0.7);
	box-shadow:
		0px 1px 3px rgba(005,005,005,0.5),
		inset 0px -1px 0px rgba(255,255,255,0.7);
}

.follow_button:hover, .unfollow_button:hover {
	border: 2px solid #7ece15;
}

.viewUsers {
	width: 100%;
	padding: 10px 10px 0 10px;
	background-color: #fff;
	border-radius: 10px;
	border-bottom: 2px solid #CCCCCC;
	margin-right: auto;
	margin-left: auto;
	margin-top: 5px;
}

.mainStatus {
	width: 290px;
	height: 240px;
	margin: 0 auto;
}

.simpleStatus {
	background-color: #e2fee5;
	width: 80px;
	height: 220px;
	padding: 10px;
	border-radius: 10px;
	float: left;
	margin-right: 5px;
}
.simpleStatus-main {
	background-color: #b2fcc4;
}

.simpleStatus img{
	margin-bottom: 7px;
}

.centerArea {
	background-color: #e2fee5;
	border-radius: 10px;
	padding-top:5px;
	padding-bottom: 215px;
	float: left;
	width: 205px;
	height: 130px;
}

.mainUserCenterArea {
	background-color: #b2fcc4;
}

.userImageArea {
	float: left;
	width: 110px;
	height: 130px;
	text-align: center;
	word-wrap: break-word;
}

.userImageArea p {
	margin-bottom: 0px;
	line-height: 1em;
}

.userImageArea img {
	border-radius: 10px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.userImageArea img:hover {
	border: 2px solid #7ece15;
}

.userInfoArea {
	width: 90px;
	height: 130px;
	float: right;
	margin-left: 1.5%;
}

.userBalloon, #headerUserBalloon {
	float: left;
	height: auto;
	font-size: 2em;
	width: 80px;
	border-radius: 10px;
}

#headerUserBalloon {
	border: 2px solid #3668c4;
	background-color: #7096de;
}

.userBalloon {
	border: 2px solid #888;
	background-color: #fff;
}


.userBalloon p, #headerUserBalloon p {
	text-align: center;
	margin: 0px;
	padding: 0px;
}

#headerUserBalloon p {
	color: #fff;
}

.userInfoLeft {
	margin-top: 45px;
	line-height: 0.8em;
	font-weight: bold;
	font-size: 1.2em;
}

.userInfoLeft p {
	text-align: right;
	margin-right: 15px
}

.userInfoBottom {
	/*background-color: #eee;*/
	text-align: center;
	line-height: 1.2em;
	font-size: 1.4em;
	font-weight: bold;
}

.userInfoBottom p {
	margin-bottom: 0px;
	padding: 5px;
}

.userButtonArea {
	width: 290px;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	margin-right : auto;
	margin-left : auto;
}

.userButton {
	text-align: center;
	margin-right : auto;
	margin-left : auto;
}


button.css3button {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #ffffff;
	padding: 10px 20px;
	background: -moz-linear-gradient(
		top,
		#41d5fa 0%,
		#489bc2 25%,
		#2d8ba8);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#41d5fa),
		color-stop(0.25, #489bc2),
		to(#2d8ba8));
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	border: 1px solid #008db8;
	-moz-box-shadow:
		0px 1px 3px rgba(005,005,005,0.5),
		inset 0px -1px 0px rgba(255,255,255,0.7);
	-webkit-box-shadow:
		0px 1px 3px rgba(005,005,005,0.5),
		inset 0px -1px 0px rgba(255,255,255,0.7);
	box-shadow:
		0px 1px 3px rgba(005,005,005,0.5),
		inset 0px -1px 0px rgba(255,255,255,0.7);
	text-shadow:
		0px -1px 1px rgba(000,000,000,0.2),
		0px 1px 0px rgba(255,255,255,0.3);
}


/* Happy!ボタンの設定 */
.clickAction, .myClickAction {
	width: 290px;
	height: 150px;
	border-radius: 20px;
	line-height: 1em;
	color: #fff;
	font-size: 3em;
	text-shadow: 2px 2px 1px rgba(0,0,0,0.2);
	outline:none;
	padding: 10px;
	margin-bottom: 20px;
}

.clickAction {
	/*border: 2px solid #eb9b2a;*/
	/*border: 2px solid #e3b508;*/
	/*background-color: #f0ad4e;*/
	background-color: #f7cb24;
/*
	background: -moz-linear-gradient(
		top,
		#f4ce45 0%,
		#f9fe9b 20%,
		#e4ee1e);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#f4ce45),
		color-stop(0.25, #f9fe9b),
		to(#e4ee1e));
*/
	-moz-box-shadow:
		0px 1px 3px rgba(005,005,005,0.5),
		inset 0px -1px 0px rgba(255,255,255,0.7);
	-webkit-box-shadow:
		0px 1px 3px rgba(005,005,005,0.5),
		inset 0px -1px 0px rgba(255,255,255,0.7);
	box-shadow:
		0px 1px 3px rgba(005,005,005,0.5),
		inset 0px -1px 0px rgba(255,255,255,0.7);


}

.clickAction:hover {
	background-color: #f0d674;
}


.clickAction:active {
	/*border: 2px solid #e3b508;*/
	background-color: #fcffc6;
/*
	background: -moz-linear-gradient(
		top,
		#f4d97a 0%,
		#fcffc6 10%,
		#e7ee57);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#f4d97a),
		color-stop(0.10, #fcffc6),
		to(#e7ee57));
*/

}

.myClickAction {
	/*border: 2px solid #3668c4;*/
	/* 旧 */
	background-color: #7096de;
/*
	background: -moz-linear-gradient(
		top,
		#7096de 0%,
		#9eb5df 20%,
		#3b6bc6);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#7096de),
		color-stop(0.20, #9eb5df),
		to(#3b6bc6));
*/
	-moz-box-shadow:
		0px 1px 3px rgba(005,005,005,0.5),
		inset 0px -1px 0px rgba(255,255,255,0.7);
	-webkit-box-shadow:
		0px 1px 3px rgba(005,005,005,0.5),
		inset 0px -1px 0px rgba(255,255,255,0.7);
	box-shadow:
		0px 1px 3px rgba(005,005,005,0.5),
		inset 0px -1px 0px rgba(255,255,255,0.7);
}

.myClickAction:hover {
	background-color: #789ce0;
}

.myClickAction:active {
	/*border: 2px solid #3668c4;*/
	background-color: #89a8e7;
/*
	background: -moz-linear-gradient(
		top,
		#7096de 0%,
		#9eb5df 10%,
		#3b6bc6);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#7096de),
		color-stop(0.10, #9eb5df),
		to(#3b6bc6));
*/
}

.countNumber{
	color: #333;
	font-weight: bold;
}

.myCikCanvas {
	border-radius: 10px;
}

.otherCikCanvas {
	border-radius: 5px;
}

.clearBoth {
	clear: both;
	color: #fff;
	line-height: 2px;
}
.break-all {
	word-break: break-all;
	vertical-align:top;
}


.status_null {
	height: 10em;
	background-color: #fcc;
	padding: 10px;
	border-bottom: 2px solid #CCCCCC;
	margin-bottom: 10px;
}

/* orderArea  */

#orderInfoArea {
	width: 100%;
	height: 100px;
	background-color: #fff;
	padding: 10px 0px;
	border-radius: 10px;
	border-bottom: 2px solid #CCCCCC;
	margin: 5px 0px;
}

#orderInfoArea p {
	margin-top: 60px;
	margin-left: 2%;
}

.pagerArea, .orderChangerArea {
	text-align: center;
	display: block;
	border-radius: 5px;
	background-color: #e2fee5;
	font-size: 1em;
	padding: 10px 0px;
	height: 46px;
}

.footer_wrapper {
	width: 100%;
	margin-top: 10px;
	border-radius: 10px 10px 0 0;
	background-color: #fff;
}
.pagerArea_footer {
	text-align: center;
	display: block;
	border-radius: 5px;
	background-color: #e2fee5;
	font-size: 1em;
	padding: 10px 0px;
	margin: 15px 0;
	height: 46px;
}

.pagerArea form, .pagerArea_footer form, .orderChangerArea form {
	text-align: center;
	display: inline;
	font-size: 1em;
}

.pagerArea img, .pagerArea_footer img {
	width: 22px;
	height: 29px;
}

.orderChangerArea img {
	width: 29px;
	height: 22px;
}


/* サイス指定禁止 canvasID部分対応の為 */
.myCikCanvas {
	border-radius: 10px;
}

ul.info_list, ul.error_list {
	border-radius: 8px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-weight: bold;
}

ul.info_list {
	border: 3px solid #4f7adb;
	background-color: #8dd1ee;
}

ul.info_list li {
	color: #3e5bbf;
}

ul.error_list {
	border: 3px solid #FF0000;
	background-color: #FFCCCC;
}

ul.error_list li {
	color: #FF0000;
}

ul.warning_list {
	border: 3px solid #d8e06e;
	border-radius: 8px;
	background-color: #faffbd;
	padding-top: 10px;
	padding-bottom: 10px;
	margin: 20px 0px;
}

ul.warning_list li, ul.warning_list p {
	color: #4d4d4d;
}

ul.warning_list li {
	font-weight: bold;
}


#bar {
	width: 200px;
}

#footer {
	position: fixed;
	left: 30%;
	height: 50px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#bottom_menu_test {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 150px;
	z-index: 10;
	background-color: #888;
	height: 150px;
}

.form-horizontal{
	background-color: #e2fee5;
	padding: 16px;
	border-radius: 10px;
	margin-bottom: 20px;
}

.profile_img {
	border-radius: 10px;
}

.table_wrapper {
	background-color: #fff;
	padding: 15px;
	border-radius: 10px;
}

.history_table {
	text-align: center;
	width: 100%;
	margin-right : auto;
	margin-left : auto;
}

.history_table th{
	text-align: center;
	background-color: #b2fcc4;
}

.history_table table tr{
	border-radius: 5px;
}

.history_table td{
	text-align: left;
}

.history_table td .right {
	text-align: right;
}

.history_img {
	float: left;
	width: 50px;
	height: 50px;
	border-radius: 5px;
}

.break-all img:hover {
	border: 2px solid #7ece15;
}

.history_id {
	float: left;
	text-align: left;
	margin-left: 5px;
}

.table_myHappy {
	background-color: #d9edf7!important;
}

.table_date {
	/*white-space : pre-wrap;*/
}

/* editProfile */

#fbStatus {
	/*color: #f00;
	font-size: 14px;*/
}


/* signin signup */

.fbJoinButton {
	width: 285px;
	display: block;
	height: 50px;
	padding: 0 15px;
	background-color: #3b579d;
	border: 1px solid #5e7ac1;
	border-radius: 6px;
}

.fbJoinButton:hover {
	background-color: #5e7ac1;
	text-decoration: none;
}

.fbJoinIcon {
	display: block;
	background-image: url(../img/FB-f-Logo__white_29.png);
	background-repeat: no-repeat;
	background-position: 0px 10px;
	min-height: 30px;
	padding-left: 38px;
	padding-top: 13px;
	color: #fff;
	text-decoration: none;
	font-size: 18px;
}

.algin_right {
	text-align: right;
}

.marginTop40px{
	margin-top: 40px;
}

.marginTop70px{
	margin-top: 70px;
}

.margin_btn {
	margin-left: 50px;
}