/*-----------------------------------------------------------------------------
	DEFAULT GLOBAL
	
	blue: 		#0099cc
	orange:		#f26722
-----------------------------------------------------------------------------*/

* {margin: 0; padding: 0;}

html, body {height: 100%;}

body {font: 62.5% Lucida Grande, Lucida Sans Unicode, Arial, Helvetica, sans-serif; color: #999999; background: #202020 url(../images/bg-page.jpg) center center; line-height: 1.4em;}

.smaller {font-size: 0.9em;}
.smallest {font-size: 0.8em;}
.larger {font-size: 1.1em;}
.largest {font-size: 1.2em;}

.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}
.top {vertical-align: top;}
.middle {vertical-align: middle;}
.bottom {vertical-align: bottom;}
.floatleft {float: left;}
.floatright {float: right;}

p {margin: 0 0 1em 0;}

.strong {font-weight: bold;}
.em {font-style: italic;}
.hide {display: none;}
.block {display: block;}
.inline {display: inline;}
.none {display: none;}

.cap {text-transform: capitalize;}
.ucase {text-transform: uppercase;}
.lcase {text-transform: lowercase;}

hr {margin: 1em 0 1em 0; background: #303030; width: 100%; height: 1px; color: #303030; border: none; clear: both;}
.hr {margin: 1em 0 1em 0; border-top: 1px dotted #303030;}
	.hr hr {display: none;}
	
.clear {position: relative; width: 100%; clear: both; line-height: 0; height: 0; display: block;}

img {border: 0;}
	img.left {margin: 0 20px 8px 0; text-align: left;}
	img.right {margin: 0 0 8px 20px; text-align: left;}
	img.bordered {border: 5px solid #666666; margin: 0 5px 5px 0;}
		img.bordered:hover {border: 5px solid #ffffff;}
		
/* for flash and similar */
embed, object {position: relative; z-index: 0;}

/*-----------------------------------------------------------------------------
	DEFAULT LINKS
-----------------------------------------------------------------------------*/

a {color: #f26722; text-decoration: none; cursor: pointer;}
	a:hover {color: #ffffff;}
	a:focus {outline: none;}

/*-----------------------------------------------------------------------------
	TABLES
-----------------------------------------------------------------------------*/

table, td, th {vertical-align: top; text-align: left; font-size: 1em;}

/*-----------------------------------------------------------------------------
	DEFAULT HEADINGS
-----------------------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 {font-family: Lucida Grande, Lucida Sans Unicode, Arial, Helvetica, sans-serif;}

h1 {font-size: 2.5em; font-weight: normal; color: #808080; margin: 0 0 1em 0;}
	h1 em {font-weight: bold; color: #f26722; font-style: normal;}
	
h2 {font-size: 2em; font-weight: normal; color: #cccccc; margin: 0.5em 0 0.7em 0;}

h3 {font-size: 1.8em; font-weight: normal; color: #666666; margin: 0.5em 0 0.7em 0;}

h4 {font-size: 1.6em; font-weight: bold; color: #f26722; margin: 0.5em 0 0.5em 0;}

h5 {font-size: 1.4em; font-weight: bold; color: #cccccc; margin: 0.5em 0 0.5em 0; text-transform: uppercase;}

h6 {font-size: 1.2em; font-weight: bold; color: #666666; margin: 0.5em 0 0.3em 0; text-transform: uppercase;}

/*-----------------------------------------------------------------------------
	DEFAULT LISTS
-----------------------------------------------------------------------------*/

ul {margin: 0 0 1em 1.5em;}
	ul li {margin: 0 0 0.3em 0;}
	ul.spaced li {margin: 0 0 1em 0;}
	
ol {margin: 0.5em 0 1em 3em;}
	ol li {margin: 0 0 0.2em 0;}
	ol.spaced li {margin: 0 0 1em 0;}

/*
----------------------------------------------------------------------------- 
Forms
-----------------------------------------------------------------------------*/

form {font-size: 1em;}

fieldset {margin: 2em 0 0 0; border: none; padding: 0;}
label {padding: 0 5px 0 0;}

input, textarea, select {font: 1em Lucida Grande, Lucida Sans Unicode, Arial, Helvetica, sans-serif; color: #333333; background: #fafafa; margin: 0 0 3px 0; padding: 1px 2px 1px 2px; border: 1px solid #d0d0d0;}
	input:hover, textarea:hover, select:hover, input:focus, textarea:focus, select:focus {background: #ffffff; border: 1px solid #f26722;}
	textarea {overflow: auto; height: 100px;}
	select {padding: 0;}

	input.btn {float: none; border: 1px solid #666666; color: #ffffff; background: #333333; margin: 10px 3px 10px 0; cursor: pointer; text-transform: uppercase; font-weight: bold; width: auto !important; padding: 2px 5px 2px 5px;}
		input.btn:hover {background: #666666; color: #f26722;}
	
optgroup {font-style: normal;}
	optgroup option {padding: 0 0 0 10px;}

input[type="radio"], input[type="checkbox"], input.checkbox {width: auto !important; margin: 2px 2px 0 0}
input[type="hidden"] {display: none;}
select[multiple="multiple"] {margin-left: 0;}

form br {clear: both; line-height: 0; height: 0;}

form .required {border: 1px solid #ffffff;}
.error-message {font-weight: bold; color: #f26722;}

form.custom1 {font-size: 0.9em;}
	form.custom1 input, form.custom1 textarea, form.custom1 select {width: 200px; float: left;}
		form.custom1 select {width: 208px;}
		form.custom1 input.file {border: none; width: 100%;}
	form.custom1 label {float: left; text-align: right; width: 200px;}

/*-----------------------------------------------------------------------------
	LAYOUT
-----------------------------------------------------------------------------*/

#container {position: relative; width: 970px; margin: 0 auto; text-align: left; background: transparent url(../images/bg-container.gif) center center repeat-y; min-height: 100%;}

	* html #container {height: 100%;}

	#container .container{padding: 0 10px;}

#header {position: relative; width: 100%; height: 110px; overflow: hidden; background: transparent url(../images/bg-header.jpg) 0 0 no-repeat;}

#logo {position: absolute; top: 35px; left: 25px; display: block; background: transparent url(../images/logo-lamworks.png) 0 0 no-repeat;}
	#logo a {display: block; width: 205px; height: 50px;}
		#logo a span {display: none;}

	* html #logo {background: transparent url(../images/logo-lamworks.gif) 0 0 no-repeat;}

#brandline {position: absolute; top: 57px; right: 25px; background: transparent url(../images/brandline.png) 0 0 no-repeat; width: 234px; height: 14px;}
		#brandline span {display: none;}
		
		* html #brandline {background: transparent url(../images/brandline.gif) 0 0 no-repeat;}

#middle {float: left; width: 100%; background: #202020 url(../images/bg-mid-1.jpg) 0 0 no-repeat; overflow: hidden;}

#main {float: left; background: transparent url(../images/bg-main.png) 0 0 no-repeat; margin: 50px 0 0 0; width: 100%; min-height: 550px;}

	* html #main {background: transparent url(../images/bg-main.gif) 0 0 no-repeat; height: 550px;}
	
	#main .container {padding: 55px 55px 0 55px;}

#featured-work {position: relative; width: 840px; height: 200px; overflow: hidden;}

#works {position: absolute; width: 840px; height: 200px; overflow: hidden;}

	#works li {list-style: none; margin: 0 60px 20px 0;}
		
	#works img {width: 230px; height: 150px;}
	#works img.bordered {margin: 0 0 10px 0;}

	#works a {color: #666666;}
		#works a:hover {color: #ffffff;}

.prev {float: left; width: 24px; height: 24px; background: transparent url(../images/icon-prev.gif) 0 0 no-repeat; cursor: pointer;}
	
.next {float: right; width: 24px; height: 24px; background: transparent url(../images/icon-next.gif) 0 0 no-repeat; cursor: pointer;}

	.prev:hover, .next:hover {background-position: 0 -24px;}
	
#content {float: left; width: 100%; padding: 10px 0 5px 0; margin: 30px 0 10px 0;}
	#content .column {float: left; width: 240px; font-size: 1.1em;}
	#content .column1 {padding: 0 40px 20px 0;}
	#content .column2 {padding: 0 20px 20px 20px;}
	#content .column3 {padding: 0 0 20px 40px;}
	
	#content h1 {font-size: 2em;}
	
	ul#services {margin: 1.5em 0 1em 0;}
		#services li {list-style: none; padding: 0 0 5px 20px; background: transparent url(../images/icon-checkmark3.gif) 0 0 no-repeat;}
	
	#content .contact-details {margin: 1.5em 0 1em 0; color: #ffffff;}
	
		#content .contact-details li {margin: 0 0 1em 0;}

		#content .contact-details li.address {background: transparent url(../images/icon-pencil.gif) 2px 0 no-repeat; padding: 0 0 2px 24px;}
		
		#content .contact-details li.phone {background: transparent url(../images/icon-phone.gif) 0 0 no-repeat; padding: 2px 0 2px 24px;}
			
		#content .contact-details li.email {background: transparent url(../images/icon-envelope.gif) 1px 0 no-repeat; padding: 0 0 0 24px;}

#footer {float: left; color: #ffffff; background: #0099cc url(../images/bg-footer.jpg) 0 0 no-repeat;  width: 100%; min-height: 130px;}

	* html #footer {height: 130px;}

	#footer a {color: #ffffff;}
		#footer a:hover {color: #202020;}
	#footer .contentleft {float: left; padding: 15px 5px 0 55px;}
	#footer .contentright {float: right; padding: 15px 55px 0 5px;}