Template:Txtbox/styling.css

/*search*/
.mw-ui-input {
	background-color: white;
}
/* acontainer to make two colums for desktop */
@media all and ( min-width: 720px ) {
  .acontainer { 
   width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: auto;}
}

/*container for images*/
@media all and ( min-width: 720px ) {
.container {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
  margin: auto;}
}

.container {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
  margin: auto;
}

/*text box images*/
@media all and ( min-width: 720px ) {
img {
  max-width:45%;
  height:auto;}
}

img {
  max-width:100%;
  height:auto;
}

/* main black text box and dependecies for headers (the shadow is inversed as the container goes above) */

.main-txt-box {
  width: 100%;
  padding: 10px 15px; 
  box-sizing: border-box;
  background-color: #3d3d3f;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
  margin: auto
}

.main-container {
  width: 100%;
  box-shadow: 0 -4px 8px 0 rgba(0, 0, 0, 0.2), 0 -6px 20px 0 rgba(0, 0, 0, 0.19);
  margin: auto
}

.main-txt-h1 {
  color: white;
  font-size:200%;
  text-align:center;
}

.main-txt-p {
  color: white;
  font-size:150%;
  text-align:center;
}

.main-txt-p-medium {
  color: white;
  font-size:100%;
  text-align:center;
}

.main-txt-p-small {
  color: white;
  font-size:50%;
  text-align:center;
}

/* Unknown Green */

@media all and ( min-width: 720px ) {
	.greenp {
  color: #3d3d3f;
  font-size:130%;
  text-align:left;}
}

.smallgreenh2 {
  color: #7dce94;
  font-size:130%;
  text-align:center;
}

.smallgreenp {
  color: #3d3d3f;
  font-size:100%;
  text-align:left;
}

/* gray text box and dependecies */

.gray-txt-box {
  width: 100%;
  padding: 10px 15px; 
  box-sizing: border-box;
  background-color: #f6f5f3;
  box-shadow: 0 -4px 8px 0 rgba(0, 0, 0, 0.2), 0 -6px 20px 0 rgba(0, 0, 0, 0.19);
  margin: auto
}

@media all and ( min-width: 720px ) {
 .gray-txt-box {
  width: 45%;
  padding: 10px 15px; 
  box-sizing: border-box;
  background-color: #f6f5f3;
  box-shadow: 0 -4px 8px 0 rgba(0, 0, 0, 0.2), 0 -6px 20px 0 rgba(0, 0, 0, 0.19);
  margin: auto}
}

.gray-txt-h2 {
  color: black;
  font-size:150%;
  text-align:left;
}

.gray-txt-h2 a {
  color: black;
  text-decoration: none;
}

.gray-txt-p {
  color: black;
  font-size:100%;
  text-align:left;
}

.gray-txt-p a {
  color: black;
  text-decoration: none;
}

.gray-txt-c {
  color: black;
  font-size:75%;
  text-align:left;
}

.gray-txt-c a {
  color: black;
  text-decoration: none;
}


/* blue full size text box and dependecies */

.blue-full-txt-box {
  width: 100%;
  padding: 10px 15px; 
  box-sizing: border-box;
  background-color: #7db7ce;
  box-shadow: 0 -4px 8px 0 rgba(0, 0, 0, 0.2), 0 -6px 20px 0 rgba(0, 0, 0, 0.19);
  margin: auto
}
/* green full size text box and dependecies */

.green-full-txt-box {
  width: 100%;
  padding: 10px 15px; 
  box-sizing: border-box;
  background-color: #7dce94;
  box-shadow: 0 -4px 8px 0 rgba(0, 0, 0, 0.2), 0 -6px 20px 0 rgba(0, 0, 0, 0.19);
  margin: auto
}

/* gray full size text box and dependecies */

.gray-full-txt-box {
  width: 100%;
  padding: 10px 15px; 
  box-sizing: border-box;
  background-color: #f6f5f3;
  box-shadow: 0 -4px 8px 0 rgba(0, 0, 0, 0.2), 0 -6px 20px 0 rgba(0, 0, 0, 0.19);
  margin: auto
}