@charset "UTF-8";
/* CSS Document */

a {
	color: #172e21;
}
a:hover {
	color:#008000;
	text-shadow: 0px 0px #cbceca;
}
	h1 {
		font-size: 28px;
		}
	h2 {
		font-size: 24px;
	}
	h3 {
		font-size: 20px;
	}
hr {
	margin-left: 5px;
	margin-right: 5px;
	background-image: linear-gradient(to right, rgba(182, 204, 139, 0), rgba(182, 204, 139, 0.75), rgba(182, 204, 139, 0));
  border: 0 none;
  height: 1px;
}
html {
	height:100%;
}
body {
	background-color:#b6cc8b;
  font-family: Verdana;
  color: #172e21;
  padding:0;
  margin: 0;
  height: 100%;
}
#container {
	position: relative;
	margin: 0px auto;
	width: 100%;
  min-height: 100%;
  height:auto !important;
  height:100%;
	background-color: #f8faed;
	overflow: hidden;
	border: 0px solid #172e21;
}
#topper {
	float: left;
  width:100%;
  height: auto;
 	text-align:center;
  background-color:#b6cc8b;

}
.main-content {
	position: relative;
		top: 0px;
		left: 0px;
  float: left;
	width: 95%;
  min-height: 100%;
  height:auto !important;
  height:100%;
  padding-left: 10px;
  margin-bottom: 50px;
}
.foot {
	position: absolute;
  	bottom: 0px !important;
	padding-bottom: 3px;
  width:100%;
 	text-align:center;
  min-height:15px;
  font-size: small;
  background-color:#b6cc8b;
}
.edge-top {
	float:left;
	width: 100%;
	height: 15px;
	background: linear-gradient(#b6cc8b 10%, #f8faed 90%);
}
.edge-bottom {
	width: 100%;
	height: 20px;
	background: linear-gradient(#f8faed 10%, #b6cc8b 90%);

}
.flower1 {
	position: absolute;
		top: 10px;
		left: 10px;
	width: 100px;
	height: 105px;
	background-image: url(../pics/index/flower.png);
	background-repeat: no-repeat;
	background-position: top right;
	z-index:2;
}
.flower2 {
	position: absolute;
		top: 10px;
		right: 10px;
	width: 100px;
	height: 105px;
	background-image: url(../pics/index/flower.png);
	background-repeat: no-repeat;
	background-position: top right;
	z-index:2;
}
/* new menu */
#menu-bar {
  width: 100%;
  margin: 0px 0px 0px 0px;
  padding: 5px 4px 4px 5px;
  height: 30px;
  line-height: 100%;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  box-shadow: 1px 1px 2px #B6CC8B;
  -webkit-box-shadow: 1px 1px 2px #B6CC8B;
  -moz-box-shadow: 1px 1px 2px #B6CC8B;
  background: #F8FAED;
 
  border: solid 0px #172E21;
  position:relative;
  z-index:999;
}
#menu-bar li {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  float: left;
  position: relative;
  list-style: none;
}
#menu-bar a {
  font-weight: bold;
  font-family: verdana;
  font-style: normal;
  font-size: small;
  color: #172E21;
  text-decoration: none;
  display: block;
  padding: 6px 8px 6px 8px;
  margin: 0;
  margin-bottom: 6px;
  margin-right: 6px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  text-shadow: 1px 1px 1px #C4C4C4;
}
#menu-bar li ul li a {
  margin: 0;
}
#menu-bar .active a, #menu-bar li:hover > a {
  background: #F8FAED;
  background: linear-gradient(top,  #B6CC8B,  #F8FAED);
  background: -ms-linear-gradient(top,  #B6CC8B,  #F8FAED);
  background: -webkit-gradient(linear, left top, left bottom, from(#B6CC8B), to(#F8FAED));
  background: -moz-linear-gradient(top,  #B6CC8B,  #F8FAED);
  color: #172E21;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
  background: none;
  border: none;
  color: #666;
  -box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}
#menu-bar ul a:hover {
  background: #F8FAED !important;
  background: linear-gradient(top,  #F8FAED,  #B6CC8B) !important;
  background: -ms-linear-gradient(top,  #F8FAED,  #B6CC8B) !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#F8FAED), to(#B6CC8B)) !important;
  background: -moz-linear-gradient(top,  #F8FAED,  #B6CC8B) !important;
  color: #172e21 !important;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  text-shadow: 1px 1px 3px #FFFFFF;
}
#menu-bar li:hover > ul {
  display: block;
}
#menu-bar ul {
  background: #F8FAED;
  
  display: none;
  margin: 0;
  padding: 0;
  width: 100% auto;
  position: absolute;
  top: 30px;
  left: 0;
  border: solid 1px #B4B4B4;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-box-shadow: 2px 2px 3px #172E21;
  -moz-box-shadow: 2px 2px 3px #172E21;
  box-shadow: 2px 2px 3px #172E21;
}
#menu-bar ul li {
  float: none;
  margin: 0;
  padding: 0;
}
#menu-bar ul a {
  padding:10px 10px 10px 15px;
  color:#172E21 !important;
  font-size:12px;
  font-style:normal;
  font-family:arial;
  font-weight: normal;
  text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:first-child > a {
  border-top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  border-top-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topright: 10px;
}
#menu-bar ul li:last-child > a {
  border-bottom-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-bottom-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomright: 10px;
}
#menu-bar:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#menu-bar {
  display: inline-block;
}
  html[xmlns] #menu-bar {
  display: block;
}
* html #menu-bar {
  height: 1%;
}
/* end, new menu*/
.profile-navi3 {
	position: absolute;
    top: -34px;
		left: 140px;
	width: 70px;
	height: 25px;
	-moz-box-shadow:inset 0px 8px 7px -2px #f8faed;
	-webkit-box-shadow:inset 0px 8px 7px -2px #f8faed;
	box-shadow:inset 0px 8px 7px -2px #f8faed;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #b6cc8b), color-stop(1, #f8faed));
	background:-moz-linear-gradient(top, #b6cc8b 5%, #f8faed 100%);
	background:-webkit-linear-gradient(top, #b6cc8b 5%, #f8faed 100%);
	background:-o-linear-gradient(top, #b6cc8b 5%, #f8faed 100%);
	background:-ms-linear-gradient(top, #b6cc8b 5%, #f8faed 100%);
	background:linear-gradient(to bottom, #b6cc8b 5%, #f8faed 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#68a54b', endColorstr='#74ad5a',GradientType=0);
	background-color:#f8faed;
	-moz-border-radius:5px 5px 0 0;
	-webkit-border-radius:5px 5px 0 0;
	border-radius: 5px 5px 0 0;
	border-style:solid;
	border-width: 1px 1px 0px 1px;
	border-color: #b6cc8b;
	display:inline-block;
	cursor:pointer;
	font-family:Verdana;
	font-size:small;
	padding:4px 4px;
	text-decoration:none;
	text-shadow:0px 1px 0px grey;
	z-index:9998;
}
.profile-navi3:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f8faed), color-stop(1, #b6cc8b));
	background:-moz-linear-gradient(top, #f8faed 5%, #b6cc8b 100%);
	background:-webkit-linear-gradient(top, #f8faed 5%, #b6cc8b 100%);
	background:-o-linear-gradient(top, #f8faed 5%, #b6cc8b 100%);
	background:-ms-linear-gradient(top, #f8faed 5%, #b6cc8b 100%);
	background:linear-gradient(to bottom, #f8faed 5%, #b6cc8b 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#74ad5a', endColorstr='#68a54b',GradientType=0);
	background-color:#f8faed;
}
.check-css {
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  padding: 10px 20px;
  border: 1px solid rgba(23,46,33,1);
  -webkit-border-radius: 3px;
  border-radius: 3px;
  color: rgba(23,46,33,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #f8faed;
  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  box-shadow: 5px 5px 8px 2px rgba(0,0,0,0.4) , 2px 2px 2px 0 rgba(0,0,0,0.4) ;
  -webkit-transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
}
.check-css:hover {
  -webkit-box-shadow: 5px 5px 8px 2px rgba(0,0,0,0.4) , 2px 2px 2px 0 rgba(255,255,0,1) ;
	box-shadow: 5px 5px 8px 0 rgba(0,0,0,0.4) , 4px 4px 6px 1px rgba(255,255,0,1) ;
	background: #b6cc8b;
}

.check-css:active {
  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3) , 4px 4px 6px 1px rgba(0,0,0,0.4) ;
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
}
.check-css2 {
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  padding: 10px 20px;
  border: 1px solid rgba(23,46,33,1);
  -webkit-border-radius: 3px;
  border-radius: 3px;
  color: rgba(23,46,33,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #f8faed;
  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  box-shadow: 5px 5px 8px 2px rgba(0,0,0,0.4) , 2px 2px 2px 0 rgba(0,0,0,0.4) ;
  -webkit-transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
}
.check-css2:hover {
  -webkit-box-shadow: 5px 5px 8px 2px rgba(0,0,0,0.4) , 2px 2px 2px 0 rgba(255,255,0,1) ;
	box-shadow: 5px 5px 8px 0 rgba(0,0,0,0.4) , 4px 4px 6px 1px rgba(255,255,0,1) ;
	background: #FF8080;
}

.check-css2:active {
  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3) , 4px 4px 6px 1px rgba(0,0,0,0.4) ;
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
}
.input_user {
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  min-width: 200px;
  padding: 10px 20px;
  border: 1px solid #172e21;
  -webkit-border-radius: 3px 20px;
  border-radius: 3px;
  color: rgba(173,182,186,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: rgba(248,250,237,1);
  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) inset;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.66) ;
  -webkit-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  text-shadow: 0 0 9px rgba(20,255,20,0.7) ;
  font-size: medium;
}

.input_user:hover {
  border: 1px solid yellow;
  color: #172e21;
  background: rgba(236,245,240,1);
  -webkit-box-shadow: 2px 2px 2px 0 rgba(145,145,13,1) ;
  box-shadow: 2px 2px 2px 0 rgba(145,145,13,1) inset;
}
.input_user:focus {
  width: 220px;
 	border: 1px solid green;
  background: rgba(236,245,240,1);
  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) inset;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.66) ;
  color: #172e21;
}
.input_user1 {
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  min-width: 80%;
  padding: 10px 20px;
  border: 1px solid #172e21;
  -webkit-border-radius: 3px 20px;
  border-radius: 3px;
  color: rgba(173,182,186,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: rgba(248,250,237,1);
  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) inset;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.66) ;
  -webkit-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  text-shadow: 0 0 9px rgba(20,255,20,0.7) ;
  font-size: medium;
}

.input_user1:hover {
  border: 1px solid yellow;
  color: #172e21;
  background: rgba(236,245,240,1);
  -webkit-box-shadow: 2px 2px 2px 0 rgba(145,145,13,1) ;
  box-shadow: 2px 2px 2px 0 rgba(145,145,13,1) inset;
}
.input_user1:focus {
  width: 90%;
 	border: 1px solid green;
  background: rgba(236,245,240,1);
  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) inset;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.66) ;
  color: #172e21;
}
@media only screen and (min-width: 500px) and (max-width: 800px) {
  /* For tablets: */
	h1 {
		font-size: 24px;
		}
	h2 {
		font-size: 20px;
	}
	h3 {
		font-size: 16px;
	}
  h1#welcome {
  	font-size:medium;
  }
  #herbs {
  	font-size:small;
  }
  .flower1 {
			top: 10px;
			left: 7.5px;
		width: 50px;
		height: 53px;
		background-image: url(../pics/index/flower50px.png);
	}
  .flower2 {
			top: 10px;
			right: 7.5px;
		width: 50px;
		height: 53px;
		background-image: url(../pics/index/flower50px.png);
	}
}
@media only screen and (max-width:499px) {
  /* For mobile phones: */
	h1 {
		font-size: 20px;
		}
	h2 {
		font-size: 16px;
	}
	h3 {
		font-size: 14px;
	}
  h1#welcome {
  	font-size:medium;
  }
  #herbs {
  	font-size:small;
  }
  .flower1 {
		background-image: none;
	}
  .flower2 {
		background-image: none;
	}
	.foot2 {
		display:none;
	} 
}