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

body{
	font-family:Century Gothic;
}
table{

}
p{
	padding:13px;
	margin:0;
	text-align:center;
}
td{
	border:1px solid #e1defa;
}
.next_period_day{
	background:url("images/period.png") no-repeat scroll -3px 0px rgba(0, 0, 0, 0);
	cursor:pointer;
	color:#F00;
}
.most_fertile_day{
	background:url("images/flower.png") no-repeat scroll -3px 0px rgba(0, 0, 0, 0);
	cursor:pointer;
	color:#dd56cf;
}
.today{
	background:yellow;
}
.ovulation_day{
		background:url("images/ovulation.png") no-repeat scroll -3px 0px rgba(0, 0, 0, 0);
		cursor:pointer;
		color:#4e8ae3;
}
a{
	color:#000000;
	font-weight:bold;
}
a.tooltip, a.tooltip1, a.tooltip2{outline:none; text-decoration:none; }
a.tooltip1{ color:#7CA9EC;
}
a.tooltip2{ color:red;
}

a.tooltip strong {line-height:30px;}
a.tooltip:hover, a.tooltip1:hover, a.tooltip2:hover {text-decoration:none;} 
a.tooltip span, a.tooltip1 span, a.tooltip2 span {
    z-index:10;display:none; padding:14px 20px;
    margin-top:-30px; margin-left:319px;
    width:240px; line-height:16px;
	font-size:14px;
}
a.tooltip:hover span{
    display:inline; position:absolute; color:#111;
    border:1px solid #DCA; background:#fffAF0;
	left:175px;
	margin-top:-46px;}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
    
/*CSS3 extras*/
a.tooltip span, a.tooltip1 span
{
    border-radius:4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-box-shadow: 5px 5px 8px #CCC;
    -webkit-box-shadow: 5px 5px 8px #CCC;
    box-shadow: 5px 5px 8px #CCC;
	position: absolute;
margin-left: 110px;
margin-top:-40px;
}
a.tooltip2 span{
		position: absolute;
margin-left: 112px;
margin-top:-40px;
}
a.tooltip1:hover span{
    display:inline; 
	color:#111;
    border:1px solid #DCA; background:#fffAF0;
	left:313px;
	margin-top:-30px;
	position: absolute;
margin-left: 20px;

}
a.tooltip2:hover span{
    display:inline; position:absolute; color:#111;
    border:1px solid #DCA; background:#fffAF0;
	left:420px;
	margin-top:-30px;}
select {
  border: 2px solid #e44132;
  border-radius: 5px;
  padding: 3px;
}

input[type="submit"] {
  background-image: linear-gradient(#d32f32, #e44132);
  border: 1px solid #e44132;
  border-radius: 5px;
  color: #ffffff;
  cursor: pointer;
  font-family: Century Gothic;
  font-size: 16px;
  margin-top: 15px;
  padding: 7px;
}
input[type="submit"]:hover{
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #948ae6), color-stop(100%, #342987));
background-image: -webkit-linear-gradient(#948ae6, #342987);
background-image: -o-linear-gradient(#948ae6, #342987);
background-image: linear-gradient(#948ae6, #342987);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#948ae6', endColorstr='#342987', GradientType=0);
border: 1px solid #948ae6;
color: #ffffff;
padding: 7px 7px;
color: #ffffff;
border-radius: 5px;
cursor: pointer;
font-family:Century Gothic;
font-size:16px;
}
.cal-mod {
  border: 1px solid #e44132;
  border-radius: 5px;
  box-shadow: 2px 2px 2px 0 #dadada;
  margin: 0 auto;
  padding: 20px 20px 0;
  text-align: center;
  width: 720px;
  font: 17px/22px Century Gothic;
}
.calender-mod {
	width:750px;
	margin:0px auto;
}
p{
	margin:0;
	padding:10px 0px;
}
.header_bg{
	background:#e44132;
}
input:focus
{ 
border:none;
}

.header-txt {
  color: #e44132;
  font: 24px/28px Century Gothic;
}
.subhead-txt {
  color: #e44132;
  font: 20px/24px Century Gothic;
}
 @media screen and (max-width : 768px) {
	 .cal-mod, .calender-mod  {
  width: 80%;
}
 }
  @media screen and (max-width : 640px) {
	 .cal-mod, .calender-mod  {
  width: 80%;
}
 }