/************************************************ * * File : css/global.css * Version : v1.0 * Date : Monday, 29 October 2007 * Email : JakeAlger@comcast.net * Website : JakeAlger.com * ************************************************ * Global style settings ************************************************/ @media screen { * { margin: 0; padding: 0; } html { background:#899099 url(../images/tt-html-bg.jpg) repeat-x; } body { text-align: center; font: 11px Arial, Tahoma, Verdana, sans-serif; color:#fff; } h1, h2 { text-indent: -9000px; } img { border: 0; vertical-align: bottom; } table { width: 100%; border-collapse: collapse; } a { text-decoration: none; overflow: hidden; } ul { list-style-type: none; } address { font-style: normal; } input { vertical-align: middle; } select { font-size: 0.85em; font-weight: normal; color: #12395A; } option { padding-left:5px; } textarea { font: 0.85em Helvetica, Arial, Verdana, sans-serif; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /************************************************ * DEBUG ************************************************/ #wrapper { padding-bottom:11px; margin:0 auto; text-align:left; width:886px; background: url(../images/tt-wrapper-bg.jpg) no-repeat 0 100%; } #container { width: 886px; float: left; padding:0 2px 25px 2px; background: url(../images/tt-container-bg.jpg) repeat-y; } #container h1 { height:87px; background: url(../images/tt-main-header.jpg) no-repeat; } #navigation { padding-top: 2px; height:25px; background: url(../images/tt-navigation-bg.gif) no-repeat; } #navigation ul { text-align:center; } #navigation ul li { margin-right:30px; display:inline; font-weight:bold; } #navigation ul li a { color:#fff; float: left; height: 23px; text-indent:-9000px; } #navigation ul li a.client { color:#fff; height: auto; margin: 5px 10px 0 0; float: right; text-indent: 0; } #navigation ul li a:hover { text-decoration:underline; } #navigation ul li a#home { margin-right: 193px; width: 39px; background: url(../images/HomeButton.jpg) no-repeat; } #navigation ul li a#company { width: 76px; background: url(../images/CompanyButton.jpg) no-repeat; } #navigation ul li a#examples { width: 80px; background: url(../images/ExampleButton.jpg) no-repeat; } #navigation ul li a#concept { width: 95px; background: url(../images/ConceptArtButton.jpg) no-repeat; } #navigation ul li a#services { width: 75px; background: url(../images/ServicesButton.jpg) no-repeat; } #navigation ul li a#contact { width: 72px; background: url(../images/ContactButton.jpg) no-repeat; } #navigation ul li a:hover#home { margin-right: 193px; width: 39px; background: url(../images/HomeButton_To_HoverState.gif) no-repeat; } #navigation ul li a:hover#company { width: 76px; background: url(../images/CompanyButton__To-Hover-State.gif) no-repeat; } #navigation ul li a:hover#examples { width: 80px; background: url(../images/ExampleButton_To-Hover-State.gif) no-repeat; } #navigation ul li a:hover#concept { width: 95px; background: url(../images/ConceptArtButton_To_Hover_State.gif) no-repeat; } #navigation ul li a:hover#services { width: 75px; background: url(../images/ServicesButton_To_HoverState.gif) no-repeat; } #navigation ul li a:hover#contact { width: 72px; background: url(../images/ContactButton_To_HoverState.gif) no-repeat; } #navigation ul li.selected a#company { width: 76px; background: url(../images/CompanyButton_HoverToSelectStat.gif) no-repeat; } #navigation ul li.selected a#examples { width: 80px; background: url(../images/ExampleButton_HoverToSelectState.gif) no-repeat; } #navigation ul li.selected a#concept { width: 95px; background: url(../images/ConceptArtButton_HoverToSelectState.gif) no-repeat; } #navigation ul li.selected a#services { width: 75px; background: url(../images/ServicesButton_HoverToSelectState.gif) no-repeat; } #navigation ul li.selected a#contact { width: 72px; background: url(../images/ContactButton_HoverToSelectState.gif) no-repeat; } #navigation ul li.selected a#home { width: 39px; background: url(../images/HomeButton_HoverToSelectState.gif) no-repeat; } #content { width: 882px; float: left; background:#35383d url(../images/tt-content-bg.jpg) no-repeat; } #content #home { padding:25px 0 0 158px; } #content #home p#welcome { line-height:17px; padding:13px 0 0px 0; width:515px; height:76px; background: url(../images/tt-welcome-bg.jpg) no-repeat; } #content #home ul { text-align:center; width:455px; } #content #home ul li a { margin:55px 0 0 90px; text-indent:-9000px; float:left; width:275px; height:71px; background: url(../images/tt-work-examples.jpg) no-repeat; } #content #about, #content #affiliations, #content #testimonials, #content #process { height: 100%; padding-top:42px; } #content #page-content #awards { margin-bottom: 15px; } #content #page-content #awards dl { line-height: 17px; height: 60px; padding: 5px 0 0 225px; } #content #page-content #awards dl dt { font-weight: bold; } #content #page-content #awards dl dd { font-weight: normal; } #content #page-content #awards dl dd a { color:#fff; } #content #subnavi { float:left; padding-right:1px; width:170px; height:302px; background: url(../images/tt-subnavi-bg.jpg) no-repeat 100% 0; } #content #subnavi ul { padding:20px 0 0 20px; text-align:right; } #content #subnavi ul li { text-transform: uppercase; font-style: italic; font-size: 9px; font-family: Verdana; display:block; font-weight:bold; height:21px; padding:2px 10px 0 0; } #content #subnavi ul li.selected { background: url(../images/tt-about-subselect.jpg) no-repeat 100% 0; } #content #subnavi ul li a { color:#fff; } #content #page-content { padding:20px; width:550px; float:left; } #content #page-content h3 { color:#ffca4a; text-transform: uppercase; margin-bottom: 12px; font-size:12px; } #content #page-content p { line-height:15px; } #content #page-content ul { margin-bottom:20px; } #content #page-content .testimonial { margin-top: 10px; } #content #page-content .testimonial dl { margin-top: 10px; font-family: Times New Roman; } #content #page-content .testimonial dl dt { font-size: 12px; } #content #page-content .testimonial dl dd { font-size: 12px; font-style: italic; } #content #page-content #services { margin:25px; } #content #page-content #services ul { margin:10px; } #content #page-content #services ul li { line-height:17px; display:block; padding-left:10px; background: url(../images/tt-services-bullet.jpg) no-repeat 0 7px; } #content #affiliations dl { height:65px; padding-left:100px; margin:0 0 25px 50px; } #content #affiliations dl dt { font-weight:bold; } #content #affiliations dl dd { margin-top:5px; } #content #affiliations dl dd a { color:#fff; } #content #affiliations dl#adch { background: url(../images/tt-adch-dl.jpg) no-repeat; } #content #affiliations dl#oih { background: url(../images/tt-oih-dl.jpg) no-repeat; } #content #affiliations dl#linkedin { background: url(../images/tt-linkedin-dl.jpg) no-repeat; } #content #contact { padding:48px 0 50px 200px; height:254px;} #content #contact h4 { font-size: 13px; font-family:Arial, Verdana, Tahoma; } #content #contact #box { width:225px; float: left; border-right:#fff 1px solid; margin-top:25px; } #content #contact #box div { margin-top:5px; float: left; } #content #contact #box label { width: 50px; float: left; font-weight:bold; } #content #contact #box input { width:160px; border:0; float: left; } #content #contact #box input.submit { width:67px; height:17px; } #content #contact #box textarea { font-size: 12px; width:155px; height:100px; } #content #contact #info { float:left; margin:65px 0 0 75px; } #content #contact #info dl { width: 174px; } #content #contact #info dl dt { line-height:17px; } #content #contact #info dl dd { color:#fff; text-align:right; font-weight:bold; } #content #contact #info dl dd a { color:#fff; font-size: 13px; } #content #concept-flash { height: 463px; padding:8px 0 25px 15px; } #content #examples { padding:8px 0 25px 54px; } #content #examples #top { padding-top:30px; } #content #examples #top #listing { width: 135px; padding:0 15px 0 0px; float: left; } #content #examples #top #listing h3 { text-transform: uppercase; text-align:right; font-size: 11px; font-family: tahoma, verdana; color:#fefffd; } #content #examples #top #listing ul { width: 135px; padding:10px 0 10px 0; } #content #examples #top #listing ul li { font-size: 11px; background: url(../images/tt-examples-normal.gif) no-repeat 100% 3px; padding-right: 13px; text-align: right; display: block; color:#9ca0a1; } #content #examples #top #listing ul li.selected { color:#f2c63f; background: url(../images/tt-examples-selected.gif) no-repeat 100% 3px; } #content #examples #top #listing ul li.selected a { color:#f2c63f; font-weight: bold; } #content #examples #top #listing ul li a { color:#9ca0a1; } #content #examples #top #project { width: 663px; background: url(../images/tt-examples-left-border.gif) no-repeat 0 0; padding-left: 15px; float: left; } #content #examples #top #project .row { width: 607px; float: left; display: block; } #content #examples #top #project #flash { float: left; width: 412px; } #content #examples #top #project #stills { width: 193px; margin-top:3px; float: left; } #content #examples #top #project #stills h4 { text-transform: uppercase; height: 14px; font-size: 11px; font-family: Tahoma, Verdana; text-align: center; background: url(../images/tt-examples-header.gif) no-repeat; } #content #examples #top #project #stills ul { width: 186px; padding-left: 7px; margin-top:8px; float: left; } #content #examples #top #project #stills ul li { display: inline; float: left; margin:0 0 0 3px; } #content #examples #top #project #pdetails { width: 200px; padding-top:5px; margin-top: 10px; float: left; } #content #examples #top #project dl { float: left; margin-top: 2px; color:#cdcccd; width: 200px; } #content #examples #top #project dl dt { font-weight:bold; padding-right: 5px; float: left; } #content #examples #top #project dl dd { font-weight:normal; float: left; } #content #examples #top #project #details { width: 321px; padding: 5px 0 5px 10px; margin:10px 0 0 5px; float: left; border-left: #24292f 1px solid; } #content #examples #top #project #details h4 { color:#cb9f3c; font-size: 11px; font-family: tahoma, verdana; } #content #examples #top #project #details p { color:#d6d5d6; } #bottom { float:left !important; float:; clear:left; margin:0 0 0 12px; width:859px; } }