.xTable {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    padding: 0;
    width: 100%;
    }
.xCell {
    box-sizing: border-box;
    flex-grow: 1;
    width: 100%;
    padding: 0.8em 1.2em;
    overflow: hidden;
    list-style: none;
    /*
    border: solid 3px white;
    background: rgba(112, 128, 144, 0.2);
    */
    }
.xCell-left {
    box-sizing: border-box;
    flex-grow: 1;
    width: 100%;
    padding: 0.8em 1.2em;
    overflow: hidden;
    list-style: none;
    /*                
    border: solid 3px white;
    background: rgba(112, 128, 144, 0.2);
    */
    }
.xCell-right {
    box-sizing: border-box;
    flex-grow: 1;
    width: 100%;
    padding: 0.8em 1.2em;
    overflow: hidden;
    list-style: none;
    /*
    border: solid 3px white;
    background: rgba(112, 128, 144, 0.2);
    */
}
.artTable {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 3em 0;
    padding: 0;
    }
.artCell {
    box-sizing: border-box;
    flex-grow: 1;
    width: 100%;
    padding: 1em 1em;
    overflow: hidden;
    list-style: none;
    /*
    border: solid 3px white;
    background: rgba(112, 128, 144, 0.2);
    */
}

/* article text container & items */

.artTextContainer 
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}
.artTextItemLeft
{
    flex-grow: 0;
    min-width: 20%;
    max-width: 30%;
    width: 200px;
}
.artTextItemRight
{
    flex-grow: 2;
    max-width: 70%;
    min-width: 60%;
    padding-left: 15px;
}
.artTextItemRight a {

    color: #0000FF;
    font-weight: bold;
    text-decoration: none;
}
.artTextItemRight a:hover {

    text-decoration: underline;
}
.artEmbedLeft
{
    flex-grow: 0;
    min-width: 20%;
    max-width: 30%;
    width: 200px;
}
.artEmbedRight
{
    flex-grow: 2;
    max-width: 20%;
    min-width: 10%;
    padding-left: 15px;
}
.artEmbedContainer 
{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    font-size: small;
    margin-bottom: 20px;
}
.artEmbedItem
{
    flex-grow: 0;
}

.artImageContainer 
{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
}
.artImageItem
{
    flex-grow: 2;
    min-width: 50%;
}
.artImageLeftSideItem
{
    flex-grow: 0;
    min-width: 30%;
    max-width: 30%;
}
.artImageRightSideItem
{
    flex-grow: 0;
    min-width: 10%;
    max-width: 20%;
}
.artCodeItem
{
    min-width: 100%;
    max-width: 100%;
    margin: auto;
}

/* -- quoting --*/
.quote {
    display:inline-block;
    margin:1em;
    overflow:hidden;
}
blockquote 
{
    background-color: #fff;
    border: solid 2px #757575;
    display: inline-block;
    margin: 0;
    padding: 1em;
    position: relative;
}
blockquote:before 
{
  background-color: #fff;
  bottom: -10%;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: -10%;
  transform: rotate(-15deg) skew(5deg);
}
cite {
  display: block;
  font-style: italic;
  text-align: right;
}
cite:before {
    content: "- ";
}
blockquote > * {
    position: relative;
    z-index: 1;
}

/* mobile */

@media screen and (max-device-width: 480px) 
{
    .artTextContainer 
    {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
    }
    .artTextItemLeft
    {
        min-width: 80%;
    }
    .artTextItemRight
    {
        min-width: 90%;
    }

    .artImageContainer 
    {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .artImageItem
    {
        min-width: 100%;
    }
    .artImageLeftSideItem
    {
        min-width: 80%;
        padding-left: 20px;
    }
    .artImageRightSideItem
    {
        min-width: 80%;
        padding-left: 20px;
    }

    .xTable-cols > .xCell-left {
        width: 30%;
    }
    .xTable-cols > .xCell-right {
        width: 70%;
    }
    .artTable-cols > .artCell {
        width: 70%;
    }
    /* for keyIndex.php*/
    .keyTable-cols > .artCell {
        width: 30%;
        /*border: solid 3px white;*/
        margin: 3px;
        background: rgba(145, 165, 186, 0.2);
        border-radius: 10px;        
    }    
}

/* mobile tablet device */

@media screen and (min-device-width: 480px) and (max-device-width: 1024px) 
{
    .artTextContainer 
    {
        padding: 20px;
    }
    .artTextItemRight
    {
        max-width: 90%;
        min-width: 70%;
    }
    .artImageLeftSideItem
    {
        min-width: 80%;
        padding-left: 40px;
    }
    .artImageRightSideItem
    {
        min-width: 80%;
        padding-left: 40px;
    }

    
    .xTable-cols > .xCell-left {
        width: 30%;
    }
    .xTable-cols > .xCell-right {
        width: 70%;
    }
    .artTable {
        display: flex;
        flex-wrap: wrap;
        margin: auto;
        padding: 0;
        width: 100%;
    }
    .artTable-cols > .artCell {
        width: 50%;
    }
    /* for keyIndex.php*/
    .keyTable-cols > .artCell {
        width: 20%;
        /*border: solid 3px white;*/
        margin: 3px;
        background: rgba(145, 165, 186, 0.2);
        border-radius: 10px;        
    }    
}

/* desktop */

@media only screen and (min-width: 1024px) {

    .xTable {
            display: flex;
            flex-wrap: wrap;
            margin: auto;
            padding: 0;
            width: 80%;
    }
    .xTable-cols {
        width: 100%;
    }
    .xTable-cols > .xCell-left {
            width: 15%;
    }
    .xTable-cols > .xCell-right {
            width: 35%;
    }
    .xTable-cols > .wCell-left {
        width: 30%;
    }
    .xTable-cols > .wCell-right {
            width: 70%;
    }
    .artTable {
        display: flex;
        flex-wrap: wrap;
        margin: auto;
        padding: 0;
        width: 100%;
    }
    .artTable-cols > .artCell {
            width: 40%;
    }
    /* for keyIndex.php*/
    .keyTable-cols > .artCell {
        width: 20%;
        /*border: solid 3px white;*/
        margin: 3px;
        background: rgba(145, 165, 186, 0.2);
        border-radius: 10px;        
    }    
}