/* Styles
================================================== */
    #home 
    {
        background: url('../img/home.jpg') center no-repeat;
        height: 315px;
    }
    #home h1,h2,h3,h4 { text-indent: -5000px; }
    
    #synopsis
    {
        padding-bottom: 10px;
    }
    #synopsis header h1 a, #synopsis header h1 a:link
    {
        display: block;
        text-indent: -5000px;
        width: 320px;
        height: 114px;
        background: url( "../img/synopsis_header.jpg" ) center no-repeat;
    }
    #synopsis p
    {
        font-size: 13px;
        line-height: 17px;
        padding: 0 5px 0 5px;
    }
    
    #photos { padding: 0; }
    #photos .close { border-bottom: 1px solid #595959; height: 20px; }
    #photos .close a, #photos .close a:link 
    { 
        width: 53px;
        height: 18px;
        margin-top: 1px;
        background: url("../img/close.jpg") top left no-repeat;
        display: block;
        text-indent: -5000px;
        float: right;
    }
    #photos .main-view { width: 320px; height: 295px; position: relative; }
        
    #navigation { border-top: 1px solid #595959; }
    #navigation ul { margin: 0; }
    #navigation ul li
    {
        border-bottom: 1px solid #595959;
        margin: 0;
    }
    #navigation ul li a, #navigation ul li a:link 
    {
        display: block;
        width: 320px;
        height: 28px;
        text-indent: -5000px;
    }
    #navigation ul li a.trailer { background: url('../img/trailer.jpg') center no-repeat; }
    #navigation ul li a.synopsis { background: url('../img/synopsis.jpg') center no-repeat; }
    #navigation ul li a.photos { background: url('../img/photos.jpg') center no-repeat; }
    
    
    #footer { padding: 5px 0 0 0; }
    #footer .fb-like { float: left; width: 100px; margin-left:5px; overflow: hidden; }
    #footer .share 
    { 
        background: url("../img/share.jpg") bottom left no-repeat;
        float: left; 
        width: 144px;
        padding-left: 40px; 
        margin-left: 26px;
        margin-right: 5px;
    }
    #footer ul, #footer ul li { margin: 0; float: left; }
    #footer ul.share-boxes li { float: left; margin-left: 1px; }
    #footer ul.share-boxes li a,#footer ul.share-boxes li a:link 
    {
        display: block;
        width: 23px;
        height: 23px;
        text-indent: -5000px;
    }
    #footer ul li a.facebook { background: url('../img/facebook.jpg') top left no-repeat; }
    #footer ul li a.twitter { background: url('../img/twitter.jpg') top left no-repeat; }
    #footer ul li a.digg { background: url('../img/digg.jpg') top left no-repeat; }
    #footer ul li a.delicious { background: url('../img/delicious.jpg') top left no-repeat; }
    #footer ul li a.reddit { background: url('../img/reddit.jpg') top left no-repeat; }
    #footer ul li a.stumble { background: url('../img/stumble.jpg') top left no-repeat; }
    #footer p.copyright 
    { 
        font-size: 9px; 
        text-align: center; 
        color: #595959; 
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: 1px;
        margin: 0;
        padding: 0;
    }
    #footer ul.legal li { float: left; width: 150px; text-transform: uppercase; font-size: 10px; font-weight: bold; }
    #footer ul.legal li.privacy { text-align: right; padding-right: 10px; }
    #footer ul.legal li.terms { text-align: left; padding-left: 10px; }

/* Misc
===================================================*/
    .table { display: table; margin: 0 auto; }

/* #Media Queries
================================================== */
	/* Mobile/Browser */
	@media only screen and (max-width: 767px) {
	    #synopsis header h1 a, #synopsis header h1 a:link { width: 320px; }
        #photos .main-view { width:320px; }
        #navigation ul li a, #navigation ul li a:link { width: 320px; }
	   
        #footer .fb-like { float: left; width: 100px; }
        #footer ul.legal li { float: left; width: 150px; }
	}
	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) 
	{
	   #home { background-position: center; }
	   #synopsis header h1 a, #synopsis header h1 a:link { width: 480px; }
	   #photos .main-view { width:480px; }
	   #navigation ul li a, #navigation ul li a:link { width: 480px; }
	   #footer .fb-like { float: left; width: 260px; }
	   #footer ul.legal li { float: left; width: 230px; }
	}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/