/* -------------------------------------------------- 0.0 TABLE of CONTENTS -------------------------------------------------- 1.0 Page - Header 1.1 Header - Home 1.1.1 Home - Account 1.1.2 Home - Billboard 1.1.3 Home - Search 1.1.4 Home - Features 1.2 Header - Account 1.3 Header - Search 2.0 Page - Content 2.1 Content - Hero 2.1.1 Hero - Navigation 2.1.2 Hero - Billboard 2.2 Content - Navigation 2.3 Content - Blocks 3.0 Page - Footer 3.1 Footer - Promotion 3.2 Footer - Blocks 3.1 Footer - Legal --------------------------------------------------- */ /* -------------------------------------------------- 1.0 Page - Header 1.1 Header - Home 1.1.1 Home - Account 1.1.2 Home - Billboard 1.1.3 Home - Search 1.1.4 Home - Features 1.2 Header - Account 1.3 Header - Search --------------------------------------------------- */ /* 1.0 Page - Header --------------------------------------------------- */ #page-header { background-color: #fff; box-shadow: 0 0px 18px rgba(0,0,0,0.2); position: relative; z-index: 3; } /* 1.1 Header - Home --------------------------------------------------- */ #header-home {background: #261e1c url(/css/images/backgrounds/titlewave-home.png) no-repeat -840px 0;} @media (min-width: 980px) { #header-home {background-position: right 0;} } #header-home.placeholder {background: url(/css/images/backgrounds/placeholder-home.png) no-repeat -840px 0;} @media (min-width: 980px) { #header-home.placeholder {background-position: right 0;} } /* 1.1.1 Home - Account --------------------------------------------------- */ #home-account {background-color: rgba(0,0,0,0.6); border-bottom: 1px solid #808080; box-shadow: 0 0px 18px rgba(0,0,0,0.2); color: #f2f2f2; text-shadow: 0 1px 0 rgba(0,0,0,0.2);} /* 1.1.2 Home - Billboard --------------------------------------------------- */ #home-billboard {padding-top: 256px; text-shadow: 0 1px 1px rgba(0,0,0,0.4);} @media (min-width: 980px) { #home-billboard {padding-top: 36px;} } #home-billboard h3 {text-shadow: 0 1px 1px rgba(0,0,0,0.4);} /* 1.1.3 Home - Search --------------------------------------------------- */ #home-search #search-bar {background: #fff; box-shadow: 0 0px 18px rgba(0,0,0,0.2); margin-bottom: 36px; padding-left: 12px;} #home-search #search-bar-controls {padding-right: 12px;} /* 1.1.4 Home - Features --------------------------------------------------- */ #home-features {background-color: rgba(0,0,0,0.6); border-top: 1px solid #808080; padding-top: 18px;} /* 1.2 Header - Account --------------------------------------------------- */ #header-account {background-color: rgba(0,82,156,1); color: #f2f2f2; text-shadow: 0 1px 0 rgba(0,0,0,0.2);} #primary-branding {color: #f2f2f2; display: inline-block; letter-spacing: -0.5px; line-height: 36px; margin-bottom: 0; white-space: nowrap; word-spacing: -3px;} #primary-branding a {color: #f2f2f2;} #primary-branding a.active {color: #bfbfbf;} #primary-branding a:hover {color: #bfbfbf; text-decoration: none;} #primary-branding a:hover img {opacity: 0.8;} #primary-branding img {height: 28px; position: relative; top: -2px;} #primary-branding .branding-divider {background-color: #1a1a1a; border-right: 1px solid #666; height: 18px; margin: 0 9px; overflow: hidden; width: 1px;} /* #primary-branding > a::after { content: ""; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; display: inline-block; height: 0; margin-left: 6px; vertical-align: middle; width: 0; } */ #account-navigation {margin-bottom: 0;} #account-navigation img {height: 24px; position: relative; top: -1px;} #account-navigation > li {float: left; line-height: 36px; margin-bottom: 0; position: relative;} #account-navigation > li > a, #account-navigation > li .dropdown-trigger > a {color: #f2f2f2; display: block;} #account-navigation > li > a:hover, #account-navigation > li .dropdown-trigger > a:hover {color: #bfbfbf; text-decoration: none;} #account-navigation > li > a:hover img, #account-navigation > li .dropdown-trigger > a:hover img {opacity: 0.8;} #account-navigation .vertical-divider {background-color: #1a1a1a; border-right: 1px solid #666; height: 18px; margin: 9px; overflow: hidden; width: 1px;} #account-navigation .dropdown-trigger.active > a {color: #bfbfbf;} /* 1.3 Header - Search --------------------------------------------------- */ #header-search {background: #fff;} #search-bar {margin: 0; position: relative;} #search-bar-controls {position: absolute; right: 0;} #search-bar-controls img {height: 36px; padding: 6px 0 6px 9px;} #search-bar-controls .search-divider {border-right: 1px solid #f2f2f2; border-left: 1px solid #ccc; margin: 9px; overflow: hidden; width: 0;} #sb_searchterm {border: none; font-size: 18px; font-size: 1.8rem; height: 48px; padding: 9px 48px 9px 0; width: 100%;} #sb_searchterm:active, #sb_searchterm:focus {box-shadow: none;} @media (min-width: 980px) { #sb_searchterm {padding-right: 180px;} } #search-suggestions {border-top: 1px solid #ccc;} #search-suggestions ul {margin: 9px 0 18px;} #search-suggestions li {margin-bottom: 3px;} #search-suggestions a { border-radius: 3px; display: block; padding: 3px 9px; } #search-suggestions a:hover, #search-suggestions a.focus {background: #f2f2f2; text-decoration: none;} /* -------------------------------------------------- 2.0 Page - Content 2.1 Content - Hero 2.1.1 Hero - Navigation 2.1.2 Hero - Billboard 2.2 Content - Navigation 2.3 Content - Blocks --------------------------------------------------- */ /* 2.0 Page - Content --------------------------------------------------- */ #page-content { background-color: #f2f2f2; box-shadow: 0 0px 18px rgba(0,0,0,0.2); position: relative; z-index: 2; } #page-content .container {padding-top: 18px;} /* 2.1 Content - Hero --------------------------------------------------- */ #content-hero {box-shadow: 0 0px 18px rgba(0,0,0,0.2);} #content-hero.home {background: #261e1c url(/css/images/backgrounds/hero-home.png) no-repeat;} #content-hero.library {background: #489fac url(/css/images/backgrounds/hero-library.png) no-repeat;} #content-hero.classroom {background: #fff url(/css/images/backgrounds/hero-classroom.png) no-repeat;} /* 2.1.1 Hero - Navigation --------------------------------------------------- */ #hero-navigation { background-color: rgba(255,255,255,0.8); border-bottom: 1px solid #ccc; box-shadow: 0 0px 18px rgba(0,0,0,0.2); position: relative; z-index: 2; } #hero-navigation h5 {line-height: 36px; margin: 0;} #hero-navigation h5 a, #hero-navigation h5 span {display: block; margin: 0 18px;} #hero-navigation h5 a {text-decoration: none;} @media (min-width: 980px) { #hero-navigation h5 a, #hero-navigation h5 span {display: inline-block;} } /* 2.1.2 Hero - Billboard --------------------------------------------------- */ #billboard-placeholder {color: #f2f2f2; padding-top: 256px; text-shadow: 0 1px 1px rgba(0,0,0,0.4);} #billboard-placeholder h2 {color: #f2f2f2;} #billboard-placeholder a {color: #66b3ff;} #billboard-placeholder a:hover {color: #99ccff;} #billboard-placeholder .button, #billboard-placeholder .button:hover {color: #fff;} #billboard-placeholder .disabled.button {color: #808080;} @media (min-width: 980px) { #billboard-placeholder {padding-top: 0;} } /* 2.2 Content - Navigation --------------------------------------------------- */ #content-navigation {border-bottom: 1px solid #ccc;} #content-navigation h5 {line-height: 36px; margin: 0;} #content-navigation h5 a, #content-navigation h5 span {display: block; margin: 0 18px;} #content-navigation h5 a {text-decoration: none;} @media (min-width: 980px) { #content-navigation h5 a, #content-navigation h5 span {display: inline-block;} } /* 2.3 Content - Blocks --------------------------------------------------- */ /* -------------------------------------------------- 3.0 Page - Footer 3.1 Footer - Promotion 3.2 Footer - Blocks 3.2 Footer - Legal --------------------------------------------------- */ /* 3.0 Page - Footer --------------------------------------------------- */ #page-footer { position: relative; z-index: 1; } #page-footer .container {padding-top: 18px;} /* 3.1 Footer - Promotion --------------------------------------------------- */ #footer-promotion {border-bottom: 1px solid #ccc;} /* 3.2 Footer - Blocks --------------------------------------------------- */ #footer-primary {border-bottom: 1px solid #ccc;} #corporate-logo {width: 120px;} @media (min-width: 980px) { #corporate-logo {margin-left: -28px;} } /* 3.2 Footer - Legal --------------------------------------------------- */