@charset "UTF-8"; /* CSS Document for Bard 2023 Template*/ /* ----------- Helper Classes ---------- */ .hideForMobile, .hideForTablet { display: none; } /* --------------- GLOBAL STYLES --------------- */ html { } body { margin: 0px; padding: 0px; font-family: "Work Sans", Arial, sans-serif; font-size: 16px; line-height: 24px; color: #222222; font-weight: 400; } body a:link, a:visited { color:#c11c1c; text-decoration: underline; } body a:hover, a:active { color:#c11c1c; text-decoration: underline; } /* Headers */ h1 { font-family: "Work Sans", Arial, sans-serif !important; font-weight: 700; color:#222222; margin: 10px 0px 20px 0px; padding: 0px; display: block; font-size: 2.8em; line-height: 38px; text-transform: none; } h1.pagetitle { font-family: "Work Sans", Arial, sans-serif !important; font-weight: 700; color: #222222; font-size: 2.8em; line-height: 40px; margin: 70px 0px 10px 0px; z-index: 2000; } h1.pagetitle a:link, h1.pagetitle a:visited { color:#222222;text-decoration: none; } h1.pagetitle a:hover, h1.pagetitle a:active { color:#222222;text-decoration: underline; } h2 { font-family: "Work Sans", Arial, sans-serif !important; color:#222222; margin: 20px 0px 5px 0px; display: block; font-size: 2.0em; font-weight: 700; line-height: 1em;} /* Titles */ .subtitle { font-family: "Work Sans", Arial, sans-serif;color:#222222; margin: 10px 0px 5px 0px; padding: 0px; font-size: 1.4em; font-weight: 700; } iframe>.subtitle { font-family: "Work Sans", Arial, sans-serif;color:#222222; margin: 10px 0px 5px 0px; padding: 0px; font-size: 1.4em; font-weight: 700; } .pagetitle { font-family: "Work Sans", Arial, sans-serif; font-weight: 700; color: #222222; font-size: 2.8em; line-height: 40px; margin: 100px auto 0px auto; z-index: 2000; display: block; height: 40px; max-width: 1000px; } .linktitle {font-family: "Work Sans", Arial, sans-serif;} /* Font Styles */ p { font-size: 1em; line-height: 24px; display: block; } b, strong { font-weight: 700 !important; } .bodytext { margin: 0px; padding: 0px; font-family: "Work Sans", Arial, sans-serif; font-size: 16px; line-height: 24px; color: #222222; } .caption { position: relative; display: block; font-size: .8em; line-height: 1.3em; color: #222222; margin: 5px auto; width: 100%; text-align: center; clear: both; font-style: italic; } .timezone { position:relative; font-size:.9em; color:#333; font-style:italic; } ul { padding: 5px 5px 5px 20px; } .footnote { position: relative; display:block; width:85%; margin: 10px auto; padding: 10px 0; font-size: 0.8em; font-style: italic; color: #666666; border-top: 1px solid #222222; } /* Structure and Support Styles */ .imgshell img { width: 100%; height: auto; margin: 0px; padding: 0px; } iframe {border: none; width: 100%; height: 100%;} .icons { font-family: "Modern Pics", sans-serif; color: #FFFFFF; margin: 0px 2px 0px 15px; text-align: center; } .expandblock { position: relative; width: auto; } .expandblock ul li { margin: 0px; padding: 0px;} .hrule { width: 90%; border-top: 1px solid #666666; padding: 0; margin: 10px auto; } .hidden {display:none;} .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;} .red { color: #c11c1c; display: inline; font-size: inherit; line-height: inherit; padding: inherit; margin: inherit; } /* reset styles */ .clearout { clear: both; line-height: 1px; } /* styles for skip to main content */ .skip { display: block; padding: 5px 25px 5px 25px; position: absolute; top: -100px; left: 0px; color: #FFFFFF; border: 1px solid #DDD; background: #a11a1f; transition: top 1s ease-out; z-index: 1000;} .skip:focus { position: absolute; left: 0px; top: 0px; width: auto; height: auto; outline: 0; transition: top .1s ease-in;} a.skip, a.skip:link, a.skip:visited, a.skip:active, a.skip:hover { color: #FFFFFF; text-decoration: none; outline: 0;} /* CMS Styles */ .cms-subtitle1 { font-family: "Work Sans", Arial, sans-serif !important; color:#222222; margin: 20px 0px 5px 0px; padding: 0px; font-size: 1.5em; font-weight: 700; } .cms-subtitle2 { font-family: "Work Sans", Arial, sans-serif; color:#222222; margin: 15px 0px 0px 0px; padding: 0px; font-size: 1.25em; font-weight: 700; } .cms-subtitle3 { font-family: "Work Sans", Arial, sans-serif !important; color:#222222; margin: 15px 0px 0px 0px; padding: 0px; font-size: 1.25em; font-weight: 700; } .cms-caption { color:#666666; margin: 5px 0px; padding: 0px; font-size: 0.8em;} .cms-button { display: inline-block; width: auto; height: auto; margin: 5px 5px 5px 0; padding: 0; background: #000000; color: #FFFFFF; font-family: "Work Sans", Arial, sans-serif; font-weight: 400; transition: 0.8s ease;} .cms-button a { color: #FFFFFF; text-decoration: none; } .cms-button a:link, .cms-button a:visited { color: #FFFFFF; text-decoration: none; padding: 8px 10px; } .cms-button a:hover, .cms-button a:active { color: #FFFFFF; text-decoration: underline; padding: 8px 10px; opacity: 1 } a .cms-button { font-size: 1.0em; font-weight: 400; line-height: 0.5em; display: inline-block; width: auto !important; height: auto; margin: 0px 10px; padding: 10px; color: #FFFFFF; background: #c11c1c; text-decoration: none;font-family: "Work Sans", Arial, sans-serif; white-space: nowrap; } .cms-button { font-size:1.0em; font-weight: 400; line-height: 1.0em; display: inline-block; width: auto !important; height: auto; margin: 0 20px 20px 0; padding: 0px; color: #FFF; background: #000000; border-radius: 0px; font-family: "Work Sans", "Source Sans Pro", "SourceSans", Arial, sans-serif !important; white-space: nowrap; text-transform:none; letter-spacing: 0px; } .cms-button a { color: #FFF; text-decoration: none; } .cms-button a:link, .cms-button a:visited { color: #FFF; text-decoration: none; background:#000000; padding: 8px 10px; transition: 0.8s ease;} .cms-button a:hover, .cms-button a:active { color: #FFF; text-decoration: none; background: #f70707; padding: 8px 10px; opacity: 1; } a .cms-button { font-size:1.0em; font-weight: 400; line-height: 1.0em; display: inline-block; width: auto !important; height: auto; margin: 0 20px 0 0; padding: 0px; color: #FFF; background: #000000; border-radius: 0px; font-family: "Work Sans", "Source Sans Pro", "SourceSans", Arial, sans-serif !important; white-space: nowrap; text-transform:none; letter-spacing: 0px; } a:link .cms-button, a:visited .cms-button { color: #FFF; text-decoration: none; background:#000000; padding: 8px 10px; transition: 0.8s ease;} a:hover .cms-button, a:active .cms-button { color: #FFF; text-decoration: none; background: #f70707; padding: 8px 10px; opacity: 1; } /* button styles */ .ctabutton { display: inline-block; width: auto; height: auto; margin: 0 20px 20px 0; padding: 0px; background: #000000; border: none; border-radius: 0; color: #FFF; font-family: "Work Sans", "Source Sans Pro", "SourceSans", Arial, sans-serif !important; white-space: nowrap; font-size:1.0em; line-height: 1.0em; text-transform:none !important; letter-spacing: 0px !important; font-weight: 400;} .ctabutton a:link, .ctabutton a:visited { color: #FFF; text-decoration: none; background:#000000; padding: 8px 10px; transition: 0.8s ease; } .ctabutton a:hover, .ctabutton a:active { color: #FFF; text-decoration: none; background: #f70707; padding: 8px 10px; opacity: 1; } /* modal button styles */ button.modal-open { font-size: 1.0em; display: inline-block; width: auto; height: auto; margin: 0px; padding: 0px; background: #000000; border: none; border-radius: 0; color: #FFF; font-family: "Work Sans", "Source Sans Pro", "SourceSans", Arial, sans-serif !important; white-space: normal; line-height: 1.0em; text-transform:none !important; text-align: left;letter-spacing: 0px !important; font-weight: 400;} button.modal-open:link, button.modal-open:visited { color: #FFF; text-decoration: none; background:#000000; padding: 8px 10px; transition: 0.8s ease;} button.modal-open:hover, button.modal-open:active { color: #FFF; text-decoration: none; background: #f70707; padding: 8px 10px; opacity: 1;} /* modal button styles */ .ctabutton>button.modal-open { display: inline-block; width: auto; height: auto; margin: 0 ; padding: 0px; background: #000000; border: none; border-radius: 0; color: #FFF; font-family: "Work Sans", "Source Sans Pro", "SourceSans", Arial, sans-serif !important; font-size: 1.0em; line-height: 1.0em; text-transform:none !important; letter-spacing: 0px !important; font-weight: 400;} .ctabutton>button.modal-open { color: #FFF; text-decoration: none; background: #000000; padding: 8px 10px; transition: 0.8s ease; } .ctabutton>button.modal-open:hover, .ctabutton>button.modal-open:active { color: #FFF; text-decoration: none; background: #f70707; padding: 8px 10px; opacity: 1;} button.modal-open {text-align: left;} /* Kipsu ResLife/Admission Chat Add On */ #kipsu-chat-button {background: #c11c1c !important;border: none;border-radius: 0px !important;color: #FFF !important;position: fixed;cursor: pointer;height: 50px;z-index: 800;bottom: 0px !important;font-family: "Source Sans Pro", "SourceSans", sans-serif !important;right: 15px;text-align: center;font-weight: 600;font-size: 14px;line-height: 36px;padding: 0 20px;display: inline-block;user-select: none;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;vertical-align: middle;white-space: normal;} /* Fix for Anchor Links in Bard Template */ /*a[id]:not([href])::before { content: ''; display: block;height: 100px; margin-top: -100px; visibility: hidden;}*/ /* Fix for Anchor Links Class in Bard Template */ /*a.anchor {display: block;height: 100px; margin-top: -100px; visibility: hidden; clear:both;}*/ /* Symantic Table Styles */ table {width: 100%; margin:0;} td {padding: 1%; } /* CSS Tables */ .table {position:relative;display:flex;flex-wrap: wrap; width:90%;margin:5px auto;} .table .tr {position:relative;display:flex;flex-flow: row wrap;width: 100%; text-align:left;padding:0%; } .table .td {position:relative;flex: 1; width: auto;vertical-align: top;text-align:left;padding:1%;margin: 1%; } .table .row-break { flex-basis: 100%;width: 0px; height: 0px; overflow: hidden;} .table>.td>.content {position:relative;width:80%; margin: 0; padding: 0 10%; display:block;vertical-align: top; } .trborder {position:relative;display:flex;flex-flow: row wrap;width: 100%; text-align:left;padding:0%; height: 1px; border-bottom: 1px solid #222222; } /* Alt CSS for Tables */ .csstable { display: table; width:90%; margin: 5px auto; } .csstable .csscell { display: table-cell; padding: 1%; width: auto !important; } /* Width Classes For Columns and Tables */ .width5 { position: relative; width:4%; padding: 0.5%;} .width10 { position: relative; width:9% !important; padding: 0.5% !important; margin: 0 !important; } .width15 { position: relative; width:14%; padding: 0.5%; } .width20 { position: relative; width:19%; padding: 0.5%; } .width25 { position: relative; width:24%; padding: 0.5%; } .width30 { position: relative; width:29%; padding: 0.5%; } .width50 { position: relative; width:49%; padding: 0.5%; } .width60 { position: relative; width:99%; padding: 0.5%; } .width70 { position: relative; width:70%; padding: 0.5%; } .width75 { position: relative; width:74%; padding: 0.5%; } .width80 { position: relative; width:79%; padding: 0.5%; } .width90 { position: relative; width:89% !important; padding: 0.5% !important; margin: 0 !important;} .width100 { position: relative; width:99% !important; padding: 0.5% !important; } /* ------------------------ Main Template Styles --------------------- */ #supershell { position: relative; margin: 0px; padding: 0px; width: 100%; display: block; } #supershell>img { position: relative; width: 50%; min-width: 1000px; height: auto;} header.fixed {position: fixed; width: 100%; top: 0px; z-index: 10000;} /* ------- Header Changes for Emergency Ribbon at Top ------- header.fixed {position: fixed; width: 100%; top: 34px; z-index: 9900;} .emergencies {position:fixed; top: 0px; left: 0; width: 100%; margin: 0; padding: 0px; z-index:2000; height: 35px;} .emergencies .emerbutton {position:relative; width: auto; margin: 0 auto; padding: 5px 15px; background: #c11c1c; font-size: 0.9em; text-align: center;} .emergencies .emerbutton a:link, .emergencies a:visited { color: #FFFFFF;text-transform:uppercase; text-decoration: none;} .emergencies .emerbutton a:active, .emergencies a:hover { color: #FFFFFF;text-transform:uppercase; text-decoration: underline;}*/ header .topnav { width: 100%; height: 25px; background: #222222; text-align: right; margin: 0; padding: 0;} header .topnav .toplinks { width: 100%; max-width: 1170px; height: 25px; background: #222222; color: #CCCCCC; text-align: right; margin: 0; padding: 5px 0; font-size: 0.8em; } header .topnav .toplinks a:link, header .topnav .toplinks a:visited { color: #CCCCCC; text-decoration: none;} header .topnav .toplinks a:active, header .topnav .toplinks a:hover { color: #FFFFFF; text-decoration: underline;} main { position:relative; width: 100%; top: 0px; margin: 0px auto 0px auto; padding: 0px; overflow:hidden; display: block; } main #maintext { position:relative; display:block; width: 100%; background: #FFFFFF; margin: 0px auto; padding: 0px 0px 40px 0px; top: 0px; } main #maintext>.content { position: relative; padding: 0px; margin: 0 auto; width:100%; display: block; } /* Intro Styles */ #introshell { position: relative; width: 100%; height: auto; min-height: 0px; overflow: hidden; z-index: 900; margin: 70px 0 0 0; padding: 0; } /* CMS Background Colors */ #introshell.bgwhite { background: #FFF !important; min-height: 500px;} #introshell.bgwhite .introtype { max-width: 1000px; margin: 20px auto 20px auto; padding: 0;} #introshell.bgwhite>.introtype>.subtitle { color: #222; font-size: 1.43em; line-height: 2.0em; font-weight: 400; } #introshell.bgwhite .words, #introshell.bgwhite>.content>.words>.padding>h2{ color: #222; } #introshell.bgwhite>.content>.words>.multibuttons>ul>li {background: #FFF !important;} #introshell.bglight { background: #918986 !important; min-height: 500px;} #introshell.bglight .introtype { max-width: 1000px; margin: 20px auto 20px auto; padding: 0;} #introshell.bglight>.introtype>.subtitle { color: #222; font-size: 1.43em; line-height: 2.0em; font-weight: 400; } #introshell.bglight .words, #introshell.bglight>.content>.words>.padding>h2{ color: #222; } #introshell.bglight>.content>.words>.multibuttons>ul>li {background: #918986 !important;} #introshell.bgmedium { background: #364c59 !important; min-height: 500px;} #introshell.bgmedium .introtype { max-width: 1000px; margin: 20px auto 20px auto; padding: 0;} #introshell.bgmedium h1.pagetitle {color: #FFF; font-weight: 600;} #introshell.bgmedium>.introtype>.subtitle { color: #FFF; font-weight: 400; line-height: 2.0em;} #introshell.bgmedium>.introtype>.subtitle>.cms-subtitle1 { color: #8a9ca6; font-size: 1.43em; line-height: 2.0em; } #introshell.bgmedium>.introtype>.subtitle>.cms-subtitle2 { color: #8a9ca6; line-height: 2.0em; } #introshell.bgmedium .words, #introshell.bgmedium>.content>.words>.padding>h2{ color: #FFF; } #introshell.bgmedium>.content>.words>.multibuttons>ul>li {background: #364c59 !important; color: #FFF; } #introshell.bgmedium>.content>.words>.multibuttons>ul>li>.multitext, #introshell.bgmedium>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {color: #FFF; } #introshell.bgdark { background: #222 !important; min-height: 500px;} #introshell.bgdark .introtype { max-width: 1000px; margin: 20px auto 20px auto; padding: 0;} #introshell.bgdark .introtype h1.pagetitle {color: #FFF; font-weight: 600; } #introshell.bgdark>.introtype>.subtitle { font-family: "Work Sans", Arial, sans-serif; color: #FFF; font-size: 1.43em; line-height: 2.0em; font-weight: 400; } #introshell.bgdark>.introtype>.subtitle>.cms-subtitle1 { color: #898b8d; font-size: 1.43em; line-height: 2.0em; } #introshell.bgdarl>.introtype>.subtitle>.cms-subtitle2 { color: #898b8d; line-height: 2.0em; } #introshell.bgdark>.content>.words { background: #222 !important;} #introshell.bgdark>.content>.words, #introshell.bgdark>.content>.words>.padding>h2{ color: #FFF; } #introshell.bgdark>.content>.words a, #introshell.bgdark>.content>.words>.padding a { color: #FFF; } #introshell.bgdark>.content>.words>.multibuttons>ul>li {background: #364c59 !important; color: #FFF; } #introshell.bgdark>.content>.words>.multibuttons>ul>li>.multitext, #introshell.bgdark>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {color: #FFF; } #introshell.bgbright { background: #685569 !important; min-height: 500px;} #introshell.bgbright .introtype { max-width: 1000px; margin: 20px auto 20px auto; padding: 0;} #introshell.bgbright .introtype h1.pagetitle {color: #FFF; font-weight: 600; } #introshell.bgbright>.introtype>.subtitle { font-family: "Work Sans", Arial, sans-serif; color: #FFF; font-size: 1.43em; line-height: 2.0em; font-weight: 400; } #introshell.bgbright>.introtype>.subtitle>.cms-subtitle1 { color: #ab9eac; font-size: 1.43em; line-height: 2.0em; } #introshell.bgbright>.introtype>.subtitle>.cms-subtitle2 { color: #ab9eac; line-height: 2.0em; } #introshell.bgbright .words, #introshell.bgbright>.content>.words>.padding>h2{ color: #FFF; } #introshell.bgbright>.content>.words>.multibuttons>ul>li {background: #685569 !important; color: #FFF; } #introshell.bgbright>.content>.words>.multibuttons>ul>li>.multitext, #introshell.bgbright>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {color: #FFF; } #introshell .introtype { position:relative; text-align: left; width: 100%; max-width: 1000px; margin: 20px auto 0 auto; padding: 0;} #introshell>#title {margin: 25px auto; padding: 10px 0; max-width: 1200px; } #introshell>#title>h1.pagetitle {padding: 0px; margin: 70px auto 0px auto; text-transform: none; text-align: left; color: #222222;font-weight: 700; } #introshell>.sitetitle { position: absolute; top: 10px; left: 5%; width: auto; max-width: 1200px; height: auto !important;overflow: hidden; float: none; margin: 2px auto; padding: 0px; z-index: 1001; } #introshell>.sitetitle>.sitelogo { position: relative; top: 0; margin: 0px; padding: 0; height: auto; width: auto !important; display: block; max-width: 35%;font-family: "Work Sans", Arial, sans-serif; color:#FFFFFF; font-weight: lighter; font-size: 1.5em; line-height: 1em; background:url(https://www.bard.edu/images/tints/80black.png) repeat; overflow: hidden; } #introshell>.sitetitle>.sitelogo img { margin: 0px; padding: 0px; z-index: 1001; height: auto; width: 100%; } #introshell>.sitetitle .pagetitle img { margin: 0px 10px; padding: 0px; } #introshell>.sitetitle .pagetitle { font-family: "Work Sans", Arial, sans-serif; color:#FFFFFF; margin: 0px 0px 0px 0px; padding: 10px; width: auto !important; display: inline-block; font-weight: lighter; font-size: 1.5em; line-height: 1em; background:#c11c1c; z-index: 1001; height: auto; } #introshell .image { position: relative; width: 100%; height: 450px; background: #222222; z-index: 1000; padding: 0; margin: 0 auto; max-height: 550px; min-height: 0px; overflow: hidden; } #introshell .image img { width: 100%; height: auto !important; padding: 0; margin: 0; } #introshell .image .introbox { position: absolute; right: 20%; bottom: 0%; width: 60%; background: url(https://www.bard.edu/images/tints/80black.png) repeat; } #introshell .image .introbox h1 { position: relative; font-family: "Open Sans", Arial, sans-serif; font-weight: 600;text-transform: none; letter-spacing: 0px; color: #FFFFFF; font-size: 2.5em; line-height: 1em; text-align: left; padding: 0; z-index: 1001; margin: 20px 20px 30px 30px;} #introshell .image .introbox .subtitle { position: relative; font-family: "Open Sans", Arial, sans-serif; font-weight: 600;text-transform: none; letter-spacing: 0px; color: #FFFFFF; font-size: 1.1em; line-height: 1.5em; text-align: left; padding: 1% 0; z-index: 1001; margin: 0px 20px 20px 20px;} #introshell>.image .caption { position: absolute; bottom: 0%; right: 0%; font-family: "Open Sans", Arial, sans-serif; font-weight: 600; display: block; width: auto !important; color: #FFFFFF; text-align: center; margin: 0; padding: 1% 2%; font-style: normal; z-index: 1002; } #introshell>.image .caption a:link { color: #FFFFFF; } #introshell>.image .caption a:visited { color: #FFFFFF; } #introshell>.image .caption a:active { color: #FFFFFF; text-decoration: underline; } #introshell>.image .caption a:hover { color: #FFFFFF; text-decoration: underline; } .introbuttons { position: relative; width: 100%; height: auto !important; margin: 30px auto 0px auto; padding: 0; z-index: 100; } .introbuttons>.content { position: relative; width: 95%; max-width: 1200px; margin: 0px auto; align-items: center; text-align: center;} .introbuttons>.content>.buttons { position: relative; display: inline-block; white-space: normal; width: auto; height: auto !important; background: #c11c1c; padding: 0; margin-right: 20px; margin-bottom: 0px; color: #FFFFFF; line-height: 0.5em; font-weight: 600; align-items: center; } .introbuttons>.content>.buttons a:link, .introbuttons>.content>.buttons a:visited { color: #FFFFFF; text-decoration: none; background: #c11c1c; padding: 10px 12px; } .introbuttons>.content>.buttons a:active, .introbuttons>.content>.buttons a:hover { color: #FFFFFF; text-decoration: none; background: #c11c1c;padding: 12px 14px;} #introtext { position: relative; display: block; width: 90%; max-width: 1000px; margin: 0px; padding: 0px; } #introtext .ctabutton { width: auto; height: auto; margin: 10px auto 0 auto; padding: 10px 12px; background: #c11c1c; font-size: 1em; } #introtext button.modal-open { width: auto; height: auto; margin: 10px auto 0 auto; padding: 10px 12px; background: #c11c1c; font-size: 1em; } #introtext {position: relative; display: block; width: 80%; max-width: 80%; margin: 0px auto; padding: 0; font-size: 1.1em; line-height: 2em; text-align: center; font-weight: 600; } .intro {position: relative; width: 80%; line-height: 2.0em; margin: 0 auto; padding: 2% 3%;} /* 2023 Template Styles (alphabetic) */ /* Billboard */ .billboard { position: relative; display: block; width: 100%; height: auto !important; padding: 0; margin: 30px auto 0 auto; } .billboard .content { position: relative; width: 100%; display:block; } .billboard .content .caption { margin: 5px 0; width: 100%;} .billboard .content .imgcenter { position: relative; width: 80%; margin: 0 auto 0px auto; } .billboard .content .imgcenter img { width: 100%; height: auto; } .billboard .content .imgfull { width: 100%; margin: 0 auto; padding: 0; background: #FFFFFF; } .billboard .content .imgfull img { width: 100%; height: auto !important; padding: 0; margin: 0; } .billboard .content .imgright { width: 60%; margin: 0; padding: 0; background: #FFFFFF; float: right; display: inline; } .billboard .content .imgright img { width: 100%; height: auto !important; padding: 0; margin: 0; } .billboard .content .imgshell { width: 60%; margin: 0; padding: 0; background: #FFFFFF; float: left; } .billboard .content .imgshell img { width: 100%; height: auto !important; padding: 0; margin: 0; } .billboard .content .embcenter { position: relative; width: 80%; margin: 0 auto 30px auto; } .billboard .content .embcenter iframe { width: 100%; height: auto !important; min-height: 800px; padding: 0; margin: 0; } .billboard .content .embfull { position: relative; width: 100%; height: auto !important; overflow: visible; margin: 0 auto; padding: 0; background: #FFFFFF; } .billboard .content .embfull iframe { width: 100vw; height: calc(100vw/1.77); top: 0; left: 0; padding: 0; margin: 0; } .billboard .content .embright { width: 60%; margin: 0; padding: 0; background: #FFFFFF; float: right; display: inline; } .billboard .content .embright iframe { width: 100%; height: auto !important; padding: 0; margin: 0; } .billboard .content .embshell { width: 60%; margin: 0; padding: 0; background: #FFFFFF; float: left; } .billboard .content .embshell iframe { width: 100%; height: auto !important; padding: 0; margin: 0; } .billboard .content .embleft { width: 60%; margin: 0; padding: 0; background: #FFFFFF; float: left; } .billboard .content .embleft iframe { width: 100%; height: auto !important; padding: 0; margin: 0; } .billboard>.content>.words { position: absolute; top: 15%; width: 100%; height: auto; z-index: 1000; } .billboard>.content>.words>.padding { position: relative; text-align: right; width: 30%; margin: 0 auto; color: #FFFFFF; right: 5%; float: right;} .billboard>.content>.words>.padding>h2 { color: #FFFFFF; font-size: 3em; font-family: "Work Sans", Helvetica, sans-serif !important; text-shadow: 2px 2px 2px #000;} .billboard>.content>.words>.padding p { font-size: 1em; line-height: 1.5em; } .billboard img { width: 100%; height: auto !important; } .billboard .content .words .padding .cms-button { position: relative; display: inline-block; margin-bottom: 10px;} .billboard .multibuttons {align-content: center; align-items: center; margin-top: 20px; } .billboard .multibuttons ul, .billboard .multibuttons ul li, .billboard .multibuttons ul li .multitext {list-style: none; padding: 0; margin: 0 auto 5px auto; text-align: center; } .billboard .multibuttons ul {width: 30%; padding: 20px; border: 1px solid #222222; background:#FFFFFF;} .billboard .multibuttons ul li .multitext .linktitle { width: auto !important; max-width: 40%;height: auto; margin: 10px auto; padding: 7px; color: #FFFFFF; font-family: "Work Sans", Arial, sans-serif; white-space: nowrap; font-size:.75em; line-height: .5em; font-weight: 700; text-align: center;} .billboard .multibuttons ul li .multitext .linktitle a:link, .billboard .multibuttons ul li .multitext .linktitle a:visited { color: #FFFFFF; text-decoration: none; background: #c11c1c; padding: 5px 10px; } .billboard .multibuttons ul li .multitext .linktitle a:hover, .billboard .multibuttons ul li .multitext .linktitle a:active { color: #FFFFFF; text-decoration: underline;background: #c11c1c; padding: 5px 10px; } .billboard .multibuttons ul li .multitext .ctabutton>button.modal-open { margin: 0; padding: 0; line-height: 0.8em; } /* Biography/Text */ .biography { position: relative; width: 100%; height: auto; margin: 50px auto; padding: 0px; display: block; min-height: 200px; } /* CMS Background Colors */ .biography.bgwhite { background: #FFF !important;} .biography.bgwhite .words, .biography.bgwhite>.content>.words>.padding>h2{ color: #222; } .biography.bgwhite>.content>.words>.multibuttons>ul>li {background: #FFF !important;} .biography.bglight { background: #918986 !important;} .biography.bglight .words, .biography.bglight>.content>.words>.padding>h2{ color: #222; } .biography.bglight>.content>.words>.multibuttons>ul>li {background: #918986 !important;} .biography.bgmedium { background: #465449 !important;} .biography.bgmedium .words, .biography.bgmedium>.content>.words>.padding>h2{ color: #FFF; } .biography.bgmedium>.content>.words>.multibuttons>ul>li {background: #465449 !important; color: #FFF; } .biography.bgmedium>.content>.words>.multibuttons>ul>li>.multitext, .biography.bgmedium>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {color: #FFF; } .biography.bgdark { background: #364c59 !important;} .biography.bgdark .words, .biography.bgdark>.content>.words>.padding>h2{ color: #FFF; } .biography.bgdark>.content>.words>.multibuttons>ul>li {background: #364c59 !important; color: #FFF; } .biography.bgdark>.content>.words>.multibuttons>ul>li>.multitext, .biography.bgdark>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {color: #FFF; } .biography.bgbright { background: #685569 !important;} .biography.bgbright .words, .biography.bgbright>.content>.words>.padding>h2{ color: #FFF; } .biography.bgbright>.content>.words>.multibuttons>ul>li {background: #685569 !important; color: #FFF; } .biography.bgbright>.content>.words>.multibuttons>ul>li>.multitext, .biography.bgbright>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {color: #FFF; } .biography .content { width: 100%; max-width: 1000px; margin: 0px auto;} .biography>.content>.imgleft { position: relative; display:inline; float: left; width: 30%; height: auto !important; overflow: hidden; margin: 0px 30px 0px 0px; z-index: 5;} .biography>.content>.imgshell { position: relative; display:inline; float: left; width: 30%; height: auto !important; overflow: hidden; margin: 0px 30px 0px 0px; z-index: 5;} .biography>.content>.imgleft img, .biography>.content>.imgshell img { width: 100%; height: auto; margin: 0px 30px 0px 0px;} .biography>.content>.imgright { position: relative; display:inline; float: right; width: 30%; height: auto !important; overflow: hidden; margin: 0px 0px 0px 30px; z-index: 5; } .biography>.content>.imgright img { width: 100%; height: auto; margin: 0px 0px 0px 10px;} .biography>.content>.imgcenter { position: relative; display:inline; float: left; width: 20%; overflow: hidden; margin: 0px auto; z-index: 5; } .biography>.content>.imgfull img { width: 100%; height: auto; margin: 0px 0px 0px 0px;} .biography>.content>.imgfull { position: relative; display:inline; float: left; width: 30%; overflow: hidden; margin: 0px auto; z-index: 5; } .biography>.content>.imgcenter img { width: 100%; height: auto; margin: 0px 0px 0px 0px;} .biography .content .embcenter { position: relative; width: 80%; margin: 0 auto 0px auto; } .biography .content .embcenter iframe { width: 100%; height: auto !important; min-height: 600px; padding: 0; margin: 0; } .biography .content .embfull { width: 100%; margin: 0 auto; padding: 0; background: #222222; } .biography .content .embfull iframe { width: 100%; height: auto !important; min-height: 600px; padding: 0; margin: 0; } .biography .content .embright { width: 30%; margin: 0px 0px 0px 30px; padding: 0; background: #FFFFFF; float: right; display: inline; } .biography .content .embright iframe { width: 100%; height: 100%; padding: 0; margin: 0; min-height: 180px;} .biography .content .embshell { position: relative; width: 30%; display: inline; margin: 0px 30px 0px 0px; padding: 0; background: #FFFFFF; float: left; z-index: 1100;} .biography .content .embshell iframe { width: 100%; height: 100%; padding: 0; min-height: 180px; margin: 0; z-index: 1100;} .biography .content .embleft { width: 30%; margin: 0; padding: 0; background: #FFFFFF; float: left; } .biography .content .embleft iframe { width: 100%; height: 100%; padding: 0; margin: 0px 30px 0px 0px; min-height: 180px; } .biography>.content>.words { position: relative; display: inline; width: 100%; padding: 0; margin: 0px; vertical-align: top; line-height: 30px; text-align: left; background: #ededed; z-index: 499;} .biography>.content>.words>.padding { margin: 0; padding: 0; z-index: 499; } .biography>.content>.words>.padding>h2 { font-weight: 700; font-size: 1.3em; padding:0; margin:0; line-height:1em;} .biography>.content>.words>.padding>.subtitle { color: #222222; font-size: 1.15em; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #999; z-index: 499;} .biography>.content>.words>.multibuttons { margin: 0 20%; padding: 0%; background: #FFFFFF;} .biography>.content>.words>.multibuttons .linktitle { font-family: "Work Sans", Arial, sans-serif;position: relative; margin: 5px; padding: 0px 15px; width: auto; background: #c11c1c; display: inline-block; line-height: 25px;} .biography>.content>.words>.multibuttons .linktitle a { color: #FFFFFF; text-decoration: none;font-size: 1em; line-height: 0em; text-align: center; float: none;} .biography>.content>.words>.multibuttons>ul { margin: 0; padding: 0; list-style: none;} .biography>.content>.words>.multibuttons>ul>li { margin: 0; padding: 2px; float:none;list-style: none;} .biography>.content>.words>.multibuttons>ul>li>.multimgshell {width:10%;margin:0;padding:0;} .biography>.content>.words>.multibuttons>ul>li>.multitext {width:80%;margin:0;padding:0;} .biography>.content>.words>.multibuttons>ul>li>.multimgshell>img { height:25px;width:auto; } .biography>.content>.words p { line-height: 32px;} .biography>.content>.words { padding: 0px; margin: 0px; } .biography>.content>.words>.padding>.ctabutton>button.modal-open { font-size: 1em; line-height: 0.5em; margin: 0px; padding: 0; text-align: center; width: auto; color: #FFFFFF; float: none;} .biography>.content>.words>.padding>.ctabutton>button.modal-open>a:hover, .biography>.content>.words>.padding>.ctabutton>button.modal-open>a:active { text-decoration: underline; } .biography .content .embedshell { position: relative; display:inline; float: left; width: 25%; min-width: 0%; height: auto; overflow: hidden; margin: 10px 30px 0px 0px; } .biography .content .embedshell iframe { width: auto; height: auto; } .biography .textlinks { display: block; max-width: 100%; float: left;min-width: 0%; min-height: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 10px 0px; } .biography .textlinks .content { width: 100%; min-height: 100px; padding: 0px; margin: 0px 0px 0px 10px; border-right: 1px solid #CCCCCC; } .biography .textlinks ul { margin: 0px 0px 0px 20px; } .biography.expandblock { min-height: 0px; } .biography .content .imgright .ctabutton { position: absolute; bottom: 10px; right: 10px; } /* Bottom Buttons */ #bottombuttons>h2 { font-size: 1.3em; font-weight: 700; } #bottombuttons { position: relative; width: 90%; height: auto !important; overflow: visible; padding: 2% 5% 5% 5%; margin: 0px auto; display: block;background: #ededed; min-height: 200px; } #bottombuttons .bbtext { position: relative; margin: 0 auto; width: auto !important; } #bottombuttons .bbembed { position: relative; float: left; display: inline-block; margin: 0 30px;width: auto !important; min-width: 0px;} #bottombuttons .buttons { display: block; width: 100%; height: auto !important; overflow: visible; margin: 20px 0 0 0; padding: 0px; font-size: 1em; font-weight: 600; } #bottombuttons .buttons ul { width: 100%; display: block; height: auto !important; overflow: visible; list-style: none; float: none; margin: 20px auto 0 auto; padding: 0px; } #bottombuttons .buttons li { list-style: none; display: inline-block; color:#222222; background-color: #FFFFFF; margin: 0px 30px 10px 0px; padding: 15px 20px; border: 2px solid #e6e6e6; white-space: normal; height: auto !important; clear: right; } #bottombuttons .buttons li a:link, #bottombuttons .buttons li a:visited { color:#222222; text-decoration: none; } #bottombuttons .buttons li a:hover, #bottombuttons .buttons li a:active { color:#222222; text-decoration: underline; } /* Callout/Centered/Quote */ .callout {position:relative; display:block;width:70%; text-align:center; margin: 50px auto; max-width: 800px; /*border-top: 1px solid #ededed;border-bottom: 1px solid #ededed;*/} /* CMS Background Colors */ .callout.bgwhite { background: #FFF !important;} .callout.bgwhite .words, .callout.bgwhite>.content>.words>.padding>h2{ color: #222; } .callout.bgwhite>.content>.words>.multibuttons>ul>li {background: #FFF !important;} .callout.bglight { background: #918986 !important;} .callout.bglight .words, .callout.bglight>.content>.words>.padding>h2{ color: #222; } .callout.bglight>.content>.words>.multibuttons>ul>li {background: #918986 !important;} .callout.bgmedium { background: #465449 !important;} .callout.bgmedium .words, .callout.bgmedium>.content>.words>.padding>h2{ color: #FFF; } .callout.bgmedium>.content>.words>.multibuttons>ul>li {background: #465449 !important; color: #FFF; } .callout.bgmedium>.content>.words>.multibuttons>ul>li>.multitext, .callout.bgmedium>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {color: #FFF; } .callout.bgmedium>.content {padding: 2% 3%;} .callout.bgdark { background: #364c59 !important;} .callout.bgdark .words, .callout.bgdark>.content>.words>.padding>h2{ color: #FFF; } .callout.bgdark>.content>.words>.multibuttons>ul>li {background: #364c59 !important; color: #FFF; } .callout.bgdark>.content>.words>.multibuttons>ul>li>.multitext, .callout.bgdark>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {color: #FFF; } .callout.bgbright { background: #685569 !important;} .callout.bgbright .words, .callout.bgbright>.content>.words>.padding>h2{ color: #FFF; } .callout.bgbright>.content>.words>.multibuttons>ul>li {background: #685569 !important; color: #FFF; } .callout.bgbright>.content>.words>.multibuttons>ul>li>.multitext, .callout.bgbright>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {color: #FFF; } .callout h2 {font-size: 1.3em; line-height: 1.3em; font-weight: 700; color:#222222; padding: 0 0 20px 0; border-bottom: 1px solid #222222; margin: 0 0 20px 0; } .callout p { line-height: 36px; margin: 0 0 10px 0; } .callout .content .words .subtitle { color: #666666; line-height: 2em;} .callout .content .words .padding ul { position: relative; margin: 10px; padding: 0;} .callout .content .words .padding ul li { position: relative; margin: 0 0 10px 0; padding: 0;} .callout .content .words .padding ol { position: relative; margin: 10px auto; padding: 0; width:80%;} .callout .content .words .padding ol li { position: relative; margin: 0 0 15px 0; padding: 0; text-align: left;} .callout .content .words .padding .ctabutton button.modal-open { font-size: 1em; font-weight: 600; line-height: 0em; margin: 0px; padding: 0; text-align: center; width: auto; color: #FFFFFF; float: none;} .callout .content .words .padding .ctabutton button.modal-open a { padding: 0; margin: 0; } .callout .content .words .padding .ctabutton button.modal-open a:hover, .callout .content .words .padding .ctabutton button.modal-open a:active { text-decoration: underline; } .callout .content .imgshell { position: relative; width: 30%; float: left; display: inline; margin: 0 1% 0 0; padding: 0; overflow: hidden; } .callout .content .imgleft { position: relative; width: 30%; float: left; display: inline; margin: 0 1% 0 0; padding: 0; overflow: hidden; } .callout .content .imgcenter { position: relative; width: 30%; float: left; display: inline; margin: 0 1% 0 0; padding: 0; overflow: hidden;} .callout .content .imgfull { position: relative; width: 30%; float: left; display: inline; margin: 0 1% 0 0; padding: 0;overflow: hidden; } .callout .content .imgright { position: relative; width: 30%; float: right; display: inline; margin: 0 0 0 1%; padding: 0; overflow: hidden; } .callout .content .imgshell img, .callout .content .imgleft img, .callout .content .imgcenter img, .callout .content .imgfull img, .callout .content .imgright img { width: 100%; height: auto !important; padding: 0; margin: 0; } .callout .content .embcenter { position: relative; width: 80%; margin: 0 auto 0px auto; } .callout .content .embcenter iframe { width: 100%; height: auto !important; min-height: 600px; padding: 0; margin: 0; } .callout .content .embfull { width: 100%; margin: 0 auto; padding: 0; background: #222222; } .callout .content .embfull iframe { width: 100%; height: auto !important; min-height: 600px; padding: 0; margin: 0; } .callout .content .embright { width: 60%; margin: 0; padding: 0; background: #FFFFFF; float: right; display: inline; } .callout .content .embright iframe { width: 100%; height: auto !important; padding: 0; margin: 0; } .callout .content .embshell { width: 60%; margin: 0; padding: 0 20px 0 0; background: #FFFFFF; float: left; } .callout .content .embshell iframe { width: 100%; height: auto !important; min-height: 265px; padding: 0; margin: 0; } .callout .content .embleft { width: 60%; margin: 0; padding: 0 20px 0 0; background: #FFFFFF; float: left; } .callout .content .embleft iframe { width: 100%; height: auto !important; min-height: 265px; padding: 0; margin: 0; } .callout .content .imgshell .caption, .callout .content .imgleft .caption, .callout .content .imgcenter .caption, .callout .content .imgfull .caption, .callout .content .imgright .caption { margin: 0; } .callout .content .words .multibuttons { position: relative; margin: 0; padding: 0;} .callout .content .words .multibuttons ul { position: relative; margin: 0; padding: 0; width: 100%} .callout .content .words .multibuttons ul li { position: relative; margin: 0; padding: 0; width: auto; text-align: left; list-style: none; display: inline-block; } .callout .content .words .multibuttons ul li .multitext{ position: relative; margin: 0; padding: 0; width: auto;} .callout .content .words .multibuttons ul li .multitext .linktitle { font-family: "Work Sans", Arial, sans-serif;position: relative; margin: 5px; padding: 5px 15px; width: auto; background: #c11c1c;} .callout .content .words .multibuttons ul li .multitext .linktitle a { color: #FFFFFF; text-decoration: none;font-size: 1em; font-weight: 600; line-height: 0em; text-align: center; float: none;} .cal_small h2 {font-size: 1.4em;margin: 0 0 5px 0;color: #c11c1c;} /* expand bars new 2/1 */ .expandbars { display: block; width: 65%; max-width: 960px; margin: 20px auto 30px auto; padding: 15px 15px 5px 15px; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; background-color: #FFFFFF; } .expandbars .ctabutton>button>i.fas {display: inline; font-size: 1.0em; line-height: 0.5em; color: #222222; margin: 0 5px; padding: 0; border-radius:0;} .expandbars .ctabutton>button>i.fas>a:link, .expandbars .ctabutton>button>i.fas>a:visited, .expandbars .ctabutton>button>i.fas>a:active, .expandbars .ctabutton>button>i.fas>a:hover {color: #222222;} .expandbars .ctabutton {font-size: 1.0em; color: #222222; background: #FFFFFF; text-transform: none; letter-spacing:0px; } .expandbars .ctabutton button.modal-open { font-size: 1.2em; font-weight: 700; line-height: 1em; margin: 0px; padding: 0; text-align: left; display: inline; float:left; width: auto; color:#222222; text-transform: none; letter-spacing:0px; white-space: normal; background: #FFFFFF; } .expandbars .imgshell { position: relative; float: left; width: 20%; height: auto; margin: 0px; padding: 0px 10px 0px 0px; overflow: hidden; } .expandbars .imgshell img { width: 100%; height: auto; } .expandbars h2 {display: none;} /* expand bar modal pop up style */ .modal-content .imgleft {position: relative; float: left; width: 30%; height: auto !important; display: inline; margin: 0 2% 0 0; } .modal-content .imgleft img {position: relative; width: 100%; height: auto !important; } .modal-content .primgfeat {position: relative; float: left; width: 40%; height: auto !important; display: inline; margin: 0 2% 0 0; } .modal-content .primgfeat img {position: relative; width: 100%; height: auto !important; } .modal-content .primgright {position: relative; float: right; width: 40%; height: auto !important; display: inline; margin: 0 0 0 2%; } .modal-content .primgright img {position: relative; width: 100%; height: auto !important; } .modal-content .primgleft {position: relative; float: left; width: 40%; height: auto !important; display: inline; margin: 0 2% 0 0; } .modal-content .primgleft img {position: relative; width: 100%; height: auto !important; } /* expand bar modal pop up style */ .modal-content .imgleft {position: relative; float: left; width: 30%; height: auto !important; display: inline; margin: 0 2% 0 0; } .modal-content .imgleft img {position: relative; width: 100%; height: auto !important; } /* start FAQ styles */ .faqs { position:relative; display:block; width:100%; height: auto !important; overflow: visible; margin: 30px auto; padding: 0%; } .faqs .content {position:relative; display:block; width:100%; max-width: 1000px; height: auto !important; overflow: visible; margin: 0px auto; padding: 0%; } .faqs p { line-height: 36px; margin: 0 0 10px 0; } .faqs .content .words { position:relative; display:block; width:100%; height: auto !important; overflow: visible; margin: 0px auto; padding: 0%;} .faqs .content .words .padding { position:relative; display:block; width:100%; height: auto !important; overflow: visible; margin: 0px auto; padding: 0%; } .faqs .content .words .padding h2 { font-size: 2.0em; margin-bottom: 10px; } .faqs .content .words .padding .ctabutton button.modal-open { font-size: 1em; font-weight: 600; line-height: 0em; margin: 0px; padding: 0; text-align: center; width: auto; color: #FFFFFF; float: none;} .faqs .content .words .padding .ctabutton button.modal-open a { padding: 0; margin: 0; } .faqs .content .words .padding .ctabutton button.modal-open a:hover, .callout .content .words .padding .ctabutton button.modal-open a:active { text-decoration: underline; } .faqs .content .words .multibuttons { position: relative; margin: 20px 0 0 0; padding: 0; display: block; overflow: visible; background: #ededed;} .faqs .content .words .multibuttons ul { margin: 0; padding: 3% 4% 2% 3%; list-style: none; display: block; overflow: visible; border: 1px solid #ededed;} .faqs .content .words .multibuttons ul li { position: relative; width: 100%; margin: 0 0 30px 0; padding: 0px 0 40px 0; list-style:none; border-bottom: 1px solid #555; font-size: 1.1em; white-space: normal; text-align: left; line-height: 1.1em;} .faqs .content .words .multibuttons ul li .multitext .linktitle { font-family: "Work Sans", Arial, sans-serif;text-align: left; line-height: 1.1em;} .faqs .content .words .multibuttons ul li .linktitle { display:none; } .faqs .content .words .multibuttons ul li p { margin: 0; padding: 0 10px; float: left; } .faqs .content .words .multibuttons ul li .ctabutton { position: relative; float: left; margin: 0; padding: 0 0 0 10px; background: #ededed; color: #222222; text-transform:none; letter-spacing: 0px; text-align: left; line-height: 1.1em;} .faqs .content .words .multibuttons ul li .ctabutton button.modal-open { float: left; padding: 0px 0 0 0; background: #ededed; color: #222222; font-size: 1.1em; text-transform: none; letter-spacing: 0px; text-align: left; line-height: 1.1em; font-weight: 700; } .faqs .content .words .multibuttons ul li .multimgshell { position: relative; float: left; display: inline; width: 5%; height: auto; margin-top: 0; padding-top: 0; top: -13px;} .faqs .content .words .multibuttons ul li .multimgshell img { position: relative; width: 100%; height: auto;} /* start Four Column styles */ .fourcol { position: relative; width: 100%; height: auto; margin: 20px auto; padding: 20px 0; display: table; background: #ededed; } .fourcol .content { position: relative; width: 100%; max-width: 1000px; height: auto; margin: 50px auto; padding: 0px; display: table;} .fourcol .content>.imgleft, .fourcol>.content>.imgshell { position: relative; display:table-cell; float: left; width: 29%; height: auto !important; overflow: hidden; margin: 0px 30px 0px 20px; padding: 1%; background: #FFFFFF; } .fourcol .content>.imgleft img, .fourcol>.content>.imgshell img { width: 100%; height: auto; margin: 0px 30px 0px 0px;} .fourcol .content>.imgright { position: relative; display:table-cell; float: right; width: 29%; height: auto !important; overflow: hidden; margin: 0px 20px 0px 30px; padding: 1%; background: #FFFFFF; } .fourcol .content>.imgright img { width: 100%; height: auto; margin: 0;} .fourcol>.content>.imgcenter { position: relative; display:inline; float: left; width: 30%; overflow: hidden; margin: 0px auto; } .fourcol>.content>.imgcenter img { width: 100%; height: auto; margin: 0px 0px 0px 0px;} .fourcol>.content>.imgfull { position: relative; display:inline; float: left; width: 90%; overflow: hidden; margin: 0px auto; } .fourcol>.content>.imgfull img { width: 100%; height: auto; margin: 0px 0px 0px 0px;} .fourcol .content .embleft, .fourcol>.content .embshell { position: relative; display:table-cell; float: left; width: 48%; height: auto !important; overflow: hidden; margin: 0px 30px 20px 0px; } .fourcol .content .embleft iframe, .fourcol>.content .embshell iframe { width: 100%; height: auto; min-height: 300px; margin: 0px 30px 0px 0px;} .fourcol .content .embright { position: relative; display:table-cell; float: right; width: 48%; height: auto !important; overflow: hidden; margin: 0px 0px 0px 30px; } .fourcol .content .embright iframe { width: 100%; height: auto; min-height: 300px; margin: 0px 0px 0px 30px;} .fourcol .content .embcenter { position: relative; display:inline; float: left; width: 70%; overflow: hidden; margin: 0px auto; } .fourcol .content .embcenter iframe { width: 100%; height: auto; min-height: 400px; margin: 0px 0px 0px 0px;} .fourcol .content .embfull { position: relative; display:block; float: none; width: 90%; overflow: hidden; margin: 0px auto; } .fourcol .content .embfull iframe { width: 100%; height: auto; min-height: 600px; margin: 0px 0px 0px 0px;} .fourcol>.content>.words { position: relative; width: 100%; max-width: 1000px; display: block; margin: 0px auto;} .fourcol>.content>.words>.padding { text-align: center; line-height:1.9em; } .fourcol>.content>.words>.padding>p { line-height:1.9em; margin: 20px; } .fourcol>.content>.words>.padding>h2 { text-align: center; color: #222222; font-weight: 700; font-size: 1.3em; padding:0; margin:0 auto; line-height:1em; } .fourcol>.content>.words>.padding>.subtitle { margin:10px auto; text-align: center; font-size: 1.1em;} .fourcol>.content>.words>.multibuttons { position: relative; width: 100%; max-width: 1000px; display: block; margin: 20px auto 0px auto;} .fourcol>.content>.words>.multibuttons>ul { position: relative; margin: 0px auto; padding: 0px; width: 100%; display: table; } .fourcol>.content>.words>.multibuttons>ul>li { position: relative; width: 21%; display:table-cell; float: left; margin: 1%; padding-right: 1%;text-align: center; min-height: 100px; color: #222222; border-right: none;} .fourcol .content .words .multibuttons .cms-button { margin: 15px auto; line-height: 1em;} .fourcol>.content>.words>.multibuttons>ul>li>.multimgshell, .fourcol>.content>.words>.multibuttons>ul>li>.multimgleft, .fourcol>.content>.words>.multibuttons>ul>li>.multimgright, .fourcol>.content>.words>.multibuttons>ul>li>.multimgcenter{ position: relative; width: 100%; height: auto; display:block; overflow: hidden; margin: 0; } .fourcol>.content>.words>.multibuttons>ul>li>.multimgfull{ position: relative; width: 100%; height: auto; display:block; overflow: hidden; margin: 0;} .fourcol>.content>.words>.multibuttons>ul>li>.multimgleft img, .fourcol>.content>.words>.multibuttons>ul>li>.multimgright img, .fourcol>.content>.words>.multibuttons>ul>li>.multimgcenter img, .fourcol>.content>.words>.multibuttons>ul>li>.multimgshell img, .fourcol>.content>.words>.multibuttons>ul>li>.multimgfull img { position: relative; width: 100%; height: auto; padding: 0; margin: 0;} .fourcol>.content>.words>.multibuttons>ul>li>.multitext { position: relative; width: 90%; height: auto; margin: 5% 5% 10% 5%; display:block; float:none; line-height: 1.5em; text-align: left !important; } .fourcol>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {font-family: "Work Sans", Arial, sans-serif;font-size: 1.2em; text-align: left; color:#333;font-weight:600; margin: 10px 0 5px 0;} .fourcol>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:link, .fourcol>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:visited {text-decoration:none;} .fourcol>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:active, .fourcol>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:hover{text-decoration:underline;} .fourcol>.content>.words>.multibuttons>ul>li>.multitext button.modal-open {color: #FFFFFF; text-decoration: none; font-weight: 700; } .fourcol>.content>.words>.multibuttons>ul>li>.multitext>div>ul { position: relative; text-align: left; width: 90%; margin: 0 auto; } .fourcol>.content>.words>.multibuttons>ul>li>.multitext>div>ul>li { text-align: left; margin: 0 0 10px 0; } .fourcol>.content>.words>.multibuttons>ul>li>.multitext>.ctabutton>button.modal-open { margin: 0; padding: 0; line-height: 1.1em; } .fourcol>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>.ctabutton {display:inline-block;margin-top: 20px;} .fourcol>.content>.words>.multibuttons>ul>li>.multiembshell, .fourcol>.content>.words>.multibuttons>ul>li>.multiembleft, .fourcol>.content>.words>.multibuttons>ul>li>.multiembright, .fourcol>.content>.words>.multibuttons>ul>li>.multiembcenter { position: relative; width: 90%; height: auto; display:block; overflow: hidden; margin: 5%; } .fourcol>.content>.words>.multibuttons>ul>li>.multiembshell img { position: relative; width: 100%; height: 100%; display:block; max-height: 150px; } .fourcol>.content>.words>.multibuttons>ul>li>.multiembshell iframe, .fourcol>.content>.words>.multibuttons>ul>li>.multiembleft iframe, .fourcol>.content>.words>.multibuttons>ul>li>.multiembright iframe, .fourcol>.content>.words>.multibuttons>ul>li>.multiembcenter iframe { position: relative; width: 100%; height: 100%; display:block; max-height: 150px; } /* Highlight styles */ .highlight { position:relative; display:table; width:100%; height: auto !important; margin: 30px auto; padding: 10px 0px; vertical-align: top; overflow: visible; } /* CMS Background Colors */ .highlight.bgwhite { background: #FFF !important;} .highlight.bgwhite .words, .highlight.bgwhite>.content>.words>.padding>h2{ color: #222; } .highlight.bgwhite>.content>.words>.multibuttons>ul>li {background: #FFF !important;} .highlight.bglight { background: #ededed !important;} .highlight.bglight .words { background: #ededed; color: #FFF; padding: 0; } .highlight.bglight>.content>.words>.padding>h2{ background: #ededed; color: #FFF; } .highlight.bglight>.content>.words>.multibuttons>ul>li {background: #ededed !important;} .highlight.bgmedium { background: #364c59 !important; padding: 30px 0px; } .highlight.bgmedium>.content>.words { background: #364c59; color: #FFF; padding: 0; } .highlight.bgmedium>.content>.words .padding { background: #364c59; color: #FFF; padding: 0; } .highlight.bgmedium>.content>.words>.padding>h2, .highlight.bgmedium>.content>.words>.padding>.subtitle, .highlight.bgmedium>.content>.words>.multibuttons>ul>li {background: #364c59 !important; color: #FFF; } .highlight.bgmedium>.content>.words>.multibuttons>ul>li>.multitext, .highlight.bgmedium>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {color: #FFF; } .highlight.bgmedium>.content>.imgshell .caption { color: #FFF; } .highlight.bgdark { background: #465449 !important; padding: 30px 0px; } .highlight.bgdark>.content>.words { background: #465449 !important; padding: 0;} .highlight.bgdark>.content>.words { color: #FFF; background: #222; } .highlight.bgdark>.content>.words>.padding>.subtitle, .highlight.bgdark>.content>.words>.padding>h2{ color: #FFF; } .highlight.bgdark>.content>.words a, .highlight.bgdark>.content>.words>.padding a { color: #FFF; } .highlight.bgdark>.content>.words>.multibuttons>ul>li {background: #222 !important; color: #FFF; } .highlight.bgdark>.content>.words>.multibuttons>ul>li>.multitext, .highlight.bgdark>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {color: #FFF; } .highlight.bgbright { background: #465449 !important; padding: 30px 0px; } .highlight.bgbright .words {background: #465449 !important; color: #FFF; padding: 0; } .highlight.bgbright>.content>.words>.padding>.subtitle, .highlight.bgbright>.content>.words>.padding>h2, .highlight.bgbright>.content>.words>.padding>.caption{ color: #FFF; } .highlight.bgbright>.content>.words>.multibuttons>ul>li {background: #465449 !important; color: #FFF; } .highlight.bgbright>.content>.words>.multibuttons>ul>li>.multitext, .highlight.bgbright>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {color: #FFF; } .highlight.bgdark .cms-caption, .highlight.bgmedium .cms-caption, .highlight.bgbright .cms-caption{ color: #FFF; } .highlight .content { position: relative; display:block; width: 100%; max-width: 1200px; overflow: visible; margin: 10px auto; align-content: center; vertical-align: top; } .highlight>.content>.imgshell { position: relative; display:table-cell; float: left; width: 50%; overflow: hidden; margin: 30px 0 0 0; } .highlight>.content>.imgleft { position: relative; display:table-cell; float: left; width: 45%; overflow: hidden; margin: 30px 0; } .highlight>.content>.imgcenter { position: relative; display:table-cell; width: 45%; overflow: hidden; margin: 0; } .highlight>.content>.imgfull { position: relative; display:table-cell; width: 45%; overflow: hidden; margin: 0; } .highlight>.content>.imgright { position: relative; display:table-cell; float: right; width: 45%; overflow: hidden; margin: 30px 0; } .highlight>.content>.imgshell img, .highlight>.content>.imgleft img, .highlight>.content>.imgcenter img, .highlight>.content>.imgfull img, .highlight>.content>.imgright img { width: 100%; height: auto !important; padding: 0; margin: 0px} .highlight>.content>.imgshell a { position: relative; display:block; width: 100%; margin: 0; } .highlight .content .embcenter { position: relative; width: 80%; margin: 0 auto 0px auto; background: transparent; } .highlight .content .embcenter iframe { width: 100%; height: auto !important; min-height: 600px; padding: 0; margin: 0; } .highlight .content .embfull { width: 100%; margin: 0 auto; padding: 0; background: transparent; } .highlight .content .embfull iframe { width: 100%; height: auto !important; min-height: 600px; padding: 0; margin: 0; } .highlight .content .embright { width: 45%; height: auto !important; margin: 25px 0; padding: 0; background: transparent; float: right; display: inline; } .highlight .content .embright iframe { width: 100%; height: 100%; min-height: 300px; padding: 0; margin: 0 0 0 0 } .highlight .content .embshell { width: 45%; height: auto !important; margin: 25px 0; padding: 0; background: transparent; float: left; display: inline; } .highlight .content .embshell iframe { width: 100%; height: 100%; min-height: 300px; padding: 0; margin: 0 0 0 0; } .highlight .content .embleft { width: 45%; height: auto !important; margin: 25px 0; padding: 0; background: transparent; float: left; display: inline; } .highlight .content .embleft iframe { width: 100%; height: 100%; min-height: 300px; padding: 0; margin: 0 0 0 0 } .highlight .content .words { position: relative; display: table-cell; text-align: center; width: auto; margin: 0; padding: 0 0 5% 0; background: #ededed;} .highlight>.content>.words>.padding { position: relative; text-align: left; width: 80%; margin: 0 auto; padding: 5%; line-height: 2.0em;} .highlight>.content>.words>.padding .subtitle { color: #222222; font-size: 1.3em; font-weight: 700; line-height: 1.5em; margin: 20px 0; padding: 0;} .highlight>.content>.words>.padding p { line-height: 2.0em;} .highlight>.content>.words>.padding a { color: #222222; text-decoration: underline;} .highlight>.content>.words>.padding>.ctabutton { display: inline-block; width: auto !important; margin: 0px auto 10px auto; padding: 12px 20px;text-align: center;} .highlight>.content>.words>.padding>.ctabutton a { color: #FFF !important;text-decoration: none !important;} .highlight>.content>.words>.padding>.ctabutton>button.modal-open { font-size: 1.0em;line-height: 0em; margin: 0px; padding: 0; text-transform: none; letter-spacing: none; text-align: center; width: auto !important; color: #FFFFFF; float: none;} .highlight>.content>.words>.padding>.ctabutton>button.modal-open>a:hover, .highlight>.content>.words>.padding>.ctabutton>button.modal-open>a:active { text-decoration: underline; } .highlight>.content>.words>.padding>.ctabutton>a:hover, .highlight>.content>.words>.padding>.ctabutton>a:active { color: #FFFFFF; text-decoration: underline; } .highlight>.content>.words>.padding .cms-button a:link { color: #FFF !important;text-decoration: none !important;} .highlight>.content>.words>.padding .cms-button a:visited { color: #FFF !important;text-decoration: none !important;} .highlight>.content>.words>.padding>ul { position: relative; text-align: left; width: 80%; margin: 0 auto; } .highlight>.content>.words>.padding>ul>li { text-align: left; margin-bottom: 7px; } .highlight>.content>.words>.padding>ol { position: relative; text-align: left; width: 80%; margin: 0 auto; } .highlight>.content>.words>.padding>ol>li { text-align: left; } .highlight .content .words>h2 { color: #c11c1c; font-size: 1.3em; margin: 0; } .highlight .content .words .multibuttons { position: relative; display: block;text-align: center; width: auto !important; margin: 0;} .highlight>.content>.words>.multibuttons>ul { position: relative; text-align: center; width: 80%; margin: 0 auto; } .highlight .content .words .multibuttons li { list-style: none; position: relative; background: #c11c1c;color: #FFFFFF; text-align: center; width: auto !important; padding: 5px 0; margin: 0 0 10px 0; font-size: 1em; } .highlight .content .words .multibuttons li a:link, .highlight .content .multibuttons li a:visited { background: #c11c1c; color:#FFFFFF; text-decoration: none; } .highlight .content .words .multibuttons li a:hover, .highlight .content .multibuttons li a:active { background: #c11c1c; color:#FFFFFF; text-decoration: underline; } .highlight .content .words .multibuttons li .multitext { display: inline-block; width: auto !important;} .highlight .content .words .multibuttons li .multitext .textmulti { display: none;} .highlight .content .words .multibuttons li .multitext .linktitle { font-family: "Work Sans", Arial, sans-serif;font-size: 0.8em; font-weight: 700; display: inline;} .highlight .content .words .multibuttons li .multitext .ctabutton { width: auto !important; margin: 0 auto; color: #FFFFFF; float: none; display: inline-block; } .highlight .content .words .multibuttons li .multitext .ctabutton button.modal-open { font-size: 1em; line-height: 1em; margin: 0px; padding: 0; text-align: center; width: auto; color: #FFFFFF; float: none; display: inline-block; } /* start Highlight Cluster styles*/ .highcluster { position:relative; display:block; width:100%; height: auto !important; overflow: visible; margin: 30px auto 50px auto; padding: 0px 0px 20px 0px; align-content: center;max-width: 1000px; } .highcluster>.content { position: relative; display:block; float: none; width: 100%; height: auto !important; overflow: visible; margin: 0 auto 10px auto; padding: 0;} .highcluster>.content>.imgshell { position: relative; width: 50%; float: left; display: inline; margin: 0 1% 1% 0; padding: 0; overflow: hidden; } .highcluster>.content>.imgleft { position: relative; width: 50%; float: left; display: inline; margin: 0 1% 1% 0; padding: 0; overflow: hidden; } .highcluster .content>.imgcenter { position: relative; width: 50%; float: left; display: inline; margin: 0 1% 1% 0; padding: 0; overflow: hidden; } .highcluster .content .imgfull { position: relative; width: 50%; float: left; display: inline; margin: 0 1% 1% 0; padding: 0;overflow: hidden; } .highcluster>.content>.imgright { position: relative; width: 50%; float: left; display: inline; margin: 0 0 1% 1%; padding: 0; overflow: hidden; } .highcluster .content .imgshell img, .highcluster .content .imgleft img, .highcluster .content .imgcenter img, .highcluster .content .imgfull img, .highcluster .content .imgright img { width: 100%; height: auto !important; padding: 0; margin: 0; } .highcluster .content .embcenter { width: 60%; height: auto !important; margin: 0; padding: 0; background: #FFFFFF; float: left; display: inline; } .highcluster .content .embcenter iframe { width: 100%; height: auto !important; min-height: 600px; padding: 0; margin: 0; } .highcluster .content .embfull { width: 60%; height: auto !important; margin: 0; padding: 0; background: #FFFFFF; float: left; display: inline; } .highcluster .content .embfull iframe { width: 100%; height: auto !important; min-height: 600px; padding: 0; margin: 0; } .highcluster .content .embright { width: 60%; margin: 0; padding: 0; background: #FFFFFF; float: right; display: inline; } .highcluster .content .embright iframe { width: 100%; height: auto !important; min-height: 300px; padding: 0; margin: 0; } .highcluster .content .embshell { width: 60%; height: auto !important; margin: 0; padding: 0; background: #FFFFFF; float: left; display: inline; } .highcluster .content .embshell iframe { width: 100%; height: auto !important; min-height: 300px; padding: 0; margin: 0; } .highcluster .content .embleft { width: 60%; height: auto !important; margin: 0; padding: 0; background: #FFFFFF; float: left; display: inline; } .highcluster .content .embleft iframe { width: 100%; height: auto !important; min-height: 400px; padding: 0; margin: 0; } .highcluster>.content>.words { position: absolute; top: 0px; display:block; float: none; width: 100%; height: auto !important; min-height: 365px; overflow: visible; margin: 0; padding: 0; } .highcluster>.content>.words>.padding { position: absolute; bottom: 5px; text-align: left; width: 40%; margin: 1%; padding: 1%; display: inline-block; color: #FFFFFF; z-index: 1001; background:url(https://www.bard.edu/images/tints/80black.png) repeat; } .highcluster>.content>.words>.padding p { margin: 0; padding: 0; } .highcluster>.content>.words>.padding>.ctabutton { display: inline; float: left; width: auto; margin: 10px 0 0 0; padding: 10px;font-size: 0.8em; line-height: 0.3em; background: #ededed; } .highcluster>.content>.words>.padding>.ctabutton>a:link, .highcluster>.content>.words>.padding>.ctabutton>a:visited { color: #c11c1c; text-decoration: none;} .highcluster>.content>.words>.padding>.ctabutton>a:hover { color: #c11c1c; text-decoration: underline;} .highcluster>.content>.words>.padding>ul { position: relative; text-align: left; width: 80%; margin: 0 auto; } .highcluster>.content>.words>.padding>ul>li { text-align: left; } .highcluster>.content>.words>.padding>h2 { color: #FFFFFF; margin: 0; } .highcluster>.content>.words>.multibuttons { position: absolute; top: 0; right: 0; width: 50%; height: auto !important; float: right; margin: 0; overflow: visible } .highcluster>.content>.words>.multibuttons>ul { position: relative; text-align: left; width: 96%; margin: 0 auto; } .highcluster>.content>.words>.multibuttons>ul>li { min-height: 85px; display: block; list-style: none; position: relative; color: #333; text-align: left; width: auto !important; padding: 5px 0; margin: 0 0 25px 0; font-size: 0.9em; overflow: visible; clear:both; } .highcluster>.content>.words>.multibuttons>li a:link, .highcluster>.content>.words>.multibuttons>li a:visited { color:#c11c1c; text-decoration: none; background: none; } .highcluster>.content>.words>.multibuttons>ul>li>.multitext { position: relative; width: 60%; height: auto !important; margin: 0 auto;float: left; display: inline; overflow: visible; } .highcluster>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {font-family: "Work Sans", Arial, sans-serif;position: relative; float: none; display: block; background: none; font-size: 1.0em; line-height: 1.0em; text-align: left; color:#c11c1c;font-weight:600; margin: 0;} .highcluster>.content>.words>.multibuttons>ul>li>.multitext>p { margin: 0; padding: 0;} .highcluster>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:link,.highcluster>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:visited {color: #c11c1c; text-decoration: none;} .highcluster>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:active,.highcluster>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:hover {color: #c11c1c; text-decoration: underline; font-weight: 700; background: #ededed;} .highcluster>.content .words>.multibuttons>li>.multitext>.textmulti { } .highcluster>.content>.words>.padding>.ctabutton>button.modal-open { font-size: 1.0em; line-height: 1em; margin: 0px; padding: 0; text-transform: none; letter-spacing: none; text-align: center; width: auto; color: #c11c1c; float: none;} .highcluster>.content>.words>.multibuttons>ul>li>.multimgshell { position: relative; width: 30%; height: auto !important; margin: 0 auto;float: left; display: inline; overflow: visible } .highcluster>.content>.words>.multibuttons>ul>li>.multimgshell img{ width: 90%; margin: 0 auto;float: left; display: inline; } /* start Highlight Facts styles*/ .highfacts { position:relative; display:block; width:100%; height: auto !important; overflow: visible; margin: 30px auto; padding: 0px; align-content: center;max-width: 1000px; } .highfacts>.content { position: relative; display:block; float: none; width: 100%; overflow: hidden; margin: 0 auto; padding: 0;} .highfacts>.content>.imgshell { position: relative; width: 50%; float: left; display: inline; margin: 0 1% 1% 0; padding: 0; overflow: hidden; } .highfacts>.content>.imgleft { position: relative; width: 50%; float: left; display: inline; margin: 0 1% 1% 0; padding: 0; overflow: hidden; } .highfacts .content>.imgcenter { position: relative; width: 50%; float: left; display: inline; margin: 0 1% 1% 0; padding: 0; overflow: hidden; } .highfacts .content .imgfull { position: relative; width: 50%; float: left; display: inline; margin: 0 1% 1% 0; padding: 0;overflow: hidden; } .highfacts>.content>.imgright { position: relative; width: 50%; float: right; display: inline; margin: 0 0 1% 1%; padding: 0; overflow: hidden; } .highfacts .content .imgshell img, .highfacts .content .imgleft img, .highfacts .content .imgcenter img, .highfacts .content .imgfull img, .highfacts .content .imgright img { width: 100%; height: auto !important; padding: 0; margin: 0; } .highfacts>.content>.imgshell>.caption { margin: 0; padding: 0; text-align: left; } .highfacts>.content>.embshell { position: relative; width: 50%; float: left; display: inline; margin: 0 1% 1% 0; padding: 0; overflow: hidden; } .highfacts>.content>.embleft { position: relative; width: 50%; float: left; display: inline; margin: 0 1% 1% 0; padding: 0; overflow: hidden; } .highfacts .content>.embcenter { position: relative; width: 50%; float: left; display: inline; margin: 0 1% 1% 0; padding: 0; overflow: hidden; } .highfacts .content .embfull { position: relative; width: 50%; float: left; display: inline; margin: 0 1% 1% 0; padding: 0;overflow: hidden; } .highfacts>.content>.embright { position: relative; width: 50%; float: right; display: inline; margin: 0 0 1% 1%; padding: 0; overflow: hidden; } .highfacts .content .embshell iframe, .highfacts .content .embleft iframe, .highfacts .content .embcenter iframe, .highfacts .content .embfull iframe, .highfacts .content .embright iframe { width: 100%; height: auto !important; min-height: 300px; padding: 0; margin: 0; } .highfacts>.content>.imgshell>.caption { margin: 0; padding: 0; text-align: left; } .highfacts>.content>.words { position: absolute; top: 0px; display:block; float: none; width: 100%; height: auto !important; min-height: 365px; overflow: visible; margin: 0; padding: 0; } .highfacts>.content>.words>.padding { position: absolute; bottom: 5px; text-align: left; width: 40%; margin: 1%; padding: 1%; display: inline-block; color: #FFFFFF; z-index: 1001; background:url(https://www.bard.edu/images/tints/80black.png) repeat; } .highfacts>.content>.words>.padding p { margin: 0; padding: 0; } .highfacts>.content>.words>.padding>.ctabutton { display: inline; float: left; width: auto; margin: 10px 0 0 0; padding: 10px;font-size: 0.8em; line-height: 0.3em; background: #ededed; } .highfacts>.content>.words>.padding>.ctabutton>a:link, .highfacts>.content>.words>.padding>.ctabutton>a:visited { color: #c11c1c; text-decoration: none;} .highfacts>.content>.words>.padding>.ctabutton>a:hover { color: #c11c1c; text-decoration: underline; } .highfacts>.content>.words>.padding>ul { position: relative; text-align: left; width: 80%; margin: 0 auto; } .highfacts>.content>.words>.padding>ul>li { text-align: left; } .highfacts>.content>.words>.padding>h2 { color: #FFFFFF; margin: 0; } .highfacts>.content>.words>.multibuttons { position: absolute; top: 0; right: 0; width: 50%; float: right;margin: 0; } .highfacts>.content>.words>.multibuttons>ul { position: relative; text-align: left; width: 96%; margin: 0 auto; } .highfacts>.content>.words>.multibuttons>ul>li { position: relative; width: 40%; min-height: 130px; display: inline-block; list-style: none;color: #333; text-align: center; padding: 3%; margin: 0 1% 2% 0; font-size: 1.2em; align-content: center; background: #ededed; } .highfacts>.content>.words>.multibuttons>li a:link, .highfacts>.content>.words>.multibuttons>li a:visited { color:#c11c1c; text-decoration: none; background: none; } .highfacts>.content>.words>.multibuttons>ul>li>.multitext { position: relative; width: 90%; margin: 0 auto;text-align: center; line-height: 2.0em; } .highfacts>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {font-family: "Work Sans", Arial, sans-serif;position: relative; float: none; display: block; background: none; font-size: 3em; text-align: center; color:#c11c1c;font-weight:600; margin: 20px 0;} .highfacts>.content>.words>.multibuttons>ul>li>.multitext>p { margin: 0; padding: 0;} .highfacts>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:link,.highfacts>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:visited {color: #c11c1c; text-decoration: none;} .highfacts>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:active,.highfacts>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:hover {color: #c11c1c; text-decoration: underline; font-weight: 700; background: #ededed;} .highfacts>.content .words>.multibuttons>li>.multitext>.textmulti { } .highfacts>.content>.words>.padding>.ctabutton>button.modal-open { font-size: 1.0em; line-height: 1em; margin: 0px; padding: 0; text-transform: none; letter-spacing: none; text-align: center; width: auto; color: #c11c1c; float: none;} .highfacts>.content>.words>.multibuttons>ul>li>.multimgshell { position: relative; width: 30%; margin: 0 auto;float: left; display: inline; } .highfacts>.content>.words>.multibuttons>ul>li>.multimgshell img{ width: 90%; margin: 0 auto;float: left; display: inline; } /* start Hover Text Boxes */ .hovertext {width: 90%; margin: 0 auto 30px auto; padding: 0; max-width: 1300px; } .hovertext h2 { font-size: 2.8em; margin: 0 auto; text-align: center;} .hovertext #boxes { position: relative; display: block; width: 100%; height: auto !important; margin: 0 auto; max-width: 1300px; } .hovertext #boxes .row1, .hovertext #boxes .row2 { position: relative; display: block; width: 31%; height: auto !important; min-height: 250px; max-height: 250px; overflow: hidden; float: left; background: #FFF; font-family: "Work Sans", Arial, sans-serif; font-size: 1.0em; line-height:1.1em; color: #FFF; margin: 1%; border: 1px solid #222; } .hovertext #boxes .row1 h3, .hovertext #boxes .row2 h3 { font-family: "Work Sans", Arial, sans-serif; font-weight: 400; position: relative; top:0px; height: 10px; margin: 0px 0 25px 0; padding: 10px 0px 60px 0px; z-index: 31; font-size: 1.5em; line-height:1.5em; color: #222; } .hovertext #boxes .row1 .cms-subtitle1, .hovertext #boxes .row2 .cms-subtitle1 { font-size: 2.5em; margin: 0 0 25px 0; } .hovertext #boxes .row1 .hov, .hovertext #boxes .row2 .hov { margin: 0px; padding: 10px 20px;font-family: "Work Sans", Arial, sans-serif; font-size: 1.0em; line-height:1.5em; color: #222; display:block; height: 380px; } .hovertext #boxes .row2 .hov:hover, .hovertext #boxes .row2 .hov:active { text-decoration: none;} .hovertext #boxes .row1 img, .hovertext #boxes .row2 img { width: 100%; height: auto !important; z-index: 30; } .hovertext #boxes .row1 #embedshell { width: 100%; height: auto !important; overflow: hidden; } .hovertext #boxes .row1 iframe { width: 100%; height: 210px; z-index: 5; } /* animated text box on HP Boxes */ .hovertext #boxes .row1 .rowtext { width:100%; position:absolute; bottom:0; left:0; margin-bottom:-280px; border-radius:0px;} .hovertext #boxes .row1:hover .rowtext { margin-bottom:-150px; text-decoration: none; } .hovertext #boxes .row1 .rowtext a:link, .hovertext #boxes .row1 .rowtext a:visited, .hovertext #boxes .row1 .rowtext a:hover, .hovertext #boxes .row1 .rowtext a:active { text-decoration: none; } .hovertext #boxes .row1 .rowvideo { width:100%; position:absolute; bottom:0; left:0; margin-bottom:-300px; border-radius:0px; overflow:hidden;} .hovertext #boxes .row1:hover .rowvideo { margin-bottom:-300px; overflow:hidden; } .hovertext #boxes .row1 .rowvideo h3 { display:none;} .hovertext #boxes .row1:hover .rowvideo h3 { display:none; } .hovertext #boxes .rowtext { -webkit-transition: all 0.7s ease; transition: all 0.7s ease;} /* start One Column styles */ .onecol { position: relative; width: 90%; height: auto; margin: 30px auto; padding: 0px 0; display: block; float: none; } /* CMS Background Colors */ .onecol.bgwhite { background: #FFF !important;} .onecol.bgwhite .words { color: #222; } .onecol.bgwhite>.content>.words>.padding>h2{ color: #222; } .onecol.bgwhite>.content>.words>.multibuttons>ul>li {background: #FFF !important;} .onecol.bglight { background: #918986 !important;} .onecol.bglight .words, .onecol.bglight>.content>.words>.padding>h2{ color: #222; } .onecol.bglight>.content>.words>.multibuttons>ul>li {background: #918986 !important;} .onecol.bgmedium { background: #465449 !important;} .onecol.bgmedium .words, .onecol.bgmedium>.content>.words>.padding>h2{ color: #FFF; } .onecol.bgmedium>.content>.words>.multibuttons>ul>li {background: #465449 !important; color: #FFF; } .onecol.bgmedium>.content>.words>.multibuttons>ul>li>.multitext, .onecol.bgmedium>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {color: #FFF; } .onecol.bgdark { background: #222 !important;} .onecol.bgdark>.content>.words { background: #222 !important;} .onecol.bgdark>.content>.words, .onecol.bgdark>.content>.words>.padding>h2{ color: #FFF; } .onecol.bgdark>.content>.words a, .onecol.bgdark>.content>.words>.padding a { color: #FFF; } .onecol.bgdark>.content>.words>.multibuttons>ul>li {background: #364c59 !important; color: #FFF; } .onecol.bgdark>.content>.words>.multibuttons>ul>li>.multitext, .onecol.bgdark>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {color: #FFF; } .onecol.bgbright { background: #685569 !important;} .onecol.bgbright .words, .onecol.bgbright>.content>.words>.padding>h2{ color: #FFF; } .onecol.bgbright>.content>.words>.multibuttons>ul>li {background: #685569 !important; color: #FFF; } .onecol.bgbright>.content>.words>.multibuttons>ul>li>.multitext, .onecol.bgbright>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {color: #FFF; } .onecol .content { position: relative; width: 100%; height: auto; margin: 0 auto; padding: 1%; display: table; } .onecol>.content>.words { position: relative; width: 100%; max-width: 1000px; display: block; margin: 0px auto; float: none; padding: 0;} .onecol>.content>.words>.padding { position: relative; text-align: left; width: 19%; float: left; display: inline; padding: 2% 1% 2% 0; } .onecol>.content>.words>.padding>p { line-height:1.5em; margin: 5px 0; } .onecol>.content>.words>.padding>h2 { text-align: left; color: #c11c1c; font-weight: 700; font-size: 1.3em; padding: 20px 0; margin:0 auto; line-height:1em; } .onecol>.content>.words>.padding>.subtitle { margin:0; text-align: left; font-size: 1.1em;color: #222222;} .onecol>.content>.words>.padding>.ctabutton { position: relative; margin:10px auto; text-align: center; float: none; } .onecol>.content>.imgshell { display:none;} .onecol>.content>.words>.multibuttons { position: relative; width: 80%; max-width:80%; display: inline; float: left; margin: 0px; padding: 0; } .onecol>.content>.words>.multibuttons>ul { position: relative; margin: 0px auto; width: 100%; display: block; padding: 0; } .onecol>.content>.words>.multibuttons>ul>li { position: relative; width: 98%; display:table; float: none; margin: 0%; padding: 1%; height: auto; vertical-align: top; background: #333; } .onecol>.content>.words>.multibuttons>ul>li>.multimgshell {position: relative; width: 25%; height: auto; overflow: hidden; padding: 2% 0 0 0; margin: 0px 10px 0px 0;display: table-cell; } .onecol>.content>.words>.multibuttons>ul>li>.multimgleft {position: relative; width: 25%; height: auto; overflow: hidden; padding: 0; margin: 0 10px 0px 0;display: table-cell; } .onecol>.content>.words>.multibuttons>ul>li>.multimgfull{ position: relative; width: 100%; height: auto; overflow: hidden; padding: 0; margin: 0 5% 0 0;display: block; float: none;} .onecol>.content>.words>.multibuttons>ul>li>.multimgshell img, .onecol>.content>.words>.multibuttons>ul>li>.multimgleft img, .onecol>.content>.words>.multibuttons>ul>li>.multimgfull img { position: relative; width: 100%; height: auto !important; } .onecol>.content>.words>.multibuttons>ul>li>.multimgright { position: relative; width: 35%; height: auto; max-height: 225px; overflow: hidden; padding: 0; margin: 0 0 10px 20px;display: table-cell; } .onecol>.content>.words>.multibuttons>ul>li>.multimgright img { position: relative; width: 100%; height: auto !important; } /* one-col multiimg center modified for tall/vertical/portrait images */ .onecol>.content>.words>.multibuttons>ul>li>.multimgcenter {position: relative; width: 20%; height: auto; max-height: 230px; overflow: hidden; padding: 0; margin: 5px 20px 5px 0; display: table-cell; float: left;} .onecol>.content>.words>.multibuttons>ul>li>.multimgcenter img { position: relative; width: 100%; height: 100%; } .onecol>.content>.words>.multibuttons>ul>li>.multimgshell iframe {width: 100%; height: 100%; } .onecol>.content>.words>.multibuttons>ul>li>.multiembshell, .onecol>.content>.words>.multibuttons>ul>li>.multiembleft, .onecol>.content>.words>.multibuttons>ul>li>.multiembright, .onecol>.content>.words>.multibuttons>ul>li>.multiembcenter, .onecol>.content>.words>.multibuttons>ul>li>.multiembfull{ position: relative; width: 100%; height: auto; overflow: hidden; padding: 0; margin: 0;display: block; float: none;} .onecol>.content>.words>.multibuttons>ul>li>.multiembshell iframe, .onecol>.content>.words>.multibuttons>ul>li>.multiembleft iframe, .onecol>.content>.words>.multibuttons>ul>li>.multiembright iframe, .onecol>.content>.words>.multibuttons>ul>li>.multiembcenter iframe, .onecol>.content>.words>.multibuttons>ul>li>.multiembfull iframe { position: relative; width: 100%; height: auto !important; min-height: 265px; } .onecol>.content>.words>.multibuttons>ul>li>.multitext { position: relative; width: auto !important; min-width: 50%; padding: 2%; margin: 0; font-size: 0.95em; line-height: 1.7em; display: table-cell; color: #FFFFFF; vertical-align:top; text-align: left; } .onecol>.content>.words>.multibuttons>ul>li>.multitext .cms-button {margin: 10px 0; } .onecol>.content>.words>.multibuttons>ul>li>.multitext .cms-caption {color: #ededed;} .onecol>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {font-family: "Work Sans", Arial, sans-serif;font-size: 1.3em; text-align: left; color:#FFFFFF;font-weight:600; margin: 0px; padding:0; } .onecol>.content>.words>.multibuttons>ul>li>.multitext>p {margin: 20px 0px 5px 0px; padding:0; } .onecol>.content>.words>.multibuttons>ul>li>.multitext>a:link, .onecol>.content>.words>.multibuttons>ul>li>.multitext>a:visited {text-decoration:underline;color:#FFFFFF;} .onecol>.content>.words>.multibuttons>ul>li>.multitext>a:active, .onecol>.content>.words>.multibuttons>ul>li>.multitext>a:hover{text-decoration:underline;color:#FFFFFF;} .onecol>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:link, .onecol>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:visited {text-decoration:none;color:#FFFFFF;} .onecol>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:active, .onecol>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:hover{text-decoration:underline;color:#FFFFFF;} /* Section Header Styles*/ .section { position:relative; display:block; width:70%; height: auto; overflow: visible; margin: 50px auto 0px auto; padding: 0px; align-content: center;max-width: 1000px; background:url(https://www.bard.edu/images/line.png) repeat-x; } .section>.content { position: relative; display:block; float: none; width: 100%; max-width: 1000px; overflow: hidden; margin: 0 auto; padding: 0; text-align: center; } .section>.content .imgshell { position: relative; width: 50%; height: auto; margin: 2% auto 1% auto;} .section>.content>.words>.padding>h2 { position: relative; display: inline-block; text-align: center; height: 30px; padding: 5px 10px; margin: 0; color: #333; background: #FFFFFF; clear: both;} .section>.content>.words>.padding>.ctabutton { position: relative; display: table; text-align: center; width: auto !important; margin: 10px auto;} .section>.content p { position: relative; width: 90%; margin: 0px auto; padding: 1%; } .section>.content>.words { position: relative; display:block; float: none; width: 100%; overflow: hidden; margin: 0 auto; padding: 0; text-align: center; } .section>.content>.words>.padding { position: relative; display:block; float: none; width: 100%; overflow: hidden; margin: 0 auto; padding: 0; text-align: center; } .section>.content>.words>.padding .subtitle { font-size: 1.0em; line-height: 1.5em; font-weight: 400; margin: 0 5%; color: #333;} .section .multibuttons { position: relative; width: 90%; height: auto !important; margin: 0px auto 0px auto; padding: 0; z-index: 100; } .section .multibuttons ul { display: block; position: relative; width: 100%; margin: 0px auto; align-items: center; text-align: center; } .section .multibuttons ul li { list-style: none; display: inline-block; } .section .multibuttons ul li .multitext .linktitle { font-family: "Work Sans", Arial, sans-serif;position: relative; display:inline; float: left; background: #c11c1c; margin: 5px; padding: 1px 15px; text-align: center; } .section .multibuttons ul li .multitext .linktitle a { color: #FFFFFF; text-decoration: none; font-size: 1em; font-weight: 600; } /* start Spotlight/Profile styles */ .spotlight { position:relative; display:table; width:80%; max-width: 1200px; min-height: 300px; background:#222; padding: 5% 10%; margin: 50px auto; align-content: center; } .spotlight>.content { width: 100%; display: table; } .spotlight>.content>.imgshell, .spotlight>.content>.imgleft { position: relative; float:left; display:table-cell; width:45%; margin-right: 3%;z-index:501;} .spotlight>.content>.imgright { position: relative; float:right; display:table-cell; width:45%; margin-left: 3%; } .spotlight>.content>.imgcenter {float:none;width:100%;margin: 0px auto;} .spotlight>.content>.imagefull {display:block;width: 100%; z-index: 500; position: absolute; top: 0; left: 0; overflow: hidden; } .spotlight>.content>.imgleft img,.spotlight>.content>.imgshell img,.spotlight>.content>.imgright img,.spotlight>.content>.imagecenter img,.spotlight>.content>.imagefull img {width: 100%; height: auto; } .spotlight .content .embcenter { position: relative; width: 80%; margin: 0 auto 0px auto; background: #222; } .spotlight .content .embcenter iframe { width: 100%; height: auto !important; min-height: 500px; padding: 0; margin: 0; background: #222; } .spotlight .content .embfull { width: 100%; margin: 0 auto; padding: 0; background: #222; } .spotlight .content .embfull iframe { width: 100%; height: auto !important; min-height: 600px; padding: 0; margin: 0; background: #222; } .spotlight .content .embright { width: 50%; margin: 0; padding: 0; background: #222; float: right; display: inline; } .spotlight .content .embright iframe { width: 100%; height: auto !important; min-height: 340px; padding: 0; margin: 0 0 0 5%; background: #222; } .spotlight .content .embshell { width: 50%; height: auto !important; margin: 0 0 0 0; padding: 0; background: #222; float: left; display: inline; } .spotlight .content .embshell iframe { width: 100%; height: auto !important; min-height: 340px; padding: 0; margin: 0 5% 0 0; background: #222; } .spotlight .content .embleft { width: 50%; height: auto !important; margin: 0; padding: 0; background: #222; float: left; display: inline; } .spotlight .content .embleft iframe { width: 100%; height: auto !important; min-height: 340px; padding: 0; margin: 0 5% 0 0; background: #222; } .spotlight .caption { color: #FFFFFF; margin: 0; text-align: left;} .spotlight>.content>.words { position:relative; display:table-cell; height:auto; overflow: visible; margin: 0px auto; padding: 0%; text-align: center; color: #FFF; z-index: 501; } .spotlight>.content>.words>.padding { position: relative; width: 90%; height:auto; overflow: visible; margin: 0px 5%; padding: 0%; text-align: center; color: #FFF; } .spotlight>.content>.words>.padding>p>a:link {color: #FD0303;} .spotlight>.content>.words>.padding>h2 {color:#FFF; text-transform: uppercase; letter-spacing: 2px; } .spotlight>.content>.words>.padding>.subtitle { color:#FFF;} .spotlight>.content>.words>.padding>ul { width: 80%; height:auto; overflow: visible; margin: 0px auto; padding: 0%; text-align: left; color: #FFF; } .spotlight>.content>.words>.padding>ul>li { text-align: left; } .spotlight>.content>.words>.padding .ctabutton {margin-bottom: 10px; } .spotlight>.content>.words>.padding .ctabutton>button.modal-open { font-size: 1.0em; margin: 0; padding: 0; line-height: 0.8em;} .spotlight>.content>.words>.padding .cms-subtitle1 { font-family: "Source Sans Pro", "SourceSans", sans-serif;color:#FFF; margin: 20px 0px 5px 0px; padding: 0px; font-size: 1.5em; font-weight: 700; } .spotlight>.content>.words>.padding .cms-subtitle2 { font-family: "Source Sans Pro", "SourceSans", sans-serif;color:#999; margin: 15px 0px 0px 0px; padding: 0px; font-size: 1.25em; font-weight: 700; } .spotlight>.content>.words>.padding .cms-subtitle3 { font-family: "Source Sans Pro", "SourceSans", sans-serif;color:#FFF; margin: 15px 0px 0px 0px; padding: 0px; font-size: 1.25em; font-weight: 700; } .spotlight>.content>.words>.padding .cms-caption { font-family: "Source Sans Pro", "SourceSans", sans-serif; font-style: italic; color:#FFF; margin: 10px 0px; padding: 0px; font-size: 0.8em;} .spotlight>.content>.words>.multibuttons{ width: 100%; } .spotlight>.content>.words>.multibuttons>ul {padding: 5px; } .spotlight>.content>.words>.multibuttons>ul>li { list-style: none; width: 100%; height:auto; overflow: visible; margin: 0px; padding: 0%; text-align: center; color: #FFF;} .spotlight>.content>.words>.multibuttons>ul>li>.multitext>.linktitle { font-family: "Josefin Sans", "SourceSans", Helvetica, sans-serif;display: inline-block; width: auto; height: auto; margin: 0 0 10px 0; padding: 10px; background: #c11c1c; border: none; border-radius: 0; color: #FFF; white-space: nowrap; font-size:.75em; line-height: .5em; text-transform:uppercase; letter-spacing: 1px; font-weight: 800;} .spotlight>.content>.words>.multibuttons>ul>li>.multitext>.linktitle a:link, .spotlight>.content>.words>.multibuttons>ul>li>.multitext>.linktitle a:visited { color:#FFF; text-decoration: none; } /* Subhead Styles*/ .subhead { position:relative; display:block; width:100%; height: auto !important; overflow: visible; margin: 20px auto 20px auto; padding: 20px 0px 30px 0px; align-content: center;border-top: 1px solid #999; border-bottom: 1px solid #999; } /* CMS Background Colors */ .subhead.bgwhite { background: #FFF !important;} .subhead.bgwhite .words, .subhead.bgwhite>.content>.words>.padding>h2{ color: #222; } .subhead.bgwhite>.content>.words>.multibuttons>ul>li {background: #FFF !important;} .subhead.bglight { background: #ededed !important;} .subhead.bglight>.content>.words, .subhead.bglight>.content>.words>.padding>h2{ color: #222; } .subhead.bglight>.content>.words>.multibuttons>ul>li {background: #dadada !important;} .subhead.bgmedium { background: #465449 !important;} .subhead.bgmedium>.content>.words, .subhead.bgmedium>.content>.words>.padding>h2{ color: #FFF; } .subhead.bgmedium>.content>.words>.multibuttons>ul>li {background: #465449 !important; color: #FFF; } .subhead.bgmedium>.content>.words>.multibuttons>ul>li>.multitext, .subhead.bgmedium>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {background: #465449 !important; color: #FFF;} .subhead.bgdark { background: #364c59 !important;} .subhead.bgdark>.content>.words, .subhead.bgdark>.content>.words>.padding>h2{ color: #FFF; } .subhead.bgdark>.content>.words>.multibuttons>ul>li {background: #364c59 !important; color: #FFF; } .subhead.bgdark>.content>.words>.multibuttons>ul>li>.multitext, .subhead.bgdark>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {background: #364c59 !important; color: #FFF; } .subhead.bgbright { background: #685569 !important;} .subhead.bgbright>.content>.words, .subhead.bgbright>.content>.words>.padding>h2{ color: #FFF; } .subhead.bgbright>.content>.words>.multibuttons>ul>li {background: #685569 !important; color: #FFF; } .subhead.bgbright>.content>.words>.multibuttons>ul>li>.multitext, .subhead.bgbright>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {background: #685569 !important; color: #FFF; } .subhead>.content { position: relative; display:block; float: none; width: 100%; max-width: 1200px; overflow: hidden; margin: 0 auto; padding: 0; text-align: center; } .subhead>.content>.words>.padding>h2 { position: relative; display: inline-block; text-align: left; height: 30px; width: auto !important; padding: 5px 10px; margin: 0;background: transparent; color: #333; clear: both;} .subhead>.content>.words>.padding>.ctabutton { position: relative; display: block; text-align: center; } .subhead>.content p { position: relative; display: block; width: 100%; background: transparent; margin: 0; padding: 0 10px; } .subhead>.content>.words { position: relative; display:block; float: none; width: 100%; overflow: hidden; margin: 0 auto; padding: 0; text-align: left; } .subhead>.content>.words>.padding { position: relative; display:block; float: none; width: 100%; overflow: hidden; margin: 0 auto; padding: 0; text-align: left; } .subhead>.content>.words>.padding .subtitle { font-size: 1.0em; line-height: 1.5em; font-weight: 400; margin: 0 5%; color: #333;} .subhead>.content>.words>.multibuttons { display: block; } .subhead>.content>.words>.multibuttons>ul { display: block; width: 100%; padding: 0; margin: 10px; } .subhead>.content>.words>.multibuttons>ul>li { list-style: none; display: inline; } .subhead>.content>.words>.multibuttons>ul>li>.multitext { list-style: none; display: inline; float: left; margin: 0px 20px 10px 0; } .subhead>.content>.words>.multibuttons>ul>li>.multitext>.linktitle { font-family: "Work Sans", Arial, sans-serif;position: relative; display:inline; float: none; background: #ededed; border: 1px solid #CCCCCC; margin: 10px auto; padding: 1px 15px 3px 15px; text-align: center; } .subhead>.content>.words>.multibuttons ul li>.multitext>.linktitle a { color: #222222; text-decoration: none; font-size: 1em; font-weight: 600; } /* Text Styles */ .text { position: relative; display: table; width: 100%; height: 100%; margin: 40px auto 40px auto; padding: 0; overflow: visible; } .text .content { position: relative; display:block; width: 100%; max-width: 1000px; height: 100%; padding: 0; margin: 0px auto; overflow: visible; } .text .content .imgshell { position: relative; display:inline; float: left; width: 45%; height: auto !important; overflow: hidden; margin: 0px 30px 0px 0px; } .text .content .imgshell img { width: 100%; height: auto; margin: 0px 30px 0px 0px;} .text .content .imgright { position: relative; display:inline; float: right; width: 45%; height: auto !important; overflow: hidden; margin: 20px 0px 0px 30px; padding: 0; } .text .content .imgright img { width: 100%; height: auto; margin: 0;} .text>.content .imgcenter { position: relative; display:inline; float: left; width: 70%; overflow: hidden; margin: 0px auto; } .text>.content .imgcenter img { width: 100%; height: auto; margin: 0px 0px 0px 0px;} .text>.content .embcenter { position: relative; width: 80%; margin: 0 auto 0px auto; } .text>.content .embcenter iframe { width: 100%; height: auto !important; min-height: 600px; padding: 0; margin: 0; } .text>.content .embfull { width: 100%; margin: 0 auto; padding: 0; background: #222222; } .text>.content .embfull iframe { width: 100%; height: auto !important; min-height: 600px; padding: 0; margin: 0; } .text>.content .embright { width: 48%; margin: 30px 0 30px 30px; padding: 0; background: #FFFFFF; float: right; display: inline; } .text>.content .embright iframe { width: 100%; height: auto !important; min-height: 320px; padding: 0; margin: 0; } .text>.content .embshell { width: auto !important; width: 48%; height: auto !important; margin: 0 30px 0 0; padding: 0; background: #FFFFFF; float: left; display: inline; } .text>.content .embshell iframe { width: 100%; height: auto !important; min-height: 320px; padding: 0; margin: 0; } .text>.content .embleft { width: 48%; height: auto !important; margin: 30px 30px 30px 0; padding: 0; background: #FFFFFF; float: left; display: inline; } .text>.content .embleft iframe { width: 100%; height: auto !important; min-height: 320px; padding: 0; margin: 0; } .text .content .words { position: relative; display: inline; width: auto !important; padding: 0; margin: 0px; line-height: 30px; } .text .content .words .padding { margin: 0; padding: 15px 0 0 0; width: 100%; } .text .content .words .padding h2 { margin: 20px 0; padding: 0; } .text .content .words .padding .subtitle {font-family: "Work Sans", Arial, sans-serif; color: #c11c1c; margin: 0px 0px; padding: 0px;font-size: 1.3em;font-weight: 700;} .text>.content>.words>.multibuttons { width: 100%; margin: 20px 0; padding: 0; } .text>.content>.words>.multibuttons>ul { display: table; table-layout: fixed;margin: 0; padding: 0; width: 100%; list-style: none; } .text>.content>.words>.multibuttons>ul>li { display: table-cell; margin: 0; padding: 0px; float:none; } .text>.content>.words>.multibuttons>ul>li>.imgshell {width: 10%; margin: 0; padding: 0;} .text>.content>.words>.multibuttons>ul>li>.multitext {width: 90%; margin: 0; padding: 0;} .text>.content>.words>.multibuttons>ul>li>.multitext button.modal-open {color: #FFFFFF;} .text>.content>.words>.multibuttons>ul>li>.imgshell>img { height: 25px; width: auto; } .text>.content>.words>.multibuttons>ul>li>.multitext>.ctabutton>button.modal-open { margin: 0; padding: 0; line-height: 0.8em; } .text>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {} .text>.content>.words p { line-height: 28px;} .text .content .embedshell { position: relative; display:inline; float: left; width: 25%; min-width: 0%; height: auto; overflow: hidden; margin: 10px 30px 0px 0px; } .text .content .embedshell iframe { width: auto; height: auto; } .text .textlinks { display: block; max-width: 100%; float: left;min-width: 0%; min-height: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 10px 0px; } .text .textlinks .content { width: 100%; min-height: 100px; padding: 0px; margin: 0px 0px 0px 10px; border-right: 1px solid #CCCCCC; } .text .textlinks ul { margin: 0px 0px 0px 20px; } .text.expandblock { min-height: 0px; } .text .content .imgright .ctabutton { position: absolute; bottom: 10px; right: 10px; } /* Event Archive Expand Styles */ .text > .content > .archive-expand { position: relative; display: block; width: 90%; margin: 0 auto; padding: 0; } .text > .content > .archive-expand ul { list-style: none; position: relative; display: block; margin: 0; padding: 0; } .text > .content > .archive-expand ul li { list-style: none; position: relative; display: block; margin: 10px 0; padding: 10px; border-top: 1px solid #999; } /* start Text Mosaic styles */ .textpics { position: relative; width: 90%; max-width: 1100px; margin: 30px auto; padding: 0px 0; display: block; float: none; overflow: visible; height: 550px; } .textpics .content { position: relative; width: 100%; height: auto; margin: 0 auto; padding: 1%; display: table; min-height: 500px; } .textpics>.content>.imgshell { position: relative; display: table-cell; width: 50%; float: right; z-index: 100;} .textpics>.content>.imgshell img { position: relative; width: 100%; height: auto !important; transition: transform 2s ease;} .textpics>.content>.imgshell:hover img {transform: scale(1.1);} .textpics>.content>.imgshell .caption { position: absolute; left: 1%; top: 1%; color: #FFF; z-index: 200; font-family: "Work Sans", Arial, sans-serif;font-size: 1.2em; text-align: left; font-weight:600; font-style: normal;} .textpics>.content>.imgleft { position: relative; display: table-cell; width: 50%; float: left; z-index: 100; margin: 0 240px 0 0; padding: 0; } .textpics>.content>.imgleft img { position: relative; width: 100%; height: auto !important; transition: transform 2s ease;} .textpics>.content>.imgleft:hover img {transform: scale(1.1);} .textpics>.content>.imgleft .caption { position: absolute; left: 1%; top: 1%; color: #FFF; z-index: 200; font-family: "Work Sans", Arial, sans-serif;font-size: 1.2em; text-align: left; font-weight:600; font-style: normal;} .textpics>.content>.words { position: relative; width: 100%; max-width: 1200px; height: auto; display: block; margin: 0px; padding: 0; overflow: visible; } .textpics>.content>.words>.padding { position: relative; text-align: left; width: 35%; float: left; display: inline; padding: 75px 0 0 0; } .textpics>.content>.words>.padding>p { line-height:1.5em; margin: 10px 0; } .textpics>.content>.words>.padding>h2 { text-align: left; color: #222222; font-weight: 600; font-size: 1.8em !important; padding: 0 0 10px 0; margin:0 0 10px 0; line-height: 1em; border-bottom: 1px solid #222; } .textpics>.content>.words>.padding>.subtitle { margin:0; text-align: left; font-size: 1.1em;color: #222222;} .textpics>.content>.words>.padding>.ctabutton { position: relative; margin:10px auto; text-align: center; float: none; } .textpics>.content>.words>.multibuttons { position: absolute; width: 60%; max-width:60%; display: inline; right: 0; margin: 0; padding: 0; background: transparent; } .textpics>.content>.words>.multibuttons>ul { position: relative; width: 100%; display: block; padding: 0; margin: 270px 0 0 0; } .textpics>.content>.words>.multibuttons>ul>li { position: relative; width: 100%; display:table; float: none; margin: 0%; padding: 1%; height: auto; vertical-align: top; background: transparent; z-index: 102;} .textpics>.content>.words>.multibuttons>ul>li>.multimgshell {position: absolute; left: 7%; top: 10%; width: 37%; height: auto; overflow: hidden; padding: 0; margin: 0 10px 0px 0; z-index: 102; } .textpics>.content>.words>.multibuttons>ul>li>.multimgfull{ position: relative; width: 100%; height: auto; overflow: hidden; padding: 0; margin: 0 4% 0 0;display: block; float: none;} .textpics>.content>.words>.multibuttons>ul>li>.multimgleft {position: absolute; left: 7%; top: 10%; width: 37%; height: auto; overflow: hidden; padding: 0; margin: 0 10px 0px 0; z-index: 102; } .textpics>.content>.words>.multibuttons>ul>li>.multimgshell img, .textpics>.content>.words>.multibuttons>ul>li>.multimgleft img, .textpics>.content>.words>.multibuttons>ul>li>.multimgfull img { position: relative; width: 100%; height: auto !important; transition: transform 2s ease;} .textpics>.content>.words>.multibuttons>ul>li>.multimgleft:hover img {transform: scale(1.1);} .textpics>.content>.words>.multibuttons>ul>li>.multimgright { position: absolute; right: 5%; width: 55%; height: auto; overflow: hidden; padding: 0; margin: 0 0 10px 20px; z-index: 101; } .textpics>.content>.words>.multibuttons>ul>li>.multimgright img { position: relative; width: 100%; height: auto !important; transition: transform 2s ease;} .textpics>.content>.words>.multibuttons>ul>li>.multimgright:hover img {transform: scale(1.1);} /* one-col multiimg center modified for tall/vertical/portrait images */ .textpics>.content>.words>.multibuttons>ul>li>.multimgcenter {position: absolute; left: 30%; bottom: 0; width: 30%; height: auto; padding: 0; margin: 0; z-index: 104; } .textpics>.content>.words>.multibuttons>ul>li>.multimgcenter img { position: relative; width: 100%; height: 100%;transition: transform 2s ease;} .textpics>.content>.words>.multibuttons>ul>li>.multimgcenter:hover img {transform: scale(1.1);} .textpics>.content>.words>.multibuttons>ul>li>.multimgshell iframe {width: 100%; height: 100%; } .textpics>.content>.words>.multibuttons>ul>li>.multiembshell, .textpics>.content>.words>.multibuttons>ul>li>.multiembleft, .textpics>.content>.words>.multibuttons>ul>li>.multiembright, .textpics>.content>.words>.multibuttons>ul>li>.multiembcenter, .textpics>.content>.words>.multibuttons>ul>li>.multiembfull{ position: relative; width: 100%; height: auto; overflow: hidden; padding: 0; margin: 0;display: block; float: none;} .textpics>.content>.words>.multibuttons>ul>li>.multiembshell iframe, .textpics>.content>.words>.multibuttons>ul>li>.multiembleft iframe, .textpics>.content>.words>.multibuttons>ul>li>.multiembright iframe, .textpics>.content>.words>.multibuttons>ul>li>.multiembcenter iframe, .textpics>.content>.words>.multibuttons>ul>li>.multiembfull iframe { position: relative; width: 100%; height: auto !important; min-height: 265px; } .textpics>.content>.words>.multibuttons>ul>li>.multitext { position: relative; width: auto !important; min-width: 50%; padding: 2%; margin: 0; font-size: 0.95em; line-height: 1.7em; /*display: table-cell;*/ color: #FFFFFF; vertical-align:top; text-align: left; display: none;} /*.textpics>.content>.words>.multibuttons>ul>li>.multitext .cms-button {margin: 10px 0; } .textpics>.content>.words>.multibuttons>ul>li>.multitext .cms-caption {color: #ededed;} .textpics>.content>.words>.multibuttons>ul>li>.multitext>.linktitle { position: absolute; top: 1%; right: 1%; font-family: "Work Sans", Arial, sans-serif;font-size: 1.3em; text-align: left; color:#FFFFFF;font-weight:600; margin: 0px; padding:0; z-index: 200; } .textpics>.content>.words>.multibuttons>ul>li>.multitext>p {margin: 20px 0px 5px 0px; padding:0; } .textpics>.content>.words>.multibuttons>ul>li>.multitext>a:link, .textpics>.content>.words>.multibuttons>ul>li>.multitext>a:visited {text-decoration:underline;color:#FFFFFF;} .textpics>.content>.words>.multibuttons>ul>li>.multitext>a:active, .textpics>.content>.words>.multibuttons>ul>li>.multitext>a:hover{text-decoration:underline;color:#FFFFFF;} .textpics>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:link, .textpics>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:visited {text-decoration:none;color:#FFFFFF;} .textpics>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:active, .textpics>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:hover{text-decoration:underline;color:#FFFFFF;}*/ .textpics>.content.alignright>.imgright { position: relative; display: table-cell; width: 50%; float: right; z-index: 100;} .textpics>.content.alignright>.imgright img { position: relative; width: 100%; height: auto !important; transition: transform 2s ease;} .textpics>.content.alignright>.imgright:hover img {transform: scale(1.1);} .textpics>.content.alignright>.imgright .caption { position: absolute; left: 5%; top: 1%; color: #FFF; z-index: 200; font-family: "Work Sans", Arial, sans-serif; font-size: 1.2em; text-align: left; font-weight:600; font-style: normal; width: auto; background: rgba(0, 0, 0, 0.7); padding: 1px 5px;} .textpics>.content.alignright>.words { position: relative; width: 100%; max-width: 1200px; height: auto; display: block; margin: 0px; padding: 0; overflow: visible; } .textpics>.content.alignright>.words>.padding { position: relative; text-align: left; width: 35%; float: left; display: inline; padding: 75px 0 0 0; } .textpics>.content.alignright>.words>.multibuttons { position: absolute; width: 60%; max-width:60%; display: inline; right: 0; margin: 0; padding: 0; background: transparent; } .textpics>.content.alignright>.words>.multibuttons>ul>li>.multimgleft {position: absolute; left: 7%; top: 0%; width: 37%; height: auto; overflow: hidden; padding: 0; margin: 25px 10px 0px 0; z-index: 102; } .textpics>.content.alignright>.words>.multibuttons>ul>li>.multimgleft .caption { position: absolute; bottom: 5%; left: 2%; z-index: 110; margin: 0; font-family: "Work Sans", Arial, sans-serif;font-size: 1.1em; text-align: left; color:#FFFFFF;font-weight:600; font-style: normal; width: auto; background: rgba(0, 0, 0, 0.7); padding: 1px 5px;} .textpics>.content.alignright>.words>.multibuttons>ul>li>.multimgright { position: absolute; right: 5%; width: 55%; height: auto; overflow: hidden; padding: 0; margin: 0 0 10px 20px; z-index: 101; } .textpics>.content.alignright>.words>.multibuttons>ul>li>.multimgright .caption { position: absolute; bottom: 5%; left: 5%; z-index: 110; margin: 0; font-family: "Work Sans", Arial, sans-serif;font-size: 1.2em; text-align: left; color:#FFFFFF;font-weight:600; font-style: normal; width: auto; background: rgba(0, 0, 0, 0.7); padding: 1px 5px;} .textpics.alignleft .content { position: relative; width: 100%; height: auto; margin: 0 auto; padding: 1%; display: table; min-height: 500px; } .textpics .content.alignleft .imgleft { position: relative; display: inline; width: 50%; float: left; z-index: 100; margin: 0; } .textpics .content.alignleft .imgleft img { position: relative; width: 100%; height: auto !important; transition: transform 2s ease;} .textpics>.content.alignleft>.imgleft .caption { position: absolute; left: 5%; top: 1%; color: #FFF; z-index: 200; font-family: "Work Sans", Arial, sans-serif; font-size: 1.2em; text-align: left; font-weight:600; font-style: normal; width: auto; background: rgba(0, 0, 0, 0.7); padding: 1px 5px;} .textpics .content.alignleft .words { position: relative; width: 100%; max-width: 1200px; height: auto; display: block; margin: 0px; padding: 0; overflow: visible; } .textpics .content.alignleft .words .padding { position: relative; text-align: left; width: 35%; float: right; display: inline; padding: 75px 0 0 0; } .textpics>.content.alignleft>.words>.multibuttons { position: absolute; width: 60%; max-width:60%; display: inline; left: 0; margin: 0; padding: 0; background: transparent; } .textpics>.content.alignleft>.words>.multibuttons>ul>li>.multimgleft {position: absolute; left: 5%; top: 10%; width: 55%; height: auto; overflow: hidden; padding: 0; margin: 0 10px 0px 0; z-index: 101; } .textpics>.content.alignleft>.words>.multibuttons>ul>li>.multimgleft .caption { position: absolute; bottom: 5%; left: 5%; z-index: 110; margin: 0; font-family: "Work Sans", Arial, sans-serif;font-size: 1.2em; text-align: left; color:#FFFFFF;font-weight:600; font-style: normal; width: auto; background: rgba(0, 0, 0, 0.7); padding: 1px 5px;} .textpics>.content.alignleft>.words>.multibuttons>ul>li>.multimgright { position: absolute; right: 7%; width: 37%; height: auto; overflow: hidden; padding: 0; margin: 20px 0 10px 20px; z-index: 102; } .textpics>.content.alignleft>.words>.multibuttons>ul>li>.multimgright .caption { position: absolute; bottom: 5%; left: 5%; z-index: 110; margin: 0; font-family: "Work Sans", Arial, sans-serif;font-size: 1.2em; text-align: left; color:#FFFFFF;font-weight:600; font-style: normal; width: auto; background: rgba(0, 0, 0, 0.7); padding: 1px 5px;} /* Three Column styles */ .threecol { position: relative; width: 100%; height: auto; margin: 30px auto 30px auto; padding: 30px 0; display: table; background: #FFF; } /* CMS Background Colors */ .threecol.bgwhite { background: #FFF !important;} .threecol.bgwhite .words { color: #222; background: #FFF; } .threecol.bgwhite .content .words .padding .ctabutton a:link {background: #222 !important; } .threecol.bgwhite>.content>.words>.padding>h2{ color: #222; } .threecol.bgwhite>.content>.words>.padding>.subtitle{ color: #222; } .threecol.bgwhite>.content>.words>.multibuttons>ul>li {background: #ededed !important;} .threecol.bgwhite>.content>.words>.multibuttons>ul>li {padding: 0; margin: 0 2%; } .threecol.bgwhite>.content>.words>.multibuttons>ul>li>.multitext {background: #FFF !important; color: #222; width: 100%; margin: 0; padding: 0; } .threecol.bgwhite>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {color: #000; font-weight: 700;margin: 5px auto 5px auto;} /* Light Background Mods */ .threecol.bglight { background: #ededed !important;} .threecol.bglight .words { color: #222; background: #ededed; } .threecol.bglight .content .words .padding .ctabutton a:link {background: #222 !important; } .threecol.bglight>.content>.words>.padding>h2{ color: #222; } .threecol.bglight>.content>.words>.padding>.subtitle{ color: #222; } .threecol.bglight>.content>.words>.multibuttons>ul>li {background: #FFF !important;} .threecol.bglight>.content>.words>.multibuttons>ul>li {padding: 0; margin: 0 2%; } .threecol.bglight>.content>.words>.multibuttons>ul>li>.multitext { background: #FFF !important; color: #222; width: 80%; margin: 0; padding: 5% 10% 10% 10%; } .threecol.bglight>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {color: #000; font-weight: 700;margin: 5px auto 5px auto;} /* Medium Background Mods */ .threecol.bgmedium{ background: #465449 !important; } .threecol.bgmedium .words { color: #FFF; background: #465449; } .threecol.bgmedium .content .words .padding .ctabutton, .threecol.bgmedium .content .words .padding .ctabutton a:link, .threecol.bgmedium .content .words .padding .ctabutton a:visited {background: #222 !important; } .threecol.bgmedium>.content>.words>.padding>h2{ color: #FFF; } .threecol.bgmedium>.content>.words>.padding>.subtitle{ color: #FFF; } .threecol.bgmedium>.content>.words>.multibuttons>ul>li {background: #465449 !important; color: #FFF; } .threecol.bgmedium>.content>.words>.multibuttons>ul>li {padding: 0; margin: 0 2%; } .threecol.bgmedium>.content>.words>.multibuttons>ul>li>.multitext { background: #FFF !important; color: #222; width: 80%; margin: 0; padding: 5% 10% 10% 10%; } .threecol.bgmedium>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {color: #000; font-weight: 700;margin: 5px auto 5px auto;} /* Dark Background Mods */ .threecol.bgdark{ background: #364c59 !important; } .threecol.bgdark .words { color: #FFF; background: #364c59; } .threecol.bgdark .content .words .padding .ctabutton, .threecol.bgdark .content .words .padding .ctabutton a:link, .threecol.bgdark .content .words .padding .ctabutton a:visited {background: #222 !important; } .threecol.bgdark>.content>.words>.padding>h2{ color: #FFF; } .threecol.bgdark>.content>.words>.padding>.subtitle{ color: #FFF; } .threecol.bgdark>.content>.words>.multibuttons>ul>li {background: #364c59 !important; color: #FFF; } .threecol.bgdark>.content>.words>.multibuttons>ul>li {padding: 0; margin: 0 2%; } .threecol.bgdark>.content>.words>.multibuttons>ul>li>.multitext { background: #FFF !important; color: #222; width: 80%; margin: 0; padding: 5% 10% 10% 10%; } .threecol.bgdark>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {color: #000; font-weight: 700;margin: 5px auto 5px auto;} /* Bright Background Mods */ .threecol.bgbright{ background: #685569 !important; } .threecol.bgbright>.content>.words { color: #FFF; background: #685569; } .threecol.bgbright>.content>.words>.padding .ctabutton, .threecol.bgbright>.content>.words>.padding .ctabutton a:link, .threecol.bgbright>.content>.words>.padding .ctabutton a:visited {background: #222 !important; } .threecol.bgbright>.content>.words>.padding>h2{ color: #FFF; } .threecol.bgbright>.content>.words>.padding>.subtitle{ color: #FFF; } .threecol.bgbright>.content>.words>.multibuttons>ul>li {background: #685569 !important; color: #FFF; } .threecol.bgbright>.content>.words>.multibuttons>ul>li {padding: 0; margin: 0 2%; } .threecol.bgbright>.content>.words>.multibuttons>ul>li>.multitext { background: #FFF !important; color: #222; width: 80%; margin: 0; padding: 5% 10% 10% 10%; } .threecol.bgbright>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {color: #000; font-weight: 700;margin: 5px auto 5px auto;} /* Background Caption Mods */ .threecol.bgdark .content .imgright .caption, .threecol.bgmedium .content .imgright .caption, .threecol.bgbright .content .imgright .caption, .threecol.bgdark .content .imgleft .caption, .threecol.bgmedium .content .imgleft .caption, .threecol.bgbright .content .imgleft .caption, .threecol.bglight .content .imgfull .caption, .threecol.bgdark .content .imgfull .caption, .threecol.bgmedium .content .imgfull .caption, .threecol.bgbright .content .imgfull .caption {color: #FFF; margin: 0; width: 100%; } .threecol .content { position: relative; width: 100%; max-width: 1100px; height: auto; margin: 50px auto; padding: 0px; display: table;} .threecol .content>.imgleft, .threecol>.content>.imgshell { position: relative; display:table-cell; float: left; width: 29%; height: auto !important; overflow: hidden; margin: 0px 30px 0px 20px; padding: 1%; background: #FFFFFF; } .threecol .content>.imgleft img, .threecol>.content>.imgshell img { width: 100%; height: auto; margin: 0px 30px 0px 0px;} .threecol .content>.imgright { position: relative; display:table-cell; float: right; width: 29%; height: auto !important; overflow: hidden; margin: 0px 20px 0px 30px; padding: 1%; background: #FFFFFF; } .threecol .content>.imgright img { width: 100%; height: auto; margin: 0;} .threecol>.content>.imgcenter { position: relative; display:inline; float: left; width: 30%; overflow: hidden; margin: 0px auto; } .threecol>.content>.imgcenter img { width: 100%; height: auto; margin: 0px 0px 0px 0px;} .threecol>.content>.imgfull { position: relative; display:inline; float: left; width: 90%; overflow: hidden; margin: 0px auto; } .threecol>.content>.imgfull img { width: 100%; height: auto; margin: 0px 0px 0px 0px;} .threecol .content .embleft, .threecol>.content .embshell { position: relative; display:table-cell; float: left; width: 48%; height: auto !important; overflow: hidden; margin: 0px 30px 20px 0px; } .threecol .content .embleft iframe, .threecol>.content .embshell iframe { width: 100%; height: auto; min-height: 300px; margin: 0px 30px 0px 0px;} .threecol .content .embright { position: relative; display:table-cell; float: right; width: 48%; height: auto !important; overflow: hidden; margin: 0px 0px 0px 30px; } .threecol .content .embright iframe { width: 100%; height: auto; min-height: 300px; margin: 0px 0px 0px 30px;} .threecol .content .embcenter { position: relative; display:inline; float: left; width: 70%; overflow: hidden; margin: 0px auto; } .threecol .content .embcenter iframe { width: 100%; height: auto; min-height: 400px; margin: 0px 0px 0px 0px;} .threecol .content .embfull { position: relative; display:block; float: none; width: 90%; overflow: hidden; margin: 0px auto; } .threecol .content .embfull iframe { width: 100%; height: auto; min-height: 600px; margin: 0px 0px 0px 0px;} .threecol>.content>.words { position: relative; width: 100%; max-width: 1100px; display: block; margin: 0px auto;} .threecol>.content>.words>.padding { text-align: center; line-height:1.9em; } .threecol>.content>.words>.padding>p { line-height:1.9em; margin: 20px; } .threecol>.content>.words>.padding>h2 { text-align: center; color: #222222; padding:0; margin:0 auto; line-height:1em; } .threecol>.content>.words>.padding>.subtitle { margin:10px auto; text-align: center; font-size: 1.1em;} .threecol>.content>.words>.multibuttons { position: relative; width: 100%; max-width: 1100px; display: block; margin: 20px auto 0px auto;} .threecol>.content>.words>.multibuttons>ul { position: relative; margin: 0px auto; padding: 0px; width: 100%; display: table; } .threecol>.content>.words>.multibuttons>ul>li {position: relative; width: 29%; display: table-cell; float: left; padding: 2% 4% 2% 0; margin: 0; text-align: left; min-height: 100px; background: #FFF; color: #222222; border-right: none; } .threecol .content .words .multibuttons .cms-button { margin: 15px auto; line-height: 1em;} .threecol>.content>.words>.multibuttons>ul>li>.multimgshell, .threecol>.content>.words>.multibuttons>ul>li>.multimgcenter{ position: relative; width: 100%; height: auto; display:block; overflow: hidden; margin: 0; } .threecol>.content>.words>.multibuttons>ul>li>.multimgleft { position: relative; width: 100%; height: auto; display:inline; overflow: hidden; margin: 0; } .threecol>.content>.words>.multibuttons>ul>li>.multimgright { position: relative; width: 100%; height: auto; display:inline; overflow: hidden; margin: 0; } .threecol>.content>.words>.multibuttons>ul>li>.multimgfull{ position: relative; width: 100%; height: auto; display:block; overflow: hidden; margin: 0;} .threecol>.content>.words>.multibuttons>ul>li>.multimgleft img, .threecol>.content>.words>.multibuttons>ul>li>.multimgright img, .threecol>.content>.words>.multibuttons>ul>li>.multimgcenter img, .threecol>.content>.words>.multibuttons>ul>li>.multimgshell img, .threecol>.content>.words>.multibuttons>ul>li>.multimgfull img { position: relative; width: 100%; height: auto; padding: 0; margin: 0;} .threecol>.content>.words>.multibuttons>ul>li>.multitext { position: relative; width: 96%; height: auto; margin: 2%; display:block; float:none; line-height: 1.8em; } .threecol>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {font-family: "Work Sans", Arial, sans-serif;font-size: 1.25em; text-align: left; color:#c11c1c;font-weight:700; margin: 10px auto 5px auto;} .threecol>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:link, .threecol>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:visited {text-decoration:none;} .threecol>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:active, .threecol>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:hover{text-decoration:underline;} .threecol>.content>.words>.multibuttons>ul>li>.multitext button.modal-open {color: #FFFFFF; text-decoration: none; font-weight: 700; } .threecol>.content>.words>.multibuttons>ul>li>.multitext>div>ul { position: relative; text-align: left; width: 90%; margin: 0 auto; } .threecol>.content>.words>.multibuttons>ul>li>.multitext>div>ul>li { text-align: left; margin: 0 0 10px 0; } .threecol>.content>.words>.multibuttons>ul>li>.multitext>.ctabutton>button.modal-open { margin: 0; padding: 10px 12px; line-height: 1.1em; } .threecol>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>.ctabutton {display:inline-block;margin-top: 20px;} .threecol>.content>.words>.multibuttons>ul>li>.multiembshell, .threecol>.content>.words>.multibuttons>ul>li>.multiembleft, .threecol>.content>.words>.multibuttons>ul>li>.multiembright, .threecol>.content>.words>.multibuttons>ul>li>.multiembcenter { position: relative; width: 90%; height: auto; display:block; overflow: hidden; margin: 5%; } .threecol>.content>.words>.multibuttons>ul>li>.multiembshell img { position: relative; width: 100%; height: 100%; display:block; max-height: 150px; } .threecol>.content>.words>.multibuttons>ul>li>.multiembshell iframe, .threecol>.content>.words>.multibuttons>ul>li>.multiembleft iframe, .threecol>.content>.words>.multibuttons>ul>li>.multiembright iframe, .threecol>.content>.words>.multibuttons>ul>li>.multiembcenter iframe { position: relative; width: 100%; height: 100%; display:block; max-height: 150px; } /* -------- Top (Page) Title ---------- */ .toptitle { position: relative; display: block; text-align: center; height: auto !important; width: 90%; max-width: 1000px; padding: 0; margin: 20px auto; background:url(https://www.bard.edu/images/line.png) repeat-x;} .toptitle>h2 { position: relative; display: inline-block; text-align: center; height: 30px; padding: 5px 10px; margin: 0 auto;background: #FFFFFF; color: #333; clear: both;} .toptitle>.ctabutton { position: relative; display: inline-block; text-align: center; margin: 10px auto; } /* Two Column Styles */ .twocol { position: relative; width: 100%; height: auto; margin: 30px auto; padding: 30px 0; display: table; float: none; background: #ededed;} /* CMS Background Colors */ .twocol.bgwhite { background: #FFF !important;} .twocol.bgwhite .words { color: #222; background: #FFF; } .twocol.bgwhite .content .words .padding .ctabutton a:link {background: #222 !important; } .twocol.bgwhite>.content>.words>.padding>h2{ color: #222; } .twocol.bgwhite>.content>.words>.multibuttons>ul>li {background: #FFF !important;} .twocol.bgwhite>.content>.words>.multibuttons>ul>li {padding: 0; margin: 0 2% 0 0; } .twocol.bgwhite>.content>.words>.multibuttons>ul>li>.multitext {background: #FFF !important; color: #222; width: 100%; margin: 0; padding: 0; } .twocol.bgwhite>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {color: #000; font-weight: 700;margin: 5px auto 5px auto;} /* Light Background Mods */ .twocol.bglight { background: #ededed !important;} .twocol.bglight>.content>.words { color: #222; background: #ededed; } .twocol.bglight>.content>.words>.padding { } .twocol.bglight>.content>.words>.padding .ctabutton a:link {background: #222 !important; } .twocol.bglight>.content>.words>.padding>h2{ color: #222; } .twocol.bglight>.content>.words>.multibuttons { border-left: 1px solid #222; } .twocol.bglight>.content>.words>.multibuttons>ul>li {background: #ededed !important;} .twocol.bglight>.content>.words>.multibuttons>ul>li>.multitext {background: #ededed !important; color: #222; width: 90%; margin: 0; padding: 2% 5% 5% 5%; } .twocol.bglight>.content>.words>.multibuttons>ul>li>.cms-button {background: #ad1a1f; } .twocol.bglight>.content>.words>.multibuttons>ul>li>.cms-button a {background: #ad1a1f; } .twocol.bglight>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {color: #000; font-weight: 700;margin: 5px auto 5px auto;} /* Medium Background Mods */ .twocol.bgmedium { background: #465449 !important; } .twocol.bgmedium .words { color: #FFF; background: #465449; } .twocol.bgmedium .content .words .padding .ctabutton, .twocol.bgmedium .content .words .padding .ctabutton a:link, .twocol.bgmedium .content .words .padding .ctabutton a:visited {background: #222 !important; } .twocol.bgmedium>.content>.words>.padding>h2{ color: #FFF; } .twocol.bgmedium>.content>.words>.multibuttons>ul>li {background: #465449 !important; color: #FFF; } .twocol.bgmedium>.content>.words>.multibuttons>ul>li {padding: 0; margin: 0 2% 0 0; } .twocol.bgmedium>.content>.words>.multibuttons>ul>li>.multitext {background: #FFF !important; color: #222; width: 90%; margin: 0; padding: 2% 5% 5% 5%; } .twocol.bgmedium>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {color: #000; font-weight: 700;margin: 5px auto 5px auto;} /* Dark Background Mods */ .twocol.bgdark { background: #364c59 !important; } .twocol.bgdark .words { color: #FFF; background: #364c59; } .twocol.bgdark .content .words .padding .ctabutton, .twocol.bgdark .content .words .padding .ctabutton a:link, .twocol.bgdark .content .words .padding .ctabutton a:visited {background: #222 !important; } .twocol.bgdark>.content>.words>.padding>h2 { color: #FFF; } .twocol.bgdark>.content>.words>.multibuttons>ul>li {background: #364c59 !important; color: #FFF; } .twocol.bgdark>.content>.words>.multibuttons>ul>li {padding: 0; margin: 0 2% 0 0; } .twocol.bgdark>.content>.words>.multibuttons>ul>li>.multitext {background: #FFF !important; color: #222; width: 90%; margin: 0; padding: 2% 5% 5% 5%; } .twocol.bgdark>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {color: #000; font-weight: 700;margin: 5px auto 5px auto;} /* Bright Background Mods */ .twocol.bgbright{ background: #685569 !important; } .twocol.bgbright .words { color: #FFF; background: #685569; } .twocol.bgbright .content .words .padding .ctabutton, .twocol.bgbright .content .words .padding .ctabutton a:link, .twocol.bgbright .content .words .padding .ctabutton a:visited {background: #222 !important; } .twocol.bgbright>.content>.words>.padding>h2{ color: #FFF; } .twocol.bgbright>.content>.words>.multibuttons>ul>li {background: #685569 !important; color: #FFF; } .twocol.bgbright>.content>.words>.multibuttons>ul>li {padding: 0; margin: 0 2% 0 0; } .twocol.bgbright>.content>.words>.multibuttons>ul>li>.multitext {background: #FFF !important; color: #222; width: 90%; margin: 0; padding: 2% 5%; } .twocol.bgbright>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {color: #000; font-weight: 700;margin: 5px auto 5px auto;} /* Background Caption Mods */ .twocol.bgdark .content .imgright .caption, .twocol.bgmedium .content .imgright .caption, .twocol.bgbright .content .imgright .caption, .twocol.bgdark .content .imgleft .caption, .twocol.bgmedium .content .imgleft .caption, .twocol.bgbright .content .imgleft .caption, .twocol.bglight .content .imgfull .caption, .twocol.bgdark .content .imgfull .caption, .twocol.bgmedium .content .imgfull .caption, .twocol.bgbright .content .imgfull .caption {color: #FFF; margin: 0; width: 100%; } .twocol>.content { position: relative; width: 100%; height: auto; margin: 0 auto; padding: 0; display: table; } .twocol>.content>.words { position: relative; width: 100%; max-width: 1200px; display: block; margin: 0px auto; float: none; padding: 0;} .twocol>.content>.words>.padding { position: relative; text-align: left; width: 25%; float: left; display: inline; padding: 2% 2% 2% 0; } .twocol>.content>.words>.padding>p { line-height:1.6em; margin: 10px 0; } .twocol>.content>.words>.padding>p .cms-button { margin: 10px 0; } .twocol>.content>.words>.padding>h2 { text-align: left; color: #222222; padding: 0; margin:0 auto; line-height:1em; } .twocol>.content>.words>.padding>.subtitle { margin:10px auto; text-align: left; font-size: 1.1em;} .twocol>.content>.words>.padding>.ctabutton { position: relative; margin: 10px auto; text-align: center; float: none; } .twocol>.content>.words>.padding>ul {padding: 0; list-style: none;} .twocol>.content>.words>.padding>ul li {padding: 0 0 15px 0; margin: 0 0 15px 0; border-bottom: 1px solid #ededed; } .twocol>.content>.imgshell { display:none;} .twocol>.content>.words>.multibuttons { position: relative; width: 71%; max-width:71%; display: inline; float: left; margin: 0px; padding: 0; } .twocol>.content>.words>.multibuttons>ul { position: relative; margin: 0px auto; width: 100%; display: block; } .twocol>.content>.words>.multibuttons>ul>li { position: relative; width: 45%; display:inline-block; float: left; margin: 0% 2.5% 0 0; padding: 0%;height: auto; vertical-align: top;background: #FFFFFF; } .twocol>.content>.words>.multibuttons>ul>li>.multimgshell, .twocol>.content>.words>.multibuttons>ul>li>.multimgleft, .twocol>.content>.words>.multibuttons>ul>li>.multimgcenter, .twocol>.content>.words>.multibuttons>ul>li>.multimgfull{ position: relative; width: 100%; height: auto; overflow: hidden; padding: 0; margin: 0 5% 0 0;display: block; float: none;} .twocol>.content>.words>.multibuttons>ul>li>.multimgshell img, .twocol>.content>.words>.multibuttons>ul>li>.multimgleft img, .twocol>.content>.words>.multibuttons>ul>li>.multimgcenter img, .twocol>.content>.words>.multibuttons>ul>li>.multimgfull img { position: relative; width: 100%; height: auto !important; } .twocol>.content>.words>.multibuttons>ul>li>.multimgright { position: relative; width: 45%; height: auto; max-height: 225px; overflow: hidden; padding: 0; margin: 0;display: table-cell; float: right; } .twocol>.content>.words>.multibuttons>ul>li>.multimgright img { position: relative; width: 100%; height: auto !important; } .twocol>.content>.words>.multibuttons>ul>li>.multiembshell, .twocol>.content>.words>.multibuttons>ul>li>.multiembleft, .twocol>.content>.words>.multibuttons>ul>li>.multiembright, .twocol>.content>.words>.multibuttons>ul>li>.multiembcenter, .twocol>.content>.words>.multibuttons>ul>li>.multiembfull{ position: relative; width: 100%; height: auto; overflow: hidden; padding: 0; margin: 0;display: block; float: none;} .twocol>.content>.words>.multibuttons>ul>li>.multiembshell iframe, .twocol>.content>.words>.multibuttons>ul>li>.multiembleft iframe, .twocol>.content>.words>.multibuttons>ul>li>.multiembright iframe, .twocol>.content>.words>.multibuttons>ul>li>.multiembcenter iframe, .twocol>.content>.words>.multibuttons>ul>li>.multiembfull iframe { position: relative; width: 100%; height: auto !important; min-height: 265px; } .twocol>.content>.words>.multibuttons>ul>li>.multitext { position: relative; width: auto !important; padding: 6% 6% 6% 6%; margin: 0; font-size: 0.95em; line-height: 1.5em; display: block; color: #333333; vertical-align:top; text-align: left; } .twocol>.content>.words>.multibuttons>ul>li>.multitext .linktitle { font-size: 1.8em; font-weight: 600; margin: 0 0 15px 0;} .twocol>.content>.words>.multibuttons>ul>li>.multitext>p {margin: 15px 0px 5px 0px; padding:0; line-height: 1.8em; } .twocol>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:link, .twocol>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:visited {text-decoration:none;} .twocol>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:active, .twocol>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:hover{text-decoration:underline;} .twocol>.content>.words>.multibuttons>ul>li>.multitext>.ctabutton {} .twocol>.content>.words>.multibuttons>ul>li>.multitext .cms-button {} .twocol>.content>.words>.multibuttons>ul>li>.multitext>.ctabutton>button.modal-open {} /* Video Cols */ .videorow { position: relative; display: block; width: 100%; height: auto !important; min-height: 0px; margin: 10px auto; padding: 0px; } .videorow .videocol { position:relative; display: inline; float: left; width: 48%; margin: 30px 0; padding-right: 2%; } .videorow .videocol .embedshell { position: relative; display: inline; width: 48%; height: auto !important; float: left; margin: 0px; padding: 0px; max-height: 150px; } .videorow .videocol .embedshell iframe { display: block; width: 100%; float: none; margin: 0px; padding: 0px; max-height: 150px; } .videorow .videocol .videotext { position: relative; display: inline; width: 48%; height: auto !important; float: left; margin: 0px; padding: 0 0 0 3%; max-height: 150px; } .videorow h3, .videorow .videocol .videotext h3 { margin: 0px; padding: 0; } .videorow ul { margin: 0px; padding: 0px; height: 150px; overflow-y: scroll; } /* Main Video Styles */ #video{ width:90%; min-height:0px; background-color: #ededed;overflow-x:auto; overflow-y: hidden; position: relative; margin: 0px auto; padding: 0px; } #video .content{ width:7000px; height:300px; background-color: #ededed; padding: 10px 20px; /* just an example*/} #video .content .textcol{ width:250px; height:498px; float:left; margin: 0px 20px 0px 0px; padding: 0px 10px 0px 0px; } #video .content .textcol { /*width: 95%; height: auto !important; margin: 0px 20px 0px 0px; padding: 0px 10px 0px 0px; overflow: scroll; */} #video .content iframe { width:95%; height: auto; max-height: 130px; float:left; margin: 0px 20px 0px 0px; padding: 0px 10px 0px 0px; position: relative; } #footnote { position: relative; display:block; width:85%; margin: 10px auto; padding: 10px 0; font-size: 0.8em; font-style: italic; color: #666666; border-top: 1px solid #222222; } /* footer styles */ .footer { font-size: .9em; color: #FFFFFF; line-height: 20px; } footer { position: relative; width: 100%; height: auto; min-height: 280px; margin: 0px; padding: 0; background-color: #222222; display: block; } footer ul {margin: 0px; padding: 0px; list-style:none;} footer .imgshell img { height: 35px; width: auto; margin: 0px; } footer .content { position: relative; width: 100%; max-width: 1200px; padding: 20px 0px; margin: 0 auto; background-color: #222222; display:table; height: auto;} footer .content a:link, footer .content a:visited { color: #FFFFFF; text-decoration:none;} footer .content a:hover, footer .content a:active { color:#FF5C5C; text-decoration:underline;} footer .content #footercontent { position: relative; width: 70% !important; display: table; float: left; margin: 0;padding: 0px; } footer .content #footercontent .footercol { position: relative; float:left; width: auto; max-width: 33%; display: table-cell; margin: 0px 2% 0px 0px; padding: 0px; } footer .content #footercontent .footercol.first .subtitle { } footer .content #footercontent .footercol .imgshell { width: 40%; height: auto !important; margin: 0px; padding: 0;} footer .content #footercontent .footercol .imgshell img { position: relative; width: 100%; height:auto; } footer .content #footercontent .footercol .subtitle { color: #FFFFFF; font-size: 1.3em; font-weight: 700; } footer .content #footercontent .footercol ul { display: block;} footer .content #footercontent .footercol .ctabutton { margin: 15px 0 0 0; } footer .content #footercontent .footercol .ctabutton a { color:#FFFFFF; text-decoration:underline;} footer .content #footercontact { position: relative; float: left; width: 30%; display: table-cell; margin: 0; } footer .content #footercontact .imgshell { display:block; height: 40px; width: auto !important; margin: 0px; padding: 0; } footer .content #footercontact .subtitle { display:block; float:none; color: #FFFFFF; font-size: 1.6em; font-weight: 100; margin: 0 0 10px 0; padding: 0; clear: both;} footer .content #footercontact #footiconbox { margin: 10px 0 0 0; } footer .content #footercontact #footiconbox .footericons { float: left; margin: 0 10px 0 0; height: auto; width: auto;} footer .content #footercontact #footiconbox .footericons img { height: 25px; width: auto;} .cal_small { display: none; } .cal_full {display: block; } /* ---------------- Bard Cart Code ----------------- */ #bardcart {position:fixed; display: none; /* HIDE IN 2023 */ bottom: 0; width: 100%; height: 160px; background: #222222; color: #FFFFFF; border-top: 1px solid #FFFFFF; z-index: 9999;} #bardcart .content {position:relative; width: 100%; max-width: 1300px; height: auto; display: table; background: #222222; color: #FFFFFF; padding: 1%; margin: 0 auto; overflow-x: scroll; overflow-y: hidden; } #bardcart .content h2 {position:relative;display:table-cell;float:left;width:auto;height:auto;padding:2%;color: #FFFFFF; margin: 0;line-height: 1em;} #bardcart .cartitem {position:relative;display:table-cell;float:left;width:20%;height:auto;padding:1% 2%;} #bardcart .cartitem .carttext {position:relative;display:table-cell;float:left;width:30%;height:auto;padding:5%; vertical-align: middle; text-transform: uppercase; letter-spacing: 2px;} #bardcart .cartitem .cartimg {position:relative;display:table-cell;float:left;width:60%;height:auto;padding:0; vertical-align: middle;} #bardcart .cartitem .cartimg img {position:relative;display:block;width:100%;height:auto;padding:0;} #bardcart .cartitem a:link, #bardcart .cartitem a:visited {color: #FFFFFF; text-decoration: none; } #bardcart .cartitem a:active, #bardcart .cartitem a:hover {color: #FFFFFF; text-decoration: underline;} /* ----------- Admission CTA Button for Program Websites --------- */ .cta-content {position: relative; z-index: 999999; top:-80px;background: transparent; width: 100%; max-width: 1300px; padding: 0px; margin: 0 auto; } .cta-content .cta-admission {position: arelative; z-index: 999999; float: right; background: #ad1a1f; width: auto; padding: 8px 15px; color: #FFFFFF; text-transform: uppercase; font-weight: 700; font-size: 0.8em; letter-spacing: 1px;} .cta-admission a:link {color: #FFFFFF; text-decoration:none;} .cta-admission a:visited {color: #FFFFFF; text-decoration:none;} .cta-admission a:active {color: #FFFFFF; text-decoration:underline;} .cta-admission a:hover {color: #FFFFFF; text-decoration:underline;} /* ----------- What are these ??? --------- */ .box-closeable, .box-closeable.open {/*position: absolute;*/display: block;visibility: visible;opacity: 1; -webkit-transition: opacity 100ms ease, visibility 0s linear 0s; -moz-transition: opacity 100ms ease, visibility 0s linear 0s; -ms-transition: opacity 100ms ease, visibility 0s linear 0s; -o-transition: opacity 100ms ease, visibility 0s linear 0s; transition: opacity 100ms ease, visibility 0s linear 0s;} .box-closeable.close { display: block; visibility: hidden;opacity: 0; -webkit-transition: opacity 100ms ease, visibility 200ms linear 0s; -moz-transition: opacity 100ms ease, visibility 200ms linear 0s; -ms-transition: opacity 100ms ease, visibility 200ms linear 0s; -o-transition: opacity 100ms ease, visibility 200ms linear 0s; transition: opacity 100ms ease, visibility 200ms linear 0s;} .button-close {position: absolute;display: inline-block;width: 14px;height: 14px;right: 0px;margin: 10px 10px 10px 10px;padding: 0px 0px 0px 0px;background-color: transparent;outline: none;border-width: 0px;border-style: solid;border-color: #FFFFFF;border-radius: 0px;overflow: hidden;z-index: 10;} .button-close::before, .button-close::after {display: block;position: absolute;left: -50%;top: 50%;content: ' ';width: 200%;height: 1px;background-color: #FFFFFF;transform-origin: 50% 50%;} .button-close::before {transform: rotate(-45deg) translate(0px, 0px);} .button-close::after {transform: rotate(45deg) translate(0px, 0px);} .button-close:hover {width: 18px;height: 18px;margin: 8px 8px 10px 10px;border-width: 1px;border-color: #999999;} .button-close:active, .button-close:focus {color: #CCCCCC;} .button-close:visited {color: #CCCCCC;} .button-close:hover::before, .button-close:hover::after {color: #CCCCCC;background-color: #FFFFFF;} .button-close:active::before, .button-close:focus::before, .button-close:active::after, .button-close:focus::after {height: 1px;color: #CCCCCC;background-color: #FFFFFF;} /* ---------------------------- Mega SCREEN DISPLAY STYLES ------------------------ */ @media only screen and (min-width: 1901px) and (max-width: 3000px) { #introshell>.sitetitle { position: absolute; top: 10px; left: 20% !important;; width: auto; max-width: 1200px; height: 200px;overflow: visible; float: none; margin: 2px auto; padding: 0px; z-index: 1001; } } /* ---------------------------- LARGE SCREEN DISPLAY STYLES ------------------------ */ @media only screen and (min-width: 1400px) and (max-width: 1900px) { #introshell>.sitetitle { position: absolute; top: 10px; left: 15% !important; width: auto; max-width: 1200px; height: 200px; overflow: visible; float: none; margin: 2px auto; padding: 0px; z-index: 1001; } } /* ---------------------------- LARGE SCREEN DISPLAY STYLES ------------------------ */ @media only screen and (min-width: 1200px) and (max-width: 1401px) { #introshell>.sitetitle { position: absolute; top: 10px; left: 5% !important; width: auto; max-width: 1200px; height: 200px; overflow: visible; float: none; margin: 2px auto; padding: 0px; z-index: 1001; border: none; } } /* ---------------------------- DESKTOP ONLY STYLES ------------------------ */ @media only screen and (min-width: 1001px) and (max-width: 1199px) { #ccelogo { width: 126px; height:102px; left: 0%; z-index: 9999; } #ccelogo img { width: 126px; height:102px; left: 0%; z-index: 9999; } #hppr {width: 95%; margin: 20px 2.5%;} header .topnav { width: 100%; height: 25px; background: #222222; text-align: right; margin: 0; padding: 0;} header .topnav .toplinks { width: 96%; max-width: 96%; height: 25px; background: #222222; color: #CCCCCC; text-align: right; margin: 0; padding: 5px 2%; font-size: 0.8em;} ul.subnav { } ul.subnav li a:link, ul.subnav li a:visited { color:#FFFFFF; text-decoration: none; padding: 10px 20px 10px 20px; margin: 0px;} ul.subnav li a:hover, ul.subnav li a:active { color:#c11c1c; text-decoration: underline; background-color: #FFFFFF; } body#inside>h2 {font-size: 1.5em; } body#home #hp2pr {position: relative; width: 95%; max-width: 1000px; display: table; margin: 0px auto 60px auto; } footer .content { margin: 0px auto; width: 95%; overflow: hidden; } footer .content #footercontact, footer .content #footercontent { position: relative; width: auto; max-width: 50%; margin: 0 auto; display:inline; float: left; height: auto; } body#home #hppr {position: relative; width: 95%; max-width: 1000px; display: table; margin: 20px 2.5%; } body#home #hppr .hpprnews {position: relative; width: 65%; display: table-cell; float: left; } body#home #hppr>.hpprfeed { position: relative; width: 34%; padding: 0%; display: table-cell; float: left; margin: 0 1% 0 0; } .cce-feature .cce-featcol { position: relative; width: 90%; max-width: 1200px; height: auto !important; padding: 50px; margin: 0 auto; } .cce-feature .cce-featcol .featimg { position: relative; width: 50%; height: auto !important; padding: 0; margin: 0; float: left; display: table-cell;} .cce-feature .cce-featcol .feattext { position: relative; width: 40%; height: auto !important; padding: 1% 0 0 1%; margin: 0; float: left; display: table-cell; line-height: 2em; } .cce-newscols { position: relative; width: 90%; max-width: 1200px; height: auto !important; padding: 0px; margin: 50px auto; display: table; } .cce-newscols .cce-highlights .cce-highcol { position: relative; width: 45%; height: auto !important; padding: 0 5% 0 0; margin: 0; display: table-cell; vertical-align: top; } #photocluster .content { position: relative; width: 90%; height: auto !important; display: block; float: none; margin: 0 auto; padding: 0; max-width: 1000px; } #photocluster .content .cluster .clustimg { position: relative; width: 47%; height: auto; max-height: 240px; float: left; margin: 0 0 2% 2%; padding: 0; background: #222222; color: #FFFFFF;} /* start Text styles */ .text { position: relative; width: 90%; height: auto; margin: 30px auto 30px auto; padding: 0px; display: block; background: #FFFFFF;} } /* ---------------------------- TABLET STYLES ------------------------ */ @media only screen and (min-width: 665px) and (max-width: 1000px) { body { background: #FFFFFF; } h2.pagetitle { margin: 30px 0px 10px 20px; } #ccelogo { width: 100px; height: auto !important; left: 0%; z-index: 9999; } #ccelogo img { width: 100px; height:auto !important; left: 0%; z-index: 9999; } #hppr {width: 95%; margin: 20px 2.5%;} ul.subnav { width: 768px; } ul.subnav li a:link, ul.subnav li a:visited { color:#FFFFFF; text-decoration: none; padding: 10px 10px 10px 10px; } ul.subnav li a:hover, ul.subnav li a:active { color:#c11c1c; text-decoration: underline; background-color: #FFFFFF; } .active {display: block;} main { width: 100%; height: auto !important; overflow: visible; display: block; top: 70px;} main #maintext { width: 100%; float: none; display: block; max-width: 100%; margin: 0px; height: auto; top: 0px; } main #maintext .content { padding: 0px; margin: 0px; } main #maincol { width: 100%; float: none; display: block; max-width: 100%; clear: both; height: auto; } #maintext>.content>.imgshell, #maincol>.content>.imgshell { float: left; width: 40%; height: auto; margin-right: 10px; } #maintext>.content>.imgright, #maincol>.content>.imgright { float: right; width: 40%; height: auto; margin-left: 10px; } #coltext>.content>.imgshell { float: none; width: 100%; margin: 0px; padding: 0px; } #introshell { position: relative; top: 0px; width: 100%; height: auto !important; min-height: 100px; overflow: visible; z-index: 1000; margin: 0; padding: 0; } #introshell>#title {margin: 25px auto; padding: 10px 0; max-width: 1200px; } #introshell>#title>h1.pagetitle {padding: 0px; margin: 50px auto 0px auto; text-transform: uppercase;text-align: center; color: #222222;font-weight: 700; letter-spacing: 2px; } #introshell>.image { position: relative; width: 100%; height: auto !important; background: #222222; z-index: 1000; padding: 0; margin: 0; max-height: 550px; min-height: 0px; overflow: hidden; } #introshell .image h1 { position: absolute; bottom: 20%; font-family: "Open Sans", Arial, sans-serif; font-weight: 600;text-transform: uppercase; letter-spacing: 3px; width: 100%; color: #FFFFFF; font-size: 3.0em; line-height: 1em; text-align: center; margin: 0 auto; padding: 1% 0; z-index: 1001; /*background: url(https://www.bard.edu/images/tints/80black.png) repeat;*/ text-shadow: 2px 2px 2px #333;} #introshell>.image>.caption { position: absolute; bottom: 0%; right: 0%; font-family: "Open Sans", Arial, sans-serif; font-weight: 600; display: block; width: auto !important; color: #FFFFFF; text-align: center; margin: 0; padding: 1% 2%; font-style: normal; z-index: 1002; } #introshell>.image>img { width: 100%; height: auto !important; padding: 0; margin: 0; } #introshell>.sitetitle { position: relative !important; top: 0px !important; left: 0% !important; width: 100% !important; height: auto !important; overflow: visible !important; float: none; margin: 0; padding: 0; z-index: 1001;} #introshell>.sitetitle img { width: 100%; max-width: 100%; height: auto !important; overflow: visible; float: none; margin: 0 auto; padding: 0px; z-index: 1001; } #introshell>.sitetitle>.sitelogo { position: relative !important; height: auto !important; overflow: visible !important; background: #222222; max-width: 100%; } #introshell>.introbuttons { position: absolute; bottom: 10%; width: 95%; margin: 0 auto; height: auto !important; display: block; z-index: 11000; overflow: visible;} #introshell>.introbuttons>.content { position: relative; width: 95%; margin: 0px auto; align-items: center; text-align: center;} #introshell>.image>.caption { position: absolute; bottom: 5px; left: 0%; font-family: "Open Sans", Arial, sans-serif; font-weight: 600; display: block; width: 30%; color: #FFFFFF; font-size: 0.8em; line-height: 1em; text-align: right; margin: 0; padding: 1%; font-style: normal; } #introshell #title { width: 90%; margin: 0 auto; min-height: 100px;} #introshell #title h1.pagetitle {margin: 0;} /* 2019 Tablet Styles */ ul.subnav { height:30px; font-size: 1.05em; line-height: .9em; } .subnav { font-weight: 400; color:#FFFFFF; line-height: .8em; padding-top: 0px;} #submenu, #sitemenu {position: relative; margin-top: 0px; } .billboard>.content>.words { position: absolute; bottom: 10%; width: 100%; height: auto; z-index: 1000; } .billboard>.content>.words>.padding { position: relative; text-align: center; width: 70%; margin: 0 auto; color: #FFFFFF;} .billboard>.content>.words>.padding>h2 { color: #FFFFFF; font-size: 2em; text-shadow: 2px 2px 2px #000;} /* Bottom Buttons */ #bottombuttons .buttons li { list-style: none; display: inline-block; color:#222222; background-color: #FFFFFF; margin: 0px 30px 20px 0px; padding: 15px 20px; border: 2px solid #e6e6e6; white-space: normal; height: auto !important; clear: right; } /* start Highlight Facts styles*/ .highfacts { position:relative; display:block; width:90%; height: auto !important; overflow: visible; margin: 30px auto; padding: 0px; align-content: center;max-width: 1000px; } .highfacts>.content>.words>.padding { position: absolute; bottom: 0%; text-align: left; width: 50%; height: auto !important; max-height: 110px; margin: 0%; padding: 0.5%; display: inline-block; color: #FFFFFF; z-index: 1001; font-size: 1.0em; background:url(https://www.bard.edu/images/tints/80black.png) repeat; } .highfacts>.content>.words>.padding h2 { font-size: 1.25em; } .highfacts>.content>.words>.multibuttons>ul>li { position: relative; width: 40%; min-height: 120px; display: inline-block; list-style: none;color: #333; text-align: center; padding: 1.5%; margin: 0 1% 2% 0; font-size: 1.1em; line-height: 0.9em;align-content: center; background: #ededed; vertical-align: top; } .highfacts>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {position: relative; float: none; display: block; background: none; font-size: 2em; text-align: center; color:#c11c1c;font-weight: 700; margin: 0px 0;} footer {height: auto; overflow: hidden;} footer .content { margin: 0px auto; width: 95%; overflow: hidden; } footer .content #footercontact { position: relative; width: auto; max-width: 50%; margin: 0 auto; padding: 0; display:inline; float: left; height: auto; } footer .content #footercontent { position: relative; width: auto; max-width: 50%; margin: 0 auto; padding: 0; display:inline; float: left; height: auto; } footer .content #footercontent .footercol { position: relative; float:left; width: 30%; max-width: none; margin: 0px; padding: 0px 20px 0px 20px; border-left: none; } .biography { position: relative; width: 90%; height: auto; margin: 50px auto; padding: 0px; display: block;} .biography>.content>.words { position: relative; display: inline; width: 100%; padding: 0; margin: 0px; line-height: 30px; vertical-align: top; text-align: left; background: #ededed; z-index: 499;} .biography>.content>.words>.padding { margin: 0 5%; padding: 0; z-index: 499; } .biography>.content>.words>.multibuttons { margin: 0 5%; padding: 0%; background: #FFFFFF;} /* Bottom Buttons */ #bottombuttons .buttons li { list-style: none; display: inline-block; color:#222222; background-color: #FFFFFF; margin: 0px 30px 20px 0px; padding: 15px 20px; border: 2px solid #e6e6e6; white-space: normal; height: auto !important; clear: right; } /* expand bars new 2/1 */ .expandbars { display: block; width: 85%; max-width: 960px; margin: 20px auto 30px auto; padding: 15px 15px 5px 15px; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; background-color: #FFFFFF; } /* start FAQ styles */ .faqs { position:relative; display:block; width:67%; max-width: 1000px; height: auto !important; overflow: visible; margin: 50px auto; padding: 0%; } .highlight .content .embshell, .highlight .content .embleft, .highlight .content .embright { position: relative; display:block; width: 98%; overflow: visible; margin: 0 auto 20px auto; align-content: center; } .highlight .content .embshell iframe, .highlight .content .embleft iframe, .highlight .content .embright iframe, .highlight .content .embcenter iframe, .highlight .content .embfull iframe { width: 90%; min-height: 350px; } .highlight>.content>.words {display: block; float: none; width: 90%; margin: 0 auto; min-height: 300px;} .highlight>.content>.words>.padding {text-align: left; overflow-x: hidden;} .highlight>.content>.words>.padding .ctabutton {width: auto !important;} .highlight>.content>.words>.padding>h2 {font-size: 1.7em;text-align: left;} .highlight .words { position: relative; display: block; left: 0%; bottom: 5px; z-index: 200; text-align: left; width: 95%; margin: 0 auto 20px auto; } .highlight > .content > .words > .padding .ctabutton {width: 90% !important;} .highlight .words h2 { } .highlight .imgcenter { position: relative; display: block; float: none; width: 90%; margin: 0 auto; overflow: visible; } .highlight .imgcenter img { width: 100%; height: auto; } .highlight .imgfull { position: relative; display: block; float: none; width: 90%; margin: 0 auto; overflow: visible; } .highlight .imgfull img { width: auto !important; height: 400px; margin: 0px; } #maintext .highlight .content .imgleft { position: relative; display: block; float: none; width: 90%; margin: 0 auto; overflow: visible; } #maintext .highlight .content .imgright { position: relative; display: block; float: none; width: 90%; margin: 0 auto; overflow: visible; } #maintext .highlight .content .imgshell { position: relative; display: block; float: none; width: 90%; margin: 0 auto; overflow: visible; } .highlight .content .imgleft img, .highlight .content .imgright img { width: 100%; height: auto !important; margin: 0 0 30px 0; } .highlight > .content > .words > .multibuttons > ul {width: 90%; padding: 0; } .highlight > .content > .words > .multibuttons > ul li .multitext {line-height: 1.0em; } .highcluster>.content>.imgshell, .highcluster>.content>.imgleft, .highcluster>.content>.imgcenter, .highcluster>.content>.imgfull, .highcluster>.content>.imgright{ position: relative; width: 90%; float: none; display: block; margin: 0 auto; padding: 0; overflow: visible; } .highcluster .content .imgshell img, .highcluster .content .imgleft img, .highcluster .content .imgcenter img, .highcluster .content .imgfull img, .highcluster .content .imgright img { width: 100%; height: auto !important; padding: 0; margin: 0; } .highcluster>.content>.words { position: relative; top: 0px; display:block; float: none; width: 90%; height: auto !important; overflow: visible; margin: 0 auto; padding: 0; } .highcluster>.content>.words>.padding { position: relative; text-align: left; width: 95%; margin: 2.5%; padding: 0; display: block; color: #222222; z-index: 1001; background:none; } .highcluster>.content>.words>.padding p { margin: 0; padding: 0; } .highcluster>.content>.words>.padding>.ctabutton { display: inline-block; float: none; width: auto; margin: 10px auto; padding: 10px;font-size: 0.8em; line-height: 0.3em; background: #c11c1c; } .highcluster>.content>.words>.padding>.ctabutton>a:link, .highcluster>.content>.words>.padding>.ctabutton>a:visited { color: #FFFFFF; text-decoration: none;} .highcluster>.content>.words>.padding>.ctabutton>a:hover { color: #FFFFFF; text-decoration: underline;} .highcluster>.content>.words>.padding>ul { position: relative; text-align: left; width: 100%; margin: 0 auto; } .highcluster>.content>.words>.padding>ul>li { text-align: left; } .highcluster>.content>.words>.padding>h2 { color: #222222; margin: 0; } .highcluster>.content>.words>.multibuttons { position: relative; width: 100%; float: none;margin: 0; } .highcluster>.content>.words>.multibuttons ul { position: relative; width: 100%; float: none;margin: 0; } .highcluster>.content>.words>.multibuttons ul li .multitext { position: relative; width: 65%; } .highfacts>.content>.words>.padding { position: absolute; top: 30%; text-align: left; width: 48%; height: auto !important; max-height: 110px; margin: 1%; padding: 0.5%; display: inline-block; color: #FFFFFF; z-index: 1001; font-size: 1.0em; background:url(https://www.bard.edu/images/tints/80black.png) repeat; } .highfacts>.content>.words>.multibuttons>ul>li { position: relative; width: 44%; min-height: 90px; display: inline-block; list-style: none;color: #333; text-align: center; padding: 1%; margin: 0 1% 2% 0; font-size: 1.0em; line-height: 0.9em;align-content: center; background: #ededed; vertical-align: top; } .highfacts>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {position: relative; float: none; display: block; background: none; font-size: 2em; text-align: center; color:#c11c1c;font-weight: 700; margin: 0px 0;} /* start One Column styles */ .onecol { position: relative; width: 90%; height: auto; margin: 30px auto; padding: 30px 0; display: block; float: none; clear:none !important; background: #FFFFFF; } /* photo clusters */ #photocluster { position: relative; width: 95%; height: auto !important; display: block; float: none; margin: 0 auto; padding: 0; max-width: 1200px; } #photocluster h2 {font-size: 1.2em; font-weight: 700; color:#222222; text-transform: uppercase; letter-spacing: 3px; padding: 0 0 20px 0; border-bottom: 1px solid #222222; margin: 0 0 20px 0; text-align: center; } #photocluster .solophoto { position: relative; width: 100%; float: left; margin: 0; padding: 0; z-index:1000; } #photocluster .solophoto .soloimg { position: relative; width: 100%; height: auto !important; max-height: 557px; display: block; margin: 0; padding: 0; overflow: hidden; } #photocluster .solophoto .soloimg img { width: 100%; height: auto !important; margin: 0; padding: 0; } #photocluster .solophoto .solovid { position: relative; width: 100%; height: auto !important; display: block; margin: 0; padding: 0; overflow: visible;} #photocluster .solophoto .solovid iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-height: 500px;} #photocluster .solophoto .solotext { position: absolute; bottom: 0; width: 90%; height: auto !important; display: block; margin: 0; padding: 5%; color: #FFFFFF; font-size: 1.7em; font-weight: 600;z-index:1001; } #photocluster .solophoto .solotext h2 { color: #FFFFFF; font-size: 1.7em; } #photocluster .solophoto .solocaption { position: relative; background: #ededed; margin-top: 15px;padding: 20px; } #photocluster .cluster { position: relative; width: 100%; float: left; margin: 0; padding: 0;} #photocluster .cluster .clustimg { position: relative; width: 47%; height: 273px; max-height: 273px; float: left; margin: 0 0 2% 2%; padding: 0; background: #222222; color: #FFFFFF; } #photocluster .cluster .clustimg img { width: 100%; height: auto !important; } #photocluster .cluster .clustimg .clustvid { position: relative; width: 100%; height: auto; margin: 0; padding: 0; } #photocluster .cluster .clustimg .clustvid iframe { position: absolute;top: 0;left: 0; width: 100%; height: 100%; min-height: 200px;} #photocluster .cluster .clustimg iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; overflow: visible; z-index: 9999;} #photocluster .cluster .clustimg .clusttext { position: absolute; bottom: 1%; width: 90%; height: auto !important; display: block; margin: 0; padding: 5%; font-size: 1.1em; color: #FFFFFF; font-weight: 400; } .solotext a:link, .solotext a:visited { color: #FFFFFF; text-decoration: none; margin: 0px; } .solotext a:active, .solotext a:hover { color: #FFFFFF; text-decoration: underline; } .clusttext a:link, .clusttext a:visited { color: #FFFFFF; text-decoration: none; margin: 0px; font-weight: 700;font-size: 1.2em; } .clusttext a:active, .clusttext a:hover { color: #FFFFFF; text-decoration: underline; font-weight: 700;font-size: 1.2em; } .section { width: 90%; margin: 30px auto;} .section > .content p {width: 96%;margin: 10px 0%;padding: 2%;} .spotlight .content .embcenter { position: relative; width: 80%; margin: 0 auto 0px auto; background: #222222; } .spotlight .content .embcenter iframe { width: 100%; height: auto !important; min-height: 600px; padding: 0; margin: 0; background: #222222; } .spotlight .content .embfull { width: 100%; margin: 0 auto; padding: 0; background: #222222; } .spotlight .content .embfull iframe { width: 100%; height: auto !important; min-height: 300px; padding: 0; margin: 0; background: #222222; } .spotlight .content .embright { width: 50%; margin: 0; padding: 0; background: #222222; float: right; display: inline; } .spotlight .content .embright iframe { width: 100%; height: auto !important; min-height: 300px; padding: 0; margin: 0 0 0 5%; background: #222222; } .spotlight .content .embshell { width: 50%; height: auto !important; margin: 0 5% 0 0; padding: 0; background: #222222; float: left; display: inline;} .spotlight .content .embshell iframe { width: 100%; height: auto !important; min-height: 200px; padding: 0; margin: 0 5% 0 0; background: #222222; } .spotlight .content .embleft { width: 50%; height: auto !important; margin: 0; padding: 0; background: #222222; float: left; display: inline; } .spotlight .content .embleft iframe { width: 100%; height: auto !important; min-height: 200px; padding: 0; margin: 0 5% 0 0; background: #222222; } /* start Text styles */ .text { position: relative; width: 90%; height: auto; margin: 30px auto 30px auto; padding: 0px; display: block; background: #FFFFFF;} /* start Two Column styles */ .twocol { position: relative; width: 100%; height: auto; margin: 30px auto; padding: 30px 0; display: table; float: none; background: #ededed;} .twocol .content { position: relative; width: 100% !important; height: auto; margin: 0 auto; padding: 0; display: block; background: #ededed; } .twocol>.content>.words { position: relative; width: 100%; max-width: 1200px; display: block; margin: 0px auto; float: none; padding: 0; } .twocol>.content>.words>.padding { position: relative; text-align: center; width: 90%; float: none; display: block; padding: 2% 0 2% 0; margin: 0 auto;} .twocol>.content>.words>.padding>p { line-height:1.5em; margin: 20px 0; } .twocol>.content>.words>.padding>h2 { text-transform: uppercase; letter-spacing: 3px; text-align: center; color: #222222; font-weight: 700; font-size: 1.4em; padding: 0px 0; margin:0 auto; line-height:1.1em; } .twocol>.content>.words>.padding>.subtitle { margin:10px auto; text-align: center; font-size: 1.1em;} .twocol>.content>.words>.padding>.ctabutton { position: relative; margin:10px auto; text-align: center; float: none; } .twocol>.content>.imgshell { position: relative; width: 10%; margin: 0px; float: none; max-height: 150px;display:none;} .twocol>.content>.words>.multibuttons { position: relative; width: 90%; max-width:90%; display: block; float: none; margin: 0px auto; padding: 0; } .twocol>.content>.words>.multibuttons>ul { position: relative; margin: 0px auto; width: 100%; display: block; } .twocol>.content>.words>.multibuttons>ul>li { position: relative; width: 45%; display:inline-block; float: left; margin: 0% 2.5% 2.5% 0; padding: 0%;height: auto; min-height: 180px; vertical-align: top;background: #FFFFFF; } .twocol > .content > .words > .multibuttons > ul > li > .multitext audio {width:70%;} /* start Two Column DARK styles */ .twocold { position: relative; width: 100%; height: auto; margin: 30px auto; padding: 30px 0; display: table; float: none; background: #222222; } .twocold .content { position: relative; width: 100%; height: auto; margin: 0 auto; padding: 1%; display: block; background: #222222; } .twocold>.content>.words { position: relative; width: 100%; max-width: 1000px; display: block; margin: 0px auto; float: none; padding: 0;} .twocold>.content>.words>.padding { position: relative; text-align: center; width: 90%; float: none; display: block; padding: 2% 0 2% 0; } .twocold>.content>.words>.padding>p { line-height:1.5em; margin: 20px 0; } .twocold>.content>.words>.padding>h2 { text-transform: uppercase; letter-spacing: 3px; text-align: center; color: #222222; font-weight: 700; font-size: 1.4em; padding: 0px 0; margin:0 auto; line-height:1.1em; } .twocold>.content>.words>.padding>.subtitle { margin:10px auto; text-align: center; font-size: 1.1em;} .twocold>.content>.words>.padding>.ctabutton { position: relative; margin:10px auto; text-align: center; float: none; } .twocold>.content>.imgshell { position: relative; width: 10%; margin: 0px; float: none; max-height: 150px;display:none;} .twocold>.content>.words>.multibuttons { position: relative; width: 90%; max-width:90%; display: block; float: none; margin: 0px auto; padding: 0; } .twocold>.content>.words>.multibuttons>ul { position: relative; margin: 0px auto; width: 100%; display: block; } .twocold>.content>.words>.multibuttons>ul>li { position: relative; width: 45%; display:inline-block; float: left; margin: 0% 2.5% 2.5% 0; padding: 0%;height: auto; min-height: 180px; vertical-align: top;background: #FFFFFF; } .twocold > .content > .words > .multibuttons > ul > li > .multitext audio {width:70%;} /* start Two Column WHITE styles */ .twocolw { position: relative; width: 100%; height: auto; margin: 30px auto; padding: 30px 0; display: block; float: none; clear:none !important; background: #FFFFFF; } .twocolw .content { position: relative; width: 100%; height: auto; margin: 0 auto; padding: 1%; display: table; background: #FFFFFF; } .twocolw>.content>.words { position: relative; width: 90%; max-width: 1000px; display: block; margin: 0px auto; float: none; padding: 0;} .twocolw>.content>.words>.padding { position: relative; text-align: left; width: 22%; float: left; display: inline; padding: 2% 2% 2% 0; } .twocolw>.content>.words>.padding>p { line-height:1.5em; margin: 20px 0; } .twocolw>.content>.words>.padding>h2 { text-transform: uppercase; letter-spacing: 3px; text-align: left; color: #222222; font-weight: 700; font-size: 1.4em; padding: 20px 0; margin:0 auto; line-height:1em; } .twocolw>.content>.words>.padding>.subtitle { margin:10px auto; text-align: center; font-size: 1.1em;} .twocolw>.content>.words>.padding>.ctabutton { position: relative; margin:10px auto; text-align: center; float: none; } .twocolw>.content>.imgshell { position: relative; width: 10%; margin: 0px; float: none; max-height: 150px;display:none;} .twocolw>.content>.words>.multibuttons { position: relative; width: 74%; max-width:74%; display: inline; float: left; margin: 0px; padding: 0; } .twocolw>.content>.words>.multibuttons>ul { position: relative; margin: 0px auto; width: 100%; display: block; } .twocolw>.content>.words>.multibuttons>ul>li { position: relative; width: 45%; display:inline-block; float: left; margin: 0% 2.5% 2.5% 0; padding: 0%;height: auto; min-height: 180px; vertical-align: top;background: #ededed; } .twocolw > .content > .words > .multibuttons > ul > li > .multitext audio {width:70%;} /* ----------- Admission CTA Button for Program Websites --------- */ .cta-content {position: relative; z-index: 999999; top:-40px;} } /* -------------------------------------------- MOBILE ONLY STYLES ------------------------------------ */ @media screen and (max-width: 664px) { body { background: #FFFFFF; } /* generic tables */ .table {position:relative;display:block;flex-wrap: none; width:95%;margin:2.5%;} .table .tr {position:relative;display:block;flex-flow: none;width: 100%; text-align:left;padding:0%; } .table .td {position:relative;display: block; flex: none; width: 100%;vertical-align: top;text-align:left;padding:1%;margin: 1%; } .table .trborder {position:relative;display:block;flex-flow: none;width: 100%; text-align:left;padding:0%; height:1px; border-bottom: 1px solid #222222; } /* classes for widths of tables and columns */ .width5,.width10,.width15,.width20,.width25,.width30,.width40,.width50,.width60,.width70,.width75,.width80,.width90 { position: relative; display:block !important;width:95% !important;margin:2.5%; padding: 0; overflow: visible; white-space: normal;} .width100 { position: relative; display:block !important;width:100% !important; margin:0; padding: 0; overflow: visible; white-space: normal;} .mobilehide { display: none !important; } /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; } tr { border: 1px solid #CCCCCC; } tr.hidemobile {display:none;} thead, thead>tr, thead>tr>td {visibility: hidden;} td { /* Behave like a "row" */border: none; width:94%; position: relative;padding: 3%; } td:before { /* Now like a table header */position: absolute;/* Top/left values mimic padding */top: 6px;left: 6px;width: 45%; padding-right: 10px; white-space: nowrap;} #navdesk { display: none;} #ccelogo { position: absolute; top: 0px; left: 0%; width: 84px; height:68px; z-index: 9999; } #ccelogo img { width: 84px; height:68px; z-index: 9999; } header .topnav { width: 100%; height: 25px; background: #222222; text-align: right; margin: 0; padding: 0;} header .topnav .toplinks { width: 964%; max-width: 94%; height: 25px; background: #222222; color: #CCCCCC; text-align: right; margin: 0; padding: 5px 2%; font-size: 0.8em;} #supershell { width: 100%; display: block; float: none; margin: 0px; padding: 0px; overflow-x: hidden; } main { position:relative; width: 100%; top: 55px;} main { overflow: visible; width: 100%; overflow-x: hidden; } main #maintext, main #maincol { width: 100%; float: none; display: block; clear: both; height: auto; margin: 0px; padding: 0px !important} main #sidebar { float: none; margin: 0px; padding: 0px; width: 100% } main #maintext>.content { position: relative; padding: 0px; width:100%; display: block; } .active {display: block;} ul.subnav { width: 768px; } ul.subnav li a:link, ul.subnav li a:visited { color:#FFFFFF; text-decoration: none; padding: 10px 10px 10px 10px; } ul.subnav li a:hover, ul.subnav li a:active { color:#c11c1c; text-decoration: underline; background-color: #FFFFFF; } #subnav-about, #subnav-adm, #subnav-aca, #subnav-under, #subnav-grad, #subnav-campus, #subnav-news, #subnav-par { } /*#topnav { float: left; display: inline; position: absolute; top: 10px; right: 5px; right: 0px; height: 25px; width: auto; color: #FFFFFF;font-size: .9em; border:none; margin: 0px; padding: 0px;} #topnav a:link, #topnav a:visited { color:#FFFFFF; margin-right: 5px; } #topnav a:hover, #topnav a:active { color:#FFFFFF; margin-right: 5px; }*/ /* subnav styles */ ul.subnav { position: relative; list-style: none; width: 100%; max-width: 480px; height:auto !important; display: block; margin: 0px 0px 0px 0px; padding: 0px; color: #FFFFFF; background-color: #c11c1c; font-size: 1.1em; font-weight: 600; line-height: 1.3em; z-index: 900; overflow: visible; } ul.subnav li { width: 100%; height: 35px; margin: 0px; padding: 0px; border-right: none; text-align: left; display: block; } ul.subnav li.last { border-right: none;} ul.subnav li a:link, ul.subnav li a:visited { color: #FFFFFF; background-color: #c11c1c; text-decoration:none; display:block; width: auto; margin: 0px; padding: 10px;line-height: 16px; text-align: left; } ul.subnav li a:hover, ul.subnav li a:active { color: #FFFFFF; text-decoration:underline; background-color:#c11c1c; } main>#maincol { width: 100%; float: none; display: block; padding: 0px; margin: 0px; } main>#maincol>.content { position: relative; width: 100%; padding: 10px 0px; margin: 0px; } main>#maincol>#sidebar { position: relative; width: 100%; right: 0px; top: 0px; float: none; margin: 20px 0px 0px 0px; padding: 0px; box-shadow: none; } #maintext>.content>.imgshell, #maincol>.content>.imgshell { float: none; width: 100%; height: auto; margin-right: 0px; padding: 0px; } #maintext>.content>.imgright, #maincol>.content>.imgright { float: none; width: 100%; height: auto; margin-left: 0px; padding: 0px; } #maintext .content>iframe { float: none; width: 100%; height: auto; margin-left: 0px; padding: 0px; } #coltext { width: 100%; padding : 0; } /* Main Column Box Styles */ #submenu, #sitemenu {position: relative; margin-top: 0px; } #pagebox { float: none; width: 100%; height: auto; margin: 0px 0px 20px 0px; } .ctabutton { display: inline-block; width: auto; height: auto; margin: 0px ; padding: 10px; background: #c11c1c; border: none; border-radius: 0; color: #FFFFFF; font-family: "Open Sans", Arial, sans-serif; white-space: normal; font-size:.75em; line-height: 1.0em; text-transform:uppercase; letter-spacing: 2px; font-weight: 700;} .cms-button {word-break: break-all; margin: 0; } .cms-caption {line-height: 18px;} #introshell { position: relative; width: 100%; height: auto !important; min-height: 100px; overflow: visible; z-index: 1000; top: 0; margin:0 !important; padding: 0; background: #FFFFFF; } #introshell .image { position: relative; width: 100%; height: auto !important; top: 0px; background: none; z-index: 1000; padding: 0; margin: 20px 0 0 0; min-height: 180px; max-height: 650px; overflow: visible; } #introshell .image img { width: 100%; height: auto !important; padding: 0; margin: 0; max-height: 600px; overflow: visible; } #introshell .image h1 { position: relative; text-transform: uppercase; letter-spacing: 2px; width: 90%; color: #222222; font-size: 1.6em; line-height: 1em; text-align: center; margin: 15px auto; padding: 0; z-index: 1001; background: none; text-shadow: none; } #introshell .image .caption { position: relative; text-align: right; display: block; width: auto !important; color: #999; margin: 0; padding: 3%; z-index: 1002; font-style: italic;} #introshell>.sitetitle { position: relative !important; top: 18px !important; left: 0% !important; width: 100% !important; height: auto !important; overflow: visible !important; float: none; margin: 0; padding: 0; z-index: 1001;} #introshell>.sitetitle img { width: 100%; max-width: 100%; height: auto !important; overflow: visible; float: none; margin: 0 auto; padding: 0px; z-index: 1001; } #introshell>.sitetitle>.sitelogo { position: relative !important; height: auto !important; overflow: visible !important; background: #222222; max-width: 100%; } #introshell .image .introbox {position: absolute;right: 0%;bottom: 0%;width: 100%;background: url(https://www.bard.edu/images/tints/80black.png) repeat;} #introshell #title { position: relative; width: 100%; height: auto !important; top: 0px; background: none; z-index: 1000; padding: 0; margin: 20px 0 0 0; overflow: visible; } #introshell>#title>h1 { position: absolute; left: 0; font-weight: 700;text-transform: uppercase; letter-spacing: 3px; display: block; width: 98%; margin: 20px 0 0 30px; padding: 0; color: #222222; font-size: 2.5em; line-height: 1em; text-align: center; background: none; overflow: visible; } #introshell #title h1.pagetitle {position: relative; text-transform: uppercase; letter-spacing: 2px; width: 90%; color: #222222; font-size: 1.5em; line-height: 1em; text-align: center; margin: 30px auto 20px auto; padding: 0; z-index: 1001; background: none; text-shadow: none;} #introshell>.introbuttons { position: absolute; top: 240px; width: 95%; margin: 0 auto; height: auto !important; display: block; z-index: 11000; overflow: visible;} #introshell>.introbuttons>.content { position: relative; width: 95%; margin: 0px auto; align-items: center; text-align: center;} #introshell>.introbuttons>.content>.buttons { display: inline; width: auto; border: 1px solid #FFFFFF; padding: 5px 0px; margin: 15px 10px; background: url(https://www.bard.edu/images/tints/80black.png) repeat; color: #FFFFFF; font-size: 0.8em; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; } #introshell>.introbuttons>.content>.buttons a:link, #introshell>.introbuttons>.content>.buttons a:visited { color: #FFFFFF; text-decoration: none; padding: 10px 20px;} #introshell>.introbuttons>.content>.buttons a:active, #introshell>.introbuttons>.content>.buttons a:hover { color: #FFFFFF; text-decoration: none; background: #c11c1c;padding: 9px 20px;} #introtext { position: relative; width: 85%; margin: 30px auto; padding: 0px; font-size: 1.1em; line-height:1.5em;} body#home #introtext { position: relative; width: 85%; margin: 30px auto; padding: 0px; font-size: 1.1em; line-height:1.5em;} #introtext .subtitle {font-size: 1.0em;} #introtext>.ctabutton { width: auto; height: auto; margin: 10px auto 0 auto; padding: 10px; background: #c11c1c; border: none; border-radius: 0; font-size: 0.70em; } #maintext .content .introbuttons {display: block; height: auto !important; overflow: visible;} #maintext .content .introbuttons .content {display: block; height: auto; overflow: visible;} .introbuttons > .content > .buttons {display: block; margin: 30px 10px;} /* ----------- 2019 Styles (alpha order) ---------- */ /* start Billboard styles */ .billboard {position: relative; display: block; width: 100%; height: auto !important; margin: 20px auto 0 auto;} .billboard>.content {width: 100%; display:block; } .billboard>.content>.imgcenter { position: relative; width: 100%; margin: 0 auto; } .billboard>.content>.imgcenter img { width: 100%; height: auto; } .billboard>.content>.imgfull { width: 100%; margin: 0 auto; padding: 0; background: transparent; } .billboard>.content>.imgfull img { width: 100% !important; height: auto; max-height: 400px; padding: 0; margin: 0; } .billboard>.content>.imgcenter .caption, .billboard>.content>.imgfull .caption { position: relative; width: 100%; margin: 0 auto;padding: 0; } .billboard .content .embcenter, .billboard .content .embfull, .billboard .content .embright, .billboard .content .embleft, .billboard .content .embshell { position: relative; width: 100%; margin: 0 auto 0px auto; } .billboard .content .embcenter iframe, .billboard .content .embfull iframe, .billboard .content .embright iframe, .billboard .content .embshell iframe, .billboard .content .embleft iframe { width: 100%; height: auto !important; min-height: 280px; padding: 0; margin: 0; } .billboard>.content>.words { position: relative; width: 80% !important; min-width: 80%; height: auto !important; z-index: 1000; background: #FFFFFF; padding: 0; margin: 0px auto 5px auto; right: 0; } .billboard>.content>.words>.padding { position: relative; text-align: center; width: 100%; margin: 0 auto; padding: 1%; color: #222222; font-size: 1.0em; right: 0;} .billboard>.content>.words>.padding p { margin: 0 auto; padding: 0; } .billboard>.content>.words>.padding>h2 { font-size:1.1em; line-height: 1.1em; text-transform:uppercase; letter-spacing: 1px; font-weight: 700; color: #c11c1c; padding: 0; margin: 15px 0 10px 0; text-shadow: none; } .billboard>.content>.words>.padding>.subtitle { color: #333; font-size: 1.5em; margin: 0; padding: 0; line-height: 1em;} .billboard .multibuttons {align-content: center; align-items: center; margin-top: 20px; } .billboard .multibuttons ul, .billboard .multibuttons ul li, .billboard .multibuttons ul li .multitext {list-style: none; padding: 0; margin: 0 auto; text-align: center; } .billboard .multibuttons ul li .multitext .linktitle { width: auto !important; max-width: 100%;height: auto; margin: 10px auto; padding: 7px; color: #FFFFFF; white-space: nowrap; font-size:.75em; line-height: .5em; text-transform:uppercase; letter-spacing: 1px; font-weight: 700; text-align: center;} .billboard .multibuttons ul li .multitext .linktitle a:link, .billboard .multibuttons ul li .multitext .linktitle a:visited { color: #FFFFFF; background: #c11c1c; text-decoration: none; } .billboard .multibuttons ul li .multitext .linktitle a:hover, .billboard .multibuttons ul li .multitext .linktitle a:active { color: #FFFFFF; background: #c11c1c; text-decoration: underline; padding: 5px 10px; } .biography > .content > .words > .padding {width: 80%; padding: 0; margin: 0 auto;} .biography > .content > .imgshell, .biography > .content > .imgleft, .biography > .content > .imgright, .biography > .content > .imgcenter, .biography > .content > .imgfull{ position: relative;display: block;float: none;width: 100% !important;height: auto !important;overflow: hidden;margin: 0px 0px 20px 0px;z-index: 500;} .biography > .content > .imgshell img, .biography > .content > .imgleft img, .biography > .content > .imgright img, .biography > .content > .imgcenter img, .biography > .content > .imgfull img { width: 100%; height: auto; margin: 0px 0px 0px 0px;} .biography .content .embright, .biography .content .embshell, .biography .content .embleft { width: 100%; margin: 0; padding: 0; background: #FFFFFF; float: none; display: block; } .biography .content .embright iframe, .biography .content .embshell iframe, .biography .content .embleft iframe { width: 100%; height: 100%; padding: 0; margin: 0; min-height: 250px;} /* Bottom Buttons */ #bottombuttons .buttons li { list-style: none; display: block; color:#222222; background-color: #FFFFFF; margin: 0px 30px 15px 0px; padding: 15px 20px; border: 2px solid #e6e6e6; white-space: normal; height: auto !important; clear: right; } .column { position: relative; display: block; width: 100%; height: auto !important; padding: 0px; float: none; overflow: visible; } .column .contentx4 { position: relative; display: block; float: none; width: 100%; height: auto !important; padding:0%; vertical-align: top; } .acacol { position: relative; width:90%;float:none;margin: 10px auto; display:block; } .acaside { position: relative; width:90%;float:none;margin: 10px auto; display:block; } .expandbars { display: block; width: 90%; margin: 25px auto; padding: 15px 5% 5px 5%; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; background-color: #FFFFFF; white-space: normal; } /* start Facts styles */ .facts h2 { text-align: center; display:none; } .facts { position: relative; width:100%; margin: 50px auto; padding: 0; } .facts ul { position: relative; width: 100%; background: #FFFFFF; display: block; margin: 0 auto; padding: 0; height: auto; } .facts .multibuttons ul { position: relative; width: 80%; height: auto;display: block; margin: 0 auto; padding: 0; } .facts .multibuttons ul li { position: relative; width: auto; height: auto; display: block; margin: 0 auto; padding: 0; text-align: center; } .facts .multibuttons ul li .imgshell, .facts .multibuttons ul li .imgleft { position: absolute; top: 0; width: 100%; height: 50%; display:table-cell; } .facts .multibuttons ul li .imgright, .facts .multibuttons ul li .imgcenter { position: absolute; bottom: 0; width: 100%; height: 50%; display:table-cell; } .facts .multibuttons ul li .imgshell img, .facts .multibuttons ul li .imgleft img, .facts .multibuttons ul li .imgright img, .facts .multibuttons ul li .imgcenter img { position: relative; width: 100%; height: auto; } .facts .multibuttons ul li .multitext { position: relative; display:block; margin: 0; padding: 0 2%; text-align: center; font-size: 1.5em; line-height: 1.2em; color: #c11c1c;} .facts .multibuttons ul li .multitext strong { position: relative; margin: 0; padding: 0; text-align: center; font-size: 2em; line-height: 1.2em; font-weight: 700; color: #222222;} .facts a:link, .facts a:visited {color: #FFFFFF; text-decoration: none;} .facts a:active, .facts a:hover {color: #CCCCCC; text-decoration: none;} /* start FAQ styles */ .faqs { position:relative; display:block; width:85%; max-width: 1000px; height: auto !important; overflow: visible; margin: 50px auto; padding: 0%; } .faqs .content .words .multibuttons { position: relative; margin: 0; padding: 0; background: #FFFFFF; display: block; overflow: visible; } .faqs .content .words .multibuttons ul { margin: 0; padding: 0; list-style: none; display: block; overflow: visible; border: 1px solid #ededed;} .faqs .content .words .multibuttons ul li { position: relative; width: 100%; height: auto !important; overflow: visible !important; margin: 0 0 0px 0; padding: 20px 0 20px 0; list-style:none; border-bottom: 1px solid #ededed; font-size: 1.1em; } .faqs .content .words .multibuttons ul li .multitext { position: relative; width: 90%; height: auto !important; overflow: visible !important; margin: 0; padding: 0; } .faqs .content .words .multibuttons ul li .multitext .ctabutton { position: relative; height: auto !important; float: none; margin: 0; padding: 0 0 0 10px; background: #FFFFFF; color: #222222; text-transform:none; letter-spacing: 0px; } .faqs .content .words .multibuttons ul li .multitext .ctabutton button.modal-open { position: relative; float: none; padding: 5px 0 0 0; background: #FFFFFF; color: #222222; font-size: 1.3em; text-transform: none; letter-spacing: 0px; height: auto !important; min-height: 25px; display:table-cell; overflow: hidden;} .faqs .content .words .multibuttons ul li .multitext .ctabutton button {white-space: normal; word-wrap: break-word;text-align: left; line-height: 1.3em; } /* start Four Column styles */ .fourcol { position: relative; width: 100%; height: auto; margin: 30px auto 50px auto; padding: 30px 0; display: table; background: #FFFFFF; } .fourcol .content { position: relative; width: 100%; max-width: 1000px; height: auto; margin: 50px auto; padding: 0px; display: table;} .fourcol .content>.imgleft, .fourcol>.content>.imgshell { position: relative; display:table-cell; float: left; width: 29%; height: auto !important; overflow: hidden; margin: 0px 30px 0px 20px; padding: 1%; background: #FFFFFF; } .fourcol .content>.imgleft img, .fourcol>.content>.imgshell img { width: 100%; height: auto; margin: 0px 30px 0px 0px;} .fourcol .content>.imgright { position: relative; display:table-cell; float: right; width: 29%; height: auto !important; overflow: hidden; margin: 0px 20px 0px 30px; padding: 1%; background: #FFFFFF; } .fourcol .content>.imgright img { width: 100%; height: auto; margin: 0;} .fourcol>.content>.imgcenter { position: relative; display:inline; float: left; width: 30%; overflow: hidden; margin: 0px auto; } .fourcol>.content>.imgcenter img { width: 100%; height: auto; margin: 0px 0px 0px 0px;} .fourcol>.content>.imgfull { position: relative; display:inline; float: left; width: 90%; overflow: hidden; margin: 0px auto; } .fourcol>.content>.imgfull img { width: 100%; height: auto; margin: 0px 0px 0px 0px;} .fourcol .content .embleft, .fourcol>.content .embshell { position: relative; display:table-cell; float: left; width: 48%; height: auto !important; overflow: hidden; margin: 0px 30px 20px 0px; } .fourcol .content .embleft iframe, .fourcol>.content .embshell iframe { width: 100%; height: auto; min-height: 300px; margin: 0px 30px 0px 0px;} .fourcol .content .embright { position: relative; display:table-cell; float: right; width: 48%; height: auto !important; overflow: hidden; margin: 0px 0px 0px 30px; } .fourcol .content .embright iframe { width: 100%; height: auto; min-height: 300px; margin: 0px 0px 0px 30px;} .fourcol .content .embcenter { position: relative; display:inline; float: left; width: 70%; overflow: hidden; margin: 0px auto; } .fourcol .content .embcenter iframe { width: 100%; height: auto; min-height: 400px; margin: 0px 0px 0px 0px;} .fourcol .content .embfull { position: relative; display:block; float: none; width: 90%; overflow: hidden; margin: 0px auto; } .fourcol .content .embfull iframe { width: 100%; height: auto; min-height: 600px; margin: 0px 0px 0px 0px;} .fourcol>.content>.words { position: relative; width: 100%; max-width: 1000px; display: block; margin: 0px auto;} .fourcol>.content>.words>.padding { text-align: center; line-height:1.9em; } .fourcol>.content>.words>.padding>p { line-height:1.9em; margin: 20px; } .fourcol>.content>.words>.padding>h2 { text-transform: uppercase; letter-spacing: 3px; text-align: center; color: #222222; font-weight: 700; font-size: 1.4em; padding:0; margin:0 auto; line-height:1em; } .fourcol>.content>.words>.padding>.subtitle { margin:10px auto; text-align: center; font-size: 1.1em;} .fourcol>.content>.words>.multibuttons { position: relative; width: 100%; max-width: 1000px; display: block; margin: 0px auto;} .fourcol>.content>.words>.multibuttons>ul { position: relative; margin: 0px auto; padding: 0px; width: 100%; display: table; } .fourcol>.content>.words>.multibuttons>ul>li { position: relative; width: 96%; display:table-cell; float: left; margin: 2%; padding: 0;text-align: center; min-height: 100px; background: #ededed; color: #222222; } .fourcol .content .words .multibuttons .cms-button { margin: 15px auto; line-height: 1em;} .fourcol>.content>.words>.multibuttons>ul>li>.multimgshell, .fourcol>.content>.words>.multibuttons>ul>li>.multimgleft, .fourcol>.content>.words>.multibuttons>ul>li>.multimgright, .fourcol>.content>.words>.multibuttons>ul>li>.multimgcenter{ position: relative; width: 90%; height: auto; display:block; overflow: hidden; margin: 5%; } .fourcol>.content>.words>.multibuttons>ul>li>.multimgfull{ position: relative; width: 100%; height: auto; display:block; overflow: hidden; margin: 0;} .fourcol>.content>.words>.multibuttons>ul>li>.multimgleft img, .fourcol>.content>.words>.multibuttons>ul>li>.multimgright img, .fourcol>.content>.words>.multibuttons>ul>li>.multimgcenter img, .fourcol>.content>.words>.multibuttons>ul>li>.multimgshell img, .fourcol>.content>.words>.multibuttons>ul>li>.multimgfull img { position: relative; width: 100%; height: auto; padding: 0; margin: 0;} .fourcol>.content>.words>.multibuttons>ul>li>.multitext { position: relative; width: 96%; height: auto; margin: 2%; display:block; float:none; line-height: 1.8em; } .fourcol>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {font-size: 1.2em; text-align: center; color:#333;font-weight: 700; margin: 10px auto 15px auto;} .fourcol>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:link, .fourcol>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:visited {text-decoration:none;} .fourcol>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:active, .fourcol>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:hover{text-decoration:underline;} .fourcol>.content>.words>.multibuttons>ul>li>.multitext button.modal-open {color: #FFFFFF; text-decoration: none; font-weight: 700; } .fourcol>.content>.words>.multibuttons>ul>li>.multitext>div>ul { position: relative; text-align: left; width: 90%; margin: 0 auto; } .fourcol>.content>.words>.multibuttons>ul>li>.multitext>div>ul>li { text-align: left; margin: 0 0 10px 0; } .fourcol>.content>.words>.multibuttons>ul>li>.multitext>.ctabutton>button.modal-open { margin: 0; padding: 0; line-height: 1.1em; } .fourcol>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>.ctabutton {display:inline-block;margin-top: 20px;} body#home .fourcol .multitext { text-align: center;} body#home .fourcol h2 { color: #c11c1c; font-weight: 700;font-size: 1.5em;} body#home .fourcol .ctabutton { display: block; margin: 0px auto;text-align: center; align-content: center; width: 10%; } /* heroshell Two column H2 and main image styles */ #heroshell { float:left; position: relative; top: 0px; width: 100%; max-height: 350px; min-height: 100px; overflow: hidden; z-index: 1000; margin: 0 0 20px 0; padding: 0; } #heroshell>.introbuttons { bottom: 28%; } /* start Highlight Cluster styles*/ .highcluster { position:relative; display:block; width:100%; height: auto !important; overflow: visible; margin: 20px auto 50px auto; padding: 0px; align-content: center;max-width: 1000px; } .highcluster>.content { position: relative; display:block; float: none; width: 100%; overflow: hidden; margin: 0 auto; padding: 0;} .highcluster>.content>.imgshell, .highcluster>.content>.imgleft, .highcluster>.content>.imgcenter, .highcluster>.content>.imgfull, .highcluster>.content>.imgright{ position: relative; width: 100%; float: none; display: block; margin: 0 1% 1% 0; padding: 0; overflow: visible; } .highcluster .content .imgshell img, .highcluster .content .imgleft img, .highcluster .content .imgcenter img, .highcluster .content .imgfull img, .highcluster .content .imgright img { width: 100%; height: auto !important; padding: 0; margin: 0; } .highcluster>.content>.words { position: relative; top: 0px; display:block; float: none; width: 90%; height: auto !important; overflow: visible; margin: 0 auto; padding: 0; } .highcluster>.content>.words>.padding { position: relative; text-align: left; width: 95%; margin: 2.5%; padding: 0; display: block; color: #222222; z-index: 1001; background:none; } .highcluster>.content>.words>.padding p { margin: 0; padding: 0; } .highcluster>.content>.words>.padding>.ctabutton { display: inline-block; float: none; width: auto; margin: 10px auto; padding: 10px;font-size: 0.8em; line-height: 0.3em; background: #c11c1c; } .highcluster>.content>.words>.padding>.ctabutton>a:link, .highcluster>.content>.words>.padding>.ctabutton>a:visited { color: #FFFFFF; text-decoration: none;} .highcluster>.content>.words>.padding>.ctabutton>a:hover { color: #FFFFFF; text-decoration: underline;} .highcluster>.content>.words>.padding>ul { position: relative; text-align: left; width: 100%; margin: 0 auto; } .highcluster>.content>.words>.padding>ul>li { text-align: left; } .highcluster>.content>.words>.padding>h2 { color: #222222; margin: 0; } .highcluster>.content>.words>.multibuttons { position: relative; width: 95%; float: none;margin: 0 auto; } .highcluster>.content>.words>.multibuttons>ul { position: relative; text-align: left; width: 100%; margin: 0 auto; padding: 0;} .highcluster>.content>.words>.multibuttons>ul>li { min-height: 85px; display: block; list-style: none; position: relative; color: #333; text-align: left; width: auto !important; padding: 5px 0; margin: 0 auto; font-size: 0.9em; overflow: visible; clear:both; } .highcluster>.content>.words>.multibuttons>li a:link, .highcluster>.content>.words>.multibuttons>li a:visited { color:#c11c1c; text-decoration: none; background: none; } .highcluster>.content>.words>.multibuttons>ul>li>.multitext { position: relative; width: 100%; margin: 0 auto;float: none; display: block; } .highcluster>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {position: relative; float: none; display: block; background: none; font-size: 1.3em; text-align: left; color:#c11c1c;font-weight: 700; margin: 0;} .highcluster>.content>.words>.multibuttons>ul>li>.multitext>p { margin: 0; padding: 0;} .highcluster>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:link,.highcluster>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:visited {color: #c11c1c; text-decoration: none;} .highcluster>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:active,.highcluster>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:hover {color: #c11c1c; text-decoration: underline; font-weight: 700; background: #ededed;} .highcluster>.content .words>.multibuttons>li>.multitext>.textmulti { } .highcluster>.content>.words>.padding>.ctabutton>button.modal-open { font-size: 1.0em; line-height: 1em; margin: 0px; padding: 0; text-transform: none; letter-spacing: none; text-align: center; width: auto; color: #c11c1c; float: none;} .highcluster>.content>.words>.multibuttons>ul>li>.multimgshell { position: relative; width: 100%; margin: 0 auto;float: none; display: block; } .highcluster>.content>.words>.multibuttons>ul>li>.multimgshell img{ width: 100%; margin: 0 auto;float: left; display: inline; } .highfacts>.content>.imgleft, .highfacts>.content>.imgright, .highfacts>.content>.imgcenter, .highfacts>.content>.imgfull, .highfacts>.content>.imgshell { position: relative; width: 100%; float: none; display: block; margin: 0 0 1% 0; padding: 0; } .highfacts>.content>.imgshell>.caption { margin: 0; padding: 0; text-align: left; } .highfacts>.content>.words { position: relative; display:block; float: none; width: 100%; height: auto !important; min-height: 100px; overflow: visible; margin: 0; padding: 0; } .highfacts>.content>.words>.padding { position: relative; text-align: left; width: 90%; margin: 1% 5%; padding: 0; display: block; color: #222222; z-index: 1001; background: none; } .highfacts>.content>.words>.padding p { margin: 0; padding: 0; } .highfacts>.content>.words>.padding>.ctabutton { display: inline; float: left; width: auto; margin: 10px 0 0 0; padding: 10px;font-size: 0.8em; line-height: 0.3em; background: #ededed; } .highfacts>.content>.words>.padding>.ctabutton>a:link, .highfacts>.content>.words>.padding>.ctabutton>a:visited { color: #c11c1c; text-decoration: none;} .highfacts>.content>.words>.padding>.ctabutton>a:hover { color: #c11c1c; text-decoration: underline; } .highfacts>.content>.words>.padding>ul { position: relative; text-align: left; width: 80%; margin: 0 auto; } .highfacts>.content>.words>.padding>ul>li { text-align: left; } .highfacts>.content>.words>.padding>h2 { color: #222222; margin: 10px 0; } .highfacts>.content>.words>.multibuttons { position: relative; width: 100%; height: auto !important; overflow: visible; float: none;margin: 0; } .highfacts>.content>.words>.multibuttons>ul { position: relative; text-align: left; width: 96%; margin: 0 auto; } .highfacts>.content>.words>.multibuttons>ul>li { position: relative; width: 40%; min-height: 100px; display: inline; float: left;; list-style: none;color: #333; text-align: center; padding: 2.0%; margin: 0 1% 1% 0; font-size: 1.2em; align-content: center; background: #ededed; word-wrap:break-word;} .highfacts>.content>.words>.multibuttons>li a:link, .highfacts>.content>.words>.multibuttons>li a:visited { color:#c11c1c; text-decoration: none; background: none; } .highfacts>.content>.words>.multibuttons>ul>li>.multitext { position: relative; width: 90%; margin: 0 auto;text-align: center; line-height: 2.0em; } .highfacts>.content>.words>.multibuttons>ul>li>.multitext>.linktitle {position: relative; float: none; display: block; background: none; font-size: 2em; text-align: center; color:#c11c1c;font-weight: 700; margin: 10px 0 0 0;} .highfacts>.content>.words>.multibuttons>ul>li>.multitext>p { margin: 0; padding: 0;} .highfacts>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:link,.highfacts>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:visited {color: #c11c1c; text-decoration: none;} .highfacts>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:active,.highfacts>.content>.words>.multibuttons>ul>li>.multitext>.linktitle>a:hover {color: #c11c1c; text-decoration: underline; font-weight: 700; background: #ededed;} .highfacts>.content .words>.multibuttons>li>.multitext>.textmulti { } .highfacts>.content>.words>.padding>.ctabutton>button.modal-open { font-size: 1.0em; line-height: 1em; margin: 0px; padding: 0; text-transform: none; letter-spacing: none; text-align: center; width: auto; color: #c11c1c; float: none;} .highfacts>.content>.words>.multibuttons>ul>li>.multimgshell { position: relative; width: 30%; margin: 0 auto;float: left; display: inline; } .highfacts>.content>.words>.multibuttons>ul>li>.multimgshell img{ width: 90%; margin: 0 auto;float: left; display: inline; } .highfacts > .content > .words > .multibuttons > ul > li { width: 90%; margin: 1% 0;} .highlight { position:relative; display:table; overflow: visible; width:100%; height: auto !important; margin: 20px auto; padding: 0 0 50px 0; align-content: center; background: #f0f0f0; } .highlight .content { position: relative; display:block; width: 100%; overflow: visible; margin: 0 auto; align-content: center; } .highlight .content .embshell, .highlight .content .embleft, .highlight .content .embright { position: relative; display:block; width: 98%; overflow: visible; margin: 0 auto 20px auto; align-content: center; } .highlight .content .embshell iframe, .highlight .content .embleft iframe, .highlight .content .embright iframe, .highlight .content .embcenter iframe, .highlight .content .embfull iframe { min-height: 200px; } .highlight>.content>.words {display: block; float: none; width: 90%; margin: 0 auto; min-height: 300px; background: #f0f0f0; } .highlight>.content>.words>.padding {text-align: left; overflow-x: hidden; width: 80%; padding: 0 10%;} .highlight>.content>.words>.padding .ctabutton {width: auto !important;} .highlight>.content>.words>.padding>h2 {font-size: 1.7em;text-align: left;} .highlight .words { position: relative; display: block; left: 0%; bottom: 5px; z-index: 200; text-align: left; width: 95%; margin: 0 auto 20px auto; } .highlight > .content > .words > .padding .ctabutton {} .highlight .words h2 { } .highlight .imgcenter { position: relative; display: block; float: none; width: 90%; margin: 0 auto; overflow: visible; } .highlight .imgcenter img { width: 100%; height: auto; } .highlight .imgfull { position: relative; display: block; float: none; width: 90%; margin: 0 auto; overflow: visible; } .highlight .imgfull img { width: auto !important; height: 400px; margin: 0px; } #maintext .highlight .content .imgleft { position: relative; display: block; float: none; width: 90%; margin: 0 auto; overflow: visible; } #maintext .highlight .content .imgright { position: relative; display: block; float: none; width: 90%; margin: 0 auto; overflow: visible; } #maintext .highlight .content .imgshell { position: relative; display: block; float: none; width: 90%; margin: 5% auto 0 auto; overflow: visible; } .highlight .content .imgleft img, .highlight .content .imgright img { width: 100%; height: auto !important; margin: 0 0 0 0; } .highlight > .content > .words > .multibuttons > ul {width: 90%; padding: 0; } .highlight > .content > .words > .multibuttons > ul li .multitext {line-height: 1.0em; } .montage {} .multitext { line-height: 38px; } .multitext strong { } /* start One Column styles */ .onecol { position: relative; width: 90%; height: auto; margin: 30px auto; padding: 0px 0; display: inline; float: none; clear:none !important; background: #FFFFFF; } .onecol .content { position: relative; width: 100%; height: auto; margin: 0 auto; padding: 1%; display: table; background: #FFFFFF; } .onecol>.content>.words { position: relative; width: 100%; max-width: 1000px; display: block; margin: 0px auto; float: none; padding: 0;} .onecol>.content>.words>.padding { position: relative; text-align: left; width: 95%; float: none; display: block; margin: 0 2.5%; padding: 0; } .onecol>.content>.words>.multibuttons { position: relative; width: 100%; max-width:100%; display: block; float: none; margin: 0px; padding: 0; } .onecol>.content>.words>.multibuttons>ul { position: relative; width: 100%; display: block; float: none; margin: 0px auto; padding: 0; } .onecol>.content>.words>.multibuttons>ul>li { position: relative; width: 90%; max-width:90%; display: block; float: none; margin: 0px auto; padding: 2.5%; min-height: 100px; } .onecol>.content>.words>.multibuttons>ul>li>.multitext { padding: 0; } /* photo clusters */ #photocluster { position: relative; width: 95%; height: auto !important; display: block; margin: 0 auto; padding: 0; } #photocluster h2 {font-size: 1.2em; font-weight: 700; color:#222222; text-transform: uppercase; letter-spacing: 3px; padding: 0 0 20px 0; border-bottom: 1px solid #222222; margin: 0 0 20px 0; text-align: center; } #photocluster .solophoto { position: relative; width: 100% !important; float: none; margin: 0; padding: 0; z-index:1000; } #photocluster .solophoto .soloimg { position: relative; width: 100%; height: auto !important; max-height: 557px; display: block; margin: 0; padding: 0; overflow: hidden; } #photocluster .solophoto .soloimg img { width: 100%; height: auto !important; margin: 0; padding: 0; } #photocluster .solophoto .solovid { position: relative; width: 100%; height: auto !important; min-height: 200px !important; display: block; margin: 0 0 20px 0; padding: 0; overflow: visible;} #photocluster .solophoto .solovid iframe { position: absolute;top: 0;left: 0; width: 100%; height: 100%; } #photocluster .solophoto .solovid .caption { display: none;} #photocluster .solophoto .solotext { position: absolute; bottom: 0; width: 90%; height: auto !important; display: block; margin: 0; padding: 5%; color: #FFFFFF; font-size: 1.7em; font-weight: 600;z-index:1001; } #photocluster .solophoto .solotext h2 { color: #FFFFFF; font-size: 1.7em; } #photocluster .solophoto .solocaption { position: relative; background: #ededed; margin-top: 15px;padding: 20px; } #photocluster .cluster { position: relative; width: 100% !important; float: none; margin: 0; padding: 0;} #photocluster .cluster .clustimg { position: relative; width: 50%; height: 273px; max-height: 273px; float: none; margin: 0; padding: 0; background: #222222; color: #FFFFFF; } #photocluster .cluster .clustimg img { width: 100%; height: auto !important; } #photocluster .cluster .clustimg .clustvid { position: relative; width: 100%; height: auto; margin: 0; padding: 0; } #photocluster .cluster .clustimg .clustvid iframe { position: absolute;top: 0;left: 0; width: 100%; height: 100%; min-height: 200px; margin: 0; padding: 0; overflow: visible; z-index: 9999; display: cover;} #photocluster .cluster .clustimg iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;} #photocluster .cluster .clustimg .clusttext { position: absolute; bottom: 1%; width: 90%; height: auto !important; display: block; margin: 0; padding: 5%; font-size: 1.1em; color: #FFFFFF; font-weight: 400; } .solotext a:link, .solotext a:visited { color: #FFFFFF; text-decoration: none; margin: 0px; } .solotext a:active, .solotext a:hover { color: #FFFFFF; text-decoration: underline; } .clusttext a:link, .clusttext a:visited { color: #FFFFFF; text-decoration: none; margin: 0px; font-weight: 700;font-size: 1.2em; } .clusttext a:active, .clusttext a:hover { color: #FFFFFF; text-decoration: underline; font-weight: 700;font-size: 1.2em; } /* ----- Styles for PR Fac & student Profiles ---- */ #profile { width: 80%; padding: 5%; margin: 20px auto; border: 1px solid #333; } #profile .profimg { position: relative; display: block; width: 100%; height: auto; float: none; margin: 0px; } #profile .profimg img { width: 100%; height: auto; } #profile .proftext { position: relative; display: block; width: 100%; height: auto; float: none; margin: 0px; } /* start Section Header styles*/ .section { position:relative; display:block; width:90%; height: auto !important; overflow: visible; margin: 50px auto 0px auto; padding: 0px; align-content: center;max-width: 1000px; background:url(https://www.bard.edu/images/line.png) repeat-x; } .section>.content { position: relative; display:block; float: none; width: 100%; overflow: hidden; margin: 0 auto; padding: 0; text-align: center; } .section>.content h2 { position: relative; display: inline-block; text-align: center; height: 30px; width: auto !important; text-transform: uppercase; letter-spacing: 2px; font-size: 1.2em; line-height: 1em; padding: 5px 10px; margin: 0;background: #FFFFFF; color: #333; clear: both;} .section>.content p { position: relative; width: 90%; background: #ededed; margin: 10px 2.5%; padding: 2.5%; } .section>.content>.words { position: relative; display:block; float: none; width: 100%; overflow: hidden; margin: 0 auto; padding: 0; text-align: center; } .section>.content>.words>.padding { position: relative; display:block; float: none; width: 100%; overflow: hidden; margin: 0 auto; padding: 0; text-align: center; } .section>.content>.words>.padding>.ctabutton { display: inline-block; } .sidecols { position: relative; display: block; width: 100%; height: auto !important; overflow: visible; padding: 0; margin: 30px auto;} .sidecols .content { position: relative; display: block; width: 100%; max-width: 1000px; height: auto !important; overflow: visible; } .sidecols .content .imgshell { position: relative; display: block; width: 100%; height: auto !important; overflow: visible; } .sidecols .content .imgshell img { position: relative; display: block; width: 100%; height: auto !important; } .sidecols .content .words{ position: relative; display: block; width: 100%; height: auto !important; overflow: visible; vertical-align: top; margin: 0 auto; padding: 0; } .sidecols .content .words .padding { position: relative; display: block; width: 90%; min-width: 90%; height: auto !important; min-height: 200px; overflow: visible; padding: 5%; margin: 0 auto;background: #ededed; vertical-align: top; } .sidecols .content .words .padding h2 { font-size: 1.3em; font-weight: 700; margin: 0; padding: 0; } .sidecols .content .words .padding .cms-button { margin: 0 10px 5px 0px; } .sidecols .content .words .multibuttons { position: relative; display: block; width: 100%; height: auto !important; overflow: visible; margin: 0; padding: 0; } .sidecols .content .words .multibuttons ul { position: relative; display: block; width: 100%; height: auto !important; margin: 0; padding: 0 0 0 0; overflow: visible; vertical-align: top; } .sidecols .content .words .multibuttons ul li { position: relative; display: block; width: 90%; height: auto !important; min-height: 200px; padding: 5%; margin: 0; vertical-align: top; overflow: visible; } .sidecols .content .words .multibuttons ul li .linktitle { color:#222222; margin: 20px 0px 5px 0px; display: block; font-size: 1.2em; font-weight: 700; line-height: 1em;} .sidecols .content .words .multibuttons ul li .multimgshell { position: relative; display: block; width: 100%; height: auto !important; overflow: visible; } .sidecols .content .words .multibuttons ul li .multimgshell img { position: relative; width: 100%; height: auto !important; } .spotlight { position:relative; display:table; width:100%; min-height: 300px; background:#222222; padding: 0 0 20px 0; margin: 50px auto; align-content: center; overflow: hidden; } .spotlight h2 {color:#FFFFFF; text-transform: uppercase; letter-spacing: 2px; } .spotlight>.content { } .spotlight>.content>.words { position:relative; width:100%; height:auto; overflow: visible; margin: 0px auto; padding: 0%; text-align: center; color: #FFFFFF; } .spotlight>.content>.words>.padding { width: 80%; height:auto; display: block; overflow: visible; margin: 0px auto; padding: 10px 5% 20px 5%; text-align: left; color: #FFFFFF; } .spotlight>.content>.words>.padding>h2 { text-align: left; color: #FFFFFF; } .spotlight>.content>.imgshell { position: relative; float:none; display: block; width:100%; margin: 0px auto;} .spotlight>.content>.imgleft { position: relative; float:none; display: block; width:100%; margin: 0px auto; overflow: hidden;} .spotlight>.content>.imgright { position: relative; float:none; display: block; width:100%; margin: 0px auto; } .spotlight>.content>.imgleft iframe { position: relative; float:none; display: block; max-width:90%; margin: 0px auto; overflow: hidden; } .spotlight .content .embshell, .spotlight .content .embleft, .spotlight .content .embright { position: relative; display:block; width: 98%; overflow: visible; margin: 1% auto; align-content: center; background: #222222;} .spotlight .content .embshell iframe, .spotlight .content .embleft iframe, .spotlight .content .embright iframe { min-height: 200px; background: #222222;} .spotlight .caption{ padding-left: 20px; } .text { display: block; float: none; width: 90%; margin: 0px auto; padding: 0; } .text>.content { position: relative; display: block; float: none; width: 100%; margin: 0px; padding: 0; } .text>.content>.imgleft, .text>.content>.imgright { display: block; float: none; width: 100%; margin: 20px auto; padding: 0; } .text>.content>.words { display: block; float: none; width: 100%; margin: 20px auto; padding: 0; max-width: 100%; text-align: left;} .text>.content>.words>.padding { display: block; float: none; width: 80%; margin: 20px auto; padding: 0;} .text>.content>.multibuttons { display: block; float: none; width: 85%; margin: 20px auto; } .text>.content .embleft, .text>.content .embright, .text>.content .embshell {width: 100%; float: none; display: block; margin: 0 0 20px 0;} .threecol { position: relative; width: 100%; max-width:100%; height: auto; margin: 50px auto; padding: 20px 0px; display: block; } .threecol>.content>.words { position: relative; width: 100%; max-width:100%; height: auto; margin: 0px auto; padding: 20px 0px; display: block; } .threecol>.content>.imgleft, .text .content .imgshell { position: relative; display:block; float: none; width: 95%; height: auto !important; overflow: visible; margin: 10px auto 20px auto; } .threecol>.content>.imgleft img, .text .content .imgshell img { width: 100%; height: auto; margin: 0px 0px 0px 0px;} .threecol>.content>.imgleft iframe, .text .content .imgshell iframe { width: 100%; height: auto; min-height:200px; margin: 0px 0px 0px 0px;} .threecol>.content>.imgright { position: relative; display:block; float: none; width: 80%; height: auto !important; overflow: visible; margin: 20px auto; padding: 5%; background: #FFFFFF;} .threecol>.content>.imgright img { width: 100%; height: auto; margin: 0;} .threecol>.content>.imgcenter { position: relative; display:block; float: none; width: 95%; overflow: hidden; margin: 10px auto 20px auto; } .threecol>.content>.imgcenter img { width: 100%; height: auto; margin: 0px 0px 0px 0px;} .threecol .ctabutton {margin: 0px 20px; align-self: center; align-content: center; } .threecol>.content>.words>.padding { margin: 0 !important; } .threecol>.content>.words>.padding > p { margin: 10px; } .threecol>.content>.words>.padding>h2 { color: #222222; font-weight: 700; font-size: 1.2em; padding:0; margin:0 auto; line-height:1em; text-align: center; text-transform: uppercase; letter-spacing: 3px; } .threecol .content { width: 80% !important; max-width: 80% !important; margin: 0px auto; overflow-x: hidden; } .threecol>.content>.words>.multibuttons>ul { margin: 0px auto; padding: 0; width: 100%; max-width:100%; display: block; float: none; overflow-x: hidden; } .threecol>.content>.words>.multibuttons>ul>li { position: relative; width: 100%; display:block; padding: 0; float: none; margin: 0 0 20px 0; overflow: visible; min-height: 10px;} /* new full width image style for columns */ .threecol>.content>.words>.multibuttons>ul>li>.multimgfull { position: relative; width: 100%; display:block; float: none; margin: 0 0 20px 0; overflow: visible; } .threecol>.content>.words>.multibuttons>ul>li>.multimgshell, .threecol>.content>.words>.multibuttons>ul>li>.multimgleft, .threecol>.content>.words>.multibuttons>ul>li>.multimgright, .threecol>.content>.words>.multibuttons>ul>li>.multimgcenter { position: relative; width: 90%; display:block; float: none; margin: 5%; padding-top: 20px; overflow: visible;} .threecol>.content>.words>.multibuttons>ul>li>.multimgshell img, .threecol>.content>.words>.multibuttons>ul>li>.multimgleft img, .threecol>.content>.words>.multibuttons>ul>li>.multimgright img, .threecol>.content>.words>.multibuttons>ul>li>.multimgcenter img, .threecol>.content>.words>.multibuttons>ul>li>.multimgfull img{ width: 100%; height: auto; } .threecol>.content>.words>.multibuttons>ul>li>.multimgshell iframe, .threecol>.content>.words>.multibuttons>ul>li>.multimgleft iframe, .threecol>.content>.words>.multibuttons>ul>li>.multimgright iframe, .threecol>.content>.words>.multibuttons>ul>li>.multimgcenter iframe, .threecol>.content>.words>.multibuttons>ul>li>.multimgfull iframe { width: 95%; display:block; float: none; margin: 10px auto 20px auto; overflow: visible; } .threecol > .content > .words > .multibuttons > ul > li > .multitext { width: 100%; display:block; float: none; margin: 0; padding: 2.5% 0; overflow: visible; } .threecol > .content > .words > .multibuttons > ul > li > .multitext > .linktitle {line-height: 1em;} .threecol > .content > .words > .multibuttons > ul > li > .multitext > p .cms-button {margin-top: 20px;} /* --------- Three Col w/ Dark Background ----------- */ .threecold { position: relative; width: 100%; max-width:100%; height: auto; margin: 25px auto; padding: 20px 0px; display: block; } .threecold>.content>.words { position: relative; width: 90%; max-width:90%; height: auto; margin: 0px auto; padding: 20px 0px; display: block; } .threecold>.content>.imgleft, .text .content .imgshell { position: relative; display:block; float: none; width: 95%; height: auto !important; overflow: visible; margin: 10px auto 20px auto; } .threecold>.content>.imgleft img, .text .content .imgshell img { width: 100%; height: auto; margin: 0px 0px 0px 0px;} .threecold>.content>.imgleft iframe, .text .content .imgshell iframe { width: 100%; height: auto; min-height:200px; margin: 0px 0px 0px 0px;} .threecold>.content>.imgright { position: relative; display:block; float: none; width: 80%; height: auto !important; overflow: visible; margin: 20px auto; padding: 5%; background: #FFFFFF;} .threecold>.content>.imgright img { width: 100%; height: auto; margin: 0;} .threecold>.content>.imgcenter { position: relative; display:block; float: none; width: 95%; overflow: hidden; margin: 10px auto 20px auto; } .threecold>.content>.imgcenter img { width: 100%; height: auto; margin: 0px 0px 0px 0px;} .threecold .ctabutton {margin: 0px 20px; align-self: center; align-content: center; } .threecold>.content>.words>.padding>h2 { color: #FFFFFF; font-weight: 700; font-size: 1.2em; padding:0; margin:0 auto; line-height:1em; text-align: center; text-transform: uppercase; letter-spacing: 3px; } .threecold>.content { max-width:100%; margin: 0px auto; overflow-x: hidden; } .threecold>.content>.words>.multibuttons>ul { margin: 0px auto; padding: 0; width: 100%; max-width:100%; display: block; float: none; overflow-x: hidden; } .threecold>.content>.words>.multibuttons>ul>li { position: relative; width: 100%; display:block; padding: 0 0 20px 0; float: none; margin: 10px auto 10px auto; overflow: visible; min-height: 100px;} /* new full width image style for columns */ .threecold>.content>.words>.multibuttons>ul>li>.multimgfull { position: relative; width: 100%; display:block; float: none; margin: 0 0 20px 0; overflow: visible; } .threecold>.content>.words>.multibuttons>ul>li>.multimgshell, .threecold>.content>.words>.multibuttons>ul>li>.multimgleft, .threecold>.content>.words>.multibuttons>ul>li>.multimgright, .threecold>.content>.words>.multibuttons>ul>li>.multimgcenter { position: relative; width: 90%; display:block; float: none; margin: 5%; padding-top: 20px; overflow: visible; } .threecold>.content>.words>.multibuttons>ul>li>.multimgfull img { width: 100%; display:block; float: none; margin: 0 0 20px 0; overflow: visible; } .threecold>.content>.words>.multibuttons>ul>li>.multimgshell img, .threecold>.content>.words>.multibuttons>ul>li>.multimgleft img, .threecold>.content>.words>.multibuttons>ul>li>.multimgright img, .threecold>.content>.words>.multibuttons>ul>li>.multimgcenter img { width: 100%; height: auto; } .threecold>.content>.words>.multibuttons>ul>li>.multimgshell iframe, .threecold>.content>.words>.multibuttons>ul>li>.multimgleft iframe, .threecold>.content>.words>.multibuttons>ul>li>.multimgright iframe, .threecold>.content>.words>.multibuttons>ul>li>.multimgcenter iframe, .threecold>.content>.words>.multibuttons>ul>li>.multimgfull iframe { width: 95%; display:block; float: none; margin: 10px auto 20px auto; overflow: visible; } .threecold .multitext { width: 95%; display:block; float: none; margin: 10px auto 20px auto; overflow: visible; } .threecold > .content > .words > .multibuttons > ul > li > .multitext > .linktitle {line-height: 1em;} .threecold > .content > .words > .multibuttons > ul > li > .multitext > p .cms-button {margin-top: 20px;} .threecolw { position: relative; width: 100%; max-width:100%; height: auto; margin: 25px auto; padding: 20px 0px; display: block; } .threecolw>.content>.words { position: relative; width: 90%; max-width:90%; height: auto; margin: 0px auto; padding: 20px 0px; display: block; } .threecolw>.content>.imgleft, .text .content .imgshell { position: relative; display:block; float: none; width: 95%; height: auto !important; overflow: visible; margin: 10px auto 20px auto; } .threecolw>.content>.imgleft img, .text .content .imgshell img { width: 100%; height: auto; margin: 0px 0px 0px 0px;} .threecolw>.content>.imgleft iframe, .text .content .imgshell iframe { width: 100%; height: auto; min-height:200px; margin: 0px 0px 0px 0px;} .threecolw>.content>.imgright { position: relative; display:block; float: none; width: 80%; height: auto !important; overflow: visible; margin: 20px auto; padding: 5%; background: #FFFFFF;} .threecolw>.content>.imgright img { width: 100%; height: auto; margin: 0;} .threecolw>.content>.imgcenter { position: relative; display:block; float: none; width: 95%; overflow: hidden; margin: 10px auto 20px auto; } .threecolw>.content>.imgcenter img { width: 100%; height: auto; margin: 0px 0px 0px 0px;} .threecolw .ctabutton {margin: 0px 20px; align-self: center; align-content: center; } .threecolw>.content>.words>.padding>h2 { color: #222222; font-weight: 700; font-size: 1.2em; padding:0; margin:0 auto; line-height:1em; text-align: center; text-transform: uppercase; letter-spacing: 3px; } .threecolw>.content { max-width:100%; margin: 0px auto; overflow-x: hidden; } .threecolw>.content>.words>.multibuttons>ul { margin: 0px auto; padding: 0; width: 100%; max-width:100%; display: block; float: none; overflow-x: hidden; } .threecolw>.content>.words>.multibuttons>ul>li { width: 100%; display:block; padding: 0 0 20px 0; float: none; margin: 10px auto 10px auto; overflow: visible; min-height: 100px;} /* new full width image style for columns */ .threecolw>.content>.words>.multibuttons>ul>li>.multimgfull { width: 100%; display:block; float: none; margin: 0 0 20px 0; overflow: visible; } .threecolw>.content>.words>.multibuttons>ul>li>.multimgshell, .threecolw>.content>.words>.multibuttons>ul>li>.multimgleft, .threecolw>.content>.words>.multibuttons>ul>li>.multimgright, .threecolw>.content>.words>.multibuttons>ul>li>.multimgcenter { width: 90%; display:block; float: none; margin: 5%; padding-top: 20px; overflow: visible; } .threecolw>.content>.words>.multibuttons>ul>li>.multimgshell img, .threecolw>.content>.words>.multibuttons>ul>li>.multimgleft img, .threecolw>.content>.words>.multibuttons>ul>li>.multimgright img, .threecolw>.content>.words>.multibuttons>ul>li>.multimgcenter img, .threecolw>.content>.words>.multibuttons>ul>li>.multimgfull img { width: 100%; height: auto; } .threecolw>.content>.words>.multibuttons>ul>li>.multimgshell iframe, .threecolw>.content>.words>.multibuttons>ul>li>.multimgleft iframe, .threecolw>.content>.words>.multibuttons>ul>li>.multimgright iframe, .threecolw>.content>.words>.multibuttons>ul>li>.multimgcenter iframe, .threecolw>.content>.words>.multibuttons>ul>li>.multimgfull iframe { width: 95%; display:block; float: none; margin: 10px auto 20px auto; overflow: visible; } .threecolw>.multitext { width: 95%; display:block; float: none; margin: 10px auto 20px auto; overflow: visible; } .threecolw>.content>.words>.multibuttons>ul>li>.multitext > .linktitle {line-height: 1em;} .threecolw > .content > .words > .multibuttons > ul > li > .multitext > p .cms-button {margin-top: 20px;} /* start Two Column styles */ main #maintext .content .twocol { position: relative; width: 100%; height: auto; margin: 2% auto; padding: 0; display: inline; float: left; clear:none !important; } .twocol .content { width: 90%; margin : 0 auto; display: block; } .twocol>.content>.words { position: relative; width: 100%; display: block; margin: 0px; } .twocol>.content>.words>.padding { position: relative; text-align: left; width: 95%; float: none; display: block; padding: 2.5%; margin: 0 auto } .twocol>.content>.words>.padding h2, .twocol>.content>.words>.padding p { position: relative; text-align: left; width: 95%; display: block; padding: 2.5%; margin: 0 auto } .twocol>.content>.words>.multibuttons { position: relative; width: 100%; max-width:1200px; display: block; margin: 0px auto;} .twocol>.content>.words>.multibuttons>ul { position: relative; margin: 0px auto; width: 100%; display: block; } .twocol>.content>.words>.multibuttons>ul>li { position: relative; width: 80%; display:block; float: left; margin: 10px auto; padding: 5%;height: auto !important; background: #FFFFFF;overflow: visible; } .twocol>.content>.words>.multibuttons>ul>li>.multimgshell, .twocol>.content>.words>.multibuttons>ul>li>.multimgleft, .twocol>.content>.words>.multibuttons>ul>li>.multimgcenter, .twocol>.content>.words>.multibuttons>ul>li>.multimgfull{ position: relative; width: 100%; height: auto; max-height: 400px; overflow: visible; padding: 0; margin: 0;display: block; float: none;} .twocol>.content>.words>.multibuttons>ul>li>.multimgshell img, .twocol>.content>.words>.multibuttons>ul>li>.multimgleft img, .twocol>.content>.words>.multibuttons>ul>li>.multimgcenter img, .twocol>.content>.words>.multibuttons>ul>li>.multimgfull img { position: relative; width: 100%; height: auto !important; } .twocol>.content>.words>.multibuttons>ul>li>.multimgright { position: relative; width: 100%; height: auto; max-height: 400px; overflow: hidden; padding: 0; margin: 0;display: block; float: none; } .twocol>.content>.words>.multibuttons>ul>li>.multimgright img { position: relative; width: 100%; height: auto !important; } .twocol>.content>.words>.multibuttons>ul>li>.multitext { position: relative; width: 100%; padding: 0%; margin: 0; } /* start Two Column DARK styles */ main #maintext .content .twocold { position: relative; width: 100%; height: auto; margin: 2% auto; padding: 0; display: inline; float: left; clear:none !important; } .twocold .content { width: 90%; margin : 0 auto; display: block; } .twocold>.content>.words { position: relative; width: 100%; display: block; margin: 0px; } .twocold>.content>.words>.padding { position: relative; text-align: left; width: 95%; float: none; display: block; padding: 2.5%; margin: 0 auto } .twocold>.content>.words>.padding h2, .twocol>.content>.words>.padding p { position: relative; text-align: left; width: 95%; display: block; padding: 2.5%; margin: 0 auto } .twocold>.content>.words>.multibuttons { position: relative; width: 100%; max-width:1200px; display: block; margin: 0px auto;} .twocold>.content>.words>.multibuttons>ul { position: relative; margin: 0px auto; width: 100%; display: block; } .twocold>.content>.words>.multibuttons>ul>li { position: relative; width: 80%; display:block; float: left; margin: 10px auto; padding: 5%;height: auto !important; background: #FFFFFF;overflow: visible; } .twocold>.content>.words>.multibuttons>ul>li>.multimgshell, .twocold>.content>.words>.multibuttons>ul>li>.multimgleft, .twocold>.content>.words>.multibuttons>ul>li>.multimgcenter, .twocold>.content>.words>.multibuttons>ul>li>.multimgfull{ position: relative; width: 100%; height: auto; max-height: 400px; overflow: visible; padding: 0; margin: 0;display: block; float: none;} .twocold>.content>.words>.multibuttons>ul>li>.multimgshell img, .twocold>.content>.words>.multibuttons>ul>li>.multimgleft img, .twocold>.content>.words>.multibuttons>ul>li>.multimgcenter img, .twocold>.content>.words>.multibuttons>ul>li>.multimgfull img { position: relative; width: 100%; height: auto !important; } .twocold>.content>.words>.multibuttons>ul>li>.multimgright { position: relative; width: 100%; height: auto; max-height: 400px; overflow: hidden; padding: 0; margin: 0;display: block; float: none; } .twocold>.content>.words>.multibuttons>ul>li>.multimgright img { position: relative; width: 100%; height: auto !important; } .twocold>.content>.words>.multibuttons>ul>li>.multitext { position: relative; width: 100%; padding: 0%; margin: 0; } /* start Two Column WHITE styles */ main #maintext .content .twocolw { position: relative; width: 100%; height: auto; margin: 2% auto; padding: 0; display: inline; float: left; clear:none !important; } .twocolw .content { width: 90%; margin : 0 auto; display: block; } .twocolw>.content>.words { position: relative; width: 100%; display: block; margin: 0px; } .twocolw>.content>.words>.padding { position: relative; text-align: left; width: 95%; float: none; display: block; padding: 2.5%; margin: 0 auto } .twocolw>.content>.words>.padding h2, .twocol>.content>.words>.padding p { position: relative; text-align: left; width: 95%; display: block; padding: 2.5%; margin: 0 auto } .twocolw>.content>.words>.multibuttons { position: relative; width: 100%; max-width:1200px; display: block; margin: 0px auto;} .twocolw>.content>.words>.multibuttons>ul { position: relative; margin: 0px auto; width: 100%; display: block; } .twocolw>.content>.words>.multibuttons>ul>li { position: relative; width: 80%; display:block; float: left; margin: 10px auto; padding: 5%;height: auto !important; background: #ededed;overflow: visible; } .twocolw>.content>.words>.multibuttons>ul>li>.multimgshell, .twocolw>.content>.words>.multibuttons>ul>li>.multimgleft, .twocolw>.content>.words>.multibuttons>ul>li>.multimgcenter, .twocolw>.content>.words>.multibuttons>ul>li>.multimgfull{ position: relative; width: 100%; height: auto; max-height: 400px; overflow: visible; padding: 0; margin: 0;display: block; float: none;} .twocolw>.content>.words>.multibuttons>ul>li>.multimgshell img, .twocolw>.content>.words>.multibuttons>ul>li>.multimgleft img, .twocolw>.content>.words>.multibuttons>ul>li>.multimgcenter img, .twocolw>.content>.words>.multibuttons>ul>li>.multimgfull img { position: relative; width: 100%; height: auto !important; } .twocolw>.content>.words>.multibuttons>ul>li>.multimgright { position: relative; width: 100%; height: auto; max-height: 400px; overflow: hidden; padding: 0; margin: 0;display: block; float: none; } .twocolw>.content>.words>.multibuttons>ul>li>.multimgright img { position: relative; width: 100%; height: auto !important; } .twocolw>.content>.words>.multibuttons>ul>li>.multitext { position: relative; width: 100%; padding: 0%; margin: 0; } /* Video Cols */ .videorow { position: relative; display: block; width: 100%; height: auto !important; overflow: visible; min-height: 0px; margin: 0 auto 0 auto; padding: 0px; } .videorow .videocol { position:relative; display: block; float: none; width: 100%; height: auto !important; overflow: visible; margin: 0px auto 30px auto; padding: 0; clear: right; } .videorow .videocol .embedshell { display: block; width: 100%; height: auto !important; float: none; margin: 0; padding: 0; max-height: 150px; } .videorow .videocol .embedshell iframe { display: block; width: 100%; float: none; margin: 0px; padding: 0px; max-height: 150px; } .videorow .videocol h3 { line-height: 18px; } .videorow .videocol .videotext { position: relative; display: block; width: 94%; height: auto !important; float: none; margin: 0px; padding: 20px 3% 30px 3%; max-height: 1000px; } .videorow .videocol .videolist { position: relative; display: block; width: 94%; height: auto !important; margin: 0px auto; padding: 0; } .videorow h3, .videorow .videocol .videotext h3 { margin: 0px; padding: 0; } .videorow ul { margin: 0px 0px 0 20px; padding: 0px; height: auto; overflow: visible; } .cal_small { display: block; width: 95%; height: auto; margin: 0 auto;} .cal_full {display: none; } .footer { font-size: 1em; color: #FFFFFF; line-height: 24px; } footer { margin: 0px; width: 100%; height: auto; display: block; top: 45px; min-height: 400px; overflow: visible;} footer { top: 0px !important; margin-top: 55px !important; } /* fix for scrolling on mobile */ footer .content { position: relative; width: 80%; height: auto !important; padding: 10%; margin: 0 auto; display: block; } footer .content #footercontact { position: relative; float: none; width: 92%; display: block; clear: both; padding: 7%; margin: 0 auto; } footer .content #footercontact #footiconbox { margin: 0 auto; width: 100%; float: none; display:block; } footer .content #footercontact #footiconbox #footericons { float: left; } footer .content #footercontent { position: relative; float: none; width: 88%; display: block; margin: 0px auto;padding: 0 6%; } footer .content #footercontent .footercol { position: relative; float: none; width: 100%; max-width: 100%; display: block; margin: 0px 0 0 0;padding: 0; border: none;} footer .footercol #imgfooter img { position: relative; width: 100%; } footer .footercol #imgfooter a { position: relative; width: 100%; height: 100%; } footer .footercol img { position: relative; width: 100%;height: auto;} nav .menu_container .menu_dropdown_block .column.three-col, .menu_container .menu_dropdown_block .column.four-col { width: 90%; } /* -------- 2022 News Styles ------- */ .prnews-newscols3x .prnews-col { position: relative; width: 100%; height: auto !important; padding: 0 0 0 0; margin: 0; display: block; vertical-align: top; } /* ----------- Admission CTA Button for Program Websites --------- */ .cta-content {position: relative; z-index: 999999; top:0px;} } @media screen and (max-width: 320px){ #supershell { width: 400px; display: block; float: none; margin: 0px; padding: 0px; } } /* ---------------------------- PRINT ONLY STYLES ------------------------ */ @media print { body { background: #FFFFFF; } nav { } nav a:link,nav a:visited,nav a:hover,nav a:active { color: #000; } header { display: none; } header .content #logo { position: relative; top: 5px; width: 175px; padding: 0px; margin: 0px auto; background: url(//www.bard.edu/images/logo-print.png) center center; } header .content #logo img { position: relative; padding: 0px; margin: 0px auto;} main { position:relative; width: 100%; top: 0px; } #introshell { } ul.dropdown-menu {display: none; } #subnav li { margin-right: 10px; padding-right: 10px; } #submenu, #sitemenu {display: none;} #introtext {margin-top: 15px; } #introcol #left #image { display: none; } #introshell h1 { position: relative; top: 10px; left: 0%;font-size: 2em; line-height: 2em; color: #FFFFFF; height: auto; margin: 10px 0; } h1.pagetitle { position: relative; margin: 10px 0; } #introshell .imgshell { width: 100%; height: auto; } #boxes { margin-top: 50px; } #boxes h3 { position: absolute; top: -30%; margin: 0px auto; padding: 0px 5%; text-align: center; color: #FFFFFF; font-size: 1.5em; line-height: 1.2em; font-weight: 400; } #boxes img.icon, #boxes .button {display: none; } * { text-shadow:none!important;color:#000!important;background:transparent!important;box-shadow:none!important; } a:link,a:visited,a:hover,a:active { color: #c11c1c; text-decoration:underline; } header h2 { font-family: "Helvetica Neue Light", Helvetica, Arial, sans-serif;font-weight: 600; color:#5d5d5d; margin: 0px 0px 15px 0px; display: block; font-size: 3em; line-height: 2em; } .cal_small {display: none; } .cal_full {display: block; } #imgfooter {display:none;} }