/* +++ VERY IMPORTANT+++ The default font for these templates is 13px Arial, set on the element (in basereset.css). NEVER set a font-size or font-family on the element. ALWAYS override using a child of , with the pixel-equivalent percentage value for the font size, as documented above. EG: #wrap {font-family:Verdana,Arial,Helvetica,sans-serif;} would set everything within #wrap to Verdana. It is better to set font-sizes on elements rather than containers. */ /* General fonts */ #pagewrap, #ftwrap { font-family: Arial, Helvetica, sans-serif; } h1 { font-size: 152%; } h2 { font-size: 122%; } h3 { font-size: 107%; } h4 { font-size: 107%; } h5 { font-size: 107%; } h6 { font-size: 107%; } p, li, dt, dd, th, td, address, blockquote, pre, input, textarea, select { font-size: 85%; } p p, p li, p dt, p dd, p th, p td, p address, p blockquote, p pre, p input, p textarea, p select, li p, li li, li dt, li dd, li th, li td, li address, li blockquote, li pre, li input, li textarea, li select, dt p, dt li, dt dt, dt dd, dt th, dt td, dt address, dt blockquote, dt pre, dt input, dt textarea, dt select, dd p, dd li, dd dt, dd dd, dd th, dd td, dd address, dd blockquote, dd pre, dd input, dd textarea, dd select, th p, th li, th dt, th dd, th th, th td, th address, th blockquote, th pre, th input, th textarea, th select, td p, td li, td dt, td dd, td th, td td, td address, td blockquote, td pre, td input, td textarea, td select, address p, address li, address dt, address dd, address th, address td, address address, address blockquote, address pre, address input, address textarea, address select, blockquote p, blockquote li, blockquote dt, blockquote dd, blockquote th, blockquote td, blockquote address, blockquote blockquote, blockquote pre, blockquote input, blockquote textarea, blockquote select, pre p, pre li, pre dt, pre dd, pre th, pre td, pre address, pre blockquote, pre pre, pre input, pre textarea, pre select, input p, input li, input dt, input dd, input th, input td, input address, input blockquote, input pre, input input, input textarea, input select, textarea p, textarea li, textarea dt, textarea dd, textarea th, textarea td, textarea address, textarea blockquote, textarea pre, textarea input, textarea textarea, textarea select, select p, select li, select dt, select dd, select th, select td, select address, select blockquote, select pre, select input, select textarea, select select { font-size: 100%; } strong, b { font-weight: bold; } em, i { font-style: italic; } /* Headings -------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-weight: normal; } h1, .h1 { color: #000000; font-weight: bold; } h2, .h2 { color: #000; margin-bottom: 8px; font-weight: bold; } h2.alpha { } h2.alpha a { } h2.alpha a:hover { color: #fff; text-decoration: underline; } h3, .h3 { font-weight: bold; margin-bottom: 8px; } h4 { line-height: 1.25em; margin-bottom: 1.25em; } h5 { font-weight: bold; margin-bottom: 1.5em; } h6 { font-weight: bold; } /* Text elements -------------------------------------------------------------- */ .pri-pad p { margin: 0 0 1.5em; } .ter-pad p { margin: 0 0 8px; } .pri-pad p.last { margin-bottom: 0; } .pri-pad ul, .pri-pad ol { margin: 0 1.5em 1.5em 1.5em; } .pri-pad ol { margin-left: 30px; } .pri-pad ul { list-style-type: circle; } .pri-pad ol { list-style-type: decimal; } .pri-pad ul li { padding: 2px 0 2px 0; } .pri-pad ol li { padding-bottom: 1.2em; } .pri-pad ul ul, .pri-pad ol ol { margin-bottom: 0; } .pri-pad ul ul { list-style-type: square; } .pri-pad ul ul ul { list-style-type: disc; } .pri-pad ol ol { list-style-type: lower-roman; margin-left: 20px; } .pri-pad ol li li { padding-bottom: 0; padding-top: 2px; } .pri-pad dl { margin: 0 0 1.5em 0; } .pri-pad dl dt { font-weight: bold; } .pri-pad dd { margin-left: 1.5em; } .pri-pad abbr, .pri-pad acronym { border-bottom: 1px dotted #666; } .pri-pad address { margin-bottom: 1.5em; } .pri-pad del { color: #666; } a:focus, a:hover { color: #003399; text-decoration: none; } a { color: #003399; text-decoration: underline; outline: none; } .pri-pad blockquote { margin: 1.5em; /*color: #666; font-style: italic;*/ } .pri-pad strong, .pri-pad strong em, .bold { font-weight: bold; } .pri-pad em, .pri-pad .em, .pri-pad .italic, .pri-pad dfn { font-style: italic; /*background: #ffc;*/ } .pri-pad dfn { font-weight: bold; } .pri-pad pre, .pri-pad code { margin: 1.5em 0; white-space: pre; } .pri-pad pre, .pri-pad code, .pri-pad tt { font: 1em 'andale mono', 'monotype.com', 'lucida console', monospace; line-height: 1.5em; } .pri-pad tt { display: block; margin: 1.5em 0; line-height: 1.5em; } hr { color: #bfbfbf; height: 1px; border: 0; background-color: #d9dfe3; margin: 7px 0; } .gray { color: #bfbfbf; } .red, #pri .red { color: #ff0000; } .indent { padding-left: 20px; } .pri-pad .underline, .underline { text-decoration: underline; } .alignright { text-align: right; } /*.alignright { text-align:right; padding-right:5%;}*/ .alignleft { text-align: left; } .center, .pri-pad .center { margin-right: auto; margin-left: auto; text-align: center; } .border-bottom { border-bottom: 1px solid #cccdcf; padding-bottom: 19px; margin-bottom: 20px; } .border-bottom2 { border-bottom: 2px solid #cccdcf; padding-bottom: 7px; margin-bottom: 14px; } .pri-pad ul.list { margin-left: 0; list-style: none; } label.block { margin-bottom: 4px; } /* END General fonts */ /* END General fonts */ #sec { padding-right: 2px; } #sec .sec-pad { position: relative; } #helpLinkContainer { position: absolute; top: 2px; right: 6px; color: #144B87; font-size: 92%; } #helpLink { text-decoration: none; } #helpLink:focus, #helpLink:hover { text-decoration: underline; } #ter { margin-right: -182px; /* same as #outer padding-right */ width: 182px; /* same as #outer padding-right */ } /* 100% page height */ #ftwrap { margin-top: 0; } /* Negative of total height of all fts */ #outer { padding-bottom: 0; } /* END 100% page height */ .pad { padding: 0; } .pri-pad { padding: 6px 15px 0px 14px; } /* column padding */ .sec-pad { padding: 6px 0px 0px 12px; } /* column padding */ /* END Widths/Heights */ /* Visual Column Structure */ body#threecol #pagewrap { background: url(../images/bg-pagewrap-threecol.gif) repeat-y top left scroll; } body#twocol-right #pagewrap { background: url(../images/bg-pagewrap-twocol-right.gif) repeat-y top left scroll; } body#onecol #pagewrap { background: url(../images/bg-pagewrap-onecol.gif) repeat-y top left scroll; } /* END Visual Column Structure */ /* Theme */ html, body { color: #000; } body { min-height: 100%; height: 100%; background: #b6b7bc; margin: 0; padding: 0; } td, th { vertical-align: top; } /* Displays & Margins & Images */ .block { display: block; } .inline { display: inline; } .inline-block { display: -moz-inline-box; display: inline-block; } img.block { display: block; margin: 0 0 0 0; } img.margin-bottom, .margin-bottom { margin-bottom: 20px; } #sec img.block, #ter img.block { margin-bottom: 10px; } img.left { float: left; display: block; margin: 0 10px 8px 0; clear: right; } img.right { float: right; display: block; margin: 0 0 14px 10px; clear: left; } #ter img.left { margin: 0 4px 8px 0; } #ter img.right { margin: 0 0 8px 4px; } .zerobottommargin, .zeroBottomMargin { margin-bottom: 0 !important; } img.zeroPadding, .zeroPadding, .zeropadding { padding: 0 !important; } #pri { border-left: 2px solid #7f7f7f; } .skip, .displaynone, .displayNone, .display-none, #pri .skip, #pri .displaynone, #pri .displayNone, #pri .display-none { display: none; } /* END Displays & Margins & Images */ .intro { background: #eee; padding: 10px; } #masthead-container { background-color: #8ebbdb; } #masthead { color: #fff; height: 94px; } .second-level #masthead, .help-page #masthead { padding-bottom: 4px; } body#onecol.second-level #pagewrap { background-color: #dde7f0; } body#onecol.help-page #pagewrap { background: url(../images/blueborder.gif) transparent repeat-y 0 0; width: 800px; } #wrap { width:1150px; padding: 0 20px 30px 20px; margin: 0 auto; border-left: 1px solid #666; border-right: 1px solid #666; background: url(../images/blueborder.gif) #fff repeat-y 0 0; height: 100%; overflow: visible; } body#onecol.help-page #wrap { /*background: url(../images/bg-sec-pad.gif) transparent no-repeat 0 0;*/ width: 800px; } body#onecol.second-level #outer { /*background: url(../images/bg-sec-pad.gif) transparent no-repeat 0 0;*/ min-height: 249px; } body#onecol.second-level .pri-pad { /*min-height: 800px; /* for testing only */ height: 100%; } #master { background: url(../images/bg-nav.gif) no-repeat center 136px scroll; } #nav { background: #aba; color: #fff; } #nav a { outline: none; } /* Masthead */ body#onecol.help-page #intro-title { /* background: url(../images/bg-intro-title.gif) no-repeat 14px 48px; */ text-indent: -999999em; width: 283px; height: 38px; float: left; padding: 48px 53px 7px 14px; z-index: 300; /*visibility: hidden; */ } #intro-title { /* background: url(../images/bg-intro-title.gif) no-repeat 14px 48px; */ text-indent: -999999em; width: 283px; height: 38px; float: left; /*padding: 48px 53px 7px 14px;*/ z-index: 300; /*visibility: hidden; */ } #intro-title a { height: 86px; width: 240px; display: block; } #onecol.second-level #globalnav { padding: 69px 0 0 250px; } #globalnav { position: absolute; top: 0; left: 245px; width: 860px; padding: 69px 0 0 0; white-space: nowrap; } #globalnav li { float: left; padding: 5px 5px; color: #144b87; } #globalnav a { color: #144b87; font-size: 110%; font-weight: bold; text-decoration: none; border-right: 1px solid #144b87; padding: 0 10px 0 0; } #globalnav a.last { border: none; text-transform: none; color: #144b87; } #globalnav a:visited { color: #144b87; } /* #globalnav a:focus { color: #666666; font-weight: bold; } */ #globalnav a:hover { color: #666666; font-weight: bold; } #globalnav a:active { font-weight: bold; } #helplink { font-weight: bolder; font-size: 110%; text-decoration: none; } #logo { display: block; width: 94px; /* 88 */ height: 115px; /* 110 */ text-indent: -999999em; position: absolute; top: 0; margin-right: 0px; right: 10px; z-index: 200; /* left: 880px; */ } /* END Masthead */ /* Homepage */ .home-page #globalnav .glnav-flooding-info a { font-weight: bold; color: #144b87; } /* END Homepage */ /* Help page */ .help-page #logo { left: 650px; } .second-level #masthead-wrap, .help-page #masthead-wrap { background: #fff url(../images/bg-help-page-masthead-shadow.gif) repeat-x 0 0; position: relative; } .second-level #mastheadcover, .help-page #mastheadcover { background: url(../images/cover.gif) repeat-x 0 0; height: 4px; width: 10px; position: absolute; bottom: 0; left: 0; } /* .help-page #logo { display: block; background: #fff url(../images/hcfcd-logo-drop-shadow.gif) no-repeat 0 0; width: 91px; height: 115px; } */ /* .help-page .pri { background-color: #fff; } */ /* END Help page */ /* Help Dialog Modal */ /* .helpdialog { background; #fff; border: 1px solid red; } */ /* END Help Dialog Modal */ /* Sec */ #address-search { padding: 7px 0 11px 14px; font-size: 85%; } #address-search #address { /*color: #898991;*/ background: #fff; font-size: 100%; /*font-style:italic; */ width: 168px; padding: 2px; float: left; } #address-search #findAddressButton { font-size: 100%; padding: 2px; margin-left: 0; } #address-search label { color: #144b87; font-weight: bold; padding: 0 0 0 0; } #address-search p { margin: 5px 0 0 0; } #address-search .example { font-size: 105%; clear: both; } #map-view-options { background-color: #e3e3e3; font-size: 85%; padding: 6px 0 6px 14px; } #map-view-options h2 { font-weight: bold; margin: 0; } #map-view-options h2 em { font-size: 85%; } /* #mapped-floodplains span { padding: 4px 0 0 22px; display: block; min-height: 17px; } */ .feature-key { font-size: 85%; padding: 2px 0 0 14px; } span.feature { font-size: 85%; padding: 5px 0 0 16px; } span.display-feature { font-size: 85%; padding: 5px 0 0 28px; } #mapped-floodplains .feature-key { font-size: 85%; padding: 0; background: #eee; } #lomr-floodplains .feature-key { font-size: 100%; padding: 0; background: #eee; } #mapped-floodplains { padding: 0 0 0 12px; background-color: #eee; } #lomr-floodplains { background-color: #eee; padding: 0 0 0 12px; font-size: 85%; } #rad1, #rad2, #rad3 { vertical-align: middle; margin: 0; } #rad1 { margin-bottom: 2px; } #rad2, #rad3, #chan1 { margin-top: 1px; } #mapped-floodplains-1 { background: url(../images/bg-mapped-view-options-icons.gif) no-repeat 0 0; } #mapped-floodplains-2 { background: url(../images/bg-mapped-view-options-icons.gif) no-repeat 0 -67px; } #mapped-floodplains-3 { background: url(../images/bg-mapped-view-options-icons.gif) no-repeat 0 -133px; } #mapped-floodplains-4 { background: url(../images/bg-mapped-view-options-icons.gif) no-repeat 0 -199px; } /* #mapped-floodplains, #channels-boundaries #watersheds-ponding */ #watersheds-ponding { background: #e3e3e3; padding-top: 10px; } #watersheds-ponding span { font-size: 92%; } #watersheds-ponding label { float: left; padding: 0 0 10px 22px; display: block; } #watersheds-ponding input { float: left; margin-right: 8px; } #rad2-label { background: url(../images/bg-mapped-view-options-icons.gif) no-repeat 0 -265px; } #rad3-label { background: url(../images/bg-mapped-view-options-icons.gif) no-repeat 0 -326px; } #channels-boundaries { padding-top: 10px; } #channels-boundaries .clearfix span { font-size: 85%; display: inline; padding: 0; } #channels-boundaries label { float: left; padding: 0 0 0 0; display: block; } #channels-boundaries #watershed-boundaries { background: url("../images/bg-mapped-view-options-icons.gif") no-repeat scroll 0 -508px transparent; padding-left: 25px; min-height: 22px; padding-top: 1px; } #chan2 { margin-top: 3px; } #channels-boundaries input { float: left; margin-right: 8px; } #channels-boundaries span { padding: 4px 0 0 22px; display: block; min-height: 19px; } #channels-boundaries .feature-key { font-size: 85%; padding: 5px 0 0 10px; } #channels-boundaries-1 { background: url(../images/bg-mapped-view-options-icons.gif) no-repeat 0 -387px; } #channels-boundaries-2 { background: url(../images/bg-mapped-view-options-icons.gif) no-repeat 0 -445px; } #channels-boundaries-3 { background: url(../images/bg-mapped-view-options-icons.gif) no-repeat 0 -507px; } #channels-boundaries-4 { font-size: 118%; background: url(../images/bg-mapped-view-options-icons.gif) no-repeat 0 -571px; } #channels-boundaries #channels-boundaries-4-container { padding-left: 21px; } #channels-boundaries #channels-boundaries-4-container span { padding-left: 25px; } hr { /* width: 85%; */ /* color: #999; */ } #print-acrobat-details { padding: 10px 0 0 0px; } .sec-pad p { margin: 0 0 10px 0; } #disclaimer { padding: 5px 0 10px 0; text-align: center; } /* END Sec */ /* Ter */ /* END Ter */ /* Footer */ #ft, .ft { border-top: 1px #898 solid; color: #fff; } #ft p, #ft ul { font-size: 85%; } #ft p { padding: 5px 5px 6px 7px; } #ft ul { position: absolute; right: 10px; top: 5px; } #ft li { display: inline; } #ft li a { display: block; float: left; border-right: 1px solid #fff; margin-right: 7px; padding-right: 7px; color: #fff; text-decoration: none; } #ft li a:hover { text-decoration: underline; } #ft li.last a { border-right: 0; margin-right: 0; padding-right: 0; } /* END Footer */ /* END Theme */ /* Clearfix */ .clearfix:after, #masthead:after, #mapped-floodplains:after, #channels-boundaries:after, #watersheds-ponding:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* END Clearfix */ #divTop { background-repeat: repeat; position: absolute; z-index: 120; filter: alpha(opacity=50); -moz-opacity: .50; opacity: 0.5; } #divLeft { background-repeat: repeat; position: absolute; z-index: 120; filter: alpha(opacity=50); -moz-opacity: .50; opacity: 0.5; } html { overflow: auto; } #divBottom { background-repeat: repeat; position: absolute; z-index: 120; filter: alpha(opacity=50); -moz-opacity: .50; opacity: 0.5; } #divRight { background-repeat: repeat; position: absolute; z-index: 120; filter: alpha(opacity=50); -moz-opacity: .50; opacity: 0.5; } #tocTD { font-family: Arial, Verdana; width: 100%; } #tocTD td { text-align: left; font-size: 10pt; padding: 0; } #divMask { background: url(../Images/header.PNG) repeat; position: absolute; z-index: 125; filter: alpha(opacity=50); -moz-opacity: .50; opacity: 0.5; } #divDisclaimer { position: absolute; z-index: 130; } #disclaimerTextPanel { text-align: right; font-family: Calibri,Arial,Verdana; margin-left: 15px; font-size: 11pt; margin-right: 15px; } #titleText { text-align: left; background-color: black; font-family: Papyrus,Tahoma,Arial; color: white; font-size: 10pt; font-weight: bold; } #message { border-style: none; border-width: thin; margin-top: 10px; color: #0066a0; font-weight: bold; } .addrList { margin-left: 15px; background-color: White; padding: 5px; } .infoWinTitle { font-family: Arial, Verdana; font-weight: bold; font-size: 9pt; background-color: White; white-space: nowrap; white-space: pre; } .infoWinAddress { font-family: Arial, Verdana; font-weight: normal; font-size: 8pt; margin-left: 5px; margin-bottom: 5px; background-color: White; white-space: nowrap; white-space: pre; } .infoWinLOMR { font-family: Arial, Verdana; font-weight: normal; font-size: 8pt; margin-left: 5px; margin-bottom: 5px; background-color: White; white-space: pre-line; width: 370px; } td.active { color: Black; } td.inactive { color: Gray; } img.active { filter: alpha(opacity=100); opacity: 1.0; -moz-opacity: 1.0; } img.inactive { filter: alpha(opacity=30); opacity: 0.3; -moz-opacity: .30; } span.active { color: Black; } span.inactive { color: Gray; } label.active { color: Black; } label.inactive { color: Gray; } input.hint { color: Gray; font-style: italic; } input.entry { color: Black; font-style: normal; } .dijitTooltipContainer { font-size: 12px; font-family: arial; width: 300px; } .err { font-size: 150%; } .bing-map-InfoBox-close { float: right; text-decoration: none; z-index: 1000; } .bing-map-InfoBox-beak { font-size: 0px; line-height: 0%; width: 0px; border-top: 10px solid transparent; border-left: 10px solid White; border-right: 10px solid transparent; clear: both; } .bing-map-InfoBox-large { position: absolute; border: solid 1px grey; background-color: White; z-index: 1000; padding: 5px; max-width: 375px; } #gmap .MicrosoftMap .NavBar { width: 100%; -moz-box-shadow: 0px 0px 4px #000; -webkit-box-shadow: 0px 0px 4px #000; box-shadow: 0px 0px 4px #000; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#888888')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#888888'); } #gmap .NavBar_zoomDrop, #gmap .MicrosoftMap_NavBar_typeMenu { -moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5); box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5); border: 1px solid #aaaaaa; border-top: none; } /* #gmap img { background: transparent; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";*/ /* IE8 */ /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);*/ /* IE6 & 7 */ /*zoom: 1; }*/ .s0 { margin-top: 0; margin-bottom: 0; margin-left: 0; font-family: 'Calibri'; font-size: 15px; } .s0b { margin-top: 0 15px 0 20px; font-family: 'Calibri'; font-size: 15px; padding-bottom:20px; } .s1 { font-family: 'Calibri'; font-size: 19px; color: #0c5480; margin-top: 0; padding-top:32px; margin-bottom: 0; margin-left: 0; font-weight: bold; } .s2 { font-family: 'Calibri'; font-size: 17px; color: rgb(44,149,181); margin-top: 0; margin-bottom: 0; margin-left: 0; padding-top: 13px; font-weight: bold; } .s3 { font-family: 'Calibri'; font-size: 15px; color: Black; margin-top: 0; margin-bottom: 0; margin-left: 0; padding: 13px 15px 0 0; } .s4 { margin-left: 48px; } .s5 { font-family: 'Calibri'; font-style: italic; font-size: 14px; margin-left: 20px; font-weight: bold; } .s6 { font-family: 'Calibri'; font-size: 15px; font-weight: bold; color: Black; margin-top: 13px; margin-bottom: 0; margin-left: 20px; padding: 0 15px 0 0; } .btt { font-family: 'Calibri'; font-size: 15px; float: right; padding-right: 20px; clear: both; } /* Image Sprites */ .sprite { background: url(../Images/FEMT_Sprites.png) no-repeat top left; } .sprite-02PFloodplainLomr { width: 21px; height: 21px; background-position: -5px -5px; } .sprite-1PFloodplainLomr { width: 21px; height: 21px; background-position: -36px -5px; } .sprite-CoastalFloodplains { width: 21px; height: 21px; background-position: -67px -5px; } .sprite-Floodway { width: 21px; height: 21px; background-position: -98px -5px; } .sprite-HarrisCountyBoundary { width: 21px; height: 21px; background-position: -129px -5px; } .sprite-LOMRboundary { width: 21px; height: 21px; background-position: -160px -5px; } .sprite-Ponding { width: 21px; height: 21px; background-position: -191px -5px; } .sprite-WatershedColorCoded { width: 21px; height: 21px; background-position: -222px -5px; } .sprite-bg-masthead { width: 970px; height: 94px; background-position: -5px -36px; } .sprite-bg-pagewrap-twocol-left { width: 234px; height: 4px; background-position: -253px -5px; } .sprite-bg-sec { width: 234px; height: 5px; background-position: -497px -5px; } .sprite-channels { width: 21px; height: 21px; background-position: -742px -5px; } .sprite-channels_dotted { width: 21px; height: 21px; background-position: -773px -5px; } .sprite-hcfcd-logo { width: 94px; height: 115px; background-position: -5px -140px; } .sprite-hcfcd_logo_bw { width: 49px; height: 57px; background-position: -109px -140px; } .sprite-header { width: 1px; height: 1px; background-position: -804px -5px; } .sprite-ques { width: 12px; height: 12px; background-position: -815px -5px; } .sprite-left_legend { width: 10px; height: 224px; background-position: -1120px -4px; } /* Main Page Layout */ #main-content { height: 100%; width: 100%; min-width: 700px; } /* Banner */ .mainHeader { top: 0; width: 100%; height: 94px; background-color: transparent; padding: 0; margin: 0; } .mapHeader { position: absolute; } .noDisplay { display: none; } #mainBanner { position: absolute; top: 0; left: 0; width: 1090px; height: 93px; border-bottom: 1px solid rgba(121, 126, 128, 1); } #fillBanner { position: absolute; top: 0; left: 970px; right: 0; height: 93px; background-color: #8ebbdc; border-bottom: 1px solid rgba(121, 126, 128, 1); } /* Map Components */ #mapDivContainer { position: absolute; top: 95px; right: 0; bottom: 0; left: 234px; border-left: 2px solid #7f7f7f; } #mapDiv { position: relative; padding: 0; border: none; width: 100%; height: 100%; } #controlPanelContainer { position: absolute; top: 95px; padding: 0; bottom: 0; width: 234px; background-color: White; margin: 0; white-space: normal; vertical-align: top; } #controlPanel { vertical-align: top; overflow-y: auto; overflow-x: hidden; height: 100%; } #hcfcdLogo { position: absolute; top: 0; right: 10px; } @media (max-width: 1200px) { #hcfcdLogo { left: 1095px; } } #hcfcdLogoBW { width:48px; height:57px; position: relative; overflow: hidden; display: inline-block; } #hcfcdLogoBW_img { top: -140px; left: -109px; position: relative; } #hcfcd_link { text-decoration:none; font-size: 1.01em; font-family: Arial; font-style: italic; font-weight: bold; color: black; } #bgSecPad { position: absolute; top: 4px; left: 0; } /* Legend classes */ .subLegend { margin-left: 15px; } .legend { display: inline-block; position: relative; width: 21px; height: 21px; overflow: hidden; vertical-align: middle; } .legend img { position: relative; } /* Opacity */ .Floodway img, .OnePFloodplains img, .CoastalFloodplains img { opacity:0.8;} .TwoPFloodplains img {opacity:1} .Floodway img { top: -5px; left: -98px; } .OnePFloodplains img { top: -5px; left: -36px; } .TwoPFloodplains img { top: -5px; left: -5px; } .CoastalFloodplains img { top: -5px; left: -67px; } .LOMRboundary img { top: -5px; left: -160px; } .WatershedColorCoded img { top: -5px; left: -222px; } .Ponding img { top: -5px; left: -191px; } .channels img { top: -5px; left: -742px; } .channels_dotted img { top: -5px; left: -773px; } .HarrisCountyBoundary img { top: -5px; left: -129px; } /* MODAL STYLES-------------------------------*/ .jsw-modal { /* modals are hidden by default */ display: none; /* modal container fixed across whole screen */ position: fixed; inset: 0; /* z-index must be higher than everything else on the page */ z-index: 10000; /* semi-transparent black background exposed by padding */ background-color: rgba(255, 255, 255, .5); /*rgba(0, 0, 0, .75);*/ overflow: auto; } .jsw-modal.open { display: block; } .jsw-modal-body { position: absolute; padding: 10px 8px; background: #fff; margin: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } body.jsw-modal-open { /* body overflow is hidden to hide main scrollbar when modal window is open */ overflow: hidden; } .model-close-button { padding: 0 0.3em; text-align: center; cursor: pointer; border: 1px solid #759dc0; padding: 2px 4px 4px 4px; color: #000000; border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); background-color: #bcd8f4; background-image: linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%); transition-property: background-color; transition-duration: 0.3s; display: inline-block; } .model-close-button:hover { transition-property: background-color; transition-duration: 0.3s; }