@charset "utf-8";

/*
	1.Price Common Layout.
		1-1.TAB Layout.
		1-2.Common Style.
		1-3.Anchor Link Layout.
	2.Price - index Layout.
		2-1.Base Price.
		2-2.Option Price.
	3.Price - Rule Layout.
	4.Price - Simulator Layout.
*/

/*----------------------------------------------------------
	1.Price Common Layout.
-----------------------------------------------------------*/
/* 1-1.TAB Layout. */
div.main ul#tabNavigation{
	height:30px;
	margin:0px 0px 20px 0px;
	padding:0px 10px;
	list-style:none;
	overflow:hidden;
	background:url(/cloud/common/images/bg_tab.gif) repeat-x bottom left;
	}

div.main ul#tabNavigation li{
	height:30px;
	margin:0px;
	margin-right:5px;
	padding:0px;
	background:none;
	display:block;
	float:left;
	text-indent:-9999px;
	}

ul#tabNavigation li a{
	height:30px;
	display:block;
	}

ul#tabNavigation li.base a{
	width:75px;
	background:url(/cloud/common/images/price/tab_icon_base.jpg) no-repeat top left;
	}

ul#tabNavigation li.base a.selected,
ul#tabNavigation li.base a:hover{
	background:url(/cloud/common/images/price/tab_icon_base-on.jpg) no-repeat top left;	
	}

ul#tabNavigation li.option a{
	width:110px;
	background:url(/cloud/common/images/price/tab_icon_option.jpg) no-repeat top left;	
	}

ul#tabNavigation li.option a.selected,
ul#tabNavigation li.option a:hover{
	background:url(/cloud/common/images/price/tab_icon_option-on.jpg) no-repeat top left;	
	}

/* 1-2.Common Style. */
div.main p{
	padding:0 5px;
	}

.layout{
	margin-bottom:20px;
	}

span.link{
	padding-left:10px;
	display:block;
	background:url(/cloud/common/images/arrow_blue.gif) no-repeat center left;
	}

div#price table{
	width:100%;
	border:1px solid #e3e3e3;
	border-bottom:none;
	border-right:none;
	border-collapse:collapse;
	border-spacing:0;
	}

div#price table small{font-size:84%;}
div#price table span.half{color:#999}
div#price th.mini{color:#01B091;}
div#price th.small{color:#00A0B1;}
div#price th.medium{color:#0095CE;}
div#price th.large{color:#00478D;}
div#price th.xlarge{color:#5a0099;}

div#price th,
div#price td{
	padding:10px;
	border-right:1px solid #e3e3e3;
	word-break:normal;
	word-wrap::break-all;
	}

div#price th{
	background:url(/cloud/common/images/bg_table_th.gif) 0 100% repeat-x #f2f2f2;
	text-align:left;
	}

div#price td{
	background:url(/cloud/common/images/bg_table_td.gif) 0 100% repeat-x;
	text-align:right;
	}

div#price ul{
	margin:20px 5px;
	list-style:none;
	}
	
div#price ul#subList{
	margin:0px;
	}

div#price ul#subList li{
	background:none;
	padding-left:1em;
	text-indent:-1em;
	}

div#price li{
	padding-left:15px;
	background:url(/cloud/common/images/arrow_dot.gif) no-repeat top left;
	}

div#price .releaseAnnounce{
	border: 1px solid #f00;
	color: #f00;
	display: inline-block;
	*display: inline;
	*zoom: 1;
	margin-top: -16px;
	margin-bottom: 10px;
	margin-left: 5px;
	padding: 1px 4px;
	text-align: left;
	}
/* 	1-3.Anchor Link Layout. */

div#anchorLink{}

div#anchorLink ul{
	margin:20px 10px;
	}

div#anchorLink li{
	background: none;
	border: 1px solid #369;
	float: left;
	margin: 0px 10px 10px 0px;
	padding: 0px;
	white-space: nowrap;
	}

div#anchorLink li a{
	background: url(/cloud/common/images/arrow_blue.gif) no-repeat 5px center;
	display: inline-block;
	padding: 2px 5px 0px 12px;
	text-decoration: none;
	}

div#anchorLink li span.new{
	color: #f20067;
	display: inline-block;
	font-weight: bold;
	margin-right: 5px;
	}
	
div#anchorLink p{
	clear: both;
	color: #f00;
	}

/*----------------------------------------------------------
	2.Price index Layout.
-----------------------------------------------------------*/
/* 2-1.Base Price. */
div#basePrice{}

div#basePrice h2{
	background:url(/cloud/common/images/price/h2_price_baseprice.gif) no-repeat top left;
	}

div#server{}
div#disk{}
div#os{}
div#network{}

/* 2-2.Option Price. */
div#optionPrice{}

div#optionPrice h2{
	background:url(/cloud/common/images/price/h2_price_optionprice.gif) no-repeat top left;
	}

div#customize{}
div#serverCopy{}
div#sslCertificate{}
div#dns{}

/*----------------------------------------------------------
	3.Price - Rule Layout.
-----------------------------------------------------------*/
div#rule{}

div#rule h2{
	background:url(/cloud/common/images/price/h2_price_rule.gif) no-repeat top left;
	}

div#rule .illustL{
	margin-top:10px;
}
	
div#rule .illust{
	text-align:center;
	margin-top:10px;
}

div#rule strong{
	color:#F63;
	}

/*----------------------------------------------------------
	4.Price - Simulator Layout.
-----------------------------------------------------------*/
div#sim{}
div#sim h2{
	background:url(/cloud/common/images/price/h2_sim.gif) no-repeat top left;
	}

div#sim small{font-size:84%;}

label{}
select{}
input{
	width:30px;
	}

input.del{
	width:40px;
	}

input.add{
	width:153px;
	}

p.add{
	margin-top:10px;
	text-align:right;
	}

div#sim table{
	width:100%;
	border:1px solid #e3e3e3;
	border-bottom:none;
	border-right:none;
	border-collapse:collapse;
	border-spacing:0;
	}

div#sim th,
div#sim td{
	border-right:1px solid #e3e3e3;
	word-break:normal;
	word-wrap::break-all;
	text-align:left;
	}

div#sim th{
	padding:10px;
	background:url(/cloud/common/images/bg_table_th.gif) 0 100% repeat-x #f2f2f2;
	}

div#sim td{
	padding:5px;
	background:url(/cloud/common/images/bg_table_td.gif) 0 100% repeat-x;
	}

div#sim div#step1{}

div#sim div#step2,
div#sim div#step3{
/*	width:340px;*/
	display:block;
	}

div#sim div#step4{
	width:340px;
	display:block;
	}

div#sim div#step2 div#form,
div#sim div#step3 div#form{
	min-height:60px;
	padding:40px 0px;
	padding-left:230px;
	border:1px solid #666;
	}

*html div#sim div#step2 div#form,
*html div#sim div#step3 div#form{
	height:70px;
	}

div#sim div#step2{
/*	float:left;*/
	}

div#sim div#step2 p.annotation{
	margin-top:5px;
	padding:0px
	}

div#step2 div#form{
	background:url(/cloud/common/images/price/sim_img01.gif) no-repeat 130px center;
	}

div#sim div#step3{
/*	float:right;*/
	}

div#step3 div#form{
	background:url(/cloud/common/images/price/sim_img02.gif) no-repeat 40px center;
	}

div#step3 dl{}
div#step3 dt{}
div#step3 dd{}

div#step2 div#h3,
div#step3 div#h3{
/*	background:url(/cloud/common/images/bg_h3_head-mini.gif) no-repeat top left;*/
	}

div#step4 div#h3{
	background:url(/cloud/common/images/bg_h3_head-mini.gif) no-repeat top left;
	}

div#step2 div#h3 h3,
div#step3 div#h3 h3{
/*	background:url(/cloud/common/images/bg_h3_food-mini.gif) no-repeat bottom left;*/
	}

div#step4 div#h3 h3{
	background:url(/cloud/common/images/bg_h3_food-mini.gif) no-repeat bottom left;
	}

div#sim div#step4{
	margin:0px auto;
	margin-top:40px;
	padding-top:40px;
	background:url(/cloud/common/images/price/sim_img03.gif) no-repeat top center;
	}

*html div#sim div#step4{
	padding-top:70px;
	}

div#sim div#step4 td{
	text-align:right;
	}

div#sim div#step4 .sum{
	color:#f00;
	font-size:113%;
	font-weight:bold;
	text-align:right;
	}

div#sim .simTableSub{
	border:none;
	}

div#sim .simTableSub th,
div#sim .simTableSub td{
	border-right:none;
	text-align:left;
	}

div#sim .simTableSub th{
	background:none;
	font-weight:normal;
	padding:5px;
	white-space:nowrap;
	}

div#sim .simTableSub td{
	background:none;
	padding:5px;
	width:100%;
	}

div#sim .optionSubTotal{
	background-color: #fefefe;
	border: 1px solid #e3e3e3;
	border-top: 1px solid #ccc;
	padding: 5px 10px;
	text-align: right;
	}
	
div#sim .optionSubTotal span{
	font-weight: bold;
	}