/*
 * Author:		Ronan Sprake [ronan.sprake@digitaloverload.co.uk]
 * Agency:		Digital Overload Ltd.
 * Project: 	Digital Overload Website
 * Comment:		Base stylesheet

----------------------
Contents:

@import Reset stylesheet

1. Font sizing
2. Generic HTML styles
3. Parent layout styles
4. Header styles
5. Footer styles
6. Content styles
7. Callout styles
8. Home page
9. Portfolio page
10. Services page
11. Our Approach page
12. News page
13. Project page
14. Story page
15. Service page
16. Contact Us page
17. Form styles
18. Miscellaneous

*/

@import url("reset.css");


/*--------------------------------------------------------------------------
	Font Sizing
----------------------------------------------------------------------------*/

body
{
	font-family:			Arial, Helvetica, sans-serif; 
	font-size:				100%;
	line-height:			1em; /* 16px */
}

#page-container
{
	font-size:				0.6875em; /* 16×0.6875=11px */
}

.home p.intro,
blockquote,
.project-ref,
.article-ref
{
	font-size:				1.273em; /* 11×1.273=14px */
}

cite
{
	font-size:				0.786em; /* 14×0.786=11px */
}

h1
{
	font-size:				2em; /* 11×2=22px */
}

.callout h2,
.callout h3,
.callout h4
{
	font-size:				1.636em; /* 11×1.636=18px */
}

.portfolio h1,
h2,
h3
{
	font-size:				1.091em; /* 11×1.091=12px */
}

h4,
.callout.related-links a,
.contact-us h2,
/*.intro,*/
.contact-us a.more,
.service .case.callout p,
.portfolio a.more,
.blog a.more
{
	font-size:				1.091em; /* 11×1.091=12px */
}

.blog h2 em
{
	font-size:				0.786em; /* 14×0.786=11px */
}


/*--------------------------------------------------------------------------
	= Generic HTML Styles
----------------------------------------------------------------------------*/

body
{
	background:				url(../images/bg-body.gif) repeat;
	color:					#2D3537;
	font-family:			Arial, Helvetica, sans-serif;
}

em
{
	font-style:				italic;
}

cite
{
	font-style:				normal;
}

strong,
h1,
h2,
h3,
h4
{
	font-weight:			bold;
}

ul,
ol,
dl,
p
{
	margin-bottom:			21px;
}

ul ul
{
	margin:					5px 0;
}

ul li
{
	background:				url(../images/bg-ul-li-bullet.gif) no-repeat 2px 5px;
	padding-left:			17px;
}

ol li
{
	list-style:				decimal inside;
}

li
{
	margin-bottom:			5px;
}

h1
{
	color:					#00A8CC;
	margin-bottom:			14px;
}

h2
{
	margin-bottom:			14px;
}

h3,
h4
{
	margin-bottom:			3px;
}

dl
{
	font-style:				normal;
	font-weight:			bold;
}

dt
{
	clear:					left;
	float:					left;
	margin-right:			8px;
}

dd
{
	color:					#00A8CC;
}

dd a
{
	text-decoration:		none;
}

p
{
	line-height:			1.6em;
}

p a
{
	color:					#FE6903;
	text-decoration:		none;
}

p a:hover
{
	text-decoration:		underline;
}

a
{
	color:					#333;
	cursor:					hand;
	text-decoration:		underline;
}

a:hover
{
	text-decoration:		none;
}

img
{
	display:				block;
}


/*--------------------------------------------------------------------------
	= Parent layout styles
----------------------------------------------------------------------------*/

#page-container
{
	background:				url(../images/bg-page-container-y.png) repeat-y;
	margin:					auto;
	padding:				0 24px;
	width:					950px;
}

#wrapper
{
	background:				url(../images/bg-wrapper.jpg) no-repeat bottom right #FFF;
}


/*--------------------------------------------------------------------------
	= Header
----------------------------------------------------------------------------*/

#header
{
	background:				url(../images/bg-header.png) repeat-x;
	min-height:				119px;
}

#header em
{
	font-style:				normal;
}

#header ul
{
	background:				url(../images/bg-header-ul.png) no-repeat left;
	padding-left:			321px;
	min-height:				81px;
	position:				relative;
	z-index:				3;
}

#header ul li
{
	background:				none;
	float:					left;
	padding:				0;
	margin:					0;
}

#header ul li a
{
	background-position:	0 0;
	display:				block;
	height:					76px;
}

#header ul li a:hover,
#header ul li.current a,
#header ul li.selected a
{
	text-decoration:		none;
	background-position:	0 -76px;
}

#header ul li#btn-blog a:hover,
#header ul li#btn-blog.current a,
#header ul li#btn-blog.selected a
{
	background-position:	0 -70px;
}

#header ul li a img
{
	left:					35px;
	position:				absolute;
	top:					29px;
}

#header ul li a strong
{
	display:				block;
	font-size:				1%;
	height:					0;
	line-height:			0;
	overflow:				hidden;
	width:					0;
}

#header ul li a
{
	margin-left:			-1px;
}

li#btn-home a
{
	background:				url(../images/bg-header-li-home.png) no-repeat 0 0;
	width:					90px;
}

li#btn-portfolio a
{
	background:				url(../images/bg-header-li-portfolio.png) no-repeat 0 0;
	width:					110px;
}

li#btn-services a
{
	background:				url(../images/bg-header-li-services.png) no-repeat 0 0;
	width:					118px;
}

li#btn-values a
{
	background:				url(../images/bg-header-li-values.png) no-repeat 0 0;
	width:					118px;
}

li#btn-contact-us a
{
	background:				url(../images/bg-header-li-contact-us.png) no-repeat 0 0;
	width:					118px;
}

#header ul li#btn-blog a
{
	background:				url(../images/bg-header-li-blog.png) no-repeat 0 0;
	height:					70px;
	position:				absolute;
	right:					-26px;
	top:					40px;
	width:					70px;
}


/*--------------------------------------------------------------------------
	=footer
----------------------------------------------------------------------------*/

#footer
{
	border-top:				1px solid #00A8CC;
	clear:					both;
	padding:				14px 30px;
	position:				relative;
	width:					890px;
}

#footer ul
{
	float:					right;
}

#footer ul,
#footer li,
#footer p
{
	display:				inline;
}

#footer li
{
	background:				0;
	padding-left:			9px;
}

#base-container
{
	background:				url(../images/bg-page-base.png) repeat-x bottom;
	margin:					auto;
	width:					998px;
}

#footer li.current,#footer li.current a
{
	color:					#00A8CC;
	text-decoration:		none;
}


/*--------------------------------------------------------------------------
	=content
----------------------------------------------------------------------------*/

.content
{
	min-height:				400px;
	margin:					0 30px 20px 35px;
}

.content a,
.sub-content a
{
	color:					#00A8CC;
}

.content a:hover
{
	color:					#000;
	text-decoration:		underline;
}

.sub-content
{
	float:					right;
	margin:					0 35px 20px 0;
}


/*--------------------------------------------------------------------------
	=callouts
----------------------------------------------------------------------------*/

.callout p
{
	margin-bottom:			10px;
}

.callout ul li
{
	background:				0;
	padding:				0;
}

.callout.related-links li
{
	margin-bottom:			6px;
}

.callout.related-links .inner-content
{
	padding:				18px 23px 10px;
}

.callout.related-links a
{
	background:				url(../images/bg-related-links-blue-a.gif) no-repeat right 55%;
	font-weight:			bold;
	padding-right:			10px;
	text-decoration:		none;
}

.callout
{
	background:				url(../images/bg-callout-y.png) repeat-y;
	color:					#00A8CB;
	margin-bottom:			80px;
	width:					286px;
}

.callout .inner-content
{
	background:				url(../images/bg-callout-base.png) no-repeat left bottom;
	margin-bottom:			-60px;
	padding:				18px 16px 10px;
	position:				relative;
}

.callout .inner-content p img
{
	margin-bottom:			15px;
}

.callout.highlight-1
{
	background:				url(../images/bg-callout-y-highlight-1.png) repeat-y;
}

.callout.highlight-1 .inner-content
{
	background:				url(../images/bg-callout-base-highlight-1.png) no-repeat left bottom;
}

.callout.highlight-2
{
	background:				url(../images/bg-callout-y-highlight-2.png) repeat-y;
}

.callout.highlight-2 .inner-content
{
	background:				url(../images/bg-callout-base-highlight-2.png) no-repeat left bottom;
}

.callout.medium
{
	background:				url(../images/bg-callout-medium-y.png) repeat-y;
	width:					322px;
}

.callout.medium .inner-content
{
	background:				url(../images/bg-callout-medium-base.png) no-repeat left bottom;
}

.callout.medium.highlight-1
{
	background:				url(../images/bg-callout-medium-y-highlight-1.png) repeat-y;
}

.callout.medium.highlight-1 .inner-content
{
	background:				url(../images/bg-callout-medium-base-highlight-1.png) no-repeat left bottom;
}

.callout.medium.highlight-2
{
	background:				url(../images/bg-callout-medium-y-highlight-2.png) repeat-y;
}

.callout.medium.highlight-2 .inner-content
{
	background:				url(../images/bg-callout-medium-base-highlight-2.png) no-repeat left bottom;
}

.callout.wide
{
	background:				url(../images/bg-callout-wide-y.png) repeat-y;
	width:					322px;
}

.callout.wide .inner-content
{
	background:				url(../images/bg-callout-wide-base.png) no-repeat left bottom;
}

.callout.wide.highlight-1
{
	background:				url(../images/bg-callout-wide-y-highlight-1.png) repeat-y;
}

.callout.wide.highlight-1 .inner-content
{
	background:				url(../images/bg-callout-wide-base-highlight-1.png) no-repeat left bottom;
}

.callout.wide.highlight-2
{
	background:				url(../images/bg-callout-wide-y-highlight-2.png) repeat-y;
}

.callout.wide.highlight-2 .inner-content
{
	background:				url(../images/bg-callout-wide-base-highlight-2.png) no-repeat left bottom;
}

.highlight-1,
.highlight-1 a
{
	color:					#0EC2A5;
}

.highlight-2,
.highlight-2 a
{
	color:					#FFF;
}


/*--------------------------------------------------------------------------
	=home
----------------------------------------------------------------------------*/

.home h1
{
	margin-bottom:			15px;
}

.home #header
{
	margin-bottom:			40px;
}

.home .editorial
{
	float:					left;
	margin-bottom:			55px;
	width:					310px;
}

.home .editorial ul
{
	margin-left:			10px;
}

.home .editorial p
{
	margin-bottom:			10px;
}

.agency-clients
{
	background:				url(../images/bg-agency-clients-base.png) repeat-x bottom;
	clear:					both;
	margin-bottom:			0;
	margin-left:			-35px;
	min-height:				204px;
	position:				relative;
	width:					950px;
}

.agency-clients ul
{
	background:				#FFF url(../images/bg-agency-clients-top.png) repeat-x top;
	padding:				0 30px 0 35px;
}

.agency-clients li
{
	background:				url(../images/bg-agency-clients-li.gif) no-repeat 0 0;
	float:					left;
	padding:				97px 0 21px 34px;
	margin-bottom:			-21px;
	position:				relative;
	width:					276px;
	min-height:				132px;
}

.agency-clients li.first
{
	background:				0;
	padding-left:			0;
	width:					271px;
}

.agency-clients li.third
{
	width:					270px;
}

.agency-clients img
{
	position:				absolute;
	top:					34px;
}

.agency-clients a.more
{
	background:				0;
	clear:					left;
	float:					left;
	font-weight:			bold;
	padding-right:			8px;
	text-decoration:		underline;
}

.agency-clients p
{
	margin-bottom:			0.5em;
}

.agency-clients a.more
{
	background:				0;
	text-decoration:		underline;
}

.agency-clients a.more:hover
{
	text-decoration:		none;
}

.home .content
{
	margin-bottom:			0;
}

.home .callout
{
	background:				url(../images/bg-home-callout-y.png) repeat-y;
	float:					right;
	margin:					0 72px 119px 0;
	width:					419px;
}

.home .callout .inner-content
{
	background:				url(../images/bg-home-callout-base.png) no-repeat bottom;
	padding:				30px 20px;
}

.home .callout p img,
.home .callout p span
{
	position:				absolute;
	right:					-70px;
	top:					-50px;
}

.home .callout h2
{
	margin-bottom:			66px;
	min-height:				30px;
}

.home .callout blockquote
{
	color:					#FFF;
}

.home .quote-start
{
	position:				absolute; 
	margin-top: 			-3px; 
	left:					23px;
}

.home .quote-end
{
	position:				absolute; 
	margin-top: 			-16px; 
	left:					358px;
}

.home .callout cite
{
	margin-left:			28px;
}


/*--------------------------------------------------------------------------
	=portfolio
----------------------------------------------------------------------------*/

.portfolio h1
{
	color:					#2D3537;
	margin-bottom:			5px;
}

.portfolio .intro
{
	background:				url(../images/bg-values-x.png) repeat-x bottom;
	margin-bottom:			8px;
	padding:				0 500px 34px 0;
}

.portfolio .row
{
	background:				url(../images/bg-values-x.png) repeat-x bottom;
	padding:				15px 0 19px;
	width:					880px;
}

.portfolio .row.last-row
{
	background:				0;
}

.portfolio .callout
{
	float:					left;
	margin-right:			10px;
	margin-bottom:			80px;
	width:					286px;
}

.portfolio .callout.last
{
	margin-right:			0;
}

.portfolio .callout .inner-content
{
	min-height:				345px;
	padding:				70px 17px 20px;
	width:					253px;
}

.portfolio .callout .inner-content p
{
	font-weight:			bold;
	margin-bottom:			24px;
	width:					220px;
}

.portfolio .callout .inner-content p img
{
	background:				url(../images/bg-callout-blue-x.gif) repeat-x bottom;
	display:				inline;
	padding-bottom:			15px;
}

.portfolio .callout .inner-content h2
{
	background:				url(../images/bg-callout-blue-x.gif) repeat-x bottom;
	padding-bottom:			20px;
	padding-left:			20px;
	position:				absolute;
	top:					20px;
	right:					20px;
	text-align:				right;
	width:					208px;
}

.portfolio .callout .inner-content h2 a
{
	text-align:				right;
}

.portfolio .callout .inner-content .project-ref
{
	background:				url(../images/bg-callout-badge.png) no-repeat top left;
	min-height:				24px;
	min-width:				30px;
	padding:				10px;
	position:				absolute;
	left:					15px;
}

.portfolio .callout.highlight-1 .inner-content .project-ref
{
	background:				url(../images/bg-callout-badge-highlight-1.png) no-repeat top left;
}

.portfolio .callout .more
{
	background:				url(../images/bg-portfolio-callout-blue-a.gif) no-repeat top left;
	bottom:					19px;
	font-weight:			bold;
	padding:				6px 0 0 23px;
	position:				absolute;
	right:					24px;
}

.portfolio .callout.highlight-1 .inner-content h2
{
	background:				url(../images/bg-callout-green-x.gif) repeat-x bottom;
}

.portfolio .callout.highlight-1 .more
{
	background:				url(../images/bg-portfolio-callout-green-a.gif) no-repeat top left;
}

.portfolio .callout.highlight-1 .inner-content p img
{
	background:				url(../images/bg-callout-green-x.gif) repeat-x bottom;
}


/*--------------------------------------------------------------------------
	=services
----------------------------------------------------------------------------*/

.service-list li
{
	background:				url(../images/bg-page-marker.gif) no-repeat 0 0;
	float:					left;
	margin-bottom:			24px;
	min-height:				150px;
	padding:				42px 15px 0 60px;
	width:					360px;
}

.service-list h3 a
{
	color:					#333;
	text-decoration:		none;
}

.service-list h3 a:hover
{
	color:					#00A8CA;
	text-decoration:		underline;
}

.services .intro
{
	background:				url(../images/bg-values-x.png) repeat-x bottom;
	margin-bottom:			8px;
	padding:				0 500px 34px 0;
}

.services h2
{
	margin-bottom:			27px;
}

.services li#creative
{
	background:				url(../images/bg-service-list-creative.gif) no-repeat 0 0;
}

.services li#seo
{
	background:				url(../images/bg-service-list-seo.gif) no-repeat 0 0;
}

.services li#email
{
	background:				url(../images/bg-service-list-email.gif) no-repeat 0 0;
}

.services li#web
{
	background:				url(../images/bg-service-list-web.gif) no-repeat 0 0;
}


/*--------------------------------------------------------------------------
	=values
----------------------------------------------------------------------------*/

.values h1
{
	margin-bottom:			18px;
}

.values .intro
{
	background:				url(../images/bg-values-x.png) repeat-x bottom;
	margin-bottom:			8px;
	padding:				0 500px 34px 0;
}

.values .section
{
	background:				url(../images/bg-values-x.png) repeat-x bottom;
	margin-bottom:			8px;
	/*min-height:			200px;*/
	padding:				0 350px 14px 0;
	position:				relative;
}

.values .section .benefits,
.values .section .results
{
	float:					left;
	width:					200px;
}

.values .callout
{
	position:				absolute;
	right:					0;
	top:					0;
	width:					286px;
}

.values .callout h4
{
	background:				url(../images/bg-callout-blue-x.gif) repeat-x bottom;
	color:					#00A8CB;
	margin-bottom:			18px;
	padding-bottom:			12px;
	width:					240px;
}


/*--------------------------------------------------------------------------
	=news
----------------------------------------------------------------------------*/

.blog .content
{
	float:					left;
	width:					313px;
}

.blog .sub-content
{
	width:					512px;
}

.blog .callout p
{
	margin-bottom:			22px;
}

.blog .sub-content .callout p
{
	margin-left:			66px;
}

.blog .more
{
	background:				url(../images/bg-portfolio-callout-blue-a.gif) no-repeat top left;
	bottom:					16px;
	font-weight:			bold;
	padding:				6px 0 0 23px;
	position:				absolute;
	right:					15px;
	text-decoration:		none;
}

.blog .callout .inner-content
{
	padding:				20px;
}

.blog .callout .inner-content label
{
	display:				block;
	margin:					6px 0;
}

.blog .sub-content .callout
{
	width:					512px;
}

.blog .sub-content .callout .inner-content
{
	padding-top:			55px;
}

.blog .content .callout h2
{
	margin-bottom:			18px;
}

.blog .sub-content .callout h2
{
	background:				url(../images/bg-callout-blue-x.gif) repeat-x bottom;
	left:					86px;
	margin-bottom:			18px;
	padding-bottom:			12px;
	position:				absolute;
	top:					12px;
	width:					390px;
}

.blog .sub-content .callout.highlight-1 h2
{
	background:				url(../images/bg-callout-green-x.gif) repeat-x bottom;
}

.blog .callout.highlight-1 .more
{
	background:				url(../images/bg-portfolio-callout-green-a.gif) no-repeat top left;
}

.blog .callout .article-ref
{
	background:				url(../images/bg-callout-badge.png) no-repeat top left;
	min-height:				24px;
	min-width:				50px;
	padding:				10px 0;
	position:				absolute;
	left:					15px;
}

.blog .callout.highlight-1 .article-ref
{
	background:				url(../images/bg-callout-badge-highlight-1.png) no-repeat top left;
}


/*--------------------------------------------------------------------------
	=project
----------------------------------------------------------------------------*/

.project .content
{
	background:				url(../images/bg-page-marker-small.gif) no-repeat 0 0;
	float:					left;
	padding:				14px 0 0 60px;
	position:				relative;
	width:					438px;
}

.project .sub-content
{
	padding-top:			14px;
	width:					322px;
}

.project .intro
{
	background:				url(../images/bg-values-x.png) repeat-x bottom;
	margin-bottom:			8px;
	padding-bottom:			34px;
}

.project .sub-content select
{
	width:					296px;
}

.project .sub-content form
{
	margin-bottom:			18px;
	padding-bottom:			0;
}

.project .sub-content input
{
	margin:					0 0 -2px 4px;
}

.project .sub-content .callout
{
	margin-left:			-1px;
}

.project .content .callout
{
	background:				0;
	color:					#00A8CB;
	margin-bottom:			22px;
	width:					440px;
}

.project .content .callout .body
{
	background:				url(../images/bg-project-callout-quote-y.gif) repeat-y;
	padding:				0 20px;
}

.project .content .callout .head
{
	background:				url(../images/bg-project-callout-quote-top.gif) no-repeat;
	height:					18px;
}

.project .content .callout .foot
{
	background:				url(../images/bg-project-callout-quote-base.gif) no-repeat;
	height:					18px;
}

.project .project-ref
{
	min-width:				40px;
	padding:				6px 0;
	position:				absolute;
	text-align:				center;
	top:					0;
	left:					0;
}

.project .quote-start
{
	position:				absolute; 
	margin-top: 			-3px; 
	left:					10px;
}

.project .quote-end
{
	position:				absolute; 
	margin-top: 			-16px; 
	left:					284px;
}

.sifr-cite
{
	margin-bottom:			0;
	line-height:			1.2em;
	margin-top:				0.4em;
}

.sifr-cite em
{
	font-style:				normal;
	display:				block;
	margin:					0 0 0 18px;
}

.project .navigate li
{
	background:				0;
	display:				inline;
	list-style:				none;
	margin:					0;
	padding:				0 10px 0 0;
}


/*--------------------------------------------------------------------------
	=story
----------------------------------------------------------------------------*/

.story .content
{
	background:				url(../images/bg-page-marker.gif) no-repeat 0 0;
	float:					left;
	padding:				7px 0 0 70px;
	position:				relative;
	width:					435px;
}

.story .sub-content
{
	padding-top:			20px;
	width:					300px;
}

.story .image-panel
{
	background:				#CFEFF6;
	padding:				6px 5px 2px;
}

.story .article-ref
{
	min-height:				24px;
	min-width:				50px;
	padding:				10px 0;
	position:				absolute;
	text-align:				center;
	top:					0;
	left:					0;
}

.story .callout.related-links li
{
	margin-bottom:			6px;
}

.story .callout.related-links a
{
	background:				url(../images/bg-related-links-white-a.png) no-repeat right 55%;
	font-weight:			bold;
	padding-right:			10px;
	text-decoration:		none;
}

.callout.related-links a:hover
{
	text-decoration:		underline;
}

.story .sub-content .callout h2
{
	background:				url(../images/bg-callout-white-x.gif) repeat-x bottom;
	margin-bottom:			18px;
	padding-bottom:			12px;
	width:					240px;
}


/*--------------------------------------------------------------------------
	=service
----------------------------------------------------------------------------*/

.service .content
{
	background:				url(../images/bg-page-marker.gif) no-repeat 0 0;
	float:					left;
	padding-left:			70px;
	padding-top:			20px;
	width:					435px;
	position:				relative;
}

.service .project-ref
{
	min-width:				52px;
	padding:				0;
	position:				absolute;
	text-align:				center;
	top:					0;
	left:					0;
}

.service .project-ref img
{
	margin:					auto;
}

.service .intro
{
	background:				url(../images/bg-values-x.png) repeat-x bottom;
	margin-bottom:			8px;
	padding-bottom:			34px;
}

.service .image-panel
{
	background:				#CFEFF6;
	padding:				6px 5px 2px;
}

.service .sub-content
{
	padding-top:			20px;
	width:					321px;
}

.service .sub-content .callout
{
	margin-bottom:			80px;
}

.service .sub-content .case
{
	margin-top:				60px;
}

.service .sub-content .case .inner-content
{
	padding-right:			40px;
	padding-top:			18px;
}

.service .sub-content .highlight-2.callout a
{
	background:				url(../images/bg-related-links-white-a.png) no-repeat right 55%;
	font-weight:			bold;
	padding-right:			10px;
	text-decoration:		none;
}

.service .sub-content .highlight-2.callout .thumb a
{
	background:				none;
	padding-right:			0;
}

.service .sub-content .callout.highlight-2 a:hover
{
	text-decoration:		underline;
}

.service .sub-content .highlight-2.callout,
.service .sub-content .highlight-2.callout a
{
	color:					#FFF;
}

.service .sub-content .callout p img
{
	position:				absolute;
	right:					-65px;
	top:					-50px;
}

.service .quote-start
{
	position:				absolute; 
	margin-top: 			-3px; 
	left:					10px;
}

.service .quote-end
{
	position:				absolute; 
	margin-top: 			-16px; 
	left:					284px;
}

.callout cite
{
	margin-left:			18px;
}


/*--------------------------------------------------------------------------
	=contact-us
----------------------------------------------------------------------------*/

.contact-us #header
{
	margin-bottom:			30px;
}

.contact-us .content
{
	float:					left;
	width:					360px;
}

.contact-us .intro
{
	margin-bottom:			38px;
}

.contact-us form
{
	display:				none;
	margin-bottom:			4px;
}

.contact-us h2
{
	margin-bottom:			8px;
}

.contact-us p
{
	margin-bottom:			8px;
}

.contact-us p em
{
	color:					#00A8CB;
	font-style:				normal;
	font-weight:			bold;
}

.contact-us dl
{
	margin-bottom:			38px;
}

.contact-us li a
{
	color:					#00A8CB;
	text-decoration:		none;
	font-weight:			bold;
}

.contact-us #map-canvas
{
	display:				none;
	margin-bottom:			12px;
}

.contact-us a.more
{
	color:					#00A8CB;
	margin-left:			12px;
}


/*--------------------------------------------------------------------------
	=form styles
----------------------------------------------------------------------------*/

form
{
	padding: 				5px 0 15px;
	margin-bottom:			12px;
}

select,
input,
textarea
{
	font-family:			Verdana, Arial, Helvetica, sans-serif;
	font-size: 				1em;
}

form p
{
	padding-left: 			157px;
}

form ul li
{
	background:				none;
}

form th,
form td
{
    padding:                3px 15px 3px 2px;
    vertical-align:         top;
}

form th
{
    width:                  110px;
    text-align:				right;
    font-weight:			normal;
}

form tr p
{
	padding-left:			0;
}

form th p
{
    margin-bottom:			0;
    margin-top: 			5px;
    text-align: 			right;
	font-size:				0.95em;
	font-weight: 			normal;
	color:					#888;
}

form th label
{
	position:				relative;
    top:					2px;
}

form th span
{
	color:					#ff0000;
}

form td *
{
	vertical-align: 		top;
}

form td p
{
	margin-bottom:			3px;
}

form td li
{
	position: 				relative;
	padding-left:			25px;
	padding-bottom: 		2px;
}

form td li input
{
	position: 				absolute;
	top:					-2px;
	left:					0;
}

form .actions
{
	padding: 				10px 0 15px 157px;
}

form .actions li
{
	display: 				inline;
	margin-right:			10px;
}


/*--------------------------------------------------------------------------
	=miscellaneous
----------------------------------------------------------------------------*/

.w3c
{
	left:					-9999px;
	position:				absolute;
	top:					-9999px;
}

.head,
.foot
{
	display:				block;
	font-size:				0;
	overflow:				hidden;
}

a.more
{
	background:				url(../images/bg-a-more.gif) no-repeat right 55%;
	font-weight:			bold;
	padding-right:			8px;
	text-decoration:		none;
}

a.more:hover
{
	color:					#000;
	text-decoration:		underline;
}

p.more a
{
	background:				url(../images/bg-a-more.gif) no-repeat right 55%;
	font-weight:			bold;
	padding-right:			8px;
	text-decoration:		none;
}

p.more a:hover
{
	color:					#000;
	text-decoration:		underline;
}

.navigate .back
{
	float:					left;
}

.back a
{
	background:				url(../images/bg-a-back.gif) no-repeat left 55%;
	clear:					left;
	float:					left;
	font-weight:			bold;
	padding-left:			8px;
	text-decoration:		none;
}

.navigate .forward
{
	float:					right;
}

.forward a
{
	background:				url(../images/bg-a-forward.gif) no-repeat right 55%;
	font-weight:			bold;
	padding-right:			8px;
	text-decoration:		none;
}

#wrapper:after,
.agency-clients ul:after,
.agency-clients:after,
.portfolio .row:after,
.values .section:after,
.callout:after
{
	content:				".";
	display:				block;
	clear:					both;
	visibility:				hidden;
	line-height:			0;
	font-size:				0;
	overflow:				hidden;
}

.clear
{
	clear:					both;
}

.story .image-panel img,
.service .image-panel img
{
	display:				inline
}

.project-ref,
.article-ref
{
	color:					#FFF;
	font-weight:			bold;
	text-align:				center;
	top:					-1px;
}

.content .sifr-quote
{
	margin-left:			18px;
	width:					370px;
}

.sub-content .sifr-quote
{
	margin-left:			18px;
	width:					256px;
}

.case p
{
	line-height:			1.4em;
}

.selected
{
	cursor:					pointer;
}

/* Do Selectables */

div.doSelectable 
{
	height:					1.8em;
	position:				relative;
	z-index:				9999;
	cursor:					pointer;
}

div.doSelectable p
{
	padding:				3px 10px;
	margin:					0;
	color:					#fff;
	background:				#333 url(/media/images/do-selectable-arrows.gif) top right no-repeat;
}

div.doSelectable ul
{
	display:				none;
	list-style:				none;
	margin:					0;
	padding:				0;
	z-index:				9999;
}

div.doSelectable ul li
{
	margin:					0;
	padding:				0;
	display:				inline;
}

div.doSelectable ul li a
{
	display:				block;
	margin:					0;
	padding:				3px 10px;
	background:				#f5f5f5;
	border-bottom:			1px solid #ccc;
	text-decoration:		none;
}

div.doSelectable ul li a:hover
{
	background:				#05A5C9;
	color:					#fff;
}