2. Home»
  3. About»
  4. Administration»
  5. Institutional Advancement»
  6. Marketing and Communications»
  7. Albion College Website»
  8. Website Style Guide

About

Website Style Guide

Colors

Purple
#592041

Gold
#d69d00

Sky Blue
#6dc6e7

Light Grey
#d7d2cb

Headings

Page Title

h1.item-page-title {
     font-size: 3.6rem;
     color: #d69d00;
     font-family: "BureauGrotesque ThreeSeven","Anton",Impact,"Helvetica Neue",Arial,sans-serif;
     font-weight: normal;
     text-transform: uppercase;
     margin: 0 0 18px;
}

Heading 2

h2, .h2 {
     font-size: 2.8rem;
     color: #592041;
     font-family: "Georgia",Times,serif;
     font-weight: normal;
     margin: 0 0 18px;
     line-height: 1.1;
}

Heading 3

h3, .h3 {
     margin: 0 0 10px;
     font-weight: normal;
     font-size: 2.366rem;
     font-family: "Georgia",Times,serif;
     color: #592041;
     line-height: 1.1;
}

Heading 4

h4, .h4 {
     font-size: 2.171rem;
     margin: 0 0 18px;
     font-weight: normal;
     font-family: "Georgia",Times,serif;
     color: #592041;
     line-height: 1.1;
}
Heading 5
h5, .h5 {
     font-weight: bold;
     font-size: 2.0007rem;
     margin: 0 0 18px;
     font-family: "Georgia",Times,serif;
     color: #592041;
     line-height: 1.1;
}
Heading 6
h6, .h6 {
     font-weight: bold;
     font-size: 1.8005rem;
     margin: 0 0 18px;
     font-family: "Georgia",Times,serif;
     color: #592041;
     line-height: 1.1;
}

Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores nostrum doloremque repellendus non cum accusantium officiis eius eaque tempore. Praesentium at sunt provident sint aliquid voluptatibus necessitatibus excepturi dicta nulla!

p {
     margin: 0 0 10px;
     font-family: "Arial", sans-serif;
     font-size: 1.4rem;
     line-height: 1.42857;
     color: #685c53;
}

purple text

.purple {
     color: #592041;
}

gold text

.gold {
     color: #d69d00;
}

gray text

.gray {
     color: #685c53;
}

white text (background added)

.white {
     color: #fff;
}

Font Families

Georgia

.georgia {      font-family: "Georgia", Times, serif; }

Impact

.impact {      font-family: "BureauGrotesque ThreeSeven", "Anton", Impact, "Helvetica Neue", Arial, sans-serif;      text-transform: uppercase; }

Font Sizes

Font Size 12px

.fs12 {
     font-size: 1.209rem;
}

Font Size 14px

.fs14 {
     font-size: 1.404rem;
}

Font Size 16px

.fs16 {
     font-size: 1.6rem;
}

Font Size 18px

.fs18 {
     font-size: 1.8005rem;
}

Font Size 20px

.fs20 {
     font-size: 2.0007rem;
}

Font Size 21px

.fs21 {
     font-size: 2.1008rem;
}

Font Size 22px

.fs22 {
     font-size: 2.171rem;
}

Font Size 24px

.fs24 {
     font-size: 2.366rem;
}

Font Size 26px

.fs26 {
     font-size: 2.561rem;
}

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore mollitia porro culpa vel distinctio minima libero ut expedita repudiandae tempora modi consectetur eos necessitatibus officiis similique accusamus magni voluptatem aliquid.
blockquote {
     width: 220px;
     border-top: 4px solid #685c53;
     border-bottom: 4px solid #685c53;
     padding: 24px 0;
     float: right;
     margin: 0 0 15px 15px;
     position: relative;
     border-left: 0;
     font-size: 17.5px;
}

Form Elements

formContainer label {
     color: #592041;
     display: inline-block;
     max-width: 100%;
     margin-bottom: 5px;
     font-weight: bold;
}


.formContainer .inputbox {
     width: 100%;
     background: #efecea;
     height: 22px;
     border-radius: 0;
     padding: 3px 3px !important;
     font-weight: 700;
     font-size: 1.2rem;
     border: 0;
}

input[type="checkbox"] {
     display: inline-block;
}
input.checkbox {
     margin: 5px;
}
label + input.checkbox {
     margin-left: 10px;
}
input.checkbox + label {
     margin: 5px;
}

input[type="radio"] {
     display: inline-block;
     margin: 5px;
}
label + input.radio {
     margin-left: 10px;
}

.inputbox {
     width: 100%;
     background: #efecea;
     height: 22px;
     border-radius: 0;
     padding: 3px 3px !important;
     font-weight: 700;
     font-size: 1.2rem;
     border: 0;
}
.formContainer textarea.inputbox {
     height: inherit;
}

.inputbox {
     width: 100%;
     background: #efecea;
     height: 22px;
     border-radius: 0;
     padding: 3px 3px !important;
     font-weight: 700;
     font-size: 1.2rem;
     border: 0;
}

.sidebar-albion form .inputbox, .sidebar-albion form select, .formContainer .inputbox, .formContainer select, #mailto-window .inputbox, #mailto-window select {
     width: 100%;
     background: #efecea;
     height: 22px;
     border-radius: 0;
     padding: 3px 3px !important;
     font-weight: 700;
     font-size: 1.2rem;
     border: 0;
}

Links

Lorem ipsum dolor sit amet.

a {
     color: #592041;
     outline: none;
     text-decoration: none
}
a:active, a:hover {
     outline: 0;
}
a:hover, a:focus {
     text-decoration: underline;
     outline: 0;
}

Link Arrow

ipsum

.link-arrow:after {
     content: '\00BB';
     font-family: 'FontAwesome';
     font-size: 1em;
     display: inline-block;
     margin-left: 5px;
}

Button

ipsum

.button {
     background-color: #c79316;
     color: #fff;
     display: inline-block;
     border: none;
     font-weight: bold;
     padding: 4px 5px;
}
.button:hover {
     background: #997111;
     text-decoration: underline;
}

Unordered List

  • Lorem
  • ipsum
  • dolor
ul {
     padding-left: 40px;
     list-style: disc;
     margin: 13px 0;
     font-family: "Arial",sans-serif;
     font-size: 1.4rem;
     line-height: 1.42857;
     color: #685c53;
}

Ordered List

  1. Lorem
  2. ipsum
  3. dolor
ol {
     padding-left: 40px;
     list-style: initial;
     margin: 15px 0;
     font-family: "Arial",sans-serif;
     font-size: 1.4rem;
     line-height: 1.42857;
     color: #685c53;
}

Floated Images (Left)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil numquam labore necessitatibus reprehenderit praesentium atque ex repudiandae rerum molestias alias maiores molestiae qui deleniti dicta recusandae voluptate aspernatur quae sapiente. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus omnis voluptate similique unde quod deserunt error consectetur expedita cupiditate iste facilis pariatur vel explicabo laudantium qui numquam quis nemo iure.


.img-left {
     float: left;
     margin: 10px 10px 10px 0;
}

Floated Images (Right)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil numquam labore necessitatibus reprehenderit praesentium atque ex repudiandae rerum molestias alias maiores molestiae qui deleniti dicta recusandae voluptate aspernatur quae sapiente. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus omnis voluptate similique unde quod deserunt error consectetur expedita cupiditate iste facilis pariatur vel explicabo laudantium qui numquam quis nemo iure.


.img-right {
     float: right;
     margin: 10px 0 10px 10px;
}