@charset "UTF-8";

#tabs
{
	height: 2em;
	padding: 0px;
	list-style-type: none;
}

#tabs li
{
	float: left;
	line-height: 2em;
	padding: 0 0.5em;
	cursor: pointer;
}

#tabs #tabFreeMessage		{ background-color: #E8F6FD; }
#tabs #tabDocomoBookmark	{ background-color: #FFD65E; }
#tabs #tabAddress			{ background-color: #B5DF5B; }
#tabs #tabMail				{ background-color: #FDB1FC; }

#tabSheets
{
	height: 124px;
	position: relative;
}

#tabSheets .sheet
{
	width: 480px;
	height: 108px;
	position: absolute;
}

#tabSheets .sheet .inner
{
	padding: 8px;
	font-size: 12px;
}

#tabSheets #applyButton
{
	width: 70px;
	padding-top: 0.0em;
	padding-bottom: 0.0em;
}

#tabSheets .sheet .inner table
{
	border: 0px;
	border-collapse: collapse;
}

#tabSheets .sheet .inner table td
{
	margin: 0px;
	padding: 0px;
}

#tabSheets .sheet .inner th
{
	text-align: right;
	padding-right: 0.5em;
}

#tabSheets .sheet .inner .field
{
	font-size: 12px;
	padding: 2px;
	padding-bottom: 1px;
	margin-bottom: 2px;
	margin-right: 1em;
}

#tabSheets .sheet .inner .field:focus { background-color: #FFFEE0 }

#tabSheets .sheet .inner .info
{
	font-size: 10px;
	margin-top: 4px;
}

#tabSheets #sheetFreeMessage	{ background-image: url(images/grad1.png); }
#tabSheets #sheetDocomoBookmark	{ background-image: url(images/grad2.png); }
#tabSheets #sheetAddress		{ background-image: url(images/grad3.png); }
#tabSheets #sheetMail			{ background-image: url(images/grad4.png); }

#tabSheets #sheetFreeMessage #freeMessage
{
	width: 380px;
	padding: 2px;
	font-size: 12px;
	height: 3.5em;
	margin-right: 4px;
	margin-bottom: 4px;
}

#tabSheets #sheetDocomoBookmark #bookmarkTitle	{ width: 180px; }
#tabSheets #sheetDocomoBookmark #bookmarkURL	{ width: 320px; }

#tabSheets #sheetAddress #addrName	{ width: 110px }
#tabSheets #sheetAddress #addrRuby	{ width: 110px }
#tabSheets #sheetAddress #addrTel	{ width: 100px }
#tabSheets #sheetAddress #addrMail	{ width: 160px }

#tabSheets #sheetMail #mailTo		{ width: 160px }
#tabSheets #sheetMail #mailSubject	{ width: 120px }
#tabSheets #sheetMail #mailBody		{ width: 300px }

#mainPanel
{
/*	height: 500px;*/
	border-collapse: collapse;
}

#mainPanel #codeCell
{
	width: 250px;
/*	height: 500px;*/
/*	float: left;*/
	text-align: center;
	padding: 0px;

	font-size: 10px;
	background-color: #F0F8FF;
}

#mainPanel #codeCell #codeSpan span
{
	display: none;
	padding: 6px;
	margin-left: 8px;
}

#mainPanel #codeCell #codeSpan:hover span
{
	display: inline;
	position: absolute;

	background: #FFE0FE;
	border: 1px solid red;
	color: red;

	font-size: 13px;
	line-height: 100%;
}

/*埋め込みデータの表示。*/
#mainPanel #codeInfo
{
	font-size: 10px;
	position: absolute;
	float:left;
	margin:4px;
	width: 250px;
}

#mainPanel #setting
{
	margin-left: 8px;
/*	width: 220px;*/
/*	float: right;*/
}

#setting .group
{
	margin-bottom: 1em;
}

#setting .group .title
{
	background-color: #F0F8FF;
	font-weight: bold;
	padding-left: 2px;
	margin-bottom: 4px;
}

#setting .group .inner
{
	padding-left: 0.5em;
}

/*名入れの入力欄。*/
#setting .group .text		{ width: 140px; margin-left: 0.5em }
#setting .group .text:focus	{ background-color: #FFFEE0 }

#setting .group .inner #rotate { text-align: right; padding-left: 2px; padding-right: 2px }
#setting .group .inner #rotate:focus { background-color: #FFFEE0 }

.radioLabel { margin-right: 1em; }
.radioLabel .radioButton { margin-right: 0.3em; vertical-align:middle; }

/*カラーコードの入力欄。*/
.colorInputBox
{
	width: 60px;
	font-family: monospace;
}
.colorInputBox:focus { background-color: #FFFEE0 }

.colorPickupButton
{
	width: 20px;
	height: 20px;
	border: 1px solid black;
	cursor: pointer;
}

.colorPickupButton2
{
	width: 25px;
	height: 25px;
	border: 1px solid black;
}

.colorPickupButton2 #colorPalette2
{
	display: none;

	background-color: white;
}
.colorPickupButton2:hover #colorPalette2
{
	display: inline;
	position: absolute;
	margin-left: 20px;
	margin-top: 4px;
	border: 1px solid black;
}

.colorPickupButton2 #colorPalette2 .colorGroup
{
	font-size: 8px;
	padding-left: 2px;
}

.colorPickupButton2 #colorPalette2 .colorButton
{
	width: 25px;
	height: 25px;
	border: 1px solid white;
	cursor: pointer;
}

.colorPickupButton2 #colorPalette2 .colorButton span
{
	display: none;
	padding: 0px 4px;
	margin-left: 30px;
	white-space: nowrap;
}

.colorPickupButton2 #colorPalette2 .colorButton:hover span
{
	display: inline;
	position: absolute;
	background: #FFFEE0;
	border: 1px solid #cccccc;
	color: black;
	font-size: 11px;
	font-weight: normal;
}


#colorPalette
{
	background-color: white;
	position: absolute;
	border: 1px solid black;
	width: 200px;	/* 25 * 8 */
	height: 125px;	/* 25 * 5 */
	visibility: hidden;
}

#colorPalette tr
{
	height: 25px;
}

#colorPalette .colorButton
{
	width: 20px;
	height: 20px;
	line-height: 20px;
	border: 1px solid white;
}

#colorPalette .colorButton span
{
	display: none;
	padding: 1px 3px;
	margin-left: 30px;
	white-space: nowrap;
}

#colorPalette .colorButton:hover span
{
	display: inline;
	position: absolute;
	background: #FFFEE0;
	border: 1px solid #cccccc;
	color: black;
	font-size: 11px;
	font-weight: normal;
}

.colorTable td
{
	white-space: nowrap;
}

/* 名入れの位置を指定するテーブル。*/
#positionTable
{
	border: 1px solid black;
	border-collapse: collapse;
	margin-right: 8px;
}

#positionTable td { border: 1px solid black; height: 0px; padding: 0px }
#positionTable td div { width: 12px; height: 12px; }
#positionTable td div.selected { width: 10px; height: 10px; background-color: black; margin: 1px}
#positionTable td div.normal { background-color: white }
#positionTable td div.disable { background-image: url(images/batsu.gif) }

#positionTable td div span
{
	display: none;
	padding: 1px 4px;
	margin-left: 20px;
}

#positionTable td div:hover span
{
	display: inline;
	position: absolute;
	background: #FFFEE0;
	border: 1px solid #cccccc;
	color: black;
	font-size: 11px;
	font-weight: normal;
}

#positionTable td div.disable:hover span
{
	background: #FFE0FE;
	border: 1px solid red;
	color: red;
}


div.tooltip
{
	display: inline;
	cursor: pointer;

	float: right;

	width: 20px;
	text-align: center;
	color: white;
	font-weight: bolder;
	background-color: #7ebeab;
}

div.tooltip span.tip
{
	text-align: left;
	display: none;
	padding: 4px;
	margin-left: 4px;
	width: 180px;
}

div.tooltip:hover span.tip
{
	display: inline;
	position: absolute;
	background: #FFFEE0;
	border: 1px solid #7ebeab;
	color: black;
	font-size: 11px;
	font-weight: normal;
	line-height: 140%;
}