pylons_app/public/css/style.css

/*-------[ 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%;
}