/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

/*common class*/
.clr{clear:both;}
.margin05em{margin:0.5em;}
.margin1em{margin:1em;}
.marginleft1em{margin-left:1em;}
.marginright05em{margin-right:0.5em;}
.marginright1em{margin-right:1em;}

.margintop05em{margin-top:0.5em;}
.margintop1em{margin-top:1em;}
.margintop05em{margin-top:0.5em;}
.margintop2em{margin-top:2em;}
.marginbottom1em{margin-bottom:1em;}
.paddingtop2em{padding-top:2em;}
.paddingbottom1em{padding-bottom:1em;}

.pull-left{float:left;}
.pull-right{float:right;}


/*purple dashboard*/
.memeber_dashboard{width:100%; border:2px solid #c9a063; margin-bottom:5px}
.memeber_dashboard .title_wrapper{width:100%; border-bottom:1px dashed #eac894;}
.memeber_dashboard .title_wrapper .title{float:none!important;width:130px; margin:0 auto!important;  text-align:center; font-weight:bold; margin-top:0em!important; margin-bottom:0.2em!important;}
.memeber_dashboard .title_wrapper .title .icon{width:25px; float:left; font-size:20px; color:#c9a063;}
.memeber_dashboard .title_wrapper .title h3{margin:0em 0.5em!important; font-size:1.1em!important; color:#c9a063!important;padding: 0px 0px 0px 0px!important;}

.memeber_dashboard .login_wrapper{width:90%; margin:0 auto; margin-top:0.3em;}
.memeber_dashboard .login_wrapper .login_info{width:80%; float:left;}
.memeber_dashboard .login_wrapper .login_info .fa-pencil-alt{font-size:20px; color:#c9a063; margin-left:5px;}
.memeber_dashboard .login_wrapper .login_info h1{margin:0;font-size: 1.25em;}
.memeber_dashboard .login_wrapper .login_info p{margin:0;font-size:14px}
.memeber_dashboard .login_wrapper .logout_button .button {background-color: #c9a063; border: none; color: white; padding: 0.2em 0.5em; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; border-radius: 8px; float:right;}

.memeber_dashboard ul {/*list-style-image:url('/20230307114556oe_/https://news.mingpao.com/image/member/star.png');*/ list-style-type: star; list-style-position: outside; margin:0.3em 1em 0 1em; padding-left:15px;}
.memeber_dashboard ul li{line-height:20px; font-size:14px; color:#eac894}
.memeber_dashboard .more_info{width:90%; margin:0 auto;}
.memeber_dashboard .more_info .more_wrap{width:30px; float:right; border-bottom:2px solid #eac894;}
.memeber_dashboard .more_info .more_wrap a{color:#c9a063; font-weight:bold; font-size:14px;}

.memeber_dashboard .tag-keywords{width:90%; margin:0 auto;  margin-top:0.5em;}
.memeber_dashboard .tag-keywords .button-keyword{background-color: #eac894; border: none; color: white; padding: 0.3em 0.5em; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; border-radius: 5px; float:left; margin-right:5px; margin-top:0.3em;}

.memeber_dashboard .ebanner{width:90%; margin:0 auto;  margin-top:0.5em; background-color:#c9a063;}
.memeber_dashboard .other_news_group{width:90%; margin:0.3em auto;}
.memeber_dashboard .other_news_group .other_news_button{width:85px; float:left; margin-right:0.5em;}


/*user nav*/
.content_wrapper{width:100%;}
.content_wrapper .title a{font-size:13px; color:#666666;}
.content_wrapper .title .active{color:#05a294;}

.content_wrapper .nav{width:100%; height:30px;}
.content_wrapper .nav ul li a:hover{color:#000000;}
.content_wrapper .nav ul{padding:0;}
.content_wrapper .nav ul li{list-style:none; float:left; color:#999999;}

.content_wrapper .nav ul li .icons{float:left; margin-right:10px;}
.content_wrapper .nav ul li .active .key-button{font-weight:bold; color:#1aa294; border-bottom:2px solid #c9a063; border-spacing:10px; float:left;}
.content_wrapper .nav ul li .key-button{font-weight:bold; color:#1aa294; border-bottom:1px solid #999999; border-spacing:10px; float:left;}
.content_wrapper .nav ul li .key-button p{margin:0 0 2px 0;}

.content_wrapper .nav ul li .active{font-weight:bold; color:#1aa294; border-bottom:2px solid #c9a063; border-spacing:10px; float:left;}
.content_wrapper .nav ul li .key-button a{color:#1aa294; display:block;}
.content_wrapper .nav ul li .key-button a:hover{color:#158479; border-bottom:2px solid #c9a063;}

/*common headline*/
.content_wrapper .common-headline img{float:left; margin-right:5px; margin-top:2px;}
.content_wrapper .common-headline p{margin:0; font-weight:bold; color:#1AA294;}

/*member custom keyword page*/
.content_wrapper .custom-keyword p{margin-top:0.5em; font-size:15px; color:#333333; line-height:25px;}
.content_wrapper .custom-keyword p a{color:#1aa294;}
.content_wrapper .custom-keyword p a:hover{color:#158479;}

.custom-keyword-wrapper{width:100%; border:2px solid #1AA294;}
.custom-keyword-wrapper .custom-keyword-form{margin:0em 1em 1em 1em;}
.custom-keyword-wrapper .keyword-input-design{float:left; width:47%; margin-left:1em;}
/*.custom-keyword-wrapper .keyword-input-design .keyword-input-fill{width:40px; height:38px; float:left; background-color:#c9a063; color:#ffffff; position:relative; margin-bottom:1.5em;}
.custom-keyword-wrapper .keyword-input-design .keyword-input-fill p{position:absolute; top:10px; left:15px; margin:0;}*/

.custom-keyword-wrapper .keyword-input-design .keyword1{width:210px; padding:0.5em 1em; border:2px solid #1AA294;  background-image:url(/20230307114556oe_/https://news.mingpao.com/image/member/keyword1.jpg); background-repeat:no-repeat; padding-left:55px; margin-top:1.5em;}
.custom-keyword-wrapper .keyword-input-design .keyword2{width:210px; padding:0.5em 1em; border:2px solid #1AA294;  background-image:url(/20230307114556oe_/https://news.mingpao.com/image/member/keyword2.jpg); background-repeat:no-repeat; padding-left:55px; margin-top:1.5em;}
.custom-keyword-wrapper .keyword-input-design .keyword3{width:210px; padding:0.5em 1em; border:2px solid #1AA294;  background-image:url(/20230307114556oe_/https://news.mingpao.com/image/member/keyword3.jpg); background-repeat:no-repeat; padding-left:55px; margin-top:1.5em;}
.custom-keyword-wrapper .keyword-input-design .keyword4{width:210px; padding:0.5em 1em; border:2px solid #1AA294;  background-image:url(/20230307114556oe_/https://news.mingpao.com/image/member/keyword4.jpg); background-repeat:no-repeat; padding-left:55px; margin-top:1.5em;}
.custom-keyword-wrapper .keyword-input-design .keyword5{width:210px; padding:0.5em 1em; border:2px solid #1AA294;  background-image:url(/20230307114556oe_/https://news.mingpao.com/image/member/keyword5.jpg); background-repeat:no-repeat; padding-left:55px; margin-top:1.5em;}
.custom-keyword-wrapper .keyword-input-design .keyword6{width:210px; padding:0.5em 1em; border:2px solid #1AA294;  background-image:url(/20230307114556oe_/https://news.mingpao.com/image/member/keyword6.jpg); background-repeat:no-repeat; padding-left:55px; margin-top:1.5em;}
.custom-keyword-wrapper .keyword-input-design .keyword7{width:210px; padding:0.5em 1em; border:2px solid #1AA294;  background-image:url(/20230307114556oe_/https://news.mingpao.com/image/member/keyword7.jpg); background-repeat:no-repeat; padding-left:55px; margin-top:1.5em;}
.custom-keyword-wrapper .keyword-input-design .keyword8{width:210px; padding:0.5em 1em; border:2px solid #1AA294;  background-image:url(/20230307114556oe_/https://news.mingpao.com/image/member/keyword8.jpg); background-repeat:no-repeat; padding-left:55px; margin-top:1.5em;}
.custom-keyword-wrapper .keyword-input-design .keyword9{width:210px; padding:0.5em 1em; border:2px solid #1AA294;  background-image:url(/20230307114556oe_/https://news.mingpao.com/image/member/keyword9.jpg); background-repeat:no-repeat; padding-left:55px; margin-top:1.5em;}
.custom-keyword-wrapper .keyword-input-design .keyword10{width:210px; padding:0.5em 1em; border:2px solid #1AA294;  background-image:url(/20230307114556oe_/https://news.mingpao.com/image/member/keyword10.jpg); background-repeat:no-repeat; padding-left:55px; margin-top:1.5em;}

.custom-keyword-wrapper .button-wrapper{width:320px; margin:0 auto;}
.custom-keyword-wrapper .button-wrapper .keyword-submit-button{border: none; background:url(/20230307114556oe_/https://news.mingpao.com/image/member/save-button.jpg) no-repeat; padding-left:38px; font-size: 13px; font-weight:bold; color:#ffffff; letter-spacing:1px; width:145px; height:41px; float:left;}
.custom-keyword-wrapper .button-wrapper .keyword-reset-button{border: none; background:url(/20230307114556oe_/https://news.mingpao.com/image/member/reset-button.jpg) no-repeat; padding-left:30px; font-size: 13px; font-weight:bold; color:#ffffff; letter-spacing:1px; width:145px; height:41px; float:right;}

.keyword-remarks{font-size:14px; line-height:25px; letter-spacing:1px;}

/*news alert page*/
.news-alert-wrapper{width:100%; height:800px; border:2px solid #1AA294; overflow: auto;}
.news-alert-wrapper .alert-content-wrapper .alert-content a{text-decoration:underline; color:#666666; font-weight:bold; display:block;}
.news-alert-wrapper .alert-content-wrapper .alert-content .alert-article{font-weight:normal; text-decoration:none; font-size:14px; line-height:22px; margin: 0.5em 0;}
.news-alert-wrapper .alert-content-wrapper .alert-content .alert-function-wrap .date{width:47%; float:left;}
.news-alert-wrapper .alert-content-wrapper .alert-content .alert-function-wrap .delete{width:60px; float:right;}
.news-alert-wrapper .alert-content-wrapper .alert-content .alert-function-wrap .delete a{font-size:14px; color:#1AA294; float:left;}

/*member custom news details page*/
.search-box-wrapper{width:100%;}
.search-box-wrapper .search-box{width:655px; border:2px solid #1AA294;}
.search-box-wrapper .search-box .container hr{display: block; height: 2px; border: 0; border-top: 1px solid #1AA294;  margin: 1em 0; padding: 0;}
.search-box-wrapper .search-box .container input{width:225px; padding:0.3em; border:1px solid #1AA294;}

.search-box-wrapper .search-box .container .keyword-input{width:75%; padding:0.3em; border:1px solid #1AA294; background-color:#ffffff;}
.search-box-wrapper .search-box .container .display-number{width:225px; padding:0.3em; border:1px solid #1AA294; background-color:#ffffff;}


.search-box-wrapper .search-box .container .button-wrapper{width:320px; margin:0 auto;}
.search-box-wrapper .search-box .container .button-wrapper .keyword-submit-button{border: none; background:url(/20230307114556oe_/https://news.mingpao.com/image/member/save-button.jpg) no-repeat; padding-left:38px; font-size: 13px; font-weight:bold; color:#ffffff; letter-spacing:1px; width:145px; height:41px; float:left;}
.search-box-wrapper .search-box .container .button-wrapper .keyword-reset-button{border: none; background:url(/20230307114556oe_/https://news.mingpao.com/image/member/reset-button.jpg) no-repeat; padding-left:30px; font-size: 13px; font-weight:bold; color:#ffffff; letter-spacing:1px; width:145px; height:41px; float:right;}

.keyword-result-wrapper .keyword-result{font-size:15px; color:#000000;}
.keyword-result-wrapper .keyword-result a{color:#c9a063;}
.keyword-result-wrapper .keyword-result-display .title{font-weight:bold; color:#c9a063; text-decoration:underline;}
.keyword-result-wrapper .keyword-result-display .content{font-size:14px; color:#000000; line-height:24px;}

.pagination {display: inline-block; margin-top:1em; margin-bottom:1em;}
.pagination p{color:#000000; font-weight:bold;float:left; margin:0; padding: 8px 0px;}
.pagination a {color: black; float: left; padding: 8px 10px; text-decoration: none;}


/*mingpao member change information*/
.form_wrapper{width:100%;}
.form_wrapper .form_header .title{margin:0; color:#000000; line-height:25px;}
.form_wrapper .form_header .title2{margin:1.5em 0 0 0; color:#000000; line-height:25px;}
.form_wrapper .form_header .title span{font-weight:bold; color:#1BA295; font-size:14px;}
.form_wrapper .form_header .content{margin:0; padding:0; color:#666666; line-height:25px;}
.form_wrapper .form_header .content2{margin:1.5em 0 0 0; padding:0; color:#666666; line-height:25px;}
.form_wrapper .form_header .required{margin:0; color:#1BA295; line-height:25px; font-size:14px;}

.form_wrapper .form_member .fas{color: #1BA295;}
.form_wrapper .form_member .far{font-size:14px; color: #1BA295;}
.form_wrapper .form_member hr{border-top:1px solid #1BA295; margin:1.5em 0em;}

.form_wrapper .form_member .col1{width:48%; float:left; margin-top:0.5em;}
.form_wrapper .form_member .col1 .fill{width:100px; float:left; text-align:right; margin-right:0.5em; color:#666666;}
.form_wrapper .form_member .col1 .input-fill input{width:195px; padding:0.1em 0.2em; border:1px solid #1BA295; float:right;}
.form_wrapper .form_member .col1 .input-fill select{width:202px; padding:0.1em 0.2em; border:1px solid #1BA295; float:left; margin-left:5px; border-radius:0; background-color:#ffffff;}

.form_wrapper .form_member .col2{width:31%; float:right; margin-top:0.7em;}
.form_wrapper .form_member .col2 .fill{width:55px; float:left; text-align:right; margin-right:0.5em; color:#666666;}
.form_wrapper .form_member .col2 .input-fill select{width:108px; padding:0.1em 0.2em; border:1px solid #c9a063; float:left; margin-left:5px;}

.form_wrapper .form_member .checkbox-wrap{margin-top:0.5em; font-weight:bold;}
.form_wrapper .form_member .checkbox-wrap .check{width:25px; display:block; float:left; margin-top:2px;height:17px;}
.form_wrapper .form_member .checkbox-wrap .check-content{width:95%; float:left;}

.form_wrapper .form_member .radio {float:left!important;width:25px!important;height:18px;margin-top:2px}
.form_wrapper .form_member .radio-label{float:left;width:18%;}
.form_wrapper .form_member .radio-group{float:left;width:195px!important;}

.form_wrapper .button-wrapper{width:320px; margin:0 auto; padding:1.5em 0em;}
.form_wrapper .button-wrapper .keyword-submit-button{border: none; background:url(/20230307114556oe_/https://news.mingpao.com/image/member/save-button.jpg) no-repeat; padding-left:38px; font-size: 13px; font-weight:bold; color:#ffffff; letter-spacing:1px; width:145px; height:41px; float:left;}
.form_wrapper .button-wrapper .keyword-reset-button{border: none; background:url(/20230307114556oe_/https://news.mingpao.com/image/member/reset-button.jpg) no-repeat; padding-left:30px; font-size: 13px; font-weight:bold; color:#ffffff; letter-spacing:1px; width:145px; height:41px; float:right;}

/*mingpao memeber bookmark*/
.yellow{color:#F3FF8B;}
.orange{color:#FF7217;}
.red{color:#E74100;}
.white{color:#FFFFFF;}

.bookmark-content-wrapper{width: 100%; height: 800px; border: 2px solid #1AA294; position:relative;}

.bookmark-wrapper span{color:#1AA294;}
.bookmark-wrapper p{margin-top:0.5em; font-size:15px; color:#333333; line-height:25px;}
.bookmark-wrapper .sidenav {height:100%; width: 110px; position:absolute; background-color:#1BA295; overflow-x: hidden;}
.bookmark-wrapper .sidenav p{text-align:center; color:#ffffff; font-weight:bold; margin:5px;}
.bookmark-wrapper .sidenav hr{margin:0; padding:0; display: block; height: 1px; border: 0; border-top: 1px dashed #ffffff;}
.bookmark-wrapper .sidenav a {padding:10px; text-decoration:underline; font-size: 15px; color: #ffffff; font-weight:bold; display:block; text-align:center}
.bookmark-wrapper .sidenav a:hover {color: #f1f1f1;}
.bookmark-wrapper .sidenav  select{width:108px; padding:0.1em 0.1em; border:1px solid #c9a063;}
.bookmark-wrapper .sidenav a.mark {background-color: #96d0b6;}

.bookmark-wrapper .main {width: calc(100% - 110px); height:100%; float:right; overflow:auto;}
.bookmark-wrapper .main .bookmark-content a{text-decoration:underline; color:#666666; font-weight:bold; display:block;}
.bookmark-wrapper .main .bookmark-content a i{background-color: #1BA295;}
.bookmark-wrapper .main .bookmark-content .bookmark-article{font-weight:normal;text-decoration:none;font-size:14px;line-height:22px;margin:0.5em 0;word-wrap:break-word;word-break:break-all;}
.bookmark-wrapper .main .bookmark-content .bookmark-function-wrap .bookmark-info{width:75%; float:left;}
.bookmark-wrapper .main .bookmark-content .bookmark-function-wrap .bookmark-info .date{float:left;}
.bookmark-wrapper .main .bookmark-content .bookmark-function-wrap .bookmark-info .original1{float:left;font-size:0.75em;width:40px;}
.bookmark-wrapper .main .bookmark-content .bookmark-function-wrap .bookmark-info .original2{float:left;font-size:0.75em;width:85%;}
.bookmark-wrapper .main .bookmark-content .bookmark-function-wrap .original2 a{display:inline;}
.bookmark-wrapper .main .bookmark-content .bookmark-function-wrap .delete-wrap{width:125px; float:right; margin:5px 0;}
.bookmark-wrapper .main .bookmark-content .bookmark-function-wrap .delete-wrap .delete{width:50px; float:right; margin-left:10px;}
.bookmark-wrapper .main .bookmark-content .bookmark-function-wrap .delete-wrap .delete a{font-size:14px; color:#1AA294; float:right;}

/*mingpao member custom*/
.bookmark-wrapper .main .custom-news-title{text-align:right; color:#c9a063;}
.bookmark-wrapper .main .bookmark-page{text-align:right; color:#1BA295; font-size:12px;}
.bookmark-wrapper .main .bookmark-page a{text-align:right; color:#1BA295; font-size:12px;}

.bookmark-wrapper .sidenav2 {height:100%; width: 110px; position:absolute; background-color:#1BA295; overflow-x: hidden;}
.bookmark-wrapper .sidenav2 p{text-align:center; color:#ffffff; font-weight:bold; margin:5px;}
.bookmark-wrapper .sidenav2 hr{margin:0; padding:0; display: block; height: 1px; border: 0; border-top: 1px dashed #ffffff;}
.bookmark-wrapper .sidenav2 a {padding:10px; text-decoration:underline; font-size: 15px; color: #ffffff; font-weight:bold; display:block; text-align:center}
.bookmark-wrapper .sidenav2 a:hover {color: #f1f1f1;}
.bookmark-wrapper .sidenav2 a.mark {background-color: #96d0b6;}

.alerthide{display:none;}

@media (max-width: 40em) {
.hide{display:none;}
	
/*user nav*/
.content_wrapper .nav{width:100%; height:auto;}
.content_wrapper .nav ul li .icons{float:left; margin-right:10px; width:20px;}
.content_wrapper .common-headline{margin-left:0.5em; margin-right:0.5em;}
.content_wrapper .nav ul .space{display:none;}
.content_wrapper .nav ul li{width:45%; list-style:none; float:left; color:#999999; margin-left:0.5em; margin-right:0.5em; margin-bottom:0.5em;}
.content_wrapper .nav ul li .active{font-weight:bold; color:#1aa294; border:none; border-spacing:10px; float:left;}
.content_wrapper .nav ul li .key-button{font-weight:bold; color:#1aa294; border:none; border-spacing:10px; float:left;}

/*purple dashobard*/
.memeber_dashboard {border:none; border-top: 2px solid #eac894;}
.memeber_dashboard .title_wrapper{width:90%; margin:0 auto; border-bottom:1px dashed #eac894;}

/*member custom keyword page*/
.custom-keyword-wrapper{width:100%; border:2px solid #1AA294; margin-bottom:1em;}
.content_wrapper .custom-keyword p{margin-left:0.5em; margin-right:0.5em;}
.custom-keyword-wrapper .keyword-input-design{float:left; width:100%;}
.custom-keyword-wrapper .keyword-input-design input{width:75%; padding:0.5em 1em; border:2px solid #1AA294;}

.keyword-remarks{margin-left:0.5em; margin-right:0.5em; margin-bottom:2em;}

/*member custom news details page*/
.search-box-wrapper .search-box{width:100%; border:none; border-bottom:2px solid #1AA294;}
.search-box-wrapper .search-box .container b{display:block;}
.search-box-wrapper .search-box .container input{width:300px; margin-top:0.5em;}
.search-box-wrapper .search-box .container .input-wrap{width:90%; margin:0 auto;}
.search-box-wrapper .search-box .container hr{display: block; height: 2px; border: 0; border:none;  margin: 0.5em 0; padding: 0;}
.search-box-wrapper .search-box .container .display-number{width:100%; padding:0.3em; border:1px solid #1AA294; background-color:#ffffff; margin-top:0.5em;}
.search-box-wrapper .search-box .container .keyword-input{width:100%; padding:0.3em; border:1px solid #1AA294; background-color:#ffffff;}

.keyword-result-wrapper{width:90%; margin:0 auto; padding-top:1em;}
.keyword-result-wrapper .keyword-result{width:100%;}

/*mingpao member change information*/
.form_wrapper{width:90%; margin:0 auto;}
.form_wrapper .form_member .col1{width:100%;}
.form_wrapper .form_member .col1 .fill{width:100px; float:left; text-align:left; margin-bottom:0.1em; color:#666666;}
.form_wrapper .form_member .col1 .input-fill input{width:97%; padding:0.3em; border:1px solid #c9a063; float:right;}
.form_wrapper .form_member .col1 .input-fill select{width:100%; padding:0.3em; border:1px solid #c9a063; float:left; margin-left:0px;}
.form_wrapper .form_member .checkbox-wrap .check-content{width:90%; float:left;}
.form_wrapper .form_header .title span{display:block;}

.form_wrapper .form_member .col2{width:100%; float:left; margin-top:0.7em;}
.form_wrapper .form_member .col2 .fill{text-align:left;}
.form_wrapper .form_member .col2 .input-fill select{width:100%; padding:0.3em; border:1px solid #c9a063; float:left; margin-left:0px;}

.form_wrapper .form_member .radio-group{width:97%!important;}

/*mingpao memeber bookmark*/
/*.bookmark-wrapper .sidenav2 {height:100%; width: 110px; position:absolute; background-color:#c9a063; overflow-x: hidden;}*/
/*.bookmark-wrapper .main {width: calc(100% - 110px); height:100%; float:right; overflow:auto;}*/
.bookmark-wrapper .main .bookmark-content .bookmark-function-wrap .bookmark-info{width:100%;}
.bookmark-wrapper .main .bookmark-content .bookmark-function-wrap .bookmark-info .original2{width:75%;}
.bookmark-wrapper .main .bookmark-content .bookmark-function-wrap .delete-wrap{width:130px;}

}