/*
Theme Name: Hail Design
Theme URI: http://www.haildesign.com.au/
Description: Custom design for Hail Design.
Version: 1.0
Author: Samuel Richardson
Author URI: http://www.richardson.co.nz
Tags: Hail, design, green, dark
*/
/* Begin Typography & Colors */
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
background: #2d2d2d url('images/background_page.jpg') center top no-repeat;
margin : 0;
padding : 0;
}
/* fonts */
h1 {
font-size : 32px;
color : #646463;
font-weight : normal;
margin : 32px 0 20px 0;
}
h2 {
font-size : 12px;
color : #656565;
margin : 18px 0;
}
h2 a {
color : #656565;
}
h6 {
font-size : 12px;
color : #464646;
margin : 18px 0 4px 0;
}
h6 a {
color : #656565;
}
h3 {
font-size : 11px;
color : #c0d378;
margin : 18px 0;
font-weight : normal;
}
p {
font-size : 11px;
color : #afafaf;
margin : 18px 0;
}
h9 {
font-size : 11px;
color : #7f7f7f;
margin : 18px 0;
}
a {
color : #98b832;
text-decoration : none;
}
a img {
border : none;
}
/* layout */
#page {
width : 880px;
margin : 0 auto;
padding : 40px;
}
#header {
position : relative;
width : 100%; /* give hasLayout*/
height : 70px;
}
#header .logo {
}
#header .vcard {
position : absolute;
top : 0;
left : 630px;
}
#header .vcard .org {
font-size : 10px;
color : #94b733;
font-weight : bold;
}
#header .vcard .tel {
font-size : 24px;
color : #fff;
margin-bottom : 5px;
background : url('images/icon_phone.png') 0 10px no-repeat;
padding-left : 15px;
position : relative;
left : -15px;
letter-spacing : -1px;
}
#header .vcard .tel.sIFR-replaced {
margin-bottom : -2px;
}
#header .vcard .adr {
font-size : 10px;
color : #787878;
background : url('images/icon_mail.png') 0 4px no-repeat;
padding-left : 17px;
position : relative;
left : -17px;
}
#header .vcard .email {
font-size : 10px;
font-weight : bold;
color : #787878;
border-bottom : 1px dotted #989898;
text-decoration : none;
}
#subheader {
width : 880px;
height : 45px;
background : url('images/background_subheader.png') no-repeat;
position : relative;
}
#subheader ul.site_pages {
list-style : none;
margin : 0 0 0 22px;
padding : 0;
}
#subheader ul.site_pages li {
font-size : 12px;
font-weight : bold;
line-height : 45px;
float : left;
margin-right : 22px;
}
#subheader ul.site_pages li.home a {
text-indent : -10000px;
width : 16px;
height : 45px;
background : url('images/icon_home.png') 0 center no-repeat;
display : block;
overflow : hidden;
}
#subheader ul.site_pages li a {
color : #fff;
text-decoration : none;
}
#subheader ul.site_pages li a:hover {
text-decoration : underline;
}
#subheader .tagline {
margin : 0;
line-height : 45px;
color : #fff;
position : absolute;
left : 630px;
font-size : 12px;
}
#subheader .tagline a {
color : #fff;
}
#subheader .tagline a:hover {
text-decoration : underline;
}
#content {
}
#content #hero {
margin-bottom : 10px;
width : 880px;
overflow : hidden;
}
#content #hero img {
display : block;
}
#content .introduction {
background : url('images/divider.png') center top no-repeat;
width : 100%;
position : relative;
margin : 0 0 15px 0;
}
#content .introduction .inner {
background : url('images/divider.png') center bottom no-repeat;
padding : 28px 0;
}
#content .introduction p.quote {
font-family : 'Corpid Light', 'Lucida Grande', Verdana, Arial, Sans-Serif;
margin : 0;
font-size : 24px;
color : #fff;
width : 67%;
}
#content .introduction p.quote strong {
color : #b4cb64;
font-family : 'Corpid Heavy', 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-weight : bold;
}
#content .introduction p.author {
margin : 9px 0 -15px 0;
font-size : 10px;
text-transform : uppercase;
}
#content .introduction p.author strong {
color : #b4cb64;
}
#content .introduction ul.controls {
text-indent : -10000px;
overflow : hidden;
position : absolute;
right : 0;
top : 50%;
margin : -34px 0 0 0;
list-style : none;
width : 182px;
}
#content .introduction ul.controls li {
width : 69px;
height : 69px;
float : right;
margin-left : 22px;
}
/* button - get estimate */
#content .introduction ul.controls li.getestimate a {
width : 69px;
height : 69px;
background : url('images/button_estimate_off.png') center bottom no-repeat;
display : block;
}
#content .introduction ul.controls li.getestimate a:hover {
background : url('images/button_estimate_on.png') center bottom no-repeat;
}
/* button - next project */
#content .introduction ul.controls li.nextproject a {
width : 69px;
height : 69px;
background : url('images/button_next_off.png') center bottom no-repeat;
display : block;
}
#content .introduction ul.controls li.nextproject a:hover {
background : url('images/button_next_on.png') center bottom no-repeat;
}
/* button - prev project */
#content .introduction ul.controls li.prevproject a {
width : 69px;
height : 69px;
background : url('images/button_prev_off.png') center bottom no-repeat;
display : block;
}
#content .introduction ul.controls li.prevproject a:hover {
background : url('images/button_prev_on.png') center bottom no-repeat;
}
#content .detailed {
width : 100%;
overflow : hidden; /* contain floats */
}
#content .detailed .aside {
float : left;
width : 220px;
padding-right : 20px;
}
#content .detailed .aside .services {
}
#content .detailed .aside .services h2 {
margin : 0;
}
#content .detailed .aside .services ul {
font-size : 9px;
margin : 0;
padding : 0;
list-style : none;
}
#content .detailed .aside .services ul li {
background : url('images/bullet_creativeservice.png') 0 3px no-repeat;
padding-left : 10px;
margin-bottom : 3px;
}
#content .detailed .aside .services ul li a {
text-decoration : none;
color : #636363;
}
#content .detailed .aside .services ul li a:hover {
text-decoration : underline;
}
/* sidebar live site link */
#content .detailed .aside p.live_site {
}
#content .detailed .aside p.live_site a:hover {
text-decoration : underline;
}
#content .detailed .post {
float : left;
width : 380px;
padding-right : 20px;
}
#content .detailed .additional {
margin : 0 0 0 720px;
width : 160px;
}
#content .detailed .additional .services_employed {
}
#content .detailed .additional .services_employed ul {
list-style : none;
font-size : 10px;
color : #636363;
margin : 0;
padding : 0;
}
#content .detailed .additional .other_projects {
}
#content .detailed .additional .other_projects ul {
list-style : none;
font-size : 10px;
color : #464646;
margin : 0;
padding : 0;
}
#content .detailed .additional .other_projects ul li {
background : url('images/bullet_creativeservice.png') 0 3px no-repeat;
padding-left : 10px;
margin-bottom : 5px;
}
#content .detailed .additional .other_projects ul li a {
color : #464646;
border-bottom : 1px dotted #636363;
}
/* homepage latest projects box */
#content .detailed #latestprojects {
margin : 0 0 0 640px;
width : 240px;
}
#content .detailed #latestprojects .wrapheader {
width : 240px;
height : 43px;
background : url('images/background_projects-header.png') 0 0 no-repeat;
}
#content .detailed #latestprojects .wrapheader h2 {
margin : 0;
color : #93b633;
position : relative;
top : 18px;
left : 15px;
}
#content .detailed #latestprojects .wrapbody {
width : 240px;
height : 118px;
background : url('images/background_projects-body.png') 0 0 no-repeat;
}
#content .detailed #latestprojects .wrapbody ul {
margin : 0 13px;
padding : 0;
list-style : none;
}
#content .detailed #latestprojects .wrapbody ul li {
padding-top : 12px;
margin-bottom : 12px;
background : url('images/divider_project.png') 0 0 no-repeat;
}
#content .detailed #latestprojects .wrapbody ul li:first-child {
background : none;
}
#content .detailed #latestprojects .wrapbody ul li a {
display : block;
color : #afafaf;
text-decoration : none;
line-height : 13px;
height : 13px;
background : url('images/bullet_project.png') 0 0 no-repeat;
padding-left : 20px;
}
#content .detailed #latestprojects .wrapbody ul li a:hover {
text-decoration : underline;
}
/* job list on category page */
ul#job_list {
margin : 0;
padding : 0;
list-style : none;
}
ul#job_list li.item {
padding-bottom : 15px;
margin : 15px 0;
background : url('images/divider.png') center bottom no-repeat;
overflow : hidden;
}
ul#job_list li.item .thumbnail {
float : left;
width : 220px;
padding-right : 20px;
}
ul#job_list li.item .thumbnail .image {
width : 215px;
overflow : hidden;
border: 1px solid #232323;
}
ul#job_list li.item .information {
float : left;
width : 380px;
padding-right : 20px;
}
ul#job_list li.item .information p.more {
text-align : left;
font-size : 9px;
}
ul#job_list li.item .information p.more a {
color : #c5d682;
background : url('images/bullet_more.png') right 4px no-repeat;
padding-right : 7px;
}
ul#job_list li.item .information p.more a:hover {
text-decoration : underline;
}
ul#job_list li.item .job_details_wrap {
margin : 0 0 0 640px;
width : 240px;
}
/* contact us */
ul#contactmethods {
margin : 0;
padding : 0;
list-style : none;
}
ul#contactmethods li {
width : 100%;
position : relative;
margin-bottom : 15px;
padding : 10px 0;
overflow : hidden;
}
ul#contactmethods li h3 {
position : absolute;
top : 10px;
left : 10px;
width : 100px;
font-weight : bold;
color : #646464;
margin : 0;
}
ul#contactmethods li .contactdetails {
padding-left : 250px;
}
ul#contactmethods li.addressdetails {
}
ul#contactmethods li.addressdetails .vcard {
font-size : 11px;
}
ul#contactmethods li.addressdetails .vcard .org {
color : #ccdb8f;
font-weight : bold;
background : url('images/icon_hail.png') left 4px no-repeat;
padding-left : 18px;
position : relative;
left : -18px;
line-height : 20px;
}
ul#contactmethods li.addressdetails .vcard .adr {
margin : 10px 0;
color : #97b832;
}
ul#contactmethods li.addressdetails .vcard .label {
color : #ccdb8f;
}
ul#contactmethods li.addressdetails .vcard .tel {
color : #fff;
}
ul#contactmethods li.addressdetails .vcard a.email {
color : #fff;
}
ul#contactmethods li.addressdetails .vcard a.email:hover {
text-decoration : none;
}
ul#contactmethods li.addressdetails .vcard .contact {
color : #ccdb8f;
margin-top : 10px;
}
ul#contactmethods li.addressdetails .estimate {
width : 240px;
float : right;
margin-right : 10px;
display : inline;
}
ul#contactmethods li.addressdetails .estimate .wrapheader {
width : 244px;
height : 37px;
background : url('images/background_estimates-header.png') 0 0 no-repeat;
}
ul#contactmethods li.addressdetails .estimate .wrapheader h2 {
margin : 0;
color : #93b633;
position : relative;
top : 12px;
left : 12px;
}
ul#contactmethods li.addressdetails .estimate .wrapbody {
width : 244px;
height : 159px;
background : url('images/background_estimates-body.png') 0 0 no-repeat;
padding : 10px;
}
ul#contactmethods li.addressdetails .estimate .wrapbody h4 {
margin : 0 0 0 0;
font-size : 11px;
color : #c0d378;
}
ul#contactmethods li.addressdetails .estimate .wrapbody p {
margin : 0 15px 15px 0;
color : #838383;
}
ul#contactmethods li.seework {
background : #373737;
}
ul#contactmethods li.seework ul {
margin : 0;
padding : 0;
}
ul#contactmethods li.seework ul li {
margin-bottom : 3px;
margin-top : 0;
padding : 0 0 3px 0;
line-height : 18px;
}
ul#contactmethods li.seework ul li a {
color : #0099cc;
border-bottom : 1px dotted #989898;
}
ul#contactmethods li.seework ul li.behance {
background : url('images/icon_behance.png') 0 2px no-repeat;
padding-left : 25px;
}
ul#contactmethods li.seework ul li.flickr {
background : url('images/icon_flickr.png') 0 2px no-repeat;
padding-left : 25px;
}
ul#contactmethods li.seework ul li.linkedin {
background : url('images/icon_linkedin.png') 0 2px no-repeat;
padding-left : 25px;
}
ul#contactmethods li.friends {
background : #373737;
}
ul#contactmethods li.friends ul {
margin : 0;
padding : 0;
}
ul#contactmethods li.friends ul li {
margin-bottom : 3px;
margin-top : 0;
padding : 0 0 3px 0;
background : url('images/icon_link.png') 5px 2px no-repeat;
padding-left : 25px;
}
ul#contactmethods li.friends ul li a {
color : #0099cc;
border-bottom : 1px dotted #989898;
}
#footer {
width : 100%;
overflow : hidden;
margin : 120px 0 30px 0;
}
#footer .author {
float : left;
width : 220px;
padding-right : 20px;
}
#footer .author p {
margin : 0;
color : #636363;
font-size : 9px;
}
#footer .author p.name {
font-weight : bold;
}
#footer .author p.padtop {
font-weight : bold;
margin-top : 40px;
}
#footer .vcard {
float : left;
width : 380px;
padding-right : 20px;
font-size : 9px;
color : #636363;
}
#footer .vcard a {
border-bottom : 1px dotted #989898;
text-decoration : none;
color : #636363;
}
/* reusable */
/* ----------------- */
/* job details */
.job_details {
margin : 18px 0;
}
.job_details ul {
margin : 0;
padding : 0;
list-style : none;
}
.job_details ul li {
color : #c0d378;
font-weight : bold;
}
.job_details ul li .label {
color : #8fb434;
}
/* job timelines */
.timeline {
}
.timeline .weeks {
width : 221px;
height : 32px;
position : relative;
background : url('images/schedule.png') 0 0 no-repeat;
margin-top : -15px;
overflow : hidden;
}
.timeline .weeks .timespent {
background : #97b832;
height : 5px;
position : absolute;
bottom : 2px;
left : 1px;
}
/*****************************************************************************
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;
}
*/
}