/* Pheno 24 style overrides */

/* page layout */
body {background-image: linear-gradient(to top right, #eceff2, #fcfaf6, #f8f5ee);}
#ph-main-layout {max-width: 1200px; margin: 0 auto; padding-top: 42px;}
#topbar {border-bottom: 1px solid #c7c7c7; box-shadow: 0 1px 5px #eee; }
#text-column {background-color: white !important; padding-bottom: 48px; border-right: 1px solid #dfe0ec !important; }
#site-banner { background-image: linear-gradient(to top right, #f3eee3, #f8f5ee, #f7fafe, #fcfaf6); margin-left: -16px; margin-right: -16px; margin-top: -28px; padding-bottom: 16px;}
#banner-image {display: block; width: 45%; height: 400px; width: auto; margin-left: auto; margin-right: auto; margin-top: 30px; }
.ph-banner {text-shadow: 1px 3px 7px #bbb;}


/* text */
body,button,.w3-bar,h4,h5,h6 {font-family: 'Assistant' !important; color:#211;}
body,button,.w3-bar {font-size:18px !important; font-weight: 450; line-height:1.5;}
h1,h2,h3 {font-family: 'Fraunces' !important; color: #65403b; line-height:1.2;}
h4 {font-weight: 700; color: #454768; line-height:1.5;}
h5 {font-weight: 650; color: #454768; line-height:1.5;}
strong {font-weight: 700; }
dt {font-weight: 700;}
.w3-jumbo {font-size: 3.2em !important}


/* nav & topnav */
#ph-leftnav {border-left: 1px solid #ddd !important; border-bottom: 1px solid #c7c7c7 !important; box-shadow: 0 1px 5px #eee;}
.ph-nav1 {background: #f3eee3 !important; border-top: 1px solid white !important; color: #43437a; font-weight: 700;}
.ph-nav1a {background: #f3eee3 !important; border-top: 1px solid white !important; color: #43437a; font-weight: 700; }
.ph-nav2 {padding-left: 32px !important; background: #f7f8fb !important; border-top: 1px solid !important; border-color: white !important; color: #43437a;}
.ph-navcurrent {background-color: white !important; font-weight: bold !important; color: #fd5849 !important;}
#ph-leftnav a.w3-button:hover {background-color: #fd6d5f !important; color: white !important;}
#ph-leftnav button:hover {background-color: #fd6d5f !important; color: white !important;}
#ph-leftnav a.w3-button:active {background-color: #ff6633 !important; color: white !important;}

#topbar a, #topbar button {color: #43437a !important; font-weight: 700;}
#topbar a:hover, #topbar button:hover {background-color: #fd6d5f !important; color: #fff !important; font-weight: 750;}
#nav-close {background-color: #fd6d5f !important; font-weight: 750;}
#nav-close:hover {background-color: #fd6d5f !important; color: white !important;}
#nav-close:active {background-color: #ff6633 !important;}


/* text effects & paragraph block stuff */
#text-column a:link {color: #676ee9; text-decoration: none; border-bottom: 2px dotted #676ee9; }
#text-column a:visited {color: #287f7f;}
#text-column a:hover {color: #363fe2; text-decoration: none; border-bottom: 2px solid #676ee9; background-color: #e9eafc;}
#text-column a:active {color: #fd6d5f; text-decoration: none; border-bottom: 2px solid #fd6d5f; background-color: #f9ebe8;}

.ph-teaser {margin: 0 -16px; padding: 32px; background-image: linear-gradient(to bottom right, #f8f5ee, #eceef8); border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;}
.ph-onthispage {margin: 0 -16px 16px -16px; padding: 32px; background-image: linear-gradient(to bottom right, #f8f5ee, #eceef8); border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;}

article {padding: 16px; }

article.blurb {padding: 16px; margin: 16px 0; background-image: linear-gradient(to bottom right, #f8f5ee, #eceef8); border: 1px solid #e2e2e2; }

article.news {padding: 16px; margin: 16px 0; background-color: #f8f5ee; border: 1px solid #e2e2e2; }

article ul li {padding:8px 12px;}
article ol li {padding:8px 12px;}
article p.top {text-align: right !important;}
article h2 {margin-top: 0;}
article.blurb h2 {margin-top: 30px;}
article h3 {margin-top: 36px;}
article a {font-weight: 600;}

article a.w3-button, article a.w3-button:visited, article a.w3-btn, article a.w3-btn:visited  {border: none !important; color: #333 !important; box-shadow: 0px 2px 3px 2px #ccc;}
article a.w3-button:hover, article a.w3-btn:hover {color: black !important;}

h3.anchor, h4.anchor {padding-top: 30px;}


hr {border: 1px dotted #ddd; width: 85%; margin: 36px auto;}

.blurb-image {border: 1px solid #999; float: right; margin: 20px; width: 200px; max-width: 33%; box-shadow: 1px 5px 7px #bbb; background-color: #777;}



table.ratings {background: white; border-collapse: collapse; width: 100%; margin-top: 16px;}
table.ratings td, table.ratings th { margin: 0; padding: 6px; vertical-align: top; text-align: left; }
table.ratings td {border: 1px solid #ddd;}
table.ratings th {border: 1px solid #f7f7f7; background-color: #dfe0ec; color: !important;}
table.ratings td:first-child {width: 25%;}
table.ratings td:last-child {width: 75%;}
table.ratings caption { display: none;}


.ph-schedule-table {background-color: #f9f4f3;}
.ph-schedule-day {background-color: #e8e0d3; color: #43437a; font-weight: 700; padding: 8px; border: 1px solid #fff ; border-width: 1px 1px 0px 1px;  }
.ph-break {background-color: #f8f5ee !important; color: #382e1a !important; padding: 8px 16px; font-style: italic; border: 1px solid #e2e2e2 ; border-width: 1px 1px 0px 1px;}
td.no-session {}
.ph-session {background-color: white !important; color: #011 !important; padding: 0 x8px; border: 1px solid #e2e2e2 ; border-width: 1px 1px 0px 1px;}
.ph-session { background-color: #f7fafe !important;}
.ph-no-session { background-color: #fcf3f1 !important;}
.ph-org-session {background-color: #eceef8 !important;}
.ph-session:last-child {border-width: 1px;}
.ph-session p, .ph-break {font-size: 16px;}
.ph-italic {font-style: italic;}
.ph-bold {font-weight: bold;}
.ph-cancelled {text-decoration: line-through !important; color: #888 !important;}

.alert, ph-alert {padding: 0 16px !important; border: 1px solid #fd6d5f !important; border-radius: 6px; background-color: #f9ebe8 !important;}

.info, ph-info {padding: 0 16px !important; border: 1px solid #d3c8b3 !important; border-radius: 6px; background-color: #f9edd8 !important;}
.info h2, .info h3 {margin-top: 20px; }


/*tba marks text that needs to be reconfirmed each year. When a tba span is confirmed, change the style to tbb. Then next year, global search/replace tbb back to tba. */
.tba {color: #080 !important; background-color: #ff7; font-weight: 600;}
.tbb {} 

ul.ph-archive, ul.ph-archive li {margin: 0 !important; padding: 0 0 4px 0 !important;}

/* footer */
footer {border-top: 1px solid #ddd;}
footer p {color: #696b9c !important;}


/* hidden except for screenreaders */
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}


/* colours */
.ph-dark-pearl {background-image: linear-gradient(to right, #dfe0ec, #f3eee3, #f3eee3, #f9ebe8); }

.ph-teal {background-color: #126969 !important; font-color: #white;}
.ph-dark-purple {background-color: #4b2580 !important; font-color: #white;}

.ph-purple-to-dark {background-image: linear-gradient(to right,#4b2580,#000);}
.ph-acid-wash {background-image: linear-gradient(to bottom,#d3f534,#bddb29);}
.ph-really-red {color: #e6004c !important;}




/* Colour palette generator - Huetone WCAG 3

https://huetone.ardov.me/?palette=N4IgdghgtgpiBcIAKALGYD2AmALCANCCgK4wDOCA2qJLAiAMIAEGAThADYEgDGGHbCvEogAxADMY4gJziAHNwk9xAZnEBGRTJgAjGAsKjdAExjGeimCp3idELSoBs0gKw7FxgAwB2GN7yG0o6Oni7Sio646ioWhmpYclguIAC6AL74NNBwiAAqTBDEAA5whHwCrEIiSuIQ4o5acuIuMKViqq1WlnIwnsYqHjg8LhD2hjyechOeijoqTTjeinLBPNaKLnI4iWNi81gw6vbpmeDZ9ACCTACOxLvlglTtjra2Wur19Zbx4lgejjAWgExBApjAeG1RJ5PBARslDFhjBAVMjFCofH5IVhYSoXH9DOpvLjcakMlk6IgAEJMDikbgPSpPCTeWqSLRYZoySwszxcwzGaQwA7uQxzHgQQ6KHBYaSCgaGEKynixMQ4YzeMLhOKONWRRRYTwqdQ4GYnck5ZBMYisIocNoMqrtOp1FUSHCc3ZGCFSAxiYySTzgxQ8IYA%2BViOTSOR1cOiKZNYz4sTORw6aSunAqTPeT1YHiIk2klKEAAuGDA5Ce6hmhC1IF9S0IDUI8JArfDSc06SAA
*/