@charset "utf-8"; /* CSS Document */ .title span { font-size: 24px; color: #a31022; background: #FFFFFF; text-align: center; width: 265px; margin-top: -10px; display: block; margin: -15px auto 0; } .title { background: #a9a9a9; height: 1px; margin-top: 70px; width: 100%; float: left; margin-bottom: 40px; } .title .line { text-align: center; } ul.result { font-size: 18px; line-height: 30px; margin-top: 25px; background: #f3f3f3; padding-bottom: 15px; padding-left: 20px; padding-top: 15px; } ul.resultdetail { font-size: 14px; line-height: 22px; margin-top: 25px; text-align: left; } ul.resultdetail li { background: url(/image/travelguide/culture/zodiac/list-background.png) no-repeat left 10px; padding-left: 20px; margin-bottom: 25px; } ul.result li img { margin-left: 70px; } ul.result li span.red { color: #a31022; } ul.result li span.gray { color: #727171; } .searchinfo { font-size: 18px; color: #14579b; } .yourname { font-size: 18px; margin-top: 15px; margin-left: -15px; } input { background: #fff; border: 1px solid #D1D1D1; color: #545454; font-size: 14px; padding: 5px; width: 100%; border-radius: 4px; } .date { margin-top: 15px; font-size: 18px; margin-left: -15px; margin-bottom: 20px; } .date img { margin-top: 10px; } .yourdate { text-align: left; padding-right: 0; } @media(max-width:750px) { .yourname, .date { margin-left: -15px; } .yourdate select { border:1px solid #d1d1d1 !important; padding:8px !important;} .searchName input { padding:8px !important;} .signs { height:auto !important; margin-bottom:25px !important;} .signs a { display: block; overflow: hidden; position:relative;} .signs img { float: left; width:30%; display: block;} .signs .years { position:relative !important; float: right; display: block; width:65% !important; left:auto !important; top:auto !important; padding-top:20px; font-size:16px !important; line-height:30px;} .signName { position:absolute; left:0; bottom:20px; width:30%; text-align:center; font-size:16px!important;} .searchinfo { display: block; line-height:23px;} } select { width: 100%; font-size: 14px; font-weight: normal; padding: 5px; } .searchtool { background: #f3f3f3; padding: 15px; margin-top: 15px; margin-bottom: 40px; } .searchbutton { font-size: 14px; display: block; margin-top: 25px; overflow: hidden } .words { text-align: right; font-size: 13px; } .signs { text-align: left; margin-top: 25px; margin-bottom: 25px; } .signs span.animals { color: #a31022; text-align: center; font-size: 25px; font-weight: normal; } .pic img { margin-top: 20px; } .pic p { padding-left: 115px; padding-right: 115px; margin-top: 20px; } .pic span a { text-decoration: underline; color: #0f76ea; } .pic span { margin-bottom: 30px; } h2 { font-size: 22px; color: #545454; } .searchBtn { display: block; text-align: right; } .search span.test { text-align: center; font-size: 15px; font-weight: normal; } .name { text-align: right; font-size: 18px; height: 30px; margin-bottom: 20px; margin-top: 30px; } .infoinput { background: url(/image/travelguide/culture/zodiac/compatibility-test-bg.png) no-repeat 80px; padding-top: 95px; height: 515px; } .signName { color: #ad1818; font-size: 20px; display: block; } .signs { height: 210px; text-align: center; margin: 0; position: relative; display: block; } .signs img { display: inline-block !important; } .signs a { text-decoration: none; } .signs .years { position: absolute; font-size: 12px; width: 130px; height: 80px; top: 90px; left: 50px; display: block; } @media(max-width:750px) { .signs { margin-bottom: 10px; height: 230px; text-align: center; } .signs .years { top: 110px; left: calc(50% - 65px); } .infoinput { background: none; } } .compatibilitytest { text-align: center; } .compatibilitytest h1 { color: #a31022; text-align: center; font-size: 30px; border-bottom: none; font-weight: normal; background: url(/image/travelguide/culture/zodiac/compatibility-heart.png) no-repeat right; height: 150px; padding-top: 105px; margin-bottom: 20px; margin-top: 0; } .result { margin-bottom: 60px; } span.resultred { color: #a31022; } .resultbg { font-size: 16px; padding-top: 60px; background: url(/image/travelguide/culture/zodiac/top.jpg) no-repeat; padding-right: 45px; margin: auto -15px !important; padding-bottom: 40px; width: 780px; } .testresult { margin-top: 10px; height: 75px; } .testresult img { margin-left: 100px; } .testresult p { width: 500px; margin-left: 100px; margin-top: -45px; } .resultdetail { text-align: left; font-size: 13px; color: #898989; padding-left: 90px; padding-right: 40px; margin-top: 35px; } .resultbg p { color: #919191; font-size: 14px; } .compatibilityresult { text-align: center; margin-left: 0; margin-right: 0; } .compatibilityresult h1 { color: #595757; text-align: center; font-size: 25px; border-bottom: none; font-weight: normal; background: url(/image/travelguide/culture/zodiac/compatibility-heart.png) no-repeat right; height: 150px; padding-top: 105px; margin-bottom: 60px; margin-top: 0; padding-right: 85px; } .resultname { border-top: 1px solid #c6c6c6; padding-bottom: 20px; padding-top: 20px; } .customername { text-align: center; font-size: 15px; } .birthdate { font-size: 14px; padding-top: 10px; text-align: center; } .lunardate { font-size: 11px; } .personality { font-size: 14px; text-align: center; } .personality a { color: #4f9bf0; text-decoration: underline; } .resulttitle { font-size: 14px; text-align: left; } .personalitydetail { font-size: 14px; text-align: left; } .detailmiddle { background: url(/image/travelguide/culture/zodiac/mid.jpg) repeat-y; margin: auto -15px !important; padding: 0 50px; } .detailbottom { background: url(/image/travelguide/culture/zodiac/bottom.jpg) no-repeat; margin: auto -15px !important; background-size: 100%; } .resultnamelast { padding-bottom: 70px; padding-top: 20px; border-bottom: none; } .button img { margin-top: 60px; } .zodiacsearch { background: url(/image/travelguide/culture/zodiac/zodiac-search-bg.jpg); } .heart { text-align: right; } .resultinfo { height: 75px; text-align: left; padding-top: 25px; } @media(max-width:750px) { .testresult { background: none; } .resultbg, .detailmiddle, .detailbottom { margin: 0 !important } } @media(min-width:1024px) { .zodiacsearchbutton { margin-top: 25px; } } .searchName { padding-right:0;} .searchName input { text-transform: capitalize} .zodiacCalculator { border-radius:4px; box-shadow:0 0 5px #d1d1d1; display: block; padding:20px;}