/* Main layout */

    html {
        margin: 0;
        padding: 0;
        color: black;
        background: white;
        line-height: 1.5;
        font-family: Arial, Helvetica, sans-serif;
		overflow-x:hidden;
        overflow-y:scroll;
    }

    body {
        margin: auto;
        padding: 0;
        border: 0;
        min-width: 600px;
        max-width: 910px; /* Without a maximum width, the content area expands to fill all available space, meaning the layout looks left-aligned rather than centred. */
    }

    #wrapper {
        padding-left: 151px; /* This should be equal to the width of the navigation column, including padding. */
        position: relative;
        top: 100px; /* This is positioned further down to account for the header, which is absolutely positioned. */
    }

    #content {
        float: left;
        position: relative;
        width: 100%;
    }

/* Navigation */

    #navigation {
        float: left;
        position: relative;
        width: 141px; /* This should be equal to the width of the navigation column, not including padding. */
        margin-left: -100%;
        padding: 5px;
        right: 151px; /* This should be equal to the width of the navigation column, including padding. */ 
        font-size: 9pt;
    }

    #navigation h1 {
        font-size: 150%;
        margin: 0;
        padding: 0;
        text-align: right;
    }

    #navigation h1 a img {
        border: 0;
    }

    #navigation ul {
        display: block;
        list-style-type: none;
        margin: 0 0 0 1.5em;
        padding: 0;
    }

    #navigation ul li {
        display: block;
        margin: 0;
        padding: 0;
    }

    #navigation ul li h2 {
        font-size: 100%;
        margin: 0;
        padding: 0;
    }

    #navigation ul li h3 {
        font-size: 100%;
        font-weight: normal;
        margin: 0;
        padding: 0.125em;
    }

    #navigation ul li a {
        display: block;
        margin: 0;
        padding: 0.125em;
        color: black;
        text-decoration: none;
    }

    #navigation ul ul {
        margin: 0 0 0 0.5em;
    }

    #navigation ul ul ul li a {
        color: #839595;
        font-size: 90%;
    }

    #navigation a.selected,
    #navigation h2:hover,
    #navigation h3:hover,
    #navigation a:hover,
    #navigation a:focus {
        color: #ee3e23;
    }

    #navigation a:hover,
    #navigation a:focus,
    #navigation a:active {
        outline: 0 !important; /* Bugfix for Firefox. */
    }

/* Header */

    #header {
        position: absolute;
        top: 0;
        width: 100%;
        max-width: 900px;
        padding: 13px 0;
        border-bottom: 1px solid; height:61px;
    }

    #header img,#header .LiteralBanner {
        border: 0;
        display: block;
        position: relative;
        left: 155px;
    }

    #header #client-menu {
        position: absolute;
        right: 0;
        top: 30px;
    }

    #client-menu select,
    #client-menu button {
        font-size: 9pt;
        margin: 0;
        padding: 0;
        vertical-align: middle;
    }

/* Footer */

    #footer {
        clear: both;
        text-align: right;
        position: relative;
        top: 100px; /* This is positioned further down to account for the header, which is absolutely positioned. */
    }

/* Content */



/* Homepage */

    #intro {
        width: 270px;
        overflow: auto;
        margin: 5px;
        color: white;
        background: #839595;
        padding: 7px 10px 8px 10px;
        font-size: 9pt;
        border-top: 5px solid #ee3e23;
        height: 120px;
        line-height: 1.1;
    }

    #intro p {
        margin: 0.25em 0 0.5em 0;
        padding: 0;
    }

    #intro ul {
        margin: 0.5em 0 0 1em;
        padding: 0;
    }

    #intro li {
        margin: 0;
        padding: 0;
    }

    .feature,
    .new-hiring {
        width: 140px;
        height: 140px;
        margin: 5px;
        float: left;
        font-size: 9px;
        line-height: 1.3;
        overflow: hidden;
        background: #c2cdc6;
        /* outline: thin solid #839595; */ /* Optional style change. */
    }

    .feature .inner {
        position: relative;
        height: 100%;
    }

    #showreel {
        width: 291px;
        height: 290px;
        margin: 5px;
        float: left;
        position: absolute;
        top: 0;
        left: 300px;
        background: #c2cdc6;
        /* outline: thin solid #839595; */ /* Optional style change. */
        overflow: hidden;
    }

    #showreel .inner {
        position: relative;
        height: 100%;
    }

    #new-hirings {
        position: absolute;
        left: 600px;
        top: 0;
    }

    .new-hiring .inner {
        position: relative;
        height: 100%;
    }

    .feature a,
    #showreel a,
    .new-hiring a,
    #directions div {
        color:Black;
        display: block;
        height: 100%;
        overflow: hidden;
        text-decoration: none;
        padding: 5px;
        position: relative;
    }

    #showreel a {
        max-height: none;
    }

    .feature a:hover,
    .feature a:focus,
    #showreel a:hover,
    #showreel a:focus,
    .new-hiring a:hover,
    .new-hiring a:focus 
    {
    	color:Black;
        background: #d2ddd6;
        outline: thin solid #839595;
        overflow: visible;
    }

    .feature .title,
    #showreel .title,
    .new-hiring .title {
        font-size: 9px;
        font-weight: normal;
        display: block;
        margin: 0;
        padding: 0;
        color: #ee3e23;
    }

    .feature .project,
    .feature .subtitle,
    #showreel .project,
    .new-hiring .name {
        display: block;
        font-size: 11px;
        font-weight: normal;
        color: white;
        margin: 0;
        padding: 0;
    }

    .feature .client,
    #showreel .client,
    .feature .medium 
    .new-hiring .ptitle {
        display: block;
        font-size: 9px;
        color: black;
        margin: 0;
        padding: 0;
    }

    .feature .medium {
        /*font-size: 8pt;*/
    }

    .feature img,
    .new-hiring img {
        display: block;
        margin: auto;
        border: 0;
        position: absolute;
        bottom: 15px;
    }
    

    .new-hiring img { 
        bottom: 5px;
    }

	#about-karmarama .bottom {
		display: block;
		bottom: 0;
		position:absolute;
	}

/* Client page */

    #description {
        width: 270px;
        overflow: auto;
        margin: 5px;
        color: white;
        background: #839595;
        padding: 5px 10px 10px 10px;
        font-size: 9pt;
        float: left;
        min-height: 605px;
    }

    #description h1 {
        font-size: 100%;
        font-weight: normal;
        display: block;
        margin: 0;
        padding: 0;
        color: #ee3e23;
    }

    #description h2 {
        display: block;
        font-size: 100%;
        font-weight: normal;
        color: white;
        margin: 0 0 2em 0;
        padding: 0;
    }

    #description h3 {
        font-size: 100%;
        margin: 0;
    }

    #description p {
        margin: 1em 0;
    }

    #description h3 + p {
        margin-top: 0;
    }


/* Contacts */

    #contact-details {
        width: 270px;
        overflow: auto;
        margin: 5px;
        color: white;
        background: #839595;
        padding: 5px 10px 10px 10px;
        font-size: 9pt;
        text-align: justify;
        float: left;
        height: 605px;
    }

    #map,
    #photo {
        width: 270px;
        height: 290px;
        overflow: auto;
        margin: 5px;
        color: white;
        padding: 5px 10px 10px 10px;
        font-size: 8pt;
        text-align: justify;
        background: #d2ddd6;
        overflow: hidden;
        float: left;
        position: relative;
    }

    #contact-details h1,
    #contact-details h2 {
        font-size: 100%;
        display: block;
        margin: 0;
        padding: 0;
        color: white;
        font-weight: bold;
    }

    #contact-details label {
        display: block;
        margin: 0.5em 0 0 0;
    }

    #contact-details input,
    #contact-details select {
        width: 15em;
    }

    #contact-details textarea {
        width: 100%;
        resize: none;
        margin: 0;
        padding: 0;
    }

    #contact-details button {
        margin: 0.75em 0;
    }

    #map h1,
    #photo h1,
    #directions h1 {
        font-size: 100%;
        font-weight: normal;
        display: block;
        /*margin: 0.75em 0 1.25em 0;*/
		margin-left:0px;padding-left:0px;
        padding: 0;
        color: #ee3e23;
    }

    #map a {
        display: block;
        position: absolute;
        bottom: 0;
    }

    #map img,
    #photo img {
        border: 1px solid #d2ddd6;
        display: block;
        position: absolute;
        bottom: 10px;
    }

    #map a:focus {
        outline: 0;
    }

    #map a:hover img,
    #map a:focus img {
        border: 1px solid #839595;
    }

    #directions {
        width: 140px;
        max-height: 140px;
        margin: 5px;
        float: left;
        font-size: 8pt;
        background: #d2ddd6;
        /* outline: thin solid #839595; */ /* Optional style change. */
    }

    #directions input {
        font-size: 8pt;
        width: 100%;
    }
    
    #directions button {
        font-size: 8pt;
        width: 100%;
    }

/* Karmajobs */

    #jobs {


        overflow: auto;
        
        
        color: white;
        margin-left:5px;
        font-size: 9pt;
        float: left;
       /* height: 605px;*/margin-top:5px;
    }
.jobs_outer{margin-bottom:10px;float:left;}
.jobs_inner{background: #839595;height:135px;border-top:solid 5px #ef3d1f; width:744px; float:left; }
.jobs_inner_inner{padding: 5px 10px 10px 10px;margin: 5px;float:left; }
    #jobs h1 {
        color: white;
        font-size: 100%;
        margin: 0;
        padding: 0;
    }

    #jobs h2 {
        color: red;
        font-size: 100%;
        margin: 0;
        padding: 0;
    }

    #jobs h2 + p {
        margin-top: 0;
    }

/* Karmacrew */

    .person {
        position: relative;
        width: 140px;
        height: 140px;
        margin: 5px;
        float: left;
        font-size: 9pt;
        line-height: 1.3;
        overflow: hidden;
        background: #c2cdc6;
        /* outline: thin solid #839595; */ /* Optional style change. */
    }

    .person .inner {
        position: relative;
        height: 100%;
    }

    .person a {
        display: block;
        height: 100%;
        overflow: hidden;
        text-decoration: none;
        padding: 5px;
        position: relative;
    }

    .person img {
        display: block;
        margin: auto;
        border: 0;
        position: absolute;
        bottom: 15px;
    }

    .person .title {
        display: block;
        color: #ee3e23;
        font-size: 9px;
    }

    .person .name {
        display: block;
        color: white;
        font-size: 11px;
    }

    .person .position {
        display: block;
        color: black;
        font-size: 9px;
    }

    #portrait {
        width: 440px;
        height: 280px;
        margin: 5px;
        float: left;
        position: absolute;
        top: 0;
        left: 300px;
        font-size: 8pt;
        /* outline: thin solid #839595; */ /* Optional style change. */
    }

    .back {
        font-weight: bold;
    }

    .back a {
        color: white;
        text-decoration: none;
    }

    #slideshow {
        width: 440px;
        height: 287px;
        margin: 5px;
        float: left;
		
        position: absolute;
        top: 0;
        left: 300px;
        font-size: 8pt;
        /* outline: thin solid #839595; */ /* Optional style change. */
    }

    #slideshow a {
        display: block;
        height: 100%;
        min-height: 130px;
        overflow: hidden;
        text-decoration: none;
        background: #c2cdc6;
        padding: 5px;
    }

    #slideshow a:hover,
    #slideshow a:focus {
        background: #d2ddd6;
        outline: thin solid #839595;
    }

    #slideshow .title {
        display: block;
        color: #ee3e23;
    }

    #slideshow .subtitle {
        display: block;
        color: white;
        font-size: 10pt;
    }

/* Ping Pong */

    #short-film {
        width: 290px;
        height: 290px;
        margin: 5px;
        float: left;
        position: absolute;
        top: 0;
        left: 300px;
        /* outline: thin solid #839595; */ /* Optional style change. */
        background: #c2cdc6;
        overflow: hidden;
    }

    #short-film .inner {
        position: relative;
        height: 100%;
    }

    #short-film a {
        display: block;
        height: 100%;
        overflow: hidden;
        text-decoration: none;
        background: #c2cdc6;
        padding: 5px;
    }

    #short-film a:hover,
    #short-film a:focus {
        background: #d2ddd6;
        outline: thin solid #839595;
    }

    #short-film .title,
    #book .title,
    #join-ping-pong .title {
        display: block;
        color: #ee3e23;
        font-size: 9px;
        line-height: 1.3;
    }

    #short-film .subtitle,
    #book .subtitle,
    #join-ping-pong .subtitle {
        display: block;
        color: white;
        font-size: 11px;
        line-height: 1.2;
    }

    #book,
    #join-ping-pong {
        position: absolute;
        left: 600px;
        width: 140px;
        height: 140px;
        margin: 5px;
        float: left;
        font-size: 8pt;
        /* outline: thin solid #839595; */ /* Optional style change. */
        background: #c2cdc6;
        overflow: hidden;
    }

    #book .inner,
    #join-ping-pong .inner {
        position: relative;
        height: 100%;
    }

    #book {
        top: 0;
    }

    #book a,
    #join-ping-pong a {
        display: block;
        height: 100%;
        max-height: 130px;
        min-height: 130px;
        overflow: hidden;
        text-decoration: none;
        padding: 5px;
    }

    #book a:hover,
    #book a:focus,
    #join-ping-pong a:hover,
    #join-ping-pong a:focus {
        background: #d2ddd6;
        outline: thin solid #839595;
        overflow: visible;
    }

    #short-film img {
        border: 0;
        position: absolute;
        bottom: 5px;
    }

    #book img,
    #join-ping-pong img {
        border: 0;
        position: absolute;
        bottom: 5px;
    }

/* Karmaprojects */

    #karmaprojects #intro {
        float: left;
    }
    h3.karmaprojects 
    {
    	padding-top:15px;
    	padding-bottom:15px;
    }

/* Clients */

    #clients #intro {
        float: left;
    }

    .client {
        margin: 5px;
        float: left;
    }

    .client img {
        border: 0;
    }

/* Miscellaneous */

    br {
        clear: both;
        height: 0;
        width: 0;
        visibility: hidden;
    }

    button {
        cursor: pointer;
    }

    #content input,
    #content textarea,
    #content select {
        border: 0;
        margin: 0.25em 0;
        background: #f5f5ff;
    }

    #content input:focus,
    #content textarea:focus,
    #content select:focus {
        background: white;
        outline: 1px solid #677;
    }



/* Popups */

    #nyroModalContent {
        background: white;
        color: black;
        margin: 0;
        padding: 0;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 9pt;
        line-height: 1.6;
    }

    #nyroModalContent h1 {
        font-size: 100%;
        margin: 0 0 1em 0;
    }


	.new-hiring .content {

        padding: 5px;

    }


#showreel .inner .title,.new-hiring .inner .content .title,.feature .inner a .title,.person .inner a .title,#book .title,#join-ping-pong .title{margin-top:8px;}
#showreel .inner .title{margin-top:11px;}
#wrapper #content #description h1,#contact-details h1{color:white; font-weight:bold;margin-top:8px;}