Skip to content

Instantly share code, notes, and snippets.

@dgs700
Created April 12, 2012 23:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dgs700/2371888 to your computer and use it in GitHub Desktop.
Save dgs700/2371888 to your computer and use it in GitHub Desktop.
Landing page styles for www.midpenbgc.org.
@charset "utf-8";
body {
margin:0;
font-family:arial, verdana, helvetica, san-serif;
}
a {
text-decoration:none;
cursor:pointer;
}
h1,
h2,
h3,
h4,
p {
padding:0;
margin:0;
}
h3 {
color:#404041;
}
hr {
color:#efefef;
}
h5 {
margin:0 0 5px 0;
padding:0;
}
a img {
border:none;
}
#mainColumn a.pdf {
padding-right:15px;
background-repeat:no-repeat;
background-position:right;
}
p a {
color:#0080C5;
}
p a:hover {
text-decoration:underline;
}
.clear {
clear:both;
}
h5 a {
color:#0080C5;
font-size:12px;
}
h5 a:hover {
color:#71bfe2;
}
h5 a span {
color:#404041;
padding-left:5px;
}
h5 a:hover span {
color:#999999;
}
#outsideWrapper {
margin:auto;
width:995px;
}
#global-header {
display:block;
height:126px;
background-repeat:no-repeat;
background-position:0 23px;
}
#global-header-logo {
height:106px;
width:185px;
position:relative;
top:0;
left:110px;
float:left;
}
#global-header-logo img {
padding:20px 0 0 0
}
.international {
width:500px;
height:40px;
padding:20px 50px 0 0;
float:right;
text-align:right;
font-size:9px;
}
.international a {
color:#71BFE2;
padding-left:20px;
}
.international a:hover {
color:#999;
text-decoration:underline;
}
.international a.active {
color:#999;
}
.tagline {
width:590px;
margin:0 50px 0 0;
float:right;
}
.tagline img {
padding:5px 0 0 130px;
}
#contentWrapper {
background-repeat:repeat-y;
height:100%;
}
aside,
#sidebar1 {
float:left;
width:335px;
margin:0;
background-repeat:no-repeat;
}
#sidebar1 .container {
width:285px;
float:right;
}
.sidebar .container {
border-top:1px solid #A6A8AB;
padding-top:10px;
margin-bottom:10px;
}
#sidebar1 .container-wide {
width:335px;
float:left;
margin-left:0;
}
.sidebar .container-wide {
padding-top:10px;
margin-bottom:10px;
padding-left:0;
}
nav,
.navigationModule {
width:285px;
float:right;
margin-bottom:10px;
}
#navigation {
margin:0;
padding:0;
}
#navigation li.menu-item {
padding:0;
list-style:none;
font-weight:bold;
margin-bottom:5px;
position:relative;
}
#navigation li.menu-item a.menu-item-link {
font-size:15px;
color:#fff;
display:block;
padding:5px 10px 5px 10px;
}
#navigation li.menu-item ul.submenu {
list-style:none;
margin:0;
padding:5px 0;
border:solid white;
border-width:0 0 5px 5px;
position:absolute;
width:135px;
right:0;
top:0;
display:none;
}
#navigation li.menu-item:hover {
z-index:99;
cursor:pointer;
}
#navigation li.menu-item:hover ul.submenu {
display:block;
z-index:99;
cursor:pointer;
}
#navigation ul.submenu li.submenu-item {
font-weight:normal;
width:115px;
font-size:12px;
line-height:14px;
padding:0 5px 8px 10px;
}
#navigation ul.submenu li a {
display:block;
color:#fff;
}
#navigation ul.submenu li a:hover {
text-decoration:underline;
}
#navigation li.current-menu-item {
padding-bottom:0;
background-position:right bottom;
background-repeat:no-repeat;
}
#navigation li.current-menu-item ul.submenu {
position:relative;
display:block;
border-width:0;
padding:0 0 5px 135px;
width:150px;
background-position:left top;
background-repeat:no-repeat;
background-color:transparent;
}
#navigation li.current-menu-item ul.submenu li.submenu-item {
width:130px;
}
#navigation li.current-menu-item ul.submenu li.current-submenu-item {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter:alpha(opacity=50);
opacity:0.5;
}
#who-we-are {
background-color:#82BDE5;
}
#who-we-are:hover,
#who-we-are ul.submenu {
background-color:#70A3C3;
}
#who-we-are.current-menu-item {
background-color:#70A3C3;
}
#how-we-change-lives {
background-color:#FAC74D;
}
#how-we-change-lives:hover,
#how-we-change-lives ul.submenu {
background-color:#D9AB42;
}
#how-we-change-lives.current-menu-item {
background-color:#D9AB42;
}
#our-programs {
background-color:#9BC766;
}
#our-programs:hover,
#our-programs ul.submenu {
background-color:#85A655;
}
#our-programs.current-menu-item {
background-color:#85A655;
}
#how-to-help {
background-color:#F6AC68;
}
#how-to-help:hover,
#how-to-help ul.submenu {
background-color:#D6945C;
}
#how-to-help.current-menu-item {
background-color:#D6945C;
}
#news-and-events {
background-color:#68BCBD;
}
#news-and-events:hover,
#news-and-events ul.submenu {
background-color:#549998;
}
#news-and-events.current-menu-item {
background-color:#549998;
}
#members-corner {
background-color:#ADA8D3;
}
#members-corner:hover,
#members-corner ul.submenu {
background-color:#8F8EB1;
}
#members-corner.current-menu-item {
background-color:#8F8EB1;
}
.sidebar .container p {
font-size:11px;
line-height:15px;
color:#404041;
padding:0 0 5px 0;
margin:0;
}
.sidebar h3 {
font-size:14px;
padding:0 0 5px 0;
margin:0;
line-height:normal;
}
.sidebar1-image {
float:left;
margin-right:10px;
padding:0;
}
.sidebar1-image img {
width:65px;
height:65px;
}
.sidebar1-text-narrow {
width:195px;
float:left;
padding:0;
}
.sidebar .subhed,
.homepage .subhed {
color:#404041;
font-size:18px;
font-weight:bold;
padding:0 0 10px 0;
}
a.subhedLink {
color:#0080C5;
font-size:11px;
padding-left:10px;
font-weight:normal;
}
a.subhedLink:hover {
color:#71BFE2;
}
a.subhedLink span {
color:#404041;
padding-left:5px;
}
a.subhedLink:hover span {
color:#999;
}
.donateWidget {
float:left;
width:285px;
margin:0 0 6px 0;
}
.donateWidget form {
margin:0;
padding:0;
}
.donateWidget-Input {
float:left;
font-size:12px;
font-weight:bold;
color:#404041;
height:20px;
width:97px;
padding:5px 0 0 6px;
border:1px solid #666;
position:relative;
top:2px;
}
.donateWidget-links a {
color:#0080C5;
font-size:11px;
line-height:15px;
padding:0 0 0 10px;
}
.donateWidget-links a:hover {
color:#71BFE2;
}
.donateWidget-links a span {
color:#404041;
padding-left:5px;
}
.donateWidget-links a:hover span {
color:#999;
}
.donate {
width:590px;
height:35px;
margin:0 0 6px 0;
}
.donate form {
margin:0;
padding:0;
}
.donate-Input {
float:left;
font-size:12px;
font-weight:bold;
color:#404041;
height:20px;
width:97px;
padding:5px 0 0 6px;
border:1px solid #666;
position:relative;
top:2px;
}
.donateCash {
float:left;
font-size:18px;
color:#404041;
padding:4px 5px 0 0;
}
.donate a {
height:30px;
width:185px;
display:block;
float:left;
padding:0 0 0 10px;
}
a.googleBtn {
background-repeat:no-repeat;
background-position:10px 0;
}
a.googleBtn:hover {
background-position:10px -40px;
}
a.paypalBtn {
background-repeat:no-repeat;
background-position:10px 0;
}
a.paypalBtn:hover {
background-position:10px -40px;
}
p.hint {
font-size:11px;
color:#d00
}
p.subhed {
font-size:14px;
font-weight:bold;
}
#sidebar-donation img {
float:left;
}
#sidebar-donation .sidebar1-text-narrow p {
padding-left:10px;
width:200px;
position:relative;
top:-30px;
}
#sidebar-donation .sidebar1-text-narrow p img {
padding-bottom:10px;
}
#sidebar-donation .sidebar1-text-narrow a.donation-pointer {
position:relative;
top:143px;
height:30px;
display:block;
background-repeat:no-repeat;
background-position:-115px 0;
margin-right:-30px;
outline:none;
}
.sidebar .container p,
.sidebar .container-wide p {
font-size:11px;
line-height:14px;
color:#404041;
padding:0 0 5px 0;
margin:0;
}
.sidebar .container p a span,
.sidebar .container-wide p a span {
color:#404041;
padding:0 3px 0 3px;
}
.sidebar .container p a:hover,
.sidebar .container-wide p a:hover {
color:#71BFE2;
text-decoration:none;
}
#homepage-video.container {
background-color:#efefef;
padding:10px;
width:265px;
margin-top:10px;
border:none;
}
#homepage-video p,
#homepage-video h3 {
padding-right:0;
}
#mainColumn h3 a,
#sidebar1 h3 a {
color:#0080C5;
}
#mainColumn h3 a:hover,
#sidebar1 h3 a:hover {
color:#71BFE2
}
#mainColumn h3 a span,
#sidebar1 h3 a span {
color:#404041;
padding-left:5px;
}
#mainColumn h3 a:hover span,
#sidebar1 h3 a:hover span {
color:#999;
}
#mainColumn {
float:left;
width:590px;
margin:0 0 0 20px;
font-size:11px;
line-height:21px;
padding-bottom:10px;
}
.indexTitle {
font-size:18px;
font-weight:bold;
padding:13px 0 16px 0;
}
.whoWeAre .indexTitle {
color:#70A3C3;
}
.howWeChangeLives .indexTitle {
color:#D9AB42
}
.ourProgress .indexTitle {
color:#85A655;
}
.howToHelp .indexTitle {
color:#D6945C;
}
.newsEvents .indexTitle {
color:#549998;
}
.membersCorner .indexTitle {
color:#8F8EB1;
}
.homepage .container {
border-top:1px solid #A6A8AB;
padding-top:15px;
margin-bottom:10px;
}
.homepage .billboard {
padding-bottom:20px;
}
#mainColumn .colA {
float:left;
width:285px;
margin:0 20px 0 0;
}
#mainColumn .colB {
float:left;
width:285px;
margin:0;
}
#mainColumn .eventDetails .colA {
width:275px;
}
#mainColumn .eventDetails .colB {
width:275px;
border:none;
}
#mainColumn h3 {
font-size:14px;
line-height:19px;
}
#mainColumn h3.eventTitle {
padding-top:10px;
}
#mainColumn.homepage h3 {
padding-bottom:10px;
}
#partner-preview img {
float:left;
margin-right:27px;
}
#partner-preview img .last-image {
float:left;
margin-right:0;
}
.content {
font-size:13px;
line-height:21px;
}
.content,
.content-intro {
width:432px;
}
.contentWide {
font-size:13px;
line-height:21px;
width:590px;
}
.content p {
padding-bottom:10px;
}
.content-intro p {
padding-top:0;
font-size:13px;
line-height:21px;
padding-bottom:10px;
}
.content ul {
margin:0;
padding:0 0 10px 15px;
width:285px;
}
.content li {
list-style-type:disc;
}
.content li a {
color:#0080C5;
}
.content li a:hover {
color:#71BFE2;
}
.content .billboard {
padding-top:10px;
width:432px;
}
.content table {
padding-bottom:10px;
}
div.photoBox {
margin-bottom:10px;
}
div.photoBox > img {
float:left;
margin:0 20px 10px 0;
width:270px;
height:170px;
}
div.photoAndCaption {
float:left;
margin-right:8px;
width:136px;
}
div.photoAndCaption p {
padding:0 5px;
font-size:11px;
line-height:15px;
color:#333;
text-align:center;
}
div.photoAndCaption img {
max-width:136px;
}
p.photoAndCaption {
margin-bottom:20px;
padding:0 5px;
font-size:11px;
line-height:15px;
color:#333;
}
p.photoAndCaption img {
float:left;
margin-right:10px;
}
.eventSynopsis {
float:right;
width:135px;
border-left:dashed 1px #404041;
padding:0 0 0 10px;
color:#404041;
margin-top:10px;
margin-bottom:20px;
}
a.eventsDetails {
background-color:#0080C5;
padding:0 0 0 5px;
color:#fff;
font-size:11px;
text-transform:uppercase;
float:left;
width:125px;
height:19px;
display:block;
margin-top:10px;
}
.howToHelp hr.clear {
color:#F6AC68;
}
a.eventsDetails:hover {
background-color:#71BFE2;
}
.calloutBox {
float:right;
width:135px;
background-color:#749944;
background-repeat:no-repeat;
background-position:0 40px;
}
.boxHDR {
color:#fff;
background:#58595B;
text-transform:uppercase;
padding:5px 10px 5px 10px;
font-size:16px;
}
.boxBody {
color:#fff;
font-size:11px;
line-height:21px;
padding:5px 10px 5px 10px;
background-color:#749944;
filter:alpha(opacity=90);
opacity:0.9;
}
.whoWeAre .boxBody {
background-color:#70A3C3;
}
.howWeChangeLives .boxBody {
background-color:#D9AB42
}
.ourProgress .boxBody {
background-color:#85A655;
}
.howToHelp .boxBody {
background-color:#D6945C;
}
.newsEvents .boxBody {
background-color:#549998;
}
.membersCorner .boxBody {
background-color:#8F8EB1;
}
#donationAmounts {
border:none;
}
td.amount {
width:60px;
font-weight:bold;
}
ul.staffPix {
margin:0;
padding:0;
clear:left;
}
.staffPix li {
list-style-type:none;
display:block;
float:left;
margin:0 20px 20px 0;
width:145px;
}
.form h3 {
padding:0 0 10px 0
}
.optional {
background-color:#f3f3f3;
padding:10px;
}
div.clearfix {
clear:both;
border-top:1px dotted #A6A8AB;
padding:5px 0;
color:#404041;
}
div.clearfix label {
float:left;
width:135px;
padding:5px;
}
div.clearfix label.radioLabel {
float:none;
width:135px;
padding:5px;
}
div.buttongroup {
float:left;
border:0;
padding:0 10px 10px 0;
}
div.buttongroup input {
margin-right:5px;
}
.message {
color:#FF0000;
}
.error_message {
color:#FF0000;
}
.clearfix input,
.clearfix select {
margin-top:3px;
}
#global-footer {
display:block;
clear:both;
height:100px;
background-repeat:no-repeat;
}
.footer-links {
position:relative;
top:35px;
left:350px;
font-size:11px;
width:590px;
color:#404041;
}
.footer-links a {
color:#404041;
padding:0 5px 0 5px;
}
.footer-links a:hover {
text-decoration:underline;
}
.parentLogo {
padding:60px 0 10px 50px;
float:left;
}
.credits {
float:right;
padding:72px 50px 0 0;
text-align:left;
font-size:11px;
color:#A6A8AB;
}
.credits span {
padding-left:20px;
}
.credits a {
color:#A6A8AB;
}
.credits a:hover {
text-decoration:underline;
}
.error-message {
color:#FF0000;
}
.contentWide ul {
margin:0;
padding:0 0 10px 15px;
width:285px;
}
.contentWide li {
list-style-type:none;
}
.contentWide li a {
color:#0080C5;
}
.contentWide li a:hover {
color:#71BFE2;
}
ul.partners,
ul.awards {
list-style-type:none;
padding:10px 0 10px 0;
}
.partners li,
.awards li {
padding-bottom:10px;
}
.successQuote {
font-style:italic;
font-size:21px;
line-height:24px;
color:#666;
font-family:Georgia;
margin-top:10px;
}
.successCredit {
font-size:12px;
padding:0 0 10px 0;
}
.simple_overlay {
display:none;
width:auto;
height:auto;
background-color:#fff;
color:#000;
}
.simple_overlay .close {
position:absolute;
right:-15px;
top:-15px;
cursor:pointer;
height:35px;
width:35px;
}
.details {
width:auto;
height:auto;
background-color:#fff;
margin-top:20px;
margin-bottom:10px;
text-align:center;
font-size:1.1em;
line-height:1.4em;
color:#000;
}
.details img {
margin:20px;
}
.details h2 {
color:#70A3C3;
font-size:18px;
font-weight:bold;
}
.details h3 {
color:#000;
font-size:2em;
}
.details h4 {
font-size:1.2em;
margin-bottom:7px;
}
.details h5 {
font-size:1.1em;
}
.details a {
color:#000;
text-decoration:none;
}
.details a:hover {
text-decoration:underline;
}
h3 {
color:#404041;
}
.eventDetails {
padding-top:10px;
}
.eventDetails td {
font-size:11px;
line-height:15px;
vertical-align:top;
padding:5px 0 5px 0;
border-bottom:1px solid #ccc;
margin:0;
color:#404041;
}
.eventDetails td.label {
width:65px;
font-weight:bold;
}
.eventDetails td a {
color:#0080C5;
}
.eventDetails td a:hover {
text-decoration:underline;
}
.eventFlyer a {
color:#0080C5;
}
.eventFlyer a:hover {
text-decoration:underline;
}
.eventFlyer {
padding:10px 0 10px 0;
clear:both;
}
#contentTabs {
margin-top:20px;
}
#contentTabs ul {
list-style:none;
padding:0;
margin:0;
width:590px;
}
#contentTabs li {
float:left;
border:1px solid #ededed;
border-bottom-width:0;
border-top:1px solid #fff;
margin:0;
}
#contentTabs a {
text-decoration:none;
font-weight:bold;
display:block;
background:#ededed;
padding:2px 10px 2px 10px;
color:#0080C5;
}
#contentTabs a:hover {
background:#dedede;
}
#contentTabs #selected {
font-weight:bold;
padding:2px 10px 2px 10px;
position:relative;
top:1px;
background:white;
color:#404041;
text-decoration:none;
border-color:#ddd;
}
.contentTab-registration,
.contentTab-information {
border-top:1px solid #ddd;
clear:both;
padding-bottom:10px;
padding-top:10px;
}
.progressStatus {
padding:0 0 10px 0;
}
.currentStep {
float:left;
font-size:11px;
color:#404041;
}
.allSteps {
float:right;
font-size:9px;
color:#999;
padding:0 5px 0 5px;
}
.allSteps span {
color:#404041;
border-bottom:1px solid #999;
}
.nextStep {
padding:10px 0 20px 0;
}
div.clearfixNew .hint {
font-size:11px;
color:#666;
padding-left:10px;
}
div.clearfixNew {
clear:both;
border-bottom:1px solid #ccc;
padding:5px 0;
color:#404041;
}
div.clearfixNew label {
float:left;
width:155px;
padding:5px 0;
line-height:15px;
}
div.clearfixNew .label2 {
float:left;
width:485px;
padding:5px 10px 5px 0;
}
div.clearfixNew label.radioLabel {
float:none;
width:135px;
padding:0;
}
div.buttongroup {
float:left;
border:0;
padding:0 10px 10px 0;
}
div.buttongroup input {
margin-right:5px;
}
.message,
.error_message {
color:#FF0000;
}
.clearfixNew input,
.clearfixNew select {
margin-top:3px;
}
#guest-names th {
padding:0 20px 0 0;
text-align:center;
font-weight:normal;
}
#guest-names td {
padding:0 0 5px 0;
text-align:center;
}
#guest-names input {
margin:0 20px 0 0;
}
ul.publications {
list-style-type:none;
padding:10px 0 10px 0;
}
#newsletter-signup {
font-size:11px
}
#newsletter-signup label {
width:100px;
}
p.photoAndCaption:after,
.clearFix:after,
.clearfixNew:after {
content:".";
display:block;
height:0;
clear:left;
visibility:hidden;
}
* html .clearfix,
* html .clearFix,
* html .clearfixNew {
height:1%;
}
*:first-child+html .clearfix,
*:first-child+html .clearFix,
*:first-child+html .clearfixNew {
min-height:1px;
}
#wideColumn {
float:left;
width:890px;
margin:50px 0 0 50px;
font-size:11px;
line-height:21px;
padding-bottom:10px;
}
table.staff {
border-collapse:collapse;
}
.staff td {
padding:2px 5px;
border:#CC6600 1px dotted;
border-spacing:0;
}
#mainColumn .colA {
float:left;
width:420px;
margin:0 20px 10px 0;
}
#mainColumn .colA p {
font-size:12px;
}
#upcoming-events .subhed {
padding-bottom:10px;
font-size:18px;
}
#upcoming-events p.event-date {
color:#999;
font-weight:bold;
}
#upcoming-events p.event-description {
padding-bottom:10px;
}
#upcoming-events p.event-registration {
padding-bottom:10px;
}
#upcoming-events a.event-registration {
font-size:13px;
color:#0080c5;
font-weight:bold;
}
#upcoming-events a.event-registration:hover {
color:#71bfe2;
text-decoration:none;
}
#upcoming-events a.event-registration span {
padding-left:5px;
color:#404041;
}
#upcoming-events a.event-registration:hover span {
color:#999;
}
#upcoming-events hr {
margin:0 0 10px 0;
padding:0;
}
#mainColumn .colB {
float:right;
width:135px;
border-left:dashed 1px #404041;
padding:0 0 0 10px;
color:#404041;
margin-bottom:10px;
}
#mainColumn h3 {
font-size:18px;
line-height:19px;
}
#twitter_div {
margin:0;
padding:0;
height:auto;
font-size:11px;
line-height:14px;
}
#twitter_div ul {
width:135px;
margin:0;
padding:0;
height:auto;
}
#twitter_div ul li {
margin:0;
padding:0;
list-style-type:none;
padding-bottom:10px;
}
#twitter_div ul li a {
color:#404041;
}
#twitter_div ul li a:hover {
text-decoration:none;
color:#999;
}
#twitter_div ul li span {
visibility:visible;
display:block;
}
#twitter_div ul li span a {
color:#0080C5
}
#twitter_div ul li span a:hover {
color:#71BFE2
}
#social-links p,
#social-links h1 {
font-weight:bold;
font-size:14px;
border-top:1px solid #a6a8ab;
padding:5px 0 10px 0;
}
#social-links a.facebook {
background-position:0 -33px;
}
#social-links a.facebook:hover {
background-position:0 0;
}
#social-links a.twitter {
background-position:-32px -33px;
}
#social-links a.twitter:hover {
background-position:-32px 0;
}
#social-links a.linkedin {
background-position:-64px -33px;
}
#social-links a.linkedin:hover {
background-position:-64px 0;
}
#social-links a.youtube {
background-position:-96px -33px;
}
#social-links a.youtube:hover {
background-position:-96px 0;
}
.scrollable {
position:relative;
overflow:hidden;
width:590px;
height:90px;
}
.scrollable .items {
width:20000em;
position:absolute;
clear:both;
}
.scrollable img {
float:left;
margin-right:27px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment