* {
	box-sizing:border-box;
}

body {
	font-family:Arial;
	padding:10px;
	background-color: white;
}

table { width: 560px; } table, td, th { padding: 10px; }

/* Header/Blog Title */
.header {
	font-family: cursive;
	font-size: large;
	color: black;
	padding:5px;
	text-align:center;
	background-image: url(/prayfirst/pics/CloudsStrip.jpg);
	background-repeat: no-repeat;
	height: 150px;
}

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

/* Style the top navigation bar */
.topnav {
	overflow:hidden;
	background-color:#335e99;
	border-radius:6px;
}

/* Style the topnav links */
.topnav a {
	float:left;
	display:block;
	color:#f2f2f2;
	text-align:center;
	padding:7px 8px;
	text-decoration:none;
}

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

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

/* Right column */
.rightcolumn {
	float:left;
	width:25%;
	background-color:#f1f1f1;
	padding-left:20px;
}

.left {
  font-weight: bold; 
  padding:2px;
  float:left;
  width:30%; /* The width is 20%, by default */
}

.left_v {
  font-weight: bold; 
  padding:10px;
  float:left;
  width:20%; /* The width is 20%, by default */
}

.main {
  font-size: small;
  padding:2px;
  float:left;
  width:70%; /* The width is 60%, by default */
}

.main_v {
  font-size: small;
  padding:10px;
  float:left;
  width:45%; /* The width is 60%, by default */
}

.central {
  background-color: #f1f1f1;
  width: auto;
  margin: auto;
  padding: 0px;
  text-align: center;
}

.reference {
	font-family: cursive;
	font-size: large;
	color: black;
	padding:5px;
	text-align:center;
	height: 150px;
}

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

/* Add a card effect for articles */
.card {
	background-color:#fff;
	padding:10px;
	margin-top:0;
}

.summary {
	background-color:#fffaf2;
	clear:both;
	margin:20px 20px 20px 10px;
	width:160px;
	float:left;
}

.summary p {
	font:italic .8em/1.5 georgia;
	text-align:center;
	padding:5px;
}

.sidebar {
	font-size:small;
}

.listing {
	margin-left:4em;
}

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

/* Footer */
.footer {
	padding:3px;
	text-align:center;
	background:#ddd;
	margin-top:10px;
}

/* 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, .left, .main {
		width:100%;
		padding:0;
	}
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
	.topnav a {
		float:none;
		width:100%;
	}
}