/*Reset*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {  
	margin:0; 
	padding:0; 
}

ol,ul { 
	list-style:none; 
}

h1,h2,h3,h4,h5,h6 { 
	font-size:100%; 
	font-weight:normal; 
}

.block ul {
	margin: 0;
	padding: 0;
}

li.leaf {
	list-style-image: none;
	padding-top: 0;
}

.item-list ul li, item-list ol li {
	list-style: circle inside;
	margin: 0;
}

ul.menu li {
	margin: 0;
}

p {
	margin: 0;
	padding: 0;
}

.item-list ul li {
}

body, html {
    height: 100%;
}

body {
    font-size: 62.5%;
}

/*HEADINGS -------------------------------------------------------- */
h1{
        margin-bottom: 1em;
        padding-top: .66em;
        margin-top: 75px;
        font-family: Helvetica Neue, Arial Narrow, Arial, san-serif;
        font-size: 4em;
        color: #ABA6AE;
	line-height:1.2em;
	text-shadow: 1px 1px 1px #B9BBB4;
	letter-spacing: -1px;
}

.page h1 {
    margin-top: 0 !important;
}

h1.our-approach {
    padding-top: .66em;
    margin-top: 75px;
    float: left;
    margin-right: 85px;
}

h1.our-work {
    padding-top: .66em;
    margin-top: 75px;
    float: left;
}

h2{
	color:#636;
	font-size:2.4em;
	margin-bottom:0.9em;
	line-height:0.9em;
        letter-spacing: -1px;
        font-style: italic;
        padding:5px 0 0 18px;
        background: url(images/h2-arrow.png) no-repeat left;
}

h3{
	color:#636;
	font-size:1.5em;
	margin-bottom:1.2em;
	line-height:1.2em;
	font-variant:small-caps;
	text-shadow: 1px 1px 1px #88BB17;
}
h4{
	color:#000;
	font-size:1.2em;
	margin-bottom:1.5em;
	line-height:1.5em;
	font-variant:small-caps;
}
h5{
	color:#000;
	font-size:1em;
	margin-bottom:1.8em;
	line-height:1.8em;
	font-variant:small-caps;
}
h6{
	color:#000;
	font-size:1em;
	margin-bottom:1.8em;
	line-height:1.8em;
}

/*-------------------------------------------+
|                                            |
|                Class                       |
|                                            |
+-------------------------------------------*/

.generic {
	padding-top:1em;
	margin-bottom:2em;
}

.generic p {
	font-size:1.6em;
	line-height:1.5em;
	margin-bottom:1.5em;
}

.generic p.small {
    font-size: 1.4em;
}

a {
    color: #fff;
    background-color: #636;
    text-decoration: none;
    padding: 0px 5px;
    outline: none;
}
a:hover {
    color: #88BB17;
    text-decoration: underline;
}
a:active {
    outline: none;
}
a:focus {
    -moz-outline-style: none;
}

.purple {
    color: #636;
}
.green {
    color: #88BB17;
}

.bold {
    font-weight: bold;
}
#page {
    width: 100%;
    height: 100%;
}
#lt-column {
    width: 67%;
    height: 100%;
    float: left;
    margin-left: auto;
    margin-right: auto;
}
#menu-wrapper {
    position: absolute;
    margin-top: 24px;
    z-index: 2;
    background: url(images/menu-bg.jpg);
}
#menu-wrapper a{
    background-color: transparent;
}
#menu {
    padding: 10px 5px;
    font-family: Helvetica Neue, Arial, Arial Narrow, sans-serif;
    font-size: 1.4em;
    color: #fff;
}
#menu a {
    color: #fff;
}
#menu a:hover {
    color: #88BB17;
}
#menu a.current {
    color: #88BB17;
}
#arrow img {
    width: 620px;
    margin: 70px 0 0 0;
    opacity: .25;
}
.title {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    margin-top: 138px;
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 42px;
    color: #636;
}
.content {
    padding-bottom: 2.4em;
    font-family: Helvetica Neue, Arial, Arial Narrow, sans-serif;
    font-weight: lighter;
    color: #ABA6AE;
}
.pane {
    position: absolute;
    width: 620px;
    display: none;
}
#footer-wrapper {
    width: 620px;
    position: fixed;
    bottom: 18px;
    z-index: 1;
}
#footer {
    padding: 10px 5px;
    background: url(images/menu-bg.jpg);
    font-family: Helvetica Neue, Arial Narrow, Arial, sans-serif;
    font-size: 8px;
    color: #fff;
    opacity: .25;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25);

}
#footer:hover {
    opacity: 1;
}
#footer a {
    color: #fff;
    background-color: transparent;
}
#footer a:hover {
    color: #88BB17;
}
#footer a.current {
    color: #88BB17;
}
#rt-column {
    float: right;
    position: fixed;
    margin-left: 67%;
    width: 32%;
    height: 100%;
    /*border: 1px solid #999;*/
}
#logo img {
    position: fixed;
    margin-left: 45px;
    width: 150px;
}
.header-img {
    display: block;
    margin: 61px auto 0;
    border-bottom: 1px solid #a083a0;
}
.name {
    position: fixed;
    bottom: 5px;
    margin-left: 640px;
    font-size: 24px;
    font-family: Helvetica, Arial, sans-serif;
    text-align: right;
    line-height: 16px;
}
.name a {
    background-color: transparent;
    padding: 0;
}
.name a:hover {
    text-decoration: none;
}
#nav {
    position: fixed;
    height: 200px;
    width: 258px;
    /*border: 1px solid #999;*/
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    padding-top: 175px;
}
#up-arrow {
    background: url(arrow-up.jpg) no-repeat;
    width: 250px;
    height: 23px;
    float: left;
    padding-bottom: 74px;
}
#down-arrow {
    background: url(arrow-down.jpg) no-repeat;
    width: 250px;
    height: 23px;
    float: left;
    padding-top: 20px;
    
}
.clear {
    clear: both;
}
.dial {
    position: relative;
    top: -2px;
    left: -162px;
    float: right;
    line-height: 36px;
    text-align: right;
    color: #C4BEC6;
}
.dial a {
    background: none;
    color: inherit;
    letter-spacing: -1px;
}
.dial a:hover {
    color: #636;
}
.dial-bg-top {
    height: 20px;
    margin-top: -90px;
    position: absolute;
    background: url(images/arrow-up.gif) no-repeat center top;
    opacity: .25;
}
.dial-bg-bottom {
    height: 20px;
    margin-top: 100px;
    position: absolute;
    background: url(images/arrow-down.gif) no-repeat center bottom;
    opacity: .25;
}
.about-dial-bg {
    width: 85px;
}
#indicator {
    position: relative;
    left: -20px;
    top: -2px;
    color: #636;
    float: left;
    font-size: 32px;
}
.item1, .item2, .item3 {
    font-family: Helvetica Neue, Helvetica, Arial Narrow, Arial, sans-serif;
    font-size: 1.6em;
    font-weight: lighter;
    letter-spacing: -1px;
    text-transform: uppercase;
    cursor: pointer;
}
.item-current a {
    color: #636 !important;
    text-decoration: underline;
}
.item-first {
    font-size: 2.8em;
}
.item1.item-first {
    color: #C4BEC6;
}
.dial.about {
    left: -171px;
}
#about .dial-right {
    float: left;
    position: relative;
    left: 80px;
    color: #88BB17;
    font-family: Helvetica Neue, Helvetica, Arial Narrow, Arial, sans-serif;
    font-size: 2.8em;
    font-weight: lighter;
    text-transform: uppercase;
}
.about {
    width: 88px;
}
.about.nav {
    left: -162px;
}
#approach .dial-right {
    float: left;
    position: relative;
    left: 135px;
    top: -1px;
    color: #88BB17;
    font-family: Helvetica Neue, Helvetica, Arial Narrow, Arial, sans-serif;
    font-size: 2.8em;
    font-weight: lighter;
    text-transform: uppercase;
}

.dial.approach {
    left: -115px;
}

.approach {
    width: 145px;
}

.work-nav {
    width: 310px !important;
}

#work .dial-right {
    float: left;
    position: relative;
    left: 174px;
    color: #88BB17;
    font-family: Helvetica Neue, Helvetica, Arial Narrow, Arial, sans-serif;
    font-size: 2.8em;
    font-weight: lighter;
    text-transform: uppercase;
}

.dial.work {
    left: -126px;
}

.work {
    width: 192px;
}

.desc {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 1.2em;
    font-family: Helvetica Neue, Arial Narrow, Arial, sans-serif;
    font-weight: lighter;
    color: #ABA6AE;
}

.scrollable ul {
    float: left;
    position: relative;
    left: 50%;
}

.scrollable ul li {
    position: relative;
    float: left;
    right: 50%;
}

.scrollable ul li img {
    width: 185px;
    height: 143px;
    overflow: hidden;
    margin: 0 10px;
    cursor: pointer;
}

.scrollable ul li.first img{
    margin-left: 0;
}

.scrollable ul li.last img{
    margin-right: 0;
}

/*Nav Styles*/

#approach .navi, #work .navi {
    float: right;
    font-family: Arial, sans-serif;
    color: #ABA6AE;
    font-size: 1.2em;
    font-style: italic;
    padding-right: 50px;
    padding-top: 10.6em;
}

#work .navi {
    padding-right: 0;
    padding-top: 4.1em;
}

#approach .navi a, #work .navi a {
    float: left;
    margin-right: 10px;
    padding-right: 10px;
    border-right: 1px solid #636;
    background: transparent;
    color: #ABA6AE;
    text-decoration: none;
}

#approach .navi a.last, #work .navi a.last {
    margin-right: 0 !important;
    padding-right: 0 !important;
    border-right: none !important;
}

#approach .navi a:hover, #work .navi a:hover {
    color: #636;
}

#approach .navi a.active, #work .navi a.active {
    color: #636;
    text-decoration: underline;
}

#approach .content {
    clear: both;
}

#approach .page {
    height: auto;
    margin-top: 0 !important;
    overflow: visible;
    padding: 0;
}

#approach #pages {
    height: auto;
    position: static;
}

#approach a.prev, #approach a.next {
    display: none;
}

/* override the root element to enable scrolling */

	#approach .approach-scrollable {
		position:relative;
		overflow:hidden;
		clear:both;
                height: 200px;
                width: 620px;
	}

	/* override single pane */
	#approach .approach-scrollable div {
		float:left;
		display:block;
		width:620px;
	}

	/* our additional wrapper element for the items */
	#approach .approach-scrollable .items {
		width:20000em;
		position:absolute;
		clear:both;
		margin:0;
		padding:0;
	}

	#approach .approach-scrollable .less, #flowpanes .less a {
		color:#999 !important;
		font-size:11px;
	}
        

/*Work Styles*/

/* main vertical scroll */
	#main {
		position:relative;
		overflow:hidden;
		height: 600px;
	}
	
	/* root element for pages */
	#pages {
		position:absolute;
		height:20000em;
	}

        /* single page */
        .page {
            /*height: 450px;*/
            margin-top: 75px;
            padding-bottom: 1.2em;
            font-family: Helvetica Neue, Arial Narrow, Arial, sans-serif;
            font-weight: lighter;
            color: #ABA6AE;
            background: none !important;
            overflow: hidden;
        }
        
        /* root element for horizontal scrollables */
	.scrollable {
                float:left;
		position:relative;
		/*overflow:hidden;*/
		width: 620px;
		height: 450px;
	}
	
	/* root element for scrollable items */
	.scrollable .items {
		width:20000em;
		position:absolute;
		clear:both;
	}
	
	/* single scrollable item */
	.item {
		float:left;
		width:620px;
		height:450px;
	}
        .scrollable .items .item a {
                padding: inherit;
                text-decoration: none;
                background-color: transparent;
        }


/*********** navigator ***********/


/* position and dimensions of the navigator */
/*#stories .navi {
	width:115px;
	height:28px;
        margin: -2.4em auto 1.2em;
}*/



/*Contact Page*/

span.spacer {
    width: 140px;
    display: block;
    float: left;
}

/*Overlay Styles*/

/* the overlayed element */
.simple_overlay {
	
	/* must be initially hidden */
	display:none;
	
	/* place overlay on top of other elements */
	z-index:10000;
	
	/* styling */
	background-color:#333;
	
	width:640px;	
	height: 480px;
	border:1px solid #666;
	
	/* CSS3 styling for latest browsers */
	-moz-box-shadow:0 0 90px 5px #000;
	/*-webkit-box-shadow: 0 0 90px #000;*/	
}

/* close button positioned on upper right corner */
.simple_overlay .close {
	background-image:url(images/close.png);
	position:absolute;
	right:-15px;
	top:-15px;
	cursor:pointer;
	height:35px;
	width:35px;
}

a.close {
    background-color: transparent;
    padding: 0;
}



        
/*
	960 Grid System ~ Core CSS.
	Learn more ~ http://960.gs/

	Licensed under GPL and MIT.
*/

/* `Containers
----------------------------------------------------------------------------------------------------*/

.container_12,
.container_16 {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
}

/* `Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_13,
.grid_14,
.grid_15,
.grid_16 {
	display: inline;
	float: left;
	margin-left: 10px;
	margin-right: 10px;
}

.container_12 .grid_3,
.container_16 .grid_4 {
	width: 220px;
}

.container_12 .grid_6,
.container_16 .grid_8 {
	width: 460px;
}

.container_12 .grid_9,
.container_16 .grid_12 {
	width: 700px;
}

.container_12 .grid_12,
.container_16 .grid_16 {
	width: 940px;
}

/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
	margin-left: 0;
}

.omega {
	margin-right: 0;
}

/* `Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .grid_1 {
	width: 60px;
}

.container_12 .grid_2 {
	width: 140px;
}

.container_12 .grid_4 {
	width: 300px;
}

.container_12 .grid_5 {
	width: 380px;
}

.container_12 .grid_7 {
	width: 540px;
}

.container_12 .grid_8 {
	width: 620px;
}

.container_12 .grid_10 {
	width: 780px;
}

.container_12 .grid_11 {
	width: 860px;
}