﻿

* {
	box-sizing: border-box;
	font-family: "Lato", sans-serif, Arial, Helvetica, sans-serif;
}
	  
.header 
{
	overflow: visible; /* overflow: hidden;*/
	padding: 0px;
	background-image: url(https://britishkaratefederation.com/IMAGES_STRUCTURE/PKA-Background.jpg);
	height: 170px; /*180*/
	/*width: 1000px;	/*width*/
	position: inherit; /* relative*/
	text-align: center; 
	margin: 0 auto; 
}
.headerimg
{
  	/*margin:20px; height:125px; width: 125px; float: left; */
  	margin-top:20px; margin-bottom:20px; margin-left:20px; margin-right:5px; height:125px; width: 125px; float: left; 

}


/* Desktop */
@media screen and (min-width: 601px) {
  div.headertext-variable {
    font-size: 60px; font-family: "Lato", sans-serif; 
    width:100%; margin:auto; padding-top:35px; COLOR:#d90026; FONT-WEIGHT:bold; text-shadow: 5px 4px 3px #660000;
  }
}

/* Mobile */
@media screen and (max-width: 600px) {
  div.headertext-variable {
    font-size: 35px; font-family: "Lato", sans-serif; 
    width:100%; margin:auto; padding-top:30px; COLOR:#d90026; FONT-WEIGHT:bold; text-shadow: 2px 2px 3px #660000;
  }
}

/* PKA-NavBar settings */
.PKA-NavBar
{
	width: 100%;  padding-top:0px; padding-bottom:10px; padding-left:0px; padding-right:0px; COLOR:white; text-align: left; 
}



/* Style the content */
/* Desktop */
@media screen and (min-width: 601px) 
{
	.content 
	{
		/*background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1), rgba(255,0,0,0));*/
		background-color: #f5f5f5; /*f2f2f2; */
		padding-top: 5px; /*padding: 20px;*/
		padding-left: 100px;
		padding-right: 100px;
		padding-bottom: 20px;
		width: 100%;	/*width*/
		position: inherit; /*relative;*/
		text-align: center; 
		margin: 0px auto;
	}
		
	/* Text Headings */
	H1 
	{
		font-family: "Lato", sans-serif; FONT-SIZE: 30px; 
		MARGIN-TOP: 0px; MARGIN-BOTTOM: 5px; COLOR: #262626; FONT-WEIGHT: normal; PADDING-TOP: 5px;  PADDING-BOTTOM: 0px; text-shadow: 2px 2px 3px #888888;
		/*FONT-FAMILY: Arial, Times New Roman, Verdana, Geneva, sans-serif; FONT-SIZE: 32px; */
	}
	H2 
	{
		font-family: "Lato", sans-serif; FONT-SIZE: 22px; color: #262626; text-shadow: 2px 1px 2px #888888; letter-spacing: 1.0px;
		MARGIN-TOP: 0px; MARGIN-BOTTOM: 5px; FONT-WEIGHT: normal; PADDING-TOP: 5px; text-align:left; /*text-transform: uppercase;*/

		/*font-family: "Lato", sans-serif; FONT-SIZE: 26px; 
		MARGIN-TOP: 0px; MARGIN-BOTTOM: 5px; COLOR: #EE0000; FONT-WEIGHT: bold; PADDING-TOP: 5px; text-shadow: 1px 1px 1px #888888;*/
	}
	H3 
	{
		font-family: "Lato", sans-serif; FONT-SIZE: 20px; 
		MARGIN-TOP: 0px; MARGIN-BOTTOM: 5px; COLOR: #262626; FONT-WEIGHT: normal; PADDING-TOP: 5px; text-shadow: 1px 1px 1px #888888; 
		/*FONT-FAMILY: Arial, Times New Roman, Verdana, Geneva, sans-serif; FONT-SIZE: 20px; */
	}
	H3white 
	{
		font-family: "Lato", sans-serif; FONT-SIZE: 20px; 
		MARGIN-TOP: 0px; MARGIN-BOTTOM: 5px; COLOR: #ffffff; FONT-WEIGHT: normal; PADDING-TOP: 5px; text-shadow: 1px 1px 1px #333333; 
		/*FONT-FAMILY: Arial, Times New Roman, Verdana, Geneva, sans-serif; FONT-SIZE: 20px; */
	}
	
	H4
	{
		font-family: "Lato", sans-serif; FONT-SIZE: 17px; 
		MARGIN-TOP: 0px; MARGIN-BOTTOM: 5px; COLOR: #262626; FONT-WEIGHT: normal; PADDING-TOP: 5px; text-align:justify 
		/*FONT-FAMILY: Arial, Times New Roman, Verdana, Geneva, sans-serif; FONT-SIZE: 16px; */
	}
	P 
	{
		FONT-SIZE: 15px; FONT-FAMILY: "Lato", Arial, Times New Roman, Verdana, Geneva, sans-serif; line-height:1.2;
		COLOR: #505050; TEXT-DECORATION: none; word-spacing:0; margin-bottom:0; margin-top: 0; text-align: justify;
	}
	ul
	{	font-size: 15px; color:#505050; text-align:left; line-height:1.6;
		.li{font-size: 15px; color:#505050; text-align:left; line-height:2.0;}
	}
	ul.list2
		{font-size: 15px; color:#505050; text-align:left; line-height:1.6;}
	ul.list2 li
		{font-size: 15px; color:#505050; text-align:left; line-height:2.0;}
	ul.list2 li a:link
		{COLOR: #505050; font-style:italic; text-decoration:underline; font-weight:normal} /*Unvisited link*/
	ul.list2 li a:visited
		{COLOR: #505050; !important; font-style:italic; text-decoration:underline}/* visited link */
	ul.list2 li a:hover
		{COLOR: #FF0800; font-weight:bold}/* mouse over link */
	ul.list2 li a:active 
		{color: #FF0800; font-style:italic} /* selected link */

	.timetable-red-textbox
	{
		margin: 0px;
		width: 90%;
		border: 3px solid #d90026;/*ff3333*/
		background: #d90026;
		padding: 10px;
		text-align:left;
		font-size: 14px; color: #ffffff; text-align:left;
		ul{color:#ffffff; text-align:left; line-height:1.6;}
		P{font-size: 14px; color: #ffffff; text-align:left; line-height:1.5;}
		H4{font-weight:bold; text-transform: uppercase; font: 18px "Lato", sans-serif; color: #fff; text-shadow: 1px 1px 1px #333333; text-align:left;}
		/*H4{font-family: "Lato", sans-serif; FONT-SIZE: 17px; COLOR: #ffffff; FONT-WEIGHT: bold; text-align:left; text-shadow: 1px 1px 1px #c2c2d6;}*/
		hr {background-color: white; height: 1px; border: 0; }
		a:{COLOR: #ffffff; font-style:italic; text-decoration:underline;} /*Link*/
		a:link{COLOR: #ffffff; font-style:italic; text-decoration:underline;} /*Unvisited link*/
		a:visited{COLOR: #ffffff; font-style:italic; text-decoration:underline;}/* visited link */
		a:hover{COLOR: #505050; font-weight:bold;}/* mouse over link */
		a:active {color: #505050; font-style:italic;} /* selected link */
	}
}
/* Mobile */
@media screen and (max-width: 600px) 
{
	.content 
	{
		/*background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1), rgba(255,0,0,0));*/
		background-color: #f5f5f5; /*f2f2f2; */
		padding-top: 5px; /*padding: 20px;*/
		padding-left: 25px;
		padding-right: 25px;
		padding-bottom: 20px;
		/*width: 1000px;	/*width*/
		position: inherit; /*relative;*/
		text-align: center; 
		margin: 0px auto;
	}
		
	/* Text Headings */
	H1 
	{
		font-family: "Lato", sans-serif; FONT-SIZE: 24px; 
		MARGIN-TOP: 0px; MARGIN-BOTTOM: 5px; COLOR: #262626; FONT-WEIGHT: normal; PADDING-TOP: 5px;  PADDING-BOTTOM: 0px; text-shadow: 2px 2px 3px #888888;
		/*FONT-FAMILY: Arial, Times New Roman, Verdana, Geneva, sans-serif; FONT-SIZE: 32px; */
	}
	H2 
	{
		font-family: "Lato", sans-serif; FONT-SIZE: 20px; 
		MARGIN-TOP: 0px; MARGIN-BOTTOM: 5px; COLOR: #262626; FONT-WEIGHT: normal; PADDING-TOP: 5px; text-shadow: 2px 2px 2px #888888;
		/*FONT-FAMILY: Arial, Times New Roman, Verdana, Geneva, sans-serif; FONT-SIZE: 24px; */
	}
	H3 
	{
		font-family: "Lato", sans-serif; FONT-SIZE: 16px; 
		MARGIN-TOP: 0px; MARGIN-BOTTOM: 5px; COLOR: #262626; FONT-WEIGHT: normal; PADDING-TOP: 5px; text-shadow: 1px 1px 1px #888888; 
		/*FONT-FAMILY: Arial, Times New Roman, Verdana, Geneva, sans-serif; FONT-SIZE: 20px; */
	}
	H3white 
	{
		font-family: "Lato", sans-serif; FONT-SIZE: 16px; 
		MARGIN-TOP: 0px; MARGIN-BOTTOM: 5px; COLOR: #ffffff; FONT-WEIGHT: normal; PADDING-TOP: 5px; text-shadow: 1px 1px 1px #888888; 
		/*FONT-FAMILY: Arial, Times New Roman, Verdana, Geneva, sans-serif; FONT-SIZE: 20px; */
	}
	H4
	{
		font-family: "Lato", sans-serif; FONT-SIZE: 16px; 
		MARGIN-TOP: 0px; MARGIN-BOTTOM: 5px; COLOR: #262626; FONT-WEIGHT: normal; PADDING-TOP: 5px; text-align:justify 
		/*FONT-FAMILY: Arial, Times New Roman, Verdana, Geneva, sans-serif; FONT-SIZE: 16px; */
	}
	P 
	{
		FONT-SIZE: 15px; FONT-FAMILY: Lato, Arial, Times New Roman, Verdana, Geneva, sans-serif; line-height:1.2;
		COLOR: #505050; TEXT-DECORATION: none; word-spacing:0; margin-bottom:0; margin-top: 0; text-align: justify;
	}
	ul
	{	font-size: 14px; color:#505050; text-align:left; line-height:1.6;
		.li	{font-size: 14px; color:#505050; text-align:left; line-height:1.6;}
	}
	ul.list2
		{font-size: 15px; color:#505050; text-align:left; line-height:1.6;}
	ul.list2 li
		{font-size: 15px; color:#505050; text-align:left; line-height:2.0;}
	ul.list2 li a:link
		{COLOR: #505050; font-style:italic; text-decoration:underline} /*Unvisited link*/
	ul.list2 li a:visited
		{COLOR: #505050; !important; font-style:italic; text-decoration:underline}/* visited link */
	ul.list2 li a:hover
		{COLOR: #FF0800; font-weight:bold}/* mouse over link */
	ul.list2 li a:active 
		{color: #FF0800; font-style:italic} /* selected link */


	.timetable-red-textbox
	{
		margin: 0px;
		width: 100%;
		border: 3px solid #d90026;
		background: #d90026;
		padding: 10px;
		text-align:left;
		font-size: 14px; color: #ffffff; text-align:left;
		ul{color:#ffffff; text-align:left; line-height:1.6;}
		P{font-size: 14px; color: #ffffff; text-align:left; line-height:1.4;}
		H4{FONT-WEIGHT: bold; text-transform: uppercase; font: 17px "Lato", sans-serif; color: #fff; text-shadow: 1px 1px 1px #333333; text-align:left;}
		/*H4{font-family: "Lato", sans-serif; FONT-SIZE: 17px; COLOR: #ffffff; FONT-WEIGHT: bold; text-align:left; text-shadow: 1px 1px 1px #c2c2d6;}*/
		hr {background-color: white; height: 1px; border: 0; }
		a:{COLOR: #ffffff; font-style:italic; text-decoration:underline;} /*Link*/
		a:link{COLOR: #ffffff; font-style:italic; text-decoration:underline;} /*Unvisited link*/
		a:visited{COLOR: #ffffff; !important; font-style:italic; text-decoration:underline;}/* visited link */
		a:hover{COLOR: #505050; font-weight:bold;}/* mouse over link */
		a:active {color: #505050; font-style:italic;} /* selected link */
	}
}


.red-textbox
{
	margin: auto;
	width: 100%;
	border: 3px solid #d90026;
	background: #d90026;
	padding: 10px;
}

.black-textbox
{
	margin: auto;
	width: 100%;
	border: 3px solid #333333;
	background: #333333;
	padding: 10px;
}


img {
  max-width: 100%;
  height: auto;
}



.newsimg_left
{
  	padding-top: 10px; padding-bottom: 15px; padding-left: 10px; padding-right: 10px; 
  	float: left;
  	MARGIN-BOTTOM: 15px; MARGIN-LEFT: 5px; MARGIN-RIGHT: 15px; 
  	box-shadow: 5px 5px 10px #888888;
  	border: 1px solid #ddd;
  	border-radius: 4px;
}
.newsimg_right
{
  	padding-top: 10px; padding-bottom: 15px; padding-left: 10px; padding-right: 10px; 
  	float: right;
  	MARGIN-BOTTOM: 15px; MARGIN-LEFT: 15px; MARGIN-RIGHT: 5px; 
  	box-shadow: 5px 5px 10px #888888;
  	border: 1px solid #ddd;
  	border-radius: 4px;
  	/*width:300px */
}
.photoimg_center
{
  	display: block;
  	text-align: center;
  	max-width: 100%; height: auto;
  	margin-left:auto; margin-right:auto;
	padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; 
   	box-shadow: 5px 5px 10px #888888;
  	border: 1px solid #ddd;
  	border-radius: 4px;
}

.banner
{
	box-shadow: 5px 5px 10px #888888;
}

.banner2
{
	box-shadow: 5px 5px 10px #888888;
	float: inherit;
	text-align: center;
}


.downloadimg_left
{
  	float: left;
  	MARGIN-BOTTOM: 10px; MARGIN-LEFT: 5px; MARGIN-RIGHT: 15px; 
  	box-shadow: 5px 5px 10px #888888;
  	border-radius: 12px;

}

.frontimg_left
{
  	float: left; padding: 10px; MARGIN-RIGHT: 25px; border-right: 1px solid red; width:150px; 
}

		
.footer 
{
	background-color: white;
	padding: 10px;
	text-align: center;
	margin: 0px auto;
}

/* Style the links */
#links {
  height: 75px;
  text-align: center;
  width: 100%;
}
#links div {
  width: 100%;
  height: 95px;
  display: inline-block;
  background: inherit;
}
#links:after {
  content: '';
  width: 100% /* Ensures there are at least 2 lines of text, so justification works */
  display: inline-block;
}
.link1:hover {opacity: 0.3;}





hr.style-two {
    padding: 0; 
    margin-bottom: -5px;
    border: 0;
    height: 1px;
    background: #EE0000;
    /*background-image: linear-gradient(to right, ##ccc, #EE0000, ##ccc);*/
    background-image: linear-gradient(to right, rgba(100, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

hr.style-bottom {
    padding: 0; 
    margin-top: -5px;
    border: 0;
    height: 1px;
    background: #EE0000;
    /*background-image: linear-gradient(to right, ##ccc, #EE0000, ##ccc);*/
    background-image: linear-gradient(to right, rgba(100, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}


/*====================================*/
/* Lists - Ordered and Unordered      */
/*====================================*/
.ul1
{
  	list-style-type: disc; 
  	list-style-position: outside;  
  	padding: 0px 0px 0px 30px;
  	color: #00004D; 
}
.ol1
{
  	margin:0px;
  	list-style-type: decimal; 
  	list-style-position: outside;  
  	padding: 0px 0px 0px 30px;
  	color: #00004D; 
  	position: relative;
  	display: block;
}


/*=====================================*/
/* Read more Buttons                    */
/*=====================================*/
.button 
{
  	background-color: 	#CC0000; 	/*dark red */
  	/*color: white; 					/*text*/
  	padding: 5px 10px;
  	text-align: center;
  	text-decoration: none;
  	display:inline-block;
  	font-size: 14px;
  	margin: 4px 2px;
  	-webkit-transition-duration: 0.1s; /* Safari */
  	transition-duration: 0.1s;
  	cursor: pointer;
  	target: top;
  	border-radius: 1px;
	/*border: #CC0000;				/*none;*/
  	/*box-shadow: 0 5px 0 darkred; /*new*/
}
/*----------------------------*/
.ReadMore-Left 
{
  	float:left;
  	background-color: 	#bb0000; 		/*dark red*/
  	color: white; 
}
.ReadMore-Left:hover 
{
  	background-color: 	#FF2800;		/*light red*/
  	color: white;
  	cursor: pointer;
}
.ReadMore-Left:active
{
	background-color: 	#CC0000;
	box-shadow: none;
  	top: 5px;
  	color: #ECD4D4;
}
/*----------------------------*/
.ReadMore-Right 
{
	float:right;
  	background-color: 	#CC0000; 		/*dark red*/
  	color: white; 
  	target: top;

 }
.ReadMore-Right:hover 
{
  	background-color: 	#FF0800;		/*light red*/
  	color: white;
  	cursor: pointer;
}
.ReadMore-Right:active
{
	background-color: 	#CC0000;
	box-shadow: none;
  	top: 5px;
  	color: #ECD4D4;
}
 
 
/*=====================================*/
/* Links                               */
/*=====================================*/
/*.a
{
	 COLOR: #ffffff;
}
a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

.a:hover {
  text-decoration: none;
  FONT-WEIGHT: bold;
  COLOR: #BB0000;
}

a:active {
  text-decoration: none;
}
 .a-normal
{
	 COLOR: #FFFFFF;
}
*/
.links
	{
		a:link{COLOR: #505050; font-style:italic; text-decoration:underline} /*Unvisited link*/
		a:visited{COLOR: #505050; !important; font-style:italic; text-decoration:underline}/* visited link */
		a:hover{COLOR: #FF0800; font-weight:bold}/* mouse over link */
		a:active {color: #FF0800; font-style:italic} /* selected link */
	}


/**/
