/*****
	CSS RESET - MODIFIED YAHOO YUI
*****/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;} fieldset,img {border:0;} img {-ms-interpolation-mode: bicubic;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;} .clear {clear: both;}
ol,ul,li {list-style:none;} caption,th {text-align:left;} h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';} abbr,acronym {border:0;} * {outline: none; -webkit-text-size-adjust: none;}

/* HTML 5 Stuff / Makes these selectors block level elements */
header, footer, aside, nav, section, article {display: block;}

/* Load Bebas */
@font-face 					{font-family: 'Bebas'; src: url('/fonts/BEBAS___-webfont.eot'); src: local('☺'), url('/fonts/BEBAS___-webfont.woff') format('woff'), url('/fonts/BEBAS___-webfont.ttf') format('truetype'), url('/fonts/BEBAS___-webfont.svg#webfont') format('svg'); font-weight: normal; font-style: normal;}


/*****
	GENERIC
*****/
html						{background: #000;}
body 						{font-family: 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; color: #ccc; background: url(/images/bgBlackStatic.png); font-size: 11px;}

/*****
	PROGRESSIVE ENHANCEMENT
*****/
a							{-webkit-transition-duration: .33s; -webkit-transition-property: color, background-image;}

/*****
	LAYOUT
*****/
header						{position: fixed; top: 0; left: 0; width: 100%; height: 62px; z-index: 100; background: url(/images/headerBgStatic.png) fixed;}
header #headerIn			{width: 902px; margin: 0 auto; overflow: hidden;}
header #headerIn h1			{float: left; line-height: 62px; word-spacing: 10px; width: 400px;}
header #headerIn h1 span	{position: relative; top: -19px; left: 5px; font-size: 11px; color: #666; font-family: 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; word-spacing: 0px; letter-spacing: 1px; font-weight: bold;}
header #headerIn h1 a:link, header #headerIn h1 a:visited	{color: #fff;}
header #headerIn h1 a:active, header #headerIn h1 a:hover, header #headerIn h1 a:focus	{color: #ccc;}
header #headerIn nav		{float: right; line-height: 62px;}
header #headerIn nav ul		{position: relative; right: -10px;}
header #headerIn nav ul li	{float: left;}
header #headerIn nav ul li a{font-family: Bebas, 'Arial Narrow', Arial, sans-serif; font-size: 20px; display: block; padding: 0 10px;}
header #headerIn nav ul li a:link, header #headerIn nav ul li a:visited	{color: #888;}
header #headerIn nav ul li active, header #headerIn nav ul li a:hover, header #headerIn nav ul li a:focus	{color: #fff;}
#headerUnder				{position: fixed; top: 62px; left: 0; width: 100%; height: 48px; z-index: 100; background: url(/images/headerBg.png) top repeat-x;}


.container					{width: 900px; display: block; margin: 0 auto; padding: 30px; background: url(/images/white10.png); -moz-border-radius: 13px; -webkit-border-radius: 13px; border-radius: 13px;}

#intro						{padding: 100px 0;}
section						{padding: 0 0 100px 0;}

#intro						{text-indent: -5000px;}
#intro span					{background: url(/images/tagLine.png) no-repeat; width: 694px; height: 255px; position: relative;}
#intro span #arrows			{height: 54px; left: 672px; position: absolute; top: 170px; width: 10px; cursor: pointer;}
#intro span #arrows .arrow	{width: 20px; height: 18px; background: url(/images/downArrow.png); display: none;}

#problem					{overflow: hidden;}
#problem .container			{width: 960px; position: relative; background: none;}
#problemTopLeft, #problemTopRight, #problemBottomLeft, #problemBottomRight		{float: left; background: url(/images/white10.png); -moz-border-radius: 13px; -webkit-border-radius: 13px; border-radius: 13px; padding: 30px 30px 20px 30px;}
#problem #problemTopLeft	{margin: 0 30px 0 0; width: 300px;}
#problem #problemTopArrow	{position: absolute; background: url(/images/rightArrow.png) center center no-repeat; width: 20px; top: 30px; left: 396px; padding: 30px 0 20px;}
#problem #problemTopRight	{width: 510px;}
#problem #problemBottomLeft	{width: 510px; margin: 30px 30px 0 0;}
#problem #problemBottomArrow{position: absolute; background: url(/images/rightArrow.png) center center no-repeat; width: 20px; bottom: 30px; left: 606px; padding: 30px 0 20px;}
#problem #problemBottomRight{width: 300px; margin: 30px 0 0 0;}
#problem div h3				{font-size: 30px; margin: 0 0 15px 0;}
#problem div p				{line-height: 16px; margin: 0 0 10px 0;}
#problem div p em			{font-style: italic; color: #ccc;}

#work .container			{position: relative; padding-bottom: 15px;}
#work h3					{font-size: 30px; margin: 0 0 10px 0;}
#work article				{border-top: 1px dashed #666; padding: 15px 0 0 0; clear: both;}
#work article img			{float: left; width: 600px; height: 180px; box-shadow: 0px 0px 10px rgba(0,0,0,0.5); -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.5); margin: 0 0 15px 0;}
#work article p				{float: right; width: 260px;}
#work article p.linkToSite	{margin: 10px 0 20px 0;}

#services .container		{overflow: hidden;}
#services h3				{font-size: 30px; width: 150px; float: left; line-height: 32px;}
#services p					{width: 750px; float: right; position: relative; top: 2px;}

#contact					{padding-bottom: 20px !important;}
#contact .container			{overflow: hidden;}
#contact h3					{font-size: 30px; margin: 0 0 15px 0;}
#contact form, #contact div	{height: 170px;}
#contact form				{width: 540px; float: left; position: relative;}
#contact form #feedback		{position: absolute; bottom: 0; left: 0; line-height: 38px; padding: 0 0 0 15px; width: 525px; background: url(/images/white10.png); border-top: 1px solid rgba(255,255,255,0.1); z-index: 100;}
#contact form textarea		{width: 514px; height: 118px; background: url(/images/white10.png); border: 0; padding: 7px 13px; color: #fff; font-family: 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 10px; line-height: 16px;}
#contact form span			{display: block; font-family: Bebas, 'Arial Narrow', Arial, sans-serif; font-size: 20px; background: url(/images/white10.png); border: 0; padding: 0 10px; position: absolute; bottom: 0; right: 0; color: #fff; line-height: 38px; overflow: hidden; z-index: 150;}
#contact form span:hover	{cursor: pointer;}
#contact #success			{float: left; width: 212px;}
#contact #contactInfo		{float: right; width: 299px; border-left: 1px dashed #666; padding: 0 0 0 26px; margin: 0 0 0 30px;}
#contact #contactInfo .contactEmailLink	{margin: 0 0 10px 0;}
#contact #contactInfo p em	{font-style: italic; color: #eee;}

footer						{width: 960px; margin: 0 auto; padding: 0 0 20px 0; text-align: center; color: #666;}
footer p a:link, footer p a:visited	{color: #666;}
footer p a:active, footer p a:hover	{color: #fff;}

/*****
	GENERAL TYPOGRAPHY
*****/
h1, h2, h3, h4, h5, h6		{text-transform: uppercase; font-family: Bebas, 'Arial Narrow', Arial, sans-serif; color: #903; text-shadow: 3px 3px 5px rgba(0,0,0,0.2);}
h1							{font-size: 30px;}
h2							{font-size: 26px;}
h3							{font-size: 22px;}
h4							{font-size: 18px;}
h5							{font-size: 15px;}
h6							{font-size: 12px;}
p							{font-size: 11px; line-height: 18px;}
p a:link, p a:visited		{color: #fff;}
p a:active, p a:hover		{color: #fff; text-decoration: underline;}

a							{text-decoration: none;}

strong						{font-weight: bold;}

p, li						{text-shadow: 1px 1px 1px rgba(0,0,0,0.5);}

::selection					{background: #903; color: #fff;}
::-moz-selection			{background: #903; color: #fff;}