html {
    height: 100%;
}

body {
    height: 100%;
    width: 100%;
    paddin: 0px;
    margin: 0px;
}

#logo {
    float: left;
}

#user {
    float : right;
    vertical-align: middle;
    position: relative; top:20px;
}

#menu {
    background-color: #ff8080;
    clear : left;
    text-align : left;
}

#main {
    position: relative; top:130px; left:20px;
    width: 90%;
    background-color: #ffffff;
    clear : left;
}

#content {
    position: relative; top:20px; left:40px;
    background-color: #ffffff;
    clear : left;
}

#login {
    background-color: #ffffff;
    text-align : center;
}

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50;
    background-color: #ffffff;
    text-align : center;
    font-size: small;
}

#header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 128;
    background-color: #ffffff;
    text-align : center;
}

.menulinkadmin {
    color: #ff0000;
    text-decoration: none;
    font-weight: bold;
}

.menulink {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
}

.head3 {
  color: #000080;
  border-left: solid 8px #8080ff;
  padding: 0.2em;
  background: #e0e0ff;
}

table.list th {
  text-align: left;
  vertical-align: top;
  position: relative;
  color: #000080;
  background-color: #e0e0ff;
  padding: 3px 10px;
}

table.list td {
  position: relative;
  color: black;
  border: 2px #c0c0ff solid;
  padding: 3px 7px;
}

table.detail th {
  text-align: left;
  vertical-align: top;
  position: relative;
  color: #000080;
  background-color: #e0e0ff;
  padding: 3px 10px;
}

table.detail th:after {
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top: 8px;
  right:-5px;
  border-left: 5px solid #e0e0ff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

table.detail td {
  position: relative;
  color: black;
  border: 2px #c0c0ff solid;
  padding: 3px 7px;
}

table.login th {
  text-align: left;
  vertical-align: top;
  position: relative;
  color: #200000;
  background-color: #ffc0c0;
  padding: 3px 10px;
}

table.login th:after {
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top: 8px;
  right:-5px;
  border-left: 5px solid #ffe0e0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

table.login td {
  position: relative;
  color: black;
  border: 2px #ffc0c0 solid;
  background-color: #fff8f8;
  padding: 3px 7px;
}

.btn_blue {
  position : relative;
  display : inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #ffffff;
  background: #8080ff;
  border-color: #c0c0ff;
  border-radius: 4px;
  box-shadow: inset 0 2px 0 rgba(192,192,192,0.4), 0 2px 2px rgba(0,0,0,0.2);
  font-weight: bold;
}

.btn_blue:hover {
  background-color: #a0a0ff;
}

.btn_blue:disabled {
  color: #808080;
  background-color: #c0c0c0;
  border-color: #e0e0e0;
  box-shadow: inset 0 0px 0 rgba(192,192,192,0), 0 0px 0px rgba(0,0,0,0);
}

.btn_orange {
  position : relative;
  display : inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #ffffff;
  background: #ff8000;
  border-color: #ffc000;
  border-radius: 4px;
  box-shadow: inset 0 2px 0 rgba(192,192,192,0.4), 0 2px 2px rgba(0,0,0,0.2);
  font-weight: bold;
}

.btn_orange:hover {
  background-color: #ffa000;
}

.btn_orange:disabled {
  color: #808080;
  background-color: #c0c0c0;
  border-color: #e0e0e0;
  box-shadow: inset 0 0px 0 rgba(192,192,192,0), 0 0px 0px rgba(0,0,0,0);
}

.btn_red {
  position : relative;
  display : inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #ffffff;
  border-color: #ff8080;
  background: #ff4040;
  border-radius: 4px;
  box-shadow: inset 0 2px 0 rgba(192,192,192,0.4), 0 2px 2px rgba(0,0,0,0.2);
  font-weight: bold;
}

.btn_red:hover {
  background-color: #ff8080;
}

.btn_red:disabled {
  color: #808080;
  background-color: #c0c0c0;
  border-color: #e0e0e0;
  box-shadow: inset 0 0px 0 rgba(192,192,192,0), 0 0px 0px rgba(0,0,0,0);
}

.btn_green {
  position : relative;
  display : inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #ffffff;
  border-color: #c0ffc0;
  background: #40c040;
  border-radius: 4px;
  box-shadow: inset 0 2px 0 rgba(192,192,192,0.4), 0 2px 2px rgba(0,0,0,0.2);
  font-weight: bold;
}

.btn_green:hover {
  background-color: #60ff60;
}

.btn_green:disabled {
  color: #808080;
  background-color: #c0c0c0;
  border-color: #e0e0e0;
  box-shadow: inset 0 0px 0 rgba(192,192,192,0), 0 0px 0px rgba(0,0,0,0);
}

.btn_gray {
  position : relative;
  display : inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #ffffff;
  background: #808080;
  border-color: #c0c0c0;
  border-radius: 4px;
  box-shadow: inset 0 2px 0 rgba(192,192,192,0.4), 0 2px 2px rgba(0,0,0,0.2);
  font-weight: bold;
}

.btn_gray:hover {
  background-color: #c0c0c0;
}

.btn_gray:disabled {
  color: #808080;
  background-color: #c0c0c0;
  border-color: #e0e0e0;
  box-shadow: inset 0 0px 0 rgba(192,192,192,0), 0 0px 0px rgba(0,0,0,0);
}

h4 {
  position: relative;
  padding-left: 25px;
}

h4:before {
  position: absolute;
  content: '';
  bottom: -3px;
  left: 0;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 15px transparent;
  border-bottom: solid 20px #8080ff;
}
h4:after {
  position: absolute;
  content: '';
  bottom: -3px;
  left: 10px;
  width: 50%;
  border-bottom: solid 3px #8080ff;
}

.help_button{
position: relative; // 基準点
}

.help_button span{
color: blue;
position: absolute;
display: block;
padding: 4px;
width: 600px;
top: 30px; // aタグ開始点からの相対位置
left: 0;
font-size: .9em;
line-height: 1.2em;
border: 3px solid #8080ff;
border-radius: 10px;
background-color: #f0f0ff;
box-shadow: 1px 1px 5px #CCC;
z-index: 0;
visibility: hidden;
}

.help_button span:before {
position: absolute;
top: -8px; left: 25%; // フキダシ本体に対する三角形の開始位置
margin-left: -9px;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 9px 9px 9px;
border-color: transparent transparent #efffef transparent;
z-index: 0;
}

.help_button span:after {
content: "";
position: absolute;
top: -12px; left: 25%;
margin-left: -10px;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #8080ff transparent;
z-index: -1;
}

.help_button:hover{ cursor: help; }
.help_button:hover span{
visibility: visible;
cursor: help;
z-index: 20; // 他のものより上に来るように
}

input {
background-color:#f0f0ff;
}

input.login {
background-color:#ffffff;
}

input[disabled] {
background-color:#f0f0f0;
}

input:focus {
border: 2px inset #0000ff;
}

select {
background-color:#f0f0ff;
}

select[disabled] {
background-color:#f0f0f0;
}

select:focus {
border: 2px inset #0000ff;
}

textarea {
background-color:#f0f0ff;
}

textarea[disabled] {
background-color:#f0f0f0;
}

textarea:focus {
border: 2px inset #0000ff;
}