@charset "utf-8";

/*
Site: fatbox.com
Date: April 2010 - May 2010
Author: Hector Aranda
URL: http://www.hectorarandawebworx.com
*/


/* Site Structure
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */
body {
	margin: 0;
	padding: 0;
	background: #000000 url(includes/images/BG.jpg) top center scroll repeat-x;
}

#Page {
	margin: 0 auto;
	padding: 0;
	width: 960px
}

#Header {
	margin: 0;
	padding: 0;
	width: 960px;
	height: 130px;
}

#NavMenu {
	margin: 0 auto;
	padding: 0;
	width: 960px;
	height: 20px;
	position: relative
}

#Contents {
	margin: 0;
	padding: 50px 0 0 0;
	width: 960px;
}

#Footer {
	margin: 0;
	padding: 0;
	background: url(includes/images/Img-Footer.jpg) top center scroll no-repeat;
}

#FooterContent {
	margin: 0 auto;
	padding: 0;
	width: 960px;
}

#Address {
	margin: 0;
	padding: 5px 0 0 0;
	text-align: left;
	float: left
}

#AddressLA {
	margin: 0;
	padding: 5px 0 0 0;
	text-align: right;
	float: right
}

#Copyright {
	margin: 0;
	padding: 25px 0 25px 0;
	text-align: center;
	clear: both
}

.Clear {
	clear: both;
}

#SubMenu {
	margin: 0;
	padding: 5px 0 0 0;
}

/* Page Structure
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */
#Home {
	margin: 0 auto;
	padding: 120px 0 0 0;
	width: 960px;
	height: 380px
}

#Home #Left {
	margin: 0;
	padding: 0;
	float: left;
	width: 490px;
}

#Home #Right {
	margin: 0;
	padding: 0;
	float: right;
	width: 450px;
	height: 278px
}

#Home #FatPhone {
	margin: 0;
	padding: 40px 0 0 0 ;
	text-align: center;
}

#Projects {
	margin: 0 auto;
	padding: 50px 0 0 0;
	width: 960px;
	height: 450px;
}

#Projects #Left {
	margin: 0;
	padding: 0;
	float: left;
	width: 540px;
}

#Projects #Right {
	margin: 0;
	padding: 0;
	float: right;
	width: 400px;
}

#Gaming {
	margin: 0 auto;
	padding: 50px 0 0 0;
	width: 960px;
}

#Gaming #Left {
	margin: 0;
	padding: 0;
	float: left;
	width: 540px;
}

#Gaming #Right {
	margin: 0;
	padding: 0;
	float: right;
	width: 400px;
}

#Jobs {
	margin: 0 auto;
	padding: 70px 0 0 0;
	width: 960px;
	height: 430px;
}

#ThreeCol {
	margin: 0 auto;
	padding: 0;
	width: 960px;
	height: 500px
}

#ThreeCol #Left {
	margin: 0;
	padding: 0 10px 0 0;
	float: left;
	width: 170px;
}

#ThreeCol #Mids {
	margin: 0;
	padding: 0;
	float: left;
	width: 1px;
}

#ThreeCol #Right {
	margin: 0;
	padding: 0;
	float: right;
	width: 760px;
}

#AboutUs {
	margin: 0 auto;
	padding: 0;
	width: 960px
}

#AboutUs #Left {
	margin: 0;
	padding: 0;
	float: left;
	width: 450px;
}

#AboutUs #Right {
	margin: 0;
	padding: 0;
	float: right;
	width: 490px;
}

#Contact {
	margin: 0 auto;
	padding: 0;
	width: 960px;
	height: 500px
}

#Contact #Left {
	margin: 0;
	padding: 0;
	float: left;
	width: 500px;
}

#Contact #Right {
	margin: 0;
	padding: 0;
	float: right;
	width: 450px;
}

#Contact #Norcal {
	margin: 0;
	padding: 0;
	float: left;
	width: 225px
}

#Contact #Socal {
	margin: 0;
	padding: 0;
	float: right;
	width: 225px
}

#AdditionalProjects {
	margin: 0;
	padding: 0 0 15px 0;
}

.InlineContent { 
	margin: 0;
	padding: 20px;
}

.Logo {
	margin: 0;
	padding: 0 20px 0 0;
}

#MotionReel {
	margin: 0;
	padding: 0;
	width: 420px;
	float: left;
}

#MotionText {
	margin: 0;
	padding: 0;
	width: 320px;
	float: right;
}

/* Typography & Colors
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */
body {
	color: #ffffff;
	font-size: 13px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#Address, #AddressLA {
	font-size: 11px;
	color: #666666;
	text-transform: uppercase
}

#Copyright {
	font-size: 11px;
	color: #333333;
	text-transform: uppercase
}

.SideMenuLinks {
	color: #fae643;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Arial Black", Gadget, sans-serif, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
}

h1 {
	font-size: 18px;
	color: #fae643;
}

h2 {
	font-size: 16px;
	color: #999999;
}

h3 {
	font-size: 14px;
	color: #999999;
}

h4 {
	font-size: 12px;
	color: #999999;
}

h5 {
	font-size: 10px;
	color: #999999;
}

h6 {
	font-size: 10px;
	color: #999999;
}

.InlineContent h4 {
	color: #fae643;
}
	
#SubMenu {
	font-size: 10px;
	font-family: "Arial Black", Gadget, sans-serif, Arial, Helvetica, sans-serif;
	color: #fae643;
	text-transform: uppercase
}

#FormBox span {
	font-family: "Arial Black", Gadget, sans-serif, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	font-size: 10px;
	color: #999999;
}

.Field, textarea {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 12px;
	color:#CCC;
}

.Send {
	font-family: "Arial Black", Gadget, sans-serif, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	font-size: 12px;
	color: #fae643;
	background: #000000;
	border: none
}

#Testimonials {
	font-size: 11px;
}

#Thankyou h1 {
	font-size: 26px
}

span {
	color: #fae643;
	font-size: 16px;
}

/* Headers & Paragraphs
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}

p {
	margin: 0;
	padding: 0;
	line-height: 22px
}

#AboutUs p, #Jobs p, #Projects p, #Home p, #ThreeCol p, #Contact p, #Gaming p, .InlineContent p {
	padding-bottom: 15px;
}

#MotionText p {
	line-height: 23px;
}


/* Links
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */
a:link {
	color: #fae643;
	text-decoration: none
}

a:visited {
	color: #fae643;
	text-decoration: none
}

a:hover {
	color: #C00;
	text-decoration: none
}

#Copyright a:link {
	color: #333333;
	text-decoration: none
}

#Copyright a:visited {
	color: #333333;
	text-decoration: none
}

#Copyright a:hover {
	color: #fae643;
	text-decoration: none
}

#SubMenu a:link {
	color: #fae643;
	text-decoration: none
}

#SubMenu a:visited {
	color: #fae643;
	text-decoration: none
}

#SubMenu a:hover {
	color: #C00;
	text-decoration: none
}

.SideMenuLinks a:link {
	color: #cccccc;
	text-decoration: none
}

.SideMenuLinks a:visited {
	color: #cccccc;
	text-decoration: none
}

.SideMenuLinks a:hover {
	color: #C00;
	text-decoration: none
}

#AdditionalProjects a:link {
	color: #000000;
	text-decoration: none
}

#AdditionalProjects a:visited {
	color: #000000;
	text-decoration: none
}

#AdditionalProjects a:hover {
	color: #000000;
	text-decoration: none;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

/* Contact Form
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */
#FormBox {
	margin: 0;
	padding: 0;
}

#Thankyou {
	margin: 0;
	padding: 50px 0 0 0;
	text-align: center
}

.Field, textarea {
	padding: 8px;
	border: 1px solid #666666;
	background-color: #1a1a1a;
	width: 300px
}

/* Lists
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */
ul {
	margin: 0 0 0 15px;
	padding: 0;
	list-style: disc;
}

li {
	margin: 0;
	padding: 2px 0;
}

#Left ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#Left li {
	margin: 0;
	padding: 5px 0;
}

#ClientThumbs ul {
	margin: 0;
	padding: 0 0 10px 0;
	list-style: none;
	height: 80px
}

#ClientThumbs li {
	margin: 0;
	padding: 0 10px 0 0 ;
	float: left
}

#Testimonials ul {
	margin: 0;
	padding: 0 0 10px 0;
	list-style: none;
	height: 120px
}

#Testimonials li {
	margin: 0;
	padding: 0 ;
	float: left;
	text-align: center;
	width: 150px
}