/*---[ Details ]---------------------------------------
Site: www.soup.co.uk
Author: Lee Powell
Contact: lee.powell@soup.co.uk
Date Created: 02.05.2008
Date Modified: 15.08.2008
-------------------------------------------------------*/

/*-----------------------------------------------------
Site Structure:
[01] Container
[02] Header
[03] Content
[04] Navigation
[05] Footer
[06] Rollovers
[07] Image Replacements
[08] Clearfixes
[09] Accessible Hide
[10] Misc

Page Specific - Template Structures

Page Specific:
[01] Home
[02] News
[03] Creds
[04] Thoughts
[05] Work
[06] Clients
[07] About
[08] Project
[09] Client
[10] Get In Touch
[11] People
[12] Working At Soup
[13] Project Popup
-------------------------------------------------------*/


/*-----------------------------------------------------
Site Structure
-------------------------------------------------------*/
body {
	background: url('/media/site/images/front-end/branding/bg-site.gif');
	}

/* [01] Container
-------------------------------------------------------*/
#container {
	padding: 35px 45px;
	width: 885px;
	z-index: 1;
	position: relative;
	}

/* [02] Header
-------------------------------------------------------*/
#header {
	background: #FFF;
	padding: 27px 35px 0;
	position: relative;
	background: url('/media/site/images/front-end/navigation/bg-header-line.gif') 35px 97px no-repeat #FFF;
	}
#branding-logo {
	float: left;
	}

/* [03] Content
-------------------------------------------------------*/
#content {
	font-size: 1.4em;
	color: #5E6367;
	line-height: 1.2em;
	}
#content h1 {
	width: 700px;
	margin: 0;
	}

/* [04] Navigation
-------------------------------------------------------*/
#navigation-site {
	padding: 31px 0 0;
	margin: 0 0 0 10px;
	list-style: none;
	float: left;
	width: 601px;
	background: url('/media/site/images/front-end/navigation/bg-navigation-line.gif') 0 49px repeat-x;
	}
#navigation-site li {
	margin: 0;
	padding: 0 0 3px;
	float: left;
	}
#navigation-site li a {
	display: block;
	margin-right: 14px;
	height: 22px;
	background: url('/media/site/images/front-end/navigation/spr-navigation.gif') 0 0 no-repeat;
	text-indent: -9999px;
	}
#navigation-site li a.news {
	width: 53px;
	}
#navigation-site li.selected a.news,
#navigation-site li a.news:hover {
	background-position: 0 -23px;
	}
#navigation-site li a.creds {
	width: 54px;
	background-position: -58px 0;
	}
#navigation-site li.selected a.creds,
#navigation-site li a.creds:hover {
	background-position: -58px -23px;
	}
#navigation-site li a.work {
	width: 53px;
	background-position: -116px 0;
	}
#navigation-site li.selected a.work,
#navigation-site li a.work:hover {
	background-position: -116px -23px;
	}
#navigation-site li a.clients {
	width: 64px;
	background-position: -173px 0;
	}
#navigation-site li.selected a.clients,
#navigation-site li a.clients:hover {
	background-position: -173px -23px;
	}
#navigation-site li a.showreel {
	width: 123px;
	background-position: -302px 0;
	}
#navigation-site li.selected a.showreel,
#navigation-site li a.showreel:hover {
	background-position: -302px -23px;
	}
#navigation-site li a.about {
	width: 57px;
	margin-right: 120px;
	background-position: -241px 0;
	}
#navigation-site li.selected a.about,
#navigation-site li a.about:hover {
	background-position: -241px -23px;
	}
#navigation-site li a.people {
	width: 52px;
	background-position: 0 -45px;
	}
#navigation-site li.selected a.people,
#navigation-site li a.people:hover {
	background-position: 0 -64px;
	}
#navigation-site li a.thoughts {
	width: 94px;
	background-position: -262px -45px;
	}
#navigation-site li.selected a.thoughts,
#navigation-site li a.thoughts:hover {
	background-position: -262px -64px;
	}
#navigation-site li a.workingatsoup {
	width: 118px;
	background-position: -54px -45px;
	}
#navigation-site li.selected a.workingatsoup,
#navigation-site li a.workingatsoup:hover {
	background-position: -54px -64px;
	}
#navigation-site li a.soupmedia {
	width: 85px;
	background-position: -175px -45px;
	}
#navigation-site li.selected a.soupmedia,
#navigation-site li a.soupmedia:hover {
	background-position: -175px -64px;
	}
#navigation-site li a.people,
#navigation-site li a.thoughts,
#navigation-site li a.workingatsoup,
#navigation-site li a.soupmedia {
	margin-right: 9px;
	height: 19px;
	}
#navigation-site li a.contact {
	position: absolute;
	bottom: 5px;
	right: 35px;
	width: 113px;
	height: 22px;
	background-position: 0 -86px;
	margin: 0;
	}
#navigation-site li.selected a.contact,
#navigation-site li a.contact:hover {
	background-position: -114px -86px;
	}

/* [05] Footer
-------------------------------------------------------*/

/* [06] Rollovers
-------------------------------------------------------*/
a.rollover img {
	visibility: hidden;
	}

/* [07] Image Replacements
-------------------------------------------------------*/
.imr {
	display: block;
	text-indent: -9999px;
	}

/* [08] Clearfixes
-------------------------------------------------------*/
/* More info at: http://www.positioniseverything.net/easyclearing.html */
.clearfix:after,
.thumbnail-list:after,
#container:after,
#header:after,
#content:after,
.content-header:after,
ul.pagination:after,
ul#crumbtrail:after,
span.button:after,
#news .story:after,
#thoughts #thirdLevel:after,
#clients #clientlist:after,
#project #project-navigation:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
	}
.clearfix,
.thumbnail-list,
#container,
#header,
#content,
.content-header,
ul.pagination,
ul#crumbtrail,
span.button,
#news .story,
#thoughts #thirdLevel,
#clients #clientlist,
#project #project-navigation {
	display: block;
	}

/* [09] Accessible Hide
-------------------------------------------------------*/
.w3c,
#news h1,
#thoughts #thought-latest .thought-poster a span,
#work #content.cols2 .content-col2 h2,
#get-in-touch .vcard h2.org {
	position: absolute;
	display: block;
	height: 0;
	visibility: hidden;
	left: -9999px;
	}

/* [10] Misc
-------------------------------------------------------*/
/* Background Animations */
#bg-animation,
#bg-animation-2 {
	position: absolute;
	z-index: 0;
	width: 115px;
	height: 115px;
	left: 893px;
	top: 271px;
	background: url('/media/site/images/front-end/branding/bg-animation.gif') top left no-repeat;
	}
#bg-animation-2 {
	top: 826px;
	}

/* Weather */
#weather {
	text-indent: -9999px;
	position: absolute;
	width: 80px;
	height: 30px;
	top: 12px;
	right: 33px;
	}
#weather span {
	position: absolute;
	width: 80px;
	height: 30px;
	background: top left no-repeat;
	top: 0;
	left: 0;
	}
/* Weather - Cloudy */
#weather.c19 span,
#weather.c20 span,
#weather.c21 span,
#weather.c22 span,
#weather.c25 span,
#weather.c26 span {
	background-image: url('/media/site/images/front-end/weather/cloudy.gif');
	}
/* Weather - Fair Night */
#weather.c31 span,
#weather.c33 span {
	background-image: url('/media/site/images/front-end/weather/fair-night.gif');
	}
/* Weather - Hail */
#weather.c17 span {
	background-image: url('/media/site/images/front-end/weather/hail.gif');
	}
/* Weather - Mostly Cloudy Night */
#weather.c27 span {
	background-image: url('/media/site/images/front-end/weather/mostly-cloudy-night.gif');
	}
/* Weather - Mostly Cloudy */
#weather.c28 span {
	background-image: url('/media/site/images/front-end/weather/mostly-cloudy.gif');
	}
/* Weather - Partly Cloudy Night */
#weather.c29 span {
	background-image: url('/media/site/images/front-end/weather/partly-cloudy-night.gif');
	}
/* Weather - Partly Cloudy */
#weather.c30 span,
#weather.c44 span {
	background-image: url('/media/site/images/front-end/weather/partly-cloudy.gif');
	}
/* Weather - Rail and Hail */
#weather.c35 span {
	background-image: url('/media/site/images/front-end/weather/rain-and-hail.gif');
	}
/* Weather - Rain and Snow */
#weather.c5 span,
#weather.c8 span {
	background-image: url('/media/site/images/front-end/weather/rain-and-snow.gif');
	}
/* Weather - Showers */
#weather.c9 span,
#weather.c10 span,
#weather.c11 span,
#weather.c12 span,
#weather.c40 span {
	background-image: url('/media/site/images/front-end/weather/showers.gif');
	}
/* Weather - Sleet */
#weather.c6 span,
#weather.c7 span,
#weather.c18 span {
	background-image: url('/media/site/images/front-end/weather/sleet.gif');
	}
/* Weather - Snow */
#weather.c13 span,
#weather.c14 span,
#weather.c15 span,
#weather.c16 span,
#weather.c41 span,
#weather.c42 span,
#weather.c43 span,
#weather.c46 span {
	background-image: url('/media/site/images/front-end/weather/snow.gif');
	}
/* Weather - Sunny */
#weather.c32 span,
#weather.c34 span,
#weather.c36 span {
	background-image: url('/media/site/images/front-end/weather/sunny.gif');
	}
/* Weather - Thunderstorm */
#weather.c3 span,
#weather.c4 span,
#weather.c37 span,
#weather.c38 span,
#weather.c39 span,
#weather.c45 span,
#weather.c47 span {
	background-image: url('/media/site/images/front-end/weather/thunderstorm.gif');
	}
/* Weather - Windy */
#weather.c0 span,
#weather.c1 span,
#weather.c2 span,
#weather.c23 span,
#weather.c24 span {
	background-image: url('/media/site/images/front-end/weather/windy.gif');
	}

/* Quotes */
.dialog {
	font-size: 1.714em; /* 25px */
	color: #000;
	line-height: 1.1em;
	}

/* Strapline / Site Location */
.strapline,
.sitelocation {
	font-size: 1.285em; /* 18 px */
	line-height: 1.2em;
	margin-bottom: 6px;
	display: block;
	}

/* Dark Grey Button */
span.button.s1 a {
	background: #2B3131;
	}

/* Light Grey Button */
span.button.s2 a,
.thumbnail-list span.button.s2 a span,
#work .content-col2 span.button.s2 a span,
#client .content-col2 span.button.s2 a span {
	background: #5E6367;
	}

/* Very Dark Grey Button :P */
span.button.s3 a {
	background: #1D1E1E;
	}

/* Image Replacement Headings */
#index #content .content-col1 h2,
#index #content .content-col2 h2,
#index #content .content-col3 h2,
#creds #content .content-col2 h4,
#showreel #content .content-col2 h4,
#thoughts .content-col1 h2,
#thoughts .content-col2 h2,
#work .content-col1 h2 {
	height: 23px;
	text-indent: -9999px;
	margin-bottom: 5px;
	}

/* Unstyled Lists */
.thumbnail-list,
#thoughts .content-col2 #thirdLevel,
#clients #clientlist,
#project #project-navigation,
#get-in-touch #contact-emails,
#creds #contact-emails,
#showreel #contact-emails,
#working-at-soup #job-vacancies,
#jobs #job-vacancies {
	list-style: none;
	padding: 0;
	margin: 0;
	}

/* Client Link */
span.client {
	display: block;
	margin: 20px 0 5px;
	font-size: 0.857em; /* 12px */
	}
span.client a,
span.client a:hover {
	text-decoration: none;
	}
/* This is to highlight a client, with using a span instead of an achor i.e. the clients pages */
span.client span {
	color: #000;
	}

/* Thumbnail List */
.thumbnail-list li {
	width: 140px;
	padding: 0 10px 10px 0;
	float: left;
	position: relative;
	height: 170px;
	overflow: hidden;
	}
/* Thumbnail List - View Buttons */
.thumbnail-list li span.button {
	font-size: 0.857em; /* 12px */
	}
.thumbnail-list li span.button a {
	display: block;
	padding: 0;
	width: 140px;
	height: 104px;
	background: none;
	float: none;
	position: absolute;
	top: 0;
	left: 0;
	}
.thumbnail-list li span.button a span {
	display: block;
	padding: 2px 35px 2px 6px;
	color: #FFF;
	text-decoration: none;
	position: absolute;
	bottom: 0;
	left: 0;
	cursor: pointer;
	}
.thumbnail-list li span.button a:hover {
	background-color: transparent;
	text-decoration: none;
	}
#container .thumbnail-list li span.button a:hover span {
	background: #C03;
	text-decoration: none;
	}
/* Thumbnail List - Project Client */
.thumbnail-list .project-client {
	font-size: 0.785em; /* 11px */
	}
.thumbnail-list .project-client a {
	color: #5E6367;
	}
/* Thumbnail List - Project Name */
.thumbnail-list .project-name,
#thoughts .thumbnail-list .thought-title {
	color: #000;
	padding: 10px 0 1px;
	}

/* Off/On Anchor Decoration */
#index .thought-poster a,
.thumbnail-list li a {
	text-decoration: none;
	}
#index .thought-poster a:hover,
.thumbnail-list li a:hover {
	text-decoration: underline;
	}

/* Legal */
.legal-notes {
	font-size: 0.785em; /* 11px */
	color: #5E6367;
	}

	
/*-----------------------------------------------------
Page Specific - Template Structures
-------------------------------------------------------*/

/* Column Structure */
#thoughts #content.cols2 .content-col1,
#work #content.cols2 .content-col1,
#client #content.cols2 .content-col1 {
	width: 290px;
	}
#thoughts #content.cols2 .content-col2,
#work #content.cols2 .content-col2,
#client #content.cols2 .content-col2 {
	width: 450px;
	padding-left: 75px;
	padding-right: 25px;
	position: relative;
	}

	
/*-----------------------------------------------------
Page Specific
-------------------------------------------------------*/

/* [01] Home
-------------------------------------------------------*/
/* Latest */
#index .story {
	background: #2B3131;
	color: #5E6367;
	padding: 12px 15px ;
	margin: 0 0 5px;
	}
#index .story h3 {
	margin-bottom: 5px;
	}
#index .story h3 a {
	color: #CCC;
	text-decoration: none;
	}
#index .story .story-date {
	font-size:0.857em;
	display: block;
	margin: 0 0 3px;
	}
#index .story.first .story-date {
	font-size:0.757em;
	}
#index .story .story-nav,
#index .thought .thought-nav {
	margin: 5px 0 0;
	}
#index .story.first .story-nav {
	margin-top: 30px;
	}
#index .story.first h3 {
	font-size: 1.065em; /* 18px */
	font-weight:normal;
	}
#index .story h3 {
	font-size: 1.176em; /* No idea, it looks ok though */
	}	
#index .story.first {
	font-size: 1.156em; /* No idea */
	}
#index .story {
	font-size: 1em;
	}




/* Thoughts */
#index .thought {
	padding: 0 10px;
	font-size: 0.857em; /* 12px */
	line-height: 1.3em;
	}
#index .thought-poster {
	font-size: 0.833em; /* 10px */
	display: block;
	margin-bottom: 5px;
	}
#index .thought h3 {
	font-size: 1.166em; /* 14px */
	margin-bottom: 3px;
	font-weight: bold;
	}
.thought-nav form {
	margin: 0;
	}
#index .thought .thought-nav span {
	font-size: 1em; /* 12px */
	}




/* Scott's new addition */
#commentsContainer{
	clear:both;
}

#thoughts #viewAllCommentsButton {
	}

.ratingTop{
	display:none;
}

#otherComments{
	display:block;
}

#commentsContainer {
	padding-top:10px;
}

#commentsContainer h3{
	clear:both;
	margin:0;
	padding:0 0 4px 0;
}
#commentsContainer h4{
	padding:8px 0 3px 0;
	margin:0;
	color:#1D1E1E;
	font-size:14px;
}

#commentsContainer h4 span{
	color:#ff8888;
}

#commentsContainer p{
	color:#5E6367;
	font-size:11px;
	margin: 2px 0 2px 0;
}

#commentsContainer div.comment{
	margin: 0;
	padding: 0;
}

#commentsContainer p.operator span{
	float:right;
}

#commentsContainer p.poster span{
	color:#1D1E1E;
	font-weight:800;
}

#commentsContainer .greyed{
	background-color:#f8f8f8;
	border:1px solid #e8e8e8;
	margin-bottom:8px;
}

#commentsContainer .greyed br{
	clear:both;
}

#commentsContainer .greyed h4, #commentsContainer .greyed p, #commentsContainer .greyed p.poster span {
	color:#bbbbbb;
}

#addCommentForm{
	margin:0;
	padding:0;
}

#addCommentForm ul{
	padding:0;
	margin:0;
	overflow:hidden;
}

#addCommentForm ul li{
	padding:0;
	margin:0;
}

#addCommentForm ul li.label{
	margin-top:10px;
}

#addCommentForm ul li input,textarea{
	display:block;
	padding:0;
	margin:0;
	border:1px solid #444444;
	width:288px;
}

#thoughtMainImage{
	background-color:#000000;
	width:290px;
	height:215px;
}

/* End of Scott's additions */






/* Image Replacement Headings */
#index #content .content-col1 h2,
#index #content .content-col2 h2,
#index #content .content-col3 h2 {
	background-image: url('/media/site/images/front-end/home/spr-headings.gif');
	}
#index #content .content-col1 h2 {
	width: 63px;
	}
#index #content .content-col2 h2 {
	width: 98px;
	background-position: -63px 0;
	}
#index #content .content-col3 h2 {
	width: 155px;
	background-position: -161px 0;
	}

#index #content .content-col2 img,
#index #content .content-col3 img {
	margin-bottom: 10px;
	}

/* [02] News
-------------------------------------------------------*/
#news .story {
	margin-bottom: 30px;
	clear: both;
	}	
#news .story .story-header {
	padding: 20px 35px 0;
	}
#news .story img {
	float: left;
	margin: 0 15px 10px 0;
	}
#news .story .story-header h2 {
	width: 590px;
	margin: 0;
	padding-bottom: 10px;
	}
#news .content-header + .story .story-header h2 {
	font-size: 2.857em; /* 40px */
	}
#news .story .story-header p span {
	font-size: 0.857em;
	}
#news .story .story-content {
	float: left;
	width: 570px;
	padding: 0 15px 0 35px;
	}
#news .story blockquote {
	float: right;
	width: 205px;
	padding: 0 50px 0 10px;
	}
#news .story .story-header,
#news .story .story-content,
#news .story blockquote {
	background: #FFF;
	}
#news .story .story-content,
#news .story blockquote { 
	padding-bottom: 50px;
	}
#datebox {
	width: 268px;
	background: url('/media/site/images/front-end/news/bg-dropdown.gif') bottom right no-repeat;
	color: #FFF;
	font-size: 1.142em;
	display: none;
	padding: 0 4px 4px 0;
	float: left;
	cursor: pointer;
	}
#datebox span {
	display: block;
	padding: 0 0 2px 1px;
	background: url('/media/site/images/front-end/news/bg-dropdown-arrow.gif') 247px 5px no-repeat #2B3131;
	}
#pagerbox{
	position: absolute;
	top: 0px;
	left: 0px;
	display: none;
	z-index: 99;
	background-color: #FFF;
	border: 1px solid #DDD;
	}
#pagerbox a{
	display: block;
	width: auto;
	margin: 2px;
	border: 1px solid #FFF;
	text-decoration: none;
	}
#pagerbox a:hover{
	background-color: #EEE;
	border: 1px solid #DDD;
	}
#pagerbox a.selected{
	background-color: #F8F8F8;
	border: 1px solid #EEE;
	}
#news .rss {
	float: right;
	font-size: 0.857em; /* 12px */
	}

/* [03] Creds
-------------------------------------------------------*/
#creds #content .content-col1 {
	width: 515px;
	}
#creds #content .content-col2 {
	width: 290px;
	}
#creds #movie-creds {
	margin-bottom: 10px;
	}
#creds .button a {
	padding-right: 6px;
	min-width: 202px;
	}
#creds p.dialog {
	padding-bottom: 20px;
	}
#creds #content .content-col2 h4 {
	width: 95px;
	background: url('/media/site/images/front-end/creds/imr-enquires.gif') top left no-repeat;
	}

/* [04] Thoughts
-------------------------------------------------------*/	
#thoughts #content.cols2 .content-col1 h2,
#thoughts #content.cols2 .content-col2 h2 {
	background: url('/media/site/images/front-end/thoughts/spr-headings.gif') 0 0 no-repeat;
	}
#thoughts #content.cols2 .content-col1 h2 {
	width: 62px;
	}
#thoughts #content.cols2 .content-col2 h2 {
	width: 116px;
	background-position: -63px 0;
	}
#thoughts #content.cols2 .content-col2 h2.archive {
	width: 100px;
	background-position: -179px 0;
	}
#thoughts #thought-latest .thought-date,
#thoughts #thought-latest .thought-poster {
	font-size: 0.857em; /* 12px */
	}
#thoughts #thought-latest .thought-date {
	margin: 20px 0 0;
	float: left;
	}
#thoughts #thought-latest .thought-date span {
	color: #000;
	}
#thoughts #thought-latest .thought-content .button {
	float: right;
	margin: 18px 0 0;
	}
#thoughts #thought-latest .thought-content h3 {
	clear: both;
	padding-top: 10px;
	font-size: 1.785em; /* 25px */
	}
#thoughts #thought-latest .thought-poster {
	padding: 20px 0 0;
	}
#thoughts #thought-latest .thought-poster img {
	float: left;
	margin: -20px 10px 0 0;
	}
#thoughts #thought-latest .thought-poster span {
	display: block;
	font-size: 1.416em; /* 17px */
	color: #000;
	padding: 2px 0;
	}
#thoughts #thought-latest .button {
	margin: 10px 0;
	}
#thoughts .content-col2 #secondLevel {
	margin-bottom: 15px;
	}
#thoughts .content-col2 #secondLevel,
#thoughts .content-col2 #thirdLevel {
	clear: both;
	}
#thoughts .content-col2 #thirdLevel li {
	float: left;
	padding-right: 10px;
	width: 65px;
	}
#thoughts .content-col2 #secondLevel .thought-poster {
	line-height: 1.090em;
	font-size: 0.785em; /* 11px */
	}
#thoughts .content-col2 #secondLevel .thought-poster span{ 
	color:#000;
	font-weight:bold;
	}
#thoughts .thumbnail-list.edit li {
	height: 190px;
	}
#thoughts .thumbnail-list .thought-title {
	padding-bottom: 3px;
	}
#thoughts .thumbnail-list .thought-edit {
	margin-top: 5px;
	}
#thoughts .thumbnail-list .thought-edit a {
	font-size: 0.785em; /* 11px */
	}
#thoughts #thought-latest #thoughtForm {
	clear: both;
	margin: 0;
	}
#thoughts #thought-latest #thoughtForm h3 {
	font-size: 1em;
	}
#thoughts #thought-latest #thoughtForm div {
	clear: both;
	margin: 0 0 15px;
	}
#thoughts #thought-latest #thoughtForm label {
	display: block;
	margin: 0 0 5px;
	}
#thoughts #thought-latest #map {
	margin: 5px 0 0;
	clear: both;
	}
#thoughts #thought-latest #thoughtForm #map div {
	margin: 0;
	}
#thoughts #thought-latest #thoughtForm textarea,
#thoughts #thought-latest #thoughtForm #thoughtTitle {
	width: 280px;
	border: 1px solid #CCC;
	padding: 3px;
	font-size: 1em;
	}
#thoughts #thought-latest #thoughtForm #thoughtFile,
#thoughts #thought-latest #thoughtForm #submit {
	font-size: 0.928em; /* 13px */
	}
#thoughts #thought-latest #thoughtForm textarea {
	margin: 0;
	}
#thoughts #thought-latest #thoughtForm #thoughtTitle {
	display: block;
	}
#thoughts #loginBar {
	padding: 10px 35px 0;
	background: #FFF;
	font-size: 1.1em;
	}
#thoughts #thought-latest #thoughtForm.edit,
#thoughts #thought-latest #thoughtForm.add {
	padding: 15px 0;
	}
#thoughts #thought-latest #thoughtForm.edit #map,
#thoughts #thought-latest #thoughtForm.add #map {
	position: relative;
	top: -10px;
	margin: 0 0 5px;
	}
#thoughts #closeImageLayerDiv{
	background-color:#4d4e4e;
	color:#ffffff;
	z-index:9999;
	position:absolute;
	top:0;
	left:0;
	padding:10px 0 10px 0;
	font-size:1.8em;
	font-weight:bold;
	cursor:pointer;
	text-align:center;
}
#thoughts #movingLayerDiv {
	border: 1px solid black;
	padding: 0;
	margin: 0;
	background-color: transparent;
	position: absolute;
	}
#thoughts #shareLinkBox {
	position: absolute;
	padding: 0;
	margin: 0;
	background-image: url('/media/site/images/front-end/thoughts/share_bg.png');
	width: 118px;
	height: 160px;
	top: -1000px;
	left: 0;
	z-index: 4000;
	}
#thoughts #shareLinkText {
	margin: 13px 20px;
	padding: 0;
	}
#thoughts #shareLinkText ul {
	list-style: none;
	padding: 0;
	margin: 0;
	}
#thoughts #shareLinkText ul li {
	margin-bottom: 6px;
	padding-left: 20px;
	min-height: 12px;
	line-height: 12px;
	background: top left no-repeat;
	}
#thoughts #shareLinkText ul li.delicious {
	background-image: url('/media/site/images/front-end/thoughts/img-delicious.gif');
	}
#thoughts #shareLinkText ul li.digg {
	background-image: url('/media/site/images/front-end/thoughts/img-digg.gif');
	}
#thoughts #shareLinkText ul li.reddit {
	background-image: url('/media/site/images/front-end/thoughts/img-reddit.gif');
	}
#thoughts #shareLinkText ul li.technorati {
	background-image: url('/media/site/images/front-end/thoughts/img-technorati.gif');
	}
#thoughts #shareLinkText ul li.sphinn {
	background-image: url('/media/site/images/front-end/thoughts/img-sphinn.gif');
	}
#thoughts #shareLinkText ul li.newsvine {
	background-image: url('/media/site/images/front-end/thoughts/img-newsvine.gif');
	}
#thoughts #shareLinkText ul li.twitter {
	background-image: url('/media/site/images/front-end/thoughts/img-twitter.gif');
	}
#thoughts #shareLinkText a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1em; /* 11px */
	color: #FFF;
	text-decoration: none;
	}
#thoughts #shareLinkText a:hover {
	color: #CCC;
	}
#thoughts #shareLinkClose {
	position: absolute;
	top: 130px;
	right: 15px;
	width: 16px;
	height: 16px;
	overflow: hidden;
	text-decoration: none;
	background-image: url('/media/site/images/front-end/thoughts/close_share_thought.gif');
	}
#thoughts #thoughtUserDropDown {
	position: absolute;
	top: 210px;
	left: 616px;
	padding: 0;
	margin: 0;
	z-index: 1000000;
	}
#thoughts #shareThoughtButton {
	display: none;
	}
#thoughts .thumbnail-list li span.button a {
	height: 103px;
	}
	
/* [05] Work
-------------------------------------------------------*/
#work #content.cols2 .content-col2 {
	padding-top: 28px;
	}
#work .content-col1 h2 {
	background: url('/media/site/images/front-end/work/spr-headings.gif') top left no-repeat;
	}
#work .content-col1 .work-latest-content {
	margin-bottom: 20px;
	}
#work .content-col1 h3 {
	font-size: 1.785em; /* 25px */
	}
#work .content-col2 #work-projects .project-name,
#work .content-col2 #work-projects .project-name a {
	color: #000;
	}

/* [06] Clients
-------------------------------------------------------*/
#clients #clientlist {
	padding-bottom: 100px;
	}
#clients #clientlist li {
	float: left;
	margin-right: 10px;
	width: 140px;
	height: 104px;
	position: relative;
	border: 1px solid #DEDEDE;
	}
#clients #clientlist li a {
	position: absolute;
	top: 0;
	left: 0;
	width: 140px;
	height: 104px;
	background: url('/media/site/images/front-end/clients/bg-linkarrow.gif') 125px 85px no-repeat;
	text-indent: -9999px;
	}

/* [07] About
-------------------------------------------------------*/
#about h1 {
	width: 670px;
	}
#about #content .content-col1 {
	width: 440px;
	padding-right: 85px;
	}
#about #content .content-col1 span.button {
	margin-top: 20px;
	}
#about #content .content-col2 {
	width: 290px;
	}

/* [08] Project
-------------------------------------------------------*/
#project h1 {
	width: auto;
	margin: 0 0 20px;
	}
#project .content-header {
	padding-bottom: 29px;
	}
#project #content.cols2 .content-col1 {
	width: 355px;
	padding-right: 10px;
	}
#project #content.cols2 .content-col2 {
	width: 475px;
	padding-left: 10px;
	padding-right: 0;
	}
#project #project-content {
	padding-right: 65px;
	margin-bottom: 20px;
	}
#project #project-navigation {
	padding-top: 20px;
	}
#project #project-navigation li {
	float: left;
	margin: 0;
	}
#project #project-navigation li.next {
	float: right;
	}
#project #project-content .project-intro {
	font-size: 1.714em; /* 25px */
	color: #000;
	line-height: 1.1em;
	margin-bottom: 20px;
	}
#project .project-mainimage {
	margin-bottom: 30px;
	}
#project .project-mainimage img {
	margin-bottom: 10px;
	}
#project #project-additionalimages {
	padding-right: 25px;
	}
#project #project-additionalimages img {
	margin: 0 10px 10px 0;
	vertical-align: top;
	}
#project .project-mainimage,
#project #project-additionalimages p {
	padding-right: 35px;
	}

/* [09] Client
-------------------------------------------------------*/
#client .content-col1 .client-intro {
	font-size: 1.785em;
	color: #000;
	line-height: 1.1em;
	}
#client .content-col1 .client-content {
	margin-bottom: 20px;
	}

/* [10] Get In Touch
-------------------------------------------------------*/
#get-in-touch .vcard {
	font-size: 1.571em; /* 22px */
	color: #2B3131;
	margin-bottom: 25px;
	}
#get-in-touch .vcard div {
	margin-bottom: 10px;
	}
#get-in-touch .vcard .office,
#get-in-touch .vcard .adr {
	font-size: 0.636em; /* 14px */
	margin-bottom: 0;
	}
#get-in-touch .vcard .office {
	margin-bottom: 5px;
	}
#get-in-touch .vcard .adr {
	color: #666;
	}
#get-in-touch #contact-emails {
	margin: 15px 0 25px;
	}
#get-in-touch #contact-emails li,
#showreel #contact-emails li,
#creds #contact-emails li {
	margin: 0 0 4px;
	}
#get-in-touch #contact-emails .button a {
	min-width: 179px;
	padding-right: 0;
	}
#get-in-touch .content-col2 {
	text-align: right;
	}
#get-in-touch .content-col2 img {
/*	margin-top: -40px;*/
	}

/* [11] People
-------------------------------------------------------*/
#people .content-flash {
	background: #FFF;
	}

/* [12] Working At Soup
-------------------------------------------------------*/
#working-at-soup #content .content-col1,
#jobs #content .content-col1 {
	width: 525px;
	padding-right: 0px;
	padding-bottom: 145px;
	background-image: url('/media/site/images/front-end/workatsoup/bg-col1.gif');
	background-position: 25px bottom;
	background-repeat: no-repeat;
	}
#jobs #content .content-col1 {
	background-image: url('/media/site/images/front-end/workatsoup/bg-col1-jobs.gif');
	background-position: 35px bottom;
	padding-bottom: 160px;
	}
#working-at-soup #content .content-col2,
#jobs #content .content-col2 {
	width: 215px;
	padding-left: 75px;
	padding-top: 200px;
	background-image: url('/media/site/images/front-end/workatsoup/bg-col2.gif');
	background-position: 75px 0;
	background-repeat: no-repeat;
	}
#working-at-soup .content-col1 .content-wrapper,
#jobs .content-col1 .content-wrapper {
	margin: 15px 0;
	padding-right: 50px;
	}
#working-at-soup #job-vacancies li,
#jobs #job-vacancies li {
	margin-bottom: 4px;
	}
#working-at-soup #job-vacancies span.button a,
#jobs #job-vacancies span.button a {
	width: 174px;
	}
#jobs #content.internship h1,
#jobs #content.internship .content-header h2 {
	font-size: 2.14em;
	margin-bottom: 0;
	width: 450px;
	}
#jobs #content.internship h1 {
	margin-top: 25px;
	color: #C03;
	}
#jobs #content.internship .content-header h2 {
	margin-bottom: 10px;
	}
#jobs #content.internship .content-col1 {
	background-image: none;
	padding-bottom: 65px;
	}
#jobs #content.internship .content-col2 {
	padding-top: 0;
	background-image: none;
	margin-top: -85px;
	padding-bottom: 280px;
	}
#jobs #content.internship .content-col2 h2 {
	margin-bottom: 20px;
	}
#jobs #content.internship .content-col2 p {
	font-style: italic;
	margin-bottom: 20px;
	}

/* [13] Project Popup
-------------------------------------------------------*/
#project-popup h1,
#project-popup h2 {
	font-size: 1em;
	font-weight: normal;
	width: 500px;
	float: left;
	line-height: normal;
	}
#project-popup h1 {
	color: #F60;
	}
#project-popup #content {
	background: #FFF;
	width: 824px;
	height: 670px;
	margin: 10px 15px;
	padding: 15px;
	}
#project-popup #content #flash-background {
	background-position: top left;
	background-repeat: no-repeat;
	width: 824px;
	height: 595px;
	position: relative;
	clear: both;
	}
#project-popup #navigation {
	float: right;
	}
#project-popup #navigation span {
	display: inline;
	float: left;
	margin-left: 10px;
	}
	
	
	
	
/* [14] Showreel
-------------------------------------------------------*/
#showreel #content .content-col1 {
	width: 515px;
	}
#showreel #content .content-col2 {
	width: 290px;
	}
#showreel #movie-showreel {
	margin-bottom: 10px;
	}
#showreel .button a {
	padding-right: 6px;
	min-width: 202px;
	}
#showreel p.dialog {
	padding-bottom: 20px;
	}
#showreel #content .content-col2 h4 {
	width: 95px;
	background: url('/media/site/images/front-end/creds/imr-enquires.gif') top left no-repeat;
	}	
	
	
#buildkit h3.element-heading {
	border-bottom: 1px solid #CCC;
	margin-top: 20px;
	}

/* Scott added rules for staff list */
#staffList{
	background-color:#ffffff;
}

#staffList ul{
	padding:0;
	border:0;
	margin:0 auto 0 auto;
}

#staffList ul li{
	display:inline;
	float:left;
	margin:58px;
	padding:12px;
	border:1px solid #aaaaaa;
	background-color:#ffffff;
}

#staffList ul li p{
	margin:0 auto 0 auto;
	text-align:center;
	font-size:11px;
}

#staffList span{
	display:block;
	clear:both;
}

/* Scott added rules for phone application page specific styles */
div.phoneDivs div table{
	border-collapse:collapse;
	float:left;
	border:2px solid white;
	padding:0;
	margin:0;
}
div.phoneDivs div table tr td{
	padding:0;
	border:0;
	margin:0;
}
.phoneDivs div{
	clear:both;
	display:block;
	padding:5px;
	border:1px solid #bbbbbb;
	margin:0 0 20px 0;
}
.phoneDivs div div{
	clear:none;
	display:block;
	padding:0 5px 0 px;
	margin:0 0 20px 0;
	padding:0 8px 0 8px;
	float:left;
	border:none;
}
.phoneDivs div h2,p{
	width:auto;
	max-width:400px;
	margin:0 0 4px 0;
	padding:0;
}
.phoneDivs div p{
	font-size:11px;
	color:#666666;
}
.phoneDivs div h2{
	font-size:16px;
}
.phoneDivs hr {
	clear:both;
	visibility:hidden;
	height:1px;
	overflow:hidden;
	margin:0;
	padding:0;
	border:0;
}

/* Freelance pages */

#freelancerDetailTable {
	width:100%;
	margin:0;
}

#freelancerDetailTable ul{
	margin:0;
	padding:0;
}

#freelancerDetailTable ul li {
	padding:0;
	margin:2px 0 0 0;
	list-style-type:none;
	list-style-image:none;
}

#freelancerDetailTable tr td table {
	border:2px solid white;
}

#freelancerDetailTable tr td table tr td{
	padding:0;
}

#freelancerDetailTable tr td.error label{
	color:#ff0000;
}

#freelancerDetailTable td {
	border:none;
	padding-top:0;
	padding-bottom:0;
}

#freelancerDetailTable td.first {
	padding-top:10px;
}

#freelancerDetailTable td.right{
	text-align:right;
}

#freelancerDetailTable td.formEl {
	padding-bottom:10px;
}

#freelancerDetailTable td input.submitButton{
	border:1px solid black;
	width:120px;
}

#freelancerDetailTable td input.bb{
	border:1px solid black;
}

#freelanceTabbedForm {

}

#freelanceTabbedForm ul.flTabBar{
	margin:0 0 0 5px;
	padding:0;
	border:0;
	display:block;
 	height:24px;
 }

#freelanceTabbedForm ul.flTabBar li {
	display:block;
	position:relative;
	top:2px;
	float:left;
	list-style-image:URL(null);
	margin:0 0 1px 3px;
	padding:0;
	border:1px solid #aaaaaa;
	color:#999966;
	top:4px;
	line-height:18px;
}

#freelanceTabbedForm ul.flTabBar li.active {
	border-bottom:1px solid white;
	top:2px;
	padding-top:2px;
}

#freelanceTabbedForm ul.flTabBar li a {
	text-decoration:none;
	color:#444444;
	display:block;
	width:auto;
	padding-left:5px;
	padding-right:5px;
}

#freelanceTabbedForm ul.flTabBar li.active a {
	color:#000000;
}

#freelanceTabbedForm ul.flTabBar li a:hover {
	background-color:	#cccccc;
	color:				#ffffff;
}

#freelanceTabbedForm ul.flTabBar li.active a:hover {
	background-color:	#ffffff;
	color:				#000000;
}

#freelanceTabbedForm div #freelancerDetailTable tbody tr td h2{
	font-size:14px;
	margin:0 0 4px 0;
}

#freelanceTabbedForm div #freelancerDetailTable h2{
	padding:4px;
	margin:0;
}

#jobPicker{
	width:100%;
	border-collapse:separate;
	border-spacing:1px;
}

#jobPicker tbody tr th{
	text-align:left;
	background-color:#dddddd;
	font-weight:800;
}

#jobPicker tbody tr th.right,td.right{
	text-align:right;
}

#jobPicker tbody tr td hr{
	display:block;
	border:0;
	margin:4px 0 4px 0;
	background-color:#dddddd;
	height:4px;
	width:100%;
}

/* Calendar styling (front and backend use the same styling) */

td.first table#soupCal {
	border-collapse:collapse;
	border:1px solid black;
	padding:2px;
}
td.first table#soupCal tbody tr th{
	text-align:center;
	padding:4px;
	border:1px solid #888888;
}
td.first table#soupCal tbody tr td{
	vertical-align:middle;
	text-align:center;
	width:60px;
	height:50px;
	padding:4px;
	border:1px solid #888888;
	font-size:14px;
}
td.first table#soupCal tbody tr td.pad{
	background-color:#dddddd;
}
td.first table#soupCal tbody tr td.noPadding{
	height:25px;
	padding:0;
}
td.first table#soupCal tbody tr td.noPadding table#calHeaderTable {
	width:447px;
	margin:1px;
}

td.first table#soupCal tbody tr td.noPadding table#calHeaderTable tbody tr td{
	border:0;
}

td.first table#soupCal tbody tr td.noPadding table#calHeaderTable tbody tr td.calButton{
	width:1%;
	height:25px;
	padding:4px;
}
/* Nice long selectors ;-) */
td.first table#soupCal tbody tr td.noPadding table#calHeaderTable tbody tr td.calDateHeader{
	width:99%;
	height:25px;
	padding:4px;
}
.available-available{
	background-color:#ddffdd;
}
.available-unavailable{
	background-color:#ffdddd;
}
.available-booked{
	background-color:#ffffdd;
}
.available-default{
	background-color:#ffffff;
}

#soupCal tr td span{
	clear:both;
	font-size:9px;
}
div#soupCalFloaty{
	position:absolute;
	top:0;
	left:0;
	width:250px;
	height:250px;
	border:1px solid black;
	z-index:100;
	overflow:hidden;
}
div#soupCalFloatyB{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:250px;
	font-size:100px;
	text-align:center;
	vertical-align:middle;
	z-index:101;
}
div#soupCalFloatyF{
	position:absolute;
	top:5px;
	left:5px;
	width:240px;
	height:240px;
	font-size:12px;
	text-align:left;
	z-index:102;
	padding:2px;
}
table#calCellEdit{
	margin:0;
	padding:0;
	border-collapse:collapse;
	width:100%;
}
table#calCellEdit tbody {
	margin:0;
	padding:0;
}
table#calCellEdit tbody tr td{
	border:none;
	background-color:none;
	padding:2px;
	margin:0;
	width:100%;
}
table#calCellEdit tbody tr td select{
	margin:0;
	padding:0;
	width:100%;
}
table#calCellEdit tbody tr td textarea{
	margin:0;
	padding:0;
	width:232px;
	height:85px;
	font-size:10px;
}
table#calCellEdit tbody tr td input.button{
	font-size:10px;
	color:#000000;
	border:1px solid black;
	background-color:#ffffff;
	margin:0;
	width:64px;
}