/* ---------------------
Title: Synthesis Studios - Main screen stylesheet
Filename: screen.css
Author: One Pica Inc, Boston MA
Email: codemaster@onepica.com
Table of Contents:
Searchstring (Section Name) Description
=General (General Styles): Set font sizes, Page backgrounds, link behaviors, etc
=Master (Master #container Styles): Placing, sizing, styling the main container
=Branding (Branding Styles): Logos, taglines, branding info
=Nav (Navigation Styles): The navigation bar; internal and external
=Forms (Form Styles) Set appearance of forms, inputs, buttons, etc
=Multicol (Multi-Column Styles): The cases where the content needs to be in multiple columns
=Headings (Heading Styles): through
=Content (Content Styles): The main content of the page
=Homepage (Homepage Styles): Homepage-specific rules
=Blog (Blog Styles): Styles for the blog section
=Footer (Credit/Footer Styles): The footer
=Uni (Universal Styles): Classes and elements that apply throughout ('clear', 'blue', etc)
Common Color Table:
White: #FFFFFF;
Background Dark Blue: #393454;
Logo Light Blue: #00B6CF;
Highlight Orange: #FFC300;
Thanks To:
CSS structure/commenting: http://www.huddletogether.com/2006/02/16/practical-web-development-tips/
Markup structure: http://www.stuffandnonsense.co.uk/archives/whats_in_a_name_pt2.html
Stylesheet searchstring flags: http://www.stopdesign.com/log/2005/05/03/css-tip-flags.html
---------------------- */
/* =General
----------------------
General Styles applied to 'normalize' things
Notes:
'Em' styling generally following (http://www.clagnut.com/blog/348/)
from this point 10px=1em, 11px=1.1em, etc
100.01% font size from (http://www.communitymx.com/content/article.cfm?page=5&cid=FAF76)
Beginning "global reset" styles, to clear troublesome browser defaults,
are based on (http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/)
Note that most form elements are omitted; style those separately, further down.
---------------------- */
html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
line-height: 1;
font-family: inherit;
text-align: left;
vertical-align: baseline;
}
a img, :link img, :visited img {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
.bulleted {
margin-bottom: 10px;
}
.bulleted li {
background: url("../images/icons/li_arrow_dark.gif") 0px 10px no-repeat;
line-height: 1.5em;
padding: 4px 0 0px 15px;
}
/* Begin Actual Site Styles */
html {
font-size: 100.01%; /* Ensures font consistency across browsers */
height: 100%;
}
body {
font-size: 10px; /* Sets base font-size for browsers that resize text correctly */
line-height: 1.5; /* Sets base leading for lines of text */
background: #9F9F9F url(../images/bg/body_bg_top.gif) 50.5% 0 repeat-x;
font-family: "Trebuchet MS", Arial, sans-serif;
height: 100%;
color: #555;
}
/* Set universal defaults for certain tags */
div, small, p, li, blockquote, code, pre, h1, h2, h3, h4, h5, h6 {line-height: 1.5}
p {margin-bottom: 1em}
input, select, th, td {font-size: 1em}
h1 {font-size: 2em} /* 24px */
h2 {font-size: 1.5em} /* 18px */
h3 {font-size: 1.25em} /* 15px */
h4 {font-size: 1em} /* 12px */
h5 {font-size: 1em} /* 12px */
h6 {font-size: 1em} /* 12px */
strong {font-weight: bold}
em {font-style: italic}
sup {font-size: 50%; vertical-align: super;}
/* Basic link styles */
a, a:link {
color: #00B5CB;
text-decoration: underline;
}
a:visited {
color: #00B5CB;
}
a:hover, a:active {
color: #FFC300;
text-decoration: underline;
}
a:focus {
outline: none; /* Removes dotted outline in Firefox */
}
/* =Master
----------------------
Master Container
Notes:
margin: 0px auto; centers the container horizontally except in IE5, which is fixed in the body tag
---------------------- */
#container {
margin: 0px auto;
padding: 0 15px;
width: 740px;
background: transparent url(../images/bg/container_bg_outer.gif) 0 0 no-repeat;
font-size: 1.2em; /* 12px (based on value from body) */
text-align: left; /* Normalize alignment; unfix all browsers from fix in IE stylesheet */
}
#container-inner {
background: #fff url(../images/bg/container_bg_inner.gif) 0 103px no-repeat;
position: relative;
}
#container-bottom {
background: transparent url(../images/inline/bottom_border_white.gif) 0 0 no-repeat;
height: 26px;
}
#container-bottom.cb-blue {
background: transparent url(../images/inline/bottom_border.gif) 0 0 no-repeat;
}
/* Skip link: This is the very first link anywhere on the page; by tabbing to it or hitting accesskey 2, a user can skip the header/navigation of a page and go directly to the page content. It is normally 'hidden' by being positioned far, far off the page; bringing it into focus with Tab makes it visible. */
#skiplink a {
position: absolute;
top: -1000px;
left: -2000px;
}
#skiplink a:focus, #skiplink a:active {
position: absolute;
margin: 0;
top: 0;
left: 0;
display: block;
padding: 0;
background: #000;
color: #fff;
font-weight: bold;
}
#skiplink a:hover {
}
/* =Branding
----------------------
Branding styles: Usually the logo and tagline
Notes:
Image replacement: Usually Phark Method (http://www.mezzoblue.com/tests/revised-image-replacement/)
---------------------- */
#branding {
padding-top: 20px;
padding-left: 45px;
padding-bottom: 26px;
}
#branding-logo {
width: 185px;
height: 62px; /* Set dimensions once here, and use 100% for all dimensions in both rules below */
cursor: pointer;
}
#branding-logo h1 {
text-indent: -5000px;
overflow: hidden;
background: url(../images/branding/synthesis_logo_final_RGB.gif) 0 0 no-repeat;
width: 100%;
height: 100%;
line-height: 1;
padding: 0;
margin: 0;
}
#branding-logo h1 a {
display: block;
width: 100%;
height: 100%;
}
/* =Nav
----------------------
Navigation styles
Notes:
Navigation belongs in an UL tag with as the markup scheme.
Keep each of the below #elements as divs, and put the UL inside them
If there's a Left-Hand navigation, use #nav-section, give it a width & float it left
---------------------- */
#nav {
background: #fff;
margin: 0;
padding: 0 0 7px 7px;
width: 370px;
position: absolute;
z-index: 100;
top: 0;
left: 325px;
font-size: 0.92em;
}
#home #nav {
background: #fff url(../images/bg/blue_navbg_home.gif) 0 bottom no-repeat;
}
#nav .one-row {
height: 74px;
}
#nav .two-row {
height: 148px;
}
#nav a, #nav a:link, #nav a:visited, #nav a:hover, #nav a:active {
text-decoration: none !important;
color: #fff;
}
ul#nav-main {
height: 31px;
list-style: none outside;
padding: 0;
margin: 0;
}
#nav-main li {
float: left;
display: inline;
height: 31px;
width: 67px;
margin: 0 7px 0 0;
}
#nav-main li.last {
margin-right: 0;
}
#nav-main li a {
background: #333 url(../images/nav/nav_key_full.gif) 0 0 no-repeat;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
text-indent: -5000px;
text-transform: uppercase;
font-weight: bold;
}
#nav-main #li-projects a:link, #nav-main #li-projects a:visited {
background-position: 0 0;
}
#nav-main #li-projects a.current:link, #nav-main #li-projects a.current:visited {
background-position: 0 -62px;
}
#nav-main #li-projects a:hover, #nav-main #li-projects a:active, #nav-main #li-projects a.current:hover, #nav-main #li-projects a.current:active {
background-position: 0 -31px;
}
#nav-main #li-studios a:link, #nav-main #li-studios a:visited {
background-position: -67px 0;
}
#nav-main #li-studios a.current:link, #nav-main #li-studios a.current:visited {
background-position: -67px -62px;
}
#nav-main #li-studios a:hover, #nav-main #li-studios a:active, #nav-main #li-studios a.current:hover, #nav-main #li-studios a.current:active {
background-position: -67px -31px;
}
#nav-main #li-blog a:link, #nav-main #li-blog a:visited {
background-position: -134px 0;
}
#nav-main #li-blog a.current:link, #nav-main #li-blog a.current:visited {
background-position: -134px -62px;
}
#nav-main #li-blog a:hover, #nav-main #li-blog a:active, #nav-main #li-blog a.current:hover, #nav-main #li-blog a.current:active {
background-position: -134px -31px;
}
#nav-main #li-about a:link, #nav-main #li-about a:visited {
background-position: -201px 0;
}
#nav-main #li-about a.current:link, #nav-main #li-about a.current:visited {
background-position: -201px -62px;
}
#nav-main #li-about a:hover, #nav-main #li-about a:active, #nav-main #li-about a.current:hover, #nav-main #li-about a.current:active {
background-position: -201px -31px;
}
#nav-main #li-news a:link, #nav-main #li-news a:visited {
background-position: -268px 0;
}
#nav-main #li-news a.current:link, #nav-main #li-news a.current:visited {
background-position: -268px -62px;
}
#nav-main #li-news a:hover, #nav-main #li-news a:active, #nav-main #li-news a.current:hover, #nav-main #li-news a.current:active {
background-position: -268px -31px;
}
#nav-main li a:hover, #nav-main li a:active, #nav-main .last a:hover {
background-color: #FFC300;
}
#nav-main li a.active {
/* color: #00b4cd; */
}
#nav-sub {
background: transparent url(../images/bg/nav-sub_bg.gif) 0 7px no-repeat;
height: 370px;
position: relative;
}
#nav-sub ul {
}
#nav-sub li {
width: 67px;
height: 67px;
margin: 7px 7px 0 0;
position: absolute;
}
#nav-sub a {
display: block;
padding: 6px 2px 0 4px;
height: 61px;
text-transform: uppercase;
line-height: 1.2;
font-weight: bold;
overflow: hidden;
text-decoration: none;
}
/* Background colors
NOTE: If the colors on the following five styles are changed, they also need to be
updated in the 'www/js/nav-home_v2.js' file. -TM */
#nav-projects a {
background: #00B6CF;
}
#nav-studios a {
background: #27C2D6;
}
#nav-blog a {
background: #4ECDDE;
}
#nav-about a {
background: #71D6E3;
}
#nav-news a {
background: #98E1EB;
}
/* Hover */
#nav-sub a:hover, #nav-sub a:active, #nav-sub a.active {
background: #FFC300;
color: #fff;
text-decoration: none;
}
/* =Forms
----------------------
Form styles
Notes:
A
should always enclose every label-input (or label-select) pair.
Widths are in % to start, so that they scale, but they are the attributes most likely to change.
Remember -- the IE stylesheet has different percentage widths to start.
---------------------- */
form {
display: block;
margin: 0;
padding: 0;
width: 100%;
}
fieldset {
border: 0px solid;
padding: 0;
margin: 0 0 1.4em 0;
}
form p {
display: block;
clear: both;
margin: 0 0 0.4em 0;
padding: 0;
}
form label {
display: inline;
float: left;
width: 35%;
padding: 0 5% 0 0;
margin: 0;
}
form input, form select, form textarea {
margin: 0;
padding: 0;
width: 59.2%; /* CLOSE to full width; use pixels for the real thing */
font-size: 1em;
border: solid 1px #999;
border-bottom-color: #ccc;
background-color: #fff;
font-family: Tahoma, sans-serif;
}
form input {height: 1.3em}
form select {width: 59.5%; height: 1.5em} /* Selects are not the same as inputs */
form textarea {height: 6em}
/* Radio buttons */
form input.radio, form input.radiobtn {
text-align: left;
width: 1.3em;
margin: 0.3em 0.2em 0 0;
padding: 0;
border: none;
background: none;
}
form .radiotext {
margin: 0 1em 0 0;
}
/* Check boxes */
form input.ckbx, form input.checkbox {
text-align: left;
width: 1.2em;
margin: 0.3em 0.2em 0 0;
padding: 0;
border: none;
background: none;
}
form p.indent { /* For buttons or text that need to align with inputs/selects */
margin-left: 40%;
}
form p.xspa { /* "extra space after" */
margin-bottom: 2.0em;
}
form .req, form .required {
color: red;
}
form input:focus {
/* however we want the focused field to look */
}
form input.submit, button { /* There are lots of default values to fix */
border: 1px solid #777;
padding: 1px 2px;
background: #00B6CF;
color: #fff;
font-size: 0.9em;
font-weight: bold;
height: auto;
width: auto;
cursor: pointer;
font-family: inherit;
}
form input.submit:hover, button:hover { /* IE6 can't see these, too bad */
color: #fff;
background-color: #FFC300;
}
form input.submit:active, button:active { /* Button 'feedback' behavior */
border: 1px solid #ccc;
border-top-color: #999;
border-left-color: #999;
}
/* =Multicol
----------------------
Multi-Column Content styles
Notes:
These columns should be used for text within #content.
Values are in percentages to start off -- remember that the IE stylesheet has different values.
If you need "pixel-perfect", you'll have to stop using percentages and use actual pixels
---------------------- */
.twoColumnLayout {
float: left;
clear: none;
}
.twoColumnLeft {
margin: 0 0 0 45px;
width: 254px;
}
.twoColumnLeft.one-row {
padding-top: 0px;
}
.twoColumnLeft.two-row {
padding-top: 15px;
}
.twoColumnRight {
margin: 0 0 0 32px;
width: 370px;
}
.twoColumnRight.one-row {
padding-top: 27px;
}
.twoColumnRight.two-row {
padding-top: 80px;
}
.singleColumn {
width: 370px;
margin: 0 0 0 328px;
}
/* Homepage content */
#home .blue .twoColumnLeft {
padding-top: 50px;
margin: 0 0 0 35px;
width: 274px;
}
#home .blue .twoColumnRight {
padding-top: 50px;
}
.twoColumnRightNav {
margin: 0 38px 0 6px;
width: 370px;
}
.threeColumnLayout {
width: 30%;
float: left;
clear: none;
}
.threeColumnLeft {
margin-right: 4%;
}
.threeColumnMiddle {
margin-right: 4%;
}
.threeColumnRight {
margin-right: 0;
}
/* =Headings
----------------------
through styles.
Notes:
Set default behaviors first, then move on to specific cases. Line-height is already set in General.
---------------------- */
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}
#content h2 {
text-transform: uppercase;
margin-top: 8px;
margin-bottom: 10px;
}
#content h3 {
color: #00B6CF;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 10px;
}
.twoColumnRight h4, .blue h4 {
padding: 0px 0 0 0;
border-bottom: 1px solid #DADADA;
margin-bottom: 8px;
text-transform: uppercase;
font-weight: bold;
}
.twoColumnRight h4 img, .blue h4 img {
line-height: 1;
margin: 0;
padding: 0;
}
.blue h4 {
border-bottom: 1px solid #919191;
}
/* =Content
----------------------
Main Content styles
Notes:
Font-size is inherited, so some math will be necessary to size child elements up or down correctly
---------------------- */
#content {
font-size: 1em; /* Inherits 12px from #container */
/* padding-bottom: 3em; This causes a weird flicker in IE7. Replaced with height on clear div in footer. */
/* This breaks IE. */
min-height: 30em; /* Prevents footer from disappearing against the white section of the body bg */
}
#content.ct-blue {
padding-bottom: 0;
}
#content-main {
}
#content-main.raffi {
background: transparent url(../images/inline/raffi_portrait.jpg) 0 80px no-repeat;
}
#content-main.tucker {
background: transparent url(../images/inline/tucker_portrait.jpg) 0 80px no-repeat;
}
#content-main .home {
}
/* Left Column */
#header-content {
padding-top: 30px;
padding-bottom: 0px;
margin-bottom: 10px;
color: #999;
font-size: 1.2em;
line-height: 1.6;
border-bottom: 1px solid #DADADA;
}
#home #header-content {
padding-top: 20px;
padding-bottom: 16px;
margin-bottom: 0px;
border-top: 1px solid #DADADA;
border-bottom-width: 0px;
height: 232px;
}
#header-content-blank {
padding-top: 30px;
padding-bottom: 0px;
margin-bottom: 10px;
color: #999;
font-size: 1.2em;
line-height: 1.6;
border-bottom: none;
}
#header-content .hdr {
margin-bottom: 0.3em;
}
/* The left column content blocks on the section pages. */
.section-block {
background-color: #E0E0E0;
border: 1px solid #ccc;
padding: 6px 10px;
margin: 0 0 1em 0;
color: #333;
}
.section-block.header {
text-transform: uppercase;
font-weight: bold;
font-size: 0.92em;
color: #333;
padding-top: 6px;
padding-bottom: 5px;
margin-bottom: 2px;
}
.section-block.header h4 {
padding: 0;
margin: 0;
line-height: 1.5;
width: 230px;
height: 11px;
overflow: hidden;
text-indent: -5000px;
}
.section-block .sb-moreinformation {
background: transparent url(../images/headers/sb_moreinformation.gif) 0 0 no-repeat;
}
.section-block .sb-relatedlinks {
background: transparent url(../images/headers/sb_relatedlinks.gif) 0 0 no-repeat;
}
.section-block .sb-relatedpress {
background: transparent url(../images/headers/sb_relatedpress.gif) 0 0 no-repeat;
}
.section-block .sb-contactinformation {
background: transparent url(../images/headers/sb_contactinformation.gif) 0 0 no-repeat;
}
.section-block .sb-currentopenings {
background: transparent url(../images/headers/sb_currentopenings.gif) 0 0 no-repeat;
}
.section-block .sb-studentwork {
background: transparent url(../images/headers/sb_studentwork.gif) 0 0 no-repeat;
}
.section-block .sb-abouttheauthors {
background: transparent url(../images/headers/sb_abouttheauthors.gif) 0 0 no-repeat;
}
.section-block .sb-archives {
background: transparent url(../images/headers/sb_archives.gif) 0 0 no-repeat;
}
.section-block .sb-blogroll {
background: transparent url(../images/headers/sb_blogroll.gif) 0 0 no-repeat;
}
.section-block .sb-categories {
background: transparent url(../images/headers/sb_categories.gif) 0 0 no-repeat;
}
.section-block .sb-meta {
background: transparent url(../images/headers/sb_meta.gif) 0 0 no-repeat;
}
.section-block .sb-pages {
background: transparent url(../images/headers/sb_pages.gif) 0 0 no-repeat;
}
.section-block.header span {
font-weight: normal;
text-transform: none;
display: block;
padding: 5px 0 2px;
color: #999;
}
.section-block ul {
margin: 0;
padding: 0;
list-style: none outside;
}
.section-block li {
background: transparent url(../images/icons/li_arrow_dark.gif) 4px 0.7em no-repeat;
padding: 0.2em 0 0.2em 18px;
margin: 0;
}
.section-block li.website {
background: transparent url(../images/icons/grid_icon_sb.gif) 0 0.4em no-repeat;
}
.section-block li.pdf {
background: transparent url(../images/icons/pdf_icon_sb.gif) 0 0.4em no-repeat;
}
.section-block li.audio {
background: transparent url(../images/icons/mp3_icon_sb.gif) 1px 0.4em no-repeat;
}
.section-block li.download {
background: transparent url(../images/icons/download_icon_sb.gif) 0px 0.4em no-repeat;
}
.section-block p {
margin-bottom: 0.3em;
}
#content-main .section-block li a:link, #content-main .section-block li a:visited {
text-decoration: none;
color: #333;
}
#content-main .section-block li a:hover {
text-decoration: underline;
color: #666;
}
.section-block .extension {
}
/* Project Images nav */
.project-images {
margin: 0 0 8px 0;
position: relative;
}
.project-images .credit {
font-size: 0.8em;
color: #666;
text-align: right;
line-height: 0.8em;
padding-right: 2px;
}
.project-images ul {
margin: 0 0 2px 0;
padding: 0;
list-style: none outside;
height: 1.2em;
}
.project-images li {
width: auto;
float: left;
display: inline;
margin: 0 1px 0 0;
}
.project-images ul a {
display: block;
padding: 2px 5px;
margin: 0;
line-height: 1;
font-size: 0.86em;
cursor: pointer;
}
.project-images ul a:link, .project-images ul a:visited {
background: #fff;
color: #999;
text-decoration: none;
}
.project-images ul a:hover, .project-images ul a:active {
/* background-color: #FFC300; / This triggers the guillotine bug! */
color: #000;
text-decoration: none;
}
#project-image-container {
height: 180px;
clear: both;
}
#project-image-container a {
position: relative;
cursor: pointer;
top: 0;
left: 0;
color: #000 !important;
text-decoration: none;
}
#project-image-container a img {
position: absolute;
z-index: 5;
border: solid 1px #999;
}
#project-image-container a div { /* The transparent, 'Click to enlarge' div */
position: absolute;
z-index: 10;
height: 20px;
top: 139px;
left: 1px;
width: 237px;
padding: 8px;
background-color: #ccc;
text-align: center;
opacity: 0.6;
font-weight: bold;
}
#popup {
margin: 0px auto;
padding: 0 15px 0 15px;
background-color: #fff;
text-align: left; /* Normalize alignment; unfix all browsers from fix in IE stylesheet */
}
#popup-content {
font-size: 1.4em;
color: #666;
}
#popup-content img {
border: 1px solid #999;
}
#popup-content a, #popup-content a:link, #popup-content a:visited {
cursor: pointer;
color: #666;
}
#popup-content a:hover {
color: #999;
}
/* Right column */
#content code {
font-family: "Courier New", Courier, mono;
display: block;
margin: 8px 0 0 8px;
}
#content blockquote {
display: block;
margin: 8px 0 0 8px;
}
#content ol {
margin: 0 0 1em 0;
list-style: decimal outside;
padding: 0 0 0 2em;
}
#content ol li {
margin: 0 0 0.3em 0;
padding: 0;
}
/* Google maps API */
#about #gmap {
border: 1px solid #ccc;
width: 370px;
height: 370px;
margin-top: 13px;
margin-bottom: 15px;
}
/* Dark blue/purple section */
.blue {
background: #393454 url(../images/bg/blue_bgmiddle_section.gif) 0 0 no-repeat;
padding-top: 40px;
padding-bottom: 12px;
color: #ccc;
}
.blue a, .blue a:link, .blue a:visited {
color: #fff;
text-decoration: underline;
}
.raffi .blue, .tucker .blue {
background: transparent url(../images/bg/blue_bgtop_about.gif) 0 0 no-repeat;
padding-top: 50px;
padding-bottom: 0;
}
.blue .blue-inner { /* Only for Raffi and Tucker */
background: #393454;
padding-top: 0px;
padding-bottom: 12px;
}
.tucker .twoColumnRight.one-row {
height: 41em;
}
.raffi .twoColumnRight.one-row {
height: 40em;
}
/* =Homepage
----------------------
Blog styles, built to interface with Wordpress.
Notes:
---------------------- */
#home .blue {
background: #393454 url(../images/bg/blue_bgtop_home.gif) 0 0 no-repeat;
margin-top: -40px;
padding-top: 40px;
}
#home .blue a, #home .blue a:link, #home .blue a:visited {
color: #fff;
text-decoration: underline;
}
#home #image-container {
position: relative;
height: 24px; /* This height is relative to the height of the title images. */
margin-bottom: 6px;
}
#home #image-container .title-image {
position: absolute;
width: 184px;
background-color: #fff;
}
/* The left column content blocks on the home page. */
.home-block {
background-color: #514D68;
border: 1px solid #615D76;
margin: 0 0 2px 0;
padding: 10px;
color: #fff;
}
.home-block.header {
color: #ccc;
font-size: 0.92em;
padding-top: 6px;
padding-bottom: 5px;
margin: 0 0 2px 0;
border-top: none;
}
.home-block.header h4.home-news {
height: 12px;
overflow: hidden;
text-indent: -5000px;
width: 100px;
background: transparent url(../images/headers/home_news.gif) 0 0 no-repeat;
border: none;
padding: 0;
margin: 0;
}
#sunburst {
padding-left: 30px;
background: #514D68 url('../images/icons/sunburst.gif') 6px 0.75em no-repeat;
}
#grid {
padding-left: 30px;
background: #514D68 url('../images/icons/grid.gif') 11px 0.9em no-repeat;
}
.date {
font-size: 0.92em;
color: #999997;
}
.home-block.footer {
color: #ccc;
padding-top: 6px;
padding-bottom: 5px;
padding-left: 30px;
background: #514D68 url(../images/icons/li_arrow.gif) 14px 1.1em no-repeat;
}
#content-main .home-block a:link, #content-main .home-block a:visited {
text-decoration: none;
color: #fff;
}
#content-main .home-block a:hover {
text-decoration: underline;
color: #fff;
}
/* Homepage blog entry */
#blog-entry-header {
font-size: 0;
line-height: 1em;
}
#blog-entry-header img {
margin: 0 0 8px 0;
}
#blog-entry {
margin: 0;
padding: 0 0 2px 0;
/* width: 100%; */
}
#blog-entry .calendar {
float: left;
clear: none;
width: 66px;
height: 66px;
margin-top: 3px;
background: transparent url("../images/inline/calendar_empty.gif") no-repeat;
}
#blog-entry .calendar .month {
color: #999;
text-transform: uppercase;
font-size: 0.9em;
font-weight: bold;
border-bottom: 1px dotted #999;
width: 83%;
margin: 1px 0 0 7px;
}
#blog-entry .calendar .day {
color: #00B6CF;
font-size: 2.8em;
font-weight: bold;
margin: 4px 0 0 6px;
}
#blog-entry .calendar .day.single-digit {
margin-left: 18px;
}
#blog-entry .text {
float: left;
clear: none;
width: 78%;
margin-left: 4%;
color: #fff;
}
#blog-entry .author {
border-top: 1px solid #6F6C7F;
font-size: 0.9em;
color: #6F6C7F;
margin-top: 10px;
padding-top: 5px;
}
#blog-entry a:link, #blog-entry a:visited {
text-decoration: none;
color: #fff;
}
#blog-entry a:hover {
text-decoration: underline;
color: #fff;
}
/* =Blog
----------------------
Blog styles, built to interface with Wordpress.
Notes:
---------------------- */
#blog #header-content {
padding-top: 20px;
padding-bottom: 3px;
}
#blogcontent {
margin: 0 37px 0 0;
width: 370px;
float: right;
clear: none;
padding-top: 27px;
}
.post {
padding: 0;
margin: 0 0 2em 0;
}
.post .posttime {
color: #999;
text-transform: uppercase;
margin: 0 0 0.6em 0;
font-size: 0.92em;
}
#blog .post h2 {
text-transform: none;
font-size: 1.3em;
font-weight: bold;
padding: 0;
margin: 0 0 0.4em 0;
}
#blog .post p.excerpt {
float: right;
margin: 8px;
font-size: 1.2em;
font-weight: bold;
width: 70%;
padding: 3px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#blog .post img.float {
float: left;
margin: 4px 8px 4px 4px;
}
#blog #content .post h2 a, #blog #content .post h2 a:link, #blog #content .post h2 a:visited {
text-decoration: none;
color: #333;
}
#blog #content .post h2 a:hover, #blog #content .post h2 a:active {
text-decoration: underline;
color: #333;
}
.post .postmetadata {
border-top: dotted 1px #dadada;
border-bottom: solid 1px #dadada;
padding: 5px 0;
margin: 0 0 0 0;
line-height: 1.5;
}
.navigation {
margin: 0 0 1.5em 0;
}
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left
}
#blogsidebar {
margin: 7px 0 0 45px;
width: 254px;
float: left;
clear: none;
}
/* Search form */
#blog #searchform {
margin: 0 0 1em 0;
}
#searchform #s {
float: left;
width: 63%;
margin-right: 4%;
margin-top: 1px;
}
#searchform #searchsubmit {
float: left;
width: auto;
}
#searchform #searchsubmit:hover {
background: #FFC300;
color: #fff;
}
#blogsidebar ul {
margin: 0.5em 0 0 0;
padding: 0 0 0 0;
}
#blogsidebar li {
line-height: 1.5;
margin: 0 0 0.3em 0;
padding: 0;
}
#blogsidebar li h2 {
padding: 0 0 0.2em 0;
margin: 0;
}
#blogsidebar ul ul {
padding: 0 0 0 0em;
}
#blogsidebar h2 {
text-transform: none;
font-size: 1.2em;
}
#blogsidebar #authors li {
height: 32px;
padding: 8px 0 0 36px;
}
#blogsidebar #authors li.raffi {
background: transparent url('../images/inline/thumb_rk.gif') 0 0 no-repeat;
}
#blogsidebar #authors li.tucker {
background: transparent url('../images/inline/thumb_ts.gif') 0 0 no-repeat;
}
#blogsidebar #authors li.jessica {
background: transparent url('../images/inline/thumb_jf.gif') 0 0 no-repeat;
}
#blogsidebar #authors li.nayiri {
background: transparent url('../images/inline/thumb_nk.gif') 0 0 no-repeat;
}
#blogsidebar #authors li.jeremy {
background: transparent url('../images/inline/thumb_jc.gif') 0 0 no-repeat;
}
#blogsidebar #authors li.justin {
background: transparent url('../images/inline/thumb_js.gif') 0 0 no-repeat;
}
#blogsidebar #authors li.david {
background: transparent url('../images/inline/thumb_dm.gif') 0 0 no-repeat;
}
#blogsidebar #authors li.aaron {
background: transparent url('../images/inline/thumb_al.gif') 0 0 no-repeat;
}
#blogsidebar .section-block li {
background-position: 4px 0.5em;
padding: 0 0 0 18px;
}
/* =Footer
----------------------
Credit/footer styles: Usually the copyright/company info
Notes:
---------------------- */
#siteinfo {
width: 740px;
margin: 10px auto 0;
font-size: 1.1em;
padding: 0 0 10px 0;
}
#siteinfo-legal, #siteinfo-links {
display: block;
padding-left: 332px;
line-height: 1.5;
}
#siteinfo-legal { /* Usually the copyright notice */
color: #393454;
}
#siteinfo-links { /* Usually Terms, Privacy and Accessibility */
color: #fff;
}
#siteinfo-links a, #siteinfo-links a:link, #siteinfo-links a:visited {
text-decoration: none;
color: #fff;
}
#siteinfo-links a:hover, #siteinfo-links a:active {
text-decoration: underline;
color: #fff;
}
/* =Uni
----------------------
Universal styles: Styles that apply to elements found throughout the site
Notes:
The best example of this is the "clear" div
---------------------- */
.clear {clear: left}
.clear-right {clear: right}
.clear-both {clear: both}
.bold {font-weight: bold}
.em {font-style: italic}