/* Frame Styles for B&H WebShell 4.75+56.12 - GDH 02-Apr-22 */ /* Add this line to the of each page (below defaultstyles.css): */ /* */ /* Image paths are relative to this css file, not the page file */ /* ====== BASIC SETTINGS ====== */ /* Viewport Settings */ @-webkit-viewport{width: device-width} /* Generic Webkit CR, SA */ @-moz-viewport{width: device-width} /* FF */ @-ms-viewport{width: device-width} /* IE */ @-o-viewport{width: device-width} /* Opera */ @viewport{width: device-width} /* Std W3C */ /* Page Backgound */ body { background-color: #888888; /* Visible in 'bounce-back' area on touch devices */ background-image: url('../Images-UI/pagebg.jpg'); /* Default */ /* background-attachment: scroll; /* [fixed | scroll (Default)] */ background-repeat: repeat; /* [repeat (Default) | no-repeat | repeat-x | repeat-y] */ scroll-behavior: smooth; /* Smooth scrolling to #id (FF, CR, OP, SA) */ } #backdrop { position: fixed; top: 0; bottom: 0; left: 0; right: 0; /* Fill viewport */ z-index: -1; /* Behind page content */ /* === Single Image 'Cover' Scheme (Mobile Safari/FB Compatible) === */ background-image: url('../Images/photo-pagebg.jpg'); /* opacity: 0.7; */ background-repeat: no-repeat; background-position: center 0px; /* [left (Default) | center | right / top (Default) | center | bottom] */ background-size: cover; /* (CSS3) [width height | contain | cover] */ /* DO NOT USE 'background-attachment: fixed' (scaling issues with Mobile Safari/FB) */ max-height: 660px; /* Slot/Parallax Scheme Only */ } h1 /* Banner Title */ { color:#EEEEEE; font-family: Tahoma, Geneva, Verdana, sans-serif; font-size: 240%; font-weight: normal; } h2 /* Content Banner Title */ { color:#FFFFFF; font-family: Tahoma, Geneva, Verdana, sans-serif; font-size: 100%; font-weight: bold; } h4 /* Footer Sub-Headings */ { color: #E8E8E8; /* Dark Red Scheme #A40000 */ font-family: Tahoma, Geneva, Verdana, sans-serif; font-size: 105%; font-weight: normal; text-transform: uppercase; letter-spacing: 0.04em; } h6 /* Footer Bar Text */ { color: #F4F4F4; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 80%; font-weight: normal; } p, div /* Content Text */ { color: #C3C3C3; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 100%; font-weight: normal; } hr /* Horiz Lines */ { color: #EEEEEE; /* IE */ background-color: #EEEEEE; /* FF, CR, etc */ } /* Links */ a:link {color: #E0E0E0; text-decoration: none;} /* 1-unvisited */ a:visited {color: #DDDDDD; text-decoration: none;} /* 2-visited*/ a:hover {color: #EEEEEE; text-decoration: underline;} /* 3-hover */ a:active {color: #FFFFFF; text-decoration: underline;} /* 4-selected */ /* ====== ACTIVE AREA SETTINGS ====== */ #banneriframe, #menuiframe, #galleryiframe, #smenuiframe, #contentiframe { width: 100%; height: 1px; } #preloadwrapper { /* Disable using inline "display: none" not CSS */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; text-align: center; /* background-color: #011A42; /* Default #011A42 Dk Blue */ background-image: url('../Images-UI/transpBlack75.png'), url('../Images/photo-pagebg.jpg'); /* Default */ /* background-repeat: repeat; /* Default Disabled */ background-position: 50% 0%; background-size: cover; overflow: hidden; } .ploadimgframe { display: inline-block; /* Allow div to wrap image */ padding: 8px; /* image 'border' */ /* background-image: url('../Images-UI/boxoutbg.gif'); /* Default */ background-color: rgba(0,0,0,0.9); /* semi-transparent */ border: 2px solid #FAFAFA; /* Default */ border-radius: 4px; /* Rounded or 50% Circular */ max-width: 80%; overflow: hidden; } .ploadframedimg { /* No padding or margin - displaces img in frame div */ box-sizing: border-box; /* border: 4px solid #121212; /* Default */ /* border-radius: 6px; /* Rounded or 50% Circular */ /* background-image: url('../Images-UI/boxoutbg.gif'); /* Default */ /* width: 450px; */ max-height: 70px; max-width: 100%; } .ploadframedimgspl { /* No padding or margin - displaces img in frame div */ box-sizing: border-box; /* border: 1px solid #888888; /* Default */ /* border-radius: 50%; /* Rounded or 50% Circular */ /* background-image: url('../Images-UI/boxoutbg.gif'); /* Default */ /* width: 450px; */ max-height: 70vh; max-width: 100%; } .plimgframetxt { display: block; text-align: center; font-family: Tahoma, Geneva, Verdana, sans-serif; font-size: 200%; color: #FAFAFA; /* #1383EC Lt Blue Scheme */ margin: 0px auto; /* centre */ margin-top: 16px; /* Space down from image */ max-width: 85%; } #plimg1 { padding: 0px 0px; /* 1:1 correction */ } #loadingmsg { position: absolute; top: 0px; left: 0px; padding-top: 6px; /* Allow for progress bar */ background-color: rgba(0,0,0,0.5); /* Default */ /* background-image: url('../Images-UI/transpBlack50.png'); /* Default */ width: 100%; } p.statmsg { text-align: left; padding-left: 36px; line-height: 36px; font-size: 140%; color: #C3C3C3; /* Contrast with loadingmsg bkgrnd */ } img.statmsg { margin-right: -16px; /* Remove text offset */ } /* Pace Progress Bar */ .pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .pace-inactive { display: none; } .pace .pace-progress { /* Bar Attributes */ background: #1383EC; /* Lt Blue Scheme */ position: fixed; z-index: 1200; top: 0; right: 100%; width: 100%; height: 6px; } /* Message Box */ .msgolay { position: fixed; top: 0%; left: 0%; width: 100%; height: 0%; z-index: 1100; text-align: center; background-color: rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.5s 0.1s ease-out; overflow: hidden; } .msgbox { display: inline-block; margin-top: 0vh; /* IE: Units here and ws_divFrameVcen() must be the same */ padding: 6px; background-image: url('../Images-UI/pagebg.jpg'); border: 2px solid #96002E; max-width: 80%; overflow: hidden; opacity: 0; transition: all 0.5s 0.1s ease-in-out; transition-property: opacity, margin; } .msgbox p { margin: 8px 2px 0px 2px; } .msgimg { vertical-align: middle; margin-right: 4px; max-height: 32px; border: 0px solid #96002E; } .msgtxt { vertical-align: middle; font-family: Tahoma, Geneva, Verdana, sans-serif; font-size: 110%; color: #3C3C3C; } .msgbtn { display: inline-block; /* background-image: url('../Images-UI/highlightbg.jpg'); */ background-color: #96002E; border: 2px solid #96002E; padding: 2px 16px; color: #FAFAFA; /* Link Text */ } /* === Page Framework === */ #container /* Widths exclude any padding */ { /* padding: 8px; /* Default 8px */ margin: 0 auto; /* Centre in browser window */ max-width: 100%; /* Default 944px or 100% */ min-width: 360px; /* Min UI width (limited by wsfooter, banner & menu) */ height: auto; /* background-image: url('../Images-UI/framebg.jpg'); /* Default */ /* background-image: url('../Images-UI/transpOffWhite60.png'); /* Glass Scheme */ /* box-shadow: 0.0px 0.0px 16px #444444; /* (CSS3) Offset-Rt, Offset-Dn, Offset-Blur, Colour */ margin-top: 36px; /* Make room for relocated menubar + border/margin */ } .maxpagewidth { max-width: 100%; /* Default 944px */ } #sysmsgwrapper { background-color: #FEE638; line-height: 34px; } /* SysMsg Links */ #smtxt a:link {color: #B60038;} /* 1-unvisited */ #smtxt a:visited {color: #C90041;} /* 2-visited */ #smtxt a:hover {color: #D00045;} /* 3-hover */ #smtxt a:active {color: #EA0050;} /* 4-active */ .sysmsgtxt { font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif; font-size: 100%; color: #373737; } #headarea { /* margin-bottom: 8px; /* Default disabled */ height: auto; /* background-color: #EEEEEE; */ /* background-image: url('../Images/header-block-bg.jpg'); /* Default disabled */ background-position: center top; /* [left (Default) | center | right / top (Default) | center | bottom] */ /* background-size: cover; /* (CSS3) width height | contain | cover */ } #banner { /* Use 'Populate UI' setting to hide Banner if needed, not CSS */ margin: 0 auto; /* Centre */ /* margin-bottom: 8px; /* Default 8px */ height: auto; /* background-color: #EEEEEE; */ /* background-image: url('../Images/header-block-bg.jpg'); /* Default enabled */ /* background-position: center top; /* [left (Default) | center | right / top (Default) | center | bottom] */ /* background-size: cover; /* (CSS3) width height | contain | cover */ border-bottom: 0px solid #0582FC; /* Default 0px */ } #menuwrapper { /* BG Settings - Full Width Wide */ /* background-color: #000D68; /* Default Disabled */ /* background-image: url('../Images-UI/menubar-bg36.gif'); */ /* background-image: url('../Images-UI/transpBlack25.png'); */ background-repeat: repeat-x; border-bottom: 0px solid #12203E; /* Default 0px */ /* Fixed position settings - default disabled */ position: fixed; /* Move menubar to top and prevent scrolling */ top: 0px; left: 0px; width: 100%; overflow: hidden; /* Sticky Menu: Force enclosure of #menu incl margin */ } #menu { /* Use 'Populate UI' setting to hide Menu if needed, not CSS */ margin: 0 auto; /* Centre */ margin-bottom: 0px; /* Default 8px */ border-bottom: 0px solid #0582FC; /* Default 0px */ height: auto; width: 100%; /* BG Settings - Fixed Width Wide */ background-color: rgba(12,12,12,0.7); /* Default disabled (#000D68) */ /* background-image: url('../Images-UI/menubar-bg36.gif'); */ /* background-image: url('../Images-UI/srctranspDkRed75.png'); /* Glass Scheme */ background-repeat: repeat-x; /* box-shadow: 0px 0px 4px 1px #0000FF; /* Blue */ } #menu.sticky { position: fixed; top: 0; left: 0; right: 0; /* Keep centered */ margin-bottom: 0px; box-shadow: none; } #bodywrapper { background-color: #FAFAFA; /* Default enabled */ /* background-image: url('../Images-UI/contentbg.gif'); /* Default enabled */ } #bodyarea { height: auto; margin: 0 auto; /* Centre */ /* background-color: #FAFAFA; /* Default disabled */ /* background-image: url('../Images-UI/contentbg.gif'); /* Default disabled */ /* background-image: url('../Images-UI/transpOffWhite75.png'); /* Glass Scheme */ overflow: hidden; /* Force enclosure of 'float' divs and show bg colour */ } #sidebar { /* Use 'Populate UI' setting to hide Sidebar or SMenu if needed, not CSS */ margin-right: 8px; /* Separate from main content - default 8px */ height: auto; width: 122px; /* Default smenu/btnwrapper + 2px */ float: left; /* Content div sits next to Sidebar */ overflow: hidden; /* Force enclosure of 'float' divs and show bg colour */ } #smenu { /* Use 'Populate UI' setting to hide SMenu or Sidebar if needed, not CSS */ margin-bottom: 8px; /* Default 8px */ height: auto; min-width: 120px; /* At least 1 button wide */ /* background-color: #F8F8F8; */ /* background-image: url('../Images-UI/smenu-bg.gif'); */ } #smenufiller { display: none; /* Hide Filler (Default) */ margin-bottom: 0px; padding: 2px; height: auto; background-image: url('../Images-UI/smenu-bg.gif'); } #gallery { /* Use 'Populate UI' setting to hide Gallery if needed, not CSS */ margin: 0 auto; /* Centre */ /* margin-bottom: 8px; /* Default 8px */ /* background-color: #FAFAFA; /* Default Disabled */ /* background-image: url('../Images-UI/columnfillbg.gif'); */ /* background-image: url('../Images-UI/transpOffWhite75.png'); /* Glass Scheme */ height: 1px; /* Default 'auto' or 1px for .transheight effect */ max-width: 100%; /* Allows content width to vary */ min-width: 300px; /* as browser window re-sized */ overflow: hidden; /* Ensures div fills remaining width of content area */ } #content { /* Should NEVER be hidden */ margin: 0 auto; /* Centre */ height: auto; max-width: 100%; /* Allows content width to vary as browser window re-sized */ min-width: 356px; /* Min value >= pagecontainer (352) / 99% */ /* background-color: #FFFFFF; /* Default enabled */ /* background-image: url('../Images-UI/contentbg.gif'); /* Default enabled */ overflow: hidden; /* Ensures div fills remaining width of content area */ } #contfootsep { display: none; /* Hide if #footer top-border shown */ margin: 0 auto; /* Centre */ clear: both; /* Clear left + right float in divs above this */ height: 16px; } #sepline { margin: 0 auto; /* Centre */ border-bottom: solid 1px #EEEEEE; height: 50%; /* Offset so line in middle of Separator */ } #footer { display: none; /* Hide Footer (Made visible when WebShell loaded) */ margin: 0 auto; /* Centre */ margin-top: 0px; /* Space from Body Area (Default 0px) */ border-top: 2px solid #888888; /* Defaults: 0px if #sepline shown, 2px if not */ clear: both; /* Clear left + right float in divs above this */ height: auto; background-color: #3C3C3C; /* Default enabled */ /* background-image: url('../Images-UI/footerbar-bg36.gif'); /* Default */ background-image: url('../Images-UI/transpBlack10.png'); /* Glass Scheme */ overflow: hidden; } #pholfootban { margin: 0 auto; /* Centre */ } #logolist { /* background-image: url('../Images-UI/transpWhite10.png'); /* Option */ background-color: rgba(55,55,55,0.4); /* Option */ padding: 16px 0px; margin: 0 auto; /* Centre */ border-bottom: 1px solid #A0A0A0; text-align: center; overflow: hidden; } #logolist ul { display: inline-block; margin: 0; padding: 0; list-style: none; font-family: Tahoma, Geneva, Verdana, sans-serif; font-size: 90%; color:#3C3C3C; /* Non-link text */ } #logolist li { margin: 0; margin-bottom: -4px; /* Correction for ul 'inline-block' */ padding: 0; float: left; max-width: 25%; /* Default 100%/(no of logos) */ display: inline-table; /* IE alignment bug fix */ } #logolist img { max-height: 60px; max-width: 80%; margin: 0px 4.0vw; /* -webkit-filter: grayscale(100%); /* Option - Safari 6.0 - 9.0 */ /* filter: grayscale(100%); /* Option */ } #sitefooter { /* display: none; /* Hide site specific footer */ margin: 0 auto; /* Centre */ padding-bottom: 16px; overflow: hidden; border-bottom: 1px solid #E0E0E0; /* Separator */ } #wsfooter { height: 36px; margin: 0 auto; /* Centre */ background-color: #2A2A2A; } .footpanel { padding: 0px 0px; min-width: 33%; float: left; } div.fpitem { clear: both; } div.fpspacer { clear: both; height: 16px; /* Balances columns w/wo spacers (default 16px) */ } h4.foottxt, p.foottxt { margin: 10px; } h6.foottxt, span.foottxt, a.foottxt { line-height: 36px; float: left; } h6.foottxt a { color: #1383EC; /* WS Blue #0083E4 or WS Orange #FF8000 */ } img.footleft { margin: 10px; float: left; } img.footright { margin: 10px; float: right; } img.rnd { border-radius: 4px; } /* ===== Browser-Update.org Message Banner ===== */ .buorg div { /* Applies to div descendents of class buorg */ font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif; font-size: 90%; color: #3C3C3C; } /* ====== WATCH WINDOW SETTINGS ====== */ #watchWin { /* Hidden by Default */ z-index: 9999; /* Always on top */ padding: 2px; height: auto; position: fixed !Important; /* No scroll */ position: absolute; top:0; right:0; /* background-color: orange; /* (Use 'tool' default class) */ border: 2px solid #808080; overflow: hidden; } #watchWin.min { top: 36px; right: 0; } #watchHdr h6 { font-weight: bold; color: #000066; line-height: 22px; float: left; } #watchBody { min-height: 235px; max-height: 320px; width: 230px; overflow: auto; background-image: url(../Images-UI/transpWhite10.png); padding-top: 2px; } #watchBody h6 { color: #3C3C3C; } .min #watchBody { display: none; } div.watchHeader { padding-bottom: 4px; height: 20px; border-bottom: 1px solid #808080; } img.watchHeader { padding: 3px 8px; float: right; cursor: pointer; } /* ====== Media section must come below any styles that it changes ====== */ @media all and (max-width: 944px) /* Applies while browser window width (inc scrollbar) below this value (not IE<9) */ { #container { padding: 0px; /* Remove outer frame for tablets and mobiles */ } #backdrop { /* background-position: 50% 0%; */ background-size: 100vw auto; /* IE Mobile 11 scaling bug - do not use % */ } .plimgframetxt { font-size: 200%; } } /* ====== Media section must come below any styles that it changes ====== */ @media all and (max-width: 675px) /* Applies while browser window width (inc scrollbar) below this value (not IE<9) */ /* For narrow menu (mobile) device screens - set max-width to same value as 'narrowDevLimit' in menuifr.htm */ { body { /* background-color: #000000; /* Visible in touch device 'bounce-back' area */ } #backdrop { background-position: 50% 0px; /* Offset for menubar */ background-size: 160vw auto; /* IE Mobile 11 scaling bug - do not use % */ /* background-size: cover; */ } .plimgframetxt { font-size: 150%; } #sidebar { width: 100%; /* At least 1 button width */ } #smenufiller { display: none; /* Hide Filler */ margin-bottom: 8px; } #menuwrapper { overflow: visible; /* Cancel 'hidden' (jerky scroll issue in Edge Mobile) */ } #menu { position: fixed; /* Move narrow menubar to top and prevent scrolling */ top: 0px; left: 0px; margin-bottom: 0px; border-bottom: 0px solid #3C3C3C; transition: top 0.3s; /* For Narrow Dev smooth scroll in/out of view */ box-shadow: none; } #container { margin-top: 36px; /* Make room for relocated menubar + border/margin */ } #banner, #smenu, #gallery { margin-bottom: 0px; /* (Remove section spacers) */ } #contfootsep { display: none; } #footer { border-top: 2px solid #616171; } #logolist img { max-height: 40px; margin: 0px 4.0vw; } #watchWin.min { top: 0; right: 36px; } } /* ====== Media section must come below any styles that it changes ====== */ @media screen and (max-width: 9999px) /* Applies while browser window width (inc scrollbar) below this value (not IE<9) on screens only. Default 660px */ { /* #### DARK POWER-SAVE THEME for OLED Mobiles #### */ /* To enable, add 'dm' class to body */ .dm { /* 'body' */ background-color: #121212; /* Visible in 'bounce-back' area on touch devices */ } .dm h4, .dm h6, .dm p.foottxt { color: #C3C3C3; /* Default #C3C3C3 */ } .dm a { /* color: #C3C3C3; /* Default #C3C3C3 */ } .dm #container { /* background-image: url('../Images-UI/transpBlack25.png'); /* Glass Scheme */ } .dm #gallery { /* background-color:#282828; /* Solid */ /* background-image: url('../Images-UI/transpBlack75.png'); /* Glass Scheme */ } .dm #bodywrapper { background-color:#282828; /* Solid */ /* background-image: url('../Images-UI/transpBlack75.png'); /* Glass Scheme */ } .dm #bodyarea { /* background-color: #282828; /* Solid */ /* background-image: url('../Images-UI/transpBlack75.png'); /* Glass Scheme */ } .dm #footer { background-image: url('../Images-UI/footerbardk-bg36.gif'); } .dm #logolist { /* background-image: url('../Images-UI/transpWhite10.png'); /* Option */ /* background-color: rgba(55,55,55,0.4); /* Option */ } } /* ====== Media section must come below any styles that it changes ====== */ @media all and (max-width: 570px) /* Applies while browser window width (inc scrollbar) below this value (not IE<9) */ { .footpanel { min-width: 48%; } #logolist { padding: 16px 0px; } #logolist img { max-height: 30px; margin: 0px 8px; } } /* ====== Media section must come below any styles that it changes ====== */ @media all and (max-height: 430px) /* Applies while browser window height (inc scrollbar) below this value (not IE<9) */ { #backdrop { /* position: absolute; bottom: -25%; /* Allow scrolling and expand */ /* background-position: 50% 2%; */ /* background-size: auto 600px; /* IE Mobile 11 scaling bug - do not use % */ } } /* ====== Media section must come below any styles that it changes ====== */ @media all and (max-height: 350px) /* Applies while browser window height (inc scrollbar) below this value (not IE<9) */ { #watchBody { max-height: 250px } } /* ====== PRELOADER ANIMATION SETTINGS (CSS3) ====== */ /* Fade-In On Load */ .fadein { -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein 2s; /* Firefox < 16 */ animation: fadein 2s; /* Standard, IE10+ */ } /* Firefox < 16 */ @-moz-keyframes fadein { from {opacity: 0;} to {opacity: 1;} } /* Safari, Chrome and Opera > 12.1 */ @-webkit-keyframes fadein { from {opacity: 0;} to {opacity: 1;} } /* Standard, IE10+ */ @keyframes fadein { from {opacity: 0;} to {opacity: 1;} } /* Fade-In End */ /* ====== PRELOADER TRANSITION SETTINGS (CSS3) ====== */ /* Transition on style application */ .transfadein { visibility: visible; opacity: 1; /* Property, duration, delay, type */ -webkit-transition: opacity 0.5s 0.05s ease-in; -moz-transition: opacity 0.5s 0.05s ease-in; transition: opacity 0.5s 0.05s ease-in; } .transfadeout { opacity: 0; visibility: hidden; /* Property, duration, delay, type */ -webkit-transition: opacity 1s 0.1s ease-out; -moz-transition: opacity 1s 0.1s ease-out; transition: opacity 1s 0.1s ease-out; } .translateout { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: all 1s 0.1s ease-out; -moz-transition: all 1s 0.1s ease-out; transition: all 1s 0.1s ease-out; } .backdropblur { -webkit-filter: blur(0px); /* to disable, set value to 0px */ filter: blur(0px); /* Transitions deprecated here as they cause flashes in Chrome (bug) */ /* -webkit-transition: 1.2s 0.1s ease-in-out; -moz-transition: 1.2s 0.1s ease-in-out; transition: 1.2s 0.1s ease-in-out; */ } .overlayblur { -webkit-filter: blur(3px); /* to disable, set value to 0px */ filter: blur(3px); /* Transitions deprecated here as they cause flashes in Chrome (bug) */ /* -webkit-transition: 0.5s 0.1s ease-in-out; -moz-transition: 0.5s 0.1s ease-in-out; transition: 0.5s 0.1s ease-in-out; */ }