/* == GENERAL ==================================================================================== - NORTHLANDCOLLEGE.EDU - GENERIC FRAME STYLES - Created by: Northland Community and Technical College == NOTES ====================================================================================== - Use for standard sub layer pages == UPDATE INFO ================================================================================ Last updated: 01/06/2012 Last update by: Chad Sperling == TABLE OF CONTENTS ========================================================================== 00: STANDARD HERO IMAGE w/ Big Block Text Overlay 01: HELLO FRAMES a) One Column Lite (title/intro) b) Two Column Lite (title | intro) c) Two Column Buckets (title/intro | buckets) d) Two Column CTA Buttons (title/intro | cta buttons) 02: TITLE 03: TITLE 04: NORTHLANDNOW INTEGRATION FRAME a) title b) title c) title 05: FEATURED BUCKETS FRAME a) Two Column a) Three Column b) Four Column 06: CALL TO ACTIONS FRAME a) Middle a) Footer 07: BACK TO TOP LINK ============================================================================================== */ /* ########################################################################################################################################### ########################################################################################################################################### 05: STANDARD HERO IMAGE FRAME - Image and Text Based (see superhero.css for more advanced options) ########################################################################################################################################### ########################################################################################################################################### */ /* Layout */ #HERO-PageHeader { display:block; float:left; *position: relative; min-width:450px; width:100%; margin-top:0px!important; margin-bottom:10px!important; *margin-bottom:0px!important; padding:0px!important;} /* HEROS: Standard Hero Image Page Header ---------------------------------------------------------------------------------------------------------- */ #HERO-PageHeader .heroimage { position: relative; background-color:#fff; clear:both; height:100%; border: 0 !important;} /* Hero Image Positioning */ #HERO-PageHeader .heroimage.top { float:left; border: none; margin-bottom: 10px!important;} #HERO-PageHeader .heroimage.middle { float:left; border: none; margin-top: 15px!important; margin-bottom: 15px!important;} #HERO-PageHeader .heroimage.bottom { float:left; border: none; margin-top: 15px!important; margin-bottom: 0px!important;} #HERO-PageHeader .heroimage.solo { float:left; border: none; padding: 0px!important; margin-top: 0px!important; margin-bottom: 0px!important;} /* Hero Image Text Module Overlay */ #HERO-PageHeader .heroimage ul.TextModule { margin: 0; display: block;} #HERO-PageHeader .heroimage ul.TextModule li { margin:0px; } /* Hero Image Text Module Overlay Float */ #HERO-PageHeader .heroimage .TMfl-Left { float:left !important; margin-left:10px !important; } #HERO-PageHeader .heroimage .TMfl-Right { float:right !important; margin-right:10px !important; } /* Hero Image Text Module Overlay Width */ #HERO-PageHeader .heroimage .TMwi-50 { width:50px !important; max-width:50px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-70 { width:70px !important; max-width:70px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-90 { width:90px !important; max-width:90px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-100 { width:100px !important; max-width:100px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-120 { width:120px !important; max-width:120px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-150 { width:150px !important; max-width:150px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-170 { width:170px !important; max-width:170px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-180 { width:180px !important; max-width:180px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-190 { width:190px !important; max-width:190px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-195 { width:195px !important; max-width:195px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-200 { width:200px !important; max-width:200px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-205 { width:205px !important; max-width:205px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-210 { width:210px !important; max-width:210px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-215 { width:215px !important; max-width:215px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-220 { width:220px !important; max-width:220px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-225 { width:225px !important; max-width:225px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-230 { width:230px !important; max-width:230px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-240 { width:240px !important; max-width:240px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-250 { width:250px !important; max-width:250px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-260 { width:260px !important; max-width:260px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-270 { width:270px !important; max-width:270px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-280 { width:280px !important; max-width:280px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-290 { width:290px !important; max-width:290px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-300 { width:300px !important; max-width:300px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-310 { width:310px !important; max-width:310px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-315 { width:315px !important; max-width:315px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-320 { width:320px !important; max-width:320px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-330 { width:330px !important; max-width:330px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-340 { width:340px !important; max-width:340px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-350 { width:350px !important; max-width:350px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-370 { width:370px !important; max-width:370px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-380 { width:380px !important; max-width:380px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-385 { width:385px !important; max-width:385px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-390 { width:390px !important; max-width:390px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-395 { width:395px !important; max-width:395px !important; overflow:hidden !important; } #HERO-PageHeader .heroimage .TMwi-400 { width:400px !important; max-width:400px !important; overflow:hidden !important; } /* Text Module Background */ #HERO-PageHeader .heroimage .TMbg-Black60 { background:#000 !important; background: rgba(0,0,0,.6) !important;} #HERO-PageHeader .heroimage .TMbg-Black70 { background:#000 !important; background: rgba(0,0,0,.7) !important;} #HERO-PageHeader .heroimage .TMbg-Black80 { background:#000 !important; background: rgba(0,0,0,.8) !important;} #HERO-PageHeader .heroimage .TMbg-Black90 { background:#000 !important; background: rgba(0,0,0,.9) !important;} #HERO-PageHeader .heroimage .TMbg-Black100 { background:#000 !important; background: rgba(0,0,0,1) !important;} #HERO-PageHeader .heroimage .TMbg-White70 { background:#FFF !important; background: rgba(255,255,255,.7) !important;} #HERO-PageHeader .heroimage .TMbg-White80 { background:#FFF !important; background: rgba(255,255,255,.8) !important;} #HERO-PageHeader .heroimage .TMbg-White90 { background:#FFF !important; background: rgba(255,255,255,.9) !important;} #HERO-PageHeader .heroimage .TMbg-White100 { background:#FFF !important; background: rgba(255,255,255,1) !important;} #HERO-PageHeader .heroimage .TMbg-Yellow90 { background:#FFF200 !important; background: rgba(255,242,0,.9) !important;} #HERO-PageHeader .heroimage .TMbg-Yellow100 { background:#FFF200 !important; background: rgba(255,242,0,1) !important; } /* Text Module Padding */ #HERO-PageHeader .heroimage .TMpad-HDI { padding: 8px 15px 8px 15px !important;} #HERO-PageHeader .heroimage .TMpad-HDIIa { padding: 8px 15px 0px 15px !important;} #HERO-PageHeader .heroimage .TMpad-HDIIb { padding: 5px 15px 8px 15px !important;} #HERO-PageHeader .heroimage .TMpad-HDIIIa { padding: 8px 15px 0px 15px !important;} #HERO-PageHeader .heroimage .TMpad-HDIIIb { padding: 5px 15px 8px 15px !important;} #HERO-PageHeader .heroimage .TMpad-HDIIIc { padding: 0px 15px 8px 15px !important;} #HERO-PageHeader .heroimage .TMpad-IntroI { padding: 5px 15px 10px 15px !important;} #HERO-PageHeader .heroimage .TMpad-IntroII { padding: 0px 15px 10px 15px !important;} #HERO-PageHeader .heroimage .TMpad-TagI { padding: 0px 0px 0px 0px !important;} #HERO-PageHeader .heroimage .TMpad-ButtonI { padding: 10px 0px 0px 0px !important;} #HERO-PageHeader .heroimage .tagNEW { position:relative !important; font-family: Calibri, 'Trebuchet MS', Helvetica, sans-serif !important; font-size: 19px !important; line-height: 21px !important; text-transform:uppercase; letter-spacing: -0.05em !important; text-align: center; color: #000; text-decoration: none; padding: 0px 4px 0px 4px !important; margin:0px !important; width:50px !important; background:#FFF200 !important; background: rgba(255,242,0,1) !important; text-shadow:none !important;} /* Text Module Typography */ #HERO-PageHeader .heroimage .TextModule li.white { color: #FFF !important; } #HERO-PageHeader .heroimage .TextModule li.black { color: #000 !important; } #HERO-PageHeader .heroimage .TextModule strong { font-weight:bolder!important; } #HERO-PageHeader .heroimage .HD-70 { font-family: 'Segoe UI', Arial, Sans-Serif!important; font-size: 70px !important; line-height: 58px !important; text-transform:uppercase; letter-spacing: -0.05em !important;} #HERO-PageHeader .heroimage .HD-68 { font-family: 'Segoe UI', Arial, Sans-Serif!important; font-size: 68px !important; line-height: 54px !important; text-transform:uppercase; letter-spacing: -0.05em !important;} #HERO-PageHeader .heroimage .HD-64 { font-family: 'Segoe UI', Arial, Sans-Serif!important; font-size: 64px !important; line-height: 52px !important; text-transform:uppercase; letter-spacing: -0.05em !important;} #HERO-PageHeader .heroimage .HD-58 { font-family: 'Segoe UI', Arial, Sans-Serif!important; font-size: 58px !important; line-height: 52px !important; text-transform:uppercase; letter-spacing: -0.05em !important;} #HERO-PageHeader .heroimage .HD-50 { font-family: 'Segoe UI', Arial, Sans-Serif!important; font-size: 50px !important; line-height: 40px !important; text-transform:uppercase; letter-spacing: -0.05em !important;} #HERO-PageHeader .heroimage .HD-46 { font-family: 'Segoe UI', Arial, Sans-Serif!important; font-size: 46px !important; line-height: 38px !important; text-transform:uppercase; letter-spacing: -0.05em !important;} #HERO-PageHeader .heroimage .HD-42 { font-family: 'Segoe UI', Arial, Sans-Serif!important; font-size: 42px !important; line-height: 38px !important; text-transform:uppercase; letter-spacing: -0.05em !important;} #HERO-PageHeader .heroimage .HD-36 { font-family: 'Segoe UI', Arial, Sans-Serif!important; font-size: 36px !important; line-height: 36px !important; text-transform:uppercase; letter-spacing: -0.05em !important;} #HERO-PageHeader .heroimage .HD-32 { font-family: 'Segoe UI', Arial, Sans-Serif!important; font-size: 32px !important; line-height: 32px !important; text-transform:uppercase; letter-spacing: -0.05em !important;} #HERO-PageHeader .heroimage .HD-26 { font-family: 'Segoe UI', Arial, Sans-Serif!important; font-size: 26px !important; line-height: 26px !important; text-transform:uppercase; letter-spacing: -0.05em !important;} #HERO-PageHeader .heroimage .HD-21 { font-family: 'Segoe UI', Arial, Sans-Serif!important; font-size: 21px !important; line-height: 21px !important; text-transform:uppercase; letter-spacing: -0.05em !important;} #HERO-PageHeader .heroimage .heroimage .Intro-35 { font-family: 'Segoe UI', Arial, Sans-Serif!important; font-weight:normal !important; font-size: 35px !important; line-height: 30px !important; letter-spacing: -0.08em !important;} #HERO-PageHeader .heroimage .Intro-30 { font-family: 'Segoe UI', Arial, Sans-Serif!important; font-weight:normal !important; font-size: 30px !important; line-height: 24px !important; letter-spacing: -0.08em !important;} #HERO-PageHeader .heroimage .Intro-24 { font-family: 'Segoe UI', Arial, Sans-Serif!important; font-weight:normal !important; font-size: 24px !important; line-height: 26px !important; letter-spacing: -0.08em !important;} #HERO-PageHeader .heroimage .Intro-21 { font-family: 'Segoe UI', Arial, Sans-Serif!important; font-weight:normal !important; font-size: 21px !important; line-height: 21px !important; letter-spacing: -0.08em !important;} #HERO-PageHeader .heroimage .Intro-19 { font-family: 'Segoe UI', Arial, Sans-Serif!important; font-weight:normal !important; font-size: 19px !important; line-height: 20px !important; letter-spacing: -0.08em !important;} #HERO-PageHeader .heroimage a { color:#FFF !important; } #HERO-PageHeader .heroimage a:hover { color:#FFF !important; text-decoration:none !important; } /* HEROS: Hero Welcome Text Page Header ---------------------------------------------------------------------------------------------------------- */ /* Structure */ #HERO-PageHeader5555555555555555555555 { float:left; width:942px; margin-top:0px; margin-bottom:20px!important; margin-left:-15px; padding-top:0px; padding-bottom:0px; padding-left:20px; padding-right:20px;} #HERO-PageHeader .colLeft { float: left; margin-right: 16px !important; padding-top: 0px !important; padding-right: 15px !important; border-right-width: 3px; border-right-style: solid; border-right-color: #E2E2E2;} #HERO-PageHeader .colRight { float: left; width:100%; min-width: 346px !important; max-width: 506px !important; max-height: 180px; margin: 0 !important; padding-top: 0px !important;} #HERO-PageHeader .colLeft.W275 { width: 275px !important; max-width: 275px !important;} #HERO-PageHeader .colLeft.W300 { width: 300px !important; max-width: 300px !important;} #HERO-PageHeader .colLeft.W350 { width: 350px !important; max-width: 350px !important;} #HERO-PageHeader .colLeft.W400 { width: 400px !important; max-width: 400px !important;} #HERO-PageHeader .colLeft.H110 { min-height: 110px!important; max-height: 110px!important;} #HERO-PageHeader .colLeft.H125 { min-height: 125px!important; max-height: 125px!important;} #HERO-PageHeader .colLeft.H150 { min-height: 150px!important; max-height: 150px!important;} /* Typography */ #HERO-PageHeader h1 { float: left; display: inline; /*font-family:Georgia, Paltino, Times,serif !important; font-weight:normal !important;*/ font-size:38px !important; font-weight: normal; line-height:38px !important; letter-spacing:-0.07em !important; color:#333;/* #292929 */ margin:0px!important; padding:0px !important;} #HERO-PageHeader .red { color:#C00 !important;} #HERO-PageHeader .yellow { color:#F6A71E !important;} #HERO-PageHeader .orange { color:#C94A00 !important;} #HERO-PageHeader .green { color:#557B7F !important;} #HERO-PageHeader .purple { color:#BF93B0 !important;} #HERO-PageHeader .brown { color:#B08358 !important;} #HERO-PageHeader strong { font-weight:bold !important;} #HERO-PageHeader p.Intro { display:block; float:left; *position: relative; width:100%; font-family: 'Segoe UI', Arial, Sans-Serif!important; /*font-family: Georgia, "Times New Roman", Times, serif !important;*/ font-size:22px !important; font-weight:normal !important; color:#333 !important;/* #333 */ line-height:1.3em !important; text-shadow: none !important; /*font-family:"Helvetica Neue",Arial,sans-serif !important; font-size:19px;*/ margin:0px !important; padding-top:5px !important; padding-bottom:5px !important;} #HERO-PageHeader ul { display: inline; float: right; margin: 0; } #HERO-PageHeader ul li { display: inline;} #HERO-PageHeader ul li.subtitle { line-height:1.0em; height:20px; *height:20px; height:20px !important; color: #999; float: left !important; font-size:18px; padding-top:14px !important; padding-bottom: 0px !important; padding-left: 10px !important; padding-right: 3px !important; margin: 0 !important; text-decoration: none; font-weight: bold;} #HERO-PageHeader ul li a { color: #0080C9; float: left !important; font-size:11px; font-weight:bold; margin-top: 14px; margin-left: 15px; margin-right: 5px; padding: 0; text-decoration: none;} #HERO-PageHeader ul li a:hover { color: #0080C9; text-decoration: underline;} #HERO-PageHeader ul li a.pdf { padding-left:20px; background-image: url(../images/_icons/_tabs/doc_pdf.png); background-repeat: no-repeat; background-position: left center;} #HERO-PageHeader ul li a.print { padding-left:20px; background-image: url(../images/icons/_tabs/printer.png); background-repeat: no-repeat; background-position: left center;} #HERO-PageHeader ul li a.video { padding-left:20px; background-image: url(../images/icons/_tabs/film.png); background-repeat: no-repeat; background-position: left center;} #HERO-PageHeader ul li a.download { padding-left:20px; font-weight:normal!important; background-image: url(../images/_icons/_tabs/download.png); background-repeat: no-repeat; background-position: left center;} #HERO-PageHeader ul li a.minutes { padding-left:20px; background-image: url(../images/_icons/_tabs/time.png); background-repeat: no-repeat; background-position: 0px 1px;} #HERO-PageHeader ul li a.policies { padding-left:20px; background-image: url(../images/_icons/_tabs/folder_table.png); background-repeat: no-repeat; background-position: 0px 1px;} /* Hero Image Caption Overlay Widths - delete - replaced with above OR keep using like on transfer and financial aid homes */ #HERO-PageHeader .heroimage span.captionW200 {width:200px;} #HERO-PageHeader .heroimage span.captionW225 {width:225px;} #HERO-PageHeader .heroimage span.captionW250 {width:250px;} #HERO-PageHeader .heroimage span.captionW275 {width:275px;} #HERO-PageHeader .heroimage span.captionW300 {width:300px;} #HERO-PageHeader .heroimage span.captionW325 {width:325px;} #HERO-PageHeader .heroimage span.captionW350 {width:350px;} #HERO-PageHeader .heroimage span.captionW375 {width:375px;} #HERO-PageHeader .heroimage span.captionW400 {width:400px;} #HERO-PageHeader .heroimage span.captionW450 {width:450px;} #HERO-PageHeader .heroimage span.captionW475 {width:475px;} #HERO-PageHeader .heroimage h3.title { border-left:20px solid #ff440a; color: #FFFFFF; display: block; font-family: "Stag-Web-SemiBold", serif; font-size: 26px; letter-spacing: 2px; line-height: 30px; text-shadow: 0.05em 0.05em #615B5B; text-transform: uppercase; padding-left:30px; margin-bottom:30px;} #HERO-PageHeader .heroimage span strong { font-family: Georgia; color:#fff; font-size:13px; text-transform: uppercase; margin-right:3px;} #HERO-PageHeader .heroimage span { color:#AAA; font-family:arial, sans-serif; font-size:12px; text-shadow: #000 -1px -1px 0; line-height:1.5em; text-align:left; padding:10px; margin-bottom:0; display:block; position:absolute; background:#000 !important; background: rgba(0,0,0,.8) !important; zoom:1; left:0; bottom:20px;} /* Hero Image Caption Overlay Widths - delete above - replaced with above OR keep using like on transfer and financial aid homes */ /* ########################################################################################################################################### ########################################################################################################################################### 00: STANDARD HERO IMAGE FRAME ########################################################################################################################################### ########################################################################################################################################### */ /* Layout */ .FRAMEHEROLITE#OneCol { display:block; float:left; *position: relative; min-width:450px; width:100%; margin-top:0px!important; margin-bottom:10px!important; *margin-bottom:15px!important; padding:0px!important;} /* HEROS: Standard Hero Image Page Header ---------------------------------------------------------------------------------------------------------- */ .FRAMEHEROLITE#OneCol .heroimg { float:left; position: relative; background-color:#fff; clear:both; /* height:100%;*/ width:952px; margin:0px; padding:0px; border: 0 !important;} /* Hero Image Positioning */ .FRAMEHEROLITE#OneCol .heroimg.top { float:left; border: none; margin-top: 0px!important; margin-bottom:10px!important;} .FRAMEHEROLITE#OneCol .heroimg.middle { float:left; border: none; margin-top: 15px!important; margin-bottom: 15px!important;} .FRAMEHEROLITE#OneCol .heroimg.bottom { float:left; border: none; margin-top: 15px!important; margin-bottom: 0px!important;} .FRAMEHEROLITE#OneCol .heroimg.solo { float:left; border: none; margin: 0px!important; padding: 0px!important;} /* Hero Image Hero Content Overlay Type */ .herocontent.vFloat { margin: 0; padding:15px; display: block;} .herocontent.vFlush { margin: 0; padding:0px; display: block;} .herocontent.vFull { margin: 0; padding:0px; display: block;} /* Hero Image Hero Content Widths - move to elements.css */ .herocontent .wide-250 { width:250px !important; max-width:250px !important; overflow:hidden !important; } .herocontent .wide-260 { width:260px !important; max-width:260px !important; overflow:hidden !important; } .herocontent .wide-270 { width:270px !important; max-width:270px !important; overflow:hidden !important; } .herocontent .wide-280 { width:280px !important; max-width:280px !important; overflow:hidden !important; } .herocontent .wide-290 { width:290px !important; max-width:290px !important; overflow:hidden !important; } .herocontent .wide-300 { width:300px !important; max-width:300px !important; overflow:hidden !important; } .herocontent .wide-310 { width:310px !important; max-width:310px !important; overflow:hidden !important; } .herocontent .wide-315 { width:315px !important; max-width:315px !important; overflow:hidden !important; } .herocontent .wide-320 { width:320px !important; max-width:320px !important; overflow:hidden !important; } .herocontent .wide-330 { width:330px !important; max-width:330px !important; overflow:hidden !important; } .herocontent .wide-340 { width:340px !important; max-width:340px !important; overflow:hidden !important; } .herocontent .wide-350 { width:350px !important; max-width:350px !important; overflow:hidden !important; } .herocontent .wide-370 { width:370px !important; max-width:370px !important; overflow:hidden !important; } .herocontent .wide-380 { width:380px !important; max-width:380px !important; overflow:hidden !important; } .herocontent .wide-385 { width:385px !important; max-width:385px !important; overflow:hidden !important; } .herocontent .wide-390 { width:390px !important; max-width:390px !important; overflow:hidden !important; } .herocontent .wide-395 { width:395px !important; max-width:395px !important; overflow:hidden !important; } .herocontent .wide-400 { width:400px !important; max-width:400px !important; overflow:hidden !important; } .herocontent .wide-410 { width:410px !important; max-width:410px !important; overflow:hidden !important; } /* Hero Content Floats - remove??? */ .herocontent .goleft { float:left !important;} .herocontent .goright { float:right !important;} /* Hero Content Background Colors */ .herocontent .bg-Black60 { background:#000 !important; background: rgba(0,0,0,.6) !important;} .herocontent .bg-Black70 { background:#000 !important; background: rgba(0,0,0,.7) !important;} .herocontent .bg-Black80 { background:#000 !important; background: rgba(0,0,0,.8) !important;} .herocontent .bg-Black90 { background:#000 !important; background: rgba(0,0,0,.9) !important;} .herocontent .bg-Black100 { background:#000 !important; background: rgba(0,0,0,1) !important;} .herocontent .bg-White50 { background:#FFF !important; background: rgba(255,255,255,.5) !important;} .herocontent .bg-White60 { background:#FFF !important; background: rgba(255,255,255,.6) !important;} .herocontent .bg-White70 { background:#FFF !important; background: rgba(255,255,255,.7) !important;} .herocontent .bg-White80 { background:#FFF !important; background: rgba(255,255,255,.8) !important;} .herocontent .bg-White90 { background:#FFF !important; background: rgba(255,255,255,.9) !important;} .herocontent .bg-White100 { background:#FFF !important; background: rgba(255,255,255,1) !important;} .herocontent .bg-Yellow90 { background:#FFF200 !important; background: rgba(255,242,0,.9) !important;} .herocontent .bg-Yellow100 { background:#FFF200 !important; background: rgba(255,242,0,1) !important; } .herocontent .bg-Blue90 { background:#FFF200 !important; background: rgba(31,179,221,.9) !important;} .herocontent .bg-Blue100 { background:#FFF200 !important; background: rgba(31,179,221,1) !important; } /* Hero Content Typography */ .herocontent h4.title { clear:both; display:inline-block; margin:0; padding:10px 40px 10px 30px;} .herocontent h4.title { font-size: 33px!important; line-height:1.0em!important; } .herocontent p { font-family:Georgia, Paltino, Times,serif!important; } .herocontent p { font-size: 17px!important; line-height:1.4em!important; margin:0; padding:15px 25px!important; } .herocontent p+p { padding:0 30px; } .herocontent .light { color: #FFF !important; } .herocontent .dark { color: #333 !important; } .herocontent strong { font-weight:bolder!important; } p .button_link{bottom:1px;font-size:10px;letter-spacing:0.5px;line-height:10px;margin:0;padding:5px 7px;position:absolute;right:1px;} p .button_link:before{content:"+";font-size:10px;} p .button_link span{display:none;} /* scroll navigation bullet idea .FRAMEHEROLITE#OneCol ul { position:absolute; top:10px; left:20px; list-style:none; margin:0; padding:0; } .FRAMEHEROLITE#OneCol ul li { margin:0 0 18px; } .FRAMEHEROLITE#OneCol ul li img { border:1px solid #6b6b6b; } .FRAMEHEROLITE#OneCol ul li a { display:block; text-indent:-999em; height:10px; width:10px; background:transparent; color:#546875; border:1px solid #000; overflow:hidden; opacity:.5; filter: alpha(opacity = 50); } .FRAMEHEROLITE#OneCol ul li.here a, .FRAMEHEROLITE#OneCol ul li:hover a, .FRAMEHEROLITE#OneCol ul li:focus a { background:#8a282d; opacity:1; filter: alpha(opacity = 100); } */ /* ########################################################################################################################################### ########################################################################################################################################### 01: HELLO FRAMES ########################################################################################################################################### ########################################################################################################################################### */ /* HELLO FRAMES = Global Typography ---------------------------------------------------------------------------------------------------------- */ .FRAMEHELLO h1.Hello { /* font-family:"Helvetica Neue",Arial,sans-serif !important; font-family:'CrimsonTextRoman',Georgia,serif !important; font-family:Georgia, Paltino, Times,serif !important; */ font-family: 'Segoe UI', Arial, Sans-Serif !important; text-shadow: none !important; font-size:40px; font-weight:normal !important; color:#333; line-height:40px; /* text-transform:uppercase; */ margin-top:-10px !important; margin-bottom:0px !important; padding-top:0px !important; padding-bottom:3px !important; letter-spacing: -0.05em !important;} .FRAMEHELLO h1.Hello strong { font-weight:bold!important;} .FRAMEHELLO h1.Hello span.size35 { font-size:35px !important;line-height:0.9em !important;} .FRAMEHELLO h1.Hello span.size38 { font-size:38px !important;line-height:0.9em !important;} .FRAMEHELLO h1.Hello span.size42 { font-size:42px !important;line-height:0.9em !important;} .FRAMEHELLO h1.Hello span.size45 { font-size:45px !important;line-height:0.9em !important;} .FRAMEHELLO h1.Hello span.size48 { font-size:48px !important;line-height:0.9em !important;} .FRAMEHELLO h1.Hello span.size52 { font-size:52px !important;line-height:0.9em !important;} .FRAMEHELLO h1.Hello span.size55 { font-size:55px !important;line-height:0.9em !important;} .FRAMEHELLO h1.Hello span.size58 { font-size:58px !important;line-height:0.9em !important;} .FRAMEHELLO h1.Hello span.size64 { font-size:64px !important;line-height:0.9em !important;} .FRAMEHELLO h1.Hello span.size38Caps { font-size:38px !important;line-height:0.9em !important;text-transform: uppercase !important;} .FRAMEHELLO h1.Hello span.size48Caps { font-size:48px !important;line-height:0.9em !important;text-transform: uppercase !important;} .FRAMEHELLO h1.Hello span.size55Caps { font-size:55px !important;line-height:0.9em !important;text-transform: uppercase !important;} .FRAMEHELLO h1.Hello span.size58Caps { font-size:58px !important;line-height:0.9em !important;text-transform: uppercase !important;} .FRAMEHELLO h1.Hello span.size64Caps { font-size:64px !important;line-height:0.9em !important;text-transform: uppercase !important;} .FRAMEHELLO p.Welcome { /* font-family:Calibri,'Trebuchet MS',Helvetica,sans-serif !important; font-family: 'Segoe UI', Arial, Sans-Serif;*/ font-family:Georgia, Paltino, Times,serif; /* font-family: 'Segoe UI', Arial, Sans-Serif!important;*/ text-shadow: none !important; font-size:21px; font-weight:normal; color:#333 !important; line-height:27px !important; margin:0px !important; padding-bottom:1px !important; overflow:hidden !important;} .FRAMEHELLO p.Welcome.size18 { font-size:18px !important;line-height:1.5em !important;} .FRAMEHELLO p.Welcome.size19 { font-size:19px !important;line-height:1.5em !important;} .FRAMEHELLO p.Welcome.size20 { font-size:20px !important;line-height:1.4em !important;} .FRAMEHELLO p.Welcome.size21 { font-size:21px !important;line-height:1.3em !important;} .FRAMEHELLO p.Welcome.size22 { font-size:22px !important;line-height:1.4em !important;} .FRAMEHELLO p.Welcome.size25 { font-size:25px !important;line-height:1.4em !important;} .FRAMEHELLO p.Welcome a { font-weight:normal !important; color:#0080D9 !important; text-decoration:underline;} .FRAMEHELLO p.Welcome a:hover { color:#00587A !important; text-decoration:underline;} /* HELLO FRAMES = One Col Lite (Text Based) ---------------------------------------------------------------------------------------------------------- */ .FRAMEHELLO#OneCol-Lite { float:left; width:952px; margin-top:5px!important; margin-bottom:15px!important; *margin-bottom:10px!important; margin-left:auto; margin-right:auto; padding-top:0px; padding-bottom:0px; *padding-bottom:5px!important; padding-left:0px; padding-right:0px;} .FRAMEHELLO#OneCol-Full { float:left; width:982px; margin-top:35px!important; margin-bottom:30px!important; *margin-bottom:25px!important; margin-left:auto; margin-right:auto; padding-top:5px; padding-bottom:5px; *padding-bottom:5px!important; padding-left:0px; padding-right:0px;} /* HELLO FRAMES = Two Col Lite (Text Based) ---------------------------------------------------------------------------------------------------------- */ .FRAMEHELLO#TwoCol-Lite { float:left; width:942px; margin-top:0px; margin-bottom:20px!important; *margin-bottom:5px!important; margin-left:-15px; padding-top:0px; padding-bottom:0px; padding-left:20px; padding-right:20px;} .FRAMEHELLO.topframe#TwoCol-Lite { margin-top:5px!important;} .FRAMEHELLO.lastframe#TwoCol-Lite { margin-bottom:5px!important;} .FRAMEHELLO#TwoCol-Lite .colLeft { float: left; width: 366px !important; max-width: 366px !important; margin-right: 15px !important; padding-top: 0px !important; padding-right: 15px !important; border-right-width: 1px; border-right-style: solid; border-right-color: #E2E2E2;} .FRAMEHELLO#TwoCol-Lite .colLeft.high-100 {min-height: 100px!important;max-height: 100px!important;} .FRAMEHELLO#TwoCol-Lite .colLeft.high-115 {min-height: 115px!important;max-height: 115px!important;} .FRAMEHELLO#TwoCol-Lite .colLeft.high-125 {min-height: 125px!important;max-height: 125px!important;} .FRAMEHELLO#TwoCol-Lite .colLeft.high-135 {min-height: 135px!important;max-height: 135px!important;} .FRAMEHELLO#TwoCol-Lite .colLeft.high-150 {min-height: 150px!important;max-height: 150px!important;} .FRAMEHELLO#TwoCol-Lite .colLeft.high-160 {min-height: 160px!important;max-height: 160px!important;} .FRAMEHELLO#TwoCol-Lite .colRight { float: left; width: 545px !important; max-width: 545px !important; max-height: 180px; margin: 0 !important; padding-top: 0px !important;} /* HELLO FRAMES = Two Col Buckets ---------------------------------------------------------------------------------------------------------- */ .FRAMEHELLO#TwoCol-Buckets { float:left; width:942px; margin-top:0px; margin-bottom:20px!important; margin-left:-15px; padding-top:0px; padding-bottom:0px; padding-left:20px; padding-right:20px;} .FRAMEHELLO.topframe#TwoCol-Buckets { margin-top:5px!important;} .FRAMEHELLO.lastframe#TwoCol-Buckets { margin-bottom:5px!important;} .FRAMEHELLO#TwoCol-Buckets .colLeft { float: left; width: 350px !important; max-width: 350px !important; margin-right: 16px !important; padding-top: 0px !important; padding-right: 15px !important; border-right-width: 3px; border-right-style: solid; border-right-color: #E2E2E2;} .FRAMEHELLO#TwoCol-Buckets .colLeft.high-100 {min-height: 100px!important;max-height: 100px!important;} .FRAMEHELLO#TwoCol-Buckets .colLeft.high-115 {min-height: 115px!important;max-height: 115px!important;} .FRAMEHELLO#TwoCol-Buckets .colLeft.high-125 {min-height: 125px!important;max-height: 125px!important;} .FRAMEHELLO#TwoCol-Buckets .colLeft.high-150 {min-height: 150px!important;max-height: 150px!important;} .FRAMEHELLO#TwoCol-Buckets .colLeft.high-160 {min-height: 160px!important;max-height: 160px!important;} .FRAMEHELLO#TwoCol-Buckets .colRight { float: left; width: 558px !important; max-width: 558px !important; max-height: 180px; margin: 0 !important; padding-top: 0px !important;} /* ########################################################################################################################################### ########################################################################################################################################### 02: BODY FRAMES ########################################################################################################################################### ########################################################################################################################################### */ /* BODY FRAMES = Structure ---------------------------------------------------------------------------------------------------------- */ .FRAMEBODY { float:left; margin: 0px !important; padding:15px 0 15px 0 !important;} .FRAMEBODY h1.FrameTitle { font-size:52px !important;line-height:1.0em !important;} .FRAMEBODY h3.FrameSubTitle { font-size:28px !important;line-height:1.1em !important;} .FRAMEBODY p.Welcome { /* font-family:Calibri,'Trebuchet MS',Helvetica,sans-serif !important; font-family: 'Segoe UI', Arial, Sans-Serif;*/ font-family:Georgia, Paltino, Times,serif; /* font-family: 'Segoe UI', Arial, Sans-Serif!important;*/ text-shadow: none !important; font-size:20px; font-weight:normal; color:#333 !important; line-height:27px !important; margin:0px !important; padding-bottom:1px !important; overflow:hidden !important;} /* REPLACE WITH ABOVE!!! STANDARD WELCOME FRAMES = Welcome Blocks (Welcome Lead and Featured Blocks 1 or 2 Column) ---------------------------------------------------------------------------------------------------------- */ #WELCOME_2Col { float: left; width: 952px!important; _width: 952px; max-height: 150px; margin-top: 5px!important; padding: 0px !important;} #WELCOME_2Col .colLeft { float: left; width: 518px !important; max-width: 518px !important; min-height: 150px; margin-right: 16px !important; padding-top: 0px !important; padding-right: 15px !important; border-right-width: 3px; border-right-style: solid; border-right-color: #E2E2E2;} #WELCOME_2Col .colRight { float: left; width: 400px !important; max-width: 400px !important; min-height: 150px; margin: 0 !important; padding-top: 0px !important;} /* WELCOME MODULE */ #WELCOME_2Col .modWelcome { padding:5px;} #WELCOME_2Col .modWelcome.img { background:#FFF; margin:0px !important; padding:0px !important;} #WELCOME_2Col .modWelcome p.Lead { /* font-family:"Helvetica Neue",Arial,sans-serif !important; font-family:'CrimsonTextRoman',Georgia,serif !important;*/ font-family: 'Segoe UI', Arial, Sans-Serif!important; text-shadow: none !important; font-size:30px !important; font-weight:bold !important; color:#333 !important; line-height:1.2em !important; margin-top:-10px !important; margin-bottom:0px !important; padding-top:0px !important; padding-bottom:3px !important; letter-spacing: -0.03em;} #WELCOME_2Col .modWelcome p.Start { font-family: 'Segoe UI', Arial, Sans-Serif; /* font-family:Calibri,'Trebuchet MS',Helvetica,sans-serif !important;*/ text-shadow: none !important; font-size:18px; font-weight:normal; color:#333 !important; line-height:1.3em !important; margin:0px !important; padding:0px !important; max-height:115px; overflow:hidden;} #WELCOME_2Col .modWelcome p.Welcome { font-family:"Helvetica Neue",Arial,sans-serif !important; /* font-family:Calibri,'Trebuchet MS',Helvetica,sans-serif !important;*/ text-shadow: none !important; font-size:18px; font-weight:normal; color:#333 !important; line-height:1.3em !important; margin:0px !important; padding:0px !important;} /* FEATURED MODULES */ #WELCOME_2Col .modFeatured {width:400px; height:150px; margin:0; padding:0;} /*400px */ #WELCOME_2Col .modFeatured .mod-content { position:relative; z-index:1; margin:0; padding:0;} #WELCOME_2Col .modFeatured .mod-content ul { float:none; clear:both; list-style-type:none !important; margin:0; padding:0;} .ie #WELCOME_2Col .modFeatured .mod-content ul {zoom:1} #WELCOME_2Col .modFeatured .mod-content ul:after {display:block;float:none;clear:both;height:0;overflow:hidden;visibility:hidden;content:"."} #WELCOME_2Col .modFeatured .mod-content ul li { position:relative; float:left; height:150px; background:#242424; overflow:hidden; margin-top: 0; margin-right: 10px; margin-bottom: 0px; margin-left: 0;} #WELCOME_2Col .modFeatured .mod-content ul li:hover {background-color:#2599CF;} #WELCOME_2Col .modFeatured .mod-content ul li a {position:relative;display:block;height:100%;text-decoration:none !important;} #WELCOME_2Col .modFeatured .mod-content ul li a:hover {text-decoration:none !important; cursor:pointer} #WELCOME_2Col .modFeatured .mod-content ul li.last-in-row {margin-right:0 !important} #WELCOME_2Col .modFeatured .mod-content ul li.promo-1 {width:195px;height:150px} #WELCOME_2Col .modFeatured .mod-content ul li.promo-2 {width:195px;height:150px} #WELCOME_2Col .modFeatured .mod-content ul li.promo-3 {width:400px;height:150px;margin-right: 0px !important;} #WELCOME_2Col .modFeatured .mod-content ul li.promo-1 a {width:195px;background:#242424;} #WELCOME_2Col .modFeatured .mod-content ul li.promo-2 a {width:195px} #WELCOME_2Col .modFeatured .mod-content ul li.promo-3 a {width:260px} #WELCOME_2Col .modFeatured .mod-content ul li.promo-1 a:hover {background-color:#2599CF;} /* OVERLAYS */ #WELCOME_2Col .modFeatured .mod-content ul li a img.lightoverlay { position:relative; display:block; z-index:0; opacity:0.90; -webkit-transition:opacity 0.1s linear;} #WELCOME_2Col .modFeatured .mod-content ul li:hover a img.lightoverlay {opacity:1} .ie8 #WELCOME_2Col .modFeatured .mod-content ul li a img.lightoverlay {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"} .ie8 #WELCOME_2Col .modFeatured .mod-content ul li:hover a img.lightoverlay {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"} #WELCOME_2Col .modFeatured .mod-content ul li a img.darkoverlay { position:relative; display:block; z-index:0; opacity:0.75; -webkit-transition:opacity 0.1s linear;} #WELCOME_2Col .modFeatured .mod-content ul li:hover a img.darkoverlay {opacity:1} .ie8 #WELCOME_2Col .modFeatured .mod-content ul li a img.darkoverlay {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"} .ie8 #WELCOME_2Col .modFeatured .mod-content ul li:hover a img.darkoverlay {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"} #WELCOME_2Col .modFeatured .mod-content ul li a img.darkeroverlay { position:relative; display:block; z-index:0; opacity:0.60; -webkit-transition:opacity 0.1s linear;} #WELCOME_2Col .modFeatured .mod-content ul li:hover a img.darkeroverlay {opacity:1} .ie8 #WELCOME_2Col .modFeatured .mod-content ul li a img.darkeroverlay {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"} .ie8 #WELCOME_2Col .modFeatured .mod-content ul li:hover a img.darkeroverlay {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"} /* GRAPHIC CORNER TAGS */ #WELCOME_2Col .modFeatured .tag.NEW {background-image:url(../_images/_frames/tag-corner-rednew.png);} #WELCOME_2Col .modFeatured .tag.topleft { position:absolute; top:0; left:0; width:33px; height:33px; background-position:0 0; background-repeat:no-repeat; } /* INFORMATION */ #WELCOME_2Col .modFeatured .mod-content ul li a span.info{ position:absolute; display:block; top:15px; right:15px; bottom:15px; left:15px; z-index:1; visibility:visible; font-weight:700; font-family:Arial, Helvetica, sans-serif} #WELCOME_2Col .modFeatured .mod-content ul li a span.info .tag{ display:block; visibility:visible; color:#979797; font-weight:700; font-size:11px; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; letter-spacing:0} #WELCOME_2Col .modFeatured .mod-content ul li.promo-1:hover a span.info .tag{color:#262324} #WELCOME_2Col .modFeatured .mod-content ul li a span.info .title { display:block !important; padding-top:4px !important; color:#FFF !important; font-size:19px !important; line-height:21px !important; letter-spacing:0 !important;} .ie7 #WELCOME_2Col .modFeatured .mod-content ul li a span.info .title{letter-spacing:-1px} #WELCOME_2Col .modFeatured .mod-content ul li a span.info span.btn{ position:absolute; display:inline-block; top:92px !important; left:0px !important; z-index:10; padding:7px !important; background-color:#2599CF; visibility:hidden; color:#FFF; font-size:13px; text-transform:uppercase; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;} #WELCOME_2Col .modFeatured .mod-content ul li.promo-1 a span.info span.btn{background-color:transparent} #WELCOME_2Col .modFeatured .mod-content ul li.promo-1 a span.info span.btn{bottom:0px;padding-left:0} #WELCOME_2Col .modFeatured .mod-content ul li:hover a span.info span.btn{visibility:visible} #WELCOME_2Col .modFeatured .mod-content ul li a span.info span.btn span{display:block} /* QUICK LINKS MODULE */ #WELCOME_2Col .modQuickLinks { padding:10px; background:#CCC;} /* ########################################################################################################################################### ########################################################################################################################################### 04: STANDARD NORTHLANDNOW INTEGRATION FRAME ########################################################################################################################################### ########################################################################################################################################### */ #NOW_3Col { float: left; width: 952px !important; _width: 952px; min-height: 240px !important; max-height: 240px !important; overflow:hidden; margin-top: 0px!important; margin-bottom: 0px!important; padding-top: 0px !important; padding-bottom: 0px !important;} #NOW_3Col .colLeft { float: left; width: 296px !important; max-width: 296px !important; max-height: 240px !important; min-height: 240px !important; overflow:hidden; margin: 0 !important; padding-top: 0px !important;} #NOW_3Col .colMiddle { float: left; width: 296px !important; max-width: 296px !important; max-height: 240px !important; min-height: 240px !important; overflow:hidden; height: auto; margin-left: 16px !important; margin-right: 16px !important; padding-top: 0px !important; padding-left: 15px !important; padding-right: 15px !important; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #E2E2E2; border-left-color: #E2E2E2;} #NOW_3Col .colRight { float: left; width: 296px !important; max-width: 296px !important; max-height: 240px !important; min-height: 240px !important; overflow:hidden; margin: 0 !important; padding-top: 0px !important;} /* MODULE TYPES */ /*#NOW_3Col .modNews p { font-family:Calibri,'Trebuchet MS',Helvetica,sans-serif !important; text-shadow: none !important; font-size:14px; font-weight:normal; color:#333 !important; line-height:1.3em !important; margin:0px !important; padding:0px !important;}*/ #NOW_3Col .modNews, #NOW_3Col .modEvents, #NOW_3Col .modAnnouncements {} #NOW_3Col .modNews .display-news, #NOW_3Col .modEvents .display-events, #NOW_3Col .modAnnouncements .display-announcements { height: 150px; max-height: 150px; margin-bottom: 9px !important; padding-top: 0px !important; overflow: hidden !important;} /* News */ #NOW_3Col .modNews { } #NOW_3Col .modNews .headline { min-height: 68px; max-height: 68px; margin-top: 2px !important; margin-bottom: 8px !important; padding-top: 0px !important; overflow: hidden; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #DDD;} #NOW_3Col .modNews .headline span.date { font-size: 12px; font-weight: normal; color: #707070; text-transform: uppercase!important; display: block; line-height: 10px; padding-bottom: 5px;} #NOW_3Col .modNews .headline span.title { font-size: 14px; font-weight: bold; letter-spacing: -0.01em!important; display: block; line-height: 1.1em;} #NOW_3Col .modNews .headline span.title a { } /* Events */ #NOW_3Col .modEvents { margin:0; } /*#NOW_3Col .modEvents .event { min-height: 55px; max-height: 55px; margin-bottom: 10px !important; padding-top: 0px !important; overflow: hidden;}*/ #NOW_3Col .modEvents ul.event { } #NOW_3Col .modEvents ul.event li { float:left; height:65px; margin-bottom:10px; padding-bottom:3px; line-height:1.3em; clear:both; list-style-type:none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #DDD;} #NOW_3Col .modEvents ul.event li a, #NOW_3Col .modEvents ul.event li a:hover span.title { font-family:Arial, Helvetica, sans-serif!important; text-decoration: none;} #NOW_3Col .modEvents ul.event li span.date { float:left; width:55px; height:60px; padding:0px; background-color: #A0A0A0; margin-top: 0; margin-right: 11px; margin-bottom: 0px; margin-left: 0;} #NOW_3Col .modEvents ul.event li span.number { display:block; position:relative; top:24px; left:24px; padding-bottom:2px; font-size:23px; letter-spacing: -0.08em; color:#FFF; font-weight:bold;} #NOW_3Col .modEvents ul.event li span.month { display:block; position:relative; top:24px; left:24px; color:#FFF; text-transform:uppercase; font-size:12px; letter-spacing: -0.08em; font-weight:bold;} #NOW_3Col .modEvents ul.event li a span.title { float:left; display:block; width:225px; max-width:225px; text-decoration: none; padding-top:6px; font-size: 14px; font-weight: bold; letter-spacing: -0.01em!important; line-height: 1.1em;} #NOW_3Col .modEvents ul.event li a:hover span.title {text-decoration: underline; } #NOW_3Col .modEvents ul.event li a span.time { float:left; display:block; width:200px; max-width:200px; text-decoration: none; padding-top:3px; font-size: 12px; font-weight: normal; color: #707070; text-transform: uppercase!important; line-height: 1.0em;} #NOW_3Col .modEvents ul.event li a:hover span.time {text-decoration: none;color:#999; } /* Announcements */ #NOW_3Col .modAnnouncements {} #NOW_3Col .modAnnouncements .headline { min-height: 68px; max-height: 68px; margin-top: 2px !important; margin-bottom: 8px !important; padding-top: 0px !important; overflow: hidden; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #DDD;} #NOW_3Col .modAnnouncements .headline span.date { font-size: 12px; font-weight: normal; color: #707070; text-transform: uppercase!important; display: block; line-height: 1.0em; padding-bottom: 5px;} #NOW_3Col .modAnnouncements .headline span.title { font-size: 14px; font-weight: bold; letter-spacing: -0.01em!important; display: block; line-height: 1.1em;} #NOW_3Col .modAnnouncements .headline span.title a { } /* NOW Tools and Social Media Links */ ul.NOWtools { list-style: none; overflow: hidden; float: left; margin: 0; padding: 0; width:296px; max-height:24px; height:24px;} ul.NOWtools li.more, ul.NOWtools li.add { font-family: "Arial", "Helvetica", sans-serif;} ul.NOWtools li.more { float: left; font-size: 11px; line-height:24px; padding: 0px; margin-right: 5px;} ul.NOWtools li.add { float: right; font-size: 10px; padding-top: 3px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;} ul.NOWtools li.add a { color: #999 !important;font-weight: normal !important;text-decoration: none;} ul.NOWtools li.add a:hover {text-decoration: underline;} ul.NOWtools li.facebook, ul.NOWtools li.twitter, ul.NOWtools li.linkedin, ul.NOWtools li.rss, ul.NOWtools li.youtube, ul.NOWtools li.flickr, ul.NOWtools li.blog, ul.NOWtools li.googleplus { display: block; float: left; opacity: 0.85; filter: alpha(opacity=85); width: 24px; height: 24px; line-height: 24px; background-repeat: no-repeat; margin-left: 8px; margin-top: 0px;} ul.NOWtools li.facebook:hover,ul.NOWtools li.facebook:focus,ul.NOWtools li.facebook:active, ul.NOWtools li.twitter:hover,ul.NOWtools li.twitter:focus,ul.NOWtools li.twitter:active, ul.NOWtools li.linkedin:hover,ul.NOWtools li.linkedin:focus,ul.NOWtools li.linkedin:active, ul.NOWtools li.rss:hover,ul.NOWtools li.rss:focus,ul.NOWtools li.rss:active, ul.NOWtools li.youtube:hover,ul.NOWtools li.youtube:focus,ul.NOWtools li.youtube:active, ul.NOWtools li.flickr:hover,ul.NOWtools li.flickr:focus,ul.NOWtools li.flickr:active, ul.NOWtools li.blog:hover,ul.NOWtools li.blog:focus,ul.NOWtools li.blog:active, ul.NOWtools li.googleplus:hover,ul.NOWtools li.googleplus:focus,ul.NOWtools li.googleplus:active { opacity: 1.0; filter: alpha(opacity=100);} ul.NOWtools li.facebook {background: transparent url(../images/icons/_sectionNOW/sprite-social.png) 0px 0px no-repeat; } ul.NOWtools li.twitter {background: transparent url(../images/icons/_sectionNOW/sprite-social.png) 0px -24px no-repeat; } ul.NOWtools li.linkedin {background: transparent url(../images/icons/_sectionNOW/sprite-social.png) 0px -48px no-repeat; } ul.NOWtools li.rss {background: transparent url(../images/icons/_sectionNOW/sprite-social.png) 0px -72px no-repeat; } ul.NOWtools li.youtube {background: transparent url(../images/icons/_sectionNOW/sprite-social.png) 0px -96px no-repeat; } ul.NOWtools li.flickr {background: transparent url(../images/icons/_sectionNOW/sprite-social.png) 0px -120px no-repeat; } ul.NOWtools li.blog {background: transparent url(../images/icons/_sectionNOW/sprite-social.png) 0px -144px no-repeat; } ul.NOWtools li.googleplus {background: transparent url(../images/icons/_sectionNOW/sprite-social.png) 0px -168px no-repeat; } ul.NOWtools li.facebook a, ul.NOWtools li.twitter a, ul.NOWtools li.linkedin a, ul.NOWtools li.rss a, ul.NOWtools li.youtube a, ul.NOWtools li.flickr a, ul.NOWtools li.blog a, ul.NOWtools li.googleplus a { display: block; width: 24px; height: 24px; line-height: 24px; overflow: hidden; text-indent: -9999px;} /* ########################################################################################################################################### ########################################################################################################################################### 05: FEATURED BUCKETS ########################################################################################################################################### ########################################################################################################################################### */ /* FEATURED BUCKETS = Container Structure ---------------------------------------------------------------------------------------------------------- */ .FRAMEBODY#BUCKETS { float:left; width:952px !important; margin:0px 0px 15px 0px!important; padding:0px!important; } .FRAMEBODY#BUCKETS .row { float:left; width:952px !important; padding-bottom:10px; } .FRAMEBODY#BUCKETS .row.top, .FRAMEBODY#BUCKETS .row.middle { float:left; margin-bottom: 25px !important; *margin-bottom:0px !important; /* IE */ } .FRAMEBODY#BUCKETS .row.bottom { float:left; margin-bottom: 0px !important; *margin-bottom:0px !important; /* IE */ } .FRAMEBODY.lastframe#BUCKETS { margin-bottom: 5px !important;} /* FEATURED BUCKETS = Bucket Grid Types ---------------------------------------------------------------------------------------------------------- */ .FRAMEBODY#BUCKETS .BucketGrid-2.bucket { float:left; margin-right:20px; padding:0px; width:466px!important;} .FRAMEBODY#BUCKETS .BucketGrid-2.bucket.last { margin:0!important;} .FRAMEBODY#BUCKETS .BucketGrid-2.bucket img { width:466px!important; height:180px!important;} .FRAMEBODY#BUCKETS .BucketGrid-2.bucket img.promo { width:466px!important; height:250px!important;} .FRAMEBODY#BUCKETS .BucketGrid-3.bucket { float:left; margin-right:30px; padding:0px; width:292px;} .FRAMEBODY#BUCKETS .BucketGrid-3.bucket.last { margin:0!important;} .FRAMEBODY#BUCKETS .BucketGrid-3.bucket img { width:292px!important; height:140px!important;} .FRAMEBODY#BUCKETS .BucketGrid-3.bucket img.promo { width:304px!important; height:300px!important;} .FRAMEBODY#BUCKETS .BucketGrid-4.bucket { float:left; margin-right:20px; padding:0px; width:223px;} .FRAMEBODY#BUCKETS .BucketGrid-4.bucket.last { margin:0!important;} .FRAMEBODY#BUCKETS .BucketGrid-4.bucket img { width:223px!important; height:140px!important;} /* FEATURED BUCKETS = Image Link (optional) ---------------------------------------------------------------------------------------------------------- */ .FRAMEBODY#BUCKETS .bucket img { margin-top: 0px; margin-bottom: 15px; padding: 0px; box-shadow:0 0px 8px rgba(0,0,0,0.45); -moz-box-shadow:0 0px 8px rgba(0,0,0,0.45); -webkit-box-shadow:0 0px 8px rgba(0,0,0,0.45); border:8px solid #FFF;} .FRAMEBODY#BUCKETS .bucket a img { position:relative; display:block; z-index:0; opacity:1; -webkit-transition:opacity 0.2s linear; } .FRAMEBODY#BUCKETS .bucket a img:hover, .FRAMEBODY#BUCKETS .bucket a img:focus, .FRAMEBODY#BUCKETS .bucket a img:active { opacity:0.85} .ie8 .FRAMEBODY#BUCKETS .bucket a img { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"} .ie8 .FRAMEBODY#BUCKETS .bucket a img:hover { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"} /* FEATURED BUCKETS = Typography ---------------------------------------------------------------------------------------------------------- */ .FRAMEBODY#BUCKETS .bucket h3 { font-family: 'Segoe UI', Arial, Sans-Serif !important; /* font-family: "BentonSansComp-Bold", sans-serif !important; */ font-size: 22px!important; font-weight:lighter!important; letter-spacing: -0.05em!important; color:#333!important; text-transform: capitalize; line-height:1.0em!important; margin-top:5px!important; margin-bottom:15px!important; padding: 0px!important;} .FRAMEBODY#BUCKETS .bucket h3 em { text-transform: lowercase!important;font-style: normal!important;} .FRAMEBODY#BUCKETS .bucket h3 strong { font-weight:bold!important;} .FRAMEBODY#BUCKETS .bucket h3 a { color:#333!important;} .FRAMEBODY#BUCKETS .bucket h5 { font-family:Georgia, Paltino, Times,serif !important; text-transform: capitalize; line-height:1.2em!important; margin-top:0px!important; margin-bottom:15px!important; padding: 0px!important; font-size: 16px!important; font-weight: normal!important; letter-spacing: -0.05em!important; color: #333333!important;} .FRAMEBODY#BUCKETS .bucket p { /*font-family:Georgia, Paltino, Times,serif !important; */ line-height:1.5em!important; margin-bottom:15px!important; font-size: 14px!important; color: #5B5B5B!important; padding: 0px!important; margin-top: 0px!important; margin-bottom: 20px!important; margin-right: 0px; margin-left: 0px;} /*.FRAMEBODY#BUCKETS .bucket ul { float:left; padding-top:5px!important;} .FRAMEBODY#BUCKETS .bucket ul li { font-size: 13px!important; margin-bottom:15px; padding-bottom:0px; line-height:1.1em; clear:both; list-style-type:none; border-bottom: 0px solid #DDD;} .FRAMEBODY#BUCKETS .bucket ul li a { font-weight:bold; text-decoration: none;} .FRAMEBODY#BUCKETS .bucket ul li a:hover { text-decoration:underline;} */ /* ########################################################################################################################################### ########################################################################################################################################### 06: FEATURED PROMOS ########################################################################################################################################### ########################################################################################################################################### */ /* FEATURED PROMOS = Container Structure ---------------------------------------------------------------------------------------------------------- */ .FRAME#Promos { float:left; width:952px; margin:0px 0px 10px 0px!important; padding:0px!important;} .FRAME#Promos .row { float:left; } .FRAME#Promos .row.top { margin-bottom: 8px !important; } .FRAME#Promos .row.bottom { margin-bottom: 0px !important; } .FRAME.lastframe#Promos { margin-bottom: 5px !important;} /* FEATURED PROMOS = Tiles ---------------------------------------------------------------------------------------------------------- */ .FRAME#Promos .Tile { float:left; margin-right:8px; padding:0px;} .FRAME#Promos .Tile.last { margin:0!important;} /* FEATURED PROMOS = Promo Size Types ---------------------------------------------------------------------------------------------------------- */ .FRAME#Promos .PromoTile { overflow:hidden; float:left; display:table; text-align:center; margin:0px; overflow:hidden; background-repeat: no-repeat; background-position: center;} .FRAME#Promos .PromoTile > div { display:table-cell;vertical-align:middle;width:100%;height:100%} .FRAME#Promos .row.H150 .PromoGrid-1, .FRAME#Promos .row.H150 .PromoGrid-2, .FRAME#Promos .row.H150 .PromoGrid-3, .FRAME#Promos .row.H150 .PromoGrid-4, .FRAME#Promos .row.H150 .PromoGrid-5, .FRAME#Promos .row.H150 .PromoGrid-6, .FRAME#Promos .row.H150 .PromoGrid-7, .FRAME#Promos .row.H150 .PromoGrid-8 { height:150px !important; } .FRAME#Promos .row.H250 .PromoGrid-1, .FRAME#Promos .row.H250 .PromoGrid-2, .FRAME#Promos .row.H250 .PromoGrid-3, .FRAME#Promos .row.H250 .PromoGrid-4, .FRAME#Promos .row.H250 .PromoGrid-5, .FRAME#Promos .row.H250 .PromoGrid-6, .FRAME#Promos .row.H250 .PromoGrid-7, .FRAME#Promos .row.H250 .PromoGrid-8 { height:225px !important; } .FRAME#Promos .PromoTile.PromoGrid-1 { width: 112px !important; } .FRAME#Promos .PromoTile.PromoGrid-2 { width: 232px !important; } .FRAME#Promos .PromoTile.PromoGrid-3 { width: 352px !important; } .FRAME#Promos .PromoTile.PromoGrid-4 { width: 472px !important; } .FRAME#Promos .PromoTile.PromoGrid-5 { width: 592px !important; } .FRAME#Promos .PromoTile.PromoGrid-6 { width: 712px !important; } .FRAME#Promos .PromoTile.PromoGrid-7 { width: 832px !important; } .FRAME#Promos .PromoTile.PromoGrid-8 { width: 952px !important; } /* FEATURED PROMOS = Background Hovers ---------------------------------------------------------------------------------------------------------- */ /* Typography */ .FRAME#Promos .promo-hover { height:100%; width:100%; background:transparent } .FRAME#Promos .promo-hover h5 { display:none } .FRAME#Promos .promo-hover:hover h5 { display:block; font-size:36px; font-weight:700; padding:0px 0px 8px 0px; text-align:center; letter-spacing: -0.03em !important; } .FRAME#Promos .promo-hover h6 { display:none } .FRAME#Promos .promo-hover:hover h6 { display:block; font-size:26px; font-weight:700; padding:0px 0px 8px 0px; text-align:center; letter-spacing: -0.03em !important; } .FRAME#Promos .promo-hover p { display:none; font-size:22px } .FRAME#Promos .promo-hover:hover p { color:#fff !important; display:block; font-weight:normal; padding-top:0px; line-height:24px; text-align:center } .FRAME#Promos .promo-hover span { margin:10px;display:none} .FRAME#Promos .promo-hover:hover span { display:block; text-align: center; vertical-align: middle; margin-right: auto; margin-left: auto;} /* Black BG */ .FRAME#Promos .promo-hover.transblack:hover { background:rgba(0,0,0,0.8) } .FRAME#Promos .promo-hover.solidblack:hover { background: #000; } .FRAME#Promos .promo-hover.transblack:hover h5, .FRAME#Promos .promo-hover.solidblack:hover h5 { color:#FFF;} .FRAME#Promos .promo-hover.transblack:hover p, .FRAME#Promos .promo-hover.solidblack:hover p { color:#FFF !important;} /* Blue BG */ .FRAME#Promos .promo-hover.transblue:hover { background:rgba(18,119,233,0.85) } .FRAME#Promos .promo-hover.solidblue:hover { background: #1277E9; } .FRAME#Promos .promo-hover.transblue:hover h5, .FRAME#Promos .promo-hover.solidblue:hover h5 { color:#FFF;} .FRAME#Promos .promo-hover.transblue:hover p, .FRAME#Promos .promo-hover.solidblue:hover p { color:#FFF !important;} /* Turquoise BG */ .FRAME#Promos .promo-hover.transturq:hover { background:rgba(45,174,191,0.85) } .FRAME#Promos .promo-hover.solidturq:hover { background: #2DAEBF; } .FRAME#Promos .promo-hover.transturq:hover h5, .FRAME#Promos .promo-hover.solidturq:hover h5 { color:#FFF;} .FRAME#Promos .promo-hover.transturq:hover p, .FRAME#Promos .promo-hover.solidturq:hover p { color:#FFF !important;} /* Green BG */ .FRAME#Promos .promo-hover.transgreen:hover { background:rgba(194,205,35,0.85) } .FRAME#Promos .promo-hover.solidgreen:hover { background: #B8D30B; } .FRAME#Promos .promo-hover.transgreen:hover h5, .FRAME#Promos .promo-hover.solidgreen:hover h5 { color:#FFF;} .FRAME#Promos .promo-hover.transgreen:hover p, .FRAME#Promos .promo-hover.solidgreen:hover p { color:#FFF !important;} /* ########################################################################################################################################### ########################################################################################################################################### 07: CALL TO ACTION FRAMES - maybe look into giving CTA custom grids ########################################################################################################################################### ########################################################################################################################################### */ /* CALL TO ACTION FRAMES = Lite CTAs (text | button) work in progress ---------------------------------------------------------------------------------------------------------- */ .FRAME#CTA-LiteIntro { float:left; margin-bottom:25px; padding: 15px 15px 15px 15px; width:922px; background-color: #FC6;} .FRAME#CTA-LiteOutro { float:left; margin-bottom:0px; padding: 15px 15px 15px 15px; width:922px; background-color: #FC6;} .FRAME#CTA-LiteIntro h3.title { margin:0px!important;padding:0px!important;color:#444!important;font-size:32px!important;font-weight:normal;} /* CALL TO ACTION FRAMES = Choose Your Own Adventure (CYOA) CTA ---------------------------------------------------------------------------------------------------------- */ .FRAME#CTA-CYOA { float:left; margin-left:-15px; margin-bottom:-1px; padding-top: 25px; padding-bottom: 25px; width:982px; height: 280px; /*background-image: url(../../001_Global/_images/_backgrounds/Texture0206.jpg); background-repeat: repeat; background-position: left top; */ background-color: #F4F4F4; border-top-width: 10px; border-top-style: solid; border-top-color: #E7E7E7; border-bottom-width: 10px; border-bottom-style: solid; border-bottom-color: #E7E7E7;} .FRAME#CTA-CYOA a:link, .FRAME#CTA-CYOA a:active, .FRAME#CTA-CYOA a:visited { filter:alpha(opacity=100)!important; -moz-opacity: 1.0!important; -khtml-opacity: 1.0!important; opacity: 1.0!important; } .FRAME#CTA-CYOA a:hover { filter:alpha(opacity=90)!important; -moz-opacity: 0.9!important; -khtml-opacity: 0.9!important; opacity: 0.9!important; } .FRAME#CTA-CYOA h3.title { margin:0px!important;padding-bottom:30px!important;color:#444!important;font-size:34px!important;font-weight:normal; text-align:center;} .FRAME#CTA-CYOA p { /*font-family:Georgia, Paltino, Times,serif !important; */ width: 260px; line-height:1.3em!important; font-size: 14px!important; color: #6E6E6E!important; padding: 0px!important; margin: 10px auto 0 auto; text-align: center;} /* CALL TO ACTION FRAMES = Custom Graphic CTAs ---------------------------------------------------------------------------------------------------------- */ .FRAME#CustomGraphic { width: 982px; min-height:150px; background:#F5F5F5; margin-top: 15px; margin-right: auto; margin-bottom: -15px; margin-left: -15px; padding-top: 25px; padding-right: 0px; padding-bottom: 25px; padding-left: 0px; border-top-width: 5px; border-top-style: solid; border-top-color: #E7E7E7;} .FRAME#CustomGraphic .GRID03.column {float:left;} .FRAME#CustomGraphic .GRID03.column.first {margin-left:25px;margin-right:10px;width:440px;} .FRAME#CustomGraphic .GRID03.column {margin-right:20px;width:222px;} .FRAME#CustomGraphic .GRID03.column.last {margin:0!important; padding-top:55px; padding-right:25px;width:240px;} .FRAME#CustomGraphic .GRID03.column.last a { float:right!important;} .FRAME#CustomGraphic .GRID03.column .picture { margin-top:15px;} .FRAME#CustomGraphic h1 { text-transform:uppercase; line-height:1.0em!important; margin-bottom:10px!important; padding: 0px!important; font-size: 30px!important; font-weight:lighter!important; letter-spacing: -0.06em!important;} .FRAME#CustomGraphic h1 strong { font-weight:bold!important;} .FRAME#CustomGraphic p { font-family: proxima-nova-1,proxima-nova-2,sans-serif !important; font-size: 16px !important; line-height:1.4em !important; color: #333 !important; margin-top: 5px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding: 0px!important;} /* =========================================================================================================================================== =========================================================================================================================================== 08: BACK TO TOP BUTTONS - use on single scroll pages =========================================================================================================================================== =========================================================================================================================================== */ #scroll-top { z-index:1 !important; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; width:150px; background-color: #F2EFEF; background-color: rgba(238, 238, 238, 0.8); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE'); text-align:center; padding-top: 10px; padding-right: 10px; padding-bottom: 20px; padding-left: 10px; position:fixed; bottom:-10px; left:50%; margin-left: -80px; cursor:pointer; font-size:15px !important; line-height:1.2em; font-weight:bold !important; color:#524D4D; text-decoration:none; border:1px solid #C9C9C9;} #scroll-top { -moz-transition: bottom 250ms ease-in-out; -webkit-transition: bottom 250ms ease-in-out;} /* BACK TO TOP FRAME LINK*/ .back-to-top{ float:right; padding:5px; height: 26px; width:152px;} .back-to-top.white{ background:#fff; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=75); opacity: 0.75;} .back-to-top.black{ background:#000; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); opacity: 0.70;} .back-to-top.red{ background:#C00; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); opacity: 0.70;} .back-to-top h4 { color:#9da6ae!important; font-size:15px!important; padding-top:2px!important; padding-left:3px!important; float:left!important; width: 120px!important; margin-top:2px!important;} .back-to-top h4 a:hover, .back-to-top a:hover h4 { color:#3d4247!important; text-decoration:none!important;} .back-to-top span.link { color:#9da6ae!important; font-size:15px!important; padding-top:2px!important; padding-left:3px!important; float:left!important; width: 120px!important; margin-top:2px!important;} .back-to-top span.link a:hover,.back-to-top span.link:hover{ text-decoration:none!important;} .back-to-top a.scroll-to:hover{ text-decoration:none!important;} .back-to-top.white h4{ color:#9DA6AE!important;} .back-to-top.white h4:hover { color:#3d4247!important; text-decoration:none!important;} .back-to-top.black h4{ color:#FFF!important;} .back-to-top.black h4:hover { color:#3d4247!important; text-decoration:none!important;} .back-to-top.red h4{ color:#FFF!important;} .back-to-top.red h4:hover { color:#3d4247!important; text-decoration:none!important;} .vertical-rule, .back-to-top .vertical-rule{ position:absolute; float:left; width:1px; height:26px; border-left:#dbe3e5 1px solid; margin:0;} .back-to-top.red .vertical-rule{ border-left:#FFF 1px solid!important;} .back-to-top .up-arrow{ position:absolute; margin-left: 133px; margin-top:7px;} .ie7 .back-to-top .up-arrow{ margin-left:12px;} .back-to-top .up-arrow, .back-to-top .up-arrow span{ width:13px; height:13px; display:block; background-image: url(../../001_Global/_images/_frames/arrow-back-to-top.png); background-repeat: no-repeat; background-position: left top; -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; -ms-transition:opacity 0.3s ease-in-out; transition:opacity 0.3s ease-in-out;} .back-to-top .up-arrow span{ opacity:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); background-position: 0 -14px;} .back-to-top a:hover .up-arrow span{ opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100);} .floatleft.back-to-top{float:left!important; margin-top:12px; margin-left:0px!important;} .floatright.back-to-top{float:right!important; margin-right:15px!important;} .unfloated.back-to-top{ float:none;} .unfloated.back-to-top .vertical-rule{ margin-left:0px; position: relative;} .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; }