footer, header, nav, section, article, video 
{
    display: block;
}

body 
{
    font: 14px sans-serif;
}

textarea
{
    font-family: Myriad Pro, Tahoma, Verdana, sans-serif;
    border: 0px;
    background: #fff;
    overflow: auto;
    word-wrap: break-word;
}
a
{
    cursor: pointer;
}
a:link 
{
	font-weight: normal;
	color: #00529b;
	text-decoration: underline;
}
a:visited 
{
	font-weight: normal;
	color: #00529b;
	text-decoration: underline;
}
a:hover 
{
	font-weight: normal;
	color: #f47735;
	text-decoration: underline
}
h1 
{
	font-weight: bold;
	font-size: 1.75em;
	margin-bottom: 15px;
	padding-bottom: 2px;
	color: #000000
}
h2 
{
	margin: 0px;
	font-weight: bold;
	font-size: 1.3em;
	padding: 0px; 
	color: #000000
}
h3
{
	margin: 0px;
	font-weight: bold;
	font-size: 1em;
	padding: 0px; 
	color: #000000 
}
.headerGradient
{
    position: relative; 
}
.headerGradient span
{
    position:absolute;
	display:block;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background:url(../images/gradient_1.png) repeat-x;
}
*html .headerGradient span
{
    background-color:#fff;
	background-color:transparent;
	background-image: url(none.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/gradient_1.png", sizingMethod="scale");
}
hr
{
}
div.hr 
{
	background: #ffffff url(../images/horizontal_line.png) no-repeat top left;
	height: 2px;
	margin: 0;
	padding: 0;
	border: 0px;
}
div.left {
    float: left;
    width:150px;
    clear: both;    
    font-size:10px
}
div.leftMedium {
    float: left;
    width: 120px;
    clear: both;
    font-size: 10px
}
div.leftNear {
    float: left;
    width: 50px;
    clear: both;
    font-size: 10px
}
div.center {
    margin-left: auto;
    margin-right: auto;
}

div.checkedListBox {
    font-size: 10px;
    overflow: auto;
    /*border: thin solid;*/
    height: auto;
    width: 352px;
    min-height: 20px;
    max-height: 300px;
    background: #fff none;
    border: 3px solid #8FC0E2;
}

table 
{
	border-collapse: collapse;
	margin: 0px;
	padding: 0px;
}
header
{
	white-space: nowrap; 
	height: auto;
	background: #ffffff url(../images/banner_background.gif) repeat-x top center;	
}
header img 
{
	border: 0px;
}
nav 
{
	position: relative;
	height: 27px; 
	padding: 0px 10px 0px 10px; 
	color: #000000;  
	background: #000 url(../images/nav_background.gif) repeat-x top center;
}
nav a, nav a:link, nav a:active, nav a:visited 
{
	font-weight: bold; 
	color: #ffffff; 
	text-decoration: none
}
nav a:hover 
{
	color: #ccc; 
	text-decoration: none
}
nav .userControls 
{
    position: relative;
}
section.contentFrame 
{
    position: relative;
    left: 2%;
    right: 2%;
	width: 96%;
}
footer
{
	padding: 10px 0px;
	color: #ffffff; 
	font: normal normal Trebuchet MS, Helvetica, sans-serif;
	position: relative; 
    text-align: center;
}
footer a
{
	font-weight: bold; 
	color: #ffffff; 
	text-decoration: none
}
footer a:hover 
{
	font-weight: bold; 
	color: #ffffff; 
	text-decoration: underline
}

.center 
{
    margin-left: auto;
    margin-right: auto;
}

.popUp
{
    position: absolute;
    top: 0;
    display: block;
    background-color: #FFF1B6;
    border: 1px solid #000;
    padding: 4px;
    z-index:99;
}

/*Login Styles*/
.loginContainer
{
    display: block;
    height: 200px;
}

.loginResponse
{
    display: block;
    font-size: .875em;
    font-weight: bold;
    padding: 2px;
}
/*End Login Styles*/

/*Map Styles*/
#mapFrame 
{
	font-size: .8em; 
}
/*End Map Styles*/

/*Form Styles */
fieldset
{
    border: 1px dotted #8FC0E2;
    padding: 2px;
}

legend
{
    text-align: center;
    font-weight: bold;
}
/*End Form Styles */

/*Input Styles*/
input
{
    vertical-align: middle;
    margin: 0;
    padding: 2px;
    font-size: .875em;
    border: 0px;
}
input.override
{
    display: block!important;
    background: transparent url(../images/input_override.gif) top left!important;
    width: 150px;
    height: 24px;
    border: 3px solid #000000!important;
    margin: 0px;
    padding: 3px;
    color: #ffa800;
    font-size: 1.5em;
    font-family: 'Lucida Console', Monaco, monospace;
}
input.override_assetTracker {
    display: block !important;
    background: transparent url(../images/input_override.gif) top left !important;
    width: 400px;
    height: 24px;
    border: 3px solid #000000 !important;
    margin: 0px;
    padding: 3px;
    color: #ffa800;
    font-size: 1.5em;
    font-family: 'Lucida Console', Monaco, monospace;
}
input[type=text], input[type=password], input[type=email], input[type=search] 
{
    background: #fff none;
    border: 3px solid #8FC0E2;
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=search]:focus
{
    border: 3px dashed #8FC0E2;
}
input[type=radio], input[type=checkbox]
{
    background: transparent none!important;
}
input[type=checkbox]
{
    margin: 0px;
    padding: 0px;
}
/*End Input Styles*/

/*Button Styles*/

button, submit, input[type=submit]
{
    border: 3px ridge #5DB3CE;
    background: #fff none no-repeat 0px 0px;
    font-size: .875em;
    cursor: pointer;
    padding: 2px;
    vertical-align: middle;
}
button:hover, submit:hover, input[type=submit]:hover, button.add:hover, button.edit:hover, button.delete:hover, button.ok:hover, button.print:hover, button.chart:hover
{  
    background-color: #D1E9F2;
}
button.menuButton:hover {
    /*background-color: darkorange;*/
    color: darkorange;
}

button.arrowUp, button.arrowDown, button.arrowLeft, button.arrowRight, button.square, button.circle, button.smallCircle, button.small, button.cancel, button.arrowSmall, button.arrowUpSmall, button.arrowDownSmall, button.arrowLeftSmall, button.arrowRightSmall
{
    border: 0;
}
button.arrowUp, button.arrowDown 
{
    height: 40px;
    width: 42px;
}
button.arrowUpSmall, button.arrowDownSmall 
{
    height: 20px;
    width: 22px;
}
button.arrowUp
{
    background: transparent url(../images/buttons/button_arrow_up.png) no-repeat; 
}
    button.close {
        height: 15px;
        width: 15px;
        background: transparent url(../images/buttons/button_close_window.png) no-repeat;
    }
button.arrowDown
{
    background: transparent url(../images/buttons/button_arrow_down.png) no-repeat;
}
button.arrowDownSmall
{
    background: transparent url(../images/buttons/button_arrow_down_small.png) no-repeat;
}
button.arrowLeft, button.arrowRight 
{
    height: 42px;
    width: 40px;
}
button.arrowLeftSmall, button.arrowRightSmall 
{
    height: 22px;
    width: 20px;
}
button.arrowLeft
{
    background: transparent url(../images/buttons/button_arrow_left.png) no-repeat;
}
button.arrowLeftSmall
{
    background: transparent url(../images/buttons/button_arrow_left_small.png) no-repeat;    
}
button.arrowRight
{
    background: transparent url(../images/buttons/button_arrow_right.png) no-repeat;
}
button.arrowRightSmall
{
    background: transparent url(../images/buttons/button_arrow_right_small.png) no-repeat;
}
button.arrowSmall
{
    background: transparent url(../images/buttons/button_arrow_sm.png) no-repeat;
    height: 25px;
    padding: 0px 4px 0px 25px;    
    /*padding: 0px 4px 0px 10px;*/
}

button.circle, button.square, button.smallCircle
{
    text-align: center;
    vertical-align: middle;
}
button.circle
{
    background: transparent url(../images/buttons/button_circle.png) no-repeat;
    height: 42px;
    width: 44px;
    padding: 0px 4px 4px 0px;
}
button.square
{
    background: transparent url(../images/buttons/button_square.png) no-repeat;
    height: 52px;
    width: 53px;
}
button.smallCircle
{
    background: transparent url(../images/buttons/button_circle_sm.png) no-repeat;
    height: 20px;
    width: 20px;
    font-size: .75em;
    color: #fff; 
    padding: 0px 2px 2px 0px;   
}
button.cancel 
{
    background: transparent url(../images/buttons/button_delete.png) no-repeat;
    height: 22px;
    width: 25px;
}
button.circle img, button.square img, button.smallcircle img 
{
    position: relative;
}
input[type=submit]
{
    padding: 0px 4px;
    height: 23px
}
button.add, button.edit, button.delete, button.ok, button.small, button.chart, button.save
{
    padding: 0px 4px 0px 25px;    
    /*padding: 0px 4px 0px 10px;*/
    height: 23px;
}
button.print
{
    background: #ffffff url(../images/buttons/button_print.png) no-repeat 0px -7px;
    padding: 0px 4px 0px 50px;    
    /*padding: 0px 4px 0px 20px;*/
    height: 33px;
    font-size: 1em;
}
button.small
{
    background: transparent url(../images/buttons/button_small.png) no-repeat;
}
button.add
{
    background: #ffffff url(../images/buttons/button_add.png) no-repeat;
}
button.chart
{
    background: #ffffff url(../images/buttons/button_chart.png) no-repeat 10px 0px;
}
button.edit
{
    background: #ffffff url(../images/buttons/button_edit.png) no-repeat;
}
button.delete
{
    background: #ffffff url(../images/buttons/button_delete.png) no-repeat;
}
button.save {
    background: #ffffff url(../images/buttons/button_save.png) no-repeat;
}
button.home
{
    background: #ffffff url(../images/buttons/button_home.png) no-repeat;
}
button.ok
{
    background: #ffffff url(../images/buttons/button_ok.png) no-repeat;
}

button.toolbar
{
    position: relative;
    height: 29px;
    height: -moz-26px;
    padding-top: 4px;
    border: 0px;
    margin: 0px, 4px, 6px, 4px;
    text-align: center;
    background: transparent url(../images/buttons/button_toolbar.png) no-repeat top left;
    cursor: pointer;
}
button.toolbar.left, button.toolbar.right 
{
     margin-right: 0px; 
}
button.toolbar.left
{
    background: transparent url(../images/buttons/button_toolbar_left.png) no-repeat top left!important;
}
button.toolbar.middle
{
    background: transparent url(../images/buttons/button_toolbar_middle.png) no-repeat top left!important;
}
button.toolbar.right
{
    background: transparent url(../images/buttons/button_toolbar_right.png) no-repeat top left!important;
}

/* Button Styles: To be Updated */

button.toggleDevice
{
    padding-left: 25px;
    white-space: normal;
    border: 0px;
    text-align: left;
}

button.toggleDevice span
{
    display: block;
    width: 170px;
    white-space: normal;
}

button.checkbox
{
    background: transparent url(../images/buttons/button_checkbox_off.png) no-repeat;
    height: 20px;
    font-weight: bold;
    padding: 3px 0px 0px 18px;
}
button.checkbox:hover
{
    background-position: 0px -53px;
}
button.checkbox.on
{
    background: transparent url(../images/buttons/button_checkbox_on.png) no-repeat!important;
}
button.windowTab
{
    position: relative;
    display: inline-block;
    padding: 0;
    overflow: visible;
    line-height: 25px;
    cursor: pointer;
    font-weight: bold;
    font-size:  .75em;
    color: #000a56;
    background: transparent none no-repeat bottom left;
    vertical-align: middle;
    text-align: left;
    padding-left: 25px;
    margin-bottom: 8px;
}
button.windowTab:hover
{
    color: #4c5ac3;
    background-color: #8BC7EF;
}
/*End Button Styles*/

/*Misc Styles*/
.mask
{
    background-color: #AAAAAA;
    opacity: 0.2;
    filter: alpha(opacity=20);
}


/*
.controlMenu
{
    position: absolute;
    width: 200px;
    z-index: 99;
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid #777777;
    overflow: hidden;
}
*/

.toggleContainer
{
    display: block;
    background: #ffffff;
    border-radius: 4px;
    padding: 5px;
    font-size: .85em;
    overflow-y: auto;
    overflow-x: hidden;
    max-height : 100px;    
}

.toggleContainer button 
{
    white-space: nowrap;
    text-overflow: ellipsis;
}

.toggleContainer button:hover
{
    color: #666666;
}

.presetBox
{
    display: block;
    font-size: .875em;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 4px;
    min-height: 18px;
}

.presetVisible
{
    background-color: #ffffff;
    border: 1px solid #000000;
}

.publicVideo
{
    position: absolute;
    bottom: 0;
    right: 10px;
    color: #000000;
}
.orangeBox 
{
    background: #ffd7b0 none!important;
    border: 1px solid #000000;
    color: #000000;
    /*padding: 4px 10px 8px 10px;*/
    padding: 4px;
    font-size: .8em;
}
.blueBox 
{
    background: #8FC0E2 none!important;
    border: 1px solid #000000;
    color: #000000;
    /*padding: 4px 10px 8px 10px;*/
    padding: 4px;
    font-size: .8em;
}
.greenBox 
{
    background: green none!important;
    border: 1px solid #000000;
    color: #000000;
    /*padding: 4px 10px 8px 10px;*/
    padding: 4px;
    font-size: .8em;
}

.redBox {
    background: red none !important;
    border: 1px solid #000000;
    color: #000000;
    /*padding: 4px 10px 8px 10px;*/
    padding: 4px;
    font-size: .8em;
}

.currentMessage
{
    display: block;
    /*height: 110px;*/
    padding: 6px 0px 6px 0px;
    /*width: 300px; /*340px;*/
    height: 80px;
}
.messagePreview
{
    font: 1.85em 'Lucida Console', Monaco, monospace;
    color: #f78f1e;
    padding: 5px;
    background-color: #000;
    border: solid 5px;
    border-color: #a8a8a8 #666666 #343434 #8C8C8C;
    display: block;
}
.postedMessagePreview {
    font: 2.5em 'Lucida Console', Monaco, monospace;
    color: #f78f1e;
    padding: 15px;
    background-color: #000;
    border: solid 5px;
    border-color: #a8a8a8 #666666 #343434 #8C8C8C;
    display: block;
    width: 40px;
    height:40px;
    margin:auto;
}
.overrideContainer, .defaultMessageContainer
{
    display: block;
    position: relative;
    margin-bottom: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    height: 160px;/*130px*/
    /*width: 340px;*/
    border: 1px solid #000;
}
.overridePage, .defaultPage
{
    position: relative;
    display: block;
    float: left;
    margin: 0px 4px 0px 4px;
}
.characterCounter
{
    color: #000000;
    font-size: .75em;
    font-weight: bold;
    position: relative;
}
.queueData 
{
    font-size: 12px;
    margin-bottom: 5px;
}
.queueData span
{
    padding: 2px 4px 2px 4px;
    border-right: 2px solid #8E8E8E;
    text-align: center;
    display: inline-block;
    width: 20%;
}
.queueData span.titleCol
{
    text-align: left;
    width: 50%;
    border-right: 0px!important
}
.queueData.laneView span.titleCol
{
    width: 100px!important;
}

.queueData div
{
    border-bottom: 1px solid #B3B3B3;
} 
.queueData div.header
{
    border-bottom: 0px!important;
    font-weight: bold;
}
.queueData.speed div
{
    background-color: #C7ECFF;
}
.queueData.speed div.header
{
    background-color: #3FA9F5;
}
.queueData.speed span.titleCol
{
    background-color: #94D6FF;
}
.queueData .header span.titleCol, .queueData .footer span.titleCol
{
    background-color: transparent!important;
}
.queueData.volume div
{
    background-color: #D1F4B5;
}
.queueData.volume div.header
{
    background-color: #7AC943;
}
.queueData.volume span.titleCol
{
    background-color: #A7DB7D;
}

.queueData.density div
{
    background-color: #F4C9CC;
}
.queueData.density div.header
{
    background-color: #C1272D;
}
.queueData.density span.titleCol
{
    background-color: #DD7C83;
}

.queueData.laneView
{
    margin: 0px;
    display: block;
}

.queueData.laneView span
{
    width: auto!important;
    padding: 0px;
    display: table-cell;
}
.queueData.laneView span div
{
    margin: 0px;
    padding: 2px 4px 2px 4px;
}
.queueData.laneView span.titleCol
{
    width: 100px!important;
    background-color: #D6E9F2;
    border-bottom: 1px solid #B3B3B3;
}
.queueData.laneView span.titleCol div
{
    background-color: Transparent;
    border-bottom: 0px!important; 
    text-align: center;
    height: inherit;
    vertical-align: middle;
    width: 100px;
}
.queueData.laneView div
{
    background-color: #EDF6F9;
    width: 40px;
    /*width: 40px;*/
}
.queueData.laneView div.header
{
    font-size: .85em;
    background-color: #BDCCD4!important;
}
/*End Misc Styles*/

.groupEntry input
{
    background-color: Transparent;
    font-size: 1em;
    color: inherit;
}

.groupEntry input:focus
{
    border: 1px solid #D1E9F2;
}


form.editUser
{
    display: block;
    position: absolute;
    background: #fff;
}

.groupExpand
{
    font-weight: bold;
    padding: 2px;
    margin: 2px;
    border-radius: 4px;
}

.typeContainer .groupExpand 
{
    color: #666666;
}

.groupExpand:hover
{
    background-color: #4E83C3;
}

.permissionContainer
{
    margin-left: 10px;
}

.groupView .scrollingBox
{
    border: 1px solid #D1E9F2;
    height: 240px;
}

.permissionView
{
    background: #D1E9F2;
}

.permissionView .scrollingBox
{
    background: #fff;
    margin: 10px;
    height: 225px;
}

.reportForm .reportContainer
{
    background: #D1E9F2;
}

/*input styles */

.overTxtLabel 
{
    position: absolute;
    display: block;
    color: #000;
}

.inline
{
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;    
    zoom: 1;
    /*display: inline;*/
}

.scrollingBox
{
    overflow: auto;
}

.visible
{
    display: block!important;
}

.noVisible
{
    display: none!important;
}

.modified
{
    font-weight: bold;
    color: #3989C9;
    background-color: #FFF1B6;
}

/* Device Select Styles */

.devicePicker .scrollingBox
{
    background: #D1E9F2;
}

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

.devicePicker li
{
    margin: 1px 0px 1px 0px;
}

.devicePicker .item
{
    font-size: .75em;
    height: -moz-25px;
    height: 24px;
    width: -moz-25px;
    width: 24px;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;    
    overflow: hidden;
    zoom: 1;
    /*display: inline;*/
    
}

.devicePicker div.item
{
    height: -moz-23px;
    height: 22px;
    width: -moz-23px;
    width: 22px;
    border: 1px solid #AAA;
    margin: 0px;
}

.devicePicker div.item.active
{
    background: #FFF1B6;
    cursor: pointer;
}

.devicePicker div.item.active:hover
{
    background: #FFF9DE;
}

.devicePicker div.item.inactive
{
    background: #E2E2E2;
    cursor: default;
}

.devicePicker div.item.selected
{
    background-image: url(../images/icons/icon_checked.png)!important;
    background-repeat: no-repeat!important;
}

/* report styles */

.reportForm .panel
{
    width: 50%;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;    
    /*display: inline;*/
    zoom: 1;    
}

.reportContainer
{
    display: block;
    width: 614px;
    height: 792px;
    overflow: hidden;
}

.reportContainer .day
{
    position: relative;
    display: block;
    background: #fff url(../images/report_bg_top.png) no-repeat top right;
    width: 614px;
    height: 792px;
}

.reportFooter
{
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 614px;
    background: url('../images/report_bg_bottom.png') no-repeat right bottom;
    height: 43px;
}

.reportType
{
    display: block;
    position: absolute;
    font-size: 1.5em;
    color: #fff;
    top: 20px;
    left: 32px; 
}

.reportRange
{
    display: block;
    position: absolute;
    font-weight: bold;
    top: 58px;
    left: 32px; 
}

.deviceSelectContainer, .printQueueContainer 
{
    display: block;
    border: 1px solid #000;
    position: absolute;
    left: 32px;
    width: 173px;
    z-index: 99;
}

.printQueueContainer
{
    top: 195px;
    height: 550px;
}

.deviceSelectContainer
{
    top: 94px;
    height: 92px;
}

.chartContainer
{
    position: absolute;
    left: 227px;
    top: 190px;
    border: 1px dashed #5DB3CE;
    height: 559px;
    width: 361px;
}

.chartContainer .chart
{
    display: block;
    margin: 4px;
    height: 25px;
    -moz-height: 27px;
    width: 348px;
    -moz-width: 350px;
    border: 1px solid #000;
}

.chartContainer .chart .header
{
    display: block;
    height: 19px;
    padding: 3px;
    background: #fff;
}

.chartShow
{
    height: 173px!important;
    -moz-height: 175px!important;
}

.chartHide
{
    height: 25px!important;
    -moz-height: 27px!important;
}

.daySelect
{
    position: absolute;
    display: block;
    top: 160px;
    left: 229px;
}

.workZoneSpeed
{
    display: block;
    position: absolute;
    top: 123px;
    left: 380px;
}

.redArrow
{
    position: absolute;
    top: 455px;
    left: 190px;
    z-index: 100;
}

#traffic_options {
width: 295px;
height: 150px;
padding: .25em;
border: 1px solid black;
background: white;
}

.traffic_title {
float: left;
padding: 2px;
width: 240px;
}

.traffic_scale {
text-align: center;
}

.traffic_scale_label {
font-size: 85%;
position: relative;
width: 58px;
}

.traffic_scale_colors {
position: relative;
margin: auto;
width: 66px;
}

.traffic_scale_color {
position: relative;
line-height: 6px;
float: left;
border: 1px solid gray;
margin-left: 2px;
margin-top: 2px;
margin-bottom: 2px;
width: 12px;
height: 6px;
opacity:0.4;
}

.traffic_black {
background: black;
}

.traffic_red {
background: #900;
}

.traffic_yellow {
background: #FC0;
}

.traffic_green {
background: #30B100;
}

.traffic_clearboth {
clear: both;
}

#changeTraffic {
padding-bottom: 10px;
line-height: 140%;
display: none;
}

.traffic_dow_cell {
padding-left: 1.5em;
}

.traffic_time_cell {
padding-left: 1em;
height: auto;
width: auto;
}

.traffic_disclaimer {
font-size: 65%;
padding-top: 10px;
}

.panSlider {
    background: #CCC;
    height: 16px;
    width: 200px;
}
.tiltSlider {
    background: #CCC;
    height: 16px;
    width: 200px;
}
.slider {
  background: #CCC;
  height: 16px;
  width: 200px;
}
.slider .knob {
    background: #000;
    width: 16px;
    height: 16px;
}
.panSlider .knob {
    background: #000;
    width: 16px;
    height: 16px;
}
.tiltSlider .knob {
    background: #000;
    width: 16px;
    height: 16px;
}
#fontSize {
  height: 50px;
  line-height: 50px;
}

.advanced {
  width: 400px;
  margin: 5px 0;
  background: #CCC;
}
  .advanced .knob {
    cursor: pointer;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
  }
#red .knob {
  background: red;
}
#green .knob {
  background: green;
}
#blue .knob {
  background: blue;
}

/*.dock .refreshCountdownTimer {
    display: inline-block;
    float: left;
    top: 1px;
    width : 100px;
    font: .75em sans-serif;
    color: black;    
    text-align : center;
}*/