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, 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-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline}
body {line-height: 1; color: black; background: white}
ol, ul {list-style: none}
 table {border-collapse: separate; border-spacing: 0}
caption, th, td {text-align: left; font-weight: normal}
blockquote:before, blockquote:after, q:before, q:after {content: ""}
blockquote, q {quotes: "" ""}
 body {background: url(../images/tile_bg.gif) top center repeat #b1b1b1; color: #666; font-family: Arial, Helvetica, sans-serif; font-size: 1em; text-align: center}
#backing {width: 100%; background: url(/images/backing_bg.png) top center no-repeat}
#wrapper, #header, .foot_note {margin: 0 auto; padding: 0 15px; text-align: left; width: 980px}
#wrapper {background: url(../images/wrapper_bg.png) left top repeat-y transparent}
#header {background: url(../images/header_bg.png) center bottom no-repeat transparent; height: 145px; position: relative}
#container { background-color: #F3F3F3; padding: 15px}
#content {clear: both; display: inline; float: left; width: 630px}
#sidebar {display: inline; float: right; width: 305px}
#sidebar ul li {background: url(../images/side_section_bg.jpg) left top no-repeat transparent; min-height: 240px; margin-bottom: 15px; overflow: hidden; padding: 5px 30px 15px}
#sidebar ul li li{ overflow: visible; display: block; clear: left}
#sidebar .link_list ul {background:url(../images/side_list_bg_mid.png) left bottom repeat-y transparent; padding: 5px 15px 0; width: 226px; margin-bottom: 0}
#sidebar .sub_col {float: left; display: inline; margin-right: 5px; width: 48%}
#sidebar .tags {float: right; margin-right: 0; width: 40%}
#sidebar ul li.friends {font-size: 0.8em}
 #sidebar ul .friends ul {}
#sidebar ul ul li {background-image: none; margin: 0; min-height: 0; padding: 0}
#sidebar ul .news ul li {background-color: #efefef}
#wrapper #sidebar ul ul .alt {background-color: white}
#sidebar ul ul li:hover ul {display: block}
#footer {background-color: #a1a1a1; color: #454545; padding: 30px 55px 25px}
.foot_note {background: url(../images/footer_bg.png) top left no-repeat transparent; font-size: .8em; overflow: hidden; padding: 1em 15px 2em}
 #header h1 {float: left; margin-left: 20px; padding-top: 20px}
#header h1 a {background: url(../images/logo2.png) left top no-repeat transparent; display: block; height: 109px; overflow: hidden; text-indent: -999em; width: 252px}
#container h1, #container h2, #container h3, #container h4, #container h5, #container h6 {color: #333; font-weight: bold; margin: 1em 0 0}
#sidebar h4, #sidebar h5, #sidebar h6 {margin: 0}
#sidebar h3 {margin-bottom: 15px; margin-left: -3px}
#sidebar h5 {font-size: .8em}
h1 {font-size: 2.1em}
h2 {font-size: 1.7em}
h3 {font-size: 1.5em}
h4 {font-size: 1.4em}
h5 {font-size: 1.1em}
h6 {font-size: 1em; font-weight: normal}
#sidebar p {font-size: .8em}
#sidebar p.date {color: #333}
p {color: #666; font-size: .9em; line-height: 1.5em; margin: 0 0 1em}
#footer ul {color: #666}
ol, ul {margin: 0 0 1em}
li {font-size: .9em; line-height: 1.5em}
.il li {display: inline; margin-right: 1em}
dl {margin-bottom: .5em}
dt {font-weight: bold}
dd {font-style: italic; margin-bottom: .5em}
b, strong {font-weight: bold}
i, em {font-style: italic}
em {font-style: normal}
em a {color: #0099ff}
u {text-decoration: underline}
del {text-decoration: line-through}
small {font-size: .8em}
big {font-size: 1.2em}
blockquote {}
code {font-family:"Courier New", Courier, monospace; white-space: pre}
a {text-decoration: none}
a:link, a:visited {color: #0099ff}
a:focus {color: #0099ff}
a:hover, a:active {color: #ff5105}
#sidebar ul ul li a:link, #sidebar ul ul li a:visited {color: #0099ff}
#sidebar ul ul li a:focus {color: #0099ff}
#sidebar ul ul li a:hover, #sidebar ul ul li a:active {color: #ff5105}
#sidebar ul ul a:link, #sidebar ul ul a:visited {color: #666}
#sidebar ul ul a:focus {color: #666}
#sidebar ul ul a:hover, #sidebar ul ul a:active {color: #ff5105}
#sidebar ul div.tags ul li a:link, #sidebar ul div.tags ul li a:visited, #sidebar ul ul.browse a:link, #sidebar ul ul.browse a:visited {color: #666}
#sidebar ul div.tags ul li a:hover, #sidebar ul div.tags ul li a:active, #sidebar ul ul.browse a:hover, #sidebar ul ul.browse a:active {color: #ff5105}
h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link, h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited, h1 :focus, h2 :focus, h3 :focus, h4 :focus, h5 :focus, h6 :focus {color: #333}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {color: #ff5105}
.thumb p strong a {color: #424242}
.thumb p strong a:hover {color: #ff5105}
.thumb em a {padding: 1px 2px}
.thumb em a:hover {background-color: #ff5105; color: #FFF}
.foot_note a {text-decoration: none}
.foot_note a:link, .foot_note a:visited {color: #444}
.foot_note a:focus {color: #444}
.foot_note a:hover, .foot_note a:active {color: black}
 #footer h5 {font-size: .9em; margin-bottom: 15px}
#footer h6 {margin-bottom: 1em}
.contact {display: block; width: 205px; margin-right: 15px; float: left}
.contact h6 a.email, .contact h6 span {float: left}
.contact a.email {background: url(../images/mail.gif) 0 center no-repeat; width: 16px; height: 20px; text-indent: -9999px; margin-left: 4px}
.contact h6 {background-image: none; font-size: 0.9em}
.contact p, .contact h6 {margin: 0; clear: both}
#footer p.mathematic {clear: both; padding-top: 1em; font-size: 0.8em}
.foot_note {color: #444}
 #header ul {float: right; margin-top: 60px}
 #header ul li {display: block; float: left; height: 30px; margin-right: 15px}
#header ul li a {display: block; height: 30px; overflow: hidden; text-indent: -999em}
.btn_proj a {background: url(../images/navigation/nav_btn_proj.png) left top no-repeat transparent; width: 123px}
.btn_blog a {background: url(../images/navigation/nav_btn_blog.png) left top no-repeat transparent; width: 78px}
.btn_news a {background: url(../images/navigation/nav_btn_news.png) left top no-repeat transparent; width: 82px}
.btn_proj a:hover, .btn_blog a:hover, .btn_news a:hover, .current a {background-position: left bottom}
 #login div {background: url(../images/navigation/login_btm.png) left bottom no-repeat transparent; display: none; padding: 10px 5px; position: absolute; right: 9px; top: 29px; width: 285px}
#login.open div {display: block}
#login a {background: url(../images/navigation/login.png) left bottom no-repeat transparent; display: block; height: 29px; overflow: hidden; position: absolute; right: 9px; text-indent: -999em; width: 78px}
#login.open a {background-position: left top}
 #section_navigation {background: url(../images/section_navigation_bg.jpg) left top repeat-y transparent; clear: both; display: block; float: left; height: 41px; margin: 0; overflow: hidden; padding: 0}
#wrapper .light_tabs {background: url(../images/tabs_lt_nav_bg.jpg) left top repeat-y transparent; margin-bottom: -1px; z-index: 10}
#section_navigation li {display: inline; float: left; height: 41px}
#section_navigation li a {background-color: transparent; border-top: solid 1px #F3F3F3; border-right: solid 1px #F3F3F3; display: block; height: 100%; line-height: 41px; padding: 0 0 0 2em; text-indent: 0; font-size: 1.3em}
#section_navigation a:link, #section_navigation a:visited {color: #333333; text-decoration: none}
#section_navigation a:focus {color: #333333; text-decoration: none}
#section_navigation a:hover, #section_navigation a:active {text-decoration: none}
#wrapper #section_navigation a {background-color: #F3F3F3}
#wrapper #section_navigation .current a {background-color: transparent; background-position: center bottom; border-right: solid 1px #c2c2c1; border-top: solid 1px #c2c2c1; color: #ff5105; padding-right: 2em}
#wrapper #section_navigation a:hover {background: #F3F3F3; color: #ff5105}
#wrapper #section_navigation .current a {background: transparent}
.friends a {color: #666; font-size: 1.2em}
 .pages {clear: both; display: block; margin-right: 30px; overflow: hidden}
.pages ul {background-color: #CCC; float: right; padding: 0 5px}
.pages ul li {display: inline}
.pages ul li a {color: #333}
.pages ul li a:hover {color: #ff5105}
  #primary_feature {background: url(../images/list_section_bg.jpg) left -1px no-repeat transparent; padding: 27px 0 27px 34px}
 #secondary_feature {background: url(../images/list_section_bg.jpg) left top no-repeat transparent; margin-top: 15px; overflow: hidden; padding-top: 27px}
#secondary_feature li {display: inline; float: left; margin-left: 34px; margin-right: -7px; width: 280px}
 #list_view li {background: url(../images/list_section_bg.jpg) left top no-repeat transparent; display: block;  overflow: hidden; padding: 27px 10px 27px 34px}
.articles #list_view h4{ margin: 0 0 0}
.articles p.categories {margin-bottom: 0}
.articles #list_view {background: url(../images/tabs_lt_content_bg.jpg) left top no-repeat transparent}
.articles #list_view div.body {margin-top: 1em}
.articles #list_view li{ background-image: none; border-bottom: solid 1px #d8d8d8}
 #grid_view {background: url(../images/tabs_lt_content_bg.jpg) left top no-repeat transparent; padding: 17px 10px 20px 34px; overflow:hidden}
#wrapper #grid_view .thumb h6 {width: 170px; font-size: 0.8em; margin-top: 2px}
.count {background: url(../images/count_bg.png) right top no-repeat transparent; color: white; display: block; font-size: .8em; font-weight: normal; height: 43px; left: -74px; line-height: 31px; margin-left: -55px; padding: 5px 0; position: absolute; text-align: center; top: 45px; width: 87px}
 .topic {display: block; padding-top: 7px}
.meta {color: #333}
#container .project h4 {margin-top: 0}
#container .project p.categories, #container .article p.categories {margin-bottom: 0}
.articles p.date, .project p.date, .article p.date {color: #333; font-size: 0.8em; margin-bottom: 0}
  .thumb{ display: inline; overflow: hidden; float: left; margin-bottom: 15px; margin-left: -10px}
.thumb div{ float: left; display: block; padding-right: 10px; padding-bottom: 10px; position: relative}
.thumb img {display: block; margin: 0 0 0; padding: 0; position: relative; float: left}
.thumb a {position: relative}
.thumb .tl, .thumb .tr, .thumb .bl, .thumb .br {display: block; overflow: hidden; position: relative}
.thumb .tl {background: url(../images/thumbnail/tl.png) left top no-repeat transparent; padding: 10px 0 0 10px}
.thumb .tr {background: url(../images/thumbnail/tr.png) right top no-repeat transparent; width: 10px; position: absolute; top: 0; right: 0; bottom: 10px}
.thumb .bl {background: url(../images/thumbnail/bl.png) left top no-repeat transparent; height: 10px; position: absolute; bottom: 0; left: 0; right: 10px}
.thumb .br {background: url(../images/thumbnail/br.png) left top no-repeat transparent; height: 10px; width: 10px; position: absolute; bottom: 0; right:0}
.thumb h6 {position: relative; clear: both; float: left; width: 100%;  }
#wrapper .thumb h6{ margin: 10px 0 15px 10px }
.thumb div.caption {background: url(../images/thumbnail/caption.png) left top repeat-x #e4e4e4; padding: 10px; margin: -10px 10px 0; line-height: 1.2em}
.thumb div.caption p {color: #333; margin-bottom: 0}
.thumb div.caption span.title {background: #5f5f5f; color: #f3f3f3; text-transform: uppercase; font-weight: normal; margin-right: 5px; font-size: 0.8em; padding: 0 2px}
.thumb div.caption p.tags, .project .tags {color: #666}
.project .tags a {color: #999}
.project .tags a:hover {color: #666}
#primary_feature .thumb div.caption span.client {font-size: 1.1em}
#primary_feature .thumb div.caption span.name {font-size: 1.1em}
#primary_feature .thumb div.caption p {line-height: 1.4em}
.thumb div.caption span.client {font-weight: bold}
.thumb div.caption span.agency a, .thumb div.caption span.director a, .thumb div.caption span.production_company a {color: #333}
.thumb div.caption span.agency, .thumb div.caption span.director {margin-right: 3px}
.thumb div.caption span.name {font-style: italic}
.thumb div.caption span.name a {color: #333}
 #list_view .thumb {margin-right: 15px; margin-bottom: 0}
#list_view .thumb p {width: 175px; line-height: 1.2em}
#primary_feature {font-size: 0.9em}
#primary_feature .thumb p{ width: 558px}
#sidebar .thumb p {width: 215px}
#secondary_feature .thumb p {line-height: 1.2em; width: 250px}
#content div.left {clear: left; margin: 0 15px 0 0}
#content .article img{ margin-bottom: 15px}
 #grid_view .thumb {border-bottom: solid 1px #d8d8d8; margin-bottom: 20px; margin-right: 10px; position: relative; height: 160px}
#primary_feature .thumb p strong {display: inline}
.project .description {margin-top: 1em}
.project .data p.tags {margin-top: 1em; font-size: 0.8em}
.project div.thumb p.tags {margin: 0}
  #sidebar .friends ul li {display: block;  }
.friends ul li a { }
.friends ul li a:hover {color: #ff5105}
.link_list {padding-bottom: 13px; background:url(../images/side_list_bg_btm.png) left bottom no-repeat transparent; margin-left: -12px}
#sidebar .link_list h6 {background: url(../images/side_list_bg_head.png) left top no-repeat transparent; display: block; width: 256px; overflow: hidden; padding-top: 5px; margin-left: -2px}
#sidebar .link_list h6 a, #sidebar .link_list h6 span {font-size: .9em; margin: 8px 10px 0 14px; display: block; position: relative; float: left; line-height: 1em; padding: 2px 3px}
#sidebar .link_list h6 a:hover{ background-color: #ff5105; color: #FFF}
 #sidebar li h3 {clear: both; background-color: transparent; background-position: left center; background-repeat: no-repeat; display: block; height: 30px; overflow: hidden; text-indent: -999em}
#sidebar div.contact {margin: 1em 0; line-height: 1.3em}
#sidebar div.contact h6 {color: #666; font-weight: normal}
#sidebar div.contact strong {font-size: 0.9em}
#sidebar div.contact p {font-size: 0.9em; line-height: 1em}
#sidebar div.data {clear: both}
#sidebar div.thumb {margin: 0 0 5px 0}
#sidebar li.about .description {font-size: 0.9em; line-height: 1.4em}
#sidebar div.news_article {margin-bottom: 1.5em}
#sidebar div.news_article h4 {font-size: 1em}
#sidebar div.news_article p.categories {margin-bottom: 0}
#list_view .news_article .thumb, #list_view .news_article .data, #list_view .project .thumb, #list_view .project .data {float: left}
#list_view .news_article .thumb, #list_view .project .thumb {width: 215px;  }
#list_view .news_article .data, #list_view .project .data {width: 340px; margin-top: 5px}
#sidebar li.featured_projects p {font-size: 0.9em; line-height: 1.2em}
 .head_about {background-image: url(../images/headers/about.png)}
.head_browseprojects {background-image: url(../images/headers/browseprojects.png)}
.head_browsenews {background-image: url(../images/headers/browsenews.png)}
.head_browseblog {background-image: url(../images/headers/browseblog.png)}
.head_categories {background-image: url(../images/headers/categories.png)}
.head_featured {background-image: url(../images/headers/featured.png)}
.head_friends {background-image: url(../images/headers/friends.png)}
.head_news {background-image: url(../images/headers/news.png)}
.head_showreel {background-image: url(../images/headers/showreel.png)}
.head_tags {background-image: url(../images/headers/tags.png)}
.side_contact strong, .side_contact span {display: block}
 #header form {margin: 3px -15px 0 5px}
#search_input {background: url(../images/search_bg.png) left center no-repeat transparent; display: block; float: left; height: 26px; line-height: 26px; padding: 0; width: 161px}
#search_input input {background-color: transparent; border-style: none; display: block; font-size: 11px; height: 26px; outline: none; padding: 6px 13px 0; width: 138px}
#search_button {float: left; margin: 6px 0 0 3px; outline: none}
#header form p {display: inline; margin: 0}
#header #login form p {clear: both; display: block; overflow: hidden; padding-bottom: 1em}
#header form label {display: block; float: left; font-size: .8em; padding-right: 5px; text-align: right; width: 80px}
#session {position: absolute; right: 20px; top: 10px; font-size: 0.8em}
#session a {font-weight: bold}
#login form p span {background: url(../images/navigation/login_input_bg.jpg) left top no-repeat transparent; display: block; float: left; height: 29px; width: 163px}
#login form p span input {background-color: transparent; border: none;   margin: 0; outline: none; padding: 7px 7px 0; width: 150px}
#login form p label {line-height: 29px}
#login .button{ float: right; margin:0 50px 15px 0}
 #pop {background: url(../images/pop_bg.jpg) left top repeat-x #cbcbcb}
#pop #wrapper {background-color: transparent; background-image: none; padding-top: 60px; width: 500px}
#pop p, #pop #wrapper h4 {color: #333; margin: 0; padding: 0}
#pop #wrapper h4 {padding-top: 15px}
#pop em a {padding: 0 3px}
#pop em a:hover {background-color: #ff5105; color: #FFF}
 .thumb_play_overlay {background: url(../images/video_thumb_play_btn.png) center no-repeat transparent; position: absolute; top: 0; left: 0; padding: 0}
#thumb_overlay {background: url(../images/video_thumb_overlay.png) left top repeat transparent; display: none; height: 70px; left: 0px; position: absolute; top: -70px; width: 70px; cursor: pointer}
#thumb_overlay.play span {background: url(../images/video_thumb_btn.png) center no-repeat transparent; display: block; height: 100%}
 .four04{ background: url(../images/404.jpg) center top no-repeat transparent; height: 400px; width: 980px; margin: -30px}
.four04 p{ padding: 240px 90px 0 90px; font-size: 1.1em}
.four04 p a{ display: block}
 .clear {clear: both}
.left {float: left}
.right {float: right}
.hide {display: none}
#wrapper .last {margin-right: 0}
.replace {overflow: hidden; text-indent: -999em}
 .clearfix:after {clear: both; content: "."; display: block; height: 0; line-height: 0; visibility: hidden}
.clearfix {display: inline-block}
html[xmlns] .clearfix {display: block}
* html .clearfix {height: 1%}
a.medium, img.medium {float: left; margin: 0 1em 1em 0;}
a.medium img.medium {float: none; margin: 0;}
form {margin-top: 1em}
form div.text_field {margin-bottom: 1em}
p.empty {}
div.pagination {text-align: center}
#container .article p.categories {margin: 1em 0 0 0}
#primary_feature .project, #container .article{ width: 578px}
#container .article h4 {margin-top: 0}
.badge {float: right; margin-left: 3px}
.project_index #list_view li {background: none; border-top: solid 1px #d8d8d8}
.project_index #list_view {background: transparent url(../images/list_section_bg.jpg) no-repeat scroll 0 -1px}
   *{padding: 0; margin: 0;}
   #TB_closeWindowButton{ background: url(../images/overlay_close.gif) left top no-repeat transparent; display: block; width: 89px; height: 29px; position: absolute; left: 5px; top: 0; overflow: hidden; cursor: pointer}
#TB_closeWindowButton span{ display: none}
#TB_window {font: 12px Arial, Helvetica, sans-serif; color: #333333}
#TB_secondLine {font: 10px Arial, Helvetica, sans-serif; color:#666666}
#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}
   #TB_overlay {position: fixed; z-index:100; top: 0px; left: 0px; height:100%; width:100%; background: url(../images/overlay_bg.png) left top repeat transparent}
.TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}
.TB_overlayBG {background-color:#000; filter:alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75}
* html #TB_overlay { position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px')}
#TB_window {position: fixed; z-index: 102; color:#000000; display:none; text-align:left; top:50%; left:50%}
* html #TB_window { position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px')}
#TB_window img#TB_Image {display:block; margin: 15px 0 0 15px}
#TB_caption{ height:25px; padding:7px 30px 10px 25px; float:left}
#TB_closeWindow{ height:25px; padding:11px 25px 10px 0; float:right}
#TB_closeAjaxWindow{ padding:7px 10px 5px 0; margin-bottom:1px; text-align:right; float:right}
#TB_ajaxWindowTitle{ float:left; padding:7px 0 5px 10px}
#TB_title{ background-color:transparent; height:27px; margin-bottom: -30px}
#TB_ajaxContent{ clear:both; padding:2px 15px 15px 15px; overflow:auto; text-align:left; line-height:1.4em}
#TB_ajaxContent.TB_modal{ padding:15px}
#TB_ajaxContent p{ padding:5px 0px 5px 0px}
#TB_load{ position: fixed; display:none; height:13px; width:208px; z-index:103; top: 50%; left: 50%; margin: -6px 0 0 -104px;  }
* html #TB_load { position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px')}
#TB_HideSelect{ z-index:99; position:fixed; top: 0; left: 0; background-color:#fff; border:none; filter:alpha(opacity=0); -moz-opacity: 0; opacity: 0; height:100%; width:100%}
* html #TB_HideSelect { position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px')}
#TB_iframeContent{ clear:both; border:none;    }