/* Outer Page Envelope: Root-em (rem) size: All font-size settings are based on this value and assume browsers have default or user-set font-size:16px; Assumes users accept or set device-browser default to 16px o Small phones <400px: font-size:90%; 1 rem = 19.2 device px o Larger phones 400-549px: font-size:77%; 1 rem = 14.4 device px (including landscape on smaller units) o Phablets 550-769px: font-size:70%; 1 rem = 12 device px o Desktops >770: font-size:62.5% 1 rem = 10 device px All font-sizes in entire page are specified as a percentage of the font size established by 770px */ @media screen and (min-width:770px) { html { font-size:62.5%; } } /* #################################################################### */ /* #################################################################### */ /* #################################################################### */ /* Body = Display area outside of Masthead, MainContent, & Footer Containers */ body { text-align: left; margin:0; padding:0; height:100%; box-sizing:border-box; } /* Device width <550 px */ @media screen and (max-width:549px) { body { background-color:#4466aa; } } /* Device width >=550 px */ @media screen and (min-width:550px) { body { background-image: url('graphics/bg_topblufade.gif'); background-repeat: repeat-x; background-attachment: fixed; } } /* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */ /* $$$$$$$$$$$$$$$ Main Page Container: $$$$$$$$$$$$$$$ */ /* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */ #container { /* All devices, any width */ position:relative; margin:0 auto; padding:0; margin-top:1.5rem; margin-bottom:1.5rem; color:black; line-height:1.4; box-sizing:border-box; } /* Devices < 400px */ /* ------------------------------------------------------- */ @media (max-width:399px) { #container { max-width:399px; min-width:240px; width:100%; margin:0; } } /* Devices 400-599px (Landscape (portrait on larger phones)) */ /* --------------------------------------------------------------- */ @media (min-width:400px) and (max-width:549px) { #container { max-width:599px; min-width:400px; width:100%; margin-top:0; } } /* ------------------------------------------------------- */ @media (min-width:550px) and (max-width:769px) { /* Devices 600-769px */ #container { min-width:600px; max-width:769px; width:100%; } } /* --------------------------------------------------------------- */ @media (min-width:770px) { /* Devices >= 600px (#container is limited to 980px max, regardless of device width): */ #container { max-width:980px; min-width:770px; width:100%; } } /* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */ /* $$$$$$$$$$$$$$$ Masthead Container: $$$$$$$$$$$$$$$ */ /* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */ #MastheadWrapper { width:100%; margin-bottom:1rem; margin-bottom:1rem; margin:auto 0; background-color:#EaEaEa; color:black; text-align:left; box-sizing:border-box; } @media (max-width:400px) { #MastheadWrapper { max-width:100%; margin-left:auto; margin-right:auto; } } #MastheadPhotoBlock { width:35%; max-width:33%; float:left; margin:1rem; } #MastheadTextLeft { width:30%; max-width:33%; float:left; margin:1% 2.5% 0.3% 1.3%; text-align:center; } #MastheadTextRight { width:30%; margin-top:2%; float:left; text-align:left; font-size:1.4rem; line-height:1.4; } @media (max-width:399px) { #MastheadPhotoBlock, #MastheadTextLeft, #MastheadTextRight { width:99%; max-width:100%; position:relative; margin-left:auto; margin-right:auto; margin-top:0; font-size:70%; float:left; } } @media (max-width:399px) { #MastheadTextRight { margin-left:5%; width:90%;} } @media (min-width:400px) and (max-width:549px) { #MastheadPhotoBlock, #MastheadTextLeft, #MastheadTextRight { width:80%; max-width:100%; min-width:60%; font-size:70%; margin-left:10%; margin-right:10%; } } @media (min-width:550px) and (max-width:769px) { #MastheadPhotoBlock, #MastheadTextLeft, #MastheadTextRight { width:49%; max-width:100%; min-width:25%; position:relative; font-size:70%; margin-left:auto; margin-right:auto; float:left; } } @media (min-width:550px) { #MastheadPhotoBlock { width:60%; margin-left:20%; } } @media (min-width:770px) { #MastheadPhotoBlock, #MastheadTextLeft, #MastheadTextRight { width:33%; max-width:100%; min-width:25%; position:relative; font-size:70%; margin-left:auto; margin-right:auto; float:left; } } @media (min-width:770px) { #MastheadTextLeft { padding-top:1% } } /* Main-Content-Section Container: (between masthead & footer)*/ div#MainContentBody { width:100%; height:100%; position:relative; font-family:Verdana, Helvetica, sans-serif; /* margin:0; padding:0; color:black; text-align:left; font-size:1.4rem; line-height:1.5; */ } @media screen and (max-width:399px) { #MainContentBody { background-color:#EFEFEF; } } @media screen and (min-width:400px) and (max-width:549px) { #MainContentBody { background-color:#EFEFEF; } } @media screen and (min-width:550px) { #faux { position:relative; z-index:1; width:100%; border:.1rem solid #000; margin:00rem auto 4rem; overflow:hidden; background:#ffaf00; } #faux div { position:relative; float:left; width:30%; } #faux .main { left:0; } #faux .supp1 { width:60%; left:2.5%; margin-top:2rem; } #faux:before, #faux:after { content:""; display:block; position:absolute; z-index:-1; top:0; right:0; bottom:0; left:0; background-color:#DCECF4; } #faux:after { left:30%; background:#F0F8FF; border-left:.2rem solid blue; padding-top:1.5rem; margin:0rem; } } div.navcol30 { width:100% } /* This div not used: div.ContentBody { width:100%; height:100%; margin:0; margin-top:1rem; padding:0; color:black; text-align:left; font-family:Verdana, Helvetica, sans-serif; font-style:normal; font-size:1.6rem; line-height:1.5; */ /* background-color:#DCECF4; */ /* border:.3rem solid red; } */ /*div.MainLeft30 { width:30%; height:100%; float:left; margin:0rem; padding:0rem; background-color:transparent; text-align:left; } */ div.MainRight70 { position:relative; height:100%; padding-top:1.5rem; padding-left:8rem; font-size:1.6rem; } div#footer { margin:-8% auto -2%; background-color:#dFdFFF; width:100%; height:16rem; } div#FooterLegalLinks { margin-left:2%; font-size:1.4rem; line-height:2.0; } @media screen and (min-width:550px) { #footer { border:.1rem blue solid; line-height:1.3; overflow:hidden; padding-top:3%; padding-bottom:0; margin-bottom:0; } #FooterLegalLinks { margin-top:1rem; font-size:1.4rem; } } @media screen and (max-width:549px) { #footer { border-top:.2rem blue solid; height:20rem; padding-top:0; } #FooterLegalLinks { margin-top:2rem; font-size:1.1rem; } } div#FooterCopyright { margin:.5rem 1rem 0 0rem; width:60%;text-align:left; font-size:1.1rem; position:relative; line-height:1.4 } @media screen and (max-width:549px) { #FooterCopyright { font-size:1.1rem; } } /* Social-media share buttons */ /*div.SocialShareContainer { float:left; width:22rem; margin:1rem 1rem; padding-right:2rem; border:.05rem black solid; } div.SocialShareButtons { margin-left:.6rem; width:100%; } #SocialShareButtons img { width: 2.5rem; padding: .5rem; display: inline; } */ /* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */ h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 1rem; font-weight: 300; } h1 { font-size:2.6rem; line-height:1.2; letter-spacing:-.1rem;} h2 { font-size:2.0rem; line-height:1.25; letter-spacing:-.1rem; } h3 { font-size:1.8rem; line-height:1.3; letter-spacing:-.1rem; } h4 { font-size:1.6rem; line-height:1.35; letter-spacing:-.08rem; } /* h5 { font-size: 1.4rem; line-height: 1.5; letter-spacing: -.05rem; } h6 { font-size: 1.2rem; line-height: 1.6; letter-spacing: 0; } */ /* Larger than phablet */ @media (min-width:550px) { h1 { font-size:2.6rem; text-align: center; line-height:1.1; color: #442288; font-style:normal; font-weight:bold; } h2 { font-size:2rem; text-align: center; line-height:1.1; color: #442288; font-style:normal; font-weight:bold; } h3 { text-align: center; color: red; font-weight: bold; font-style: normal; font-size: 1.8rem; line-height: 1.2; font-family:Verdana, Helvetica, sans-serif; margin-top:0.5rem; margin-bottom:0.5rem; } h4 { font-size:1.6rem; text-align: center; color: black; font-weight: bold; font-style: normal; font-size: 1.6rem; line-height: 1.2; font-family:Verdana, Helvetica, sans-serif; margin-top:2rem; margin-bottom:-.6rem; } /* h5 { font-size:1.8rem; } h6 { font-size:1.6rem; } */ /*} */ h2.eyebrow { text-align:left; font-size:2rem; line-height:1.3; margin-top:1.0rem; margin-bottom:.8rem; margin-left:3rem; color:black; } p { font-family:Verdana, Helvetica, sans-serif; margin: 1.0rem 6.5% 1.0rem 8.5%; max-width:90%; font-size:1.4rem; line-height:1.5; text-indent:2.1rem; } @media (max-width:549px) { p { padding: .6rem 5% .6rem 5%; } } blockquote { margin: 1.0rem 10rem 1.0rem 10rem; } /* Links –––––––––––––––––––––––––––––––––––––––––––––––––– */ a:link {color: #0000FF} a:visited {color: #660066} a:hover {color: #000000; background: #FFDDBB} a:active {color: #FF0000} a:link img {border: .3rem #0000FF solid} /* Lists –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* Ordered, Unordered List : */ ol, ul, dl { /*margin-top:0.5rem; margin-left:4.5rem; margin-right:5.5rem;*/ margin:.6rem 5%; font-family:Verdana, Helvetica, sans-serif; font-size:1.4rem; line-height:1.5; } /* Unordered List -- Navigation: */ ul.nav { margin:.3rem .5rem 0rem -1.5rem; font-size:1.4rem; line-height:1.5; } /* Unordered List -- Square bullet: */ ul.square { list-style-type: square; margin-top: .5rem; } /* List Item for Ordered, Unordered, or Definition List: */ li, dt { margin-top: .6rem; } @media screen and (max-width:549px) { li,dt { margin-top:1.4rem; } } /* List Item for close-packed List: */ li.tight { margin-top: .4rem; } /* ==================================================================== ====== Box Shadows ---

========== ==================================================================== */ div.ds_1 { -webkit-box-shadow: 0 1.5rem 1rem -1rem rgba(0, 0, 0, 0.5), 0 .1rem .4rem rgba(0, 0, 0, 0.3), 0 0 4rem rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1.5rem 1rem -1rem rgba(0, 0, 0, 0.5), 0 .1rem .4rem rgba(0, 0, 0, 0.3), 0 0 4rem rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1.5rem 1rem -1rem rgba(0, 0, 0, 0.5), 0 .1rem .4rem rgba(0, 0, 0, 0.3), 0 0 4rem rgba(0, 0, 0, 0.1) inset; } div.ds_1A { -webkit-box-shadow: 0 1.5rem 1rem -1rem rgba(0, 0, 0, 0.5), 0 .8rem 1rem rgba(0, 0, 0, 0.6), 0 0 2rem rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1.5rem 1rem -1rem rgba(0, 0, 0, 0.5), 0 .8rem 1rem rgba(0, 0, 0, 0.6), 0 0 2rem rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1.5rem 1rem -1rem rgba(0, 0, 0, 0.5), 0 .8rem 1rem rgba(0, 0, 0, 0.6), 0 0 2rem rgba(0, 0, 0, 0.1) inset; } div.ds_2 { -webkit-box-shadow: 0 1.5rem 1rem -1rem rgba(0, 0, 0, 0.7), 0 .1rem .4rem rgba(0, 0, 0, 0.5), 0 0 4rem rgba(0, 0, 0, 0.05) inset; -moz-box-shadow: 0 1.5rem 1rem -1rem rgba(0, 0, 0, 0.7), 0 .1rem .4rem rgba(0, 0, 0, 0.5), 0 0 4rem rgba(0, 0, 0, 0.05) inset; box-shadow: 0 1.5rem 1rem -1rem rgba(0, 0, 0, 0.7), 0 .1rem .4rem rgba(0, 0, 0, 0.5), 0 0 4rem rgba(0, 0, 0, 0.05) inset; }