/* removed these to accommodate older existing tables: table, caption, tbody, tfoot, thead, tr, th, td - also removed sup & sub */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
}
/* tds have a 1px padding by default - reset from above */
td {padding: 0;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;}
/* remember to define focus styles */
:focus {outline: 0;}
/* remember to highlight inserts somehow */
ins {text-decoration: none;}
del {text-decoration: line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse; border-spacing: 0;}



/* ------------------------------------------------------- */
/* ------ ABOVE is the RESET - BELOW is the REBUILD ------ */
/* ------------------------------------------------------- */

blockquote {
    padding: 18px;
    margin: 18px 36px;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-bottom-color: #aaa;
}

hr {border: 0; background: #eee; color: #eee; height: 2px; margin: 18px 0;}

ul {list-style-type: disc;}
ul ul {list-style-type: circle;}
ul ul ul {list-style-type: square;}
ul ul ul ul {list-style-type: circle;}
ol {list-style-type: decimal;}
ol ol {list-style-type: lower-alpha;}
ol ol ol {list-style-type: decimal;}
ol ol ol ol {list-style-type: lower-alpha;}
ul, ol {margin: 18px 0 18px 40px;}
ul ul, ul ol, ol ol, ol ul {margin: 6px 0 6px 40px;}

/* prevents a 15px space at the bottom of single articles - blog separators are reset later */
span.article_separator {display: none;}

/* joomla structure protection */
table.contentpaneopen {width: 100%;}
.contentpaneopen td {padding: 0;}

/* tables in content */
.contentpaneopen table {margin: 0px 0px 18px 0px;}
.contentpaneopen table td, #tinymce table td {padding: 9px; border: 1px solid #ddd; vertical-align: top;}
.contentpaneopen table th, #tinymce table th {background: #ddd; color: #333; border: 1px solid #ddd; padding: 9px 0;}
/* borderless option */
.contentpaneopen table.borderless td {border: 0; padding: 0;}
#tinymce table.borderless td {border: 1px dotted #e0e0e0; padding: 0;}

/* old form protection */
#formContainer table {border-collapse: separate;}
#formContainer table td {font-size: 13px;}



/* --------------------------------------------- */
/* ------ TYPOGRAPHY --------------------------- */
/* --------------------------------------------- */

body, #tinymce td, #content-padding, input {
    font: 15px 'Roboto', Arial, Helvetica, sans-serif;
    line-height: 1.5em;
    color: #4A4A4A;
}

p {margin: 0px 0px 17px;}

h1, h2, h3, h4, h5, h6, td.contentheading {}
h1, td.contentheading {
    font-size: 24px;
    color: #006F51;
    line-height: 34px;
    padding: 0 0 20px 0;
}

h2 {
    font-size: 20px;
    color: #006F51;
    line-height: 30px;
    margin-bottom: 20px;
}

h3 {
    font-size: 18px;
    color: #808080;
    line-height: 26px;
    margin-bottom: 10px;
}

h4 {
    font-size: 18px;
    color: #385368 ;
    line-height: 22px;
    margin-bottom: 10px;
}

h5 {
    font-size: 12px;
    margin-bottom: 10px;
    color: #EB5A74;
}

h6 {
    font-size: 11px;
    margin-bottom: 10px;
}

h1:first-child, h2:first-child, h3:first-child,
h4:first-child, h5:first-child, h6:first-child,
ul:first-child, ol:first-child {margin-top: 0px;}

a, a:visited {
text-decoration: underline;
}

a:hover, a:active {
text-decoration: none;
}



/* ---------------------------------- */
/* ------ MISC TOOLS ---------------- */
/* ---------------------------------- */

.clarence {clear: both !important;}
.spacey {margin: 0px 3px;} /* often wraps |s in link lists or small info */
.hidden {display: none !important;}
.float-left {float: left !important;}
.float-right {float: right !important;}
.no-float {float: none !important;}
.no-margin {margin: 0 !important;}
.no-left-margin {margin-left: 0 !important;}
.no-right-margin {margin-right: 0 !important;}
.no-top-margin {margin-top: 0 !important;}
.no-bottom-margin {margin-bottom: 0 !important;}
.v-margin-10 {margin-top: 10px !important; margin-bottom: 10px !important;}
.v-margin-20 {margin-top: 20px !important; margin-bottom: 20px !important;}
.h-margin-10 {margin-left: 10px !important; margin-right: 10px !important;}
.h-margin-20 {margin-left: 20px !important; margin-right: 20px !important;}
.top-margin-10 {margin-top: 10px !important;}
.top-margin-20 {margin-top: 20px !important;}
.bottom-margin-10 {margin-bottom: 10px !important;}
.bottom-margin-20 {margin-bottom: 20px !important;}
/* '.home' on the default menu item + '.hide-on-home' on the module */
body.home .hide-on-home {display: none !important;}


/* ----------------------------------- */
/* ------ LAYOUT --------------------- */
/* ----------------------------------- */

/* #bkg is the body - refer to it with this id to avoid inheritance by tinymce */
#bkg {background: #eee;}
.site-width {padding: 30px; margin: 0 auto; width: 920px; position: relative; background: white;}
#header {margin-top: 20px;}
#header .site-width {min-height: 49px;}

.mc-logo-link {overflow: hidden;float: left; margin: 0;}
.mc-logo-link img {max-width: 100%; height: auto;}

#primary-nav-container .site-width, #featured-content .site-width {padding: 0; width: 980px;}
#primary-nav-container .site-width {background: #4a4a4a; border-bottom: 1px solid #fff;}

#featured-content .site-width {padding: 0; max-width: 980px; width: auto;}
#featured-content img {max-width: 100%;}

/*
for containing floats */
.site-width:after {
  content: "";
  display: block;
  clear: both;
}

#component-wrap {min-height: 400px;}
#content-wrap.r-mid #content-padding {width: 690px; float: left;}
#content-padding {}

#right-bar, .side-bar {float: right; width: 200px; clear: right;}

#footer {margin-bottom: 20px;}
#footer .site-width {background: #777; font-size: 12px;}


/* Remove default padding, margin, and list-style from header, right-bar and footer lists */
#header ul, #right-bar ul, #footer ul {margin: 0 ; padding: 0; list-style: none;}

/* nivo slider main module - needs width for proper image resizing in Firefox */
.moduletable.slider-width {width: 100%;}

/**** Fix for Nivo Slider with links on the img tag in IE ****/
.nivoSlider a.nivo-imageLink{background: white; filter: alpha(opacity=0); opacity: 0;}

/****************/
/* --- PBMC --- */
/****************/
#pbmc-wrap {padding: 20px 0 0; text-align: center;}
#pbmc {font-size: 11px; line-height: 30px; height: 30px; display: block; width: 170px; margin: 0 auto; text-decoration: none !important;}
.icon-mc-logomark:before, .icon-mc-wordmark:before {font-size: 16px; line-height: 26px; position: relative; top: 4px; left: 1px;}
.icon-mc-wordmark:before {left: 2px;}
.mc-brand-container {display: none;}
#pbmc {color: rgba(0,0,0,0.3);}
#pbmc:hover {color: rgba(255,255,255,0.7);}


/*** Sidebar Styling and Modules ***/
.side-bar h3 {
  font-size: 14px;
  line-height: 19px;
  color: #006F51 ;
  margin: 0 0 10px;
  padding: 0 0 6px;
  text-transform: none;
  border-bottom: 1px solid #CEDAE1;
}
#right-bar .moduletable {margin-top: 30px;}
#right-bar .moduletable:first-child {margin-top: 0}
#right-bar {font-size: 13px; line-height: 1.5em;}

div.login-search.side-bar {margin-bottom: 30px;}

/* Button List & Right-Bar Login Button */
.mc-button-list li a, .side-bar a#mcSimpleLogin {
  background: #4a4a4a;
  line-height: 16px;
  text-decoration: none;
  color: white;
  display: block;
  padding: 7px 0;
  text-align: center;
  border-radius: 3px;
}
.mc-button-list li a {margin-bottom: 1px}
.mc-button-list li a:hover, .side-bar a#mcSimpleLogin:hover {opacity: 0.8;}
.side-bar a#mcSimpleLogin {margin-bottom: 40px;}


/*** Header Buttons ***/
#header .login-search {
  width: 329px;
  position: absolute;
  right: 30px;
  top: 50%;
  margin-top: -24px;
  height: 49px;
  overflow: hidden;
}
#header a#mcSimpleLogin, .login-search-menu a#mcSimpleLogin {
  background: #a4a4a4;
  width: 164px; float: left;
  line-height: 49px;
  height: 49px;
  text-decoration: none;
  color: #4A4A4A;
  display: block;
  padding: 0;
  text-align: center;
  font-size: 14px;
}
#header a#mcSimpleLogin:after,
#header .moduletable.mc-search:after,
#header .moduletable.mc-search.member-search:after,
.login-search-menu a#mcSimpleLogin:after,
.login-search-menu .moduletable.mc-search:after,
.login-search-menu .moduletable.mc-search.member-search:after {
  content: " \e1d5";
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#header a#mcSimpleLogin:hover, .login-search-menu a#mcSimpleLogin:hover {opacity: 0.8; color: white;}

#header .moduletable.mc-search, .login-search-menu .moduletable.mc-search {
  position: relative;
  height: 24px;
  background: #FFF1D2;
  float: right;
  width: 164px;
  border-bottom: 1px solid #fff;
}
#header .mc-search input.inputbox, .login-search-menu .mc-search input.inputbox {
  border: none;
  display: block;
  background: none;
  height: 14px;
  padding: 5px 24px 5px 10px;
  color: #DBD0B7;
  font-size: 11px;
  margin: 0;
  width: 130px;
}

#header .moduletable.mc-search:after, .login-search-menu .moduletable.mc-search:after {
  content: "\e604";
  background: none;
  position: absolute;
  top: 3px;
  right: 4px;
  color: #DBD0B7
}
#header .moduletable.mc-search.member-search:after, .login-search-menu .moduletable.mc-search.member-search:after {
  content: "\e605";
}

#header .mc-search a.button.mc-search, .login-search-menu .mc-search a.button.mc-search {
  display: none;
}

/* This handles the case of only one search in the header - a class of 'single-search' need to be added to the search module
-------------------------------------------------- */
#header .moduletable.mc-search.single-search {border: 0; height: 49px;}
#header .moduletable.mc-search.single-search input.inputbox {height: 39px;font-size: 14px;}
#header .moduletable.mc-search.single-search:after {top: 15px; font-size: 16px;}

/* This handles the case of only a Login button in header with no searches
-------------------------------------------------- */
.mobile-menu-top.modules-1 ~ .site-container #header a#mcSimpleLogin {float: right;}
.mobile-menu-top.modules-1 .login-search-menu a#mcSimpleLogin {margin-bottom: 0;}

/* Searches in the Sidebar
-------------------------------------------------- */

.side-bar .moduletable.mc-search div.mc-search {margin-top: 0;} /* because of collapsing margins, this is almost certainly not needed */
.side-bar .moduletable.mc-search.member-search {margin-top: 6px;} /* because of collapsing margins, this is almost certainly not needed */

.side-bar .moduletable.mc-search div.mc-search {
  position: relative;
  height: 30px
}
.side-bar .mc-search input.inputbox {
  border: none;
  display: block;
  background: #F1F1F1;
  color: rgba(0,0,0,0.2);
  width: 73.64%; /* ~ 162/220 rounded because of a wierd sub-pixel */;
  height: 20px;
  padding: 5px 2.272727272727%;
  font-size: 12px;
  border-radius: 3px 0 0 3px;
  margin: 0;
}

.side-bar .mc-search a.button.mc-search {
  background: #4a4a4a;
  color: white;
  border-radius: 0 3px 3px 0;
  display: block;
  position: absolute;
  top: 0; right: 0;
  height: 30px;
  line-height: 30px;
  width: 21.818181818182%; /* 48/220 */
  text-align: center;
  text-decoration: none;
  font-size: 12px;
}

.side-bar .mc-search a.button.mc-search:hover {opacity: 0.8;}

/* --- sponsor banners --- */
.bannergroup {width: 100%;}
.banneritem {width: 100%;}
.banneritem img {max-width: 100%; height: auto;}



/* --- simple menu --- */
/* put this class on a menu to achieve a clean, 1-level, horizontal menu */
.simple-menu {margin: 0; list-style: none; float: left;}
.simple-menu li:first-child {border: none;}
.simple-menu li {
    margin: 0; list-style: none; float: left;
    border-left: 1px solid #555;
    padding: 0px 10px;
    line-height: 16px;
}
.simple-menu li:first-child {}
.simple-menu li a {text-decoration: none; color: #555; color:}
.simple-menu li a:hover, .simple-menu li a:active, .simple-menu li a:focus {color: #333;}

/* --- social network menu --- */
.socnets {
  overflow: hidden;
  float: right;
  font-size: 16px;
}
.socnets ul {margin: 0; padding: 0; list-style: none;}
.socnets li {margin-left: 0.25em; float: left; list-style: none;}
.socnets li:first-child {margin-left: 0;}
.socnets a {
  font-size: 1em; /* 1em is 16px for the icon-font */
  /* just playing with basing this off the font size
  it's pretty cool - change the font-size and these values all play nicely */
  width: 1em;
  height: 1em;
  line-height: 1em;
  padding: 0.5em;
  border-radius: 50%;
  transition: 0.2s;
  display: block;
  color: #85A0B1;
  text-decoration: none;
  background: #808080;
}
.socnets a span {text-transform: lowercase;}
.socnets a span {width: 1em; overflow: hidden; display: block; height: 1em;}
.socnets a span:before {width: 1em; height: 1em; display: block}

/* Social Color */
.socnets .color li a.facebook {background: #4862A3; color: white;} /* Facebook */
.socnets .color li a.twitter {background: #55ACEE; color: white;} /* Twitter */
.socnets .color li a.wordpress {background: #0085BE; color: white;} /* Wordpress */
.socnets .color li a.youtube {background: #FF2A27; color: white;} /* YouTube */
.socnets .color li a.youtube2 {background: #FF2A27; color: white;} /* YouTube (alt logo) */
.socnets .color li a.vimeo {background: #44BBFF; color: white;} /*Vimeo*/
.socnets .color li a.googleplus {background: #DD4B39; color: white;} /* Google Plus */
.socnets .color li a.instagram {background: #634D40; color: white;} /* Instagram */
.socnets .color li a.rss {background: #FF9900; color: white;} /* Feed */
.socnets .color li a.pinterest {background: #CB2127; color: white;} /* Pinterest */
.socnets .color li a.flickr {background: #FE0084; color: white;} /* Flickr */
.socnets .color li a.linkedin {background: #0077b5; color: white;} /* LinkedIn */
.socnets .color li a.linkedin2 {background: #0077b5; color: white;} /* LinkedIn (alt logo) */

/* Social Icon */
.socnets .icon a {background: none;}
.socnets .color.icon li a {background: none;}
.socnets .color.icon li a.facebook {color: #4862A3;} /* Facebook */
.socnets .color.icon li a.twitter {color: #55ACEE;} /* Twitter */
.socnets .color.icon li a.wordpress {color: #0085BE;} /* Wordpress */
.socnets .color.icon li a.youtube {color: #FF2A27;} /* YouTube */
.socnets .color.icon li a.youtube2 {color: #FF2A27;} /* YouTube (alt logo) */
.socnets .color.icon li a.vimeo {color: #44BBFF;} /*Vimeo*/
.socnets .color.icon li a.googleplus {color: #DD4B39;} /* Google Plus */
.socnets .color.icon li a.instagram {color: #634D40;} /* Instagram */
.socnets .color.icon li a.rss {color: #FF9900;} /* Feed */
.socnets .color.icon li a.pinterest {color: #CB2127;} /* Pinterest */
.socnets .color.icon li a.flickr {color: #FE0084;} /* Flickr */
.socnets .color.icon li a.linkedin {color: #0077b5;} /* LinkedIn */
.socnets .color.icon li a.linkedin2 {color: #0077b5;} /* LinkedIn (alt logo) */

.socnets .rounded-sq a {border-radius: 3px;}

.socnets a:hover {background: #444; color: #fff;}


#RTT {color: #4a4a4a; text-decoration: none; float: right; clear: right; margin-top: 30px;}
#RTT span {font-size: 16px; position: relative; top: 3px; left: 1px}

.footer-info {float: left; max-width: 75%;}

/* ----------------------------------------- */
/* ------ FIXES and PREVENTIONS ------------ */
/* ----------------------------------------- */

/* its easy to end up with unwanted paragraphs after working in an online editor */
/* zeroing out these ps helps deal with the most common occurrences of that */
#header p {margin: 0;}
#footer p {margin: 0;}

#site-top .site-width, 
#over-content .site-width,
#under-content .site-width {padding: 0 20 0 20; text-align: center;}

#site-top .site-width *, 
#over-content .site-width *,
#under-content .site-width * {margin: 0; }

/***Table protection**/
.scroll-indicator .table-wrapper {
  overflow: scroll;
  position: relative;
  background: white;
  border: 1px solid #ccc;
}
.scroll-indicator {
  padding-bottom: 15px;
  background: #333 url(/jmc-assets/misc/scroll-indicator.png) 95% bottom no-repeat;
  position: relative;
}
div.table-wrapper > table {margin: 0; background: transparent;}
div.table-wrapper table table {margin: 0}


/* Large Image Protection */
.img-wrapper { display: inline-block;}
div#component-wrap img {max-width: 100%; height: auto;}
div#component-wrap .slider-wrapper img {max-width: none;}


/* ----------------------------------------- */
/* ------ HORIZONTAL MENU with SUBS -------- */
/* ----------------------------------------- */

/* ------------------------ */
/* --- essential styles --- */
/* ------------------------ */
ul.resp-menu {background: none;}
.resp-menu, .resp-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 99;
}

.resp-menu ul {
    position: absolute;
    top: -999em;
    /* left offset of submenus need to match (see below) */
    width: 220px;
}
.resp-menu ul li {width: 100%;}
.resp-menu li:hover {
    /* fixes IE7 'sticky bug' */
    visibility: inherit;
}
.resp-menu li:hover li {display: block;}
.resp-menu li {
    float: left;
    position: relative;
    z-index: 99;
}
.resp-menu a, .resp-menu .separator {
    display: block;
    position: relative;
}
.resp-menu li:hover ul {
    left: 0;
    top: 50px; /* match top ul list item height */
    z-index: 99;
}

ul.resp-menu li:hover li ul {top: -999em;}
ul.resp-menu li li:hover ul {
    left: 219px; /* match ul width */
    top: -1px;
}


.resp-menu > li.turn-left ul {left: auto; right: 1px;}
.resp-menu > li.turn-left li:hover ul,
.resp-menu > li.third-level li:hover ul {left: auto; right: 220px;}

#primary-menu .resp-menu > li.turn-left a, 
#primary-menu .resp-menu > li.turn-left .separator,
#primary-menu .resp-menu > li.third-level li li a, 
#primary-menu .resp-menu > li.third-level li li .separator {text-align: right;}

/* ------------------- */
/* --- custom skin --- */
/* ------------------- */

/* 1st level */
.resp-menu li > a, .resp-menu li > .separator {
    text-decoration:none;
    padding: 0 10px;
    height: 50px;
    border: 0;
    line-height: 50px;
    color: #fff;
    font-size: 14px;
    border-right: 1px solid #fff;
}
.resp-menu > li {border-top: 0;}

.resp-menu > li:hover > a, .resp-menu > li:hover > .separator {
  background: #949494;
}
.resp-menu > li.active > a, .resp-menu > li.active > .separator {}

/* 2nd level */
#primary-menu .resp-menu li li:first-child {border-top: 1px solid white;}
.resp-menu li li > a, .resp-menu li li > .separator {
    font-size: 12px;
    height: auto;
    line-height: 16px;
    min-height: 16px;
    padding: 7px 12px;
    text-shadow: none;
    background: #949494;
    font-weight: normal;
    text-transform: none;
    border: 0;
    border-bottom: 1px solid white;
    border-bottom: 1px solid rgba(255,255,255,0.4);
}

.resp-menu li li:last-child > a, 
.resp-menu li li:last-child > .separator {border-bottom: 0;}

.resp-menu li li:hover > a, .resp-menu li li:hover > .separator {
    background: #848484;
}

.resp-menu li li.active > a,
.resp-menu li li.active > .separator {text-decoration: underline;}

/* 3rd level */
#primary-menu .resp-menu li li li:first-child, .resp-menu li li li:first-child {
  border-top: 1px solid white;
  border-top: 1px solid rgba(255,255,255,0.25);
  }
.resp-menu li li li a, .resp-menu li li li .separator {}
.resp-menu li li li.hover a {}


/*******************/
/* Off Screen Menu */
/*******************/
.mobile-menu {
    background: #333;
    width: auto;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    display: none;
    margin: 0;
    padding: 0;
    z-index: 1;
}
.mobile-menu-top, .mobile-menu-bottom {display: none;}

body.show-mobile > .mobile-menu,
body.show-mobile > .mobile-menu-top,
body.show-mobile > .mobile-menu-bottom {display: block;}

.site-container, .site-overlay {
    min-width: 100%;
    min-height: 100%;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

a#menu-toggle {z-index: 2;cursor: pointer; display: none;}

body.show-mobile > .site-container, body.show-mobile > .site-container .site-overlay {
    left: 56%;
    overflow-y: hidden;
    position:fixed;
    background: rgba(33,33,33,0.8);
    z-index: 7;
}

body.show-mobile > .mobile-menu-top,
body.show-mobile > .mobile-menu-bottom {
  width: 100%;
  height: auto;
  background: #434343;
  position: fixed;
  z-index: 3;
  top: 0; left: 0;
  box-shadow: 0 0 100px 0px #000
}

body.show-mobile > .mobile-menu-bottom {top: auto; bottom: -89px; height: 100px; width: 100%;}

.login-search-menu {padding: 50px 0 20px; width: 56%}
.login-search-menu a#mcSimpleLogin {
  float: none;
  width: auto;
  margin: 0 20px 20px;
  font-size: 14px;
  color: white;
  }
.login-search-menu a#mcSimpleLogin:after {font-size: 32px; float: right; margin-top: 8px; margin-right: 1px; color: white;}

.login-search-menu .moduletable.mc-search {background: #222;}
.login-search-menu .moduletable.mc-search {float: none; width: auto; margin: 0 20px 2px; border: 0; height: 49px; line-height: 49px;}
.login-search-menu .moduletable.mc-search:after {font-size: 32px; top: 8px; right: 8px; color: rgba(255,255,255,0.7);}
.login-search-menu .mc-search input.inputbox {width: 80%; height: 39px; line-height: 39px; font-size: 13px; color: rgba(255,255,255,0.7);}

.mobile-menu ul.resp-menu {margin: 0; float: none; padding: 260px 0 50px; width: 56%}
.mobile-menu ul.resp-menu li {float: none; width: auto; display: block;}
.mobile-menu ul.resp-menu li ul {
  position: static;
  display: block;
  width: auto
}

.mobile-menu ul.resp-menu li li li {border: 0; padding-left: 20px;}

.mobile-menu ul.resp-menu li a, .mobile-menu ul.resp-menu li .separator {
  font-size: 14px;
  line-height: 20px;
  padding:  2px 20px;
  height: auto;
  background: none;
  color: #c0c0c0;
  color: #808080;
  text-decoration: none;
  border: 0
}
.mobile-menu ul.resp-menu > li > a, .mobile-menu ul.resp-menu > li > .separator {color: #FFDF8F; font-weight: bold;}
.mobile-menu ul.resp-menu > li {margin-bottom: 10px;}

.mobile-menu ul.resp-menu li li li a:before, .mobile-menu ul.resp-menu li li li .separator:before {
  content: "\00BB  "
}

.mobile-menu ul.resp-menu li:hover a, .mobile-menu ul.resp-menu li:hover .separator {background: none;}

/*** Fix to remove extra padding if only two modules in login-search position ***/
.mobile-menu-top.modules-2 ~ .mobile-menu ul.resp-menu {padding-top: 210px;}

/*** Fix to remove extra padding if only a login button exists with no searches ***/
.mobile-menu-top.modules-1 ~ .mobile-menu ul.resp-menu {padding-top: 140px;}



/* ------------------------- */
/* ------ SEARCH PAGE ------ */
/* ------------------------- */
#mc-search-form .mc-button:hover {background: #333; color: white;}
.mc-result .highlight {background: #ff9; padding: 0px 5px;} /* text highlight on search terms in results */



/* ----------------------------------------- */
/* ------ LOGIN PAGE ----------------------- */
/* ----------------------------------------- */
/* precede with #content-padding to ensure we don't affect the login module */
#content-padding #form-login {max-width: 500px; margin: 0 auto; position: relative; overflow: hidden;}
#content-padding #form-login label {font-weight: bold; color #4a4a4a;}
#content-padding #form-login input.inputbox {
    width: 92%;
    border: 1px solid #c4c4c4;
    border-radius: 3px;
    background: white;
    padding: 6px;
    color: #a4a4a4;
}
#content-padding #form-login input.inputbox:focus {border-color: #a4a4a4; color: #4a4a4a; box-shadow: none;}
#content-padding #form-login #form-login-remember label {font-size: 14px; font-weight: normal; color: #4a4a4a;}

#content-padding #form-login #modlgn_remember {width: auto; border: 0;}
#content-padding #form-login #modlgn_remember:focus {background: #4a4a4a; color: white; box-shadow: none;}

#content-padding #form-login input.button {
  border: 0;
  background: #4a4a4a;
  color: white;
  border-radius: 3px;
  padding: 7px;
  width: 50%;

  -webkit-appearance: none;     /* for iOS */
  -webkit-border-radius: 3px;   /* for iOS */
}

#content-padding #form-login input.button:hover {cursor: pointer; opacity: 0.8;}

#content-padding #form-login .forgot-username,
#content-padding #form-login .forgot-password {
  font-size: 0.8em;
  display: inline-block;
  margin-top: 40px;
  float: left;
}

#content-padding #form-login .forgot-username {margin-left: 20px;}



/* -------------------------------------------------- */
/* ------ GENERAL ARTICLE STYLES -------------------- */
/* -------------------------------------------------- */
/* some of these styles apply to the various article-related layouts like blogs but they cascade from here */

/* for front-end editing */
#editor-xtd-buttons a {color: #4a4a4a;}

/* logged-in admin edit tooltip - this is the tooltip itself, the button is in the next section */
div.tool-tip {z-index: 99999;}
div.tip-top {z-index: 99999;}
div.tip-text {
    font-size: 11px;
    color: #ddd;
    background: #333;
    border: 2px solid #555;
    border-top-width: 1px;
    padding: 6px 9px 9px 9px;
    z-index: 99999;
    box-shadow: 0px 3px 18px rgba(0,0,0,0.35);
}
div.tip-title {
    font-size: 11px;
    color: white;
    font-weight: bold;
    background: #333;
    border: 2px solid #555;
    border-bottom-width: 1px;
    padding: 9px 9px 6px 9px;
    z-index: 99999;
    box-shadow: 0px 3px 18px rgba(0,0,0,0.35);
}

/* article icons, pdf, print, email */
table.contentpaneopen td.buttonheading div.content-wrapper {width: 20px !important;}
.buttonheading a img {display: none;}
.buttonheading a {display: block; width: 16px; height: 16px; margin-left: 2px; opacity: 0.5;}
.buttonheading a:hover, .buttonheading a:focus {opacity: 1;}
.buttonheading a[title=PDF] {background: url(/jmc-assets/icons/article-1.png) 0 -100px;}
.buttonheading a[title=PDF]:hover {background-position: 0 0;}
.buttonheading a[title=Print] {background: url(/jmc-assets/icons/article-1.png) -100px -100px;}
.buttonheading a[title=Print]:hover {background-position: -100px 0;}
.buttonheading a[title=Email] {background: url(/jmc-assets/icons/article-1.png) -200px -100px;}
.buttonheading a[title=Email]:hover {background-position: -200px 0;}
/* admin edit button */
.buttonheading .hasTip a {background: url(/jmc-assets/icons/article-1.png) -300px -100px;}
.buttonheading .hasTip a:hover {background-position: -300px 0;}

/* article title if enabled */
td.contentheading {font-weight: bold; font-size: 16px;}
td.contentheading a {}

 /* written by */
.contentpaneopen span.small {font-size: 11px; color: #666;}
/* publish date */
td.createdate {font-size: 11px; color: #999; height: 36px;}
/* edit date */
td.modifydate {font-size: 11px; color: #999;}

/* 'read more' links */
.readon {
    display: inline-block;
    color: white;
    margin-top: 9px;
    padding: 3px 9px;
    border-radius: 3px;
    text-decoration: none;
    font-size: 12px;
    text-shadow: 0px -1px 0px rgba(0,0,0,0.7);
    background: #666;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
.readon:hover, .readon:active {
    /* important allows for the default state to be reset without affecting this hover */
    background: #333 !important;
}

/* 'more articles' list at the bottom */
div.blog_more {margin: 18px 0;} /* entire section */
div.blog_more strong {} /* heading */
div.blog_more ul {margin: 0 40px 0;}

/* prev and next links at the bottom of single articles */
/* not the same as the blog - the blog nav lacks hooks to style */
.contentpaneopen table.pagenav th {background: transparent; border: 0;} /* prev and next are both in th's */
.contentpaneopen table.pagenav td {border: 0;} /* prevent inheritance - this td is just used for spacing */
.contentpaneopen .pagenav a {text-decoration: none;}



/* ---------------------------------------------- */
/* ------ CATEGORY BLOG & FRONT PAGE ------------ */
/* ---------------------------------------------- */

/* menu item page title */
div.componentheading {
margin: 0 0 18px;
border-bottom: 2px solid #ddd;
color: #999;
}

/* columned article headings */
td.article_column td.contentheading {font-size: 14px; margin-bottom: 19px;}

/* leftmost blog column */
td.article_column {padding: 0;}

/* other blog columns */
td.article_column.column_separator {padding: 0 0 0 18px;}

/* horizontal blog separators - bottom stripe on all blog articles, even lead */
.blog span.article_separator {display: block; height: 2px; background: #ddd; margin: 18px 0;}
/* columned blog article separators can be specified here if needed */
.blog table span.article_separator {}



/* ---------------------------------------------- */
/* ------ CATEGORY LIST ------------------------- */
/* ---------------------------------------------- */
td.sectiontableheader {text-align: left; padding: 5px; width: auto;}
td.sectiontableheader a img {margin-left: 10px; position: relative; top: 2px;}
tr.sectiontableentry1 a, tr.sectiontableentry2 a {}
td.contentdescription {width: 100%;} /* Needed to fill the available space in IE8 */



/* ---------------------------------------------- */
/* ------ POLL RESULTS PAGE --------------------- */
/* ---------------------------------------------- */
/* without #poll, some of these apply to the module also */
#poll {width: 100%;}
#poll #id {width: auto !important; margin: 0 0 20px 20px;}
#poll .pollstableborder {width: 100%; border-bottom: 1px solid #ccc;}
#poll .pollstableborder td {padding: 9px !important;}
.pollstableborder th {padding-bottom: 18px;}
.pollstableborder th img {display: none;}
.pollstableborder {width: auto;}
.smalldark {font-size: 85%;} /* info at the bottom */

/* !NOTE! - multiple pages use these layout elements */
/* changing them here will also cause changes on the CatList page */
/* Polls use .sectiontableentry0 & 1, while CatList uses 1 & 2 */
.sectiontableentry0 td, .sectiontableentry1 td, .sectiontableentry2 td {
    border: 0 !important;
    background: none !important;
    font-size: 100% !important;
    text-align: left !important;
    vertical-align: middle !important;
    padding: 9px !important;
    font-weight: normal !important;
}
.sectiontableentry0 td, .sectiontableentry2 td {background: #eee !important;}



/* ---------------------------------------------- */
/* ------ ARCHIVE LIST -------------------------- */
/* ---------------------------------------------- */
#archive-list {margin: 18px 0 0 0;}
#archive-list li {padding: 18px;}
#archive-list li.row1 {}
#archive-list li.row2 {background: #eee;}
#archive-list h4 {}
#archive-list .metadata {margin: 9px 0 0; font-size: 11px; font-weight: normal; color: #666;}
#archive-list .metadata span.created-date {}
#archive-list .metadata span.author {float: right;}
#archive-list div.intro {margin-top: 9px;}



/* ------------------------ */
/* --- CC BOARD STYLING --- */
/* ------------------------ */
td.ccbheaderrow table.ccbnormaltable td {padding: 5px;} /* tds containing the menu and user info */
td.ccbtopleftgray, td.ccbtopmiddlegray, td.ccbtoprightgray {background: #4a4a4a !important;}
td.ccbleftbody, td.ccbheaderrow, td.ccbrightbody, td.ccbbotleft,
td.ccbbotmiddle, td.ccbbotright, td.ccbdatacolumn, td.ccbpostarea,
tr.ccbfrmrowheader, tr.ccbboardsummary {background: #eee !important;}
.bbcode_quote {border-color: #ddd; background: #fff;}
div.bbcode_quote_head {color: #aaa;}
div.bbcode_quote_body {color: #555;}
a.ovalbuttongray {
  background: #4a4a4a; /* - */
  display: block;
  float: left;
  font: inherit;
  line-height: inherit; /* - */
  height: auto; /* - */
  color: white;
  padding: 0 7px;
  text-decoration: none;
  margin-right: 10px;
  border-radius: 3px;
  font-size: inherit; line-height: 2em; /* - */
}
a:link.ovalbuttongray {color: white;}
a.ovalbuttongray:hover, a.ovalbuttongray:active {color: white; opacity: 0.8;}
a.ovalbuttongray span {
  background: none;
  display: normal;
  color: inherit;
  padding: 0;
}
a.ovalbuttongray:hover span {
  color: inherit;
  background: none;
}
a.squarebutton {
  background: #aaa; /* - */
  display: block;
  float: right;
  font: inherit;
  line-height: inherit; /* - */
  height: auto; /* - */
  padding: 0 7px;
  margin-left: 4px;
  text-decoration: none;
  color: white;
}
a:link.squarebutton {color: white;}
a:hover.squarebutton, a:active.squarebutton {color: white; opacity: 0.7;}
a.squarebutton span {
  background: none;
  display: normal;
  color: inherit;
  padding: 0;
}
a.squarebutton:hover span {color: white; background: none;}

/* --- MEMBER LANDING, 'MY NAME IS' STICKER --- */
/* -------------------------------------------- */
#my-name-is {
height: 262px;
position: relative; border-radius: 4px; overflow: hidden; margin: 0 0 10px 0;
background: url(/jmc-assets/misc/new-my-name-is.png) right top no-repeat;/* default black suit */
/*  background: url(/jmc-assets/misc/my-name-is-blue-polo.png) right no-repeat; /* blue polo shirt */
/*  background: url(/jmc-assets/misc/my-name-is-female.png) right no-repeat; /* female suit */
/*  background: url(/jmc-assets/misc/my-name-is-gray-t.png) right no-repeat; /* gray t-shirt */
/*  background: url(/jmc-assets/misc/my-name-is-medical.png) right no-repeat; /* medical lab coat */
/*  background: url(/jmc-assets/misc/my-name-is-tan-sweater.png) right no-repeat; /* tan sweater */
/*  background: url(/jmc-assets/misc/my-name-is-worker.png) right no-repeat; /* general worker */
}
#my-name-is:before, #my-name-is:after {
  position: absolute;
  left: auto;
  right: 11px; 
  width: 354px;
  color: white;
  text-align: center;
  font-family: Arial, sans-serif;
}
#my-name-is:before {
  content: "HELLO";
  top: 20px;
  font-size: 45px;
  font-weight: bold;
  line-height: 45px;
}
#my-name-is:after {
  content: 'my name is';
  top: 70px;
  font-size: 18px;
  font-weight: normal;
  line-height: 18px;
}
#my-name-is .info {
  position: absolute; right: 11px; top: 105px;
  width: 354px; height: 120px; overflow: hidden; text-align: center;
  background: white;
}
#my-name-is h2 {
  font-size: 30px; color: #555; margin: 0;
}
#my-name-is h3 {
  font-size: 16px; color: #666; margin: 10px 0 0; line-height: 20px;
}
#my-name-is h4 {
  font-size: 16px; color: #666; margin: 0; padding: 0;
  position: absolute; bottom: 0; left: 0; width: 100%; text-align: center;
}
#my-name-is h2, #my-name-is h3, #my-name-is h4 {font-family: 'Comic Sans MS', cursive, sans-serif;}

#profile-update-message {
  position: absolute; left: 0px; bottom: 4px; margin: 0; padding: 5px 10px;
  font-size: 12px; color: #999; border-radius: 0 4px 4px 0; background: rgba(0,0,0,0.8);
  line-height: 18px;
}
#profile-update-message a:link {color: white;}
#profile-update-message a:hover, #profile-update-message a:active {color: white;}

/* ----------------------------------- */
/* --- MEMBER LANDING, QUICK LINKS --- */
/* ----------------------------------- */
.member-landing-quick-links {
  border-radius: 4px;
  margin: 0 0 10px 0; padding: 10px 5px;
  background: #eee;
}
.member-landing-quick-links ul {margin: 0; padding: 0; list-style: none; overflow: hidden;}
.member-landing-quick-links ul li {float: left; border-left: 1px solid #bbb; padding: 0px 5px;}
.member-landing-quick-links ul li:first-child {border: 0;}



/* -------------------------- */
/* --- HOME PAGE TEMPLATE --- */
/* -------------------------- */
.home-template-01 {}
.home-main {
  border-bottom: 1px solid #a4a4a4;
  padding-bottom: 23px;
}
.home-sub {
  width: 330px;
  float: left;
  margin-top: 40px;
}
.home-sub:nth-child(odd) {margin-right: 30px;}



/* ---------------------- */
/* --- DIY H6 BUTTONS --- */
/* ---------------------- */
h6 a, .button-grid a {
  background: #67b01d;
  color: white;
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
  padding: 8px;
  border-radius: 3px;
  display: block;
  text-align: center;
  max-width: 240px;
  margin: 0 auto;
  text-decoration: none;
}
.home-sub h6 a {max-width: none}
.button-grid a {
  margin: 10px auto;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
h6 a:hover, h6 a:active, .button-grid a:hover {opacity: 0.8;}




/* ---------------------- */
/* --- DIY H5 BUTTONS --- */
/* ---------------------- */
h5 a, .button-grid a {
  background: #385368;
  color: white;
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
  padding: 8px;
  border-radius: 3px;
  display: block;
  text-align: center;
  max-width: 240px;
  margin: 0 auto;
  text-decoration: none;
}
.home-sub h5 a {max-width: none}
.button-grid a {
  margin: 10px auto;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
h5 a:hover, h5 a:active, .button-grid a:hover {opacity: 0.8;}






/* Grid Layout */
.grid-layout, .button-grid, .mc-columns .content-wrapper {
  -webkit-columns: 216px 3;
  -moz-columns: 216px 3;
  columns: 216px 3;
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
  margin-bottom: 20px;
}

.grid-layout img, .mc-columns .content-wrapper img {float: left; margin: 0 10px 10px 0; display: block;}

.grid-box, .button-grid p, ul.button-grid li {
  display: inline-block; 
  width: 100%;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  margin: 0;
}

table.grid-table td {border: 0; padding: 0;}
blockquote.button-grid, blockquote.grid-layout {margin: 0; padding: 0; border: 0; background: none;}
ul.button-grid, ul.button-grid li {margin: 0; list-style: none; padding: 0}


/* Floats */ 
.mc-image-left, .mc-image-left-large {float: left; margin: 0 13px 10px 0; clear: left;}
.mc-image-right, .mc-image-right-large {float: right; margin: 0 0 10px 13px; clear: right;}



/* ------------------- */
/* --- BREAKPOINTS --- */
/* ------------------- */

/*
Baseline is Tablet Landscape */
#phone-portrait, #phone-landscape, #tablet-portrait, #tablet-landscape {
  display: none; position: absolute; top: -100%; left: -100%; height: 1px; width: 1px;
}

#tablet-landscape {display: block;}

.full-width .side-bar {display: none;}
.full-width #content-wrap.r-mid #content-padding {width: 100%;}

@media screen and (min-width: 1000px) {
  .full-width .home-sub {width: auto; max-width: 445px}
}

/*
Tablet Portrait */
@media screen and (max-width: 1000px) {
  a[href*="task=edit"] {display: none;} /* the front-end edit button */
  #primary-nav-container, #tablet-landscape, .login-search {display: none;}
  #tablet-portrait {display: block;}
  .mc-logo-link {width: 80%}
  a#menu-toggle{
    height: 32px;
    line-height: 32px;
    width: 32px;
    font-size: 32px;
    background: transparent;
    position: absolute;
    top: 50%; right: 3.90625%;
    margin-top: -16px;
    display: block;
    text-decoration: none;
  }
  a#menu-toggle-x {
    left: 56%;
    margin-left: -48px;
    top: 10px;
    right: auto;
    text-align: center;
    background: none;
    z-index: 4;
    position: fixed;
    color: #006F51;
    border-radius: 50%;
    border: 2px solid #006F51;
    box-shadow: none;
    height: 16px;
    width: 16px;
    line-height: 16px;
    font-size: 16px;
    padding: 4px;
    display: none;
    text-decoration: none;
  }
  body.show-mobile > a#menu-toggle-x {display: block;}
  .site-width {padding: 30px 3.90625%; width: auto;}
  #featured-content .site-width {max-width: none}
  #header {margin-top: 0;}
  #footer {margin-bottom: 0;}
  #content-wrap.r-mid #content-padding {width: auto; float: none;}
  #right-bar {float: none; width: auto;}
  .home-sub,
  .side-bar .moduletable {
    width: 47.881355932203%; 
    float: left; 
    margin: 30px 0 0;
    padding: 0;
    background: none;

  }
  .home-sub:nth-child(odd),
  .side-bar .moduletable:nth-child(odd) {margin-right: 4.237288135593%; clear: left;}

  #right-bar.side-bar .moduletable {margin-top: 30px}

  #right-bar {font-size: 14px;}

  .mobile-menu-top {min-height: 48px;}
  .mobile-menu-top.modules-0 ~ .mobile-menu ul.resp-menu {padding-top: 70px;}
}

/* 6 Plus Landscape */
@media screen and (max-width: 736px){
    #featured-content {display: block;} /* hide slider at this size and below */
    .login-search-menu a#mcSimpleLogin,
    .login-search-menu .moduletable.mc-search {height: 30px; line-height: 30px; margin: 0 20px 2px 20px;}
    .login-search-menu a#mcSimpleLogin {margin-bottom: 10px;}
    .login-search-menu .mc-search input.inputbox {height: 20px; line-height: 20px}
    .login-search-menu a#mcSimpleLogin:after {margin-right: 5px}
    .login-search-menu a#mcSimpleLogin:after,
    .login-search-menu .moduletable.mc-search:after {font-size: 16px;}
    .mobile-menu ul.resp-menu {padding-top: 180px;}
    .mobile-menu-top.modules-2 ~ .mobile-menu ul.resp-menu {padding-top: 160px;}
    .mobile-menu-top.modules-1 ~ .mobile-menu ul.resp-menu {padding-top: 120px;}
}

/* Phone Landscape */
@media screen and (max-width: 650px) {
  #tablet-portrait {display: none;}
  #phone-landscape {display: block}

  .site-width {padding: 3.125%;}

  a#menu-toggle {right: 3.125%; top: 40px}

  a#menu-toggle-x {
    left: 78.125%; /* match width of body.show-mobile > .site-container*/
    margin-left: -38px; /* width of element plus right margin */
  }
  .login-search-menu a#mcSimpleLogin,
  .login-search-menu .moduletable.mc-search {margin-left: 10px; margin-right: 10px;}

  body.show-mobile > .site-container, body.show-mobile > .site-container .site-overlay {left: 78.125%}
  .mobile-menu ul.resp-menu {width: 78.125%}
  .login-search-menu {width: 78.125%; padding-bottom: 8px;}
  .mobile-menu-top.modules-2 ~ .mobile-menu ul.resp-menu {padding-top: 150px;}
  .mobile-menu-top.modules-1 ~ .mobile-menu ul.resp-menu {padding-top: 110px;}
  .login-search-menu .mc-search input.inputbox {width: 75%}


  .mobile-menu ul.resp-menu li a, .mobile-menu ul.resp-menu li .separator {padding: 2px 10px;}
  #right-bar .moduletable {float: none; width: auto; margin-right: 0;}
  .footer-info, .socnets, #RTT {float: none; text-align: center; margin: 0 0 20px 0; display: block; max-width: none;}
  .socnets li {display: inline-block; float: none; margin: 0 4px;}
  #RTT {margin: 0;}

  .sub-modules div.home-sub {float: none; width: auto; margin-right: 0;}

  /*** Member Landing Page ***/
  #profile-update-message {
    width: 97%; 
    border-radius: 4px;
    bottom: -32px;
    padding-left: 1.5%; padding-right: 1.5%;
  }
  #my-name-is {
    background-image: none;
    background-position: center 20px;
    background-repeat: no-repeat;
    border-radius: 3px;
    padding-top: 100px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 36px;
    overflow: visible;
  }
  #my-name-is:before, #my-name-is:after {
    right: auto;
    left: 0;
    width: 100%;
  } 
  #my-name-is .info {
    width: auto;
    background: white;
    position: static;
    text-align: center;
    height: auto;
    padding-top: 5px;
    border-width: 1px;
    border-style: solid;
  }
  #my-name-is h3 {margin-bottom: 20px;}
  #my-name-is h4 {position: relative; margin-bottom: 5px;}
  .member-landing-quick-links ul li {border: 0;}

  /* Fix for filter box in Category List layout */
  table.contentpane td input.inputbox[name="filter"] {width: 40%} 

  .mc-image-left, .mc-image-right {max-width: 40% !important;}
  .mc-image-left-large, .mc-image-right-large {display: block; float: none; margin: 10px 0; width: auto;}
}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
/* ^^^^^^^^^^^ PLEASE DON'T EDIT ANYTHING ABOVE THIS LINE WITHOUT TALKING TO KS or BG ^^^^^^^^^^^ */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
/* vvvvvvvvvvv            STYLING AND COLOR CHANGES CAN ALL BE FOUND BELOW            vvvvvvvvvvv */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */



/* SITE BACKGROUND
-------------------------------------------------- */
#bkg {
    background: url(../images/site-bkg.jpg) top no-repeat fixed;
    background-color: #555C4C;
}

/* GENERAL
-------------------------------------------------- */
a                                       {color: #67B01D; font-weight:700;}

/* menu in side with class of mc.-button-list */
.mc-button-list li a                    {background-color: #006F51; color: #fff;}

/* menu icon that appears in the header */
a#menu-toggle      {color: #006F51;}

/* H6 A - the DIY buttons in content */
h6 a, .button-grid a                    {background-color: #67b01d;color: #fff;}
h1                                      {color: #006F51;}
h2                                      {color: #006F51;}
.moduletable h3                         {color: #006F51; border-color: #CEDAE1;} /* module titles */
.home-main                              {border-color: #CEDAE1;} /* divline in home page layout */
/* CC BOARD - horizontal bars */
td.ccbtopleftgray, td.ccbtopmiddlegray, 
td.ccbtoprightgray                      {background: #006F51 !important;}

#my-name-is                             {background-color: #006F51;}
#my-name-is .info                       {border-color: #006F51;}


/* SIDE MENU at BREAKPOINTS
-------------------------------------------------- */
/* the X that closes the sliding menu */
a#menu-toggle-x            {color: #006F51; border-color: #006F51; display: none;}

/* menu items in sliding menu */
.mobile-menu a, .mobile-menu .separator           {color: #808080 !important;} /* all but top level */
.mobile-menu ul.resp-menu > li > a, 
.mobile-menu ul.resp-menu > li > .separator       {color: #006F51 !important;} /* top level */

/* login button */
.login-search-menu a#mcSimpleLogin                {background-color: #006F51;}


/* LOGIN BUTTONS & SEARCHES - colors
-------------------------------------------------- */
/* HEADER */
#header a#mcSimpleLogin                         {background: #006F51; color: white;} /* login */
#header .moduletable.mc-search                  {background: #E6E6E6;} /* search box */
#header .mc-search input.inputbox, 
#header .moduletable.mc-search:after            {color: #4A4A4A;} /* search text & icons */
/* SIDEBAR */
.login-search.side-bar a#mcSimpleLogin          {background: #4a4a4a; color: #fff;}
.login-search.side-bar a.button.mc-search       {background: #4a4a4a; color: #fff;}

/* LOGIN & SEARCH HIDING & SETUP
-------------------------------------------------- */
/* you dont want the login-search component to be in both the side-bar AND the header, so choose one to hide below */
#header div.login-search {}
div.login-search.side-bar {display: none;}
/* both site search and member search need a class of .mc-search  */
/* member search also needs a class of .member-search             */
/* if you only have one search in the header, that search also needs a class of .single-search */


/* MAIN MENU - bar & 1st level
-------------------------------------------------- */
#primary-nav-container .site-width                                  {background-color: #006F51;} /* bar color */
.resp-menu > li > a, .resp-menu > li > .separator                   {color: #fff;} /* text */
.resp-menu > li:hover > a, .resp-menu > li:hover > .separator       {background: #007858; color: #fff;} /* hover */

/* MAIN MENU - 2nd level
-------------------------------------------------- */
.resp-menu li li > a, .resp-menu li li > .separator                 {background: #007858; color: #fff;}
.resp-menu li li:hover > a, .resp-menu li li:hover > .separator     {background: #008461; color: #fff;} /* hover */

/* MAIN MENU - 3rd level
-------------------------------------------------- */
.resp-menu li li li a, .resp-menu li li li .separator               {background: #007858; color: #EFEFEB;}
.resp-menu li li li:hover a, .resp-menu li li li:hover .separator   {background: #008461; color: white;} /* hover */


/* FOOTER
-------------------------------------------------- */
#footer .site-width         {background: #006F51;}
.footer-info                {color: #fff;}
.footer-info            a   {color: #fff;}

/* SOCIAL NETWORK MENU - classes that can go on the MENU are: 
.rounded-sq (rounded square instead of a circle)#00835F
.color      (use this and remove all colors below to get the brand colors on the background)
.icon       (displays just the icon with no circle if you unset the background here)
-------------------------------------------------- */
.socnets a          {background: #fff; color: #006F51;}
#footer .socnets a:hover    {background: #fff; color: #006F51;}

/* BACK TO TOP + ARROW
-------------------------------------------------- */
#RTT                        {color: #fff;} /* words */
#RTT span                   {color: #fff;} /* arrow */
#RTT:hover                  {color: #fff;} /* words hover */
#RTT:hover span             {color: #fff;} /* arrow hover */

/* POWERED BY MEMBERCLICKS
-------------------------------------------------- */
#pbmc                       {color: #fff;}
#pbmc:hover                 {color: #fff;}




/* CALENDAR STYLES
-------------------------------------------------- */
.mc-event-details .event-time-separator {
    display: none;
}
.mc-event-details .event-time-separator.dash {
    display: inline;
}
.mc-event-details .event-start-date:after,
.mc-event-details .event-stop-date:after {
    content: '';
    display: block
}

li.ev_td_li .event-list-item {margin: 10px 0}









/* ---------- SBI Logo ---------- */

#sbiWrap {
    width: 88px;
    position: relative;
    top: 20px;
    margin-bottom: 40px;
}

#sbi {
position: absolute;
left: 435px;
display: block;
width: 88px; height: 25px;
background: url("/jmc-assets/sbi-ftr-logo/sbi-white.png") top left no-repeat;
margin-left: 0px;
text-decoration: none;
text-indent: -9999em;

}

#sbi:hover {background-position: 0 -25px;}






/* ---------- WRPA MISSION ---------- */





.moduletable.mc-mission {
    width: 100%;
    background: #006F51 url('https://wrpa.memberclicks.net/assets/site/seamless-diag-pattern.png');
    color: #fff;
    padding: 15px 0;
  }

.moduletable.mc-mission  h1 {color: #fff; padding: 15px; font-size: 20px; }


.moduletable.mc-mission  h2 {color: #fff; padding: 15px; font-size: 36px; }



/* THE END...
-------------------------------------------------- */





/* Featherlight
-------------------------------------------------- */



/**
 * Featherlight - ultra slim jQuery lightbox
 * Version 1.7.13 - http://noelboss.github.io/featherlight/
 *
 * Copyright 2018, Noël Raoul Bossart (http://www.noelboss.com)
 * MIT Licensed.
**/
html.with-featherlight {
    overflow: hidden
}

.featherlight {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483647;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    background: #333;
    background: rgba(0,0,0,0)
}

.featherlight:last-of-type {
    background: rgba(0,0,0,.8)
}

.featherlight:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

.featherlight .featherlight-content {
    position: relative;
    text-align: left;
    vertical-align: middle;
    display: inline-block;
    overflow: auto;
    padding: 25px 25px 0;
    border-bottom: 25px solid transparent;
    margin-left: 5%;
    margin-right: 5%;
    max-height: 95%;
    background: #fff;
    cursor: auto;
    white-space: normal
}

.featherlight .featherlight-inner {
    display: block
}

.featherlight link.featherlight-inner,.featherlight script.featherlight-inner,.featherlight style.featherlight-inner {
    display: none
}

.featherlight .featherlight-close-icon {
    position: absolute;
    z-index: 9999;
    top: 0;
    right: 0;
    line-height: 25px;
    width: 25px;
    cursor: pointer;
    text-align: center;
    font-family: Arial,sans-serif;
    background: #fff;
    background: rgba(255,255,255,.3);
    color: #000;
    border: 0;
    padding: 0
}

.featherlight .featherlight-close-icon::-moz-focus-inner {
    border: 0;
    padding: 0
}

.featherlight .featherlight-image {
    width: 100%
}

.featherlight-iframe .featherlight-content {
    border-bottom: 0;
    padding: 0;
    -webkit-overflow-scrolling: touch
}

.featherlight iframe {
    border: 0
}

.featherlight * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

@media only screen and (max-width: 1024px) {
    .featherlight .featherlight-content {
        margin-left:0;
        margin-right: 0;
        max-height: 98%;
        padding: 10px 10px 0;
        border-bottom: 10px solid transparent
    }
}

@media print {
    html.with-featherlight>*>:not(.featherlight) {
        display: none
    }
}

/* ------------------------ ACCORDION --------------------------------------- */
.moduletable.mc-padding li {
    padding-bottom: 5px;
}

.accordion input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.accordion .row {
    display: flex;
}

.accordion .row .col {
    flex: 1;
}

.accordion .row .col:last-child {
    margin-left: 1em;
}

.tabs {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);
}

.tab {
    width: 100%;
    overflow: hidden;
    border-bottom: 2px solid #c3c3c3;
}

.tab-label {
    display: flex;
    justify-content: space-between;
    padding: 1em;
    font-weight: bold;
    cursor: pointer;
}

.tab-label::after {
    content: "\203A";
    width: 1em;
    height: 1em;
    text-align: center;
    transition: all 0.35s;
}

.tab-content {
    max-height: 0;
    padding: 0 1em;
    color: #000;
    background: white;
    transition: all 0.35s;
}

.tab-close {
    display: flex;
    justify-content: flex-end;
    padding: 1em;
    font-size: 0.75em;
    background: #dddddd;
    cursor: pointer;
}



.accordion input:checked+.tab-label::after {
    transform: rotate(90deg);
}

.accordion input:checked~.tab-content {
    max-height: 100vh;
    padding: 1em;
}


/***** Accordion Lables*****/
.tab-label {
    background: #006e51;
    color: #ffffff;
}

.tab-label:hover {
    background: #67b01d;
    color: #ffffff;
}

.tab-close:hover {
    background: #67b01d;
}

.accordion input:checked+.tab-label {
    background: #67b01d;
    color: #ffffff;
}

/*Safari fix
.accordion p, .accordion ol, .accordion  ul, .accordion ul li, .accordion ol li, .accordion h1, .accordion h2, .accordion h3, .accordion h4, .accordion h5, .accordion h6  {
    margin: unset;
}*/



.mylightbox {display: none;}