body{ font-size: 14px}
.wrapper{  padding: 20px; }
#main{margin:10px auto;}
 #main .title{font-size:25px;text-align:center;color:green;text-decoration:underline;margin-bottom:10px}
.wrapper{
   
   width:40%;margin:10px auto;
}		
  
#main .logout a{box-shadow:inset 0px 1px 0px 0px #cf866c;
	background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
	background-color:#d0451b;
	border-radius:3px;
	border:1px solid #942911;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:13px;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #854629;
	margin-bottom:10px}
#main .logout a:hover{background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
	background-color:#bc3315;}
	
/* Section */
.section {
  clear: both;
  margin: 0px;
  padding: 0px;
  width:80%;
  margin:70px auto;
}
/* Column */
.col {min-height:120px;
  background: #eee;
  display: block;
  float:left;
  margin: 1% 0 1% 1.6%;
  background: linear-gradient(to bottom right, #fbfbfb, #f4f2ea);
  text-align:center;
  padding:30px 0px 30px 0px;border: 1px solid rgb(209,213,219);
  border-radius: .5rem;
  box-sizing: border-box;box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);font-size: 18px;
  font-weight: 600;
}
.col:first-child { margin-left: 0 !important; }

/* Row */
.row:before,
.row:after { content:""; display:table; }
.row:after { clear:both;}
.row { zoom:1; /* For IE 6/7 */ }

/* Grid */
.grid_1_of_5{ width: 18.72% }
.grid_2_of_5{ width: 39.04% }
.grid_3_of_5{ width: 59.36% }
.grid_4_of_5{ width: 79.68% }
.grid_5_of_5{ width: 100% }

.section .r1{color:#639e60}
.section .r2{color:#009ae9}
.section .r3{color:#d42a2a}
.section .r4{color:#9d32ef}
.section .r5{color:#14d001}



/* Full Width below 768 pixels */
@media only screen and (max-width: 768px) {
  .col {  margin: 1% 0 1% 0%; }
  [class*='grid_'] { width: 100%; }
}



#footer {
   position:absolute;
   bottom:0;
   width:100%;
height:20px;color:#0e9600;font-size: 14px}