/* CSS Document */

body {
	background-color: #FFF;
	margin-top:0;
	margin-bottom:0;
	margin-left:0;
	margin-right:0;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:62.5%;
	color: #4f4f4f;
	background-image:url(../images/background.jpg);
	background-repeat: repeat-x;
	background-position: left top;
}
/*-----------------------------------------------------------------------------------------
----------------------------------------- LAYOUT ------------------------------------------
-----------------------------------------------------------------------------------------*/


#container {
	width:99.2em;
	margin:auto;
}
#header {
	height:16em;
	padding-left:3em;
	background-image:url(../images/header.jpg);
	background-repeat:no-repeat;
}
#main {
	min-height:68em;
	background-image:url(../images/main.jpg);
	background-repeat:no-repeat;
	padding:4em;
	padding-top:0.3em;
}
*html #main {
	height:68em;
}
/*-----------------------------------------------------------------------------------------
------------------------------------ LAYOUT  ELEMENTS -------------------------------------
-----------------------------------------------------------------------------------------*/


.preview {
	width:38em;
	float:right;
	margin-top:2em;
	margin-right:-1em;
}
.flashPreview {
	height:24.2em;
	padding-top:1.9em;
	padding-left:2.4em;
	background-image:url(../images/preview.jpg);
}
.preview h1 {
	margin:0;
	margin-right:0.5em;
	margin-bottom:-1em;
	font-size:1.8em;
	font-family:Georgia, Times New Roman, Times, serif;
	color:#bababa;
}
img {
	border:0;
}
.icons {
	text-align:right;
	margin-bottom:1em;
}
.icons img{
	margin-right:0.2em;
}
.imgLeft {
	float:left;
}
.imgRight {
	float:right;
}
.icons h1 {
	margin:0;
	padding-top:0.5em;
	font-size:1.8em;
	font-family:Georgia, Times New Roman, Times, serif;
	color:#666666;
	text-transform:uppercase;
}
.icons h1 a {
	margin:0;
	text-decoration:none;
	color:#666666;
}
.icons h2 {
	margin:0;
	font-size:1.1em;
	font-family:Georgia, Times New Roman, Times, serif;
	color:#cccccc;
	text-transform:uppercase;
}
.icons h3 {
	margin:0;
	padding-top:0.5em;
	font-size:1.4em;
	line-height:1.2em;
	font-family:Georgia, Times New Roman, Times, serif;
	color:#666666;
	text-transform:uppercase;
}
.icons h3 a {
	text-decoration:none;
	color:#666666;
}
.icons h2 a {
	text-decoration:none;
	color:#CCCCCC;
}
/*-----------------------------------------------------------------------------------------
----------------------------------------- TABS --------------------------------------------
-----------------------------------------------------------------------------------------*/


    #tabsF {
	position:absolute;
	top:12.5em;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
#tabsF ul {
	margin:0;
	padding:0;
	list-style:none;
	font-size:1.3em;
}
#tabsF li {
	display:inline;
	margin:0;
	padding:0;
}
#tabsF a {
	float:left;
	background:url(../images/tableftF.gif) no-repeat left top;
	margin:0;
	margin-right:0.2em;
	padding:0 0 0 0.3em;
	text-decoration:none;
}
#tabsF a span {
	float:left;
	display:block;
	background:url(../images/tabrightF.gif) no-repeat right top;
	padding:0.6em 1.5em 0.7em 1.2em;
	color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsF a span {
	float:none;
}
/* End IE5-Mac hack */
    #tabsF a:hover span {
	color:#3399cc;
}
#tabsF a:hover {
	background-position:0% -3.2em;
}
#tabsF a:hover span {
	background-position:100% -3.2em;
}
#tabsF #current a {
	background-position:0% -3.1em;
	color:#3399cc;
}
#tabsF #current a span {
	background-position:100% -3.1em;
	color:#3399cc;
}
/*-----------------------------------------------------------------------------------------
----------------------------------------- TEXT --------------------------------------------
-----------------------------------------------------------------------------------------*/		
		

p, ul, ol {
	font-size:1.2em;
	line-height:1.8em;
}
select {
}
p a {
	text-decoration:none;
	color:#3399cc;
}
h1 {
	font-family:Georgia, Times New Roman, Times, serif;
	font-size:2.4em;
	font-weight:normal;
	font-style:normal;
	margin:0;
	color:#3399cc;
}
h1 a {
	text-decoration:none;
	color:#3399cc;
}
h1 a:hover {
	text-decoration:underline;
}
h2 {
	font-size:1.4em;
	font-weight:normal;
	font-style:normal;
	margin-top:0.1em;
	margin-bottom:1.5em;
	color:#999999;
}
h3 {
	font-size:1.3em;
	line-height:1.4em;
	font-weight:normal;
	font-style:normal;
	margin:0;
	color:#3399cc;
}
h4 {
	font-family:Georgia, Times New Roman, Times, serif;
	font-size:2em;
	font-weight:normal;
	font-style:normal;
	margin-bottom:-0.8em;
	color:#3399cc;
	clear:both;
}
h4 a {
	text-decoration:none;
}
h5{
font-size:1.4em;
color:#3399cc;
font-weight:normal;
margin:0;
padding:0;
padding-top:0.7em;}

h5 a{
text-decoration:none;
color:#3399cc;}

h5 a:hover{
text-decoration:underline;}	
h6 {
	font-size:1.4em;
	font-weight:normal;
	font-style:normal;
	margin-top:0.8em;
	margin-bottom:1.5em;
	color:#999999;
}

.scored{
	text-decoration:line-through;}
/*-----------------------------------------------------------------------------------------
------------------------------------ CASE STUDIES -------------------------------------
-----------------------------------------------------------------------------------------*/

.thumb {
	width:18.7em;
	height:15.7em;
	float:left;
	margin:0.2em;
	margin-bottom:2.5em;
	padding:1.5em;
	background:url(../images/CaseStudy_Thumb_2.jpg) no-repeat;
	text-align:left;
	font-family:Georgia, "Times New Roman", Times, serif;
}
.hidden-thumb {
	display:none;
}
.case_study_blue {
	color:#0099CC;
	font-size:1.1em;
}
.case_study_grey {
	color:#333333;
	font-size:1.1em;
}
#case_study_holder {
	position:relative;
}
.gallery {
	float:right;
	width:43.5em;
	margin-left:2.5em;
	margin-bottom:1em;
	border-top:#EEEEEE 0.1em solid;
	border-left:#EEEEEE 0.1em solid;
	border-right:#CCCCCC 0.2em solid;
	border-bottom:#CCCCCC 0.2em double;
}

.close a {
	color:#0099CC;
	text-decoration:none;
}
#map {
	width: 500px;
	float:right;
	padding:1em;
	border:1px #DEDEDE solid;
	border-right: 1px #CCC solid;
	border-bottom: 1px #CCC solid;
}
#map a{
	color:#0099CC;
	text-decoration:none;
	font-size:1.2em;
}

.quick-links{
border-top:solid 1px #0099CC;
margin-top:2.5em;
padding-top:1em;}

.quick-links img{
margin-right:0.8em;
margin-bottom:0.8em;
}
.quick-links img.active{
border: 4px solid #0099CC;
margin-right:0.6em;
margin-left:-0.2em;
margin-bottom:0.2em;}
/*-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --*/
/*--             Showcase              --*/
/*-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --*/

.featured {
	width: 880px;
	height: 272px;
	margin-top: 3em;
	margin-bottom:2em;
	padding: 15px;
	position: relative;
	z-index: 4;
	background: url("../images/showcase.gif") no-repeat;
}
.featured-label {
	width: 84px;
	height: 84px;
	position: absolute;
	top: -2px;
	left: -2px;
	z-index: 20;
	background: url("../images/featured-label.png") no-repeat;
}
.showcase {
	width: 880px;
	height: 233px;
	margin-bottom: 3px;
}
.showcase h2.entry-title {
	font-size: 25px;
	font-weight: normal;
}
.showcase .entry-content {
	border: none;
}
.showcase img.largethumb {
	margin-right: 15px;
	float: left;
	border: 6px solid #dcdcdc;
}
div.controls a {
	width: 10px;
	height: 10px;
	margin-right: 6px;
	float: left;
	display: block;
	background: url("../images/control.gif") no-repeat;
}
div.controls a.activeSlide {
	background: url("../images/control-hover.gif") no-repeat;
}
.featured #prev {
	width: 91px;
	height: 30px;
	position: absolute;
	bottom: 0;
	right: 85px;
	display: block;
	float: left;
	background: url("../images/previous.gif") no-repeat;
}
.featured #next {
	width: 75px;
	height: 30px;
	position: absolute;
	bottom: 0;
	right: 10px;
	display: block;
	float: left;
	background: url("../images/next.gif") no-repeat;
}
.featured #next:hover {
	background: url("../images/next-hover.gif") no-repeat;
}
.featured #prev:hover {
	background: url("../images/previous-hover.gif") no-repeat;
}

/*************************************************************************
***************************** Side Bar ***********************************
**************************************************************************/
.sidebar-wrap {
  width: 320px;
  padding: 0 0 0 10px;
  float: right;
  margin-top:2em;
  margin-left:2em;
}

.widgettitle {
  height: 2.8em;
  padding: 0.6em 0 0 0.8em;
  color: #fff;
  font-size: 1.4em;
  background: url("../images/widget-title.gif") no-repeat;

}

.sidebar-services {
  width: 200px;
  float: right;
  margin-top:2em;
  margin-left:2em;
    border: 1px solid #e4e4e4;
    border-bottom: 5px solid #e4e4e4;
  background-color:#f5f5f5;
}

.widget_box {
  padding: 10px;
  margin-bottom: 30px;
  padding-bottom:1.5em;
  margin-top:-1em;
  border-left: 1px solid #CCC;
  border-right: 1px solid #CCC;
  border-bottom: 5px solid #CCC;
  background-color:#ebebeb;
  	font-size:1.2em;
	font-style:normal;
}

.widget_services{
  padding-bottom:1.5em;
  border-left: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
  border-bottom: 5px solid #e4e4e4;
  background-color:#f5f5f5;
  	font-size:1.2em;
	font-style:normal;
}



.highlight{
	color:#ff9933;
	font-weight:bold;}

.tweet-box{
	  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #CCC;
  display: inline-block;
  background-color:#ebebeb;
  	font-size:1.2em;
	font-style:normal;
	}
.tweet{
	width:59px;
	margin-top:-72px;
	float:right;
	margin-right:15px;}
	
.more{
	margin-top:-45px;
	float:right;
	margin-right:8px;}
	
/*************************************************************************
***************************** Services ***********************************
**************************************************************************/	
.service-panel{
float:left;
width:250px;
min-height:355px;
border-right:solid 1px #d9d9d9;
margin-right:1.5em;}

.overview, .training, .learner, .mobile, .web, .consult, .games{
width:215px;
height:20px;
color:#666666;
font-size:14px;
padding:10px;
margin-bottom:0.8em;
}

.overview-active, .training-active, .learner-active, .mobile-active, .web-active, .consult-active, .games-active{
width:215px;
height:20px;
color:#3399cc;
font-size:14px;
padding:10px;
margin-bottom:0.8em;
}

.overview-active a, .training-active a, .learner-active a, .mobile-active a, .web-active a, .consult-active a, .games-active a{
color:#3399cc;
text-decoration:none;
}


.training{background:url(../images/serv-training.gif) no-repeat top left;}
.overview{background:url(../images/serv-overview.gif) no-repeat top left;}
.learner{background:url(../images/serv-learner.gif) no-repeat top left;}
.mobile{background:url(../images/serv-mobile.gif) no-repeat top left;}
.web{background:url(../images/serv-web.gif) no-repeat top left;}
.consult{background:url(../images/serv-consult.gif) no-repeat top left;}
.games{background:url(../images/serv-games.gif) no-repeat top left;}

.training-active{background:url(../images/serv-training-active.gif) no-repeat top left;}
.overview-active{background:url(../images/serv-overview-active.gif) no-repeat top left;}
.learner-active{background:url(../images/serv-learner-active.gif) no-repeat top left;}
.mobile-active{background:url(../images/serv-mobile-active.gif) no-repeat top left;}
.web-active{background:url(../images/serv-web-active.gif) no-repeat top left;}
.consult-active{background:url(../images/serv-consult-active.gif) no-repeat top left;}
.games-active{background:url(../images/serv-games-active.gif) no-repeat top left;}

.overview a, .training a, .learner a, .mobile a, .web a, .consult a, .games a{
color:#666666;
text-decoration:none;
}


	
/*************************************************************************
***************************** Panels ***********************************
**************************************************************************/

.minimize{
width:12px;
height:12px;
float:right;
margin-top:1px;}

.panel{
padding:4px;
border:1px #DDDDDD solid;
background-color:#FFFFFF;
margin-bottom:10px;}

.panel-header{
padding:5px;
color:#333;
background:url(../images/panel-header.jpg) repeat-x top ;
font-size:1.4em;
border:#dddddd solid 1px;
text-align:left;
}


.panel-content{
padding:5px;
text-align:left;
font-size:1.1em;}

.panel-content a{
color:#666;}

/* Response Messages */

.response-msg {
	padding:6px 10px 10px 45px;
	font-size:0.9em;
	margin:0 0 10px;
}
.response-msg span {
	display:block;
	font-weight:bold;
	padding:0 0 4px;
}
.error {
	background:#f9e5e6 url('images/error.png') 10px 50% no-repeat;
	color:#b50007;
	border:#e8aaad solid 1px;
}
.notice {
	background:#f9f9e5 url('images/notice.png') 10px 50% no-repeat;
	color:#828400;
	border:#e8e3aa solid 1px;
}
.inf {
	background:#e5ecf9 url('images/info.png') 10px 50% no-repeat;
	color:#0055b5;
	border:#aac6e8 solid 1px;
}
.success {
	background:#e9f9e5 url('images/success.png') 10px 50% no-repeat;
	color:#1c8400;
	border:#b4e8aa solid 1px;
}
.other-box {
	margin:0;
	margin-bottom:10px;
	text-align:left;
}
.cont {
	border-top:#fff solid 1px;
	padding:8px;
	line-height:1.4em;
}
.other-box h3 {
	font-size:1.2em;
	font-weight:bold;
}
.gray-box {
	background:#eaeaea;
	border:#c0c0c0 solid 1px;
}
.yellow-box {
	background:#fff6bf;
	border:#fdd845 solid 1px;
}

/*************************************************************************
***************************** ToolTips ***********************************
**************************************************************************/
.tipsy { padding: 5px; font-size: 10px; opacity: 0.8; filter: alpha(opacity=80); background-repeat: no-repeat; }
  .tipsy-inner { font-weight:bold; padding: 6px; background-color: #0099cc; color: white; max-width: 120px; text-align: center; opacity: 0.9; filter: alpha(opacity=90);}
  .tipsy-north { background-image: url(../images/tipsy-north.gif); background-position: top center; }
  .tipsy-south { background-image: url(../images/tipsy-south.gif); background-position: bottom center; }
  .tipsy-east { background-image: url(../images/tipsy-east.gif); background-position: right center; }
  .tipsy-west { background-image: url(../images/tipsy-west.gif); background-position: left center; }