shtml, body 
{
	color:#444488; font-family:verdana,arial,helvetica,sans-serif; 
	font-size:20px; background-color: #FFF; 
	margin-top:1px; margin-left:1px; margin-right:1px; 
	margin-bottom:1px; 
        height: 100%;
	
	-webkit-user-select: none;
	-moz-user-select: -moz-none;
	-ms-user-select: none;
	user-select: none;
}
p { font-size: 20px; color:#222244; font-family:arial;  }
img { border:0; }
span { font-size: 20px; color:#222244; font-family:arial; }

b { font-size: 20px; color:#222244; font-family:arial;  }

#title{ font-weight:bold; font-size: 20px;    text-decoration: none; }


#leftbar{
  background: #FFF; 
  color: #444;   
  width: 188px;       
  height: 100%;    
  position: fixed; 
  top: 0;
  left: 0; 
  position : absolute;
  bottom:0;
  float:left;
}
#content-wrapper{
  background: #fff;
  height: 100%;  
  margin: 0; 
  padding: 0;
  position :absolute;
  top:0;
  right:0;
  bottom:0;
  left:0px;  
  display:inline-block;  
  border: 1px darkgrey; 
 /* box-shadow: 3px 3px 5px 6px #e4e4e4; */
  width:100%;

  
}
#content{
  color: #444; 
  height: 100%; 
  width:100%;
  position: fixed;
  border: 1px darkgrey; 
  box-shadow: 1px 1px 1px 1px #e4e4e4;  
  text-align: left;
  top : 0;
  left: 188px;
}
#page{
  overflow: auto;
  margin : 0px 0px 0px 0px;
  
  color: #444;  
  height: 100%;
  padding: 0.2em 1em 1em 2em;
  position: fixed; 
  border: 1px darkgrey; 
  box-shadow: 1px 1px 1px 1px #e4e4e4; 
  
}

/*
body.exo {color:#444488; font-family:verdana,arial,helvetica,sans-serif; font-size:20px; background-color: #FFFFFF; 
margin-top:1px; margin-left:1px; margin-right:1px; margin-bottom:1px; 
}
*/
body.about {color:#181844; font-family:tahoma,verdana,arial,helvetica,sans-serif; 
            font-size:16px; background-color: #FFFFFF; 
margin:0; 
height: 100%;
} 

	table.tableNavigation {

		border-color:#D3DAED; 
		border-width:1px; 
		border-style:hidden; 
		border-spacing:4px;  
		border-style:solid;

		text-align: left;
		text-decoration: none;
		font-family:arial;
		font-size:18px;
		color: #111155;
	}
/*______________________*/
font.clas { font-family:arial;	font-size:16px; font-style:italic;}
font.age  { font-family:arial;	font-size:16px; font-style:italic; color:gray; }
div.stars { font-family:arial;	font-size:16px; font-style:italic; cursor:pointer; width:58px; background-image: url("../image/stars.png"); background-repeat:no-repeat; text-align:center; }
div.gohome{ cursor:pointer; width:58px; background-image: url("../image/exit.png"); background-repeat:no-repeat; display: table-cell; vertical-align: top; }
div.medal { cursor:pointer; width:58px; background-image: url("../image/hof.png"); background-repeat:no-repeat; display: table-cell; vertical-align: top; }
td.stars  { vertical-align: top; width : 33%; text-align: right; }

span.colored2 {	display: block;	text-align: center;	text-decoration: none;	font-family:arial;
	font-size:16px;	color: #444488;	border: solid 1px #8888AA;	background-color:#FF9999;	}
	
span.colored4 {	display: block;	text-align: center;	text-decoration: none;	font-family:arial;
	font-size:16px;	color: #444488;	border: solid 1px #8888AA;	background-color:#99FF99;	}


/*_____________________________________________________________________     1 GRAY    */

	A.linkNavigation1 {	display: block;	width: 28px;	text-align: center;	text-decoration: none;	font-family:arial;
	font-size:16px;	color: #444488;	border: solid 1px #8888AA;	background-color:#FFFFFF;	}
	A.linkNavigation1:hover {	border: solid 1px #222244;	background-color:#DDDDFF;	}

	A.linkNavigation11 {	display: block;	width: 28px;	text-align: center;	text-decoration: none;	font-family:arial;
	font-size:16px;	color: #444488;	border: solid 1px #444466;	background-color:#FFFFFF;	}
	A.linkNavigation11:hover {	border: solid 1px #222244;	background-color:#BBBBDD;	}

/*_____________________________________________________________________     2 RED    */

	A.linkNavigation2 {	display: block;	width: 28px;	text-align: center;	text-decoration: none;	font-family:arial;
	font-size:16px;	color: #444488;	border: solid 1px #8888AA;	background-color:#FF9999;	}
	A.linkNavigation2:hover {	border: solid 1px #222244;	background-color:#DD7777;	}

	A.linkNavigation21 {	display: block;	width: 28px;	text-align: center;	text-decoration: none;	font-family:arial;
	font-size:16px;	color: #444488;	border: solid 1px #444466;	background-color:#FF9999;	}
	A.linkNavigation21:hover {	border: solid 1px #222244;	background-color:#DD7777;	}

/*_____________________________________________________________________     3 YELLOW    */


	A.linkNavigation3 {	display: block;	width: 28px;	text-align: center;	text-decoration: none;	font-family:arial;
	font-size:16px;	color: #444488;	border: solid 1px #8888AA;	background-color:#FFFF99;	}
	A.linkNavigation3:hover {	border: solid 1px #222244;	background-color:#DDDD77;	}

	A.linkNavigation31 {	display: block;	width: 28px;	text-align: center;	text-decoration: none;	font-family:arial;
	font-size:16px;	color: #444488;	border: solid 1px #444466;	background-color:#FFFF99;	}
	A.linkNavigation31:hover {	border: solid 1px #222244;	background-color:#DDDD77;	}

/*_____________________________________________________________________     4 GREEN    */


	A.linkNavigation4 {	display: block;	width: 28px;	text-align: center;	text-decoration: none;	font-family:arial;
	font-size:16px;	color: #444488;	border: solid 1px #8888AA;	background-color:#99FF99;	}
	A.linkNavigation4:hover {	border: solid 1px #222244;	background-color:#77DD77;	}

	A.linkNavigation41 {	display: block;	width: 28px;	text-align: center;	text-decoration: none;	font-family:arial;
	font-size:16px;	color: #444488;	border: solid 1px #444466;	background-color:#99FF99;	}
	A.linkNavigation41:hover {	border: solid 1px #222244;	background-color:#77DD77;	}



	A.linkOption {	display: block;	padding:4px; text-align: left;text-decoration: none;font-family:arial;font-size:16px;color: #444488; BORDER: none;
	border: solid 1px #8888AA; border: solid 1px #C1C1D9; background-color:#FFFFFF;  text-align:center;}
	A.linkOption:hover { border: solid 1px #222244;	background-color:#CEDAFA; }

	A.linkOption0 {display: none;	padding:4px; text-align: left;text-decoration: none;font-family:arial;font-size:16px;color: #444488; BORDER: none;
	border: solid 1px #8888AA; border: solid 1px #8888AA; background-color:#FFFFFF; cursor:default;   text-align:center; }

	A.linkOption1 {display: block;	padding:4px; text-align: left;text-decoration: none;font-family:arial;font-size:16px;color: #444488; BORDER: none;
	border: solid 1px #8888AA; border: solid 1px #FFFFFF; background-color:#FFFFFF; cursor:default;   text-align:center;}

	A.linkOption11 {display: block;	padding:4px; text-align: left;text-decoration: none;font-family:arial;font-size:16px;color: #8888AA; BORDER: none;
	border: solid 1px #8888AA; border: solid 1px #8888AA; background-color:#FFFFFF; cursor:default;   text-align:center;}

	A.linkOption2 {	display: block;	padding:4px; text-align: left;text-decoration: none;font-family:arial;font-size:16px;color: #444488; BORDER: none;
	border: solid 1px #8888AA; border: solid 1px #8888AA; background-color:#FF9999; cursor:default;   text-align:center;}


	A.linkOption3 {	display: block;	padding:4px; text-align: left;text-decoration: none;font-family:arial;font-size:16px;color: #444488; BORDER: none;
	border: solid 1px #8888AA; border: solid 1px #8888AA; background-color:#FFFF99; cursor:default;   text-align:center;}


	A.linkOption4 {	display: block;	padding:4px; text-align: left;text-decoration: none;font-family:arial;font-size:16px;color: #444488;BORDER: none;
	border: solid 1px #8888AA; border: solid 1px #8888AA; background-color:#99FF99; cursor:default;   text-align:center;}



	A.linkScore1 {	color: #444488; background-color:#FFFFFF; border: solid 1px #8888AA; display: block; padding:2px; text-align: left;text-decoration: none;font-family:arial;font-size:16px; }
	A.linkScore1:hover { background-color:#CEDAFA; border: solid 1px #222244;}

	A.linkScore2 {	color: #444488; background-color:#FF9999; border: solid 1px #8888AA; display: block; padding:2px; text-align: left;text-decoration: none;font-family:arial;font-size:16px; }
	A.linkScore2:hover { background-color:#FF9999; border: solid 1px #222244;}

	A.linkScore3 {	color: #444488; background-color:#FFFF99; border: solid 1px #8888AA; display: block; padding:2px; text-align: left;text-decoration: none;font-family:arial;font-size:16px; }
	A.linkScore3:hover { background-color:#FFFF99; border: solid 1px #222244;}

	A.linkScore4 {	color: #444488; background-color:#99FF99; border: solid 1px #8888AA; display: block; padding:2px; text-align: left;text-decoration: none;font-family:arial;font-size:16px; }
	A.linkScore4:hover { background-color:#99FF99; border: solid 1px #222244;}

a.situationID
{
	text-align: right;
	text-decoration: underline;
	font-family:arial;
	font-size:14px;
	color: #444488;
}

span.situationID
{
	text-align: right;
	text-decoration: none;
	font-family:arial;
	font-size:12px;
	color: #AAAAAD;
}

div#block
{
	display:none;
	text-align: left;
	text-decoration: none;
	font-family:arial;
	font-size:11px;
	color: #444488;
}

td.expand
{
	text-decoration: none;
	font-family:arial;
	font-size:10px;
	color: #AAAAAA;
}
td.top
{
	vertical-align:top;
	text-align: right;
	float: right;
	width: 200px;
        color:#444;
	
}
td.topT
{
	vertical-align:top;

}
td.topL
{
	vertical-align:top;
	text-align: left;
	float: right;
	width: 200px;
	
}
td.topH
{
	font-size:24px;	
	vertical-align:top;
	text-align: right;
	width: 200px;
	
}
/*_________________ SHADOW _______________________________________*/

.shiftcontainer{
position: relative;
left: 7px; 
top: 7px; 
}

.shadowcontainer{
width: 112px; 
}

.shadowcontainer .innerdiv{
background-color: white;
border: 1px solid gray;
padding: 6px;
position: relative;
left: -7px; 
top: -7px; 
}


/*_____________________________________________________________________*/

input.btn { 
   font-family: Arial, Helvetica, sans-serif; 
   font-size: 18px; 
   color: #222244; 
   background-color: #CEDAFA; 
   padding: 2px; 
   height: 32px; 
   width: 140px; 
   border: 1px solid #AEBAF1; 
   cursor:pointer;
} 
/*_____________________________________________________________________*/

input.btn1 { 
   font-family: Arial, Helvetica, sans-serif; 
   font-size: 14px; 
   color: #222244; 
   background-color: #CEDAFA; 
   padding: 2px; 
   height: 32px; 
   width: 148px; 
   border: 1px solid #AEBAF1; 
   cursor:pointer;
} 

select {
  color:#444488; 
  font-family:verdana,arial,helvetica,sans-serif; font-size:20px; 
   background-color: #FAF7FF; 	
    cursor:pointer;  
   border: 0px solid #E1F4E1; 
}

select.domain {
  color:#222266; 
      width: 240px; 
  font-family:verdana,arial,helvetica,sans-serif; font-size:14px; 
   background-color:  #FAF7FF;
   cursor:pointer;  
   border: 1px solid #F7F3FA; 
   white-space: pre;
   
   }
select.grade {
  color:#222266; 
  width: 280px; 
  font-family:verdana,arial,helvetica,sans-serif; font-size:24px; 
   background-color:  #FAF7FF;
   cursor:pointer;  
   border: 1px solid #F7F3FA; 
}
input.start { 
   font-family: Arial, Helvetica, sans-serif; 
   font-size: 20px; 
   color: #222266; 
   background-color: #AAEEAA; 
   padding: 3px; 
   height: 48px; 
   width: 100px; 
   border: 1px solid #BBBBEE; 
   cursor:pointer;
} 

 
/*_____________________________________________________________________     1 GRAY    */

	A.link1 {	display: block;	width: 206px;	 height:58px; text-align: center;	text-decoration: none;	font-family:arial;
	font-size:18px; 	color: #444488;	border: solid 1px #8888AA;	
	}
	A.link1:hover {	border: solid 1px #222244;
	background-color: transparent;
    background-repeat: no-repeat;

	}
/*_____________________________________________________________________     ALERT    */
	
	#modalContainer {
	background-color:transparent;
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:10000;
}

#alertBox {
	position:relative;
	width:300px;
	min-height:60px;
	margin-top:50px;
	border: solid 1px #8888AA;	
	background-color: #FAF7FF; 	
	background-repeat:no-repeat;
	background-position:20px 30px;
}

#modalContainer > #alertBox {
	position:fixed;
}

#alertBox h1 {
	margin:0;
	font: 0.9em verdana,arial;
	background-color: #AAAAEE; 	
	color: #444488;
	border: solid 1px #8888AA;	
	padding:2px 0 2px 5px;
}

#alertBox p {
	font: bold 0.9em verdana,arial;
	height:40px;
	padding:3px;
	margin:5px auto;
	text-align:center;
}

#alertBox #closeBtn {
	display:block;
	position:relative;
	margin:5px auto;
	padding:3px;
	border:2px solid #000;
	width:250px;
	font:0.7em verdana,arial;
	text-align:center;
	color: #444488;
	background-color: #99FF99; 	
	text-decoration:none;
}

#alertBox #closeBtn1 {
	display:block;
	position:relative;
	margin:5px auto;
	padding:3px;
	border:1px solid #000;
	width:250px;
	font:0.7em verdana,arial;
	text-align:center;
	color: #444488;
	background-color: #DDDDFF; 	
	text-decoration:none;
    border-width: 1px;
}


input.hof { 
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 18px; 
	color: #222244; 
	background-color: #FFFFFF; 
}

input.btn2 { 
   font-family: Arial, Helvetica, sans-serif; 
   font-size: 18px; 
   color: #222244; 
   background-color: #DDDDFF; 
   padding: 2px; 
   height: 32px; 
   width: 80px; 
   border: 1px solid #BBBBEE; 
   cursor:pointer;
}

h3.hof{
	font-family: Helvetica, sans-serif;
	font-size: 0px;
	color: whitesmoke; 
        text-decoration: none;
}
table.hof  {
	width: 90%;
	margin: auto; 
	} 
td.hofright {
	text-align: right;
	font-size: 18px;
	color: white;       
	}
table.hof td {
	text-align: left;
	font-size: 18px;
	color: #181844;              
	}
	
table.aplusclickHOF
{
	margin: 0 0 0 0;
	margin-top:12px;
	width: 802px;
	height: 410px;
	vertical-align: top;
	text-align: center;
	font-family:tahoma,arial;
	font-size:18px;
	color: #181844;
	padding-top:0px;
        padding-bottom: 0px;
        border-collapse: collapse;
}

td.hoftitle {
	text-align: center;
	background-color: lightsteelblue;
        color: #444;
        border: solid 1px #ddddde;
        margin:0px;
	padding:0px;
        border-spacing:0px;
        height : 60px;
        }
        
td.hoflist {
	text-align: center;
	background-color: white; 
        border: solid 1px #ddddde;
        margin:0px;
	padding:0px;
        border-spacing:0px; 
        }

a.myA {	font-family:tahoma, arial; font-size:16px;	color: #666699; text-decoration:underline; font-style:italic;	}

h3.about { 
      font-size: 20px;
      color: #181844;
      float: left;
      font-family:tahoma, arial;
	  text-align: center;
	  text-decoration: none;
	  font-weight: normal;
	   margin-top: 0.5em;
	}
	
	a.confirm {	display: block;	padding:4px; text-align: left;text-decoration: none;font-family:arial;font-size:16px;color: #444488; BORDER: none;
	border: solid 1px #8888AA; border: solid 1px #C1C1D9; background-color:#FFFFFF;  text-align:center;  cursor:pointer;}
	a.confirm:hover { border: solid 1px #222244;	background-color:#CEDAFA; }
	
/**************************/

div#exo {
    width:100%;
    margin:0 auto;
}

div#empty {
    background:white; color:white; width:100%; font-size: xx-large;
}
table#menu {
    border: 0;
    height: 22px;
    width: 184px;
}

      
span.app {
      display: block;
      font-family: Helvetica, sans-serif;
      height: 110px;
      width: 180px;
      text-align: center;
      padding: 5px 5px;
      margin: 4px 2px;
      background-color: #FDFDFE; 
      background: -moz-linear-gradient(90deg, #fbfbfd, #fff, #f8f8f9);
      text-align: left;
      text-decoration: none;

      border: 1px solid #C1C1D9;
      -webkit-border-radius: 1px;
      border-radius: 2px;
      -webkit-transition: -webkit-box-shadow 0.10s ease-in-out;
      -moz-transition: all 0.10s ease-in-out;
      -o-transition: all 0.10s ease-in-out;
      cursor: pointer;
	display: inline-block;
	position: relative;
	vertical-align:top;
       
    }
span.app:hover{
      border-color: #e1e1e1;
      -webkit-box-shadow: #666 0px 0px 6px;
      box-shadow: #888 0px 0px 6px;
      background: -moz-linear-gradient(90deg, #f8f8f9, #fff, #f6f6f7);
    }
    

 span.h2 { 
            font-size: 14px;
            color: #333344;
            text-align: left;
            text-decoration: none;
            font-weight: normal;
            margin-top: 0.2em;
	}

img.h2 { border:0; margin: 2px 2px; 
         float: right; 
         max-width:  100px;
         max-height: 50px;
}
a.list {
	position: relative;
	text-align: center;
	vertical-align: top;
     
	}
div.list {
	position: relative;
	text-align: center;
	vertical-align: top;
     
	}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}