/* * Project: Heeno International * Author: Rudy Affandi * Created: 08/10/2012 * File name: styles.css */ /* Settings */ /* Load css normalization */ @import url('../vendor/css/normalize.css'); /* Site stylesheets */ @import url('adnet.css'); /* Adnet-specific page layout */ @import url('effects.css'); /* Effects */ @import url('../vendor/css/css_helper.css'); /* Fonts */ @import url('https://fonts.googleapis.com/css?family=Fredoka+One'); @import url('../vendor/fontface/helveticaneue/77boldcond/stylesheet.css'); @import url('../vendor/fontface/helveticaneue/97condblk/stylesheet.css'); /* Icon sprites */ @import url('../vendor/icons/silk/silk-sprite.css'); @import url('../vendor/icons/silk/silk-bullets-sprite.css'); /* Main navigation menu */ @import url('../vendor/superfish/css/superfish.css'); /* NOTE: enhancements.css is linked separately in the page AFTER this file, so its rules win at equal specificity (do not @import it here). */ /* Site specific layout and styles */ html, body {height: 100%;} .wrapper {min-height: 100%;} ul {list-style-type: round;} ul li, ol li {margin: 10px 0;} .container {clear: both; width: 960px; margin: auto; position: relative;} /* Font declaration */ body {font: 13px/18px Arial, Helvetica, sans-serif; color: #6e6d6d;} h1, h2, h3, h4, h5, h6, .sf-menu>li>a {font-family: arial, helvetica, sans-serif; font-weight: normal; margin: 0; padding: 0;} h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {font-weight: inherit;} /* FOUT prevention */ /* While loading...*/ .wf-loading .home-section h2, .wf-loading .footer_insert h2, .wf-loading #circ_contact h3, .wf-loading #tagline h1, .wf-loading h2.section_header, .wf-loading h2.page_header, .wf-loading .sf-menu>li>a {visibility: hidden;} /* Do not apply to IE8 and lower */ .ie-lte8.wf-loading .home-section h2, .ie-lte8.wf-loading .footer_insert h2, .ie-lte8.wf-loading #circ_contact h3, .ie-lte8.wf-loading #tagline h1, .ie-lte8.wf-loading h2.section_header, .ie-lte8.wf-loading h2.page_header, .ie-lte8.wf-loading .sf-menu>li>a {visibility: visible;} /* When ready */ .home-section h2, .footer_insert h2, #circ_contact h3, #tagline h1, h2.section_header, .sf-menu>li>a, h2.page_header {visibility: visible; font-family: 'Fredoka One';} /* Text link */ a, a:visited {color: #0079bb; text-decoration: none;} a:hover {color: #036;} /* Text headers */ #page h2 {font-weight: normal; font-size: 18px; margin: 10px 0; text-transform: uppercase;} #page h3 {font-weight: bold; font-size: 16px; margin: 10px 0; color: #302c2c;} #page header h3 {clear: both; font-weight: bold; font-size: 16px; margin: 20px 0 15px; padding-bottom: 10px; color: #302c2c; border-bottom: 1px solid #ccc;} #page h4 {font-weight: bold; font-size: 14px; margin: 10px 0; color: #302c2c;} #page .corp_dir_format h3 {font-weight: bold; font-size: 14px; margin: 0;} #page h4 {font-weight: bold; font-size: 12px; margin: 10px 0;} #header_section h2.section_header {opacity: 1; font-size: 51px; line-height: 51px; color: #fff; text-transform: uppercase; position: absolute; right: 25px; top: 41px; width: 300px;} aside h2.section_header {opacity: 1; font-size: 24px; line-height: 24px; color: #195ea0; text-transform: uppercase; margin: 0 0 20px 0;} h2.page_header {font-size: 24px; line-height: 24px; margin: 0 0 0 40px; padding: 0; color: #195ea0; text-transform: uppercase;} h3.company_header {font-size: 17px; line-height: normal; color: #fff; position: absolute; right: 32px; top: 102px;} .baby_blue {color: #aadcff;} /* Background images */ .header_bg {background: #fff;} .header_section_bg {background: url('../images/common/header_bg.png') repeat-x 50% 0;} .aside_bg {background: url('../images/common/column_shadow_bg.png') no-repeat 180px 0;} .front.header_section_bg {background: url('../images/common/header_front_bg.png') no-repeat 50% 0;} .footer_bg {background: #2078cd url('../images/common/footer_bg.png') no-repeat 50% 0; width: 100%; height: 203px; margin: 13px 0 0;} /* Tagline */ #tagline {padding-top: 42px;} #tagline h1 {font-size: 50px; line-height: 48px; color: #fff; text-transform: uppercase; opacity: 1;} #tagline h1.no_anim {color: #7dcaff; text-transform: uppercase; opacity: 1;} /* Reveal animation only when JS is enabled */ html.js #header_section h2.section_header, html.js aside h2.section_header, html.js #tagline h1:not(.no_anim) {opacity: 0; transition: opacity 1s ease-in-out;} html.js .revealed {opacity: 1 !important;} /* Header */ #header {width: 960px; height: 110px; margin: auto; position: relative;} #header_section {width: 100%; height: 184px; position: relative;} #header_section.front {width: 100%; height: 460px; position: relative;} /* Logo */ #logo {width: 244px; height: 57px; position: relative; float: left;} #logo h1 {width: 244px; height: 57px; margin-top: 25px; background: url('../images/common/logo.png') no-repeat 0 0;} #logo h1 span {left: 9999em; display: none;} /* Nav */ /* Main navigation */ #main_nav {position: absolute; right: 0; top: 35px; width: 663px; height: 34px;} /* Drop down theme, based on site's styling */ .sf-menu {position: relative; float: right; margin: 0; padding: 0;} .sf-menu > li {margin: 0; padding: 0;} .sf-menu > li.first {margin: 0; background: none;} .sf-menu > li > a, .sf-menu > li > a:visited {display: block; margin: 0; padding: 5px 5px; color: #2078cd; text-transform: uppercase; text-align: center; font-size: 14px; line-height: 14px; outline: 0;} .sf-menu > li.last a {padding-right: 0;} .sf-menu > li:hover > a, .sf-menu > li > a:hover, .sf-menu > li.active > a, .sf-menu > li.current > a {color: #195ea0;} /* Remove main sub indicator */ .sf-menu > li > a span.sf-sub-indicator {display: none;} .sf-menu a.sf-with-ul {padding-right: 22px; min-width: 1px;} /* Sub menu settings (drop down width and top location) */ .sf-menu ul.sub {width: 170px; margin: 0 auto; padding: 0; border: 2px solid #837e6e; border-top: none;} .sf-menu ul.sub ul {border: 2px solid #837e6e; border-top: 1px solid #837e6e; min-width: 170px;} .sf-menu li li {margin: 0; padding: 0; border-bottom: 1px solid #d5d5d5;} .sf-menu li li.last a {border-bottom: none;} .sf-menu li li li {} .sf-menu ul.sub li a, .sf-menu ul.sub li a:visited {display: block; background: #f4f0e0; color: #4f4f4f; font-size: 12px; line-height: 12px; padding: 7px 10px 7px 15px;} .sf-menu ul.sub li a:hover, .sf-menu ul.sub li a.active, .sf-menu ul.sub li a.current {background: #342e18; color: #fff;} .sf-menu li:hover ul.sub, .sf-menu li.sfHover ul.sub {top: 34px;} 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('../vendor/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 {} .sf-menu > li#n3 > ul.sub {} .sf-menu > li#n6 > ul.sub {} .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;} .sf-menu li h2 {display: none; visibility: hidden !important;} /* Hide section title from drop down */ /* Body Area */ #body {clear: both; width: 960px; margin: 0 auto; overflow: hidden; padding: 50px 0 370px 0; position: relative;} #body.row1 {overflow: visible;} #body.row2 {overflow: visible;} #body.row2B {overflow: visible;} #body.row3 {overflow: visible;} .ie #body {zoom: 1; left: 0;} /* Side column */ aside {clear: both; width: 202px; min-height: 150px; margin: 0; overflow: hidden; position: relative; float: left;} /* Side navigation */ aside .sub {list-style: none; margin: 0; padding: 0; overflow: hidden;} aside .sub li {display: block; width: 165px; min-height: 29px; margin: 0; padding: 0; font-size: 13px; line-height: 16px; border-bottom: 1px solid #9dcdfb;} aside .sub li a, aside .sub li a:visited {display: block; padding: 5px 10px 5px 20px; color: #195ea0; font-weight: bold;} aside .sub li a.has_sub.active {} aside .sub li a:hover, aside .sub li.current {background: url('../images/common/aside_arrow.png') no-repeat 5px 10px;} aside .sub li a.active {font-weight: bold;} /* Secondary level */ aside .sub ul, aside .sub ul ul, aside .sub ul ul ul, aside .sub ul ul ul ul {margin: 0; padding: 0; display: none;} /* Expand the active section's sub-list (previously done by JS) */ aside .sub li.current > ul {display: block;} aside .sub ul li:hover, aside .sub ul li a:hover, aside .sub ul li.current {background: none; color: #000;} aside .sub ul li {text-transform: none; margin: 0; padding: 0; line-height: normal; border-bottom: 1px solid #ccc;} aside .sub ul li.last {border-bottom: none;} aside .sub ul li a, aside .sub ul li a:visited {padding: 4px 5px 4px 30px; font-weight: normal;} aside .sub ul ul li a, aside .sub ul ul li a:visited {padding: 4px 5px 4px 30px;} aside .sub ul ul ul li a, aside .sub ul ul ul li a:visited {padding: 4px 5px 4px 45px;} aside .sub ul ul ul ul li a, aside .sub ul ul ul ul li a:visited {padding: 4px 5px 4px 60px;} /* Content */ #content {width: 758px; position: relative; float: left;} #content > header {overflow: hidden; width: auto;} /* Page-specific */ #page {margin: 0; padding: 15px 5px 20px 40px;} #page .item {clear: both; margin-bottom: 15px;} #page p.first {margin-top: 0;} /* 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;} /* Home Page */ .home-section #body {padding: 20px 0;} /* Circular image */ .circ_img {position: absolute; right: -89px; top: -17px; z-index: 2; width: 504px; height: 503px; background: url('../images/common/front_circ_img.png') no-repeat 0 0;} /* Secondary Circular image */ #circ_contact {text-align: center; font-size: 12px; padding: 80px 0 0;} #circ_contact h3 {font-size: 24px; padding: 0 0 15px 0; color: #195ea0; text-transform: uppercase;} .circ_bg {position: absolute; right: -35px; top: -67px; z-index: 2; width: 323px; height: 322px; background: url('../images/common/circ_contact.png') no-repeat 0 0;} /* Welcome */ .home-section h2 {font-size: 24px; color: #195ea0; text-transform: uppercase; margin-bottom: 20px;} .home-section .footer_insert h2 {color: #fff;} .home-section .welcome {width: 665px; float: left; position: relative; margin: 0;} .home-section .examples {width: 235px; float: left; position: relative; margin: 0 0 0 60px;} .home-section .examples h2 {line-height: 26px;} .home-section .support {width: 665px;} #body.row1 {clear: both; background: #fff; width: 100%; padding: 50px 0; overflow: hidden;} #body.row2 {clear: both; background: #eff8ff; width: 100%; padding: 50px 0 360px;} #body.row2B {clear: both; background: #eff8ff; width: 100%; padding: 50px 0 60px;} #body.row3 {clear: both; background: #2078cd; width: 100%; padding: 0px 0px 50px 0px;} .row3_insert {color: #fff;} .row3_insert a {color: #fff; text-decoration: underline; font-weight: bold;} .row3_insert a:hover {color: #7dcaff;} .row3_insert h2 {font-size: 24px; line-height: 24px; text-transform: uppercase; padding: 50px 0 0 265px; color: #fff;} .row3_insert p {margin-left: 265px;} ul.arrow_bullet {list-style-image: url('../images/common/aside_arrow.png'); margin: 10px 16px 0; padding: 0;} ul.arrow_bullet li {font-weight: bold; margin: 5px 0; padding: 0;} /* Footer */ #footer {clear: both; width: 100%; height: 350px; overflow: hidden; position: relative; z-index: 1; margin: -350px auto 0; padding: 0; color: #6e6d6d;} #footerB {clear: both; width: 100%; height: 350px; overflow: hidden; position: relative; z-index: 1; margin: -50px auto 0; padding: 0; color: #6e6d6d;} /* Footer inserts */ .footer_insert {color: #fff;} .footer_insert a {color: #fff; text-decoration: underline; font-weight: bold;} .footer_insert a:hover {color: #7dcaff;} .footer_insert h2 {font-size: 24px; line-height: 24px; text-transform: uppercase; padding: 50px 0 0 265px; color: #fff;} .footer_insert p {margin-left: 265px;} .footer_insert figure {width: 232px; height: 232px; position: absolute; left: 0; top: -13px;} figure#insert_1 {background: url('../images/common/footer_insert_photo.png') no-repeat 0 0;} /* Footer elements */ #legal {position: absolute; left: 265px; top: 220px; margin: 0; padding: 0;} #credit {position: absolute; right: 10px; top: 220px; margin: 0; padding: 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;} /* Video player */ .player {display: block; width: 480px; height: 320px; margin: auto;} /* 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 0 20px 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; list-style: none; display: block;} 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;} }