/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} /* Colorbox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxWrapper {max-width:none;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative;} #cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;} .cboxIframe{width:100%; height:100%; display:block; border:0;} #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;} /* User Style: Change the following styles to modify the appearance of Colorbox. They are ordered & tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay{background:#000;} #colorbox{outline:0;} #cboxContent{margin-top:20px;background:#000;} .cboxIframe{background:#fff;} #cboxError{padding:50px; border:1px solid #ccc;} #cboxLoadedContent{border:5px solid #000; background:#fff;} #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;} #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;} #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;} /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; } /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;} #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;} #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(images/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;} #cboxPrevious:hover{background-position:bottom left;} #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(images/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;} #cboxNext:hover{background-position:bottom right;} #cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(images/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;} #cboxClose:hover{background-position:bottom center;} /* * CSS Styles that are needed by jScrollPane for it to operate correctly. * * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane * may not operate correctly without them. */ .jspContainer { overflow: hidden; position: relative; } .jspPane { position: absolute; } .jspVerticalBar { position: absolute; top: 0; right: 0; width: 16px; height: 100%; background: red; } .jspHorizontalBar { position: absolute; bottom: 0; left: 0; width: 100%; height: 16px; background: red; } .jspCap { display: none; } .jspHorizontalBar .jspCap { float: left; } .jspTrack { background: #dde; position: relative; } .jspDrag { background: #bbd; position: relative; top: 0; left: 0; cursor: pointer; } .jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { float: left; height: 100%; } .jspArrow { background: #50506d; text-indent: -20000px; display: block; cursor: pointer; padding: 0; margin: 0; } .jspArrow.jspDisabled { cursor: default; background: #80808d; } .jspVerticalBar .jspArrow { height: 16px; } .jspHorizontalBar .jspArrow { width: 16px; float: left; height: 100%; } .jspVerticalBar .jspArrow:focus { outline: none; } .jspCorner { background: #eeeef4; float: left; height: 100%; } /* Yuk! CSS Hack for IE6 3 pixel bug :( */ * html .jspCorner { margin: 0 -3px 0 0; } /* qTip2 v2.2.0 None | qtip2.com | Licensed MIT, GPL | Sun Dec 15 2013 17:07:18 */ .qtip{position:absolute;left:-28000px;top:-28000px;display:none;max-width:280px;min-width:50px;font-size:10.5px;line-height:12px;direction:ltr;box-shadow:none;padding:0}.qtip-content{position:relative;padding:5px 9px;overflow:hidden;text-align:left;word-wrap:break-word}.qtip-titlebar{position:relative;padding:5px 35px 5px 10px;overflow:hidden;border-width:0 0 1px;font-weight:700}.qtip-titlebar+.qtip-content{border-top-width:0!important}.qtip-close{position:absolute;right:-9px;top:-9px;cursor:pointer;outline:medium none;border-width:1px;border-style:solid;border-color:transparent}.qtip-titlebar .qtip-close{right:4px;top:50%;margin-top:-9px}* html .qtip-titlebar .qtip-close{top:16px}.qtip-titlebar .ui-icon,.qtip-icon .ui-icon{display:block;text-indent:-1000em;direction:ltr}.qtip-icon,.qtip-icon .ui-icon{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;text-decoration:none}.qtip-icon .ui-icon{width:18px;height:14px;line-height:14px;text-align:center;text-indent:0;font:400 bold 10px/13px Tahoma,sans-serif;color:inherit;background:transparent none no-repeat -100em -100em}.qtip-focus{}.qtip-hover{}.qtip-default{border-width:1px;border-style:solid;border-color:#F1D031;background-color:#FFFFA3;color:#555}.qtip-default .qtip-titlebar{background-color:#FFEF93}.qtip-default .qtip-icon{border-color:#CCC;background:#F1F1F1;color:#777}.qtip-default .qtip-titlebar .qtip-close{border-color:#AAA;color:#111} /* -------------------------------------------------------------- forms.css * Sets up some default styling for forms * Gives you classes to enhance your forms Usage: * For text fields, use class .title or .text * For inline forms, use .inline (even when using columns) -------------------------------------------------------------- */ /* A special hack is included for IE8 since it does not apply padding correctly on fieldsets */ label { font-weight: bold; } fieldset { padding:0 1.4em 1.4em 1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; } legend { font-weight: bold; font-size:1.2em; margin-top:-0.2em; margin-bottom:1em; } fieldset, #IE8#HACK { padding-top:1.4em; } legend, #IE8#HACK { margin-top:0; margin-bottom:0; } /* Form fields -------------------------------------------------------------- */ /* Attribute selectors are used to differentiate the different types of input elements, but to support old browsers, you will have to add classes for each one. ".title" simply creates a large text field, this is purely for looks. */ input[type=text], input[type=password], input.text, input.title, textarea { background-color:#fff; border:1px solid #bbb; } input[type=text]:focus, input[type=password]:focus, input.text:focus, input.title:focus, textarea:focus { border-color:#666; } select { background-color:#fff; border-width:1px; border-style:solid; border-color: #000000; } input[type=text], input[type=password], input.text, input.title, textarea, select { /*margin:0.5em 0;*/ } input.text, input.title { width: 300px; padding:5px; } input.title { font-size:1.5em; } input.button, input.file { height:25px; } textarea { width: 390px; height: 250px; padding:5px; } /* This is to be used on forms where a variety of elements are placed side-by-side. Use the p tag to denote a line. */ form.inline { line-height:3; } form.inline p { margin-bottom:0; } /* Success, info, notice and error/alert boxes -------------------------------------------------------------- */ .error, .alert, .notice, .success, .info { padding: 0.8em; margin-bottom: 1em; border: 2px solid #ddd; } .error, .alert { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; } .notice { background: #fff6bf; color: #514721; border-color: #ffd324; } .success { background: #e6efc2; color: #264409; border-color: #c6d880; } .info { background: #d5edf8; color: #205791; border-color: #92cae4; } .error a, .alert a { color: #8a1f11; } .notice a { color: #514721; } .success a { color: #264409; } .info a { color: #205791; } /* o 16Apr2013 Additional */ input, input[type=text], input[type=password], textarea { margin: 0; padding: 0; vertical-align: -3px; [;vertical-align: 3px;]; *vertical-align: -3px; } button { border: 0; padding: 0; margin: 0; vertical-align: top; } @charset "UTF-8"; html { font-size: 100.01%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { font-size: 62.5%; font-family: Arial, "Microsoft Jhenghei", "微軟正黑體", STHeiTi, "黑體", PMingLiU, "新細明體", sans-serif; color: #333; line-height: 1.5; } /* Headings -------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { line-height: normal; color: #000; } h1, .h1 { color: #C93B18; font-size: 2.2em; line-height: 2; margin-bottom: 0; font-family: 'interstate'; } h2, .h2 { color: #C93B18; font-size: 2em; margin-bottom: 5px; font-family: 'interstate'; font-weight: normal; } .boxDetail h2, .boxDetail .h2 { letter-spacing: 0; } h3, .h3 { color: #e6542f; font-size: 1.6em; margin-bottom: 1.5em; font-weight: bold; } h4, .h4 { font-size: 1em; margin: 15px auto 5px; } h5, .h5 { font-size: 1em; margin: 15px auto 5px; } h6, .h6 { font-size: 1em; margin: 15px auto 5px; } h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; } * { max-height: 99999px; } /* Text elements -------------------------------------------------------------- */ p { margin: 0 0 15px; line-height: 1.4; font-size: 1.2em; } p a, li a { color: #cd2c03; } a { color: #333; cursor: pointer; text-decoration: none; } a:focus, a:hover { color: #cd2c03; text-decoration: underline; } blockquote { margin: 1.5em; color: #666; font-style: italic; } strong, dfn { font-weight: bold; } em, dfn { font-style: italic; } sup { font-size: 80%; position: relative; top: -0.0em; } sub { font-size: 80%; position: relative; top: +0.3em; } abbr, acronym { border-bottom: 1px dotted #666; } address { margin: 0 0 1.5em; font-style: italic; } del { color: #666; } pre { margin: 1.5em 0; white-space: normal; word-wrap: break-word; } pre, code, tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; } /* Lists -------------------------------------------------------------- */ ul, ol { margin: 0 0 10px 4px; padding: 0; } li ul { margin-left: 0; } #content li { font-size: 1.2em; } #content li li { font-size: 1em; } ul { list-style-type: none; padding: 0px; } ol { list-style-type: decimal; margin-left: 1em; } dl { margin: 0 0 1.5em 0; } dl dt { font-weight: bold; } dd { margin-left: 1.5em; } table { margin-bottom: 1.4em; width: 100%; } th { font-weight: bold; } thead th { background: #D1E6A5; } th, td, caption { padding: 4px 10px 4px 5px; font-size: 1.2em; } th *, td * { font-size: 1em; } tfoot { font-style: italic; } caption { background: #eee; } /* Misc classes -------------------------------------------------------------- */ .small { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; } .large { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; } .hide { display: none; } .quiet { color: #666; } .loud { color: #000; } .added { background: #060; color: #fff; } .removed { background: #900; color: #fff; } .top { margin-top: 0; padding-top: 0; } .bottom { margin-bottom: 0; padding-bottom: 0; } @font-face { font-family: 'interstate'; src: url("../font/interstate-boldcondensed-webfont.eot"); src: url("../font/interstate-boldcondensed-webfont.eot?#iefix") format("embedded-opentype"), url("../font/interstate-boldcondensed-webfont.woff") format("woff"), url("../font/interstate-boldcondensed-webfont.ttf") format("truetype"), url("../font/interstate-boldcondensed-webfont.svg#interstate-boldcondensedbold") format("svg"); font-weight: bold; font-style: normal; } @font-face { font-family: 'genevaregular'; src: url("../font/geneva-webfont.eot"); src: url("../font/geneva-webfont.eot?#iefix") format("embedded-opentype"), url("../font/geneva-webfont.woff") format("woff"), url("../font/geneva-webfont.ttf") format("truetype"), url("../font/geneva-webfont.svg#genevaregular") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'interstate'; src: url("../font/interstate-regularcondensed-webfont.eot"); src: url("../font/interstate-regularcondensed-webfont.eot?#iefix") format("embedded-opentype"), url("../font/interstate-regularcondensed-webfont.woff") format("woff"), url("../font/interstate-regularcondensed-webfont.ttf") format("truetype"), url("../font/interstate-regularcondensed-webfont.svg#interstate-regularcondensedRg") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'interstateregular'; src: url("../font/interstate_regular_italic-webfont.eot"); src: url("../font/interstate_regular_italic-webfont.eot?#iefix") format("embedded-opentype"), url("../font/interstate_regular_italic-webfont.woff") format("woff"), url("../font/interstate_regular_italic-webfont.ttf") format("truetype"), url("../font/interstate_regular_italic-webfont.svg#interstateregular") format("svg"); font-weight: normal; font-style: normal; } ::-webkit-input-placeholder { color: #717172; line-height: 14px; font-size: 11px; opacity: 1; } /* Firefox 18- */ :-moz-placeholder { color: #717172; line-height: 1em; font-size: 11px; opacity: 1; } /* Firefox 19+ */ ::-moz-placeholder { color: #717172; line-height: 1em; font-size: 11px; opacity: 1; } :-ms-input-placeholder { color: #717172; line-height: 1em; font-size: 11px; opacity: 1; } .access { overflow: hidden; position: absolute; top: -9999em; left: -9999em; } body.text_s { font-size: 62.5%; } body.text_m { font-size: 72.9%; } body.text_l { font-size: 83.3%; } .quickLink a { color: #d1350e; font-size: 1.2em; font-weight: bold; } .quickLink .selected { color: #a41a38; } .quickLink span { color: #707070; font-size: 1.2em; } #search input { color: #727172; font-size: 11px; line-height: 1em; } #search button { text-indent: -9999em; overflow: hidden; } .quickLink .row { text-align: right; } .levelOne { font-size: 0px; } .levelOne a { line-height: 30px; color: white; font-size: 1.3em; font-weight: bold; } .levelOne a:hover { text-decoration: none; } .levelOne li { font-size: 10px; } .text_m .levelOne li { font-size: 12px; } .text_l .levelOne li { font-size: 13px; } #footer p { font-size: 1.2em; } #footer p, #footer a { color: white; } #footer a:hover { text-decoration: underline; } .whitebox li { padding-left: 10px; background: url(../img/bullet-dot.png) left top no-repeat; margin-left: 8px; line-height: 1.4em; margin-bottom: 15; } .lt-ie9 .whitebox li { background-position: left 2px; } .lt-ie9 .text_m .whitebox li { background-position: left 3px; } .lt-ie9 .text_l .whitebox li { background-position: left 5px; } .text_m .whitebox li { background-position: left 2px; } .text_l .whitebox li { background-position: left 3px; } .whitebox li ul li { list-style: none; background-image: url(../img/bullet-dash.png); margin-left: 0; } .whitebox ol li { padding-left: 0; background: none; } .caption p { position: relative; margin: 0 15px; font-size: 13px; } #mainSlider .caption p { margin: 0 110px 0 15px; color: white; font-size: 1.2em; margin-bottom: 0; line-height: 1.5em; } .event .caption .h2 { margin-bottom: 5px; font-size: 20px; line-height: 1.3em; font-weight: bold; } .inner #eventSlide .caption p { margin-left: 0; } .whitebox .caption p { font-family: Arial; color: #e02f02; background: url(../img/sq-highlight.png) left top no-repeat; padding-left: 18px; font-size: 1.2em; font-weight: bold; line-height: 1.3em; } .slider .withBg { background: url(../img/sq-highlight.png) left -2px no-repeat; } #eventSlide .slider .caption .h2 { line-height: 1.1; } #eventSlide .slider .caption p { padding-left: 21px; } #eventSlide .slider .caption .h2 ~ p { font-size: 12px; } .event .row { margin-top: 10px; } .event .row .whitebox { margin-bottom: 0; } .noControl .bx-controls a { margin-top: 3px; margin-left: 3px; font-size: 12px; width: 16px; display: block; text-align: center; line-height: 16px; height: 16px; border-radius: 50%; } .lt-ie9 .noControl .bx-controls a { padding: 2px 0 1px; } .noControl .bx-controls a:hover, .noControl .active { color: white; text-decoration: none; background: url(../img/bg-pager.png) center center no-repeat #D73F19; } /*.mobile .noControl .bx-controls a:hover, .mobile .noControl .active{ border-radius: 8px; padding: 0 }*/ .whitebox .boxMid p { /*line-height: 1.5em; */ } .whitebox .boxMid .left ul li { line-height: 1.5em; letter-spacing: 0.2px; } .whitebox .boxDetail ul li a { color: #333; } .threeCol .whitebox .boxDetail ul li a { color: #CD2C03; } .slogan { font-size: 3.5em; font-family: 'interstate-boldcondensedbold'; font-style: italic; color: #cd2c03; } .whitebox .title { padding-left: 21px; margin: 0; letter-spacing: -1px; } .whitebox .title a { color: #D73F19; } .whitebox .title { background: url() left 1px no-repeat; } /*.lt-ie8 .title { background-position: left 1px}*/ .media .title { background-image: url(../img/sq-media.png); } .event .title { background-image: url(../img/sq-highlight.png); } .publi .title { background-image: url(../img/sq-publi.png); } .multimedia .title { background-image: url(../img/sq-social.png); } .online-comm .title { background-image: url(../img/sq-online.png); } .about .title { background-image: url(../img/sq-about.png); } .service .title { background-image: url(../img/sq-services.png); } .plus { background: url(../img/plus.gif) left center no-repeat #de2400; display: inline-block; padding: 2px 15px; color: white; position: absolute; bottom: 15px; left: 0; } .plus:focus { color: white; } .plus:hover { color: white; text-decoration: none; } .plus .access { left: -500px; top: 0; font-size: 0; line-height: 0; } .lt-ie7 .plus { display: inline; } .graphic .plus { left: 1px; } #pageInfo h1, #pageInfo .page-title { font-family: 'genevaregular', "Microsoft Jhenghei", "微軟正黑體", STHeiTi, "黑體", PMingLiU, "新細明體", sans-serif; font-size: 2.2em; line-height: normal; } #pageInfo p { font-size: 1.1em; } .breadcrumb { color: #cd2c03; font-family: 'Verdana'; } .breadcrumb .arrow { margin: 0 5px; color: #333; } .breadcrumb a { color: #333; } .breadcrumb a:hover { color: #cd2c03; text-decoration: none; } #pageInfo .section_title { margin-bottom: 5px; font-weight: normal; font-family: 'genevaregular', "Microsoft Jhenghei", "微軟正黑體", STHeiTi, "黑體", PMingLiU, "新細明體", sans-serif; color: #e6542f; } #eventSlide .h2 { font-weight: normal; background-position: left 2px; letter-spacing: 0px; } .UpComeTag { font-family: 'interstate'; font-size: 20px; font-style: italic; color: white; letter-spacing: -1px; } .home .UpComeTag { top: 9px; } .quickLink .textResize { color: #707070; font-weight: bold; margin-right: 5px; display: inline-block; } /*.lt-ie8 .quickLink .textResize { display: inline;}*/ #text_s { font-size: 12px; } #text_m { font-size: 16px; } #text_l { font-size: 20px; } .textResize:hover, .textResize.current { color: #cd2c03; text-decoration: underline; } .whitebox .title { /* min-height: 2em o 2013-12-17*/ margin: 0 0 15px; } .home .whitebox .title { min-height: 0; } .home li a { color: #333333; } .news_item .date { font-weight: bold; color: #6c6c6c; background: url(../img/arrow-news.png) right center no-repeat; margin: 0; width: 85px; float: left; margin-right: 10px; padding-right: 10px; } .news_item .news-detail { float: left; width: 320px; margin: 0; } .news_item .news-detail a { color: #333; } .news_item .news-detail a:hover { color: #cd2c03; text-decoration: none; } /* publication */ .publi .twoCol .plus { position: static; } .text_m .levelOne a { font-size: 15px; } .text_m .news_item .date, .text_l .news_item .date { width: 120px; } .text_m .news_item .news-detail, .text_l .news_item .news-detail { width: 295px; } .text_m .title { background-position: left 3px; } .text_l .levelOne a { font-size: 16px; } .text_l .title { background-position: left 4px; } .graphic p { font-size: 12px; } /* multimedia page */ .videoLink span { margin: 0 4px; } .videoLink { overflow: hidden; } .whitebox .boxDetail .videoLink a { color: #cd2c03; } .whitebox .boxDetail ul, .whitebox .boxDetail li { margin-left: 0; } .videoLink a:hover { color: #cd2c03; } .videoTitle { font-weight: bold; margin-bottom: 5px; } .videos .title { min-height: 1.3em; } .photoLibrary .button { text-align: center; } .photoLibrary .button a { display: inline-block; padding: 5px 10px; background-color: #de2400; color: white; } .photoLibrary .button a:hover { text-decoration: none; } /*.lt-ie8 .photoLibrary .button { display: inline;}*/ .photoLibrary .button .bg { padding-right: 15px; background: url(../img/arrow-videos.png) right center no-repeat; } /* online communication */ .intro-text h2 { color: #444; font-family: 'interstate'; margin-bottom: 10px; } .intro-text p { color: #333; } /* sitemap */ .head_r > a { font-size: 1.1em; font-weight: bold; } .head_r ul a { color: #333; } /* about */ .inner.about .box1 .left { float: left; } .inner.about .box1 .left2 { width: 590px; float: left; margin-left: 20px; } .inner.about .box2 { padding: 25px 85px; background-color: #9a640d; text-align: center; color: white; margin-bottom: 0; letter-spacing: 1px; line-height: 27px; } .inner.about .box3 { background-color: #f3f3f3; } .inner.about .box3 .left { float: left; padding: 15px; width: 349px; } .inner.about .box3 .left2 { width: 526px; float: left; padding: 0; } /* contact */ .email a { color: #cd2c03; } @media screen and (max-width: 600px) { /* global */ ::-webkit-input-placeholder { color: #717172; line-height: 1.9em; font-size: 11px; } :-moz-placeholder { color: #717172; line-height: 1.9em; font-size: 11px; } ::-moz-placeholder { color: #717172; line-height: 1.9em; font-size: 11px; } :-ms-input-placeholder { color: #717172; line-height: 1.9em; font-size: 11px; } #search input { line-height: 19px; } #pageInfo h1, #pageInfo .page-title { font-size: 1.8em; } /*#nav li a { font-size: 30px;}*/ .menuSwitch { float: left; width: 30%; background-color: #e6542f; text-align: center; color: white; } .menuSwitch.opened { border-bottom: 1px solid #e6542f; } .menuSwitch .bg { color: white; background: url(../img/arrow-menuSwitch.png) right top no-repeat; padding-right: 20px; background-size: auto 200%; } .menuSwitch:hover { text-decoration: none; color: white; } .menuSwitch.opened .bg { background-position: right bottom; } .publi .coverDetail .plus { margin-left: 0; } .plus { position: static; margin-left: -15px; } .graphic .plus { margin-left: 0; } .email a { word-wrap: break-word; } .inner.about .box2 { padding: 25px 10%; } } /* End of typography.css */ /* standard terminology */ #tabDiv .tab a { background: url() left bottom no-repeat; float: left; line-height: 1em; font-size: 14px; padding: 8px 0; text-align: center; font-weight: bold; color: #333; } #tabDiv .tab a:hover { color: #e02f02; text-decoration: none; } #tabDiv .tab .search { width: 105px; background-image: url(../img/bg-tab1.png); } #tabDiv .tab .alphabet { width: 120px; background-image: url(../img/bg-tab2.png); padding-right: 8px; } #tabDiv .tab .current { background-position: left top; color: #e02f02; } #tab2Cont ul { padding: 0; margin: 0; margin-left: 2%; overflow: hidden; } #tab2Cont li { list-style: none; line-height: 54px; float: left; margin: 0 8px; font-weight: bold; text-align: center; } #tab2Cont li a { text-decoration: underline; color: #333; } #tab2Cont li a:hover, #tab2Cont .current a { color: #e02f02; } #tab2Cont li span { color: #c3c0bf; } .keywordDiv input { font-size: 12px; line-height: 10px; } .searchSubmit { background: url(../img/bg-search.jpg) center center no-repeat; width: 49px; height: 22px; float: left; border: none; color: white; padding: 0 5px 0 15px; cursor: pointer; } .categorySearch .inputText { font-size: 13px; } .dropDown a { line-height: 2; display: block; padding: 0 15px; font-size: 13px; color: #333; } .dropDown a:hover { background-color: #e02f02; color: white; text-decoration: none; } .dropDown a:link, .dropDown a:visited, .dropDown a:hover, .dropDown a:active { text-decoration: none; } .dropDown li li a { background: url(../img/arrow-cate-select-item.png) 15px center no-repeat; padding-left: 30px; font-size: 12px; } .cateTitle { margin-bottom: 0; font-size: 1.4em; line-height: 1.5em; cursor: pointer; } .cateTitle:hover, .STCate a:hover { text-decoration: none; color: #cd2c03; } #content .cateTitle + ul > li { font-size: 1.4em; } .STCate ul { padding: 0; margin: 3px 25px 0; } .STCate li { background: url(../img/arrow-cate-select-item.png) left -5px no-repeat; padding-left: 15px; line-height: 1.7em; } .STCate .hasList { background-image: url(../img/bg-childOpen.png); } .opened .STCate .hasList { background-image: url(../img/bg-childClose.png); } .STCate a { color: #333; } .STCate .engVoc { font-weight: bold; padding-right: 10px; } .aboutST { background-color: #e02f02; padding: 3px 14px 5px 7px; float: right; font-size: 1.2em; color: white; } .aboutST .bg { background: url(../img/bg-about-terminology.png) left center no-repeat; padding-left: 25px; display: block; line-height: 17px; color: white; } .aboutST:hover span { text-decoration: underline; } .finalResult { font-size: 1.4em; } .finalResult .keyword { color: #e02f02; font-weight: bold; } .searchResult td, .searchResult th { border: 3px solid white; padding: 15px 17px; text-align: left; } .searchResult th { background-color: #e02f02; color: white; padding: 3px 17px; } .searchResult .pink td { background-color: #fcf7f0; } .searchResult .termCate a { color: #e02f02; } .searchResult td a { color: #e02f02; } .searchResult .hlkey { font-weight: bold; color: black; } .searchResult td a[name] { float: left; } .qtip { font-size: 10px; } .qTipClue { color: #cd2c03; font-size: 1em; } td .qTipClue { cursor: pointer; } .qtip-content { font-size: 1.2em; color: #333; line-height: 1.3em; } .footnote .title { background: none; font-weight: bold; margin-bottom: 1.2em; padding: 0; } .footnote p { position: relative; padding: 0 0 0 3em; } .footnote .qTipClue { position: absolute; top: 0; left: 0; } #content .fullList li { font-size: 1em; padding: 10px 0 10px 25px; background: url(../img/dot-fullList.png) -11px -92px no-repeat; } #content .fullList li li { background-position: -56px -37px; } #content .fullList li li li { background-position: -100px 6px; } #content .fullList li ul { margin-bottom: 0; } #content .fullList li ul li { padding-top: 20px; padding-bottom: 0; } /*.text_m #content .fullList li { background-position: -11px -46px} .text_m #content .fullList li li { background-position: -56px 9px} .text_l #content .fullList li { background-position: -11px -44px} .text_l #content .fullList li li { background-position: -56px 11px}*/ #content .fullList li a { color: #333; display: block; } @media screen and (max-width: 600px) { #keywords::-webkit-input-placeholder { color: #969696; line-height: 1.6em; font-size: 13px; font-weight: bold; } #keywords:-moz-placeholder { color: #969696; line-height: 1.6em; font-size: 13px; font-weight: bold; } #keywords::-moz-placeholder { color: #969696; line-height: 1.6em; font-size: 13px; font-weight: bold; } #keywords:-ms-input-placeholder { color: #969696; line-height: 1.6em; font-size: 13px; font-weight: bold; } .searchResult .mobVisible { display: block; } .searchResult .midCol { display: none; } .searchResult td { width: 50%; } .mobBlock { display: block; } .dropDown li li a { background-position: 15px 4px; } } .service .boxMid > h2 { font-family: "Microsoft Jhenghei", "微軟正黑體", STHeiTi, "黑體", PMingLiU, "新細明體", sans-serif; font-size: 1.4em; font-weight: bold; } .service .boxMid .categorySearch .inputText { font-family: "Microsoft Jhenghei", "微軟正黑體", STHeiTi, "黑體", PMingLiU, "新細明體", sans-serif; } .service .boxMid h2 .small { font-size: 1em; } .fxgrid_box.service .boxMid > h2 { font-family: inherit; font-size: 2em; margin-bottom: 15px; font-family: 'interstate'; font-weight: normal; } @charset "UTF-8"; * { -webkit-tap-highlight-color: transparent; } .clear { clear: both; float: none; overflow: hidden; } .cf:before, .cf:after { content: ""; display: table; } .cf:after { clear: both; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .roundCorn { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; position: relative; } #wrapper { background: url(../img/bg.jpg) center bottom no-repeat #fff4eb; min-width: 990px; } .header-container, .footer-container, #nav { width: 990px; margin: 0 auto; display: block; } #content { width: 945px; margin: 0 auto 70px; } #content.home { width: 990px; margin-bottom: 0; } /* header */ #header { margin-bottom: 33px; } .header-container { padding: 9px 0 7px; background: url(../img/bg-header.png) left bottom no-repeat; } #nav .mobVisible { display: none; } #logo { float: left; margin: 0; } #logo a { float: left; height: 74px; text-indent: -9999px; overflow: hidden; } .hku { background-image: url(../img/logo-hku.png?ts=1669804207); background-position: left center; background-repeat: no-repeat; margin-right: 20px; width: 523px; } @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {.hku { background-image: url(../img/logo-hku-2x.png?ts=1669804207); background-size: 375px;}} .quickLink { text-align: right; float: right; width: 372px; } .quickLink .row, #search, .quickLink .top > * { display: inline-block; } .ie7 .quickLink .row, .ie7 .quickLink .top > *, .ie7 #search, .quickLink span { margin: 0 11px; } #search { padding: 7px 0 0; float: right; display: block; } #search-box { border: 1px solid #9a4b04; width: 129px; float: left; background-color: white; float: left; height: 12px; padding: 2px 9px; border-right: none; border-radius: 0; } .lt-ie9 #search-box { padding-top: 3px; padding-bottom: 1px; } #search-button { border: 1px solid #dc7c11; *border: 1px solid #dc7c11; background: url(../img/btn-search.png) center center no-repeat #D73F19; width: 21px; height: 18px; float: left; cursor: pointer; font-size: 0; line-height: 0; text-indent: -9999px; border-radius: 0; color: #fff !important; } .quickLink .row { overflow: hidden; clear: both; } .quickLink .row.top { margin: 2px 0 4px; width: 200px; float: left; } .levelOne { padding: 0; margin: 0 15px; text-align: center; background: #D73F19; } .levelOne li { list-style: none; position: relative; } /* .levelOne > li { float: left; position: relative;} */ .levelOne > li { display: inline-block; *display: inline; *zoom: 1; position: relative; } .levelOne a { background-color: #D73F19; display: block; } .levelOne > li > a { display: inline-block; padding: 0 25px; } .ie8 .levelOne > li > a { padding: 0 26px; } .lt-ie9 .ie8 .levelOne > li > a { padding: 0 25px; } .ie7 .levelOne > li > a { display: inline; padding: 0 25px; } .lt-ie9 .ie7 .levelOne > li > a { display: inline; padding: 0 25px; } .levelOne li:hover > a, .levelOne .selected { background-color: #d62839; } .levelOne > li.first > a { border-bottom-left-radius: 5px; margin-left: -15px; } .ie8 .levelOne > li.first > a, .ie7 .levelOne > li.first > a, .lt-ie9 .levelOne > li.first > a { background: url(../img/bg-menu.png) left top no-repeat transparent; } .ie7 .levelOne > li.first > a:hover, .ie7 .levelOne > li.first > .selected, .ie8 .levelOne > li.first > a:hover, .ie8 .levelOne > li.first > .selected, .lt-ie9 .levelOne > li.first > a:hover, .lt-ie9 .levelOne > li.first > .selected { background: url(../img/bg-menu.png) left bottom no-repeat transparent; } .levelOne > li.first > a { padding-left: 28px; } .ie9 .levelOne > li.first > a, .ie10 .levelOne > li.first > a, .ie11 .levelOne > li.first > a { padding-left: 26px; } .ie8 .levelOne > li.first > a, .ie7 .levelOne > li.first > a { padding-left: 28px; } .lt-ie9 .ie8 .levelOne > li.first > a, .lt-ie9 .ie7 .levelOne > li.first > a { padding-left: 27px; } .levelOne > li.last > a { border-bottom-right-radius: 5px; margin-right: -15px; } .ie7 .levelOne > li.last > a, .ie8 .levelOne > li.last > a, .lt-ie9 .levelOne > li.last > a { background: url(../img/bg-menu.png) right top no-repeat transparent; } .ie7 .levelOne > li.last > a:hover, .ie7 .levelOne > li.last > .selected, .ie8 .levelOne > li.last > a:hover, .ie8 .levelOne > li.last > .selected, .lt-ie9 .levelOne > li.last > a:hover, .lt-ie9 .levelOne > li.last > .selected { background: url(../img/bg-menu.png) right bottom no-repeat transparent; } .levelOne > li.last > a { padding-right: 28px; } .ie9 .levelOne > li.last > a, .ie10 .levelOne > li.last > a, .ie11 .levelOne > li.last > a { padding-right: 26px; } .ie8 .levelOne > li.last > a, .ie7 .levelOne > li.last > a { padding-right: 28px; } .lt-ie9 .ie8 .levelOne > li.last > a, .lt-ie9 .ie7 .levelOne > li.last > a { padding-right: 27px; } .levelOne > li.first ul { left: -15px; } .levelOne > li.last ul { left: auto; right: -15px; } .levelTwo { display: none; position: absolute; top: 100%; left: 0; width: 220px; padding: 0; z-index: 100; margin-left: 0; border-top: 1px solid #fff; text-align: left; background-color: #e6542f; } .levelTwo a { line-height: 1.3em; background: url(../img/arrow-menu.png) 10px 14px no-repeat #e6542f; padding: 10px 10px 10px 20px; } .levelOne > li:hover .levelTwo { display: block; z-index: 101; } .levelOne > li ul.levelThree { left: 100%; position: absolute; width: 220px; top: 0; display: none; } .levelOne > li.right_menu_over ul.levelThree { left: auto; right: 100%; } .levelTwo > li:hover > .levelThree { display: block; } .submenuTrigger { cursor: pointer; width: 40px; height: 30px; padding: 0; background: url('../img/arrow-menuSwitch.png?1599037789') no-repeat center 6px transparent; background-size: 16px auto; text-indent: -999px; overflow: hidden; position: absolute; margin: -8px 0 0 5px; outline: none; } .submenuTrigger.opened { background-position: center -16px; } @media screen and (max-width: 600px) { .levelOne > li.first ul { left: 0; } .levelOne > li.last > a { margin-right: 0; } .levelOne > li.first > a { margin-left: 0; } #nav li a { display: block; line-height: 1.4; text-align: center; background-color: #e6542f; padding: 12px 25px; width: auto; border-radius: 0; } .levelOne > li.last ul { right: auto; } .levelOne > li.right_menu_over ul.levelThree { right: auto; } .submenuTrigger { display: inline-block !important; } .levelTwo.opened, .levelThree.opened { display: block !important; margin-bottom: 0; } .li_level_1.last > ul.levelTwo ul.levelThree { right: auto; } .levelOne { margin: 0; } .levelTwo { position: relative; width: auto; top: auto; border: 0; text-align: center; } .levelTwo a { background: none; } #nav .li_level_1.opened > a { background-color: #d62839; } #nav .li_level_2 > a { background: #b41a33 !important; } #nav .li_level_2.opened > a { background: #b41a33 !important; } #nav .li_level_3 > a { background: #b41a33 !important; } .levelOne > li ul.levelThree { width: auto; position: relative; left: auto; } } .ie11 .levelOne > li { float: left; } .mobile .levelOne > li { float: left; } .mobile .levelOne > li > a { padding-left: 26px; padding-right: 26px; } .mobile .levelOne > li.first > a { padding-left: 25px; } .mobile .levelOne > li.last > a { padding-right: 25px; } /* footer */ #footer { background-color: #e02f02; padding: 5px 0; } .footer-container { width: 990px; } #footer p { margin: 0; } #footer .left { float: left; } #footer .right { float: right; width: 60%; } #footer .sepLine { margin: 0 7px; } /* globel whitebox style */ .whitebox { margin-bottom: 15px; position: relative; border-radius: 5px; overflow: hidden; float: left; margin-left: 15px; } .whitebox.first { margin-left: 0; } .whitebox .boxMid { background-color: transparent; padding: 15px 20px; border-radius: 5px; overflow: hidden; min-height: 270px; position: relative; } .lt-ie9 .boxMid { margin: 5px 0; overflow: hidden; } .whitebox img { max-width: 100%; height: auto !important; margin-bottom: 8px; } .slider li { float: left; } .home .event .slider li { height: 255px; overflow: hidden; } .slider img { margin-bottom: 0; height: auto; } .gridster { overflow: hidden; } .whitebox .boxMid { padding: 15px; width: 195px; } .grid_col_1 .boxMid { width: 195px; } .grid_col_2 .boxMid { width: 435px; } .col1.left { width: 273px; } .col1.left .boxMid { width: 243px; } .whitebox .boxMid .left ul li { background-position: 0 3px; margin-left: 0; margin-bottom: 8px; } .grister .intro { margin-top: 22px; } .grid_col_1 { background: url(../img/shadow-grid-col1.png) bottom center no-repeat; padding-bottom: 10px; } .grid_col_2 { background: url(../img/shadow-grid-col2.png) bottom center no-repeat; padding-bottom: 10px; } .grid_col_3 { background: url(../img/shadow-grid-col3.png) bottom center no-repeat; padding-bottom: 10px; } /*.grid_col_4 { background: url(../img/shadow-grid-col4.png) bottom center no-repeat; padding-bottom:10px;}*/ .gridster .whitebox { float: left; margin-left: 15px; } .gridster .whitebox.first { margin: 0; } .boxDetail { margin-top: 5px; } .boxDetail > img { margin-bottom: 15px; display: block; } .boxDetail .left { margin: 0; padding: 0; width: 170px; float: left; } .boxDetail .right { margin: 0; padding: 0; width: 200px; float: left; } .halfWidth, .boxDetail .halfWidth { padding: 0; width: 48%; float: left; } .boxDetail .halfWidth.right { float: right; } #pageInfo { margin-bottom: 10px; } #pageInfo img { margin-bottom: 20px; } #pageInfo h1, #pageInfo .page-title { margin-bottom: 5px; font-weight: normal; } #pageInfo p { margin: 0; } /* homepage slider */ @media screen and (max-width: 600px) { .home_slider.fxgrid_box { width: auto; } } #mainSlider { overflow: hidden; width: 683px; float: left; } .home_slider { overflow: hidden; } .slider ul { margin: 0; } .slider li { background: none; padding: 0; position: relative; margin: 0; } .home .event ul { overflow: hidden; height: 257px; } .whitebox .slider, .inner .slider, .inner .slider img { width: 100%; height: auto; } .inner .slider { height: 304px; overflow: hidden; background: white; } .inner #eventSlide li { height: 304px; overflow: hidden; width: 921px; } .bx-wrapper { margin: 0 auto; padding: 0; zoom: 1; } .slider img { /*o width: 100%;*/ display: block; } .event .slider li { width: 100%; } #eventSlide .slider img { width: 615px; } #eventSlide li:first-child ~ li { position: absolute; visibility: hidden; } #eventSlide.sliderLoaded li:first-child ~ li { position: relative; visibility: visible; } .mainSlider-cover { position: absolute; top: 0; left: 0; height: 264px; width: 683px; z-index: 4; background-position: bottom center; background-repeat: no-repeat; background-size: 100% auto; } .mainSlider-online { background-image: url('../img/homebanner/banner-label-online.png'); } .mainSlider-publications { background-image: url('../img/homebanner/banner-label-publications.png'); } .mainSlider-events { background-image: url('../img/homebanner/banner-label-events.png'); } .mainSlider-media { background-image: url('../img/homebanner/banner-label-media.png'); } .mainSlider-multimedia { background-image: url('../img/homebanner/banner-label-multimedia.png'); } .mainSlider-online { background-position: top left; } @media screen and (max-width: 600px) { .mainSlider-cover { height: 100%; width: 100%; } } .bx-wrapper { position: relative; } .bx-wrapper .bx-prev { left: 10px; background: url(../img/control-slider.png) no-repeat left top; position: absolute; left: 0; top: 40%; width: 30px; height: 61px; text-indent: -9999px; z-index: 99; } .bx-wrapper .bx-next { right: 10px; background: url(../img/control-slider.png) no-repeat right top; position: absolute; right: 0; top: 40%; width: 30px; height: 61px; text-indent: -9999px; z-index: 99; } .bx-wrapper .bx-prev:hover { background-position: left bottom; } .bx-wrapper .bx-next:hover { background-position: right bottom; } .slider .caption { position: absolute; top: 100%; left: 0; width: 100%; padding: 12px 0; } .slider .caption .bg { height: 100%; background-color: #b46418; opacity: 0.75; filter: alpha(opacity=75); width: 100%; position: absolute; top: 0; left: 0; min-height: 309px; } .home .slider .caption .bg { min-height: 0; } .blockAnc { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: left; text-indent: -9999px; display: block; background: url(../img/spacer.gif) left top repeat; } /* homepage box */ .home .graphic_slogan { width: 293px; float: right; overflow: hidden; } .home .graphic { width: 253px; padding: 15px 20px; overflow: hidden; background: url(../img/bg-home-side-box.png) left top no-repeat transparent; } .home .graphic .middleText { height: 220px; display: table-cell; vertical-align: middle; } .home .graphic .middleText p { font-size: 13px; } .midRow .left { float: left; } .midRow .left .boxMid { width: 385px; } .midRow .right { float: right; } .midRow .right .boxMid { width: 500px; padding: 15px 25px 30px; } .midRow .whitebox .boxMid { min-height: 315px; } .botRow .whitebox { float: left; margin-left: 15px; padding-bottom: 10px; background: url(../img/shadow-event-box.png) bottom center no-repeat; } .botRow .whitebox .boxMid { width: 280px; min-height: 320px; width: 290px; } .botRow .whitebox.first { margin-left: 0; } /* event highlight */ .whitebox .bx-pager { text-align: right; margin-top: 10px; } .whitebox .bx-pager-item { display: inline-block; } .whitebox .slider .bg { background-color: white; filter: alpha(opacity=90); opacity: 0.9; } .event .whitebox { min-height: 322px; padding-bottom: 10px; background: url(../img/shadow-event-box.png) bottom center no-repeat; } .event .botRow.threeCol .whitebox .boxMid { min-height: 360px; } /* event and publication */ .threeCol .whitebox { float: left; margin-left: 15px; background: url(../img/shadow-event-box.png) bottom center no-repeat; padding-bottom: 10px; } .threeCol .whitebox .boxMid { width: 265px; min-height: 320px; } .threeCol .whitebox.first { margin-left: 0; } .event .threeCol .boxMid { width: 275px; } #eventSlider { margin-bottom: 15px; } .lt-ie9 #eventSlide { background: url(../img/bg-eventslide.gif) center center no-repeat transparent; } #eventSlide { border-radius: 5px; padding: 12px; background-color: #f47325; } #eventSlide .bx-viewport { max-height: 330px; } #eventSlide .bx-controls { position: absolute; right: 15px; bottom: 15px; z-index: 100; } #eventSlide .bg { background-color: white; opacity: 1; filter: alpha(opacity=100); } #eventSlide .caption { width: 266px; height: 248px; padding: 31px 15px; left: auto; right: 6px; bottom: -2px; top: 0; } #eventSlide .bx-pager-item { display: inline-block; } .UpComeTag { background: url(../img/arrow-highlight.png) center right no-repeat; position: absolute; top: 20px; left: 0; display: inline-block; padding: 0 40px 0 10px; line-height: 40px; } .news_item { border-bottom: 1px solid #f5bf9b; overflow: hidden; padding-bottom: 15px; margin-bottom: 15px; } .news_item.last { border: none; margin: 0; } /* publication */ .publi .threeCol .boxMid { padding: 15px 38px 35px; width: 229px; } .publi .threeCol .boxMid { /*o min-height: 429px;*/ min-height: 418px; } .publi .threeCol .boxMid .coverDetail p { margin: 0; } .publi .threeCol img { text-align: center; } .twoCol .whitebox { float: left; margin-left: 15px; } .twoCol .whitebox.left { margin-left: 0; } .twoCol .whitebox .boxMid { min-height: 207px; } .publi .twoCol .coverLink { float: left; margin-right: 20px; } .publi .twoCol .coverDetail { float: left; width: 258px; } /* border radius in IE */ .lt-ie9 .boxBorder div { position: absolute; } .lt-ie9 .boxTop div { top: 0; } .lt-ie9 .boxBot div { bottom: 0px; } .lt-ie9 .whitebox .boxBot div { bottom: 10px; } .lt-ie9 .boxBorder div { height: 5px; } .lt-ie9 .boxTopLeft, .lt-ie9 .boxBotLeft { width: 5%; left: 0; } .lt-ie9 .boxTopRight, .lt-ie9 .boxBotRight { width: 95%; right: 0; } .boxTopLeft { height: 0; background: url(../img/border-box.png) left top no-repeat transparent; } .boxTopRight { height: 0; background: url(../img/border-box.png) right top no-repeat transparent; } .boxBotLeft { height: 0; background: url(../img/border-box.png) left bottom no-repeat transparent; } .boxBotRight { height: 0; background: url(../img/border-box.png) right bottom no-repeat transparent; } /* for text resize */ .text_m .levelOne > li > a { padding: 0 18px; } .text_m .mac .levelOne > li > a { padding: 0 18px; } .text_m .levelOne > li.first > a { padding-left: 18px; } .text_m .levelOne > li.last > a { padding-right: 18px; } .lt-ie9 .text_m .levelOne > li > a { padding: 0 17px; } .text_l .levelOne > li > a { padding: 0 13px; } .text_l .levelOne > li.first > a { padding-left: 13px; } .text_l .levelOne > li.last > a { padding-right: 13px; } /* ipad 2 protrait */ .ios.mobile .levelOne > li.first > a { padding-left: 30px; } .ios.mobile .levelOne > li.last > a { padding-right: 30px; } .text_m .ios.mobile .levelOne > li > a { padding: 0 17px; } .text_m .ios.mobile .levelOne > li.first > a { padding-left: 21px; } .text_m .ios.mobile .levelOne > li.last > a { padding-right: 21px; } .text_l .ios.mobile .levelOne > li > a { padding: 0 13px; } .text_l .ios.mobile .levelOne > li.first > a { padding-left: 15px; } .text_l .ios.mobile .levelOne > li.last > a { padding-right: 15px; } /* ipad 2 protrait */ .lt-ie9 .text_l .levelOne > li.first > a { padding-left: 17px; } .lt-ie9 .text_l .levelOne > li.last > a { padding-right: 17px; } .text_l .chrome .levelOne > li.first > a { padding-left: 17px; } .text_l .chrome .levelOne > li.last > a { padding-right: 17px; } .lt-ie9 .text_l .levelOne > li > a { padding: 0 14px; } @media screen and (min-width: 0\0) { .levelOne > li > a { padding: 0 27px; } .text_m .levelOne > li > a { padding: 0 18px; } } /* multimedia page */ .col1 { width: 225px; margin-left: 15px; } .col1.left { margin-left: 0; } .col1 .whitebox { margin-left: 0; margin-bottom: 15px; } .col1, .col2 { overflow: hidden; float: left; } .col1 .whitebox .boxMid { min-height: 555px; } .text_m .col1.left .whitebox .boxMid { height: 610px !important; } .text_l .col1.left .whitebox .boxMid { height: 710px !important; } .col2 .whitebox .boxMid { width: 435px; } .col2 .uvision.whitebox .boxMid, .col2 .videos.whitebox .boxMid { width: 365px; padding-left: 25px; padding-right: 25px; } .col2 .whitebox { float: none; } .noMinH .photoGallery .boxMid { min-height: 300px; } .noMinH .photoLibrary .boxMid { min-height: 200px; } .videos .boxDetail .halfWidth { padding: 0 15px; width: 185px; } .uvision .boxMid { min-height: 300px; } .sixteen-by-nine_aspectratio { display: block; height: 24px; padding-bottom: 56.25%; } .ios .sixteen-by-nine_aspectratio { height: 0; } .uvision #videoSizeControl { position: relative; margin-bottom: 10px; } #videoDiv_wrapper { position: absolute !important; top: 0; left: 0; } /*swf*/ .uvision #videoSizeControl #videoDiv { width: 100%; height: 100%; position: absolute !important; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } #videoDiv { width: 365px; height: 235px; background: #fff !important; } .ios #videoDiv_video_wrapper video { width: 100% !important; height: 100% !important; position: absolute; left: 0 !important; top: 0 !important; } .videos .boxMid { min-height: 200px; } .videos img { float: left; margin-right: 15px; } body #cboxLoadedContent { background: transparent; overflow: hidden !important; } .col1.left .boxDetail p { padding: 0 8px 0 0; } #cboxClose { bottom: auto; top: -20px; right: -22px; background: url(../img/popup_close.png) no-repeat; } /* online communication */ .grid_col_2.grid_row_2.whitebox .boxMid { min-height: 290px; } .grid_row_4 .boxMid { min-height: 580px; } .grid_row_6 .boxMid { min-height: 662px; } .grid_row_8 .boxMid { min-height: 762px; } .grid_row_12 .boxMid { min-height: 1662px; } .grid_col_4 .boxMid { width: 905px; padding: 20px 20px; } .grid_row_1 .boxMid { min-height: 234px; } /* sitemap */ #sitemap_right, #sitemap_left { width: 50%; float: left; } #sitemap_right ul, #sitemap_left ul { margin-top: 5px; margin-bottom: 30px; } #sitemap_right li, #sitemap_left li { margin-top: 5px; margin-bottom: 5px; } #sitemap_container .ul_level_3 { display: none; } /* contact us */ .contact .whitebox .boxMid { height: auto !important; min-height: 0; } .contact-table { table-layout: auto; } .contact th, .contact td { text-align: left; padding-left: 0; } .contact .email { width: 20%; } .contact .tel { width: 20%; } .contact .name { width: 35%; } .contact .fax { width: 20%; } .contact th h2 { font-family: Arial, 'Microsoft Jhenghei', 微軟正黑體, STHeiTi, 黑體, PMingLiU, 新細明體, sans-serif; color: #333; font-size: 1em; line-height: 1.5; font-weight: bold; margin: 0; } /* service for staff */ .temp1 img, .temp2 img, .temp3 img, .temp4 img { max-width: 100%; height: auto !important; } .temp1 .left { float: left; } .temp1 .left img { width: 426px; margin-bottom: 0; } .temp1 .left-2 { width: 458px; margin-left: 20px; } .temp2 .left-1 { float: left; width: 430px; } .temp2 .left-2 { float: right; margin-left: 20px; } .temp2 .left-2 img { width: 419px; } .temp3 { padding: 15px; } .temp3 .left { float: left; } .temp3 .left-2 { width: 424px; float: left; margin-left: 20px; } .temp4, .temp5 { margin-bottom: 20px; } .temp4 .left, .temp5 .left { background-color: #f3f3f3; padding: 15px; width: 405px; float: left; min-height: 365px; } .temp4 .left-2, .temp5 .left-2 { margin-left: 20px; } /* mobile version */ .mobVisible { display: none; } .cke_editable .mobVisible { display: block; } @media screen and (max-width: 600px) { /* global */ .cf:before, .cf:after { content: none; } .mobVisible { display: block; } .mobHide { display: none; } .left, .right { float: none !important; width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; } body.text_m, body.text_l { font-size: 62.5%; } .boxMid .coverLink, .boxMid .coverDetail { margin-left: 0 !important; width: auto !important; min-height: 0 !important; padding-bottom: 0 !important; } /*.boxMid div { margin-left: 0 !important; width: auto !important; min-height: 0 !important; padding-bottom: 0 !important;}*/ .boxMid div img { max-width: 100%; width: auto !important; height: auto !important; } .boxMid div #videoDiv_jwplayer_controlbar_background { width: 100% !important; } .boxMid { padding: 15px !important; } /* whitebox in mobile */ .whitebox { position: relative !important; top: 0 !important; left: 0 !important; float: none !important; width: auto !important; min-height: 0 !important; margin-left: 0 !important; } .boxMid { width: auto !important; min-height: 0 !important; height: auto !important; } .home .boxDetail { display: none; padding-top: 10px; margin: 0; width: 100% !important; } .home .slider li { display: none; } .home .slider li:first-child { display: block; } .home .event .slider li { height: auto; display: none; } .home .event .slider li:first-child { display: block; } .event .slider img { width: 100% !important; } .slider .caption { width: 100% !important; padding-bottom: 12px !important; } .col1, .col2 { float: none; width: auto; margin: 0; } /* content div in mobile */ #wrapper { background-image: url(); min-width: 0; } #header { margin: 0; } .hku { background-size: auto 100%; } #logo { padding: 12px; float: none; overflow: hidden; } #logo a { width: 100%; margin: 0; background: none; text-indent: -9999px; height: auto; } #logo img { display: block; max-height: 50px; max-width: 100%; } .header-container { background: none; padding: 0; } #content { margin-bottom: 20px; } #content .whitebox { margin: 10px 10px 0 !important; padding: 0; } #content .intro-text { margin: 10px 10px 0 !important; padding: 0; width: auto !important; } .header-container, .footer-container, #nav, #content, #content.home { width: auto; } .slider img { width: 100%; } #footer { padding: 17px 15px; } #footer p { margin-bottom: 15px; } #footer p:last-child { margin-bottom: 0; } #pageInfo img, #pageInfo .breadcrumb { display: none; } #pageInfo { margin: 10px 10px 0; } #pageInfo h2 { margin: 0; } .inner.event #pageInfo { margin-bottom: 10px; } .quickLink { overflow: hidden; width: 100%; float: none; display: table; } .quickLink .menuSwitch, .quickLink #search { width: auto; display: table-cell; float: none; max-width: 55%; vertical-align: middle; padding: 0; } .quickLink .menuSwitch.opened { height: 41px; } .quickLink #search { height: 41px; vertical-align: top; } .quickLink #search form { padding: 8px 0; background-color: #e6542f; display: block; } #search { border-left: 1px solid #fef4e9; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; float: left; text-align: center; height: 41px; } #search-box, #search-button { border-color: #e6542f; float: none; display: inline-block; vertical-align: middle; } #search-box { height: 19px; } #search-button { height: 19px; background-size: 15px 15px; background-image: url(../img/btn-search-mobile.png); } .inner .whitebox .title { min-height: 0; } .home .event ul { height: 100%; } #nav { display: none; } #nav.show { display: block; } #nav li { float: none; display: block; float: none; } #nav .mobVisible { display: block; } #nav .levelOne .selected { background-color: #d62839; } .levelOne > li:hover .levelTwo { display: none; } .levelTwo > li:hover > .levelThree { display: none; } .home .whitebox .title { margin-bottom: 0; } .home .title a:active, .home .title a:hover { text-decoration: none; } .home .title .boxSwitch { background: url(../img/arrow-header-home.png) right bottom no-repeat; display: block; float: right; width: 17px; height: 12px; margin: 5px 5px 0 0; text-indent: -9999px; } .home .childOpened .title a { background-position: right top; } .home .noControl .bx-controls a { width: 29px; margin: 0; height: 56px; } .home .noControl .bx-controls a:hover { background-image: url(../img/control-slider.png); background-position: right -61px; } .home .noControl .bx-controls .bx-prev:hover { background-position: left -61px; } .halfWidth { width: auto !important; float: none !important; margin-bottom: 0 !important; } .halfWidth:last-child { margin-bottom: 10px; } /* data in mobile */ #mainSlider { width: 100%; height: auto; float: none; } .bx-wrapper .bx-prev, .bx-wrapper .bx-next { top: 30%; } .midRow .right .boxMid { padding: 15px; } .boxDetail img { text-align: center; } /* inner page */ .intro { margin-left: 10px; margin-right: 10px; } /* event page */ .whitebox .title { min-height: 0; } .row { margin: 0; } .home .graphic { float: none !important; width: auto !important; background: url(../img/slogan-mobi.png) center center no-repeat; background-size: 100% auto; width: 293px; } .home .graphic * { display: none; } .home .graphic .mobVisible { display: block; } .event .row { margin: 0; } #header .row { display: none; } /* event landing */ .inner .slider { height: auto; } #eventSlide.event .slider li { padding: 10px; border-radius: 5px; background-color: white; height: auto; width: auto; } .whitebox .slider { overflow: hidden; } .whitebox .slider, .inner .slider, .inner .slider img { width: 100%; } #eventSlide .caption { position: relative; width: auto !important; height: auto; padding-bottom: 10px; padding-left: 0; padding-right: 0; } .news_item .date { padding-right: 20px; } .news_item .date, .news_item .news-detail { width: auto !important; display: inline-block; } .news_item .news-detail { margin-bottom: 10px; } #eventSlide { border-radius: 0; margin-top: 10px; } #eventSlide .bx-controls { position: static; margin: 0 auto; overflow: hidden; margin-bottom: 30px; text-align: center; } #eventSlide .bx-pager-item a { background: none; width: 30px; height: 10px; border-radius: 15px; padding: 7px 0 13px; } #eventSlide .bx-pager-item a:hover, #eventSlide .bx-pager-item .active { background: #e64219; } #eventSlide { overflow: hidden; } #eventSlide .bx-viewport { max-height: none; } /* multimedia page */ .social .boxDetail .halfWidth { width: auto; float: none; padding: 0; } .fullWidth > * { float: none; clear: both; } .col2 .uvision.whitebox .boxMid, .col2 .videos.whitebox .boxMid { padding: 15px; } #content .col1.left .whitebox .boxMid { height: auto !important; } .ios .sixteen-by-nine_aspectratio { height: 0; } /* publication */ .threeCol .whitebox .boxMid { padding: 15px; min-height: 0; } .publi .coverLink { float: left; margin-right: 20px; width: 147px; } .publi .coverDetail { float: left; width: 42% !important; } .publi .coverDetail p { margin-bottom: 10px !important; } .publi .title { margin-bottom: 10px; } /* communication page */ .gridster .intro { margin: 10px; padding: 0 15px; } /* service for staff */ .st .temp2 { padding-bottom: 15px !important; } /* sitemap */ #sitemap_left, #sitemap_right { width: auto; float: none; } #sitemap_right ul, #sitemap_left ul { margin-left: 0; } /* contact page */ .contact .name { width: 50%; } .contact .email { padding-left: 10px; padding-right: 0; width: 50%; text-align: left; } .contact .tel { padding-left: 0; padding-right: 0; display: none; } .contact .fax { padding-left: 0; padding-right: 0; display: none; } /* rte */ .temp4 .left-2, .temp5 .left-2 { margin-top: 20px !important; } } @media screen and (max-width: 320px) { .publi .coverDetail { float: left; width: 36% !important; } } #tabDiv { background: url(../img/shadow-search.png) center bottom no-repeat; padding-bottom: 15px; float: left; width: 100%; } #tabDiv, #tabDiv * { z-index: 100; } .tab { float: left; } .tabDetail { clear: both; } .tabDetail { background: url(../img/bg-tabCont.jpg) left top repeat-y; height: 54px; } .tabCont { display: none; } .tabCont.current { display: block; } #tab1Cont { padding: 15px; } #tab1Cont .keywordDiv { float: left; padding-right: 15px; margin-right: 15px; border-right: 1px solid #aeaeae; } .keywordDiv input { width: 205px; padding: 2px 15px 2px 20px; background-image: url(../img/search.png); background-repeat: no-repeat; background-position: 5px 4px; border: 1px solid #aeaeae; } .lt-ie9 .keywordDiv input { padding-top: 6px; padding-bottom: 0; } .categorySearch { float: left; margin-right: 15px; position: relative; } .categorySearch.hover .dropDown, .dropDown.show { top: 100%; transition-delay: 0.3s; -webkit-transition-delay: 0.3s; } .categorySearch .inputText { padding: 2px 15px; border: 1px solid #aeaeae; background: white; width: 514px; background: url(../img/arrow-cate-search.jpg) right top no-repeat white; font-weight: bold; margin-bottom: 0; } .dropDown { background: white; border: 1px solid #aaa5a5; overflow: hidden; position: absolute; top: -9999px; left: 0; width: 544px; z-index: 1; } .dropDown ul { padding: 0; margin: 0; } .dropDown .chiVoc { white-space: nowrap; } .terminology { border-radius: 5px; margin-bottom: 15px; overflow: hidden; clear: both; position: relative; } .terminology .boxMid { background: white; padding: 32px 15px; } .STCate { padding: 12px 25px; } .STCate.pink { background-color: #fcf7f0; } .STCate.last.pink, .searchResult .last.pink td { border-bottom: none; } .STCate.last, .searchResult .last td { border-bottom: 4px solid #fcf7f0; } .STCate .cateTitle { background: url(../img/bg-noChild.png) left center no-repeat; padding-left: 23px; } .STCate .hasList { background-image: url(../img/bg-childOpen.png); } .STCate.opened .hasList { background-image: url(../img/bg-childClose.png); } .subList { display: none; } .jspTrack, .jspVerticalBar { background: #efeee9; width: 22px; } .jspDrag { background: none; margin: 0 4px; overflow: hidden; } .jspDragTop { border-top-left-radius: 10px; border-top-right-radius: 10px; background-color: #a4a29b; overflow: hidden; height: 50%; } .jspDragBottom { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: #a4a29b; overflow: hidden; height: 50%; } .jspVerticalBar .jspArrow, .jspVerticalBar .jspArrow:hover { height: 7px; background-color: transparent; } .ie7 .jspDragTop, .ie8 .jspDragTop, .lt-ie9 .jspDragTop { background: url(../img/scrollbar.png) center top no-repeat transparent; } .ie7 .jspDragBottom, .ie8 .jspDragBottom, .lt-ie9 .jspDragBottom { background: url(../img/scrollbar.png) center bottom no-repeat transparent; } .searchResult .term { width: 272px; } .qtip-default { border: 2px solid #f2ce7f; background-color: #fcfbd8; } .qtip-content { padding: 14px 10px; } .cateRow { margin-bottom: 16px; margin-top: 7px; } .cateRow .categorySearch .inputText { width: 237px; } .cateRow .right { float: right; } .cateRow .right a { float: left; margin-left: 5px; line-height: 25px; text-align: center; font-weight: bold; color: #333; } .cateRow .right .right { background: url(../img/bg-color.png) right bottom no-repeat; float: right; height: 25px; padding: 0 17px 0 12px; font-size: 12px; } .cateRow .right .left { float: left; width: 5px; height: 25px; background: url(../img/bg-color.png) left bottom no-repeat; } .cateRow .right a:hover .left, .cateRow .right .current .left { background-position: left top; } .cateRow .right a:hover .right, .cateRow .right .current .right { background-position: right top; color: #e02f02; } .cateRow .right a:hover { text-decoration: none; } .cateRow .dropDown div, .cateRow .dropDown { width: 267px !important; } .fullList .term, .fullList .termChi { width: 50%; } .about-term { background: url(../img/icon-about.png) 7px center no-repeat #e02f02; color: white; float: right; padding: 3px 13px 3px 29px; font-size: 120%; } .about-term:hover { color: white; } .char-list { margin-top: 15px; float: left; clear: both; } .char-list li { float: left; border-right: 1px solid #404d12; padding-right: 9px; margin-right: 9px; line-height: 14px; margin-bottom: 10px; } .char-list .last { border: 0; margin: 0; padding: 0; } .char-list li a, .char-list li span { font-size: 1em; border-bottom: 1px solid #333; color: #333; font-weight: bold; display: block; line-height: 14px; } .char-list li span { border-bottom: 0; color: #c3c0bf; } .char-list li a:hover, .char-list .current a { color: #e02f02; border-bottom-color: #e02f02; text-decoration: none; } @media screen and (max-width: 600px) { .cateRow > .right { float: none; } .cateRow .right a { margin: 0 5px 0 0; } .cateRow .right .right { float: right !important; } .cateRow .right .left { float: left !important; width: 5px !important; } .categorySearch { float: none; margin-bottom: 16px; clear: both; margin-right: 0; } .dropDown { display: none; } .categorySearch .inputText { width: auto; padding: 5px 15px; background: url(../img/plus-search-cate.png) right top no-repeat white; background-size: auto 28px; padding: 5px 30px 5px 15px; cursor: pointer; } .categorySearch:hover .dropDown { width: 100% !important; } #tab1Cont { padding: 15px 28px; } #tab1Cont .keywordDiv { float: none; width: auto; margin-bottom: 15px; padding: 0; border: 0; margin-right: 0; } .keywordDiv input { line-height: 1.5em; width: auto; float: none; display: block; padding: 5px 15px; width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; background-position: right center; } #tab2Cont ul { overflow: visible; } .tabDetail { height: auto; } .searchSubmit { float: right; padding: 2px 15px 2px 31px; background-color: #e32d00; background-position: 5px center; width: auto; height: auto; border-radius: 0; } .mobile .searchSubmit { padding: 6px 18px 6px 31px; border-radius: 0; } .cateRow > .right { margin-top: 10px; overflow: hidden; vertical-align: bottom; } .boxMid .STCate { padding: 12px 25px !important; } .STCate .cateTitle { background-position: left top; } #tab2Cont, #content.st, #tab1Cont { overflow: hidden; } .chtVoc { display: block; } .service #tabDiv { margin-bottom: -15px; z-index: 1; position: relative; margin-top: 10px; } .terminology { border-radius: 0; } .tab { overflow: hidden; float: none; } #tabDiv .tab .alphabet { padding-right: 0; } #tab2Cont { padding: 10px 0; } #tab2Cont li { line-height: 1.3em; min-width: 10px; height: 15px; margin-top: 4px; margin-bottom: 4px; } table.fullList { table-layout: fixed; } .char-list li { min-width: 10px; height: 15px; text-align: center; display: block; } .terminology .boxMid, .terminology .boxMid > table { padding-left: 0; padding-right: 0; } .terminology .boxMid > * { padding: 0 15px; } .cateRow .categorySearch .inputText { width: auto; } .news_item { visibility: visible !important; } } @media screen and (max-width: 500px) { /*publicatio*/ .publi .coverDetail { width: 100% !important; } } .bkTop { position: fixed; bottom: 150px; display: block; text-align: right; font-size: 1.2em; background: url(../img/arrow-back-top.png) left center no-repeat #e02f02; padding: 0 10px 0 23px; line-height: 1.7em; color: white; display: none; } .bkTop:hover { text-decoration: none; color: white; } body.lightBoxOn { overflow: hidden; } .lb-cont { position: fixed; top: 0; left: 0; background: url(../img/bg-lightbox-mobile-black.png) left top repeat; width: 100%; height: 100%; display: none; z-index: 9999; } .lb-cont * { z-index: 9999; } .lb-cont.hide { display: none; } .lb { margin: 0 auto; width: 90%; height: 90%; position: relative; top: 5%; } .lb .lb-Detail { background: url(../img/bg-lightbox-mobile.png) left top repeat; padding: 6px; border-radius: 10px; position: relative; } .lb .categoryList { border-radius: 10px; overflow: hidden; } .lb .categoryList p { background-color: #828282; font-size: 13px; font-weight: bold; padding: 6px 15px 6px 15px; color: white; margin: 0; } .lb .categoryList .dropDown > ul > li, .lb .categoryList .jspPane > ul > li { border-bottom: 1px solid #c9c8c8; } .lb .categoryList a { font-size: 13px; line-height: 1.3; padding-top: 10px; padding-bottom: 10px; padding-right: 20%; } .lb .categoryList a:hover { background-color: transparent !important; color: #e02f02; background: url(../img/tick.png) 90% center no-repeat; background-size: 15px auto; } .lb .categoryList li li a { font-size: 12px; } .lb .categoryList li li a:hover { background: url(../img/arrow-cate-select-item.png) 15px center no-repeat, url(../img/tick.png) 90% center no-repeat; background-size: auto auto, 15px auto; } /*.lb .categoryList .falseOpt:hover { background: none !important; color: #948e8e; cursor: default;}*/ .lb-close { background: url(../img/btn-lightbox-close.png) center center no-repeat; width: 42px; height: 42px; background-size: 100% 100%; position: absolute; top: -12px; right: -12px; text-indent: -9999px; } .lb .dropDown { display: block; position: relative; top: auto; left: auto; border: none; width: auto; max-height: 100%; border-radius: 0 0 10px 10px; overflow: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; } .lb .jspTrack, .lb .jspVerticalBar { background: none; } .lb .jspDragTop, .lb .jspDragBottom { background-color: #d5d3ce; } .lb .jspCap, .lb .jspCapBottom { display: block; height: 10px; } .lb .jspPane, .lb .jspScrollable, .lb .jspContainer, .lb .dropDown { width: 100% !important; } .lb .dropDown::-webkit-scrollbar { width: 8px; position: absolute; } .lb .dropDown::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #D5D3CE; } .ckec li, .cke_editable li { font-size: 1.2em; } /* AUTO CONTROLS (START / STOP) */ .bx-wrapper .bx-controls-auto { text-align: center; } .bx-wrapper .bx-controls-auto .bx-start { display: block; text-indent: -9999px; width: 10px; height: 11px; outline: 0; background: url('images/controls_bx.png') -86px -11px no-repeat; margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active, .bx-wrapper .bx-controls-auto .bx-start:focus { background-position: -86px 0; } .bx-wrapper .bx-controls-auto .bx-stop { display: block; text-indent: -9999px; width: 9px; height: 11px; outline: 0; background: url('images/controls_bx.png') -86px -44px no-repeat; margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-stop:hover, .bx-wrapper .bx-controls-auto .bx-stop.active, .bx-wrapper .bx-controls-auto .bx-stop:focus { background-position: -86px -33px; } .bx-controls-auto { position: absolute; right: 10px; bottom: 14px; z-index: 1000; display: flex; padding: 3px 4px; background-color: rgba(255,255,255,0.95); border-radius: 5px; } @media screen and (max-width: 767px) { .bx-controls-auto { bottom: 10px; } } .bx-controls-direction { display: none; } /*gridster overwrite*/ /** To share with Admin gridster box style */ .fxgrid { position: relative; } .fxgrid .ckec { height: 100%; width: 100%; position: relative; overflow: hidden; } .fxgrid-white { background-color: #fff; } .fxgrid_container { position: relative; padding: 0; margin: 0; } .fxgrid_box { position: absolute; } @media screen and (max-width: 600px) { .fxgrid_box.fxgrid_module { width: 100%; } [data-sizex] { width: auto !important; } } .fxgrid_module_showText { display: none; } .fxgrid_module.fxgrid_box .ckec { overflow: visible; } #content .fxgrid-single { position: relative !important; height: auto !important; } /** Grid template */ .whitebox { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background-color: #fff; overflow: visible; margin: 0; float: none; } .whitebox:after { content: " "; height: 16px; width: 100%; position: absolute; bottom: -16px; left: 0; } .whitebox.whitebox-gray { background-color: #f3f3f3; } .whitebox[data-sizex="1"]:after { background: url('../img/shadow/g1.png?1599037790') top center no-repeat; } .whitebox[data-sizex="2"]:after { background: url('../img/shadow/g2.png?1599037790') top center no-repeat; } .whitebox[data-sizex="3"]:after { background: url('../img/shadow/g3.png?1599037790') top center no-repeat; } .whitebox[data-sizex="4"]:after { background: url('../img/shadow/g4.png?1599037790') top center no-repeat; } .whitebox[data-sizex="5"]:after { background: url('../img/shadow/g5.png?1599037790') top center no-repeat; } .whitebox[data-sizex="6"]:after { background: url('../img/shadow/g6.png?1599037790') top center no-repeat; } .whitebox[data-sizex="7"]:after { background: url('../img/shadow/g7.png?1599037790') top center no-repeat; } .whitebox[data-sizex="8"]:after { background: url('../img/shadow/g8.png?1599037790') top center no-repeat; } .whitebox[data-sizex="9"]:after { background: url('../img/shadow/g9.png?1599037790') top center no-repeat; } .whitebox[data-sizex="10"]:after { background: url('../img/shadow/g10.png?1599037790') top center no-repeat; } .whitebox[data-sizex="11"]:after { background: url('../img/shadow/g11.png?1599037790') top center no-repeat; } .whitebox[data-sizex="12"]:after { background: url('../img/shadow/g12.png?1599037790') top center no-repeat; } .whitebox[data-sizex="13"]:after { background: url('../img/shadow/g13.png?1599037790') top center no-repeat; } .whitebox[data-sizex="14"]:after { background: url('../img/shadow/g14.png?1599037790') top center no-repeat; } .whitebox[data-sizex="15"]:after { background: url('../img/shadow/g15.png?1599037790') top center no-repeat; } .whitebox[data-sizex="16"]:after { background: url('../img/shadow/g16.png?1599037790') top center no-repeat; } .whitebox[data-sizex="17"]:after { background: url('../img/shadow/g17.png?1599037790') top center no-repeat; } .whitebox[data-sizex="18"]:after { background: url('../img/shadow/g18.png?1599037790') top center no-repeat; } .whitebox[data-sizex="19"]:after { background: url('../img/shadow/g19.png?1599037790') top center no-repeat; } .whitebox[data-sizex="20"]:after { background: url('../img/shadow/g20.png?1599037790') top center no-repeat; } .whitebox[data-sizex="21"]:after { background: url('../img/shadow/g21.png?1599037790') top center no-repeat; } .whitebox[data-sizex="22"]:after { background: url('../img/shadow/g22.png?1599037790') top center no-repeat; } .whitebox[data-sizex="23"]:after { background: url('../img/shadow/g23.png?1599037790') top center no-repeat; } .whitebox[data-sizex="24"]:after { background: url('../img/shadow/g24.png?1599037790') top center no-repeat; } .whitebox[data-sizex="25"]:after { background: url('../img/shadow/g25.png?1599037790') top center no-repeat; } .whitebox[data-sizex="26"]:after { background: url('../img/shadow/g26.png?1599037790') top center no-repeat; } .whitebox[data-sizex="27"]:after { background: url('../img/shadow/g27.png?1599037790') top center no-repeat; } .whitebox[data-sizex="28"]:after { background: url('../img/shadow/g28.png?1599037790') top center no-repeat; } .whitebox[data-sizex="29"]:after { background: url('../img/shadow/g29.png?1599037790') top center no-repeat; } .whitebox[data-sizex="30"]:after { background: url('../img/shadow/g30.png?1599037790') top center no-repeat; } .whitebox[data-sizex="31"]:after { background: url('../img/shadow/g31.png?1599037790') top center no-repeat; } .whitebox[data-sizex="32"]:after { background: url('../img/shadow/g32.png?1599037790') top center no-repeat; } .whitebox[data-sizex="33"]:after { background: url('../img/shadow/g33.png?1599037790') top center no-repeat; } .whitebox[data-sizex="34"]:after { background: url('../img/shadow/g34.png?1599037790') top center no-repeat; } .whitebox[data-sizex="35"]:after { background: url('../img/shadow/g35.png?1599037790') top center no-repeat; } .whitebox[data-sizex="36"]:after { background: url('../img/shadow/g36.png?1599037790') top center no-repeat; } .whitebox .boxMid { min-height: 0; width: auto; position: static; padding: 15px 15px 30px; } .whitebox.publi-large .boxMid { padding-left: 38px; padding-right: 38px; } .whitebox.publi-bot .plus { position: static; } .whitebox.publi-bot .coverLink { float: left; margin-right: 20px; } .whitebox.publi-bot .coverDetail { overflow: hidden; width: auto; } .whitebox.whitebox-largebox .boxMid { padding: 20px 20px 70px; } .whitebox.whitebox-sidepadding .boxMid { padding-left: 25px; padding-right: 25px; } .fxgrid_module_eventSlider { overflow: hidden; } #content .whitebox.fxgrid_box.event.fxgrid_module .boxMid { padding-left: 25px; padding-right: 25px; } @media screen and (max-width: 600px) { .fxgrid { margin-left: 0 !important; margin-right: 0 !important; margin-top: 0 !important; } .fxgrid_container { height: auto !important; } .fxgrid_box { position: relative !important; height: auto !important; top: auto !important; left: auto !important; } } /*Specifc template*/ .fxgrid_box[data-templateid="0"] .ckec { padding-bottom: 7px; margin-bottom: -7px; } .color-li-link li a { color: #CD2C03 !important; } .rte-video-link { overflow: hidden; } .rte-video-link .fullWidth { overflow: hidden; } .rte-template-temp { width: 905px; margin-left: 5px; margin-right: 5px; } .rte-template-temp.temp2 { width: 875px; } .rte-brownbox { min-width: 905px; } .inner.about .box3 .left2 img { width: 526px; max-width: 100%; } .inner.about .box3 .left a { color: #cd2c03; } .rte-template:after { content: " "; overflow: hidden; display: block; height: 0; font-size: 0; clear: both; } .rte-title { font-size: 2em; font-weight: bold; margin-bottom: 0; } .rte-img .rte-title { font-size: 2em; } .rte-img.rte-template { margin: 0; } .rte-img-right .rte-imgContainer { padding: 0 0 10px 20px; float: right; } .rte-img-left .rte-imgContainer { padding: 0 20px 10px 0; float: left; } .rte-img-center .rte-imgContainer { text-align: center; } .rte-img-content { max-width: 750px; } .rte-img-content > *:first-child { margin-top: 0; } .rte-img-noWrap .rte-imgContainer, .rte-img-noWrap .rte-img-content { overflow: hidden; } .rte-img .rte-img-caption { font-size: 12px; margin: 0; } .rte-img-newContainer { margin-bottom: 20px; } .rte-img-new-right .rte-img-newContainer { float: right; margin-left: 30px; } .rte-img-new-left .rte-img-newContainer { float: left; margin-right: 30px; } .rte-img-new-left .rte-img-newContainer img, .rte-img-new-right .rte-img-newContainer img { display: block; max-width: 100%; height: auto !important; } .rte-img-new-center .rte-img-newContainer img { width: 100%; height: auto !important; } .rte-img-new-noWrap .rte-img-newContainer, .rte-img-new-noWrap .rte-img-new-content { overflow: hidden; } .rte-img-new-content > *:first-child { margin-top: 0; } .rte-img-new-caption { line-height: 1.38462 !important; font-size: 12px; margin: 0 !important; padding: 8px 0; } @media screen and (max-width: 600px) { .rte-img-new-right .rte-img-newContainer { float: none; margin-left: 0; } .rte-img-new-left .rte-img-newContainer { float: none; margin-right: 0; } } .cms-video { display: none; } .video-control { position: absolute; top: -9999px; left: -9999px; height: 0; } .cke_editable .cms-video, .content.ckec .cms-video { display: block; width: 100%; height: 100%; } .outlineF { outline: 2px solid #ff0; } @media screen and (max-width: 600px) { .rte-template-temp { width: auto; } .rte-brownbox { min-width: 0; } .rte-img-left .rte-imgContainer, .rte-img-right .rte-imgContainer { float: none; padding: 0 0 10px 0; text-align: center; } } @charset "utf-8"; /* For Front-End and CKEditior at CMS */ .clear { clear: both; float: none; } div.rte-templates { margin-bottom: 1em; word-wrap: break-word; /* IE7,8 */ overflow: hidden; /* deal with float */ } /*=== Template Elements ===*/ div.rte-img { margin: 0 3px; overflow:hidden; } .rte-templates > .rte-img { max-width:50%/* THIS IS TO BE CHANGED */; } /*div.rte-img img { width: 160px /* THIS IS TO BE CHANGED * /;} o 6May2013 image are set inline dimension*/ div.rte-nimg { background-color:#F0F0F0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; behavior: url(/cpao/assets/css/PIE.php); position:relative; z-index:10; margin: 5px; padding:5px; } .rte-img-caption { margin: 0; } .rte-float-left { float:left; zoom:1; } .rte-float-right { float:right; zoom:1; } .rte-half { width:47%; padding:0 3px; padding-left: 0 !important} .rte-two-third { width:66.6%; } .rte-third { width:33.3%; } body.cke_editable .rte-third { *width:33%; } /* fix ie7 in RTE */ /*=== Each Template ===*/ div.template-1col-center { } div.template-1col-center .center { width:480px; margin: 10px auto; } div.template-2col-parallel { overflow:hidden; } /* fix ie7 in RTE */ div.template-2col-parallel div.rte-img { clear:both; width:99%; } div.template-1col-vertical div.rte-img { clear:both; width:99%; max-width:none; } /*div.template-1col-vertical div.rte-img img { width: 99%; max-width:99%; } o 6May2013 image are set inline dimension */ div.template-2col-text-nimg { overflow:hidden; } /* fix ie7 in RTE */ div.template-1col-img div.rte-img { background-color:#F0F0F0; max-width:none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; behavior: url(/cpao/assets/css/PIE.php); position:relative; z-index:10; text-align:center; margin: 5px; padding:5px; } /* div.template-1col-img div.rte-img img { width: 99%; max-width:99%; } o 6May2013 image are set inline dimension */ div.template-1col-nimgh div.rte-nimg ul { padding:0; overflow: hidden; } div.template-1col-nimgh div.rte-nimg ul li { list-style:none; float:left; margin: 3px 3px; padding:0; max-width:24%; font-size:12px; } /* div.template-1col-nimgh div.rte-nimg ul li img { max-width:100% } o 6May2013 image are set inline dimension */ div.template-3col-ntext { overflow:hidden; } .rte-first-col, .rte-middle-col, .rte-last-col { overflow: hidden; } div.template-1col-1box { background-color:#F0F0F0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; behavior: url(/cpao/assets/css/PIE.php); position:relative; z-index:10; margin: 5px; padding:5px; } div.template-1col-1box * { max-width:98% } div.template-table table td { word-wrap: break-word; white-space:normal; } div.template-pdf-list ul.pdf-list li { background: url("../img/pdf.png") no-repeat scroll left 3px transparent; padding-left:15px; list-style:none; max-width:98%; } .event_con_title { background-color: #EEEFED; color: #12857E; font-size: 1.1em; font-weight: bold; padding-left: 6px; } .event_con_table, .event_con_table a { color:#333 !important; } .event_con_table td:first-child { vertical-align: top; width: 100px; } .event_con_table a { font-weight:bold; } .event_con_table a:hover{ color:#12857e !important; } .journal_title { font-weight:bold; text-decoration:underline;} .journal_source { font-style:italic} .journal_list { color:#333; line-height:1.8em; } li:hover .journal_list { color:#12857e; text-decoration:underline;} .publication_list { margin-left:20px; margin-left:30px \9; line-height:1.8em} /* NOT on Street, only seen in RTE usign 'body.cke_editable' */ body.cke_editable .rte-templates { /* border: 1px dashed #DDD; */ } body.cke_editable div.template-1col-1box, body.cke_editable div.template-1col-img div.rte-img, body.cke_editable div.rte-nimg { position:static; z-index:10; behavior:none; } body.cke_editable .rte-templates, body.cke_editable div.template-1col-img div.rte-img, body.cke_editable div.template-1col-1box { behavior:none; } /* End of rte_template.css */