@charset "utf-8";

/* Pool & Spa Maintenance Media Queries */



/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	/* [disabled]max-width: 100%; */
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	/* [disabled]width:100%; */
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	15;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* ============================================================ */
/* ============================================================ */
/* 		     Mobile Layout: 480px and below.					*/
/* ============================================================ */
/* ============================================================ */










/* ============================================================ */
/* ============================================================ */
/* 			iPhone Portrait Layout: 481px to 640px. 
			Inherits styles from: Mobile Layout.				*/
/* ============================================================ */
/* ============================================================ */

@media only screen and (min-width: 480px) {
	
	/*sindex page tyles*/
	#sitest {
		max-width: 475px;
	}
	
	/*dailytests page tyles*/
	#dailytests {
		max-width: 475px;
	}
	
	/* Glossary page styles*/
	#glossary-info {
		width: 90%;
	}
}








/* ============================================================ */
/* ============================================================ */
/* 			iPhone Landscape Layout: 481px to 768px. 
			Inherits styles from: Mobile Layout.				*/
/* ============================================================ */
/* ============================================================ */

@media only screen and (min-width: 641px) {
	
	/* login & register Pages Styles  */	
	/*================================*/	
	.login_box {
		width: 50%;
	}

	/*sindex page tyles*/
	#sitest {
		max-width: 600px;
	}
	
	/*dailytests page tyles*/
	#dailytests {
		max-width: 600px;
	}
	#dailytests .input-container {
		max-width: 425px;
	}
	
}








/* ============================================================ */
/* ============================================================ */
/* 			Tablet Layout: 769px to a max of 1024px.  
	Inherits styles from: Mobile Layout and Android Layout.		*/
/* ============================================================ */
/* ============================================================ */

@media only screen and (min-width: 768px) {
	
	/* login & register Pages Styles  */	
	/*================================*/
	.login_box {
		width: 50%;
	}
	
	/*		Index Page Syles: 		*/
	/*==============================*/
	#indexMenu {
		width: 80%;
	}	
	
	#indexMenu .indexmenu-block {
		background-color: rgba(0,0,0,1);
		height: 70px;
		width: 44%;
		margin: 2%;
	}

	#indexMenu .indexmenu-block .indexmenu-item {
		width: 100%;
		height: 70px;
		margin: 0px;
		padding: 0px;
		text-align: left;
	}
	
	#indexMenu .indexmenu-block .indexmenu-item .indexmenu-img {
		float: left;
		clear: none;
	}
	
	#indexMenu .indexmenu-block .indexmenu-item .indexmenu-img img {
		height: 70px;
		width: 70px;
	}
	
	#indexMenu .indexmenu-block .indexmenu-item .indexmenu-header {
		margin-left: 80px;
	}
	
	#indexMenu .indexmenu-block .indexmenu-item .indexmenu-header h4 {
		font-size: 1em;
		font-weight: bold;
		color: rgba(0,255,255,1);
	}
	
	#indexMenu .indexmenu-block .indexmenu-item .indexmenu-header p {
		display: block;
	}
	
	
	/*	Adjusment Page Syles: 		*/
	/*==============================*/
	#adjustForm {
		max-width: 650px;
	}
	
	#adjustForm #myAdjust .formLabel {
		text-align: right;
		padding: 8px 0px 0px 0px;

	}

	/*	Charts Page Syles: 		*/
	/*==============================*/
	#charts section {
		max-width: 500px;
		font-size: 1em;
	}
	
	#charts section #siTbl {
		font-size: 1em;
	}

	/* Glossary page styles*/
	/*==============================*/
	#glossary-info {
		width: 75%;
	}
	
	
	
	
	
	
	/* Box Page mQuery styles */
	/* ------------------------------ */
	#myBox {
		max-width: 1024px;
	}		
	.myBox-container .card {
		flex: 0 0 45%;
	} 
	
}








/* ============================================================ */
/* ============================================================ */
/* 			Desktop Layout: 1025px and up.  
	Inherits styles from: Mobile, Android & Tablet Layout.		*/
/* ============================================================ */
/* ============================================================ */

@media only screen and (min-width: 1025px) {
	/* login & register Pages Styles  */	
	/*================================*/
	.login_box {
		width: 30%;
	}
	
	/*		Index Page Syles: 		*/
	/*==============================*/
	#indexMenu {
		width: 60%;
	}
	
	#indexMenu .indexmenu-block {
		background-color: rgba(0,0,0,1);
		height: 70px;
		width: 44%;
		margin: 2%;
	}
	
	#indexMenu .indexmenu-block .indexmenu-item {
		width: 100%;
		height: 70px;
		margin: 0px;
		padding: 0px;
		text-align: left;
	}
	
	#indexMenu .indexmenu-block .indexmenu-item .indexmenu-img {
		float: left;		
	}	
	
	#indexMenu .indexmenu-block .indexmenu-item .indexmenu-img img {
		height: 70px;
		width: 70px;
	}
	
	#indexMenu .indexmenu-block .indexmenu-item .indexmenu-header {
		margin-left: 80px;
	}
	
	#indexMenu .indexmenu-block .indexmenu-item .indexmenu-header h4 {
		font-size: 1em;
		font-weight: bold;
		color: rgba(0,255,255,1);
	}
	
	#indexMenu .indexmenu-block .indexmenu-item .indexmenu-header p {
		display: block;
	}
	
	
	
	
	/* Box Page mQuery styles */
	/* ------------------------------ */
	
	#myBox {
		max-width: 1200px;
	}	
	.myBox-container .card {
		flex: 0 0 30%;
	} 
	
}























@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

or use ems

@media (min-width:20em) { /* smartphones, iPhone, portrait 480x320 phones. */ }
@media (min-width:30.063em) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:40.063em) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:60.063em) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:64.063em) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:80.063em) { /* hi-res laptops and desktops */ }