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; }

/*category strip*/ .cat { border-radius: 5px; width:100%; height:auto; margin: auto; padding: 10px 15px; box-sizing: border-box; border-bottom: 2px solid #3d3d3f; 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); } @media all and ( min-width: 720px ) { .cat { border-radius: 5px; width:100%; height:auto; margin: auto; padding: 10px 15px; box-sizing: border-box; border-bottom: 2px solid #3d3d3f; 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); } }

.cat-p{ color: black; font-size:75%; text-align:left;}

/* 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; } /* person text box and dependecies */

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

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

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

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

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

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

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

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

@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 text box and dependecies */

.place-txt-box { width: 100%; padding: 10px 15px; box-sizing: border-box; background-color: #b1d3e1; 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 ) { .place-txt-box { width: 45%; padding: 10px 15px; box-sizing: border-box; background-color: #b1d3e1; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin: auto} }

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

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

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

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

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

.place-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 }