:root { --navbar-bg-color: hsl(0, 0%, 15%); --navbar-text-color: hsl(0, 0%, 85%); --navbar-text-color-focus: white; --navbar-bg-contrast: hsl(0, 0%, 25%); /* body background colors */ --body-bg-green: /*#63954b;*/ #5e5e5e; --body-bg-light: /*#f6edd9;*/#5e5e5e; --body-bg-dark: #5A512F; --body-bg-content: #FBFBF9; --body-text: #454545; /* text colors */ --body-color-content-h1: #5daa68; --body-color-content-h3: #2B7836; /*#CF5D30*/ --body-color-bottom-h1: #86c0e4; --body-color-border-dark: #001626; --body-color-link: #CD6221; --body-color-link-hover: #9B3000; --body-color-link-visited: #FFA867; --body-color-link-active: #690000; --body-color-bottom-text: #ffffff; --body-color-link-bottom: #86c0e4; --body-color-link-bottom-hover: #5E98BC; --body-color-link-bottom-visited: #86c0e4; --body-color-link-bottom-active: #2C668A; --body-border-input: #0A7BD1; --body-bg-input: #CFECEC; /* new color styles based on Jana design */ --tp-logo-green: #87c543; --tp-logo-lightgreen: #C3FDB8; --tp-logo-black: #141414; --tp-logo-darkblue: #001860; --tp-logo-darkgray: #5e5e5e; --tp-logo-very-darkgray: #363636; --subnav-button:#d5e7ab; --subnav-button-hover:#e8f1d4; --subnav-button-focus:#ffffff; --nav-link:#a0c940; --nav-link-hover:#c9e092; --nav-link-active:#ffffff; --tp-link-featured:#417da4; --tp-link-featured-hover:#336584; --tp-link-featured-active:#0B3D5C; --tp-link-blue:#3193d1; --tp-link-blue-hover:#417da4; --tp-link-blue-active:#19557C; --followed-calendar-block:#86c0e4; --followed-calendar-block-hover:#CDCDCD; --followed-calendar-block-active:#9B9B9B; --green-button:#a0c940; --green-button-hover:#c9e092; --green-button-active:#ffffff; } * { box-sizing: border-box; margin: 0; padding: 0; } body { height: 100vh; font-family: Verdana, Arial, Helvetica, sans-serif; } main { width:100%; position:relative; top:114px; } footer { width:100%; position:relative; top:114px; } .container { /*max-width: 1000px;*/ max-width:100%; padding-left: 1.4rem; padding-right: 1.4rem; margin-left: auto; margin-right: auto; } /************************************************* /* CONSOLE CSS >************************************************/ a.console-table-link:link { font-weight:bold; font-size:15px; color:#7F462C; text-decoration:none; } a.console-table-link:visited { color: #CF967C; } a.console-table-link:hover { color: #390000; } a.console-table-link:active { color: #003838; } a.console-table-link-small-own:link { font-size:13px; text-decoration:none; color:#0155B3; } a.console-table-link-small-own:visited { color: #CF967C; } a.console-table-link-small-own:hover { color: #0000AC; } a.console-table-link-small-own:active { color: #000000; } a.console-table-link-small-other:link { font-size:13px; color:#B20254; text-decoration:none; } a.console-table-link-small-other:visited { color: #CF967C; } a.console-table-link-small-other:hover { color: #390000; } a.console-table-link-small-other:active { color: #003838; } /* color was #306754 */ a.console-icon:link { font-weight:bold; font-size:15px; color:#0254B2; text-decoration:none; } a.console-icon:visited { color: #0254B2; } a.console-icon:hover { color: #002280; } a.console-icon:active { color: #52A4FF; } .console-subheader { font-weight:bold; font-size:14px; color:#703CC9; } .icon { font-size:15px; } .icon_color_ON { color:#008A38; } .icon_color_OFF { color:#B6B6B4; } .console-important { color:#4814A1; font-size:12px; font-style:italic; } /************************************************* /* MAIN BODY CSS /************************************************/ h1.main-text { margin-left:auto; margin-right:auto; font-weight:bold; font-style:italic; font-size:24px; color:#FBFBF9; text-shadow: 3px 3px var(--tp-logo-black); padding:25px 0 25px 0; text-align: center; } h1.event { } h2.main-text { font-weight:bold; font-style:normal; font-size:18px; padding:0 20px 0 20px; } h2.main-text-new { color: #3f6844; font-weight:bold; font-size:16px; font-face:Verdana, Arial, Helvetica, sans-serif; } h3.main-text { color: var(--body-color-content-h3); font-weight:bold; font-size:14px; /*font-family: Georgia, Times New Roman, serif;*/ padding: 0 0 0 0; } h4.main-text { color: var(--body-color-content-h3); font-weight:bold; font-size:14px; /*font-family: Georgia, Times New Roman, serif;*/ padding: 0 0 0 0; } h3.main-text-new { color: #008000; font-weight:bold; font-size:18px; font-face:Verdana, Arial, Helvetica, sans-serif; } .main-text-new { font-size:17px; line-height:1.6em; } .main-text-emphatic { color: #008000; font-weight:bold; } .main-text { padding: 15px 0 0 0; } .main-text-note { padding:15px 0 0 0 ; font-size:13px; font-style:italic; line-height:150%; } .main-text-local-message { font-size:14px; padding:5px 20px 5px 20px; } .main-text-photo-credit { font-style:italic; font-weight:200; font-size:12px; color:#2C3539; padding:0 0 0 20px; } .main-text-local-message-zipcode { color: var(--body-color-content-h3); font-weight:bold; } a.main-text-local-message-link:link { font-weight:bold; color:var(--body-color-link); text-decoration:none; } a.main-text-local-message-link:visited { color: var(--body-color-link-visited); } a.main-text-local-message-link:hover { color: var(--body-color-link-hover); } a.main-text-local-message-link:active { color: var(--body-color-link-active); } .main-text-local-message-transparent { font-size:14px; padding:5px 20px 5px 20px; color:#ffffff; } .main-text-local-message-zipcode-transparent { color: #CBFE98; font-weight:bold; } a.main-text-local-message-link-transparent:link { font-weight:bold; color:#FDD017; text-decoration:none; } a.main-text-local-message-link-transparent:visited { color: #FDD017; } a.main-text-local-message-link-transparent:hover { color: #AD8000; } a.main-text-local-message-link-transparent:active { color: #FFFF67; } /* a.main-link:link { font-weight:bold; font-size:14px; color:var(--body-color-link); text-decoration:none; } a.main-link:visited { color: var(--body-color-link-visited); } a.main-link:hover { color: var(--body-color-link-hover); } a.main-link:active { color: var(--body-color-link-active); } */ a.main-link:link { font-weight:bold; font-size:14px; color:var(--tp-link-blue); text-decoration:none; } a.main-link:visited { color: var(--tp-link-blue); } a.main-link:hover { color: var(--tp-link-blue-hover); } a.main-link:active { color: var(--tp-link-blue-active); } a.main-link-nosize:link { font-weight:bold; color:var(--tp-link-blue); text-decoration:none; } a.main-link-nosize:visited { color: var(--tp-link-blue); } a.main-link-nosize:hover { color: var(--tp-link-blue-hover); } a.main-link-nosize:active { color: var(--tp-link-blue-active); } a.green-link:link { font-weight:bold; color:#008000; text-decoration:none; } a.green-link:visited { color: #008000; } a.green-link:hover { color: #28A828; } a.green-link:active { color: #78F878; } a.main-link-event2:link { font-family:"Open Sans"; font-weight:600; font-size:13pt; color:#206786; text-decoration:none; letter-spacing: 0.02em; } a.main-link-event2:visited { color: #206786; } a.main-link-event2:hover { color: #003F5E; } a.main-link-event2:active { color: #000322; } a.main-link-event3:link { font-family:"Open Sans"; font-weight:600; font-size:12pt; color:#206786; text-decoration:none; letter-spacing: 0.02em; } a.main-link-event3:visited { color: #206786; } a.main-link-event3:hover { color: #003F5E; } a.main-link-event3:active { color: #000322; } a.main-link-sm:link { font-weight:bold; font-size:13px; color:var(--tp-link-blue); text-decoration:none; } a.main-link-sm:visited { color: var(--tp-link-blue); } a.main-link-sm:hover { color: var(--tp-link-blue-hover); } a.main-link-sm:active { color: var(--tp-link-blue-active); } a.main-link-lg:link { font-weight:bold; font-size:18px; color:var(--body-color-link); text-decoration:none; } a.main-link-lg:visited { color: var(--body-color-link-visited); } a.main-link-lg:hover { color: var(--body-color-link-hover); } a.main-link-lg:active { color: var(--body-color-link-active); } a.main-link-promotional:link { font-weight:bold; font-size:16px; color:#E42217; text-decoration:none; } a.main-link-promotional:visited { color: var(--body-color-link-visited); } a.main-link-promotional:hover { color: var(--body-color-link-hover); } a.main-link-promotional:active { color: var(--body-color-link-active); } a.main-link-small:link { font-weight:bold; font-size:12px; color:var(--body-color-link); text-decoration:none; } a.main-link-small:visited { color: var(--body-color-link-visited); } a.main-link-small:hover { color: var(--body-color-link-hover); } a.main-link-small:active { color: var(--body-color-link-active); } a.main-link-event:link { font-weight:bold; font-size:14px; color:var(--body-color-link); text-decoration:none; } a.main-link-event:visited { color: var(--body-color-link-visited); } a.main-link-event:hover { color: var(--body-color-link-hover); } a.main-link-event:active { color: var(--body-color-link-active); } a.link-small:link { color:var(--body-color-link); text-decoration:none; } a.link-small:visited { color: var(--body-color-link-visited); } a.link-small:hover { color: var(--body-color-link-hover); } a.link-small:active { color: var(--body-color-link-active); } .featured_event_link { font-size:14px; font-weight:bold; line-height:1.25em; } a.featured_event_link:link { font-weight:bold; color:#206786; text-decoration:none; } a.featured_event_link:visited { color: #206786; } a.featured_event_link:hover { color: #003F5E; } a.featured_event_link:active { color: #000322; } a.frontend-clickable-icon-gray:link { font-weight:bold; font-size:11px; color:#837E7C; text-decoration:none; } a.frontend-clickable-icon-gray:visited { color: #837E7C; } a.frontend-clickable-icon-gray:hover { color: green; } a.frontend-clickable-icon-gray:active { color: #000000; } a.frontend-clickable-icon-red:link { font-weight:bold; font-size:11px; color:crimson; text-decoration:none; } a.frontend-clickable-icon-red:visited { color: #837E7C; } a.frontend-clickable-icon-red:hover { color: #837E7C; } a.frontend-clickable-icon-red:active { color: #000000; } a.frontend-clickable-icon-green:link { font-weight:bold; font-size:11px; color:green; text-decoration:none; } a.frontend-clickable-icon-green:visited { color: #837E7C; } a.frontend-clickable-icon-green:hover { color: crimson; } a.frontend-clickable-icon-green:active { color: #000000; } a.link-shadow:link { font-size:12px; color:#FFDF00; text-decoration:none; } a.link-shadow:visited { color:#FFDF00; } a.link-shadow:hover { color:darkorange; } a.link-shadow:active { color:#ffffff; } a.red-x:link { font-weight:bold; font-size:14px; color:#ffffff; text-decoration:none; } a.red-x:visited { color: #ffffff; } a.red-x:hover { color: #A9A9A9; } a.red-x:active { color: #818181; } .main-icon { color: var(--body-color-content-h3); } .main-border-top-frame { margin:0; padding:0 0 0 0; width:100%; } /* to revise width of content block, change the following: .main-border-top-transparent .main-border-top .main-border-bottom .main-content */ .main-border-top-transparent { margin:0 20px 0 20px; padding:10px 0 10px 0; text-align:center; /*background-color:rgba(57, 82, 98, 0.85);*/ background-color:rgba(65, 125, 164, 0.85); width:80%; max-width:1100px; border-width:2px 1px 0 1px; border-style:solid; border-color:#2B1B17; /* border-top-left-radius:12%; border-top-right-radius:12%; box-shadow: 0 -1px 1px #2B1B17;*/ z-index:9999; text-align:left; } .main-border-top { margin:0 20px 0 20px; padding:20px 0 20px 0; text-align:center; background-color:var(--body-bg-content); /*max-width:960px;*/ width:80%; max-width:1100px; border-width:2px 1px 0 1px; border-style:solid; border-color:#2B1B17; /* border-top-left-radius:12%; border-top-right-radius:12%; box-shadow: 0 -1px 1px #2B1B17;*/ z-index:9999; text-align:left; } .main-border-bottom { margin:0 20px 0 20px; padding:20px 0 20px 0; text-align:center; background-color:var(--body-bg-content); width:80%; max-width:1100px; /*max-width:960px;*/ border-width:0 1px 1px 1px; border-style:solid; border-color:#2B1B17; /*border-bottom-left-radius:50%; border-bottom-right-radius:50%;*/ box-shadow: 10px 10px 10px #2B1B17; z-index:9999; } .main-content { /*max-width:1000px;*/ width:80%; max-width:1100px; margin-left: 20px; margin-right: 20px; padding:20px 25px 20px 25px; background:var(--body-bg-content); font-size:14px; font-weight:normal; line-height:150%; border-width:0 1px 0 1px; border-style:solid; border-color:#2B1B17; text-align:left; min-height:250px; color: var(--body-text); } .main-content-text { font-size:14px; line-height:150%; text-align:left; } .main-frame { /*max-width:1000px;*/ width:100%; } .main-border-bottom-frame { margin:0; padding:0 0 20px 0; width:100%; background:var(--tp-logo-darkgray); background-image: url('/assets/images/noise-lowest.png'); background-repeat: repeat; } .main-slogan { font-family: 'Courgette', cursive; font-size:18px; font-style:italic; color: #417da4; font-weight:bold; } hr.main-hr { border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); margin:5px 0 5px 0; } /* used for ajax response messages */ .response-border { padding:10px 10px 10px 10px; border-width:1px 1px 1px 1px; border-style:solid; border-color:#0C090A; background:#FFFFE0; } /* edit: color: var(--body-color-content-h3); */ .calendar-button-title { color: #000000; font-weight:bold; font-size:14px; font-family: Georgia, Times New Roman, serif; } /* feed title bar */ /*.feed-title-spacer { padding:170px 0 50px 0; }*/ /* this controls the space between the bottom of the core nav bar and the top of the calendar header. below is the absolute minimum setting. Others for different heights are controlled in the media settings at bottom of this file. */ .feed-title-spacer { height:25px; } .feed-title { width:100%; text-align:center; font-size:14px; font-family: Courgette, cursive; line-height: 40px; font-style: normal; font-weight: 400; color: #ffffff; padding:10px 10px 10px 10px; background: rgba(0,0,0,.25); border-bottom: 2px solid rgba(0,0,0,.35); margin-bottom: 3px; width: auto; -webkit-user-select: none; text-shadow: 1px 1px 1px #353535; } /* .feed-title-empty { width:100%; height:20px; text-align:center; font-size:14px; font-family: Courgette, cursive; line-height: 40px; font-style: normal; font-weight: 400; color: #ffffff; padding:10px 10px 10px 10px; background: rgba(0,0,0,.25); border-bottom: 2px solid rgba(0,0,0,.35); margin-bottom: 3px; width: auto; -webkit-user-select: none; text-shadow: 1px 1px 1px #353535; } */ .two-columns-right { margin-top:20px; max-width:100%; } .two-columns-left { margin-top:0; max-width:100%; } .three-col-left { max-width:100%; padding: 0 0 10px 0; border-width:0 0 2px 0; border-style:solid; border-color:steelblue; } .three-col-center { max-width:100%; padding: 10px 0 10px 0; border-width:0 0 2px 0; border-style:solid; border-color:steelblue; } .three-col-right { max-width:100%; padding: 10px 0 10px 0; } .two-col-photo-flex { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; padding-bottom:20px; } .two-col-photo-flex-photo { max-width:400px; min-width:100px; } .two-col-photo-flex-text { margin-top:20px; max-width:400px; } .green-dashed-border { border-width:0 0 1px 0; border-style:dashed; border-color:green; } /* */ .header-tools-flex { font-size:12px; font-weight:bold; width:100%; padding:0; margin:0; display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; color:#ffffff; } a.link-white:link { color:#ffffff; text-decoration:none; } a.link-white:visited { color:#ffffff; } a.link-white:hover { color:var(--followed-calendar-block-hover); } a.link-white:active { color:var(--followed-calendar-block-active); } .mobile-hidden { display:none; } /************************************************* /* FOOTER CSS /************************************************/ .copy-bottom-frame-new { width:100%; font-size:11px; line-height:160%; background:var(--tp-logo-very-darkgray); /*background-image: url('/assets/images/noise-lowest.png'); background-repeat: repeat;*/ color:var(--body-color-bottom-text); letter-spacing:1px; padding: 0 0 20px 0; border-width:1px 0 0 0; border-style:solid; border-color:var(--tp-logo-black); } .copy-bottom-content-new { width:80%; max-width:1100px; margin-left:auto; margin-right:auto; display: flex; flex-direction:row; flex-wrap:wrap; justify-content:space-evenly; } .copy-bottom-column { max-width:100%; margin-top:20px; padding-bottom:20px; } .copy-bottom-column-border { border-width:0 0 2px 0; border-style:solid; border-color:#86c0e4; } .copy-bottom-column-left { width:100%; } .copy-bottom-logo { margin:0 8px 0 0; width:60px; height:auto; padding: 0 0 0 0; float:left; border-width:1px; border-style:solid; border-color:#34282C; box-shadow: 0 5px 5px #34282C; } .copy-bottom-text { vertical-align:top; padding: 10px 0 0 0; } h1.copy-bottom-h1 { font-size:16px; color:var(--body-color-bottom-h1); font-weight:bold; font-style:normal; text-shadow: 2px 2px #1E1E1E; font-family:Georgia, Times New Roman, serif; padding: 0 0 3px 0; letter-spacing:1px; } a.copy-bottom-link:link { font-weight:bold; font-size:11px; color:var(--body-color-link-bottom); text-decoration:none; } a.copy-bottom-link:visited { color: var(--body-color-link-bottom-visited); } a.copy-bottom-link:hover { color: var(--body-color-link-bottom-hover); } a.copy-bottom-link:active { color: var(--body-color-link-bottom-active); } .nav-bottom-frame { min-height:36px; color: #000000; font-family:arial,helvetica; font-size:10pt; background:var(--navbar-bg-color); width:100%; padding:0; /*background-image: url('/assets/images/noise-lowest.png'); background-repeat: repeat; box-shadow: -3px 0 3px var(--body-bg-green); */ padding:10px 0 10px 0; border-width:1px 0 0 0; border-style:solid; border-color:var(--tp-logo-black); } .nav-bottom-content { width:80%; max-width:1100px; margin-left: auto; margin-right: auto; display: flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; } .nav-bottom-copyright { width:100%; color:#ffffff; text-align:center; } .nav-bottom-links { width:100%; margin-top:15px; text-align:center; } a.nav-bottom-link:link { color:var(--nav-link); padding:0 0 0 10px; text-decoration:none; font-weight:bold; } a.nav-bottom-link:visited { color:var(--nav-link); } a.nav-bottom-link:hover { color:var(--nav-link-hover); } a.nav-bottom-link:active { color:var(--nav-link-active); } a.nav-bottom-link:first-of-type { padding:0; } .nav-dropdown { display:none; color:#54C571; position:relative; top:0; font-size:14px; font-weight:200; padding:0; text-align:center; margin-left:auto; margin-right:auto; } /*.nav-dropdown-bar { padding:5px 15px 10px 20px; background: var(--navbar-bg-color); color: #54C571; }*/ .nav-dropdown-bar { padding:5px 15px 10px 20px; background-color:rgba(0, 0, 0, 0.85); color:#54C571; width:100%; } /*.nav-dropdown-bar-hilite { padding:5px 15px 10px 20px; background: var(--navbar-bg-contrast); color: #B5EAAA; }*/ .nav-dropdown-bar-hilite { padding:5px 15px 10px 20px; background:#182731; color: #B5EAAA; } a.nav-dropdown-link:link { text-decoration:none; color:var(--nav-link); } a.nav-dropdown-link:visited { color:var(--nav-link); } a.nav-dropdown-link:hover { color:var(--nav-link-hover); } a.nav-dropdown-link:focus { color:var(--nav-link-active); } a.nav-dropdown-link-blue:link { text-decoration:none; color:#FFCF7A; } a.nav-dropdown-link-blue:visited { color:#FFCF7A; } a.nav-dropdown-link-blue:hover { color:#D7A752; } a.nav-dropdown-link-blue:focus { color:#A57520; } /************************************************* /* HOMEPAGE /************************************************/ .homepage-marquee-frame { background-image: url('/assets/images/bg-east-4th.jpg'); background-color: rgba(0,0,0,0.5); background-size:cover; background-repeat: no-repeat; margin:0; padding:0; text-align:center; height:380px; width:100%; } .homepage-marquee { background-color: rgba(0, 0, 0, 0.6); width:100%; height:380px; padding:20px 0 50px 0; display:flex; flex-direction:column; justify-content:center; } .homepage-marquee-blurb { padding:25px; font-family: 'Courgette', cursive; font-size:24px; font-weight:bold; color:white; text-align:center; max-width:400px; display:flex; flex-direction:column; align-self:center; } .homepage-marquee-blurb-copy { font-size:32px; color:#FFD067; padding:0 0 25px 0; } .homepage-marquee-blurb-plus { color: #7FE817; font-size:48px; } .homepage-marquee-blurb-under { color:#ffffff; } .homepage-info-frame { background:#ffffff; width:100%; } .homepage-info { max-width:900px; margin-left:auto; margin-right:auto; display: flex; flex-direction:row; flex-wrap:wrap; justify-content:space-evenly; padding:0 0 25px 0; } .homepage-info-column { max-width:33%; padding: 0 5px 0 5px; text-align:center; } .homepage-info-column-copy { text-align:left; } hr.homepage-info-column-hr { width:75%; color:var(--body-bg-green); margin-left:auto; margin-right:auto; } .homepage-copy-bottom-spacer { width:100%; background:var(--tp-logo-darkblue); /*background-image: url('/assets/images/noise-lowest.png'); background-repeat: repeat; height:20px; */ } /************************************************* /* FORMS & BUTTONS /************************************************/ input[type=text] { padding: 0 0 0 5px; height:30px; border-width:1px; border-style:solid; border-color:var(--body-border-input); vertical-align:middle; } input[type=text]:focus { background-color: var(--body-bg-input); } .textarea { padding: 0 0 0 5px; height:125px; width:275px; border-width:1px; border-style:solid; border-color:var(--body-border-input); vertical-align:middle; } .textarea:focus { background-color: var(--body-bg-input); } input[type=password] { padding: 0 0 0 5px; height:30px; border-width:1px; border-style:solid; border-color:var(--body-border-input); vertical-align:middle; } input[type=password]:focus { background-color: var(--body-bg-input); } .standard_text_input { width:250px; } .standard_form_div { padding: 0 0 10px 0; } .flexy { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; } .flexy_opt { padding:0 15px 10px 0; } .required { font-weight:bold; color:firebrick; font-size:14px; } a.link-as-button:link { background:var(--body-color-link); color: white; padding: 3px 10px 3px 10px; text-align: center; text-decoration: none; font-size: 16px; border-radius: 5px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; border-width:1px; border-style:solid; border-color:dimgray; vertical-align:middle; } a.link-as-button:hover { background-color: var(--body-color-link-hover); color: white; } a.link-as-button:focus { background: var(--body-color-link-active); color:#ffffff; border-color:#25383C; } a.link-as-button-yellow:link { background:var(--body-color-link-bottom); color: #000000; padding: 3px 10px 3px 10px; text-align: center; text-decoration: none; font-size: 16px; border-radius: 5px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; border-width:1px; border-style:solid; border-color:dimgray; vertical-align:middle; } a.link-as-button-yellow:hover { background-color: var(--body-color-link-bottom-hover); color: #000000; } a.link-as-button-yellow:focus { background: var(--body-color-link-bottom-active); color:#000000; border-color:#25383C; } .main-button { height:30px; background:var(--body-color-link); color: white; padding: 3px 10px 3px 10px; text-align: center; text-decoration: none; font-size: 16px; border-radius: 5px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; border-width:1px; border-style:solid; border-color:dimgray; vertical-align:middle; } .main-button:hover { background-color: var(--body-color-link-hover); color: white; } .main-button:focus { background: var(--body-color-link-active); color:#ffffff; border-color:#25383C; } .main-button-green { height:30px; background:#85BB65; color: white; padding: 3px 10px 3px 10px; text-align: center; text-decoration: none; font-size: 16px; border-radius: 5px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; border-width:1px; border-style:solid; border-color:dimgray; vertical-align:middle; } .main-button-green:hover { background-color:#538933 ; color: white; } .main-button-green:focus { background: #B7ED97; color:#ffffff; border-color:#25383C; } .main-button-red { height:30px; background:#C11B17; color: white; padding: 3px 10px 3px 10px; text-align: center; text-decoration: none; font-size: 16px; border-radius: 5px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; border-width:1px; border-style:solid; border-color:dimgray; vertical-align:middle; } .main-button-red:hover { background-color:#8F0000 ; color: white; } .main-button-red:focus { background: #F34D49; color:#ffffff; border-color:#25383C; } .main-button-yellow { height:30px; background:#E9AB17; color: white; padding: 3px 10px 3px 10px; text-align: center; text-decoration: none; font-size: 16px; border-radius: 5px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; border-width:1px; border-style:solid; border-color:dimgray; vertical-align:middle; } .main-button-yellow:hover { background-color:#B77900 ; color: white; } .main-button-yellow:focus { background: #FFDD49; color:#ffffff; border-color:#25383C; } .main-button-black { height:30px; background:#6E6E6E; color: white; padding: 3px 10px 3px 10px; text-align: center; text-decoration: none; font-size: 16px; border-radius: 5px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; border-width:1px; border-style:solid; border-color:dimgray; vertical-align:middle; } .main-button-black:hover { background-color:#282828; color: white; } .main-button-black:focus { background: #000000; color:#ffffff; border-color:#25383C; } .main-button-blue { height:30px; background:#3090C7; color: white; padding: 3px 10px 3px 10px; text-align: center; text-decoration: none; font-size: 16px; border-radius: 5px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; border-width:1px; border-style:solid; border-color:dimgray; vertical-align:middle; } .main-button-blue:hover { background-color:#00548B; color: white; } .main-button-blue:focus { background: #002259; color:#ffffff; border-color:#25383C; } .calopt-button { height:40px; background:var(--body-color-link); color: white; padding: 3px 10px 3px 10px; text-align: center; text-decoration: none; font-size: 16px; border-radius: 5px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; border-width:1px; border-style:solid; border-color:#000000; vertical-align:middle; } .calopt-button:hover { background-color: var(--body-color-link-hover); color: white; } .calopt-button:focus { background: var(--body-color-link-active); color:#ffffff; border-color:#25383C; } .calopt-button-gold { height:40px; background:#D77D1E; color: #ffffff; padding: 3px 10px 3px 10px; text-align: center; text-decoration: none; font-size: 16px; border-radius: 5px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; border-width:1px; border-style:solid; border-color:#000000; vertical-align:middle; } .calopt-button-gold:hover { background-color:#F59B00; color: white; } .calopt-button-gold:focus { background:#FFAF50; color:#ffffff; border-color:#25383C; } .calopt-button-red { height:40px; background:#8F0000; color: white; padding: 3px 10px 3px 10px; text-align: center; text-decoration: none; font-size: 16px; border-radius: 5px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; border-width:1px; border-style:solid; border-color:#000000; vertical-align:middle; } .calopt-button-red:hover { background-color:#D52F2B; color: white; } .calopt-button-red:focus { background:#DF5050; color:#ffffff; border-color:#25383C; } .calopt-button-white { height:40px; background:#ffffff; color: #000000; padding: 3px 10px 3px 10px; text-align: center; text-decoration: none; font-size: 16px; border-radius: 5px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; border-width:1px; border-style:solid; border-color:#000000; vertical-align:middle; } .calopt-button-white:hover { background-color:#afafaf; color: #000000; } .calopt-button-white:focus { background: #5F5F5F; color:#000000; border-color:#25383C; } .copy-bottom-button { height:30px; background:var(--green-button); color: #000000; padding: 3px 10px 3px 10px; text-align: center; text-decoration: none; font-size: 16px; border-radius: 5px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; border-width:1px; border-style:solid; border-color:dimgray; vertical-align:middle; } .copy-bottom-button:hover { background-color: var(--green-button-hover); } .copy-bottom-button:focus { background: var(--green-button-active); } .button-green { background-color: #008000; border: 1px solid #000000; border-radius: 12px; color: white; padding: 10px 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; transition-duration: 0.4s; } .button-green:hover { background-color: #50D050; color: white; } .button-gray { background-color: #5E7D7E; border: 1px solid #000000; border-radius: 12px; color: white; padding: 10px 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; transition-duration: 0.4s; } .button-gray:hover { background-color: #9AB9BA; color: white; } .button-right-pad { margin: 0 20px 0 0; } a.testimonialResults { display: inline-block; padding: 10px; background:#DBF9DB; text-decoration: none; color:#000000; border: 1px solid #3D3C3A; margin: 5px; font-size:12px; font-weight:bold; } a.testimonialResults:hover { background:#A9C7A9; border: 1px solid forestgreen; } a.testimonialResults:focus { background:#6D8B6D; color:#ffffff; border: 1px solid green; } /************************************************* /* EVENT DISPLAY /************************************************/ .event-block { width:100%; margin-bottom:35px; background:#ebebeb; border-width:1px 1px 0 1px; border-style:solid; border-color:#C4C3C3; } .tile-block { /*max-width:440px; */ display:flex; flex-direction:row; flex-wrap: wrap; margin-top:0; } .tile-block-text { font-size:12px; } .dateblock-pair { /*display:flex; flex-direction:row; flex-wrap: wrap; justify-content: space-between; */ } .date-header-block { width:100%; background-image: url('/assets/images/greendot.png'); background-repeat:repeat-x; padding:0 0 15px 0; } .date-header-block-text { color:var(--body-text); margin-bottom:15px; background:white; padding-right:10px; font-family:"Open Sans", Serif; font-weight:600; font-size:12pt; } .div-top { padding:15px 0 0 0; } .div-header { padding:0 0 0 0; } .div-indent { padding:0 0 0 20px; } .event-block-main { width:100%; } .event-block-details { width:100%; } .flexbox-standard { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; } .recurringGrid { padding:10px 10px 10px 0; overflow: auto; max-width:300px; } /************************************************* /* PERSONAL CALENDAR /************************************************/ .followed-calendar-block { margin: 0 20px 20px 0; display:flex; flex-direction:row; flex-wrap: wrap; justify-content: flex-start; padding:5px; border: 1px solid #ffffff; background:#001860; width:200px; } a.calendar-button-link-small-name:link { font-weight:normal; font-size:12px; color:#ffffff; text-decoration:none; } a.calendar-button-link-small-name:visited { color:#ffffff; } a.calendar-button-link-small-name:hover { color:var(--followed-calendar-block-hover); } a.calendar-button-link-small-name:active { color:var(--followed-calendar-block-active); } a.calendar-button-link-small:link { font-weight:bold; font-size:12px; color:#ffffff; text-decoration:none; } a.calendar-button-link-small:visited { color:#ffffff; } a.calendar-button-link-small:hover { color:var(--followed-calendar-block-hover); } a.calendar-button-link-small:active { color:var(--followed-calendar-block-active); } /************************************************* /* AJAX ITEMS /************************************************/ .success_box { border-width:1px; border-style:solid; border-color:black; padding:10px; background:#005900; color:#ffffff; font-weight:bold; font-size:15px; text-align:center; } /************************************************* /* 'CORE FEATURES' NAV DISPLAY /************************************************/ .core-features-nav-button-block { position:fixed; top:64px; height:50px; width:100%; background:var(--tp-logo-green); /*background-image: linear-gradient(#5daa68, #3f6844); */ z-index:99999; border-top:1px solid #000000; border-bottom:1px solid #000000; margin-left:auto; margin-right:auto; } .core-features-nav-button-container { display:flex; flex-direction:row; flex-wrap: nowrap; justify-content: space-around; padding:10px 10px 0 10px; } .core-features-nav-button { width:65px; height:22px; background:var(--subnav-button); color:#282828; padding: 3px 10px 3px 10px; text-align: center; text-decoration: none; font-size: 10px; font-weight:600; border-radius: 5px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; border-width:1px; border-style:solid; border-color:#000000; vertical-align:middle; } .core-features-nav-button:hover { background-color:var(--subnav-button-hover); } .core-features-nav-button:focus { background-color: var(--subnav-button-focus); } .core-features-nav-button-div { width:100px; } .core-features-nav-button-dashed { width:65px; height:22px; background:var(--subnav-button); color:#282828; padding: 3px 10px 3px 10px; text-align: center; text-decoration: none; font-size: 10px; font-weight:600; border-radius: 5px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; border-width:1px; border-style:dashed; border-color:#000000; vertical-align:middle; } .core-features-nav-button-dashed:hover { background-color:var(--subnav-button-hover); } .core-features-nav-button-dashed:focus { background-color: var(--subnav-button-focus); } /************************************************* /* MISCELLANEOUS CSS /************************************************/ .ticket-callout { margin-left:10px; border-width:1px; border-style:solid; border-color:black; display:inline-block; padding:5px; background:var(--tp-logo-green); color:#000000; } a.ticket-callout-link:link { font-weight:normal; font-size:9pt; color:#000000; text-decoration:none; } a.ticket-callout-link:visited { color: #000000; } a.ticket-callout-link:hover { color: #3D3C3A; } a.ticket-callout-link:active { color: #ffffff; } .pc-follow-blurb { color:#ffffff; font-size:10pt; } .coupon_qr_block { margin-top:15px; display:flex; flex-direction:row; flex-wrap:wrap; text-align:center; width:100%; } .coupon_qr { margin-top:15px; order:1; margin-left:auto; margin-right:auto; } .coupon_tp_logo { margin-top:15px; order:2; margin-left:auto; margin-right:auto; } .coupon_fineprint { margin-top:10px; order:3; text-align:left; } .td_hidden { display:none; } a.alert-link:link { font-weight:bold; font-size:18px; color:gold; text-decoration:none; } a.alert-link:visited { color: #837E7C; } a.alert-link:hover { color: crimson; } a.alert-link:active { color: orange; } .spacer { padding:10px 0 0 0; } .divider { padding:5px 0 0 0; position:relative; text-align:center; background:#ffffff; z-index:2; color:dimgray; font-style:italic; } .divider::before { content:""; display:block; width:45%; height:1px; position:absolute; background:#9BC8D8; left:0; top:50%; z-index:1; } .divider::after { content:""; display:block; width:45%; height:1px; position:absolute; background:#9BC8D8; right:0; top:50%; z-index:1; } .divider2 { content:""; border-width:0 0 1px 0; border-style:solid; border-color:#9BC8D8; width:100%; padding:5px 0 5px 0; } .main-text-error { color:crimson; font-weight:bold; background:#FBF6D9; font-size:14px; border-width:1px 1px 1px 1px; border-style:solid; border-color:#000000; padding:5px; } .main-text-error-admin { color:crimson; font-weight:bold; font-size:14px; } .list-padding { padding:0 0 0 30px; line-height:1.5em; } .video-container { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) padding-top: 75%; 4:3 Aspect Ratio padding-top: 66.66%; 3:2 Aspect Ratio padding-top: 62.5%; 8:5 Aspect Ratio padding-top: 100%; 1:1 Aspect Ratio */ } .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } /************************************************* /* CONSOLE-CSS /************************************************/ h2.console-header { color:#2e72b9; } h3.console-header { color:#2e72b9; } a.console-button:link { background:#2e72b9; color: white; padding: 6px 10px 6px 10px; text-align: center; text-decoration: none; font-size: 16px; font-weight:400; border-radius: 5px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; border-width:1px; border-style:solid; border-color:dimgray; vertical-align:middle; } a.console-button:hover { background-color: var(--body-color-link-hover); color: white; } a.console-button:focus { background: var(--body-color-link-active); color:#ffffff; border-color:#25383C; } a.console-button-brown:link { background:#CD6221; color: white; padding: 6px 10px 6px 10px; text-align: center; text-decoration: none; font-size: 16px; font-weight:400; border-radius: 5px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; border-width:1px; border-style:solid; border-color:dimgray; vertical-align:middle; } a.console-button-brown:hover { background: #9B3000; color: white; } a.console-button-brown:focus { background: #690000; color:#ffffff; border-color:#25383C; } a.console-button-brown:visited { background: #CD6221; color:#ffffff; border-color:#25383C; } a.console-button-gold:link { background:#FBB117; color: #000000; padding: 6px 10px 6px 10px; text-align: center; text-decoration: none; font-size: 16px; font-weight:400; border-radius: 5px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; border-width:1px; border-style:solid; border-color:dimgray; vertical-align:middle; } a.console-button-gold:hover { background-color: #FFF75D; color: #000000; } a.console-button-gold:focus { background: #B56B00; color:#000000; border-color:#25383C; } /************************************************* /* MODAL POPUP /************************************************/ .modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transform: scale(1.1); transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s; z-index:999999; } .modal_cal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transform: scale(1.1); transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s; z-index:999999; } .modal_formPop { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transform: scale(1.1); transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s; } .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 1rem 1.5rem; width: 24rem; border-radius: 0.5rem; border-width:1px; border-style:solid; border-color:#000033; line-height:150%; box-shadow: 2px 2px 2px #000033; } .modal-content_cal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 1rem 1.5rem; width: 24rem; border-radius: 0.5rem; border-width:1px; border-style:solid; border-color:#000033; line-height:150%; box-shadow: 2px 2px 2px #000033; max-height:75%; overflow: auto; } .modal-content_formPop { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 1rem 1.5rem; /* width: 24rem; */ border-radius: 0.5rem; border-width:1px; border-style:solid; border-color:#000033; line-height:150%; box-shadow: 2px 2px 2px #000033; } .close-button { float: right; width: 1.5rem; line-height: 1.5rem; text-align: center; cursor: pointer; border-radius: 0.25rem; background-color: #DC381F; } .close-button:hover { background-color: #960000; } .close-button_cal { float: right; width: 1.5rem; line-height: 1.5rem; text-align: center; cursor: pointer; border-radius: 0.25rem; background-color: #DC381F; } .close-button_cal:hover { background-color: #960000; } .close-button_formPop { float: right; width: 1.5rem; line-height: 1.5rem; text-align: center; cursor: pointer; border-radius: 0.25rem; background-color: #DC381F; } .close-button_formPop:hover { background-color: #960000; } .show-modal { opacity: 1; visibility: visible; transform: scale(1.0); transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s; } .show-modal_cal { opacity: 1; visibility: visible; transform: scale(1.0); transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s; } .show-modal_formPop { opacity: 1; visibility: visible; transform: scale(1.0); transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s; } /****** admin side popup *******/ .modal_popup { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transform: scale(1.1); transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s; z-index:99999; } .modal_popup_content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 1rem 1.5rem; border-radius: 0.5rem; border-width:1px; border-style:solid; border-color:#000033; line-height:150%; box-shadow: 2px 2px 2px #000033; max-height:75%; overflow: auto; } .close_button_popup { float: right; width: 1.5rem; line-height: 1.5rem; text-align: center; cursor: pointer; border-radius: 0.25rem; background-color: #DC381F; } .close_button_popup:hover { background-color: #960000; } .show_modal_popup { opacity: 1; visibility: visible; transform: scale(1.0); transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s; } /************************************ Generic Modal Popup ************************************/ .modalgeneric { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transform: scale(1.1); transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s; z-index:99999; } .modalcontentgeneric { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 1rem 1.5rem; /*width: 24rem;*/ border-radius: 0.5rem; border-width:1px; border-style:solid; border-color:#000033; line-height:150%; box-shadow: 2px 2px 2px #000033; overflow: auto; max-height:75%; width: auto; /*overflow-y: auto;*/ /* overflow-x: auto;*/ /* max-height:75%; overflow: auto; max-width:75%;*/ } .closebuttongeneric { float: right; width: 1.5rem; line-height: 1.5rem; text-align: center; cursor: pointer; border-radius: 0.25rem; background-color: #DC381F; } .closebuttongeneric:hover { background-color: #960000; } .showmodalgeneric { opacity: 1; visibility: visible; transform: scale(1.0); transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s; } /************************************** * AJAX RETURN WINDOWS ETC ***************************************/ .ajax-pending-console { padding:10px; display:block; background:#FFDB58; border-width:1px 1px 1px 1px; border-style:solid; border-color:black; } .ajax-pending-console-image { width:24px; height:24px; vertical-align:middle; } /************************************** * NAVIGATION BAR ***************************************/ #navbar { --navbar-height: 64px; position: fixed; height: var(--navbar-height); background-color: var(--navbar-bg-color); left: 0; right: 0; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15); z-index:999999; } .navbar-container { display: flex; justify-content: space-between; height: 100%; align-items: center; } .home-link, .navbar-link, .navbar-link-gold { color: var(--navbar-text-color); transition: color 0.2s ease-in-out; text-decoration: none; display: flex; font-weight: 400; align-items: center; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; } .home-link:focus, .home-link:hover { color: var(--navbar-text-color-focus); } .navbar-link { justify-content: center; width: 100%; padding: 0.4em 0.8em; border-radius: 5px; } .navbar-link-gold { justify-content: center; width: 100%; padding: 0.4em 0.8em; border-radius: 5px; color:gold; } .navbar-link:focus, .navbar-link:hover { color: var(--navbar-text-color-focus); background-color: var(--navbar-bg-contrast); } .navbar-link-gold:focus, .navbar-link-gold:hover { color: gold; background-color: var(--navbar-bg-contrast); } .navbar-logo { background-color: var(--navbar-text-color-focus); border-radius: 50%; width: 30px; height: 30px; margin-right: 0.5em; } .navbar-toggle { cursor: pointer; border: none; background-color: transparent; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex-direction: column; } .icon-bar { display: block; width: 25px; height: 4px; margin: 2px; transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; background-color: var(--navbar-text-color); } .navbar-toggle:focus .icon-bar, .navbar-toggle:hover .icon-bar { background-color: var(--navbar-text-color-focus); } #navbar.opened .navbar-toggle .icon-bar:first-child, #navbar.opened .navbar-toggle .icon-bar:last-child { position: absolute; margin: 0; width: 30px; } #navbar.opened .navbar-toggle .icon-bar:first-child { transform: rotate(45deg); } #navbar.opened .navbar-toggle .icon-bar:nth-child(2) { opacity: 0; } #navbar.opened .navbar-toggle .icon-bar:last-child { transform: rotate(-45deg); } .navbar-menu { position: fixed; top: var(--navbar-height); bottom: 0; transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, left 0.2s ease-in-out, right 0.2s ease-in-out; opacity: 0; visibility: hidden; } .navbar-menu.sidebar, .navbar-menu.sidebar.left { left: -1000px; right: 0; } .navbar-menu.sidebar.right { right: -1000px; left: 0; } .navbar-menu.detached, .navbar-menu.attached { left: 0; right: 0; } #navbar.opened .navbar-menu { background-color: rgba(0, 0, 0, 0.4); opacity: 1; visibility: visible; } #navbar.opened .navbar-menu.sidebar.left { left: 0; } #navbar.opened .navbar-menu.sidebar.right { right: 0; } .navbar-links { list-style-type: none; max-height: 0; overflow: hidden; position: absolute; background-color: var(--navbar-bg-color); display: flex; flex-direction: column; align-items: center; } #navbar.opened .navbar-links { padding: 1em; max-height: none; } .sidebar .navbar-links { top: 0; bottom: 0; } .left.sidebar .navbar-links { left: 0; right: unset; box-shadow: 5px 20px 20px rgba(0, 0, 0, 0.3); } .right.sidebar .navbar-links { right: 0; left: unset; box-shadow: -5px 20px 20px rgba(0, 0, 0, 0.3); } .detached .navbar-links { left: 0; right: 0; margin: 1.4rem; border-radius: 5px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); } .attached .navbar-links { left: 0; right: 0; box-shadow: 0 20px 20px rgba(0, 0, 0, 0.3); } .navbar-item { margin: 0.4em; width: 100%; color:var(--navbar-text-color); } #options { display: flex; flex-direction: column; } .nav-logo-default { position:absolute; left:5px; top:18px; float:left; max-width: 150px; max-height:auto; } .nav-logo-custom { position:absolute; left:5px; top:18px; float:left; max-width: 150px; max-height:auto; padding:1px; background: #ffffff; border:1px solid #000000; } .navbar-reduct { display:block; } /********************** CAROUSEL STYLE **********************/ /* This is the visible area of you carousel. Set a width here to define how much items are visible. The width can be either fixed in px or flexible in %. Position must be relative! */ .jcarousel { position: relative; overflow: hidden; } /* This is the container of the carousel items. You must ensure that the position is relative or absolute and that the width is big enough to contain all items. */ .jcarousel ul { width: 10000em; position: relative; /* Optional, required in this case since it's a