OpenEI:Projects/FrontpageRedesignCSS

Jump to: navigation, search
  1. openei-fp ul {
 list-style-type: none;
 margin: 0;
 text-indent: -1em;
 padding-left: 1em;

}

  1. openei-fp li {
 margin-bottom: 0.5em;

}

  1. openei-fp div.item:hover {
 background: #f2f2f2 !important;

}

  1. openei-fp li {
 border-bottom: 1px solid #ddd;

}

  1. openei-fp li:hover {
 background-color: #f2f2f2;

}

  1. openei-fp ul ul {
 padding-left: 0;
 text-indent: 0;

}

  1. openei-fp ul {
 margin: 0;
 padding-left: 1em;
 text-indent: -1em;

}

  1. main-page-header {
 border-bottom: 0;
 margin: 0 5px 0 210px;
 float: left;

}

  1. openei-fp h2, h3, h4 {
 border-bottom: 0;
 line-height: 1em;
 margin-bottom: 0;

}

  1. openei-fp h2 {
 font-size: 16px;

}

  1. openei-fp h3 {
 font-size: 100%;
 font-weight: normal;
 line-height: 1em;

}

  1. openei-fp h4 {
 font-size: 85%;

}

  1. openei-fp .fp-block.minheight {
 height: auto;

}

  1. openei-fp .fp-block.minheight .inner {
 min-height: inherit;

}

  1. openei-fp .fp-block.quarterheight {
 height: 88px;

}

  1. openei-fp .fp-block.quarterheight .inner {
 min-height: 88px;

}

  1. openei-fp .fp-block.thirdheight {
 height: 117px;

}

  1. openei-fp .fp-block.thirdheight .inner {
 min-height: 117px;

}

  1. openei-fp .fp-block.halfheight {
 height: 176px;

}

  1. openei-fp .fp-block.halfheight .inner {
 min-height: 176px;

}

  1. openei-fp .fp-block.doublewide {
 width: 654px; /* 314 * 2 + 26px */

}

  1. openei-fp .fp-block {
 float: left;
 width: 314px;
 height: 352px;
 padding: 0 13px;
 overflow: hidden;

}

  1. openei-fp .fp-block .inner {
 max-height: 320px;
 min-height: 320px;
 overflow: hidden;

}

/* variant of colorful.css in community section */

  1. openei-fp .fp-block h2 {
 font-family: "Oxygen", "Lucida Grande", Verdana, sans-serif;
 background-color: transparent;
 color: #323232;
 font-weight: normal;
 line-height: 1.2em;
 margin: 0 0 5px 0;
 padding: 3px 8px;
 -moz-border-radius: 0;
 -webkit-border-radius: 0;
 border-bottom: 1px solid #CCC;

}

  1. openei-fp .fp-block {
 margin: 0;

}

  1. openei-fp .fp-block .inner {
 border: none;
 -moz-border-radius: 16px;
 -webkit-border-radius: 16px;
 border-radius: 16px;
 margin: 5px 13px 0 5px;
 padding: 12px 16px;
 background-color: #fff;
 /* colorful variant
 url(../images/bg-box-orange.png) 0px 0px no-repeat;
 */

}

  1. openei-fp .fp-block.nobg .inner {
 background-color: transparent;

}

  1. openei-fp .fp-block.box .inner {
 -moz-box-shadow: 0px 0px 9px #cbc6c1;
 -webkit-box-shadow: 0px 0px 9px #cbc6c1;
 box-shadow: 0px 0px 9px #cbc6c1;
 /* IE8 */
 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=120, Color='#666666')";
 /* IE5.5 - IE7 */
 filter:progid:DXImageTransform.Microsoft.Shadow(color='#666666',direction='120',strength='3');

}

  1. openei-fp .fp-block.nobox .inner {
 padding-left: 0;

}

  1. openei-fp .fp-block .inner .content {
 padding: 3px 0 0 7px;

}

.fp-gatewayicons {

 margin-left: 0.8em;
 float: left;

} /* .fp-gatewayicons td a {

 Make gateway icon text bold?
 font-weight: bold;

}

  • /

.fp-gatewaynames td {

 padding: 5px;
 min-width: 3em;

} .fp-gatewayicons td .icon, .fp-gatewayicons td .iconv2, .fp-gatewayicons td .iconv3 {

 margin-left: auto;
 margin-right: auto;

} .fp-gatewayicons td {

 width: 6em;
 text-align: center;

}


  1. openei-fp .highlight-num, #openei-fp .moreinfo-text {
 color: #2460CC;

}

  1. openei-fp .highlight-num {
 font-size: 115%;

}

/* external links on the frontpage are frequently to openei.org/* domains that exist outside of /wiki, so make them look "normal" */

  1. bodyContent #openei-fp a.external, #bodyContent #openei-fp a[href^="gopher://"] {
 padding-right: 0;
 background: none;

}

  1. openei-fp .custom-quickstats .inner {
 padding: 0;

}

  1. openei-fp .fp-block.custom-search .inner {
 padding-top: 0;

}

  1. openei-fp .fp-block.custom-flite-widget .inner {
 position: relative;

}

  1. openei-fp .fp-block.custom-flite-widget .content {
 position: absolute;
 top: 9px;
 z-index: 1;
 left: 0;

}

/* position h2 on top of widget title; need to KEEP title in widget for external sites */

  1. openei-fp .fp-block.custom-flite-widget h2 {
 position: absolute;
 background-color: #FFF;
 width: 16em;
 z-index: 10;
 border-bottom: 0;

}

  1. openei-fp .component-openei-search-query, #openei-fp .component-openei-search-button {
 font-size: 18px;

}

  1. openei-fp .component-openei-search-query {
 margin-right: 0.5em;
 width: 70%;

}

  1. openei-fp .component-openei-search-button {
 top: 1px;

}

  1. searchBody {
 display: none;

}

/* TODO change this to frontpage body when ready to launch */ .page-OpenEI_Projects_FrontpageRedesign #content {

 background: white url(/community/sites/all/themes/openei_commons/images/extra-space-sun.jpg) no-repeat 100% 0%;

} .page-OpenEI_Projects_FrontpageRedesign #bodyContent {

 background: transparent url(/community/sites/all/themes/openei_commons/images/extra-space-grass-and-windfarm.png) no-repeat 100% 100%;

}

  1. openei-fp .fp-block.box #chart_div {
 opacity: 0.6;

}

  1. openei-fp .fp-block.box #chart_div:hover {
 opacity: 1.0;

}

  1. openei-fp .fp-italics {
 font-style: italic;
 font-family: georgia, serif;
 font-size: 125%;
 line-height: 1.5em;

}

/* (re-)create gradients at http://gradients.glrzad.com/ */ .bg-grey .inner { background-image: linear-gradient(right bottom, #DBDBDB 0%, #F7F7F7 27%, #FFFFFF 65%); background-image: -o-linear-gradient(right bottom, #DBDBDB 0%, #F7F7F7 27%, #FFFFFF 65%); background-image: -moz-linear-gradient(right bottom, #DBDBDB 0%, #F7F7F7 27%, #FFFFFF 65%); background-image: -webkit-linear-gradient(right bottom, #DBDBDB 0%, #F7F7F7 27%, #FFFFFF 65%); background-image: -ms-linear-gradient(right bottom, #DBDBDB 0%, #F7F7F7 27%, #FFFFFF 65%);

background-image: -webkit-gradient( linear, right bottom, left top, color-stop(0, #DBDBDB), color-stop(0.27, #F7F7F7), color-stop(0.65, #FFFFFF) ); }

.bg-orange .inner { background-image: linear-gradient(right bottom, #F5DE79 0%, #FFFCF0 27%, #FFFFFF 65%); background-image: -o-linear-gradient(right bottom, #F5DE79 0%, #FFFCF0 27%, #FFFFFF 65%); background-image: -moz-linear-gradient(right bottom, #F5DE79 0%, #FFFCF0 27%, #FFFFFF 65%); background-image: -webkit-linear-gradient(right bottom, #F5DE79 0%, #FFFCF0 27%, #FFFFFF 65%); background-image: -ms-linear-gradient(right bottom, #F5DE79 0%, #FFFCF0 27%, #FFFFFF 65%);

background-image: -webkit-gradient( linear, right bottom, left top, color-stop(0, #F5DE79), color-stop(0.27, #FFFCF0), color-stop(0.65, #FFFFFF) ); }

.bg-pink .inner { background-image: linear-gradient(right bottom, #FFDBEC 0%, #FAF5F7 27%, #FFFFFF 65%); background-image: -o-linear-gradient(right bottom, #FFDBEC 0%, #FAF5F7 27%, #FFFFFF 65%); background-image: -moz-linear-gradient(right bottom, #FFDBEC 0%, #FAF5F7 27%, #FFFFFF 65%); background-image: -webkit-linear-gradient(right bottom, #FFDBEC 0%, #FAF5F7 27%, #FFFFFF 65%); background-image: -ms-linear-gradient(right bottom, #FFDBEC 0%, #FAF5F7 27%, #FFFFFF 65%);

background-image: -webkit-gradient( linear, right bottom, left top, color-stop(0, #FFDBEC), color-stop(0.27, #FAF5F7), color-stop(0.65, #FFFFFF) ); }

.bg-green .inner { background-image: linear-gradient(right bottom, #DBFFE3 0%, #F7FAF8 27%, #FFFFFF 65%); background-image: -o-linear-gradient(right bottom, #DBFFE3 0%, #F7FAF8 27%, #FFFFFF 65%); background-image: -moz-linear-gradient(right bottom, #DBFFE3 0%, #F7FAF8 27%, #FFFFFF 65%); background-image: -webkit-linear-gradient(right bottom, #DBFFE3 0%, #F7FAF8 27%, #FFFFFF 65%); background-image: -ms-linear-gradient(right bottom, #DBFFE3 0%, #F7FAF8 27%, #FFFFFF 65%);

background-image: -webkit-gradient( linear, right bottom, left top, color-stop(0, #DBFFE3), color-stop(0.27, #F7FAF8), color-stop(0.65, #FFFFFF) ); }

.bg-red .inner { background-image: linear-gradient(right bottom, #FFDBDB 0%, #FAF7F7 27%, #FFFFFF 65%); background-image: -o-linear-gradient(right bottom, #FFDBDB 0%, #FAF7F7 27%, #FFFFFF 65%); background-image: -moz-linear-gradient(right bottom, #FFDBDB 0%, #FAF7F7 27%, #FFFFFF 65%); background-image: -webkit-linear-gradient(right bottom, #FFDBDB 0%, #FAF7F7 27%, #FFFFFF 65%); background-image: -ms-linear-gradient(right bottom, #FFDBDB 0%, #FAF7F7 27%, #FFFFFF 65%);

background-image: -webkit-gradient( linear, right bottom, left top, color-stop(0, #FFDBDB), color-stop(0.27, #FAF7F7), color-stop(0.65, #FFFFFF) ); }

.bg-purple .inner { background-image: linear-gradient(right bottom, #E6DBFF 0%, #F8F7FA 27%, #FFFFFF 65%); background-image: -o-linear-gradient(right bottom, #E6DBFF 0%, #F8F7FA 27%, #FFFFFF 65%); background-image: -moz-linear-gradient(right bottom, #E6DBFF 0%, #F8F7FA 27%, #FFFFFF 65%); background-image: -webkit-linear-gradient(right bottom, #E6DBFF 0%, #F8F7FA 27%, #FFFFFF 65%); background-image: -ms-linear-gradient(right bottom, #E6DBFF 0%, #F8F7FA 27%, #FFFFFF 65%);

background-image: -webkit-gradient( linear, right bottom, left top, color-stop(0, #E6DBFF), color-stop(0.27, #F8F7FA), color-stop(0.65, #FFFFFF) ); }

.bg-purple-grey .inner { background-image: linear-gradient(right bottom, #DED9EB 0%, #F5F5F5 27%, #FFFFFF 65%); background-image: -o-linear-gradient(right bottom, #DED9EB 0%, #F5F5F5 27%, #FFFFFF 65%); background-image: -moz-linear-gradient(right bottom, #DED9EB 0%, #F5F5F5 27%, #FFFFFF 65%); background-image: -webkit-linear-gradient(right bottom, #DED9EB 0%, #F5F5F5 27%, #FFFFFF 65%); background-image: -ms-linear-gradient(right bottom, #DED9EB 0%, #F5F5F5 27%, #FFFFFF 65%);

background-image: -webkit-gradient( linear, right bottom, left top, color-stop(0, #DED9EB), color-stop(0.27, #F5F5F5), color-stop(0.65, #FFFFFF) ); }

/* disable flash components if flash is not detected by swfobject using Widget:FlashDetect */ body.noflash .component-requires-flash {

 display: none;

}

/* iPhone [portrait + landscape] */ /* http://perishablepress.com/the-5-minute-css-mobile-makeover/ */ @media only screen and (max-width: 480px) {

 html, body.page-OpenEI_Projects_FrontpageRedesign, #openei-fp .fp-block.doublewide, .page-OpenEI_Projects_FrontpageRedesign .header .banner, .page-OpenEI_Projects_FrontpageRedesign #content, .page-OpenEI_Projects_FrontpageRedesign .page, .page-OpenEI_Projects_FrontpageRedesign .header .menu, .page-OpenEI_Projects_FrontpageRedesign .footer {
   max-width: 475px;
   width: 100%;
 }

} @media only screen and (max-width: 320px) {

 html, body.page-OpenEI_Projects_FrontpageRedesign, #openei-fp .fp-block.doublewide, .page-OpenEI_Projects_FrontpageRedesign .header .banner, .page-OpenEI_Projects_FrontpageRedesign #content, .page-OpenEI_Projects_FrontpageRedesign .page, .page-OpenEI_Projects_FrontpageRedesign .header .menu, .page-OpenEI_Projects_FrontpageRedesign .footer {
   max-width: 316px;
   width: 100%;
 }

} @media only screen and (max-device-width: 480px) {

 .page-OpenEI_Projects_FrontpageRedesign .header .banner {
   overflow: hidden;
 }
 .page-OpenEI_Projects_FrontpageRedesign .header .banner {
   border-color: #A0D7BB;
   border-width: 0 1px;
   border-style: solid;
 }
 /* remove doublewide flash-requiring stuff for mobile, it'd be too hard to display */
 #openei-fp .fp-block.doublewide.component-requires-flash {
   display: none;
 }
 #openei-fp .fp-block {
   clear: both;
 }
 .page-OpenEI_Projects_FrontpageRedesign #content {
   padding: 0;
 }
 /* make Wiki / Apps ... top-level tabs squeeze together */
 .page-OpenEI_Projects_FrontpageRedesign #topnav a.level1 {
   padding-left: 1px;
   padding-right: 1px;
 }
 .page-OpenEI_Projects_FrontpageRedesign .footer .special {
   display: none;
 }
 .page-OpenEI_Projects_FrontpageRedesign #topnav ul li.level2:not(:first-child) {
   display: none;
 }
 .page-OpenEI_Projects_FrontpageRedesign .page {
   margin-left: 0;
   margin-right: 0;
 }
 .page-OpenEI_Projects_FrontpageRedesign .fp-block.custom-gateways {
   height: 245px !important;
   padding: 0 !important;
 }
 html {
   -webkit-text-size-adjust: none;
 }
 /* remove page/discussion/edit/history/share links */
 .page-OpenEI_Projects_FrontpageRedesign .header .toolbar {
   display: none;
 }
 html, body {
   padding: 1px;
   background: #fff;
   width: 100%;
 }

}

  1. openei-fp .component-img-block-styling div:first-child img {
 border-top-left-radius:	8px;
 border-top-right-radius:	8px;

}

  1. openei-fp .component-img-block-styling div:last-child img {
 border-bottom-right-radius:	8px;
 border-bottom-left-radius:	8px;

}