@charset "utf-8";

/*
	SANSTREAM site style

	Table of content
		* Universal
		* Anchor
		* Top Navigation
		* Top Title
		* Showcase
		* Main Box Title
		* Main Content
		* Main Text
		* Bottom
*/

/*
	----------------------------------------------------------------
	Universal
	----------------------------------------------------------------
*/

* {
	margin: 0;
	border: none;
	padding: 0;
	}

body {
	background: #121a3d url(../images/SSBackground.png);
	color: #000000;
	font-size: 83%;
	font-family: "Lucida Grande", "Verdana", "Meiryo", "メイリオ", "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴPro W3", "HiraKakuPro-W3", "MS Pゴシック", Sans-Serif;
	line-height: 1.5;
	}

#pagetop { background: url(../images/SSBackGradient.png) repeat-x 0 0; }

#incanvas { width: 780px; margin: 0 auto 0 auto; }


/*
	----------------------------------------------------------------
	Anchor
	----------------------------------------------------------------
*/

a { overflow: hidden }

a:link,
a:visited { color: #0066ff; text-decoration: none; }

a:active,
a:hover { color: #000000; text-decoration: none; }

#main-content a:hover,
#map a:hover {
	border-bottom: 1px solid #cccccc;
	}


/*
	----------------------------------------------------------------
	Top Navigation
	----------------------------------------------------------------
*/

#topnav {
	height: 26px;
	background: url(../images/SSMenuBack.png) no-repeat 0 0;
	color: #ffffff;
	}

#quickmenu {
	height: 26px;
	list-style: none;
	}

#quickmenu a {
	float: right;
	display: inline;
	display: block;
	height: 21px;
	padding: 5px 12px 0 0;
	font-size: 10px;
	color: #ffffff;
	}


/*
	----------------------------------------------------------------
	Top Title
	----------------------------------------------------------------
*/

#toptitle {
	height: 92px;
	background: url(../images/SSTitleBack.png) no-repeat 0 0;
	}

h1 {
	float: left;
	width: 500px;
	}

#refplayer {
	float: right;
	width: 230px;
	background: url(../images/SSDownloadBadge.png) no-repeat 100% 18px;
	}

h1 a,
#refplayer a {
	display: block;
	height: 90px;
	font-size: 1px;
	line-height: 1px;
	text-indent: -9999px;
	overflow: hidden;
	}


/*
	----------------------------------------------------------------
	Showcase
	----------------------------------------------------------------
*/

#scrollerbox {
	padding: 0;
	background: #ffffff url(../images/SSSlideContent.png) no-repeat 0 0;
	}

#scroller {
    width: 780px;
    margin: 0 auto;
    overflow: hidden;

	clear: both;
	list-style: none;
	height: 225px;
	}

#scroller #content {
    width: 3900px;
    }

.pane {
    width: 780px;
    float: left;
    }

.pane .container {
	margin-top: 10px;
	height: 210px;
	}

#showcase1-pane .container { background: url(../images/SSSlideContent1.jpg) no-repeat 0 0 }
#showcase2-pane .container { background: url(../images/SSSlideContent2.jpg) no-repeat 0 0 }
#showcase3-pane .container { background: url(../images/SSSlideContent3.jpg) no-repeat 0 0 }
#showcase4-pane .container { background: url(../images/SSSlideContent4.jpg) no-repeat 0 0 }
#showcase5-pane .container { background: url(../images/SSSlideContent5.jpg) no-repeat 0 0 }

#showcase1-pane .container h2,
#showcase3-pane .container h2 {
	height: 120px;
	font-size: 1px;
	line-height: 1px;
	text-indent: -9999px;
	overflow: hidden;
	}

.pane .container p {
	padding: 0 20px;
	}

#showcase1-pane .container a,
#showcase3-pane .container a {
	display: block;
	float: left;
	width: 180px;
	height: 70px;
	font-size: 1px;
	line-height: 1px;
	text-indent: -9999px;
	overflow: hidden;
	}

#showcase2-pane .container h2 a,
#showcase4-pane .container h2 a,
#showcase5-pane .container h2 a {
	display: block;
	height: 210px;
	font-size: 1px;
	line-height: 1px;
	text-indent: -9999px;
	overflow: hidden;
	}

#tabBar {
	height: 65px;
	width: 780px;
	text-align: center;
	margin: 0 auto 16px auto;
	clear: both;
	background: url(../images/SSSlideTab.png) no-repeat 0 0;
	}

#showcaseTabs li {
	float: left;
	list-style: none;
	}

#showcaseTabs a {
	display: block;
	width: 156px;
	height: 65px;
	font-size: 1px;
	line-height: 1px;
	text-indent: -9999px;
	overflow: hidden;
	}

#showcaseTabs .showcase1 a.active {
	background: url(../images/SSSlideTab.png) no-repeat 0 -65px;
	}
#showcaseTabs .showcase2 a.active {
	background: url(../images/SSSlideTab.png) no-repeat -156px -65px;
	}
#showcaseTabs .showcase3 a.active {
	background: url(../images/SSSlideTab.png) no-repeat -312px -65px;
	}
#showcaseTabs .showcase4 a.active {
	background: url(../images/SSSlideTab.png) no-repeat -468px -65px;
	}
#showcaseTabs .showcase5 a.active {
	background: url(../images/SSSlideTab.png) no-repeat -624px -65px;
	}


/*
	----------------------------------------------------------------
	Main Content
	----------------------------------------------------------------
*/

.main-content {
	background: #ffffff url(../images/SSContentTitleBack.png) no-repeat 0 0;
	}

#single-main-content {
	background: #ffffff url(../images/SSContentLabelBack.png) no-repeat 0 0;
	}

#vod div.main-content { background: #ffffff url(../images/SSContentTitleVod.png) no-repeat 0 0 }
#live div.main-content { background: #ffffff url(../images/SSContentTitleLive.png) no-repeat 0 0 }
#stb div.main-content { background: #ffffff url(../images/SSContentTitleSTB.png) no-repeat 0 0 }
#others div.main-content { background: #ffffff url(../images/SSContentTitleOthers.png) no-repeat 0 0 }

/* Old Style */

#software #main-content { margin-top: 0 }

/* Box Title */

div.main-content h3 {
	height: 34px;
	color: #ffffff;
	padding: 20px 24px 12px 24px;
	font-size: 20px;
	font-weight: normal;
	line-height: 24px;
	}

#vod div.main-content h3,
#live div.main-content h3,
#stb div.main-content h3,
#others div.main-content h3 {
	height: 118px;
	color: #ffffff;
	padding-bottom: 12px;
	font-size: 1px;
	font-weight: normal;
	line-height: 1px;
	text-indent: -9999px;
	overflow: hidden;
	}

#single-main-content h3,
#map h3 {
	height: 19px;
	font-size: 11px;
	font-weight: normal;
	padding-left: 15px;
	padding-top: 5px;
	color: #ffffff;
	}

#single-main-content h3 {
	padding-bottom: 12px;
	}

#software .main-content h3,
#software #main-content h3 {
	height: 32px;
	color: #ffffff;
	font-size: 18px;
	font-weight: normal;
	padding-top: 22px;
	padding-left: 24px;
	line-height: 22px;
	text-indent: 0;
	}

/* Box Layout */

.main-content .box {
	margin: 6px 24px;
	}

.main-content .bi-box {
	display: inline;
	float: left;
	width: 354px;
	margin: 6px 0 6px 24px;
	}

#single-main-content .bi-box {
	display: inline;
	float: left;
	width: 389px;
	}

.main-content .tri-box {
	display: inline;
	float: left;
	width: 228px;
	margin: 6px 0 6px 24px;
	}

.main-content .four-box {
	display: inline;
	float: left;
	width: 165px;
	margin: 6px 0 6px 24px;
	}



.divider {
	clear: left;
	height: 4px;
	background: url(../images/SSContentBottomBack.png) no-repeat 0 100%;
	padding-top: 12px;
	margin-bottom: 16px;
	}

/* Conditional */

.main-content h4 {
	color: #5236a0;
	padding: 10px 0 6px 0;
	font-size: 1.1em;
	line-height: 1.4;
	}

.main-content h5 {
	padding: 8px 0 4px 0;
	font-size: 90%;
	line-height: 1.5;
	}

.main-content p,
.main-content ul,
.main-content ol,
.main-content blockquote,
.main-content table {
	padding: 4px 0;
	font-size: 90%;
	line-height: 1.5;
	}

#single-main-content p,
#single-main-content ul {
	padding: 0 0 0 16px;
	font-size: 90%;
	line-height: 1.5;
	}

#single-main-content ol,
#single-main-content blockquote,
#single-main-content table {
	padding: 6px 24px 6px 24px;
	font-size: 90%;
	line-height: 1.5;
	}

.main-content li {
	list-style: none;
	margin: 4px 0 2px 0;
	padding-left: 22px;
	background: url(../images/SSListIcon.gif) no-repeat 0 2px;
	}

#single-main-content li {
	list-style: none;
	margin: 6px 0 4px 0;
	padding-left: 20px;
	background: url(../images/SSListIcon.gif) no-repeat 0 2px;
	}

.main-content table {
	margin: 8px auto 8px auto;
	}

.main-content thead td {
	background: #F5F5F5;
	border-bottom: 1px solid #E0E0E0;
	font-weight: bold;
	}

.main-content td.first {
	background: #E0E0E0;
	}

.main-content td {
	padding: 4px 8px;
	}

.caption {
	display: block;
	margin: 6px 0 4px 0;
	padding: 4px 8px;
	border: 1px solid #E0E0E0;
	background: #F5F5F5;
	color: #555555;
	font-size: 90%;
	line-height: 1.5;
	}

.center { text-align: center }

.marked { font-weight: bold }

strong { color: #5236a0 }

.content-nav {
	margin: 0 24px;
	text-align: right;
	}

span.tag {
	font-size: 86%;
	color: #666666;
	}

hr {
	clear: both;
	height: 1px;
	background-color: #ffffff;
	}

/* Old Elements */

#main-content h4 {
	color: #5236a0;
	padding: 12px 24px 0 24px;
	font-size: 1.1em;
	line-height: 1.4;
	}
#main-content p,
#main-content ul,
#main-content ol,
#main-content blockquote,
#main-content table {
	padding: 6px 24px 6px 24px;
	font-size: 90%;
	line-height: 1.5;
	}
#main-content li {
	list-style: none;
	margin: 6px 0 4px 0;
	padding-left: 20px;
	background: url(../images/SSListIcon.gif) no-repeat 0 2px;
	}
#main-content .section {
	padding: 12px 18px;
	}

#software #main-content p { padding: 0 0 0 8px }
#software #main-content ul { padding: 8px 0 0 0 }
#software #main-content table { padding: 0 }
#main-content ul.link-segmented-by-three li {
	width: 240px;
	float: left;
	padding: 40px 0 0 0;
	background: none;
	text-align: center;
	}
#main-content ul.link-segmented-by-three li a {
	display: block;
	padding: 20px;
	border-bottom: 1px solid #ffffff;
	}
#main-content ul.link-segmented-by-three li.winvista { background: url(../images/logoWinVista.jpg) no-repeat 50% 8px }
#main-content ul.link-segmented-by-three li.winxp { background: url(../images/logoWinXP.jpg) no-repeat 50% 8px }
#main-content ul.link-segmented-by-three li.macosx { background: url(../images/logoApple.jpg) no-repeat 50% 8px }
#main-content ul.link-segmented-by-three li strong {
	display: block;
	}
#main-content ul.link-segmented-by-three li span {
	font-size: 0.9em;
	display: block;
	}

/*
	----------------------------------------------------------------
	Content Box Text
	----------------------------------------------------------------
*/

#requirements table {
	width: 740px;
	margin-top: 12px;
	}

#requirements td {
	padding: 4px 8px;
	background: #F5F5F5;
	border-bottom: 1px solid #D0D0D0;
	font-size: 11px;
	line-height: 15px;
	}

#requirements td.colleft {
	width: 150px;
	background: #E9E9E9;
	font-weight: bold;
	}

#requirements ul.caption {
	padding-bottom: 6px;
	font-size: 1em;
	}

#requirements thead td {
	background: #ffffff;
	}

#requirements table ul,
#requirements table li {
	padding: 0;
	background: none;
	}

/*
	----------------------------------------------------------------
	Map Box
	----------------------------------------------------------------
*/

#map {
	margin-top: 12px;
	background: #ffffff url(../images/SSContentLabelBack.png) no-repeat 0 0;
	}

#map .container,
#map .breadclumb {
	padding: 18px 0 0 15px;
	}

#map .container {
	clear: both;
	}

#map .box,
#map .breadclumb li {
	float: left;
	}

/* breadclumb */

#map .breadclumb li {
	padding-left: 12px;
	background: url(../images/SSDirectoryArrow.gif) no-repeat 2px 3px;
	}

#map .breadclumb li.home {
	padding-left: 20px;
	background: url(../images/SSListIcon.gif) no-repeat 0 2px;
	}

/* site map columns */

#map #prodctinfo {
	width: 505px;
	}

#map #softwares,
#map #companyinfo {
	width: 126px;
	}

#map h4 {
	width: 126px;
	}

#map h5,
#map li {
	font-size: 11px;
	line-height: 1.5;
	list-style: none;
	}

#map .column {
	float: left;
	}

#map h5 {
	margin: 12px 0 4px 0;
	width: 126px;
	}

/*
	----------------------------------------------------------------
	Bottom
	----------------------------------------------------------------
*/

#copyright {
	height: 30px;
	padding-top: 12px;
	}

#copyright p {
	font-size: 10px;
	font-family: "Helvetica";
	line-height: 1.0;
	color: #22407a;
	text-align: center;
	}


/*
	----------------------------------------------------------------
	contact only
	----------------------------------------------------------------
*/



#contact {
	font-size: 75%;
	font-family: "¥Ò¥é¥®¥Î³Ñ¥´ Pro W3", "Hiragino Kaku Gothic Pro", "£Í£Ó £Ð¥´¥·¥Ã¥¯", sans-serif;
	line-height: 1.5;
	background-color: #FFFFFF;
	width: 600px;
	margin: 30px auto 5px;
	padding: 5px;
	height: auto;
	border: 3px solid #000000;
}

#contact h1.title {
	font-size: 150%;
	text-align: center;
	color: #000000;
	padding: 5px 0px;
	margin: 0px;
	background-color: #FFFFFF;
}

#contact h2.irai {
	font-size: 100%;
	text-align: center;
	font-weight: normal;
	color: #FF0000;
}

#contact table {
	font-size: 100%;
	width: 100%;

	margin: 0px;
	padding: 0px;
	color: #333333;
}
#contact th {
	font-weight: normal;
	width: 200px;
	background-color: #FFFFFF;
	padding: 10px;

}

#contact th.must {
}

#contact td {
	border-bottom-width: 1px;
	border-top-style: none;

}

#contact th em.must {
	font-style: normal;
	color: #FF0000;
	padding-left: 5px;
}
#contact th em.check {
	font-style: normal;
	color: #666666;
	padding-left: 5px;
}

#contact .copyright {
	font-size: 90%;
	text-align: right;
}

.error {
	padding: 0px;
	color: #FF0000;
	position:static;
	left:50px; 
}
#contact select {
	border: 1px solid #CCCCCC;
	background-color: #ffffff;
}
#contact .confirm {
	text-align: center;
	margin-top: 15px;
}