@media screen
{
    body
    {
        background-color: black; /*width:400px;*/
        min-height: 400px;
    }
    
    h1,h2,h3
    {
        font-size:large
    }
    
    p
    {
        font-size:medium;
    }
    
    .LockOff
    {
        display:none;
        visibility: hidden;
    }
    
    .LockOn
    {
        display: block;
        visibility: visible;
        position: fixed;
        z-index: 999;
        /*
        top: 0px;
        left: 0px;
        width: 105%;
        bottom: 0px;
        height: 500vh;
        */
        top:0px;
        left:0px;
        width:3000pt;
        height:3000pt;
        background-color: black;
        text-align: center;
        padding-top: 20%;
        filter: alpha(opacity=75);
        opacity: 0.75;
    }
    
    .pageToolBarTop
    {
        position: absolute;
        top: 0pt;
        left: 0pt;
        height: 30pt;
        right: 0pt;
        background-color: #404040;
        border-bottom: solid 2px black;
        color: White;
        font-family: Arial;
        font-size: 18pt;
        /*max-width:768px;*/
    }
    
    .pageToolBarTop h1
    {
        padding: 0pt;
        margin-left: 5pt;
        font-size: 12pt;
        color: white;
    }
    
    .pageContainerMain
    {
        border: 1px solid black; /* #C1EEFF;*/
        position: relative;
        top: 24pt;
        bottom: 0pt;
        right:0pt;
        height:auto;
        left: 0pt;
        width:100%;
        background-color: #000000;
        color: White;
        font-family: Arial;
        font-size: 18pt;
        max-height:100px;
        /*max-width:400px;*/
    }
    
    .pageContainerMainInner
    {
        
        /*position: absolute;
        top: 0pt;
        height:350pt;
        right:0pt;
        left: 0pt;*/
        background-position: center center;
        background-image: url('../main/interfaceslate.jpg');
        background-repeat:no-repeat;
        background-color: transparent;
        background-position: left center;
        color: White;
        font-family: Arial;
        font-size: 18pt;
    }
    
    .pageContainerMainInner2
    {
        border: 1px solid #C1EEFF;
        position: absolute;
        top: 100pt;
        height:100pt;
        right:0pt;
        left: 0pt;
        background-position: center center;
        background-image: url('../main/background1.jpg');
        background-repeat: repeat-x;
        background-color: transparent;
        background-position: left center;
        color: White;
        font-family: Arial;
        font-size: 18pt;
    }
    
    .mPageTitleText
    {
        position:relative;
    	left:0pt;
    	right:40pt;
    	width:auto;
    	top:10pt;
    	font-size:larger;
    	padding-left:20px;
    	background-image:url('main-content-image-normal.jpg');
        background-position:-36pt center;
        height:60px;
        margin-bottom:5pt;
    }
    
    .mMenu
    {
        min-width:200px;
        border-radius: 4px 4px;
		-webkit-border: 4px 4px;
		-moz-border: 4px 4px;

    }
    
    .mMenu[attr="t"] li a
    {
        
    }
    
   
    .mMenu[attr="t"] li a:hover
    {
        color:Orange;
        -webkit-transition:all 0.3s ease-out;
        transition:all 0.3s ease-out;
    }
    
    .mMenu[attr="t"] li a:active
    {
        color:white;
    }
    
    .mMenuCollapse
    {
        width:10pt;
        height:20pt;
    }
    
    .mMenuCollapse .mMenu
    {
        position:relative;
    	left:10pt;
    	top:10pt;
    	
    	border:solid 1px white;
    	font-size:18pt;
        list-style-type:square;
        background-image: url('../main/background3.jpg');
        background-position: center center;
        background-repeat: repeat;
        
    }
    
    .mMenu[attr="t"]
    {
        /*position: relative;
        left: 0pt;
        right: 40pt;
        width: auto;
        top: 10pt;*/
        border: 1px solid #80744C;
        font-size: large;
        list-style-type: square;
        background-image: url('../mobile/panel001.jpg');
        background-position: top center;
        background-size:5pt 200pt;
        background-repeat: repeat-x;
        text-shadow:1px 1px 6px black;
    }
    
    .mMenu[attr="u"]
    {
        border: 2px solid #424554;
        font-size: large;
        list-style-type: none;
        background-image: none;
        background-position: center top;
        background-size: 5pt 200pt;
        background-repeat: repeat-x;
        text-shadow: 1px 1px 6px black;
        background-color: black;
    }
    
    .mMenu[attr="t"]:active
    {
        /*position:relative;
    	left:0pt;
    	top:10pt;*/
    	background-image: url('../mobile/panel002.jpg');
    	background-position: center center;
    	background-repeat:repeat;
    	border:solid 1px orange;
    	font-size:large;
        list-style-type:square;
    }
    
    .mMenu[attr="b"]
    {
        position:relative;
        top:20pt;
        left:10pt;
        
        border:solid 1px white;
        font-size:large;
        list-style-type:square;
        background-image: url('../main/background3.jpg');
        background-position: center center+3;
        background-repeat: repeat;
    }
    
    .mMenu[attr="s"]
    {
        /*position:relative;
        top:20pt;
        left:10pt;*/
        
        height:10pt;
        background-image:none;
    }
    
    
    
    .mMenu h3
    {
        position:inherit;
        background-position: left top;
        /*background-image: url(../main/background5.jpg);*/
        background-color: #80744C;
        background-repeat: repeat-x;
        padding-left: 6pt;
        padding-top: 3pt;
        padding-bottom: 6pt;
        margin-top:0pt;
        font-size: large;
    }
    
    .mMenu[attr="u"] h3
    {
        position: inherit;
        background-position: left top; /*background-image: url(../main/background5.jpg);*/
        background-color: #666666;
        background-repeat: repeat-x;
        border-bottom: 1px solid #666666;
        padding-left: 6pt;
        padding-top: 3pt;
        padding-bottom: 6pt;
        margin-top: 0pt;
        font-size: large;
        border-bottom-color: #333333;
    }
    
    .mMenu .cot-hide-heading-padding
    {
        margin-bottom:0pt;
    }
    
    .mMenu .cot-hide-list
    {
        display:none;
        -webkit-transition:all 0.3s ease-out;
        transition:all 0.3s ease-out;
    }
    
    .mMenu .cot-show-heading-padding
    {
        margin-bottom:4pt;
        -webkit-transition:all 0.3s ease-out;
        transition:all 0.3s ease-out;
    }
    
    .mMenu .cot-show-list
    {
        display:block;

    }
    
    .mMenu .nolist
    {
        list-style-type:none;
        padding-left:10pt;
    }li
    {
        height:26pt;
    }
    
    .mMenuCollapse h3
    {
        width:10pt;
    }
    
    .mMenu li
    {
        color: #9D9D9D;
        font-size: large;
        border-bottom-color: #4E483A;
    }
    
    .mMenuCollapse li 
    {
        width:8pt;
    }
    
    .mMenu li[attr="a"]
    {
        
        height:35pt;
        border-bottom:solid 1px white;
        padding-top:8pt;
    }
    
    .mMenu li[attr="a"] a:active
    {
  
        height:35pt;
        padding-top:8pt;
        color:orange;
        -webkit-transition:all 0.3s ease-out;
        transition:all 0.3s ease-out;
    }
     
    .mMenu li[attr="b"]
    {
 
        height:35pt;
        padding-top:4pt;
    }
    
    .mMenu li[attr="b"] a:active
    {
        color:Orange;
        -webkit-transition:all 0.3s ease-out;
        transition:all 0.3s ease-out;
    }
    
    .mMenu li[attr="f"]
    {
        height:25pt;
        color:White;
        cursor:pointer;
    }
    
    .mMenu li[attr="f"]:hover
    {
        color:Orange;
        -webkit-transition:all 0.3s ease-out;
        transition:all 0.3s ease-out;
    }
    
    .mMenu li a
    {
        text-decoration:none;
        color:White;
    }
    
    .mContent 
    {
        padding:0pt;
    }
    
    .mContent a .right
    {
        float:right;
    }
    
    .pageContainerMain .mNavbar
    {
        overflow: hidden;
        background-color: #333;
        /*position: sticky;
        position: -webkit-sticky;
        top: 10pt;*/
        
    }
    
    .pageContainerMain .mNavbar a
    {
        float:left;
        display: block;
        text-decoration: none;
        padding:14px 20px;
        text-shadow:1px 1px 8px black;
    }
    
    .pageContainerMain .mNavbar a:hover
    {
        background-color: #CCCCCC;
    }
    
    .pageContainerMain .mNavbar .right
    {
        float:right;
    }
    
    .pageContainerMain .mNavbar .active
    {
        background-color: #666666;
    }
   
    .mContent[attr="r"]
    {
        
        left:0pt;
        right:0pt;
        /*top:60pt;*/
        bottom:0pt;

    }
    
  
    .mContent[attr="p"]
    {

    }
    
    .mContent[attr="b"]
    {
        top:120pt;
        margin-left:228pt;
        margin-right:22pt;
        font-size:26pt;
    }
    
    .mPanelContent[attr="r"]
    {
        background-color:White;
        color:Black;
        min-height:120pt;
        padding:8pt;
        font-size:smaller;
    }	
    
    /* controls the background of the bible scriptures */
    .mContentBookBackground
    {
        background-color:White;
        color:Black;
        min-height:580pt;
        bottom:20pt;
        min-width:310px;
        padding:8pt;
        font-size:smaller;
    }
    
    .mContentBookBackground[attr="r"]
    {
        position: absolute;
        background-color:White;
        height:150pt;
        top:0pt;
        left:0pt;
        right:0pt;
    }
    
    /* Bible Chapter Viewer Tool Classes */
    .mContentBook
    {
        position:relative;
        top:10pt;
        width:98%;
        min-height:100pt;
        max-height:400pt;
        left:10pt;
        overflow:scroll;
        /*overflow-x:hidden;*/
        color:Black;
        font-size:large;
    }
    
    .pBookNavigationContainer
    {
        float:left;
        background-color:#666666;
        width:100%;
    }
    
    .mBookSelectionTitle
    {
        font-size:large;
    }
    
    .mBookSelectionControls
    {
        float:left;
        background-color: #666666;
        padding: 8pt;
        font-weight: bold;
        border-bottom: solid 1px silver;
        border-bottom-color: #666666;
        border-top-style: solid;
        border-bottom-style: solid;
        border-top-width: 1px;
        border-bottom-width: 1px;
        border-top-color: #999999;
        width:310px;
        height:50px;
        font-size:large;
        color:White;
        text-decoration: none;
        
    }
    
    .mCollectionSelectionControls
    {
        float: left;
        background-color: #100E0F;
        padding: 8pt;
        font-weight: bold;
        border-bottom: solid 1px silver;
        border-bottom-color: #666666;
        border-top-style: solid;
        border-bottom-style: solid;
        border-top-width: 1px;
        border-bottom-width: 1px;
        border-top-color: #999999;
        width:310px;
        height:50px;
        font-size: large;
        color: White;
        text-decoration: none;
        
    }
    
    .pBookChapterRowClass
    {
        
    }
    
    .mBookSelectionContent
    {
        
    }
    
    .mContent h1
    {
        margin-top:2pt;
        margin-bottom:4pt;
    }
    
    .mPanelHeading
    {
        background-color: #666666;
        padding: 8pt;
        font-weight: bold;
        border-bottom: solid 1px silver;
        border-bottom-color: #666666;
        border-top-style: solid;
        border-bottom-style: solid;
        border-top-width: 1px;
        border-bottom-width: 1px;
        border-top-color: #999999;
    }
    
    .mPanelContent
    {
        background-color:White;
        color:Black;
        padding:8pt;
    }
    
    .mPanelContent[attr="c"]
    {
        background-color:White;
        color:Black;
        min-height:120pt;
        padding:8pt;
        font-size:smaller;
    }	
    
    /* animations for bible navigation */
    .mContent .mImageButtonNormal_Home
    {
        clear:both;
        background-image:url('mhome.jpg');
        background-position: center center;
        background-repeat: no-repeat;
        font-size:1pt;
        cursor:hand;
        width:62px;
        height:48px;
        cursor:hand;
        border:1px solid white;
    }
    
    .mContent .mImageButtonNormal_Home:hover
    {
        background-image:url('mhomeH.jpg');
        background-position: center center;
        background-repeat: no-repeat;
        font-size:1pt;
        cursor:hand;
        width:62px;
        height:48px;
        cursor:hand;
        border:1px solid green;
    }
    
    .mContent .mImageButtonNormal_Home:active
    {
        background-image:url('mhomeA.jpg');
        background-position: center center;
        background-repeat: no-repeat;
        font-size:1pt;
        cursor:hand;
        width:62px;
        height:48px;
        cursor:hand;
        border:1px solid orange;
    }
    
    .mContent .mImageButtonNormal_Search
    {
        background-image:url('msearch.jpg');
        background-position: center center;
        background-repeat: no-repeat;
        font-size:1pt;
        cursor:hand;
        width:62px;
        height:48px;
        cursor:hand;
        border:1px solid white;
    }
    
    .mContent .mImageButtonNormal_Search:hover
    {
        background-image:url('msearch.jpg');
        background-position: center center;
        background-repeat: no-repeat;
        font-size:1pt;
        cursor:hand;
        width:62px;
        height:48px;
        cursor:hand;
        border:1px solid green;
    }
    
    /* NEW MOBILE CLASSES */
    .mContentCanvis
    {
        background-color:black;
        color:Black;
        min-height:500pt;
    }
    
    .bibleContainerForControls
    {
        clear:both;
        position:sticky;
        position: -webkit-sticky;
        top:0;
    }

    
    .bibleSelectionContainersCollection
    {
        border-top: 1px solid #CCCCCC;
        border-bottom: 1px solid #646157;
        color: #CCCCCC;
        background-color: #646157;
        padding: 4pt;
        border-radius: 4px 4px;
        -webkit-border: 4px 4px;
        -moz-border: 4px 4px;
        text-shadow: 1px 1px 8px black;
        border-top-color: #CCCCCC;
        border-bottom-color: #414038;
        
        
    }
    
    .bibleSelectionContainersBook
    {
        color: White;
        padding: 4pt;
        background-color: #795A53;
        border-top: 1px solid #795A53;
        border-bottom: 1px outset #795A53;
        border-radius: 4px 4px;
        -webkit-border: 4px 4px;
        -moz-border: 4px 4px;
        text-shadow: 1px 1px 8px black;
        border-top-color: #9B7871;
        border-bottom-color: #4D3935;
        width:70%;
        float:left;
    }
    
    .bibleSelectionContainersChapter
    {
        color: White;
        padding: 4pt;
        background-color: #795A53;
        border-top: 1px solid white;
        border-bottom: 1px outset black;
        border-radius: 4px 4px;
        -webkit-border: 4px 4px;
        -moz-border: 4px 4px;
        text-shadow: 1px 1px 8px black;
        border-top-color: #CCCCCC;
        border-bottom-color: #333333;
        width:30%;
        float:left;
    }
    
    .dropdownlistStyleforbible
    {
        border:1px solid black;
        padding:2pt;
        border-radius: 4px 4px;
        -webkit-border: 4px 4px;
        -moz-border: 4px 4px;
    }
    
    .bibleContentCanvis
    {
        padding:12pt;
        z-index:20;
        width:100%;
    }
    
    #preload-images
    {
         visibility: none;
    }
    
    .specialDataTrack 
    {
        
    }
    
    .specialDataTrack .blue-1
    {
        color: #ADD8E6;
    }
    
    .specialDataTrack .Title
    {
        background-color:red;
        color:White;
    }
    
    .specialDataTrack .dataTitle
    {
        font-size:14px;
        font-weight:bolder;
        text-shadow: 1px 1px 8px black;
    }
    
    .specialDataTrack .Data
    {
        background-color:#000055; 
        color:White;
        background-image:url('irma.jpg');
        background-repeat:no-repeat;
        background-position: right;
    }
    
    .specialDataTrack .tinyText
    {
        font-size:10px;
    }
    
    .specialDataTrack .smallText
    {
    }
    
    .specialDataTrack .normalText
    {
        font-size:12px;
    }
    
    .specialDataTrack .largeText
    {
        font-size:14px;
        color:White;
    }
    
    .specialDataTrack .exLargeText
    {
        color:White;
        font-size:xx-large;
        text-shadow: 1px 1px 8px black;
    }
    
    .mFooterController
    {
        position:absolute;
        top:38pt;
        left:230px;
        height:40px;
        width:40px;
        font-family:@Arial Unicode MS;
    }
    
    .mProgressImage
    {
        width:50px;
        height:50px;
        font-family:@Arial Unicode MS;
        font-size:smaller;
        color:White;
    }
    
    html {
    font-family: "Lucida Sans", sans-serif;
    }
    
    * {
        box-sizing: border-box;
    }
    
    .row::after 
    {
        content: "";
        clear: both;
        display: block;
    }
    
    [class*="col-"] 
    {
        float: left;
        padding: 15px;
    }
    
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 23%;}
    .col-3a {width:25%;}
    .col-4 {width: 28.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 47%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    
    .aside
    {
        background-color: #3E3936;
        border: 1px solid #80744C;
        padding: 0px;
        margin-bottom: 12pt;
        min-width: 120pt;
        color: #ffffff;
        text-align: center;
        font-size: 14px;
        border-radius: 4px 4px;
        -webkit-border: 4px 4px;
        -moz-border: 4px 4px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    
    .aside .cot-text-gray
    {
        color:orange;
    }
    
    .aside p
    {
        margin: 0pt;
        text-align: left;
        padding: 13pt;
        border-bottom: 1px solid #c0c0c0;
        border-top: 1px solid #c0c0c0;
        border-bottom-color: #302C29;
        border-top-color: #59524D;
    }
    
    .aside h3
    {
        text-shadow:1px 1px 8px black;
    }
    
    .aside p:hover
    {
        margin: 0pt;
        text-align: left;
        background-color: #C0C0C0;
        color: Black;
    }
    
    .aside2
    {
        background-color: #80744C;
        padding: 0px;
        min-width:120pt;
        color: #ffffff;
        text-align: center;
        font-size: 14px;
        border-radius: 4px 4px;
        -webkit-border: 4px 4px;
        -moz-border: 4px 4px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    
    .aside2 h3
    {
        text-shadow:1px 1px 8px black;
        padding-top:6pt;
    }
    
    .aside2 p
    {
        font-size: smaller;
        margin: 0pt;
        text-align: left;
        padding: 13pt 4pt 13pt 10pt;
        border-bottom: 1px solid #c0c0c0;
        border-top: 1px solid #c0c0c0;
        border-bottom-color: #625839;
        border-top-color: #A99C70;
    }
    
    .aside2 p:hover, p:active
    {
        background-color: #D3C6A9;
        color: Black;
        text-shadow:0px 0px 0px transparent;
    }
    
    .astitle
    {
        text-shadow:1px 1px 8px black;
    }
    
    .asLineItem
    {
        
    }
    
    .space
    {
        padding-right:5pt;
    }
    
    .articleview
    {
        border: 1px solid gray;
        background-color: White;
        color: #000000;
        font-size: x-small;
        padding: 0pt;
        margin-bottom: 12pt;
        border-radius: 4px 4px;
        -webkit-border: 4px 4px;
        -moz-border: 4px 4px;
    }
    
    .articleview[attr=i] 
    {
        border: 1px solid gray;
        background-color: White;
        color: #000000;
        font-size: x-small;
        padding: 0pt;
        margin-bottom: 12pt;
        border-radius: 4px 4px;
        -webkit-border: 4px 4px;
        -moz-border: 4px 4px;
    }
    
    
    .articleviewModal
    {
        border: 1px solid gray;
        background-color: White;
        color: #000000;
        font-size:medium;
        padding: 0pt;
        margin-bottom: 12pt;
        border-radius: 4px 4px;
        -webkit-border: 4px 4px;
        -moz-border: 4px 4px;
    }
    
    .articleview .cot-av-th1
    {
        color: #C0C0C0;
        padding: 6pt;
        margin-top: 0pt;
        margin-bottom: 0pt;
        background-color: #663333;
        border-bottom: 1px solid #424554;
        text-shadow: 1px 1px 8px black;
    }
    
    .articleview .cot-av-th2
    {
        color: #C0C0C0;
        padding: 6pt;
        margin-top: 0pt;
        margin-bottom: 0pt;
        background-color: #666699;
        border-bottom: 1px solid #424554;
        text-shadow: 1px 1px 8px black;
    }
    
    .articleviewStormHurricane
    {
        border: 1px solid gray;
        background-color: White;
        color: #000000;
        background-image:url('irma.jpg');
        background-repeat:no-repeat;
        font-size: x-small;
        padding: 0pt;
        margin-bottom: 12pt;
        border-radius: 4px 4px;
        -webkit-border: 4px 4px;
        -moz-border: 4px 4px;
    }
    
    .articleview h3
    {
        color: #C0C0C0;
        padding:6pt;
        margin-top: 0pt;
        margin-bottom: 0pt;
        background-color:Gray;
        border-bottom:1px solid #424554;
		text-shadow:1px 1px 8px black;
    }
    
    .articleview h2
    {
        padding-left:6pt;
        padding-right:6pt;
        color:Black;
        font-weight:bold;
        font-size:18px;
    }
    
    .articleview p
    {
        color: #333333;
        padding: 8pt;
        background-color: #F2F2F2;
        margin: 0pt;
    }
    
    .articleview li
    {
        font-size:12pt;
    }
    
    .articleview .pclear
    {
        color: #333333;
        padding: 8pt;
        background-color: transparent !important;
        margin: 0pt;
    }
    
    .articleview .toolHeading
    {
        font-size:18pt;
        text-shadow:1px 1px 8px gray;
    }
    
    .articleview .afooter
    {
        font-size:small;
        border-top:1px solid black;
        position:relative;
        bottom:0px;
        padding:4pt;
        /*height:24pt;*/
        font-weight: bolder;
    }
    
    .pageContainerMain .footer
    {
        background-color: #424554;
        color: #ffffff;
        text-align: center;
        font-size: 14px;
        padding: 15px;
    }
    
    .pageContainerMain .footer a
    {
        text-decoration: none;
    }
    
    .pageContainerMain .footer a:active
    {
        color:Orange;
    }
    
    .pageContainerMain .footer a:hover
    {
        color:Orange;
        -webkit-transition:all 0.3s ease-out;
        transition:all 0.3s ease-out;
    }
    
    .chat-input-btn
    {
        width:130px;
        float:left;
    }
   
    .chat-input
    {
        min-width:300px;
    }
    
    
    .chat-input-control
    {
        min-width:300px;
        position:relative;
        width:80%;
        right:0px;
        left:0px;
    }
    
    .chatroom-container
    {
        background-color:White;
        border:solid 1px orange;
        position: relative;
        bottom:0pt;
        left:0pt;
        right:0pt;
        height:95vh;
        width:100%;
        min-width:300px;
        min-height:300px;
    }
    
    .chat-nicknames-list-frame
    {
        position: relative;
        float: right;
        top: 0;
        bottom:4pt;
        height:70vh;
        width: 120pt;
        text-align: left;
        margin: 4pt;
        border: solid 1px orange;
        min-height: 100px;
    }
    
    .chat-nicknames-list-container
    {
        background-color: Black;
        /*color: white;*/
        text-align: center;
        padding-top: 6pt;
        padding-bottom: 6pt;
        height: 26pt;
        line-height: 14pt;
        font-size: medium;
    }
    
    .chat-nicknames-list
    {
        color: Black;
        font-size:medium;
        position:relative;
        left: 5pt;
        right: 0pt;
        top: 4pt;
        bottom: 0pt;
        height: calc(100% - 44pt);
        width: 100pt;
        margin: 4pt;
        overflow:scroll;
        overflow-x: hidden;
    }
    
    .chat-messages-container
    {
        position: Relative;
        top: 4pt;
        min-width: 280px;
        /*min-height: 300px;*/
        height:90vh;
        overflow: scroll;
        overflow-x: hidden;
        bottom: 20pt;
    }
    
    .chat-messages-with-display
    {
            
    }
    
    .chat-messages
    {
        position: relative;
        top: 0pt;
        min-width: 250px;
        bottom: 4pt;
        padding-right:2pt;
        margin-left: 10pt;
        font-size:medium;
        color:Black;
    }
    
    
    .chat-messages-data
    {
        height:20%;
    }
    
    .chat-messages .messageTimeStamp
    {
        color:dimgray;
        font-size:smaller;
    }
    .chat-messages a[attr="usernames"]
    {
        color:orange;
    }
    .chat-messages a[attr="adminusernames"]
    {
        color:  blue;
    }
    .chat-messages a[attr="userlinkmfl"]
    {
        color: #663300;
    }
    
    .chat-image-user
    {
        width:60px;
        height:60px;
    }
    
    .cot-chat-display-image-a
    {
        height:170px;
    }
    
    .chat-messages .chat-admin-message-style
    {
        background-color: #E6DDCC;
    }
    
    .chat-messages .chat-admin-message-flower-style
    {
        background-color: #FFE6FF;
    }
    
    #navbar
    {
        width:100%;
        background-color: #000;
        overflow: auto;
        transition: top 0.3s;
    }
    
    /*#navbar a
    {
        float:left;
        color:White;
        text-decoration:none;
        font-size:14px;
        width:50%;
        text-align: center;
        
    }*/
    
    
    #navbar .inNavbarMenu
    {
        width:50%;
        background-color:#000;
        overflow: auto;
    }
    
    #navbar .inNavbarMenu a
    {
        float:left;
        padding:4pt;
        color:White;
        text-decoration:none;
        font-size:14px;
        width:16%;
        text-align: center;
    } 
    
    #navbar .inNavbarMenu .aMedium
    {
        width:50%;
    }
    
    #navbar .inNavbarMenu a:hover 
    {
        background-color: #607D8B;
    }
    
    #navbar .inNavbarMenu a:active
    {
        background-color:Orange;
    }
    
    #navbar .inNavbar
    {
        width:50%;
        background-color: #000;
        overflow: auto;
    }
    
    #navbar .inNavbar a
    {
        float:left;
        padding:4pt;
        color:White;
        text-decoration:none;
        font-size:14px;
        width:16%;
        text-align: center;
    }
    
    #navbar .inNavbar .aMedium
    {
        width:50%;
    }
    
    #navbar .inNavbar a:hover
    {
        background-color: #607D8B;
    }
    
    #navbar .inNavbar a:active
    {
        background-color:Orange;
    }
    
    .articleview .* 
    {
        box-sizing: border-box;
    }
    
    .articleview .row 
    {
        /* top right bottom left */
        margin:0 -1px 9px 2px;
     
    }
    
    .articleview .row .column
    {
        float:left;
        width:33%;
        padding: 0 5px;
    }
    
    .articleview .row:after {
        content: "";
        display: table;
        clear: both;
    }
    
    .articleview .row .column .card 
    {
        box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 1);
        padding: 4px;
        text-align: center;
        background-color: #444;
        color: white;
    }
    
    .articleview .row .column .card h3
    {
        background-color:#444;
        color:White;
    }
    
    .articleview .row .column .card p
    {
        background-color:#444;
        color:White;
    }
    
    .articleview .row .column .card p i
    {
        font-size:34px;
        text-shadow:3px 3px 8px black;
    }
    
    
}

@media only screen and (max-width:768px) 
{
    [class*="col-"]
    {
        width: 100%;
    }
    
    [class*="chat-input-control"]
    {
        width:70%;
    }
    
    [class*="chat-input-btn"]
    {
        width:130px;
    }
    [class*="chat-messages"]
    {
        bottom:4pt;
    }
    
    
}

@media only screen and (max-width:580px)
{
    
    #navbar .inNavbarMenu
    {
        display:none;
    }
    
    [class*="col-"]
    {
        width: 100%;
    }
    
    [class*="chat-input-control"]
    {
        width:70%;
    }
    
    [class*="chat-input-btn"]
    {
        width:130px;
    }
    
    [class*="chat-nicknames-list-frame"]
    {
        width:0pt;
        /*visibility: hidden;*/
    }
    [class*="chat-nicknames-list"]
    {
        width:0pt;
        visibility:hidden;
    }
    [class*="chat-messages-container"]
    {
        width:100%;
        top:0pt;
        bottom:0pt;
        height:95vh;
        padding-top:0pt;
        position:absolute;
    }
    
    [class*="chat-messages"]
    {
        width:96%;
        padding-right:4pt;
        top:10pt;
        height:90vh;
        bottom:20pt;
        position:absolute;
    }
    
    [class*="chat-image-user"]
    {
        width:30px;
        height:30px;
    }
}

@media only screen and (max-width:500px) 
{
    #navbar .inNavbarMenu
    {
        display:none;
        
    }
    
    [ckass*="pageToolBarTop"] {
	    width:100%;
    }

    [class*="chat-input-control"]
    {
        width:100%;
    }
    
    [class*="chat-input-btn"]
    {
        width:100%;
    }
    
    [class*="chat-nicknames-list-frame"]
    {
        width:0pt;
        /*visibility: hidden;*/
    }
    
    [class*="chat-nicknames-list-container"]
    {
        width:0pt;
        /*visibility: hidden;*/
    }
    
    [class*="chat-nicknames-list"]
    {
        width:0pt;
        
        visibility: hidden;
    }
    
    [class*="chat-messages-container"]
    {
        
        width:100%;
        top:10pt;
        bottom:20pt;
        height:90vh;
        padding-top:10pt;
        position:absolute;
    }
    
    [ckass*="chat-messages-with-display"]
    {
        top:0px;
        position:absolute;
        height:100pt;
    }
    
    [class*="chat-messages"]
    {
        width:94%;
        padding-right:4pt;
        top:5pt;
        bottom:5pt;
        position:absolute;
    }
    
    [class*="chat-image-user"]
    {
        width:18px;
        height:18px;
    }
    
    #navbar .inNavbar a 
    {
        float:none;
        display:block;
        width:100%;
        text-align:left;
    }
    
    #navbar .inNavbar .aMedium
    {
        float:none;
        width:100%;
        display:block;
        text-align:left;
    }
}