/* CSS Document */

/*** Improving language-specific readability ***/
div.cmsContent p, div#pageBody div#menuContainer div#mainContainer div#mainColumnContents p,
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.twocol li span, 
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.ordinance li span,
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul#ordinance li span,
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.videolist li span,
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul li,
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ol li
{
    line-height: 1.25em;
}

div.cmsContent p:lang(zh), div#pageBody div#menuContainer div#mainContainer div#mainColumnContents p:lang(zh),
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.twocol li span:lang(zh), 
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.ordinance li span:lang(zh),
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul#ordinance li span:lang(zh),
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.videolist li span:lang(zh),
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul li:lang(zh),
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ol li:lang(zh)
{
    line-height: 1.75em;
}

/*** Page Body - Basic Layout ***/
div#pageBody div#menuContainer div#mainContainer div#mainNavigation
{
    float: left;
    margin: 15px 20px 0px 20px;
    width: 768px;
}

div#pageBody div#menuContainer div#mainContainer div#mainNavigation a
{
    text-decoration: underline;
}


div#pageBody div#menuContainer div#mainContainer div#mainNavMap
{
    float: left;
    width: 768px;
    margin: 10px 20px 10px 20px;
}


div#pageBody div#menuContainer div#mainContainer div#mainNavMap ul
{
    padding: 0;
    margin: 5px 10px 5px 10px;
    position: relative;
    list-style-type: square;
}

div#pageBody div#menuContainer div#mainContainer div#mainNavMap ul li
{
    margin: 0 0 5px 15px;
}

div#pageBody div#menuContainer div#mainContainer div#mainNavMap ul li a
{
    text-decoration: underline;
}

div#pageBody div#menuContainer div#mainContainer div#mainColumnHeading
{
    float: left;
    width: 768px;
}

div#pageBody div#menuContainer div#mainContainer div#mainColumnHeading h1
{
    margin: 20px 20px 0 20px;
    overflow: hidden;
}

div#pageBody div#menuContainer div#mainContainer div#mainColumnContents
{
    float: left;
    margin: 10px 20px 10px 20px;
    width: 768px;
    font-family: Arial,Helvetica,sans-serif;
    /*font-family: 'Noto Sans TC', sans-serif;
    font-family: 'Roboto', sans-serif;*/
    LETTER-SPACING: 0.5px;
}

div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ol li
{
    margin: 0 0 1.5em 0;
}

div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ol ol li
{
    margin: 0 0 5px 30px;
}

div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ol ol ol li
{
    margin: 0 0 5px 45px;
}


div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ol.nospace
{
    padding: 0;
}

div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ol.nospace li
{
    margin: 0;
}

div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul
{
    padding: 0;
}

div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul li
{
    padding: 0 0 0 0.5em;
    margin: 0 0 0.5em 1.25em;
}

div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.nospace
{
    padding-top: 0;
    padding-bottom: 0;
}

div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.nospace li
{
    margin-top: 0;
    margin-bottom: 0;
}


div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul ul li
{
    margin: 0 0 5px 1.25em;
    list-style-type: disc;
    list-style-image: none;
    list-style-position: outside;
}

div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul ul ul li
{
    margin: 0 0 5px 2.5em;
}



/*div#pageBody div#menuContainer div#mainContainer div#mainColumnContents h3,*/
/*** Generic subtitle - showcontents by ItemID ***/
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents h2.cmsTitle,
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents div#cmsContent h3
{
    padding-top: 0.75em;
    padding-bottom: 0;
    font-weight: bold;
}

/*div#pageBody div#menuContainer div#mainContainer div#mainColumnContents h4,*/
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents div#cmsContent h4
{
    padding-top: 0.75em;
    padding-bottom: 0;
    text-decoration: underline;
}


/*** footer spacing ***/
div#mainColumnContents div.footerspacing
{
    height: 3em;
    position: static;
    float: none;
}

/*** Generic Shaded background box ***/
div#mainColumnContents div.bgshade
{
    padding: 0.5em;
}

/*** Special fields - speech contents **/
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents div.cmsTopic, div#pageBody div#menuContainer div#mainContainer div#mainColumnContents div.cmsEvent, div#pageBody div#menuContainer div#mainContainer div#mainColumnContents div.cmsDate, div#pageBody div#menuContainer div#mainContainer div#mainColumnContents div.cmsSpeaker
{
    text-align: center;
    font-weight: bold;
    padding: 0.5em 0;
}

/*** Special fields -- press release **/
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents div.cmsCreateDate
{
    padding: 0.5em 0;
}


/*** EOC Youtube ***/
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.youtube
{
    padding: 1em 0;
    margin: 0;
    list-style-type: none;
}
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.youtube li
{
    width: 30%;
    padding: 5px;
    margin: 0;
    float: left;
    display: table-cell;
    vertical-align: top;
    height: 150px;
    text-align: center;
}

div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.youtube li img
{
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding-bottom: 1em;
}

div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.youtube li a
{
    text-align: center;
}

div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.altul, 
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ol.altol
{
    padding: 0;
    margin: 0;
}

div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul li.colorbullet
{
    list-style-image: url(white/TitleSign.gif);
    margin-left: 1.4em;
    list-style-position: outside;
}

div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.altul li
{
/*    list-style-image: url(white/TitleSign.gif); */
    margin: 0;
    padding: 0.5em;
    padding-left: 1em;
    list-style-position: inside;
    list-style-type:square;
}

div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.altul li.noimage
{
    list-style-image: none;
}



div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.altul li p
{
    margin: 0;
    padding: 0.25em 0 0 1.5em;
}
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ol.altol li
{
    margin: 0;
    padding: 0.5em;
    list-style-position: inside;
}

/** generic table properties **/
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents table.thinborder
{
    border-collapse: collapse;
}
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents table.thinborder, 
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents table.thinborder td, 
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents table.thinborder th
{
    border: 1px solid;
}



/*** Inverse headers ***/
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents div.inverse
{
    clear: both;
    display: block;
    padding: 0.25em;
    margin: 0.25em 0;
}
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents div.inverse h1, div#pageBody div#menuContainer div#mainContainer div#mainColumnContents div.inverse h2, div#pageBody div#menuContainer div#mainContainer div#mainColumnContents div.inverse h3, div#pageBody div#menuContainer div#mainContainer div#mainColumnContents div.inverse h4, div#pageBody div#menuContainer div#mainContainer div#mainColumnContents div.inverse h5
{
    margin: 0;
    padding: 0;
}


div#pageBody div#menuContainer div#mainContainer div#mainColumnContents dl dd
{
    padding-bottom: 1em;
}


/*** Ordinance and two-column styled ul***/
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.twocol,
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.twocol li, 
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.ordinance, 
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.ordinance li,
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul#ordinance, 
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul#ordinance li,
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.videolist, 
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.videolist li
{
    list-style-type: none;
    margin: 0;
    clear: both;
    display: inline-block;
}
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.twocol, 
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.ordinance,
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul#ordinance,
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.videolist
{
    padding: 0;
    width: 100%;
}
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.twocol li, 
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.ordinance li,
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul#ordinance li,
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.videolist li
{
    /*padding: 0.25em;*/
    display: table-row;
    width: 100%;
}
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.twocol li span, 
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.ordinance li span,
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul#ordinance li span,
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.videolist li span
{
    padding: 0.25em;
    clear: right;
    display: inline-block;
    display: table-cell;
    width: 150px;
    float: left;
    vertical-align: top;
}
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.twocol li p, 
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.ordinance li p,
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul#ordinance li p,
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.videolist li p
{
    padding: 0.25em;
    margin: 0;
    margin-left: 155px;
    vertical-align: top;
    clear: right;
    display: inline-block;
    display: table-cell;
    width: inherit;
}
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.twocol li span, div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.twocol li p
{
    padding: 0.125em;
}

div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.alternate
{
    list-style-type: none;
    margin: 0;
    clear: both;
    display: inline-block;
    padding: 0;
    width: 100%;
}
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents ul.alternate li
{
    margin: 0;
    padding: 0.5em;
}

/** global two-column dl **/
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents dl.twocol
{
    margin: 0;
    padding: 1em 0;
}

div#pageBody div#menuContainer div#mainContainer div#mainColumnContents dl.twocol dt
{
    padding: 0.25em 0 0.25em 0;
    margin: 0;
    float: left;
    clear: left;
    display: inline-block;
    display: table-cell;
}

div#pageBody div#menuContainer div#mainContainer div#mainColumnContents dl.twocol20 dt
{
    width: 20%;
}
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents dl.twocol20 dd
{
    margin-left: 20%;
}
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents dl.twocol10 dt
{
    width: 10%;
}
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents dl.twocol10 dd
{
    margin-left: 10%;
}
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents dl.twocol5 dt
{
    width: 5%;
}
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents dl.twocol5 dd
{
    margin-left: 5%;
}
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents dl.twocol dd
{
    clear: right;
    padding: 0.25em;
    display: inline-block;
    display: table-cell;
    margin-top: 0;
    margin-bottom: 0;
}


/** EO Club Calendar Type Bullet */
ul.calendar  {
    margin-left: 1em;
}
ul.calendar li {
    list-style-image: url(/eoc/upload/forum/Calendar.gif);
    margin-left: 1.5em;
    list-style-position: outside;
}



/*** settlement ***/
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents div.settlement {
    padding: 0.5em;
    margin: 0;
}
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents div.settlement h3 {
    line-height: 1.25em;
    padding: 0;
    margin: 0;
}
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents div.settlement p.ordinance {
    font-style:italic;
}
div#pageBody div#menuContainer div#mainContainer div#mainColumnContents div.settlement p.remarks {
    font-weight: bold;
}