/*-------[ general ]---------------------------------*/ body { background:#f0f0f0; font:14px Arial, Tahoma, Sans-Serif; color:#444; margin:30px 0 30px 0; padding:0; line-height:21px; } p,ul,ol,h1,h2,h3,h4,blockquote,fieldset,form { margin:0; padding:0; } a { outline:none; text-decoration:none; color:#296785; } a:hover { color:#000; } img { border:none; } .left-img { float:left; border:1px solid #ccc; margin:5px 10px 0 0; padding:5px; } .right-img { float:right; border:1px solid #ccc; margin:5px 0 0 10px; padding:5px; } blockquote { background:url(/images/blockquote.gif) no-repeat top left; padding:10px 0 0 40px; font-style:italic; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /*-------[ top-glow (just a little beauty! i know it maybe against semantics but i can't find a good solution) ]---------------------------------*/ #top-glow { width:940px; height:20px; background:url(/images/top-glow.jpg) no-repeat; margin:0 auto; } /*-------[ container ]---------------------------------*/ #container { width: 900px; padding:0 20px 0 20px; margin:0 auto; background:url(/images/container-bg.jpg) repeat-y; } /*-------[ header ]---------------------------------*/ #header { width:900px; height:120px; background:url(/images/header.jpg) repeat-y; border-top:1px solid #fff; } #logo { width:263px; height:40px; position:absolute; margin:37px 0 0 30px; } #logo a { background:url(/images/logo.png) no-repeat; text-indent:-9999pt; display:block; width:263px; height:40px; } /*-------[ navigation ]---------------------------------*/ #navigation { width:900px; height:44px; background:url(/images/navigation.jpg) no-repeat; } #navigation ul { list-style:none; padding-left:30px; } #navigation li { float:left; } #navigation li a { display:block; text-indent:-9999pt; margin:16px 17px 0 0; } #navigation li a:hover, #navigation a.selected { background-position:0 -10px; } #home-button { width:36px; height:10px; background:url(/images/home-button.png) no-repeat; } #about-button { width:45px; height:10px; background:url(/images/about-button.png) no-repeat; } #services-button { width:64px; height:10px; background:url(/images/services-button.png) no-repeat; } #portfolio-button { width:74px; height:10px; background:url(/images/portfolio-button.png) no-repeat; } #blog-button { width:34px; height:10px; background:url(/images/blog-button.png) no-repeat; } #contact-button { width:64px; height:10px; background:url(/images/contact-button.png) no-repeat; } /*-------[ featured ]---------------------------------*/ #featured { width:840px; background:url(/images/featured.jpg) repeat-y; border-bottom:1px solid #4A4C4E; padding:30px; color:#fff; } #featured-title { text-indent:-9999pt; background:url(/images/featured-title.png) no-repeat; height:31px; margin-bottom:20px; } #featured-left { float:left; width:393px; margin-right:50px; } #featured-right { float:right; width:385px; height:205px; display:block; border:1px solid #11879C; padding:5px; background:#fff; } #featured-right a { margin:5px 0 0 5px; } #featured-buttons { margin-top:20px; } #featured-buttons a { float:left; display:block; width:143px; height:47px; text-indent:-9999pt; margin-right:25px; } #featured-buttons a:hover { background-position:0 0; } #learn-more { background:url(/images/learn-more.png) 0 -47px no-repeat; } #our-services { background:url(/images/our-services.png) 0 -47px no-repeat; } /*-------[ main ]---------------------------------*/ #main { width:840px; padding:30px 30px 15px 30px; } /*-------[ sidebar ]---------------------------------*/ #sidebar { float:right; width:250px; } .sidebox { width:250px; border:1px solid #b1b1b1; margin-bottom:30px; background:#fafafa; color:#5d5d5d; } .sidebox-content { padding:15px; } .sidebox h2 { text-indent:-9999pt; height:40px; display:block; border-bottom:1px solid #B1B1B1; } .sidebox p { margin-bottom:10px; } .sidebox ul { list-style:none; } .sidebox li { margin-bottom:10px; } .sidebox li:last-child { margin-bottom:0; } .list { list-style:square !important; margin-left:15px; } .list li { margin-bottom:3px; } #recent-posts-title { background:url(/images/recent-posts-title.jpg) no-repeat; } #recent-posts a { color:#5D5D5D; } #recent-posts a:hover { color:#296785; } .more-link { color:#296785; } #clients-title { background:url(/images/clients-title.jpg) no-repeat; } #location-title { background:url(/images/location-title.jpg) no-repeat; } #categories-title { background:url(/images/categories-title.jpg) no-repeat; } /*-------[ search form ]---------------------------------*/ #searchform { margin-bottom:15px; } #searchform fieldset { border:none; } #search-button { padding:5px 0 5px 0; background:#e3e3e3; border:none; color:#444; width:60px; text-align:center; float:right; display:block; } #search-field { border:1px solid #ccc; background:#F2F2F2; padding:5px; color:#444; width:170px; float:left; display:block; } #search-field:focus { border:1px solid #aaa; background:#fff; } /*-------[ content ]---------------------------------*/ #content { width:560px; float:left; margin-right:30px; } #content h2 { border-bottom:1px solid #ccc; padding-bottom:3px; margin-bottom:15px; font:20px Arial, Tahoma, Sans-Serif; } #content p { margin-bottom:15px; } #content h3, #content h4, #content h5, #content h6 { margin-bottom:10px; color:#1B7883; font-family:Arial, Tahoma, Verdana, Sans-Serif; } #content h3 { font-size:18px; } #content h4 { font-size:16px; } #content h5 { font-size:14px; } #content h6 { font-size:13px; } #content ul { margin:10px 0 15px 30px; } #content ol { margin:10px 0 15px 30px; } #content table { border-left:1px solid #ccc; border-top:1px solid #ccc; margin-bottom:15px; width:100%; } #content td, #content th { border-right:1px solid #ccc; border-bottom:1px solid #ccc; padding:5px; font-size:13px; text-align:left; } #content th { font-size:13px; color:#000; font-weight:normal; background:#f2f2f2; } .br { /* use this for an extra 10px space if needed */ display:block; margin:10px; } .bullet { list-style-image:url(/images/bullet.gif) !important; } /*-------[ blog styles ]---------------------------------*/ .post { margin-bottom:30px; } h2.post-title { margin-bottom:5px !important; } .post-meta { font-size:12px; margin-bottom:10px; } .post-comments { background:url(/images/speech_bubble_48.png) no-repeat; padding:11px 0 15px 0; width:48px; display:block; text-align:center; font-size:18px; color:#444; position:absolute; margin:-28px 0 0 514px; } .post-comments:hover { color:#000; } #previous-next { margin-bottom:15px; } #next { float:right; } #prev { float:left; } /*-------[ front page ]---------------------------------*/ .frontpage-box { margin-bottom:10px; } .frontpage-box-img { float:left; width:48px; height:48px; margin:15px 22px 0 0; } .frontpage-box-text { float:right; width:490px; } .frontpage-box h3 { font:16px Arial, Tahoma, Sans-Serif !important; margin-bottom:5px !important; color:#1B7883 !important; } /*-------[ portfolio ]---------------------------------*/ #portfolio { width:840px; } #portfolio h2 { border-bottom:1px solid #ccc; padding-bottom:3px; margin-bottom:30px; font:20px Arial, Tahoma, Sans-Serif; } ul.work-gallery { list-style:none; width:870px; position:relative; } .work-gallery li { float:left; width:260px; margin:0 30px 0 0; min-height:220px; font-size:12px; line-height:19px; } a.work-thumb { display:block; border:1px solid #ccc; padding:5px; width:248px; height:138px; } a.work-thumb:hover { border:1px solid #999; } .work-name { padding:2px 5px 2px 7px; background:#fff; position:absolute; margin:-40px 0 0 1px; } .work-description { margin-top:5px; } /*-------[ contact form ]---------------------------------*/ #contactform fieldset { border:none; } #contactform input { width:170px; } #contactform textarea { width:450px; height:170px; } #contactform input, #contactform textarea { display:block; border:1px solid #ccc; padding:5px; background:#f2f2f2; font:12px Arial, Tahoma, Sans-Serif; color:#444; margin-bottom:10px; } #contactform input:focus, #contactform textarea:focus { border:1px solid #aaa; background:#fff; } .send { width:80px !important; background:#eee; border:1px solid #bbb !important; color:#444 !important; cursor:pointer; } .send:hover { border:1px solid #777 !important; } /*-------[ footer ]---------------------------------*/ #footer { padding:15px 30px 15px 30px; background:#f2f2f2; border-top:1px solid #bbb; font-size:13px; } #footer p { float:left; } #footer ul { float:right; list-style:none; } #footer li { float:left; margin-left:15px; } /*-------[ bottom glow (just a little beauty! i know it maybe against semantics but i can't find a good solution) ]---------------------------------*/ #bottom-glow { background:url(/images/bottom-glow.jpg) no-repeat; width:940px; height:22px; margin:0 auto; } /*-------[ browser hacks ]---------------------------------*/ .ie6 #navigation li a { overflow:hidden; } .ie6 #navigation li a:hover, .ie6 #navigation a.selected, .ie7 #navigation li a:hover, .ie7 #navigation a.selected { margin-top:17px; } .ie6 #featured { padding:30px 30px 0 30px; } .ie6 #featured-buttons a:hover, .ie7 #featured-buttons a:hover { background-position:0 0; margin-top:-1px; } .ie6 .work-gallery { margin-right:-60px; } .ie6 .work-gallery li { margin-bottom:30px; } .ie6 .frontpage-box, .ie6 #footer, .ie7 .frontpage-box, .ie7 #footer { height:1%; }