/* reset
------------------------------------------------------------------------- */
* {
	margin:0;
	padding:0;
	list-style:none;
}

.low {
	display:none;
}


/* body
------------------------------------------------------------------------- */
body {
	background:#ffffff url('rancon.gif') -100px 120px no-repeat;
}

body.hasjavascript {
	overflow:hidden;
	position:absolute;
	height:100%;
	width:100%;
}


/* header
------------------------------------------------------------------------- */
#header {
	height:20px;
	width:100%;
	background:#ccc;
}

#header p {
	position:absolute;
	top:0;
	left:0;
	width:240px;
	height:109px;
	background:url('header.gif');
}

#header p strong{
	position:absolute;
	display:block;
	top:50px;
	left:84px;
	width:120px;
	height:20px;
	overflow:hidden;
	text-indent:-9999em;	
	outline:none;
}

#header p strong a:hover {
	background:url('home_arrow.gif') 0 3px no-repeat;
}


/* navigation
------------------------------------------------------------------------- */
#navigation {
	position:absolute;
	top:50px;
	left:240px;
}

#navigation li {
	display:block;
	float:left;
	height:20px;
	background:url('navigation.gif');
}

#navigation li a {
	display:block;
	height:100%;
	width:100%;
	overflow:hidden;
	text-indent:-9999em;
	outline:none;
	background:url('navigation.gif');
}

#navigation li a:hover {
	background:none;
}

#navigation #nav_home { width:66px; background-position:-0px -20px; } 
#navigation #nav_home a { background-position:-0px 0; } 
#home #navigation #nav_home { background-position:-0px -40px; } 
#home #navigation #nav_home a { cursor:default; background:none;} 

#navigation #nav_thestory { width:81px; background-position:-66px -20px; } 
#navigation #nav_thestory a { background-position:-66px 0; } 
#thestory #navigation #nav_thestory { background-position:-66px -40px; } 
#thestory #navigation #nav_thestory a { cursor:default; background:none;} 

#navigation #nav_whatwedo { width:87px; background-position:-147px -20px; } 
#navigation #nav_whatwedo a { background-position:-147px 0; } 
#whatwedo #navigation #nav_whatwedo { background-position:-147px -40px; } 
#whatwedo #navigation #nav_whatwedo a { cursor:default; background:none;} 

#navigation #nav_ourclients { width:82px; background-position:-234px -20px; } 
#navigation #nav_ourclients a { background-position:-234px 0; } 
#ourclients #navigation #nav_ourclients { background-position:-234px -40px; } 
#ourclients #navigation #nav_ourclients a { cursor:default; background:none;} 

#navigation #nav_contact { width:61px; background-position:-316px -20px; } 
#navigation #nav_contact a { background-position:-316px 0; } 
#contact #navigation #nav_contact { background-position:-316px -40px; } 
#contact #navigation #nav_contact a { cursor:default; background:none;} 

#navigation #nav_jobs { width:42px; background-position:-377px -20px; } 
#navigation #nav_jobs a { background-position:-377px 0; } 
#jobs #navigation #nav_jobs { background-position:-377px -40px; } 
#jobs #navigation #nav_jobs a { cursor:default; background:none;} 

#navigation #nav_login { width:45px; background-position:-419px -20px; } 
#navigation #nav_login a { background-position:-419px 0; } 
#login #navigation #nav_login { background-position:-419px -40px; } 
#login #navigation #nav_login a { cursor:default; background:none;} 



/* container
------------------------------------------------------------------------- */

#container {
	position:absolute;
	left:240px;
	top:125px;
}



/* section
------------------------------------------------------------------------- */
.section {
	position:absolute;
	width:525px;
	font-family:Verdana, sans-serif;
	font-size:12px;
	line-height:18px;
	color:#8c8c8c;
	overflow:auto;
}

.hidden * {
	visibility:hidden;
}

.hidden #subbox, .hidden #subbox * {
	visibility:visible !important;
}

.minimized {
	overflow:hidden !important;
}

.section_wrapper {
	width:525px;
}

.section h1 {
	height:25px;
	width:100%;
	margin-bottom:12px;
	overflow:hidden;
	text-indent:-9999em;
	background-repeat:no-repeat;
}

.section h4 {color:#ff6c00; font-weight:normal; clear:both;}

.section p {
		margin:9px 0;
}

.section a {
	color:#ff6c00;
	text-decoration:none;
}

.section a:hover {
	text-decoration:underline;
}

.section ul {
	margin:9px 0;
}

.section strong {
	padding:2px 1px;
	font-weight:normal;
	color:#5c5c5c;
	background:#fff;
}

.section .collage {
	margin-bottom:12px;
	/*border-bottom:9px solid #ddd;*/
	line-height:0;
}

p.giveusacall {
	clear:both;
	height:100px;
	width:208px;
	overflow:hidden;
	text-indent:-9999em;
	background:url('giveusacall.gif') 0 24px no-repeat;
}


/* work list / work detail / subbox
------------------------------------------------------------------------- */
.work_list {
	margin-top:8px !important;
	margin-bottom:12px;
}

.work_list li {
	float:left;
	width:80px;
	margin:0 6px 4px 0;
	/*border:thin solid red;*/
}

.work_list li a, .work_list li a:hover {
	position:relative;
	display:block;
	text-decoration:none;
	line-height:0;
}

.work_list li a span {
	display:block;
	padding:4px;
	color:#8c8c8c;
	font-size:0.9em;
	line-height:15px;
	background:#fff;
}

.work_list li a img {
	border:none;
}

.work_list li a .portfolio_thumb_hover {
	position:absolute;
	top:-8px;
	right:2px;
	display:none;
	width:35px;
	height:26px;
	padding:0;
	line-height:0;
	background:url('portfolio_thumb_hover.gif');
}

.work_list li a:hover .portfolio_thumb_hover {
	display:none;
}

#work_detail {
	width:495px;
	margin-bottom:60px;
	padding:18px 12px 0 18px;
	background:#fff;
	border:thin solid #E4E4E4;
}

#work_detail .col1 {
	width:240px;;
	float:left;
}

#work_detail .col1 p {
    padding-right:10px;
	border-right:thin solid #E4E4E4;
}

#work_detail .col2 {
	width:240px;
	float:right;
	padding:0px;
	margin:0px;
}

#subbox #work_detail {
	position:absolute;
	z-index:9000;
	top:125px;
	padding-top:20px;
	padding-bottom:18px;
}

#work_detail h2 {
	padding-top:50px;
	font-size:12px;
	font-weight:bold;
	color:#ff6c00;
}

#work_detail ul {
    padding-top:10px;
	width:auto; /* IE needs that */
	margin:0;
	font-size:10px;
	line-height:13px;
}

#work_detail li {
	list-style-image:url('li.gif');
	margin-left:18px;
	margin-right:18px;
}

#work_detail #work_image {
	margin:40px 0 0 0px;
	padding:0;
	line-height:0;
}

#subbox #work_detail #work_image {
	position:absolute;
	top:-125px;
	left:0;
	margin-top:19px;
}

#subbox #closebox {
	position:absolute;
	top:0px;
	left:465px;
	display:block;
	width:64px;
	height:20px;
	z-index:9999;
	background:url('close.gif');
}

* html #subbox #closebox {
	background:url('portfolio_detail_close.gif');
}


/* home
------------------------------------------------------------------------- */
#section_home h1 {
	height:35px;
	background-image:url('h1_home.gif');
}


#section_home .col1 {
	width:48%;
	float:left;
}

#section_home .col2 {
	width:48%;
	float:right;
}

/* the story
------------------------------------------------------------------------- */
#section_thestory h1 {
	background-image:url('h1_thestory.gif');
}

#section_thestory h2 {
	padding-bottom:6px;
	font-size:12px;
	font-weight:bold;
	color:#ff6c00;
}


/* expertise
------------------------------------------------------------------------- */
#expertise_navigation {
	display:none;
	position:absolute;
	top:70px;
	left:311px;
}

.hasjavascript #expertise_navigation {
	display:block;
}

#expertise_navigation li {
	display:block;
	float:left;
	height:20px;
	background-image:url('expertise_navigation.gif');
}

#expertise_navigation li a {
	display:block;
	height:100%;
	width:100%;
	overflow:hidden;
	text-indent:-9999em;
	outline:none;
	background-image:url('expertise_navigation.gif');
}

#expertise_navigation li a:hover {
	background:none !important;
}

#expertise_navigation #expertise_nav_strategic { width:61px; background-position:0 -20px; }
#expertise_navigation #expertise_nav_strategic a,
.creative_expertise #expertise_navigation #expertise_nav_strategic a,
.technical_expertise #expertise_navigation #expertise_nav_strategic a {
	background:url('expertise_navigation.gif');
}
#expertise_navigation #expertise_nav_strategic a { background:none; }

#expertise_navigation #expertise_nav_creative { width:55px; background-position:-60px -20px; }
#expertise_navigation #expertise_nav_creative a { background-position:-60px 0;}
.creative_expertise #expertise_navigation #expertise_nav_creative a { background:none; }

#expertise_navigation #expertise_nav_technical { width:62px; background-position:-115px -20px; }
#expertise_navigation #expertise_nav_technical a { background-position:-115px 0;}
.technical_expertise #expertise_navigation #expertise_nav_technical a { background:none; }

#section_expertise, #section_expertise .section_wrapper {
	width:537px;
}

.creative_expertise #section_strategic_expertise,
.technical_expertise #section_strategic_expertise,
.hasjavascript #section_creative_expertise,
.hasjavascript #section_technical_expertise {
	display:none;
}

.creative_expertise #section_creative_expertise { display:block; }
.technical_expertise #section_technical_expertise { display:block; }

#section_expertise h1 {
	clear:both;
}


#section_expertise #section_strategic_expertise h1 {
	background-image:url('h1_advertising_expertise.gif');
}

#section_expertise #section_creative_expertise h1 {
	background-image:url('h1_design_build.gif');
}

#section_expertise #section_technical_expertise h1 {
	background-image:url('h1_socialmedia.gif');
}

#section_expertise p {
	clear:both;
}

#section_expertise ol {
	margin:18px 0;
}

#section_expertise ol li {
	float:left;
	width:167px;
	margin:0 12px 18px 0;
	padding:44px 0 9px 0;

	border-top:1px solid #ddd;
	border-bottom:1px solid #ddd;
}

#section_expertise #expertise_process_step1 { background:url('expertise_step1.gif') 0 9px no-repeat; }

#section_expertise #expertise_process_step2 { background:url('expertise_step2.gif') 0 9px no-repeat; }

#section_expertise #expertise_process_step3 { background:url('expertise_step3.gif') 0 9px no-repeat; }

#section_expertise .col1 {
	width:48%;
	float:left;
}

#section_expertise .col2 {
	width:48%;
	float:right;
}

#section_expertise h3 {font-weight:bold; font-size:10px;}

#section_expertise ul li {
	padding:3px 0 3px 18px;
	background:url('li.gif') 0 7px no-repeat;
}

#section_expertise ul.work_list li, #section_expertise #work_detail li {
	padding:0;
	background-image:none;
}

#section_expertise ul li a{color:#8c8c8c; text-decoration:none;}
#section_expertise ul li a:hover {color:#f0661b;}

/* recent work
------------------------------------------------------------------------- */
/*
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
#recentwork_navigation {
	display:none;
	position:absolute;
	top:70px;
	left:311px;
}

.hasjavascript #recentwork_navigation {
	display:block;
}

#recentwork_navigation li {
	display:block;
	float:left;
	height:20px;
	background-image:url('recentwork_navigation.gif');
}

#recentwork_navigation li a {
	display:block;
	height:100%;
	width:100%;
	overflow:hidden;
	text-indent:-9999em;
	outline:none;
	background-image:url('recentwork_navigation.gif');
}

#recentwork_navigation li a:hover {
	background:none !important;
}

#recentwork_navigation #recentwork_nav_advertising { width:61px; background-position:0 -20px; }
#recentwork_navigation #recentwork_nav_advertising a,
.web_recentwork #web_navigation #recentwork_nav_advertising a,
.games_recentwork #web_navigation #recentwork_nav_advertising a {
	background:url('recentwork_navigation.gif');
}
#recentwork_navigation #recentwork_nav_advertising a { background:none; }

#recentwork_navigation #recentwork_nav_web { width:55px; background-position:-60px -20px; }
#recentwork_navigation #recentwork_nav_web a { background-position:-60px 0;}
.web_recentwork #recentwork_navigation #recentwork_nav_web a { background:none; }

#recentwork_navigation #recentwork_nav_games { width:62px; background-position:-115px -20px; }
#recentwork_navigation #recentwork_nav_games a { background-position:-115px 0;}
.games_recentwork #recentwork_navigation #recentwork_nav_games a { background:none; }

.web_recentwork #section_advertising_recentwork,
.games_expertise #section_advertising_recentwork,
.hasjavascript #section_web_recentwork,
.hasjavascript #section_games_recentwork {
	display:none;
}
.web_recentwork #section_web_recentwork { display:block; }
.games_recentwork #section_games_recentwork { display:block; }

#section_expertise h1 {
	clear:both;
}

#section_recentwork p {
	clear:both;
}

#section_recentwork ol {
	margin:18px 0;
}

#section_recentwork ol li {
	float:left;
	width:167px;
	margin:0 12px 18px 0;
	padding:44px 0 9px 0;

	border-top:1px solid #ddd;
	border-bottom:1px solid #ddd;
}

#section_recentwork ul li {
	padding:3px 0 3px 18px;
	background:url('li.gif') 0 7px no-repeat;
}

#section_recentwork ul.work_list li, #section_recentwork #work_detail li {
	padding:0;
	background-image:none;
}

#section_recentwork ul li a{color:#8c8c8c; text-decoration:none;}
#section_recentwork ul li a:hover {color:#f0661b;}
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
#section_recentwork h4 {
	height:15px;
	font-weight:bold;
}

#section_recentwork, #recentwork .section_wrapper {
	width:537px;
}

#section_recentwork h1 {
	background-image:url('h1_recentwork.gif');
}

/* ourclients
------------------------------------------------------------------------- */
#section_ourclients h1 {
	background-image:url('h1_ourclients.gif');
}

#section_ourclients .col1 li,#section_ourclients .col2 li {
	border-bottom:1px solid #ddd;
	line-height:27px;
}

#section_ourclients .col1 {
	width:48%;
	float:left;
}

#section_ourclients .col2 {
	width:48%;
	float:right;
}


/* contact
------------------------------------------------------------------------- */
#section_contact h1 {
	background-image:url('h1_contact.gif');
}

#section_contact, #contact .section_wrapper {
	width:650px;
}

#section_contact .col {
	padding-top:9px;
	border-top:1px solid #ddd;
	float:left;
	width:140px;
	margin:0 12px 18px 0;
}
#section_contact .col a img {border:0px;}

#section_contact .giveusacall {
	height:0;
	width:100%;
	border-top:1px solid #ddd;
	background:none;
}


/* jobs
------------------------------------------------------------------------- */
#section_jobs h1 {
	background-image:url('h1_jobs.gif');
}

#section_jobs #rsslink {
	padding:10px 0 10px 30px;
	background:url('rss.gif') center left no-repeat;
}


/* login
------------------------------------------------------------------------- */
#section_login h1 {
	background-image:url('h1_login.gif');
}

#section_login form p {
	padding-bottom:9px;
}

#section_login label {
	display:block;
	float:left;
	width:12%;
}

#section_login input {
	height:18px;
	width:88%;
	padding:2px 0;
	border:none;
	border-bottom:1px solid #ddd;
	font-family:Verdana, sans-serif;
	font-size:12px;
	line-height:18px;
	color:#8c8c8c;
}

#section_login #login_button {
	height:26px;
	width:44px;
	margin:9px 0 0 0;
	padding:0;
	border:none;
}

#section_login p.giveusacall {
	background-position:0 46px;
}

.inputform {
font-size:10px;
width: 120px;
}

.inputform1 {
font-size:10px;
width: 123px;
}

.inputform2 {
font-size:10px;
width: 123px;
}

.contactbtn {
background:url(submit_button.gif) no-repeat;
border:0pt none;
color:#FFFFFF;
cursor:pointer;
height:26px;
margin:0pt;
padding:0pt;
width:56px;


}


/*sections 
----------------------------------------------------------- */

.leftsec {float:left; width:160px; height:auto; padding-right:15px;}
.leftsec ul li {padding:3px 0 3px 18px; background:url('li.gif') 0 7px no-repeat;}
.leftsec ul li a {color:#8c8c8c;}
.leftsec ul li a:hover {color:#f0661b;  text-decoration:none;}
.leftsec h2 {border-top:thin solid #dbdbdb; border-bottom:thin solid #dbdbdb; padding:4px 0px 4px 0px; font-size:1em; font-weight:normal;}

.centersec {float:left; width:160px; height:auto; padding-right:15px;}
.centersec ul li {padding:3px 0 3px 18px; background:url('li.gif') 0 7px no-repeat;}
.centersec ul li a {color:#8c8c8c;}
.centersec ul li a:hover {color:#f0661b;  text-decoration:none;}
.centersec h2 {border-top:thin solid #dbdbdb; border-bottom:thin solid #dbdbdb; padding:4px 0px 4px 0px; font-size:1em; font-weight:normal;}

.rightsec {float:left; width:160px; height:auto; padding-right:15px;}
.rightsec ul li {padding:3px 0 3px 18px; background:url('li.gif') 0 7px no-repeat;}
.rightsec ul li a {color:#8c8c8c;}
.rightsec ul li a:hover {color:#f0661b; text-decoration:none;}
.rightsec h2 {border-top:thin solid #dbdbdb; border-bottom:thin solid #dbdbdb; padding:4px 0px 4px 0px; font-size:1em; font-weight:normal;}

/* footer
------------------footer css will go here------------------ */

#footer_top {clear:both;}
.featured_client {float:right; margin-bottom:-28px !important; margin-top:4px;}
.featured_client li {display:inline; padding-left:6px; float:left;}
.featured_client li p {font-size:0.8em; font-weight:bold; padding-right:12px;}
#footer {background:url(footer.gif) left no-repeat; height:110px; width:525px; float:left; clear:both; margin-top:30px; padding:2px 10px 10px 18px; font-family:Verdana, sans-serif;}
#footer h3 {font-weight:normal; font-size:0.8em; color:#ffffff; padding:10px 0px 0px 0px;}
#footer p, #footer a {font-size:0.8em; color:#ffffff; text-decoration:none;}

/* flashcontent
----------------------------------- */

#flashcontent {background:url(layout/header_placeholder.gif) no-repeat; width:525px; height:150px;}