@charset "UTF-8";


#indexCompartment #body {
    margin-top: 15px;
    margin-bottom: 34px;
}

#indexCompartment #body #logoHolder{
    height: 508px;
    position: relative;
}

#indexCompartment #body #logoHolder #logo {
    position: absolute;
    width: 394px;
    height: 114px;
    top: 32px;
    left: 30px;
}
#indexCompartment #body #logoHolder #copy {
    position: absolute;
    width: 138px;
    height: 20px;
    top: 190px;
    left: 32px;
}

#indexCompartment #body div.startButton {
    padding: 0 30px;
    margin-bottom: 86px;
}

#indexCompartment #body div.startButton div.button {
    height: 60px;
    background-image: url('../../img/start-button_on.png');
    background-position: 0 0;
    background-repeat: no-repeat;
}

#indexCompartment #body div.startButton div.button a {
    display: block;
    height: 60px;
    background-image: url('../../img/start-button_off.png');
    background-position: 0 0;
    background-repeat: no-repeat;
}
#indexCompartment #body div.startButton div.button.continue {
    height: 60px;
    background-image: url('../../img/continue-button_on.png');
    background-position: 0 0;
    background-repeat: no-repeat;
}

#indexCompartment #body div.startButton div.button.continue a {
    display: block;
    height: 60px;
    background-image: url('../../img/continue-button_off.png');
    background-position: 0 0;
    background-repeat: no-repeat;
}

#indexCompartment #body div.startButton div.button a:hover {
    background-image: none;
    background-position: 0 0;
    background-repeat: no-repeat;
}

#indexCompartment #body div.lead {
    padding: 0 30px;
}

#indexCompartment #body div.lead p {
    font-size: 14px;
    margin-bottom: 65px;
}

#indexCompartment #body div.contents {
    padding: 0 30px;
}
#indexCompartment #body div.contents p {
    text-align: right;
    padding-bottom: 20px;
}

#indexCompartment #body div.contents a {
    color: #333333;
    /* border-bottom: 1px solid #333333; */
}
#indexCompartment #body div.contents a:hover {
    color: #999999;
    /* border-bottom: 1px solid #999999; */
}




#contentsCompartment #body div.puzzleList {
    
}

#contentsCompartment #body div.puzzleList ul li {
    display: block;
    height: 50px;
    background-image: url('../../img/paper_middle_on.png');
    background-position: 0 0;
    background-repeat: repeat-y;
    border-top: 1px solid #cccccc;
    /margin-top: -3px;
}

#contentsCompartment #body div.puzzleList ul li a {
    color: #333333;
}
#contentsCompartment #body div.puzzleList ul li a:hover span.link {
    color: #333333;
    /* border-bottom: 1px solid #333333; */
}

#contentsCompartment #body div.puzzleList ul li.checked a,
#contentsCompartment #body div.puzzleList ul li.bookmark a {
    color: #999999;
}
#contentsCompartment #body div.puzzleList ul li.checked a:hover span.link,
#contentsCompartment #body div.puzzleList ul li.bookmark a:hover span.link {
    color: #999999;
    /* border-bottom: 1px solid #999999; */
}

#contentsCompartment #body div.puzzleList ul li a {
    position: relative;
    display: block;
    padding: 0 15px;
    height: 50px;
    background-image: url('../../img/paper_middle.png');
    background-position: 0 0;
    background-repeat: repeat-y;
}
#contentsCompartment #body div.puzzleList ul li a span.text {
    display: block;
    height: 50px;
    line-height: 50px;
}

#contentsCompartment #body div.puzzleList ul li a span.icon {
    position: absolute;
    display: block;
    width: 36px;
    height: 36px;
    top: 7px;
    right: 15px;
}

#contentsCompartment #body div.puzzleList ul li.checked a span.icon {
    background-image: url('../../img/checked-icon.png');
    background-position: 0 0;
    background-repeat: no-repeat;
}

#contentsCompartment #body div.puzzleList ul li.bookmark  a span.icon {
    background-image: url('../../img/bookmark-icon.png');
    background-position: 0 0;
    background-repeat: no-repeat;
}

#contentsCompartment #body div.puzzleList ul li a:hover {
    background-image: none;
}

#contentsCompartment #body div.puzzleList ul li.first {
    background-image: url('../../img/paper_top_on.png');
    background-position: 0 0;
    background-repeat: no-repeat;
    border: 0;
    /margin-top: 0px;
}

#contentsCompartment #body div.puzzleList ul li.first a {
    background-image: url('../../img/paper_top.png');
    background-position: 0 0;
    background-repeat: no-repeat;
}

#contentsCompartment #body div.puzzleList ul li.first a:hover {
    background-image: none;
}

#contentsCompartment #body div.puzzleList ul li.last {
    background-image: url('../../img/paper_bottom_on.png');
    background-position: 0 0;
    background-repeat: no-repeat;
}

#contentsCompartment #body div.puzzleList ul li.last a {
    background-image: url('../../img/paper_bottom.png');
    background-position: 0 0;
    background-repeat: no-repeat;
}

#contentsCompartment #body div.puzzleList ul li.last a:hover {
    background-image: none;
}

#detailCompartment #body div.question {
    padding: 0 15px;
}
#detailCompartment #body div.question div.title {
    margin-bottom: 13px;
    border-bottom: 1px solid #cccccc;
}
#detailCompartment #body div.question div.title p {
    word-wrap: break-word;
    font-size: 22px;
    line-height: 22px;
    font-weight: bold;
    padding-top: 5px;
    padding-bottom: 15px;
}

#detailCompartment #body div.question div.body {
    padding-bottom: 15px;
}
#detailCompartment #body div.question div.body p {
    word-wrap: break-word;
    line-height: 1.4em;
}

#detailCompartment #body div.question div.image {
    padding-bottom: 15px;
}

#detailCompartment #body div.question div.image p {
    text-align: center;
}

#detailCompartment #body div.socialButtons {
    padding: 0 15px;
    height: 35px;
}

#detailCompartment #body div.solutionButton {
    padding: 0 15px;
    padding-bottom: 5px;
}

#detailCompartment #body div.solutionButton div.button {
    height: 60px;
    background-image: url('../../img/solution-button_open_on.png');
    background-position: 0 0;
    background-repeat: no-repeat;
}

#detailCompartment #body div.solutionButton div.button a {
    display: block;
    height: 60px;
    background-image: url('../../img/solution-button_open_off.png');
    background-position: 0 0;
    background-repeat: no-repeat;
}
#detailCompartment #body div.solutionButton div.button.opened {
    height: 60px;
    background-image: url('../../img/solution-button_close_on.png');
    background-position: 0 0;
    background-repeat: no-repeat;
}

#detailCompartment #body div.solutionButton div.button.opened a {
    display: block;
    height: 60px;
    background-image: url('../../img/solution-button_close_off.png');
    background-position: 0 0;
    background-repeat: no-repeat;
}

#detailCompartment #body div.solutionButton div.button a:hover {
    background-image: none;
}

#detailCompartment #body div.solutionHolder {
    display: none;
}

#detailCompartment #body div.solution {
    padding: 0 15px;
    padding-bottom: 10px;
    margin-top: 25px;
}

#detailCompartment #body div.solution div.body {
    padding-bottom: 15px;
}
#detailCompartment #body div.solution div.body p {
    word-wrap: break-word;
    line-height: 1.4em;
}

#detailCompartment #body div.solution div.image {
    padding-bottom: 15px;
}

#detailCompartment #body div.solution div.image p {
    text-align: center;
}

#detailCompartment #body div.solution div.bibliographyHolder {
    margin-bottom: 10px;
}
#detailCompartment #body div.solution div.bibliography {
    float: right;
}
#detailCompartment #body div.solution div.bibliography p {
    font-size: 12px;
    line-height: 1.4em;
}
#detailCompartment #body div.solution div.bibliography div.label {
    float: left;
}

#detailCompartment #body div.solution div.bibliography div.detail {
    float: left;
    word-wrap: break-word;
    max-width: 340px;
    margin-left: 15px;
}

#detailCompartment #body div.comment {
    padding: 0 15px;
    background-image: url('../../img/paper_middle_cmt.png');
    background-position: 0 0%;
    background-repeat: repeat-y;
}
#detailCompartment #body div.comment div.title {
    padding-top: 28px;
    padding-bottom: 18px;
    font-weight: bold;
}
#detailCompartment #body div.comment div.cmts {
    border-bottom: 1px solid #cccccc;
}
#detailCompartment #body div.comment div.cmt {
    padding: 13px 0;
    border-top: 1px solid #cccccc;
    font-size: 12px;
}

#detailCompartment #body div.comment div.cmt a {
    color: #666666;
    /* border-bottom: 1px solid #666666; */
}
#detailCompartment #body div.comment div.cmt a:hover {
    color: #888888;
    /* border-bottom: 1px solid #888888; */
}
#detailCompartment #body div.comment div.cmt div.userInfo {
    word-wrap: break-word;
    line-height: 18px;
}
#detailCompartment #body div.comment div.cmt div.msg {
    word-wrap: break-word;
    padding-top: 8px;
    line-height: 20px;
}

#detailCompartment #body div.comment div.cmt span.date {
    color: #999999;
}

#detailCompartment #body div.comment div.form form table {
    width:100%;
}

#detailCompartment #body div.comment div.form div.error-message {
    padding-top: 5px;
}

#detailCompartment #body div.comment div.form form table tr th {
    padding-top:5px;
    padding-bottom:5px;
    padding-right:5px;
    width: 57px;
    font-size: 12px;
}

#detailCompartment #body div.comment div.form form table tr.name th {
    vertical-align:middle;
}

#detailCompartment #body div.comment div.form form table tr.comment th {
    vertical-align:top;
    padding-top:15px;
}

#detailCompartment #body div.comment div.form form table tr td {
    padding-top:5px;
    padding-bottom:5px;
    width: 393px;
    font-size: 12px;
}

#detailCompartment #body div.comment div.form form table tr.name td div.input {
    display:inline-block;
    width:196px;
    background-image:url('../../img/cmt-form_name_bg.png');
    background-repeat: no-repeat;
}

#detailCompartment #body div.comment div.form form table tr.name td div.input input {
    border:0;
    width:191px;
    height:24px;
    line-height:24px;
    padding-left:3px;
    padding-right:2px;
    background-color:transparent;
    font-size: 12px;
    /* iphone */
    -webkit-border-radius: 0;
    -webkit-appearance: none;
}

#detailCompartment #body div.comment div.form form table tr.comment td div.input {
    background-image: url('../../img/cmt-form_comment_bg.png');
    background-repeat: no-repeat;
}

#detailCompartment #body div.comment div.form form table tr.comment td div.input textarea {
    border:0;
    width:388px; /* 393 */
    height:95px; /* 100 */
    padding:3px 3px 2px 2px;
    background-color:transparent;
    font-size: 12px;
    resize: vertical;
    /* iphone */
    -webkit-border-radius: 0;
    -webkit-appearance: none;
}

#detailCompartment #body div.comment div.QapTcha {
    margin-top: 0;
    width: 240px;
}

#detailCompartment #body div.comment div.form form table tr.button div.writeButton {
    width: 190px;
    height: 40px;
    padding-bottom: 15px;
    background-image: url('../../img/cmt-form_write-button_on.png');
    background-position: 0 0;
    background-repeat: no-repeat;
}

#detailCompartment #body div.comment div.form form table tr.button div.writeButton a {
    display: block;
    width: 190px;
    height: 40px;
    background-image: url('../../img/cmt-form_write-button_disabled.png');
    background-position: 0 0;
    background-repeat: no-repeat;
    cursor: default;
}

#detailCompartment #body div.comment div.form form table tr.button div.writeButton a.enable {
    background-image: url('../../img/cmt-form_write-button_off.png');
}

#detailCompartment #body div.comment div.form form table tr.button div.writeButton a.enable:hover {
    background-image: none;
    cursor: pointer;
}

#detailCompartment #body div.paperBox div.boxFooter.comment {
    height: 10px;
    background-image: url('../../img/paper_bottom_cmt.png');
    background-position: 0 100%;
    background-repeat: no-repeat;
}

#detailCompartment div.solutionMaterial {
    display: none;
}