@import url('../fonts/stylesheet.css');
/* 'OpenSansLight', 'OpenSansLightItalic', 'OpenSansRegular', 'OpenSansItalic', 'OpenSansBold', */

/* Skeleton V1.2 modified by Jen Patel 8/16/2013
*  Copyright 2011, Dave Gamache
*  www.getskeleton.com
*  Free to use under the MIT license.
*  http://www.opensource.org/licenses/mit-license.php
*  6/20/2012 */

/* Table of Contents
  =============================
	Reset & Basics
	Typography
	Links
	Lists
	Forms
	Base 960 Grid
		Tablet (Portrait)
		Mobile (Portrait)
		Mobile (Landscape)
    Clearing
	Site Styles
		.main_table / #med_table
		#header #footer
		.nav
		.main table
	Page Styles
		.med_list
	Site/Page Media Queries 
  =============================
*/

/*Reset & Basics*/
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline; 
	}
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
	ol, ul { list-style: none; }
	table {
		border-collapse: collapse;
		border-spacing: 0; 
	}
	body {
		line-height: 1;
		background: #f5f5f5;
		font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		color: #000;
		-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
		-webkit-text-size-adjust: 100%;
	}

/*Typography*/
	h1, h2, h3, h4, h5, h6 {
		color: #747474;
		font-weight: normal; 
	}
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
	h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;}
	h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
	h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
	h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
	h5 { font-size: 17px; line-height: 24px; }
	h6 { font-size: 14px; line-height: 21px; }
	.subheader { color: #777; }

	p { margin: 0 0 20px 0; }
	p img { margin: 0; }
	p.lead { font-size: 21px; line-height: 27px; color: #777;  }

	strong { font-weight: bold; color: #333; }
	small { font-size: 80%; }
	.grn_text { color:#82a95c; }
	.gry_text { color:#717171; }

	hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }

/*Links*/
	a, a:visited { color: #747474; text-decoration: none; outline: 0; }
	a:hover, a:focus { color: #4d4d4d; }
	p a, p a:visited { line-height: inherit; }

/*Lists*/
	ul, ol { margin-bottom: 20px; }
	ul { list-style: none outside; }
	ol { list-style: decimal; }
	ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
	ul.square { list-style: square outside; }
	ul.circle { list-style: circle outside; }
	ul.disc { list-style: disc outside; }
	ul ul, ul ol, ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%;  }
	ul ul li, ul ol li, ol ol li, ol ul li { margin-bottom: 6px; }
	li { line-height: 18px; margin-bottom: 12px; }
	ul.large li { line-height: 21px; }
	li p { line-height: 21px; }

/*Forms*/
	form { margin-bottom: 20px; }
	fieldset { margin-bottom: 20px; }
	input[type="text"],
	input[type="password"],
	input[type="email"],
	textarea,
	select {
		border: 1px solid #ccc;
		padding: 6px 4px;
		outline: none;
		/*-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;*/
		font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		color: #777;
		margin: 0;
		width: 210px;
		max-width: 100%;
		display: block;
		margin-bottom: 20px;
		background: #fff; }
	select { padding: 0; }
	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="email"]:focus,
	textarea:focus {
		border: 1px solid #aaa;
		color: #444;
		/*-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
		-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
		box-shadow:  0 0 3px rgba(0,0,0,.2);*/ }
	textarea { min-height: 60px; }
	label, legend {
		display: block;
		font-weight: bold;
		font-size: 13px;  }
	select { width: 220px; }
	input[type="checkbox"] { display: inline; }
	label span, legend span {
		font-weight: normal;
		font-size: 13px;
		color: #444; }

/*Base 960 Grid
================================================== */
.container { position: relative; width: 1080px; margin: 0 auto; padding: 0; margin-top: 20px;}
.container .column,
.container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row { margin-bottom: 20px; }

/*Nested Column Classes */
.column.alpha, .columns.alpha { margin-left: 0; }
.column.omega, .columns.omega { margin-right: 0; }

/*Base Grid */
.container .one.column,
.container .one.columns { width: 40px;  }
.container .two.columns { width: 100px; }
.container .three.columns { width: 160px; }
.container .four.columns { width: 220px; }
.container .five.columns { width: 280px; }
.container .six.columns { width: 340px; }
.container .seven.columns { width: 400px; }
.container .eight.columns { width: 460px; }
.container .nine.columns { width: 520px; }
.container .ten.columns { width: 580px; }
.container .eleven.columns { width: 640px; }
.container .twelve.columns { width: 700px; }
.container .thirteen.columns { width: 760px; }
.container .fourteen.columns { width: 820px; }
.container .fifteen.columns { width: 880px; }
.container .sixteen.columns { width: 1060px; }

.container .one-third.column { width: 348px; }
.container .two-thirds.column { width: 692px; }

/*Tablet (Portrait) Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.container                                  { width: 768px; }
	.container .column,
	.container .columns                         { margin-left: 10px; margin-right: 10px;  }
	.column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; }
	.column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; }
	.alpha.omega                                { margin-left: 0; margin-right: 0; }

	.container .one.column,
	.container .one.columns                     { width: 28px; }
	.container .two.columns                     { width: 76px; }
	.container .three.columns                   { width: 124px; }
	.container .four.columns                    { width: 172px; }
	.container .five.columns                    { width: 220px; }
	.container .six.columns                     { width: 268px; }
	.container .seven.columns                   { width: 316px; }
	.container .eight.columns                   { width: 364px; }
	.container .nine.columns                    { width: 412px; }
	.container .ten.columns                     { width: 460px; }
	.container .eleven.columns                  { width: 508px; }
	.container .twelve.columns                  { width: 556px; }
	.container .thirteen.columns                { width: 604px; }
	.container .fourteen.columns                { width: 652px; }
	.container .fifteen.columns                 { width: 700px; }
	.container .sixteen.columns                 { width: 748px; }

	.container .one-third.column                { width: 236px; }
	.container .two-thirds.column               { width: 492px; }
}
/*Mobile (Portrait) Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
	.container { width: 300px; }
	.container .columns,
	.container .column { margin: 0; }

	.container .one.column,
	.container .one.columns,
	.container .two.columns,
	.container .three.columns,
	.container .four.columns,
	.container .five.columns,
	.container .six.columns,
	.container .seven.columns,
	.container .eight.columns,
	.container .nine.columns,
	.container .ten.columns,
	.container .eleven.columns,
	.container .twelve.columns,
	.container .thirteen.columns,
	.container .fourteen.columns,
	.container .fifteen.columns,
	.container .sixteen.columns,
	.container .one-third.column,
	.container .two-thirds.column  { width: 300px; }
}
/*Mobile (Landscape) Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.container { width: 420px; }
	.container .columns,
	.container .column { margin: 0; }

	.container .one.column,
	.container .one.columns,
	.container .two.columns,
	.container .three.columns,
	.container .four.columns,
	.container .five.columns,
	.container .six.columns,
	.container .seven.columns,
	.container .eight.columns,
	.container .nine.columns,
	.container .ten.columns,
	.container .eleven.columns,
	.container .twelve.columns,
	.container .thirteen.columns,
	.container .fourteen.columns,
	.container .fifteen.columns,
	.container .sixteen.columns,
	.container .one-third.column,
	.container .two-thirds.column { width: 420px; }
}

/*Clearing */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix:before, .clearfix:after,
.row:before, .row:after {
	content: '\0020';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0; }
.row:after, .clearfix:after { clear: both; }
.row, .clearfix { zoom: 1; }
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
.fright{
	float: right;
	margin: 0 auto;
}
.fleft{
	float: left;
	margin: 0 auto;
}
/*For modern browsers */
.cf:before, .cf:after { content:""; display:block; }
.cf:after { clear:both; }

/*Site Styles*/
/*.main_table / .med_table*/
#top {
	border-bottom: solid 1px #dadada;
	display: block;
	padding: 0;
	margin: 0;
	height: 65px;
}
#task_list ol{
	/*display: none;
}
#task_list ul.active{*/
	display: block;
	position:absolute;
	background: #fff;
	border-radius: 2px;
	border: #dadada solid 1px;
}
#task_list ol li {
	display: block;
	list-style: decimal;
	border: solid red 1px;
}
#top div, #controls div { display: inline-block; }
#controls {
	-webkit-user-select: none;  /* Chrome all / Safari all */
	  -moz-user-select: none;     /* Firefox all */
	  -ms-user-select: none;      /* IE 10+ */

	  /* No support for these yet, use at own risk */
	  -o-user-select: none;
	  user-select: none;
	  border-bottom: #dadada solid 1px;
	  margin-left: 0px;
	  margin-right: 0px;
	  padding-left: 4px;
}
#controls ul li {
	display: inline;
	font-size: 12px;
	padding: 2px 7px 3px 7px;
	cursor: pointer;
	margin-right:7px;
}
#controls .reset {
	border-left: #dadada 1px solid;
	padding-left: 14px;
}
#top ul li {
	display: inline;
	font-size: 10px;
	padding: 2px 0px 3px 14px;
	margin: 0 0px 0 10px;
}
#top ul li a, #controls ul li a{ color: #717171; }
#top ul li a:hover, , #controls ul li a:hover{ color: #000; }
#top ul li.active {
	font-weight: bold;
	color: #434343;
}
#controls ul li.active {
	color: #fff;
	background: #747474;
	border-radius:5px;
}
#controls ul li.active a{ color: #fff; }
#top #nav {
	float: right;
}
#top #nav ul li{
	font-size: 14px;
}
#top #patient_card, #top #nav {
	margin: 12px;	
}
#top #patient_card #photo {
	background: url('../images/robert_martin.png');
	height:46px;
	width: 46px;
	display: block-inline;
	margin-right: 10px;
}
#patient_card #info #name {
	line-height: 24px;
}
#patient_card #info #dob, #patient_card #info #gender {
	font-size: 10px;
	display: inline;
}
#patient_card #info #gender {
	margin-left: 15px;	
}
section {	margin: 20px 15px 10px 15px; }
#search {
	display: none;
	margin-left: 12px;
}
#search label {
	background: url('../images/search.png') no-repeat;
	position: absolute;
	margin: 8px 0 0 195px;
	display: block;
	height: 15px;
	width: 15px;
}
#search input {
	opacity: .5;
	z-index: 2;
}
#search input:focus {
	opacity: 1;
	background-color: #fff;
}
.wrapper {
	background-color: #fff;
	border: solid 1px #dadada;
	margin: 8px 6px 6px 6px;
	-moz-box-shadow:    0px 1px 4px 0px #dadada;
  	-webkit-box-shadow: 0px 1px 4px 0px #dadada;
  	box-shadow:         0px 1px 4px 0px #dadada;
}
.header {
	color: #535353;
	font-size: 11px;
	margin: 10px 20px 0px 20px;
}
.header .welcome {
	float: left;
}
.header .todays_date {
	float: right;
}

.interactive_content{
	margin: 0px 6px 0px 6px;
}
table.main_table{
	margin: 0;
	padding: 0;
	width: 100%;
	padding-bottom: 20px;
}
table.main_table thead{
	/*background:#424242;*/
	font-size: 10px;
	color: #747474;
	border-bottom: solid 1px #dadada;
}
.drop_arrow{
	background-image: url(../images/down_arrow.svg);
	height: 7px;
	width: 10px;
	display: inline-block;
	background-repeat: no-repeat;
	vertical-align: top;
	margin: 12px 18px 0px -6px;
}
table.main_table thead tr th{
	padding: 5px 0 12px 0px;
	font-weight: normal;
	text-align: left;
}
table.main_table thead tr th.sort-col:hover{
	color: #fff;
}
table.main_table tbody tr:first-child td {
	margin-top:10px;
}
table.main_table tbody tr {
	font-size: 12px;
	color: #434343;
	/*background: #fff;*/
}
table.main_table tbody tr td {
	padding: 10px 0 12px 0;
	/*padding: 11px 8px 9px 10px*/;
}
table.main_table thead tr th:first-child,
table.main_table tbody tr td:first-child {
	padding-left: 4px;
}
.num{
	width: 30px;
	display: inline-block;
	text-align: right;
}
.sm_num{
	width: 18px;
	display: inline-block;
	text-align: right;
}
th.sorted-asc, th.sorted-desc { color: #434343; }
th .arrow{
	background: url('../images/arrow_inactive.svg') no-repeat;
	background-repeat: no-repeat;
	display: inline-block;
	height: 7px;
	width: 10px;
	margin-bottom:-2px;
	margin-left: 3px;
}
th.sorted-asc .arrow { background: url('../images/arrow.svg') no-repeat;}
th.sorted-desc .arrow { 
	background: url('../images/arrow.svg') no-repeat;
	background: transform:rotate(180deg);
	-moz-transform:rotate(180deg);
	-ms-transform:rotate(180deg); /* IE 9 */
	-webkit-transform:rotate(180deg); /* Opera, Chrome, and Safari */ 
	margin-bottom: 0px;
	margin-left: 0px;
	}

/*Page Styles */
#med_table .closed { display: none; }
.sort-key { display: none; }
th.sortable:hover, td.condition:hover, td.provider:hover { 
	text-decoration: underline; cursor: pointer; } 
table tr td:hover { 
	cursor: pointer; } 
tr.clicked{ background: #ebebeb; }
tr td.dose{ min-width: 65px; }
tr td.sig, tr td.prescribed, tr td.renew_date { min-width: 80px; }
tr.albuterol_row td.sig .sm_num { padding-right: 5px; margin-left: -4px; }
tbody tr td .units, tbody tr td .per, tbody tr td.refills { color:#929292; }
tbody tr td .units, tbody tr td .per { font-size: 10pt; }
tbody tr.closed td { color: #c5c5c5; }
tbody tr.closed td .per, tbody tr.closed td .units { color: #c5c5c5; }
tbody tr td.date{ min-width:86px; }
thead tr th ul{ margin-bottom: 0; }
thead tr th ul li{
	display: inline;
	line-height: 12px;
	margin-bottom: 0;
	margin-left: 10px;
}
tbody tr td .month {
	width: 25px;
	text-align: center;
	display: inline-block;
}
tbody tr td .year {
	text-align: left;
	width: 30px;
	display: inline-block;
}
thead tr th.brand, tbody tr td.brand, thead tr th.sideEffects, tbody tr td.sideEffects {
	display: none; }
tbody tr.child {
	display: none;
	float: left;
	background: #5e5e5e;
}
td.details-control {
	background: url('../images/down_arrow.svg') no-repeat bottom center;
	cursor: pointer;
	height: 6px;
	width: 9px;
	display: inline-block;
}
tr.shown td.details-control {
	background: url('../images/down_arrow.svg') no-repeat top center;
	background: transform:rotate(180deg);
	  -moz-transform:rotate(180deg);
	  -ms-transform:rotate(180deg); /* IE 9 */
	  -webkit-transform:rotate(180deg); /* Opera, Chrome, and Safari */ 
	  margin-bottom: 0px;
	  margin-left: 0px;
			}
tr.shown, table.medication-info {
	background:#fafafa;
	width: 100%;
	margin: -9px 0px 0px 0px;
}
table.medication-info {
	z-index: 5;
	position: relative;
}
table.medication-info tr {
	display: inline-block;
	padding-left: 16px;
}
table.medication-info tr td.label {
	display: block;
	color: #c5c5c5;
	font-size: 10px;
	margin-left: -16px;
	margin-bottom: -12px;
}
table.medication-info tr td {
	color: #747474;
}
table.medication-info tr.status {
}
table.medication-info tr.primary, table.medication-info tr.secondary {
	width: 10%;
}
table.medication-info tr.instructions {
	width: 15%;
}
table.medication-info tr.notes,
table.medication-info tr.side_effects {
	width: 25%;
	line-height: 18px;
	background:#fafafa;
}

/*Mini Timeline styles - unfortunately, not dynamic, but hard-coded*/
thead tr th ul li:first-child{ margin-left: 0px; }
thead tr th.timeline{ min-width: 140px; }
thead tr th ul li .todaybar {
	width: 1px;
	height: 70%;
	background: #b3b3b3;
	position: absolute;
	margin-left: 100px;
	margin-top: 10px;
	z-index: 1;
}
tbody tr td.timeline .bar {
	border-radius: 7px;
	height: 7px;
}
tbody tr td.timeline .bar .max, 
tbody tr td.timeline .bar .least,
tbody tr td.timeline .bar .low, 
tbody tr td.timeline .bar .mid, 
tbody tr td.timeline .bar .overmax {
	display: inline-block;
	height: 7px;
}
tbody tr td.timeline .bar.max, tbody tr td.timeline .bar .max{
	background: #2f2f2f; }
tbody tr td.timeline .bar.least, tbody tr td.timeline .bar .least{
	background: #e0e0e0; }
tbody tr td.timeline .bar.low, tbody tr td.timeline .bar .low{
	background: #ccc; }
tbody tr td.timeline .bar.mid, tbody tr td.timeline .bar .mid {
	background: #8c8c8c; }
tbody tr td.timeline .bar.overmax, tbody tr td.timeline .bar .overmax {
	background: #c30000;
}
tbody tr td.timeline #albuterol.bar {width: 106px;}
tbody tr td.timeline #aspirin.bar {width: 100px;}
tbody tr td.timeline #qvar.bar { width:95px; margin-left:5px; }
tbody tr td.timeline #bupropion.bar { width: 15px; margin-left:48px;}
tbody tr td.timeline #bupropion.bar .low { width:5px; border-top-left-radius: 7px; border-bottom-left-radius: 7px;}
tbody tr td.timeline #bupropion.bar .mid { width: 10px; margin-left:-4px; border-top-right-radius: 7px; border-bottom-right-radius: 7px;}
tbody tr td.timeline #carvedilol.bar {width: 116px;}
tbody tr td.timeline #carvedilol.bar .mid{width:112px; border-radius: 7px; }
/*tbody tr td.timeline #carvedilol.bar .max{width:102px; margin-left: -4px; border-top-right-radius: 7px; border-bottom-right-radius: 7px;}*/
tbody tr td.timeline #chlorthalidone.bar {width: 100px;}
tbody tr td.timeline #citalopram.bar {width: 143px;}
tbody tr td.timeline #citalopram.bar .max{width:11px; border-top-left-radius: 7px; border-bottom-left-radius: 7px;}
tbody tr td.timeline #citalopram.bar .mid{width:132px; margin-left: -4px; border-top-right-radius: 7px; border-bottom-right-radius: 7px;}
tbody tr td.timeline #esomeprazole.bar {width: 22px; margin-left:19px;}
tbody tr td.timeline #gabapentin.bar {width: 58px; margin-left:48px;}
tbody tr td.timeline #gabapentin.bar .least {width: 14px; border-top-left-radius: 7px; border-bottom-left-radius: 7px;}
tbody tr td.timeline #gabapentin.bar .low {width: 10px; margin-left: -4px;}
tbody tr td.timeline #gabapentin.bar .mid {width:34px; margin-left: -4px; border-top-right-radius: 7px; border-bottom-right-radius: 7px;}
tbody tr td.timeline #insulin.bar {width: 31px; margin-left: 69px;}
tbody tr td.timeline #lisinopril.bar  {width: 19px; margin-left: 26px;}
tbody tr td.timeline #lisinopril.bar .mid {width: 10px; border-top-left-radius: 7px; border-bottom-left-radius: 7px;}
tbody tr td.timeline #lisinopril.bar .max {width: 9px; margin-left: -4px; border-top-right-radius: 7px; border-bottom-right-radius: 7px;}
tbody tr td.timeline #losartan.bar {width:59px; margin-left:42px;}
tbody tr td.timeline #losartan.bar .mid {width:33px; border-top-left-radius: 7px; border-bottom-left-radius: 7px;}
tbody tr td.timeline #losartan.bar .max { width:26px; margin-left: -4px; border-top-right-radius: 7px; border-bottom-right-radius: 7px;}
tbody tr td.timeline #metformin.bar {width: 100px;}
tbody tr td.timeline #naproxen.bar {width: 100px;}
tbody tr td.timeline #nitroglycerin.bar {width: 37px; margin-left:56px;}
tbody tr td.timeline #omeprazole.bar .max {width:29px; margin-left: 52px; border-radius: 7px;}
tbody tr td.timeline #omeprazole.bar .max2 { width:21px; background: #333333; display: inline-block; height: 7px; border-radius: 7px;}
tbody tr td.timeline #prednisone.bar {width: 100px;}
tbody tr td.timeline #simvastatin.bar {width: 102px;}
tbody tr td.timeline #simvastatin.bar .overmax{width:27px; border-top-left-radius: 7px; border-bottom-left-radius: 7px;}
tbody tr td.timeline #simvastatin.bar .max{width: 75px; margin-left: -4px; border-top-right-radius: 7px; border-bottom-right-radius: 7px;}
tbody tr td.timeline #terbinafine.bar { width:8px; margin-left:96px;}
tbody tr td.timeline #trazodone.bar  {width: 40px; margin-left:5px; }
tbody tr td.timeline #trazodone.bar .least {width: 8px; border-top-left-radius: 7px; border-bottom-left-radius: 7px;}
tbody tr td.timeline #trazodone.bar .low {width: 10px; margin-left: -4px;}
tbody tr td.timeline #trazodone.bar .mid {width: 10px; margin-left: -4px;}
tbody tr td.timeline #trazodone.bar .low2 {width: 12px; margin-left: -4px; background: #808080; display: inline-block; height: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px;}
tbody tr td.timeline #warfarin.bar { width: 19px; margin-left:13px;}
tbody tr td.timeline #zolpidem.bar {width:60px; margin-left:47px;}


	/* #Tablet (Portrait) Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	/*.container  { width: 768px; }*/
}
	/*  #Mobile (Portrait) Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
	/*.container { width: 300px; }*/
}
	/* #Mobile (Landscape) Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	/*.container { width: 420px; }*/
}