@charset "UTF-8";
/* CSS Document */

body {  
    background-color: #5b331a;  
}

.page {
	max-width: 820px;
	margin: 0px auto 0px auto;
	position: relative;
	background: #fff;
}

article {padding: 20px 20px 10px 20px;}

h1 { font-size:2em; font-weight: normal; color: #a6430a; margin: 0 .5em .5em 0; }
h2 { font-size: 1.7em; margin: 0 0 1em 0; }
h2 { font-size: 1.5em; margin: 0 0 1em 0; }

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

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

.promo h3 { font-size: .9em; margin: 0; }
.promo p { line-height: 1.2em; font-size: .7em; margin-bottom: .5em; }

.promo { background-repeat: no-repeat; }

.promo.one { background-image: url(../images/promo_1.jpg); }
.promo.two { background-image: url(../images/promo_2.jpg); }
.promo.three { background-image: url(../images/promo_3.jpg); }

.promo_container { padding:0px 0px 15px 20px; }
    
.promo_container .promo {
	width: 33%;
	float: left;
	background-position: 0px 3px;
}

.promo_container .promo .content { padding: 0px 30px 0px 70px; }

.clear-fix { clear:both; line-height: 1px; }

header {
    background: url(../images/MechBot_banner_large.jpg) no-repeat right 0px;
    height: 275px;
    background-size: 100% auto;
    background-color: #000000;
        
}

nav {  
    height: 40px;  
    width: 100%;  
    background: #834823;  
    font-size: 11pt;  
    font-family: 'PT Sans', Arial, sans-serif;  
    font-weight: bold;  
    position: relative;  
    border-bottom: 2px solid #5b331a;  
}  
nav ul {  
    padding: 0;  
    margin: 0 auto;  
    width: 600px;  
    height: 40px;  
}

nav li {  
    display: inline;  
    float: left;  
}

.clearfix:before,  
.clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
.clearfix {  
    *zoom: 1;  
}

nav a {  
    color: #fff;  
    display: inline-block;  
    width: 100px;  
    text-align: center;  
    text-decoration: none;  
    line-height: 40px;  
    text-shadow: 1px 1px 0px #5b331a;  
}

nav li a {  
    border-right: 1px solid #e18952;  
    box-sizing:border-box;  
    -moz-box-sizing:border-box;  
    -webkit-box-sizing:border-box;  
}  
nav li:last-child a {  
    border-right: 0;  
}

nav a:hover, nav a:active {  
    background-color: #e18952;  
}

nav a#pull {  
    display: none;  
}

footer { font-size: .85em; color:#9ba0bd; background-color: #5b331a; padding: 10px 10px 10px 0;}

@media screen and (max-width: 620px) {
	
	header { 
            background: url(../images/mechbot_banner_medium.jpg) no-repeat right 0px;
            background-size: 100%;
            height: 208px;
            background-color: #000000;
        }
	 
    nav {   
        height: auto;  
    }  
    nav ul {  
        width: 100%;  
        display: block;  
        height: auto;  
    }  
    nav li {  
        width: 50%;  
        float: left;  
        position: relative;  
    }  
    nav li a {  
        border-bottom: 1px solid #e18952;  
        border-right: 1px solid #e18952;  
    }  
    nav a {  
        text-align: left;  
        width: 100%;  
        text-indent: 25px;  
    }
	
	.promo_container { padding: 0px 20px 15px 20px; }
	.promo_container .promo { background-position: 0px 0px; }
	.promo_container .promo .content { padding: 70px 30px 0px 0px; }
	 
}  

@media only screen and (max-width : 480px) {
	
	header {
            background: url(../images/mechbot_banner_small.jpg) no-repeat right 0px;
            background-size: 100%;
            height: 161px;
            background-color: #000000;
        }
	  
    nav {  
        border-bottom: 0;  
    }  
    nav ul {  
        display: none;
        height: auto;  
    }  
    nav a#pull {  
        display: block;  
        background-color: #5b331a;
        width: 100%;  
        position: relative;  
    }  
    nav a#pull:after {  
        content:"";  
        background: url('nav-icon.png') no-repeat;  
        width: 30px;  
        height: 30px;  
        display: inline-block;  
        position: absolute;  
        rightright: 15px;  
        top: 10px;  
    }
	
	.promo_container { padding: 0px; }

	.promo_container .promo {
	width: auto;
	float: none;
	padding: 10px 0px 0px 0px;
	background-position: 20px 13px;
	border-top: 1px solid #ccc;
	}

	.promo_container .promo .content { padding: 0px 20px 5px 90px; }
	 
}

@media only screen and (max-width : 320px) {  
    header {
            background: url(../images/mechbot_banner_really_small.jpg) no-repeat right 0px;
            background-size: 100%;
            height: 107px;
            background-color: #000000;
        }
    
    nav li {  
        display: block;  
        float: none;  
        width: 100%;  
    }  
    nav li a {  
        border-bottom: 1px solid #e18952;  
    }  
}