/*==============================
 ベース
================================*/
body {
    margin: 0;
    padding: 0;
    font-family: メイリオ,ヒラギノ角ゴシック ProN;
    font-size: 10pt;
	-webkit-text-size-adjust: 100%;
}
#base {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    min-width: 960px;
    min-height: 600px;
}
#main {
    top: 5px;
    bottom: 19px;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    padding-bottom: 40px;
    padding-left: 15px;    /* 見栄えのために15px分スペースを取っておく */
    padding-right: 15px;    /* 見栄えのために15px分スペースを取っておく */
}
div.trailer {
    clear: both;
}

/*==============================
 ヘッダー
================================*/
div.header {
    position: fixed;
    top: 0;
    height: 60px;
    width: 100%;
    z-index: 100;
    background-color: #87CEEB;
}
div.manageMenu {
    background-color: #FFD596;
}
div.maintenanceMenu {
    background-color: #6FDA82;
}
div.header .productName {
    margin-left: 40px;
    font-size: 12pt;
    //line-height: 60px;
    cursor: default;
    color:#8fb8cc;
    text-shadow: -2px -2px 1px rgba(255,255,255,0.3),
        -2px 0px 1px rgba(255,255,255,0.3),
        -2px 2px 1px rgba(255,255,255,0.3),
        0px 2px 1px rgba(255,255,255,0.3),
        0px -2px 1px rgba(255,255,255,0.3),
        2px -2px 1px rgba(255,255,255,0.3),
        2px 0px 1px rgba(255,255,255,0.3),
        2px 2px 1px rgba(255,255,255,0.3);
}
#headerButton {
    position: absolute;
    top: 13px;
    right: 20px;
    float: right;
    z-index: 2;
}
#headerButton button {
    padding: 5px;
    width: 135px;
}
#headerButton #normalMenuButton {
    background: linear-gradient(#fff, #87ceeb);
    background-color: #87ceeb;
}
#headerButton #normalMenuButton:hover {
    background: linear-gradient(#000, #147dff);
    background-color: #147dff;
    color: #ffffff;
}
#headerButton #manageMenuButton {
    background: linear-gradient(#fff, #ffd596);
    background-color: #ffd596;
}
#headerButton #manageMenuButton:hover {
    background: linear-gradient(#000, #ff990f);
    background-color: #ff990f;
    color: #ffffff;
}
#headerButton #maintenanceMenuButton {
    background: linear-gradient(#fff, #6fda82);
    background-color: #6fda82;
}
#headerButton #maintenanceMenuButton:hover {
    background: linear-gradient(#000, #269c00);
    background-color: #269c00;
    color: #ffffff;
}
#sectionSelector {
    position: absolute;
    top: 0;
    left: 25px;
    font-size: 28pt;
    font-weight: bold;
    opacity: 1;
    cursor: pointer;
    color: #FFF;
    text-shadow: -1px -1px 1px #000000,
        -1px 0px 1px #000000,
        -1px 1px 1px #000000,
        0px 1px 1px #000000,
        0px -1px 1px #000000,
        1px -1px 1px #000000,
        1px 0px 1px #000000,
        1px 1px 1px #000000;
}
#sectionSelector:hover {
    color: #8080ff;
}

/*==============================
 メニューバー
================================*/
/* ノーマルメニュー */
.menubar {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    border-top: solid #545454 2px;
    background-color: #87CEEB;
    text-align: center;
}

.menubar ul {
    margin: 0; 
    padding: 0; 
    list-style: none;
}
.menubar li {
    display: inline; 
    float: left;
    width: 190px;
}
.menubar li a {
    display: block;
    line-height: 30px;
    margin: 0px 0px 0px 0px;
    text-decoration: none;
    border-radius: 30px 30px 0px 0px;
    border-top:outset 3px #4DB9FF;
    border-left:outset 3px #4DB9FF;
    border-right:outset 3px #4DB9FF;
    background: linear-gradient(#147Dff,#147DFF);
    background-color: #4DB9FF;
    text-align: center;
    color: #FFFFFF;
    font-size: 14pt;
    text-shadow: -1px -1px 1px #000000,
        -1px 0px 1px #000000,
        -1px 1px 1px #000000,
        0px 1px 1px #000000,
        0px -1px 1px #000000,
        1px -1px 1px #000000,
        1px 0px 1px #000000,
        1px 1px 1px #000000;
}
.menubar li a.select {
    border-top:outset 3px #147DFF;
    border-right:outset 3px #147DFF;
    border-left:outset 3px #147DFF;
    background: linear-gradient(#fff,#4DB9FF);
    background-color: #147DFF;
}
.menubar li a:hover {
    border-top: inset 3px #147DFF;
    border-right: inset 3px #147DFF;
    border-left: inset 3px #147DFF;
    background: linear-gradient(#000,#147DFF);
    background-color: #147DFF;
}

/* マネージャメニュー */
#manageMenu {
    background-color: #FFD596;
}
#manageMenu li a {
    border-top:outset 3px #FFC440;
    border-right:outset 3px #FFC440;
    border-left:outset 3px #FFC440;
    background: linear-gradient(#FF990F,#FF990F);
    background-color: #FFC440;
}
#manageMenu li a.select {
    border-top:outset 3px #FF990F;
    border-right:outset 3px #FF990F;
    border-left:outset 3px #FF990F;
    background: linear-gradient(#fff,#FFC440);
    background-color: #FF990F;
}
#manageMenu li a:hover {
    border-top: inset 3px #FF990F;
    border-right: inset 3px #FF990F;
    border-left: inset 3px #FF990F;
    background: linear-gradient(#000,#FF990F);
    background-color: #FF990F;
}
/* メンテナンスメニュー */
#maintenanceMenu {
    background-color: #6FDA82;
}
#maintenanceMenu li a {
    border-top:outset 3px #3FD15C;
    border-right:outset 3px #3FD15C;
    border-left:outset 3px #3FD15C;
    background: linear-gradient(#269C00,#269C00);
    background-color: #3FD15C;
}
#maintenanceMenu li a.select {
    border-top:outset 3px #269C00;
    border-right:outset 3px #269C00;
    border-left:outset 3px #269C00;
    background: linear-gradient(#fff,#3FD15C);
    background-color: #269C00;
}
#maintenanceMenu li a:hover {
    border-top: inset 3px #269C00;
    border-right: inset 3px #269C00;
    border-left: inset 3px #269C00;
    background: linear-gradient(#000,#269C00);
    background-color: #269C00;
}
div.topSpacer {
    position: relative;
    height: 118px;
}
div.topSpacer.noMenu {
    height: 60px;
}

/*==============================
 セクション選択
================================*/

/* 親セクション選択 */
#parentSelection {
    margin: 0 20px 0 0;
    padding: 0;
    width: 240px;
    float:left;
}
#parentSelection ul{
	background:#fff;
	border:1px solid #000;
	height: 300px;
	overflow: scroll;
	overflow-x: hidden;
	padding:0;
	margin:0;
}
#parentSelection li {
    background-color: #FFFFFF;
	border-bottom:1px dotted #000;
    padding-left: 5px;
    line-height: 35px;
    list-style: none;
    cursor: pointer;
}
#parentSelection li:hover{
	background:#dcdcdc;
	color:#000;
}
#parentSelection li.active,
#siblingSelection .selected {
	background: #2e3d4d;
	color:#fff;
	/*border-bottom:2px solid #FFD700;*/
}

/* 自分に子セクションが存在する場合のマーカー */
.childrenMarker {
    margin-right: 15px;
    float: right;
    color: #333;
}

/* 兄弟セクション選択 */
#sibChildSelections {
    clear: both;
    padding-top: 15px;
}
/*#siblingSelectionTitle {
    float: left;
    width: 300px;
}*/

#siblingSelection {
    margin: 0 20px 0 0;
    padding: 0;
    width: 240px;
    float:left;
}
#siblingSelection ul{
	background:#fff;
	border:1px solid #000;
	height: 300px;
	overflow: scroll;
	overflow-x: hidden;
	padding:0;
	margin:0;
}
#siblingSelection li {
    background-color: #FFFFFF;
	border-bottom:1px dotted #3377ff;
    padding-left: 5px;
    line-height: 35px;
    list-style: none;
    cursor: pointer;
}

/* 子セクション選択 */
/*#childSelectionTitle {
    float: left;
    width: 300px;
}
*/
#childSelection {
    margin: 0;
    padding: 0;
    width: 240px;
    float:left;
}
#childSelection ul {
	background:#fff;
    margin: 0;
    padding: 0;
	height: 300px;
	overflow: scroll;
	overflow-x: hidden;
}
#childSelection ul{
	/*background:#f0f8ff;*/
	border:1px solid #000;
	height: 300px;
	overflow: scroll;
	overflow-x: hidden;
	padding:0;
	margin:0;
}
#childSelection li {
    background-color: #FFFFFF;
    /*background-color: #A1CFFF;*/
	border-bottom:1px dotted #3377ff;
    padding-left: 5px;
    line-height: 35px;
    list-style: none;
    cursor: pointer;
}
#parentSelection li:hover,
#siblingSelection li:hover,
#childSelection li:hover {
    background: #dcdcdc;
	color:#000;
}
#siblingSelection li.color:hover,
#childSelection li.color:hover {
    background: #cceeff;
}

/*==============================
 フッター
================================*/
footer {
    position: fixed;
    bottom: 0px;
    height: 18px;
    width: 100%;
    border-top: solid #545454 1px;
    color: #545454;
    text-align: center;
    z-index: 101;
}

/* OK時 */
footer.success {
    background-color: #A6FFA9;
}

/* NG時 */
footer.invalid {
    background-color: #FFB3A6;
}

/* Licenseなし時 */
footer.nolicense {
    background-color: #AAAAAA;
}

/* ステータス表示 */
#footerStatus {
    position: absolute;
    right: 8px;
    font-size: 60%;
}

/* バージョン表示 */
#footerVersion {
    position: absolute;
    left: 8px;
}

/* コピーライト表示 */
footer .copyright {
    cursor: pointer;
}

/*==============================
 全体統一スタイル
================================*/

/* 正常メッセージ */
#message {
    display: none;
    background-color: #FFEECF;
    padding: 8px;
    color: #047E19;
    font-size: 12pt;
    text-shadow: -1px -1px 1px #A6FFA9,
        -1px 0px 1px #A6FFA9,
        -1px 1px 1px #A6FFA9,
        0px 1px 1px #A6FFA9,
        0px -1px 1px #A6FFA9,
        1px -1px 1px #A6FFA9,
        1px 0px 1px #A6FFA9,
        1px 1px 1px #A6FFA9;
}

/* 全体エラーメッセージ */
#errorMessage {
    display: none;
    background-color: #FFEECF;
    padding: 8px;
    color: #DD2836;
    font-size: 12pt;
}

/* 個別エラーメッセージ */
input.error {
    background-color: #FFA6AB;
    border-color: #FF8C8F;
}

span.error {
    color: #DD2836;
    font-weight: bold;
}

div.error {
    background-color: #FFEECF;
    padding: 8px;
    color: #DD2836;
    font-weight: bold;
}

/* 注意書き */
.note {
    color: #008000;
    font-size: 80%;
}
.caution {
    color: #cc0000;
}

/* inputボタン指定 */
input[type="submit"],
input[type="button"],
button {
	-webkit-appearance: none;
	border-radius:6px;
	background: linear-gradient(#fff, #a9a9a9);
	background-color: #a9a9a9;
        color: #000000;
	cursor:pointer;
}
input[type="submit"]:disabled,
input[type="button"]:disabled,
button:disabled {
	background: #f0f0f0;
        color: #808080;
	cursor:default;
}
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
	background: linear-gradient(#000,#8080ff);
	background-color: #8080ff;
        color: #ffffff;
}
input[type="submit"]:hover:disabled,
input[type="button"]:hover:disabled,
button:hover:disabled {
	background: #f0f0f0;
        color: #808080;
	cursor:default;
}
div.control input[type="submit"],
div.control input[type="button"],
div.control button {
    min-width: 80px;
    min-height: 32px;
}
input[type="radio"] {
    cursor: pointer;
}
label {
    cursor: pointer;
}
select {
    cursor: pointer;
}
h1 div.h1control, h2 div.h2control {
    float: right;
    font-size: normal;
    margin: 0px;
    padding: 0px 6px;
}

/*==============================
 ポップアップウィンドウ
================================*/
.jqmWindow .control {
    float: right;
}
.jqmWindow .control input, .jqmWindow .control button {
    min-width: 80px;
    min-height: 30px;
    font-size:11pt;
    margin:10px 0 0;
}
.jqmWindow .title {
    border-bottom:1px solid #000;
    color:#1e90ff;
    font-size: 24pt;
    font-weight:bold;
    margin:0 auto;
}
.jqmWindow .title i{
    margin-right:5px;
}

.jqmWindow table {
    width: 100%;
}

.jqmWindow table td {
    vertical-align: top;
}
.jqmWindow #parentSelectionTitle,
.jqmWindow #siblingSelectionTitle,
.jqmWindow #childSelectionTitle{
    font-size:13pt;
    margin:10px 0;
}
#parentSelection span i,
#siblingSelection span i,
#childSelection span i{
    color:#3377ff;
    font-size: 10pt;
}

/*==============================
 ログアウト確認ポップアップ
================================*/
div.confirmPopup{
	background:#fff;
	border:none;
	border-radius: 10px;
	top:25%;
	padding:20px 12px 10px;
        overflow: hidden !important;
}
div.confirmPopup .selectionBtn{
	float:right;
	margin:10px 0 0;
}
div.confirmPopup .selectionBtn button{
    font-size:12pt;
    min-width: 80px;
    min-height: 30px;
    margin:5px 0 0 5px;
}
div.confirmPopup span{
	float:left;
}
div.confirmPopup p{
	margin:0;
}

/*==============================
 クレジットポップアップ
================================*/
#creditPopup{
    width:600px;
    margin-left: -300px;
    height:400px;
    overflow: scroll;
    padding: 0;
}
/*==============================
 TreeView
================================*/
div.treeView {
    border: 0px;
}
.treeView span {
    margin: 2px 40px;
    padding: 2px 20px;
    border: 2px solid #303030;
    border-radius: 4px;
    background-color: rgba(250,250,250,0.6);
    text-align: left;
}
.treeView span.current {
    background-color: #e0e0ff;
}
.treeView span.clickable:hover {
    cursor: pointer;
    color: white;
    background-color: #8080ff;
}

/*==============================
 ロゴ画像
================================*/
img.logo {
    max-width: 480px;
    max-height: 480px;
}

/*==============================
 表の微調整
================================*/
td.inputMrbInboundPolicyIpArrayimg select {
    width: 24px;
}

/*==============================
 デバッグ情報枠
================================*/
pre.debug {
    font-family: Consolas, 'Courier New', Courier, Monaco, monospace;
    font-size: 14px;
    line-height: 1.2;
    border: 1px solid gray;
    margin: 0px 0px 0px 40px;
    padding: 2px 8px;
}