/*
Theme Name: Mutato 2012.2
Theme URI: http://www.mutato.com/
Description: A theme for WordPress.
Author: Dave Funkhouser, Drew Baker, Funkhaus Design
Author URI: http://www.funkhausdesign.com
Version: 2.0


Colors:

    Burnt Orange: #C74D2A;
    Light Blue: #DBE7EB;
    Color 3: #;

/*-------------------------------------------------------------- */

	@import url("fonts/stylesheet.css");    

/*
 * Globals 
 */
    html {
        height: 100%;
    }
	body { 
        font-family: 'Varela Round', Helvetica, Arial, sans-serif;
	    font-size: 11px;
	    color: #000000;
	    margin: 0;
	    padding: 0;
        height: 100%;
	}
    h1, h2, h3, h4 ,h5, h6 {
        font-family: 'OstrichBlack', Helvetica, Arial, sans-serif;
        margin: 0;
        padding: 0;
        line-height: 1;   
        font-weight: normal;     
    }
    h2 {
        font-size: 20px;
    }
    h3 {
        font-size: 17px;
    }
    ::selection {
        color: black;
        background: #DBE7EB;
    }
    ::-moz-selection {
        color: black;
        background: #DBE7EB;
    }      
    
    
/* 
 * Links 
 */
	a { 
	    color: #000000; 
	    text-decoration: none;
	}
	a:hover { 
	    color: #C74D2A;
	    outline: none;
	}
	a img {
	   border: none;
	}
	

/* 
 * Page Structure 
 */
    #container {
        position: relative;
        min-width: 1150px;
        min-height: 670px;
        height: 100%;
        width: 100%:
    }
    #header {
        height: 80px;
        width: 100%;
        overflow: hidden;
        position: relative;
        z-index: 9999;
    }


/*
 * Content
 */    
    .entry {
        text-align: justify;
    }

/*
 * Menu's & Navigation
 */ 
    #top-nav {
        padding: 0;
        margin: 0;
        list-style: none;
        font-size: 20px;
        text-transform: uppercase;
        font-family: 'OstrichBlack', Helvetica, Arial, sans-serif;
        text-align: center;
    }
    #top-nav li {     
        margin: 0;
        list-style: none;
        display: inline-block;
    }
    #top-nav li#logo-list-item a {
         position: relative;
         bottom: -6px;
         padding: 0 20px;
    }
    #top-nav a {
        text-decoration: none;
        padding: 30px 30px 10px 30px;
        display: inline-block;                 
    }
    #top-nav li.current-page-ancestor a,
    #top-nav li.current-menu-item a,
    #top-nav li a:hover {
        background: url(images/graphic-yeti.png) no-repeat 14px 8px;
	    color: #C74D2A;        
    }    


/*
 * Header
 */
    #top-nav li a#logo {
        height: 55px;
        width: 189px;
        position: relative;
        top: 14px;
        background: url(images/gifs-static/logo-mutato-script-off.gif) no-repeat center;
    }
    #top-nav li a#logo:hover {
        background: url(images/gifs-animated/logo-mutato-script.gif) no-repeat center;
    }
    #logo img {
        display: none;
    }


/*
 * Home
 */
    .home #container {
        min-height: 500px;
    }
    #homepage-image {
        background-size: cover;
        background-position: center center;
        position: absolute;
        top: 80px;
        bottom: 0;
        left: 0;
        right: 0;
    }
    #homepage-image img {
        display: none;
    } 
    #content.home {
        position: absolute;
        bottom: 0;
        width: 100%;   
        background: white;     
    }
    #content.home .page {
        display: none;
        overflow: hidden;
        background: white;
        line-height: 1.1;
        position: relative;
        width: 900px;
        margin: 0 auto;
    }
    #right-man,
    #left-man {
        position: absolute;
        left: 0;
        top: 30px;
        height: 129px;
        width: 77px;
        background: url(images/gifs-static/graphic-men-left-off.gif);
    }
    #left-man:hover {
        background: url(images/gifs-animated/graphic-men-left.gif);
    }
    #right-man {
        left: auto;
        right: 0;
        float: right;
        background: url(images/gifs-static/graphic-men-right-off.gif)
    }
    #right-man:hover {
        background: url(images/gifs-animated/graphic-men-right.gif);
    }
    #info-tab {
        height: 50px;
        width: 77px;
        position: absolute;
        top: -50px;
        left: 50%;
        margin-left: -38px;
        background: url(images/gifs-static/button-info-tab-blinker-off.gif);
        cursor: pointer;
    }
    #info-tab:hover {
        background: url(images/gifs-animated/button-info-tab-blinker.gif);
    }
    #info-tab.close {
        background: url(images/gifs-static/button-info-tab-close-off.gif);
    }
    #info-tab.close:hover {
        background: url(images/gifs-animated/button-info-tab-close.gif);
    }
    #content.home .title {
        width: 600px;
        margin: 0 auto;
        font-size: 24px;
        text-align: center;
        margin: 30px auto 20px auto;
    }    
    #content.home .entry {
        width: 600px;
        margin: 0 auto;
    }    
    a.finger {
        display: block;
        margin: 0 auto 15px auto;
        height: 24px;
        width: 190px;
        text-transform: uppercase;
        padding: 3px 0 0 60px;
        background-image: url(images/graphic-finger-wiggle.png);
        background-repeat: no-repeat;
        background-position: 0 0;
        font-size: 17px;
        font-family: 'OstrichBlack', Helvetica, Arial, sans-serif;
        
    }
    a.finger:hover {
        background-position: 0 -68px;
    }
    a.finger span {
        background: #DBE7EB;        
        padding: 4px 3px 0;
    }       



/*
 * Video Detail
 */

    #content.video-detail {
        position: absolute;
        top: 80px;
        bottom: 0;
        left: 0;
        right: 0;
        min-height: 560px;
    }
    #content.video-detail > .page {
        height: 574px;
        width: 800px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -287px 0 0 -400px;
    }
    .video-detail .vvqbox {
        margin: 0 0 10px 0;
    }
    h2.credit {
        text-transform: uppercase;
        font-size: 13px;
        line-height: 1.1;
    }
    .credit.client {
        float: left;    
    }
    .credit.agency {
        float: right;    
    }        
    .credit.title {
        float: left;    
        clear: left;
    }    
    .credit.composer {
        float: right;    
    }
    .credit span {
        color: #C74D2A;
    }
    .video-detail .share {
        background: url(images/gifs-static/graphic-can-off.gif);
        display: block;
        height: 77px;
        width: 57px;
        margin: 0 auto;
        text-align: center;
        cursor: pointer;
        margin-top: 50px;
    }
    .video-detail .share:hover {
        background: url(images/gifs-animated/graphic-can.gif);
    }
    .video-detail .share span {
        display: none;
    }
    .video-detail .call-us {
        height: 156px;
        width: 113px;
        position: absolute;
        right: 0;
        top: 145px;
        background: url(images/gifs-static/graphic-old-man-call-us-off.gif);
    }
    .video-detail .call-us:hover {
        background: url(images/gifs-animated/graphic-old-man-call-us.gif);
    }
    .video-detail .call-us span {
        display: none;
    }
    /*
     * Playlist Tray
     */
        .video-thumb-tray-wrapper {
            height: 550px;
            width: 134px;
            position: absolute;
            top: 50%;
            margin-top: -337px;
            left: -134px;
        }       
        .video-thumb-tray {
            height: 550px;
            width: 134px;
            background-color: white;
            position: relative;
            z-index: 10;
        }
        .video-thumb-tray .scrollable {
            width: 134px;
            height: 450px;
        }
        .video-thumb-tray .scrollable .items {
            height: 20000em;
            width: 134px;
        }
        .video-thumb-tray .pane {
            width: 134px;
            height: 450px;
        }
        .video-thumb-tray .video-thumb {
            height: 75px;
            width: 134px;
            display: block;
            position: relative;
        }
        .video-thumb-tray .video-thumb:hover:not(.active) .overlay {
            background: black;
            opacity: 0.5;
            position: absolute;
            top: 0;
            left: 0;
            height: 75px;
            width: 134px;
        }
        .video-thumb-tray .video-thumb.active .overlay {
            display: block;
            height: 75px;
            position: absolute;
            top: 0;
            left: 0;
            width: 21px;
            background: url(images/button-now-playing.png) right no-repeat;   
        }
        .video-thumb-tray .video-thumb:hover .title {
            display: block;
            height: 55px;
            width: 114px;
            padding: 10px;   
            color: white;
            text-transform: uppercase;      
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;  
            font-family: 'OstrichBlack',Helvetica,Arial,sans-serif;
            font-size: 13px; 
        }
        .video-thumb-tray .video-thumb .title,
        .video-thumb-tray .video-thumb.active .title {
            display: none;
        }
        .video-thumb-tray .browse {
            height: 50px;
            width: 134px;
            background-repeat: no-repeat;
            background-position: center;
        }
        .video-thumb-tray .prev {
            background-image: url(images/gifs-static/icon-up-arrow-off.gif);
        }
        .video-thumb-tray .prev:hover {
            background-image: url(images/gifs-animated/icon-up-arrow.gif);
        }        
        .video-thumb-tray .next {
            background-image: url(images/gifs-static/icon-down-arrow-off.gif);
        }
        .video-thumb-tray .next:hover {
            background-image: url(images/gifs-animated/icon-down-arrow.gif);        
        }
		/* Commercial Tray */
        .show-playlist {
            width: 41px;
            position: absolute;
            top: 48px;
            right: -41px;
            cursor: pointer;
        }
        .show-playlist span {
            display: none;
        }
		#commercial-tray .show-playlist {
            background-image: url(images/button-commercials.png);
			top: 48px;
            height: 139px;			
		}
		#commercial-tray .show-playlist:hover {
			background-position: 0 -140px;
		}		
		#commercial-tray.active .show-playlist {
			background-position: 0 -281px;	
		}
		#film-tray .show-playlist {
            background-image: url(images/button-film.png);	
            top: 187px;		
            height: 160px;            
		}		
		#film-tray .show-playlist:hover {
			background-position: 0 -160px;
		}	
		#film-tray.active .show-playlist {
			background-position: 0 -320px;
		}	



/*
 * Category (notes)
 */
    #content.category {
        background: url(images/graphic-line-break.png) top center no-repeat;
        overflow: hidden;
        margin: 0 auto;
        padding: 40px 0;
    }
    .category .post {
        width: 300px;
        float: left;
        padding: 10px;
    }
    .category .post:hover {
        color: black;
        background: #DBE7EB;
    }
    .category .title {
        font-size: 22px;
        margin: 10px 0;
    }
    /*
     * Single
     */
        .single #header {
            width: 1100px;
            margin: 0 auto;
            position: relative;
        }
        #header .share {
            background: url(images/gifs-static/graphic-share-this-off.gif);
            height: 41px;
            width: 103px;
            position: absolute;
            top: 20px;
            right: 0;
            cursor: pointer;
        }
        #header .share:hover {
            background: url(images/gifs-animated/graphic-share-this.gif);
        }
        #header .share span {
            display: none;
        }
        #header .back-to-index {
            position: absolute;
            top: 20px;
            height: 44px;
            width: 118px;
            background: url(images/gifs-static/graphic-back-to-index-off.gif);
        }
        #header .back-to-index span {
            display: none;
        }
        #header .back-to-index:hover {
            background: url(images/gifs-animated/graphic-back-to-index.gif);
        }
        #content.single {
            background: url(images/graphic-line-break.png) top center no-repeat;    
            margin: 0 auto;
            padding: 40px 0;
        }
        #content.single > .post {
            width: 960px;
            margin: 0 auto;
        }     
        #content.single > .post .centercolumn {
            width: 600px;
            margin: 0 auto;
            text-align: center;
        }
        .single .title {
            font-size: 42px;
            margin: 15px 0;     
            text-align: center;   
        } 
        .single a.finger {
            width: auto;
            margin: 15px 0;
        }


/*
 * Text Template (also used for the Info page)
 */
    #content.textpage {
        background: url(images/graphic-line-break.png) top center no-repeat;
        padding: 40px 0;
        width: 1150px;
        margin: 0 auto;        
    }
    #content.textpage > .page {
        width: 1000px;
        margin: 0 auto;
    }
    .textpage .entry {
        line-height: 1.6;
        overflow: hidden;
        font-size: 12px;
    }
    .textpage .header {
        background: url(images/graphic-small-linebreak.jpg) bottom center repeat-x;
        margin: 0 0 30px;
    }
    .textpage .header h2 {
        font-size: 32px;
        letter-spacing: 1px;
        line-height: 1;
        margin: 0 auto;
        padding: 25px 0;
        text-align: justify;
        width: 757px;
/*
		-webkit-font-smoothing: antialiased;        
        font-smoothing: antialiased;     
*/
        white-space: nowrap;        
    }
    .textpage .half {
        width: 48%;
        float: left;
    }
    .textpage .half.right {
        float: right;
    }
    .other-interests {
        margin: 30px 0;
        text-align: center;
        clear: both;
        float: left;
        width: 100%;
    }
    .other-interests h3 {
        padding-bottom: 10px;
        background: url(images/graphic-small-linebreak.jpg) bottom left repeat-x;
        text-align: center;
    }
    .other-interests a {
        display: inline-block;
        margin: 0 30px;
        vertical-align: top;
    }
    .other-interests a:last-child {
        margin: 20px 30px 0 30px;
    }
    .other-interests a img {
        visibility: hidden;
    }
    #post-card-diary {
        background: url(images/gifs-static/logo-postcard-diary-off.gif) no-repeat;
    }
    #post-card-diary:hover {
        background: url(images/gifs-animated/logo-postcard-diary.gif) no-repeat;
    }    
    #beautiful-mutants {
        background: url(images/gifs-static/logo-beautiful-mutants-off.gif) no-repeat;
    }
    #beautiful-mutants:hover {
        background: url(images/gifs-animated/logo-beautiful-mutants.gif) no-repeat;
    }
    #rugs {
        background: url(images/gifs-static/logo-rugs-off.gif) no-repeat;
    }
    #rugs:hover {
        background: url(images/gifs-animated/logo-rugs.gif) no-repeat;
    }


/*
 * Contact Page
 */
    .page-id-8 #container {
        min-height: 1200px;
        overflow: hidden;
    }
    #content.contact {
        background: url(images/graphic-line-break.png) top center no-repeat;
        padding: 40px 0;
        width: 1150px;
        margin: 0 auto;     
        overflow: hidden;
        position: relative;    
    } 
    .contact > .page {
        width: 950px;
        text-align: center;
        margin: 0 auto;
    }   
    .contact .entry {
        overflow: hidden;
        position: relative;
    }
    .contact .entry ul {
        list-style: none;
        padding: 0;
        margin: 0 auto;
        width: 950px;
    }
    .contact .entry ul li {
        margin-right: 40px;
        padding: 0 40px 60px 0;
        list-style: none;
        width: 410px;
        text-align: right;
        float: left;
        background: url(images/graphic-vertical-line.png) top right repeat-y;
    }
    .contact .entry ul li:last-child { 
        text-align: left;
        background: none;
        padding: 0;
        margin: 0;
        font-family: 'OstrichBlack', Helvetica, Arial, sans-serif;
        text-transform: uppercase;
        font-size: 13px;
    }   
    .contact .entry ul h2 {
        margin: 1em 0 0 0;
    }
    .contact .entry p {
        margin: 0 0 1em 0;
    }
    address {
        text-transform: uppercase;
        font-style: normal;
        font-family: 'OstrichBlack', Helvetica, Arial, sans-serif;
        font-size: 13px;
        margin: 0 0 1em 0;
        line-height: 1.5;        
    }
    .contact .entry address a {
        letter-spacing: normal;
        padding: 2px 1px 0 3px;  
    }
    .contact .entry a {
        background: #DBE7EB;
        padding: 4px 3px 0 6px;
        font-size: 13px;
        position: relative;
        bottom: 2px;
        letter-spacing: 4px;
        font-family: 'OstrichBlack', Helvetica, Arial, sans-serif;
        display: inline-block;
    }
    .contact .entry a:hover {
        background: #C74D2A;
        color: white;
    }
    #man-on-phone {
        position: absolute;
        height: 238px;
        width: 231px;
        background: url(images/gifs-static/graphic-man-on-phone-off.gif);
        bottom: 0;
        left: 0;
    }
    #man-on-phone:hover {    
        background: url(images/gifs-animated/graphic-man-on-phone.gif);
    }
    #facebook {
        position: absolute;
        height: 285px;
        width: 347px;
        right: 0;
        bottom: 0;
        background: url(images/gifs-static/graphic-instagram-hand-off.gif);
    }
    #facebook span {
        display: none;
    }
    #facebook:hover {
        background: url(images/gifs-animated/graphic-instagram-hand.gif);
    }
    #man-with-duck-right, 
    #man-with-duck-left {
        height: 267px;
        width: 108px;
        position: absolute;
        top: 200px;
        left: 0;
        background-image: url(images/gifs-static/graphic-man-with-duck-off.gif);
        background-position: -110px 0;
        background-repeat: no-repeat;
    }
    #man-with-duck-right {
        right: 0;
        left: auto;
        background-position: 4px 0;
    }    
    #man-with-duck-right:hover, 
    #man-with-duck-left:hover {
        background-image: url(images/gifs-animated/graphic-man-with-duck.gif);
    }

    #funkhaus-badge {
    	background-image: url(http://www.funkhausdesign.com/files/funkhaus-badges/mutato.png);
    	background-repeat: no-repeat;
    	background-position: 0 0;
    	width: 64px;
    	height: 25px;
    	position: absolute;
        left: 50%;
        margin-left: -64px;
        bottom: 5px;
    }
    #funkhaus-badge:hover {
		background-position: 0 -27px;
    }
    #funkhaus-badge span {
    	display: none;
    }

            
/*
 * jQuery Tools Scrollable Min-Setup
 */ 
    .scrollable {
    	position:relative;
    	overflow:hidden;
    	width: 100%;
    	height:100%;
    }

    .scrollable .items {
    	width:20000em;
    	position:absolute;
    }
    
    .pane {
    	float:left;
    } 
    .browse {
        height: 50px;
        width: 20px;
        cursor: pointer;
    }
    .browse.disabled {
        visibility: hidden;
        cursor: default;
    }

/*
 * Tools 
 */
    #tagline {
        display: none;
    }
	/* Fix share this from showing scroll bars on load */
	#stwrapper {
		position: absolute;
	}
	.post-edit-link {
	   display: block;
	   clear: both;
	   margin: 1em 0;
	}


/*
 * Gallery
 */
    .gallery {
        width: 100%;
        height: 540px;
        position: relative;
        margin: 2em 0;
    }
    .gallery .browse {
        position: absolute;
        z-index: 100;
    }
    .gallery .scrollable {
        width: 100%;
        height: 540px;
    }
    .gallery .itmes {
        height: 540px;
        width: 200000em;
    }
    .gallery .pane {
        height: 540px;
        width: 960px;
        float: left;
        opacity: 0.3;
        position: relative;
        margin: 0 20px;
    }
    .gallery .pane img {
        position: absolute;
        top: 50%;
        left: 50%;
    }
    .gallery .browse {
        height: 50px;
        width: 50px;
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -25px;
    }
    .gallery .prev {
        background-image: url(images/icon-left-arrow.png);
        margin-left: -600px;
    }        
    .gallery .next {
        background-image: url(images/icon-right-arrow.png);
        margin-left: 550px;
    }   

/*
 * Wordpress Required 
 */
	.alignleft { 
	    display: inline; 
	    float: left;
	}
	.aligncenter { 
	    clear: both; 
	    display: block; 
	    margin: 0 auto 10px auto; 
	}
	.alignright { 
	    display: inline; 
	    float: right;
	}
	img.alignleft { 
	    margin: 0 10px 10px 0;
	}
	img.alignright { 
	    margin: 0 0 10px 10px;
	}
	img.aligncenter { 
	    margin: 0 auto 10px auto;
	}
	
	.wp-caption { 
	    background: #f1f1f1; 
	    color: #888; 
	    text-align: center; 
	    margin-bottom: 15px; 
	    width: auto !important;
	    -moz-border-radius: 0 0 4px 4px;
	    border-radius: 0 0 4px 4px;
	}
	.wp-caption img { 
	    margin: 0px;
	}
	.wp-caption p.wp-caption-text { 
	    margin: 0 0 5px; 
	    padding: 4px; 
	    font-style: italic;
	}