@charset "utf-8";

/* Teabagstudios.com Redesign 2008 */

/*** Grids ***/

	body { font-family:Arial, Helvetica, sans-serif; height:100%; font-size:62.5%; background:#111111; }
	
	#container { width:960px; padding:0px 10px; font-size:1.25em; color:#ffffff; margin:0px auto; }
	
	#header {width:960px; }
	
	#bannerWrap { 
		position:relative;
		width:960px;
		height:105px;
		clear:both;
		/* background:url(../images/teabag-3d.jpg) bottom right no-repeat; */
	}
	
	#mainContent {width:960px; position:relative; min-height:400px; }
	
	#footer { width:100%; height:50px;  }
	
	#footerContents { width:960px; border-top:1px solid #410014; margin:0px auto; padding-top:20px; }
	
	.clear { clear:both; height:0px; line-height:0px; font-size:0px; }
	
	.hidden { display:none; }

	hr
	{ 
		background-color:#320C18;
		color:#320C18;
		width: 100%;
		height: 1px;
		border: 0;
		float:left;
		margin:5px 0px;
	}
	
	#mainContent.news hr, #mainContent.projectDetail hr { float:none; }

	#subHeader { float:right; padding-top:35px; width:740px; }
	
	.smallCol { width:300px; padding:0px; margin-right:20px; height:auto; float:left;}
	
	.smallCol p, .newsItemWrap p { margin:10px 0px; line-height:1.4em; }
	
	.longCol { width:640px; position:relative; float:left; margin-bottom:20px;}
	
	.shortRightCol { width:265px; position:relative;  float:right; margin-bottom:20px;}
	
	
	
	
/*** === Global Typography & Colour ==== ***/


	
	a { color:#33C1D9; text-decoration:none; outline:none; }
	
	a:hover { color:white; }
	
	#mainContent h2 { font-size:28px; color:#770127; margin:5px 0px 10px 0px; line-height: 1em; clear:both; display: block;}
	
	#mainContent h4 { font-size:16px; color:#33C1D9; font-weight:bold; margin-bottom:10px; }
	
	#mainContent .news h4 {	height: 45px; }
	

/*** Grid Elements ***/


/*** Header Structure ***/
	
	
	h1#logo { 
		height:60px;
		float:left;
		width:170px;
		margin-top:15px;
		background:url(../images/logo.gif) no-repeat;
		text-indent:-9999px;
	}
	
	h1 a { display: block; height: 60px; width: 100%;}
	
	ul#menu { float:left; margin-top:4px;}
	ul#menu li { display:inline; }
	
	ul#search { float:right; margin-left:20px;  }
	ul#search li { float:left;   }
	ul#search #teabagSearch { float:left; }
	
	input#search_term { 
			width:175px;
			font-size:11px;
			font-weight:bold;
			color:#AB4E68;
			margin-right:10px;
			border:0px;
			background:url(../images/searchInpt.gif) no-repeat;
			padding:5px; 
			height:14px;
	}

	input#goSearch {  width:37px; height:24px; background:url(../images/goBtn.gif) no-repeat 0px 1px; color:white; font-weight:bold; border:0px; cursor:pointer; }

/*** Banner Structure ***/
	
	
	#bannerWrap	h2 { font-size:1.4em; color:#fff; margin:5px 0px; }
	
	#bannerWrap h3 { font-size:1.4em; color:#858585; }
	
	ul#services {  width:300px;  margin-top:0px; float:left; }
	
	ul#services li { margin:2px 0px; float:left; }
	
	#bannerWrap #banner { float:right;  }



/*** Menus **/
	
	ul#menu a { 
		height:20px;
		display:block;
		float:left;
		text-align:center;
		margin-right:3px;
		background-image:url(../images/mainMenu.gif); 
		text-indent:-9999px;
	}
		
	
	ul#menu a#home { background-position:0px 40px; width:55px; }
	ul#menu a#home:hover,ul#menu a#home.on { background-position:0px 60px;}
	
	ul#menu a#portfolio { background-position:-58px 40px; width:75px; }
	ul#menu a#portfolio:hover, ul#menu a#portfolio.on { background-position:-58px 60px; }
	
	ul#menu a#services { background-position:-136px 40px; width:75px; } 
	ul#menu a#services:hover, ul#menu a#services.on { background-position:-136px 60px; }
	
	ul#menu a#about { background-position:-213px 40px; width:56px; } 
	ul#menu a#about:hover, ul#menu a#about.on { background-position:-213px 60px; }
	
	ul#menu a#showreel { background-position:-272px 40px; width:81px;} 
	ul#menu a#showreel:hover,ul#menu a#showreel.on { background-position:-272px 60px;} 
	
	ul#menu a#news { background-position:-357px 40px; width:51px;} 
	ul#menu a#news:hover, ul#menu a#news.on { background-position:-357px 60px; } 
	
	ul#menu a#contact{ background-position:-411px 40px; width:63px; } 
	ul#menu a#contact:hover, ul#menu a#contact.on { background-position:-411px 60px; }

/*** Services Menu ***/
	
	ul#services a { 
		display:block;
		height:28px; 
		width:175px; 
		background:url(../images/servicesMenu.gif) no-repeat; 
		text-indent:-9999px; 
		width:140px;		
		}
	
	ul#services a#web { background-position:0px 0px; }
	ul#services a#web:hover, ul#services a#web.on { background-position:0px -30px; }
	
	ul#services a#bandp { background-position:0px -60px; }
	ul#services a#bandp:hover, ul#services a#bandp.on { background-position:0px -90px; }
	
	ul#services a#motion { background-position:0px -120px; }
	ul#services a#motion:hover, ul#services a#motion.on { background-position:0px -150px; }
	
	ul#services a#visualisation { background-position:0px -180px; width:150px; }
	ul#services a#visualisation:hover, ul#services a#visualisation.on { background-position:0px -210px; }



/* == Homepage */

	#mainContent.home { }

		#latestProjects { margin:0px 0px 10px 0px; clear:both;}
		
		#latestProjects .projectThumbWrap.first { margin-left:20px; } 
		#latestProjects .projectThumbWrap.last { margin-right:0px; } 
		
		#latestProjects .projectThumbWrap { width:141px; margin-right:53px; padding:0px 2px; float:left; }
		
		#latestProjects .projectThumbWrap img { border:1px solid white; margin:0px auto; display:block;}
		
		#latestProjects .projectThumbWrap dd { margin:5px 0px; }
		
		
		#latestNews { clear:both; }
		
		
		.datebox {	background-image:url(../images/dateIcon.jpg); background-repeat:no-repeat; float:left;	height:45px; margin-right:15px; padding-top:0px; text-align:center;	width:41px; }
		
		.datebox span.holder {display:block; line-height:15px; position:relative; text-align:center; top:8px; width:40px; }	
		
		.datebox span.holder span.date { font-size:1.4em; font-weight:bold; }	
	
		.datebox span.holder span.month { font-size:0.9em }	
		
		.smallCol.news .newstxt { line-height:1.35em; }

		p.more { text-align:right; clear:both; margin:5px 0px 10px 0px; }
	
	
	
	
/** News Page **/

	#mainContent.news .shortRightCol ul { margin-left:20px; width:225px; }
	
	#mainContent.news .longCol .newsItemWrap { margin:20px 0px 20px 20px;}

/* My Comment */
	#mainContent.news .longCol .newsItemWrap h4 { padding-top:20px; }
	#mainContent .shortRightCol ul#tagcloud { text-align:center; }
	#mainContent .shortRightCol ul#tagcloud li { display:inline; }
	#mainContent .shortRightCol ul#tagcloud li.smaller { font-size:0.8em; }
	#mainContent .shortRightCol ul#tagcloud li.small { font-size:1em; }
	#mainContent .shortRightCol ul#tagcloud li.medium { font-size:1.5em; }
	#mainContent .shortRightCol ul#tagcloud li.large { font-size:1.8em; }
	#mainContent .shortRightCol ul#tagcloud li.larger { font-size:1.3em }
	
	.news-footer span.author { display:block; position:relative; top:25px; float:left;  }

	#mainContent.news .commentsBox { 	background:url(../images/commentBg.jpg) no-repeat; 
										font-size:0.9em;
										height:42px;
										margin:10px 0px;
										padding-top:5px;
										text-align:center;
										width:82px;
									}
	
	a.rssRoll { height:40px; width:220px; display:block; background:url(../images/rssRollover.png) no-repeat; text-indent:-9999px; position:relative; top:-10px; }
	a.rssRoll:hover { background-position: 0 100%;}
	
	#mainContent.news hr { clear:both; }
	.news-footer { clear:both; position:relative; }
	
	.news-footer .commentsBox { float:left; margin-right:15px !important;}
	
	/*** === news detail page === ***/

	#mainContent.news .longCol .newsItemWrap p.newstxt	img { margin:10px 0px; }
	
	#mainContent.news .longCol .socialBookmarks { float:right; position:relative; }
	#mainContent.news .longCol .socialBookmarks h5 { color:#33C1D9; font-weight:bold; font-size:1.4em; margin-bottom:10px; }
	#mainContent.news .longCol .socialBookmarks ul li  { display:inline; margin:0px 5px; }
	#mainContent.news .longCol .socialBookmarks a.help { position:absolute; top:0px; right:0px; }
	
	#mainContent.news.detail .commentsBox {float:left; }
	
	.datebox.comment {	background-image:url(../images/commentDate.gif);  height:55px;	}
	
	li.captcha { margin-left:114px; }
	li.captcha p { padding-bottom:5px; width:320px;}
	
	/* comments section */

	fieldset#commentForm { margin-left:20px; }
	fieldset#commentForm label { float:left; padding:5px; display:block; width:100px;}
	fieldset#commentForm ul li { clear:both; padding:10px 0px; width:430px;}
	fieldset#commentForm ul li input, fieldset#commentForm ul li textarea  { width:300px; border:0px; margin:5px; padding:5px; }
	fieldset#commentForm textarea { height:200px; }
	fieldset#commentForm ul li.submit input { width:104px; height:50px; padding:0px; margin:0px;}
	fieldset#commentForm ul li.submit { text-align:right; }
	
/*** === Portfolio page ==== ***/		


	#mainContent.portfolio #filterCol { width:165px; float:left;}

	#mainContent.portfolio #filterCol ul { margin-left:20px; }
	
	#mainContent.portfolio #thumbWrap { float:left; margin-bottom:20px; max-width:780px; /*safari fix*/}
	
	#mainContent.portfolio #thumbWrap .thumb { width:175px; margin:10px; float:left; height:150px; }
	#mainContent.portfolio #thumbWrap .thumb a img { border:1px solid #ffffff; }
	#mainContent.portfolio #thumbWrap .thumb a:hover img { border:1px solid #00CCFF; }
	
	#mainContent.portfolio #thumbWrap .thumb h5 {font-size:1.2em; margin-top:5px; color:#00CCFF; font-weight:bold;}
	#mainContent.portfolio #thumbWrap .thumb h6 {font-size:1.2em; font-weight:bold; color:#999999;}
	#mainContent.portfolio #thumbWrap .thumb h6 a {color:#999999;}
	#mainContent.portfolio #thumbWrap .thumb h6 a:hover {color:#ffffff;}
	


/*** ===== Project Detail Page ======= ***/

	ul#breadcrumb { position:relative; margin:0px 0px 15px 0px;}
	
	ul#breadcrumb li { display:inline; }
	
	ul#breadcrumb li.seperator { color:#33C1D9; }
	
	.projectImages { margin: 5px 0 20px 0px; }
	
	.projectImages img { margin:20px 0px; }
	
	.projectFlash { margin: 15px 20px; clear: both; display: block; }
	 
	ul.similarProjects { margin-left:20px; }
	
	.projectDesc { float:left; width:430px; margin:0px 40px 5px 0px; }
	
	.projectDesc p { margin:10px 0px; line-height:1.5em; }
	
	.deliverables { float:left; width:170px; text-align:right;  line-height:1.5em; margin-bottom:10px;}
	
	.deliverables h5, .externalLinks h5{ font-size:1.1em; font-weight:bold; margin-bottom:5px; border-bottom:1px solid #320C18; }
	
	.externalLinks { margin-top:15px; }
	
/*** ======= Services Page ======= ***/

	.smallCol.serviceThumbs img {  margin:0px 2px 2px 2px; border:1px solid white; }
	
	#mainContent.services .smallCol p { line-height:1.5em; margin-bottom:20px; }

	#mainContent.services p.more { text-align:left; margin-bottom:15px; }
	

/*** ====== About us ==== ***/

	#mainContent.about .smallCol.aboutUs2 { padding-top:53px; }
	
	#mainContent.about .smallCol { margin-left:0px; margin-bottom:20px; margin-right:20px; }
	
	div.aboutWrap { float:left; width:640px; }

/*** ==== Search Results === **/

	#newsletter input { width:215px; border:0px; padding:5px; }
	
	#newsletter input#subscribe { 
		background-color:#902B49;
		border:1px solid #410014;
		color:white;
		padding:5px;
		width:100px; 
	}
			
	#newsletter p { margin:10px 0; }
	
	#newsletter fieldset { padding:0px; }
	
	#mainContent.searchResults .longCol .newsItemWrap { margin:20px 0px 20px 20px;}
	
	#mainContent.searchResults .longCol .newsItemWrap h4 { padding-top:20px; }

/*** === Contact Us ==== ***/
	
	#mainContent.contact #enquiry {width:265px; }
	
	ul.address { margin:10px 0px; display: block; }
	
	#mainContent.contact #enquiry ul li { margin:5px 0px; }

	#mainContent.contact #enquiry input, #mainContent.contact #enquiry textarea { width:265px; padding:5px; border:0px; }

	#mainContent.contact #enquiry .esend { width:81px; height:26px;  margin-left:190px;}

	.addressHead { display:block; font-size:1.4em; margin: 0 0 5px 0; }
	
	.smallCol p.compReg { font-size:0.8em; margin-top:25px; }
	
	
/********
 * Forms Style And Structure
 */

	.ryform { 
				display:block;
	}
	
	.ryform em.ast { 
				color:#96C61C;
				font-size:11px; 
	}
	
	.ryform li { 
				padding:5px 0px; 
	}
	
	.ryform li.radio {
		float:left;
		padding:0px 10px;
	}
	
	.ryform li.radio label {
		display:inline;
		padding-right:5px;
	}
	
	.ryform li.radio input {
		position:relative;
		top:4px;	
	}	
	
	.ryform label { 
				display:block;
				font-size:1.1em;
				font-weight:bold;
				margin-bottom:3px;
				cursor:pointer;
			}
	.ryform p label { font-size:0.9em; }
	
	.ryform fieldset { 
				padding:10px;
			}
	
	.ryform legend { 
				font-size:1.2em;
				border-bottom:1px solid #DADADA;
				margin:5px 0px;
				font-weight:bold;
			}
	
	/* Input Elements */
	.ryform .txt { 
				border:1px solid #DADADA;
				background-color:#FFFFFF; 
				padding:2px; 
				width:230px;
				font-size:1.1em;
	 }
			 
	.ryform .txt:focus { 
				border:1px solid #96C61C;
	}
		
	
	

/*** Terms ***/

	#mainContent.terms p { margin:10px 0px; line-height:1.5em; }
	#mainContent.terms h3 { font-weight:bold; font-size:1.3em; }
	#mainContent.terms ul li { list-style-type:disc; padding:5px; }
	#mainContent.terms ul {margin:10px 0px 10px 10px; }



/*** === Show Reel === ***/

#showReel { background:url(../images/showreels.jpg) no-repeat; height:352px; width:637px; padding:0px; margin:0px; position:relative;}

#showReel a.ipod {position:absolute; display:block; width:120px; top:90px; left:350px; z-index:100;}
#showReel a.ipod span.big,#showReel a.mobile span.big { font-size:1.2em; font-weight:bold; position:relative; top:0px; left:0px;}
#showReel a.mobile {position:absolute; display:block; height:30px; width:150px; top:190px; left:495px; z-index:100;}


#showReel * { position:relative; left:4px; top:-3px; }

	#mainContent.showreel p { margin:10px 0px; }


/*** === Footer === ***/

	#footerContents p { display:inline; color:white; }
	
	#footerContents #rightLinks { float: right; }
	
	#footerContents #rightLinks li { float: left; }
	
	#footerContents #rightLinks li a { font-size: 1.1em; display: block; padding: 1px 8px; border-right: 1px solid #333; }

	#footerContents #rightLinks li#link_top a { border-right: none; padding-right: 0; }
		
	#footerContents a#teabagLink { display:block; height:20px; width:109px; background:url(../images/teabagLink.gif) top center; text-indent:-9999px; float:left;}
	
	#footerContents a#teabagLink:hover { background-position:bottom; }
	

/*** == 404 = Error Page === ***/

	#mainContent.error p, #mainContent.error ul, #mainContent.error ol { line-height:35px; }


/**** == Font Replacement === *****/

/* These are standard sIFR styles... do not modify */

.sIFR-flash {
  visibility: visible !important;
  margin: 0;
  padding: 0;
}

.sIFR-unloading .sIFR-flash {
  visibility: hidden !important;
}

.sIFR-replaced, .sIFR-ignore {
  visibility: visible !important;
}

.sIFR-alternate {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  display: block;
  overflow: hidden;
}

.sIFR-replaced div.sIFR-fixfocus {
  margin: 0pt; 
  padding: 0pt; 
  overflow: auto; 
  letter-spacing: 0px; 
  float: none;
}

.sIFR-dummy { 
  width: 0px;
  height: 0px;
  margin-left: 42px;
  z-index: 0;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */


.sIFR-hasFlash h2 {
	visibility: hidden;
	letter-spacing: -9px;
	font-size: 22px;
}

.sIFR-hasFlash h3 {
	visibility: hidden;
	letter-spacing: -6px;
	font-size: 25px;
}

.sIFR-hasFlash h5#pullquote {
	letter-spacing: -4px;
	visibility: hidden;
	font-size: 24px;
}

#archReelWrap h3 {color:#FFFFFF; font-size:1.4em; margin:15px 0;}




/** Comment **/