body{
width:920px;
margin:0 auto;
font-family:Arial, Helvetica, sans-serif;
/* Set font as 10px - 1em will equal 10px */
font-size:62.5%;
line-height:12px;
color:#333;
padding:10px 20px 20px;
width:920px;
padding:10px 50px 20px;
background:url(i/freelance-graphic-designer.jpg) top center no-repeat;
}
a{
color:#333;
}
a:hover{
color:#169ba3;
}
img{
border:0;
}
.highlight{
color:#169ba3;
}
/* *************************************** Masthead ********************************** */
#masthead{
width:920px;
border-bottom:1px solid #ccc;
position:relative;
}
h1{
width:225px;
height:140px;
position:relative;
overflow:hidden;
margin:0;
font-size:1.6em;
line-height:18px;
}
h1 span {
background:url(i/graphic-design-company-bristol.gif) top left no-repeat;
position:absolute;
width:100%;
height:100%;
}
#contact{
position:absolute;
top:10px;
right:0;
font-size:1.2em;
}
/* *************************************** Navigation ********************************** */
#nav{
position:absolute;
top:108px;
left:300px;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
height:32px;
margin:0;
padding:0;
}
#nav li{
float:left;
height:31px;
text-align:center;
list-style:none;
border-right:1px solid #ccc;
border-left:1px solid #fff;
background:url(i/bristol-graphic-design.gif) repeat-x;
font-size:1.2em;
}
#nav li a{
float:left;
height:22px;
background:url(i/bristol-graphic-design.gif) repeat-x;
text-decoration:none;
color:#333;
padding:9px 0 0;
}
a#nav-index{
width:75px;
}
a#nav-about{
width:75px;
}
a#nav-services{
width:102px;
}
a#nav-testimonials{
width:120px;
}
a#nav-hire{
width:145px;
}
a#nav-contact{
width:90px;
}
#nav li a:hover{
background:url(i/bristol-graphic-design-over.gif) repeat-x;
color:#169ba3;
}
/* *************************************** sidebar ********************************** */
#sidebar{
width:225px;
float:left;
margin:114px 75px 0 0;
}
#sidebar ul{
margin:22px 0 0;
padding:0;
}
#sidebar li{
font-size:1.2em;
line-height:16px;
margin:0 0 10px;
border-bottom:1px solid #ccc;
padding:0 0 8px;
list-style:none;
}
#sidebar a{
text-decoration:none;
background:url(i/bullet.gif) left center no-repeat;
padding:0 0 0 14px;
}
#sidebar h4{
border-top:3px double #ccc;
border-bottom:3px double #ccc;
margin:40px 0 0;
font-size:1.1em;
color:#333;
padding:8px 0;
font-weight:bold;
letter-spacing:0.075em;
}
.design-type{
color:#666;
}
#sidebar a:hover{
color:#169ba3;
}
#sidebar a .design-type:hover{
color:#169ba3;
}
/* *************************************** page content ********************************** */
#content{
width:620px;
float:right;
}
h2{
font:3.2em Georgia, "Times New Roman", Times, serif;
padding:10px 0;
margin:30px 0 20px 0;
}
h2 strong{
font-weight:normal;
color:#169ba3;
}
h3{
border-top:1px dotted #ccc;
margin:20px 0 10px;
font-size:1.2em;
color:#333;
padding:11px 0 0;
}
h3{
border:none;
margin:0 0 10px;
font-size:1.4em;
color:#333;
padding:0;
text-transform:uppercase;
}
h3 a{
color:#333;
text-decoration:none;
}
h3 a:hover{
text-decoration:underline;
}
p{
font-size:1.4em;
margin:0 0 24px 0;
line-height:22px;
}
p#top{
margin-top:36px;
font-size:1.2em;
}
p + h2{
margin-top:60px;
}
#content p strong{
text-transform:uppercase;
font-weight:normal;
color:#000;
}
#content p a:hover strong{
color:#169ba3;
}
/* *********************************** Services ********************************* */
.graphic-design-service{
padding:9px 0 0;
margin:0 0 32px;
width:100%;
float:left;
}
.graphic-design-service h3{
margin-left:214px;
}
.graphic-design-service p{
margin-left:214px;
margin-bottom:10px;
}
/* *********************************** Featured Work ******************************* */
.graphic-design{
width:300px;
float:left;
margin-right:20px;
}
.graphic-design h3{
border-top:3px double #ccc;
margin:47px 0 0;
font-size:1.1em;
color:#333;
padding:8px 0;
font-weight:normal;
letter-spacing:0.075em;
}
.graphic-design p{
font-size:1.1em;
line-height:1.4;
margin:5px 0 0;
}
.graphic-design img{
border:1px solid #ccc;
}
#content .graphic-design p strong{
text-transform:none;
color:#333;
}
/* *********************************** Featured Work (freelance web design optimisation version) ******************************* */
.web-designer{
width:300px;
float:left;
margin-right:20px;
}
.web-designer h3{
border-top:3px double #ccc;
margin:47px 0 0;
font-size:1.1em;
color:#333;
padding:8px 0;
font-weight:normal;
letter-spacing:0.075em;
}
.web-designer p{
font-size:1.1em;
line-height:1.4;
margin:5px 0 0;
}
.web-designer img{
border:1px solid #ccc;
}
#content .web-designer p strong{
text-transform:none;
color:#333;
}
/* *************************************** footer ********************************** */
#footer{
border-top:1px solid #ccc;
margin:60px 0 10px;
float:left;
width:920px;
}
#footer p{
font-size:1em;
line-height:14px;
margin:4px 0 6px 300px;
}
.gap{
margin:0 7px;
}
.small a{
text-decoration:none;
}
.small a:hover{
text-decoration:underline;
color:#626161;
}
/* *************************************** portfolio ********************************** */
.graphic-design-bristol{
margin:9px 0 54px;
}
/* *************************************** services ********************************** */
#content .column ul{
text-align:left;
}
ul#services-list{
text-align:left;
font-size:1.2em;
margin-bottom:30px;
padding:0 0 0 14px;
}
ul#services-list li{
list-style-type:disc;
}
h3.larger{
font-size:1.6em;
line-height:1.4;
color:#626161;
padding-top:0;
}
h3.larger a{
color:#626161;
text-decoration:underline;
}
#content ul#thumbnails{
text-align:left;
margin:0;
padding:6px 0 24px;
width:620px;
float:left;
}
#content ul#thumbnails li{
width:126px;
margin:0 10px 10px 0;
float:left;
}
.services a{
text-decoration:none;
}
.services a:hover{
text-decoration:underline;
}
/* ************************************ Testimonials ********************************** */
.testimonial{
background:#dadcdc;
width:620px;
margin-top:14px;
}
.testimonial p.comment{
background:url(i/comment.gif) top left no-repeat;
padding:15px 50px 0;
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic;
margin-bottom:14px;

font-size:1.6em;
}
.testimonial p.client, .testimonial p.client2{
background:url(i/client.gif) top left no-repeat;
padding:0 50px 50px;
text-transform:uppercase;
letter-spacing:0.05em;
font-size:1em;
font-weight:bold;
margin-bottom:0;
}
.testimonial p.client2{
background:url(i/client2.gif) top left no-repeat;
}
/* *************************************** contact ********************************** */
ul#contact-details{
margin:28px 0 0;
text-align:left;
}
#contact-details li{
font-size:1.4em;
margin:0 0 20px;
}
/* ******************************** Global ******************************************* */
.nomargin{
margin:0;
}
.float-left{
float:left;
margin:5px 8px 0 0;
}