/* --------  all screens (default) -----------  */
	
	
    #mydiv {
    	font-size: 12px;
        background-color: #9F0;          /* lime green */
    }


/* --------- iphone portrait -----------  */

@media screen and (max-width: 320px) {
	
    #mydiv {
    	font-size: 20px;
        background-color: #636;          /* lavender */
    }
			
}

/* --------  iphone landscape-----------  */

@media screen and (min-width: 321px) and (max-width: 480px) {
	
	#mydiv {
    	font-size: 20px;
        background-color: #FF0;          /* golden yellow */
    }
    	
}


/* --------- ipad portrait -------------  */


@media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
	
    #mydiv {
    	font-size: 12px;
        background-color: #090;         /* green */
    }
	
}

/* --------- ipad landscape -------------  */


@media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
	
	#mydiv {
    	font-size: 12px;
        background-color: #F00;         /* red */
    }
}

/* --------  large screen ( 1440px or more) -----------  */

@media screen and (min-width: 1440px) {
		
    #mydiv {
    	font-size: 18px;
        background-color: #F90;         /* orange */
    }
	
}

body {
  margin: 0;
  background-color: white;
}
  
caption {
	font-size: 20px;
	font-weight: bold;
  text-align: center;
}

div.d1 {
  text-align: center;
}

div.d2{
  text-align: right;
}

div.center {
  margin-left: auto;
  margin-right: auto;
  width: 8em;
}

div.footer {
	height: 145px;
  background-color: #e9e9f8;
}

div.header {
	height: 170px;
}

div.nav {
}

font.blu22 {
  font-size: 22px;
  color: blue;
}

font.sz {
  font-size: 18px;
} 

font.szb {
  font-size: 18px;
  color: black;         
} 

font.szbctr {
  font-size: 18px;
  color: black;         
  text-align: center;
} 

font.szl {
  font-size: 18px;
  color: white;
  text-align: left;
} 

font.szr {
  font-size: 18px;
  color: black;
  text-align: right;    
} 

font.szy {
  font-size: 18px;
  color: yellow;
} 

h1.center {
  text-align: center;
}

h1.cblock {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

h1.red {
  color: red;
  text-align: center;
}

h2.center {
  text-align: center;
}

hr.clr {
  text-align: center;
  width: 100%;
  height: 2px;
  background: #00FFFF;
}

p.center {
  text-align: center;
}

p.ctr {
  font-size: 18px;
  text-align: center;
}

p.sz {
  font-size: 18px;
}

p.sz22 {
  font-size: 22px;
}

p.szr {
  font-size: 18px;
  text-align: right;
}

p.szl {
  font-size: 18px;
  text-align: left;
}

table.ctr {
  text-align: center;
}

table.esf {
  width: 100%;
  border: 1;
}

table.pd {
  padding: 6px;
} 
                         
table.sample {
	border-style: solid;
	border-color: black;
	font-size: 1.3em;
}

table.whtbor {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 10px;
  padding: 0px;
  border-color: 1 px #fff;
} 
                         
td.grey {
  background-color: #e9e9f8;
  border-color: #8784C6;
}

td.greywd {
  background-color: #e9e9f8;
  border-color: #8784C6;
  width: 100%;
}

td.grp {
		background-color: #E0D0D8;
		text-align:center;
		border-style: ridge;
		border-color: black;
		border-width: 1px;
} 

td.norm {
		background-color: #F6F9E6;
		text-align:center;
		border-style: solid;
		border-color: black;
		border-width: 1px;
} 

td.sz22 {
  font-size: 22px;
}

tr.blu {
  background-color: #8be4f2;
  color: black;
  text-align: center;
  font-weight:bold;
  font-face: verdana;
}

tr.grey {
	background-color: #e5e4d7;   /* light grey */
  color: black;
  font-weight: bold;
  text-align: center;
}

tr.grn {
  background-color: #c7f28b;
  color: black;
  text-align: center;
  font-weight:bold;
  font-face: verdana;
}

tr.yel {
	background-color: yellow;
  color: black;
  font-weight: bold;
  text-align: center;
}

#menu9 {
	width: 225px;
  font-size: 18px;
}
	
#menu9 li a {
	height: 32px;
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	height: 24px;
	text-decoration: none;
}	
	
#menu9 li a:link, 
#menu9 li a:visited {
	color: #FFF;
	display: block;
	background:  url(menu9.gif);
	padding: 6px 0 0 6px;
}
	
#menu9 li a:hover {
	color: #000;
	background:  url(menu9.gif) 0 -32px;
	padding: 6px 0 0 6px;
}
	
a:link { 
  color: blue; 
  text-decoration: underline;
}

a:active {
  color: blue; 
	text-decoration: underline;
}	

a:hover { 
  text-decoration: underline; 
}

a:visited { 
  color: blue;
  text-decoration: underline; 
}

.buttonbg {
	color: yellow;
	font-size: 18px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	display: block;
	margin: 0 auto;
	padding: 8px 0 0;
	width: 201px;
	height: 36px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-top-style: solid;
  border-top-width: 1px;
}

.buttonbg:hover {
	background-color: yellow;
  color: black;
}

a.tooltip {
  position: relative; /*this is the key*/
  z-index: 24; 
  background-color: #f8f8b0;         /* light pink */
  color: #000;
  text-decoration: none;
}

a.tooltip:hover {
  z-index:25; 
  background-color:#ddd;             /* light grey */
}

a.tooltip span {
  display: none;
}

a.tooltip:hover span{ /*the span will display just on :hover state*/
  display:block;
  position:absolute;
  top:1em; 
  left:4em; 
  width:10em;
  border:1px solid #0cf;
  background-color:#ccf;              /* blueish grey */
  color:#000;
  text-align: left;
}
	
#mobilebutton {
	display: none;
}

#mobldrtbl {
	display: none;
}

#newsbox {
	width: 700;
	height: 150;
}