/*
------------------------------------------------------------------------------------------------
	EMBER INTERACTIVE CSS - styles.css											  
------------------------------------------------------------------------------------------------
	Created: 	20-05-2008															
	Author: 	Ember Interactive (www.emberinteractive.co.uk)						
	Website: 	Ember Interactive Limited													
------------------------------------------------------------------------------------------------
*/

/* --- Colours 
														
Intro Blue BG - #0D1016
Content Blue BG - #0D1218
Image Blue Border / Services BG -#101F2E
Footer Light Blue - #E6ECF1
Light Blue Rollover / footer margin - #336699
Red RollOver - #AE0509

*/

/*
------------------------------------------------------------------------------------ CSS RESET
															
------------------------------------------------------------------------------------------------
*/

body,div,img,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;}
address,caption,cite,code,dfn,th,var {font-style:normal;font-weight:normal;}
ol,ul {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;}

/*
------------------------------------------------------------------------------------ HTML / BODY
															
------------------------------------------------------------------------------------------------
*/

html {min-height: 100%; height: auto; font-size: 50%;}
body {background: #0D1016 url('../../images/bg_header.gif') repeat-x; font-family: "Lucida Grande","Lucida Sans Unicode", Arial, Verdana, sans-serif; font-size: 125%; margin: 0; padding: 0;}

/*
------------------------------------------------------------------------------------------- TEXT
															
------------------------------------------------------------------------------------------------
*/

h1,h2,h3,h4 {font-family: "lucida grande", arial, verdana, sans-serif; letter-spacing: -1px;}

h1 {position: absolute; left: -2000px;}
h2 {margin: 0; padding: 0 0 20px 0; color: #fff; font-size: 2.4em; font-weight: normal; line-height: 1.25em; width: 425px; float: left;}
h2 span { margin: 0; padding: 0; color: #999; font-size: 0.8em; line-height: 1.25em;}
h3 {margin: 0; padding: 30px 0 5px 0; clear:both; color: #fff; font-size: 2em; font-weight: normal; line-height: 1.25em;  border-bottom: #336699 solid 1px;}
h4 {margin: 0; padding: 10px 0 10px 0; color: #fff; font-size: 1.4em; font-weight: bold;}

p {margin: 10px 0 10px 0; padding: 0; font-size: 1.1em; line-height: 16px; color: #ccc; font-weight: normal; position:relative;}

#intro_content {width: 425px; float:left;}

#intro p {float: left; margin: 0; padding: 0 0 20px 0; font-size: 1.3em; line-height: 1.5em;}
#intro p span {font-weight: bold; color: #fff;}

#footer h2 {margin: 0; padding: 20px 0 0 0; color: #BF050A; width:100%;}

#testimonials h3 {margin: 0; padding: 0 0 5px 0;}

a {color:#3C78B4; margin: 0; padding: 0; outline:none; text-decoration: none;}
a:link, a:visited {color:#3C78B4;}
a:hover {color:#BF050A ;}

a.skip {display:block; position:absolute; z-index:0; top:-4em;}

ul.inline_ul { color:#ccc; float:left; padding: 0 0 20px 20px; font-size: 1.3em; line-height: 1.5em; list-style-type:disc;}


/* ------------------  Block Links ---- */ 

.block_link:link, .block_link:visited { /* TL corner, T edge */color:#fff; float:left; background: #336699 url('../../images/bg_btn_main_cont.gif') no-repeat; text-decoration:none; font-weight:normal; font-size:1.1em; padding:4px 10px 4px 8px;}

.block_link * {display:block;}
.block_link span { /* TR corner */padding:4px 0 0 0; margin:0; background:url('../../images/bg_btn_corner_cont.gif') no-repeat right 0;}
.block_link span span { /* BL corner, L and B edges */ padding:0 0 0 4px; background:url('../../images/bg_btn_main_cont.gif') no-repeat left bottom;}
.block_link span span span { /* BR corner */padding:0 0 4px 0; background:url('../../images/bg_btn_corner_cont.gif') no-repeat right bottom;}
.block_link span span span span { /* R edge */padding:0 10px 0 4px ; background:url('../../images/bg_btn_main_cont.gif') no-repeat right center;}

.block_link:hover, .block_link:hover span span, .block_link:hover span span span span {background-image:url('../../images/bg_btn_main_cont_over.gif'); background-color:#AE0509;}
.block_link:hover span, .block_link:hover span span span {background-image:url('../../images/bg_btn_corner_cont_over.gif');}

a.call_quote:link, a.call_quote:visited {margin: 0; text-decoration:none; float: left;}
a.call_portfolio_link:link, a.call_portfolio_link:visited {margin: 10px 0 0 0; text-decoration:none; float: left;}
a.call_portfolio:link, a.call_portfolio:visited {margin: 10px 0 0 0; text-decoration:none; float:right; }
a.call_view:link, a.call_view:visited {margin: 10px 0 0 0; font-size: 1.1em; text-decoration:none; float: left;}
a.call_google:link, a.call_google:visited {margin: 10px 0 0 0; font-size: 1em; text-decoration:none; float: left;}
a.submit_form:link, a.submit_form:visited {margin: 0 10px 0 0; text-decoration:none; float:right; font-size:1em; line-height:1.1em; }

/*
-------------------------------------------------------------------------------------- STRUCTURE
															
------------------------------------------------------------------------------------------------
*/

#header_contain {margin: 0; padding: 0; height: 105px; text-align:center;}
#header {margin: 0 auto; padding: 0; width: 800px; overflow:hidden; text-align:left;}

#intro_contain {margin: 0; padding: 0 10px; background: #0D1016; text-align:center;}
#intro {margin: 0 auto; padding: 20px 0 20px 0; width: 780px; overflow:auto; text-align:left;}


#content_contain {margin: 0; padding: 0 10px 20px 10px; background: #0D1218 url('../../images/bg_main.gif') repeat-x top; text-align:center;}
#content {margin: 0 auto; padding: 0; width: 780px; text-align:left; overflow:auto;}

#footer_contain {margin: 0; padding: 0 10px; background:#E6ECF1 url('../../images/bg_footer.gif') 0 0 repeat-x;  text-align:center;}
#footer {margin: 0 auto; padding: 0 0 10px 0; width: 780px; overflow:auto; text-align:left;}

img.logo {margin: 0 0 0 8px; padding: 0; display:inline; float:left;}

#telephone {margin: 12px 10px 5px 0; padding: 0; width: 580px; height: 40px; background: url('../../images/bg_telephone.gif') no-repeat right; float: right; text-indent: -2000px; display: block;}

#navigation {margin: 0; padding: 0; width: 580px; height: 40px; float: right;}

#services {margin: 0; padding: 0; width: 260px; float: right; background: #101F2E url('../../images/bg_services_bot.gif') no-repeat bottom left; overflow:hidden;}
#services p {margin: 0; padding: 8px 0 0 0; text-indent:10px; color: #fff; width: 260px; background: #101F2F url('../../images/bg_services_top.gif') no-repeat 0 0;}
#services ul {clear:both; margin: 0 0 10px 8px; padding: 8px 0 0 5px; list-style-type: none;}
#services li {font-size: 1.1em; line-height: 2em; color: #fff; padding: 0 0 0 20px; margin: 0; background: url('../../images/bullet_arrow_light.gif') left no-repeat;}

/*
------------------------------------------------------------------------------------- NAVIGATION
															
------------------------------------------------------------------------------------------------
*/

#navigation ul {margin: 0; padding: 0; float: right; list-style-type: none; background:url('../../images/bg_btn_main_cont_over.gif') 0 -1000px no-repeat}
#navigation li {display: inline; white-space: nowrap; font-size: 1.3em; padding: 0; margin: 0; background:url('../../images/bg_btn_corner_cont_over.gif') 0 -1000px no-repeat}
#navigation li a {color: #fff; font-weight: normal; text-decoration: none; margin: 0 4px 0 6px; padding: 4px 8px 4px 8px; display: block; float: left;}
#navigation li a:hover {color: #336699;}

#navigation li a.active:link, #navigation li a.active:visited {color:#fff; float:left; background: #336699 url('../../images/bg_btn_main_cont.gif') no-repeat; text-decoration:none; font-weight:normal; padding:4px 8px;}

#navigation li a.active * {display:block;}
#navigation li a.active span {padding:4px 0 0 0; margin:0; background:url('../../images/bg_btn_corner_cont.gif') no-repeat right 0;}
#navigation li a.active span span {padding:0 0 0 4px; background:url('../../images/bg_btn_main_cont.gif') no-repeat left bottom;}
#navigation li a.active span span span {padding:0 0 4px 0; background:url('../../images/bg_btn_corner_cont.gif') no-repeat right bottom;}
#navigation li a.active span span span span {padding:0 8px 0 4px ; background:url('../../images/bg_btn_main_cont.gif') no-repeat right center;}

/*
----------------------------------------------------------------------------------------- FOOTER
															
------------------------------------------------------------------------------------------------
*/

.footer_column {margin: 0 30px 10px 0; padding: 10px 0 0 0; width: 240px; float: left; display: block;}
.footer_column p {margin: 0; padding: 0 0 10px 0; color: #080F17;}
.footer_column a {margin: 0; padding: 0; color: #336699; text-decoration: none;}
.footer_column a:hover {text-decoration: underline;}

#base_navi {margin: 0 auto; clear:both; padding: 0 0 10px 0; width: 100%; border-top: 1px solid #999;}
#base_navi p.copyright {margin: 0; padding: 10px 0 10px 0; color: #999; display: block; float: left; width: 200px;}

#base_navi ul {margin: 10px 0 0 0; padding: 0 0 0 10px; list-style: none; float: right; display: block;}
#base_navi li {margin: 0; padding: 0 5px 0 0; float: left; font-weight: normal; color: #999;}
#base_navi a {font-size: 1.1em; text-decoration: none; color: #999;}
#base_navi a:hover {text-decoration: none; color: #080F17;}

/*
------------------------------------------------------------------------------------------- HOME
															
------------------------------------------------------------------------------------------------
*/

.home_feature {margin: 0 30px 0 0; padding: 0; width: 240px; float: left;}
.home_feature ul {margin: 10px 0 5px 0; padding: 0 0 0 5px; list-style-type: none;}
.home_feature li {font-size: 1.15em; line-height: 1.5em; color: #fff; padding: 0 0 0 20px; margin: 0; background: url(../../images/bullet_arrow.gif) top left no-repeat;}
.home_feature img {margin: 10px 0 0 0; padding: 0; border: solid #101E2D 4px;}
.home_feature p {padding: 0 20px 0 0;}

.hf_last {margin-right:0;}

#news_container {width: 240px; overflow:hidden; float:right; margin-bottom:14px; }
#news {margin: 0; padding: 0 0 0 0; width: 240px; height:20em; overflow:hidden; float:left; position:relative; }
#news div.news_block {margin: 0; padding: 0; height:21em; clear:both; overflow:hidden; position:relative; }
#news div.news_item {width:240px; overflow:hidden; background: #101F2F url(../../images/bg_news_top.gif) 0 0 no-repeat; float:left; position:relative; margin: 0 0 6px 0;}
#news div.news_item p {font-size:1.1em; padding:4px 0 16px 0; background: url(../../images/bg_news_bot.gif) bottom left no-repeat;width:240px; position:relative;  line-height:1.3em;}
#news div.news_item p span {width:180px; padding: 0 0 0 50px; float:left; font-weight:normal; }
#news div.news_item p.news_date {padding:0; float:left; width:48px; height:44px; clear:both; position:absolute;  top:4px; left:6px; background:none; font-weight:bold; overflow:hidden;}
#news div.news_item p.news_date span{padding:0 0.1em; display:inline; float:none;}

#news_container a.news_more, #news_container a.news_back {display:block; width:14px; height:14px; float:right; text-indent:-2000px;}
#news_container a.news_more {background:url(../../images/bg_news_control_more.gif) 0 0 no-repeat;}
#news_container a.news_back {background:url(../../images/bg_news_control_back.gif) 0 0 no-repeat;}
#news_container a.news_more:hover, #news_container a.news_back:hover {background-position:0 -50px;} 
#news_container a.disabled {background-position:0 -100px;} 
#news_container a.disabled:hover {background-position:0 -100px;} 

.twitter {padding-left: 17px; padding-top: 1px; background:url(../../images/twitter.gif) left no-repeat;}

/*
-------------------------------------------------------------------------------------- PORTFOLIO
															
------------------------------------------------------------------------------------------------
*/

.portfolio_item {margin: 0; padding: 0; clear:both; overflow:auto;}
.portfolio_info {float: left; width: 375px; display: block; padding: 0 20px 0 0;}

.agency {float: left; width: 230px;}
.agency span {color: #fff; font-weight: bold;}

.portfolio_viewer {float:left;}

.portfolio_slides, .portfolio_movie {width: 375px; height: 210px; border: 4px solid #101F2E; margin: 60px 0 0 0; overflow:hidden; position: relative; }
.portfolio_slides ul {margin: 0; padding: 0; position: relative; left: 0; top: 0; width: 1%; list-style-type: none; }
.portfolio_slides ul li {float:left; width:375px; height:210px; background: url('../../images/ember_image_loader.gif') no-repeat 179px 97px;} 

.slideNav {overflow: auto; width: 385px;} 
.slideNav ul {margin: 0 1px 0 0; padding: 0; float:right; position: relative; list-style-type: none; } 
.slideNav ul li {width: 18px; float:left; margin: 0 1px 1px 1px; }
 
.slideNav a {text-align: center; line-height: 18px; background: #101F2F; color: #fff; text-decoration: none; display: block; } 
.slideNav a.current{ background: #336699; color: #fff; } 
.slideNav a:hover{ background: #BF050A; color: #fff;} 

.open_video_player {width:375px; height:210px; background:url('../../images/bg_movie_overlay.png') no-repeat left bottom; display:block; position:absolute; top:0; left:0; text-indent:-2000px;}

.slide_hover {cursor: pointer;}

#IE6root .open_video_player {background:url('../../images/bg_movie_overlay.gif') no-repeat left bottom;}

.pagination {margin: 30px 0 0 0; padding: 15px 0 0 0; border-top: 1px solid #111e2f;}

/*
---------------------------------------------------------------------------------------- CONTACT
															
------------------------------------------------------------------------------------------------
*/

#testimonials {margin: 0; padding: 0; width: 300px; float: right; overflow:hidden; }
#testimonials div.testimonial_quote {margin: 20px 0 0 0; padding: 10px 0 10px 0; background: #101F2F url('../../images/bg_testimonial_top.gif') no-repeat 0 0; display:inline; float:left; overflow: auto; width:100%;}
#testimonials div.testimonial_quote p {margin: 0; padding: 0 45px 0 45px;background: url('../../images/bg_quote.gif') 10px -10px no-repeat;  display: inline; float:left; font-size: 1.1em; line-height: 1.4em; color: #fff; width:auto;}
#testimonials p.testimonial_name {margin: 0; padding: 10px 0 0 0; text-indent:45px; height:2em; background: url('../../images/bg_testimonial_bot.gif') no-repeat 0 0;  font-size: 1em; width:100%; float:left;}

.contact_column_left {float: left; width: 375px; display: block; margin: 0; padding: 32px 0 0 0;}
.contact_column_right {float: left; width: 385px; display: block; padding: 0 0 0 20px;}

.contact_tel {margin: 0; padding: 0; width:375px; overflow:auto; }
.contact_tel h3 {margin: 0; padding: 0 0 5px 0; width: 105px; float: left;}
.contact_tel p {margin: 0; padding: 0 0 10px 20px; float: left; display: block; font-size: 1.7em; font-weight: normal; line-height: 1.25em; color: #fff;}
.contact_tel a.email {font-size: 0.75em; text-decoration: none;}
.contact_tel a:hover.email {text-decoration: underline;}

#map {margin: 20px 0 0 0; padding: 0; border: 4px solid #101F2E; height: 200px;}

fieldset {margin: 0; padding: 0; border: 0;}
label {float: left; width: 134px; margin: 0 0 4px 0; font-size: 1.1em; line-height:2em;}
label span {font-size:.9em;}
fieldset em  {font-size:1.2em; color:#336699; font-family:Arial, Helvetica, sans-serif;}
input {font-family: "Lucida Grande", Helvetica, arial, verdana, sans-serif; font-size: 1.1em; line-height: 1.3em; border: 4px solid #101F2E; margin: 0; padding: 2px; color: #222; width: 60%;}
textarea {font-family: "Lucida Grande", Helvetica, arial, verdana, sans-serif; font-size: 1.1em; line-height: 1.3em; color: #222; border: 4px solid #101F2E; margin: 0; padding: 2px; overflow: auto; width: 60%;}
input.submit {margin: 10px 10px 0 0; padding: 3px 2px; color: #fff; font-weight: normal; background: #336699; text-decoration: none; float: right; border: none; width: 8em; line-height: 1.4em; font-size: 1em;}
input.submit:hover {background: #BF050A;}
.form_error {font-size:1em; color:#AE0509; display:none;}

/*
---------------------------------------------------------------------------- MOVIE OVERLAY STUFF
															
------------------------------------------------------------------------------------------------
*/

#jquery-overlay {position: absolute; top: 0; left: 0 ;z-index: 90; width: 100%; background-color:#040406;}
#jquery-lightbox {position: absolute; top: 0;left: 0; width: 100%; z-index: 100;text-align: center;line-height: 0; }
#lightbox-container {position: relative; background-color: #101f2e; width: 0; height: 323px; margin: 0 auto; text-align:left; }

#lightbox-container-content {width:492px; height:322px; display:none;}

#lightbox-container-content h2 {font-size:1.4em; font-weight:normal; line-height:25px; padding: 0 0 0 6px; margin:0; letter-spacing: 0; width:450px; float:left; }
#lightbox-container-content a {width:25px; height:25px; overflow:hidden; float:right; background:url('../../images/bg_btn_video_close.gif') no-repeat 0 0;}
#lightbox-container-content a:hover {width:25px; height:25px; overflow:hidden; float:right; background:url('../../images/bg_btn_video_close.gif') no-repeat 0 -50px;}

#lightbox-flash {width: 486px; height:298px; margin:0; padding-left:6px; clear:both;}

/*#qt_window, #qt_window_emb{margin-left:6px;}*/

/*
------------------------------------------------------------------------------------------- ABOUT
															
------------------------------------------------------------------------------------------------
*/

#about_pics {float: right;}
#about_pics img {border: 4px solid #101F2E;}

/*
---------------------------------------------------------------------------------------- SITEMAP
															
------------------------------------------------------------------------------------------------
*/

ul.sitemap li {line-height: 2em; font-size: 1.25em; margin-left: 5px;}

ul.sitemap ul li {line-height: 1.5em; font-size: 0.9em; margin-left: 15px;}

/*
---------------------------------------------------------------------------------- ACCESSIBILITY
															
------------------------------------------------------------------------------------------------
*/

#access_container {width: 220px; overflow:hidden; float:right; margin-top:50px; font-size:.9em;}
#access_container p span {color:#fff;}

/*
---------------------------------------------------------------------- PORTFOLIO BANNER AD VIEWER
															
------------------------------------------------------------------------------------------------
*/

#banner_viewer {width:730px; margin:0; clear:both;}
#banner_viewer dt, #banner_viewer dd {width:730px; clear:both;}
#banner_viewer dd {display:none;}
#banner_viewer p {padding-bottom: 6px; font-size:1.2em;}
#banner_viewer dd p {font-size:1.1em; padding-top:6px;}
div.banner_flash_content {background-color:#0f141e;}
div.banner_flash_area {clear:both; width:100%; height:100%;}

/*
------------------------------------------------------------------------------------------- BLOG
															
------------------------------------------------------------------------------------------------
*/

.blog_content {float: left; width: 500px; display: block;}
.blog_navigation {float: right; width: 250px; display: block; text-align: right;}

div.blog_content h3 {font-size: 1.6em; margin: 0 0 15px 0; padding-top: 0;}
div.blog_content p {font-size: 1.1em!important; line-height: 1.25em; font-weight: normal;}
p.posted {padding: 0 0 30px 0!important;}

div.blog_navigation a {color: #fff; padding: 5px; margin: 0 0 1px 0; background: #3C78B4;}
div.blog_navigation a:hover {background: #BF050A;}

/*
------------------------------------------------------------------------------------------ MISC.
														
------------------------------------------------------------------------------------------------
*/

br.clear {clear: both; overflow: hidden; height: 0; line-height: 0;}
.dotted_line {margin: 15px 0 15px 0; padding: 0; border-top: 1px dotted #ccc;}