/*Reset*/
:root{
--quotation_m-size:12px;
--quotation-size:16px;

}
  
  html {
    font-size: 8px;
  }

/*CSS styling*/

html {background-color: #CCC;font-size: 100%;}
img {max-width: 100% ;width: auto ;height: auto ;}
figure {display: inline-block; border: 1px maroon; margin: 20px; }
figure img {vertical-align: top;}
figure figcaption { border: 1px dotted maroon; text-align: center;}
figure figcaption a{ font-size:8px;}


h1{	font-size:12px;text-align:center}
h2 {	font-size:10px;font-weight:bold;}
p1 {	font-size:10px;font-weight:bold;}

p{	text-align:justify; font-size:8px;}
ol{font-size: 8px;padding-left: 12px;}
ul{font-size: 8px;padding-left: 12px;}
label{display:block; width:auto;font-size:8px}

table{border-style:inherit; width:100%; border-color:rebeccapurple}
th{background-color:rgba(255, 255, 128, .5); text-align: left; width:30%;font-size:10px;font-weight:bold;}
tr{font-size:8px;}

textarea    {width:98%; height:150px;}

nav{width:70px; float:left; background-color:#ccc; height:100%;}
nav a {font-size: 8px;}
nav a:link{color:#800000;text-decoration:none}
nav a:visited{color:#800000;text-decoration:none}
nav a:active{color:#800000;text-decoration:none;}
nav a:hover{color:#FF0000;text-decoration:none;font-weight:bolder}
nav a:focus{color:#800000;text-decoration:none;}

nav ul{display: block;padding:0;}

nav ul li {position: relative;text-decoration: none;list-style: none;border-bottom: groove;display: flex; flex-direction: row;}
nav ul li ul{position: absolute;display:none;z-index: 1;border-radius: 0 4px 4px 0;margin-left: 65px;width: 40px;background-color:#ccc;}
nav ul li:hover ul{display:block;width:70px;}


a:link{color:#800000;text-decoration:none}
a:visited{	color:#800000;text-decoration:none}
a:active{color:#800000;text-decoration:none;}
a:hover{color:#ff0000;text-decoration:none;font-weight:bolder;}
a:focus{color:#800000;text-decoration:none;}

ol.inline{list-style-position:inside;}
.p1 {font-size: 12px;font-weight: bold;}
.smallfont{	font-size:7px;color:maroon;}
.heading{width:40%;text-decoration: bold;font-size:14px;}

.quotation{	font-size:var(--quotation_m-size);font-style:italic;}

.quotationbold{	font-size:12px;font-style:italic;font-weight:bold}

.inputtime{font-size:8px;}

.button{width:1%;}

.sidebartb1{display:block;}
.sidebartb1 td{border-bottom-style:groove;display:block; width:65px;}
.sidebartb2{float:left;display:block;}
.sidebartb2 td{border-bottom-style:groove;display:block;display:block;width:65px;}


.topright {position: absolute; top: 0px; right: 8px; font-size: 8px;}

.login-form{display:block; margin:10px;}

.center{text-align: center;}

.imgcenter { display: block; margin-left: auto; margin-right: auto;}

.feedback-form label {font-weight: bold; display: block; width: 35%;}
.youtube {width:95%; height:95%;}

.table_design2 td {border-style: solid;border-color:rgb(000, 000, 0); vertical-align: text-top}
.table_design2 th {border-style: solid;border-color:rgb(000, 000, 0)}
.readmore {background-color: tan}
.readmore:hover{background-color: aqua}

#container {margin:0 0 0 70px;background-color: #FFF;}
#yellowbox {background-color:rgba(204, 192, 150, 0.829); font-size: 40%}

#login-form label {font-weight: bold; display: block; width: 35%; float: left;}

#login-form h2 {margin:0 5%;}
#posts{background-color: #CCC;}
#posts label{width:80%;}

#logo{min-width: 100%;height: 50px;background-image: url("Images/logoMobilev2.jpg"); background-repeat: no-repeat;}
#banner{ padding-top: 8px;background-color: #FFF;}


/*---------------------------------------------------------code for Tablet-------------------------------------*/

@media only screen and (min-width:800px){
  
    h1{	font-size:20px;text-align:center}
    h2 {	font-size:18px;font-weight:bold;}
    p{ font-size: 16px;}
        
    tr{font-size:16px;}
    label{font-size:16px;}
    ol{font-size: 16px;padding-left: 20px;}
    ul{font-size: 16px;padding-left: 20px;}
    
        
    figure figcaption a { font-size: 16px;}
    textarea    {width:60%; height:400px;}


    nav {width:130px; }
    nav a {font-size: 16px;}  
    nav ul li ul{margin-left: 130px;width: 70px;background-color:#ccc;}
    nav ul li:hover ul{display:block;width:80px;}
    
    


    .smallfont{	font-size:12px;}
    
    .quotation{	font-size:var(--quotation-size);font-style:italic;}
    
    .quotationbold{	font-size:16px;font-style:italic;font-weight:bold}
    
    .inputtime{font-size:12px;}
    .heading{width:100%;font-size:18px;}

	.topright {font-size: 12px;}
    .youtube {width:560px; height:315px;}


    #container {margin:0 0 0 130px;}

    #posts label{width:20%;}
	#logo{min-width: 100%;height:80px; background-image: url("Images/Logofullv2.jpg"); }
}