/* base.css */
/*
--------------------------
CSS RESET
--------------------------
*/
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, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;vertical-align: baseline;} :focus {outline: 0;} body {line-height: 1;color: black;background: white;} ol, ul {list-style: none;} table {border-collapse: separate;border-spacing: 0;} caption, th, td {text-align: left;font-weight: normal;}blockquote:before, blockquote:after, q:before, q:after {content: "";} blockquote, q {quotes: "" "";}
/*
--------------------------
BASIC STRUCTURE
--------------------------
*/
body {background-color: #292824; font: 1em/normal Georgia, serif; min-width: 940px;}
/*div#wrapper {width: 100%;}*//*no need for this*/
/* we need to get that border on the bottom and set widths of every container below */
/* change settings for div.wrapper at id level */
div.wrapper {width: 100%; border-bottom: 1px solid white; text-align: center;}
div#header {background-color: #bfc8bd;}
div#content {background-color: #f1eee1;}
div#news {background: #bc6932 url(../images/news-bg.gif) repeat-x; padding-top: 60px; border: none;}
div#page-title {background-color: #cec9b2;}
div#page-introduction {background-color: #bc6932;}
div#footer {background: #292824 url(../images/footer-bg.jpg) repeat-x; border: none;}
/* buckets for centering within the containers above */
div.bucket {width: 820px; margin: 0 auto; padding: 20px 10px; position: relative; text-align: left;}
div#header div.bucket {width: 840px; height: 70px; padding: 20px 0;}
div#page-title div.bucket {width: 840px; padding: 0;}
.clear {clear: both;}
div#work-slideshow {background-color: #cfc9b3; border: none;}
div#work-slideshow div.bucket {width: 940px; padding: 0; background: url(../images/work-slideshow-bg.jpg) no-repeat 50% 26px;}
div#work-slideshow h2 {padding: 30px 50px 0;}
div#work-slides {float: left;}
div.slide span.slide-info {width: 820px; height: 30px; background-color: black; font: 10px/10px Arial, sans-serif; color: white; padding-bottom: 0; position: absolute; left: 0; bottom: 0; filter:alpha(opacity=75); -moz-opacity:0.75; -khtml-opacity: 0.75; opacity: 0.75;}
div.slide span.slide-info span {float: left; padding: 10px;}
div.slide span.slide-info span.description {width: 680px; text-transform: uppercase; letter-spacing: 1px;}
div.slide span.slide-info span.description span {padding: 0; color: #51a4ac;}
div.slide span.slide-info span.more-work {width: 100px; text-align: right;}
div.slide span.slide-info span.more-work a {color: #999;}
div.slide {width: 820px; height: 452px; margin: 0 10px; border-bottom: 10px solid white; position: relative; float: left;}
/*
--------------------------
COLUMNS
--------------------------
*/
.column {float: left;}
.column.left {width: 580px; margin-right: 10px;}
.column.right {width: 210px;}
div#footer div.column.left {width: 560px;}
/*
--------------------------
FONTS/LINKS
--------------------------
*/
h1, h2, h3, h4, h5, h6 {}
h1 {}
h2 {padding-bottom: 10px;}
div#page-title div.bucket h2 {padding-bottom: 0; font: 82px/82px Arial, sans-serif; color: #459ea6; text-transform: uppercase; height: 70px; overflow: hidden; vertical-align: text-bottom;}
h3 {padding-bottom: 20px;}
h4 {font: 18px/normal Georgia, serif; margin-bottom: 20px;}
div#news div.column.left h4 {width: 350px; color: #ebd2c2;}
div#news div.column.left p {width: 350px;}
div#news div.column.left a {text-decoration: underline;}
h5 {padding-bottom: 20px;}
h6 {font: 13px/normal Georgia, serif; margin-bottom: 10px;}
div#news div.column.right h6 {color: #ebd2c2;}
div#news div.column.right a {text-decoration: underline;}
p {font: 12px/normal Georgia, serif; color: white; padding-bottom: 15px;}
p img {vertical-align: text-bottom;}
em {font-style: italic;}
strong {font-weight: bold;}
acronym{
border-bottom:1px dotted #333;
}
/* img replacement for headings or navigation */
span.img-text {position: absolute; top: -9999px;}
a {color: white;}
a:link, a:visited {text-decoration: none;}
a:active, a:hover, a.active {text-decoration: underline;}
div#footer p {color: #bab7af;}
div#footer p#company-tagline {font-size: 14px;}
div#footer p#company-info {margin-top: 10px;}
div#footer div.column.right p {padding-left: 20px;}
hr {display: block; clear: both; height: 1px; width: 100%; border: none; background: #adaba2; margin-bottom: 20px;}
/*
--------------------------
MAIN NAVIGATION
--------------------------
*/
h1#tdc-logo {width: 95px; height: 51px; position: absolute; left: 0; bottom: 0;}
h1#tdc-logo a {width: 95px; height: 51px; background-image: url(../images/nav-tdc.gif);}
ul#navigation {width: 306px; height: 18px; position: absolute; right: 0; bottom: 0;}
ul#navigation li {float: left; padding-left: 20px;}
ul#navigation li a {display: block; background-repeat: no-repeat; height: 18px; overflow: hidden;}
ul#navigation li a:hover, ul#navigation li a.active {background-position: 0 100%;}
ul#navigation li#work a {width: 68px; background-image: url(../images/nav-work.gif);}
ul#navigation li#about a {width: 77px; background-image: url(../images/nav-about.gif);}
ul#navigation li#contact a {width: 101px; background-image: url(../images/nav-contact.gif);}
/*
--------------------------
OTHER NAVIGATION
--------------------------
*/
/* use a.action for any links to achieve sliding doors effect */
a.action {display: block; overflow: hidden; background-repeat: no-repeat;}
a.action:link, a.action:visited {background-position: 0 0;}
a.action:hover, a.action.active {background-position: 0 100%;}
a#slide-next, a#slide-previous {width: 40px; height: 40px; float: left; position: relative; top: 205px;}
a#slide-next {background-image: url(../images/work-slideshow-next.gif); margin-left: 9px;}
a#slide-previous {background-image: url(../images/work-slideshow-previous.gif); margin-right: 10px;}
a#anchor-top {width: 40px; height: 40px; background-image: url(../images/anchor-top-bg.gif);}
/* icons - 17 x 17px */
a.icon-small {padding: 1px 0 4px 23px; background-repeat: no-repeat;}
a#twitter {background-image: url(../images/icon-twitter.gif);}
/*
--------------------------
WORK PAGE
--------------------------
*/
div.work-entry h3{
color: #514e47;
font:1.63em/normal Georgia, serif;
margin-bottom:1em;
padding:0;
}
div.work-entry h4 {font: .63em/normal Arial, sans-serif; color: #514e47; letter-spacing: 1px; text-transform: uppercase;}
div.work-entry a.work-thumb {display: block; width: 230px; height: 110px; overflow: hidden; border: 2px solid white; float: right; margin: 0 0 20px 20px; background-repeat: no-repeat;}
div.work-entry {padding-bottom: 20px;}
/*
--------------------------
CONTACT PAGE
--------------------------
*/
div#content p {font-family: Arial, sans-serif; font-size: .88em; color: #333; line-height: 1.75em; margin-bottom:1em; width: 540px;}
div#content p a {color: #333; text-decoration: underline;}
div#page-subtitle {background: #bc6932;}
div#page-subtitle div.image {float: left; margin: 0 20px 0 0;}
div#page-subtitle p {font: 1.13em/1.5em Arial, sans-serif; color: #cecaba; width: 540px; padding-bottom: 10px;}
div#content h4 {font: .81em/normal Arial, sans-serif; text-transform: uppercase; letter-spacing: 2px; font-weight: bold; padding-top: 10px;}
div#content-sidebar {width: 200px; float: right;}
div#content div#content-sidebar p {line-height: normal; font-size: .75em; width:200px;}
div#content div#content-sidebar img {margin-bottom: 5px;}
.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}
#tabs ul{
height:40px;
border-bottom:1px solid #BC6932;
margin-bottom:20px;
padding-left:20px;
width:820px;
}
#tabs ul li { float: left;
font:bold .88em Arial, sans-serif;
margin-right:40px;}
#tabs ul li a:link, #tabs ul li a:visited{
border-bottom:5px solid #CEC9B2;
border-bottom-width:0;
color: #CEC9B2;
display:block;
padding:10px 1px 15px;
text-transform:uppercase;
text-align:center;
}
#tabs ul li a:hover, #tabs ul li a:active{
border-color:#999;
border-bottom-width:5px;
color:#999;
padding-bottom:10px;
text-decoration:none;
}
#tabs ul li.ui-state-active a:link, #tabs ul li.ui-state-active a:visited{
border-color:#BC6932;
border-bottom-width:5px;
color:#BC6932;
padding-bottom:10px;
}
.ui-tabs-panel { padding: 20px; background-color: none;}
/*
--------------------------
BLOG PAGES
--------------------------
*/
div.blog-entry h3{
color: #514e47;
font:1.63em/normal Georgia, serif;
margin-bottom:1em;
padding:0;
}
div.blog-entry h3 a:link, div.blog-entry h3 a:visited {padding: 0; font: 1.63em/normal Georgia, serif; color: #514e47;text-decoration: underline;}
div.blog-entry h3 a:hover {text-decoration: none;}
#blog #content .bucket div.column{
margin-bottom:20px;
}
#blog #content .bucket div.column.primary{
float:left;
width:540px;
}
#blog #content .bucket div.column.primary img.blog-image{
margin-bottom:20px;
}
#blog #content .bucket div.column.primary p.next_prev{
color:#9e9a89;
font-size:.7em;
}
#blog #content .bucket div.column.primary p.next_prev a{
color:#9e9a89;
}
#blog #content .bucket div.column.primary p.next_prev span{
float:right;
}
#blog #content .bucket div.column.secondary{
background:#f4f1e8;
border-left:1px solid #fff;
float:right;
padding:0;
width:240px;
}
#blog #content .bucket div.column.secondary h4{
color:#9e9a89;
font-size:1.1em;
font-weight:normal;
letter-spacing:0;
padding:20px 20px 10px;
}
#blog #content .bucket div.column.secondary div.comment{
padding:10px 0;
}
#blog #content .bucket div.column.secondary div.comment.odd{
background:#e9e3c9;
}
#blog #content .bucket div.column.secondary div.comment.author{
background:#d6decc;
}
#blog #content .bucket div.column.secondary p, #blog #content .bucket div.column.secondary ul{
color:#333;
font:.7em Arial, sans-serif;
line-height:2em;
margin:0;
padding:10px 20px;
width:200px;
}
#blog #content .bucket div.column.secondary ul li{
list-style:disc;
margin-left:20px;
padding-bottom:10px;
}
#blog #content .bucket div.column.secondary ul a{
color:#333;
text-decoration:underline;
}
#blog #content .bucket div.column.secondary p.comment_heading{
color:#9e9a89;
}
.required{
color:#BC6932;
}
#blog #content .bucket div.column p.postinfo{
font-size:.7em;
}
#blog #content .bucket div.column .blog-entry p.postinfo{
border-top:1px solid #CEC9B2;
color:#599169;
font-size:.8em;
}
blockquote {font-family: Arial, sans-serif; font-size: .88em; color: #333; line-height: 1.75em; margin-bottom:1em; padding: 20px;background: #F4F1E8 none repeat scroll 0 0; border: 1px solid white;}
/*****************************************************************************
scalable Inman Flash Replacement (sIFR) version 3.
Copyright 2006 – 2008 Mark Wubben,
Older versions:
* IFR by Shaun Inman
* sIFR 1.0 by Mike Davidson, Shaun Inman and Tomas Jogin
* sIFR 2.0 by Mike Davidson, Shaun Inman, Tomas Jogin and Mark Wubben
See also and .
This software is licensed and provided under the CC-GNU LGPL.
See
*****************************************************************************/
@media screen {
.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;
}
}
@media print {
.sIFR-flash {
display : none !important;
height : 0;
width : 0;
position : absolute;
overflow : hidden;
}
.sIFR-alternate {
visibility : visible !important;
display : block !important;
position : static !important;
left : auto !important;
top : auto !important;
width : auto !important;
height : auto !important;
}
}
/*
Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active
so they only apply if sIFR is active. Make sure to limit the CSS to the screen
media type, in order not to have the printed text come out weird.
*/
@media screen {
/* Example:
.sIFR-active h1 {
font-family: Verdana;
visibility: hidden;
}
*/
.sIFR-active #blog h2, .sIFR-active #about h2, .sIFR-active #contact h2, .sIFR-active #work h2 {
visibility:hidden;
font-family:Arial;
line-height:1em;
margin:0;
padding:0;
}
}