/********************* 2Creative Main Style Sheet ****************************/

* {	margin: 0; padding: 0; }
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px; line-height: 1.4em; color: #FFF;
	background: #02457E url(images/bg-strip.jpg) repeat-x left top;
}
h1 { font-size: 20px; font-weight: normal; color: #FAC638; line-height: 1.1em; padding: 40px 20px 0 22px; }
h2 { font-size: 20px; font-weight: normal; margin-bottom: 15px;	line-height: 1.4em; }
h3 { font-size: 16px; font-weight: normal; margin-bottom: 15px; color: #CCFFFF; line-height: 1.4em;	}
h4 { font-size: 14px; color: #FAC638; margin-bottom: 5px; }
p { padding-bottom: 15px; }
img { border: none; }
a { color: #CCFFFF; text-decoration: none; }
a:hover { text-decoration: underline; }
ul { padding-left: 15px; list-style: square; margin-bottom: 15px; }

#wrapper { width: 1012px; margin: 0 auto; padding: 0; }	
	#header { }
		#header-one { background: url(images/head1.jpg) no-repeat left top; height: 35px; }
		#header-two { background: url(images/head2.jpg) no-repeat left top; height: 35px; }
		#header-three { background: url(images/head3.jpg) no-repeat left top; height: 50px; }
		#header-four { background: url(images/head4.jpg) no-repeat left top; height: 50px; }
		#header-five { background: url(images/head5.jpg) no-repeat left top; height: 38px; }
		
		.web-design-gold-coast { position: relative; top: 14px; left: 868px; font-size: 12px; }
		.web-design-gold-coast a:hover { text-decoration: none;	color: #FFF; }
				
		.phone-number { position: relative; top: 82px; left: 612px; font-size: 18px; font-weight: bold;	color: #FFF; }
		.email-address { position: relative; top: 13px; left: 920px; font-size: 16px; color: #FFF; }
		.twitter { position: relative; top: 11px; left: 923px; font-size: 16px; color: #FFF; }
		.email-address a, .twitter a { color: #FFF; text-decoration: none; }
		.email-address a:hover, .twitter a:hover { color: #FAC638; text-decoration: none; }			
	
	#contentHome { padding-bottom: 20px; }
	#contentOther { background: url(images/web-design-bg-3.jpg) no-repeat left top; }	
	
		#sideContent { float: left; width: 310px; background: url(images/menu-bg.gif) no-repeat left top; }
			#menu { height: 232px; margin-bottom: 30px; }
				#menu ul { list-style: none; margin: 0; padding: 7px 0 0 5px; }
				#menu li { height: 29px; width: 230px; padding-top: 5px; 
					background: url(images/menu-btn.jpg) no-repeat left top; }	
				#menu li#itemContact { margin-top: 20px; }				
				#menu a { display: block; width: 226px;	font-size: 14px; padding: 0 0 0 20px; }
				#menu a:hover  { color: #FAC638; text-decoration: none;	}
				#menu a.thispage, #menu a.contactpage { color: #FAC638; }
			#clients { height: 68px; background: url(images/featured-clients.jpg) no-repeat left top; }
				#logos { width: 155px; margin-left: 80px; margin-top: 10px; }	
				
			#quote { width: 240px; }
				#quote-top { height: 78px; background: url(images/quick-quote.jpg) no-repeat left top; }
				#quote-body { background: url(images/quick-quote-repeater.jpg) repeat-y left top; }
				#quote-bottom { height: 11px; background: url(images/quote-bottom.gif) no-repeat left top; }	
			
		#mainContent { float: left; width: 692px; background: #02457E; padding-left: 10px !important; padding-left: 5px;}
			#flash { width: 683px; height: 214px; margin-bottom: 39px; margin-top: 10px; }
			#services { margin-bottom: 22px !important; margin-bottom: 2px; }
			#features { margin-left: 10px; }						
			
				.service-box { float: left; width: 202px; height: 245px; margin-left: 10px; margin-right: 18px; 
						background: url(images/service-box-home.jpg) no-repeat left top; }
					#service-box-last { margin-right: 0; }
					.service-box-top { height: 57px; }
					.service-box-body {}
						.service-box-body-text { padding: 10px 0px 10px 15px; }
						.service-box-body-text h3 { color: #FAC638; margin-top: 5px; margin-bottom: 0;}
						.service-box-body-text ul { list-style: none; } 
						.service-box-body-text li { font-size: 14px; padding: 10px 0 2px 5px; } 
				
				.feature-box { float: left; width: 326px; margin-right: 13px; }
				#feature-box-right { margin-right: 0; }
					.feature-box-top { background: #01274E; height: 46px; }
					.feature-box-body { height: 253px; margin-bottom: 22px; 
							background: url(images/featured-generic.jpg) no-repeat left top; }
					.feature-box-body img { margin-left: 18px; } 
				
				.portfolio-button { width: 277px; height: 33px; margin-left: 25px; padding-top: 7px; 
					background: url(images/portfolio-btn.jpg) no-repeat left top; }
				.portfolio-button a { font-size: 14px; padding-left: 62px; text-decoration: none; }
				.portfolio-button a:hover { color: #FAC638; text-decoration: none; } 		
			
			#reasons { float: left; width: 692px; padding-top: 50px; background: url(images/top5.gif) no-repeat left top; }
				#reasons h3 { font-size: 20px; color: #FFF; }
				#reasons h4 { font-size: 16px; font-weight: normal; color: #CCFFFF; margin-bottom: 15px; } 
				
				#slidingPanel { margin-left: 20px !important; margin-left: 10px; }		
				.SlidingPanels { float: left; position: relative; width: 664px;	padding: 0px; border: none; }
				.SlidingPanelsContentGroup { position: relative; float: left; width: 10000px; 
					margin: 0px; padding: 0px; border: none; }
				.SlidingPanelsContent { float: left; width: 664px; overflow: hidden; margin: 0px; 
					padding: 0px; padding-right:10px;	border: none;
				}
				.SlidingPanelsAnimating * { overflow: hidden !important; }
				.slidingTabPanelWrapper { border-bottom: 1px solid #011B2F; height: 49px; margin: 0px 0 10px 0; display: none; }
				.slidingTabPanel { list-style: none; margin: 0; padding: 0; width: 658px; height: 49px; }
				.slidingTabPanel li { list-style:none; float: left; width: 114px; margin:0 2px; }
				.tabActive { position: relative; top: 1px; display: block; width: 114px; height: 49px; 
					cursor: default; outline: none; }
				.tab { position: relative; top: 1px; display: block; width: 114px; height: 49px; 
					background-position: -228px; cursor: pointer; outline: none; }
				.tab:hover { background-position: -114px; }
				#cu { background-image: url(images/spry-wow-factor.gif); }
				#cp { background-image: url(images/spry-custom-built.gif); }
				#es { background-image: url(images/spry-service.gif); }
				#qp { background-image: url(images/spry-qualified.gif); }
				#bt { background-image: url(images/spry-technology.gif); }		
			
			.heading { width: 683px; height: 38px; margin-bottom: 19px; margin-top: 10px; }
				#heading-about { background: url(images/title-about.gif) no-repeat top left; }
				#heading-contact { background: url(images/title-contact.gif) no-repeat top left; }
				#heading-graphic { background: url(images/title-graphic-design.gif) no-repeat top left; }
				#heading-links { background: url(images/title-links.gif) no-repeat top left; }
				#heading-services { background: url(images/title-services.gif) no-repeat top left; }
				#heading-terms { background: url(images/title-terms.gif) no-repeat top left; }
				#heading-web { background: url(images/title-web-design.gif) no-repeat top left; }
				
			#others {}
				.tab-wrapper { border-bottom: 1px solid #011B2F; height: 49px; margin: 20px 15px 15px 0; }
				.tab-panel { list-style: none; margin: 0; padding: 0; width: 658px; height: 49px; }
				.tab-panel a { font-size: 14px !important; font-size: 13px; padding: 8px 12px !important; padding: 8px 12px 0; }
				.tab-panel a:hover { text-decoration: none; color: #66FFFF; }
				.tab-panel li { list-style: none; float: left; width: 115px; margin:0 2px; }
				.tab-active { position: relative; top: 1px; display: block; 
					width: 115px !important; height: 49px !important; width: 90px; height: 40px; 
					cursor: default; outline: none; 
					background: url(images/tab-active.jpg) no-repeat left top;}
				.tab-inactive { position: relative; top: 1px; display: block; 
					width: 115px !important; height: 49px !important; 
					width: 90px; height: 40px; 
					cursor: pointer; outline: none; color: #66FFFF; 
					background: url(images/tab-inactive.jpg) no-repeat left top; }
				.tab-inactive:hover { background: url(images/tab-over.jpg) no-repeat left top; }
				
				#one-column { padding: 0 10px; }
				#others-main { float: left; width: 440px; margin-left: 10px;}
					#others-main h2 { color: #FAC638; }
				#others-sub { float: right; width: 202px; height: 245px; margin-right: 15px; 					
					background: url(images/tile-right-col.jpg) no-repeat left top; }
					#others-sub h3 { padding: 10px 0 0 15px; }  
					#others-sub ul { list-style: none; } 
					#others-sub li { background: url(images/tick.gif) no-repeat left top; padding-left: 25px; padding-bottom: 10px; } 
					#others-sub img { padding-top: 15px; } 				
					
					.products { padding: 0 15px; }
					.products p { padding-bottom: 10px; border-bottom: 1px dotted #FFF; } 
					
				.award-listing { float: left; width: 198px; margin-bottom: 20px; text-align: center; margin-right: 10px; }
				
				.contact-title { float: left; width: 60px; }
				.contact-details { float: left; width: 200px; }
			
			#portfolio { margin-right: 10px; }	
				.folio-wrapper-left, .folio-wrapper-right { float: left; width: 326px; height: 310px; margin-bottom: 30px; 
					background: url(images/folio-generic.jpg) no-repeat left top; }
				.folio-wrapper-right { float: right; width: 326px; margin-right: 0; }		
					.folio-thumbnail { height: 267px; padding: 7px 0 0 7px;	}				
					.folio-wrapper-left strong, .folio-wrapper-right strong { color: #FFF; }
					.folio-wrapper-left p, .folio-wrapper-right p {	font-size: 12px; padding: 8px 0 0 28px !important;
						padding: 6px 0 0 28px; }
					.folio-wrapper-left a:hover, .folio-wrapper-right a:hover { color: #FFF; text-decoration: none; }
				
				#full-portfolio p { text-align: center;	} 			
				#folioFooterTxt p {	text-align: center;	font-size: 14px; }
				
				.graphic-folio-wrapper { width: 684px; height: 309px; margin-bottom: 30px; 
					background: url(images/portfolio-graphics-bg.gif) no-repeat left top; }
				.graphic-folio-thumbnail { height: 267px; padding: 7px 0 0 7px;	}				
					.graphic-folio-wrapper strong { color: #FFF; }
					.graphic-folio-wrapper p { font-size: 12px; padding: 8px 0 0 28px !important; padding: 6px 0 0 28px; }
					.graphic-folio-wrapper a:hover { color: #FFF; text-decoration: none; }
			
	#subContent { padding-top: 20px !important; padding-top: 0; border-top: 1px dotted #011B2F !important; border-top: none; }	
		#news { float: left; width: 240px; margin-right: 80px; }	
			#news-top { height: 44px; background: url(images/news.jpg) no-repeat left top; }
			#news-body { background: url(images/news-repeater.gif) repeat-y left top; }	
			#news-body-text { padding: 10px 20px 0; } 
				#news-body-text h4 { margin: 0 0 5px; color: #66FFFF; font-weight: normal; } 
				.news-date { padding-bottom: 10px; }				
		
	#footer { border-top: 1px solid #2995F0; }
		#footer p { padding-top: 10px; text-align: center; }
	
	#footerWeb { margin-left: 300px }
		#footerWeb img { margin-left: 10px;	}		


/********************* MISC ****************************/	
.clearFloat { clear: both; height: 0; }
.textBlue, .textBlueBold { color: #CCFFFF; }
.textMedBlue, .textMedBlueBold { color: #66FFFF; }
.textYellow, .textYellowBold { color: #FAC638; }
.textBlueBold, .textYellowBold, .textMedBlueBold { font-weight: bold; }
.invisibleHeading {	display: none; }
.notice { font-style: italic; text-align: right; color: #FAC638; }
.warning { color: #FAC638; font-weight: bold; padding-bottom: 5px; }
.hidden { visibility: collapse; }
.padded { padding: 15px; }

/********************* FORMS ****************************/
#quoteForm { padding: 0 20px; }
#quoteForm label { width: 200px; display: block; text-align: left; padding-bottom: 2px; }
#quoteForm input, #quoteForm textarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%; width: 200px; display: block;	padding-bottom: 2px; margin-bottom: 7px; }
#quoteForm select { width: 200px; border: 1px solid #CCCCCC; margin-bottom: 8px; }
#quoteForm .wideLabel { width: 171px; padding-right: 7px; border: none; float: left; display: block; }
#quoteForm .smallInputBox { float: left; width: 15px; display: block; margin-bottom: 0; }
#quoteForm .quoteButton { border: none; width: 200px; height: 32px; cursor: pointer;
	background: url(images/quote-btn.jpg) no-repeat left top; margin-bottom: 0; }
#quoteForm p { padding: 0; }
#quoteForm .hidden { visibility: collapse; height: 0; margin-bottom: 0; display: none; line-height: 0; }

#contactForm { padding-top: 10px; padding-bottom: 20px; }
#contactForm label { float: left; width: 100px; display: block; text-align: left; padding-right: 20px;
	padding-bottom: 10px;color: #FFF; }
#contactForm input, #contactForm textarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%; float: left; width: 240px; display: block;	border: 1px solid #CCCCCC; }
#contactForm select { width: 240px; border: 1px solid #CCCCCC; }
#contactForm .wideLabel { width: 250px; padding-right: 10px; border: none; }
#contactForm .smallInputBox { width: 20px; }
#contactForm .mediumInputBox { width: 250px; }
#contactForm input.checkBox {width: 12px; height: 15px; padding: 0 5px 10px 0; border: none; }
#contactForm label.checkboxLabel { text-align: left; width: 100px; padding-left: 5px; }
#contactForm .submitButton {
	border: none; width: 226px; height: 30px; cursor: pointer; color: #FFF; font-weight: bold; font-size: 12px; 
	background: url(images/submit-btn.jpg) no-repeat left top; margin-top: 10px; }
#contactForm br { clear: left; }
#contactForm p { padding: 10px 0 5px; }

/********************* TABLES ****************************/
.listTable { width: 100%; border: none; text-align: left; margin-bottom: 15px; }
td { padding: 2px; vertical-align: top; }
th { font-weight: normal; color: #CCFFFF; }