@font-face {
    font-family: made;
    src: url('made.eot');
    src: url('made.eot?iefix'),
         url('made.ttf') format('truetype');
}
@font-face {
    font-family: 'icomoon';
    src: url('icomoon.eot');
    src: url('icomoon.eot?iefix') format('embedded-opentype'),
         url('icomoon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html {
    overflow-y: scroll;
}
body {
    margin: 0 0 50px 0;
    font-family: georgia, serif;
    color: #eee;
    font-size: 13px;
    line-height: 1.8;
    background: url(../images/won-tile-dark.jpg) #000 fixed;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}
a {
    color: #eee;
}
h1 {
    margin: -10px 0 20px 0;
    font-family: georgia, serif;
    font-size: 36px;
    font-weight: normal;
    text-shadow: #000 5px 5px;
}
h1.roman {
    font-family: made, georgia, serif;
}
h2 {
    font-size: 20px;
    margin: 20px 0;
}
p,
.para {
    margin: 16px 0 0 0;
}
table {
    border-collapse: collapse;
}
td {
    padding: 0;
}
img,
td {
    vertical-align: top;
}
embed, object {
    outline: 0;
}
.rtl {
    direction: rtl;
}

h1.bigger {
    font-size: 40px;
}
h2.bigger {
    font-size: 24px;
}
p.bigger {
    font-size: 16px;
}

#headnavi {
    background: #811;
    border-bottom: solid 1px #c11;
    font-family: tahoma, arial, helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
}
#headnavi a {
    color: #eee;
    text-decoration: none;
}
#headnavi a:hover {
    background: #eee;
    color: #811;
}

.navi {
    width: 920px;
    margin: 40px auto 0 auto;
    border: solid #777;
    border-width: 1px 0;
    font-family: arial, sans-serif;
    font-size: 36px;
    text-align: center;
    text-shadow: #000 5px 5px;
    color: #e11;
}
.navi a {
    font-family: made, georgia, serif;
    color: #e11;
    text-decoration: none;
    -moz-transition-property: color;
    -moz-transition-duration: 0.4s;
    -moz-transition-timing-function: ease-in-out;
    -webkit-transition-property: color;
    -webkit-transition-duration: 0.4s;
    -webkit-transition-timing-function: ease-in-out;
    -o-transition-property: color;
    -o-transition-duration: 0.4s;
    -o-transition-timing-function: ease-in-out;
}
.navi a:hover,
.navi a.selected {
    color: #eee;
}

.subnavi {
    margin: 0 0 30px auto;
    max-width: 350px;
    text-align: right;
    color: #aaa;
}
.subnavi a {
    color: #aaa;
}
.subnavi a.selected,
.subnavi a:hover{
    color: #eee;
}

.content {
    width: 550px;
    margin: 40px auto 40px auto;
}

.content .home {
    text-align: center;
    color: #e11;
}
.content h1.home {
    margin: 0;
    font-family: made, georgia, serif;
    font-size: 72px;
}
.content h1.book-release {
    font-family: made, georgia, serif;
    font-size: 72px;
    line-height: 1.2;
    text-align: center;
}
.content p.home {
    margin-top: -5px;
    font-size: 16px;
    font-weight: bold;
    text-shadow: #000 5px 5px;
}
.content img {
    max-width: 100%;
    height: auto;
}

.footer {
    width: 920px;
    height: 20px;
    margin: 0 auto 0 auto;
    border-top: 1px solid #777;
    padding-top: 6px;
    text-align: left;
    color: #aaa;
}
.footer a {
    color: #aaa;
}
.footer a:hover {
    color: #eee;
}
.footer .sep {
    padding: 0 8px;
}
.footer .links {
    float: left;
    line-height: 26px;
}

ul.social {
    float: right;
    display: block;
    margin: 0;
    padding: 0;
    font-size: 18px;
    line-height: 30px;
}
ul.social li {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul.social a {
    color: #fff;
    text-decoration: none;
}
ul.social span {
    font-family: icomoon;
    padding: 6px 16px;
}
ul.social span.icon-fb {
    background-color: #3b5998;
}
ul.social span.icon-fb:before {
    content: "\e605";
}
ul.social span.icon-twtr {
    background-color: #55acee;
}
ul.social span.icon-twtr:before {
    content: "\e606";
}
ul.social span.icon-gplus {
    background-color: #dd4b39;
}
ul.social span.icon-gplus:before {
    content: "\e604";
}
ul.social span.icon-yt {
    background-color: #cd201f;
}
ul.social span.icon-yt:before {
    content: "\e607";
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

.col-set {
    margin-left: -30px;
}
.col-1-2 {
    box-sizing: border-box;
    float: left;
    width: 50%;
    padding-left: 30px;
}

.film-content {
    width: 810px;
    height: 656px;
}
#film-player {
    height: 656px;
}
.film-content object,
.film-content embed {
    background: url('../images/loading.gif') no-repeat center 35%;
}

.game-content {
    width: 600px;
}
.game-container {
    height: 400px;
}

.photo-content {
    width: 720px;
}
#photo-container {
    padding-bottom: 86.111%;
}

.book-slideshow {
    position: relative;
    height: 0;
    margin: 16px 0 0 0;
    padding-bottom: 74%;
    overflow: hidden;
    -webkit-user-select: none;
}

.image-ball {
    position: relative;
}
.image-ball img {
    cursor: pointer;
    border: 1px solid #777;
}
.image-ball img:hover {
    border-color: #eee;
}
.image-ball .image-spec {
    display: none;
}

td.attr-name {
    padding-right: 24px;
    white-space: nowrap;
}

/* slideshow */

.slideshow {
    position: relative;
    overflow: hidden;
}

.slideshow img {
    display: block;
    max-width: 100%;
    height: auto;
}

.slideshow .item-spec {
    display: none;
}
.slideshow .item {
    text-align: center;
    background: url('../images/loading.gif') no-repeat center center;
}

.slideshow-cell {
    position: relative;
}
.slideshow-cell a.link {
    position: absolute;
    left: 0;
    top: 0;
    border-width: 1px;
}

.slideshow a.right,
.slideshow a.left {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    cursor: pointer;
}
.slideshow a.left {
    left: 0;
}
.slideshow a.right {
    right: 0;
}

.slideshow a.right:hover,
.slideshow a.left:hover {
    filter: alpha(opacity=50);
    -khtml-opacity: 0.5;
    opacity: 0.5;
}
.slideshow a.left:hover {
    background: url('../images/slideshow/arrow-left.png') no-repeat center left;
}
.slideshow a.right:hover {
    background: url('../images/slideshow/arrow-right.png') no-repeat center right;
}

@media only screen and (max-width: 919px) {
    .navi,
    .footer {
        width: auto;
    }
    .footer {
        padding-left: 8px;
        padding-right: 8px;
    }
}

@media only screen and (max-width: 729px) {
    .photo-content {
        width: auto;
        margin-left: 8px;
        margin-right: 8px;
    }
}

@media only screen and (max-width: 559px) {
    .content {
        width: auto;
        margin-left: 8px;
        margin-right: 8px;
    }
}

@media only screen and (max-width: 479px) {
    .col-set {
        margin-top: -16px;
        margin-left: 0;
    }
    .col-1-2 {
        float: none;
        width: auto;
        margin-top: 16px;
        padding-left: 0;
    }
}

@media only screen and (max-width: 359px) {
    ul.social,
    .footer .links {
        float: none;
    }
}