/**********************************************************************
/ ========== COLORS ==========
/ BACKGROUND BLUE           rgb(0,40,128)     #00287F
/ TOPIC HEADER              rgb(255,128,255)  #FF5BFF
/ LINK & BUTTON BLUE        rgb(128,160,255)  #80A0FF
/ RED (WARN)                rgb(238,0,0)      #EE0000
/ YELLOW (ADVISE)           rgb(255,204,0)    #FFCC00
/ GREEN (OKAY)              rgb(0,240,120)    #00F078
/ BODY TEXT GRAY            rgb(214,214,214)  #D6D6D6
/ STANDARD BORDER GRAY      rgb(192,192,192)  #C0C0C0
/ DIMMER BORDER GRAY        rgb(160,160,160)  #A0A0A0
/ GHOSTED GRAY              rgb(128,128,128)  #808080
/ SUBTLE BG & BORDER GRAY   rgb(64,64,64)     #404040
/
/ ========== NOTES ==========
/ FOR <textarea>, COLS IS REQUIRED BY XHTML STRICT.  1 COL = ABOUT 9PX.
/ size="7" = font-size:48px;
/ size="6" = font-size:32px;
/ size="5" = font-size:24px;
/ size="4" = font-size:18px;
/ size="3" = font-size:16px;
/**********************************************************************/

/**********************************************************************
/ HTML, BODY, AND MAIN CONTENT ELEMENTS
/**********************************************************************/

html
{
/* FROM https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
        https://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing/ */
   font-size: 10px; /* INSTEAD OF 62.5% AS RECOMMENDED, I AM USING THE RESULTING 10PX SO I DO NOT HAVE TO DEPEND ON A DEFAULT FONT SIZE THAT MAY CHANGE. I CAN THEN USE rem UNITS WITH 1rem = 10PX. */
}

html, body
{
   /* FROM https://stackoverflow.com/questions/31917088/how-to-prevent-mobile-devices-to-scale-font-size
   THIS PREVENTS RANDOM SECTIONS OF TEXT FROM BEING ENLARGED ON MOBILE BROWSERS. THIS ENLARGEMENT ONLY HAPPENED ON THE MOBILE BROWSER (CHROME), NOT ON MY DESKTOP BROWSERS (FIREFOX, OPERA, OR CHROME). */
   text-size-adjust: none;
   -webkit-text-size-adjust: none;
   -moz-text-size-adjust: none;
   -ms-text-size-adjust: none;
}

body 
{
   background-color: #000000;
   font-family: Helvetica, Verdana, Arial, Sans;
   color: rgb(214,214,214);
   font-style: normal;
   font-weight: normal;
   margin: 0px;
   padding: 0px;
}
a:link {color: rgb(128,160,255);}
a:visited {color: rgb(128,160,255);}
a:hover {color: rgb(96,120,192);}

div.pageOuter
{
   max-width: 1256px; /* MUST BE MAX DESIRED WIDTH (1280PX) MINUS PADDING, MINUS BORDER THICKNESS */
   /*min-height: 100vh; /* IDEA FROM https://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height */
   /*height: 100%; THIS WILL PUSH THE FOOTER TO THE BOTTOM OF SHORT PAGES, BUT WILL ALSO RESULT IN A BORDER THAT ONLY EXTENDS TO 100% OF THE WINDOW (SCROLLING DOWN REVEALS BORDER DISCONTINUITY)*/
   margin: 0 auto;
   padding: 5px 10px; /* MUST BE DEFINED IN PX FOR POP-UP PAGE ANIMATION CALCULATIONS */
   background-color: #000000;
   border-left: solid 2px rgb(64,64,64);
   border-right: solid 2px rgb(64,64,64);
   border-bottom: solid 2px rgb(64,64,64);
}

div.pageHeaderSection
{
   margin-bottom: 2rem;
}

div.pageHeader
{
   background-color: rgb(64,64,64);
   padding: 0.5rem;
   margin: 0.5rem 0;
   border: solid 0.1rem #FFFFFF;
}

div.panelHeader, td.panelHeader
{
   background-color: rgb(64,64,64);
   padding: 0.5rem;
   text-align: center;
}

div.sectionHeader, h2.sectionHeader
{
   width: 80%;
   box-sizing: border-box;
   border: solid 0.1rem #FFFFFF;
   border-radius: 0.7rem; -webkit-border-radius: 0.7rem; -moz-border-radius: 0.7rem;
   background-color: rgb(0,40,127);
   background-image: linear-gradient(to bottom, rgb(0,70,224), rgb(0,30,96));
   text-align: right; 
   text-shadow: 0 0.1rem 0 #000000, 0 0.2rem 0.2rem #000000;
   padding: 0.5em 1.5em 0.5em 1em;
}

div.topicHeader
{
   width: 90%;
   font-family: Georgia, "Times New Roman", Times, Serif;
   font-size: 2.0rem;
   color: rgb(255,128,255);
   text-shadow: 0.05em 0.05em 0 rgb(0,0,0), 0 0 0.25em rgb(0,0,0), 0 0 0.5em rgb(255,160,255), 0 0 0.75em rgb(255,160,255), 0 0 0.75em rgb(255,160,255);
   font-style: normal;
   font-weight: bold;
}

div.pageFooterSection
{
   margin-top: 3rem;
}

div.header, p.header, h1.header, h2.header
{
   margin: 2em 0 0.2em 0;
   text-align: left;
}

div.body, p.body, li.body
{
   max-width: 85rem;
   text-align: left;
   margin: 0 0 1.5rem 0;
   line-height: 1.4;
}

div.bodyCentered, p.bodyCentered
{
   max-width: 90rem;
   margin: 0 auto 1.5rem auto;
   text-align: left;
   line-height: 1.4;
}

div.longTextBorder, p.longTextBorder
{
   max-width: 62rem;
   margin: 0 auto 1.5rem auto;
   border-left: solid 1rem rgb(32,32,32);
   border-right: solid 1rem rgb(32,32,32);
   padding: 0.3rem 3rem 0 3rem;
}

div.longText, p.longText
{
   max-width: 62rem;
   margin: 0 auto 1.5rem auto;
   text-align: left;
   line-height: 1.4;
}

div.narrowCentered, p.narrowCentered
{
   width: 60%;
   margin: 0 auto 1.5rem auto;
   text-align: center;
   line-height: 1.4;
}

div.shortDescCentered, p.shortDescCentered
{
   max-width: 40rem;
   text-align: justify;
   margin: 0 auto;
}

p
{
   margin: 0;
}

.hangingindent
{
  padding-left: 3rem;
  text-indent: -3rem;
} 

div.userText, p.userText
{
   word-break: break-word;
   line-height: 1.4;
}

div.popupPageOuter
{
   border: solid 3px #FFFFFF;
   background-color: rgb(64,64,64);
   box-shadow: 0 1rem 1rem #000000, 0 0 0.5rem #000000, 0 0 1rem #000000;
   position: absolute;
   z-index: 100;
   top: 0;
   left: 0;
   overflow: hidden;
   display: none;
   white-space: normal;
}
div.popupPageHeader /* HEIGHT + PADDING MUST EQUAL popupPageBodyContainer BORDER WIDTH */
{
   padding: 6px;
   height: 29px; /* HEIGHT OF close.png IMAGE USED IN THE HEADER */
}
div.popupPageBodyContainer /* ANY CHANGE TO BORDER WIDTH OR PADDING MUST BE REFLECTED IN JPWGlobal.js -> AnimatePopupPage() (SEARCH FOR "popupPageBodyContainer"). */
{
   border: solid 41px rgb(64,64,64); /* BORDER WIDTH MUST EQUAL popupPageHeader TOTAL HEIGHT */
   border-top-width: 0;
   background-color: #000000;
   padding: 10px;
}
div.popupPageBody
{
   overflow: auto;
   background-color: #000000;
}

div.popupTabPosition
{
   position: absolute;
   display: none;
}
div.popupTab
{
   border: solid 0.3rem #FFFFFF;
   background-color: rgb(0,40,127);
   box-shadow: 0 1rem 1rem #000000, 0 0 0.5rem #000000, 0 0 1rem #000000;
   border-radius: 1rem; -webkit-border-radius: 1rem; -moz-border-radius: 1rem;
   padding: 1rem;
   position: absolute;
   z-index: 3;
   bottom: 2rem;
   left: 0;
}

div.mainMarquee
{
   margin: 0.5em 0; /* DO NOT USE PADDING AS THAT INTERFERES WITH HEIGHT CALCULATIONS BY THE JAVASCRIPT MARQUEE SCROLLER. */
   display: none;
   overflow: hidden;
   white-space: nowrap;
}

div.postPreview, p.postPreview
{
   background-color: rgb(64,64,64);
   border-radius: 1rem; -webkit-border-radius: 1rem; -moz-border-radius: 1rem;
   padding: 1.5rem;
   margin: 0.5rem 0;
}
div.postPreviewForReply, p.postPreviewForReply
{
   background-color: rgb(64,64,64);
   border-radius: 1rem; -webkit-border-radius: 1rem; -moz-border-radius: 1rem;
   padding: 1.5rem;
   margin: 0 5rem;
}

p.highlightLine, div.highlightLine, h2.highlightLine, h3.highlightLine
{
   padding: 0.2em 1.2em;
   background-color: rgb(0,40,127);
   border-radius: 0.5rem; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem;
   text-shadow: -0.1rem -0.1rem #000000, -0.1rem 0.1rem #000000, 0.1rem -0.1rem #000000, 0.1rem 0.1rem #000000;
}
span.highlightText
{
   display: inline-block;
   padding: 0.2em 1.2em;
   background-color: rgb(0,40,127);
   border-radius: 0.5rem; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem;
   text-shadow: -0.1rem -0.1rem #000000, -0.1rem 0.1rem #000000, 0.1rem -0.1rem #000000, 0.1rem 0.1rem #000000;
}



/**********************************************************************
/ GENERAL LAYOUT ELEMENTS
/**********************************************************************/

table
{
   padding: 0px;
   border-collapse: collapse;
}
td
{
   padding: 0px;
}
div.ventHeader
{
   width: 20%;
   padding: 0.5rem;
   text-align: right;
   vertical-align: top;
}
div.ventText
{
   width: 80%;
   padding: 0.5rem;
   text-align: left;
   vertical-align: top;
   word-break: break-word;
   line-height: 1.4;
}

div.jblogFeatureHeader
{
   border: solid 0.1rem #FFFFFF;
   text-shadow: 0 0.1rem 0 #000000, 0 0.2rem 0.2rem #000000;
   border-radius: 0.7rem; -webkit-border-radius: 0.7rem; -moz-border-radius: 0.7rem;
   background-color: rgb(0,40,127);
   background-image: linear-gradient(to bottom, rgb(0,60,192), rgb(0,30,96));
   padding: 0.8rem 1.5rem;
}

div.noPost /* USE WITH .errorBorder */
{
   padding: 2rem;
}

ul
{
   margin: 0.3em 0 0.3em 0.3em;
   padding-left: 1em;
   line-height: 1.4;
}
ol
{
   margin: 0.3em 0 0.3em 0.3em;
   padding-left: 2em;
   line-height: 1.4;
}
li
{
   list-style-position: outside;
   margin-top: 0.5em;
}
li:first-child /* RESULTS IN MARGINS ONLY BETWEEN LIST ELEMENTS */
{
   margin-top: 0;
}
li.private
{
   color: rgb(238,0,0);
}

hr
{
   height: 0.2rem;
   border-width: 0;
   background-color: rgb(192,192,192);
   color: rgb(192,192,192);
   padding: 0;
   margin: 0.6rem 0;
}

img
{
   /* vertical-align FIXES MYSTERIOUS 3PX BOTTOM PADDING ON HOMEPAGE HEADER IMAGES. THANKS TO
      https://stackoverflow.com/questions/10844205/html-5-strange-img-always-adds-3px-margin-at-bottom 
      I TRIED font-size:0, line-height:0, padding:0, margin:0, border-width:0 */
   vertical-align: middle;
}
img.inline
{
   vertical-align: baseline;
   height: 1em;
   width: auto;
}



/**********************************************************************
/ DIVS FOR THUMBNAIL DISPLAY
/**********************************************************************/

div.rangeContainer
{
   text-align: center;
}
div.rangeCellContainer
{
   display: inline-block;
   vertical-align: top;
}

div.catContainer
{
   display: table-cell;
   text-align: left;
   vertical-align: middle;
   padding: 0 1.5rem 0.5rem 1.5rem;
   white-space: nowrap;
}
   
div.thumbCellContainer
{
   display: inline-block;
   text-align: center;
   vertical-align: top;
   margin: 2.5rem;
}
div.thumbContainer, div.thumbContainerBlocked
{
   display: table-cell;
   text-align: center;
   vertical-align: middle;
   border: solid 0.1rem rgb(160,160,160);
}
div.thumbContainerBlocked
{
   border: solid 0.1rem rgb(64,64,64);
}
img.thumbBorder
{
   border: solid 1px rgb(192,192,192); /* THE BORDER THICKNESS MUST BE ACCOUNTED FOR IN BasicPresentation.cls STACK EFFECT AND IN div.joistContainer  */
}

div.movieThumbContainer /* ALLOWS PLAYTIME OVERLAY */
{
   display: inline-block;
   position: relative;
   margin: 0.3rem 0;
}

div.joistPagingContainer
{
   display:inline-block;
   text-align: center;
   border: solid 0.1rem rgb(192,192,192);
   border-top-left-radius: 1rem; -webkit-border-top-left-radius: 1rem;
   border-top-right-radius: 1rem; -webkit-border-top-right-radius: 1rem;
   margin: 0px auto;
}
div.joistRangeContainer
{
   text-align: center;
   border: solid 0.1rem rgb(192,192,192);
   border-radius: 1rem; -webkit-border-radius: 1rem; -moz-border-radius: 1rem;
   max-width: 775px;
   margin: 0px auto;
}
div.joistContainer
{
   /* WIDTH = 
      Constants::$JOIST_THUMB_SIZE (120) * JPWGlobal::$THUMB_SCALE (1.0, DEFINED IN JPWGlobal.cls)
    + STACK EFFECT IMAGE SIZE (9) (DEFINED IN BasicPresentation.cls STACK EFFECT)
    + img.thumbBorder TOTAL THICKNESS (2) */
   display: inline-block;
   width: 131px;
   padding: 1rem;
   text-align: center;
   vertical-align: bottom;
}



/**********************************************************************
/ FONTS
/**********************************************************************/

a.deptLink, a.deptLinkActive
{
   display: inline-block;
   font-family: Georgia;
   letter-spacing: -0.07em;
   color: rgb(255,255,255);
   text-shadow: 0 0.1rem #000000, 0 0.2rem rgb(0,60,192), 0 0.4rem 0.2rem #000000, 0 0 0.6rem #000000;
   font-size: 15px; font-size: 1.5rem;
   font-style: normal;
   font-weight: bold;
   text-decoration: none;
   padding: 10px 1em;
   margin-bottom: 0.4rem;
   background-image: url(../Decor/buttons/deptLinkBG.png);
   background-size: 100% 100%;
}
a.deptLinkActive
{
   text-shadow: none;
   background-image: url(../Decor/buttons/deptLinkBG_Active.png);
}
a.deptLink:visited, a.deptLinkActive:visited
{
   color: rgb(255,255,255);
   text-decoration: none;
}
a.deptLink:link, a.deptLinkActive:link
{
   color: rgb(255,255,255);
   text-decoration: none;
}
a.deptLinkActive:hover
{
   color: rgb(255,255,255);
   text-decoration: none;
}
a.deptLink:hover
{
   color: rgb(255,255,255);
   text-decoration: none;
   text-shadow: 0 0.1rem #000000, 0 0.2rem rgb(0,60,192), 0 0.4rem 0.2rem #000000, 0 0 0.6rem #FFFFFF, 0 0 0.6rem #FFFFFF, 0 0 0.6rem #FFFFFF;
}

.lgLink
{
   font-family: Verdana, Helvetica, Arial, Sans;
   color: rgb(128,160,255);
   font-size: 18px; font-size: 1.8rem;
   font-style: normal;
   font-weight: normal;
   text-decoration: underline;
}

.smLink
{
   font-family: Verdana, Helvetica, Arial, Sans;
   color: rgb(128,160,255);
   font-size: 16px; font-size: 1.6rem;
   font-style: normal;
   font-weight: normal;
   text-decoration: underline;
}

.tinyLink
{
   font-family: Verdana, Helvetica, Arial, Sans;
   color: rgb(128,160,255);
   font-size: 11px; font-size: 1.1rem;
   font-style: normal;
   font-weight: normal;
   text-decoration: underline;
}

.lgLink:hover, .smLink:hover, .tinyLink:hover
{
   color: rgb(96,120,192);
}

.linkSelected
{
   color: #FFFFFF;
   font-style: normal;
   font-weight: normal;
   text-decoration: none;
}
.linkSelected:hover
{
   color: #FFFFFF;
}

.linkGhosted
{
   color: rgb(128,128,128);
   font-style: normal;
   font-weight: normal;
   text-decoration: none;
}
.linkGhosted:hover
{
   color: rgb(128,128,128);
}

.header1
{
   font-family: Georgia, "Times New Roman", Times, Serif;
   font-size: 2.2rem;
   color: rgb(255,204,0);
   font-style: normal;
   font-weight: bold;
}
h1
{
   margin: 1em 0 0.5em 0;
   font-family: Georgia, "Times New Roman", Times, Serif;
   font-size: 2.2rem;
   color: rgb(255,204,0);
   font-style: normal;
   font-weight: bold;
}

.header2
{
   font-family: Helvetica, Verdana, Arial, Sans;
   font-size: 1.8rem;
   color: #FFFFFF;
   font-style: normal;
   font-weight: bold;
}
h2
{
   margin: 0;
   font-family: Helvetica, Verdana, Arial, Sans;
   font-size: 1.8rem;
   color: #FFFFFF;
   font-style: normal;
   font-weight: bold;
}

.header3
{
   font-family: Helvetica, Verdana, Arial, Sans;
   font-size: 1.5rem;
   color: #FFFFFF;
   font-style: normal;
   font-weight: bold;
}
h3
{
   margin: 0;
   font-family: Helvetica, Verdana, Arial, Sans;
   font-size: 1.5rem;
   color: #FFFFFF;
   font-style: normal;
   font-weight: bold;
}

.tinyHeader
{
   font-family: Helvetica, Verdana, Arial, Sans;
   font-size: 11px; font-size: 1.1rem;
   color: #FFFFFF;
   font-style: normal;
   font-weight: bold;
}

.title
{
   font-family: Georgia, "Times New Roman", Times, Serif;
   font-size: 18px; font-size: 1.8rem;
   color: rgb(255,204,0);
   font-style: normal;
   font-weight: normal;
}

.thumbHeader
{
   font-family: Helvetica, Verdana, Arial, Sans;
   font-size: 14px; font-size: 1.4rem;
   color: #FFFFFF;
   font-style: normal;
   font-weight: bold;
}

.thumbTitle
{
   font-family: Georgia, "Times New Roman", Times, Serif;
   font-size: 16px; font-size: 1.6rem;
   color: #FFFFFF;
   font-style: normal;
   font-weight: normal;
}

.mediaInfo
{
   font-family: Helvetica, Verdana, Arial, Sans;
   font-size: 14px; font-size: 1.4rem;
   color: rgb(214,214,214);
   font-style: normal;
   font-weight: normal;
}

div.mediaInfoOverlayContainer, p.mediaInfoOverlayContainer
{
   display: inline-block;
   position: absolute;
   bottom: 0.1rem;
   right: 0;
   padding: 0.25em 0.5em;
   background-color: #000000;
   opacity: 0.75;
}
.mediaInfoOverlay
{
   font-family: Helvetica, Verdana, Arial, Sans;
   font-size: 14px; font-size: 1.4rem;
   color: #FFFFFF;
   font-style: normal;
   font-weight: bold;
}

.redLight
{
   font-family: Helvetica, Verdana, Arial, Sans;
   font-size: 16px; font-size: 1.6rem;
   color: rgb(238,0,0);
   font-style: normal;
   font-weight: bold;
}

.yellowLight
{
   font-family: Helvetica, Verdana, Arial, Sans;
   font-size: 16px; font-size: 1.6rem;
   color: rgb(255,204,0);
   font-style: normal;
   font-weight: bold;
}

.greenLight
{
   font-family: Helvetica, Verdana, Arial, Sans;
   font-size: 16px; font-size: 1.6rem;
   color: rgb(0,240,120);
   font-style: normal;
   font-weight: bold;
}

.linkSeparator
{
   font-family: Helvetica, Verdana, Arial, Sans;
   font-size: 22px; font-size: 2.2rem;
   color: #FFFFFF;
   font-style: normal;
   font-weight: bold;
}

.lgBodyText
{
   font-size: 18px; font-size: 1.8rem;
   font-style: normal;
   font-weight: normal;
}

.smBodyText
{
   font-size: 16px; font-size: 1.6rem;
   font-style: normal;
   font-weight: normal;
}

.tinyBodyText
{
   font-size: 12px; font-size: 1.2rem;
   font-style: normal;
   font-weight: normal;
}

.formLabel
{
   font-family: Georgia, "Times New Roman", Times, Serif;
   font-size: 16px; font-size: 1.6rem;
   color: rgb(255,204,0);
   font-style: normal;
   font-weight: normal;
}
.formLabelSelected
{
   color: #FFFFFF;
   font-weight: bold;
}

.tinyFormLabel
{
   font-family: Georgia, "Times New Roman", Times, Serif;
   font-size: 11px; font-size: 1.1rem;
   color: rgb(255,204,0);
   font-style: normal;
   font-weight: normal;
}

.formText
{
   font-size: 16px; font-size: 1.6rem;
   color: rgb(0,240,120);
   font-style: normal;
   font-weight: normal;
}

.searchItem
{
   color: rgb(0,240,120);
   font-style: normal;
   font-weight: normal;
}

.searchParams
{
   color: rgb(255,204,0);
   font-style: normal;
   font-weight: normal;
}

.marquee
{
   font-size: 16px; font-size: 1.6rem;
   color: rgb(0,240,120);
   font-style: normal;
   font-weight: normal;
}

.hoverShadow
{
   text-shadow: 0 0.3rem 0.2rem #000000, 0 0.6rem 0.3rem #000000;
}
.shadowDown
{
   text-shadow: 0 0.2rem #000000;
}
.shadowAngled
{
   text-shadow: 0.2rem 0.2rem #000000;
}



/**********************************************************************
/ FORM ELEMENTS
/**********************************************************************/

form
{
   margin: 0;
   padding: 0;
}

div.forumInputCat, p.forumInputCat, h2.forumInputCat, h3.formItemCat
{
   margin: 3rem 0 1.5rem 10rem;
}
div.formItemDesc, p.formItemDesc, h2.formItemDesc, h3.formItemDesc /* USED WHEN A FORM INPUT HAS A DESCRIPTION, THEN A LABEL, THEN THE FIELD, EACH ON SEPARATE LINES */
{
   margin-bottom: 1rem;
}
div.formItem, p.formItem /* USED WHEN THIS LABLE + INPUT IS FOLLOWED BY ANOTHER BELOW IT AND PROVIDES A MARGIN BETWEEN THEM */
{
   margin-bottom: 1.5rem;
}

fieldset
{
   border-color: rgb(192,192,192);
   padding: 0.5rem 1rem 1rem 1rem;
   margin: 3rem 0;
}
fieldset.enterMediaNum
{
   width: 42rem;
   text-align: center;
   margin: 0 auto;
   border-radius: 1rem; -webkit-border-radius: 1rem; -moz-border-radius: 1rem;
}

fieldset.opStatus
{
   width: 42rem;
   margin: 1rem 0 1rem 2rem;
   border-radius: 1rem; -webkit-border-radius: 1rem; -moz-border-radius: 1rem;
}

legend
{
   padding: 0.3em 1em;
   margin: 0.5rem 0;
   background-color: rgb(0,40,127);
   border: solid 0.1rem rgb(192,192,192);
   border-radius: 0.5rem; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem;
   font-family: Verdana, Arial, Helvetica, Sans;
   font-size: 16px; font-size: 1.6rem;
   color: #FFFFFF;
   font-style: normal;
   font-weight: bold;
   text-shadow: -0.1rem -0.1rem #000000, -0.1rem 0.1rem #000000, 0.1rem -0.1rem #000000, 0.1rem 0.1rem #000000;
}
legend.plain
{
   padding: 0.3rem 0.6rem;
   background-color: #000000;
   border: solid 0.1rem rgb(192,192,192);
   border-radius: 0.5rem; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem;
   font-size: 16px; font-size: 1.6rem;
   color: #FFFFFF;
   font-style: normal;
   font-weight: bold;
}

/* BUTTON EDITOR USED TO CREATE THE FOLLOWING BUTTON DESIGNS:
https://cssgradientbutton.com/ */
a.login, a.viewMedia, a.elipsisBtn
{
   border: 0.1rem solid rgb(0,62,199);
   border-radius: 0.4em; -webkit-border-radius: 0.4em; -moz-border-radius: 0.4em;
   cursor: pointer;
   color: #FFFFFF;

   display: inline-block;
   text-align: center;
   font-family: Georgia;
   letter-spacing: -0.07em;
   color: rgb(255,255,255);
   /*text-shadow: 0 0.1rem #000000, 0 0.2rem #00287F, 0 0.4rem 0.2rem #000000, 0 0 0.6rem #000000, 0 0 0.6rem #000000, 0 0 0.6rem #000000;*/
   text-shadow: 0 0.1rem #000000, 0 0 0.2rem #000000, 0 0 0.4rem #000000;
   font-size: 15px; font-size: 1.5rem;
   font-style: normal;
   font-weight: bold;
   text-decoration: none;
   padding: 6px 0.5em;
   margin-bottom: 0.4rem;
   background-color: rgb(0,80,255);
   background-image: linear-gradient(to bottom, rgb(0,80,255), rgb(0,20,64));
   background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(0,80,255)), to(rgb(0,20,64)));
   background-image: -webkit-linear-gradient(top, rgb(0,80,255), rgb(0,20,64));
   background-image: -moz-linear-gradient(top, rgb(0,80,255), rgb(0,20,64));
   background-image: -ms-linear-gradient(top, rgb(0,80,255), rgb(0,20,64));
   background-image: -o-linear-gradient(top, rgb(0,80,255), rgb(0,20,64));
   /*filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=rgb(0,80,255), endColorstr=rgb(0,20,64));*/
}
a.login:hover, a.viewMedia:hover, a.elipsisBtn:hover
{
   text-shadow: 0 0.1rem #000000, 0 0 0.4rem #FFFFFF, 0 0 0.4rem #FFFFFF;
   /*
   border-color:  rgb(0,48,153);
   background-color: rgb(0,64,204);
   background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(0,64,204)), to(rgb(0,0,13)));
   background-image: -webkit-linear-gradient(top, rgb(0,64,204), rgb(0,0,13));
   background-image: -moz-linear-gradient(top, rgb(0,64,204), rgb(0,0,13));
   background-image: -ms-linear-gradient(top, rgb(0,64,204), rgb(0,0,13));
   background-image: -o-linear-gradient(top, rgb(0,64,204), rgb(0,0,13));
   background-image: linear-gradient(to bottom, rgb(0,64,204), rgb(0,0,13));
   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=rgb(0,64,204), endColorstr=rgb(0,0,13));
   */
}
a.viewMedia
{
   font-size: 11px; font-size: 1.1rem;
   padding: 0.2rem 0.5em;
   margin: 0;
}
a.elipsisBtn
{
   border-radius: 0.25em; -webkit-border-radius: 0.25em; -moz-border-radius: 0.25em;
   font-size: 18px; font-size: 1.8rem;
   line-height: 0.1em;
   letter-spacing: -0.03em;
   padding: 0 0.25em 0.45em 0.25em;
   margin: 0;
   vertical-align: text-bottom;
}

input[type=submit], input[type=reset], button[type=submit], button[type=reset]
{
   border: 0.1rem solid;
   border-radius: 1.2em; -webkit-border-radius: 1.2em; -moz-border-radius: 1.2em;
   cursor: pointer;
   font-family: Verdana, Arial, Sans;
   font-size: 12px; font-size: 1.2rem;
   color: #FFFFFF;
   font-weight: bold;
   text-decoration: none;
   text-shadow: 0 0.1rem #000000, 0 0rem 0.2rem #000000, 0 0 0.4rem #000000;
   padding: 0.15em 1em 0.25em 1em;
   white-space: nowrap;
/*   margin: 0.3em;*/
/*   display: inline-block;*/
}
input[type=submit], button[type=submit]
{
   border-color: #4882FF;
   background-color: #80A8FF;
   background-image: linear-gradient(to bottom, #80A8FF, #303C60);
   background-image: -webkit-gradient(linear, left top, left bottom, from(#80A8FF), to(#303C60));
   background-image: -webkit-linear-gradient(top, #80A8FF, #303C60);
   background-image: -moz-linear-gradient(top, #80A8FF, #303C60);
   background-image: -ms-linear-gradient(top, #80A8FF, #303C60);
   background-image: -o-linear-gradient(top, #80A8FF, #303C60);
   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#80A8FF, endColorstr=#303C60);

/* LOGO BLUE VERSION
   background-color: #0050FF;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#0050FF), to(#001E60));
   background-image: -webkit-linear-gradient(top, #0050FF, #001E60);
   background-image: -moz-linear-gradient(top, #0050FF, #001E60);
   background-image: -ms-linear-gradient(top, #0050FF, #001E60);
   background-image: -o-linear-gradient(top, #0050FF, #001E60);
   background-image: linear-gradient(to bottom, #0050FF, #001E60);
   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#0050FF, endColorstr=#001E60);
*/
}
input[type=submit]:hover, button[type=submit]:hover
{
   color: #C0C0C0;
   background-color: #4D85FF;
   background-image: linear-gradient(to bottom, #4D85FF, #1f273e);
   background-image: -webkit-gradient(linear, left top, left bottom, from(#4D85FF), to(#1f273e));
   background-image: -webkit-linear-gradient(top, #4D85FF, #1f273e);
   background-image: -moz-linear-gradient(top, #4D85FF, #1f273e);
   background-image: -ms-linear-gradient(top, #4D85FF, #1f273e);
   background-image: -o-linear-gradient(top, #4D85FF, #1f273e);
   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#4D85FF, endColorstr=#1f273e);

/* LOGO BLUE VERSION
   background-color: #0040cc;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#0040cc), to(#000e2d));
   background-image: -webkit-linear-gradient(top, #0040cc, #000e2d);
   background-image: -moz-linear-gradient(top, #0040cc, #000e2d);
   background-image: -ms-linear-gradient(top, #0040cc, #000e2d);
   background-image: -o-linear-gradient(top, #0040cc, #000e2d);
   background-image: linear-gradient(to bottom, #0040cc, #000e2d);
   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#0040cc, endColorstr=#000e2d);
*/
}

input.buttonWarn, button.buttonWarn
{
   border-color: #B60000; 
   background-color: #EE0000;
   background-image: linear-gradient(to bottom, #EE0000, #590000);
   background-image: -webkit-gradient(linear, left top, left bottom, from(#EE0000), to(#590000));
   background-image: -webkit-linear-gradient(top, #EE0000, #590000);
   background-image: -moz-linear-gradient(top, #EE0000, #590000);
   background-image: -ms-linear-gradient(top, #EE0000, #590000);
   background-image: -o-linear-gradient(top, #EE0000, #590000);
   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#EE0000, endColorstr=#590000);
}
input.buttonWarn:hover, button.buttonWarn:hover
{
   color: #C0C0C0;
   background-color: #BB0000; 
   background-image: linear-gradient(to bottom, #BB0000, #560000);
   background-image: -webkit-gradient(linear, left top, left bottom, from(#BB0000), to(#560000));
   background-image: -webkit-linear-gradient(top, #BB0000, #560000);
   background-image: -moz-linear-gradient(top, #BB0000, #560000);
   background-image: -ms-linear-gradient(top, #BB0000, #560000);
   background-image: -o-linear-gradient(top, #BB0000, #560000);
   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#BB0000, endColorstr=#560000);
}

input.buttonCancel, button.buttonCancel, input[type=reset], button[type=reset]
{
   border-color: #997a00;
   background-color: #FFCC00; 
   background-image: linear-gradient(to bottom, #FFCC00, #604C00);
   background-image: -webkit-gradient(linear, left top, left bottom, from(#FFCC00), to(#604C00));
   background-image: -webkit-linear-gradient(top, #FFCC00, #604C00);
   background-image: -moz-linear-gradient(top, #FFCC00, #604C00);
   background-image: -ms-linear-gradient(top, #FFCC00, #604C00);
   background-image: -o-linear-gradient(top, #FFCC00, #604C00);
   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FFCC00, endColorstr=#604C00);
}
input.buttonCancel:hover, button.buttonCancel:hover, input[type=reset]:hover, button[type=reset]:hover
{
   color: #C0C0C0;
   background-color: #cca300;
   background-image: linear-gradient(to bottom, #cca300, #7f5000);
   background-image: -webkit-gradient(linear, left top, left bottom, from(#cca300), to(#7f5000));
   background-image: -webkit-linear-gradient(top, #cca300, #7f5000);
   background-image: -moz-linear-gradient(top, #cca300, #7f5000);
   background-image: -ms-linear-gradient(top, #cca300, #7f5000);
   background-image: -o-linear-gradient(top, #cca300, #7f5000);
   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#cca300, endColorstr=#7f5000);
}

input[type=text], input[type=password], input[type=email], input[type=file]
{
   width: 35em;
   font-family: Verdana, Helvetica, Arial, Sans;
   font-size: 14px; font-size: 1.4rem;
   padding: 0.3rem;
   margin: 0.3rem 0;
   color: #000000;
   background: #FFFFFF;
   border: inset 0.2rem rgb(128, 160, 255);
   font-style: normal;
   font-weight: bold;
}
input[type=text].long
{
   width: 60em;
}
input[type=text].short, input[type=password].short, input[type=email].short, input[type=file].short
{
   width: 20em;
}
input[type=text].num
{
   width: 4em;
}

textarea
{
   /* rows="16" cols="97" (Verdana 14px) */
   height: 20em;
   width: 65em;
   font-family: Verdana, Helvetica, Arial, Sans;
   font-size: 14px; font-size: 1.4rem;
   padding: 0.3rem;
   margin: 0.3rem 0;
   color: #000000;
   background: #FFFFFF;
   border: inset 0.2rem rgb(128, 160, 255);
   font-style: normal;
   font-weight: normal;
}
textarea.jblog
{
   box-sizing: border-box;
   height: 40em;
   width: 100%;
}
textarea.mediaCaption
{
   /* rows="11" cols="74" (Verdana 14px) */
   box-sizing: border-box;
   height: 15em;
   width: 100%;
}
textarea.joist
{
   /* rows="3" cols="43" (Verdana 14px) */
   height: 5em;
   width: 35em;
}
textarea.small
{
   /* rows="2" cols="58" (Verdana 14px) */
   height: 3em;
   width: 40em;
}

select
{
   font-size: 14px; font-size: 1.4rem;
   padding: 0.3rem;
   margin: 0.3rem 0;
}
option.selected
{
   background-color: rgb(0,40,127);
   color: #FFFFFF;
   font-weight: bold;
}



/**********************************************************************
/ CUSTOM CHECKBOX AND RADIO BUTTON FROM
/ https://www.w3schools.com/howto/howto_css_custom_checkbox.asp
/ https://code-boxx.com/simple-pure-css-custom-checkbox/
/**********************************************************************/
/* USAGE EXAMPLE

<h1>Custom Checkboxes</h1>
<label class="crContainer">One
  <input type="checkbox" checked="checked" />
  <span class="checkmark"></span>
</label>
<label class="crContainer">Two
  <input type="checkbox" />
  <span class="checkmark"></span>
</label>

<h1>Custom Radio Buttons</h1>
<label class="crContainer">One
  <input type="radio" checked="checked" name="radio" />
  <span class="radiomark"></span>
</label>
<label class="crContainer">Two
  <input type="radio" name="radio" />
  <span class="radiomark"></span>
</label>
*/

/* The container */
/* HEIGHT SHOULD BE A LITTLE LARGER THAN FONT SIZE THAT WILL BE USED BESIDE THE CHECKBOX.
   CURRENT HEIGHT IS FOR GEORGIA AND VERDANA 16PX. */
.crContainerAdj
{
  height: 19px;
  font-size: 19px;
}
.crContainer {
   display: inline-block;
   vertical-align: middle;
   height: 19px;
   position: relative;
   padding-left: 24px; /* MUST BE A MINIMUM OF THE WIDTH DEFINED IN .checkmark AND .radiomark */
   margin: 0.2em 0;
   cursor: pointer;
   -webkit-user-select: none;
   user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
}

/* Hide the browser's default radio button */
.crContainer input {
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 1px;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: #FFFFFF;
}
/* Create a custom radio button */
.radiomark {
  position: absolute;
  top: 1px;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: #FFFFFF;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.crContainer:hover input ~ .checkmark, .crContainer:hover input ~ .radiomark {
  background-color: rgb(192,192,192)
}

/* When the radio button is checked, add a white background */
.crContainer input:checked ~ .checkmark, .crContainer input:checked ~ .radiomark {
  background-color: #FFFFFF;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after, .radiomark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.crContainer input:checked ~ .checkmark:after, .crContainer input:checked ~ .radiomark:after {
  display: block;
}

/* Style the checkmark/indicator */
.crContainer .checkmark:after {
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid rgb(0,40,127);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}
/* Style the indicator (dot/circle) */
.crContainer .radiomark:after {
 	top: 4px;
	left: 4px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgb(0,40,127);
}

.crContainer input:disabled ~ .checkmark {
  background: rgb(128,128,128);
}
.crContainer input:disabled ~ .checkmark:before {
  background: rgb(128,128,128);
}
.crContainer input:disabled ~ .checkmark:after {
  background: rgb(128,128,128);
  border-color: rgb(214,214,214);
}

.crContainer input:disabled ~ .radiomark {
  background: rgb(128,128,128);
}
.crContainer input:disabled ~ .radiomark:before {
  background: rgb(128,128,128);
}
.crContainer input:disabled ~ .radiomark:after {
   background: rgb(128,128,128);
   border-color: rgb(214,214,214);
}



/**********************************************************************
/ GRAPHIC "BUTTONS" (CLICKABLE TEXT BLOCKS WITH IMAGE BACKGROUNDS)
/**********************************************************************/

img.imgBtn
{
   opacity: 1;
}
img.imgBtn:hover
{
   opacity: 0.75;
}

div.tabContainer
{
   margin: 1.2em 0;
}
table.tabs
{
   font-size: 0; /* WITHOUT THIS, THE CELL HEIGHTS ARE EXTENDED BY A FEW PIXELS, CAUSING BG IMAGES TO REPEAT */
}
img.tabActiveL, img.tabActiveR
{
   width: 20px;
   height: 56px;
   opacity: 0;
}
td.tabActive
{
   background-image: url(../Decor/buttons/tabs/tabActive.png);
   background-size: 100% 100%;
   height: 56px;
}
td.tabActiveL
{
   background-image: url(../Decor/buttons/tabs/tabActiveL.png);
   background-size: 100% 100%;
   width: 20px;
   height: 56px;
}
td.tabActiveR
{
   background-image: url(../Decor/buttons/tabs/tabActiveR.png);
   background-size: 100% 100%;
   width: 20px;
   height: 56px;
}
img.tabInactiveL, img.tabInactiveR
{
   width: 16px;
   height: 56px;
   opacity: 0;
}
td.tabInactive
{
   background-image: url(../Decor/buttons/tabs/tabInactive.png);
   background-size: 100% 100%;
   height: 56px;
}
td.tabInactiveL
{
   background-image: url(../Decor/buttons/tabs/tabInactiveL.png);
   background-size: 100% 100%;
   width: 16px;
   height: 56px;
}
td.tabInactiveR
{
   background-image: url(../Decor/buttons/tabs/tabInactiveR.png);
   background-size: 100% 100%;
   width: 16px;
   height: 56px;
}
img.tabBase
{
   width: 100%;
   height: 56px;
   opacity: 0;
}
img.tabBaseL, img.tabBaseR
{
   width: 8px;
   height: 56px;
   opacity: 0;
}
td.tabBase
{
   background-image: url(../Decor/buttons/tabs/tabBase.png);
   background-size: 100% 100%;
   width: 20px;
   height: 56px;
}
td.tabBaseL
{
   background-image: url(../Decor/buttons/tabs/tabBaseL.png);
   background-size: 100% 100%;
   width: 8px;
   height: 56px;
}
td.tabBaseR
{
   background-image: url(../Decor/buttons/tabs/tabBaseR.png);
   background-size: 100% 100%;
   width: 8px;
   height: 56px;
}

/* 10/20/2019 DIV VERSION - CAN'T GET IT TO WORK
div.tabs
{
   display: table;
   width: 100%;
   height: 56px;
}
div.tabRow
{
   display: table-row;
   height: 56px;
}
img.tabActiveL, img.tabActiveR
{
   width: 20px;
   height: 56px;
   opacity: 0;
}
div.tabActive
{
   display: table-cell;
   background-image: url(../Decor/buttons/tabs/tabActive.png);
   background-size: 100% 100%;
   height: 56px;
}
div.tabActiveL
{
   display: table-cell;
   background-image: url(../Decor/buttons/tabs/tabActiveL.png);
   background-size: 100% 100%;
   width: 20px;
   height: 56px;
}
div.tabActiveR
{
   display: table-cell;
   background-image: url(../Decor/buttons/tabs/tabActiveR.png);
   background-size: 100% 100%;
   width: 20px;
   height: 56px;
}
img.tabInactiveL, img.tabInactiveR
{
   width: 16px;
   height: 56px;
   opacity: 0;
}
div.tabInactive
{
   display: table-cell;
   background-image: url(../Decor/buttons/tabs/tabInactive.png);
   background-size: 100% 100%;
   height: 56px;
}
div.tabInactiveL
{
   display: table-cell;
   background-image: url(../Decor/buttons/tabs/tabInactiveL.png);
   background-size: 100% 100%;
   width: 16px;
   height: 56px;
}
div.tabInactiveR
{
   display: table-cell;
   background-image: url(../Decor/buttons/tabs/tabInactiveR.png);
   background-size: 100% 100%;
   width: 16px;
   height: 56px;
}
img.tabBase
{
   width: 100%;
   height: 56px;
   opacity: 0;
}
img.tabBaseL, img.tabBaseR
{
   width: 8px;
   height: 56px;
   opacity: 0;
}
div.tabBase
{
   display: table-cell;
   background-image: url(../Decor/buttons/tabs/tabBase.png);
   background-size: 100% 100%;
   width: 20px;
   height: 56px;
}
div.tabBasePre
{
   display: table-cell;
   background-image: url(../Decor/buttons/tabs/tabBase.png);
   background-size: 100% 100%;
   width: 20%;
   height: 56px;
}
div.tabBasePost
{
   display: table-cell;
   background-image: url(../Decor/buttons/tabs/tabBase.png);
   background-size: 100% 100%;
   width: 80%;
   height: 56px;
}
div.tabBaseL
{
   display: table-cell;
   background-image: url(../Decor/buttons/tabs/tabBaseL.png);
   background-size: 100% 100%;
   width: 8px;
   height: 56px;
}
div.tabBaseR
{
   display: table-cell;
   background-image: url(../Decor/buttons/tabs/tabBaseR.png);
   background-size: 100% 100%;
   width: 8px;
   height: 56px;
}
*/


a.tabActive
{
   display: block;
   padding-top: 9px;
   text-align: center;
   text-decoration: none;
   font-family: Georgia, "Times New Roman", Times, Serif;
   font-size: 15px;
   font-weight: bold;
   color: #FFFFFF;
   text-shadow: -0.07em -0.07em #303030, -0.07em 0.07em #303030, 0.07em -0.07em #303030, 0.07em 0.07em #303030;
   white-space: nowrap;
   height: 47px;
} 
a.tabInactive
{
   display: block;
   padding-top: 12px;
   text-align: center;
   text-decoration: none;
   font-family: Georgia, "Times New Roman", Times, Serif;
   font-size: 14px;
   font-weight: bold;
   color: rgb(214,214,214);
   text-shadow: -0.07em -0.07em #000000, -0.07em 0.07em #000000, 0.07em -0.07em #000000, 0.07em 0.07em #000000;
   white-space: nowrap;
   height: 44px;
} 
a.tabInactive:hover
{
   color: #FFFFFF;
}

div.replies
{
   display: inline-block;
   width: 100px;
   height: 38px;
   background-image: url(../Decor/buttons/ventReplies.png);
   background-size: 100% 100%;
   border-bottom-right-radius: 0.8rem; -webkit-border-bottom-right-radius: 0.8rem; /* SLIGHTLY SMALLER THAN standardRadius BECAUSE IT IS ON THE INSIDE OF THE CURVE. */
}
div.noReplies
{
   display: inline-block;
   width: 100px;
   height: 38px;
   background-image: url(../Decor/buttons/ventRepliesNone.png);
   background-size: 100% 100%;
   border-bottom-right-radius: 0.8rem; -webkit-border-bottom-right-radius: 0.8rem; /* SLIGHTLY SMALLER THAN standardRadius BECAUSE IT IS ON THE INSIDE OF THE CURVE. */
}
a.replies
{
   display: block;
   padding-top: 10px;
   padding-left: 10px;
   text-align: center;
   text-decoration: none;
   text-shadow: 0 0.1rem #000000, 0 0rem 0.2rem #000000, 0 0 0.4rem #000000;
   font-family: Georgia, "Times New Roman", Times, Serif;
   font-size: 12px;
   font-weight: bold;
   color: #FFFFFF;
   height: 28px;
   width: 90px;
}
a.replies:hover
{
   text-shadow: 0 0.1rem #000000, 0 0 0.4rem #FFFFFF, 0 0 0.4rem #FFFFFF;
}
span.noReplies
{
   display: block;
   padding-top: 16px;
   padding-left: 10px;
   text-align: center;
   text-decoration: none;
   font-family: Georgia, "Times New Roman", Times, Serif;
   font-size: 12px;
   font-weight: bold;
   color: rgb(128,128,128);
   height: 22px;
   width: 90px;
}



/**********************************************************************
/ BORDERS AND BACKGROUNDS
/**********************************************************************/

.standardRadius
{
   border-radius: 1rem; -webkit-border-radius: 1rem;
}
.standardRadiusTop
{
   border-radius: 1rem; -webkit-border-radius: 1rem;
   border-bottom-left-radius: 0; -webkit-border-bottom-left-radius: 0;
   border-bottom-right-radius: 0; -webkit-border-bottom-right-radius: 0;
}
.standardRadiusBottom
{
   border-radius: 1rem; -webkit-border-radius: 1rem;
   border-top-left-radius: 0; -webkit-border-top-left-radius: 0;
   border-top-right-radius: 0; -webkit-border-top-right-radius: 0;
}

.standardBorder
{
   border: solid 0.1rem rgb(192,192,192);
}

.dashedBorder
{
   border: dashed 0.1rem rgb(192,192,192);
}

.errorBorder
{
   border: solid 0.2rem rgb(238,0,0);
}

.okayBorder
{
   border: solid 0.4rem rgb(0,240,120);
}

.jsLinkBtn
{
   display: inline-block;
   border: solid 2px rgb(192,192,192);
   border-radius: 1.1em; -webkit-border-radius: 1.1em; -moz-border-radius: 1.1em;
   padding: 0.05em 0.7em 0.15em 0.7em;
   cursor: pointer;
   text-decoration: none;
}
.jsLinkBtn:hover
{
   border-color: rgb(134,134,134);
}

div.fancyFrame
{
   display: inline-block;
   border: solid 0.2rem rgb(192,192,192);
   border-radius: 0.9rem; -webkit-border-radius: 0.9rem; -moz-border-radius: 0.9rem;
   padding: 0.2rem;
}
img.fancyFrame
{
   border: solid 0.1rem rgb(160,160,160);
   border-radius: 0.6rem; -webkit-border-radius: 0.6rem; -moz-border-radius: 0.6rem;
   background-color: rgb(64,64,64);
   padding: 0.4rem;
}



/**********************************************************************
/ FONT COLORS
/**********************************************************************/

.ghosted
{
   color: rgb(128,128,128);
}

.warn
{
   color: rgb(238,0,0);
}
.advise
{
   color: rgb(255,204,0);
}
.okay
{
   color: rgb(0,240,120);
}