@charset "UTF-8";
/* CSS Document */


/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
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-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #afaeae;
	margin: 0px; 
	padding: 0px;
	background-color:#fafafa;
}

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}


		
h1 { 
		font-family: Tahoma, Arial, Verdana;
		font-size: 17px;
		font-weight: normal;
		color: #51819f;
		margin: 38px 0px 29px 40px;
		}
		
h2 { 
		font-family: Tahoma, Arial, Verdana;
		font-size: 17px;
		font-weight: normal;
		color: #51819f;
		}
		
h3 { 
		font-family: Tahoma, Arial, Verdana;
		font-size: 14px;
		font-weight: normal;
		color: #51819f;
		margin: 0px 0px 15px 0px;
		}
		
h4 { 
		font-family: Tahoma, Arial, Verdana;
		font-weight: normal;
		color: #51819f;
		margin: 27px 0px 0px 0px;
		}
		
h5 { 
		font-family: Tahoma, Arial, Verdana;
		font-size: 14px;
		font-weight: normal;
		color: #e0c00d;
		margin: 0px 0px 15px 0px;
		}
		
h6 { 
		font-family: Tahoma, Arial, Verdana;
		font-weight: normal;
		color: #e0c00d;
		margin: 27px 0px 0px 0px;
		}

		
		
p { 
		line-height: 14px;
		margin: 12px 0px 12px 0px;
		}
		

/* links */


A:link {
		color: #7f9594;
		font-weight: bold;
		text-decoration: none;
		
		}
A:visited {
		color: #7f9594;
		font-weight: bold;
		text-decoration: none;
		}
		
A:hover {
		color: #e0c00d;
		font-weight: bold;
		text-decoration: none;
		}

A.footer_links:link {
		color: #7f9594;
		text-decoration: none;
		font-weight: normal;
		font-size: 10px;
		}
		
A.footer_links:visited {
		color: #7f9594;
		text-decoration: none;
		font-weight: normal;
		font-size: 10px;
		}
		
A.footer_links:hover {
		color: #e0c00d;
		text-decoration: none;
		font-weight: normal;
		font-size: 10px;
		}
		
		
/* general page elements */
		
#container {
		position: relative;
		background: url(img/bg.jpg);
		width: 1105px;
		min-height: 491px;
		margin-left: -552px;
		left: 50%;
		padding: 13px 16px 30px 16px;
		}
		
#bottom {
		position: relative;
		width: 1200px;
		height: 21px;
		margin-left: -600px;
		left: 50%;
		background: url(img/bg_bottom.jpg);
		}
		
.left_column {
		float: left;
		width: 600px;
		padding: 0px 0px 0px 40px;
		}
		
.right_column {
		float: right;
		width: 375px;
		padding: 0px 40px 0px 0px;
		}
		
#dotted_top {
		width: 1105px;
		height: 1px;
		background: url(img/dotted.gif);
		margin: 17px 0px 0px 0px;
		}
		
#dotted_bottom {
		width: 1105px;
		height: 1px;
		background: url(img/dotted.gif);
		margin: 34px 0px 10px 0px;
		}
		
.dotted {
		width: 100%;
		height: 1px;
		background: url(img/dotted.gif);
		margin: 16px 0px 22px 0px;
		}
		
.dotted_center {
		width: 1027px;
		height: 1px;
		background: url(img/dotted.gif);
		margin: 16px 40px 22px 38px;
		}
		
.left {
		float: left;
		}
		
.right {
		float: right;
		}
		
.clear {
		clear: both;
		}
		

/* top */

.logo{	
		float: left;
		padding: 11px 40px 0px 40px;
		}
		
.twitter {	
		float: right;
		padding: 0px 5px 0px 0px;
		}



/* menu */

		
#menu ul{
		margin: 0;
		float: right;
		padding: 30px 0px 0px 0px;
		}

#menu ul li {
		list-style: none;
		float: left;
		}

#menu ul li a {
		display: block;
		}
	
#menu ul li a.m_home {
		background-image: url(img/m_home.gif);	
		background-repeat:no-repeat;
		width: 151px;
		height: 16px;
		}
		
#menu ul li a.m_home:hover {
		background-image: url(img/m_home.gif);
		background-position: 0 -16px;
		cursor: pointer;
		}
		
#menu ul li a.m_home_ {
		background-image: url(img/m_home.gif);
		background-repeat:no-repeat;
		background-position: 0 -16px;
		width: 151px;
		height: 16px;
		cursor: pointer;
		}
		
#menu ul li a.m_work {
		background-image: url(img/m_work.gif);	
		background-repeat:no-repeat;
		width: 147px;
		height: 16px;
		}
		
#menu ul li a.m_work:hover {
		background-image: url(img/m_work.gif);
		background-position: 0 -16px;
		cursor: pointer;
		}
		
#menu ul li a.m_work_ {
		background-image: url(img/m_work.gif);
		background-repeat:no-repeat;
		background-position: 0 -16px;
		width: 147px;
		height: 16px;
		cursor: pointer;
		}
		
#menu ul li a.m_contact {
		background-image: url(img/m_contact.gif);	
		background-repeat:no-repeat;
		background-repeat:no-repeat;
		width: 77px;
		height: 16px;
		}
		
#menu ul li a.m_contact:hover {
		background-image: url(img/m_contact.gif);
		background-position: 0 -16px;
		cursor: pointer;
		}
		
		
		/* submenu */

		
#submenu ul{
		margin: 0;
		float: right;
		padding: 17px 40px 48px 0px;
		}

#submenu ul li {
		list-style: none;
		float: left;
		}

#submenu ul li a {
		display: block;
		}
	
#submenu ul li a.sm_branding {
		background-image: url(img/sm_branding.gif);
		background-repeat:no-repeat;
		width: 71px;
		height: 16px;
		background-position: right 0px;
		}
		
#submenu ul li a.sm_branding:hover {
		background-image: url(img/sm_branding.gif);
		background-position:  right -16px;
		cursor: pointer;
		}
		
#submenu ul li a.sm_branding_ {
		background-image: url(img/sm_branding.gif);
		background-repeat:no-repeat;
		background-position: right -16px;
		width: 71px;
		height: 16px;
		cursor: pointer;
		}
		
#submenu ul li a.sm_print_design {
		background-image: url(img/sm_print_design.gif);
		background-repeat:no-repeat;
		width: 187px;
		height: 16px;
		background-position: right 0px;
		}
		
#submenu ul li a.sm_print_design:hover {
		background-image: url(img/sm_print_design.gif);
		background-position:  right -16px;
		cursor: pointer;
		}
		
#submenu ul li a.sm_print_design_ {
		background-image: url(img/sm_print_design.gif);
		background-repeat:no-repeat;
		background-position: right -16px;
		width: 187px;
		height: 16px;
		cursor: pointer;
		}
		
#submenu ul li a.sm_web_design {
		background-image: url(img/sm_web_design.gif);
		background-repeat:no-repeat;
		width: 184px;
		height: 16px;
		background-position: right 0px;
		}
		
#submenu ul li a.sm_web_design:hover {
		background-image: url(img/sm_web_design.gif);
		background-position:  right -16px;
		cursor: pointer;
		}
		
#submenu ul li a.sm_web_design_ {
		background-image: url(img/sm_web_design.gif);
		background-repeat:no-repeat;
		background-position: right -16px;
		width: 184px;
		height: 16px;
		cursor: pointer;
		}
		
#submenu ul li a.sm_ui_design {
		background-image: url(img/sm_ui_design.gif);
		background-repeat:no-repeat;
		width: 166px;
		height: 16px;
		background-position: right 0px;
		}
		
#submenu ul li a.sm_ui_design:hover {
		background-image: url(img/sm_ui_design.gif);
		background-position:  right -16px;
		cursor: pointer;
		}
		
#submenu ul li a.sm_ui_design_ {
		background-image: url(img/sm_ui_design.gif);
		background-repeat:no-repeat;
		background-position: right -16px;
		width: 166px;
		height: 16px;
		cursor: pointer;
		}
		
#submenu ul li a.sm_art_animation {
		background-image: url(img/sm_art_animation.gif);
		background-repeat:no-repeat;
		width: 214px;
		height: 16px;
		background-position: right 0px;
		}
		
#submenu ul li a.sm_art_animation:hover {
		background-image: url(img/sm_art_animation.gif);
		background-position:  right -16px;
		cursor: pointer;
		}
		
#submenu ul li a.sm_art_animation_ {
		background-image: url(img/sm_art_animation.gif);
		background-repeat:no-repeat;
		background-position: right -16px;
		width: 214px;
		height: 16px;
		cursor: pointer;
		}
		
#submenu ul li a.sm_miscellaneous {
		background-image: url(img/sm_miscellaneous.gif);
		background-repeat:no-repeat;
		width: 203px;
		height: 16px;
		background-position: right 0px;
		}
		
#submenu ul li a.sm_miscellaneous:hover {
		background-image: url(img/sm_miscellaneous.gif);
		background-position:  right -16px;
		cursor: pointer;
		}
		
#submenu ul li a.sm_miscellaneous_ {
		background-image: url(img/sm_miscellaneous.gif);
		background-repeat:no-repeat;
		background-position: right -16px;
		width: 203px;
		height: 16px;
		cursor: pointer;
		}
		

/* footer */
		
.footer_separator {
		font-size: 10px;
		padding: 0px 8px 0px 8px;
		}
		
.logo_mio {
		float: right;
		padding: 0px 12px 0px 0px;
		}		
		

/* home */
	
		
.brands {
		padding: 15px 0px 0px 0px;
		}
		
.img_fields {
		padding: 14px 7px 0px 0px;
		}
		
.img_fields_last {
		padding: 14px 0px 0px 0px;
		}
		
/* work */

.img {
		padding: 0px 7px 7px 0px;
		}
		
.img_last {
		padding: 0px 0px 7px 0px;
		}
		
.new {
		padding: 0px 7px 0px 0px;
		}
		
.arrow {
		padding: 0px 7px 0px 0px;
		}
		
/* art & animation */

.no_flash {
		text-align: center;
		vertical-align: middle;
		padding: 150px 0px 0px 0px;
		}
		
		
#culinary_video {
		display: none;
		width: 600px;
		height: 395px;
		}
		
#sophie_video {
		display: none;
		width: 600px;
		height: 395px;
		}
		
#fly_video {
		display: none;
		width: 600px;
		height: 395px;
		}
		
#white_red_video {
		display: none;
		width: 600px;
		height: 395px;
		}
		
#menthol_bananas_video {
		display: none;
		width: 600px;
		height: 395px;
		}
		
#showreel_video {
		display: none;
		width: 600px;
		height: 395px;
		}
		
		
#showreel {
		background: url(img/showreel_bg.jpg);
		width: 100%;
		height: 465px;
		margin: 0px 0px 34px 0px;
		padding: 25px 0px 0px 0px;
		}