/* WOLFRAMSCIENCE STYLES

   developer:   rmiske, everyone else over the years
   requires:    /common/framework/css/framework.css
   ========================================================================== */

/* ==========================================================================
   SETUP
   ========================================================================== */
:root {
    --footer-height: 3.5rem;
    --wrapper-h-pad: 3.125rem;
    --hdr-v-pad: 1.4375rem;
    --hdr-logo-h: 36px;
    --hdr-logo-w: 420px;
    --sm-hdr-logo-h: 20px;
    --sm-hdr-logo-w: 225px;
    --thin-hdr-h: 42px;
}


/*framework and related overrides*/
html { border: none !important; }
p { margin: 1rem 0; }
ul:not(#nav), ol { margin-left: 0.125rem; }
ul:not(#nav) li {
    display: list-item;
    list-style: square;
    margin-left: 1.25rem;
}
ol li {
    display: list-item;
    list-style: decimal;
    margin-left: 2rem;
    padding-left: 0.5rem;
}
ol[type=A] li { list-style: upper-alpha; }



/* ==========================================================================
   2022 HEADERS/FOOTERS
   ========================================================================== */
/*setup*/
#all-encompassing { 
    min-height: calc(100vh - var(--footer-height));
    padding-bottom: 3.125rem;
}
#homepage #all-encompassing { padding-bottom: 0; }
#all-encompassing section, #all-encompassing header { 
    width: 100%; 
    padding-left: var(--wrapper-h-pad);
    padding-right: var(--wrapper-h-pad);
}
#all-encompassing section .inner, #all-encompassing header .inner {
    margin: 0 auto;
    max-width: 940px;
    width: 100%;
}


/*header*/
#ws-header {
    background: #fff;
    border-bottom: 1px solid #ccc;
    padding-bottom: var(--hdr-v-pad);
    padding-top: 3.3125rem;
    z-index: 9998;
    position: relative;
}
#homepage #ws-header { border: none; }
#ws-header .inner { max-width: none !important; }
.nav {
    position: relative;
    z-index: 9999;
    align-items: end;
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: var(--hdr-logo-w) 1fr;
}

/* Menu overlay */

#ws-header + #menu-overlay {
  display: none;
  background: rgba(0, 0, 0, .3);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9997;
}

#ws-header.menu-opened + #menu-overlay {
  display: block;
}

/*logo*/
a#nav-logo { display: inline-flex; }
a#nav-logo img { 
    height: var(--hdr-logo-h);
    margin-bottom: 2px;
    width: var(--hdr-logo-w); 
}


/*desktop*/
.nav ul {
    display: inline-block;
    justify-self: end;
    line-height: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}
.nav li { 
    display: inline-block; 
    position: relative; 
    /**/
    background: none;
    padding-left: 0;
    margin-bottom: 0;
}
.nav li a { 
    display: block;
    color: #777;
    padding: 0rem 1rem;
    position: relative;
    letter-spacing: 0.025rem;
    text-transform: uppercase;
}
.nav li:last-child a { padding-right: 0; }
.nav .has-subnav { user-select: none; }
.nav .has-subnav a {
    display: inline-block;
    padding-right: 0;
}
.nav .nav-arrow {
    background: url('/start/img/nav-arrow.png') no-repeat 0 0;
    background-size: 20px;
    border: solid #fff;
    border-width: 4px 8px;
    box-sizing: content-box;
    width: 10px;
    height: 7px;
    left: -2px;
    outline: none;
    vertical-align: middle;
    position: relative;
}
.nav .show-apply .nav-arrow,
.nav .has-subnav:hover .nav-arrow {
    background-position: -10px 0;
    border-color: #fff; 
}


/*subnav*/
.nav .dropdown {
    background: #f2f2f2;
    display: none;
    left: 1rem;
    position: absolute;
    z-index: 20;
}
.nav li:last-child .dropdown { left: unset; right: 0; }
.nav .dropdown li {
    display: block;
    text-align: left;
}
.nav .dropdown a {
    padding: 0.75rem 1.125rem; 
    line-height: 1.2;
    text-transform: none;
    white-space: nowrap;
    width: 100%;
}
.nav .menu { display: none; }


/*hovers*/
.nav ul ul li:hover { background: #ddd; }
.nav ul li a:hover,
#books #nav-books > a, 
#resources #nav-resources > a,
#student-index #nav-resources > a,
#student-index #nav-student > a,
#spreadsheet-index #nav-spreadsheet > a { 
    color: #c74400;
}


/*thin header*/
.thin-header #ws-header {
    height: var(--thin-hdr-h);
    padding-top: 8px;
    padding-bottom: 7px;
}
.thin-header .nav { grid-template-columns: var(--sm-hdr-logo-w) 1fr; }
.thin-header .nav li a { font-size: 0.9rem; }
.thin-header a#nav-logo img { 
    height: var(--sm-hdr-logo-h); 
    margin: 0;
    position: relative;
    top: 2px;
    width: var(--sm-hdr-logo-w); 
}


/*fixed header*/
html.fixed-header { border-top: var(--thin-hdr-h) solid #fff; }
.fixed-header #ws-header {
    height: var(--thin-hdr-h);
    position: fixed;
    top: 0;
    width: 100%; 
}


/*footer*/
footer#footer {
    color: #8e8e8e;
    font-size: 0.875rem;
    height: var(--footer-height);
    line-height: var(--footer-height);
    text-align: center;
}
#footer a { color: #8e8e8e; }
#footer a:hover { color: #ef531e; }



/* ==========================================================================
   CLEAN UP THE OLD
   ========================================================================== */
/*general*/
td#side-col { display:none; }
td#main-col table { border-collapse: collapse; }
td#main-col > table {
    margin:auto;
    max-width: 1000px;
    width:100%;
}
td#main-col > table table { width:100%; }
td#main-col > table > tbody > tr > td { padding: 0 2rem; }


/*mainly conference*/
#main-col table[cellpadding="10"] td { padding: 10px; }
.old-sidebar, .old-sidebar * { line-height: 1; } 
.old-sidebar td[bgcolor="#fdd368"] { background: #fff; }
.old-sidebar td[bgcolor="#fdf8e9"] { border: 1px solid #fdd368; padding-top: 3px; }
.old-sidebar img[src="/images2003/box_top.gif"], .old-sidebar img[src="/images2003/box_bottom.gif"] { display: none; }
#main-col img[src*="grayline.gif"] { height: 1px !important; width: 100%; }

.conference-06-home { background-image: url(/conference/2006/images/nks2006-bg.jpg); background-repeat: no-repeat; }
.conference-06-sub { background:#ffffff url(/conference/2006/images/nks2006subbg.gif) no-repeat center 40px; }
.conference-07-sub { background:#ffffff url(/conference/2007/images/nks2007subbg.gif) no-repeat center 65px; }


/*nks image pages*/
#nks-images-table td {
    border-top: 1px solid #808080; 
    padding: 5px 0;
}
.nks-images-wrapper > div {
    border-top: 1px solid #808080;
    display: grid;
    grid-template-columns: 1fr 280px;
    grid-gap: 1rem;
    margin: 1rem 0 0;
    padding: 0.5rem 0;
}
.nks-images-wrapper .img { text-align: right; }
.nks-images-wrapper .img img { height: auto; max-width: 100%; }
.nks-images-wrapper .image-nav a { font-weight: 600; white-space: nowrap; }
.nks-images-wrapper .image-nav > *:not(:last-child):after { content: ' -'; }
.nks-images-wrapper h3 { padding-top: 1rem; }
.nks-images-wrapper .txt > h3 { padding-top: 0; }
.nks-images-wrapper > div p { margin-top: 0; }
.nks-images-wrapper p.divider:before {
    border-top: 1px solid #aaa;
    content: '';
    display: table;
    margin-bottom: 0.75rem;
    width: 10rem;
}

/*.back-cover-nav { width: 300px; overflow: hidden; }*/
.back-cover-nav > div { 
    display: flex;
    align-items: center;
    font-weight: 600; 
    line-height: 1.2;
}
.back-cover-nav > div > a { 
    border-left: 1px solid #808080; 
    margin-left: 0.5rem;
    padding-left: 0.5rem;
}
.back-cover-nav > div > * { white-space: nowrap; }
.back-cover-nav.bottom { width: 100%; }
.back-cover-nav.bottom div { justify-content: end; }

#images-nav { 
    display: flex; 
    padding: 1rem 0;
}
#images-nav a { 
    background: #d7d7d7; 
    border-radius: 0.5rem;
    color: #5c5c5c;
    font-size: 1.125rem;
    line-height: 1;
    margin-right: 1rem;
    padding: 0.375rem 1rem;
}
#images-nav a:hover { background: #ffe5a2; }
#images-basic #images-nav a#nav-basic,
#images-color #images-nav a#nav-color,
#images-jacket #images-nav a#nav-jacket,
#images-jacket #images-nav a#nav-nav-gallery-art{
    background: #ffd15b; 
    color: #191919;
}


/*preview*/
#preview h3 { margin: 1rem 0; }
.preview-table { 
    background: url('/preview/bgimage.jpg') no-repeat; 
    width: 499px !important;
}
.preview-table table td {
    font-size: 0;
    height: 354px;
    line-height: 1;
    padding: 12px 0 36px;
    vertical-align: top; 
}
.preview-table table td:nth-child(even) { padding-top: 24px; }
.preview-table a img { margin: 3px; border: 1px solid; }


@media (max-width: 600px) {
    .preview-table { 
        background-position: -45px top;
        background-size: 405px;
        width: 310px !important;
    }
    .preview-table table td { padding-bottom: 0; height: 260px }
    .preview-table table td:first-child { display: none;} 
    .preview-table table td:last-child img { width: 10px; }
    .preview-table a img { height: 67px; width: 54px; }
}


/*misc*/
h1.rsrc {
    font-family: 'Source Sans Pro', sans-serif;
    margin-bottom: 0;
    color: #555;
    font-size: 40px;
    font-weight: 300;
    /*margin-left: 27px;*/
    text-transform: uppercase;
}
h3.rsrc {
    font-family: 'Source Sans Pro', sans-serif;
    margin-bottom: 0;
    color: #555;
    font-size: 24px;
    font-weight: 300;
    /*margin-left: 27px;*/
    margin: 1.75rem 0 0.5rem;
}
.grid a {
    color: #bb4908;
    font-weight: 600;
    text-decoration: none;
}
.grid a:hover {
    color: #960b1c;
}
.grid p {
    color: #555;
    font-size: 16px;
    font-weight: 400;
    font-family: inherit;
    padding: 0 27px 20px 0;
    margin: 0;
}




/* ==========================================================================
   ANCIENT STUFF
   ========================================================================== */
a {
    color: #bb4908;
    outline: none; 
    text-decoration: none;
}
a:hover { color: #960b1c }
body, .bodytext, table, th, tr, td {
    font-family: 'Source Sans Pro', Arial, sans-serif; 
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}
body { padding: 0px; background: #ffffff; }


/* specific backgrounds for different sub-pages */
body.TheBook { background: #ffffff url(/images2003/thebookbg.gif) repeat-x }
body.News { background: #ffffff url(/news/images/newsbg.jpg) no-repeat }
body.Summerschool { background: #ffffff url(/summerschool/images/background.gif) no-repeat }
body.SummerschoolFP { background: #ffffff url(/summerschool/images/frontpage-photo.jpg) no-repeat }
body.SummerschoolApp { background: #ffffff url(/summerschool/images/background-yellow.gif) no-repeat }


/*text styles*/
.leaded { font-size: 16px; line-height: 150%; }
.smalltext { font-size: 13px; }
.smallleaded { font-size: 13px; line-height: 150%; }
.largetext { font-size: 18px; }
.largeleaded { font-size: 18px; line-height: 150%; }
.quote { font-size: 18px; font-style: italic; line-height: 14px; }
.smallquote {
    font-size: small;
    font-style: italic;
    line-height: 14px;
    font-weight: 900;
    color: #666666;
}
h1, h2, .inlineH1, .inlineH2 {
    font-family: 'Source Sans Pro', Arial, sans-serif; 
    letter-spacing: .1em;
    font-size: 28px;
    font-weight: normal
}
h3, .inlineH3 {
    color: #795438; 
    font-size: 18px;
    font-weight: bold;
}
h4 { font-size: 16px; font-weight: bold; }
li { font-size: 16px; }
blockquote { font-size: 14px; margin: 0 2.5rem; }
input, textarea { color: #666666; font-size: 14px; }
select { font-size: 14px; }
tt  { font-family: Courier; font-size: 16px; }
.smalltt { font-family: Courier; font-size: 13px; }
.largett { font-family: Courier; font-size: 18px; }
code { font-family: Courier; font-size: 16px; }
.copyright { font-size: 14px; color: #666666 }
.NKSIndexAlpha { font-size: 16px; color: #AE152B; text-decoration: none; }
.NKSIndexEntries { font-size: 18px; color: #333333; }



/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */
@media (max-width: 1200px) { 
    /*SETUP*/
    :root {
        --wrapper-h-pad: 20px;
        --hdr-logo-h: 29px;
        --hdr-logo-w: 340px;
    }


    /*header/nav*/
    .nav li a { font-size: 0.9rem; padding: 0rem 0.6rem; }
}


@media (max-width: 900px) {
    /*SETUP*/
    :root {
        --hdr-logo-h: 28px;
        --hdr-logo-w: 320px;
    }


    /*2022 HEADERS/FOOTERS*/
    #ws-header { padding-top: var(--hdr-v-pad); }
    a#nav-logo img { margin: 0; }
    .nav { align-items: center; }
    .nav ul { 
        background: #777;
        display: none;
        grid-column: 1 / span 2;
        width: calc(100% + 2 * var(--wrapper-h-pad));
        margin: 0 calc(-1 * var(--wrapper-h-pad));
        padding: 5px 0;
        position: absolute;
        top: calc(var(--hdr-logo-h) + var(--hdr-v-pad));
        z-index: 9999;
    }
    .nav li a { color: #fff; font-size: 15px; }
    .nav .menu {
        background: transparent;
        border: 0;
        border-top: 12px double #999;
        cursor: pointer;
        display: inline-block;
        height: 20px;
        justify-self: end;
        outline: none;
        position: relative;
        right: 0;
        width: 20px;
    }
    .nav .menu:after {
        content: '';
        width: 20px;
        height: 4px;
        background: #999;
        display: block;
        position: absolute;
        left: 0;
    }
    .nav .menu:hover { border-color: #bfbfbf; }
    .nav .menu:hover:after { background: #bfbfbf; }
    .nav li { display: block; }
    .nav ul li a { color: #fff !important; padding: 9px var(--wrapper-h-pad) !important; }
    .nav .has-subnav:hover .nav-arrow { border-color: #8c8c8c; }
    .nav .dropdown {
        background: #999;
        position: relative;
        text-indent: 8px;
        top: 0;
    }
    .nav ul li:hover,
    #books #nav-books, 
    #resources #nav-resources,
    #student-index #nav-resources { 
        background: #8c8c8c;
    }
    #student-index #nav-student,
    #spreadsheet-index #nav-spreadsheet { 
        background: #bbb;
    }
    .thin-header .nav ul { top: 34px; }
    .thin-header .nav .menu { top: 2px; }


    /*CLEAN UP THE OLD*/
    #main-col td[width="40"], #main-col td[width="40"] + td[width="179"] { display: none; }
    table:not('#nks-images-table') img:not([src*="spacer"]) { height: initial; max-width: 100%; }
    .msichicago img { height: auto; max-width: 100%; }
    .conference-06-sub, .conference-07-sub { background-size: 600px; background-position: center 40px; }
    .nks-images-wrapper > div { grid-template-columns: 1fr 200px; }
}


@media (max-width: 600px) {
    /*SETUP*/
    :root {
        --hdr-logo-h: 22px;
        --hdr-logo-w: 225px;
    }


    /*CLEAN UP THE OLD*/
    #main-col img[alt="NKS 2007 Wolfram Science Conference"] { margin-left: 0 !important; }
    .conference-06-sub, .conference-07-sub { background-size: initial; background-position: left 0px; }
    .nks-images-wrapper > div { grid-template-columns: 1fr; }
    .nks-images-wrapper .img { text-align: left; }
    .back-cover-nav > div { display: block; }  
    .back-cover-nav > div > div { padding-bottom: 5px; }
    .back-cover-nav > div > a:first-of-type { border: none; margin: 0; padding: 0; }

	#images-nav {
		display: grid;
		padding: 1rem 0;
		grid-template-columns: 50% 50%;
		align-items: center;
	}
	#images-nav a {
		margin-bottom:8px;
		font-size:.95rem;
	}    
}


@media (max-width: 320px) {}
