/* Retina iPad in portrait and landscape */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { 

.page {
  background-color : #99CCFF;
	margin: 0 auto;
	width: 900px;
	max-width: 900px;
	min-width: 768px;
	position:relative;
		/* These two settings remove the white border next to the header. */
	padding-left:0px;
	padding-right:0px;
}

}


/* iPad 5 in portrait and landscape - NOT being "caught" by Retina Above */
/* Put in head section <meta name="../../viewport" content="width=device-width">*/
/* and <link rel="stylesheet" type="text/css" href="/viewport.css" media="only screen" />*/
/* Change <table align="center" class="masterTable" width=900 bgcolor="#99CCFF">*/
/* To     <table align="center" class="page"> in html page*/

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px){

.page {
  background-color : #99CCFF;
	margin: 0 auto;
                  width: 1000;
	max-width: 1000px;
	min-width: 768px;
	position:relative;
		/* These two settings remove the white border next to the header. */
	padding-left:0px;
	padding-right:0px;
}
}





/* iPhone 5 & 5S in portrait & landscape */

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {

.page {
  background-color : #99CCFF;
	margin: 0 auto;
	width: 900px;
	max-width: 900px;
	min-width: 320px;
	position:relative;
		/* These two settings remove the white border next to the header. */
	padding-left:0px;
	padding-right:0px;
}
}

/* iPhone 6 in portrait & landscape */

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) { 

.page {
                  background-color : #99CCFF;
	margin: 0 auto;
	width: 900px;
	max-width: 900px;
	min-width: 375px;
	position:relative;
		/* These two settings remove the white border next to the header. */
	padding-left:0px;
	padding-right:0px;
}

}


/* iPhone 6 Plus in portrait & landscape */

@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) { 

.page {
                  background-color : #99CCFF;
	margin: 0 auto;
	width: 414px;
	max-width: 900px;
	min-width: 900px;
	position:relative;
		/* These two settings remove the white border next to the header. */
	padding-left:0px;
	padding-right:0px;
}

}

/* Styles for ASL PRO */

/* General Frame Styles */
.generalField {
  background-color : #000033;
  padding : 0;
}

/* Banner Ad Styles */

.bannerAd {
  background-color : white;
  font-weight : bold;
}


/*  Title Field Styles */

.titleField {
  background-color : #000033;
  padding : 1;
}


.titleFieldLogo {
  background-color : #000033;
  vertical-align : left;
  padding : 1;
}

.titleFieldHeaderText {
  font-family : arial, helvetica, sans-serif;
  font-size : 18;
  color : #ffffff;
  font-weight : bold;
  vertical-align : middle;
  text-align : center;
  padding : 1;
  text-decoration : none;
}


.titleFieldHeaderSubText {
  font-family : arial, helvetica, sans-serif;
  font-size : 12px;
  #color : #ffffff;
  color : #99ccff;
  vertical-align : middle;
  text-align : center;
  padding : 0;
}

/* Main Top Bar Navigation Styles */

.mainNavBarField {
  background-color : #000033;
  vertical-align : middle;
  padding-top : 1;
  padding-bottom : 1;
}

.mainNavBarSelectedText {
  font-family : arial, helvetica, sans-serif;
  font-size : 14;
  color : #ffffff;
  font-weight : bold;
  vertical-align : middle;
  text-align : center;
  padding-top : 1;
  padding-bottom : 1;
  text-decoration : none;
}


.mainNavBarUnselectedText {
  font-family : arial, helvetica, sans-serif;
  font-size : 12;
  color : #ffffff;
  font-weight : normal;
  vertical-align : middle;
  text-align : center;
  padding-top : 1;
  padding-bottom : 1;
  text-decoration : none;
}

/* Main Side Bar Navigation Styles */

.sideNavBarField {
  background-color : #000033;
  vertical-align : top;
  padding-top : 2;
  padding-bottom : 2;
}

.sideNavBarPlayer {
  background-color : #000000;
  vertical-align : top;
  padding-top : 2;
  padding-bottom : 2;
  text-align : center;
}

.sideNavBarSelectedText {
  font-family : arial, helvetica, sans-serif;
  font-size : 14px;
  color : #ffffff;
  font-weight : bold;
  vertical-align : top;
  text-align : left;
  padding-top : 2;
  padding-bottom : 2;
  text-decoration : none;
}

.sideNavBarButton {
  vertical-align : middle;
  text-align : center;
  padding-top : 4;
  padding-bottom : 4;
  font-family : arial, helvetica, sans-serif;
  font-size : 12px;
  color : #000000;
}


.sideNavBarUnselectedText {
  font-family : arial, helvetica, sans-serif;
  font-size : 11px;
  #color : #ffffff;
  color : #99ccff;
  font-weight : normal;
  vertical-align : top;
  text-align : left;
  padding-top : 2;
  padding-bottom : 2;
  text-decoration : none;
}

.answerText {
  font-family : arial, helvetica, sans-serif;
  font-size : 11px;
  color : #99ccff;
  font-weight : normal;
  vertical-align : top;
  text-align : left;
  padding-top : 2;
  padding-bottom : 2;
  text-decoration : none;
}

.correctAnswerText {
  font-family : arial, helvetica, sans-serif;
  font-size : 11px;
  color : #00ff00;
  font-weight : bold;
  vertical-align : top;
  text-align : left;
  padding-top : 2;
  padding-bottom : 2;
  text-decoration : none;
}

.fiftyFiftyAnswerText {
  font-family : arial, helvetica, sans-serif;
  font-size : 11px;
  color : #ffff00;
  font-weight : bold;
  vertical-align : top;
  text-align : left;
  padding-top : 2;
  padding-bottom : 2;
  text-decoration : none;
}

.incorrectAnswerText {
  font-family : arial, helvetica, sans-serif;
  font-size : 11px;
  color : #ff3333;
  font-weight : bold;
  vertical-align : top;
  text-align : left;
  padding-top : 2;
  padding-bottom : 2;
  text-decoration : none;
}


/* Styles governing Body Text in static content */
.bodyBackground {
  background-color : #000033;
}

.masterTable {
  background-color : #ffffff;
}

.bodyField {
  background-color : #000033;
  padding : 0;
  vertical-align : top;
}

.bodyHeader {
  font-family : arial, helvetica, sans-serif;
  font-size : 12;
  color : #ffffff;
  background-color : #000033;
  font-weight : bold;
  vertical-align : top;
  text-align : center;
  padding : 3;
}

.bodySubHeader {
  font-family : arial, helvetica, sans-serif;
  font-size : 10;
  color : #ffffff;
  background-color : #000033;
  font-weight : bold;
  vertical-align : top;
  text-align : left;
  padding : 0;
  text-decoration : none;
}

.bodyText {
  font-family : arial, helvetica, sans-serif;
  font-size : 10;
  color : #ffffff;
  background-color : #000033;
  font-weight : normal;
  vertical-align : top;
  text-align : left;
  padding : 0;
}

/* Footer Styles */

.footerField {
  background-color : #000033;
  vertical-align : top;
  padding : 0;
}

.footerText {
  font-family : arial, helvetica, sans-serif;
  font-size : 10;
  color : #ffffff;
  font-weight : normal;
  vertical-align : middle;
  text-align : center;
  text-decoration : none;
}