/*
 * Author:		James Thomson [james.thomson@soak.co.uk]
 * Project: 	Four Agency
 * Comment:		Base stylesheet
 */

body
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.75em; /* 16 x 0.75 = 12px */
	color: #666;
	background: #fff;
	line-height: 1.3em;
}

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

object
{
	display: block;
}

p
{
	margin-bottom: 16px;
}

a
{
	text-decoration: none;
	color: #666;
}

a:hover
{
	text-decoration: underline;
}

ul
{
	list-style: disc outside;
	margin: 0 0 13px 1em;
}

li
{
	margin-bottom: 3px;
}

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

h1,
h2
{
	margin-bottom: 12px;
	font-size: 1.8em;
}


/*--------------------------------------------------------------------------
	=page-container
----------------------------------------------------------------------------*/

.page-container
{
	width: 972px;
	margin: 0 auto;
	padding: 20px 0 10px;
}


/*--------------------------------------------------------------------------
	=header
----------------------------------------------------------------------------*/

.header
{
	padding-bottom: 15px;
}

.header ul
{
	list-style: none;
	margin: 0;
}

.header ul span
{
	position: absolute;
	left: -9999px;
	top: -9999px;
}

.header li
{
	float: left;
	margin-bottom: 0;
}

.header ul a
{
	display: block;
	height: 40px;
	background-position: left top;
	background-repeat: no-repeat;
}

#menu-home a
{
	width: 245px;
	background-image: url(../images/menu-home.png);
}

#menu-about-us a
{
	width: 242px;
	background-image: url(../images/menu-about-us.png);
}

#menu-our-work a
{
	width: 242px;
	background-image: url(../images/menu-our-work.png);
}

#menu-contact-us a
{
	width: 243px;
	background-image: url(../images/menu-contact-us.png);
}


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

.content
{
	margin-bottom: 20px;
}

.intro
{
	padding-bottom: 9px;
	margin-bottom: 23px;
	background: transparent bottom left no-repeat;
}

.intro div
{
	min-height: 142px;
	padding: 26px 356px 10px 46px;
	background: transparent top left no-repeat;
}

.intro p
{
	padding-left: 2px;
}

.main-content
{
	float: left;
	width: 724px;
	padding-left: 29px;
}


/*--------------------------------------------------------------------------
	=nav
----------------------------------------------------------------------------*/

.nav
{
	float: left;
	width: 182px;
	padding-left: 37px;
	margin-left: 0;
	list-style: none;
	background: #fff url(../images/bg-nav.png) left top no-repeat;
}

.nav li
{
	margin-bottom: 0;
}

.nav a
{
	display: block;
	padding: 9px 15px 6px 7px;
	margin-bottom: 3px;
	border-right: 10px solid #ddd;
	background: #ddd;
	color: #000;
	font-size: 1.2em;
}

.nav ul
{
	margin-bottom: 0;
	margin-left: 0;
	border-bottom:5px solid #ECECEC;
	list-style: none;
}

.nav ul a
{
	padding: 2px 15px 2px 21px;
	margin-bottom: 0;
	border-right: none;
	background: #ECECEC;
	font-size: 1em;
}

.nav ul .selected a
{
	text-decoration: underline;
}


/*--------------------------------------------------------------------------
	=gallery-listing
----------------------------------------------------------------------------*/

.gallery-listing
{
	width: 738px;
	margin-left: -16px;
	list-style: none;
}

.gallery-listing li
{
	position: relative;
	float: left;
	width: 169px;
	padding: 147px 5px 0 3px;
	margin: 0 10px 30px 0;
}

.gallery-listing li.clear
{
	position: relative;
	float: none;
	height: 1px;
	overflow:hidden;
	padding: 0;
	margin: 0;
	clear:both;
}

.gallery-listing h2
{
	margin-bottom: 3px;
	font-size: 1.1em;
	color: #231F20;
}

.gallery-listing p
{
	margin-bottom: 10px;
}

.gallery-listing .thumb
{
	position: absolute;
	top: 0;
	left: 0;
}

.gallery-listing p a
{
	color: #06A6E3;
}

.gallery-listing .last
{
	margin-right: 0;
}

.gallery-listing .clearer
{
	height: 0px;
	width: 100%;
	padding: 0;
	margin: 0;
}


/*--------------------------------------------------------------------------
	=photo-browser
----------------------------------------------------------------------------*/

.photo-browser .related-content
{
	float: left;
	width: 219px;
	padding: 0 25px 0 0;
}

.photo-browser .browser
{
	float: left;
	width: 480px;
}

.photo-browser .browser .carousel
{
	margin-bottom: 10px;
}

.photo-browser .browser .carousel ul
{
	list-style: none;
	margin: 0;
}

.photo-browser .browser .carousel li
{
	margin: 0;
}

.photo-browser .pagination
{
	float: left;
	position: relative;
	left: 50%;
	margin-left: 0;
	list-style: none;
	text-align: center;
}

.photo-browser .pagination li
{
	position: relative;
	right: 50%;
	float: left;
	margin: 0 5px;
}

.photo-browser .pagination li a
{
	font-size: 1.2em;
	font-weight: bold;
	color: #666;
	display:block;
	font-size:1.2em;
	font-weight:bold;
	min-width:12px;
	padding:2px 5px;
	text-align:center;
}

.photo-browser .pagination .prev a,
.photo-browser .pagination .next a
{
	min-height: 16px;
}

.photo-browser .pagination .prev span,
.photo-browser .pagination .next span
{
	position: absolute;
	left: -9999px;
	top: -9999px;
}

.photo-browser .pagination .prev a
{
	background: transparent url(../images/bg-photo-gallery-prev.png) center center no-repeat;
}

.photo-browser .pagination .next a
{
	background: transparent url(../images/bg-photo-gallery-next.png) center center no-repeat;
}

.photo-browser .pagination .disabled
{
	visibility: hidden;
}


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

.main-content.contact
{
	width: 925px;
	padding-left:47px;
	font-size: 1.2em;
}

.contact p span
{
	display: block;
	margin-bottom: 1em;
}

.contact-details
{
	float: left;
	width: 420px;
}

.contact-details ul
{
	list-style: none;
	margin: 0;
}

.contact-details li
{
	float: left;
	margin-right: 10px;
	width: 200px;
}

.map
{
	float: left;
	width: 391px;
	margin: 0 0 75px 70px;
}

.map img
{
	display: block;
}

.map form
{
	padding: 13px 0 12px;
}

.map form label
{
	padding: 0 10px 0 9px;
	font-weight: bold;
	color: #fff;
}

.map form input
{
	vertical-align: middle;
}

#map-canvas
{
	height:					346px;
	width:					391px;
}

#map-canvas p
{
	margin:					0;
}

#frm-postcode
{
	width: 100px;
}


/*--------------------------------------------------------------------------
	=fourth-generation
----------------------------------------------------------------------------*/

.fourth-generation p
{
	color: #000;
}


/*--------------------------------------------------------------------------
	=client-list
----------------------------------------------------------------------------*/

.client-list td
{
	width: 150px;
	padding-right: 14px;
	vertical-align: middle;
}


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

.main-content.home
{
	float: none;
	width: auto;
	padding: 0;
}

.welcome
{
	position: relative;
	min-height: 256px;
	padding: 20px 560px 0 16px;
	margin-right: 29px;
	background: url(../images/bg-welcome.png) 884px 28px no-repeat;
}

.welcome h1
{
	margin-left: -1px;
}

.welcome .splash
{
	position: absolute;
	left: 450px;
	top: 7px;
}

.welcome .splash img
{
	display: block;
}


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

.latest-news
{
	position: relative;
	padding: 13px 33px 11px 15px;
	margin-bottom: 9px;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
}

.latest-news h2
{
	position: absolute;
	left: 15px;
	width: 103px;
	margin: 0 10px 0 0;
	font-size: 1em;
}

.latest-news p
{
	padding: 0 130px 0 117px;
	margin-bottom: 0;
}

.latest-news .more
{
	position: absolute;
	top: 13px;
	right: 40px;
	padding: 0;
}


/*--------------------------------------------------------------------------
	=four-disciplines
----------------------------------------------------------------------------*/

.four-disciplines
{
	padding: 0 5px 0 8px;
	margin: 0;
	list-style: none;
}

.four-disciplines h2
{
	margin-bottom: 8px;
	color: #000;
}

.four-disciplines li
{
	position: relative;
	float: left;
	width: 199px;
	min-height: 125px;
	padding: 172px 30px 24px 7px;
	margin-right: 5px;
}

.four-disciplines p img
{
	position: absolute;
	left: 0;
	top: 0;
}

.four-disciplines .more
{
	position: absolute;
	bottom: 0;
	left: 8px;
}

.four-disciplines .more img
{
	position: static;
}

.four-disciplines .last
{
	margin-right: 0;
}


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

.footer
{
	padding: 10px 0 0 24px;
	border-top: 1px solid #999;
	font-size: 0.9em;
	color: #585858;
}

.footer p
{
	float: left;
	width: 668px;
}

.footer span
{
	margin-right: 9px;
}

.footer em
{
	color: #0BA4DF;
}

.footer .copyright
{
	float: right;
	width: 280px;
}

.footer .copyright span
{
	display: block;
	margin-bottom: 3px;
}

.footer ul {
	margin-left: 0;
	list-style: none;
	float: left;
	clear: left;
}

.footer ul li {
	float: left;
	margin-right: 10px;
}

.footer ul li a {
	display: block;
	border-right: 1px solid #0BA4DF;
	line-height: 1em;
	padding-right: 10px;
}

.footer ul li.last a {
	border-right: none;
}


/*--------------------------------------------------------------------------
	=blue-palette
----------------------------------------------------------------------------*/

.palette-default .intro
{
	background-image: url(../images/colours/bg-intro-blue-bottom.png);
}

.palette-default .intro div
{
	background-color: #65C6EB;
	background-image: url(../images/colours/bg-intro-blue-top.png);
	color: #fff;
}

.palette-default .map form
{
	background-color: #65C6EB;
}

.palette-default .nav .selected a 
{
	border-right-color: #65C6EB;
}

.palette-default .photo-browser .browser .selected
{
	background: #65C6EB url(../images/colours/bg-photo-gallery-blue-right.png) top right no-repeat;
}

.palette-default .photo-browser .browser .selected a
{
	color: #fff;
	background: transparent url(../images/colours/bg-photo-gallery-blue-left.png) top left no-repeat;
}


/*--------------------------------------------------------------------------
	=pink-palette
----------------------------------------------------------------------------*/

.palette-our-work .intro
{
	background-image: url(../images/colours/bg-intro-pink-bottom.png);
}

.palette-our-work .intro div
{
	background-color: #D00F81;
	background-image: url(../images/colours/bg-intro-pink-top.png);
	color: #fff;
}

.palette-our-work .map form
{
	background-color: #D00F81;
}

.palette-our-work .nav .selected a 
{
	border-right-color: #D00F81;
}

.palette-our-work .photo-browser .browser .selected
{
	background: #D00F81 url(../images/colours/bg-photo-gallery-pink-right.png) top right no-repeat;
}

.palette-our-work .photo-browser .browser .selected a
{
	color: #fff;
	background: transparent url(../images/colours/bg-photo-gallery-pink-left.png) top left no-repeat;
}



/*--------------------------------------------------------------------------
	=orange-palette
----------------------------------------------------------------------------*/

.palette-about-us .intro
{
	background-image: url(../images/colours/bg-intro-orange-bottom.png);
}

.palette-about-us .intro div
{
	background-color: #FFCC00;
	background-image: url(../images/colours/bg-intro-orange-top.png);
	color: #333;
}

.palette-about-us .map form
{
	background-color: #FFCC00;
}

.palette-about-us .nav .selected a 
{
	border-right-color: #FFCC00;
}

.palette-about-us .photo-browser .browser .selected
{
	background: #FFCC00 url(../images/colours/bg-photo-gallery-orange-right.png) top right no-repeat;
}

.palette-about-us .photo-browser .browser .selected a
{
	color: #fff;
	background: transparent url(../images/colours/bg-photo-gallery-orange-left.png) top left no-repeat;
}


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

.hidden
{
	position: absolute;
	left: -9999px;
}

.log-in th {
	padding-bottom:	10px;
	padding-right:	10px;
}

.main-content strong {
	font-weight: bold;
}

.content .sitemap ul {
	margin-left: 25px;
}

#frm-directions label {
	font-size: 0.8em;
	font-weight: normal;
}

#frm-directions #btn-submit {
	margin-bottom: 2px;
}

.main-content .content-container {
	width: 480px;
}

/*--------------------------------------------------------------------------
	=clear fixes
----------------------------------------------------------------------------*/

.header ul:after,
.content:after,
.footer:after,
.photo-browser .browser ul:after,
.contact:after,
.photo-browser:after
{
	content:				".";
	display:				block;
	clear:					both;
	height:					0;
	line-height:			0;
	visibility:				hidden;
}