/* basics */

body { margin:0; padding:0; background:#837560; color:#70695A; font-family: verdana, arial, sans-serif; }

a { color:#70695A; }

/* wrap */

.wrap { width:100%; max-width:1024px; margin:32px auto; color: #70695A; box-shadow: 0px 2px 8px 8px rgba(0,0,0,0.63); }

/* socials (black bar above banner) */

.socials { display:flex; flex-direction:row; justify-content:end; background:url("menu.png"); background-repeat:repeat-x; background-size:auto 100%; padding:8px 8px 12px 8px; }
.socials ul { margin:0; padding:0; display:flex; flex-direction:row; }
.socials li { list-style-type:none; padding-right:0.5rem; margin-right:0.5rem; border-right:solid 1px #DBD7D1; }
.socials li:last-child { padding:0; margin:0; border:0; }
.socials a { color:#DBD7D1; }

/* nanner */

.banner { display:flex; flex-direction:row; align-items:center; background:url(logo.jpg); background-size:100% 100%; color:#FFFFFF; }
.banner-left-col { flex:1; padding:16px; }
.banner-right-col { padding:16px; }
.burger-button { display:inline-block; border:0; width:32px; height:32px; background-image:url("burger.png"); background-repeat:no-repeat; background-position:center; background-color:transparent; background-size:100%; color:transparent; text-decoration:none; cursor:pointer; }
header { font-size:1.5rem; font-weight:bold; }
.site-slogan { font-size:1.2rem; font-style:italic; }

/* menu */

.menu { background-image:url("menu.png"); background-repeat:repeat-x; background-size:auto 100%; padding:8px 8px 12px 8px; }
.menu ul { margin:0; padding:0; display:block; }
.menu li { display:inline-block; margin-left:16px; margin-right:16px; }
.menu li:first-child { margin:0; }
.menu li:last-child { margin:0; }
.menu a { color:#DBD7D1; display:inline-block; }
.menu a:active { background-image:url("menu_hover.png"); color: #70695A; }
.menu a:hover { background-image:url("menu_hover.png"); color: #70695A; }

/* main cols */

.main { display:flex; flex-direction:row; }
.main-left-col { flex:1; background:white; padding:1rem; box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4); }
.main-right-col { width:300px; background-color:#595959;  padding:2rem 0 0 0; }

/* === breadcrumb === */

.breadcrumb { margin-bottom:1rem; }

/* === side content === */

.side-section-heading { display:block; background-image:url(sbi_header.png); background-size:auto 100%; background-repeat:repeat-x; padding:0.5rem; color:#70695A; font-weight:bold; font-size:0.9rem; }
.side-section-content { font-size:0.8rem; padding:1rem; color:#DBD7D1; }
.side-section-content a { color:#DBD7D1; }

/* footer */

.footer { background:url("menu.png"); background-repeat:repeat-x; background-size:auto 100%; padding:0.5rem; text-align:center; color:#DBD7D1; }
.footer-section { margin-bottom:8px; }
.footer-section:last-child { margin-bottom:0; }
.footer a { color:#DBD7D1; }

/* Mobile Overlay */

.mobile-overlay { display:none; }

/* *** MOBILE MODE *** */

.mobile-mode .mobile-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgb(0,0,0,0.1); padding:2rem; }
.mobile-mode .mobile-overlay-on { display:block !important; }
.mobile-mode .mobile-overlay-off { display:none; }
.mobile-mode .mobile-panel { display:flex; flex-direction:column; width:100%; height:100%; background-color:#595959; border-radius:1rem; padding:1rem; }
.mobile-mode .mobile-overlay-close-button-container { text-align:center; margin-bottom:1rem; }
.mobile-mode .mobile-overlay-close-button { border:solid 1px grey; padding:0.5rem; border-radius:0.25rem; font-weight:bold; cursor:pointer; }
.mobile-mode .mobile-overlay-content { flex:1; overflow-y:auto; }

.mobile-mode .menu { display:none; }

.mobile-mode .banner-right-col { display:inline-block; padding:1rem; padding-left:0; }

.mobile-mode .main-right-col { display:none; }

.mobile-mode nav ul { display:block; padding:0; }
.mobile-mode nav li { display:block; margin-bottom:0.5rem; }
.mobile-mode nav li a { display:block; padding:0.5rem; background-image:url(link.png); background-size:100% 100%; }

/* === page content styles === */

/* h1 - h6 */

.page-content h1 { padding:0; margin:0; margin-bottom:1rem; display:block; color: #CE7014; font-size:1.5rem; border-bottom:solid 1px #CAAE90; border-top:solid 1px #CAAE90; }
.page-content h1:last-child { margin-bottom:0; }

.page-content h2  { padding:0; margin:0; margin-bottom:1rem; font-size:1.25rem; color:#CE7014; border-bottom:solid 1px #CAAE90; }
.page-content h2:last-child { margin-bottom:0; }

.page-content h3 { padding:0; margin:0; margin-bottom:1rem; font-size:1.115rem; color:#CE7014; border-bottom:solid 1px #CAAE90; }
.page-content h3:last-child { margin-bottom:0; }

.page-content h4 { padding:0; margin:0; margin-bottom:1rem; font-size:1.07rem; color:#CE7014; border-bottom:solid 1px #CAAE90; }
.page-content h4:last-child { margin-bottom:0; }

.page-content h5 { padding:0; margin:0; margin-bottom:1rem; font-size:1.03rem; color:#CE7014; border-bottom:solid 1px #CAAE90; }
.page-content h5:last-child { margin-bottom:0; }

.page-content h6 { padding:0; margin:0; margin-bottom:1rem; font-size:1.01rem; color:#CE7014; border-bottom:solid 1px #CAAE90; }
.page-content h6:last-child { margin-bottom:0; }

/* paragraph */

.page-content p { padding:0; margin:0; margin-bottom:1rem; }
.page-content p:last-child { margin-bottom:0; }

/* tables + cells */

.page-content table { border-collapse:collapse; border:solid 1px #CAAE90; padding:0; margin:0; margin-bottom:1rem; }
.page-content table:last-child { margin-bottom:0; }
.page-content th { border:solid 1px #CAAE90; padding:0.25rem; }
.page-content td { border:solid 1px #CAAE90; padding:0.25rem; }

/* unordered list */

.page-content ul { padding:0; margin:0; margin-bottom:1rem;margin-left:20px; }
.page-content ul:last-child { margin-bottom:0; }

/* ordered list */

.page-content ol { padding:0; margin:0; margin-bottom:1rem; margin-left:25px; }
.page-content ol:last-child { margin-bottom:0; }

/* forms */

.page-content input[type=text] { border:solid 1px grey; width:10rem; max-width:100%; padding:0.25rem; outline:0; color:#70695A; font-family: verdana, arial, sans-serif; }
.page-content input[type=email] { border:solid 1px grey; width:10rem; max-width:100%; padding:0.25rem; outline:0; color:#70695A; font-family: verdana, arial, sans-serif; }
.page-content textarea { display:block; width:100%; border:solid 1px grey; outline:0; min-height:5rem; padding:0.5rem; color:#70695A; font-family: verdana, arial, sans-serif; }
.page-content input[type=submit] { border:solid 1px grey; background:rgb(255,255,255); padding:0.4rem; color:#70695A; font-family: verdana, arial, sans-serif; cursor:pointer; outline:0; }
.page-content input[type=button] { border:solid 1px grey; background:rgb(255,255,255); padding:0.4rem; color:#70695A; font-family: verdana, arial, sans-serif; cursor:pointer; outline:0; }
.page-content img { max-width:100%; vertical-align:top; }

/* === theme help! === */

.theme_help { color:rgb(0,0,0); display:inline-block; background-color:rgb(197,255,147); padding:2px 16px; margin-bottom:1rem; }