.html,body{background-color:ivory;}

.container{  	padding: 10px;		
		/*background-image:url("../images/bg.jpg");*/
		/*background-color:#252525; */		
		color:black;
		margin: 0 auto;
  		margin-top: 3px;
  		width:80%;  	
  		font-family: 'Oxygen', sans-serif;
  		/*font-family: Helvetica, sans-serif; 	*/
  		border-style: solid;
    		border-width: 5px;
    		border-color: #FFF;
    		/* Setting the box-sizing method: */
		box-sizing:border-box;

		/* Firefox still requires the -moz prefix */
		-moz-box-sizing:border-box;
		border-radius: 10px;	
		background-color:#252525;		
}

.emptyContainer{padding: 10px;			
		color:black;
		margin: 0 auto;
  		margin-top: 3px;
  		width:80%;  	
  		font-family: 'Oxygen', sans-serif;
  		/*font-family: Helvetica, sans-serif; 	*/
  		border-style: solid;
    		border-width: 5px;
    		border-color: #fff;
    		/* Setting the box-sizing method: */
		box-sizing:border-box;

		/* Firefox still requires the -moz prefix */
		-moz-box-sizing:border-box;
		border-radius: 10px;	

}

.tabContainer{padding: 10px;			
		color:black;
		margin: 0 auto;
  		margin-top: 3px;
  		width:80%;  	
  		height:600px;
  		font-family: 'Oxygen', sans-serif;
  		/*font-family: Helvetica, sans-serif; 	*/
  		border-style: solid;
    		border-width: 2px;
    		border-color: #FFF;
    		/* Setting the box-sizing method: */
		box-sizing:border-box;

		/* Firefox still requires the -moz prefix */
		-moz-box-sizing:border-box;
		border-radius: 10px;	

}

#targetGrade { color:#000;
		border-style: solid;
    		border-width: 2px;
    		border-color: #000;
    		padding:5px 25px;
    		background:white;
    		font-size: 2.5em; /* 40px/16=2.5em */
    		margin-left:12.5px;
}

#currentGrade { color:red;
		border-style: solid;
    		border-width: 2px;
    		border-color: #000;
    		padding:5px 25px;
    		background:white;
    		font-size: 2.5em; /* 40px/16=2.5em */
}

.targetGrade { margin-left:10px;
		
		color:white;}

.container h1{
	/* Using the custom font we've included in the HTML tab: */
	font-family: 'Oxygen', sans-serif;
	font-weight:normal;
	font-size:28px;
	margin-top: 0px;
}



/*************** ribbon header ***************/

.headline3 {
  position: relative;
  margin-left: -22px; /* 15px padding + 7px border ribbon shadow*/
  margin-right: -22px;
  padding: 15px;
  background: #e82;  
  box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset;
  text-shadow: 0 1px 0 #fff;
}

.headline3:before,
.headline3:after {
  position: absolute;
  left: 0;
  bottom: -6px;
  content:'';
  border-top: 6px solid #555;
  border-left: 6px solid transparent;
}

.headline3:before {
  border-top: 6px solid #555;
  border-right: 6px solid transparent;
  border-left: none;
  left: auto;
  right: 0;
  bottom: -6px;
}

.headline3.blue {
  position: relative;
  margin-left: -22px; /* 15px padding + 7px border ribbon shadow*/
  margin-right: -22px;
  padding: 15px;
  background: #39d;
  box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset;
  text-shadow: 0 1px 0 #fff;
}



#box {
  position: relative;
  
  background: #ddd;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 1em 0.5em;
  color: rgba(0,0,0, .8);
  text-shadow: 0 1px 0 #fff;
  line-height: 1.0;
  margin: 60px auto;
}


#box:before, #box:after {
  z-index: -1; 
  position: absolute; 
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%; 
  top: 80%;
  max-width:300px;
  background: rgba(0, 0, 0, 0.7); 
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  transform: rotate(-3deg);
}

#box:after {
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}



.buttonSave{ background-color:#00AAFF;
	     padding: 6px;
	     border-radius: 10px;
	     font:18px Futura, ‘Century Gothic’, AppleGothic, sans-serif;
	     padding:14px;
	     color:#FFF;
	     border:1px solid #00AAFF;
	     border-bottom:1px solid #9f9f9f;
	     -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
	     -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
	     box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
	     width:200px;
	     text-align: center;
	     margin-right: 10px;
}      

.buttonSave:hover{background-color:red;
	cursor: pointer;
	cursor: hand;
}     

.buttonUser{ background-color:red;
	     padding: 6px;
	     border-radius: 10px;
}




td{
	background-color:white;
	color:black;
	padding: 3px;
	
	
}

th{
	color:white;
	background-color:#202020;
	padding: 10px;
	
}

table {
    border-spacing: 1px;
    border: 5px solid #ABABAB;
    /*background-color:black; */
    font:18px ;
    font-family: 'Oxygen', sans-serif;
    padding: 0px;
    border-radius: 10px;
    width:100%;
    margin-left:0px;
    margin-top:0px;
   
}


table a:link {
    color: black;
}

/* mouse over link */
table a:hover {
    color: #09c003;
    background-color: ivory;
}

table a:visited {
    color: black;
}

select{
	width: 100%;
	height: 30px;
	padding 0px;	
	text-align: right;
	border:none;
	font-size:16px;
	
	}
input{  width: 35px;
	text-align: right;
	border:none;	
	font-size:16px;
	
	}	
option { padding 20px;}


/*########################### TOOLTIP ################################ */
a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;} 
a.tooltip span {
    z-index:10;display:none; padding:14px 20px;
    margin-top:-30px; margin-left:28px;
    max-width:600px; line-height:16px;
}
a.tooltip:hover span{
    display:inline; position:absolute; color:#111;
    border:1px solid #DCA; background:#fffAF0;}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
    
/*CSS3 extras*/
a.tooltip span
{
    border-radius:4px;
    box-shadow: 5px 5px 8px #CCC;
}
/* ################### Black Skin #######################*/
a.tooltipBlack {outline:none; }
a.tooltipBlack strong {line-height:30px;}
a.tooltipBlack:hover {text-decoration:none;} 
a.tooltipBlack span {
    z-index:10;display:none; padding:14px 20px;
    margin-top:60px; margin-left:-160px;
    width:300px; line-height:16px;
}
a.tooltipBlack:hover span{
    display:inline; position:absolute; 
    border:2px solid #FFF;  color:#EEE;
    background:#333 url(cssttp/css-tooltip-gradient-bg.png) repeat-x 0 0;
}
.calloutBlack {z-index:20;position:absolute;border:0;top:-14px;left:120px;}
    
/*CSS3 extras*/
a.tooltipBlack span
{
    border-radius:2px;        
    box-shadow: 0px 0px 8px 4px #666;
    /*opacity: 0.8;*/
}

.toolTipImg{
	max-width:600px;
  	max-height:600px;
  	margin-top: 10px;
 }

.centreText{
 text-align: center;

}
.numberCircle {
    display: block;
    height: 30px;
    width: 30px;
    line-height: 30px;

    -moz-border-radius: 15px; /* or 50% */
    border-radius: 15px; /* or 50% */
    border-color:grey;
    border-width:1px;
    border-style: solid;
    background-color: white;    
    text-align: center;
    font-size: 1em;
    margin: 0 auto;
}

/* ***************************fancy button stuff ******************************************************/

@import url(http://fonts.googleapis.com/css?family=Nunito:300);
 /* Styling for the fancy hover over buttons  */

.button
{
  text-transform: capitalize;
  letter-spacing: 2px;
  text-align: center;
  font-size: 24px;
  font-family: "Nunito", sans-serif;
  font-weight: 300;  
  margin: auto 0;      
  padding: 20px 10px;
  width: 240px;
  height:30px;
  background: white;
  border: 2px solid black;
  color: black;
  overflow: hidden;  
  transition: all 0.5s;
}

.button:hover, .button:active 
{
  text-decoration: none;
  color: white;
  border-color: gold;
  background: black;
}

.button span 
{
  display: inline-block;
  position: relative;
  padding-right: 0;
  margin-left:auto;
  margin-right:auto;
  margin-top:20px;
  
  transition: padding-right 0.5s;
}

.button span:after 
{
  content:  ' ';  
  position: absolute;
  top: 0;
  right: -18px;
  opacity: 0;
  width: 12px;
  height: 12px;
  margin-top: -7px;

  background: rgba(0, 0, 0, 0);
  border: 3px solid #FFF;
  border-top: none;
  border-right: none;

  transition: opacity 0.5s, top 0.5s, right 0.5s;
  transform: rotate(-135deg);
}

.button:hover span, .button:active span 
{
  padding-right: 30px;
}

.button:hover span:after, .button:active span:after 
{
  transition: opacity 0.5s, top 0.5s, right 0.5s;
  opacity: 1;
  border-color: gold;
  right: 0;
  top: 50%;
}


.button span:after red{
    background:red;	
}