@charset "utf-8";
/*
Theme Name: Justin_theme
Theme URI: http://www.ethicaldesign.com.au
Description: Theme for Justin Barker.tv
Version: 1.0
Author: Ethical Design
Author URI: http://www.ethicaldesign.com.au
Tags: fixed-width 
*/

body {
	margin:0;
	padding:0;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFF;
	background:#1d160f;
}

a:active, a:focus { outline: 0 }

a {text-decoration:none;}

#body_container {
	position:relative;
}

#header_container {
	position:relative;
	background:#8f230f;
}

#header {
	position:relative;
	width:1000px;
	margin:0 auto;
}

#page_container {
	position:relative;
	background:#331d0c url(images/global/bg_body.jpg);
}

#page {
	position:relative;
	width:1000px;
	margin:0 auto;
	background:url(images/global/bg_page.jpg) bottom center repeat;
}

#logo {
	position:absolute;
	width:182px; height:185px;
	left:26px; top:-37px;
	background:url(images/global/logo.png);
	text-indent:-5000em;
	z-index:100;
}

#page_maingraphic {
	position:relative;
	width:1000px; height:245px;
	background:url(images/global/page_maingraphic.jpg) no-repeat;
	margin-top:20px;
	float:none; clear:both;
}

#preloader {
	position:absolute;
	width:1px; height:1px;
	overflow:none;
	left:-9999px;
}

.clear { float:none; clear:both; width:1px; height:1px; }

/* nav ------------------------ */

#nav {
	position:absolute;
	width:180px; /*height:185px;*/
	left:40px; top:155px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:25px;
	font-weight:bold;
	letter-spacing:-0.47pt;
	text-transform:uppercase;
	overflow:hidden;
	margin:0px; padding:0px;
	z-index:100;
}

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

#nav li {
	list-style: none; list-style-type: none; 
	margin:0; padding:0;
	margin-bottom:5px;
	height:33px;
}

#nav a {
	position:relative;
	display: block;
	text-indent:-5000em;
	text-decoration: none;
	color: #f2e5c6;
	margin:0; padding:0;
	}

#nav a:hover {
	text-decoration: none;
	color:#8f230f;
	background-position:0px -33px;
	}

#nav #current {
	position:relative;
	text-decoration: none;
	color:#8f230f;
	background-position:0px -33px;
	}

#nav .nav_home { background:url(images/global/nav_home.png) no-repeat; width:83px; }
#nav .nav_showreel { background:url(images/global/nav_showreel.png) no-repeat; width:147px; }
#nav .nav_services { background:url(images/global/nav_services.png) no-repeat; width:128px;}
#nav .nav_about { background:url(images/global/nav_about.png) no-repeat; width:179px;}
#nav .nav_latest { background:url(images/global/nav_latest.png) no-repeat; width:167px; }

#nav .nav_services_sub {
	position:relative;
	width:180px; height:35px;
	font-size:16px;
	margin:0;
}

#nav .nav_services_sub_item {
	position:absolute;
	right:0;
	padding:4px 7px 4px 7px;
	background:url(images/global/bg_content_transparent.png);
	text-indent:0;
	color: #d3c29a;
	letter-spacing:0;
}

#nav .nav_services_sub_item a {
	text-decoration: none;
	color: #d3c29a;
}
#nav .nav_services_sub_item a:hover {
	text-decoration: none;
	color: #8f230f;
}

#nav .nav_services_sub_spacer {
	height:8px;
}

/* footer ------------------------ */

#footer_container {
	position:relative;
	background:#1d160f;
}

#footer {
	position:relative;
	width:1000px; height:190px;
	margin:0 auto;
}

#footer .bright { color:#f2e5c6; }
#footer .light { color:#d6c395; }
#footer .medium {color:#b5a179; }
#footer .dark { color:#8c7f61; }
#footer .accent { color:#8f230f; }
#footer .title { font-size:12px; text-transform:uppercase; letter-spacing:-0.47pt; margin-right:6px; }
#footer .line { width:100%; height:1px; background:#523d26; margin:14px 0 14px 0; }
#footer .small {font-size:11px; }

#footer_logo {
	position:relative;
	width:26px; height:154px;
	margin:18px 0 0 20px;
	float:left;
	background:url(images/footer/footer_logo.gif) no-repeat top left;
	font-family:Arial, Helvetica, sans-serif;
	text-indent:-5000em;
}

#footer_bracketL {
	position:relative;
	width:41px; height:153px;
	margin:19px 0 0 10px;
	float:left;
	background:url(images/footer/footer_bracketL.png);
}

#footer_left_box {
	position:relative;
	width:240px; height:145px;
	margin:24px 0 0 13px;
	float:left;
	overflow:hidden;
}

/*need a separate div inside the contact_box so the line will only be as big as the longest text*/
#footer_contact {
	position:absolute;
	top:0; left:0;
	font-size:13px;
	color:#d6c395;
}

#footer_contact p { margin:0; margin-bottom:10px; }
#footer_contact a { color:#b5a179; }
#footer_contact a:hover { color:#8f230f; }

#footer_middle_box {
	position:relative;
	width:275px; height:138px;
	margin:26px 0 0 0px;
	float:left;
}

#footer_bubble {
	position:relative;
	width:275px; height:126px;
	margin:12px 0 0 0;
	overflow:hidden;
}

#footer_bubble_content {
	position:absolute;
	top:0; left:0;
	width:237px; /* 275px */
	height:83px; /* 126px */
	padding:33px 20px 0px 18px;
	margin:0;
	overflow:hidden;
	font-size:17px; line-height:20px;
	font-family:"Times New Roman", Times, serif;
	color:#ddd1b4;
	-moz-user-select: none; /* disable text hilight in ff */
}

#footer_bubble_content li:hover { cursor:pointer; }

/* Not necessary for carousellite to work, but stops padding if javascript or jquery don't load: */
#footer_bubble_content ul, #footer_bubble_content li { list-style:none; list-style-type:none; margin:0; padding:0; }

#footer_bubble_overlay {
	position:absolute;
	top:0; left:0;
	width:275px; height:126px;
	background:url(images/footer/footer_bubble.png);
}

#footer_icons_box {
	position:absolute;
	top:0px; left:31px;
	width:275px; height:24px;
}

#footer_icons a {
	position:relative;
	display: block;
	float:left;
	text-indent:-5000em;
	margin:0; padding:0;
	height:24px;
}

#footer_icons a:hover {
	text-decoration: none;
	background-position:0px -24px;
}

#footer_icons .youtube {	background:url(images/footer/footer_icons_youtube.png); margin:0; width:25px; z-index:20;}
#footer_icons .vimeo { background:url(images/footer/footer_icons_vimeo.png); margin:0 0 0 4px; width:25px; z-index:20;}
#footer_icons .twitter { background:url(images/footer/footer_icons_twitter.png); margin:0 0 0 5px; width:25px; z-index:20;}
#footer_icons .share { background:url(images/footer/footer_icons_share.png); margin:0 0 0 5px; width:57px; }

#footer_share_window {
	position:absolute;
	width:153px; height:68px; /* actual height:49px but make it bigger for hover state to cover share button- height:68px;*/
	left:42px; top:-44px;
	background:url(images/footer/footer_icons_share_window.png) no-repeat 0 0;
	z-index:10;
	display:none;
}


#footer_right_box {
	position:relative;
	width:306px; height:180px;
	margin:10px 0 0 13px;
	float:left;
}

#footer_clients_box {
	position:relative;
	width:288px; height:90px;
	margin:10px 0 0 13px;
	padding:0;
	-moz-user-select: none; /* disable text hilight in ff */
}

#footer_clients_box li:hover { cursor:pointer; }

/* Not necessary for carousellite to work, but stops padding if javascript or jquery don't load: */
#footer_clients_box ul, #footer_clients_box li { list-style:none; list-style-type:none; margin:0; padding:0; }

#footer_clients_title {
	position:absolute;
	width:60px; height:30px;
	left:0px; top:20px;
}

#footer_clients_logo {
	position:absolute;
	width:100px; height:90px;
	left:63px; top:-7px;
	text-align:center;
	overflow:hidden;
}

#footer_clients_info {
	position:absolute;
	width:125px; height:60px;
	left:173px; top:20px;
	font-size:13px;
}

#footer_clients_info p { margin:0; margin-bottom:3px; }

#footer_earth {
	position:absolute;
	left:0; top:89px;
	width:306px; height:91px;
}

#footer_earth a {
	width:306px; height:91px;
	display: block;
	background:url(images/footer/footer_earth.png);
	text-indent:-5000em;
}

#footer_earth a:hover {
	text-decoration: none;
	background-position:0px -91px;
}

#footer_bracketR {
	position:relative;
	width:41px; height:153px;
	margin:19px 0 0 0;
	float:left;
	background:url(images/footer/footer_bracketR.png);
}

/* whois ------------------------ */

#whois {
	position:relative;
	width:967px;height:29px;
	padding:14px 33px 0 0;
	color:#1e0c08;
	font-size:14px;
	font-weight:bold;
	text-align:right;
}

#whois a { color:#f2e5c6; text-decoration:none; border-bottom:solid 1px #b66354; }
#whois a:hover { color:#1e0c08; text-decoration:none; border-bottom:solid 1px #1e0c08; }

#whois_content_box {
	position:relative;
	width:1000px; height:440px;
	display:none;
}

#whois_content_pic {
	position:absolute;
	left:30px; top:20px;
	width:350px; height:350px;
	overflow:hidden;
	text-align:right;
}

#whois_content {
	position:absolute;
	left:430px; top:18px;
	width:535px; height:420px;
	overflow:hidden;
	font-size:13px; color:#d3c29a; font-weight:bold;
}

#whois_content p, #whois_content h1, #whois_content h2, #whois_content h3 { margin:0 0 12px 0; }
#whois_content h1 { font-size:15px; color:#e5d7c0; }
#whois_content h2, #whois_content h3 { font-size:13px; color:#d3c29a; }
#whois_content a { color:#f2e5c6; }
#whois_content a:hover { color:#1e0c08; }

#whois_content .credits { width:100%; margin:20px 0 0 0; }
#whois_content .credits_close { color:#f2e5c6; float:left; }
#whois_content .credits_black { color:#1e0c08; float:right; font-weight:normal; font-family:Arial, Helvetica, sans-serif; font-size:11px;}
#whois_content .credits_black a { color:#1e0c08; font-weight:bold; border-bottom:solid 1px #631a0c; }
#whois_content .credits_black a:hover { color:#d3c29a; border-bottom:solid 1px #a74a39; }
#whois_content .credits_white { color:#f2e5c6; float:right; font-weight:normal; font-family:Arial, Helvetica, sans-serif; font-size:11px;}
#whois_content .credits_white a { color:#f2e5c6; font-weight:bold; border-bottom:solid 1px #a74a39; }
#whois_content .credits_white a:hover { color:#1e0c08; border-bottom:solid 1px #631a0c; }

/* styling ------------------------ */

.content { font-size:12px; color:#d3c29a; }
.content p, .content h1, .content h2, .content h3 { margin:0 0 12px 0; }
.content h1 { font-size:18px; color:#e5d7c0; }
.content h2 { font-size:15px; color:#e5d7c0; }
.content h3 { font-size:13px; color:#e5d7c0; }
.content a { color:#f2e5c6; }
.content a:hover { color:#1e0c08; }

/* Home ------------------------ */

#home {
	position:relative;
	width:590px;
	margin:0 0 0 260px;
	padding-top:27px;
	padding-bottom:20px;
}

#home_video {
	position:relative;
	width:569px; height:320px;
	padding:12px 11px 13px 11px;
	background:url(images/global/bg_border_video_transparent.png);
}

/* Showreel ------------------------ */

#showreel {
	position:relative;
	width:603px; /*592px + 11px so right margin on the third preview box in each row will fit inside */
	margin:0 0 0 260px;
	padding-top:27px;
	padding-bottom:20px;
	background:url(images/global/bg_foliage_top+bot.png) no-repeat 6px 192px ; /* 165px :remember to add the top padding to y-pos */
}

#showreel_video {
	position:relative;
	width:569px; height:320px;
	padding:12px 11px 13px 12px;
	background:#150c05;
}

#showreel h1 {
	width:100%; height:41px;
	margin:0;
	padding-top:12px;
	font-size:22px;
	color:#f2e5c6;
	font-weight:bold;
	text-transform:uppercase;
	text-align:center;
}

#showreel .preview {
	position:relative;
	float:left;
	width:190px; height:307px;
	margin:0 11px 10px 0;
	background:url(images/global/bg_content_transparent.png);
}

#showreel .preview_thumb {
	position:relative;
	width:170px; height:128px;
	padding:10px 10px 10px 10px;
	margin-bottom:4px;
	background:#150c05;
	overflow:hidden;
}

#showreel .preview_thumb a { position:relative; display:block; overflow:hidden; width: 170px; height: 128px; }
#showreel .preview_thumb a img { position:absolute; display:block; border:none; }
#showreel .preview_thumb a:hover { width:166px; height:124px; border:solid 2px #f2e5c6; }
#showreel .preview_thumb a:hover img { margin:-2px 0 0 -2px; }

#showreel .preview_text {
	position:relative;
	width:168px; height:140px;
	margin:7px 11px 0px 11px;
	font-size:12px; line-height:16px;
	color:#aa9669;
	overflow:hidden;
}

#showreel .preview_text h2 {
	color:#f2e5c6;
	font-size:14px;
	font-weight:bold;
	margin:0 0 6px 0;
}

#showreel .preview_text h2 span {
	font-size:11px;
	font-weight:normal;
	color:#d6c395;
	margin:0;
}

#showreel .preview_text a { color:#f2e5c6; }
#showreel .preview_text a:hover { color:#8f230f; }
	
#showreel .preview_text p {
	margin:0 0 7px 0;
}

/* Single Showreel  ------------------------ */

#showreel_single {
	position:relative;
	width:603px; /*592px + 11px so right margin on the third preview box in each row will fit inside */
	margin:0 0 0 260px;
	padding-top:27px;
	padding-bottom:20px;
}

#showreel_single_foliage {
	position:relative;
	width:592px;
	background:url(images/global/bg_foliage_top.png) no-repeat right bottom;
}

#showreel_single_darken {
	position:relative;
	width:592px;
	background:url(images/global/bg_content_transparent.png);
}

#showreel_single_video {
	position:relative;
	width:569px; height:320px;
	padding:12px 11px 13px 12px;
	background:#150c05;
}

#showreel_single_description {
	position:relative;
	width:526px;
	padding:12px 33px 13px 33px;
}

#showreel_single h2 {
	width:100%;
	margin:0;
	padding:17px 0 18px 33px;
	font-size:16px;
	color:#f2e5c6;
	font-weight:bold;
	text-transform:uppercase;
	text-align:left;
}

#showreel_single .preview {
	position:relative;
	float:left;
	width:190px; height:148px;
	margin:0 11px 10px 0;
	background:url(images/global/bg_content_transparent.png);
}

#showreel_single .preview_thumb {
	position:relative;
	width:170px; height:128px;
	padding:10px 10px 10px 10px;
	background:#150c05;
	overflow:hidden;
}

#showreel_single .preview_thumb a { position:relative; display:block; overflow:hidden; width: 170px; height: 128px; }
#showreel_single .preview_thumb a img { position:absolute; display:block; border:none; }
#showreel_single .preview_thumb a:hover { width:166px; height:124px; border:solid 2px #f2e5c6; }
#showreel_single .preview_thumb a:hover img { margin:-2px 0 0 -2px; }

#showreel_single #current_video a { width:166px; height:124px; border:solid 2px #f2e5c6; }
#showreel_single #current_video img { margin:-2px 0 0 -2px; }

#showreel_single .content h1 span { font-size:14px; color:#d6c395; font-weight:normal; }

/* TIMELINE: About Justin ------------------------ */

#timeline_background { position:relative; width:1000px; height:650px; 
											 background:url(images/global/page_maingraphic.jpg) no-repeat center 388px; }
#timeline_container { position:relative; width:1000px; height:650px; margin:0; overflow:auto; }

#timeline_ruler { position:absolute; left:-9999px; background:#009; padding-top:0; }
#timeline_ruler h2 { margin-top:0; }

#timeline_preview_mask { position:absolute; z-index:998; left:0px; top:0px; width:1000px; height:650px; display:none; }
#timeline_preview_box { position:absolute; z-index:999; background:url(images/global/bg_content_transparent.png); left:100px; top:10px; display:none; }
#timeline_preview { position:relative; background:#1d160f; margin:11px; border:solid 1px #d1bf98; }
#timeline_preview img { border:none; }
#timeline_preview a { border:none; }
#timeline_preview_close { position:absolute; right:11px; bottom:-12px; width:55px; height:24px; }
#timeline_preview_close a { width:55px; height:24px; display:block; background:url(images/global/icon_close.png) no-repeat 0 0; }
#timeline_preview_close a:hover { background:url(images/global/icon_close.png) no-repeat 0 -24px; }

#timeline_present { position:absolute; width:95px; height:30px; left:0; bottom:170px; z-index:800; }
#timeline_present a { width:95px; height:30px; display:block; background:url(images/global/icon_present.png) 0 0 no-repeat; }
#timeline_present a:hover { display:block; background:url(images/global/icon_present.png) 0 -30px no-repeat; }

#timeline_past { position:absolute; width:67px; height:30px; right:0; bottom:170px; z-index:800; }
#timeline_past a { width:95px; height:30px; display:block; background:url(images/global/icon_past.png) 0 0 no-repeat; }
#timeline_past a:hover { display:block; background:url(images/global/icon_past.png) 0 -30px no-repeat; }

.timeline_box {
	position:absolute;
	width:172px;
	bottom:0px;
	padding:12px;
	margin:0;
	border:solid 1px #9c8d6b;
	border-left:none; border-bottom:none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:16px;
	color:#f2e5c6;
	-moz-user-select: none; /* disable text hilight in ff */
}
.timeline_box .timeline_image { position:relative; width:172px; height:130px; margin:3px 0 6px 0; z-index:888; }
.timeline_box .timeline_image img { border:solid 1px #9c8d6b; }
.timeline_box .timeline_image img:hover { border:solid 1px #ffffff; }
.timeline_box .timeline_icon_pic { position:absolute; left:0; bottom:0; width:20px; height:20px; background:url(images/global/icon_magnify.png) no-repeat; }
.timeline_box .timeline_icon_video { position:absolute; left:0; bottom:0; width:20px; height:20px; background:url(images/global/icon_play.png) no-repeat; }

.timeline_box .timeline_logo { width:100%; text-align:center; margin-bottom:7px; }

.timeline_box h2 { margin:-36px 0 18px 0; font-size:12px; line-height:16px; text-transform:uppercase; font-weight:normal; }

/* About Justin  ------------------------ */

#about {
	position:relative;
	width:603px; /*592px + 11px so right margin on the third preview box in each row will fit inside */
	margin:0 0 0 260px;
	padding-top:27px;
	padding-bottom:20px;
}

#about_foliage {
	position:relative;
	width:592px;
	background:url(images/global/bg_foliage_top.png) no-repeat right bottom;
}

#about_darken {
	position:relative;
	width:592px;
	background:url(images/global/bg_content_transparent.png);
}

#about_video {
	position:relative;
	width:569px; height:320px;
	padding:12px 11px 13px 12px;
	background:#150c05;
}

#about_description {
	position:relative;
	width:526px;
	padding:12px 33px 13px 33px;
}

/* Latest  ------------------------ */

#latest {
	position:relative;
	width:638px;
	margin:0 0 0 260px;
	padding-top:27px;
	padding-bottom:20px;
}

#latest .heading { position:relative; display:block;font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#f2e5c6;
		font-weight:bold; text-transform:uppercase; text-align:center; width:591px; height:23px; text-indent:-9999px; margin-bottom:12px;}
#latest .heading_location { background:url(images/latest/heading_location.png) center top no-repeat; }
#latest .heading_project { background:url(images/latest/heading_project.png) -1px top no-repeat; }
#latest .heading_twitter { background:url(images/latest/heading_twitter.png) -1px top no-repeat; }
#latest .heading_vimeo { background:url(images/latest/heading_vimeo.png) -1px top no-repeat; }
#latest .heading_flickr { background:url(images/latest/heading_flickr.png) -1px top no-repeat; }

#latest_box {
	position:relative;
	width:590px;
	padding:10px 24px 23px 24px;
	background:url(images/global/bg_content_transparent.png);
}
#latest_box .unavailable { width:100%; text-align:center; font-size:13px; font-weight:bold; width:100%; color:#aa9669; }

#latest_location {
	position:relative;
	width:591px; height:315px;
	margin-bottom:25px;
	background:url(images/latest/map_dotmap.png) left bottom no-repeat;
}
#latest_location h3 { position:absolute; right:40px; top:0px; font-size:14px; color:#f2e5c6; font-weight:bold; margin:0; 
		padding-left:15px; background:url(images/latest/map_reddot.png) left center no-repeat; }
#latest_location .location_dot { position:absolute; width:39px; height:40px;
		background:url(images/latest/map_locationmarker.png) left top no-repeat; }


#latest_project {
	position:relative;
	width:554px;
	font-size:12px; color:#d3c29a; line-height:15px;
	margin-bottom:21px;
	padding:0 18px 10px 18px;
}
#latest_project p, #latest_project h3 { margin:0 0 12px 0; }
#latest_project h3 { font-size:16px; color:#f2e5c6; font-weight:bold; margin-bottom:8px; }
#latest_project a { color:#f2e5c6; text-decoration:none; border-bottom:dotted 1px #5b4f35; }
#latest_project a:hover { color:#ffffff; text-decoration:none; border-bottom:dotted 1px #80704c; }

#latest_twitter {
	position:relative;
	width:590px;
	font-size:12px; color:#aa9669; line-height:15px;
	margin-bottom:25px;
}
#latest_twitter p, #latest_twitter h3 { margin:0 0 12px 0; }
#latest_twitter h3 { font-size:12px; color:#d6c395; font-weight:bold; margin-bottom:8px; }
#latest_twitter a { color:#ceb888; text-decoration:none; border-bottom:dotted 1px #5b4f35; }
#latest_twitter a:hover { color:#f2e5c6; text-decoration:none; border-bottom:dotted 1px #80704c; }

#latest_twitter .twitter_box { position:relative; width:166px; height:129px;
		background:url(images/global/bg_border_video_transparent.png); float:left; padding:12px 14px 14px 14px; }


#latest_vimeo {
	position:relative;
	width:566px; /* 590 -padding */
	padding:12px 12px 13px 12px;
	font-size:12px; color:#aa9669;
	background:url(images/global/bg_border_video_transparent.png);
	margin-bottom:21px;
}
#latest_vimeo p, #latest_vimeo h3 { margin:0 0 12px 0; }
#latest_vimeo h3 { font-size:12px; color:#d6c395; font-weight:bold; }
#latest_vimeo h3 span { font-size:10px; color:#aa9669; font-weight:normal; }
#latest_vimeo a { color:#ceb888; text-decoration:none; border-bottom:dotted 1px #5b4f35; }
#latest_vimeo a:hover { color:#f2e5c6; text-decoration:none; border-bottom:dotted 1px #80704c; }

#latest_vimeo .vimeo_box { position:relative; background:url(images/global/bg_border_video_transparent.png); 
		width:387px; 	float:left; margin:0 22px 0 0; }
#latest_vimeo .vimeo_text { position:relative; float:left; width:149px; overflow:hidden; }


#latest_flickr {
	position:relative;
	width:566px; /* 590 -padding */
	padding:12px 12px 13px 12px;
	font-size:12px; color:#aa9669;
	background:url(images/global/bg_border_video_transparent.png);
}

#latest_flickr ul, #latest_flickr li { list-style:none; list-style-type:none; margin:0; padding:0; }

#latest_flickr p, #latest_flickr h3 { margin:0 0 12px 0; }
#latest_flickr h3 { font-size:12px; color:#d6c395; font-weight:bold; }
#latest_flickr h3 span { font-size:10px; color:#aa9669; font-weight:normal; }
#latest_flickr a { color:#ceb888; text-decoration:none; border-bottom:dotted 1px #5b4f35; }
#latest_flickr a:hover { color:#f2e5c6; text-decoration:none; border-bottom:dotted 1px #80704c; }

#latest_flickr .flickr_photo_box { position:relative; background:url(images/global/bg_border_video_transparent.png); 
		width:387px; 	float:left; margin:0 22px 0 0; }
#latest_flickr .flickr_photo_box:hover { cursor:pointer; }
#latest_flickr .flickr_photo { position:relative; margin:0 auto; }

#latest_flickr .flickr_text { position:relative; float:left; width:149px; overflow:hidden; }

/* Services  ------------------------ */

#services {
	position:relative;
	width:1000px;
	margin:0;
	padding-bottom:20px;
}

#services .heading { position:relative; display:block;font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#f2e5c6;
		font-weight:bold; text-transform:uppercase; text-align:center; width:591px; height:23px; text-indent:-9999px; margin-bottom:12px;}
#services .heading_creative { background:url(images/services/heading_creative.png) -1px top no-repeat;}
#services .heading_directing { background:url(images/services/heading_directing.png) -1px top no-repeat; }
#services .heading_producing { background:url(images/services/heading_producing.png) -1px top no-repeat; }
#services .heading_collaborations { background:url(images/services/heading_collaborations.png) -1px top no-repeat; }

#services_sidebar { position:relative; width:250px; margin:530px 8px 0px 0px; float:left; overflow:hidden;}

#services_sidebar ul, #services_sidebar li { list-style:none; list-style-type:none; margin:0; padding:0; }

#services_box {
	position:relative;
	width:590px;
	margin-top:27px;
	padding:0px 24px 23px 24px;
	background:url(images/global/bg_content_transparent.png);
	float:left;
}

.services_text {
	position:relative;
	width:542px;
	padding:0px 24px 0px 24px;
	margin:0 0 7px 0;
}

#services_references { position:relative; width:184px; padding-bottom:30px; }

#services_references .references_box {
	position:relative; width:184px; padding:0 0px 0 37px; margin-right:50px; -moz-user-select: none; /* disable text hilight in ff */
}

#services_references .references_box:hover { cursor:pointer; }

#services_references .references_top {
	position:relative; width:184px; height:22px; background:url(images/services/services_quotebubble.png) 0 0 no-repeat;
}
#services_references .references_content {
	position:relative; width:157px; /* 184px */
	background:url(images/services/services_quotebubble_mid.png) 0 0;
	padding:0 12px 0 15px;
	font-size:17px; line-height:20px; color:#f2e5c6;
	font-family:"Times New Roman", Times, serif;
}
#services_references .references_bot {
	position:relative; width:173px; /* 184px */
	height:38px; background:url(images/services/services_quotebubble.png) 0 -31px no-repeat;
	padding:22px 0px 0 11px;
	font-size:14px; line-height:16px; color:#f2e5c6;
}
#services_references .references_bot span { font-size:10px; color:#d3c29a; }


#services_clients { position:relative; width:258px; margin:0; text-align:center; }
#services_clients h2 { font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#f2e5c6;
		font-weight:bold; text-transform:uppercase; text-align:center; margin:0; margin-bottom:20px;}

#services_clients .clients_logo { position:relative; width:258px; margin:0; text-align:center; margin:0 0 5px 0; }
#services_clients .clients_text { position:relative; font-size:13px; line-height:16px; color:#f2e5c6; margin:0 0 20px 0; text-align:center; }
#services_clients .clients_text span { font-size:10px; color:#d3c29a; }

#services_box .icon_top { position:absolute; right:-70px; bottom:-3px; width:22px; height:30px; }
#services_box .icon_top a { width:22px; height:30px; display:block; background:url(images/services/services_icon_top.png); text-indent:-5000em; }
#services_box .icon_top a:hover { text-decoration: none; background-position:0px -30px; }

#services .aside { position:relative; width:50%; background:url(images/global/bg_content_transparent.png) right bottom; padding:10px 15px 12px 15px; border:solid 1px #4a3823;  }
#services .aside_left { float:left; margin:0px 20px 12px 0; }
#services .aside_right { float:right; margin:0px 0 12px 20px;; }

#services .aside ul { margin:.8em 0 0 0; padding:0; color:#b42f17; font-size:13px; }
#services .aside li { margin:0 0 0 1em; padding:0 0 .8em 0; }

/* Commitment  ------------------------ */

#commitment {
	position:relative;
	width:603px; /*592px + 11px so right margin on the third preview box in each row will fit inside */
	margin:0 0 0 260px;
	padding-top:27px;
	padding-bottom:20px;
}

#commitment_foliage {
	position:relative;
	width:592px;
	background:url(images/global/bg_foliage_top.png) no-repeat right bottom;
}

#commitment_darken {
	position:relative;
	width:592px;
	background:url(images/global/bg_content_transparent.png);
}

#commitment_video {
	position:relative;
	width:569px; height:320px;
	padding:12px 11px 13px 12px;
	background:#150c05;
}

#commitment_description {
	position:relative;
	width:526px;
	padding:12px 33px 20px 33px;
}

#commitment_description .aside { position:relative; width:50%; background:url(images/global/bg_content_transparent.png) right bottom; padding:10px 15px 12px 15px; border:solid 1px #4a3823; }
#commitment_description .aside_left { float:left; margin:0px 20px 12px 0; }
#commitment_description .aside_right { float:right; margin:0px 0 12px 20px; }
#commitment_description .aside_middle { float:none; margin:0px auto 12px auto; }

#commitment_description .aside { color:#d83b1e; font-size:13px; }
#commitment_description .aside ul { margin:.8em 0 0 0; padding:0; color:#b42f17; font-size:13px; }
#commitment_description .aside li { margin:0 0 0 1em; padding:0 0 .8em 0; }



#index {
	position:relative;
	width:638px;
	margin:0 0 0 260px;
	padding-top:27px;
	padding-bottom:20px;
}

#index_box {
	position:relative;
	width:590px;
	padding:20px 24px 23px 24px;
	background:url(images/global/bg_content_transparent.png);
}

#index .content h1 { text-align:center; font-size:24px; }
#index .content h2 { margin-top:1em; }
#index .content li { margin-bottom:1em; }

#index .index_contents { width:50%; padding:10px; margin:0 auto; border:solid 1px #4a3823; background:url(images/global/bg_content_transparent.png); font-weight:bold; }
#index .index_contents li { margin:0 0 0.5em 1em; }
#index .index_contents li a:hover { color:#b42f17; }