/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html {
	font-size: 1em;
	line-height: 1.4;
}
.showat320,
.showat480,
.showat768
{
    display: none;
}
/*
 * A better looking default horizontal rule
 */

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
	resize: vertical;
}

/* GENERAL */
body,html{
	background-image: none;
	color: #000000;
	margin:0px;
	padding:0px;
}
section {
	background-color: #FFFFFF;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}
ul, footer ul {
	list-style: none;
	padding: 0;
}
.note-editable ul li, #profile_info_container ul li{
	list-style:disc;
	margin-left: 10px;
}
#profile_info_container font, #profile_info_container span, .queue_info_section span, .queue_info_section font, .queue_info_section b{
	background-color: transparent !important;
}
.timeacle-form {
	background-color: #393939;
	color: #9C9C9C;
	display: none;
	padding: 15px 0 10px 10px;
	position: absolute;
	z-index: 300;
}
	.timeacle-form .form-inputs, .timeacle-form-inline .form-inputs {
		display: inline-block;
		margin-bottom: 10px;
		position: relative;
	}
	.timeacle-form-inline .form-inputs {
		width: 310px;
	}
	.timeacle-form .form-inputs.left, .timeacle-form-inline .form-inputs.left {
		margin-right: 10px;
	}
	.timeacle-form input, .timeacle-form-inline input {
		background-color: #292929;
		border: 0;
		color: #FFFFFF;
		font-size: 16px;
		height: 20px;
		padding: 10px;
		width: 290px;
	}
	.timeacle-form select, .timeacle-form-inline select {
		background-color: #292929;
		height: 40px;
		width: 310px;
	}
	.timeacle-form .customStyleSelectBox {
		background-color: #292929;
		font-family: Verdana,Arial,sans-serif;
		font-size: 16px;
		height: 20px;
		padding: 10px;
	}
	.timeacle-form .customStyleSelectBoxArrow {
		background-image: url("/images/index/arrow.png");
		background-position: -22px 7px;
		background-repeat: no-repeat;
	}
	.timeacle-form p, .timeacle-form-inline p {
		margin-right: 10px;
	}
	.timeacle-form .tac-text, .timeacle-form-inline .tac-text {
		font-size: 11px;
	}
	.timeacle-form .errors, .timeacle-form-inline .errors {
		background: url('/images/icons/form-error.png') no-repeat center center;
		height: 40px;
		margin: 0;
		position: absolute;
		right: 0;
		top: 0;
		width: 30px;
		z-index: 1;
	}
	.timeacle-form .tac-checkbox .errors, .timeacle-form-inline .tac-checkbox .errors {
		left: 422px;
		top: -15px;
	}
	.timeacle-form .tac-checkbox .errors li, .timeacle-form-inline .tac-checkbox .errors li {
		margin-left: -422px;
		width: 430px;
	}
	.timeacle-form span.form-inputs .errors, .timeacle-form-inline span.form-inputs .errors {
		top: -15px;
	}
	.timeacle-form .errors li, .timeacle-form-inline .errors li {
		background-color: #ec0000;
		color: #FFFFFF;
		display: none;
		margin-left: -279px;
		margin-top: 40px;
		padding: 10px;
		width: 290px;
		z-index: 50;
	}
	.timeacle-form .placeholder, .timeacle-form-inline .placeholder {
		color: #AAAAAA;
	}
	.timeacle-form .red-button {
		font-size: 22px;
		line-height: 20px;
		margin-right: 10px;
		padding: 9px 20px;
	}
	.timeacle-form .red-button .arrow {
		margin-top: 4px;
		width: 6px;
	}
	.timeacle-form .close {
	    cursor: pointer;
	    font-size: 20px;
	    position: absolute;
		right: 5px;
	    top: 0px;
	}
	.timeacle-form button.nodisplay {
		display: none;
	}
.checkbox, .radio {
	display: inline-block;
	height: 15px;
	margin-bottom: 10px;
	margin-top: 10px;
	min-height: 20px;
	padding: 0 5px 0 0;
	width: 15px;
	vertical-align: middle;
}
.radio {
	background: url("/images/index/checkbox.png") no-repeat;
}
/* The Material outline/checked pair, drawn as a two-frame sprite exactly like
   the png it replaces: 40x20, unchecked left and checked right. style_formelements()
   and toggle_checkbox() switch between them with background-position, so keeping
   that geometry means no javascript changes. The box model is untouched too -
   the 15px width plus 5px right padding makes a 20px padding box, which is the
   area background-position measures against and the frame that shows. */
.checkbox {
	background: url("/images/icons/checkbox.svg") no-repeat;
}
/* ...but not on the public site's dropdown panels. #register, #login,
   #testaccount and #languages are .timeacle-form, a #393939 box, and the
   Material outline is drawn in #373736 - on that panel the box is the panel, so
   the checkbox reads as missing (the terms and conditions one in the
   registration form above all). They keep the sprite they were drawn against: a
   filled dark box with a red tick, same 40x20 two-frame layout, so the geometry
   and the background-position switch are unchanged. Every other dark surface
   that uses .checkbox already overrides it for the same reason - see
   "#dialog .checkbox" in screen.css and register-business/softwareselect.css. */
.timeacle-form .checkbox {
	background-image: url("/images/index/checkbox.png");
}

input, textarea, select.nostyle {
	background-color:#ECECEC;
	border: none;
	border-radius: 0;
	color: #000000;
	font-family:Verdana,Arial,sans-serif;
	font-size: 14px;
	padding: 7px;
}
select.nostyle {
	-moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
	background: url("/images/layout/droparrow_black.png") no-repeat right #E5E5E5;
	padding-right: 30px;
}
/**
 * hack for IE8 - IE11
 */
@media screen\0 {
	select.nostyle {
		padding-right: 5px;
	}
}
/**
 * custom slider checkboxes
 *
 * DESIGN_CHANGES_ADMIN/Switch_off.svg and Switch_on.svg: a flat 49x24 track (the svgs' 33x16 scaled 1.5x)
 * with a 24px white knob whose 3px ring matches the track - grey #c1c0bf when
 * off with the knob left, green #31c369 when on with it right. Replaces a white
 * track with a double box-shadow and a blue on-state.
 *
 * The track colour needs the .checked class yourtime.js' sliderCheckbox() puts
 * on the wrapper, since css cannot reach a parent from the input; the knob goes
 * off the input's own :checked state.
 */
.sliderCheckbox {
	box-sizing: border-box;
	background: #C1C0BF;
	border-radius: 12px;
	box-shadow: none;
	height: 24px;
	position: relative;
	transition: background 0.2s ease;
	-webkit-transition: background 0.2s ease;
	width: 49px;
}
.sliderCheckbox.checked {
	background: #31C369;
}
.sliderCheckbox label {
	box-sizing: border-box;
	background: #FFFFFF;
	border: 3px solid #C1C0BF;
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
	display: block;
	height: 24px;
	left: 0;
	position: absolute;
	top: 0;
	transition: left 0.2s ease, border-color 0.2s ease;
	-webkit-transition: left 0.2s ease, border-color 0.2s ease;
	width: 24px;
}
.sliderCheckbox input[type=checkbox] {
	visibility: hidden;
}
.sliderCheckbox input[type=checkbox]:checked + label {
	border-color: #31C369;
	left: 25px;
}
/* the js class lands a tick after the click, so colour the ring from both. */
.sliderCheckbox.checked label {
	border-color: #31C369;
}

.placeholder {
	color: #CCCCCC;
}
.blue-text {
	color: #279DE1;
	font-family: "timeacle-regular",Verdana,Arial,sans-serif;
	font-size: 30px;
}

.black-button, .blue-button, .red-button, .white-button, .transparent-button, .button_flat {
	border: none;
	color: #FFFFFF;
	display: inline-block;
	font-family: "timeacle-regular",Verdana,Arial,sans-serif;
	line-height: 28px;
	text-align: left;
}
	.black-button {
		background-color: #000000;
		font-size: 24px;
		padding: 8px 20px;
	}
	.blue-button {
		background-color: #279DE1;
		font-size: 20px;
		line-height: 22px;
		padding: 15px 8px 15px 10px;
	}
		.blue-button .arrow {
			margin-top: 5px;
		}
	.red-button {
		background-color: #E72C42;
		font-size: 24px;
		padding: 16px 20px;
	}
	.white-button {
		background-color: #FFFFFF;
		color: #000000;
		font-size: 16px;
		padding: 15px 20px;
		height: 50px;
		line-height: 24px;
	}
	.transparent-button {
		font-size: 24px;
		padding: 8px 20px;
	}
	.red-button.meta-button {
		font-family: "timeacle-light",Verdana,Arial,sans-serif;
		font-size: 28px;
		line-height: 24px;
		margin-top: 30px;
	}
	.red-button.meta-button .small {
		font-family: "timeacle-regular",Verdana,Arial,sans-serif;
	}
	.red-button.meta-button img {
		vertical-align: bottom;
	}
	.black-button .small, .blue-button .small, .red-button .small, .white-button .small {
		font-size: 16px;
	}
	.black-button.twoline, .red-button.twoline, .blue-button.twoline, .white-button.twoline, .transparent-button.twoline {
		line-height: 21px;
		padding: 8px 20px;
	}
	.transparent-button.twoline {
		padding-left: 0;
	}
		.black-button.twoline .arrow, .red-button.twoline .arrow, .blue-button.twoline .arrow, .white-button.twoline .arrow, {
			margin-top: 19px;
		}
		.black-button.twoline .arrow-down, .red-button.twoline .arrow-down, .blue-button.twoline .arrow-down, .white-button.twoline .arrow-down, .transparent-button.twoline .arrow-down,
		.black-button.twoline .arrow-up, .red-button.twoline .arrow-up, .blue-button.twoline .arrow-up, .white-button.twoline .arrow-up, .transparent-button.twoline .arrow-up {
			margin-top: 23px;
		}
.grey {
	filter: Alpha(opacity=50);
	font-size: 14px;
	opacity: 0.5;
}
.loader {
	display: block;
	margin: 30px auto;
}
.arrow {
	background-repeat: no-repeat;
	background-image: url('/images/index/arrow.png');
	display: inline-block;
	height: 13px;
	margin: 9px 0 0 10px;
	overflow: hidden;
	width: 6px;
}
.white-button .arrow {
	background-image: url('/images/index/arrow-black.png');
	background-position: 0 0;
	height: 13px;
}
.arrow-dark {
	background-image: url('/images/index/arrow-dark.png');
}
.arrow-left {
	background-position: -13px 0;
}
.arrow-down, .arrow-up {
	background-position: -26px 0;
	height:6px;
	width:13px;
}
.arrow-up {
	background-position: -44px 0;
}
.white-button .arrow-down, .white-button .arrow-up {
	background-position: 0 0;
	height: 9px;
	width: 14px;
}
.white-button.twoline .arrow {
	margin-top: 23px;
}
.left10 {
	margin-left: 10px;
}
.left50 {
	margin-left: 50px;
}
.top5 {
	margin-top: 5px;
}
.top10 {
	margin-top: 10px;
}
.top15 {
	margin-top: 15px;
}
.top20 {
	margin-top: 20px;
}
.top30 {
	margin-top: 30px;
}
.top35 {
	margin-top: 35px;
}
.top50 {
	margin-top: 50px;
}
.top100 {
	margin-top: 100px;
}
.top150 {
	margin-top: 150px;
}
.text16 {
	font-size: 16px;
}
.info-icon {
	display: inline-block;
	filter: Alpha(opacity=50);
	opacity: 0.5;
	position: relative;
}
	.info-icon img {
		vertical-align: sub;
	}
	h1 .info-icon img {
		vertical-align: unset;
	}
	.info-icon:hover {
		filter: Alpha(opacity=100);
		opacity: 1;
	}
	.info-icon .info-text {
		background-color: #A2A2A2;
		color: #FFFFFF;
		display: none;
		font-family: Tahoma, Verdana, Arial, sans-serif;
		font-size: 14px;
		left: 20px;
		letter-spacing: 0;
		width: 250px;
		padding: 14px;
		position: absolute;
		top: 0;
		z-index: 200;
	}

/* The bar that replaces the save bar once the form is stored. Inter where it is
   available - the face is loaded by customer.css, i.e. in the admin - and the
   legacy one everywhere else, which is what var()'s fallback list is for. */
#success-notice {
	background-color: #72B75E;
	bottom: 0;
	color: #FFFFFF;
	display: none;
	font-family: var(--ta-font, timeacle-thin,Tahoma,Verdana,Arial,sans-serif);
	font-size: 20px;
	letter-spacing: normal;
	height: 70px;
	left: 0;
	line-height: 70px;
	position: fixed;
	text-align: center;
	width: 100%;
	z-index: 1001;
}

#outershell{
	padding: 20px 0;
	min-height: 500px;
	min-width: 1080px;
	margin: 0 auto;
	width:100%;
}
article{
	margin: 0 auto;
	width:980px;
}
footer{
	min-height:200px;
	margin: 0 auto;
	width:100%;
	background-color: #F5F5F5;
}
footer h2 {
	opacity: 0.5;
}
#footer_logo_image{
	background-image: url("/images/index/footer_logo.png");
    background-position: top center;
    background-repeat: no-repeat;
    display: block;
    height: 35px;
    width: 133px;
}
#footer_logo_image:hover{
	background-image: url("/images/index/footer_logo_over.png");
}
#footer_logo{
	width: 250px;
	margin-top:30px;
}
#footer_logo a{
	filter: Alpha(opacity=100);
	opacity: 1;
}
#footer_logo p{
	filter: Alpha(opacity=50);
	font-size: 12px;
	opacity: 0.5;
}
footer div.left{
	margin:20px 20px 0 0;
	width:150px;
}
footer a {
	color: #000000;
	text-decoration: none;
}
footer a:hover, footer a:focus {
	color: #000000;
	text-decoration: underline;
}
footer a:focus {
	outline: thin dotted #333;
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}
footer div.left a {
	filter: Alpha(opacity=50);
	opacity: 0.5;
	display: block;
}
#footer article div{
	float:left;
}
footer div.left.social {
	padding-top: 16px;
	width: 115px;
	margin-right: 0;
}
footer div.social img {
	width: 45px;
}
footer div.social a {
	display: inline;
	margin-right: 10px;
}
.hidden {
	display: none !important;
	visibility: hidden;
}
.invisible {
	visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *	`contenteditable` attribute is included anywhere else in the document.
 *	Otherwise it causes space to appear at the top and bottom of elements
 *	that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *	`:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
	content: " "; /* 1 */
	display: table; /* 2 */
}

.clearfix:after {
	clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
	*zoom: 1;
}

/**
 * custom scrollbar layout
 */
.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCS-dark.mCSB_scrollTools_onDrag .mCSB_dragger_onDrag .mCSB_dragger_bar {
    background-color: #808080!important;
	border-radius: 0;
}
.mCSB_scrollTools .mCSB_draggerRail {
    display: none;
}

.cssarrow.down {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    margin-top: 3px;
}
.feedback-button, .feedback-button:focus {
    position: fixed;
    right: -4px;
    top: 50%;
    transform: translateY(-150%) rotate(270deg);
    background-color: #FFB901;
    padding: 8px 18px 12px;
    border-radius: 6px;
    font-size: 16px;
    text-decoration: none;
    color: #373736;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    transform-origin: right bottom;
    border: 1px solid #373736;
    z-index: 1002;
    line-height: inherit;
    font-family: Tahoma, Verdana, Arial, sans-serif;
}

.feedback-button:hover {
    background-color: #E0A100;
    color: #373736;
}