/* ------------- UNIVERSAL ------------- */

body {
	height:100%; 
	font-family: "Gotham-Book", arial, verdana, sans-serif;
	background:#dbdcdd;
	color:#636466;
	font-size:16px;
	line-height:22px;
}

a {
    color:#636466;
}
a:hover {
    text-decoration:none;
}
em {
    font-style:normal;
    color:#c3242e;
}
em.plain {
	font-style:italic;
	color:#636466;
}
strong {
    color:#c3242e;
    font-weight:bold;
}

h2 {
    font-size:25px;
    text-transform:uppercase;
    font-weight:bold;
    letter-spacing:0.8px;
    padding:0px 0px 20px 0px;
}

h3 {
    color:#c3242e;
    font-weight:bold;
    padding:0px 0px 10px 0px;
}

p {
    padding:0px 0px 20px 0px;
}

ul, ol {
    padding-bottom:20px;
}
ul li {
    list-style:disc;
    margin-left:30px;
}
ol li {
    list-style:decimal;
    margin-left:35px;
}

#container {
    width:960px;
    margin:20px auto 20px auto;
    background: #fff url('../images/bg.gif') repeat-x bottom left;
    
}

#speech-bubble {
  background: url('../images/speech-bubble-ani.gif') no-repeat;
  font-size:12px;
  line-height:20px;
  color:#fff;
  width:156px;
  height:90px;
  padding:16px 0px 0px 0px;
  text-align:center;
  display:block;
  margin-top:0px;
}

#space-bubble {
  background-image: url('../images/speech-bubble.gif');
  background: no-repeat;
  font-size:12px;
  line-height:20px;
  color:#fff;
  width:156px;
  height:90px;
  padding:16px 0px 0px 0px;
  text-align:center;
  display:block;
  margin-top:0px;
}

#speech-bubble a {
  color:#fff;
  text-decoration:none;

}

#speech-bubble a:hover {
  text-decoration:underline;
}

/* ------------- HEADER ------------- */

#hd {
    padding:24px 0px 0px 27px;
    float:left;
    width:102px;
}

#hd h1 a {
    background: url('../images/logo-youxd.gif') no-repeat scroll top left;
    width: 59px;
    height: 85px;
    display:block;
    text-indent:-1000px;
    overflow:hidden;
    margin-bottom:48px;
}
#hd .nav {
    height:455px;
    margin:0px 0px -100px 0px;
    padding:0px;
}
#hd .nav li {
    margin:0px;
    padding:0px;
    list-style:none;
}
#hd .nav li a {
    width:90px;
    height:20px;
    background: url('../images/sprite-nav.gif') no-repeat;
    display:block;
    text-indent:-1000px;
    overflow:hidden;
}

#hd .nav li#about a { background-position:0px 0px; }
#hd .nav li#approach a { background-position:0px -20px; }
#hd .nav li#people a { background-position:0px -40px; }
#hd .nav li#ideas a { background-position:0px -60px; }
#hd .nav li#contact a { background-position:0px -80px; }
#hd .nav li#work a { background-position:0px -100px; }

#hd .nav li#about a:hover { background-position:-100px 0px; }
#hd .nav li#approach a:hover { background-position:-100px -20px; }
#hd .nav li#people a:hover { background-position:-100px -40px; }
#hd .nav li#ideas a:hover { background-position:-100px -60px; }
#hd .nav li#contact a:hover { background-position:-100px -80px; }
#hd .nav li#work a:hover { background-position:-100px -100px; }

#hd .nav li#about a.active, #hd .nav li#about a.active:hover { background-position:-200px 0px; }
#hd .nav li#approach a.active, #hd .nav li#approach a.active:hover { background-position:-200px -20px; }
#hd .nav li#people a.active, #hd .nav li#people a.active:hover { background-position:-200px -40px; }
#hd .nav li#ideas a.active, #hd .nav li#ideas a.active:hover { background-position:-200px -60px; }
#hd .nav li#contact a.active, #hd .nav li#contact a.active:hover { background-position:-200px -80px; }
#hd .nav li#work a.active, #hd .nav li#work a.active:hover { background-position:-200px -100px; }

/* ------------- CONTENT ------------- */

#content {
    width:672px;
    padding:155px 10px 0px 130px;
    float:left;
}
#content-small {
    width:572px;
    padding:155px 10px 0px 0px;
    float:left;
}

img.welcome {
    margin:160px 0px 0px 75px;
}

#sub-content {
    margin:153px 0px 0px 0px;
    width:230px;
    float:left;
}
#sub-content ul li {
    font-size:12px;
    padding:0px 20px 5px 0px;
    margin:0px;
    list-style:none;
    line-height:18px;
}
#sub-content ul li a {
    text-decoration:none;
    color:#636466;
}
#sub-content ul li a:hover {
    border-bottom:solid 1px #ccc;
}
#sub-content ul li a.active, #sub-content ul li.active {
    font-weight:bold;
}

h2.heading-about {
    background: url('../images/text-experiencedesign.gif') no-repeat;
    width: 532px;
    height: 20px;
    display:block;
    text-indent:-1000px;
    overflow:hidden;
}

/* -- Video -- */

.video-loader {
    float:left;
    margin:397px 0px 0px -259px;
    display:block;
    position:absolute;
    width:960px;
    height:120px;
    overflow:hidden;
}
.video-player {
    position:absolute;
}

/* -- Method -- */

.method-diagram {
    margin-top:-22px;
    width: 634px;
    height: 360px;
    overflow:hidden;
    display:block;
    background: url('../images/sprite-method.gif') no-repeat 0px 0px;
}
.method-diagram:hover {
    background-position:0px -380px;
}
.method-diagram ul {
    padding:0px;
    margin:0px;
}
.method-diagram ul li {
    margin:0px;
    padding:0px;
    list-style:none;
    float:left;
}
.method-diagram ul li a {
    display:block;
    text-indent:-1000px;
    overflow:hidden;
    width:95px;
    height:182px;
    margin-top:170px;
}
.method-diagram ul li a.discover { margin-left:73px; }
.method-diagram ul li a.insight { margin-left:42px; }
.method-diagram ul li a.creation { margin-left:40px; }
.method-diagram ul li a.delivery { margin-left:41px; }

.method-diagram ul li a.discover:hover { background: red url('../images/sprite-method.gif') no-repeat -73px -930px; }
.method-diagram ul li a.insight:hover { background: red url('../images/sprite-method.gif') no-repeat -210px -930px; }
.method-diagram ul li a.creation:hover { background: red url('../images/sprite-method.gif') no-repeat -345px -930px; }
.method-diagram ul li a.delivery:hover { background: red url('../images/sprite-method.gif') no-repeat -481px -930px; }

/* -- People -- */

div.people-diagram {
	margin:-105px 0px 0px -20px;
}

#person-1,#person-2,#person-3,#person-4,#person-5,#person-6,#person-7,#person-8,#person-9,#person-10,#person-11,#person-12,#person-13 {
    
}
ul#people-content {
    padding:0px;
    margin:0px;
}
ul#people-content li {
    list-style:none;
    padding:0px;
    margin:0px;
    display:none;
}

ul#people-content li.active {
    display:block;
}

ul#people-content li .people-contact {
    margin:0px;
    padding:0px;
}
ul#people-content li .people-contact li {
    text-transform:uppercase;
    float:left;
    font-size:12px;
    padding:0px 18px 0px 0px;
    margin:0px;
    letter-spacing:0.3px;
    list-style:none;
    display:block;
}
ul#people-content li .people-contact li a {
    text-decoration:none;
}
ul#people-content li .people-contact li a:hover {
    border-bottom:solid 1px #ccc;
}

/* -- Contact -- */

.contact-details, .contact-details-first {
    float:left;
    width:231px;
    font-size:12px;
    text-transform:uppercase;
    line-height:17px;
	letter-spacing:0.3px;
}
.contact-details strong {
    color:#636466;
}
.contact-details a {
     color:#636466;
     text-decoration:none;
}
.contact-details p {
    padding-bottom:30px;
}
.contact-details p.last {
    padding-bottom:0px;
}
.contact-details a:hover {
    text-decoration:underline;
}
.contact-map {
    width:210px;
    float:right;
}
.contact-map a {
    font-size:11px;
    text-transform:uppercase;
    color:#636466;
    text-decoration:none;
}
.contact-map a:hover {
    text-decoration:underline;
}

/* -- Ideas -- */

h2.ideas {
    background: url('../images/logo-ideas.gif') no-repeat;
    text-indent:-1000px;
    overflow:hidden;
    margin:-120px 0px 0px 0px;
    float:right;
}
h2.ideas a {
    width: 110px;
    height: 96px;
    display:block;
}

.ideas-post, .ideas-post-first, .ideas-post-single {
    background: url('../images/bg-hr.gif') repeat-x top left;
    padding-top:20px;
    font-size:14px;
}
.ideas-post-first {
	margin-top:10px;
}
.ideas-post-single {
	background:none;
	padding-top:0px;
}
.ideas-post h3, .ideas-post-first h3, .ideas-post-single h3  {
    text-transform:uppercase;
    color:#636467;
    font-size:18px;
	padding-right:90px;
	font-weight:bold;
	line-height:22px;
}
.ideas-post h3 a, .ideas-post-first h3 a, .ideas-post-single h3 a {
    text-decoration:none;
    color:#636467;
}
.ideas-post h3 a:hover, .ideas-post-first h3 a:hover, .ideas-post-single h3 a:hover {
    border-bottom:solid 1px #ccc;
}
.ideas-post h3 .date, .ideas-post-first h3 .date, .ideas-post-single h3 .date {
    float:right;
    font-size:15px;
    color:#c3242e;
	margin-right:-92px;
}
.ideas-post h3 .category, .ideas-post-first h3 .category, .ideas-post-single h3 .category {
    float:right;
    font-size:14px;
    color:#c3242e;
	margin-right:-86px;
}
.ideas-post img, .ideas-post-first img, .ideas-post-single img {
    margin:0px 10px 10px 0px;
}

.pagination {
    background: url('../images/bg-hr.gif') repeat-x top left;
    padding-top:20px;
    font-size:12px;
	color:#ccc;
	text-align:right;
	height:20px;
}
.pagination .next {
	padding:0px 0px 0px 5px;
}
.pagination .prev {
	padding:0px 5px 0px 0px;
}

/* -- Work -- */

h2.work {
    margin-left: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-top: -120px;
    background: url('../images/logo-work.gif') no-repeat;
    text-indent:-1000px;
    overflow:hidden;
    float:right;
}
h2.work a {
    width: 110px;
    height: 96px;
    display:block;
}


/* ------------- FOOTER ------------- */

#ft {
    clear:left;
    padding:20px 20px 0px 29px;
    height:146px;
    margin-top:0px;
}

#ft a.datamail {
    background: url('../images/text-datamail2.gif') no-repeat;
    width: 180px;
    height: 13px;
    display:block;
    text-indent:-1000px;
    overflow:hidden;
    border-bottom:solid 1px #fff;
}
#ft a.datamail:hover {
    border-bottom:solid 1px #ccc;
}