-
-
Save ravenwilde/3c69b86d8e386daae766 to your computer and use it in GitHub Desktop.
From January to March of 2013 I spent some time re-organizing and rewriting the CSS that styles the portlets on the Michigan Engineering website. I was asked to do this for two reasons: 1) we had made significant changes to the design since we received the final delivery from the vendor and these changes needed to be ported over from overrides.c…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*==== CSS for Home Page promos ====*/ | |
| /* created by Jennifer A. Scroggins - jscroggi@umich.edu - March 2013 | |
| ===== TABLE OF CONTENTS ===== | |
| $COLOR-HTML Structures | |
| $Orange-COLOR-HTML Color Styles | |
| $Green-COLOR-HTML Color Styles | |
| $White-COLOR-HTML Color Styles | |
| $IMG-Portlet | |
| $promoEvents | |
| ===========================*/ | |
| /* Basic structure of Portlet Holder*/ | |
| .home .promoHolder, div.promoHolder { /*div.promoHolder addresses bug in Chrome*/ | |
| margin: 40px 0 40px 40px; | |
| float: right; | |
| width: 400px; | |
| } | |
| .home .promo { | |
| position: relative; | |
| width: 200px; | |
| height: 200px; | |
| float: left; | |
| } | |
| .home .promoHolderBox1 { | |
| -webkit-border-radius: 10px 0 0 0; | |
| -moz-border-radius: 10px 0 0 0; | |
| -o-border-radius: 10px 0 0 0; | |
| border-radius: 10px 0 0 0; | |
| behavior: url(++resource++redesign_fonts/pie.htc); | |
| } | |
| .home .pDateItem { | |
| height: 2.5em; | |
| overflow: hidden; | |
| } | |
| .home .promoHolderBox3 { | |
| clear: left; | |
| } | |
| /*==== $COLOR-HTML Structure ====*/ | |
| .promoHolderHTML { | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| border-radius: inherit; | |
| } | |
| .promoHolderHTML a { | |
| position: absolute; | |
| display: block; | |
| width: 200px; | |
| height: 200px; | |
| text-decoration: none; | |
| overflow:hidden; | |
| -moz-opacity: 0.90; | |
| opacity: 0.90; | |
| filter: alpha(opacity=90); | |
| -ms-filter: | |
| "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| border-radius: inherit; | |
| } | |
| .promoHolderHTML h2, | |
| .promoHolderHTML h3, | |
| .promoHolderHTML h4, | |
| .promoHolderHTML h5 { | |
| position:relative; | |
| margin: 0px; | |
| font-weight:bold; | |
| letter-spacing: -0.1px; | |
| line-height: 1em; | |
| text-shadow: none; | |
| } | |
| div.promoHolderHTML h2, | |
| div.promoHolderHTML h3 { | |
| padding: 13px 0 0 15px; | |
| font-size: 18px; | |
| text-transform: uppercase; | |
| } | |
| .promoHolderHTML h4, | |
| .promoHolderHTML h5 { | |
| padding: 4px 0 0 15px; | |
| font-size:16px; | |
| } | |
| .promoHolderHTML p { | |
| position: relative; | |
| width: 170px; | |
| padding: 4px 0 0 16px; | |
| margin: 0px; | |
| font-size: 18px; | |
| letter-spacing: 0.1px; | |
| line-height: 1.05em; | |
| word-wrap: break-word; | |
| text-shadow: none; | |
| } | |
| .promoHolderHTML span.linkMore { | |
| padding: 4px 0px 0px 16px; | |
| margin: 0px; | |
| font-size: 20px; | |
| font-weight: bold; | |
| text-decoration: none; | |
| text-shadow: none; | |
| float: left; | |
| } | |
| .promoHolderHTML span.linkMore:hover { | |
| text-decoration: underline; | |
| } | |
| /* .promoHolderBox2 .linkCtA:after, | |
| .promoHolderBox3 .linkCtA:after, | |
| .promoHolderBox4 .linkCtA:after { | |
| content: url("++resource++umich_images/pxlarrow.gif") no-repeat; | |
| margin: 0 0 0 5px; | |
| }*/ | |
| .promoHolderHTML ul, | |
| .promoHolderHTML ol{ | |
| list-style:none; | |
| margin: 0; | |
| padding: 16px; | |
| text-shadow: none; | |
| } | |
| .promoHolderHTML li { | |
| padding: 0 0 0 7px; | |
| margin: 4px 0 7px 0; | |
| font-size: 18px; | |
| letter-spacing: .1px; | |
| line-height: 1.05em; | |
| } | |
| /* $Orange-COLOR-HTML Color Styles */ | |
| .promoHolderHTML .orange { | |
| background-color: #52180B; | |
| } | |
| .promoHolderHTML .orange a, | |
| .promoHolderHTML .orange h2, | |
| .promoHolderHTML .orange h3, | |
| .promoHolderHTML .orange h4, | |
| .promoHolderHTML .orange h5, | |
| .promoHolderHTML .orange .linkMore { | |
| color: #FFB330; | |
| text-shadow: none; | |
| position: relative; | |
| } | |
| .promoHolderHTML .orange a:hover, | |
| .promoHolderHTML .orange p, | |
| .promoHolderHTML .orange li { | |
| color: #fff; | |
| text-shadow: none; | |
| position: relative; | |
| } | |
| .promoHolderHTML .orange li { | |
| background: | |
| url(https://caen-cms-stage.engin.umich.edu/arrow.png) no-repeat left | |
| center; | |
| background-position: -2px 5px; | |
| } | |
| /* $Green-COLOR-HTML Color Styles */ | |
| .promoHolderHTML .green { | |
| background-color: #B4BC6F; | |
| } | |
| .promoHolderHTML .green a, | |
| .promoHolderHTML .green h2, | |
| .promoHolderHTML .green h3, | |
| .promoHolderHTML .green h4, | |
| .promoHolderHTML .green h5, | |
| .promoHolderHTML .green .linkMore { | |
| color: #393D11; | |
| text-shadow: none; | |
| position: relative; | |
| } | |
| .promoHolderHTML .green a:hover { | |
| color: #fff; | |
| } | |
| .promoHolderHTML .green p, | |
| .promoHolderHTML .green li { | |
| color: #252C02; | |
| text-shadow: none; | |
| position: relative; | |
| } | |
| .promoHolderHTML .green li { | |
| background: url(https://caen-cms-stage.engin.umich.edu/pxlarrow.gif) | |
| no-repeat left center; | |
| background-position: 0 5px; | |
| } | |
| /* $White-COLOR-HTML Color Styles */ | |
| .promoHolderHTML .white { | |
| background-color: #FFF; | |
| } | |
| .promoHolderHTML .white a, | |
| .promoHolderHTML .white h2, | |
| .promoHolderHTML .white h3, | |
| .promoHolderHTML .white h4, | |
| .promoHolderHTML .white h5, | |
| .promoHolderHTML .white .linkMore { | |
| color: #273D67; | |
| text-shadow: none; | |
| position: relative; | |
| } | |
| .promoHolderHTML .white a:hover { | |
| color: #3375AE; | |
| } | |
| .promoHolderHTML .white p, | |
| .promoHolderHTML .white li { | |
| color: #333; | |
| text-shadow: none; | |
| position: relative; | |
| } | |
| .promoHolderHTML .white li { | |
| background: | |
| url(https://caen-cms-stage.engin.umich.edu/arrow.png) left no-repeat; | |
| background-position: -2px 5px; | |
| } | |
| /* highlight classes for all HTML portlets */ | |
| .promoHolderHTML .orange .highlight { | |
| color: #d2d4da; | |
| } | |
| .promoHolderHTML .green .highlight { | |
| color: #52180b; | |
| } | |
| .promoHolderHTML .white .highlight { | |
| color: #a36714; | |
| } | |
| /*==== New $IMG-Portlet Styles ====*/ | |
| .promoHolder img { | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| border-radius: inherit; | |
| behavior: url(++resource++redesign_fonts/pie.htc); | |
| position: absolute; | |
| /*z-index:-50; commented out to test image link */ | |
| moz-opacity: 0.90; | |
| opacity: 0.90; | |
| filter: alpha(opacity=90); | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; | |
| } | |
| .promoHolderBox1 img { | |
| bottom: 0; | |
| right: 0; | |
| } | |
| .promoHolderBox2 img { | |
| bottom: 0; | |
| left: 0; | |
| } | |
| .promoHolderBox3 img { | |
| top: 0; | |
| right: 0; | |
| } | |
| .promoHolderBox4 img { | |
| top: 0; | |
| left: 0; | |
| } | |
| .promoHolder h3 { | |
| position:absolute; | |
| z-index:50; | |
| padding:15px; | |
| font-size: 18px; | |
| color: #fff; | |
| text-shadow: 2px 2px 2px #000000; | |
| letter-spacing: -0.2px; | |
| line-height: 1em; | |
| } | |
| .promoHolder a { | |
| text-decoration:none; | |
| color: #fff; | |
| } | |
| .promoHolder a:hover { | |
| text-decoration:none; | |
| color:#fff; | |
| } | |
| .promoHolder span.linkCtA { | |
| position:absolute; | |
| z-index:50; | |
| display: block; | |
| float:right; | |
| margin: 0px; | |
| padding: 15px; | |
| font-size: 14px; | |
| color: #fff; | |
| text-shadow: 2px 2px 2px #000000; | |
| } | |
| .promoHolderBox1 span.linkCtA:after, | |
| .promoHolderBox2 span.linkCtA:after, | |
| .promoHolderBox3 span.linkCtA:after, | |
| .promoHolderBox4 span.linkCtA:after { | |
| content: url("++resource++umich_images/pxlarrow.gif"); | |
| margin: 0 0 0 5px; | |
| } | |
| /*.promoHolderBox1:hover .linkCtA, | |
| .promoHolderBox2:hover .linkCtA, | |
| .promoHolderBox3:hover .linkCtA, | |
| .promoHolderBox4:hover .linkCtA { | |
| text-decoration: underline; | |
| }*/ | |
| .top { | |
| top:0px;} | |
| .bottom { | |
| bottom:0px;} | |
| .left { | |
| left:0px;} | |
| .right { | |
| right:0px;} | |
| /*==== /END IMG Portlet Styles ====*/ | |
| /*==== $promoEvents similar to .promoEvents in promos.css ====*/ | |
| .promoHolderEvents { | |
| position: relative; | |
| text-decoration: none; | |
| text-align: left; | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| border-radius: inherit; | |
| } | |
| .promoEvents { | |
| position: relative; | |
| display: block; | |
| width:180px; | |
| height:180px; | |
| padding: 10px; | |
| background-color: #5e3f71; | |
| overflow: hidden; | |
| color: #fff; | |
| text-decoration: none; | |
| -webkit-opacity: 0.90; | |
| -moz-opacity: 0.90; | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; | |
| opacity: 0.90; | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| border-radius: inherit; | |
| } | |
| .promoEvents h3, .promoEvents h4 { | |
| position:relative; | |
| width: 100%; | |
| margin: 0; | |
| font-weight: normal; | |
| text-shadow:none; | |
| } | |
| .promoEvents h3 { | |
| padding: 2px 0 0 2px; | |
| color: #fff; | |
| font-size: 21px; | |
| letter-spacing: -0.2px; | |
| } | |
| .promoEvents h4 { | |
| padding: 0 0 0 2px; | |
| color: #f1dffc; | |
| font-size: 39px; | |
| letter-spacing: -1px; | |
| text-transform:uppercase; /*from overrides.css*/ | |
| } | |
| .pDateItem { | |
| width: 100%; | |
| margin-top: 9px; | |
| overflow: hidden; | |
| } | |
| .pDate { | |
| float: left; | |
| clear: left; | |
| width: 70px; /*adjusted from 58px to accommodate wider numbers*/ | |
| margin: 0 10px 2px 0; /*right margin added to prevent overflow into | |
| date info */ | |
| color: #fff; | |
| font-size: 32px; | |
| line-height: 32px; | |
| text-align: right; | |
| } | |
| .subSize_txt { | |
| font-size: 24px; | |
| } | |
| .pDate_Info { | |
| float: left; | |
| width: 100px; /*adjusted from 110px to accommodate wider numbers*/ | |
| padding: 0; | |
| margin: 0 0 6px; | |
| color: #fff; | |
| font-size: 12px; | |
| letter-spacing: -0.2px; | |
| line-height: 1.3em; | |
| } | |
| .promoHolderBox1 .promoEvents .linkCtA { | |
| position:absolute; | |
| bottom:15px; | |
| right:15px; | |
| padding: 0; | |
| display: block; | |
| color: #fff; | |
| font-size: 14px; | |
| text-shadow:none; | |
| } | |
| .promoEvents:hover .linkCtA { | |
| text-decoration: underline; | |
| } | |
| /*==== /END ====*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* This file contains all styles for the promos (sidebar portlets) on this site */ | |
| /* Compiled and cleaned up by Jennifer A. Scroggins - jscroggi@umich.edu - March-2013*/ | |
| /*======TABLE OF CONTENTS====== | |
| $promoEvents - aka Calendar Portlet | |
| $promoCTA - aka Call to Action Portlet | |
| $promoTrending < commented out pending review | |
| $promoOtherSites - aka External Links Portlet | |
| $promoRelatedLinksGr | |
| $promoRelatedLinksBl - aka Internal Links Portlet | |
| $promoCaen < commented out pending review | |
| $promoInvest < commented out pending review | |
| $promoAdvise < commented out pending review | |
| $promoQuotes | |
| $promoBtn | |
| $promoHolderLogOut | |
| $promoNews | |
| $Manage-Portlets | |
| $promo-Overrides (general conditional overrides) | |
| $promoHTML Structure | |
| $promoHTMLBlue | |
| $promoHTMLWhite | |
| $promoHTMLGreen | |
| $PROFILES PORTLET | |
| $Video portlet | |
| =============================*/ | |
| /*==== $promoEvents ====*/ | |
| .promoHolderEvents { | |
| position: relative; | |
| width: 200px; | |
| border-radius: inherit; | |
| text-decoration: none; | |
| text-align: left; | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| } | |
| .promoEvents { | |
| position: relative; | |
| display: block; | |
| width: 180px; | |
| padding: 10px; | |
| background-color: #5e3f71; | |
| overflow: hidden; | |
| color: #fff; | |
| text-decoration: none; | |
| -webkit-opacity: 0.90; | |
| -moz-opacity: 0.90; | |
| opacity: 0.90; | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| border-radius: inherit; | |
| } | |
| .promoEvents h3 { | |
| width: 100%; | |
| padding: 2px 0 0 2px; | |
| margin: 0; | |
| color: #fff; | |
| font-size: 21px; | |
| font-weight: normal; | |
| letter-spacing: -0.2px; | |
| } | |
| .promoEvents h4 { | |
| width: 100%; | |
| padding: 0 0 0 2px; | |
| margin: 0; | |
| color: #f1dffc; | |
| font-size: 39px; | |
| font-weight: normal; | |
| letter-spacing: -1px; | |
| text-transform:uppercase; /*from overrides.css*/ | |
| } | |
| .pDateItem { | |
| width: 100%; | |
| margin-top: 9px; | |
| overflow: hidden; | |
| } | |
| .pDate { | |
| float: left; | |
| clear: left; | |
| width: 70px; /*adjusted from 58px to accommodate wider numbers*/ | |
| margin: 0 10px 2px 0; /*right margin added to prevent overflow into date info */ | |
| color: #fff; | |
| font-size: 32px; | |
| line-height: 32px; | |
| text-align: right; | |
| } | |
| .subSize_txt { | |
| font-size: 24px; | |
| } | |
| .pDate_Info { | |
| float: left; | |
| width: 100px; /*adjusted from 110px to accommodate wider numbers*/ | |
| padding: 0; | |
| margin: 0 0 6px; | |
| color: #fff; | |
| font-size: 12px; | |
| letter-spacing: -0.2px; | |
| line-height: 1.3em; | |
| } | |
| .promoEvents .linkCtA { | |
| display: block; | |
| float: right; | |
| clear: both; | |
| margin: 10px 10px 0 0; | |
| padding: 0 8px 0 0; | |
| background: url(++resource++umich_images/pxlarrow.gif) center right no-repeat; | |
| color: #fff; | |
| font-size: 14px; | |
| } | |
| .promoEvents:hover .linkCtA { | |
| text-decoration: underline; | |
| } | |
| /*==== End-promoEvents ====*/ | |
| /*==== $PromoCTA ===*/ | |
| .promoHolderCTA { | |
| position: relative; | |
| width: 200px; | |
| height: 200px; | |
| text-align: left; | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| border-radius: inherit; | |
| } | |
| .promoHolderCTA img { | |
| position: absolute; | |
| left: 0px; | |
| width: 198px; | |
| height: 198px; | |
| border: solid 1px #d2d4da; | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| border-radius: inherit; | |
| } | |
| .promoCTA { | |
| display: block; | |
| position: absolute; | |
| width: 200px; | |
| height: 200px; | |
| text-decoration: none; | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| border-radius: inherit; | |
| } | |
| .promoCTA h3 { | |
| padding: 15px 10px 0px 15px; | |
| margin: 0px; | |
| color: #fff; | |
| font-size: 18px; | |
| letter-spacing: -0.2px; | |
| line-height: 1em; | |
| text-shadow: 1px 1px 0px #000000; | |
| } | |
| .promoCTA .linkCtA { | |
| display: block; | |
| padding: 0 20px; | |
| margin: 0; /* */ | |
| } | |
| .promoCTA .promoBtn { | |
| position: absolute; | |
| bottom: 15px; | |
| left: 15px; | |
| max-width: 127px; | |
| line-height: 1.4em; | |
| padding-top: 3px; | |
| padding-bottom: 3px; | |
| } | |
| #rightPortlets .promo .promoBtn { | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| -o-border-radius: 4px; | |
| border-radius: 4px; | |
| } | |
| /*==== End-promoCTA ====*/ | |
| /*==== $promoTrending ==== | |
| .promoHolderTrending { | |
| position: relative; | |
| width: 200px; | |
| text-align: left; | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| border-radius: inherit; | |
| } | |
| .promoHolderTrending .innerShadow { | |
| box-shadow: inset 0 0 20px #727D2D; | |
| } | |
| .promoTrending { | |
| display: block; | |
| padding: 25px 20px 20px 13px; | |
| background: #a2ad4d; | |
| text-decoration: none; | |
| -moz-opacity: 0.90; | |
| opacity: 0.90; | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| border-radius: inherit; | |
| } | |
| .promoTrending h3 { | |
| margin-left: 7px; | |
| font: 18px FontSiteSansRoman,arial,sans-serif; | |
| font-weight: bold; | |
| } | |
| .promoTrending ul { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .promoTrending li { | |
| padding-left: 7px; | |
| margin: 15px 0 7px; | |
| background: url(++resource++umich_images/promoLinkArrow.png) left 5px no-repeat; | |
| } | |
| .promoTrending li a { | |
| color: #343a16; | |
| font-size: 12px; | |
| text-decoration: none; | |
| font-weight: bold; | |
| } | |
| .promoTrending li a:hover { | |
| color: #fff; | |
| } | |
| /*==== End-promoTrending ====*/ | |
| /*==== $promoOtherSites ====*/ | |
| .promoHolderOtherSites { | |
| position: relative; | |
| width: 200px; | |
| text-align: left; | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| border-radius: inherit; | |
| } | |
| .promoHolderOtherSites .innerShadow { | |
| box-shadow: inset 0 0 20px #727D2D; | |
| } | |
| .promoOtherSites { | |
| display: block; | |
| padding: 25px 20px 20px 13px; | |
| text-decoration: none; | |
| background: #B4BC6F; | |
| -moz-opacity: 0.90; | |
| opacity: 0.90; | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| border-radius: inherit; | |
| } | |
| .promoOtherSites h3 { | |
| display: inline-block; | |
| padding: 2px 25px 0 0; | |
| margin: 0 7px 0 0; | |
| color: #393d11; | |
| font: 18px FontSiteSansRoman,arial,sans-serif; | |
| font-weight: bold; | |
| text-transform: uppercase; | |
| background: url(++resource++umich_images/boxWithCornerIcon.png) right top no-repeat; | |
| } | |
| .lt-ie8 .promoOtherSites h3 { | |
| display: inline; | |
| } | |
| .promoOtherSites ul { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .promoOtherSites li { | |
| padding: 0 0 0 7px; | |
| margin: 15px 0 7px; | |
| background: url(++resource++umich_images/promoLinkArrow.png) left 5px no-repeat; | |
| } | |
| .promoOtherSites li a { | |
| color: #23270e; | |
| font-size: 12px; | |
| font-weight: bold; | |
| text-decoration: none; | |
| } | |
| .promoOtherSites li a:hover { | |
| color: #fff; | |
| text-decoration: underline; | |
| } | |
| /* From candm.html per ticket 884 */ | |
| #rightPortlets .first .promoOtherSites h3 { | |
| border-radius:0px; | |
| } | |
| /*==== End-promoOtherSites ====*/ | |
| /*==== $promoRelatedLinksGr ====*/ | |
| .promoHolderRelatedLinksGr { | |
| position: relative; | |
| width: 200px; | |
| text-align: left; | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| border-radius: inherit; | |
| } | |
| .promoHolderRelatedLinksGr .innerShadow { | |
| box-shadow: inset 0 0 20px #727D2D; | |
| } | |
| .promoRelatedLinksGr { | |
| display: block; | |
| padding: 25px 20px 20px 13px; | |
| text-decoration: none; | |
| background: #a2ad4d; | |
| -moz-opacity: 0.90; | |
| opacity: 0.90; | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| border-radius: inherit; | |
| } | |
| .promoRelatedLinksGr h3 { | |
| margin: 0 0 0 7px; | |
| text-transform: uppercase; | |
| font: 18px FontSiteSansRoman,arial,sans-serif; | |
| font-weight: bold; | |
| } | |
| .promoRelatedLinksGr ul { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .promoRelatedLinksGr li { | |
| margin: 15px 0 7px; | |
| padding: 0 0 0 7px; | |
| background: url(++resource++umich_images/promoLinkArrow.png) left 5px no-repeat; | |
| } | |
| .promoRelatedLinksGr li a { | |
| color: #343a16; | |
| font-size: 12px; | |
| font-weight: bold; | |
| text-decoration: none; | |
| } | |
| .promoRelatedLinksGr li a:hover { | |
| color: #fff; | |
| } | |
| /*==== end-promoRelatedLinksGr ====*/ | |
| /*==== $promoRelatedLinksBl ====*/ | |
| .promoHolderRelatedLinksBl { | |
| position: relative; | |
| text-align: left; | |
| width: 200px; | |
| color: #fff; /*from overrides.css */ | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| border-radius: inherit; | |
| } | |
| .promoHolderRelatedLinksBl .innerShadow { | |
| box-shadow: inset 0 0 20px #002755; | |
| } | |
| .promoRelatedLinksBl { | |
| display: block; | |
| text-decoration: none; | |
| -moz-opacity: 0.90; | |
| opacity: 0.90; | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| border-radius: inherit; | |
| padding: 25px 20px 20px 13px; | |
| background: #004785; | |
| } | |
| .promoRelatedLinksBl h3 { | |
| text-transform: uppercase; | |
| margin-left: 7px; | |
| font: 18px FontSiteSansRoman,arial,sans-serif; | |
| font-weight: bold; | |
| color: #fff; | |
| } | |
| .promoRelatedLinksBl ul { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .promoRelatedLinksBl li { | |
| padding-left: 7px; | |
| margin: 15px 0 7px; | |
| background: url(++resource++umich_images/promoLinkArrow.png) no-repeat scroll 0 5px transparent; /* background attributes were originally- left 5px no-repeat - change came from candm.css */ | |
| } | |
| .promoRelatedLinksBl li a { | |
| color: #cbe4fd; | |
| font-size: 12px; | |
| text-decoration: none; | |
| font-weight: bold; | |
| } | |
| .promoRelatedLinksBl li a:hover { | |
| color: #fff; | |
| text-decoration: underline; | |
| } | |
| /* additions to css rules - promos.css line 96 - add this selector to pre-existing rule <--- from candm.css */ | |
| .promoRelatedLinksBl .linkCtA { | |
| background: url(++resource++umich_images/pxlarrow.gif) no-repeat scroll right center transparent; | |
| clear: both; | |
| color: #FFFFFF; | |
| display: block; | |
| float: right; | |
| font-size: 14px; | |
| margin: 10px 10px 0 0; | |
| padding: 0 8px 0 0; | |
| text-decoration: none; | |
| } | |
| .promoRelatedLinksBl .linkCtA:hover { | |
| color: #fff; | |
| } | |
| .promoRelatedLinksBl li .engindate { | |
| color: white; | |
| display:block; | |
| } | |
| .promoRelatedLinksBl h3.rssHeader { | |
| text-transform: capitalize; | |
| font-weight: normal; | |
| } | |
| /* end candm.css addition */ | |
| /*==== End-promoRelatedLinksBl ====*/ | |
| /*==== $promoCaen ==== | |
| .promoHolderCaen { | |
| position: relative; | |
| width: 200px; | |
| text-align: left; | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| border-radius: inherit; | |
| } | |
| .promoHolderCaen .innerShadow { | |
| box-shadow: inset 0 0 20px #727D2D; | |
| } | |
| .promoCaen { | |
| display: block; | |
| text-decoration: none; | |
| padding: 25px 20px 20px 13px; | |
| background: #a2ad4d; | |
| -moz-opacity: 0.90; | |
| opacity: 0.90; | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| border-radius: inherit; | |
| } | |
| .promoCaen h3 { | |
| margin: 0px; | |
| color: #343a16; | |
| font: 18pxFontSiteSansRoman,arial,sans-serif; | |
| font-weight: bold; | |
| } | |
| .promoCaen p { | |
| width: 160px; | |
| padding: 8px 0 10px 0; | |
| margin: 0px; | |
| color: #343a16; | |
| font-size: 12px; | |
| font-weight: bold; | |
| line-height: 1.6em; | |
| } | |
| .promoCaen .linkCtA { | |
| display: block; | |
| margin: 0px; | |
| padding: 10px 10px 10px 0px; | |
| text-align: right; | |
| color: #343a16; | |
| font-size: 14px; | |
| background: url(++resource++umich_images/pxlarrow.gif) center right no-repeat; | |
| } | |
| .promoCaen:hover .linkCtA { | |
| text-decoration: underline; | |
| } | |
| /*==== End-promoCaen ====*/ | |
| /*==== $promoInvest ==== | |
| .promoHolderInvest { | |
| position: relative; | |
| text-align: left; | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| border-radius: inherit; | |
| background-color: #5e3f71; | |
| width: 200px; | |
| height: 200px; | |
| } | |
| .promoHolderInvest img { | |
| position: absolute; | |
| top: 64px; | |
| -moz-opacity: 0.90; | |
| opacity: 0.90; | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| border-radius: inherit; | |
| } | |
| .promoInvest { | |
| display: block; | |
| width: 200px; | |
| height: 200px; | |
| text-decoration: none; | |
| position: absolute; | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| border-radius: inherit; | |
| } | |
| .promoInvest h3 { | |
| position: absolute; | |
| margin: 0px; | |
| font-size: 18px; | |
| padding: 15px 10px 0px 15px; | |
| color: #fff; | |
| text-shadow: 1px 1px 0px #000000; | |
| letter-spacing: -0.2px; | |
| line-height: 1em; | |
| } | |
| .promoInvest p { | |
| position: absolute; | |
| margin: 0px; | |
| font-size: 12px; | |
| padding: 56px 10px 0px 15px; | |
| color: #fff; | |
| } | |
| .promoInvest .linkCtA { | |
| display: block; | |
| background: url(++resource++umich_images/investBtn.png) 0 0 no-repeat; | |
| position: absolute; | |
| margin: 0px; | |
| top: 150px; | |
| left: 60px; | |
| height: 33px; | |
| width: 95px; | |
| line-height: 33px; | |
| padding-left: 20px; | |
| font-size: 14px; | |
| font-weight: bold; | |
| color: #fff; | |
| text-shadow: 1px 1px 1px #000000; | |
| } | |
| .promoInvest:hover .linkCtA { | |
| text-decoration: underline; | |
| } | |
| /*==== End-promoInvest ====*/ | |
| /*==== $promoAdvise ==== | |
| .promoHolderAdvise { | |
| position: relative; | |
| text-align: left; | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| border-radius: inherit; | |
| background-color: #004785; | |
| width: 200px; | |
| height: 265px; | |
| } | |
| .promoHolderAdvise img { | |
| position: absolute; | |
| left: 0px; | |
| top: 70px; | |
| -moz-opacity: 0.90; | |
| opacity: 0.90; | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| border-radius: inherit; | |
| } | |
| .promoAdvise { | |
| display: block; | |
| width: 200px; | |
| height: 215px; | |
| text-decoration: none; | |
| position: absolute; | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| border-radius: inherit; | |
| } | |
| .promoAdvise h3 { | |
| position: absolute; | |
| margin: 0px; | |
| font-size: 18px; | |
| padding: 15px 10px 0px 15px; | |
| color: #fff; | |
| text-shadow: 1px 1px 0px #000000; | |
| letter-spacing: -0.2px; | |
| line-height: 1em; | |
| } | |
| .promoAdvise h4 { | |
| position: absolute; | |
| margin: 0px; | |
| font-size: 12px; | |
| font-weight: bold; | |
| padding: 40px 10px 0px 15px; | |
| color: #fff; | |
| } | |
| .promoAdvise p { | |
| position: absolute; | |
| margin: 0px; | |
| font-size: 12px; | |
| padding: 56px 10px 0px 15px; | |
| color: #fff; | |
| } | |
| .promoAdvise .linkCtA { | |
| position: absolute; | |
| margin: 0px; | |
| font-size: 12px; | |
| padding: 188px 6px 0px 15px; | |
| color: #fff; | |
| background: url(++resource++umich_images/pxlarrow.gif)right 194px no-repeat; | |
| } | |
| .promoAdvise:hover .linkCtA { | |
| text-decoration: underline; | |
| } | |
| .promoHolderAdvise .btnAdvise { | |
| display: block; | |
| background: url(++resource++umich_images/advisingBtn.png) 0 12px no-repeat; | |
| position: absolute; | |
| margin: 0px; | |
| top: 198px; | |
| left: 15px; | |
| height: 70px; | |
| width: 160px; | |
| line-height: 16px; | |
| padding: 20px 0 0 12px; | |
| font-size: 16px; | |
| font-weight: bold; | |
| color: #fff; | |
| text-decoration: none; | |
| text-shadow: 1px 1px 1px #000000; | |
| } | |
| .btnAdvise:hover { | |
| text-decoration: underline; | |
| } | |
| /*==== End-promoAdvise ====*/ | |
| /*==== $promoQuotes ====*/ | |
| .promoHolderQuotes { | |
| position: relative; | |
| text-align: left; | |
| width: 200px; | |
| height: auto; | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| border-radius: inherit; | |
| } | |
| .promoQuotes { | |
| display: block; | |
| width: 200px; | |
| height: auto; | |
| text-decoration: none; | |
| -moz-opacity: 0.90; | |
| opacity: 0.90; | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| border-radius: inherit; | |
| background-color: #5e3f71; | |
| } | |
| .promoHolderQuotes .innerShadow { | |
| box-shadow: inset 0 0 20px #3e2f51; | |
| } | |
| .promoQuotes p { | |
| text-indent: -.6em; /*override from candm.css - per ticket 861 - originally 1em*/ | |
| font-size: 14px; | |
| padding: 20px 10px 0 25px; /*padding override from candm.css - originally 20px 0 0 25px */ | |
| color: #eac7ff; | |
| font-style: italic; | |
| font-weight: normal; | |
| } | |
| .promoQuotes p span, .promoQuotes p strong { | |
| font-size: 18px; | |
| font-weight: bold; | |
| line-height: 1em; | |
| } | |
| .promoQuotes .authorAttribution { | |
| margin: 0px; | |
| padding: 0px 15px 15px 0px; | |
| text-align: right; | |
| font-size: 12px; | |
| color: #fff; | |
| } | |
| .promoQuotes .authorAttribution span { | |
| font-weight: bold; | |
| font-size: 10px; | |
| } | |
| .promoQuotes:hover .authorQuotes { | |
| text-decoration: underline; | |
| } | |
| /*from candm.css*/ | |
| .promoQuotes .quoteAttribution { | |
| margin: 0px; | |
| padding: 0px 15px 15px 0px; | |
| text-align: right; | |
| font-size: 10px; | |
| color: #fff; | |
| } | |
| .promoQuotes .quoteAttribution span { | |
| font-weight: bold; | |
| font-size: 10px; | |
| } | |
| /*==== End-promoQuotes ====*/ | |
| /*==== $promoBtn ====*/ | |
| .promoBtn { | |
| /*height:28px;*/ | |
| color: #fff; | |
| text-shadow: 1px 1px 1px #000000; | |
| text-align: center; | |
| text-decoration: none; | |
| border-bottom: none; | |
| float: left; | |
| position: relative; | |
| font: bold 15px/26px arial, sans-serif; | |
| background: #004480; | |
| background-image: -webkit-gradient(linear, 0% 94%, 0% 6%, color-stop(0, #003364), color-stop(1, #0097e1)); | |
| background-image: -moz-linear-gradient(bottom, #003364, #0097e1); | |
| background-image: linear-gradient(#0097e1, #003364); | |
| -moz-border-radius: 4px; | |
| -webkit-border-radius: 4px; | |
| border-radius: 4px; | |
| -moz-box-shadow: 0 0 4px #666; | |
| -webkit-box-shadow: 0 0px 4px #666; | |
| box-shadow: 0 0 4px #666; | |
| cursor: pointer; | |
| border-top: 1px solid #15416b; | |
| border-left: 1px solid #15416b; | |
| border-right: 1px solid #115d9e; | |
| border-bottom: 1px solid #115d9e; | |
| } | |
| .promoBtn span { | |
| display: block; | |
| background: url(++resource++umich_images/transLinkArrow.png) 0 0 no-repeat; | |
| width: 9px; | |
| height: 11px; | |
| position: absolute; | |
| top: 50%; | |
| margin-top: -5.5px; | |
| right: 5px; | |
| } | |
| .promoBtn:hover, a:hover .promoBtn { | |
| background-image: -webkit-gradient(linear, 0% 94%, 0% 6%, color-stop(0, #0097e1), color-stop(1, #003364)); | |
| background-image: -moz-linear-gradient(bottom, #0097e1, #003364); | |
| background-image: linear-gradient(#003364, #0097e1); | |
| color: #fff; | |
| text-decoration: none; | |
| border-bottom: none; | |
| border-top: 1px solid #115d9e; | |
| border-left: 1px solid #115d9e; | |
| border-right: 1px solid #15416b; | |
| border-bottom: 1px solid #15416b; | |
| } | |
| .lt-ie9 .promoBtn { | |
| -pie-background: linear-gradient(#1469b6, #004480); | |
| behavior: url(++resource++redesign_fonts/pie.htc); | |
| } | |
| .lt-ie9 .promoBtn:hover, .lt-ie9 a:hover .promoBtn { | |
| -pie-background: linear-gradient(#004480, #1469b6); | |
| behavior: url(++resource++redesign_fonts/pie.htc); | |
| } | |
| .ie9 .promoBtn { | |
| background-image: url(++resource++redesign_svg/blueGradient.svg); | |
| } | |
| .ie9 .promoBtn:hover, .ie9 a:hover .promoBtn { | |
| background-image: url(++resource++redesign_svg/blueGradientHvr.svg); | |
| } | |
| /*==== End-promoBtn ====*/ | |
| /*==== $promoHolderLogOut : from candm.css ====*/ | |
| .promoHolderLogOut { | |
| width: 200px; | |
| background-color: rgba(255, 255, 255, 0.85); | |
| -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#d8ffffff, endColorstr=#d8ffffff)"; /* For IE 8*/ | |
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#d8ffffff, endColorstr=#d8ffffff); /* For IE 5.5 - 7*/ | |
| font-family: sans-serif; | |
| font-size: 12px; | |
| } | |
| .promoHolderLogOut p { | |
| width: 160px; | |
| margin-left: 22px; | |
| } | |
| .promoHolderLogOut a { | |
| text-decoration: none; /* for Chrome */ | |
| } | |
| .promoHolderLogOut a span.linkCtA { | |
| display: block; | |
| padding: 0 35px 0 20px; | |
| margin: 0 0 20px 22px; | |
| } | |
| /*==== End-promoHolderLogOut ====*/ | |
| /* News Portlet */ | |
| .promoNews { | |
| border-radius: inherit; | |
| display: block; | |
| opacity: 0.9; | |
| padding: 25px 20px 20px 13px; | |
| text-decoration: none; | |
| box-shadow: none !important; /* */ | |
| } | |
| .promoNews h3 { | |
| font: bold 18px FontSiteSansRoman,arial,sans-serif; | |
| margin-left: 7px; | |
| text-transform: uppercase; | |
| } | |
| .promoNews h3.rssHeader { | |
| text-transform: capitalize; | |
| font-weight: normal; | |
| } | |
| .promoNews ul { | |
| list-style: none outside none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .promoNews li { | |
| padding-left: 7px; | |
| margin: 15px 0 7px; | |
| background: url(++resource++umich_images/promoLinkArrow.png) no-repeat scroll 0 5px transparent; | |
| } | |
| .promoNews li .engindate { | |
| font-weight: bold; | |
| } | |
| .promoNews li .source { | |
| font-variant: small-caps; | |
| text-transform: uppercase; | |
| font-size: 11px; | |
| line-height: 20px; | |
| letter-spacing: 0.5px; | |
| } | |
| .promoNews li a { | |
| font-size: 12px; | |
| font-weight: bold; | |
| text-decoration: none; | |
| } | |
| .promoNews .linkCtA { | |
| clear: both; | |
| display: block; | |
| float: right; | |
| padding: 0 8px 0 0; | |
| margin: 10px 10px 0 0; | |
| background: url(++resource++umich_images/pxlarrow.gif) no-repeat scroll right center transparent; | |
| font-size: 14px; | |
| text-decoration: none; | |
| } | |
| /* News Promo Colors */ | |
| .promoNews { | |
| background: #004785; | |
| } | |
| .promoNews li a, | |
| .promoNews .linkCtA { | |
| color: #C0D4EB; | |
| } | |
| .promoNews li .source, | |
| .promoNews li .engindate, | |
| .promoNews h3, | |
| .promoNews li a:hover, | |
| .promoNews .linkCtA:hover { | |
| color: #fff; | |
| } | |
| .promoNews li a:hover, | |
| .promoNews .linkCtA:hover { | |
| text-decoration: underline; | |
| } | |
| /*==== $Manage-Portlets : from overrides.css ====*/ | |
| /* Manage portlets link - matters on Primary pages */ | |
| div.managePortletsLink, a.managePortletsFallback { | |
| width: 200px; | |
| margin-left: 20px; | |
| float:left; | |
| text-align: center; | |
| font-size: 80%; | |
| background: #ddd; | |
| border-radius: 0.5em; | |
| -webkit-border-radius: 0.5em; | |
| -moz-border-radius: 0.5em; | |
| position: relative; | |
| z-index: 101; | |
| } | |
| #rightPortlets .managePortletsLink { | |
| float: right; | |
| width: 200px; | |
| } | |
| /* Needed for manage portlets button etc.*/ | |
| .template-manage-portlets #rightPortlets{ | |
| float:right; | |
| } | |
| .template-manage-portlets #content-core { | |
| float: left; | |
| width: 450px; | |
| } | |
| /* Portlets manager */ | |
| .portletAssignments { | |
| font-size: 1em !important; | |
| } | |
| .portletAssignments .formControls input { | |
| font-size: 1em !important; | |
| } | |
| #portletmanager-plone-leftcolumn { | |
| padding-left: 8px; | |
| } | |
| /*==== $promo-Overrides ====*/ | |
| #rightPortlets .first *, .leftCol .first * { | |
| border-radius: 5px 5px 0 0; | |
| } | |
| #rightPortlets .last *, .leftCol .last * { | |
| border-bottom-left-radius: 5px; | |
| border-bottom-right-radius: 5px; | |
| } | |
| #rightPortlets { | |
| float: right; | |
| width: 220px; | |
| margin-top: 10px; /* added from candm.css : Fix portlet alignment promlem on thin pages*/ | |
| } | |
| #contentHolder div.first.last .innerShadow { | |
| border-radius: 5px; | |
| } | |
| /* from overrides.css - related to ticket 173 */ | |
| .promoCol .promo { | |
| box-shadow: 0 0 4px #000; | |
| float: left; | |
| margin: 0 0 8px 20px; | |
| behavior: url(++resource++redesign_fonts/pie.htc); | |
| } | |
| /*==== $promoHTML Structure ====*/ | |
| .promoHolderHTML { | |
| position: relative; | |
| width: 200px; | |
| text-align: left; | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| border-radius: inherit; | |
| overflow: hidden; /* */ | |
| } | |
| .promoHTMLBlue, | |
| .promoHTMLWhite, | |
| .promoHTMLGreen { | |
| position: relative; | |
| display: block; | |
| width: 167px; | |
| height:auto; | |
| padding: 25px 20px 20px 13px; | |
| text-decoration: none; | |
| line-height: 1.25em; /**/ | |
| font-family:sans-serif; /**/ | |
| -webkit-opacity: 0.90; | |
| -moz-opacity: 0.90; | |
| opacity: 0.90; | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; | |
| -webkit-border-radius: inherit; | |
| -moz-border-radius: inherit; | |
| -o-border-radius: inherit; | |
| border-radius: inherit; | |
| } | |
| .promoHolderHTML a { | |
| text-decoration: none; | |
| font-weight:bold; | |
| } | |
| .promoHolderHTML a:hover { | |
| text-decoration: underline; | |
| line-height: 1; | |
| } | |
| .promoHolderHTML h2, | |
| .promoHolderHTML h3, | |
| .promoHolderHTML h4, | |
| .promoHolderHTML h5 { | |
| display: inline-block; | |
| padding: 2px 25px 0 0; | |
| margin: 0 0 0 7px; | |
| font: 18px FontSiteSansRoman,arial,sans-serif; | |
| font-weight: bold; | |
| letter-spacing: -0.1px; | |
| line-height: 1em; | |
| } | |
| .promoHolderHTML h3 { | |
| text-transform: uppercase; | |
| } | |
| .promoHolderHTML h4{ | |
| font-size: 16px; | |
| } | |
| .promoHolderHTML h5{ | |
| font-size: 14px; | |
| } | |
| .lt-ie8 .promoHolderHTML h3 { | |
| display:inline; | |
| } | |
| .promoHolderHTML p { | |
| padding: 0 0 0 7px; | |
| } | |
| .promoHolderHTML ul, | |
| .promoHolderHTML ol { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .promoHolderHTML li { | |
| padding: 0 0 0 7px; | |
| margin: 15px 0 7px 0; | |
| font-size: 12px; | |
| font-weight: normal; | |
| list-style:none; | |
| } | |
| .promoHolderHTML li a { | |
| font-size: 12px; | |
| font-weight:bold; | |
| text-decoration:none; | |
| } | |
| .promoHolderHTML li a:hover { | |
| font-size: 12px; | |
| font-weight:bold; | |
| text-decoration:none; | |
| } | |
| /*==== $promoHTMLBlue ====*/ | |
| /* per ticket 1015 */ | |
| .promoHTMLBlue { | |
| background-color: #004785; | |
| box-shadow: inset 0 0 20px #002755; /*from overrides.css*/ | |
| overflow:hidden;/* cut off images that are too wide - ticket #1164 */ | |
| } | |
| .promoHTMLBlue a { | |
| color: #C0D4EB; | |
| } | |
| .promoHTMLBlue a:hover { | |
| color: #fff; | |
| } | |
| .promoHTMLBlue h2, | |
| .promoHTMLBlue h3, | |
| .promoHTMLBlue h4, | |
| .promoHTMLBlue h5 { | |
| color: #fff; | |
| } | |
| .promoHTMLBlue p { | |
| color: #fff; | |
| } | |
| .promoHTMLBlue li, | |
| .promoHTMLBlue ol li { /* per ticket 880 */ | |
| background: url(++resource++umich_images/pxlarrow.gif) left 5px no-repeat; | |
| background-position: 0px 5px; | |
| color: #fff; | |
| } | |
| .promoHTMLBlue li a { | |
| color: #C0D4EB; | |
| } | |
| .promoHTMLBlue li a:hover { | |
| color: #fff; | |
| } | |
| /*==== $promoHTMLWhite ====*/ | |
| /* per ticket 1015 */ | |
| .promoHTMLWhite { | |
| background-color: #FFF; | |
| box-shadow: inset 0 0 20px #B3B7BE; | |
| overflow:hidden;/* cut off images that are too wide - ticket #1164 */ | |
| } | |
| .promoHTMLWhite a { | |
| color: #273D67; | |
| } | |
| .promoHTMLWhite a:hover { | |
| color: #3375AE; | |
| } | |
| .promoHTMLWhite h2, | |
| .promoHTMLWhite h3, | |
| .promoHTMLWhite h4, | |
| .promoHTMLWhite h5 { | |
| color: #273D67; | |
| } | |
| .promoHTMLWhite p { | |
| color: #333; | |
| } | |
| .promoHTMLWhite li { | |
| background: url(++resource++umich_images/arrow.png) left no-repeat; | |
| background-position: -2px 3px; /* adjusted to better vertically center the li bullet */ | |
| color: #333; | |
| } | |
| /*==== $promoHTMLGreen ====*/ | |
| /* per ticket 1015 */ | |
| .promoHTMLGreen { | |
| background-color: #B4BC6F; | |
| box-shadow: inset 0 0 20px #727D2D; | |
| overflow:hidden;/* cut off images that are too wide - ticket #1164 */ | |
| } | |
| .promoHTMLGreen a { | |
| color: #393D11; | |
| } | |
| .promoHTMLGreen a:hover { | |
| color: #fff; | |
| } | |
| .promoHTMLGreen h2, | |
| .promoHTMLGreen h3, | |
| .promoHTMLGreen h4, | |
| .promoHTMLGreen h5 { | |
| color: #393D11; | |
| } | |
| .promoHTMLGreen p { | |
| color: #252C02; | |
| } | |
| .promoHTMLGreen li { | |
| background: url(++resource++umich_images/pxlarrow.gif) no-repeat left center; | |
| background-position: 0 5px; | |
| color: #252C02; | |
| } | |
| /* highlight classes for all HTML portlets */ | |
| .promoHTMLBlue .highlight { | |
| color: #ffb330; | |
| } | |
| .promoHTMLWhite .highlight { | |
| color: #a36714; | |
| } | |
| .promoHTMLGreen .highlight { | |
| color: #52180b; | |
| } | |
| /*==== End-HTML-Promos ====*/ | |
| /*==== $PROFILES PORTLET ====*/ | |
| .promoHolderProfiles { | |
| width: 200px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .promoHolderProfiles a { | |
| text-decoration: none; | |
| } | |
| .promoHolderProfiles img { | |
| display: block; | |
| max-height: 200px; | |
| width: 200px; | |
| } | |
| /* prevent profile content from rounding */ | |
| #rightPortlets .first .promoProfiles, .leftCol .first .promoProfiles { | |
| border-top-left-radius: 0; | |
| border-top-right-radius: 0; | |
| } | |
| .promoProfiles { | |
| background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .65), white); | |
| background-image: -moz-linear-gradient(45deg,rgba(255, 255, 255, .65), white); | |
| background-image: -o-linear-gradient(45deg,rgba(255, 255, 255, .65), white); | |
| background-image: -ms-linear-gradient(45deg,rgba(255, 255, 255, .65), white); | |
| background-image: linear-gradient(45deg,rgba(255, 255, 255, .65), white); | |
| position: absolute; | |
| padding: 5px 10px 5px 5px; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| color: #212a55; | |
| text-align: right; | |
| border-top-left-radius: 0px; | |
| border-top-right-radius: 0px; | |
| } | |
| .no-cssgradients .promoProfiles { | |
| -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#88ffffff', endColorstr='#ffffffff')"; /* IE fallback */ | |
| } | |
| .promoProfiles .profilesName { | |
| font-weight: bold; | |
| } | |
| .promoProfiles .profilesProgram { | |
| display: block; | |
| font-style: italic; | |
| } | |
| .promoHolderProfiles .profilesMichEng { | |
| position: absolute; | |
| padding: 5px 10px; | |
| top: 75px; | |
| left: 0; | |
| color: #fff; | |
| font-size: 22px; | |
| font-weight: bold; | |
| line-height: 1; | |
| text-shadow: 0 1px 1px #333; | |
| opacity: 0.75; | |
| } | |
| .lt-ie9 .promoHolderProfiles .profilesMichEng { /* ie8/7 fix */ | |
| background: #004785; | |
| padding: 80px 10px 0; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| } | |
| .no-js.lt-ie9 .promoHolderProfiles .profilesMichEng { /* ie8/7 fix */ | |
| background: none; | |
| } | |
| /*==== $Video portlet ====*/ | |
| .promoHolderYoutube, .youtubeColorbox, .youtube-div { | |
| width: 200px; | |
| height: 200px; | |
| overflow: hidden; | |
| } | |
| a.youtubeColorbox img { | |
| height: 270px; | |
| margin-top: -35px; | |
| margin-left: -80px; | |
| } | |
| a.youtubeColorbox { | |
| text-decoration: none; | |
| } | |
| div.youtube-title { | |
| color: white; | |
| height: 50px; | |
| padding: 5px; | |
| position: relative; | |
| top: 140px; | |
| left: 0; | |
| /* gradients per redesign ticket 1160 */ | |
| /* webkit gradient */ | |
| background-image: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 1), rgba(103, 104, 105, .8)); | |
| /* FF gradient */ | |
| background-image: linear-gradient(45deg, rgba(0, 0, 0, 1), rgba(103, 104, 105, .8)); | |
| /* IE code ticket #1160 */ | |
| filter:progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr=#000000, endColorstr=#858687, GradientType=1); | |
| } | |
| div.youtube-title p { | |
| margin: 2px 0; | |
| } | |
| .play-button-videoportlet { | |
| width: 200px; | |
| height: 200px; | |
| background: url(++resource++umich_images/map-play-arrow.png) center no-repeat; | |
| } | |
| #videoLightboxContent { | |
| display: none; | |
| } | |
| .backgroundsize .youtube-div { | |
| background-repeat: no-repeat !important; | |
| background-position:center -26px !important; | |
| background-size: 140% !important; | |
| background-color: black !important; | |
| } | |
| .youtube-title { | |
| top: 158px !important; | |
| height: 33px !important; | |
| border-top-left-radius: 0px !important; | |
| border-top-right-radius: 0px !important; | |
| } | |
| .promoHolderYoutube h3 { | |
| font-size: 12px; | |
| } | |
| /*==== /video portlet ====*/ | |
| .promoRelatedLinksBl .funFact { | |
| margin-left: 7px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment