/* desktop view */
@media screen and (min-width: 992px){  
    .navbar-header { float:left; }
    #header .navbar-collapse { background:none; }
    #header .navbar-nav {
		margin-top: 29px;
	}
    #header .logo {

		float: left;
		display: block;
		margin-bottom: 18px;
	}
    #header ul.navbar-nav {
        float: right;
    }

    .navbar-nav>li>a{
    }
    .navbar-brand img{
        height: 76px;       
    }
	.banner-caption {
		margin-top:43px;
	}
	.banner-caption .banner-button {
		margin-top:30px;
	}

	/*slideshow*/
	.region-slideshow { height:440px; }
	.region-slideshow ul.view-slideshow_tabs {
		text-align: left;

		position: relative;
		left: 645px;
		top: -42px;
		width: 281px;
	}
	.ie8 .region-slideshow ul.view-slideshow_tabs {
		left: 663px;
		top:-57px;
	}
	.front #top-content { margin-top: -107px; }
    .main-container {
		background-position:280px top;
	}
	#bot-content .features img {
		max-width:140px;

	}
	#bot-content .features ul, #bot-content .features h4 {
		margin-left:160px;

	}

}

/********************************************** this responsive point is not used, except for docs page */    
@media screen and (min-width: 1200px){  
	.container {
		max-width: 980px !important; /* by default, bootstrap framework max width is 1200px, due to multi commander web design, then i limit it to 980px only. */
	}

	.node-type-docs .container {
		max-width:none !important; /* this will return max width to default bootstrap, just for docs content type */
	}
}

/* sample more responsive point at 1400px */
@media screen and (min-width: 1400px){  /* for > 1400 screen */
	.node-type-docs .container {
		width: 1370px; /*this value is from 1400-15-15 gutter */
	}
}