@charset "utf-8";
/* CSS Document */

body{
	margin: 0;
	background: url(images/noise_bg.jpg) repeat;	
}

/* ========================================= UNIVERSAL STYLES ========================================= */
#mainContainer					{width: 980px; margin: 0 auto;}
p								{font-family: Arial, Helvetica, sans-serif; color: #36424b; font-size: 0.95em; line-height: 1.5em;}
p, h1, h2, h3, a, ul, ol		{font-family: Arial, Helvetica, sans-serif; text-shadow: #fff 0px 1px 1px}
p a								{text-decoration: none; color: #c83535;}
p a:hover						{text-decoration: underline; color: #36424b;}
.red							{color: #c83535;}
.italicize						{font-style: italic;}
/* ================================================================================================== */

/* ========================================= HEADER ========================================= */

#headerContainer				{width: 100%; margin: 0 auto; background: url(images/header_bg.png) no-repeat center 90px;}
#headerContent					{width: 980px; height: 260px; margin: 0 auto;}
#chineseRibbon					{position: absolute; top: 0; right: 0; border: 0; z-index: 300;}
#teeth							{width: 100%; height: 18px; background: url(images/teeth.png) repeat-x;}
/* --- Logo Mouseover --- */
#headerContent span a			{display: block; width: 134px; height: 68px; float: left; position: relative; margin: 15px 0 0 0;
								background: url(images/logo_sprite.png) top left; text-indent: -9999px;}
#headerContent span a:hover		{background: url(images/logo_sprite.png) bottom left;}
/* --- end of Logo Mouseover --- */
#titleBg						{width: 300px; height: 90px; float: left; margin-top: 60px;}
/* --- Nav Bar --- */
/*
#nav							{width: 680px; float: right; margin: 22px 0 0 0; text-shadow: #fff 0px 1px 1px;
								font-family: Arial, Helvetica, sans-serif;}
#nav ul							{float: right;}
#nav li							{display: block; float: left; height: 45px; padding: 5px 10px; margin-left: 20px;}
#nav li:hover					{background: url(images/active_link_bg.png) left -2px repeat-x;}
#nav a							{text-decoration: none; height: 45px;}
#nav .navTitle					{color: #36424b; font-size: 1.4em; font-weight: bold; letter-spacing: -0.03em; line-height: 0.8em;
								font-variant: small-caps;}
#nav li:first-letter			{color: #c83535;}
#nav .navSub					{display: block; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; color: #999;
								font-size: 0.6em; font-weight: normal; letter-spacing: -0.05em; text-transform: none; font-variant: normal;}
#nav a:hover					{text-decoration: none; color: #c83535;}
#nav li.active					{background: url(images/active_link_bg.png) left -2px repeat-x;}
*/
#nav							{width: 590px; float: right; margin: 22px 0 0 0;}
#nav ul							{width: 590px; float: right; list-style: none; padding: 0;}
#nav ul li a					{display: block; float: left; margin-left: 20px; text-indent: -9999px;}
	.navHome					{width: 87px; height: 40px; background: url(images/nav_sprite.png) left top no-repeat;}
	.navAbout					{width: 76px; height: 40px; background: url(images/nav_sprite.png) left -80px no-repeat;}
	.navWorks					{width: 94px; height: 40px; background: url(images/nav_sprite.png) left -160px no-repeat;}
	.navDownloads				{width: 121px; height: 40px; background: url(images/nav_sprite.png) left -240px no-repeat;}
	.navContact					{width: 100px; height: 40px; background: url(images/nav_sprite.png) left -320px no-repeat;}
	.navHome:hover				{width: 87px; height: 40px; background: url(images/nav_sprite.png) left -40px no-repeat;}
	.navAbout:hover				{width: 76px; height: 40px; background: url(images/nav_sprite.png) left -120px no-repeat;}
	.navWorks:hover				{width: 94px; height: 40px; background: url(images/nav_sprite.png) left -200px no-repeat;}
	.navDownloads:hover			{width: 121px; height: 40px; background: url(images/nav_sprite.png) left -280px no-repeat;}
	.navContact:hover			{width: 100px; height: 40px; background: url(images/nav_sprite.png) left -360px no-repeat;}
	.homeActive					{width: 87px; height: 40px; background: url(images/nav_sprite.png) left -40px no-repeat;}
	.aboutActive				{width: 76px; height: 40px; background: url(images/nav_sprite.png) left -120px no-repeat;}
	.worksActive				{width: 94px; height: 40px; background: url(images/nav_sprite.png) left -200px no-repeat;}
	.downloadsActive			{width: 121px; height: 40px; background: url(images/nav_sprite.png) left -280px no-repeat;}
	.contactActive				{width: 100px; height: 40px; background: url(images/nav_sprite.png) left -360px no-repeat;}
/* --- end of Nav Bar --- */
/* ================================================================================================== */

/* ========================================= HOMEPAGE ========================================= */
#homeContainer #contentLeft		{float: left; width: 600px; margin-top: 30px; text-shadow: #fff 0px 1px 1px;}
#homeContainer #contentRight	{float: left; width: 360px; margin-left: 20px; text-shadow: #fff 0px 1px 1px;}
#whatisthisStamp				{width: 360px; height: 200px; margin-top: 30px; background: url(images/whatisthis_stamp.png) 20px top no-repeat;}
.helloTitle						{background: url(images/hello_title.png) left top no-repeat;}
#helloContainer					{width: 100%; min-height: 190px; margin: 0; /*border-bottom: #999 1px dashed;*/}
#helloContainer h2				{font-family: Arial, Helvetica, sans-serif; color: #627380; font-size: 1.3em; letter-spacing: -0.05em;
								line-height: 0.5em;}
#helloContainer h2 a			{text-decoration: none; font-family: Georgia, "Times New Roman", Times, serif;
								font-weight: bold; font-style: italic; color: #d66e6f;}
#helloContainer h2 a:hover		{text-decoration: none; color: #c83535;}
#helloContainer p				{font-size: 1.1em; line-height: 1.4em; padding: 0; margin: 0;}
.ampersand						{font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua"; font-weight: normal;
								font-style: italic; font-size: 1.6em;}
.georgia						{font-family: Georgia, "Times New Roman", Times, serif; font-style: italic;}
#sliderWrap						{float: left; width: 980px; margin-top: 45px;}
/* More Button */
#moreButton span a				{display: block; width: 90px; height: 36px; float: right; margin-top: -15px;
								background: url(images/more_sprite.png) top; text-indent: -9999px;}
#moreButton span a:hover		{background: url(images/more_sprite.png) bottom;}

/* Grid Headers */
#recentDesign h2, #recentPainting h2, #friendsGrid h2, #findmeGrid h2, #sliderWrap h2
								{color: #627380; font-size: 1.3em; letter-spacing: -0.05em; line-height: 0.5em;}
#recentDesign					{float: left; clear: left; width: 290px; margin-top: 20px;}
#recentDesign img				{float: left; border: 1px #999 solid; -moz-box-shadow:0px 0px 4px #666; -webkit-box-shadow:0px 0px 4px #666;
								box-shadow:0px 0px 4px #666;}
#recentDesign img:hover			{border-color: #333; -moz-box-shadow:0px 0px 4px #999; -webkit-box-shadow:0px 0px 4px #999;
								box-shadow:0px 0px 4px #999;}
#recentPainting					{float: left; margin: 20px 0 0 20px; width: 290px;}
#recentPainting img				{float: left; border: 1px #999 solid; -moz-box-shadow:0px 0px 4px #666; -webkit-box-shadow:0px 0px 4px #666;
								box-shadow:0px 0px 4px #666;}
#recentPainting img:hover		{border-color: #333; -moz-box-shadow:0px 0px 4px #999; -webkit-box-shadow:0px 0px 4px #999;
								box-shadow:0px 0px 4px #999;}
#friendsGrid					{float: left; margin: 20px 0 0 40px; width: 170px;}
#friendsGrid #joinList			{float: left; width: 170px; margin-top: 15px; background: url(images/friends_divider.png) center top no-repeat;}
#friendsGrid #joinList p		{font-size: 0.8em; line-height: 1.3em; margin-top: 10px;}
#friendsGrid ul					{width: 170px; list-style: none; padding: 0;}
#friendsGrid ul li a			{display: block; float: left; width: 29px; height: 29px; margin-right: 3px; text-indent: -9999px;
								border: #999 1px solid;}
#friendsGrid ul li a:hover		{border-color: #333;}
	.sweetlittlewebsitesfriends	{background: url(images/thumbnail_sprite.png) -43px top no-repeat;}
	.hbcyouthfriends			{background: url(images/thumbnail_sprite.png) -43px -29px no-repeat;}
	.sunyuanartfriends			{background: url(images/thumbnail_sprite.png) -43px -58px no-repeat;}
	.eurockdesignfriends		{background: url(images/thumbnail_sprite.png) -43px -87px no-repeat;}
	.jamescranefriends			{background: url(images/thumbnail_sprite.png) -43px -116px no-repeat;}
#findmeGrid						{float: left; width: 150px; margin: 20px 0 0 20px;}
#findmeGrid ul					{width: 150px; list-style: none; padding: 0;}
#findmeGrid ul li a				{display: block; float: left; width: 43px; height: 43px; margin-right: 5px; text-indent: -9999px;
								border: #999 1px solid;}
#findmeGrid ul li a:hover		{border-color: #333;}
	.twitterThumb				{background: url(images/thumbnail_sprite.png) left top no-repeat;}
	.facebookThumb				{background: url(images/thumbnail_sprite.png) left -43px no-repeat;}
	.devartThumb				{background: url(images/thumbnail_sprite.png) left -86px no-repeat;}
/* ================================================================================================== */

/* ========================================= ABOUTPAGE ========================================= */
.aboutTitle						{background: url(images/about_title.png) left top no-repeat;}
#aboutContainer					{width: 100%; margin-top: 0px;}
#aboutContainer h2				{color: #627380; font-size: 1.3em; letter-spacing: -0.05em; line-height: 0.5em;}
#aboutContainer #contentLeft	{float: left; width: 600px; margin: 0;}
#aboutContainer #contentRight	{float: left; width: 360px; margin-left: 20px;}
#aboutContainer #aboutIntro		{float: left; width: 600px; margin-top: 40px;}
#aboutContainer #aboutIntro p	{font-size: 1.1em; line-height: 1.4em; padding: 0; margin: 0;}
#aboutContainer #aboutBg		{float: left; width: 600px; min-height: 215px; margin-top: 40px;
								background: url(images/zhuozhou_bg.png) right 30px no-repeat;}
#aboutContainer #aboutBg p		{float: left; width: 370px; padding: 0; margin: 0;}
#aboutContainer #aboutChinese	{float: left; width: 600px; min-height: 258px; margin-top: 40px;
								background: url(images/chinese_painting_bg.png) left 30px no-repeat;}
#aboutContainer #aboutChinese h2{margin-left: 210px;}
#aboutContainer #aboutChinese p	{float: left; margin: 0 0 0 210px; padding: 0;}
#aboutContainer #aboutWebsite	{float: left; width: 600px; min-height: 340px; margin-top: 40px;
								background: url(images/website_bg.png) right 10px no-repeat;}
#aboutContainer #aboutWebsite p	{float: left; width: 350px; padding: 0; margin: 0;}
#aboutBadge						{float: left; width: 360px; min-height: 210px; margin: 10px 0 0 0;
								background: url(images/badge_bg.png) left top no-repeat;}
#aboutProfile					{float: left; width: 340px; margin: 40px 0 0 20px;}
#aboutProfile h2				{color: #36424b;}
#aboutProfile ul				{padding: 0; color: #36424b; font-size: 0.95em; line-height: 1.5em;}
#aboutProfile ul li				{margin-bottom: 20px; padding-left: 25px;}
	#aboutProfile li.location	{list-style: none; background: url(images/bullet_sprite.png) left 3px no-repeat;}
	#aboutProfile li.likes		{list-style: none; background: url(images/bullet_sprite.png) left -66px no-repeat;}
	#aboutProfile li.speak		{list-style: none; background: url(images/bullet_sprite.png) left -136px no-repeat;}
	#aboutProfile li.briefcase	{list-style: none; background: url(images/bullet_sprite.png) left -206px no-repeat;}
#aboutNotables					{float: left; width: 340px; margin-left: 20px; padding-top: 40px;}
#aboutNotables h2				{color: #36424b;}
#aboutNotables .time			{float: left; text-align: right; width: 45px; min-height: 50px; padding-top: 20px;; clear: left;
								font-family: Arial, Helvetica, sans-serif; color: #cdd2d6; font-weight: bold; font-size: 1.25em;
								letter-spacing: -0.05em; text-shadow: #fff 0px 1px 1px; line-height: 0.7em;}
#aboutNotables .time span		{display: block; text-align: right; color: #adadad; font-size: 0.8em;}
#aboutNotables .asterisk		{color: #d66e6f; font-size: 3.5em;}
#aboutNotables .list			{float: left; width: 270px; margin: 0 0 15px 20px; font-size: 0.95em; line-height: 1.3em; padding-top: 15px;
								background: url(images/notables_shadow.png) center top no-repeat;}
#aboutNotables .list p			{padding: 0; margin: 0; font-size: 0.95em; line-height: 1.5em;}
/* ================================================================================================== */
/* ========================================= WORKSPAGE ========================================= */
.worksTitle						{background: url(images/works_title.png) left top no-repeat;}
#worksContainer					{width: 100%; margin-top: 0px;}
#worksContainer h2				{color: #627380; font-size: 1.3em; letter-spacing: -0.05em; line-height: 1.4em; margin: 30px 0 -30px 0;
								border-bottom: 1px #ccc dashed;}
#worksContainer h2 a			{float: right; font-size: 0.8em; text-decoration: none; color: #36424b; font-weight: normal;}
#worksContainer h2 a:hover		{color: #c83535;}
#worksIntro						{float: left; width: 700px; margin-top: 40px;}
#worksIntro p					{font-size: 1.1em; line-height: 1.4em; padding: 0; margin: 0;}
/* Universal Navigation for all Portfolio Pages */
#worksNav						{float: left; width: 260px; height: 170px; margin: 15px 0 0 20px;
								background: url(images/works_nav_bg.png) center top no-repeat;}
#worksNav ul					{width; 220px; padding: 0; margin: 55px 0 0 60px; list-style: none;}
#worksNav ul li					{height: 25px; font-family: Arial, Helvetica, sans-serif; padding-left: 25px;
								background: url(images/works_nav_bullet.png) left 2px no-repeat;}
#worksNav ul li a				{text-decoration: none; color: #627380; padding: 1px 3px; font-size: 0.9em;}
#worksNav ul li a:hover			{color: #fff; background: url(images/works_nav_hover_bg.jpg) left top no-repeat; text-shadow: none;}
#worksNav ul li a.active		{color: #fff; background: url(images/works_nav_hover_bg.jpg) left top no-repeat; text-shadow: none;}
/* ================================================================================================== */
/* ========================================= WEBSITEPAGE ========================================= */
#websiteContainer				{width: 100%; margin-top: 0px;}
#websiteIntro					{float: left; width: 700px; margin-top: 15px;}
#websiteIntro h2				{color: #627380; font-size: 1.3em; letter-spacing: -0.05em;line-height: 0.5em;}
#websiteIntro p					{font-size: 1.1em; line-height: 1.4em; padding: 0; margin: 0;}
#websiteThumbsContainer			{width: 100%; float: left; margin-top: 5px;}
#websiteThumbsContainer ul		{padding: 0; width: 1020px; float: left; list-style: none; margin-left: -25px;}
#websiteThumbsContainer ul li	{width: 308px; height: 218px; float: left; display: block; margin: 30px 0 0 25px; border: 1px #999 solid;
								-moz-box-shadow:0px 0px 4px #666; -webkit-box-shadow:0px 0px 4px #666; box-shadow:0px 0px 4px #666;}
#websiteThumbsContainer ul img	{opacity: 0; filter: alpha(opacity=0); border: 0;}
	.successtherapy				{background: url(thumbnails/success_therapy.jpg) left top no-repeat;}
	.hbcyouth					{background: url(thumbnails/hbc_youth.jpg) left top no-repeat;}
	.calgaryprolife				{background: url(thumbnails/calgary_prolife.jpg) left top no-repeat;}
	.stumpremoval				{background: url(thumbnails/stump_removal.jpg) left top no-repeat;}
	.easydumpster				{background: url(thumbnails/easy_dumpster.jpg) left top no-repeat;}
	.solardecathlon				{background: url(thumbnails/solar_decathlon.jpg) left top no-repeat;}
/* ================================================================================================== */
/* ========================================= CHINESEPAGE ========================================= */
#chineseContainer				{width: 100%; margin-top: 0px;}
#chineseIntro					{float: left; width: 700px; margin-top: 15px;}
#chineseIntro h2				{color: #627380; font-size: 1.3em; letter-spacing: -0.05em; line-height: 0.5em;}
#chineseIntro p					{font-size: 1.1em; line-height: 1.4em; padding: 0; margin: 0;}
#chineseThumbsContainer			{width: 100%; float: left; margin-top: 5px;}
#chineseThumbsContainer ul		{padding: 0; width: 1020px; float: left; list-style: none; margin-left: -25px;}
#chineseThumbsContainer ul li	{width: 308px; height: 218px; float: left; display: block; margin: 30px 0 0 25px; border: 1px #999 solid;
								-moz-box-shadow:0px 0px 4px #666; -webkit-box-shadow:0px 0px 4px #666; box-shadow:0px 0px 4px #666;}
#chineseThumbsContainer ul img	{opacity: 0; filter: alpha(opacity=0); border: 0;}
	.winterseve					{background: url(thumbnails/winters_eve.jpg) left top no-repeat;}
	.elevation					{background: url(thumbnails/elevation.jpg) left top no-repeat;}
	.paradiseatsunset			{background: url(thumbnails/paradise_at_sunset.jpg) left top no-repeat;}
	.villageatnight				{background: url(thumbnails/village_at_night.jpg) left top no-repeat;}
	.springgorge				{background: url(thumbnails/spring_gorge.jpg) left top no-repeat;}
	.snowspirit					{background: url(thumbnails/snow_spirit.jpg) left top no-repeat;}
	.grazingtunes				{background: url(thumbnails/grazing_tunes.jpg) left top no-repeat;}
	.emeraldvillage				{background: url(thumbnails/emerald_village.jpg) left top no-repeat;}
	.autumnvillage				{background: url(thumbnails/autumn_village.jpg) left top no-repeat;}
	.snowvillage				{background: url(thumbnails/snow_village.jpg) left top no-repeat;}
	.springwater				{background: url(thumbnails/spring_water.jpg) left top no-repeat;}
	.greatwallstronghold		{background: url(thumbnails/greatwall_stronghold.jpg) left top no-repeat;}
	.emeraldwaterfall			{background: url(thumbnails/emerald_waterfall.jpg) left top no-repeat;}
	.snowsensation				{background: url(thumbnails/snow_sensation.jpg) left top no-repeat;}
/* ================================================================================================== */
/* ========================================= GRAPHICPAGE ========================================= */
#graphicContainer				{width: 100%; margin-top: 0px;}
#graphicIntro					{float: left; width: 700px; margin-top: 15px;}
#graphicIntro h2				{color: #627380; font-size: 1.3em; letter-spacing: -0.05em;line-height: 0.5em;}
#graphicIntro p					{font-size: 1.1em; line-height: 1.4em; padding: 0; margin: 0;}
#graphicThumbsContainer			{width: 100%; float: left; margin-top: 5px;}
#graphicThumbsContainer ul		{padding: 0; width: 1020px; float: left; list-style: none; margin-left: -25px;}
#graphicThumbsContainer ul li	{width: 308px; height: 218px; float: left; display: block; margin: 30px 0 0 25px; border: 1px #999 solid;
								-moz-box-shadow:0px 0px 4px #666; -webkit-box-shadow:0px 0px 4px #666; box-shadow:0px 0px 4px #666;}
#graphicThumbsContainer ul img	{opacity: 0; filter: alpha(opacity=0); border: 0;}
	.freetoplaylogo				{background: url(thumbnails/freetoplay_logo.jpg) left top no-repeat;}
	.successtherapylogo			{background: url(thumbnails/successtherapy_logo.jpg) left top no-repeat;}
	.hbcyouthlogo				{background: url(thumbnails/hbcyouth_logo.jpg) left top no-repeat;}
	.eurockdesignad				{background: url(thumbnails/eurockdesign_ad.jpg) left top no-repeat;}
	.chinaimpression			{background: url(thumbnails/china_impression.jpg) left top no-repeat;}
	.kentliuarts				{background: url(thumbnails/kentliuarts.jpg) left top no-repeat;}
	.earthquake					{background: url(thumbnails/earthquake.jpg) left top no-repeat;}
	.signalfirelogo				{background: url(thumbnails/signalfire_logo.jpg) left top no-repeat;}
/* ================================================================================================== */
/* ========================================= OILPAGE ========================================= */
#oilContainer					{width: 100%; margin-top: 0px;}
#oilIntro						{float: left; width: 700px; margin-top: 15px;}
#oilIntro h2					{color: #627380; font-size: 1.3em; letter-spacing: -0.05em;line-height: 0.5em;}
#oilIntro p						{font-size: 1.1em; line-height: 1.4em; padding: 0; margin: 0;}
#oilThumbsContainer				{width: 100%; float: left; margin-top: 5px;}
#oilThumbsContainer ul			{padding: 0; width: 1020px; float: left; list-style: none; margin-left: -25px;}
#oilThumbsContainer ul li		{width: 308px; height: 218px; float: left; display: block; margin: 30px 0 0 25px; border: 1px #999 solid;
								-moz-box-shadow:0px 0px 4px #666; -webkit-box-shadow:0px 0px 4px #666; box-shadow:0px 0px 4px #666;}
#oilThumbsContainer ul img		{opacity: 0; filter: alpha(opacity=0); border: 0;}
	.movingreflection			{background: url(thumbnails/moving_reflection.jpg) left top no-repeat;}
	.meteorshower				{background: url(thumbnails/meteor_shower.jpg) left top no-repeat;}
	.roadtoparadise				{background: url(thumbnails/road_to_paradise.jpg) left top no-repeat;}
	.awe						{background: url(thumbnails/awe.jpg) left top no-repeat;}
	.reflection					{background: url(thumbnails/reflection.jpg) left top no-repeat;}
	.powerofmotion				{background: url(thumbnails/power_of_motion.jpg) left top no-repeat;}
	.calmbeforestorm			{background: url(thumbnails/calm_before_storm.jpg) left top no-repeat;}
	.springpeace				{background: url(thumbnails/spring_peace.jpg) left top no-repeat;}
	.lavenderfield				{background: url(thumbnails/lavender_field.jpg) left top no-repeat;}
/* ================================================================================================== */
/* ========================================= DOWNLOADSPAGE ========================================= */
.downloadsTitle					{background: url(images/downloads_title.png) left top no-repeat;}
#downloadsContainer				{width: 100%; margin-top: 0px;}
#downloadsIntro					{float: left; width: 700px; margin-top: 40px;}
#downloadsIntro p				{font-size: 1.1em; line-height: 1.4em; padding: 0; margin: 0;}
#downloadsAvailable				{float: left; width: 260px; height: 170px; margin: 15px 0 0 20px;
								background: url(images/availablefor_bg.png) center top no-repeat;}
#downloadsThumbsContainer		{width: 1020px; float: left; margin: 5px 0 0 -25px;}
.downloadsItem					{width: 308px; float: left; display: block; margin: 30px 0 0 25px;}
.downloadsItem ul				{padding: 0; width: 308px; float: left; list-style: none; margin: 0;}
li.downloadsThumb				{width: 308px; height: 218px; float: left; display: block; border: 1px #999 solid;
								-moz-box-shadow:0px 0px 4px #666; -webkit-box-shadow:0px 0px 4px #666; box-shadow:0px 0px 4px #666;}
.downloadsItem ul img			{opacity: 0; filter: alpha(opacity=0); border: 0;}
	.chinaimpressionwp			{background: url(thumbnails/chinaimpression_wp.jpg) left top no-repeat;}
	.fivestudiothemewp			{background: url(thumbnails/5ivestudiotheme_wp.jpg) left top no-repeat;}

ul.downloadsIcon				{width: 308px; list-style: none; padding: 0; margin: 10px 0 0 10px;}
ul.downloadsIcon li a			{display: block; float: left; margin-right: 15px; text-indent: -9999px;}
	.standardScreen				{width: 19px; height: 22px; background: url(images/downloads_sprite.png) left 6px no-repeat;}
	.widescreen					{width: 25px; height: 22px; background: url(images/downloads_sprite.png) -40px 6px no-repeat;}
	.phoneScreen				{width: 26px; height: 22px; background: url(images/downloads_sprite.png) -80px 6px no-repeat;}
	.standardScreen:hover		{width: 19px; height: 22px; background: url(images/downloads_sprite.png) left -24px no-repeat;}
	.widescreen:hover			{width: 25px; height: 22px; background: url(images/downloads_sprite.png) -40px -24px no-repeat;}
	.phoneScreen:hover			{width: 26px; height: 22px; background: url(images/downloads_sprite.png) -80px -24px no-repeat;}
/* ================================================================================================== */
/* ========================================= CONTACTPAGE ========================================= */
.contactTitle					{background: url(images/contact_title.png) left top no-repeat;}
#contactContainer				{width: 100%; margin-top: 0px;}
#contactContainer h2			{color: #627380; font-size: 1.3em; letter-spacing: -0.05em;line-height: 0.5em;}
#contactContainer #contentLeft	{float: left; width: 600px; margin: 0;}
#contactContainer #contentRight	{float: left; width: 360px; margin-left: 20px;}
#contactContainer #contactIntro	{float: left; width: 600px; margin-top: 40px;}
#contactContainer #contactIntro p	{font-size: 1.1em; line-height: 1.4em; padding: 0; margin: 0;}
#contactForm					{float: left; width: 600px;}
#contactForm form				{width: 580px; margin-top: 30px; padding: 30px 0 0 20px;}
#contactForm .inputBar			{background: #efefef url(images/input_bg.png) top repeat-x; border: 1px solid #dbdbdb; padding: 5px;
								width: 270px; height: 15px; font-family: Arial, Helvetica, sans-serif; color: #666;}
#contactForm .inputBox			{background: #efefef url(images/input_bg.png) top repeat-x; border: 1px solid #dbdbdb; padding: 5px;
								width: 400px; height: 200px; font-family: Arial, Helvetica, sans-serif; color: #666;}
#contactForm label				{display: block; width: 120px; float: left; text-align: right; margin-right: 30px; padding: 4px 0;
								font-size: 1.2em; font-weight: bold;}
#contactForm label.req			{background: url(images/formreq_bg.png) left 3px no-repeat;}
#contactForm .submitButton		{margin-left: 150px; padding: 3px 10px; background: #757575 url(images/submit_bg.png) top repeat-x;
								border: 1px solid #696969; color: #ccc; text-shadow: #333 0 -1px 1px;}
#contactForm .submitButton:hover{color: #fff;}

#contactFriends					{float: left; margin: 40px 0 0 20px; width: 170px;}
#contactFriends h2, #contactFindme h2	{color: #627380; font-size: 1.3em; letter-spacing: -0.05em; line-height: 0.5em; margin-top: 0;}
#contactFriends ul				{width: 170px; list-style: none; padding: 0; margin: 0;}
#contactFriends ul li a			{display: block; float: left; width: 29px; height: 29px; margin-right: 3px; text-indent: -9999px;
								border: #999 1px solid;}
#contactFriends ul li a:hover	{border-color: #333;}
#contactFindme					{float: left; width: 150px; margin: 40px 0 0 20px;}
#contactFindme ul				{width: 150px; list-style: none; padding: 0; margin: 0;}
#contactFindme ul li a			{display: block; float: left; width: 43px; height: 43px; margin-right: 5px; text-indent: -9999px;
								border: #999 1px solid;}
#contactFindme ul li a:hover	{border-color: #333;}
/* ================================================================================================== */
/* ========================================= THANKYOUPAGE ========================================= */
.thankyouTitle					{background: url(images/thankyou_title.png) left top no-repeat;}
#thankyouContainer				{float: left; width: 980px; margin-top: 15px;}
#thankyouContainer h2			{color: #627380; font-size: 1.3em; letter-spacing: -0.05em;line-height: 0.5em;}
#thankyouContainer p			{font-size: 1.1em; line-height: 1.4em; padding: 0; margin: 0;}
/* ================================================================================================== */
/* ========================================= ERRORPAGES ========================================= */
.errorTitle						{background: url(images/error_title.png) left top no-repeat;}
#errorContainer					{width: 100%; margin-top: 0px;}
#errorContainer #errorIntro		{float: left; width: 980px; margin-top: 15px;}
#errorContainer #errorIntro h2	{color: #627380; font-size: 1.3em; letter-spacing: -0.05em; line-height: 0.5em;}
#errorContainer #errorIntro p	{font-size: 1.1em; line-height: 1.4em; padding: 0; margin: 0;}

#errorForm						{float: left; width: 600px;}
#errorForm form					{width: 580px; margin-top: 30px; padding: 30px 0 0 20px;}
#errorForm .inputBar			{background: #efefef url(images/input_bg.png) top repeat-x; border: 1px solid #dbdbdb; padding: 5px;
								width: 270px; height: 15px; font-family: Arial, Helvetica, sans-serif; color: #666;}
#errorForm .inputBox			{background: #efefef url(images/input_bg.png) top repeat-x; border: 1px solid #dbdbdb; padding: 5px;
								width: 400px; height: 200px; font-family: Arial, Helvetica, sans-serif; color: #666;}
#errorForm label				{width: 120px; float: left; text-align: right; margin-right: 30px; padding: 4px 0;
								font-size: 1.2em; font-weight: bold;}
#errorForm label.req			{background: url(images/formreq_bg.png) left 3px no-repeat;}
#errorForm .submitButton		{margin-left: 150px; padding: 3px 10px; background: #757575 url(images/submit_bg.png) top repeat-x;
								border: 1px solid #696969; color: #ccc; text-shadow: #333 0 -1px 1px;}
#errorForm .submitButton:hover	{color: #fff;}
#errorForm .reqField			{clear: both; float: left; width: 550px; color: #c83535; left: 150px; position: relative;
								font-weight: bold; margin: 0; padding: 0 0 5px 0;}
/* ================================================================================================== */
/* ========================================= FOOTER ========================================= */
#footerContainer				{width: 980px; min-height: 370px; float: left; margin-top: 85px;
								background: url(images/footer_bg.png) top left no-repeat;}
#socialMedia					{width: 260px; float: left; margin: 130px 0 0 30px;}
#socialMedia ul					{width: 260px; list-style: none; padding: 0;}
#socialMedia ul li a			{display: block; float: left; margin-right: 20px; text-indent: -9999px;}
	.twitterWordmark			{width: 65px; height: 16px; background: url(images/socialmedia_sprite.png) left top no-repeat;}
	.facebookWordmark			{width: 62px; height: 13px; background: url(images/socialmedia_sprite.png) left -20px no-repeat;}
	.deviantartWordmark			{width: 73px; height: 13px; background: url(images/socialmedia_sprite.png) left -40px no-repeat;}
	.twitterWordmark:hover		{width: 65px; height: 16px; background: url(images/socialmedia_sprite.png) -90px top no-repeat;}
	.facebookWordmark:hover		{width: 62px; height: 13px; background: url(images/socialmedia_sprite.png) -90px -20px no-repeat;}
	.deviantartWordmark:hover	{width: 73px; height: 13px; background: url(images/socialmedia_sprite.png) -90px -40px no-repeat;}
	
#footerFriends					{float: left; margin-top: 15px;}
#footerFriends ul				{list-style: none; padding: 0; margin: 0;}
#footerFriends ul li a			{display: block; float: left; width: 29px; height: 29px; margin-right: 3px; text-indent: -9999px;
								border: #999 1px solid;}
#footerFriends ul li a:hover	{border-color: #333;}

#latestTweets					{width: 300px; float: left; margin: 40px 0 0 30px;
								background: url(images/twitter_grid_bg.png) right top no-repeat;}
#latestTweets h3				{font-size: 1.3em; color: #999; font-weight: bold; letter-spacing: -0.05em; line-height: 1em; margin: 0;}
#latestTweets h3 a				{margin-left: 30px; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; font-size: 0.65em;
								text-decoration: none; color: #36424b; font-weight: normal;}
#latestTweets h3 a:hover		{text-decoration: none; color: #c83535;}
#latestTweets #follow			{clear: both; text-align: right; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic;}
/* --- Latest Tweets --- */
#twitter_update_list			{width: 300px; list-style: none; font-family: Arial, Helvetica, sans-serif; color: #36424b;	
								font-size: 0.8em; line-height: 1.2em; margin-left: -35px;}
#twitter_update_list li			{width: 280px; padding: 0 0 15px 20px; background: url(images/quotation.png) left top no-repeat;}
#twitter_update_list li a		{text-decoration: none; color: #c83535;}
#twitter_update_list li a:hover	{text-decoration: underline; color: #36424b;}
/* --- end of Latest Tweets --- */
#bottomContainer				{width: 980px; float: left; height: 40px; padding-top: 10px;
								background: url(images/footer_divider.png) center top no-repeat;}
#bottomContainer p				{float: left; font-size: 0.8em; padding-left: 30px; margin-top: 0; line-height: 1em;}
#bottomContainer a				{float: right; text-decoration: none; color: #c83535; font-size: 0.8em; padding-right: 30px;}
#bottomContainer a:hover		{text-decoration: underline; color: #36424b;}
/* ================================================================================================== */