@charset "UTF-8";
/* CSS doc for tvpro staff 072620 */

/*******info from w3 styles  start******/

* {
box-sizing: border-box;
}

/* fififi light gray */
body {
font-family: Arial;
padding: 5px;
background: white;
margin-left: 15px;
}


.viewpdf {
padding: 10px; 
border: 5px solid black; 
margin: 10px;      
}


/* HEADER LOGO */

.toplogo {
background-color:DodgerBlue;
padding: 15px; 
border: 10px solid black; 
margin:8px 2px ;    
text-align: center;
border-radius:20px; 
font-size: 30px;
font-family: "Georgia",  serif;
color: white;   
}

.toplogoline2 {   
text-align: center;
font-size: 16px;
font-style: italic;
font-family: "Georgia",  serif;
color: white;
}

.toplogo hr{
background: white;
width: 75%;
}

/* END HEADER LOGO */

.solid {
border-style: solid;
border-radius:20px;
padding: 5px;
border-color: black;
}

p {
text-align: left;
margin-left: 10px;
}

.team{
padding: 5px;
background-color: #2aeb7e;
color: black;
border-radius:20px;  
}



.mission2 {
padding: 5px;
background-color: #2aeb7e;
color: black;
border-radius:20px;   
}
.mission2 p {
text-align: left;
margin-left: 10px;
}

.mission {
padding: 5px;
background-color:DodgerBlue;
color: white;
border-radius:20px;   
}

.mission jd {
color: blue;
margin-left: 10px;
text-align: left;
font-size: 20px;
text-decoration: underline;
font-style: oblique;
}

.mission p {
text-align: left;
margin-left: 10px;
}

.header {
padding: 5px;
text-align: center;
background-color:DodgerBlue;
color: white;
border-radius: 25px;  
}

.header h1 {
font-size: 25px;
}


/* social medial box */
.socialmedia{
padding: 5px;
text-align: center;
background-color:DodgerBlue;
color: white;
border-radius:20px;   
}

.socialmedia h1 {
color: white;
text-align: center;
font-size: 15px;
}

/* Footer */
.footer {
padding: 5px;
text-align: center;
background: black;
color: white; 
font-size: 15px;
border-radius:20px; 
}


/* Create two unequal columns that floats next to each other */
/* ONLY USE 1 COLUMN */
/* Left column */
.leftcolumn {   
float: left;
width: 100%;
}


/* Fake image */
.fakeimg {
background-color: #aaa;
width: 90%;
padding: 10px;
}


img {
max-width: 100%;
height: auto;
background-size: cover;
background-position: center;
border-radius: 20%;
}


/* Add a card effect for articles */
.card {
  background-color: whitesmoke;
  padding: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}



/******* CSS STYLE *******/


main{
margin-left: 15px;
}

hr{
border: none; 
height: 5px;
background-color:DodgerBlue;
width: 96%;
}

h2 {
color: white;
font-size: 30px;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";	
}

h3 {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
margin-left: 10px;
color: black;
font-size: 20px;
}

h4 {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
margin-left: 10px;
color: black;
font-size: 20px;
}


h5 {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
margin-left: 10px;
color: black;
font-size: 16px;
}


.greenbuttonmed {
display:block;
width:125px;
margin:5px;
padding:5px;
text-align:center;
color: white;
background: green;
font-size: 15px;
border:2px solid black;
border-radius:20px;
} 

.greenbutton {
display:block;
width:75px;
margin:5px;
padding:5px;
text-align:center;
color: white;
background: green;
font-size: 15px;
border:2px solid black;
border-radius:20px;
} 



.button {
border: none;
padding: 5px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
border-radius: 15px;
}

.button4 {
background-color: royalblue;
color: white;
} /* blue */

.button3 {
background-color: white;
color: black;
} /* white */

/*******table code **************start********/

table {
border-collapse: collapse;
width: 100%;
}

th, td {
text-align: left;
padding: 6px;
border-bottom: 2px solid #ddd;
}
    
tr:nth-child(even) {background-color: #C8C8C8;}    

tr:hover {background-color:#dcdcdc;}
    
th {
background-color: black;
color: white;
border-radius:10px; 
}


/*******table code **************end*******/

/******* MEDIA MEDIA MEDIA ******/

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {   
width: 100%;
padding: 0;
}
}

@media screen and (max-width: 400px) {
.toplogo {
font-size: 16px;
}
.toplogoline2 {   
font-size: 14px;
}
}