﻿/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline }
body { line-height: 1 }
ol, ul { list-style: none }
blockquote, q { quotes: none }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none }
table { border-collapse: collapse; border-spacing: 0 }


/*
Grid: 960px wide
      10 | 300 | 20 | 300 | 20 | 300 | 10
*/

/* General Styles */
body                        { max-width: 960px; min-width: 300px; margin: 0 auto; background-color: #D9D6DB }

body,
button                      { font-family: Arial, Helvetica, sans-serif }

.hide                       { display: none }

.sideitem                   { float: right; margin-top: .5em }
.pdf                        { padding: 4px 0 0 24px; background: url("../images/pdfdoc.png") center left no-repeat; background-size: 20px }

.striped                    { margin-bottom: .5em }
.striped tr:nth-child(even) td  { background-color: #eee }
.content .striped td        { padding: .3em }
.content .striped p         { margin: 0 }


/* Main Page Body */
.overall                    {  }

.overall b,
.overall strong             { font-weight: bold }

.overall i,
.overall em,
.overall cite               { font-style: italic }


/* Header */
.header                     { background: url("../images/sheilapantry.gif") no-repeat #F70000 8px 10px; width: 100%; height: 50px }

.heading                    { display: none }

.skip                       { padding: 2px 10px 0 0; text-align: right; font-weight: bold; line-height: normal }

.skip a:link,
.skip a:visited             { color: #F70000; text-decoration: none }

.skip a:focus,
.skip a:active,
.skip a:hover,
.skip a:focus-visible       { outline: 2px solid white; outline-offset: 2px; color: white }

.header .banner             { padding: 0 5px; text-align: right }


/* Navigation */
.navigation                 { padding-top: 5px; line-height: normal; font-size: 110%; font-weight: bold; background-color: #EEEAF2;
                              border-top: 1px #aaa solid; border-bottom: 1px #aaa solid }

.navigation .menu           { display: none }

.navigation ol              { padding: 5px 0 }
.navigation li              { display: inline }
.navigation a               { margin-left: 10px; padding: 5px 10px; color: #00007F; background-color: #EEEAF2; text-decoration: none;
                              border-top-left-radius: 3px; border-top-right-radius: 3px }
.navigation a:focus,
.navigation a:active,
.navigation a:hover,
.navigation a.current       { color: white; background-color: #00007F; border-bottom: 1px solid #00007F }

.navigation a:focus-visible { outline: 2px solid #F70000; outline-offset: 0 }


/* Footer */
.footer                     { margin-top: 20px; padding: 12px 10px; background-color: #333; color: white }


/* Page Content */
.content                    { line-height: 1.5; min-height: 500px; padding: 15px 10px 10px 10px; background-color: white }

.content .title             { font-size: 200%; margin-top: 0; margin-bottom: .5em; color: #F70000 }

.content h1,
.content h2,
.content h3                 { color: #00007F; font-weight: bold }

.content h1                 { font-size: 150%; margin-top: 0; margin-bottom: .7em }
.content h2                 { font-size: 130%; margin-top: 2em; margin-bottom: .3em }
.content h3                 { font-size: 110%; margin-top: 1em; margin-bottom: .3em }

.content ol,
.content ul,
.content dl,
.content p                  { margin-bottom: 1em }

.content p.meta             { line-height: 1.5 }

.content blockquote         { margin: 1em 1.5em }

.content ol                 { list-style: decimal; padding-left: 35px }
.content ul                 { list-style: disc; padding-left: 35px }
.content li                 { margin-bottom: .3em }
.content .disperse li       { margin-bottom: .8em }

.content li ol,
.content li ul              { margin-top: .3em }
.content li li              { list-style-type: square }

.content dt                 { margin-top: 1em; font-weight: bold }
.content dd                 { margin: 0 0 0 35px }

.content .highlight         { color: #F70000 }

.content caption            { text-align: left; margin-bottom: .3em }
.content th,
.content td                 { padding: .1em 1em .1em 0 }
.content th                 { text-align: left }

.content a                  { color: #00007F }
.content a:visited          { color: #444 }


/* Blocks */
.content .block dt          { margin-top: 2em; margin-bottom: .3em; font-size: 110%; border-top: 1px black dotted; padding-top: .3em }
.content .block dt:first-child { margin-top: 1.5em }
.content .block dt a        { text-decoration: none; color: #444; padding: 3px; margin-left: -3px}
.content .block dt a:focus,
.content .block dt a:active,
.content .block dt a:hover  { background-color: #e0e0e0 }
.content .block dd          { margin-left: 0 }
.content .block dd p        { margin-bottom: .3em }

.content .main .block dt    {  margin-top: 1em }
.content .main .block dt:first-child { margin-top: 0 }


/* Columns */
.columns                    { width: 100%; display: table; border-collapse: collapse }

.main,
.panel                      { display: table-cell; vertical-align: top; /* border: 1px black solid */ }

.main                       { padding-right: 20px }

.panel                      { width: 300px }
.panel .section             { margin-bottom: 2em; padding: .7em 10px 0 10px; border: 1px #aaa solid; border-radius: 3px }

.content .panel .section h2 { margin-top: 1.5em }
.content .panel .section h2:first-child { margin-top: 0 }

.panel .section a           { color: #00007F; text-decoration: none; font-weight: bold }
.panel .section a:focus,
.panel .section a:active,
.panel .section a:hover     { text-decoration: underline }

.main h2:first-child,
.panel h2:first-child       { margin-top: 0 }


/* Product pages */
.content .quote             { margin-bottom: 1em; background-color: #EEEAF2; border: 1px #aaa solid; padding: 10px;
                              border-radius: 3px }
.content .quote q           { display: block; margin-bottom: .2em; font-style: italic }
.content .quote cite        { display: block; margin-left: 2.3em; text-indent: -1.3em; font-size: 90%;
                              font-weight: bold; font-style: normal }

.content p.ifpo             { min-height: 100px }
.content p.ifpo img         { vertical-align: text-top; float: left; padding-right: 50px }


/* Books index page */
.content dd.cover,
.content dd.description,
.content dd.abstract        { display: table-cell; vertical-align: top; padding-top: .3em }

.content dd.cover           { width: 90px }
.content dd.cover a         { display: inline-block; line-height: 0 }

.content dd.description     { width: 210px; padding-right: 20px }


/* Book pages */
.content p.subtitle         { font-weight: bold }
.content p.author           { font-weight: bold }

.content .image,
.content div.description    { display: inline-block; vertical-align: top; margin-bottom: 1em }

.content .image             { margin-right: 20px }
.content div.description    {  }
.content div.description p  { margin-bottom: .4em }

.content ul.resources       { padding-left: 20px; margin-bottom: 0 }
.content ul.resources li    { margin-bottom: .7em }

.tabs ul.index              { padding-left: 1em }

.tabs ul.tabs.index         { padding: 7px 0 2px 0; margin-top: 1em; border-bottom: 1px #aaa solid }
.tabs ul.tabs li            { display: inline; font-weight: bold; margin-right: 3px }
.tabs ul.tabs li a          { text-decoration: none; padding: 6px 10px 6px 10px; color: black; background-color: #EEEAF2;
                              border: 1px #aaa solid; border-bottom-color: #aaa;
                              border-top-left-radius: 3px; border-top-right-radius: 3px }
.tabs ul.tabs li a:focus,
.tabs ul.tabs li a:active,
.tabs ul.tabs li a:hover,
.tabs ul.tabs a.active      { color: white; background-color: #00007F; border-color: #00007F }

.content div.review         { border: 1px #aaa solid; padding: 10px 10px 0 10px; margin-bottom: 2em; border-radius: 3px }
.content table.review       { border: 1px black solid; margin-bottom: 1em }
.content table.review caption { font-style: italic; font-weight: bold }
.content table.review th,
.content table.review td    { padding: 5px }

.content .afterword         { margin-top: 4em }


/* News index page */
.content .news dd p:first-child { color: #666 }


/* Links page */
.content .links h2          { margin-top: 1.2em; padding-left: 160px; padding-top: .2em; border-top: 1px #00007F dotted }
.content .links p           { margin-bottom: .5em }
.content .links b           { color: #222 }

.content .links .section,
.content .links .logo       { display: table-cell; vertical-align: top }

.content .links .logo       { width: 160px }

.content .links .logo a     { display: inline-block; line-height: 0 }

.content .banner            { margin-top: 2em; text-align: center }


/* Home page */
p.home                      { border-bottom: 2px #00007F solid; padding-bottom: .7em; font-weight: bold; color: #333 }

.main .section              { margin-bottom: 1em }

.content .main .section h2  { margin: 0; margin-bottom: .2em; padding-top: .7em; border-top: 1px #00007F dotted }
.content .main .section:first-child h2 { border: 0; padding-top: 0 }
.content .main .section h2 a { text-decoration: none; color: #00007F; padding: 2px 3px; margin: 0 -3px }
.content .main .section h2 a:focus,
.content .main .section h2 a:active,
.content .main .section h2 a:hover { background-color: #00007F; color: white }

.content .main .section a   {  }
.content .main .section p   { margin: 0 0 0 1.1em }

.content .also              { margin: 30px 0 10px 0; background-color: #EEEAF2; border: 1px #aaa solid; border-radius: 3px }
.content .also h2           { margin-top: 10px; margin-left: 10px }
.content .also .grid        { display: table }
.content .also .grid .section { display: table-cell; width: 300px; vertical-align: top; padding: 0 10px }
.content .also h3           { border-bottom: 1px #00007F dotted; margin-top: .5em }


/* Small screen devices */
@media screen and (max-width: 760px)
{
.content dd.abstract,
.content .also .grid,
.content .also .grid .section,
.columns,
.main,
.panel                      { display: block }

.sideitem                   { float: none; margin-top: 0 }

.main                       { padding-right: 0 }
.panel                      { width: auto; margin-top: 1em }

.main h2:first-child,
.panel h2:first-child       { margin-top: 2em }

.content .also .grid .section { width: auto }
.content .also h3           { margin-top: 1em }

ul.tabs                     { font-size: 90% }

.navigation                 { padding-top: 0; font-size: 100% }

.navigation .menu           { display: block; width: 100%; padding: 8px 5px 8px 5px; font-size: 120%; color: #00007F;
                              border: 0; border-bottom: 1px solid #00007F; cursor: pointer; text-align: left; font-weight: bold }
.navigation .menu:focus-visible { outline: 2px solid #0000F7; outline-offset: 0 }

.navigation ol              { padding: 0 }
.navigation ol.hidenav      { display: none }
.navigation li              { display: block; border-bottom: 1px solid #00007F }
.navigation a               { display: block; margin: 0; padding: 5px; border: 0; border-radius: 0 }

.navigation a:focus,
.navigation a:active,
.navigation a:hover,
.navigation a.current       { border-bottom-width: 0 }
}

@media screen and (max-width: 480px)
{
.header .banner p           { display: none }

.content .links h2          { margin-top: 1.5em; padding-left: 0 }
.content .links .section,
.content .links .logo       { display: block }
.content .links .logo       { width: 100% }

ul.tabs li.cilip            { display: none }
}

