/* reset style */
body { font-family:  'Meiryo UI', Meiryo, YuGothic ,'Yu Gothic', 'Arial', sans-serif; margin: 0px; padding: 0px; }
header { margin:0px; padding:0px; }
footer { margin:0px; padding:0px; }
a { margin:0px; padding:0px; }
a:link { color: #5899af; text-decoration: none;  }
a:visited { color: #5899af; text-decoration: none; }
a:hover { color: #000000; }
a:active { color: #5899af; }
div { margin:0px; padding:0px; }
h1 { margin: 1em 10px 0.7em 20px; padding:0.5em; padding-left: 0.7em; border-left: solid 2px #79d2f0; }
h2 { margin: 1em 10px 0.7em 20px; padding:0.5em; padding-left: 0.7em; border-left: solid 2px #79d2f0; }
h3 { margin: 1em 10px 0.7em 20px; padding:0.5em; padding-left: 0.7em; border-left: solid 2px #79d2f0; }
h4 { margin: 1em 10px 0.7em 20px; padding:0.5em; padding-left: 0.7em; border-left: solid 2px #79d2f0; }
h5 { margin: 1em 10px 0.7em 20px; padding:0.5em; padding-left: 0.7em; border-left: solid 2px #79d2f0; }
p { margin: 1em 10px 0.7em 20px; padding:0px; padding-left: 10px; color:drakgray; }
ul { padding:0; margin:0; margin-left: 20px; padding-left: 10px; list-style: none; }
ol { padding:0; margin:0; margin-left: 20px; padding-left: 10px; }
hr { padding:0; margin:0; margin-left: 20px; padding-left: 10px; border: 0px; border-bottom: solid 1px #efefef; }
small { margin: 0px; padding: 0px; }

/* apply default style */
div.break { clear:both; }

/* common style */
span.label {
        padding: 0px 0.6em 0px 0.6em;
        margin: 0px;
        border-radius: 5px;
        color: #ffffff;
        font-size: 0.7em;
        background-color: #999999;
        vertical-align: middle;
}

span.large {
        font-size: 1em;
}

span.success {
        background-color: #00cccc;
}

span.info {
        background-color: #148ff9;
}

span.warn {
        background-color: #bacc5c;
}

span.notice {
        background-color: #f95e14;
}

span.link {
        background-color: #39e8d8;
}

span.note {
        background-color: #ffffff;
        border: solid 1px #79d2f0;
        color: #000000;
}

p.answer {
        font-weight: none;
        font-size: 1.2em;
}

/* header menu */
header { padding:0; margin:0; margin-bottom: 20px; height: 60px; border-bottom: solid 1px #79d2f0; }
header ul { padding: 0px; margin: 0px; }
header ul li { 
        float: left;
        padding: 0px;
        margin: 0.3em;
        margin-left: 1em;
        margin-right: 1em;
        height: 50px;
}
ul li.logo {
        padding-left: 0em;
        padding-right: 0em;
        width: 200px;
        background-image: url("../img/openrelay_header_logo.png");
        background-size: contain;
        background-repeat: no-repeat;
}
div.menu {
        height: 50px;
        display: table-cell;
        vertical-align:middle;
}
/* containers */
div.container {
        background-color: #ffffff;
        width: 1200px;
        margin: auto;
}
div.main-container {
        background-color: #ffffff;
        float: left;
        width: 750px;
        margin: 0px;
        padding: 0px;
}
div.right-container {
        background-color: #ffffff;
        float: left;
        width: 450px;
        margin: 0px;
        padding: 0px;
}
div.panel {
        margin: 1em;
        padding: 0px;
        background-color: #f9f9f9;
        border: solid 1px #79d2f0;
        border-radius: 5px;
}
div.panel h4 { border-left: dotted 3px #79d2f0; }
div.console {
        margin: 15px;
        padding: 5px;
        background-color: darkgray;
        border: solid 1px #ffffff;
        border-radius: 5px;
        color: #ffffff;
}
div.console a:link { font-weight: bold; color: white; text-decoration: underline; }
div.console ol li p { padding-left: 0px; margin-left: 0px; font-size: 0.7em; }
div.console h4 { margin: 10px 10px 0.7em 0px; padding:0px; border-left: none; }

footer {
        border-top: solid 1px #efefef;
        padding: 0px;
        margin: 0px;
        margin-top: 5em;
        padding-top: 0.5em;
        padding-bottom: 0.1em;
        padding-left: 20px;
        padding-right: 20px;
}
footer ul li { margin: 1em; }