/**あいう*/
@chaset "utf-8";


/** Initialize main block elements. */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #F3F3F3;
    /*color: #000099;*/
    color: #15355E;
}
h1, h2, h3, h4, h5, h6, h7, form, table, div, p, ul {
    margin: 0;
    padding: 0;
}
ul li {
    list-style-type: none inside;
    font-size: 12px;
}


/** Initialize main inline elements. */
strong img {
    margin: 0;
    padding: 0;
}
strong {
    font-weight: bold;
}
img {
    border: none;
}


/** Common classes. */
a.link {
    text-decoration: underline;
    color: #3978B7;
    cursor: pointer;
}
a.link:hover {
    text-decoration: none;
    color: #CC6600;
}
strong.required {
    font-weight: bold;
    color: #FE9900;
}
ul.errorlist {
    font-weight: bold;
    color: #FF0000;
}
table.django_form_as_table {
    width: 660px;
    font-size: 12px;
}
table.django_form_as_table th {
    width: 200px;
    background-color: #F3F3F3;
}
table.django_form_as_table td {
    background-color: #F0F7FD;
}
table.django_form_as_table p.help_text {
    color: #999999;
}
table.django_form_as_table td.last_tr {
    text-align: center;
    background-color: #F3F3F3;
}
table.django_form_as_table input.text {
    width: 150px;
}
table.django_form_as_table input.password {
    width: 150px;
}
table.django_form_as_table textarea {
    width: 350px;
    height: 180px;
}
h2.page_title {
    width: 100%;
    height: 36px;
    /* backgroundによる背景画像指定はHTMLへ直接記述すること */
}
div.complete_page_content p {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 14px;
}
div.static_content {
    position: absolute;
    top: 40px; /* タイトル用のh2の幅分下へずらす */
    left: 5px;
    width: 97%;
    height: 490px; /* 大体 #content.height - self.top */
    overflow-y: scroll;
}
div.static_content h5 {
    margin-top: 10px;
    width: 100%;
    border-bottom: 1px dotted #96BBDD;
    font-size: 18px;
    color: #96BBDD;
}
div.static_content h6 {
    margin-top: 5px;
    border-bottom: 1px dotted #3978B7;
    font-size: 14px;
    color: #3978B7;
}
div.static_content p {
    margin-top: 5px;
    font-size: 12px;
}
div.static_content ul {
    margin-top: 5px;
    font-size: 12px;
}
div.static_content strong {
    font-weight: bold;
}


/** Layouts. */
#container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    /* widthの値を変更する場合は、JS側の RootBox / MainBox / AdminBox / TabbarBox の値も変更すること */
    width: 900px;
    height: 650px; /* = #header.height + #content.height + #footer.height */
    background: url('/media/img/body_bg_inner.jpg');
    background-repeat: repeat-y;
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 86px;
    background: url('/media/img/header_bg.jpg');
}
#header #logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 50px;
    background: url('/media/img/logo.jpg');
}
#header #submenu_top {
    position: absolute;
    bottom: 0px;
    right: 325px;/* = #submenu_news.(width + right) */
    width: 50px;
    height: 30px;
    background: url('/media/img/btn_submenu_top.jpg');
}
#header #submenu_top:hover {
    background-position: left bottom;
}
#header #submenu_news {
    position: absolute;
    bottom: 0px;
    right: 265px;/* = #submenu_contact_us.(width + right) */
    width: 60px;
    height: 30px;
    background: url('/media/img/btn_submenu_news.jpg');
}
#header #submenu_news:hover {
    background-position: left bottom;
}
#header #submenu_contact_us {
    position: absolute;
    bottom: 0px;
    right: 200px;/* = #submenu_rule.(width + right) */
    width: 65px;
    height: 30px;
    background: url('/media/img/btn_submenu_contact_us.jpg');
}
#header #submenu_contact_us:hover {
    background-position: left bottom;
}
#header #submenu_rule {
    position: absolute;
    bottom: 0px;
    right: 130px;/* = #submenu_policy.(width + right) */
    width: 70px;
    height: 30px;
    background: url('/media/img/btn_submenu_rule.jpg');
}
#header #submenu_rule:hover {
    background-position: left bottom;
}
#header #submenu_policy {
    position: absolute;
    bottom: 0px;
    right: 10px;
    width: 120px;
    height: 30px;
    background: url('/media/img/btn_submenu_policy.jpg');
}
#header #submenu_policy:hover {
    background-position: left bottom;
}
#header #submenu_user_edit {
    position: absolute;
    top: 25px;
    right: 100px;
    width: 102px;
    height: 20px;
    background: url('/media/img/btn_user_edit.gif');
}
#header #submenu_user_edit:hover {
    background-position: left bottom;
}
#header #logoutform_container {
    position: absolute;
    top: 25px;
    right: 10px;
}
#header #noscript_notice {
    position: absolute;
    top: 10px;
    left: 200px;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #FF0000;
}

#content {
    position: absolute;
    top: 86px; /* = #header.height */
    left: 0;
    width: 100%;
    /* heightの値を変更する場合は、JS側の RootBox / MainBox / AdminBox / TabbarBox の値も変更すること */
    height: 540px;
    z-index: 100; /* TabBox用 */
}
#content #loginform_container {
    position: absolute;
    top: 0;
    left: 10px;
}
#content #left_column #add_clips_container {
    position: absolute;
    top: 210px;
    left: 33px;
}
#content #left_column #to_release_note {
    position: absolute;
    top: 240px;
    left: 20px;
    font-size: 14px;
}
#content #main_content {
    position: absolute;
    top: 0;
    left: 225px;
    width: 660px;
    height: 540px; /* = #content.header */
}

#footer {
    position: absolute;
    top: 626px; /* = #content.top + #content.height */
    left: 0;
    width: 100%;
    height: 24px;
    text-align: center;
    background: url('/media/img/body_bg_bottom.jpg');
    background-position: left bottom;
    background-repeat: no-repeat;
    font-size: 10px;
    color: #999999;
}
#footer a {
    font-weight: bold;
    color: #999999;
    text-decoration: none;
}


/** Pages. */
/** Welcome page. */
div.welcome_page {
    position: absolute;
    width: 660px;
    height: 500px;
    background-image: url('/media/img/img_welcome.jpg');
}
div.welcome_page h5 {
    font-size: 12px;
    font-weight: bold;
    color: #94B9DD;
}
#sign_up_right_now {
    position: absolute;
    top: 440px;
    left: 310px;
    width: 152px;
    height: 37px;
    z-index: 100;
    background: url('/media/img/btn_sign_up_right_now.gif');
}
#sign_up_right_now:hover {
    background-position: left bottom;
}
#sign_up_demo {
    position: absolute;
    top: 440px;
    left: 480px;
    width: 152px;
    height: 37px;
    z-index: 100;
    background: url('/media/img/btn_sign_up_demo.gif');
}
#sign_up_demo:hover {
    background-position: left bottom;
}