/* css reset   removed: h1,h2 */

    html, body, div, span, applet, object, iframe,
    h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,o
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	/* vertical-align: baseline; */
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
	display: block;
    }
    body {
	line-height: 1.4;
	color: #33f;
    background-color: #202028;
    font-family: arial;
    }
    ol, ul {
	list-style: none;
    }
    blockquote, q {
	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
	content: '';
	content: none;
    }
    table {
	border-collapse: collapse;
	border-spacing: 0;
    }

    ol, ul {
	/* list-style: none;  */
        margin: 20px;
    }
    
/* End CSS reset ------------------------------------ */

    
/* styles for this file... */

.notificationbar {width: 80%; border: 1 solid #fa0; background-color: #ffa; padding: 5px; margin-top: 20px;}

.blueticknotificationbar 
{
width: 95%; 
border: 1px solid #fb6; 
background-color: #ffc; 
padding: 0px; 
margin-top: 0px; 

position: relative;
top: 15px;


min-height: 32px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}

.titleinputbox {width: 400px; height: 25px; font-size: 16pt;}

p {
   margin-bottom: 16px;
}
    
#vmenu {
   /* position : fixed ; */
   background-color: #202028; 
   color: #0f0;  /* #44e; */
  
   z-index: 900; 
   /* top: 40px;  */ 
   display: none;
 
   /*  font-size: 15pt;    13pt;  */
   font-family: arial;  
   
   padding : 2px ;
  opacity: 0.99;
}  


/* vmmenu - vertical multilevel menu */


/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at https://www.cssplay.co.uk/menus/muti-line-flyout.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */


#vmenu {position:absolute; z-index:999; margin-left: 0px; margin-bottom:0px;}
#vmenu ul {opacity: 1; margin:0; list-style:none; width: 275px; padding:1px; background:#202028;}  /* 110 */
#vmenu ul ul {position:absolute; left:-9999px;}
#vmenu table {border-collapse:collapse; width:0; height:0; position:absolute; left:-1px; top:-1px;}
#vmenu ul li {width:275px; background:#777; color: #000;  font-size: 18pt; font-weight: 600;}  /* 110 */
* html #vmenu ul li {float:left;}  /* width:95px; */
#vmenu ul li a {display:block; width:260px; padding:8px 10px 8px 5px; font:normal 18px verdana, sans-serif; color:#fff; text-decoration:none; background:#303030; clear:left;}


#vmenu ul li:hover {position:relative;}
#vmenu ul li a:hover {direction:ltr; background:#89a; color:#fff; border-color:#89a; position:relative;}
#vmenu ul li:hover > a {background:#222; color: #007BFF; border-color:#89a;}

/* a.menutitles {color: #00f;background:#89e;} */


#mainPage {
   position : relative;
   right: 0px;
   left: 0px;
   bottom: 0px;

   top: 0px;
   /* background-color: #202028;    #ffb;  */
   background-color: transparent;

   padding-left: 100px; padding-right: 100px; padding-top : 0px ;
   font-size: 12pt;
   font-family: arial;
   /*color: #33f;*/
   color: #0064ff;
   /* display: none; */ 

  border: 0px solid #f00;
}

body {    
    color: #33f;
    background-color: #202028;
    /* background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover; */
    font-family: arial;
}


body a {
    color: white; /* Initial link color */
    text-decoration: none; /* no underline */
}

body a:hover {
    color: white; /* Change color on hover */
    text-decoration: underline; /* show underline on hover */
}

body a:visited {
    color: white; /* Initial link color */
    text-decoration: none; /* no underline */
}

#persistentBar {
   position: fixed; 
   /* top: 0px; */ 
   border: 1px solid #101010;
   width: 100%; 
   background-color: #001; 
   z-index:1500; 
   height: 49px;
   padding-top: 10px;
   opacity: 1;
}

#persistentBar a:link{color: #fff;}
#persistentBar a:visited{color: #fff;}

#IPAndCountryText
{
    margin-left: 20px;
    float: left; 
    color: #fff;
}

.user-chat-link {
    color: white; /* Initial link color */
    text-decoration: underline; /* Add underline */
}

.user-chat-link:hover {
    color: white; /* Change color on hover */
    background-color: blue; /* Add background color on hover */
    text-decoration: none; /* Remove underline on hover */
}

.user-chat-link:visited {
    color: white; 
    text-decoration: none; /* Remove underline on hover */
}

/* two styles: one for web visitors, and one for admins. This moves the persistent mobile bar down so the wg-adminbar 

can be seen. */

.pbweb
{
	top: 0px; 
}

.pbadmin
{
	top: 55px; 
}

/* two styles: one for web visitors, and one for admins. This moves the persistent mobile menu down so the wg-adminbar 

can be seen. */

.pmenuweb
{
	top: 60px; 
}

.pmenuadmin
{
	top: 77px; 
}



#menuIcon {
   float: left; padding-left: 5px;
}

#appLogo {
   display: inline;
   float: left;
   margin-left: 15px;
   margin-right: 15px;
   margin-bottom: 1px; margin-top: 1px;
}

#appNameText {
 display: inline; 
  float: left;
   margin-left: 5px;
   margin-bottom: 1px; margin-top: 8px;
   color: #fff;
   font-size: 13pt;
   font-family: arial;
}

#rightSideLink {
   float: right; margin-right: 5px; margin-top: 1px; color: #fff;
}

.scrollToBottom
{
padding: 0px; 
position: fixed; 
bottom: 35px; 
right: 0.4%; 
opacity: 0.4;
display:none;
}

.scrollToBottom:hover{
	text-decoration:none;
}

/* Blue 'Update' button styles */

.updatebutton {
	-moz-box-shadow:inset 0px 1px 0px 0px #97c4fe;
	-webkit-box-shadow:inset 0px 1px 0px 0px #97c4fe;
	box-shadow:inset 0px 1px 0px 0px #97c4fe;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0) );
	background:-moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0');
	background-color:#3d94f6;
	-webkit-border-top-left-radius:4px;
	-moz-border-radius-topleft:4px;
	border-top-left-radius:4px;
	-webkit-border-top-right-radius:4px;
	-moz-border-radius-topright:4px;
	border-top-right-radius:4px;
	-webkit-border-bottom-right-radius:4px;
	-moz-border-radius-bottomright:4px;
	border-bottom-right-radius:4px;
	-webkit-border-bottom-left-radius:4px;
	-moz-border-radius-bottomleft:4px;
	border-bottom-left-radius:4px;
	text-indent:0;
	border:1px solid #337fed;
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:40px;
	line-height:40px;
	width:120px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #1570cd;
}
.updatebutton:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1e62d0), color-stop(1, #3d94f6) );
	background:-moz-linear-gradient( center top, #1e62d0 5%, #3d94f6 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e62d0', endColorstr='#3d94f6');
	background-color:#1e62d0;
}
.updatebutton:active {
	position:relative;
	top:0px;
}

#templateTextarea {
	width: 98%;    /* 1000px; */ 
	height: 430px;
}

#phpTextarea {
	width: 98%;    /* 1000px; */ 
	height: 350px;
}


#homepagetextarea {
			width: 98%; 
			height: 400px; 
			margin-bottom: 5px;
}

.templatepreviewwrap { width: 575px; height: 355px; padding: 0px; overflow: hidden; float: left;}
.templatepreviewframe { width: 1280px; height: 786px; border: 1px solid black}

.templatepreviewframe {
    -ms-zoom: 0.45;
    -moz-transform: scale(0.45);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.45);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.45);
    -webkit-transform-origin: 0 0;
}

.toolbarhider
{
    
    background-color: #efefef;
    height: 16px;
    /* width:  auto; */
    position: relative;
    top: 16px;
    z-index: 990;
}

#autolistbox
{
width: 400px;
font-size: 14pt;
}



.iframebox {float: left; border: 1px solid #eee; margin-bottom: 15px;}

.bgimagepreviewwrap { border:0px solid #ff0000; width: 340px; height: 235px; padding: 0px; overflow: hidden; float: left; position: relative; top: -19px;}
.bgimagepreviewframe { width: 1280px; height: 786px; border: 1px solid black}

.bgimagepreviewframe {
    -ms-zoom: 0.27;
    -moz-transform: scale(0.27);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.27);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.27);
    -webkit-transform-origin: 0 0;
}

.bgimagetoolbarhider
{
    background-color: #efefef;
    height: 16px;
    width: auto;
    position: relative;
    top: 11px;
    z-index: 990;
}

.phpscriptsmetaitem 
{
border: 0px solid #e1e1e1;
padding: 0px;
float: left;
display: inline;
margin-right: 10px;
margin-bottom: 10px;
}

#phpscriptsnameinput
{
width:480px; height:20px; font-size:15pt; 
}

#phpscriptactivelistbox
{
width: 80px; height:25px; font-size:15pt; 
}

.extrapagesmetaitem 
{
border: 0px solid #e1e1e1;
padding: 0px;
float: left;
display: inline;
margin-right: 10px;
margin-bottom: 10px;
}

#extrapagesmetalink
{
border: 0px solid #e1e1e1;
padding: 0px;
float: left;
display: inline;
margin-right: 10px;
margin-bottom: 10px;
color: #666; font-size: 10pt;
}


#extrapagesmetanameinput{width:480px; height:35px; font-size:16pt;}

#extrapagesparentmenu
{
width: 300px; height:25px; font-size:15pt; 
}
#extrapagesdisplayinmenu
{
width: 80px; height:25px; font-size:15pt; 
}

 #resultTable
       {
          width: 100%;
          border: 1px solid #ddd;
          font-family: arial;
          font-size: 10pt;
          padding: 5px; 
       }
       
       #resultTable td a {text-decoration: none; color: #666;}

       #resultTable td {border: 1px solid #ddd; height: 80px; background-color: #f7f7f7; padding: 3px; }

       #resultTable thead th { background-color: #fff; height: 50px; padding-left: 0px; border: 1px solid #bbb; display: table-header-group;}

       #commands
       {
           margin-left: 3px;
           margin-top: 10px;
       }


       #pageName
       {
           font-size: 14pt;
           font-weight: 400;
           margin: 3px;
           
       }


.cteditorcolor
{
    display: inline;
    float: left;
    border: 1px solid #e0e0e0;
    padding: 5px;
    margin-right: 10px;
    width: 380px; /* 290 */
    margin-bottom: 10px;
}

.cteditorcolortagname
{
   font-size: 11pt;
   position: relative;
   top: 4px;

}

.widgetbox{float: left; border: 1px solid #ddd; padding: 6px;}
.widgetbox textarea {width: 500px; height:170px; margin-right: 10px;}
.widgetboxcheckbox {width: 20px; height: 20px;}


.apptitle {font-family:arial;font-size: 12pt; font-weight:800;text-align: center;}
.shadow1 {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
border: 1px solid #bbb;
padding: 20px;
float: left;
margin-left: 10px;
margin-top: 5px;
margin-bottom: 5px;
background-color: #f8f8f8;
width: 200px;
height: 200px;

font-family:arial;
font-size: 11pt;
}
#appswrap
{
border: 0px solid #e8e8e8;
height: 100%;
padding: 0px;
}

.shadow1 a {color:#55f; }

.applink {text-align: center; bottom: -40px; position: relative;}

/* styles to center google ad */

/* Center the content horizontally and vertically within the fixed container */
.fixed-container {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center; /* Horizontally center */
    /* align-items: center; */ /* Vertically center */
    /* background-color: rgba(0, 0, 0, 0.5); */ /* Optional: Semi-transparent background */
}

/* Style for the centered content (adjust as needed) */
.centered-content {
    display: inline-block; /* Make the container size itself based on content */
}


/* ---------------- Mobile styles ---------------- */

               @media all and (max-width: 500px) {

                    #mainPage {padding-left: 4px; padding-right: 4px; font-size: 12pt; padding-top: 5px; top: 0px;}
                      /* img {width: 100%} */

                       
                    #vmenu {font-size: 17pt;}
                    #vmenu {position:relative;} /* makes vmenu container go 100% wide */
                    #vmenu ul { margin-left:auto; margin-right: auto; } /* make menu centered horizontally */
                    
                    .titleinputbox {width: 99%; display: block;}
                    
                    #templateTextarea {width: 98%; height: 300px; margin-bottom: 5px;}
                    #phpTextarea {width: 280px; height: 300px; margin-bottom: 5px;}
                    #homepagetextarea {width: 98%; height: 250px; margin-bottom: 5px;}
                    
                    #extrapagesmetanameinput{width: 250px;}
                    #extrapagesmetalink{font-size: 7pt; display: none;}

                    .blueticknotificationbar {
                        position: relative;
                        top: 5px;
                        width: 98%;
                        font-size: 9pt;
                    }

        			.templatepreviewwrap { width: 250px; height: 200px;}
        			.templatepreviewframe { width: 1280px; height: 786px;}
        			.toolbarhider { width: 300px; }

        			#autolistbox
        			{
        				width: 80%;
        				font-size: 15pt;
        			}

        			.iframebox {width: 100%;}
        			.bgimagepreviewwrap {display: none;}
                        
                    .cteditorcolortagname
                    {
                       font-size: 10pt;

                    }

                    .cteditorcolor
                    {
                        width: 95%;
                    }

                    #phpscriptsnameinput
                    {
                       width:250px; height:20px; font-size:15pt; 
                    }

                    #phpscriptactivelistbox
                    {
                    width: 65px; height:27px; font-size:15pt; 
                    }
                    
                    #extrapagesparentmenu
                    {
                    width: 200px; height:25px; font-size:15pt; 
                    }
                    #extrapagesdisplayinmenu
                    {
                    width: 70px; height:25px; font-size:15pt; 
                    }
                    
                    .widgetbox textarea {width: 280px; height:170px; margin-right: 10px;}
                    
                    .shadow1 {
                    background-color: #f8f8f8;
                    width: 79%;
                    }
                    
                    #appLogo {
                       margin-left: 5px;
                       margin-right: 5px;
                    }


}