/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */
.browsehappy { margin:0; background:#ddd; color:#000; padding:0.7em; text-align:center; }

.pull-left{ float:left; }

.pull-right{ float:right; }

.centre{text-align:center; }


body{
    background-color: #dddddd;
}


.header {
    margin:10px 0 10px;
}

    .logo{
        width:450px; height:72px;
        background: url(../img/logo-450x72.jpg) no-repeat 0 0;
    }
	.logofb{
        width:450px; height:72px;
        background: url(../img/logofb-450x72.jpg) no-repeat 0 0;
    }

.container {
    background-color: #ffffff;
    margin-top: 5px;
}

.sixteen.columns.fullwidth {
    margin-left:0;
    margin-right:0;
    width:inherit;
}

.banner{
    float:left;
    width:100%;
    border-top:8px solid #4d1c04;
    border-bottom:8px solid #4d1c04;
    margin:0;
    background-color:#4d1c04;
}

    .banner li{
        float:left;
        margin:0;
        display: inline-block;
        background-color:#4d1c04;
        width:160px; height:80px;
    }

    .banner li.last{
        margin-right:0;
    }

    .banner li img{
        width:100%;
    }

.nav {
    float:right;
    margin:2px 0 0 0;
    font-size: 0.85em;
}

    .nav ul{
        padding:10px 10px 0 10px;
        margin:0;
    }

        .nav ul li{
           display:inline-block;
           margin:0;
           padding:2px 6px;
           width:80px;
           text-decoration: underline;
           text-align: center;
        }

    .nav a, .nav a:link, .nav a:visited, .nav a:hover, .nav a:active{
        text-decoration:none;
    }

    .nav ul li.current {
        background-color: #4d1c04;
        text-decoration:none;
        color:#ffffff;
    }

    .nav a:hover{
        text-decoration:underline;
    }

.secnav {
    clear:both;
    float:left;
    margin:0 0 0 10px;
    font-size: 0.85em;
}

.secnav ul{
    padding:0;
}

.secnav ul li{
    color:#e77436;
    margin:0;
    padding:2px;
    text-decoration: underline;
}

.secnav a, .secnav a:link, .secnav a:visited, .secnav a:hover, .secnav a:active{
    text-decoration:none;
    color:#e77436;
}

.secnav ul li.current {
    text-decoration:none;
}

.secnav a:hover{
    text-decoration:underline;
}


.sixteen.columns.footer{
    margin:20px 0 0 0;
    font-size: 12px;
    background-color:#4d1c04;
    color:#ddd;
    width:inherit;
}

    .footer .copyright, .footer .pitch{
        padding:3px 10px;
    }

    .footer .copyright{
        float:left;
    }

    .footer .pitch{
        float:right;
    }

/* #Page Styles
================================================== */
.embed-container {
    position: relative;
    padding-bottom: 75%; /* 375/500 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
}

.embed-container.last {
    padding-bottom: 56.4%; /* 282/500 ratio */
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {

        .banner li{
            margin:0;
            width:153px; height:76px;
        }

        .banner li.second-last{
            margin-right:3;
        }

        .banner li.last{
            display:none;
        }

    }

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {

        .banner{
            display:none;
        }

        .nav{
            margin-top:16px;
        }
    }

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
        .logo{
            width:300px; height:52px;
            background: url(../img/logo-300x52.jpg) no-repeat 0 0;
        }
		.logofb{
            width:300px; height:52px;
            background: url(../img/logofb-300x52.jpg) no-repeat 0 0;
        }
    }

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
        .logo{
            width:300px; height:52px;
            background: url(../img/logo-300x52.jpg) no-repeat 0 0;
        }
		.logofb{
            width:300px; height:52px;
            background: url(../img/logofb-300x52.jpg) no-repeat 0 0;
        }
.flex-control-paging li a {
		width:7px;
		height:7px;
		}
		.nav ul li{
           padding:2px 0px;
		 }		
		

    }


/* #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; }
*/

#photos {
    margin: 0 auto;
    width:90%;
}

#videos {
    margin-top:30px;
}

a.download {
	color:#000099;
}

/* Flexible iFrame */

.Flexible-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.Flexible-container iframe,   
.Flexible-container object,  
.Flexible-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.flex-caption{color:#fff;text-align:center;padding:5px;font-size:14px;line-height:18px}