@charset "utf-8";
@import url('reset.css');

#header #doc {
	background: url(img/doc.png) 0 0 no-repeat;
	height: 30px;
	width: 45px;
	position: fixed;
	z-index:1000;
	top: 3px;
	right: 0;
	/*  display : none;*/
}
#header #help {
	background: url(img/help.png) 0 0 no-repeat;
	height: 30px;
	width: 55px;
	position: fixed;
	z-index:1000;
	top: 3px;
	right: 0;
	display : none;
}

p.doc {
	margin: 0.5em 1px;
	padding: 3px;
	background-color: #FCC;
	border: dotted 1px #C66;
	border-radius:3px;
	line-height: 1.3;
	font-size: 85%;
	display: none;
}

.error_msg {
	font-size: 93%;
	margin: 3px;
	color: #8b0000;
}

/* ---------------------------------------------
 * global
 * --------------------------------------------- */
a:hover {
	cursor: pointer;
}

label {
	margin-right: 0.5em;
}

strong {
	font-weight: bold;
}

em {
	color: #C00;
}

/* ---------------------------------------------
 * global class
 * --------------------------------------------- */

.clear:after {
	content: url(spacer.gif);
	display: block;
	clear: both;
	height: 0;
}

.clear {
	display: inline-block;
}

.readonly{
	background: #ebebe4;
	color: #aca899;
}

/* Mac版IEを除外 \*/
.clear {
	display: block;
}

/* */
.hidden {
	display: none;
}

div.dialog {
	background-color: #fff;
	color: #000;
	width: 700px;
	padding: 1px 1px 10px 1px;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
	border-radius: 3px
}

div.dialog h2 {
	background: url(img/th_bg01.jpg) 0 0 repeat-x #000;
	color: #fff;
	font-weight: bold;
	padding: 5px;
	border-radius: 3px;
	border: 0!important;
}

div.dialog div.box {
	padding: 20px 10px 10px 10px;
}

div.dialog p {
	line-height: 1.4;
	margin: 0 0 0.5em 0;
}

div.dialog div.controlPanel {
	padding: 0px 10px 0px 10px;
}

div.left {
	float: left;
}

div.right {
	float: right;
}
fieldset.left {
	float: left;
	margin-right:10px;
	min-height:40px;
}
body {
x	background: url(img/header-bg.jpg) 0 0 repeat-x;
	background: url(img/header-bg.jpg) 0 0 repeat-x;
	min-width: 100%;
}

/* ---------------------------------------------
 * global layout
 * --------------------------------------------- */

html, body {
	height: 100%;
}

body .container {
	width: 100%;
x	max-width: 950px;
x	min-width: 950px;
x    position: relative;
x 	height: auto !important;
x   height: 100%;
x   min-height: 100%;
}

.container .header {
	height: 122px;
}

.container .footer {
	background: url(img/header-bg.jpg) 0 0 repeat-x;
	height: 20px;
	line-height:20px;
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
	/*
	filter: alpha(opacity = 80);
	-moz-opacity: 0.80;
	opacity: 0.80;
	*/
	color:#666;
	font-size:85%;
x	z-index:1001;
	z-index:99;
	padding:0 0.5em;
}
.container .footer p.pagetop {
	background: url(img/footer_pagetop.jpg) 0 0 no-repeat;
	width: 146px;
	height: 34px;
	position: absolute;
	right: 10px;
	top: -14px;
}
.container .footer p.pagetop a {
	display: block;
	padding: 8px 0 0 45px;
	width: 101px;
	height: 26px;
}
.container .footer p.pagetop a:hover {
	text-decoration: underline;
}
.container .main {
	padding: 20px 0 0 20px;
}

.container .main h2 img {
	float: left;
}

.container .main h2 p {
	float: left;
	line-height: 33px;
	font-size: 145%;
	color: #666;
	padding: 0 0 0 0.5em;
	font-weight: bold;
}

.container .main h2:after {
	content: url(spacer.gif);
	display: block;
	clear: both;
	height: 0;
}

.container .main h2 {
    display: inline-block;
    *display: inline;
    *zoom: 1;
	border-left: solid 6px #A9CE52;
}
.container .main .fc-header-title h2 {
	border:none !important;
	font-weight:bold;
}
/* Mac版IEを除外 \*/
.container .main h2 {
	display: block;
}

/* */

.container .main h3 {
	line-height: 33px;
	border-left: solid 4px #A9CE52;
	margin: 20px 0 0 3px;
}

.container .main h3 p {
	padding: 0 0 0 0.5em;
	float: left;
	line-height: 33px;
	font-size: 123%;
	color: #688525;
}

.container .main h3:after {
	content: url(spacer.gif);
	display: block;
	clear: both;
	height: 0;
}

.container .main h3 {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

/* Mac版IEを除外 \*/
.container .main h3 {
	display: block;
}

/* */

.box {
	padding: 20px 0px 40px 10px;
}

.panelOption {
	padding: 10px 0;
	vertical-align: middle;
	line-height: 20px;
}

.panelOption select {
	margin: 0 20px 0 3px;
}

.panelOption .hint {
	font-size: 85%;
	border: solid 1px #A9CE52;
	color: #693;
	padding: 3px;
	margin: 3px;
	float: left;
}

/* dataTable */
.box .dataTable {

}

.box .dataTable th,
.box .dataTable td {
	border: solid 1px #999;
	padding: 5px;
	vertical-align: middle;
}

.box .dataTable th {
	background: url(img/th_bg01.jpg) 0 0 repeat-x #000;
	height: 30px;
	color: #fff;
	font-weight: bold;
	text-align: center;
	padding: 5px;
	white-space: nowrap;
}

.box .dataTable tr.even td {
	background-color: #fff;
}

.box .dataTable tr.odd td {
	background-color: #F4FAEB;
}

.box .dataTable tr.caution th,
.box .dataTable tr.caution td {
	background-color: #F66;
	color: #000;
}

/* fieldset */
.box fieldset {
	border: solid 1px #ccc;
	padding: 10px;
	margin-bottom: 20px;
}

.box fieldset legend {
	padding: 0 5px;
	font-size: 93%;
	font-weight: bold;
	color: #688525;
}

.box fieldset table th,
.box fieldset table td {
	vertical-align: top;
}

.box fieldset table th {
	padding: 6px;
	text-align: right;
	font-size: 93%;
	white-space: nowrap;
}

.box fieldset table td {
	text-align: left;
	font-size: 93%;
	padding: 3px;
}

/* panelList */
.box .panelList {
	width: 100%;
}

.box .panelList li {
    display: inline-block;
    *display: inline;
    *zoom: 1;
	border: solid 1px #688525;
	padding: 10px;
	margin: 0 10px 12px 0;
	vertical-align: top;
}

.box .panelList li p {
	font-weight: bold;
	text-align: center;
}

.box .panelList li p a {
	color: #688525;
}

.box .panelList li div {
	margin: 0 auto;
}

.box .panelList li span {
	display: block;
	margin-top: 5px;
}

.box .panelList li span a.btn {
	margin: 0 1px;
}

/* ---------------------------------------------
 * head
 * --------------------------------------------- */

#header {
	position: relative;
	height: 122px;
	min-width: 1080px;
	width: 100%;
	background: url(img/header-bg.jpg) 0 0 repeat-x;
}

#header h1 {
	position: absolute;
	top: 20px;
	left: 20px;
}

#header ul {
	position: absolute;
	top: 84px;
	left: 10px;
}

#header ul li {
x	margin-right: 10px;
x	float: left;
	display: inline-block;
/*	text-indent: -9999px;*/
	overflow: hidden;
}

#header ul li a {
	display: block;
x	width: 130px;
	width: 137px;
x	padding-left: 37px;
	height: 25px;
	padding-top: 13px;
	color: #666;
	text-decoration: none;
	text-align: center;
	background: url(img/menuOff.jpg) 0 0 no-repeat;
}

#header ul li a.gNavMain {
x	background: url(img/menuMainOff.jpg) 0 0 no-repeat;
}

#header ul li a.gNavContents {
x	background: url(img/menuContentsOff.jpg) 0 0 no-repeat;
}

#header ul li a.gNavMedia {
x	background: url(img/menuMediaOff.jpg) 0 0 no-repeat;
}

#header ul li a.gNavPlayer {
x	background: url(img/menuPlayerOff.jpg) 0 0 no-repeat;
}

#header ul li a.gNavSystem {
x	background: url(img/menuSystemOff.jpg) 0 0 no-repeat;
}

#header ul li a.gNavPlugin,
#header ul li a.gNavPlugin_sample,
#header ul li a.gNavPlugin_facility {
x	background: url(img/menuPluginOff.jpg) 0 0 no-repeat;
}

#main #header ul li a.gNavMain,
#schedule #header ul li a.gNavMain,
#contents #header ul li a.gNavContents,
#template #header ul li a.gNavTemplate,
#media #header ul li a.gNavMedia,
#player #header ul li a.gNavPlayer,
#system #header ul li a.gNavSystem,
#plugin_sample #header ul li a.gNavPlugin_weather,
#plugin_facility #header ul li a.gNavPlugin_facility,
#plugin_facility_edit #header ul li a.gNavPlugin_facility,
#plugin_facility_config #header ul li a.gNavPlugin_facility,
#plugin_power_control #header ul li a.gNavPlugin_power_control,
#plugin_holiday #header ul li a.gNavPlugin_holiday,
#plugin_interactive  #header ul li a.gNavPlugin_interactive {
	background: url(img/menuOn.jpg) 0 0 no-repeat !important;
}

#main #header ul li a.gNavMain {
x	background: url(img/menuMainOn.jpg) 0 0 no-repeat !important;
}

#contents #header ul li a.gNavContents {
x	background: url(img/menuContentsOn.jpg) 0 0 no-repeat !important;
}

#media #header ul li a.gNavMedia {
x	background: url(img/menuMediaOn.jpg) 0 0 no-repeat !important;
}

#player #header ul li a.gNavPlayer {
x	background: url(img/menuPlayerOn.jpg) 0 0 no-repeat !important;
}

#system #header ul li a.gNavSystem {
x	background: url(img/menuSystemOn.jpg) 0 0 no-repeat !important;
}

#plugin_sample #header ul li a.gNavPlugin {
x	background: url(img/menuPluginOn.jpg) 0 0 no-repeat !important;
}

#plugin_sample #header ul li a.gNavPlugin_sample {
x	background: url(img/menuPluginOn.jpg) 0 0 no-repeat !important;
}

#plugin_facility #header ul li a.gNavPlugin_facility,
#plugin_facility_edit #header ul li a.gNavPlugin_facility,
#plugin_facility_config #header ul li a.gNavPlugin_facility {
x	background: url(img/menuPluginOn.jpg) 0 0 no-repeat !important;
}

#header p {
	position: absolute;
	top: 40px;
	right: 200px;
	text-align: left;
	color: white;
}

#header span {
	position: absolute;
	top: 34px;
	right: 70px;
}

#header span a:hover {
	filter: alpha(opacity = 80);
	-moz-opacity: 0.80;
	opacity: 0.80;
	cursor: pointer;
}

/* ---------------------------------------------
 * input
 * --------------------------------------------- */

select {
	padding: 3px;
	border: 1px solid #7f9db9;
}

textarea {
	padding: 3px;
}

input.text {
	width: 10em;
	padding: 3px;
	border: 1px solid #7f9db9;
}

input.time {
	width: 3em;
	padding: 3px;
	border: 1px solid #7f9db9;
}

input.date {
	width: 6em;
	padding: 3px;
	border: 1px solid #7f9db9;
}

input.datetime {
	width: 6em;
	padding: 3px;
	border: 1px solid #7f9db9;
}

input.number {
	width: 3em;
	padding: 3px;
	border: 1px solid #7f9db9;
}

/* ---------------------------------------------
 * ボタン
 * --------------------------------------------- */

a.btn {
	line-height: 29px;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
	display: block;
	float: left;
	text-decoration: none;
	margin: 3px 0;
    border-radius:3px;
}

a.btn:hover {
	text-decoration: underline;
}

a.s-green {
	background: url(img/btn/btn-s-green.jpg) 0 0 no-repeat;
	width: 58px;
	height: 29px;
	color: white;
}

a.s-red {
	background: url(img/btn/btn-s-red.jpg) 0 0 no-repeat;
	width: 58px;
	height: 29px;
	color: white;
}

a.s-white {
	background: url(img/btn/btn-s-white.jpg) 0 0 no-repeat;
	width: 58px;
	height: 29px;
	color: #333;
}

a.m-green {
	background: url(img/btn/btn-m-green.jpg) 0 0 no-repeat;
	width: 88px;
	height: 29px;
	color: white;
}

a.m-red {
	background: url(img/btn/btn-m-red.jpg) 0 0 no-repeat;
	width: 88px;
	height: 29px;
	color: white;
}

a.m-white {
	background: url(img/btn/btn-m-white.jpg) 0 0 no-repeat;
	width: 88px;
	height: 29px;
	color: #333;
}

a.l-green {
	background: url(img/btn/btn-l-green.jpg) 0 0 no-repeat;
	width: 128px;
	height: 29px;
	color: white;
}

a.l-red {
	background: url(img/btn/btn-l-red.jpg) 0 0 no-repeat;
	width: 128px;
	height: 29px;
	color: white;
}

a.l-white {
	background: url(img/btn/btn-l-white.jpg) 0 0 no-repeat;
	width: 128px;
	height: 29px;
	color: #333;
}

a.x-green {
	background: url(img/btn/btn-x-green.jpg) 0 0 no-repeat;
	width: 188px;
	height: 29px;
	color: white;
}

a.x-red {
	background: url(img/btn/btn-x-red.jpg) 0 0 no-repeat;
	width: 188px;
	height: 29px;
	color: white;
}

a.x-white {
	background: url(img/btn/btn-x-white.jpg) 0 0 no-repeat;
	width: 188px;
	height: 29px;
	color: #333;
}

a.left {
	float: left !important;
	margin: 3px 0 0 16px;
}

a.right {
	float: right !important;
	margin: 3px 0 0 16px;
}

a.red {
	color: #C00 !important;
}

/* ---------------------------------------------
 * アイコン（背景）
 * --------------------------------------------- */

.panelClose {
	width: 23px;
	height: 23px;
	background: url(img/icon/iconClose.jpg) 0 0 no-repeat;
	position: absolute;
	top: 5px;
	right: 5px;
}

.panelClose:hover {
	filter: alpha(opacity = 75);
	-moz-opacity: 0.75;
	opacity: 0.75;
}

.iFolder {
	background: url(img/icon/folder.gif) 0px 2px no-repeat;
	padding-left: 20px;
}

/* ---------------------------------------------
 * ログイン
 * --------------------------------------------- */
#login #msg{
	position: absolute;
	top: 430px;
	width: 950px;
}

/* ---------------------------------------------
 * コンテンツ編集、テンプレート管理
 * --------------------------------------------- */
#contents .errMsg,
#template .errMsg {
	border: 1px solid red;
	background: pink;
	padding: 3px;
	position: absolute;
	display: none;
}
.contents_edit .main .panelTab {
	border: solid 1px #666;
	padding: 10px;
	z-index: 1;
	top: -1px;
	position: relative;
	zoom: 1;
}
.contents_edit .main .panelTab .sortable {
	max-height: 400px;
	overflow: auto;
}
.contents_edit .main .panelTab .sortable li {
	border: solid 2px #ccc;
	background-color: #fff;
	padding: 6px;
	margin-bottom: 6px;
	cursor: ns-resize;
	position: relative;
}

.contents_edit .main .panelTab .sortable li img {
	float: left;
	width: 120px;
	height: auto;
}

.contents_edit .main .panelTab .sortable li table th,
.contents_edit .main .panelTab .sortable li table td {
	padding: 3px 5px;
	font-size: 85%;
}

.contents_edit .main .panelTab .sortable .sortableFileName {
	/* 半角英数字を折り返す */
	word-break: break-all;
}

.contents_edit #bgmCategory,
.contents_edit #bgmContent {
	max-width: 250px;
}

.template_edit .main .right .dataTable th,
.template_edit .main .right .dataTable td {
	padding: 1px !important;
	font-size: 93%;
}

#contents .dataTable td.scene_name,
#template .dataTable td.template_name {
	/* 半角英数字を折り返す */
	word-break: break-all;
}

#contents .hint {
    font-size: 85%;
}

#contents #tabProto,
#contents #sortableProto {
	display: none;
}

/* テンプレート呼出 */
#contents #templateCall .template{
	width: 320px;
	cursor: pointer;
	margin: 5px 10px 10px 0;
	float: left;
	position: relative;
}
#contents #templateCall .template > span {
	padding: 0 5px;
	font-weight: bold;
	/* 半角英数字を折り返す */
	word-break: break-all;
	display: block;
}
#contents #templateCall .selected > span {
	background: #316AC5;
	color: white;
	border-radius: 5px 5px 0 0 / 5px 5px 0 0;
}
#contents #templateCall .template > div {
	background-color: black;
	position: relative;
}
#contents #templateCall .template > div > div {
	background-image: url(img/layerBorder.gif);
	background-position: right bottom;
	background-repeat: no-repeat;
	position: absolute;
}
#contents #templateCall .template > div > div > div {
	background-image: url(img/layerBorder.gif);
	background-position: left top;
	background-repeat: no-repeat;
	overflow: hidden;
	padding: 3px;
}
#contents #templateCall .template > div > div > div .spec {
	font-size: 10px;
}
#contents #templateCall .box > div {
	height: 400px;
	overflow: auto;
}

#contents #templateCall #selectedBorder {
	position: absolute;
	border: 3px solid #316AC5;
	width: 314px;
	top: 0;
	left: 0;
}

/* テンプレート保存 */
#contents #templateSave #templateName {
	margin-right: 10px;
}
#contents #templateSave .template {
	overflow: auto;
	height: 380px;
}
#contents #templateSave .template > div {
	background-color: black;
	position: relative;
}
#contents #templateSave .template > div > div {
	position: absolute;
}
#contents #templateSave .template input{
	margin-bottom: 1em;
}

#contents #layout,
#template #layout {
	background: black;
x	width: 500px;
x	position: fixed;
}
#contents #layout,
#template #layout {
	position: relative;
}
#contents #layout > div,
#template #layout > div {
	position: absolute;
}
#contents #templateSave .template > div > div {
	background-image: url(img/layerBorder.gif);
	background-position: right bottom;
	background-repeat: no-repeat;
}
#contents #templateSave .template > div > div > div {
	background-image: url(img/layerBorder.gif);
	background-position: left top;
	background-repeat: no-repeat;
	overflow: hidden;
}


#contents #tab,
#template #tab {
	margin-left:20px;
x	margin-left: 520px;
	width:500px;
}
#contents .deleteTab,
#contents .playListClose,
#template .deleteTab {
	width: 23px;
	height: 23px;
	background: url(img/icon/iconClose.jpg) 0 0 no-repeat;
	position: absolute;
	top: 5px;
	right: 5px;
}
#contents .layer,
#template .layer {
	overflow: hidden;
	background: url(img/layerBorder.gif) right bottom no-repeat;
	opacity: 0.9;
	filter: alpha(opacity=90);
}
#contents .layerBorder,
#template .layerBorder {
	background: url(img/layerBorder.gif) left top no-repeat;
}
#contents .layerBorder div,
#template .layerBorder div {
	position: relative;
	padding: 3px;
}
#contents .layerBorder div img,
#contents .layerBorder div p,
#template .layerBorder div img,
#template .layerBorder div p {
	position: absolute;
}
#contents .layerBorder div p,
#template .layerBorder div p {
	width: auto;
}
#contents .activeLayer .layerBorder div,
#template .activeLayer .layerBorder div {
	float: left;
	overflow: hidden;
	border: 3px solid red;
	padding: 0;
}
#contents .activeLayer.layerBg .layerBorder div,
#template .activeLayer.layerBg .layerBorder div {
	border-color: red;
}
#contents .activeLayer.layerColor1 .layerBorder div,
#template .activeLayer.layerColor1 .layerBorder div {
	border-color: turquoise;
}
#contents .activeLayer.layerColor2 .layerBorder div,
#template .activeLayer.layerColor2 .layerBorder div {
	border-color: gold;
}
#contents .activeLayer.layerColor3 .layerBorder div,
#template .activeLayer.layerColor3 .layerBorder div {
	border-color: greenyellow;
}
#contents .activeLayer.layerColor4 .layerBorder div,
#template .activeLayer.layerColor4 .layerBorder div {
	border-color: violet;
}
#contents .activeLayer.layerColor5 .layerBorder div,
#template .activeLayer.layerColor5 .layerBorder div {
	border-color: blue;
}
#contents .activeLayer.layerColor6 .layerBorder div,
#template .activeLayer.layerColor6 .layerBorder div {
	border-color: coral;
}
#contents .activeLayer.layerColor7 .layerBorder div,
#template .activeLayer.layerColor7 .layerBorder div {
	border-color: green;
}
#contents .activeLayer.layerColor8 .layerBorder div,
#template .activeLayer.layerColor8 .layerBorder div {
	border-color: brown;
}
#contents .activeLayer.layerColor9 .layerBorder div,
#template .activeLayer.layerColor9 .layerBorder div {
	border-color: blueviolet;
}
#contents .activeLayer.layerColor10 .layerBorder div,
#template .activeLayer.layerColor10 .layerBorder div {
	border-color: olive;
}
#contents .activeLayer.layerTelop .layerBorder div,
#template .activeLayer.layerTelop .layerBorder div {
	border-color: orange;
}
#contents .activeLayer .layerBorder div img,
#contents .activeLayer .layerBorder div p {
	margin: -3px;
}
#contents .activeLayer .layerBorder div .layerSpec {
	margin: -3px;
}
#contents .layerBorder div p,
#template .layerBorder div p {
	padding: 3px;
	margin: -3px;
}
#contents .layerBg,
#template .layerBg {
	background-color: #FFB2B2;
}
#contents .layerColor1,
#template .layerColor1 {
	background-color: #C5F6F1;
}
#contents .layerColor2,
#template .layerColor2 {
	background-color: #FFF3B2;
}
#contents .layerColor3,
#template .layerColor3 {
	background-color: #E6FFC0;
}
#contents .layerColor4,
#template .layerColor4 {
	background-color: #FAD9FA;
}
#contents .layerColor5,
#template .layerColor5 {
	background-color: #B2B2FF;
}
#contents .layerColor6,
#template .layerColor6 {
	background-color: #FFD8CA;
}
#contents .layerColor7,
#template .layerColor7 {
	background-color: #B2D9B2;
}
#contents .layerColor8,
#template .layerColor8 {
	background-color: #E4BFBF;
}
#contents .layerColor9,
#template .layerColor9 {
	background-color: #DCBFF6;
}
#contents .layerColor10,
#template .layerColor10 {
	background-color: #D9D9B2;
}
#contents .layerTelop,
#template .layerTelop {
	background-color: #FFE4B2;
}
#contents .controlPanel,
#template .controlPanel {
	clear: both;
}
#contents #tabNaviNew a,
#template #tabNaviNew a {
	margin-right: 10px;
}
#contents #tabNavi,
#template #tabNavi {
	user-select: none;         /* CSS3 */
	-moz-user-select: none;    /* Firefox */
	-webkit-user-select: none; /* Safari、Chrome */
	-ms-user-select: none;     /* IE10～ */
}
#contents #tabNavi a,
#template #tabNavi a {
	outline:none;
}
#contents .contents_edit .main .tabNavi,
#template .contents_edit .main .tabNavi {
	z-index: 2;
	position: relative;
	zoom: 1;
	overflow: hidden;
}

#contents .contents_edit .main .tabNavi>li,
#template .contents_edit .main .tabNavi li  {
	float: left;
	margin-top: 10px;
	margin-right: 5px;
	border: solid 1px #666;
	border-radius: 5px 5px 0 0 / 5px 5px 0 0;
	background-color: #ccc;
}

#contents .contents_edit .main .tabNavi>li a,
#template .contents_edit .main .tabNavi li a {
	border-top: solid 5px red;
	border-radius: 5px 5px 0 0 / 5px 5px 0 0;
	padding: 5px 10px 4px;
	text-align: center;
x	margin-right: 5px;
	display: block;
}
#contents .contents_edit .main .tabNavi>#tabNavi0 a,
#template .contents_edit .main .tabNavi>#tabNavi0 a {
	border-color: red;
}
#contents .contents_edit .main .tabNavi .tabColor1 a,
#template .contents_edit .main .tabNavi .tabColor1 a {
	border-color: turquoise;
}
#contents .contents_edit .main .tabNavi .tabColor2 a,
#template .contents_edit .main .tabNavi .tabColor2 a {
	border-color: gold;
}
#contents .contents_edit .main .tabNavi .tabColor3 a,
#template .contents_edit .main .tabNavi .tabColor3 a {
	border-color: greenyellow;
}
#contents .contents_edit .main .tabNavi .tabColor4 a,
#template .contents_edit .main .tabNavi .tabColor4 a {
	border-color: violet;
}
#contents .contents_edit .main .tabNavi .tabColor5 a,
#template .contents_edit .main .tabNavi .tabColor5 a {
	border-color: blue;
}
#contents .contents_edit .main .tabNavi .tabColor6 a,
#template .contents_edit .main .tabNavi .tabColor6 a {
	border-color: coral;
}
#contents .contents_edit .main .tabNavi .tabColor7 a,
#template .contents_edit .main .tabNavi .tabColor7 a {
	border-color: green;
}
#contents .contents_edit .main .tabNavi .tabColor8 a,
#template .contents_edit .main .tabNavi .tabColor8 a {
	border-color: brown;
}
#contents .contents_edit .main .tabNavi .tabColor9 a,
#template .contents_edit .main .tabNavi .tabColor9 a {
	border-color: blueviolet;
}
#contents .contents_edit .main .tabNavi .tabColor10 a,
#template .contents_edit .main .tabNavi .tabColor10 a {
	border-color: olive;
}
#contents .contents_edit .main .tabNavi>.telop a,
#template .contents_edit .main .tabNavi>.telop a {
	border-color: orange;
}
#contents .contents_edit .main .tabNavi>li.activeTab,
#template .contents_edit .main .tabNavi>li.activeTab {
	border-bottom-color: #fff;
	background-color: #fff;
}
#contents .contents_edit .main .tabNavi>li.enable.activeTab a,
#template .contents_edit .main .tabNavi>li.enable.activeTab a {
	cursor: e-resize;
}
#contents .contents_edit .main .tabNavi>li span,
#template .contents_edit .main .tabNavi>li span {
	display: block;
}
#contents .hiddenCtrl {
	border-color: red;
}
#contents .playlist {
	cursor: n-resize!important;
}
#contents .box fieldset table th,
#contents .box fieldset table td,
#template .box fieldset table th,
#template .box fieldset table td {
	vertical-align: middle;
	padding-bottom: 10px;
}
#contents .effect_id,
#contents .effect_id_ex {
	width: 200px;
}
#contents .panelTab tr.firstChild td.lastChild {
	height: 25px;
}

#template .thumbnail {
	background-color: #000;
	position: relative;
	width: 200px;
	display: block;
}

#template .thumbnail > span {
	background-image: url(img/layerBorder.gif);
	background-position: right bottom;
	background-repeat: no-repeat;
	position: absolute;
	display: block;
	font-size:85%;

}

#template .thumbnail > span > span {
	background-image: url(img/layerBorder.gif);
	background-position: left top;
	background-repeat: no-repeat;
	display: block;
	overflow: hidden;
}



/* ---------------------------------------------
 * メイン画面
 * --------------------------------------------- */

#main .main div.right ul li {
	overflow: hidden;
}

#main .main div.right ul li a {
	padding: 3px;
	display: block;
	font-size: 93%;
	font-weight:bold;
	color: white;
	border: solid 1px #999;
	background-color: #999;
	min-height:2em;
	border-radius: 3px 3px;
	-webkit-border-radius: 3px 3px;
	-moz-border-radius: 3px 3px;
	/*behavior: url(/common/PIE.htc);*/
}



/* ---------------------------------------------
 * ログイン画面
 * --------------------------------------------- */

/*
body#login {
	text-align: center;
	background: none;
}
*/

body#login .loginPanel input {
	background-color: #F9F9F9;
	border: none;
}

body#login .loginPanel input#login-user {
	position: absolute;
	top: 339px;
	left: 400px;
}

body#login .loginPanel input#login-pass {
	position: absolute;
	top: 389px;
	left: 400px;
}

body#login .loginPanel a#login-btn {
	position: absolute;
	top: 458px;
	left: 338px;
}

body#login .loginPanel a#login-btn:hover {
	filter: alpha(opacity = 80);
	-moz-opacity: 0.80;
	opacity: 0.80;
	cursor: pointer;
}

#lean_overlay {
	position: fixed;
	z-index: 100;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background: #000;
	display: none;
}

.layoutBase,
#layoutBase {
	border: solid 1px #ccc;
	background-color: #fff !important;
	overflow: hidden;
	z-index: 99;
	position: relative;
}

#layoutBase {
	width: 480px;
	height: 270px;
}

.layoutBase .layoutBox,
#layoutBase .layoutBox {
	width: 120px;
	height: 120px;
	background-color: #e0f2be;
	position: absolute !important;
	font-size: 85%;
	box-shadow: 0px 0px 0px 1px #999;
	-webkit-box-shadow: 0px 0px 0px 1px #999;
	-moz-box-shadow: 0px 0px 0px 1px #999;

	filter: alpha(opacity = 75);
	-moz-opacity: 0.75;
	opacity: 0.75;
}

.layoutBase .layoutBox span,
#layoutBase .layoutBox span {
	display: block;
	margin: 0 !important;
	padding: 2px !important;
}

#layoutBase .V, .layoutBase .V {
	background-color: #99ccff;
	z-index: 1;
}

#layoutBase .M, .layoutBase .M {
	background-color: #e78f08;
	z-index: 1;
}

#layoutBase .P, .layoutBase .P {
	background-color: #e0f2be;
	z-index: 1;
}

#layoutBase .C, .layoutBase .C {
	background-color: #CC6666;
	z-index: 1;
}

#layoutBase .B, .layoutBase .B {
	background-color: #eeeeee;
	z-index: 0;
}

.ui-draggable-dragging {
	filter: alpha(opacity = 50);
	-moz-opacity: 0.50;
	opacity: 0.50;
}

.ui-resizable:hover {

	cursor: move;
}

div.bRed {
	box-shadow: 0 0 0 1px #CC0000 !important;
	-webkit-box-shadow: 0 0 0 1px #CC0000 !important;
	-moz-box-shadow: 0 0 0 1px #CC0000 !important;

}
div.bRed span {
	/*background-color: #fff !important;*/
	display: block !important;
	height:100%;
	margin:1px !important;
	font-weight:bold;
	color:red\9;
}
tr.bRed td {
	background-color: #ffe4e1 !important;
}

label.error {
	display: block;
	margin-top: -1em;
	margin-left: 1em;
	padding: 3px;
	color: red;
	background-color: #fff;
	border: solid 1px #FF6666;
	filter: alpha(opacity = 65);
	-moz-opacity: 0.65;
	opacity: 0.65;
	border-radius: 3px;
	font-size: 85%;
}

/* ---------------------------------------------
 * メディア管理
 * --------------------------------------------- */
#media #pv{
	height: 400px;
x	background: url(img/pv_bg.gif);
}
#media .dataTable a.folder_l {
x	line-height: 60px;
	/* 半角英数字を折り返す */
	word-break: break-all;
	display: block;
}
#media .thumbs span {
	display: block;
}
#media .thumbs {
	background: url(img/icon/folder_l.gif);
	width: 60px;
	height: 60px;
	float: left;
	margin-right: 10px;
}
#media .thumbs span {
	position: relative;
	top: 7px;
	left: 5px;
	width: 50px;
	height: 48px;
	overflow: hidden;
}
#media .thumbs img {
	height: 30px;
x	width: 40px;
	position: absolute;
	border-right: gray solid 1px;
	border-bottom: gray solid 1px;
}
#media .t1 {
	z-index: 2;
}
#media .t2 {
	z-index: 1;
	left: 9px;
	top: 8px;
}
#media .t3 {
	z-index: 0;
	left: 18px;
	top: 16px;
}
#media #errMsg {
	border: red solid 1px;
	margin: 3px 1em;
	padding: 5px;
	line-height: 16px;
	font-size: 16px;
	background-color: pink;
}
#media .errMsg {
	border: 1px solid red;
	background: pink;
	padding: 3px;
	position: absolute;
	display: none;
}
#media .box .errMsg {
	left: 70px;
}
#media #folderEditMsg {
	position: relative;
	left: 0;
}
#media #moveMediaMsg {
	max-height: 100px;
	overflow: auto;
	margin-bottom: 20px;
}
#media #destination {
	max-height: 100px;
	overflow: auto;
}
#media #mediaDelMsg {
	max-height: 200px;
	overflow: auto;
}

#media #mediaTable .content_name,
#media #mediaTable .scene_name {
	/* 半角英数字を折り返す */
	word-break: break-all;
}

/* ---------------------------------------------
 * システム設定
 * --------------------------------------------- */
#system .errMsg {
	border: 1px solid red;
	background: pink;
	padding: 3px;
	position: absolute;
	display: none;
}
#system #user_id,
#system #user_name,
#system #password,
#system #parent_id {
	margin-right: 5px;
}

#system .dataTable td {
	/* メイン画面でスケジュール名の半角英数字を折り返す */
	word-break: break-all;
}


/* ---------------------------------------------
 * ログイン画面
 * --------------------------------------------- */

body#login {
  background-image: url("img/bg.png");
  background-size: cover;
	background-position: center;
}
#login .container{
	max-width: 1200px;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 20px;
	box-sizing: border-box;
}
#login .main{
	background-color: #fff;
  width: 100%;
	padding: 0!important;
	box-shadow: 0 2.5rem 2rem -2rem hsl(200 50% 20% / 40%);
}
#login .main:before{
	content: '';
	background: #FFF23F;
	background-image: url("img/box_arrow.png") ;
	background-repeat: no-repeat;
	height: 20px;
	width: 100%;
	display: block;
}
#login .main:after{
	content: '';
	background: #FFF23F;
	background-image: url("img/box_arrow.png") ;
	background-repeat: no-repeat;
	height: 20px;
	width: 100%;
	display: block;
}
#login .box{
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 500px;
	box-sizing: border-box;
	padding: 20px;
	margin: 5% auto;
}
#login .box__wrap h1{
	margin-bottom: 80px;
}
#login .box__wrap h1 img{
	max-width: 500px;
	width: 100%;
}
#login .box__wrap form .form__txt{
	position: relative;
  text-align: center;
	margin-bottom: 20px;
	color: #828282;
	font-size: 20px;
}
#login .box__wrap form .form__txt:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 20%;
  height: 1px;
  content: '';
  background: #BBBBBB;
}
#login .box__wrap form .form__txt:after {
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  width: 20%;
  height: 1px;
  content: '';
  background: #BBBBBB;
}
@media screen and (max-width: 425px) {
	#login .box__wrap form .form__txt span{
		font-size: 16px;
	}
	#login .box__wrap form .form__txt:before {
		width: 15%;
	}
	#login .box__wrap form .form__txt:after {
		width: 15%;
	}
}
#login .box__wrap form table.dataTable{
	width: 100%;
	margin: 0 auto;
}
#login .box__wrap form table.dataTable tbody tr{
	display: block;
	margin-bottom: 20px;
}
#login .box__wrap form table.dataTable tbody tr th{
	display: block;
	width: 100%;
	height: auto;
	background: none;
	color: #000;
	border: none;
	text-align: left;
	font-weight: normal;
	font-size: 16px;
	padding: 0;
	margin-bottom: 5px;
}
#login .box__wrap form table.dataTable tbody tr td{
	display: block;
	width: 100%;
	border: none;
	padding: 0;
}
#login .box__wrap form table.dataTable tbody tr td input{
	width: 100%;
	height: 45px;
	padding: 0px 8px;
	box-sizing: border-box;
	font-size: 16px;
	border: 1px solid #BBBBBB
}
#login .box__wrap form .submit{
	text-align: center;
}
#login .box__wrap form .submit input{
	width: 100%;
	height: 50px;
	font-size: 16px;
	background: #FF6363;
	color: #fff;
	border: none;
	cursor: pointer;
}


/* ---------------------------------------------
 * 一覧画面
 * --------------------------------------------- */

#contents{
	position: relative;
	height: max-content;
}
 #contents:before{
	content: '';
	display: block;
	background: #FFF23F;
	background-image: url("img/box_arrow.png") ;
	background-repeat: no-repeat;
	height: 20px;
	width: 100%;
	position: absolute;
	top: 0;
}
#contents:after{
	content: '';
	display: block;
	background: #FFF23F;
	background-image: url("img/box_arrow.png") ;
	background-repeat: no-repeat;
	height: 20px;
	width: 100%;
	position: absolute;
	bottom: 0;
}
#contents .container{
	max-width: 1200px;
	width: 100%;
	min-height: 977px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}
#contents .box{
	padding: 50px 0;
}
#contents .container .main {
	padding: 0;
}
#contents .box h1{
	margin: 80px 0;
	text-align: center;
}
#contents .box h1 img{
	max-width: 500px;
	width: 100%;
}
#contents .box .dataTable {
	width: 100%;
}
#contents .table_content{
	margin-bottom: 80px;
}
#contents .table_content{
	margin-bottom: 80px;
}
#contents .box .dataTable th {
	background: url(img/th_bg01.jpg) 0 0 repeat-x #009647;
	height: 30px;
	color: #fff;
	font-weight: bold;
	text-align: center;
	padding: 5px;
	white-space: nowrap;
	border: solid 1px #fff;
}
#contents .box .dataTable td {
	text-align: center;
}
#contents #form_logoff{
	margin-top: 40px;
}
#contents #form_logoff input{
	display: block;
	margin: 0 auto;
	max-width: 460px;
	width: 100%;
	height: 50px;
	font-size: 16px;
	background: #FF6363;
	color: #fff;
	border: none;
	cursor: pointer;
}
input[type="submit"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0;
	border: none;
	outline: none;
	background: transparent;
}