Template:Person box/styles.css

/* person box container for desktop */
@media all and ( min-width: 720px ) {
  .person_box {
    width: 45%;
    margin: 2.5%;
    border-radius: 15px;
    box-sizing: border-box;
    overflow: hidden;
      box-shadow: -4px 4px 8px 0px rgba(0, 0, 0, 0.2);

  }
}
/* person box container for mobile */
@media all and ( max-width: 720px ) {
  .person_box {
    width: 95%;
    margin: 2.5%;
    border-radius: 15px;
    box-sizing: border-box;
    overflow: hidden;
      box-shadow: -4px 4px 8px 0px rgba(0, 0, 0, 0.2);

  }
}
html.skin-citizen-dark .person_box {
	 box-shadow: -4px 4px 8px 0px rgba(225, 225, 225, 0.1);

}
/* person box */



.person_box_title {
  height: 70px;
  background: #98b946;
  padding: 10px 15px;

}

html.skin-citizen-dark .person_box_title {
  background: #285e3b;

}

.person_box_content {
  height: 450px;
  background: #ecf7f0;
  padding: 10px 15px;
  border-top: 4px solid #d3e1b1;

}

html.skin-citizen-dark .person_box_content {
  background: #43a065;
  border-top: 4px solid #378353;

}

.person_box_category {
  height: 50px;
  background: #f6f5f3;
  padding: 10px 15px;
  border-top: 3px solid #3d3d3f;
}

html.skin-citizen-dark .person_box_category {
	background: #161a24;
  border-top: 3px solid #f6f5f3;
}


/* Text & Images */

.person_box_h2 {
  color: white;
  font-size:150%;
  text-align:left;
  font-weight: bold;
  line-height: 25px;
}

.person_box_h2 a {
  color: white;
  text-decoration: none;
}

.person_box_p {
  color: black;
  font-size:100%;
  text-align:left;
}

html.skin-citizen-dark .person_box_p {
  color: white;
}

.person_box_p a {
  color: black;
  text-decoration: none;
}

html.skin-citizen-dark .person_box_p a{
  color: white;
}

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

html.skin-citizen-dark .person_box_c {
  color: white;
}

.person_box_c a {
  color: black;
  text-decoration: none;
}

html.skin-citizen-dark .person_box_c a{
  color: white;
}

.person_box_category_p {
  color: #3d3d3f;
  font-size:75%;
  text-align:left; }
  
html.skin-citizen-dark .person_box_category_p {
  color: white;
}

.person_box_catgeory_p a {
  color: #3d3d3f;
  text-decoration: none;
}
html.skin-citizen-dark .person_box_category_p a {
  color: white;
}

a.new {
 color: #3d3d3f;
  text-decoration: none;	
}

html.skin-citizen-dark a.new{
  color: white;
}


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

img {
  max-width:100%;
  height: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;
}