/* Document : main Created on : 11/07/2011, 10:52:07 AM Author : James Kumar Description : Main stylesheet with default layout and styles */ /*body {font-size:1em;font-family:Arial,Verdana, Helvetica, sans-serif;background-image: url(/images/body_bdg.jpg); background-repeat: repeat;margin:0;padding:0;}*/ body {font-size:12px;font-family:Arial,Verdana, Helvetica, sans-serif;background-color: #2C2C2C;margin:0;padding:0;} td {color:#000000;font-size:1em;font-family:Arial,Verdana, Helvetica, sans-serif;} /****************** LINKS ****************************/ a {text-decoration:none;color:#2C2C2C;} a:hover {color:#1f6db1;} /****************** HEADERS **************************/ h1 {color:#2C2C2C;padding-top:0px; padding-bottom:10px;padding-left:0px;margin-left:0px;} h2 {margin:0px;padding:0px; color:#2C2C2C;padding-top:0px; padding-bottom:10px;padding-left:0px;} h3 {margin:0px;padding:0px; color:#2C2C2C;} h4 {margin:0px;padding:0px} /****************** MAIN TEMPLATE ********************/ /* #master_container {width:1000px;margin-left:auto; margin-right:auto;background-image:url('/images/ocean_bdg.png'); background-repeat: no-repeat;} */ #master_container {max-width:1000px; width: 100%;margin-left:auto; margin-right:auto; background-repeat: no-repeat; background-color: #656565; background-size: 100% auto;overflow-x: hidden; position: relative} #header_container {max-width:1000px; width: 100%; margin-left:auto; margin-right:auto;height:auto;position: relative; background-color: #2C2C2C } #header_height_force { padding-top: 8% } #logo {position: absolute; left:5px; top:3.5%;height: 120%; width: auto} #logo img { width: auto; height: 100% } #hd_phone { position: absolute; height: 60%; width: auto; top: 5%; left: 55%;left: calc( 80% - 180px ) } #hd_phone img { height: 100%; width: auto} #header_search { position: absolute; left: 25%; top:50% } #header_icons { position: absolute; left: calc( 80% - 230px ); top: 15%; height: 35px; } #header_icons img { max-height: 100%; width: auto } #header_right_col { position: absolute; right: 10px; top: 5px } #selectPortal { position: absolute; top: 50%; right: 0px; text-align: right } #selectPortal select { height: 24px; width: 140px; margin: 5px 10px 0px 0px; padding: 1px} #header_right_col a { color: #ffe03a } #navWrapper { background-color: #2C2C2C; overflow-x: visible; } #topNav { float: right; margin-right:5px; border-top: 1px solid #CCC; /*border-bottom: 1px solid #CCC;*/ width: 100%;max-width:800px;} @media screen and (max-width: 800px) { #topNav {margin-left:auto; margin-right:auto; border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; width: 100%;} } #topNav ul {padding:0px;margin:0px; display: block;} #topNav li {list-style:none;float:left; display: block;} #topNav li a {display:block;padding:0px 16px 0px 16px; line-height:35px; font-size:1em;font-weight:normal;color:#DDD; } #topNav li a:hover {color:#666; background-color: #FFF; border-left: 1px solid #CCC; border-right: 1px solid #CCC; padding:0px 15px 0px 15px; } li.clear { clear: both } /************************ * * * MEGAMENU * * * ************************/ #megamenu {position: absolute; top:-3px; max-width:984px; width: 100%; z-index:999;margin-top:0px; padding-top:0px;} #topNav li.mega_item, #topNav li.sub_title {list-style:none; display: block; float: none; font-family: arial, verdana, helvetica, sans-serif;font-size:0.9em;color:#9a9a9a;} div.mega_menu_container { display: none; z-index: 20; top: 36px; left: 0px; position: absolute; width: 466px } div.mega_menu {max-width:464px; background-color: rgba(200,200,200,0.93); border:1px solid #AAA; border-radius: 0px; margin-right: -1px } div.megamenu_section {padding-top:0px;width: 232px; float: left; } #topNav li.mega_item { border-top: 1px solid #AAA; border-radius: 0px; border-right:1px solid #AAA; min-height: 30px; margin-top: -1px; margin-left: -1px; margin-right: -1px; line-height: 30px; } #topNav li.sub_title { border-top: 1px solid #AAA; border-radius: 0px; border-right:1px solid #AAA; min-height: 30px; margin-top: -1px; line-height: 30px; } #topNav li.sub_title div { background-color: rgba( 255, 255, 255, 0.7 ); margin-right: 1px; margin-left: 1px; width: 231px; border-right:1px solid #AAA; } #topNav div.mainNav {position: relative} #topNav li.sub_title a {font-weight: bold; text-transform:none; color: #121212} #topNav li.sub_title a:hover { color: #888 } #topNav li.mega_item a, #topNav li.sub_title a { padding:5px; color: #222 } #mega_menu_471 li.mega_item {display: none} /*#mega_menu_469 div.mega_menu { max-width: 699px; width: 699px }*/ #mega_menu_651 li.mega_item {display: none} @media screen and (max-width: 800px) { body { font-size:10px } input[type=text] { height: 1.2em !important; font-size: 1em !important; width: 140px } #header_container select,#header_right_col select { width: 110px } select {width:120px; height:1.8em !important; font-size: 1em !important;} #header_search { position: absolute; left: 24%; top: 55% } #header_search input[type=text] { width: 110px } #header_icons { position: absolute; left: calc( 80% - 230px ); top: 5%; height: 25px; } #selectPortal { top: 55% } #selectPortal select { width: 100px } #hd_phone { } .input_search {width:140px !important;height:16px !important;} .input_search input[type=image] { height: 16px; width: auto; padding-top: 0px } #topNav { } #topNav li a { padding:0px 12px 0px 12px; line-height:24px; } #topNav li a:hover { padding:0px 11px 0px 11px; } div.mega_menu_container { top: 24px; } #topNav li.mega_item { min-height: 24px; line-height: 24px; } #topNav li.sub_title { min-height: 24px; line-height: 24px; } div.mega_menu_container { width: 360px } div.megamenu_section { width: 179px; } #topNav li.sub_title div { width: 178px; } #topNav li.mega_item a, #topNav li.sub_title a { padding:2px 0px 1px 5px; } #header_height_force { padding-top: 10.5% } } @media screen and (max-width: 700px) { #header_height_force { padding-top: 11% } } @media screen and (max-width: 544px) { body { font-size:9px } #selectPortal select { width: 80px } #topNav { height:auto; } #topNav li a { padding:0px 6px 0px 6px; line-height:29px; } #topNav li a:hover { padding:0px 5px 0px 5px; } #topNav li.mega_item a, #topNav li.sub_title a { padding:2px 0px 1px 5px; } #header_height_force { padding-top: 15.5% } } @media screen and (min-width: 545px) { } @media screen and (min-width: 801px) { } #clear_header {clear:both;} #body_container {overflow-x:hidden;max-width:984px; width: 100%; margin-left:auto; margin-right:auto;} #body_container img { max-width: 100%; height: auto } #footer_container {overflow-x:hidden;margin-left:auto; margin-right:auto; margin-top:10px;background-color: #ddd;height:144px; width: 100%; max-width:1000px; border-radius: 0px } #copyright_container {margin-left:3px; margin-right:3px; max-width:984px; width: calc(100% - 6px); height:28px;margin-top:5px;} #site_copyright {width:500px; float:left; margin-left:15px;color:#2C2C2C;} #site_dev {width:210px; float:right;color:#2C2C2C;text-align:left;} #site_dev a {color:#2C2C2C;} #site_dev a:hover {color:#1f6db1;} #footer_links_col1 {width:130px; float:left;color:#2C2C2C;margin-left:-20px;} #footer_links_col1 a {width:130px; float:left;color:#2C2C2C;} #footer_links_col1 a:hover {color:#ffe03a;} #footer_links_col1 ul {list-style:none;} #footer_links_col1 li a {background: url(/images/footer_bullet.gif) no-repeat 0% 6px;padding: 0 0 0 12px;line-height: 1.5em;} #footer_links_col2 {width:110px; float:left;color:#2C2C2C;} #footer_links_col2 a {width:130px; float:left;color:#2C2C2C;} #footer_links_col2 a:hover {color:#ffe03a;} #footer_links_col2 ul {list-style:none;} #footer_links_col2 li a {background: url(/images/footer_bullet.gif) no-repeat 0% 6px;padding: 0 0 0 12px;line-height: 1.5em;} #footer_links_col3 {width:180px; float:left;color:#2C2C2C;margin-left:30px;} #footer_links_col3 a {width:130px; float:left;color:#2C2C2C;} #footer_links_col3 a:hover {color:#ffe03a;} #footer_links_col3 ul {list-style:none;} #footer_links_col3 li a {background: url(/images/footer_bullet.gif) no-repeat 0% 6px;padding: 0 0 0 12px;line-height: 1.5em;} #footer_links_col4 {width:150px; float:right;color:#2C2C2C;margin-right:15px;} #footer_links_col4 a {width:130px; float:left;color:#2C2C2C;} #footer_links_col4 a:hover {color:#2C2C2C;} #footer_links_col4 ul {list-style:none;} #footer_links_col4 li a {background: url(/images/footer_bullet.gif) no-repeat 0% 6px;padding: 0 0 0 12px;line-height: 1.5em;} #verified_logo {border:1px solid #fff;width:130px; height:33px;} li.modalPopup {} #sideNav {float:left;width:143px;border:1px solid #2C2C2C;} #sideNav ul {padding:0px;margin:0px} #sideNav li {list-style:none} #sideNav li a {padding:5px;width:133px} /****************** HOME TEMPLATE ********************/ #home_content_container {overflow: hidden;max-width:984px; width: 100%; margin-left:auto; margin-right:auto;margin-top:0px;} #home_banner_container {max-width:984px; width: 100%; height:auto; margin-top: 9px } #clear_banner {clear:both;} #home_content {max-width:984px; width: 100%; margin-left:auto; margin-right:auto;margin-top:4px;} #hm_left_col {width:229px; float:left;} #hm_mid_col {width:100%; max-width: 760px; float:left; padding-top: 5px } #hm_right_col {width:216px; float:right; padding-top: 5px;overflow:hidden} @media screen and (max-width: 979px) { #hm_right_col {width:100%; width: calc( 133.3% - 273px ); margin-bottom: 5px } } #clear_hm_col {clear:both;} #welcome_container {width:229px;} #welcome_top_curve {width:229px; height:7px;} #welcome_text {padding:10px 10px 10px 10px; width:209px; background-color:#ffffff;color:#000000; line-height:18px; font-family: Arial, Verdana, Helvetica, sans-serif; font-size:1em;} #welcome_text h2 {margin:0px;padding:0px; color:#2C2C2C;padding-top:0px; padding-bottom:10px;padding-left:0px;} #welcome_text p {padding-top:10px;} #welcome_text img {float:right;} #welcome_bottom_curve {width:229px; height:7px;} #welcome_title {width:210px; height:37px; border:1px solid #f2f2f2;margin-left:auto; margin-right:auto;} .welcome_header {color:#1f6db1;font-size:1.5em; font-family:Arial,Verdana, Helvetica, sans-serif;font-weight: normal;padding-left:8px;padding-top:5px;} #hm_products_container {width:100%; margin-left:0px; } #product_top_curve {width:100%; height:4px;} #product_bottom_curve {width:538px; height:4px;} #feature_title {width:99.5%;width: calc( 100% - 2px );width: -webkit-calc(100% - 2px); width: -moz-calc(100% - 2px); height:37px; border:1px solid #f2f2f2; margin: 0px } .feature_header {float:left; color:#2C2C2C;font-size:1.5em; font-family:Arial,Verdana, Helvetica, sans-serif;font-weight: normal;padding-left:8px;padding-top:5px;} .specials_header {color:#2C2C2C;font-size:18px; font-family:Arial,Verdana, Helvetica, sans-serif;font-weight: normal;padding-left:8px;padding-top:5px;} #feature_content {overflow: hidden;width:99%; max-width:750px; width: calc( 100% - 10px );width: -webkit-calc(100% - 10px); width: -moz-calc(100% - 10px);padding: 5px; background-color:#ddd; border-radius: 0px; } #popunder_container #feature_content { background-color:#fff; } #feature_content div.youtube { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; max-width: 658px; margin-left: auto; margin-right: auto } #feature_content iframe, #feature_content object, #feature_content embed { position: absolute; width: 100%; height: 100%; top: 0px } @media screen and (max-width: 979px) { #hm_mid_col {max-width: 979px;} #feature_content {width:99%; width: calc( 100% - 10px );max-width:979px;} } #cart_container {width:205px;} #cart_header {width:205px; height:25px; background-image: url(/images/cart_top_curve.png); background-repeat: no-repeat;} #cart_items {width:205px; height:25px; background-color:#2C2C2C;} .account {color:#2C2C2C;font-weight:bold; padding-top:5px;padding-left:10px; font-size:1em; font-family: Arial, Verdana, Helvetica, sans-serif;} .total_cart_items {color:#ffffff;font-weight:normal; padding-top:5px;padding-left:10px; font-size:1em; font-family: Arial, Verdana, Helvetica, sans-serif;} .total_cart_items a {color:#2C2C2C;} .total_cart_items a:hover {color:#ffffff;} .hm_quicklinks_container .cartText {margin-left: auto; margin-right: auto; width: 197px} #hm_links {width:185px;padding:10px;} #clear_cart {clear:both;} .hm_quicklinks_container {overflow: hidden; width: 100%;margin-top:7px;border-radius: 0px; background-color: #DDD; padding-top: 5px; padding-bottom: 5px} .hm_quicklinks_container:nth-of-type(1) { margin-top:0px } #blog_categories {width:205px;padding:0px;} #socialmedia_links {margin-left: auto; margin-right: auto; width: 197px} @media screen and (max-width: 979px) { .hm_quicklinks_container { float: left; margin-left: 5px; margin-left: calc( 25% - 205px ); min-height: 130px } #hm_right_col { margin-left: -5px; margin-left: calc(0px) } .hm_quicklinks_container:nth-of-type(1) { margin-top:7px } } @media screen and (max-width: 840px) { .hm_quicklinks_container { float: left; margin-left: 5px; margin-left: calc( 33.3% - 205px ); min-height: 130px } #hm_right_col {width: calc( 150% - 306px ); margin-bottom: 5px } } @media screen and (max-width: 632px) { .hm_quicklinks_container { float: left; margin-left: 5px; margin-left: calc( 50% - 205px ); min-height: 130px } #hm_right_col {width: calc( 200% - 410px ); margin-bottom: 5px } } @media screen and (max-width: 428px) { .hm_quicklinks_container { width:150px; float: left; margin-left: 3px; margin-left: calc( 50% - 150px ); min-height: 130px } #hm_right_col {width: calc( 200% - 300px ); margin-bottom: 5px } #accessories_title_container {width:150px !important; } #accessories_title {width:140px !important;} .hm_quicklinks_container .cartText {margin-left: auto; margin-right: auto; width: 142px} #hm_links {width:120px;padding:10px;} #blog_categories {width:140px;} #socialmedia_links {width: 140px} #socialmedia_links img { width: 38px; height: auto } } #quicklinks_top_curve {width:205px;height:4px;} #quicklinks_bottom_curve {width:205px;height:4px;} #socialmedia_links img {display: inline-block; border: none; margin: 3px} #hm_links ul {list-style: none; margin-top:0; margin-bottom:0;margin-left:0px; padding-left:0px;} #hm_links li a {background: url(/images/quicklinks_bullets.png) no-repeat 0% 6px;padding: 0 0 0 1em;line-height: 1.5em;color:#000000;font-size:1em; font-family: Arial,Verdana, Helvetica, sans-serif;display: block} #hm_links a:hover {color:#0b5395;} #blog_categories ul {list-style-image: url(/images/quicklinks_bullets.png); margin-top:0; margin-bottom:0;margin-left:22px; margin-right: 10px; padding-left:0px;} #blog_categories li a {padding: 0 0 0 0px;line-height: 1.5em;color:#000000;font-size:1em; font-family: Arial,Verdana, Helvetica, sans-serif;} #blog_categories a:hover {color:#0b5395;} #accessories_title_container {width:100%; } #accessories_title {width:95%; width: calc( 100% - 12px ); height:37px; border:1px solid #f2f2f2;margin-left:auto; margin-right:auto; } #clear_quicklinks {clear:both;} #facebook {width:205px; margin-top:10px;} .mainText {width:100%; margin: 0px; min-height:318px; } .mainText p {line-height:18px; color:#000000;padding:10px 10px 10px 0px;font-size:1em; font-family: Arial, Verdana, Helvetica, sans-serif;} p {margin:0;} .cat_title {color:#ffffff;font-family:arial, verdana, helvetica, sans-serif; font-size:1.3em;padding-top:5px; padding-left:12px;} .price_range_title {color:#000000;font-family:arial, verdana, helvetica, sans-serif; font-size:1em;padding-left:0px;font-weight: bold;} #lft_nav_top_curve {width:229px; height:30px;background-image: url(/images/left_nav_hd_bdg.png); background-repeat: no-repeat;} #nav_links {padding:10px; width:209px; background-color:#ffffff;color:#000000; line-height:18px; font-family: Arial, Verdana, Helvetica, sans-serif; font-size:1em;} #nav_links ul {list-style: none; margin-top:0; margin-bottom:0;margin-left:0px; padding-left:0px;} #nav_links li a {background: url(/images/quicklinks_bullets.png) no-repeat 0% 6px;padding: 0 0 0 12px;line-height: 1.5em;color:#000000;font-size:1em; font-family: Arial,Verdana, Helvetica, sans-serif;} #nav_links a:hover {color:#0b5395;} #clear_nav_kayaks {clear:both;} #lft_nav_accessories_container {margin-top:8px;} /************************** FORMS *********************************/ #register {padding-top:15px; width:100%; margin-left:auto; margin-right:auto;} .colLeft { max-width:160px; min-width: 80px; width: 30%; width: calc( 40% - 10px ); padding-left:10px; float:left; color:#000000; font-size:1em; font-family: Arial, Verdana, Helvetica, sans-serif;} .colRight {max-width:420px; min-width: 150px; width: 60%; float:right;} .colRight textarea { max-width: 95% } #voucherForm { margin-left: 10px } @media screen and (max-width: 369px) { .colRight { float: left} .colLeft { padding-left: 0px } } .contain {height:10px; clear:both;} .news_signup {color:#000000; font-size:1em; font-family: Arial, Verdana, Helvetica, sans-serif;} .dropmenu {color:#000000; width:200px;} .label {float:left;width:100px;margin-top:3px} .input {float:left;margin-top:3px;} .buttons {margin:10px 0px 0px 100px} .field {margin-top:3px} .intro {margin-left:0px; padding-left:0px;} input[type=text], input[type=password] {color:#000000; width:200px; background-image: url(/images/form_input_bdg.gif); background-repeat: repeat-x; border:1px solid #ccc; height:20px;} select {color:#000000; width:250px; background-image: url(/images/form_input_bdg.gif); background-repeat: repeat-x; border:1px solid #ccc; height:20px;} input[type=submit] { display: inline-block; line-height: 20px; height: 20px; padding: 0px 10px 0px 10px; background-color: #2C2C2C; border-radius: 15px; color: #ffe03a; cursor: pointer; border: none } #newsletterSignUpForm input[type=text] { width: 160px } div.error { color: red } @media screen and (max-width: 800px) { input[type=text],input[type=password],select { height: 1.2em; font-size: 1em; width: 140px } } input.required, select.required, textarea.required {color:#000000;} input.error, input.validation-failed, select.validation-failed, textarea.validation-failed {border:2px solid #000000;background-color:#f1bbbb;color:#000} input.validation-passed, select.validation-passed, textarea.validation-passed {background-image: url(/images/form_input_bdg.gif); background-repeat: repeat-x; border:1px solid #ccc;} select.dateField { width: 55px } input.disabled {color:#AAA} .errorMessage {border:1px solid #b11111;padding:10px;background-color:#f1bbbb;font-size:0.83em;margin-bottom:10px} .validation-advice {color:#b11111} /****************** VIDEOS ********************/ #main_video, #vid-description, #video_thumbs_index_container {max-width:724px; width: 100%; margin-left: auto; margin-right: auto } #thumb_wrapper { max-width:506px; width:69.9%; width: calc( 100% + 22px ) ;margin-left: -22px } #main_video img {padding-left:1px; padding-top:1px;} #main_video_right_panel {width:281px; float:right;} #main_video_thumb_container {margin-left:0px; margin-top:0px;} #main_video_thumbnail {width:168px; height:101px; float:left; background-image: url(/images/video_thumb_frame.png); background-repeat: no-repeat;} #clear_main_video_thumbs {clear:both;} #main_video_title_sm {font-weight:bold; color:#70695f; padding-top:1px;} #video_title_sm a {color:#92887B;} #video_title_sm a:hover {color:#CCC7B6;} #main_video_title_sm a {color:#92887B;} #main_video_title_sm a:hover {color:#CCC7B6;} #main_video_blurb_short {font-weight:normal; line-height: 15px; padding-top:0px; padding-bottom:2px;} #main_video_time {color:#70695f;} #master_video_container {width:262px; margin-left:12px; margin-top:7px;} #video_content_right_col {width:280px; float:right; background-image: url(/images/content_border_right.gif); background-repeat: repeat-y; background-position: left; margin-bottom:51px;} #video_content_left_col {width:700px; float:left; margin-bottom:21px;} #video_body_text_container {padding:12px; width:670px;} #video_blurb_container {background-image: url(/images/blurb_border_bottom.png); background-repeat: repeat-x; background-position: bottom;} #video_blurb_title {margin-bottom:25px;} #video_blurb {padding-bottom:25px; } #clear_video_blurb {clear:both;} #video_thumbs_container { float:left; margin-top:2px;margin-left:22px; display: block; height: 130px} #video_thumbnail {width:146px; height:92px; float:left; background-image: url(/images/video_thumb_frame.png); background-repeat: no-repeat;} #video_image {margin-top:2px; margin-left:2px;} #video_specs_container {width:148px; float:right;margin-right:10px;} #video_title_sm {font-weight:bold; color:#70695f; padding-top:5px; text-align: center; width: 146px} #video_blurb_short {font-weight:normal; line-height: 15px; padding-top:5px; padding-bottom:5px;} #video_time {color:#70695f;} .codered {color:#2C2C2C;} /******************** POPUPS *************************************/ .popupWindow {border:1px solid #723983} .popupWindow h2 {border-bottom:1px solid #723983;font-size:1em;padding:5px 10px;background-color:#b293b9} .popupWindow .container {padding:10px;background-color:#f3eff5} .popupWindow .buttons {margin:10px 0px 0px 0px;text-align:center} .content {padding:10px;min-height:500px} div.clear {margin:0px;padding:0px;font-size:0px;overflow:hidden;clear:both} div {border-collapse:collapse} img {border-width:0} /******************************* MISC ***********************************/ .imgButton {cursor:pointer} #search {height:20px;padding-right:15px;padding-top:5px;} .searchbg {height:20px;width:200px;} .input_search {width:225px;height:21px;float: right;} .search_bttn {height:25px; width:25px;padding-left:2px;position:absolute;padding-top:0px;float:left;} #searchResults {color:#000000; font-size:1em; font-family: arial, verdana, helvetica, sans-serif;padding:10px;} .rowOdd {padding-bottom:10px;padding-top:10px;border-bottom: 1px dotted #000000;} .date {font-style: italic;padding-top:3px; padding-bottom:3px;} .paging {text-align:right;} .dob_offers {color:#000000; font-size:0.93em; font-style: italic;} .hline {border-bottom: 1px solid #ccc;margin-bottom:15px;} #searchResults .search_image {float: left; margin-right: 10px; width: calc( 26% - 10px) } #searchResults .search_text {float: left; width: 74%; max-width: 542px} /******************************* BLOG ***********************************/ #blog_arrow {padding: 8px 0px 0px 0px; width:20px; float:left; color: #2C2C2C} #blog_archive_links {padding: 8px 0px 0px 0px; float:left;font-family: Helvetica, Arial, Verdana, sans-serif; font-size:1em; font-weight:bold; color:#6d6e71;} #blogComments { margin-left: 8px } div.blogTitle a, div.blogTitle {font-family: Helvetica, Arial, Verdana, sans-serif; font-size:1.3em; font-weight:bold; } /******************************* COMMENTS SPEECH BUBBLE ***********************************/ .commentby {font-style: italic;} #comment_space {height:15px;} #main { max-width: 700px; } .speech_bubble{ background: transparent; margin:10px 0; } .speech_bubble_content{ display:block; background:#fff; border:3px solid #e47c36; border-width:0 3px; font-family: Arial, Verdana, Georgia, "Times New Roman", Times, serif; font-size:1em; } .speech_bubble p{ padding:0.5em 0; color:#000; margin:0 15px; } .sb1, .sb2, .sb3, .sb4, .sb5, .sb6, .sb7{ display:block; overflow:hidden; font-size:0; } .sb1, .sb2, .sb3, .sb4, .sb5, .sb6{ height:1px; } .sb4, .sb5, .sb6, .sb7{ background:#fff; border-left:1px solid #e47c36; border-right:1px solid #e47c36; } .sb1 {margin:0 8px; background:#e47c36;} .sb2 {margin:0 6px; background:#e47c36;} .sb3 {margin:0 4px; background:#e47c36;} .sb4 {margin:0 3px; background:#fff; border-width:0 5px;} .sb5 {margin:0 2px; background:#fff; border-width:0 4px;} .sb6 {margin:0 2px; background:#fff; border-width:0 3px;} .sb7 {margin:0 1px; background:#fff; border-width:0 3px; height:2px;} .speech_bubble span{ display:block; width:0; height:0; overflow:hidden; border-top:10px solid #fff; border-left:10px dotted transparent; border-right:10px dotted transparent; margin-left:52px; margin-top:-15px; width:20px; height:10px; width:0; height:0; } .speech_bubble em{ display:block; width:0; height:0; overflow:hidden; border-top:12px solid #e47c36; border-left:12px dotted transparent; border-right:12px dotted transparent; margin-left:50px; width:24px; height:12px; width:0; height:0; } /*Mobile Menu*/ #mobnav-icon { display: none; position: absolute; right: 17px; top: calc( 50% - 10px ) } #mobnav-icon:after { content: "\2261"; font-size: 48px; color: #FFF; line-height: 48px; height: 48px; display: inline-block } #topNav .mobnav { position: absolute; top: 0px; right: -320px; background: #2C2C2C; border-left: 1px solid #EEE; width: 100%; max-width: 320px; z-index: 101; overflow-y: auto; transition: right 300ms linear; border-radius: 4px; display: none } #topNav .mobnav li { float: none; width: 100% } #topNav .mobnav.open { right: 0px; } #topNav .mobnav ul { list-style: none; padding: 0px } #topNav .mobnav > ul { margin-top: 48px; border-top: 1px solid #EEE; position: relative } #topNav .mobnav > ul > li { font-size: 24px; line-height: 28px; } #topNav .mobnav > ul > li > a { color: #ffe03a; display: block; padding: 15px 65px 15px 20px; border-bottom: 1px solid #EEE; } #topNav .mobnav > ul > li ul.sub-menu a { color: #ffe03a; } #topNav .mobnav li > a:hover { color: rgba(35,31,21,0.4); background-color: #EEE } #topNav .mobnav > ul > li > ul > li > a { color: rgba(35,31,21,0.8); display: block; padding: 15px 30px 15px 30px; } #topNav .mobnav > ul > li > ul > li > ul.sub-menu > li > a { color: rgba(255,255,255,0.8); display: block; padding: 15px 10px 15px 37px; font-size: 0.8em; } #topNav .mobnav > ul > li > ul > li > ul.sub-menu > li > a:hover { color: rgba(35,31,21,0.4); } #topNav .mobnav > ul li.menu-item-has-children { position: relative } #topNav .mobnav > ul > li.menu-item-has-children .arrow::after { cursor: pointer; width: 60px; text-align: center; position: absolute; top: 0px; right: 0px; font-size: 18px; line-height: 59px; color: #ffe03a; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\276F"; transition: transform 300ms linear } #topNav .mobnav > ul > li > ul > li.menu-item-has-children .arrow::after { width: 40px; } #topNav .mobnav > ul > li.menu-item-has-children .sub-menu { display: none } #topNav .mobnav > ul > li.menu-item-has-children .arrow.open::after { transform: rotate(90deg) } #topNav .mobnav > ul > li > ul > li:last-of-type a { border-bottom: 1px solid #eee; } #topNav .mobnav .icon-cross { position: absolute; right: 12px; top: 6px;} #topNav .mobnav .icon-cross::before { content: "\2715"; text-align: right; font-size: 32px; color: #fff } #topNav .social-media { position: absolute; right: 120px; top: 50px; z-index:2 } #topNav .social-media i { color: #FFF; font-size: 24px; } #topNav .social-media a:not(:last-child) { padding-right: 25px } #topNav .social-media-mob { position: absolute; left: 20px; top: 12px; z-index:2 } #topNav .social-media-mob a:not(:last-child) { padding-right: 15px } #topNav .social-media-mob i { font-size: 24px; color: #FFF } #topNav .social-media-mob .laybuy { height: 20px; width: auto } @media screen and (max-width: 600px) { #topNav>ul { display: none } #mobnav-icon { display: block; cursor: pointer } #topNav .mobnav { display: block; visibility: hidden } #selectPortal { right: 60px } #header_icons { display: none } } .covid-19-message { color: white; background-color: black; width: 100%; height: 60px; font-size: 16px; line-height: 60px; text-align:center; box-sizing: border-box } @media screen and (max-width: 1000px) { .covid-19-message { line-height: 24px; padding:12px 6px; height: auto } }