/********************************************************** General Format Defaults ********************************************************************/

html{
  box-sizing: border-box;
}

*,
*:before,
*:after{
  box-sizing: inherit;
}

*{
	margin: 0px; 
	padding: 0px;
}

table {
	border-collapse:collapse;
}
/*Base Styles*/
img{
     border:none;
     max-width:100%;
     height:auto;
}

body {
	background: #ffffff;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: inherit;
}

.Bold {
	font-weight: bold;
}

.Center {
	text-align: center;
}

.Fixed50 {
	width: 50px;
}
.Fixed100 {
	width: 100px;
}
.Fixed200 {
	width: 200px;
}
.Fixed300 {
	width: 300px;
}

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

.InlineBlock {
	display: inline-block;
}

ul.ListHorizontal {list-style-type: none; margin: 0px; padding: 0px;}
ul.ListHorizontal li {display: inline-block;}
ul.ListNoType {
	list-style-type: none;
}

.NoWrap {
	white-space: nowrap;
}

.Padded {
	padding: 20px;
}
.PaddedLeft {
	padding-left: 40px;
}
.PaddedTop {
	padding-top: 20px;
}

.Right {
	text-align: right;
}

.Table {
	display: table;
	margin: 10px 0;
}
.TableRow {
	display: table-row;
	margin: 0 0 5px;
}
.TableCell {
	display: table-cell;
}
.TableHeader {
	font-weight: bold;
	text-align: center;
}
	.TableHeader .TableCell {padding: 0 0 10px;}

.ToggleBox {
	table-layout:auto;
	width: 100%;
}
.ToggleBox select {
	min-height: 200px;
	width: 100%;
}
.ToggleBox select > option {
	font-size: 16px;
}
.ToggleBox .VerticalMiddle {
	padding: 10px;
	width: 10%;
	text-align: center;
}

.VerticalMiddle {
	vertical-align: middle;
}
.VerticalTop {
	vertical-align: top;
}

.quarter {width: 25%;}
.third {width: 33%;}
.half {width: 50%;}
.two-thirds {width: 66%;}
.three-quarters {width: 75%;}

input, select, option, textarea{
	font-family:inherit;
	padding: 5px;
	margin: 3px;
}

p{
	margin:10px 0;
}

/*Tables*/
table.striped, div.Table.striped {margin: 15px 0;}
table.striped thead th,
div.Table.striped .TableHeader {
	background-color: #333;
	color: #fff;
	padding: 4px 10px;
}
table.striped tbody td,
div.Table.striped .TableCell {
	padding: 6px 4px;
}
table.striped thead th,
table.striped tbody tr:last-child,
div.Table.striped .TableHeader,
div.Table.striped .TableRow:last-child .TableCell {
    border-bottom: 1px solid #d6d6d6; /* non-RGBA fallback */
    border-bottom: 1px solid rgba(0,0,0,.1);
}

table.striped tbody tr:last-child th,
table.striped tbody tr:last-child td {
    border-bottom: 0;
}

table.striped tbody tr:nth-child(odd) td,
table.striped tbody tr:nth-child(odd) th,
div.Table.striped .TableRow:nth-child(even) .TableCell {
    background-color: #eeeeee; /* non-RGBA fallback  */
    background-color: rgba(0,0,0,.04);
}

table.striped > thead th.BorderLeft {
	border-left: 1px solid #eeeeee;
}
table.striped > thead th.BorderRight {
	border-right: 1px solid #eeeeee;
}

/*Links*/

a {color:#007379;}
a:hover {color: #5c42a1; text-decoration: none;}


.btn, 
input[type=submit] {
	display:inline-block;
	transition:background-color 0.2s ease, color 0.2s ease;
	text-transform: uppercase;
	font-weight: bold;
	border: 2px solid #fff;
	padding: 10px 40px;
	background: #007379;
	color: #fff;
	letter-spacing: 0.1em;
	text-decoration: none;
	font-size: inherit;
}
.btn:hover, 
input[type=submit]:hover {
	background: #5c42a1;
	color: #fff;
}

.action-btn {
	display:inline-block;
	transition:background-color 0.2s ease, color 0.2s ease;
	text-transform: uppercase;
	font-weight: bold;
	border: 2px solid #fff;
	padding: 6px 10px;
	background: #3590db;
	color: #fff;
	letter-spacing: 0.1em;
	text-decoration: none;
	font-size: inherit;
}
.action-btn:hover {
	background: #5c42a1;
	color: #fff;
}


/*Lists*/

ul {
  text-align: left;
  list-style-type: disc;
  list-style-position: outside;
  margin: 10px 0 10px 35px;
}

ol {
  text-align: left;
  list-style-type: decimal;
  list-style-position: outside;
  margin: 10px 0 10px 25px;
}

li {
  margin-bottom: 3px;

}

/* Nested Lists*/
ul ul, ul ul ul, ol ol, ol ol ol {
  text-align: left;
  list-style-type: square;
  list-style-position: outside;
  margin: 5px 5px 5px 20px;
}

ul ul li, ul ul ul li, ul ol li, ul ol ol li
{
  margin-bottom: 3px;

}

/* Headings */
h1 {
	font-weight: bold;
	margin: 5px 0 15px;
	color: #333333;
}
h2 {
	font-weight: bold;
	margin: 10px 0 15px;
	color: #002060;
	position: relative;
	padding-bottom: 5px;
}
	h2:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 300px;
	border-bottom: 2px solid #002060;
}
h3 {
	font-weight: normal;
	margin: 30px 0 12px;
	color: white;
}
h4 {
	font-weight: bold;
	margin: 25px 0 12px;
	color: white;
}
h5 {
	font-weight: bold;
	margin: 25px 0 12px;
	color: white;
}
h6 {
	font-weight: bold;
	margin: 0 10px;
	color: #fff;
	font-size: 100%;
}

/*Footer*/
.footer {
	font-size: 0.85em;
	text-align: center;
	margin: 20px 0;
}

/***************************************************************** Forms ********************************************************************/
/* ------------------- Validation ---------------------*/
input.alert,
select.alert,
textarea.alert {
	color: red;
	border: 1px solid red !important;
}
label.alert {
	color: red;
	font-size: 14px;
}

input[type=button],
input[type=submit],
input[type=reset] {
	cursor: pointer;
}

a[disabled],
input[type=reset][disabled],
input[type=submit][disabled],
input[type=button][disabled] {
	opacity: .6;
	pointer-events: none;
}

/* ------------ Standard Form Elements ---------------*/


input:focus {
	border: 1px solid #007379;
	box-shadow: inset 0px 0px 3px #007379;
}
label:not(.alert) {
	padding: 0 5px 0 0;
}
textarea {
	min-height: 80px;
	font-size: 14px;
}
textarea:not(.AutoWidth) {
	max-width: 500px;
}

form .TableCell {
	padding-bottom: 10px;
}

.DatePicker + i,
.TimePicker + i {
	margin: 10px 0 0 -26px;
}

.FilterFormContainer {
	background-color: #efefef;
	border: 2px solid #5A4298;
	width: 980px;
}

/**Checkboxes**/
.profile input[type=checkbox] + label.NoText {
	width: 30px;
	height: 30px;
}
.profile input[type=checkbox], 
.Enabler input[type=checkbox] {display: none;}

.profile input[type=checkbox] + label, 
.Enabler input[type=checkbox] + label {
	padding: 0px;
}
.profile input[type=checkbox] + label:after, 
.Enabler input[type=checkbox] + label:after {
	content: '';
	display: block;
	margin: 3px;
}
.profile input[type=checkbox] + label span, 
.Enabler input[type=checkbox] + label span {
	display: inline-block;
	width: 30px;
	height: 30px;
	background: url('../sprite-check.png') -32px top no-repeat;
	vertical-align: middle;
	cursor: pointer;
	margin: 0 5px 0 7px;
}
.profile input[type=checkbox]:checked + label span, 
.Enabler input[type=checkbox]:checked + label span {
	background: url('../sprite-check.png') left top no-repeat;
}

/**Radio Buttons**/
div.radio:not(.noLabel) > label {
  min-width: 200px;
  border-radius: 3px;
  border: 1px solid #D1D3D4;
}
div.radio.noLabel > label {
	width: 42px;
	padding: 18px;
}

/* hide input */
div.radio > input:empty {
	margin-left: -9999px;
	position: absolute;
}

/* style label */
div.radio > input:empty ~ label {
	position: relative;
	float: left;
	line-height: 1.8em;
	text-indent: 3.25em;
	cursor: pointer;
	margin: 3px 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

div.radio > input:empty ~ label:before {
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	content: '';
	width: 2.5em;
	background: #D1D3D4;
	border-radius: 3px 0 0 3px;
}

/* toggle hover */
div.radio > input:hover:not(:checked) ~ label:before {
	content:'\2714';
	text-indent: .9em;
	color: #C2C2C2;
}

div.radio > input:hover:not(:checked) ~ label {
	color: #888;
}

/* toggle on */
div.radio > input:checked ~ label:before {
	content:'\2714';
	text-indent: .9em;
	color: #8bdbdd;
	background-color: #007379;
}

div.radio > input:checked ~ label {
	color: #777;
}

/* radio focus */
div.radio > input:focus ~ label:before {
	box-shadow: 0 0 0 3px #999;
}


/* -------------------  LogIn Formatting -------------------- */

#TATEHALogInBody {background-color: #fff;}

#TATEHALogInHeader,
#TATEHALogIn {min-height: 600px;}

/*** Login Block ***/

#TATEHALogIn {color: #fff;	position: relative;}
#TATEHALogIn .login {
	max-width: 400px;
	margin: 0 auto 0;
	padding: 0px 30px 30px;
	border: #ffffff solid 1px;
	border-radius: 3px;
	background-color: #007379;
	text-align: center;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
}
#TATEHALogIn .logo {
	width: 230px;
	height: auto;
	display: block;
	margin: -50px auto 25px;
	border-radius: 5px;
	border: 5px solid #007379;
}
#TATEHALogIn legend {
	font-weight: bold;
	margin: 0 auto 5px;
}
#TATEHALogIn .btn {
	background: #004449;
}
#TATEHALogIn a {
	color: #fff;
	font-size: 0.875em;
}

#TATEHALoginUserName, #TATEHALoginPassword {
	width: 90%;
	height: 10%;
	font-weight: bold;
	border: 5px;
	border-color: #91723F;
}
#TATEHALoginOKButton, #TATEHALoginCancelButton {
	width: 30%;
	height: 5%;
	font-size: medium;
	color: whitesmoke;
	font-weight: bold;
	padding: 5%;
	margin: 10%;
	background: #91723F;
	border: 1px;
	border-color: #91723F;
	float: left;
}

/*** Login Description ***/

#TATEHALogInHeader {
	padding: 7%;
	background-color: whitesmoke;
	text-align:center;
	text-shadow: 0px 1px 1px #fff;
}
.LogInHdr1 {
	font-weight: bold;
	color: #007379;
	font-size: 3.0em; /*48pt*/
}
.LogInHdr2 {
	font-weight: bold;
	font-size: 1.875em; /*30pt*/
}
#TATEHALogInProductDescription {
	line-height: 1.5em;
}


/**** INTERNAL PAGE FORMATTING ****/

/** Header **/
.Header .logo {
	width: 230px;
	height: auto;
	display: block;
	border-radius: 5px;
	border: 5px solid #007379;
	float: left;
	margin: 0 10px;
}

/** Navigation **/
.barTop {
	background:  #007379;
	min-height: 40px;
}
.Navbar {
	list-style-type: none;
	margin: 0; padding: 0;
}
.Navbar li {
	display: inline-block;
	margin: 0; padding: 0;
	line-height: 40px;
	text-transform: uppercase;
}
.Navbar li a {
	color: #fff;
	text-decoration: none;
	padding: 10px 20px;
	font-weight: bold;
	transition: background 250ms ease;
}

.Navbar li a:hover {
	background: #5A4298;
}

.Navbar a.active {
	background: #5A4298;
}

.barBottom {
	background: #5A4298;
	min-height: 40px;
	color: #fff;
	font-size: 14px;
	line-height: 40px;
}
.SubNav {
	margin: 0; padding: 0;
	list-style-type: none;
}
.SubNav li {
	margin: 0;
	display: inline-block;
}
ul.SubNav > li > a {
	color: #fff;
	text-decoration: none;
	padding: 11px 20px;
	font-weight: bold;
	transition: background 250ms ease;
}
.SubNav li a:hover {
	background: #4D8E96
}

.SubNav a.active {
	background: #4D8E96
}

/** Content **/
.container {
	display: table;
	width: 100%;
	table-layout: fixed;
}
.sidebar, .content {
	display: table-cell;
	vertical-align: top;
}

.sidebar {
	width: 250px;
	text-align: center;
	padding: 20px 10px;
}
	.sidebarMobile {display: none;}
.content {
	padding: 20px;
}

/**** Accordions ****/
.Accordion > h6 {
	background-color: #5A4298;
	padding: 8px;
	cursor: pointer;
	border-bottom: 2px solid #372272;
	transition: background 250ms ease;
}
.Accordion > h6:hover {
	background-color: #372272;
}
.Accordion > h6 > i {
	float: right;
	margin-top: -6px;
}
.Accordion > .AccordionContent {
	display: none;
}

/**** User Configuration ****/
.UserConfig .MainCell {
	vertical-align: top;
}
.UserConfig .TableCell .Table .TableCell {
	vertical-align: middle;
}

/**** Devices ****/
.Devices .TableCell {
	vertical-align: middle;
	padding-bottom: 5px;
}


/**** Messages ***
.Messages .TableCell {
	vertical-align: middle;
}
.Messages select {
	padding: 10px;
}*/

/**** Highlight ****/
.highlight {
	border-radius: 3px;
	border: 2px solid #ffe500;
	background-color: #ffff5e;
	padding: 10px;
	text-shadow: 0px 1px 1px #ffffbc;
	max-width: 325px;
}

/**** Family Status ****/
.highlight table {	
	width: 300px;
	max-width: 100%;
}
.highlight table td {padding: 5px; border-bottom: 1px solid #ffe500}

/**** Help ****/
span.HelpIcon,
span.HelpIcon > i {
	pointer: pointer;
}

label.HelpLabel {
	position: absolute;
	display: none;
}

label.HelpLabel {
  position: relative;
  display: inline;
  background: #fcfcfc;
  border-radius: 3px;
  border: 1px solid #efefef;
  box-shadow: 0px 1px 3px #c6c6c6;
}
label.HelpLabel span {
  position: absolute;
  width:140px;
  color: #FFFFFF;
  background: #7A1CB0;
  height: 51px;
  line-height: 51px;
  text-align: center;
  visibility: hidden;
  border-radius: 3px;
}
label.HelpLabel span:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
  border-top: 8px solid #7A1CB0;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
label.HelpLabel.active span {
  visibility: visible;
  opacity: 0.8;
  bottom: 30px;
  left: 50%;
  margin-left: -76px;
  z-index: 999;
}

/* This is generated by the Mobiscroll plugin. Not sure why, but hiding it. */
.dw-hidden {
	display: none;
}

.ProfilePicture {
	border-radius: 50%;
	height: 200px;
	width: 200px;
}

.ProfilePictureFile {
	opacity: 0;
}