body, button{
  margin:0;
  padding:0;
  font-family:'Open Sans', arial, helvetica, san-serif; 
  color:#333333; 
  text-shadow: 0 0 1px rgba(89,89,89,0.2);
  overflow-x:hidden;
}

.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.group { display: inline-block; clear: both; }
/* start commented backslash hack \*/ * html .group { height: 1%; } .group { display: block; } /* close commented backslash hack */
 

a.profile {outline:none; height:26px; width:26px; padding:0; display:inline-block; text-align:left; background-image:url('../images/profile-icon.png'); background-repeat:no-repeat;}
a.profile:hover {text-decoration:none; background-image:url('../images/profile2-icon.png');} 

a.profile-sl {outline:none; height:26px; width:26px; padding:0;  display:inline-block; text-align:left; background-image:url('../images/profile-sl-icon.png'); background-repeat:no-repeat;}
a.profile-sl:hover {text-decoration:none; background-image:url('../images/profile2-icon.png');} 

a.profile-mg {outline:none; height:26px; width:26px; padding:0; display:inline-block; text-align:left; background-image:url('../images/profile-mg-icon.png'); background-repeat:no-repeat;}
a.profile-mg:hover {text-decoration:none; background-image:url('../images/profile2-icon.png');} 

a.profile-ic {outline:none; height:26px; width:26px; padding:0; display:inline-block; text-align:left; background-image:url('../images/profile-ic-icon.png'); background-repeat:no-repeat;}
a.profile-ic:hover {text-decoration:none; background-image:url('../images/profile2-icon.png');} 

a.profile-sa {outline:none; height:26px; width:26px; padding:0; display:inline-block; text-align:left; background-image:url('../images/profile-sa-icon.png'); background-repeat:no-repeat;}
a.profile-sa:hover {text-decoration:none; background-image:url('../images/profile2-icon.png');} 

a.report {outline:none; height:26px; width:26px; padding:0; margin:0 0 0 5px; display:inline-block; text-align:left; background-image:url('../images/report-icon-on.png'); background-repeat:no-repeat;}
a.report:hover {text-decoration:none; background-image:url('../images/report-icon.png');} 

a.sheet {outline:none; height:26px; width:26px; padding:0; margin:0 0 0 3px; display:inline-block; text-align:left; background-image:url('../images/sheet2-icon.png'); background-repeat:no-repeat;}
a.sheet:hover {text-decoration:none; background-image:url('../images/sheet2-icon-on.png');} 

a.sheet-sl {outline:none; height:26px; width:26px; padding:0; margin:0 0 0 3px; display:inline-block; text-align:left; background-image:url('../images/sheet-sl-icon.png'); background-repeat:no-repeat;}
a.sheet-sl:hover {text-decoration:none; background-image:url('../images/sheet2-icon-on.png');} 

a.sheet-mg {outline:none; height:26px; width:26px; padding:0; margin:0 0 0 3px; display:inline-block; text-align:left; background-image:url('../images/sheet-mg-icon.png'); background-repeat:no-repeat;}
a.sheet-mg:hover {text-decoration:none; background-image:url('../images/sheet2-icon-on.png');} 

a.sheet-ic {outline:none; height:26px; width:26px; padding:0; margin:0 0 0 3px; display:inline-block; text-align:left; background-image:url('../images/sheet-ic-icon.png'); background-repeat:no-repeat;}
a.sheet-ic:hover {text-decoration:none; background-image:url('../images/sheet2-icon-on.png');} 

a.sheet-sa {outline:none; height:26px; width:26px; padding:0; margin:0 0 0 3px; display:inline-block; text-align:left; background-image:url('../images/sheet-sa-icon.png'); background-repeat:no-repeat;}
a.sheet-sa:hover {text-decoration:none; background-image:url('../images/sheet2-icon-on.png');} 

a.tooltip {
	outline:none;
	border:none;	
}

a.tooltip:hover {
	text-decoration:none;
} 

a.tooltip span {
    z-index:10;
	display:none; 
	padding:5px 10px;
    margin-top:2px; 
	margin-left:26px;
	border-radius:0 4px 4px 4px;
	font: 400 .8em/1.3em 'Open Sans', arial, helvetica, san-serif;	
}

a.tooltip:hover span{
    display:inline; 
	position:absolute; 
	color:white;
}


a.tooltip2 {
	outline:none;
	border:none;	
}

a.tooltip2:hover {
	text-decoration:none;
} 

a.tooltip2 span {
    z-index:10;
	display:none; 
	padding:5px 10px;
    margin-top:2px; 
	margin-left:60px;
	border-radius:0 4px 4px 4px;
	font: 400 .8em/1.3em 'Open Sans', arial, helvetica, san-serif;	
}

a.tooltip2:hover span{
    display:inline; 
	position:absolute; 
	color:white;
}

.callout {
	z-index:20;
	position:absolute;
	top:-13px;
	border:0;
	left:-3px;
}

.callout {
	z-index:20;
	position:absolute;
	top:-13px;
	border:0;
	left:-3px;
}


a.profile {
	outline:none;
	border:none;	
}

.callout {
	z-index:20;
	position:absolute;
	top:-13px;
	border:0;
	left:-3px;
}
    


.series img {
	padding:0 3px 0 3px;
}

 
 /**
 * Expand CSS
 */
 
.content {display:none;}
 
.expandrow  {
	background: #ececec;
	width:100%;
}

.expandrow .expander {
    background: #dfdfdf url("../images/filter-icon.png") no-repeat 35px 10px; 
}

.expandrow .collapsed  {
    background: #dfdfdf url("../images/filter-icon.png") no-repeat 35px 10px; 
}

a.expander:link, a.expander:visited, a.expander:active {
    text-decoration:none;
	font-size:.8em;
	background-color:#dfdfdf;
	padding:9px 9px 9px 20px;
	display:block;
	width:100px;
	color:#444444;
	text-align:center;
	border-radius:0;
}
 
a.expander:hover   {
	color:white;
	background: #666666 url("../images/filter-icon-on.png") no-repeat 35px 10px; 
} 
 
 
/**
 * Form & Button Styles
 */


 
label{
  font-weight: 300;
  font-size:.7em;
}
 
button{
  display: inline-block;
  padding: .4em .8em;
  background: #c8c8c8;
  border: 0;
  margin: 0 .2em;
  color: #545454;
  font-size: .8em;
  font-weight: 300;
  border-radius: .25em;
  cursor: pointer;
}

button.active{
  background: #5d89af;
}

button.hover{
  background: #666666;
  color:white;
}

button:focus{
  outline: 0 none;
}

button:first-of-type{
  margin-left: 0;
}

button:last-of-type{
  margin-right: 0;
}
 
button:focus{
  outline: 0 none;
}
 
.controls{
  background: #dfdfdf;
  padding: 0;
  margin:0;
}

header {
display: inline-block;
  vertical-align: top;
 }
 
fieldset{
  display: inline-block;
  vertical-align: top;
  margin: 0 1em 0 0;
  padding: 1em;
  border-radius: 3px;
  border:none;
  background:none;
}

.checkbox{
  display: block;
  position: relative;
  cursor: pointer;
  margin: 0;
  padding: 0 15px 0 0;
}

.checkbox input[type="checkbox"]{
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
  margin: 0;
  opacity: 0;
  z-index: 1;
}

.checkbox label{
  display: inline-block;
  vertical-align: top;
  text-align: left;
  padding-left: 2em;
}

.checkbox label:before,
.checkbox label:after{
  content: '';
  display: block;
  position: absolute;
}

.checkbox label:before{
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  background: #cecece;
  border-radius: 3px;
}

.checkbox label:after{
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #666666;
  opacity: 0;
  pointer-events: none;
}


.checkbox input:checked ~ label:after{
  opacity: 1;
}

.checkbox input:focus ~ label:before{
  background: #cecece;
}

/**
 * Container/Target Styles
 */
 
.container{
  padding: 2% 2% 0;
  text-align: justify;
  background: #49759c;
 -webkit-backface-visibility: hidden;
}

.container:after{
  content: '';
  display: inline-block;
  width: 100%;
}

.container .mix,
.container .gap{
  display: inline-block;
  width:49%;
}

.container .mix{
  text-align: left;
  margin-bottom: 2%;
  margin-top:0;
  padding:0;
  vertical-align: top;
  display: none;
  height:550px;
  border-radius:0 0 8px 0;
  border-right: 1px solid #5f89af;
  border-bottom: 1px solid #5f89af;
}

.container .mix:after{
  content: attr(data-myorder);
  color: white;
  display: inline-block;
  vertical-align: top;
  padding: 4% 6%;
}

.container .mix:before{
  content: '';
  display: inline-block;
  padding-top: 0;
}

.competencies {
	margin:0;
	padding:5px;
	background:url('../images/dimension-title2.png') no-repeat 3px 0px;
}

.container .mix ul {
	padding:0 0 12px 30px;
	margin:0;
	list-style-type:none;
}

.container .mix ul li {
	font: 400 .7em/1.3em 'Open Sans', arial, helvetica, san-serif;
	padding:0;
	margin:0;
	color:white;
}

h4 {
  font-weight: 600;
  margin: 0 0 .5em 0;
  padding:0;
  font-size:.8em;
}

h1 {
  font-weight: 600;
  margin: 0;
  padding:5px 10px 5px 5px;
  text-align:left;
  color:white;
  font: 700 1.3em/1.0em 'Open Sans Condensed', arial, helvetica, san-serif;
}

h2 {
	margin:0;
	padding:0 0 13px 15px;
	color:#49759c;
	font: 700 1.3em/1.1em 'Open Sans Condensed', arial, helvetica, san-serif;
}


.series {
  padding:10px 10px;
  margin:0;
  text-align: justify;
 -webkit-backface-visibility: hidden;
  display: inline-block;
  text-wrap:none;
  vertical-align: top;
}

header {
	width:100%;
	background:white;
}


.logo {
	width:230px;
	padding:20px 0 15px 35px;
	float:left;
}

.logo > img {
	width:230px;
}

.nav {
	float:right;
	padding:33px 20px 0 0;
	width:400px;
	margin:0;
}

.nav ul {
	padding:0;
	list-style-type:none;
	vertical-align:top;
	margin:0;
}

.nav ul li {
	font-size:.8em;
	float:right;
	margin:0 2px;
}

.nav a:link, .nav a:active, .nav a:visited   {
	color:#666666;
	text-decoration:none;
	padding:8px 20px;
	border-radius:4px;
	margin:0;
}

.nav a:hover   {
	background:#666666;
	color:white;
}

li.on:link, li.on:active, li.on:visited   {
	color:white;
	background:#666666;
}

/**
 * Other Page Styles
 */

#resources {
	margin:0 auto;
	width:100%;
	background-color:#ececec;
	text-align:center;
}

#resources h1 {
	display:block;
	text-align:center;
	font: 700 1.3em/1.1em 'Open Sans Condensed', arial, helvetica, san-serif;
	color:#3d3d3d;
	padding:20px;
}

#resources h3 {
	display:block;
	text-align:center;
	font: 700 1.1em/.8em 'Open Sans Condensed', arial, helvetica, san-serif;
	color:white;
	padding:10px;
	margin:0;
}

#resources h2 {
	display:block;
	text-align:center;
	font: 700 .9em/.8em 'Open Sans', arial, helvetica, san-serif;
	color:#3d3d3d;
	padding:0;
	width:100%;
}

#resources .action   {
	text-align:center;
	padding:0;
	margin:0;
}

#resources li a:link, #resources li a:active, #resources li a:visited   {
	color:#666666;
	background-color:white;
	text-decoration:none;
	padding:8px 20px;
	border-radius:4px;
	margin:0;
	font: 400 .9em/.8em 'Open Sans', arial, helvetica, san-serif;
}

#resources li a:hover   {
	background:#666666;
	color:white;
}

#resources ul {
	display:block;
	float:left;
	list-style-type:none;
	padding:20px;
	margin:0;
	width:100%;
}

#resources li {
	display:block;
	padding:0;
	margin:5px;
	font: 400 .9em/1.1em 'Open Sans', arial, helvetica, san-serif;
	background-color:white;
	width:32%;
	height:270px;
	float:left;
	border-radius:6px;
}

#resources li.report{
	background-color:#494949;
	text-align:left;
}

#resources li.demo{
	background-color:#446f95;
	text-align:left;
}

#resources li.demo2{
	background-color:#6590b6;
	text-align:left;
}

#resources li.coaching{
	background-color:#494949;
	text-align:left;
}

#resources  p {
	display:block;
	padding:0 20px 20px 20px;
	margin:0;
	text-align:center;
	font: 400 .9em/1.1em 'Open Sans', arial, helvetica, san-serif;
	color:white;
}


#wrapper {
	margin:0 auto;
	width:100%;
	background-color:#ececec;
	text-align:center;
}

#wrapper .taskcycle{
	display:block;
	padding:30px 7%;
	margin:0;
	font: 400 .9em/1.2em 'Open Sans', arial, helvetica, san-serif;
	border-radius:0;
	text-align:left;
	background-color:#ececec;
}

#wrapper  p {
	display:block;
	padding:0 20px 20px 20px;
	margin:0;
	text-align:left;
	font: 400 .9em/1.2em 'Open Sans', arial, helvetica, san-serif;
	color:#2c2c2c;
}

#wrapper ul {
	list-style-type:disc;
	padding:0 0 0 40px;
	margin:0;
}

#wrapper li {
	padding:0 0 5px 5px;
	margin:0;
	text-align:left;
	font: 400 .9em/1.2em 'Open Sans', arial, helvetica, san-serif;
	color:#2c2c2c;
}


#wrapper  h1 {
	display:block;
	padding:0 20px 20px 0;
	margin:0;
	text-align:left;
	font: 400 1.9em/1.2em 'Open Sans Condensed', arial, helvetica, san-serif;
	color:#2c2c2c;
}

#wrapper  h2 {
	display:block;
	padding:35px 20px 20px 0;
	margin:0;
	text-align:left;
	font: 400 1.4em/1.2em 'Open Sans Condensed', arial, helvetica, san-serif;
	color:#2c2c2c;
}

#wrapper h3 {
	display:block;
	text-align:left;
	font: 700 1.1em/.8em 'Open Sans Condensed', arial, helvetica, san-serif;
	color:#2c2c2c;
	padding:10px 10px 10px 0;
	margin:0;
}

#wrapper  .ph-title {
	padding:0 0 10px 20px;
	margin:0;
	background:none;
	border-radius:0px;
	width: 100%;
	font: 700 .9em/1.2em 'Open Sans', arial, helvetica, san-serif;
}

#wrapper  .ph-label {
	padding:0 0 10px 20px;
	margin:0;
	background:none;
	border-radius:0px;
	width: 100%;
	font: 400 .9em/1.2em 'Open Sans', arial, helvetica, san-serif;
}

#wrapper .tc-explain  p {
	display:block;
	padding:0 0 20px 20px;
	margin:0;
	text-align:left;
	font: 400 .9em/1.2em 'Open Sans', arial, helvetica, san-serif;
	color:#2c2c2c;
}

#wrapper .tc-mark {
	display:inline-block;
	padding:0;
	margin:0;
	width:49%;
	vertical-align:top;
	max-width:469px;
}

#wrapper .tc-mark img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

#wrapper div.tc-explain{
	display:inline-block;
	padding:0;
	margin:0;
	width:49%;
	vertical-align:top;
}


#footer {
	margin:0 auto;
	width:100%;
	text-align:center;
	font: 400 .8em/1.1em 'Open Sans', arial, helvetica, san-serif;
}

#footer a:link, #footer a:visited, #footer a:active {
	text-decoration:none;
	color:#5f8cb3;
}

#footer a:hover {
	text-decoration:underline;
}

#footer .copyright {
	padding:30px 20px;
	float:left;
	text-align:left;
	color:#383838;
}

#footer .mark {
	padding:20px 20px;
	float:right;
	text-align:left;
	color:#383838;
	height:22px;

}


@media all and (min-width: 300px){
  .container .mix,
  .container .gap{
    width: 99%;
  }
  
  .nav {
    clear:both;
	float:left;
	padding:20px 0px 20px 0;
	width:400px;
	margin:0;
	}
  
	#resources li {
	width:92%;
	}
	
	#wrapper div.tc-explain {
	display:inline-block;
	padding:0;
	margin:0;
	width:92%;
	vertical-align:top;
	}
	
	#wrapper .tc-mark {
	display:inline-block;
	padding:0;
	margin:0;
	width:92%;
	vertical-align:top;
	}
}

@media all and (min-width: 600px){
  .container .mix,
  .container .gap{
    width: 49%;
  }
  
    .nav {
	clear:none;
	float:right;
	padding:33px 20px 0 0;
	width:400px;
	margin:0;
	}
    
  #resources li {
	width:92%;
	}
	
	#wrapper div.tc-explain {
	display:inline-block;
	padding:0;
	margin:0;
	width:92%;
	vertical-align:top;
	}
	
	#wrapper .tc-mark {
	display:inline-block;
	padding:0;
	margin:0;
	width:92%;
	vertical-align:top;
	}
}

@media all and (min-width: 800px){
  .container .mix,
  .container .gap{
    width: 32%;
  }
  
  .nav {
	clear:none;
	float:right;
	padding:33px 20px 0 0;
	width:400px;
	margin:0;
	}
    
  #resources li {
	width:46%;
	}
	
	#wrapper div.tc-explain{
	display:inline-block;
	padding:0;
	margin:0;
	width:49%;
	vertical-align:top;
	}

	#wrapper .tc-mark {
	display:inline-block;
	padding:0;
	margin:0;
	width:49%;
	vertical-align:top;
	max-width:469px;
	}
}

@media all and (min-width: 1024px){
  .container .mix,
  .container .gap{
    width: 24%;
  }
  
  .nav {
	clear:none;
	float:right;
	padding:33px 20px 0 0;
	width:400px;
	margin:0;
	}
}

@media all and (min-width: 1350px){
  .container .mix,
  .container .gap{
    width: 19%;
  }
  
  .nav {
	clear:none;
	float:right;
	padding:33px 20px 0 0;
	width:400px;
	margin:0;
	}
     
  #resources li {
	width:32%;
	}
}

@media all and (min-width: 1700px){
  .container .mix,
  .container .gap{
    width: 16%;
  }
  
  .nav {
	clear:none;
	float:right;
	padding:33px 20px 0 0;
	width:400px;
	margin:0;
	}
      
  #resources li {
	width:32%;
	}
}