body
{
	margin: 0;
	padding: 0;
	font-family: Verdana, "Lucida Grande", Tahoma, Helvetica, sans-serif;
	color: #000;
	background-color: #FCFBF8;
}

blockquote, h3, p, li
{
	padding-right: 10px;
	padding-left: 10px;
	font-size: 0.8em;
	line-height: 1.6em;
}

blockquote
{
	margin-right: 0;
	margin-left: 20px;
}

h1, h2, h3
{
	margin: 0 0 15px 0;
	padding: 0 10px;
	font-weight: normal;
}

h1, h2
{
	font-family: Georgia, Times, serif;
}

h1
{
	font-size: 1.4em;
}

h2
{
	font-size: 1em;
	font-style: italic;
}

h4
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.92em;
	font-weight: bold;
	color: #675C35;
	line-height: normal;
	padding-left: 10px;
}

hr
{
	margin: 2em auto;
	width: 370px;
	height: 1px;
	color: #7a7e7d;
	background-color: #7a7e7d;
	border: none;
}

small, .small {
	font-size: 0.8em;
        color: #696969;
}


a:link {
	color: #000;
}

a:visited {
	color: #000;
}

a:hover {
	color:#333;
} 

h1 a, h2 a, h3 a {
	text-decoration: none;
        color: #000;
}

a img {
	border: none;
}


h3 a
{
	font: 1.5em Georgia, Times, serif;
	color: #800;
	font-weight: bold;
}

#site-name a
{
	border: none;
}

#sidebar-2 a, #sidebar-1 a
{
	color: #aba;
	border: none;
}

#accessibility
{
	position: absolute;
	top: -10000px;
}

#container
{
	margin: 10px auto;
	width: 1000px;
	\width: 1010px;
	w\idth: 1000px;
}

#head
{
        height: 100px;
}

.adboxtop {
	float: right;
	height: 80px;
}

#head a
{
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

#site-name
{
	margin: 15px 0;
	font: 3em Georgia, Times, serif;
}

#site-slogan
{
	font: italic 1em Georgia, Times, serif;
}

div.hfeed {
	background-color: #FFF;
	border: thin solid #CCC;
	padding-top: 5px;
}


#sidebar-1
{
	float: left;
	text-align: right;
	padding-top: 20px;
	width: 165px;
	\width: 165px;
	w\idth: 165px;
}

#sidebar-2
{
	padding-top: 20px;
	float: right;
	width: 300px;
}

.section_list
{
	margin: 0 0 10px 0;
	padding: 0;
	list-style-type: none;
}

.section_list li
{
	margin: 0 10px 2px 0;
	padding: 0;
}

#content
{
	margin: 0px 310px 0px 172px;
}

.adunit
{
	margin-top: 10px;
        margin-bottom: 10px;
	clear: both;
	text-align: center;
}

.adunit a
{
	border: none;
}

.floatright
{
        float: right;
        margin: 0 0 5px 5px;
        border: 1px solid #000;
}

.floatleft
{       float: left;
        margin: 0 0 5px 5px;
        border: 1px solid #000;
}

.adbox {
	padding-top: 15px;
	padding-bottom: 15px;
        Padding-left: 10px;
	text-align: center;
}


#foot
{
	margin-top: 5px;
	clear: both;
	text-align: left;
	background-image: url(http://wanderingfrance.com/blog/images/6.jpg);
	background-position: top;
	background-repeat: no-repeat;
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
	color: #D4DFAA;
}

#foot a
{
	border: none;
}

div.center
{
	text-align: center;
}

img.border
{
	border: thick solid #FFFFFF;
}

#sidebar-2 p, #sidebar-1 p
{
	font-size: 0.7em;
	line-height: 1.5em;
}

.caps
{
	font-size: 0.9em;
	letter-spacing: 0.1em;
}

div.divider
{
	margin: 2em 0;
	text-align: center;
}

.directory
{
	list-style-type: circle;
}

.author
{
	font-style: normal;
	font-size: 0.8em;
}

.published
{
	font-size: 0.8em;
}

.comments_error
{
	color: #000;
	background-color: #fff4f4;
}

.comments-wrapper {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.83em;
        background-color: #E1F0F0;
	border-top-width: 3px;
	border-bottom-width: 3px;
	border-top-style: dashed;
	border-bottom-style: dashed;
	border-top-color: #CCC;
	border-bottom-color: #CCC;
	padding: 5px;
}

ul.comments_error
{
	padding: 0.3em;
	list-style-type: circle;
	list-style-position: inside;
	border: 2px solid #fdd;
}

div#cpreview
{
	color: #000;
	background-color: #f1f1f1;
	border: 2px solid #ddd;
}

form#txpCommentInputForm td
{
	vertical-align: top;
}

#comments-help
{
	margin: 2px 0 15px 0;
	font-size: 0.7em;
}

.error-status
{
	font: 1.3em Georgia, Times, serif;
}

.picrt {
	float: right;
	margin: 10px;
	background-color: #fff;
	padding: 7px;
	border: 1px solid #A5A5A5;
	box-shadow: 0px 0px 4px #ccc;
	-moz-box-shadow: 0px 0px 4px #ccc;
	-webkit-box-shadow: 0px 0px 4px #ccc;
}

.picleft {
	float: left;
	margin: 10px;
	background-color: #fff;
	padding: 7px;
	border: 1px solid #A5A5A5;
	box-shadow: 0px 0px 4px #ccc;
	-moz-box-shadow: 0px 0px 4px #ccc;
	-webkit-box-shadow: 0px 0px 4px #ccc;
}

.paris {
	padding: 10px;
	float: right;
}
.ddd {
	color: #666;
	margin-right: auto;
	padding: 15px;
	width: 430px;
	font-size: .85em;
	height: 240px;
	border: 1px dashed #999;
	margin-left: auto;
	margin-bottom: 10px;
       -moz-border-radius: 20px;
       -webkit-border-radius: 20px;
       -khtml-border-radius: 20px;
       border-radius: 20px;
}

/* LARGE and SMALL searchbox*/        
.Ven_hidden {visibility:hidden; font-size:0px;}
.Ven_tb {color:#000000;border-color:#666666; border-width:1px; border-style:solid; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px ; font-size:9px; background-position: bottom;}
.Ven_tb_small {border-color:#666666; border-width:1px; border-style:solid; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}
.Ven_radiotb {color:#000000; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; font-size:9px;border-color:#666666; border-width:0px 0px 1px 0px;border-style:solid; text-align:left;}
.Ven_firstrow {color:#000000; width:100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;font-size:10px;}
.Ven_img {color:#000000; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;border-width:0px;}
.Ven_img_small {margin: 10px 0px 10px 0px; padding: 0px;}
.Ven_number{color:#000000; text-align:center; padding: 0px 0px 0px 5px; margin: 0px 0px 0px 0px;}
.Ven_label {color:#000000; font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}
.Ven_label_small {font-size:9px; font-family: Verdana,Arial, Helvetica, sans-serif; font-weight:bold;}
.Ven_orangetxt {font-size:11px; font-family: Verdana, Arial, Helvetica, sans-serif;color: #cc0000; font-weight:bold; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}
.Ven_radioinput {color:#000000;font-size:11px; vertical-align:top;font-family:Verdana, Arial, Helvetica, sans-serif; padding:0px 5px 0px 0px; margin:0px 0px 0px 0px; font-weight:bold;}
.Ven_td {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
.Ven_selectinput {font-weight:normal; font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
.Ven_anchor {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
.Ven_header {font-size:9px; font-family: Verdana, Arial, Helvetica, sans-serif;visibility:hidden;}
.Ven_input {font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px; font-weight:normal;}


/* BANNER and LOGO*/      
.Ven_tb_banner {border-color:#666666; border-width:0px; border-style:solid; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}
.Ven_input_banner{font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 34px 0px 0px 100px; padding: 0px 0px 0px 0px; border-width:0px; border-style:solid; height: 15px; width:107;}
.Ven_go_banner {margin: 38px 0px 0px 3px; padding: 0px 0px 0px 0px; }
.Ven_go_logo {margin: 0px 0px 0px 3px; padding: 0px 0px 0px 0px; }

/* MailChimp Form Embed Code - Slim - 08/17/2011 */
#mc_embed_signup form {display:block; position:relative; text-align:left; padding:10px 0 10px 3%}
#mc_embed_signup h2 {font-weight:bold; padding:0; margin:15px 0; font-size:1.4em;}
#mc_embed_signup input {border:1px solid #999; -webkit-appearance:none;}
#mc_embed_signup input[type=checkbox]{-webkit-appearance:checkbox;}
#mc_embed_signup input[type=radio]{-webkit-appearance:radio;}
#mc_embed_signup input:focus {border-color:#333;}
#mc_embed_signup .button {clear:both; background-color: #aaa; border: 0 none; border-radius:4px; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:15px; font-weight: bold; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding:0; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}
#mc_embed_signup .button:hover {background-color:#675C35;}
#mc_embed_signup .small-meta {font-size: 11px;}
#mc_embed_signup .nowrap {white-space:nowrap;}     
#mc_embed_signup .clear {clear:none; display:inline;}

#mc_embed_signup label {display:block; font-size:12px; color: #675C35; padding-bottom:10px; font-weight:bold;}
#mc_embed_signup input.email {display:block; padding:8px 0; margin:0 4% 10px 0; text-indent:5px; width:58%; min-width:130px;}
#mc_embed_signup input.button {display:block; width:35%; margin:0 0 10px 0; min-width:90px;}

#mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;}
#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
#mc_embed_signup #mce-error-response {display:none;}
#mc_embed_signup #mce-success-response {color:#529214; display:none;}
#mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}

/* navigation 
----------------------------------------------- */

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.mattblacktabs{
	width: 100%;
	overflow: hidden; /*bottom horizontal line that runs beneath tabs*/
}

.mattblacktabs ul{
margin: 0;
padding: 0;
padding-left: 10px; /*offset of tabs relative to browser left edge*/
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	font-weight: bold;
list-style-type: none;
}

.mattblacktabs li{
display: inline;
margin: 0;
}

.mattblacktabs li a{
	float: left;
	display: block;
	text-decoration: none;
	margin: 0; /*padding inside each tab*/
	border-right: 1px solid white; /*right divider between tabs*/
	color: white; /*background of tabs (default state)*/
	background-color: #000;
	padding-top: 4px;
	padding-right: 8px;
	padding-bottom: 4px;
	padding-left: 8px;
}

.mattblacktabs li a:visited{
color: white;
}

.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background-color: #4A4A4A; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}
/* ==========================================================================
   Styling and layout for all media
   ========================================================================== */
/* Reset
   ========================================================================== */
/**
 * Add the correct display in Edge, IE 11, and Firefox.
 */
details,
main {
    display: block;
}

/**
 * Add the correct display in all browsers.
 */
summary {
    display: list-item;
}

/**
 * Add the correct display in IE 11.
 */
template {
    display: none;
}

/**
 * Remove tap delay in modern browsers.
 */
a,
input,
button {
    touch-action: manipulation;
}

/* Clearfix
   ========================================================================== */
header::after,
footer::after,
nav ul::after,
nav ol::after,
.container::after,
.paginator::after {
    display: table;
    clear: both;
    content: "";
}

/* ==========================================================================
   Styling and layout for screen media (mobile first)
   ========================================================================== */
@media screen {
    /* Layout
     ========================================================================== */
    /**
   * 1. Prevent adjustments of font size after orientation changes in
   *    IE on Windows Phone and in iOS.
   */
    html {
        /* 1 */
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /**
   * 1. Set `body` to `relative` to allow positioning of absolute elements.
   * 2. Remove default margin.
   */
    body {
        /* 1 */
        position: relative;

        /* 2 */
        margin: 0;
    }

    /**
   * Outer wrapper for main layouts.
   *
   * Example HTML:
   *
   * <div class="wrapper">
   *     <div class="container">
   *         Content
   *     </div>
   * </div>
   */
    .wrapper {
        padding: 1px 0;
        border-bottom: 1px solid #cccccc;
        background: #ffffff;
    }

    /**
   * Wrapper for layouts, and for site header/footer.
   *
   * Example HTML:
   *
   * <div class="wrapper">
   *     <div class="container">
   *         Content
   *     </div>
   * </div>
   */
    .site-header,
    .site-footer,
    .container {
        width: 88%;
        max-width: 54em;
        margin: 0 auto;
    }

    /**
   * Additional styling for child content within site header.
   */
    .site-header {
        padding: .5em 0;
    }

    .site-header h2 {
        margin: 0;
        font-family: Michroma;
        text-align: center;
        font-size: 24px;
        font-weight: 500;
        text-shadow: #EEEE00 0 0 2px;
    }

    .site-header h3 {
        margin: 0.5em 0 0;
        font-family: "PT Serif", Georgia, serif;
        font-size: 1.25rem;
        font-style: italic;
        font-weight: normal;
        line-height: 1.4;
    }

    /**
   * Additional styling for child content within site footer.
   */
    .site-footer {
        padding: 0.5em 0;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 100px;
        grid-template-areas: 'Liknks Blockquote .';
        grid-gap: 26px;
    }

    /**
   * Styling for articles.
   *
   * 1. Prevent really, really long words in article from breaking layout.
   */
    .article {
        margin-bottom: 2em;

        /* 1 */
        word-wrap: break-word;
    }

    /**
   * Styling for complementary content.
   *
   * Initially the sidebar appears under main content, it is then repositioned
   * with media queries at 2nd breakpoint.
   *
   * 1. Prevent really, really long words in article from breaking layout.
   */
    .complementary-content {
        margin: 2em -6% 0;
        padding: 0 6%;
        border-top: 2px dashed #cccccc;

        /* 1 */
        word-wrap: break-word;
    }

    /* Navigation
     ========================================================================== */
    /**
   * Style mobile first version of the navigation menu. Desktop version will
   * override some rules with extra styling at 1st breakpoint.
   *
   * Example HTML:
   *
   * <nav class="site-navigation">
   *     <ul>
   *         <li class="active"><a></li>
   *         <li><a></li>
   *         <li><a></li>
   *     </ul>
   * </nav>
   */
    .site-navigation {
        background-color: #dddddd;
    }

    .site-navigation > div {
        position: relative;
        max-width: 54em;
        margin: 0 auto;
    }

    .site-navigation ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .site-navigation li {
        border-bottom: 1px solid #cccccc;
        background-color: #fff3bd;
    }

    .site-navigation li:first-child {
        border-top: 1px solid #cccccc;
    }

    .site-navigation li:hover {
        background-color: #f8f8f8;
    }

    .site-navigation li:active {
        background-color: lightgray;
        box-shadow: inset 0 0.2em 0.25em rgba(0, 0, 0, 0.15);
    }

    .site-navigation li.active {
        background-color: white;
        box-shadow: none;
    }

    .site-navigation a {
        display: block;
        padding: 0.5em 6%;
        color: #333333;
    }

    .site-navigation a:hover,
    .site-navigation a:visited {
        color: #333333;
        text-decoration: none;
    }

    .site-navigation a:active {
        color: #1a1a1a;
        text-decoration: none;
    }

    /**
   * Search field in navigation.
   */
    .search {
        padding: 1em 6% 0.5em;
        background: #ffffff;
    }

    .search input[type=search] {
        width: 16em;
        height: 2.125em;
        padding-right: 0.1875em;
        padding-left: 2em;
        border-radius: 0.5em;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='%23333'%3E%3Cpath d='M4,13c0-5,4-9,9-9c5,0,9,4,9,9c0,5-4,9-9,9C8,22,4,18,4,13z M13,19c3.3,0,6-2.7,6-6s-2.7-6-6-6s-6,2.7-6,6S9.7,19,13,19z'/%3E%3Cpath d='M17.5,19l1.5-1.5l4.5,3L28,25c0,0,0,1.5-0.75,2.25S25,28,25,28l-4.5-4.5L17.5,19z'/%3E%3C/g%3E%3C/svg%3E") no-repeat left center;
        background-size: 2em 2em;
    }

    /* Links
     ========================================================================== */
    /**
   * 1. Specify link colour.
   * 2. Remove default underline style from non-hover state links.
   * 3. Interrupt the decoration line to let the shape of the text show through
   *    in supported browsers.
   */
    a {
        /* 1 */
        color: #004cbf;

        /* 2 */
        text-decoration: none;

        /* 3 */
        -webkit-text-decoration-skip: ink;
        text-decoration-skip: ink;
    }

    a:hover,
    a:active {
        outline: 0;
        color: #0066ff;
        text-decoration: underline;
    }

    a:focus {
        outline: 1px solid #0066ff;
    }

    /**
   * Additional styling for `h1`-`h3` heading links.
   *
   * 1. Expanded CSS level 3 `text-decoration-color` property in supported
   *    browsers, older browsers ignore this addition.
   */
    h1 a,
    h2 a,
    h3 a {
        color: #708f66;
    }

    h1 a:hover,
    h1 a:active,
    h2 a:hover,
    h2 a:active,
    h3 a:hover,
    h3 a:active {
        color: #333333;

        /* 1 */
        -webkit-text-decoration-color: rgba(51, 51, 51, 0.5);
        text-decoration-color: rgba(51, 51, 51, 0.5);
    }

    /**
   * Paginator (prev/next) navigation links on articles/article lists.
   *
   * Example HTML:
   *
   * <nav class="paginator">
   *     <a rel="prev">
   *     <a rel="next">
   */
    .paginator {
        clear: both;
    }

    .paginator [rel=prev] {
        float: left;
    }

    .paginator [rel=next] {
        float: right;
    }

    /* Typography
     ========================================================================== */
    /**
   * Establish baseline.
   */
    html {
        font-size: 16px;
        line-height: 1.5;
    }

    /**
   * Global font and text colour.
   */
    body {
        color: #333333;
        font-family: Comfortaa;
    }

    /**
   * Sans-serif font for main navigation menu.
   */
    .site-navigation {
        font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-weight: bold;
    }

    /**
   * Harmonize size, style and vertical margin of headings.
   */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        clear: both;
        font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }

    h1 {
        margin: 0.6315789em 0;
        font-size: 2.375rem;
        letter-spacing: -0.25px;
        line-height: 1.1842105;
        font-family: Abril Fatface;
    }

    h2 {
        margin: 0.75em 0;
        font-size: 2rem;
        letter-spacing: -0.25px;
        line-height: 1.25;
        font-family: PT Serif;
    }

    h3 {
        margin: 1em 0;
        font-size: 1.5rem;
        letter-spacing: -0.25px;
        line-height: 1.3333333;
        font-family: PT Serif;
    }

    h4 {
        margin: 1em 0;
        font-size: 1.25rem;
        line-height: 1.4;
    }

    h5 {
        margin: 1em 0;
        font-size: 1.125rem;
        line-height: 1.4444444;
    }

    h6 {
        margin: 1em 0;
        font-size: 1rem;
        line-height: 1.5;
    }

    /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
    b,
    strong {
        font-weight: bolder;
    }

    /**
   * Add vertical margin to addresses.
   */
    address {
        margin: 1em 0;
    }

    /**
   * Additional styling for blockquotes.
   */
    blockquote {
        display: block;
        background: #fff;
        padding: 15px 20px 15px 45px;
        margin: 0 0 20px;
        position: relative;

        /*Font*/
        font-family: Comfortaa;
        font-size: 16px;
        line-height: 1.2;
        color: #666;
        text-align: justify;

        /*Borders - (Optional)*/
        border-left: 2px solid #ffdd06;
        font-style: italic;
    }

    blockquote::before {
        content: "\201C"; /*Unicode for Left Double Quote*/
        /*Font*/
        font-family: Georgia, serif;
        font-size: 60px;
        font-weight: bold;
        color: #ffdd06;

        /*Positioning*/
        position: absolute;
        left: 10px;
        top: 5px;
    }

    blockquote::after {
        /*Reset to make sure*/
        content: "";
    }

    blockquote a:hover {
        color: #666;
    }

    blockquote em {
        font-style: italic;
    }

    .button {
        background-color: #ffdd06;
        border: none;
        border-radius: 5px;
        color: black;
        padding: 11px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 17px;
        margin: 4px 2px;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
        cursor: pointer;
        font-variant: normal;
    }

    .button:hover {
        background-color: #7da179;
        color: #ffffff;
        text-decoration: none;
    }

    /**
   * 1. Remove the bottom border in Chrome 57+.
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
    abbr[title] {
        /* 1 */
        border-bottom: 0;

        /* 2 */
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted;
    }

    /**
   * Consistent styling for `mark` and `var` tags.
   */
    mark,
    var {
        padding: 0 0.25em;
        border-radius: 0.25em;
        background: #fff9e1;
        color: #333333;
    }

    /**
   * Harmonize size and style of computer text.
   */
    pre,
    code,
    kbd,
    samp {
        border: 1px solid #e3e3e3;
        border-radius: 0.2857143em;
        background-color: #f7f7f7;
        color: #333333;
        font-family: Menlo, Consolas, Monaco, monospace;
        font-size: 0.875rem;
        line-height: 1.5;
    }

    code,
    kbd,
    samp {
        padding: 1px 0.21429em;
    }

    /**
   * Additional stylng for preformatted text/code.
   *
   * 1. Don't wrap long words.
   * 2. Contain overflow in all browsers.
   * 3. Set tab size to 4 spaces.
   */
    pre {
        padding: 0.5714286em 1.1428571em;

        /* 1 */
        word-wrap: normal;

        /* 2 */
        overflow-x: auto;

        /* 3 */
        -moz-tab-size: 4;
        -o-tab-size: 4;
        tab-size: 4;
    }

    pre code {
        padding: 0;
        border: 0;
        background-color: transparent;
        font-size: 1em;
        text-align: left;
        white-space: pre;
        word-spacing: normal;
        word-break: normal;
        word-wrap: normal;
        direction: ltr;
        -webkit-hyphens: none;
        -ms-hyphens: none;
        hyphens: none;
    }

    /**
   * Prevent `sub` and `sup` elements from affecting the line height in all browsers.
   */
    sub,
    sup.footnote,
    sup {
        position: relative;
        font-size: 0.625em;
        line-height: 0;
        vertical-align: baseline;
    }

    sup {
        top: -0.5em;
    }

    sub {
        bottom: -0.25em;
    }

    /**
   * Harmonize size and style of small text.
   */
    small,
    figcaption,
    tfoot,
    .footnote {
        font-size: 0.8125rem;
        line-height: 1.5;
    }

    figcaption,
    tfoot,
    .footnote {
        color: #585858;
    }

    figcaption {
        margin-top: 0.5em;
        font-style: italic;
    }

    /**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
    hr {
        height: 24px;
        margin: 1em 0;
        border: 0;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24'%3E%3Cpath fill='%23333' d='M0,0c1.742,13.61,54.74,20.912,119.995,15.279C184.922,9.679,238.594,13.024,240,24c-1.744-13.613-54.742-20.913-120.005-15.284C55.078,14.32,1.405,10.973,0,0z'/%3E%3C/svg%3E") 50% 50% no-repeat;
        background-size: 240px 24px;

        /* 1 */
        box-sizing: content-box;

        /* 2 */
        overflow: visible;
    }

    /* Support for non-latin languages (can be removed if not required)
     ========================================================================== */
    /**
   * Bidirectional (bidi) text support.
   * See: https://www.w3.org/International/articles/inline-bidi-markup/#cssshim
   */
    [dir=ltr],
    [dir=rtl] {
        unicode-bidi: -webkit-isolate;
        unicode-bidi: isolate;
    }

    bdo[dir=ltr],
    bdo[dir=rtl] {
        unicode-bidi: isolate-override;
    }

    /**
   * Preferred font for Japanese language.
   */
    :lang(ja) {
        font-family: "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Meiryo UI", sans-serif;
        font-weight: 300;
    }

    /**
   * Preferred font for Korean language.
   */
    :lang(ko) {
        font-family: GulimChe, Gulim, sans-serif;
    }

    /**
   * Preferred font for simplified Chinese (PRC) language.
   */
    :lang(zh-cn) {
        font-family: "PingFang SC", SimHei, sans-serif;
    }

    /**
   * Preferred font for traditional Chinese (Taiwan, Hong Kong) language.
   */
    :lang(zh-tw) {
        font-family: "PingFang TC", PMingLiU, sans-serif;
    }

    /**
   * Suppress `text-decoration` in some RTL languages for better legibility.
   */
    [lang|=ar] a:hover,
    [lang|=fa] a:hover,
    [lang|=ur] a:hover {
        text-decoration: none;
    }

    /**
   * Computer code should be LTR.
   */
    [dir=rtl] code {
        direction: ltr;
    }

    /**
   * Swap image alignment right/left positions in RTL languages.
   */
    [dir=rtl] img.align-left {
        margin: 1em 0 1em 1em;
        float: right;
    }

    [dir=rtl] img.align-right {
        margin: 1em 1em 1em 0;
        float: left;
    }

    /**
   * Swap table caption alignment in RTL languages.
   */
    [dir=rtl] caption {
        text-align: right;
    }

    /**
   * Swap table cell text alignments in RTL languages.
   */
    [dir=rtl] th,
    [dir=rtl] td {
        text-align: right;
    }

    /**
   * Swap menu/list padding positions in RTL languages.
   */
    [dir=rtl] menu,
    [dir=rtl] ol,
    [dir=rtl] ul {
        padding: 0 1.75em 0 0;
    }

    [dir=rtl] .site-navigation ul,
    [dir=rtl] .article-list {
        padding: 0;
    }

    /**
   * Swap definition description margin positions in RTL languages.
   */
    [dir=rtl] dd {
        margin: 0 1.75em 0 0;
    }

    /**
   * Swap checkbox/radio margin positions in RTL languages.
   */
    [dir=rtl] input[type=checkbox] + label,
    [dir=rtl] input[type=radio] + label {
        margin: 0 0 0 0.5em;
    }

    [dir=rtl] input[type=checkbox] + label:last-of-type,
    [dir=rtl] input[type=radio] + label:last-of-type {
        margin: 0;
    }

    /**
   * Swap paginator (prev/next) navigation links on articles/article lists.
   */
    [dir=rtl] .paginator [rel=prev] {
        float: right;
    }

    [dir=rtl] .paginator [rel=next] {
        float: left;
    }

    /**
   * Swap anchor float position on comments.
   */
    [dir=rtl] .comments h4 .comment-anchor {
        float: left;
    }

    /* Embedded content
     ========================================================================== */
    /**
   * Add the correct display in IE 11.
   */
    video {
        display: inline-block;
    }

    /**
   * Make embedded elements responsive.
   */
    img,
    video {
        max-width: 100%;
        height: auto;
    }

    /**
   * Images.
   *
   * 1. Remove the gap between images and the bottom of their containers.
   *
   * Image alignment (compatible with Textile markup syntax).
   *
   * Example HTML:
   *
   * <img class="align-left">
   * <img class="align-right">
   * <img class="align-center">
   */
    img {
        /* 1 */
        vertical-align: middle;
    }

    img.align-left {
        margin: 1em 1em 1em 0;
        float: left;
    }

    img.align-right {
        margin: 1em 0 1em 1em;
        float: right;
    }

    img.align-center {
        display: block;
        margin: 1em auto;
    }

    /**
   * Address margin not present in Safari.
   */
    figure {
        margin: 0;
    }

    /* Tables
     ========================================================================== */
    /**
   * Consistent tables.
   */
    table {
        width: 100%;
        margin-bottom: 1em;
        border-collapse: collapse;
        border-spacing: 0;
    }

    /**
   * Styling of table captions.
   */
    caption {
        margin-bottom: 0.5em;
        font-style: italic;
        text-align: left;
    }

    /**
   * Make table cells align top and left by default.
   */
    th,
    td {
        padding: 0.5em;
        border: 1px solid #d4d4d4;
        text-align: left;
        vertical-align: top;
    }

    /**
   * Emphasize table header.
   */
    thead tr {
        background-color: #eeeeee;
    }

    thead th,
    thead td {
        border: 1px solid #cccccc;
    }

    /**
   * 'Zebra striping' of `tbody` rows.
   */
    tbody tr:nth-child(even) {
        background-color: #f7f7f7;
    }

    /**
   * Adjust padding of table footer due to smaller font size.
   */
    tfoot th,
    tfoot td {
        padding: 0.6666667em;
    }

    /**
   * Multi-row span vertical cell alignments.
   */
    [rowspan] {
        vertical-align: middle;
    }

    /* Lists
     ========================================================================== */
    /**
   * Address paddings set differently.
   */
    menu,
    ol,
    ul {
        padding: 0 0 0 1.75em;
    }

    /**
   * Remove margins from nested lists.
   */
    li > ul,
    li > ol {
        margin: 0;
    }

    /**
   * Address margins set differently.
   */
    dd {
        margin: 0 0 0 1.75em;
    }

    /**
   * Additional styling for article lists.
   *
   * Example HTML:
   *
   * <ul class="article-list">
   */
    .article-list {
        margin: 0 0 2em;
        padding: 0;
        border-top: 1px solid #cccccc;
        list-style: none;
    }

    .article-list li {
        margin-bottom: 0;
        border-bottom: 1px solid #cccccc;
    }

    /* Forms
     ========================================================================== */
    /**
   * 1. Address width being affected by wide descendants in Chrome, Firefox.
   * 2. Define consistent fieldset border, margin, and padding.
   */
    fieldset {
        /* 1 */
        min-width: 0;

        /* 2 */
        margin: 1em 0;
        padding: 1px 1em;
        border: 1px solid #cccccc;
    }

    /**
   * Normalize styling of `legend`.
   *
   * 1. Correct wrapping not present in IE 11 and Edge 12/13.
   * 2. Remove padding so people aren't caught out if they zero out fieldsets.
   * 3. Correct `color` not being inherited from fieldset in IE 11.
   */
    legend {
        /* 1 */
        display: table;

        /* 1 */
        max-width: 100%;

        /* 2 */
        padding: 0;

        /* 3 */
        color: inherit;

        /* 1 */
        white-space: normal;

        /* 1 */
        box-sizing: border-box;
    }

    /**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
    progress {
        vertical-align: baseline;
    }

    /**
   * 1. Prevent elements from spilling out of their parent.
   * 2. Address margins set differently in Firefox 4+, Safari, and Chrome.
   * 3. Correct font properties not being inherited.
   */
    button,
    input,
    optgroup,
    select,
    textarea {
        /* 1 */
        max-width: 100%;

        /* 2 */
        margin: 0;
        color: #000000;
        font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

        /* 3 */
        font-size: 1rem;
        line-height: 1.375;
        box-sizing: border-box;
        vertical-align: baseline;
    }

    /**
   * Remove the inner border and padding in Firefox.
   */
    button::-moz-focus-inner,
    [type=button]::-moz-focus-inner,
    [type=reset]::-moz-focus-inner,
    [type=submit]::-moz-focus-inner {
        padding: 0;
        border-style: none;
    }

    /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
    [type=search]::-webkit-search-decoration {
        -webkit-appearance: none;
    }

    /**
   * Styling of form input fields.
   *
   * 1. Remove browser-specific default styling.
   */
    [type=color],
    [type=date],
    [type=datetime],
    [type=datetime-local],
    [type=email],
    [type=month],
    [type=number],
    [type=password],
    [type=search],
    [type=tel],
    [type=text],
    [type=time],
    [type=url],
    [type=week],
    select,
    textarea {
        height: 2em;
        padding: 0.25em 0.1875em;
        border: 1px solid #cccccc;
        border-radius: 0;
        background: #ffffff;

        /* 1 */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    [type=color]:focus,
    [type=date]:focus,
    [type=datetime]:focus,
    [type=datetime-local]:focus,
    [type=email]:focus,
    [type=month]:focus,
    [type=number]:focus,
    [type=password]:focus,
    [type=search]:focus,
    [type=tel]:focus,
    [type=text]:focus,
    [type=time]:focus,
    [type=url]:focus,
    [type=week]:focus,
    select:focus,
    textarea:focus {
        border-color: #0066ff;
        outline: 1px solid transparent;
    }

    /**
   * 1. Remove any excess padding.
   * 2. Correct margins for inline checkbox/radio labels.
   */
    [type=checkbox],
    [type=radio] {
        /* 1 */
        padding: 0;
    }

    [type=checkbox] + label,
    [type=radio] + label {
        /* 2 */
        margin: 0 0.5em 0 0;
    }

    [type=checkbox] + label:last-of-type,
    [type=radio] + label:last-of-type {
        /* 2 */
        margin: 0;
    }

    /**
   * Correct the cursor style of increment and decrement buttons in Safari.
   */
    [type=number]::-webkit-inner-spin-button,
    [type=number]::-webkit-outer-spin-button {
        height: auto;
    }

    /**
   * Use indicator icon to signify the drop-down ability of `select`.
   */
    select {
        padding-right: 1.5em;
        background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='5' viewBox='0 0 17 5'%3E%3Cpolygon fill='%23333' points='0,0 5,5 10,0'/%3E%3C/svg%3E") right center no-repeat;
        background-size: 1.0625em 0.3125em;
        text-transform: none;
    }

    /**
   * Swap `select` icon position in RTL languages.
   */
    [dir=rtl] select {
        padding-right: 0.1875em;
        padding-left: 1.5em;
        background-position: 0.5em center;
    }

    /**
   * Remove browser-specific `select` UI in IE 11.
   */
    select::-ms-expand {
        opacity: 0;
    }

    /**
   * Remove browser-specific `select` UI in Firefox 4+.
   */
    select:-moz-focusring {
        color: transparent;
        text-shadow: 0 0 0 #000000;
    }

    /**
   * Override height and background set in a previous rule and allow auto height.
   */
    select[size],
    select[multiple] {
        height: auto;
        padding-right: 0.5em;
        background-image: none;
    }

    /**
   * Override height set in rule above and restrict to one line field.
   */
    select[size="0"],
    select[size="1"] {
        height: 2em;
    }

    /**
   * Normalize styling of `optgroup`.
   */
    optgroup {
        color: #000000;
        font-style: normal;
        font-weight: bold;
    }

    /**
   * 1. Restrict to vertical resizing to prevent layout breakage.
   * 2. Remove default vertical scrollbar in IE 11.
   * 3. Remove unwanted space below `textarea` in Safari, Chrome, Opera.
   */
    textarea {
        width: 100%;
        height: auto;
        min-height: 3em;

        /* 1 */
        resize: vertical;

        /* 2 */
        overflow: auto;

        /* 3 */
        vertical-align: top;
    }

    /**
   * Make sure disabled elements really are disabled and styled appropriately.
   *
   * 1. Override default iOS opacity setting.
   * 2. Re-set default cursor for disabled elements.
   */
    [disabled],
    [disabled] option,
    [disabled] optgroup,
    span.disabled {
        border-color: #d4d4d4 !important;
        background: #eeeeee !important;

        /* 1 */
        opacity: 1;
        color: #aaaaaa !important;
        text-shadow: none !important;
        box-shadow: none !important;

        /* 2 */
        cursor: default !important;
    }

    /**
   * Styling for form field validation.
   */
    input:focus:invalid,
    select:focus:invalid,
    textarea:focus:invalid {
        border-color: #9d261d;
        box-shadow: none;
    }

    /**
   * Width display options for `input` fields. Height display options
   * for textareas.
   *
   * Example HTML:
   *
   * <input class="small">
   * <input class="large">
   */
    .small input {
        width: 25%;
        min-width: 151px;
    }

    .small textarea {
        height: 5.5em;
    }

    .large input {
        width: 50%;
        min-width: 302px;
    }

    .large textarea {
        height: 9.75em;
    }

    /**
   * Styling for required field indicators.
   *
   * Example HTML:
   *
   * <b class="required" title="Required">*</b>
   */
    .required {
        border: 0;
        color: #9d261d;
    }

    /* Buttons
     ========================================================================== */
    /**
   * 1. Correct `button` style inheritance in Firefox, IE 11, and Opera.
   * 2. Address `overflow` set to `hidden` in IE 11.
   */
    button {
        /* 1 */
        text-transform: none;

        /* 2 */
        overflow: visible;
    }

    /**
   * 1. Remove browser-specific default styling.
   */
    button,
    [type=button],
    [type=reset],
    [type=submit] {
        background-color: #dfdfdf;
        background-image: linear-gradient(#eeeeee, #dfdfdf);
        display: inline-block;
        position: relative;
        width: auto;
        height: 2em;
        padding: 0.25em 1em;
        border: 1px solid #dfdfdf;
        border-radius: 1em;
        background-clip: padding-box;
        color: #333333;
        font-weight: normal;
        text-align: center;
        text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);

        /* 1 */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        box-shadow: 0 2px 0 #acacac;
    }

    button:hover,
    [type=button]:hover,
    [type=reset]:hover,
    [type=submit]:hover {
        background-color: #e9e9e9;
        background-image: linear-gradient(#f8f8f8, #e9e9e9);
        border-color: #bebebe;
        color: #333333;
        text-decoration: none;
    }

    button:active,
    [type=button]:active,
    [type=reset]:active,
    [type=submit]:active {
        top: 2px;
        border-color: #bebebe;
        color: #1a1a1a;
        text-decoration: none;
        box-shadow: none;
    }

    button:focus,
    [type=button]:focus,
    [type=reset]:focus,
    [type=submit]:focus {
        border-color: #0066ff;
        outline: 1px solid transparent;
    }

    /**
   * Disbaled button additional styling.
   */
    button[disabled],
    [type=button][disabled],
    [type=reset][disabled],
    [type=submit][disabled] {
        top: 2px !important;
    }

    /* Comments
     ========================================================================== */
    /**
   * Styling for user comments.
   *
   * Example HTML:
   *
   * <article class="comments">
   */
    .comments {
        margin-bottom: 1em;
        padding: 1px 1em;
        border-radius: 0.5em;
        background: #f7f7f7;
        word-wrap: break-word;
    }

    .comments h4 .is-author {
        font-weight: normal;
    }

    .comments h4 .comment-anchor {
        float: right;
        font-weight: normal;
    }

    /**
   * Additional styling for article author's comments.
   *
   * Example HTML:
   *
   * <article class="comments comments-author">
   */
    .comments-author {
        background: #efefef;
    }

    /**
   * Styling for user comments preview.
   */
    #cpreview {
        margin-bottom: 2px;
        padding: 1em;
        border-radius: 0.5em;
        background-color: #fff9e1;
    }

    /**
   * Highlight text colour for comment errors.
   */
    .error_message li {
        color: #9d261d;
    }

    /**
   * Highlighting for comment form errors.
   */
    .comments_error {
        border-color: #9d261d;
        box-shadow: 0 0 4px 2px #9d261d;
    }

    /* Popup comments (can be removed if you don't use popups)
     ========================================================================== */
    /**
   * Restrict maximum width of popup container.
   */
    #popup-page .container {
        max-width: 52em;
    }
}

/* ==========================================================================
   Additional layout for screen media 576px and up
   ========================================================================== */
@media only screen and (min-width: 38em) {
    /**
   * Desktop version of the navigation menu. Overrides mobile first version.
   *
   * Example HTML:
   *
   * <nav class="site-navigation">
   *     <ul>
   *         <li class="active"><a></li>
   *         <li><a></li>
   *         <li><a></li>
   *     </ul>
   * </nav>
   */
    .site-navigation {
        border-top: 1px solid #cccccc;
        border-bottom: 1px solid #cccccc;
        background-color: #ffdd06;
    }

    .site-navigation > div {
        width: 88%;
    }

    .site-navigation li {
        float: left;
        border-right: 1px solid #cccccc;
        border-bottom: 0;
    }

    .site-navigation li:first-child {
        border-top: 0;
        border-left: 1px solid #cccccc;
    }

    [dir=rtl] .site-navigation li {
        float: right;
    }

    [dir=rtl] .site-navigation li:first-child {
        border-left: 0;
    }

    [dir=rtl] .site-navigation li:last-child {
        border-left: 1px solid #cccccc;
    }

    .site-navigation a {
        padding: 0.5em 1em;
    }

    .search {
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -1.0625em;
        padding: 0;
        background: transparent;
        z-index: 2;
    }

    [dir=rtl] .search {
        right: auto;
        left: 0;
    }

    .search input[type=search] {
        width: 2.125em;
        padding-right: 0;
        transition: width 0.2s ease-in-out, border-color 0.2s ease-in-out;
        background-color: #eeeeee;
        cursor: pointer;
    }

    .search input[type=search]:hover {
        background-color: #f8f8f8;
    }

    .search input[type=search]:focus {
        width: 16em;
        padding-right: 0.1875em;
        background-color: white;
        cursor: auto;
    }
}

/* ==========================================================================
   Additional layout for screen media 864px and up
   ========================================================================== */
@media only screen and (min-width: 46em) {
    /**
   * Enlarge baseline text size.
   */
    html {
        font-size: 1.125rem;
    }
}

/* ==========================================================================
   Styling and layout for print media
   ========================================================================== */
@media print {
    /**
   * Remove unnecessary global styling from printed media.
   */
    *,
    *::before,
    *::after {
        background: transparent !important;
        color: #000000 !important;
        text-shadow: none !important;
        box-shadow: none !important;
    }

    /**
   * Use a print-friendly font size.
   */
    html {
        font-size: 8pt;
        line-height: 1.5;
    }

    /**
   * Use a print-friendly font family.
   */
    body {
        margin: 0.5cm;
        padding: 2em 5em;
        font-family: "Helvetica Neue", sans-serif;
    }

    /**
   * Visually separate header from body.
   */
    .site-header {
        border-bottom: 1pt solid #000000;
    }

    /**
   * Visually separate footer from body.
   */
    .site-footer {
        margin-top: 12pt;
        border-top: 1pt solid #000000;
    }

    /**
   * Hide unnecessary content from print.
   */
    nav,
    audio,
    video,
    form,
    #comments-form,
    .comments h4 a:last-child,
    .complementary-content,
    .paginator {
        display: none;
    }

    /**
   * Make sure links are not underlined.
   */
    a {
        text-decoration: none;
    }

    /**
   * Show long-form for abbreviations in print.
   */
    abbr[title]::after {
        content: " (" attr(title) ")";
    }

    /**
   * Harmonize size, style and vertical margin of headings.
   */
    h1 {
        margin: 16pt 0;
        font-size: 32pt;
        font-weight: normal;
        line-height: 36pt;
    }

    h2 {
        margin: 14pt 0;
        font-size: 24pt;
        line-height: 28pt;
        page-break-after: avoid;
        orphans: 2;
        widows: 2;
    }

    h3 {
        margin: 12pt 0;
        font-size: 18pt;
        line-height: 22pt;
        page-break-after: avoid;
        orphans: 2;
        widows: 2;
    }

    h4 {
        margin: 11pt 0;
        font-size: 14pt;
        line-height: 18pt;
        page-break-after: avoid;
        orphans: 2;
        widows: 2;
    }

    h5 {
        margin: 10pt 0;
        font-size: 12pt;
        line-height: 16pt;
        page-break-after: avoid;
        orphans: 2;
        widows: 2;
    }

    h6 {
        margin: 9pt 0;
        font-size: 10pt;
        line-height: 14pt;
        page-break-after: avoid;
        orphans: 2;
        widows: 2;
    }

    /**
   * Prevent widows (single final paragraph line on next page) and orphans (single
   * first paragraph line on previous page).
   */
    p {
        orphans: 2;
        widows: 2;
    }

    /**
   * Harmonize size and style of small text.
   */
    footer,
    figcaption,
    tfoot,
    small,
    .footnote {
        font-size: 6pt;
    }

    /**
   * Simple blockquote styling.
   *
   * 1. Avoid blockquotes breaking across multiple pages.
   */
    blockquote {
        padding: 0 0 0 8pt;
        border-left: 3pt solid #000000;
        font-size: 16pt;

        /* 1 */
        page-break-inside: avoid;
    }

    [dir=rtl] blockquote {
        padding: 0 8pt 0 0;
        border-right: 3pt solid #000000;
        border-left: 0;
    }

    /**
   * Simple preformatted text styling.
   *
   * 1. Ensure pre blocks are wrapped when printed.
   */
    pre {
        margin-bottom: 8pt;
        padding: 8pt;
        border: 1pt solid #000000;

        /* 1 */
        white-space: pre-wrap !important;
    }

    /**
   * Use a print-friendly monospaced font and size.
   */
    pre,
    code,
    kbd,
    samp,
    var {
        font-family: "Courier New", Courier, monospace;
    }

    /**
   * Images.
   *
   * 1. Avoid images breaking across multiple pages.
   *
   * Image alignment (compatible with Textile markup syntax).
   *
   * Example HTML:
   *
   * <img class="align-left">
   * <img class="align-right">
   * <img class="align-center">
   */
    img {
        /* 1 */
        page-break-inside: avoid;
    }

    img.align-left {
        margin: 1em 1em 1em 0;
        float: left;
    }

    img.align-right {
        margin: 1em 0 1em 1em;
        float: right;
    }

    img.align-center {
        display: block;
        margin: 1em auto;
    }

    /**
   * Swap image alignment right/left positions in RTL languages.
   */
    [dir=rtl] img.align-left {
        margin: 1em 0 1em 1em;
        float: right;
    }

    [dir=rtl] img.align-right {
        margin: 1em 1em 1em 0;
        float: left;
    }

    /**
   * Ensure margin below `figure`.
   */
    figure {
        margin-bottom: 8pt;
    }

    /**
   * Ensure margin above `figcaption`.
   */
    figcaption {
        margin-top: 4pt;
    }

    /**
   * Simple bullet styling for `ul` unordered lists.
   */
    ul {
        padding: 0 0 8pt 1.8em;
        list-style: square;
    }

    [dir=rtl] ul {
        padding: 0 1.8em 8pt 0;
    }

    /**
   * Simple numerical styling for `ol` ordered lists.
   */
    ol {
        padding: 0 0 8pt 1.8em;
        list-style: decimal;
    }

    [dir=rtl] ol {
        padding: 0 1.8em 8pt 0;
    }

    /**
   * Normalize margins on `dl` definition lists.
   */
    dl {
        padding: 0 0 8pt 1.8em;
    }

    [dir=rtl] dl {
        padding: 0 1.8em 8pt 0;
    }

    /**
   * 1. Make `table` span entire page width.
   * 2. Ensure margin below `table`.
   */
    table {
        /* 1 */
        width: 100%;

        /* 2 */
        margin-bottom: 8pt;
    }

    /**
   * Harmonize styling for `caption`.
   */
    caption {
        margin-bottom: 4pt;
        font-weight: bold;
    }

    /**
   * Display table head across multi-page tables.
   */
    thead {
        display: table-header-group;
    }

    thead th {
        border-top: 1pt solid #000000;
    }

    /**
   * Avoid table rows breaking across multiple pages.
   */
    tr {
        page-break-inside: avoid;
    }

    /**
   * Simple styling for table cells.
   */
    th,
    td {
        padding: 4pt 8pt;
        border-bottom: 1pt solid #000000;
    }

    /**
   * Avoid user comments breaking across multiple pages.
   */
    .comments {
        page-break-inside: avoid;
    }
}