/********************************************************************
* Description: Primary style sheet for MobileHealth2u.com
* Author:      Jason Tan Boon Teck / Muhammad Kashif
********************************************************************/

/* the styles for the body tag */
   
   @font-face {
    font-family: 'CandaraRegular';
    src: url('../fonts/candara-webfont.eot');
    src: url('../fonts/candara-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/candara-webfont.woff') format('woff'),
         url('../fonts/candara-webfont.ttf') format('truetype'),
         url('../fonts/candara-webfont.svg#CandaraRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
body{
	font-size: 14px;	
	font-family: Arial, Helvetica, sans-serif;
}


.elements{
	width:222px;
	margin:0 auto;
	
}


/* main login page form */
.avatar{
	background:url(../images/avatar.gif) no-repeat center;
	height:65px;
	margin-bottom:25px;
}
.username{
	background:url(../images/usermamefield.gif) no-repeat top;
	width:222px;
	height:32px;
	

}
.username:focus{
	background:url(../images/usermamefield.gif) no-repeat bottom;
	color:#333333;
}
.password{
	background:url(../images/passwordfield.gif) no-repeat top;
	width:222px;
	height:32px;
	text-align:center;
}
.password:focus{
	background:url(../images/passwordfield.gif) no-repeat bottom;
	color:#333333;
}
.forget{
	font-size:12px;
	margin-bottom:20px;
}
.forget a{
	color:#999999;
	text-decoration:none;
}
.checkbox {
    display: block;
    width: 40px;
    height: 15px;
    overflow: hidden;
    border-radius: 5px;
	float:left;
	margin:5px 0 0 0;5
}	

input[type=checkbox] + label {
    text-indent: -9999px;
    display: block;
    width: 40px;
    height: 15px;
    line-height: 15px;
    background: transparent url(../images/checkboxfield.png) no-repeat;
    -webkit-transition: background-position 0.3s ease-in-out;
    -moz-transition: background-position 0.3s ease-in-out;
}
input[type=checkbox]:checked + label {
    -webkit-transition: background-position 0.3s ease-in-out;
    -moz-transition: background-position 0.3s ease-in-out;
    background-position:-26px;
}

input.camera {
    background-image: url(images/select-camera-button.jpg);
}
.image-upload > input {
    display: none;
}

.remember{
	font-size:12px;
	color:#999999;
	margin:5px;
	float:left;
}
.clr{
	clear:both;
}
.submit{
	float:right;
	background:#cccccc;
	width:60px;
	height:23px;
	border-radius:5px;
	border-bottom:2px solid #bcbcbc;
	cursor:pointer;
	color:#fff;
}
.submit:hover{
	text-shadow:0 1px rgba(0,0,0,0.1);
}
.submit:active{
	text-shadow:0 -1px rgba(0,0,0,0.2);
}
.signup{
	text-align:center;
	font-size:12px;
	color:#999;
	margin:5px 0 0 0;
}
.signup a{
	color:#72985a;
	text-decoration:none;
}



/* End main login page */




.nav {
	color: #FFF;
	background-color: #eceeea;
	font-size: 14px;
	font-family: Tahoma, Geneva, sans-serif;
	text-align:center
}

.nav2 {
	
	background-color: #919090;
	font-size: 14px;
	font-family: Tahoma, Geneva, sans-serif;
	text-align:center;
	
	
}

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	
}



.footer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-align: right;
}
.heading1 {
	color: #999;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 14px;
}

.styled-select select {
	background: transparent;
	width: 220px;
	padding: 5px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 14px;
	line-height: 1;
	border: 1;
	border-radius: 0;
	height: 34px;
	-webkit-appearance: none;
   }
   
div.ex
{
	width:92px;
	padding:6px;
	margin-left:18px;
	border-style: dotted;
	border-color: #999;
	border-width: 1px;
}  

 div.graph
{
	width: 700px;
	padding:0px;
	margin:0px;
	border-style: dotted;
	border-color: #999;
	border-width: 1px;
}  


 div.graph2
{
	width: 800px;
	padding:0px;
	margin:0px;
	border-style: dotted;
	border-color: #999;
	border-width: 1px;
}

div.div_scrollable_medium {
    height: 800px;
    background: #FFFFFF;
    overflow : auto;
}

   
div.div_scrollable_small {
    height: 500px;
    background: #FFFFFF;
    overflow : auto;
}

   
.table-heading {
	font-family: Arial, Geneva, sans-serif;
	font-size: 14px;
	color: #FFF;
	padding-left:0;
	
}

.graph-reading {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 24px;
	color: #000;
}

.vitalsign-heading {
	padding:10px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 16px;
	color: #690;
}


.text {
	font-family: Arial, Helvetica, sans-serif;
	padding:10px;
	font-size: 14px;
	color: #666;
	text-align:justify;
}

.text-bold {
	font-family: Arial, Helvetica, sans-serif;
	padding:8px;
	font-weight: bold;
	font-size: 12px;
	color: #666;
	text-align:justify;
	background:#FCFBBE
}

.text-notify {
	font-family: Arial, Helvetica, sans-serif;
	padding:10px;
	font-size: 12px;
	color: #666;
	text-align:left;
}

.text-heading {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #690;
	text-align:left;
}


div.calender
{
width:50px;
padding:6px;
margin:0px;

}  

div.view-detail
{
	width:80px;
	height: 16px;
	padding:10px;
	margin:15px;
	background:#690;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFF;
} 

div.identify
{
	width:240px;
	height: 16px;
	padding:10px;
	margin:20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #999;
	position:absolute;
	top:600px;
	right:370px;
} 

div.banner
{
	position:absolute;
	left: 100px;

}  




div.banner-events
{
	position:absolute;
	width: 200px;
	left: 90px;
}  


table.tablebg_blue td{
    vertical-align: top;
    background-color: #FAFAFF;
	font-size: 16px;
    }
	
.family_mgt_heading2 {
	font-family: Arial, Helvetica, sans-serif;
	
	font-size: 14px;
	color: #690;
}	

.tdbg1 {
	background:#99cc66;
	text-align:center;
}
.tdbg2 {
	background: #693;
	text-align:center;
}


/* Public pages headings */

.faq_heading {
		font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 24px;
	color: #F90;
}

.faq_heading2 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 20px;
	color: #693;
	
}
.heading-bg {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 20px;
	color: #693;
	background:#FC0
	
}

.heading-reminder {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 16px;
	color: #693;
	background:#FC0
	
}

.header_headings {
	padding-left:610px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 26px;
	color: #693;
}

.header_headings3 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 26px;
	color: #693;
}
.public_heading2 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 16px;
	color: #fff;
	padding-left:15px;
}

.public_heading {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 16px;
	color: #F60;
}
	


/* End Public pages headings */	
    
th.tab_current {
	background-color: #fbcd3a;
}

th.tab_current > a {
	color: #FFFFFF;

}

td.tab_current {
	background-color: #fbcd3a;
}

td.tab_current > a {
	color: #FFFFFF;

}



tr.tr_highlight  td{
	background-color: #FFFFCC !important;
}



.mob_heading {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 35px;
	color: #FFF;
}


/* Tiny Scrollbar */
#scrollbar1 { width: 200px; margin: 20px 0 10px; }
#scrollbar1 .viewport { width: 200px; height: 100px; overflow: hidden; position: relative; }
#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
#scrollbar1 .scrollbar{ background: transparent url(images/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }
#scrollbar1 .track { background: transparent url(images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; }
#scrollbar1 .thumb { background: transparent url(images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; }
#scrollbar1 .thumb .end { background: transparent url(images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
#scrollbar1 .disable { display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }

/* Submit Button */
.button_submit {
   border-top: 1px solid #66aa66;
   background: #66aa66;
   background: -webkit-gradient(linear, left top, left bottom, from(#66aa66), to(#336600));
   background: -webkit-linear-gradient(top, #66aa66, #336600);
   background: -moz-linear-gradient(top, #66aa66, #336600);
   background: -ms-linear-gradient(top, #66aa66, #21a325);
   background: -o-linear-gradient(top, #66aa66, #21a325);
   padding: 5px 14px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 21px;
   font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button_submit:hover {
   border-top-color: #1c8c23;
   background: #1c8c23;
   color: #ffffff;
   }
.button_submit:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }
   
   /* End Submit Button */

	 
	/* Accordion */
.js .panel-title {
  margin: 0;
}
.panel-title a {
  border-bottom: none;
  color: #292929;
  display: block;
  padding: 1.25em 0;
  position: relative;
  text-decoration: none;
  -webkit-transition: color 200ms ease 0s;
  -moz-transition: color 200ms ease 0s;
  transition: color 200ms ease 0s;
  width: 100%;
}
.panel-title a .icon {
  color: #9e9e9e;
  position: absolute;
  right: 0;
  -webkit-transition: all 200ms ease 0s;
  -moz-transition: all 200ms ease 0s;
  transition: all 200ms ease 0s;
}
.panel-title a:hover,
.panel-title a:focus {
  color: #37474f;
}
.panel-title a:hover .icon,
.panel-title a:focus .icon {
  color: #ec407a;
}
.panel-title a.active {
  color: #37474f;
}
.panel-title a.active .icon {
  color: #ec407a;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
.js .accordion {
  border-bottom: 1px solid #ececec;
  margin: 2em 0;
}
.accordion .panel-title a {
  border-top: 1px solid #ececec;
}
[id^="panel-"] {
  padding-bottom: 2em;
}