/* --------------------------------------------------------------
Adapted by Carl Roose from
Blueprint CSS Framework Screen Styles
* Version: 0.6 (21.9.2007)
* Website: http://code.google.com/p/blueprintcss/
See Readme file in this directory for further instructions.
-------------------------------------------------------------- */
/*
@import 'lib/reset.css';
@import 'lib/typography.css';
@import 'lib/grid.css';
@import 'lib/forms.css';
*/
/* Plugins:
Additional functionality can be found in the plugins directory.
See the readme files for each plugin. Example:
@import 'plugins/buttons/buttons.css'; */
/* See the grid:
Uncomment the line below to see the grid and baseline. */
body.small-page #container.showgrid { background: url(../images/bg-grid-small-trans.png) 3em 0; }
body.large-page #container.showgrid { background: url(../images/bg-grid-large-trans.png) 3em 0; }
/* Misc classes and elements
-------------------------------------------------------------- */
/* Use a .box to create a padded box inside a column. */
.box {
padding: 1.5em;
margin-bottom: 1.5em;
background: #eee;
}
/* Use this to create a horizontal ruler across a column. */
hr {
background: #AAA;
color: #AAA;
clear: both;
float: none;
width: 100%;
margin: 0.5em 0 1.5em; /* bottom: 1.5em */
border: none;
/* height: 0.25em; */
height: 0.1em;
}
hr.space {
background: #fff;
color: #fff;
}
body.large-page div.colborder {
outline-right:1px solid #EEEEEE;
margin-right:17px;
padding-right:17px;
}
.clearfix { overflow: auto; } /* this makes floated DIVs inside a DIV.clearfix clear properly */
.hide { display: none; }
/* Site parameters: color key, grid size, etc.
Dark brown text:
Link colors: #XXXXXX (up) / #XXXXXX (over) / #XXXXXX (visited)
Menu background:
Top of page:
Buttons: #XXXXXX (bg) / #XXXXXX (outline)
*/
/* Reset styles, set sitewide defaults */
/* RESETS and BASELINE STYLES */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border:0 none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0;
padding:0;
vertical-align:baseline;
}
body {
background:#FFF none repeat scroll 0 0;
color:#555;
font-family:"Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:62.5%;
line-height:1.5;
margin:0;
padding:0;
}
table {
border-collapse:separate;
border-spacing:0;
}
caption, th, td {
font-weight:400;
text-align:left;
}
blockquote:before,
blockquote:after,
q:before, q:after {
content:"";
}
blockquote, q { quotes:"" ""; }
blockquote.left-border { font-size: 110%; color: #333; padding-left: 18px; border-left: 1px solid #DDD; }
a img { border:medium none; }
a:active, :focus { outline: none; -moz-outline-style: none; } /* Hides dotted outlines around clicked links */
.strike {
text-decoration: line-through;
}
h1 { font-size: 720%; font-weight: normal; }
h2 { font-size: 280%; font-weight: normal; }
h3 { font-size: 210%; font-weight: normal; }
h4 { font-size: 180%; font-weight: bold; }
h5 { font-size: 160%; font-weight: normal; font-style: italic; }
h6 { font-size: 140%; font-weight: normal; text-transform: uppercase; letter-spacing: 0.2em; }
/* body.large-page h1, */
body.large-page h2,
body.large-page h3,
body.large-page h4,
body.large-page h5,
body.large-page h6,
body.large-page p,
body.large-page #content-columns {
margin-bottom: 21px; /* 21px */
}
ul.nobullets {
list-style-image:none;
list-style-position:inside;
list-style-type:none;
}
ul.nobullets li {
padding-left:1em;
text-indent:-1em;
}
.small { font-size:80%; }
/* LINK STYLES */
/* Basic */
a { text-decoration:underline; }
a:link { color:#369; }
a:visited { color:#656; }
a:hover { color:#039; }
/* Nav triggers */
#nav a { text-decoration: none; }
#nav a:link,
#nav a:visited,
#nav a:hover { color:#960; }
/* White style */
#top span.corner a { text-decoration: none; font-size: 140%; line-height: 1; }
#top span.corner a:link,
#top span.corner a:visited { color: #F4ECC5; }
#top span.corner a:hover { color: #FFF; }
/*
#top span.corner a:hover:before { content: "x "; }
*/
#nav ul {
position: absolute;
top: 11.75em;
list-style: none;
line-height: 2;
font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 120%;
}
/* PAGE LAYOUT */
html, body {
/* height:100%; */
}
#container {
height:auto;
margin:0 auto;
min-height:100%;
position:relative;
voice-family:inherit;
padding: 0 3em;
}
body.large-page #container { padding-top: 42px; }
body.large-page #header { padding-top: 10px; }
#top {
width: 100%;
font-size: 100%;
height: 4em;
background-color: #D0C7A3;
border-bottom: 0.5em solid #F4ECC5;
}
#top.message-off {
height: 1em;
}
#top span.corner {
position: absolute;
right: 0;
font-size: 120%;
font-weight: bold;
color: #FFF;
padding: 0.875em 1em;
}
#top .message-title {
padding-right: 0.5em;
}
div#message {
padding: 1em 3em 0.5em;
background: transparent url(../images/message-icon-trans.png) no-repeat scroll 3em 1em;
}
div#message p {
float: left;
font-size: 120%;
text-indent: 2.5em;
}
div#message p.message-link {
float: right;
text-indent: 0;
}
#home .column .photo {
margin-bottom: -2em; /* pulls footer up flush with large homepage images */
}
p.thumb {
clear: both;
margin-bottom: 21px;
overflow: auto;
}
p.thumb img {
float: left;
margin-right: 36px;
}
#header,
#page-title,
#footer { } /* font-family: "Arno Pro Display", Palatino,"Book Antiqua",Georgia,Cambria,"Lucida Bright",serif; */
#header h1 { color: #C1BFBC; position: relative; left: -0.05em; }
#nav { margin-top: 5.2em; color: #333; }
#tagline { margin-top: 5.2em; color: #333; position: relative; top: 0.9em;}
#page-title { font-style: italic; color: #D0C7A3; margin-bottom: 13px; } /* color: #69C; */
#footer { font-size: 120%; color: #999; }
/*
- images
- h1, h2, h3 etc.
- form elements
- sIFR styles
- clearfix
-
*/
/* A container should group all your columns. */
div#container,
div#message {
margin: 0 auto;
/* position: absolute;
overflow: auto; should make nested floats clear properly? */
/* outline: 1px solid #eee; for debugging */
}
/* each column floats left and each except the last gets a gutter after it: */
div#content-columns > div,
.column { float: left; }
/*
div#content-columns { padding-bottom: 21px; }
*/
div#page {
}
/* SPECIFIC PAGE STYLES */
/* Homepage */
.homepage-bg {
background: transparent url(../images/carltoon-green-w-gradient.png) no-repeat top left;
height: 450px;
padding: 70px 0 30px;
}
.homepage-bg p { color: #CCC; }
.homepage-bg .intro { font-size: 150%; color: #FFF; font-weight: normal; font-family: Myriad, "Myriad Pro", "Lucida Grande", "Lucida Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.homepage-bg a:link,
.homepage-bg a:visited,
.homepage-bg a:hover { color: white; }
.initials {
float: right;
background: transparent url(../images/home-initials-alpha.png) no-repeat top left;
height: 40px;
width: 80px;
}
/* Portfolio page */
.client { color: #111; }
.client strong { font-size: 100%; }
/* Contact page */
#map {
height: 24em;
outline: 1px solid #999;
margin-top: -4.5em; /* pulls up column on Contact page */
}
#contact-form {
margin-top: -1.5em;
}
#contact-form #email-field {
width: 60%;
}
#contact-form input[type="text"],
#contact-form textarea {
border: 1px solid #C3BEAA;
font-size: 100%;
padding: 0.25em;
margin: 0.3em 0 0.86em;
width: 96%;
}
#contact-form textarea {
height: 14.5em; /* 12.33em */
font-size: 120%; /* 140% */
}
#contact-form textarea:focus,
#contact-form input:focus {
outline: 1px solid #D0C7A3;
}
#contact-form input.submit-button {
/*
width: 100px;
float: right;
*/
margin-top: 1.2em;
font-size: 100%;
padding: 0.2em 0.8em;
background-color: #402F20;
border: 3px solid #FFCC33;
color: #F4ECC5;
cursor: pointer;
}
#contact-form input.submit-button:hover {
background-color: #523018;
color: white;
}
label {
}
/* WHY page */
#why { font-size: 110%; font-family: Myriad, "Myriad Pro", "Lucida Grande", "Lucida Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333; }
#why-sidebar h5 { font-family: Myriad, "Myriad Pro", "Lucida Grande", "Lucida Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-style: normal; }
/* #why-sidebar { font-size: 90%; border-left: 1px solid #DDD; padding-left: 1.5em; } */
.why-bg {
background: transparent url(../images/cluck-trans.png) no-repeat top left;
height: 450px;
padding: 70px 0 30px;
}
#why .intro { font-size: 120%; color: #222; }
#why .initials { width: 150px; }
#why h4 { margin-bottom: 0; font-size: 140%; color: #3C2215; }
#why blockquote { padding: 1.5em 1.5em 1em; background-color: #F4ECC5; -moz-border-radius: 1em; margin-bottom: 2em; color: #3B362D; }
#why-sidebar {
border-left: 1px solid #DDDDDD;
font-size: 90%;
color: #555;
/*
margin-left: -67px;
padding-left: 67px;
*/
margin-left: -67px;
padding-left: 25px;
}
#why-sidebar ul { list-style-type: none; }
#why-sidebar li { padding: 1em 0 1em 67px; background: transparent url(../images/cluck-item-1.png) no-repeat 0 20px; }
#why-sidebar li.item-2 { background-image: url(../images/cluck-item-2.png); }
#why-sidebar li.item-3 { background-image: url(../images/cluck-item-3.png); }
#why-sidebar li.item-4 { background-image: url(../images/cluck-item-4.png); }
#why-sidebar h5.quote { color: #800; }
#why-sidebar h5.list { margin-top: 2em; color: #250; }
#why-sidebar h5.download { margin-top: 3em; color: #303; }
#why-sidebar .attribution { text-align: right; }
/*
EXAMPLE:
First column
Second column
Third column
*/
/* Set column widths as styles... */
/*
SMALL PAGE
785px wide; 85px column 15px gutter; 18px line height, font size 12px
*/
body.small-page { }
body.small-page div#container,
body.small-page div#message { width: 785px; }
body.small-page div#content-columns { font-size: 120%; }
body.small-page .column { float: left; margin-right: 15px; }
body.small-page .span1 { width: 85px; }
body.small-page .span2 { width: 185px; }
body.small-page .span3 { width: 285px; }
body.small-page .span4 { width: 385px; }
body.small-page .span6 { width: 585px; }
body.small-page .span8,
body.small-page div.span8 { width: 785px; margin-right: 0; }
body.small-page .append1 { padding-left: 85px; }
body.small-page .append2 { padding-left: 185px; }
body.small-page .append3 { padding-left: 285px; }
body.small-page .append4 { padding-left: 385px; }
body.small-page .append6 { padding-left: 585px; }
/*
LARGE PAGE:
926px wide; 100px column 18px gutter; 21px line height; font size 14px
*/
body.large-page { }
body.large-page div#container,
body.large-page div#message { width: 926px; }
body.large-page div#content-columns { font-size: 130%; } /* 140% */
body.large-page .column { float: left; margin-right: 18px; }
body.large-page .span1 { width: 100px; }
body.large-page .span2 { width: 218px; }
body.large-page .span3 { width: 336px; }
body.large-page .span4 { width: 454px; }
body.large-page .span5 { width: 572px; }
body.large-page .span6 { width: 690px; }
body.large-page .span8,
body.large-page div.span8 { width: 926px; margin-right: 0; }
body.large-page .append1 { padding-left: 118px; }
body.large-page .append2 { padding-left: 236px; }
body.large-page .append3 { padding-left: 354px; }
body.large-page .append4 { padding-left: 472px; }
body.large-page .append6 { padding-left: 708px; }
body.large-page .last { margin-right: 0; }
/*
"Rounded" corners on small buttons (1px notch)
adapted from The CSS Guy's method:
http://www.askthecssguy.com/2008/03/one_pixel_notched_corners_as_u.html
*/
.rounded {
display: table; /* my addition; containing element must be limited width */
font: inherit;
font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.rounded a,
.rounded a span {
display:block;
position:relative;
border-style:solid;
}
.rounded a {
border-width:1px 0;
text-decoration:none;
margin:4px 1px;
}
.rounded a span {
margin:0 -1px;
border-width:0 1px;
padding: 0 6px 2px;
}
/* COLORS */
/* button up */
.rounded a, /* top/bottom */
.rounded a span { border-color: #AAA; } /* left/right */
.rounded a span { background-color: #AAA; } /* bg */
/* button over: */
.rounded a:hover, /* top/bottom */
.rounded a:hover span { border-color: #999; } /* left/right */
.rounded a:hover span { background-color: #999; } /* bg */
/* text */
.rounded a { color:#FFF; } /* up */
.rounded a:hover { color:#FFF; } /* over */
/* --------------------------------------------------------------
sIFR screen styles
-------------------------------------------------------------- */
/*=:project
scalable Inman Flash Replacement (sIFR) version 3.
=:file
Copyright: 2006 Mark Wubben.
Author: Mark Wubben,
=:history
* IFR: Shaun Inman
* sIFR 1: Mike Davidson, Shaun Inman and Tomas Jogin
* sIFR 2: Mike Davidson, Shaun Inman, Tomas Jogin and Mark Wubben
=:license
This software is licensed and provided under the CC-GNU LGPL.
See
*/
/*---- sIFR ---*/
.sIFR-flash {
visibility: visible !important;
margin: 0;
padding: 0;
}
.sIFR-replaced, .sIFR-ignore {
visibility: visible !important;
}
.sIFR-alternate {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
overflow: hidden;
}
.sIFR-replaced div.sIFR-fixfocus {
margin: 0pt;
padding: 0pt;
overflow: auto;
letter-spacing: 0px;
float: none;
}
.sIFR-dummy {
width: 0px;
height: 0px;
margin-left: 42px !important;
z-index: 0;
}
/* Tuning of sIFR-enabled page layout */
.sIFR-active body.large-page #header {
padding-top: 1px;
}
/* Tuning of specific fonts */
.sIFR-active body.large-page #header h1 {
line-height: 1em;
font-size: 72px;
padding-top: 31px;
}
.sIFR-active body.large-page #nav h3 {
line-height: 1em;
font-size: 24px;
padding-top: 14px;
}
.sIFR-active body.large-page #page-title h2 {
line-height: 1em;
font-size: 36px;
position: relative;
left: -3px;
padding-bottom:16px;
padding-top:5px;
}
/*
body.large-page.sIFR-active #header {
padding-top: 11px;
}
body.large-page.sIFR-active #nav {
margin-top: 35px;
}
*/
/*
.sIFR-active h1 {
visibility: hidden;
font-family: Verdana;
line-height: 1em;
font-size: 18px;
}
*/