/* CSS Document */
@font-face {
	font-family:'Uni Ila.Sundaram-03';
	src: url('/fonts/Uni Ila.Sundaram-03.ttf')  format('truetype');
	}
	
@font-face {
	font-family:'Uni Ila.Sundaram-01';
	src: url('/fonts/Uni Ila.Sundaram-01.ttf')  format('truetype');
	}
	
@font-face {
	font-family:'Uni Ila.Sundaram-07';
	src: url('/fonts/Uni Ila.Sundaram-07.ttf')  format('truetype');
	}
@font-face {
font-family:'Tamilri_Chenetfont_02';
src: url('/fonts/Tamilri_Chenetfont_02.ttf')  format('truetype');
}

@font-face {
	font-family:'Aavarangal';
	src: url('/fonts/Aavarangal.ttf')  format('truetype');
	}
	
@font-face {
	font-family:'Lohit_Tamil';
	src: url('/fonts/Lohit_Tamil.ttf')  format('truetype');
	}

@font-face {
	font-family:'TAU_Elango_Barathi';
	src: url('/fonts/TAU_Elango_Barathi.ttf')  format('truetype');
	}

@font-face {
	font-family:'TAU_Elango_Madhavi';
	src: url('/fonts/TAU_Elango_Madhavi.ttf')  format('truetype');
	}




body{
margin:0;
padding:0;

}

/****************Main page deco****************/
#topsection{

height: 40px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 15% 0 15%; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 20%; /*Width of left column in percentage*/
margin-left: -100%;
height:auto;
}

#rightcolumn{
float: left;
width: 15%; /*Width of right column in pixels*/
margin-left: -15%; /*Set margin to that of -(RightColumnWidth)*/

}


#footer{
position:fixed;
clear: left;
width: 100%;
background: #006600;
color: #FFF;
text-align: center;
padding:0;
bottom:0;
}

#footer a{
color: #FFFF80;
}

.innertube{
/*margin: 10px; Margins for inner DIV inside each column (to provide padding)*/
margin-top: 20px;
margin-left:10px;
margin-right:15px
}

p {
  padding-bottom: 60px;
  width:95%;
}

/*################# tab function###################*/

/*------main page design ends-------*/
	
	
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #009900;
  width:61%;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 5px 6px;
  transition: 0.3s;
  font-size: 12px;
  color:#ffffff;
 
}


/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #006600;
  
  
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #006600;
}

.tab1 {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #009900;
  width:61%;
}

.tab1 button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 5px 6px;
  transition: 0.3s;
  font-size: 12px;
  color:#ffffff;
 
}

.tab1 button:hover {
  background-color: #006600;
   
}

/* Create an active/current tablink class */
.tab1 button.active {
  background-color: #006600;
}

/* Style the tab content */
.tabcontent {
  display: none;
  width:75%;
  padding: 6px 12px;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
  
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

div.ex1 {
 font-family:'Uni Ila.Sundaram-01';
 font-size:1em;
 margin: 1px auto 0 auto;
 width: 85%;
 height: 200px;
 overflow: scroll;
 overflow-x: hidden;
}


/* ####### page design ####### */

.title {
    text-align: center;
    font-family: 'Tamilri_Chenetfont_02';
    font-size: 2em;
    color: #1A740A;
	
}

.titleh2 {
	text-align: center;
	font-family: Tamilri_Chenetfont_02;
	font-size: 2.2em;
	color: #1a740a;
	line-height: .1em;
	margin-top: 30px;
  }

.title1 {
    text-align: center;
    font-family: 'Tamilri_Chenetfont_02';
    font-size: 2.5em;
    color: #1A740A;
	line-height:0.1em;
	margin-top:50px;
   
}

.subtitle {
    text-align: center;
    font-family: 'Uni Ila.Sundaram-03';
    font-size: 1.5em;
    color: #cf9f04;
    line-height:0.1em;
}

.subtitle1 {
    text-align: center;
    font-family: 'Uni Ila.Sundaram-03';
    font-size: 1.2em;
    color: #cf9f04;
    line-height:0.1em;
	
}
h2 {max-width:98%;}
h4 {max-width:98%;}
img {max-width:90%;} 

.fface {
font-family: 'Uni Ila.Sundaram-03';
}
.fface1 {
font-family: 'Uni Ila.Sundaram-03';
color: #FFF;
font-size: 0.4em;
text-align: center;
}


.stylea { text-decoration:none; font-family:'Uni Ila.Sundaram-03'; font-size:16px; color:#996600;}
.stylea1 { text-decoration:none; font-family:'Uni Ila.Sundaram-03'; font-size:14px; color:#996600;}
.stylea:hover { text-decoration:none; color:#990000;}
.stylea1:hover { text-decoration:none; color:#990000;}
.ppad { padding-bottom:0;}
.mfont {font-family: 'Uni Ila.Sundaram-03';}
.mfont4 {font-family: 'Uni Ila.Sundaram-03';}
.mfont1 {font-family: 'Uni Ila.Sundaram-03';}
.mfont3 {font-family: 'Uni Ila.Sundaram-03';}
.mfont2 {font-size: 0.8em;}


/*************Left Scroll design*******************/
.lscroll {
  font-family: 'Uni Ila.Sundaram-07';
  font-size:1.1em;
  padding-left:2px;
  background-color: #F8F8F8;
  width: 215px;
  height: 350px;
  overflow-y: scroll; /* Add the ability to scroll */
}
.lscroll1 {
  font-family: 'Uni Ila.Sundaram-07';
  font-size:0.8em;
 
}

/* Hide scrollbar for Chrome, Safari and Opera */
.lscroll::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.lscroll {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
} 



#panel {
  padding: 5px;
  text-align: left;
  background-color: #F8F8F8;
  border: solid 1px #c3c3c3;
}
#flip {
  padding: 3px;
  font-family:'Tamilri_Chenetfont_02';
  font-size:1.5em;
  text-align: center;
  background-color: #F8F8F8;
  border: solid 1px #c3c3c3;
}
#panel {
  padding: 5px;
  display: none;
}

.lcontent {
  padding: 10px 0 0 15px;
  width: 100%;
  height: 200px;
}
.rcontent {
  padding: 0 0 0 15px;
  width: 100%;
  height: 300px;
  overflow-y: scroll;
  mask-image: linear-gradient(to top, transparent, black),
    linear-gradient(to left, transparent 10px, black 10px);
  mask-size: 100% 20000px;
  mask-position: left bottom;
  -webkit-mask-image: linear-gradient(to top, transparent, black),
    linear-gradient(to left, transparent 17px, black 17px);
  -webkit-mask-size: 100% 20000px;
  -webkit-mask-position: left bottom;
  transition: mask-position 0.3s, -webkit-mask-position 0.3s;
}

.rcontent:hover {
	-webkit-mask-position : left top;
}

@keyframes background {
  from {
    background: pink;
  }
  to {
    background: #c0d6ff;
  }
}

.rwrapper {
  float: left;
  /*animation: background 5s infinite alternate;*/
}

/* ####### menu layout CSS ####### */

.bg-custom-1 {
  background-color: #85144b;
}

.bg-custom-2 {
background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);
}
.lineheight { line-height:3em; }
	

/* ####### responsive layout CSS ####### */

@media (max-width: 1250px){ /* 2nd level responsive layout break point- drop left column down */
	#leftcolumn{
		float: none;
		width: 95%;
		clear: both;
		margin-left: 10px;
		}
	
	#rightcolumn{
		float: none;
		width: 95%;
		margin-left: 10px;
		clear: both;
		}
	
	#contentcolumn{
	margin-left: 0;
	}
	
	.lineheight { line-height:2em; }
	.title1 { font-size:2em;}
	.titleh2 { font-size:2em;}
	.fface1 {font-size: 0.8em;}
}

@media (max-width: 1100px){ /* 2nd level responsive layout break point- drop left column down */
	#leftcolumn{
		float: none;
		width: 95%;
		clear: both;
		margin-left: 10px;
		}
	
	#rightcolumn{
		float: none;
		width: 95%;
		margin-left: 10px;
		clear: both;
		}
	
	#contentcolumn{
	margin-left: 0;
	}
	
	.lineheight { line-height:2em; }
	.title1 { font-size:2em;}
	.titleh2 { font-size:2em;}
	.fface1 {font-size: 0.8em;}
}

@media (max-width: 1000px){ /* 2nd level responsive layout break point- drop left column down */
	#leftcolumn{
		float: none;
		width: 95%;
		clear: both;
		margin-left: 10px;
		}
	
	#rightcolumn{
		float: none;
		width: 95%;
		margin-left: 10px;
		clear: both;
		}	

	#contentcolumn{
	margin-left: 0;
	}
	
	.lineheight { line-height:2em; }
	.title1 { font-size:2em;}
	.titleh2 { font-size:2em;}
	.fface1 {font-size: 0.8em;}
}

@media (max-width: 950px){ /* 2nd level responsive layout break point- drop left column down */
	#leftcolumn{
		float: none;
		width: 95%;
		clear: both;
		margin-left: 10px;
		}
	
	#rightcolumn{
		float: none;
		width: 95%;
		margin-left: 10px;
		clear: both;
		}	
	#contentcolumn{
	margin-left: 0;
	}
	
	.lineheight { line-height:2em; }
	.title1 { font-size:1.9em;}
	.titleh2 { font-size:1.9em;}
	.fface1 {font-size: 0.8em;}
}

@media (max-width: 840px){ /* 1st level responsive layout break point- drop right column down*/
	#leftcolumn{
	float: none;
	width: 95%;
	clear: both;
	margin-left: 10px;
	}
	
	
	#rightcolumn{
		float: none;
		width: 95%;
		margin-left: 10px;
		clear: both;
		}
	
	#contentcolumn{
	margin-right: 0;
	}
	.lineheight { line-height:2em; }
	.fface1 {font-size: 0.8em;}
	.titleh2 { font-size:1.8em;}
	
}

@media (max-width: 750px){ /* 2nd level responsive layout break point- drop left column down */
	#leftcolumn{
		float: none;
		width: 95%;
		clear: both;
		margin-left: 10px;
		}
	
	#rightcolumn{
		float: none;
		width: 95%;
		margin-left: 10px;
		clear: both;
		}

	#contentcolumn{
	margin-left: 0;
	}
	
	.lineheight { line-height:2em; }
	.title1 { font-size:1.2em;}
	.titleh2 { font-size:1.8em;}
	.fface1 {font-size: 0.8em;}
}

@media (max-width: 650px){ /* 2nd level responsive layout break point- drop left column down */
	#leftcolumn{
		float: none;
		width: 95%;
		clear: both;
		margin-left: 10px;
		}
	
	#rightcolumn{
	float: none;
	width: 95%;
	margin-left: 10px;
	clear: both;
	}
	
	#contentcolumn{
	margin-left: 0;
	}
	
	.lineheight { line-height:1em; }
	.subtitle { font-size:1em;}
	input.search {width: 250px;}
	img.size{ max-width:50%;}
	#footer {font-size: 0.8em;}
	button.search{ height:43px;margin-top: 5px;}
	.titleh2 { font-size:1.8em;}
	.title { font-size:1.6em;}
	.title1 { font-size:1em;}
	.mfont { font-size:0.8em; vertical-align:top;}
	.mfont4 { font-size:1em; vertical-align:top;}
	.mfont1 { font-size:0.7em; vertical-align:top;}
	.mfont3 { font-size:0.9em; vertical-align:top;}
	.mfont2 { font-size: 0.6em; vertical-align: top;}
	.lscroll { padding-left:2px; background-color: #F8F8F8; width: 350px; height: 460px; overflow-y: scroll; /* Add the ability to scroll */}
	.stylea { text-decoration:none;font-size:12px; color:#996600;}
	.stylea1 { text-decoration:none;font-size:15px; text-decoration:none; color:#996600;}
	div.ex1 { font-size:0.8em; width: 120%;}
	.fface1 {font-size: 0.8em;}
}

@media (max-width: 600px){ /* 2nd level responsive layout break point- drop left column down */
	#leftcolumn{
		float: none;
		width: 95%;
		clear: both;
		margin-left: 10px;
		}
	
	#rightcolumn{
		float: none;
		width: 95%;
		margin-left: 10px;
		clear: both;
		}
	
	#contentcolumn{
	margin-left: 0;
	}
	
	.lineheight { line-height:1em; }
	.subtitle { font-size:1em;}
	input.search {width: 250px;}
	img.size{ max-width:50%;}
	#footer {font-size: 0.8em;}
	button.search{ height:43px;margin-top: 5px;}
	.title { font-size:1.4em;}
	.title1 { font-size:1.2em;}
	.titleh2 { font-size:1.8em;}
	.mfont { font-size:0.8em; vertical-align:top;}
	.mfont4 { font-size:1em; vertical-align:top;}
	.mfont1 { font-size:0.7em; vertical-align:top;}
	.mfont3 { font-size:0.9em; vertical-align:top;}
	.mfont2 { font-size: 0.6em; vertical-align: top;}
	.lscroll { padding-left:2px; background-color: #F8F8F8; width: 350px; height: 460px; overflow-y: scroll; /* Add the ability to scroll */}
	.stylea { text-decoration:none;font-size:12px; color:#996600;}
	.stylea1 { font-size:15px; text-decoration:none; color:#996600;}
	div.ex1 { font-size:0.8em; width: 120%;}
	.fface1 {font-size: 0.8em;}
}

@media (max-width: 450px){ /* 2nd level responsive layout break point- drop left column down */
	#leftcolumn{
		float: none;
		width: 95%;
		clear: both;
		margin-left: 10px;
		}
	
	#rightcolumn{
		float: none;
		width: 95%;
		margin-left: 10px;
		clear: both;
		}
	
	#contentcolumn{
	margin-left: 0;
	}
	
	.lineheight { line-height:1em; }
	.subtitle { font-size:1em;}
	input.search {width: 250px;}
	img.size{ max-width:50%;}
	#footer {font-size: 0.8em;}
	button.search{ height:40px;margin-top: 5px;}
	.title { font-size:1.4em;}
	.title1 { font-size:1.2em;}
	.titleh2 { font-size:1.8em;}
	.mfont { font-size:0.8em; vertical-align:top;}
	.mfont4 { font-size:1em; vertical-align:top;}
	.mfont1 { font-size:0.7em; vertical-align:top;}
	.mfont3 { font-size:0.9em; vertical-align:top;}
	.mfont2 { font-size: 0.6em; vertical-align: top;}
	.lscroll { padding-left:2px; background-color: #F8F8F8; width: 350px; height: 460px; overflow-y: scroll; /* Add the ability to scroll */}
	.stylea { text-decoration:none;font-size:12px; color:#996600;}
	.stylea1 { font-size:15px; text-decoration:none; color:#996600;}
	div.ex1 { font-size:0.8em; width: 120%;}
	.fface1 {font-size: 0.8em;}
}