@charset "utf-8";

* {
	margin:0;
	padding:0;
}

body {
	color:#505050;
	font-size:0.8em;
	font-family:
		Verdana,
		Arial,
		Meiryo,
		"メイリオ",
		"Hiragino Kaku Gothic Pro",
		"ヒラギノ角ゴ Pro W3",
		Osaka,
		"MS P Gothic",
		"ＭＳ Ｐゴシック",
		sans-serif;
	line-height:1.7;
	background:url(../../images/common/header.png) repeat-x top;
}

*:first-child+html body {
	font-family:
		Meiryo,
		"メイリオ",
		Verdana,
		Arial,
		"Hiragino Kaku Gothic Pro",
		"ヒラギノ角ゴ Pro W3",
		Osaka,
		"MS P Gothic",
		"ＭＳ Ｐゴシック",
		sans-serif;
}

* html body {
	font-family:
		Meiryo,
		"メイリオ",
		Verdana,
		Arial,
		"Hiragino Kaku Gothic Pro",
		"ヒラギノ角ゴ Pro W3",
		Osaka,
		"MS P Gothic",
		"ＭＳ Ｐゴシック",
		sans-serif;
}

.wrapper {
	width:780px;
	margin:0 auto;
	padding:0 0 40px 0;
}

a {
	color:#1A9B60;
	text-decoration:none;
}

a:hover {
	color:#46A000;
	text-decoration:underline;
}

.contents {
	width:570px;
	padding:0 20px 0 190px;
	position:relative;
}

	.contents p {
		margin:0 0 20px 0;
	}

	.contents .indent {
		margin:0 0 0 20px;
	}

h1 {
	margin:0 0 25px 0;
	padding:0 0 15px 10px;
	font-size:1.8em;
	font-weight:normal;
	line-height:1.8em;
	color:#323232;
	border-bottom:5px solid #E6E6E6;
}

h2 {
	margin:0 0 15px 0;
	padding:10px 0 8px 10px;
	font-size:1.1em;
	font-weight:normal;
	color:#000000;
	border-bottom:1px solid #C8C8C8;
}

h3 {
	margin:0;
	padding:5px 0 10px 5px;
	font-size:1.1em;
	color:#000000;
}

h4 {
	margin:0;
	padding:5px 0 5px 0;
	font-size:0.9em;
	color:#000000;
}

.small {
	font-size:0.8em;
	letter-spacing:0.1em;
	line-height:1.5;
}

.fred {
	font-size:0.8em;
	letter-spacing:0.1em;
	color:#FF0000;
	line-height:1.5;
}

.clear {
	clear:both;
}

a img {
	border:0 solid;
}


/* thumbnail */
#thumbnail1 a img {
	border:0 solid;
	margin:10px 0 10px 0;
}

#thumbnail2 {
	height:279px;
}

#thumbnail2 img {
	border:0 solid;
	margin:10px 0 10px 0;
}

#thumbnail2 #left {
	font-size:0.8em;
	letter-spacing:0.1em;
	text-align:center;
	border:0 solid;
	margin:10px 20px 0 0;
	float:left;
}

#thumbnail2 #left img {
	margin:0 0 5px 0;
}

#thumbnail2 #right {
	font-size:0.8em;
	letter-spacing:0.1em;
	text-align:center;
	border:0 solid;
	margin:10px 0 0 0;
	float:left;
}

#thumbnail2 #right img {
	margin:0 0 5px 0;
}


/* header */
.header {
	width:760px;
	height:45px;
	background:url(../../images/common/logo.png) no-repeat top left;
	margin:26px 0 0 20px;
}


/* navigation */
.nav {
	width:770px;
	height:23px;
	margin:0 0 30px 0;
	padding:6px 10px 0 0;
	font-size:0.8em;
	letter-spacing:0.1em;
	color:#FFFFFF;
	text-align:right;
}

.nav a {
	color:#FFFFFF;
	text-decoration:underline;
}

.nav a:hover {
	text-decoration:none;
}


/* skip top */
.top {
	font-size:0.8em;
	letter-spacing:0.1em;
	text-align:right;
	border-bottom:1px solid #E6E6E6;
	margin:0 0 25px 0;
	padding:25px 0 8px 0;
	clear:both;
}

.top a:hover {
	text-decoration:underline;
}
/* end */


/* footer */
.footer {
	height:50px;
	padding:10px 0 0 0;
	text-align:right;
	color:#646464;
	border-top:1px solid #C8C8C8;
	clear:both;
}

.copy {
	width:770px;
	font-size:0.7em;
	font-family:
		Verdana,
		Arial,
		sans-serif;
	margin:0 auto;
	padding:0 10px 0 0;
}

.copy a {
	color:#1A9B60;
	text-decoration:none;
}

.copy a:hover {
	color:#46A000;
	text-decoration:underline;
}
/* end */


/* sample gallery */
.samplelist {
	width:570px;
	font-size:0.8em;
	letter-spacing:0.1em;
	line-height:1.5;
	text-align:center;
}

.thumbnail {
	margin:0 20px 0 0;
	float:left;
}

.thumbnail a img {
	border:1px solid #B4B4B4;
	padding:10px 10px 10px 10px;
	margin:0 0 3px 0;
}

.thumbnail a:hover img {
	border:1px solid #1A9B60;
	background:#E8F5EF;
}

.space {
	width:570px;
	height:20px;
	clear:both;
}

.thumbnailend {
	float:left;
}

.thumbnailend a img {
	border:1px solid #B4B4B4;
	padding:10px 10px 10px 10px;
	margin:0 0 3px 0;
}

.thumbnailend a:hover img {
	border:1px solid #1A9B60;
	background:#E8F5EF;
}


/* question & answer */
.q {
	background:url(../../images/faq/question.png) no-repeat left top;
	margin:0 0 10px 0;
	padding:0 0 0 22px;
}

.q span {
	position:relative;
	top:-4px;
}

.a {
	background:url(../../images/faq/answer.png) no-repeat left top;
	margin:0 0 25px 0;
	padding:0 0 0 22px;
}

.a span {
	position:relative;
	top:-4px;
}


/* list */
table.list {
	font-size:small;
	vertical-align:top;
	width:100%;
	border-collapse:collapse;
	border-spacing:0;
	border:#C8C8C8 1px solid;
	margin:0;
	padding:0;
}

table.list th {
	font-size:1em;
	font-weight:normal;
	text-align:left;
	white-space:nowrap;
	line-height:1.5;
	border:#C8C8C8 1px solid;
	margin:0;
	padding:4px;
}

table.list #h1 {
	color:#FFFFFF;
	text-align:center;
	background:#000000;
}

table.list #h2 {
	background:#C8C8C8;
}

table.list #h3 {
	background:#F0F0F0;
}

table.list tr td {
	margin:0;
	padding:4px;
	line-height:1.5;
	border:#C8C8C8 1px solid;
}

table.list .mark {
	font-family:Meiryo,
		"メイリオ",
		"MS PGothic",
		"ＭＳ Ｐゴシック",
		sans-serif;
	text-align:center;
}


/* source code */
pre {
	background-color:#F6F6F6;
	display:block;
	overflow:auto;
	overflow-x:auto;
	overflow-y:hidden;
	width:535px;
	white-space:pre;
	padding:5px;
	font-family:monospace;
	font-size:11px;
}

pre br {
	display:none;
}


/* paragraph alphabet */
#aparagraph dt {
	clear:both;
	float:left;
}

#aparagraph dd {
	margin:0 0 0 25px;
}


/* shift */
.tabbedpanelscontent ul {
	margin:0 0 0 30px;
	list-style:disc;
}

.tabbedpanelscontent dl {
	clear:both;
}

.tabbedpanelscontent dt {
	float:left;
}

.tabbedpanelscontent dd {
	float:left;
	width:500px;
}

.tabbedpanelscontent dd ul {
	margin:0 0 0 20px;
}

.tabbedpanelscontent p.caption {
	font-size:x-small;
	letter-spacing:1px;
	line-height:120%;
	margin:3px 0 0 0;
}

.tabbedpanelscontent .imgl {
	float:left;
	width:200px;
	margin:0 40px 0 0;
}

.tabbedpanelscontent .imgr {
	float:left;
}

.tabbedpanelscontent .imgc {
	clear:left;
}

.tabbedpanelscontent a img {
	border:0;	
}


/* tips */
#tip h2 {
	margin-top:10px;
	letter-spacing:1px;
}

#tip ul {
	margin:0 0 30px 25px;
	list-style:none;
	line-height:1.8;
}

/* global navigation */
#globalnav {
	width:170px;
	height:330px;
	position:absolute;
	top:0;
	left:0;
}

#globalnav ul {
	margin:0;
	padding:0;
	list-style-type:none;
}

#globalnav li {
	width:170px;
	height:30px;
	float:left;
}

#globalnav a {
	width:170px;
	height:30px;
	display:block;
}

#globalnav span {
	display:none;
}

#home {
	background:url(../../images/common/gnav/home2.jpg);
}

#home a {
	background:url(../../images/common/gnav/home1.jpg) no-repeat top left;
}

#home a:hover {
	background:url(../../images/common/gnav/home2.jpg);
}

#sample {
	background:url(../../images/common/gnav/sample2.jpg);
}

#sample a {
	background:url(../../images/common/gnav/sample1.jpg) no-repeat top left;
}

#sample a:hover {
	background:url(../../images/common/gnav/sample2.jpg);
}

#faq {
	background:url(../../images/common/gnav/faq2.jpg);
}

#faq a {
	background:url(../../images/common/gnav/faq1.jpg) no-repeat top left;
}

#faq a:hover {
	background:url(../../images/common/gnav/faq2.jpg);
}

#demo {
	background:url(../../images/common/gnav/demo2.jpg);
}

#demo a {
	background:url(../../images/common/gnav/demo1.jpg) no-repeat top left;
}

#demo a.active  {
	background:url(../../images/common/gnav/demo2.jpg) no-repeat top left;
}

#demo a:hover {
	background:url(../../images/common/gnav/demo2.jpg);
}

#shift {
	background:url(../../images/common/gnav/shift2.jpg);
}

#shift a {
	background:url(../../images/common/gnav/shift1.jpg) no-repeat top left;
}

#shift a:hover {
	background:url(../../images/common/gnav/shift2.jpg);
}

#ver {
	background:url(../../images/common/gnav/ver2.jpg);
}

#ver a {
	background:url(../../images/common/gnav/ver1.jpg) no-repeat top left;
}

#ver a:hover {
	background:url(../../images/common/gnav/ver2.jpg);
}

#edi {
	background:url(../../images/common/gnav/edi2.jpg);
}

#edi a {
	background:url(../../images/common/gnav/edi1.jpg) no-repeat top left;
}

#edi a:hover {
	background:url(../../images/common/gnav/edi2.jpg);
}

#point {
	background:url(../../images/common/gnav/point2.jpg);
}

#point a {
	background:url(../../images/common/gnav/point1.jpg) no-repeat top left;
}

#point a:hover {
	background:url(../../images/common/gnav/point2.jpg);
}

#component {
	background:url(../../images/common/gnav/component2.jpg);
}

#component a {
	background:url(../../images/common/gnav/component1.jpg) no-repeat top left;
}

#component a:hover {
	background:url(../../images/common/gnav/component2.jpg);
}

#tips {
	background:url(../../images/common/gnav/tips2.jpg);
}

#tips a {
	background:url(../../images/common/gnav/tips1.jpg) no-repeat top left;
}

#tips a:hover {
	background:url(../../images/common/gnav/tips2.jpg);
}

#trial a {
	background:url(../../images/common/gnav/trial1.jpg) no-repeat top left;
}

#trial a:hover {
	background:url(../../images/common/gnav/trial2.jpg);
}

/* link to denpyo */
a#denpyo {
	width:170px;
	height:120px;
	display:block;
	margin:20px 0 0 0;
	line-height:500px;
	overflow:hidden;
	background:url(../../images/top/denpyo.jpg) no-repeat;
	position:absolute;
	top:330px;
	left:0;
}

/* componentsource awards 2009-2010 */
.logo {
	background:url(../../images/top/csawards09-10.gif) no-repeat top left;
	width:170px;
	height:142px;
	margin:20px 0 0 0;
	cursor:pointer;
	position:absolute;
	top:470px;
	left:0;
}

	/* products lineup */
	#lineup {
		width:570px;
		height:321px;
		font-size:10px;
		letter-spacing:0.1em;
		background:url(../../images/top/lineup/bg.jpg) no-repeat top;
		position:relative;
	}
	
	#lineup #pro {
		left:140px;
		top:163px;
		position:absolute;
	}
	
	#lineup #pro p {
		margin:0 0 10px 0;
	}
	
	#lineup #sta {
		width:484px;
		padding:66px 23px 0 23px;
		background:url(../../images/top/lineup/renewal-trans.png) no-repeat top;
		left:20px;
		top:310px;
		position:absolute;
	}
	
	#lineup img {
		margin:20px 15px 0 0;
		border:0 solid;
	}
	/* end */

	/* link list */
	#link h2 {
		margin:0 0 10px 0;
		padding:10px 0 10px 10px;
		font-size:1.3em;
		font-weight:normal;
		line-height:1.3em;
		color:#000000;
		border-bottom:0 solid;
		border-left:5px solid #1A9B60;
	}
	
	#link div {
		margin:0 0 30px 0;
		padding:5px 0 10px 0;
		border-left:1px solid #E6E6E6;
	}
	
	#link p {
		margin:0;
		padding:0 0 0 15px;
	}
	/* end */

img.movie,
img.left {
	margin:0 15px 15px 0;
	float:left;
}

	a img.movie {
		border:0 solid;
	}


.install,
.demo {
	text-align:center
}