@charset "UTF-8";



.mainContent {
	position: relative;
	width: 1200px;
	height: 100%;
	top:50px;
	left: 50px;	
    
}

.body {
      background-color: hsl(0, 20%, 96%) /* half white */;
}
.bodyPurple {
     background-color: rgb(215, 202, 219) /* purple */;
}
.bodyYellow {
     background-color: rgb(222, 216, 190) /* purple */;
}
.bodyBlue{
     background-color: rgb(173, 196, 188) /* purple */;
}
/* --------------------------------------------------------------------------------- */


.bear {
	position: fixed;
	width: 500 px;
	height: 500 px;
	bottom:-20px;
	right: 50px;
	z-index:-99;
}

.wolf {
	position: fixed;
	width: 500 px;
	height: 500 px;
	bottom:-30px;
	right: 150px;
	z-index:-100;
}

.wolf2 {
	position: fixed;
	width: 500 px;
	height: 500 px;
	bottom:-35px;
	right: 200px;
	z-index:-100;
}

.giraffe {
	position: fixed;
	bottom:-20px;
	right: -250px;
	z-index:-99;
}

/* --------------------------------------------------------------------------------- */

.mainFont {
	font-family: "Lucida Console", "Andale Mono", Geneva, Helvetica;
	font-size: 14px;
	letter-spacing: 5px;
	line-height:20px;
	color:#00;
}

.mainFont12 {
	font-family: "Lucida Console", "Andale Mono", Geneva, Helvetica;
	font-size: 12px;
	letter-spacing: 5px;
	line-height:20px;
	color:#00;
}

.mainFont12UC {
	font-family: "Lucida Console", "Andale Mono", Geneva, Helvetica;
	font-size: 12px;
	letter-spacing: 5px;
	line-height:20px;
	color:#00;
	text-transform: uppercase;

}
.smallFont {
	font-family: "Lucida Console", "Andale Mono", Geneva, Helvetica;
	font-size: 10px;
	letter-spacing: 5px;
	line-height:20px;
	text-transform: uppercase;
    color:rgb(229, 231, 223);

}
.keyboardHK {
	position: absolute;
	right: -250px;
	color:#EE9555;
	text-transform: none;

}

.keyboardUI {
	position: absolute;
	right: -250px;
	color:#F6F6F6;
	text-transform: none;

}

.headlineFont {
	font-family: "Lucida Console", "Trebuchet MS", Geneva, Helvetica;
	font-size: 14px;
	letter-spacing: 5px;
	line-height:25px;
	font-weight: normal;
	text-transform: uppercase;
}

.headlineFontRed {
	font-family: "Lucida Console", "Trebuchet MS", Geneva, Helvetica;
	font-size: 17px;
	letter-spacing: 7px;
	line-height:25px;
	font-weight: normal;
	text-transform: uppercase;
	color:#cc0000;
}

.headlineFontGreen {
	font-family: "Lucida Console", "Trebuchet MS", Geneva, Helvetica;
	font-size: 17px;
	letter-spacing: 7px;
	line-height:25px;
	font-weight: normal;
	text-transform: uppercase;
	color:#86b300;
}

.headlineFontDark {
	font-family: "Lucida Console", "Trebuchet MS", Geneva, Helvetica;
	font-size: 17px;
	letter-spacing: 7px;
	line-height:25px;
	font-weight: normal;
	text-transform: uppercase;
	color:rgb(90, 99, 94);
}

.headlineFontLight {
	font-family: "Lucida Console", "Trebuchet MS", Geneva, Helvetica;
	font-size: 13px;
	letter-spacing: 7px;
	line-height:25px;
	font-weight: normal;
	text-transform: uppercase;
	color:rgb(201, 204, 189);
}
.headlineFontBlue {
	font-family: "Lucida Console", "Trebuchet MS", Geneva, Helvetica;
	font-size: 14px;
	letter-spacing: 7px;
	line-height:25px;
	font-weight: normal;
	text-transform: uppercase;
	color:#6f88a5;
}


.headlineFontCode {
	font-family: "Helvetica, Lucida Console", "Trebuchet MS", Geneva;
	font-size: 16px;
	letter-spacing: 7px;
	line-height:25px;
	font-weight: normal;
	text-transform: uppercase;
	color:#7FDA2F;
}


.headlineFontBig {
	font-family: "Lucida Console","Trebuchet MS", Geneva, Helvetica;
	font-size: 18px;
	letter-spacing: 5px;
	line-height:20px;
	font-weight: normal;
	text-transform: uppercase;
	
}

.headlineFontBigCustom {
	font-family: "Lucida Console","Trebuchet MS", Geneva, Helvetica;
	font-size: 30px;
	letter-spacing: 5px;
	line-height:20px;
	font-weight: normal;
	color:#94caa4; /* #e4b162; */
	text-transform: uppercase;

}

.colour01 {
	color:#E55E00;
}

.titleFont {
	font-family: "Lucida Console","Trebuchet MS", Geneva, Helvetica;
	font-size: 10px;
	letter-spacing: 2px;
	line-height:20px;
	
}

/* --------------------------------------------------------------------------------- */

a {
	font-family: "Lucida Console", "Andale Mono", Geneva, Helvetica;
	font-size: 12px;
	color: #222;
	text-decoration: none;
	font-weight: normal;
	text-transform: uppercase;
}


a:hover {
	color: #F93;
}


/* --------------------------------------------------------------------------------- */
.heading {
	position: fixed;
	width: 300px;
	height: 50px;
	top:20px;
	/* left: 20px;*/
	right: -300px;
	z-index:1001;
	padding:0px;
	text-align:right;
}
/* --------------------------------------------------------------------------------- */



.menu {
	z-index:1000;
	position: fixed;
	width: 100px;
	height: 100%;
	top:0px;
	left: 0px;
	padding-left:0px;
	padding-right:0px;
	text-align:right;
	letter-spacing: 2px;
	line-height:12px;
	/*background-image:url(../images/sideMenuBG.png);
	background-repeat:repeat-y;*/

}

.bodyMenu {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	padding: 0px;
	overflow-y: hidden;
	overflow-x: hidden;
	background-image:none;
	
}
/* --------------------------------------------------------------------------------- */
.iframeMenuR {
	position: fixed;
	width: 120px;
	height: 550px;
	top:20px;
	right: 60px;
	z-index:999;
	padding:0px;
}


.iframeMenuL {
	position: fixed;
	width: 100px;
	height: 100%;
	top:20px;
	/* left: 20px;*/
	left: -1200px;
	z-index:1000;
	padding:0px;
}


.topRighPanel {
	padding:0px;
	text-align: center;
}
/* --------------------------------------------------------------------------------- */


/* For the "inset" look only -------------------------scroller*/

html {
    overflow: no;
}

body {
	position: absolute;
	top: -8px;
	left: -8px;
	bottom: -8px;
	right: -8px;
	padding: 0px;
	overflow-y: scroll;
	overflow-x: hidden;
	/*background-image:url(../images/bg_tile01.gif);*/
	background-color:#ff;
}



::-webkit-scrollbar {
    width: 8px;
	height:8px;
}
 

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px #fff;; 
    -webkit-border-radius: 0px;
    border-radius: 0px;
	 background: #fff;

}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 0px;
    border-radius: 0px;
    background: #222;
    -webkit-box-shadow: inset 0 0 0px #222;; 

}
::-webkit-scrollbar-thumb:window-inactive {
	background:#666;

}

/* ------------------------info bubble------------------------------- */


a.tip {
  position: relative;
  text-decoration: none;
}
a.tip:hover:before {
  display: block;
  position: fixed;
  padding: 15px;
  content: attr(title);
  min-width: 120px;
  text-align: center;
  width: 500px;
  height: auto;
  white-space: wrap;
  top: 200px;
  left: 400px;
  background: rgba(20,150,50,.3); 
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;

  color: #fff;
  font-size: 12px;
}
a.tip:hover:after {
  position: absolute;
  display: block;
  content: “”;

  border-color: rgba(0,0,0,.8) transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  top: -8px;
  left:1em;
}


/* ------------------------info bubble------------------------------- */



.codeStyle {
  display: block;
  position: absolute;
  padding: 20px;
  max-width: 500px;
  max-height: 600px
  text-align: left;
  width: auto;
  height:auto;
  
  top: 10%;
  left: 40%;
 
    
  background: rgba(20,20,20,.7);
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;

  color: #fff;
  font-size: 10px;
  
  overflow: auto;
}