{
    box-sizing: border-box;
}

/* Style the body */
body {
    font-family: Arial;
    margin: 0;
    
}


/* Header/logo Title */
.header {
    padding: 2px;
    text-align: center;
    background: #1abc9c;
    color: white;
}

/* Style the top navigation bar */
.navbar {
    display: flex;
    background-color: orange;
    
}

/* Style the navigation bar links */
.navbar a {
    color: white;
    padding: 14px 20px;
    text-decoration: none;
    text-align: left;
    font-size:14px;
}

/* Change color on hover */
.navbar a:hover {
    background-color: #ddd;
    color: black;
}

/* Column container */
.row {  
    display: flex;
    flex-wrap: wrap;
    border:1px solid yellow;
    
}

.row1 {  
    display: flex;
    flex-wrap: wrap;
}

.rowk {  
    display: flex;
    flex-wrap: wrap;
    border:1px solid blue;
    
    
}


/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
    flex: 55%;
    background-color: ;
    padding: 5px;
    border:4px solid blue;
}


.sidea {
    flex: 25%;
    background-color: YELLOW;
    padding: 2px;
}





.sided {
    flex: 50%;
    background-color:;
    padding: 2px;
    border:4px solid red;
}


.course {
    flex: 95%;
    background-color: ;
    padding: 5px;
    
}


.maina {
    flex: 20%;
    background-color: orange;
    padding: 5px;
}

.mainb {
    flex: 30%;
    background-color: white;
    padding: 2px;
    margin-left:20px;
}

.side1 {
    flex: 45%;
    background-color: YELLOW;
    
}


/* Main column */
.main {
    flex: 45%;
    background-color: ;
    padding: 15px;
    border:4px solid black;
}
.maind {
    flex: 35%;
    background-color: ;
    padding: 5px;
    border:4px solid black;
}


.main1 {
    flex: 55%;
    background-color: yellow;
   
}

/* Fake image, just for this example */






/* Footer */
.footer {
    padding: 5px;
    text-align: left;
    background: #ddd;
    font-size:12px;
    font-family: Arial;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media (max-width: 700px) {
    .row, .navbar {   
        flex-direction: column;
    }
}

.responsive {
    max-width: 100%;
    height: 160px;
   
}

.responsivea {
    max-width: 100%;
    height: 360px;
   
}




.responsive1 {
    max-width: 100%;
    height: 240px;
}

div.box-by-side {
  float:left;
  width:110px;
  display: block;
  color:red;
  height:65px;
  margin-left:5px;
  border:1px solid red;
    border-radius: 26px;
  cursor: pointer;
    line-height:15px;
   
  text-align: center;
  transition-property: background, border-radius;
  transition-duration: 1s;
  transition-timing-function: linear;
  font-family:arial;
  
  
}

 a:hover div.box-by-side {
  display: block;
  background-color: yellow;
  color: #000;
  background: blue;
  border-radius: 50%;
}
   
   a  div.box-by-side {
       display: block;
  background-color: red;
  color: #FFF;
}
   
.responsive3 {
    max-width: 100%;
    height: 80px;
    margin-top:12px;
}


.mainbox-by-side {
  float:left;
  width:200px;
  
  color:red;
  height:70px;
  margin-left:12px;
  border:1px solid blue;
  margin-top:10px;
}

	h3 { 
	 position: relative; 
	top: -6px;
	font-size:120%;
	font-weight:bolder;
	
	
}
 
 
 

.color-blink-text {

    -webkit-animation: color-blink-text 1s step-start infinite;
    animation: color-blink-text 1s step-start infinite

}



@-webkit-keyframes color-blink-text {

    0% { color:yellow }
    25% { color:red }
    100% { color:blue }

}
@keyframes color-blink-text {

    0% { color:yellow }
    25% { color:red }
    100% { color:blue }

}


p.two {
    border-style:;
    border-color:yellow;
    background:red;
    color:white;
    text-align: center;
    font-family:arial;
    font-size: 16pt;
    line-height:10px;
    font-weight:bold; 
    margin-top:-10px;
}

.newspaper {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 5px; /* Chrome, Safari, Opera */
    -moz-column-gap: 5px; /* Firefox */
    column-gap: 5px;
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
    -webkit-column-rule-width: 2px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 2px; /* Firefox */
    column-rule-width: 2px;
    -webkit-column-rule-color: yellow; /* Chrome, Safari, Opera */
    -moz-column-rule-color: yellow; /* Firefox */
    column-rule-color: yellow;
     -webkit-margin-top:-10px; /* Chrome, Safari, Opera */
    -moz-margin-top:-10px; /* Firefox */
    margin-top:-10px;
}

.resultbox-by-side {
  float:left;
  
  
  color:red;
  height:560px;
  margin-left:2px;
  
}


table {
   width:100%;
	color:blue;
	font-weight:;

}
table, th, td {
    border: 1px solid blue;
    border-collapse: collapse;
}
th{
    padding: 5px;
    text-align: center;
}

td {
    padding: 5px;
    text-align: left;
	
}


td:hover {
          background-color:skyblue;
        }
        
       
level th{background:white;}  	


table#t01 tr:nth-child(even) {
    background-color:#ccff99;
}
table#t01 tr:nth-child(odd) {
   background-color:#fff;
}
table#t01 th	{
    background-color: green;
    color: white;
}

.head {
   color:red;
}