﻿/*------------------------------------------------------------------------

Project: 	Outlaw Conversions
Version: 	1.0

Designed By: Jimmy Forbes

Coded By: 	Chris Herrmann - Midago, Inc.
			cherrmann@ariamedia.com

[CONSTANTS]

Colors: 	#F30 Red (Headers)
			#FFF White (Body Copy)

Typography: Arial

[TABLE OF CONTENTS]


		
------------------------------------------------------------------------ */


/* 1. GLOBAL ELEMENTS
-------------------------------------------------------------- */	
* { margin: 0; padding: 0; }

html { height:100.01% } 
		
body { font-size: 62.5%; font-family: "Helvetica", "Arial", sans-serif;	height: 100%; background: #000 url(../images/background.jpg) 50% 0 no-repeat; }
	
dl { margin: 14px 0 25px 35px; font-size: 1.4em; color: #FFF; }

a img {	border: 0px; }

h1, h2 { font-weight: normal; color: #F30; margin-left: 35px; }
	
h3 { color: #000; }

br { margin: 10px; }
	
p { font-size: 1.4em; color: #FFF; margin: 16px 0 28px 35px; }

label { padding-right: 10px;}

fieldset { border: none; }



/* 2. LAYOUT
---------------------------------------------------------------- */

#wrapper {	width:960px; margin:0 auto;	}
	
#content { margin-left: 67px; width: 840px; min-height: 540px; background: url(../images/contentBg.png) repeat; }

#sub { display: inline;	float: left; width: 288px; }

#main {	display: inline; float: right; width: 517px; padding-right: 35px; }

#main_photographs {	display: inline; float: left; width: 550px; padding-right: 35px; }

#footer { clear: both; margin-left: 67px; border-top: solid 1px #373737; width: 840px; }	
	

/* 3. NAVIGATION
-------------------------------------------------------------- */

#logo { margin: 10px 0 8px 60px; }

#nav { margin-left: 65px; list-style: none;	text-transform: uppercase; background: url(../images/navBg.png) no-repeat; width: 844px; height: 27px; }
	
#nav li { margin: 6px 10px 0px 20px; display: inline; float: left; font-size: 12px;	font-weight: bold; }

#nav a { padding: 1px; display: block; color: #000; text-decoration: none; }

body#home #t-home a, body#company #t-company a,	body#schedule #t-schedule a, body#photographs #t-photographs a,	body#quote #t-quote a, body#contact #t-contact a {	cursor: default; color: #F30; }

#nav a:hover { cursor: pointer;	color: #F30; }
	
/* 4b. SUB CONTENT
---------------------------------------------------------------- */

#sub a:hover { color: #F30;	text-decoration: underline;	}
#sub h1, h2 {
	margin-left: 35px;
	font-size: 2em;
	text-transform: capitalize;
}
#sub h1 { margin-top: 43px;	}
#sub h2 { font-size: 1.6em;	}
#sub img { margin: 35px; margin-top: 70px; }
#sub div.top { margin-top: 43px; }


/* 4. CONTENT
------------------------------------------------------------- */
#sub p { margin: 16px 0 28px 35px; }
#sub a	{ text-decoration: underline; color: #FFF; }

/* 4a. MAIN CONTENT
--------------------------------------------------------------- */	
#main h1, #main_photographs h1 { font-size: 2em; margin-top: 43px; }
#main h2, #main_photographs h2 {
	margin: 0;
	padding: 5px 0 10px 12px;
	font-size: 1.6em;
}
#main label { width: 140px; float: left; font-size: 1.4em; color: #FFF; margin: 16px 0 0px 35px; }
#main input, select, textarea { width: 220px; float: left; margin: 16px 0 0 0px; }
#main dt, dd { margin: 0; }
#main dt { font-weight: bold; }
#main dl a { text-decoration: underline; color: #FFF; }
#main dl a:hover { color: #F30;	text-decoration: underline; }


/* 6. FOOTER
--------------------------------------------------------------- */
#footer ul { margin: 7px 0 7px 35px; list-style: none; display: block; }
#footer li { margin: 0 30px 0 2px; display: block; float: left; font-size: 1em; color: #F30;	}
#footer li a { color: #FFF; text-decoration: none; }
#footer li a:hover { color: #F30; }
#footer img {
	float: none;
	margin-top: 20px;
	margin-right: 0;
	margin-bottom: 10px;
	margin-left: 10px;
}
	
/* 7. BUTTONS
------------------------------------------------------------ */
.button { margin-left: 35px; float:left; background: url(../images/btnBg.png) no-repeat top left; height: 21px;	width: 137px; }

.button h3 { padding: 3px 7px 4px 18px;	background: url(../images/arrow.gif) no-repeat 7px 50%;	font-size: 1.2em; }
	
.button a {	display: block;	text-decoration: none !important; color: #000 !important;	}
	
.button	a:hover { color: #FFF !important; }
	
.bigButton { margin: 20px 0 0 20px;	float:left;	background: url(../images/bigBtn.png) no-repeat top left; height: 28px;	width: 136px; }

.bigButton h3 {	padding: 4px 7px 4px 18px; background: url(../images/arrow.gif) no-repeat 7px 10px;	font-size: 1.8em; }

.bigButton a { display: block; text-decoration: none; color: #000; }

.bigButton	a:hover { color: #FFF; }
	
/* 8. BOXES
---------------------------------------------------------- */
.boxWide { float: right; background: url(../images/wideboxBg.png) no-repeat; margin-top: 46px;	width: 486px; height: 180px; padding-bottom: 3px; }
.boxWide h1, .boxWide p { margin: 15px 270px 0 20px !important; }

.box { float: right; background: url(../images/boxBg.png) no-repeat; width: 233px; height: 218px; margin: 15px 0 0 20px; }	
.box h2 { padding-left: 20px !important; }
.box p {
	margin-left: 22px;
	margin-top: 10px;
	width: 190px;
	color: #FFF;
	font-size: 1.2em;
}
.box a	{ text-decoration: underline; color: #FFF; }
.box a:hover { color: #F30; }

/* 9. MISC CLASSES
---------------------------------------------------------- */
.float_left { float: left; }
.class { clear: both; }
.mb_30 { margin-bottom: 30px; }
.mb_10 { margin-bottom:10px; }

.errorContainer { width:300px !IMPORTANT; padding: 0 0 0 150px; !IMPORTANT; }
.error { color: #F30 !IMPORTANT; float: none !IMPORTANT; font-size: 1.2em !IMPORTANT;}
input.error_field, textarea.error_field { background: #fcc; }
select.error_field { background: #fcc; }
input.error_fieldCheckbox { background: #fcc; }

.prototip { position: absolute; filter: alpha(opacity=85); opacity: 0.85; padding: 0; margin: 0;  }
.prototip .effectWrapper { position: relative; }
.prototip .tooltip { position: relative; }
.prototip .toolbar { position: relative; display: block;}
.prototip .toolbar .title { display: block; position: relative; }
.prototip .content { clear: both; position: relative; top: 0; }
.prototip .toolbar a.close { position: relative; text-decoration: none; float: right; width: 15px; height: 15px; background: transparent url(../images/close.png) 0 0 no-repeat; display: block; line-height: 0; font-size: 0px; border: 0; }
.prototip .toolbar a.close:hover { background: transparent url(../images/close.png) 0 0 no-repeat; }

div div span { display:block; clear:both; color: #FFF; margin-left: 185px; }

.protoClassic { border: 1px solid #8c939c;   }
.protoClassic .toolbar { background: #96b8e2 url(../images/classic_toolbar.gif) top left repeat-y; font-weight: bold; color: #fff;}
.protoClassic .toolbar a.close:hover { background: url(../images/close_hover_red.gif);}
.protoClassic .title { padding: 3px; }
.protoClassic .content { background: #FFFFCC; color: #333333; font: 11px Arial, Helvetica, sans-serif; padding: 5px; }
