/* REFERENCE

PINK #EC008C (DEFAULT LINK)
GRAY #959595 (FOOTER)
LIGHT GRAY #D7D7D7 (FOOTER)

WORK
column width: 62px
margin space: 16px
outer margin: 10px

*/
/* {{{ custom fonts */
@font-face {
    font-family: 'Din';
    src: url("/css/fonts/din-light-webfont.eot");
    src: local('☺'),
        url("/css/fonts/din-light-webfont.svg") format('svg'),
        url("/css/fonts/din-light-webfont.ttf") format('truetype');
}
@font-face {
    font-family: 'Din';
    src: url("/css/fonts/din-medium-webfont.eot");
    src: local('☺'),
        url("/css/fonts/din-medium-webfont.svg") format('svg'),
        url("/css/fonts/din-medium-webfont.ttf") format('truetype');
    font-weight: bold;
}
/* }}} */
/*{{{RESET*/
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;
}
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: #000;
	background: #edecec;
}
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: "" "";
}
/*}}}*/
/* {{{ elements */
body { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 62.5%; font-style: normal; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }
h1 { font-size: 2.8em; font-weight: bold; line-height: 110%; }
h2 { font-family: Din, Arial, Helvetica, Verdana, sans-serif; font-size: 2.2em; line-height: 110%; margin-bottom: 10px; }
h3 { font-size: 1.3em; font-weight: bold; line-height: 110%; margin-bottom: 4px; }
h4 { font-size: 1.2em; font-weight: bold; line-height: 110%; margin-bottom: 4px; }
p { font-size: 1.2em; line-height: 140%; margin-bottom: 12px; }
li { line-height: 120%; }
pre {
    white-space: pre-wrap; /* css-3 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}
a { color: #EC008C; text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
a.gray { color: #959595; }
a.gray:hover { color: #EC008C; }
a.black { color: #000; }
a.black:hover { color: #EC008C; }

.divider { color: #D7D7D7; }
.hidden { display: none; }
.nowrap { white-space: nowrap; }
hr.hidden { clear: both; }

#main:after,
.cleared:after { content: "."; clear: both; display: block; height: 0; margin: 0; visibility: hidden; }

/* }}} */
/* {{{ layout */
#container { margin: 0px auto; padding: 0px 15px; width: 920px; background: #FFFFFF; }
#header { height: 70px; margin-bottom: 15px; }
#main { margin-bottom: 25px; }
#content { float: left; width: 530px; }
#sidebar { float: right; width: 296px; }

/* }}} */
/* {{{ header */
#header { background: #4b4242; }
#header a { color: #FFF; }
#header .logo { float: left; margin-left: 23px; }

/* }}} */
/* {{{ nav */
#main-nav { float: right; margin: 18px; }
#main-nav a { float: left; }
#main-nav a.work { background: transparent url(/images/nav/work.png) scroll no-repeat 0 0; height: 27px; width: 55px; }
#main-nav a.work:hover { background: transparent url(/images/nav/work.png) scroll no-repeat 0 -28px; height: 27px; width: 55px; }
#main-nav a.blog { background: transparent url(/images/nav/blog.png) scroll no-repeat 0 0; height: 27px; width: 49px; }
#main-nav a.blog:hover { background: transparent url(/images/nav/blog.png) scroll no-repeat 0 -28px; height: 27px; width: 49px; }
#main-nav a.about { background: transparent url(/images/nav/about.png) scroll no-repeat 0 0; height: 27px; width: 59px; }
#main-nav a.about:hover { background: transparent url(/images/nav/about.png) scroll no-repeat 0 -28px; height: 27px; width: 59px; }
#main-nav a.contact { background: transparent url(/images/nav/contact.png) scroll no-repeat 0 0; height: 27px; width: 72px; }
#main-nav a.contact:hover { background: transparent url(/images/nav/contact.png) scroll no-repeat 0 -28px; height: 27px; width: 72px; }

/* }}} */
/* {{{ main */
#main li { font-size: 1.2em; }
#main li p { font-size: 1.0em; line-height: 140% }
.page-header { position: relative; height: 25px; margin: 30px 0px 25px; }
.page-header .misc { bottom: 0px; position: absolute; right: 0px; }

/* }}} */
/* {{{ home */
#slideshow { position: relative; height: 280px; margin-bottom: 15px; }
#slideshow .slide { position: absolute; margin-bottom: 15px; }
#home h3 { font-family: "Din", Arial, Helvetica, Verdana, sans-serif; }
#home .features li { float: left; margin-right: 16px; overflow: hidden; width: 218px; }
#home li.last { margin-right: 0px; }
#home .features .image { margin-bottom: 10px; height: 163px; width: 218px; }
#home .features .image a { position: relative; display: block; height: 163px; width: 218px; }
#home .features .overlay { position: absolute; top: 0; left: 0; height: 147px; width: 202px; border: 8px solid #EC008C; }

/* }}} */
/* {{{ work */
#work li { font-size: 1.1em; }
#work .page-header { z-index: 25; }
#work .misc { z-index: 50; }
#work .misc div { background-color: #EBEBEB; cursor: pointer; float: left; height: 24px; position: relative; width: 140px; z-index: 100; }
#work .misc p { left: 10px; position: absolute; top: 5px; font-size: 1.1em; }
#work .misc ul { background-color: #EBEBEB; left: 0px; min-width: 140px; padding-bottom: 5px; position: absolute; top: 20px; white-space: nowrap; z-index: 1000; }
#work .misc li { cursor: pointer; padding: 2px 10px 0px; }
#work .misc .selected { color: #EC008C; }
#work .misc .hover { color: #EC008C; }
#work .misc hr { border: 0px; border-top: 1px solid #D7D7D7; height: 1px; }
#work .work-index p { line-height: 120%; }
#work .work-index li { float: left; height: 140px; margin: 0 16px 5px 0px; overflow: hidden; position: relative; width: 140px; }
#work .work-index li.last { margin-right: 0px; }
#work .work-index li div { position: absolute; }
#work .overlay { background: transparent url(/images/work-feature-overlay.png) scroll no-repeat 0 0; left: 0px; height: 105px; position: absolute; top: 0px; width: 140px; }
#work a { color: #000; }
#work a:hover { color: #EC008C; text-decoration: none; }

/* }}} */
/* {{{ work detail */
#work-detail { margin-bottom: 40px; }
#work-detail .gallery { float: left; width: 528px; }
#work-detail .gallery-nav { color: #959595; height: 25px; text-transform: uppercase; position: relative; }
#work-detail .details { float: right; width: 374px; }
#work-detail p { margin-bottom: 18px; }
#work-detail ul { list-style-position: inside; list-style-type: disc; margin: 0px 0px 18px 5px; }
#work-detail .related-projects ul { list-style-type: none; margin: 0px; }
#work-detail .related-projects li { float: left; margin-right: 16px; width: 62px; }
#work-detail .related-projects h4 { height: 25px; }
#work-detail .related-projects img { width: 62px; }
#work-detail .related-projects li.last { margin-right: 0px; }
#work-detail .popup { background-color: #EC008C; color: #FFF; cursor: pointer; font-size: 0.9em; height: 13px; left: 6px; padding: 2px 5px; position: absolute; top: 6px ; white-space: nowrap; z-index: 1000; }
#work-detail .images { border: 1px solid #CCC; border-top: 0px; position: relative; width: 100%; }
#work-detail .divider { font-size: 1.2em; }

/* }}} */
/* {{{ page */
#page .content { width: 452px; }
#page .content-5 { width: 374px; }
#page .left { float: left; }
#page .right { float: right; }
#page ul { margin-bottom: 14px; }
#page li { margin-bottom: 4px; }
#page .body { margin-bottom: 30px; }
#page .services ul { list-style-position: inside; list-style-type: disc; }
#page .clients ul { margin: 0px 9px 30px 0px; width: 178px; } /* add up to 187px */
#page .agencies ul { margin-right: 9px; width: 178px; } /* add up to 187px */

/* contact form */
.contact-form { width: 343px; margin-bottom: 40px; }
.contact-form .text,
.contact-form .textarea { background-color: #EBEBEB; border: 0px; color: #757575; font-size: 1.1em; padding: 6px 0px 5px 4px; vertical-align: middle; width: 340px; }
.contact-form .textarea { height: 70px; }
.contact-form .field { margin-bottom: 10px; }
.contact-form .label { font-size: 1.2em; line-height: 140%; }
.contact-form .fields_submit_image { float: right; }

/* }}} */
/* {{{ 404 */
#page-404 .content { width: 452px; }
#page-404 .content-5 { width: 374px; }
#page-404 .left { float: left; }
#page-404 .right { float: right; }
#page-404 ul { list-style-position: outside; list-style-type: disc; margin: 0px 0px 14px 15px; }
#page-404 li { margin: 4px 0px; }

/* }}} */
/* {{{ footer */
#footer { border-top: 1px solid #776969; clear: both; color: #959595; font-size: 1.1em; height: 35px; margin-bottom: 25px; padding: 10px 0px; }
#footer a:hover { color: #EC008C; }
#footer .left { float: left; margin-top: 5px; }
#footer .right { float: right; }
#footer .divider { font-size: 1.2em; }
#footer .left .twitter { position: absolute; right: -22px; top: -3px; }
#footer .left .facebook { position: absolute; right: -45px; top: -3px; }
#footer li { float: left; margin-right: 5px; position: relative; }
#footer li.last { margin-right: 0px; }
#footer input { background-color: #EBEBEB; border: 0px; color: #959595; font-size: 1em; margin-right: 10px; padding: 5px 0px 5px 4px; vertical-align: middle; width: 215px; }

/* }}} */
/* {{{ blog */
#blog small { color: #959595; font-size: 1.2em; }
#blog .entry { font-size: 12px; padding-top: 10px; }
#blog .entry p { font-size: 1em; }
#blog .entry pre { background-color: #EBEBEB; }
#blog .entry ul { list-style-type: disc; margin: 0px 0px 15px 30px; }
#blog .entry li { font-size: 1em; margin-bottom: 5px; }
#blog .syntaxhighlighter code { font-size: 1.2em; }
#blog .divider { padding: 20px 0px; }
#blog .divider hr { border: 0px; border-top: 1px solid #D7D7D7; height: 1px; margin: 0px; }
#blog .post h1 { font-family: Din, Arial, Helvetica, Verdana, sans-serif; font-size: 2.2em; font-weight: normal; margin-bottom: 10px; }
#blog .postmetadata { color: #959595; font-size: 12px; padding-top: 12px; }
#blog .postmetadata a { color: #959595; }
#blog .postmetadata a:hover { color: #EC008C; }
#blog .commentlist { font-size: 1.2em; }
#blog .commentlist p { font-size: 1em; }
#blog .commentlist ul { list-style-type: none; }
#blog .commentlist li { font-size: 1em; }
#blog .commentlist .comment-body { padding: 5px; }
#blog .commentlist .children { margin-left: 30px; }
#blog .commentlist .divider hr { border-top: 1px solid #D7D7D7; height: 1px; }
#blog .alignright { float: right; }
#blog .alignleft { float: left; }
#blog .aligncenter { margin: 0px auto; }
#blog .navigation { display: block; font-size: 1.2em; margin: 10px 0px 40px; }
#blog .social-links a { margin-right: 5px; }
#blog .social-links a img { padding-bottom: 3px; }
#blog .wp-caption-text { color: #959595; font-style: italic; margin: 2px 0 10px; text-align: left; }
#blog h5 { color: #959595; font-style: italic; text-align: left; }
#blog h5 a { color: #959595; font-style: italic; text-align: left; }


#respond h3 { padding-top: 14px; }
#comments { border-top: 1px solid #000; margin-bottom: 14px; padding-top: 14px; }
#commentform small { color: #000; font-size: 1.0em; }
#searchform { height: 24px; }
#s { background-color: #EBEBEB; border: 0px; color: #959595; font-size: 1.1em; padding: 6px 0px 5px 4px; vertical-align: middle; width: 215px; }
#searchsubmit { float: right; }

#sidebar abbr { color: #959595; }
#sidebar h2 { font-size: 1.4em; font-weight: bold; margin-bottom: 3px; }
#sidebar li { font-size: 1em; }
#sidebar ul p { font-size: 1.2em; }
#sidebar ul li { line-height: 140%; margin-bottom: 25px; }
#sidebar li ul li { font-size: 1.2em; margin-bottom: 0px; }
#sidebar img { margin: 0px 10px 3px 0px; vertical-align: middle; }
#sidebar .gray { font-size: 0.9em; }
#sidebar .recent-posts, #sidebar .rss { clear: both; }
#sidebar .topics { float: left; width: 148px; }
#sidebar .archives { float: right; width: 148px; }
#sidebar .twitter-item { margin-bottom: 15px; }
#sidebar .twitter-item a.time { color: #959595; font-style: italic; }

/* }}} */