@charset "utf-8";
/* CSS Document */
ul	{
	margin-left:-30px;
}

span.caution{
	color:#FF3300;
	font-weight:bold;
	font-size:90%;
}

#head_menu div.left{
	width:300px;
	text-align:left;
}

#head_menu div.right{
	width:240px;
	text-align:right;
}

/* title image */
#title{
	background-image:url(../images/generator/ad_ig_header.png);
	width:540px;
	height:65px;
}

#preview div.area{
}

#preview div{
	width:540px;
}

div.preview_img{
	margin:30px;
	width:480px;
	text-align:center;
}

#step div.area{
	width:540px;
	text-align:center;	
}

#loading	{
	width:300px;
	height:100px;
	position:absolute;
	left:100px;
	top:100px;
	background-color:#FFFFAA;
	text-align:center;
	border:2px solid;
}


/*========================*/
/* Base design of setting */
/*========================*/

#flow div.preview{
	background-image:url(../images/generator/member_v_m_bg.png);
	background-repeat:repeat-y;
	width:540px;
}

#flow div.control{
	background-image:url(../images/generator/member_ctrl_m_bg.png);
	background-repeat:repeat-y;
	width:540px;
}

#flow div.footer{
	background-image:url(../images/generator/member_ctrl_b_bg.png);
	width:540px;
	height:25px;
}


/*======================*/
/* Button Setting Panel */
/*======================*/

#button_setting{
	width:540px;
}

#button_setting div.header{
	background-image:url(../images/generator/ad_st_step01.png);
	width:540px;
	height:65px;
}

#button_setting #base_preview{
	text-align:center;
	width:540px;
	height:150px;
	line-height:150px;
}

#button_setting #base_preview img{
	vertical-align:middle;
}

#button_setting div.control{
	background-image:url(../images/generator/member_ctrl_m_bg.png);
	background-repeat:repeat-y;
	width:540px;
}

#button_setting div.control div.caption{
	width:160px;
}

#button_setting div.control div.body{
	width:160px;
	height:350px;
}

#button_setting div.control img{
}

#button_setting div.control div.shape{
	width:160px;
	border:solid #006666 1px;
	margin:5px;
	margin-left:17px;
}

#button_setting div.control div.shape div.body{
	overflow:auto;
}

#button_setting div.control div.shape div.cell{
	width:150px;
	text-align:center;
}

#button_setting div.control div.color{
	width:160px;
	border:solid #006666 1px;
	margin:5px;
}

#button_setting div.control div.color div.cell{
	width:160px;
	text-align:center;
}

#button_setting div.control div.effect{
	width:160px;
	border:solid #006666 1px;
	margin:5px;
}

#button_setting div.control div.effect div.cell{
	width:160px;
	text-align:center;
}


/*=====================*/
/* Frame Setting Panel */
/*=====================*/
#frame_setting{
	width:540px;
}

#frame_setting div.header{
	background-image:url(../images/generator/ad_st_step02.png);
	width:540px;
	height:65px;
}

#frame_setting #frame_preview{
	text-align:center;
	width:540px;
	height:65px;
	line-height:65px;
}

#frame_setting #frame_preview img{
	vertical-align:middle;
}

/* shape of frame */
#frame_setting div.control div.shape{
	width:248px;
	border:solid #006666 1px;
	margin:3px;
	margin-left:17px;
}

#frame_setting div.control div.shape div.caption{
	width:248px;
}

#frame_setting div.control div.shape div.body{
	width:248px;
	height:320px;
	overflow:auto;
	text-align:center;
}

#frame_setting div.control div.shape div.body .cell{
	width:247px;
}

/* color of frame */
#frame_setting div.control div.color{
	width:248px;
	border:solid #006666 1px;
	margin:3px;
}

#frame_setting div.control div.color div.caption{
	width:248px;
}

#frame_setting div.control div.color div.body{
	width:248px;
	height:320px;
	overflow:auto;
	text-align:center;
	overflow:hidden;
}

#frame_setting div.control div.color div.body .cell{
	width:248px;
}


/*====================*/
/* Icon setting panel */
/*====================*/
#icon_setting{
	width:540px;
}

#icon_setting div.header{
	background-image:url(../images/generator/ad_st_step03.png);

	width:540px;
	height:65px;
}

#icon_setting #list_preview{
	text-align:center;
	width:540px;
	height:80px;
	line-height:80px;
}

#icon_setting #list_preview img{
	vertical-align:middle;
}

/* shape of frame */
#icon_setting div.control div.shape{
	width:350px;
	border:solid #006666 1px;
	margin:3px;
	margin-left:17px;
}

#icon_setting div.control div.shape div.caption{
	width:350px;
}

#icon_setting div.control div.shape div.body{
	width:350px;
	height:320px;
	overflow:auto;
	text-align:center;
}

#icon_setting div.control div.shape div.body .cell{
	width:40px;
}

/* color of frame */
#icon_setting div.control div.color{
	width:70px;
	border:solid #006666 1px;
	margin:3px;
}

#icon_setting div.control div.color div.caption{
	width:70px;
}

#icon_setting div.control div.color div.body{
	width:70px;
	height:320px;
	overflow:auto;
	text-align:center;
	overflow:hidden;
}

#icon_setting div.control div.color div.body .cell{
	width:70px;
}


/* effect of frame */
#icon_setting div.control div.effect{
	width:70px;
	border:solid #006666 1px;
	margin:3px;
}

#icon_setting div.control div.effect div.caption{
	width:70px;
}

#icon_setting div.control div.effect div.body{
	width:70px;
	height:141px;
	overflow:auto;
	text-align:center;
	overflow:hidden;
}

#icon_setting div.control div.effect div.body .cell{
	width:70px;
}

/* size of frame */
#icon_setting div.control div.size{
	width:70px;
	border:solid #006666 1px;
	margin:3px;
}

#icon_setting div.control div.size div.caption{
	width:70px;
}

#icon_setting div.control div.size div.body{
	width:70px;
	height:141px;
	overflow:auto;
	text-align:center;
	overflow:hidden;
}

#icon_setting div.control div.size div.body .cell{
	width:70px;
}


/*========================*/
/* Img text setting panel */
/*========================*/
#img_txt_setting{
	width:540px;
}

#img_txt_setting div.header{
	background-image:url(../images/generator/ad_st_step04.png);
	width:540px;
	height:65px;
}

#img_txt_setting #text_ef_preview{
	text-align:center;
	width:540px;
	height:80px;
	line-height:80px;
}

#img_txt_setting #text_ef_preview img{
	vertical-align:middle;
}

/* shape of frame */
#img_txt_setting div.control div.shape{
	width:160px;
	border:solid #006666 1px;
	margin:3px;
	margin-left:17px;
}

#img_txt_setting div.control div.shape div.caption{
	width:160px;
}

#img_txt_setting div.control div.shape div.body{
	width:160px;
	height:320px;
	overflow:auto;
	text-align:center;
}

#img_txt_setting div.control div.shape div.body .cell{
	width:160px;
}

/* string of frame */
#img_txt_setting div.control div.string{
	width:160px;
	border:solid #006666 1px;
	margin:3px;
}

#img_txt_setting div.control div.string div.caption{
	width:160px;
}

#img_txt_setting div.control div.string div.body{
	width:160px;
	height:320px;
	overflow:auto;
	text-align:center;
	overflow:hidden;
}

#img_txt_setting div.control div.string div.body .cell{
	width:160px;
}


/* effect of frame */
#img_txt_setting div.control div.color{
	width:160px;
	border:solid #006666 1px;
	margin:3px;
}

#img_txt_setting div.control div.color div.caption{
	width:160px;
}

#img_txt_setting div.control div.color div.body{
	width:160px;
	height:320px;
	overflow:auto;
	text-align:center;
	overflow:hidden;
}

#img_txt_setting div.control div.color div.body .cell{
	width:160px;
}




/* preview area */
#img_txt_setting #body #list_preview div.area{
	width:538px;
	height:60px;
	text-align:center;
	border:none;
}

#img_txt_setting #body #list_preview img{
	margin:10px;
}

#img_txt_setting #content div.area{
	border:none;
}

#img_txt_setting #content #b_shape div.area{
	background-color:#8F8F8F;
	width:270px;
	height:290px;
}

#img_txt_setting #content #b_shape div.text{
	margin:10px;
	width:250px;
	height:230px;
	background-color:#005500;
	overflow:auto;
}

#img_txt_setting #content #b_shape input{
}

#img_txt_setting #content #b_color div.area{
	background-color:#B8B8B8;
	width:268px;
	height:290px;
}

#img_txt_setting #content #b_color div.text{
	width:250px;
}


/*========================*/
/* Text setting panel */
/*========================*/
#text_setting{
	width:540px;
}

#text_setting div.header{
	background-image:url(../images/generator/ad_st_step05.png);
	width:540px;
	height:65px;
}

#text_setting #text_preview{
	text-align:center;
	width:540px;
	height:80px;
	line-height:80px;
}

/* string */
#text_setting div.control div.string{
	width:340px;
	border:solid #006666 1px;
	margin:3px;
	margin-left:17px;
}

#text_setting div.control div.string div.caption{
	width:340px;
}

#text_setting div.control div.string div.body{
	width:340px;
	height:40px;
}

#text_setting div.control div.string input{
	margin-left:20px;
}

#text_setting div.control div.string div.body .cell{
	width:160px;
}

/* size */
#text_setting div.control div.size{
	width:156px;
	border:solid #006666 1px;
	margin:3px;
}

#text_setting div.control div.size div.caption{
	width:156px;
}

#text_setting div.control div.size div.body{
	width:156px;
	height:40px;
}

#text_setting div.control div.size input{
	margin-left:20px;
}

#text_setting div.control div.size div.body .cell{
	line-height:normal;
	width:160px;
}

/* shape of frame */
#text_setting div.control div.shape{
	width:160px;
	border:solid #006666 1px;
	margin:3px;
	margin-left:17px;
}

#text_setting div.control div.shape div.caption{
	width:160px;
}

#text_setting div.control div.shape div.body{
	width:160px;
	height:280px;
}

#text_setting div.control div.shape div.body .cell{
	width:160px;
}

#text_setting div.control div.shape div.body div.cell div.test{
	margin-left:10px;
}


/* effect of frame */
#text_setting div.control div.color{
	width:336px;
	border:solid #006666 1px;
	margin:3px;
}

#text_setting div.control div.color div.caption{
	width:336px;
}

#text_setting div.control div.color div.body{
	width:336px;
	height:280px;
	overflow:auto;
	text-align:center;
	overflow:hidden;
}

#text_setting div.control div.color div.body .cell{
	width:336px;
}




/* preview area */
#text_setting #body #list_preview div.area{
	width:538px;
	height:60px;
	text-align:center;
	border:none;
}

#text_setting #body #list_preview img{
	margin:10px;
}

#text_setting #content div.area{
	border:none;
}

#text_setting #content #b_shape div.area{
	background-color:#8F8F8F;
	width:270px;
	height:290px;
}

#text_setting #content #b_shape div.text{
	margin:10px;
	width:250px;
	height:230px;
	background-color:#005500;
	overflow:auto;
}

#text_setting #content #b_shape input{
}

#text_setting #content #b_color div.area{
	background-color:#B8B8B8;
	width:268px;
	height:290px;
}

#text_setting #content #b_color div.text{
	width:250px;
}


/*========================*/
/* Text setting panel */
/*========================*/
#layer{
	width:540px;
}

#layer div.header{
	background-image:url(../images/generator/ad_st_step06.png);
	width:540px;
	height:65px;
}

#layer #text_preview{
	text-align:center;
	width:540px;
	height:80px;
	line-height:80px;
}

/* control */
#layer div.control div.cell{
	width:100px;
	border:solid #006666 1px;
	margin:10px 1px 0px 0px;
	text-align:center;
}

#layer div.control div.left{
	margin-left:13px;
}

#layer div.control div.cell div.caption{
	width:100px;
}

#layer div.control div.cell div.body{
	width:80px;
	height:100px;
	margin:10px;
}

/* preview area */
#layer #synthesized_prev_area {
	position:relative;
	background-color:#EEEEEE;
	width:518px;
	height:250px;
	margin:0px 11px;
}

#layer #synthesized_prev {
	position:absolute;
	width:540px;
	left:0px;
	top:0px;
}


/*===============*/
/* Preview Panel */
/*===============*/
#last_preview{
	width:540px;
}

#last_preview div.header{
	background-image:url(../images/generator/ad_st_step08.png);
	width:540px;
	height:65px;
}

#last_preview #text_preview{
	text-align:center;
	width:540px;
	height:80px;
	line-height:80px;
}

/* control */
#last_preview div.control{
	width:540px;
}

#last_preview div.control .body{
	width:500px;
	margin-left:20px;
	text-align:right;
}

/* preview area */
#last_preview #synthesized_prev_area {
	position:relative;
	width:518px;
	height:250px;
	margin:0px 11px;
	line-height:250px;
	text-align:center;
}

#last_preview #php_preview {
	vertical-align:middle;
}

#last_preview #php_preview img{
	vertical-align:middle;
}


/*======================*/
/* Show created button  */
/*======================*/

#created{
	width:540px;
}

#created div.header{
	background-image:url(../images/generator/ad_st_step09.png);
	width:540px;
	height:65px;
}

#created div.preview{
	background-image:url(../images/generator/complete_v_m_bg.png);
	background-repeat:repeat-y;
	text-align:center;
	width:540px;
}

#created div.footer{
	background-image:url(../images/generator/complete_ctrl_b_bg.png);
	background-position:0px -65px;
	width:540px;
	height:25px;
}

a.download_file{
	display:block;
	width:60px;
	height:35px;
	background-image:url(../images/generator/dl_b.png);
	margin:10px auto;
}

#created div.control{
	background-image:url(../images/generator/complete_ctrl_b_bg.png);
	background-repeat:repeat-y;
	width:540px;
}

#created div.body{
	width:500px;
	margin:10px 20px;
}

a.download_file:hover{
	background-position:0px 35px;
}

/* explanation area */
#howto #explain div.area{
	width:500px;
}

#howto #explain div.contents{
	width:490px;
	margin-left:10px;
}

#howto #explain img{
	margin-left:30px;
}

/* caption label */
#howto #explain div.caption{
	width:500px;
}

#howto #explain #caption div.area{
	background-image:url(../images/base/sub_caption.png);
	width:190px;
	height:29px;
}

#howto #explain #caption div.text{
	width:465px;
	margin-left:35px;
	font-weight:bold;
}

#howto #explain div.explain{
	width:500px;
}

#howto #explain #explain div.area{
	width:480px;
	margin-left:20px;
}

#howto #explain #explain div.text{
	width:480px;
	margin:0px;
}

/* object can move in here */
#moving_area{
	position:relative;
	background-color:#FFFFFF;
	width:518px;
	height:250px;
	left:0px;
	top:0px;
}