/*layout*/
body {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; padding: 0px; margin: 0px; padding: 0px}
div {margin: 0px; padding: 0px}
dt {margin: 0px 0px 1em 0px}
dd {margin: 0px 0px 1em 3em}
img {border: 0px}
p {margin-bottom: 1.67em}
#body {width: 100%; position: absolute; top: 0px; left: 0px}
#header {display: table; position: relative; top: 0px; left: 0px; background-color: white; height: 75px; width: 100%; padding: 0px; border-bottom: 1px solid #A3A3A1; box-shadow: 0vw 0.05vw 0.15vw rgba(44,83,118, .15); margin: 0px; z-index: 100; }
#header img {border: 0px; }

#logo, #topNav, #nav, #searchBar, #searchIcon, #languages {vertical-align: middle; white-space: nowrap} 
#logo, #nav, #searchBar, #searchIcon, #languages {text-align: center; padding: 0px 1em 0px 1em} 
#logo, #nav, #searchIcon, #languages {width: 1%; line-height: 0px; } 
#logo, #languages {display: table-cell}
#logo img {position: relative; margin: 0px; height: 44px; width: auto; }
#topNav {text-align: left; padding: 0px} 
#languages select, #languages select option {color: #2c5376; cursor: pointer}
#languages select {background-color: white; padding: 6px 14px 7px 14px; border: 1px solid #2c5376; }
#languages select option {background-color: white}

#middle {position: relative; width: 100%; margin: 0px auto 0px auto; background-image: none; background-color: white}
#middleTable {display: block; position: relative; background-color: white; width: 100%; margin: 0px auto 0px auto}
#preContent {position: relative; display: block; width: calc(100% - 90px); height: 20px; padding: 10px 50px 10px 40px; border-top: 1px solid #A3A3A1; border-bottom: 1px solid #A3A3A1;}
#bc {display: inline-block; position: relative; font-family: Candara; background-color: transparent; }
#bc a {display: inline-block; text-decoration: none; margin: 0px 10px 0px 10px}
#bc a:hover {text-decoration: underline}

#middleContent {position: relative; width: 100%; min-height: 680px; padding-bottom: 2em; margin: 0px auto 0px auto; background-color: white;}
#siteFooter {background-color: #535352;}
#sectionFooter {background-color: #727271}
.footerc {width: 100%; text-align: center}
.footerl {width: 100%; text-align: left}
.footerContent {display: inline-block; text-align: left; vertical-align: top; margin: 0px; padding: 20px 40px 20px 40px; color: white; }
.footerContent div {display: inline-block; max-width: 300px; text-align: left; vertical-align: top; margin: 1em 1.25em 1em 1.25em}
.footerContent div.wide {max-width: 1920px; width: 100%;}
.footerContent p {margin: 0px 0px 10px 0px; padding: 0px}
.footerContent ul {list-style-type: none; margin: 0px; padding: 0px}
.footerContent li {list-style-type: none; text-indent: -20px; margin: 0px; padding: 0px 0px 0px 20px}
.footerContent a {color: white; text-decoration: none}
.footerContent a:hover {color: white; text-decoration: underline}
#fnav div {width: auto; max-width: 400px}
#fsoc ul {padding-bottom: 20px}
#fsoc li {text-indent: 0px}
#followUs {margin: 5px 0px 0px 0px}
#followUs img {vertical-align: middle; margin: 5px 10px 5px 0px; height: 36px; width: 36px}
#ecfa img, #intphil img {float: left; margin: 0px 15px 15px 0px}

/*fonts*/
body {font-family: "Helvetica Neue",Helvetica,Arial,Verdana,Geneva,sans-serif; color: #535352;}
body, p, blockquote, td, li, dt, dd, select, option, input {font-size: 16px}
body, div, p, blockquote, td, li, dt, dd, h1, h2, h3, h4, h5, h6 {line-height: 1.25em}
.lhs {line-height: 1.25em}
.lht {line-height: 1.67em}
@media screen and (min-width: 1366px) 
{
    h1, .h1 {font-size: 48px;}
    .h1s {font-size: 40px;}
    h2, .h2 {font-size: 30px;}
    h3, .h3 {font-size: 22px;}
    h4, .h4 {font-size: 18px;}
    #topNav > ul > li, #topNav > ul > li > ul > li, #topNav > ul > li > ul > li > ul > li {font-size: 18px}
    .sublist1, .list2 {font-size: 16px}
}
@media screen and (min-width: 421px) and (max-width: 1365px) 
{
    h1, .h1 {font-size: calc(48px - (48 - 28)/(1366 - 420)*1366px + (48 - 28)/(1366 - 420)*100vw);}
    .h1s {font-size: calc(40px - (40 - 25)/(1366 - 420)*1366px + (40 - 25)/(1366 - 420)*100vw);}
    h2, .h2 {font-size: calc(30px - (30 - 22)/(1366 - 420)*1366px + (30 - 22)/(1366 - 420)*100vw);}
    h3, .h3 {font-size: calc(22px - (22 - 18)/(1366 - 420)*1366px + (22 - 18)/(1366 - 420)*100vw);}
    h4, .h4 {font-size: calc(18px - (18 - 16)/(1366 - 420)*1366px + (18 - 16)/(1366 - 420)*100vw);}
}
@media screen and (min-width: 900px) and (max-width: 1365px) 
{
    #topNav h3, #topNav > ul > li, #topNav > ul > li > ul > li, #topNav > ul > li > ul > li > ul > li {font-size: calc(18px - (18 - 16)/(1366 - 420)*1366px + (18 - 16)/(1366 - 420)*100vw);}
    .sublist1, .list2 {font-size: 16px}
}
@media screen and (min-width: 421px) and (max-width: 899px) 
{
    #topNav, #topNav .h3, #topNav > ul > li, #topNav > ul > li > ul > li, #topNav > ul > li > ul > li > ul > li {font-size: calc(30px - (30 - 22)/(1366 - 420)*1366px + (30 - 22)/(1366 - 420)*100vw);}
}
@media screen and (max-width: 420px) 
{
    h1, .h1 {font-size: 28px;}
    .h1s {font-size: 25px;}
    h2, .h2 {font-size: 22px;}
    h3, .h3 {font-size: 18px;}
    h4, .h4 {font-size: 16px;}
    #topNav, #topNav h3, #topNav > ul > li, #topNav > ul > li > ul > li, #topNav > ul > li > ul > li > ul > li {font-size: 22px}
}
.h5 {font-size: 14px;}
.fwb {font-weight: 700}
.fwn {font-weight: 400}
.fwl {font-weight: 200}
a {color: #2c5376}
a:active{outline:0 none;position:relative;top:1px;}
a:hover {color: #2c5376; text-decoration: underline; cursor: pointer}
a.displayOnly {color: #535352}
a.authorLink, a.rtBibleRef {text-decoration: none}

/*buttons*/
.dbwbutton {color: #2c5376; background-color: white; text-decoration: none; -webkit-border-radius: .13em; border-radius: .13em; padding: .5em 1em .5em 1em}
.wobutton {color: white; background-color: #f15d43; text-decoration: none; -webkit-border-radius: .13em; border-radius: .13em; padding: .5em 1em .5em 1em}
.wdbbutton {color: white; background-color: #2c5376; text-decoration: none; -webkit-border-radius: .13em; border-radius: .13em; padding: .5em 1em .5em 1em}
.currentpg {color: white; background-color: #535352; border: 2px solid #535352; -webkit-border-radius: 1px; border-radius: 1px; }
    
/*circle + to x*/
.circle{position: relative; display: inline-block; width: 1em; height: 1em; border: 1px solid #727271; border-radius: 100%; margin: 0px; background: white;}
.circle:focus {outline: 0;}
    /*.circle:hover {background: radial-gradient(#aaa, #fff);}*/
.circle:active {background: white;}
.circle:before, .circle:after {content:'';position:absolute;top:0;left:0;right:0;bottom:0;}
.circle.plus:before, .circle.plus:after {background: #727271;}
.circle.plus:before {top: 0px; width: 2px; margin: .2em auto;}
.circle.plus:after {margin: auto .2em; height: 2px;}
.circle.minus:before {background: #727271; margin: auto .2em; height: 2px;}
.circle.cross:after, .circle.cross:before {background: #727271; margin: auto .2em; height: 2px; transform: rotateZ(45deg);}
.circle.cross:after {transform: rotateZ(-45deg);}
    
/*alignment*/
.middle {display: table-cell; vertical-align: middle}
    
/*tools*/
.hide {display: none}
    
.expander {position: relative; text-align: center; background-color: white;}
.expander, .expander .expBackground {padding: 0vw; margin: 0vw}
.expBackground {display: inline-block; position: relative; width: calc(100% - 4em); max-width: 1286px; border-bottom: 2px solid #727271}
.expBackground .tc {display: table-cell; height: 4.5em; text-align: left; vertical-align: middle; padding-top: 1.5em; background-color: transparent}
.expButton {color: #2c5376; width: auto; padding-right: 3em}
.expButton div {display: table-cell; vertical-align: middle}
.expButton span {display: inline-block; padding: 0px 0px .2em 0px; border-bottom: .15em solid white; margin: 0px 0px 0px 1.5em; cursor: pointer}
.expButton span.selected {border-color: #2c5376; }
.expButton span:hover {border-color: #2c5376; }
.hid .content {display: inline-block; position: relative; text-align: left; background-color: white; width: calc(100% - (1.5 * 22px + 32px)); padding: 0px 0px 2em calc(1.5 * 22px + 32px)}
@media screen and (min-width: 1281px) and (max-width: 1399px) {.hid .content {width: calc(100% - (1.5 * 1.45vw + 32px)); padding: 0px 0px 2em calc(1.5 * 1.45vw + 32px)}}
@media screen and (min-width: 600px) and (max-width: 1280px) {.hid .content {width: calc(100% - (1.5 * 18px + 32px)); padding: 0px 0px 2em 2vw}}
@media screen and (max-width: 599px) {.hid .content {width: 100%; padding: 0px 0px 2em 0px}}
.expCaption.text {display: table-cell; vertical-align: middle; padding: 0px 40px 0px 40px}
.expCaption.text p {margin: 0px}

/*page banner*/
#pageBanner {text-align: center; background-size: cover; background-position: center center; background-repeat: no-repeat; }
#pbBackground {background-color: transparent; height: 100%; width: 100%; max-width: 1366px; margin: 0px auto 0px auto}
#pbCaption {color: white; text-align: left; vertical-align: middle; height: 100%; width: 16em; max-width: 60%; padding: 4em;}
#pbCaption h1 {margin: 0px; padding: 0px}
#pbCaption h2 {font-weight: normal;}
#pbCaption a {color: white;}
#pbCaption a.dbwbutton {color: #2c5376;}
#pbCaption .pbcBlurb {margin-top: 2em; margin-bottom: 0px}
#pbCaption #rss {vertical-align: middle; width: 2.15em; height: 2.15em; padding-bottom: .2em; border: none; margin-left: .5em}
@media screen and (max-width: 450px) {#pbCaption #rss {display: block; margin: 1em 0px 0px 0px}}

/*page title*/
.pageTitle {text-align: center; margin: 2em;}
.pageTitleCaption {display: inline-block; text-align: left; width: 100%; max-width: 700px; margin: 0px}
.pageTitleCaption.w {width: auto; max-width: 1286px}
.pageTitleCaption.c {text-align: center}
.pageTitleCaption a {text-decoration: none}
.pageTitleCaption h1, .pageTitleCaption h2, .pageTitleCaption h3, .pageTitleCaption h4 {margin: 0px}
    
/*normal page reading content*/
.pageContent {width: 100%; /*border-top: 2px solid #A3A3A1; */text-align: center; margin: 0px 0px 40px 0px; padding: 0px}
.pageContentText {display: inline-block; text-align: left; width: calc(100% - 4em); max-width: 700px;  margin: 0px 2em 0px 2em}
.pageContentText.a {width: auto}
.pageContentText.m {max-width: 1286px}
.pageContentText.mw {max-width: 1366px}
.pageContentText h1 {margin-top: 60px}
.pageContentText p, .pageContentText li, .pageContentText div {line-height: 1.67em}
.pageContentText p.lhs, .pageContentText li.lhs, .pageContentText div.lhs {line-height: 1.25em}

/*search submission form*/
#searchm {display: none; position: absolute; left: 0px; background-color: white; height: 2000px; width: 100%; padding: 0px; border: 0px; margin: 0px; }
#searchm span.up {display: table-cell; background-color: #2c5376; height: 2000px; width: 2.6em; border: 0px; z-index: 2; cursor: pointer}
#searchm span.up span {position: relative; top: 1em; left: .8em; display: inline-block; height: 1em; width: 1em; border-top: 2px solid white; border-left: 2px solid white; transform: rotate(45deg)}
#searchm a:hover {color: #2c5376}
#searchm form {display: table-cell; position: absolute; top: 0px; left: 6em; padding: 2em 0em 2em 0em; width: calc(100% - 8.5em)}
#searchm form p input {width: 18em}
#searchm form div {padding: 0em 0em 2em 0em}
.mSearch input[type=text] {width: 30%; min-width: 150px}
@media screen and (max-width: 499px) {#searchm form p input {width: auto; min-width: 0px}}
.mSearch dl, .mSearch dt {padding: 0px; margin: 0px}
.mSearch dt {font-weight: bold}
.mSearch dd {margin: 1em 0px 0px 1em}
.mSearch a {text-decoration: underline}
.mSearch a:hover {color: white}
.mSearch h4, .mSearch p {margin: 0px 0px 1em 0px}
.fSearch input[type=text] {width: 30%; min-width: 150px}
.fSearch dl, .fSearch dt {padding: 0px; margin: 0px}
.fSearch dt {font-weight: bold}
.fSearch dd {margin: 1em 0px 0px 1em}
.fSearch a {text-decoration: underline}
.fSearch a:hover {color: white}
.fSearch h4, .fSearch p {margin: 0px 0px 1em 0px}

/*search results*/
.srForm {display: block; text-align: center; width: 100%; margin: 4em 0px 0px 0px}
.srForm.au {margin-top: 2em}
.srForm.tab {display: inline-block; text-align: left; max-width: 1286px; }
.srFormBg {display: inline-block; text-align: left; width: 100%; max-width: 1286px;}
.srFormBg div {display: table-cell}
.srIconDiv {width: 3em;}
@media screen and (max-width: 899px) {.srIconDiv {width: 5vw;}}
.srContent {padding: 0px; border-left: 3em solid transparent}
@media screen and (max-width: 899px) {.srContent {border-left: 5vw solid transparent}}
.srContent a:hover {text-decoration: underline}
.srContent h3 {margin: 0px}
.srContent h3 a {text-decoration: none}
.srContent.s p {margin: .5em 0px 0px 0px}
.srContent.t p {margin: 1em 0px 0px 0px}
.srContent p.srAuthor {}
.srContent p.srDescription {}
.srContent p.srSeries {}
.srContent p.srDate {}
.srContent p.srFormats {}
.srContent p.srTopics {}
.srContent ul {margin: 0px}
.srContent ul li {line-height: 1.25em}
.color1 {background-color: #f15d43} 
.color2 {background-color: #2c5376}
.color3 {background-color: #BDE5EC}
.color4 {background-color: #81AFB6}
.srDescription ul {margin-top: 0px} 
.srTopics a, .srFormats a {display: inline-block; margin: 0px 10px 0px 0px}
.searchPaging {padding: 0px; width: auto;}
.searchPaging span {margin-left: 1em}
.searchResultHead input, .searchPaging input {text-align: center}

/*alphabetical indices*/
.alpha {padding: 0px 40px 40px 40px;}
.alpha ul {position: relative; list-style-type: none}
.alpha ul li {display: inline-block; position: relative; top: 2px; margin: 8px; border: 2px solid white; border-radius: 50%}
.alpha ul li.u {padding-left:10px; padding-right:10px; } 
.alpha ul li.circleli {border-color: #A3A3A1} 
.alpha ul li a {display: table-cell; height: 40px; width: 40px; font-weight: bold; text-align: center; vertical-align: middle; text-decoration: none}
.alphaList {text-align: center; width: calc(100% - 80px); padding: 40px; border-top: 2px solid #A3A3A1}
.alphaList h2 {margin: 1em 0px .5em 0px}
.alphaList h2.uns {margin-bottom: 2em}
.alphaList h4 {margin: 0px 0px 3em 0px}
.alphaList ul {display: inline-block; list-style-type: none; text-align: left}
.alphaList ul, .alphaList ul li {text-indent: 0px; padding: 0px; margin: 20px}





    
p.author {font-weight: bold}
ul.seriesNav {list-style-image: url('https://2018.thirdmill.org/images/white_downarrow.png')}
    
.bottomBorder {border-bottom: 1px solid #BDE5EC; }
.categoryColor { color: #535352 }
.catLink { text-decoration: none; color: #2c5376 }
.catLink:hover { text-decoration: underline}
.glossary {text-decoration: none; background-color: #BDE5EC; border-bottom: 1px solid #f15d43}

.submenu {background-color: #535352; margin: -13px 0px 0px -17px; display: none; position: absolute; top: 0px; z-index: 150}
.subNavM {display: none}
.tagMargins {margin: 0px 0px 0px 10px; padding: 0px 0px 0px 0px}

/*jwplayer*/
.jw-state-idle .jw-controls {background: rgba(0,0,0,0.0) !important;}
.jw-controls-backdrop {background: rgba(0,0,0,0.0) !important;}


    
    /*not used on thirdmill2018*/
    #title h1 {font-size: 10px}
    #title h2 {font-size: 10px}
    #tagline1 {position: relative; top: 52px; left: 357px; height: 48px; width: 434px; margin: 0px 0px 0px 0px; background-color: transparent}
    #tagline {z-index: 16; position: absolute; top: 0px; left: 375px; width: 480px; height: 30px; border: none; color: #535352; font-weight: normal}
    #tagLine img {margin: 0px 0px 0px 33px}

    
    /*search and small screen navigation*/
    #searchIcon svg, #nav img {cursor: pointer}
    #searchBar svg {padding: 0px}


    /*search form*/
    .leftmobisearch p.bottomBorder {margin: 20px 15px 20px 50px}
    #advSearchSubmitM {margin: 15px 0px 15px 100px}
    #searchButtonM {width: 32px; right: 30px; display: inline-block}
    #mtopsearchButtonM {width: 32px; top: 10px; right: 46px; display: inline-block}
    a.displayOnly {margin: 0px}

#content {line-height: 28px}
#seriestitle, .largeScreen {line-height: 20px}



/*899px and narrower*/
@media screen and (max-width: 899px) 
{
    #topNav, #searchBar, #bc {display: none}
    #logo, #nav, #searchIcon, #languages {padding: 0px 2vw 0px 2vw}
    #logo img, #languages form {padding: 0px}
    #nav, #searchIcon {display: table-cell; vertical-align: middle; height: 8.33vw; width: 1%; white-space: nowrap} 
    #nav img {height: 30px; width: auto; }
    #topNav {position: absolute; left: 0px; background-color: white; height: 2000px; width: 100%; white-space: normal; }
    #topNav span.up {position: absolute; top: 0px; left: 0px; display: table-cell; background-color: #2c5376; height: 2000px; width: 2.6em; border: 0px; z-index: 2; cursor: pointer}
    #topNav span.up span {position: relative; top: 1em; left: .8em; display: inline-block; height: 1em; width: 1em; border-top: 2px solid white; border-left: 2px solid white; transform: rotate(45deg)}
    #topNav span.down {float: right; width: 2.5em; height: 2.5em; cursor: pointer}
    #topNav span.down span {position: relative; top: .45em; left: .8em; display: inline-block; height: 1em; width: 1em; border-bottom: 2px solid #2c5376; border-right: 2px solid #2c5376; transform: rotate(45deg)}
    #topNav ul {position: absolute; top: 0px; left: 0px; display: table-cell; list-style-type: none; padding: 0px; border: 0px; margin: 0px}
    /*20px in next 2 calcs = browsers' vertical scroll bars*/
    #topNav li {background-color: white; min-height: 2.5em; width: calc(100vw - (2.6em + 20px)); border-bottom: 1px solid #727271; margin-left: 2.6em; z-index: 1}
    #topNav a, .anchor {display: inline-block; color: #2c5376; text-decoration: none; width: calc(100vw - (2.6em + .65em + 2em + 2.5em + 20px)); padding: .65em 0em .65em 1em}
    #pbBackground {text-align: center}
}

/*600px and narrower*/
@media screen and (max-width: 600px) 
{
    #pbCaption {display: inline-block; padding: 3em; max-width: 100%}
}


/*420px and narrower*/
@media screen and (max-width: 600px) 
{
    #header {transform: scale(100%)}
}


/*1120px and wider*/
@media screen and (min-width: 1120px) 
{
    #searchBar {display: table-cell}
    #searchIcon {display: none}
}
/*1119px and narrower*/
@media screen and (max-width: 1119px) 
{
    #searchBar {display: none}
    #searchIcon {display: table-cell;}
    #searchIcon svg {width: 26px; height: auto}
}

/*899px and narrower*/
@media screen and (max-width: 899px) 
{
    #searchIcon svg {width: 4vw; min-width: 26px; height: auto}
}
        
/*900px and wider*/
@media screen and (min-width: 900px) 
{
    #nav, #searchm {display: none} 
    #topNav {position: relative; display: table-cell; vertical-align: middle; text-align: left; background-color: transparent; margin: 0px}
    #topNav a {margin: 0px; text-decoration: none}
    #topNav ul {display: table; list-style-type: none; width: 100%; max-width: 1000px; padding: 0px; border: 0px; margin: 0px; }
    #topNav .list1 {float: none; display: table-cell; background-color: transparent; color: #535352; text-align: center; font-family: "Helvetica Neue",Helvetica,Arial,Verdana,Geneva,sans-serif; text-transform: uppercase; font-weight: bold; padding: .5vw 1vw .5vw 1vw; border: 0px; }
    #topNav .list1 a {color: #2c5376; font-weight: normal; padding: .5vw 0vw .5vw 0vw; border-bottom: 2px solid white; }
    #topNav .list1 a:hover {text-decoration: none; }
    #topNav span {display: none}
    #topNav span.anchor {display: inline; color: #2c5376;}
    #topNav .sublist1 {position: absolute; top: -2000px; background-color: white; padding: .5vw 1vw .5vw 1vw; border: 1px solid #2c5376}
    #topNav .sublist1 ul {display: block; margin: 0vw; }
    #topNav .list2 {display: list-item; font-weight: normal; padding: 0vw; border: 0vw; margin: .5vw; }
    #topNav .list2 a:hover {text-decoration: underline}
    #topNav .sublist2 {display: none}
    /*#topNav .nomenu {display: none}*/
    #topNav .list2.nolink {display: none}
    #searchBar {position: relative; width: 17vw}
    #searchBar form {width: 17vw; padding: 3px; border: .05vw solid #A3A3A1}
    #searchBar input {display: inline-block; vertical-align: middle; width: 13vw; height: auto; padding: 3px; border: none}
    #searchBar input::placeholder, #searchBar input::-webkit-input-placeholder, #searchBar input::-ms-input-placeholder {color: #727271}
    #searchBar button {background-color: transparent; border: 0px}
    #searchBar svg {right: 0px; vertical-align: middle; height: 1.5vw; width: 1.5vw; padding: 0vw 0vw .3vw .5vw}
}


/*900px to 1069px*/
@media screen and (min-width: 900px) and (max-width: 1069px) {
    #topNav div ul {padding: .5vw .25vw .5vw .25vw}
    #topNav div ul li, #donate div ul li {vertical-align: top}
}

/*459px and narrower*/
@media screen and (max-width: 459px) {
    #popover {display: none}

    #content .prattlist li {margin-left: 20px; max-width: 430px}
    #content .qaTitle {padding-top: 0px}
    #content .teamBio1 {/*font-size: 20px; line-height: 24px; */padding-bottom: 0px; margin-bottom: 0px}
    #content .teamBio2 {/*font-size: 16px; line-height: 20px; */padding-top: 10px; margin-top: 0px}
    #content h1.sectionHeadingTop {padding: 0px 0px 0px 0px; margin: 0px}
    #content h1.hma1 {}
    #content h1.hma2 {/*font-size: 18px*/}
    #content #fixOverlap {position: relative; left: 0px; top: 0px}

    #related {margin-top: 30px}
        
    #seriestitle {padding: 0px}
    h1.hma {display: block;}
    .filesize {color: #535352}
    #content li.smpad {padding: 0px 0px 0px 0px; margin:0px 0px 5px 30px}

    .nomobi {display: none}

    .banner {width: calc(100% - 20px)}
    .progcol {width: calc(100% - 40px)}
    .discArt {width: calc(100% - 20px)}
    .wideimage {max-width: calc(100% - 40px); height: auto}


    #related {width: calc(100% - 20px)}
        
    #series {padding: 0px}
    #vscoverart {position: relative; top: 0px; left: 0px}

    h1.sectionHeading {/*font-size: 24px; line-height: normal; */padding-bottom: 20px; margin-bottom: 0px}
    h1.bookSectionHeading {/*font-size: 24px; line-height: normal; */margin: 0px; padding: 0px}
    .teamDept {margin-top: 20px}

    h1 span.hma {float: right; /*font-size: 18px; */margin-top: -4px}
    .smallScreen {display: block}
    .smallScreen dl {padding-bottom: 10px}
    .largeScreen {display: none}
    #seriesdescription {display: none}
    .lessonTitle {width: auto}
}


/*all sizes*/    

            
            #open {float: left; padding: 12px 0px 0px 300px}
            @media screen and (max-width: 889px) {#open {float: none; padding: 12px 0px 0px 0px; text-align: center}}
            @media screen and (max-width: 600px) {#open {/*font-size: 12px*/}}
            @media screen and (max-width: 560px) {#open {display: none}}
            /*@media screen and (max-width: 540px) {#open {float: left; padding: 35px 0px 0px 45px; }}*/
            /*@media screen and (max-width: 459px) {#open {padding: 12px 0px 0px 5px; }}*/
            #open a {color: white; padding: 5px; font-weight: normal; border-radius: 10px; text-decoration: none; background-color: #2B9E43}
            #addThis {float: right; margin-top: -4px}
            #addThis a {padding: 0px; margin: 0px}
            
            
            .progcol {display: inline-block; vertical-align: top; width: 180px}
            .discArt {border: 1px solid silver}



            .kw2 {width: 180px; height: 26px; /*font-size: 16px*/}
            .topLinkPad {padding-top: 20px}

            #seriestitle {padding: 20px 0px 0px 0px}
            h1.hma {display: inline;}
            #content h1.hma1 {}
            #content h1.hma2 {float: right; padding: 0px; /*font-size: 18px*/}
            .smallScreen {display: block}
            .largeScreen {display: none}
            .filesize {color: #bbbbbb}
            #seriesdescription {display: none}
            .lessonTitle {}
            #content.sbNoteContent {border: none; left: 65px}
            
            #related {min-height: 300px; margin-top: 30px}
            #related h5 {/*font-size: 14px; */font-weight: bold; text-decoration: none; margin: 0px; padding: 0px 0px 15px 0px}
            #related ul {/*font-size: 13px; */list-style-type: none}
            #related li {padding: 0px; margin: 0px 0px 10px 0px}
            #related .lists {border: 1px solid #BDE5EC; padding: 20px; background-color: white; vertical-align: top;
                display: inline-block; width: 210px; min-height: 170px; margin: 0px 20px 0px 0px}
            #related .searchResult {/*font-size: 14px; */font-weight: inherit; text-decoration: underline}
            #related .related {/*font-size: 11px*/}