/* CSS Document */

/*---------------------------------------------------------------------

    ______)                      ______                               
   (, /  /)   ,        ,        (, /    )                ,  /)     /) 
     /  (/      _        _        /---(   _  _      _/_    //     //  
  ) /   / )__(_/_)_  _(_/_)_   ) / ____)_(/_(_(_(_(_(___(_/(_(_(_(/_  
 (_/                          (_/ (                      /)           
                                                        (/       
---------------------------------------------------------------------*/														 
														 

/*-------------------------------------------*/
/* This is Beautiful Color Palette Reference 
	
	Text - #999
	Links - #f60
	
	COLORS
	Orange - #f60	
	Yellow - #8cc63f
	Green -#8cc63f
	
	GRAYS
	Dark Gray - #1e2426
	Medium Gray - #384247
	Light Gray - #657780

/*-------------------------------------------*/


/* Global Reset */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li,fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: Helvetica, Arial, sans-serif;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {outline: 0;}

body {line-height: 1; color: black; background: white;}

ol, ul {list-style: none;}

table {border-collapse: separate; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}


/* MAIN CONTENT */

/* BODY STYLES */

	body {margin: 0; padding: 0; font: 14px Helvetica, Arial, sans-serif; color: #999; background-color: #000; background-image:none;}

	p {
	margin: 0 0 10px 0;
	line-height: 1.5em;
	font-weight: normal;
}
	
/* HEADER STYLES */
	
	h1 {margin: 0 0 10px 0; font-size: 40px; font-weight: normal; color: #8cc63f; line-height:1.20em;}
		
	h2 {margin: 0 0 20px 0; padding: 0 0 5px 0; width: 940px; border-bottom: 1px solid #1e2426; font-size: 24px; font-weight: normal; text-transform: uppercase; color: #8cc63f;}
			
	h3 {margin: 0 0 5px 0; font-size: 18px; font-weight: normal; line-height: 1.5em; color: #fff;}
			
	h4 {margin: 0 0 5px 0; font-size: 14px; font-weight: bold; color: #8cc63f;}
	
					
/* LINK STYLES */
	
	a:link {color: #f60; text-decoration: none;}
	a:hover {color: #fff; text-decoration: none;}
	a:active {color: #f60; text-decoration: none;}
	a:visited {color: #f60; text-decoration: none;}
	
	
/* LAYOUT ELEMENT STYLES */
/* Top, Right, Bottom, Left */

/* MAIN WRAPPER */
#mainWrapper {margin: 0 auto; padding: 0 0 40px 0; width: 940px;}

/* HEADER */
#header {padding: 40px 0; width: 940px; border-bottom: 1px solid #1e2426;}
				
/* MAIN NAVIGATION */
		#mainNav {float: right; margin: 0px 0 0 0;}
		#mainNav li {display: inline;}
		#mainNav a {float: left; margin: 0 20px 0 0; padding: 0 0 5px 0; font-size: 18px; font-weight: normal; color: #fff; text-decoration: none;}
		#mainNav a.current {border-bottom: 5px solid #f60; color: #f60;}
		#mainNav a:hover {color: #f60;}
		
/* BRANDING */
		#beautifulBrand {float: left; width: 280px; height: 125px;}
		#beautifulBrand a {display: block; width: 280px; height: 125px; background: url(../images/tib_logo.png) top left no-repeat;}
	
/* MAIN HERO IMAGE */
		#hero {padding: 0 0 0 0; width: 940px; height:500px; background:#CCC border-top: 1px solid #1e2426; border-bottom: 1px solid #1e2426;}

/* LOCALSCROLL BUTTONS */
		.scrollButtons {position: absolute; top: 40px; right: 0; width: 135px; height: 25px;}
		a.upButton {float: left; display: block; width: 50px; height: 25px; background: url(../images/up_btn.png) 0 0 no-repeat;}
		a.upButton:hover {background-position: 0 0px;}
		a.downButton {float: left; display: block; width: 85px; height: 25px; background: url(../images/down_btn.png) 0 0 no-repeat;}			
		a.downButton:hover {background-position: 0 0px;}

/* INTRODUCTION TEXT */
		#intro {padding: 40px 0 20px 0; width: 940px; border-bottom: 1px solid #1e2426;}
	
/* WORK WRAPPER */
		#work {overflow:auto; position: relative; padding: 40px 0; width: 940px; border-bottom: 1px solid #1e2426;}
			
/* LEFT COLUMN */
		#work .leftColumn {float: left; margin: 0 20px 0 0; width: 300px;}
		#work .thumbWrap {width: 300px; margin: 0 0 30px 0;}
																								
/* MIDDLE COLUMN */
		#work .middleColumn {float: left; margin: 0 20px 0 0; width: 300px;}
		
/* RIGHT COLUMN */
		#work .rightColumn {float: left; width: 300px;}
		
/* ABOUT WRAPPER*/
		#about {position: relative; padding: 40px 0 0 0; width: 940px; border-bottom: 1px solid #1e2426;}
	
/* ABOUT TOP WRAPPER */
		#aboutTopWrapper {margin: 0 0 20px 0; padding: 0 0 20px 0; width: 940px; border-bottom: none;}
			
/* LEFT COLUMN */
		#about .leftColumn {float: left; margin: 0 20px 0 0; width: 620px;}
																													
/* RIGHT COLUMN */
		#about .rightColumn {
			float: left;
			padding: 0 0 0 20px;
			width: 279px;
			border-left: 1px solid #1e2426;
			font-weight: bold;
}
	
/* SERVICES AND CLIENT LISTS */
		.serviceArea {float: left; margin: 0 19px 0 1px; width: 220px;}
		.serviceAreaEnd {float: left; width: 220px;}		
		.clientArea {float: left; margin: 0 19px 0 1px; width: 220px;}
		.clientAreaEnd {float: left; width: 220px;}			
		
/* CONTACT WRAPPER */
		#contact {position: relative; padding: 40px 0; width: 940px; border-bottom: 1px solid #1e2426;}

/* CONTACT FORM COLUMNS */
		#contact .contactColumn {float: left; margin: 0 20px 0 0; width: 940px;}
/* LEFT COLUMN */
		#contact .leftColumn {float: left; margin: 0 20px 0 1px; width: 450px;}
		
/* CONTACT FORM */
/* Top, Right, Bottom, Left */
		#contactForm {width: 940px;}
		#contactForm fieldset {margin: 10px 0 20px 0;}
		#contactForm legend {display: none;}
		#contactForm label {font-size: 14px; font-weight: bold; color: #657780;}
		#contactForm input {padding: 5px; width: 450px; font-family: arial, helvetica, sans-serif; font-size: 14px; color: #fff; border: none; background-color: #1e2426;}
		#contactForm label.error {color: #f60;}
		#contactForm select {clear: both; margin: 3px 0 5px 0; width: 220px;}
		#contactForm label.checkBox {margin: 0 20px 0 5px;}
		#contactForm textarea {padding: 9px; width: 450px; font-family: arial, helvetica, sans-serif; font-size: 14px; color: #fff; border: none; background-color: #1e2426;}
		#contactForm input.submit {float: right; padding: 0; width: 100px; height: 25px; background: none;}
																												
/* RIGHT COLUMN */
		#contact .rightColumn {float:right; margin: -270px 20px 0 20px; width: 450px;}
							
/* FOOTER */
		#footer {margin: 20px 0; width: 940px; height: 200px;}
		#footer p {float: left; color: #657780;}
		#footer a {font-weight: bold; color: #657780; text-decoration: none;}
		#footer a:hover {color: #fff;}
		#footer ul {float: right;}
		#footer li {display: inline; margin: 0 10px;}
							
					
/* UNIQUE CLASSES */
/* Top, Right, Bottom, Left */

.hide {display: none;}
.clear {clear: both;}
.small {margin: 0 0 0 10px; font-size: 14px;}
.white {color: #FFF;}
.orange {color:#f60;}
.pink {color:#C0C;}
.strong {color: #000;}
.thisisbeautiful {color: #C0C;}
.leadIn {margin: 0 0 20px 0; padding: 0 0 20px 0; font-size: 18px; font-weight: normal; text-transform: none; color: #fff; background: none; bottom left repeat-x;}
.borderBottom {margin: 0 0 20px 0; padding: 0 0 10px 0; border-bottom: 1px solid #ddd;}
.imgBottom {margin: 0px 0 20px 0; padding: 0 0 10px 0;}
.faulkner {font-size:12px; font-weight:normal; line-height: 10px; margin: 10px 0 10px 0px; line-height: 1.75em;}
.quoteCredit {font-size:12px; font-weight:normal;font-style:italic; line-height: 10px; margin: 10px 0 10px 5px; line-height: 1.75em;}
.special {display:none;}