/* ********************************************************
	
	全体
	
******************************************************** */	
html,body {
	
	background-color : #ffffff;

	background-image: url("../images/stars.png");
	background-repeat: repeat;
	background-attachment: fixed;
		
	margin:0;
	padding:0;
	height : 100%;
}

a:hover {background-color:#ccccff;}
a:hover.mouseover_move { position:relative; left:2px; top:2px; background-color:transparent;}


#container {
	min-height : 100%;
	position:relative;
}

#header{
	
	border-bottom : 1px solid #000000;
	margin-bottom : 10px;
}

#headerMenu{
	background-color : #88aa88;

	text-align:right;

	padding : 3px;
}

.headerMenuItem{
	font-size : 90%;
	margin-right : 10px;
}

#headerLogo {
	font-size : 200%;
	padding:5px;
}

#mainArea {
	
   padding:10px;
   padding-bottom:60px;   /* footerの高さ */
}

#footer {
	border-top : 2px dotted blue;
	margin-top : 15px;
	
	position:absolute;
	bottom:0;

	width : 100%;
	height : 50px;
	
	
	background-color : rgba(0,0,0,0);
	font-size : 80%;
	color : #333333;
	
	text-align:right;
}

#footerInner {
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
	padding-right:10px;
}


.outlined{
	text-shadow:
	-1px -1px 0 #000000,
	1px -1px 0 #000000,
	-1px 1px 0 #000000,
	1px 1px 0 #000000;  
	

}

.emphasis {
	
	background-color : #ffffcc;
	border-bottom : 1px dashed #ff2222;
	color : #ff2222;
	
}

.anchorlikeButton{
	cursor:pointer;
	text-decoration: underline;
	color:#3333aa;
	
}
.anchorlikeButton:hover{
	cursor:pointer;
	text-decoration: underline;
	color:#000000;
	background-color:#ffffff;
	
}


#waitguruguru {
	display : none;
	background-color:rgba(255,200,200,0.7);
	color : gray;

	position : fixed;
	right: auto;
	width: 150px;
	height: 100px;
	top: 50%;
	left: 50%;
	margin-top: -75px; /* 中央に表示するための位置調整 */
	margin-left: -50px; /* 中央に表示するための位置調整 */
	text-align : center;
	padding : 10px;
	border-radius : 5px;
}


.caption1 {
	
	background-color : rgba( 100,100,250,0.9 );
	border-radius : 100px;
	padding-left   : 20px;
	padding-top    : 10px;
	padding-bottom : 10px;
	margin-bottom : 1px;
	font-size : 120%;
	border : 1px solid black;
	
	color : white;

	text-shadow:
	-1px -1px 0 #000000,
	1px -1px 0 #000000,
	-1px 1px 0 #000000,
	1px 1px 0 #000000;  
}

.text {
	background-color : rgba( 250,250,100,0.8 );
	border-radius : 10px;
	padding : 20px;
	line-height : 1.5;
	
}
.back {
	margin : 10px;
	font-size : 120%;
}


/* ********************************************************

	一時通知欄（画面上部に「○○を更新しました」とか出るあれ）
	
******************************************************** */

/* 表示領域、つまり画面全体。デザインする余地はあんまりありません */
#temporaryMessageWindow {
	display : none;
	width : 100%;
	text-align : left;
	padding : 0px;
	position : fixed;
	left : 0px;
	top : 0px;
}

/* こちらが１つ１つのメッセージ欄 */
.temporaryMessage {
	width : 95%;
	text-align : left;
	padding : 7px;
	
	margin-left : auto;
	margin-right : auto;
	margin-bottom : 2px;
	border : 1px solid #ddddaa;
	border-radius : 5px;

	background-color : rgba(255,255,150,0.7);
}

/* マウスを乗せたとき */
.temporaryMessage:hover {
	background-color : rgba(150,255,255,0.7);
}


/* ********************************************************

	通知ウィンドウ
	
******************************************************** */

.noticeWindow {
	
	position:relative;
	
	width : 250px;
	border : 1px solid rgba(150,150,255, 0.4);
	border-radius : 5px;
	padding : 15px;
	font-size : 80%;
	line-height : 1.5;
	color : #444444;
	margin : 10px;
	cursor : pointer;
	text-align:left;

	background: linear-gradient(to right, rgba(150,150,255, 0.2),rgba(240,240,255, 0.8),rgba(150,150,255, 0.2));
	background-color : rgba(240,240,255, 0.2); /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(to right, rgba(150,150,255, 0.2),rgba(240,240,255, 0.8),rgba(150,150,255, 0.2)); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(to right, rgba(150,150,255, 0.2),rgba(240,240,255, 0.8),rgba(150,150,255, 0.2)); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(to right, rgba(150,150,255, 0.2),rgba(240,240,255, 0.8),rgba(150,150,255, 0.2)); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, rgba(150,150,255, 0.2),rgba(240,240,255, 0.8),rgba(150,150,255, 0.2)); /* Standard syntax */
}

.noticeWindow:hover {

	background: linear-gradient(to right, rgba(255,255,150, 0.2),rgba(255,255,240, 0.8),rgba(255,255,255, 0.2));
	background-color : rgba(255,255,240, 0.8); /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(to right, rgba(255,255,150, 0.2),rgba(255,255,240, 0.8),rgba(255,255,150, 0.2)); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(to right, rgba(255,255,150, 0.2),rgba(255,255,240, 0.8),rgba(255,255,150, 0.2)); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(to right, rgba(255,255,150, 0.2),rgba(255,255,240, 0.8),rgba(255,255,150, 0.2)); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, rgba(255,255,150, 0.2),rgba(255,255,240, 0.8),rgba(255,255,150, 0.2)); /* Standard syntax */

}

.noticeWindowCloseButtonContainer{
	width : 93%;
	text-align : right;
	position:absolute;
	top : 0px;	
}
.noticeWindowCloseButton{
	color : rgba(100,100,100,0.9);
	transition : background-color 0.3s;
}
.noticeWindowCloseButton:hover{
	color : rgba(240,100,100,0.9);
	background-color : rgba(200,200,100,0.9);
	transition : background-color 0.3s;
}


.noticeWindowsArea_topPage {

	margin-left : 20px;
	
}





/* ********************************************************
	
	モーダルメッセージウィンドウ
	
******************************************************** */	

#modalWindow {
	display:none;
	position : fixed;
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
	
	text-align : center;
	
	background-color : rgba(200,200,200, 0.5);
	
}
#modalInner {
	
	position : fixed;
	right: auto;
	width: 400px;
	height: 150px;
	top: 50%;
	left: 50%;
	margin-left: -200px; /* 中央に表示するため、自己widthの半分をマイナス */
	margin-top: -75px; /* 中央に表示するため、自己heightの半分をマイナス */
	text-align : center;
	background-color : rgba(200,200,255, 0.8);

	border-radius : 5px;
	border : 1px solid #000000;
	
}
#modalInner:hover {
	background-color : rgba(100,100,255, 0.8);
}


#modalMessage {
	_padding-top : 50px;
	margin-bottom : 20px;
	font-size : 120%;
	color : #222222;
	
	line-height : 1.5;
	
	
	/* Mozilla */
	white-space: -moz-pre-wrap;
	/* Opera 4-6 */
	white-space: -pre-wrap;
	/* Opera 7 */
	white-space: -o-pre-wrap;
	/* CSS3 */
	white-space: pre-wrap;
	/* IE 5.5+ */
	word-wrap: break-word;
}

/* ********************************************************
	
	モーダル確認メッセージウィンドウ
	
******************************************************** */	

#modalConfirmWindow {
	display:none;
	position : fixed;
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
	
	text-align : center;
	
	background-color : rgba(200,200,200, 0.5);
	
}
#modalConfirmInner {
	
	position : fixed;
	right: auto;
	width: 400px;
	height: 180px;
	top: 50%;
	left: 50%;
	margin-left: -200px; /* 中央に表示するための位置調整 */
	margin-top: -90px; /* 中央に表示するための位置調整 */
	text-align : center;
	background-color : rgba(200,200,255, 0.8);

	border-radius : 5px;
	border : 1px solid #000000;
	
}
#modalConfirmInner:hover {
	
}

#modalConfirmMessage {

	_padding-top : 50px;
	_margin-bottom : 30px;
	font-size : 120%;
	color : #222222;
	
	line-height : 1.5;
	
	
	/* Mozilla */
	white-space: -moz-pre-wrap;
	/* Opera 4-6 */
	white-space: -pre-wrap;
	/* Opera 7 */
	white-space: -o-pre-wrap;
	/* CSS3 */
	white-space: pre-wrap;
	/* IE 5.5+ */
	word-wrap: break-word;


}
#modalConfirmMessageArea {
	text-align:center;
}

#confirmButtonArea{
	margin-left:auto;
	margin-right:auto;
	margin-top:15px;
}

#confirmOk {
	border : 1px solid #000000;
	background-color : #eeeeff;
	padding : 20px;
	cursor : pointer;
	
	width : 100px;
	
}
#confirmCancel {
	border : 1px solid #000000;
	background-color : #ffeeee;
	padding : 20px;
	cursor : pointer;

	width : 100px;

}
#confirmOk:hover {
	border : 1px solid #000000;
	background-color : #aaaaff;
}
#confirmCancel:hover {
	border : 1px solid #000000;
	background-color : #ffaaaa;
}