/* Primary Content and Structure CSS */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> FONTS  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Open Sans is sans serif				Use 300/600 weights Antic Slab is (slab) serif			Use 400 weight only            					*/
.serif, nav a, #goquery, h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .front p, .back p, #pubs span, #footsearch label, #footnav li, #skillsset li a, #actlistbymonth #actlist dt, #skillsset5 li, dd.actdes u, #volsintro a, #contact_form dd input, #contact_form dd textarea, .stackh2, #monav, .instructions p strong u, .instructions p u strong, #actlinks, #molinks, #topwhatsearch, #newdetail .pages-dots, .pablurb p { font-family: "Antic Slab", Georgia, serif; font-style: normal; font-weight: 400; }

.sans, body, form, select, #footnav li li, nav li ul a, h3.tab { font-family: "Open Sans", Verdana, "Arial", sans-serif; font-style: normal; font-weight: 300; }

#newdetail .pages-dots { font-family: "Baloo Bhai", sans-serif; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> GLOBALS  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
* { margin: 0; padding: 0; }

body { text-align: center; color: #555; font-size: 16px; line-height: 1.45; }

form, input, select, textarea { margin: 0px; padding: 0px; }

a, img, table, td, th, fieldset { border: 0; }

div, ul, ol, dl, li, dd, dt { width: auto; list-style: none; }

th { font-weight: bold; }

td { vertical-align: top; }

br { line-height: inherit; }

p { font-weight: 300; }

p * { font-size: 1em; }

a, a:active, a:visited { text-decoration: none; color: #900; }

a:hover { text-decoration: underline; color: #c00; }

address { font-style: normal; font-weight: normal; }

small, .small { font-size: 80% !important; }

u { text-decoration: none; }

em, i, .em, .i { font-style: italic; font-weight: normal; }

strong, b, .strong, .b { font-style: normal; font-weight: 600; }

strong em, strong i, strong .em, strong .i, .strong em, .strong i, .strong .em, .strong .i, b em, b i, b .em, b .i, .b em, .b i, .b .em, .b .i, em strong, em b, em .strong, em .b, .em strong, .em b, .em .strong, .em .b, i strong, i b, i .strong, i .b, .i strong, .i b, .i .strong, .i .b { font-style: italic; font-weight: 600; }

.nowrap { white-space: nowrap; }

.inline { display: inline; }

.block { display: block; }

.lcase { text-transform: lowercase; }

.ucase { text-transform: uppercase; }

.capcase { text-transform: capitalize; }

.clearl { clear: left; }

.clearr { clear: right; }

.clearb { clear: both; }

.clearself { overflow: auto; }

.nolink { cursor: default; }

.fll { float: left; }

.flr { float: right; }

.attn { color: #f39 !important; }

.ast { font-size: 75%; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

/* HTML5 fix for IE */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> FLOATS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.left3070 { float: left; width: 30%; }

.left7030 { float: left; width: 70%; }

.left3565 { float: left; width: 35%; }

.left6535 { float: left; width: 65%; }

.left4060 { float: left; width: 40%; }

.left6040 { float: left; width: 60%; }

.left33 { float: left; width: 33%; }

.left49 { float: left; width: 49%; }

.left50 { float: left; width: 50%; }

.right3070 { float: right; width: 30%; }

.right7030 { float: right; width: 70%; }

.right3565 { float: right; width: 35%; }

.right6535 { float: right; width: 65%; }

.right4060 { float: right; width: 40%; }

.right6040 { float: right; width: 60%; }

.right33 { float: right; width: 33%; }

.right49 { float: right; width: 49%; }

.right50 { float: right; width: 50%; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> CONTAINERS & PRIMARIES - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
header, #mains, .tfloats { margin: 0 auto; text-align: left; width: 990px; }

.tfloats { display: table; }

.col-main, .col-main-fl, .col-main-fr { display: table-cell; vertical-align: top; width: 690px; }

.col-r, .col-l { display: table-cell; vertical-align: top; width: 300px; }

/* no border slim col version */
.col-r-fl { display: table-cell; vertical-align: top; width: 299px; min-width: 299px; border-left: 1px solid rgba(124, 154, 174, 0.5); }

.col-l-fl { display: table-cell; vertical-align: top; width: 299px; min-width: 299px; border-right: 1px solid rgba(124, 154, 174, 0.5); }

.col-r-fr { display: table-cell; vertical-align: top; width: 299px; min-width: 299px; border-left: 1px solid rgba(124, 154, 174, 0.5); }

.col-l-fr { display: table-cell; vertical-align: top; width: 299px; min-width: 299px; border-right: 1px solid rgba(124, 154, 174, 0.5); }

.noborder { border: none; }

.revorder { direction: rtl; }

.revorder * { direction: ltr; }

header { height: 145px; position: relative; }

#mains { min-height: 300px; border-top: 10px solid #7c9aae; }

#upper { min-height: 200px; }

.fullw #upper { margin: 60px; }

#primary { width: auto; overflow: auto; }

#cont { margin: 30px; }

footer { margin: 0 auto; text-align: left; width: 910px; padding: 20px; background: #7c9aae; background: rgba(124, 154, 174, 0.3); }

/* --- regular items --- */
h1, .h1 { font-size: 38px; line-height: 1.15; margin: 170px auto 20px auto; color: #2f5974; }

h2, .h2 { font-size: 34px; line-height: .95; margin: 1em 0 0.5em 0; }

h3, .h3 { font-size: 26px; line-height: .95; margin: 1em 0 0.5em 0; }

h4, .h4 { font-size: 22px; line-height: .95; margin: 1em 0 0.5em 0; color: #537991; }

h5, .h5 { font-size: 20px; line-height: .95; margin: 1em 0 0.5em 0; }

h6, .h6 { font-size: 20px; line-height: .95; margin: 1em 0 0.5em 0; }

#cont p { margin-bottom: .65em; }

#cont ol { margin-bottom: 1.15em; }

#cont ol li { list-style: decimal; margin-left: 30px; }

/* --- tooltips --- */
.myTT { background: #537991; color: white; border-color: white; }

.myTT .qtip-content { font-size: 14px; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> HEADER - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#logo { position: absolute; top: 33px; left: 75px; }

#myurl { display: none; }

#social { position: absolute; top: 3px; right: 27px; height: 20px; padding: 0; font-size: 1px; line-height: 1px; }

#social li { margin: 0 0 0 5px; float: left; width: 20px; height: 20px; }

#social li a { display: block; }

#social li img { width: 100%; }

#userlog { position: absolute; top: 3px; right: 162px; height: 20px; }

#userlog p { color: rgba(153, 0, 0, 0.5); font-size: 14px; line-height: 20px; text-align: right; }

#userlog a { text-decoration: none; color: rgba(153, 0, 0, 0.5); }

#userlog a:hover { text-decoration: underline; color: rgba(153, 0, 0, 0.85); }

#tagline { position: absolute; top: 123px; left: 35px; font-size: 13px; color: #7c9aae; }

nav { position: absolute; /* top: 72px; right: 0; */ bottom: -5px; right: 0px; }

#search { position: absolute; width: 47px; left: 913px; bottom: -5px; height: 36px; background: #7c9aae url(/assets_jb/img/btn-search-q.png) no-repeat 15px 9px; overflow: hidden; }

#search:hover { width: 277px; left: 683px; background-image: none; /* background-position-x: 245px; */ }

#headsearch { position: absolute; bottom: 0; right: 0; width: 272px; height: 36px; /*  visibility: hidden; */ display: none; }

#search:hover #headsearch { /* visibility: visible; */ display: block; }

#goquery { position: absolute; top: 5px; /* left: 0; */ width: 205px; padding: 0 10px; height: 26px; line-height: 26px; font-size: 18px; color: #900; background: #fff; border: 0; }

#gosearch { position: absolute; top: 9px; /* left: 240px; */ }

#goquery { left: 42px; }

#gosearch { left: 10px; /* outline: 1px dotted red; */ }

#newsearch { position: absolute; width: 49px; height: 36px; left: 912px; bottom: -5px; }

#newsearch a img { background: #7c9aae; padding: 7px 15px 7px 16px; }

#newsearch a:hover img { background: #900; }

#topsearch { position: absolute; right: 27px; top: 30px; }

#topsearch input { position: absolute; right: 0; top: 0; /* outline: 1px dotted red;  */ }

#topsearch #topwhatsearch { padding: 3px 10px 0 10px; height: 18px; border: 1px solid #7c9aae; height: 15px; width: 98px; font-size: 14px; opacity: .3; }

#topsearch #topwhatsearch:focus { opacity: 1.0; outline: none; }

#topsearch #topgosearch { background: #7c9aae; height: 20px; }

.taps:hover, .taps.hover { border: none; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> HEADER NAV - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
nav ul, nav li { list-style: none; }

nav ul { position: relative; }

nav ul li { display: block; float: left; position: relative; }

nav ul li a { display: block; padding: 0 27px; line-height: 40px; font-size: 22px; text-align: center; text-decoration: none; }

nav ul li a img { padding-right: 5px; width: 22px; }

nav ul li a:hover { text-decoration: underline; }

nav ul li ul { display: none; position: absolute; z-index: 101; margin: 0; padding: 5px 5px 3px 5px; text-align: left; background: #fff; border: 1px solid rgba(124, 154, 174, 0.5); }

nav ul li li { display: block; float: none; outline: none; }

nav ul li li a { background: rgba(124, 154, 174, 0.08); padding: 6px 5px; margin-bottom: 2px; font-size: 18px; line-height: 22px; text-align: left; width: 220px; }

nav ul li:hover ul { display: block; }

nav ul li li a:hover { background: rgba(124, 154, 174, 0.15); }

nav li > div { top: auto; left: auto; }

/* --- OLD NAV fixes top and left in browsers other than IE that position to the top right of the parent li,not bottom left --- */
nav li:last-child ul { right: 2px; }

/* protect the right-edge last-nav item */
nav #actsnav { display: none; position: absolute; z-index: 101; margin: 0; left: -165px; padding: 5px 0 3px 5px; text-align: left; background: #fff; border: 1px solid rgba(124, 154, 174, 0.5); width: 470px; }

nav li:hover #actsnav { display: block; }

nav #actsnav ul { float: left; position: relative; padding: 0; border: none; padding-right: 5px; }

header li#n3 li a { width: 120px; }

header li#n4 li a { width: 130px; }

nav a { color: #537991; }

nav a:visited { color: #537991; }

nav a:hover { color: #900; }

nav a:active { color: #c00; }

nav li:hover a { color: #900; }

nav a.nope, nav ul li a.nope:hover { color: #f39; cursor: default; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> FOOTER - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
footer { overflow: auto; }

footer section { overflow: auto; }

footer h3 { font-size: 20px; line-height: 1.15; color: #900; }

#foottext p { margin: 3px 10px 0 0; font-size: 13px; padding-top: 5px; border-top: 1px solid rgba(124, 154, 174, 0.25); }

#foottext div:first-of-type h3 { margin-top: 0; }

#footlink { /* width: 59%; */ padding-left: 2.5%; border-left: 1px solid rgba(255, 255, 255, 0.5); min-height: 200px; }

#footsearch { position: relative; display: block; padding: 5px; height: 26px; margin-bottom: 20px; background: rgba(124, 154, 174, 0.3); }

#footsearch label { position: absolute; top: 8px; left: 8px; font-size: 18px; }

#fgoquery { position: absolute; top: 5px; left: 200px; padding: 0 10px; width: 280px; height: 26px; line-height: 26px; font-size: 18px; color: #900; background: #fff; border: 0; }

#fgosearch { position: absolute; top: 5px; right: 5px; padding: 5px 5px 4px 5px; background: #7c9aae; }

#footnav { overflow: auto; }

#footnav li { width: 20%; margin-right: 2%; float: left; display: block; }

#footnav li:last-child { margin-right: 0; }

#footnav li ul { width: 100%; border-top: 1px solid rgba(124, 154, 174, 0.25); padding-top: 5px; }

#footnav li ul + ul { border-top: none; }

#footnav li ul li { width: 100%; }

#footnav li a { font-size: 18px; color: #333; text-decoration: none; }

#footnav li a img { display: none; }

#footnav li li a { font-size: 13px; /* padding-left: 8px; text-indent: -8px; */ display: block; }

#footnav a:hover { text-decoration: underline; }

#fcopy { margin: 10px 0; padding: 10px 0; border: 1px solid rgba(124, 154, 174, 0.5); border-width: 1px 0; }

#footnav li#n2 { width: 23%; }

#footnav li#nX { width: 16%; }

#footnav li#n1 { width: 25%; }

#footnav li#n3 { width: 13%; }

#footnav li#n4 { width: 14%; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> PER PAGE CONTENT - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* --- in-content page footer ---*/
#ifoot { overflow: auto; background: rgba(153, 0, 0, 0.1); border-top: 1px solid rgba(153, 0, 0, 0.15); padding: 0 10px 30px 10px; }

#ifoot h1 { margin: 0 20px; padding: 10px 0; text-align: center; font-size: 24px; line-height: 1.15em !important; color: #900; border-bottom: 1px solid rgba(153, 0, 0, 0.12); }

#ifoot h2, #ifoot h3, #ifoot h4, #ifoot p, #ifoot ul { margin: 0 20px; }

#ifoot ul { margin-top: 10px; }

#ifoot h2 { margin-top: 30px; font-size: 21px; line-height: 28px; position: relative; border-bottom: 1px solid rgba(153, 0, 0, 0.12); }

#ifoot h3 { margin-top: 10px; font-size: 16px; line-height: 20px; }

#ifoot h4 { margin-top: 10px; font-size: 14px; line-height: 18px; }

#ifoot p { margin: 5px 20px; }

.lskills#ifoot h2 { margin-left: 46px; }

.lskills#ifoot h2 span { text-align: center; display: block; margin-right: 5px; margin-left: -32px; float: left; width: 30px; line-height: 30px; color: white; font-size: 18px; background: rgba(153, 0, 0, 0.45); }

.lskills#ifoot p a { display: block; background: rgba(153, 0, 0, 0.1); margin-top: 6px; padding: 3px 10px; }

#ifoot #fcol3 div { margin: 5px 20px; padding: 10px; background: rgba(255, 255, 255, 0.35); }

#ifoot #fcol3 p.pact { font-size: 85%; }

#ifoot #fcol3 div p { margin: 5px 0; font-size: 85%; }

/* --- FAQs --- */
.faqgroup { position: relative; border: 1px solid rgba(124, 154, 174, 0.5); padding: 20px; margin: 0 0 30px 0; }

.faqgroup h2 { /*position: absolute;  top: -20px; */ margin-top: 0; font-size: 26px; }

.faqgroup li { padding: 5px 0; font-size: 16px; list-style: circle; margin-left: 20px; }

.faqanswers { margin-top: 50px; }

.faqanswers article { margin: 40px 0; }

.faqanswers h3 { font-size: 22px; line-height: 1.15; }

.faqanswers p { font-size: 16px; margin: 0.5em 20px; }

/* --- BLOG --- */
#bloglist #cont article { border: 1px solid rgba(124, 154, 174, 0.5); padding: 20px 20px 0 20px; margin-top: 30px; overflow: auto; }

#bloglist #cont article h2 { font-size: 22px; line-height: 1.15; margin-top: 0; }

#bloglist #cont article img { float: left; margin-bottom: 10px; }

#bloglist #cont article p.post { margin-left: 170px; font-size: 16px; }

#bloglist #cont article p.post.noimg { margin-left: 0; }

#bloglist #cont article p.post a.keep { display: inline-block; background-color: rgba(153, 0, 0, 0.1); padding: 0 5px; }

#bloglist #cont article p.byline { margin: 20px -20px 0 -20px; clear: left; font-size: 14px; /* height: 28px; */ line-height: 28px; padding: 0 20px; background: rgba(124, 154, 174, 0.15); color: #7c9aae; }

#bloglist #cont h4 { margin: 60px 0 0 0; }

#blogarticle h1 { font-size: 42px; }

#blogarticle article { overflow: auto; }

#blogarticle #cont img { float: left; margin-right: 20px; }

#blogarticle #cont { font-size: 16px; }

#blogarticle #cont p.byline { padding: 5px; font-size: 14px; color: #7c9aae; border: 1px solid rgba(124, 154, 174, 0.25); border-width: 0 1px 1px 0; }

/* --- EVENTS --- */
#eventslist #cont article { border: 1px solid rgba(124, 154, 174, 0.5); padding: 20px 20px 0 20px; margin-top: 30px; overflow: auto; }

#eventslist #cont article h2 { font-size: 22px; line-height: 1.15; margin-top: 0; }

#eventslist #cont article div.post { margin-left: 0; /* font-size: 16px; */ }

#eventslist #cont article div.post a.keep { display: inline-block; background-color: rgba(153, 0, 0, 0.1); padding: 0 5px; }

#eventslist #cont article p.byline { margin: 20px -20px 0 -20px; clear: left; font-size: 14px; /* height: 28px; */ line-height: 28px; padding: 0 20px; background: rgba(124, 154, 174, 0.15); color: #7c9aae; }

#eventslist #cont h4 { margin: 60px 0 0 0; }

#eventsitem h1 { font-size: 42px; }

#eventsitem article { overflow: auto; }

#eventsitem #cont img { float: left; margin-right: 20px; }

#eventsitem #cont { font-size: 16px; }

#eventsitem #cont p.byline { padding: 5px; font-size: 14px; color: #7c9aae; border: 1px solid rgba(124, 154, 174, 0.25); border-width: 0 1px 1px 0; }

/* --- NEWS --- */
#newslist #cont article { border: 1px solid rgba(124, 154, 174, 0.5); padding: 20px 20px 0 20px; margin-top: 30px; overflow: auto; }

#newslist #cont article h2 { font-size: 22px; line-height: 1.15; margin-top: 0; }

#newslist #cont article img { float: left; margin-bottom: 10px; }

#newslist .post p { margin-left: 170px; }

/* container with .post fixes news index where P tag is already coming from wygwam */
#newslist #cont article p.post { margin-left: 170px; font-size: 16px; }

#newslist #cont article p.post.noimg { margin-left: 0; }

#newslist #cont article p.post a.keep { display: inline-block; background-color: rgba(153, 0, 0, 0.1); padding: 0 5px; }

#newslist #cont article p.byline { margin: 20px -20px 0 -20px; clear: left; font-size: 14px; /*  height: 28px; */ line-height: 28px; padding: 0 20px; background: rgba(124, 154, 174, 0.15); color: #7c9aae; }

#newslist #cont h4 { margin: 60px 0 0 0; }

#newsarticle h1 { font-size: 42px; }

#newsarticle article { overflow: auto; }

#newsarticle #cont img { float: left; margin-right: 20px; }

#newsarticle #cont { font-size: 16px; }

#newsarticle #cont p.byline { padding: 5px; font-size: 14px; color: #7c9aae; border: 1px solid rgba(124, 154, 174, 0.25); border-width: 0 1px 1px 0; }

/* --- CONTACT --- */
#contact_form { border: 1px solid rgba(124, 154, 174, 0.5); padding: 20px; }

#contact_form dl.val { vertical-align: top; }

#contact_form dt { float: left; width: 20%; line-height: 25px; padding-right: 2%; clear: left; text-align: right; margin-bottom: 25px; }

#contact_form dd { float: left; width: 75%; }

#contact_form dd input { width: 250px; height: 17px; }

#contact_form dd textarea { width: 400px; height: 180px; }

#contact_form dd input, #contact_form dd textarea { font-size: 14px; line-height: 17px; padding: 4px; border: 1px solid rgba(153, 0, 0, 0.5); }

p.button-holder { margin-left: 22%; }

/* --- ACTIVITIES / MONTHS ... LISTS / PAGES --- */
/* --- month lists by volume pages --- */
#monthlistbyvolume #upper { position: relative; margin-bottom: 0; padding-bottom: 60px; }

#monthlistbyvolume h1 { position: absolute; text-align: center; color: #900; border: 1px solid #900; background: rgba(153, 0, 0, 0.05); margin: 0; height: 205px; font-size: 205px; line-height: 205px; width: 225px; padding-top: 20px; }

#monthlistbyvolume h1 span { position: absolute; text-align: center; color: #537991; border: 1px solid #537991; background: white; margin-top: 175px; height: 32px; font-size: 26px; line-height: 38px; width: 140px; left: 50%; margin-left: -71px; }

#volsintro { margin-left: 35%; width: 65%; }

#volsintro p { font-size: 18px; margin-bottom: .5em; }

#volsintro ul { overflow: auto; }

#volsintro li { margin-top: 20px; float: left; width: 50%; }

#volsintro a { display: block; font-size: 24px; text-decoration: none; }

#volsintro span { display: inline-block; font-size: 18px; text-align: center; width: 32px; line-height: 32px; background: rgba(153, 0, 0, 0.15); }

#monthlistbyvolume h2 { margin: 30px 20px; padding-top: 30px; border-top: 1px solid rgba(124, 154, 174, 0.5); color: #7c9aae; text-align: center; font-size: 48px; }

#monthlistbyvolume h4 { text-align: center; /* outline: 1px dotted red; */ }

#monthlist a { text-decoration: none; }

#monthlist a:hover { color: #2f5974; }

#monthlist ul { overflow: auto; }

#monthlist li { float: left; width: 33%; }

#monthlist dl { margin: 20px; padding: 10px; position: relative; background: rgba(124, 154, 174, 0.15); height: 305px; }

#monthlist dl:hover { background: rgba(124, 154, 174, 0.25); }

#monthlist dt { position: relative; padding: 0 25px; margin-bottom: 10px; text-align: center; height: 20px; background: rgba(124, 154, 174, 0.35); }

#monthlist dt span { position: absolute; display: inline-block; width: 48px; line-height: 48px; font-size: 22px; top: -14px; margin-left: -25px; border: 1px solid #7c9aae; background: white; }

#monthlist dd p { padding: 5px; margin: 15px 5px; background: rgba(255, 255, 255, 0.75); }

/* --- supply  lists pages --- */
.supplies li { list-style: circle; margin-left: 20px; }

/* --- activities lists pages --- */
/* H1 / uppers stuff */
#actlistbymonth #monav { float: right; font-size: 38px; line-height: 1.15; }

#monav span { font-size: 55%; padding: 0 5px; color: rgba(124, 154, 174, 0.5); }

#monav a { font-size: 65%; color: rgba(124, 154, 174, 0.5); }

#monav .goprev { background: url(/assets_jb/img/bg-month-next-prev-half-size.png) no-repeat left 1px; padding-left: 20px; }

#monav .gonext { background: url(/assets_jb/img/bg-month-next-prev-half-size.png) no-repeat right 1px; padding-right: 20px; }

#monav a.goprev:hover, #monav a.gonext:hover { background-position-y: -72px; color: #7c9aae; }

#actlistbymonth h1 span { font-size: 65%; color: rgba(124, 154, 174, 0.5); }

#actlistbyskill h1 { line-height: 72px; }

#actlistbyskill h1 img { width: 72px; margin-bottom: -17px; }

#actlistbyskill h1 ~ h1 { margin-top: 60px; }

#byskilllist a { text-decoration: none; }

#byskilllist a:hover { color: #2f5974; }

#byskilllist ul { overflow: auto; }

#byskilllist li { float: left; width: 33%; }

#byskilllist dl { margin: 20px; padding: 10px; position: relative; background: rgba(124, 154, 174, 0.15); height: 185px; }

#byskilllist .alt dl { height: 65px; }

#byskilllist dl:hover { background: rgba(124, 154, 174, 0.25); }

#byskilllist dt { position: relative; padding: 0 25px; margin-bottom: 10px; text-align: center; height: 20px; background: rgba(124, 154, 174, 0.35); }

#byskilllist dt span { position: absolute; display: inline-block; width: 48px; height: 48px; font-size: 0; top: -14px; margin-left: -25px; border: none; background: none; }

#byskilllist dt span img { width: 100%; }

#byskilllist dd h4 { text-align: center; }

#byskilllist dd p { padding: 5px; margin: 15px 5px; background: rgba(255, 255, 255, 0.75); }

#actlistbytype h1 { line-height: 72px; }

#actlistbytype h1 img { width: 72px; margin-bottom: -17px; }

#monthdesc ul { margin: 30px 30px 60px; }

#monthdesc li { list-style: circle; font-size: 16px; }

#skillsdesc { margin: 30px 30px 60px; font-size: 18px; }

#acttypedesc { margin: 30px 30px 60px; font-size: 18px; }

/* --- anchornav blocks --- */
#anchornav { padding: 10px; background: rgba(124, 154, 174, 0.35); height: 180px; }

#actlistbyskill #anchornav { padding-right: 8px; height: 122px; }

#actlistbytype #anchornav { padding-right: 8px; height: 122px; }

/* --- skills focus top anchor link set --- */
#skillsset { position: relative; }

#skillsset li { background: rgba(255, 255, 255, 0.85); position: absolute; width: 282px; color: #7c9aae; display: block; text-align: center; }

#skillsset li:hover { background: rgba(255, 255, 255, 0.55); }

#skillsset li:hover a { color: #537991; }

#skillsset li a { color: #7c9aae; display: block; font-size: 26px; line-height: 30px; text-decoration: none; }

#skillsset li li { background: none; position: relative; font-size: 14px; line-height: 15px; background: none; }

#skillsset li li:hover { background: none; }

#skillsset li:hover li { color: #537991; }

#gosk1 { top: 0; left: 0; height: 150px; padding: 15px 0; }

#gosk2 { top: 0; left: 284px; height: 30px; padding: 15px 0; }

#gosk3 { top: 0; left: 568px; height: 30px; padding: 15px 0; }

#gosk4 { top: 62px; left: 284px; height: 28px; padding: 15px 0; }

#gosk5 { top: 122px; left: 284px; height: 28px; padding: 15px 0; }

#gosk6 { top: 62px; left: 568px; height: 73px; padding: 30px 0 15px 0; }

/* --- life skills / 5 skills top anchor set --- */
#skillsset5 { position: relative; }

#skillsset5 li { background: rgba(255, 255, 255, 0.85); float: left; width: 282px; height: 30px; padding: 15px 0; margin: 0 2px 2px 0; color: #7c9aae; display: block; text-align: center; }

#skillsset5 li:hover { background: rgba(255, 255, 255, 0.55); }

#skillsset5 li:hover a { color: #537991; }

#skillsset5 li a { color: #7c9aae; display: block; font-size: 26px; line-height: 30px; text-decoration: none; }

#skillsset5 li a span { background: rgba(124, 154, 174, 0.85); color: white; display: inline-block; position: relative; top: -3px; font-size: 18px; width: 30px; line-height: 30px; text-decoration: none; }

#skillsset5 li#golskx { color: #2f5974; background: rgba(255, 255, 255, 0.1); font-size: 26px; line-height: 30px; }

/* --- activities and month gridded lists --- */
#actlist p { font-size: 14px; }

#actlist a { text-decoration: none; }

#actlist a:hover { color: #2f5974; }

#actlist ul { overflow: auto; padding-top: 60px; }

#actlist li { float: left; width: 33%; }

#actlist dl { margin: 20px; padding: 10px 10px 50px 10px; height: 180px; position: relative; background: rgba(124, 154, 174, 0.15); }

#actlist dl:hover { background: rgba(124, 154, 174, 0.25); }

#actlist dt { padding: 0 25px 5px 25px; margin-bottom: 5px; text-align: center; font-size: 22px; border-bottom: 1px solid rgba(83, 121, 145, 0.75); }

dd.actcom { float: right; }

dd.actcom img { width: 15px; }

dd.actnum { position: absolute; top: -5px; left: -15px; width: 40px; height: 40px; border: 1px solid #900; background: white; }

dd.actnum span { display: block; margin: 5px; text-align: center; font-size: 20px; line-height: 30px; width: 30px; height: 30px; background: #7c9aae; color: white; }

dd.actsub h2 { font-size: 16px; text-align: center; /* margin-bottom: 15px; */ text-transform: uppercase; }

dd.actsub u { text-decoration: none; }

dd.actdes { margin: 15px 5px; padding: 5px; overflow: auto; background: rgba(255, 255, 255, 0.75); }

dd.actdes .acgdl { display: block; font-size: 1px; float: right; width: 32px; /*  height: 32px; */ margin-left: 5px; cursor: help; }

dd.actdes .acgdl img { width: 32px; }

dd.actdes .acgdl img:nth-child(n+2) { margin-top: 6px; }

dd.actskl { height: 32px; text-align: center; position: absolute; bottom: 10px; left: 0; width: 100%; cursor: help; }

dd.actskl img { display: inline-block; margin: 0 3px; width: 32px; }

/* --- sample activity tweaks --- */
#actlist li.whatis { position: relative; }

#actlist li.whatis dl { cursor: help; background: rgba(124, 154, 174, 0.35); }

#actlist li.whatis dl dd.sampleimg { position: absolute; top: -55px; left: 25px; }

dd.actsub p + p { display: none; }

dd.actdes u { display: none; }

#actlistbyskill dd.actnum { display: none; }

#actlistbyskill p.actptight { margin: -20px 0 40px 0; font-size: 20px; }

/* --- pagination styles --- */
/* also being used for cycle paging links in activity detail */
.pages { text-align: center; padding: 5px; margin: 50px 45px 50px 20px; }

/* slight extra margin-right for alignment difference between "Previous" & "Next" */
#newdetail .pages { margin: 0 0 50px 0; }

.pages * { background: rgba(124, 154, 174, 0.15); padding: 0 10px; margin: 0 2px; }

.pages a { color: #537991; }

#actlist .pages a:hover { background: #900; color: white; }

.pages .active { background: #537991; color: white; font-weight: bold; }

#actlist .pages .active:hover { background: #537991; color: white; cursor: default; }

/* --- activities detail OLD --- */
/* --- --------------------- --- */
#actDetail h1 { font-size: 24px; }

#actDetail h1 u { font-size: 42px; text-decoration: none; }

#video { float: right; }

.instructions, .materials { margin: 30px 0; font-size: 18px; }

.instructions h3 { margin: 5px 0; font-size: 34px; line-height: 42px; color: #2f5974; }

.materials h3 { margin: 5px 0; font-size: 26px; color: #900; }

.instructions li { list-style: decimal outside; margin: 0.45em 0 0 1.5em; }

.materials li { list-style: circle outside; margin: 0.45em 0 0 1.5em; }

.instructions ul ~ ul li { list-style: circle outside; }

.instructions p strong u, .instructions p u strong { font-size: 22px; line-height: .95; margin: 1em 0 0.5em 0; color: #537991; font-weight: normal; text-decoration: none; }

#shareme { margin-top: 30px; padding: 0; text-align: center; float: right; font-size: 11px; }

#shareme p { margin-bottom: .25em; }

#shareme li { width: 30px; margin: 5px; display: inline-block; }

#shareme li img { width: 100%; }

.mods { display: table; }

.modscol { display: table-cell; width: 47%; vertical-align: top; }

.modscol h4, .modscol p { margin: 5px; padding-right: 30px; font-size: 16px; }

.modscol h4 { color: #900; font-size: 22px; }

.modscol + .modscol { width: 53%; padding-left: 20px; border-left: 1px solid rgba(204, 0, 0, 0.25); }

/* --- detail sidebar --- */
/* create border rules instead of in each item since they break when we move them */
.colset { padding: 20px 0; border: 1px dotted #7c9aae; border-width: 0 0 1px 0; }

.toptoo { border-top: 1px; }

.colset:first-of-type { padding-top: 0; }

#actDetail #sidebar h2 { margin: 0; }

#actlinks { overflow: auto; padding: 0 20px; text-align: center; margin-bottom: 20px; }

#actthis { display: block; float: left; background: #900; font-size: 26px; color: #fff; text-decoration: none; line-height: 45px; width: 70%; margin: 0 13px; }

#actprev { display: block; float: left; width: 25px; line-height: 45px; height: 45px; text-indent: -1000px; background: url(/assets_jb/img/bg-month-next-prev.png) no-repeat left bottom; }

#actnext { display: block; float: left; width: 25px; line-height: 45px; height: 45px; text-indent: -1000px; background: url(/assets_jb/img/bg-month-next-prev.png) no-repeat right bottom; }

#actprev:hover, #actnext:hover { background-position-y: top; }

#molinks { overflow: auto; padding: 0 20px; text-align: center; }

#mothis { display: block; float: left; background: #7c9aae; font-size: 26px; color: #fff; text-decoration: none; line-height: 45px; width: 70%; margin: 0 13px; }

#moprev { display: block; float: left; width: 25px; line-height: 45px; height: 45px; text-indent: -1000px; background: url(/assets_jb/img/bg-month-next-prev.png) no-repeat left top; }

#monext { display: block; float: left; width: 25px; line-height: 45px; height: 45px; text-indent: -1000px; background: url(/assets_jb/img/bg-month-next-prev.png) no-repeat right top; }

#moprev:hover, #monext:hover { background-position-y: bottom; }

h2#h2focus { padding: 10px 30px 20px 30px; margin: 0; text-align: center; font-size: 22px; line-height: 38px; border-bottom: 1px solid #7c9aae; }

h2#h2focus em { display: block; font-style: normal; border-top: 1px solid rgba(124, 154, 174, 0.25); }

#skillsul { padding: 20px 30px; text-align: center; border-bottom: 1px solid #7c9aae; }

#skillsul li { width: 60px; height: 60px; margin: 5px; display: inline-block; }

#skillsul img { width: 100%; cursor: help; }

#done { margin: 20px 40px; /*  margin-top: 0; */ font-size: 22px; line-height: 38px; border: 1px solid rgba(124, 154, 174, 0.5); }

#done a { display: block; padding-left: 50px; background: url(/assets_jb/img/icon-complete-no.png) no-repeat 20px center; color: #7c9aae; text-decoration: none; }

#done a:hover { color: #900; background-image: url(/assets_jb/img/icon-complete-doit.png); }

#done.yay { color: #900; padding-left: 50px; background: url(/assets_jb/img/icon-complete-yes.png) no-repeat 20px center; color: #7c9aae; }

#done:hover { border-color: #900; }

#done.yay:hover { border-color: #7c9aae; }

#done a span.donen { display: inline; }

#done a span.doney { display: none; }

#done:hover a span.donen { display: none; }

#done:hover a span.doney { display: inline; }

.rating { padding: 0 40px; padding-bottom: 20px; text-align: center; /* border-bottom: 1px solid $logo1web; */ }

.rating div { height: 25px; line-height: 25px; padding: 5px; background: rgba(124, 154, 174, 0.25); }

.rating ul { height: 25px; line-height: 25px; padding: 5px; background: rgba(124, 154, 174, 0.25); }

.rating li { height: 25px; line-height: 25px; margin: 0 5px; display: inline-block; }

#printact { padding: 20px 40px; text-align: center; border-bottom: 1px solid #7c9aae; }

#printact a { height: 25px; line-height: 25px; padding: 5px; background: rgba(153, 0, 0, 0.75); color: white; display: block; }

/* --- ACTIVITY DETAIL - NEW / 1COL --- */
/* --- ---------------------------- --- */
#newdetail .tfloats { width: 870px; }

#newdetail .col-main, #newdetail .col-main-fl, #newdetail .col-main-fr { width: 590px; }

#newdetail .col-r, #newdetail .col-l { width: 280px; }

/* no border slim col version */
#newdetail .col-main { background: rgba(124, 154, 174, 0.1); padding: 20px; }

#actDetail #newdetail h1 { text-align: center; }

#actDetail #newdetail h1 p { text-align: center; font-size: 24px; }

#actDetail #newdetail h1 u { text-align: center; font-size: 42px; text-decoration: none; }

#newdetail #anchornav { margin: 170px 0 50px 0; }

#newdetail #anchornav + h1 { margin-top: 30px; }

#newdetail #anchornav { position: relative; height: 166px; }

#newdetail #anchornav div.cell { background: rgba(255, 255, 255, 0.85); position: absolute; width: 263px; color: #7c9aae; display: block; text-align: center; }

#newdetail #anchornav div.cell:hover { background: rgba(255, 255, 255, 0.55); }

#newdetail #anchornav div.cell a { /* color: $logo1web; */ display: block; /*  font-size: 26px; line-height: 30px; text-decoration: none; */ }

#newdetail #anchornav #acttopL { position: absolute; top: 10px; left: 10px; height: 82px; }

#newdetail #anchornav #actbotL { position: absolute; bottom: 10px; left: 10px; height: 82px; }

#newdetail #anchornav #acttopM { position: absolute; top: 10px; left: 275px; height: 82px; width: 320px; }

#newdetail #anchornav #actbotM { position: absolute; bottom: 10px; left: 275px; height: 82px; width: 320px; }

#newdetail #anchornav #acttopR { position: absolute; top: 10px; left: 597px; height: 82px; }

#newdetail #anchornav #actbotR { position: absolute; bottom: 10px; left: 597px; height: 82px; }

#newdetail #skillsul { text-align: center; border-bottom: none; padding: 0; }

#newdetail #skillsul li { width: 44px; height: 44px; margin: 19px 5px; }

#newdetail #skillsul img { width: 44px; }

/* --- SKILLSUL ITEMS --- */
#newdetail #done { margin: 26px 28px; line-height: 35px; }

#newdetail #done { margin: 20px 40px; /*  margin-top: 0; */ font-size: 22px; line-height: 38px; border: 1px solid rgba(124, 154, 174, 0.5); }

#newdetail #done a { display: block; padding-left: 50px; background: url(/assets_jb/img/icon-complete-no.png) no-repeat 20px center; color: #7c9aae; text-decoration: none; }

#newdetail #done a:hover { color: #900; background-image: url(/assets_jb/img/icon-complete-doit.png); }

#newdetail #done.yay { color: #900; padding-left: 50px; background: url(/assets_jb/img/icon-complete-yes.png) no-repeat 20px center; color: #7c9aae; }

#newdetail #done:hover { border-color: #900; }

#newdetail #done.yay:hover { border-color: #7c9aae; }

#newdetail #done a span.donen { display: inline; }

#newdetail #done a span.doney { display: none; }

#newdetail #done:hover a span.donen { display: none; }

#newdetail #done:hover a span.doney { display: inline; }

#newdetail .rating { margin: 16px 10px; padding: 0; text-align: center; /* border-bottom: 1px solid $logo1web; */ }

#newdetail .rating div { height: 25px; line-height: 25px; padding: 5px; background: rgba(124, 154, 174, 0.25); }

#newdetail .rating ul { height: 25px; line-height: 25px; padding: 5px; background: rgba(124, 154, 174, 0.25); height: 25px; margin: 25px 40px 20px 40px; }

#newdetail .rating li { height: 25px; line-height: 25px; margin: 0 5px; display: inline-block; }

#newdetail .rating .no-rating { height: 40px; line-height: 40px; margin: 20px 20px 0 20px; padding: 0; }

#newdetail .rating-wrap label { display: block; color: #900; font-size: 22px; }

#newdetail #actlinks { overflow: auto; padding: 0; text-align: center; margin: 20px 20px; }

#newdetail #actthis { display: block; float: left; background: #7c9aae; font-size: 26px; color: #fff; text-decoration: none; line-height: 45px; width: 68%; margin: 0 10px; }

#newdetail #actprev { display: block; float: left; width: 25px; line-height: 45px; height: 45px; text-indent: -1000px; background: url(/assets_jb/img/bg-month-next-prev.png) no-repeat left top; }

#newdetail #actnext { display: block; float: left; width: 25px; line-height: 45px; height: 45px; text-indent: -1000px; background: url(/assets_jb/img/bg-month-next-prev.png) no-repeat right top; }

#newdetail #actprev:hover, #newdetail #actnext:hover { background-position-y: bottom; }

#newdetail #molinks { overflow: auto; padding: 0; text-align: center; margin: 20px 20px; }

#newdetail #mothis:link { display: block; float: left; background: #7c9aae; font-size: 26px; color: #fff; text-decoration: none; line-height: 45px; width: 68%; margin: 0 10px; }

#newdetail #moprev { display: block; float: left; width: 25px; line-height: 45px; height: 45px; text-indent: -1000px; background: url(/assets_jb/img/bg-month-next-prev.png) no-repeat left top; }

#newdetail #monext { display: block; float: left; width: 25px; line-height: 45px; height: 45px; text-indent: -1000px; background: url(/assets_jb/img/bg-month-next-prev.png) no-repeat right top; }

#newdetail #mothis:hover { background: #900; }

#newdetail #moprev:hover, #newdetail #monext:hover { background-position-y: bottom; }

#newdetail a#actfocus { color: #fff; background: #7c9aae; font-size: 26px; line-height: 45px; margin: 20px; text-decoration: none; }

#newdetail a#actfocus:hover { background: #900; }

#newdetail #hero { margin-bottom: 40px; }

#newdetail .pages { margin-bottom: 0; /* font-size: 42px; line-height: 25px; */ }

#newdetail .pages-dots { margin-bottom: 0; margin-top: 15px; font-size: 62px; line-height: 40px; color: #7c9aae; text-align: center; }

#newdetail .pages-dots > * { cursor: pointer; }

#newdetail .pages-dots span.cycle-pager-active { color: #2f5974; }

#newdetail .goprinter { float: right; margin: 0 0 0 0; }

#newdetail #video { float: right; }

#newdetail .newvideo { float: right; margin: 0 10px 0 0; }

#newdetail .instructions { margin: 0 0 30px 0; font-size: 18px; /* display: none; */ }

#newdetail .instructions h3 { margin: 5px 0; font-size: 34px; line-height: 42px; color: #2f5974; }

#newdetail .instructions li { list-style: decimal outside; margin: 0.45em 0 0 1.25em; }

#newdetail .instructions ul ~ ul li { list-style: circle outside; }

#newdetail .instructions p strong u, #newdetail .instructions p u strong { font-size: 22px; line-height: .95; margin: 1em 0 0.5em 0; color: #537991; font-weight: normal; text-decoration: none; }

#newdetail #instlist { clear: left; }

#newdetail .materials { width: auto; /* min-height: 350px; */ margin: 0 0 20px 20px; padding: 10px 0px 10px 15px; font-size: 18px; background: rgba(153, 0, 0, 0.07); }

#newdetail .materials h3 { margin: 5px 0; font-size: 26px; color: #2f5974; }

#newdetail .materials li { list-style: circle outside; margin: 0.45em 0 0 1.05em; }

#newdetail .actside { margin: 30px 0; font-size: 18px; /* padding-left: 10px; border-left: 1px dotted rgba($logo1web,1.0); */ }

#newdetail .resources { width: auto; margin: 20px 0 30px 20px; padding: 10px 0px 10px 15px; background: rgba(153, 0, 0, 0.04); }

#newdetail .resources h3 { margin: 5px 0; color: #2f5974; }

#newdetail .resources li { list-style: circle outside; margin: 0.45em 0 0 1.05em; }

#newdetail .shareme { width: auto; margin-left: 20px; padding: 0; font-size: 11px; }

#newdetail .shareme h4 { color: #7c9aae; text-align: left; }

#newdetail .shareme p { margin-bottom: .25em; }

#newdetail .shareme li { width: 30px; margin: 0 5px; display: inline-block; }

#newdetail .shareme li img { width: 100%; }

#newdetail .rateme { margin: 30px 0 30px 20px; }

#newdetail .rateme label.h4 { margin-bottom: 0; }

#newdetail .mods { display: table; width: 98%; /* display: none; */ /* outline: 1px dotted blue; */ }

#newdetail .modscol { display: table-cell; width: auto; vertical-align: top; /* outline: 1px dotted purple; */ }

#newdetail .modscol h4, #newdetail .modscol p { margin: 5px; padding-right: 10px; font-size: 16px; }

#newdetail .modscol h4 { color: #900; font-size: 22px; }

#newdetail .modscol + .modscol { width: auto; padding-left: 10px; border-left: 1px solid rgba(204, 0, 0, 0.25); }

#newdetail .mods2 { display: block; width: 98%; padding-top: 10px; border-top: 1px solid rgba(204, 0, 0, 0.25); }

#newdetail .modscol2 { display: block; width: auto; }

#newdetail .modscol2 h4, #newdetail .modscol2 p { margin: 5px; padding-right: 10px; font-size: 16px; }

#newdetail .modscol2 h4 { color: #900; font-size: 22px; }

#newdetail .modscol2 + .modscol2 { width: auto; margin-top: 10px; }

#actDetail #ifoot h1 { border-bottom: none; padding: 30px 0 0 0; }

/* --- MATERIALS LIST - NEW / 3COL --- */
/* --- ---------------------------- --- */
#materialsdiv ul { margin-right: 1em; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> PLAYGROUP ACTIVITIES - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
body#playGroup { overflow: auto; }

/* --- HEADER / INTRO STUFF --- */
#paheader { display: table; margin: 170px 0 60px 0; }

.pahmain { display: table-cell; vertical-align: top; width: 600px; padding-right: 20px; }

.pahlist { display: table-cell; vertical-align: top; width: 230px; padding-left: 20px; border-left: 1px dotted #7c9aae; }

.pahmain h1 { margin: 0 0 5px 0; }

.pablurb { margin-bottom: 5px; }

.pablurb p { font-size: 125%; color: #7c9aae; }

.paintro p { margin: 0 0 0.5em 0; }

.paintropics { display: table; }

.paintropic { display: table-cell; width: 33%; }

.paintropic img { width: 97%; margin: 0 3% 0 0; /* height: 90px; */ }

.pahlist p.h4 { margin-top: .25em; }

.pahlist ul { margin-left: 5px; }

.pahlist li { list-style: circle outside; margin: 0.45em 0 0 1.05em; }

.pahlist p.hashtag { font-size: 80%; color: #7c9aae; border: 1px dotted rgba(124, 154, 174, 0.35); padding: 10px; margin: 10px 62px 0 0; text-align: center; }

.pahlist p.hashtag span { font-size: 90%; color: #900; font-weight: bold; padding: 2px; background: rgba(153, 0, 0, 0.15); }

/* --- LOOPING ACTIVITY SETS --- */
#padetail article { background: rgba(124, 154, 174, 0.12); margin-bottom: 50px; page-break-inside: avoid; }

#padetail h2.h3 { padding: 20px; padding-bottom: 10px; border-bottom: 1px solid rgba(124, 154, 174, 0.5); background: rgba(124, 154, 174, 0.35); }

.pacellset { display: table; width: 100%; }

.pacell { display: table-cell; vertical-align: top; }

.pawide { width: 580px; padding: 20px; }

.pathin { width: 210px; padding: 20px 20px 20px 0; }

#padetail #hero { margin-bottom: 20px; }

#padetail .pages { margin-bottom: 0; /* font-size: 42px; line-height: 25px; */ }

#padetail .pages-dots { margin-bottom: 0; margin-top: 15px; font-size: 62px; line-height: 40px; color: #7c9aae; text-align: center; }

#padetail .pages-dots > * { cursor: pointer; }

#padetail .pages-dots span.cycle-pager-active { color: #2f5974; }

.pawide .instructions p { margin: 1em 0; }

.pawide .mods2 { display: block; width: 98%; padding-top: 10px; border-top: 1px solid rgba(204, 0, 0, 0.25); }

.pawide .modscol2 { display: block; width: auto; }

.pawide .modscol2 h4, .pawide .modscol2 p { margin: 5px; padding-right: 10px; font-size: 16px; }

.pawide .modscol2 h4 { color: #900; font-size: 22px; }

.pawide .modscol2 + .modscol2 { width: auto; margin-top: 10px; }

#padetail .materials { background: rgba(124, 154, 174, 0.15); padding: 5px 10px; margin-top: 0; }

/* --- MINI SHARE ICONS SET --- */
.minishare { width: 160px; padding: 0; text-align: center; font-size: 11px; }

.minishare h4 { font-size: 16px; }

.minishare p { margin-bottom: .25em; }

.minishare ul { display: table; }

.minishare li { display: table-cell; width: 30px; padding: 5px; }

.minishare li img { width: 100%; }

.minishare.playgroupcloser { width: auto; padding: 5px; background: rgba(124, 154, 174, 0.1); }

.minishare.playgroupcloser ul { margin: 0 auto; }

/* --- SEARCH --- */
#searchresults #cont article { border: 1px solid rgba(124, 154, 174, 0.5); padding: 20px; margin-top: 30px; overflow: auto; }

#searchresults #cont article h2 { font-size: 22px; line-height: 1.15; margin-top: 0; }

#searchresults #cont article img { float: left; margin-bottom: 10px; }

#searchresults #cont article a.keep { display: inline-block; background-color: rgba(153, 0, 0, 0.1); padding: 0 5px; }

#searchresults h1 span { font-size: 65%; color: rgba(124, 154, 174, 0.5); }

#bloglist h1 span { font-size: 65%; color: rgba(124, 154, 174, 0.5); }

#actlist h1 span { font-size: 65%; color: rgba(124, 154, 174, 0.5); }

#faqlist h1 span { font-size: 65%; color: rgba(124, 154, 174, 0.5); }

#searchresults h1 ~ h1 { margin-top: 60px; }

#searchresults #actlist { margin: 60px 30px 30px 30px; }

#searchresults #actlist li { width: 50%; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> SIDEBAR - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#sidebar { font-size: 14px; background: rgba(228, 234, 238, 0.75); /* background: #f8f9fa; */ }

/* changed to solid to hide the bg images behind... */
#sidebar h2 { font-size: 22px; line-height: 1.2; margin: 0.65em 0 0.35em 0; color: #900; }

#sidebar h3 { font-size: 16px; line-height: 1.2; margin: 0.65em 0 0.35em 0; }

#sidebar h4 { font-size: 14px; line-height: 1.2; margin: 0.65em 0 0.35em 0; }

#sidebar h5 { font-size: 14px; line-height: 1.2; margin: 0.65em 0 0.35em 0; }

#sidebar h6 { font-size: 14px; line-height: 1.2; margin: 0.65em 0 0.35em 0; }

#sideblog { margin: 20px; }

#sideblog h2 { margin: 10px 0; }

#sideblog a { display: block; margin-bottom: 10px; text-decoration: none; }

#sideblog a:hover { text-decoration: underline; }

#sideblog a h3 { color: #537991; }

#sideblog a p { color: rgba(0, 0, 0, 0.75); }

#sideblog a:hover h3, #sideblog a:hover p { color: #c00; }

#sideblogarch { margin: 20px; }

#sideblogarch dt { font-size: 20px; margin: 10px 0 3px 0; color: #7c9aae; padding: 0 3px; background: rgba(124, 154, 174, 0.15); }

#sideblogarch dd { font-size: 14px; margin: 0 0 3px 20px; }

#sideblogarch + #sideblog { margin-top: 50px; }

#sideblogsearch { margin: 20px 20px 40px 20px; }

#sideblogsearch form { position: relative; display: block; padding: 5px; height: 26px; background: rgba(124, 154, 174, 0.3); }

#bgoquery { position: absolute; top: 5px; padding: 0 10px; width: 195px; height: 26px; line-height: 26px; font-size: 14px; color: #900; background: #fff; border: 0; }

#bgosearch { position: absolute; top: 5px; right: 5px; padding: 5px 5px 4px 5px; background: #7c9aae; }

#sidenews { margin: 20px; }

#sidenews h2 { margin: 10px 0; }

#sidenews a { display: block; margin-bottom: 10px; text-decoration: none; }

#sidenews a:hover { text-decoration: underline; }

#sidenews a h3 { color: #537991; }

#sidenews a p { color: rgba(0, 0, 0, 0.75); }

#sidenews a:hover h3, #sidenews a:hover p { color: #c00; }

#sideevent { margin: 20px; }

#sideevent h2 { margin: 10px 0; }

#sideevent a { display: block; margin-bottom: 10px; text-decoration: none; }

#sideevent a:hover { text-decoration: underline; }

#sideevent a h3 { color: #537991; }

#sideevent a p { color: rgba(0, 0, 0, 0.75); }

#sideevent a:hover h3, #sideevent a:hover p { color: #c00; }

#sideevent p.when { /* font-weight: bold; */ color: #537991; }

#podcast { padding: 20px 0 20px 20px; /* margin-bottom: 5px; */ border: 1px solid rgba(124, 154, 174, 0.5); border-width: 1px 0; background: rgba(124, 154, 174, 0.15); }

#podcast a { display: block; padding-left: 40px; height: 40px; line-height: 40px; font-size: 20px; text-decoration: none; color: #7c9aae; background: url(/assets_jb/img/icon-productive-play-36px.png) no-repeat left center; }

#podcast a:hover { text-decoration: underline; color: #c00; }

#podcast p { margin: 0 20px 0 40px; }

#sideactsearch { margin: 20px 20px 40px 20px; }

#sideactsearch form { position: relative; display: block; padding: 5px; height: 26px; background: rgba(124, 154, 174, 0.3); }

#agoquery { position: absolute; top: 5px; padding: 0 10px; width: 195px; height: 26px; line-height: 26px; font-size: 14px; color: #900; background: #fff; border: 0; }

#agosearch { position: absolute; top: 5px; right: 5px; padding: 5px 5px 4px 5px; background: #7c9aae; }

#sidefaqsearch { margin: 20px 20px 40px 20px; }

#sidefaqsearch form { position: relative; display: block; padding: 5px; height: 26px; background: rgba(124, 154, 174, 0.3); }

#qgoquery { position: absolute; top: 5px; padding: 0 10px; width: 195px; height: 26px; line-height: 26px; font-size: 14px; color: #900; background: #fff; border: 0; }

#qgosearch { position: absolute; top: 5px; right: 5px; padding: 5px 5px 4px 5px; background: #7c9aae; }

#subnav { border: 1px solid rgba(124, 154, 174, 0.5); border-width: 1px 0; margin-bottom: 30px; padding: 10px 0; background: rgba(124, 154, 174, 0.1); }

#subnav li { margin: 0 20px; border-bottom: 1px solid rgba(124, 154, 174, 0.25); }

#subnav li:last-child { border: none; }

#subnav li a { display: block; padding: 10px 0; font-size: 18px; }

#sidecontact { padding: 40px 20px; border-bottom: 1px solid rgba(124, 154, 174, 0.5); }

#sidecontact p { margin-bottom: 5px; }

#sidecontact dt { margin-top: 15px; }

#sidecontact dd { margin: 5px 0 0 10px; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> HEADER BGs - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#monthlistbyvolume #mains, #about #mains, #eventslist #mains, #eventsitem #mains, #founders #mains, #board #mains, #kready #mains, #contact #mains, #newslist #mains, #newsarticle #mains, #searchresults #mains { background: url(/assets_jb/img/bg-headers-about-orig.png) no-repeat center top; }

#bloglist #mains, #blogarticle #mains { background: url(/assets_jb/img/bg-headers-blog-orig.png) no-repeat center top; }

#faqs #mains { background: url(/assets_jb/img/bg-headers-faq-orig.png) no-repeat center top; }

#hireus #mains, #actlistbyskill #mains, #actDetail #mains, #playGroup #mains, #actlistbymonth #mains { background: url(/assets_jb/img/bg-headers-activities-orig.png) no-repeat center top; }

#monthlistbyvolume #upper { padding-top: 120px; }

#sidebar { padding-top: 170px; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> HOMEPAGE - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* ---  slideshow  --- */
.slidestack { height: 350px; width: 990px; position: relative; }

.slidestack p.stackh2 { position: absolute; font-size: 32px; line-height: 32px; padding: 10px; }

.slidestack p.stackp { position: absolute; font-size: 18px; line-height: 26px; padding: 10px; }

.bgwhite30 { background: rgba(255, 255, 255, 0.3); }

.bgwhite40 { background: rgba(255, 255, 255, 0.4); }

.bgwhite50 { background: rgba(255, 255, 255, 0.5); }

.bgwhite60 { background: rgba(255, 255, 255, 0.6); }

.bgwhite70 { background: rgba(255, 255, 255, 0.7); }

.bgwhite80 { background: rgba(255, 255, 255, 0.8); }

.bgwhite90 { background: rgba(255, 255, 255, 0.9); }

.bgblue30 { background: rgba(124, 154, 174, 0.3); }

.bgblue40 { background: rgba(124, 154, 174, 0.4); }

.bgblue50 { background: rgba(124, 154, 174, 0.5); }

.bgblue60 { background: rgba(124, 154, 174, 0.6); }

.bgblue70 { background: rgba(124, 154, 174, 0.7); }

.bgblue80 { background: rgba(124, 154, 174, 0.8); }

.bgblue90 { background: rgba(124, 154, 174, 0.9); }

.bgred30 { background: rgba(153, 0, 0, 0.3); }

.bgred40 { background: rgba(153, 0, 0, 0.4); }

.bgred50 { background: rgba(153, 0, 0, 0.5); }

.bgred60 { background: rgba(153, 0, 0, 0.6); }

.bgred70 { background: rgba(153, 0, 0, 0.7); }

.bgred80 { background: rgba(153, 0, 0, 0.8); }

.bgred90 { background: rgba(153, 0, 0, 0.9); }

.txtwhite { color: white; }

.txtblue { color: #537991; }

.txtbluedark { color: #2f5974; }

.txtred { color: #900; }

/* ---  regular stuff  --- */
#home h1 { text-align: center; margin: 0; color: #7c9aae; font-size: 46px; line-height: 50px; }

#howto { height: 370px; margin: 20px 0; padding: 0 30px; /* overflow: auto; */ }

#howtos { height: 320px; width: 100%; float: left; /* outline: 1px dotted #ddd; */ }

#howtos li { /* margin: 10px 5px; */ display: block; float: left; /* outline: 1px dotted #666; */ }

.cards { height: 310px; cursor: help; }

.front { width: 209px; text-align: center; }

.front p { font-size: 15px; padding: 0 20px; text-align: center; color: #7c9aae; }

.front p em { font-size: 17px; display: block; color: #900; }

.front img { width: 95%; margin: 0 auto; }

.back { width: 200px; }

.back p { padding: 30px 10px; text-align: center; color: #900; font-size: 16px; }

.card1 .back { background: url(/assets_jb/img/how-to-overs-1.gif) no-repeat center top; background-size: 90%; }

.card2 .back { background: url(/assets_jb/img/how-to-overs-2.gif) no-repeat center top; background-size: 90%; }

.card3 .back { background: url(/assets_jb/img/how-to-overs-3.gif) no-repeat center top; background-size: 90%; }

#homebody { overflow: auto; }

#tabintro { display: block; margin: 20px 0; background: rgba(124, 154, 174, 0.1); border: 1px solid rgba(124, 154, 174, 0.25); border-width: 1px 0; padding: 10px 25px; font-size: 20px; text-align: center; text-decoration: none; }

#tabintro { display: none; }

#hometabs { margin: 30px; margin-top: 60px; }

#hometabs h3 { font-size: 16px; line-height: 22px; }

.tabWidget { overflow: hidden; }

.tabWidget .tabPanel { display: block; }

.tabWidget .tab { clear: both; float: left; text-align: center; width: 120px; margin: 0 0 0 15px; padding: 10px; cursor: pointer; }

.tabWidget .panel { clear: right; display: block; float: right; margin-left: -100%; width: 100%; margin-top: 64px; }

.tabWidget .panel-inner { padding: 30px; border: 3px solid #990000; border-width: 3px 0 0 0; }

.jb .tabWidget .panel-inner { padding: 30px; /* background: rgba(white,.1); */ background: #444 url(/assets_jb/img/bg-chalk-blk-793w.jpg) no-repeat 50% 50%; border: 1px solid #990000; border-width: 1px 0 0 0; }

.jb16 .tabWidget .panel-inner { padding: 30px; /* background: rgba(white,.1); */ background: #444 url(/assets_jb/img/bg-chalk-blk-793w.jpg) no-repeat 50% 50%; border: 1px solid #990000; border-width: 1px 0 0 0; }

.tabWidget .tab { background-color: rgba(153, 0, 0, 0.2); color: #333; }

.jb16 .tabWidget .tab { background-color: #537991; color: #fff; }

.tabWidget .tab:hover { background-color: rgba(153, 0, 0, 0.35); color: #333; }

.jb16 .tabWidget .tab:hover { background-color: #2f5974; color: #fff; }

.jb16 .tabWidget .tab1 .tab:hover, .jb16 .tabWidget .tab2 .tab:hover, .jb16 .tabWidget .tab3 .tab:hover { background-color: rgba(83, 121, 145, 0.9); }

.jb16 .tabWidget .tab4 .tab:hover { background-color: rgba(153, 0, 0, 0.6); }

.tabWidget .tab1 .tab { background-color: #316730; color: #fff; }

.tabWidget .tab1.selected .tab { background-color: #316730; color: #fff; }

.tabWidget .tab1.selected .panel-inner { border-color: #316730; border-width: 3px 0 0 0; }

.jb16 .tabWidget .tab1 .tab { background-color: #537991; color: #fff; }

.jb16 .tabWidget .tab1.selected .tab { background-color: #2f5974; color: #fff; }

.jb16 .tabWidget .tab1.selected .panel-inner { border-color: #2f5974; border-width: 3px 0 0 0; }

.tabWidget .tab2 .tab { background-color: #e17239; color: #fff; }

.tabWidget .tab2.selected .tab { background-color: #e17239; color: #fff; }

.tabWidget .tab2.selected .panel-inner { border-color: #e17239; border-width: 3px 0 0 0; }

.jb16 .tabWidget .tab2 .tab { background-color: #537991; color: #fff; }

.jb16 .tabWidget .tab2.selected .tab { background-color: #2f5974; color: #fff; }

.jb16 .tabWidget .tab2.selected .panel-inner { border-color: #2f5974; border-width: 3px 0 0 0; }

.tabWidget .tab3 .tab { background-color: #813c7f; color: #fff; }

.tabWidget .tab3.selected .tab { background-color: #813c7f; color: #fff; }

.tabWidget .tab3.selected .panel-inner { border-color: #813c7f; border-width: 3px 0 0 0; }

.jb16 .tabWidget .tab3 .tab { background-color: #537991; color: #fff; }

.jb16 .tabWidget .tab3.selected .tab { background-color: #2f5974; color: #fff; }

.jb16 .tabWidget .tab3.selected .panel-inner { border-color: #2f5974; border-width: 3px 0 0 0; }

.tabWidget .tab4 .tab { background-color: #c73536; color: #fff; }

.tabWidget .tab4.selected .tab { background-color: #c73536; color: #fff; }

.tabWidget .tab4.selected .panel-inner { border-color: #c73536; border-width: 3px 0 0 0; }

.jb16 .tabWidget .tab4 .tab { background-color: rgba(153, 0, 0, 0.7); color: #fff; }

.jb16 .tabWidget .tab4.selected .tab { background-color: #990000; color: #fff; }

.jb16 .tabWidget .tab4.selected .panel-inner { border-color: #990000; border-width: 3px 0 0 0; }

.js .tabWidget .tab { clear: none; }

.js .tabWidget .panel { display: none; clear: none; }

.js .tabWidget .selected .panel { display: block; }

.tabcont { position: relative; }

#byskill ul { overflow: auto; }

#byskill li { margin-bottom: 30px; float: left; width: 33.3%; text-align: center; }

#byskill a { text-decoration: none; color: #fff; }

#byskill a:hover { text-decoration: none; color: #c00; }

#byskill span { display: block; font-size: 16px; background: #7c9aae; margin: 0 10px; height: 30px; line-height: 30px; }

.jb #byskill span { background: #316730; }

.jb16 #byskill span { background: #316730; }

#byskill a:hover span { background-color: #2f5974; color: white; }

.jb #byskill a:hover span { background: #0861a9; }

.jb16 #byskill a:hover span { background: #2f5974; }

#byskill a img { height: 108px; margin-bottom: 16px; }

#byactiv ul { overflow: auto; }

#byactiv li { text-align: center; }

#ulfeat li { margin-bottom: 30px; float: left; width: 33.3%; }

#ulfeat a { text-decoration: none; color: #fff; }

#ulfeat a:hover { text-decoration: underline; color: #c00; }

#ulfeat span { display: block; font-size: 16px; background: #7c9aae; margin: 0 5px; height: 30px; line-height: 30px; }

#ulfeat a:hover span { background: #333; }

#ulall { font-size: 0; text-align: center; position: relative; margin-top: 60px; padding-top: 60px; /*  height: 336px; */ border: 1px solid #7c9aae; border-width: 1px 0 0 0; }

.jb #ulall { border-color: #316730; }

.jb16 #ulall { border-color: #316730; }

#ulall li { font-size: 15px; width: 23%; margin: 10px 1%; display: inline-block; }

#ulall li a { color: white; text-decoration: none; display: block; height: 30px; line-height: 30px; background: #7c9aae; }

.jb #ulall li a { background: #E17239; }

.jb16 #ulall li a { background: #316730; }

#ulall li a:hover { color: white; text-decoration: none; background: #2f5974; }

.jb #ulall li a:hover { background: #0861a9; }

.jb16 #ulall li a:hover { background: #2f5974; }

#ulall li.whox, #ulall li.otga { width: 30%; }

#ulall li#liicon { position: absolute; width: 33.3%; left: 33.3%; margin: 0; top: -72px; height: 120px; background: none; }

#ulall li#liicon img { width: 120px; }

#byactiv ul#ulall { overflow: visible; }

#bycurri h3 { margin: 20px 0 10px 0; font-size: 18px; color: white; }

#bycurri .pdesc p { color: white; }

#bycurri ul { overflow: auto; }

#bycurri li { margin-bottom: 30px; float: left; width: 33.3%; text-align: center; }

#curract div { margin: 10px; padding: 10px; height: 200px; background: rgba(124, 154, 174, 0.5); }

#curract a { display: block; text-decoration: none; }

#curract a p { text-decoration: underline; font-size: 16px; }

#curract a h4 { position: relative; height: 26px; line-height: 26px; font-size: 18px; color: #333; margin-bottom: 5px; }

#curract a h4 span { position: absolute; height: 26px; width: 26px; background: #fff; color: #900; border: 1px solid #7c9aae; top: -20px; left: -20px; }

a#gocurri { text-decoration: none; display: block; text-align: center; margin: 0 105px; font-size: 18px; height: 36px; line-height: 36px; background: rgba(124, 154, 174, 0.25); }

a#gocurri:hover { text-decoration: none; background: rgba(124, 154, 174, 0.85); color: white; }

/* --- curriculum adijustments to :: activities and month gridded lists --- */
#bycurri #actlist { margin-top: 0px; }

.jb16 #bycurri #actlist { margin-top: 0px; padding-bottom: 20px; background: #ebeff2; }

.jb16 #bycurri #actlist ul { padding-top: 10px; margin-top: 50px; }

.jb16 #bycurri #actlist ul li { margin-bottom: 10px; }

#bycurri #actlist p { font-size: 13px; }

#bycurri #actlist dl { margin: 11px; padding: 10px 10px 50px 10px; height: 170px; /* position: relative; background: rgba($logo1web,.15); */ }

.jb #bycurri #actlist dl { background: #813c7f; margin: 11px; padding: 10px 10px 50px 10px; height: 170px; /*background: $logo1web;  */ }

.jb #bycurri #actlist dl:hover { background: #0861a9; /* background: rgba($logo1web,.75); */ }

.jb16 #bycurri #actlist dl { background: #7c9aae; margin: 11px; padding: 10px 10px 50px 10px; height: 170px; }

.jb16 #bycurri #actlist dl:hover { background: #537991; }

#bycurri #actlist dt { padding: 0 11px 5px 11px; margin-bottom: 5px; /* text-align: center; */ font-size: 16px; /* border-bottom: 1px dotted $logo1webdk; */ }

.jb16 #bycurri #actlist dl:hover dt { border-bottom: 1px dotted #7c9aae; }

.jb #bycurri #actlist dt { color: white; height: 1.45em; overflow: hidden; }

.jb16 #bycurri #actlist dt { color: white; height: 1.45em; overflow: hidden; }

#bycurri dd.actcom { /* float: right; */ display: none; }

#bycurri dd.actnum { /* position: absolute; */ top: -5px; left: -10px; width: 30px; height: 30px; /* border: 1px solid $logo2web; background: white; */ }

#bycurri dd.actnum span { /* display: block; */ margin: 5px; /* text-align: center; */ font-size: 12px; line-height: 20px; width: 20px; height: 20px; /* background: $logo1web; color: white; */ }

.jb #bycurri dd.actnum span { background: #900; overflow: hidden; }

.jb16 #bycurri dd.actnum span { background: #900; overflow: hidden; }

#bycurri dd.actsub h2 { font-size: 16px; /* margin-top: .5em; text-align: center; margin-bottom: 15px; text-transform: uppercase; */ }

.jb #bycurri dd.actsub h2 { color: white; height: .95em; overflow: hidden; line-height: 1.0em; }

.jb16 #bycurri dd.actsub h2 { color: white; height: .95em; overflow: hidden; line-height: 1.0em; }

#bycurri dd.actdes { margin: 10px 5px; /* padding: 5px; overflow: auto; background: rgba(white,.75); */ }

.jb #bycurri dd.actdes { max-height: 5.5em; }

.jb16 #bycurri dd.actdes { max-height: 5.5em; }

#bycurri dd.actdes .acgdl { width: 22px; /* display: block; font-size: 1px; float: right; */ /*  height: 32px; */ margin-left: 3px; }

#bycurri dd.actdes .acgdl img { width: 22px; }

#bycurri dd.actdes .acgdl img:nth-child(n+2) { margin-top: 2px; }

#bycurri dd.actskl { height: 24px; /* text-align: center; position: absolute; bottom: 10px; left: 0; width: 100%; */ }

#bycurri dd.actskl img { /* display: inline-block; */ margin: 0 1px; width: 22px; }

.jb #bycurri #gocurri { background: #813c7f; /* background: rgba($logo1web,1.0); */ color: white; }

.jb #bycurri #gocurri:hover { background: #0861a9; /* background: rgba($logo1webdk2,1.0); */ }

.jb16 #bycurri #gocurri { background: #7c9aae; color: white; }

.jb16 #bycurri #gocurri:hover { background: #537991; }

#bywhox h3 { margin-bottom: 10px; font-size: 18px; }

.jb #bywhox h3 { margin-bottom: 10px; font-size: 18px; color: white; }

.jb16 #bywhox h3 { margin: 20px 0 10px 0; font-size: 18px; color: white; }

#bywhox p { margin-bottom: 10px; font-size: 16px; }

.jb #bywhox p { margin-bottom: 10px; font-size: 16px; color: white; }

.jb16 #bywhox p { margin-bottom: 10px; font-size: 14px; color: white; }

#bywhox ul { overflow: auto; margin-top: 50px; }

#bywhox li { margin-bottom: 10px; float: left; width: 33.3%; text-align: center; }

#whoxact { padding-top: 10px; }

.jb16 #whoxact { padding: 10px 5px 0 5px; background: #ebeff2; }

#whoxact div { margin: 10px; padding: 10px; height: 160px; background: rgba(124, 154, 174, 0.5); }

.jb #whoxact div { background: #c73536; margin: 10px; padding: 10px; height: 120px; }

.jb16 #whoxact div { background: rgba(153, 0, 0, 0.5); }

.jb #whoxact div:hover { background: #0861a9; }

.jb16 #whoxact div:hover { background: rgba(153, 0, 0, 0.75); }

#whoxact a { display: block; text-decoration: none; }

#whoxact a span.introwx { height: 7.75em; display: block; overflow: hidden; }

/* height = 4 rows of ANYpx/1.45em font ??? does not compute? */
#whoxact a p { text-decoration: none; }

#whoxact a h4 { position: relative; height: 26px; line-height: 26px; font-size: 18px; color: #333; margin-bottom: 5px; margin-top: .5em; }

.jb #whoxact a h4 { margin-bottom: 0; margin-top: 0; color: #fff; border-bottom: 1px solid rgba(153, 0, 0, 0.5); padding-bottom: 3px; margin-bottom: 5px; }

#whoxact a h4 span { position: absolute; height: 26px; width: 26px; line-height: 30px; background: #fff; color: #900; border: 1px solid #7c9aae; top: -32px; left: -22px; }

.jb #whoxact a h4 span { position: absolute; height: 26px; width: 26px; top: -23px; left: -22px; }

.jb #whoxact a h4 span img { width: 100%; }

.jb16 #whoxact a h4 span { border-color: #2f5974; }

#pubs { margin: 20px; padding-bottom: 10px; /* border-bottom: 1px solid rgba($logo1web,.5); */ }

#pubs h3 { display: block; font-size: 16px; margin-bottom: 5px; color: #7c9aae; text-align: center; }

#pubs ul { display: table; }

#pubs li { display: table-cell; width: 33%; vertical-align: middle; }

#pubs a { display: block; text-align: center; }

#pubs a img { width: 70%; padding: 10px; border: 1px solid rgba(124, 154, 174, 0.18); background: white; }

#pubs a:hover img { border-color: rgba(153, 0, 0, 0.65); }

#home #sidebar { padding-top: 0; }

#signin { margin: 0; padding: 10px 20px 20px 20px; border-bottom: 1px solid rgba(153, 0, 0, 0.25); }

#signin a img { width: 100%; }

#signin input { display: block; margin-bottom: 3px; }

#signin #username, #signin #password { border: 1px solid #7c9aae; padding: 2px; line-height: 22px; width: 98%; }

#homekinder { display: block; margin-bottom: 20px; background: rgba(153, 0, 0, 0.1) url(/assets_jb/img/bg-q-marks.png) 25% 5%; border-bottom: 1px solid rgba(153, 0, 0, 0.25); padding: 20px 25px; font-size: 20px; text-transform: uppercase; text-align: center; text-decoration: none; }

#homekinder:hover { text-decoration: underline; }

#socialsb { display: table; width: 259px; padding: 20px; border-bottom: 1px solid rgba(124, 154, 174, 0.5); background: rgba(124, 154, 174, 0.15); }

#socialsb li { display: table-cell; width: 20%; margin: 0; }

#socialsb li a { display: block; margin-right: 5px; }

#socialsb li img { width: 100%; }

#home #sideblog { /* border-bottom: 1px solid rgba($logo1web,.5);  */ margin: 20px 0 0 0; padding: 0 20px 10px 20px; }

#home #sidenews { /* border-bottom: 1px solid rgba($logo1web,.5);  */ margin: 20px 0 0 0; padding: 0 20px 10px 20px; }

#wingmama { display: block; text-align: center; padding: 20px 0; border-top: 1px solid rgba(124, 154, 174, 0.5); background: rgba(124, 154, 174, 0.05); }

#wingmama img { width: 70%; padding: 10px; border: 1px solid rgba(124, 154, 174, 0.18); background: white; }

#wingmama:hover img { border-color: rgba(153, 0, 0, 0.65); }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> CSS3,ETC  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.brad50p, .circle, .back em, span.num, #curract h4 span, #whoxact h4 span, dd.actnum, dd.actnum span, #ifoot h2 span, #skillsset5 li a span, #volsintro span, #monthlistbyvolume h1, #monthlist dt span, #subnav li a span { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background-clip: padding-box; /* keep color from leaking out */ }

.brad10px, nav ul ul, #pubs a img, #wingmama img, .tabWidget .panel-inner, .jb .tabWidget .panel, .lskills#ifoot p a, .faqgroup, #bloglist article, #newslist article, #eventslist article, #searchresults article, #contact form, #actsnav, #topwhatsearch, #topgosearch, .pahlist p.hashtag { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background-clip: padding-box; /* keep color from leaking out */ }

.brad5px, nav ul ul a, #goquery, #signin #username, #signin #password, #fgoquery, #fgosearch, #footsearch, #video, #byskill span, #byactiv span, #ulall li a, #curract div, #gocurri, #whoxact div, #actthis, #mothis, #done, #rating ul, #rating div, .rating ul, .rating div, #printact a, #actlist dl, #actlist dd.actdes, #monthlistbyvolume h1 span, #monthlist dl, #monthlist dd p, a.keep, #bloglist article img, #blogarticle #cont article img, #newslist article img, #newsarticle #cont article img, #contact_form dd input, #contact_form dd textarea, #sideblogsearch form, #bgoquery, #bgosearch, #ifoot section, #ifoot #fcol3 div, #sideblogarch dt, .myTT, .pages *, a#actfocus, #hero img, #hometabs div#actlist, #hometabs #whoxact, #byskilllist dl, #byskilllist dd p, #newdetail .actcontent, #newdetail .materials, #newdetail .resources, #PF .vidlinks, #padetail article, #padetail .materials, .paintropic img, .pahlist p.hashtag span { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-clip: padding-box; /* keep color from leaking out */ }

#blogarticle #cont p.byline, #newsarticle #cont p.byline { -webkit-border-radius: 0 0 10px 0; -moz-border-radius: 0 0 10px 0; border-radius: 0 0 10px 0; background-clip: padding-box; /* keep color from leaking out */ }

.bradTL5px, #mains, .tab, #search, #newsearch a img, #newdetail #hero, #padetail h2.h3 { -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; background-clip: padding-box; /* keep color from leaking out */ }

#newdetail #actinst { -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; background-clip: padding-box; /* keep color from leaking out */ }

.bradTL20px, #ulall { -webkit-border-radius: 20px 20px 0 0; -moz-border-radius: 20px 20px 0 0; border-radius: 20px 20px 0 0; background-clip: padding-box; /* keep color from leaking out */ }

.bradTRBR10px { -webkit-border-radius: 0 10px 10px 0; -moz-border-radius: 0 10px 10px 0; border-radius: 0 10px 10px 0; background-clip: padding-box; /* keep color from leaking out */ }

.shadowbody, #mains { -webkit-box-shadow: 0px 0px 20px 3px rgba(124, 154, 174, 0.5); /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */ box-shadow: 0px 0px 20px 3px rgba(124, 154, 174, 0.5); /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */ }

.shadowlt, #bldgimg img, #gals li img, div#galrot img, #hero img, .paintropic img { -webkit-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.35); /* Android 2.3+,iOS 4.0.2-4.2,Safari 3-4 */ box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.35); /* Chrome 6+,Firefox 4+,IE 9+,iOS 5+,Opera 10.50+ */ }

#search { -webkit-transition: width 0.25s, left 0.25s; /* Safari */ transition: width 0.25s, left 0.25s; }

/* brooks' lightwindow watermark being removed via css :: https://html5box.com */
#html5-watermark { display: none !important; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> PRINTER FRIENDLY - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.jb #codeigniter_profiler, .jb #expressionengine_template_debug { display: none; }

#PF header #social, #PF header #userlog, #PF header #topsearch, #PF header #tagline, #PF header nav, #PF #ifoot, #PF footer, #PF .shareme, #PF .rateme { display: none; }

#PF #mains { border: none; -webkit-box-shadow: none; box-shadow: none; }

#PF #upper { margin-top: 0; }

#PF header { height: .5in; position: absolute; bottom: 10px; right: 0; left: 0; }

#PF #logo { top: 0; left: auto; right: 60px; }

#PF #myurl { top: 0; left: 60px; right: auto; display: block; position: absolute; line-height: .5in; font-size: 80%; }

#PF #logo img { height: .5in; }

#PF #anchornav { margin: 0; /* display: none; */ }

#PF #newdetail h1 { font-size: 32px; margin-top: 0; margin-right: 0; text-align: center; }

#PF h1 + p.h4 { text-align: center; border: 1px dotted rgba(124, 154, 174, 0.35); border-width: 1px 0; padding: 5px 0; }

#PF .tfloats { padding-top: 10px; }

#PF .col-main { padding: 0; background: none; }

#PF .instructions { margin-bottom: 20px; }

#PF .instructions h3:first-of-type { margin-top: 0; }

#PF .mods2 { padding-top: 20px; }

#PF .vidlinks { padding: 5px 8px; border: 1px dotted #7c9aae; background: rgba(124, 154, 174, 0.05); margin-top: 10px; }

#PF .vidlinks h4 { margin: 0; padding-top: .15em; }

#PF .materials { padding: 0 0 10px 5px; border-bottom: 1px dotted #7c9aae; background: none; }

#PF .resources { padding: 0 0 10px 5px; border-bottom: 1px dotted #7c9aae; background: none; }

#PF .materials ul { margin-left: 5px; }

#PF .materials li { position: relative; margin: 0.25em 0 0 0.25em; list-style: none; }

#PF .materials li:before { position: absolute; content: "\00b7"; left: -10px; }

#PF .resources ul { margin-left: 5px; }

#PF .resources li { position: relative; margin: 0.25em 0 0 0.25em; list-style: none; }

#PF .resources li:before { position: absolute; content: "\00b7"; left: -10px; }

#PF #skillslist ul { margin: 0 0 0 20px; }

#PF #skillslist li { list-style: none; line-height: 15px; margin: 5px 0; display: table; }

#PF #skillslist li img { width: 85%; display: table-cell; vertical-align: middle; }

#PF #skillslist li span { width: 89%; display: table-cell; vertical-align: middle; padding-left: 1%; }

#PF #hero { margin: 30px 0; }

#PF .pics { display: table; page-break-inside: avoid; }

#PF .pics .picdiv { display: table-cell; text-align: center; vertical-align: middle; }

#PF .pics .picdiv img { width: 95%; height: auto; }

#PF .pics .picdiv.count1 img { max-width: 40%; }

#PF .pics .picdiv.count2 img { max-width: 70%; }

#PF .pics .picdiv.count3 { width: 33%; }

#PF .pics .picdiv.count4 { width: 25%; }

#PF .pics .picdiv.count5 { width: 20%; }

#PF .pics .picdiv.count6 { width: 16%; }

#PF .pics .picdiv.count7 { width: 14%; }