@charset "utf-8";
/* Screen styles for echosiz website | Optionised for Firefox */

body { margin:0; padding:0; font-family: Arial, Helvetica, sans-serif; font-size:1em; background:url(/assets/template-images/bg-page.jpg) repeat top left; } 

h1, h2, h3, h4, h5, h6, div, p, ul, ol, table { margin:0; padding:0; } 
a img { border:none; } 

/* Template layouts */ 

.page { width:840px; margin:0 auto; background:#fff; overflow:hidden; } 

#shortcuts { position:absolute; top:0; } 
#shortcuts ul li { display:inline; } 
#shortcuts ul li a { position:absolute; top:-500px; }

#header { height:71px; background:url(/assets/template-images/bg-header.gif) repeat-x 0 0; } 
#header .bottom { height:71px; background:url(/assets/template-images/bg-divider.gif) repeat-x bottom left; } 

#logo { position:relative; left:16px; top:24px; float:left; width:389px; } 

#primary-nav { width:451px; float:left; } 
#primary-nav ul { margin:0; padding:0; list-style:none; } 
#primary-nav li { float:left; padding:40px 10px 6px 10px; margin:0 10px 0 0; } 
#primary-nav a { margin:0; padding:0; display:block; overflow:hidden; text-decoration:none; height:15px; }
#primary-nav li.nav-home { width:36px; }   
#primary-nav li.nav-home a.off { background:url(/assets/template-images/nav-home-off.gif) no-repeat top left; position:relative;}
#primary-nav li.nav-home a.off:hover { background:url(/assets/template-images/nav-home-hover.gif) no-repeat top left; position:relative; }
#primary-nav li.nav-home a.on { background:url(/assets/template-images/nav-home-on.gif) no-repeat top left; position:relative; }
#primary-nav li.nav-work { width:34px; }   
#primary-nav li.nav-work a.off { background:url(/assets/template-images/nav-work-off.gif) no-repeat top left; }
#primary-nav li.nav-work a.off:hover { background:url(/assets/template-images/nav-work-hover.gif) no-repeat top left; }
#primary-nav li.nav-work a.on { background:url(/assets/template-images/nav-work-on.gif) no-repeat top left; }
#primary-nav li.nav-services { width:58px; }   
#primary-nav li.nav-services a.off { background:url(/assets/template-images/nav-services-off.gif) no-repeat top left; }
#primary-nav li.nav-services a.off:hover { background:url(/assets/template-images/nav-services-hover.gif) no-repeat top left; }
#primary-nav li.nav-services a.on { background:url(/assets/template-images/nav-services-on.gif) no-repeat top left;  }
#primary-nav li.nav-people { width:44px; }   
#primary-nav li.nav-people a.off { background:url(/assets/template-images/nav-people-off.gif) no-repeat top left;  }
#primary-nav li.nav-people a.off:hover { background:url(/assets/template-images/nav-people-hover.gif) no-repeat top left;  }
#primary-nav li.nav-people a.on { background:url(/assets/template-images/nav-people-on.gif) no-repeat top left; }
#primary-nav li.nav-news { width:34px; }   
#primary-nav li.nav-news a.off { background:url(/assets/template-images/nav-news-off.gif) no-repeat top left;  }
#primary-nav li.nav-news a.off:hover { background:url(/assets/template-images/nav-news-hover.gif) no-repeat top left; }
#primary-nav li.nav-news a.on { background:url(/assets/template-images/nav-news-on.gif) no-repeat top left; }
#primary-nav li.nav-contact { width:52px; }  
#primary-nav li.nav-contact a.off { background:url(/assets/template-images/nav-contact-off.gif) no-repeat top left; }
#primary-nav li.nav-contact a.off:hover { background:url(/assets/template-images/nav-contact-hover.gif) no-repeat top left;  }
#primary-nav li.nav-contact a.on { background:url(/assets/template-images/nav-contact-on.gif) no-repeat top left;  }
#primary-nav li.on { background:#f5fb70; }  
#primary-nav a span { position:relative; top:-500px; } 

#main { clear:both; } 
#main #left-col { width:547px; padding:0 20px 0 0; float:left; } 
#main #right-col { width:273px; float:left; background:url(/assets/template-images/bg-right-col.gif) repeat-y 0 0; padding:0; }
#main #right-col .rc-top { background: url(/assets/template-images/bg-right-col-header.gif) no-repeat 0 0; height:56px;  } 
#main #right-col .rc-middle { position:relative; top:-26px;  } 
#main #right-col .rc-bottom { background:url(/assets/template-images/bg-right-col-footer.gif) no-repeat bottom left; height:51px; } 

#footer { clear:both; padding:18px 0 0 0; margin:0 25px; overflow:hidden; background:url(/assets/template-images/bg-divider.gif) repeat-x top left; height:40px; } 
#footer #address { float:left; width:517px; padding:4px 0 15px 0; font-size:0.625em; color:#808080; font-weight:bold; }
#footer #phone-no { float:right; padding:0 0 0 0; text-align:right; color:#1868a5; width:273px;}
#footer #phone-no1 { display:inline; font-size:0.875em; }
#footer #phone-no2 { display:inline; font-size:1.625em; }

/* Common Components */ 

.rc-panel { padding:0 0 9px 8px; color: #444444; font-size:0.75em; } 
.rc-panel .top { padding-top:5px; background:url(/assets/template-images/bg-right-col-panel-header.gif) no-repeat top left; }
.rc-panel .middle { width:234px; border-left:1px solid #ccc; border-right:1px solid #f9f9f9; padding:5px 10px 1px 10px; background:#fff;}
.rc-panel .bottom { padding-bottom:4px; background:url(/assets/template-images/bg-right-col-panel-footer.gif) no-repeat bottom left;  }
.rc-panel h1 { font-size:1.67em; margin-bottom:8px; } 
.rc-panel .rss-link { background:url(../assets/template-images/icon-rss.gif) no-repeat -1px -1px; padding-left:32px; } 
.rc-panel p { margin-bottom:12px; line-height:140%; } 
.rc-panel ul { margin-bottom:12px; list-style:none; } 
.rc-panel ul li { line-height:160%; background:url(/assets/template-images/bg-rc-bullet.gif) no-repeat 3px 8px; padding-left:15px; margin-bottom:10px;   } 
.rc-panel a { text-decoration:none; font-weight:bold; color:#2571ab; } 
.rc-panel a:hover { text-decoration:underline;  color:#ff0000; } 
.rc-panel a.selected { color:#000; } 
.rc-panel a.selected:hover { text-decoration:none; } 


#content a { text-decoration:none; font-weight:bold; color:#2571ab; } 
#content a:hover { text-decoration:underline; color:#ff0000;  } 

.editorial { font-size:0.875em; color: #444444; } 
.editorial p, .editorial ul, .editorial ol, .editorial div, .editorial table { margin-top:12px; margin-bottom:12px;  } 
.editorial h2 { font-size:1.428em; color:#2571ab; margin-bottom:12px; } 
.editorial ul { list-style:square; margin-left:30px; } 
.editorial ol { margin-left:30px; } 

.clearboth { clear:both; } 

/* Page Specific Layouts */ 

#home #content { clear:both; padding:8px 25px; overflow:hidden; } 
#home #large-promo { position:relative; } 
#home #large-promo h1 { position: absolute; top:24px; left:8px; color:#fff; font-size:1.625em; line-height:105%;  }
#home #large-promo h2 { position: absolute; top:122px; left:0px; font-size:0.75em; font-weight:bold; }
#home #large-promo h2 strong { color:#337ab1; background:#f9ff60; padding:4px 5px 4px 8px; line-height:150%; margin-top:-8px!Important; } 
#home #large-promo h2 a { color:#f00; } 
#home #latest-work h1 { padding:18px 0 10px 0; background:url(/assets/template-images/bg-divider.gif) repeat-x bottom left; color:#1868a5; font-size:1.125em; }
#home #latest-work .promo { float:left; padding:10px 29px 0 0; position:relative; } 
#home #latest-work .promo.last { padding-right:0; } 
#home #latest-work .promo h2.client { position:absolute; top:142px; left:0;  font-size:1.375em; font-weight:normal; color:#337ab1; background:#f9ff60; padding:4px 5px; } 
#home #latest-work .promo h2.project { position:absolute; top:172px; left:0;  font-size:1.375em; font-weight:normal; color:#337ab1; background:#f9ff60; padding:4px 5px;} 
#home #latest-work .promo h2 a { font-weight:normal; color:#337ab1; } 
#home #latest-work .promo h2 a:hover { text-decoration:none; }  
#home #footer { background:none; padding-top:20px; } 

#work #content { padding:16px 0 26px 0; position:relative; } 
#work .projects-list { clear:both; font-size: 0.75em; } 
#work .projects-list .thumb { width:158px; padding:0 0 10px 24px; float:left; position:relative;  } 
#work .projects-list .thumb h1.client { position:absolute; top:114px; left:24px; font-size:1.125em; font-weight:normal; line-height:150%; color:#f9ff60; background:#337ab1; padding:2px 5px; }
#work .projects-list .thumb h1.project { position:absolute; top:135px; left:24px; font-size:1.125em; font-weight:normal; line-height:150%; color:#f9ff60; background:#337ab1; padding:2px 5px; }
#work .projects-list .thumb h1 a { color:#f9ff60; font-weight:normal; } 
#work .projects-list .thumb h1 a:hover { text-decoration:none; }
#work .projects-list .spacer { height:6px; overflow:hidden; }  

#projects #content { padding:30px 0 26px 22px; position: relative;  } 
#projects h1.project-title { margin-bottom:8px; font-size:1.125em; line-height:130%; font-weight:normal; color:#f9ff60; background:#337ab1; padding:4px 5px; float:left; } 
#projects #project-gallery { clear:both; margin-bottom:10px; width:525px; text-align:center;} 
#projects #project-gallery-nav { clear:both; margin:-5px 5px 10px 0; font-size:0.687em; text-align:right; color: #444444;  } 
#projects .back-link { position:absolute; top:46px; right:0px; font-size:0.687em; padding-right:20px; background:url(/assets/template-images/arrow-up.gif) no-repeat right 0; } 
 
#services #content { padding:30px 0 26px 22px; } 
#services .service-list .title-bg { background:url(/assets/template-images/bg-divider.gif) repeat-x 0 15px; height:20px; line-height:150%; } 
#services .service-list .title-bg span { display:block; background:#fff; padding-right:4px; float:left; } 
#services .service-list .title-bg h1 { font-size:1.25em; color:#337ab1; background-color:#f9ff60; padding:3px 6px 5px 6px; }
#services .service-list .editorial { clear:both; padding:12px 0 12px 0; } 

#people #content { padding:30px 0 26px 22px; } 
#people .person { clear:both; } 
#people .person img { display:block; width:160px; padding:0 10px 30px 0; float:left; } 
#people .person .details { width:346px; float:left; padding-bottom:30px; } 
#people .person .details h1 { margin:2px 0 10px 0; font-size:1.125em; line-height:100%; color:#f6fb81; background-color:#337ab1; padding:4px 8px 6px 4px; float:left; } 
#people .person .details h2 { clear:both; font-size:0.875em; font-weight:bold; } 
#people .person .details .editorial { margin-top:-6px; } 
#people .person .details .moredetails { margin-top:0px; clear:both;  } 
#people .person .details a.more { display:block; float:left; padding-left:16px; background:url(/assets/template-images/arrow-down.gif) no-repeat 0 2px; } 
#people .person .details a.more span { font-size:0.875em; color:#337ab1; background-color:#f9ff60; padding:1px 6px; } 
#people .person .details a.more:hover { text-decoration:none; }
#people .person .details a.more:hover span { color:#f9ff60; background-color:#337ab1; } 

#people .person .details a.less { display:block; float:left; padding-left:16px; background:url(/assets/template-images/arrow-up.gif) no-repeat 0 2px; } 
#people .person .details a.less span { font-size:0.875em; color:#337ab1; background-color:#f9ff60; padding:1px 6px; } 
#people .person .details a.less:hover { text-decoration:none; }
#people .person .details a.less:hover span { color:#f9ff60; background-color:#337ab1; } 

#news #content { padding:30px 0 26px 22px; } 
#news .story { padding-bottom:20px; margin-bottom:30px; background:url(/assets/template-images/bg-divider.gif) repeat-x left bottom; } 
#news .story.last { padding-bottom:0; background:none; } 
#news .story h1 { font-size:1.25em; color:#f9ff60; background-color:#337ab1; padding:3px 6px; float:left;} 
#news .story .date { display:inline; font-size:0.75em; font-weight:bold; position:relative; top:18px; left:6px; }
#news .editorial { clear:both; padding-top:6px;  }  

#contact #content { padding:30px 0 26px 22px; position:relative;  } 
#contact #office-photo { position:relative; margin-bottom:20px;  } 
#contact #office-photo #address { position:absolute; top:60px; left:0; } 
#contact #office-photo p.margin-top { margin-top:12px; } 
#contact #office-photo p { clear:both; float:left; font-size:1em; color:#f9ff60; background-color:#337ab1; padding:3px 10px 3px 10px; font-weight:normal;}   
#contact #office-photo a { color:#f9ff60; }