/**
 * General
 */
* { margin: 0; padding: 0; }

/**
 * Styles for rounded elements
 */
.rounded-header,
.rounded-footer  { border: solid #191919 1px; background: #191919; }
.rounded-content { padding: 0 1em; background: #191919; }

/**
 * Blocks
 */
body                { background: #111; padding: 10px; font-size: 80%; font-family: "trebuchet ms", "tahoma", sans; color: #ddd; }
#bar                { width: 240px; position: absolute; top: 0; left: 0; }
#header             { margin: 0 0 10px 0; }
#subContainer       { position: relative; font-size: 1em; }
#navContainer       { background: transparent; }
#content            { margin: 0 0 0 250px; position: relative; }
.navBox             { position: relative; padding: 0 0 1em 0; }
#progressBar        { color: #888; text-align: center; bottom: 1em; right: 1em; padding: .5em; background: #fff; position: fixed; z-index: 100; border: 1px solid #555; font-size: 1.4em; display: inline; }
#toggleNav          { cursor: pointer; position: absolute; left: 0; top: 100px; width: 10px; height: 29px; background: url(../images/hide.gif); }
.OtosPanel          { margin: 0 0 .5em 0; }
#navContainer .OtosPanel { margin: 0; padding: 0 0 1em 0; }
#ElementGrid             { overflow: hidden; _height: 1%; }

/**
 * Headings
 */
h1, h2, h3, h4, h5, h6             { color: #fff; position: relative; }
h1                                 { font-size: 1em; margin: 5px 0 0 0; color: #ee6; font-weight: normal; float: left; }
h1 a                               { display: block; background: url(../images/otos_logo_black_transp_80x24.gif) top left no-repeat; width: 80px; height: 24px; text-indent: -9999px; }
h2 { padding: .2em 0; font-weight: normal; font-size: 1.1em; color: #ff6; border-bottom: solid #fff 1px; margin: 0 0 .8em 0; }
h3 { font-size: .9em; text-transform: uppercase; margin: 0 0 1em 0; }

/**
 * Lists
 */
ul, ol, dl { list-style: none; }

/**
 * Links
 */
span.fakeLink,
a:link, a:visited     { cursor: pointer; color: #eee; text-decoration: underline; }
span.fakeLinkHovered,
a:hover, a:active     { color: #eee; text-decoration: none; }

/**
 * Forms
 */
fieldset                        { border: 0; }
select, input                   { background: #222; border: solid #333 1px; color: #ccc; }
option                          { padding: 0 .2em; border-bottom: solid #272727 1px; }
#navigation label               { display: block; width: 80px; float: left; }
#navigation select              { float: right; width: 130px; font-size: .85em; }
#navigation .formRow            { margin: 0 0 .5em 0; }
/* overflow: visible fixes IE-bug, which makes the button too wide */
input.submit,
input.PiiUI_SubmitButton,
button,
input.button                    { overflow: visible; font-family: "tahoma", sans; cursor: pointer; color: #fff; text-transform: uppercase; font-size: 0.8em; border: solid #3a3a3a 1px; background: #1b1b1b !important; padding: 2px 7px !important; }
input.submit:hover,
input.PiiUI_SubmitButton:hover,
button:hover,
input.button:hover              { background: #222 !important; }
input.disabled,
button.disabled,
button[disabled],
button[disabled]:hover,
select.disabled,
select[disabled],
textarea.disabled,
input.disabled:hover            { color: #333; cursor: default; background: #1b1b1b !important; border: solid #222 1px; }
form .buttonPanel               { margin: 1em 0 0 0; }
form .buttonPanel button,
form .buttonPanel input         { margin: 0 3px 0 0; }
input.text, input.password, select { padding: .2em; }

/**
 * PiiUI Components
 */
.PiiUI_Button                { overflow: visible; font-family: "tahoma", sans; cursor: pointer; color: #fff; text-transform: uppercase; font-size: 0.8em; border: solid #3a3a3a 1px; background: #1b1b1b !important; padding: 2px 7px !important; }
.PiiUI_Button:hover          { background: #222 !important; }
.PiiUI_LabeledComponent      { overflow: hidden; _height: 1%; margin: 0 0 .5em 0; }
.PiiUI_TextField,
.PiiUI_PasswordField         { background: #222; border: solid #333 1px; color: #ccc; padding: .2em; }
.PiiUI_ToolBarSeparator      { float: left; border-left: solid #151515 1px; height: 18px; width: 1px; background: #333; margin: 2px 3px 0 3px; }
.PiiUI_Disabled,
.PiiUI_Disabled:hover        { color: #333; cursor: default; background: #1b1b1b !important; border: solid #222 1px; }
.PiiUI_Button img            { display: block; float: left; }
.PiiUI_Button span           { text-align: left; white-space: nowrap; display: block; float: left; margin: 0 0 0 4px; padding: 1px 0 0 0; }
.PiiUI_CheckBox span         { background: url(../icons/tick_dark.png) top left no-repeat; width: 16px; height: 16px; display: block; }
.PiiUI_CheckBox span.checked { background-image: url(../icons/tick.png); }
.PiiUI_ButtonPanel           { overflow: hidden; _height: 1%; }
.PiiUI_ButtonPanel .PiiUI_Button { float: left; margin: 0 3px 0 0; }

/**
 * Element headers
 */
.boxHeaderPanel                              { position: relative; border-bottom: solid #fff 1px; margin: 0 0 .8em 0; padding: 0 0 .2em 0; }
.boxHeaderPanel h2                           { color: #ff6; border-bottom: 0 !important; float: left; margin: 0 !important; }
.boxHeaderPanel .boxHeaderPanelButtons       { position: absolute; right: 0; bottom: 5px; }
#help,
.boxHeaderPanel .boxHeaderPanelButtons span  { font-size: 1px; cursor: pointer; float: left; margin: 0 0 0 3px; display: block; width: 15px; height: 15px; text-indent: -9999px; background-repeat: no-repeat; }
#help, .boxHeaderPanel span.toggleHelp       { background-image: url(../images/help.gif); }
.boxHeaderPanel span.toggleNavBox            { background-image: url(../images/down.gif); }
.boxHeaderPanel span.closeElement            { background-image: url(../images/close.gif); }
.boxHeaderPanel span.editorLink              { background-image: url(../images/admin.gif); }
.boxHeaderPanel span.showUrl                 { background-image: url(../images/url.gif); }
.boxHeaderPanel span.export                  { background-image: url(../images/export.gif); }

/**
 * General
 */
span.left,
div.left                        { float: left; }
div.right                       { float: right; }
span.right                      { float: right; text-align: right; }
iframe                          { border: 0; }
.clearfix:after                 { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix                       { display: inline-block; }
/* hides from IE-mac */
* html .clearfix                { height: 1%; }
.clearfix                       { display: block;}
/* end hide from IE-mac */

/**
 * Something
 */
#header img                  { border: 0; }

/**
 * Popup-windows
 */
.popup                    { position: absolute; z-index: 1000; white-space: normal; }
.popup .popupTitleBar     { cursor: move; padding: 0 .5em .5em .5em; color: #fff; }
.popup .popupTitleBar .closeButton { cursor: pointer; }
.popupContentWrapper      { }
.popupContentInnerWrapper { background: #191919; overflow: auto; }
.popup .popupContent      { padding: 5px; }
.popup .popupFooter       { position: relative; padding: 2px 2px;}
.popup .popupResizeHandle { position: absolute; cursor: se-resize; bottom: 0px; right: 0px; width: 8px; height: 8px; background: url(../images/resizeHandle.gif) top left no-repeat; font-size: 1px; -moz-user-select: none; }
.popupGhostRect           { border: dashed #333 1px; position: absolute; z-index: 9999; }
.popup .rounded-border    { background: #252525 !important; }
.popup .rounded-header    { background: #222 !important; border-color: #252525 !important; }
.popup .rounded-content   { padding: 0 !important; background: #222; border-style: solid; border-color: #252525 !important; }
.popup p                  { margin: .8em 0; }
.popup ol, .popup ul      { list-style-position: outside; padding: 0 0 0 20px; }
.popup ol                 { list-style: decimal; }
.popup ul                 { list-style: disc; }
.popup ul ul              { list-style: square; }
.popup ol li,
.popup ul li              { margin: 0 0 .5em 0; }
.popup ul ul li           { margin: 0 0 .2em 0; }
.popup h3                 { font-size: 1.1em; margin: .5em 0; position: static; }
.popup dl dt              { margin: 0 0 10px 20px; }
.popup dl dd              { color: #ff6; }
.popup pre                { padding: 3px; background: #252525; border: solid #333 1px; overflow: auto; }
.popup .popupButtonPanel  { overflow: hidden; _height: 1%; }
.popup .popupButtonPanel .PiiUI_Button { margin: 0 0 0 3px; float: right; }

/**
 * MessageBox
 */
.messageBoxContentWrapper   { text-align: center; padding: 3px 10px; min-width: 100px; }
.messageBoxContentWrapper p { margin: 0 0 10px 0; }

/**
 * Helpcontainer
 */
#helpContainer                  { line-height: 140%; }
#helpContainer p                { padding: 0 0 .8em 0; }
#helpContainer ol,
#helpContainer ul               { list-style-position: outside; padding: 0 0 0 20px; }
#helpContainer ol               { list-style: decimal; }
#helpContainer ul               { list-style: disc; }
#helpContainer ul ul            { list-style: square; }
#helpContainer ul li            { margin: 0 0 .5em 0; }
#helpContainer ul ul li         { margin: 0 0 .2em 0; }
#helpContainer h3               { font-weight: bold; text-transform: uppercase; margin: 1em 0 .5em 0 !important; }

/**
 * Errors & messages
 */
.Otos_message,
.Otos_error                     { position: absolute; z-index: 1000; top: 50%; left: 50%; width: 600px; margin-left: -300px; padding: 1em 1em 1em 3em; border: solid #ccc 1px; background-position: 10px 50%; background-repeat: no-repeat; background-color: #222 !important; }
.Otos_error                     { background-image: url(../icons/exclamation.png); }
.Otos_message                   { background-image: url(../icons/information.png); }
.Otos_error p                   { margin: .3em 0; }
.Otos_error p.title             { font-size: 1.2em; font-weight: bold; margin: 0 0 1em 0; }
.Otos_error code                { border: solid #ccc 1px; display: block; padding: .5em; background: #333; }

/**
 * Login form
 */
#loginWrapper                     { width: 300px; position: absolute; left: 50%; top: 50%; margin: -120px 0 0 -150px; }
form#frmLogin                     { margin: 0 auto; }
form#frmLogin label               { display: block; color: #fff; float: left; width: 35%; }
form#frmLogin input#txtUsername,
form#frmLogin input#txtPassword,
form#frmLogin select#lstLanguage  { margin: 0 0 1em 0; width: 60% }
form#frmLogin #cmdLogin           { margin: .5em 0 0 35%; }
p#loginInformation                { margin: 0 0 .5em 0; color: #c00; }

/**
 * Logout
 */
p#logoutLink { padding: 5px 0 0 0; clear: both; font-size: .9em; }

/**
 * Tables
 */
table     { border-spacing: 0; }
table th  { border-bottom: solid #ccc 1px; padding: 0 10px 3px 10px; text-align: left; }
table td  { padding: 3px 10px; border-bottom: solid #333 1px; text-align: left; }

/**
 * Canvas
 */
.canvas .line,
#drawingLayer .line,
.canvas .gp,
#drawingLayer .gp                    { background-color: #a30; }
.canvas .in,
#drawingLayer .in                    { background-color: #6af; }
.canvas .out,
#drawingLayer .out                   { background-color: #ff0; }
.canvas .out,
#drawingLayer .out                   { background-color: #ff0; }

/**
 * Form validation
 */
.FormValidationErrorIndicator   { margin: 0 0 0 10px; }
.FormValidationErrorWrapper     { }
.FormValidationErrorWrapper .rounded-border  { background: #833;}
.FormValidationErrorWrapper .rounded-header,
.FormValidationErrorWrapper .rounded-footer,
.FormValidationErrorWrapper .rounded-content { border-color: #833; background: #833; }
.FormValidationErrorWrapper .rounded-content { padding: 0 10px;}
.FormValidationErrorMessage     { }
.FormValidationErrorTriangle    { font-size: 0; line-height: 0; width: 0; border-top: solid 10px #833; border-left: 5px solid transparent; border-right: 5px solid transparent; }
.FormValidationErrorElement     { border: solid #833 1px; }
.FormSubmitMessage              { color: #883; margin: 0 0 .5em 0; background: url(../icons/information.png) 0 50% no-repeat; padding: 0 0 0 20px; }
/**
 * Areas
 */
html                      { overflow: scroll; }
.browser                  { white-space: nowrap; }
.elementContent           { margin: 0; text-align: left; }
.canvasContainer          { margin: 0 auto; position: relative; }
.canvas                   { position: absolute; top: 0; left: 0; z-index: 1; }
.canvasContainer img      { position: absolute; top: 0; left: 0; z-index: 0; border: solid #999 1px; }
.canvasContainer img.dead { border: 0; bottom: 2px; right: 2px; top: auto; left: auto; }
p.cameraName,
p.imageText               { color: #888; font-size: .9em; text-align: center; }
p.imageText               { margin: 0 0 1em 0; }
p.imageError              { text-align: left; }
.cameraRowContainer       { text-align: center; }
.ElementPanel             { float: left; text-align: center; margin: 0 0 10px 10px; }
.firstOfTheRow            { clear: left; margin-left: 0; }
.imageMask                { background: #fff; position: absolute; top: 0; left: 0; opacity: 0.9; filter: alpha(opacity=90); z-index: 2; }
.statContent iframe       { width: 100%; overflow: hidden; }
span#help                 { margin: 0 0 0 10px; }
#content .boxHeaderPanel  { cursor: move; }

/**
 * Lists
 */
#header ul.langList      { float: left; display: inline; /* for IE6, list too wide */ }
#header ul.langList li   { float: left; padding: 0 0 0 3px; }
#header ul.langList img  { cursor: pointer; }

/**
 * General
 */
#header .right { white-space: nowrap; margin: 7px 0 0 0; }
img#otosTeaser { float: right; margin: 0 0 0 2em; }

/**
 * Reporttypes box
 */
#reportTypeBox .labeledComponent { overflow: hidden; _height: 1%; }

/**
 * Userbox
 */
#userBox .PiiUI_LabeledComponent        { overflow: hidden; _height: 1%; }
#userBox .PiiUI_LabeledComponent label  { width: 50%; }
#userBox .PiiUI_LabeledComponent input  { float: right; width: 45%;  }
#userBox .submit                        { float: right; }
#userBox form                           { overflow: hidden; _height: 1%; }

/**
 * User management
 */
#userManagement fieldset        { margin: 0 0 1em 0; border: solid #333 1px; padding: 1em; }
#userManagement h3,
#userManagement legend          { font-weight: bold; text-transform: uppercase; margin: 0 0 1em 0; }
#userManagement fieldset legend { margin: 0; padding: 0 1em; }
#userManagement label           { margin: 0 1em 0 0; display: block; float: left; }
#userManagement form label      { margin: 0; float: left; display: block; width: 50%; }
#userManagement form select,
#userManagement input.password,
#userManagement input.text      { width: 45%; }
#newUserLink                    { margin: 0 0 1em 0; }
form#frmEditUser                { overflow: hidden; _height: 1%; }
form#frmNewUser                 { margin: 0; }
form#frmNewUser fieldset        { margin: 0; }
.statTypes select               { font-size: .85em; width: 150px; }
.labeledComponent               { margin: 0 0 .5em 0; }
fieldset#fstProperties .labeledComponent { width: 46%; float: left; margin-right: 3%; }
fieldset#fstProperties .labeledComponent label { width: 75%; }
fieldset#fstProperties .labeledComponent input.text { width: 20%; }
fieldset#fstProperties input.button { clear: both; display: block; }

#userManagement .hovered { border: dashed #ff0 1px; }
#userInfoBar             { width: 49%; float: left; }
#userCameraBar           { width: 49%; float: right; }
#fstUserCameras img,
#fstAvailableCameras img { cursor: move; width: 20%; margin: .5em 1%; border: solid #fff 1px; padding: 1%; background: #333; }

td.deleteImg,
td.editImg    { width: 15px; text-align: right; cursor: pointer; }

/**
 * Toolbar
 */
.toolBar                   { overflow: hidden; _height: 1%; background: #222; border: solid #333 1px; padding: 3px; margin: .5em 0; }
.toolBar .toolBarSeparator { float: left; border-left: solid #151515 1px; height: 18px; width: 1px; background: #333; margin: 2px 3px 0 3px; }
.toolBar button.disabled:hover,
.toolBar button            { margin: 0; float: left; padding: 1px 5px !important; overflow: hidden; _height: 1%; border: solid #222 1px; background: none !important; }
.toolBar button:hover      { border-color: #333; background: #272727 !important; }
/*.toolBar button img        { display: block; float: left; margin: 0 4px 0 0; }
.toolBar button span       { display: block; float: left; padding: 1px 0 0 0; }*/

/**
 * User-table
 */
table#users { width: 100%; }
table#users tr.userEdit td { padding: 0; }

/**
 * View-table
 */
table#views        { width: 100%; }
table#views td div { overflow: hidden; }

/**
 * Browser
 */
ul#browser                { margin: 0 0 10px 0; }
ul#browser ul             { padding: 0 0 0 10px; margin: 3px 0 0 0; }
ul#browser img            { display: block; float: left; margin: 0 3px 0 0; }
ul#browser li             { overflow: hidden; _height: 1%; cursor: pointer; }
ul#browser li.dead        { color: #c00; text-decoration: line-through; }
ul#browser ul ul li span  { padding: 0 0 0 20px; }
ul#browser span.imageName { background: url(../icons/picture.png) 0 0 no-repeat; }
ul#browser span.areaName  { background: url(../icons/chart_bar.png) 0 0 no-repeat; }

/**
 * View box
 */
ul#userViewList li                { background: url(../icons/monitor.png) left 50% no-repeat; padding: 0 0 0 20px; overflow: hidden; _height: 1%; margin: 0 0 3px 0; }
ul#userViewList li span.fakeLink  { float: left; }
ul#userViewList li img            { cursor: pointer; }
ul#userViewList li img.defaultImg { margin: 0 0 0 3px; }
ul#userViewList li img.default    { cursor: default; }
ul#userViewList li .buttonBox     { float: right; }
form#frmAddView                   { margin: 1em 0 0 0; overflow: hidden; _height: 1%; }
form#frmAddView button            { margin: .5em 0 0 0; float: right; }

/**
 * Calendar
 */
#calendar table                     { margin: 0 auto; }
#calendar table th,
#calendar table td                  { padding: 2px; border: 0; }
#calendar table th                  { color: #555; text-align: center; font-weight: bold; }
table#hourTable td,
#calendar span.cal-year,
#calendar span.cal-month,
#calendar td.cal-day,
#calendar th.cal-weekNumber         { cursor: pointer; text-decoration: underline; }
#calendar td.cal-day                { text-align: center; width: 25px; }
table#hourTable td.cal-currentHour,
#calendar td.cal-today              { font-weight: bold; color: #ff6; }
.cal-yearSelection                  { font-weight: bold; text-align: center; }
.cal-monthSelection                 { font-weight: bold; text-align: center; margin: 0 0 .3em 0; }
.cal-prevYear, .cal-prevMonth       { cursor: pointer; margin: 0 .5em 0 0; }
.cal-nextYear, .cal-nextMonth       { cursor: pointer; margin: 0 0 0 .5em; }
#calendar .activePeriod             { border: solid #ff6 1px !important; text-decoration: none !important; }

table#hourTable                     { margin: 0 auto; }
table#hourTable th                  { color: #555; padding: 1em 0 .2em 0; }
table#hourTable td                  { text-align: center; width: 36px; padding: .1em 0; }

/**
 * Statistics
 */
.statTypes label { margin: 0 1em 0 0; }

/**
 * Combination charts
 */
.CombinationChartPanel .OtosPanelContent         { }
.CombinationChartPanel .OtosPanelContent_hovered { border: dashed #ff6 2px; }
.areaNamePanel                                   { text-align: left; font-size: .9em; margin: 5px 0 0 0; }
.areaNamePanel div                               { overflow: hidden; _height: 1%;  }
.areaNamePanel img                               { margin: 0 0 0 5px; cursor: pointer; }
.areaNamePanel span                              { display: block; float: left; }

.areaNamePanel .rounded-header,
.areaNamePanel .rounded-footer  { border: solid #444 1px; background: #222; }
.areaNamePanel .rounded-content { padding: 0 8px; background: #222; border: solid #444 1px; }
.areaNamePanel .rounded-border  { background: #444; }