/* Theme Name: Alpha Web Customized Template: Divi */ /* http://www.cedankindergarten.com.sg/ */ /* Change logo size */ .et_fixed_nav #logo {max-height: 120px;} /* Hide breadcrumb on homepage */ .page-id-115 #breadcrumbs {display:none;} #breadcrumbs {display:none;} /* delete line below if breadcrumb is enabled */ body:not(.page-id-115) #main-content > .container {margin-top :20px;} /* Hide age title on homepage */ .page-id-115 .main_title {display:none;} /* Yoast breadcrumb initial settings */ #breadcrumbs {width:1080px; padding-top:10px; padding-bottom:0px; margin-left:auto; margin-right:auto;} /* breadcrumb link for ancestor pages */ #breadcrumbs a {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left:4px; padding-right:4px; font-size:12px; color:black ; text-transform:uppercase; } /* breadcrumb link for current pages */ .breadcrumb_last {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left:4px; font-size:12px; text-transform:uppercase;} /* Set body font to 100% of browser default size, which is typically 16px */ body {font-family: boogaloo, cursive; font-size: 14px;} P {font-family: 'Open Sans', Arial, sans-serif; text-align:justify;} h1, h2, h3, h4, h5, h6, .tve_btn_txt, .event-list-cal-title, .tve_lead_generated_inputs_container button{font-family: boogaloo, cursive;} h1 {font-size: 22px; color: #4E4E52; text-transform: uppercase; } h2 {font-size: 20px !important; color: #4E4E52; XXfont-weight: 800;} h3 {font-size: 18px; color: #4E4E52; XXfont-weight: 800; } /* important to override Thrive's !important settings */ h4 {font-size: 16px !important; color: #4E4E52; } /* pages not created by Divi editor, padding-bottom 50 to match those created by Divi editor */ #left-area { padding-bottom: 50px;} /* set top and padding-top to 0 to get rid of the gap on top */ #main-header {top: 0 !important; padding-top :0 !important; padding-bottom: 0px; -webkit-box-shadow:none; box-shadow:none;} .et-fixed-header {-webkit-box-shadow:none !important; box-shadow:none !important;} #main-content .container {padding-top:30px;} /* Set the left-area right margin when the page is using a right sidebar */ .et_right_sidebar #left-area {width: 835px;} .et_right_sidebar #left-area {margin-right: 20px;} /* Set the vertical divider between left area and right sidebar */ .et_right_sidebar #main-content .container:before {right:229px; background-color: #B9B9C7;} a {color:#6B5DBA;} /* ===================== Header settings ============================================== */ /* Set header background color to yellow */ #main-header .container.clearfix {background-color:yellow;} /*min-height must match logo height set here--> t_fixed_nav #logo {max-height: 100px;} to force et-top-navigation go entirely under the logo */ .aw-logo-slogan {min-height:120px; padding-left:130px;} .aw-chinese-name {color: #D84030; font-size:16px; font-weight:600; line-height:1.2em; padding-bottom:5px; padding-top:35px} .aw-english-name {color: blue; font-size:13px; font-weight: 600; line-height:1.2em; padding-bottom:0px;} /* =====================END Header settings ============================================== */ /*=========================================== MENU SETTINGS ============================== */ /* Set top menu paddings and margin */ /* Set the top padding to 18px (same as Divi default #main-header=18px when header is not fixed) so that the top menu stayed fixed when scroll down */ /* Not necessary for this since padding-top has been set to 0 to get rid of the gap on top */ .XXXet-fixed-header {padding-top :18px !important;} /* Set pointer for both top and nad mobile menu link which starts with "#" to default arrow, indicating it can't be clicked */ #top-menu li a[href^="#"] {cursor: default;} #top-menu li {padding-right:12px;} /* Set menu link color */ #top-menu-nav ul.nav li a {color: white; font-size: 14px; font-weight:normal; text-transform: uppercase; padding-left:8px; padding-right:8px; padding-bottom: 2px;} /* sub menu settings */ .nav li ul.sub-menu {background-color: #0E0EFE; } #top-menu-nav ul.sub-menu li a {color: #white;} /* menu link hover settings #top-menu-nav ul li a:hover*/ nav#top-menu-nav ul li.menu-item a:hover { background-color:transparent; color:yellow; } /* Active menu link setings */ #main-header .nav#top-menu li.current-menu-ancestor > a, #main-header .nav#top-menu li.current-menu-item > a { color:yellow; padding-left:10px; padding-right:10px;} /*==== mobile menu settings ====*/ /* mobile menu toggle icon on the right */ .mobile_nav .mobile_menu_bar::before {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #0E0EFE; color: white !important;} .et_mobile_menu {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; top: 120px; padding-left:10%; padding-right:10%; width:100%;} #mobile_menu {background-color:#0E0EFE;} #mobile_menu li a {color:white; font-size:15px; letter-spacing:1px; border-bottom-color: #AEB0B5;} #mobile_menu li a:hover {color:yellow;} #mobile_menu li.current-menu-ancestor > a, #mobile_menu li.current-menu-item > a {color:yellow; font-size:18px; font-weight:normal;} .et_mobile_menu .menu-item-has-children > a {font-weight:normal;} /*======================================= END MENU SETTINGS ============================== */ /*====================================== SIDEBAR Widget SETTINGS ========================= */ #sidebar .et_pb_widget {margin-left: 10px; } .widget_black_studio_tinymce {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .widget_black_studio_tinymce h4:after {content:' '; display:block; margin-top: 10px; border-bottom:1px dotted white;} #black-studio-tinymce-2 {background-color: #5CAF91; padding: 30px 25px 10px 25px;} #black-studio-tinymce-3 {background-color: #C0283F; padding: 30px 25px 20px 25px;} #black-studio-tinymce-4 {background-color: #E98001; padding: 30px 25px 20px 25px;} #black-studio-tinymce-2 h4, #black-studio-tinymce-3 h4, #black-studio-tinymce-4 h4 {color: white; font-size :18px !important; text-align: center; } #black-studio-tinymce-3 P, #black-studio-tinymce-4 P {color:white;} #black-studio-tinymce-2 .event-list-cal-date {font-size :15px;} #black-studio-tinymce-2 .event-list-cal-title {font-size :17px; line-height:1.0em;} .textwidget .small-button {background-image:none; background-color:white; border: none; border-radius:2px; color:#515152 !important; -webkit-box-shadow: none; box-shadow: none; text-shadow: none; font-family: boogaloo, cursive; font-size: 15px; font-weight:normal !important;} .textwidget .small-button:hover {background-color:#515152; color:white !important;} /* upcoming events widget */ .et_pb_widget .upcoming-event-1 a:hover {color: white !important;} /*================================== END SIDEBAR Widget SETTINGS ========================= */ .main_title, .aw-page-title h1 {color: #4E4E52;} .aw-first-divi-section .et_pb_row:nth-of-type(1) {padding-top:0px;} /* Homepage main container */ .page-id-115 #main-content .container {padding-top:10px;} /* ============= PROJECT page with GRID regular and filterable portfolio ===============*/ /* Overwrite the image size set inline */ div[class*="portfolio_grid"] .project img {width: 100% !important;} /* Set the overlay color when hover on image */ .et_portfolio_image .et_overlay {background-color: rgba(52, 56, 150, 0.6);} /*================== END PROJECT page with GRID portfolio ==============================*/ /* ================== BLOG page ========================================================*/ /* Set the border of the grid blog for all media query */ .et_pb_blog_grid .et_pb_post {border: 1px solid #d9d9d9;} /* ================== END BLOG page ====================================================*/ /*======================== Elegant icon fonts settings =================================*/ .aw-eticon:before {font-family: 'ETmodules'; font-size:17px; color:#353635; white-space: pre; vertical-align: middle;} .aw-eticon-phone:before {content: "\e090 "; xfont-size:16px; xvertical-align: middle;} .aw-eticon-mobile:before {content: "\e00b ";} .aw-eticon-fax:before {content: "\e103 ";} .aw-eticon-fax2:before {content:"\e0fa ";} .aw-eticon-email:before {content: "\e010 ";} .aw-eticon-email2:before {content: "\e076 ";} /*======================== END Elegant icon fonts settings ==============================*/ /*========================== Gravity form settings =======================================*/ /* Set the properties of the form wrapper */ div[id^="gform_wrapper_"] {margin-top:0; width: 60%;} /* The container of the form */ /* Have to use #left-area ID here to overcome the specificity of Divi CSS with the same ID */ #left-area div[id^="gform_wrapper_"] .gform_fields {padding-left: 0;} /* Set to border-box for each field so that the fields and their respective field error box are the same size even though with padding difference */ div[id^="gform_wrapper_"] .gfield {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} div[id^="gform_wrapper_"] .gform_body .top_label .gfield_label {margin-top:20px;} /* Set the left padding of checkbox field, have to use #left-area ID here to overcome the specificity of Divi CSS with the same ID */ #left-area div[id^="gform_wrapper_"] .gfield_checkbox {padding-left: 0;} .ginput_container .gfield_checkbox input[type="checkbox"] {-webkit-appearance: checkbox !important;} /* Set the left padding of radio button field, have to use #left-area ID here to overcome the specificity of Divi CSS with the same ID */ #left-area div[id^="gform_wrapper_"] .ginput_container .gfield_radio {padding-left: 0;} /* display the radio buttons horizontally */ div[id^="gform_wrapper_"] .gfield_radio li {margin-right:20px; float: left;} /* The input circle of radio button */ div[id^="gform_wrapper_"] .gfield_radio li input {margin-left:0;} div[id^="gform_wrapper_"] .gfield_radio li label {margin-left:18px;} .XXXXginput_counter {font-family: 'Open Sans', Arial, sans-serif; font-size:14px; } /* To make the email confirmation box go to the next line */ div[id^="gform_wrapper_"] .ginput_right {float:none; clear:both;} /* Set the wdth of both email and email confirmation box to 100% since they are on differents lines now */ div[id^="gform_wrapper_"] .ginput_container.ginput_complex .ginput_left, div[id^="gform_wrapper_"] .ginput_container.ginput_complex .ginput_right {width:100%;} /* General settings for text, select and textarea */ div[id^="gform_wrapper_"] .gfield .ginput_container input[type="text"], div[id^="gform_wrapper_"] .gfield .ginput_container select, div[id^="gform_wrapper_"] .gfield .ginput_container textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width:100%; border: 1px solid #C3DECD; font-size:14px; margin-left:0; border-radius: 0; } /* Set the left padding of dropdown and list boxes */ div[id^="gform_wrapper_"] select option {padding-left:15px;} /* set the padding-left of dropdown boxes */ div[id^="gform_wrapper_"] .ginput_container select {padding-left:7px;} /* ===== "Multi select" with "enhanced user interface ======*/ /* The inner container, has to use !important to overcome the inline css */ div[id^="gform_wrapper_"] .ginput_container .chosen-container {width:100% !important;} /* Set the border color and remove box-shadow when highlighted */ div[id^="gform_wrapper_"] .chosen-container-active .chosen-choices {border: 1px solid #BCBEC2; -webkit-box-shadow:none; box-shadow:none;} /* removing the gradient background-image */ div[id^="gform_wrapper_"] .chosen-container-multi .chosen-choices {background-image:none;} /* set the height of the "click to select" input box */ div[id^="gform_wrapper_"] .chosen-container-multi .chosen-choices li.search-field input[type="text"] {height:25px;} /* Remove box-shadow of the dropdown window */ div[id^="gform_wrapper_"] .chosen-container .chosen-drop {-webkit-box-shadow: none; box-shadow:none;} /* Set the highlited item background color in the drop down ist */ div[id^="gform_wrapper_"] .chosen-container .chosen-drop .chosen-results .highlighted {background: #AE7FD4;} /* ===== END "Multi select" with "enhanced user interface ======*/ /* This is for email fields with confirmation */ /* Have to use !important on width to overcome Gravity form's css with !important */ div[id^="gform_wrapper_"] .gfield .ginput_complex.ginput_container input[type="text"] {width:100% !important;} /* Set the width of date fields */ div[id^="gform_wrapper_"] .gfield_date_day {width: 70px;} div[id^="gform_wrapper_"] .gfield_date_month {width: 70px;} div[id^="gform_wrapper_"] .gfield_date_year {width: 80px;} div[id^="gform_wrapper_"] .gfield_time_ampm {width: 50px;} /* Set the width of dropdown date fields */ div[id^="gform_wrapper_"] .gfield_date_dropdown_day {width: 75px; margin-right: 12px;} div[id^="gform_wrapper_"] .gfield_date_dropdown_month {width: 75px; margin-right: 12px;} div[id^="gform_wrapper_"] .gfield_date_dropdown_year {width: 75px;} /* Remove the styling of dropdown boxeson iPad, place a transparent background-image with an down arrow on the right*/ div[id^="gform_wrapper_"] .ginput_container select { background-image: url('../../uploads/2014/10/gravity-input-transparent-BG.png'); background-position: right center; -webkit-appearance: none; } /* Remove the inner shadow of textarea on iPad */ div[id^="gform_wrapper_"] textarea {-webkit-appearance: none;} /* The text that indicate the max character allowed for the field */ div[id^="gform_wrapper_"] div.charleft {font-family: 'Open Sans', Arial, sans-serif; font-size:12px; line-height: 1.1em; color:#7F8A84;} /* Form footer for the submit button */ div[id^="gform_wrapper_"] .gform_footer {margin-top: 0;} /* Remove border-radius on button */ .gform_button {border-radius: 0;} /* When using datepicker on Divi theme, there's a gap below the footer, hiding this solve the problem*/ #ui-datepicker-div {display:none; } /* Settings for field error warning */ div[id^="gform_wrapper_"] .gform_fields .gfield.gfield_error {background: #F7EDEE; border : none; width:100% } .gform_wrapper .aw-contact-form .gform_footer {padding-top:0; padding-bottom:0;} /*======================= END Gravity form settings =======================================*/ .page-id-115 #left-area {padding-bottom: 10px;} /*======================= Homepage Column layout ==========================================*/ .aw-column-title {font-size: 24px !important; color:white; padding-bottom:25px; border-bottom: 2px dotted white;} .page-id-115 .thrv_columns .tve_colm.tve_foc { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding:2% !important; margin-right:2%; margin-top:20px; width: 23.5%; color:white;} .page-id-115 .thrv_columns .tve_colm.tve_foc:nth-of-type(1) {background-color:#C0283F;} .page-id-115 .thrv_columns .tve_colm.tve_foc:nth-of-type(2) {background-color:#E98001;} .page-id-115 .thrv_columns .tve_colm.tve_foc:nth-of-type(3) {background-color:#F8C901; overflow:auto; } .page-id-115 .thrv_columns .tve_colm.tve_foc:nth-of-type(4) {background-color:#5CAF91; margin-right:0;} .page-id-115 .thrv_columns .tve_colm.tve_foc .tve_image_caption {width:100% !important;} .page-id-115 .tve_btn_txt {font-size: 14px; xfont-weight: 600; text-shadow:none;} /* Newsletter text box */ .tve_flt .thrv_lead_generation input[type="text"], .tve_flt .thrv_lead_generation input[type="text"]:hover, .tve_flt .thrv_lead_generation input[type="text"]:focus {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-width:1px;} .tve_flt .thrv_lead_generation input[type="text"] {color: #5B585C !important; font-size:13px; font-family: 'Open Sans', Arial, sans-serif;} .tve_flt .thrv_lead_generation .tve_lead_generated_inputs_container button {font-size: 16px; text-shadow:none;} /* ---- MailChimp for WordPress Lite ----- */ .mc4wp-form {margin-top:0px;} .mc4wp-form input[type="text"] {-webkit-appearance: none; -webkit-border-radius:0px; font-family: 'Open Sans', Arial, sans-serif; height:36px; margin-bottom:6px; border:none; padding:4px 8px; -webkit-border-radius:0px;} .mc4wp-form input[type="email"] {-webkit-appearance: none; -webkit-border-radius:0px; font-family: 'Open Sans', Arial, sans-serif; height:36px; margin-bottom:6px; border:none; padding: 4px 8px;} .mc4wp-form input[type="submit"] {-webkit-appearance: none; width: 100%; height:36px; border:none; border-radius:2px; font-family: boogaloo, cursive; font-size:15px; background-color: rgb(221, 221, 221); color: rgb(81, 81, 82);} .mc4wp-form input[type="submit"]:hover {background-color: #515152; color:white;} /* The mailchimp success message after clicking "sign up" button */ .mc4wp-success {color: rgb(81, 81, 82); font-weight: normal;} .aw-all-events-btn {margin-top:0; margin-left:14px;} /*======================= END Homepage Column layout =======================================*/ /*============================= Home page slider settings ==================================*/ .aw-slider-shortcode {padding-bottom:0;} .aw-slider-heading {font-size: 24px !important; padding:0 !important;} div#nextend-smart-slider-1 .smart-slider-canvas .aw-slider-heading a.aw-slider-button {font-family: 'Open Sans', Arial, sans-serif; background-color: #45BF55; font-size: 20px; font-weight:700; line-height:1.8em; padding:0 10px; margin-left:12px; border-radius:1px;} /*slogan layer */ [data-name="slogan layer"] {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: auto !important; top: 67% !important; left:5% !important; width: auto !important; padding:2% 3% !important; background-color:rgba(22, 22, 23, 0.9) !important;} /*============================ END Home page slider settings ===============================*/ /*======================= Event List Calendar ==================================*/ .event-list-cal-list .event-list-cal-date {border-right:none; font-family: 'Open Sans', Arial, sans-serif; font-size:16px; font-weight : 500; color: #3A393B;} /* push the event title to the next line */ .event-list-cal-title {display:block; margin-bottom: 10px; font-size:18px; } .event-list-cal-title a {color: white;} /* ---- Single event page ----*/ .event-list-cal h1 {font-size:20px;} .single-event-list-cal .event-list-cal #tve_editor {padding:2% 2% 2% 2%;} /* Hide the event date, let users enter own event dates (some event has 2 sessions) */ .event-list-cal-info {display:none;} /*======================= END Event List Calendar ==============================*/ /*======================= Preschool Enrichment page ========================================*/ .aw-semester {color: #46474F;} .aw-enrichment-content-box .tve_cb {background-color: #F5F5F7 !important; padding:0 5% !important;} .aw-enrichment-content-box hr {background-color: #9C9CB8 !important;} .aw-enrichment-content-box .tve_image {margin-bottom: 20px;} .aw-enrichment-title {color:#4E4E52;} .aw-enrichment-date {color:#4E4E52 !important;} .aw-no-top-padding {padding-top: 0;} /* The image wrapper, make sure is always 100% on different screen */ .aw-enrichment-content-box .tve_image_caption {width:100% !important;} /*======================= Preschool Enrichment page ========================================*/ /*=============================== Kindergarten page ========================================*/ .aw-preschool-type {color: #4E4E52;} .aw-preschool-content-box .tve_cb {background-color: #F5F5F7 !important; padding:0 5% !important;} .aw-preschool-content-box hr {background-color: #9C9CB8 !important;} .aw-preschool-content-box .tve_image {margin-bottom: 20px;} .aw-preschool-desc {color: #6D6F7A;} .XXXaw-preschool-button {margin-bottom: 0;} .XXXaw-preschool-button .tve_btn.tve_smallBtn {background-color:#5CAF91;} .XXXaw-preschool-button .tve_btn a.tve_btnLink {padding: 12px 12px; text-shadow:none;} .XXXaw-preschool-button .tve_btn_txt {font-size:16px;} /* The image wrapper, make sure is always 100% on different screen */ .aw-preschool-content-box .tve_image_caption {width:100% !important;} /*============================== END Kindergarten page =====================================*/ /*============================= About Us page ==========================================*/ #tve_editor .aw-about-us-box {margin-bottom: 0px;} #tve_editor .aw-about-us-box .tve_cb {background-color: #F5F5F7;} #tve_editor .aw-about-us-box .tve_cb_cnt:nth-of-type(2) {padding-top:0px;} #tve_editor .aw-about-us-subtitle {color:#4E4E52; margin-top: 10px; padding-bottom:0px;} #XXXtve_editor .aw-about-us-content {color:#3E453F;} #tve_editor .aw-about-us-box hr {display:none;} #tve_editor .aw-about-us-box P {color:#3E453F;} /*============================= END About Us page =======================================*/ /*============================= General info page ==========================================*/ #tve_editor .aw-general-info-box {margin-bottom: 40px;} #tve_editor .aw-general-info-box .tve_cb {background-color:#F5F5F7;} #tve_editor .aw-general-info-box .tve_cb_cnt:nth-of-type(2) {padding-top:0px;} #tve_editor .aw-general-info-subtitle {color:#4E4E52; padding-bottom:0px;} #XXXtve_editor .aw-about-us-content {color:#3E453F;} #tve_editor .aw-general-info-box hr {display:none;} #tve_editor .aw-general-info-box P {color:#3E453F;} #tve_editor .aw-general-info-box .tve_cb_cnt:nth-of-type(1) {padding:4% 5% 2% 5%;} #tve_editor .aw-general-info-box .tve_cb_cnt:nth-of-type(2) {padding: 0 5% 4% 5%;} /* Thrive table wrapper */ .aw-general-info-box .thrv_table {margin-bottom:0;} .aw-general-info-box table {table-layout:fixed; word-wrap: break-word; border-collapse: collapse;} #tve_editor .aw-general-info-box table, #tve_editor .aw-general-info-box th, #tve_editor .aw-general-info-box tr, #tve_editor .aw-general-info-box td {border: 1px solid #B5BAB6 !important;} #tve_editor .aw-general-info-box td p {text-align:center;} #tve_editor .aw-general-info-box tbody tr td:nth-of-type(1) P {font-family: boogaloo, cursive; font-size: 18px;} .aw-general-info-box thead {Xbackground-color:pink !important;} /* table header font */ .aw-general-info-box th p {font-family: boogaloo, cursive; font-weight: normal; font-size: 20px; text-align: center;} #aw-operation-hours .aw-class-type {margin-top:30px; padding-bottom:0; color: #524E52;} #aw-operation-hours .aw-table-enrichment {color: #524E52;} .aw-general-info-box .thrv_content_container_shortcode {margin-bottom:10px;} .aw-general-info-box .tve_content_inner {display: table; width:100% !important;} .aw-general-info-box .tve_image_caption {float: left; margin-right:15px !important;} .aw-document-link {display: table-cell; vertical-align: middle; Xtext-align:left !important; width:100%;} /* can be deleted, this is using absolute position .aw-general-info-box .thrv_content_container_shortcode {margin-bottom:10px;} .aw-general-info-box .tve_content_inner {position: relative;} .aw-document-icon {float: left; margin-right:50px;} .aw-document-link { position: absolute; bottom: 0; left: 60px; } */ /* %%%%%%%%%%%%%%% can be deleted after testing display: table-cell on iPad %%%%%%%%%%%%%%% */ .aw-general-info-box-table .tve_content_inner { display: table; width:100% !important;} .aw-general-info-box-table .tve_image_caption {float: left; margin-top:auto !important; margin-bottom:auto !important; } /* .aw-document-icon-cell */ .aw-document-link-cell {display: table-cell; vertical-align: middle; text-align:left !important; width:100%;} /* %%%%%%%%%%%%%%% can be deleted after testing display: table-cell on iPad %%%%%%%%%%%%%%% */ /*============================= END General info pag =======================================*/ /*============================= Testimonials page ==========================================*/ .XXthrv_wrapper.thrv_testimonial_shortcode .tve_ts_o .tve_ts_imc {border-radius: 0 !important; border-width:1px;} #tve_editor .thrv_testimonial_shortcode .tve_ts_imc {border-radius: 0 !important; border-width:1px; border-color: #BECFC3;} #tve_editor .thrv_testimonial_shortcode .tve_image {border-radius: 0 !important; max-width:100%; max-height:none;} .tve_ts .tve_ts_o>span {font-size: 1.1em;} /* Set all testimonial font to italic except text in Chinese, add the class "aw-non-italic" to Chinese testimonial in Thrive editor */ .tve_ts_cn P:not(.aw-non-italic) {font-style: italic;} .tve_ts {width: 100%;} #tve_editor .tve_ts_cn {background-color: #F5F5F7;} #tve_editor .tve_ts_cn P {color:black;} .tve_ts {margin: 60px auto 40px auto !important;} #tve_editor .tve_ts_o {border-color: #BECFC3; color:#4E4E52 !important;} #tve_editor .tve_ts_o b {font-weight:normal;} /*============================= END Testimonials page ======================================*/ /*============================= Map and location page =======================================*/ .page-id-121 .thrv_columns {background-color: #F5F5F7;} .page-id-121 .thrv_columns .tve_twc {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 5% 5% 0 5% !important;} .XXpage-id-121 .thrv_columns h3 {font-size:20px;} .aw-operating-hours {display:inline;} .aw-white-space-pre {white-space: pre;} /* Set a bottom margin for all maps*/ .XXwpgmza_map {margin-bottom:40px;} #wpgmza_map_1 {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border:1px solid #D9D5D4;} .aw-map-short-code {padding-bottom: 0;} .tve_twc.tve_lst {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 10px;} /* set the backgroud color of pop-up window */ .gm-style div:nth-of-type(1) div:nth-of-type(3) div:nth-of-type(4) div:nth-of-type(1) div:nth-of-type(1) div:nth-of-type(4) {XXXXXbackground-color:#6AD9A0 !important;} .wpgmza_infowindow_title {font-family: boogaloo, cursive !important; font-weight:normal !important; font-size:18px; color: #4E4E52 !important;} /* Hide pop-up window coordinate */ .wpgmza_infowindow_address {display:none;} /*============================= END Map and location page ===================================*/ /*=================================== Gallery page ===========================================*/ [class^="bwg_album_extended_thumb_div_"], [class^="bwg_album_extended_text_div_"] {background-color: #F5F5F7 !important; border-style:none !important;} [class^="bwg_album_extended_text_div_"] {padding: 2% 3%!important;} [class^= "bwg_album_extended_div_"] {border-bottom:none !important;} [class^= "bwg_title_spun_"] {font-family: boogaloo, cursive !important; font-weight:normal !important; font-size:18px !important; color: #524E52 !important; } [id^="bwg_container"] [id^="bwg_container"] [class^="bwg_back_"] {font-family: boogaloo, cursive !important; font-weight:normal !important; font-size:20px !important; color: red!important; } /*image lightbox backgroud color */ .bwg_image_wrap {background-color: #302F2C;} /*===================================END Gallery page ========================================*/ /*=================================== Contact Us page ======================================*/ #tve_editor .aw-contact-us-box .tve_cb {background-color: #F5F5F7; padding: 2% 2% 0 2%;} #tve_editor .tve_cb P {color: #383838; text-shadow:none; } #tve_editor .tve_cb label {color: #4E4E52; font-weight:normal; font-size:16px;} #gform_submit_button_2 {font-family: boogaloo, cursive; background-color: rgb(81, 81, 82); color: white; border: none; border-radius: 2px; padding: 12px 20px; } #gform_submit_button_2:hover {background-color: #353538;} .gform_wrapper.aw-contact-form_wrapper input[type=text], .gform_wrapper.aw-contact-form_wrapper textarea {font-family: 'Open Sans', Arial, sans-serif;} .gform_wrapper.aw-contact-form_wrapper div.validation_error {font-weight:normal; font-size: 18px;} .gform_wrapper.aw-contact-form_wrapper .validation_message {font-family: boogaloo, cursive; font-size: 16px; font-weight:normal;} #gforms_confirmation_message {font-size: 18px;} /*================================== END Contact Us page ====================================*/ /*====================================== FAQ page ==========================================*/ .aw-faq-section {margin-top:50px !important; margin-bottom:20px !important; color: #4E4E52;} .aw-faq-question {margin-top:0; margin-bottom:20px;} #tve_editor .aw-faq-question .tve_cb {background-color: #F5F5F7;} .aw-faq-question .tve_cb .tve_cb_cnt:nth-of-type(1) {padding-bottom: 0;} .aw-faq-question .tve_cb .tve_cb_cnt:nth-of-type(1) h3 {color: #4E4E52;} .aw-faq-question .tve_cb .tve_cb_cnt:nth-of-type(2) {padding-top: 0;} .aw-faq-question .tve_cb hr {display: none;} /*===================================== END FAQ page ========================================*/ /*====================================== Career page ========================================*/ .aw-career-email {color: #0E0EFE;} .aw-job-category {margin-top:50px !important; margin-bottom:20px !important; color: #4E4E52;} .aw-job-opening {margin-top:0;} #tve_editor .aw-job-opening .tve_cb {background-color: #F5F5F7;} .aw-job-opening .tve_cb .tve_cb_cnt:nth-of-type(1) {padding: 30px 30px 0 30px;} .aw-job-opening .tve_cb .tve_cb_cnt h3 {color: #4E4E52; padding-bottom: 8px;} .aw-job-opening .tve_cb .tve_cb_cnt:nth-of-type(2) {padding: 0 30px 30px 30px;} .aw-job-opening .tve_cb hr {display: none;} .aw-job-chinese p {font-size:13px;} .aw-job-note {font-family: boogaloo, cursive; color: #4E4E52; font-size:18px; line-height: 1.3em; margin-top:20px;} /*====================================== END Career page =====================================*/ /*====================================== Events page =========================================*/ /* Hide info like --> by adminalphaweb | Dec 19, 2014 | Events | */ .event-list-cal .post-meta {display:none;} .archive .event-list-cal {font-family: 'Open Sans', Arial, sans-serif; background-color:#F5F5F7; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 3%; margin-top:20px; margin-bottom:40px;} .archive .event-list-cal h2 {XXfont-size:28px !important; text-transform: uppercase; margin-top:0;} /* ===== Single event page ==== */ .single .event-list-cal h1 {text-transform: uppercase;} .single .event-list-cal .event-list-cal-info {font-size: 20px;} .single .event-list-cal .event-list-cal-info b {font-weight: normal;} .single-event-list-cal #tve_editor {background-color:#F5F5F7; padding: 4% 5%; margin-bottom: 20px; } /* Change the color of PDF Embedder viewer */ .pdfemb-viewer {border-color:#8D918A !important;} /* Display PDF Embedder viewer bottom toolbar all the time*/ .XXXpdfemb-toolbar-bottom {display:block!important;} /* ===== END single event page ==== */ /*====================================== END Events page ======================================*/ /*START RESPONSIVE */ /*=========================================================================================================================*/ /*==========================================================================================================================*/ /*==========================================================================================================================*/ /*==========================================================================================================================*/ /*==========================================================================================================================*/ /*==========================================================================================================================*/ /*==========================================================================================================================* /* hide all responsive image by default */ .aw-responsive-section, .aw-responsive-img {display:none;} .aw-responsive-section .et_pb_row {padding-top:0 ; padding-bottom:0;} .aw-responsive-section .et_pb_column {padding-bottom:0;} .aw-responsive-section .et_pb_row img {margin-right:10px; margin-bottom:0;} /*--------------------------------------------------------------------------------------------------------------------------*/ @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { #aw-screen-maxW800-lscape--screen-maxH300, #aw-responsive-others-sect {display:inline;} } /* END media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px)*/ /*==========================================================================================================================*/ /*--------------------------------------------------------------------------------------------------------------------------*/ @media all and (max-width: 900px) { #aw-media-all-max900, #aw-responsive-others-sect {display:inline;} } /* END media all and (max-width: 900px) */ /*==========================================================================================================================*/ /*--------------------------------------------------------------------------------------------------------------------------*/ @media only screen and (min-width: 1405px) { #aw-min-1405, #aw-responsive-min-sect {display:inline;} } /* END media only screen and (min-width: 1405px) */ /*==========================================================================================================================*/ /*--------------------------------------------------------------------------------------------------------------------------*/ @media only screen and (min-width: 981px) { /* FIRST occurance */ } /* END media only screen and (min-width: 981px) */ /*==========================================================================================================================*/ /*--------------------------------------------------------------------------------------------------------------------------*/ @media only screen and (min-width: 1200px) { #aw-min-1200, #aw-responsive-min-sect {display:inline;} } /* END media only screen and (min-width: 1200px) */ /*==========================================================================================================================*/ /*--------------------------------------------------------------------------------------------------------------------------*/ @media only screen and (min-width: 1100px) { #aw-min-1100, #aw-responsive-min-sect {display:inline;} } /* END media only screen and (min-width: 1100px) */ /*==========================================================================================================================*/ /*--------------------------------------------------------------------------------------------------------------------------*/ @media only screen and (min-width: 1100px) and (max-width: 1405px) { #aw-min1100-max1405, #aw-responsive-minmax-sect {display:inline;} } /* END media only screen and (min-width: 1100px) and (max-width: 1405px) */ /*==========================================================================================================================*/ /*--------------------------------------------------------------------------------------------------------------------------*/ @media only screen and (min-width:981px) and (max-width: 1405px) { #aw-min981-max1405, #aw-responsive-minmax-sect {display:inline;} } /* END media only screen and (min-width:981px) and (max-width: 1405px) */ /*==========================================================================================================================*/ /*--------------------------------------------------------------------------------------------------------------------------*/ @media only screen and (min-width:981px) { /* SECOND occurance */ #aw-min-981, #aw-responsive-min-sect {display:inline;} #et-top-navigation, nav#top-menu-nav, #top-menu {float: none;} /* Set top menu paddings and margin */ #main-header nav#top-menu-nav, #main-header.et-fixed-header nav#top-menu-nav {padding: 13px 20px 10px 20px; background-color: #0E0EFE; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #main-header .container.clearfix {background-image: url('../../uploads/2015/02/header_background-1080_168.png'); background-repeat: no-repeat; background-position: right center; } /*======================= Homepage Column layout ==========================================*/ .page-id-115 .thrv_columns .tve_colm.tve_foc {height : 470px;} /*======================= END Homepage Column layout =======================================*/ } /* media only screen and (min-width:981px) */ /*==========================================================================================================================*/ /*--------------------------------------------------------------------------------------------------------------------------*/ @media only screen and (min-width: 981px) and (max-width: 1100px) { #aw-min981-max1100, #aw-responsive-minmax-sect {display:inline;} #breadcrumbs {width:960px;} /* Set the left-area right margin when the page is using a right sidebar */ .et_right_sidebar #left-area {width: 745px;} /* Set the vertical divider between left area and right sidebar */ .et_right_sidebar #main-content .container:before {right:200px;} /*====================== Home page slider settings ==============================*/ .aw-slider-heading {font-size: 24px !important;} div#nextend-smart-slider-1 .smart-slider-canvas .aw-slider-heading a.aw-slider-button {font-size:20px;} /*====================== END Home page slider settings ==========================*/ } /* END media only screen and (min-width: 981px) and (max-width: 1100px) */ /*==========================================================================================================================*/ /*--------------------------------------------------------------------------------------------------------------------------*/ @media only screen and (max-width: 980px) { #aw-max-980, #aw-responsive-max-sect {display:inline;} #breadcrumbs {width:90%;} /*===.container (for both the header and the main content)--> page NOT by divi builder ===*/ /*=== #main-content .et_pb_row --> page by divi builder ===*/ .container, .et_pb_container, #main-content .et_pb_row {width:90%; margin-left:5%; margin-right:5%;} /* ===================== Header settings ============================================== */ .aw-logo-slogan {float:left; padding-left: 0px;} /* ===================== Header settings ============================================== */ /* Set the left-area right margin when the page is using a right sidebar */ .et_right_sidebar #left-area {width: auto;} .et_right_sidebar #left-area {margin-right: 0px;} /*====================================== SIDEBAR Widget SETTINGS ========================= */ #black-studio-tinymce-2 {padding: 6% 8% 3% 8%;} #black-studio-tinymce-3 {padding: 6% 8% 5% 8%;} #black-studio-tinymce-4 {padding: 6% 8% 5% 8%;} #black-studio-tinymce-2 h4, #black-studio-tinymce-3 h4, #black-studio-tinymce-4 h4 {font-size :24px !important; } /*================================== END SIDEBAR Widget SETTINGS ========================= */ /*====== PROJECT page with GRID portfolio ======================================================*/ /* et_pb_column_4_4 */ /* Have to use !important here as Divi uses !important on all these values */ /* Set to border-box got both regular portfolio and filterable portfolio */ div[class*="portfolio_grid"] .project {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} /* Have to use !important here as Divi uses !important on all these values */ .et_pb_portfolio_grid .project {width:47% !important; height: auto !important;} /* set the right margin of the project on first column */ .et_pb_portfolio_grid .project.type-project {margin-right: 6% !important; float: left !important;} /* set the right margin of the project on second column */ .et_pb_portfolio_grid .project:nth-child(2n) {margin-right: 0 !important;} /*======= Filterable portfolio settings ===== */ /* The wrapper of filterable portfolio, increase this to 106 % so that it can accommodate the right margin of both columns. structure is project1-47%, RM- 6%, project2-47%, RM- 6% (The last 6% will not be visible as it will be be pushed off screen). Set the height to auto to overwrite inline height settings of this wrapper */ .et_pb_filterable_portfolio .et_pb_portfolio_items {height: auto !important; width:106%;} /* Set right margin for both column, the right margin of right colum will not be visible since it is pushed off screen. width = 47/106 = 44.33% (need 47% of the 100% of the container that is visble ) margin-right: 6/106 = 5.66% (need 6% of the 100% of the container that is visble )*/ .et_pb_filterable_portfolio_grid .et_pb_portfolio_items_wrapper .project {position:static !important; width: 44.33%; margin-right: 5.66%;} /*====== END PROJECT page with GRID portfolio ====================================================*/ /*======= BLOG page with grid layout =============================================================*/ /* Must set height to AUTO here since changing the article position to STATIC from ABSOLUTE, must use !important here since height was set inline */ .et_pb_blog_grid {margin-right:0; height:auto !important;} /* Set the properties of the blog outer box, must use !important for position to overcome inline settings */ .et_pb_blog_grid_wrapper .et_pb_blog_grid article {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position:static !important; width:47% ; margin-right:6% ; float:left ; padding:19px;} /* Set the right margin of second box to 0 so that the box wouldn't be forced to the next line, this setting will overwrite the margin-right:6% set above */ .et_pb_blog_grid article:nth-child(2n) {margin-right:0;} /* Set the margin to negative 20px so that it will stretch out to fill the padding(19px) + border(1px) of the image for all media query value*/ .et_pb_blog_grid article .et_pb_image_container {margin-top: -20px; margin-left: -20px; margin-right: -20px;} /* Set the image to fill the entire width of the container */ .et_pb_blog_grid article .et_pb_image_container a img {width:100%;} /* Set the bottom margin of blog header */ .et_pb_blog_grid article h2:nth-of-type(1) { margin-bottom:12px;} /*======= END BLOG page with grid layout ===========================================================*/ /* Gravity form wrapper */ div[id^="gform_wrapper_"] {width: 70%;} } /* END media only screen and (max-width: 980px) */ /*==========================================================================================================================*/ /*--------------------------------------------------------------------------------------------------------------------------*/ @media only screen and (min-width: 768px) and (max-width: 980px) { #aw-min768-max980, #aw-responsive-minmax-sect {display:inline;} /* Set to 92% here to ensure that all responsive content width is wider than or equal to Divi default width */ #breadcrumbs {width:92%;} /*===.container (for both the header and the main content)--> page NOT by divi builder ===*/ /*=== #main-content .et_pb_row --> page by divi builder ===*/ .container, .et_pb_container, #main-content .et_pb_row {width:92%; margin-left:4%; margin-right:4%;} /*====================== Home page slider settings ==============================*/ .aw-slider-heading {font-size: 23px !important;} div#nextend-smart-slider-1 .smart-slider-canvas .aw-slider-heading a.aw-slider-button {padding:0 5px; font-size:20px; margin-left:10px;} /* slogan layer */ [data-name="slogan layer"] {left:4% !important;} /*====================== END Home page slider settings ==========================*/ /*======================= Homepage Column layout ================================*/ .page-id-115 .thrv_columns .tve_colm.tve_foc {width:48% !important; padding:3% !important; min-height:410px;} .page-id-115 .thrv_columns .tve_colm.tve_foc:nth-of-type(3) {height:410px;} .page-id-115 .thrv_columns .tve_colm.tve_foc:nth-of-type(odd) {margin-right:4% !important;} .page-id-115 .thrv_columns .tve_colm.tve_foc:nth-of-type(even) {margin-right:0 !important;} /*======================= END Homepage Column layout ============================*/ } /* END media only screen and (min-width: 768px) and (max-width: 980px) */ /*==========================================================================================================================*/ /*--------------------------------------------------------------------------------------------------------------------------*/ @media only screen and (max-width: 782px) { #aw-max-782, #aw-responsive-max-sect {display:inline;} } /* END media only screen and (max-width: 782px) */ /*==========================================================================================================================*/ /*--------------------------------------------------------------------------------------------------------------------------*/ @media only screen and (max-width: 767px) { #aw-max-767, #aw-responsive-max-sect {display:inline;} /* Gravity form wrapper */ div[id^="gform_wrapper_"] {width: 85%;} .aw-chinese-name {font-size:15px;} .aw-english-name {font-size:13px;} /*======================= Homepage Column layout ===============================*/ .page-id-115 .thrv_columns .tve_colm.tve_foc {width:100%;} /*======================= END Homepage Column layout ===========================*/ /*====================== Home page slider settings ==============================*/ .aw-slider-heading {font-size: 21px !important;} div#nextend-smart-slider-1 .smart-slider-canvas .aw-slider-heading a.aw-slider-button {padding:0 5px; font-size:16px; margin-left:3px;} /* slogan layer */ [data-name="slogan layer"] {left:4% !important;} /*====================== END Home page slider settings ==========================* /*======================= Homepage Column layout ===============================*/ .page-id-115 .thrv_columns .tve_colm.tve_foc {padding:6% !important;} .Xpage-id-115 .thrv_columns .tve_colm.tve_foc:nth-of-type(odd) {margin-right:4% !important;} .XXpage-id-115 .thrv_columns .tve_colm.tve_foc:nth-of-type(even) {margin-right:0 !important;} /*======================= END Homepage Column layout ============================*/ } /*END media only screen and (max-width: 767px) */ /*==========================================================================================================================*/ /*--------------------------------------------------------------------------------------------------------------------------*/ @media only screen and (max-width: 479px) { #aw-max-479, #aw-responsive-max-sect {display:inline;} /* Change logo size */ .XXXXet_fixed_nav #logo {max-height: 40px;} /*h1 { font-size: 26px; } h2 { font-size: 22px; } h3 { font-size: 18px; } h4 { font-size: 16px; } h5 { font-size: 15px; } */ .et_mobile_menu {top: 80px;} /* ===================== Header settings ============================================== */ .et_fixed_nav #logo {max-height: 80px;} .aw-logo-slogan {min-height: 80px;} .aw-chinese-name {font-size:12px; padding-top:20px} .aw-english-name {font-size:10px;} .XXXaw-english-slogan {display:none;} /* ===================== Header settings ============================================== */ /*====== project page with grid portfolio ============*/ /* .et_pb_column_4_4, for both project and filterable project */ /* Have to use !important here as Divi uses !important on all these values */ .et_pb_portfolio_grid .project {width: 100% !important;} .et_pb_portfolio_grid .project.type-project {margin-right: 0 !important; float:none !important;} /* The wrapper of filterable portfolio */ .et_pb_filterable_portfolio .et_pb_portfolio_items {width: 100%;} .et_pb_filterable_portfolio_grid .et_pb_portfolio_items_wrapper .project {width: 100%; margin-right: 0;} /*====== END project page with grid portfolio ============*/ /* BLOG page with grid layout */ .et_pb_blog_grid_wrapper .et_pb_blog_grid article {width: 100%; margin-right: 0; float:none;} /* Gravity form wrapper */ div[id^="gform_wrapper_"] {width: 100%;} } /* END media only screen and (max-width: 479px) */ /*==========================================================================================================================*/ /*END RESPONSIVE */ /*==========================================================================================================================*/