html, body { height: 100%; }

.left { float: left; }
.right { float: right; }

body { margin: 0; padding: 0; font: normal 0.7em/1.4em Arial, Helvetica, Georgia, sans-serif;  color: #000; }
div { margin: 0; padding: 0; }

a img { border: 0; }

#container { margin: 0 auto; width: 880px; }

#top-menu { padding: 20px 0px; height: 50px; }
#top-menu ul, #top-menu li { margin: 0; padding: 0; }
#top-menu li { list-style: none; display: inline; padding-right: 10px; }
#top-menu li a { font-weight: bold; color: #fff; font-size: 13px; text-decoration: none; padding: 5px 0px 7px 25px; }
#top-menu li a:hover, #top-menu li a.active { color: #000; }

/* Portal (home module) */
#portal .buttons {
    float: left;
}
#portal .information {
	float: right;
}
#portal .information {
	width: 428px;
}

#lower-menu { padding: 15px 8px; height: 80px; }
#lower-menu ul, #lower-menu li { margin: 0; padding: 1px 0; line-height: 80px; }
#lower-menu ul { height: 75px; width: 500px; float: left; }
#lower-menu li { list-style: none; display: inline; padding: 15px; }
#lower-menu li a { font-weight: bold; color: #3d5266; font-size: 1.18em; text-decoration: none; font-stretch: ultra-condensed; }
#lower-menu li a:hover { color: #fff; }
#lower-menu div a { float: right; display: block; line-height: 80px; width: 182px; text-decoration: none; }

#side-menu { width: 216px; }
#side-menu li a.active {color: #3d5266;}

#content {  }

#searchfield { font-weight:bold; color: black; width: 535px; }
#searchfield #searchbar { display: none; padding: 5px; }
#searchfield #searchresult { display: none; padding: 5px; }

div.box { 
	/* This class is not specified but cannot be removed in HTML due to div.box img */
}
div.overlayboxleft {
	width: 173px;
}
div.overlayboxright {
	width: 173px;
	padding-left: 24px;
}
	
div.box img { vertical-align: middle; }
div.left { float: left; }
div.right { float: right; }
div.half { width: 50%; }
div.fourty { width: 40%; }
div.leftpanel { width: 270px; }
div.sixty { width: 60%; }
div.full { width: 100%; }
div.twenty { width: 20%; }
div.eighty { width: 80%; }
div.seventy { width: 70%; }
div.thirty { width: 33%; }
div.flowable { width: auto; }
div.article { margin: 0; padding: 0; }
div.map { width: 535px; height: 533px; padding: 0; margin: 0; position: relative; }
div.pagination { text-align: center; }
div.pagination a { text-decoration: none; color: white; }
div.centerdiv { margin: 0 auto; }

span.lowerpart { height: 22px; background-color: #c00; }

div.month-select { 
    width: 206px; 
    height: 22px; 
}
div.date-select { 
    width: 206px; 
    height: 17px; 
}
div.month-select a, div.month-select span { display: block; float: left; width: 33px; text-decoration: none; font-weight: bold; color: #3d5266; text-align: center; }
div.date-select a, div.date-select span { display: block; float: left; width: 33px; text-decoration: none; font-weight: bold; color: #3d5266; text-align: center; }
div.month-select a { height: 22px; line-height: 20px; font-size: 14px; }
div.month-select div.month { display: block; float: left; width: 140px; text-align: center; line-height: 20px; color: #3d5266; font-weight: bold;}
div.date-select div.date { display: block; float: left; width: 140px; text-align: center; line-height: 17px; color: #3d5266; font-weight: bold;}
div#calendar { text-align: center; }

div.month-select .previous_month_spacer,
div.date-select .left_spacer {
	width: 33px;
}

div.zone { padding: 3px; }

div.spacer { clear: both; }

h1 { color: #fff; font-size: 1.5em; }
h2 { color: #fff; font-size: 1.3em; }
h3 { color: #fff; font-size: 1.2em; }
h4 { font-size: 1em; font-style: italic; }

a.overlayed { display: block; position: relative; width: 173px; height: 229px; text-decoration: none; font-weight: bold; }
a.overlayed div { display: block; position: absolute; left: 0; top: 0; width: 138px; height: 89px; padding: 112px 30px 0 5px; color: #000; }
a.overlayed div h2 { margin: 0; padding: 0; font-size: 1.7em; }
a.overlayed div p { margin: 10px 0 0 0; padding: 0; }
a.overlayed:hover div {  }

.dialog { margin: 0; }
.dialog h1 { margin: 5px 0 9px 0; }
.dialog h2 { font-size: 1.1em; }
.dialog h3 { font-size: 1em; color: #3d5266; margin: 20px 0 0 0; padding: 0; }
.dialog p { color: #eee; margin: 8px 0 2px 0; padding: 0; }
.dialog .article { padding: 8px 19px 4px 14px; }

.dialog .article ul {
	padding: 0px;
	margin: 0px;
}
.dialog .article ul li {
	color: #fff;
	list-style: none;
	padding: 5px 0px 9px 0px;
}

.dialog .article li a {
	font-weight: bold;
	color: #868688;
	text-decoration: none;
	margin-bottom: 20px;
	padding: 5px 0px 9px 28px;
}
.dialog .article ul li a:hover {
	color: #3d5266;
	text-decoration: none;
}
.dialog table { width: 100%; }

table.event-table { border-collapse: collapse; }
table.event-table td { font-weight: bold; }
table.event-table tr.even {  }
table.event-table td a { text-decoration: none; color: #28556f; }
table.event-table td a.alarm { color: #f00; }

table.list { padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width: 535px;}
table.list td {font-family: Arial, Helvetica, sans-serif; color:#28556f; font-weight: bold; font-size: 11px; height: 33px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}
table.list td.lalign { text-align: left; }
table.list p { font-size: 16px;}
table.list input { border-left-color: transparent; border-bottom-color: transparent; border-top-width: 2px; border-right-width: 2px; font-family: Arial, Helvetica, sans-serif; color:#28556f; font-weight: bold; font-size: 11px; }
table.list select { font-family: Arial, Helvetica, sans-serif; color:#28556f; font-weight: bold; font-size: 11px; }

table thead th { text-transform: uppercase; color: #3d5266; text-align: left; padding: 0 2px; }
table tfoot th { color: #3d5266; }
table tbody td { color: #3d5266; }

table.compacted { width: auto; }
table.statuslist { width: 236px; }
table.statuslist td { color: #fff; padding: 0 3px; font-weight: bold; }
table.statuslist td.label { font-weight: normal; }
table.statuslist { border-bottom: solid #fff 1px; margin: 5px 0 5px 0; }
tr.prio td { color: #f00; font-weight: bold; }

.blue-icon th.icon { width: 28px; }
.green-icon th.icon { width: 28px; }
.yellow-icon th.icon { width: 28px; }
.purple-icon th.icon { width: 28px; }
.red-icon th.icon { width: 28px; }
.orange-icon th.icon { width: 28px; }
.pink-icon th.icon { width: 28px; }

table.addresslist { width: 535px; position: relative; }
table.addresslist tr.addresslist_head { text-transform: uppercase; color: #3d5266; height: 20px; }
table.addresslist td { font-weight: bold; padding: 1px 3px; }
table.addresslist thead th { background: none; }
table.calendar th, table.calendar td { line-height: 22px; width: 22px; }
table.calendar th { color: #fff; text-align: center; text-transform: none; }
table.calendar td { color: #bbb; font-weight: bold; text-align: center; }
table.calendar td a:hover { background-color: #fff; }
table.calendar td.active { border: solid #c00 1px; }
table.calendar td.active a { width: 21px; height: 21px; line-height: 21px; }
table.calendar td a { color: #000; text-decoration: none; display: block; }
table.calendar td.disabled a { color: #777; text-decoration: none; display: block; }
table.calendar td.selected a, table.calendar td.disabledselected a {color: #fff; background-color: #3d5266;}

table.calendar { margin: 0 auto; }

/**
 * Dark tables
 * @todo	Try to remove 'dark' as class name eventually.
 */
table.calendar.dark th {color: #000; }
table.calendar.dark td a:hover {color: #fff; background-color: #3d5266; }
table.calendar.dark td.disabled a { color: #777; text-decoration: none; display: block; }
table.calendar.dark td.disabled a:hover { color: #fff; text-decoration: none; display: block; }
table.calendar.dark td.selected, table.calendar td.disabledselected  {color: #fff; background-color: #3d5266;}
table.calendar.dark td.selected a, table.calendar td.disabledselected a  {color: #fff;}
table.calendar.dark td.noclick { color: #CCC;}

table.calendar td a { color: #3d5266; text-decoration: none; display: block; }

/**
 * Route History
 */
div.route_history_calendar_container {
	width: 206px;
}

/**
 * Device report
 */
div.device_report_date_selection_container {
	overflow: auto;
	padding: 5px 15px 15px 15px;
}
div.device_report_date_selection_container table.calendar th {
	color: #000;
}
div.calendar_container.startdate {
	width: 206px;
	float: left;
}
div.calendar_container.enddate {
	width: 206px;
	float: right;
}

.selectbar { width: 535px; height: 22px; margin: 0 0 5px 0px; }
.selectbar h3 { line-height: 18px; color: #3d5266; font-size: 11px; margin: 0; padding-left: 10px; }
.selectbar div { height: 27px; }

.ppb { clear: both; float: left; margin: 0px 0px 3px 0; font-size: 1em; width: 100%;}
form div { clear: both; float: left; margin: 0px 0px 3px 0; line-height: 20px; width: 90%; padding: 0;}

label {
	display: inline-block; 
	margin: 0 4px; 
	width: 120px; 
}

label.label_short { width: 75px; } 
label.label_medium { width: 120px; } 
form input, form select, select { font-size: 11px; padding: 1px; }
form input .button { font-family: Arial, Helvetica, sans-serif; height: 22px; font-size: 11px; line-height: 22px; }

div.togglebox { padding-bottom: 2px; padding-left: 0px; margin-bottom: 2px; color: #555; }
div.togglebox form { margin: 0; padding-bottom: 5px; } /* Clear the margin to reset it for every browser and evade troubles with IE7. */
div.togglebox h1 { display: block; margin: 0; padding: 4px 0 0 4px; width: 530px; height: 23px; color: #3d5266; cursor: pointer; }
div.togglebox span { display: none; padding: 0 2px; margin: 0; width: 530px; }
div.togglebox.big span { display: none; padding: 0 2px; margin: 0; width: 530px; height: 473px; }
div.togglebox span p { padding: 2px; margin: 0px; color: #555; font-size: 11px; line-height: 11px; }
div.togglebox input, div.togglebox select, div.togglebox label { color: #555; }
div.togglebox label.fixed { width: 160px; }

/* Settings: toggleboxes: */
div.togglebox h1.uncollapsed {
	background: url("../images/background/controlpanel-3part-upper.jpg"); 
}
.togglebox div.uncollapsed {
	display: block;
}
.togglebox .uncollapsed {
	display: block;	
}

div.helpbox h1 { display: block; }
div.helpbox span { display: none; }
div.helpbox .plussign { float: left; color: #4b6073; width: 10px; }
div.helpbox h2 { cursor: pointer; }
div.helpbox li { color: #ffffff; }
div.helpbox, div.helpbox p { color: #ffffff; }

.button {  
	display: inline-block;
	height: 22px; 
	color: #3d5266;
	text-decoration: none; 
	font-weight: bold; 
	line-height: 22px; 
	text-align: center; 
	cursor: pointer; 
	font-size: 11px; 
}

.selectButton { display: block; width: 85px; height: 22px; clear: both; color: #3d5266; text-decoration: none; font-weight: bold; line-height: 22px; text-align: center; font-size: 11px; font-weight: bold; }
.xsmall { width: 53px; }
.small { width: 85px; }
.medium { width: 97px; }
.large { width: 206px; }
.rfloat { float: right; clear: none; }

div.togglebox a.button { display: block; padding-left: 3px; padding-bottom: 12px; margin: 4px; width: 155px; height: 10px; clear: both; color: #3d5266; text-decoration: none; font-weight: bold; text-align: left; }

.ppbmain { width: 536px; height: 462px; margin: 0; }
.ppbmain p { font-family: Arial, Helvetica, sans-serif; color:#8f9093; font-size: 13px; font-weight: bold; padding-left: 5px; padding-top:395px;}

div.buttonbox { padding: 5px 10px; width: 515px; height: 96px; clear: both; }
div.buttonbox input { 
	margin-right: 5px; 
}
div.buttonbox h2 { float: left; color: #000; padding: 0; margin: 4px; }
div.buttonbox div.buttons { float: right; text-align: right; width: auto; }
div.buttonbox div.buttons input, div.buttonbox div.buttons a { float: left; clear: none; }

input.button { margin: 0; line-height: 22px; border: 0; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 11px; }

table.whited { width: 500px; }
table.whited td { color: #fff; }

span.msve-icon { font-size: 11px; display: block; height: 28px; width: 23px; padding: 0; margin: 0; line-height: 18px; text-align: center; color: #fff; font-weight: bold; }

div.break { height: 20px; width: 50px;}

.nav a.left { float: left; }
.nav a.right { float: right; }
.nav { height: 30px; clear: both; }

.label_guardian { color: #3d5266; margin: 0 0px; font-weight: bold; }
.description_guardian { color: #777777; margin: 0 0px; font-size: 11px; font-weight: bold; height: 26px; } /* Made specific to reduce impact */

table td { vertical-align: top; }

div.togglebox h1 { background: url(../../shared/images/settings/settings-togglebox-disabled.gif); }
div.togglebox span { background: url(../../shared/images/background/controlpanel-3part-upper.jpg) no-repeat; background-position: 0px -27px; }
div.togglebox span.lowerpart { background: url(../../shared/images/background/controlpanel-3part-lower.jpg) no-repeat; height: 22px; }

tr.alarm td, tr.alarm td a {
	color: #f00;
}

.faqtext p {
	font-size: 13px;
	color: #000;
}

.togglebutton {
	background-image: url(../media/buttons/toggle-button-empty.gif);
	background-repeat: repeat;
	display: block;
	padding-left: 4px;
	padding-bottom: 12px;
	margin: 4px;
	text-align: left;
	width: 155px;
	height: 10px;
	clear: both;
}
.togglebutton {
	text-decoration: none;
	color: #3d5266;
	line-height: 21px;
	font-weight: bold;
	font-size: 10px;
}
/* Event table */
table.event-table thead th { padding-left: 1px; }

/* Unitialized handsets */
table.unitialised-handset-table thead th { padding-left: 1px; }
/* Right panel content */
.rightpanelcontent, .rightpanelcontent h1, .rightpanelcontent h2, .rightpanelcontent h3 { 
	color: #3b4d61; margin: 0; 
}
.rightpanelcontent a {
	color: #3b4d61;
	text-decoration: none;
	font-weight: bold;
}
.rightpanelcontent a:hover {
	color: #506b88;
}

/* Contactform */
form.contactform fieldset {
	border: none;
	margin: 3px 0 0 0;
	padding: 0;
}
form.contactform legend {
	padding-left: 0;
	font-weight: bold;
}
form.contactform ol {
	padding: 0; margin: 0;
}
form.contactform ol li {
	list-style-type: none;
	list-style: none;
	margin: 0;
	padding-bottom: 4px;
}
form.contactform label {
	padding: 0;
	padding-top: 2px;
	margin: 0;
}
form.contactform textarea {
	width: 490px;	
	height: 100px;
}
form.contactform .button {
	float: none;
	clear: none;
	height: 22px;
	line-height: 22px;
}

/* Messagelist */
.messagelist h3 {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #ffffff;
}

/* Form table */
table.form-table td {
	color: #3d5266;
	font-weight: bold;
}
table.form-table td.description_guardian {
	color: #777777;
}

.contentblock { width: 535px; }
.contentfull { width: 100%; }

/* Flowable panels */
.fp-upper {
	background: url(../images/background/controlpanel-3part-upper.jpg) no-repeat; 
	width: 505px; 
	padding: 15px 15px 0px 15px;
}
.fp-upper-short {
	background: url(../images/background/controlpanel-3part-upper-short.jpg) no-repeat; 
	width: 505px; 
	padding: 15px 15px 0px 15px;
}
.fp-center {
	background: url(../images/background/controlpanel-3part-middle.jpg) repeat-y;
	width: 505px;
	padding: 0 15px;
}
.fp-bottom {
	background: url(../images/background/controlpanel-3part-lower.jpg);
	width: 505px;
	padding: 0 15px;
}

/* Activation */
.activation p {
	margin: 0;
	padding: 0;
	padding-bottom: 12px;
}

.activation h2 { 
	color: #3d5266; 
	font-size: 12px;
}

.activation p { font-weight: bold; color: #333; }

div#check_message { text-align: center; font-weight: bold; }
div#result_message { text-align: center; font-weight: bold; }
div#result_message a { text-decoration: none; font-weight: bold; color: #333; }

table#table_activation_review th { text-align: left; color: #3d5266; }

.error { color: #ff0000; }
.center { text-align: center; }
.fp-upper .error { font-weight: bold; }

.warning { color: #ff0000; }

/* Module: report/period */

.report_period h3 {
	color: #212121;
}

#calendar_start {
	margin: 0px 15px;
	width: 175px;
	float: left;
}
#calendar_end {
	margin-right: 17px;
	width: 200px;
	float: right;
}
#calendar_selected_startdate {

}

table.addresslist thead tr {
	background: url(../shared/images/background-selectbar.gif) no-repeat; 
	position: relative;
}

/* Safety Zone tables */
table.safetyzone-table { border-collapse: collapse; width: 500px; }
table.safetyzone-table td { font-weight: bold; }
table.safetyzone-table tr.even {  }
table.safetyzone-table td a { text-decoration: none; color: #28556f; }
table.safetyzone-table thead th { padding-left: 1px; }

/* Generic Tables - These are meant to be, of course, generic! */
table.generic-table { border-collapse: collapse; }
table.generic-table td { font-weight: bold; }
table.generic-table tr.even {  }
table.generic-table td a { text-decoration: none; color: #28556f; }
table.generic-table thead th { padding-left: 1px; }
table.generic-table tr.even { background: url(../media/bg/dialog-background.png); }

.alarm, tr.alarm td, tr.alarm td a { 
	color: #f00; 
}

/* Print only */
.printonly {
	display: none;	
}

/* Overview tables (used to display summaries and ... overviews!) */
table.overview_table th {
    text-align: left;
    font-weight: normal;
    color: #3d5266;
	vertical-align: top;
}
table.overview_table td {
    font-weight: bold;
	vertical-align: top;
}

/* Inline form */
form.inline_form fieldset {
	padding: 0;
	margin: 0;
	border: none;
	border-top: 1px solid #fff;
	padding-left: 10px;
	color: #fff;
}

form.inlineform { color: #fff; padding: 0; margin: 0; }
form.inlineform fieldset { padding: 0; border: none; border-top: 1px solid #fff; }
form.inlineform legend { padding-right: 3px; font-weight: bold; color: #fff;  }
.dialog .article form.inlineform legend a { margin: 0; padding: 0; }
form.inlineform label { display: inline-block; line-height: 1.8; vertical-align: top; }
form.inlineform label.checkbox { height: 15px; line-height: 1.2; }
form.inlineform fieldset ol { margin: 0; padding: 2px 0; }
form.inlineform fieldset li { list-style: none; padding: 0; margin: 0; }
form.inlineform em { font-weight: bold; font-style: normal; color: #f00; }
form.inlineform label { width: 80px; }
form.inlineform ol { margin: 0; padding: 0; }
form.inlineform li { list-style: none; padding: 0; margin: 0; }
form.inlineform li p { margin: 2px 0; }

.nowrap { white-space: nowrap; }

#maparea { overflow: hidden; }

form.slform span.readonly_indicator {
	display: none;
}

form.slform.guardian label,
form.slform.settings label,
form.slform.safetyzone label {
	width: 163px;
}
form.slform.guardian input[type="submit"],
form.slform.guardian input[type="button"],
form.slform.settings input[type="submit"],
form.slform.settings input[type="button"],
form.slform.safetyzone input[type="submit"],
form.slform.safetyzone input[type="button"] {
	margin-left: 171px; /* 160px for label width, + 2 x 4px for margin left and right + 3 div correction */
	border: 0;
	font-family:Arial,Helvetica,sans-serif;
	font-size:11px;
	font-weight:bold;
	line-height:22px;
	width:97px;
	height:22px;
}
form.slform.guardian, form.slform.guardian label, form.slform.guardian fieldset, form.slform.guardian legend,
form.slform.settings, form.slform.settings label, form.slform.settings fieldset, form.slform.settings legend,
form.slform.safetyzone, form.slform.safetyzone label, form.slform.safetyzone fieldset, form.slform.safetyzone legend 
{
	padding: 0;
	margin: 0;
}
form.slform.guardian fieldset,
form.slform.guardian fieldset,
form.slform.guardian fieldset {
	border: 0;
}
form.slform.guardian label,
form.slform.safetyzone label {
	font-weight: bold;
}
form.slform.guardian label,
form.slform.settings label,
form.slform.safetyzone label {
	margin: 0 4px;
}
form.slform.guardian legend,
form.slform.settings legend,
form.slform.safetyzone legend {
	font-size: 12px;
}
form.slform.guardian li span.description,
form.slform.settings li span.description,
form.slform.safetyzone li span.description {
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}
form.slform.guardian li, 
form.slform.settings li, 
form.slform.safetyzone li {
	padding: 0 0 10px 0;
}

/* Loader element (mainly used for displaying a loading animation) */
div.loader {
	text-align: center;
	height: 70px;
}
div.loader img {
	padding-top: 20px;
}
.fp-upper h1 {
	color: #3d5266;
}

/* IE7 specific fixes */
*:first-child+html form.contactform ol li legend {
	margin-left: -7px;
	color: #000;
}
*:first-child+html form.slform.buttonform {
	margin-right: -7px; /* Fix the offset from the form to the table containing the button fields. */
}
*:first-child+html .buttonbox a.button, *:first-child+html .buttonbox input.button {
	margin-top: -23px;
}
*:first-child+html .buttonbox form {
	margin-top: -7px;
}

/* Avoid scroll bars in GM tootlips */
.gm-style-iw div {
  overflow:visible !important;
}