/* -----------------------------------------------
IMPORTS
----------------------------------------------- */
@import url("base.css");

/* -----------------------------------------------
STYLES
----------------------------------------------- */
html { height: 100%; }
body { color: #fff; background: #191919 url(../img/structure/body.png) repeat-x; font-family: Helvetica, Arial, sans-serif; height: 100%; font-size: 10px; }
h1, .h1 { font-size: 3.5em; background: url(../img/structure/h1.png) no-repeat left center; padding: 0 0 0 15px; line-height: 1em; margin: 0 0 35px -15px; }
h2, .h2 { font-size: 1.6em; margin: 0 0 15px 0; font-weight: bold; }
p { font-size: 1.3em; line-height: 1.2em; margin: 0 0 20px 0; }
p.intro { font-size: 2.4em; margin: 0 0 35px -4px; white-space:nowrap;}
p.intro strong { clear: left; float: left; background: #a10909; display: block; padding: 2px 4px; margin: 0 0 1px 0;white-space:nowrap; }
p.intro strong a { color: #fff; }
a { text-decoration: none; color: #d71920; }
/* -----------------------------------------------
STRUCTURE
----------------------------------------------- */

/* Nav Primary
--------------------------- */
div#NavPrimary { position: absolute; top: 600px; width: 100%; background: url(../img/structure/navPrimary.png) center top repeat-x; height: 60px; left: 0; z-index: 10; }
div#NavPrimary div#NavPrimaryWrapper { width: 1024px; height: 60px; margin: 0 auto; position: relative; }
div#NavPrimary strong { width: 156px; height: 25px; position: absolute; background: url(../img/structure/navPrimary.png) 0 -60px repeat-x; top: 16px; left: 59px; }
div#NavPrimary strong a { display: block; height: 25px; }
div#NavPrimary strong span { display: none; }
div#NavPrimary ul { padding: 19px 73px 0 255px; }
div#NavPrimary li { float: left; background: url(../img/structure/navPrimary.png) right -60px no-repeat; padding: 4px 12px 0 10px; }
div#NavPrimary li a { display: block; height: 18px; background: url(../img/structure/navPrimary.png) 0 -85px no-repeat; cursor: pointer; }
div#NavPrimary li span { display: none; }
div#NavPrimary li.about a { width: 44px; }
div#NavPrimary li.about.selected a, div#NavPrimary li.about a:hover { background-position: 0 -103px; }
div#NavPrimary li.work a { width: 37px; background-position: -44px -85px; }
div#NavPrimary li.work.selected a, div#NavPrimary li.work a:hover { background-position: -44px -103px; }
div#NavPrimary li.team a { width: 39px; background-position: -81px -85px; }
div#NavPrimary li.team.selected a, div#NavPrimary li.team a:hover { background-position: -81px -103px; }
div#NavPrimary li.careers a { width: 56px; background-position: -145px -85px; }
div#NavPrimary li.careers.selected a, div#NavPrimary li.careers a:hover { background-position: -145px -103px; }
div#NavPrimary li.contact a { width: 56px; background-position: -201px -85px; }
div#NavPrimary li.contact.selected a, div#NavPrimary li.contact a:hover { background-position: -201px -103px; }
div#NavPrimary li.blog a { width: 33px; background-position: -257px -85px; }
div#NavPrimary li.blog.selected a, div#NavPrimary li.blog a:hover { background-position: -257px -103px; }
div#NavPrimary li.client { float: right; }
div#NavPrimary li.client a { width: 105px; background-position: -290px -85px; }
div#NavPrimary li.client a.selected, div#NavPrimary li.client a:hover { background-position: -290px -103px; }
div#NavPrimary li.blog, div#NavPrimary li.client { background: none; padding-right: 0; }

/* Main
--------------------------- */
div#Main { background: url(../img/structure/main.png) no-repeat; width: 1022px; height: 694px; margin: 0 auto; padding: 11px 11px 0 11px; }
div#MainWrapper { background: #191919 no-repeat; height: 700px; padding: 23px 59px 0 59px; }
/* Visual Tweaks */
body.loading div#MainWrapper { display: none; }

/* Spinner
--------------------------- */
div#Spinner { display: none; background: #191919; padding: 5px; position: absolute; top: 300px; left: 50%; margin-left: -20px; z-index: 9999; }
body.loading div#Spinner { display: block; }

/* -----------------------------------------------
COMPONENTS
----------------------------------------------- */

/* Carousel
--------------------------- */
div.carousel { position: relative; }
div.carousel a.prev, div.carousel a.next { background: url(../img/structure/carousel.png); width: 19px; height: 28px; position: absolute; cursor: pointer; }
div.carousel a.prev { left: -30px; top: 90px; }
div.carousel a.next { background-position: 19px 0; right: -25px; top: 90px; }
div.carousel a.disabled { visibility: hidden !important; }
div.carousel div.navi { background: url(../img/structure/block_black_70.png); position: absolute; left: 45%; bottom: 0; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
div.carousel div.navi div.wrapper { padding: 5px 2px; }
div.carousel div.navi a { background: url(../img/structure/carousel.png) 0 -48px; float: left; width: 13px; height: 13px; cursor: pointer; margin: 0 3px; }
div.carousel div.navi a.active { background-position: -13px -48px; }
div.carousel div.scrollable { position: relative; overflow: hidden; width: 900px; height: 310px; } 
div.carousel div.scrollable div.items { width: 20000em; position: absolute; } 
div.carousel div.scrollable div.item { float: left; width: 440px; margin: 0 20px 0 0; }

/* Overlay
--------------------------- */
div#Overlay { display: none; }
div.overlay { position: absolute; width: 100%; height: 100%; z-index: 30; top: 0; left: 0; background: #191919 url(../img/structure/body.png) repeat-x; }
div.overlay div.title { height: 45px; background: url(../img/structure/overlay.png) repeat-x; position: absolute; left: 0; top: 0; width: 100%; }
div.overlay div.title div.wrapper { width: 1022px; margin: 0 auto; padding-top: 12px; }
div.overlay div.title h2 { font-size: 1.6em; background: url(../img/structure/h1.png) no-repeat left center; padding: 0 0 0 15px; line-height: 1em; margin: 0 0 0 -15px; float: left; }
div.overlay div.title h2 a { color: #fff; border-left: 1px solid #3f3f3f; margin-left: 10px; padding-left: 10px; }
div.overlay div.title div.close { float: right;  }
div.overlay div.title div.close a { background: url(../img/structure/overlay.png) right -45px no-repeat; padding: 0 20px 0 0; color: #b9b9b9; font-size: 1.6em; }
div.overlay div.details { background: url(../img/structure/overlay_details.png) center bottom no-repeat; padding-bottom: 12px; position: absolute; top: 41px; left: 0; width: 100%; z-index: 30; }
div.overlay div.details div.wrapper { width: 900px; margin: 0 auto; }
div.overlay div.details ul.info { padding: 15px 0 30px 0; }
div.overlay div.details ul.info li { float: left; text-transform: uppercase; border-left: 1px solid #3f3f3f; margin-left: 10px; padding-left: 10px; }
div.overlay div.details ul.info li.first { margin-left: 0; padding-left: 0; border-left: none; }
div.overlay div.details ul.info li strong { color: #d71920; }
div.overlay div.details div.col { float: left; width: 425px; margin-right: 20px; }
div.overlay div.details p { font-size: 1.2em; }
div.overlay div.content { width: 900px; margin: 0 auto; padding: 85px 0 0 0; }
div.overlay div.content ul.tabs { margin: 0 0 25px 0; }
div.overlay div.content ul.tabs li { float: left; border-left: 1px solid #4b4a4a; padding: 0 5px; }
div.overlay div.content ul.tabs li a { color: #a3a3a3; font-size: 1.4em; text-transform: uppercase; }
div.overlay div.content ul.tabs li a.current { color: #d71920; }
div.overlay div.content ul.tabs li.first { border: none; padding-left: 0; }
body.hasJS div.overlay div.content div.panes div.item { display: none; }
div.overlay div.content div.panes div.item div.col { float: left; width: 425px; margin-right: 20px; }
div.overlay div.content div.panes div.item li { font-size: 1.3em; line-height: 1.2em; margin: 0 0 15px 0; background: url(../img/structure/bullet_red.png) no-repeat 0 4px; padding: 0 0 0 15px; }

/* -----------------------------------------------
PAGES
----------------------------------------------- */

/* Home
--------------------------- */
body.home div#MainWrapper { padding: 0; position: relative; overflow: hidden; }
body.home div#Main div#Intro { display: none; }
body.home div#Main div.details { position: absolute; top: 300px; left: 10px; z-index: 1000; }
body.home div#Main div.details div.title { background: url(../img/structure/block_black_50.png); margin: 0 0 1px 0; float: left;  }
body.home div#Main div.details div.title h2 { margin: 0; padding: 0; font-size: 3.5em; background: url(../img/structure/h1.png) no-repeat 10px center; padding: 3px 10px 3px 25px; }
body.home div#Main div.details div.description { background: url(../img/structure/block_black_50.png); clear: left; margin: 0 0 1px 20px; }
body.home div#Main div.details div.description p { margin: 0; padding: 5px; }
body.home div#Main div.details div.button { float: left; margin: 0 0 0 20px; }
body.home div#Text { width: 1022px; margin: 0 auto; padding: 0 11px 0 0; background: url(../img/structure/home_text.png) no-repeat 50px 3px; position: relative; z-index: 30; }
body.home div#TextWrapper { margin: 0 0 0 60px; width: 440px; }
body.home div#Text p { color: #cfcfcf; font-size: 1.2em; line-height: 1.3em; margin: 0 0 10px 0; }
body.home.hasJS div#Main img.main-image { display: none; }
body.home.hasJS div#Main div.details { margin-left: -500px; }
body.home #Preloader { position: absolute; width: 1px; height: 1px; overflow: hidden; visibility: hidden; }

/* About
--------------------------- */
body.about div#MainWrapper { background-image: url(../img/structure/generic_bck.png); position: relative; }
body.about div.description div.col { float: left; width: 430px; margin: 0 20px 0 0; }
body.about div.description div.col-2 { padding-top: 32px; }
body.about div#Tiga { position: absolute; bottom: 160px; right: 70px; }

/* Work
--------------------------- */
body.projects div.tools { border-bottom: 1px solid #343434; padding: 0 0 5px 0; margin: 0 0 45px 0; }
body.projects div.tools li { float: left; text-transform: uppercase; color: #b9b9b9; border-left: 1px solid #4b4a4a; padding: 0 5px; font-weight: bold; }
body.projects div.tools li.first { border: none; padding-left: 0; }
body.projects div.tools li a { color: #b9b9b9; }
body.projects div.tools li.selected a { color: #d71920; }
body.projects div.tools ul.filters { float: left; }
body.projects div.tools ul.view { float: right; }
body.projects div#Main div.carousel div.scrollable { height: 405px; }
body.projects div.carousel a.prev, body.projects div.carousel a.next { top: 160px; }
/* thumb view */
body.projects div#Main div.carousel-thumb div.scrollable div.item { float: left; width: 205px; margin: 0 10px 0 10px; }
body.projects div#Main div.carousel-thumb div.scrollable div.thumb { margin: 0 0 50px 0; }
body.projects div#Main div.carousel-thumb div.scrollable div.thumb img { margin-left: -5px; }
body.projects div#Main div.carousel-thumb div.scrollable div.thumb a { color: #a3a3a3; font-weight: bold; display: block; padding: 0 5px 5px 5px; }
body.projects div#Main div.carousel-thumb div.scrollable div.thumb a:hover {  background: url(../img/structure/block_black_70.png);}
body.projects div#Main div.carousel-thumb div.scrollable div.thumb a strong { color: #d71920; font-size: 1.3em; display: block; margin: 3px 0; }
/* list view */
body.projects div#Main div.carousel-list div.scrollable li { overflow: hidden; margin: 0 0 1px 0; float: left; width: 100%; }
body.projects div#Main div.carousel-list div.scrollable li a { background: url(../img/structure/block_black_50.png); display: block; padding: 5px 10px 5px 10px; color: #a8a8a8; text-align: right; float: left; width: 420px; }
body.projects div#Main div.carousel-list div.scrollable li a strong { font-size: 1.3em; color: #d71920; float: left; }
body.projects div#Main div.carousel-list div#Preview { position: absolute; width: 102px; height: 55px; }
body.projects div#Main div.carousel-list div.scrollable li a:hover { background: url(../img/structure/block_black_70.png) }
body.projects div#Main div.carousel-list div.scrollable li img { display: none; }
/* overlay */
body.projects div.overlay div.content { width: 1022px; margin: 0 auto; padding: 60px 0 0 0; }
body.projects div.overlay div.scrollable { height: 700px;  width: 1022px; } 
body.projects div.overlay div.item { width: 1022px; height: 700px; margin: 0; text-align: center; }
body.projects div.overlay div.item a.download { position: absolute; left: 50px; bottom: 35px; }
body.projects div.overlay div.carousel a.prev { left: -50px; }
body.projects div.overlay div.carousel a.next { right: -50px; }
body.projects div.overlay div.carousel a.prev, body.projects div.overlay div.carousel a.next { top: 300px; }
body.projects div.overlay div.carousel div.navi { bottom: -50px; }
/* player (video) */
body.projects div.overlay a.player { display:block; width: 720px; height:430px; text-align:center; margin: 0 auto; border:1px solid #999; margin-top: 70px; }
body.projects div.overlay a.player img { border:0px; top: 50%; position: relative; margin-top:-41px; }  
body.projects div.overlay a.player:hover { border:1px solid #000; }

/* People
--------------------------- */
body.people div#MainWrapper { background-image: url(../img/structure/generic_bck.png); }
body.people p.intro { margin-bottom: 35px; }
body.people div.carousel { background: url(../img/structure/block_black_15.png); margin: 0 -30px 0 -30px; position: relative; padding: 30px 30px 0 35px; width: 895px; height: 340px; }
body.people div.carousel div.navi { background: url(../img/structure/block_black_15.png); padding: 2px; bottom: 15px; }
body.people div.carousel div.scrollable { position: relative; }
body.people div.carousel div.scrollable div.item { float: left; width: 160px; margin: 0 20px 0 0; overflow: hidden; }
body.people div.carousel div.scrollable div.item h2 { font-size: 1.4em; border-bottom: 1px solid #bd5353; padding: 5px 0; font-weight: normal; margin: 0 0 4px 0; }
body.people div.carousel div.scrollable div.item h3 { font-size: 1.6em; font-weight: bold; }
body.people div.carousel div.scrollable div.item p { font-size: 1.1em; line-height: 1.5em; }
body.people div.carousel div.scrollable div.item p strong { font-weight: bold; }
body.people div.carousel div.scrollable div.item a { color: #fff; }
body.people div.carousel a.prev { left: 5px; top: 180px; }
body.people div.carousel a.next { right: 5px; top: 180px; }
body.people div.carousel div.scrollable { height: 400px; } 
body.people div#NavPrimary { z-index: 50; }

/* Careers
--------------------------- */
body.careers div#MainWrapper { background-image: url(../img/structure/careers_bck.jpg);  }
body.careers div.intro { width: 450px; }
body.careers div.intro h2 { margin: 0 0 10px 0; }
body.careers div.scrollable div.item li a { background: url(../img/structure/block_black_70.png); display: block; margin: 0 0 1px 0; padding: 10px; font-size: 1.2em; color: #a3a3a3; }
body.careers div.scrollable div.item li a strong { display: block; color: #d71920; font-size: 1.6em; margin-bottom: 2px; }
body.careers div.scrollable div.item li a:hover { background: #000; }
body.careers div#NavPrimary { z-index: 50; }
body.careers div.overlay div.details { padding: 0; height: 12px; }

/* Contact
--------------------------- */
body.contact div#MainWrapper { background-image: url(../img/structure/generic_bck.png); }
body.contact ul.tabs { margin: 0 0 0 -8px; }
body.contact ul.tabs li { float: left; margin-right: 10px; }
body.contact ul.tabs li a { color: #fff; font-size: 1.6em; padding: 8px; display: block; }
body.contact ul.tabs li a strong { font-weight: bold; }
body.contact ul.tabs li.selected a { background: url(../img/structure/block_black_15.png); }
body.contact ul.tabs li.first { border: none; padding-left: 0; }
body.contact div.pane { background: url(../img/structure/block_black_15.png); margin: 0 -30px 0 -30px; position: relative; padding: 30px; width: 900px; }
body.contact div.pane div.col { float: left; width: 425px; margin-right: 20px; }
body.contact div.pane div.col p { font-size: 1.6em; }
body.contact div.pane div.col p strong { font-weight: bold; }
body.contact div.pane div.col a.download { margin-left: -10px; }