@import url("style.css");

/* ---------------------------------------------------- Basic Tags Decoration */
div#main-areaTop2{
	clear:both;
	width:902px;
	margin:0 auto;
	background:url(../img/common/main-contents-top2.png) no-repeat;
	}


div#main-areaTop2 img{
	margin:10px auto 0px 10px;
	}

h2{
	clear:both;
	font-size:1.4em;
	margin:30px auto 5px auto;
	}

h2#imgTitle{
	margin:5px 1px;
}

h2#episodeTitle{
	margin:0px auto;
}

h3{
	clear:both;
	font-size:1em;
	margin:30px auto 10px auto;
	}

span{
	font-weight:bold;
}


div.content li{
	background:url(../img/common/list-bg.png) no-repeat;
	padding-left:12px;
	margin:4px auto;
	font-size:0.8em;
	*margin:0px auto;/* fo IE */
	*line-height:150%;/* fo IE */
	}

div.content li.bg-off{
	background:none;
	}

/* ------------------------------------------------------------------------- global-nav */
div#global-nav{
	background:url(../img/idstation/global-nav/global-nav_bg.png) no-repeat;
	}

div#global-menu {
	width:540px;
 	background: url(../img/idstation/global-nav/global-nav_menu.png);
	float:left;
}


div#global-menu a {
	outline-style: none;
}

div#global-menu ul{
	float:left;
	width:540px;
 	height: 50px;
 	background: url(../img/idstation/global-nav/global-nav_menu.png);
	margin: 0;
	padding: 0;
 	position: relative;
}

div#global-menu li{
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
	background: transparent url(../img/idstation/global-nav/transparent.gif); /* Need this for nav to work in Opera */
	height: 50px;
	display: block;
}

div#global-menu a, div#global-menu a.selected {
	float: left;
	padding: 50px 0 0 0;
	overflow: hidden;
	height: 0px !important;
	height /**/:50px; /* for IE5/Win only */
	width: 100%;
}


#menu-main-5 { left: 0; width: 147px;}
#menu-main-6 { left: 148px; width: 73px; }
#menu-main-7 { left: 221px; width: 119px; }
#menu-main-8 { left: 340px; width: 87px; }
#menu-main-9 { left: 427px; width: 113px; }

#menu-main-5 a:hover, #menu-main-5 a.selected { background: url(../img/idstation/global-nav/global-nav_menu.png) 0 -50px no-repeat;}
#menu-main-6 a:hover, #menu-main-6 a.selected { background: url(../img/idstation/global-nav/global-nav_menu.png) -148px -50px no-repeat;}
#menu-main-7 a:hover, #menu-main-7 a.selected { background: url(../img/idstation/global-nav/global-nav_menu.png) -221px -50px no-repeat;}
#menu-main-8 a:hover, #menu-main-8 a.selected { background: url(../img/idstation/global-nav/global-nav_menu.png) -340px -50px no-repeat;}
#menu-main-9 a:hover, #menu-main-9 a.selected { background: url(../img/idstation/global-nav/global-nav_menu.png) -427px -50px no-repeat;}

/* global-nav active */

#menu-main-5.active { background: url(../img/idstation/global-nav/global-nav_menu.png) 0 -50px no-repeat;}
#menu-main-6.active { background: url(../img/idstation/global-nav/global-nav_menu.png) -148px -50px no-repeat;}
#menu-main-7.active { background: url(../img/idstation/global-nav/global-nav_menu.png) -221px -50px no-repeat;}
#menu-main-8.active { background: url(../img/idstation/global-nav/global-nav_menu.png) -340px -50px no-repeat;}
#menu-main-9.active { background: url(../img/idstation/global-nav/global-nav_menu.png) -427px -50px no-repeat;}


/* ----------------------------------------------------------------------- global-nav */

ul.language{
	margin:0 auto;
	font-size:0.8em;
	height:20px;
}

ul.language li{
	float:left;
	border-right:1px solid #ccc;
}

ul.language li.last{
	border-right:none;
}

ul.language a{
	margin:5px;
}



/* --------------------------------------------------------------------------- index */
div#ids-index{
	width:902px;
	height:400px;
	margin:0px auto;
	background: url(../img/idstation/index/banner.jpg) no-repeat;
	overflow:hidden;
}

div#into-text{
	width:370px;
	padding:95px 0px 0px 54px;
	color:#000;
	position:relative;
	margin-bottom:40px;
}

div#into-text p{
	line-height:150%;
	font-size:12px;
}

div#into-text h2{
	margin-bottom:10px;
}

div.ids-series{
	float:left;
	width:210px;
	height:170px;
	margin:0;
	overflow:hidden;
}

div.ids-series ul{
	margin:15px 15px auto 10px;
}

div.ids-series#idsl{
	background: url(../img/idstation/index/index-01.png) no-repeat;
}
div.ids-series#standalone{
	background: url(../img/idstation/index/index-02.png) no-repeat;
}
div.ids-series#network{
	background: url(../img/idstation/index/index-03.png) no-repeat;
}


div.content#ids01{
	background:url(../img/idstation/index/index-05.png) no-repeat left top;
	height:300px;
	margin-top:40px;
	padding-left:340px;
}


div.content#ids02{
	background:url(../img/idstation/index/index-06.jpg) no-repeat right bottom;
	height:280px;
	margin-top:50px;
	padding-right:250px;
}

div.content#ids01 p,
div.content#ids02 p{
	line-height:150%;
}
div.content#ids01 h3,
div.content#ids02 h3{
	margin:10px auto 5px auto;}


/* ------------------------------------------------------------ What is ID Station? */

div#whatIsIDStation {
	margin-top:10px;
}

div#whatIsIDStation span{
	margin-right:5px;
}

div#whatIsIDStation p{
	margin-bottom:5px;
}

/* ---------------------------------------------------------------- Why ID Station? */

div#whyFlow{
	width:630px;
	height:400px;
	margin:10px auto;
	background:url(../img/idstation/why_flowR.png) no-repeat;
	}

div#whyFlowLeft{
	color:#fff;
	width:170px;
	float:left;
	margin:10px 0 0 40px;
	/*\*/
	_margin:10px 0 0 20px;
	/**/
 }

div#whyFlowRight{
	width:320px;
	float:right;
	margin:10px 15px 0 0;
	*margin-right:5px;
}

div#whyFlowLeft h4,
div#whyFlowRight h4{
	height:40px;
	margin-top:10px;
}
	
div#whyFlowLeft .blocks{
	height:50px;
	margin-bottom:15px;
	font-size:9pt;
	line-height:140%;
}

div#whyFlowRight .blocks{
	margin-bottom:15px;
}

div#whyFlow p{
	font-size:9pt;
	line-height:140%;
}
/* --------------------------------------------------------------------- Merits */
div#merit-touchPannel{
	margin-top:30px;
	min-height:490px;
	background: url(../img/idstation/merit/merit_01.jpg) no-repeat right top;
	border-bottom:1px solid #ccc;
}


div#merit-touchPannel h3{
	margin:20px auto 4px auto;
}

div#merit-touchPannel p,
div#merit-Admin p,
div#merit-Admin2 p{
	*font-size:0.8em;/* for IE */
	*line-height:140%;/* for IE */
}

div#merit-touchPannel .mbody{
	width:320px;
	height:180px;
}

div#merit-touchPannel .mbody2{
	width:400px;
	height:100px;
}
div#merit-touchPannel .mbody3{
	width:310px;
	height:200px;
	margin-left:320px;
}

div#merit-Admin{
	margin-top:30px;
	min-height:280px;
	background: url(../img/idstation/merit/merit_05.png) no-repeat right top;
}

div#merit-Admin2{
	clear:both;
	margin-top:30px;
	min-height:280px;
	background: url(../img/idstation/merit/merit_06.png) no-repeat right top;
}

div#merit-Admin h3,
div#merit-Admin2 h3 {
	margin:30px auto 4px auto;
}

div#merit-Admin .mbody,
div#merit-Admin2 .mbody{
	clear:both;
	width:360px;
}

div#merit-Admin .mbody2,
div#merit-Admin2 .mbody2 {
	margin-left:240px;
}

/* ---------------------------------------------------------------- Localizarion */

div.step {
	width:630px;
	height:400px;
	margin:10px auto 10px 0;
}

div.steps {
	float:left;
	width:210px;
	height:400px;
}

div#step1{
	background: url(../img/idstation/localization/step1.png) no-repeat;
}

div#step2{
	background: url(../img/idstation/localization/step2.png) no-repeat;
}

div#step3{
	background: url(../img/idstation/localization/step3.png) no-repeat;
}

div.stepsBody {
	width:170px;
	margin:10px auto;
}

div.stepsBody p{
	margin-top:10px;
}

div.stepsBody img, .stepsBody a{
	margin:0 0 0 0;
	line-height:normal;
}

/* ------------------------------------------------------------------------- FAQ */

p.question{
	font-weight:bold;
	color:#506f7d;
	margin-top:30px;
	border-bottom:1px solid #506f7d;
}

/* ---------------------------------------------------------------- About Jomyaku */

h2.jomaku{
	margin-top:0px;
}

img.jomyakuRight {
	float:right;
	margin-top:20px;
	margin-left:20px;
}

/* -------------------------------------------------------------------- Functions */

table.functions{
	border-collapse:collapse;
	font-size:0.85em;
	width:100%;
}

table.functions td{
	padding:6px;
	border:1px solid #ccc;
}

table.functions td.header{
	background-color:#999;
	color:#fff;
	font-weight:bold;
}

table.functions td.func01{
	background-color:#f8f8f8;
}


/* ------------------------------------------------------------- ID Station Series */

table#comparison{
	margin-bottom:10px;
	margin-top:10px;
	font-size:0.85em;
	border-collapse:collapse;
}

table#comparison td{
	padding:5px;
	border:1px solid #ccc;
}

table#comparison td.left{
	background-color: #e6e6e6;
	width:180px;
}

table#comparison td.top{
	background-color: #f3f3f3;
}

/* -------------------------------------------------------------------- Customize */
div.custom{
	clear:both;
	width:630px;
	margin-top:10px;
	margin-bottom:20px;
	background: url(../img/idstation/customize/custom-h4-bg.png) repeat-x;
}

div.custom h4{
	margin-left:10px;
	padding-top:10px;
	margin-bottom:5px;
	color:#477f9f;
}
div.custom p{
	margin-left:10px;
}

h4#custom-example{
	padding:40px 0px 5px 0px;
}


/* ----------------------------------------------------------------------- Admin */
div.content#top {
	background:url(../img/idstation/admin/admin00.png) no-repeat right top;
	height:271px;
	margin-bottom:0px;
}

div#main-contents.admin span{
	font-size:1.2em;
}

div#main-contents.admin h3{
	clear:both;
	width:630px;
	margin:10px auto 30px auto;
	padding-top:10px;
	padding-left:10px;
	color:#477f9f;
	background: url(../img/idstation/customize/custom-h4-bg.png) repeat-x;
}

div#main-contents .left img
{
	float:left;
}

div#main-contents .right img
{
	float:right;
}


div#main-contents .left img,
div#main-contents .right img
{ margin-bottom:60px; }

/* ----------------------------------------------------------------------- Touch */
div.content#topTouch {
	background:url(../img/idstation/touch/touch00.jpg) no-repeat right top;
	min-height:260px;
	margin-bottom:0px;
}

div.content#topTouch p{
	width:360px;
}

/* --------------------------------------------------------------------- Network */

div.content#ntwkIndex{
	width:630px;
	background:url(../img/idstation/network/bg_01.png) bottom no-repeat;
	*font-size:12px;
	padding-bottom:10px;
}

div#ntwkIndexTop{
	width:630px;
	height:10px;
	background:url(../img/idstation/network/bg_02.png) top no-repeat;
}
div.ntwkBoxL {
	width:300px;
	float:left;
	margin-left:5px;
}

div.ntwkBoxR {
	width:310px;
	*width:300px;
	float:left;
	border-left: 1px solid #ccc;
	margin-right:10px;
}

div.ntwkBox {
	border-top: 1px solid #ccc;
	}

div.ntwkBox#first {
	border-top:none;
	}

div.ntwkBox p{
	margin:10px;
	padding-bottom:15px;
	}

div.ntwkBox img{
	margin:0 15px 10px 0;
	}

div.ntwkBox h4 {
	margin:0px 15px;
	color:#477f9f;
	font-weight:bold;
	padding-top:20px;
	}

div.ntwkServer{
	clear:both;
	width:630px;
	margin-top:10px;
	margin-bottom:20px;
	background: url(../img/idstation/customize/custom-h4-bg.png) repeat-x;
}

div.ntwkServer h4{
	margin-left:10px;
	padding-top:30px;
	margin-bottom:5px;
	color:#477f9f;
}
div.ntwkServer p{
	margin-left:10px;
}

/* --------------------------------------------------------------- Network System */

table.ntwkSystem{
	border-collapse:collapse;
	font-size:0.85em;
	width:100%;
}

table.ntwkSystem td{
	padding:5px;
	border:1px solid #666;
}

table.ntwkSystem td.header{
	background-color:#444;
	color:#fff;
	font-weight:bold;
}

table.ntwkSystem td.subheader{
	background-color:#999;
	color:#fff;
	font-weight:bold;
}

table.ntwkSystem td.func01{
	background-color:#f8f8f8;
}

table.ntwkSystem img{
	float:left;
}

/* ------------------------------------------------------------------- How It Works */
table.howitworks{
	margin:10px 15px;
}
table.howitworks td{
	padding:15px 15px 15px 0px;
	vertical-align:top;
}

table.howitworks span{
	color:#3366cc;
	margin:0px auto 5px auto;
}

/* --------------------------------------------------------------- About Kyuyo Software */

table.kyuyoList{
	border:1px solid #ccc;
	border-collapse:collapse;
	font-size:0.85em;
	width:60%;
	}
	
table.kyuyoList td,
table.kyuyoList th{
	padding:4px;
	border:1px solid #ccc;
}

table.kyuyoList th{
	background-color: #666;
	color:#fff;
}

table.kyuyoList td.item{
	background-color: #f5f5f5;
	width:80px;
}

/* ------------------------------------------------------------------------ Episode */

div#main-areaTop3{
	clear:both;
	width:902px;
	margin:0 auto;
	background:url(../img/common/main-contents-top2.png) no-repeat;
	}

div#main-areaTop3 img{
	margin:0px 0px 10px 0px;
	}

div#main-areaTop3 img#logo{
	margin:10px 0px 5px 10px;
	}