/**********************************************/ /* CSS Definitions MAIN */ /**********************************************/ /**********************************************/ /* Color definitions Blue (dark):#034ea1 Blue (light): #29abe1 //(sub heading/link light blue) Yellow: #ffd244 Grey (BG): #ebecec //menu grey bg/box sub heading grey Grey (Border): #dbdcdd //box border grey Secondary palett: Grey: #d9dadb Yellow: #ffff00 */ /**********************************************/ /* General - Desktop first /* BIG and beyond - (could be: Desktops/ Tablets landscape) */ /* @media only screen and (min-width: 1180px)*/ /**********************************************/ /* ********************************************************************** */ /* General container /* ********************************************************************** */ .full_width_container{width:100%; text-align:center;} .centered_container{width:1170px; margin:0 auto; text-align:left; margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px;} .centered_container .centered_container{width:auto;} /* ********************************************************************** */ /* Header /* ********************************************************************** */ #page_header{width:100%;} /**********************************************/ /* Top bar */ /**********************************************/ header div#utilities_navigation_box_frame { position:relative; z-index:1; width:100%; height:100%; background-color:#ffd244;} header div#utilities_navigation_box_frame:before{ position: absolute; z-index: -1; top: 0; left: 0; width: 30%; height: 35px; content: ""; background-color: #034ea1;} #utilities_navigation_box {height:35px; background-color: #ffd244;} #utilities_navigation_box.centered_container {padding-left: 0px;} #utilities_navigation_box a{color:#034ea1;padding-left: 10px; /*font-weight: bold;*/} #utilities_navigation_box a img{ padding-left: 10px;} #utilities_navigation{padding: 0; margin:0 auto; text-align:right;} #utilities_navigation ul{float:right; margin:0; padding: 0;} #utilities_navigation ul li{display:inline; margin:0; padding:0 10px; color:white;} #utilities_navigation ul li a{ color:white; text-decoration:none; margin: 0; font-weight: bold; transition:color 300ms ease-in-out;} #utilities_navigation ul li a:hover{color:rgb(0,167,226);} /**********************************************/ /* Blue Bar /**********************************************/ header div#blue_bar_top {background-color:#034ea1; width: 20%; float: left; height: 35px; padding-top: 7px; padding-right: 20px;} header div#blue_bar_top div{/*text-align:center;*/} //header div#blue_bar_top div img{height: 87px; width: auto;} header div#blue_bar_top a{color:white; font-size:13px; margin-left: 10px;} header div#blue_bar_top a:hover{color:white; text-decoration: none;} header div#blue_bar_top a img{ height:12px;} /**********************************************/ /* Yellow B ar /**********************************************/ header div#yellow_bar_top {background-color:#ffd244; height: 35px; padding-top: 7px;} header div#yellow_bar_top div{/*text-align:center;*/} header div#yellow_bar_top div img{float:left; height:16px; margin-top: 3px;} header div#yellow_bar_top div span{/*float:right;*/} header div#yellow_bar_top a{font-size:13px;} header div#yellow_bar_top a:hover{text-decoration: none;} header div#yellow_bar_top span#media_box {float:left; padding-left: 30px;} header div#yellow_bar_top span#media_box a img{ height:13px;} header div#yellow_bar_top span#signup_box {float:right;} header div#yellow_bar_top span#signup_box a img{ height:14px;} /**********************************************/ /* Top Box / /**********************************************/ //#top_box{padding:15px 0; } /**********************************************/ /* Logo /**********************************************/ #logo_box{ /*width:66.6666%;*/ float:left; margin-top: 10px; margin-bottom: 10px; margin-right: 4px; height:104px; width:200px; overflow:hidden} #logo_box img{width:auto; height:104px;} #logo_box a img:hover { opacity: 0.8; filter: alpha(opacity=80); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;} //#logo_box img{width:60%; height:auto;} /**********************************************/ /* Navigation toggle button /**********************************************/ #navigation_toggle_box{display:none;} #navigation_toggle_box .navigation_toggle{} #navigation_toggle_box .navigation_toggle i{ color: #034ea1; font-size: 32px;} #navigation_toggle_box .navigation_toggle:link, .navigation_toggle:visited, .navigation_toggle:hover{} /**********************************************/ /* Social Media buttons /**********************************************/ //#social_media_button_box{position:fixed; top:360px; right:0; border:0 solid white; z-index:1001;} /* ********************************************************************** */ /* Navigation Box /**********************************************/ #navigation_box_frame{background-color:white; border:1px solid rgb(245,245,245); border-width:1px 0 1px 0;} #navigation_box_frame * {transition:width 0.8s ease, max-height 0.8s ease, padding 0.8s ease, background-color 0.4s ease;} #navigation_box_frame #logo_navigation_box{position:relative;} #navigation_box_frame .affix #logo_navigation_box #logo_box{float:left; width:0; margin-top:15px;} #navigation_box_frame #logo_navigation_box #logo_box a{} //#navigation_box_frame #logo_navigation_box #logo_box a img{width:50%; height:auto;} #navigation_box_frame #logo_navigation_box #main_navigation_box {/*float:right; width:100%;*/ display:block; text-align:center; position:static; } #navigation_box_frame #logo_navigation_box #main_navigation_box #main_navigation {position:static; display:inline-block; margin:0 auto; /*margin-top: 35px;*/ float:right; } #navigation_box_frame.affix #logo_navigation_box #main_navigation_box #main_navigation { margin-top: 15px; } /**********************************************/ /* Sticky / Affix /**********************************************/ #navigation_box_frame.affix{ position:fixed; top:0; width:100%; z-index:10; } #navigation_box_frame.affix{ -webkit-box-shadow: 0px 3px 5px 0px rgba(100,100,100,0.6); -moz-box-shadow: 0px 3px 5px 0px rgba(100,100,100,0.6); box-shadow: 0px 3px 5px 0px rgba(100,100,100,0.6); } //#navigation_box_frame.affix #logo_navigation_box #logo_box {width:15%;} #navigation_box_frame.affix #logo_navigation_box #logo_box img{display:none; height:0px; width:0px;} //#navigation_box_frame.affix #logo_navigation_box #main_navigation_box {width:85%;} /*#navigation_box_frame #logo_navigation_box #logo_small{float:left; width:auto; margin-top:25px; margin-bottom: 25px;} #navigation_box_frame #logo_navigation_box #logo_small_sticky{float:left; width:auto; margin-top:25px; margin-bottom: 25px;} #navigation_box_frame #logo_navigation_box #logo_small a{} #navigation_box_frame #logo_navigation_box #logo_small a img{width:100%; height:auto;} #navigation_box_frame #logo_navigation_box #logo_small_sticky img{ width: 0px; height: 0px;} #navigation_box_frame.affix #logo_navigation_box #logo_small_sticky img{ width: 141px; height: 62px;} #navigation_box_frame.affix #logo_navigation_box #logo_small img{ width: 141px;} #navigation_box_frame.affix #logo_navigation_box #logo_small_sticky img{ } #navigation_box_frame.affix #logo_navigation_box #logo_small_sticky img{ } #navigation_box_frame.affix-top #logo_navigation_box #logo_small img{display:_none;} #navigation_box_frame.affix-top #logo_navigation_box #logo_small_sticky{display:none;} #navigation_box_frame.affix #logo_navigation_box #logo_small{display:none;}*/ #navigation_box_frame #logo_navigation_box #logo_box_sticky{float:left; width:0; margin-top:15px;} #navigation_box_frame #logo_navigation_box #logo_box_sticky a{} #navigation_box_frame #logo_navigation_box #logo_box_sticky a img{ width:100%; height:auto; transition:width 0.8s ease, max-height 0.8s ease, padding 0.8s ease, background-color 0.4s ease;} #navigation_box_frame.affix #logo_navigation_box #logo_box_sticky {width:15%;} #navigation_box_frame.affix-top #logo_navigation_box #logo_box_sticky img{max-height: 0px; display:none; transition:width 0.8s ease, max-height 0.8s ease, padding 0.8s ease, background-color 0.4s ease;} #navigation_box_frame.affix #logo_navigation_box {margin-bottom:10px;} #navigation_box_frame #logo_box_sticky img {transition:width 0.8s ease, max-height 0.8s ease, padding 0.8s ease, background-color 0.4s ease;} /**********************************************/ /* Sticky Menu Wrapper */ /* min-height needed to avoidnjumping content on affix */ /**********************************************/ #page_header #affix_sticky_wrapper{min-height:131px;} /**********************************************/ /* Main Navigation (+ toggle button) /**********************************************/ .navigation_toggle{} /* ********************************************************************** */ /* Content /* ********************************************************************** */ #content_box {min-width:1170px !important; /*padding:10px 0;*/ min-height:400px;} /**********************************************/ /* Footer /**********************************************/ footer a {color:#034ea1; font-weight: bold; background-color:transparent; text-decoration:none;} /**********************************************/ /* Blue Bar /**********************************************/ footer#blue_bar_bottom {background-color:#034ea1; padding:30px;} footer#blue_bar_bottom div{/*text-align:center;*/} footer#blue_bar_bottom div img{height: 73px; width: auto;} footer#blue_bar_bottom div#sumpsup_logo{float: left;width: auto;} footer#blue_bar_bottom div#sump_platform_logo{float: right;width: auto;} /**********************************************/ /* Yellow B ar /**********************************************/ footer#yellow_bar_bottom {background-color:#ffd244; padding:5px;} footer#yellow_bar_bottom div{/*text-align:center;*/} footer#yellow_bar_bottom div img{float:left; height: 13px; margin-top: 6px;} footer#yellow_bar_bottom div span{float:right; margin-left: 20px;} footer#yellow_bar_bottom div a{font-size:11px;} /**********************************************/ /* Fallback Main navigation, Sitemap /**********************************************/ footer #sitemap_box{background-color:white;} nav#footer_sitemap {width:100%; padding:20px 0 10px 0; } nav#footer_sitemap {display:table; padding-top:30px; margin:0 auto 20px auto;} nav#footer_sitemap ul{display:table-row; font-size:0.85em; padding-left:0;} nav#footer_sitemap ul li{padding: 5px 0 0 0; border: 1px solid rgb(200,200,200); text-align:left; border:none; list-style-type: none;} nav#footer_sitemap ul li ul{padding-left:0;} nav#footer_sitemap ul li a{text-decoration:none; color:black;} nav#footer_sitemap ul li.sitemap_lvl_1{display:table-cell; font-weight: bold;} nav#footer_sitemap ul li.sitemap_lvl_2{font-weight: normal;} nav#footer_sitemap ul li.sitemap_lvl_3{font-weight: normal;} /**********************************************/ /* Footer /**********************************************/ /**********************************************/ /* Footer - logobar */ /**********************************************/ footer#partner_logos {/*border-top: 1px solid #dbdcdd;*/ padding-top: 10px;} footer#partner_logos a{ color:white; background-color:rgb(211,172,43); font-size: 1.1em; } footer#partner_logos a i{ margin-left:20px; } footer#partner_logos #partner_logo_toggle{display:none; text-align:center; color:rgb(200,200,200); margin-bottom:10px; border-top: 1px dashed rgb(226,226,226); border-bottom: 1px dashed rgb(226,226,226); border-width: 1px 0; margin-top: 25px; padding-top: 25px; padding-bottom: 15px;} footer#partner_logos #partner_logo_toggle span{display:inline-block; padding:5px 10px 0 10px; } footer#partner_logos #partner_logo_toggle span:hover{cursor: pointer;} footer#partner_logos .partner_logo_break_line{display:none;} footer#partner_logos #partner_logos_box {display: block; padding: 60px 0; /*background-color:rgb(90,90,90);*/ } footer#partner_logos #partner_logos_box .logo_box_row {text-align:center; display: inline-block; margin: 0 auto;} footer#partner_logos #partner_logos_box .logo_box_row .partner_logo{height: 55px; min-width: 90px; background-color: transparent; display: block; display: table-cell; text-align: center; padding-top: 5px; padding-bottom:5px; } footer#partner_logos #partner_logos_box #row_1 .partner_logo {padding-right: 24px;} footer#partner_logos #partner_logos_box #row_2 .partner_logo {padding-right: 25px;} footer#partner_logos #partner_logos_box .logo_box_row .partner_logo img{} footer#partner_logos #partner_logos_box .logo_box_row .partner_logo img:hover { filter: brightness(80%); -webkit-filter: brightness(80%); -moz-filter: brightness(80%); -o-filter: brightness(80%); -ms-filter: brightness(80%); -moz-transition: all .2s linear; -webkit-transition: all .2s linear; -o-transition: all .2s linear; transition: all .2s linear; } footer#partner_logos #partner_logos_box .logo_box_row .partner_logo:first-child{margin-left:0; } footer#partner_logos #partner_logos_box #row_2 .partner_logo:first-child{padding-left:10px; } /**********************************************/ /* Footer - Disclaimer /**********************************************/ footer#disclaimer {background-color:#F1F2F4; text-align:center;} footer#disclaimer #disclaimer_box {} footer#disclaimer #disclaimer_box img { float: left; width: 48px; height: auto; margin-top: 13px; margin-right: 60px;} footer#disclaimer #disclaimer_box p { color: #717370; font-size: 12px; padding-top: 10px; } footer#disclaimer #disclaimer_box a {display:inline-block; margin:0 auto; padding:10px; background-color:white; padding:10px; border:1px solid white; border-radius:3px;} /**********************************************/ /* Media Queries /**********************************************/ /* 980 - 1200 */ @media only screen and (min-width: 980px) and (max-width:1199px) { /* General */ .centered_container{width:980px;} #page_header{min-width:980px !important;} #content_box {min-width:980px !important;} footer{min-width:980px !important;} #navigation_box_frame.affix #logo_navigation_box #logo_box {height:10px; display:none;} #navigation_box_frame.affix-top #logo_navigation_box #logo_box {width:100%;} #navigation_box_frame.affix #logo_navigation_box #main_navigation_box {width:100%; float: left;} /*#navigation_box_frame.affix-top #logo_navigation_box #logo_box {position: absolute; width: 88px; overflow: hidden;}*/ #navigation_box_frame.affix #logo_navigation_box #logo_box_sticky { width: 15%; float: left;} #navigation_box_frame #logo_navigation_box #logo_box_sticky a img { width: 120px;} #navigation_box_frame #logo_navigation_box #main_navigation > ul > .lvl_1 > a { font-size: 1em;} /*#navigation_box_frame.affix-top #logo_navigation_box #logo_box img{display:none; height:0; max-height:0;}*/ /**********************************************/ /* Footer */ /**********************************************/ //footer#newsletter_subscription_box{min-width:980px !important;} footer#partner_logos #partner_logos_box .logo_box_row .partner_logo { width: 10%; min-width: 0px; border: none;} footer#partner_logos #partner_logos_box .logo_box_row .partner_logo img { max-height: 50px;} } /* 768 - 980 */ @media only screen and (min-width: 768px) and (max-width:979px) { #logo_box{width:100%; overflow:hidden;} #logo_box img {height:104px; width:auto;} /*#logo_box_sticky img {display: block}*/ /* General */ .centered_container{width:768px;} #page_header{min-width:768px !important;} #content_box {min-width:768px !important;} footer{min-width:768px !important;} /* Main Navigation */ #navigation_box_frame * { transition: none; } #navigation_box_frame #logo_navigation_box #main_navigation > ul > .lvl_1 > a { padding: 50px 10px 55px 3px; font-size: 0.9em; margin-bottom:0px;} #navigation_box_frame.affix #logo_navigation_box #main_navigation > ul > .lvl_1 > a{ padding: 10px 10px 10px 3px; font-size: 0.9em; margin-bottom:0px;} #navigation_box_frame.affix #logo_navigation_box #logo_box {width:100%; margin-bottom:10px; height: 10px;} #navigation_box_frame.affix #logo_navigation_box #main_navigation_box {width:100%;} #navigation_box_frame #logo_navigation_box #main_navigation_box { width: 100%; float: none; overflow:hidden;} /* discard logo quickly, to prevent annoying later jump of main navigation */ #navigation_box_frame.affix-top #logo_navigation_box #logo_box {/*position: absolute;*/ width: 100%; overflow: hidden;} #navigation_box_frame.affix-top #logo_navigation_box #logo_box img{ width: auto; height:104px ;} /*#navigation_box_frame.affix #logo_navigation_box #logo_box_sticky {display: none;}*/ /*#navigation_box_frame #logo_navigation_box #logo_box_sticky a img{display: none;}*/ /**********************************************/ /* Footer */ /**********************************************/ //footer#partner_logos #partner_logos_box .logo_box_row .partner_logo { width: 10%; min-width: 0px; border: none;} //footer#partner_logos #partner_logos_box .logo_box_row .partner_logo img { max-height: 50px;} header#utilities_navigation_box_frame {display:none;} header div#blue_bar_top { width: 30%;} /* Footer*/ footer#partner_logos #partner_logo_toggle { display: block;} footer#partner_logos #partner_logos_box .logo_box_row .partner_logo{ display: block; height: auto;} #partner_logos_box { text-align: center;} #partner_logos_box .logo_box_row { display: inline-block; margin: 0 auto; } #partner_logos_box .logo_box_row a { display: block; float: left; margin: 0 0 0 21px; overflow: hidden; line-height: 0px; font-size: 0px;} } /* < 768 */ @media only screen and (max-width: 767px){ #logo_box{ /*width:66.6666%;*/ float:none; margin-top: 10px; margin-bottom: 10px; margin-right: 4px; height:104px; width:200px; overflow:hidden} /* General */ .centered_container{width:100% !important;} #page_header{min-width:100% !important;} #content_box {min-width:100% !important;} footer{min-width:100% !important;} /* HEADER */ #page_header #affix_sticky_wrapper{min-height:0;} header div#utilities_navigation_box_frame {background-color: transparent;} header div#yellow_bar_top span{display:none;} header div#blue_bar_top span{display:none;} header div#blue_bar_top { width: 60%; } //#top_box{padding:10px 0 0 0;} #logo_box{/*width:100%;*/width: 200px; float: left; margin-bottom:0px;} #logo_box a{display:inline-block; width:100%; margin-bottom:0px;} #logo_box a img{/*width:94%; margin:0 3%;*/ width: auto;} #navigation_box_frame.affix #logo_navigation_box #logo_box img {/*width:94%; margin:0 3%;*/ width: auto; display:block; height:104px;} #navigation_box_frame.affix #logo_navigation_box {margin-bottom:5px;} /* Navigation toggle button */ #navigation_toggle_box{display: inline-block; background-color: transparent; text-align: right; padding: 10px; border: 3px solid #034ea1; margin-top: 30px; float: right; } #navigation_toggle_box .navigation_toggle{display:inline-block; width:32px; height:32px; font-size:20px; color:white;} /* Navigation boxes*/ //#logo_navigation #navigation_box_frame{ position:relative; box-shadow:none;} #navigation_box_frame #logo_navigation_box #main_navigation_box {display:none; float:right; width:100%; display:block; text-align:center; position:relative; background-color:#ebecec;} #navigation_box_frame #logo_navigation_box #main_navigation_box #main_navigation {position:relative; display:inline-block; width:100%; margin:0 auto; } #navigation_box_frame.affix{ position:relative; box-shadow:none;} //#navigation_box_frame.affix #logo_navigation_box #logo_box {display:none; width:0; height:0;} #navigation_box_frame.affix #logo_navigation_box #main_navigation_box {width:100%;} #navigation_box_frame.affix #logo_navigation_box #logo_box_sticky {display: none;} #navigation_box_frame #logo_navigation_box #logo_box_sticky a img{display: none;} /*#navigation_box_frame.affix-top #logo_navigation_box #logo_box { width: 14%; overflow: hidden;}*/ /*#navigation_box_frame.affix-top #logo_navigation_box #logo_box img{ width: 188px; height: auto;}*/ /* Footer */ footer{min-width:100% !important;} nav#footer_sitemap {display:none;} /* Footer*/ footer #sitemap_box nav#footer_sitemap {display: none; } footer #sitemap_box #footer_logo {margin-bottom: 30px;} footer#disclaimer #disclaimer_box p {font-size:11px;} footer #sitemap_box #footer_utility { float: right; padding-top: 90px;} footer#partner_logos #partner_logos_box .logo_box_row .partner_logo {border:none; border:0px;} footer#partner_logos #partner_logos_box .logo_box_row .partner_logo:first-child { margin-left: 21px;} #partner_logos_box .logo_box_row a { margin: 4px 0 0 21px;} footer#partner_logos #partner_logos_box .logo_box_row .partner_logo {border:none;} footer#partner_logos_box .logo_box_row { padding-left: 11%;} footer#partner_logos #partner_logo_toggle { display: block;} /*make one column*/ footer#partner_logos #partner_logos_box .logo_box_row { text-align: center; vertical-align: middle; width: auto; float: none;} footer#partner_logos #partner_logos_box #row_1 .partner_logo { width: 100%;text-align: center; vertical-align: middle; float: left; height:auto;} footer#partner_logos #partner_logos_box #row_2 .partner_logo { width: 100%;text-align: center; vertical-align: middle; float: left; height:auto;} footer#partner_logos #partner_logos_box .logo_box_row .partner_logo img { text-align: center; vertical-align: middle; width: auto; float: none;} /**********************************************/ /* Footer - Newsletter Scubscription */ /**********************************************/ footer#newsletter_subscription_box{min-width: 100% !important;} } /* end of < 768 */ /* < 480 */ @media only screen and (max-width: 480px){ footer#blue_bar_bottom div#sumpsup_logo{ text-align: center; vertical-align: middle; width: auto; float:none;} footer#blue_bar_bottom div#sump_platform_logo { text-align: center; vertical-align: middle; width: auto; float:none; margin-top:10px;} footer#blue_bar_bottom div img { height: 64px; } }