/*  GRID DIV SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF TWO  */
.span_2_of_2 {
	width: 100%;
}
.span_1_of_2 {
	width: 49.2%;
}


/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }


/*  GRID OF FOUR  */
.span_4_of_4 {
	width: 100%;
}
.span_3_of_4 {
	width: 74.6%;
}
.span_2_of_4 {
	width: 49.2%;
}
.span_1_of_4 {
	width: 23.8%;
}

/*  GRID OF SIX  */
.span_6_of_6 {
	width: 100%;
}

.span_5_of_6 {
  	width: 83.06%;
}

.span_4_of_6 {
  	width: 66.13%;
}

.span_3_of_6 {
  	width: 49.2%;
}

.span_2_of_6 {
  	width: 32.26%;
}

.span_1_of_6 {
  	width: 15.33%;
}
/*  GO FULL WIDTH BELOW 480 PIXELS -this looks shite
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}

 */
/*  GRID OF EIGHT   ============================================================================= */

	
.span_8_of_8 {
	width: 100%;
}

.span_7_of_8 {
	width: 87.3%; 
}

.span_6_of_8 {
	width: 74.6%; 
}

.span_5_of_8 {
	width: 61.9%; 
}

.span_4_of_8 {
	width: 49.2%; 
}

.span_3_of_8 {
	width: 36.5%;
}

.span_2_of_8 {
	width: 23.8%; 
}

.span_1_of_8 {
	width: 11.1%; 
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS 

@media only screen and (max-width: 480px) {
	.span_8_of_8 {
		width: 100%; 
	}
	.span_7_of_8 {
		width: 100%; 
	}
	.span_6_of_8 {
		width: 100%; 
	}
	.span_5_of_8 {
		width: 100%; 
	}
	.span_4_of_8 {
		width: 100%; 
	}
	.span_3_of_8 {
		width: 100%; 
	}
	.span_2_of_8 {
		width: 100%; 
	}
	.span_1_of_8 {
		width: 100%; 
	}
}
*/


/*  GRID OF TEN   ============================================================================= */


.span_10_of_10 {
	width: 100%;
}

.span_9_of_10 {
	width: 89.84%;
}

.span_8_of_10 {
	width: 79.68%;
}

.span_7_of_10 {
	width: 69.52%; 
}

.span_6_of_10 {
	width: 59.36%; 
}

.span_5_of_10 {
	width: 49.2%; 
}

.span_4_of_10 {
	width: 39.04%; 
}

.span_3_of_10 {
	width: 28.88%;
}

.span_2_of_10 {
	width: 18.72%; 
}

.span_1_of_10 {
	width: 8.56%; 
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.span_10_of_10 {
		width: 100%; 
	}
	.span_9_of_10 {
		width: 100%; 
	}
	.span_8_of_10 {
		width: 100%; 
	}
	.span_7_of_10 {
		width: 100%; 
	}
	.span_6_of_10 {
		width: 100%; 
	}
	.span_5_of_10 {
		width: 100%; 
	}
	.span_4_of_10 {
		width: 100%; 
	}
	.span_3_of_10 {
		width: 100%; 
	}
	.span_2_of_10 {
		width: 100%; 
	}
	.span_1_of_10 {
		width: 100%; 
	}
}
.lightborder{
	  border: 1px solid #F6F6F6;
	  padding:5px;
}
.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
  content: 'Read more';
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: 'Show less';
}


.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  color: #666;
  font-size: .9em;
  line-height: 2;
  border: 1px solid #ddd;
  border-radius: .25em;
}



/* colours */

.darkred{ color:#640000; }
.mediumred{ color:#990000; }
.lightred{ color:#CC0000; }

.darkgreen{ color:#006600; }
.mediumgreen{ color:#339900; }
.lightgreen{ color:#99cc00; }

.darkblue{ color:#003366; }
.mediumblue{ color:#3c5a98; }
.lightblue{ color:#3390b4; }
.lightlightblue{ color:#b1c2e1; }
 
.darkgray{ color:#999999; }
.mediumgray{ color:#cccccc; }  
.lightgray{ color:#e6e6e6; }
.lightlightgray{ color:#fafafa; }

.darkorange{ color:#c84e0e; }
.mediumorange{ color:#ff6600; }
.lightorange{ color:#ff9900; }

.darkyellow{ color:#ffcc00; }
.mediumyellow{ color:#fff521; }
.lightyellow{ color:#ffff99; }

.darkpurple{ color:#540066; }
.mediumpurple{ color:#783366; }
.lightpurple{ color:#CC6699; }

.black{ color:#000000; }
.white{ color:#ffffff; }

/*For fontawesome*/
/* used for information 2 first is blue on green, other is the inverse */
.kali-course-black-white {
    --fa-secondary-opacity: 1.0;
  --fa-primary-color:#000000; 
  --fa-secondary-color:#FFFFFF;
}
.kali-course-white-black {
    --fa-secondary-opacity: 1.0;
  --fa-primary-color:#FFFFFF; 
  --fa-secondary-color:#000;
}
/* used for types of actions to take (edit, add ode, make sitemap / organise site) */
.kali-course-takeaction {
    --fa-secondary-opacity: 1.0;
  --fa-primary-color:#ffcc00; 
  --fa-secondary-color:#990000;
}
.kali-course-takeaction-inverse {
    --fa-secondary-opacity: 1.0;
  --fa-primary-color:#990000; 
  --fa-secondary-color:#ffcc00;
}
/* used for positive */
.kali-course-positive {
    --fa-secondary-opacity: 1.0;
  --fa-primary-color:#ffcc00; 
  --fa-secondary-color:#339900;
}
.kali-course-positive-inverse {
    --fa-secondary-opacity: 1.0;
  --fa-primary-color:#339900; 
  --fa-secondary-color:#ffcc00;
}




.background-darkred{ background-color:#640000; }
.background-mediumred{ background-color:#990000; }
.background-lightred{ background-color:#CC0000; }

.background-darkgreen{ background-color:#006600; }
.background-mediumgreen{ background-color:#339900; }
.background-lightgreen{ background-color:#99cc00; }

.background-darkblue{ background-color:#003366; }
.background-mediumblue{ background-color:#3c5a98; }
.background-lightblue{ background-color:#3390b4; }
.background-lightlightblue{ background-color:#b1c2e1; }
 
.background-darkgray{ background-color:#999999; }
.background-mediumgray{ background-color:#cccccc; }  
.background-lightgray{ background-color:#e6e6e6; }

.background-darkorange{ background-color:#c84e0e; }
.background-mediumorange{ background-color:#ff6600; }
.background-lightorange{ background-color:#ff9900; }

.background-darkyellow{ background-color:#ffcc00; }
.background-mediumyellow{ background-color:#fff521; }
.background-lightyellow{ background-color:#ffff99; }

.background-darkpurple{ background-color:#540066; }
.background-mediumpurple{ background-color:#783366; }
.background-lightpurple{ background-color:#CC6699; }

.background-black{ background-color:#000000; }
.background-white{ background-color:#ffffff; }


/* classes for kw etc *****************************************************/

.keywordsHighlight{
	background-color:#A2C7A2
	
}
.qualifiersHighlight{
	background-color:#D9E8D9
	
}
.negativesHighlight{
	background-color:#ffcccc
	
}
.missingHighlight{
	background-color:#f9f9e4
	
}
/*default fallback*/
.Highlight{
	background-color:#ccc
	
}
 
 
 
.smallText{
	font-size:12px;
}
.smallIcons{
	font-size: 60%;
}
.greenBox {
	 border-radius:18px;font-size:14px;background-color:#339900;color:#fff;padding:5px 10px 5px 10px;font-weight:normal;
}
 
/* CLEARFIX FLOAT HACK *****************************************************/
    
    .clearfix:after {
    	content: ".";
    	display: inline;
    	height: 0;
    	clear: both;
    	visibility: hidden;
    	}
    	
    .clearfix {display: inline-block;}  /* for IE/Mac */

/**************************************************************************/

html{ 
	font-family: 'Droid sans', sans-serif; 
	font-size:14px;
	margin:0px;
} 

body{
	font-family: 'Droid sans', sans-serif; 
	font-size:14px;
	color: #1c1c1c;
	margin:0px;
} 

	body{
		background-color:#444;
	}
	
	header{
		width:100%;
		background-color:#fafafa;
		border-bottom: 1px solid #eee;
		position: fixed;
		height: 64px;
		margin: 0px;
		padding: 0px;
		top: 0px;
		z-index: 100;
		box-shadow: 0 0 5px 0 rgba(0,0,0,.3);
	}
	.header-inner{
		width:1000px;
		margin-left:auto;
		margin-right:auto;
		position:relative;
	}
	#top-logo{
		color:#fff;
		font-size:18px;
		text-decoration:none;
		display:block;
		top:8px;
		width:200px;
		height:52px;
		left:-18px;
		position:absolute;
		background-image:url(https://kalicube.pro/images/web-home-logo2.png);
		background-repeat:no-repeat;
	}
	


	
	
	#header-nav {float:right;margin-top:10px;}
	#header-nav ul {list-style-type:none;}
	#header-nav ul li {float:left;margin-left:30px;display:inline;position:relative;}
	#header-nav ul li:hover {}
	#header-nav ul li a {display:block;padding:0px 5px 15px 5px;color:#444;color:#848484;}
	#header-nav ul li a:hover{color:#448aff;text-decoration:none;}
	#header-nav ul li a:active{color:#444;}
	#header-nav ul li ul {position:absolute;top:30px;left:-5px;width:150px;background:#fafafa;padding:0px 0px;display:none;}
	#header-nav ul li ul li {width:130px;padding:15px 10px 15px 10px;margin:0px 0px;}
	#header-nav ul li ul li a {display:block;padding:0px 0px;margin:0px 0px;color:#444;}
	#header-nav ul li ul li:hover a {}
	#header-nav ul li ul.fallback {display:none;}
	#header-nav ul li:hover ul.fallback {display:block;}
	.menu-active{font-weight:bold;}

	hr {
	    border: 0;
	      height: 1px;
	      background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
	  }
	
	h1, h2, h3{
		font-family: 'Ubuntu', sans-serif;
		
	}
	h1{font-size:2.4em;color:#339900;font-weight:600; margin-bottom:40px;} 
	h2{font-size:2.0em;color:#339900;font-weight:300;  margin-top:30px;}
	h3{font-size:1.3em;color:#339900;font-weight:300; } 
	p{line-height: 1.5;}
	a{color:#448aff;text-decoration:none;}
	a:hover{text-decoration:underline;}
	a:hover img{opacity:0.5;}

	ul{padding:0px 0px 0px 14px;}
	li{margin:0px 0px 6px 0px;}
ul li { padding: 5px 0px; }
	
	main{		
		background-color:#fff;
	}
	
	
	.emphasiseText {
		font-weight:bold;
		font-style:italic;
		font-size:1.1em;
	}


	
	article{
		background-color:#fff;
	}	
/* is replaced by */
	.pagesection{
		background-color:#fff;
	}
	
	
	
	article.darkerbg{
		background-color:#f6f6f6;
	}
/* is replaced by */
	.darkerbg{
		background-color:#f6f6f6;
	}

	.darkerbg .pagesection-inner article{
		background-color:#f6f6f6;
	}


	
	
	.article-inner{
		width:1000px;
		margin-left:auto;
		margin-right:auto;
		padding:20px 0px 20px 0px;
		position:relative;
	}
/* is replaced by */
	.pagesection-inner{
		width:1000px;
		margin-left:auto;
		margin-right:auto;
		padding:20px 0px 20px 0px;
		position:relative;
	}

	
	
	.pagesection-inner h1{
		text-align:center;
	}	
	.subheadingp{

		font-size:1.8em;
		font-weight:bold;
		
	}	
	
	.anchoroffset {
	   padding-top: 80px; margin-top: -80px;
	}

	.centertext{
		text-align:center;
	}
	
	
	.publicindexblock0{		
		text-align:center; 
		color:#ff6600; 
		margin-top:18px; 
		font-size:1.8em;
		font-family: 'Ubuntu', sans-serif;
		font-weight:bold;
		padding:30px 0px 30px 0px;
	}
	
	#leftcol{
		float:left;
		width:480px;
	}
	#rightcol{
		float:left;
		width:480px;
	}

	
	table.green-top-table{
		border-collapse:collapse;		
		margin-right:20px;
		width:380px;
		border-bottom:solid 1px #efefef;
		margin-bottom:50px;		
	}
	table.green-top-table th{
		text-align:left;
		padding:12px 24px 12px 24px;	
		background-color:#339900;
		color:#fff;
		font-family: 'Ubuntu', sans-serif;
		font-size: 1.6em;
		font-weight:300;
	}
	table.green-top-table td{
		padding:12px 24px 12px 24px;
		text-align:left;		
	}
	table.green-top-table td .fa{
		margin-right:16px;	
	}
	table.green-top-table tbody tr:nth-child(odd)	{ background-color:#fff; }
	table.green-top-table tbody tr:nth-child(even) { background-color:#efefef; }
	
	
	
	table.scoring-table{
		border-collapse:collapse;		
		border:solid 1px #efefef;
		width:94%
	}
	table.scoring-table th{
		text-align:left;
		padding:10px;	
		color:#000;
		font-family: 'Ubuntu', sans-serif;
		font-size: 1.6em;
		font-weight:300;
	}
	table.scoring-table td{
		border-collapse:collapse;		
		border:solid 1px #efefef;
		text-align:left;
				padding:5px;	
	}


	
	.leftbar{
		padding-left:35px;
		border-left:6px solid #339900;
	}

	.h1close{
		margin-bottom:0px;
	}	
	



	
	.h1article{
		padding-top:64px;
	}	
/* is replaced by */	
	.firstsection{
		padding-top:64px;		
	}

	
	

	.h1article h1,.h1article h2, .h1article h3, .h1article p{
		text-align:center;
	}	
/* is replaced by */
	.firstsection h1{
		text-align:center;
	}




	
	
	.fancy-button{
		background-color: #4D8FFD;
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#4D8FFD),color-stop(1,#4888EE));
		color:#fff;
		margin-top:12px;
		padding:10px 20px 10px 20px;
		font-size:14px;
		text-align:center;
		border-radius: 3px;
		font-weight:normal;
		text-decoration:none;
		width:auto;
		border:1px solid #4787ED;
		-moz-box-shadow: 1px 1px 2px #666;
		-webkit-box-shadow: 1px 1px 2px #666;
		box-shadow: 1px 1px 2px #666;
		/* For IE 8 */
		-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#666666')";
		/* For IE 5.5 - 7 */
		filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#666666');
	}
	.fancy-button:hover{
		background-color:#6BA3FE;
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#6BA3FE),color-stop(1,#4D8FFD));
		border:1px solid #2F5BB7;
		-moz-box-shadow: 1px 1px 2px #fff;
		-webkit-box-shadow: 1px 1px 2px #fff;
		box-shadow: 1px 1px 2px #fff;
		color:#fff;
		text-decoration:none;
		/* For IE 8 */
		-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#ffffff')";
		/* For IE 5.5 - 7 */
		filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#ffffff');
	}
	.fancy-button-deactivated{
		background-color: #EAF2FF;
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#EAF2FF),color-stop(1,#EAF2FF));
		color:#ccc;
		margin-top:12px;
		padding:10px 20px 10px 20px;
		font-size:14px;
		text-align:center;
		border-radius: 3px;
		font-weight:normal;
		text-decoration:none;
		width:auto;
		border:1px solid #EAF2FF;
		-moz-box-shadow: 1px 1px 2px #ccc;
		-webkit-box-shadow: 1px 1px 2px #ccc;
		box-shadow: 1px 1px 2px #ccc;
		/* For IE 8 */
		-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#cccccc')";
		/* For IE 5.5 - 7 */
		filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#cccccc');
	}

	.blue-button{
		background-color: #4D8FFD;
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#4D8FFD),color-stop(1,#4888EE));
		color:#fff;
		border:1px solid #4787ED;
		margin-top:12px;
		padding:10px 20px 10px 20px;
		font-size:14px;
		text-align:center;
		border-radius: 3px;
		font-weight:normal;
		text-decoration:none;
		width:auto;
		-moz-box-shadow: 1px 1px 2px #666;
		-webkit-box-shadow: 1px 1px 2px #666;
		box-shadow: 1px 1px 2px #666;
		/* For IE 8 */
		-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#666666')";
		/* For IE 5.5 - 7 */
		filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#666666');
	}
	.blue-button:hover{
		background-color:#6BA3FE;
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#6BA3FE),color-stop(1,#4D8FFD));
		border:1px solid #2F5BB7;
		-moz-box-shadow: 1px 1px 2px #fff;
		-webkit-box-shadow: 1px 1px 2px #fff;
		box-shadow: 1px 1px 2px #fff;
		color:#fff;
		text-decoration:none;
		/* For IE 8 */
		-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#ffffff')";
		/* For IE 5.5 - 7 */
		filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#ffffff');
	}
	.blue-button-deactivated{
		background-color: #EAF2FF;
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#EAF2FF),color-stop(1,#EAF2FF));
		color:#ccc;
		border:1px solid #EAF2FF;
		margin-top:12px;
		padding:10px 20px 10px 20px;
		font-size:14px;
		text-align:center;
		border-radius: 3px;
		font-weight:normal;
		text-decoration:none;
		width:auto;
		-moz-box-shadow: 1px 1px 2px #ccc;
		-webkit-box-shadow: 1px 1px 2px #ccc;
		box-shadow: 1px 1px 2px #ccc;
		/* For IE 8 */
		-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#cccccc')";
		/* For IE 5.5 - 7 */
		filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#cccccc');
	}
	
	.mediumgreen-button{
		background-color: #339900;
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#339900),color-stop(1,#2B8400));
		color:#fff;
		border:1px solid #2B8400;
		text-shadow: -1px -1px 0px #608000;
	}
	.mediumgreen-button:hover{
		background-color:#3AB300;
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#3AB300),color-stop(1,#339900));
		color:#fff;
		border:1px solid #2B8400;
	}
	
	
	.lightgreen-button{
		background-color: #99cc00;
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#99cc00),color-stop(1,#89B700));
		color:#fff;
		border:1px solid #89B700;
	}
	.lightgreen-button:hover{
		background-color:#B1EC00;
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#B1EC00),color-stop(1,#99cc00));
		color:#eee;
		border:1px solid #99cc00;
		text-shadow: -1px -1px 0px #608000;
	}

	
	.lightergreen-button{
		background-color: #cce57f;
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#cce57f),color-stop(1,#cce57f));
		color:#000;
		border:1px solid #ccc;
	}
	.lightergreen-button:hover{
		background-color:#cce57f;
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#cce57f),color-stop(1,#cce57f));
		color:#999;
		border:1px solid #fff;
	}
	
	
	.lightgray-button{
		background-color: #F0F0F0;
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#F0F0F0),color-stop(1,#E4E4E4));
		color:#000;
		border:1px solid #E4E4E4;
	}
	.lightgray-button:hover{
		background-color:#F7F7F7;
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#F7F7F7),color-stop(1,#F0F0F0));
		color:#999;
		border:1px solid #E4E4E4;
	}
a.keyword-click-active{background-color:#339900;background-image:url(/images/white-tick.png);background-position:right;background-repeat:no-repeat;border-color:#339900;}
a.keyword-click-active:hover{background-color:#33CC00;background-image:url(/images/white-tick.png);background-position:right;background-repeat:no-repeat;border-color:#33CC00;}
	
	
/* standard form */


.standardform label{
	width:150px;
	display:inline block;
	float:left;
	padding-top:6px;
}

.standardform label.error{
	display:block;
	float:none;
	padding-top:6px;
	width:260px;
}

.standardform .standardtextfield{
		padding:10px 4px 10px 4px;
		border-radius: 4px;	
		border:1px solid #eee;
		width:260px;
		font-size:1rem;
		font-weight:600;
		-webkit-box-shadow: 0 1px 0 #e6e6e6;
		box-shadow: 0 1px 0 #e6e6e6;
		-webkit-appearance: none;
		-moz-appearance: none;
}
.standardform .standardtextarea{
		padding:10px 4px 10px 4px;
		border-radius: 4px;	
		border:1px solid #eee;
		width:260px;
		font-size:1rem;
		font-weight:600;
		-webkit-box-shadow: 0 1px 0 #e6e6e6;
		box-shadow: 0 1px 0 #e6e6e6;
		-webkit-appearance: none;
		-moz-appearance: none;
}

.standardform .standardselect{
		padding:10px 4px 10px 4px;
		border-radius: 4px;	
		border:1px solid #eee;
		width:260px;
		font-size:1rem;
		font-weight:600;
		-webkit-box-shadow: 0 1px 0 #e6e6e6;
		box-shadow: 0 1px 0 #e6e6e6;
}
	
	.error{color:red;}

	.big-form-text-field{
		padding:10px 4px 10px 4px;
		border-radius: 6px;	
		border:1px solid #eee;
	}
	
.error-div{
		background-color: #CC0000;
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#CC0000),color-stop(1,#B00000));
		color:#fff;
		margin-top:12px;
		padding:10px 20px 10px 20px;
		font-size:14px;
		text-align:center;
		border-radius: 3px;
		font-weight:normal;
		text-decoration:none;
		width:auto;
		border:1px solid #930000;
		border-top:#FF9797;
		-moz-box-shadow: 0px 2px 10px #888;
		-webkit-box-shadow: 0px 2px 10px #888;
		box-shadow: 0px 2px 10px #888;
		/* For IE 8 */
		-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#888888')";
		/* For IE 5.5 - 7 */
		filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#888888');
	}
	
	.error-div h1, .error-div  h2, .error-div  h3, .error-div h4, .error-div p {color:#fff;text-align:center;margin:0px 0px 12px 0px;}
	.error-div ol {text-align:left;margin:0px 0px 18px 0px;}
	.error-div ol li {text-align:left;margin:0px 0px 8px 0px;}

	/********* STUFF FOR highlighting sales pitches *****************************/
	.salespitchtools{
		box-shadow: 1px 1px 6px #339900;background-color:#fff;padding:20px;
	 border: 1px solid #339900;
	 margin: 20px;
		 border-radius:5px
	}


/********* STUFF FOR kgsearch.php *****************************/

.kgsearchform{
	text-align:center;
}

.kgsearchtable{	
	width:800px;
}
	
.kgsearchtable .td-left{
	width:200px;
	vertical-align:top;	
}
	
.kgsearchtable .td-right{
	width:600px;
	vertical-align:top;
}




/********* STUFF FOR SCHEMA TOOL *****************************/

.schemaformleft{
	width:50%;
	float:left;
}

.schemaformright{
	width:50%;
	float:left;
}
#schemaform label{
	margin-top:12px;
	width:400px;
}
#schemaform label i{
	color:#339900;
}

#schemaform .schemaforminput{
	padding:10px 4px 10px 4px;
	border-radius: 4px;	
	border:1px solid #ccc;
	width:350px;
	font-size:1rem;
	font-weight:600;
	-webkit-box-shadow: 0 1px 0 #e6e6e6;
	box-shadow: 0 1px 0 #e6e6e6;
	-webkit-appearance: none;
	-moz-appearance: none;
}
#schemaform .schemaformtextarea{
	padding:10px 4px 10px 4px;
	border-radius: 4px;	
	border:1px solid #ccc;
	width:350px;
	font-size:1rem;
	font-weight:600;
	-webkit-box-shadow: 0 1px 0 #e6e6e6;
	box-shadow: 0 1px 0 #e6e6e6;
	-webkit-appearance: none;
	-moz-appearance: none;
}

#schemaform .schemaformselect{
	padding:10px 4px 10px 4px;
	border-radius: 4px;	
	border:1px solid #ccc;
	width:350px;
	font-size:1rem;
	font-weight:600;
	-webkit-box-shadow: 0 1px 0 #e6e6e6;
	box-shadow: 0 1px 0 #e6e6e6;
}

.schemaformblock{
	width:460px;	
}

.schemaformblock .schemaformlabel{
	width:400px;
	float:none;
	display:block;	
}

.schemaformselect .level1 {color:#000;font-weight:bold;}
.schemaformselect .level2 {color:#333;font-weight:bold;}
.schemaformselect .level3 {color:#333;}
.schemaformselect .level4 {color:#999;}	

textarea#schemaout{
	width:400px;
	height:600px;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #999;
    font-weight:normal;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #999;
   opacity:  1;
   font-weight:normal;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #999;
   opacity:  1;
   font-weight:normal;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #999;
   font-weight:normal;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #999;
   font-weight:normal;
}

#schematoolorgtable{
	width:800px;
}


/********* STUFF FOR serpsimulator.php *****************************/

#serp-display-left{
	float:left;	
}

#serp-display-desktop{
	width:656px;
	border:1px solid #ddd; 
	font-family:arial,sans; 
	font-size:small;
	margin-bottom:20px
}
#snippetform{
	background-color:#339900; 
	padding:20px;
}

#metatitlein{
	font-family:arial,sans;
	font-size:18px;
	color:#1e0fbe;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border:1px solid #ccc;
	padding:10px;
}

#metadesc1in{
	height:40px;
	font-family:arial,sans;
	font-size:13px;
	color:#545454;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border:1px solid #ccc;
	padding:10px;
}	


.serp-sim-courier-titles{
	font-family: 'Courier New', Courier, monospace;
	font-size:34px;
	color:#783366;
	font-weight:bold;
	margin:20px 0px 0px 0px;
}

	
.imagefloatleft{
	float:left;
	margin :0px 20px 20px 0px;
	
}
.image2icon{
	width:50px;
	height:50px;
}




a.kaliscore-grey-button{
	display:block;
	float:left;
	padding:6px 12px 6px 12px;
	background-color:#666;
	color:#fff;
	border-radius:15px;
	margin:10px 10px 0px 0px;
	cursor:pointer;
}

a.kaliscore-grey-button i{
	color:#99cc00;
	margin-left:6px;
}


	
footer{
	background-color:#444;
	color:#ccc;
}
.footer-inner{
	width:1000px;
	margin-left:auto;
	margin-right:auto;
	padding-top:20px;		
}
.footer-inner a{
	color:#fff;
	text-decoration:none;
}
.footer-inner a:hover{
	text-decoration:underline;
}



/*********************************************************************************************/
/* START MEDIA QUERIES                      
*/


/*
*************************************************************************************
*  SCREENS UP TO 768 px **************************************************************
*************************************************************************************
*/

@media only screen and (max-width: 768px) {
	header{		
		/*position:fixed;*/
		width:100%;
		height:40px;
		background-color:#FAFAFA;
		border-bottom:1px solid #eee;
		margin:0px;
		padding: 0px 0px 6px 0px;
		/*top:0px;
		z-index:100;*/
	}
	
	.header-inner {
        width:90%;
        margin-left: auto;
		margin-right: auto;
        background: none;
		padding-top:10px;
	}

	#menu-slogan{display:none;}
		
	#header-nav {
		display:none;
	} 
	
	#top-logo{
		text-decoration:none;
		display:block;
		margin-top:2px;
		width:96px;
		height:29px;
		float:left;
		background-image:url(https://kalicube.pro/images/web-home-logo2-mobile.png);
		background-repeat:no-repeat;
	}	

	a.to_nav {
	    float: right;
	    color: #fff;
	    background: #4e4e4e;
	    text-decoration: none;
	    padding: 10px 10px;
	    font-size: 12px;
	    font-weight: bold;
	    line-height: 12px;
	    /*height: 30px;*/
	    text-transform: uppercase;
	    letter-spacing: 0.1em;
	    -webkit-border-radius: 3px;
	    -moz-border-radius: 3px;
	    border-radius: 3px;
	}
	 
	a.to_nav:hover,
	a.to_nav:focus {
	    color: #1c1c1c;
	    background: #ccc;
	}


	
	article{
		width:100%;		
	}
/* is replaced by */	
	.pagesection{
		width:100%;		
	}

	
	
	div.article-inner{
		width:100%;		
	}
/* is replaced by */
	div.pagesection-inner{
		width:100%;		
	}


	
	.h1article{
		padding-top:10px;
	}
/* is replaced by */
	.firstsection{
		padding-top:10px;
		margin-top:44px;
	}


	
	.h1article .article-inner{
		padding:0px 3% 10px 3%;
		width:94%;
	}
/* is replaced by */
	.firstsection .pagesection-inner{
		padding:0px 3% 10px 3%;
		width:94%;
	}
	
	
	.article-inner h1{
		padding-left:10px;
		padding-right:10px;
		margin-top:60px;
	}
/* is replaced by */
	.pagesection-inner h1{
		padding-left:10px;
		padding-right:10px;
		margin-top:0px;
	}
	

	.pagesection-inner img{
		width:90%;
	}
	
	.article-inner p{
		padding-left:10px;
		padding-right:10px;
	}
/* is replaced by */
	.pagesection-inner p{
		padding-left:10px;
		padding-right:10px;
	}
	
	
	.narrowbannerimage{
		height:220px;
		background-image:url(https://kalicube.pro/images/kalicube-pro-header.png);
		background-position:top center;
	}
	.narrowbannerimage div{
		margin-top:30px; 
		background: rgba(0, 0, 0, 0.5); 
		padding-top:20px; 
		padding-bottom:40px;
	}	
	.narrowbannerimage div h1{
		font-size:2em;
	}

	
	.kpro-index-col-l{
		width:100%;
		margin-bottom:60px;
		text-align:left;
	}
	.kpro-index-col-r{
		width:100%;
		text-align:left;
	}	
	.kpro-index-col-l img, .kpro-index-col-r img{
		width:100%;
		border:1px solid #ccc;
	}	
	.KG-nike{
		display:none;
	}
	
	.textsqueeze{
		width:94%;
		margin-left:3%;
	}
	
	.whatiskalicube{
				
	}
	.kalicubepng{
		width:100%;
		margin-bottom:16px;		
	}
	/*
	.logosnoshow{
		display:none;
	}
	*/
	.logosholder{}
	.logosimagemargin{
		margin-right:20px;
	}
	
	.leftbar{
		width:85%;
		padding-left:10px;
		border-left:6px solid #339900;
	}

	
	.standardform {
		margin-left:10px;
		width:95%;
	}
	

	.standardform label{
		width:90%;
		display:inline block;
		float:left;
		padding-top:6px;
	}

	.standardform label.error{
		display:block;
		float:none;
		padding-top:6px;
		width:90%;
	}

	.standardform .standardtextfield{
			padding:10px 4px 10px 4px;
			border-radius: 4px;	
			border:1px solid #aaa;
			width:90%;
	}

	.standardform .standardselect{
			padding:10px 4px 10px 4px;
			border-radius: 4px;	
			border:1px solid #aaa;
			width:90%;
			margin-top:10px;
	}
	
	.error{color:red;}
	
	.contactformholder{
		width:94%;
		margin-left:3%;
	}

	ul#projectslist li a{
		display:block;
		padding:10px 0px 10px 0px;	
		border-bottom:1px dotted #ccc;
	}
	
	.fullwidthimage{
		width:90%;
	}
	
	/********* STUFF FOR kgsearch.php *****************************/

	.kgsearchform{
		
	}

	.kgsearchh2{
		padding-left:2%;
		font-weight:bold;
		margin-top:20px;
	}

	.kgsearchtable{	
		width:96%;
		margin-left:2%;
		font-size:16px;
	}

	.kgsearchtable .td-left{
		word-wrap: break-word;
	}
		
	.kgsearchtable .td-right{
		word-wrap: break-word;
	}	

	.mobilespacer{
		margin-bottom:240px;
	}	


	/********* STUFF FOR SCHEMA TOOL *****************************/


	.schemaformleft{
		width:95%;
		float:none;
	}

	.schemaformright{
		width:95%;
		float:none;
	}
	#schemaform label{
		margin-top:20px;
		width:100%;
	}
	#schemaform label i{
		color:#339900;
	}

	#schemaform .schemaforminput{
		padding:10px 4px 10px 4px;
		border-radius: 4px;	
		border:1px solid #ccc;
		width:90%;
		font-size:1rem;
		font-weight:600;
		-webkit-box-shadow: 0 1px 0 #e6e6e6;
		box-shadow: 0 1px 0 #e6e6e6;
		-webkit-appearance: none;
		-moz-appearance: none;
		margin:0px 0px 20px 0px;
	}
	#schemaform .schemaformtextarea{
		padding:10px 4px 10px 4px;
		border-radius: 4px;	
		border:1px solid #ccc;
		width:90%;
		font-size:1rem;
		font-weight:600;
		-webkit-box-shadow: 0 1px 0 #e6e6e6;
		box-shadow: 0 1px 0 #e6e6e6;
		-webkit-appearance: none;
		-moz-appearance: none;
	}

	#schemaform .schemaformselect{
		padding:10px 4px 10px 4px;
		border-radius: 4px;	
		border:1px solid #ccc;
		width:90%;
		font-size:1rem;
		font-weight:600;
		-webkit-box-shadow: 0 1px 0 #e6e6e6;
		box-shadow: 0 1px 0 #e6e6e6;
	}

	.schemaformblock{
		width:96%;	
	}

	.schemaformblock .schemaformlabel{
		width:96%;
		float:none;
		display:block;	
	}

	.schemaformselect .level1 {color:#000;font-weight:bold;}
	.schemaformselect .level2 {color:#333;font-weight:bold;}
	.schemaformselect .level3 {color:#333;}
	.schemaformselect .level4 {color:#999;}	

	textarea#schemaout{
		width:90%;
		height:400px;
	}

	::-webkit-input-placeholder { /* WebKit, Blink, Edge */
	    color:    #999;
	    font-weight:normal;
	}
	:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	   color:    #999;
	   opacity:  1;
	   font-weight:normal;
	}
	::-moz-placeholder { /* Mozilla Firefox 19+ */
	   color:    #999;
	   opacity:  1;
	   font-weight:normal;
	}
	:-ms-input-placeholder { /* Internet Explorer 10-11 */
	   color:    #999;
	   font-weight:normal;
	}
	::-ms-input-placeholder { /* Microsoft Edge */
	   color:    #999;
	   font-weight:normal;
	}

	#schematoolorgtable{
		width:90%;
	}

	table#schematoolorgtable td {
	    padding: 8px 8px 8px 8px;
	    text-align: left;
	}

	.mobile-spacing{
		margin-top:24px;
		margin-bottom:30px;
	}

	#schemaform .hasbutton{
		width:75%;
	}

	#schemaform .fancy-button{
			background-color: #4D8FFD;
			background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#4D8FFD),color-stop(1,#4888EE));
			color:#fff;
			margin-top:20px;
			padding:8px 8px 8px 8px;
			font-size:14px;
			text-align:center;
			border-radius: 3px;
			font-weight:normal;
			text-decoration:none;
			width:auto;
			border:1px solid #4787ED;
			-moz-box-shadow: 1px 1px 2px #666;
			-webkit-box-shadow: 1px 1px 2px #666;
			box-shadow: 1px 1px 2px #666;
			/* For IE 8 */
			-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#666666')";
			/* For IE 5.5 - 7 */
			filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#666666');
		}

	/********* STUFF FOR serpsimulator.php *****************************/

	#serp-display-left{	
		width:100%;
		float:none;
	}

	#serp-display-desktop{
		display:none;
	}

	#snippetform{
		background-color:#339900; 
		padding:5%;
		width:96%;
		margin-bottom:20px;
	}
		
	#metatitlein{
		width:90%;
	}

	#metadesc1in{
		width:90%;
		font-size:16px;
	}

	.serpsimsqueeze article{
		width:92%;
		margin-left:3%;
	}	

	.serpsimarticleimage{
		margin-top:40px;
		margin-bottom:20px;
		width:100%;
	}	

	/********* STUFF FOR mentions.php *****************************/

	.mentionsbox{
		width:100%;
	}
	/*
	.mentionsboximage{
		float:left;
		width:200px;
		height:200px;
		margin:10px;
	}
	.mentionsboximage figure{
		width:200px;
		height:200px;
		padding:0px;
		margin:0px;
	}
	.mentionsboximage figure a img{
		width:200px;
		height:200px;
		padding:0px;
		margin:0px;
	}
	.mentionsboxright{
		float:left;
		width:650px;
		margin-left:30px;
	}
	*/
		
	/*** secondary nav is the menu at the bottom in the mobile version **/


	#secondary_nav_wrapper{}
		
	#secondary_nav ul {
	    list-style: none;
	    background: #1c1c1c;
	    padding: 5px 0;
		margin:0px;
	}
	 
	#secondary_nav ul li a {
	    display: block;
	    padding: 0 20px;
	    color: #fff;
	    text-decoration: none;
	    font-weight: bold;
	    text-transform: uppercase;
	    letter-spacing: 0.1em;
	    letter-spacing: 0.1em;
	    line-height: 3em;
	    /* height: 3em; */
		/* width:80%; */
	    border-bottom: 1px solid #383838;
	}
	/*
	#secondary_nav ul li a {
	    padding: 0px 20px 0px 40px;
	}
	*/ 
	#secondary_nav li:last-child a {
	    /*border-bottom: none;*/
	}
	 
	#secondary_nav ul li a:hover{
	    color: #1c1c1c;
	    background: #ccc;
	}
	#secondary_nav ul li a:active, #secondary_nav ul li a:visited{
	    background: #1c1c1c;
		color: #fff;
	}	

	
	footer{
		width:100%;
		margin: 0px;
		background-color:#4c4c4c;		
	}
	
	.footer-inner{
		width:90%;
		margin: 0px auto 0px auto;
		background-color:#4c4c4c;
		color:#fff;	
		padding:10px;		
	}

	.br-span{
	  display:block;
	}

}





/*
*************************************************************************************
*  SCREENS FROM 769 px **************************************************************
*************************************************************************************
*/

@media only screen and (min-width: 769px) {
	a.to_nav {
        display: none;
    }
	#secondary_nav {
		display:none;
	}	

	.narrowbannerimage{
		height:220px;
		background-image:url(https://kalicube.pro/images/kalicube-pro-header.png);
		background-position:top center;
	}
	.narrowbannerimage div{
		margin-top:100px; 
		background: rgba(0, 0, 0, 0.5); 
		padding-top:30px; 
		padding-bottom:40px;
	}
	
	#kpro-index-cols{
		background-image:url(https://kalicube.pro/images/dot.jpg);
		background-position:top center; 
		background-repeat:repeat-y;
		width:1000px;
	}
	.kpro-index-col-l{
		float:left;
		width:400px;
		margin-right:100px;
		text-align:left;
		
	}
	.kpro-index-col-r{
		float:left;
		width:400px;
		margin-left:100px;
		text-align:left;
	}
	.kpro-index-col-l img, .kpro-index-col-r img{
		width:100%;
		border:1px solid #ccc;
	}
	.KG-nike{
		float:right;
		margin:0px 0px 0px 20px;
		width:120px;
	}
	.whatiskalicube{
		width:800px;
		margin-left:100px;
		margin-top:12px;			
	}
	.whatiskalicube img{
		border:1px solid #eee;
		float:left;			
	}	
	.whatiskalicubetext{
		width:380px;
		float:left;
		margin-left:20px;
	}
	.logosnoshow{
		
	}

	p.logosholder{
		display:block;
		width:742px;
		height:58px;
		margin-left:auto;
		margin-right:auto;
		margin-bottom:12px;
	}
	
	.logosimagemargin{
		float:left;
		margin-right:20px;
	}
	.contactformholder{
		width:600px;
		margin-left:200px;
	}
	.centeredblock{
		margin-left:auto;
		margin-right:auto;
	}
	.centeredblockwidth900{
		width:900px;
	}	
	.centeredblockwidth800{
		width:800px;
	}
	.centeredblockwidth700{
		width:700px;
	}
	.centeredblockwidth600{
		width:600px;
	}
	.centeredblockwidth500{
		width:500px;
	}


	.indexnextarrow{
		float:right;
		width:150px;
		border:1px #666 solid;
	}
	.indexnextarrow p{
		text-align: center;
	}
	.indexnextarrow p i{
		font-size:100px ;
	}

	.indexnextarrowp{
		font-size:24px ;
		text-align:center;
	}
	
	/********* STUFF FOR serpsimulator.php *****************************/

	#serp-display-left{
		width:658px;	
	}	
	#metatitlein{
		width:610px;
	}

	#metadesc1in{
		width:610px;
	}

	/********* STUFF FOR mentions.php *****************************/

	.mentionsbox{
		width:900px;
	}
	.mentionsboximage{
		float:left;
		width:200px;
		height:200px;
		margin:10px;
	}
	.mentionsboximage figure{
		width:200px;
		height:200px;
		padding:0px;
		margin:0px;
	}
	.mentionsboximage figure a img{
		width:200px;
		height:200px;
		padding:0px;
		margin:0px;
	}
	.mentionsboxright{
		float:left;
		width:650px;
		margin-left:30px;
	}


	/**** stuff for brand scores circle holders ***********************************/

	#kaliscorecompanytopholder{
		display:block;
		width:600px;
		height:300px;
		margin:0px;
		margin-left:auto;
		margin-right:auto;
	}

	#circle-outer-left-1{
		text-align:center;
		width:200px;
		float:left;
		margin-right:100px;

	}
	.kaliscorecompanytable-th1{
	width:200px;
	}
	.kaliscorecompanytable-th2{
		width:300px;
	}
	.kaliscorecompanytable-th3{
		width:300px;
	}
	
}
