/* Overall Styles */
BODY, TD, SELECT, INPUT, A, li, TABLE {
	font-size: 11px;
}

IMG {
	border: 0px;
}

BODY {
	font-family: Verdana,Geneva,Arial,sans-serif;
}

TD {
	/*vertical-align: middle;*/
	color: #262626;
	/*text-align: center;*/
	/*line-height: 14px;*/
	margin: 0px;
	padding: 0px;
}

SELECT {
	padding: 1px;
}

SELECT OPTION {
	padding-left: 3px;
}

INPUT {
	padding: 1px;
}

.submitButton {
	text-align: left;
	vertical-align: top;
	padding-bottom: 5px;
}

hr {
	color: #515151;
	background-color: #515151;
	width: 100%;
	height: 1px;
	border: 0;
	border-top: 1px solid;
}

.instructionBlock {
	padding: 4px 20px 4px 20px;
	border: 2px solid #515151;
	background-color: #f5f5f5;
}

textarea {
	font-family: Verdana,Geneva,Arial,sans-serif;
	font-size: 11px;
}

/* SUP is used for footnotes in reports */
/* this is all to prevent <sup> from increasing line height too much - tuned for IE */
sup {
	height: 0;
	line-height: 1.2;
	position: relative;
	top: -0.6em;
	vertical-align: baseline !important;
	vertical-align: bottom;
}

.footnote {
	font-size: 90%;
}

.error {
	color: Red;
	margin-bottom: 2px;
	margin-top: 2px;
}

.required {
	color: red;
}

.hidden {
	visibility: hidden;
	display: none;
}

/* Links */

A {
	text-decoration: underline;
	color: #253494;
}

A:hover, A:active {
	text-decoration: underline;
}

A.footnote {
	text-decoration: none;
}



.toolLink {
	width: 100%;
	text-align: right;
	vertical-align: top;
	padding: 0px;
}

div.savedInfo {
	font-weight: bold;
	color: green;
	margin-left: 7px
}

div.formMenu {
	display: none;
	position: absolute;
	top: 100px;
	left: 100px;
	/*  Width might need adjustments for languages with long labels */
	width: 225px;
	white-space: nowrap;
	z-index: 100;
	background-color: #DADADF;
	border: 1px solid;
}


/* TITLES, LISTS and ROWS of THINGS */


.listTitle, .listTitleTop {
	background-color: #EAEAEA;
	text-align: right;
	font-weight: bold;
	padding-right: 5px;
	padding-left: 5px;
	padding-top: 2px;
	padding-bottom: 2px;
	color: #515151;
	width:35%;
}

.listTitleTop {
	vertical-align: top;	
}

.listTitleLeft {
	background-color: #EAEAEA;
	text-align: left;
	font-weight: bold;
	padding-right: 5px;
	padding-left: 5px;
	padding-top: 1px;
	padding-bottom: 1px;
	color: #515151;
	width: 35%;
}

.listTitleColor {
	background-color: #EAEAEA;
}

.listContent, .listContentTop {
	background-color: #F5F5F5;
	text-align: left;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 2px;
	padding-bottom: 2px;
}

.listContentTop {
	vertical-align: top;
}

.narrowSection h2, .listHeader {
	text-align: left;
	background-color: #C2C2C2;
	color: #404040;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 10px;
	padding-right: 10px;
	margin: 0px;
	font-weight: bold;
	font-size: 11px;	
}

.narrowSection h2 {
	margin-bottom: .5em;
}

.dtHeader {
	background-color: #C2C2C2;
	text-align: center;
	color: #000000;
	font-weight: bold;
	padding: 3px;
}

.dtHeader a, .dtHeader .sortCol {
	text-align: center;
}

.dtRowHeader {
	text-align: left;
	padding-left: 3px;
}

.dtRowGroupHeader0 {
	background-color: #DDDDDD;
	text-align: left;
	color: #000000;
	font-weight: bold;
	padding: 3px;
}

.dtRowGroupHeader1 {
	text-align: left;
	color: #000000;
	font-weight: bold;
	padding: 3px;
}

.listSuperHeader {
	background-color: #FFFFFF;
	color: #404040;
	text-align: left;
	font-weight: bold;
	padding: 5px;
}

.dtSuperHeader, .SuperHeader a {
	background-color: #C3D2D9;
	color: #404040;
	text-align: center;
	font-weight: bold;
	padding: 4px;
}

.DataRow0 {
	background-color: #FFFFFF; 
}

.DataRow1 {
	background-color: #EAEAEA; 
}

.AggregateRow {
	background-color: #F7FBFF;
}

.AggregateRow td {
	padding-left: 5px;
	padding-right: 5px;
}

.DataColumnSorted0 {
	background-color: #F7FBFF;
	/*text-align: center;*/
}

.DataColumnSorted1 {
	background-color: #DEEBF7;
	/*text-align: center;*/
}

.sortcol {
	text-decoration: none;
	font-weight: bold; 
	color: #253494;
}

/* Date fields */

table.dateField,
table.dateField table {
	border-collapse: collapse;
}

.dateField input.shortDateCmpt {
	width: 1.8em;
}

.dateField input.longDateCmpt {
	width: 3.5em;
}

td.DateLabel, .DateNA, .TimeNA {
	font-size: 6pt;
	font-weight: normal;
	text-align: center;
	vertical-align: top;
}

td.dateSeparator {
	font-size: 6pt;
	font-weight: normal;
	vertical-align: top;
	padding-top: 2px;
}

td.datePrecision select {
	font-size: 5pt;
}

td.datePicker {
	vertical-align: top;
}

/* Search */

.searchTable {
	width: 300px;
	margin-bottom: 5px;
	padding-top: 1px;
	border: 1px solid #C1C1C1;
	background-color: #EAEAEA;
}

.searchTable TD {
	padding-top: 2px;
	padding-bottom: 2px;
}

.searchTable TD TD {
	padding-top: 0px;
	padding-bottom: 0px;
}

#advancedSearch SELECT {
	width: 150px;
}

#advancedSearch .date_dropdown {
	width: auto;
}

.advSearchTable {
	width: 530px;
	margin-bottom: 10px;
	padding-top: 1px;
	border: 1px solid #C1C1C1;
	background-color: #EAEAEA;
}

.advSearchTable TD {
	padding-top: 2px;
	padding-bottom: 2px;
}

.advSearchTable TD TD {
	padding-top: 0px;
	padding-bottom: 0px;
}

.searchLabel {
	font-weight: bold;
	text-align: right;
	padding-right: 10px;
	width: 220px;
}


/* Patient Grid Legend */

.legend {
	vertical-align: top;
}

.legendTitle {
	font-weight: bold;
	text-align: center;
}

.legendTable {
	border: 1px solid #D3D3D3;
	padding: 2px;
}

/*	Need to wrap these cells, otherwise the labels
	for languages that use symbols (e.g. Korean) all
	get wrapped and you get one symbol per line. */
.legendTable td {
	white-space: nowrap;
}

div.pending, div.pending a {
	font-style: italic;
	color: #2166AC;
	font-weight: normal;
}

div.incomplete, div.incomplete a {
	font-weight: bold;
	color: #2166AC;

}

.overdue {
	font-style: italic;
	font-weight: bold;
	color: #2166AC;
	background-color: #FCF0D7;
}

div.complete, div.complete a, td.complete a {
	font-weight: normal;
	color: #2166AC;
}

div.queried {
	background-color: #FED98E;
}

div.Unsigned, div.unsigned {
	border: 2px solid #ABD9E9;
}

div.Signed, div.signed {
	/* Signed forms have no special formatting */
}




/* Patient Grid */

TABLE.gridTable {
	width: 600px;
	border: 1px solid #C1C1C1;
	border-collapse: collapse;
}

TABLE.gridTable TD {
	border: 1px solid #C1C1C1;
	vertical-align: top;
}

TABLE.gridTable TD TD {
	border: 0px;
}

.ptGridSuperHeader {
	background-color: #eaeaea;
	text-align: center;
	font-size: 12px;
	color: #515151; 
	font-weight:bold; 
	padding: 5px;
}

.ptGridHeader {
	text-align:center;
	background-color: #eaeaea;
	font-size: 12px; 
	color: #515151; 
	font-weight:bold; 
	padding: 5px;
}

.ptGridRow {
	background-color: white;
}

.ptGridAltRow {
	background-color: #EBFFE8;
}

.ptGridCell {
	padding-top: 2px;
	padding-bottom: 2px;
	text-align: center;
}

.siteGridCell {
	padding-top: 2px;
	padding-bottom: 2px;
	text-align: center;
}

.linkGridCell {
	padding-top: 2px;
	padding-bottom: 2px;
	vertical-align: top;
	text-align: center;
}

A.linkGridCell {
	font-weight: normal;
}

.formLinkCell a {
	text-decoration: none;
}

.multiGridCell {
	padding: 1px 2px 0px 3px;
}

.pageNav TD {
	padding-left: 3px;
	padding-right: 3px;
	white-space: nowrap;
	display: inline;
	text-align: center;
}


/* .signature is currently the same style as .complete -- I retained it as a separate style in case we want to change this in the future. */
.signature {
	color: #2166AC;
	font-weight: normal;
}

/* .dividerLine is the style for the horizontal lines that separate patients in the grid */
TD.dividerLine {
	background-color: #D3D3D3;
	padding: 0;
}

TD.newPatientLink {
	padding-left: 5px;
	padding-top: 3px;
	padding-bottom: 5px;
}

A.newPatientLink {
	font-size: 12.5px;
}


/* TABLE STYLES - DRS */

/* .narrowTable is for solid lines of text should have 12-13 words per line */
TABLE.narrowTable, div.narrowDiv, .narrowSection {
	width: 36.4em;
}

TABLE.wideTable, div.wideDiv {
	width: 59.15em;
}

TABLE.fullTable, div.fullDiv {
	width: 100%;
}

.narrowSection {
	margin-bottom: 14px;
}

/* Standard header (navigation tabs, id frame) */

#stdHeader {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;	
	width: 100%;
	height: 5.6em;
	overflow: hidden;
}

#stdContent {
	padding: 0px;
	margin: 0px;
	position: absolute;
	left: 0;	
	right: 0;
	width: 100%;
	top: 5.6em;	
	
	/* turn off for no fixed header, in addition to IE-specific hacks */
	bottom: 0px;
	overflow: auto;
}

#stdContentPadding {
	/* body usually has a default margin, we need to add that here
	   since stdContent is our new body */
	margin: 0px 8px 0px 8px;
}

/* ID FRAME STYLES */

/* the background image can be as narrow as 1 px and as wide as you like. It should provide a clear separation between the tabs frame and the content frame (so, a top-to-bottom gradient might be appropriate, but a left-to-right gradient probably wouldn't). Height is limited by the height of the frame. */
.idFrameBody {
	background: #a3bfcc;
	background-image: url(../img/idFrameBackground.gif);
	background-repeat: repeat-x;
	font-size: 10px;
	color: #000000;
	height: 1.6em;
	white-space: nowrap;
	padding: 1px;
	padding-left: 17px;
	position: absolute;
	top: 4.6em;
	left: 0;
	width: 100%;
}

/* id frame labels are "Current User:", "Site:" and "Site ID:" */
.idFrameLabel{
	font-weight: bold;
}

.idFrameData {
	font-weight: normal;	
	padding-right: 7px;
}

/* TABS Frame Styles */

#tabsLogo {
	width: 160px;
	padding: 0;
	padding-left: 22px;
	vertical-align: middle;
}

.tabsFrameBody {
	background: #9db7c4;
	background-image: url(../img/tabsFrameBackground.gif);
	background-repeat: repeat-x;
	height: 4.3em;
	white-space: nowrap;
	position: relative;
}

.tabsFrameBody table,
.tabsFrameBody td {
	position: relative;
	border-collapse: collapse;
	border: 0;
}

.tabsFrameBody table {
	width: 100%;
	height: 4.3em;
}

.tabBar {
	text-align: right;
	vertical-align: bottom;
	white-space: nowrap;
}

.imgTabBar {
	text-align: right;
	vertical-align: bottom;
	white-space: nowrap;
}

#tabBarContent {
	float: right;
}

#tabBarContent ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#tabBarContent li {
	float: left;
	background: url(../img/tabs/tab_left_off.gif) no-repeat left top;
	margin: 0 1px 0 0;
	padding: 0 0 0 14px;
}

#tabBarContent a {
	display: block;
	background: url(../img/tabs/tab_right_off.gif) no-repeat right top;
	padding: 2px 20px 2px 6px;
	color: #555;
	text-decoration: none;
}

#tabBarContent li.navActive {
	background-image: url(../img/tabs/tab_left_on.gif);
	color: #000;
}

#tabBarContent li.navActive a {
	background-image: url(../img/tabs/tab_right_on.gif);
	font-weight: bold;
}

.actionBar {
	text-align: right;
	vertical-align: top;
	padding: .2em .7em 0 0;
}

a.nav {
	font-weight: bold;
}

/* LIST STYLES */

/* .reportListContent is use for the lists of options under the reports tab and the my account tab. The padding-bottom is there to make a bigger separation between the list content and a list header that may come below it. */
/* reportListContent is deprecated */
.sectionBody, .reportListContent {
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 2px;
	padding-bottom: 2px;
	text-align: left;
}

.sectionBody ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sectionBody a {
	font-weight: bold;
}

ul{
	margin-top: 6px;
	margin-bottom: 12px;
	list-style : square;
}

li{
	margin-bottom: 2px;
	padding-bottom: 3px;
}

/* .ftnote is not always used as a footer, eg, in the ddt screen the .ftnote class is applied to some instructions in a cell */
.ftnote {
	font-size: 10px;
	color: #515151;
	text-align: left;
}	

.ftnoteBorder {
	font-size: 10px;
	color: #515151;
	text-align: left;
	margin-top: 10px;
	border-top: 1px dotted #515151;
	padding-top: 2px;

}

.ftnote a, .ftnoteBorder a {
	font-size: 10px;
}



/* Report Title */

/* .reportTitle is the name of the report, eg, "Study Query Breakdown Report" */
.reportTitle {
	color: #006699;
	font-size: 16px;
	font-weight: bold;
	padding-bottom: 5px;
	padding-top: 10px;
}


/* .reportDescription is the line just below the report title describing what the report shows, eg, "This report is used to track and manage queries; it shows all monitor and system queries for sites */
.reportDescription {
	font-size: 10px;
	font-weight: bold;
	color: #515151;
	padding-bottom: 10px;
}

.reportType {
	background-color: transparent;
	color: #404040;
	text-align: center;
	font-weight: bold;
	font-style: italic;
	padding-bottom: 5px;
}

.filtersRow {
	text-align: left;
}




/* The Reports Table Itself */

.sortIcon {
	text-align: right;
	vertical-align: middle;
}

.TotalColumn, .TotalColumn a {
	background-color: #CCCCCC;
	color: #006699;
	font-weight: bold;
	text-align: center;
}

.FilterRow {
	background-color: #FFFFFF;
	text-align: center;
}

.DataColumn {
	color: #000000;
	padding: 3px;
	/*text-align: left;*/
}

#ReportResults .DataColumn {
	color: #000000;
	padding: 3px;
	text-align: center;
}

.highlighted {
	color: #000;
	background-color: #fbf8d3;
}

/* Benchmark Report Styles */

.BenchDataRowHeader {
	padding-left: 10px;
	padding-top: 1px;
	padding-bottom: 1px;
}

.BenchDataRow0 {
	background-color: #FFFFFF;
}

.BenchDataRow1 {
	background-color: #F4F4F4;
}

/* use padding-right to visually 'center' split cells in column */
.splitCell {
	padding-right: 32px;
}

.splitCell TD {
	padding: 0px;
	width: 30px;
}


/* LOGIN PAGE STYLES */

/* The image in .loginBody is the background stripe
 * that goes horizontally across the page.
 */
body.loginBody {
	background-color: #EAEAEA;
	background-image: url(../art/loginPageBackground.gif);
	background-repeat: repeat-x;
	margin: 0;
}

/* Max height for the Study Logo image is about 112px, assuming a TOP position of 0px.
 * Max width is theoretically the width of the page. But those are extreme cases;
 * in practice, the logo should have a healthy amount of white space around it,
 */
.loginStudyLogo {
	position: absolute;
	left: 40px;
	top: 47px;
}

/* this is the "User Login" text
   it's given a max width because the dotted lines around it
   don't expand as text expands
*/
#loginTitle {
	position: absolute;
	top: 175px;
	left: 305px;
	width: 240px;
	font-weight: bold;
	font-size: 15px;
	font-family: helvetica, arial;
	text-align: center;
}

/* username/password boxes, enter button, etc */
#loginSection {
	position: absolute;
	left: 300px;
	margin-top: 190px;
	width: 600px;
}

.loginBox {
	margin-top: 20px;
	margin-right: 70px;
}

.loginUsername {
	text-align: right;
	padding-right: 5px;
}


/* these are the links to the right of the login box */
#linkSection {
	position: absolute;
	left: 626px;
	top: 191px;
	background-image: url('../img/login/button-side.gif');
	background-repeat: repeat-y;
}
#linkSectionRight {
	width: 100%;
	background-image: url('../img/login/button-side.gif');
	background-position: top right;
	background-repeat: repeat-y;
}
#linkSectionTop {
	width: 100%;
	background-image: url('../img/login/button-top.gif');
	background-position: top left;
	background-repeat: repeat-x;
}
#linkSectionBottom {
	width: 100%;
	background-image: url('../img/login/button-top.gif');
	background-position: bottom left;
	background-repeat: repeat-x;
}

.dividerLine {
	width: 100%;
	height: 1px;
	background-image: url('../img/login/button-top.gif');
	background-repeat: repeat-x;
}

.loginLink {
	padding: 2px 10px 2px 10px;
}

.loginLink a {
	font: bold 13px "Trebuchet MS", verdana, arial, sans-serif;
	color: black;
	text-decoration: none;
}

.loginLinkOff {
	color: #2D5D75;
}

.loginLinkOn {
	color: black;
}

.loginFooter {
	position: absolute;
	top: 375px;
	left: 370px;
	width: 500px;
	font-size: 10px;
	color: #515151;
}

.loginFooter a {
	font-size: 10px;
}

/* Presumably the "Powered by Outcome" logo shouldn't be included in studies
 * which don't have unique client branding (e.g., data.outcome.com, in those
 * cases, VISIBILITY should be set to HIDDEN.
 */
.loginPoweredBy {
	position: absolute;
	top: 335px;
	left: 750px;
	visibility: visible;
}

.loginInput, .loginSubmit {
	text-align: right;
	padding-right: 15px;
}

.loginInput input {
	width: 150px;
}

#loginNotifications {
	position: absolute;
	left: 20px;
	top: 330px;
	width: 275px;
	background: #9db7c4;
	padding: 5px;
}

#languageSelection {
	position: absolute;
	top: 120px;
	left: 626px;
}

.locales {
	display: inline;
}

.locales a,
.locales a:hover {
	text-decoration: none;
}

body.loginPopupBody {
	background-color: #FFFFFF;
	background-image: url(../art/help-background-stripe.gif);
	background-repeat: repeat-y;
	padding-left: 50px;
	padding-right: 20px;
}

/* END OF LOGIN PAGE STYLES */

.popup {
	position: absolute;
	visibility: hidden;
	width: 200px;
	border-left: 1px solid black;
	border-top: 1px solid black;
	border-bottom: 3px solid black;
	border-right: 3px solid black;
	padding: 3px;
	z-index: 10;
	background-color: #FFCCCC;
}

/* These "split screens" are used to mimic the look of
 * frames in the admin interface.
 */
#sidebar {
	float: left;
	overflow-y: scroll;
	background-color: #e5e5e5;
}

#horizSplitScreen #stdContent {
/*	The main content is loaded in an iframe within stdContent,
	so hide the default scrollbar (use iframe scrollbars only). */
	overflow-y: hidden;
}

#horizSplitScreen #stdContentPadding {
	margin: 0;
}

#horizSplitScreen #mainFrame {
	float: left;
}

div.subreportWindow {
	background-color: #DDDDEE;
	position: absolute;
	top: 136px;
	left: 5%;
	width: 660px;
	height:260px;
	overflow: hidden;
	border: 1px solid black;
	z-index: 10;
}

div.subreportData{
	overflow: auto;
	position: absolute;
	width:	650px;
	top:18px;
	height:240px;
}	
div.subreportTitleBar {
	background-color: #AAAADD;
	height: 18px;

	border: 				1px solid black;
	z-index: 10;
}
div.subreportTitleText {

	text-align:center;
	
	z-index: 10;
}
div.subreportTitleClose {
	position:absolute;
	left:615px;
	top:2px;
	background-color: #DDDDDD;
	width:15px;
	text-align:center;
	border: 1px solid black;
	z-index: 10;
}

/* IE has crappy select boxes -- this is used in the DAT
 */
.ctrDropDown{
    width: 12em;
}
.ctrDropDownClick{
    width: 12em;
}

/* Admin Interface */

.listHeader {
	font-size: 1em;
}

.formHeading {
	font-weight: bold;
	padding: .5em 0 .5em 0;
}

#submitRow {
	padding: .5em 0 1em 0;
}

#userEdit #submitRow {
	text-align: center;
}

table.recordListing td {
	padding: .3em .5em .3em .5em;
	border-color: #ccc;
	border-style: solid;
	border-width: 0 0 1px 0;
}

.recordListing .listHeader {
	text-align: center;
}

.recordListing .title {
	color: #515151;
	font-weight: bold;
}

.recordListing .content {
	background-color: #fff;
	color: #515151;
}

/* Site Admin Search */

#siteadminSearch .title {
	width: 10em;
}

#siteadminSearch #paging {
	padding: 1em 0 1em 0;
}

#siteadminSearch #paging table {
	border: 0;
}

/* Navigation Frame */

#siteadmin_nav {
	background: #9db7c4 url(/img/logo.gif) no-repeat top right;
}

#siteadmin_nav #content {
	height: 40px;
}

#siteadmin_nav a {
	text-decoration: none;
	color: #fff;
	font-size: 1.1em;
}

table#userInfo {
	float: left;
	width: 35em;
}

#siteadmin_nav .uname, #siteadmin_nav .label {
	background-color: #3D7998;
	padding: .3em 1em .4em 1em;
	font-size: 1em;
}

#siteadmin_nav .label {
	font-weight: bold;
}

#siteadmin_nav #tabs {
	position: absolute;
	bottom: 3px;
	left: 10px;
}

#siteadmin_nav #tabs span {
	background-color: #000;
	padding: .3em 2em .3em 2em;
}