/*
 * $Id: responsive.css,v 2.2 2014/03/19 19:12:43 pds Exp pds $ $Revision: 2.2 $
 */
/*
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Devices layouts (Media Queries)
--------------------------------------------------------------------------------------------------------------------------------
*/
/*
--------------------------------------------------------------
1744px layout: 1600px
Gutters: 20px
--------------------------------------------------------------
Columns   1   2    3    4    5    6    7    8    9    10   11   12   13    14    15    16    17    18    19    20    21
Pixels    64  148  232  316  400  484  568  652  736  820  904  988  1027  1156  1240  1324  1408  1492  1576  1660  1744
--------------------------------------------------------------
*/
@media only screen and (min-width: 1744px) and (max-width: 1920px) {
	body { font-size: 18px; }
	#main-content { width: 1744px; background-image: url("/images/back1744.jpg") }
	.content-container { width: 1660px; }
	#navbar-container { width: 1200px; left: 230px; bottom: 17px; }
	#logo { height: 36px; }
	nav ul li { font-size: 32px; }
	nav ul li ul li { font-size: 18px; }
	#socialbar { margin-top: 8px; }
	.socialbar-icon { height: 32x; }
	#content-header { height: 166px; background-image: url("/images/roof1660.png"); }
	#content { background-image: url("/images/walls1660.png"); }
	#content-content { width: 1200px; }
	#content-home { width: 1200px; height: 900px; }
	#content-footer { height: 111px; background-image: url("/images/floor1660.png") !important; }
	.rightPic { max-height: 480px; max-width: 380px;}
	#bellyButter { width: 300px; height: 640px; }
	.labelPic { max-height: 280px; max-width: 280px; }
	.jssccPic { max-height: 560px; max-width: 390px; }

}

/*
--------------------------------------------------------------
1280px layout: 1240px
Gutters: 20px
--------------------------------------------------------------
Columns   1   2    3    4    5    6    7    8    9    10   11   12   13    14    15
Pixels    64  148  232  316  400  484  568  652  736  820  904  988  1027  1156  1240
--------------------------------------------------------------
*/
@media only screen and (min-width: 1280px) and (max-width: 1743px) {
	body { font-size: 16px; }
	#main-content { width: 1280px; background-image: url("/images/back1280.jpg") }
	.content-container { width: 1240px; }
	#navbar-container { width: 900px; left: 170px; bottom: 6px;}
	#logo { height: 28px; }
	nav ul li { font-size: 24px; margin-left: 28px;}
	nav ul li:hover ul,
	nav ul li:hover .children { top: 26px !important; }
	nav ul li ul li { font-size: 18px; }
	#socialbar { margin-top: 8px; }
	.socialbar-icon { height: 24px; }
	#content-header { height: 124px; background-image: url("/images/roof1240.png"); }
	#content { background-image: url("/images/walls1240.png"); }
	#content-content { width: 900px; }
	#content-home { width: 900px; height: 600px; }
	#yellowTang { width: 360px; }
	.rightPic { max-width: 360px; max-height: 360px; }
	#bellyButter { width: 240px; height: 640px; }
	.labelPic { max-height: 220px; max-width: 200px; }
	.jssccPic { max-height: 400px; max-width: 360px; }
	#content-footer { height: 83px; background-image: url("/images/floor1240.png"); }
	.inline-frame { height: 480px; }
}

/*
--------------------------------------------------------------
1024px Layout: 820px
Gutters: 20px
Inherits styles from: Default Layout
--------------------------------------------------------------
Columns   1   2    3    4    5    6    7    8    9    10
Pixels    64  148  232  316  400  484  568  652  736  820
--------------------------------------------------------------
*/

@media only screen and (min-width: 914px) and (max-width: 1279px) {
	body { font-size: 14px; }
	h1 { font-size: 28px; }
	h2 { font-size: 24px; }
	h3 { font-size: 20px; }
	h4 { font-size: 16px; }
	h5 { font-size: 12px; }
	#main-content { width: 1024px; background-image: url("/images/back1024.jpg") }
	.content-container { width: 820px; }
	#navbar-container { width: 580px; left: 120px; bottom: -2px; }
	#logo { height: 24px; margin-top: 8px; }
	nav ul li { font-size: 18px; margin-left: 18px;}
	nav ul li:hover ul,
	nav ul li:hover .children { top: 18px !important; }
	nav ul li ul li { font-size: 13px; }
	#socialbar { margin-top: 12px; }
	.socialbar-icon { height: 20px; }
	#content-header { height: 82px; background-image: url("/images/roof820.png"); }
	#content { background-image: url("/images/walls820.png"); }
	#content-content { width: 580px; }
	#content-home { width: 580px; height: 480px; }
	#content-footer { height: 55px; background-image: url("/images/floor820.png"); }
	#yellowTang { width: 280px; }
	.rightPic { max-width: 280px; max-height: 320px; }
	#bellyButter { width: 180px; height: 560px; }
	.labelPic { max-height: 150px; max-width: 124px; }
	.jssccPic { max-height: 210px; max-width: 190px; }
	.errDiv { width: 280px; }
	#contactForm { width: 500px; }
	#contactForm .contactFormField { width: 480px; }
/*
	Ipad corrections
*/
	.inline-frame { width: 800px !important; }
}

/*
--------------------------------------------------------------
Tablet Layout: 652px (768px)
Gutters: 20px
Inherits styles from: Default Layout
--------------------------------------------------------------
Columns   1   2    3    4    5    6    7    8
Pixels    64  148  232  316  400  484  568  652
--------------------------------------------------------------
*/

@media only screen and (min-width: 746px) and (max-width: 913px) {
	body { font-size: 12px; }
	h1 { font-size: 20px; }
	h2 { font-size: 18px; }
	h3 { font-size: 16px; }
	h4 { font-size: 14px; }
	h5 { font-size: 12px; }
	#main-content { width: 768px; background-image: url("/images/back768.jpg") }
	.content-container { width: 652px; }
	#navbar-container { width: 466px; left: 93px; bottom: -7px;}
	#logo { height: 18px; margin-top: 8px; }
	nav ul li { font-size: 16px; margin-left: 6px; }
	nav ul li:hover ul,
	nav ul li:hover .children { top: 16px !important; }
	nav ul li ul li { font-size: 12px; }
	#socialbar { margin-top: 10px; }
	.socialbar-icon { height: 16px; }
	#content-header { height: 65px; background-image: url("/images/roof652.png"); }
	#content { background-image: url("/images/walls652.png"); }
	#content-content { width: 466px; }
	#content-home { width: 466px; height: 466px; }
	#content-footer { height: 43px; background-image: url("/images/floor652.png"); }
	#yellowTang { width: 200px; }
	.rightPic {max-height: 230px; max-width: 180px;}
	.labelPic { max-height: 113px; max-width: 80px; }
	.jssccPic { max-height: 170px; max-width: 140px; }
	.errDiv { width: 240px; }
	#contactForm { width: 420px; }
	#contactForm .contactFormField { width: 400px; }
}

/*
--------------------------------------------------------------
Wide Mobile Layout: 400px (480px)
Gutters: 20px
Inherits styles from: Default Layout
--------------------------------------------------------------
Columns   1   2    3    4    5
Pixels    64  148  232  316  400  
--------------------------------------------------------------
*/

@media only screen and (min-width: 534px) and (max-width: 745px) {
	body { font-size: 8px; }
	h1 { font-size: 18px; }
	h2 { font-size: 16px; }
	h3 { font-size: 14px; }
	h4 { font-size: 12px; }
	h5 { font-size: 10px; }
	#main-content { 
		width: 480px;
		background-image: url("/images/back768.jpg");
	}
	.content-container { width: 400px; }
	#navbar-container { width: 340px; left: 20px; top: 18px;}
	#logo { display: none;  }
	nav ul li { font-size: 12px; margin-left: 6px; }
	nav ul li:hover ul,
	nav ul li:hover .children { top: 16px !important; }
	nav ul li ul li { font-size: 12px; }
	#socialbar { margin-top: 10px; }
	.socialbar-icon { height: 12px; }
	#content-header { height: 40px; background-image: url("/images/roof400.png"); }
	#content { background-image: url("/images/walls400.png"); }
	#content-content {
		width: 300px;
		border-radius: 8px;
		-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.25);
		-moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.25);
		box-shadow: 2px 2px 4px rgba(0,0,0,0.25);
	}
	#content-home { width: 300px; height: 300px; }
	#content-footer { height: 43px; background-image: url("/images/floor400.png"); }
	.rightPic {max-height: 180px; max-width: 85px;}
	.labelPic { max-height: 120px; max-width: 60px; }
	.jssccPic { max-height: 120px; max-width: 90px; }
	#yellowTang { width: 120px; }
	.errDiv { width: 200px; }
	#contactForm { width: 270px; }
	#contactForm .contactFormField { width: 240px; font-size: 10px;}
}

/*
--------------------------------------------------------------
Mobile Layout: 232px (320px)
Gutters: 20px
Inherits styles from: Default Layout
--------------------------------------------------------------
Columns   1   2    3
Pixels    64  148  232
--------------------------------------------------------------
*/

@media only screen and (min-width: 320px) and (max-width: 533px) {
	body { font-size: 8px; }
	h1 { font-size: 18px; }
	h2 { font-size: 16px; }
	h3 { font-size: 14px; }
	h4 { font-size: 12px; }
	h5 { font-size: 10px; }
	#main-content { 
		width: 282px;
		background-image: url("/images/back768.jpg");
	}
	.content-container { width: 282px; }
	#navbar-container { width: 282px; left: 0px; }
	#logo { display: none;  }
	nav ul li { font-size: 10px; margin-left: 6px; }
	nav ul li:hover ul,
	nav ul li:hover .children { top: 8px !important; }
	nav ul li ul li { font-size: 8px; }
	#socialbar { margin-top: 0px; }
	.socialbar-icon { height: 10px; }
	#content-header { height: 25px; background-image: none !important; }
	#content { background-image: none !important; }
	#content-content {
		width: 232px;
		border-radius: 8px;
		-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.25);
		-moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.25);
		box-shadow: 2px 2px 4px rgba(0,0,0,0.25);
	}
	#content-home { width: 232px; height: 300px; }
	#content-footer { height: 43px; background-image: none !important; }
	#yellowTang { width: 120px; }
	.rightPic {max-height: 120px; max-width: 80px;}
	.labelPic { max-height: 120px; max-width: 70px; }
	.jssccPic { max-height: 120px; max-width: 70px; }
	.errDiv { width: 200px; }
	#contactForm { width: 200px; }
	#contactForm .contactFormField { width: 180px; font-size: 8px; }
}

/*
--------------------------------------------------------------
Small Mobile Layout: 148px
Gutters: 20px
Inherits styles from: Default Layout
--------------------------------------------------------------
Columns   1   2
Pixels    64  148
--------------------------------------------------------------
*/

@media only screen and (max-width: 319px) {
		body { font-size: 8px; }
	h1 { font-size: 18px; }
	h2 { font-size: 16px; }
	h3 { font-size: 14px; }
	h4 { font-size: 12px; }
	h5 { font-size: 10px; }
	#main-content { 
		width: 282px;
		background-image: url("/images/back768.jpg");
	}
	.content-container { width: 282px; }
	#navbar-container { width: 282px; left: 0px; }
	#logo { display: none;  }
	nav ul li { font-size: 10px; margin-left: 6px; }
	nav ul li:hover ul,
	nav ul li:hover .children { top: 8px !important; }
	nav ul li ul li { font-size: 8px; }
	#socialbar { margin-top: 0px; }
	.socialbar-icon { height: 12px; }
	#content-header { height: 25px; background-image: none !important; }
	#content { background-image: none !important; }
	#content-content {
		width: 232px;
		border-radius: 8px;
		-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.25);
		-moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.25);
		box-shadow: 2px 2px 4px rgba(0,0,0,0.25);
	}
	#content-home { width: 232px; height: 300px; }
	#content-footer { height: 43px; background-image: none !important; }
	.rightPic {max-height: 120px; max-width: 120px;}
	.errDiv { width: 200px; }
	.labelPic { max-height: 120px; max-width: 50px; }
	.jssccPic { max-height: 210px; max-width: 50px; }
	#yellowTang { width: 120px; }
	#contactForm { width: 200px; }
	#contactForm .contactFormField { width: 180px; font-size: 8px; }

}