/* * Project: East Africa Metals * Filename: styles.css * Creation date: March 25, 2013 * by Rudy Affandi * */ /* Notes on layout structure Width: 960px, fixed */ /* Font-face Settings */ @font-face { font-family: 'AvenirLTStd45Book'; src: url('/cc/lib/fontface/avenir/book/avenirltstd-book-webfont.eot'); src: url('/cc/lib/fontface/avenir/book/avenirltstd-book-webfont.eot?#iefix') format('embedded-opentype'), url('/cc/lib/fontface/avenir/book/avenirltstd-book-webfont.woff') format('woff'), url('/cc/lib/fontface/avenir/book/avenirltstd-book-webfont.ttf') format('truetype'), url('/cc/lib/fontface/avenir/book/avenirltstd-book-webfont.svg#AvenirLTStd45Book') format('svg'); font-weight: normal; font-style: normal} @font-face { font-family: 'AvenirLTStd55Roman'; src: url('/cc/lib/fontface/avenir/roman/avenirltstd-roman-webfont.eot'); src: url('/cc/lib/fontface/avenir/roman/avenirltstd-roman-webfont.eot?#iefix') format('embedded-opentype'), url('/cc/lib/fontface/avenir/roman/avenirltstd-roman-webfont.woff') format('woff'), url('/cc/lib/fontface/avenir/roman/avenirltstd-roman-webfont.ttf') format('truetype'), url('/cc/lib/fontface/avenir/roman/avenirltstd-roman-webfont.svg#AvenirLTStd55Roman') format('svg'); font-weight: normal; font-style: normal} @font-face { font-family: 'AvenirMedium'; src: url('/cc/lib/fontface/avenir/medium/avenm___-webfont.eot?') format('eot'), url('/cc/lib/fontface/avenir/medium/avenm___-webfont.woff') format('woff'), url('/cc/lib/fontface/avenir/medium/avenm___-webfont.ttf') format('truetype'), url('/cc/lib/fontface/avenir/medium/avenm___-webfont.svg#webfontA2uRWDTC') format('svg'); font-weight: normal; font-style: normal} @font-face { font-family: 'AvenirHeavy'; src: url('/cc/lib/fontface/avenir/heavy/avenh___-webfont.eot?') format('eot'), url('/cc/lib/fontface/avenir/heavy/avenh___-webfont.woff') format('woff'), url('/cc/lib/fontface/avenir/heavy/avenh___-webfont.ttf') format('truetype'), url('/cc/lib/fontface/avenir/heavy/avenh___-webfont.svg#webfont3lyybxHi') format('svg'); font-weight: normal; font-style: normal} /* CSS3 effects */ a,a:hover {-webkit-transition:color .1s ease-in-out;-moz-transition:color .1s ease-in-out;-ms-transition:color .1s ease-in-out;-o-transition:color .1s ease-in-out;transition:color .1s ease-in-out;behavior:url('/cc/lib/css/ie-css3.htc')} legend,textarea{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;behavior:url('/cc/lib/css/ie-css3.htc')} /* Site specific layout and styles */ html, body {height: 100%} .wrapper {min-height: 100%} .container {clear: both; width: 960px; margin: 0 auto; position: relative} /* Font declaration */ body {font: 13px/18px Arial, Helvetica, sans-serif; color: #676767; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%} h1, h2, h3, h4, h5, h6 {font-weight: normal; margin: 0; padding: 0} h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {font-weight: inherit} /* Text link */ a {color: #56421c; text-decoration: none} a:hover {color: #000} /* Text headers */ #page h3 {font-size: 18px; font-weight: bold; margin: 10px 0} #page header h3 {margin: 0 0 20px 0; padding: 0} #page h4 {font-size: 15px; font-weight: bold; margin: 10px 0} /* Visibility Settings */ #page-header, #page-masthead, #page-titles, #page-body, #page-footer {visibility: visible} /* Background images */ html {background: #e3dbdf url('/i/common/html-bg.jpg') repeat 0 0} body {background: url('/i/common/body-bg.jpg') repeat-x 0 0} .page-body-bg {background: url('/i/common/aside-bg.png') repeat-y 128px 0} .page-aside-bg {} .footer-bg {background: #333 url('/i/common/footer-bg.jpg') repeat 0 0} .content-bg {} .home-section {} .header-img {width: 960px; height: 185px; overflow: hidden; position: absolute; left: 0; top: 196px} /* Section-specific styling */ /* Home Section */ .home-section .header-img {background: url('/i/common/header-img-home.jpg') no-repeat 0 0; height: 301px} /* Corporate Section */ .corporate-section h2.section-header {color: #8da79f} .corporate-section #page-aside .sub li a:hover, .corporate-section #page-aside .sub li.active a {background: #8da79f} .corporate-section .header-img {background: url('/i/common/header-img-corporate.jpg') no-repeat 0 0} #n2:hover ul.sub {background: #8da79f} .corporate-section a:hover {color: #8da79f} .corporate-section #page-aside .sub li a:after {color: #8da79f} .corporate-section #page-aside .sub li:hover a:after, .corporate-section #page-aside .sub li.active a:after {color: #fff} /* Investors Section */ .investors-section h2.section-header {color: #bcab5f} .investors-section #page-aside .sub li a:hover, .investors-section #page-aside .sub li.active a {background: #bcab5f} .investors-section .header-img {background: url('/i/common/header-img-investors.jpg') no-repeat 0 0} #n3:hover ul.sub {background: #bcab5f} .investors-section a:hover {color: #bcab5f} .investors-section .table1 th, .investors-section .table2 th {background: #bcab5f} .investors-section .table2 tr.highlight {background: #bcab5f; color: #fff} .investors-section #page-aside .sub li a:after {color: #bcab5f} .investors-section #page-aside .sub li:hover a:after, .investors-section #page-aside .sub li.active a:after {color: #fff} /* Projects Section */ .projects-section h2.section-header {color: #a88c58} .projects-section #page-aside .sub li a:hover, .projects-section #page-aside .sub li.active a {background: #a88c58} .projects-section .header-img {background: url('/i/common/header-img-projects.jpg') no-repeat 0 0} #n4:hover ul.sub {background: #a88c58} .projects-section a:hover {color: #a88c58} .projects-section .table1 th {background: #a88c58} .projects-section .table1 tr.highlight {background: #a88c58; color: #fff} .projects-section #page-aside .sub li a:after {color: #a88c58} .projects-section #page-aside .sub li:hover a:after, .projects-section #page-aside .sub li.active a:after {color: #fff} /* News Section */ .news-section h2.section-header {color: #c9744d} .news-section #page-aside .sub li a:hover, .news-section #page-aside .sub li.active a {background: #c9744d} .news-section .header-img {background: url('/i/common/header-img-news.jpg') no-repeat 0 0} #n5:hover ul.sub {background: #c9744d} #n5:hover ul.sub a {color: #fff} .news-section a:hover {color: #c9744d} .news-section #page-aside .sub li a:after {color: #c9744d} .news-section #page-aside .sub li:hover a:after, .news-section #page-aside .sub li.active a:after {color: #fff} /* Contact Us Section */ .contact-us-section h2.section-header {color: #613f39} .contact-us-section #page-aside .sub li a:hover, .contact-us-section #page-aside .sub li.active a {background: #613f39} .contact-us-section .header-img {background: url('/i/common/header-img-contact-us.jpg') no-repeat 0 0} #n6:hover ul.sub {background: #613f39} #n6:hover ul.sub a {color: #fff} .contact-us-section a:hover {color: #613f39} .contact-us-section #page-aside .sub li a:after {color: #613f39} .contact-us-section #page-aside .sub li:hover a:after, .contact-us-section #page-aside .sub li.active a:after {color: #fff} /* Generic Section */ .generic-section h2.section-header {color: #a88c58} .generic-section #page-aside .sub li a:hover, .generic-section #page-aside .sub li.active a {background: #a88c58} .generic-section .header-img {background: url('/i/common/header-img-projects.jpg') no-repeat 0 0} /* Layout */ /* Tagline */ #tagline {position: absolute; right: 25px; top: 80px} #tagline h1 {color: #56421c; font-size: 18px; font-family: 'AvenirMedium'} /* Slogan */ #slogan {position: absolute; width: 460px; height: 75px; left: 40px; top: 60px} #slogan h1 {color: #fff; font-family: 'AvenirLTStd55Roman'; font-size: 29px; line-height: 42px; -moz-text-shadow: 3px 3px 10px #000; -webkit-text-shadow: 3px 3px 10px #000; text-shadow: 3px 3px 10px #000} /* Stock symbol */ #symbol {position: absolute; right: 0; top: 0; width: 142px; height: 34px; background: #56421c; color: #fff} #symbol h3 {color: #fff; font-size: 17px; line-height: 34px; text-align: center} /* Feeds */ #feeds {position: absolute; width: 236px; height: 51px; right: 0; top: 142px; background: #b5b3b3} #feeds ul {list-style: none; margin: 0; padding: 0} #feeds ul li {float: left; margin: 0 0 0 10px; padding: 0; font-size: 12px} #feeds ul li a {display: block; color: #e6e6e6; font-weight: bold; width: 105px; height: 51px} #feeds ul li a:hover {color: #555655} #feeds ul li a span {display: block; float: left; background: url('/i/common/feeds-icons.png') no-repeat 0 0} #feeds ul li.email a {line-height: 14px; padding: 12px 0 0} #feeds ul li.email a span {background-position: 0 -4px; width: 45px; height: 32px} #feeds ul li.email a:hover span {background-position: 0 -42px} #feeds ul li.rss a {line-height: 51px} #feeds ul li.rss a span {background-position: -50px 0; width: 46px; height: 36px; margin: 10px 0 0} #feeds ul li.rss a:hover span {background-position: -50px -39px} /* Home */ /* Front: Welcome */ #welcome {float: left; width: 800px; margin-top: 30px} #welcome p {margin: 0 0 10px 0; padding: 0 20px 0 0; line-height: 20px; font-size: 15px; } /* Front: Latest News */ #latest {position: absolute; right: 0; top: 0; width: 236px; height: 382px} .latest-bg {background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjY1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC42NSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0.65))); background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#a6000000',GradientType=0 )} #latest h2 {font-family: 'AvenirLTStd55Roman'; color: #e3e3e3; font-size: 19px; margin: 20px 20px 10px} #latest ul {list-style: none; margin: 0 20px; padding: 0} #latest ul li {margin: 0 0 5px 0; padding: 0; background: url('/i/common/hr-v.png') repeat-x 0 0; line-height: normal} #latest ul li.first {background: none} #latest ul li a {display: block; padding: 15px 0 5px; color: #fff} #latest ul li a b.date {color: #f43b00; font-weight: normal} #latest ul li a:hover {color: #e8e8e8} /* Front: Features */ #features {float: left; width: 150px; height: 289px; margin-top: 10px} .features-bg {background: url('/i/common/hr-h.png') repeat-y 0 0} #features ul {list-style: none; margin: 20px 0 0 20px; padding: 0} #features ul li {margin: 0 0 25px 0; padding: 0} #features ul li a {display: block; width: 110px; height: 20px; background: url('/i/common/features-icon.png') no-repeat 0 0; color: #5d3e34; font-size: 14px; line-height: normal; font-family: 'AvenirMedium'} #features ul li#f0 a {background-position: 0 0; padding: 30px 0 0 0} #features ul li#f0 a span.arrow {color: #90a999} #features ul li#f1 a {background-position: 0 -60px; padding: 30px 0 0 0} #features ul li#f1 a span.arrow {color: #bfaf5e} #features ul li#f2 a {background-position: 0 -120px; padding: 32px 0 0 0} #features ul li#f2 a span.arrow {color: #a68051} #features ul li#f3 a {background-position: 0 -180px; padding: 35px 0 0 0} #features ul li#f3 a span.arrow {color: #c5603f} #features ul li a:hover, #features ul li a:hover span.arrow {color: #000} /* Front: Project Map */ #project {float: right; width: 240px; height: 289px; margin-top: 2px} .project-bg {background: url('/i/common/front-map.png') no-repeat 0 0; width: 240px; height: 289px; box-shadow: -3px 3px 10px #666} #project h2 {color: #3a3a3a; font-size: 18px; font-family: 'AvenirLTStd55Roman'; margin: 140px 0 10px 10px} #project p {margin: 0 10px; line-height: normal} #project .more {color: #d90000} #project .more:hover {color: #000} /* Page Header */ #page-header {width: 100%; height: 382px; position: relative} .home-section #page-header {height: 498px} /* Page Header: Stock quote */ #stock-quote {font-size: 15px; position: absolute; left: 0; top: 0; width: 280px} #stock-quote .first {position: absolute; left: 20px; top: 4px} #stock-quote .last {position: absolute; right: 20px; top: 4px} /* Page Masthead */ #page-masthead {position: relative; height: 156px} /* Page Masthead: Logo */ #logo {width: 210px; height: 88px; position: absolute; left: 0; top: 45px} #logo h1 {width: 210px; height: 88px; background: url('/i/common/logo.png') no-repeat 0 0} #logo h1 span {left: 9999em; display: none} /* Page titles */ #page-titles {position: relative; margin: 33px 0} h2.section-header {font-weight: bold; font-size: 16px; text-transform: uppercase; line-height: normal; margin: 20px 0 10px; padding: 0} h2.page-header {font-family: 'AvenirLTStd45Book'; font-weight: normal; font-size: 25px; text-transform: uppercase; line-height: normal; margin: 0; padding: 0; color: #fff; position: absolute; right: 20px; bottom: 10px; -moz-text-shadow: -1px -1px 1px #333; -webkit-text-shadow: -1px -1px 1px #333; text-shadow: -1px -1px 1px #333} /* Page Body */ #page-body {clear: both; width: 960px; min-height: 450px; margin: 0; padding-bottom: 175px; position: relative; overflow: hidden} .home-section #page-body {min-height: 320px} /* Page Aside */ #page-aside {width: 146px; float: left} #latest-news {} #latest-news {padding: 10px 20px} #latest-news li {margin: 0 0 10px 0} #latest-news li a b.date {color: #cacaca} /* Page Content */ #page-content {width: 814px; position: relative; float: left} #page-content > header {overflow: hidden; width: auto} /* Page-specific */ #page {margin: 0; padding: 20px 30px} #page-item {margin: 0; padding: 0 30px 0 0} #page .item {clear: both; margin-bottom: 15px} #page p.first {margin-top: 0} /* Navigations */ /* Header navigation */ #header-nav {width: 200px; position: absolute; right: 142px; top: 0} #header-nav ul {list-style: none; overflow: hidden; margin: 0; padding: 0} #header-nav ul li {float: left; margin: 0; padding: 0; font-size: 13px; text-transform: uppercase; line-height: 35px; -moz-text-shadow: -1px -1px 1px #333; -webkit-text-shadow: -1px -1px 1px #333; text-shadow: -1px -1px 1px #333} #header-nav ul li.last {background: url('/i/common/header-nav-sep.png') no-repeat 0 0} #header-nav ul li a {display: block; color: #fff; padding: 0 20px} #header-nav ul li a:hover, #header-nav ul li.active a {color: #56421c; -moz-text-shadow: -1px -1px 1px #ccc; -webkit-text-shadow: -1px -1px 1px #ccc; text-shadow: -1px -1px 1px #ccc} /* Main navigation */ #main-nav {position: absolute; left: 0; top: 142px} /* Drop down theme, based on site's styling */ .sf-menu {position: relative; margin: 0; padding: 0} .sf-menu > li {margin: 0 3px 0 0; padding: 0} .sf-menu > li > a {display: block; width: 142px; height: 54px; margin: 0; padding: 0; color: #fff; font-family: 'AvenirMedium'; text-align: center; font-size: 15px; line-height: 54px; outline: 0; background: url('/i/common/nav-sprite.jpg') no-repeat 0 0; -moz-text-shadow: -1px -1px 1px #333; -webkit-text-shadow: -1px -1px 1px #333; text-shadow: -1px -1px 1px #333} .sf-menu > li#n2 > a {background-position: 0 0; transition: background-position 1s easeinout} .sf-menu > li#n2 > a:hover {color: #fff} .sf-menu > li#n3 > a {background-position: -145px 0; transition: background-position 1s easeinout} .sf-menu > li#n3 > a:hover {color: #fff} .sf-menu > li#n4 > a {background-position: -290px 0; transition: background-position 1s easeinout} .sf-menu > li#n4 > a:hover {color: #fff} .sf-menu > li#n5 > a {background-position: -435px 0; transition: background-position 1s easeinout} .sf-menu > li#n5 > a:hover {color: #fff} .sf-menu > li#n6 > a {background-position: -580px 0; transition: background-position 1s easeinout} .sf-menu > li#n6 > a:hover {color: #fff} .sf-menu > li#n2:hover > a, .sf-menu > li#n2 > a:hover, .sf-menu > li#n2.active:hover > a, .sf-menu > li#n2.current:hover > a {background-position: 0 -54px; transition: background-position 1s easeinout} .sf-menu > li#n2.active > a, .sf-menu > li#n2.current > a {background-position: 0 -108px} .sf-menu > li#n3:hover > a, .sf-menu > li#n3 > a:hover, .sf-menu > li#n3.active:hover > a, .sf-menu > li#n3.current:hover > a {background-position: -145px -54px; transition: background-position 1s easeinout} .sf-menu > li#n3.active > a, .sf-menu > li#n3.current > a {background-position: -145px -162px} .sf-menu > li#n4:hover > a, .sf-menu > li#n4 > a:hover, .sf-menu > li#n4.active:hover > a, .sf-menu > li#n4.current:hover > a {background-position: -290px -54px; transition: background-position 1s easeinout} .sf-menu > li#n4.active > a, .sf-menu > li#n4.current > a {background-position: -290px -216px} .sf-menu > li#n5:hover > a, .sf-menu > li#n5 > a:hover, .sf-menu > li#n5.active:hover > a, .sf-menu > li#n5.current:hover > a {background-position: -435px -54px; transition: background-position 1s easeinout} .sf-menu > li#n5.active > a, .sf-menu > li#n5.current > a {background-position: -435px -270px} .sf-menu > li#n6:hover > a, .sf-menu > li#n6 > a:hover, .sf-menu > li#n6.active:hover > a, .sf-menu > li#n6.current:hover > a {background-position: -580px -54px; transition: background-position 1s easeinout} .sf-menu > li#n6.active > a, .sf-menu > li#n6.current > a {background-position: -580px -324px} .sf-menu > li:hover > a, .sf-menu > li > a:hover, .sf-menu > li.active > a, .sf-menu > li.active:hover > a, .sf-menu > li.current > a, .sf-menu > li.current:hover > a {} /* Remove main sub indicator */ .sf-menu > li > a span.sf-sub-indicator {display: none} .sf-menu a.sf-with-ul {margin: 0; padding: 10px} /* Sub menu settings (drop down width and top location) */ .sf-menu ul.sub {margin: 0 auto; padding: 5px; min-width: 190px} .sf-menu ul.sub ul {} .sf-menu li li {margin: 0 0 1px 0; padding: 0} .sf-menu li li li {} .sf-menu ul.sub li a {display: block; color: #fff; font-size: 13px; font-weight: bold; line-height: 13px; padding: 8px 10px} .sf-menu ul.sub li a:hover, .sf-menu ul.sub li a.active, .sf-menu ul.sub li a.current {color: #000; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjQiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjQiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: -moz-linear-gradient(top, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.4) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.4)), color-stop(100%,rgba(255,255,255,0.4))); background: -webkit-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0.4) 100%); background: -o-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0.4) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0.4) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0.4) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66ffffff', endColorstr='#66ffffff',GradientType=0 )} .sf-menu li:hover ul.sub, .sf-menu li.sfHover ul.sub {top: auto} ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul, ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul {left: 100%} /* Arrow indicator settings */ .sf-sub-indicator {background: url('/cc/lib/jquery/plugins/superfish/images/arrows-50p.png') no-repeat -20px -100px} .sf-menu ul a>.sf-sub-indicator {background-position: -20px 0} a>.sf-sub-indicator {top: 30%} /* Custom modifier */ .sf-menu >li >a {} .sf-menu > li.last > ul.sub {} .ie-lte8 .sf-menu > li.last > ul.sub {margin-left: -66px} .sf-menu li:hover ul.sub ul, .sf-menu li.sfHover ul.sub ul {} /* Elements to be hidden after DOM load */ .sf-menu li.not_main {display: none; visibility: hidden !important} /* Side navigation */ #page-aside .sub {list-style: none; margin: 0; padding: 0} #page-aside .sub li {display: block; margin: 0 0 1px 0; padding: 0; font-size: 12px; font-weight: bold; line-height: normal} #page-aside .sub li a {display: block; color: #56421c; padding: 10px} #page-aside .sub li a:after {content: '\0000a0>'} #page-aside .sub li a.has_sub.active {} #page-aside .sub li a:hover, #page-aside .sub li.active a {color: #fff} #page-aside .sub li a span.icon {margin: 6px 0px 0 10px} /* Secondary level */ #page-aside .sub ul, #page-aside .sub ul ul, #page-aside .sub ul ul ul, #page-aside .sub ul ul ul ul {margin: 5px 0; padding: 0} #page-aside .sub ul li {} #page-aside .sub ul li.last {} #page-aside .sub ul li a, #page-aside .sub ul li a:visited {padding-right: 15px} #page-aside .sub ul ul li a, #page-aside .sub ul ul li a:visited {padding-right: 30px} #page-aside .sub ul ul ul li a, #page-aside .sub ul ul ul li a:visited {padding: 4px 5px 4px 45px} #page-aside .sub ul ul ul ul li a, #page-aside .sub ul ul ul ul li a:visited {padding: 4px 5px 4px 60px} /* Events Calendar */ /* Settings */ .fc-widget-header {background: #342e18; color: #fff} /* Video player */ .player {display: block; width: 480px; height: 320px; margin: auto} /* Photo Gallery */ .gallery {float: left; width: 100%} .gallery.grid figure {float: left; margin: 10px; width: 130px} .gallery.single figure {display: none; margin: 10px; width: 130px} .gallery figure img {margin: auto; display: block} .gallery figure figcaption {text-align: center; font-weight: bold} .gallery figure.first, .gallery figure.selected {display: block} /* Footer */ #page-footer {clear: both; width: 100%; height: 175px; font-size: 12px; color: #777776; overflow: hidden; position: relative; z-index: 1; margin: -175px auto 0; padding: 0; line-height: normal} #page-footer a {color: #7d7d7d} #page-footer a:hover, #footer a.active, #footer a.active {color: #fff} /* Footer elements */ #legal {position: absolute; left: 0; top: 20px; font-weight: bold} #credit {position: absolute; left: 0; top: 55px} #credit a {color: #626262; font-size: 9px} #address {position: absolute; right: 0; top: 20px} #address h4 {margin-bottom: 10px} /* Footer Site Map Nav */ #footer-nav {width: 100%; position: absolute; left: 0; top: 40px} #footer-nav ul {list-style: none; margin: 0; padding: 20px 0 0} #footer-nav ul h2 {display: none} #footer-nav ul a {color: #b7b7b7} #footer-nav ul a:hover, #footer-nav ul li.active > a {color: #fff} #footer-nav ul a:hover a, #footer-nav ul a.active a {color: #999} #footer-nav ul > li {display: inline-block; vertical-align: top; margin: 0 20px 0 0} #footer-nav ul > li {text-transform: uppercase} #footer-nav ul > li li {font-weight: normal; text-transform: none} #footer-nav ul > li ul {list-style: none; margin: 0; padding: 0} #footer-nav ul > li ul li {display: block; vertical-align: top; margin: 0} /* Misc */ p.quote, p.quotes {margin: 10px; font-style: italic} .row {clear: both} .chart {width: 455px} .chart.wide {width: 670px; margin: auto} .video_box {width: 480px; height: 360px; display: block} .ui-dialog {min-width: 400px} .ui-dialog-content {font-size: 12px} address {font-style: normal} .RPhoto { color: #1F5E87; float: right; margin: 10px 0 10px 10px; width: 300px; } .lilButtons img { box-shadow: 4px 5px 3px #AAAAAA; margin-bottom: 20px; } /* Photo Gallery */ #photo_gallery-page .item {float: left; clear: none; width: 120px; margin: 10px; text-align: center} #photo_gallery-page .item h4 {font-size: 13px; font-weight: normal} .gallery {float: left; width: 100px; border: 4px solid #ccc} .gallery:hover {border-color: #342e18} .gallery figure {display: none; margin: 10px; width: 100px} .gallery a {display: none} .gallery figure img {margin: auto; display: block} .gallery figure figcaption {text-align: center; font-weight: bold} .gallery figure.first, .gallery a.first {display: block} /* Tabs */ ul.tabs {display: block; margin: 0; padding: 0; border-bottom: solid 1px #ddd} ul.tabs li {display: block; width: auto; height: 30px; padding: 0; float: left; margin-bottom: 0} ul.tabs li a {display: block; text-decoration: none; width: auto; height: 29px; padding: 0px 20px; line-height: 30px; border: solid 1px #ddd; border-width: 1px 1px 0 0; margin: 0; background: #f5f5f5; font-size: 13px; outline: none} ul.tabs li a.active {background: #fff; height: 30px; position: relative; top: -4px; padding-top: 4px; border-left-width: 1px; margin: 0 0 0 -1px; color: #111; -moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; border-top-left-radius: 2px; -moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; border-top-right-radius: 2px} ul.tabs li:first-child a.active {margin-left: 0} ul.tabs li:first-child a {border-width: 1px 1px 0 1px; -moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; border-top-left-radius: 2px} ul.tabs li:last-child a {-moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; border-top-right-radius: 2px} ul.tabs-content {margin: 0; padding: 10px 0; list-style: none; display: block; background: #fff} ul.tabs-content > li {display:none} ul.tabs-content > li.active {display: block} /* Clearfixing tabs for beautiful stacking */ ul.tabs:before, ul.tabs:after {content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0} ul.tabs:after {clear: both} ul.tabs {zoom: 1} @media print { * {background: transparent !important; color: black !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important} a, a:visited {text-decoration: underline} /*a[href]:after {content: ' (' attr(href) ')'}*/ abbr[title]:after {content: ' (' attr(title) ')'} .ir a:after, a[href^='javascript:']:after, a[href^='#']:after {content: ''} pre, blockquote {border: 1px solid #999; page-break-inside: avoid} thead {display: table-header-group} tr, img {page-break-inside: avoid} img {max-width: 100% !important; clear: both; display: block; margin: 0} @page {margin: 0.5cm} p, h2, h3 {orphans: 3; widows: 3} h1, h2, h3, h4 {page-break-after: avoid; clear: both; display: both; border: none} nav, aside, footer, #header_img, #lang, #stock {display: none} #content {width: 940px; margin: auto} .content-bg, .wrapper {background: none; border: none; box-shadow: none} div, article, header, summary, table {width: auto; margin: 0; float: none; clear: both; position: static} }