@charset "utf-8";

/* =============================================================================
    WebTagbot - Copyright © 2020 by NinjaTemplates.com - All Rights Reserved
============================================================================= */


/*
===========================================

If the tool is to run full-page, then set this value 
or percent for visually appealing slots that aren't too long. 
Try a fixed pixel size like 800px or a ratio like 80%.
  .rowblock,
  .selblock { width:800px; }

To fit the tool inside your page that has other columns, 
remove the body style and set the pageContainer width 
to a different value or percentage if needed. 
Set this value to 99% to take full advantage of 
a narrower column. 
  .rowblock,
  .selblock { width:99%; }


To float the tool in the center of the page,
change the .pageContainer to an appropriate width 
like 920px and set this value to a pleasing width 
using a fixed value or a percentage:
  .rowblock,
  .selblock { width:800px; }

You should not need to change any of the other
sizes, unless they visually require adjustment. 



===========================================
*/



  /* ====== page styles ====== */
 
 @import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');


  body      	{ background-color:#FFF; font-family:Cabin, Tahoma, sans-serif; margin:0; padding:0; text-align:center; }
  .pageContainer { background-color:#ECEFF0; font-family:Cabin, Tahoma, sans-serif; margin:auto; padding:10px 10px 0px; width:70%; height:auto; text-align:left; position:relative; box-shadow:0px 5px 25px 0px #BBB; border:1px solid #D2DADF; border-width:0 1px; }

  .title1  	{ color:#252525; margin-top:0px; }
  .title2  	{ color:#668597; }
  .tblogo	{ position:relative; height:48px; background-color:#ffffbb; top:10px; }

  form		{ margin:0px; padding:0px; }
  .btnup,
  .btndn,
  .btnsp  	{ float:left; width:1.6em; height:1.5em; border:1px solid gray; margin:1px; font-family:Cabin, Tahoma, sans-serif; padding:0px; font-size:1em; font-weight:bold; }
  .btnup	{ color:black;   border-color:white gray gray white;  border-width:1px 1px 1px 1px; opacity:1.0; filter:alpha(opacity=100); }
  .btndn	{ color:#333333; border-color:gray white white gray;  border-width:2px 0px 0px 2px; opacity:0.5; filter:alpha(opacity=50); }
  .btnsp	{ color:#444444; border:0px; width:.7em; background-color:transparent; }
  .btn  	{ position:relative; width:auto; float:none; }
  .btn_left 	{ position:relative; width:auto; float:left; margin-left:5px; margin-bottom:0px; }
  .btn_right 	{ position:relative; width:auto; float:right; margin-right:5px; margin-bottom:0px; }

  .rule  	{ background-color:#e0e0e0; line-height:.4em; height:.4em; font-size:.1em;  }

  .bevel1 	{ position:relative; width:100%; border-top:1px solid #ffffff; border-bottom:1px solid #666666; clear:both; z-index:4; margin-top:5px; }
  .bevel2 	{ position:relative; width:100%; border-top:1px solid #eeeeee; border-bottom:1px solid #888888; }
  .bevel3 	{ position:relative; width:100%; border-top:1px solid #dddddd; border-bottom:1px solid #aaaaaa; padding:2px 0px; }
  div.number 	{ position:relative; float:left; height:auto; width:60px;  }
  span.number 	{ position:relative; color:#334477; left:0px; bottom:0px; padding:0px 10px; font-size:2em; line-height:80%; font-weight:bold; font-family:Cabin, Tahoma, sans-serif; }
  .header	{ position:relative; float:left; width:40%; font-size:1em; margin-top:.4em; font-weight:bold; color:#334477; font-family:Cabin, Tahoma, sans-serif; background:transparent; }


  .links  	{ color:#334477; display:block; font-size:.8em; line-height:150%; font-weight:bold;  
		  text-decoration:none; padding-left:5px; background-color:#e0e0e0; cursor:pointer; }
  a.links 	{ color:#334477; font-size:.9em; }
  a.links:hover { color:#99aacc; } 

  .linkholder  	{ visibility:visible;  /* can be turned off with visibility:hidden */
		  position:relative; background-color:transparent; color:#334477; float:right; width:16em; height:2em; 
		  font-size:.8em; font-weight:bold; line-height:2em; top:0px; right:20px; cursor:pointer; z-index:10;  
		}
  #designerLinks{ position:absolute; right:0px; top:2em; width:24em; height:auto; display:none; 
		  -webkit-box-shadow:0px 5px 5px 0px #555;
		  -moz-box-shadow:0px 5px 5px 0px #555;
		  box-shadow:0px 5px 5px 0px #555;
		}
  #filesize	{ float:right; width:4em; border:0px; background-color:transparent; font-size:smaller; text-align:right; margin-right:5px; }
  #templatename { float:right; margin-right:5px; font-size:smaller; xfont-weight:bold; color:#223344; }

  #openbtn	{ visibility:visible; display:none; /* can be turned off with visibility:hidden */ }
  #saveTPLbtn	{ visibility:visible; /* can be turned off with visibility:hidden */ }
  div.formgroup { position:relative; width:100%; height:auto; background-color:#D2DADF; z-index:5; }
  .codeboxholder{ position:relative; clear:both; overflow:hidden; width:100%; height:auto; text-align:center;  }
  .codebox 	{ position:relative; margin:auto; width:98%; height:300px; border:1px solid gray; font-family:courier new, monospace; font-size:.8em; overflow:auto; text-align:left; }
  iframe#codeaction   { position:relative; height:1em; background:transparent; visibility:hidden; } 

  .credit	{ clear:both; font-size:12px; text-align:center; font-family:sans-serif; color:#888877; margin:40px 0px 0px 0px; padding:5px; border-top:1px solid gray; }
  .credit a,
  .credit a:link, .credit a:hover   { color:#555566; }

  #msgWindow 	{ position:absolute; display:none; left:0px; top:0px; width:400px; height:220px; background:#ffffee; border:0px solid yellow; z-index:99; 
		 -moz-box-shadow:0px 5px 15px 0px #555; -webkit-box-shadow:0px 5px 15px 0px #555; box-shadow:0px 5px 15px 0px #555; }
  iframe.msgwindow { position:absolute; left:0px; top:0px; width:400px; height:220px; }
  div.msgwindow { position:absolute; left:0px; top:35px; width:380px; height:185px; padding-left:10px;}
  div.msgwinbtn { position:absolute; left:0px; top:0px; width:390px; height:20px; line-height:18px; background:gray; color:white; font-weight:bold; font-family:verdana,Cabin, Tahoma, Sans-serif; font-size:smaller; padding-left:10px; }
  div.msgwinbtn span { float:right; border:1px solid white; background: #cc0000; padding:0px 8px; cursor:pointer; } 




  /* ====== stylable tagbot fields ====== */

  /* set slot widths relative to containing page */
  /* these are cascaded percentages */

  .rowblock,
  .selblock { width:99%; } /* level 1 */


  .wrapper { width:99%; }  /* level 2 */
   input,
  .comment,
  .text, 
  .include { width:72%; } /* level 3 */
  .caption { width:25%; } /* level 3 */
  .spacers { width: 3%; } /* level 3  allowance for borders to prevent wrapping */

  /* for wysiwyg only - not implemented */ 
  .editblock { width:72%; } /* level 3 */ 
  .editblock { float:right; margin-right:16px; } 
  .editblock .text { width:100%; } 






  /* ====== tagbot fields no-edit ====== */

  /* selection wrapper for checkbox */
 .selblock 	{ color:3F535F; margin:0 0 5px 7px; background:#DEE5EA; border:1px solid #F2F7FA; border-radius:8px; position:relative; float:left; clear:both; } /* include section */
  .optblock  	{ position:relative; margin-bottom:10px; float:left; overflow:none; }
  .rowblock 	{ position:relative;float:left; clear:both; margin-left:8px;} /*dummy wrapper at same level as selblock*/

  /* input form elements */
  .wrapper { position:relative; clear:both; background:transparent; } /* wraps each line item */
  input    { position:relative; float:left; margin-bottom:5px; }
  textarea.include, 
  textarea.comment, 
  textarea.text	{ position:relative; float:left; height:4.2em; margin-bottom:5px;  } 
  iframe.include{ position:relative; height:1em; background:transparent; visibility:hidden; } /* for includes */
  .chkbox  { position:relative; width:20px; margin:5px 5px 0 10px; padding:0; }
  .radio   { position:relative; width:20px; margin:0px; padding:0px; margin-left:5px; }


  /* tagbot symbol styles */

/* general */
input, textarea, .caption, .chkmsg, .comment, .include, .include2, .spacer, .text, .url, .value	{ font-family:Cabin, Tahoma, sans-serif; line-height:1.5; }
input, textarea, .caption, .chkmsg, .comment, .include, .include2, .text, .url, .value					{ color:#3F535F; font-size:15px; font-weight:400; }
input, textarea																																					{ background-color:#FFF; border:1px solid #668597; padding:3px 8px; }
.chkmsg																																								{ color:#668597; line-height:20px; margin-top:2px; }

  
  /* advisory fields */
.spacer																																									{ color:#337AB7; font-size:20px; font-weight:700; background-color:transparent; border:none; padding:0; } /* titles and spacers ( - ) */
input.spacer																																						{ margin:30px 0 20px; }
.spacer.caption, input.spacer[ value=" "]																									{ margin:6px 0; }
  .comment { background-color:#DAFFD8; color:#225500; }
  .include { background-color:#DCB6FF; color:#550055; }
  .include2{ background-color:#ddccee; color:#550055; }
 

  /* editing fields */	
.caption																																								{ color:#202020; font-weight:500; } /* field titles */
  .text    { background-color:#FFFFFF; color:#000000; }
input.title																																							{ color:#202020; font-weight:700; } /* title fields ( ! ) */
input.value																																							{ color:#202020; font-weight:500; background-color:#FEF0EA; } /* short highlight fields ( # ) */
input.url    																																							{ color:#337AB7; background-color:#E8F6FD; } /* url address fields ( : ) */
  .theme   { background-color:#FCFFAB; color:#000000; }
  .global  { background-color:#FCFFAB; color:#000000; }
  .color   { background-color:#FFE9C2; color:#000000; }
  .image   { background-color:#FFE9C2; color:#000000; }
  .option  { background-color:#F0F0E8; color:#000000; height:1.5em; cursor:pointer; border:1px solid #cacac7; border-radius:10px; }


  /* hidden variables - perhaps these aren't used */
  .thmvar  { background-color:#FCFFAB; color:#000000; display:none; }
  .target  { background-color:#FCFFAB; color:#000000; display:none; }
  .math    { background-color:transparent; color:#000000; display:none; }
  .random  { background-color:transparent; color:#000000; display:none; }

  /* variations on slots */
  .caption { position:relative; float:left; text-align:right;  
	     margin-right:5px; background-color:transparent; }
  .obtn    { position:relative; margin-left:5px; width:1.5em; padding:0px; margin:0px; font-family:Cabin, Tahoma, sans-serif; font-size:smaller;  }
  .nbtn    { position:relative; margin-left:5px; width:1.5em; padding:0px; margin:0px; font-family:Cabin, Tahoma, sans-serif; font-size:smaller;  visibility:hidden; }/*spacer*/
  .chkmsg  { float:left; text-align:left; font-style:italic; }

  /* customization */
  .rowblock:first-child > .wrapper .spacer.caption { display:none; }
  .rowblock:first-child > .wrapper input#itm0	{ color:#EC5402; font-size:24px; text-align:center; padding-bottom:5px; margin-bottom:15px; border-bottom:3px double #337AB7; width:100%; }
  
/*--END--*/