/*************************************************************

		phunkN CREATIVE™ CSS Stylesheet
		Copyright © 2008, All Rights Reserved
		By Jason Chieng ////////

*************************************************************/

/*************************************************************

		Page Style ////////

*************************************************************/

* {							margin: 0; padding: 0; }
html, body {				height: 100%; }
body {						background: black;
							font-family: "Arial", Helvetica; text-align: left; }

img {						vertical-align: middle; }


/****************************
		Text
****************************/
a, p, li, ul {				color: #C1C1C1; text-decoration: none; }
h1, a strong, p strong {	color: #ED145B; }
h1 {						font-size: 18px; }
a {							margin: 0; border: none; cursor: pointer; outline: none; }




/*************************************************************

		Content ////////

*************************************************************/
/****************************
		Global
****************************/
#wrapper {					position: relative; width: 1000px; min-height: 100%; margin: 0 auto -150px auto; }


/****************************
		Header Content
****************************/
#headerWrapper {			float: left; width: 1000px; height: 470px; 
							background: url("../images/headerLogo.gif") no-repeat; display: inline; }
							
#featureWrapper {			float: left; width: 1000px; height: 385px; margin-top: 85px;
							background: url("../images/featureWrapper.gif") no-repeat; display: inline; }
							
#fW_Content {
	float: left;
	width: 857px;
	height: 200px;
	display: inline;
	overflow: hidden;
	background-color:transparent;
}
#fW_Content img {
	width: 857px;
	height: 200px;
	background-color: transparent;
}

#fW_Controls {
	float: left;
	width: 120px;
	height: 42px;
	margin: 8px 0 0 865px;
	display: inline;
	background-color:transparent;
}
#fW_Controls a {
	float: left;
	width: 30px;
	height: 24px;
	padding-top: 6px;
	color: white;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	background-color: transparent;
	background-image: url(../images/btnFeatureHover.gif);
	background-repeat: no-repeat;
}
#fW_Controls a.activeSlide,
#fW_Controls a:hover {		color: #FF5300; background-position: 0 -30px; }



/****************************
		Main Content
****************************/
#mainWrapper {				float: left; width: 650px; display: inline; }
							
#categoryWrapper {			float: left; width: 610px; height: 65px; margin-left: 20px;
							background: url("../images/btnCategory.gif") 0 -45px no-repeat; display: inline; }
.cW_Button {				float: left; height: 45px;
							background: url("../images/btnCategory.gif") no-repeat; display: inline; }
.cW_Button.selected,							
.cW_Button:hover {			background: url("../images/blank.gif"); }

.cW_ViewAll {				width: 125px; }
.cW_Artwork {				width: 110px; background-position: -125px 0; }
.cW_Coding {				width: 100px; background-position: -235px 0; }
.cW_Motion {				width: 100px; background-position: -335px 0; }
.cW_Print {					width: 95px; background-position: -435px 0; }
.cW_Web {					width: 80px; background-position: -530px 0; }

.workContent {				float: left; position: relative; width: 610px; height: 150px; margin: 0 0 20px 20px;
							background: url("../images/workContent.gif") no-repeat; display: inline; }
.workContent h1 {			position: absolute; width: 230px; left: 360px; top: 15px; }
.workContent p {			position: absolute; width: 230px; left: 360px; top: 45px;
							color: #212121; font-size: 10px; line-height: 16px; }

.wC_Category {				position: absolute; width: 60px; height: 25px; left: 535px; top: 15px; }
.category {					float: right; width: 25px; height: 25px; margin-left: 2px;
							background: url("../images/workContent_Category.gif") no-repeat; }
.artwork {					background-position: 0 0; }
.coding {					background-position: -25px 0; }
.motion {					background-position: -50px 0; }
.print {					background-position: -75px 0; }
.web {						background-position: -100px 0; }
							
.wC_Button {				position: absolute; width: 110px; height: 35px; top: 110px; display: inline; }
.wC_Button:hover {			background-position: 0 -35px; }
.launchProject {			left: 360px; background: url("../images/btnLaunchProject.gif") no-repeat; }
.viewWebsite {				left: 480px; background: url("../images/btnViewWebsite.gif") no-repeat; }

.btnBackToTop {				float: left; width: 350px; height: 55px; margin: 0 150px;
							background: url("../images/btnBackToTop.gif") no-repeat; display: inline; }
.btnBackToTop:hover {		background-position: 0 -55px; }


/****************************
		Side Content
****************************/
#sideWrapper {				float: left; width: 350px; display: inline; }

.sideContent {				float: left; width: 310px; padding: 0 20px;
							font-size: 11px; line-height: 20px; }
							
.sideContent p {			margin: 15px 0; }

#serviceContent {			float: left; width: 310px; }

#serviceContent p {			padding: 0 0 5px 35px; color: white; font-size: 10px; line-height: 18px; }

#serviceContent a {			height: 25px; padding: 3px 0 0 35px; background: url("../images/btnServicesArrow.gif") no-repeat; display: block; }

#serviceContent a:hover,
#serviceContent a.selected {background-position: 0 -28px; }				

.btnEmailMe {				float: left; width: 310px; height: 40px;
							background: url("../images/btnEmailMe.gif") no-repeat; display: inline; }
.btnEmailMe:hover {			background-position: 0 -40px; }

.btnBackToTopSide {			margin: 30px 0; }


/****************************
		Footer Content
****************************/
.footerClear {				height: 150px; clear: both; }
#footerWrapper {			position: relative; width: 100%; height: 150px; }

#footerContent {			position: relative; width: 1000px; height: 140px; margin: auto;
							background: url("../images/footerContent.gif") no-repeat; }

#W3CWrapper {				float: left; width: 335px; height: 30px; margin: 80px 0 0 665px;
							background: url("../images/btnW3CHover.gif") 0 -30px no-repeat; display: inline; }
.W3CButton {				float: left; height: 30px; background: url("../images/btnW3CHover.gif") no-repeat; }
.W3CButton:hover {			float: left; height: 30px; background: url("../images/blank.gif") no-repeat; }

.W3C01 {					width: 170px; }
.W3C02 {					width: 165px; background-position: -170px 0; }




/*************************************************************

		Portfolio ////////

*************************************************************/
.workGraphic {				float: left; width: 335px; height: 140px; margin: 5px;
							background-repeat: no-repeat; cursor: default; }

/****************************
		Clients
****************************/
.friendFight {				background: url("../portfolio/friendFight_Preview.jpg"); }
.hotCharts {				background: url("../portfolio/hotCharts_Preview.jpg"); }
.auctionMania {				background: url("../portfolio/auctionMania_Preview.jpg"); }
.rewardBay {				background: url("../portfolio/rewardBay_Preview.jpg"); }
.property {					background: url("../portfolio/property_Preview.jpg"); }
.mobileMedia {				background: url("../portfolio/mobileMedia_Preview.jpg"); }
.mindCenter {				background: url("../portfolio/mindCenter_Preview.jpg"); }
.precisionXenon {			background: url("../portfolio/precisionXenon_Preview.jpg"); }
.artisanRecruitment {		background: url("../portfolio/artisanRecruitment_Preview.jpg"); }
.kellySports {				background: url("../portfolio/kellySports_Preview.jpg"); }
.newReformation {			background: url("../portfolio/newReformation_Preview.jpg"); }
.taxVacancies {				background: url("../portfolio/taxVacancies_Preview.jpg"); }
.sourceboostTech {			background: url("../portfolio/sourceboostTech_Preview.jpg"); }
.planetaryEvolution {		background: url("../portfolio/planetaryEvolution_Preview.jpg"); }
.boulterBuiltHomes {		background: url("../portfolio/boulterBuiltHomes_Preview.jpg"); }
.sushilogicSystems {		background: url("../portfolio/sushilogicSystems_Preview.jpg"); }


/****************************
		Artwork
****************************/
.daydreaming {				background: url("../portfolio/daydreaming_Preview.jpg"); }
.superfly02 {				background: url("../portfolio/superflyExperiment02_Preview.jpg"); }
.superfly03 {				background: url("../portfolio/superflyExperiment03_Preview.jpg"); }
.school01 {					background: url("../portfolio/school01_Preview.jpg"); }
.school03 {					background: url("../portfolio/school03_Preview.jpg"); }
.school04 {					background: url("../portfolio/school04_Preview.jpg"); }