@charset "UTF-8"; /* /* * HTML5 ✰ * * ==|== normalize ========================================================== */ /* ============================================================================= HTML5 display definitions ========================================================================== */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } /* ============================================================================= HTML5 header definitions ========================================================================== */ header { background-position: 0 top; text-align: center; background-repeat: repeat-x; background-image: url("%22%22"); margin-right: 1.04%; /*10 + 960 */ margin-left: 1.04%; /*10 + 960 */ width: 97.917%; /* 940 + 960 */ } div { text-align: justify; text-justify: auto; } nav { clear: both; text-align: center; text-decoration: none; } section { float: left; text-align: justify; } article { float: left; width: 75%; padding-left: 1em; } footer { clear: both; text-align: center; border-top: 5px double black; } /* ============================================================================= Base ========================================================================== */ /* * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units * 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g */ html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html, button, input, select, textarea { font-family: sans-serif; color: #222; } /* Prevent text selection of an element in all major browsers */ body { margin: 0; font-size: 1em; line-height: 1.4; -webkit-touch-calout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome 6.0+, Safari 3.1+, Edge & Opera 15+ */ -moz-user-select: none; /* Frirefox */ -ms-user-select: none; /* IE 10+ and Edge */ user-select: none; /* None-prefixed version, Chrome and Opera */ background-color: #F2F2F2; } /* * Remove text-shadow in selection highlight: h5bp.com/i * These selection declarations have to be separate * Also: hot pink! (or customize the background color to match your design) */ /* Dreamweaver: uncomment these if you do want to customize the selection highlight *::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } *::selection { background: #fe57a1; color: #fff; text-shadow: none; } */ /* ============================================================================= Links ========================================================================== */ a { color: #00e; } a:link {color:blue; text-decoration: none; } a:visited { color: #551a8b; text-decoration: none; } a:hover { color: purple; text-decoration: underline; } a:focus { outline: thin dotted; } /* Improve readability when focused and hovered in all browsers: h5bp.com/h */ a:hover, a:active { outline: 0; } /* ============================================================================= Font Style ========================================================================== */ p.normal { font-style: normal; } p.italic { font-style: italic; } p.oblique { font-style: oblique; } p.left { font-style: normal; font-size: 0.875rem; text-align: left; } p.center { font-style: normal; font-size: 0.875rem; text-align: center; } p.mid { font-style: normal; font-size: 0.75rem; text-align: center; align-content: center; align-items: center; } p.right { font-style: normal; font-size: 0.875rem; text-align: right; } h1 { text-align: center; font-size: 20px; color: white; background-color: #cc99ff; padding: 5px; } h2 { text-align: left; font-size: 18px; color: white; background-color: #cc99ff; padding: 5px; } h3 { text-align: left; font-size: 16px; color: white; background-color: #cc99ff; padding: 5px; } h4 { text-align: left; font-size: 16px; color: firebrick; padding: 5px; } h5 { text-align: center; font-size: 16px; color: #6610f2; padding: 5px; } h6 { font-size: 16px; color: #6610f2; padding: 5px; } h1:hover { color: blue; transition: all 500ms ease-in-out; } h2:hover { color: blue; transition: all 500ms ease-in-out; } h3:hover { color: blue; transition: all 500ms ease-in-out; } h4:hover { color: greenyellow; transition: all 500ms ease-in-out; } h5:hover { color: #e83e8c; transition: all 500ms ease-in-out; } h7:hover { color: blue; transition: all 500ms ease-in-out; } /* ============================================================================= Typography ========================================================================== */ abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } dfn { font-style: italic; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } /* Firebrick border */ hr.red { display: block; height: 1px; size: 1px; border: 0; border-top: 2px solid firebrick; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } /* Redeclare monospace font family: h5bp.com/j */ pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } /* Improve readability of pre-formatted text in all browsers */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before, q:after { content: ""; content: none; } small { font-size: 85%; } /* Position subscript and superscript content without affecting line-height: h5bp.com/k */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ============================================================================= Tables and paragraph ========================================================================== */ table { width: 100%; padding: 0; border-collapse: collapse; border-spacing: 0; border: 0; cellpadding: 5px; cellspacing: 0; } td { align-content: center; vertical-align: top; padding: 5px; text-align: center; } td.left { align-content: left; vertical-align: top; padding: 5px; } td.right { align-content: right; vertical-align: top; padding: 5px; } td.left-width { align-content: left; width: 24%; vertical-align: top; text-align: justify; padding: 1px; } td.right-width { align-content: right; width: 24%; vertical-align: top; text-align: justify; padding: 1px; } /* ============================================================================= Lists ========================================================================== */ ul, ol { margin: 1em 0; padding: 0 0 0 40px; } dd { margin: 0 0 0 40px; } nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } /* ============================================================================= Embedded content ========================================================================== */ /* * 1. Improve image quality when scaled in IE7: h5bp.com/d * 2. Remove the gap between images and borders on image containers: h5bp.com/i/440 */ img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; border-top-right-radius: 10px; border-top-left-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } /* * Correct overflow not hidden in IE9 */ svg:not(:root) { overflow: hidden; } /* ============================================================================= Division ========================================================================== */ div#captioned-gallery { width: 100%; overflow: hidden; } /* ============================================================================= Images ========================================================================== */ /* ============================================================================= Figures elements effectively take the place of the images in the original slider, as shown in the CSS (sans vendor prefixes to save space) ========================================================================== */ figure { margin: 0; } figure.slider { position: relative; width: 500%; font-size: 0; animation: 40s slidy infinite; } figure.slider figure { width: 20%; height: auto; display: inline-block; position: inherit; } figure.slider img { width: 100%; height: auto; } figure.slider figure figcaption { position: absolute; bottom: 0; background: padding-box; color: #fff; width: 80%; font-size: 2rem; padding: .6rem; transition: .5s bottom; } figure.slider figure:hover figcaption { bottom: 0; } figure.slider figure:hover + figure figcaption { bottom: 0; } /* ============================================================================= Forms ========================================================================== */ form { margin: 0; } fieldset { border: 0; margin: 0; padding: 0; } /* Indicate that 'label' will shift focus to the associated form element */ label { cursor: pointer; } /* * 1. Correct color not inheriting in IE6/7/8/9 * 2. Correct alignment displayed oddly in IE6/7 */ legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; } /* * 1. Correct font-size not inheriting in all browsers * 2. Remove margins in FF3/4 S5 Chrome * 3. Define consistent vertical alignment display in all browsers */ button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } /* * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet) */ button, input { line-height: normal; } /* * 1. Display hand cursor for clickable form elements * 2. Allow styling of clickable form elements in iOS * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6) */ button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } /* * Re-set default cursor for disabled elements */ button[disabled], input[disabled] { cursor: default; } /* * Consistent box sizing and appearance */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } /* * Remove inner padding and border in FF3/4: h5bp.com/l */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* * 1. Remove default vertical scrollbar in IE6/7/8/9 * 2. Allow only vertical resizing */ textarea { overflow: auto; vertical-align: top; resize: vertical; } /* Colors for form validity */ input:valid, textarea:valid { } input:invalid, textarea:invalid { background-color: #f0dddd; } /* ============================================================================= Rounded corner element and image ========================================================================== */ #rcorners1 { border-radius: 10px; background: #FF7900; padding: 10px; width: 200px; height: 100px; } #rcorners2 { border-radius: 10px; border: 2px solid #FF7900; padding: 10px; width: 200px; height: 100px; } #rcorners3 { border-radius: 10px; background-image: image(); background-position: center; background-repeat: repeat; padding: 10px; width: 200px; height: 100px; } /* ============================================================================= Specific layout ========================================================================== */ /* Style the navbar */ #navbar {text-align:justify; align-content: center; overflow: hidden; background-color: white; } /* Navbar links */ #navbar a {float: center; display:inline; text-align: center; padding: inherit; text-decoration: none; } #responsive-width img { width: 100%; height: auto; } #block-img img { display: block; } #main { column-width: 12em; align-content: center; column-gap: 2em; } #sub1 { column-count: 4; align-content: center; text-align: center; column-gap: 2em; padding: 5px; } #sub2 { column-count: 4; align-content: center; text-align: center; column-gap: 2em; padding: 5px; } #sub3 { column-count: 4; align-content: center; text-align: center; column-gap: 2em; padding: 5px; } #sub4 { column-count: 4; align-content: center; text-align: center; column-gap: 2em; padding: 5px; } #sub5 { column-count: 4; align-content: center; text-align: center; column-gap: 2em; padding: 5px; } #sub6 { column-count: 4; align-content: center; text-align: center; column-gap: 2em; padding: 5px; } #sub7 { column-count: 4; align-content: center; text-align: center; column-gap: 2em; padding: 5px; } #sub8 { column-count: 4; align-content: center; text-align: center; column-gap: 2em; padding: 5px; } #sub9 { column-count: 4; align-content: center; text-align: center; column-gap: 2em; padding: 5px; } #sub10 { column-count: 4; align-content: center; text-align: center; column-gap: 2em; padding: 5px; } #sub11 { column-count: 4; align-content: center; text-align: center; column-gap: 2em; padding: 5px; } #sub12 { column-count: 4; align-content: center; text-align: center; column-gap: 2em; padding: 5px; } #sub13 { column-count: 4; align-content: center; text-align: center; column-gap: 2em; padding: 5px; } #sub14 { column-count: 4; align-content: center; text-align: center; column-gap: 2em; padding: 5px; } #sub15 { column-count: 4; align-content: center; text-align: center; column-gap: 2em; padding: 5px; } #centerP { text-align: center; padding: 0px; } #centerT { text-align: center; padding: 10px; } #centerB { text-align: center; padding: 0px; } #left { float: left; width: 300px; } #right { float: right; width: 700px; } #footer { clear: both; text-align: center; padding: 5px; } #center1 { text-align: center; padding: 0px; } #center2 { text-align: center; padding: 0px; } #center3 { text-align: center; padding: 0px; } #center4 { text-align: center; padding: 0px; } #center5 { text-align: center; padding: 0px; } #center6 { text-align: center; padding: 0px; } #center7 { text-align: center; padding: 0px; } #center8 { text-align: center; padding: 0px; } #center9 { text-align: center; padding: 0px; } /* ============================================================================= Kool Links Dropdown layout ========================================================================== */ /* Style the koolinks navbar */ /* Address ===================================================== Contact Information: ========================================================================== */ a[href^="mailto"]::before { content: "Email: "; } a[href^="tel"]::before { content: "Tel: "; } /* ============================================================================= Chrome Frame Prompt ========================================================================== */ .chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; } /* ==|== primary styles ===================================================== Vertical Divider: ========================================================================== */ /* ==|== primary styles ===================================================== Class: ========================================================================== */ .squareAd {align-items: center; width: 300px; height: auto; padding-right: 5px; } .center-me { margin: auto; } .container { justify-content: center; } .center { float: center; padding: 5px; } .leftDiv { float: left; } .rightDiv { float: right; } .justify { text-align: justify; } .content-box { column-width: auto; } .content-box22 { column-width: 22%; } .content-box25 { column-width: 25%; } .content-box75 { column-width: 75%; } .round { -ms-border-radius: 10px; /* Microsoft */ -moz-border-radius: 10px; /* Mozilla */ -webkit-border-radius: 10px; /* Safari and Chrome */ border-radius: 10px; /* W3C */ } .floatR {float: right; } .floatL {float: left; } .floatC {float: center; } .vl {border-left: solid #ccc; height: 768px; } /* Left vertical line */ .vr {border-right: solid #ccc; height: 768px; } /* Right vertical line */ .header {padding: 10px 16px; } /* Style the header */ .content {padding: 12px; } /* Page content */ .sticky {position: fixed; top: 0; width: 100%; align-content: center; } /* The sticky class is added to the header with JS when it reaches its scroll position */ .sticky + .content {padding-top: 50px; } /* Add some top padding to the page content to prevent sudden quick moment (as the header gets a new position at the top of the page (position:fixed and top:0)) */ /* ==|== non-semantic helper classes ======================================== Please define your styles before this section. ========================================================================== */ /* For image replacement */ .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; } .ir br { display: none; } /* Hide from both screenreaders and browsers: h5bp.com/u */ .hidden { display: none !important; visibility: hidden; } /* Hide only visually, but have it available for screenreaders: h5bp.com/v */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* Contain floats: h5bp.com/q */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* ==|== print styles ======================================================= Print styles. Inlined to avoid required HTTP connection: h5bp.com/r ========================================================================== */ @media print { * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */ a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* h5bp.com/t */ tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } .tagme { font-family: Constantia, Lucida Bright, DejaVu Serif, Georgia, serif; size:inherit; }