/*---------------------------------------------------- * 預設樣式 * * @ 預設的區塊、工具或插件樣式，如需調整請至樣板(template)所屬css檔案進行覆蓋即可 * @ www.mids.com.tw 2014.12.04 *----------------------------------------------------*/ /* 0. Reset / 重置樣式 * normalize.css v3.0.2 | MIT License | git.io/normalize ----------------------------------------------------------------------------------------*/ html {font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}body {margin: 0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {display: block;}audio,canvas,progress,video {display: inline-block; vertical-align: baseline;}audio:not([controls]) {display: none; height: 0;}[hidden],template {display: none;}a {background-color: transparent;}a:active,a:hover {outline: 0;}abbr[title] {border-bottom: 1px dotted;}b,strong {font-weight: bold;}dfn {font-style: italic;}h1 {font-size: 2em; margin: 0.67em 0;}mark {background: #ff0; color: #000;}small {font-size: 80%;}sub,sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}sup {top: -0.5em;}sub {bottom: -0.25em;}img {border: 0;}svg:not(:root) {overflow: hidden;}hr {-moz-box-sizing: content-box; box-sizing: content-box; height: 0;}pre { overflow: auto;}code,kbd,pre,samp {font-family: monospace, monospace; font-size: 1em;}select {padding: 0;}button,input,optgroup,select,textarea {color: inherit; font: inherit; margin: 0;}button {overflow: visible;}button,select {text-transform: none;}button,html input[type="button"],input[type="reset"],input[type="submit"] {-webkit-appearance: button; cursor: pointer;}button[disabled],html input[disabled] {cursor: default;}button::-moz-focus-inner,input::-moz-focus-inner {border: 0; padding: 0;}input {line-height: normal;}input[type="checkbox"],input[type="radio"] {box-sizing: border-box; padding: 0;}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {height: auto;}input[type="search"] {-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}fieldset {border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;}legend {border: 0; padding: 0;}textarea {overflow: auto;}optgroup {font-weight: bold;}table {border-collapse: collapse; border-spacing: 0;}td,th {padding: 0;} /* 1. Mids-default / Mids-預設樣式 ----------------------------------------------------------------------------------------*/ html,body {padding: 0;} html {font-size: 100%; height: 100%;} body {font-size: 13px; letter-spacing: 1px; padding: 0; margin: 0; min-height: 100%; background-color: #EFFBF8;} body {height: 100%;} ul {list-style: none; padding: 0; margin: 0;} ul li {list-style: none; padding: 0; margin: 0;} h1,h2,h3,h4,h5,h6 {font-weight: 700; margin-top: 0; margin-bottom: 0;} p {} span {} a:link,a:visited,a:hover,a:active {text-decoration: none;} a:hover {cursor: pointer;} form .form-control {font-size: 15px;} input[type=checkbox] {vertical-align: middle; top: 4px;} input[type=radio] {top:5px;} .radio-inline input[type=radio] {top: 1px; position: relative;} form span.error {line-height: 20px; display: inline-block; vertical-align:middle; position: relative; background: #d9534f; border-radius: 4px; padding-left: 5px; padding-right: 5px; color: #fff;} form span.error:after {content: ''; position: absolute; top:6px; left:-8px; display: inline-block; border-top: 4px solid rgba(0, 0, 0, 0); border-right: 8px solid #d9534f; border-bottom: 4px solid rgba(0, 0, 0, 0);} form .line-box {position: relative;} form .line-box span.error {position: absolute; top: 45%; right: 0;} form div.form-group {padding-bottom: 15px;} form label.control-label {font-size: 15px;} form label.error { font-weight: 700; font-size: 13px; line-height: 20px; background: #d9534f; border-radius: 4px; padding-left: 5px; padding-right: 5px; color: #fff; margin-top: 5px;} form span.tip-icon {font-size: 13px; color:#d9534f; font-family:"Arial","微軟正黑體",'Open Sans',sans-serif; margin-top: 5px;} form span.tip-icon > i { font-size: 12px; top: 2px; background: #d9534f; color: #fff; padding: 2px; border-radius: 3px; margin-right: 2px;} .checkbox label span {display: inline-block;} .checkbox.position label input[type=checkbox], .checkbox-inline.position label input[type=checkbox], .radio.position label input[type=radio], .radio-inline.position label input[type=radio] {position: absolute;} .required {color: red;} form h1.heading-title {padding-bottom: 20px; border-bottom: solid 2px #4fa9c6; margin-bottom: 30px; display: block; margin-left: -15px; margin-right: -15px;} /** * Frame */ #loader {position: fixed; top: 0; left:0; width: 100%; height: 100%; background:#fff url('loader.png') no-repeat scroll center center; z-index: 99999; text-align: center;} #header,#menu {width:100%; position: relative;} #header_main {width: 960px; position: absolute; bottom: 15px;} #btn_start {position: absolute; bottom: 15px; z-index: 1;} nav { text-align: center; font-family: Raleway; min-height: 1px; } .navbar {margin-bottom: 0;} .navbar-nav {float: none;} .navbar-nav > li {float: none;} .navbar-default {background-color: transparent; border-color:transparent;} .nav > li > a.link-1 { transition: 0.3s ease; background: #3fa46a; color: #ffffff; font-size: 16px; text-decoration: none; border-top: 4px solid #3fa46a; border-bottom: 4px solid #3fa46a; margin: 0 20px; } .nav > li > a.link-1:hover { color: #ffffff; border-top: 4px solid #ffffff; border-bottom: 4px solid #ffffff; padding: 6px 0; } .navbar-default .navbar-toggle .icon-bar {background-color: #fff;} @media (min-width: 768px) { nav {padding: 24px;} .nav > li > a.link-1 { transition: 0.3s ease; background: #3fa46a; color: #ffffff; font-size: 20px; text-decoration: none; border-top: 4px solid #3fa46a; border-bottom: 4px solid #3fa46a; padding: 20px 0; margin: 0 20px; display: inline; } .navbar-nav > li {display: inline-block;} } #menu {box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); background: #3fa46a;} #menu.qa {position: fixed; width: 100%; z-index: 1;} #main {width: 100%; position: relative;} #main .page_container {padding: 15px 0;} #main .page_container h1 { padding: 30px 0; text-align: center; font-weight: 500; font-size: 3em; color: rgba(0,0,0, 0.8); text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def; } /* Don't show shadows when selecting text */ ::-moz-selection { background: #5af; color: #fff; text-shadow: none; } ::selection { background: #5af; color: #fff; text-shadow: none; } #footer {background-color: #00a973; width: 100%;} #header_main img, #btn_start img, #menubar li img, #footer img {width: 100%;} .bg {width: 100%;} .fancybox-skin {padding: 0 !important;} .fancybox-inner {overflow:visible !important;} .pagination-box {padding: 15px 0;} /* home */ #home #btn_home {position: absolute; top: 534px; left: 470px; z-index: 1;} #home #btn_start {top: 360px; right: 495px; bottom: auto; z-index: 1;} #home #btn_home img {width: 100%;} /* page frame */ #container {width: 800px; padding-top: 40px; padding-bottom: 40px;} /* blog */ ul.articles {padding: 30px 0 15px 0; font-size: 16px;} ul.articles li {line-height: 20px; display: block; padding-bottom:15px; } ul.articles li span, ul.articles li a {display: inline-block;} ul.articles li span {background-color: gold; padding: 0 10px; margin-right: 10px;} ul.articles li a {color: #333;} #article {padding-top: 30px; padding-bottom: 30px; font-size: 16px;} #article h2 {padding-bottom: 20px; font-size: 21px;} #article p {font-size: 16px;} #article img {max-width: 100%;} #article .date {display: block; color: #fff; padding-bottom: 10px;} #article .description { padding-bottom: 30px;} #article .btn_box {padding-top: 15px; border-top: solid 3px darkolivegreen;} /* qa */ #qa_container {position: relative;} .icon-btn {position: absolute;} .icon-btn img {width: 100%;} .qa_question {padding:0; font-size: 16px; max-width: 480px;} .qa_question h2 {line-height: 1.5em; font-weight: 500; background-color: #449d44; border-bottom: solid 1px #398439; color: #fff; padding: 15px; display: block;} .qa_question .answer_box {padding:0 15px 15px 15px;} .qa_question .answers {padding-bottom: 15px; padding: 10px 0;} .qa_question .tip_description {display: none; padding: 10px; color: #fff; background-color: #ec971f; border-color: #d58512; border-radius: 4px;} .qa_please {position: absolute; bottom: 100%; left: 0; width: 100%;} .qa_success {width: 100%;} span.msg {display: inline-block; padding-left: 10px;} span.msg.error { color: #c9302c;} span.msg.success {color: #449d44;} span.msg i {vertical-align: middle;} .qa_help_btn {position: absolute; top: 0; left: 100%; display: block;} /* join */ #join_wrap {padding: 30px;} .join_desc {padding-top: 10px; padding-left: 1.5em;} .join_desc li {list-style-type:disc;} /* knowledge */ #knowledge_category { padding-bottom: 15px; border-bottom: solid 3px darkolivegreen;} #knowledge_category li {float: left; display: block; padding: 15px 15px 0 0;} #knowledgr_container {font-size: 16px;} #knowledgr_container .knowledge_list { padding: 30px 0; border-bottom: dotted 1px #aaa;} #knowledgr_container .knowledge_list h2 { font-weight: 500; padding-bottom: 10px; line-height: 30px;} #knowledgr_container .knowledge_list .answer_text {} #knowledgr_container .knowledge_list .answer {color:#333;} #knowledgr_container .knowledge_list .right_answer {color: #d9534f;} #knowledgr_container .knowledge_list .tip_description { padding: 10px; color: #556b2f; background-color: #fff; border:solid 2px #556b2f; border-radius: 4px; margin-top: 15px;} /* page */ #container-wrapper.page { padding-top: 178px; min-height: 970px; background: url('../images/bg_page_wrapper.jpg') scroll no-repeat; position: relative;} /* scroll hacks */ .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {width: 16px !important; background: rgba(0,0,0,.6);} .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar:hover, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar:active {background: rgba(168,168,168,.8);} .flag-icon {position: absolute; right: 0; top: 0;} .c-b {color: rgb(11, 126, 119);} .type-warning {} .type-warning .modal-header {font-size: 16px; font-weight: 700; background-color: #d9534f; color: #FFF; border-radius:6px 6px 0 0;} .type-warning .modal-header i { font-size: 21px; top:6px; } .type-success {} .type-success .modal-header {font-size: 16px; font-weight: 700; background-color: #5cb85c; color: #FFF; border-radius:6px 6px 0 0;} .type-success .modal-header i { font-size: 21px; top:6px;} #blogs {font-size: 16px; font-weight: 700;} #blogs img {max-width: 100%; margin-bottom: 10px;} #blogs p {padding-left: 15px; line-height: 25px; margin-bottom: 10px;} .c-red {color:red;} .like-msg {margin-top:10px; padding-left: 168px; padding-top: 75px; padding-bottom: 30px; background: url('../images/like_msg.png') no-repeat scroll center left;} #locked { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #000; opacity: .2;} #locked-msg { font-size: 15px; font-weight: 700; padding: 10px 0; position: fixed; top: 45%; width: 300px; text-align: center; background: #3b5998; color: #fff; border-radius: 5px; border: solid 1px #335998; left: 50%; margin-left: -150px;} #viewer {position: absolute; } #viewer span {display: inline-block; margin:0 5px; background-color: #222; padding: 3px 10px; border-radius: 3px; color: #fff;} /** * blog */ #blog {font-family:"Arial","微軟正黑體", "新細明體", 'Open Sans',sans-serif; font-size: 14px;} #blog h2 {margin: 10px 0; font-weight: normal;} #blog ul {padding-left: 20px;} #blog ul li {list-style-type:decimal; padding: 15px 0; border-bottom: solid 1px #aaa;} #blog ul li li {list-style-type:none;} /** * page_description */ #page_description {font-family:"Arial","微軟正黑體", "新細明體", 'Open Sans',sans-serif; font-size: 14px;} #page_description h2 {margin: 10px 0; font-weight: normal;} #page_description ul {padding-left: 20px;} #page_description ul li {list-style-type:decimal; padding: 3px 0;} #page_description ul li li {list-style-type:none;} .desc_container {padding: 30px; background: #FFF; margin-bottom: 30px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); min-height: 400px; border-radius: 5px;} #game_desc {padding: 15px; max-width: 400px;} #game_desc h2 {text-align: center; padding-bottom: 10px; padding-top: 10px; font-size: 21px;} #desc_cont {padding: 5px; border: solid 1px; background-color: #449d44; color:#fff;} #start_desc {text-align: center; padding: 5px; font-size: 16px;}